The specification for HTML5 has a lot of new and exciting features, blurring the line between desktop and cloud applications. This article strives to describe some of these new features, and provide sample usage of each.

The full HTML5 specification is documented on WHATWG’s website, and may be found here.

Audio

Audio introduces an extremely simple method by which audio file content may be delivered to a web audience. In a nutshell:

<audio src="http://address.to/some-sound-file.ogg" controls="controls" autoplay="autoplay" preload="preload"></audio>

With this, the web audience is provided with simple player controls, giving them familiar controls like pause, play, set track position, and so on. The major limitations are technical in nature; the web audience’s browser must support the provided file format (Ogg Vorbis, WAV PCM, or MP3, depending on how you roll).

Video

Video, similar to Audio, opens the floodgates for a host of new possibilities with regard to video authoring. Adobe’s Flash player is no longer required for displaying .flv content, and instead, we author video using one of the supported formats (WebM, H.264, VP8, or Ogg Theora), and expose the content using a DOM tag.

<video controls>
  <source src="http://address.to/some-video-file.ogg" type="video/ogg; codecs=dirac, speex">
</video>

In this example, video is provided with player controls, the type of video is specified, and we tell the browser what CODECs to load.

Canvas

Quite possibly the most exciting feature in the HTML5 specification, Canvas enables the web developer to render objects using 2D and 3D contexts.

Simply enough, we include a <canvas> object in the DOM:

<canvas id="some-canvas-id" width="320" height="240"></canvas>

The next step is to expose a 2D or 3D context of the <canvas> object:

var canvas = document.getElementById("some-canvas-id");
var ctx2d = canvas.getContext('2d');
//or, we could get a 3D context, if the option is supported
var ctx3d = canvas.getContext('3d');

Finally, we can perform any number of operations with the 2D or 3D context:

// Fill in a blue rectangle
ctx2d.fillStyle = "rgb(64, 128, 255)";
ctx2d.fillRect(5, 5, 25, 75);

// Draw a rectangle
ctx2d.fillRect(25,25,100,100); // draw a filled rectangle
ctx2d.clearRect(45,45,60,60); // clears the spec ified rectangular area
ctx2d.strokeRect(50,50,50,50); // draws an outlined (non-filled) rectangle

// Load image data
var img = new Image();   // Allocate an Image object

img.onload = function(){
    // perform this function once the image data is loaded
    // Draw a 100x100 rectangle at position 40,50 on the context, using data from our allocated image, starting at 0, 0 on the source image.
    var sourceX = 0;
    var sourceY = 0;
    var sourceWidth = 100;
    var sourceHeight = 100;
    var destX = 40;
    var destY = 50;
    var destWidth = 100;
    var destHeight = 100;

    ctx2d.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
}

// Set the URI source of the Image, which loads the content into the Image object
img.src = 'some-image.png';

There are many other options for 2D rendering, such as drawing lines and curves, and filling shapes with RGBA colors. Coupled with the 3D rendering options, the web as a whole will become a much more visually impacting place in the years to come.

Database

The Database component enables the developer to generate and interact with locally-managed databases and tables using SQL syntax to store and retrieve data. If you’ve used a RDBMS system in the last century, you will be quite familiar and comfortable with its usage.

var dbname = "database name";
var dbversion = "1.0";
var sql = "SELECT * FROM SomeTable";
var database = openDatabase(dbname, dbversion);
database.executeSql(sql,
    function(result)
    {
        // Perform results testing
    });

Potential usefulness includes enabling developers to extend “flat-file” cookie functionality to databases, giving faster and more robust access to data that must be stored on the client-side.

Websocket

The WebSocket interface seems very promising, and web applications that utilize it will far surpass their AJAX brethren in form and function.

A socket connection is a term used to describe a network connection between a client (i.e. you) and a server (i.e. google.com). Your web browser makes these connections constantly, over TCP, for each send (e.g. clicking Submit on a form) and receive (e.g. loading a web page) operation it performs.

WebSockets allow the web developer to leverage this sort of communication by exposing a “send/receive” interface via JavaScript. Invocation of the WebSocket interface is done as follows:

// TCP connection on port 1234
var ws = new WebSocket("ws://websocket.server.com:1234");

ws.send(); // Send the plain-text string to the server

ws.onmessage = function(msg){

    // This function is triggered when TCP data is sent to the web browser
    var data = msg.data; // The actual data sent from the server

}

All of this means a real-time data connection between the web-browser and a host, similar to what game-, chat-, and file-servers do already.

Cache

A major concern with remotely-hosted resources, whether web-applications, web sites, or other kinds of resources, lies in the disconnect. What happens to the cloud application when the cloud is not available?

Browser caching manifests are one of the developments that strive to provide a solution to this problem. By specifying to the DOM what files are necessary for the web audience to view a web page or utilize a web application, the web developer enables a browser to locally cache parts of content, and serve them up when an internet service is not present.

Caching is exposed via the DOM:

<!DOCTYPE HTML>
<html manifest="site.manifest">
    <head>
        <title>Cache Example</title>
        <script src="script.js" type="text/javascript"></script>
    </head>
    < body>
    </body>
</html>

A cache manifest (in the example above, the “site.manifest” file) is a script-file which tells the web-browser what files can be cached, and which ones should remain “over the wire”-only.

CACHE MANIFEST
# the above line must appear first in the document
# comments are prefixed with a hash symbol

# cache-enabled files can appear here, or under a CACHE: segment as below
index.html
images/some-file.png

# files under the NETWORK: segment will never be cached
NETWORK:
app.cgi

# files under CACHE: will similarly be cached in the browser
CACHE:
css/style.css

The Cache feature-set shows great promise for truly delivering web applications to the masses; by downloading application media once, and only downloading application modules (logic, authentication, etc), Cache enables the web developer to control how much or little is stored in the browser.

HTML5 promises to provide web developers with numerous means by which to narrow the gap between desktop- and online-applications. Expect to see further evolution in favor of cloud-based programs, online games, and web-based media in the coming months and years.