Web Development & Design Foundations with HTML5

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 navigation menu 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, Ajax, and jQuery. This chapter introduces you to these techniques. Each of 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

 
 

CSS3 Transform Property

• 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

Current versions of modern browers support the W3C's syntax for transforms, but before this support was in place browsers often used vendor prefixes to provide temporary support.

• 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

CSS3 Transition Property

• 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
• https://skilled.co/html-canvas/

Review Activities

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

Chapter Updates

• No Updates for this Chapter
  

Questions or Comments?

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