Key Features of HTML5

19Dec/110

Key Features of HTML5

Lately, we have heard some many exciting things about HTML5 so we, the traceper team, decided to learn what the key features are in HTML5 and how we can use them in traceper.

So we are writing this document to help our project team and ankara gtug community members learn somethings about HTML5. This document doesn’t include every aspect of HTML5, it just consist of parts of HTML5 we find important for us.

Equation of HTML5:

HTML5 ~= HTML + CSS + JS

As we understand from equation HTML5 is not comprised of only new tags in html, it is the new web tech. name which includes new features in javascript, css and html and let me summarise some of the exciting features of HTML5. Before start, I think it is important to point that HTML5 is not completely finished and completely supported by all modern browsers and also some guys say that development of HTML5 will continue in next coming 5 years, who knows we will see if we live...

New Tags in HTML5 (Semantic, Media, etc.)

HTML5 comes with new tags which for semantic web, audio, video etc. Using div, instead of table, have been started in 2002 in web designs, it has some advantages but it is a hell for semantic web however HTML5’s new tags are helpful for semantic web. Here is a structure of a web page in HTML4.

class and id fields can be meaningful for us but they are not standard, they may differ from developer to developer so it is almost meaningless for search engines. But in HTML5 there is an standard like this

What if a developer doesn’t obey the rules in HTML5 for instance nav field doesn’t have a content about navigation or article has a content about header of the web page, the result is probably like that, search engines doesn’t crawl the web site as usual and they produces some unexpected results about web page, lastly web page may not be appear at the right order in the search results.

After mentioning a little about semantic tags, let’s look at some multimedia tags, I think most of us have heard that HTML5 will kill flash, yeap it may, because with HTML5, browsers come with native support audio, video and graphics. We don’t need to use flash to play a video or an audio file. We can use audio and video tags. Here are some examples:

<video> 
<source src="assets/dizzy.mp4" type="video/mp4" />
</video>

<audio id="audio_with_controls" controls autobuffer> 
<source src="http://playground.html5rocks.com/samples/html5_misc/rushus-modal_blues.mp3" type="audio/mpeg" />
</audio>

Here is full list of HTML5 tags with browser compatibility info.

Offline & Storage

HTML5 provides web apps start faster and work even there is no internet connection. Thanks to local storage, App cache, Index DB and SQL DB Specifications.

it is better to use local storage for persistent storage. Here is a simple code snippet

saveButton.addEventListener('click', function () {
window.localStorage.setItem('value', area.value);
window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');

and another code snippet for SQL DB

var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MB
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

According to requirements of the web app or personal choice, one can select SQL DB, Index DB, App cache or local storage to store data in client side. Lastly you can try some examples in here, here and here

Connectivity (Realtime / Communication)

Full-duplex, bi-directional communication over the web. Javascript socket ability can make web apps more efficient and more real-time because by client and server mechanism server can send update any time to client also in client-server communication only data is sent, no http headers, this dramatically reduces the bandwidth. Here is a code snippet about WebSocket

var socket = new WebSocket('ws://html5rocks.websocket.org/echo');
socket.onopen = function(event) {
socket.send('Hello, WebSocket');
};
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert('closed'); }

Also you can look at this example about sockets.

Native Drag&Drop

There is a built-in dnd support in HTML5, as you guess dnd is so simple in browser but not enough, you can also drag file from desktop and drop it on web page or vice versa. You can try this example to drag file from desktop.

Device Access

Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.

2D, 3D, Graphics & Effects

Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser. Here are some samples:
http://alteredqualia.com/canvasmol/#DNA
http://www.kevs3d.co.uk/dev/asteroids/

CSS3

CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.

Conclusion

HTML5 with great features will make web apps more responsive, more attractive and more like apps. However not all browsers completely support HTML5 and development of HTML5 isn’t finished yet. Nevertheless, I think there isn’t left too much time to clear most of the apps running directly on operating systems from market.