Im ersten Teil dieses Artikels habe ich euch unter dem Titel „Entwicklung von mobilen Web-Anwen- dungen und Webseiten“ (Commag Februar / 2011) umfangreich in die wichtigsten Aspekte des mobilen Marktes eingeführt und einige Beispiele für native Apps und WebApps geliefert.
In diesem zweiten Teil möchte ich euch nun möglichst praxisnah ein Beispiel für eine WebApp geben. Um hier einen möglichst realistischen Fall zur Erstellung einer WebApp zu liefern, werden wir uns mit der App für das Commag beschäftigen.
Planung der WebApp
Der erste Schritt ist eine genaue Überlegung, welche Funktionen die WebApp bereitstellen soll, für welches Publikum sie gedacht ist und natürlich die technischen Aspekte.
Machen wir uns also erst einmal ein paar Gedanken zu den Funktionen der WebApp. Dabei sollten wir auch bestimmte Aspekte beachten wie die Gewichtung von speziellen Funktionen. Damit meine ich, es gibt Funktionen, die zwingend erforderlich sind, damit die App funktioniert, und es gibt Features, die zwar einen gewissen Reiz und vielleicht sogar eine Notwendigkeit darstellen, auf die aber in der ersten Version verzichtet werden könnte. Diese Unterscheidung ist wichtig, denn man kann ein Projekt von zwei Seiten her angehen: Entweder, man schöpft alle Möglichkeiten und Funktionen aus, die einem einfallen und bringt die App erst dann heraus, wenn alles perfekt ist, oder man arbeitet in mehreren kleinen Schritten. Beide Varianten haben ihre Vorteile. Wobei die Vorteile einer rundum perfekten WebApp bei Release wohl kaum erwähnt werden müssen, doch auf die Variante mit den kleineren Schritten möchte ich noch einmal eingehen.
Wenn wir in kleineren Schritten arbeiten und zuerst nur die Basisfunktionen in den ersten Release einbauen, sparen wir zum einen jede Menge Zeit und Nerven. Durch die kürzere Zeit ist zum einen die eigene Motivation höher und wir haben viel eher ein Ergebnis, des Weiteren können wir so auch Feedback der Nutzer abwarten und entsprechende Wünsche in kommenden Versionen berücksichtigen.
Auf diese Weise können wir direkt mit den Nutzern zusammenarbeiten und haben die Möglichkeit, uns mit der App weiter zu steigern. Nachteil bei der Geschichte ist natürlich, dass die Nutzer ggf. nicht mit der App zufrieden sind, da der Funktionsumfang anfangs reduziert ist.
Natürlich erläutere ich diese Variante nicht umsonst, sondern weil ich bei der Commag WebApp auch so verfahre. Machen wir uns nun also eine kleine Liste mit entsprechenden Funktionen, um das Ganze einmal zu verdeutlichen:
Pflicht-Funktionen, die unbedingt enthalten sein müssen:
- Einfache Übersicht über die Commag-Ausgaben
- Lesefunktion der einzelnen Ausgaben (Blätter-Funktion etc.)
- Offline-Lesefunktion oder alternativ PDF-Download für iBooks
Sekundär-Funktionen für kommende Versionen
- Offline-Lesefunktion mittels eines Offline-Mani- fests
Gestaltung der WebApp
Nachdem wir nun eine überschaubare Liste mit Funktionen haben, machen wir uns Gedanken über Gestaltung und Aufbau der App.
Die App soll möglichst einfach zu bedienen sein und von der Funktionsweise an bestehende Apps angrenzen.
Diesem Anspruch entsprechend wird der Startscreen der App das Cover der aktuellen Commag Ausgabe in voller Größe darstellen; durch die bekannten links- / rechts-Swipes lässt sich dann mit einem Slide-Effekt durch die älteren Ausgaben blättern.
Durch einmaliges Tippen auf eines der Cover wird eine weiße Leiste mit zwei Optionen eingeblendet:
Lesen: Damit wechselt die App in den Lesemodus der entsprechenden Ausgabe.
Als PDF-Datei in iBooks laden: Darüber kann eine entsprechende PDF in Apples iBooks importiert werden und auch offline gelesen werden.
Wie das Ganze nun aber technisch funktioniert, soll natürlich kein Geheimnis bleiben. Allerdings werde ich nicht alle Funktionen der App beschreiben, da dies zum einen zu umfangreich wäre und sich auch nicht auf andere Fälle übertragen lässt.
Als Erstes möchte ich euch den Cover Slider erklären, der einfacher zu realisieren ist als viele vielleicht denken. Der erste Schritt ist einfach: Legt euch ein neues HTML-Dokument (bei mir HTML5) an und fügt folgende Struktur in den „body“ Tag ein:
Den kompletten Artikel gibt es im kostenlosen Commag von PSD-Tutorials.de: http://www.psd-tutorials.de/commag/view/maerz-2011