(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”/>
Following is the HTML for the Canvas API to create two rectangles:
<canvas id=”myCanvas” width=”150″ height=”150″>
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)
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:
<video width=”320″ height=”240″ controls>
<source src=”pr6.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>
<source src=”pr6.webm” type=’video/webm; codecs=”vp8, vorbis”‘>
<source src=”pr6.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>
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.
Offline Web Applications
The simplest use of the geolocation API looks like:
var lat = position.coords.latitude;
var lon = position.coordrs.longitude;
showlocation (lat, lon);
Copyright © 2005-2010 by Serge-Paul Carrasco. All rights reserved.
Contact Us: asvinsider at gmail dot com.