HTML5 at London Web Standards
I was privileged to be invited to come and present at London Web Standards, and honoured that the tickets sold out within 45 minutes of being available. So, no pressure then ...
Assisted by the lovely Henny who advanced my slides and alt-tabbed from slideshow to demo, I sneezed and snuffled my way through a presentation called HTML5 and Friends (PDF, 723K).
The resources that I demoed were
- Canvas Paint
canvas
first-person shootercanvas
first-person gifter- the excanvas library to port
canvas
to Internet Explorer - Filament Group's jQuerty plugin using
canvas
for graphing data tables - Raphaël JavaScript Library to make SVG that also works in Internet Explorer
- SVG Web is a JavaScript library which provides SVG support on Internet Explorer (alpha code: not ready for production)
- My HTML5 forms demo, including range, date, regex validation
- modernizr - a small HTML5 capability detection library
You can also download Opera 10 which I was using to demo.
Opera Developer Network has some beginner's canvas
tutorials available:
- HTML 5 canvas - the basics
- Creating an HTML 5 canvas painting application
- Creating pseudo 3D games with HTML 5 canvas and raycasting
- Creating pseudo 3D games with HTML 5 canvas and raycasting: Part 2
For the second half of the talk, I built an HTML5 page through the magic of live coding (with lavish prizes!).
Consequently there are no slides to publish, but I have an article called Designing a blog with HTML that covers the same ground. (Two articles on my personal blog cover it in much more detail: Redesigning with HTML 5 and WAI-ARIA and Marking up a blog with HTML 5 (part 2).)
The shocking looseness of HTML5's validation rules is discussed in an article I wrote called HTML 5 + XML = XHTML 5. The main take-home should be that, although you can mix quoted or unquoted attributes, upper and lower case freely (even in the same page), you shouldn't: if you do, you'll make your code an unreadable and therefore unmaintainable mess. Choose one coding convention that works for you and stick to it.
Some other useful resources:
- HTML5 validator
- HTML5 outliner
- the author's version of the HTML5 specification (much shorter than the main version and generated from the same source, but without all the parsing rules and algorithms for browser manufacturers and other implementors)
- HTML5 Doctor (I'm a co-curator of this site)
- SVG vs. Canvas on Trivial Drawing Application: a comparison of
canvas
and SVG
Thanks to all who attended and asked great questions. I'm sorry that I had to charge off before the bar shut (not like me at all!) but my son was sick so I needed to get the last train home.