HTML5 Solutions: Essential Techniques for HTML5 Developers

HTML5 Solutions: Essential Techniques for HTML5 Developers

Released June 2011
Publisher(s): Apress
ISBN: 9781430233862

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 brings the biggest changes that HTML has seen in years. Web designers and developers now have a whole host of new techniques up their sleeves, from displaying video and audio natively in HTML, to creating realtime graphics directly onto a web page without the need for a plugin. But all of these new technologies bring more tags to learn and more avenues for things to go wrong. HTML5 Solutions provides a collection of solutions to all of the most common HTML5 problems. Every solution contains sample code that is production ready and can be applied to any project.

What you'll learn

Real-world solutions for everyday HTML development, saving hours of frustration. Problems covered include:

  • Sending Multi-bit rate videos to different devices

  • Creating custom video components

  • Programming a custom video controller

  • Designing a canvas with custom gradients

  • Capturing and drawing images

  • Storing data offline using the Web SQL Databases

  • Dragging data from the desktop into the browser

  • Creating HTML5 Web Sockets

Who this book is for

Web developers and designers wanting practical advice on making HTML5 sites work.

Table of contents

  1. Copyright
  2. Credits
  3. About the Authors
  4. About the Technical Reviewer
  5. About the Cover Image Artist
  6. Acknowledgments
  7. Introduction
    1. Who is this book for?
    2. Conventions used in this book
    3. What you need
    4. Questions and Contacts
  8. 1. HTML5 Page Structures
    1. 1.1. Solution 1-1: Creating a DOCTYPE in HTML5
      1. 1.1.1. What's involved
      2. 1.1.2. How to build it
      3. 1.1.3. Expert tips
    2. 1.2. Solution 1-2: Creating a character encoding declaration in HTML5
      1. 1.2.1. What's involved
      2. 1.2.2. How to build it
      3. 1.2.3. Expert tips
    3. 1.3. Solution 1-3: Dividing a document into sections
      1. 1.3.1. What's involved
      2. 1.3.2. How to build it
      3. 1.3.3. Expert tips
    4. 1.4. Solution 1-4: Making parts of the document distributable
      1. 1.4.1. What's involved
      2. 1.4.2. How to build it
      3. 1.4.3. Expert tips
    5. 1.5. Solution 1-5: Creating an aside
      1. 1.5.1. What's involved
      2. 1.5.2. How to build it
      3. 1.5.3. Expert tips
    6. 1.6. Solution 1-6: Creating a header
      1. 1.6.1. What's involved
      2. 1.6.2. How to build it
      3. 1.6.3. Expert tips
    7. 1.7. Solution 1-7: Grouping <h1> to <h6> elements
      1. 1.7.1. What's involved
      2. 1.7.2. How to build it
      3. 1.7.3. Expert tips
    8. 1.8. Solution 1-8: Creating a footer
      1. 1.8.1. What's involved
      2. 1.8.2. How to build it
      3. 1.8.3. Expert tips
    9. 1.9. Solution 1-9: Creating navigation in an HTML5 document
      1. 1.9.1. What's involved
      2. 1.9.2. How to build it
      3. 1.9.3. Expert tips
    10. 1.10. Solution 1-10: Inserting figures
      1. 1.10.1. What's involved
      2. 1.10.2. How to build it
      3. 1.10.3. Expert tips
    11. 1.11. Solution 1-11: Browser compatibility
      1. 1.11.1. What's involved
      2. 1.11.2. How to build it
      3. 1.11.3. Expert tips
    12. 1.12. Summary
  9. 2. HTML5 Markup
    1. 2.1. Solution 2-1: Using the <hr> tag in HTML5
      1. 2.1.1. What's involved
      2. 2.1.2. How to build it
      3. 2.1.3. Expert tips
    2. 2.2. Solution 2-2: Using the <iFrame> tag
      1. 2.2.1. What's involved
      2. 2.2.2. How to build it
      3. 2.2.3. Expert tips
    3. 2.3. Solution 2-3: Embedding media into a page
      1. 2.3.1. What's involved
      2. 2.3.2. How to build it
      3. 2.3.3. Expert tips
    4. 2.4. Solution 2-4: Using the <area> tag
      1. 2.4.1. What's involved
      2. 2.4.2. How to build it
      3. 2.4.3. Expert tips
    5. 2.5. Summary
  10. 3. HTML5 Structural and Semantic Elements
    1. 3.1. Understanding microdata
    2. 3.2. Solution 3-1: Using the itemprop and itemscope attributes
      1. 3.2.1. What's involved
      2. 3.2.2. How to build it
      3. 3.2.3. Expert tips
    3. 3.3. Solution 3-2: Creating a custom vocabulary
      1. 3.3.1. What's involved
      2. 3.3.2. How to build it
      3. 3.3.3. Expert tips
    4. 3.4. Solution 3-3: Understanding link types and relations
      1. 3.4.1. What's involved
      2. 3.4.2. How to build it
      3. 3.4.3. Expert tips
    5. 3.5. Solution 3-4: The header and hgroup elements
      1. 3.5.1. What's involved
      2. 3.5.2. How to build it
    6. 3.6. Solution 3-5: Connecting images with their captions
      1. 3.6.1. What's involved
      2. 3.6.2. How to build it
    7. 3.7. Solution 3-6: Adding tangent content
      1. 3.7.1. What's involved
      2. 3.7.2. How to build it
    8. 3.8. Summary
  11. 4. HTML5 Forms
    1. 4.1. Understanding the new input types
    2. 4.2. Solution 4-1: Using the e-mail input type
      1. 4.2.1. What's involved
      2. 4.2.2. How to build it
      3. 4.2.3. Expert tips
    3. 4.3. Solution 4-2: Using the URL input type
      1. 4.3.1. What's involved
      2. 4.3.2. How to build it
    4. 4.4. Solution 4-3: Using a spinner control for numbers
      1. 4.4.1. What's involved
      2. 4.4.2. How to build it
      3. 4.4.3. Expert tips
    5. 4.5. Solution 4-4: Adding a slider to your form with the range input type
      1. 4.5.1. What's involved
      2. 4.5.2. How to build it
      3. 4.5.3. Expert tips
    6. 4.6. Solution 4-5: Sending multiple files
      1. 4.6.1. What's involved
      2. 4.6.2. How to build it
      3. 4.6.3. Expert tips
    7. 4.7. Solution 4-6: Creating a suggest-like autocomplete with the data list component
      1. 4.7.1. What's involved
      2. 4.7.2. How to build it
      3. 4.7.3. Expert tips
    8. 4.8. Solution 4-7: Validating form controls
      1. 4.8.1. What's involved
      2. 4.8.2. How to build it
      3. 4.8.3. Expert tips
    9. 4.9. Solution 4-8: Creating custom input types using regular expressions
      1. 4.9.1. What's involved
      2. 4.9.2. How to build it
      3. 4.9.3. Expert tips
    10. 4.10. Solution 4-9: Setting placeholder text in an input field
      1. 4.10.1. What's involved
      2. 4.10.2. How to build it
      3. 4.10.3. Expert tips
    11. 4.11. Solution 4-10: Creating date and time controls
      1. 4.11.1. What's involved
      2. 4.11.2. How to build it
    12. 4.12. Summary
  12. 5. HTML5 Media Elements: Audio and Video
    1. 5.1. Solution 5-1: Embedding a video in a web page
      1. 5.1.1. What's involved
      2. 5.1.2. How to build it
      3. 5.1.3. Expert tips
    2. 5.2. Solution 5-2: Detecting video support across browsers
      1. 5.2.1. What's involved
      2. 5.2.2. How to build it
      3. 5.2.3. Expert tips
    3. 5.3. Solution 5-3: Creating a custom video controller
      1. 5.3.1. What's involved
      2. 5.3.2. How to build it
      3. 5.3.3. Expert tips
    4. 5.4. Solution 5-4: Preloading a video
      1. 5.4.1. What's involved
      2. 5.4.2. How to build it
      3. 5.4.3. Expert tips
    5. 5.5. Solution 5-5: Creating a custom seek bar for a video
      1. 5.5.1. What's involved
      2. 5.5.2. How to build it
      3. 5.5.3. Expert tips
    6. 5.6. Solution 5-6: Using multiple source video elements
      1. 5.6.1. What's involved
      2. 5.6.2. How to build it
      3. 5.6.3. Expert tips
    7. 5.7. Solution 5-7: Opening a video in full screen
      1. 5.7.1. What's involved
      2. 5.7.2. How to build it
      3. 5.7.3. Expert tips
    8. 5.8. Solution 5-8: Applying a mask to a video
      1. 5.8.1. What's involved
      2. 5.8.2. How to build it
      3. 5.8.3. Expert tips
    9. 5.9. Solution 5-9: Using the audio element
      1. 5.9.1. What's involved
      2. 5.9.2. How to build it
    10. 5.10. Summary
  13. 6. HTML5 Drawing APIs
    1. 6.1. Solution 6-1: How to draw with HTML5 using the canvas element's drawing API
      1. 6.1.1. What's involved
      2. 6.1.2. How to build it
      3. 6.1.3. Expert tips
    2. 6.2. Solution 6-2: Using paths and coordinates
      1. 6.2.1. What's involved
        1. 6.2.1.1. The canvas coordinates system
        2. 6.2.1.2. Drawing paths
        3. 6.2.1.3. Setting styles for your shapes
          1. 6.2.1.3.1. Line properties and styles
      2. 6.2.2. How to build it
      3. 6.2.3. Expert tips
    3. 6.3. Solution 6-3: Drawing shapes: rectangles and circles
      1. 6.3.1. What's involved
        1. 6.3.1.1. Drawing rectangles
        2. 6.3.1.2. Drawing circles
      2. 6.3.2. How to build it
      3. 6.3.3. Expert tips
    4. 6.4. Solution 6-4: Filling shapes with solid colors
      1. 6.4.1. What s involved
        1. 6.4.1.1. Setting the fillStyle property
        2. 6.4.1.2. Blending colors
        3. 6.4.1.3. Filling strokes
      2. 6.4.2. How to build it
      3. 6.4.3. Expert tips
    5. 6.5. Solution 6-5: Using gradients to fill shapes
      1. 6.5.1. What's involved
        1. 6.5.1.1. Using a linear gradient
        2. 6.5.1.2. Using a radial gradient
        3. 6.5.1.3. Filling strokes with gradient
      2. 6.5.2. How to build it
    6. 6.6. Solution 6-6: Drawing texts in a canvas
      1. 6.6.1. What's involved
        1. 6.6.1.1. Font attributes
        2. 6.6.1.2. Aligning text attributes
        3. 6.6.1.3. The text baseline attributes
      2. 6.6.2. How to build it
      3. 6.6.3. Expert tips
    7. 6.7. Solution 6-7: Working with relative font sizes to draw text on a canvas
      1. 6.7.1. What's involved
        1. 6.7.1.1. Font-size, em, and relative text content
      2. 6.7.2. How to build it
      3. 6.7.3. Expert tips
    8. 6.8. Solution 6-8: Saving a shape as a PNG file
      1. 6.8.1. What's involved
      2. 6.8.2. How to build it
      3. 6.8.3. Expert tips
    9. 6.9. Summary
  14. 7. HTML5 Canvas
    1. 7.1. Solution 7-1: Understanding the canvas APIs
      1. 7.1.1. What's involved
      2. 7.1.2. How to build it
      3. 7.1.3. Expert tips
    2. 7.2. Solution 7-2: Detecting the canvas and canvas text support
      1. 7.2.1. What's involved
      2. 7.2.2. How to build it
      3. 7.2.3. Expert tips
    3. 7.3. Solution 7-3: Understanding the standard screen-based coordinate system and canvas transformations
      1. 7.3.1. What's involved
      2. 7.3.2. How to build it
      3. 7.3.3. Expert tips
    4. 7.4. Solution 7-4: Pixel manipulations
      1. 7.4.1. What's involved
      2. 7.4.2. How to build it
      3. 7.4.3. Expert tips
    5. 7.5. Solution 7-5: Applying shadows and blurring
      1. 7.5.1. What's involved
      2. 7.5.2. How to build it
      3. 7.5.3. Expert tips
    6. 7.6. Solution 7-6: Animating canvas
      1. 7.6.1. What's involved
      2. 7.6.2. How to build it
      3. 7.6.3. Expert tips
    7. 7.7. Summary
  15. 8. HTML5 Communication APIs
    1. 8.1. Understanding the postMessage API
    2. 8.2. Securing the postMessage communication
    3. 8.3. Solution 8-1: Checking for postMessage API browser support
      1. 8.3.1. What's involved
      2. 8.3.2. How to build it
    4. 8.4. Cross-documents messaging and CORS
    5. 8.5. Solution 8-2: Sending messages between windows and iframes
      1. 8.5.1. What's involved
      2. 8.5.2. How to build it
    6. 8.6. Solution 8-3: Using Server-Event technologies to write real-time web applications
      1. 8.6.1. What's involved
      2. 8.6.2. How to build it
      3. 8.6.3. Expert tips
    7. 8.7. Solution 8-4: Running code in different browsing contexts using message channels
      1. 8.7.1. What's involved
      2. 8.7.2. How to build it
    8. 8.8. Solution 8-5: Uploading files using the XMLHttpRequest Level 2
      1. 8.8.1. What's involved
      2. 8.8.2. How to build it
      3. 8.8.3. Expert tips
    9. 8.9. Solution 8-6: Checking for XMLHttpRequest level 2 cross-origin browser support
      1. 8.9.1. What's involved
      2. 8.9.2. How to build it
      3. 8.9.3. Expert tips
    10. 8.10. Summary
  16. 9. HTML5 WebSocket
    1. 9.1. Solution 9-1: Checking for WebSocket browser support
      1. 9.1.1. What's involved
      2. 9.1.2. How to build it
      3. 9.1.3. Expert tips
    2. 9.2. Solution 9-2: Establishing a WebSocket connection
      1. 9.2.1. What's involved
      2. 9.2.2. How to build it
      3. 9.2.3. Expert Tips
    3. 9.3. Solution 9-3: Handling WebSocket events
      1. 9.3.1. What's involved
      2. 9.3.2. How to build it
    4. 9.4. Solution 9-4: Using a WebSocket server with the WebSocket API
      1. 9.4.1. What's involved
      2. 9.4.2. How to build it
      3. 9.4.3. Expert tips
    5. 9.5. Summary
  17. 10. HTML5 Geolocation API
    1. 10.1. Understanding the Geolocation API
    2. 10.2. Solution 10-1: Using the navigator object
      1. 10.2.1. What's involved
      2. 10.2.2. How to build it
    3. 10.3. Solution 10-2: Getting the current position
      1. 10.3.1. What's involved
      2. 10.3.2. How to build it
      3. 10.3.3. Expert tips
    4. 10.4. Solution 10-3: Using the position object
      1. 10.4.1. What's involved
      2. 10.4.2. How to build it
      3. 10.4.3. Expert tips
    5. 10.5. Solution 10-4: Handling position errors
      1. 10.5.1. What's involved
      2. 10.5.2. How to build it
    6. 10.6. Solution 10-5: Tracking the user's position
      1. 10.6.1. What's involved
      2. 10.6.2. How to build it
      3. 10.6.3. Expert tips
    7. 10.7. Solution 10-6: Using the geo.js open source library
      1. 10.7.1. What's involved
      2. 10.7.2. How to build it
      3. 10.7.3. Expert tips
    8. 10.8. Summary
  18. 11. HTML5 Local Storage
    1. 11.1. Solution 11-1: Understanding Occasionally-Connected Applications
      1. 11.1.1. What's involved
      2. 11.1.2. How to build it
    2. 11.2. Solution 11-2: Checking for HTML5 storage support
      1. 11.2.1. What's involved
      2. 11.2.2. How to build it
    3. 11.3. Solution 11-3: Declaring a manifest for your page
      1. 11.3.1. What's involved
      2. 11.3.2. How to build it
    4. 11.4. Solution 11-4: Using the ApplicationCache object
      1. 11.4.1. What's involved
      2. 11.4.2. How to build it
    5. 11.5. Solution 11-5: The ApplicationCache events
      1. 11.5.1. What's involved
      2. 11.5.2. How to build it
      3. 11.5.3. Expert tips
    6. 11.6. Solution 11-6: Deleting the local cache
      1. 11.6.1. What's involved
      2. 11.6.2. How to clear the cache
    7. 11.7. Summary
  19. 12. HTML5 Accessibility
    1. 12.1. The four principles of accessibility
    2. 12.2. The purpose of the WCAG
      1. 12.2.1. Level 1: Overview of design principles, guidelines, and success criteria
      2. 12.2.2. Level 2: Technology-specific checklists
      3. 12.2.3. Level 3: Technology-specific application information
        1. 12.2.3.1. General Techniques
    3. 12.3. Solution 12-1: Creating skip links with the nav element
      1. 12.3.1. What's involved
      2. 12.3.2. How to build it
      3. 12.3.3. Expert tips
    4. 12.4. Solution 12-2: Creating accessible tabular data
      1. 12.4.1. What's involved
      2. 12.4.2. How to build it
      3. 12.4.3. Expert tips
    5. 12.5. Solution 12-3: Creating accessible forms
      1. 12.5.1. What's involved
      2. 12.5.2. How to build it
    6. 12.6. Solution 12-4: Captioning and annotations using video elements
      1. 12.6.1. What's involved
      2. 12.6.2. How to build it
      3. 12.6.3. Expert tips
    7. 12.7. Solution 12-5: Using the ARIA project
      1. 12.7.1. What's involved
        1. 12.7.1.1. Silent background interaction with the server
        2. 12.7.1.2. Navigation between states in an application or a widget
        3. 12.7.1.3. Defining roles in the page structure
      2. 12.7.2. How to build it
      3. 12.7.3. Expert tips
    8. 12.8. Summary

Product information

  • Title: HTML5 Solutions: Essential Techniques for HTML5 Developers
  • Author(s):
  • Release date: June 2011
  • Publisher(s): Apress
  • ISBN: 9781430233862