Transcript Ch 11
Web Development & Design Foundations with XHTML Chapter 11 Key Concepts Learning Outcomes In this chapter, you will learn about: ◦ ◦ ◦ ◦ ◦ ◦ Helper Applications and Plug-ins Audio file types Adding sound to a web page Video file types Adding video to a web page The features and common uses of JavaScript, Java Applets, Flash, DHTML, and Ajax ◦ Adding a Java Applet to a web page ◦ Adding a Flash Animation to a web page ◦ Find free JavaScript, Java Applets, DHTML, Ajax, and Flash resources on the Web 2 Helper Applications & Plug-ins Helper Application ◦ A program that can be designated to handle a particular file type (such as .wav or.mpg) to allow the user to view or otherwise utilize the special file. ◦ The helper application runs in a separate window from the browser. Plug-In ◦ A newer and more common method ◦ Plug-ins run right in the browser window so that media objects can be integrated directly into the web page. 3 Commonly Used Plug-ins Adobe Flash Player Adobe Reader Windows Media Player Apple Quicktime 4 Common Audio File Types .wav .aiff .mid .au .mp3 .ogg . m4a Wave File Audio Interchange File Format Musical Instrument Digital Interface (MIDI) Sun UNIX sound file MPEG-1 Audio Layer-3 Ogg-Vorbis MPEG 4 Audio. This audio-only MPEG-4 format is supported by Quicktime, iTunes, and iPods. 5 Common Video File Types .mov Quicktime .avi Microsoft Audio Video Interleaved .wmv Windows Media File .flv Flash Video File .mpg MPEG (Motion Picture Experts Group) .m4v .mp4 (MPEG-4) 6 Using Sound on a Web Page Hyperlink <a href=“wdfpodcast.mp3" title=“Web Design Podcast”>Web Design Podcast</a> Embed the sound ◦ You can embed the sound in a page and optionally display a control panel for the sound ◦ The <object> tag W3C standard and supported by modern browsers 7 This code is valid but does not work for IE XHTML <object> & <param /> tags <object data= "soundloop.mp3" height="50" width= "50“ type="audio/mpeg" title= "Music Sound Loop" > <param name= “src" value= "soundloop.mp3" /> </object> 8 The IE Issue Cross-browser <object> & <param /> tags • Described by Elizabeth Castro at http://www.alistapart.com/articles/byebyee mbed • Internet Explorer expects the classid and codebase attributes but other browsers do not correctly render the object when they are included Solution • Cross-browser <object> & <param /> tags Configure TWO <object> tags • One for Internet Explorer • One for other browsers • • Use Conditional Comments to “direct” IE to the appropriate <object> tag Tell IE to skip the code between the tags: <!--[if !IE]>--> <!--<![endif] --> Recall that browsers render XHTML topdown Cross-browser <object> & <param /> tags <object data="soundloop.mp3" height="50" width="100" type="audio/mpeg" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="soundloop.mp3" /> <param name="controller" value="true" /> <param name="autoplay" value="false" /> <!--[if !IE]>--> <object data="soundloop.mp3" height="50" width="100" type="audio/mpeg" > <param name="src" value="soundloop.mp3" /> <param name="controller" value="true" /> <param name="autoplay" value="false" /> </object> <!--<![endif]--> </object> Using Video on a Web Page Hyperlink <a href=“sparky.mov" title=“Playful Dog Barks”>Sparky Video (1.2 MB)</a> Embed the video ◦ You can embed the video in a page and optionally display a control panel for the sound ◦ The <object> tag W3C standard and supported by modern browsers 12 Cross-browser <object> & <param /> tags <object data=“lighthouse.mov" height=“260" width=“340" type="video/quicktime" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" title=“Door County Lighthouse Tour"> <param name="src" value=“lighthouse.mov" /> <param name="controller" value="true" /> <param name="autoplay" value="false" /> <!--[if !IE]>--> <object data=“lighthouse.mov" height=“260" width=“340" type="video/quicktime" title=“Door County Lighthouse Tour" > <param name="src" value=“lighthouse.mov" /> <param name="controller" value="true" /> <param name="autoplay" value="false" /> <p>Video showing photos of a boat tour showing lighthouses in Door County.</p> </object> <!--<![endif]--> </object> XHTML <img /> tag dynsrc attribute <img dynsrc="lighthouse.mov" autostart="true" width="320" height="240" alt="Lighthouse Video" /> Internet Explorer Only <img /> tag dynsrc attribute is used to integrated the video with the web page. 14 Obtaining Media Files Media files can be obtained from various sources: ◦ ◦ ◦ ◦ ◦ Record your own sounds, music, or movies Download media from a free site Download royalty free media from a site for a fee Record your own audio or video Edit using: Audacity Microsoft Movie Maker Apple Quicktime Pro Apple iMovie Apple Gargeband Etc…. ◦ Copyright Issues! 15 Copyright Issues and Media Files(1) Only publish web pages, images, and other media that you have personally created or have obtained the rights or license to use. If another individual has created an image, sound, video, or document that you believe would be useful on your own web site, ask permission to use the material instead of simply “grabbing” it. 16 Copyright Issues and Media Files(2) All work (web pages, images, sounds, videos, etc.) is copyrighted – even if there is no copyright symbol and date on the material. Fair Use Clause of the Copyright Act Be aware that there are times when students and educators can use portions of other’s work and not be in violation of copyright law – this is called “fair use”. "Fair use" ◦ Use of a copyrighted work for purposes such as criticism, reporting, teaching, scholarship, or research. ◦ Use a SMALL portion and cite the source 17 Copyright Issues and Media Files(3) Criteria used to determine “fair use”: The use must be educational and not commercial The nature of the work The amount copied must be as small of a portion of the work as possible. The copy does not impede the marketability of the original work. 18 Checkpoint 11.1 1. List three common web browser plug-ins and describe what they are used for. 2. Describe issues involved with adding media such as audio or video to a web page. 19 What is Adobe Flash? A popular multimedia application Used to create animation and multimedia effects on Web pages Flash movies are saved in “.swf” files Perception of speedy display .swf files play as they download Flash Player ◦ Free browser plug-in ◦ Widely installed on browsers 20 How to create Flash? “.swf” files can be created in a number of applications including Adobe Flash Adobe Fireworks Swish Techsmith Camtasia And many more… 21 Common Uses of Adobe Flash Navigation Engaging visual content Splash Page Rich Media Advertising Entire Web Site Delivery of audio or video 22 Flash Delivery of Media Media-centric sites such as http://youtube.com and http://last.fm use FLASH to deliver their video and audio. ◦ Why? ◦ The Flash Player is widely installed ◦ Avoid media plug-in issues. 23 Adding Flash to a Web Page <object> & <param /> tags <object … object attributes go here…. <param name="movie" …value attribute goes here… /> <param name="quality" …value attribute goes here… /> <param name="bgcolor" …value attribute goes here… /> … a brief description of the Flash media can go here along with a link to alternate text content if appropriate… </object> 24 Flash Detail Sample The following code places a Flash file called flashbutton.swf on a Web page: <object type="application/x-shockwave-flash" data="flashbutton.swf" width="147" height="34" title="Flash button"> <param name="movie" value="flashbutton.swf" /> <param name="bgcolor" value="#ffffff" /> <param name="quality" value="high" /> <p>This is a Flash buttonthat links to the <a href="http://www.adobe.com">Adobe Web site</a>.</p> </object> 25 What is Java? Object Oriented Programming (OOP) Developed by Sun Microsystems Java is not the same language as JavaScript. Java is more powerful and much more flexible than JavaScript. Java can be used to: ◦ develop stand-alone executable applications ◦ applets that are invoked by Web pages. 26 Java Applets Compiled -- translated from the Englishlike Java statements to an encoded form called Byte Code. Use the “.class” file extension Java Virtual Machine (JVM) ◦ interprets the byte code into the proper machine language for the operating system ◦ After translation, the applet is executed and appears on the Web page. 27 Common Uses of Java Applets Navigation Bars and Buttons Image Effects Text Effects Games Web and Business Applications 28 Adding a Java Applet to a Web Page The applet tag ◦ A container tag ◦ Attributes: code, codebase, height, width, alt, id Works together with <param /> tags ◦ Stand alone tags ◦ Attributes: name, value The applets developer determines what, if any <param /> tags are needed. 29 Sample Code for a Java Applet <applet code=“myapplet.class" height=“50" width=“500“ alt=“Java applet: displays a moving logo with company name”> <param name="bgColor" value="#FFFFFF" /> <param name=“txtColor" value="#0000CC” /> This Java applet displays a moving logo with the company name </applet> The sample applet is named myapplet.class and requires two parameters, bgColor and txtColor. 30 Checkpoint 11.2 1. Describe two uses of Flash on web pages. 2. Describe two uses of Java applets on web pages. 3. Describe two disadvantages of using interactive technologies such as Flash and Java applets on web pages. 31 What is JavaScript? Object-based scripting language Manipulates the objects associated with a Web page document: ◦ the window ◦ the document ◦ the elements such as forms, images, hyperlinks, and so on 32 What is JavaScript? (2) Originally developed by Netscape and called LiveScript Renamed JavaScript after Netscape collaborated with Sun Microsystems on modifications to the language JavaScript is NOT Java 33 Common Uses of JavaScript Display a message box Select list navigation Edit and validate form information Create a new window with a specified size and screen position Image Rollovers Status Messages Display Current Date Calculations 34 What is DHTML (Dynamic HTML)? A group of technologies work together to change a web page after it has been downloaded. These technologies allow the web page to respond to user actions. Technologies used in DHTML: ◦ Document Object Model (DOM) ◦ Cascading Style Sheets (CSS) ◦ Client-side Scripting 35 Document Object Model (DOM) A portion of the DOM is shown at the left. Defines every object and element on a Web page Hierarchical structure Accesses page elements and apply styles to page elements 36 Common Uses of DHTML Hiding and showing text Navigation Image Effects 37 Adding DHTML to a Web Page The code needed to add a DHTML effect to a web page will vary based on the desired effect – usually using a combination of CSS and JavaScript. The JavaScript tends to get complex because of the differences in the syntax required for different browser and browser versions. It is a good idea to become comfortable with CSS and JavaScript before tackling DHTML. 38 What is Ajax? Asynchronous JavaScript and XML “Ajax” – Jesse James Garrett at Adaptive Path Existing technologies used in a new way Standards-based XHTML and CSS Document Object Model XML (and the related XSLT technology) Asynchronous data retrieval using XMLHttpRequest JavaScript Very Basic Example: ◦ http://webdevfoundations.net/css Where is Ajax used? Flickr ◦ http://www.flickr.com Del.icio.us ◦ http://del.icio.us Google e-mail ◦ http:/google.com/gmail Checkpoint 11.3 1. Describe two uses of JavaScript. 2. Describe two uses of DHTML. 3. Describe two uses of Ajax. 41 Multimedia & Accessibility Provide links to plug-ins Provide text descriptions and captions Verify keyboard access Check for screen flickering Verify functionality if JavaScript is disabled If media is used for main navigation, provide plain text links Summary This chapter introduced the XHTML techniques and technologies used to place sound, video, and interactivity on Web pages. It also discussed accessibility, usability, and copyright as they relate to media use on the Web. As you continue your studies, you may choose to specialize in one or more of these technologies. 43