Chapter 11 – Media & Interactivity Basics
Engaging 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’re already familiar with using the CSS hover pseudo-class to add interactivity to hyperlinks. In this chapter you’ll create an interactive image gallery with CSS and explore the CSS3 transform and transition properties. Adding the right touch of interactivity to a web page can make it engaging and compelling for your visitors.
Audio & Video
Conversion to Ogg Theora Codec
Free Online Video Converters
Media, Accessibility & Standards
- Audacity Free Download
- Internet Archive
- Video Captioning
- MAGpie
- CaptionTube
- Workarounds for older versions of IE
- Adobe Resources
Adobe Flash
- Flash content reaches 99% of Desktop Internet Viewers
- Steve Jobs' Thoughts on Flash
- Flash & Accessibility
- Flash & Standards
- SwfObject
Easy Ways to Use Multimedia
- Build a clickable, animated banner ad step-by-step: Flash CS5 Banner Ad Tutorial
- Download a customizable Flash slideshow for use on your own website.
- Free & Customizable Flash MP3 player
- Free & Customizable Flash Photo Viewer
- Free & Customizable Web Audio Player Download
YouTube
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.w3.org/TR/html-markup/canvas.html#canvas
- http://www.chromeexperiments.com (look for experiments with “canvas” in the title)
- http://blog.webreakstuff.com/2010/11/building-a-canvas-snowglobe
- http://www.canvasdemos.com
HTML5 Design Guidelines
Chapter Updates
- Page 289, Hands-On Practice 11.2
chapter11/template.html should be chapter1/template.html - Page 302, near the bottom of the page:
transform (W3C draft syntax) should be transition (W3C draft syntax)
chapter11/gallery/transition.html should be chapter11/transform/transition.html - Page 307, Pacific Trails Resort Case Study
The second sentence in Step 1 should be:
"Copy the files from the Chapter 10 Case Study ch10pacific folder."
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
Play a review game to check your understanding.
Flash Cards
Crossword Puzzle
Pick a Letter
Fill in the Blank
Matching
Browser Plug-ins
- Flash Player
- Shockwave Player
- Adobe Reader
- Java Runtime Environment
- Real Player
- Windows Media Player
- Apple Quicktime
- Firefox Plug-in List
Web Sources of Media Files
Copyright
JavaScript
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.
- http://jquery.com
- http://docs.jquery.com/Tutorials
- http://www.impressivewebs.com/jquery-tutorial-for-beginners/
Ajax
- http://www.ajaxpatterns.org
- http://www.alistapart.com/articles/gettingstartedwithajax
- http://www.tizag.com/ajaxTutorial