HTML5

 

HTML, which stands for Hypertext Markup Language, is the predominant markup language for Web pages. It provides a means to create structured documents by denoting structural semantics for text—such as headings, paragraphs, and lists—as well as for links, quotes, and other items. In 1995, the IETF (Internet Engineering Task Force) published the HTML 2.0 specification. HTML 3.0 was proposed in 1995, but was deemed too complex for implementation by browsers. It was fairly quickly supplanted by HTML 3.2, the first truly popular version of the language.

The World Wide Web Consortium (W3C), the body that had been established to manage the development of future versions of HTML and other Web-related technologies, released HTML 4 in 1997. Up until the 4.0 release, HTML was still plagued by browser-specific versions to maintain styling, which resulted in bloated code. HTML 4.0 changed that by including styling support using Cascading Style Sheets (CSS).

In the last few years, the Web platform has been rapidly accelerating toward supporting more features that once were available only to native applications. In November 2008, with the release of iPhone 2.2, the Safari browser built within the device supported canvas, app cache, database, and SVG features. Since then, more features—such as built-in database and workers—have been added to the industry-leading browsers.

These features are allowing developers to access key graphics, location information, and storage to build powerful applications within the browser. OSS (open source software) Browser usage significantly shot up between 2005 and 2009, going from 50 million to 450 million, respectively. Browser platforms have also significantly improved JavaScript performance, resulting in 100x improvement in some cases.

HTML 5 allows developers to take advantage of these improvements in the browser platform by introducing key new APIs such as:

• Canvas Element
• Video/Video Formats
• Local Storage
• Web Workers
• Geolocation

 

Canvas Element

 

Drawing on the Web has always been challenging and has mostly required plug-ins from third parties, such as Flash and Silverlight. HTML 5 introduces the <canvas> element and defines it as "a resolution dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly." Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common two-dimensional APIs, thus allowing for dynamically generated graphics. Some anticipated uses of the canvas include building graphs, animations, games, and image composition. Here's an example of using the <canvas> element:

<canvas id="exCanvas" width = "400" height="200">
</canvas>

Canvas element can be used for a number of visual representations, including diagrams, user interfaces, animations, charts/graphs, drawing applications, and styling.

 

Video Element

 

Using video today in the browser platforms requires supporting multiple external plug-ins and video formats (.mp4, .wmv, .mov). HTML 5 introduces the <video> element to standardize video display and format. The <video> element can be used to embed video within Web pages. Here's an example of a embedding a video:

<video src="att.mov" autoplay>
</video>

The <video> element does not expose any of the player controls, although it does include methods such as play() and pause(). To add custom controls, the controls attribute needs to be added. The autoplay attribute allows for playing the video on page load.

 

Geolocation

 

Location is now an integral part of enterprise and social applications and most browsers are now location-enabled. The Geolocation API defines a high-level interface to location information associated only with the device hosting the implementation, such as latitude and longitude. The API itself is agnostic of the underlying location information sources. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, Wi-Fi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input. No guarantee is given that the API will return the device's actual location. The geolocation API brings browser-based location to applications. Here's an example of fetching location information from the browser:

Navigator.geolocation.getCurrentPosition()

 

Local Storage

 

HTML 5 storage allow for Web apps to be accessed and useful irrespective of connectivity. The database and app cache store user data and app resources locally. Here's an example of using application caching:

CACHE MANIFEST
/public/doc.html
/images/addBar.png
/css/style.css
/js/doc.js

Here's an example of database usage:

Var sampledb = window.openDatabase("MobileApp", "1.1",SampleDB, 10000);
Function saveData(id, text, timestamp, left, top, zIndex {db.transaction( function (tx){tx.executeSq (— followed by a SQL statement.

 

Web Worker

 

This specification defines an API for running background scripts. This allows for thread-like operation with message passing as the coordination mechanism. An example of using Web Workers would be to perform a computationally intensive task without interrupting the user interface. A worker is a script that will be loaded and executed in the background. Web Workers provide a way to do this seamlessly, for example:

New Worker("example.js")

The above code will load a script located at example.js and execute it in the background.