By Serge-Paul Carrasco on November 7, 2010

Why So Much Buzz About HTML 5

(T) In my own experience, I have not seen very often some great technology being defined through a standard organization. Standards are usually a battle where players push technologies that protect their legacy products and support their product road maps. Having said that, standards are essential to promote product interoperability.

The major stated goal of the present specifications of HTML5 from the World Wide Web Consortium (W3C) according to its editors is to expand the Web’s openness and platform independence by integrating new capabilities that today required proprietary (but often popular) tools such as Adobe’s Flash, Sun’s JavaFx, or Microsoft’ SilverLight to build rich Internet applications.

There are probably two reasons why there has been so much buzz about HTML 5. The first reason is probably that major vendors such as Google, Mozilla, Apple, Facebook, and YouTube have embraced and evangelized HTML 5 applications long before its final specification which might still take years! The second reason is that Apple for its iPhone and iPad considered that because of HTML 5, it does not need to support anymore the Adobe Flash client, creating tensions, between the two companies, widely commented in the press.

Following is an overview of some key aspects of the HTML 5 specifications including graphics and image, video, Web worker, local storage, offline Web applications, and geolocations.

Graphics and Image Tag

Scalable Vector graphics (SVG) and Canvas APIs both introduce the capability to manipulate graphics within a Web page. By doing so they are replacing previous functions offered by tools such as Adobe’s Flash, Microsoft’s Silverlight and W3C’s Vector Markup Language (VML) that complement HTML in various ways to create graphics within Web pages.

SVG is vector-based; it uses high-level geometrical primitives (which defines structure, position, and appearance) to create the images in XML. SVG uses a retained-mode that links all geometric objects in a tree structure; as a consequence event handling is easy.

Canvas is pixel-based; it uses low-level scripts to add graphics to a Web page. Canvas uses an immediate mode where the rendering engine immediately executes the graphics commands; as a consequence event handling is difficult.

While there are use cases where both SVG and Canvas can be used, in general SVG is best suited for easy-to-use interfaces of interactive graphics of medium animations while Canvas is best suited for high graphics animations such as fast games where a large number of elements are being rendered (without mouse interactions only keyboards).

Following is the HTML for the SVG API to create a rectangle:
<svg width=”200” height=”200”>
<rect x=”0” y=”0” width=”100” height=”100” fill=”blue” stroke=”red” stroke-width=”5px” rx=”8” ry=”8” id=”myRect” class=”chart”/>
</svg>

Following is the HTML for the Canvas API to create two rectangles:
<canvas id=”myCanvas” width=”150″ height=”150″>
</canvas>

var canvas = document.getElementById(‘mycanvas’);
var ctx = canvas.getContext (‘2d’);

ctx.fillStyle = “rgb (200,0,0)”;
ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = “rgb (0,0,200,0.5)”;
ctx.fillRect (30, 30, 55, 50)

Video Tag

HTML 5 provides a new tag for video that enables to add to the HTML code an .Ogg, .MP4 or .WebM video. The media player is embedded into the browser which plays natively the media without any specific plug-in. With HTML 5, video rendering is treated as an image rendering. Following is a very simple example of the HTML 5 video tag:

As a consequence, HTML 5 makes the Adobe Flash Plug-In irrelevant; that is the reason why Apple did not announce the support of Adobe Flash on its iPAD.

The HTML 5 specification does not specify which video formats the browser should support, but .Ogg and .MP4 are the two common ones,

Apple Safari supports .MP4 only,
Firefox .Ogg and .WebM,
And Google Chrome .MP4, .Ogg and .WebM.

So in order to have a video watchable across many HTML 5 platforms, a developer might need to encode it in many formats.

Web Worker

Web Workers provides a standard way for browsers to run JavaScript in the background. With Web workers, the developer can spawn multiple “threads” that all run at the same time. These background threads can perform intensive calculations, initiate network requests, or access the HTML 5 local storage while the main Web page responds to the user scrolling, clicking, or typing.

Local Storage

HTML 5 storage provides a way for Web sites to store information on your computer and to retrieve it later. The concept is similar to cookies, but it is designed for larger quantities of information. Cookies are limited in size, and your browser sends them back to the Web server every time it requests a new page. HTML 5 storage stays on the user computing devices, and Web sites can access it with JavaScript after the page is loaded. Within your browser, any Web site can read and modify its own values but sites cannot access values stored by other sites.

Offline Web Applications

Offline Web applications start as online Web applications. The first time you visit an offline-enabled Web site, the Web server tells your browser which files it needs in order to work offline. These files can be anything – HTML, JavaScript, images, even videos. Once your browser downloads all the necessary files, you can revisit the Web site even if you are not connected to the internet. Your browser will notice that you are offline and use the files it has already downloaded. When you get back online, any changes you have made can be uploaded to the remote Web server.

Geolocation

The geolocation API lets the browser shares the user location with a trusted Web site. The location information can be given by any means including a dedicated GPS, the IP address, the cell tower ID or the WiFI network connection. The latitude and the longitude are available to JavaScript applications on the page, which in turn can send it back to the remote Web server for location-aware applications. It goes without saying that the geolocation API will likely be used extensively for social network and advertising applications.

The simplest use of the geolocation API looks like:
navigator.geolocation.getCurrentPosition (
   function(position) {
         var lat = position.coords.latitude;
         var lon = position.coordrs.longitude;
         showlocation (lat, lon);
         }livepage.apple.com
).

To further study HTML 5
Introduction to HTML5, Brad Neuberg
HTML 5: Up and Running, Mark Pilgrim, O’Reilly
W3C specification

Note: The picture above is The Orator from Pablo Picasso.

Categories: Front-End, Web