Hong Kong Adobe Flash platform developer (Flex, AIR and Flash)
Posts tagged HTML
Blog Talk 2 – How to Implement Consistent Framework
06 years ago
by Vicker
in Web Usability
I think all of you have done the redesign assignment already and starting to write the report. When you are redesigning the web, I think most of you may have faced a certain problem in mind that is how to make all the pages consistent? As all the pages will have the same html opening tags, meta tags, linking of the style sheets, header navigation bar and the footer copyright declaration part. If I simply copy and paste it to every page, it is time consuming and not easy to maintain in the future. So I want to introduce a few methods here.
—————————————————————
1. Frames
I think I don’t need to talk too much about frames, it is just a standard HTML tag that is easy to implement. It will divide the screen into areas which each area will load it’s corresponding page.
The advantage is that it is server independent, any web hosting services can run it. However there are a bunch of problem using frames to achieve consistency which are shown below.
- Browser don’t know what to bookmark
- Opening the source will open the frameset but not the page
- Search engine will have problem crawling the pages
—————————————————————
2. Client Side Include
Include means that you will insert one page (in here HTML) into another one. For example, you may have a navigation menu which will appear in every page. So you can simply include the navigation menu page into every pages of your web site to achieve consistency. In here client side include means the include process is done on the client side which can be achieved using JavaScript.
Here is the JavaScript example:
<script type="text/javascript">
function print_header ()
{
var elem = document.getElementById (”header_content”);
elem.innerHTML = "<table><tr>...</tr></table>";
}
</script>
<span id="header_content"></span>
The advantage of using client side include is that it is server independent just like frame. Any browser which supports JavaScript will work. However there are a few disadvantages as below.
- Destroying HTML structure (if you look at the JavaScript structure, you can see that it is some sort of program and strings instead of standard HTML)
- Hard to maintain
- Search engine won’t be able to crawl because it is made at client side
—————————————————————
3. Server Side Include
In contrast, server side include is done by some server side scripting. It can be some simple ones like the SHTML or some complicated ones like PHP, ASP or JSP. The pros of server side include is that it can totally eliminate all the disadvantages in the previous methods. However the main disadvantage is that it is server dependent, and it is sad that CityU personal web do not support these.
The example of SHTML is illustrated below:
=> index.shtml
<!–#include file=”header.html”–>
<body>
……
</body>
<!–#include file=”footer.html”–>
=> header.html
<!DOCTYPEhtml PUBLIC “-//W3C//DTD XHTML 1.1//EN”"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh-tw”>
More resources and tutorials
How do I include another file inside a HTML file?
How do I include one HTML file in another?
The Form Assembly
06 years ago
by Vicker
in Web Usability
HTML Form, I guess anybody who written some web pages before should be familiar. It is not a really hard one actually. With some form elements like input, select, options, etc… the form already works. However is it usable and accessible? Have you done enough form validation? Have you provide enough labels for the form elements?
Building a good HTML form is not a easy task, especially if you want to follow those standards. Googling for a while, found out this web which is great to achieve the mentioned points above. The Form Assembly (http://www.formassembly.com)
Same as other informational web sites, there are articles and tutorials on building the web forms. But my focus are on the three links on the left hand side of the web.
Form Builder
A web tool which will help you to build your form in a standard format. What you have to do is just filling your requirements and thats it.
Form Library
Here you can access a large number of templates with different stlye and even different language.
Form Garden
Personally I suggest this to everyone, which is a CSS form builder. You can select the styles available on the right and test it in the center. After your selection, you can simply download the CSS and use it in your own web page.
It is so convenient with all these handy tools and the most important thing is that we can learn from their source and design :p
Web Content Accessibility Guidelines
06 years ago
by Vicker
in Web Usability
Before having the first lecture there are already quite a large number of things that can be explored simply browsing Andy’s web.
You may notice that there are a number of small icons on the bottom of Andy’s course web. Saying W3C XHTML, W3C CSS, W3C WCAG, BOBBY 508 and BOBBY AAA.
For the first two, I guess is quite familiar to many people. They are the standards posted by W3C. (World Wide Web Consortium) Using the validators provided by them, (HTML validator and CSS validator) anyone can check whether their web page fullfill the requirements of the standards. If it is a success, they can place this icon on their web.
But how about WCAG, 508 and Bobby??
Due to my curiosity, I have made some search on W3C. Actually WCAG stands for Web Content Accessibility Guidelines. It is a guideline which will make a website more accessible. (WCAG 1.0) Section 508 is something similar to WCAG but written in US Federal law.WCAG have a total of 3 accessibility compliance, A, AA and AAA. (where AAA is the best and of course the hardest to achieve) Although W3C do not provide any automated WCAG checker, we can still check it through WebXACT. (WebXACT) I guess the former name is Bobby but now changed. However even WebXACT can not do all the testing inside the guideline, because some of them are not coding related, e.g. color matching.
Although it is hard to acheive all these standards, I think as a web designer we should try our best to do at least most of these. This improves not only the speed of loading the page but also helping our visitors to browse.
