Chapter 11 Web Media and Interactivity
Video and sounds on your web pages can make them more interesting and informative. In this chapter, you’ll work with with multimedia and interactive elements on web pages. Methods to add audio, video, and Flash are introduced. Sources of these media types, the HTML code required to make the media available on a web page, and suggested uses of the media are discussed.
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.
Technologies commonly used to add interactivity to web pages include Flash, Java applets,
these topics is explored more fully in other books; each technology could be the sole subject of an entire book or college course. As you read this chapter and try the examples, concentrate on learning the features and capabilities of each technology, rather than trying to master the details.
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)
HTML5 Offline Web Application
Review flash card activities are available for this chapter.
Check your knowledge of chapter terms and concepts.
- Page 469
The last sentence in the third paragraph on the page should be, "It is typical to omit the src and type attributes from the video tag and, instead, configure multiple versions of the video file with the source element."
- Page 481
The second sentence on the page should be, "Java applets may be used in business applications for functions such as financial calculations and data visualization."
- Pacific Trails Case Study
HINT: If the display of the image gallery is not what you expected, try increasing the width for the #gallery ul selector.
Questions or Comments?
The author would like to hear from you! Send an e-mail to firstname.lastname@example.org