HTML5 is the latest hero in the world of digital marketing. It’s a massive topic though – so I’m only going to scratch the surface here, whet the appetite if you will…
In the interest of keeping your attention, I’ll skip straight to some visual examples. But it’s worth mentioning that there’s a LOT more to it than what you’ll see below. So much so, I’m sure we’ll post future blog articles that drill down into specific areas of this environment.
NB – not all browsers support HTML5. We would advise using a modern browser like Chrome, Safari, Opera or a recent version of Firefox or Internet Explorer.
Canvas and SVG graphics – these enable powerful 2D and 3D graphic rendering and interaction in the browser. This is one of the key ways in which HTML5 is able to achieve what has previously required Flash.
This really falls into two very distinct areas: SVG (vector) and Canvas (raster). The distinction is loosely speaking that SVG graphics are infinitely scalable (a bit like an EPS graphic can be), and canvas graphics will pixilate if zoomed.
A great showcase of Canvas can be seen here
Similarly, some great examples of SVG can be seen here
One of the team’s favourite examples of Canvas + CSS transforms can be seen here
Multimedia (video and audio)
Video and audio files can be played, and even modified dynamically, within the browser. Currently MP3s, videos, etc. require a plug-in to play them. The intention, through the HTML5 draft specifications, is for multimedia to be played within the browser, without requiring third-party plugins (i.e. open standard format).
Current debate over suitability of various open standard formats rages on – meaning there is no accepted standard for these file types. However, it is likely (given market forces) that Google’s development of the WebM video format and the wide acceptance of the Ogg Vorbis audio that these two formats (or a close relative of them) will emerge as future standards across all modern browsers.
Some great examples and tutorials can be found here
One of my favourite examples can be found here
Drag and drop
Dragging and dropping text, images and/or files between a browser window and your machine’s desktop. Currently (in HTML4 and older) to save something from an online environment, or to upload to a site, you need to navigate through a ‘browse’ selection window. HTML5 streamlines this considerably.
A simple example of this can be found here
Offline web applications
As we become increasingly reliant on web-based applications and interactive sites, and we access these through mobile devices, it’s important to ensure these don’t break if the connection to the server drops. HTML5 enables the browser to identify which resources should be cached and made accessible offline – preserving the experience when the connection is lost.
A lovely example of an online ‘sticky note’ tool that preserves content when offline can be found here
I could go on… there are so many areas that warrant discussion, but there are whole sites dedicated to the topic of HTML5, so not something I can do justice to in a lowly blog post. Hopefully I’ve given you a taste of some of the more visual aspects of HTML5 (and associated technologies).
At Oculus, we’re already using HTML5 throughout a number of projects to great effect. Feel free to get in touch if you’re interested in finding out more, or perhaps applying some of the capabilities outlined here to your projects.
Posted by Marc Price
April 12 2012