Part 4 - More Tools for Building Web Pages

Page creation

One of the most efficient strategies for Web-page authoring is to develop the pages with a WYSIWYG editor such as Netscape Navigator Gold, Microsoft FrontPage, etc. and then enhance the HTML code by hand, in order to add "whizzy" features. In this section, we'll do just that, with some step-by-step examples of how to add custom fonts, embedded VRML and so on.

Adobe PageMill

There is no shortage of tools for creating your own Web pages, especially since you don't really need any special tools. Any word processor or text editor capable of creating plain text files can serve as a quick-'n'-dirty HTML-authoring utility. Of course, such a bare-bones approach doesn't provide much in the way of luxury - you're on your own as far as inserting special HTML codes and tags for graphics, page links and so on. However, the sheer speed of plain-text editors such as Notepad (Windows) or SimpleText (Macintosh) makes these the choice of some do-it-yourselfers (including yours truly, at least for simple page changes and additions).

There are many robust HTML-authoring solutions available, both commercially and freely.

A good choice for beginners is Adobe's (recently discontinued) PageMill. Version 1.0 wasn't capable of forms, tables or other advanced features, but version 2, released in Aug. '96, added these and other new capabilities, while retaining PageMill's speed and simplicity.

Note, however, that even the most recent version of PageMill doesn't support many of the "extended tags" that recent releases of Netscape and Microsoft Internet Explorer use to add pizzazz to Web pages, such as tables, frames, embedded font and movie or sound information. However, unlike the 1.0 release, you can edit the HTML code directly in version 2. To address the perceived limitations of PageMill, Adobe discontinued it in favour of GoLive, in the Spring of 2000.

Still, for basic text and graphics, PageMill is one of the fastest and most trouble-free editors available.

One potential problem you may notice: if you download a page to work on it, but don't download (or otherwise have access to) all the graphics that go with it, PageMill resizes all the graphics to tiny 50-pixel-square boxes.

More info on Adobe's web- and site-management tools is available at www.adobe.com.

FrontPage

FrontPage is a package for Windows 9x that is much more than a Web-page editor. The package, which originally sold for US$695 until Microsoft bought Vermeer, the company that developed it, and reduced the price to $149, was named a Hot Pick at the 1995 Seybold Publishing conference in San Francisco. FrontPage provides page-creation, site-administration, and Web-server software -- literally, everything you need to create and maintain your own Web site. It comes with a set of server-side "FrontPage Extensions" that provide a number of complex services to add to a Web site: threaded discussion groups, advanced search capabilities (via WAIS), forms creation, and automatic table of contents generation.

The page-editor portion of the package is comparable to (but with fewer limitations than) Adobe PageMill. In the original Vermeer release, you had to be very careful when loading a page into FrontPage's editor, as its HTML-checking routines would foul up tables that have previously been (manually) designed with Frames and Tables. There was an easy workaround, described in the documentation, but it lessened our enthusiasm for that version's editor. Subsequent Microsoft releases addressed this limitation, and added support for tables, frames, and many other HTML 3.0 and HTML 4.0 enhancements.

The program's greatest strength is its "Bots," a series of automated functions that make the creation of corporate or personal Web sites almost child's play. You merely tell the program what kind of Web site you want to create (corporate, product-oriented, personal, discussion group, etc.), pick a "style," -- ranging from traditional to too-cool - answer a few questions about the name of your company and so on, and bingo! The program spits out a series of linked pages, with all of the goodies that are standard fare on most Web sites: a home page, "What's New" section, button bars along the bottom of each page, "your logo here" graphic placeholders, and so on - all nicely designed and formatted.

Once you've got your Web pages designed and checked (FrontPage includes a built-in spelling checker, but please, give your pages a careful examination anyway), you are ready to serve them to the world. It's surprisingly easy with FrontPage, which includes "personal server" software for your Windows PC from NCSA, based on HTTPD, a popular public-domain Web-server standard. The package includes the necessary "CGI-bin" code to enable searches and forms handling (etc.), and, if your server needs exceed the capabilities of this admittedly low-end PC-based server, Microsoft makes CGI-bin code for FrontPage functions freely available for Unix machines running Netscape, Apache, NCSA, WebSite servers and, of course, its own Windows NT-based servers. In other words, if your Web site becomes so popular that you outgrow your "personal Web server," you can move your pages to an industrial-strength host without losing functionality.

In all, this is one of the easiest to use of the advanced Web site utilities on the market, and, even without the Server-side extensions (which many ISPs are loathe to install) it works very well.

On the subject of authoring, there are a variety of tools for converting "legacy" documents, such as word processor files. Here are a few of the many titles we've tested:

FrontPage (Win32)
DreamWeaver
HoT MetaL Pro 3.0
Internet Assistant for Word (Win95)
Internet Assistant for Word (Mac)
Netscape Gold 2.0 and 3.0
Hot Dog Pro
PageSpinner 1.2 (Mac)
HexWeb for QuarkXPress (Mac)
PageMill 1.0
HTMLedPro (Win)
Web Studio (Win)
Adobe Word for Word (Win/Mac)
PageMaker 6.x

From our tests, we have concluded that FrontPage and the Win32 version of Word are best for documents containing tabular data, while HoT MetaL Pro 3.0 handles graphics more elegantly than most (FrontPage and IAFW are second and third-best at handling graphics, respectively).

DreamWeaver is ideally suited for "cleaning up" HTML files, especially those created by Microsoft Word. This is, in fact, the function we find most useful in the program.

HoTMetaL Pro’s drag-and-drop functions are smart enough to only allow the insertion of markup tags where they make sense. For example, you can’t drop a

tag outside the area of your page.

Like many other editors, HoTMetal includes a selection of templates for common document types. products

HoTMetaL's inability to easily repair faulty code is a drawback, though. Surprisingly, the HexWeb product didn't support inline graphics at all, and forced us to process long documents a page at a time. Navigator Gold only imports plain text documents, so was much less adept than any of the above-mentioned titles at converting existing styled text documents, but has the best interface overall.

PageMill, Navigator Gold (3.0) and WebStudio were the only titles that caused us to lose work due to fatal crashes during our tests (Navigator Gold 3.0 has, of course, since been superseded by Netscape Communicator). Interestingly, several of the programs tested differed widely in their translation of special characters such as trademark symbols.

Here is a synopsis of some of the notable variations:

The ™ Test

FrontPage - translated as ™ (CHR$ 153) = correct
HoTMetaL Pro 3.0 - translated as å = incorrect
HTMLed Pro - no conversion = correct on certain systems
Adobe Word for Word (HTML3 option) - translated as ™ = incorrect
Adobe Word for Word (Netscape 2 option) - translated as _ = incorrect

The numbered list at the beginning of this section shows the approximate ranking of the HTML prowess and overall elegance of the products in our tests.

Custom colors
- a short course in Hex: http://ww.echonyc.com/~xixac/Mediarama/hex.html

Enhancing your Pages

The above-mentioned authoring tools are the best way to add tables, backgrounds, and dynamic

updating to documents. Not all web browsers support these (or certain other) features, but these extensions are part of the latest HTML specification, so it is reasonable to expect them to continue to grow in popularity.

Extensions to HTML

http://www.netscape.com/assist/net_sites/html_extensions.html

All of the extensions to HTML take the form of additional tags and attributes added to the HTML specification and are specifically designed not to break existing WWW browsers. In other words, adding these tags will not prevent any browsers from viewing them.

ADDITIONS BY NETSCAPE

<ISINDEX>

To the ISINDEX element Netscape has added the PROMPT tag. ISINDEX indicates that a document is a searchable index. PROMPT has been added so the document author can specify what message they want to appear before the text input field of the index. The default is of course that unfortunate message:

This is a searchable index. Enter search keywords:

<HR>

The HR element specifies that a horizontal rule of some sort (The default being a shaded engraved line) be drawn across the page. To this element Netscape has added 4 new tags to allow the document author some ability to describe how the horizontal rule should look.

<HR SIZE=number>

The SIZE tag lets the author give an indication of how thick they wish the horizontal rule to be.

<HR WIDTH=number|percent>

The default horizontal rule is always as wide as the page. With the WIDTH tag, the author can specify an exact width in pixels, or a relative width measured in percent of document width.

<HR ALIGN=left|right|center>

Now that horizontal rules do not have to be the width of the page the author needs to specify whether they should be pushed up against the left margin, the right margin, or centered in the page.

<HR NOSHADE>

Finally, for those times when you really want a solid bar, the NOSHADE tag lets you specify that you do not want any fancy shading of your horizontal rule.

<UL>

Your basic bulleted list has a default progression of bullet types that changes as you move through indented levels. From a solid disc, to a circle to a square. Netscape has added a TYPE tag to the UL element so no matter what your indent level you can specify whether you want a TYPE=disc, TYPE=circle, or TYPE=square as your bullet.

<OL>

Your average ordered list counts 1, 2, 3, ... etc. Netscape hashave also added the TYPE tag to this element to allow authors to specify whether the want their list items marked with: capital letters (TYPE=A), small letters (TYPE=a), large roman numerals (TYPE=I), small roman numerals (TYPE=i), or the default numbers (TYPE=1).

For lists that wish to start at values other than 1 Netscape has added the new tag START. START is always specified in the default numbers, and will be converted based on TYPE before display. Thus START=5 would display either an 'E', 'e', 'V', 'v', or '5' based on the TYPE tag.

<LI>

To give even more flexibility to lists, Netscape says it thought it would be nice if the author could change the list type, and for ordered lists the list count index as they progressed. To this end Netscape hasadded the TYPE tag to the LI element as well.

It takes the same values as either UL or OL depending on the type of list you are in, and it changes the list type for that item, and all subsequent items. For ordered lists Netscape has also added the VALUE element so you can change the count, for that list item and all subsequent.

<IMG>

The IMG tag is probably the most extended tag.

The additions to your ALIGN options needs a lot of explanation. First, the values "left" and "right". Images with those alignments are an entirely new floating image type. A ALIGN=left image will float down and over to the left margin (into the next available space there), and subsequent text will wrap around the right hand side of that image. Likewise for ALIGN=right the image aligns with the right margin, and the text wraps around the left.

The rest of the align options are my way of trying to correct for the errors I made when first implementing the IMG tag, without destroying the look of existing documents. ALIGN=top does just what it always did, which is align itself with the top of the tallest item in the line. ALIGN=texttop does what many people thought top should do which is align itself with the top of the tallest text in the line (this is usually but not always the same as ALIGN=top). ALIGN=middle does just what it always did, it aligns the baseline of the current line with the middle of the image. ALIGN=absmiddle does what middle should have done which is align the middle of the current line with the middle of the image. ALIGN=baseline aligns the bottom of the image with the baseline of the current line. ALIGN=bottom does just what it always did (which is identical to ALIGN=baseline but baseline is a better name). ALIGN=absbottom does what bottom should have done which is align the bottom of the image with the bottom of the current line.

<IMG WIDTH=value HEIGHT=value>

The WIDTH and HEIGHT tags were added to IMG mainly to speed up display of the document. If the author specifies these, the viewer of their document will not have to wait for the image to be loaded over the network and its size calculated.

<IMG BORDER=value>

This lets the document author control the thickness of the border around an image displayed. Warning: setting BORDER=0 on images that are also part of anchors may confuse your users as they are used to a colored border indicating an image is an anchor.

<IMG VSPACE=value HSPACE=value>

For the floating images it is likely that the author does not want them pressing up against the text wrapped around the image. VSPACE controls the vertical space above and below the image, while HSPACE controls the horizontal space to the left and right of the image.

 

With the addition of floating images, Netscape has expanded the BR tag. Normal BR still just inserts a line break. Netscape has added a CLEAR tag to BR, so CLEAR=left will break the line, and move vertically down until you have a clear left margin (no floating images). CLEAR=right does the same for the right margin, and CLEAR=all moves down until both margins are clear of images.

NEW ELEMENTS

The NOBR element stands for NO BReak. This means all the text between the start and end of the NOBR elements cannot have line breaks inserted between them. While NOBR is essential for those odd character sequences you really don't want broken, please be careful; long text strings inside of NOBR elements can look rather odd.

The WBR element stands for Word Break. This is for the very rare case when you have a NOBR section and you know exactly where you want it to break. Also, any time you want to give the Netscape Navigator help by telling it where a word is allowed to be broken. The WBR element does not force a line break (BR does that) it simply lets the Netscape Navigator know where a line break is allowed to be inserted if needed.

Surprise! You can change the FONT size. Valid values range from 1-7. The default FONT size is 3. The value given to size can optionally have a '+' or '-' character in front of it to specify that it is relative the the document baseFONT. The default baseFONT is 3, and can be changed with the BASEFONT element.

 You can specify font names, and the system will use the first one in your list that it finds. The default is Times.

<BASEFONT SIZE=value>

This changes the size of the BASEFONT that all relative FONT changes are based on. It defaults to 3, and has a valid range of 1-7.

<CENTER>

Although it's not recommended, virtually all browsers support the Netscape <CENTER> tag. With it, you can -- you guessed it -- center your text. All lines of text between the begin and end of CENTER are centered between the current left and right margins. A new tag has been introduced rather than using the proposed  because using  breaks many existing browsers when the  tag is used as a container. The  tag is also less general and does not support all cases where centering may be desired.

BEHAVIORAL CHANGES

Font attributes are now properly cumulative. Text inside something like

<tt>Text here</tt>

will be italic fixed bold text of size 6.

The Netscape Navigator should now properly deal with the awful HTML comment sequence. This should be:

These comments can include other elements, and thus be used to quickly comment out large chunks of markup. Line breaking is a little more under control now. Unless specified with a formatting element, lines can only be broken where empty space occurs in the original document. This means any spaces, tabs, or newlines. You should never again have the sequence <A HREF=url>Anchor here</A>. broken between the highlighted anchor and the period.

NEW ENTITIES

In addition to the usual & escaped entities:

® -> Registered Trademark -> ®

© -> Copyright -> ©

Adding Fonts

It is easy to add font commands to your web pages using the above technique, but what fonts should you specify?

Because most Web browsers default to Times as their default font, there’s not much point in specifying it. A Sans Serif Headline or body font, however, can be a nice change.

Helvetica is a common sans serif typeface. Windows PC users are likely to have Arial installed, and Macintosh computers come with a sans serif face called Geneva. These are all good choices.

A few other fonts are in common use on the Web. Microsoft has posted a number of free TrueType fonts, including Arial (including Bold and Black variations!), Impact, ComicSans, Times New Roman, Verdana and that old standby, Courier. Fonts are provided in Windows and Mac formats. Any of these are a good choice.

Document Type Definition

What’s with those weird symbols that some authoring tools (such as Netscape Navigator Gold) put at the top of pages?

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

This, believe it or not, is a so-called document type definition header. It tells HTML-savvy programs that the text is in english (that’s the “EN” at the end, and so on. Navigator Gold and many other authoring tools will add this code automatically, I don’t bother typing it in by hand.

Navigator Gold also puts in a line that says

<meta name="GENERATOR" content="Mozilla/3.0Gold (Win32)">

Setting up a response form in FrontPage:

Using FrontPage, it is quite easy to set up an interactive form, in which the user can send comments, questionaires or other information to you. Alternatively, you may elect to store them in a file you can easily access. Here’s how to set it up.

response via e-mail
save results in a text file, HTML page or database format.

Notes: Internet Explorer 3.0 does not, at this time, support the e-mailing of forms data. Microsoft is aware of the problem. The document http://www.microsoft.com/IESupport/content/Issues has more information.

See Microsoft's Web site for more info: www.microsoft.com.

Hot Dog and Hot Dog Pro

US$39.95 and US$79.95 respectively from Sausage Software (www.sausage.com)

If you spend much time on the Internet looking for collections of the latest and greatest Internet tools, you are bound to run across Forrest J. Stroud's Consummate Winsock Collection. This site, which Windows-based Internet users will find to be an invaluable resource, contains links to virtually every significant Internet utility available for the PC.

However, the reviews and ratings of these programs are a matter of opinion. Case in point: Hot Dog Pro, from Sausage Software, is rated by Stroud as "the best HTML-authoring tool available on any platform." While it certainly has the most features of any program we've seen (including support for nearly all HTML 3.0, Netscape 2.0, and Microsoft Internet Explorer extended tags), it is not particularly easy to learn and, at least in my tests, is quite clumsy in actual use. Nevertheless, it's worth checking out a free 30-day eval copy, available from the www.sausage.com site. Microsoft Internet Assistant 2.0

Free Tools

It's no wonder Adobe discontinued PageMill. If I was Adobe chief John Warnock back in 1999, I'd have been a little nervous about how much better the competition was than PageMill. If the freely downloadable Netscape Navigator's Composer feature wasn't enough, Microsoft Windows users could download FrontPage Express. Both were quite good, albeit basic,WYSIWYG Web page editors, although, as you might expect of a free version of FrontPage, it lacked many features of its commercial sibling. However, tables are supported, and it supports extended tags for color fonts, table background colors (supported by Internet Explorer and Navigator 3.0 and later), centering and embedded graphics.

Here is a simple example of a table made by Word. Bitmapped backgrounds are supported ...and Internet Explorer-compatible sounds, too!

This free Internet Assistant for Word program requires Word for Windows 95 (an earlier and less-capable version that works with Word 6.0a under Windows 3.1 is also available) and turns Word into a combination Web browser and HTML editor. As a Web browser, I'd give this one a miss (it's quite slow and rather limited, compared to, say, Netscape), but as an HTML page editor, it's quite successful and easy to use, despite the fact that purists will find that it creates rather sloppy HTML code. I don't buy Stroud's complaint that it is unusable on anything less than a Pentium, though. I tested Internet Assistant 2.0 on a 486/50 with 16MB of RAM, and found its performance quite acceptable. Internet Assistant is uniquely integrated into the Windows 95 environment. When you install it, a new option becomes available when you right-click on an HTML file: in addition to the usual "open" command, you'll find "edit." When this command is invoked, the file opens right up in Word, which parses the file, and displays it in full WYSIWYG mode. It interprets the text styles, links, GIFs, and JPEGs, plus adds support for a number of enhancements specific to Microsoft Internet Explorer: fonts, colors, and several other extended tags. Naturally, you have access to the plentiful array of editing and spelling-checker tools in Word, as well.

Unlike the first version of Internet Assistant, the 2.0 release can also switch to non-WYSIWYG mode, to view and edit "raw" HTML. One other interesting feature of Internet Assistant is its ability to download a page directly off the Internet and open it for editing.

In all, Internet Assistant is a classic example of the way Microsoft seems to tackle many of its markets: the company comes out with a basic version early, and then works to upgrade it until the product is right up there with best-of-breed. And then, much to the chagrin of its competitors, we're sure, Microsoft gives it away for free, as it has done with Internet Explorer, Virtual Explorer, Internet Assistant, the special offer on MS Money, and other promotions. Internet Assistant is a must-see if you are a Word for Windows 95 user interested in a WYSIWYG Web-page authoring environment.

HTMLed Pro

This Windows-based HTML editor takes a considerably different tack than the above-mentioned titles. Internet Software Technologies has focused on the needs of professional page designers and has come up with a product that trades off some ease of use for powerful capabilities such as the ability to handle forms, tables, and Netscape and HTML 3.0 tags. Check out the product at the company's Web site: www.ist.ca

Internet Explorer-specific Techniques

Marquees

Adding a link to a marquee

<A HREF="Win95-subliminals.html"><b> 
<I> <FONT color=#ff4400 FACE="Comic Sans MS" SIZE=2> 
<MARQUEE VSPACE=5 DIRECTION=left BEHAVIOR=scroll WIDTH=100% BORDER=0 
SCROLLAMOUNT=5 SCROLLDELAY=.1>Are there subliminal messages in Windows 95? 
Click here to find out!</MARQUEE></A></font> </I></b>

Animation

For Internet Explorer, you can specify an AVI animation as follows:

<IMG alt="GIF anim by GSB" ALIGN=left HSPACE=18 
WIDTH=50 HEIGHT=50 SRC="win95sky.gif" DYNSRC=" Win95sky.avi"
 LOOP=INFINITE>

Note that, generally, an animated GIF is a better idea, as it is compatible with more browsers and loads faster. If you need to convert an AVI to an animated GIF, use GIF Construction Set 1.0N or later.

Early releases of GIF Construction Set were "bookware." The program's author, Steve Rimmer, asked that you read his book, The Order (ISBN #1-895268-02-8). By looking up a word on a specific page of the book, it was possible to turn off the "beg notice" of an unregistered copy. Although recent versions of GIFCON are shareware, this lookup phrase still works as the registration keyword in the new releases. If you do not have the book and/or simply want to register the shareware title, of course you can contact the company, pay your money, and receive a password. Recent versions of GIF Construction Set have added a number of features designed to make it easier to create animated GIF sequences. Animated banners, transitions and other effects are easy to assemble with the utility. Get it from http://www.mindworkshop.com/alchemy/alchemy.html

To convert a QuickTime movie to an AVI, use the PC version of Adobe Premiere. To convert a QuickTime movie to an animated GIF, use GIFbuilder.

For Netscape, one of the most popular animation/interactive media solutions is ShockWave, which uses Macromedia Director, a $1495 (the street price is about US$800) authoring tool for Windows or Mac. Support for AVI files is built into Microsoft Internet Explorer 2.0. Netscape 2.0 and other browsers require a helper app to play AVI or QuickTime files, although Navigator version 3.0 directly supports AVI, QuickTime, MIDI and other multimedia types. For those who prefer Netscape 2.02, all of these formats are supported via a range of optional plug-ins. Although the limited bandwidth of a modem-connected Internet user makes full-frame video impractical, small "postage-stamp" videos can be delivered using today's technology. The two leading systems are Xing Streamworks and VDOLive. Both are available for Windows; the former, a helper app, suffers from a clumsy interface; we'd rate VDOlive (available as a standalone help app or a Netscape plug-in) as more promising overall. In mid-June 1996, a Java-based "OnlineTV" went into testing. Check it out at http://www.onlinetv.com. Developer Rick Spiegal says OnlineTV can display live video and audio at 30 frames per second on a computer with an 56K or better connection.

A conferencing system called CUSeeMe, developed at Cornell University, provides much slower frame-rates and poorer fidelity audio than the above-mentioned products, but nevertheless has garnered a substantial following, partially due to the fact that it is available for both Windows and

Macintosh computers, but primarily because it allows users with an AV Mac or video-capture board on their computer (such as Connectix's US$99 QuickCam for Windows and Mac) to broadcast audio and video over the Net.

Problem Solving

Common Errors

Symptom: missing text, broken link or underlined paragraph
Cause: missing end quote
Solution: note position of error. Just before that section, you will discover a missing quotation mark, typically something like this:
<A HREF="broken>
Edit and re-upload text.
<A HREF="fixed">

Symptom: page works on your hard drive but not when posted to a web site
Cause: filenames are case sensitive. Check case of filename.

Bitmapped Graphics

Gamma Differences

It’s worth mentioning at the outset that you should be aware that Macs and PCs typically display graphics somewhat differently. Usually, a graphic that looks “just right” on a Mac will display too dark on a PC. This is due to differences in the default gamma settings (the problem apparently originated back in the days when Apple was the only supplier of monitors for its computers and defined the gamma for its AppleColor RGB units. This became the Mac standard.)

At any rate, Mac users should check the graphics they create on a Mac on a PC to make sure shadows and low-contrast areas are not too dark.

Introduction to graphics

Bandwidth use has grown at a hyperexponential rate over the last few years, primarily due to the graphics-intensive nature of the web.

For example, as of June, 1994, the amount of net traffic on NSFNET alone due to WWW was 799,162,732,200 bytes. Compare this to a byte-count of 3,602,330 in June 1990. This was an increase of over 220,000 times in only four years -- and that was before the "Internet boom!" Video, voice and other multimedia on the net has caused this growth to continue at almost the same hyperexponential rate.

The following comparisons of file sizes show the magnitude of the problem being faced by the increased use of images.

A standard 80 x 24 screen full of text requires just under 2 K to store. A similar sized full colour image requires just over 900 K to store (a ratio of 450:1). For comparison (rounded figures, no compression):

300K - a two hundred and fifty page novel
300K - a 640x480, 8 bit/256 colour image
900K - a 640x480, 24 bit/16 million colour image
128K - a 1024x1024 1 bit/black and white image
1024K - a 1024x1024 , 8 bit/256 colour image
3072K - a 1024x1024 , 24 bit/16 million colour image

Be judicious with your graphics and frugal with your bandwidth. Provide an option to turn off animations (especially those that blink or loop incessantly), and always optimize your graphics to ensure that they download as quickly as possible (a list of tools for this purpose is described later in this module). Advise users about the size of large images and provide thumbnail versions of larger pics if you are putting together a gallery of any type. I’m personally not a fan of having two sets of pages – one graphics-intensive and the other plain text – because it is twice as much work to maintain.

GIF It Up

In this section, we'll explore some of the richer possibilities of the most common image file format on the web: the ubiquitous GIF Graphics Interchange Format. For the sake of completeness, let’s start at the beginning and describe the various forms and possibilities of the GIF image file format.

First, some background information. The GIF format was developed by CompuServe. Apparently -- and I have this from a very reliable source -- the original programmers at CompuServe pronounced the acronym "JIF," although it appears that common usage these days favors "GHIF" as a pronunciation. Suit yourself. I'm going to call it GHIF next time somebody asks.

The version of the GIF format first popularized by CompuServe is known as GIF87. This is not a particularly versatile format, but it has one redeeming feature. GIF’s main claim to fame is its very compact file format. Obviously, this makes it a great choice as a telecommunications-oriented graphics format. GIF achieves its small file sizes thanks to a method of compression called LZW (which, in case you were wondering, happens to be named for the initials of the last names of the compression algorithm’s inventors: Lempel, Ziv and Welch). So now you know!

LZW compression, as it turns out, is now controlled by Unisys, which holds a patent on the compression method. For background information on the Unisys LZW patent and how it affects software (and even web sites) which use GIF images, see the Burn All GIFs web site.

Here is what’s possible with GIF87:

256 or fewer colors or shades of gray

That’s it, basically.

Pro: GIF images are supported by virtually every web browser in existence.

Con: not ideally suited to photographic images, all those illegal scans from nudie magazines notwithstanding.

Notes: A GIF image can have less than 256 colors, and GIFs with fewer colors are smaller.

Fortunately, a more recent implementation called GIF89a is much more versatile. Creating GIF foreground objects that exactly align with bitmapped backgrounds, GIFs with realistic drop-shadows, interesting animated effects, quick-loading low-res versions and so on are just a few of the possibilities explored here. First, let's explore the two "classic" GIF89a features: interlacing and transparency.

Interlaced GIF

When should you interlace a GIF file? When it is a graphic that will benefit from a quick-loading low-resolution preview display. You should not interlace images when the image contains bitmapped text, as in the case of a screen dump or captioned chart. It is frustrating for the user to load a graphic that first displays text they can't read, followed by slightly less blocky text they still can't read, and so on. If the GIF was not interlaced, they could immediately view the information at the top of the graphic. Thus, they have something to do as the rest of the graphic is loading.

How do Interlaced GIFs work? As the name implies, the secret is that the data is interleaved. As a simple example, imagine that an image is cut up into 100 thin strips and then displayed in such a way that, instead of lines 1-100 of your graphic being displayed in sequential order, you could see half the odd-numbered lines first, then half the even lines, then the other half of the odd lines, then the remainder of the even lines. With a little imagination, you could "fill in the blanks" and imagine the missing parts of the picture perhaps as soon as 25% of the pieces had been laid out.

This is the basic theory of interlaced GIFs. Thus, there is a sort of "Venetian blind effect" that makes the image appear at "25% quality" first, and then, as the other lines fill in the blanks 25% at a pass, the image fidelity improves. When the Interlace attribute is set, the graphics application reorders the bits in the image, which you then, of course, save. As long as the application that views the subsequent image supports interlaced GIFs (virtually all do these days), the image will be displayed in multiple passes (four, to be precise) of increasing quality until the entire file has been read and the full quality image is seen.

How to Interlace a GIF

If your graphics application supports only the original GIF87 specification (as does the standard Save as GIF... command of Photoshop 3.0), you'll have to resort to another method to convert images to the newer GIF89a spec, which allows image attributes such as transparency, interlacing, GIF animation and other nifty features.

For Windows, the GIF toolkit of choice is GIF Construction Set. This program can handle just about anything the GIF format is capable of. It is shareware, and may be downloaded from http://www.mindworkshop.com/alchemy/alchemy.html

Adobe Photoshop is a popular choice with both Mac and Windows users. Now, if you know this program, you might be aware that its Save as GIF... option does not support transparency or interlacing (or any other GIF89a features, for that matter). To rectify this situation, Adobe has released a free GIF89a export plug-in for Photoshop 3.0 and 2.5 that adds these important capabilities to these applications, or any other program that supports Photoshop plug-ins. The Adobe site is listed, along with many other resources, in the appendices to this article.

Mac users who do not have Photoshop can use the utility called Transparency (also on the CD) to set GIF transparency values. I'll describe the procedure to create transparent and/or interlaced GIFs in each of these tools.

Setting Interlace and/or Transparency attributes In GIF Construction Set

GIF Construction Set uses a list metaphor to depict the blocks that determine the contents and capabilities of a GIF file. For example, a basic GIF file contains a Header block and an image block. They show up in a list, displayed on the main screen of GIF Construction Set (called GIFCON hereafter).

In the example shown here, we are going to make the white background of the "Under Construction" logo disappear by setting white to be transparent. Here's how. As usual, I'll present a summary description first, with a more detailed one following.

QuickStart description

Making a transparent GIF using GIFCON

load GIF. (File:Open...) If you want to interlace the image, but do not require transparency, jump to step 6.
Insert Control block if not present. (Click Insert; click Control.)
double-click the word "Control" in the list of blocks.
click Transparent Colour checkbox.
Use eyedropper to select one color you wish to have disappear.
if you want to interlace the image, double-click the Image block in the list and check "Interlace."
Save the image.

Here is a more detailed explanation.

1) Load the GIF of your choice with the File: Open... command. Choose a GIF on one of your system's drives. For the sake of illustration, let's choose the GIFs directory on the CD that accompanies this book. Note that only GIFs are loadable from the Open dialog. GIFCON can import a number of other image types (BMP, JPEG, PCX, and well over a dozen more kinds), but this is done with a different command ("Insert"). Choose the file named UNDERCON.GIF -- the ubiquitous Under Construction logo.

If the GIF you load already has a transparency attribute, the list would also contain a Control block, in addition to the Header and Image blocks mentioned above. In this case, UNDERCON.GIF does not, so you need to add a Control Block if you want to enable transparency. If not, but you want to interlace the image, jump to step 7.

2) Ensure that the line that contains the word Header is selected by clicking it with the mouse if necessary. This is to ensure that the next step inserts a control "above" the Image that is below it.

3) If there is not already the word Control visible in the list Using the Insert button, insert a Control Object (just click the Object button that pops up). This inserts a Control Block in the list of blocks. It is this Control block which is used to set the transparency attribute. Control blocks are also used to set animation speeds for multipart GIFs, which we'll discuss in the Animation Module.

4) Double-click the Control block in the list. The Edit Control Block dialog, with several possible settings opens. In addition to the Transparent Colour (note the Canadian spelling!) option, you will see some other "Flags" in this dialog. These are used when creating multipart (animated) GIFs. We don't need them now.

5) Click the Transparent Colour checkbox to enable transparency.

6) Now, we need to choose one color, which is to be transparent. GIFCON provides an eyedropper tool which makes this easy. Simply click the Eyedropper icon and, from the image that appears, choose the color you want to be made transparent. (In our example, the white background portion of the image). You can only have one transparent color, and all pixels of this color, no matter where they are in the image, will become invisible when it is displayed in a Web browser that supports transparent GIFs, such as Netscape Navigator, Microsoft Internet Explorer and nearly all other browsers. You can preview the transparency effect right inside GIFCON by using the View button in the Edit Control Block.

7) Interlacing of an image is, as you might have guessed, accomplished by setting an attribute of the Image block. If you want to interlace the image, double-click the Image block in the list and check "Interlace." As before, the effect can be previewed via the "View" button on the Edit image dialog. The various other options (image top and so on) in this dialog are described in the program's Help file, and are primarily used when creating multipart (animated) GIFs. We don't need them now.

8) When you are satisfied with your image, save the file.

Using Photoshop's GIF89a export option

QuickStart summary

open or create an image in Photoshop 2.5 or newer
choose File: Export>GIF89a Export...
select the color you wish to make transparent with the eyedropper. Click interlace if desired.
Save.

Other GIF tools abound. For sheer speed and convenience, I’m a big fan of Macomedia's FireWorks. It is much, much easier to set up an animation from a sequence of still images with FireWorks, than with any other program I've seen, including Adobe's ImageReady (which is surprisingly weak in this regard). Fireworks also makes it easy to turn an animated GIF into a series of still images for manual editing or other modifications.

Other useful tools for working with GIFs include Ulead’s PhotoImpact, with its PhotoImpact SmartSavers for GIF and JPEG files. This tool, formerly known as ImagePals, is bundled with some scanners. Aside from a minor bug in version 3.0 that chops off one pixel from the bottom of images when its autocrop function is used, PhotoImpact is a reliable and versatile program. Most of the images in the original book that these articles were excerpted from were captured and processed with PhotoImpact.

There are several other freely available graphics programs downloadable from www.pcplus.co.uk.

On the Mac, GraphicConverter is a good shareware choice.

GIF Processing on the Mac

Although nearly every review of DeBabelizer chides it for being nearly inscrutable in its complexity, it is a program of great value to Web authors. It has a considerable range of graphics import and export filters and is excellent at optimizing graphics for use on the Web.

However, there are a few things it cannot do, at least as of version 1.6.5.

It cannot write multipart (animated) GIFs, although it can read them.

This lessens the usefulness of DeBabelizer’s QuickTime movie import function, as it means that it outputs a sream of numbered GIF files, which must then be assembled in another program.

The program GIFbuilder can import a number of single-frame GIFs and build an animated GIF. Although the adding individual frames via the open command is an exercise in tedium, you can open a whole range at once by dragging and dropping them into an open Frames window.

GIF Processing on the PC

On the PC, a similar effect can be accomplished with GIF Construction Set by holding down the Shift key and selecting a range of files to import. A dialog box in GIFCON allows you to bypass options if you want to apply the same processing to the entire group of files.

My favorite GIF color-processing tool for Windows is the GIF SmartSaver, which is part of Ulead’s PhotoImpact. For animation, I use the GIF Construction Set.

For batch file conversions of many files (say, to convert 70 BMP files to JPGs), I use Graphic Workshop for Windows or DeBabelizer for Mac. In this age of digital cameras that can hold a nearly a hundred images in their memory and dump them to your computer as BMP files (the Casio QV series, for example, can store up to 96 pics), this capability is increasingly important.

GIF tricks

Pedagoguery Software provides several GIF tools – most notably, GifgIfgiF (described in detail in the Animation module) and ItsaGif-- and is quite progressive in its explorations of the possibilities of the GIF format. For example, the company was the first that I am aware of to discover the possibility of translucent GIFs. The fact that this trick currently only works on a Mac notwithstanding, the company suggests lobbying Netscape, Microsoft and other browser vendors to add support for this feature. A translucent GIF sample image is on the CD in the GIFs folder, called TRANSLUC.GIF

Pedagoguery also discovered the possibility of having more than 256 images in a GIF file.

It is a little-known fact that the GIF89a specification allows more than 265 colors in a GIF image and, in fact, at this writing, I have seen only a few programs that supports these “high-color” GIFs. Itsagif, by Canada’s Pedagoguery Software is a Mac program (68K and PowerMac versions are found on the CD-ROM); GIF Construction Set – also a Canadian program ... hmmmm – is a Windows title capable of creating high-color GIFs. (16- and 32-bit versions of GIF Construction Set are also on the CD-ROM).

The Yesstories website uses a high-color GIF on its title page.

Not all web browsers support high-color GIFs. In particular, the Mac versions of Internet Explorer 2.1 (beta 1) and Netscape Navigator 3.0 (final release) or earlier do not support them. For some reason, the Windows versions of both these browsers work properly.

Interestingly, in my tests, I found the freeware GIFbuilder to produce animated GIF files that were every bit as small (12 bytes smaller, in fact) and as good looking as those produced with DeBabelizer -- and the process was much easier with GIFbuilder! Debabelizer’s freeware and shareware competitors are getting better all the time.

JPEG

The second most popular image file format on the Web is JPEG.

Optimizing for faster downloading

According to Forrester Research, downloading a 2MB file under optimal conditions.

14.4 = 18.5 minutes
28.8 = 9.3 min
ISDN = 2.1 min
4x CD-ROM = 26.7 seconds
T1 = 10.7 seconds
ADSL = 10.7 sec.
PC hard drive = 2.7 sec.
Cable modem = 1.6 sec.
T3 = 0.4 sec.

Progressive JPEG

A special faster-displaying form of JPEG is the so-called Progressive JPEG. You can create Progressive JPEG images with a growing number of programs, including GIFTrans for Mac and XRes 2, a commercial title from Macromedia. Navigator 2.0x, Mosaic and Microsoft Internet Explorer all support the fast-loading progressive JPEGs. Note that these JPEGs display a broken graphic icon on older browsers.

Tech Article

IT Library