HTML5: Up and Running

HTML5: Up and Running

Mark Pilgrim

Language: English

Pages: 222

ISBN: 0596806027

Format: PDF / Kindle (mobi) / ePub


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.

Aptana Studio Beginner's Guide

Puppet 3 Beginner's Guide

Digging into WordPress (8th Edition)

Das XHTML, HTML und CCS.

WordPress Multisite Administration

Ruby on Rails: Up and Running

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

technique #2 (see “Detection Techniques” on page 15). If your browser supports autofocusing web form controls, the DOM object it creates to represent an element will have an autofocus property (even if you don’t include the autofocus attribute in your HTML). If your browser doesn’t support autofocusing web form controls, the DOM object it creates for an element will not have an autofocus property. You can detect autofocus support with this function: function

“quirks mode” and “standards mode.” Of course, this being the Web, things quickly got out of hand. When Mozilla tried to ship Version 1.1 of its browser, it discovered that there were pages being rendered in standards mode that were actually relying on one specific quirk. Mozilla had just fixed its rendering engine to eliminate this quirk, and thousands of pages broke all at once. Thus was created—and I am not making this up—“almost standards mode”. In his seminal work, “Activating Browser Modes

context.fillText("( 0 , 0 )", 8, 5); Text | 65 Download from Library of Wow! eBook Now for the text in the lower-right corner. Let’s say we want the bottom-right corner of the text to be at coordinates (492,370)—just a few pixels away from the bottomright corner of the canvas—but again, we don’t want to measure the width or height of the text. We can set textAlign to right and textBaseline to bottom, then call fillText() with the bottom-right coordinates of the text’s

this with a directive so it affects only your cache manifest file, or create a subdirectory that contains nothing but this .htaccess file and your cache manifest file. As usual, configuration details vary by web server, so consult your server’s documentation for how to control HTTP caching headers. Disabling HTTP caching on the cache manifest file itself won’t solve all your problems, though. You’ll still have times when you’ve changed one of the resources in the appcache, but it’s still

Inc.”). How can you express that in microdata? The short answer is, you can’t. Microdata doesn’t have a way to break up runs of text into separate properties. You can’t say “the first 18 characters of this text are one microdata property, and the last 12 characters of this text are another microdata property.” But all is not lost. Imagine that you wanted to style the text “Developer advocate” in a different font from the text “Google, Inc.” CSS can’t do that either. So what would you do? You

Download sample

Download