In order to gen up on the latest developments, and benefits, of HTML5 I purchased a recently published book on the topic; Pro HTML5 Programming (2nd Edition). The authors have done a terrific job – having revised the previous edition, which received a lot of positive reviews on Amazon.com, and providing sufficient examples, descriptions, and commentaries on each particular HTML5 element and API which made each chapter very easy to digest. Having recently finished Pro HTML5 Programming I can say with certainty that I feel a lot more confident knowing where, when and how to best integrate HTML5 into the projects I manage, which was exactly what I was looking for.
The HTML5 specification is still incomplete so buying a book on the topic means that you probably won’t be using it as a reference guide in several months. However, having said that, if you want to learn HTML5 you have to start somewhere, preferably somewhere where the content was written very recently, and somewhere where this particular issue is discussed openly by the authors and addressed where relevant. Thankfully the second edition of Pro HTML5 Programming was released in December 2011 and the authors constantly refer back to the evolving state of HTML5 so you never feel like you’re reading dated information.
I wanted to write a blog about this book as I found it very informative and would highly recommend it if you’re just starting out with HTML5.
Here is an abbreviated run-down on the chapters, with reference made to marked highlights.
1. Overview of HTML5
An informative and interesting history of the HTML specification as well as the reasoning behind the generation of the HTML5 specification; security, interoperability, accessibility, plug-in free paradigm etc. and a high level overview of the HTML5 semantic markup elements.
2. Using the Canvas API
3. Scalable Vector Graphics
The distinction between canvas rastor graphics (i.e. PNG, JPEG, etc) and SVG’s vector graphics (i.e. mathematically drawn geometric shapes) is clarified from the start. And it’s nice to know that SVGs can be indexed by Google because they are not part of an image. Again an example is used to illustrate how to draw an SVG graphic with emphasis placed on the interactive application of SVG elements, and how the SVG element embeds directly into the HTML DOM thus providing DOM runtime editing. Reference is made to SVG-edit (a free web-based SVG editor), which I would highly recommend looking at.
4. Working with Audio and Video
Starts with an informative history of the audio and video codecs, knowledge that is intrinsic to correct implementation of the plug-in free HTML5 audio and video elements, and makes a very strong point that you not only have to know which browsers support these elements, but which codecs are supported as well. A reference table is provided for the big 5 browsers (as it stands right now). The available audio and video element attributes are also covered, with sufficient examples provided.
5. Using the Geolocation API
6. Using the Communication API
Secure cross-origin communication (i.e. sending a message from http://www.mywebsite.com to http://www.yourwebsite.com) using Cross Document Messaging and XMLHttpRequest Level 2 are explained and illustrated via two examples that cover the new HTML5 postMessage API and updated XMLHttpRequest object respectively. All related topics, such as the concept of an origin, security considerations, new XMLHttpRequest Level 2 improvements etc. are covered
7. Using the WebSocket API
8. Using the Forms API
HTML form elements, undoubtedly one of the more frequently used HTML elements, is expanded on in HTML5. The authors touch on each new form element type; tel, email, url, search, range, number, and what this means for mobile and non-mobile browsers as well as the pitfalls to avoid. The new progress element is covered as are the elements; color, datetime, time, date, week, month etc. – reference is made to their limited support at present. Other form-based elements are covered; validation, autocomplete, required, min, max etc. so the reader is exposed to a comprehensive look at forms in HTML5.
9. Working with the HTML5 Drag-and-Drop
The two main underlying components of drag-and-drop; (1) mouse drag events and (2) data-transfer, are addressed in a very digestible manner. As with previous chapters the topics covered within are broken down into their simplest form and explained quite clearly with illustrations and examples. Although this is a simple concept at it’s core there are a number of idiosyncrasies that need addressing (dragenter/dragleave event firing order) as well as some less-obvious features (dragging between applications and browsers) that the HTML5 drag-and-dropping funcationality offers – again the authors do an excellent job at addressing this.
10. Working with the Web Workers API
Background processing is made possible via Web Workers. Both Inline and Shared Web Workers are discussed and working examples provided for both. Important limitations, such as web workers not having access to the web page and DOM API, are also covered.
11. Using the Web Storage API
HTML5’s Web Storage API makes it possible to store data across web requests, something currently made possible with cookies but with far fewer limitations. How data is stored and retrieved, differences between the two storage objects; localStorage and sessionStorage, and related events, properties and methods for both are addressed. Key differences between the two objects is explored so that readers can avoid implementing the wrong one at design/build time. The Web SQL database API is covered later in the chapter, also surprising is that it’s not implemented by IE or Firefox … yet(?).
12. Creating HTML5 Offline Web Applications
As the chapter title suggests the authors address how to implement an offline web application, why you may want to consider going offline (providing several examples of where it would be useful) and how you go about it. Several pages are dedicated to the ApplicationCache API as it relates to this particular topic.
13. The Future of HTML5
The future of browser support for HTML5 and future revisions of the HTML5 specification are discussed in addition to new APIs that may appear for WebGL, additional device support (webcams, microphones, storage devices etc), Audio Data API, touchscreen device events, peer-to-peer networking – which are all quite interesting topics in light of what has been made possible so far.
Each chapter provides a concise overview and history of the particular HTML5 element/API discussed before starting in on how it’s implemented with illustrations and/or code examples provided where necessary to better clarify how it’s used. This is my ideal way of learning new topics and although I could have skipped the history component I didn’t mind it’s inclusion given how abbreviated and informative I found it – that and spending time reading a few extra history paragraphs within a several hundred page book wasn’t going to hurt me.
When ASP.NET was first released back in 2002 I found learning this new framework, after having built ASP solutions for several years, quite a step up. It wasn’t a particularly difficult but it wasn’t as easy to learn, or as simple to implement, as ColdFusion or Perl. I felt the same way when reading through Pro HTML5 Programming, with HTML4 being likened to ASP. The new HTML5 elements and APIs expose so much functionality that there is a much greater learning curve once you start to move away from the more simpler markup elements. Pro HTML5 Programming does a great job in educating the reader and adding to their awareness of how, when and why to implement HTML5.
- Pro HTML5 Programming (official website with source code)
- Amazon.co.uk: Pro HTML5 Programming
- Amazon.com: Pro HTML5 Programming
- The HTML5 Test
- What Can I Use (Compatibility tables for support of HTML5, CSS3, SVG…)
- HTML5 Rocks: Native HTML5 Drag and Drop