RSS

HTML5 in a nutshell

19 Feb

HTML5_Badge

HTML 5 Definition

HTML5 is the fifth revision of html language standard for structuring and presenting contents for the web.It consists of family of web technologies comprises of HTML, CSS , JavaScript  and is being standardized by W3C and Web Hypertext Application Technology Working Group (WHATWG).

In addition, HTML5 technology comprises of a collection of technologies, APIs and features to enable creation of sophisticated, complex web applications and cloud application development platforms. According to Juniper Research, the number of cloud computing subscribers is expected to grow rapidly in the next five years as the cloud-based mobile market will generate annual revenue of $9.5 billion in 2014 from $400 million in 2009 [1]. Furthermore, by 2016, more than 2.1 billion mobile devices will have HTML5 browsers, up from just 109 million in 2010 [2].

Moreover, cloud-based apps will not only offer an improved offline usage through data caching where disconnection from internet won’t interrupt apps usage, but also reduce server load demands which will make cloud-based mobile connectivity as a means to improve access of locales with poor coverage. Additionally, HTML5 technology is already strongly emerging in internet, such as video sites, like YouTube’s video format H.264, which can be viewed by browsers that support HTML 5 or Gears project by Google replacement to HTML 5.  Mobile Application developers who adopted HTML 5 technology may be enabled not only seamlessly port their apps to several devices, but may also bypass opaque processes and constraints imposed by app stores.

Limitations of the current Browsers

Originally, the web was designed to support static hypertext documents, then, web browser plug-ins, such as applets, flash, were created to support dynamic applications. However, more browser limitations were discovered, where HTML 5 capabilities may address. For instance, current browser limitations include peer-to-peer communications or performance issue in client/server communication, push notifications as well as local storage for offline usage and high quality graphic support.HTML 5 canvas feature enables application developer to easily embed external multimedia, such as video, images directly in to the application. Further, apps developed in HTML 5 allow users to launch web pages in offline mode and can store files and other information in the documents on the mobile devices. In addition, HTML5 standard supports Canvas element combined with API which supports both 2D and 3D drawing elements. Like Canvas element, CSS3 also offers graphic capabilities but with better performance.Further, HTML5 also came with new other features, such as Offline Storage, Semantics, Audio/video, Application Cache, Automatic SSE, and Geolocation.

Offline Storage- Difference between sessionStorage and localStorage

Multiple new APIs were introduced in HTML5 spec to address offline storage challenge. WebStorage API is based on key-value pairs where localStorage object provides a Storage Object for an origin. For instance, storing current movie under a key “currentMovie”, and giving value “movieState”, localStorage will provide storage object,  localStorage.setItem(“currentMovie”, “movieState”), while value can be loaded by via getItem method such as localStorage.getItem(“currentMovie”). Furthermore, sessionStorage also stores data on the client side. The difference between sessionStorage and localStorage is that while sessionStorage stores data for one session, localStorage object stores it with no expiration date. In addition, offline storage supports other APIs such as WebDatabase which can used to manipulate client-side databases using SQL , IndexedDB which performs advanced key-value data management by using transactional databases to store keys and corresponding values by implementing through B-tree data structures  and FileSystem API  for creating folders and storing potentially huge files.

Replacing <DIV> element in HTML5

Semantics prior to HTML5, structuring pages such as footers, headers, columns or any other sections had been defined with div elements, for instance, <div id=”footer”>. Fortunately, HTML5 introduced new elements to represent different sections in pages. For instance, one can use <header> or <footer> instead of <div> element.

Embedding videos/Audios in to the web page

HTML5 introduced new media elements which facilitate embedding video/audio elements in standard way on a web page for playing videos or movies and audio files with captions. For instance, embedding video is a straight forward as

<video width=”400″ height=”300″ controls=”controls”>

<source src=”mymovie.ogg” type=”video/ogg” />

<source src=”mymovie.mp4″ type=”video/mp4″ />

<source src=”mymovie.mpg” type=”video/mpg” />

video tag not supported in your browser!!!

</video>

<video> element supports more than one <source> element which can link to different video formats.

Support of Application Cache and its benefits

HTML5 introduced a way to cache web application to be accessed when there is no internet connection. Moreover, Application Cache comprises a set of cached resources consists of one or more resources identified by URLs falling into one or more following categories master entries, the manifest, Explicit entries and Fallback entries . In addition, application cache gives web application three benefits, speed and performance, offline browsing and reduced server load.

Events (Server-Sent-Event)

HTML5 also introduced Server-Sen-Event (SSE) to enable web servers to push data to the client over HTTP by creating an EventSource object and registering an event Listener. In this way, web client will never need to regularly poll for updates, since any updates will pushed to it. For instance, twitter, news feeds, sport results updates will automatically be pushed to web client.

Other useful APIs

There are some other useful APIs such as PageVisibility API, Battery Status API, and getUserMedia API. In the case of Pagevisibility API, it is application programming interface which enables web application to determine the visibility of the current page. It is defined in HTML 5 specification that visibilityState attribute returns one of these four states, hidden, visible, prerender or unloaded.                                                                                                                                                                                   

partial interface Document    {

readonly attribute boolean hidden;

readonly attribute DOMString visibilityState;

// “hidden”, “visible”, “prerender”, “unloaded”

};

Even though Battery API scope is very narrow, it is an important API. With this API, developers are enabled to determine the status of the battery of the mobile device and proactively conduct desired decision to improve user experience rather than making assumptions. In addition, JavaScript getUserMedia API provides application developers to access underlying device capabilities, such as camera, microphone, through calling rather than installing plugins. Since HTML 5 is distributed through device browser, application discoverability is rather high. For instance, almost all browsers in the market support HTML 5 capabilities, even though browser fragmentation may preclude web apps to seamlessly run across different browsers.

Is HTML5 a dominant technology ?

Emerging HTML 5 technology had already had a substantial impact on existing web application providers. For instance, Amazon’s kindle format 8, which is principal format for electronic books, supports HTML 5, adobe’s acquisition of Nitobi software which developed PhoneGap and abandoning Flash on mobile platform may also promote HTML5 domination in application platform markets. Furthermore, Financial Times’s FT application was developed with HTML5 and within 10 months passes 2m end users [3], thus proving the penetration capacity of Strobethis technology. In addition, Microsoft Corporation has also demonstrated windows 8 apps developed with HTML 5 and JavaScript to access the full power of the PC [4].  What is more, in Nov. 2011 HTML5 platform creator, called Strobe, was acquired by Facebook [5].

Therefore, all these acquisitions and demonstrations may prove that HTML5 technology family will dominate web application platforms, including mobile platforms. As a result, several mobile platforms already emerged into the market, such as PhoneGap.

[1] Cloud Times: “Mobile Cloud”,  http://cloudtimes.org/mobile-cloud

[2] ABI research,” 2.1 Billion HTML5 Browsers on Mobile Devices by 2016 says ABI Research”,http://www.abiresearch.com/press/21-billion-html5-browsers-on-mobile-devices-by-201

[3] Guardian Apps Blog“Financial Times passes 2m users for its HTML5 web app”                       http://www.guardian.co.uk/media/appsblog/2012/apr/24/financial-times-web-app-2m

[4] Julie Larson-Green, “Previewing Windows 8” , Microsoft News Center, 01. June.2011, http://www.microsoft.com/en-us/news/features/2011/jun11/06-01corpnews.aspx

[5]Matt Rosoff  “Facebook Buys a Company to Help It Master Mobile Applications”, Business Insider, 8.Nov.2011, http://www.businessinsider.com/facebook-snags-new-talent-to-help-with-mobile-push-2011-11

Advertisements
 
Leave a comment

Posted by on February 19, 2013 in Tech News

 

Tags: , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: