HTML5: Tales from the Development Trenches

Loose notes from the SXSW 2010 session HTML5: Tales from the Development Trenches, in two parts (history lesson and examples). With Bruce Lawson of Opera and Martin Kliehm of namics.

Tales of the development of HTML5

HTML4 was deemed too difficult to extend. The proposed way to break free was to get a fresh start based on XML. That turned into XHTML. At one point it was so backwards incompatible that at one point they deprecated the IMG tag (!). So agreed to extend XHTML without breaking backwards compat. In 2003, started by Opera. Mozilla, Apple joined in. Instead of the ghastly days of the browser wars, we had three big players all working together. Google and Microsoft are now involved as well (all five browser makers).

In 2009, XHTML2 waqsw killed. 2010 WHAT-WG group goes to last call. Not yet complete, but getting there. Giant spec (900pp). Already some implementations of some parts. Only 300 pages of interest to web devs (first HTML spec was only three pages)

HTML5 does not include geolocation, CSS3, or SVG. But it is a kitchen sink – includes web storage, a web database, web sockets. But let’s concentrate on markup.

If your site is mostly text, images, and links, you prob don’t need HTML5 – HTML4 is a perfectly fine markup lang (but you’ll probably want to out of sheer joy). HTML5 takes us from chimp to pimp.

HTML5 extends language to work with web apps. HTML5 is in direct competition with MS Silverlight and Adobe Flash. But it won’t kill either. It’s an open standard. Standards are vital because browser is most important app on your computer.

The web is too important to society to ever be in the hands of a single vendor.

What people really do:

etc. etc. So HTML5 bakes these in. So there’s a <header> element and <section> and <content> and <section> etc. These tags take role=”” attributes.

What is “aria?”

HTML5 builds in form validation (this is huge!)

<input name=foo type=number min=5 max=15 step=3>

No JS required. Browser just gives it to you.

Lowercase no longer required.

<input name=foo type=url required>
<input name=foo type=date > # You get a date picker for free!!! (Only Opera supports this so far)\

When older browsers encounter this, it defaults to type=text (so then you have a validation problem)

Canvas rocks!

A blank area on the screen that you can use javascript to fill with whatever you like. Invited by Apple for Dashboard, but adopted by other vendors.

Example of using Canvas to draw editable tables. Edit a field and graphs update in real time. Amazing.

Video in HTML5:

<video src=video.ogv />

(ogv = ogg video)

The built in video controls can be accessed via keyboard without using the mouse. If you don’t liek the controsl you can script your own.

Captioning: Mark up the transcript with timecode. Huge win for accessibility. Also great for SEO. Real-time switching between transcript/caption languages. Fantastic.

HTML5 doesn’t break the web
Is sometimes an ugly kludge
Can be serialized as XML:XHTML5
Defines HTML error-handling to keep consistent DOM across browsers.
Adds new elements and APIs for open standard apps
Is coming soon, to a browser near you.

For Javascript, non-interoperable DOMS will be a thing of the past.


Tales of developing with HTML5

Using roles (stylable):
<input type=”text” role=”search”>

Web workers
Web storage
Drag and drop
File API

Web workers add speed by adding processes in parallel. Real-time video example of video processing from web cam (swapping live background). Intelligent parsing between CPU and GPU.

Orientation: Cool demo of using the accelerometer in the Mac laptop – turn laptop and the display reorients to stay rightside up, even when on diagonal.

Touchscreen awareness – huge for gaming and future displays that will be touch aware (e.g. iPad)

Drag and drop. Create a drop zone in the middle of the browser. Drag an image off your desktop and post-process them.

Mark Pilgrim has a new book “Dive into HTML5” (follow-on to the famed Dive Into Python)

One Reply to “HTML5: Tales from the Development Trenches”

  1. Thanks for blogging my talk. One clarification: the new structural elements (header, footer etc) can take WAI-ARIA roles (header role=”banner”, footer role=”contentinfo”) but it’s not required.

Leave a Reply

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