HTML5 is the 5th major version of the Hyper Text Markup Language and I have to say it has some great defining features. There is now much better integration with different types of media, 2d and 3d graphics. HTML5 has also made it easy for cross platform comparability, making your web designs more portable across systems and browsers. Below is an example of how easy it is now to include video in your website. There is far less script to worry about, all you really have to do is include a “src� to identify your media and away you go. Here is a simple embedded mp4 encoded video:
The new <canvas> element allows you to easily and more effectively create graphics on screen. It could be used to create graphical objects, games or animations. The following script would include the canvas element within your HTML document.
You could access this <canvas> element through the Document Object Mode or by using getElementById() method. var canvas = document.getElementById("newcanvas");
This is how it may look with the following HTML structure:
The canvas will be blank to start with. To display something you need to access the rendering context and then draw on it. The canvas element has a DOM method called getContext, this is used to obtain the rendering context and all of its drawing functions. The getContext method takes one parameter the context 2d. You can use the following code to get the context and to check if the current browser supports the <canvas> element: var canvas = document.getElementById("newcanvas"); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here
} else { // canvas-unsupported code here } Once we have checked for browser compatibility you can now use the canvas to draw an object. The following code would create a rather pleasing rectangle:
Another great addition to HTML5 is SVG element or SCALABLE VECTOR GRAPHICS. These can be great for displaying vector representations of
graphs and pie charts. The following is a simple document marked up to display a red filled vector circle:
You can also create polygons, ellipse, lines and even gradient shapes great for creating great looking vector presentations. Session storage is a new element which is very helpful for membership or ecommerce sites. If a user is buying from an e-commerce site and opens up two windows at the same time whilst carrying out a transaction, sometimes a user may end up making two transactions by mistake. To stop this, a 'session' will be created and all user data will be saved within a variable, so even if two or more windows are open only one transaction can be carried out. The session with be access by any page of the same site by any one user. The following code is an example of how to use this variable:
Local storage give the user the ability to carry information from page to page. For example user information within site can be saved and carried over to other pages. Cookies do the same job but have to send data with each request this can be slower and more cumbersome.
A local variable will be created to store information even after the page has been closed. Later, upon opening the window the data will be saved in local storage ready for you to carry on where you left off.
Below is the code to create a local variable:
To delete local storage for obvious security reasons the following code would be used. The 'key' being the value you want to delete.
These last three elements work in a similar way to session cookies, but the advantage is that each change doesnâ&#x20AC;&#x2122;t require a new request to the server. This also stops cookies being sent for every request, this can slow down your system by sending the same data at each request. The session and local storage are more secure. Cookies are sent with every request meaning unencrypted data is being sent consistently to the server. Another disadvantage of cookies is that they are limited in storage space to about 4 kb, not a lot of storage to save much data. Now this is just a brief introduction to to HTML5, but I'm sure all Web Designers and internet savvy professionals will already see what advantages it has. Happy creating!