Chapter 11 – Multimedia & Interactivity Basics
Videos and sounds on your web pages can make them more interesting and informative. This chapter introduces you to working with multimedia and interactive elements on web pages. Methods to add audio, video, and Flash to your web pages are introduced. Sources of these media types, the HTML code needed to place the media on a web page, and suggested uses of the media are discussed. You'll also create an interactive image gallery with CSS and explore new CSS3 properties. Adding the right touch of multimedia and interactivity to a web page can make it engaging and compelling for your visitors. Resource websites and chapter links are listed below.
Audio & Video
Conversion to Ogg Theora Codec
Free Online Video Converters
Media, Accessibility & Standards
- Audacity Free Download
- Internet Archive
- Video Captioning
- Workarounds for older versions of IE
- Adobe Resources
CSS3 Transform Property
- CSS3 Files: Transform
- Using CSS Transforms
- Generate CSS Transform Code: http://westciv.com/tools/transforms/index.html
- CSS3 Transform Generator:
CSS3 Transition Property
- Inspring Transition Examples
- CSS Transition Timing Functions
- Understanding CSS Cubic Bezier
- CSS Easing Animation Tool:
- CSS3 Transition Generator:
- jQuery Documentation
- jQuery Tutorials
- jQuery for Beginners Tutorial
- jQuery Plugins
- jQuery Cycle Plugin
- jQuery Example
- How jQuery Works
- jQuery Fundamentals
- jQuery for Designers
- Geolocation API
- Web Storage API
- Offline Web Application
- Canvas 2D Context API
- http://www.chromeexperiments.com (look for experiments with “canvas” in the title)
- Canvas Demos
- Canvas API Tutorial
- HTML5 Demos and Examples
- IBM developerWorks
- The Web Platform
HTML5 Design Guidelines
- Page 353
As indicated in Chapter 1, HTML5 is now in Recommendation status. However, it is good practice to code a fallback for the HTML5 Video and Audio elements to provide support for older browsers.
- Page 371, Hands-On Practice 11.9
The last sentence on the page should be:
"An example of a web page with a vertical fly-out menu is available in the student files (chapter11/11.9/vertical)."
- Pacific Trails Resort Case Study, page 379, Figure 11.22
The text in the gallery area should be left-aligned.
Questions or Comments
The author would like to hear from you!
Feel free to complete the contact form with your questions or comments.
Review activities are available for this chapter. Check your knowledge of chapter terms and concepts.
Web Sources of Media Files
Easy Ways to Use Multimedia
- Free & Customizable Flash MP3 player
- Free & Customizable Flash Photo Viewer
- Free & Customizable Web Audio Player Download