324 Part III: Designing Sites for Long-Term Success You can also combine the object and a elements so that if, for some reason, an individual s browser doesn t render the media inline, you can include a link to the media instead: If file does not display please follow this link Figure 12-18 shows audio playing in the IE browser. Figure 12-18: Playing an embedded media file in IE. tip Numerous other workarounds might be of assistance to you in trying to manage cross-browser compatibility for audio, video, and other plug-in technologies. See Using the Right Markup to Invoke Plugins by Arun K. Raganathan, at http://devedge.netscape.com/viewsource/ 2002/markup-and-plugins/. You may also wish to take a look at the Standards Compliant Method to Add MP3s to Pages which offers four potential solutions, at http://realdev1.realise.com/rossa/ rendertest/mp3.html. Secret #214: Adding Video You can add video in several ways as well, but the same frustrations exist in terms of browser bugs and implementation of the object element.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Java Web Hosting services

Chapter 12: Spicing It Up with Dynamic Content 323 value=”c.swf?path=movie.swf” /> You can see the c.swf?path code, which is the container movie. With this in place, the file streams in IE, works in numerous browsers, and is completely valid markup. note To cook up a Flash Satay, you ll need to add a dash of ActionScript. For the complete recipe, see Flash Satay: Embedding Flash While Supporting Standards by Drew McLellan, at www.alistapart.com/articles/ flashsatay/. Another approach is simply to use the object element as follows: This works well in some contemporary browser, but is not supported well by those browsers with partial or no implementation of the object element. Secret #213: Adding Audio You can place and access most Web-based audio files in a couple of standardized ways: by using the anchor element or the object element to embed media. Using the anchor element is the same as placing any link within an XHTML document: New tune available today! If you use this method, your users will either save the file to their desktops, launch a plug-in application, or load a new browser page, depending on which browser they re using and how they have set their preferences. If you want the audio control interface to be embedded with the rest of the content, ideally you will choose to embed the clip in the page by using the object element: Take notice of these items: I musing the data attribute described in the Flash Satay method rather than the codebase attribute. The text in between the opening and closing object tags will only render if the requested object doesn t display. I ve included the width and height attributes. These are required for most browsers if you re using the object element. I ve included the MIME type attribute with a value of audio/mp3.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Linux Web Hosting services

322 Part III: Designing Sites for Long-Term Success custom DTD. You can add the embed element for backward compatibility and use it on those pages that require the element. note Interested in writing your own DTDs? A short tutorial is available at www.vivtek.com/xml/writing-dtd.html. An excellent test suite for browser behavior for objects can be found at www.student.oulu.fi/%7esairwas/object-test/. Secret #212: Adding Flash and Complying with Standards In an effort to achieve better performance and compliance, Drew McLellan worked on a means of extracting the embed element from the combo-platter use of both object and embed most people using Flash had been employing to achieve backward compatibility. He started with this sample code: As you can see, both the object and embed elements are in use. McLellan then began to withdraw problematic elements and attributes, and benchmark each modification. One very important piece was to remove the codebase attribute and replace it with the data attribute. He was able to get the code down to this: This markup now worked in Netscape and Mozilla, and while the Flash movie would play in Internet Explorer (IE) after downloading fully, it wouldn t stream properly. This wasn tnoticeable for small files at high speeds, but enter a larger file, and it became very noticeable. Therefore, McLellan and designer Jeffrey Zeldman put their heads together and cooked up a solution involving creating a container movie in Flash, and loading the movie via ActionScript. By the time the Satay method is employed, the markup looks like this:

Chapter 12: Spicing It Up with Dynamic Content 321 While it s still acceptable to use the applet element in HTML 4.0, 4.01, and XHTML 1.0 Transitional, the element was formally deprecated in HTML 4.0 in favor of the object element. Then Flash began to emerge as the hottest thing on theWeb add to that the desire to embed objects into browsers, and the proprietary embed element emerged. Even though the embed element doesn t exist in any public DTD, its use on the Web is extremely widespread as a result: Not only is embed widespread, but despite its nonstandard status, it has terrific browser support. Enter object. The object element is a standard, forward-compatible markup element available to you in all contemporary DTDs and all contemporary Web browsers. Its job is to take care of any object that s being attached to an HTML or XHTML document. This includes applets, Flash files, audio files, and video files. note The XHTML 2.0 specification (still being developed) is attempting to make the use of object ubiquitous, meaning it will be used for all objects including images (bye, bye img element). Backward compatible it won t be, but it s certainly sensible for the long-term needs. It s possible that the final version will still include the img element for backward compatibility, as it s currently an area of great controversy. For those browsers not supporting the object element, or more importantly, those browsers with bugs or incomplete support, there are very few, if any, real alternatives to present media. The bottom line is that managing media without the proprietary embed element has been one of the most hair-pulling, frustrating bits for all of us who are trying to create compliant, cross-browser, cross-platform, backwardand forward-compatible Web documents. This means you have only a few options when dealing with media: Use applet for Java applets with a transitional DTD. Use embed and object combined. This technique ensures backward compatibility and is the most widely used approach. However, because embed is not a valid element, this technique will not be valid, and therefore the document is not standard. Some people don t care, as long as it works. My only thoughts about this is that if you re going to do it, use a transitional DTD, try to keep everything else valid, and add a comment in the document that you ve made the choice to use an invalid element. This way, anyone viewing your source code will be able to learn from you. Use object alone for all embedded media. This is the standard approach, but it s fraught with compatibility problems. Use a specialty approach (such as the Flash Satay method described in the next secret). You can write your own DTD to include the embed element. Because XHTML conceptually allows you to do this, it s not as insane as it sounds. IBM, for example, creates their own DTDs (see Chapter 6, Crafting Pages with HTML for more on DTDs) to include the embed element. Creating your own DTD means that instead of validating against the public DTD, the document can be validated against your

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost PHP Web Hosting services

320 Part III: Designing Sites for Long-Term Success Figure 12-17: Milonic has created a very useful cross-browser menu system. You can validate forms on the server using PHP, Perl, CGI, ASP.Net and there are certainly advantages to that, especially because the validation is not dependent upon JavaScript being present or enabled. However, the primary reason for using JavaScript to validate forms is that it all happens within the browser. This means that the feedback to the user is immediate and no trip to the server and back is required. note There are many ways to validate aspects of forms using JavaScript, and the code is usually quite detailed. For an excellent tutorial including the necessary script, see Form Validation Step-by-Step by Robert Dominy, at http://javascript.about.com/library/weekly/aa070901a .htm. Secret #211: The Trouble with applet, object, and embed If you ve been using media on the Web for a while, no doubt you are familiar with the rather awkward history of how we ve come to manage media. First, there s the applet element, used to embed Java applets in Web pages:

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Java Web Hosting services

Chapter 12: Spicing It Up with Dynamic Content 319 Figure 12-16: Simple JavaScript jump menu. For both usability and accessibility concerns, be sure that any dynamic menus do not overlap or cover up important content, such as other links or menu options. Be sure to test your menus aggressively in those browsers that you will be required to support the lack of consistent DOM support in browsers causes compatibility problems with some scripting. Use clear and common language for menu options (see Chapter 4, Creating and Managing Fantastic Content ). Dynamic menu systems can get quite complex (see Figure 12-17) with all kinds of added features, such as fly-outs and mouseover popups with additional information about the link. note For free dynamic menu scripts, see the Dynamic HTML Lab at www.webreference.com/dhtml/ and at JavaScript.com, www.javascript.com/. You can see Milonic s product at www.milonic.com/. Secret #210: Forms Validation with JavaScript Validation of forms is an important step that many Web designers aren t aware of early on. Validation of forms provides several helpful usability features, including making sure the information that the user inputs is correct, and that the user doesn t leave any required information out.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Unix Web Hosting services

318 Part III: Designing Sites for Long-Term Success Listing 12-9: (continued)

This script is referred to as a drop-down, pull-down, or jump menu. When the user clicks the Go button, he or she will end up at the selected URL. This kind of menu system is very handy for jumping from section to section within a site, or as shown here, to other related sites. Figure 12-16 shows the menu. tip You can use style sheets to add visual interest to your menu. Dynamic menu systems can be very handy when you have a particularly large site and want to offer numerous navigation options to site visitors. It is very important, however, to follow some simple guidelines to ensure that the menu systems you implement using JavaScript and DHTML are useful: For accessibility purposes, be sure that your users can easily navigate the site if JavaScript is unavailable. This means providing accessible options to the menu (see Chapter 10, Adding Accessibility Features ).

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Cheap Web Hosting services

Chapter 12: Spicing It Up with Dynamic Content 317 Figure 12-15: Switch again for a different style completely. note There are other means to implement style switching, such as with PHP and other server-side solutions. Server solutions are best when you believe you have a significant audience with JavaScript disabled. To read more about implementing style switching, see Alternative Style: Working with Alternate Style Sheets by Paul Sowden (who also authored the switching script used here) at www.alistapart.com/articles/alternate/. Secret #209: Dynamic Menu Systems One of the most useful applications of scripting is the ability to create a range of menu systems, including drop-down menus, fly-out menus, and sliding menus. To show all the types of menus available here would be very difficult, so Listing 12-9 provides one simple example. You ll note that it uses an XHTML Transitional DOCTYPE. This is because the name attribute is in use. Feel free to research a variety of scripts to help you configure dynamic menu systems of your own. Listing 12-9: JavaScript Drop-down menu navigation < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (continued)

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Linux Web Hosting services

316 Part III: Designing Sites for Long-Term Success Listing 12-8: (continued)

You can refer back to Figure 12-12 to see the default style. Figure 12-14 shows the flower style, and Figure 12-15 shows the pastel style after using the style switch links. Figure 12-14: Style switch to a flowery look.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Unix Web Hosting services

Chapter 12: Spicing It Up with Dynamic Content 315 Secret #208: Style Sheet Switching for Visual Design Along with switching text styles, you can use the same technique to switch entire visual designs. This allows your site visitors to customize the way they see your site. The process for switching styles for entire designs is exactly the same as with text switching. You re tapping into the rel and title attributes, using alternate style sheets and the style switcher JavaScript. Listing 12-8 shows my XHTML document configured for multiple style sheets. The switching script is exactly the same script used in the preceding secret. Listing 12-8: XHTML document showing options for changing entire site Style < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">