Home
Autobiography
Portfolio
Notes
Notes
Web page design
W
 

To define something beautiful or ugly has always been controversial and difficult. Different people have different standards. However, when it comes to web page design, there is a golden rule called 4 basic web page design principles:

Alignment: Pick up one particular alignment you desire and apply it throughout the whole web site. It helps enhance readability and leaves your site a sense of professionalism.
Proximity: Arrange the related items and elements together can greatly enhance the appearance of your web site and the viewers can also benefit from the increase of readability.
Contrast: Use different color or insert an image can help to set up a focal point for the viewers if you want to emphasize something to them.
Repetition: Repeatedly use of same style, color, elements helps to increase the consistency of the web site and helps to console the viewers - you are still here in the same site.

 

Cascading style sheets
C
 

CSS is a savior for those who need to manage the gigantic website since it helps to simplify web site maintaining routines by declaring some sort of "universal setting" ahead of the html file which will be applied to the whole site. You can either embed the CSS commands between <head></head> tag into a single html file or set up a .css standalone file to apply what you plan to do to the whole site. CSS is nothing new, similar concept has long been used by different programming tools such as the "class" in Java, "function" in C language, etc. With the help of CSS, you can change the font, font size, color, table format, spacing and other attributes easily and rapidly by the methods aforementioned. The drawback is not all the browsers have the same high level of compatibility with CSS such as Netscape. The following is a simple CSS example for controlling the body text:

<style type="text/css">
body {font-family: Arial, Geneva, Verdana, sans-serif; }

 
Managing a web site
M
 

Planning: Plan before you roll up your sleeves! Write down the sketch or imgaine a mental picture of what your work would look like can save you time and money.
Folder: It is the "container" we put our files in. It is always a good idea to categozie the web elements and place them into different folders directly related to the attributes of those files. For example, image files should be stored in a folder called image. Audio and video files should be placed in a folder named media. Doing so can definitely help you memorize where they are when you need them.
Naming: Always follow 8.3 format, that is max. 8 characters in main file name, with the max. 3 characters in its extension. Windows platforms allow us to use long file name and other weird file formats violating ISO level 1 and ISO 9660 character set because of its support to Unicode. However, most of the case-sensitive Unix-driven or Linux-driven web servers out there do not "buy" that. So, we would better be conservative about naming the files.
Backup: No one knows what is going to happen to our data or computer in the next 5 minutes, my practice is to duplicate the whole web site folder either in different partition or in a CD-RW after learning painful lessons. When things go wrong, you will realize the "beauty" of backup.
Index: Always name your home page as either index.htm or index.html. I believe there is no need to explain.

 
Navigation and site structure
N
 

A considerate web site designer should provide a clear navigation of a his/her web site to the viewers. Write down your idea on a piece of paper is a good start to deploy what you want to present in your web site. The reason is the maintenance or site structure revision can be a nightmare once the site has been established. For the commercial orgainizations, they just can not afford both the time and money to do this sort of "luxurious" act. Even for a personal site, it can also be very painful to scrutinize and revise everything once all the files are uploaded to the web server. Using the concept of furniture and apartment, first write down a draft, arrange your desired items and elements on it and figure out what to put where. If you feel everything is good finally and try to stick to this sketch and make it real, means start writing code. In short, smartly use of images backed up by the equivalent text and, if possible, along with a site index, can never make your viewer a stray cat in your labyrinthian site. Remember, your site is not an animal humane society, its main purpose is to "keep" viewers, not the "stray cats".

 
Photo presentation, graphics and Photoshop
G
 

Since broadband Internet access is still a luxury to majority, modem is the only resort for those people to reach the cyber world. For reaching the possible maximum number of viewers and testing the minimum amount of their patience, short download time is a key to keep audience so as to gain maximum site exposure. For either tantalizing audience or giving them a chance for preview, appropriate use of thumbnails with dimension 60 (w) x 60 (h), size with < 50k not only saves audience from being wrapped with spider net while downloading, but also increases the audience coming back rate. Alt tag is vital to carry the additional image message in case those images can not show up for whatever reasons. Furthermore, deciding using either jpeg or gif is also important since file size does matter. Unfortunately, no absolute answer for when to use which. Besides, thumbnails can also be used as navigation, just one rule here: No linear presentation. Last, we need some democracy - leave audience a chance to choose what they want to view or skip. The following are the traits of GIF and JPEG:

GIF: compressed, lossless, good for transparencies and can be interlaced. With max. 256 colors, only good for non-photographic image such as animation.
JPEG: higly compressed, lossy, transparency-unable, and interlace can be achieved by progressive setting. With max. 16.7M colors, good for photographs and bad for simple graphics due to the file size.

For Photoshop, it can be a huge topic to write with. Have you ever seen a book for Photoshop that is in compact size? However, several points worth to mention about this digital graphic mogul. Most people use Photoshop to scan their graphic works. Actually, it is not the only software for scanning, any other software you feel comfortable with is fine. Just remember to save as .psd for future manipulation. The selling point of Photoshop is its super power in the photo processing; black to white, red to green, solid color to transparency and so on. Skillfully use of layers can make impossible becomes possible. Image map and GIF can be made painlessly with the help of Photoshop. Many tailor-made functions for web site production are enclosed in the latest version. The thing is how proficient you are with this highly complicated software. One more thing, spend some little time to memorize hot keys is the first step to master this monster.

Examples for good photo presentations:
1. 3D car gallery http://www.3dcar.kg/index.htm
A lot of beautiful 3D pictures of car. What made this site special is it also teaches you how to make a professional 3D graphics with their gorgeous and vivid examples.

2. National Gallery of Art http://www.nga.gov/collection/collect.htm
This is a very educational, well categorized "photo presentation" site, no wonder, it is a museum site after all. A very clear explanation about every single work is provided. The interesting thing is they splitted some images to different portions known as "detail images".

3. An Act of War http://www.msnbc.com/c/0/23/595/ssMain.asp
This is a 911 memorial page from MSNBC. This gallery reiterates the tragedy with a series of striking photos. I chose this site as an example not because of any "web gimmicks", nor fantastic page design, but for the "content" of the photos. Those photos successfully and faithfully reflect what the photographers wish to present!

 

 
Interactive online maps
I
 

I believe most people are right brain-dominated, that means they are much more sensitive to the graphics, images than any other textual materials. Image map is a good way to do your web site. What is the map for? Show direction. The essence of interactive map is its interactive ability. Interactive maps do more than the traditional print map. It tells something, it leads to somewhere, it provides additional information when the viewer moves his mouse over the regions called "hotspots". However, the map is not necessary to be a "map", it can be a photo, a bunch of photos, or any other web elements that can hold the embedded links. Interactive map can be built either by "sliced images" or "image map". Similar to JPEG and GIF, when to use which, depends on the web designer. Both Photoshop and Dreamweaver and many other applications also offer the map production ability. But a more traditional or "legitimate" way to do an image map is by Photoshop. With Photoshop, you can get the exact coordinations of the map's hotspot areas easily, those mahcine-made codes can then be "implanted" to anywhere you want for further manipulations.

This is a good example for interactive map. http://www.letour.fr/1999/flash/
This flash map is written in French. I do not know French language. But for this map, anyone can understand what it is with the help of its wonderful visual presentation. I guess this map is an itinerary for car racing, maybe bike racing. One hint is the sponsor's logo of Michelin at the bottom of the page. When you move your mouse along the route in this map, you can get the information of when the race takes place and how far it is between the two racing stops. Very informative and concise, it is a nice map.

 
Audio, video plugins, players and animation
P
 

There are 3 big names dominating the electronic media industry: Quicktime player (.mov) from Apple, Realplayer (.rm) from Real and Windows Media Player (.wma, . asf, etc.) from Microsoft. Divx, Mpeg2/3/4, AAC, VQF, etc are their "cousins". Sometimes a third-party application is needed for handling "alien" information that our browser does not "inherently" support. Plug-in is a little program that helps our browser this way. Players can be classified as embedded or independent. Embedded means such player is inserted into the html code. Almost every couple of weeks, a brand new media format emerges because everyone wants to occupy a market position to some degree. Not easy to count how many media formats are out there actually. In terms of reputation and compatibility, those 3 players are most popular. But for the data compression rate, they may not be the champions, some less-known file format such as VQF is much more famous among those Internet-savvy users' minds.

Again, file size does matter, we have to judge or convince ourselves if there are any "reasons" for us to put those "gimmicks" on our websites. Who are our targeted audience and what sort of information we would like to deliver? Let's take a look at Intel's and Microsoft's official web sites, you can hardly find any "interesting gimmicks" in their web site. Those industry leaders have all the resources to play around with it if they want to. But corporate image does not allow them to do so. For the online audio data, 2 basic rules we can follow:

1. For the human voice sound clips, audio sampling of 11.25 kHz is enough, don't bother with if it is stereo or not.
2. For CD sound quality, sampling rate of 44.1 kHz should be used.

Variance in sampling rate helps explain why some MP3 music are messy, and some are wonderful.

 
Using Flash MX
F
 

Flash is very popular in these recent years. It becomes a necessity for webmasters and other average users. The use of Flash can be seen everywhere ranging from advertising, slide presentation to interactive materials, audio, video, you name it. It is fast with no compromise with quality because its graphics are vector-based and streaming technology is used while downloading. Is it easy to use, that depends. Frames, layers, symbols and timeline are the major "ingredience" to make the animation possible. Its working theory is equivalent to the traditional cartoon. Hints for using Flash effectively are as follows:

1. Always set the height and width of the stage FIRST before doing anything.
2. Once something is drawn, make it a symbol and place it in the library.
3. Like Photoshop, use hot keys to do the rountine jobs.
4. Fully understand the difference among 3 different kinds of symbols: Graphic, button and movie clip
5. Always use a new layer to accomodate your new character for the ease of management.
6. Always name the layer with Actionscript as Actions, it is important in a fairly complex work.
7. MP3 format should be used if audio clip is needed.

 
Html forms
H
 

Having a form in the web site is a good way to perform communications, not only client to server and also web designer to the audience. Forms are easy to make, just follow the html syntax: Use <form></form> to enclose the form elements. Clarify the features of Name, Method and Action before using them. Attention should be paid when dealing with forms:

1. Form can not be inside the other form. Different names should be assigned to different forms to Forms work.
2. Use Table to accomodate the form elements to acheive alignment.
3. Choose "Post" in Method if in doubt.
4. Checkbox is good for choosing more than one option.
5. Radio button is good for only one choice.
6. Always give a name that is relevant to the data field instead of using the default names.
7. There should be no more than one Submit button for one form.

Here is an example for an interactive poll. http://www.flash-db.com/Poll/
The poll is driven by PHP. You will see a little pull down menu marked with "scripting language" (in the left) in which you can vote for your favorite OS, database and so on. What make this poll significant is the use of flash, the real time result with some vivid flash graphics will automatically pop up once you voted. The result is clear and fast. When you move your mouse over the graphic result (a bar or a sector of the circle), additional information related to that sector/bar will be shown.

 
Database
D
 

Database means a self describing collection of integrated records. There are 3 levels of database architecture: External, conceptual and internal. Schema means description of the database. Instance means actual data in database at any point of time. A software used to define, create, maintain and access a database is called database management systems (DBMS). SQL is one of them. There are 4 major keys for relating different tables in a database: Candidate key, primary key, alternate key and foreign key. There are 3 types of relationships between entities and cardinality constraints: 1 to 1, 1 to many and many to many. One to many is most common. Database models can also be divided into 3 tiers: What the browser presents, business logic such as B2B and back-end. A transaction is an important notion in database. There is no partial completion in database. Take online banking as an example, for security reason, changes will not really take place in database until the entire transaction really completes.

 

 

Email me: nawrence@yahoo.com