Contents

Foreword

About the Authors

About the Technical Reviewer

Acknowledgments

Introduction

Chapter 1: Overview of HTML5

The Story So Far—The History of HTML5

The Myth of 2022 and Why It Doesn’t Matter

Who Is Developing HTML5?

A New Vision

Compatibility and Paving the Cow Paths

Utility and the Priority of Constituencies

Interoperability Simplification

Universal Access

A Plugin–Free Paradigm

What’s In and What’s Out?

What’s New in HTML5?

New DOCTYPE and Character Set

New and Deprecated Elements

Semantic Markup

Simplifying Selection Using the Selectors API

JavaScript Logging and Debugging

window.JSON

DOM Level 3

Monkeys, Squirrelfish, and Other Speedy Oddities

Summary

Chapter 2: Using the Canvas API

Overview of HTML5 Canvas

History

What Is a Canvas?

Canvas Coordinates

When Not to Use Canvas

Fallback Content

CSS and Canvas

Browser Support for HTML5 Canvas

Using the HTML5 Canvas APIs

Checking for Browser Support

Adding a Canvas to a Page

Applying Transformations to Drawings

Working with Paths

Working with Stroke Styles

Working with Fill Styles

Filling Rectangular Content

Drawing Curves

Inserting Images into a Canvas

Using Gradients

Using Background Patterns

Scaling Canvas Objects

Using Canvas Transforms

Using Canvas Text

Applying Shadows

Working with Pixel Data

Implementing Canvas Security

Building an Application with HTML5 Canvas

Practical Extra: Full Page Glass Pane

Practical Extra: Timing Your Canvas Animation

Summary

Chapter 3: Scalable Vector Graphics

Overview of SVG

History

Understanding SVG

Scalable Graphics

Creating 2D Graphics with SVG

Adding SVG to a Page

Simple Shapes

Transforming SVG Elements

Reusing Content

Patterns and Gradients

SVG Paths

Using SVG Text

Putting the Scene Together

Building an Interactive Application with SVG

Adding Trees

Adding the updateTrees Function

Adding the removeTree Function

Adding the CSS Styles

The Final Code

Summary

Chapter 4: Working with Audio and Video

Overview of Audio and Video

Video Containers

Audio and Video Codecs

Audio and Video Restrictions

Browser Support for Audio and Video

Using the Audio and Video API

Checking for Browser Support

Accessibility

Understanding Media Elements

Working with Audio

Working with Video

Practical Extras

Summary

Chapter 5: Using the Geolocation API

About Location Information

Latitude and Longitude Coordinates

Where Does Location Information Come From?

IP Address Geolocation Data

GPS Geolocation Data

Wi-Fi Geolocation Data

Cell Phone Geolocation Data

User–Defined Geolocation Data

Browser Support for Geolocation

Privacy

Triggering the Privacy Protection Mechanism

Dealing with Location Information

Using the Geolocation API

Checking for Browser Support

Position Requests

Building an Application with Geolocation

Writing the HTML Display

Processing the Geolocation Data

The Final Code

Practical Extras

What’s My Status?

Show Me on a Google Map

Summary

Chapter 6: Using the Communication APIs

Cross Document Messaging

Understanding Origin Security

Browser Support for Cross Document Messaging

Using the postMessage API

Building an Application Using the postMessage API

XMLHttpRequest Level 2

Cross-Origin XMLHttpRequest

Progress Events

Browser Support for HTML5 XMLHttpRequest Level 2

Using the XMLHttpRequest API

Building an Application Using XMLHttpRequest

Practical Extras

Structured Data

Framebusting

Summary

Chapter 7: Using the WebSocket API

Overview of WebSocket

Real-Time and HTTP

Understanding WebSocket

Writing a Simple Echo WebSocket Server

Using the WebSocket API

Checking for Browser Support

Basic API Usage

Building a WebSocket Application

Coding the HTML File

Adding the WebSocket Code

Adding the Geolocation Code

Putting It All Together

The Final Code

Summary

Chapter 8: Using the Forms API

Overview of HTML5 Forms

HTML Forms Versus XForms

Functional Forms

Browser Support for HTML5 Forms

An Input Catalog

Using the HTML5 Forms APIs

New Form Attributes and Functions

Checking Forms with Validation

Validation Feedback

Building an Application with HTML5 Forms

Practical Extras

Summary

Chapter 9: Working with Drag-and-Drop

Web Drag-and-Drop: The Story So Far

Overview of HTML5 Drag-and-Drop

The Big Picture

Events to Remember

Drag Participation

Transfer and Control

Building an Application with Drag-and-Drop

Getting Into the dropzone

Handling Drag-and-Drop for Files

Practical Extras

Customizing the Drag Display

Summary

Chapter 10: Using the Web Workers API

Browser Support for Web Workers

Using the Web Workers API

Checking for Browser Support

Creating Web Workers

Loading and Executing Additional JavaScript

Communicating with Web Workers

Coding the Main Page

Handling Errors

Stopping Web Workers

Using Web Workers within Web Workers

Using Timers

Example Code

Building an Application with Web Workers

Coding the blur.js Helper Script

Coding the blur.html Application Page

Coding the blurWorker.js Web Worker Script

Communicating with the Web Workers

The Application in Action

Example Code

Summary

Chapter 11: Using the Storage APIs

Overview of Web Storage

Browser Support for Web Storage

Using the Web Storage API

Checking for Browser Support

Setting and Retrieving Values

Plugging Data Leaks

Local Versus Session Storage

Other Web Storage API Attributes and Functions

Communicating Web Storage Updates

Exploring Web Storage

Building an Application with Web Storage

The Future of Browser Database Storage

The Web SQL Database

The Indexed Database API

Practical Extras

JSON Object Storage

A Window into Sharing

Summary

Chapter 12: Creating Offline Web Applications

Overview of HTML5 Offline Web Applications

Browser Support for HTML5 Offline Web Applications

Using the HTML5 Application Cache API

Checking for Browser Support

Creating a Simple Offline Application

Going Offline

Manifest Files

The ApplicationCache API

Application Cache in Action

Building an Application with HTML5 Offline Web Applications

Creating a Manifest File for the Application Resources

Creating the HTML Structure and CSS for the UI

Creating the Offline JavaScript

Check for ApplicationCache Support

Adding the Update Button Handler

Add Geolocation Tracking Code

Adding Storage Code

Adding Offline Event Handling

Summary

Chapter 13: The Future of HTML5

Browser Support for HTML5

HTML Evolves

WebGL

Devices

Audio Data API

Touchscreen Device Events

Peer-to-Peer Networking

Ultimate Direction

Summary

Index