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 CSS 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
Free Online Media Converters
- Media.IO: Convert to Ogg
- Online-Convert: Convert to Ogg
- Zamzar: Convert to Ogg
- ClipConverter
- Online-Convert: Convert to WebM
Media, Accessibility & Standards
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.
- jQuery Documentation
- jQuery Tutorials
- jQuery Plugins
- jQuery Cycle Plugin
- jQuery Example
- How jQuery Works
- jQuery Fundamentals
- jQuery for Designers
HTML5 APIs
Geolocation API
Web Storage API
Progressive Web Application
- Mozilla MDN What is a Progressive Web App?
- Google: Progressive Web Apps
- A Beginner’s Guide to Making Progressive Web Apps
- W3C Manifest API
- W3C Service Workers API
Dynamic Graphics with the Canvas Element
- W3C Canvas 2D Context API
- Mozilla MDN Canvas API Tutorial
- Canvas Tutorial & Cheat Sheet
- Canvas Element Examples
Chapter Updates
- No updates have been reported for this chapter.
Questions or Comments
The author would like to hear from you!
Feel free to contact the author with your questions or comments.
Review Activities
Review activities are available for this chapter. Check your knowledge of chapter terms and concepts.
CSS Transform Property
- W3C CSS Transform Property
- CSS3 Files: Transform
- Mozilla MDN Using CSS Transforms
- Generate CSS Transform Code
- CSS3.o Maker Transform Generator
CSS Transition Property
- W3C CSS Transition Property
- CSS Transition Timing Functions
- Understanding CSS Cubic Bezier
- Cubic-Bezier
- CSS Easing Animation Tool
- CSS3.0 Maker Transition Generator