Web Developers are commonly asked to create applications which stream video, display fluid animations, play music and integrate with Twitter and Facebook. In many cases if one wanted to achieve all of these things you had to leverage on a number of different technologies which probably included Flash, Flex or Silverlight.
This requirement to learn new languages and plugins can increase the time it takes to get a project out the door and the need for many different specialities can definitely increase the cost of getting something impressive done. HTML5 changes this – with support for high-quality animation, video and audio embedding as well as many other types of rich content, the future of the web may be arriving soon. Here’s what HTML5 will give you.
- The canvas element provides a highly powerful and very straightforward way to draw arbitrary graphics and animations on a web page using pure Javascript. For an example of this, take a look at this simple drawing area or these amazing Chrome demos. If however you would like to see some of the real horsepower behind the Canvas element, take a look at Mozilla’s BeSpin. Bespin is an extensible code editor with an interface so rich that it’s hard to believe it was written entirely in Javascript and HTML.
- The video element aims to make it as easy to embed video on a web page as it is to embed images today. No plugins, no mismatched codecs. See for example, this simple video editor running in Safari. And check out the page source for this YouTube demo. (As a special bonus, the video is demonstrating the power of O3D, an open source 3D rendering API for the browser.) Imagine being able to directly embed your videos without needing to worry about Flash again.
- The geolocation APIs make location, whether generated via GPS, cell-tower triangulation or wi-fi databases (what Skyhook calls hybrid positioning) available to any HTML 5-compatible browser-based app. A popular demo that’s been floating around is using Google to figure out your current location to any Google map using built-in Browser functions, and another interesting development has been Google Latitude for the iPhone. What’s really impressive about Latitude on the phone is that it’s a web app, with all the platform independence that implies, not a platform-dependent phone application.
- AppCache and Database make it easy to build offline apps. The killer demo is one first at Web 2.0 Expo San Francisco some time ago: offline gmail on an Android phone.
- Web workers is a mechanism for spinning off background threads to do processing that would otherwise slow the browser to a crawl. For a convincing demo, take a look at a web page calculating primes without web workers. As the demo says, “Click ‘Go!’ to hose your browser.” Then check out the version with web workers. Primes start appearing, with no hit to browser performance. Even more impressive is a demo of video motion tracking, using Javascript in the browser.

Share
Related posts:
- 13 Incredible New JavaScript Projects From Google Labs This post will introduce you to an excellent...
- 13 Incredibly Fresh New HTML5 Canvas Demos You all tweeted in to vote and today I’m...
- Web Workers – Amazing Parallel JavaScript Tasking For Your Application I’ve been looking at some of the cool new...
- Web Workers – parallel JavaScript tasking for the masses I’ve been looking at some of the cool new...
- How to create impressive animations in jQuery with .animate() I’ve been asked many times over the past month...
Related posts brought to you by Yet Another Related Posts Plugin.
September 26th, 2009 at 6:06 am
> no mismatched codecs.
http://www.webmonkey.com/blog/W3C_Drops_Audio_and...
September 26th, 2009 at 9:53 pm
In terms of codecs, at the very least you are down to 2 when using HTML 5 video: Ogg and H.264.
September 26th, 2009 at 9:34 pm
[...] And here's another link-laden HTML5 overview worth checking [...]
October 8th, 2009 at 1:06 pm
[...] all tweeted in to vote and today I’m sharing a whole new set of HTML5 Canvas demos that really show you just how far you can push the envelope on the <canvas> [...]