HTML5

HTML5 is designed to be the successor to HTML4, as a transitional standard to XHTML 2.0. It stays fairly close in syntax to the HTML4 and XHTML 1.0 standards that we are accustomed to, but moves away from its SGML roots as being simply a means to mark up a document, and into a robust web application platform, including several new scripting APIs that allow for common interactive functions in today’s web applications.

Originally referred to as Web Applications 1.0, HTML5 incorporates the Web Forms 2.0 standard from the W3C’s Web Hypertext Application Technology Working Group (WHATWG). The editors of the specification areIan Hickson of Google and Dave Hyatt from Apple—and it’s probably not a coincidence that these are the same two companies that produce both mobile and desktop versions of WebKit.

FIG 12-6 Testing HTML5 code in WebKit

HTML5 creates some interesting new opportunities for mobile web applications, like the canvas element, offline storage, document editing, and media playback, which we are already beginning to see in mobile WebKit browsers like Mobile Safari as well as the Opera Mobile browser. HTML5 also allows developers to create cross-platform designs through expressing the content more semantically. For example, the addition of HTML5 elements like header, nav, article, section, aside, and footer make our content more machine-readable and therefore make it easier for the next generation of mobile browsers to treat content properly in both the desktop and mobile context, as shown in FIG 12-6.

Because these standards are still being defined and the device browsers are being updated to support them, check the Wikipedia page, which is actually quite up-to-date, to check the status from the desired device to see the latest HTML5 APIs and elements that are currently supported.

The canvas element

FIG 12-7 Using the canvas element on the iPhone

The canvas element is part of HTML5; it allows designers and developers to essentially draw content within your HTML page. The canvas HTML tag defines a custom drawing area within your content that you can then access as a JavaScript object and draw upon. canvas was created by Apple, included in the WebKit source and the iPhone, but it is also supported by the Mozilla Gecko and Opera Presto browser engines.

Here we draw some simple boxes using the canvas element, as shown in FIG 12-7:

<head>
<script type="text/javascript" charset="utf-8">
  function draw() {
    // grab the canvas element
    var canvas = document.getElementById("canvas");
    if (canvas.getContext) {
      // grab the context
      var ctx = canvas.getContext("2d");
      // background box
      ctx.fillStyle = "rgba(100, 100, 100,0.2)";
      ctx.fillRect(0, 0, 90, 90);
      // first, smallest
      ctx.fillStyle = "rgba(100,100,100,0.5)";
      ctx.fillRect(10, 10, 10, 10);
      // second, middle
      ctx.fillStyle = "rgba(100, 100, 100,0.7)";
      ctx.fillRect(20, 20, 20, 20);
      // third, biggest
      ctx.fillStyle = "rgba(100, 100, 100,0.9)";
      ctx.fillRect(40, 40, 40, 40);
    }
  }
</script>
</head>
<body onload="draw();">
  <canvas id="canvas" width="150" height="150">
  <p>This example requires a browser that supports the <a
href="http://www.w3.org/html/wg/html5/">HTML5</a> &amp;lt;canvas&amp;gt; feature.</p>
</canvas>
</body>

Offline data storage

FIG 12-8 Use of offline storage in the Gmail iPhone web app

Also part of HTML5 and supported by WebKit and the iPhone is the ability to create client-side data storage systems, which essentially allow you to create web applications that work when offline. Because it is still evolving into a standard, client-side storage has a variety of names: DOM storage, offline storage, and others.

Though similar to cookies, client-side storage does not have the same size and time limitations as cookies; much more data can be stored and for longer periods of time.

Another key difference is the how the flow of data is controlled. Cookies can be written to the client by the server and retrieved by the server at will. In contrast, information stored at the client must be requested by the client. Likewise, it cannot be read by the server without permission; it must be sent to the server by the client.

The type of data best suited for client-side storage is information that does not change often, like contact information or map locations. One example is the Gmail web app for iPhone and Android, which supports offline data storage (FIG 12-8), allowing you to interact with your mail when you are offline, then syncing with the server once you reconnect.

Possible applications for client-side storage are as numerous as their potential implementations. The subject of client-side storage is too large to cover completely here, and books will undoubtedly be dedicated to the subject, but know that the methods for reading and writing to it are similar to those methods for reading and writing cookies.

Though WebKit currently supports client-side storage, it is still part of the as-yet-unratified HTML5 proposal and is therefore subject to substantial change before it will become a standard. Already, popular applications that were early adopters of client-side storage have been broken by the changing standard.