Book description
Ob in der U-Bahn, auf Konferenzen oder im Café – überall wird gesurft, gemailt, getippt, gespielt. So schön die bunte Welt der Smartphones und Tablet PCs auch ist, Entwickler stehen plötzlich vor völlig neuen Herausforderungen wie einer unübersichtlichen Landschaft mobiler Geräte, die verschiedene Displays, Betriebssysteme, Browser u.s.w. mitbringen.
Zum Glück gibt es Abhilfe, und die finden Sie in diesem Buch! Moderne Ansätze wie Responsive Webdesign helfen Ihnen dabei, Geräteinformationen abzufragen und so Ihre mobile Website passend zum Smartphone bzw. Tablet auszuliefern. Und mithilfe von CSS3, HTML5 und Frameworks wie jQuery Mobile und PhoneGap erstellen Sie nicht nur mobile Websites, sondern schreiben eigene Web-Apps, die Sie über die verschiedenen App-Stores verbreiten können. Grundkenntnisse in Webtechnologien wie HTML, CSS und JavaScript werden vorausgesetzt, Neuerungen in HTML5 und CSS3 werden hingegen behandelt.
Table of contents
- Mobiles Web von Kopf bis Fuß
- Dedication
- Die Autoren
- Über den Übersetzer dieses Buchs
- Wie man dieses Buch benutzt: Einführung
-
1. Einstieg in die mobile Webprogrammierung: Responsive Webdesign
- Springen Sie auf den Mobilzug auf
- Seltsame Ereignisse auf dem Weg zur Kneipe
- Wenn Handybrowser so toll sind ...
- Was ist so anders beim mobilen Web?
- Responsive Webdesign
- Ein Beispiel einer responsiv gestalteten Site
- Andere Umgebung, anderes CSS
- CSS-Medienabfragen
- Die aktuelle Struktur der Splendid Walrus-Site
- Das aktuelle CSS analysieren
- Was muss sich ändern?
- Das CSS identifizieren, das sich ändern muss
- Schritte zur Erstellung des mobilspezifischen CSS
- Ta-da! Mobilspezifisches CSS
- Der Rest unseres strukturellen CSS
- Die Teile zusammensetzen
- Was soll an einem Layout mit fester Breite denn falsch sein?
- Was macht »flüssig« besser?
- Verflüssigung
- Die Verflüssigungsformel
- Die Verflüssigung fortsetzen
- Kontextwechsel
- Suchen Sie den Fehler im Bild?
- Flüssige Bilder
- Haben wir es jetzt geschafft?
- Details, Details
- Die Verantwortung nicht vergessen
- Das ist eine responsive Site!
- Responsives Design ist auch eine Geisteshaltung
-
2. Responsivität mit Augenmaß: Responsive Webdesign und Mobile First
- Gerade, als Sie dachten, es sei Zeit zum Feiern ...
- Wie bringen wir in Erfahrung, was das Problem ist?
- Kellnerin, könnte ich bestellen, bitte?
- Was tun, wenn es an der Geschwindigkeit hapert?
- Lassen Sie sich vom Aussehen nicht täuschen, die Seite ist RIESIG
- Goldsuche in den HAR-Bergen
- Vogelperspektive: Statistiken einsehen
- Die Bremsklötze in der Seite aufspüren
- Woher stammt das Google Maps-JavaScript?
- Was ist mit diesen großen Bildern?
- Es sieht mobilfreundlich aus, ist es aber nicht
- Mobilzentriertes responsives Webdesign
- Was ist Progressive Enhancement?
- Stellen wir die Seite auf den Kopf
- Bin ich auf einer neuen Seite oder nicht?
- Die Inhalts-Floats reparieren
- Mobile First-Medienabfragen
- Überraschung! Die Seite funktioniert im IE nicht mehr
- Bedingte Kommentare mit einer Medienabfrage kombinieren
- Wie kommen wir voran?
- Ein src, sie alle zu binden
- Wie Sencha.io Src funktioniert
- Das ist eine rasante mobile Webseite
- Zoom, Zoom, bumm ...
- Das Recht zu zoomen
- Zurück zu unserem Projektplan
- Eigentlich wäre so eine Karte schon recht nützlich
- Eine Pseudo-Medienabfrage in JavaScript aufbauen
- Fügen Sie der Angezapft-Seite das JavaScript hinzu
- Diese Widgets sind nicht responsiv
- Die Iframe-Attribute in äquivalentes CSS umwandeln
- Die Attribute aus dem JavaScript entfernen
- Jetzt sollte jeder die Kneipe finden können
- Jetzt gibt es wieder Überschneidungen
- Lassen Sie sich vom Inhalt leiten
- Zeit für Browserdehnübungen
- Breakpoints als Retter
-
3. Eine eigene mobile Website: Ungünstige Umstände
- Die Außendienstmitarbeiter von Vierbeinige Freunde
- Wie erhalten und teilen die Mitarbeiter die Daten, die sie benötigen?
- Mobilnutzer zu einer mobilgerechten Website umleiten
- Mobilnutzer aufspüren
- Freundschaft schließen mit dem User-Agent
- User-Agent: eine Ausgeburt der Hölle?
- Klare Worte: Die meisten großen Sites haben eine eigene Mobilsite
- Oder wollen Sie eigentlich einen Redirect durchführen?
- Werfen wir einen Blick auf das Skript
- Wie das Skript funktioniert
- Erstellen Sie ein Mobil-Mock-up
- Sonderlieferung ... mit Komplikationen
- Nicht alle Handys sind Smartphones ... bei Weitem nicht
- Auf elementarer Ebene: XHTML-MP
- Warum sollten wir uns mit etwas derart Veraltetem befassen?
- Frühjahrsputz mit XHTML-MP
- Scrollen nervt
- Ein letzter Flatterball
- Zugriffstasten im Einsatz
- Ist unsere Seite einsatzbereit?
- Was ist schiefgelaufen?
- Die Fehler beheben
- Mobilfähiges CSS
- Hmmm ... etwas fehlt
- Der Button-Look wird zutiefst vermisst!
- Ein umwerfender Erfolg!
-
4. Entscheiden, wer berücksichtigt wird: Welche Geräte sollen wir berücksichtigen?
- Woher wissen Sie, wo Sie die Grenze ziehen müssen?
- Lösen Sie sich für einen Augenblick von der Tastatur
- Nicht unterstützt vs. nicht unterstützbar
- Stellen Sie sich Fragen zu Ihrem Projekt
- Zutaten für Ihren Mobilzaubertrank
- Ihren Vorrat an Werkzeugen und Daten anzapfen
- Woher weiß ich, ob meine Kunden das richtige Mobilgerät haben?
-
5. Gerätedatenbanken und -klassen: Gemeinsam stark
- Ein Panik-Button für überdrehte Studenten
- Der Button ist ausschließlich für Mobilgeräte gedacht
- Die Rettung: Mobilgerätedatenbanken
- WURFL
- WURFL und seine Fähigkeiten
- WURFL: schlauer API-Code
- Eine eigene Explorer-Seite aufbauen
- Eine Explorer-Seite: die Umgebung einrichten
- Ein guter Anfang!
- Zwei kleine Erweiterungen, die die Explorer-Seite verbessern
- Die Fähigkeiten zum Einsatz bringen
- WURFL die richtigen Fragen stellen
- Das Gerät initialisieren und die Daten vorbereiten
- Ist das Ding mobil?
- Gefahr im Verzug!
- Die Seite mit WURFL etwas intelligenter machen
- Der Panik-Button: nur für Telefone
- Geräte zusammentreiben
- Geräteklassen
- Das Bild ist gerade erheblich komplexer geworden
- Die Homepage aus Mobilperspektive bewerten
- Anforderungen für die verschiedenen Mobilgerätetypen gruppieren
- Unsere Geräteklassen abrunden
- Bringen wir das Stück auf die Bühne
- Die Zuordnungsfunktion
- Was passiert in dieser switch-Anweisung?
- Die Vergleichsfunktion zum Prüfen von Fähigkeiten einsetzen
- Die letzten Schritte
- Und, wie ist es gelaufen?
- Die Löcher in den Geräteklassentests stopfen
- Die Geräteklassen zum Einsatz bringen
- Handeln Sie umsichtig und planvoll
- Wir brauchen ein größeres Sicherheitsnetz
- Was du heute kannst besorgen ...
-
6. Mit Frameworks mobile Web-Apps bauen: Der Tartanator
- HTML5 ... App ... was heißt das eigentlich?
- Wie sich »traditionelle« Websites üblicherweise verhalten
- Wie sich App-ähnliche Websites häufig verhalten
- Die mobile HTML5-Web-App von Tartan Unlimited
- Der Masterplan für Phase 1 des Tartanators
- ... oder Sie könnten ein mobiles Web-Framework nutzen
- Wieso ein mobiles Web-App-Framework?
- Unsere Wahl für den Tartanator: jQuery Mobile
- Mit jQuery Mobile eine einfache Site aufbauen
- Den Rest der Seite auszeichnen
- Und los geht’s!
- Das HTML5-data-*-Attribut
- Unsere Liste: besser, aber noch nicht gut
- Mit jQuery Mobile mehrere Seiten verlinken
- Des Tartanators Kern: die Tartans selbst
- Wir haben Ihnen den Anfang der Liste vorgegeben
- Setzen Sie den Rest der Tartans ein
- Listen filtern und organisieren
- Unsere Tartan-Liste sieht jetzt besser aus
- Jetzt sollten wir Eugen unsere ersten Arbeiten am Tartanator zeigen
- Tricks, die eine Website App-mäßiger machen
- Eine Footer-Werkzeugleiste hinzufügen
- Der Werkzeugleiste mehr Pep geben
- Die Struktur abschließen
- Beginnen wir damit, das Formular zur Erstellung von Tartans aufzubauen
- Tartans: Muster wie Rezepte
- Tartan-Muster in ein Formular übersetzen
- Ein HTML5-Formular aufbauen
- Fügen wir ein paar einfache Formularfelder ein
- Listen in Listen zur Farbeingabe
- Die Farbe/Größe-Zutatenpaare: das Farbwahlfeld
- Farbe/Größe-Feldpaare: das Größe-Feld
- Auf das Formular verlinken ...
-
7. Mobile Web-Apps in der Praxis: Supermobile Web-Apps
- Es sieht ansehnlich aus ...
- Mobile Apps in der Praxis
- Auf die Plätze, fertig, verbessern!
- Ein besseres Formular aufbauen
- Ein Widget zur Verwaltung der Listen von Farben und Größen
- Ein Blick unter die Motorhaube
- Das also sind die Frontend-Verbesserungen ...
- ... und jetzt zum Backend
- Die beiden Seiten von generate.php
- Eine letzte Sache noch!
- Zwei von drei: ein guter Anfang
- Offline ist wichtig
- Ein Grundrezept zur Erstellung eines Cache-Manifests
- Unglücklicherweise steckt der Teufel im Detail
- Das Manifest mit dem richtigen Inhaltstyp ausliefern
- Endlich Sieg
- Wie Geolocation funktioniert
- Wie man W3C-konforme Browser um ihre Position bittet
- Mit der Events suchen-Seite beginnen: das Fundament
- Integrieren wir Geolocation
- Nichts gefunden
-
8. Hybride mobile Apps mit PhoneGap: Tartan-Jagd: Nativ werden
- Neue Gelegenheiten
- Wie funktionieren Hybrid-Apps?
- PhoneGap als Brücke zwischen Web und Gerät
- Machen Sie sich mit PhoneGap Build vertraut
- Wie die App funktionieren wird?
- Aufgespürte Tartans festhalten
- Anatomie des Tartan-Jagd-Projekts
- Laden Sie Ihre App herunter
- Wählen Sie Ihren Weg
- Gute Arbeit!
- Wer fand was? – Gefundene Tartans speichern
- Was LocalStorage für uns leistet
- Prüfen, was der Browser unterstützt
- Mit einer Funktion die gefundenen Tartans anzeigen
- Die Methoden toggle und toggleClass
- Sie haben einen Tartan gefunden? Wo sind die Beweise?
- PhoneGap einbinden, um Bilder aufzunehmen
- PhoneGap ist fast für das Shooting bereit
- Jetzt sind wir für die MediaCapture-API bereit
- Was tun wir bei Erfolg?
- Im wahren Leben läuft nie alles nach Plan
- Etwas Anonymität
- Fertig!
- 9. Für die Zukunft gewappnet: (Etwas) Ordnung ins Chaos bringen
- A. Was übrig bleibt: Die Top Sechs der Themen, die wir nicht behandelt haben
- B. Die Webserverumgebung einrichten: Das Fundament
- C. WURFL installieren: Geräte erschnüffeln
- D. Android-SDK und Werkzeuge installieren: Die passende Umgebung schaffen
- Stichwortverzeichnis
- About the Authors
- Copyright
Product information
- Title: Mobiles Web von Kopf bis Fuß
- Author(s):
- Release date: May 2012
- Publisher(s): O'Reilly Verlag
- ISBN: 97833868993448
You might also like
book
JavaScript-Programmierung von Kopf bis Fuß
Etwas Abwechslung gefällig? JavaScript-Programmierung von Kopf bis Fuß ist der fantasievolle Beweis dafür, dass Fachliteratur keineswegs …
book
Softwareentwicklung von Kopf bis Fuß
Was lernen Sie mit diesem Buch? Haben Sie sich schon einmal gefragt, was es mit testgetriebener …
book
HTML5-Programmierung von Kopf bis Fuß
"HTML5-Programmierung von Kopf bis Fuß" vermittelt in bewährter Von Kopf bis Fuß-Tradition anhand zahlreicher praktischer Beispiele, …
book
Java™ von Kopf bis Fuß
Java von Kopf bis Fuß ist eine umfassende Erlebnistour durch die Objektorientierte Programmierung und Java. Ganz …