Having content alone isn't enough. It must look exciting and present information in interesting ways. Great web documents don't happen by accident. Anyone who knows the motion picture industry can tell you that the hardest part about making a movie isn't the actual shooting. It's the pre-production work that takes the most time and effort.
Likewise, when creating web documents it is important to decide what you want to do before you do it. Before you even crack the book on HTML, lay out your objectives, obtain financing for hardware and software, install the Internet and WAN links, and assign personnel to create and maintain the web architecture.
Once you've done your homework and have your system set up, you're ready to start creating content. In many ways, the web page creation cycle resembles a typical programming task:
As you build your "web" of information, step back every once in a while and reassess what you're doing. Are the topics well organized so that information can be found quickly? Are the graphics serving a useful purpose or are they just visual clutter? Are you accomplishing what you originally set out to do?
Another important part in creating a great web environment is to use your creativity.
"Imagination is the eye of the soul."
-- Joseph Jouber (1754-1824), French essayist
There are some great web sites on the Internet, and I guarantee that they weren't created in a day. The Wall Street Journal, for example, employs 25 persons to maintain their web site. The sophisticated images and animations that you see on the web are the result of many hours of hard work using various client and server applications. The tools you'll need to author web documents range from a simple text editor to an HTML authoring application; from a low-end paint application to high-end imaging software; and from a BASIC program to a sophisticated CGI script.
This AppNote is not intended to teach you all about HTML, so I suggest you buy a book on the subject. To get you rolling, here's a quick overview of HTML.
An HTML document is pure text; no special characters are used, such as control characters. Instead, a mechanism was developed whereby certain text codes or "tags" can be embedded in the document. These are then translated into modified text, actions, or other graphical items such as radio buttons.
As a simple example of an HTML document, look at the code listing in Figure 6.
Figure 6: Sample HTML code.
<HTML> <HEAD> <TITLE>Alan's Web Server</TITLE> </HEAD><BODY> <A HREF="/maps/index.map"> <IMG ALIGN=LEFT SRC="index.gif" ISMAP></A><H1>Alan's Web Server</H1> <img src="novman1.gif" align=right> <P> <font size=+1><br><br><br><br><br> <b>Welcome to Alan's Home Page.</b> This web site is running on the NetWare Web Server.<P> </font></BODY> </HTML> |
Each code, or tag, is enclosed by angle brackets (< and >). When a document is retrieved, the browser looks for the "<" character and interprets the codes until a ">" character is reached. Most formatting codes have a beginning and an ending. For instance, <b> means to display all text in bold until </b> is reached. HTML codes are based on English, which may make relationships such as I=Italic and U=Underline less intuitive in other languages.
Other commonly used codes are <BR> for line break and <HR> for horizontal rule (line). Extra line breaks are often inserted to place text in the desired spot. However, just from looking at the HTML code, it's very difficult to predict how a given page will look on a given system after being interpreted by a browser.
Also within this HTML document are several references to other files. For example:
<img src="novman1.gif" align=right>
Basically, this means that the "novman1.gif" graphic file will be displayed on the right side of the document.
Figure 7 shows what this HTML document looks after the codes are interpreted by a browser and displayed on the screen.
Figure 7: Resulting display
of the sample HTML document.
As you might imagine, forgetting to put in the proper ending code will change the appearance of your document--and probably not for the better. It's a good idea to use an application that inserts HTML codes for you, such as WordPerfect Internet Publisher. This tool allows you to take existing documents, apply HTML formatting to them, and preview the results in your browser. It will even insert references to graphics files. (See the section "Using WordPerfect Internet Publisher" in this AppNote for more information.)
Adding a graphic to an HTML document is easy. But again, you should always assess the effectiveness of a graphic before deciding to use it. Does the image look good when displayed on the screen? Is there a better way to represent an idea than using a familiar image found on a clip-art CD?
Currently, two basic graphics formats are used on the
web: GIF and JPEG.
JPEG image quality is represented on a scale from 1 to 100, where 100 is best and 1 is worst.
Note:
|
Reducing Graphics Size.The trick to reducing the size of a graphics file is to reduce the complexity of the image by limiting the number of colors in the image. Compression algorithms work best when there are few colors and lots of a single color.
The basic rule is to reduce the number of colors in a graphic to the point where the image is still pleasant and recognizable. The question becomes: How far can you reduce the graphic's resolution before the image becomes so ugly that it defies description? Figure 8 compares the results of applying various color schemes to the same image.
Figure 8: As you reduce the
number of colors in a graphic, the file size gets smaller but the quality also
deteriorates.
The following table compares the resulting file sizes for the image shown in Figure 8, in both GIF and JPEG format and using various numbers of colors.
| Quality | Colors | Format | Size (bytes) |
|---|---|---|---|
| Optimum | 256 | GIF | 54,100 |
| Windows | 256 | GIF | 41,400 |
| Custom | 128 | GIF | 48,000 |
| Custom | 64 | GIF | 41,000 |
| Custom | 16 | GIF | 30,500 |
| Custom | 8 | GIF | 25,700 |
| Best (100) | millions | JPEG | 61,200 |
| Very Good (75) | millions | JPEG | 22,000 |
| Good (50) | millions | JPEG | 18,600 |
| Preview (25) | millions | JPEG | 16,200 |
Palettes. Another concept to know about graphics involves palettes. Since most computers display at most 256 simultaneous colors, an image must be dithered either to a standard palette or to a unique one. For instance, in Figure 8, the top image is making use of 256 colors, which will look the best for that particular image. The image at the bottom was dithered to 8 colors. The 8-color image is less than half the size of the original, but its quality has diminished significantly.
Photographs will look their best when using a specially-created palette. However, a given system can use only one palette at a time. So an photographic image of a bright red apple that uses a palette of 256 shades of red will end up looking like a psychadelic fruit when displayed with the standard system palette. If you switch palettes to the apple's shades of red, your wallpaper (background image) of a blue sky will resemble a sunset on Venus.
Other Image Manipulation Tricks. There are two more tricks to image manipulation. The first is to interlace the file. GIF-interlaced files are not saved in top-down fashion like other images. Most images roll down the screen as they are being downloaded and displayed. But GIF-interlaced files are displayed every x number of lines, so that the user gets an idea of what's coming before the entire graphic is downloaded (see Figure 9).
Figure 9: A GIF-interlaced
graphic.
The second variation is to save a file as GIF-transparency. This has the effect of placing the image on top of the current background without any border or image background. In Figure 10, the Novell logo is a transparent GIF.
Figure 10: A transparent GIF
can be placed on the current background without any border or image background.
The sample HTML file in Figure 5 contains another interesting file reference:
<A HREF="/MAPS/INDEX.MAP">
The INDEX.MAP file in the MAPS directory is an "image map" file that corresponds to the actual image named INDEX.GIF. Whenever certain parts of this graphic are clicked on, the location of the click points to an action in the image page. For instance, if a picture of a car is displayed, a user could click on the body to see what colors are available for that model.
Figure 11 shows the actual image map file. Each point, such as (5,8) and (40,43), is a corner of a rectangular "hot spot" that defines a link to other files. On the NetWare Web Server, image maps are stored in the SYS:WEB/DOCS/IMAGES directory.
Figure 11: Sample INDEX.MAP
image map file.
#Index Map rect scripts/userid.bas 5,8 40,43 # Creating an Innerweb server Pres rect inerweb/inerweb.htm 5,51 40,87 # Download rect /download/download.htm 5,95 40,131 # Jokes rect /jokes/jokehome.ssi 178,8 213,43 # Jeopardy rect /jeopardy/jeopardy.htm 178,52 213,87 |
Although most web documents are downloaded to the client before processing, you can provide a specific means in which to download files. This is accomplished with the following HTML commands:
<A HREF=HTTP://"filename">
or
<A HREF=FTP://"filename">
Either command creates a link on the page which, when clicked on, triggers one of the following actions:
The problem with the first two possibilities is that, even though the file is downloaded, it is saved in the cache directory with a cryptic name. If you really want to have the user opt to download the file, you should make sure that the file extension is one which will have the browser prompt for an action (such as .ZIP, .EXE, or .SIT).
Another option is to install FTP services on the server. This is accomplished by installing NetWare NFS Services or NetWare Unix Print Services. Be aware that FTP is slower than HTTP.
Referencing Filenames. You can refer to a file specification using the Universal Naming Convention (UNC) that is supported by NetWare 4.1. The format is:
file:////server/volume/path
This syntax allows NetWare users to access files on other servers that they have rights to.
Note:
|
For more information about Web publishing and development, visit the Novell DeveloperNet Web site.