I’ve just finished reading “HTML5: Up and Running” by Mark Pilgrim (http://diveintohtml5.org/). I liked the book, as it’s a good introduction to the new features of HTML5, and even broken down the way I wanted it to be, i.e. a chapter for each new set of features. However, I was a little disappointed by some of it, so I feel it’s deserving of 3 stars out of 5. The good: an entertaining history of the HTML img tag; introductions to 3rd party libraries Modernizr, html5shiv, and explorecanvas; the example board game in the chapter on the canvas tag (later updated to use local storage); the development gotchas mentioned in the chapter on offline web applications; the detail on new form elements; and the chapter covering microdata. The bad: too much emphasis on Modernizr in chapter 2; too much detail on codecs in the video chapter; and an emphasis on geo.js in the geolocation chapter.
I don’t think I’ll refer back to this book in the future, as it really is just an introduction to HTML5 features, and there are lots of places on the web I can find such a list. If you’ve already been introduced to these features, you might be better off finding a more in depth reference on HTML5. I’ll be looking for one myself, after the new year.
And here’s the overview, chapter by chapter:
Chapter 1 has a nice little section on the history of HTML5 and an example of how the img tag made its way in. A story is a nice start to the book.
Chapter 2 contains a brief listing of the new HTML 5 features, with a short description of each, and the way to detect if your browser supports it. There’s too much of an emphasis on the Modernizr library, though it’s certainly nice to learn that it exists. I also found a useful link to Video for Everybody! in the HTML 5 video section, which I’m likely to look into.
Chapter 3 contains a quick look at some changes in HTML 5 from previous versions, and then proceeds to show a list of the new semantic elements. These are all included in a sample web page with an interesting technique to use these today in non-capable browsers via html5shiv:
As someone that uses the keyboard a lot for navigation, and can imagine how cumbersome it can be to skip over links in screen readers, I found this technique for Skip Navigation particularly interesting: http://webaim.org/techniques/skipnav/.
Chapter 5 introduces us to the video element, <video />. There is probably more details about audio and video codecs and media container formats than I really need or want to know just now, but the inclusion of this information, is useful for future reference and to get across the idea that in general, video on the web is not simple. The things that struck me are: “There is no single combination of containers and codecs that works in all HTML5 browsers.” and: “To make your video watchable across all of these devices and platforms, you’re going to need to encode your video more than once.” There’s also a nice sampling of video encoding tools, including one for Firefox called Firefogg which encodes Ogg Video (Theora video + Vorbis audio in Ogg container).
Chapter 6 is a brief description of the geolocation support in HTML5. It doesn’t really go very deep and it references a library, geo.js, that uses gears, but Google is not continuing with Gears: http://gearsblog.blogspot.com/2010/02/hello-html5.html, so I’m not sure how useful this library is.
Chapter 7 presents an overview of Local Storage. It has a nice history overview and some details on how to use it, but it does not go into much depth. There is a nice example of how to save and restore a game’s state though. There is extra stuff on Web SQL Database and IndexedDB, but since this stuff is not production ready, it’s interesting, but not very usable.
Chapter 8 contains a good introduction to offline applications. This seemed like particularly good information with a bunch of gotchas for developing apps that work offline, so I think this chapter was just right. I’m sure once I try to develop an app that works offline, I’ll want to dig in deeper, but it’s a nice start. After all, with mobile apps use on the rise, this could be very important info.
The new input types are:
- number (with additional attributes: min, max, & step) – can be represented as a spinner
- range (also supports: min, max, & step) – can be represented as a slider
- color (which is not currently supported by any browsers)
If a browser doesn’t support the new type, it will just fall back to type=”text”, meaning sites can use these new types right now. HTML5 does specify browser based validation of these new fields, but only Safari has any support at all for this so far (email, url).
Chapter 10 is microdata: “Microdata annotates the DOM with scoped name/value pairs from custom vocabularies.” This chapter describes HTML5 microdata, and some specific examples of how to markup your markup to use it. The examples use microdata formats from Google available at data-vocabulary.org, including ones for event, person and review. This lets you add semantic meaning to your markup without needing more extensions to HTML. Google uses some microdata in it’s search results pages.