Paperback
-
PICK UP IN STORECheck Availability at Nearby Stores
Available within 2 business hours
Related collections and offers
Overview
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
Product Details
| ISBN-13: | 9781449334994 |
|---|---|
| Publisher: | O'Reilly Media, Incorporated |
| Publication date: | 12/04/2012 |
| Pages: | 498 |
| Product dimensions: | 5.90(w) x 8.90(h) x 1.20(d) |
About the Author
Jeff Burtoft, HTML5 Evangelist for Microsoft Corporation, has built a reputation of pushing the boundaries of HTML5 and JavaScript. He has over 10 years experience in web development and has filled a variety of roles in the industry, from “web master” of a start-up to Lead front end developer for a fortune 500 company. Jeff also develops mobile apps and is a blogger at HTML5Hacks.com
Table of Contents
Preface vii
1 Hacking the Semantic Way 1
Hack 01 Simplify Your Doc with the Right <doctype> 1
Hack 02 Adopt Common Structures 2
Hack 03 Make Your New HTML5 Tags Render Properly in Older Browsers 5
Hack 04 Bring Back the <input> Tag 11
Hack 05 Easily Implement Form Validation Without JavaScript 16
Hack 06 Improve the Usability of Your Forms with New Controls 24
Hack 07 Know What's Going On in Your App with New DOM Events 37
Hack 08 Add Rich Context to Your Markup with Custom Data 40
Hack 09 Track User Events with Custom Data 44
Hack 10 Make Your Page Consumable by Robots and Humans Alike with Microdata 47
2 Hacking with Style 53
Hack 11 Use Experimental CSS Features with Browser Prefixes 54
Hack 12 Design with Custom Fonts Using Web Fonts 56
Hack 13 Use Google Web Fonts for Simple @font-face Implementation 61
Hack 14 Use CSS3 Text Effects to Make Your Text Not Suck 70
Hack 15 Make Elements Appear Transparent Without Altering the Opacity 73
Hack 16 Use Media Queries to Build Responsive Design 76
Hack 17 Make Your Web App Respond to Device Orientation Changes 81
Hack 18 Take Full Control of Your DOM with Pseudoclasses 85
Hack 19 Hack Up Your Sprite and Put Your Images Inline with Image Data URIs 87
Hack 20 Build Gradients the Easy Way 92
Hack 21 Make Borders Interesting Again, with Border Treatments 98
Hack 22 Set Multiple Background Images to the Same Element 103
Hack 23 Free Your Page Elements from Their Traditional Space with CSS3 Transforms 106
Hack 24 Turn Transforms into Animations with CSS3 Transitions 110
Hack 25 Make iOS-Style Card Flips with CSS Transforms and Transitions 113
Hack 26 Use Respond.js to Polyfill CSS3 Media Queries in IE 117
Hack 27 Control Mobile Layout with the viewport <meta> Tag 121
3 Multimedia Hacking 125
Hack 28 Embed Video Directly in Your Application with HTML5 Video 125
Hack 29 Choose the Right Codecs for Your Video Files 128
Hack 30 Create Custom Video Controls with Video APIs 130
Hack 31 Replace the Background of Your HTML5 Video with the <canvas> Tag 135
Hack 32 Add Subtitles to Your HTML5 Video Element 139
Hack 33 Beautify Your HTML5 Video Cues 142
Hack 34 Use the Cuepoint.js Polyfill for Subtitles 146
Hack 35 Easily Build Audio-Rich Applications with Buzz 149
Hack 36 Simplify Your HTML5 Media with MediaElement.js 153
4 Hacking Your Graphics with Canvas and SVG 157
Hack 37 Draw Shapes on Your HTML5 <canvas> Tag 158
Hack 38 Apply Styles to Your Canvas Elements 164
Hack 39 Style Canvas Elements with Image Files 171
Hack 40 Use the HTML5 <canvas> Tag to Create High-Res, Retina-Display-Ready Media 177
Hack 41 Accelerate Animation with Canvas Drawings 180
Hack 42 Build "Native" Illustrations with Scalable Vector Graphics 187
Hack 43 Style SVG Elements with CSS 191
Hack 44 Animate Illustrations with SVG 198
Hack 45 Embed SVG Directly in Your HTML 202
5 User Interactions 207
Hack 46 Make Any Content Draggable Within Your Application 208
Hack 47 Update the DOM with a Drag-and-Drop Data Transfer Object 212
Hack 48 Drag Files In and Out of Your Web Application 218
Hack 49 Make Any Element on Your Page User-Customizable with Editable Content 224
Hack 50 Turn Your Web Page into a WYSIWYG Editor 227
Hack 51 Take Control of the Browser History Buttons with HTML5 Session History 230
6 Client-Side Data Storage Hacks 237
Hack 52 Embed Binary Data in an Inline URL 237
Hack 53 Convert a Data URI to a Blob and Append It to Form Data with XHR2 242
Hack 54 Use the WebStorage API to Persist User Data 244
Hack 55 Polyfill LocalStorage with YepNope.js and Storage.js 250
Hack 56 Cache Media Resources Locally with the FileSystem API 253
Hack 57 Build a Milestone Calendar with IndexedDB and FullCalendar.js 262
7 Geolocation Hacks 271
Hack 58 Use the Geolocation APIs to Display Longitude and Latitude in a Mobile Web Application 272
Hack 59 Use Google's Geocoding API to Reverse-Geocode a User's Location 278
Hack 60 Update a User's Current Location in a Google Map 284
Hack 61 Use the Geoloqi Service to Build a Geofence 289
Hack 62 Use the Geoloqi Real-Time Streaming Service to Broadcast a Remote User's Movement 296
Hack 63 Polyfill Geolocation APIs with Webshims 300
8 WebWorker API 305
How Browsers Handle JavaScript 305
Hack 64 Use the BlobBuilder Interface to Create an Inline Worker 307
Hack 65 Perform Heavy Array Computations in a Dedicated Web Worker 313
Hack 66 Use a Timer to Send Application State to Workers 323
Hack 67 Process Image Data with Pixel Manipulation in a Dedicated Worker 336
Hack 68 Use Import Scripts to Make Twitter JSONP Requests 341
Hack 69 Connect to Shared Workers Simulataneously from Multiple Browser Windows 345
9 Hacking HTML5 Connectivity 349
Hack 70 Use Kaazing's Remote WebSocket Server to Echo Simple Messages from a Browser 350
Hack 71 Build a Blazing-Fast WebSocket Server with Node.js and the ws Module 358
Hack 72 Build a Donation Thermometer with Web Sockets, the Pusher API, and PHP 365
Hack 73 Build Plug-Ins for jWebSocket 381
Hack 74 Push Notifications to the Browser with Server-Sent Events 392
Hack 75 Configure Amazon S3 for Cross-Origin Resource Sharing to Host a Web Font 402
Hack 76 Control an HTML5 Slide Deck with Robodeck 411
Hack 77 Inspect a Socket.IO Connection to Determine If It Is Native or Emulated 432
Hack 78 Build a Simple SPDY Server with node-spdy 432
10 Pro HTML5 Application Hacks with Node.js 435
HTML5 Application Design Considerations 435
Hack 79 Deliver "Hello Html5" to the Browser 436
Hack 80 Detect the User Agent String Within the Request Object 444
Hack 81 Use Node.js's Response Object to Respond to the Client with Device-Specific Data 445
Hack 82 Use the Node Package Manager to Add a Web Application Framework As a Third-Party Module 447
Hack 83 Use the Express Application Generator to Bootstrap Your App 448
Hack 84 Build a Custom Module to Handle Routing 451
Hack 85 Configure Express to Use a View Engine 452
Hack 86 Use Jade Layouts to DRY Up Your Application's Views 454
Hack 87 Use a Jade Partial to Create a Common Navigation Bar in Your Views 456
Hack 88 Use Jade Mixins to Populate Your Views with Data 458
Hack 89 Set Up Expressive, Dynamic, Robust CSS with Stylus 462
Hack 90 Include HTML5 Boilerplate As Your Default Starter Template 465
Become an HTML5 Hacker 471
Index 473