Html5 Hacks

HTML5 is already transforming web development, though it's still under construction in some areas. HTML5 Hacks shows you how to use the latest tools to make your sites and applications more interactive, more functional, and more capable of competing with desktop applications. Each hack shows you how to make a concrete improvement, applying the latest in JavaScript, HTML, and CSS power to common web development issues. Learn the latest techniques with HTML, CSS, and JavaScript Discover new markup and multimedia features Take off with new graphics features in Canvas and SVG Use new presentation models and tools in CSS3 Apply CSS transformation and animation to reduce the amount of JavaScript you need for exciting sites Implement local storage with hash tables and databases Improve client-server communication with web sockets and XmlHttpRequest

Jesse Cravens is a Senior Engineer at frog where he works with the world's leading companies, helping them to design, engineer, and bring to market meaningful products and services. With 12 years of experience in web application development, Jesse is currently focusing on single page web applications, the mobile web, and HTML5. Jeff Burtoft, HTML5 Evangelist for Microsoft Corporation, has built a reputation of pushing the boundaries of HTML5 and JavaScript. With over 10 years of experience in web development, he's filled roles in the industry ranging from webmaster of a startup to lead frontend developer for a Fortune 500 company.

Preface	p. vii
Hacking the Semantic Way	p. 1
Simplify Your Doc with the Right	p. 1
Adopt Common Structures	p. 2
Make Your New HTML5 Tags Render Properly in Older Browsers	p. 5
Bring Back the Tag	p. 11
Easily Implement Form Validation Without JavaScript	p. 16
Improve the Usability of Your Forms with New Controls	p. 24
Know What's Going On in Your App with New DOM Events	p. 37
Add Rich Context to Your Markup with Custom Data	p. 40
Track User Events with Custom Data	p. 44
Make Your Page Consumable by Robots and Humans Alike with Microdata	p. 47
Hacking with Style	p. 53
Use Experimental CSS Features with Browser Prefixes	p. 54
Design with Custom Fonts Using Web Fonts	p. 56
Use Google Web Fonts for Simple @font-face Implementation	p. 61
Use CSS3 Text Effects to Make Your Text Not Suck	p. 70
Make Elements Appear Transparent Without Altering the Opacity	p. 73
Use Media Queries to Build Responsive Design	p. 76
Make Your Web App Respond to Device Orientation Changes	p. 81
Take Full Control of Your DOM with Pseudoclasses	p. 85
Hack Up Your Sprite and Put Your Images Inline with Image Data URIs	p. 87
Build Gradients the Easy Way	p. 92
Make Borders Interesting Again, with Border Treatments	p. 98
Set Multiple Background Images to the Same Element	p. 103
Free Your Page Elements from Their Traditional Space with CSS3 Transforms	p. 106
Turn Transforms into Animations with CSS3 Transitions	p. 110
Make iOS-Style Card Flips with CSS Transforms and Transitions	p. 113
Use Respond.js to Polyfill CSS3 Media Queries in IE	p. 117
Control Mobile Layout with the viewport Tag	p. 121
Multimedia Hacking	p. 125
Embed Video Directly in Your Application with HTML5 Video	p. 125
Choose the Right Codecs for Your Video Files	p. 128
Create Custom Video Controls with Video APIs	p. 130
Replace the Background of Your HTML5 Video with the	p. 135
Add Subtitles to Your HTML5 Video Element	p. 139
Beautify Your HTML5 Video Cues	p. 142
Use the Cuepoint.js Polyfill for Subtitles	p. 146
Easily Build Audio-Rich Applications with Buzz	p. 149
Simplify Your HTML5 Media with MediaElement.js	p. 153
Hacking Your Graphics with Canvas and SVG	p. 157
Draw Shapes on Your HTML5	p. 158
Apply Styles to Your Canvas Elements	p. 164
Style Canvas Elements with Image Files	p. 171
Use the HTML5	p. 177
Accelerate Animation with Canvas Drawings	p. 180
Build "Native" Illustrations with Scalable Vector Graphics	p. 187
Style SVG Elements with CSS	p. 191
Animate Illustrations with SVG	p. 198
Embed SVG Directly in Your HTML	p. 202
User Interactions	p. 207
Make Any Content Draggable Within Your Application	p. 208
Update the DOM with a Drag-and-Drop Data Transfer Object	p. 212
Drag Files In and Out of Your Web Application	p. 218
Make Any Element on Your Page User-Customizable with Editable Content	p. 224
Turn Your Web Page into a WYSIWYG Editor	p. 227
Take Control of the Browser History Buttons with HTML5 Session History	p. 230
Client-Side Data Storage Hacks	p. 237
Embed Binary Data in an Inline URL	p. 237
Convert a Data URI to a Blob and Append It to Form Data with XHR2	p. 242
Use the WebStorage API to Persist User Data	p. 244
Polyfill LocalStorage with YepNope.js and Storage.js	p. 250
Cache Media Resources Locally with the FileSystem API	p. 253
Build a Milestone Calendar with IndexedDB and FullCalendar.js	p. 262
Geolocation Hacks	p. 271
Use the Geolocation APIs to Display Longitude and Latitude in a Mobile Web Application	p. 272
Use Google's Geocoding API to Reverse-Geocode a User's Location	p. 278
Update a User's Current Location in a Google Map	p. 284
Use the Geoloqi Service to Build a Geofence	p. 289
Use the Geoloqi Real-Time Streaming Service to Broadcast a Remote User's Movement	p. 296
Polyfill Geolocation APIs with Webshims	p. 300
WebWorker API	p. 305
How Browsers Handle JavaScript	p. 305
Use the BlobBuilder Interface to Create an Inline Worker	p. 307
Perform Heavy Array Computations in a Dedicated Web Worker	p. 313
Use a Timer to Send Application State to Workers	p. 323
Process Image Data with Pixel Manipulation in a Dedicated Worker	p. 336
Use Import Scripts to Make Twitter JSONP Requests	p. 341
Connect to Shared Workers Simulataneously from Multiple Browser Windows	p. 345
Hacking HTML5 Connectivity	p. 349
Use Kaazing's Remote WebSocket Server to Echo Simple Messages from a Browser	p. 350
Build a Blazing-Fast WebSocket Server with Node.js and the ws Module	p. 358
Build a Donation Thermometer with Web Sockets, the Pusher API, and PHP	p. 365
Build Plug-Ins for jWebSocket	p. 381
Push Notifications to the Browser with Server-Sent Events	p. 392
Configure Amazon S3 for Cross-Origin Resource Sharing to Host a Web Font	p. 402
Control an HTML5 Slide Deck with Robodeck	p. 411
Inspect a Socket.IO Connection to Determine If It Is Native or Emulated	p. 432
Build a Simple SPDY Server with node-spdy	p. 432
Pro HTML5 Application Hacks with Node.js	p. 435
HTML5 Application Design Considerations	p. 435
Deliver "Hello Html5" to the Browser	p. 436
Detect the User Agent String Within the Request Object	p. 444
Use Node.js's Response Object to Respond to the Client with Device-Specific Data	p. 445
Use the Node Package Manager to Add a Web Application Framework As a Third-Party Module	p. 447
Use the Express Application Generator to Bootstrap Your App	p. 448
Build a Custom Module to Handle Routing	p. 451
Configure Express to Use a View Engine	p. 452
Use Jade Layouts to DRY Up Your Application's Views	p. 454
Use a Jade Partial to Create a Common Navigation Bar in Your Views	p. 456
Use Jade Mixins to Populate Your Views with Data	p. 458
Set Up Expressive, Dynamic, Robust CSS with Stylus	p. 462
Include HTML5 Boilerplate As Your Default Starter Template	p. 465
Become an HTML5 Hacker	p. 471
Index	p. 473
Table of Contents provided by Ingram. All Rights Reserved.

What is included with this book?

The New copy of this book will include any supplemental materials advertised. Please check the title of the book to determine if it should include any access cards, study guides, lab manuals, CDs, etc.

The Used, Rental and eBook copies of this book are not guaranteed to include any supplemental materials. Typically, only the book itself is included. This is true even if the title states it includes any access cards, study guides, lab manuals, CDs, etc.

FREE SHIPPING

Amazon no longer offers textbook rentals. We do!

Summary

Author Biography

Table of Contents

Supplemental Materials