Basics of Web Design
HTML5 & CSS3 Third Edition

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

• MPEG
• Vorbis
• Theora
• WebM
• Browser Compatiblity Charts

Conversion to Ogg Theora Codec

• http://firefogg.org
• http://thelittleappfactory.com/evom
• http://videolan.org/vlc

Free Online Video Converters

• http://www.clipconverter.cc
• http://www.mediaconverter.org
• http://www.mirovideoconverter.com
• http://video.online-convert.com/convert-to-webm

Media, Accessibility & Standards

• Audacity Free Download
• Internet Archive
• Video Captioning
• MAGpie
• CaptionTube
• Workarounds for older versions of IE
• Adobe Resources

CSS3 Transform Property

• CSS3 Files: Transform
• Using CSS Transforms
• W3C:
  http://www.w3.org/TR/css3-transforms/#transform-property
• Generate CSS Transform Code: http://westciv.com/tools/transforms/index.html
• CSS3 Transform Generator:
  http://www.css3maker.com/css3-transform.html

CSS3 Transition Property

• Inspring Transition Examples
• CSS Transition Timing Functions
• Understanding CSS Cubic Bezier
• http://cubic-bezier.com
• 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

JavaScript

• JavaScript for Designers
• EchoEcho.com Tutorials
• JavaScript Tutorial
• Mozilla JavaScript Guide

jQuery

Once you are familiar with JavaScript, a next step is to explore jQuery — which is cross-browser JavaScript library that makes it easy to add special effects such as slideshows to a web page.

• jQuery Documentation
• jQuery Tutorials
• jQuery for Beginners Tutorial
• jQuery Plugins
• jQuery Cycle Plugin
• jQuery Example
• How jQuery Works
• jQuery Fundamentals
• jQuery for Designers

HTML5 APIs

• Geolocation API
  • Geolocation Example 1
  • Geolocation Example 2
• Web Storage API
  • Web Storage Example 1
  • Web Storage Example 2
• Offline Web Application
  • Offline Web Application Example 1
  • Offline Web Application Example 2
• Canvas 2D Context API
  • http://www.w3.org/TR/html-markup/canvas.html#canvas
  • 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

• http://www.w3.org/TR/html-design-principles

Chapter Updates

• 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 Games

Review activities are available for this chapter. Check your knowledge of chapter terms and concepts.