Home arrow HTML arrow Page 2 - HTML5 Guidelines for Web Developers

HTML5 Guidelines for Web Developers

If you're a web developer thinking about moving from HTML 4 to HTML5, you'd probably appreciate a little guidance on the new standard. Fortunately, Addison-Wesley recently published a book, HTML Guidelines for Web Developers, designed to meet that need. Keep reading for our review.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
November 29, 2011
  1. · HTML5 Guidelines for Web Developers
  2. · Video and Audio in HTML5

print this article

HTML5 Guidelines for Web Developers - Video and Audio in HTML5
(Page 2 of 2 )

If you're wondering how to spice up your HTML5 pages with native video and audio, then chapter 4 is the right place to start looking. It discusses how to set up your own video and audio players (with functional backward/fast forward controls, stop, pause, timers and all) by consuming the properties and methods provided by the HTMLMediaElement interface. In addition, the chapter covers some of the most popular video/audio codecs currently used by mainstream browsers. Make sure to check out this section, especially if you're planning to distribute video/audio in a cross-browser fashion.

For obvious reasons, it's impossible to talk about HTML5 without bringing the <canvas> element to the table. The authors fully honor this concept. Being by far the book's lengthiest topic, chapter 5 provides you with an in-depth introduction to getting the most out of <canvas> through an overwhelming amount of examples, including the construction of all sorts of figures and effects (rectangles, circles, bars), text, Bézier curves, gradients, paths, shadows and even nifty animations. To make a long story short: if you're looking for a hands-on guide that shows you how to exploit the <canvas> element all the way down to its bare bones, this chapter should satisfy your appetite.

On the other hand, if you're interested in exploring in depth the advantages offered by SVG and MathML (short for Mathematical Markup Language), and how to integrate these standards into your HTML5 pages, chapter 6 may disappoint you. It covers the topic at a glance, more or less, by showing only a few basic examples. Even so, these are pretty easy to follow and demonstrate, among other things, how to draw simple shapes within the <svg> tag, including circles, rectangles and lines. As the authors clearly state at the end of this chapter, if you need to dive deeper into the complexities of SVG, then you'll need to be pragmatic and buy a book that discusses the subject much more thoroughly. 

Another little gem of the book is its chapter 7. It goes through the process of adding geolocation capabilities to HTML5 documents, either by using Google Maps or the OpenStreetMap/Open Layers libraries. Needless to say, the chapter is full of JavaScript snippets (again, the use of inline even handlers interspersed with markup is detrimental in terms of quality in some code samples). In summary: if you want to develop web applications for mobile devices or websites that rely upon geolocation, you'll find this chapter quite insightful.

Of course, if you're anything like me, you've probably heard all the noise raised by the buzzwords "Offline Web Applications." In this case, chapter 8 features many resources for you; it offers an approachable introduction to using some popular "offline" features bundled with HTML5, such as "sessionStorage," "locaStorage," offline status/events, and the still-overlooked Cache Manifest File (most likely, because of the lack of support for offline applications of Internet Explorer 8 and below). The bottom line: this is an  easily readable, yet full-featured chapter that will put you quickly on the right path toward building functional offline applications, without suffering premature hair loss.

As with the <canvas> element, covering the "magic" behind HTML5 without bringing up web sockets and web workers would be a cardinal sin. The authors agree with this assessment, which is why they wrote two didactic chapters (9 and 10), which discuss both features in a pretty approachable manner.

You'll see the benefits of using parallelism (or multithreading, as it's known on desktops) on your browser via web workers. You'll also learn, through some illustrative code samples, how to build a broadcast program (similar to a basic chat), which exploits the dual-channel communication abilities of web sockets. Having written some articles myself on web workers in the past, I found these chapters to be really practical and straight to the point; the examples are focused on pretty realistic use cases, rather than on the infamous "toy code."

The book's penultimate chapter gives you a somewhat extensive overview on what microdata is and how it might help to increase the semantic meaning of HTML5 documents. It uses a fictitious blog entry to discuss the usage of some attributes, such as "itemscope," "itemprop," "itemtype" and "itemid." Although the theory behind microdata (and of HTML microformats in general) is unquestionably solid, the chapter is rather long, considering that this feature isn't currently supported by any modern browser. In my opinion, this topic should have been shortened quite a bit in favor of a more pragmatic approach.

But, hold on a second... do you hear the sound of a velvet red curtain coming down? Yes, finally we've come to the book's last chapter! To be frank, this one falls under the "miscellaneous" category, as it covers multiple juicy topics, including the brand new "getElementsByClassName()" DOM method, which  will let you get a DOM element collection simply by passing to it the class name of the target elements (trust me, there's no need to use jQuery at all).

In addition, you'll learn how to add custom attributes to your HTML5 pages by using the handy "data-*" attribute. You'll also learn how to manipulate CSS classes in a list-like manner by means of the classList interface, including the ability to add new classes to web page elements, as well as remove, toggle and count existing ones.

Finally, the chapter walks through the popular (or unpopular, according to some opinions) HTML5 Drag & Drop/File APIs, which allows users to drag/drop local files to the browser's viewport for further processing. The APIs' coverage is in general good and concise, which will let you familiarize yourself quickly with some new events and JavaScript objects, such as "ondragenter," "ondragleave," "ondrop" and FileReader respectively.

My advice with regards to this final chapter: if you enjoy tweaking the DOM in all sorts of clever ways, or simply want to learn how to process your local files by using the aforementioned APIs, you should keep it close at hand.

Final Remarks

As I noted at the beginning, HTML5 Guidelines for Web Developers is in general a well-written book that will let you get started using the most exciting and flashiest features bundled with HTML5 in a fairly painless way. Don't expect to get a full reference work on the standard, though. In my opinion, this is a good thing, because with its bare bones structure, HTML5 is essentially work in progress.

As an experienced web developer myself, I learned quite a lot from this book. Therefore, if you're willing to shell out some money to buy a good, enjoyable HTML5 book, Klaus Förster and Bernd Öggl's HTML5 Guidelines for Web Developers will put you a big smile on your face.

P.S: I'd like to give a big thank you to Heather Fox, from Addison-Wesley (AW), Prentice Hall and SAMS (informit.com), who kindly provided me with a copy of the book for doing this review.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials