HTML5 Hacks

Spis treści książki

• HTML5 Hacks
• Preface
  • Why HTML5?
    • HTML5 Implementations
      • Browser-specific prefixes
      • Validation with HTML5 Conformance Checker
      • HTML5 Lint
      • References for HTML5 implementation statuses and feature support
  • Why HTML5 Hacks?
  • Who This Book Is For
  • Contents of This Book
  • Conventions Used in This Book
  • Using Code Examples
  • Wed Like to Hear from You
  • Safari Books Online
  • Acknowledgments
    • Guest Hackers
• 1. Hacking the Semantic Way
  • Hack 1. Simplify Your Doc with the Right <doctype>
  • Hack 2. Adopt Common Structures
    • All That and More
  • Hack 3. Make Your New HTML5 Tags Render Properly in Older Browsers
    • The Fallback div
    • The Real DOM Hack: The HTML5 Shim (or Shiv)
  • Hack 4. Bring Back the <input> Tag
    • Some of the Basics
    • The autocomplete Attribute
    • The list Attribute
    • The pattern Attribute
  • Hack 5. Easily Implement Form Validation Without JavaScript
    • What Does It Mean to Validate?
    • Validation Criteria
      • The required attribute
      • The pattern attribute
      • Measurable attributes
    • Lets Call This Validation Thing Off
    • The Constraint Validation API
  • Hack 6. Improve the Usability of Your Forms with New Controls
    • The date Input Type
    • The range Input Type
    • The color Input Type
    • The <meter> and <progress> Tags
    • Form Elements and Making Them Look Good
    • In Conclusion
  • Hack 7. Know Whats Going On in Your App with New DOM Events
    • The oninput, onchange, and oninvalid Events
    • Real-Time Form Validation with the oninput/oninvalid Events
    • Other New Events
  • Hack 8. Add Rich Context to Your Markup with Custom Data
    • Accessing the Data
  • Hack 9. Track User Events with Custom Data
    • Can It Get Any Easier?
  • Hack 10. Make Your Page Consumable by Robots and Humans Alike with Microdata
    • Details, Details!
• 2. Hacking with Style
  • Hack 11. Use Experimental CSS Features with Browser Prefixes
    • The Browser Prefix Controversy
  • Hack 12. Design with Custom Fonts Using Web Fonts
    • Working with Different Versions of Fonts
    • A Few Things to Note: Support and Performance
  • Hack 13. Use Google Web Fonts for Simple @font-face Implementation
    • Easy Implementation of Google Web Fonts
    • Nontraditional Font Access
    • Optimizing Your Font Usage
    • Common Mistakes
  • Hack 14. Use CSS3 Text Effects to Make Your Text Not Suck
    • The Text Shadow Property
    • Other Text Controls
  • Hack 15. Make Elements Appear Transparent Without Altering the Opacity
    • Introducing Alpha Transparency
    • A Word About Color Formats
  • Hack 16. Use Media Queries to Build Responsive Design
    • In Come the Media Queries
  • Hack 17. Make Your Web App Respond to Device Orientation Changes
    • Why Not Width?
  • Hack 18. Take Full Control of Your DOM with Pseudoclasses
    • The CSS Zebra Stripe Data Table
  • Hack 19. Hack Up Your Sprite and Put Your Images Inline with Image Data URIs
    • Why Do a Sprite?
    • The Problem with Image Sprites
    • Hacking Up the Sprite
    • The Downsides of Data URIs
  • Hack 20. Build Gradients the Easy Way
    • Pure CSS Gradients
    • The ColorZilla Ultimate Gradient Generator
      • Designing and customizing gradients
      • Modernizing your old gradients
  • Hack 21. Make Borders Interesting Again, with Border Treatments
    • The Border Radius
    • The Box Shadow
    • The Border Image
  • Hack 22. Set Multiple Background Images to the Same Element
    • How It Works
  • Hack 23. Free Your Page Elements from Their Traditional Space with CSS3 Transforms
    • CSS3 Transforms in 3D
    • Even More Advanced Effects
  • Hack 24. Turn Transforms into Animations with CSS3 Transitions
    • Transition to What?
    • Make 3D Transitions with Transforms
    • Transition Events
  • Hack 25. Make iOS-Style Card Flips with CSS Transforms and Transitions
    • Styling the Elements
    • Putting It All Together
  • Hack 26. Use Respond.js to Polyfill CSS3 Media Queries in IE
    • Just Add JavaScript
    • Caveats and Quid Pro Quo
  • Hack 27. Control Mobile Layout with the viewport <meta> Tag
    • Will the Real HTML5 Spec Please Stand Up?
• 3. Multimedia Hacking
  • Hack 28. Embed Video Directly in Your Application with HTML5 Video
    • Writing the Code
    • Video As a First-Class Element
  • Hack 29. Choose the Right Codecs for Your Video Files
    • Which Codecs to Support
  • Hack 30. Create Custom Video Controls with Video APIs
    • A Word About Audio
  • Hack 31. Replace the Background of Your HTML5 Video with the <canvas> Tag
    • Source Video
    • Hidden Canvas
    • Display Canvas
    • The Nuts and Bolts
    • The Results
  • Hack 32. Add Subtitles to Your HTML5 Video Element
    • Easy Implementation
    • The VTT File
    • Karaoke Anyone?
    • Summary
  • Hack 33. Beautify Your HTML5 Video Cues
    • Basic Formatting from WebVTT
    • CSS Styling
    • Pseudoclasses Within a Track Cue
  • Hack 34. Use the Cuepoint.js Polyfill for Subtitles
    • Using Cuepoint.js
  • Hack 35. Easily Build Audio-Rich Applications with Buzz
    • The Buzz Library
    • Using the Audio APIs
    • Using the Buzz APIs
      • Buzz
      • Sound
      • Group
      • Events
    • Implementing Buzz
  • Hack 36. Simplify Your HTML5 Media with MediaElement.js
    • Responsive Video
    • Event Listeners
    • Captions and Subtitles
    • Wrapping It Up
• 4. Hacking Your Graphics with Canvas and SVG
  • Hack 37. Draw Shapes on Your HTML5 <canvas> Tag
    • Drawing Rectangles
    • Drawing Paths
    • Smile, the Canvas Loves You!
    • Advanced Drawing
  • Hack 38. Apply Styles to Your Canvas Elements
    • Color
    • Gradients
    • Additional Styles
  • Hack 39. Style Canvas Elements with Image Files
    • The Basic Fill
    • Using an Image as a Fill
    • Easy Image Data
  • Hack 40. Use the HTML5 <canvas> Tag to Create High-Res, Retina-Display-Ready Media
    • In Comes the <canvas> Tag
  • Hack 41. Accelerate Animation with Canvas Drawings
    • Write and Clean
    • Smile, Youre Being Animated!
    • Implementing requestAnimationFrame
    • Putting It All Together
  • Hack 42. Build Native Illustrations with Scalable Vector Graphics
    • Why SVG?
    • Creating Your SVG Image
    • Drawing with XML
  • Hack 43. Style SVG Elements with CSS
    • Starting with SVG
    • Stripping Away the Noise
    • Building the CSS
  • Hack 44. Animate Illustrations with SVG
    • The SVG <animateMotion> Tag
    • Flexibility in Structure
    • One Last Option
  • Hack 45. Embed SVG Directly in Your HTML
    • Why Inline?
• 5. User Interactions
  • Hack 46. Make Any Content Draggable Within Your Application
    • Turning On the Drag
    • Listening for All Those Great Events
  • Hack 47. Update the DOM with a Drag-and-Drop Data Transfer Object
    • Incoming: Data Transfer Object
    • The Drop Zone Attribute
  • Hack 48. Drag Files In and Out of Your Web Application
    • Bringing Files Home
    • Bringing Files Back to the Browser
  • Hack 49. Make Any Element on Your Page User-Customizable with Editable Content
    • Spellcial!
  • Hack 50. Turn Your Web Page into a WYSIWYG Editor
    • Make the Page Editable
  • Hack 51. Take Control of the Browser History Buttons with HTML5 Session History
    • Smile, Its History!
    • Other History Features
• 6. Client-Side Data Storage Hacks
  • Hack 52. Embed Binary Data in an Inline URL
    • Within an Image Tag
    • Within an External Stylesheet
    • Getting Help from Your Web Application Framework
    • Disadvantages to Using Data URLs
  • Hack 53. Convert a Data URI to a Blob and Append It to Form Data with XHR2
  • Hack 54. Use the WebStorage API to Persist User Data
    • The Basics
    • The API
    • LocalStorage and Complex Data
    • Using SessionStorage
    • Security Concerns
  • Hack 55. Polyfill LocalStorage with YepNope.js and Storage.js
    • Including Modernizr
    • Using YepNope
    • Using Storage.js
  • Hack 56. Cache Media Resources Locally with the FileSystem API
    • Initializing and Preparing the Filesystem
    • Working with the Filesystem
    • Getting and Processing the ZIP File
    • Where to Go from Here
  • Hack 57. Build a Milestone Calendar with IndexedDB and FullCalendar.js
    • The Milestone IndexedDB
    • Adding Milestones
• 7. Geolocation Hacks
  • Hack 58. Use the Geolocation APIs to Display Longitude and Latitude in a Mobile Web Application
    • A Simple jQuery Mobile App
    • Security and Privacy Concerns
  • Hack 59. Use Googles Geocoding API to Reverse-Geocode a Users Location
  • Hack 60. Update a Users Current Location in a Google Map
    • Using the Google Maps API
    • Updating the Current Location with a Timer
    • Improving the Map
    • Improving Accuracy
    • Saving Power and/or Bandwidth
  • Hack 61. Use the Geoloqi Service to Build a Geofence
    • Building a Geofence
    • Getting Started
    • Building the Geofencing Application
    • Calling the Geoloqi API
  • Hack 62. Use the Geoloqi Real-Time Streaming Service to Broadcast a Remote Users Movement
    • The Geoloqi Real-Time Streaming Service
  • Hack 63. Polyfill Geolocation APIs with Webshims
• 8. WebWorker API
  • How Browsers Handle JavaScript
  • Hack 64. Use the BlobBuilder Interface to Create an Inline Worker
    • The Facebook Graph API and Batching Responses
    • Reducing the Batch to a Single Request
    • Building the Blob
    • Fetching Data from the Facebook Graph API
  • Hack 65. Perform Heavy Array Computations in a Dedicated Web Worker
    • An Expensive Computation
    • The Bouncing Balls Canvas
    • Spawning a Dedicated Web Worker
  • Hack 66. Use a Timer to Send Application State to Workers
    • General Overview
    • Initializing the Things
    • The Worker Library
    • Real-World Use
  • Hack 67. Process Image Data with Pixel Manipulation in a Dedicated Worker
  • Hack 68. Use Import Scripts to Make Twitter JSONP Requests
    • JSONP
  • Hack 69. Connect to Shared Workers Simultaneously from Multiple Browser Windows
• 9. Hacking HTML5 Connectivity
  • Hack 70. Use Kaazings Remote WebSocket Server to Echo Simple Messages from a Browser
  • Hack 71. Build a Blazing-Fast WebSocket Server with Node.js and the ws Module
    • Installing Node.js
    • Using the wscat Client to Call the Kaazing Echo Server
    • Creating a Simple Server and Connecting to It with wscat
    • Creating a Simple Client
  • Hack 72. Build a Donation Thermometer with Web Sockets, the Pusher API, and PHP
    • Progressive Enhancement
    • Building the Thermometer HTML
    • Adding a Thermometer to the Widget Using CSS
    • Tweaking the UI with JavaScript
    • Measurement Markers
    • Marker Values, Hover Highlights, and Tool Tips
    • Animating Value Changes
    • Adding Real-Time Updates
    • Summary
  • Hack 73. Build Plug-Ins for jWebSocket
    • Running the jWebSocket Server
      • Prerequisites on the server
    • jWebSocket Hello World for Browsers
      • Embedding the jWebSocket script
      • Creating the jWebSocketClient instance
    • Connecting and Logging On
    • Sending and Broadcasting Tokens
    • Processing Incoming Messages
    • Logging Off and Disconnecting
    • Extending jWebSocket with Plug-Ins
      • Create a server-side plug-in
      • Add your plug-in to the jWebSocket Server
    • Creating a Client-Side Plug-In
      • Use the plug-ins in your web pages
    • Included jWebSocket Plug-Ins
  • Hack 74. Push Notifications to the Browser with Server-Sent Events
    • What Is HTTP Streaming?
    • Rubys Sinatra
    • Building Push Notifications
    • A Simple HTTP Streaming Server
    • Setting Up the HTML Pages
    • Adding a Bit of jQuery
    • EventSource
    • Installing jQuery.notify
  • Hack 75. Configure Amazon S3 for Cross-Origin Resource Sharing to Host a Web Font
    • What Is an Amazon S3 Bucket?
    • Same Origin Policy
    • Using Web Fonts in Your Application
    • Uploading Your Font to Your Amazon S3 Bucket
    • Adding the Web Font to Your Web Page
    • What Is CORS?
    • Configuring CORS at Amazon S3
  • Hack 76. Control an HTML5 Slide Deck with Robodeck
    • Deck.js
    • Node.js and Express
    • Establishing Routes
    • Building Desktop and Mobile Views
    • Public Files
    • Polyfill WebSocket Support with Socket.IO
    • Adding the Socket.IO Client JavaScript to Our Views
    • Adding Geolocation APIs and Reverse Geocoding with the googlemaps Module
    • Setup for Mobile and Install of Sencha 2.0
    • Communicating from the Remote Control
  • Hack 77. Inspect a Socket.IO Connection to Determine If It Is Native or Emulated
  • Hack 78. Build a Simple SPDY Server with node-spdy
    • node-spdy
    • Whats Next?
• 10. Pro HTML5 Application Hacks with Node.js
  • HTML5 Application Design Considerations
    • Why Node.js?
    • Installation
    • Installing on Mac OS X via Homebrew
  • Hack 79. Deliver Hello Html5 to the Browser
    • A Little Background on HTTP
      • URL
      • Methods
      • Headers
  • Hack 80. Detect the User Agent String Within the Request Object
  • Hack 81. Use Node.jss Response Object to Respond to the Client with Device-Specific Data
  • Hack 82. Use the Node Package Manager to Add a Web Application Framework As a Third-Party Module
  • Hack 83. Use the Express Application Generator to Bootstrap Your App
    • Why Use Express?
  • Hack 84. Build a Custom Module to Handle Routing
  • Hack 85. Configure Express to Use a View Engine
  • Hack 86. Use Jade Layouts to DRY Up Your Applications Views
  • Hack 87. Use a Jade Partial to Create a Common Navigation Bar in Your Views
  • Hack 88. Use Jade Mixins to Populate Your Views with Data
  • Hack 89. Set Up Expressive, Dynamic, Robust CSS with Stylus
  • Hack 90. Include HTML5 Boilerplate As Your Default Starter Template
    • Integrating with the Node.js/Express Application
  • Become an HTML5 Hacker
• Index
• About the Authors
• Colophon
• Copyright

pokaż cały spis treści

ukryj recenzje