Web Directions Reflections, part 3: HTML5 with Bruce Lawson and Remy Sharp

If mobile development was the hot topic at last month’s Web Directions @media, HTML5 came a very close second…

Bruce Lawson & Patrick Lauke: HTML5 Structure, Semantics, Styling and Sexiness

Opera’s Open Web evangelist, Bruce Lawson, suffered for us all. He caught laryngitis on the first day of the conference and, despite a few brave attempts, was unable to speak. I suspect they were pleased at the Microsoft stand — Bruce didn’t get a chance to ask a few awkward questions about IE9’s dubious 100% HTML5 compatibility table.

Patrick Lauke stepped in at the last minute to explain why HTML5 could be the solution to all our woes. He explained that, like Ajax and Web2.0, marketing departments had taken control. The term “HTML5” now meant whatever you wanted it to be. (Remy Sharp also suggested HTML5 means anything and everything to mere mortal non-developer beings. It’s markup, JavaScript, CSS, SVG, jQuery and your dinner!) But, if you sweep away the BS, all the main vendors are behind the standard, it has better support for web applications, and HTML5 is HTML with more bling!

Patrick described a few of the 28 new structural elements and paid special attention to webforms. HTML5 provides special input types such as date, time, email, tel, url and even ‘pattern’ which allows you to specify your own regular expression. The days of complex JavaScript input validation are numbered.

Perhaps the most exciting HTML5 elements are video and audio. Video as a native object makes sense: it offers keyboard accessibility and a JavaScriptable-API so you can control media playback and create your own controls. Unfortunately, there’s still some debate over video formats and vendors have their own preferences. It might be necessary to provide the same video in multiple formats until a general consensus is reached:

<video>
	<source src="video.webm" type="video/webm" />
	<source src="video.ogv" type="video/ogg" />
	<source src="video.mp4" type="video/mp4" />
	<!-- Flash-player fallback code -->
</video>

Patrick also discussed canvas, the scriptable image tag. Canvas is great for games and effects, but there are accessibility concerns so you should be wary about using it for content.

Finally, Patrick answered the question: is HTML5 a Flash-killer? Unless you’re using an iPhone/iPad, it’s not a question of HTML5 replacing Flash. HTML5 gives developers a choice when, before now, Flash may have been the only option.

Patrick’s slides are available online and you can also read Bruce Lawson’s SitePoint interview.

Remy Sharp: Browsers With Wings — HTML5 APIs

Remy was one of the last speakers and he admitted he’d adjusted his speech several times to account for topics raised in earlier sessions! It was a great presentation, although I wasn’t fortunate enough to catch the chocolate eggs he was throwing into the audience.

Scriptable video was the first topic. A few lines of JavaScript is all you need to control media playback with methods such as play() and pause() and properties such as paused, currentTime, playbackRate, and currentSrc. It’s also possible to synchronize events with media playback — that could lead to very exciting possibilities.

After a discussion of the merits of canvas and SVG, Remy revealed his hatred for cookies (browser ones rather than chocolate-chip). Cookie code is difficult to remember, it uses a special date format, they leak across sessions, and can only be deleted by setting an expiry date in the past. Web storage is the future and browser technologies such as Web SQL Database and IndexedDB also look promising.

Geolocation is another powerful facility, especially for mobile devices. The navigator.geolocation object can be used to retrieve your latitude and longitude. It can also check the accuracy of that location which is important if you want your coffee shop search application to provide accurate results.

WebSockets was the next topic. Unlike a standard HTTP request/response, WebSockets provide JavaScript with a direct server communication API. The server and client can send and receive data as necessary, e.g.

var conn = new WebSocket("ws://server.com:8000/");

conn.onmessage = function(event) {
	alert("Received message: " + event.data);
}

conn.send("Hello Mr Server!");

The advantage of WebSockets is that they’re event driven (no continual polling) and lightweight (no HTTP header). WebSockets could revolutionize browser-based applications and servers such as node.js already support the technology.

Although these technologies are new and have limited support, Remy provided links to shims which allow you to use the features in all the main browsers. His slides are available online or as a PDF. You can also read Remy’s SitePoint interview.

Coming in the next Web Directions Reflections post: Andy Clark hard-boils his designs and Doug Schepers salutes SVG…