While I was at it, I also took the opportunity to fix some existing bugs with the timing, as well as introduce a new high score feature, so the game now remembers your fastest time.

There is no need to download an update to take advantage of this new version of Card Flip. Updates happen automatically and silently, so if you open the app now you will already be using the new code base.

The next most immediate change is that the site is no longer fixed–width. It now uses an elastic layout that is more adaptable to different screen sizes, and also makes use of CSS3 Media Queries to provide an optimised stylesheet for mobile devices. Desktop visitors can also test this out by resizing your browser window. Give it a go!

Finally, I have decided to switch away from the site imagery concentrating so much on the iPhone. Yes it's currently the most popular platform for apps, but I want to emphasize that my apps are more about being cross–platform — so in the coming weeks/months I aim to try and introduce imagery that is less platform specific.

I won't go into depth covering the basics of how touch events work, you can read about that in this article. What I will go into, is the basics of how my template works, so that you can easily adapt it for your own applications.

First, feel free to view the live demo, and read the documented code.

The HTML template file consists of a single square block that can be touched, dragged, resized and rotated using touch events. The JavaScript file provides a basis for handling six different types of touch event. The first three, touchstart, touchmove and touchend are all used to handle single finger touch events. In the example, the square block can be touched and dragged around the screen using a single finger. You can easily see when a touchstart event is triggered, as the square will turn blue in colour. If you drag your finger when the square is blue, a touchmove event is then triggered, and the square will follow your finger. When you release your finger, a touchend event is triggered, and the square will turn back to its original colour and remain where you left it on the screen.

The next three touch events, gesturestart, gesturemove and gestureend, are all used to handle multi touch events. These class as any touch event that uses more than one finger. In the example, a gesturestart event is indicated by the square block turning red in colour. A gesturechange event is triggered by performing a typical two finger pinch/zoom/rotate gesture, which has the effect of scaling and rotating the square. When your fingers are released, a gestureend event is triggered, and the square turns back to its original colour. It will also remain at the scale and angle of rotation that you left it at.

Take some time to read through the documented code and understand the way events are triggered. Any questions, please feel free to get in touch.

The 3D animation effects you see in Card Flip are achieved via the use of CSS3 3D transforms. Currently these effects are only available in Mobile Safari on the iPhone, but Android and other mobile platforms should hopefully catch up soon. To make the game feel as quick and responsive as possible, Card Flip also makes use of native touch events. As an added bonus, offline storage is supported too. Hope you have fun playing.

Whilst being developed mainly for iPhone OS 3.0, Checklist has also been successfully tested on Android OS 2.1, Palm Pre webOS and Firefox Mobile 1.0. The app requires support for HTML5 web storage and offline storage, but any mobile browser supporting these technologies should be fully compatible.

If you have any feedback on this app, please feel free to get in touch.

As well as providing detailed data readouts, I included some extra bits of functionality, such as integration with Google Maps and an email facility that allows you to mail your current location data. The app currently works on iPhone and Android, but I have also tested it sucessfully on the Firefox Mobile emulator.

The way I see it, the more people interested in developing mobile web applications (or HTML5 apps, as PPK puts it), the better. So, as an advocate of open source web development, I thought it might be useful to others if I put my own code out there as a learning resource. After all, that is the whole reason I started making these apps myself – to learn.

I've spent a considerable amount of time over the last few weeks tidying up and documenting my code. It is now in a state where I feel comfortable to leave the assets uncompressed and open for all to see. If anyone has and queries, please feel free to get in touch.

Canvas was developed and tested on an iPhone, but I have designed it in such a way that it should scale to any size of physical device, including the iPad. I have tested Canvas using the iPad simulator and it seems to work pretty well, but have yet to test it on a real device.

From initial reports I have received via Twitter, the app also seems to work well on Android devices. There are currently a few small bugs that I am aware of, but I will hopefully iron these out in the next few weeks as well as add a couple of additional features. Hope people like it.

<!-- CSS MAIN STYLESHEET -->
<link rel="stylesheet" href="styles.css" media="all" />

<!-- LAYOUTS SMALLER THAN 650px AND MOBILES -->
<link rel="stylesheet" href="mobile.css" media="handheld, screen and (max-width: 650px), screen and (max-device-width: 480px)" />

<!-- LAYOUTS BETWEEN 651px/1024px AND iPAD -->
<link rel="stylesheet" href="tablet.css" media="screen and (min-width:651px) and (max-width: 1024px), screen and (min-device-width: 768px) and (max-device-width: 1024px)" />

I could have included all three media queries inside a single CSS file using the @media rule, but I quite like to keep things separate for simplicity. For now, I have chosen to use three individual stylesheets. The main site stylesheet (styles.css) is used as a master, and then the separate mobile.css and tablet.css stylesheets override certain CSS rules in the main stylesheet, to provide an optimised view that is dependant on the media query being used. I have also used queries based on both min/max-width and min/max-device-width, so that both desktop browsers and intermediate size devices can also make use of the adaptive stylesheets. Have a go at resizing your browser window to see the results.

It turns out that CSS media queries testing for the older iPhone displays still work on iPhone 4. It's all down to Mobile Safari utilising a 'device to pixel ratio' density of 2. There is actually a distinct difference between a device (screen) pixel and a pixel that we typically define in CSS. For example, when the iPhone 4 browser viewport is equal to the device width, 1 CSS pixel actually translates to 2x2 device pixels. For those interested, there is a quite old (but very relevant) Webkit article about high dpi websites. It makes for an interesting read.

This is largely good news for mobile web developers, as very little needs to be done to our mobile CSS stylesheets for iPhone 4. Device pixels are translated to CSS pixels automatically. But what about images? Well, this is where some work needs to be done. In order for images to look crisp on the new iPhone 4 display, we now need to serve images that have a higher ppi than the standard web traditionally uses. To do this, the iPhone 4 (and any other high ppi device) can be targeted using the following CSS media query (Notice I have included rules both with and without the -webkit venor prefix):

<!-- HIGH PPI DEVICES -->

<link rel="stylesheet" href="highres.css" media="only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)" />

I won't go into great detail on how to best serve images, but it basically involves creating images that are double the pixel size that you would traditionally need (e.g. a 100x50 pixel image translates to 200x100 pixels). You can then set the background size in CSS so the large images still take up the same number of CSS pixels as they would on a normal display. Walt Dickinson has already written a nice article that has some more info on how to do this. I advise you to go read it. Alternatively, you could inspect the highres.css stylesheet on my site here.

Finally, one last tip – you can also test for the same value using using JavaScript:

if (window.devicePixelRatio == 2) {

//Targeted code goes here

}

<!-- iPHONE 3G WEB CLIP ICON -->
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="iOS-57.png" />
<!-- iPAD WEB CLIP ICON -->
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="iOS-72.png" />
<!-- iPHONE 4 WEB CLIP ICON -->
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="iOS-114.png" />

Using the plugin is pretty simple. Firstly, include the main JavaScript file in the header of your HTML document:

<script type="text/javascript" src="WKTouch.js" ></script>

Next, add the following CSS to your stylesheet. Please note, your HTML element must use absolute positioning:

.touch {
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: none;
    -webkit-touch-callout: none; 
}

#element1 {
    position: absolute;
    left: 10px;
    top: 10px;
    height:120px; 
    width:120px;
    background-color: blue;
}

Now add the class name and id to your HTML element:

<div class="touch" id="element1"></div>

Finally, in the head of your HTML file, include the following JavaScript to create a new instance of the plugin, making sure to pass it the id of your HTML element:

<script type="text/javascript"> 
window.onload = function() {                     
    var element1 = new WKTouch('element1').init();       
};
</script>

That's it! You can view a fully working online demo here using multiple instances of the plugin on one page. You can also download or checkout the source over on Google Code.