If you've read the previous 34 chapters—or even skimmed the table of contents—your mind is probably reeling from all the choices and possibilities for your own Web pages. This chapter gives you some complete, hands-on examples of how to make
those choices and combine those possibilities intelligently in real-world situations.
The four sample sites presented here all feature real people and businesses. You'll get the inside story on how and why both the multimedia and more conventional elements were used to meet their needs and goals. There is a personal site, a promotional
page for an "offline" business, and an online business site. Between all of these, almost all of the technologies and techniques discussed in this book are put into action.
All these sites are included in their entirety on the CD-ROM that accompanies this book, so you can borrow all the techniques and even some of the content for your own projects. (Obviously, you can't use the logos, names, personal pictures, and
copyrighted text or music. But you do have permission to use backgrounds, icons, and general design elements. When in doubt, contact me at dicko@netletter.com or contact the people whose names and e-mail addresses are on the pages to ask for specific
permission.)
Sound and action are not just for high-budget, high-bandwidth sites run by giant media moguls. In fact, one of the most popular uses of multimedia on the Web today is for personal home pages. The function of a personal home page is mostly to allow
people you meet online to get some idea of who you are, and to have some fun making a "page of your own." If you're job hunting or you happen to be a public figure, your home page might take a more serious bent. But the sound of a human voice
and
some animation makes anyone's page convey more of a sense of who they are—or who they would like to be!
I run some popular Web sites, frequent a number of mailing lists and the occasional online chat room, and write books about the Internet. But until recently, my home page was of the old-fashioned snapshot-and-a-few-lines-of-text variety. So I decided
to
see if I could spice it up using only free or ultra-cheap tools and without taking much time out of my busy schedule.
Figure 33.1 and Listing 33.1 show the result of my efforts, after a couple hours of messing about with it. I'll explain the decisions I made, and why.
Figure 33.1. My home page (/dicko/dicko.htm on the CD-ROM or http://netletter.com/dicko/ online) flips through four pictures of me, so nobody has to tolerate any one view too long.
Listing 33.1. /dicko/dicko.htm.
<HTML> <HEAD><TITLE>Dick Oliver's Home Page</TITLE></HEAD> <BODY BACKGROUND="strip.gif" TEXT="white" LINK="red" VLINK="red" ALINK="white"> <IMG SRC="dickani.gif"> . . . <IMG SRC="dickog.gif"><BR> .<P> So what can you do when you're too dumb to become a physicist or mathematician, and not quite crazy enough to qualify for free food at the asylum? Write books, I figure. And software. And what the heck maybe some newsletters and Web pages, too. But enough about me already. On to these far more interesting topics:<BR> <CENTER> <TABLE> <TR> <TD><IMG SRC="see.gif"></TD> <TD> <FONT COLOR="cyan"><I>See...</I></FONT><BR> <A HREF="work.htm"><FONT COLOR="cyan">My work</FONT></A><BR> <A HREF="family.htm"><FONT COLOR="cyan">My family</FONT></A><BR> <A HREF="house.htm"><FONT COLOR="cyan">My house</FONT></A><BR> <A HREF="hotlist.htm"><FONT COLOR="cyan">My hotlist</FONT></A> </TD> <TD> <IMG SRC="hear.gif"></TD> <TD> <FONT COLOR="yellow"><I>Hear...</I></FONT><BR> <A HREF="voice.RA"><FONT COLOR="yellow">My voice</FONT></A><BR> <A HREF="brillig.RA"><FONT COLOR="yellow">My favorite poem</FONT></A><BR> <A HREF="ecooro.RA"><FONT COLOR="yellow">My daughters</FONT></A><BR> <A HREF="dog.RA"><FONT COLOR="yellow">My dog</FONT></A> </TD> <TD> <IMG SRC="get.gif"></TD> <TD> <FONT COLOR="red"><I>Get...</I></FONT><BR> <A HREF="news.htm">My newsletter</A><BR> <A HREF="books.htm">My books</A><BR> <A HREF="software.htm">My software</A><BR> <A HREF="fools.htm">My foolishness</A> </TD> </TR> </TABLE><BR> Happy? Disgusted? Lonely? Enlightened? Just plain stupid?<BR> Why not send some e-mail to <A HREF="mailto:DICKO@netletter.com"> <FONT COLOR="green">DickO@netletter.com</FONT></A> to tell me about it?<P> NOTE: To hear the voices, you'll need the <A HREF="http://www.realaudio.com/">RealAudio player</A>.<P> </CENTER> </BODY> </HTML>
The first thing I thought about was the background and layout. I wanted something that looked big and bold (like me <grin>), but was very fast to make and very fast to load and display. So I decided to just make a black-and-white background strip
with solid white at the top and solid black down as far as my pages were likely to scroll. The strip is called /dicko/strip.gif on the CD-ROM, and because it's mostly solid colors, the big 20x2000 pixel image compresses to less than 1KB. A ragged edge
adds
a little zest without increasing the file size significantly.
Next, I considered the graphics. The obligatory snapshot of my face seemed too static, so I made an animated sequence of snapshots instead, and doctored them up in Paint Shop Pro to prove what an artsy kinda guy I am. Then I used GIF Construction Set
to
make a multi-image GIF that flips to a new goofy picture of me every 0.6 seconds (see Figure 33.2). A title graphic scanned from my handwriting and some scans of my and my daughter's body parts complete the "DickO look."
Figure 33.2. A cheap hand scanner and two inexpensive shareware programs (Paint Shop Pro and GIF Construction Set) were all I needed to put together a stylistic animation for my home page.
TIP
I really wanted to make the file sizes small on my page, because it will live on my high-volume commercial site where I have to pay for every byte that somebody downloads. So I did something very sneaky with all the pictures. I decreased the color depth to 16 grayscales (using "nearest color" remapping, not "diffusion" dithering). This cut the files to a fraction of their original size. Then I used Paint Shop Pro to colorize them to the 16 colors of my choice and then increased the color depth to 256 colors again.
Both Microsoft Explorer and Netscape Navigator do a better job displaying most 256-color images than 16-color images, so the visual quality most people see is quite a bit better at the higher color depth. However, because there are still only 16 unique color values being used, the compressed file still comes out much smaller than before I brought the images down to 16 colors and back up again.
This trick enabled me to squeeze four relatively large (150x200-pixel) photos into a 28KB GIF file. Before doctoring them, each of the 256-color, 150x200 GIF files was over 28KB!
Most of the links on my home page lead to graphics, text, and other sites I've produced. But the links next to my 2-year old daughter's ear are the parts that probably give the most personal experience of meeting me and my family. The sound of
someone's
voice—even if compressed and distorted a bit—seem to reach a place in the soul that no amount of graphics can touch.
Recording voices is easy enough. In fact, for a personal home page, it would be overkill to use more than a simple recording utility, such as the Windows Sound Recorder and the chintzy microphone that came with my sound card.
The resulting WAV files could be posted as-is, or converted with a shareware sound editing program, such as CoolEdit, to the AU format so Netscape Navigator 2.0 could play them without requiring any plug-ins. But I wanted to include fairly lengthy
sound
samples, such as "my favorite poem" and keep the number of bytes to transfer to an absolute minimum. So, I chose to use the RealAudio Encoder (see Figure 33.3) to compress the sound for real-time playback. A 327KB, 8-bit WAV file compresses to
about 15KB worth of RealAudio audio and starts playing immediately when the user clicks on the links (see Figure 33.4).
Figure 33.3. It doesn't take a state-of-the-art recording studio to put your voice on the Web. These free programs (The Windows 95 Sound Recorder and RealAudio Encoder) will do just fine.
Figure 33.4. The RealAudio helper app works with any browser, and plays back without long download delays. (There is also a RealAudio plug-in available for embedded playback.)
The disadvantage of using RealAudio is that not everybody has a helper app to play back the .RA files. But hey, it's my home page and it's no big deal if somebody can't hear my voice. They can go to http://www.realaudio.com/ and download the plug-in if they're really intent on hearing me, and I tell them so on the bottom of the page. But of course a used car site pumping out plaid-voiced sales talk might prefer
the
more universal AU format.
Notice that I refrained from putting an AVI home video up on my personal Web site. As everybody's bandwidth increases and digital video editing software keeps dropping in price, that might become a viable option. But for now, it would just be too many
pixels to push through a poor suffering server just for my personal home page.
Now let's look at a simple business site. Although the goals and concerns of a business are obviously a bit different than those you might have for your personal pages, many of the same decisions need to be made. How can you get big, attention-grabbing
graphics while sucking up as little space and time on the server as possible? How can you convey a unique and memorable image without distracting too much from the more prosaic information content?
For the Hawaiian Hard Drive home page in Figure 33.5 and Listing 33.2, we chose a flashy but fun look, mostly conveyed by a large masthead graphic. But the most memorable part of the page is the freeware Java applet underneath the masthead, which
creates moving waves of text with rainbow colors flowing through them. This applet, created by Integris Network Services (and included on the CD-ROM in this book), can be freely used by anyone willing to put a link to Integris on their page.
Figure 33.5. This page (/hhd/hhd.htm on the CD-ROM or http://netletter.com/hhd/ online) uses a Java applet (RnbText.class) to display "surfing" text.
Having seen and played with lots of nifty little special-purpose Java applets like this one, it is always a delight to actually have a reasonable excuse to use one on a real page. This one seemed like a perfect way to set a festive "Hawaiian
mood" without resorting to touristy clichées like palm trees and pineapples, which might turn off many of the Hawaiians for whom this page is intended. (Hawaiian Hard Drive is a free computer newspaper distributed on the islands, and this site
offers its readers and advertisers an online version.)
NOTE
In-word spaces in the following code are intentional. They're necessary due to the width of some characters when rendered with the Java applet.
Listing 33.2. /hhd/hhd.htm.
<HTML> <HEAD><TITLE>Hawaiian Hard Drive</TITLE></HEAD> <BODY BACKGROUND="HHD.JPG"> <CENTER> <IMG SRC="HHD2.GIF" ALT="Hawaiian Hard Drive"><BR> <APPLET code="RnbText.class" width=710 height=50> <param name=text value="H aw aii's C om puter & Inform ation R esource"> </APPLET> <P> </CENTER> <EMBED SRC="aloha.wav" WIDTH=2 HEIGHT=2> <NOEMBED><BGSOUND SRC="aloha.wav"></NOEMBED><BR> <FONT SIZE=4>The mission of the Hawaiian Hard Drive newspaper and Web site is to inform a broad range of computer users and the general general public of the latest trends in the computer market. Through our writers and advertisers, you'll find out about software, hardware, applications and other areas of interest. We are not critics of any hardware or software platform, and you'll find information that will be useful for DOS, Mac, and Windows, and other computer users as well. After all, it's not the machine that counts the most--it's who's using it!<P> <CENTER> <HR SIZE=10 NOSHADE> <APPLET code="RnbText.class" width=120 height=50> <param name=text value="Features"> </APPLET><P> <B><A HREF="webpage.htm">Making Your Own Web Page</A><BR> <A HREF="virus.htm">A Computer Virus Primer</A><BR> <A HREF="protect.htm">Software Copyright Protection</A><BR> <A HREF="dtp.htm">Explore the World of Desktop Publishing</A></B> <P> </FONT> <HR SIZE=10 NOSHADE> <ADDRESS> <FONT SIZE=3> Hawaiian Hard Drive<BR> 94-547 Ukee Street #308<BR> Waipahu, HI 96797<P> (808) 677-2464<P> <A HREF="mailto:PDeptula@aol.com">PDeptula@aol.com</A> </ADDRESS><P> All stories are copyright, 1995-1996 by their authors.<BR> The Java Applet on this page was designed by <A HREF="http://www.crl.com/~integris">Integris Network Services</A>.<P> </FONT> </CENTER> </BODY> </HTML>
If you scroll down the page (see Figure 33.6), you'll notice that another occurrence of the same RnbText.class Java applet is used again for the heading "Features." After you include a Java applet on a page, no extra download time is incurred
if you include another copy elsewhere. Note that visitors to your site will, however, need more computer power to keep both applets working at once. With small applets like this one, that isn't much of a concern—but you should avoid including more
than one big, graphics-intensive applet on any page.
Figure 33.6. If you include more than one copy of an applet on the same page, it still needs to be downloaded only once.
Generally speaking, you need to be more careful about overburdening the user's computer with too much to do than being careful about the speed with which applets download. This applet, for example, is only 3KB but takes quite a bit of resources to
constantly update long strings of text.
TIP
Even though the latest versions of Netscape Navigator and Microsoft Explorer both support Java applets, many older and more feeble browsers still don't. So you should always make sure that any text displayed by a Java applet (or OLE component) is not strictly necessary for your page to make sense.
The Hawaiian Hard Drive page, for example, still looks fine when the words "Hawaii's Computer & Information Resource" and "Features" don't appear (see Figure 33.7).
Whenever you use modern enhancements such as Java applets or embedded media, it becomes especially important to test how your pages look in other common browsers besides Netscape Navigator. Figure 33.7 shows the page as it looks to Microsoft Internet
Explorer 2.0 at 1024x768 resolution (the previous figures are all at 800x600 resolution, which is by far the most common today).
Figure 33.7. In Microsoft Internet Explorer 2.0 (shown here at 1024x768 resolution), Java applets don't appear.
Most graphics that look good at 800x600 will look fine (though perhaps a bit small) at 1024x768, but often don't fare so well at the 640x480 resolution in Figure 33.8. As a rule of thumb, you should always make sure that all graphics, applets, and
embedded media at least show enough information at 640x480 to be easily understood. Testing your pages at all three of these common window sizes is very important.
Figure 33.8. The page doesn't look quite as perfect at 640x480 resolution, but the important information still shows.
Most commercial online services have switched to Microsoft Explorer and Netscape Navigator instead of their old clunky browsers, too. So you can be assured of looking good to over 90 percent of the people on the Web if you test your pages with those
two
browsers. However, I'd highly recommend testing both with the current version (currently Explorer 3.0 and Navigator 2.0) and with the version before the current one (Explorer 2.0 and Navigator 1.2), because a lot of people are quite slow to upgrade
once they get used to using something.
TIP
If you add an old text-based copy of Lynx for DOS to your list of test browsers, you can be sure to please virtually everybody—even the many vision-impaired people who use speech or Braille-reader enabled copies of Lynx to surf the Web.
Even if you don't test with Lynx, you can greatly enhance the readability of your pages for text-based browsers or users with slow modems by always including ALT= attributes in your IMG tags (for example, <IMG SRC="hhd.gif" ALT="Hawaiian Hard Drive">). This is an especially good idea if you use graphics for the title of your page, and even more so if the graphics are larger than 5KB or so.
A 13KB image such as the Hawaiian Hard Drive title might seem compact by modern multimedia file standards, but it will take about 13 seconds to load over a 35.4Kbs modem. So using ALT= can make the heading appear that much sooner for users of those modems.
If you have Microsoft Internet Explorer, or Netscape Navigator and a WAV-compatible plug-in, the Hawaiian Hard Drive page says "Aloha!" when you load it. Adding a little spoken message like this is pretty much a no-brainer: just record the
sound with Windows Recorder or whatever software you like, and put a <BGSOUND> tag (for Explorer) and an <EMBED> tag (for Netscape Navigator) in your page like this:
<EMBED SRC="aloha.wav" HEIGHT=2 WIDTH=2> <NOEMBED><BGSOUND SRC="aloha.wav"></NOEMBED>
The sound plays automatically, eliminating the need for the user to do anything with the controls. The WIDTH=2 and HEIGHT=2 values make any display that your plug-in tries to put up so tiny that nobody will pay any attention to it. (Did you notice the
tiny little white square just before the text starts on the /hhd/hhd.htm page in Figure 33.5? I didn't think so.)
The <NOEMBED> tags aren't actually necessary yet, but including them is a good idea because you never know when a browser is going to start supporting both the Netscape and Microsoft extensions. The <NOEMBED> tags will ensure that any
browser capable of playing the sound with the <EMBED> tag will definitely ignore the <BGSOUND> tag, and not try to play it twice or become otherwise confused.
TIP
If you prefer, you could insert a MIDI music file instead of a WAV sound file. The advantage of MIDI is that it is much more compact, so you can embed a lengthy song. The disadvantage is that the song must be instrumental (with no human voices), and the quality of the playback depends greatly on the quality of each listener's sound card. What sounds sensational on your $300 wavetable card and home stereo speakers might sound rather sickly on most people's el-cheapo multimedia kits.
I actually test MIDI files for the Web on the noisiest bargain-basement sound card and tinniest headset I have; If the music sounds good with that setup, I know it'll sound good on any setup.
For more details on using the <BGSOUND> tag, refer to Chapter 26, "Graphics and Multimedia for the Web." For more information on the Netscape-specific <EMBED> tag, refer to Netscape's Web site at http://home.netscape.com/.
One of the reasons we kept the Hawaiian Hard Drive site relatively simple is that its primary purpose is to enhance and publicize an existing "offline" business. As a secondary endeavor to the printed newspaper, cost and time savings were at
least as important as a strong presence on the Web.
Now we'll look at a business site where a bit more perfectionism might be in order: The Background Underground is a small Web site that serves as the sole worldwide sales outlet for a small selection of Web-related CD-ROM products. This site isn't
there
to "support" a business—the site is the business.
As with the other pages discussed in this chapter, a major priority in designing The Background Underground was keeping the size of the files to a minimum.
TIP
For a business site, a little figuring goes a long way toward making intelligent design decisions.
For example, before the redesign and name change from "Over the Rainbow," this site was getting around 5,000 hits per week. At current rates, that translates into a cost of about a dollar per month for every kilobyte on the page. So when I designed the page, I could equate some real financial numbers with previous sales figures to know how much bandwidth to budget.
Your mileage will vary, and other costs are usually involved for maintaining a good site. But if you design pages for any size commercial site, you should at least figure out the cost-per-kilobyte at projected levels of traffic so you have some idea how much your design choices actually cost before you make them.
As important as small file sizes are, it is even more important for an online business to successfully communicate what it offers. And more important than that is to offer something (preferably free) that will attract people to the site. The Background
Underground manages this by giving away the best of its wares (background textures for Web pages and other uses) for free, and selling CD-ROMs packed with more backgrounds for those who just can't get enough of the stuff.
So what does this page need to say to its visitors? First, it needs to say, "Here's where you can get background textures free." Second, it needs to show them that the textures are attractive and unique. These two message need to appear very
quickly; the ability to click away at a moment's whim makes the Web the ultimate "short attention span theater."
To get the point across in a dramatic way, the page in Figures 33.9 and 33.10 uses a 26-image GIF animation. A new tiled image appears once per second, surrounding a prominent masthead. (In older browsers that don't support GIF animation, just the
first
image appears.) As Listing 33.3 reveals, the large graphic is made up of many small copies of the same multi-image GIF.
Figure 33.9. The colorful border around this masthead is composed of 24 copies of a single 60x60-pixel image (see /bgu/bgu.htm on the CD-ROM).
Figure 33.10. The little tile is actually a GIF animation, so the masthead border changes every second.
Listing 33.3. /bgu/bgu.htm.
<HTML> <HEAD><TITLE>The Background Underground</TITLE></HEAD> <BODY BACKGROUND="rainbow.jpg"> <CENTER> <IMG SRC="topline.gif"><BR> <IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><BR> <IMG SRC="bgani.gif"><IMG SRC="bgu.gif" ALT="The Background Underground"><IMG SRC="bgani.gif"><BR> <IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><IMG SRC="bgani.gif"><BR> <IMG SRC="select.gif" USEMAP="select.map"><P> </CENTER> <FONT SIZE=5><B>Behind every good Web page is a good background. And here's where they come from! Click on a colored swatch above to download the corresponding hi-resolution background image for immediate, unlimited FREE use on your own Web pages, 3D models, or anyplace else you need a snazzy background texture.<P> If you like these backgrounds--or don't see what you're looking for above--you might like our <A HREF="bguorder.htm">CD-ROMs packed with backgrounds, buttons, and beautiful Web page accents</A>.<P> Then be sure to check out Gini Schmitz' <A HREF="http://netletter.com/cameo/hotlist/hotlist.html"> Texture and Background Wonderland</A>, a hot hotlist of the best background and Web page graphics sites on the Internet.<P> </FONT> </BODY></HTML>
TIP
Notice that there is not an embedded MIDI music file with this page, or with any GIF animation page on the CD-ROM. There's a good reason for this: Have you ever tried listening to music while looking at something rhythmically blink, totally out of sync with the music? To paraphrase Charlie Brown: "Aaaaagh!"
If you want music and motion on the same page, please make a video clip or Shockwave movie where you can synchronize everything well enough to save your viewer's sanity!
As usual, we employed some tricks to get a big brilliantly colorful image without using big graphics files. The GIF animation is actually tiny—just 60x60 pixels. Also, each of the images in the animation is just 16 colors. So the entire animation
of 26 images turns out to be only 53KB. Because GIF animations start displaying when the first image is finished downloading, the animation begins almost instantly and continues changing regularly at one-second intervals from then on.
Because each little 60x60 image is a reduced-size background tile, arranging 24 of them next to one another around the masthead makes them look like a giant 660x180-pixel animation with hundreds of unique colors! That this pops up in less than three
seconds over a 28.8Kbps modem seems (to those of us who are used to waiting for huge graphics files) nothing short of miraculous.
By the time visitors look away from the first paragraph of text and the colorful animation, the interlaced 23KB image map underneath the masthead has completed loading—and they probably didn't even notice that it took over 10 seconds to do so.
Another magical result of using tiles as decorative elements is that you can use the same tiles on a related page in a different arrangement. For example, the order form in Figure 33.11 omits the bottom row of tiles below the masthead to save space.
But
it will still load with almost no wait at all, because all the components that make up the assembled image will be in the browser's memory or cache from the previous page.
Figure 33.11. Because the tile animation and masthead are already in the browser's cache from the main page, the graphics on this order form appear instantly.
This not only saves time for visitors to the site, it saves money for the site owners because no additional graphics files will be downloaded from the server. So we get two thematic mastheads for the price of one! To sweeten the bargain just a little
more, we even used a lone copy of the animated tile as a navigation button at the bottom of the order form (see Figure 33.12).
Figure 33.12. A single copy of the animated tile from the masthead border makes a nice icon for the bottom of the page, too.
All these snap-together graphics look great as long as the user has a big enough window to hold the entire assemblage. However, things tend to get a bit strange with smaller windows, as demonstrated in Figure 33.13. In this case, the
"accident" is kind of neat looking in and of itself, and doesn't do anything bad enough to worry about. But if you design with tiles, be sure to test what happens in small windows to make sure that your page is still legible.
Figure 33.13. When squeezed, designs made from small tiles can fall apart. But at least they usually fall apart in interesting and attractive ways!
Even if you don't sell or give away background tiles, you might find a lot of potential uses for repeating tiles in Web page designs. There aren't many easier or more effective ways to get huge graphics or animations that download as fast as tiny ones
do.
And by the way, just in case you need some background tiles to play with, I've included a selection of free tiles on the CD-ROM with this book, accessible from (where else) the Background Underground home page at /bgu/bgu.htm. If you want even more
backgrounds, check out The Background Underground online at
http://netletter.com/bgu/
I promise to add some more bells and whistles to the site by the time this book goes to print, so you'll discover more graphics and animation tricks there, too.
In this chapter, you've seen several personal and business Web sites. Chapter 38, "Developing a Public Web Site," looks at Web development from the perspective of the nonprofit and public service sector.
