Opera Software
The best browsing experience on any device
Th e b e st I te rn e t e xp e rie n c e o n a n y d e v ic e
n

www.brucelawson.co.uk
www.html5doctor.com
twitter.com/brucel

HTML5
The Future Of Web
Applications

Evolution of HTML: monkey on
left becomes human in 4 stages

th
Evolution of HTML: 5 monkey
(HTML5 ) is human but dressed
in pimp clothing

Web Applications 1.0
“extending the language to better support Web
applications, since that is one of the directions the Web
is going in and is one of the areas least well served by
HTML so far.
This puts HTML in direct competition with other
technologies intended for applications deployed over the
Web, in particular Flash and Silverlight.”

Picture of 1 9 0 0 idea of
automated year 2 0 0 0 Ladies'
bedroom

Canvas
Immediate graphics mode without plugins
Demos:
● Twitter experiment/ eye-candy
● First person shooter
● First person gifter
Native support in Opera, Safari, Firefox and Chrome.

What about Internet Explorer?

Canvas explorer:
excanvas.sourceforge.net

what about accessibility?

<canvas> = <img> - alt
● <canvas> is just about pixels manipulated by script
● No DOM
● No “alt text”: <canvas>Fallback content</canvas>
● Link to accessible version must be outside <canvas>
● Demo jQuery plugin to visualise data tables (filament)

<canvas> or SVG?
● Scalable Vector Graphics remains text
● SVG for content; canvas for bling/ supplementary
● SVG natively supported in Opera, Firefox, Safari, Chrome
● IE? Raphael js http://raphaeljs.com/, SVG Web (alpha)

HTML5 forms (“Web Forms 2”)
● Coding form validation is not much fun
● HTML5 forms add validation to the browser
● Live code demo
● Let's look at more

What about legacy browsers?
●

www.modernizr.com
● Or do your own capability checking
before falling back your current JS
validation.
Or just leave it to the server-side
validation

Geolocation
● http://html5demos.com/geo
● Modernizr can test support

Browser storage
Cookies are pretty clunky, especially large-scale storage.
● Local storage and session storage (Firefox, Chrome, Safari)
● Database in the browser! (Safari)
● Off line apps using manifest (Safari)

Building application toolbars
<menu type="toolbar">
<command onclick="insertTag(buttons,0);"
label="strong" icon="bold.gif">
<command onclick="insertTag(buttons,1);"
label="em" icon="italic.gif">
<command onclick="insertLink(buttons,2);"
label="link" icon="link.gif">
</menu>

... and if I had an hour or 3 ...
● Drag and drop
● Cross-window messaging
● Cross-domain messaging
● Web workers
● (demos: www.html5demos.com)
● Video (people.opera.com/brucel/demo/video-demos.html)

Thank you!
brucel@opera.com, http://dev.opera.com
www.brucelawson.co.uk, twitter.com/brucel
www.html5doctor.com