Future of Web dev : HTML 5

So why is there so much hype about HTML5? It’s a really big deal, especially for mobile browsers and “on the go” Web users. It is predicted that HTML5 will standardize many important use cases for Mobile Web browsing that were previously implemented using proprietary APIs.

HTML 5 isn’t an officially ratified standard ….yet. The spec continues to edge closer to completion, however, and when combined with JavaScript and CSS3, HTML5 can do some really incredible things.This is particularly true for mobile devices. A basic requirement for any modern mobile OS is the inclusion of a modern HTML5-compliant web browser. The leading modern mobile platforms (iOS and Android) both use WebKit as their bases. BlackBerry and Palm are also using WebKit. Also Microsoft’s Steve Ballmer quoted at his key note at MWC 2011 “IE9 which will be coming soon for WP7, will deliver a dramatically enhanced web browser experience thanks to graphics and hardware acceleration that'll make the most of what your handset has to offer.”

What this means is that out of the box, modern smartphones and tablets support the features that make HTML5 so special. It means a big step towards platform independence for the developers.

HTML5 Features for the Mobile

HTML5 is great news for the mobile market. It promises the mobile users:

-          richer Web applications

-          improved usability

-          rendering of rich Web content from third-party plug-ins

-           testable, cross-platform and standards-based interfaces for content development

The new features of HTML5 standardize use cases and technologies that are common in smartphone-optimized Mobile Web applications. In today’s Mobile Web of XHTML-MP or HTML 4 documents, these incredible features are implemented using proprietary devices and browser APIs. With HTML5, advanced Web application features are available in all mobile browsers supporting the markup language, using the same standard syntax and displaying the same standard behavior.

Let’s look at each of these features in detail.

1.     Location Awareness

HTML5’s GeolocationAPI makes the mobile’s geographic location available to a Web application. Previously, obtaining device location was only possible using proprietary JavaScript extensions or server-side integration with a mobile operator API. The API enables repeated location updates by registering callback functions.

Here is an example of how the API can be used for repeated location updates:
function updatePosition(position) {

      // Latitude and longitude are available as member variables

      varcurrentLatitude = position.coords.latitude;

      varcurrentLongitude = position.coords.longitude;

}

// Request repeated updates.This method calls back repeatedly to the

//updatePosition() function until cancelled using clearWatch(), below.

varwatchId = navigator.geolocation.watchPosition(updatePosition);

// Cancel the geographic position updates.

functioncancelPositionUpdates() {

navigator.geolocation.clearWatch(watchId);

}

2. 2D Canvas Animation

The new <canvas> element and JavaScript 2D Canvas API allow two-dimensional drawing, graphics and ….  animations!!!

Cross-platform games thus become possible in mobile browsers.

Here is an example of a canvas element:

<canvas id="newCanvas" width="300" height="400" />

and an example of the 2D Canvas API used to draw an image inside the canvas:

// Obtain a reference to the canvas element

var canvas = document.getElementById('newCanvas');

// Clear the canvas

canvas.setAttribute('width', '400');

// Draw an image on the canvas.

// 'myImage' is a reference to an existing image.

canvas.drawImage(myImage, 10, 10, 100, 50);

3.     Web Storage API in HTML5

The Web Storage API allows documents to persistently store data in a mobile browser. Mobile browsers can write data in one browsing session and read it in the next session.

4.     Offline Application Caching in HTML5

HTML5 documents use a manifest to list all dependent external resources (i.e. CSS files, JavaScript libraries, images etc.). This is probably one of the best features for mobiles since their browsers use the manifest to cache an entire Web application for offline use, allowing mobile users to interact with a Web app while roaming in and out of coverage areas.

5.     Native Audio and Video Controls in HTML5

New <video> and <audio> elements embed multimedia into a Web document without using third-party browser plug-ins. Mobile browsers may natively control multimedia display, codecs and user interfaces.

However, HTML5 does not resolve certain problems of web development, including:

• Fragmentation: Too many vendors implement mobile browsers, creating a fragmented marketplace and forcing developers to adapt Web content to play to browser strengths and avoid browser weaknesses.
• Browsers Bugs: As with any Web standard, HTML5 features may be incompletely or incorrectly implemented in a mobile browser.
• Rushing with HTML5: Mobile browsers may support HTML5 too quickly, implementing features or syntax that end up changed or cut from the final standard.
• Forgetting the Mass Market: Many popular Mobile Web sites use simple markup to quickly provide chunks of relevant information to users. Upgrading these Mobile Web sites to use HTML5 (without implementing content adaptation) could cut off access to millions of users with older, Web-accessible mobile browsers.

Smartphones provide an excellent platform for rolling out HTML5 applications to the Mobile Web users. However, the majority of mobile subscribers still use non-smartphone devices with no ability to update the browser or operating system. Developers must use content adaptation principles to include advanced HTML5 elements only the target mobile browser is known to support HTML5. Content adaptation ensures a satisfactory Mobile Web experience for all mobile users.

For beginners, there is a good book for diving into HTML 5 :

HTML5 – Up and Running

Author – Mark Pilgrim