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

Foreword
In June 2004, representatives from the semantic web community, major browser vendors, and the W3C met in San Jose, California to discuss the standards body’s response to the rise of web applications. At the end of the second day, a vote was held to decide whether the W3C should augment HTML and the DOM to address the new requirements of web applications. Minutes from the event record the anonymous and curious result, “8 for, 14 against.”
This schism lead to a divergence in effort: two days later, the WHATWG was formed from the major browser vendors to solve emerging issues. Meanwhile, the W3C pushed forward with the XHTML2 specification, only to drop it five years later to focus on an aligned HTML5 effort with the WHATWG.
Now, seven years since, we stand to benefit greatly from the passionate minds that have designed HTML5. The features both codify de facto standards that have been in use for years and lay the groundwork for next-generation web applications. Putting them to use means a more engaging and responsive web experience for your users and, oftentimes, far less code for you.
In this book, you'll find a well-designed learning curve bringing you up to speed on the features within HTML5 and its associated specifications. You'll learn best practices of feature detection, appropriate use cases, and a lot of the whys that you won’t find in the specifications. The code examples are not plain, trivial uses of each API but instead lead you through building actual web applications. I hope this book is able to serve you well, and I hope you’ll be as excited about the next generation of the web as I am.
Paul Irish
Google Chrome Developer Advocate,
Modernizr & HTML5 Boilerplate Developer
xv

About the Authors
Peter Lubbers is the senior director of technical communication at Kaazing. An HTML5 and WebSockets enthusiast, Peter is a frequent speaker at international events and teaches HTML5 training courses worldwide. Prior to joining Kaazing, Peter worked for almost ten years as an information architect at Oracle, where he wrote award-winning books and developed patent-pending software solutions. 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 in California, and in his spare time, he bungee jumps and runs ultramarathons. And, yes, he owns the original HTML5 license plate. You can follow Peter on Twitter (@peterlubbers).
Brian Albers is the vice president of research and development at Kaazing. His career in web development spans a decade and a half, including his most recent position as a senior development manager at Oracle. Brian is a regular speaker at conferences, such as Web 2.0 Expo, AJAXWorld Expo, and JavaOne, where he focuses on Web and user interface technologies. A native Texan and current California resident, Brian spends as much time as possible escaping to Hawaii. When he cannot relax on the beach, Brian can be found frequenting a variety of virtual worlds in his spare time.
Frank Salim is one of the original engineers at Kaazing who helped craft the WebSockets gateway and client strategy. Frank is a San Diego native currently residing in Mountain View, California. He holds a degree in computer science from Pomona College. When he is not programming, Frank enjoys reading, painting, and inline skating.
xvi

About the Technical Reviewer
Tony Pye has a background in software consultancy, web development, and engineering. However, instead of taking his technical expertise into manufacturing, he took the path to geekdom and in 2003 became a partner and Head of Development at INK Digital Agency, one of the UK’s top 100 creative agencies*
As well as having an extensive knowledge of current software and coding standards, Tony keeps a sharp eye to the future, watching for emerging technologies, thus ensuring his development team remains at the forefront of an ever-changing digital landscape. Although businesses face many challenges, Tony has the underpinning knowledge and experience to define their technical problems and produce innovative digital solutions for a range of commercial environments. While he is
particularly proud of his mobile application development and a self-service touchscreen kiosk web application, which was a first for the fitness industry, he is very coy when it comes to talking about his development work on multi-million pound e-commerce web sites. Generally, though, Tony is a “thoroughly good egg,” and for anyone that has a digital dilemma he is the man that can find a solution. If you’d like to talk to Tony about digital development or anything else for that matter; drop him a line: tony@inkdigitalagency.com.
*Recognized by the 2010 Recommended Agencies Register survey
xvii

Acknowledgments
I’d like to thank my wife, Vittoria, for her love and patience, and my talented sons, Sean and Rocky— reach for the stars, boys!
Thanks to my parents, Herman and Elisabeth, my sister, Alice, and my brother, David, for always believing in me, and to my late grandmother Gebbechien whose courageous acts during the Nazi occupation of Holland were a great lesson to our family.
To my coauthors, the never-tiring Brian and the code-generating human Frank, it has been an honor to work with both of you.
Thanks also to Clay at Apress for all your support, and, finally, thanks to Jonas and John at Kaazing for pushing us to write a “real” book—an “unofficial e-book” would still be just a figment of our imagination, I am sure!
—Peter Lubbers
To my parents, Ken and Patty Albers, I offer my deepest love and appreciation for the sacrifices you made to bring me so many opportunities. Without your encouragement and the values you instilled in me, I would never have completed this or any other major life journey. You’ve been guiding me every step of the way.
To John, my deepest thanks for your patience every time that extra hour of work stretched to two, three, or more. You amaze and inspire me.
To Pitch, Bonnie, and Penelope, a scritch on the chin and a promise that dinner won’t be so late any more. To the cats who came before, your purrs stay with me.
To my coworkers at Kaazing, much appreciation for the chance to work with the best and the brightest.
And a special thanks to the editorial staff at Apress for first believing that the time was right for an HTML5 book and then for having patience with us while we attempted to document a rapidly moving target.
—Brian Albers
I’d like to thank my parents, Mary and Sabri, who are responsible for my existence and without whom this book would literally not be possible.
—Frank Salim
xviii