Confoo 2012 – The HTML5 Landscape

By: Sofia Shendi, February 29, 2012

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:

Mobile

If you want to work in the mobile space, HTML5 is the way to go especially when it comes to media.

Clean Coding

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

<!DOCTYPE HTML>

Boolean Markup

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.

Before
<input type="checkbox" name="cheese" checked="checked" disabled="disabled" /> Cheese

 

After

Video and Audio

Video

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.

Using the new video and audio tags can be interesting for a direct Javascript access:
document.getElementById('media').play();

You can also develop some HTML5 tests for your media like this:
return !document.createElement(‘video’).canPlayType();

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.

Audio

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

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.

Forms

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.

Semantic Tags

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.

Conclusion

Once again, most IE users are not even on IE9 yet so what to do? Andrew recommends using conditional JavaScript (SHIV) to make it work. It creates elements in the DOM that can then be referenced in the code.

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

Tagged with: ,
Posted in Events

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Avatar of Sofia Shendi

Sofia Shendi

What people are saying about #webnotwar

.@richardpietro @ignumerique Special thanks to our city champion for making the #ogt14 event possible in QC!

And the #OGT14 #opengov conversation continues! Off to @SFLinux QC office to meet @leontalbot #WebNotWar

Thank you to our friends from France who stayed past 1:30am local for the Skype call #OGT14 All in the name of #opengov @OpenGovFr

Great to see an engaged #opengov community in Quebec City! #OGT14 #webnotwar

Where/how progress happens... @brucechau @ignumerique & Moussa Sarr making #WebNotWar before the Quebec city #OGT14 pic.twitter.com/rjBvi8qppN

Retweeted by #WeAreOpen

Get caught up on Open Government in Canada via the #OGT14! webnotwar.ca/ogt14/ Let's Make #WebNotWar together Retweeted by #WeAreOpen

Where/how progress happens... @brucechau @ignumerique & Moussa Sarr making #WebNotWar before the Quebec city #OGT14 pic.twitter.com/rjBvi8qppN

Retweeted by brucechau

Where/how progress happens... @brucechau @ignumerique & Moussa Sarr making #WebNotWar before the Quebec city #OGT14 pic.twitter.com/rjBvi8qppN

Retweeted by Jean-F Gauthier

Get caught up on Open Government in Canada via the #OGT14! webnotwar.ca/ogt14/ Let's Make #WebNotWar together Retweeted by Ashleigh Weeden

Get caught up on Open Government in Canada via the #OGT14! webnotwar.ca/ogt14/ Let's Make #WebNotWar together

Where/how progress happens... @brucechau @ignumerique & Moussa Sarr making #WebNotWar before the Quebec city #OGT14 pic.twitter.com/rjBvi8qppN

Ne manquez pas la webdiffision de l'évènement de Québec du tour du gouvernement ouvert de Richard Pietro: eventbrite.ca/e/tour-du-gouv… #OGT14

<3 we love making #webnotwar with you. Truly a privilege and a pleasure ^KL @richardpietro: .@6t6qt @brucechau @microsoftcanada @WebNotWar

@wolfewylie > FYI... RT @brucechau: Cool! @OpenDataCA working on a data literacy course for reporters! @siliconpeel @dennisbrink #webnotwar Retweeted by William Wolfe-Wylie