Lubbers P., Albers B., Salim F. - Pro HTML5 Programming, 2nd Edition [2011, PDF, ENG] + Code

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
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
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
 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
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
 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
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
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
 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
Ultimate Direction................................................................................................................................ 320
Summary .......................................................................................................................320
 Index ...................................................................................................................323