With 90 detailed hacks, expert web developers Jesse Cravens and Jeff Burtoft demonstrate intriguing uses of HTML5-related technologies. Each recipe provides a clear explanation, screenshots, and complete code examples for specifications that include Canvas, SVG, CSS3, multimedia, data storage, web workers, WebSockets, and geolocation.
You’ll also find hacks for HTML5 markup elements and attributes that will give you a solid foundation for creative recipes that follow. The last chapter walks you through everything you need to know to get your HTML5 app off the ground, from Node.js to deploying your server to the cloud.
Here are just a few of the hacks you’ll find in this book:
* Make iOS-style card flips with CSS transforms and transitions
* Replace the background of your video with the Canvas tag
* Use Canvas to create high-res Retina Display-ready media
* Make elements on your page user-customizable with editable content
* Cache media resources locally with the filesystem API
* Reverse-geocode the location of your web app user
* Process image data with pixel manipulation in a dedicated web worker
* Push notifications to the browser with Server-Sent Events
Inhaltsverzeichnis
Preface;
Why HTML5? ;
Why HTML5 Hacks? ;
Who This Book Is For;
Contents of This Book;
Conventions Used in This Book;
Using Code Examples;
We'd Like to Hear from You;
Safari® Books Online;
Acknowledgments;
Chapter 1: Hacking the Semantic Way;
1. 1 Simplify Your Doc with the Right < doctype> ;
1. 2 Adopt Common Structures;
1. 3 Make Your New HTML5 Tags Render Properly in Older Browsers;
1. 4 Bring Back the < input> Tag;
1. 5 Easily Implement Form Validation Without JavaScript;
1. 6 Improve the Usability of Your Forms with New Controls;
1. 7 Know What's Going On in Your App with New DOM Events;
1. 8 Add Rich Context to Your Markup with Custom Data;
1. 9 Track User Events with Custom Data;
1. 10 Make Your Page Consumable by Robots and Humans Alike with Microdata;
Chapter 2: Hacking with Style;
2. 1 Use Experimental CSS Features with Browser Prefixes;
2. 2 Design with Custom Fonts Using Web Fonts;
2. 3 Use Google Web Fonts for Simple @font-face Implementation;
2. 4 Use CSS3 Text Effects to Make Your Text Not Suck;
2. 5 Make Elements Appear Transparent Without Altering the Opacity;
2. 6 Use Media Queries to Build Responsive Design;
2. 7 Make Your Web App Respond to Device Orientation Changes;
2. 8 Take Full Control of Your DOM with Pseudoclasses;
2. 9 Hack Up Your Sprite and Put Your Images Inline with Image Data URIs;
2. 10 Build Gradients the Easy Way;
2. 11 Make Borders Interesting Again, with Border Treatments;
2. 12 Set Multiple Background Images to the Same Element;
2. 13 Free Your Page Elements from Their Traditional Space with CSS3 Transforms 2D transforms;
2. 14 Turn Transforms into Animations with CSS3 Transitions;
2. 15 Make iOS-Style Card Flips with CSS Transforms and Transitions;
2. 16 Use Respond. js to Polyfill CSS3 Media Queries in IE;
2. 17 Control Mobile Layout with the viewport < meta> Tag;
Chapter 3: Multimedia Hacking;
3. 1 Embed Video Directly in Your Application with HTML5 Video multimedia video embedding video embedding;
3. 2 Choose the Right Codecs for Your Video Files;
3. 3 Create Custom Video Controls with Video APIs;
3. 4 Replace the Background of Your HTML5 Video with the < canvas> Tag;
3. 5 Add Subtitles to Your HTML5 Video Element;
3. 6 Beautify Your HTML5 Video Cues;
3. 7 Use the Cuepoint. js Polyfill for Subtitles;
3. 8 Easily Build Audio-Rich Applications with Buzz;
3. 9 Simplify Your HTML5 Media with MediaElement. js;
Chapter 4: Hacking Your Graphics with Canvas and SVG;
4. 1 Draw Shapes on Your HTML5 < canvas> Tag;
4. 2 Apply Styles to Your Canvas Elements;
4. 3 Style Canvas Elements with Image Files;
4. 4 Use the HTML5 < canvas> Tag to Create High-Res, Retina-Display-Ready Media;
4. 5 Accelerate Animation with Canvas Drawings;
4. 6 Build "Native" Illustrations with Scalable Vector Graphics;
4. 7 Style SVG Elements with CSS;
4. 8 Animate Illustrations with SVG;
4. 9 Embed SVG Directly in Your HTML;
Chapter 5: User Interactions;
5. 1 Make Any Content Draggable Within Your Application;
5. 2 Update the DOM with a Drag-and-Drop Data Transfer Object;
5. 3 Drag Files In and Out of Your Web Application;
5. 4 Make Any Element on Your Page User-Customizable with Editable Content;
5. 5 Turn Your Web Page into a WYSIWYG Editor;
5. 6 Take Control of the Browser History Buttons with HTML5 Session History;
Chapter 6: Client-Side Data Storage Hacks;
6. 1 Embed Binary Data in an Inline URL;
6. 2 Convert a Data URI to a Blob and Append It to Form Data with XHR2;
6. 3 Use the WebStorage API to Persist User Data;
6. 4 Polyfill LocalStorage with YepNope. js and Storage. js;
6. 5 Cache Media Resources Locally with the FileSystem API;
6. 6 Build a Milestone Calendar with IndexedDB and FullCalendar. js;
Chapter 7: Geolocation Hacks;
7. 1 Use the Geolocation APIs to Display Longitude and Latitude in a Mobile Web Application;
7. 2 Use Google's Geocoding API to Reverse-Geocode a User's Location;
7. 3 Update a User's Current Location in a Google Map;
7. 4 Use the Geoloqi Service to Build a Geofence;
7. 5 Use the Geoloqi Real-Time Streaming Service to Broadcast a Remote User's Movement;
7. 6 Polyfill Geolocation APIs with Webshims;
Chapter 8: WebWorker API;
8. 1 How Browsers Handle JavaScript;
8. 2 Use the BlobBuilder Interface to Create an Inline Worker;
8. 3 Perform Heavy Array Computations in a Dedicated Web Worker;
8. 4 Use a Timer to Send Application State to Workers;
8. 5 Process Image Data with Pixel Manipulation in a Dedicated Worker;
8. 6 Use Import Scripts to Make Twitter JSONP Requests;
8. 7 Connect to Shared Workers Simultaneously from Multiple Browser Windows;
Chapter 9: Hacking HTML5 Connectivity;
9. 1 Use Kaazing's Remote WebSocket Server to Echo Simple Messages from a Browser;
9. 2 Build a Blazing-Fast WebSocket Server with Node. js and the ws Module;
9. 3 Build a Donation Thermometer with Web Sockets, the Pusher API, and PHP;
9. 4 Build Plug-Ins for jWebSocket;
9. 5 Push Notifications to the Browser with Server-Sent Events;
9. 6 Configure Amazon S3 for Cross-Origin Resource Sharing to Host a Web Font;
9. 7 Control an HTML5 Slide Deck with Robodeck;
9. 8 Inspect a Socket. IO Connection to Determine If It Is Native or Emulated;
9. 9 Build a Simple SPDY Server with node-spdy;
Chapter 10: Pro HTML5 Application Hacks with Node. js;
10. 1 HTML5 Application Design Considerations;
10. 2 Deliver "Hello Html5" to the Browser;
10. 3 Detect the User Agent String Within the Request Object;
10. 4 Use Node. js's Response Object to Respond to the Client with Device-Specific Data;
10. 5 Use the Node Package Manager to Add a Web Application Framework As a Third-Party Module;
10. 6 Use the Express Application Generator to Bootstrap Your App;
10. 7 Build a Custom Module to Handle Routing;
10. 8 Configure Express to Use a View Engine;
10. 9 Use Jade Layouts to DRY Up Your Application's Views;
10. 10 Use a Jade Partial to Create a Common Navigation Bar in Your Views;
10. 11 Use Jade Mixins to Populate Your Views with Data;
10. 12 Set Up Expressive, Dynamic, Robust CSS with Stylus;
10. 13 Include HTML5 Boilerplate As Your Default Starter Template;
10. 14 Become an HTML5 Hacker;
Colophon;
