13 October 2009
The Future of HTML 5
At FOWA London 2009 Bruce Lawson gave an introduction to HTML 5 and how it might be used in the future.
The HTML 5 spec was originally called “Web Applications 1.0″. Most of the attention has been on the new markup elements, but in his talk he takes a further look at the applications side of the spec, covering:
- Dynamic images and graphs with canvas
- Eliminating much forms validation with webforms 2.0
- Local storage automagically saving your data
- Geolocation
- Building toolbars and menus.
Editor’s Note: We’ll be covering “How HTML 5 is Going to Completely Change your Web App” at The Future of Web Apps in Miami.
You can jump straight to the video, view the slides, read the transcript (thanks @joeloverton for doing this!), or check out the resources he demos in the talk:
- Eye-candy canvas
- canvas first-person shooter
- canvas 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, placeholder, regex validation (Try in Opera and Chrome)
- modernizr – A small HTML5 capability detection library
- HTML5demos.com – Remy Sharp’s demos of geolocation, offline storage and web database and many others
- Video demos
Other useful resources:
- SVG vs. Canvas on Trivial Drawing Application: a comparison of canvas and SVG
- HTML5 Authors spec
- A video of Dean Edwards demoing his unreleased JavaScript library that detects and plugs the holes in current browsers’ HTML5 support
There are some great beginner canvast tutorials on the Opera Developer:
- 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
The video
Full transcription available at joeloverton.com/html5. We’d like to say a HUGE thank you to @joeloverton for doing this transcription!
The slides
Enjoy this article?
If you liked this article, feel free to re-tweet it to let others know. Thanks, we appreciate it :)
We love .net Magazine
We're big fans of .net so they've hooked us up with a rad deal: Save 45 percent on your subscription.
bruce
# October 13, 2009 - 2:25 pm
Apologies for the lack of transcript. I asked for one, but the organisers forgot. They’ve promised to post one a.s.a.p.
Ryan Carson
# October 13, 2009 - 9:26 pm
We’ve now uploaded it to joeloverton.com/html5. We’d like to say a HUGE thank you to @joeloverton for doing this transcription!
bruce
# October 14, 2009 - 11:50 am
Thanks Ryan and Joel!
Ulrik
# October 13, 2009 - 11:25 pm
Very very interesting stuff comming up in html5. But what i was wondering is, if the validation is in the browser/the document loaded in your browser, isnt it easy to bypass then? Or is that functionality hidden in the source?
Helio Alves
# October 14, 2009 - 2:56 pm
Thank you very much for this presentation Bruce, looking forward to see more HTML 5 in action.
When will we be able to fully use HTML5 and when will the browsers fully support it?
Thank you very much again :)
Haroun Kola
# October 14, 2009 - 4:24 pm
Thanks, it’s great to be kept updated with what’s about to happen in HTML
Dmitry Baranovskiy
# October 15, 2009 - 5:46 am
One small correction: Raphaël doesn’t use Flash. It uses VML.
bruce
# October 15, 2009 - 3:19 pm
@ulrik validation is in the browser – it has rules that know the correct syntax of emails, URLs etc.
@Dmitry Baranovskiy It was a “speecho”; it’s SVGweb that uses Flash. Apologies. (There were 800 pairs of eyes on me so I was a little nervous)
@Helio Alves I couldn’t say. But of all the releases I’ve seen, from every vendor, there are more features being added every time. I can only speak for one browser company, but Opera has a very exciting roadmap for html5 in the browser.
Jon Randy
# October 16, 2009 - 7:31 am
For a more impressive Canvas based FPS take a look at Canvex – http://is.gd/4m2yB
paul
# November 8, 2009 - 10:43 am
“It’s backwardsly compatible” :D
Cheltenham Designer
# November 27, 2009 - 9:09 am
The future of the web is finally looking standards compliant!
This new technology is going to revolutionise the way that web apps are built, let’s hope that the browser makers can get a consistent implementation going in the next year or so.
There is still the issue of consistency between browsers at the moment (Firefox supports .ogg video, whereas Safari prefers the MP4 format for the tag) which is stopping everyone from using this technology, but as soon as these issues are ironed out we’ll start to see mass adoption of this technology.
Mia
# December 11, 2009 - 9:41 am
Nice! There is another article highlights the capabilities and constraints of the new JavaScript API which is based on wireless geolocation and compare it with the server-side IP geolocation.
http://www.ip2location.com/html5geolocationapi.aspx
Rajib Roy
# December 14, 2009 - 12:01 pm
We need HTML 5 to improve our site performance.
Antonio
# May 14, 2010 - 11:40 am
With this kind of informative articles on HTML 5, i see a smooth transition from XHTML, great stuff…thanks.