Pro HTML5 Programming - Powerful APIs for Richer Internet Application Development

Title Page

Copyright Page

Contents at a Glance

Table of Contents

Foreword

About the Authors

About the Technical Reviewer

Acknowledgements

Introduction

Who This Book Is For

An Overview of This Book

Example Code and Companion Web Site

Contacting the Authors

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

Secure by Design

Separation of Presentation and Content

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 HTML5 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

Summary

Chapter 3 Working with HTML5 Audio and Video

Overview of HTML5 Audio and Video

Video Containers

Audio and Video Codecs

The Codec Wars and the Tentative Truce

Audio and Video Restrictions

Browser Support for HTML5 Audio and Video

Using the HTML5 Audio and Video APIs

Checking for Browser Support

Understanding Media Elements

The Basics: Declaring Your Media Element

Using the Source

Taking Control

Working with Audio

Audio Activation

Working with Video

Creating a Video Timeline Browser

Adding the Video and the Canvas Element

Adding Variables

Adding the updateFrame Function

Adding the startVideo Function

Handling User Input

Adding the stopTimeline Function

Practical Extras

Background Noise in a Page

Mouseover Video Playback

Summary

Chapter 4 Using the HTML5 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 HTML5 Geolocation

Privacy

Triggering the Privacy Protection Mechanism

Dealing with Location Information

Using the HTML5 Geolocation API

Checking for Browser Support

Position Requests

One-Shot Position Requests

Repeated Position Updates

Building a Real-Time Application with HTML5 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 5 Using the Communication APIs

Cross Document Messaging

Understanding Origin Security

Browser Support for Cross Document Messaging

Using the postMessage API

Checking for Browser Support

Sending Messages

Listening for Message Events

Building an Application Using the postMessage API

Building the Portal Page

Building the Chat Widget Page

The Final Code

The Application in Action

XMLHttpRequest Level 2

Cross-Origin XMLHttpRequest

Progress Events

Browser Support for HTML5 XMLHttpRequest Level 2

Using the XMLHttpRequest API

Checking for Browser Support

Making Cross-Origin Requests

Using Progress Events

Building an Application Using XMLHttpRequest

The Final Code

The Application in Action

Practical Extras

Structured Data

Framebusting

Summary

Chapter 6 Using the HTML5 WebSocket API

Overview of HTML5 WebSockets

Real-Time and HTTP

Understanding HTML5 WebSockets

The WebSocket Handshake

The WebSocket Interface

A Dramatic Reduction in Unnecessary Network Traffic and Latency

Browser Support for HTML5 WebSockets

Writing a Simple Echo WebSocket Server

Using the HTML5 WebSocket API

Checking for Browser Support

Basic API Usage

Creating a WebSocket object and Connecting to a WebSocket Server

Adding Event Listeners

Sending Messages

Running the WebSocket Page

Building an Application with HTML5 WebSockets

Coding the HTML File

Adding the WebSocket Code

Adding the Geolocation Code

Putting It All Together

The Final Code

Summary

Chapter 7 Using the HTML5 Forms API

Overview of HTML5 Forms

HTML Forms vs. XForms

Functional Forms

Browser Support for HTML5 Forms

An Input Catalog

Using the HTML5 Forms APIs

New form attributes and functions

The placeholder Attribute

The autocomplete Attribute

The autofocus Attribute

The list Attribute and the datalist Element

The min and max Attributes

The step Attribute

The valueAsNumber Function

The required Attribute

Checking forms with validation

Validation Fields and Functions

Validation feedback

Turning Off Validation

Building an Application with HTML5 Forms

Practical Extras

The Password is: Validation!

Summary

Chapter 8 Using the HTML5 Web Workers API

Browser Support for HTML5 Web Workers

Using the HTML5 Web Workers API

Checking for Browser Support

Creating HTML5 Web Workers

Loading and Executing Additional JavaScript

Communicating with HTML5 Web Workers

Coding the Main Page

Handling Errors

Stopping HTML5 Web Workers

Using HTML5 Web Workers within HTML5 Web Workers

Using Timers

Simple Example Code

Building an Application with HTML5 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 9 Using the HTML5 Web Storage API

Overview of HTML5 Web Storage

Browser Support for HTML5 Web Storage

Using the HTML5 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 HTML5 Web Storage

The Future of Browser Database Storage

Practical Extras

JSON Object Storage

A Window into Sharing

Summary

Chapter 10 Creating HTML5 Offline Web Applications

Overview of HTML5 Offline Web Applications

Browser Support for HTML5 Offline Web Applications

Using the HTML5 Offline Web Application API

Checking for Browser Support

Creating a Simple Offline Application

Going Offline

Manifest Files

The applicationCache API

Building an Application with HTML5 Offline Web Applications

Creating a Manifest File for the Application Resources

Creating the HTML Structure and CSS of 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 11 The Future of HTML5

Browser Support for HTML5

HTML Evolves

WebGL

HTML in Three Dimensions

3D Shaders

Devices

Audio Data API

Video Improvements

Touchscreen Device Events

Orientation

Gestures

Touches

Peer-to-Peer Networking

Ultimate Direction

Summary

Index