Pro HTML5 Programming (eBook)

Peter Lubbers is the director of documentation and training at Kaazing Corporation and the co-founder of the San Francisco HTML5 User Group. Peter also teaches HTML5 training courses all over the world. Prior to joining Kaazing, Peter worked as an information architect at Oracle, where he wrote many books, including the award-winning Oracle Application Server Portal Configuration Guide. At Oracle, Peter also developed documentation automation solutions, and two of his inventions are patented. A native of the Netherlands, Peter served as a Special Forces commando in the Royal Dutch Green Berets. Peter lives on the edge of the Tahoe National Forest and in his spare time, he loves to run ultra marathons in the Sierra Nevada foothills and around Lake Tahoe (preferably in one go!).

Title Page 1
Copyright Page 2
Contents at a Glance 4
Table of Contents 5
Foreword 13
About the Authors 14
About the Technical Reviewer 15
Acknowledgements 16
Introduction 17
Who This Book Is For 17
An Overview of This Book 18
Example Code and Companion Web Site 18
Contacting the Authors 18
Chapter 1 Overview of HTML5 19
The Story So Far—The History of HTML5 19
The Myth of 2022 and Why It Doesn’t Matter 20
Who Is Developing HTML5? 21
A New Vision 21
Compatibility and Paving the Cow Paths 21
Utility and the Priority of Constituencies 22
Secure by Design 22
Separation of Presentation and Content 22
Interoperability Simplification 23
Universal Access 23
A Plugin–Free Paradigm 23
What’s In and What’s Out? 24
What’s New in HTML5? 26
New DOCTYPE and Character Set 26
New and Deprecated Elements 27
Semantic Markup 28
Simplifying Selection Using the Selectors API 35
JavaScript Logging and Debugging 38
window.JSON 39
DOM Level 3 40
Monkeys, Squirrelfish, and Other Speedy Oddities 40
Summary 41
Chapter 2 Using the HTML5 Canvas API 42
Overview of HTML5 Canvas 42
History 42
What Is a Canvas? 43
Canvas Coordinates 43
When Not to Use Canvas 44
Fallback Content 44
CSS and Canvas 45
Browser Support for HTML5 Canvas 45
Using the HTML5 Canvas APIs 46
Checking for Browser Support 46
Adding a Canvas to a Page 47
Applying Transformations to Drawings 49
Working with Paths 52
Working with Stroke Styles 55
Working with Fill Styles 56
Filling Rectangular Content 57
Drawing Curves 59
Inserting Images into a Canvas 61
Using Gradients 62
Using Background Patterns 64
Scaling Canvas Objects 66
Using Canvas Transforms 69
Using Canvas Text 70
Applying Shadows 72
Working with Pixel Data 74
Implementing Canvas Security 75
Building an Application with HTML5 Canvas 76
Practical Extra: Full Page Glass Pane 80
Summary 80
Chapter 3 Working with HTML5 Audio and Video 81
Overview of HTML5 Audio and Video 81
Video Containers 81
Audio and Video Codecs 83
The Codec Wars and the Tentative Truce 83
Audio and Video Restrictions 84
Browser Support for HTML5 Audio and Video 84
Using the HTML5 Audio and Video APIs 85
Checking for Browser Support 86
Understanding Media Elements 87
The Basics: Declaring Your Media Element 87
Using the Source 88
Taking Control 90
Working with Audio 92
Audio Activation 92
Working with Video 93
Creating a Video Timeline Browser 94
Adding the Video and the Canvas Element 94
Adding Variables 95
Adding the updateFrame Function 96
Adding the startVideo Function 97
Handling User Input 98
Adding the stopTimeline Function 99
Practical Extras 100
Background Noise in a Page 100
Mouseover Video Playback 101
Summary 102
Chapter 4 Using the HTML5 Geolocation API 103
About Location Information 103
Latitude and Longitude Coordinates 104
Where Does Location Information Come From? 104
IP Address Geolocation Data 105
GPS Geolocation Data 105
Wi-Fi Geolocation Data 106
Cell Phone Geolocation Data 106
User–Defined Geolocation Data 107
Browser Support for HTML5 Geolocation 107
Privacy 108
Triggering the Privacy Protection Mechanism 109
Dealing with Location Information 111
Using the HTML5 Geolocation API 111
Checking for Browser Support 111
Position Requests 112
One-Shot Position Requests 112
Repeated Position Updates 116
Building a Real-Time Application with HTML5 Geolocation 117
Writing the HTML Display 120
Processing the Geolocation Data 120
The Final Code 124
Practical Extras 127
What’s My Status? 127
Show Me on a Google Map 129
Summary 130
Chapter 5 Using the Communication APIs 131
Cross Document Messaging 131
Understanding Origin Security 133
Browser Support for Cross Document Messaging 134
Using the postMessage API 135
Checking for Browser Support 135
Sending Messages 135
Listening for Message Events 135
Building an Application Using the postMessage API 136
Building the Portal Page 137
Building the Chat Widget Page 138
The Final Code 138
The Application in Action 141
XMLHttpRequest Level 2 142
Cross-Origin XMLHttpRequest 142
Progress Events 144
Browser Support for HTML5 XMLHttpRequest Level 2 145
Using the XMLHttpRequest API 145
Checking for Browser Support 145
Making Cross-Origin Requests 146
Using Progress Events 146
Building an Application Using XMLHttpRequest 147
The Final Code 148
The Application in Action 150
Practical Extras 151
Structured Data 151
Framebusting 151
Summary 152
Chapter 6 Using the HTML5 WebSocket API 153
Overview of HTML5 WebSockets 153
Real-Time and HTTP 153
Understanding HTML5 WebSockets 155
The WebSocket Handshake 156
The WebSocket Interface 156
A Dramatic Reduction in Unnecessary Network Traffic and Latency 157
Browser Support for HTML5 WebSockets 162
Writing a Simple Echo WebSocket Server 162
Using the HTML5 WebSocket API 170
Checking for Browser Support 170
Basic API Usage 171
Creating a WebSocket object and Connecting to a WebSocket Server 171
Adding Event Listeners 171
Sending Messages 171
Running the WebSocket Page 172
Building an Application with HTML5 WebSockets 174
Coding the HTML File 175
Adding the WebSocket Code 177
Adding the Geolocation Code 178
Putting It All Together 178
The Final Code 180
Summary 183
Chapter 7 Using the HTML5 Forms API 184
Overview of HTML5 Forms 184
HTML Forms vs. XForms 185
Functional Forms 185
Browser Support for HTML5 Forms 185
An Input Catalog 186
Using the HTML5 Forms APIs 191
New form attributes and functions 191
The placeholder Attribute 191
The autocomplete Attribute 192
The autofocus Attribute 192
The list Attribute and the datalist Element 193
The min and max Attributes 193
The step Attribute 194
The valueAsNumber Function 194
The required Attribute 194
Checking forms with validation 195
Validation Fields and Functions 198
Validation feedback 199
Turning Off Validation 200
Building an Application with HTML5 Forms 200
Practical Extras 205
The Password is: Validation! 205
Summary 206
Chapter 8 Using the HTML5 Web Workers API 207
Browser Support for HTML5 Web Workers 208
Using the HTML5 Web Workers API 208
Checking for Browser Support 208
Creating HTML5 Web Workers 209
Loading and Executing Additional JavaScript 209
Communicating with HTML5 Web Workers 209
Coding the Main Page 210
Handling Errors 211
Stopping HTML5 Web Workers 212
Using HTML5 Web Workers within HTML5 Web Workers 212
Using Timers 213
Simple Example Code 213
Building an Application with HTML5 Web Workers 214
Coding the blur.js Helper Script 215
Coding the blur.html Application Page 217
Coding the blurWorker.js Web Worker Script 218
Communicating with the Web Workers 219
The Application in Action 221
Example Code 221
Summary 226
Chapter 9 Using the HTML5 Web Storage API 227
Overview of HTML5 Web Storage 227
Browser Support for HTML5 Web Storage 228
Using the HTML5 Web Storage API 229
Checking for Browser Support 229
Setting and Retrieving Values 230
Plugging Data Leaks 231
Local Versus Session Storage 233
Other Web Storage API Attributes and Functions 233
Communicating Web Storage Updates 235
Exploring Web Storage 237
Building an Application with HTML5 Web Storage 238
The Future of Browser Database Storage 249
Practical Extras 252
JSON Object Storage 252
A Window into Sharing 253
Summary 255
Chapter 10 Creating HTML5 Offline Web Applications 256
Overview of HTML5 Offline Web Applications 256
Browser Support for HTML5 Offline Web Applications 258
Using the HTML5 Offline Web Application API 259
Checking for Browser Support 259
Creating a Simple Offline Application 259
Going Offline 260
Manifest Files 260
The applicationCache API 261
Building an Application with HTML5 Offline Web Applications 263
Creating a Manifest File for the Application Resources 264
Creating the HTML Structure and CSS of the UI 265
Creating the Offline JavaScript 265
Check for ApplicationCache Support 267
Adding the Update Button Handler 268
Add Geolocation Tracking Code 268
Adding Storage Code 269
Adding Offline Event Handling 269
Summary 270
Chapter 11 The Future of HTML5 271
Browser Support for HTML5 271
HTML Evolves 271
WebGL 272
HTML in Three Dimensions 272
3D Shaders 273
Devices 274
Audio Data API 275
Video Improvements 275
Touchscreen Device Events 275
Orientation 276
Gestures 276
Touches 277
Peer-to-Peer Networking 278
Ultimate Direction 279
Summary 279
Index 280