PacktLib: HTML5 Multimedia Development Cookbook

HTML5 Multimedia Development Cookbook

Credits

Foreword

About the Authors

About the Reviewers

www.PacktPub.com

Preface

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

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

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

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

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

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

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

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

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