Apps mit HTMLS und CSS3

Transkript

1 Florian Franke, Johannes Ippen Apps mit HTMLS und CSS3 für ipad, iphone und Android Galileo Press.... ~

2 Auf einen Blick Auf einen Blick Apps 21 2 HTMl5 in der mobilen Webentwickung 35 3 Konzeption und Gestaltungsprinzipien HTMl5 als Designwerkzeug Positionsbestimmung Auslesen des Bewegungssensors mitjavascript Offline - damit eine App in jedem Winkel der Welt funktioniert WebApps mit Frameworks entwickeln Native Anwendungen und App Stores 381

3 Inhalt Vorwort 11 1 Apps Native Apps vs. WebApps WebApps allgemein Native Apps auf mobilen Geräten App Store, Google Pfay und Co WebApps auf mobilen Geräten Native App oder WebApp? Warum ist es sinnvoll, auftouch-geräten zu entwickeln? Der Mobilsektor boomt Browsertechnik auf Mobilgeräten Showcase - das können HTML5-Apps 31 2 HTMLS 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? Desktop vs. Mobile - die Unterschiede Möglichkeiten und Limitationen von HTML5 auf einer mobilen Plattform 68

4 2.4.2 Die neuen HTML- und CSS-Features in ioss Von der Webseite zur WebApp Entwickeln mit JavaScript-Frameworks - jquery Sc Co 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 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 Aufder 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 HTMLS als Designwerkzeug Ordnung halten mit CSS-Rastersystemen Einsatz des Less CSS Frameworks Das Raster für einen speziellen Einsatz - MagazineGrid Mal was anderes als Arial- Webfants Schriften im Web Webfonts Font-Services Vor- und Nachteile von Webfonts 177

5 4.2.5 Vorsicht! Schriften und deren Lizenzen Webschriften in Aktion Hinzufügen von Audio und Video Video Audio Animationen mit ( C55-Transitions und C55-Animations Animieren mit -webkit-transition Animieren mit -webkit-animation Manipulation mit -webkit-transform Zeichnen mitjava5cript - das canvas-element Erster Schritt: Canvas und Context registrieren Grundlegende Funktionen Zeichnen per Touch-Eingabe In der Praxis - Canvas oder C55? Canvas-Bibliotheken Positionsbestimmung Die Positionsbestimmung mit HTML Weitere Eigenschaften der Positionsbestimmung Die ))Where to Eatcc-App Position aufeiner statischen Karte eintragen Interaktive Karten mit der Google Maps Java5cript API einbinden Liste der Restaurants laden und ausgeben Den Abstand zwischen zwei Koordinaten berechnen Die Programmoberfläche Eine Symbolleiste einfügen Die Restaurantliste erstellen Der letzte Schliff More Fun mit Geodaten Qype-API foursquare-api Google Places Twitter-API Flickr-API

6 6 Auslesen des Bewegungssensors mit JavaScript Diese Daten liefert der Bewegungssensor Vorüberlegungen zur App ))Shake it Iike a Polaroid pidurecc ))Shake it Iike a Polaroid picturecc - 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 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 gecacht? Die Cache-Manifest-Datei im Einsatz localstorage, die Offline-Datenbank localstorage-funktionen Temporäre Speicherung von Daten im sessionstorage Die Offline-Todo-App Welche Anforderungen muss Ihre Todo-App erfüllen? Der Wireframe der Todo-App Funktionsbezogene Animation Zusätzliche EventHandler Checkliste zum Überprüfen der Offline-Fähigkeit einer WebApp WebApps mit Frameworks entwickeln Entwicklung einer WebApp mitjquery Mobile Zum heiteren Hering -ein Fischrestaurant als WebApp Die Startseite 313

7 8.1.3 Kurze Kaffeepause - ein Blick hinter die Kulissen von jquery Mobile Älacarte-dieMenü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 Chartsdie Wetterstation HTML5-Tablet-Magazin mit Sencha Touch 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 Iike a Polaroid picture«- die native Version Die kompilierten App-Dateien mithilfe von PhoneGap Build erstellen Apple-Zertifikate und Profile 391 Einbinden von Zertifikat und Profil in PhoneGap Build 395 Endlich! Das Hochladen der "Shake it like a Polaroid picture«-daten Die App-Datei aufdem Endgerät installieren Icon- und App-Namen in PhoneGap Build anpassen Abschließende Worte zu PhoneGap und PhoneGap Build 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 416

8 9.4.2 Die Alternative zum App Store - OpenAppMarketund Zeewe Weitere Möglichkeiten 425 A Weiterführende Informationen 427 A.l 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