idg books great web architecture phần 5 potx

- 90 - Figure 6.26 Figure 6.27 - 91 - Figure 6.28 Figure 6.29 - 92 - Figure 6.30 Rather than bludgeon us with multimedia until we scream “cool,” this site incorporates multimedia elements to enhance an already successful brand image. These innovative elements serve the site without changing the basic construction techniques we’ve examined in previous chapters. The information architecture, navigation, consistent typography, and strong color scheme are all parts of well-designed sites, even without multimedia elements. So what’s the big fuss about multimedia? It appears to be a mere adjunct to HTML—a collection of plug- ins for creative designers to take advantage of, but not really a paradigm-shifting technology. As with all well-hyped innovations, the truth lies somewhere in between. Let’s explore the possibilities. It’s All a Game The Shockwave puzzle used in the Kenneth Cole site is one of the most common programming examples in existence. The same game has shipped as a desk accessory with every Mac back to the original 128K model. It can also be found on the Web in at least one other incarnation, but in very different circumstances. IKEA, the Swedish home furnishings giant, has attempted to recreate the shopping experience of their warehouse-like stores online. And just as the stores include a supervised play area for children, so does the Web site (www.ikea.com ). The Living with Kids section of the site features a page of Fun and Games (6.31 ). And here is the same sliding puzzle. But instead of a scramble of high-fashion models (the young and restless), IKEA’s friendly-looking green python, Djungelorm, is severed into the jumble for this puzzle. - 93 - Figure 6.31 Shockwave? Java? What’s the Difference? The interface for IKEA’s version of the puzzle is a bit different, and the graphics are certainly brighter, but the puzzle is essentially the same (6.32 , 6.33). And there’s another interesting difference here that’s not immediately noticeable. Instead of using Shockwave, IKEA’s site designer, Deutsch, Inc. of New York, has programmed this version of the game in Java. Figure 6.32 - 94 - Figure 6.33 From the user perspective, it makes little difference if a Web game is developed in Shockwave or Java. However, the Java version is apt to be more compact and therefore to load faster. On the other hand, experienced Director users, capable of turning out Shockwave products, are more easily found in the design world than Java programmers capable of writing custom applets, an expensive commodity. IKEA has incorporated Java applets in a number of places within its site. In addition to the three children’s games, there is a pair of much more sophisticated interactive animations in the Product Guide section of the site (6.34 ). We’ll start with the Assembly Tips & Demo link. Figure 6.34 IKEA has made its mark as a purveyor of low-cost, high-quality furniture. One of the ways they keep costs down is by leaving much of the final assembly to the customer. This has led them to develop a number of streamlined assembly techniques and multi-lingual sets of clear instructions to go along with them. Here’s a multimedia version that practically puts the furniture together for you. Before we get to the actually assembly, there’s a cautionary page that alerts us, “Java or Flash required” (6.35 ). There are two versions of this demo. If the Flash plug-in is detected, the Flash version - 95 - is used; if not, the slightly larger Java version is loaded. If you don’t have a Java-capable browser, it’s easier to get one than it is to assemble your IKEA furniture. We have to click one more time to get to the actual demo. Figure 6.35 Instead of opening a new pop-up window, this movie/applet loads in the same main frame used for all the content of the IKEA site. The color scheme, iconography, and typography are all familiar and consistent with the rest of the site. Despite this, Flash/Java takes over when the movie/applet is loaded. The only animated element in the first step is the flashing arrow pointing to step 2 (6.36 ). The rest is a simple parts list. The little controls panel is part of every step window. It not only tells us where we are, but also includes step forward and back, fast forward and back, and help buttons. Because this is a Flash/Java animation, clicking a button immediately loads the next step. We don’t have to wait for a new page to be downloaded. Click onward. - 96 - Figure 6.36 Step 2 begins the animated assembly. The pieces are all laid out on the floor and begin to assemble themselves in order. Sound effects accompany the movement of each piece. When we’re required to do something, the animation stops and the pieces in question flash to get our attention. At this point we’re instructed to roll the cursor over the flashing areas for detailed instructions. The detail pops up and presumably we figure out what to do (6.37 ). Click onward. Figure 6.37 Steps 3, 4, and 5 continue in much the same way, picking the pieces up off the floor, then pausing to let you view the assembly detail (6.38 , 6.39, 6.40). If we were actually trying to assemble a bookshelf, this little animation would make it very easy, perhaps even pleasurable. Now the animation affixes the shelf to the wall and loads it up with books. The controls panel changes to let us preview the bookshelf in the three finishes available. - 97 - Figure 6.38 Figure 6.39 - 98 - Figure 6.40 As a final step, we can click and link over to see photographs of the shelves (6.41 ). These so-called Billy shelves are simple enough, but IKEA provides a dozen different views of them so you’ll really know what they look like. Just click one of the JavaScript rollover buttons to change the view (6.42 ). IKEA could have preloaded all the images and included them with the rollovers, but the cumulative size of so many images would make this impractical. Figure 6.41 - 99 - Figure 6.42 Even though the assembly demo is relatively crude, the equivalent of stick figure animation, it intensifies the feeling of reality of the site. We’ve all seen the very professional photographs of furniture pieces and room settings that fill the other catalog-like sections of this site, but somehow this animated schematic vision is more real. It gives us more of a feel of what it will be like when we get that flat box of parts home and try to fit it into our cluttered lives. “Componentized” Applet The same is true for IKEA’s IVAR design tool. IVAR is the name of IKEA’s component storage system used with this Java applet. This is neither a movie nor an animation. It is a design application, and as such, it comes with instructions (6.43 ). It’s fairly simple, and you could probably figure most of this out, but it’s nice to be sure of your tools when you start building. Figure 6.43 Essentially, this tool lets you drag pieces and put them together in an isometric model just the way a real designer would do with a T-square and triangle. It’s a good way to simulate the assembly of these component shelving units. You can even print out a final list of components to take with you when you go to the IKEA store to make your purchase. [...]... browser version and the presence of the Flash plug-in is included on the companion Web site, at www.idgbooks.com/extras/webarch.html.) There’s a momentary pause while the opening Flash sequence loads, and then images and words start fading in and out with the tag line for this product (6.48, 6.47, 6.48, 6.49, 6 .50 and 6 .51 ) All this happens fairly quickly, because we don’t have to wait for the entire... corner of the pressroom that was used only on 72-point days, such as this one On the Web, there are no such well-defined rules for displaying information One of the greatest assets of the Web is that all sites are created equal One of its greatest detriments is that all information ends up being treated equal, as well On the Web, All News Is Created Equal Despite the earthshaking news of the day, the morning... (6 .56 ) This might be annoying if you had to wait for the next page to load, but in this case, the animation of the next page sliding over the previous one is just fun The navigational elements remain stationary during this animated sequence, and of course there’s a “Back” button to bring you back again (6 .57 ) There is also a Recipes section with two layers of forward and back buttons (6 .58 ) Figure 6 .56 ... appears (6 .52 ) (There’s a small, yellow arrow that you can click to skip the introduction and go straight to the first page.) I say page, but because this entire site is a single Flash file, the mention of pages is a bit misleading Nonetheless, the sense of pages is still present, so I will continue to speak of them - 102 - Figure 6.48 Figure 6.49 - 103 - Figure 6 .50 Figure 6 .51 - 104 - Figure 6 .52 Comparing... almost immediately (6 .54 ) This is because the Flash site is a single file that loads while you’re admiring the opening sequence Once it is loaded, switching pages is nearly instantaneous Figure 6 .54 Load Once, Wait Once Obviously, we have to wait for the Product page to load in the HTML version We’re accustomed to waiting for short load times, and this one is only about 10 seconds with a 56 K modem But once... FlashBake, Flash was the Web technology that best matched their innovative baking technology, and this turned out to be one of the more compelling arguments in its favor But most important, once you’ve gone through FlashBake’s Flash site, you end up really wanting to own one of their ovens Only the price tag has kept me from calling Maybe I’ll buy a copy of Flash, first Part II: Web Architecture in Action... becoming librarians Michael Freedman, Plumb Design, Inc The Web has become the great marketing melting pot, but it didn’t start out this way At first, information was everything and the notion of content as king was ascendant But nowadays more attention and money are being spent on image, resulting in a discernable shift in emphasis All the same, the Web remains the place to go for information Just look... so much information and so many ways to search through it is the most exciting aspect of the Web But as Web architects, our interest is in the presentation of information—how to make it readable, understandable, digestible, and even pleasing to look at This is distinct from, but dependent upon, information architecture, which is concerned with the organization of information You - 109 - cannot present... pauses, 10 seconds is an eternity Pabulum has done all the things good Web architects must to create clean, clear navigation Then they’ve turbocharged it by creating the entire site in Flash You can switch from page to page so quickly that you’re tempted to click for the pure delight of seeing every page Now look at the second HTML page (6 .55 ) This is still a good page, but in a side-by-side comparison it... can do with Flash For instance, on a particular page we can click a color swatch to see what this oven looks like in white, black, or professional chrome finishes (6 .59 ) One wishes there were other colors to play with - 108 - Figure 6 .59 In addition to all its visual advantages, the Flash version was faster to create, and is more compact and easier to maintain The file can be edited in the Flash program . button to bring you back again (6 .57 ). There is also a Recipes section with two layers of forward and back buttons (6 .58 ). Figure 6 .56 - 108 - Figure 6 .57 Figure 6 .58 Accelerating the Navigation The. will continue to speak of them. - 103 - Figure 6.48 Figure 6.49 - 104 - Figure 6 .50 Figure 6 .51 - 1 05 - Figure 6 .52 Comparing Standard HTML and Flash Pabulum, the designers of this site, built. version and the presence of the Flash plug-in is included on the companion Web site, at www.idgbooks.com/extras/webarch.html .) There’s a momentary pause while the opening Flash sequence loads,