The HTML5 revolution
By now you’ve probably heard of HTML5. If you haven’t, it’s the latest version of the web markup language which promises to take website interactivity to new levels. It’s also HTML5, Javascript and CSS3 that will underpin a new generation of web applications.
Here we look at some of the features of HTML5 and some of the applications those features make possible. You will need a relatively new browser to view most of these demonstrations. Most current versions of Chrome, Firefox, Safari and Opera should be suitable.
Multimedia manipulation
Until recently, web-based video relied on Flash, Adobe’s rich media language. HTML5 now makes it possible to embed video files directly into a website without needing to rely on Flash and using the new “video” tag. However, coupled with Javascript, the embedded video can be manipulated in realtime – rotating, scaling, even exploding video is possible with the video tag. This demonstration shows how a video can be rotated while playing. Another, more interesting example, is this which allows users to click on an area of the video which then “explodes”.
Audio is also a rich area for HTML5 developers. No longer restricted to simply playing audio through a browser, web developers can also make it possible for images to respond to the audio or even allow users to manipulate the action on-screen. One of the best examples of this is this application which combines music visualisation with user input.
Artistic input
HTML5 also has the new “canvas” tag which is an area that can be used to house content or receive input from users. Like the video tag, developers can use the canvas tag to create regions of dynamic content without relying on external plugins. There are a number of simple and more advanced examples of canvas at work on the Internet.
The web the way you want it
One of the more interesting uses of this new web interactivity is the ability of users to manipulate what they see on-screen. One of the better examples of the layout opportunities is this newspaper demonstration which allows the user to change the layout of a news site including changing the number of columns, the gaps between the columns and whether text is justified or not.
Similarly, users can also be give the power to directly edit the words on the screen. In this simple example a user can add, change or delete words directly in the browser.
Geo-Location
HTML5’s geo-location capabilities are already being included in many popular browsers. The geo-location features allow users to share their current location with the site they are visiting. The feature uses a combination of GPS, WiFi, IP address and Bluetooth to determine the user’s position. Typically this is more functional on mobile devices with built-in GPS or location-aware hardware. There are many opportunities for geo-location-capable browsers, including customised search results, location-specific maps and listings and a host of others. Users have to actively give permission to a site to obtain their location to prevent against abuse. A geo-location example can be found here.
Gaming
Flash-based games are hugely popular on the Internet. With HTML5 it is possible to create web-based games that are every bit as good as their Flash counterparts but don’t rely on Flash to work. Games built using HTML5 range from the simple, such as Pac-Man, to the complex, such as 3D Tetris. Examples of these games include Google’s Pac-Man, 3D Tetris, Pool and Galactic Plunder.
The HTML5 revolution << Comments and views
Loading ...