Apps mit HTML5 und CSS3 - Für iPhone, iPad und Android - inkl. jQuery Mobile, PhoneGap, Sencha Touch & Co.

von: Florian Franke, Johannes Ippen

Galileo Press, 2013

ISBN: 9783836222372

Sprache: Deutsch

525 Seiten, Download: 19533 KB

Format: PDF, auch als Online-Lesen

geeignet für:

eBook anfordern

▸

Mehr zum Inhalt

Apps mit HTML5 und CSS3 - Für iPhone, iPad und Android - inkl. jQuery Mobile, PhoneGap, Sencha Touch & Co.

	Apps	24
	1.1 Native Apps vs. WebApps	24
	1.1.1 WebApps allgemein	25
	1.1.2 Native Apps auf mobilen Geräten	25
	1.1.3 Apples App Store, Google Play und Co.	28
	1.1.4 WebApps auf mobilen Geräten	30
	1.1.5 Native App oder WebApp?	31
	1.2 Warum ist es sinnvoll, auf Touch-Geräten zu entwickeln?	31
	1.2.1 Der Mobilsektor boomt	31
	1.2.2 Browsertechnik auf Mobilgeräten	33
	1.3 Showcase - das können HTML5-Apps	34
	HTML5 in der mobilen Webentwickung	38
	2.1 HTML5 - Definition und aktueller Stand	38
	2.1.1 HTML als Standard	39
	2.1.2 HTML5 als Marketinginstrument	39
	2.1.3 HTML5 als Flash-Ablösung?	39
	2.2 Was HTML5 bietet	40
	2.2.1 Der Aufbau einer einfachen HTML5-Seite	40
	2.2.2 Semantische Elemente in HTML5	42
	2.3 CSS3 - Grundlagen und Neuerungen	45
	2.3.1 Was ist eigentlich CSS?	45
	2.3.2 Styling mit einer CSS-Datei	46
	2.3.3 Gestalten mit CSS - Tipps und Tricks	51
	2.3.4 Die Neuerungen von CSS3 - welche sind heute schon einsetzbar?	56
	2.4 Desktop vs. Mobile - die Unterschiede	66
	2.4.1 Möglichkeiten und Limitationen von HTML5 auf einer mobilen Plattform	71
	2.4.2 HTML und CSS für kleine Bildschirme	72
	2.4.3 Von der Webseite zur WebApp	81
	2.5 Entwickeln mit JavaScript-Frameworks - Zepto und Co.	86
	2.5.1 Die JavaScript-Syntax	87
	2.5.2 Einführung in Zepto	91
	2.5.3 Wichtige Funktionen in Zepto	97
	2.6 JavaScript auf dem iPhone testen	101
	2.7 Die Geschwindigkeit einer WebApp verbessern	102
	2.7.1 Kompression	102
	2.7.2 Die richtige Reihenfolge	106
	2.7.3 So wenig Anfragen wie möglich	106
	Konzeption und Gestaltungsprinzipien	110
	3.1 Touch-typisches Design in der Praxis	110
	3.1.1 Der feine Unterschied zwischen Berühren und Klicken	110
	3.1.2 Der Anwender erwartet so einiges - Aufbau einer App	115
	3.1.3 Auf der Couch oder in der Bahn	124
	3.1.4 Alles eine Frage der Ausrichtung	129
	3.2 Eine App konzipieren	135
	3.2.1 Vorüberlegungen - was genau soll meine WebApp können?	136
	3.2.2 Gedanken und Inhalte ordnen	137
	HTML5 als Designwerkzeug	150
	4.1 Ordnung halten mit CSS-Rastersystemen	150
	4.1.1 Einsatz des Less CSS Frameworks	152
	4.1.2 Das Raster für einen speziellen Einsatz - Magazine Grid	161
	4.2 Mal was anderes als Arial - Webfonts	171
	4.2.1 Schriften im Web	173
	4.2.2 Webfonts	175
	4.2.3 Font-Services	176
	4.2.4 Vor- und Nachteile von Webfonts	180
	4.2.5 Vorsicht! Schriften und deren Lizenzen	181
	4.2.6 Webschriften in Aktion	181
	4.3 Hinzufügen von Audio und Video	183
	4.3.1 Video	183
	4.3.2 Audio	193
	4.4 Animationen mit CSS	199
	4.4.1 CSS-Transitions und CSS-Animations	200
	4.4.2 Animieren mit -webkit-transition	200
	4.4.3 Animieren mit -webkit-animation	204
	4.4.4 Manipulation mit -webkit-transform	207
	4.5 Animationen mit Adobe Edge Animate	212
	4.5.1 Adobe Edge Animate	212
	4.5.2 Ihr erster eigener Teaser	212
	4.5.3 Die Oberfläche von Adobe Edge Animate	213
	4.5.4 Einstimmung, erste Vorüberlegungen und Unterteilung des Teasers	214
	4.5.5 Voreinstellungen: Die Einrichtung der Bühne	214
	4.5.6 Teil 1: Textelemente anlegen und animieren	215
	4.5.7 Teil 2: Fakten, schnell und knackig!	218
	4.5.8 Teil 3: Der Abbinder und der »Call to Action«	219
	4.5.9 »Call to Action« - Erstellung eines Buttons	220
	4.5.10 Der HTML-Code von Adobe Edge Animate im Detail	222
	4.5.11 Abschließende Worte zu Adobe Edge Animate	223
	4.6 Zeichnen mit JavaScript - das canvas-Element	224
	4.6.1 Erster Schritt: Canvas und Context registrieren	224
	4.6.2 Grundlegende Funktionen	225
	4.6.3 Zeichnen per Touch-Eingabe	232
	4.6.4 In der Praxis - Canvas oder CSS?	235
	4.6.5 Canvas-Bibliotheken	236
	Positionsbestimmung	240
	5.1 Die Positionsbestimmung mit HTML5	241
	5.1.1 Weitere Eigenschaften der Positionsbestimmung	244
	5.2 Die Where-to-Eat-App	245
	5.2.1 Position auf einer statischen Karte eintragen	247
	5.2.2 Interaktive Karten mit der Google Maps JavaScript-API einbinden	254
	5.2.3 Liste der Restaurants laden und ausgeben	256
	5.2.4 Den Abstand zwischen zwei Koordinaten berechnen	259
	5.2.5 Die Programmoberfläche	261
	5.2.6 Eine Symbolleiste einfügen	263
	5.2.7 Die Restaurantliste erstellen	266
	5.2.8 Der letzte Schliff	268
	5.3 More Fun mit Geodaten	271
	5.3.1 Yelp-API	272
	5.3.2 foursquare-API	272
	5.3.3 Google Places	273
	5.3.4 Twitter-API	273
	5.3.5 Flickr-API	274
	Auslesen des Bewegungssensors mit JavaScript	276
	6.1 Diese Daten liefert der Bewegungssensor	277
	6.2 Vorüberlegungen zur App »Shake it like a Polaroid picture«	280
	6.3 »Shake it like a Polaroid picture« - die Umsetzung	281
	6.3.1 Die HTML-Datei	281
	6.3.2 Laden eines Bildes aus dem Fotodienst Flickr via JSON	284
	6.3.3 Die CSS-Datei	290
	6.3.4 Das Laden eines Polaroids	291
	6.3.5 Das Sahnehäubchen - eine leichte Rotation des Polaroids	296
	6.4 Die Anzeige eigener Bilder mit dem Input-Element	301
	6.4.1 Einführung in den Dateiupload ab iOS 6 und Android 2.2	301
	6.4.2 Erweitern der Shake-it-WebApp um eigene Fotos - Übersicht	303
	6.4.3 Abschließende Worte/Einschränkungen	316
	Offline - damit eine App in jedem Winkel der Welt funktioniert	318
	7.1 Abhilfe schafft das Cache-Manifest	320
	7.1.1 Die Struktur der Cache-Manifest-Datei	320
	7.1.2 Ihre erste Cache-Manifest-Datei	321
	7.1.3 Wann werden welche Daten gecached?	323
	7.1.4 Die Cache-Manifest-Datei im Einsatz	323
	7.2 Der Local Storage - die Offline-Datenbank	325
	7.2.1 localStorage-Funktionen	325
	7.2.2 Temporäre Speicherung von Daten im Session Storage	326
	7.3 Die Offline-To-do-App	327
	7.3.1 Welche Anforderungen muss Ihre To-do-App erfüllen?	327
	7.3.2 Der Wireframe der To-do-App	328
	7.3.3 Funktionsbezogene Animation	337
	7.3.4 Zusätzliche EventHandler	339
	7.4 Checkliste zum Überprüfen der Offline-Fähigkeit einer WebApp	340
	WebApps mit Frameworks entwickeln	342
	8.1 Entwicklung einer WebApp mit jQuery Mobile	342
	8.1.1 Zum Heiteren Hering - ein Fischrestaurant als WebApp	343
	8.1.2 Die Startseite	344
	8.1.3 Kurze Kaffeepause - ein Blick hinter die Kulissen von jQuery Mobile	355
	8.1.4 À la Carte - die Menüseite	356
	8.1.5 Implementierung einer Google Maps-Karte inklusive Routenplanung	367
	8.1.6 Ein Kontaktformular mithilfe von PHP	372
	8.1.7 jQuery Mobile-Apps mit dem ThemeRoller und dem Interface-Builder von Codiqa noch schneller entwickeln	379
	8.2 Die Entwicklung einer App mit Sencha Touch	381
	8.2.1 Installation und erste Schritte mit Sencha Touch	382
	8.2.2 Interaktive Diagramme mit Sencha Touch Charts - die Wetterstation	394
	8.2.3 HTML5-Tablet-Magazin mit Sencha Touch	403
	8.3 Responsive Apps mit Twitter Bootstrap	412
	8.3.1 Was ist das Responsive Webdesign?	412
	8.3.2 Was ist Bootstrap?	412
	8.3.3 Grundlagen	413
	8.3.4 Die Instagram-App	421
	8.3.5 Ressourcen	431
	Native Anwendungen und App-Stores	436
	9.1 Eine WebApp wird zur nativen Anwendung	436
	9.1.1 Die Vor- und Nachteile einer nativen App	436
	9.1.2 Die Erstellung einer nativen App mit PhoneGap (Apache Cordova)	438
	9.1.3 »Shake it like a Polaroid picture« - die native Version	439
	9.1.4 Die kompilierten App-Dateien mithilfe von PhoneGap Build erstellen	445
	9.1.5 Apple-Zertifikate und Profile	447
	9.1.6 Einbinden von Zertifikat und Profil in PhoneGap Build	451
	9.1.7 Endlich! Das Hochladen der Shake-it-like-a-Polaroid-picture-Daten	452
	9.1.8 Die App-Datei auf dem Endgerät installieren	453
	9.1.9 Icon- und App-Namen in PhoneGap Build anpassen	456
	9.1.10 Abschließende Worte zu PhoneGap und PhoneGap Build	456
	9.2 Ein Spiel mit PhoneGap	457
	9.2.1 Die Welt der Spiele	458
	9.2.2 Die Grundausstattung	459
	9.2.3 Runde für Runde - JavaScript, die Erste	461
	9.2.4 Die Positionierung einer Schießscheibe	464
	9.2.5 Das Resultat einblenden	465
	9.2.6 Hinzufügen der PhoneGap-Funktionen	466
	9.2.7 Lasset die Duelle beginnen	470
	9.3 Eine native Magazin-App mit Laker	470
	9.4 Die Veröffentlichung einer App in einem App-Store	473
	9.4.1 Das Veröffentlichen einer App in Apples App Store	473
	9.4.2 Das Veröffentlichen einer App in Google Play	480
	9.5 Publizieren der WebApp in einem Store oder als Webseite	484
	9.5.1 Auf den Vollbildmodus hinweisen	484
	9.5.2 Die Alternative zu App-Stores - OpenAppMarket	486
	9.5.3 Weitere Möglichkeiten	491
	Windows Phone 8	492
	10.1 Was ist Windows Phone?	492
	10.1.1 Der Browser	493
	10.1.2 Gestaltungsprinzipien des Modern UI	494
	10.1.3 Grundlagen - Raster	496
	10.1.4 Die To-do-App	500
	10.1.5 Zum Home-Bildschirm hinzufügen	504
	10.1.6 Weiterführende Infos	505
	Weiterführende Informationen	508
	A.1 HTML5 und CSS3	508
	A.2 JavaScript und nützliche Tools	509
	A.3 iOS, Apple	509
	A.4 Android, Google	510
	A.5 Technologie und Gadgets	510
	A.6 Digital Publishing	511
	A.7 Design und Inspiration	511
	A.8 Sonstiges	512
	A.9 Interessante Twitter-Kontakte	512

Apps mit HTML5 und CSS3 - Für iPhone, iPad und Android - inkl. jQuery Mobile, PhoneGap, Sencha Touch & Co.

von: Florian Franke, Johannes Ippen

Apps mit HTML5 und CSS3 - Für iPhone, iPad und Android - inkl. jQuery Mobile, PhoneGap, Sencha Touch & Co.

Kategorien

eBooks