You are currently browsing the monthly archive for November 2010.

Xeno is a small demo project done over the weekend.  Click matching alien heiroglyphs to dissappear them.  Basic gameplay in HTML5 was pretty quick to prototype.

You can view it using Safari or Chrome browsers.  For iPhone, open in Safari and save to Home Screen, then you click the icon to load [for some reason fails to load directly, but works fine launched from Home Screen ]

For the path checking.. at first I did an exhaustive depth first search of all empty squares, but this exploded combinatorially.. so I used memoizing to reduce the repeat subpaths.. and then added a heuristic to find straight paths if they exist.  I probably should have looked up a decent path finding algorithm.  Sometimes its good to do things the blunt way yourself, so that you understand the problem and can then enjoy the beauty of a more elegant approach.

Hope you like the pictographs.. did them myself :]

Backstory

Lost in the dense Cambodian jungle you see what looks like an outcropping of ancient ruins.  Could that plynth be the entrance of an alien spacecraft which has lain dormant for thousands of years?  You wipe away the dust showing an irregular pattern of grooves.. you accidentally spill some water on the  console.

You hear a hiss followed by a gentle deep hum, and the panel under your palm begins to glow.   You must quickly match the glyphs to enter the Xeno’ ship…

Custom UI

I see a lot of interest in custom UI for iPad.   There are wonderful interactive books such as Alice and Im sure well see some very interesting interactive comics and graphic novels come out for the platform this Christmas.

Some brands have a certain graphic look and feel that is distinctive and they want to preserve that instead of the Apple ‘native’ look.   Other clients want a native looking app done in HTML5 delivered faster than an approval process would allow.

I recently developed an iPad app for an US based startup company.  The app gathers medical data at the scene of an emergency, and the designer came up with some excellent visual motifs, mixed in with traditional native UI elements.

Ive tended to develop custom UI in native Cocoa until this point, but the technology has been there for a while, as evidenced by apples own PastryKit.  Now there are several good frameworks like jQTouch, Sencha and jQueryMobile, but more importantly one can google for the grab-bag of techniques and examples that showcase the power of accelerated webkit animations.

iPad Demo

For a clickable early version of the app, open this link in Safari on iPad or Safari on Mac – iPad Demo

[ chrome on Linux will also work, for example, as it too is webkit under the hood ]

As you can see Ive implemented boolean [ ON | OFF ] slide toggle switches using an alpha mask and webkit transitions – pretty much any native UI is doable.

Impressions

I continue to enjoy the lisp-ness of Javascript.

Javascript + CSS + HTML divs + nice GPU accelerated animated transitions = superb prototyping environment.

The other win is that my code seems a _lot_ smaller than if I did this in Cocoa / Objective C.  I’m not knocking UIKit / iOS, the APIs are generally excellent.. but they are verbose in comparison.

The native look and feel and immediate response is achievable [ make sure you implement touchstart and don’t rely on the click event or your user will be waiting 250ms for the UI to respond… ]

Interesting times.

Maps

I prototype a number of techniques to deliver interactive floor maps.

Here is a floor plan of the main area of Melbourne Central, a popular shopping area in the CBD.  Created with SVG + javascript so will only run in Browsers that understand SVG.

Melbourne Central Map SVG

These kind of maps would be very useful navigating large Expos, so here are some demos…

Standard divs approach :

Home Garden Show

Fashion Exposed

SVG versions, for modern browsers only  :

Home Garden Show

Fashion Exposed

Impressions

All in all SVG is an incredible format for these kinds of graphics, and I think well see a lot more interactive books, comics and StarTrek inspired custom UIs developed in SVG.   Its a sane way to deliver to iPhone, iPad and various Android screen sizes with  common code base and one set of graphics assets.

After many years of neglect and non-standards-compliance, I’m looking forward to seeing the upcoming IE9 release of Internet Explorer browser with accelerated graphics and native SVG support.  Graphic designers will be set free to create and developers will be empowered to push the boundaries of the web to the next level.