Auf einen Blick. Auf einen Blick

Transkript

1

2 Auf einen Blick Auf einen Blick 1 Apps HTML5 in der mobilen Webentwickung Konzeption und Gestaltungsprinzipien HTML5 als Designwerkzeug Positionsbestimmung Auslesen des Bewegungssensors mit JavaScript Offline damit eine App in jedem Winkel der Welt funktioniert WebApps mit Frameworks entwickeln Native Anwendungen und App-Stores Windows Phone Weiterführende Informationen

3 Inhalt Inhalt Vorwort Bevor s richtig losgeht Installation von XAMPP Apps Native Apps vs. WebApps WebApps allgemein Native Apps auf mobilen Geräten Apples App Store, Google Play und Co WebApps auf mobilen Geräten Native App oder WebApp? Warum ist es sinnvoll, auf Touch-Geräten zu entwickeln? Der Mobilsektor boomt Browsertechnik auf Mobilgeräten Showcase das können HTML5-Apps HTML5 in der mobilen Webentwickung HTML5 Definition und aktueller Stand HTML als Standard HTML5 als Marketinginstrument HTML5 als Flash-Ablösung? Was HTML5 bietet Der Aufbau einer einfachen HTML5-Seite Semantische Elemente in HTML CSS3 Grundlagen und Neuerungen Was ist eigentlich CSS? Styling mit einer CSS-Datei Gestalten mit CSS Tipps und Tricks Die Neuerungen von CSS3 welche sind heute schon einsetzbar?

4 Inhalt 2.4 Desktop vs. Mobile die Unterschiede Möglichkeiten und Limitationen von HTML5 auf einer mobilen Plattform HTML und CSS für kleine Bildschirme Von der Webseite zur WebApp Entwickeln mit JavaScript-Frameworks Zepto und Co Die JavaScript-Syntax Einführung in Zepto Wichtige Funktionen in Zepto JavaScript auf dem iphone testen Die Geschwindigkeit einer WebApp verbessern Kompression Die richtige Reihenfolge So wenig Anfragen wie möglich Konzeption und Gestaltungsprinzipien Touch-typisches Design in der Praxis 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 Eine App konzipieren Vorüberlegungen was genau soll meine WebApp können? Gedanken und Inhalte ordnen HTML5 als Designwerkzeug Ordnung halten mit CSS-Rastersystemen Einsatz des Less CSS Frameworks Das Raster für einen speziellen Einsatz Magazine Grid Mal was anderes als Arial Webfonts Schriften im Web Webfonts Font-Services Vor- und Nachteile von Webfonts

5 Inhalt Vorsicht! Schriften und deren Lizenzen Webschriften in Aktion Hinzufügen von Audio und Video Video Audio Animationen mit CSS CSS-Transitions und CSS-Animations Animieren mit -webkit-transition Animieren mit -webkit-animation Manipulation mit -webkit-transform Animationen mit Adobe Edge Animate Adobe Edge Animate Ihr erster eigener Teaser Die Oberfläche von Adobe Edge Animate Einstimmung, erste Vorüberlegungen und Unterteilung des Teasers Voreinstellungen: Die Einrichtung der Bühne Teil 1: Textelemente anlegen und animieren Teil 2: Fakten, schnell und knackig! Teil 3: Der Abbinder und der»call to Action« »Call to Action«Erstellung eines Buttons Der HTML-Code von Adobe Edge Animate im Detail Abschließende Worte zu Adobe Edge Animate Zeichnen mit JavaScript das canvas-element Erster Schritt: Canvas und Context registrieren Grundlegende Funktionen Zeichnen per Touch-Eingabe In der Praxis Canvas oder CSS? Canvas-Bibliotheken Positionsbestimmung Die Positionsbestimmung mit HTML Weitere Eigenschaften der Positionsbestimmung Die Where-to-Eat-App Position auf einer statischen Karte eintragen Interaktive Karten mit der Google Maps JavaScript-API einbinden Liste der Restaurants laden und ausgeben

6 Inhalt Den Abstand zwischen zwei Koordinaten berechnen Die Programmoberfläche Eine Symbolleiste einfügen Die Restaurantliste erstellen Der letzte Schliff More Fun mit Geodaten Yelp-API foursquare-api Google Places Twitter-API Flickr-API Auslesen des Bewegungssensors mit JavaScript Diese Daten liefert der Bewegungssensor Vorüberlegungen zur App»Shake it like a Polaroid picture« »Shake it like a Polaroid picture«die Umsetzung 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 Die Anzeige eigener Bilder mit dem Input-Element Einführung in den Dateiupload ab ios 6 und Android Erweitern der Shake-it-WebApp um eigene Fotos Übersicht Abschließende Worte/Einschränkungen Offline damit eine App in jedem Winkel der Welt funktioniert Abhilfe schafft das Cache-Manifest Die Struktur der Cache-Manifest-Datei Ihre erste Cache-Manifest-Datei Wann werden welche Daten gecached? Die Cache-Manifest-Datei im Einsatz

7 Inhalt 7.2 Der Local Storage die Offline-Datenbank localstorage-funktionen Temporäre Speicherung von Daten im Session Storage Die Offline-To-do-App Welche Anforderungen muss Ihre To-do-App erfüllen? Der Wireframe der To-do-App Funktionsbezogene Animation Zusätzliche EventHandler Checkliste zum Überprüfen der Offline-Fähigkeit einer WebApp WebApps mit Frameworks entwickeln Entwicklung einer WebApp mit jquery Mobile Zum Heiteren Hering ein Fischrestaurant als WebApp Die Startseite 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 Die Entwicklung einer App mit Sencha Touch Installation und erste Schritte mit Sencha Touch Interaktive Diagramme mit Sencha Touch Charts die Wetterstation HTML5-Tablet-Magazin mit Sencha Touch Responsive Apps mit Twitter Bootstrap Was ist das Responsive Webdesign? Was ist Bootstrap? Grundlagen Die Instagram-App Ressourcen

8 Inhalt 9 Native Anwendungen und App-Stores Eine WebApp wird zur nativen Anwendung 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-Polaroidpicture-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 Ein Spiel mit PhoneGap Die Welt der Spiele Die Grundausstattung Runde für Runde JavaScript, die Erste Die Positionierung einer Schießscheibe Das Resultat einblenden Hinzufügen der PhoneGap-Funktionen Lasset die Duelle beginnen Eine native Magazin-App mit Laker Die Veröffentlichung einer App in einem App-Store Das Veröffentlichen einer App in Apples App Store Das Veröffentlichen einer App in Google Play Publizieren der WebApp in einem Store oder als Webseite Auf den Vollbildmodus hinweisen Die Alternative zu App-Stores OpenAppMarket Weitere Möglichkeiten Windows Phone Was ist Windows Phone? Der Browser Gestaltungsprinzipien des Modern UI

9 Inhalt Grundlagen Raster Die To-do-App Zum Home-Bildschirm hinzufügen Weiterführende Infos A Weiterführende Informationen 507 A.1 HTML5 und CSS A.2 JavaScript und nützliche Tools A.3 ios, Apple A.4 Android, Google A.5 Technologie und Gadgets A.6 Digital Publishing A.7 Design und Inspiration A.8 Sonstiges A.9 Interessante Twitter-Kontakte Index

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

11 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

12 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

13 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

14 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