HTML5 Cookbook (O'Reilly Cookbooks)

284 Pages·2012·20.86 MB·English

by  Christopher Schmitt

,HTML5Cookbook_praise_page.recover.12295 Page i Wednesday, November 2, 2011 10:06 AM
Praise forHTML5 Cookbook
“WrittenbycommunityexpertsEmilyLewis,MarkGrabanski,ChristinaRamey,Kimberly
Blessing,ChristopherDeutsch,AnitraPavka,KyleSimpson,andChristopherSchmitt,the
HTML5Cookbookprovidesthe breadthanddepthneededtousetomorrow’stechnology
today.”
—Estelle Weyl, author ofHTML5 & CSS3 for the Real World
“There is so much for frontend designers to remember these days, it’s hard to have it all
memorized.TheHTML5Cookbookisperfectforallofuswhoknowwhatwearelooking
for and need a quick and reliable way to find it.”
—Chris Coyier, CSS-Tricks.com
“If you’re ready to learn HTML5 that works today, the HTML5 Cookbook is the book to
buy. Therearesomeexcellentbooksoutthereifyouwantexpositionanddetails,butif
you want to roll up your sleeves and get to work, buy this book.”
—Ben Henick, Sitebuilder at-large
“Thedifficultywithcookbookshasalwaysbeengettingtherightbalancebetweenbreadth
and depth. I am impressed with the HTML5 Cookbook. Schmitt and Simpson have got
this balance just right, providing enough depth on essential topics to give you what you
need for implementing HTML5 features on your sites and apps, while also going further
and exploring some interesting peripheral and nascent topics that you’ll want to learn
aboutsoon,ifnottoday.Coveringsemantics,video,audio,Canvas,progressiveenhance-
ment and backwards compatibility, forms, accessibility, geolocation and more, you’re
bound to get a lot out of this book whatever web disciplines you practice.
—Chris Mills, Open Standards Evangelist, Opera Software
,HTML5Cookbook_praise_page.recover.12295 Page ii Wednesday, November 2, 2011 10:06 AM
“TheHTML5Cookbookisbrimmingwithrecipestoshowyouwhatyoucanreallydowith
HTML5, plus a soupçon of JavaScript. Fill your studio with the aroma of drawings,
animations, geolocation, audio/video, form fields, and semantic elements.”
—Helen Oliver, Research Assistant,
Design Engineering Group at Imperial College London
“Great overview of the most important HTML5 technologies, with tons of code to match
it! An everyday companion for your developing needs.”
—Robert Nyman, Technical Evangelist,Mozilla
“The HTML5 Cookbook is not only a fantastic resource for creative problem solving with
HTML5, it is also a great learning tool. There’s no easier way to get familiar with a new
(orupdated)languagethanbycombingthroughusefulexamples---somethingthisbookis
just chock full of.”
—Aaron Gustafson, author ofAdaptive Web Design: Crafting Rich
Experiences with Progressive Enhancement
HTML5 Cookbook
Christopher Schmitt and Kyle Simpson
Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo
HTML5 Cookbook
by Christopher Schmitt and Kyle Simpson
Copyright © 2012 Christopher Schmitt and Kyle Simpson. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions
are also available for most titles (http://my.safaribooksonline.com). For more information, contact our
corporate/institutional sales department: [phone] or [email protected].
Editors: Simon St. Laurent and Courtney Nash Indexer: Lucie Haskins
Production Editor: Jasmine Perez Cover Designer: Karen Montgomery
Copyeditor: Rachel Head Interior Designer: David Futato
Proofreader: Linley Dolby Illustrator: Robert Romano
November 2011: First Edition.
Revision History for the First Edition:
2011-11-04 First release
See http://oreilly.com/catalog/errata.csp?isbn=9781449396794 for release details.
Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of
O’Reilly Media, Inc. HTML5 Cookbook, the image of a common kestrel, and related trade dress are
trademarks of O’Reilly Media, Inc.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a
trademark claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and authors assume
no responsibility for errors or omissions, or for damages resulting from the use of the information con-
tained herein.
ISBN: 978-1-449-39679-4
[LSI]
1320420716
Table of Contents
Preface ..................................................................... ix
1. Fundamental Syntax and Semantics ....................................... 1
1.1 Specifying the DOCTYPE 1
1.2 Specifying the Character Set 2
1.3 Specifying the Language 4
1.4 Optimizing <script>s and <link>s 4
1.5 Adding Document Structure with HTML5’s New Elements 5
1.6 Choosing Between <article> and <section> 9
1.7 Checking Your Document Outline 11
1.8 Modifying the Document Outline 14
1.9 Emphasizing Text 14
1.10 Adding Importance to Text 16
1.11 Highlighting Text for Reference 17
1.12 Marking Up Small Print 18
1.13 Defining Acronyms and Abbreviations 19
1.14 Adding Links to Block-Level Content 20
1.15 Marking Up Figures and Captions 20
1.16 Marking Up Dates and Times 21
1.17 Setting the Stage for Native Expanding and Collapsing 23
1.18 Controlling the Numbering of Your Lists 25
1.19 Hiding Content to Show Later 27
1.20 Making Portions of a Page Editable 28
1.21 Setting the Stage for Native Drag-and-Drop 29
2. Progressive Markup and Techniques ...................................... 31
2.1 Adding More Semantic Meaning 31
2.2 Picking a Markup Style 33
2.3 Understanding Browser Support for HTML5 34
2.4 Making Internet Explorer Recognize HTML5 Elements 35
2.5 Detecting HTML5 Features with JavaScript 38
v
2.6 Using HTML5 Boilerplate 44
2.7 Validating HTML5 48
2.8 Mapping HTML5 Elements to ID and Class Names 51
3. Forms ................................................................ 55
3.1 Displaying a Search Input Field 55
3.2 Contact Information Input Fields 58
3.3 Utilizing Date and Time Input Fields 62
3.4 Number Inputs 66
3.5 Selecting from a Range of Numbers 69
3.6 Selecting Colors 71
3.7 Creating an Editable Drop-Down 73
3.8 Requiring a Form Field 77
3.9 Autofocusing a Form Field 80
3.10 Displaying Placeholder Text 80
3.11 Disabling Autocomplete 82
3.12 Restricting Values 84
3.13 Making HTML5 Work in Older Browsers 86
3.14 Validating Form Data in Older Browsers with JavaScript 90
3.15 Example: Sample Form 92
4. Native Audio .......................................................... 95
4.1 Adding HTML5 Audio 95
4.2 Manipulating the Audio Stream 100
4.3 Generating <audio> Using JavaScript 102
4.4 Visualizing <audio> Using <canvas> 103
4.5 Sample Design: Custom Audio Player 107
5. Native Video ......................................................... 113
5.1 Adding HTML5 Video 113
5.2 Ensuring Multi-Browser Video Support 117
5.3 Setting Video Dimensions 119
5.4 Displaying a Placeholder Image Before Video Plays 120
5.5 Making Video Loop 122
5.6 Sample Design: Manipulating Video with <canvas> 122
6. Microdata and Custom Data ............................................ 127
6.1 Adding Microdata to Markup 128
6.2 Using Microdata and Schema.org 129
6.3 Adding Custom Data to Markup 131
6.4 Accessing Custom Data with JavaScript 133
6.5 Manipulating Custom Data 134
6.6 Example: Creating a Map Application Using Custom Data 136
vi | Table of Contents
7. Accessibility .......................................................... 139
7.1 Writing Appropriate alt Text Descriptions 141
7.2 Identifying Abbreviations and Acronyms 144
7.3 Identifying Sections of a Page Using ARIA Landmark Roles 146
7.4 Creating More Accessible Navigation Links 149
7.5 Associating Form Fields with Their Labels 151
7.6 Grouping Form Fields Logically 152
7.7 Enabling a fieldset Dynamically 154
7.8 Identifying Required Form Fields 155
7.9 Using ARIA Live Regions to Announce When Dynamic Content Is
Updating 157
8. Geolocation .......................................................... 161
8.1 Getting Basic Geolocation Data 161
8.2 Getting Basic Geolocation Data with a Fallback 164
8.3 Reverse Geocoding an Address with Latitude and Longitude 167
8.4 Converting an Address into Latitude and Longitude 169
8.5 Getting Directions from the Current Location 172
8.6 Example: Starbucks to Starbucks 179
9. <canvas> ........................................................... 185
9.1 Drawing on a <canvas> 186
9.2 Using Transparency 191
9.3 Setting <canvas> Dimensions 195
9.4 Using Gradients, Patterns, and Line Styles 196
9.5 Pulling External Images into a <canvas> Drawing 200
9.6 Setting Color Transformations 203
9.7 Working with Geometric Transformations 204
9.8 Placing Text on a <canvas> 208
9.9 Clipping <canvas> Drawings 210
9.10 Animating <canvas> Drawings 212
9.11 Drawing Graphs with <canvas> 215
9.12 Saving a <canvas> Drawing to a File 217
10. Advanced HTML5 JavaScript ............................................ 219
10.1 Local Storage 220
10.2 Application Caching 223
10.3 Drag and Drop 227
10.4 Web Workers 232
10.5 Web Sockets 236
10.6 History 240
10.7 Local Files 244
Table of Contents | vii
Appendix: HTML5 Resources .................................................. 249
Index ..................................................................... 251
viii | Table of Contents