Stand-Alone HTML5 Apps

Posted by on Jun 13, 2012 in Blog, Web Development | No Comments
Stand-Alone HTML5 Apps

A few weeks ago I was challenged to find a countdown clock for the Enterprise Mobility Forum.   “No problem, this sort of thing must be common, we’ll just buy a good one.”  Hah! Fat chance!  I simply could not find a commercially available solution with the required features.   I decided to go open-source.  I knew that I would not find an ideal solution, but at least I could modify it as needed.

The clock I was looking for was to be the timekeeper for the day, counting down each event with a visual indicator showing that one-third of the time remained, and another to show in the last minute of each event.  Three such clocks would be deployed, and these would be displayed on beautiful 40″ Samsung LED HD displays, each connected to a laptop, and synchonised.  In addition to the countdown clock, each display would show an event (or timeslot) identifier.

The users, thankfully, were not geekish in any way and the application controls would need to be intuitive and the entire application would need to be contained in a single application file.

A web search returned a number of countdown clocks, but none that satisfied the criteria.  Some that came close were web applications.  And that got me thinking…

Use HTML5.

I have been dragging my feet a bit, and this would be the perfect excuse to properly get on the wagon. Imagine my delight when, at the very event for which I’d written the countdown clock — The Enterprise Mobility Forum, Cape Town 2012 — the consensus was that “the operating system is irrelevant” and “apart from highly technical power apps, all user apps will run in browsers”. I’d been punting this view since 2005 but, having lived through and wasted a great deal of effort with the largely toothless standards drives of the late eighties, I now knew better than to leap, and instead took the wait-and-see approach. At last!

HTML5 is primarily the next generation markup language. That, in itself, is not a game changer. What changes the game are a few new tags, like ‘canvas’, improved cookie-less local storage and the power of the styling language (CSS3), an object and procedural coding language (Javascript), all connected through, and working on, a common underlying document object model (DOM).  Usually of course, a browser receives its source over a network from a web server, but its equally important to note that an html5 browser supports server-less and network-less operation.

The countdown timer would thus be a self-contained, server-less, network-less, web-less web application, and would run in a browser in full-screen mode.  Easy!   A single file, countdown-timer.html, would contain everything — HTML, CSS and Javascript, as well as embedded Base64 encoded graphics.

A perfect match.

Next I’ll explain how I put the first version together. I hope to see you back soon.