Posted by Steve on July 30th, 2011 |
0 commentsIntroduction
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 Tags
Lets begin with the new 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. Lets 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:
HTML:
<canvas id=”canvasArea" width="500" height="500">
JavaScript:
<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 and 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 to applications to track and store information when a user is on the website. This has traditionally been stored in cookies. Before this
Google release 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 3rd 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 overlayed 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.
CodeProject
