Auf einen Blick. Auf einen Blick

Auf einen Blick Auf einen Blick 1 Apps... 23 2 HTML5 in der mobilen Webentwickung... 37 3 Konzeption und Gestaltungsprinzipien... 109 4 HTML5 als Designwerkzeug... 149 5 Positionsbestimmung... 239 6 Auslesen des Bewegungssensors mit JavaScript... 275 7 Offline damit eine App in jedem Winkel der Welt funktioniert... 317 8 WebApps mit Frameworks entwickeln... 341 9 Native Anwendungen und App-Stores... 435 10 Windows Phone 8... 491 11 Weiterführende Informationen... 507

Inhalt Inhalt Vorwort... 13 Bevor s richtig losgeht Installation von XAMPP... 15 1 Apps 23 1.1 Native Apps vs. WebApps... 23 1.1.1 WebApps allgemein... 24 1.1.2 Native Apps auf mobilen Geräten... 24 1.1.3 Apples App Store, Google Play und Co.... 27 1.1.4 WebApps auf mobilen Geräten... 29 1.1.5 Native App oder WebApp?... 30 1.2 Warum ist es sinnvoll, auf Touch-Geräten zu entwickeln?... 30 1.2.1 Der Mobilsektor boomt... 30 1.2.2 Browsertechnik auf Mobilgeräten... 32 1.3 Showcase das können HTML5-Apps... 33 2 HTML5 in der mobilen Webentwickung 37 2.1 HTML5 Definition und aktueller Stand... 37 2.1.1 HTML als Standard... 38 2.1.2 HTML5 als Marketinginstrument... 38 2.1.3 HTML5 als Flash-Ablösung?... 38 2.2 Was HTML5 bietet... 39 2.2.1 Der Aufbau einer einfachen HTML5-Seite... 39 2.2.2 Semantische Elemente in HTML5... 41 2.3 CSS3 Grundlagen und Neuerungen... 44 2.3.1 Was ist eigentlich CSS?... 44 2.3.2 Styling mit einer CSS-Datei... 45 2.3.3 Gestalten mit CSS Tipps und Tricks... 50 2.3.4 Die Neuerungen von CSS3 welche sind heute schon einsetzbar?... 55 5

Inhalt 2.4 Desktop vs. Mobile die Unterschiede... 65 2.4.1 Möglichkeiten und Limitationen von HTML5 auf einer mobilen Plattform... 70 2.4.2 HTML und CSS für kleine Bildschirme... 71 2.4.3 Von der Webseite zur WebApp... 80 2.5 Entwickeln mit JavaScript-Frameworks Zepto und Co.... 85 2.5.1 Die JavaScript-Syntax... 86 2.5.2 Einführung in Zepto... 90 2.5.3 Wichtige Funktionen in Zepto... 96 2.6 JavaScript auf dem iphone testen... 100 2.7 Die Geschwindigkeit einer WebApp verbessern... 101 2.7.1 Kompression... 101 2.7.2 Die richtige Reihenfolge... 105 2.7.3 So wenig Anfragen wie möglich... 105 3 Konzeption und Gestaltungsprinzipien 109 3.1 Touch-typisches Design in der Praxis... 109 3.1.1 Der feine Unterschied zwischen Berühren und Klicken... 109 3.1.2 Der Anwender erwartet so einiges Aufbau einer App... 114 3.1.3 Auf der Couch oder in der Bahn... 123 3.1.4 Alles eine Frage der Ausrichtung... 128 3.2 Eine App konzipieren... 134 3.2.1 Vorüberlegungen was genau soll meine WebApp können?... 135 3.2.2 Gedanken und Inhalte ordnen... 136 4 HTML5 als Designwerkzeug 149 4.1 Ordnung halten mit CSS-Rastersystemen... 149 4.1.1 Einsatz des Less CSS Frameworks... 151 4.1.2 Das Raster für einen speziellen Einsatz Magazine Grid... 160 4.2 Mal was anderes als Arial Webfonts... 170 4.2.1 Schriften im Web... 172 4.2.2 Webfonts... 174 4.2.3 Font-Services... 175 4.2.4 Vor- und Nachteile von Webfonts... 179 6

Inhalt 4.2.5 Vorsicht! Schriften und deren Lizenzen... 180 4.2.6 Webschriften in Aktion... 180 4.3 Hinzufügen von Audio und Video... 182 4.3.1 Video... 182 4.3.2 Audio... 192 4.4 Animationen mit CSS... 198 4.4.1 CSS-Transitions und CSS-Animations... 199 4.4.2 Animieren mit -webkit-transition... 199 4.4.3 Animieren mit -webkit-animation... 203 4.4.4 Manipulation mit -webkit-transform... 206 4.5 Animationen mit Adobe Edge Animate... 211 4.5.1 Adobe Edge Animate... 211 4.5.2 Ihr erster eigener Teaser... 211 4.5.3 Die Oberfläche von Adobe Edge Animate... 212 4.5.4 Einstimmung, erste Vorüberlegungen und Unterteilung des Teasers... 213 4.5.5 Voreinstellungen: Die Einrichtung der Bühne... 213 4.5.6 Teil 1: Textelemente anlegen und animieren... 214 4.5.7 Teil 2: Fakten, schnell und knackig!... 217 4.5.8 Teil 3: Der Abbinder und der»call to Action«... 218 4.5.9»Call to Action«Erstellung eines Buttons... 219 4.5.10 Der HTML-Code von Adobe Edge Animate im Detail... 221 4.5.11 Abschließende Worte zu Adobe Edge Animate... 222 4.6 Zeichnen mit JavaScript das canvas-element... 223 4.6.1 Erster Schritt: Canvas und Context registrieren... 223 4.6.2 Grundlegende Funktionen... 224 4.6.3 Zeichnen per Touch-Eingabe... 231 4.6.4 In der Praxis Canvas oder CSS?... 234 4.6.5 Canvas-Bibliotheken... 235 5 Positionsbestimmung 239 5.1 Die Positionsbestimmung mit HTML5... 240 5.1.1 Weitere Eigenschaften der Positionsbestimmung... 243 5.2 Die Where-to-Eat-App... 244 5.2.1 Position auf einer statischen Karte eintragen... 246 5.2.2 Interaktive Karten mit der Google Maps JavaScript-API einbinden... 253 5.2.3 Liste der Restaurants laden und ausgeben... 255 7

Inhalt 5.2.4 Den Abstand zwischen zwei Koordinaten berechnen... 258 5.2.5 Die Programmoberfläche... 260 5.2.6 Eine Symbolleiste einfügen... 262 5.2.7 Die Restaurantliste erstellen... 265 5.2.8 Der letzte Schliff... 267 5.3 More Fun mit Geodaten... 270 5.3.1 Yelp-API... 271 5.3.2 foursquare-api... 271 5.3.3 Google Places... 272 5.3.4 Twitter-API... 272 5.3.5 Flickr-API... 273 6 Auslesen des Bewegungssensors mit JavaScript 275 6.1 Diese Daten liefert der Bewegungssensor... 276 6.2 Vorüberlegungen zur App»Shake it like a Polaroid picture«... 279 6.3»Shake it like a Polaroid picture«die Umsetzung... 280 6.3.1 Die HTML-Datei... 280 6.3.2 Laden eines Bildes aus dem Fotodienst Flickr via JSON... 283 6.3.3 Die CSS-Datei... 289 6.3.4 Das Laden eines Polaroids... 290 6.3.5 Das Sahnehäubchen eine leichte Rotation des Polaroids... 295 6.4 Die Anzeige eigener Bilder mit dem Input-Element... 300 6.4.1 Einführung in den Dateiupload ab ios 6 und Android 2.2... 300 6.4.2 Erweitern der Shake-it-WebApp um eigene Fotos Übersicht... 302 6.4.3 Abschließende Worte/Einschränkungen... 315 7 Offline damit eine App in jedem Winkel der Welt funktioniert 317 7.1 Abhilfe schafft das Cache-Manifest... 319 7.1.1 Die Struktur der Cache-Manifest-Datei... 319 7.1.2 Ihre erste Cache-Manifest-Datei... 320 7.1.3 Wann werden welche Daten gecached?... 322 7.1.4 Die Cache-Manifest-Datei im Einsatz... 322 8

Inhalt 7.2 Der Local Storage die Offline-Datenbank... 324 7.2.1 localstorage-funktionen... 324 7.2.2 Temporäre Speicherung von Daten im Session Storage... 325 7.3 Die Offline-To-do-App... 326 7.3.1 Welche Anforderungen muss Ihre To-do-App erfüllen?... 326 7.3.2 Der Wireframe der To-do-App... 327 7.3.3 Funktionsbezogene Animation... 336 7.3.4 Zusätzliche EventHandler... 338 7.4 Checkliste zum Überprüfen der Offline-Fähigkeit einer WebApp... 339 8 WebApps mit Frameworks entwickeln 341 8.1 Entwicklung einer WebApp mit jquery Mobile... 341 8.1.1 Zum Heiteren Hering ein Fischrestaurant als WebApp... 342 8.1.2 Die Startseite... 343 8.1.3 Kurze Kaffeepause ein Blick hinter die Kulissen von jquery Mobile... 354 8.1.4 À la Carte die Menüseite... 355 8.1.5 Implementierung einer Google Maps-Karte inklusive Routenplanung... 366 8.1.6 Ein Kontaktformular mithilfe von PHP... 371 8.1.7 jquery Mobile-Apps mit dem ThemeRoller und dem Interface-Builder von Codiqa noch schneller entwickeln... 378 8.2 Die Entwicklung einer App mit Sencha Touch... 380 8.2.1 Installation und erste Schritte mit Sencha Touch... 381 8.2.2 Interaktive Diagramme mit Sencha Touch Charts die Wetterstation... 393 8.2.3 HTML5-Tablet-Magazin mit Sencha Touch... 402 8.3 Responsive Apps mit Twitter Bootstrap... 411 8.3.1 Was ist das Responsive Webdesign?... 411 8.3.2 Was ist Bootstrap?... 411 8.3.3 Grundlagen... 412 8.3.4 Die Instagram-App... 420 8.3.5 Ressourcen... 430 9

Inhalt 9 Native Anwendungen und App-Stores 435 9.1 Eine WebApp wird zur nativen Anwendung... 435 9.1.1 Die Vor- und Nachteile einer nativen App... 435 9.1.2 Die Erstellung einer nativen App mit PhoneGap (Apache Cordova)... 437 9.1.3»Shake it like a Polaroid picture«die native Version... 438 9.1.4 Die kompilierten App-Dateien mithilfe von PhoneGap Build erstellen... 444 9.1.5 Apple-Zertifikate und Profile... 446 9.1.6 Einbinden von Zertifikat und Profil in PhoneGap Build... 450 9.1.7 Endlich! Das Hochladen der Shake-it-like-a-Polaroidpicture-Daten... 451 9.1.8 Die App-Datei auf dem Endgerät installieren... 452 9.1.9 Icon- und App-Namen in PhoneGap Build anpassen... 455 9.1.10 Abschließende Worte zu PhoneGap und PhoneGap Build... 455 9.2 Ein Spiel mit PhoneGap... 456 9.2.1 Die Welt der Spiele... 457 9.2.2 Die Grundausstattung... 458 9.2.3 Runde für Runde JavaScript, die Erste... 460 9.2.4 Die Positionierung einer Schießscheibe... 463 9.2.5 Das Resultat einblenden... 464 9.2.6 Hinzufügen der PhoneGap-Funktionen... 465 9.2.7 Lasset die Duelle beginnen... 469 9.3 Eine native Magazin-App mit Laker... 469 9.4 Die Veröffentlichung einer App in einem App-Store... 472 9.4.1 Das Veröffentlichen einer App in Apples App Store... 472 9.4.2 Das Veröffentlichen einer App in Google Play... 479 9.5 Publizieren der WebApp in einem Store oder als Webseite... 483 9.5.1 Auf den Vollbildmodus hinweisen... 483 9.5.2 Die Alternative zu App-Stores OpenAppMarket... 485 9.5.3 Weitere Möglichkeiten... 490 10 Windows Phone 8 491 10.1 Was ist Windows Phone?... 491 10.1.1 Der Browser... 492 10.1.2 Gestaltungsprinzipien des Modern UI... 493 10

Inhalt 10.1.3 Grundlagen Raster... 495 10.1.4 Die To-do-App... 499 10.1.5 Zum Home-Bildschirm hinzufügen... 503 10.1.6 Weiterführende Infos... 504 A Weiterführende Informationen 507 A.1 HTML5 und CSS3... 507 A.2 JavaScript und nützliche Tools... 508 A.3 ios, Apple... 508 A.4 Android, Google... 509 A.5 Technologie und Gadgets... 509 A.6 Digital Publishing... 510 A.7 Design und Inspiration... 510 A.8 Sonstiges... 511 A.9 Interessante Twitter-Kontakte... 511 Index... 513 11

Kapitel 3 Konzeption und Gestaltungsprinzipien 3 Eine App weist im Normalfall eine Menge Gemeinsamkeiten mit klassischer Software auf. Vom Prinzip her löst sie, genau wie ein herkömmliches Programm, ein Problem ob dies nun die Frage nach dem aktuellen Fahrplan oder nach dem Weg zur nächsten Bank ist. Was die App allerdings z. B. von einem normalen Programm unterscheidet, sind deren Einsatzort und Bedienung. Aber dies ist nur der Anfang. In diesem Kapitel lernen Sie die Eigenheiten einer Touch-Oberfläche kennen und steigen in die wichtige Konzeptionsphase einer App ein. 3.1 Touch-typisches Design in der Praxis Sie haben bisher schon einige neue HTML5- und CSS3-Definitionen kennengelernt und für einen Jaguarhai Ihre erste kleine WebApp programmiert. Dieses Kapitel führt Sie in die Theorie von App-Elementen und Benutzerschemata ein und erläutert, was zu einer Touch-Oberfläche alles dazugehört. 3.1.1 Der feine Unterschied zwischen Berühren und Klicken Im Gegensatz zu Desktopsystemen gibt es auf Touch-Geräten keine Maus, also auch keinen Mauszeiger und somit keine linke und rechte Maustaste. Die Eingabe erfolgt vielmehr mit dem Finger direkt auf dem Bildschirm. Folglich klicken Sie die Elemente nicht an, sondern berühren sie oder tippen sie an. Die fehlende rechte Maustaste wird durch den sogenannten LongTouch ersetzt, bei dem der Nutzer seinen Finger für einige Sekunden auf ein Element hält. Analog zu Mausklicks haben sich die folgenden Begriffe durchgesetzt: Touch einfache Berührung eines Elements mit einem Finger DoubleTouch schnelles doppeltes Antippen mit einem Finger LongTouch langes Antippen mit einem Finger Das fehlende Mausrad wird durch zwei Gesten ersetzt, die horizontales und vertikales Rollen durch den Inhalt ermöglichen: 109

3 Konzeption und Gestaltungsprinzipien Scroll vertikales Ziehen des Fingers auf dem Bildschirm Swipe horizontales Ziehen des Fingers auf dem Bildschirm Flick schnelles horizontales Ziehen des Fingers auf dem Bildschirm Auf multitouch-fähigen Geräten, also allen modernen Smartphones und Tablets, stehen dem Nutzer weitere Gesten zur Verfügung, die über das einfache Antippen hinausgehen: Pinch zwei Finger werden auf dem Bildschirm zueinander- oder auseinanderbewegt, um ein Element bzw. den Bildschirminhalt zu vergrößern oder zu verkleinern. Rotate zwei Finger werden auf dem Bildschirm im Kreis bewegt, um ein Element zu drehen. Auf ios-geräten haben sich außerdem die folgenden Gesten etabliert: 4-Finger-Swipe vier Finger werden gleichzeitig horizontal bewegt, um auf dem ipad zwischen Apps hin- und herzuwechseln. 5-Finger-Pinch fünf Finger werden gleichzeitig zueinander hinbewegt, um auf dem ipad eine App zu schließen. Shake das Gerät wird geschüttelt, um eine Eingabe oder eine Aktion zu widerrufen. Soweit die Theorie. Wir werden im Folgenden die englischen Begriffe verwenden, da diese als EventHandler-Bezeichnungen in JavaScript Verwendung finden. Besonders wichtig für touch-basierte Interfaces ist es, dass alle interaktiven Elemente von Beginn an für die Eingabe per Antippen konzipiert werden. Eine menschliche Fingerkuppe hat in etwa eine Grundfläche von 1 1 cm. Alle Buttons, Eingabefelder oder Checkboxen sollten daher mindestens genauso groß sein und über ausreichend Abstand zu Nachbarelementen verfügen, um Fehler beim Antippen zu vermeiden. Im Gegensatz zu einem Mauszeiger verdeckt ein Finger beim Antippen das betreffende Element fast vollständig; die Hand verdeckt dabei große Teile des restlichen Bildschirms. Aus diesem Grund klappen sich Menüs unter ios von unten nach oben auf der Inhalt soll sofort lesbar sein und nicht verdeckt werden. Ebenso gibt es keinen Mouseover-Zustand. Menüs, die sich bei Mausberührung öffnen, oder Tooltips mit wichtigen Hinweisen funktionieren auf den meisten Geräten nicht. Lediglich das Samsung Galaxy S4 hat ein vergleichbares Feature namens Air View, bei dem der Finger sich nur in der Nähe des Displays befinden muss, um eine Vorschau zu öffnen. 110

3.1 Touch-typisches Design in der Praxis In der Praxis der Bau eines Buttons Aber genug der Theorie! In einem kleinen Beispiel bauen Sie nun mit HTML und CSS einen touch-fähigen Button. 1. HTML-Element auswählen Zunächst gilt es, ein geeignetes HTML-Element für die Interaktion auszuwählen. Generell könnten Sie jedes Element mit einem entsprechenden EventHandler versehen und damit zu einem Button machen. Die HTML-Spezifikation sieht jedoch zwei Elemente dafür vor: a und button. Den Hyperlink a verwenden Sie vor allem dann, wenn Sie von einem HTML-Dokument zu einem anderen wechseln oder innerhalb eines Dokuments zu einem Anker springen möchten. Für eine reine JavaScript-Interaktion verwenden Sie das button-element: 3 <button>klick mich!</button> Abbildung 3.1 Ein HTML-Button auf dem iphone (links) und unter Android (rechts) 2. Größe anpassen Der Button ist nun bereits anklickbar, aber noch etwas klein geraten (siehe Abbildung 3.1). Sie müssen sich schon etwas Mühe geben, um ihn mit dem Finger zu treffen. Gestalten Sie den Button daher mit CSS, um ihn auf die richtige Größe zu bringen: 111

3 Konzeption und Gestaltungsprinzipien button { border: none; color: white; background-color: blue; font-family: sans-serif; font-weight: bold; font-size: 12px; line-height: 20px; padding: 5px 10px; -webkit-appearance: none; } Listing 3.1 Die CSS-Definitionen eines Buttons Hierzu legen Sie Schriftgröße und Zeilenhöhe auf lesbare 12 Pixel fest und geben mit padding einen großzügigen Innenabstand dazu. Sie werden sicherlich ein wenig herumprobieren müssen, bis Ihr Button eine angenehme Größe hat. Anschließend entfernen Sie die graue Standardformatierung mit der Eigenschaft -webkit-appearance: none;. Jetzt können Sie Farbe und Formatierung Ihres Buttons frei vergeben. Schon mal nicht schlecht; allerdings sieht die Schaltfläche eher wie ein blaues Rechteck und weniger nach einem Button aus (siehe Abbildung 3.2). Abbildung 3.2 Button mit einfachem Stylesheet 3. Klickbarkeit simulieren Damit der Nutzer sofort erkennt, dass es sich um ein interaktives Element handelt, simulieren Sie nun eine Haptik bzw. Tiefe. Dafür versehen Sie den Button mit abgerundeten Ecken, einem dezenten Farbverlauf und einem subtilen Schlagschatten (siehe Abbildung 3.3): 112

3.1 Touch-typisches Design in der Praxis button { border: 1px solid blue; border-radius: 4px; background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0 %, rgba(255,255,255,0.2) 100 %); box-shadow: 0 1px 1px #333; text-shadow: 0 1px 0 #333; } 3 Listing 3.2 Der Button, erweitert um einen Farbverlauf Abbildung 3.3 Der finale Button Probieren Sie mit der Optik Ihres Buttons ruhig ein wenig herum, bis er Ihnen gefällt. Als Faustregel gilt: Je mehr ein Element seinem nativen Gegenstück ähnelt, desto eher wird es als solches erkannt. 4. Feedback hinzufügen Im letzten Schritt fügen Sie Ihrem Button ein visuelles Feedback hinzu: Der Nutzer soll merken, ob er einen Button tatsächlich getroffen hat. Hierzu nutzen Sie das :active-pseudoelement in CSS: button:active { background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0.5) 0 %, rgba(255,255,255,0.2) 100 %); -webkit-tap-highlight-color: rgba(0,0,0,0); } In diesem Fall invertieren Sie den Farbverlauf, um den Eindruck eines»gedrückten«buttons zu erhalten. Unter ios wird per Standard ein transluzentes graues Rechteck über das Element gelegt. Um dieses zu entfernen, nutzen Sie die Eigen- 113