Chapter 11 Web Media and Interactivity
As the saying goes, "A picture is worth a thousand words." You already are aware that graphics help to make web pages compelling. Other
types of media, such as audio and video, are introduced in this chapter. Appropriate movies and sounds on your web pages can make them more interesting and informative. Sources of these media types, the HTML code needed to place media on a web page, and suggested uses of media are introduced.
You began to work with interactivity in Chapter 6 when you used CSS pseudo-classes to respond to mouse movements over hyperlinks. You'll expand your CSS skill set as you configure an interactive image gallery and explore CSS3 transition and transform properties. Adding the right touch of interactivity to a web page can make it engaging and compelling for your visitors.
Resources & Chapter Links
Copyright & Ethical Issues
Multimedia, Accessibility & Standards
Easy Ways to Use Multimedia
- Build a clickable, animated banner ad step-by-step: Flash CS5 Banner Ad Tutorial
- Free & Customizable Flash MP3 player
- Free & Customizable Flash Photo Viewer
- Free & Customizable Web Audio Player Download
CSS3 Transform Property
- Webkit: http://webkit.org/blog/130/css-transforms
- Mozilla: https://developer.mozilla.org/en/CSS/-moz-transform
- Opera: http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/#transforms
- Internet Explorer: http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_CSS3_2D_Transforms
- W3C: http://www.w3.org/TR/css3-2d-transforms
- Generate CSS Transform Code: http://westciv.com/tools/transforms/index.html
- CSS3 Transform Generator: http://www.css3maker.com/css3-transform.html
CSS3 Transition Property
- W3C: http://www.w3.org/TR/css3-transitions
- CSS Easing Animation Tool: http://matthewlein.com/ceaser/
- CSS3 Transition Generator: http://www.css3maker.com/css3-transition.html
HTML5 Canvas Element
- http://www.chromeexperiments.com (look for experiments with “canvas” in the title)
Review flash card activities are available for this chapter.
Check your knowledge of chapter terms and concepts.
- Page 454, Hands-On Practice 11.6
When you are coding the web page, also configure a hyperlink to the podcast.txt file below the audio control.
- Page 463
The file path chapter11/gallery/transition.html should be chapter11/transform/transition.html
- Hands-On Practice 11.10 (pages 466-467)
Omit Hands-On Practice 11.10. Instead, feel free to explore free Java applets at http://www.echoecho.com/freeapplets.htm and http://www.javaonthebrain.com/
- Fish Creek Case Study, Page 482, Task 4
The width of the video should be 200 pixels. Configure the video to display on the right side of the paragraph and description list.
Questions or Comments?
The author would like to hear from you! Send an e-mail to firstname.lastname@example.org