UPDATE: Our Spin-the-Bottle got “staff pick” nomination by Apple. Cool:)
http://www.apple.com/webapps/

It’s a web application!

As a software developer with a focus on web I’m very excited about the browser in the iPhone, the Safari Mobile. It is one of the most advanced browsers in the market even compared to desktop alternatives. The engineers at Apple have packaged some really cool features yet to be discovered by mainstream.

Spin the bottle could have been easily implemented as a native iPhone application but I wanted to experiment with the new features of the browser: touch events, CSS transforms and animations. The CSS features are new innovations of the Webkit rendering engine and might end up in the standardisation process in the future.

Finding out information about these techniques required some surfing in the Apple Developer pages and in several iphone-related forums around the net. Good sample code was hard to find. Developing of the app took some trial and error, but it was fun to push the limit.

In the end we were quite amazed at what is possible to do in the browser these days, not to mention a mobile one. This is a sign of things to come. When Mozilla, Google and other enter the mobile browser landscape, I’m sure we’ll see more innovative ways to take the mobile web where no man has been before.

We had lots of fun developing this small app. Hope you like it too.

Technical points for geeks

Touch events. The new Safari Mobile has a new set of touch callbacks for tracking touch events. The standard mouse events won’t do the work. The app also demonstrates how to prevent the browser from scrolling the window on finger movement.

CSS transforms, transitions, animations. All of these cool new features are used in the app. The bottle is rotated with a “rotateZ” CSS transform. CSS transition is used to slide up the about box on close. CSS animation is used in the rotating splash text graphic “Spin the the bottle”. There’s some glitch in the CSS animation that I could not remove. Maybe a bug in the browser.

CSS rounded corners and border-image. The forthcoming CSS3 standard specifies a better way for implementing rounded corners. There’s a “border-radius” that applies curving to the standard border. “border-image” offers a way to implement a custom bitmap border around an element in a single compact image. Both of these bring great relief for web developers struggling with “sliding windows” techniques and what not. We’ll see these on desktops browsers soon as well.

Orientation change. Polling of window dimensions with Javascript, the usual way. I wonder why Apple hasn’t yet implemented an event handler for detecting orientation change.

Transparent PNGs. See how easy it is to provide some realism with little transparency in the images. The devil is in the details.

Custom Home Screen icon. If you save the URL to the Home Screen of your iPhone, you’ll get the application specific icon.

There’s no Javascript framework in use here, although I’m a huge fan of jquery. I wanted to keep things clear and simple.

And of course, the brave souls can digg the sources for the details.

Tomi

Great mobile design is a successful combination of several factors, such as identifying the needs of the mobile context and complementing ease-of-use with outstanding yet usable visual design.

Idean, a long-term partner and service provider, cooperated with Forum Nokia to identify and present some of the finest examples of Mobile Design - applications that everyone in the mobile business should take a look at.

Is your favourite application missing from these Mobile Design Showcases? Let us know!

Idean discusses the future of cloud computing in Tietoviikko, a leading IT newspaper in Finland (the article only in Finnish).

CKIR, the Center for Knowledge and Innovation Research, Institute of Helsinki School of Economics organized a workshop on the core essence of what Idean is all about: how do companies, societies and people co-innovate for creating new value and wealth?

The workshop agenda was very interesting and touches the question from many angles, yet the core challenge is simple. As Mr. Ikujiro Nonaka, Visiting Professor from Hitotsubashi University, Tokyo states: The essence of open innovation is to listen and feel the needs and life of users and then be inspired.

See the CKIR workshop abstract (PDF).