Apps mit HTML5 und CSS3 -...

57
Florian Franke, Johannes Ippen Apps mit HTML5 und CSS3 für iPad, iPhone und Android

Transcript of Apps mit HTML5 und CSS3 -...

Page 1: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Florian Franke, Johannes Ippen

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

Page 2: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Auf einen Blick

Auf einen Blick

1 Apps ............................................................................................................................ 23

2 HTML5 in der mobilen Webentwickung ........................................................ 37

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

4 HTML5 als Designwerkzeug ............................................................................... 149

5 Positionsbestimmung .......................................................................................... 239

6 Auslesen des Bewegungssensors mit JavaScript ........................................ 275

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

8 WebApps mit Frameworks entwickeln .......................................................... 341

9 Native Anwendungen und App-Stores .......................................................... 435

10 Windows Phone 8 .................................................................................................. 491

11 Weiterführende Informationen ........................................................................ 507

Page 3: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Inhalt

5

Inhalt

Vorwort .................................................................................................................................................. 13

Bevor’s richtig losgeht – Installation von XAMPP .................................................................... 15

1 Apps 23

1.1 Native Apps vs. WebApps ...................................................................................... 23

1.1.1 WebApps allgemein ................................................................................... 24

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

1.1.3 Apples App Store, Google Play und Co. .................................................... 27

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

1.1.5 Native App oder WebApp? ........................................................................ 30

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

1.2.1 Der Mobilsektor boomt ............................................................................. 30

1.2.2 Browsertechnik auf Mobilgeräten ........................................................... 32

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

2 HTML5 in der mobilen Webentwickung 37

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

2.1.1 HTML als Standard ..................................................................................... 38

2.1.2 HTML5 als Marketinginstrument ............................................................. 38

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

2.2 Was HTML5 bietet ................................................................................................... 39

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

2.2.2 Semantische Elemente in HTML5 ............................................................. 41

2.3 CSS3 – Grundlagen und Neuerungen .................................................................. 44

2.3.1 Was ist eigentlich CSS? .............................................................................. 44

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

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

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

Page 4: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Inhalt

6

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

2.4.1 Möglichkeiten und Limitationen von HTML5 auf einer

mobilen Plattform ..................................................................................... 70

2.4.2 HTML und CSS für kleine Bildschirme ...................................................... 71

2.4.3 Von der Webseite zur WebApp ................................................................ 80

2.5 Entwickeln mit JavaScript-Frameworks – Zepto und Co. ............................... 85

2.5.1 Die JavaScript-Syntax ................................................................................ 86

2.5.2 Einführung in Zepto ................................................................................... 90

2.5.3 Wichtige Funktionen in Zepto .................................................................. 96

2.6 JavaScript auf dem iPhone testen ....................................................................... 100

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

2.7.1 Kompression ............................................................................................... 101

2.7.2 Die richtige Reihenfolge ............................................................................ 105

2.7.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 ........................ 114

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

3.1.4 Alles eine Frage der Ausrichtung .............................................................. 128

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

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

3.2.2 Gedanken und Inhalte ordnen ................................................................. 136

4 HTML5 als Designwerkzeug 149

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

4.1.1 Einsatz des Less CSS Frameworks ............................................................ 151

4.1.2 Das Raster für einen speziellen Einsatz – Magazine Grid ..................... 160

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

4.2.1 Schriften im Web ....................................................................................... 172

4.2.2 Webfonts .................................................................................................... 174

4.2.3 Font-Services .............................................................................................. 175

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

Page 5: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Inhalt

7

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

4.2.6 Webschriften in Aktion ............................................................................. 180

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

4.3.1 Video ............................................................................................................ 182

4.3.2 Audio ........................................................................................................... 192

4.4 Animationen mit CSS ............................................................................................. 198

4.4.1 CSS-Transitions und CSS-Animations ...................................................... 199

4.4.2 Animieren mit -webkit-transition ............................................................ 199

4.4.3 Animieren mit -webkit-animation ........................................................... 203

4.4.4 Manipulation mit -webkit-transform ...................................................... 206

4.5 Animationen mit Adobe Edge Animate ............................................................. 211

4.5.1 Adobe Edge Animate ................................................................................. 211

4.5.2 Ihr erster eigener Teaser ........................................................................... 211

4.5.3 Die Oberfläche von Adobe Edge Animate ............................................... 212

4.5.4 Einstimmung, erste Vorüberlegungen und Unterteilung

des Teasers .................................................................................................. 213

4.5.5 Voreinstellungen: Die Einrichtung der Bühne ........................................ 213

4.5.6 Teil 1: Textelemente anlegen und animieren ......................................... 214

4.5.7 Teil 2: Fakten, schnell und knackig! ......................................................... 217

4.5.8 Teil 3: Der Abbinder und der »Call to Action« ......................................... 218

4.5.9 »Call to Action« – Erstellung eines Buttons ............................................ 219

4.5.10 Der HTML-Code von Adobe Edge Animate im Detail ............................. 221

4.5.11 Abschließende Worte zu Adobe Edge Animate ...................................... 222

4.6 Zeichnen mit JavaScript – das canvas-Element ................................................ 223

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

4.6.2 Grundlegende Funktionen ........................................................................ 224

4.6.3 Zeichnen per Touch-Eingabe .................................................................... 231

4.6.4 In der Praxis – Canvas oder CSS? .............................................................. 234

4.6.5 Canvas-Bibliotheken .................................................................................. 235

5 Positionsbestimmung 239

5.1 Die Positionsbestimmung mit HTML5 ................................................................ 240

5.1.1 Weitere Eigenschaften der Positionsbestimmung ................................ 243

5.2 Die Where-to-Eat-App ............................................................................................ 244

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

5.2.2 Interaktive Karten mit der Google Maps JavaScript-API einbinden ..... 253

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

Page 6: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Inhalt

8

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

5.2.5 Die Programmoberfläche .......................................................................... 260

5.2.6 Eine Symbolleiste einfügen ...................................................................... 262

5.2.7 Die Restaurantliste erstellen .................................................................... 265

5.2.8 Der letzte Schliff ......................................................................................... 267

5.3 More Fun mit Geodaten ......................................................................................... 270

5.3.1 Yelp-API ....................................................................................................... 271

5.3.2 foursquare-API ........................................................................................... 271

5.3.3 Google Places .............................................................................................. 272

5.3.4 Twitter-API .................................................................................................. 272

5.3.5 Flickr-API ..................................................................................................... 273

6 Auslesen des Bewegungssensors mit JavaScript 275

6.1 Diese Daten liefert der Bewegungssensor ......................................................... 276

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

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

6.3.1 Die HTML-Datei .......................................................................................... 280

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

6.3.3 Die CSS-Datei .............................................................................................. 289

6.3.4 Das Laden eines Polaroids ......................................................................... 290

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

6.4 Die Anzeige eigener Bilder mit dem Input-Element ........................................ 300

6.4.1 Einführung in den Dateiupload ab iOS 6 und Android 2.2 .................... 300

6.4.2 Erweitern der Shake-it-WebApp um eigene Fotos – Übersicht ............ 302

6.4.3 Abschließende Worte/Einschränkungen ................................................ 315

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

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

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

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

7.1.3 Wann werden welche Daten gecached? ................................................. 322

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

Page 7: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Inhalt

9

7.2 Der Local Storage – die Offline-Datenbank ....................................................... 324

7.2.1 localStorage-Funktionen ........................................................................... 324

7.2.2 Temporäre Speicherung von Daten im Session Storage ....................... 325

7.3 Die Offline-To-do-App ............................................................................................ 326

7.3.1 Welche Anforderungen muss Ihre To-do-App erfüllen? ........................ 326

7.3.2 Der Wireframe der To-do-App .................................................................. 327

7.3.3 Funktionsbezogene Animation ................................................................ 336

7.3.4 Zusätzliche EventHandler ......................................................................... 338

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

8 WebApps mit Frameworks entwickeln 341

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

8.1.1 Zum Heiteren Hering – ein Fischrestaurant als WebApp ...................... 342

8.1.2 Die Startseite .............................................................................................. 343

8.1.3 Kurze Kaffeepause – ein Blick hinter die Kulissen

von jQuery Mobile ...................................................................................... 354

8.1.4 À la Carte – die Menüseite ........................................................................ 355

8.1.5 Implementierung einer Google Maps-Karte inklusive

Routenplanung .......................................................................................... 366

8.1.6 Ein Kontaktformular mithilfe von PHP .................................................... 371

8.1.7 jQuery Mobile-Apps mit dem ThemeRoller und dem

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

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

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

8.2.2 Interaktive Diagramme mit Sencha Touch Charts –

die Wetterstation ....................................................................................... 393

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

8.3 Responsive Apps mit Twitter Bootstrap ............................................................. 411

8.3.1 Was ist das Responsive Webdesign? ....................................................... 411

8.3.2 Was ist Bootstrap? ..................................................................................... 411

8.3.3 Grundlagen ................................................................................................. 412

8.3.4 Die Instagram-App ..................................................................................... 420

8.3.5 Ressourcen .................................................................................................. 430

Page 8: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Inhalt

10

9 Native Anwendungen und App-Stores 435

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

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

9.1.2 Die Erstellung einer nativen App mit PhoneGap (Apache Cordova) .... 437

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

9.1.4 Die kompilierten App-Dateien mithilfe von

PhoneGap Build erstellen .......................................................................... 444

9.1.5 Apple-Zertifikate und Profile .................................................................... 446

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

9.1.7 Endlich! Das Hochladen der Shake-it-like-a-Polaroid-

picture-Daten ............................................................................................. 451

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

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

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

9.2 Ein Spiel mit PhoneGap .......................................................................................... 456

9.2.1 Die Welt der Spiele ..................................................................................... 457

9.2.2 Die Grundausstattung ............................................................................... 458

9.2.3 Runde für Runde – JavaScript, die Erste .................................................. 460

9.2.4 Die Positionierung einer Schießscheibe .................................................. 463

9.2.5 Das Resultat einblenden ........................................................................... 464

9.2.6 Hinzufügen der PhoneGap-Funktionen .................................................. 465

9.2.7 Lasset die Duelle beginnen ....................................................................... 469

9.3 Eine native Magazin-App mit Laker .................................................................... 469

9.4 Die Veröffentlichung einer App in einem App-Store ....................................... 472

9.4.1 Das Veröffentlichen einer App in Apples App Store ............................... 472

9.4.2 Das Veröffentlichen einer App in Google Play ........................................ 479

9.5 Publizieren der WebApp in einem Store oder als Webseite .......................... 483

9.5.1 Auf den Vollbildmodus hinweisen ........................................................... 483

9.5.2 Die Alternative zu App-Stores – OpenAppMarket .................................. 485

9.5.3 Weitere Möglichkeiten .............................................................................. 490

10 Windows Phone 8 491

10.1 Was ist Windows Phone? ...................................................................................... 491

10.1.1 Der Browser ................................................................................................ 492

10.1.2 Gestaltungsprinzipien des Modern UI ..................................................... 493

Page 9: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Inhalt

11

10.1.3 Grundlagen – Raster .................................................................................. 495

10.1.4 Die To-do-App ............................................................................................. 499

10.1.5 Zum Home-Bildschirm hinzufügen ......................................................... 503

10.1.6 Weiterführende Infos ................................................................................ 504

A Weiterführende Informationen 507

A.1 HTML5 und CSS3 ...................................................................................................... 507

A.2 JavaScript und nützliche Tools ............................................................................. 508

A.3 iOS, Apple .................................................................................................................. 508

A.4 Android, Google ....................................................................................................... 509

A.5 Technologie und Gadgets ...................................................................................... 509

A.6 Digital Publishing .................................................................................................... 510

A.7 Design und Inspiration ........................................................................................... 510

A.8 Sonstiges ................................................................................................................... 511

A.9 Interessante Twitter-Kontakte ............................................................................. 511

Index ........................................................................................................................................................ 513

Page 10: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

239

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 in eine 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 von vier Satelliten empfangen kann. Aller-

dings ist der Empfang in geschlossenen Räumen in der Regel unmöglich, denn 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 (siehe Abbildung 5.1). Die Longitude steht für die Position

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

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

Page 11: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

240

Die Entfernung wird dabei als Winkel angegeben: 0–180° für westlich von Greenwich

gelegene Positionen und negative Werte für Postionen 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

stehen 0–90° für nördlich gelegene Orte und 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

voneinander entfernt liegen, werden Positionen immer mit mehreren Nachkom-

mastellen 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 mithilfe

von GPS Entfernungen berechnen können.

5.1 Die Positionsbestimmung mit HTML5

Als Erstes werden Sie lernen, wie Sie mit JavaScript Ihre aktuellen GPS-Koordinaten aus-

lesen und in eine Tabelle eintragen. Hierzu legen Sie zunächst eine HTML-Tabelle an:

Page 12: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5.1 Die Positionsbestimmung mit HTML5

241

5

<table><tr id="longitude"><th>Longitude:</th><td></td>

</tr><tr id="latitude"><th>Latitude:</th><td></td>

</tr></table>

Listing 5.1 HTML-Tabelle mit Platzhaltern

Sie haben nun eine Tabelle mit zwei Zeilen und zwei Spalten. Die erste Spalte fungiert

als Kopfspalte, und die zweite Spalte ist noch leer – hier werden Sie mit Zepto die

Koordinatenwerte eintragen. Verknüpfen Sie zunächst die Zepto-Bibliothek mit

Ihrem HTML-Dokument:

<script src="js/zepto.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

navigator.geolocation, das die Funktion .getCurrentPosition() beinhaltet. In den

Klammern geben Sie eine weitere Funktion an, die aufgerufen werden soll, wenn die

GPS-Koordinaten erfolgreich ermittelt worden sind. Dies nennt man eine Callback-

Funktion.

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

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

rufen wird. Der Funktion wird der Parameter position übergeben. Dabei handelt es

sich um ein Objekt, das beim Abrufen der Position durch .getCurrentPosition()

erstellt wird. In diesem Objekt sind u. a. Ihre GPS-Koordinaten gespeichert.

var positionsAusgabe = function(position){longitude = position.coords.longitude;latitude = position.coords.latitude;

Page 13: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

242

$('#longitude td').html(longitude);$('#latitude td').html(latitude);};

Listing 5.2 Befüllen der Tabelle mit Longitude und Latitude

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

telt werden soll. Im linken Bereich sehen Sie die Darstellung auf dem iPhone und rechts

unter Android.

Sie weisen Ihren zuvor definierten Variablen die Longitude und Latitude aus dem

position-Objekt zu und tragen anschließend die Werte in die noch leeren Tabellen-

zellen ein.

Öffnen Sie nun die HTML-Seite 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

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

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

angezeigt, ein Indikator für den Nutzer, dass sein Telefon gerade eine Ortung durch-

führt. Einen kurzen Moment später werden Ihre Koordinaten in der Tabelle eingetra-

gen (siehe Abbildung 5.3).

Page 14: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5.1 Die Positionsbestimmung mit HTML5

243

5

Abbildung 5.3 Ausgabe Ihrer aktuellen Benutzerposition –

in diesem Fall im Berliner Stadtzentrum

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. Beträgt der Wert beispielsweise zehn Meter, bedeutet dies,

dass Ihr Gerät sich auch in einem Umkreis von zehn Metern von der ermittelten

Position befinden könnte.

� position.coords.altitude

Das Attribut altitude ist die Höhe über Normalnull, also über dem Meeresspiegel.

Diese Information ist vor allem dann interessant, wenn Sie sich im Gebirge befin-

den. Allerdings wird die Ausgabe der Eigenschaft altitude bisher noch nicht von

allen Geräten unterstützt; auf vielen Android-Geräten bleibt die Variable einfach

leer.

Page 15: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

244

� 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 und speed. heading gibt die Richtung an, in die sich das Gerät bewegt. Wie bei

einem Kompass wird hier die Richtung, ausgehend von Norden, als Winkel zwi-

schen 0° und 360° gespeichert. Die Eigenschaft speed beschreibt die Geschwindig-

keit, mit der sich das Gerät aktuell bewegt.

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

nur wenigen Tricks können Sie diese aber dennoch ermitteln.

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?

Sie kennen sicher das Problem: Sie befinden sich in einer fremden Stadt und sind auf

der Suche nach einem nahe gelegenen Restaurant. Im Idealfall sollte das natürlich

nicht die erstbeste Burger-Bude sein – Ihnen steht heute vielmehr der Sinn nach

Sushi. Für diesen Zweck konzipieren Sie nun eine kleine Smartphone-App, die sich

dieses Problems annimmt.

Diese App sollte über die folgenden Kernfunktionen verfügen:

� Benutzerposition ermitteln

� eine Liste von Restaurants laden

� Restaurants und Benutzer in eine Karte eintragen

� Entfernung zwischen Benutzer und Restaurants berechnen

Stromfresser GPS

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

spürbar. Nutzen Sie daher GPS-Abfragen nur, wenn sie auch tatsächlich erforderlich

sind. 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 zu Recht entstehen Sicherheitsbedenken, wenn einer WebApp der aktuelle

Aufenthaltsort übermittelt werden soll – beruhigen Sie den Nutzer durch einen kur-

zen Hinweis.

Page 16: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5.2 Die Where-to-Eat-App

245

5

Optional soll der Nutzer auswählen können, welche Restaurantkategorie angezeigt

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

ation vor Augen führen. In den meisten Fällen handelt es sich um ein vollmobiles

Szenario, in dem der Nutzer mit seinem Smartphone und einer 3G-Verbindung

unterwegs ist. Die App wird impulsiv und zielgerichtet aufgerufen. Von der App müs-

sen also drei wichtigsten Fragen zügig beantwortet werden:

1. Wo bin ich?

2. Wo befinden sich die nächsten Restaurants?

3. Wie weit sind diese Restaurants von mir entfernt?

Ihre App sollte also:

� für ein Smartphone optimiert sein

� auf Android und iOS gleichermaßen funktionieren

� kurze Ladezeiten aufweisen

� vertraute Bedienmechanismen aufgreifen

Weniger relevant sind eine Tablet-Version oder »verspielte« Elemente, denn der

Nutzer möchte nichts entdecken. Daher sind hier Animationen, Dekorationen oder

Ornamente fehl am Platz.

Ihre App besteht im Wesentlichen aus drei Screens: aus einer Karte, auf der die Posi-

tion des Nutzers und der umliegenden Restaurants eingezeichnet ist, einer Liste der

Restaurants und einem Optionsmenü, in dem bestimmte Restauranttypen ausge-

wählt werden können. Die einzelnen Screens werden über eine Symbolleiste mitein-

ander verbunden; die App startet mit der Karte. Fertigen Sie hierzu einen Wireframe

an (siehe Abbildung 5.4).

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

Restaurants

Pizza Dach

Burgeramt

Spaghetti Western

Sushi Izumi

Pesto I Pizza

Il Due Forni

Optionen

√ Pizza

√ Burger

√ Pasta

√ Sushi

Page 17: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

246

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

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

nen 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 Auf-

gabe, z. B. »Finden Sie heraus, wo sich die nächstgelegene Pizzeria befindet«. Der Nutzer

soll diese Aufgabe mithilfe des App-Wireframes lösen, und Sie übernehmen 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,

und außerdem war unklar, welches nun das nächstgelegene Restaurant ist. Sie lösen

diesen Umstand, indem Sie vor jedem Restaurant in der Liste einen kleinen Karten-

ausschnitt 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

auf Ihrem Server bereitstellen müssen, gibt es Dienstleister, die dies für Sie überneh-

men. Der bekannteste Dienstleister ist Google Maps, der statische und dynamische

Karten zur Verfügung stellt (siehe Abbildung 5.5). Der Service ist kostenlos und kann

ohne Anmeldung genutzt werden, sofern maximal 2.500 Kartenabrufe pro Nutzer

und Tag getätigt werden.

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 sowie

hin- und herbewegen kann. Eine statische Karte zu erstellen ist sehr einfach: Sie sen-

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

Bilddatei zurück, die den entsprechenden Kartenausschnitt beinhaltet (siehe Abbil-

dung 5.6). Testen Sie dies, indem Sie im Browser die 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:

<img src=http://maps.google.com/maps/api/staticmap?center=Berlin,Germany&zoom=10&size=500x500&sensor=false />

Page 18: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5.2 Die Where-to-Eat-App

247

5

Abbildung 5.5 Die Google Static Maps-API

Abbildung 5.6 Kartenausgabe als Bild

Page 19: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

248

Um die Karte darzustellen, benötigt der Server einige Parameter. Dies sind:

� center

Der Parameter center legt den Mittelpunkt der Karte fest, bestimmt also den Aus-

schnitt. 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 überge-

ben werden müssen, dass also statt eines Kommas ein Punkt als Trenner verwen-

det wird.

� zoom

zoom gibt die Größe des Kartenausschnitts an. Je größer der Wert ist, desto näher

befindet sich der Betrachter am Ort des Geschehens. Der Parameter kann eine

natürliche Zahl zwischen 0 und 21 beinhalten. Bei 0 ist die gesamte Weltkarte

sichtbar, und bei 21 werden einzelne Gebäude erkennbar. Je nach Zoomstufe wer-

den mehr Details dargestellt: Bei Stufe 10 werden nur Hauptstraßen eingeblendet,

ab Stufe 13 alle Nebenstraßen und ab Stufe 15 auch deren Straßennamen. Die gro-

ßen Stufen sind nicht für alle Gebiete verfügbar – besonders in ländlichen Regio-

nen werden Gebäudedetails usw. häufig nicht angezeigt.

� size

Der Parameter size definiert die Größe der Karte bzw. der Bilddatei, die vom Server

ausgeliefert wird. size legt die Breite und die Höhe des Bildes in Pixeln fest. So erstellt

beispielsweise die Angabe 500×300 eine Karte, die 500 Pixel breit und 300 Pixel hoch

ist. Hier gibt es eine entscheidende Einschränkung: Eine statische Karte darf höchs-

tens 640 Pixel hoch bzw. breit sein; der Maximalwert liegt also bei 640×640.

� sensor

Der Parameter sensor gibt an, ob die App die Benutzerposition über einen GPS-

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

muss aber immer mitübergeben werden. 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, siehe Abbildung 5.7)

aus, alternativ können Sie eine Reliefkarte (terrain, siehe Abbildung 5.8) anzeigen

lassen, in der Höhenunterschiede und Vegetation dargestellt werden. Als Letztes gibt

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

eine Satellitenkarte mit eingezeichneten Straßen und Plätzen, die sogenannte Hy-

bridkarte (hybrid, siehe Abbildung 5.10).

Page 20: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5.2 Die Where-to-Eat-App

249

5

Abbildung 5.7 Kartentyp »roadmap«

Abbildung 5.8 Kartentyp »terrain«

Page 21: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

250

Abbildung 5.9 Kartentyp »satellite«

Abbildung 5.10 Kartentyp »hybrid«

Page 22: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5.2 Die Where-to-Eat-App

251

5

Markierungen

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

rungen einzeichnen (siehe 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, und

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)

sowie 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, und ebenso wenig die Zah-

len größer als 9. Bei kleinen und winzigen Markern funktioniert das Label nicht.

Abbildung 5.11 Die Marker in der Karte

Page 23: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

252

Natürlich ist es auch möglich, zwischendurch den Markierungsstil zu wechseln (siehe

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

Ihnen wird aufgefallen sein, dass hier der center- und der zoom-Parameter fehlen.

Wenn Sie einen oder mehrere Marker definieren, kann die Static Maps-API den Kar-

tenausschnitt 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 https://developers.google.com/maps/documen-

tation/staticmaps/?hl=de-DE.

Da der Nutzer Ihrer WebApp dazu in der Lage sein soll, die Karte zu zoomen und zu

bewegen, bietet sich die Einbindung einer dynamischen Karte an – über die Google

Maps JavaScript-API.

Page 24: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5.2 Die Where-to-Eat-App

253

5

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/ her

gewohnt sind (siehe Abbildung 5.13). Deren Verwendung ist, ebenso wie die Verwen-

dung der Static Maps-API kostenlos; das Kartenmaterial und der JavaScript-Code wer-

den auf dem Google-Server gehostet und von dort eingebunden. Ihnen entstehen

also keine zusätzliche Hosting-Kosten.

Abbildung 5.13 Die Google Maps JavaScript-API

Um eine Google-Karte zu Ihrer WebApp 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;}

Page 25: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

254

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);});});

Listing 5.3 Google-Karte initialisieren und anzeigen

Abbildung 5.14 Eine interaktive Google-Karte auf dem iPhone (links) und unter (Android)

rechts.

Page 26: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5.2 Die Where-to-Eat-App

255

5

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

position des Kartenausschnitts, hier die Koordinaten des Benutzers.

Anschließend legen Sie ein neues Objekt vom Typ google.maps.Map an, dem Sie als Para-

meter das Platzhalterelement mit der ID-Karte und das optionen-Objekt übergeben.

Herzlichen Glückwunsch! Sie haben soeben Ihre erste dynamische Karte erstellt

(siehe Abbildung 5.14)! Probieren Sie sie gleich aus!

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-Dokuments, also asynchron, nachgeladen

werden kann. Legen Sie jetzt eine neue Textdatei an, und nennen Sie sie restaurants.

json. In diese Datei schreiben Sie anschließend 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

}},"Burgeramt": {"Kategorie": "Burger","Position": {"Longitude": 13.459539,"Latitude": 52.510299

}},"Pesto i Pizza": {"Kategorie": "Pizza","Position": {"Longitude": 13.413776,"Latitude": 52.511971

}}

}

Listing 5.4 Restaurantliste als JSON-Datei

Page 27: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

256

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. Die Daten 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/, siehe Abbildung 5.15).

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

Mithilfe von Zepto können Sie die Daten von Ihrem Server laden. Hierzu 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){

...});});

Listing 5.5 Daten werden mit getJSON abgerufen

Der Funktion .getJSON übergeben Sie zwei Parameter: den Pfad bzw. die URL Ihrer

JSON-Datei und eine Funktion, die ausgeführt werden soll, sobald die Daten geladen

worden sind. Dieser sogenannten Callback-Funktion wird das JSON-Objekt als Vari-

able json übergeben.

Page 28: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5.2 Die Where-to-Eat-App

257

5

Die Zepto-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 also nun drei Restaurants in

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

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

setzen:

marker = new google.maps.Marker({map: karte,position: new google.maps.LatLng(daten.Position.Latitude,daten.Position.Longitude),animation: google.maps.Animation.DROP});

Listing 5.6 Einen Marker in der Google-Karte setzen

Sie erzeugen nun ein neues Objekt vom Typ google.maps.Marker, dem Sie zwei Para-

meter übergeben: den Namen des Map-Objekts, auf dem die Marker gesetzt werden

sollen, und die Position des Markers. Diese Parameter 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.

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

schnitt anlegen. Hierzu müssen Sie zunächst ein Platzhalterelement im HTML-Code

anlegen:

<section id="uebersicht"><h2>Restaurants in der N&auml;he</h2><ul><!-- Wird dynamisch befüllt -->

</ul></section>

Listing 5.7 HTML-Snippet der Restaurantliste

Ä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 Zepto

die Restaurants eingetragen:

$('#uebersicht').find('ul').append('<li class="'+daten.Kategorie+'">'+restaurant+'</li>');

Listing 5.8 Restaurants werden dynamisch in die Liste eingetragen

Page 29: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

258

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 (siehe Abbildung 5.16).

Abbildung 5.16 Unformatierte Restaurantliste, aus der JSON-Datei geladen

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 Zepto-Befehl um folgenden Code:

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>');

Listing 5.9 Vorschaubilder in die Liste einfügen

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

Page 30: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5.2 Die Where-to-Eat-App

259

5

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 die Latitude

der beiden Punkte. Diese rechnen Sie anhand des durchschnittlichen Erdradius in

Distanzen vom Nullpunkt um, damit Sie anschließend, mithilfe des Satzes des Pytha-

goras, eine Entfernung der beiden Punkte berechnen können. Als JavaScript-Funk-

tion 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;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";}};

Listing 5.10 Entfernungsberechnung in JavaScript

Sie übergeben der Funktion vier Parameter: Ihre Longitude und Latitude und die

Longitude und Latitude des entfernten Punktes. Nach etwas mathematischer Magie

gibt die Funktion eine Zeichenkette zurück, die die Luftlinie zwischen beiden Positi-

onen angibt, 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

Zepto-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>');

Listing 5.11 Entfernung in der Liste anzeigen

Page 31: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

260

In unserer Restaurantliste sieht das Ganze nun so wie in Abbildung 5.17 aus.

Abbildung 5.17 Schon besser – Liste mit Kartenausschnitt und Entfernung

5.2.5 Die Programmoberfläche

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

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

HTML-Code. Sie haben bereits die Platzhalter für die Karte und die Restaurantliste

angelegt. Fügen Sie nun noch einen weiteren Bereich für die Optionen hinzu:

<section id="karte"></section><section id="uebersicht"><h2>Restaurants in der N&auml;he</h2><ul><!-- Wird dynamisch befüllt --></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=

Page 32: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5.2 Die Where-to-Eat-App

261

5

"Sushi"></span></label></li></ul></section>

Listing 5.12 Optionsbereich als HTML-Code

Dieser Bereich besteht aus einer unsortierten Liste mit den Restaurantkategorien, die

jeweils eine angewählte Checkbox pro Listeneintrag enthält. Um das Layout küm-

mert 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;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;}

Listing 5.13 CSS sorgt für das App-gerechte Aussehen

Page 33: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

262

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 aufrufen,

sehen Sie zunächst nur eine weiße Seite, doch dazu gleich mehr. Die Sektion #karte

erhält als Hintergrundbild einen kleinen Ladekreis, der zentriert angezeigt wird. Dies

hat die folgende Bewandtnis: Abhängig von der Dauer der Positionsbestimmung

und der Ladezeit der Google Maps JavaScript-API kann es einige Sekunden dauern,

bis die gewünschte Karte angezeigt wird. Um dem Nutzer anzuzeigen, dass etwas

geladen wird, dreht sich der Ladekreis in der Bildschirmmitte. Dieser verschwindet

von allein, sobald die Karte geladen ist und den Hintergrund verdeckt. Auf http://

ajaxload.info können Sie aus verschiedenen Modellen wählen, eigene Farben ein-

stellen und kostenlos herunterladen.

Damit die Karte beim Start der App angezeigt wird, weisen Sie ihr per Zepto die Klasse

aktiv zu:

$('#karte').addClass("aktiv");

Um zwischen den einzelnen Sektionen zu wechseln, benötigen Sie noch eine Sym-

bolleiste im App-Stil.

5.2.6 Eine Symbolleiste einfügen

Die Symbolleiste ist ein vertrautes und daher für Ihre WebApp ideales Navigations-

element. 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 nun den 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>

Listing 5.14 Symbolleiste mit nav-Element

Page 34: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5.2 Die Where-to-Eat-App

263

5

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-Code 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;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;

Page 35: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

264

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.15 Das Stylesheet der Symbolleiste

Jetzt sieht Ihr Navigationselement schon eher nach einer Symbolleiste aus (siehe

Abbildung 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 Photoshop-

Dateien unter http://iconsweets2.com/ herunterladen und sie (mit Hinweis auf die

Website) kostenlos in Ihren Projekten verwenden.

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;});

Listing 5.16 Umschalten der Navigationsbereiche mit JavaScript

Abbildung 5.18 Die fertige Navigationsleiste

Page 36: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5.2 Die Where-to-Eat-App

265

5

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 WebApp »an«. Abhilfe schafft

auch hier wieder CSS (siehe 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;}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;}

Listing 5.17 Stylesheet der Restaurantliste

Page 37: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

266

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 einige Spezialregeln vonnöten, die nur für die

Übersicht bzw. die Optionen Anwendung finden:

#uebersicht ul {overflow: hidden;-webkit-background-clip: padding;}#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;

Page 38: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5.2 Die Where-to-Eat-App

267

5

width: 34px;margin: 0;}

Listing 5.18 CSS-Anpassungen für den Optionsscreen

Sorgen Sie nun mithilfe von JavaScript dafür, dass sich das An- bzw. Abwählen

bestimmter Restauranttypen in den Optionen in der Übersicht niederschlägt (siehe

Abbildung 5.20):

$('#optionen input[type*=checkbox]').on('change', function(){$('#uebersicht li.'+this.className).toggleClass('versteckt');});

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

Restaurants in der Liste die Klasse versteckt hinzugefügt oder sie entfernt.

Abbildung 5.20 Die Liste der Optionen auf dem iPhone und unter Android

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

Page 39: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

268

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, und die Aktivierung des Vollbildmodus ist ebenfalls ratsam.

Schreiben Sie hierzu, wie bereits erläutert, 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 (siehe Abbil-

dung 5.21) sowie einen Ladebildschirm erstellen (siehe Abbildung 5.22) und beide im

head-Bereich des Dokuments verknüpfen.

Abbildung 5.21 Das App-Symbol, gestaltet mithilfe des Icon-Templates von

http://appicontemplate.com/

Page 40: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5.2 Die Where-to-Eat-App

269

5

<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)" />

<link rel="apple-touch-startup-image"href="/bilder/splash-iphone.png" />

Listing 5.19 Verknüpfte Symbole und Ladebildschirm

Abbildung 5.22 Mit einem Bildbearbeitungsprogramm, wie z. B. Photoshop, bereiten Sie

einen Ladebildschirm vor.

Page 41: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

270

Wählen Sie für Ihre App zu guter Letzt einen prägnanten Namen, der nicht länger als

zwölf Zeichen ist, und definieren Sie diesen im Title Ihrer WebApp:

<title>Where to Eat</title>

Fertig! Die App funktioniert sowohl auf einem Smartphone (siehe Abbildung 5.23) als

auch auf Tablets (siehe Abbildung 5.24). Durch die absolute Positionierung der Ele-

mente am Bildschirmrand ist sie unabhängig von der Auflösung ihres Geräts, funkti-

oniert also ohne Probleme auch auf dem größeren Display Ihres iPhones 5.

5.3 More Fun mit Geodaten

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

ansprechende Apps zu kreieren. Darüber hinaus gibt es von verschiedenen Anbie-

tern Schnittstellen, die es Ihnen ermöglichen, die Benutzerposition für unterschied-

lichste Anwendungsfälle zu nutzen. So können Sie z. B. die Where-to-Eat-App mit

Abbildung 5.23 Die App funktioniert

problemlos auch unter Android

Abbildung 5.24 Die App auf dem iPad

Page 42: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5.3 More Fun mit Geodaten

271

5

einer Liste aus der Yelp-Bibliothek füttern, in der weltweit unzählige Restaurants

gespeichert sind. Im Folgenden wollen wir Ihnen einige kostenlose APIs vorstellen,

die ortsbezogene Daten bereithalten.

5.3.1 Yelp-API

Seit 2004 bietet die Plattform Yelp Restaurant- und Ladenbesitzern die Möglichkeit,

ihre Örtlichkeiten im Netz zu präsentieren und von Benutzern bewerten zu lassen.

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

gen abzurufen und nach bestimmten Kriterien zu filtern (siehe Abbildung 5.25); eine

ausführliche Dokumentation in englischer Sprache finden Sie unter http://www.

yelp.com/developers/documentation/v2/overview.

Abbildung 5.25 Die Yelp-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 (siehe Abbildung 5.26); eine englischsprachige Dokumentation finden Sie

unter https://developer.foursquare.com/.

Page 43: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

272

Abbildung 5.26 Die foursquare-API

5.3.3 Google Places

Ähnlich wie bei Yelp können Nutzer auch bei Google Places besuchte Örtlichkeiten

bewerten und empfehlen. Seit Kurzem bietet der Service eine kostenlose API an

(siehe Abbildung 5.27), die sich aber noch in der Entwicklungsphase befindet. Eine

kostenlose Entwicklervorschau finden Sie unter https://developers.google.com/

maps/documentation/javascript/places?hl=de-DE.

5.3.4 Twitter-API

Überall auf der Welt nutzen Menschen den beliebten Microblogging-Dienst Twit-

ter, 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ön-

nen – z. B. um zu erfahren, was das aktuelle Stadtgespräch ist. Per API können Sie

diese Funktion in Ihrer eigenen WebApp nutzen (siehe Abbildung 5.28); eine eng-

lischsprachige Dokumentation finden Sie unter https://dev.twitter.com/docs/api.

Page 44: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5.3 More Fun mit Geodaten

273

5

Abbildung 5.27 Die Google Places-API

Abbildung 5.28 Die Twitter-API

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 jeweilige

Page 45: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

5 Positionsbestimmung

274

Foto entstanden ist. Eine kostenlose API bietet Ihnen die Möglichkeit, nach Fotos aus

Ihrer Umgebung zu suchen – ideal für mobile WebApps (siehe Abbildung 5.29); die

englischsprachige Dokumentation finden Sie unter http://www.flickr.com/services/

api/.

Abbildung 5.29 Die Flickr-API

Geofunktionen sind in den meisten Apps nicht mehr wegzudenken. Stellen Sie sich

nur mal die vielen unterschiedlichen Einsatzmöglichkeiten vor: vom Restaurant-Fin-

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

digitalen GPS-gestützten Schnitzeljagd mit Ihren Freunden. Da geht einiges!

Page 46: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Index

513

Index

.apk-Datei.................................................................... 454

.getCurrentPosition()............................................. 241

.htaccess ............................................................. 322, 339

.ipa-Datei................................................... 453, 454, 477

.p12............................................................................... 448

:active............................................................................ 113

:first-child...................................................................... 51

:last-child ....................................................................... 51

@font-face ................................................................. 174

@font-face Generator ............................................ 175

@media............................................................... 133, 134

@-webkit-keyframes ............................................ 204

3D-Animation.......................................................... 436

3D-Effekt .................................................................... 464

3G-Verbindung ......................................................... 69

4-Finger-Swipe.......................................................... 110

5-Finger-Pinch .......................................................... 110

A

Abbinder ..................................................................... 218

Abbuchungsvorgang ............................................... 27

Abzeichen................................................................... 122

Achsenbewegung .................................................... 277

Achsenwert................................................................ 282

Acid2-Test.................................................................. 493

acronym........................................................................ 43

ActiveX-Objekt ................................................. 182, 192

Adaptionsrate............................................................. 38

Add Key ...................................................................... 450

Add2Home................................................................ 483

addClass ....................................................................... 96

Administratorenrecht............................................. 32

Adobe.......................................................................... 438

Adobe Edge Animate .............................................. 211

Adobe Flash ......................................................... 38, 174

Adobe InDesign........................................................ 162

Adobe PhoneGap Build......................................... 445

Adobe Photoshop............................................. 47, 235

Adobe Typekit........................................... 175, 176, 179

Adobe-ID...................................................................... 211

Adressleiste...................................................... 267, 268

Advanced Audio Codec High Efficiency......... 195

Advanced Audio Codec Low Complexity ...... 195

Advanced Audio Coding (AAC).......................... 193

Ajax ................................................................................. 89

Konzept..................................................................... 85

Ajax (Forts.)

Versand .................................................................. 374

Ajax Spinner............................................................... 121

Ajax-Request ............................................................ 407

Aktien-App................................................................. 129

Aktiengraph .............................................................. 129

alert ............................................................................... 282

All in one .................................................................... 107

Alleinstellungsmerkmal siehe USP .................. 137

Android

Besitzer ..................................................................... 34

Gerät .......................................................................... 66

Marketplace ......................................................... 485

SDK........................................................................... 445

Version....................................................................... 32

Android Developer ................................................. 479

Android Developer Console ..................... 479, 480

Android Marketplace....................................... 27, 451

Android-Fans ............................................................. 135

Angry Birds................................................................ 491

Animation ........................................................... 198, 211

Animationsdurchlauf ........................................... 199

Animationsrichtung.............................................. 205

Anschnitt ..................................................................... 165

Anwendung

native ...................................................................... 435

Anwendungsbereich .............................................. 136

Anwendungsfall

halbmobil ............................................................... 127

Apache ...................................................................... 16, 17

Apache Cordova ...................................................... 435

Apache Foundation................................................ 438

API ................................................................................. 254

API_KEY ...................................................................... 394

API-Schlüssel............................................................. 393

APK-Format ............................................................... 481

App

Where to Eat ......................................................... 244

App Store ....................................................................... 27

Zulassungsrichtlinien ....................................... 476

App-Datei .......................................................... 476, 477

append........................................................................... 97

appendTo .................................................................... 361

App-Framework...................................................... 469

App-Icon .............................................................. 81, 468

App-ID.......................................................................... 449

Apple Universal ....................................................... 189

Page 47: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Index

514

Apple-Entwickler-Account ................................. 446

Apple-ID ...................................................................... 477

Apple-Profil............................................................... 446

apple-touch-icon-precomposed.......................... 83

Apple-Zertifikat....................................................... 446

Application Loader ................................................ 476

application-Objekt .................................................. 383

App-Schema ............................................................... 115

App-Store...................................................................... 26

Array...................................... 385, 386, 398, 404, 408

Aside Magazine.............................................. 160, 483

aside-Element ............................................................ 131

Asynchron .................................................................. 255

Asynchronous JavaScript And XML................... 89

attr.................................................................................. 96

Audio.................................................................. 192, 469

Audio Interchange File Format.......................... 195

Audioformat.............................................................. 195

Auflösung................................................................... 128

Automotive Agenda............................................... 471

autoplay ...................................................................... 184

B

background-size ............................................... 58, 287

Badge............................................................................ 122

BakerFramework .................................. 469, 470, 471

Barcodescanner....................................................... 456

Base64-Format.......................................................... 107

Baseline-Profil .......................................................... 187

Bedienanweisung.................................................... 146

Bedienelement .................................................. 24, 140

Bedienmuster .................................................. 120, 140

Bedienoberfläche ........................................... 140, 341

Bedienschema ........................................................... 141

before............................................................................. 97

beginPath ................................................................... 227

Benutzer...................................................................... 138

Benutzerablauf........................................................ 140

Benutzeroberfläche........................ 30, 136, 147, 212

Benutzerposition..................................................... 242

Benutzerschemata................................................. 109

Benutzer-Workflow ............................................... 140

Berners-Lee, Tim........................................................ 37

Beschleunigungskurve ......................................... 337

Betriebsbedingung ................................................. 136

Bewegung ................................................................... 276

Bewegungsachse...................................................... 278

Bewegungssensor ........................ 203, 275, 435, 442

Bezahlprozess ...................................................... 27, 29

bezierCurveTo .......................................................... 228

Bézierkurve................................................................ 228

Bildergalerie .............................................................. 424

Bildschirmauflösung ............................................... 65

Bildschirmtastatur ................................................... 67

Bit-Rate......................................................................... 187

Blackberry ..................................................................... 31

Blindtextgenerator.................................................. 157

blur.................................................................................. 94

Bookmark................................................................... 483

Bookmark-Funktion ............................................. 406

Bookmarklet ............................................................. 323

Bootstrap ..................................................................... 411

Bootstrap-Raster ..................................................... 432

border-radius ...................................................... 55, 459

Box ................................................................................ 418

box-shadow........................................................... 56, 59

Browserentwicklung................................................ 38

Browsermarkt.............................................................. 32

Browser-Plug-in ......................................................... 38

Browserspiel.............................................................. 235

Bundle ID.................................................................... 474

Button ........................................ 111, 140, 219, 419, 459

button-Element ......................................................... 111

C

CACHE......................................................... 319, 320, 321

Cache-Größe ............................................................. 320

Cache-Manifest ......................................................... 319

Cache-Manifest-Datei............................................. 319

Caching-Mechanismus .......................................... 319

Calhoun, David .......................................................... 78

Calibri........................................................................... 501

Call to Action ............................................................. 218

Callback-Funktion................................. 241, 256, 390

Camera+ ........................................................................ 28

Canvas-Bibliothek................................................... 235

canvas-Element ....................................................... 223

Carousel ................. 117, 118, 129, 381, 406, 407, 408

Carousel-View.......................................................... 406

Ceasar Easing Animation Tool .......................... 202

center ............................................................................. 43

Certificates Siehe Zertifikat................................. 446

change ........................................................................... 94

Checkbox.............................................................. 51, 501

Claim ............................................................................. 137

Clear............................................................................... 123

click ................................................................................. 93

Codebasis ..................................................................... 30

Codecs........................................................................... 183

Codiqa.......................................................................... 378

Page 48: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Index

515

Codiqa-Interface-Builder..................................... 380

Comic Sans.................................................................. 172

Context........................................................................ 223

controls ....................................................................... 184

Creative Commons....................................... 346, 459

CSS................................................................................... 44

Befehle....................................................................... 45

Rastersystem........................................................ 149

CSS3................................................................................. 44

Effekte........................................................................ 55

CSS3-Definition.......................................................... 64

CSS-Animation.......................................................... 211

CSS-Animations....................................................... 199

CSS-Transitions........................................................ 199

Cufon ............................................................................ 174

Cursor.......................................................................... 220

D

Darstellungstechnologie........................................ 32

data-add-back-btn .................................................. 364

data-back-btn-text ................................................. 364

data-icon ...................................................................... 351

datalist ........................................................................... 43

data-position............................................................ 350

data-role...................................................................... 345

data-tap-toggle ........................................................ 350

data-theme................................................................ 350

data-transition ......................................................... 352

Date.now() .................................................................. 333

Dateisystem................................................................ 69

Datenbank.................................................................. 358

dblclick........................................................................... 93

Deckkraft............................................................. 214, 216

Default Layout........................................................... 157

Definitionssprache ................................................... 37

Design Made in Germany ................................... 180

Designprinzipien.................................................... 504

Devices........................................................................ 448

Diagramm ..................... 235, 381, 393, 396, 397, 402

Diagrammachse...................................................... 398

Diashow........................................................................ 118

DIN 69901................................................................... 136

Document Object Model........................................ 88

DOM-Baum.................................................................. 88

DOM-Objekt .............................................................. 237

Don't Listen, observe ............................................. 146

DoubleTouch............................................................ 109

Drag & Drop....................................................... 119, 432

Droid Sans ................................................................. 388

Drop-down-Feld........................................................ 371

E

ease-in................................................................. 202, 216

ease-in-out ................................................................. 202

ease-out ....................................................................... 202

e-Book .......................................................................... 160

EDGE............................................................................... 69

Eingabefeld ...................................................... 140, 502

Einkaufszettel ........................................................... 326

Einsatzort .................................................................... 135

Ein-Tasten-Telefon ................................................... 30

Elevator Pitch ............................................................ 136

Elternelement............................................................. 49

E-Mail ............................................................................ 371

E-Mail-Header........................................................... 376

Embed-Code .............................................................. 189

Endlosschleife .......................................................... 205

Entfernungsberechnung ..................................... 258

Entwickler

Account ................................................ 446, 472, 479

Schlüssel................................................................. 447

Zertifikat ................................................................ 446

Entwurfssoftware..................................................... 141

Entwurfs-WebApp ................................................... 141

Erdradius .................................................................... 259

Erfolgsmeldung ........................................................ 377

Erwartungshaltung .................................. 115, 121, 135

Evans, Caleb............................................................... 238

EventHandler .................................................... 93, 465

EventListener......................... 233, 333, 335, 338, 401

Ext JS............................................................................ 380

Extra High Density ................................................... 66

Extra Large Screen .................................................... 66

F

Facebook...................................................................... 118

Fahrinfo-App.............................................................. 135

Fahrstuhlfahrt ........................................................... 136

FALLBACK.................................................................... 319

Farbe............................................................................. 120

Farbenblindheit ........................................................ 121

Farbtransparenz ...................................................... 225

Feed............................................................................... 284

Fehlberührungen .................................................... 338

Fernbedienung.......................................................... 123

FF Unit ......................................................................... 180

figcaption ..................................................................... 42

figure.............................................................................. 42

FileZilla ........................................................................... 16

fill................................................................................... 228

Page 49: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Index

516

fillRect .......................................................................... 224

fillText......................................................................... 230

Financial Times........................................ 29, 320, 437

Fingerbewegung...................................................... 232

Fingerkuppe .............................................................. 110

first-child ....................................................................... 51

Flash of Unstyled Content ................................... 105

Flash � s. Adobe Flash

Flash-Plug-in ............................................................. 182

Flash-Widget.............................................................. 183

Flavius Josephus ..................................................... 204

Flick............................................................................... 110

Flickr 58, 157, 273, 275, 279, 283, 284, 285, 288, 289,

290, 439, 459

Account................................................................... 285

Feed ......................................................................... 284

Fotostream........................................................... 284

ID............................................................................... 285

Flickr-API..................................................................... 274

Flugmodus.................................................................. 317

focus ............................................................................... 94

font.................................................................................. 43

Font-Service................................................................ 175

font-size ........................................................................ 47

FontSquirrel................................................................ 175

Fontstack .................................................................... 501

font-style .................................................................... 179

font-weight ................................................................ 179

footer.............................................................................. 49

Formelemente.......................................................... 372

Formular ..................................................................... 342

Formulardaten ......................................................... 373

Förster-App................................................................ 124

Fotogalerie-App ...................................................... 350

FOUC............................................................................. 105

foursquare................................................................... 271

foursquare-API .......................................................... 271

Frage-Antwort-App................................................ 140

frame .............................................................................. 43

Frame-Rate................................................................. 187

Framework................................................................. 341

Franchise..................................................................... 167

FTP-Server .................................................................... 16

Fullscreen-Option ................................................... 385

Funkloch ...................................................................... 317

Funktionsbeschreibung ....................................... 136

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

Fußzeile...................................................................... 349

G

Game-Engines .......................................................... 235

GDlib ............................................................................ 235

Gebühr......................................................................... 437

Geodaten .................................................................... 270

Geofunktion .............................................................. 274

Geolocation .............................................................. 260

Geolocation-App ..................................................... 267

Geoposition............................................................... 239

Georgia ......................................................................... 172

Gerätehardware......................................................... 30

Geschlossenes System ............................................ 28

Geschwindigkeitszuwachs ................................... 319

Gestaltungsprinzip................................................. 109

Geste.............................................................................. 122

Gesten ................................................................... 30, 110

getContext ................................................................. 224

getJSON ................................................................ 99, 361

Git .................................................................................. 452

Git Repository ........................................................... 451

Gittermodell � s. Wireframe

Global Positioning System.................................. 239

Google Analytics ..................................................... 437

Google Checkout ..................................................... 481

Google Mail ........................................................... 23, 24

Google Maps ............................................................. 246

Google Maps JavaScript-API .............. 252, 253, 262

Google Music ............................................................... 27

Google Places............................................................ 272

Google Play ................................................................... 27

Google Web Font Directory ................................. 175

Google Web Fonts.................................................... 176

google.maps.Marker ............................................... 257

Google-Places-API................................................... 273

GPS................................................................................ 239

Abfrage ................................................................... 244

Empfänger............................................................. 239

Koordinate ............................................................ 369

Graphen ...................................................................... 235

Gravitation ................................................................ 276

Greenwich ................................................................. 240

Grid Layout ................................................................. 412

Grid-Element ............................................................ 164

Grundlinienraster.................................................... 154

GUI-Template ........................................................... 148

Gummibandeffekt..................................................... 75

Gutenberg ................................................................... 172

Gutters.......................................................................... 154

Page 50: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Index

517

H

H.264 ............................................................................ 187

halbmobil ........................................................... 123, 135

Hallo Welt............................................................ 86, 383

Handskizze................................................................. 142

Handysendemast .................................................... 239

Haptik............................................................................ 112

Hardwarefunktion .................................................. 455

Hardwarekomponente ......................................... 437

Hashtag ...................................................................... 420

Hauptpfad .................................................................. 321

Header........................................................................... 131

header-Element.......................................................... 49

Helvetica.................................................................... 388

HEX............................................................................ 47, 57

Hey Ya .......................................................................... 275

hide ................................................................................. 98

High Density .............................................................. 66

Highscore .................................................................. 469

Hilfslinie...................................................................... 149

Hintergrundbild ................................................. 44, 59

Hintergrundfarbe...................................................... 44

Hintergrundmusik ........................................ 124, 196

Hintergrundmuster ............................................... 347

Hintergrundprozess................................................. 26

Hirnstrom .................................................................. 145

Home-Bildschirm............................................. 81, 503

Home-Button........................................................... 406

Hörsaal......................................................................... 124

hover ....................................................................... 68, 93

HTC................................................................................... 31

htdocs.............................................................................. 15

HTML5 ........................................................................... 37

Formularfeldtypen............................................... 78

Showcase.................................................................. 33

HTML5-Apps................................................................ 33

HTML-MP3-Player................................................... 195

Hybridkarte .............................................................. 248

Hyperlink...................................................................... 37

Hypertext ..................................................................... 37

Hypertext Markup Language............................... 37

I

Icon ...................................................................... 352, 498

Icon Sweets............................................................... 264

iconMask.................................................................... 389

id....................................................................................... 48

IDC.................................................................................. 30

iframe........................................................................... 189

ImageMagick ............................................................ 235

ImageOptim .............................................................. 103

Indikator..................................................................... 220

Infobox......................................................................... 134

Infokasten ................................................................... 131

Inhaltsverzeichnis ................................................. 406

initial-scale ................................................................... 81

innerHeight ................................................................. 87

innerWidth .................................................................. 87

input ............................................................................... 42

Instagram............................................................ 25, 420

Instant Messenger .................................................. 196

Integer ......................................................................... 396

Interaktive Google-Karte ..................................... 254

Interaktivität............................................................... 85

Interface...................................................................... 120

Interface-Builder ..................................................... 378

Interface-Element ................................................... 379

Interface-Framework .............................................. 341

Interfaces ............................................................. 110, 115

Internet Explorer ............................................. 32, 492

Internetverbindung ................................................ 317

Intros............................................................................. 124

Investor ........................................................................ 136

iOS Provisioning Portal ........................................ 446

iOS-Style ...................................................................... 341

IP-Adresse ..................................................................... 18

iPhone Mockup......................................................... 141

iTunes Connect ........... 472, 473, 476, 477, 478, 479

App ........................................................................... 472

J

Java............................................................................... 380

JavaScript ...................................................................... 86

Frameworks ............................................................ 89

Konsole..................................................................... 92

Syntax ....................................................................... 86

JavaScript-Interaktion ............................................. 111

jCanvas ........................................................................ 237

JPEG ............................................................................... 101

jPlayer .......................................................................... 194

jqPlot ............................................................................ 235

jQTouch ...................................................................... 380

jQuery ........................................................................... 221

Plug-in..................................................................... 282

jQuery Mobile............................................................ 341

JSON................................................... 256, 283, 285, 358

API ............................................................................ 393

Aufruf ...................................................................... 285

Callbacks ................................................................ 396

Page 51: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Index

518

JSON (Forts.)

Feed ................................................................ 393, 394

Format ........................................................... 255, 394

Objekt ...................................................................... 256

Validator................................................................ 256

JSON-Datei.................................................................. 258

JSON-Format............................................................... 99

JSONLint ...................................................................... 256

JSON-Objekt ............................................................... 324

JSONP-Request ......................................................... 395

JSONStore ................................................................... 397

K

Kachel.......................................................................... 497

Kamera ....................................................................... 440

Kameraaufruf........................................................... 440

Karte ................................................................... 206, 244

Ausschnitt..................................................... 248, 252

dynamische.................................................. 246, 255

interaktive ............................................................. 253

Kartenmaterial................................................... 246

statische ................................................................ 246

Typ............................................................................ 255

Karussell....................................................................... 117

keydown........................................................................ 94

Keyframe ................................................. 199, 203, 336

keygen............................................................................ 43

keypress ........................................................................ 93

keyup.............................................................................. 94

Kill-Switch .................................................................... 29

Klasse

verschachtelte........................................................ 49

Klassen..................................................................... 48, 51

Klassendefinitionen................................................. 49

Klassenname............................................................... 50

Kollektion ................................................................... 176

Kolumnentitel.......................................................... 169

Kommandozeilentool............................................. 18

Kommunikationskonzept .................................... 137

Kompass..................................................................... 244

Komplex-symbiotisch............................................ 119

Konkurrenz................................................................. 137

Kontaktformular ...................................................... 371

Kontaktliste ................................................................ 118

Kontaktseite.............................................................. 342

Kontrast....................................................................... 124

Konverter.................................................................... 189

Konzeption ....................................................... 109, 134

Kopfzeile.................................................................... 405

Korpi, Joni.................................................................... 151

L

Ladebalken.................................................................. 121

Ladebildschirm ........................................................ 268

Ladekreis...................................................................... 121

Ladezeit ........................................................................ 177

Laker Compendium ..................................... 469, 470

Laker Starter Pack .................................................. 470

Landscape-Modus..................................................... 66

Large Screen ................................................................ 66

Lastenheft ................................................................... 136

Latitude ...................................................................... 240

Launch-Funktion ................................. 383, 384, 405

Lautstärketaste .......................................................... 28

Leckerli One............................................................... 348

Lehni, Jürg .................................................................. 237

Leonello, Chris.......................................................... 235

LESS CSS ........................................................................ 151

Less CSS Framework................................................. 151

LG...................................................................................... 31

Lichtverhältnis.......................................................... 123

Lifestyle-Magazin.................................................... 126

Lifestyle-Parameter................................................. 138

Linear ........................................................................... 202

lineTo ........................................................................... 228

Lipsum........................................................................ 200

Liste ...................................................................... 355, 363

Listeneintrag............................................................. 140

Listenelemente ......................................................... 351

Listenrand ................................................................... 122

listview ........................................................................ 358

Lizenz ........................................................................... 180

load ................................................................................. 95

Local Storage.......................... 324, 325, 333, 334, 335

localStorage-Objekt................................................ 324

Logo .............................................................................. 425

Lokale Suchmaschine............................................ 239

Lokaler Speicher ...................................................... 324

Longitude .................................................................. 240

LongTouch ................................................................. 109

Low Density................................................................. 66

LTE ................................................................................... 69

M

Magazin ....................................................................... 126

Magazin-App................................................................ 27

Magazine Grid .......................................................... 160

Magazin-Frameworks.............................................. 28

Magazinlayout ......................................................... 168

Magazin-Mash-up.................................................. 403

Page 52: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Index

519

Magnetresonanztomograf .................................. 145

mail ............................................................................... 376

manifestR ................................................................... 323

mark................................................................................ 42

Marker.......................................................................... 257

Markierungsstil......................................................... 251

Marktforschung....................................................... 138

Marktumfeld..................................................... 136, 137

Mash-up ..................................................................... 403

Master Detail.............................................................. 118

maximum-scale......................................................... 81

Media Query......................................................... 61, 62

Medium Density....................................................... 66

Mehrspaltigkeit......................................................... 60

Menüleiste ................................................................. 425

meta-Tags.................................................................... 40

meter .............................................................................. 43

Microblogging-Service................................... 34, 272

Microsoft .................................................................... 491

Microsoft Visio.......................................................... 141

Midi-Kompositionen............................................. 192

Mikrofon............................................................. 30, 436

MiroVideoConverter.............................................. 187

Mitbewerber-Apps ................................................... 137

Mobilbereich ............................................................... 37

Mobile Layout................................................... 155, 159

Mobile Safari ......................................................... 33, 74

Mobile WebKit.......................................................... 185

Mobilgerät.................................................................. 123

Model-View-Controller........................................ 380

Modern UI .................................................................. 491

Modul.......................................................................... 469

Motorola........................................................................ 31

mousedown................................................................. 93

mousemove................................................................. 93

MouseOver................................................................. 110

mouseup....................................................................... 93

moveTo........................................................................ 227

MP3 ............................................................................... 193

Multimedia-Anwendungen ................................ 182

Multimedia-Element ............................................. 193

Muster.......................................................................... 347

MySQL................................................................... 16, 324

N

Native Anwendung................................................. 435

Native App.................................................................... 23

Nachteil ................................................................. 436

Native App (Forts.)

Vorteil ..................................................................... 436

navbar.......................................................................... 350

Navigationselement ............................................... 351

Navigationsgerät ..................................................... 239

Navigationsleiste .......................................... 264, 350

Navigationssystem ................................................ 239

navigator.geolocation ............................................ 241

Netbook ....................................................................... 123

Netscape ........................................................................ 32

NETWORK ................................................................... 319

Newsticker .................................................................. 121

Nirvana......................................................................... 317

Nokia ............................................................................ 445

Nokia Communicator ............................................. 30

Nokia Lumia 900 ..................................................... 492

Normal Screen ............................................................ 66

Noticia Text ............................................................... 348

notification ............................................................... 466

Notiz .............................................................................. 123

Nutzer-Flow............................................................... 140

Nutzerforum............................................................. 442

Nutzertest .................................................................. 144

Nutzerverhalten ...................................................... 437

Nutzerzentriertes Design ..................................... 138

O

Objective-C ....................................................... 437, 470

off .................................................................................... 99

Offline................................................ 124, 317, 326, 499

Offline-App ................................................................. 317

Offline-Datenbank.................................................. 324

Offline-Modus ........................................................... 317

Ogg Audio ................................................................... 193

Ogg Theora ................................................................ 186

OmniGraffle ............................................................... 141

on ..................................................................................... 99

ondevicemotion .............................................. 276, 277

opacity ........................................................................... 59

Open Source ................................................................. 33

OpenAppMarket ...................................................... 485

Open-Source-Framework .................................... 437

OpenType-Format ................................................... 175

Opera............................................................................... 32

Orientierung .............................................................. 275

Outer margins ........................................................... 154

Outkast ......................................................................... 275

output ............................................................................ 43

Overlays ...................................................................... 102

Page 53: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Index

520

P

Pagina........................................................................... 169

panel............................................................................. 385

Paper.js ........................................................................ 237

Papierprototyp......................................................... 142

Performancevorteil .................................................. 26

Pflichtenheft ............................................................. 136

PhoneGap.......................................................... 435, 456

Plug-in.................................................................... 456

PhoneGap Build .................................... 444, 445, 465

PHP..................................... 371, 372, 373, 374, 375, 376

Pinch............................................................................. 110

Pixelraster .................................................................. 237

Pixelverdopplung ................................................... 231

placeholder-Attribut .............................................. 328

Plattform....................................................................... 32

Android..................................................................... 32

iOS............................................................................... 32

Plattformunabhängig.............................................. 24

Playbook ........................................................................ 31

Play-Pause-Button ................................................. 190

Plug-in.......................................................................... 282

PNG-24......................................................................... 102

PNG-8 ........................................................................... 101

PngOptimizer ........................................................... 103

Pocket Island.............................................................. 119

Polaroid....................................................................... 275

Portraitmodus........................................................... 66

Position ................................................................. 44, 123

position.coords.accuracy ..................................... 243

position.coords.altitude....................................... 243

position.coords.altitudeAccuracy ................... 244

position.coords.heading...................................... 244

position.coords.speed .......................................... 244

position:fixed ............................................................. 75

Positionierung........................................................... 137

Positionsabfrage...................................................... 242

Positionsbestimmung .......................................... 239

Positionsdaten ........................................................ 368

Positionssensor....................................................... 436

poster ........................................................................... 185

Post-its......................................................................... 142

Präfix .............................................................................. 55

prepend ......................................................................... 97

preserve-3d............................................................... 209

Privater Schlüssel.................................................... 447

Profil ............................................................................ 446

Apple....................................................................... 446

Programmiersprache............................................. 437

Programmierung...................................................... 135

progress ........................................................................ 43

Prototyp....................................................................... 145

Provisioning.............................................................. 449

Provisioning Portal ................................................ 474

Provisioning Profil ................................................ 450

Pseudoklasse............................................................. 501

Pseudomobil...................................................... 123, 135

Public APIs ................................................................... 96

Publikation ................................................................ 126

Puckey, Jonathan .................................................... 237

Pupillenbewegung................................................... 145

Pythagoras................................................................. 259

Q

Querverweis ............................................................. 406

R

Radio-App................................................................... 196

Radiobutton ................................................................. 51

Raster .................................................................. 150, 495

Rastersystem ................................................... 149, 150

Reason Why................................................................ 137

Rechner ....................................................................... 130

wissenschaftlicher.............................................. 130

Red Bull ......................................................................... 34

Registerreiter .............................................................. 115

Regularie.............................................................. 29, 436

Reliefkarte .................................................................. 248

Reload .......................................................................... 425

remove .......................................................................... 98

removeClass................................................................ 97

Rendering Engine ................................................... 493

Reset .............................................................................. 152

Reset CSS..................................................................... 328

Responsive App ...................................................... 420

Responsive Webdesign .......................................... 411

Retina ............................................................................ 213

Retina-Displays ......................................................... 101

RGB ................................................................................. 47

RGBA ........................................................................ 57, 59

Rollball............................................................................ 31

root ................................................................................ 321

Rotate............................................................................ 110

rotate............................................................................ 229

rotateY ........................................................................ 209

Rot-Grün-Schwäche ................................................ 121

Route............................................................................ 368

Routenplanung ................................................ 366, 371

Rundungsfehler....................................................... 398

Page 54: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Index

521

S

Samsung ........................................................................ 31

Sandbox-Modell ........................................................ 85

Satellit .......................................................................... 239

Satellitenkarte ......................................................... 248

Schablonen ................................................................ 142

Schablonenmethode.............................................. 142

Schadsoftware ............................................................ 28

Schlagschatten ........................................................ 230

Schlüssel........................ 256, 324, 447, 448, 450, 451

Schlüsselbild............................................. 203, 211, 215

Schlüsselbund........................................................... 447

Verwaltung ........................................................... 447

Schnitt........................................................................... 217

Schrift................................................................... 171, 180

Schriftart .............................................................. 44, 214

Schriftdarstellung .................................................... 173

Schriftgestaltung ...................................................... 171

Schriftgröße................................................................. 44

Schriftschnitte........................................................... 177

Schriftstärke.............................................................. 501

Schriftstil ..................................................................... 177

Schüttelgeste............................................................. 281

Scroll............................................................................. 110

Scrollverhalten .................................................... 69, 76

Segoe UI...................................................................... 494

Seitenwechsel ........................................................... 345

Selection Colours..................................................... 154

Selektionsfarbe......................................................... 154

Selektor.......................................................................... 92

Sencha Touch................................................... 380, 381

Syntax ..................................................................... 382

Sencha Touch Charts ............................................. 393

Sensor.......................................................................... 469

Serien........................................................................... 398

Seriennummer........................................................ 448

Serververbindungen .............................................. 107

Session Storage ........................................................ 325

setTimeout................................................................. 293

Shake-Event .............................................................. 294

Sharky ............................................................................ 36

Shazam .......................................................................... 25

Shoji ............................................................................... 118

Ansicht ..................................................................... 118

show................................................................................ 98

Sicherheitsbedenken ............................................ 244

sIFR ................................................................................ 174

Signal............................................................................ 120

Signing........................................................................ 450

Silbentrennung.......................................................... 64

Situation ...................................................................... 123

Situationsbeschreibung .............................. 139, 140

Skeuomorphes Design.......................................... 494

Skin ............................................................................... 330

Skriptsprache............................................................ 372

SKU-Nummer ........................................................... 474

Slider ............................................................................. 341

Slideshow .......................................................... 222, 469

Small Screen ................................................................ 66

Smaller ........................................................................ 105

Smartcover ................................................................. 128

Social-Network-Anwendung ............................... 118

Soft-Hyphen ................................................................ 64

Softwareentwicklung ............................................. 136

Softwareschema ........................................................ 24

Sonnenlicht ................................................................ 124

Sounddatei ................................................................ 192

Soundeffekt ..................................................... 196, 466

Spalten ................................................................. 118, 416

Spiel ............................................ 119, 128, 235, 456, 457

Splashscreen ............................................................... 83

Spotlight-Suche ....................................................... 477

Stadtführer ................................................................. 135

Standardlayout ......................................................... 155

Standardstil ............................................................... 388

Startbildschirm ................................................ 116, 457

Static Maps-API ......................................................... 251

Statusleiste .................................................................. 82

Stern-App ..................................................................... 28

Store-Betreiber........................................................... 28

Storyboard .................................................................. 138

Storyboard-Methode .............................................. 139

Straßenkarte ............................................................. 248

String............................................................................ 396

strip_tags..................................................................... 375

stroke ........................................................................... 228

Stylesheet ..................................................................... 44

submit ........................................................................... 94

Subtle Patterns............................................................ 72

subtlepatterns .......................................................... 347

Suchfunktion ............................................................ 428

Suchmaschine ............................................................. 41

lokale ....................................................................... 239

Surfer-App................................................................... 124

SVG................................................................................ 223

Swipe ............................................................................. 110

switch-Anweisung .................................................. 461

Symbian ...................................................................... 445

Symbol ................................................................ 212, 495

Symbolleiste .................................................... 262, 264

Page 55: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Index

522

System

geschlossenes ......................................................... 28

Systemschrift............................................................. 172

T

Tab................................................................................. 381

Tablet............................................................................ 213

Apps .......................................................................... 127

Bildschirm............................................................... 135

Magazin ....................................................... 160, 402

Tablet Layout ............................................................. 155

Tabs............................................................... 115, 124, 417

Tageslicht.................................................................... 123

Tags................................................................................ 40

teehan+lax ................................................................. 148

Testablauf................................................................... 145

Testlabor ..................................................................... 145

Testperson.......................................................... 145, 146

Testsituation ............................................................. 145

Texteingabefeld .......................................................... 51

Textfeld ....................................................................... 219

Textur.......................................................................... 289

The Noun Project..................................................... 352

Theme .......................................................................... 431

ThemeRoller.............................................................. 378

Themes ....................................................................... 350

Thumbnail.................................................................. 423

time................................................................................. 42

Times New Roman................................................... 172

Tippen ......................................................................... 109

Titelleiste ............................................................. 114, 131

Titelzeile...................................................................... 134

To-do-App.......................................................... 317, 499

To-do-Liste ....................................... 317, 326, 327, 334

toggle.............................................................................. 94

toggleClass ................................................................... 97

Ton ................................................................................ 198

Toolbar.......................................................................... 116

toolbar-Element............................................. 385, 404

Tooltip................................................. 68, 110, 236, 484

Touch........................................................................... 109

Touch Charts ............................................................. 381

touchend.................................................................... 465

Touch-Gerät...................................................... 109, 134

Touch-Geste.............................................................. 203

touchIcon ................................................................... 485

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

Touchscreen ............................................................... 30

touchstart.......................................................... 338, 465

Trailer............................................................................ 211

Transformation ...................................................... 208

Triangulieren ............................................................ 239

Trident ......................................................................... 493

Trojaner......................................................................... 29

Tutorial-Ansicht ....................................................... 118

Tweets.......................................................................... 272

Twitter ................................................... 33, 34, 196, 272

Twitter Bootstrap..................................................... 411

Twitter Pitch............................................................... 136

Twitter-API................................................................. 272

Typografie .................................................................. 170

U

U-Bahn .......................................................................... 124

Übertragungsgeschwindigkeit ........................... 101

UDID ............................................................................. 448

UglifyJS ........................................................................ 103

UI Stencils ................................................................... 142

Umfrage ....................................................................... 138

Umgebung .................................................................. 124

Unique Selling Proposition siehe USP ............ 137

Updatezyklus ............................................................ 436

Usability-Labor ........................................................ 144

Userflow...................................................................... 140

user-scalable ................................................................ 81

USP................................................................................. 137

UTF-8 ...................................................................... 46, 175

V

var.................................................................................... 88

Vektorformat ............................................................ 223

Vektorgrafik .............................................................. 237

Vendor-Präfix ........................................................... 493

Verbindungsgeschwindigkeit ............................. 123

Verdana ........................................................................ 172

Verlaufsgenerator..................................................... 79

Version ......................................................................... 136

Verwendungsort ...................................................... 136

Vibrationsalarm ...................................................... 465

video-Element ........................................................... 183

Viewport ................................... 80, 84, 133, 406, 408

Vimeo .......................................................................... 189

Viren ............................................................................... 28

Vollbild ......................................................................... 131

Vollbildmodus ............................................................ 81

Vollbildvideos ........................................................... 133

Vollmobil..................................................................... 123

Vorüberlegung .......................................................... 135

Page 56: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Index

523

W

W3C-Konsortium ...................................................... 38

Wave............................................................................. 195

Wave-Dateien............................................................ 192

WebApp-Store........................................................... 485

Webeditor................................................................... 432

Webfonts..................................................................... 170

WebGL............................................................................ 70

WebKit ...................................................... 32, 37, 55, 199

-webkit-animation ................................................. 203

-webkit-animation-delay .................................... 205

-webkit-animation-direction............................. 205

-webkit-animation-duration ............................. 205

-webkit-animation-fill-mode.................... 205, 338

-webkit-animation-iteration-count................ 205

-webkit-animation-name.................................... 205

-webkit-animation-timing-function.............. 205

-webkit-appearance................................................. 112

-webkit-backface-visibility ................................. 209

-webkit-linear-gradient........................................... 79

-webkit-overflow-scrolling .................................... 76

-webkit-tap-highlight-color.................................. 114

-webkit-transform......................................... 206, 295

-webkit-transform-style ...................................... 209

-webkit-transition ................................................... 199

Webmailer.................................................................... 24

webOS .......................................................................... 445

Webschrift ................................................................. 180

Webserver...................................................................... 15

Webspace....................................................................... 15

Werkzeugleiste.......................................................... 116

Werteinhalt................................................................ 324

Wertepaar.......................................................... 256, 324

Werteschlüssel ......................................................... 257

Wetter-API................................................................. 394

Wetter-App........................................................ 381, 393

Wetterdaten............................................................... 393

Wetterdiagramm..................................................... 392

Wetterstation............................................................ 393

Wide Mobile Layout ............................................... 156

Wildcards.................................................................... 321

window-Element ....................................................... 87

Windows 8.................................................................. 491

Windows CE............................................................... 491

Windows Phone...................... 13, 142, 436, 438, 445

Windows Phone 7 .................................................. 492

Windows Phone 8 ................................................... 491

Windows Phone Store.......................................... 505

Windows RT............................................................... 491

Windows Vista.......................................................... 501

Wireframe .................................................................. 140

Modell ...................................................................... 141

Workflow .................................................................... 140

World Weather Online.......................................... 393

X

X-Achse ........................................................................ 277

XAMPP............................................................................ 15

Control Panel .......................................................... 16

Installation .............................................................. 15

Netzwerkkonfiguration ...................................... 17

Server.......................................................................... 22

Xcode ........................................................................... 476

XMLHttpRequest ...................................................... 85

xtype ............................................................................ 385

Y

Y-Achse......................................................................... 277

Yanone Kaffeesatz ................................................... 174

Yelp-API........................................................................ 271

YouTube...................................................................... 189

Z

Z-Achse......................................................................... 277

Z-Beschleunigung .................................................... 277

Zeewe ........................................................................... 485

Zeichen-App .............................................................. 223

Zeichensatz.................................................................. 47

Zeichnen ............................................................. 223, 231

Zeit ................................................................................ 462

Zeitleiste ...................................................................... 215

Zeitschriftenabo ......................................................... 27

ZEN Player ................................................................... 195

Zepto .................................................................... 90, 458

Objekt ........................................................................ 93

Zertifikat ..................................................................... 446

Apple ....................................................................... 446

Entwickler........................................... 446, 447, 450

Zielgerät ....................................................................... 136

Zielgruppe ................................................................... 135

Zielgruppenanalyse ................................................ 138

Zielgruppenvertreter.............................................. 138

z-index........................................................................ 209

Zoomstufe................................................................... 255

Zootool .......................................................................... 34

Zufallsfunktion ........................................................ 286

Zufallszahl ......................................................... 295, 463

Page 57: Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

Index

524

Zulassungsrichtlinie

WebApp-Store ..................................................... 476

Zulassungsverfahren ............................................. 481

Zurück-Button ......................................................... 364

Zwitschern.................................................................. 196