You are currently browsing the tag archive for the ‘iPhone’ tag.

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.

Lately I seem to be busy mainly with consulting to Internet and Mobile startups, and one of the things I get asked a lot is which technologies I recommend for a given project.

It seems to work best when I give two approaches to serving data, one based on newer tools such as Node.js and CouchDB along with a more conservative alternative using Ruby on Rails or traditional LAMP stack as underlying technology.

As a prelude to the detailed project plan and data design, I usually give an overview of current trends.. I get asked that a lot, so I thought Id put my observations online here as a few bullet points :

Technology Trends :

  • Web and Mobile projects are converging [one usually implies the other]
  • Most data is social data [for the user and the people they interact with]
  • Most data naturally fits a tree or graph structure [tabular, not so much]
  • JSON has replaced XML [hand-in-glove with web, iPhone, Android ]
  • Scalability is a feature [can be deferred, but no easy migration path]
  • The days of generating HTML from PHP are gone [use JSON feed + jQuery]
  • People still use PHP and MySQL [it works, you can find developers]
  • Code using MVC frameworks tends to be overly verbose [Zend, Rails, Django]
  • Node.js and CouchDB are cool [but the newness of NoSQL is risky]

These are universally accepted as a good thing :

  • iPhone vs Android : both are good, competition is great!
  • JSON
  • jQuery
  • Architecture :  [ server data store ] <–> [ JSON ] <–> [ Web / Mobile client ]
  • AppStore revenue model

These are technologies to watch for :

  • Node.js [ultra high performance app servers can be written in Javascript ]
  • CouchDB [scalable NoSQL with sane REST api, map/reduce in Javascript ]
  • SVG [allows new kinds of User Interface on web & mobile ]

The above observations and predictions raise some interesting questions.. but Ill save that as juice for another post.

[ This question came up from a post on www.iphonedevsdk.com, and its something I hear a lot, so here is my answer : ]

I think you face the most common problem in history –
“I have an idea, how do I make it real ?”

I think iPhone developers have heard this so many times, its easy to reply abruptly “Ideas are worth nothing!”… but maybe there’s more to this.

Ideas are at the heart of science, music, art, medicine, engineering, equality, democracy, the economy – so ideas clearly aren’t worthless.

But ideas are not enough on their own – you need to dial up the intensity to the point where your willing to do whatever-it-takes to get the job done, to do the work and see it through.

Reading an old but good classic “Think and Grow Rich” it really brings this home.

Back to the iPhone… how would you make your iPhone idea real?

Any competent developer who might help you out, would have a couple of great ideas themselves that they just haven’t had time to implement because they’ve been too busy.

Some options –
– learn to program, develop it yourself
– offer some cash along with equity, in exchange for development help
– take it further in the design stage and see what happens

One thing you absolutely should do is sit down with pen and paper and make ‘mockups’ – screen designs that show a storyboard of what your app does.

What do I see when I start the app? How does the first page look, what fonts, what images, what text instructions to display, what buttons where…
Then take that and do a life-sized drawing of the screen in color in photoshop or gimp. Do that for each page, including splash screen and settings. It will be a lot of work..you’ll learn a lot.

The first version of your paper app will be bad… rework it and make it simpler for the user. After all of this, and it could take two weeks, you’ll have something an iPhone developer can actually turn into a product, and which they can look at and give you a reasonable estimate of cost to build.

Realise that this process is what separates those who make something from those who merely wish for something without the strength of desire needed to make it real.

I do wish you all the best for your project, and we welcome you to this wonderful endeavor of creating something from nothing with your bare hands – it can be frustrating.. and is also immensely rewarding.

gord.

iphone developer
http://webxilla.com/iphone

Objective-C can be quite verbose, especially when handling nested data – there is no simple associative array indexing of the kind found in PHP, Ruby etc.

ObjC : verbose : id value = [map objectForKey:@”key”];

Using atx functions : concise : id value = at(map, @”key”);

This comes in very handy for deeply nested json data trees, where you might want to index a multidimensional array or nested tree – vis :

id pop = at(at(at(stats, @”USA”), @”NewYork”), @”popn”);

Not quite as simple as pop = stats[“USA”][“NewYork”][“popn”]; but more readable than several objectForKey’s.  Note, I propagate the nulls up so if an item is not found at any level, it can be checked once at the top level without crashing the app.

The small suite of related functions can be found at google code here, under BSD licence – http://code.google.com/p/xathack/

enjoy.

Surprisingly for a lisp programmer I’m enjoying developing iPhone apps.  My clients Melbourne GigGuide app is doing well and I’m much happier after moving from XML to JSON format for my data feeds.

Verbose

Objective-C is simpler than C++ and closer to a scripting language in some ways.  The UIKit api itself is well designed, despite having verboseMethodNames.  This isn’t so much an RSI problem – the XCode editor does a nice job of guessing and auto-complete, while being non-intrusive – but its a lot of text to read which tends to obscure the idea behind the code.

Deeply nested JSON trees

Today I found myself chaining down a few levels of nested json objects, and decided I needed a much shorter syntax.

Many scripting languages have an associative array lookup syntax like someMap[“key”], and these can be chained.  In Obj-C, to access an NSDictionary you use objectForKey:@”key”.

at() Hack

I wanted something shorter so wrote this small hack  –

id at(id ob, NSString* k)
{
 if (ob && [ob isKindOfClass:[NSDictionary class]])
     return [ob objectForKey:k];
 return NULL;
}

Now I can index down several levels into a json tree easily, like this :

id obShops = at(at(at(json, @”Boutiques”), @”London”), @”EastEnd”);

Not as succinct as square brackets, but saves a lot of typing… enjoy