1. Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 11 Key Concepts 1 Copyright © Terry Felke-Morris

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. Copyright © Terry Felke-Morris CONTAINERS & CODECS  Container  Designated by the file extension – contains the media and metadata  Codec  The algorithm used to compress the media  HTML5 audio & video  Native to the browser  Browsers do not support the same codecs 3

4. Copyright © Terry Felke-Morris COMMONLY USED PLUG-INS  Adobe Flash Player  Adobe Reader  Windows Media Player  Apple Quicktime 4

5. Copyright © Terry Felke-Morris 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 (open-source). m4a MPEG 4 Audio. This audio-only MPEG-4 format is supported by Quicktime, iTunes, and iPods. 5

6. Copyright © Terry Felke-Morris 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) .ogv Ogg Theora (open-source) .webmVP8 codec (open video format, free) 6

7. Copyright © Terry Felke-Morris COPYRIGHT ISSUES  Only publish web pages, images, and other media that you have personally created or have obtained the rights or license to use.  Ask permission to use media created by another person instead of simply “grabbing” it.  All work (including web pages) are automatically copyrighted even if there is not copyright mark or date.  Fair Use Clause of the Copyright Act  Creative Commons – A new approach to copyright 7

8. Copyright © Terry Felke-Morris CONFIGURE AUDIO & VIDEO  Most basic method to provide audio or video files:  Hyperlink Web Design Podcast 8

9. Copyright © Terry Felke-Morris HANDS-ON PRACTICE 11.1  Page 438  chapter11/podcast/podcast.html 9

10. Copyright © Terry Felke-Morris XHTML: USING & TAGS TO EMBED AUDIO 10

11. Copyright © Terry Felke-Morris EXAMPLE  chapter11/musicbasic.html 11

12. Copyright © Terry Felke-Morris HANDS-ON PRACTICE 11.2  Page 442  chapter11/object.html 12

13. Copyright © Terry Felke-Morris <object data="sparky.mov" height="150" width="160“ type="video/quicktime" classid="clsid:02BF25D5–8C17–4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" title="Video of a cute Pekingese dog barking"> A video of a cute Pekingese dog barking. XHTML: USING AND TAGS TO EMBED VIDEO 13

14. Copyright © Terry Felke-Morris EXAMPLE  chapter11/video.html 14

15. Copyright © Terry Felke-Morris HANDS-ON PRACTICE 11.3  Page 444  chapter11/lighthouse.html 15

16. Copyright © Terry Felke-Morris MULTIMEDIA & ACCESSIBILITY  Provide alternate content  Transcript (for audio)  Captions (for video)  Text format 16

17. Copyright © Terry Felke-Morris WHAT IS ADOBE FLASH?  A popular multimedia application  Create multimedia which adds visual interest and interactivity to 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 17

18. Copyright © Terry Felke-Morris 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… 18

19. Copyright © Terry Felke-Morris FLASH DETAIL SAMPLE Add a little Flash to your web page 19

20. Copyright © Terry Felke-Morris FLASH EXAMPLE  chapter11/flash1.html 20

21. Copyright © Terry Felke-Morris HANDS-0N PRACTICE 11.4  Page 449  chapter11/lighthouse/lighthouse.html 21

22. Copyright © Terry Felke-Morris HTML5 EMBED ELEMENT <embed type="application/x-shockwave-flash" src="fall5.swf" width="640" height="100" quality="high” title="Fall Nature Hikes"> 22

23. Copyright © Terry Felke-Morris EXAMPLE  chapter11/flashembed.html 23

24. Copyright © Terry Felke-Morris HANDS-ON PRACTICE 11.5  Page 450  chapter11/lighthouse/embed.html 24