Web Development and Design Foundations with HTML5

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.

Technologies commonly used to add interactivity to web pages include Flash, Java applets, JavaScript, and Ajax. This chapter introduces you to these techniques.Each technology could be the sole subject of an entire book or college course. This chapter will introduce you to adding interactive components to web pages.

Resources & Chapter Links

 

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

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
  

Review Activities

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

Chapter Updates

• 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

Questions or Comments?

The author would like to hear from you! Send an e-mail to webdevfoundations@gmail.com