|
|
by Dick Oliver
If you've read the previous 47 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 three 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 with 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 enable 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 may 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 48.1 and Listing 48.1 show the result, after a couple hours of messing about with it. I'll explain the decisions I made, and why.
Listing 48.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 that 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 20¥2000 pixel image compresses to less than 1 K. 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 48.2). A title graphic scanned from my handwriting and some scans of my and my daughter's body parts complete the "DickO look."
| 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 Netscape and Microsoft Explorer do a much 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. Because still only 16 unique color values are being used, however, the compressed file still comes out much smaller than before I brought the images down to 16 colors and back up again. This trick allowed me to squeeze four relatively large (150x200-pixel) photos into a 28 K gif file. Before doctoring them, each of the 256-color, 150x200 gif files was more than 28 K! |
Most of the links on my home page lead to graphics, text, and other sites I've produced. But the links next to my two-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 it's compressed and distorted a bit-seems 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 48.3) to compress the sound for real-time playback. A 327 K, 8-bit WAV file compresses to about 15 K worth of RealAudio audio and starts playing immediately when the user clicks the links (see Figure 48.4).
The disadvantage of using RealAudio is that not everybody has a plug-in or helper application 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/ to 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.
The other obvious choice would have been ToolVox, a similar plug-in that generally achieves better compression and higher quality than RealAudio. But right now, more people have RealAudio-especially the helper application, and I've gotten kind of used to it. By the time you read this, ToolVox will probably be taking the lead in a number of users, so you should seriously consider it as an option for your lengthy sound files. There are other up-and-coming formats, too, but most haven't gained much widespread support yet, and sound quality is still pretty shaky over modem lines. (You'd think a modem hooked to a telephone line could carry telephone-quality voice pretty easily, but there's more to it than that. See Chapter 23, "Creating Online Audio," for all the technical details.)
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. Though 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 48.5 and Listing 48.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 under the masthead that creates moving waves of text with rainbow colors flowing through them. Anyone willing to put a link to Integris on their page can freely use this applet, created by Integris Network Services (and included on the CD-ROM in this book).
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 the perfect way to set a festive "Hawaiian mood" without resorting to touristy clichés 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. |
Listing 48.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 48.6), you'll notice that another occurrence of the same RnbText.class Java applet is used again for the heading "Features." Once 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 need more computer power to keep both applets working at once, however. 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.
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 3 K 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 Feature don't appear (see Figure 48.7). |
Whenever you use modern enhancements such as Java applets or embedded media, it becomes especially important for you to test how your pages look in other common browsers besides Netscape Navigator. Figure 48.7 shows the page as it looks to Microsoft Internet Explorer 2.0 at 1024¥768 resolution. (The previous figures are all at 800¥600 resolution, which is by far the most common today.)
Most graphics that look good at 800¥600 will look fine (though perhaps a bit small) at 1024¥768, but often don't fare so well at the 640¥480 resolution, as shown in Figure 48.8. As a rule of thumb, you should always make sure that all graphics, applets, and embedded media at least show enough information at 640¥480 to be easily understood. Testing your pages at all three of these common window sizes is very important.
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 more than 90 percent of the people on the Web if you test your pages with those two browsers. 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), however, 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 5 K or so. A 13 K image such as the Hawaiian Hard Drive title may seem compact by modern multimedia file standards, but it will take about 13 seconds to load over a 14.4 Kbps modem. 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 Navigator) in your page like the following code:
<EMBED SRC="aloha.wav" HEIGHT=2 WIDTH=2> <NOEMBED><BGSOUND SRC="aloha.wav"></NOEMBED>
The WIDTH and HEIGHT 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 48.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 may sound rather sickly on most people's el-cheapo multimedia kits. I 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 and EMBED tags, refer to Chapter 22, "Adding Multimedia to Your Web Site."
One reason 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 48.9 and 48.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 48.3 reveals, the large graphic is made up of many small copies of the same multi-image gif.
Listing 48.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 nor with the 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! See Chapter 25, "Adding Interactivity with Shockwave for Director," for help. |
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 60¥60 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 53 K. Because gif animations start displaying when the first image is done 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.8 Kbps 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 23 K image map underneath the masthead has completed loading-and they probably didn't even notice that it took more than 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 48.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.
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 48.12).
All these snap-together graphics look great as long as the user has a big enough window to hold the entire assemblage. Things tend to get a bit strange with smaller windows, however, as demonstrated in Figure 48.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.
Even if you don't sell or give away background tiles, you may 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, we'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.
Many of the effects on the pages presented in this chapter could be achieved quite easily-perhaps more easily-using Macromedia Director and Shockwave. Theoretically, "shocked" sites could wipe animated gifs, embedded sounds, and image maps all into obsolescence with one fell swoop.
But in the real world, you need to invest a lot of money and time to get Director and either learn to use it or hire a seasoned "Director director." And in the real world, the percentage of Web surfers who have the Shockwave plug-in installed is still fairly low (albeit climbing fast). There is also a certain amount of time overhead involved in initiating the plug-in and downloading enough of the Shockwave movie to start playing, even with the new streaming animation feature. The bottom line is that developing Director animations for the vast majority of Web pages would be like taking a helicopter to the grocery store.
This doesn't mean that I don't think Shockwave is a major contribution to the welfare of all humankind. Of course it is. For example, I'm developing a site for a high-end jewelry company where we need flying logos and interactive zooming and the whole nine yards. For stuff like that, Director has no real competition (see Figure 48.14).
If you're looking to invest some serious development effort into one or more major sites or you just spent hundreds of dollars for Director and feel like you ought to use the darn thing for heaven's sake, better turn to Chapter 25, "Adding Interactivity with Shockwave for Director," now. For your first few small-business or personal home pages, though?… Get real.
In this chapter, you've seen several personal and business Web pages. Chapter 49, "Designing and Publishing a Killer Web Site," looks at the bigger picture of producing a cohesive site with many pages.
