HTML 5

Where HTML5 is used?
HTML 5 is used to develop any kind of online application without using additional plugins. It can be used to develop application with animation, apps, movies, music and even any other complex application. The applications for Tablet, Netbook, Notebook, Smartphone or Smart TV can be developed using HTML5. The applications which run offline (i.e. when you are not online) can be developed using HTML5.  Because of all those reasons many vendors such as  Google, IBM, Microsoft, AOL, Apple, Nokia, Opera and many other are working with HTML5.

Difference between HTML and HTML5 :
Below are the major differences between HTML and HTML5 –
1.       In HTML 5 new features are added such as Canvas, better support to Video and Audio tags compared to HTML
2.       No need of external plugins such as Flash in HTML 5, where as in HTML there is need of external plugins like Flash.
3.       Error Handling in HTML 5 is easier than HTML.
4.       Markup is used to reduce scripting in HTML5, However in HTML there is no such provision.
5.       HTML 5 is device independent. Application can be developed for Netbook, Tablet and Smart TV etc. using HTML 5.  It is not possible with HTML.

What are the new features in HTML5?
Let see some important new features in HTML5 –
1.       The video and audio new elements are used for media playback\
2.       For drawing 2D pictures or images canvas element is helpful.
3.       Some interesting elements for writing content are introduced such as footer, header, article, nav and section
4.       HTML 5 has local storage support.
5.       Search, url, date, time, email and calendar such new forms are introduced in HTML5.

Let’s start discuss various important aspects of HTML5 -
Canvas: In order to draw graphics on web page on the fly, canvas element of HTML5 is used. The methods such as paths, circles, boxes, text etc. are present in canvas element in order to draw graphics and also for adding images to web page.
Different browser supports for canvas :
Firebox, Opera, Internet Explorer 9+, Chrome and Safari browsers support canvas element. As HTML5 is still in evolving, there still scope for improvement in browser support. The Internet Explorer 8 or Internet Explorer 7 or earlier version do not support canvas element of HTML5.
How to create Canvas?
In order to create rectangular area on HTML page, canvas element is used. As like table  element in HTML, canvas element as do not have border or content by default.  The canvas tag example is given below –
<canvas id="magmaCanvas" width="500" height="500"></canvas>
If you see in the example, it is required to provide id, width and height attributes of canvas element. We can write canvas element as many as we need. If you want to add style to your canvas element as well as border then use below code snippet –
<canvas id="magmaCanvas" width="500" height="500"
style="border:2px solid #000000;"></canvas>

We can write on canvas using Java script. Canvas is two dimensional grid structures and hence it is defined with coordinates. If you want to draw line on canvas, you have to use canvas path such as moveTo(x,y)  and lineTo(x,y) etc. Using attractive fonts you can write content on canvas. What if want to draw rectangles, circles, text or lines? Yes you can create those figures using canvas gradients such as createLinearGradient and createRadialGradient.

What is SVG in HTML5?
SVG is abbreviation for Scalable Vector Graphics which is used to create vector based graphics. If you create graphics using SVG, even if resized or zoomed the quality of graphics remain same. The animation of each and every element and attribute is possible in SVG. You can use any text editor to edit as well as to create SVG images. Such SVG images can be indexed, searched, scripted as well can be compressed.
Different browser supportsfor SVG :
SVG works very in fine in most of the browsers such asFirefox, Internet Explorer 9+, Opera, Safari and Chrome.
How to create SVG image?
Below is the sample example of SVG image in HTML5.  You can you below code in order to get SVG image in your web page i.e. HTML5 page.
<html>
<body>

<svg width="500" height="300">
  <polygon points="120,20 50,200 220,70 20,80 190,200"
  style="fill:lime;stroke:red;stroke-width:6;fill-rule:evenodd;" />
</svg>

</body>
</html>

What is Geolocation in HTML5?
In HTML5, Geolocation is used to find out user’s position. Off course, the privacy is major factor in it, so location will not be available, if user do not approve to show the position or location.Geolocation also helps in retrieving information specific to location such as points or hotels etc. of interest near to use, with GPS road details can be captured.
Different browser supports for Geolocation:
Most of the major browsers support Geolocation feature of HTML5. Examples of it are Internet Explorer 9+, Chrome,Firefox, Opera and Safari. Currently available smart phones give more accurate position with GPS use.
Methods for Geolocation:
getCurrentPosition is one of the method which is used to get information about the location.Latitude, longitude, accuracy, altitude, heading, speed and timestamp these are some parameters used for getting current position.


There are other two interesting methods are present such as watchPosition and clearWatch. watchPosition method returns position of user even if user moves from one location to other location. The clearWatch method is used to stop the watchPosition method.

No comments:

Post a Comment