Webstock 2011 workshops

Here I am at WebStock once again and I have finished two full-day workshops – one on Content Strategy and one on HTML5. It was extraordinarily difficult to select which workshops to attend this year. Against Content Strategy was a CSS session that would have been invaluable and against HTML5 today was Jason Santa Maria talking about web typology AND a session about usability testing. Check the programme and you will see that ALL the workshops were sold out and the conference itself was also sold out, a testament to the quality of the presenters that the WebStock crew manage to entice downunder.

Since the HTML5 session is freshest in my mind I will begin with it. First of all its important to have the most modern browser available for checking out the sites I link to because they will only work in browsers that support the relevant bits of  HTML5 – IE8 won’t cut it so go off and get Chrome or the Firefox 4 beta, IE9 beta or something like that. This session was taken by Mark Pilgrim who wrote the book on HTML5… literally: Dive Into HTML5 – luckily its online as we don’t have a print version… although we do have access to it through Safari(?)

We covered 4 main aspects of HTML5 in this session: video, canvas, local storage and offline and spent the most time on the first two aspects. The great thing with HTML5 is that it will allow us to put video directly into the page just like an image and the browser will play it natively without needing a plug-in like Flash, Quicktime, Windows Media Player etc. The big issue is that the browsers are split about what to support and we’ll be stuck supporting old browsers which don’t support HTML5 video for some time. Luckily the HTML5 spec allows for this and quite cleverly allows us to feed multiple options to the browser and it will only use the first version it comes to that it can play so we don’t have to worry about it displaying a video multiple times. YouTube is already experimenting with this and you can go there and ‘opt-in’ to html video if you have a suitable browser.

Canvas is a way to do drawing and even animations in the browser without making a graphic file that has to be created outside of the html (and JavaScript). As an example Mark had made this game of Halma entirely using HTML5 canvas with JavaScript. The idea is to move the circles to the diagonally opposite corner – click a circle and then a destination square – you can move to a neighbour square or jump a neighbouring circle. Another great example (Chrome/Safari only) is this video which blows apart when you click on it.

Local storage is a better way of keeping information on a user’s system about their settings and activity than cookies or Flash and could have heaps of applications and Offline content is about making web things work even when you aren’t connected on the web e.g. airline mode on your i-thing. Apparently Gmail has this built in (cool) and this is especially useful for mobile computing where users could be on and off the network intermittently.

As an example of all these things put together go to 20thingsilearned.com in a late-model browser – it’s a great example of all these things put together and a great introduction to web technology.