HTML5 Hacks

Name: HTML5 Hacks | Tips & Tools for Creating Interactive Web Applications
Brand: O'Reilly
Price: 24.49 EUR
Availability: OnlineOnly

Tips & Tools for Creating Interactive Web Applications

Jesse Cravens(Autor*in)

O'Reilly (Verlag)

Erschienen am 15. November 2012

500 Seiten

E-Book

ePUB mit Adobe-DRM

Systemvoraussetzungen

978-1-4493-3508-3 (ISBN)

24,49 €inkl. 7% MwSt.

Systemvoraussetzungen

für ePUB mit Adobe-DRM

E-Book Einzellizenz

Als Download verfügbar

Beschreibung

Weitere Details

Weitere Ausgaben

Inhalt

Cover
Copyright
Table of Contents
Preface
Why HTML5?
HTML5 Implementations
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
Guest Hackers
Chapter 1. Hacking the Semantic Way
Hack 01 Simplify Your Doc with the Right &doctype&
Hack 02 Adopt Common Structures
All That and More
Hack 03 Make Your New HTML5 Tags Render Properly in Older Browsers
The Fallback div
The Real DOM Hack: The HTML5 Shim (or Shiv)
Hack 04 Bring Back the &input& Tag
Some of the Basics
The autocomplete Attribute
The list Attribute
The pattern Attribute
Hack 05 Easily Implement Form Validation Without JavaScript
What Does It Mean to Validate?
Validation Criteria
Let's Call This Validation Thing Off
The Constraint Validation API
Hack 06 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 07 Know What's 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 08 Add Rich Context to Your Markup with Custom Data
Accessing the Data
Hack 09 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!
Chapter 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
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?
Chapter 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
Implementing Buzz
Hack 36 Simplify Your HTML5 Media with MediaElement.js
Responsive Video
Event Listeners
Captions and Subtitles
Wrapping It Up
Chapter 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, You're 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?
Chapter 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 51Take Control of the Browser History Buttons with HTML5 Session History
Smile, It's History!
Other History Features
Chapter 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
Chapter 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 Google's Geocoding API to Reverse-Geocode a User's Location
Hack 60 Update a User's 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 User's Movement
The Geoloqi Real-Time Streaming Service
Hack 63 Polyfill Geolocation APIs with Webshims
Chapter 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 67Process 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
Chapter 9. Hacking HTML5 Connectivity
Hack 70 Use Kaazing's 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
jWebSocket "Hello World" for Browsers
Connecting and Logging On
Sending and Broadcasting Tokens
Processing Incoming Messages
Logging Off and Disconnecting
Extending jWebSocket with Plug-Ins
Creating a Client-Side Plug-In
Included jWebSocket Plug-Ins
Hack 74 Push Notifications to the Browser with Server-Sent Events
What Is HTTP Streaming?
Ruby's 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
What's Next?
Chapter 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"The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems.[1] HTTP is the foundation of data communication for the World Wide Web." (Wikipedia (http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol))
Hack 80 Detect the User Agent String Within the Request Object
Hack 81 Use Node.js's 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 Application's 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

Systemvoraussetzungen

Als PDF speichern Als Link merken