Apps mit HTML5 und CSS3 · 2018-03-26 · von jQuery Mobile ... 8.2 Die Entwicklung einer App mit...

Florian Franke, Johannes Ippen

Apps mit HTML5 und CSS3für iPad, iPhone und Android

Auf einen Blick

Auf einen Blick

1 Apps ............................................................................................................................ 21

2 HTML5 in der mobilen Webentwickung ........................................................ 35

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

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

5 Positionsbestimmung .......................................................................................... 225

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

7 Offline – damit eine App in jedem Winkel der Welt funktioniert ........ 287

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

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

Inhalt

Inhalt

Vorwort ................................................................................................................................................... 11

1 Apps 21

1.1 Native Apps vs. WebApps ...................................................................................... 21

1.1.1 WebApps allgemein ................................................................................... 22

1.1.2 Native Apps auf mobilen Geräten ............................................................ 22

1.1.3 App Store, Google Play und Co. ................................................................. 25

1.1.4 WebApps auf mobilen Geräten ................................................................ 27

1.1.5 Native App oder WebApp? ........................................................................ 28

1.2 Warum ist es sinnvoll, auf Touch-Geräten zu entwickeln? ............................ 28

1.2.1 Der Mobilsektor boomt ............................................................................. 28

1.2.2 Browsertechnik auf Mobilgeräten ........................................................... 30

1.3 Showcase – das können HTML5-Apps ................................................................. 31

2 HTML5 in der mobilen Webentwickung 35

2.1 HTML5 – Definition und aktueller Stand ............................................................ 35

2.1.1 HTML als Standard ..................................................................................... 36

2.1.2 HTML5 als Marketinginstrument ............................................................. 36

2.1.3 HTML5 als Flash-Ablösung? ....................................................................... 36

2.2 Was HTML5 bietet ................................................................................................... 37

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

2.2.2 Semantische Elemente in HTML5 ............................................................. 39

2.3 CSS3 – Grundlagen und Neuerungen .................................................................. 42

2.3.1 Was ist eigentlich CSS? .............................................................................. 42

2.3.2 Styling mit einer CSS-Datei ....................................................................... 43

2.3.3 Gestalten mit CSS – Tipps und Tricks ....................................................... 48

2.3.4 Die Neuerungen von CSS3 – welche sind heute schon einsetzbar? ..... 53

2.4 Desktop vs. Mobile – die Unterschiede ............................................................... 63

2.4.1 Möglichkeiten und Limitationen von HTML5 auf

einer mobilen Plattform ............................................................................ 68

5

Inhalt

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

2.4.3 Von der Webseite zur WebApp ................................................................. 78

2.5 Entwickeln mit JavaScript-Frameworks – jQuery & Co. .................................. 83

2.5.1 Die JavaScript-Syntax ................................................................................. 84

2.5.2 Einführung in jQuery .................................................................................. 88

2.5.3 Wichtige Funktionen in jQuery ................................................................. 94

2.5.4 Nachteile von jQuery ................................................................................. 98

2.5.5 Eine Alternative zu jQuery – Zepto.js ....................................................... 99

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

2.6.1 Kompression ............................................................................................... 101

2.6.2 Die richtige Reihenfolge ............................................................................ 105

2.6.3 So wenig Anfragen wie möglich ............................................................... 105

3 Konzeption und Gestaltungsprinzipien 109

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

3.1.1 Der feine Unterschied zwischen Berühren und Klicken ......................... 109

3.1.2 Der Anwender erwartet so einiges – Aufbau einer App ........................ 113

3.1.3 Auf der Couch oder in der Bahn ................................................................ 122

3.1.4 Alles eine Frage der Ausrichtung .............................................................. 127

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

3.2.1 Vorüberlegungen – was genau soll meine WebApp können? .............. 134

3.2.2 Gedanken und Inhalte ordnen .................................................................. 135

4 HTML5 als Designwerkzeug 147

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

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

4.1.2 Das Raster für einen speziellen Einsatz – MagazineGrid ....................... 158

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

4.2.1 Schriften im Web ........................................................................................ 169

4.2.2 Webfonts ..................................................................................................... 171

4.2.3 Font-Services ............................................................................................... 173

4.2.4 Vor- und Nachteile von Webfonts ............................................................ 177

6

Inhalt

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

4.2.6 Webschriften in Aktion .............................................................................. 178

4.3 Hinzufügen von Audio und Video ........................................................................ 180

4.3.1 Video ............................................................................................................ 180

4.3.2 Audio ............................................................................................................ 190

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

4.4.1 CSS-Transitions und CSS-Animations ...................................................... 196

4.4.2 Animieren mit -webkit-transition ............................................................ 197

4.4.3 Animieren mit -webkit-animation ........................................................... 201

4.4.4 Manipulation mit -webkit-transform ...................................................... 203

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

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

4.5.2 Grundlegende Funktionen ........................................................................ 209

4.5.3 Zeichnen per Touch-Eingabe .................................................................... 216

4.5.4 In der Praxis – Canvas oder CSS? .............................................................. 219

4.5.5 Canvas-Bibliotheken .................................................................................. 220

5 Positionsbestimmung 225

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

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

5.2 Die »Where to Eat«-App ........................................................................................ 230

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

5.2.2 Interaktive Karten mit der Google Maps JavaScript API einbinden ...... 238

5.2.3 Liste der Restaurants laden und ausgeben ............................................. 240

5.2.4 Den Abstand zwischen zwei Koordinaten berechnen ........................... 244

5.2.5 Die Programmoberfläche .......................................................................... 246

5.2.6 Eine Symbolleiste einfügen ....................................................................... 248

5.2.7 Die Restaurantliste erstellen ..................................................................... 250

5.2.8 Der letzte Schliff ......................................................................................... 253

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

5.3.1 Qype-API ...................................................................................................... 257

5.3.2 foursquare-API ............................................................................................ 257

5.3.3 Google Places .............................................................................................. 258

5.3.4 Twitter-API .................................................................................................. 258

5.3.5 Flickr-API ...................................................................................................... 260

7

Inhalt

6 Auslesen des Bewegungssensors mit JavaScript 261

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

6.2 Vorüberlegungen zur App »Shake it like a Polaroid picture« ........................ 264

6.3 »Shake it like a Polaroid picture« – die Umsetzung ......................................... 266

6.3.1 Die HTML-Datei .......................................................................................... 266

6.3.2 Laden eines Bildes aus dem Fotodienst Flickr via JSON ......................... 269

6.3.3 Die CSS-Datei .............................................................................................. 275

6.3.4 Das Laden eines Polaroids ......................................................................... 276

6.3.5 Das Sahnehäubchen – eine leichte Rotation des Polaroids ................... 281

7 Offline – damit eine App in jedem Winkel der Welt funktioniert 287

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

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

7.1.2 Ihre erste Cache-Manifest-Datei .............................................................. 290

7.1.3 Wann werden welche Daten gecacht? .................................................... 291

7.1.4 Die Cache-Manifest-Datei im Einsatz ...................................................... 292

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

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

7.2.2 Temporäre Speicherung von Daten im sessionStorage ......................... 295

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

7.3.1 Welche Anforderungen muss Ihre Todo-App erfüllen? ......................... 296

7.3.2 Der Wireframe der Todo-App .................................................................... 297

7.3.3 Funktionsbezogene Animation ................................................................ 306

7.3.4 Zusätzliche EventHandler ......................................................................... 308

7.4 Checkliste zum Überprüfen der Offline-Fähigkeit einer WebApp ................ 309

8 WebApps mit Frameworks entwickeln 311

8.1 Entwicklung einer WebApp mit jQuery Mobile ................................................ 311

8.1.1 Zum heiteren Hering – ein Fischrestaurant als WebApp ...................... 312

8.1.2 Die Startseite .............................................................................................. 313

8

Inhalt

8.1.3 Kurze Kaffeepause – ein Blick hinter die Kulissen

von jQuery Mobile ...................................................................................... 324

8.1.4 À la carte – die Menüseite ......................................................................... 325

8.1.5 Implementierung einer Google-Maps-Karte inklusive

Routenplanung ........................................................................................... 336

8.1.6 Ein Kontaktformular mithilfe von PHP .................................................... 340

8.1.7 jQuery-Mobile-Apps mit dem Themeroller und dem

Interface-Builder von Codiqa noch schneller entwickeln ...................... 347

8.2 Die Entwicklung einer App mit Sencha Touch ................................................... 350

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

8.2.2 Interaktive Diagramme mit Sencha Touch Charts –

die Wetterstation ....................................................................................... 361

8.2.3 HTML5-Tablet-Magazin mit Sencha Touch ............................................. 371

9 Native Anwendungen und App Stores 381

9.1 Eine WebApp wird zur nativen Anwendung ...................................................... 381

9.1.1 Die Vor- und Nachteile einer nativen App ............................................... 381

9.1.2 Die Erstellung einer nativen App mit PhoneGap

(Apache Cordova) ....................................................................................... 383

9.1.3 »Shake it like a Polaroid picture« – die native Version ........................... 384

9.1.4 Die kompilierten App-Dateien mithilfe von

PhoneGap Build erstellen .......................................................................... 390

9.1.5 Apple-Zertifikate und Profile ..................................................................... 391

9.1.6 Einbinden von Zertifikat und Profil in PhoneGap Build ......................... 395

9.1.7 Endlich! Das Hochladen der »Shake it like a

Polaroid picture«-Daten ............................................................................ 396

9.1.8 Die App-Datei auf dem Endgerät installieren ......................................... 398

9.1.9 Icon- und App-Namen in PhoneGap Build anpassen ............................. 399

9.1.10 Abschließende Worte zu PhoneGap und PhoneGap Build .................... 400

9.2 Eine native Magazin-App mit Laker ..................................................................... 401

9.3 Die Veröffentlichung einer App in einem App Store ........................................ 403

9.3.1 Das Veröffentlichen einer App in Apples App Store ............................... 404

9.3.2 Das Veröffentlichen einer App in Google Play ........................................ 411

9.4 Publizieren der WebApp in einem Store oder als Webseite ........................... 416

9.4.1 Auf den Vollbildmodus hinweisen ........................................................... 416

9

Inhalt

9.4.2 Die Alternative zum App Store – OpenAppMarket und Zeewe ............ 418

9.4.3 Weitere Möglichkeiten .............................................................................. 425

A Weiterführende 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

5

Kapitel 5

Positionsbestimmung

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

Navigationsgerät, ein Kompass oder eine lokale Suchmaschine. Diese Funktion ist

nicht nur nativen Apps vorbehalten, sondern kann, dank HTML5, auch im Webbrow-

ser genutzt werden.

Die Positionsbestimmung erfolgt in erster Linie über das Global Positioning System,

besser bekannt als GPS. In den 1970er Jahren vom US-Militär entwickelt, ist es heute

der Standard und die Grundlage für jedes auf dem Markt erhältliche Navigationssys-

tem. Das System besteht aus rund zwei Dutzend Satelliten, die permanent um die

Erde kreisen und ihre aktuelle Position zur Oberfläche senden. Dieses Signal kann

von einem GPS-Empfänger auf der Erde zu einer Geoposition umgerechnet werden.

Diese Bestimmung ist recht präzise, in der Regel kann die Position auf ca. 7–8 Meter

genau ermittelt werden. Voraussetzung dafür ist, dass der Empfänger gleichzeitig das

Signal von mindestens drei, üblicherweise vier Satelliten empfangen kann. Aller-

dings ist der Empfang in geschlossenen Räumen in der Regel unmöglich – das Signal

ist zu schwach, um durch Betonwände zu dringen, manchmal verhindert sogar ein

starker Schneesturm den GPS-Empfang.

In Fällen, in denen die Bestimmung per GPS nicht möglich ist, greifen Smartphones

daher auf ein stärkeres Signal zurück: das Funksignal der Handysendemasten. Übli-

cherweise ist ein Telefon immer an mehreren Sendemasten angemeldet, um ein sta-

biles Signal zu gewährleisten. Aus der Berechnung der Position von mindestens drei

dieser Sendemasten kann das Telefon seinen aktuellen Aufenthaltsort triangulieren.

Dafür berechnet es den geografischen Mittelpunkt aus allen drei Sendemasten.

iPhones und iPads verfügen noch über eine dritte Möglichkeit zur Positionsermitt-

lung: Seit 2008 speichert Apple die GPS-Position von Wireless LANs rund um die

Welt in einer Datenbank ab, aus der sich das Gerät bedienen kann. Befindet sich ein

iOS-Gerät also in der Nähe eines bekannten Netzwerks, kann es darüber ermitteln,

wo es sich befindet.

Die Position wird immer in geografischer Länge und Breite, auch Longitude und Lati-

tude genannt, angegeben (Abbildung 5.1). Die Longitude steht für die Position west-

lich bzw. östlich des Nullmeridians, einer 1884 willkürlich festgelegten Linie, die vom

Nord- zum Südpol verläuft und durch Royal Greenwich Observatory in London läuft.

225

5 Positionsbestimmung

Die Entfernung wird dabei als Winkel angegeben, 0–180° für 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-Süd-Richtung. Ausgehend vom Äquator

0–90° für nördlich gelegene Orte, negative Werte für alles was im Süden liegt. Da die

Skala sehr großzügig ausgelegt ist und die Längen/Breitengrade sehr weit voneinan-

der entfernt liegen, werden Positionen immer mit mehreren Nachkommastellen

und der Himmelsrichtung angegeben: 52.518611°N, 13.408056°E ist z.B. die Position

des Roten Rathauses in Berlin.

In diesem Kapitel lernen Sie, wie Sie mit JavaScript die Positionsdaten Ihres Smart-

phones auslesen und verarbeiten können. Sie werden eine Beispiel-App entwickeln,

Ihre aktuelle Position in einer Google-Karte eintragen und lernen, wie Sie mit GPS

Entfernungen berechnen können.

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. Zunächst legen Sie dafür 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

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 Koordinaten-

werte eintragen. Verknüpfen Sie zunächst die jQuery-Bibliothek mit Ihrem HTML-

Dokument:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

Definieren Sie zwei leere Variablen, in denen Sie später Longitude und Latitude spei-

chern:

var longitude, latitude;

Jetzt rufen Sie die Position Ihres Geräts ab: Dafür gibt es in HTML5 das Objekt naviga-

tor.geolocation, welches die Funktion .getCurrentPosition() besitzt. In den Klam-

mern geben Sie eine weitere Funktion an, die aufgerufen werden soll, wenn die GPS-

Koordinaten erfolgreich ermittelt wurden. Dies nennt man eine Callback-Funktion.

$(function(){navigator.geolocation.getCurrentPosition(positionsAusgabe);});

Abbildung 5.2 Der Browser fragt zunächst nach, ob die aktuelle Benutzerposition über-

mittelt werden soll. Im linken Bereich sehen Sie die Darstellung auf dem iPhone, rechts

unter Android.

227


Definieren Sie nun die Funktion positionsAusgabe, die als Callback-Funktion aufgeru-

fen 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. Anschließend tragen Sie die Werte in die noch leeren Tabellenzel-

len ein.

Abbildung 5.3 Ausgabe Ihrer aktuellen Benutzerposition –

in diesem Fall im Berliner Stadtzentrum

Öffnen Sie die HTML-Seite nun im Browser Ihres mobilen Geräts. Direkt nach dem

Laden des Dokuments wird die Positionsabfrage ausgeführt. In einem Dialogfenster

werden Sie gefragt, ob Sie der Webseite ihre aktuelle Position übermitteln möchten

(Abbildung 5.2). Klicken Sie auf OK, um die Positionsabfrage zuzulassen. In der rech-

ten oberen Ecke neben der Batterieanzeige wird Ihnen nun das GPS-Symbol ange-

zeigt, ein Indikator für den Nutzer, dass sein Telefon gerade eine Ortung durchführt.

228


5

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 verfügt das position-Objekt noch über weitere Eigen-

schaften, auf die Sie ebenfalls Zugriff haben:

� position.coords.accuracy

Die Eigenschaft accuracy gibt Auskunft darüber, wie genau die ermittelten Positi-

onsdaten 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

Gerät sich auch in einem Umkreis von 10 Metern der ermittelten Position befin-

den könnte.

� position.coords.altitude

Die Altitude ist die Höhe über Normalnull, also dem Meeresspiegel. Diese Infor-

mation ist vor allem dann interessant, wenn Sie sich im Gebirge befinden. Aller-

dings wird die Ausgabe der Altitude bisher noch nicht von allen Geräten

unterstützt, auf vielen Android-Geräten bleibt die Variable einfach leer.

� position.coords.altitudeAccuracy

Analog zu accuracy gibt die Eigenschaft altitudeAccuracy an, wie genau Ihre Höhe

ü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 Verfügung: hea-

ding gibt die Richtung an, in die sich das Gerät 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 Gerät aktuell bewegt.

In der Praxis unterstützt aber bisher noch kein Gerät diese beiden Eigenschaften, mit

ein paar Tricks können Sie diese aber dennoch ermitteln.

Stromfresser GPS

Das GPS-Modul benötigt relativ viel Strom und verringert somit die Akkulaufzeit spür-

bar. Nutzen Sie daher GPS-Abfragen nur, wenn es tatsächlich nötig ist. Bevor Sie eine

Positionsermittlung durchführen, sollten Sie den Nutzer darüber informieren und

nach Möglichkeit erläutern, wozu diese Abfrage notwendig ist. Völlig zurecht entste-

hen Sicherheitsbedenken, wenn einer WebApp der aktuelle Aufenthaltsort übermit-

telt werden soll – beruhigen Sie den Nutzer durch einen kurzen Hinweis.

229


5.2 Die »Where to Eat«-App

Nachdem Sie nun die Grundlagen der Positionsbestimmung verstanden haben, nut-

zen Sie diese Kenntnisse, um ein uraltes Menschheitsproblem zu lösen: 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 natürlich

nicht die erstbeste Burger-Bude sein – Ihnen steht heute der Sinn nach Sushi. Für die-

sen Zweck konzipieren Sie nun eine kleine Smartphone-App, die sich dieses Pro-

blems annimmt.

Sie sollte über folgende Kernfunktionen verfügen:

� Benutzerposition ermitteln

� eine Liste von Restaurants laden

� Restaurants und Benutzer in einer Karte eintragen

� Entfernung zwischen Benutzer und Restaurants berechnen

Optional soll der Nutzer auswählen können, welche Kategorie von Restaurant ange-

zeigt werden soll. So ist es möglich, bestimmte Arten von Restaurants auszublenden,

um schneller das gewünschte Sushi-Restaurant ausfindig zu machen.

Bevor Sie mit der Konzeption beginnen, sollten Sie sich außerdem die Benutzungssi-

tuation vor Augen führen. In den meisten Fällen wird es sich um ein vollmobiles Sze-

nario handeln, bei dem der Nutzer mit seinem Smartphone und einer 3G-

Verbindung unterwegs ist. Die App wird impulsiv und zielgerichtet aufgerufen, die

drei wichtigsten Fragen müssen von der App schnell beantwortet werden:

1. Wo bin ich?

2. Wo befinden sich die nächsten Restaurants?

3. Wie weit sind diese von mir entfernt?

Ihre App sollte also:

� für ein Smartphone optimiert sein

� auf Android und iOS gleichermaßen funktionieren

� kurze Ladezeiten aufweisen

� gelernte Bedienmechanismen aufgreifen

Weniger relevant sind eine Tablet-Version oder »verspielte« Elemente. Der Nutzer

möchte 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

rants und einem Optionsmenü, in dem bestimmte Restauranttypen ausgewählt wer-

den können. Die Screens werden über eine Symbolleiste untereinander verbunden, die

App startet mit der Karte. Fertigen Sie dazu einen Wireframe an (Abbildung 5.4).

Abbildung 5.4 Der Wireframe für die »Where to Eat«-App

Den Wireframe verwenden Sie, wie in Kapitel 3, »Konzeption und Gestaltungsprinzi-

pien«, beschrieben, für Nutzertests. Wenn Sie die Wireframes gezeichnet haben,

scannen bzw. fotografieren Sie sie ab und laden die Bilder auf ein Testgerät. Sie haben

nun drei Bilder, die Sie im Fotobetrachter Ihres Smartphones hin- und herwechseln

können. Dadurch entsteht beim Nutzer bereits ein ziemlich realistisches »App-

Gefühl«, das die Ergebnisse unseres Tests verbessert. Geben Sie Ihrem Testbenutzer

eine konkrete Aufgabe, z.B. »Finden Sie heraus, wo sich die nächstgelegene Pizzeria

befindet«. Der Nutzer soll diese Aufgabe mithilfe des App-Wireframes lösen, Sie über-

nehmen dabei die Bedienung. Wenn der Testkandidat also auf Optionen tippen

würde, wählen Sie für ihn das entsprechende Bild aus. Der Test hilft Ihnen dabei, die

Erwartungshaltung des Nutzers zu verstehen und eventuell vergessene Funktionen

zu ergänzen.

In unserem Beispieltest fallen Ihnen besonders bei der Listenansicht zwei Dinge auf:

Die Benutzer konnten die Restaurants nicht den Markern auf der Karte zuordnen.

Außerdem war unklar, welches nun das nächstgelegene Restaurant ist. Sie lösen die-

sen Umstand, indem Sie vor jedes Restaurant in der Liste einen kleinen Kartenaus-

schnitt einfügen, der bei der Assoziation hilft. Außerdem ergänzen 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. Zunächst müssen Sie eine

GPS-Koordinate in einer Karte eintragen. Damit Sie das Kartenmaterial nicht selbst

Restaurants

Pizza Dach

Burgeramt

Spaghetti Western

Sushi Izumi

Pesto I Pizza

Il Due Forni

Optionen

√ Pizza

√ Burger

√ Pasta

√ Sushi

231


auf Ihrem Server bereitstellen müssen, gibt es Dienstleister, die dies für Sie tun. Der

bekannteste ist Google Maps, der statische und dynamische Karten zur Verfügung

stellt (Abbildung 5.5). Der Service ist kostenlos und kann ohne Anmeldung genutzt

werden, ist aber auf 1.000 Kartenabrufe pro Nutzer und Tag beschränkt.

Abbildung 5.5 Die Google Maps Static API

Google bietet zwei Arten von Karten an: statische Karten, die ein nicht veränderbares

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 sen-

den eine Anfrage mit einem Parameter an den Google-Server, dieser liefert eine Bild-

datei zurück, 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 zurück, die den angeforderten Kartenaus-

schnitt beinhaltet. Sie können diesen sehr einfach in Ihre HTML5-Datei einbinden:

232


5

<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, benötigt 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 müssen,

dass also statt eines Kommas ein Punkt als Trenner verwendet wird.

� zoom

Gibt die Größe des Kartenausschnitts an. Je größer der Wert, desto »näher« befin-

det sich der Betrachter am Ort des Geschehens. Der Parameter kann eine natürli-

che Zahl zwischen 0 und 21 sein. Bei 0 ist die gesamte Weltkarte sichtbar, bei 21

werden einzelne Gebäude erkennbar. Je nach Zoomstufe werden auch mehr

Details dargestellt: Bei Stufe 10 werden nur Hauptstraßen eingeblendet, ab Stufe 13

alle Nebenstraßen, ab Stufe 15 auch deren Straßennamen. Die großen Stufen sind

nicht für alle Gebiete verfügbar – besonders in ländlichen Regionen sind Gebäude-

details etc. häufig nicht verfügbar.

233


� size

Definiert die Größe der Karte bzw. der Bilddatei, die vom Server ausgeliefert wird.

Der Parameter legt die Breite und die Höhe 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 Einschränkung: Eine statische Karte darf

höchstens 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-Sen-

sor ermittelt oder nicht. Dies hat keine Auswirkung auf die Kartendarstellung, muss

aber immer mit übergeben werden. Zulässig ist entweder die Angabe true oder false.

Neben diesen zwingend erforderlichen Parametern, gibt es eine Reihe von Zusatzop-

tionen, die Sie über weitere Parameter definieren können.

Kartentyp

maptype

Standardmäßig liefert Google Maps eine Straßenkarte (roadmap, Abbildung 5.7) aus,

alternativ können Sie eine Reliefkarte (terrain, Abbildung 5.8) anzeigen lassen, in der

Höhenunterschiede und Vegetation dargestellt werden. Als Letztes gibt es noch eine

Satellitenkarte (satellite, Abbildung 5.9). Ebenfalls möglich ist eine Satellitenkarte

mit eingezeichneten Straßen und Plätzen, die sogenannte Hybridkarte (hybrid, Abbil-

dung 5.10).

Abbildung 5.7 Kartentyp »roadmap«

234


5

Abbildung 5.8 Kartentyp »terrain«

Abbildung 5.9 Kartentyp »satellite«

235


Abbildung 5.10 Kartentyp »hybrid«

Markierungen

Zusätzlich können Sie wichtige Plätze in der Karte mit den Google-typischen Markie-

rungen einzeichnen (Abbildung 5.11). Dafür bietet die Static Maps API den markers-

Parameter an. Der Wert, den Sie dem markers-Parameter übergeben können, ist ein

wenig komplex: Zunächst definieren Sie den Stil der Markierungen, anschließend

ü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 können Sie Farbe, Größe und Bezeichnung festlegen:

� color gibt die Farbe der Markierung an. Dies kann entweder eine vordefinierte

Bezeichnung sein (möglich sind black, white, brown, green, purple, yellow, blue,

gray, orange und red) oder ein Hexadezimalwert (z.B. #ff0000 für die Farbe Rot).

� size definiert die Größe. Neben der Standardgröße gibt es mittlere Marker (mid),

kleine (small) und winzige (tiny) Versionen.

� label beinhaltet einen Großbuchstaben bzw. eine Ziffer, die auf dem Marker steht.

Umlaute und Sonderzeichen sind leider nicht möglich, Zahlen größer 9 ebenso

wenig. Bei kleinen und winzigen Markern funktioniert das Label nicht.

236


5

Abbildung 5.11 Die Marker in der Karte

Natürlich ist es auch möglich, 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


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 Kartenaus-

schnitt 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 bewe-

gen, bietet sich die Einbindung einer dynamischen Karte an – die Google Maps Java-

Script 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 zusätzliche Hostingkosten.

Abbildung 5.13 Die Google Maps JavaScript API

238


5

Um eine Google-Karte zu Ihrer App hinzuzufügen, müssen Sie zunächst im HTML-

Code ein leeres Platzhalterelement definieren:

<section id="karte"></section>

Über CSS legen Sie die Größe des Elements fest. Anstelle einer festen Pixelgröße kön-

nen Sie sie mit einem einfachen Trick bildschirmfüllend darstellen:

#karte { position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

Anschließend müssen Sie noch den JavaScript-Code der API einbinden:

<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

Jetzt können Sie eine Google-Karte initialisieren und darstellen lassen. Sie möchten

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 zunächst mit geolocation.getCurrentPosition die GPS-Koordinaten des

Benutzers. Anschließend 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


Anschließend 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 über-

geben.

Herzlichen Glückwunsch, 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. Dafür 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. Für Restaurants in Berlin könnte das in etwa so aussehen:

{ "Pizza Dach": { "Kategorie": "Pizza", "Position": { "Longitude": 13.456106, "Latitude": 52.51024 }

240


5

}, "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 enthält mindestens ein Wertepaar. Der

»Schlüssel« des Wertepaars ist immer eine Zeichenkette, die in Anführungszeichen

geschrieben werden muss. Nach dem Schlüssel folgt, getrennt von einem Doppel-

punkt, 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 führt zu einer veränderten Datenstruktur oder zu unlesba-

ren Daten. Ob Ihre Datei in Ordnung ist, überprüfen Sie am besten mit einem JSON

Validator wie JSONLint (http://jsonlint.com/, Abbildung 5.15).

Mithilfe von jQuery können Sie die Daten von Ihrem Server laden. Dafür 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 ausgeführt werden soll, sobald die Daten geladen wurden.

Dieser sogenannten Callback-Funktion wird das JSON-Objekt als Variable json über-

geben.

241


Abbildung 5.15 Mit JSONLint überprüfen Sie JSON-Dateien.

Die jQuery-Hilfsfunktion $.each() führt eine Funktion für jedes Unterobjekt in der

JSON-Datei aus, also für jedes Restaurant. Dabei übergeben Sie den jeweiligen Werte-

schlüssel, also unseren Restaurantnamen, und den Wert, also die Kategorie und GPS-

Koordinaten, als Parameter an die Funktion. Wenn Sie nun drei Restaurants in der

JSON-Datei gespeichert haben, wird diese Funktion dreimal aufgerufen. Sie können

die Funktion nutzen, um in Ihrer Google-Karte Marker für jedes Restaurant zu set-

zen:

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 Para-

meter ü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 Werteschlüssel speichert die Daten als

Zeichenkette bzw. Zahl.

242

5

Außerdem wollen Sie aber noch eine Liste der Restaurants mit einem kleinen Karten-

ausschnitt anlegen. Dazu müssen Sie zunächst im HTML-Code ein Platzhalterele-

ment 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 fügen 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


In Ihrem Konzept steht jedoch, dass zusätzlich zum Restaurantnamen ein kleiner

Kartenausschnitt angezeigt werden soll. Nun können Sie mit Ihrem Wissen über die

Static Maps API glänzen – erweitern Sie den jQuery-Befehl um Folgendes:

var ausschnitt = 'http://maps.google.com/maps/api/staticmap?size=50x50&mar-kers=color:blue|size:tiny|'+daten.Position.Latitude+','+daten.Position.Longi-tude+'&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 eingefügt.

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-Koordi-

naten ist eine Wissenschaft für sich. Da sich die Erde leider nicht ganz rund, sondern

eher wie eine Clementine krümmt, 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: Für kurze Distanzen gibt es eine relativ einfache und ausrei-

chend genaue Formel. Alles was Sie benötigen, sind die Longitude und Latitude der

beiden Punkte. Diese rechnen Sie anhand des durchschnittlichen Erdradius in Dis-

tanzen vom Nullpunkt um, damit Sie anschließend, mithilfe des Satzes des Pythago-

ras, eine Entfernung der beiden Punkte berechnen können. 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

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 Lon-

gitude und Latitude des entfernten Punktes. Nach etwas mathematischer Magie gibt

die Funktion eine Zeichenkette zurück, welche die Luftlinie zwischen beiden Positio-

nen zurückgibt, wahlweise in Kilometern oder, bei kürzeren Distanzen, in Metern.

Die Entfernung ist relativ genau; Atomraketen sollten Sie damit zwar nicht steuern,

aber um ein Restaurant zu finden, reicht diese Funktion völlig aus. Ergänzen Sie den

jQuery-Befehl für 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

5.2.5 Die Programmoberfläche

Sie haben nun alle benötigten Funktionalitäten für Ihre Geolocation-App beisam-

men. Nun müssen Sie das Ganze noch in einen App-Rahmen gießen. Sie beginnen

mit dem HTML-Code. Sie haben bereits den Platzhalter für die Karte und die Restau-

rantliste angelegt, ergänzen Sie einen weiteren Bereich für 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 angewählte Checkbox pro Listeneintrag enthält. Um das Layout kümmert 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

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 verändert 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 aufru-

fen, werden Sie zunächst nur eine weiße Seite sehen, doch dazu gleich mehr. Die Sek-

tion #karte erhält als Hintergrundbild einen kleinen Ladekreis, der zentriert

angezeigt wird. Dies hat folgende Bewandtnis: Abhängig von der Dauer der Positi-

onsbestimmung 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 ver-

schwindet von allein, sobald die Karte geladen ist und den Hintergrund verdeckt. Auf

http://ajaxloader.info können Sie aus verschiedenen Modellen wählen, eigene Far-

ben 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, benötigen Sie noch eine Sym-

bolleiste im App-Stil.

247


5.2.6 Eine Symbolleiste einfügen

Die Symbolleiste ist ein gelerntes und daher für Ihre App ideales Navigationsele-

ment. Im Gegensatz zu Desktopanwendungen befinden sich Symbolleisten bei

Mobilgeräten meist am unteren Bildschirmrand, damit Sie gut mit einer Hand und

dem Daumen zu erreichen sind. Fügen 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 Sekti-

onen Ihrer App verweisen. Damit daraus eine Toolbar wird, müssen Sie noch etwas

CSS hinzufügen:

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

display: -webkit-box; width: 100px;}nav li a { display: -webkit-box; -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 (Abbil-

dung 5.18).

Die Symbole sind transparente PNG-Bilder. In diesem Fall wurden wir in der kosten-

losen Symbolbibliothek »Icon Sweets« fündig. Sie können alle Symbole als Photo-

shop-Datei unter http://iconsweets2.com/ herunterladen und kostenlos in Ihren

Projekten verwenden.

249


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 fühlt es sich mehr

wie eine Webseite und weniger wie eine mobile App an. Abhilfe schafft auch hier wie-

der 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

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 Abstände, Farben und Schriftgrößen definieren, kom-

men Sie einem App-typischen Look & Feel schon sehr nahe. Zusätzlich zu diesen all-

gemeinen Formatierungen sind noch ein paar Spezialregeln vonnöten, die nur für

die Übersicht bzw. die Optionen Anwendung finden:

#uebersicht ul { overflow: hidden; -webkit-background-clip: padding;}

251


#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 dafür, dass sich das An- bzw. Abwählen bestimmter

Restauranttypen in den Optionen in der Übersicht niederschlägt (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

Je nachdem, ob eine Checkbox angewählt ist oder nicht, wird den entsprechenden

Restaurants in der Liste die Klasse versteckt hinzugefügt 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 Posi-

tion. Testen Sie die App während der Entwicklung immer wieder auf Ihrem Smart-

phone, 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. Fügen Sie einen JavaScript-Befehl ein, um die

Adressleiste zu verstecken:

window.scrollTo(0,1);

Natürlich sollten Sie außerdem verhindern, dass der Nutzer die Seite verkleinern

bzw. vergrößern 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" />

Außerdem sollten Sie ein schönes Symbol für den Home-Bildschirm (Abbildung 5.21)

sowie einen Ladebildschirm erstellen (Abbildung 5.22) und im head-Bereich des Doku-

ments verknüpfen:

<link rel="apple-touch-icon-precomposed" href="/bilder/icon-ipad.png" sizes="72x72" />

<link rel="apple-touch-icon-precomposed" href="/bilder/icon-iphone-retina.png" sizes="114x114" />

<link rel="apple-touch-icon-precomposed" href="/bilder/icon-ipad-retina.png" sizes="114x114" />

<link rel="apple-touch-icon-precomposed" 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


5

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


Abbildung 5.24 Die App auf dem iPad

5.3 More Fun mit Geodaten

Die Google Maps APIs sind nur eine Möglichkeit, mit geografischen Daten anspre-

chende Apps zu kreieren. Darüber hinaus gibt es von verschiedenen Anbietern

Schnittstellen, die es Ihnen ermöglichen, die Benutzerposition für unterschiedlichste

Anwendungsfälle zu nutzen. Sie können die »Where to Eat«-App z.B. mit einer Liste

aus der Qype-Bibliothek füttern, in der weltweit unzählige Restaurants gespeichert

sind. Im Folgenden wollen wir Ihnen einige kostenlose APIs vorstellen, die ortsbezo-

gene Daten bereithalten.

256


5

5.3.1 Qype-API

Seit 2006 bietet die Hamburger Plattform Qype Restaurant- und Ladenbesitzern die

Möglichkeit, ihre Örtlichkeiten im Netz zu präsentieren und von Benutzern bewer-

ten zu lassen. Besonders in Deutschland ist so gut wie jedes Ladengeschäft verzeich-

net. Die kostenlose API ermöglicht es App-Entwicklern, Beschreibungen und

Bewertungen abzurufen und nach bestimmten Kriterien zu filtern (Abbildung 5.25).

Eine ausführliche 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

gegründet. Nutzer können in Bars und Cafés »einchecken« und dafür Punkte und

Belohnungen sammeln. Die kostenlose API kann für eigene Anwendungen genutzt

werden (Abbildung 5.26), eine englischsprachige Dokumentation finden Sie unter

https://developer.foursquare.com/.

257


Abbildung 5.26 Die foursquare-API

5.3.3 Google Places

Ähnlich wie bei Qype können 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 kosten-

lose 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 Nähe, bei der Sie nach Tweets in Ihrer Umgebung suchen können –

z.B. um zu erfahren, was das aktuelle Stadtgespräch ist. Per API können 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

Abbildung 5.27 Die Google-Places-API

Abbildung 5.28 Die Twitter-API

259


5.3.5 Flickr-API

Der Fotosharing-Dienst Flickr bietet Nutzern weltweit die Möglichkeit, eigene Fotos

zu teilen und zu taggen. Eine wichtige Rolle spielt dabei der Ort, an dem das Foto ent-

standen ist. Eine kostenlose API bietet Ihnen die Möglichkeit, nach Fotos aus Ihrer

Umgebung zu suchen – ideal für mobile WebApps (Abbildung 5.29). Die englischspra-

chige 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 Einsatzmöglichkeiten vor: vom Restaurant-Fin-

der, über eine App, die sich merkt, wo Sie Ihr Auto geparkt haben, bis hin zu einer

digitalen GPS-gestützten 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

Geräte ........................................................................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-Schlüssel .............................................................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

Auflösungen ............................................................... 127

Automotive Agenda .............................................. 403

autoplay........................................................................182

Autoplay-Attribut.....................................................183

B

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

Bedienoberfläche.............................................. 139, 311

Bedienschema........................................................... 140

before ............................................................................. 95

beginPath.....................................................................213

Benutzer ....................................................................... 137

Benutzerablauf ..........................................................139

Benutzeroberfläche ..................................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

Bézierkurve .................................................................213

Bildschirmauflösungen .......................................... 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

Browserentwicklung ................................................ 36

Browsermarkt .............................................................30

Browserplugin............................................................. 36

Browserspiele ............................................................ 219

Bundle ID ................................................................... 405

Bundle Identifier......................................................394

button.............................................................................111

C

CACHE ....................................................... 289, 290, 291

Cache-Größe ..............................................................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

Schlüssel ................................................................. 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

Fehlberührungen.................................................... 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

Förster-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

Für Web und Geräte speichern ................. 102, 103

Fußzeile ........................................................................319

G

Game-Engines............................................................219

GDlib.............................................................................220

Gebühr ......................................................................... 383

Geodaten..................................................................... 256

Geofunktionen ........................................................ 260

Geolocation................................................................246

Geolocation-App...................................................... 253

Geoposition ............................................................... 225

Georgia......................................................................... 170

Gerätehardware.......................................................... 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

Empfänger ............................................................. 225

Koordinaten ..........................................................339

Graphen...................................................................... 220

Gravitation .................................................................262

Greenwich...................................................................226

Grid-Elemente........................................................... 163

Grundlinienraster ....................................................152

GUI-Template.............................................................145

Gummibandeffekt..................................................... 74

Gutenberg................................................................... 169

Gutters .......................................................................... 153

H

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

Hirnströme .................................................................142

Home-Bildschirm ...................................................... 79

Home-Button .............................................................375

Hörsaal..........................................................................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

Interaktivität ............................................................... 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

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

Lautstärketasten ........................................................ 26

Leckerli One ................................................................317

Lehni, Jürg....................................................................221

Leonello, Chris ......................................................... 220

LESS CSS....................................................................... 149

Less CSS Framework ............................................... 149

Lichtverhältnisse ......................................................123

Lifestyle-Magazin .....................................................125

Lifestyle-Parameter.................................................. 137

linear............................................................................. 199

lineTo.............................................................................213

lipsum ...........................................................................197

Liste .......................................................................325, 333

Listeneinträge ........................................................... 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

436

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

Mobilgerät ...................................................................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

Navigationsgerät...................................................... 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

Plattformunabhängig ...............................................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

Präfixe .............................................................................53

prepend ......................................................................... 95

preserve-3d................................................................ 206

Privater Schlüssel .................................................... 392

Profil ..............................................................................391

Programmiersprachen .......................................... 382

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-Grün-Schwäche................................................. 119

Route............................................................................. 338

Routenplanung............................................... 336, 340

Rundungsfehler........................................................ 367

438

Index

S

Samsung........................................................................ 29

Sandbox-Model .......................................................... 84

Satelliten ..................................................................... 225

Satellitenkarte........................................................... 234

Schablonen.................................................................. 141

-Methode ................................................................. 141

Schadsoftware............................................................. 26

Schaltfläche........................................................ 110, 139

Schlagschatten........................................................... 215

Schlüssel......................... 241, 294, 392, 393, 395, 396

Schlüsselbilder.......................................................... 201

Schlüsselbund........................................................... 392

Verwaltung............................................................ 392

Schriftart ....................................................................... 42

Schriftdarstellung.................................................... 170

Schriften.............................................................. 169, 178

Schriftgestaltung ..................................................... 169

Schriftgröße ................................................................. 42

Schriftschnitte ...........................................................174

Schriftstile ...................................................................174

Schüttelgeste ............................................................. 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

Sh ji ................................................................................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

Stadtführer ..................................................................134

Standardlayout .......................................................... 153

Standardstile...............................................................357

Startbildschirm.......................................................... 116

Static Maps API .........................................................236

Statusleiste .................................................................. 80

Stern-App ...................................................................... 26

Store-Betreiber............................................................ 26

Storyboard................................................................... 137

Storyboard-Methode...............................................138

Straßenkarte ..............................................................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

o

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-Geräte.................................................... 109, 134

Touch-Geste..............................................................200

touchIcon.................................................................... 418

Touch-Oberfläche....................................................109

Touchscreen ................................................................ 29

touchstart .................................................................. 308

Transformation ........................................................205

Triangulieren............................................................. 225

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

Vorüberlegungen......................................................134

440

Index

W

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

Werteschlüssel.......................................................... 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

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

Zielgerät........................................................................ 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

Zurück-Button........................................................... 334

Zwitschern.................................................................. 193

441

Apps mit HTML5 und CSS3 · 2018-03-26 · von jQuery Mobile ... 8.2 Die Entwicklung einer App mit...

Documents

Transcript of Apps mit HTML5 und CSS3 · 2018-03-26 · von jQuery Mobile ... 8.2 Die Entwicklung einer App mit...