Taking Your Talent to the Web: A Guide for the Transitioning Designer- P19 pdf

How to answer the clamor for sound and video and other fancy stuff? The engineers at Netscape were inventing what a web browser was supposed to be as they went along. Eventually they hit upon the notion of plug-ins. If it worked for Quark and Photoshop, it ought to work for them too. At the time, the Web was hotter than Jennifer Lopez’s Academy Awards dress, and Netscape’s browser was the thing that was making it hot. Here was a marketing opportunity! Dozens of plug-ins soon flung themselves into the market. When new browsers began muscling in on Netscape’s turf, they followed Netscape’s lead and supported “Netscape plug-ins” simply to compete. And here we are, more than half a decade on and still plugging away. (There is still no good Chinese food in the American Midwest, however.) THE IMPOSSIBLE LIGHTNESS OF PLUG-INS Any web designer has much to say about plug-ins, not all of it printable, and we are no exception. Truth is, we could write a whole book about plug- ins. Come to think of it, we could write a book about just one plug-in. In fact, many people have. Hillman Curtis, for instance, wrote Flash Web Design: The Art of Motion Graphics, New Riders: 2000 (http://www.newrid- ers.com/books/title.cfm?isbn=0735708967). Want in-depth help with Flash, and penetrating insights into its nature? Try Hillman’s book or Joshua Davis’s upcoming Flash to the Core (New Rid- ers: 2001). We have our hands full as it is. Meantime, let’s assess a few well-known plug-ins. Plug-ins Most Likely to Succeed There are as many plug-ins as there are stars in the heavens. Plug-ins for specialty uses, plug-ins for novelty uses, plug-ins that support the needs of mathematical and scientific markup, plug-ins that let you print official U.S. postage from your web browser. No, we’re not kidding. Pour yourself a strong beverage and hit http://home.netscape.com/plugins/ to take in the range of available plug-ins. Do you have to learn about all these plug-ins? No. 361 Taking Your Talent to the Web 16 0732 CH12 4/24/01 11:24 AM Page 361 When designing content that requires plug-ins, the first question to ask is, which plug-ins? Which are most widely available? Which are likely to be sitting in your visitor’s browser plug-in folder, just waiting for you to give them something to play? Unfortunately, this question is easier to ask than answer. An assessment of which plug-ins come preloaded in which browsers does little to clarify the state of plug-in-hood. As mentioned in Chapter 2, both Microsoft Internet Explorer and Netscape Communicator include the Apple QuickTime plug- in in their distributions. That much is known. Netscape also includes the RealPlayer and Shockwave/Flash. IE for Win- dows, the most popular browser/platform combination, includes the Win- dows Media Player but not RealPlayer. Most Windows distributions of Explorer include Flash (but not Shockwave); Mac Explorer distributions include neither. By the time you read this, all of this might have changed. That’s marketing, kids. Seeing that you’re no better off than you were before, we’ve gone ahead and created a short list of plug-ins we think you’ll run into during your long and splendid web design career. Herewith, please review our never- impartial assessment of the major multimedia plug-ins. RealPlayer (www.real.com) This popular plug-in/player delivers streaming video and audio, along with support for Flash and the SMIL standard. RealPlayer is the most popular streaming video format because it uses the least bandwidth and works on all computing platforms (though it’s sometimes flaky on Macs). As explained in Chapter 2, streaming video is video that plays while down- loading. Early plug-in technologies did not stream. The viewer had to wait for an entire movie or sound file to download before she could see or hear the file in her browser. Real was the first to offer streaming playback. Dull technical note Even when a player supports streaming, a small amount of data must be downloaded and cached before streaming begins to ensure smooth play- back. If the file were to begin playing immediately, playback could be inter- rupted later on—for instance, when other network traffic momentarily 362 HOW: Beyond Text/Pictures: The Impossible Lightness of Plug-ins 16 0732 CH12 4/24/01 11:24 AM Page 362 interfered with the stream. By preloading (downloading and caching) ini- tial data, the player attempts to offer smooth, uninterrupted playback. Apple QuickTime and Windows Media Player, discussed in the following section, are also streaming formats. Tool tips The free Real Producer software available at Real’s site is of sufficient qual- ity for converting existing digital video to the Real format. An inexpensive “Pro” version provides more options, enables you to create MP3 files, and will help you create HTML files and stub files. Stub files are miniature text files that trigger the streaming of Real files over conventional http net- works. You also can easily create stub files yourself: If lopez_dress.rm is a Real-encoded file featuring Jennifer Lopez in her famous Academy Awards dress, and if that file resides at http://www. example.com/real/lopez_dress.rm, to force the file to stream over a con- ventional web server, you need to create a stub file. Open a blank text doc- ument (Write, SimpleText, BBEdit, Tex-Edit, any basic text editor will do). In this blank document, type the address of the Real file: http://www.example.com/real/lopez_dress.rm Close the document and save it as lopez_dress.ram. That’s your stub file, Bubba. Upload it to your web server—for the sake of simplicity, we’ll assume you’ve uploaded it to the same directory as the HTML file that references it—and then conjure it up with a link like this: <a href=”lopez_dress.ram”>La Lopez!</a> Can you refer to it with an image instead? Of course. It’s just a link. <a href=”lopez_dress.ram”><img src=”images/lopez_50x50.gif” height=”50” width=”50” alt=”Actress Jennifer Lopez” title=”Watch Jennifer Lopez at the Academy Awards. RealPlayer required.” Border=”0”></a> You can also <EMBED> the file, thereby triggering the Real plug-in instead of the Real console: <embed src=” lopez_dress.ram “ autostart=”true” volume=”100” width=”2” height=”2” controls=”hidden” pluginspage=”http://www.real.com”> What does all that extra code mean? We’ll explain later. 363 Taking Your Talent to the Web 16 0732 CH12 4/24/01 11:24 AM Page 363 The point is to link to the stub file, not the actual Real-encoded file. The stub file, being text, downloads almost instantly. If the user’s browser is configured correctly, the stub file will launch the RealPlayer, which will then begin preloading the actual video clip. Your visitors will soon see Jen- nifer Lopez…and so will Ms. Lopez’s attorneys. Be certain you have per- mission to publish the clip. You can skip the need for stub files if your client or host purchases dedi- cated Real servers—recommended if you plan to serve much video to many visitors. For instance, on a site that constantly serves TV news feeds, cable comedy clips, or streaming video trailers, investing in Real servers would be a Real good idea. Special indications With the highest compression ratio (and consequently, the lowest quality), Real is the fastest streaming format, making it the plug-in of choice for news sites and others where quality is less important than a hardy consti- tution and the ability to deliver like James Brown. With Real, you are assured of supporting the largest number of users with the widest range of connection speeds. If video files are meant to viewed and then forgotten (like a TV experience), Real is likely what you want. Conversely, if video files are meant to be stored and treasured on the end-user’s hard drive, you would probably choose QuickTime instead. This is, of course, merely our opinion. QuickTime (www.apple.com/quicktime/) A high-quality streaming video format, QuickTime also supports a wide variety of streaming audio formats including the ever-popular MP3. It also delivers QuickTime VR panoramas and animated sprites. QuickTime sup- ports hyperlinks in video, and offers some support for Flash and SMIL. An innovative multistreaming process serves appropriately sized material according to the end-user’s connection speed, as described in Chapter 2. Last time we checked, QuickTime was the second most popular streaming format. It uses more bandwidth than RealPlayer but delivers smoother video and audio. The QuickTime format is native to Apple Macintosh com- puters but thoroughly supports Windows PCs. 364 HOW: Beyond Text/Pictures: The Impossible Lightness of Plug-ins 16 0732 CH12 4/24/01 11:24 AM Page 364 Tool tips Delivering video over the Web should be impossible. The technology works by means of drastic compression methods. Even the best of these methods include visible artifacts. To minimize these artifacts and assure a better quality image, choose subject matter that compresses well. “Talking heads” compress well. Swish pans and mad action sequences do not. This is because the compression works by seeking pixels that barely change from frame to frame, choosing one of these pixels as a “master” pixel, and repeating it from frame to frame in hopes of fooling your eye. The more jerky camera movement in your mise-en-scene, the more obvi- ous the software sleight-of-hand is. This is true not only for QuickTime but for all digital video. QuickTime VR panoramas can be breathtaking, and various software prod- ucts are available to help you stitch together individual photographs into a full 3D panorama, including Apple QuickTime VR Authoring Studio (http://www.apple.com/quicktime/qtvr/authoringstudio/). You can insert sound effects in these panoramas and confine the effects to certain por- tions of the panorama. See Figures 12.8, 12.9, and 12.10 for nonprofit and noncommercial QuickTime VR panoramas at Heidsite and PBS.org. 365 Taking Your Talent to the Web Figure 12.8 Writer Jim Heid’s personal QuickTime VR panoramas convey the rustic beauty of his community (http:// www.heidsite.com). 16 0732 CH12 4/24/01 11:24 AM Page 365 366 HOW: Beyond Text/Pictures: The Impossible Lightness of Plug-ins Figure 12.9 A virtual reality tour of Khufu’s Pyramid lends needed “gee-whiz” appeal to an essentially educa- tional enterprise (http:// www.pbs.org/). Figure 12.10 A hauntingly frozen moment in time (http:// www.heidsite.com/). Print absolutely cannot do this, nor do these screenshots begin to convey the effect. 16 0732 CH12 4/24/01 11:24 AM Page 366 For instance, a 360-degree panorama of the downtown skyline might be filled with canned traffic effects until the viewer rotates the image to your company’s office tower. Suddenly the sound of laughter is heard. As the viewer rotates away from your office tower, the laughter is drowned by the traffic noise. Or a tranquil beach panorama could reveal the Jaws theme as the camera reaches the sea. Or a 360-degree panorama of the client’s company softball team could reveal the hidden thoughts of each individual as the camera’s gaze passes over him or her. You get the idea. QuickTime VR can be very cool. Special indications If you want high quality, you probably want QuickTime. If you want VR Panoramas, you need QuickTime. Other panoramic plug-in formats are available (some of them quite good—see iPix, mentioned previously), but none are nearly as widely distributed as QuickTime. Later we’ll talk about how some plug-ins managed to crawl to the top of the heap while other good ones languished. It isn’t really all that fascinating a story, but gossip is as good a reading motivation as any, and her attorneys have informed us that we can’t keep referring to Jennifer Lopez’s dress. Windows Media Player (WMP) (http://www.microsoft.com/windows/windowsmedia/) WMP delivers streaming video and audio in the Windows Media File (WMF) format and is included in all distributions of the various Windows operating systems, making it a popular plug-in indeed. Though WMP is viewed as a plug-in that primarily supports Windows users, a version is available for Macintosh folk, and it actually works well. The player supports real-time capture and broadcast of audio and video files (making it com- petitive with RealPlayer) and also handles MP3 audio as smoothly as its competitors. 367 Taking Your Talent to the Web 16 0732 CH12 4/24/01 11:24 AM Page 367 According to Microsoft, Windows Media Player supports “near-DVD-qual- ity” video and “near-CD-quality” sound. A free Windows Media Encoder makes it as easy to prepare video materials for distribution as streaming WMF files. As of this writing, the free encoder runs only in Windows 98 or higher. The WMP URL we’ve listed was accurate as this book went to press, but contents might have settled during shipment. (Microsoft constantly changes URLs at its site.) Special indications For some reason, WMF has apparently become the format of choice for the streaming distribution of “adult” content, or so our informants tell us. We just thought it was kind of interesting, that’s all. You try writing a chapter about plug-ins, and see if your mind doesn’t start wandering where it shouldn’t. We blame Jennifer Lopez’s dress. Beatnik (http://www.beatnik.com/) Musician Thomas Dolby’s Beatnik, though less widespread than the biggest hitters, is an intriguing plug-in that comes bundled with most Netscape distributions. Beatnik enhances MIDI (Musical Instrument Digital Interface) playback, easily surpassing the quality of most PC add-on sound cards and the Mac’s built-in MIDI voices. It also offers strangely wonderful features, such as the ability to mix jam sessions on sites authored according to Beat- nik’s specifications. Such stuff is unlikely to be part of a site for your local church, synagogue, or small business but might well add luster to the site for a recording artist. Beatnik was used to enhance the PBS “Jazz” site (http://www.pbs.org/jazz/) that accompanied Ken Burns’s historic jazz documentary series of 2001. Beatnik works in Netscape (all platforms) and IE (Windows only). It unfor- tunately does not work in IE5/Mac because its JavaScript functionality relies on proprietary Netscape Application Programming Interfaces (APIs). Beatnik is a cool plug-in, and IE5/Mac is an extremely polished, standards- compliant web browser. It seems a pity that the two cannot work together, but this raises the whole trouble with plug-ins, which we cover later in this chapter (see “The Trouble with Plug-ins”). 368 HOW: Beyond Text/Pictures: The Impossible Lightness of Plug-ins 16 0732 CH12 4/24/01 11:24 AM Page 368 Shockwave/Flash (www.macromedia.com, www.macromedia.com/software/flash/) Two plug-ins now bundled as one, Shockwave and Flash, are the biggest, most-accepted, and possibly the most dynamic plug-ins on the market. They are certainly the most controversial. Entire sites have been created in these formats. Entire sermons have been written denouncing them. For many, Flash is a religion; for many others, it is the first sign of the anti- Christ. Flash artist Peter Balogh sums up the controversy in his witty essay, “Sympathy for the Plug-in” at http://www.alistapart.com/stories/ sympathy/. 369 Taking Your Talent to the Web Though they share a similar blow-you-away quality and though the man- ufacturer now serves them like two peas in a pod, Shockwave and Flash are quite different. Shockwave Shockwave is a sophisticated, proprietary format that can do anything a CD-ROM can do. Full-fledged gaming environments; animated, hot-linked city maps; endless labyrinths deep within simulated subterranean worlds: If you can dream it up, it can be rendered in Shockwave. Essentially, Shock- wave files are like self-contained software programs that launch in the user’s browser. Figure 12.11 The “virtual piano” in the Jazz Lounge at PBS.org, created in Macromedia Director, rendered unto the Web in streaming Shockwave format. Print cannot do this (http:// www.pbs.org/jazz/). 16 0732 CH12 4/24/01 11:24 AM Page 369 As might be obvious, the more complex and multileveled the Shockwave file, the larger it must be to do its job. Thus there is a trade-off between sophisticated presentation and amount of bandwidth required. There is also the risk that Shockwave programs will exceed the user’s com- puting capacity. Linux users, who take justifiable pride in cranking tremen- dous computing juice out of old, cheap PCs, frequently hit a wall when Shockwave comes to town. Even Mac and PC users sometimes find Shock- wave too rich for their blood. None of this is the fault of the operating sys- tems in question. We’re back to the problem we discussed with Java. When it works, it’s magnificent; when it doesn’t, it ain’t. Shockwave files are created in Macromedia Director, a multimedia pro- duction and programming package requiring tremendous expertise. No web designer is expected to know how to program in Director, though some specialize in it. “Hip” web agencies generally have a Shockwave master or two in their design departments—so do many “unhip” agencies. (We’re not sure what “hip” and “unhip” actually mean in the context of web design and devel- opment, but some web agencies seem to care a lot about it. In this, they take their cue from ad agencies.) Shockwave development is an art unto itself. It coincides with web design but is not the same as web design. Shockwave has nothing to do with the structured, semantic Web of meaning and information—but then neither does a GIF image file. Shockwave has largely escaped the fire and brimstone preached against its younger cousin, Flash, because Shockwave files are fiendishly difficult to create; therefore, gigantic Shockwave “intros” are not epidemic through- out the Web. Hence the usability experts rarely scream about Shockwave. But, oh brother, do they roar about Flash. Flash Flash is Shockwave’s lighter, less-bandwidth-intensive, easier-to-program (but somewhat less powerful) cousin. Flash delivers animated graphics and sound, and it is completely interactive. At this point in the history of the Web, it is easier to create rich interactive presentations in Flash than by trying to use the open standards of the Web (HTML/XHTML, CSS, JavaScript, and the DOM). It’s more reliable, too, sadly enough. 370 HOW: Beyond Text/Pictures: The Impossible Lightness of Plug-ins 16 0732 CH12 4/24/01 11:24 AM Page 370 [...]... 4/24/01 11:24 AM Page 371 Taking Your Talent to the Web Flash files stream and can be highly compressed because Flash is built on vector graphics (As you know, vector graphics, like PostScript, are mathematical in nature rather than pixel-based.) Thus it is somewhat ironic that Flash has become known as a bloated format This has to do with poor Flash authoring, not with Flash Flash presentations, even... archive=”IpixViewer.jar” height=”210” width=”280”> If you can read this, your browser does not support Java Have a nice day. 16 0732 CH12 4/24/01 11:25 AM Page 379 Taking Your Talent to the Web As to whether anyone ever upgraded their browser in direct response to a website’s message, well, that is something else again The “Automagic... else Flash gets a bad rap Refer to the previous answer Still more reasons why Flash gets a bad rap There are several things, really For one, too many copycat designers use Flash in unimaginative, “me-too” ways Thus, every other corporate site seems to launch with a giant spinning logo rendered in Flash These miserable things are called “intros” (as in introduction) to the site They are the spiritual descendants... and then replaced it with HTML during the web-building phase In all probability, this page was never individually designed in Photoshop but is simply one of many that share the same template Notice that a Java applet has been used to embed the file, as described in this chapter’s section on Java Visitors lacking the iPIX plug-in will be treated to a Java simulation, rather than simply encounter an error... sophisticated software programs, you are very high and should lie down or consult a physician Tips on authoring Flash Buy the program Read the manual What do you want from us? Look at great Flash sites Look at poor Flash sites Emulate the good; learn from the bad Good Flash sites are dynamic, attractive, navigable, intuitive, communicative, and respectful of the visitor’s bandwidth and time—just like all... sophisticated ones, can be very low in bandwidth—and generally ought to be Flash files are created in the Macromedia Flash authoring program They also can be authored with Adobe’s LiveMotion software, which premiered in early 2000 Sixty second software review: LiveMotion is easier for beginners to learn, particularly if they are familiar with the Adobe interface found in Photoshop, Illlustrator, and so... unimaginative use of Flash, and the plug-in is best reserved for truly creative and artistic purposes You’ll find sites exemplifying that kind of creativity in Chapter 13 Another reason Flash gets a bad rap Failure to provide alternatives, thus leaving some users in the dust, is a widespread problem Macromedia has begun an initiative to make Flash sites more accessible, and this is commendable But streaming... things Flash can’t do Flash, with a more baffling interface and a steeper learning curve, is initially harder to learn But its programming depth, through Action Script and standard JavaScript, far exceeds that of LiveMotion (at least as of this writing) Cult take: Flash designers take as much pride in mastering the tool’s absurdly poor interface as they do in exploring its programming depth and complexity... poorly There are bad painters, but no one criticizes paint On the other hand, bad paintings aren’t shoved in your face when you’re trying to find information online A “Flash usability” site at www.flazoom.com can help you avoid designing useless or less-than-usable Flash movies; beyond that, the issues we discuss throughout this book are equally applicable to the world of Flash Base your work on the needs... deep into the site before he could find that simple, essential bit of information In baseball you get three strikes On the Web, you might not even get one We needed to locate that hotel’s address because we had no choice but to show up there Travelers planning a trip have many hotels to choose from Word up And that’s another reason that Flash gets a bad rap—because people who don’t know what they’re . of laughter is heard. As the viewer rotates away from your office tower, the laughter is drowned by the traffic noise. Or a tranquil beach panorama could reveal the Jaws theme as the camera reaches. video. QuickTime VR panoramas can be breathtaking, and various software prod- ucts are available to help you stitch together individual photographs into a full 3D panorama, including Apple QuickTime VR Authoring. essay, “Sympathy for the Plug-in” at http://www.alistapart.com/stories/ sympathy/. 369 Taking Your Talent to the Web Though they share a similar blow-you-away quality and though the man- ufacturer