Table of Contents
Preface
Chapter 1: Structuring for Rich Media Applications
Chapter 2: Supporting the Content
Chapter 3: Styling with CSS
Chapter 4: Creating Accessible Experiences
Chapter 5: Learning to Love Forms
Chapter 6: Developing Rich Media Applications Using Canvas
Chapter 7: Interactivity using JavaScript
Chapter 8: Embracing Audio and Video
Chapter 9: Data Storage
Index
- Chapter 1: Structuring for Rich Media Applications
- Introduction
- Setting up an HTML5 test area
- Using the header tag for logos and site titles
- Creating a table of contents using the nav tag
- Using section tags to structure areas of a page
- Aligning graphics using the aside tag
- Displaying multiple sidebars using the aside tag
- Implementing the footer tag
- Applying the outline algorithm
- Creating a stylish promo page in HTML5
- Chapter 2: Supporting the Content
- Introduction
- Structuring a blog article
- Highlighting text using the mark element
- Using the time element
- Specifying the pubdate of an article
- Displaying comment blocks using the article element
- Adding fonts dynamically with @font-face
- Adding drop-shadow effects to fonts
- Applying gradient effects to fonts
- Annotating visual elements using the figure and figcaption tags
- Chapter 3: Styling with CSS
- Introduction
- Setting elements to display:block
- Styling a nav block element
- Using background-size to control background appearance
- Adding rounded corners with border-radius
- Including multiple background images
- Adding a box shadow to images
- Styling for Internet Explorer browsers
- Chapter 4: Creating Accessible Experiences
- Introduction
- Testing browser support
- Adding skip navigation
- Adding meta tags
- Using semantic descriptions in tags for screen readers
- Providing alternate site views
- Using hgroup to create accessible header areas
- Displaying alternate content for non-supported browsers
- Using WAI-ARIA
- Chapter 5: Learning to Love Forms
- Introduction
- Displaying placeholder text
- Adding autofocus to form fields
- Styling forms using HTML5 and CSS3
- Using the e-mail input type
- Adding a URL using the URL input type
- Using the number tag
- Using the range tag
- Creating a search field
- Creating a picker to display date and time
- Chapter 6: Developing Rich Media Applications Using Canvas
- Introduction
- Setting up the canvas environment
- Understanding the 2d rendering context
- Processing shapes dynamically
- Drawing borders for images using canvas
- Rounding corners
- Creating interactive visualizations
- Bouncing a ball
- Creating fallback content
- Chapter 7: Interactivity using JavaScript
- Introduction
- Playing audio files with JavaScript
- Using the drag-and-drop API with text
- Crossbrowser video support with vid.ly and jQuery
- Displaying video dynamically using jQuery
- Movable video ads using jQuery
- Controlling the display of images using Easel.js and the canvas tag
- Animating a sequence of images using Easel.js and the canvas tag
- Random animation with audio using the canvas tag and JavaScript
- Chapter 8: Embracing Audio and Video
- Introduction
- Saying no to Flash
- Understanding audio and video file formats
- Displaying video for everybody
- Creating accessible audio and video
- Crafting a slick audio player
- Embedding audio and video for mobile devices
- Chapter 9: Data Storage
- Introduction
- Testing browsers for data storage support
- Using browser developer tools to monitor web storage
- Setting and getting a session storage variable
- Setting and getting a local storage variable
- Converting local storage strings to numbers using parseInt
- Creating a Web SQL Database
- Using a Web SQL database
- Creating a cache manifest for offline storage
- Displaying the current location using geolocation and geo.js