HTML5: Up and Running

This document was uploaded by one of our users. The uploader already confirmed that they had the permission to publish it. If you are author/publisher or own the copyright of this documents, please report to us by using this DMCA report form.

Simply click on the Download Book button.

Yes, Book downloads on Ebookily are 100% Free.

Sometimes the book is free on Amazon As well, so go ahead and hit "Search on Amazon"

If you don't know about the new features available in HTML5, now's the time to find out. The latest version of this markup language is going to significantly change the way you develop web applications, and this book provides your first real look at HTML5's new elements and attributes.

Even though work on HTML5 is ongoing, browsers such as Safari, Mozilla, Opera, and Chrome already support many of its features -- and browsers for smart phones are even farther ahead, especially iPhone's MobileSafari browser. With HTML5: Up & Running, you'll learn how this new version enables browsers to interact with JavaScript much more easily than before. You'll also learn how HTML5 can help you develop applications that:

  • Display video directly in the browser, without having to rely on plugins
  • Work even when a user is offline, by taking advantage of HTML5's persistent storage
  • Offer a drawing canvas for dynamically generated 2-D graphics

This concise guide is the most complete and authoritative book you'll find on the subject. Author Mark Pilgrim writes the weekly digest for the HTML5 Working Group, and represents Google at conferences on HTML5's capabilities. Stay ahead of the curve. Order a copy of this book today.

Five Things You Should Know About HTML5 by Mark Pilgrim
1. It’s not one big thing. You may well ask: “How can I start using HTML5 if older browsers don’t support it?” But the question itself is misleading. HTML5 is not one big thing; it is a collection of individual features. So you can’t detect “HTML5 support,” because that doesn’t make any sense. But you can detect support for individual features, like canvas, video, or geolocation. You may think of HTML as tags and angle brackets. That’s an important part of it, but it’s not the whole story. The HTML5 specification also defines how those angle brackets interact with JavaScript, through the Document Object Model (DOM). HTML5 doesn’t just define video tag; there is also a corresponding DOM API for video objects in the DOM. You can use this API to detect support for different video formats, play a video, pause, mute audio, track how much of the video has been downloaded, and everything else you need to build a rich user experience around the video tag itself. Chapter 2 and Appendix A will teach you how to properly detect support for each new HTML5 feature.
2. You don’t need to throw anything away. Love it or hate it, you can’t deny that HTML 4 is the most successful markup format ever. HTML5 builds on that success. You don’t need to throw away your existing markup. You don’t need to relearn things you already know. If your web application worked yesterday in HTML 4, it will still work today in HTML5. Period. Now, if you want to improve your web applications, you’ve come to the right place. Here’s a concrete example: HTML5 supports all the form controls from HTML 4, but it also includes new input controls. Some of these are long-overdue additions like sliders and date pickers; others are more subtle. For example, the email input type looks just like a text box, but mobile browsers will customize their onscreen keyboard to make it easier to type email addresses. Older browsers that don’t support the email input type will treat it as a regular text field, and the form still works with no markup changes or scripting hacks. This means you can start improving your web forms today, even if some of your visitors are stuck on IE 6.
Read all the gory details about HTML5 forms in Chapter 9. 3. It’s easy to get started. “Upgrading” to HTML5 can be as simple as changing your doctype. The doctype should already be on the first line of every HTML page. Previous versions of HTML defined a lot of doctypes, and choosing the right one could be tricky. In HTML5, there is only one doctype: !DOCTYPE html Upgrading to the HTML5 doctype won’t break your existing markup, because all the tags defined in HTML 4 are still supported in HTML5. But it will allow you to use -- and validate -- new semantic elements like article, section, header, and footer. You’ll learn all about these new elements in Chapter 3.
4. It already works Whether you want to draw on a canvas, play video, design better forms, or build web applications that work offline, you’ll find that HTML5 is already well-supported. Firefox, Safari, Chrome, Opera, and mobile browsers already support canvas (Chapter 4), video (Chapter 5), geolocation (Chapter 6), local storage (Chapter 7), and more. Google already supports microdata annotations (Chapter 10). Even Microsoft -- rarely known for blazing the trail of standards support -- will be supporting most HTML5 features in the upcoming Internet Explorer 9. Each chapter of this book includes the all-too-familiar browser compatibility charts. But more importantly, each chapter includes a frank discussion of your options if you need to support older browsers. HTML5 features like geolocation (Chapter 6) and video (Chapter 5) were first provided by browser plugins like Gears or Flash. Other features, like canvas (Chapter 4), can be emulated entirely in JavaScript. This book will teach you how to target the native features of modern browsers, without leaving older browsers behind.
5. It’s here to stay. Tim Berners-Lee invented the world wide web in the early 1990s. He later founded the W3C to act as a steward of web standards, which the organization has done for more than 15 years. Here is what the W3C had to say about the future of web standards, in July 2009:
    Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the HTML Working Group, W3C hopes to accelerate the progress of HTML5 and clarify W3C’s position regarding the future of HTML.
HTML5 is here to stay. Let’s dive in.

Author(s): Mark Pilgrim
Edition: 1
Publisher: O'Reilly Media
Year: 2010

Language: English
Pages: 222

Table of Contents......Page 7
Diving In......Page 11
Conventions Used in This Book......Page 12
Safari® Books Online......Page 13
How to Contact Us......Page 14
MIME Types......Page 15
A Long Digression into How Standards Are Made......Page 16
An Unbroken Line......Page 21
A Timeline of HTML Development from 1997 to 2004......Page 23
Everything You Know About XHTML Is Wrong......Page 24
A Competing Vision......Page 25
What Working Group?......Page 26
Back to the W3C......Page 27
Further Reading......Page 28
Detection Techniques......Page 29
Canvas......Page 30
Canvas Text......Page 31
Video......Page 32
Video Formats......Page 33
Local Storage......Page 35
Offline Web Applications......Page 37
Geolocation......Page 38
Input Types......Page 39
Form Autofocus......Page 41
Microdata......Page 42
Further Reading......Page 43
The Doctype......Page 45
The Root Element......Page 47
The Element......Page 48
Character Encoding......Page 49
Friends and (Link) Relations......Page 50
rel = alternate......Page 51
Other link relations in HTML5......Page 52
New Semantic Elements in HTML5......Page 55
A Long Digression into How Browsers Handle Unknown Elements......Page 56
Headers......Page 59
Articles......Page 61
Dates and Times......Page 63
Navigation......Page 65
Footers......Page 66
Further Reading......Page 68
Diving In......Page 71
Simple Shapes......Page 72
Canvas Coordinates......Page 74
Paths......Page 75
Text......Page 77
Gradients......Page 81
Images......Page 84
What About IE?......Page 87
A Complete Example......Page 89
Further Reading......Page 93
Video Containers......Page 95
Video Codecs......Page 97
Theora......Page 98
Audio Codecs......Page 99
MPEG-1 Audio Layer 3......Page 100
Vorbis......Page 101
What Works on the Web......Page 102
Licensing Issues with H.264 Video......Page 104
Encoding Ogg Video with Firefogg......Page 105
Batch Encoding Ogg Video with ffmpeg2theora......Page 112
Encoding H.264 Video with HandBrake......Page 114
Batch Encoding H.264 Video with HandBrake......Page 121
Encoding WebM Video with ffmpeg......Page 122
At Last, the Markup......Page 124
MIME Types Rear Their Ugly Head......Page 127
A Complete Example......Page 128
Further Reading......Page 129
The Geolocation API......Page 131
Show Me the Code......Page 132
Handling Errors......Page 134
Choices! I Demand Choices!......Page 135
geo.js to the Rescue......Page 137
A Complete Example......Page 139
Further Reading......Page 140
Diving In......Page 141
A Brief History of Local Storage Hacks Before HTML5......Page 142
Introducing HTML5 Storage......Page 143
Using HTML5 Storage......Page 144
Tracking Changes to the HTML5 Storage Area......Page 145
HTML5 Storage in Action......Page 146
Beyond Named Key/Value Pairs: Competing Visions......Page 148
Further Reading......Page 149
Diving In......Page 151
The Cache Manifest......Page 152
Network Sections......Page 153
Fallback Sections......Page 154
The Flow of Events......Page 155
The Fine Art of Debugging, a.k.a. “Kill Me! Kill Me Now!”......Page 156
Let’s Build One!......Page 159
Further Reading......Page 160
Placeholder Text......Page 161
Autofocus Fields......Page 162
Email Addresses......Page 164
Web Addresses......Page 165
Numbers As Spinboxes......Page 167
Numbers As Sliders......Page 169
Date Pickers......Page 170
Search Boxes......Page 172
And One More Thing.........Page 174
Further Reading......Page 175
Diving In......Page 177
What Is Microdata?......Page 178
The Microdata Data Model......Page 179
Marking Up People......Page 182
Introducing Google Rich Snippets......Page 188
Marking Up Organizations......Page 190
Marking Up Events......Page 194
The Return of Google Rich Snippets......Page 198
Marking Up Reviews......Page 199
Further Reading......Page 203