HTML5: The New Frontier

Introduction

The intention of this post is to look at the changes in HTML5. HTML5 is the next revision of the language that is generally used to write content on the web. The new version of HTML has been compiled by The World Wide Web Consortium (W3C). The W3C is (in their own words) “an international community where Member organizations, a full-time staff, and the public work together to develop Web standards”. The new version of HTML boasts a number of new features that are useful.

Overview of Features

HTML5 has made a number of fundamental changes to the structure of the mark-up that is written. This can be seen in the new elements to denote the sections of the document. Previously, they would be the same element, i.e., a <div> element. Now there are elements for each section. With the new section elements, there is the canvas tag which allows rendering of 2D shapes on the page. These are not the only exciting new element, the addition of audio and video as well as offline storage allow the developer to bring the site alive without the use of third party plug-ins.

New Layout Tags

Let's begin with the new layout tags. W3C has introduced a number of new tags that allow the programmer to be able to embed music, video and graphics without the use of flash or Silverlight. Let us take a look a few of those tags and their usage and function.

Canvas Tag

The canvas tag is used for rendering graphics on a page. The way you would draw on the canvas is to define a canvas object in the HTML, then define and draw the objects in JavaScript. Have a look at the sample:

<canvas id="canvasArea" width="500" height="500">

<script>
//The following script will create a 2D grey rectangle on the canvas element
$(document).ready(function(){
var canvas = document.getElementById('canvasArea');
var context = canvas.getContext('2d');
context.fillStyle = '#909090';
//fillRect(x-pos, y-pos, width, height)
context.fillRect(0,0,80,100);      }
});
</script>

Audio Tag

The Audio tag defines an audio stream that can played in the browser. The audio tag allows a number of different formats. The following displays the use of the audio tag:

<audio controls="Audiocontrol">
<source src="SourceFile.mp3" type="audio/mp3" />
</audio>

Local Storage

Local storage has long been used by applications to track and store information when a user is on the website. This has traditionally been stored in cookies. Before this, Google released Google gears which promised to store information on the client using an installed application on the users machine. HTML 5 storage works on the client browser without any 3^rd party application. To use it, you would need to write JavaScript to fetch and store values in the following ways:

//Make sure nothing has been stored
if(localStorage && !localStorage.Storage)
{
	localStorage.Storage = "Store This";
	document.write("<p>Storing Value: " + localStorage.Storage + "</p>");
}
//Write value to html
document.write("<p>Stored Value: " + localStorage.Storage+ "</p>");
//Refresh to view the sequence of events.

There is a limit on the amount of data that you would be able to store. There is a specification from W3C (link) on storage but it does not specify the limit. It looks as if it may be around 5MB, but this may vary. To make sure you don’t cause an error if the limit has been reached, use the following script:

//Making sure the limit has not been reached
try {
    localStorage.setItem('Storage', 'value');
} catch (e) {
      if (e == QUOTA_EXCEEDED_ERR) {
           //Do some error handling
    }
}

Here are some use operations for interacting with local storage:

//Making sure the browser supports localstorage:
if (typeof(localStorage) == 'undefined' ) {
    alert('Your browser does not support HTML5 localStorage. Try upgrading.');
}

//removing an item from local storage:
localStorage.removeItem('Storage');

//Adding an item: (name, value)
localStorage.setItem('Storage', 'value');

Geolocation

With the growing use of smart internet enabled phones, geolocation can help a site to provide rich information to the user. This can be overlaid with a map service like Bing or Google to display any number of useful ideas. To use the geolocation feature in HTML5 is very easy:

$(document).ready(function(){
    LoadGeolocation();
});  

function LoadGeolocation() {
    navigator.geolocation.getCurrentPosition(GeolocationPosition);
}  

function GeolocationPosition(position){
    var lat = position.coords.latitude;
    var lon = position.coords.latitude;
}

Conclusion

As we have seen, there are some exciting features in the new version of HTML 5. I am sure that they will lead to an improved user experience. Have fun!