1. Web Development & Design Foundations with XHTML Chapter 11 Key Concepts

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. 2

3. Commonly Used Plug-ins Adobe Flash Player Adobe Reader Windows Media Player Apple Quicktime 3

4. Common Audio File Types.wav Wave File.aiff Audio Interchange File Format.mid Musical Instrument Digital Interface (MIDI).au Sun UNIX sound file.mp3 MPEG-1 Audio Layer-3.oggOgg-Vorbis. m4a MPEG 4 Audio. This audio-only MPEG-4 format is supported by Quicktime, iTunes, and iPods. 4

5. Common Video File Types. movQuicktime.avi Microsoft Audio Video Interleaved.wmvWindows Media File.flv Flash Video File.mpgMPEG (Motion Picture Experts Group).m4v.mp4 (MPEG-4) 5

6. Using Sound on a Web Page Hyperlink Web Design Podcast Embed the sound ◦ You can embed the sound in a page and optionally display a control panel for the sound ◦ The tag  W3C standard and supported by modern browsers 6

7. Hands-On Practice 11.1 Pages 428 Chapter11/podcast.html

8. XHTML & tags 8 <object data= "soundloop.mp3" height="50" width= "50“ type="audio/mpeg" title= "Music Sound Loop" > This code is valid but does not work for IE

9. Cross-browser & tags Described by Elizabeth Castro at http://www.alistapart.com/articles/byebyee mbed 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 The IE Issue

10. Cross-browser & tags Configure TWO tags One for Internet Explorer One for other browsers Use Conditional Comments to “direct” IE to the appropriate tag Tell IE to skip the code between the tags: --> Recall that browsers render XHTML top- down Solution

11. Cross-browser & 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"> -->

12. Hands-On Practice 11.2 Pages 432-2 Chapter11/object.html

13. Using Video on a Web Page Hyperlink Sparky Video (1.2 MB) Embed the video ◦ You can embed the video in a page and optionally display a control panel for the sound ◦ The tag  W3C standard and supported by modern browsers 13

14. Cross-browser & 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"> --> <object data=“lighthouse.mov" height=“260" width=“340" type="video/quicktime" title=“Door County Lighthouse Tour" > Video showing photos of a boat tour showing lighthouses in Door County.

15. XHTML tag dynsrc attribute Internet Explorer Only tag dynsrc attribute is used to integrated the video with the web page. 15

16. Hands-On Practice 11.3 Page 435 Chapter11/lighthouse.html

17. 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! 17

18. 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. 18

19. 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 19

20. 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. 20

21. 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 21

22. 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… 22

23. Common Uses of Adobe Flash Navigation Engaging visual content Splash Page Rich Media Advertising Entire Web Site Delivery of audio or video 23

24. Flash Delivery of Media Media-centric sites such as http://youtube.com and http://last.fm use FLASH to deliver their video and audio. http://youtube.comhttp://last.fm ◦ Why? ◦ The Flash Player is widely installed ◦ Avoid media plug-in issues. 24

25. Adding Flash to a Web Page & tags <object … object attributes go here…. … a brief description of the Flash media can go here along with a link to alternate text content if appropriate… 25

26. Flash Detail Sample The following code places a Flash file called flashbutton.swf on a Web page: This is a Flash buttonthat links to the Adobe Web site. 26

27. Hands-On Practice 11.4 Pages 441-2 Chapter11/flash.html