Apps mit HTML5 und CSS3
Transcrição
Apps mit HTML5 und CSS3
Florian Franke, Johannes Ippen Apps mit HTML5 und CSS3 für iPad, iPhone und Android Auf einen Blick Auf einen Blick 1 Apps ............................................................................................................................ 21 2 HTML5 in der mobilen Webentwickung ........................................................ 35 3 Konzeption und Gestaltungsprinzipien ......................................................... 109 4 HTML5 als Designwerkzeug ............................................................................... 147 5 Positionsbestimmung .......................................................................................... 225 6 Auslesen des Bewegungssensors mit JavaScript ........................................ 261 7 Offline – damit eine App in jedem Winkel der Welt funktioniert ........ 287 8 WebApps mit Frameworks entwickeln .......................................................... 311 9 Native Anwendungen und App Stores ........................................................... 381 Inhalt Inhalt Vorwort ................................................................................................................................................... 11 1 Apps 21 1.1 Native Apps vs. WebApps ...................................................................................... 1.1.1 1.1.2 1.1.3 1.1.4 1.1.5 WebApps allgemein ................................................................................... Native Apps auf mobilen Geräten ............................................................ App Store, Google Play und Co. ................................................................. WebApps auf mobilen Geräten ................................................................ Native App oder WebApp? ........................................................................ Der Mobilsektor boomt ............................................................................. Browsertechnik auf Mobilgeräten ........................................................... 28 28 30 1.3 Showcase – das können HTML5-Apps ................................................................. 31 2 HTML5 in der mobilen Webentwickung 35 2.1 HTML5 – Definition und aktueller Stand ............................................................ 35 36 36 36 1.2 Warum ist es sinnvoll, auf Touch-Geräten zu entwickeln? ............................ 21 22 22 25 27 28 1.2.1 1.2.2 2.1.1 2.1.2 2.1.3 2.2 Was HTML5 bietet ................................................................................................... 2.2.1 2.2.2 2.3 Der Aufbau einer einfachen HTML5-Seite ............................................... Semantische Elemente in HTML5 ............................................................. CSS3 – Grundlagen und Neuerungen .................................................................. 37 37 39 Was ist eigentlich CSS? .............................................................................. Styling mit einer CSS-Datei ....................................................................... Gestalten mit CSS – Tipps und Tricks ....................................................... Die Neuerungen von CSS3 – welche sind heute schon einsetzbar? ..... 42 42 43 48 53 Desktop vs. Mobile – die Unterschiede ............................................................... 63 2.3.1 2.3.2 2.3.3 2.3.4 2.4 HTML als Standard ..................................................................................... HTML5 als Marketinginstrument ............................................................. HTML5 als Flash-Ablösung? ....................................................................... 2.4.1 Möglichkeiten und Limitationen von HTML5 auf einer mobilen Plattform ............................................................................ 68 5 Inhalt Die neuen HTML- und CSS-Features in iOS5 ........................................... Von der Webseite zur WebApp ................................................................. 69 78 Entwickeln mit JavaScript-Frameworks – jQuery & Co. .................................. 83 84 88 94 98 99 2.4.2 2.4.3 2.5 2.5.1 2.5.2 2.5.3 2.5.4 2.5.5 2.6 Die JavaScript-Syntax ................................................................................. Einführung in jQuery .................................................................................. Wichtige Funktionen in jQuery ................................................................. Nachteile von jQuery ................................................................................. Eine Alternative zu jQuery – Zepto.js ....................................................... Die Geschwindigkeit einer WebApp verbessern ............................................... 101 2.6.1 2.6.2 2.6.3 Kompression ............................................................................................... 101 Die richtige Reihenfolge ............................................................................ 105 So wenig Anfragen wie möglich ............................................................... 105 3 Konzeption und Gestaltungsprinzipien 3.1 Touch-typisches Design in der Praxis .................................................................. 109 3.1.1 3.1.2 3.1.3 3.1.4 3.2 Der feine Unterschied zwischen Berühren und Klicken ......................... Der Anwender erwartet so einiges – Aufbau einer App ........................ Auf der Couch oder in der Bahn ................................................................ Alles eine Frage der Ausrichtung .............................................................. 109 109 113 122 127 Eine App konzipieren .............................................................................................. 134 3.2.1 3.2.2 Vorüberlegungen – was genau soll meine WebApp können? .............. 134 Gedanken und Inhalte ordnen .................................................................. 135 4 HTML5 als Designwerkzeug 4.1 Ordnung halten mit CSS-Rastersystemen .......................................................... 147 4.1.1 4.1.2 4.2 Einsatz des Less CSS Frameworks ............................................................. 149 Das Raster für einen speziellen Einsatz – MagazineGrid ....................... 158 Mal was anderes als Arial – Webfonts ................................................................ 168 4.2.1 4.2.2 4.2.3 4.2.4 6 147 Schriften im Web ........................................................................................ Webfonts ..................................................................................................... Font-Services ............................................................................................... Vor- und Nachteile von Webfonts ............................................................ 169 171 173 177 Inhalt 4.2.5 4.2.6 4.3 Hinzufügen von Audio und Video ........................................................................ 180 4.3.1 4.3.2 4.4 Video ............................................................................................................ 180 Audio ............................................................................................................ 190 Animationen mit CSS .............................................................................................. 196 4.4.1 4.4.2 4.4.3 4.4.4 4.5 Vorsicht! Schriften und deren Lizenzen ................................................... 178 Webschriften in Aktion .............................................................................. 178 CSS-Transitions und CSS-Animations ...................................................... Animieren mit -webkit-transition ............................................................ Animieren mit -webkit-animation ........................................................... Manipulation mit -webkit-transform ...................................................... 196 197 201 203 Zeichnen mit JavaScript – das canvas-Element ................................................ 208 4.5.1 4.5.2 4.5.3 4.5.4 4.5.5 Erster Schritt: Canvas und Context registrieren ..................................... Grundlegende Funktionen ........................................................................ Zeichnen per Touch-Eingabe .................................................................... In der Praxis – Canvas oder CSS? .............................................................. Canvas-Bibliotheken .................................................................................. 208 209 216 219 220 5 Positionsbestimmung 5.1 Die Positionsbestimmung mit HTML5 ................................................................. 226 5.1.1 5.2 5.3 225 Weitere Eigenschaften der Positionsbestimmung ................................. 229 Die »Where to Eat«-App ........................................................................................ 230 5.2.1 5.2.2 5.2.3 Position auf einer statischen Karte eintragen ........................................ 231 Interaktive Karten mit der Google Maps JavaScript API einbinden ...... 238 Liste der Restaurants laden und ausgeben ............................................. 240 5.2.4 5.2.5 5.2.6 5.2.7 5.2.8 Den Abstand zwischen zwei Koordinaten berechnen ........................... Die Programmoberfläche .......................................................................... Eine Symbolleiste einfügen ....................................................................... Die Restaurantliste erstellen ..................................................................... Der letzte Schliff ......................................................................................... 244 246 248 250 253 More Fun mit Geodaten ......................................................................................... 256 5.3.1 5.3.2 5.3.3 5.3.4 5.3.5 Qype-API ...................................................................................................... foursquare-API ............................................................................................ Google Places .............................................................................................. Twitter-API .................................................................................................. Flickr-API ...................................................................................................... 257 257 258 258 260 7 Inhalt 6 Auslesen des Bewegungssensors mit JavaScript 6.1 Diese Daten liefert der Bewegungssensor ......................................................... 262 6.2 Vorüberlegungen zur App »Shake it like a Polaroid picture« ........................ 264 6.3 »Shake it like a Polaroid picture« – die Umsetzung ......................................... 266 6.3.1 6.3.2 6.3.3 6.3.4 6.3.5 7 7.1 Offline – damit eine App in jedem Winkel der Welt funktioniert 287 Die Struktur der Cache-Manifest-Datei ................................................... Ihre erste Cache-Manifest-Datei .............................................................. Wann werden welche Daten gecacht? .................................................... Die Cache-Manifest-Datei im Einsatz ...................................................... 289 290 291 292 localStorage, die Offline-Datenbank ................................................................... 294 7.2.1 7.2.2 7.3 266 269 275 276 281 Abhilfe schafft das Cache-Manifest ..................................................................... 289 7.1.1 7.1.2 7.1.3 7.1.4 7.2 Die HTML-Datei .......................................................................................... Laden eines Bildes aus dem Fotodienst Flickr via JSON ......................... Die CSS-Datei .............................................................................................. Das Laden eines Polaroids ......................................................................... Das Sahnehäubchen – eine leichte Rotation des Polaroids ................... 261 localStorage-Funktionen ........................................................................... 294 Temporäre Speicherung von Daten im sessionStorage ......................... 295 Die Offline-Todo-App .............................................................................................. 296 7.3.1 7.3.2 7.3.3 7.3.4 Welche Anforderungen muss Ihre Todo-App erfüllen? ......................... Der Wireframe der Todo-App .................................................................... Funktionsbezogene Animation ................................................................ Zusätzliche EventHandler ......................................................................... 296 297 306 308 7.4 Checkliste zum Überprüfen der Offline-Fähigkeit einer WebApp ................ 309 8 WebApps mit Frameworks entwickeln 8.1 Entwicklung einer WebApp mit jQuery Mobile ................................................ 311 8.1.1 8.1.2 8 311 Zum heiteren Hering – ein Fischrestaurant als WebApp ...................... 312 Die Startseite .............................................................................................. 313 Inhalt 8.1.3 8.1.4 8.1.5 8.1.6 8.1.7 8.2 Kurze Kaffeepause – ein Blick hinter die Kulissen von jQuery Mobile ...................................................................................... À la carte – die Menüseite ......................................................................... Implementierung einer Google-Maps-Karte inklusive Routenplanung ........................................................................................... Ein Kontaktformular mithilfe von PHP .................................................... jQuery-Mobile-Apps mit dem Themeroller und dem Interface-Builder von Codiqa noch schneller entwickeln ...................... 324 325 336 340 347 Die Entwicklung einer App mit Sencha Touch ................................................... 350 8.2.1 8.2.2 8.2.3 Installation und erste Schritte mit Sencha Touch .................................. 351 Interaktive Diagramme mit Sencha Touch Charts – die Wetterstation ....................................................................................... 361 HTML5-Tablet-Magazin mit Sencha Touch ............................................. 371 9 Native Anwendungen und App Stores 9.1 Eine WebApp wird zur nativen Anwendung ...................................................... 381 9.1.1 9.1.2 9.1.3 9.1.4 9.1.5 9.1.6 9.1.7 9.1.8 9.1.9 9.1.10 Die Vor- und Nachteile einer nativen App ............................................... Die Erstellung einer nativen App mit PhoneGap (Apache Cordova) ....................................................................................... »Shake it like a Polaroid picture« – die native Version ........................... Die kompilierten App-Dateien mithilfe von PhoneGap Build erstellen .......................................................................... Apple-Zertifikate und Profile ..................................................................... Einbinden von Zertifikat und Profil in PhoneGap Build ......................... Endlich! Das Hochladen der »Shake it like a Polaroid picture«-Daten ............................................................................ Die App-Datei auf dem Endgerät installieren ......................................... Icon- und App-Namen in PhoneGap Build anpassen ............................. Abschließende Worte zu PhoneGap und PhoneGap Build .................... 381 381 383 384 390 391 395 396 398 399 400 9.2 Eine native Magazin-App mit Laker ..................................................................... 401 9.3 Die Veröffentlichung einer App in einem App Store ........................................ 403 9.3.1 9.3.2 9.4 Das Veröffentlichen einer App in Apples App Store ............................... 404 Das Veröffentlichen einer App in Google Play ........................................ 411 Publizieren der WebApp in einem Store oder als Webseite ........................... 416 9.4.1 Auf den Vollbildmodus hinweisen ........................................................... 416 9 Inhalt 9.4.2 9.4.3 Die Alternative zum App Store – OpenAppMarket und Zeewe ............ 418 Weitere Möglichkeiten .............................................................................. 425 A Weiterführende Informationen 427 A.1 HTML5 und CSS3 ....................................................................................................... 427 A.2 iOS, Apple .................................................................................................................. 427 A.3 Android, Google ....................................................................................................... 428 A.4 Technologie und Gadgets ...................................................................................... 428 A.5 Digital Publishing .................................................................................................... 428 A.6 Design und Inspiration ........................................................................................... 428 A.7 Sonstiges ................................................................................................................... 429 A.8 Interessante Twitter-Kontakte ............................................................................. 429 Index ..................................................................................................................................... 431 10 Kapitel 5 Positionsbestimmung 5 Alle aktuellen Smartphones sind in der Lage, ihre Position zu orten und diese an den Nutzer weiterzugeben. Damit wird aus einem einfachen Telefon mit Webbrowser ein Navigationsgerät, ein Kompass oder eine lokale Suchmaschine. Diese Funktion ist nicht nur nativen Apps vorbehalten, sondern kann, dank HTML5, auch im Webbrowser genutzt werden. Die Positionsbestimmung erfolgt in erster Linie über das Global Positioning System, besser bekannt als GPS. In den 1970er Jahren vom US-Militär entwickelt, ist es heute der Standard und die Grundlage für jedes auf dem Markt erhältliche Navigationssystem. Das System besteht aus rund zwei Dutzend Satelliten, die permanent um die Erde kreisen und ihre aktuelle Position zur Oberfläche senden. Dieses Signal kann von einem GPS-Empfänger auf der Erde zu einer Geoposition umgerechnet werden. Diese Bestimmung ist recht präzise, in der Regel kann die Position auf ca. 7–8 Meter genau ermittelt werden. Voraussetzung dafür ist, dass der Empfänger gleichzeitig das Signal von mindestens drei, üblicherweise vier Satelliten empfangen kann. Allerdings ist der Empfang in geschlossenen Räumen in der Regel unmöglich – das Signal ist zu schwach, um durch Betonwände zu dringen, manchmal verhindert sogar ein starker Schneesturm den GPS-Empfang. In Fällen, in denen die Bestimmung per GPS nicht möglich ist, greifen Smartphones daher auf ein stärkeres Signal zurück: das Funksignal der Handysendemasten. Üblicherweise ist ein Telefon immer an mehreren Sendemasten angemeldet, um ein stabiles 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 Positionsermittlung: 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 Latitude genannt, angegeben (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 verläuft und durch Royal Greenwich Observatory in London läuft. 225 5 Positionsbestimmung Die Entfernung wird dabei als Winkel angegeben, 0–180° für westlich von Greenwich gelegene Positionen, negative Werte in östlicher Richtung. Abbildung 5.1 Stellen Sie sich Longitude und Latitude wie ein Koordinatensystem vor. Die Latitude beschreibt die Position in Nord-Süd-Richtung. Ausgehend vom Äquator 0–90° für nördlich gelegene Orte, negative Werte für alles was im Süden liegt. Da die Skala sehr großzügig ausgelegt ist und die Längen/Breitengrade sehr weit voneinander entfernt liegen, werden Positionen immer mit mehreren Nachkommastellen und der Himmelsrichtung angegeben: 52.518611°N, 13.408056°E ist z.B. die Position des Roten Rathauses in Berlin. In diesem Kapitel lernen Sie, wie Sie mit JavaScript die Positionsdaten Ihres Smartphones auslesen und verarbeiten können. Sie werden eine Beispiel-App entwickeln, Ihre aktuelle Position in einer Google-Karte eintragen und lernen, wie Sie mit GPS Entfernungen berechnen können. 5.1 Die Positionsbestimmung mit HTML5 Als Erstes werden Sie lernen, wie Sie mit JavaScript Ihre aktuellen GPS-Koordinaten auslesen und in eine Tabelle eintragen. Zunächst legen Sie dafür die HTML-Tabelle an: <table> <tr id="longitude"> <th>Longitude:</th> <td></td> </tr> <tr id="latitude"> <th>Latitude:</th> <td></td> </tr> </table> 226 5.1 Die Positionsbestimmung mit HTML5 Sie haben nun eine Tabelle mit zwei Zeilen und zwei Spalten. Die erste Spalte fungiert als Kopfspalte, die zweite ist noch leer – hier werden Sie mit jQuery die Koordinatenwerte eintragen. Verknüpfen Sie zunächst die jQuery-Bibliothek mit Ihrem HTMLDokument: <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 5 Definieren Sie zwei leere Variablen, in denen Sie später Longitude und Latitude speichern: var longitude, latitude; Jetzt rufen Sie die Position Ihres Geräts ab: Dafür gibt es in HTML5 das Objekt navigator.geolocation, welches die Funktion .getCurrentPosition() besitzt. In den Klammern geben Sie eine weitere Funktion an, die aufgerufen werden soll, wenn die GPSKoordinaten erfolgreich ermittelt wurden. Dies nennt man eine Callback-Funktion. $(function(){ navigator.geolocation.getCurrentPosition(positionsAusgabe); }); Abbildung 5.2 Der Browser fragt zunächst nach, ob die aktuelle Benutzerposition übermittelt werden soll. Im linken Bereich sehen Sie die Darstellung auf dem iPhone, rechts unter Android. 227 5 Positionsbestimmung Definieren Sie nun die Funktion positionsAusgabe, die als Callback-Funktion aufgerufen wird. Der Funktion wird einen Parameter position übergeben. Dabei handelt es sich um ein Objekt, das beim Abrufen der Position durch .getCurrentPosition() erstellt wird. In dem Objekt sind u.a. Ihre GPS-Koordinaten gespeichert. var positionsAusgabe = function(position){ longitude = position.coords.longitude; latitude = position.coords.latitude; $('#longitude td').html(longitude); $('#latitude td').html(latitude); }; Sie weisen Ihren, zuvor definierten, Variablen die Longitude und Latitude aus dem position-Objekt zu. Anschließend tragen Sie die Werte in die noch leeren Tabellenzellen ein. Abbildung 5.3 Ausgabe Ihrer aktuellen Benutzerposition – in diesem Fall im Berliner Stadtzentrum Öffnen Sie die HTML-Seite nun im Browser Ihres mobilen Geräts. Direkt nach dem Laden des Dokuments wird die Positionsabfrage ausgeführt. In einem Dialogfenster werden Sie gefragt, ob Sie der Webseite ihre aktuelle Position übermitteln möchten (Abbildung 5.2). Klicken Sie auf OK, um die Positionsabfrage zuzulassen. In der 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 durchführt. 228 5.1 Die Positionsbestimmung mit HTML5 Einen kurzen Moment darauf werden Ihre Koordinaten in der Tabelle eingetragen (Abbildung 5.3). 5.1.1 Weitere Eigenschaften der Positionsbestimmung Neben Longitude und Latitude verfügt das position-Objekt noch über weitere Eigenschaften, auf die Sie ebenfalls Zugriff haben: 왘 position.coords.accuracy Die Eigenschaft accuracy gibt Auskunft darüber, wie genau die ermittelten Positionsdaten sind. Je nach Empfang und Ortungsmethode kann Ihre Position immer nur auf einige Meter genau bestimmt werden. Die Toleranz wird als Radius in Metern angegeben. Ist der Wert beispielsweise 10 Meter, bedeutet das, dass Ihr Gerät sich auch in einem Umkreis von 10 Metern der ermittelten Position befinden könnte. 왘 position.coords.altitude Die Altitude ist die Höhe über Normalnull, also dem Meeresspiegel. Diese Information ist vor allem dann interessant, wenn Sie sich im Gebirge befinden. Allerdings wird die Ausgabe der Altitude bisher noch nicht von allen Geräten unterstützt, auf vielen Android-Geräten bleibt die Variable einfach leer. 왘 position.coords.altitudeAccuracy Analog zu accuracy gibt die Eigenschaft altitudeAccuracy an, wie genau Ihre Höhe über Normalnull ermittelt werden konnte. Auch hier wird der Toleranzbereich in Metern angegeben. 왘 position.coords.heading und position.coords.speed Theoretisch stehen Ihnen noch zwei weitere Eigenschaften zur Verfügung: 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 zwischen 0° und 360° gespeichert. Die Eigenschaft speed beschreibt die Geschwindigkeit, mit der sich das Gerät aktuell bewegt. In der Praxis unterstützt aber bisher noch kein Gerät diese beiden Eigenschaften, mit ein paar Tricks können Sie diese aber dennoch ermitteln. Stromfresser GPS Das GPS-Modul benötigt relativ viel Strom und verringert somit die Akkulaufzeit spürbar. Nutzen Sie daher GPS-Abfragen nur, wenn es tatsächlich nötig ist. Bevor Sie eine Positionsermittlung durchführen, sollten Sie den Nutzer darüber informieren und nach Möglichkeit erläutern, wozu diese Abfrage notwendig ist. Völlig zurecht entstehen Sicherheitsbedenken, wenn einer WebApp der aktuelle Aufenthaltsort übermittelt werden soll – beruhigen Sie den Nutzer durch einen kurzen Hinweis. 229 5 5 Positionsbestimmung 5.2 Die »Where to Eat«-App Nachdem Sie nun die Grundlagen der Positionsbestimmung verstanden haben, nutzen Sie diese Kenntnisse, um ein uraltes Menschheitsproblem zu lösen: Wo bekomme ich etwas zu essen her? Sie kennen sicher das Problem: Sie befinden sich in einer fremden Stadt und sind auf der Suche nach einem nahegelegenen Restaurant. Im Idealfall sollte das natürlich nicht die erstbeste Burger-Bude sein – Ihnen steht heute der Sinn nach Sushi. Für diesen Zweck konzipieren Sie nun eine kleine Smartphone-App, die sich dieses Problems annimmt. Sie sollte über folgende Kernfunktionen verfügen: 왘 Benutzerposition ermitteln 왘 eine Liste von Restaurants laden 왘 Restaurants und Benutzer in einer Karte eintragen 왘 Entfernung zwischen Benutzer und Restaurants berechnen Optional soll der Nutzer auswählen können, welche Kategorie von Restaurant 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 Benutzungssituation vor Augen führen. In den meisten Fällen wird es sich um ein vollmobiles Szenario handeln, bei dem der Nutzer mit seinem Smartphone und einer 3GVerbindung unterwegs ist. Die App wird impulsiv und zielgerichtet aufgerufen, die drei wichtigsten Fragen müssen von der App schnell beantwortet werden: 1. Wo bin ich? 2. Wo befinden sich die nächsten Restaurants? 3. Wie weit sind diese von mir entfernt? Ihre App sollte also: 왘 für ein Smartphone optimiert sein 왘 auf Android und iOS gleichermaßen funktionieren 왘 kurze Ladezeiten aufweisen 왘 gelernte Bedienmechanismen aufgreifen Weniger relevant sind eine Tablet-Version oder »verspielte« Elemente. Der Nutzer möchte nichts entdecken. Animationen, Dekorationen oder Ornamente sind hier fehl am Platz. Ihre App besteht im Wesentlichen aus drei Screens: einer Karte, auf der die Position des Nutzers und der umliegenden Restaurants eingezeichnet ist, einer Liste der Restau- 230 5.2 Die »Where to Eat«-App rants und einem Optionsmenü, in dem bestimmte Restauranttypen ausgewählt werden können. Die Screens werden über eine Symbolleiste untereinander verbunden, die App startet mit der Karte. Fertigen Sie dazu einen Wireframe an (Abbildung 5.4). Restaurants Optionen Pizza Dach √ Pizza Burgeramt √ Burger Spaghetti Western √ Pasta Sushi Izumi √ Sushi 5 Pesto I Pizza Il Due Forni Abbildung 5.4 Der Wireframe für die »Where to Eat«-App Den Wireframe verwenden Sie, wie in Kapitel 3, »Konzeption und Gestaltungsprinzipien«, beschrieben, für Nutzertests. Wenn Sie die Wireframes gezeichnet haben, scannen bzw. fotografieren Sie sie ab und laden die Bilder auf ein Testgerät. Sie haben nun drei Bilder, die Sie im Fotobetrachter Ihres Smartphones hin- und herwechseln können. Dadurch entsteht beim Nutzer bereits ein ziemlich realistisches »AppGefühl«, das die Ergebnisse unseres Tests verbessert. Geben Sie Ihrem Testbenutzer eine konkrete Aufgabe, z.B. »Finden Sie heraus, wo sich die nächstgelegene Pizzeria befindet«. Der Nutzer soll diese Aufgabe mithilfe des App-Wireframes lösen, Sie ü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. Außerdem war unklar, welches nun das nächstgelegene Restaurant ist. Sie lösen diesen Umstand, indem Sie vor jedes Restaurant in der Liste einen kleinen Kartenausschnitt 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 231 5 Positionsbestimmung auf Ihrem Server bereitstellen müssen, gibt es Dienstleister, die dies für Sie tun. Der bekannteste ist Google Maps, der statische und dynamische Karten zur Verfügung stellt (Abbildung 5.5). Der Service ist kostenlos und kann ohne Anmeldung genutzt werden, ist aber auf 1.000 Kartenabrufe pro Nutzer und Tag beschränkt. Abbildung 5.5 Die Google Maps Static API Google bietet zwei Arten von Karten an: statische Karten, die ein nicht veränderbares Abbild einer Karte ausgeben, und dynamische Karten, die der Nutzer zoomen und hin- und herbewegen kann. Eine statische Karte zu erstellen ist sehr einfach: Sie senden eine Anfrage mit einem Parameter an den Google-Server, dieser liefert eine Bilddatei zurück, die den entsprechenden Kartenausschnitt beinhaltet (Abbildung 5.6). Testen Sie dies, indem Sie im Browser folgende Adresse aufrufen: http://maps.google.com/maps/api/staticmap?center=Berlin,Germany&zoom=10&size= 500x500&sensor=false Der Google-Server liefert eine Bilddatei zurück, die den angeforderten Kartenausschnitt beinhaltet. Sie können diesen sehr einfach in Ihre HTML5-Datei einbinden: 232 5.2 Die »Where to Eat«-App <img src="http://maps.google.com/maps/api/staticmap?center=Berlin,Germany& zoom=10&size=500x500&sensor=false"> 5 Abbildung 5.6 Kartenausgabe als Bild Um die Karte darzustellen, benötigt der Server einige Parameter. Diese sind: 왘 center Legt den Mittelpunkt der Karte fest, bestimmt also den Ausschnitt. Der Parameter versteht sowohl Adressangaben (z.B. Rotes Rathaus, Berlin, Germany), als auch eine GPS-Position als Wertepaar (z.B. »52.518611, 13.408056«). Beachten Sie, dass Longitude und Latitude in der amerikanischen Syntax übergeben werden müssen, dass also statt eines Kommas ein Punkt als Trenner verwendet wird. 왘 zoom Gibt die Größe des Kartenausschnitts an. Je größer der Wert, desto »näher« befindet sich der Betrachter am Ort des Geschehens. Der Parameter kann eine natürliche Zahl zwischen 0 und 21 sein. Bei 0 ist die gesamte Weltkarte sichtbar, bei 21 werden einzelne Gebäude erkennbar. Je nach Zoomstufe werden auch mehr Details dargestellt: Bei Stufe 10 werden nur Hauptstraßen eingeblendet, ab Stufe 13 alle Nebenstraßen, ab Stufe 15 auch deren Straßennamen. Die großen Stufen sind nicht für alle Gebiete verfügbar – besonders in ländlichen Regionen sind Gebäudedetails etc. häufig nicht verfügbar. 233 5 Positionsbestimmung 왘 size Definiert die Größe der Karte bzw. der Bilddatei, die vom Server ausgeliefert wird. Der Parameter legt die Breite und die Höhe des Bildes in Pixeln fest, die Angabe 500x300 erstellt beispielsweise eine Karte, die 500 Pixel breit und 300 Pixel hoch ist. Hier gibt es eine entscheidende Einschränkung: Eine statische Karte darf höchstens 640 Pixel hoch bzw. breit sein, der Maximalwert liegt also bei 640x640. 왘 sensor Der Sensor-Parameter gibt an, ob die App die Benutzerposition über einen GPS-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 Zusatzoptionen, die Sie über weitere Parameter definieren können. Kartentyp maptype Standardmäßig liefert Google Maps eine Straßenkarte (roadmap, Abbildung 5.7) aus, alternativ können Sie eine Reliefkarte (terrain, Abbildung 5.8) anzeigen lassen, in der Höhenunterschiede und Vegetation dargestellt werden. Als Letztes gibt es noch eine Satellitenkarte (satellite, Abbildung 5.9). Ebenfalls möglich ist eine Satellitenkarte mit eingezeichneten Straßen und Plätzen, die sogenannte Hybridkarte (hybrid, Abbildung 5.10). Abbildung 5.7 Kartentyp »roadmap« 234 5.2 Die »Where to Eat«-App 5 Abbildung 5.8 Kartentyp »terrain« Abbildung 5.9 Kartentyp »satellite« 235 5 Positionsbestimmung Abbildung 5.10 Kartentyp »hybrid« Markierungen Zusätzlich können Sie wichtige Plätze in der Karte mit den Google-typischen Markierungen einzeichnen (Abbildung 5.11). Dafür bietet die Static Maps API den markersParameter an. Der Wert, den Sie dem markers-Parameter übergeben können, ist ein wenig komplex: Zunächst definieren Sie den Stil der Markierungen, anschließend übergeben Sie, durch einen senkrechten Strich (auch »Pipe« genannt) getrennt, die Positionen der Markierungen: markers=color:blue|size:mid|label:A|52.518611,13.408056|Alexanderplatz, Berlin,Germany Als Markierungsstile können Sie Farbe, Größe und Bezeichnung festlegen: 왘 color gibt die Farbe der Markierung an. Dies kann entweder eine vordefinierte Bezeichnung sein (möglich sind black, white, brown, green, purple, yellow, blue, gray, orange und red) oder ein Hexadezimalwert (z.B. #ff0000 für die Farbe Rot). 왘 size definiert die Größe. Neben der Standardgröße gibt es mittlere Marker (mid), kleine (small) und winzige (tiny) Versionen. 왘 label beinhaltet einen Großbuchstaben bzw. eine Ziffer, die auf dem Marker steht. Umlaute und Sonderzeichen sind leider nicht möglich, Zahlen größer 9 ebenso wenig. Bei kleinen und winzigen Markern funktioniert das Label nicht. 236 5.2 Die »Where to Eat«-App 5 Abbildung 5.11 Die Marker in der Karte Natürlich ist es auch möglich, den Markierungsstil zwischendurch zu wechseln (Abbildung 5.12): http://maps.google.com/maps/api/staticmap?size=640x640&sensor=false&markers= color:blue|size:mid|label:A|52.518611,13.408056&markers=color:red|label:B| Alexanderplatz,Berlin,Germany Abbildung 5.12 Unterschiedliche Markerstile in einer Karte 237 5 Positionsbestimmung Ihnen wird aufgefallen sein, dass der center- und der zoom-Parameter fehlen. Wenn Sie einen oder mehrere Marker definieren, kann die Static Maps API den Kartenausschnitt implizit positionieren, also so, dass alle Marker im Ausschnitt sichtbar sind. Weitere Informationen und eine komplette Dokumentation zur Static Maps API in deutscher Sprache finden Sie unter http://code.google.com/intl/de-DE/apis/maps/ documentation/staticmaps/. Da der Nutzer Ihrer WebApp in der Lage sein soll, die Karte zu zoomen und zu bewegen, bietet sich die Einbindung einer dynamischen Karte an – die Google Maps JavaScript API. 5.2.2 Interaktive Karten mit der Google Maps JavaScript API einbinden Die Google Maps JavaScript API erlaubt es Ihnen, eine vollwertige interaktive Karte in Ihre App einzubinden, genauso wie sie es von http://maps.google.com/ gewohnt sind (Abbildung 5.13). Ebenso wie bei der Static Maps API ist die Verwendung kostenlos, das Kartenmaterial und der JavaScript-Code werden auf dem Google-Server gehostet und von dort eingebunden. Ihnen entstehen also keine zusätzliche Hostingkosten. Abbildung 5.13 Die Google Maps JavaScript API 238 5.2 Die »Where to Eat«-App Um eine Google-Karte zu Ihrer App hinzuzufügen, müssen Sie zunächst im HTMLCode ein leeres Platzhalterelement definieren: <section id="karte"></section> Über CSS legen Sie die Größe des Elements fest. Anstelle einer festen Pixelgröße können Sie sie mit einem einfachen Trick bildschirmfüllend darstellen: #karte { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } Anschließend müssen Sie noch den JavaScript-Code der API einbinden: <script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script> Jetzt können Sie eine Google-Karte initialisieren und darstellen lassen. Sie möchten die Karte gleich, zentriert an der Benutzerposition, ausgeben lassen: $(function(){ navigator.geolocation.getCurrentPosition(function(position){ meineLongitude = position.coords.longitude; meineLatitude = position.coords.latitude; var optionen = { zoom: 13, center: new google.maps.LatLng( meineLatitude, meineLongitude), mapTypeId: google.maps.MapTypeId.ROADMAP }; karte = new google.maps.Map( document.getElementById('karte'), optionen); }); }); Wie bereits in Abschnitt 5.1, »Die Positionsbestimmung mit HTML5«, beschrieben, ermitteln Sie zunächst mit geolocation.getCurrentPosition die GPS-Koordinaten des Benutzers. Anschließend legen Sie die Optionen der Karte in einem JavaScript-Objekt fest – neben der Anfangszoomstufe sind dies der Kartentyp und die Anfangsposition des Kartenausschnitts, hier die Koordinaten des Benutzers. 239 5 5 Positionsbestimmung Anschließend legen Sie ein neues Objekt vom Typ google.maps.Map an, dem Sie als Parameter das Platzhalterelement mit der id karte und das Optionen-Objekt übergeben. Herzlichen Glückwunsch, Sie haben soeben Ihre erste dynamische Karte erstellt (Abbildung 5.14)! Probieren Sie es gleich aus. Abbildung 5.14 Eine Interaktive Google-Karte auf dem iPhone (links) und unter (Android) rechts. 5.2.3 Liste der Restaurants laden und ausgeben Nun laden Sie eine Liste mit Restaurants. Dafür eignet sich das JSON-Format, da es per JavaScript ohne Neuladen des HTML, also asynchron, nachgeladen werden kann. Legen Sie eine neue Textdatei an, und nennen Sie diese restaurants.json. In die Datei schreiben Sie nun eine Liste mit Restaurants, also deren Namen und GPS-Position sowie eine Kategorie. Für Restaurants in Berlin könnte das in etwa so aussehen: { "Pizza Dach": { "Kategorie": "Pizza", "Position": { "Longitude": 13.456106, "Latitude": 52.51024 } 240 5.2 Die »Where to Eat«-App }, "Burgeramt": { "Kategorie": "Burger", "Position": { "Longitude": 13.459539, "Latitude": 52.510299 } }, "Pesto i Pizza": { "Kategorie": "Pizza", "Position": { "Longitude": 13.413776, "Latitude": 52.511971 } } 5 } 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 Doppelpunkt, der eigentliche Wert, also die Daten. Dies kann neben einer Zeichenkette oder einer Zahl auch ein weiteres JSON-Objekt sein. Diese lassen sich also beliebig tief ineinander verschachteln. Dabei ist die Einhaltung der Syntax extrem wichtig. Schon ein vergessenes Komma führt zu einer veränderten Datenstruktur oder zu unlesbaren Daten. Ob Ihre Datei in Ordnung ist, überprüfen Sie am besten mit einem JSON Validator wie JSONLint (http://jsonlint.com/, Abbildung 5.15). Mithilfe von jQuery können Sie die Daten von Ihrem Server laden. Dafür gibt es die Funktion .getJSON, die eine JSON-Datei abrufen und verarbeiten kann. $.getJSON('daten/restaurants.json?='+Date.now(), function(json){ $.each(json, function(restaurant, daten){ ... }); }); Der Funktion übergeben Sie zwei Parameter: Den Pfad bzw. die URL Ihrer JSON-Datei und eine Funktion, die ausgeführt werden soll, sobald die Daten geladen wurden. Dieser sogenannten Callback-Funktion wird das JSON-Objekt als Variable json übergeben. 241 5 Positionsbestimmung Abbildung 5.15 Mit JSONLint überprüfen Sie JSON-Dateien. Die jQuery-Hilfsfunktion $.each() führt eine Funktion für jedes Unterobjekt in der JSON-Datei aus, also für jedes Restaurant. Dabei übergeben Sie den jeweiligen Werteschlüssel, also unseren Restaurantnamen, und den Wert, also die Kategorie und GPSKoordinaten, als Parameter an die Funktion. Wenn Sie nun drei Restaurants in der JSON-Datei gespeichert haben, wird diese Funktion dreimal aufgerufen. Sie können die 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 }); Sie erzeugen ein neues Objekt vom Typ google.maps.Marker, dem Sie mehrere Parameter übergeben: den Namen des Map-Objekts, auf dem die Marker gesetzt werden sollen, und die Position des Markers. Diese lesen Sie aus dem JSON-Objekt aus, genauer aus den Variablen daten.Position.Latitude und daten.Position.Longitude. Diese Aneinanderreihung der verschachtelten Werteschlüssel speichert die Daten als Zeichenkette bzw. Zahl. 242 5.2 Die »Where to Eat«-App Außerdem wollen Sie aber noch eine Liste der Restaurants mit einem kleinen Kartenausschnitt anlegen. Dazu müssen Sie zunächst im HTML-Code ein Platzhalterelement anlegen: <section id="uebersicht"> <h2>Restaurants in der Nähe</h2> <ul> <!-- Wird dynamisch befüllt --> </ul> </section> 5 Ähnlich wie bei der Karte legen Sie ein Element vom Typ section an, dem Sie eine Überschrift und eine leere, unsortierte Liste spendieren. Hier werden nun per jQuery die Restaurants eingetragen: $('#uebersicht').find('ul').append('<li class="'+daten.Kategorie+'">' +restaurant+'</li>'); Sie fügen also der leeren Liste pro vorhandenem JSON-Eintrag ein li-Element mit dem Restaurantnamen und einem class-Attribut an, in dem die Restaurantkategorie gespeichert ist (Abbildung 5.16). Abbildung 5.16 Unformatierte Restaurantliste, aus der JSON-Datei geladen 243 5 Positionsbestimmung In Ihrem Konzept steht jedoch, dass zusätzlich zum Restaurantnamen ein kleiner Kartenausschnitt angezeigt werden soll. Nun können Sie mit Ihrem Wissen über die Static Maps API glänzen – erweitern Sie den jQuery-Befehl um Folgendes: var ausschnitt = 'http://maps.google.com/maps/api/staticmap?size=50x50&markers=color:blue|size:tiny|'+daten.Position.Latitude+','+daten.Position.Longitude+'&sensor=true'; $('#uebersicht').find('ul').append('<li class="'+daten.Kategorie+'"><img src= "'+ausschnitt+'">'+restaurant+'</li>'); Sie erzeugen jeweils einen kleinen Kartenausschnitt, der 50 × 50 Pixel groß ist, und einen winzigen blauen Marker an der Position des Restaurants. Der Ausschnitt wird als Bildelement in den Listenpunkt eingefügt. Was jetzt noch fehlt, ist die Entfernung zwischen Benutzer und dem jeweiligen Restaurant. 5.2.4 Den Abstand zwischen zwei Koordinaten berechnen Um es gleich vorweg zu sagen: Die Entfernungsberechnung anhand von GPS-Koordinaten ist eine Wissenschaft für sich. Da sich die Erde leider nicht ganz rund, sondern eher wie eine Clementine krümmt, gelten an allen Punkten auf dem Planeten andere Regeln. Insbesondere bei der Berechnung zwischen weit entfernten Punkten, die z.B. auf unterschiedlichen Halbkugeln liegen, wird es richtig kompliziert. Die gute Nachricht ist: Für kurze Distanzen gibt es eine relativ einfache und ausreichend genaue Formel. Alles was Sie benötigen, sind die Longitude und Latitude der beiden Punkte. Diese rechnen Sie anhand des durchschnittlichen Erdradius in Distanzen vom Nullpunkt um, damit Sie anschließend, mithilfe des Satzes des Pythagoras, eine Entfernung der beiden Punkte berechnen können. Als JavaScript-Funktion sieht das so aus: var entfernungBerechnen = function(meineLongitude, meineLatitude, long1, lat1) { erdRadius = 6371; meineLongitude = meineLongitude * (Math.PI/180); meineLatitude = meineLatitude * (Math.PI/180); long1 = long1 * (Math.PI/180); lat1 = lat1 * (Math.PI/180); x0 = meineLongitude * erdRadius * Math.cos(meineLatitude); y0 = meineLatitude * erdRadius; x1 = long1 * erdRadius * Math.cos(lat1); y1 = lat1 * erdRadius; 244 5.2 Die »Where to Eat«-App 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"; } }; 5 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, welche die Luftlinie zwischen beiden Positionen zurückgibt, wahlweise in Kilometern oder, bei kürzeren Distanzen, in Metern. Die Entfernung ist relativ genau; Atomraketen sollten Sie damit zwar nicht steuern, aber um ein Restaurant zu finden, reicht diese Funktion völlig aus. Ergänzen Sie den jQuery-Befehl für die Restaurantliste nun um den Funktionsaufruf: $('#uebersicht').find('ul').append('<li class="'+daten.Kategorie+'"><img src= "'+ausschnitt+'">'+restaurant+'<span>'+entfernungBerechnen(meineLongitude, meineLatitude,daten.Position.Longitude,daten.Position.Latitude)+'</span></li>'); In unserer Restaurantliste sieht das Ganze nun so aus wie in Abbildung 5.17. Abbildung 5.17 Schon besser – Liste mit Kartenausschnitt und Entfernung 245 5 Positionsbestimmung 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 den Platzhalter für die Karte und die Restaurantliste angelegt, ergänzen Sie einen weiteren Bereich für die Optionen: <section id="karte"> </section> <section id="uebersicht"> <h2>Restaurants in der Nähe</h2> <ul> <!-- 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= "Sushi"></span></label></li> </ul> </section> Dieser besteht aus einer unsortierten Liste mit den Restaurantkategorien, die jeweils eine angewählte Checkbox pro Listeneintrag enthält. Um das Layout kümmert sich eine CSS-Datei, in der Folgendes steht: body { margin: 0; font-family: Helvetica, sans-serif; } section { overflow: scroll; -webkit-overflow-scrolling:touch; width: 100%; min-height: 411px; background: #c5ccd4; padding-bottom: 50px; 246 5.2 Die »Where to Eat«-App 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; } 5 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, werden Sie zunächst nur eine weiße Seite sehen, doch dazu gleich mehr. Die Sektion #karte erhält als Hintergrundbild einen kleinen Ladekreis, der zentriert angezeigt wird. Dies hat folgende Bewandtnis: Abhängig von der Dauer der Positionsbestimmung und der Ladezeit der Google Maps JavaScript API kann es einige Sekunden dauern, bis eine Karte angezeigt wird. Um dem Nutzer anzuzeigen, dass etwas geladen wird, dreht sich der Ladekreis in der Bildschirmmitte. Dieser verschwindet von allein, sobald die Karte geladen ist und den Hintergrund verdeckt. Auf http://ajaxloader.info können Sie aus verschiedenen Modellen wählen, eigene Farben einstellen und kostenlos herunterladen. Damit die Karte beim Start der App angezeigt wird, weisen Sie ihr per jQuery die Klasse aktiv zu: $('#karte').addClass("aktiv"); Um zwischen den einzelnen Sektionen zu wechseln, benötigen Sie noch eine Symbolleiste im App-Stil. 247 5 Positionsbestimmung 5.2.6 Eine Symbolleiste einfügen Die Symbolleiste ist ein gelerntes und daher für Ihre App ideales Navigationselement. Im Gegensatz zu Desktopanwendungen befinden sich Symbolleisten bei Mobilgeräten meist am unteren Bildschirmrand, damit Sie gut mit einer Hand und dem Daumen zu erreichen sind. Fügen Sie folgenden Code in Ihre HTML-Datei ein: <nav> <li> <a class="karte" href="#karte">Karte</a></li> <li> <a class="uebersicht" href="#uebersicht">Liste</a></li> <li> <a class="optionen" href="#optionen">Optionen</a></li> </nav> Sie haben jetzt eine Liste mit Textlinks erstellt, die per Anker auf die jeweiligen Sektionen Ihrer App verweisen. Damit daraus eine Toolbar wird, müssen Sie noch etwas CSS hinzufügen: nav { height: 49px; background: #000 -webkit-gradient( linear, left top, left bottom, color-stop(0, #000), color-stop(0.02, #565656), color-stop(0.04, #303030), color-stop(0.5, #141414), color-stop(0.51, #000) ); display: -webkit-box; position: fixed; bottom: 0; left: 0; right: 0; } nav li { margin: 0; padding: 0; list-style: none; -webkit-box-flex: 1; 248 5.2 Die »Where to Eat«-App display: -webkit-box; width: 100px; } nav li a { display: -webkit-box; -webkit-box-flex: 1; -webkit-box-pack: center; border-radius: 3px; margin: 3px 2px 2px 2px; font-size: 9.5px; font-weight: bold; text-align: center; color: #aaa; text-decoration: none; -webkit-box-align: end; background-repeat: no-repeat; background-position: center 3px; background-size: 35px 25px; } nav li a.aktiv { background-color: rgba(255,255,255,.15); color: #fff; } a[href='#karte'] { background-image: url(../bilder/karte.png); } a[href='#uebersicht'] { background-image: url(../bilder/uebersicht.png); } a[href='#optionen'] { background-image: url(../bilder/optionen.png); } 5 Listing 5.1 Das Stylesheet der Toolbar Jetzt sieht Ihr Navigationselement schon eher nach einer Symbolleiste aus (Abbildung 5.18). Die Symbole sind transparente PNG-Bilder. In diesem Fall wurden wir in der kostenlosen Symbolbibliothek »Icon Sweets« fündig. Sie können alle Symbole als Photoshop-Datei unter http://iconsweets2.com/ herunterladen und kostenlos in Ihren Projekten verwenden. 249 5 Positionsbestimmung Das Umschalten zwischen den Sektionen realisieren Sie per JavaScript: $('nav a').on('click',function(){ $('section, nav a').removeClass('aktiv'); $(this).addClass('aktiv'); $($(this).attr('href')).addClass('aktiv'); return false; }); Abbildung 5.18 Die fertige Navigationsleiste 5.2.7 Die Restaurantliste erstellen Widmen Sie sich nun der Restaurantliste und den Optionen. Noch fühlt es sich mehr wie eine Webseite und weniger wie eine mobile App an. Abhilfe schafft auch hier wieder CSS (Abbildung 5.19): ul { padding: 0; margin: 9px; list-style: none; border: 1px solid #a1a7ad; border-radius: 8px; font-size: 19px; font-weight: bold; box-shadow: 0 1px 0 #fff; } ul li { background: #f7f7f7; border-top: 1px solid #fdfdfd; border-bottom: 1px solid #cacaca; padding: 5px 10px; line-height: 34px; } ul li:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; border-top-color: #e5e5e5; } 250 5.2 Die »Where to Eat«-App 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; } 5 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, kommen Sie einem App-typischen Look & Feel schon sehr nahe. Zusätzlich zu diesen allgemeinen Formatierungen sind noch ein paar Spezialregeln vonnöten, die nur für die Übersicht bzw. die Optionen Anwendung finden: #uebersicht ul { overflow: hidden; -webkit-background-clip: padding; } 251 5 Positionsbestimmung #uebersicht ul li { line-height: 50px; padding-left: 5px; } #uebersicht ul li img { width: 50px; height: 50px; border-radius: 3px; display: inline-block; vertical-align: middle; margin-right: 5px; } #optionen li input { height: 34px; width: 34px; margin: 0; } Sorgen Sie nun mit JavaScript dafür, dass sich das An- bzw. Abwählen bestimmter Restauranttypen in den Optionen in der Übersicht niederschlägt (Abbildung 5.20): $('#optionen :checkbox').on('change', function(){ $('#uebersicht li.'+this.className) .toggleClass('versteckt'); }); Abbildung 5.20 Die Liste der Optionen auf dem iPhone und unter Android 252 5.2 Die »Where to Eat«-App Je nachdem, ob eine Checkbox angewählt ist oder nicht, wird den entsprechenden Restaurants in der Liste die Klasse versteckt hinzugefügt oder entfernt. 5.2.8 Der letzte Schliff Ihre Geolocation-App ist nun einsatzbereit. Ihre WebApp zeigt nun eine Karte mit Restaurants an und berechnet die Entfernungen korrekt zu Ihrer momentanen Position. Testen Sie die App während der Entwicklung immer wieder auf Ihrem Smartphone, um sicherzustellen, dass alles so funktioniert, wie es soll. Allerdings sieht das Ganze immer noch sehr nach einer Webseite aus, nicht zuletzt weil die Adressleiste des Browsers permanent sichtbar ist. Fügen Sie einen JavaScript-Befehl ein, um die Adressleiste zu verstecken: window.scrollTo(0,1); Natürlich sollten Sie außerdem verhindern, dass der Nutzer die Seite verkleinern bzw. vergrößern kann, die Aktivierung des Vollbildmodus ist ebenfalls ratsam. Schreiben Sie dazu, wie bereits beschrieben, Folgendes in den head-Bereich Ihres HTML-Codes: <meta name="viewport" content="width=device-width, initial-scale=1 , maximum-scale=1"/> <meta name="apple-mobile-web-app-capable" content="yes" /> Außerdem sollten Sie ein schönes Symbol für den Home-Bildschirm (Abbildung 5.21) sowie einen Ladebildschirm erstellen (Abbildung 5.22) und im head-Bereich des Dokuments verknüpfen: <link rel="apple-touch-icon-precomposed" href="/bilder/icon-ipad.png" sizes="72x72" /> <link rel="apple-touch-icon-precomposed" href="/bilder/icon-iphone-retina.png" sizes="114x114" /> <link rel="apple-touch-icon-precomposed" href="/bilder/icon-ipad-retina.png" sizes="114x114" /> <link rel="apple-touch-icon-precomposed" href="/bilder/icon-iphone.png" /> <link rel="apple-touch-startup-image" href="/bilder/splash-ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px)" /> 253 5 5 Positionsbestimmung <link rel="apple-touch-startup-image" href="/bilder/splash-iphone.png" /> Abbildung 5.21 Das App-Symbol, gestaltet mithilfe des Icon-Templates von http://appicontemplate.com/ 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 (Abbildung 5.22) als auch auf dem iPad (Abbildung 5.24). 254 5.2 Die »Where to Eat«-App 5 Abbildung 5.22 Mit einem Bildbearbeitungsprogramm, wie z.B. Photoshop, bereiten Sie einen Ladebildschirm vor. Abbildung 5.23 Die App funktioniert problemlos auch unter Android 255 5 Positionsbestimmung Abbildung 5.24 Die App auf dem iPad 5.3 More Fun mit Geodaten Die Google Maps APIs sind nur eine Möglichkeit, mit geografischen Daten ansprechende Apps zu kreieren. Darüber hinaus gibt es von verschiedenen Anbietern Schnittstellen, die es Ihnen ermöglichen, die Benutzerposition für unterschiedlichste Anwendungsfälle zu nutzen. Sie können die »Where to Eat«-App z.B. mit einer Liste aus der Qype-Bibliothek füttern, in der weltweit unzählige Restaurants gespeichert sind. Im Folgenden wollen wir Ihnen einige kostenlose APIs vorstellen, die ortsbezogene Daten bereithalten. 256 5.3 More Fun mit Geodaten 5.3.1 Qype-API Seit 2006 bietet die Hamburger Plattform Qype Restaurant- und Ladenbesitzern die Möglichkeit, ihre Örtlichkeiten im Netz zu präsentieren und von Benutzern bewerten zu lassen. Besonders in Deutschland ist so gut wie jedes Ladengeschäft verzeichnet. Die kostenlose API ermöglicht es App-Entwicklern, Beschreibungen und Bewertungen abzurufen und nach bestimmten Kriterien zu filtern (Abbildung 5.25). Eine ausführliche Dokumentation in deutscher Sprache finden Sie unter http:// www.qype.com/developers/api. Abbildung 5.25 Die Qype-API 5.3.2 foursquare-API Das soziale Netzwerk foursquare wurde 2009 von Dennis Crowley in New York gegründet. Nutzer können in Bars und Cafés »einchecken« und dafür Punkte und Belohnungen sammeln. Die kostenlose API kann für eigene Anwendungen genutzt werden (Abbildung 5.26), eine englischsprachige Dokumentation finden Sie unter https://developer.foursquare.com/. 257 5 5 Positionsbestimmung Abbildung 5.26 Die foursquare-API 5.3.3 Google Places Ähnlich wie bei Qype können Nutzer auch bei Google Places besuchte Örtlichkeiten bewerten und empfehlen. Seit Kurzem bietet der Service eine kostenlose API an (Abbildung 5.27), die sich aber noch in der Entwicklungsphase befindet. Eine kostenlose Entwicklervorschau finden Sie unter http://code.google.com/intl/de-DE/apis/ maps/documentation/places/. 5.3.4 Twitter-API Überall auf der Welt nutzen Menschen den beliebten Microblogging-Dienst Twitter, um Statusnachrichten und Neuigkeiten zu verbreiten. Eine wichtige Funktion ist die Option In der Nähe, bei der Sie nach Tweets in Ihrer Umgebung suchen können – z.B. um zu erfahren, was das aktuelle Stadtgespräch ist. Per API können Sie diese Funktion in Ihrer eigenen WebApp nutzen (Abbildung 5.28), eine englischsprachige Dokumentation finden Sie unter https://dev.twitter.com/docs/api. 258 5.3 More Fun mit Geodaten 5 Abbildung 5.27 Die Google-Places-API Abbildung 5.28 Die Twitter-API 259 5 Positionsbestimmung 5.3.5 Flickr-API Der Fotosharing-Dienst Flickr bietet Nutzern weltweit die Möglichkeit, eigene Fotos zu teilen und zu taggen. Eine wichtige Rolle spielt dabei der Ort, an dem das Foto entstanden ist. Eine kostenlose API bietet Ihnen die Möglichkeit, nach Fotos aus Ihrer Umgebung zu suchen – ideal für mobile WebApps (Abbildung 5.29). Die 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-Finder, über eine App, die sich merkt, wo Sie Ihr Auto geparkt haben, bis hin zu einer digitalen GPS-gestützten Schnitzeljagd mit Ihren Freunden. Da geht einiges! 260 Index Index .apk-Datei........................................................... 399, 413 .getCurrentPosition() ............................................. 227 .htaccess ............................................................ 292, 309 .ipa-Datei ...........................................................398, 409 :active ............................................................................ 113 :first-child ..................................................................... 49 :last-child ...................................................................... 49 @font-face....................................................................171 @font-face Generator............................................. 172 @media ........................................................................133 @-webkit-keyframes.............................................. 201 3D-Animationen ...................................................... 382 3G-Verbindung ........................................................... 67 4-Finger-Swipe ...........................................................110 5-Finger-Pinch............................................................110 A Abbuchungsvorgang.................................................25 Abzeichen .................................................................... 121 Achsenbewegungen ............................................... 263 Achsenwerte ..............................................................268 acronym .........................................................................41 ActiveX-Objekt.................................................180, 190 Adaptionsrate ...................................................... 36, 69 Add Key........................................................................ 395 Add2Home ..................................................................417 addClass......................................................................... 94 Administratorenrechte ............................................ 31 Adobe ........................................................................... 383 Adobe Flash...........................................................36, 171 Adobe InDesign........................................................160 Adobe Photoshop ............................................. 45, 220 Adobe Typekit.................................................... 173, 177 Adressleiste................................................................ 253 Advanced Audio Codec High Efficiency ..........193 Advanced Audio Codec Low Complexity........193 Advanced Audio Coding (AAC) ..........................190 AJAX ................................................................................ 87 Konzept..................................................................... 84 Versand ................................................................... 343 Ajax Spinner .............................................................. 120 AJAX-Request ............................................................ 376 Aktien-App ..................................................................128 Aktiengraph ................................................................128 alert ...............................................................................268 All in one ..................................................................... 107 Alleinstellungsmerkmal Siehe USP Android Besitzer....................................................................... 31 Geräte ........................................................................64 Marketplace .......................................................... 418 SDK .......................................................................... 390 Version ......................................................................30 Android Developer...................................................412 Android Developer Console .................................412 Android Market ........................................................396 Android Marketplace ............................................... 26 Android-Fans..............................................................135 Animationen ............................................................. 196 Animationsdurchlauf ............................................ 196 Animationsrichtung.............................................. 202 Anschnitt .................................................................... 163 Anwendungsbereiche.............................................135 Apache.............................................................................14 Apache Cordova ........................................................381 Apache Foundation................................................. 383 API..................................................................................239 API_KEY .......................................................................363 API-Schlüssel .............................................................362 App Store........................................................................25 Zulassungsrichtlinien....................................... 408 App-Datei ................................................ 408, 409, 414 append ........................................................................... 95 appendTo .....................................................................331 App-Framework........................................................401 App-Icons ..................................................................... 80 App-ID ..........................................................................394 Apple Developer Account .................................... 391 Apple Universal ........................................................ 186 AppleID .......................................................................409 apple-touch-icon-precomposed ...........................81 Application Loader................................................. 408 Application-Objekt.................................................. 352 App-Schemata............................................................ 114 Array ........................................... 354, 355, 367, 373, 377 aside .............................................................................. 130 Aside Magazine................................................. 159, 417 Asynchron ................................................................. 240 Asynchronous JavaScript And XML ................... 87 attr ...................................................................................94 431 Index Audio .................................................................. 190, 402 Audio Interchange File Format ...........................193 Audioformate.............................................................193 Auflösungen ............................................................... 127 Automotive Agenda .............................................. 403 autoplay........................................................................182 Autoplay-Attribut.....................................................183 Browserentwicklung ................................................ 36 Browsermarkt .............................................................30 Browserplugin............................................................. 36 Browserspiele ............................................................ 219 Bundle ID ................................................................... 405 Bundle Identifier......................................................394 button.............................................................................111 B C background-size.................................................56, 273 Badges ........................................................................... 121 Baker Framework..................................401, 402, 403 Barcode-Scanner .....................................................400 Base64-Format.......................................................... 107 Baseline Profil ........................................................... 184 Bedienanweisungen ............................................... 144 Bedienelemente ................................................. 22, 139 Bedienmuster.....................................................118, 139 Bedienoberfläche..............................................139, 311 Bedienschema...........................................................140 before ............................................................................. 95 beginPath.....................................................................213 Benutzer ....................................................................... 137 Benutzerablauf ..........................................................139 Benutzeroberfläche ..................................28, 135, 144 Benutzerposition..................................................... 227 Benutzerschemata ..................................................109 Benutzerworkflow....................................................139 Berners-Lee, Tim .........................................................35 Beschleunigungskurve......................................... 308 Betriebsbedingungen ............................................. 135 Bewegung ................................................................... 262 Bewegungsachsen ...................................................264 Bewegungssensor.........................200, 261, 381, 388 Bezahlprozess........................................................ 25, 27 bezierCurveTo............................................................213 Bézierkurve .................................................................213 Bildschirmauflösungen .......................................... 63 Bildschirmtastatur .................................................... 65 Bit-Raten...................................................................... 184 Blackberry.....................................................................30 Blindtextgenerator .................................................. 155 blur ...................................................................................91 Bookmark ................................................................... 416 Bookmark-Funktion ................................................375 Bookmarklet .............................................................. 293 border-radius .............................................................. 54 box-shadow ........................................................... 55, 58 CACHE ....................................................... 289, 290, 291 Cache-Größe ..............................................................289 Cache-Manifest.........................................................289 Datei.........................................................................289 Caching-Mechanismus..........................................289 Calhoun, David ........................................................... 76 Callback-Funktion ......................... 227, 228, 241, 359 Camera+ ........................................................................ 26 Canvas ......................................................................... 208 Canvas-Bibliotheken ............................................. 220 Carousel..................... 116, 117, 128, 350, 375, 376, 377 Carousel-View ............................................................375 center...............................................................................41 Certificates Siehe Zertifikat Cesar Animation Tool ............................................ 199 change .............................................................................91 Checkbox ......................................................................49 Claim............................................................................. 136 Clear ...............................................................................122 click...................................................................................91 Codebasis ...................................................................... 28 Codecs ........................................................................... 181 Codiqa .......................................................................... 347 Codiqa Interface-Builder.......................................349 Comic Sans ................................................................. 170 Context ....................................................................... 208 controls.........................................................................182 Creative-Commons................................................. 316 CSS ................................................................................... 42 Befehle ....................................................................... 43 Rastersysteme .......................................................147 CSS Reset .....................................................................298 CSS3 ................................................................................. 42 Effekte .........................................................................53 CSS3-Definitionen ..................................................... 63 CSS-Animations........................................................ 196 CSS-Transitions......................................................... 196 Cufon ............................................................................. 171 432 Index D Darstellungstechnologien .....................................30 data-add-back-btn ................................................... 334 data-back-btn-text .................................................. 334 data-icon ......................................................................321 datalist ............................................................................41 data-position .............................................................320 data-role ....................................................................... 315 data-tap-toggle .........................................................320 data-theme.................................................................320 data-transition...........................................................321 Date.now() ..................................................................303 Dateisystem ................................................................. 67 Datenbank .................................................................. 328 dblclick............................................................................91 Default Layout ........................................................... 155 Definitionssprache ....................................................35 Design Made in Germany .....................................178 Developer Account....................................................................391 Schlüssel ................................................................. 392 Zertifikat..................................................................391 Devices......................................................................... 393 Diagrammachsen .................................................... 367 Diagramme ....................220, 350, 361, 365, 366, 371 Dia-Shows .....................................................................117 DIN 69901 .................................................................... 135 Document Object Model ........................................ 86 DOM-Baum .................................................................. 86 DOM-Objekte .............................................................221 Don't Listen, observe.............................................. 144 DoubleTouch.............................................................109 Drag & Drop................................................................ 118 Droid Sans ...................................................................357 Dropdown-Feld..........................................................341 E ease-in .......................................................................... 199 ease-in-out.................................................................. 199 ease-out ....................................................................... 199 eBooks...........................................................................158 EDGE ............................................................................... 67 Eingabefelder .............................................................139 Einkaufszettel............................................................296 Einsatzort.....................................................................134 Ein-Tasten-Telefon.................................................... 28 Elevator Pitch .............................................................136 Elternelement ............................................................. 47 E-Mail.............................................................................341 E-Mail-Header ........................................................... 345 Embed-Code............................................................... 186 Endlosschleife .......................................................... 202 Entfernungsberechnung ......................................244 Entwickler-Account ....................................... 404, 411 Entwurfssoftware ....................................................140 Entwurfs-WebApp ...................................................140 Erdradius.....................................................................244 Erfolgsmeldung ........................................................346 Erwartungshaltung .................................. 114, 121, 134 Evans, Caleb ............................................................... 222 EventHandler ...............................................................91 EventListener .......................217, 303, 304, 308, 369 Ext JS .............................................................................350 Extra High Density....................................................64 Extra Large Screen.....................................................64 F Facebook ...................................................................... 118 Facebook-Apps.......................................................... 425 fadeIn..............................................................................96 fadeOut ..........................................................................96 fadeToggle ....................................................................96 Fahrinfo-App ..............................................................134 Fahrstuhlfahrt........................................................... 136 FALLBACK ...................................................................289 Farben............................................................................119 Farbenblindheit.........................................................119 Farbtransparenzen................................................... 211 Feed ...............................................................................269 Fehlberührungen.................................................... 308 Fernbedienung ..........................................................122 FF Unit ...........................................................................178 figcaption......................................................................40 figure...............................................................................40 FileZilla............................................................................14 fill ....................................................................................213 fillRect ......................................................................... 209 fillText ...........................................................................215 Financial Times................................27, 289, 290, 383 Fingerbewegungen ..................................................217 Fingerkuppe................................................................110 first-child.......................................................................49 Flash -> s. Adobe Flash Flash of Unstyled Content.................................... 105 Flashplugin.................................................................180 Flash-Widget ..............................................................180 Flavius Josephus....................................................... 201 433 Index Flick ................................................................................110 Flickr .........................56, 155, 260, 261, 265, 269, 270, 274, 275, 276, 384 Account...................................................................270 Feed ..........................................................................269 Fotostream ............................................................269 ID ...............................................................................270 Flickr-API........................................................... 258, 260 Flugmodus ................................................................. 287 focus.................................................................................91 font ...................................................................................41 Font-Service ................................................................ 173 font-size......................................................................... 45 FontSquirrel................................................................ 173 font-style...................................................................... 177 font-weight.................................................................. 177 footer .............................................................................. 47 Formelemente .......................................................... 342 Formular ......................................................................312 Formulardaten.......................................................... 342 Formvalidierung ...................................................... 343 Förster-App .................................................................123 Fotogalerie-App........................................................320 FOUC............................................................................. 105 foursquare ...................................................................257 foursquare-API...........................................................257 Frage-Antwort-App ..................................................139 frame ...............................................................................41 Frame-Raten .............................................................. 184 Framework .................................................................. 311 Franchise..................................................................... 166 FTP-Server......................................................................14 Fullscreen-Option.................................................... 354 Funkloch...................................................................... 287 Funktionsbeschreibung......................................... 135 Für Web und Geräte speichern ................. 102, 103 Fußzeile ........................................................................319 Gerätehardware.......................................................... 28 Geschlossene Systeme............................................. 26 Geschwindigkeitszuwachs...................................289 Gestaltungsprinzipien...........................................109 Gesten ............................................................ 28, 110, 121 getContext................................................................. 209 getJSON ..................................................................98, 331 Git................................................................................... 397 Git Repository ........................................................... 397 Gittermodel Siehe Wireframes Global Positioning System .................................. 225 Google Analytics ...................................................... 383 Google Checkout.......................................................413 Google Loader ........................................................... 337 Google Mail .............................................................21, 22 Google Maps .............................................................. 232 Google Maps JavaScript API........................ 238, 247 Google Music............................................................... 26 Google Places............................................................. 258 Google Play................................................................... 26 Google Web Font Directory ..................................173 Google Web Fonts.....................................................173 google.maps.Marker............................................... 242 Google-Places-API.................................................... 259 GPS................................................................................. 225 Abfragen .................................................................229 Empfänger ............................................................. 225 Koordinaten ..........................................................339 Graphen...................................................................... 220 Gravitation .................................................................262 Greenwich...................................................................226 Grid-Elemente........................................................... 163 Grundlinienraster ....................................................152 GUI-Template.............................................................145 Gummibandeffekt..................................................... 74 Gutenberg................................................................... 169 Gutters ..........................................................................153 G H Game-Engines............................................................219 GDlib.............................................................................220 Gebühr ......................................................................... 383 Geodaten..................................................................... 256 Geofunktionen ........................................................ 260 Geolocation................................................................246 Geolocation-App...................................................... 253 Geoposition ............................................................... 225 Georgia......................................................................... 170 H.264 ............................................................................. 184 Halbmobil...................................................122, 126, 134 Hallo Welt ............................................................ 84, 352 Handskizze .................................................................. 141 Handysendemasten ............................................... 225 Haptik............................................................................ 112 Hardwarebeschleunigt .......................................... 196 Hardwarefunktionen ............................................400 Hardwarekomponenten ....................................... 383 434 Index Hauptpfad.................................................................. 290 Header.......................................................................... 130 header............................................................................. 47 Helvetica ......................................................................357 Hewlett-Packard.........................................................30 HEX............................................................................45, 56 Hey Ya ...........................................................................261 hide..................................................................................96 High Density................................................................ 64 Hilfslinien....................................................................147 Hintergrundbild................................................... 42, 57 Hintergrundfarbe ...................................................... 42 Hintergrundmusik.......................................... 123, 193 Hintergrundmuster................................................. 317 Hintergrundprozess ................................................. 24 Hirnströme .................................................................142 Home-Bildschirm ...................................................... 79 Home-Button .............................................................375 Hörsaal..........................................................................123 hover.........................................................................66, 91 HTC.................................................................................. 29 htdocs.............................................................................. 12 HTML5 .............................................................................35 Formularfeldtypen ............................................... 76 Showcase................................................................... 31 HTML5 Developer Plattform............................... 425 HTML5-Apps ................................................................. 31 HTML-MP3-Player ....................................................192 Hybridkarte................................................................ 234 Hyperlink .......................................................................35 Hypertext.......................................................................35 Hypertext Markup Language.................................35 I Icon................................................................................ 322 Icon Sweets.................................................................249 iconMask..................................................................... 358 id....................................................................................... 46 IDC ................................................................................... 28 iframe ........................................................................... 186 ImageMagick .............................................................220 ImageOptim............................................................... 102 Infobox .........................................................................133 Infokasten................................................................... 130 Inhaltsverzeichnis....................................................375 initial-scale ................................................................... 79 innerHeight ................................................................. 86 innerWidth................................................................... 86 input ...............................................................................40 Instagram...................................................................... 23 Instant Messenger................................................... 193 Integer .......................................................................... 365 Interaktive Google-Karte ..................................... 240 Interaktivität ............................................................... 83 Interface-Builder ...................................................... 347 Interface-Elemente .................................................349 Interface-Framework............................................... 311 Interfaces .....................................................110, 114, 119 Internet Explorer .......................................................30 Internettraffic .............................................................30 Internetverbindung................................................ 287 Intros .............................................................................123 Investor........................................................................ 136 iOS Provisiong Portal .............................................393 iOS Provisioning Portal......................................... 391 ios-shake...................................................................... 267 iOS-Style ....................................................................... 311 IP-Adresse ...................................................................... 15 iPhone Mockup ........................................................140 iTunes Connect................... 404, 408, 409, 410, 411 App........................................................................... 404 J Java ................................................................................350 JavaScript ...................................................................... 84 Frameworks............................................................. 88 Konsole......................................................................89 Syntax........................................................................ 84 JavaScript-Interaktion..............................................111 jCanvas......................................................................... 222 JPEG ............................................................................... 102 jPlayer............................................................................191 jqPlot............................................................................ 220 jQTouch .......................................................................350 jQuery............................................................................. 88 Objekt ....................................................................... 90 Plugins.....................................................................268 jQuery Mobile ............................................................ 311 JSON ...........................................241, 269, 270, 271, 328 API.............................................................................362 Aufruf........................................................................271 Callbacks ................................................................ 365 Feed...........................................................................362 Feeds.........................................................................363 Format........................................................... 240, 363 435 Index Objekt .......................................................................241 Validator .................................................................241 JSON-Datei.................................................................. 243 JSON-Format................................................................ 98 JSONLint .......................................................................241 JSON-Objekt ...............................................................294 JSONP-Request.......................................................... 365 JSONStore....................................................................366 K Kamera................................................................ 382, 385 Kameraaufruf............................................................386 Karte....................................................................204, 230 Ausschnitt ..................................................... 233, 238 dynamische ..................................................232, 240 interaktive ............................................................. 238 Kartenmaterial .....................................................231 statische.................................................................. 232 Typ ............................................................................ 239 Karussell........................................................................117 keydown.........................................................................91 Keyframe.................................................. 196, 201, 306 keygen.............................................................................41 keypress..........................................................................91 keyup ...............................................................................91 Kill-Switch......................................................................27 Klassen .................................................................... 46, 49 verschachtelte ........................................................ 47 Klassendefinitionen ................................................. 47 Klassennamen ............................................................ 48 Kollektion ....................................................................174 Kolumnentitel ...........................................................167 Kommandozeilentool .............................................. 15 Kommunikationskonzept ....................................136 Kompass...................................................................... 229 Komplex-Symbiotisch............................................ 118 Konkurrenz .................................................................136 Konstruktor ...............................................................366 Kontaktformular..................................................... 340 Kontaktliste .................................................................117 Kontaktseite ...............................................................312 Kontraste .....................................................................123 Konverter.................................................................... 186 Konzeption........................................................ 109, 134 Kopfzeile ..................................................................... 374 Korpi, Joni ................................................................... 149 436 L Ladebalken .................................................................. 121 Ladebildschirm......................................................... 253 Ladekreis ..................................................................... 120 Ladezeiten....................................................................174 Laker Compendium ................................................401 Laker Starter Pack ................................................... 402 Landscape-Modus......................................................64 Large Screen.................................................................64 Lastenheft ....................................................................135 Latitude........................................................................226 Launch-Funktion .................................... 352, 353, 374 Lautstärketasten ........................................................ 26 Leckerli One ................................................................317 Lehni, Jürg....................................................................221 Leonello, Chris ......................................................... 220 LESS CSS ....................................................................... 149 Less CSS Framework ............................................... 149 Lichtverhältnisse ......................................................123 Lifestyle-Magazin .....................................................125 Lifestyle-Parameter..................................................137 linear............................................................................. 199 lineTo.............................................................................213 lipsum ...........................................................................197 Liste .......................................................................325, 333 Listeneinträge ........................................................... 139 Listenelemente..........................................................321 Listenrand.................................................................... 121 listview......................................................................... 327 Lizenz.............................................................................178 load.................................................................................. 93 localStorage.......................... 294, 295, 303, 304, 305 Lokale Suchmaschine............................................. 225 Lokaler Speicher .......................................................294 Longitude....................................................................226 LongTouch..................................................................109 Low Density .................................................................64 LTE.................................................................................... 67 M Magazin ........................................................................125 Magazin-App ............................................................... 26 MagazineGrid.............................................................158 Magazin-Frameworks .............................................. 26 Magazinlayout .......................................................... 166 Magazin-Mashup ..................................................... 372 Magic Land .................................................................. 118 Index Magnetresonanztomograf....................................143 mail ............................................................................... 345 manifestR.................................................................... 293 mark................................................................................40 Marker.......................................................................... 242 Markierungsstile...................................................... 236 Marktforschung ........................................................ 137 Marktumfeld ......................................................135, 136 Mashup ........................................................................ 372 Master-Detail...............................................................117 maximum-scale ......................................................... 79 Media Queries............................................................ 60 Medium Density ........................................................ 64 Mehrspaltigkeit .......................................................... 58 Meta-Tags...................................................................... 38 meter ...............................................................................41 Microblogging-Service .................................... 31, 258 Microsoft Visio .........................................................140 Midi-Kompositionen .............................................190 Mikrofon .............................................................. 28, 382 Miro Video Converter ............................................ 184 Mitbewerber-Apps ...................................................136 Mobilbereich ................................................................35 Mobile Layout .................................................... 153, 157 Mobile Safari....................................................31, 69, 73 Mobile WebKit ...........................................................183 Mobilgerät ...................................................................122 Model-View-Controller .........................................350 Module.........................................................................401 Motorola ....................................................................... 29 mousedown ..................................................................91 mousemove..................................................................91 MouseOver..................................................................110 mouseup ........................................................................91 MOV .............................................................................. 184 moveTo.........................................................................213 MP3................................................................................190 MPEG-4-Standard .................................................... 184 Multimedia-Anwendungen.................................180 Multimedia-Element..............................................190 Muster........................................................................... 317 MySQL ....................................................................14, 294 N Native Anwendungen.............................................381 Native Apps................................................................... 21 Nachteile ................................................................ 382 Vorteile.................................................................... 382 navbar ......................................................................... 320 Navigationselemente..............................................321 Navigationsgerät...................................................... 225 Navigationsleiste ........................................... 250, 320 Navigationssystem ................................................. 225 navigator.geolocation............................................ 227 Netbook ........................................................................122 Netscape ........................................................................30 NETWORK ...................................................................289 Newsticker ................................................................... 121 Nirvana ........................................................................ 287 Nokia............................................................................. 391 Nokia Communicator .............................................. 28 Normal Screen ............................................................64 Noticia Text.................................................................318 Notizen .........................................................................122 Nutzer-Flow.................................................................138 Nutzerforen................................................................388 Nutzertest ....................................................................142 Nutzerverhalten....................................................... 383 Nutzerzentriertes Design ......................................137 O Objective C........................................................ 382, 402 off ..................................................................................... 97 Offline..........................................................123, 287, 296 Offline-Apps............................................................... 287 Offline-Datenbank ..................................................294 Offline-Modus........................................................... 287 OGG Audio .................................................................190 OGG Theora................................................................ 184 OmniGraffle...............................................................140 on ..................................................................................... 97 ondevicemotion..............................................262, 263 opacity............................................................................ 58 Open Source.................................................................. 31 Open Type Format....................................................172 OpenAppMarket...................................................... 420 Open-Source-Framework ..................................... 383 Opera ..............................................................................30 Orientierung.............................................................. 261 outer margins.............................................................153 Outkast......................................................................... 261 output..............................................................................41 Overlays....................................................................... 102 437 Index P p.12 ................................................................................. 393 Pagina............................................................................167 Palm ................................................................................30 panel ............................................................................. 354 Paper.js..........................................................................221 Papierprototypen ..................................................... 141 Performancevorteil .................................................. 24 Pflichtenheft............................................................... 135 PhoneGap ....................................................................381 Plugins....................................................................400 PhoneGap Build ...................................................... 390 PHP............................................. 341, 342, 343, 344, 345 Pinch..............................................................................110 Pixelraster ...................................................................221 Pixelverdopplung.....................................................216 placeholder-Attribut ..............................................298 Plattformen..................................................................30 Android .....................................................................30 iOS...............................................................................30 Plattformunabhängig ...............................................22 Playbook........................................................................30 Play-Pause-Button................................................... 188 Plugin ...........................................................................268 PNG-24 ......................................................................... 102 PNG-8............................................................................ 102 PngOptimizer................................................... 102, 103 Polaroid ........................................................................261 Portrait-Modus ........................................................... 64 Position.................................................................. 42, 123 position.coords.accuracy...................................... 229 position.coords.altitude........................................ 229 position.coords.altitudeAccuracy..................... 229 position.coords.heading....................................... 229 position.coords.speed............................................ 229 position:fixed...............................................................73 Positionierung ...........................................................136 Positionsabfrage ...................................................... 228 Positionsbestimmung........................................... 225 Positionsdaten...........................................................337 Positionssensor........................................................ 382 poster.............................................................................183 Post-Its .......................................................................... 141 Präfixe .............................................................................53 prepend ......................................................................... 95 preserve-3d................................................................ 206 Privater Schlüssel .................................................... 392 Profil ..............................................................................391 Programmiersprachen .......................................... 382 438 Programmierung ......................................................134 progress ..........................................................................41 Prototypen ..................................................................143 Provisioning ..............................................................394 Provisioning Portal ................................................ 405 Provisioning Profil .................................................. 395 Pseudomobil...................................................... 122, 134 Public APIs....................................................................94 Publikation................................................................. 126 Puckey, Jonathan ......................................................221 Pupillenbewegungen ..............................................142 Pythagoras..................................................................244 Q Querverweise .............................................................375 Qype .............................................................................. 257 Qype-API ..................................................................... 257 R Radio-App ................................................................... 193 Radiobutton.................................................................49 Raster............................................................................ 148 Rastersystem ..............................................................147 Reason Why ............................................................... 136 Rechner........................................................................ 129 wissenschaftlicher .............................................. 129 Red Bull .......................................................................... 32 Registerreiter.............................................................. 114 Regularien.............................................................27, 382 Reliefkarte................................................................... 234 remove...........................................................................96 removeClass.................................................................94 Reset.............................................................................. 150 Retina-Displays..........................................................101 RGB .................................................................................. 45 RGBA .........................................................................56, 58 Rollball ........................................................................... 29 root ............................................................................... 290 Rotate ............................................................................110 rotate .............................................................................214 rotateY......................................................................... 206 Rot-Grün-Schwäche.................................................119 Route............................................................................. 338 Routenplanung............................................... 336, 340 Rundungsfehler........................................................ 367 Index S Samsung........................................................................ 29 Sandbox-Model .......................................................... 84 Satelliten ..................................................................... 225 Satellitenkarte........................................................... 234 Schablonen.................................................................. 141 -Methode ................................................................. 141 Schadsoftware............................................................. 26 Schaltfläche........................................................ 110, 139 Schlagschatten........................................................... 215 Schlüssel......................... 241, 294, 392, 393, 395, 396 Schlüsselbilder.......................................................... 201 Schlüsselbund........................................................... 392 Verwaltung............................................................ 392 Schriftart ....................................................................... 42 Schriftdarstellung.................................................... 170 Schriften..............................................................169, 178 Schriftgestaltung ..................................................... 169 Schriftgröße ................................................................. 42 Schriftschnitte ...........................................................174 Schriftstile ...................................................................174 Schüttelgeste ............................................................. 267 Scroll ..............................................................................110 Scrollverhalten .....................................................67, 74 Seitenwechsel............................................................. 315 Selection Colours...................................................... 152 Selektionsfarben ....................................................... 152 Selektoren.................................................................... 90 Sencha Touch ............................................................350 Syntax....................................................................... 351 Sencha Touch Charts...............................................361 Serien............................................................................ 367 Seriennummer ......................................................... 393 Serververbindungen .............................................. 107 sessionStorage .......................................................... 295 setTimeout ................................................................. 278 Shake-Event .............................................................. 280 Sharky............................................................................. 34 Shazam............................................................................23 Shoji ................................................................................117 Ansicht ......................................................................117 show................................................................................96 Sicherheitsbedenken.............................................. 229 sIFR ..................................................................................171 Signale........................................................................... 119 Signing ......................................................................... 395 Silbentrennung .......................................................... 62 Situation.......................................................................122 Situationsbeschreibung.........................................138 Skin...............................................................................300 Skriptsprache..............................................................341 SKU-Nummer........................................................... 405 slideDown.....................................................................96 Slider .............................................................................. 311 Slideshow ................................................................... 402 slideToggle.................................................................... 92 slideUp ...........................................................................96 Small Screen.................................................................64 Smaller ......................................................................... 105 Smartcover ..................................................................127 Social-Network-Anwendungen........................... 118 Soft-Hyphen................................................................. 62 Softwareentwicklung ..............................................135 Softwareschema......................................................... 22 Sonnenlicht.................................................................123 Sounddateien ............................................................190 Soundeffekte ............................................................. 193 Spalten .......................................................................... 117 Spiele..............................................................118, 127, 219 Splash Screen............................................................... 82 Spotlight-Suche .......................................................409 Stadtführer ..................................................................134 Standardlayout ..........................................................153 Standardstile...............................................................357 Startbildschirm..........................................................116 Static Maps API .........................................................236 Statusleiste .................................................................. 80 Stern-App ...................................................................... 26 Store-Betreiber............................................................ 26 Storyboard...................................................................137 Storyboard-Methode...............................................138 Straßenkarte .............................................................. 234 String ............................................................................ 365 strip_tags .................................................................... 345 stroke.............................................................................213 Stylesheet...................................................................... 42 submit .............................................................................91 Subtle Patterns....................................................70, 317 Suchmaschinen..........................................................40 Surfer-App ...................................................................123 SVG ............................................................................... 208 Swipe..............................................................................110 Symbian...................................................................... 390 Symbolleiste ............................................247, 248, 249 Systemschriften ....................................................... 170 439 Index T Tablet..............................................................................30 Android .....................................................................30 Apps...........................................................................126 Bildschirm ............................................................... 135 iPad.............................................................................30 Magazine ................................................................158 Markt .........................................................................30 Playbook...................................................................30 Tablet Layout.............................................................. 153 Tablet-Magazin.......................................................... 371 Tabs ...............................................................114, 123, 350 Tageslicht.....................................................................123 Tags ................................................................................. 38 Teehan+Lax.................................................................145 Testablauf ....................................................................143 Testlabor.......................................................................143 Testperson.................................................................. 144 Testsituation...............................................................143 Texteingabefeld ......................................................... 49 Texturen.......................................................................275 The Noun Project ..................................................... 322 Themeroller ............................................................... 347 Themes ........................................................................320 time .................................................................................40 Times New Roman .................................................. 170 Tippen ..........................................................................109 Titelleiste..............................................................113, 130 Titelzeile .......................................................................133 Todo-App .................................................................... 287 Todo-Liste ....................................... 287, 296, 297, 304 toggle.............................................................................. 92 toggleClass.................................................................... 94 Ton..................................................................................195 Toolbar...........................................................................115 toolbar..................................................................354, 373 Tooltip...........................................................................417 Tooltips........................................................ 66, 110, 220 Touch............................................................................109 Touch Charts ........................................... 350, 366, 371 Touch-Geräte.................................................... 109, 134 Touch-Geste..............................................................200 touchIcon.................................................................... 418 Touch-Oberfläche....................................................109 Touchscreen ................................................................ 29 touchstart .................................................................. 308 Transformation ........................................................205 Triangulieren............................................................. 225 440 Trojaner ..........................................................................27 Tutorial-Ansicht ........................................................ 117 Tweets........................................................................... 258 Twitter....................................................31, 118, 193, 258 Twitter Pitch .............................................................. 136 Twitter-API ................................................................. 258 Typografie................................................................... 168 U U-Bahn ..........................................................................123 Übertragungsgeschwindigkeit............................101 UDID .............................................................................393 UglifyJS.........................................................................104 UI Stencils .................................................................... 141 Umfragen.....................................................................137 Umgebung...................................................................123 Unique Selling Proposition Siehe USP Updatezyklus............................................................. 382 Usability-Labore........................................................142 Userflow ...................................................................... 139 user-scalable ................................................................ 79 USP................................................................................. 136 UTF-8....................................................................... 44, 172 V var ....................................................................................86 Vektorformate ......................................................... 208 Vektorgrafiken...........................................................221 Verbindungsgeschwindigkeit..............................123 Verdana........................................................................ 170 Verlaufsgenerator...................................................... 78 Versionen.....................................................................135 Verwendungsort .......................................................135 video .............................................................................. 181 Viewport.........................................78, 82, 132, 375, 377 Vimeo ........................................................................... 186 Viren ............................................................................... 26 Vollbild......................................................................... 130 Vollbildmodus ........................................................... 80 Vollbildvideos ............................................................132 Vollmobil .....................................................................122 Vorüberlegungen......................................................134 Index W X W3C-Konsortium ....................................................... 36 Wave ..............................................................................193 Wave-Dateien............................................................190 WebApp-Store ........................................................... 418 Webfonts..................................................................... 168 WebGL ............................................................................ 68 WebKit........................................................31, 35, 53, 196 -webkit-animation .................................................. 201 -webkit-animation-delay......................................203 -webkit-animation-direction ..............................202 -webkit-animation-duration...............................202 -webkit-animation-fill-mode....................203, 308 -webkit-animation-iteration-count .................202 -webkit-animation-name .....................................202 -webkit-animation-timing-function................203 -webkit-appearance ..................................................111 -webkit-backface-visibility.................................. 206 -webkit-linear-gradient ............................................77 -webkit-overflow-scrolling .................................... 74 -webkit-tap-highlight-color .................................. 113 -webkit-transform .......................................... 203, 281 -webkit-transform-style....................................... 206 -webkit-transition ....................................................197 Webmailer .....................................................................22 webOS.................................................................... 30, 391 Webschriften ..............................................................178 Webserver...................................................................... 12 Webspace ....................................................................... 12 Werkzeugleiste ...........................................................115 Werteinhalt ................................................................294 Wertepaar .......................................................... 241, 294 Werteschlüssel.......................................................... 242 Wetter-API .................................................................. 363 Wetter-App........................................................ 350, 361 Wetterdaten............................................................... 362 Wetterdiagramm ......................................................361 Wetterstation .............................................................361 Where to Eat...............................................................230 Wide Mobile Layout.................................................154 Wildcards .....................................................................291 window ..........................................................................86 Windows Phone .................11, 33, 141, 382, 383, 390 Wireframe Model .......................................................................140 Wireframes..................................................................139 Workflow......................................................................139 World Weather Online........................................... 362 X-Achse ........................................................................263 XAMPP ............................................................................ 12 Control Panel ........................................................... 13 Installation ............................................................... 12 Netzwerkkonfiguration .......................................14 Server .........................................................................20 Xcode ........................................................................... 408 XMLHttpRequest ....................................................... 84 xtype ............................................................................. 354 Y Y-Achse ........................................................................263 Yanone Kaffeesatz ....................................................172 YouTube ...................................................................... 186 Z Z-Achse.........................................................................263 Z-Beschleunigung....................................................263 Zeewe............................................................................ 418 Zeichen-App.............................................................. 208 Zeichensatz .................................................................. 45 Zeichnen.............................................................208, 216 Zeitschriftenabo ......................................................... 26 ZEN Player................................................................... 192 Zepto.js........................................................................ 100 Zertifikat...................................................................... 391 Developer ..............................................391, 392, 395 Zielgerät........................................................................135 Zielgruppe....................................................................134 Zielgruppenanalyse .................................................137 Zielgruppenvertreter...............................................137 z-index ........................................................................ 206 Zoombutton ..............................................................190 Zoomstufe ..................................................................239 ZooTool...........................................................................33 Zufallsfunktion......................................................... 272 Zufallszahl....................................................................281 Zulassungsrichtlinien App Store ............................................................... 408 Zulassungsverfahren...............................................415 Zum Home-Bildschirm........................................... 80 Zurück-Button........................................................... 334 Zwitschern.................................................................. 193 441