Help
Testing HTML5 code in WebKit
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
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, shown in the image below.
<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> <canvas> feature.</p>
</canvas>
</body>
Using the canvas element on the iPhone
Offline data storage
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 (see figure below), allowing you to interact with your mail when you are offline, then syncing with the server once you reconnect.
Use of offline storage in the Gmail iPhone web app
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.
Learn more about this topic from Mobile Design and Development.
Mobile devices outnumber desktop and laptop computers three to one worldwide, yet little information is available for designing and developing mobile applications. Mobile Design and Development fills that void with practical guidelines, standards, techniques and best practices for building mobile products from start to finish, including basic design and development principles for all mobile devices and platforms.
