Opera SoftwareThe best browsing experience on any device                       Th e b e st I te rn e t e xp e rie n c e o ...
www.brucelawson.co.ukwww.html5doctor.com  twitter.com/brucel
HTML5The Future Of Web   Applications
Evolution of HTML: monkey onleft becomes human in 4 stages
thEvolution 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 W...
Picture of 1 9 0 0 idea ofautomated year 2 0 0 0 Ladies          bedroom
CanvasImmediate graphics mode without pluginsDemos:● Twitter experiment/ eye-candy● First person shooter● First person gif...
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...
<canvas> or SVG?●   Scalable Vector Graphics remains text●   SVG for content; canvas for bling/ supplementary●   SVG nativ...
HTML5 forms (“Web Forms 2”)●   Coding form validation is not much fun●   HTML5 forms add validation to the browser●   Live...
What about legacy browsers?●
www.modernizr.com●   Or do your own capability checking     before falling back your current JS     validation.     Or jus...
Geolocation●   http://html5demos.com/geo●   Modernizr can test support
Browser storageCookies are pretty clunky, especially large-scale storage.●   Local storage and session storage (Firefox, C...
Building application toolbars<menu type="toolbar">    <command onclick="insertTag(buttons,0);" label="strong" icon="bold.g...
... and if I had an hour or 3 ...●   Drag and drop●   Cross-window messaging●   Cross-domain messaging●   Web workers●   (...
Thank you! brucel@opera.com, http://dev.opera.comwww.brucelawson.co.uk, twitter.com/brucel         www.html5doctor.com
The Future of HTML 5 by Bruce Lawson
Upcoming SlideShare
Loading in...5
×

The Future of HTML 5 by Bruce Lawson

35,359

Published on

Bruce Lawson gave this talk at FOWA London 2009 (http://bit.ly/fowa-london-09).

The HTML 5 spec was originally called "Web Applications 1.0". Most of the attention has been on the new markup elements, but we'll look further at the applications side of the spec:

1. Dynamic images and graphs with canvas
2. Eliminating much forms validation with webforms 2.0
3. Local storage automagically saving your data
4. Geolocation
5. Building toolbars and menus.

Published in: Technology, Art & Photos
2 Comments
34 Likes
Statistics
Notes
No Downloads
Views
Total Views
35,359
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
420
Comments
2
Likes
34
Embeds 0
No embeds

No notes for slide

The Future of HTML 5 by Bruce Lawson

  1. 1. Opera SoftwareThe 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
  2. 2. www.brucelawson.co.ukwww.html5doctor.com twitter.com/brucel
  3. 3. HTML5The Future Of Web Applications
  4. 4. Evolution of HTML: monkey onleft becomes human in 4 stages
  5. 5. thEvolution of HTML: 5 monkey(HTML5 ) is human but dressed in pimp clothing
  6. 6. 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.”
  7. 7. Picture of 1 9 0 0 idea ofautomated year 2 0 0 0 Ladies bedroom
  8. 8. CanvasImmediate graphics mode without pluginsDemos:● Twitter experiment/ eye-candy● First person shooter● First person gifterNative support in Opera, Safari, Firefox and Chrome.
  9. 9. What about Internet Explorer?
  10. 10. Canvas explorer:excanvas.sourceforge.net
  11. 11. what about accessibility?
  12. 12. <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)
  13. 13. <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)
  14. 14. HTML5 forms (“Web Forms 2”)● Coding form validation is not much fun● HTML5 forms add validation to the browser● Live code demo● Lets look at more
  15. 15. What about legacy browsers?●
  16. 16. 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
  17. 17. Geolocation● http://html5demos.com/geo● Modernizr can test support
  18. 18. Browser storageCookies 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)
  19. 19. 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>
  20. 20. ... 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)
  21. 21. Thank you! brucel@opera.com, http://dev.opera.comwww.brucelawson.co.uk, twitter.com/brucel www.html5doctor.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×