Lesebprobe Galileocomputing Apps Mit Html5 Und Css3

Florian Franke, Johannes Ippen
Apps mit HTML5 und CSS3

fr iPad, iPhone und Android
Auf einen Blick
Auf einen Blick

1
Apps ............................................................................................................................
21
HTML5 in der mobilen Webentwickung ........................................................
35
Konzeption und Gestaltungsprinzipien ......................................................... 109
HTML5 als Designwerkzeug ............................................................................... 147
Positionsbestimmung .......................................................................................... 225
Auslesen des Bewegungssensors mit JavaScript ........................................ 261
Offline damit eine App in jedem Winkel der Welt funktioniert ........ 287
WebApps mit Frameworks entwickeln .......................................................... 311
Native Anwendungen und App Stores ........................................................... 381
Inhalt
Inhalt
Vorwort ...................................................................................................................................................
11
Apps
21
1.1
Native Apps vs. WebApps ......................................................................................

1.1.1
1.1.2
1.1.3
1.1.4
1.1.5
WebApps allgemein ...................................................................................

Native Apps auf mobilen Gerten ............................................................
App Store, Google Play und Co. .................................................................
WebApps auf mobilen Gerten ................................................................
Native App oder WebApp? ........................................................................
Der Mobilsektor boomt .............................................................................
Browsertechnik auf Mobilgerten ...........................................................
28
28
30
1.3
Showcase das knnen HTML5-Apps .................................................................
31
HTML5 in der mobilen Webentwickung
35
2.1
HTML5 Definition und aktueller Stand ............................................................
35
36
36
36
1.2
Warum ist es sinnvoll, auf Touch-Gerten zu entwickeln? ............................
21
22
22
25
27
28
1.2.1
1.2.2
2.1.1
2.1.2
2.1.3
2.2
Was HTML5 bietet ...................................................................................................

2.2.1
2.2.2
2.3
Der Aufbau einer einfachen HTML5-Seite ...............................................

Semantische Elemente in HTML5 .............................................................
CSS3 Grundlagen und Neuerungen ..................................................................
37
37
39
Was ist eigentlich CSS? ..............................................................................

Styling mit einer CSS-Datei .......................................................................
Gestalten mit CSS Tipps und Tricks .......................................................
Die Neuerungen von CSS3 welche sind heute schon einsetzbar? .....
42
42
43
48
53
Desktop vs. Mobile die Unterschiede ...............................................................
63
2.3.1
2.3.2
2.3.3
2.3.4
2.4
HTML als Standard .....................................................................................

HTML5 als Marketinginstrument .............................................................
HTML5 als Flash-Ablsung? .......................................................................
2.4.1
Mglichkeiten und Limitationen von HTML5 auf

einer mobilen Plattform ............................................................................
68
Inhalt
Die neuen HTML- und CSS-Features in iOS5 ...........................................

Von der Webseite zur WebApp .................................................................
69
78
Entwickeln mit JavaScript-Frameworks jQuery & Co. ..................................
83
84
88
94
98
99
2.4.2
2.4.3
2.5
2.5.1
2.5.2
2.5.3
2.5.4
2.5.5
2.6
Die JavaScript-Syntax .................................................................................

Einfhrung in jQuery ..................................................................................
Wichtige Funktionen in jQuery .................................................................
Nachteile von jQuery .................................................................................
Eine Alternative zu jQuery Zepto.js .......................................................
Die Geschwindigkeit einer WebApp verbessern ............................................... 101

2.6.1
2.6.2
2.6.3
Kompression ............................................................................................... 101

Die richtige Reihenfolge ............................................................................ 105
So wenig Anfragen wie mglich ............................................................... 105
Konzeption und Gestaltungsprinzipien
3.1
Touch-typisches Design in der Praxis .................................................................. 109

3.1.1
3.1.2
3.1.3
3.1.4
3.2
Der feine Unterschied zwischen Berhren und Klicken .........................

Der Anwender erwartet so einiges Aufbau einer App ........................
Auf der Couch oder in der Bahn ................................................................
Alles eine Frage der Ausrichtung ..............................................................
109
109
113
122
127
Eine App konzipieren .............................................................................................. 134

3.2.1
3.2.2
Vorberlegungen was genau soll meine WebApp knnen? .............. 134

Gedanken und Inhalte ordnen .................................................................. 135
HTML5 als Designwerkzeug
4.1
Ordnung halten mit CSS-Rastersystemen .......................................................... 147

4.1.1
4.1.2
4.2
Einsatz des Less CSS Frameworks ............................................................. 149

Das Raster fr einen speziellen Einsatz MagazineGrid ....................... 158
Mal was anderes als Arial Webfonts ................................................................ 168

4.2.1
4.2.2
4.2.3
4.2.4
147
Schriften im Web ........................................................................................

Webfonts .....................................................................................................
Font-Services ...............................................................................................
Vor- und Nachteile von Webfonts ............................................................
169
171
173
177
Inhalt
4.2.5
4.2.6
4.3
Hinzufgen von Audio und Video ........................................................................ 180

4.3.1
4.3.2
4.4
Video ............................................................................................................ 180

Audio ............................................................................................................ 190
Animationen mit CSS .............................................................................................. 196

4.4.1
4.4.2
4.4.3
4.4.4
4.5
Vorsicht! Schriften und deren Lizenzen ................................................... 178

Webschriften in Aktion .............................................................................. 178
CSS-Transitions und CSS-Animations ......................................................

Animieren mit -webkit-transition ............................................................
Animieren mit -webkit-animation ...........................................................
Manipulation mit -webkit-transform ......................................................
196
197
201
203
Zeichnen mit JavaScript das canvas-Element ................................................ 208

4.5.1
4.5.2
4.5.3
4.5.4
4.5.5
Erster Schritt: Canvas und Context registrieren .....................................

Grundlegende Funktionen ........................................................................
Zeichnen per Touch-Eingabe ....................................................................
In der Praxis Canvas oder CSS? ..............................................................
Canvas-Bibliotheken ..................................................................................
208
209
216
219
220
Positionsbestimmung
5.1
Die Positionsbestimmung mit HTML5 ................................................................. 226

5.1.1
5.2
5.3
225
Weitere Eigenschaften der Positionsbestimmung ................................. 229
Die Where to Eat-App ........................................................................................ 230

5.2.1
5.2.2
5.2.3
Position auf einer statischen Karte eintragen ........................................ 231

Interaktive Karten mit der Google Maps JavaScript API einbinden ...... 238
Liste der Restaurants laden und ausgeben ............................................. 240
5.2.4
5.2.5
5.2.6
5.2.7
5.2.8
Den Abstand zwischen zwei Koordinaten berechnen ...........................

Die Programmoberflche ..........................................................................
Eine Symbolleiste einfgen .......................................................................
Die Restaurantliste erstellen .....................................................................
Der letzte Schliff .........................................................................................
244
246
248
250
253
More Fun mit Geodaten ......................................................................................... 256

5.3.1
5.3.2
5.3.3
5.3.4
5.3.5
Qype-API ......................................................................................................
foursquare-API ............................................................................................
Google Places ..............................................................................................
Twitter-API ..................................................................................................
Flickr-API ......................................................................................................
257
257
258
258
260
Inhalt
Auslesen des Bewegungssensors mit JavaScript
6.1
Diese Daten liefert der Bewegungssensor ......................................................... 262
6.2
Vorberlegungen zur App Shake it like a Polaroid picture ........................ 264
6.3
Shake it like a Polaroid picture die Umsetzung ......................................... 266

6.3.1
6.3.2
6.3.3
6.3.4
6.3.5
7
7.1
Offline damit eine App in jedem Winkel

der Welt funktioniert
287
Die Struktur der Cache-Manifest-Datei ...................................................

Ihre erste Cache-Manifest-Datei ..............................................................
Wann werden welche Daten gecacht? ....................................................
Die Cache-Manifest-Datei im Einsatz ......................................................
289
290
291
292
localStorage, die Offline-Datenbank ................................................................... 294

7.2.1
7.2.2
7.3
266
269
275
276
281
Abhilfe schafft das Cache-Manifest ..................................................................... 289

7.1.1
7.1.2
7.1.3
7.1.4
7.2
Die HTML-Datei ..........................................................................................

Laden eines Bildes aus dem Fotodienst Flickr via JSON .........................
Die CSS-Datei ..............................................................................................
Das Laden eines Polaroids .........................................................................
Das Sahnehubchen eine leichte Rotation des Polaroids ...................
261
localStorage-Funktionen ........................................................................... 294

Temporre Speicherung von Daten im sessionStorage ......................... 295
Die Offline-Todo-App .............................................................................................. 296

7.3.1
7.3.2
7.3.3
7.3.4
Welche Anforderungen muss Ihre Todo-App erfllen? .........................

Der Wireframe der Todo-App ....................................................................
Funktionsbezogene Animation ................................................................
Zustzliche EventHandler .........................................................................
296
297
306
308
7.4
Checkliste zum berprfen der Offline-Fhigkeit einer WebApp ................ 309
WebApps mit Frameworks entwickeln
8.1
Entwicklung einer WebApp mit jQuery Mobile ................................................ 311

8.1.1
8.1.2
311
Zum heiteren Hering ein Fischrestaurant als WebApp ...................... 312

Die Startseite .............................................................................................. 313
Inhalt
8.1.3
8.1.4
8.1.5
8.1.6
8.1.7
8.2
Kurze Kaffeepause ein Blick hinter die Kulissen

von jQuery Mobile ......................................................................................
la carte die Menseite .........................................................................
Implementierung einer Google-Maps-Karte inklusive
Routenplanung ...........................................................................................
Ein Kontaktformular mithilfe von PHP ....................................................
jQuery-Mobile-Apps mit dem Themeroller und dem
Interface-Builder von Codiqa noch schneller entwickeln ......................
324
325
336
340
347
Die Entwicklung einer App mit Sencha Touch ................................................... 350

8.2.1
8.2.2
8.2.3
Installation und erste Schritte mit Sencha Touch .................................. 351

Interaktive Diagramme mit Sencha Touch Charts
die Wetterstation ....................................................................................... 361
HTML5-Tablet-Magazin mit Sencha Touch ............................................. 371
Native Anwendungen und App Stores
9.1
Eine WebApp wird zur nativen Anwendung ...................................................... 381

9.1.1
9.1.2
9.1.3
9.1.4
9.1.5
9.1.6
9.1.7
9.1.8
9.1.9
9.1.10
Die Vor- und Nachteile einer nativen App ...............................................

Die Erstellung einer nativen App mit PhoneGap
(Apache Cordova) .......................................................................................
Shake it like a Polaroid picture die native Version ...........................
Die kompilierten App-Dateien mithilfe von
PhoneGap Build erstellen ..........................................................................
Apple-Zertifikate und Profile .....................................................................
Einbinden von Zertifikat und Profil in PhoneGap Build .........................
Endlich! Das Hochladen der Shake it like a
Polaroid picture-Daten ............................................................................
Die App-Datei auf dem Endgert installieren .........................................
Icon- und App-Namen in PhoneGap Build anpassen .............................
Abschlieende Worte zu PhoneGap und PhoneGap Build ....................
381
381
383
384
390
391
395
396
398
399
400
9.2
Eine native Magazin-App mit Laker ..................................................................... 401
9.3
Die Verffentlichung einer App in einem App Store ........................................ 403

9.3.1
9.3.2
9.4
Das Verffentlichen einer App in Apples App Store ............................... 404

Das Verffentlichen einer App in Google Play ........................................ 411
Publizieren der WebApp in einem Store oder als Webseite ........................... 416
9.4.1
Auf den Vollbildmodus hinweisen ........................................................... 416
Inhalt
9.4.2
9.4.3
Die Alternative zum App Store OpenAppMarket und Zeewe ............ 418
Weitere Mglichkeiten .............................................................................. 425
A Weiterfhrende Informationen
427
A.1 HTML5 und CSS3 ....................................................................................................... 427

A.2 iOS, Apple .................................................................................................................. 427
A.3 Android, Google ....................................................................................................... 428
A.4 Technologie und Gadgets ...................................................................................... 428
A.5 Digital Publishing .................................................................................................... 428
A.6 Design und Inspiration ........................................................................................... 428
A.7 Sonstiges ................................................................................................................... 429
A.8 Interessante Twitter-Kontakte ............................................................................. 429
Index ..................................................................................................................................... 431
10
Kapitel 5
Positionsbestimmung
5
Alle aktuellen Smartphones sind in der Lage, ihre Position zu orten und diese an den
Nutzer weiterzugeben. Damit wird aus einem einfachen Telefon mit Webbrowser ein
Navigationsgert, ein Kompass oder eine lokale Suchmaschine. Diese Funktion ist
nicht nur nativen Apps vorbehalten, sondern kann, dank HTML5, auch im Webbrowser genutzt werden.
Die Positionsbestimmung erfolgt in erster Linie ber das Global Positioning System,
besser bekannt als GPS. In den 1970er Jahren vom US-Militr entwickelt, ist es heute
der Standard und die Grundlage fr jedes auf dem Markt erhltliche Navigationssystem. Das System besteht aus rund zwei Dutzend Satelliten, die permanent um die
Erde kreisen und ihre aktuelle Position zur Oberflche senden. Dieses Signal kann
von einem GPS-Empfnger auf der Erde zu einer Geoposition umgerechnet werden.
Diese Bestimmung ist recht przise, in der Regel kann die Position auf ca. 78 Meter
genau ermittelt werden. Voraussetzung dafr ist, dass der Empfnger gleichzeitig das
Signal von mindestens drei, blicherweise vier Satelliten empfangen kann. Allerdings ist der Empfang in geschlossenen Rumen in der Regel unmglich das Signal
ist zu schwach, um durch Betonwnde zu dringen, manchmal verhindert sogar ein
starker Schneesturm den GPS-Empfang.
In Fllen, in denen die Bestimmung per GPS nicht mglich ist, greifen Smartphones
daher auf ein strkeres Signal zurck: das Funksignal der Handysendemasten. blicherweise ist ein Telefon immer an mehreren Sendemasten angemeldet, um ein stabiles Signal zu gewhrleisten. Aus der Berechnung der Position von mindestens drei
dieser Sendemasten kann das Telefon seinen aktuellen Aufenthaltsort triangulieren.
Dafr berechnet es den geografischen Mittelpunkt aus allen drei Sendemasten.
iPhones und iPads verfgen noch ber eine dritte Mglichkeit zur Positionsermittlung: Seit 2008 speichert Apple die GPS-Position von Wireless LANs rund um die
Welt in einer Datenbank ab, aus der sich das Gert bedienen kann. Befindet sich ein
iOS-Gert also in der Nhe eines bekannten Netzwerks, kann es darber ermitteln,
wo es sich befindet.
Die Position wird immer in geografischer Lnge und Breite, auch Longitude und Latitude genannt, angegeben (Abbildung 5.1). Die Longitude steht fr die Position westlich bzw. stlich des Nullmeridians, einer 1884 willkrlich festgelegten Linie, die vom
Nord- zum Sdpol verluft und durch Royal Greenwich Observatory in London luft.
225
Positionsbestimmung
Die Entfernung wird dabei als Winkel angegeben, 0180 fr westlich von Greenwich
gelegene Positionen, negative Werte in stlicher Richtung.
Abbildung 5.1 Stellen Sie sich Longitude und Latitude wie ein Koordinatensystem vor.
Die Latitude beschreibt die Position in Nord-Sd-Richtung. Ausgehend vom quator

090 fr nrdlich gelegene Orte, negative Werte fr alles was im Sden liegt. Da die
Skala sehr grozgig ausgelegt ist und die Lngen/Breitengrade sehr weit voneinander entfernt liegen, werden Positionen immer mit mehreren Nachkommastellen
und der Himmelsrichtung angegeben: 52.518611N, 13.408056E ist z.B. die Position
des Roten Rathauses in Berlin.
In diesem Kapitel lernen Sie, wie Sie mit JavaScript die Positionsdaten Ihres Smartphones auslesen und verarbeiten knnen. Sie werden eine Beispiel-App entwickeln,
Ihre aktuelle Position in einer Google-Karte eintragen und lernen, wie Sie mit GPS
Entfernungen berechnen knnen.
5.1 Die Positionsbestimmung mit HTML5

Als Erstes werden Sie lernen, wie Sie mit JavaScript Ihre aktuellen GPS-Koordinaten
auslesen und in eine Tabelle eintragen. Zunchst legen Sie dafr die HTML-Tabelle an:
<table>
<tr id="longitude">
<th>Longitude:</th>
<td></td>
</tr>
<tr id="latitude">
<th>Latitude:</th>
<td></td>
</tr>
</table>
226
5.1
Die Positionsbestimmung mit HTML5
Sie haben nun eine Tabelle mit zwei Zeilen und zwei Spalten. Die erste Spalte fungiert
als Kopfspalte, die zweite ist noch leer hier werden Sie mit jQuery die Koordinatenwerte eintragen. Verknpfen Sie zunchst die jQuery-Bibliothek mit Ihrem HTMLDokument:
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
Definieren Sie zwei leere Variablen, in denen Sie spter Longitude und Latitude speichern:
var longitude, latitude;
Jetzt rufen Sie die Position Ihres Gerts ab: Dafr gibt es in HTML5 das Objekt navigator.geolocation, welches die Funktion .getCurrentPosition() besitzt. In den Klammern geben Sie eine weitere Funktion an, die aufgerufen werden soll, wenn die GPSKoordinaten erfolgreich ermittelt wurden. Dies nennt man eine Callback-Funktion.
$(function(){
navigator.geolocation.getCurrentPosition(positionsAusgabe);
});
Abbildung 5.2 Der Browser fragt zunchst nach, ob die aktuelle Benutzerposition bermittelt werden soll. Im linken Bereich sehen Sie die Darstellung auf dem iPhone, rechts
unter Android.
227
Positionsbestimmung
Definieren Sie nun die Funktion positionsAusgabe, die als Callback-Funktion aufgerufen wird. Der Funktion wird einen Parameter position bergeben. Dabei handelt es
sich um ein Objekt, das beim Abrufen der Position durch .getCurrentPosition()
erstellt wird. In dem Objekt sind u.a. Ihre GPS-Koordinaten gespeichert.
var positionsAusgabe = function(position){
longitude = position.coords.longitude;
latitude = position.coords.latitude;
$('#longitude td').html(longitude);
$('#latitude td').html(latitude);
};
Sie weisen Ihren, zuvor definierten, Variablen die Longitude und Latitude aus dem
position-Objekt zu. Anschlieend tragen Sie die Werte in die noch leeren Tabellenzellen ein.
Abbildung 5.3 Ausgabe Ihrer aktuellen Benutzerposition

in diesem Fall im Berliner Stadtzentrum
ffnen Sie die HTML-Seite nun im Browser Ihres mobilen Gerts. Direkt nach dem
Laden des Dokuments wird die Positionsabfrage ausgefhrt. In einem Dialogfenster
werden Sie gefragt, ob Sie der Webseite ihre aktuelle Position bermitteln mchten
(Abbildung 5.2). Klicken Sie auf OK, um die Positionsabfrage zuzulassen. In der rechten oberen Ecke neben der Batterieanzeige wird Ihnen nun das GPS-Symbol angezeigt, ein Indikator fr den Nutzer, dass sein Telefon gerade eine Ortung durchfhrt.
228
5.1
Die Positionsbestimmung mit HTML5
Einen kurzen Moment darauf werden Ihre Koordinaten in der Tabelle eingetragen
(Abbildung 5.3).
5.1.1 Weitere Eigenschaften der Positionsbestimmung

Neben Longitude und Latitude verfgt das position-Objekt noch ber weitere Eigenschaften, auf die Sie ebenfalls Zugriff haben:
position.coords.accuracy
Die Eigenschaft accuracy gibt Auskunft darber, wie genau die ermittelten Positionsdaten sind. Je nach Empfang und Ortungsmethode kann Ihre Position immer
nur auf einige Meter genau bestimmt werden. Die Toleranz wird als Radius in
Metern angegeben. Ist der Wert beispielsweise 10 Meter, bedeutet das, dass Ihr
Gert sich auch in einem Umkreis von 10 Metern der ermittelten Position befinden knnte.
position.coords.altitude
Die Altitude ist die Hhe ber Normalnull, also dem Meeresspiegel. Diese Information ist vor allem dann interessant, wenn Sie sich im Gebirge befinden. Allerdings wird die Ausgabe der Altitude bisher noch nicht von allen Gerten
untersttzt, auf vielen Android-Gerten bleibt die Variable einfach leer.
position.coords.altitudeAccuracy
Analog zu accuracy gibt die Eigenschaft altitudeAccuracy an, wie genau Ihre Hhe
ber Normalnull ermittelt werden konnte. Auch hier wird der Toleranzbereich in
Metern angegeben.
position.coords.heading und position.coords.speed
Theoretisch stehen Ihnen noch zwei weitere Eigenschaften zur Verfgung: heading gibt die Richtung an, in die sich das Gert bewegt. Wie bei einem Kompass
wird hier die Richtung, ausgehend von Norden, als Winkel zwischen 0 und 360
gespeichert. Die Eigenschaft speed beschreibt die Geschwindigkeit, mit der sich
das Gert aktuell bewegt.
In der Praxis untersttzt aber bisher noch kein Gert diese beiden Eigenschaften, mit
ein paar Tricks knnen Sie diese aber dennoch ermitteln.
Stromfresser GPS
Das GPS-Modul bentigt relativ viel Strom und verringert somit die Akkulaufzeit sprbar. Nutzen Sie daher GPS-Abfragen nur, wenn es tatschlich ntig ist. Bevor Sie eine
Positionsermittlung durchfhren, sollten Sie den Nutzer darber informieren und
nach Mglichkeit erlutern, wozu diese Abfrage notwendig ist. Vllig zurecht entstehen Sicherheitsbedenken, wenn einer WebApp der aktuelle Aufenthaltsort bermittelt werden soll beruhigen Sie den Nutzer durch einen kurzen Hinweis.
229
Positionsbestimmung
5.2 Die Where to Eat-App

Nachdem Sie nun die Grundlagen der Positionsbestimmung verstanden haben, nutzen Sie diese Kenntnisse, um ein uraltes Menschheitsproblem zu lsen: Wo
bekomme ich etwas zu essen her?
Sie kennen sicher das Problem: Sie befinden sich in einer fremden Stadt und sind auf
der Suche nach einem nahegelegenen Restaurant. Im Idealfall sollte das natrlich
nicht die erstbeste Burger-Bude sein Ihnen steht heute der Sinn nach Sushi. Fr diesen Zweck konzipieren Sie nun eine kleine Smartphone-App, die sich dieses Problems annimmt.
Sie sollte ber folgende Kernfunktionen verfgen:
Benutzerposition ermitteln
eine Liste von Restaurants laden
Restaurants und Benutzer in einer Karte eintragen
Entfernung zwischen Benutzer und Restaurants berechnen
Optional soll der Nutzer auswhlen knnen, welche Kategorie von Restaurant angezeigt werden soll. So ist es mglich, bestimmte Arten von Restaurants auszublenden,
um schneller das gewnschte Sushi-Restaurant ausfindig zu machen.
Bevor Sie mit der Konzeption beginnen, sollten Sie sich auerdem die Benutzungssituation vor Augen fhren. In den meisten Fllen wird es sich um ein vollmobiles Szenario handeln, bei dem der Nutzer mit seinem Smartphone und einer 3GVerbindung unterwegs ist. Die App wird impulsiv und zielgerichtet aufgerufen, die
drei wichtigsten Fragen mssen von der App schnell beantwortet werden:
1. Wo bin ich?
2. Wo befinden sich die nchsten Restaurants?
3. Wie weit sind diese von mir entfernt?
Ihre App sollte also:
fr ein Smartphone optimiert sein
auf Android und iOS gleichermaen funktionieren
kurze Ladezeiten aufweisen
gelernte Bedienmechanismen aufgreifen
Weniger relevant sind eine Tablet-Version oder verspielte Elemente. Der Nutzer
mchte nichts entdecken. Animationen, Dekorationen oder Ornamente sind hier
fehl am Platz.
Ihre App besteht im Wesentlichen aus drei Screens: einer Karte, auf der die Position des
Nutzers und der umliegenden Restaurants eingezeichnet ist, einer Liste der Restau-
230
5.2
Die Where to Eat-App
rants und einem Optionsmen, in dem bestimmte Restauranttypen ausgewhlt werden knnen. Die Screens werden ber eine Symbolleiste untereinander verbunden, die
App startet mit der Karte. Fertigen Sie dazu einen Wireframe an (Abbildung 5.4).
Restaurants
Optionen
Pizza Dach
Pizza
Burgeramt
Burger
Spaghetti Western
Pasta
Sushi Izumi
Sushi
Pesto I Pizza
Il Due Forni
Abbildung 5.4 Der Wireframe fr die Where to Eat-App
Den Wireframe verwenden Sie, wie in Kapitel 3, Konzeption und Gestaltungsprinzipien, beschrieben, fr Nutzertests. Wenn Sie die Wireframes gezeichnet haben,
scannen bzw. fotografieren Sie sie ab und laden die Bilder auf ein Testgert. Sie haben
nun drei Bilder, die Sie im Fotobetrachter Ihres Smartphones hin- und herwechseln
knnen. Dadurch entsteht beim Nutzer bereits ein ziemlich realistisches AppGefhl, das die Ergebnisse unseres Tests verbessert. Geben Sie Ihrem Testbenutzer
eine konkrete Aufgabe, z.B. Finden Sie heraus, wo sich die nchstgelegene Pizzeria
befindet. Der Nutzer soll diese Aufgabe mithilfe des App-Wireframes lsen, Sie bernehmen dabei die Bedienung. Wenn der Testkandidat also auf Optionen tippen
wrde, whlen Sie fr ihn das entsprechende Bild aus. Der Test hilft Ihnen dabei, die
Erwartungshaltung des Nutzers zu verstehen und eventuell vergessene Funktionen
zu ergnzen.
In unserem Beispieltest fallen Ihnen besonders bei der Listenansicht zwei Dinge auf:
Die Benutzer konnten die Restaurants nicht den Markern auf der Karte zuordnen.
Auerdem war unklar, welches nun das nchstgelegene Restaurant ist. Sie lsen diesen Umstand, indem Sie vor jedes Restaurant in der Liste einen kleinen Kartenausschnitt einfgen, der bei der Assoziation hilft. Auerdem ergnzen Sie die Liste um
die jeweiligen Entfernungen der Restaurants zu unserer aktuellen Position.
5.2.1 Position auf einer statischen Karte eintragen

Das Konzept steht, nun setzen Sie die App mit HTML5 um. Zunchst mssen Sie eine
GPS-Koordinate in einer Karte eintragen. Damit Sie das Kartenmaterial nicht selbst
231
Positionsbestimmung
auf Ihrem Server bereitstellen mssen, gibt es Dienstleister, die dies fr Sie tun. Der
bekannteste ist Google Maps, der statische und dynamische Karten zur Verfgung
stellt (Abbildung 5.5). Der Service ist kostenlos und kann ohne Anmeldung genutzt
werden, ist aber auf 1.000 Kartenabrufe pro Nutzer und Tag beschrnkt.
Abbildung 5.5 Die Google Maps Static API
Google bietet zwei Arten von Karten an: statische Karten, die ein nicht vernderbares
Abbild einer Karte ausgeben, und dynamische Karten, die der Nutzer zoomen und
hin- und herbewegen kann. Eine statische Karte zu erstellen ist sehr einfach: Sie senden eine Anfrage mit einem Parameter an den Google-Server, dieser liefert eine Bilddatei zurck, die den entsprechenden Kartenausschnitt beinhaltet (Abbildung 5.6).
Testen Sie dies, indem Sie im Browser folgende Adresse aufrufen:
http://maps.google.com/maps/api/staticmap?center=Berlin,Germany&zoom=10&size=
500x500&sensor=false
Der Google-Server liefert eine Bilddatei zurck, die den angeforderten Kartenausschnitt beinhaltet. Sie knnen diesen sehr einfach in Ihre HTML5-Datei einbinden:
232
5.2
<img src="http://maps.google.com/maps/api/staticmap?center=Berlin,Germany&
zoom=10&size=500x500&sensor=false">
Abbildung 5.6 Kartenausgabe als Bild
Um die Karte darzustellen, bentigt der Server einige Parameter. Diese sind:
center
Legt den Mittelpunkt der Karte fest, bestimmt also den Ausschnitt. Der Parameter
versteht sowohl Adressangaben (z.B. Rotes Rathaus, Berlin, Germany), als auch
eine GPS-Position als Wertepaar (z.B. 52.518611, 13.408056). Beachten Sie, dass
Longitude und Latitude in der amerikanischen Syntax bergeben werden mssen,
dass also statt eines Kommas ein Punkt als Trenner verwendet wird.
zoom
Gibt die Gre des Kartenausschnitts an. Je grer der Wert, desto nher befindet sich der Betrachter am Ort des Geschehens. Der Parameter kann eine natrliche Zahl zwischen 0 und 21 sein. Bei 0 ist die gesamte Weltkarte sichtbar, bei 21
werden einzelne Gebude erkennbar. Je nach Zoomstufe werden auch mehr
Details dargestellt: Bei Stufe 10 werden nur Hauptstraen eingeblendet, ab Stufe 13
alle Nebenstraen, ab Stufe 15 auch deren Straennamen. Die groen Stufen sind
nicht fr alle Gebiete verfgbar besonders in lndlichen Regionen sind Gebudedetails etc. hufig nicht verfgbar.
233
Positionsbestimmung
size
Definiert die Gre der Karte bzw. der Bilddatei, die vom Server ausgeliefert wird.
Der Parameter legt die Breite und die Hhe des Bildes in Pixeln fest, die Angabe
500x300 erstellt beispielsweise eine Karte, die 500 Pixel breit und 300 Pixel hoch
ist. Hier gibt es eine entscheidende Einschrnkung: Eine statische Karte darf
hchstens 640 Pixel hoch bzw. breit sein, der Maximalwert liegt also bei 640x640.
sensor
Der Sensor-Parameter gibt an, ob die App die Benutzerposition ber einen GPS-Sensor ermittelt oder nicht. Dies hat keine Auswirkung auf die Kartendarstellung, muss
aber immer mit bergeben werden. Zulssig ist entweder die Angabe true oder false.
Neben diesen zwingend erforderlichen Parametern, gibt es eine Reihe von Zusatzoptionen, die Sie ber weitere Parameter definieren knnen.
Kartentyp
maptype
Standardmig liefert Google Maps eine Straenkarte (roadmap, Abbildung 5.7) aus,
alternativ knnen Sie eine Reliefkarte (terrain, Abbildung 5.8) anzeigen lassen, in der
Hhenunterschiede und Vegetation dargestellt werden. Als Letztes gibt es noch eine
Satellitenkarte (satellite, Abbildung 5.9). Ebenfalls mglich ist eine Satellitenkarte
mit eingezeichneten Straen und Pltzen, die sogenannte Hybridkarte (hybrid, Abbildung 5.10).
Abbildung 5.7 Kartentyp roadmap
234
5.2
Abbildung 5.8 Kartentyp terrain
Abbildung 5.9 Kartentyp satellite
235
Positionsbestimmung
Abbildung 5.10 Kartentyp hybrid
Markierungen
Zustzlich knnen Sie wichtige Pltze in der Karte mit den Google-typischen Markierungen einzeichnen (Abbildung 5.11). Dafr bietet die Static Maps API den markersParameter an. Der Wert, den Sie dem markers-Parameter bergeben knnen, ist ein
wenig komplex: Zunchst definieren Sie den Stil der Markierungen, anschlieend
bergeben Sie, durch einen senkrechten Strich (auch Pipe genannt) getrennt, die
Positionen der Markierungen:
markers=color:blue|size:mid|label:A|52.518611,13.408056|Alexanderplatz,
Berlin,Germany
Als Markierungsstile knnen Sie Farbe, Gre und Bezeichnung festlegen:

color gibt die Farbe der Markierung an. Dies kann entweder eine vordefinierte
Bezeichnung sein (mglich sind black, white, brown, green, purple, yellow, blue,
gray, orange und red) oder ein Hexadezimalwert (z.B. #ff0000 fr die Farbe Rot).
size definiert die Gre. Neben der Standardgre gibt es mittlere Marker (mid),
kleine (small) und winzige (tiny) Versionen.
label beinhaltet einen Grobuchstaben bzw. eine Ziffer, die auf dem Marker steht.
Umlaute und Sonderzeichen sind leider nicht mglich, Zahlen grer 9 ebenso
wenig. Bei kleinen und winzigen Markern funktioniert das Label nicht.
236
5.2
Abbildung 5.11 Die Marker in der Karte
Natrlich ist es auch mglich, den Markierungsstil zwischendurch zu wechseln

(Abbildung 5.12):
http://maps.google.com/maps/api/staticmap?size=640x640&sensor=false&markers=
color:blue|size:mid|label:A|52.518611,13.408056&markers=color:red|label:B|
Alexanderplatz,Berlin,Germany
Abbildung 5.12 Unterschiedliche Markerstile in einer Karte
237
Positionsbestimmung
Ihnen wird aufgefallen sein, dass der center- und der zoom-Parameter fehlen. Wenn
Sie einen oder mehrere Marker definieren, kann die Static Maps API den Kartenausschnitt implizit positionieren, also so, dass alle Marker im Ausschnitt sichtbar sind.
Weitere Informationen und eine komplette Dokumentation zur Static Maps API in
deutscher Sprache finden Sie unter http://code.google.com/intl/de-DE/apis/maps/
documentation/staticmaps/.
Da der Nutzer Ihrer WebApp in der Lage sein soll, die Karte zu zoomen und zu bewegen, bietet sich die Einbindung einer dynamischen Karte an die Google Maps JavaScript API.
5.2.2 Interaktive Karten mit der Google Maps JavaScript API einbinden
Die Google Maps JavaScript API erlaubt es Ihnen, eine vollwertige interaktive Karte in
Ihre App einzubinden, genauso wie sie es von http://maps.google.com/ gewohnt sind
(Abbildung 5.13). Ebenso wie bei der Static Maps API ist die Verwendung kostenlos,
das Kartenmaterial und der JavaScript-Code werden auf dem Google-Server gehostet
und von dort eingebunden. Ihnen entstehen also keine zustzliche Hostingkosten.
Abbildung 5.13 Die Google Maps JavaScript API
238
5.2
Um eine Google-Karte zu Ihrer App hinzuzufgen, mssen Sie zunchst im HTMLCode ein leeres Platzhalterelement definieren:
<section id="karte"></section>
ber CSS legen Sie die Gre des Elements fest. Anstelle einer festen Pixelgre knnen Sie sie mit einem einfachen Trick bildschirmfllend darstellen:
#karte {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Anschlieend mssen Sie noch den JavaScript-Code der API einbinden:

<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
Jetzt knnen Sie eine Google-Karte initialisieren und darstellen lassen. Sie mchten
die Karte gleich, zentriert an der Benutzerposition, ausgeben lassen:
$(function(){
navigator.geolocation.getCurrentPosition(function(position){
meineLongitude = position.coords.longitude;
meineLatitude = position.coords.latitude;
var optionen = {
zoom: 13,
center: new google.maps.LatLng(
meineLatitude, meineLongitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
karte = new google.maps.Map(
document.getElementById('karte'), optionen);
});
});
Wie bereits in Abschnitt 5.1, Die Positionsbestimmung mit HTML5, beschrieben,

ermitteln Sie zunchst mit geolocation.getCurrentPosition die GPS-Koordinaten des
Benutzers. Anschlieend legen Sie die Optionen der Karte in einem JavaScript-Objekt
fest neben der Anfangszoomstufe sind dies der Kartentyp und die Anfangsposition
des Kartenausschnitts, hier die Koordinaten des Benutzers.
239
Positionsbestimmung
Anschlieend legen Sie ein neues Objekt vom Typ google.maps.Map an, dem Sie als
Parameter das Platzhalterelement mit der id karte und das Optionen-Objekt bergeben.
Herzlichen Glckwunsch, Sie haben soeben Ihre erste dynamische Karte erstellt
(Abbildung 5.14)! Probieren Sie es gleich aus.
Abbildung 5.14 Eine Interaktive Google-Karte auf dem iPhone (links) und unter
(Android) rechts.
5.2.3 Liste der Restaurants laden und ausgeben

Nun laden Sie eine Liste mit Restaurants. Dafr eignet sich das JSON-Format, da es
per JavaScript ohne Neuladen des HTML, also asynchron, nachgeladen werden kann.
Legen Sie eine neue Textdatei an, und nennen Sie diese restaurants.json. In die Datei
schreiben Sie nun eine Liste mit Restaurants, also deren Namen und GPS-Position
sowie eine Kategorie. Fr Restaurants in Berlin knnte das in etwa so aussehen:
{
"Pizza Dach": {
"Kategorie": "Pizza",
"Position": {
"Longitude": 13.456106,
"Latitude": 52.51024
}
240
5.2
},
"Burgeramt": {
"Kategorie": "Burger",
"Position": {
"Longitude": 13.459539,
"Latitude": 52.510299
}
},
"Pesto i Pizza": {
"Kategorie": "Pizza",
"Position": {
"Longitude": 13.413776,
"Latitude": 52.511971
}
}
JSON ist ein sogenanntes objektorientiertes Datenaustauschformat: Ein Objekt wird

immer in geschweifte Klammern gesetzt und enthlt mindestens ein Wertepaar. Der
Schlssel des Wertepaars ist immer eine Zeichenkette, die in Anfhrungszeichen
geschrieben werden muss. Nach dem Schlssel folgt, getrennt von einem Doppelpunkt, der eigentliche Wert, also die Daten. Dies kann neben einer Zeichenkette oder
einer Zahl auch ein weiteres JSON-Objekt sein. Diese lassen sich also beliebig tief
ineinander verschachteln. Dabei ist die Einhaltung der Syntax extrem wichtig. Schon
ein vergessenes Komma fhrt zu einer vernderten Datenstruktur oder zu unlesbaren Daten. Ob Ihre Datei in Ordnung ist, berprfen Sie am besten mit einem JSON
Validator wie JSONLint (http://jsonlint.com/, Abbildung 5.15).
Mithilfe von jQuery knnen Sie die Daten von Ihrem Server laden. Dafr gibt es die
Funktion .getJSON, die eine JSON-Datei abrufen und verarbeiten kann.
$.getJSON('daten/restaurants.json?='+Date.now(), function(json){
$.each(json, function(restaurant, daten){
...
});
});
Der Funktion bergeben Sie zwei Parameter: Den Pfad bzw. die URL Ihrer JSON-Datei
und eine Funktion, die ausgefhrt werden soll, sobald die Daten geladen wurden.
Dieser sogenannten Callback-Funktion wird das JSON-Objekt als Variable json bergeben.
241
Positionsbestimmung
Abbildung 5.15 Mit JSONLint berprfen Sie JSON-Dateien.
Die jQuery-Hilfsfunktion $.each() fhrt eine Funktion fr jedes Unterobjekt in der

JSON-Datei aus, also fr jedes Restaurant. Dabei bergeben Sie den jeweiligen Werteschlssel, also unseren Restaurantnamen, und den Wert, also die Kategorie und GPSKoordinaten, als Parameter an die Funktion. Wenn Sie nun drei Restaurants in der
JSON-Datei gespeichert haben, wird diese Funktion dreimal aufgerufen. Sie knnen
die Funktion nutzen, um in Ihrer Google-Karte Marker fr jedes Restaurant zu setzen:
marker = new google.maps.Marker({
map: karte,
position: new google.maps.LatLng(
daten.Position.Latitude,daten.Position.Longitude),
animation: google.maps.Animation.DROP
});
Sie erzeugen ein neues Objekt vom Typ google.maps.Marker, dem Sie mehrere Parameter bergeben: den Namen des Map-Objekts, auf dem die Marker gesetzt werden
sollen, und die Position des Markers. Diese lesen Sie aus dem JSON-Objekt aus,
genauer aus den Variablen daten.Position.Latitude und daten.Position.Longitude.
Diese Aneinanderreihung der verschachtelten Werteschlssel speichert die Daten als
Zeichenkette bzw. Zahl.
242
5.2
Auerdem wollen Sie aber noch eine Liste der Restaurants mit einem kleinen Kartenausschnitt anlegen. Dazu mssen Sie zunchst im HTML-Code ein Platzhalterelement anlegen:
<section id="uebersicht">
<h2>Restaurants in der Nähe</h2>
<ul>

</ul>
</section>
hnlich wie bei der Karte legen Sie ein Element vom Typ section an, dem Sie eine
berschrift und eine leere, unsortierte Liste spendieren. Hier werden nun per jQuery
die Restaurants eingetragen:
$('#uebersicht').find('ul').append('<li class="'+daten.Kategorie+'">'
+restaurant+'</li>');
Sie fgen also der leeren Liste pro vorhandenem JSON-Eintrag ein li-Element mit
dem Restaurantnamen und einem class-Attribut an, in dem die Restaurantkategorie
gespeichert ist (Abbildung 5.16).
Abbildung 5.16 Unformatierte Restaurantliste, aus der JSON-Datei geladen
243
Positionsbestimmung
In Ihrem Konzept steht jedoch, dass zustzlich zum Restaurantnamen ein kleiner
Kartenausschnitt angezeigt werden soll. Nun knnen Sie mit Ihrem Wissen ber die
Static Maps API glnzen erweitern Sie den jQuery-Befehl um Folgendes:
var ausschnitt = 'http://maps.google.com/maps/api/staticmap?size=50x50&markers=color:blue|size:tiny|'+daten.Position.Latitude+','+daten.Position.Longitude+'&sensor=true';
$('#uebersicht').find('ul').append('<li class="'+daten.Kategorie+'"><img src=
"'+ausschnitt+'">'+restaurant+'</li>');
Sie erzeugen jeweils einen kleinen Kartenausschnitt, der 50 50 Pixel gro ist, und
einen winzigen blauen Marker an der Position des Restaurants. Der Ausschnitt wird
als Bildelement in den Listenpunkt eingefgt.
Was jetzt noch fehlt, ist die Entfernung zwischen Benutzer und dem jeweiligen
Restaurant.
5.2.4 Den Abstand zwischen zwei Koordinaten berechnen

Um es gleich vorweg zu sagen: Die Entfernungsberechnung anhand von GPS-Koordinaten ist eine Wissenschaft fr sich. Da sich die Erde leider nicht ganz rund, sondern
eher wie eine Clementine krmmt, gelten an allen Punkten auf dem Planeten andere
Regeln. Insbesondere bei der Berechnung zwischen weit entfernten Punkten, die z.B.
auf unterschiedlichen Halbkugeln liegen, wird es richtig kompliziert.
Die gute Nachricht ist: Fr kurze Distanzen gibt es eine relativ einfache und ausreichend genaue Formel. Alles was Sie bentigen, sind die Longitude und Latitude der
beiden Punkte. Diese rechnen Sie anhand des durchschnittlichen Erdradius in Distanzen vom Nullpunkt um, damit Sie anschlieend, mithilfe des Satzes des Pythagoras, eine Entfernung der beiden Punkte berechnen knnen. Als JavaScript-Funktion
sieht das so aus:
var entfernungBerechnen = function(meineLongitude, meineLatitude, long1,
lat1) {
erdRadius = 6371;
meineLongitude = meineLongitude * (Math.PI/180);
meineLatitude = meineLatitude * (Math.PI/180);
long1 = long1 * (Math.PI/180);
lat1 = lat1 * (Math.PI/180);
x0 = meineLongitude * erdRadius * Math.cos(meineLatitude);
y0 = meineLatitude * erdRadius;
x1 = long1 * erdRadius * Math.cos(lat1);
y1 = lat1 * erdRadius;
244
5.2
dx = x0 - x1;
dy = y0 - y1;
d = Math.sqrt((dx*dx) + (dy*dy));
if(d < 1) {
return Math.round(d*1000)+" m";
} else {
return Math.round(d*10)/10+" km";
}
};
Sie bergeben der Funktion vier Parameter: Ihre Longitude und Latitude und die Longitude und Latitude des entfernten Punktes. Nach etwas mathematischer Magie gibt
die Funktion eine Zeichenkette zurck, welche die Luftlinie zwischen beiden Positionen zurckgibt, wahlweise in Kilometern oder, bei krzeren Distanzen, in Metern.
Die Entfernung ist relativ genau; Atomraketen sollten Sie damit zwar nicht steuern,
aber um ein Restaurant zu finden, reicht diese Funktion vllig aus. Ergnzen Sie den
jQuery-Befehl fr die Restaurantliste nun um den Funktionsaufruf:
$('#uebersicht').find('ul').append('<li class="'+daten.Kategorie+'"><img src=
"'+ausschnitt+'">'+restaurant+'<span>'+entfernungBerechnen(meineLongitude,
meineLatitude,daten.Position.Longitude,daten.Position.Latitude)+'</span></li>');
In unserer Restaurantliste sieht das Ganze nun so aus wie in Abbildung 5.17.
Abbildung 5.17 Schon besser Liste mit Kartenausschnitt und Entfernung
245
Positionsbestimmung
5.2.5 Die Programmoberflche

Sie haben nun alle bentigten Funktionalitten fr Ihre Geolocation-App beisammen. Nun mssen Sie das Ganze noch in einen App-Rahmen gieen. Sie beginnen
mit dem HTML-Code. Sie haben bereits den Platzhalter fr die Karte und die Restaurantliste angelegt, ergnzen Sie einen weiteren Bereich fr die Optionen:
<section id="karte">
</section>
<section id="uebersicht">
<h2>Restaurants in der Nähe</h2>
<ul>

</ul>
</section>
<section id="optionen">
<h2>Optionen</h2>
<ul>
<li><label>Pizza<span><input type="checkbox" checked="checked"
class="Pizza"></span></label></li>
<li><label>Burger<span><input type="checkbox" checked="checked" class=
"Burger"></span></label></li>
<li><label>Pasta<span><input type="checkbox" checked="checked" class=
"Pasta"></span></label></li>
<li><label>Sushi<span><input type="checkbox" checked="checked" class=
"Sushi"></span></label></li>
</ul>
</section>
Dieser besteht aus einer unsortierten Liste mit den Restaurantkategorien, die jeweils
eine angewhlte Checkbox pro Listeneintrag enthlt. Um das Layout kmmert sich
eine CSS-Datei, in der Folgendes steht:
body {
margin: 0;
font-family: Helvetica, sans-serif;
}
section {
overflow: scroll;
-webkit-overflow-scrolling:touch;
width: 100%;
min-height: 411px;
background: #c5ccd4;
padding-bottom: 50px;
246
5.2
position: absolute;
display: none;
}
section.aktiv{
display: block;
}
section#karte {
top: 0;
right: 0;
bottom: 49px;
left: 0;
background-image: url(../bilder/loader.gif);
background-repeat: no-repeat;
background-position: center;
}
h2 {
margin: 0;
padding: 20px 20px 0;
font-size: 17px;
color: #4c566c;
text-shadow: 0 1px 0 #fff;
}
Das Stylesheet verndert das Aussehen Ihres HTML-Dokuments so, dass Schriftart
und Farben denen einer typischen mobilen App entsprechen. Die Sektionen werden
bereinandergelegt und je nach Situation ausgeblendet. Wenn Sie Ihre App aufrufen, werden Sie zunchst nur eine weie Seite sehen, doch dazu gleich mehr. Die Sektion #karte erhlt als Hintergrundbild einen kleinen Ladekreis, der zentriert
angezeigt wird. Dies hat folgende Bewandtnis: Abhngig von der Dauer der Positionsbestimmung und der Ladezeit der Google Maps JavaScript API kann es einige
Sekunden dauern, bis eine Karte angezeigt wird. Um dem Nutzer anzuzeigen, dass
etwas geladen wird, dreht sich der Ladekreis in der Bildschirmmitte. Dieser verschwindet von allein, sobald die Karte geladen ist und den Hintergrund verdeckt. Auf
http://ajaxloader.info knnen Sie aus verschiedenen Modellen whlen, eigene Farben einstellen und kostenlos herunterladen.
Damit die Karte beim Start der App angezeigt wird, weisen Sie ihr per jQuery die
Klasse aktiv zu:
$('#karte').addClass("aktiv");
Um zwischen den einzelnen Sektionen zu wechseln, bentigen Sie noch eine Symbolleiste im App-Stil.
247
Positionsbestimmung
5.2.6 Eine Symbolleiste einfgen

Die Symbolleiste ist ein gelerntes und daher fr Ihre App ideales Navigationselement. Im Gegensatz zu Desktopanwendungen befinden sich Symbolleisten bei
Mobilgerten meist am unteren Bildschirmrand, damit Sie gut mit einer Hand und
dem Daumen zu erreichen sind. Fgen Sie folgenden Code in Ihre HTML-Datei ein:
<nav>
<li>
<a class="karte" href="#karte">Karte</a></li>
<li>
<a class="uebersicht" href="#uebersicht">Liste</a></li>
<li>
<a class="optionen" href="#optionen">Optionen</a></li>
</nav>
Sie haben jetzt eine Liste mit Textlinks erstellt, die per Anker auf die jeweiligen Sektionen Ihrer App verweisen. Damit daraus eine Toolbar wird, mssen Sie noch etwas
CSS hinzufgen:
nav {
height: 49px;
background: #000 -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #000),
color-stop(0.02, #565656),
color-stop(0.04, #303030),
color-stop(0.5, #141414),
color-stop(0.51, #000)
);
display: -webkit-box;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
nav li {
margin: 0;
padding: 0;
list-style: none;
-webkit-box-flex: 1;
248
5.2
width: 100px;
}
nav li a {
-webkit-box-flex: 1;
-webkit-box-pack: center;
border-radius: 3px;
margin: 3px 2px 2px 2px;
font-size: 9.5px;
font-weight: bold;
text-align: center;
color: #aaa;
text-decoration: none;
-webkit-box-align: end;
background-repeat: no-repeat;
background-position: center 3px;
background-size: 35px 25px;
}
nav li a.aktiv {
background-color: rgba(255,255,255,.15);
color: #fff;
}
a[href='#karte'] {
background-image: url(../bilder/karte.png);
}
a[href='#uebersicht'] {
background-image: url(../bilder/uebersicht.png);
}
a[href='#optionen'] {
background-image: url(../bilder/optionen.png);
}
Listing 5.1 Das Stylesheet der Toolbar
Jetzt sieht Ihr Navigationselement schon eher nach einer Symbolleiste aus (Abbildung 5.18).
Die Symbole sind transparente PNG-Bilder. In diesem Fall wurden wir in der kostenlosen Symbolbibliothek Icon Sweets fndig. Sie knnen alle Symbole als Photoshop-Datei unter http://iconsweets2.com/ herunterladen und kostenlos in Ihren
Projekten verwenden.
249
Positionsbestimmung
Das Umschalten zwischen den Sektionen realisieren Sie per JavaScript:

$('nav a').on('click',function(){
$('section, nav a').removeClass('aktiv');
$(this).addClass('aktiv');
$($(this).attr('href')).addClass('aktiv');
return false;
});
Abbildung 5.18 Die fertige Navigationsleiste
5.2.7 Die Restaurantliste erstellen

Widmen Sie sich nun der Restaurantliste und den Optionen. Noch fhlt es sich mehr
wie eine Webseite und weniger wie eine mobile App an. Abhilfe schafft auch hier wieder CSS (Abbildung 5.19):
ul {
padding: 0;
margin: 9px;
list-style: none;
border: 1px solid #a1a7ad;
border-radius: 8px;
font-size: 19px;
font-weight: bold;
box-shadow: 0 1px 0 #fff;
}
ul li {
background: #f7f7f7;
border-top: 1px solid #fdfdfd;
border-bottom: 1px solid #cacaca;
padding: 5px 10px;
line-height: 34px;
}
ul li:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top-color: #e5e5e5;
}
250
5.2
ul li:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-width: 0;
}
ul li span {
float: right;
display: block;
color: #999;
font-weight: normal;
}
Abbildung 5.19 So soll es aussehen die Liste der Restaurants auf dem iPhone (links) und
unter Android (rechts)
Indem Sie die iOS-typischen Abstnde, Farben und Schriftgren definieren, kommen Sie einem App-typischen Look & Feel schon sehr nahe. Zustzlich zu diesen allgemeinen Formatierungen sind noch ein paar Spezialregeln vonnten, die nur fr
die bersicht bzw. die Optionen Anwendung finden:
#uebersicht ul {
overflow: hidden;
-webkit-background-clip: padding;
}
251
Positionsbestimmung
#uebersicht ul li {
line-height: 50px;
padding-left: 5px;
}
#uebersicht ul li img {
width: 50px;
height: 50px;
border-radius: 3px;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
#optionen li input {
height: 34px;
width: 34px;
margin: 0;
}
Sorgen Sie nun mit JavaScript dafr, dass sich das An- bzw. Abwhlen bestimmter
Restauranttypen in den Optionen in der bersicht niederschlgt (Abbildung 5.20):
$('#optionen :checkbox').on('change', function(){
$('#uebersicht li.'+this.className)
.toggleClass('versteckt');
});
Abbildung 5.20 Die Liste der Optionen auf dem iPhone und unter Android
252
5.2
Je nachdem, ob eine Checkbox angewhlt ist oder nicht, wird den entsprechenden
Restaurants in der Liste die Klasse versteckt hinzugefgt oder entfernt.
5.2.8 Der letzte Schliff

Ihre Geolocation-App ist nun einsatzbereit. Ihre WebApp zeigt nun eine Karte mit
Restaurants an und berechnet die Entfernungen korrekt zu Ihrer momentanen Position. Testen Sie die App whrend der Entwicklung immer wieder auf Ihrem Smartphone, um sicherzustellen, dass alles so funktioniert, wie es soll. Allerdings sieht das
Ganze immer noch sehr nach einer Webseite aus, nicht zuletzt weil die Adressleiste
des Browsers permanent sichtbar ist. Fgen Sie einen JavaScript-Befehl ein, um die
Adressleiste zu verstecken:
window.scrollTo(0,1);
Natrlich sollten Sie auerdem verhindern, dass der Nutzer die Seite verkleinern
bzw. vergrern kann, die Aktivierung des Vollbildmodus ist ebenfalls ratsam.
Schreiben Sie dazu, wie bereits beschrieben, Folgendes in den head-Bereich Ihres
HTML-Codes:
<meta name="viewport" content="width=device-width, initial-scale=1 ,
maximum-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
Auerdem sollten Sie ein schnes Symbol fr den Home-Bildschirm (Abbildung 5.21)
sowie einen Ladebildschirm erstellen (Abbildung 5.22) und im head-Bereich des Dokuments verknpfen:
<link rel="apple-touch-icon-precomposed"
href="/bilder/icon-ipad.png" sizes="72x72" />
href="/bilder/icon-iphone-retina.png" sizes="114x114" />
href="/bilder/icon-ipad-retina.png" sizes="114x114" />
href="/bilder/icon-iphone.png" />
<link rel="apple-touch-startup-image"
href="/bilder/splash-ipad-portrait.png" media="screen and (min-device-width:
481px) and (max-device-width: 1024px)" />
253
Positionsbestimmung
<link rel="apple-touch-startup-image"
href="/bilder/splash-iphone.png" />
Abbildung 5.21 Das App-Symbol, gestaltet mithilfe des Icon-Templates von http://appicontemplate.com/
Whlen Sie fr Ihre App zu guter Letzt einen prgnanten Namen, der nicht lnger als
zwlf Zeichen ist, und definieren Sie diesen im title Ihrer WebApp:
<title>Where to Eat</title>
Fertig! Die App funktioniert sowohl auf einem Smartphone (Abbildung 5.22) als auch
auf dem iPad (Abbildung 5.24).
254
5.2
Abbildung 5.22 Mit einem Bildbearbeitungsprogramm, wie z.B. Photoshop,

bereiten Sie einen Ladebildschirm vor.
Abbildung 5.23 Die App funktioniert problemlos auch unter Android
255
Positionsbestimmung
Abbildung 5.24 Die App auf dem iPad
5.3 More Fun mit Geodaten

Die Google Maps APIs sind nur eine Mglichkeit, mit geografischen Daten ansprechende Apps zu kreieren. Darber hinaus gibt es von verschiedenen Anbietern
Schnittstellen, die es Ihnen ermglichen, die Benutzerposition fr unterschiedlichste
Anwendungsflle zu nutzen. Sie knnen die Where to Eat-App z.B. mit einer Liste
aus der Qype-Bibliothek fttern, in der weltweit unzhlige Restaurants gespeichert
sind. Im Folgenden wollen wir Ihnen einige kostenlose APIs vorstellen, die ortsbezogene Daten bereithalten.
256
5.3
More Fun mit Geodaten
5.3.1 Qype-API
Seit 2006 bietet die Hamburger Plattform Qype Restaurant- und Ladenbesitzern die
Mglichkeit, ihre rtlichkeiten im Netz zu prsentieren und von Benutzern bewerten zu lassen. Besonders in Deutschland ist so gut wie jedes Ladengeschft verzeichnet. Die kostenlose API ermglicht es App-Entwicklern, Beschreibungen und
Bewertungen abzurufen und nach bestimmten Kriterien zu filtern (Abbildung 5.25).
Eine ausfhrliche Dokumentation in deutscher Sprache finden Sie unter http://
www.qype.com/developers/api.
Abbildung 5.25 Die Qype-API
5.3.2 foursquare-API
Das soziale Netzwerk foursquare wurde 2009 von Dennis Crowley in New York
gegrndet. Nutzer knnen in Bars und Cafs einchecken und dafr Punkte und
Belohnungen sammeln. Die kostenlose API kann fr eigene Anwendungen genutzt
werden (Abbildung 5.26), eine englischsprachige Dokumentation finden Sie unter
https://developer.foursquare.com/.
257
Positionsbestimmung
Abbildung 5.26 Die foursquare-API
5.3.3 Google Places

hnlich wie bei Qype knnen Nutzer auch bei Google Places besuchte rtlichkeiten
bewerten und empfehlen. Seit Kurzem bietet der Service eine kostenlose API an
(Abbildung 5.27), die sich aber noch in der Entwicklungsphase befindet. Eine kostenlose Entwicklervorschau finden Sie unter http://code.google.com/intl/de-DE/apis/
maps/documentation/places/.
5.3.4 Twitter-API
berall auf der Welt nutzen Menschen den beliebten Microblogging-Dienst Twitter,
um Statusnachrichten und Neuigkeiten zu verbreiten. Eine wichtige Funktion ist die
Option In der Nhe, bei der Sie nach Tweets in Ihrer Umgebung suchen knnen
z.B. um zu erfahren, was das aktuelle Stadtgesprch ist. Per API knnen Sie diese
Funktion in Ihrer eigenen WebApp nutzen (Abbildung 5.28), eine englischsprachige
Dokumentation finden Sie unter https://dev.twitter.com/docs/api.
258
5.3
More Fun mit Geodaten
Abbildung 5.27 Die Google-Places-API
Abbildung 5.28 Die Twitter-API
259
Positionsbestimmung
5.3.5 Flickr-API
Der Fotosharing-Dienst Flickr bietet Nutzern weltweit die Mglichkeit, eigene Fotos
zu teilen und zu taggen. Eine wichtige Rolle spielt dabei der Ort, an dem das Foto entstanden ist. Eine kostenlose API bietet Ihnen die Mglichkeit, nach Fotos aus Ihrer
Umgebung zu suchen ideal fr mobile WebApps (Abbildung 5.29). Die englischsprachige Dokumentation finden Sie unter http://www.flickr.com/services/api/.
Abbildung 5.29 Die Flickr-API
Geofunktionen sind in den meisten Apps nicht mehr wegzudenken. Stellen Sie sich
nur mal die vielen unterschiedlichen Einsatzmglichkeiten vor: vom Restaurant-Finder, ber eine App, die sich merkt, wo Sie Ihr Auto geparkt haben, bis hin zu einer
digitalen GPS-gesttzten Schnitzeljagd mit Ihren Freunden. Da geht einiges!
260
Index
Index
.apk-Datei........................................................... 399, 413
.getCurrentPosition() ............................................. 227
.htaccess ............................................................ 292, 309
.ipa-Datei ...........................................................398, 409
:active ............................................................................ 113
:first-child ..................................................................... 49
:last-child ...................................................................... 49
@font-face....................................................................171
@font-face Generator............................................. 172
@media ........................................................................133
@-webkit-keyframes.............................................. 201
3D-Animationen ...................................................... 382
3G-Verbindung ........................................................... 67
4-Finger-Swipe ...........................................................110
5-Finger-Pinch............................................................110
A
Abbuchungsvorgang.................................................25
Abzeichen .................................................................... 121
Achsenbewegungen ............................................... 263
Achsenwerte ..............................................................268
acronym .........................................................................41
ActiveX-Objekt.................................................180, 190
Adaptionsrate ...................................................... 36, 69
Add Key........................................................................ 395
Add2Home ..................................................................417
addClass......................................................................... 94
Administratorenrechte ............................................ 31
Adobe ........................................................................... 383
Adobe Flash...........................................................36, 171
Adobe InDesign........................................................160
Adobe Photoshop ............................................. 45, 220
Adobe Typekit.................................................... 173, 177
Adressleiste................................................................ 253
Advanced Audio Codec High Efficiency ..........193
Advanced Audio Codec Low Complexity........193
Advanced Audio Coding (AAC) ..........................190
AJAX ................................................................................ 87
Konzept..................................................................... 84
Versand ................................................................... 343
Ajax Spinner .............................................................. 120
AJAX-Request ............................................................ 376
Aktien-App ..................................................................128
Aktiengraph ................................................................128
alert ...............................................................................268
All in one ..................................................................... 107
Alleinstellungsmerkmal Siehe USP
Android
Besitzer....................................................................... 31
Gerte ........................................................................64
Marketplace .......................................................... 418
SDK .......................................................................... 390
Version ......................................................................30
Android Developer...................................................412
Android Developer Console .................................412
Android Market ........................................................396
Android Marketplace ............................................... 26
Android-Fans..............................................................135
Animationen ............................................................. 196
Animationsdurchlauf ............................................ 196
Animationsrichtung.............................................. 202
Anschnitt .................................................................... 163
Anwendungsbereiche.............................................135
Apache.............................................................................14
Apache Cordova ........................................................381
Apache Foundation................................................. 383
API..................................................................................239
API_KEY .......................................................................363
API-Schlssel .............................................................362
App Store........................................................................25
Zulassungsrichtlinien....................................... 408
App-Datei ................................................ 408, 409, 414
append ........................................................................... 95
appendTo .....................................................................331
App-Framework........................................................401
App-Icons ..................................................................... 80
App-ID ..........................................................................394
Apple Developer Account .................................... 391
Apple Universal ........................................................ 186
AppleID .......................................................................409
apple-touch-icon-precomposed ...........................81
Application Loader................................................. 408
Application-Objekt.................................................. 352
App-Schemata............................................................ 114
Array ........................................... 354, 355, 367, 373, 377
aside .............................................................................. 130
Aside Magazine................................................. 159, 417
Asynchron ................................................................. 240
Asynchronous JavaScript And XML ................... 87
attr ...................................................................................94
431
Index
Audio .................................................................. 190, 402

Audio Interchange File Format ...........................193
Audioformate.............................................................193
Auflsungen ............................................................... 127
Automotive Agenda .............................................. 403
autoplay........................................................................182
Autoplay-Attribut.....................................................183
Browserentwicklung ................................................ 36
Browsermarkt .............................................................30
Browserplugin............................................................. 36
Browserspiele ............................................................ 219
Bundle ID ................................................................... 405
Bundle Identifier......................................................394
button.............................................................................111
background-size.................................................56, 273
Badges ........................................................................... 121
Baker Framework..................................401, 402, 403
Barcode-Scanner .....................................................400
Base64-Format.......................................................... 107
Baseline Profil ........................................................... 184
Bedienanweisungen ............................................... 144
Bedienelemente ................................................. 22, 139
Bedienmuster.....................................................118, 139
Bedienoberflche..............................................139, 311
Bedienschema...........................................................140
before ............................................................................. 95
beginPath.....................................................................213
Benutzer ....................................................................... 137
Benutzerablauf ..........................................................139
Benutzeroberflche ..................................28, 135, 144
Benutzerposition..................................................... 227
Benutzerschemata ..................................................109
Benutzerworkflow....................................................139
Berners-Lee, Tim .........................................................35
Beschleunigungskurve......................................... 308
Betriebsbedingungen ............................................. 135
Bewegung ................................................................... 262
Bewegungsachsen ...................................................264
Bewegungssensor.........................200, 261, 381, 388
Bezahlprozess........................................................ 25, 27
bezierCurveTo............................................................213
Bzierkurve .................................................................213
Bildschirmauflsungen .......................................... 63
Bildschirmtastatur .................................................... 65
Bit-Raten...................................................................... 184
Blackberry.....................................................................30
Blindtextgenerator .................................................. 155
blur ...................................................................................91
Bookmark ................................................................... 416
Bookmark-Funktion ................................................375
Bookmarklet .............................................................. 293
border-radius .............................................................. 54
box-shadow ........................................................... 55, 58
CACHE ....................................................... 289, 290, 291

Cache-Gre ..............................................................289
Cache-Manifest.........................................................289
Datei.........................................................................289
Caching-Mechanismus..........................................289
Calhoun, David ........................................................... 76
Callback-Funktion ......................... 227, 228, 241, 359
Camera+ ........................................................................ 26
Canvas ......................................................................... 208
Canvas-Bibliotheken ............................................. 220
Carousel..................... 116, 117, 128, 350, 375, 376, 377
Carousel-View ............................................................375
center...............................................................................41
Certificates Siehe Zertifikat
Cesar Animation Tool ............................................ 199
change .............................................................................91
Checkbox ......................................................................49
Claim............................................................................. 136
Clear ...............................................................................122
click...................................................................................91
Codebasis ...................................................................... 28
Codecs ........................................................................... 181
Codiqa .......................................................................... 347
Codiqa Interface-Builder.......................................349
Comic Sans ................................................................. 170
Context ....................................................................... 208
controls.........................................................................182
Creative-Commons................................................. 316
CSS ................................................................................... 42
Befehle ....................................................................... 43
Rastersysteme .......................................................147
CSS Reset .....................................................................298
CSS3 ................................................................................. 42
Effekte .........................................................................53
CSS3-Definitionen ..................................................... 63
CSS-Animations........................................................ 196
CSS-Transitions......................................................... 196
Cufon ............................................................................. 171
432
Index
D
Darstellungstechnologien .....................................30
data-add-back-btn ................................................... 334
data-back-btn-text .................................................. 334
data-icon ......................................................................321
datalist ............................................................................41
data-position .............................................................320
data-role ....................................................................... 315
data-tap-toggle .........................................................320
data-theme.................................................................320
data-transition...........................................................321
Date.now() ..................................................................303
Dateisystem ................................................................. 67
Datenbank .................................................................. 328
dblclick............................................................................91
Default Layout ........................................................... 155
Definitionssprache ....................................................35
Design Made in Germany .....................................178
Developer
Account....................................................................391
Schlssel ................................................................. 392
Zertifikat..................................................................391
Devices......................................................................... 393
Diagrammachsen .................................................... 367
Diagramme ....................220, 350, 361, 365, 366, 371
Dia-Shows .....................................................................117
DIN 69901 .................................................................... 135
Document Object Model ........................................ 86
DOM-Baum .................................................................. 86
DOM-Objekte .............................................................221
Don't Listen, observe.............................................. 144
DoubleTouch.............................................................109
Drag & Drop................................................................ 118
Droid Sans ...................................................................357
Dropdown-Feld..........................................................341
E
ease-in .......................................................................... 199
ease-in-out.................................................................. 199
ease-out ....................................................................... 199
eBooks...........................................................................158
EDGE ............................................................................... 67
Eingabefelder .............................................................139
Einkaufszettel............................................................296
Einsatzort.....................................................................134
Ein-Tasten-Telefon.................................................... 28
Elevator Pitch .............................................................136
Elternelement ............................................................. 47
E-Mail.............................................................................341
E-Mail-Header ........................................................... 345
Embed-Code............................................................... 186
Endlosschleife .......................................................... 202
Entfernungsberechnung ......................................244
Entwickler-Account ....................................... 404, 411
Entwurfssoftware ....................................................140
Entwurfs-WebApp ...................................................140
Erdradius.....................................................................244
Erfolgsmeldung ........................................................346
Erwartungshaltung .................................. 114, 121, 134
Evans, Caleb ............................................................... 222
EventHandler ...............................................................91
EventListener .......................217, 303, 304, 308, 369
Ext JS .............................................................................350
Extra High Density....................................................64
Extra Large Screen.....................................................64
F
Facebook ...................................................................... 118
Facebook-Apps.......................................................... 425
fadeIn..............................................................................96
fadeOut ..........................................................................96
fadeToggle ....................................................................96
Fahrinfo-App ..............................................................134
Fahrstuhlfahrt........................................................... 136
FALLBACK ...................................................................289
Farben............................................................................119
Farbenblindheit.........................................................119
Farbtransparenzen................................................... 211
Feed ...............................................................................269
Fehlberhrungen.................................................... 308
Fernbedienung ..........................................................122
FF Unit ...........................................................................178
figcaption......................................................................40
figure...............................................................................40
FileZilla............................................................................14
fill ....................................................................................213
fillRect ......................................................................... 209
fillText ...........................................................................215
Financial Times................................27, 289, 290, 383
Fingerbewegungen ..................................................217
Fingerkuppe................................................................110
first-child.......................................................................49
Flash -> s. Adobe Flash
Flash of Unstyled Content.................................... 105
Flashplugin.................................................................180
Flash-Widget ..............................................................180
Flavius Josephus....................................................... 201
433
Index
Flick ................................................................................110
Flickr .........................56, 155, 260, 261, 265, 269, 270,
274, 275, 276, 384
Account...................................................................270
Feed ..........................................................................269
Fotostream ............................................................269
ID ...............................................................................270
Flickr-API........................................................... 258, 260
Flugmodus ................................................................. 287
focus.................................................................................91
font ...................................................................................41
Font-Service ................................................................ 173
font-size......................................................................... 45
FontSquirrel................................................................ 173
font-style...................................................................... 177
font-weight.................................................................. 177
footer .............................................................................. 47
Formelemente .......................................................... 342
Formular ......................................................................312
Formulardaten.......................................................... 342
Formvalidierung ...................................................... 343
Frster-App .................................................................123
Fotogalerie-App........................................................320
FOUC............................................................................. 105
foursquare ...................................................................257
foursquare-API...........................................................257
Frage-Antwort-App ..................................................139
frame ...............................................................................41
Frame-Raten .............................................................. 184
Framework .................................................................. 311
Franchise..................................................................... 166
FTP-Server......................................................................14
Fullscreen-Option.................................................... 354
Funkloch...................................................................... 287
Funktionsbeschreibung......................................... 135
Fr Web und Gerte speichern ................. 102, 103
Fuzeile ........................................................................319
Gertehardware.......................................................... 28
Geschlossene Systeme............................................. 26
Geschwindigkeitszuwachs...................................289
Gestaltungsprinzipien...........................................109
Gesten ............................................................ 28, 110, 121
getContext................................................................. 209
getJSON ..................................................................98, 331
Git................................................................................... 397
Git Repository ........................................................... 397
Gittermodel Siehe Wireframes
Global Positioning System .................................. 225
Google Analytics ...................................................... 383
Google Checkout.......................................................413
Google Loader ........................................................... 337
Google Mail .............................................................21, 22
Google Maps .............................................................. 232
Google Maps JavaScript API........................ 238, 247
Google Music............................................................... 26
Google Places............................................................. 258
Google Play................................................................... 26
Google Web Font Directory ..................................173
Google Web Fonts.....................................................173
google.maps.Marker............................................... 242
Google-Places-API.................................................... 259
GPS................................................................................. 225
Abfragen .................................................................229
Empfnger ............................................................. 225
Koordinaten ..........................................................339
Graphen...................................................................... 220
Gravitation .................................................................262
Greenwich...................................................................226
Grid-Elemente........................................................... 163
Grundlinienraster ....................................................152
GUI-Template.............................................................145
Gummibandeffekt..................................................... 74
Gutenberg................................................................... 169
Gutters ..........................................................................153
Game-Engines............................................................219
GDlib.............................................................................220
Gebhr ......................................................................... 383
Geodaten..................................................................... 256
Geofunktionen ........................................................ 260
Geolocation................................................................246
Geolocation-App...................................................... 253
Geoposition ............................................................... 225
Georgia......................................................................... 170
H.264 ............................................................................. 184

Halbmobil...................................................122, 126, 134
Hallo Welt ............................................................ 84, 352
Handskizze .................................................................. 141
Handysendemasten ............................................... 225
Haptik............................................................................ 112
Hardwarebeschleunigt .......................................... 196
Hardwarefunktionen ............................................400
Hardwarekomponenten ....................................... 383
434
Index
Hauptpfad.................................................................. 290
Header.......................................................................... 130
header............................................................................. 47
Helvetica ......................................................................357
Hewlett-Packard.........................................................30
HEX............................................................................45, 56
Hey Ya ...........................................................................261
hide..................................................................................96
High Density................................................................ 64
Hilfslinien....................................................................147
Hintergrundbild................................................... 42, 57
Hintergrundfarbe ...................................................... 42
Hintergrundmusik.......................................... 123, 193
Hintergrundmuster................................................. 317
Hintergrundprozess ................................................. 24
Hirnstrme .................................................................142
Home-Bildschirm ...................................................... 79
Home-Button .............................................................375
Hrsaal..........................................................................123
hover.........................................................................66, 91
HTC.................................................................................. 29
htdocs.............................................................................. 12
HTML5 .............................................................................35
Formularfeldtypen ............................................... 76
Showcase................................................................... 31
HTML5 Developer Plattform............................... 425
HTML5-Apps ................................................................. 31
HTML-MP3-Player ....................................................192
Hybridkarte................................................................ 234
Hyperlink .......................................................................35
Hypertext.......................................................................35
Hypertext Markup Language.................................35
I
Icon................................................................................ 322
Icon Sweets.................................................................249
iconMask..................................................................... 358
id....................................................................................... 46
IDC ................................................................................... 28
iframe ........................................................................... 186
ImageMagick .............................................................220
ImageOptim............................................................... 102
Infobox .........................................................................133
Infokasten................................................................... 130
Inhaltsverzeichnis....................................................375
initial-scale ................................................................... 79
innerHeight ................................................................. 86
innerWidth................................................................... 86
input ...............................................................................40
Instagram...................................................................... 23
Instant Messenger................................................... 193
Integer .......................................................................... 365
Interaktive Google-Karte ..................................... 240
Interaktivitt ............................................................... 83
Interface-Builder ...................................................... 347
Interface-Elemente .................................................349
Interface-Framework............................................... 311
Interfaces .....................................................110, 114, 119
Internet Explorer .......................................................30
Internettraffic .............................................................30
Internetverbindung................................................ 287
Intros .............................................................................123
Investor........................................................................ 136
iOS Provisiong Portal .............................................393
iOS Provisioning Portal......................................... 391
ios-shake...................................................................... 267
iOS-Style ....................................................................... 311
IP-Adresse ...................................................................... 15
iPhone Mockup ........................................................140
iTunes Connect................... 404, 408, 409, 410, 411
App........................................................................... 404
J
Java ................................................................................350
JavaScript ...................................................................... 84
Frameworks............................................................. 88
Konsole......................................................................89
Syntax........................................................................ 84
JavaScript-Interaktion..............................................111
jCanvas......................................................................... 222
JPEG ............................................................................... 102
jPlayer............................................................................191
jqPlot............................................................................ 220
jQTouch .......................................................................350
jQuery............................................................................. 88
Objekt ....................................................................... 90
Plugins.....................................................................268
jQuery Mobile ............................................................ 311
JSON ...........................................241, 269, 270, 271, 328
API.............................................................................362
Aufruf........................................................................271
Callbacks ................................................................ 365
Feed...........................................................................362
Feeds.........................................................................363
Format........................................................... 240, 363
435
Index
Objekt .......................................................................241
Validator .................................................................241
JSON-Datei.................................................................. 243
JSON-Format................................................................ 98
JSONLint .......................................................................241
JSON-Objekt ...............................................................294
JSONP-Request.......................................................... 365
JSONStore....................................................................366
K
Kamera................................................................ 382, 385
Kameraaufruf............................................................386
Karte....................................................................204, 230
Ausschnitt ..................................................... 233, 238
dynamische ..................................................232, 240
interaktive ............................................................. 238
Kartenmaterial .....................................................231
statische.................................................................. 232
Typ ............................................................................ 239
Karussell........................................................................117
keydown.........................................................................91
Keyframe.................................................. 196, 201, 306
keygen.............................................................................41
keypress..........................................................................91
keyup ...............................................................................91
Kill-Switch......................................................................27
Klassen .................................................................... 46, 49
verschachtelte ........................................................ 47
Klassendefinitionen ................................................. 47
Klassennamen ............................................................ 48
Kollektion ....................................................................174
Kolumnentitel ...........................................................167
Kommandozeilentool .............................................. 15
Kommunikationskonzept ....................................136
Kompass...................................................................... 229
Komplex-Symbiotisch............................................ 118
Konkurrenz .................................................................136
Konstruktor ...............................................................366
Kontaktformular..................................................... 340
Kontaktliste .................................................................117
Kontaktseite ...............................................................312
Kontraste .....................................................................123
Konverter.................................................................... 186
Konzeption........................................................ 109, 134
Kopfzeile ..................................................................... 374
Korpi, Joni ................................................................... 149
436
L
Ladebalken .................................................................. 121
Ladebildschirm......................................................... 253
Ladekreis ..................................................................... 120
Ladezeiten....................................................................174
Laker Compendium ................................................401
Laker Starter Pack ................................................... 402
Landscape-Modus......................................................64
Large Screen.................................................................64
Lastenheft ....................................................................135
Latitude........................................................................226
Launch-Funktion .................................... 352, 353, 374
Lautstrketasten ........................................................ 26
Leckerli One ................................................................317
Lehni, Jrg....................................................................221
Leonello, Chris ......................................................... 220
LESS CSS ....................................................................... 149
Less CSS Framework ............................................... 149
Lichtverhltnisse ......................................................123
Lifestyle-Magazin .....................................................125
Lifestyle-Parameter..................................................137
linear............................................................................. 199
lineTo.............................................................................213
lipsum ...........................................................................197
Liste .......................................................................325, 333
Listeneintrge ........................................................... 139
Listenelemente..........................................................321
Listenrand.................................................................... 121
listview......................................................................... 327
Lizenz.............................................................................178
load.................................................................................. 93
localStorage.......................... 294, 295, 303, 304, 305
Lokale Suchmaschine............................................. 225
Lokaler Speicher .......................................................294
Longitude....................................................................226
LongTouch..................................................................109
Low Density .................................................................64
LTE.................................................................................... 67
M
Magazin ........................................................................125
Magazin-App ............................................................... 26
MagazineGrid.............................................................158
Magazin-Frameworks .............................................. 26
Magazinlayout .......................................................... 166
Magazin-Mashup ..................................................... 372
Magic Land .................................................................. 118
Index
Magnetresonanztomograf....................................143
mail ............................................................................... 345
manifestR.................................................................... 293
mark................................................................................40
Marker.......................................................................... 242
Markierungsstile...................................................... 236
Marktforschung ........................................................ 137
Marktumfeld ......................................................135, 136
Mashup ........................................................................ 372
Master-Detail...............................................................117
maximum-scale ......................................................... 79
Media Queries............................................................ 60
Medium Density ........................................................ 64
Mehrspaltigkeit .......................................................... 58
Meta-Tags...................................................................... 38
meter ...............................................................................41
Microblogging-Service .................................... 31, 258
Microsoft Visio .........................................................140
Midi-Kompositionen .............................................190
Mikrofon .............................................................. 28, 382
Miro Video Converter ............................................ 184
Mitbewerber-Apps ...................................................136
Mobilbereich ................................................................35
Mobile Layout .................................................... 153, 157
Mobile Safari....................................................31, 69, 73
Mobile WebKit ...........................................................183
Mobilgert ...................................................................122
Model-View-Controller .........................................350
Module.........................................................................401
Motorola ....................................................................... 29
mousedown ..................................................................91
mousemove..................................................................91
MouseOver..................................................................110
mouseup ........................................................................91
MOV .............................................................................. 184
moveTo.........................................................................213
MP3................................................................................190
MPEG-4-Standard .................................................... 184
Multimedia-Anwendungen.................................180
Multimedia-Element..............................................190
Muster........................................................................... 317
MySQL ....................................................................14, 294
N
Native Anwendungen.............................................381
Native Apps................................................................... 21
Nachteile ................................................................ 382
Vorteile.................................................................... 382
navbar ......................................................................... 320

Navigationselemente..............................................321
Navigationsgert...................................................... 225
Navigationsleiste ........................................... 250, 320
Navigationssystem ................................................. 225
navigator.geolocation............................................ 227
Netbook ........................................................................122
Netscape ........................................................................30
NETWORK ...................................................................289
Newsticker ................................................................... 121
Nirvana ........................................................................ 287
Nokia............................................................................. 391
Nokia Communicator .............................................. 28
Normal Screen ............................................................64
Noticia Text.................................................................318
Notizen .........................................................................122
Nutzer-Flow.................................................................138
Nutzerforen................................................................388
Nutzertest ....................................................................142
Nutzerverhalten....................................................... 383
Nutzerzentriertes Design ......................................137
O
Objective C........................................................ 382, 402
off ..................................................................................... 97
Offline..........................................................123, 287, 296
Offline-Apps............................................................... 287
Offline-Datenbank ..................................................294
Offline-Modus........................................................... 287
OGG Audio .................................................................190
OGG Theora................................................................ 184
OmniGraffle...............................................................140
on ..................................................................................... 97
ondevicemotion..............................................262, 263
opacity............................................................................ 58
Open Source.................................................................. 31
Open Type Format....................................................172
OpenAppMarket...................................................... 420
Open-Source-Framework ..................................... 383
Opera ..............................................................................30
Orientierung.............................................................. 261
outer margins.............................................................153
Outkast......................................................................... 261
output..............................................................................41
Overlays....................................................................... 102
437
Index
P
p.12 ................................................................................. 393
Pagina............................................................................167
Palm ................................................................................30
panel ............................................................................. 354
Paper.js..........................................................................221
Papierprototypen ..................................................... 141
Performancevorteil .................................................. 24
Pflichtenheft............................................................... 135
PhoneGap ....................................................................381
Plugins....................................................................400
PhoneGap Build ...................................................... 390
PHP............................................. 341, 342, 343, 344, 345
Pinch..............................................................................110
Pixelraster ...................................................................221
Pixelverdopplung.....................................................216
placeholder-Attribut ..............................................298
Plattformen..................................................................30
Android .....................................................................30
iOS...............................................................................30
Plattformunabhngig ...............................................22
Playbook........................................................................30
Play-Pause-Button................................................... 188
Plugin ...........................................................................268
PNG-24 ......................................................................... 102
PNG-8............................................................................ 102
PngOptimizer................................................... 102, 103
Polaroid ........................................................................261
Portrait-Modus ........................................................... 64
Position.................................................................. 42, 123
position.coords.accuracy...................................... 229
position.coords.altitude........................................ 229
position.coords.altitudeAccuracy..................... 229
position.coords.heading....................................... 229
position.coords.speed............................................ 229
position:fixed...............................................................73
Positionierung ...........................................................136
Positionsabfrage ...................................................... 228
Positionsbestimmung........................................... 225
Positionsdaten...........................................................337
Positionssensor........................................................ 382
poster.............................................................................183
Post-Its .......................................................................... 141
Prfixe .............................................................................53
prepend ......................................................................... 95
preserve-3d................................................................ 206
Privater Schlssel .................................................... 392
Profil ..............................................................................391
Programmiersprachen .......................................... 382
438
Programmierung ......................................................134
progress ..........................................................................41
Prototypen ..................................................................143
Provisioning ..............................................................394
Provisioning Portal ................................................ 405
Provisioning Profil .................................................. 395
Pseudomobil...................................................... 122, 134
Public APIs....................................................................94
Publikation................................................................. 126
Puckey, Jonathan ......................................................221
Pupillenbewegungen ..............................................142
Pythagoras..................................................................244
Q
Querverweise .............................................................375
Qype .............................................................................. 257
Qype-API ..................................................................... 257
R
Radio-App ................................................................... 193
Radiobutton.................................................................49
Raster............................................................................ 148
Rastersystem ..............................................................147
Reason Why ............................................................... 136
Rechner........................................................................ 129
wissenschaftlicher .............................................. 129
Red Bull .......................................................................... 32
Registerreiter.............................................................. 114
Regularien.............................................................27, 382
Reliefkarte................................................................... 234
remove...........................................................................96
removeClass.................................................................94
Reset.............................................................................. 150
Retina-Displays..........................................................101
RGB .................................................................................. 45
RGBA .........................................................................56, 58
Rollball ........................................................................... 29
root ............................................................................... 290
Rotate ............................................................................110
rotate .............................................................................214
rotateY......................................................................... 206
Rot-Grn-Schwche.................................................119
Route............................................................................. 338
Routenplanung............................................... 336, 340
Rundungsfehler........................................................ 367
Index
S
Samsung........................................................................ 29
Sandbox-Model .......................................................... 84
Satelliten ..................................................................... 225
Satellitenkarte........................................................... 234
Schablonen.................................................................. 141
-Methode ................................................................. 141
Schadsoftware............................................................. 26
Schaltflche........................................................ 110, 139
Schlagschatten........................................................... 215
Schlssel......................... 241, 294, 392, 393, 395, 396
Schlsselbilder.......................................................... 201
Schlsselbund........................................................... 392
Verwaltung............................................................ 392
Schriftart ....................................................................... 42
Schriftdarstellung.................................................... 170
Schriften..............................................................169, 178
Schriftgestaltung ..................................................... 169
Schriftgre ................................................................. 42
Schriftschnitte ...........................................................174
Schriftstile ...................................................................174
Schttelgeste ............................................................. 267
Scroll ..............................................................................110
Scrollverhalten .....................................................67, 74
Seitenwechsel............................................................. 315
Selection Colours...................................................... 152
Selektionsfarben ....................................................... 152
Selektoren.................................................................... 90
Sencha Touch ............................................................350
Syntax....................................................................... 351
Sencha Touch Charts...............................................361
Serien............................................................................ 367
Seriennummer ......................................................... 393
Serververbindungen .............................................. 107
sessionStorage .......................................................... 295
setTimeout ................................................................. 278
Shake-Event .............................................................. 280
Sharky............................................................................. 34
Shazam............................................................................23
Shoji ................................................................................117
Ansicht ......................................................................117
show................................................................................96
Sicherheitsbedenken.............................................. 229
sIFR ..................................................................................171
Signale........................................................................... 119
Signing ......................................................................... 395
Silbentrennung .......................................................... 62
Situation.......................................................................122
Situationsbeschreibung.........................................138
Skin...............................................................................300
Skriptsprache..............................................................341
SKU-Nummer........................................................... 405
slideDown.....................................................................96
Slider .............................................................................. 311
Slideshow ................................................................... 402
slideToggle.................................................................... 92
slideUp ...........................................................................96
Small Screen.................................................................64
Smaller ......................................................................... 105
Smartcover ..................................................................127
Social-Network-Anwendungen........................... 118
Soft-Hyphen................................................................. 62
Softwareentwicklung ..............................................135
Softwareschema......................................................... 22
Sonnenlicht.................................................................123
Sounddateien ............................................................190
Soundeffekte ............................................................. 193
Spalten .......................................................................... 117
Spiele..............................................................118, 127, 219
Splash Screen............................................................... 82
Spotlight-Suche .......................................................409
Stadtfhrer ..................................................................134
Standardlayout ..........................................................153
Standardstile...............................................................357
Startbildschirm..........................................................116
Static Maps API .........................................................236
Statusleiste .................................................................. 80
Stern-App ...................................................................... 26
Store-Betreiber............................................................ 26
Storyboard...................................................................137
Storyboard-Methode...............................................138
Straenkarte .............................................................. 234
String ............................................................................ 365
strip_tags .................................................................... 345
stroke.............................................................................213
Stylesheet...................................................................... 42
submit .............................................................................91
Subtle Patterns....................................................70, 317
Suchmaschinen..........................................................40
Surfer-App ...................................................................123
SVG ............................................................................... 208
Swipe..............................................................................110
Symbian...................................................................... 390
Symbolleiste ............................................247, 248, 249
Systemschriften ....................................................... 170
439
Index
T
Tablet..............................................................................30
Android .....................................................................30
Apps...........................................................................126
Bildschirm ............................................................... 135
iPad.............................................................................30
Magazine ................................................................158
Markt .........................................................................30
Playbook...................................................................30
Tablet Layout.............................................................. 153
Tablet-Magazin.......................................................... 371
Tabs ...............................................................114, 123, 350
Tageslicht.....................................................................123
Tags ................................................................................. 38
Teehan+Lax.................................................................145
Testablauf ....................................................................143
Testlabor.......................................................................143
Testperson.................................................................. 144
Testsituation...............................................................143
Texteingabefeld ......................................................... 49
Texturen.......................................................................275
The Noun Project ..................................................... 322
Themeroller ............................................................... 347
Themes ........................................................................320
time .................................................................................40
Times New Roman .................................................. 170
Tippen ..........................................................................109
Titelleiste..............................................................113, 130
Titelzeile .......................................................................133
Todo-App .................................................................... 287
Todo-Liste ....................................... 287, 296, 297, 304
toggle.............................................................................. 92
toggleClass.................................................................... 94
Ton..................................................................................195
Toolbar...........................................................................115
toolbar..................................................................354, 373
Tooltip...........................................................................417
Tooltips........................................................ 66, 110, 220
Touch............................................................................109
Touch Charts ........................................... 350, 366, 371
Touch-Gerte.................................................... 109, 134
Touch-Geste..............................................................200
touchIcon.................................................................... 418
Touch-Oberflche....................................................109
Touchscreen ................................................................ 29
touchstart .................................................................. 308
Transformation ........................................................205
Triangulieren............................................................. 225
440
Trojaner ..........................................................................27
Tutorial-Ansicht ........................................................ 117
Tweets........................................................................... 258
Twitter....................................................31, 118, 193, 258
Twitter Pitch .............................................................. 136
Twitter-API ................................................................. 258
Typografie................................................................... 168
U
U-Bahn ..........................................................................123
bertragungsgeschwindigkeit............................101
UDID .............................................................................393
UglifyJS.........................................................................104
UI Stencils .................................................................... 141
Umfragen.....................................................................137
Umgebung...................................................................123
Unique Selling Proposition Siehe USP
Updatezyklus............................................................. 382
Usability-Labore........................................................142
Userflow ...................................................................... 139
user-scalable ................................................................ 79
USP................................................................................. 136
UTF-8....................................................................... 44, 172
V
var ....................................................................................86
Vektorformate ......................................................... 208
Vektorgrafiken...........................................................221
Verbindungsgeschwindigkeit..............................123
Verdana........................................................................ 170
Verlaufsgenerator...................................................... 78
Versionen.....................................................................135
Verwendungsort .......................................................135
video .............................................................................. 181
Viewport.........................................78, 82, 132, 375, 377
Vimeo ........................................................................... 186
Viren ............................................................................... 26
Vollbild......................................................................... 130
Vollbildmodus ........................................................... 80
Vollbildvideos ............................................................132
Vollmobil .....................................................................122
Vorberlegungen......................................................134
Index
W3C-Konsortium ....................................................... 36
Wave ..............................................................................193
Wave-Dateien............................................................190
WebApp-Store ........................................................... 418
Webfonts..................................................................... 168
WebGL ............................................................................ 68
WebKit........................................................31, 35, 53, 196
-webkit-animation .................................................. 201
-webkit-animation-delay......................................203
-webkit-animation-direction ..............................202
-webkit-animation-duration...............................202
-webkit-animation-fill-mode....................203, 308
-webkit-animation-iteration-count .................202
-webkit-animation-name .....................................202
-webkit-animation-timing-function................203
-webkit-appearance ..................................................111
-webkit-backface-visibility.................................. 206
-webkit-linear-gradient ............................................77
-webkit-overflow-scrolling .................................... 74
-webkit-tap-highlight-color .................................. 113
-webkit-transform .......................................... 203, 281
-webkit-transform-style....................................... 206
-webkit-transition ....................................................197
Webmailer .....................................................................22
webOS.................................................................... 30, 391
Webschriften ..............................................................178
Webserver...................................................................... 12
Webspace ....................................................................... 12
Werkzeugleiste ...........................................................115
Werteinhalt ................................................................294
Wertepaar .......................................................... 241, 294
Werteschlssel.......................................................... 242
Wetter-API .................................................................. 363
Wetter-App........................................................ 350, 361
Wetterdaten............................................................... 362
Wetterdiagramm ......................................................361
Wetterstation .............................................................361
Where to Eat...............................................................230
Wide Mobile Layout.................................................154
Wildcards .....................................................................291
window ..........................................................................86
Windows Phone .................11, 33, 141, 382, 383, 390
Wireframe
Model .......................................................................140
Wireframes..................................................................139
Workflow......................................................................139
World Weather Online........................................... 362
X-Achse ........................................................................263
XAMPP ............................................................................ 12
Control Panel ........................................................... 13
Installation ............................................................... 12
Netzwerkkonfiguration .......................................14
Server .........................................................................20
Xcode ........................................................................... 408
XMLHttpRequest ....................................................... 84
xtype ............................................................................. 354
Y
Y-Achse ........................................................................263
Yanone Kaffeesatz ....................................................172
YouTube ...................................................................... 186
Z
Z-Achse.........................................................................263
Z-Beschleunigung....................................................263
Zeewe............................................................................ 418
Zeichen-App.............................................................. 208
Zeichensatz .................................................................. 45
Zeichnen.............................................................208, 216
Zeitschriftenabo ......................................................... 26
ZEN Player................................................................... 192
Zepto.js........................................................................ 100
Zertifikat...................................................................... 391
Developer ..............................................391, 392, 395
Zielgert........................................................................135
Zielgruppe....................................................................134
Zielgruppenanalyse .................................................137
Zielgruppenvertreter...............................................137
z-index ........................................................................ 206
Zoombutton ..............................................................190
Zoomstufe ..................................................................239
ZooTool...........................................................................33
Zufallsfunktion......................................................... 272
Zufallszahl....................................................................281
Zulassungsrichtlinien
App Store ............................................................... 408
Zulassungsverfahren...............................................415
Zum Home-Bildschirm........................................... 80
Zurck-Button........................................................... 334
Zwitschern.................................................................. 193
441

Lesebprobe Galileocomputing Apps Mit Html5 Und Css3

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Lesebprobe Galileocomputing Apps Mit Html5 Und Css3

Hochgeladen von

Copyright:

Verfügbare Formate

Florian Franke, Johannes Ippen

Apps mit HTML5 und CSS3

Auf einen Blick

Auf einen Blick

HTML5 in der mobilen Webentwickung ........................................................

Konzeption und Gestaltungsprinzipien ......................................................... 109

HTML5 als Designwerkzeug ............................................................................... 147

Positionsbestimmung .......................................................................................... 225

Auslesen des Bewegungssensors mit JavaScript ........................................ 261

WebApps mit Frameworks entwickeln .......................................................... 311

Native Anwendungen und App Stores ........................................................... 381

Native Apps vs. WebApps ......................................................................................

WebApps allgemein ...................................................................................

Showcase das knnen HTML5-Apps .................................................................

HTML5 in der mobilen Webentwickung

HTML5 Definition und aktueller Stand ............................................................

Warum ist es sinnvoll, auf Touch-Gerten zu entwickeln? ............................

Was HTML5 bietet ...................................................................................................

Der Aufbau einer einfachen HTML5-Seite ...............................................

CSS3 Grundlagen und Neuerungen ..................................................................

Was ist eigentlich CSS? ..............................................................................

Desktop vs. Mobile die Unterschiede ...............................................................

HTML als Standard .....................................................................................

Mglichkeiten und Limitationen von HTML5 auf

Die neuen HTML- und CSS-Features in iOS5 ...........................................

Entwickeln mit JavaScript-Frameworks jQuery & Co. ..................................

Die JavaScript-Syntax .................................................................................

Die Geschwindigkeit einer WebApp verbessern ............................................... 101

Kompression ............................................................................................... 101

Konzeption und Gestaltungsprinzipien

Touch-typisches Design in der Praxis .................................................................. 109

Der feine Unterschied zwischen Berhren und Klicken .........................

Eine App konzipieren .............................................................................................. 134

Vorberlegungen was genau soll meine WebApp knnen? .............. 134

HTML5 als Designwerkzeug

Ordnung halten mit CSS-Rastersystemen .......................................................... 147

Einsatz des Less CSS Frameworks ............................................................. 149

Mal was anderes als Arial Webfonts ................................................................ 168

Schriften im Web ........................................................................................

Hinzufgen von Audio und Video ........................................................................ 180

Video ............................................................................................................ 180

Animationen mit CSS .............................................................................................. 196

Vorsicht! Schriften und deren Lizenzen ................................................... 178

CSS-Transitions und CSS-Animations ......................................................

Zeichnen mit JavaScript das canvas-Element ................................................ 208

Erster Schritt: Canvas und Context registrieren .....................................

Die Positionsbestimmung mit HTML5 ................................................................. 226

Weitere Eigenschaften der Positionsbestimmung ................................. 229

Die Where to Eat-App ........................................................................................ 230

Position auf einer statischen Karte eintragen ........................................ 231

Den Abstand zwischen zwei Koordinaten berechnen ...........................

More Fun mit Geodaten ......................................................................................... 256

Auslesen des Bewegungssensors mit JavaScript

Diese Daten liefert der Bewegungssensor ......................................................... 262

Vorberlegungen zur App Shake it like a Polaroid picture ........................ 264

Shake it like a Polaroid picture die Umsetzung ......................................... 266

Offline damit eine App in jedem Winkel

Die Struktur der Cache-Manifest-Datei ...................................................

localStorage, die Offline-Datenbank ................................................................... 294

Abhilfe schafft das Cache-Manifest ..................................................................... 289

Die HTML-Datei ..........................................................................................

localStorage-Funktionen ........................................................................... 294

Die Offline-Todo-App .............................................................................................. 296

Welche Anforderungen muss Ihre Todo-App erfllen? .........................