Confoo 2012 – The HTML5 Landscape
Here is a summary of a talk we attended on Day 1 of Confoo 2012. If you haven’t checked out the Make Web Not War Dojo yet – make sure to come visit us tomorrow for lightning talks, kinect Fruit Ninja and giveaways!
The HTML5 Landscape
by Andrew Lombardi
HTML5 was introduced in 2009 and its logo was finalized in 2011. Even though it’s been around for a while, few developers actually use it fully in their projects. The features of HTML5 are quite exciting but sadly don’t fully work on all the available browsers.
Andrew Lombardi is a great speaker and it was interesting to hear his thoughts on what HTML5 can do. Here are the key features:
If you want to work in the mobile space, HTML5 is the way to go especially when it comes to media.
Andrew compared the old way to the new way of setting up a new HTML file. One striking example is the doctype declaration.
The Old Doctype (one of the 3 HTML4 doctypes)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The New Doctype
The new markup means no more redundancy in the code. For a false value, you simply have to omit the attribute and for the value to be true, add the attribute to the tag.
<input type="checkbox" name="cheese" checked="checked" disabled="disabled" /> Cheese
Video and Audio
The arrival of HTML5 has brought a few different video formats: Ogg, H.264 and WebM/VP8. They all work on different browsers and versions so it’s a bit tricky to choose one.
You can also develop some HTML5 tests for your media like this:
You can also use the Modernizr Library for a complete access to HTML5 features and tests on its availability.
Big upside: using the video tag for an HTML5 video player brings native control depending on what browser you are on. So if you are on Safari, it will look like the Quicktime format you already use and it makes it quite user-friendly.
The HTML5 audio formats are Ogg, MP3 and WAV. Once again, they all work on different browsers and versions.
In general, it’s no fun to use video and audio tags for now as you need to reference your file in each type of video format plus a flash embed so that it can play on any browser or mobile.
Canvas is a new HTML5 feature and its possibilities are endless. We have seen several games being developed in canvas in the last two years including Mario Bros!
On my side, I had fun coding a function that would draw a header image in a canvas to get the RGB value of a certain pixel so I could build my CSS based on that main color. Pretty cool, eh 😉
A few things to know:
- Coding can look like Java for developers who already know the language.
- Any markup between a canvas box will show if canvas isn’t supported.
The HTML5 forms will be a lot more simpler and will make more sense to developers.
Input types: date, color, number, search, email, url…
Input variables: autofocus, autocomplete, placeholder…
Sadly, the HTML5 forms will only be supported in Internet Explorer 10 and iOS5 so for a full use on your website, you may want to wait if the majority of your visitors are on older browsers.
A big part of HTML5 will be the arrival of new semantic tags to use smart tags like section, nav, article, header instead of a ton of div with names that don’t always make sense.
Internet Explorer 9, Firefox 3, Safari 3.2, iOS4 and Chrome 4 support those new tags.
On my side, I believe there are two answers. If you are developing a site for yourself and want to show off your skills then go for it and code fully in HTML5!
If you are building web sites for clients and the main goal is to make sales or share information, code in what you know will work everywhere. Making a cool page means nothing if the visitor can’t do what he’s meant to.
Session covered at