Taking Your Talent to the Web- P25 ppsx

time” or “movies” directory, and so on. As described in Chapter 7, this makes it easier to find pieces and write appropriate file references during the site’s creation and subsequent maintenance. If for some reason you prefer to save your SSI files in a directory called “rosebud,” the reference would read: <! #include virtual=”/rosebud/menu.inc” > Now simply use that line of code in every HTML document where you for- merly had to cut and paste a heap of menu bar markup. Then upload your HTML pages to the web server. Some folks use a different file extension, such as .shtml or .shtm, if their HTML file contains an include, and some servers require this. But if you can stick to the .html file extension, you’ll avoid confusion and heartache down the road. Why confusion and heartache? We knew you were going to ask. For one thing, imagine that your static .html pages have been bookmarked by vis- itors and search engines. You then start changing your file extensions. All of a sudden, your internal and external links are broken, your visitors are confused, and the search engines that ranked you so highly are pointing to nonexistent pages. Are You Being Served? You’ve replaced redundant markup with neat, clean includes. What’s the next step? There probably isn’t one. Most web servers natively support SSIs. If it doesn’t work right away, you might need to contact the company host- ing your site (or the network administrator if your company hosts its own sites) and ask that the configuration file be changed to permit SSIs. Unless the hosting company hires trained monkeys as tech support, complying with your request will take two minutes. Of course, if you are sane, you will have made this phone call before chang- ing all your HTML pages. Or you will have created a test HTML page, uploaded it, and confirmed with your own eyes and mouse cursor that it works. 341 Taking Your Talent to the Web 16 0732 CH12 4/24/01 11:24 AM Page 341 More than one SSI can be put to use on each page. You can replace the “header,” the “footer,” or just about any piece of the puzzle. Using SSI, you can replace all or nearly all of the dull, repetitive junk that holds web pages together. In turn, you can begin viewing HTML pages as content containers rather than tortuous masterpieces of visually oriented markup—because content containers are exactly what they are and were always intended to be. This might not be the true separation of style from content, but it will do until the real thing comes along. SSI can do many things besides what we’ve outlined here. It can insert appropriate text, HTML, or CSS based on the user’s browser. It can indicate when the page was last updated (<! #echo var=”LAST_MODIFIED” >), give the current date and time, and do other funky tricks. And, as we’ve said, SSI is the low end. Imagine the possibilities if you begin to work with more advanced server-side technologies. Advantages of SSI If a site changes—or perhaps we should say when a site changes (for instance, when a new section must be added to the menu bar)—the power of SSI is revealed. What was true for CSS is just as true for SSI: It is easier to edit a single document (menu.inc) than it is to change hundreds or thousands. Hopefully, your client is not about to wantonly add new sections to the menu or demand changes to the appearance of the menu after the site is nearly built. In a perfect world, you have followed the suggestions in Chap- ter 7, and the client has signed off (and paid part of your fee) at each stage of completion. Therefore, the client has a vested interest in following through with the plan he committed to and paid for and has no vested interest in pulling last-minute changes to prove that he is the dominant monkey in this rainforest. But clients are clients, and change happens. SSI is a simple way of pro- tecting yourself from hours of tedious replacement tasks. 342 HOW: Beyond Text/Pictures: Take a Walk on the Server Side 16 0732 CH12 4/24/01 11:24 AM Page 342 Disadvantages of SSI Being a server-side technology, SSI eats up processing power from the server. Every time a visitor hits a page containing a replaced SSI element, the markup describing that element must be fetched from the server—like a stick in the jaws of a panting mastiff. If you’re building a professionally hosted site with plenty of server power in reserve, such demands on the server are no problem. If you’re hosting the site on your home computer and connected to your home cable modem, there could be a problem. Given sufficient traffic, the toll on your PC might be noticeable, and the site might “slow down” for your visitors during times of peak traffic. On the other hand, if you’re hosting an extremely popular site on your home computer, maybe it’s time to upgrade your server. If you are interested in server-side technologies, Jeff Veen’s The Art & Sci- ence of Web Design (New Riders: 2001) discusses the subject in more detail—and using better words and stuff. If you are uninterested in server- side technologies to the point of anxiety, you’ll be happy to know that we’ve finished discussing them. Now let’s look at a technology you will frequently encounter in your career but will never even contemplate programming yourself. Let’s talk about Java. First of all, what the heck is it? COOKIN’ WITH JAVA Java is an object-oriented programming language developed by Sun Microsystems (http://www.sun.com/) primarily for the Web. And just what, you ask, is an object-oriented programming language? An object-oriented language is one that reuses software objects the same way you might re- use custom shapes you’d created in Adobe Illustrator or a sales executive might reuse chunks of boilerplate text about “tremendous synergies, should our two companies work together.” 343 Taking Your Talent to the Web 16 0732 CH12 4/24/01 11:24 AM Page 343 In Illustrator, you can recombine basic button shapes, spirals, or complex outlines to create new artwork from predesigned fragments. Similarly, a Java programmer can combine entire libraries worth of coded objects to build new programs from existing parts. Reusing graphic elements makes you faster and more productive; reusing code objects does the same thing for Java programmers. Reusable parts: that’s the idea. Sun’s programmers called these parts objects. Sun didn’t invent this idea. Windows, Mac OS, and UNIX also reuse code objects (Windows DLLs, anyone?). But in operating systems like Win- dows, Mac OS, and UNIX, these reusable parts are immediately compiled down to machine code. In Java, they are compiled to an intermediary for- mat called “bytecode,” which is then interpreted by a Java Virtual Machine, about which we’ll have more to say in just a moment. As mentioned earlier in this chapter, Java can be used to create full-scale programs (applications), miniature programs that download quickly when needed (applets), or server-side servlets. Servlets are full-fledged but small application fragments that run in the context of the server—as Photoshop plug-ins run in the context of Photoshop. Ghost in the Virtual Machine But there’s a catch. Just as Windows programs require a Windows envi- ronment and Mac programs are designed for Macs, Java programs must run in a Java environment. Does this mean that you have to go out and buy a Java computer? No, it simply means that Java programs are designed to run in Java-capable web browsers (Netscape Navigator, Microsoft Internet Explorer), Java-capable web-enabled devices, or special Java devices (such as Java-powered digi- tal television-top boxes and remotes). They do this by means of Java Vir- tual Machines, which we promise, really truly promise, we will describe in just a moment. Netscape was the first browser to support Java, and the point of the Sun/Netscape partnership, as explained in Chapter 2, was to smash Win- dows hegemony while getting Java onto as many platforms as possible, by way of the browser. They succeeded at getting Java onto as many platforms as possible. One out of two ain’t bad. 344 HOW: Beyond Text/Pictures: Cookin’ with Java 16 0732 CH12 4/24/01 11:24 AM Page 344 Today most browsers and computer operating systems support Java. It gets a bit more complicated when the browser or OS maker offers an “improved” Java environment that Sun does not consider truly Java-compatible, but we’ll get to that later. Java-capable browsers might run on any computing platform (Windows, Mac OS, Linux, UNIX, or BeOS) as long as the browser manufacturer supports that platform. What makes all of this work? The Java Virtual Machine does. You might think of the Virtual Machine as a streamlined computer operating system (OS) running inside another computer OS—a Java computer running inside Windows, for example. Or you might think of it as an interpreter, turning spoken words into sign language for the hearing-impaired. This Virtual Machine is sometimes included with the browser. Early versions of Netscape included a Virtual Machine customized for each OS. This added significantly to the download time but ensured that users would have the then-new Java technology at their disposal. In other cases, the Virtual Machine is built into the operating system. For instance, Apple Macintosh OS9 includes “Mac OS Runtime for Java,” a Java Virtual Machine whose sole purpose is to run Java programs on the Mac. If you install IE5 Macintosh Edition on a pre-OS 9 Mac, you might get Java errors because IE5/Mac expects a more recent Virtual Machine than the one on your system. You can correct this problem by upgrading to OS9 or by downloading a more recent version of Mac OS Runtime for Java from http://developer.apple.com/java/classic.html. The program is free. As you can see, the tantalizing potential of Java lies in its ability to work in any operating system equipped with a Java Virtual machine—in other words, theoretically at least, to run on any operating system. Practically speaking, developers could build a word processor or a full-blown office suite that runs in any Java-capable web browser and on any operating sys- tem with a Virtual Machine. Of course, companies that make word proces- sors and full-blown office suites might not like that idea. They might dislike it so much that they would end up building their own web browser and tak- ing over the market…not that we’re mentioning any names. There is, in fact, a Java word processor (indeed, there is an entire Java office suite), and we hear it works quite well. 345 Taking Your Talent to the Web 16 0732 CH12 4/24/01 11:24 AM Page 345 Where the web designer fits in As a web designer, you might be called upon to embed a Java applet in an HTML page. (Again: An applet is a self-contained piece of code that runs within a Java-capable browser, as Photoshop plug-ins run within Photo- shop.) This is simply a matter of using the HTML <OBJECT> or <APPLET> tag or another very basic HTML tag—no problem at all. At other times, you might use Java to compensate for a missing plug-in on a visitor’s system. For instance, the IpixViewer plug-in, like Apple’s QuickTime VR (see the sec- tion, "Turn on, Tune in, Plug-in" later in this chapter), enables visitors to explore 360º panoramic views of any location that can be photographed. It’s an extraordinary plug-in that does a remarkable job. But not many peo- ple know about this plug-in, so not many have downloaded it. Therefore you might feel that IpixViewer content cannot be used on your site. Not to worry! The missing plug-in can be replaced by a Java applet and compiled down to native, platform-specific code via the Java Virtual Machine: <applet name=”IpixViewer” code=”IpixViewer.class” archive=”IpixViewer.jar” height=”210” ➥width=”280”> <param name=”URL” value=”zabptcaj.ipx”> <param name=”Spin” value=”on”> </applet> If the HTML just listed looks odd to you, don’t sweat it. Your Java developer will tell you what needs to be included on the page. Your job will be to insert it, test it, and verify things such as height and width. (Is the result- ing image in fact 210 pixels high? Does it look right? If not, change the numbers and try again.) By the way, this same technique works for other multimedia content, such as Flash. If the visitor lacks the Flash plug-in, a Java applet can display the Flash content. Your developers will create the applet and the complex code that determines whether or not the applet is needed on each visitor’s system. Your job is simply to plug in some HTML and test. The other reason you need to know about Java is that in spite of its utopian aims and utilitarian benefits, Java can sometimes be problematic. And as a user-oriented web designer, you need to be aware of that. 346 HOW: Beyond Text/Pictures: Cookin’ with Java 16 0732 CH12 4/24/01 11:24 AM Page 346 Java Woes We can do this two ways: the short, brutal version or the long, boring, polit- ically correct version. Here’s the short, brutal version: From a user experience perspective, Java often sucks. It can be as unstable as Norman Bates, drain resources like Australians drain beer steins, and crash more frequently than a drunk dri- ver’s Pinto. For those who expect us to be fair, a long, carefully guarded, politically cor- rect version follows. Feel free to skip it unless you are an attorney for Sun Microsystems. In which case, we meant to say that Java is the best thing since the Magna Carta. Java Woes: The Politically Correct Version At times, companies have created their own Java Virtual Machines that dif- fer subtly from Sun’s. Sun does not like that, and you can understand why. Java is not open source; it is a protected product. Differing Virtual Machines can sometimes prevent Java from fulfilling its promise. This has led some developers to avoid using Java. As a web designer, you will want to stay aware of these issues if there’s a possibility of their affecting your site and your users. Java can also sometimes drain the computer’s memory resources because the user is essentially running a second operating system (Java) within his existing OS. Not to mention the fact that the user is likely running a Java- based application on an unstable web browser with all its memory-hog- ging plug-ins, on top of any other software programs he might have running in the background, and on top of a possibly unstable base operat- ing system such as an older version of Mac OS, which can be wonderful but not entirely stable. The older the computer and the less memory at its disposal, the greater the possibility of woe. Attention, Sun attorneys: We do not wish to overstate these issues. All that is usually required is for the user to increase the amount of memory allotted to the browser. Unfortunately, most web users don’t realize this, so they don’t do it. Result: instability. 347 Taking Your Talent to the Web 16 0732 CH12 4/24/01 11:24 AM Page 347 The memory problem is not a Java problem per se; plug-ins like Flash and Shockwave also work better if the user increases his browser’s memory par- tition. Fortunately, during the installation process, Shockwave and Flash alert users to the issue and offer to increase the browser’s memory auto- matically if the user clicks the OK button. Java does not do this because Java is typically preinstalled on the user’s machine when it arrives from the factory. Given that browser makers know most users are going to encounter Java and are going to install and run plug-ins, why don’t they increase the default memory partition of their browsers? In a word: competition. The browser makers want to prove that their product uses less memory than the competitor’s, so the browser installs itself with the lowest memory allotment possible. It will operate under those conditions just fine as long as users rarely venture beyond all-text websites. Most users do venture far beyond, whether knowingly or not. So most users are practically guaran- teed to encounter browser instability on sites that use Java or plug-ins or even large, memory-draining background images. Though Java tends to work well in Windows and UNIX, it’s a mixed bag in Mac OS. Even on top-of-the-line G4 Macs with 1.5GB of installed RAM, T3 connections, and system buses capable of transferring over 1GB of data per second, Java can sour. These same Macs can rotate a 40MB Photoshop image faster than Google can track down your ex-girlfriend. At speeds exceeding 5.5 gigaflops, they can outperform Pentiums with twice the rated clock speed. But a stupid “rippling water” Java applet on a personal site at Geocities can take down these mighty Macs. Java is cross-platform but not always reliably so. Attention, lawyers: We do not wish to overstate these issues. Then of course, Java does not work at all in text-based browsers such as Lynx, nor will it function in older browsers such as Internet Explorer 2. And users of even the newest browsers might “turn off” Java in their prefer- ences, thus defeating the development team’s efforts to use Java on the site. 348 HOW: Beyond Text/Pictures: Cookin’ with Java 16 0732 CH12 4/24/01 11:24 AM Page 348 This is not a Java problem per se. Users can also turn off JavaScript and style sheets. They can refuse to install plug-ins, tell the browser to use “their” background colors instead of yours, and in every other way imagi- nable assert their right to see the Web as they wish to see it, thus turning your beautiful site into a sea of sewage that strangely pleases them. The workaround, as always, is to provide alternatives. Simple HTML menus and alternative content go a long way toward keeping sites accessible, no matter what technologies are intended for their use under optimal condi- tions. We do not wish to understate this issue. We wish to strongly empha- size it. Make accessibility part of the plan at all times. Java Joys Despite hiccups, Java is cross-platform, and it does many things very well, such as “stepping in” to replace missing plug-ins. For instance, as just described, Flash files can be run as Java applications in Netscape Naviga- tor if the user does not have the Flash plug-in. That is fairly remarkable. It is handled by Flash itself. When saving the file, Flash generates code that will call upon a built-in Java action if the plug-in is not detected in the user’s browser. Beyond all that, Java applets and Java servlets (smaller, more stable mini- applications of Java that run on the server) can be used to help create dynamic, database-driven websites. Java is ideally suited for sophisticated tasks that take place under the hood. Because Java works cross-platform and cross-browser (despite problems just mentioned), it might be prefer- able to use Java for complex tasks, rather than relying on proprietary, plat- form- and browser-specific technologies such as VBScript and ActiveX. Java seems less valuable to us when it is used to create dynamic menus or to trigger the rotation of ad banners. In both cases, JavaScript/ECMAScript is a lighter, more stable choice that is also a web standard, tends to use fewer computing resources, and works better across platforms. 349 Taking Your Talent to the Web 16 0732 CH12 4/24/01 11:24 AM Page 349 Seeing as we’ve mentioned Java and JavaScript in the same paragraph, we might as well restate that the two technologies should not be confused, in spite of their similar names. JavaScript is a complex but interpreted pro- gramming language that works in web browsers. Java is a full-fledged, object-oriented programming environment that can drive entire devices or can be used to build complete applications. Nearly all web designers work with JavaScript, whether on the programming level or simply via cut-and- paste. No sane web designer attempts to program in Java. Even insane web designers avoid it. The true power of Java is now being manifested beyond the browser. Instead of web surfing, consumers are channel surfing via Java-powered TV devices (www-us.semiconductors.com/news/content/file_501.html). Java and Linux are now creating Internet appliances that require no understanding of Java or Linux (http://www.linuxdevices.com/news/ NS5323294840.html). Java is finding its way into Personal Digital Assis- tants (PDAs), cell phones, and even server-side technologies (http:// www.alistapart.com/stories/beyond/2.html). Keep your eye on Java as your career unfolds, and use it judiciously as your sites evolve. RICH MEDIA: EXPLODING THE “PAGE” We say web “pages” because our minds cannot let go of the publishing model we grew up with. But rich web media give the lie to the “page” metaphor. These pages are not pages. This is not a pipe. This is not my beau- tiful wife. Let’s see how standard technologies and popular plug-ins push the Web way beyond the cosmologies of print design. We’ll start with some web standards you might or might not know about. Virtual Reality Modeling Language (VRML) VRML, though nearly dead from disuse, is the standard language for the animation and 3D modeling of geometric shapes. It allows 3D scenes to be viewed and interactively manipulated on the Web. Using a special VRML browser, the web user can connect to an online VRML site, choose a 3D 350 HOW: Beyond Text/Pictures: Rich Media 16 0732 CH12 4/24/01 11:24 AM Page 350 [...]...16 0732 CH12 4/24/01 11:24 AM Page 351 Taking Your Talent to the Web environment to explore, and cruise around the spooky “3D world.” It is also possible to zoom in and out and to interact with the 3D environment in various ways The Netscape Live3D VRML browser (built into Netscape 3) was the first to support the VRML 1.0 standard Think video game Think cheesy, super-low-grade... available to Braille readers Such content will also enable search engines to index multimedia web content authored in SMIL 16 0732 CH12 4/24/01 11:24 AM Page 353 Taking Your Talent to the Web In English: slap a QuickTime video on your site and search engines such as Google or Altavista could care less But add a carefully authored SMIL presentation to your site, and speeches made by the characters in your. .. 4/24/01 11:24 AM Page 355 Taking Your Talent to the Web 355 Figure 12.5 The Battlebots logo in SVG At the user’s discretion, the image can be enlarged again and again Figure 12.6 Vector artwork maintains quality at the highest magnifications while keeping bandwidth expenditure at a minimum (http:// www.adobe.com/) No matter its graphic appearance, SVG remains text To understand the implications of that... pause to consider a recent development Over the past couple of years, W3C recommendations have emerged to suggest standardized ways of doing what proprietary plug-ins already do so well One of these is SMIL, the W3C recommendation for multimedia; the other is SVG, intended to deliver vector graphics such as those already used in Flash (but with some essential differences from Flash) What’s up with these... dazzling in today’s world of Flash 5, DOM-based interactivity, and improved monitor and color resolutions Perhaps for these reasons, the technology has never caught on the way that JavaScript, for example, caught on Web users have a tough enough time finding what they want on most websites without adding primitive 3D effects to the mix Of course, VRML was never about “web users finding what they want,”... But have we? Web-using veterans might recall a similar 3D experiment called Hot Sauce that was created by Apple Computer in the mid-1990s Hot Sauce turned text-based directories into virtual 3D environments containing (you guessed it) text—text that floated in fake 3D space To move from one block of text to the next, you eased your mouse up and down your desk Instead of navigating Yahoo.com the conventional... hours painfully navigating a 3D version of the Yahoo directory This was not most people’s idea of fun, and the technology soon petered out Scientists do what they can; marketers do what sells Hot Sauce did not sell, and neither did VRML because after you muttered, “Cool,” there was little else to be said Angry VRML and Hot Sauce fans, please send your protests to null@newriders.com 351 16 0732 CH12 352... for its GoLive WYSIWYG tool, which should simplify the creation of SMIL content and might help accelerate the standard’s adoption RealSystem’s support for SMIL has been solid since 1998 Given the number of RealPlayers out there, SMIL can already reach almost as many web users as Flash does Not that SMIL and Flash are enemies SMIL is often used to integrate Flash content into the QuickTime and RealPlayers,... probably don’t need to know much more about it If you’re curious, more information is available at The Web Developer’s Virtual Library: http://wdvl.internet.com/Authoring/VRML/ SVG and SMIL In the absence of finalized multimedia standards for the Web, plug-ins were developed that enabled websites to offer streaming video, animated vector graphics, music tracks, and the like We are about to look at those... few simple tags Author! Author! Among the currently available Web tools and plug-ins that support SMIL are Apple QuickTime 4.1 (http://www.apple.com/quicktime/) and the unfortunately named RealSlideshow authoring tool by the makers of 353 16 0732 CH12 354 4/24/01 11:24 AM Page 354 HOW: Beyond Text/Pictures: Rich Media the RealPlayer (http://proforma.real.com/rn/tools/slideshow/index.html?) Adobe is . sheets. They can refuse to install plug-ins, tell the browser to use “their” background colors instead of yours, and in every other way imagi- nable assert their right to see the Web as they wish to. for the user to increase the amount of memory allotted to the browser. Unfortunately, most web users don’t realize this, so they don’t do it. Result: instability. 347 Taking Your Talent to the. Hopefully, your client is not about to wantonly add new sections to the menu or demand changes to the appearance of the menu after the site is nearly built. In a perfect world, you have followed the