Bärchen

Dietmar Bittrichs
Gummibärchen-Orakel
für iPhone, iPod touch und iPad

Making Of "Bärchen"

Programmierung

Diese App wurde zunächst als Web-App mit HTML, CSS und Javascript programmiert und dann mit PhoneGap in eine native iOS-App "verpackt".

Von den neuen HTML5-Features wurden in erster Linie Web SQL Database und Local Storage eingesetzt.

Bärchen Pro und Bärchen 1.2 kommen inzwischen ohne PhoneGap aus, das Prinzip ist aber eigentlich dasselbe: eine Web-App in eine sogenannte UIWebView (eine Klasse von Objective-C) laden, siehe Link Tutorial unten.

Hilfreiche Links

Building iPhone Apps with HTML, CSS and Javascript, mit diesem Buch habe ich hauptsächlich gearbeitet.

Dive into HTML5, die Website zum Buch "HTML5 Up and Running"

Tutorial Web-App in einer UIWebView auf Youtube. Dies war mein Ausgangspunkt, um meine App ohne PhoneGap umzusetzen. Es brauchte dann für meinen Fall noch ein paar Anpassungen, aber das Prinzip hat funktioniert.

Der Weg vom Pigment zum Pixel

Um die richtigen Bärchen zu "finden", habe ich zuerst viele Blätter mit iPhone-Masken ausgedruckt und danach mit Farbstiften darauf skizziert.

Danach habe ich die Skizzen mit den Bärchen, die mir am besten gefielen, fotografiert und die Fotos auf den Mac importiert. Darauf die Fotos in Fireworks importiert und die Bärchen mit dem Pfad-Werkzeug nachgezeichnet.

Masken fürs iPhone 5 mit dem längeren Screen

Skizzen
Bärchen Skizzen

 

Ergebnis
Bärchen Skizzen