HTML5 Cookbook by Schmitt, Christopher -- Read -- Imperial Library of Trantor

Index

HTML5 Cookbook

SPECIAL OFFER: Upgrade this ebook with O’Reilly Preface

What Is HTML5?

Feature Support, Not Browser Versions Five Alive Enter JavaScript

What’s in This Book Audience Assumptions This Book Makes Conventions Used in This Book Using Code Examples Safari® Books Online How to Contact Us Acknowledgments

1. Fundamental Syntax and Semantics

Introduction 1.1. Specifying the DOCTYPE

Problem Solution Discussion See Also

1.2. Specifying the Character Set

Problem Solution Discussion

Special characters

See Also

1.3. Specifying the Language

Problem Solution Discussion See Also

1.4. Optimizing <script>s and <link>s

Problem Solution Discussion See Also

1.5. Adding Document Structure with HTML5’s New Elements

Problem Solution Discussion

Structural elements When to use structural elements When to use <div> elements Styling structural elements

See Also

1.6. Choosing Between <article> and <section>

Problem Solution

Discussion See Also

1.7. Checking Your Document Outline

Problem Solution Discussion

Heading levels Implicit sectioning Why is this important?

See Also

1.8. Modifying the Document Outline

Problem Solution Discussion See Also

1.9. Emphasizing Text

Problem Solution Discussion

Redefining <i>

See Also

1.10. Adding Importance to Text

Problem Solution Discussion

Redefining <b>

See Also

1.11. Highlighting Text for Reference

Problem Solution Discussion See Also

1.12. Marking Up Small Print

Problem Solution Discussion See Also

1.13. Defining Acronyms and Abbreviations

Problem Solution Discussion See Also

1.14. Adding Links to Block-Level Content

Problem Solution Discussion See Also

1.15. Marking Up Figures and Captions

Problem Solution Discussion See Also

1.16. Marking Up Dates and Times

Problem Solution Discussion

What about microformats? Publication dates

See Also

1.17. Setting the Stage for Native Expanding and Collapsing

Problem Solution Discussion See Also

1.18. Controlling the Numbering of Your Lists

Problem Solution Discussion

Reversed attribute Value Attribute

See Also

1.19. Hiding Content to Show Later

Problem Solution Discussion See Also

1.20. Making Portions of a Page Editable

Problem Solution Discussion See Also

1.21. Setting the Stage for Native Drag-and-Drop

Problem Solution Discussion See Also

2. Progressive Markup and Techniques

Introduction 2.1. Adding More Semantic Meaning

Problem Solution Discussion See Also

2.2. Picking a Markup Style

Problem Solution Discussion See Also

2.3. Understanding Browser Support for HTML5

Problem Solution Discussion See Also

2.4. Making Internet Explorer Recognize HTML5 Elements

Problem Solution Discussion See Also

2.5. Detecting HTML5 Features with JavaScript

Problem Solution

Using Modernizr

Discussion See Also

2.6. Using HTML5 Boilerplate

Problem Solution

Using HTML5 Boilerplate

Discussion See Also

2.7. Validating HTML5

Problem Solution Discussion See Also

2.8. Mapping HTML5 Elements to ID and Class Names

Problem Solution Discussion See Also

3. Forms

Introduction 3.1. Displaying a Search Input Field

Problem Solution Discussion

Testing browser support

See Also

3.2. Contact Information Input Fields

Problem Solution Discussion

Customizing the default error message

See Also

3.3. Utilizing Date and Time Input Fields

Problem Solution Discussion

Additional features

See Also

3.4. Number Inputs

Problem Solution Discussion

User-friendly input fields Additional features

See Also

3.5. Selecting from a Range of Numbers

Problem Solution Discussion

Additional features

See Also

3.6. Selecting Colors

Problem Solution Discussion See Also

3.7. Creating an Editable Drop-Down

Problem Solution Discussion

A datalist workaround

See Also

3.8. Requiring a Form Field

Problem Solution Discussion See Also

3.9. Autofocusing a Form Field

Problem Solution Discussion See Also

3.10. Displaying Placeholder Text

Problem Solution Discussion See Also

3.11. Disabling Autocomplete

Problem Solution Discussion See Also

3.12. Restricting Values

Problem Solution Discussion See Also

3.13. Making HTML5 Work in Older Browsers

Problem Solution

Example 1: Supporting the autofocus attribute Example 2: Supporting the placeholder attribute Example 3: Supporting the date input type

Discussion See Also

3.14. Validating Form Data in Older Browsers with JavaScript

Problem Solution Discussion See Also

3.15. Example: Sample Form

Problem Solution Discussion See Also

4. Native Audio

Introduction 4.1. Adding HTML5 Audio

Problem Solution

Multiple audio codecs Integrating multiple sources Preloading the audio

Discussion

Creating fallback content Accessible alternatives Intellectual property rights

See Also

4.2. Manipulating the Audio Stream

Problem Solution Discussion See Also

4.3. Generating <audio> Using JavaScript

Problem Solution Discussion See Also

4.4. Visualizing <audio> Using <canvas>

Problem Solution Discussion See Also

4.5. Sample Design: Custom Audio Player

Problem Solution

Define <audio> and player structure JavaScript API CSS for style

Discussion See Also

5. Native Video

Introduction 5.1. Adding HTML5 Video

Problem Solution

Preloading Fallback content

Discussion

Multiple video codecs Browser support

See Also

5.2. Ensuring Multi-Browser Video Support

Problem Solution Discussion See Also

5.3. Setting Video Dimensions

Problem Solution Discussion See Also

5.4. Displaying a Placeholder Image Before Video Plays

Problem Solution Discussion See Also

5.5. Making Video Loop

Problem Solution Discussion

autoplay

See Also

5.6. Sample Design: Manipulating Video with <canvas>

Problem Solution

Add <video> and <canvas> Generate preview Set preview dimensions Add an event listener Draw previews

Discussion See Also

6. Microdata and Custom Data

Introduction

When to Use Microdata Versus Custom Data

6.1. Adding Microdata to Markup

Problem Solution Discussion See Also

6.2. Using Microdata and Schema.org

Problem Solution Discussion See Also

6.3. Adding Custom Data to Markup

Problem Solution Discussion See Also

6.4. Accessing Custom Data with JavaScript

Problem Solution Discussion See Also

6.5. Manipulating Custom Data

Problem Solution Discussion See Also

6.6. Example: Creating a Map Application Using Custom Data

Problem Solution Discussion

Example: The jQuery data() method

See Also

7. Accessibility

Introduction

The Purpose of Accessibility Accessibility Guidelines

7.1. Writing Appropriate alt Text Descriptions

Problem Solution

Multiple images

Discussion

Null alt attribute Using figcaption

See Also

7.2. Identifying Abbreviations and Acronyms

Problem Solution

Using abbr

Discussion

Styling abbr

See Also

7.3. Identifying Sections of a Page Using ARIA Landmark Roles

Problem Solution

ARIA roles Roles for web apps

Discussion See Also

7.4. Creating More Accessible Navigation Links

Problem Solution Discussion

Purpose of skipping links Hiding skip to main content links

See Also

7.5. Associating Form Fields with Their Labels

Problem Solution

Multiple labels

Discussion See Also

7.6. Grouping Form Fields Logically

Problem Solution Discussion See Also

7.7. Enabling a fieldset Dynamically

Problem Solution Discussion See Also

7.8. Identifying Required Form Fields

Problem Solution

Write out required Using ARIA

Discussion

The required attribute

See Also

7.9. Using ARIA Live Regions to Announce When Dynamic Content Is Updating

Problem Solution

Custom live regions

Discussion See Also

8. Geolocation

Introduction 8.1. Getting Basic Geolocation Data

Problem Solution Discussion See Also

8.2. Getting Basic Geolocation Data with a Fallback

Problem Solution

Google versus MaxMind Coding the solution

Discussion See Also

8.3. Reverse Geocoding an Address with Latitude and Longitude

Problem Solution Discussion See Also

8.4. Converting an Address into Latitude and Longitude

Problem Solution Discussion See Also

8.5. Getting Directions from the Current Location

Problem Solution Discussion See Also

8.6. Example: Starbucks to Starbucks

Problem Solution Discussion See Also

9. <canvas>

Introduction 9.1. Drawing on a <canvas>

Problem Solution

The canvas API

Discussion

Vectors versus bitmaps

See Also

9.2. Using Transparency

Problem Solution Discussion See Also

9.3. Setting <canvas> Dimensions

Problem Solution Discussion See Also

9.4. Using Gradients, Patterns, and Line Styles

Problem Solution Discussion See Also

9.5. Pulling External Images into a <canvas> Drawing

Problem Solution Discussion See Also

9.6. Setting Color Transformations

Problem Solution Discussion See Also

9.7. Working with Geometric Transformations

Problem Solution Discussion See Also

9.8. Placing Text on a <canvas>

Problem Solution Discussion See Also

9.9. Clipping <canvas> Drawings

Problem Solution Discussion See Also

9.10. Animating <canvas> Drawings

Problem Solution Discussion See Also

9.11. Drawing Graphs with <canvas>

Problem Solution Discussion See Also

9.12. Saving a <canvas> Drawing to a File

Problem Solution Discussion See Also

10. Advanced HTML5 JavaScript

Introduction 10.1. Local Storage

Problem Solution Discussion See Also

10.2. Application Caching

Problem Solution

Updating the appcache

Discussion See Also

10.3. Drag and Drop

Problem Solution Discussion See Also

10.4. Web Workers

Problem Solution Discussion See Also

10.5. Web Sockets

Problem Solution Discussion See Also

10.6. History

Problem Solution Discussion See Also

10.7. Local Files

Problem Solution Discussion See Also

A. HTML5 Resources Index About the Authors Colophon SPECIAL OFFER: Upgrade this ebook with O’Reilly

← Prev
Back
Next →

← Prev
Back
Next →