HTML5, CSS3 and Javascript – The Future of Interactive Websites?
So what is all this fuss about HTML5 then? How does it affect me? Well, in short, HTML5 is the next version of HTML, the computer language that webpages are written in.
Support and compatibility
As more and more of the world have come online, the demand for rich, interactive content has risen rapidly. More and more, website developers were reliant on 3rd party plug-ins (such as Flash, Shockwave and Silverlight) to seamlessly deliver this content. The aim of HTML5 is to bring in native support for Video, Audio, Animation etc. Removing the need for the use of 3rd party software. There are currently four browsers which support limited HTML5 features:
NB: Windows Internet Explorer 6 and 7 are not compatible, while 8 has very limited support.
There are also some downloadable plugins including Google Chrome Frame which integrates with almost any desktop web browser (including IE 6 and 7) to provide HTML5 compatibility.
As HTML5 is still in its infancy, cross-browser compatibility is an issue, because the different browser and hardware manufacturers are yet to agree on how the code is interpreted and standardised, although with HTML5 they are all talking about standards together for the first time.
As with all things in life that require multi-party agreements, it will take a long time for this to be agreed as a complete standard, we're still some time away from HTML becoming a W3C compliant language, however it's expected that HTML5 will reach Candidate Recommendation stage sometime in 2012 (meaning that all the major browser providers will have an outline to work to) and will hopefully become a W3C recommendation by 2022. Despite this, many people (including Google) are already using HTML5 by ensuring cross-browser compatibility.
There is also a device called Google Chrome Frame (as well as alternatives) which upgrade older versions of Internet Explorer to support the new standards.
What HTML5 can do
Whilst the advantages of Video and Audio support are obvious, another major introduction to HTML5 is the Canvas tool. This allows elements within the canvas area to be manipulated by the user, or by a Javascript program - for example, on 07/09/2010 Google used some HTML5 on their homepage so that their logo, made up of coloured balls, exploded when you moved the mouse cursor near it. We've grabbed the bit of code used and saved a copy here for you to look at.
Other possibilities were shown recently an interactive HTML5 music video for Arcade Fire's "The Wilderness Downtown", where the user enters a postcode where they grew up, and the video is customised with Geo Location look-ups to Google Maps and Google Streetview which interact with the main video.
We're also developing an "HTML5 Playground" where you can see some of these new features using code developed in-house - check back in the future to see the cool things we come up with (provided you have the latest version of Safari, Chrome, FireFox or IE9 or alternatively Google Chrome Frame).
CSS3
Alongside HTML5 comes an updated CSS standard called CSS3. CSS3 extends on the current standard CSS2.1 to include greater ability to style object with attributes like Transparency/Opacity, Native Gradients and Radius Edges. If you have ever managed a website, designed one, or manipulated images for the web, you'll know what a pain rounded edges on images can be.
The CSS3 working draft of the W3C background module includes scope to round corners using CSS. This allows for options to add a radius to: images, boxes and areas on the page; without the need to manually adjust each and every part of the site using a transparent radius or other graphics. However currently more advanced shapes are not supported.
Using a combination of HTML5 and CSS filters should enable web developers to keep pushing at the boundaries of what's possible, without excluding those poor souls still stuck with IE6.
Javascript
The introduction of HTML5 and CSS3 really allows JavaScript to spread it’s wings. JavaScript currently can be used to manipulate elements on a page, changing it’s style or position dynamically depending on user reaction. HTML5’s Canvas tool, because it uses a standard tagging system found elsewhere in HTML, can easily be manipulated by JavaScript allowing even further interaction between a webpage and it’s user. Expect many of your favourite Flash games to be replicated in HTML5 Canvas and JavaScript in the coming years – One of which is our game “Snake or Cake” which you may recognise. Born from our obsession with all things cake, and our itch to dabble in HTML5 and JavaScript.
Using a combination of HTML5 , CSS3 filters and future releases of JavaScript should enable web developers to keep pushing at the boundaries of what's possible, without excluding those poor souls still stuck with IE6.