Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development

Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development

Released August 2010
Publisher(s): Apress
ISBN: 9781430227908

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

HTML5 is here, and with it, web applications take on a power, ease, scalability, and responsiveness like never before. In this book, developers will learn how to use the latest cutting-edge HTML5 web technology—available in the most recent versions of modern browsers—to build web applications with unparalleled functionality, speed, and responsiveness.

  • Explains how you can create real-time HTML5 applications that tap the full potential of modern browsers

  • Provides practical, real-world examples of HTML5 features in action

  • Shows which HTML5 features are supported in current browsers

  • Covers all the new HTML5 APIs to get you up to speed quickly with HTML5

Table of contents

  1. Copyright
  2. Foreword
  3. About the Authors
  4. About the Technical Reviewer
  5. Acknowledgments
  6. Introduction
    1. 0.1. Who This Book Is For
    2. 0.2. An Overview of This Book
    3. 0.3. Example Code and Companion Web Site
    4. 0.4. Contacting the Authors
  7. 1. Overview of HTML5
    1. 1.1. The Story So Far—The History of HTML5
    2. 1.2. The Myth of 2022 and Why It Doesn't Matter
    3. 1.3. Who Is Developing HTML5?
    4. 1.4. A New Vision
      1. 1.4.1. Compatibility and Paving the Cow Paths
      2. 1.4.2. Utility and the Priority of Constituencies
        1. 1.4.2.1. Secure by Design
        2. 1.4.2.2. Separation of Presentation and Content
      3. 1.4.3. Interoperability Simplification
      4. 1.4.4. Universal Access
    5. 1.5. A Plugin–Free Paradigm
      1. 1.5.1. What's In and What's Out?
    6. 1.6. What's New in HTML5?
      1. 1.6.1. New DOCTYPE and Character Set
      2. 1.6.2. New and Deprecated Elements
      3. 1.6.3. Semantic Markup
      4. 1.6.4. Simplifying Selection Using the Selectors API
      5. 1.6.5. JavaScript Logging and Debugging
      6. 1.6.6. window.JSON
      7. 1.6.7. DOM Level 3
      8. 1.6.8. Monkeys, Squirrelfish, and Other Speedy Oddities
    7. 1.7. Summary
  8. 2. Using the HTML5 Canvas API
    1. 2.1. Overview of HTML5 Canvas
      1. 2.1.1. History
      2. 2.1.2. What Is a Canvas?
      3. 2.1.3. Canvas Coordinates
      4. 2.1.4. When Not to Use Canvas
      5. 2.1.5. Fallback Content
      6. 2.1.6. CSS and Canvas
      7. 2.1.7. Browser Support for HTML5 Canvas
    2. 2.2. Using the HTML5 Canvas APIs
      1. 2.2.1. Checking for Browser Support
      2. 2.2.2. Adding a Canvas to a Page
      3. 2.2.3. Applying Transformations to Drawings
      4. 2.2.4. Working with Paths
      5. 2.2.5. Working with Stroke Styles
      6. 2.2.6. Working with Fill Styles
      7. 2.2.7. Filling Rectangular Content
      8. 2.2.8. Drawing Curves
      9. 2.2.9. Inserting Images into a Canvas
      10. 2.2.10. Using Gradients
      11. 2.2.11. Using Background Patterns
      12. 2.2.12. Scaling Canvas Objects
      13. 2.2.13. Using Canvas Transforms
      14. 2.2.14. Using Canvas Text
      15. 2.2.15. Applying Shadows
      16. 2.2.16. Working with Pixel Data
      17. 2.2.17. Implementing Canvas Security
    3. 2.3. Building an Application with HTML5 Canvas
      1. 2.3.1. Practical Extra: Full Page Glass Pane
    4. 2.4. Summary
  9. 3. Working with HTML5 Audio and Video
    1. 3.1. Overview of HTML5 Audio and Video
      1. 3.1.1. Video Containers
      2. 3.1.2. Audio and Video Codecs
        1. 3.1.2.1. The Codec Wars and the Tentative Truce
      3. 3.1.3. Audio and Video Restrictions
      4. 3.1.4. Browser Support for HTML5 Audio and Video
    2. 3.2. Using the HTML5 Audio and Video APIs
      1. 3.2.1. Checking for Browser Support
      2. 3.2.2. Understanding Media Elements
        1. 3.2.2.1. The Basics: Declaring Your Media Element
        2. 3.2.2.2. Using the Source
        3. 3.2.2.3. Taking Control
      3. 3.2.3. Working with Audio
        1. 3.2.3.1. Audio Activation
      4. 3.2.4. Working with Video
        1. 3.2.4.1. Creating a Video Timeline Browser
        2. 3.2.4.2. Adding the Video and the Canvas Element
        3. 3.2.4.3. Adding Variables
        4. 3.2.4.4. Adding the updateFrame Function
        5. 3.2.4.5. Adding the startVideo Function
        6. 3.2.4.6. Handling User Input
        7. 3.2.4.7. Adding the stopTimeline Function
      5. 3.2.5. Practical Extras
        1. 3.2.5.1. Background Noise in a Page
        2. 3.2.5.2. Mouseover Video Playback
    3. 3.3. Summary
  10. 4. Using the HTML5 Geolocation API
    1. 4.1. About Location Information
      1. 4.1.1. Latitude and Longitude Coordinates
      2. 4.1.2. Where Does Location Information Come From?
      3. 4.1.3. IP Address Geolocation Data
      4. 4.1.4. GPS Geolocation Data
      5. 4.1.5. Wi-Fi Geolocation Data
      6. 4.1.6. Cell Phone Geolocation Data
      7. 4.1.7. User–Defined Geolocation Data
    2. 4.2. Browser Support for HTML5 Geolocation
    3. 4.3. Privacy
      1. 4.3.1. Triggering the Privacy Protection Mechanism
      2. 4.3.2. Dealing with Location Information
    4. 4.4. Using the HTML5 Geolocation API
      1. 4.4.1. Checking for Browser Support
      2. 4.4.2. Position Requests
        1. 4.4.2.1. One-Shot Position Requests
          1. 4.4.2.1.1. The updateLocation() Function
          2. 4.4.2.1.2. The handleLocationError() Function
          3. 4.4.2.1.3. Optional Geolocation Request Attributes
        2. 4.4.2.2. Repeated Position Updates
    5. 4.5. Building a Real-Time Application with HTML5 Geolocation
      1. 4.5.1. Writing the HTML Display
      2. 4.5.2. Processing the Geolocation Data
      3. 4.5.3. The Final Code
    6. 4.6. Practical Extras
      1. 4.6.1. What's My Status?
      2. 4.6.2. Show Me on a Google Map
    7. 4.7. Summary
  11. 5. Using the Communication APIs
    1. 5.1. Cross Document Messaging
      1. 5.1.1. Understanding Origin Security
      2. 5.1.2. Browser Support for Cross Document Messaging
      3. 5.1.3. Using the postMessage API
        1. 5.1.3.1. Checking for Browser Support
        2. 5.1.3.2. Sending Messages
        3. 5.1.3.3. Listening for Message Events
      4. 5.1.4. Building an Application Using the postMessage API
        1. 5.1.4.1. Building the Portal Page
        2. 5.1.4.2. Building the Chat Widget Page
        3. 5.1.4.3. The Final Code
        4. 5.1.4.4. The Application in Action
    2. 5.2. XMLHttpRequest Level 2
      1. 5.2.1. Cross-Origin XMLHttpRequest
      2. 5.2.2. Progress Events
      3. 5.2.3. Browser Support for HTML5 XMLHttpRequest Level 2
      4. 5.2.4. Using the XMLHttpRequest API
        1. 5.2.4.1. Checking for Browser Support
        2. 5.2.4.2. Making Cross-Origin Requests
        3. 5.2.4.3. Using Progress Events
      5. 5.2.5. Building an Application Using XMLHttpRequest
        1. 5.2.5.1. The Final Code
        2. 5.2.5.2. The Application in Action
    3. 5.3. Practical Extras
      1. 5.3.1. Structured Data
      2. 5.3.2. Framebusting
    4. 5.4. Summary
  12. 6. Using the HTML5 WebSocket API
    1. 6.1. Overview of HTML5 WebSockets
      1. 6.1.1. Real-Time and HTTP
      2. 6.1.2. Understanding HTML5 WebSockets
        1. 6.1.2.1. The WebSocket Handshake
        2. 6.1.2.2. The WebSocket Interface
        3. 6.1.2.3. A Dramatic Reduction in Unnecessary Network Traffic and Latency
    2. 6.2. Browser Support for HTML5 WebSockets
    3. 6.3. Writing a Simple Echo WebSocket Server
    4. 6.4. Using the HTML5 WebSocket API
      1. 6.4.1. Checking for Browser Support
      2. 6.4.2. Basic API Usage
        1. 6.4.2.1. Creating a WebSocket object and Connecting to a WebSocket Server
        2. 6.4.2.2. Adding Event Listeners
        3. 6.4.2.3. Sending Messages
        4. 6.4.2.4. Running the WebSocket Page
    5. 6.5. Building an Application with HTML5 WebSockets
      1. 6.5.1. Coding the HTML File
      2. 6.5.2. Adding the WebSocket Code
      3. 6.5.3. Adding the Geolocation Code
      4. 6.5.4. Putting It All Together
      5. 6.5.5. The Final Code
    6. 6.6. Summary
  13. 7. Using the HTML5 Forms API
    1. 7.1. Overview of HTML5 Forms
      1. 7.1.1. HTML Forms vs. XForms
      2. 7.1.2. Functional Forms
      3. 7.1.3. Browser Support for HTML5 Forms
      4. 7.1.4. An Input Catalog
    2. 7.2. Using the HTML5 Forms APIs
      1. 7.2.1. New form attributes and functions
        1. 7.2.1.1. The placeholder Attribute
        2. 7.2.1.2. The autocomplete Attribute
        3. 7.2.1.3. The autofocus Attribute
        4. 7.2.1.4. The list Attribute and the datalist Element
        5. 7.2.1.5. The min and max Attributes
        6. 7.2.1.6. The step Attribute
        7. 7.2.1.7. The valueAsNumber Function
        8. 7.2.1.8. The required Attribute
      2. 7.2.2. Checking forms with validation
        1. 7.2.2.1.
          1. 7.2.2.1.1. The valueMissing Constraint
          2. 7.2.2.1.2. typeMismatch
          3. 7.2.2.1.3. patternMismatch
          4. 7.2.2.1.4. tooLong
          5. 7.2.2.1.5. rangeUnderflow
          6. 7.2.2.1.6. rangeOverflow
          7. 7.2.2.1.7. stepMismatch
          8. 7.2.2.1.8. customError
        2. 7.2.2.2. Validation Fields and Functions
          1. 7.2.2.2.1. The willValidate Attribute
          2. 7.2.2.2.2. The checkValidity Function
          3. 7.2.2.2.3. The validationMessage Attribute
      3. 7.2.3. Validation feedback
        1. 7.2.3.1. Turning Off Validation
    3. 7.3. Building an Application with HTML5 Forms
      1. 7.3.1. Practical Extras
        1. 7.3.1.1. The Password is: Validation!
    4. 7.4. Summary
  14. 8. Using the HTML5 Web Workers API
    1. 8.1. Browser Support for HTML5 Web Workers
    2. 8.2. Using the HTML5 Web Workers API
      1. 8.2.1. Checking for Browser Support
      2. 8.2.2. Creating HTML5 Web Workers
      3. 8.2.3. Loading and Executing Additional JavaScript
      4. 8.2.4. Communicating with HTML5 Web Workers
    3. 8.3. Coding the Main Page
      1. 8.3.1.
        1. 8.3.1.1. Coding the HTML5 Web Worker JavaScript File
      2. 8.3.2. Handling Errors
      3. 8.3.3. Stopping HTML5 Web Workers
      4. 8.3.4. Using HTML5 Web Workers within HTML5 Web Workers
      5. 8.3.5. Using Timers
      6. 8.3.6. Simple Example Code
    4. 8.4. Building an Application with HTML5 Web Workers
      1. 8.4.1. Coding the blur.js Helper Script
      2. 8.4.2. Coding the blur.html Application Page
      3. 8.4.3. Coding the blurWorker.js Web Worker Script
      4. 8.4.4. Communicating with the Web Workers
      5. 8.4.5. The Application in Action
      6. 8.4.6. Example Code
    5. 8.5. Summary
  15. 9. Using the HTML5 Web Storage API
    1. 9.1. Overview of HTML5 Web Storage
    2. 9.2. Browser Support for HTML5 Web Storage
    3. 9.3. Using the HTML5 Web Storage API
      1. 9.3.1. Checking for Browser Support
      2. 9.3.2. Setting and Retrieving Values
      3. 9.3.3. Plugging Data Leaks
      4. 9.3.4. Local Versus Session Storage
      5. 9.3.5. Other Web Storage API Attributes and Functions
      6. 9.3.6. Communicating Web Storage Updates
      7. 9.3.7. Exploring Web Storage
    4. 9.4. Building an Application with HTML5 Web Storage
    5. 9.5. The Future of Browser Database Storage
    6. 9.6. Practical Extras
      1. 9.6.1. JSON Object Storage
      2. 9.6.2. A Window into Sharing
    7. 9.7. Summary
  16. 10. Creating HTML5 Offline Web Applications
    1. 10.1. Overview of HTML5 Offline Web Applications
      1. 10.1.1. Browser Support for HTML5 Offline Web Applications
    2. 10.2. Using the HTML5 Offline Web Application API
      1. 10.2.1. Checking for Browser Support
      2. 10.2.2. Creating a Simple Offline Application
      3. 10.2.3. Going Offline
      4. 10.2.4. Manifest Files
      5. 10.2.5. The applicationCache API
    3. 10.3. Building an Application with HTML5 Offline Web Applications
      1. 10.3.1. Creating a Manifest File for the Application Resources
      2. 10.3.2. Creating the HTML Structure and CSS of the UI
      3. 10.3.3. Creating the Offline JavaScript
      4. 10.3.4. Check for ApplicationCache Support
      5. 10.3.5. Adding the Update Button Handler
      6. 10.3.6. Add Geolocation Tracking Code
      7. 10.3.7. Adding Storage Code
      8. 10.3.8. Adding Offline Event Handling
    4. 10.4. Summary
  17. 11. The Future of HTML5
    1. 11.1. Browser Support for HTML5
    2. 11.2. HTML Evolves
      1. 11.2.1. WebGL
        1. 11.2.1.1. HTML in Three Dimensions
        2. 11.2.1.2. 3D Shaders
      2. 11.2.2. Devices
      3. 11.2.3. Audio Data API
      4. 11.2.4. Video Improvements
      5. 11.2.5. Touchscreen Device Events
        1. 11.2.5.1. Orientation
        2. 11.2.5.2. Gestures
        3. 11.2.5.3. Touches
      6. 11.2.6. Peer-to-Peer Networking
      7. 11.2.7. Ultimate Direction
    3. 11.3. Summary

Product information

  • Title: Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development
  • Author(s):
  • Release date: August 2010
  • Publisher(s): Apress
  • ISBN: 9781430227908