- •Contents at a Glance
- •Contents
- •Foreword
- •About the Authors
- •About the Technical Reviewer
- •Acknowledgments
- •Introduction
- •Who This Book Is For
- •An Overview of This Book
- •Example Code and Companion Web Site
- •Contacting the Authors
- •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
- •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
- •Working with 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
- •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
- •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
- •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
- •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
- •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
- •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
- •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
- •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
- •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
- •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
Contents
Foreword............................................................................................................... |
xv |
About the Authors................................................................................................ |
xvi |
About the Technical Reviewer ............................................................................ |
xvii |
Acknowledgments ............................................................................................. |
xviii |
Introduction ......................................................................................................... |
xix |
Chapter 1: Overview of HTML5................................................................................ |
1 |
The Story So Far—The History of HTML5.......................................................................... |
1 |
The Myth of 2022 and Why It Doesn’t Matter .................................................................... |
2 |
Who Is Developing HTML5? ............................................................................................... |
3 |
A New Vision...................................................................................................................... |
3 |
Compatibility and Paving the Cow Paths .................................................................................................. |
3 |
Utility and the Priority of Constituencies .................................................................................................. |
3 |
Interoperability Simplification .................................................................................................................. |
4 |
Universal Access ...................................................................................................................................... |
5 |
A Plugin–Free Paradigm .................................................................................................... |
5 |
What’s In and What’s Out? ....................................................................................................................... |
6 |
What’s New in HTML5?...................................................................................................... |
8 |
New DOCTYPE and Character Set............................................................................................................. |
8 |
New and Deprecated Elements ................................................................................................................ |
9 |
Semantic Markup ................................................................................................................................... |
10 |
Simplifying Selection Using the Selectors API........................................................................................ |
17 |
JavaScript Logging and Debugging........................................................................................................ |
19 |
v
CONTENTS
window.JSON ......................................................................................................................................... |
20 |
DOM Level 3 ........................................................................................................................................... |
21 |
Monkeys, Squirrelfish, and Other Speedy Oddities ................................................................................ |
21 |
Summary ......................................................................................................................... |
22 |
Chapter 2: Using the Canvas API .......................................................................... |
23 |
Overview of HTML5 Canvas ............................................................................................. |
23 |
History .................................................................................................................................................... |
23 |
What Is a Canvas? .................................................................................................................................. |
24 |
Canvas Coordinates................................................................................................................................ |
24 |
When Not to Use Canvas ........................................................................................................................ |
25 |
Fallback Content..................................................................................................................................... |
25 |
CSS and Canvas...................................................................................................................................... |
26 |
Browser Support for HTML5 Canvas....................................................................................................... |
26 |
Using the HTML5 Canvas APIs ......................................................................................... |
26 |
Checking for Browser Support ............................................................................................................... |
27 |
Adding a Canvas to a Page ..................................................................................................................... |
27 |
Applying Transformations to Drawings .................................................................................................. |
30 |
Working with Paths ................................................................................................................................ |
32 |
Working with Stroke Styles .................................................................................................................... |
34 |
Working with Fill Styles .......................................................................................................................... |
35 |
Filling Rectangular Content .................................................................................................................... |
36 |
Drawing Curves ...................................................................................................................................... |
37 |
Inserting Images into a Canvas .............................................................................................................. |
39 |
Using Gradients ...................................................................................................................................... |
41 |
Using Background Patterns .................................................................................................................... |
43 |
Scaling Canvas Objects .......................................................................................................................... |
44 |
Using Canvas Transforms....................................................................................................................... |
46 |
Using Canvas Text .................................................................................................................................. |
48 |
vi
CONTENTS
Applying Shadows . ................................................................................................................................ |
50 |
Working with Pixel Data . ....................................................................................................................... |
52 |
Implementing Canvas Security. ............................................................................................................. |
54 |
Building an Application with HTML5 Canvas ................................................................... |
55 |
Practical Extra: Full Page Glass Pane . ................................................................................................... |
58 |
Practical Extra: Timing Your Canvas Animation. .................................................................................... |
58 |
Summary ......................................................................................................................... |
61 |
Chapter 3: Working with Scalable Vector Graphics.............................................. |
63 |
Overview of SVG .............................................................................................................. |
63 |
History . .................................................................................................................................................. |
63 |
Understanding SVG. ............................................................................................................................... |
64 |
Scalable Graphics. ................................................................................................................................. |
66 |
Creating 2D Graphics with SVG . ............................................................................................................ |
66 |
Adding SVG to a Page . ........................................................................................................................... |
67 |
Simple Shapes. ...................................................................................................................................... |
67 |
Transforming SVG Elements . ................................................................................................................. |
68 |
Reusing Content . ................................................................................................................................... |
69 |
Patterns and Gradients . ......................................................................................................................... |
70 |
SVG Paths . ............................................................................................................................................. |
71 |
Using SVG Text . ..................................................................................................................................... |
72 |
Putting the Scene Together . .................................................................................................................. |
73 |
Building an Interactive Application with SVG................................................................... |
74 |
Adding Trees. ......................................................................................................................................... |
75 |
Adding the updateTrees Function. ......................................................................................................... |
75 |
Adding the removeTree Function . ......................................................................................................... |
76 |
Adding the CSS Styles . .......................................................................................................................... |
76 |
The Final Code. ...................................................................................................................................... |
77 |
Summary ......................................................................................................................... |
81 |
vii
CONTENTS
Chapter 4: Working with Audio and Video |
............................................................83 |
Overview of Audio and Video ........................................................................................... |
83 |
Video Containers..................................................................................................................................... |
83 |
Audio and Video Codecs ......................................................................................................................... |
84 |
Audio and Video Restrictions.................................................................................................................. |
85 |
Browser Support for Audio and Video .................................................................................................... |
86 |
Using the Audio and Video API......................................................................................... |
86 |
Checking for Browser Support ............................................................................................................... |
87 |
Accessibility............................................................................................................................................ |
88 |
Understanding Media Elements.............................................................................................................. |
89 |
Working with Audio ................................................................................................................................ |
94 |
Working with Video................................................................................................................................. |
95 |
Practical Extras..................................................................................................................................... |
103 |
Summary ....................................................................................................................... |
106 |
Chapter 5: Using the Geolocation API ................................................................. |
107 |
About Location Information ........................................................................................... |
107 |
Latitude and Longitude Coordinates..................................................................................................... |
107 |
Where Does Location Information Come From? ................................................................................... |
108 |
IP Address Geolocation Data ................................................................................................................ |
109 |
GPS Geolocation Data ........................................................................................................................... |
109 |
Wi-Fi Geolocation Data ......................................................................................................................... |
110 |
Cell Phone Geolocation Data................................................................................................................. |
110 |
User–Defined Geolocation Data............................................................................................................ |
111 |
Browser Support for Geolocation................................................................................... |
111 |
Privacy ........................................................................................................................... |
112 |
Triggering the Privacy Protection Mechanism...................................................................................... |
113 |
Dealing with Location Information........................................................................................................ |
114 |
viii
CONTENTS
Using the Geolocation API.............................................................................................. |
114 |
Checking for Browser Support ............................................................................................................. |
114 |
Position Requests ................................................................................................................................. |
115 |
Building an Application with Geolocation ...................................................................... |
120 |
Writing the HTML Display ..................................................................................................................... |
122 |
Processing the Geolocation Data.......................................................................................................... |
123 |
The Final Code...................................................................................................................................... |
126 |
Practical Extras.............................................................................................................. |
129 |
What’s My Status?................................................................................................................................ |
130 |
Show Me on a Google Map................................................................................................................... |
131 |
Summary ....................................................................................................................... |
133 |
Chapter 6: Using the Communication APIs ......................................................... |
135 |
Cross Document Messaging .......................................................................................... |
135 |
Understanding Origin Security.............................................................................................................. |
138 |
Browser Support for Cross Document Messaging................................................................................ |
139 |
Using the postMessage API .................................................................................................................. |
139 |
Building an Application Using the postMessage API ............................................................................ |
140 |
XMLHttpRequest Level 2................................................................................................ |
146 |
Cross-Origin XMLHttpRequest .............................................................................................................. |
147 |
Progress Events.................................................................................................................................... |
149 |
Browser Support for HTML5 XMLHttpRequest Level 2 ......................................................................... |
150 |
Using the XMLHttpRequest API............................................................................................................. |
150 |
Building an Application Using XMLHttpRequest ................................................................................... |
152 |
Practical Extras.............................................................................................................. |
156 |
Structured Data .................................................................................................................................... |
156 |
Framebusting ....................................................................................................................................... |
157 |
Summary ....................................................................................................................... |
157 |
ix
CONTENTS
Chapter 7: Using the WebSocket API .................................................................. |
159 |
Overview of WebSocket................................................................................................. |
159 |
Real-Time and HTTP ............................................................................................................................. |
159 |
Understanding WebSocket ................................................................................................................... |
161 |
Writing a Simple Echo WebSocket Server ..................................................................... |
167 |
Using the WebSocket API .............................................................................................. |
176 |
Checking for Browser Support ............................................................................................................. |
176 |
Basic API Usage.................................................................................................................................... |
177 |
Building a WebSocket Application................................................................................. |
182 |
Coding the HTML File............................................................................................................................ |
183 |
Adding the WebSocket Code ................................................................................................................ |
185 |
Adding the Geolocation Code................................................................................................................ |
185 |
Putting It All Together........................................................................................................................... |
186 |
The Final Code...................................................................................................................................... |
188 |
Summary ....................................................................................................................... |
191 |
Chapter 8: Using the Forms API.......................................................................... |
193 |
Overview of HTML5 Forms............................................................................................. |
193 |
HTML Forms Versus XForms ................................................................................................................ |
194 |
Functional Forms.................................................................................................................................. |
194 |
Browser Support for HTML5 Forms ...................................................................................................... |
194 |
An Input Catalog ................................................................................................................................... |
195 |
Using the HTML5 Forms APIs......................................................................................... |
200 |
New Form Attributes and Functions ..................................................................................................... |
200 |
Checking Forms with Validation ........................................................................................................... |
204 |
Validation Feedback ............................................................................................................................. |
207 |
Building an Application with HTML5 Forms................................................................... |
209 |
Practical Extras..................................................................................................................................... |
213 |
x
CONTENTS
Summary ....................................................................................................................... |
215 |
Chapter 9: Working with Drag-and-Drop ............................................................ |
217 |
Web Drag-and-Drop: The Story So Far .......................................................................... |
217 |
Overview of HTML5 Drag-and-Drop............................................................................... |
218 |
The Big Picture ..................................................................................................................................... |
218 |
Events to Remember ............................................................................................................................ |
221 |
Drag Participation................................................................................................................................. |
224 |
Transfer and Control............................................................................................................................. |
224 |
Building an Application with Drag-and-Drop ................................................................. |
225 |
Getting Into the dropzone ..................................................................................................................... |
234 |
Handling Drag-and-Drop for Files.................................................................................. |
235 |
Practical Extras.............................................................................................................. |
239 |
Customizing the Drag Display............................................................................................................... |
239 |
Summary ....................................................................................................................... |
240 |
Chapter 10: Using the Web Workers API............................................................. |
241 |
Browser Support for Web Workers ................................................................................ |
242 |
Using the Web Workers API ........................................................................................... |
242 |
Checking for Browser Support ............................................................................................................. |
242 |
Creating Web Workers.......................................................................................................................... |
243 |
Loading and Executing Additional JavaScript ...................................................................................... |
244 |
Communicating with Web Workers ...................................................................................................... |
244 |
Coding the Main Page.................................................................................................... |
245 |
Handling Errors..................................................................................................................................... |
246 |
Stopping Web Workers ......................................................................................................................... |
247 |
Using Web Workers within Web Workers ............................................................................................. |
247 |
Using Timers......................................................................................................................................... |
248 |
Example Code....................................................................................................................................... |
248 |
xi
CONTENTS
Building an Application with Web Workers.................................................................... |
250 |
Coding the blur.js Helper Script............................................................................................................ |
252 |
Coding the blur.html Application Page ................................................................................................. |
253 |
Coding the blurWorker.js Web Worker Script ....................................................................................... |
254 |
Communicating with the Web Workers ................................................................................................ |
254 |
The Application in Action...................................................................................................................... |
256 |
Example Code....................................................................................................................................... |
257 |
Summary ....................................................................................................................... |
261 |
Chapter 11: Using the Storage APIs.................................................................... |
263 |
Overview of Web Storage .............................................................................................. |
263 |
Browser Support for Web Storage................................................................................. |
264 |
Using the Web Storage API ............................................................................................ |
264 |
Checking for Browser Support ............................................................................................................. |
264 |
Setting and Retrieving Values .............................................................................................................. |
266 |
Plugging Data Leaks............................................................................................................................. |
267 |
Local Versus Session Storage .............................................................................................................. |
269 |
Other Web Storage API Attributes and Functions ................................................................................. |
269 |
Communicating Web Storage Updates ................................................................................................. |
272 |
Exploring Web Storage ......................................................................................................................... |
273 |
Building an Application with Web Storage..................................................................... |
275 |
The Future of Browser Database Storage...................................................................... |
286 |
The Web SQL Database ........................................................................................................................ |
286 |
The Indexed Database API .................................................................................................................... |
289 |
Practical Extras.............................................................................................................. |
291 |
JSON Object Storage ............................................................................................................................ |
291 |
A Window into Sharing ......................................................................................................................... |
292 |
Summary ....................................................................................................................... |
293 |
xii
CONTENTS
Chapter 12: Creating Offline Web Applications.................................................. |
295 |
Overview of HTML5 Offline Web Applications................................................................ |
295 |
Browser Support for HTML5 Offline Web Applications ......................................................................... |
297 |
Using the HTML5 Application Cache API........................................................................ |
297 |
Checking for Browser Support ............................................................................................................. |
297 |
Creating a Simple Offline Application................................................................................................... |
298 |
Going Offline ......................................................................................................................................... |
298 |
Manifest Files ....................................................................................................................................... |
299 |
The ApplicationCache API..................................................................................................................... |
300 |
Application Cache in Action.................................................................................................................. |
301 |
Building an Application with HTML5 Offline Web Applications...................................... |
303 |
Creating a Manifest File for the Application Resources........................................................................ |
306 |
Creating the HTML Structure and CSS for the UI .................................................................................. |
306 |
Creating the Offline JavaScript............................................................................................................. |
307 |
Check for ApplicationCache Support .................................................................................................... |
309 |
Adding the Update Button Handler ....................................................................................................... |
309 |
Add Geolocation Tracking Code............................................................................................................ |
310 |
Adding Storage Code ............................................................................................................................ |
310 |
Adding Offline Event Handling .............................................................................................................. |
311 |
Summary ....................................................................................................................... |
311 |
Chapter 13: The Future of HTML5 ....................................................................... |
313 |
Browser Support for HTML5 .......................................................................................... |
313 |
HTML Evolves ................................................................................................................ |
313 |
WebGL .................................................................................................................................................. |
314 |
Devices ................................................................................................................................................. |
316 |
Audio Data API ...................................................................................................................................... |
316 |
Touchscreen Device Events.................................................................................................................. |
317 |
Peer-to-Peer Networking...................................................................................................................... |
320 |
xiii
CONTENTS
Ultimate Direction |
................................................................................................................................. 320 |
Summary ....................................................................................................................... |
320 |
Index ................................................................................................................... |
323 |
xiv