HTML5 is a feature rich specification and it breaks the traditional browser model. It allows developers to code their application very differently. It is emerging as a paradise for developers and they don’t have to rely on external plugins to integrate rich features. Here is a list of interesting features and techniques which HTML5 brings to the browser stack.
· Canvas - <canvas> element allows the browser to render bitmap and it opens a new dimension to the browser. One can render graphs, visual images, game graphics etc. The canvas is not a plain tag but API so one can leverage and draw shapes under the defined rectangle.
The developer needs to make a simple check to see the browser is supporting it or not by following simple call.
test_canvas = !!document.createElement('canvas').getContext
If test_canvas is “true” then the browser is supporting it and one can start leveraging it. API for canvas includes shapes, patterns, gradients, text etc. It supports 2d and 3d context as well. Canvas is a very powerful feature of HTML5 and widely getting used across applications and web sites.
· Video - <video> element with the API is a key component of HTML5. It is the need of the time and in today’s world information is being converted into videos and gets circulated around. “CODEC” is a language for video and it converts it into streams which browser can process. HTML5 supports video formats and no external player or library is required to play them in HTML5 browsers. One needs to check which CODEC is supported before initiating the play calls.
We get “true” for above call and start implementing our threads through the worker.
test_offline = !!window.applicationCache;
· Geolocation – Geolocation allows to determine your position on globe and can be used by application to localize the page. If you are from New York right now then you get apple shops nearer to you by leveraging geolocation. Geolocation can be fetched by your IP, wireless connection, mobile tower or dedicated GPS hardware if available. HTML5 call determines latitude and longitude from underlying call and passes it to the application. Following call gives a quick availability of the feature within the browser.
· Web Forms & Input – HTML5 is having enhanced web forms which include various data types (email, URL, time etc.), place holder, auto focus, sliders, spinbox, pickers etc. It allows user to submit data easily and developer can use these controls to craft effective forms. Also, the form allows built in validation for those types as well.
· History API – History API supports APIs like pushState and it allows navigating through browser history during the brower’s life cycle. HTML5 API controls its value and can feed across iframes as well. Following call gives an availability of the feature within the browser.
· File System API – HTML5 application can create a virtual file system on sandbox with a specific domain. On the system either temporary or permanent files can be created. Few APIs and blob are supported to create any type of files and directory. These files can be consumed during the application life cycle and allows power feature for developers. Following call gives an availability of the feature within the browser.
test_fs=!!(window.requestFileSystem || window.webkitRequestFileSystem)
Above is a limited list of features, HTML5 supports several more features in the current version and others are in pipe for future specifications. Features like IndexedDB, Web Messaging, Drag-Drop, XHR (level 2), Contacts API (microdata), File APIs etc. In a nutshell all these features and more provides a powerful platform for developers to create thick client applications which can run in any native browser without any plug-in support.