December 2, 2009
My 24 Countdown Clock iPhone Web App
Co-workers of mine will admit (with a sigh) that I am a HUGE fan of the television show “24″. Early in January of a new year a group of us get together with some pizzas, beers and watch the 4 hour premiere via a projector and some big speakers. It’s sort of become a tradition these days and as long as they keep making new seasons, we’ll keep doing it.
Seeing as everyone who attends our makeshift premiere now has an iPhone, I decided to create a 24 Countdown Clock iPhone web application.
Designing and developing for the iPhone is, on the whole, a dream. You only have to worry about it looking right in one browser and if it looks right on yours it’s going to look right on every other iPhone owner’s browser too.
Apple has some great documentation on developing web applications on the iPhone. For my web application I used several of their meta tags and a link tag, all of which I’ve detailed in this blog post.
As with all meta tags, these should be placed in the <head> section of your HTML.
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
This meta tag is the first fundamental step to creating your own web application. By setting the viewport width and scaling options it disables the user’s ability to zoom into your web application, giving it the behaviour of a native iPhone application.
<meta name="apple-mobile-web-app-capable" content="yes" />
This meta tag helps you break away from the look of Safari, allowing you to create a true replica of a native iPhone application. It removes the address/search bar from the top of the window as well as the navigation bar from the bottom of the window. However, it will only do this if your web application is launched from a web clip icon on the home screen.
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
This meta tag changes the status bar (carrier name, time, battery icon, etc.) background colour to black. Whether you use this tag or not depends on the overall style of your web application. As my own uses a dark background this was ideal for me. As with the previous meta tag, this will only be applied if your web application is launched from a web clip icon on the home screen.
<link rel="apple-touch-icon" href="icon.png" />
To complete the authentic iPhone application look you can define an icon to be used when a user adds your web application to their home screen. The icon should be 57 by 57 pixels in dimension. Any larger or smaller and the icon will be scaled.
With the framework in place, all that was left to do was apply a background image and style the countdown text.
Sadly, the Safari browser on the iPhone only has limited CSS3 support. I was able to use the text-shadow property on the countdown text, but I was unable to use a custom font face to replicate the “24″ LCD-style digits in the logo.
As there is no Flash or Java support on the iPhone in Safari, nor do I want there to be, I used a JavaScript based solution. Using jQuery and the Countdown plugin, with a few lines of JavaScript the countdown clock was easily implemented.
$('h2#countdown').countdown({
until: new Date(2010,0,17),
format: 'DHMS'
});
The live web application lives at http://joeserg.com/24/
It’s hardly the best iPhone web application out there, nor is it the most complicated. However, by starting out with a simple web application and learning the basics, I can look forward to developing bigger and better ones in the future.
All I need to do now is find the time to create them.
Can you tell me when the new season of 24 starts? I don’t have an iphone and I can’t find hte start date
Hi – the season airs in America this coming Sunday (17th January). I believe it’s a four hour premiere over two nights. You can still access the 24 countdown clock by going to http://joeserg.com/24