Jesse Cravens, Jeff Burtoft

HTML5 Hacks

Tips & Tools for Creating Interactive Web Applications

• Broschiertes Buch

Produktbeschreibung

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

---

Hinweis: Dieser Artikel kann nur an eine deutsche Lieferadresse ausgeliefert werden.

Produktdetails

• Verlag: O'Reilly Media
• Seitenzahl: 498
• Erscheinungstermin: 1. Januar 2013
• Englisch
• Abmessung: 228mm x 151mm x 30mm
• Gewicht: 650g
• ISBN-13: 9781449334994
• ISBN-10: 1449334997
• Artikelnr.: 35896135

Autorenporträt

Jesse is a Sr. 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. 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

Inhaltsangabe

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
1.2 Adopt Common Structures
1.3 Make Your New HTML5 Tags Render Properly in Older Browsers
1.4 Bring Back the 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 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 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 Tag
4.2 Apply Styles to Your Canvas Elements
4.3 Style Canvas Elements with Image Files
4.4 Use the HTML5 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