HTML5 Cookbook. O'reilly

by Christopher Schmitt and Kyle Simpson

Solution & Examples for HTML5 Developers

Praise for HTML5 Cookbook
“Written by community experts Emily Lewis, Mark Grabanski, Christina Ramey, Kimberly
Blessing, Christopher Deutsch, Anitra Pavka, Kyle Simpson, and Christopher Schmitt, the
HTML5 Cookbook provides the breadth and depth needed to use tomorrow’s technology today.”
—Estelle Weyl, author of HTML5 & CSS3 for the Real World
“There is so much for frontend designers to remember these days, it’s hard to have it all
memorized. The HTML5 Cookbook is perfect for all of us who know what we are looking
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. There are some excellent books out there if you want exposition and details, but if
you want to roll up your sleeves and get to work, buy this book.”
—Ben Henick, Sitebuilder at-large
“The difficulty with cookbooks has always been getting the right balance between breadth
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
about soon, if not today. Covering semantics, video, audio, Canvas, progressive enhancement
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
“The HTML5 Cookbook is brimming with recipes to show you what you can really do with
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
(or updated) language than by combing through useful examples---something this book is
just chock full of.”
—Aaron Gustafson, author of Adaptive Web Design: Crafting Rich

Experiences with Progressive Enhancement

e-books shop
HTML5 Cookbook

Acknowledgments
We can’t see it, but time is an invisible dimension that surrounds us all.
Yet time is so very interesting in that it can be marked so well.
For instance, it can be marked by the due dates and deadlines of which a book of this
sort is composed. So many, many deadlines.
When writing a book, for example, there is a deadline for the original manuscript.
Then there are the changes to the manuscript provided by many talented people like
editors, technical editors, copyeditors, artists, designers, and so on.
They each give writers their deadlines, marking time.
Editorial deadline, technical edits deadline, copyedits deadline, art deadline, and so on.
Deadlines upon deadlines as time is.
Then there is another way time is marked.
The time away from loved ones.
After writing several books, I now know that writing a book is a Herculean task in that
it keeps time away from other activities, like fun and family—something I wouldn’t wish on anyone.
But then friends aren’t just anyone, right?
Along with my co-lead author, Kyle Simpson, I congratulate and thank the contributors
to the HTML5 Cookbook: Emily Lewis, Kimberly Blessing, Christina Huggins Ramey,
Anitra Pavka, Marc Grabanski, and Christopher Deustch.
Thanks to our technical editors, Shelley Powers, Ben Henick, Dusty Jewett, Molly
Holzschlag, and Helen Oliver, who diligently kept us on our toes.
Our copyeditor, Rachel Head, is a miracle worker, making our respective families proud
by making them think we all are better writers than we probably are.
Many, many thanks to editors Simon St. Laurent and Courtney Nash from O’Reilly,
who helped me stay sane during our time on this book.
Every once in a while I tried to count up how many total years of web development
experience were brought to this project by all the talented writers and editors who
contributed, but I got a bit too exhausted just thinking about it.
I’m not sure if all these talented, beautiful people knew what they signed up for when
I first talked to them about the HTML5 Cookbook, but I’m happy with what we were
able to make together. And I thank them for that.
Finally, thanks to my family and loved ones who have been there for me throughout
my obsession with web design and development. Let’s continue to share good times together.
Christopher Schmitt
I would like to thank my wonderful and patient wife, Christen, for letting me be part
of this project. I also want to thank my parents for their support and encouragement
in all my various endeavors. Lastly, to my new son, Ethan, I hope someday you are
happily coding along in HTML12 and you get to look back on this old HTML5 book
with nostalgia. Just remember, I had to walk to school in the snow, uphill, both ways...
Kyle Simpson
Thank you to Christopher Schmitt for giving me the opportunity to contribute to this
book. I’d also like to thank Rey Bango, who recommended me to Christopher and who
has given me so many opportunities to write about what I love. Following the pimpage
chain, I must thank Christian Heillman for recommending me to Rey in the first place
and for always encouraging me to share what I know.
To my love, Jason, thank you for supporting me in everything I do and reminding me
that new opportunities are never as scary as they first seem. Thank you, also, for reading
everything I write and making sure I don’t sound stupid. You make my life bigger and
better than I ever dreamed.
To my other unofficial editors, Brian Arnold and Ian Pitts, thanks for taking the time
over the months (and years) to read my work and offer critical feedback. You guys are
not only brilliant developers, but you are great friends.
Thanks to my sister, Erin, for reminding me who I am and what is important in this
world. And to my sista, Erin Shutes, thank you for 20 years of support through the best
and worst of times.
To the readers of my blog, my social-network friends, and everyone I’ve met at conferences,
thanks for being interested in what I have to share and for sharing back. You
remind me every day why I love what I do.
Emily Lewis
I would like to thank my friend Christopher Schmitt for inviting me to contribute to
this book; my students at Bryn Mawr College and my colleagues at Comcast Interactive
Media for constantly challenging me; my mother and my great-aunt for their encouragement;
and my cat, Punky, for her support.
Kimberly Blessing
Thank you, Molly Holzschlag and Cameron Barrett, for encouraging me to share my
geeky learnings. (Of course) thank you, Christopher Schmitt, for convincing me to contribute to this
book. Thank you, Matt May, for your feedback as I considered what to write for this book.
I’d also like to thank all of the other wonderful people I’ve met at web conferences and
networking events over the years. You are too many to name. Y’all inspire me to learn and laugh.
Thank you, Mom and Dad, for… well, everything.
I also want to thank our readers—you—for caring enough about your art to hone your
skills. Your curiosity, knowledge, and empathy will advance the Web.
Anitra Pavka
A hearty thanks to Christopher Schmitt for continually providing me with opportunities
for expanding my knowledge of web design. You’ve pushed me to develop my
writing and coding skills far beyond my modest ambitions.
Thank you, my sweet husband, Paul Ramey, for providing support and patience while
I research, code, and write. And thank you for providing welcome distractions when
I’ve worked too long!
Christina Huggins Ramey
Thanks to Christopher Deutsch for taking the geolocation chapter content ideas and running with them.
Marc Grabanski

Preface

We know you want to learn about all the wonderful and exciting developments that
come with HTML5, like web forms, canvas, and local storage. But we also know the
importance of establishing a good foundation for advanced development. Let’s first put
HTML5 into a bit of context.

What Is HTML5?
HTML5 is a specification (see http://dev.w3.org/html5/spec/) under development by the
World Wide Web Consortium (W3C). As we write this book, the HTML5 specification
is officially a Working Draft, which means it may go through additional revisions before
becoming a recommendation. The recommendation will then go through a formal
approval process, resulting in a specific version of the markup language.
Meanwhile, independent from the W3C, the Web Hypertext Application Technology
Working Group (WHATWG) also pursues development of the HTML specification
(see http://whatwg.org/html).
Notice I didn’t mention a version number. That’s because the WHATWG recently
decided to change tack and drop versioning entirely. A “living standard” is now how
WHATWG defines HTML (see http://blog.whatwg.org/html-is-the-new-html5). This
new development model means that HTML is defined according to how it’s evolving,
not as a version tied to features in a “snapshot” of time.

Feature Support, Not Browser Versions
What does this mean for us designers and developers? It could lead to a greater focus
on implementing individual features, rather than a full specification: no more “this is
an HTML5 site,” but instead “this site features web sockets and geolocation.”
Then again, some in the industry argue that designers and developers need stable specifications
to refer to in order to validate and maintain their sites effectively. Plus, having
a stable “what is true now” version makes authoring and teaching more manageable.
In the end, it could all just be fodder for yet another geek debate (my money’s on Batman
over Spider-Man and Peter Davison as the best Doctor), but we mention it mostly as a
point of clarification that we have two development models and a reminder of the rather
interesting politics involved in the specification processes.

Five Alive
Even though WHATWG sees “HTML” as a living document that needs no version
number, in this book “HTML5” is our preferred term. Why is that? For the purposes
of your daily design/development life, understanding and implementing features is
what’s important.

Since the whole point of the Cookbook series is to provide you with practical recipes
you can use today, let’s talk support for HTML5. Generally speaking, all of today’s
latest browsers support HTML5 to some degree or another. But, like its predecessors,
HTML5 doesn’t have that 100% browser support that we sadly suspect we’ll always be dreaming of.

Enter JavaScript
While HTML5 markup has plenty of exciting new features, as you’ll see in this book,
it also involves—more than ever before—a host of related web technologies, many of
which rely on rich JavaScript APIs to expose themselves to your web pages.
In an effort to give you a full taste of what HTML5 and these related technologies have
to offer, we will not shy away from the JavaScript details. This book will, at times, take
a very heavy JavaScript perspective, as we discuss some of those advanced functionalities
that various HTML5 APIs make available to us.

If JavaScript is a scary or unfamiliar topic for you, now’s the perfect time to brush up
on those skills—if you’re serious about using HTML5, you’ll almost certainly want to
get comfortable with leveraging at least some of what JavaScript has to offer.
It’s also important to note that many of these APIs are still evolving, even as this book
is being written, edited, revised, and published. Some are more complete than others,
and thus are likely to be more stable. Other APIs are still in a state of frequent
fluctuation, so you should keep that in mind as you decide how you will employ
HTML5 technologies in your pages.

What’s in This Book
While we may not provide a full list of all the features of HTML5 and browser support
for them—depending on the recipe—we do discuss the support for each of the individual
elements and implementations covered throughout this book (for tips on finding
out what browsers currently support what parts of the specification, see Recipe 2.3,
“Understanding Browser Support for HTML5”).

We also cover workarounds to implement when browser support is patchy, and why
you may or may not need them. This way, you can decide for yourself if a particular
feature works for you, your client, or your employer.
And that’s our value to you, dear reader. Using HTML5 isn’t an absolute proposition.
You don’t have to use embedded content or web sockets to use the new structural
elements, and vice versa. You don’t even have to use the new structural elements to
have a valid HTML5 document; you just need the Document Type Definition.
Pick what works for you and leave the rest. Or, rather, experiment with the rest to see
if you may find a practical implementation for yourself or your projects.
Our industry is like HTML in a lot of ways, and probably always will be: it’s constantly changing.

And we, as the good web designers and developers that we are, have to continue staying
on top of those latest changes and developments. We have to continue to educate our
clients and employers about the benefits and compromises. We have to experiment
with moving targets and constantly grow our skills.
Honestly, though, that all sounds pretty good to us. So, let’s start coding some HTML5, shall we?

Audience
While it would probably suffice to say that this book is for any person interested in
learning about HTML5, it was particularly designed and developed for web developers
who want to transition from XHTML or HTML4 into new technologies.
The chapters toward the end of the book are geared more for developers who want to
utilize some of the JavaScript APIs found in HTML5.

Assumptions This Book Makes
You don’t want a rundown of the HTML5 specification. Rather, you want to make
things work as they relate to your job. In each of this book’s recipes, the Solution gives
you the quick and dirty answer to the problem presented. Check out the Discussion
for greater coverage.

You could start from the beginning of the book and make your way through it in a
linear fashion without feeling lost. With one or two exceptions, the chapters’ recipes
are set up so that they build off of each other. One of the great things about the books
in the Cookbook series, though, is that they’re here to help you out when you find
yourself with a specific problem—in this case, an HTML5-related problem. Simply
crack open the book or the ebook on your tablet and find the right recipe for a practical,
usable solution.

And one more thing: we assume that geolocation will forever be linked to HTML5.
Even though we know, yes, that W3C Geolocation API Working Draft is separate from
the HTML5 specification. That hasn’t stopped people from writing blog posts,
tutorials, and even books about putting geolocation into the same conversation as
HTML5. And since it’s such a great, serviceable API right now, we felt we had to include
it in a book about HTML5 (see Chapter 8). If it troubles you, think of Geolocation and
other technologies as “HTML5 and friends.” However, this book probably isn’t for you
if you require hyper-technical hierarchies to be adhered to in order to obtain practical knowledge.

Conventions Used in This Book
The following typographical conventions are used in this book:
Italic
Indicates new terms, URLs, email addresses, filenames, and file extensions.
Constant width
Used for program listings, as well as within paragraphs to refer to program elements
such as variable or function names, databases, data types, environment variables,
statements, and keywords.
Constant width bold
Shows commands or other text that should be typed literally by the user.
Constant width italic
Shows text that should be replaced with user-supplied values or by values determined
by context.


Screenshot

e-books shop

Purchase Now !
Just with Paypal



Product details
 Price
 File Size
 21,362 KB
 Pages
  284 p
 File Type
  PDF format
 ISBN
 978-1-449-39679-4
 Copyright
 2012 Christopher Schmitt and Kyle Simpson 


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
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
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
Appendix: HTML5 Resources . . .  . . . . 249
Index . . . . .. . . . 251

  ●▬▬▬▬▬❂❂❂▬▬▬▬▬●
●▬▬❂❂▬▬●
●▬❂▬●

●❂●
═════● ●═════

Previous Post Next Post