Mobiles Web von Kopf bis Fuß

Table of contents

1. Mobiles Web von Kopf bis Fuß
2. Dedication
3. Die Autoren
4. Über den Übersetzer dieses Buchs
5. Wie man dieses Buch benutzt: Einführung
   1. Für wen ist dieses Buch?
      1. Wer sollte eher die Finger von diesem Buch lassen?
   2. Wir wissen, was Sie gerade denken
   3. Und wir wissen, was Ihr Gehirn gerade denkt
   4. Metakognition: Nachdenken übers Denken
   5. Das haben WIR getan:
   6. Und das können SIE tun, um sich Ihr Gehirn untertan zu machen
   7. Lies mich
   8. Software-Anforderungen
   9. Die technischen Gutachter
   10. Danksagungen
6. 1. Einstieg in die mobile Webprogrammierung: Responsive Webdesign
   1. Springen Sie auf den Mobilzug auf
      1. Die Stunde hat geschlagen
   2. Seltsame Ereignisse auf dem Weg zur Kneipe
   3. Wenn Handybrowser so toll sind ...
      1. ... sollte das doch einfach funktionieren?
   4. Was ist so anders beim mobilen Web?
   5. Responsive Webdesign
      1. Das Rezept für Responsive Webdesign
   6. Ein Beispiel einer responsiv gestalteten Site
   7. Andere Umgebung, anderes CSS
      1. Medientypen und Medieneigenschaften
   8. CSS-Medienabfragen
      1. CSS: Wie anders ist anders?
   9. Die aktuelle Struktur der Splendid Walrus-Site
   10. Das aktuelle CSS analysieren
   11. Was muss sich ändern?
       1. Für die mobile Version müssen wir von hier ...
   12. Das CSS identifizieren, das sich ändern muss
   13. Schritte zur Erstellung des mobilspezifischen CSS
   14. Ta-da! Mobilspezifisches CSS
   15. Der Rest unseres strukturellen CSS
       1. Gemeinsames strukturelles CSS
       2. Unser strukturelles CSS für den Desktop
       3. Was kommt jetzt?
   16. Die Teile zusammensetzen
       1. Eine letzte Sache noch ...
   17. Was soll an einem Layout mit fester Breite denn falsch sein?
       1. Das Layout passt sich anderen Fenstergrößen nicht an
   18. Was macht »flüssig« besser?
       1. Das Layout passt sich an, wenn sich die Fensterbreite ändert
   19. Verflüssigung
   20. Die Verflüssigungsformel
       1. Ein Blick aus der Nähe
   21. Die Verflüssigung fortsetzen
       1. Unsere aktualisierte CSS-Regel
   22. Kontextwechsel
   23. Suchen Sie den Fehler im Bild?
   24. Flüssige Bilder
       1. Ein trauriger Abschied ...
   25. Haben wir es jetzt geschafft?
       1. Das Mobil-CSS aufmöbeln
   26. Details, Details
       1. Flexible Schriften einrichten
       2. Das YouTube-Video reparieren
   27. Die Verantwortung nicht vergessen
   28. Das ist eine responsive Site!
   29. Responsives Design ist auch eine Geisteshaltung
7. 2. Responsivität mit Augenmaß: Responsive Webdesign und Mobile First
   1. Gerade, als Sie dachten, es sei Zeit zum Feiern ...
   2. Wie bringen wir in Erfahrung, was das Problem ist?
   3. Kellnerin, könnte ich bestellen, bitte?
      1. Wer nimmt mir die Einrichtung des Proxys ab?
   4. Was tun, wenn es an der Geschwindigkeit hapert?
   5. Lassen Sie sich vom Aussehen nicht täuschen, die Seite ist RIESIG
   6. Goldsuche in den HAR-Bergen
   7. Vogelperspektive: Statistiken einsehen
   8. Die Bremsklötze in der Seite aufspüren
   9. Woher stammt das Google Maps-JavaScript?
      1. Eine Zeile, um alles zu laden
      2. Mark verbirgt die Karte mit CSS
   10. Was ist mit diesen großen Bildern?
       1. Flüssige Bilder sind gewaltige Bilder
   11. Es sieht mobilfreundlich aus, ist es aber nicht
   12. Mobilzentriertes responsives Webdesign
   13. Was ist Progressive Enhancement?
       1. Die Vorteile der mobilzentrierten Entwicklung
   14. Stellen wir die Seite auf den Kopf
       1. Die aktuelle Struktur der Angezapft-Seite
   15. Bin ich auf einer neuen Seite oder nicht?
   16. Die Inhalts-Floats reparieren
   17. Mobile First-Medienabfragen
       1. Das CSS-Haus in Ordnung bringen
   18. Überraschung! Die Seite funktioniert im IE nicht mehr
       1. Das IE-Rettungsboot: bedingte Kommentare (Conditional Comments)
   19. Bedingte Kommentare mit einer Medienabfrage kombinieren
   20. Wie kommen wir voran?
       1. Das Header-Bild anzapfen
       2. Die alte Schule der Bildoptimierung
   21. Ein src, sie alle zu binden
       1. Ein responsiver Bildserver als Retter
   22. Wie Sencha.io Src funktioniert
       1. Keine zwingende Lösung für <img>-Tags
       2. Eine letzte Anpassung: Optimierte Bier-Etiketten-Bilder
   23. Das ist eine rasante mobile Webseite
   24. Zoom, Zoom, bumm ...
   25. Das Recht zu zoomen
       1. Das Zoomen wieder anschalten
   26. Zurück zu unserem Projektplan
       1. Die Karte mit JavaScript wieder einfügen
   27. Eigentlich wäre so eine Karte schon recht nützlich
       1. Einen Link auf die Karte hinzufügen
   28. Eine Pseudo-Medienabfrage in JavaScript aufbauen
       1. Entfernen Sie den auskommentierten Iframe-Code
   29. Fügen Sie der Angezapft-Seite das JavaScript hinzu
   30. Diese Widgets sind nicht responsiv
   31. Die Iframe-Attribute in äquivalentes CSS umwandeln
       1. Ordnen Sie Styles Attributen zu
   32. Die Attribute aus dem JavaScript entfernen
   33. Jetzt sollte jeder die Kneipe finden können
   34. Jetzt gibt es wieder Überschneidungen
   35. Lassen Sie sich vom Inhalt leiten
   36. Zeit für Browserdehnübungen
       1. Das Bookmarklet im Browser installieren
       2. Optional: Installieren Sie eine Erweiterung
   37. Breakpoints als Retter
       1. Die riesigen Bier-Etiketten schrumpfen
       2. Früher auf eine Spalte wechseln
       3. Unser erstes mobilzentriertes responsives Design ist fertig
8. 3. Eine eigene mobile Website: Ungünstige Umstände
   1. Die Außendienstmitarbeiter von Vierbeinige Freunde
   2. Wie erhalten und teilen die Mitarbeiter die Daten, die sie benötigen?
      1. Der Bedarf nach einer mobilen Website wächst
   3. Mobilnutzer zu einer mobilgerechten Website umleiten
   4. Mobilnutzer aufspüren
   5. Freundschaft schließen mit dem User-Agent
      1. User-Agent-Archäologie
   6. User-Agent: eine Ausgeburt der Hölle?
      1. Welche Browser sind das?
   7. Klare Worte: Die meisten großen Sites haben eine eigene Mobilsite
      1. Manche Dinge erscheinen auf der Serverseite einfach natürlicher ...
      2. ... und der User-Agent-Header ist unser bester Hinweis
   8. Oder wollen Sie eigentlich einen Redirect durchführen?
      1. Beschaffen Sie sich das Skript
   9. Werfen wir einen Blick auf das Skript
   10. Wie das Skript funktioniert
       1. Stellen Sie sicher, dass Ihre Umgebung TÜV-geprüft ist
   11. Erstellen Sie ein Mobil-Mock-up
       1. Ein paar Änderungen am Redirect-Skript
   12. Sonderlieferung ... mit Komplikationen
       1. Opera Mini?
   13. Nicht alle Handys sind Smartphones ... bei Weitem nicht
       1. Wie viele Handys gibt es in Indien denn überhaupt?
       2. Und so schlecht sind einfache Handys gar nicht
   14. Auf elementarer Ebene: XHTML-MP
   15. Warum sollten wir uns mit etwas derart Veraltetem befassen?
   16. Frühjahrsputz mit XHTML-MP
   17. Scrollen nervt
       1. ... zum Glück gibt es Zugriffstasten
   18. Ein letzter Flatterball
   19. Zugriffstasten im Einsatz
       1. Vergessen Sie das Validieren nicht
   20. Ist unsere Seite einsatzbereit?
   21. Was ist schiefgelaufen?
   22. Die Fehler beheben
   23. Mobilfähiges CSS
       1. In der Theorie klingt das einfach
   24. Hmmm ... etwas fehlt
       1. Wo sind die Zahlen hin?
       2. Bye-bye, Buttons
   25. Der Button-Look wird zutiefst vermisst!
   26. Ein umwerfender Erfolg!
9. 4. Entscheiden, wer berücksichtigt wird: Welche Geräte sollen wir berücksichtigen?
   1. Woher wissen Sie, wo Sie die Grenze ziehen müssen?
   2. Lösen Sie sich für einen Augenblick von der Tastatur
      1. Welche Grenze müssen wir ziehen?
   3. Nicht unterstützt vs. nicht unterstützbar
      1. Werden Sie nicht ausfallend
   4. Stellen Sie sich Fragen zu Ihrem Projekt
   5. Zutaten für Ihren Mobilzaubertrank
   6. Ihren Vorrat an Werkzeugen und Daten anzapfen
   7. Woher weiß ich, ob meine Kunden das richtige Mobilgerät haben?
10. 5. Gerätedatenbanken und -klassen: Gemeinsam stark
    1. Ein Panik-Button für überdrehte Studenten
    2. Der Button ist ausschließlich für Mobilgeräte gedacht
       1. Aber woher wissen wir, ob der Nutzer ein Mobiltelefon verwendet?
    3. Die Rettung: Mobilgerätedatenbanken
    4. WURFL
    5. WURFL und seine Fähigkeiten
       1. Es gibt mehrere Varianten von WURFL
       2. Wir werden die PHP-API nutzen
    6. WURFL: schlauer API-Code
       1. Ein Geräte- und Gerätefamilienbaum
       2. Und jetzt sollten Sie WURFL auf Ihrem Rechner installieren
    7. Eine eigene Explorer-Seite aufbauen
       1. Die Schritte zum Aufbau einer eigenen Explorer-Seite
    8. Eine Explorer-Seite: die Umgebung einrichten
       1. Die Verzeichnisstruktur für die Explorer-Seite
    9. Ein guter Anfang!
       1. Aber das geht noch besser
    10. Zwei kleine Erweiterungen, die die Explorer-Seite verbessern
    11. Die Fähigkeiten zum Einsatz bringen
        1. Mit WURFL Inhalte differenzieren
        2. Der Pfad zum Erfolg
    12. WURFL die richtigen Fragen stellen
    13. Das Gerät initialisieren und die Daten vorbereiten
    14. Ist das Ding mobil?
    15. Gefahr im Verzug!
        1. Jetzt den Wert nutzen
    16. Die Seite mit WURFL etwas intelligenter machen
        1. Über Links Anrufe anstoßen
    17. Der Panik-Button: nur für Telefone
        1. Zunächst müssen wir uns aber die Werte beschaffen
        2. Dann können wir sie auswerten
    18. Geräte zusammentreiben
        1. Erst sortieren, dann loslegen
    19. Geräteklassen
    20. Das Bild ist gerade erheblich komplexer geworden
        1. Ein lukrativer Zweig des Geschäfts von Bestanden! expandiert
        2. Ein erster Blick auf das geplante Produkt
    21. Die Homepage aus Mobilperspektive bewerten
        1. Gerätedaten logisch gruppieren
    22. Anforderungen für die verschiedenen Mobilgerätetypen gruppieren
        1. Ein vollständigeres Weberlebnis
        2. Ein schlankeres Weberlebnis
    23. Unsere Geräteklassen abrunden
        1. Was ist mit Tablets?
        2. Wo ziehen wir die Grenze?
        3. Unser Geräteklassenbestand
    24. Bringen wir das Stück auf die Bühne
        1. Aber zunächst ...
        2. Und los geht es!
    25. Die Zuordnungsfunktion
    26. Was passiert in dieser switch-Anweisung?
        1. Ein paar Beispiele
    27. Die Vergleichsfunktion zum Prüfen von Fähigkeiten einsetzen
    28. Die letzten Schritte
    29. Und, wie ist es gelaufen?
        1. Offensichtlich ist da etwas schiefgelaufen
        2. Die Lücken füllen
    30. Die Löcher in den Geräteklassentests stopfen
    31. Die Geräteklassen zum Einsatz bringen
        1. Nicht unterstützte Geräte werden wir ähnlich wie Desktopbrowser behandeln ... für den Augenblick zumindest
    32. Handeln Sie umsichtig und planvoll
        1. WURFLs »generic« ist ziemlich allgemein
        2. Und nun?
    33. Wir brauchen ein größeres Sicherheitsnetz
        1. Zufälliger Erfolg reicht nicht
    34. Was du heute kannst besorgen ...
11. 6. Mit Frameworks mobile Web-Apps bauen: Der Tartanator
    1. HTML5 ... App ... was heißt das eigentlich?
       1. HTML5 ist eine ganz bestimmte Sache ...
       2. ... aber es steht mittlerweile für mehr
       3. ... und was genau ist eine Web-App?
    2. Wie sich »traditionelle« Websites üblicherweise verhalten
    3. Wie sich App-ähnliche Websites häufig verhalten
    4. Die mobile HTML5-Web-App von Tartan Unlimited
    5. Der Masterplan für Phase 1 des Tartanators
    6. ... oder Sie könnten ein mobiles Web-Framework nutzen
    7. Wieso ein mobiles Web-App-Framework?
    8. Unsere Wahl für den Tartanator: jQuery Mobile
    9. Mit jQuery Mobile eine einfache Site aufbauen
       1. Ein einfacher Anfang
       2. Die jQuery Mobile-Codekomponenten einschließen
    10. Den Rest der Seite auszeichnen
    11. Und los geht’s!
    12. Das HTML5-data-*-Attribut
        1. Den Tartanator erweitern
        2. Machen Sie die Liste zu einer jQuery Mobile-Liste
    13. Unsere Liste: besser, aber noch nicht gut
    14. Mit jQuery Mobile mehrere Seiten verlinken
    15. Des Tartanators Kern: die Tartans selbst
        1. Beginnen Sie, an tartans.html zu arbeiten
    16. Wir haben Ihnen den Anfang der Liste vorgegeben
        1. Geben Sie der Liste etwas Pep
    17. Setzen Sie den Rest der Tartans ein
    18. Listen filtern und organisieren
    19. Unsere Tartan-Liste sieht jetzt besser aus
    20. Jetzt sollten wir Eugen unsere ersten Arbeiten am Tartanator zeigen
    21. Tricks, die eine Website App-mäßiger machen
        1. Den Tartanator App-ähnlicher machen: To-do-Liste
    22. Eine Footer-Werkzeugleiste hinzufügen
        1. Eine Navigationsleiste aufbauen
        2. Die Buttons in die Navigationsleiste stecken
    23. Der Werkzeugleiste mehr Pep geben
    24. Die Struktur abschließen
        1. Kleben wir auch den Header fest
    25. Beginnen wir damit, das Formular zur Erstellung von Tartans aufzubauen
    26. Tartans: Muster wie Rezepte
        1. Das Tartan-Rezept nachkochen
    27. Tartan-Muster in ein Formular übersetzen
    28. Ein HTML5-Formular aufbauen
        1. Formularstruktur
    29. Fügen wir ein paar einfache Formularfelder ein
        1. jQuery Mobile Hinweise auf die Formularfelder geben
    30. Listen in Listen zur Farbeingabe
    31. Die Farbe/Größe-Zutatenpaare: das Farbwahlfeld
    32. Farbe/Größe-Feldpaare: das Größe-Feld
    33. Auf das Formular verlinken ...
        1. ... und Benutzern einen Weg zurück bieten
12. 7. Mobile Web-Apps in der Praxis: Supermobile Web-Apps
    1. Es sieht ansehnlich aus ...
       1. Er sieht wie eine App aus ...
       2. ... muss sich aber auch wie eine verhalten
    2. Mobile Apps in der Praxis
       1. To-dos: Benutzerdefinierte Tartan-Muster implementieren
    3. Auf die Plätze, fertig, verbessern!
       1. Wir haben das Richtige gemacht
       2. Jetzt kommen die Verbesserungen
    4. Ein besseres Formular aufbauen
       1. Ein Custom-Widget für das Farb-Select-Feld
    5. Ein Widget zur Verwaltung der Listen von Farben und Größen
       1. Testen Sie es
    6. Ein Blick unter die Motorhaube
    7. Das also sind die Frontend-Verbesserungen ...
    8. ... und jetzt zum Backend
    9. Die beiden Seiten von generate.php
       1. Anforderung mit AJAX
       2. Direkt gesendete Formulare
    10. Eine letzte Sache noch!
    11. Zwei von drei: ein guter Anfang
        1. Aber wir sind noch nicht fertig
    12. Offline ist wichtig
        1. Das Offline-Manifest
    13. Ein Grundrezept zur Erstellung eines Cache-Manifests
        1. Die verdächtig einfache Syntax eines Cache-Manifests
    14. Unglücklicherweise steckt der Teufel im Detail
        1. Webentwicklers Helferlein
    15. Das Manifest mit dem richtigen Inhaltstyp ausliefern
    16. Endlich Sieg
        1. Jetzt wird es Zeit für die ortsbezogene Event-Suche
    17. Wie Geolocation funktioniert
    18. Wie man W3C-konforme Browser um ihre Position bittet
        1. Die von getCurrentPosition gelieferten Informationen verarbeiten
    19. Mit der Events suchen-Seite beginnen: das Fundament
    20. Integrieren wir Geolocation
    21. Nichts gefunden
13. 8. Hybride mobile Apps mit PhoneGap: Tartan-Jagd: Nativ werden
    1. Neue Gelegenheiten
    2. Wie funktionieren Hybrid-Apps?
    3. PhoneGap als Brücke zwischen Web und Gerät
       1. PhoneGap Build
       2. Ist Ihre Entwicklungsumgebung einsatzbereit?
    4. Machen Sie sich mit PhoneGap Build vertraut
    5. Wie die App funktionieren wird?
    6. Aufgespürte Tartans festhalten
       1. Wie Sie jetzt fortfahren werden
    7. Anatomie des Tartan-Jagd-Projekts
       1. Wir sind bereits fast für PhoneGap Build bereit
    8. Laden Sie Ihre App herunter
    9. Wählen Sie Ihren Weg
       1. Achtung, fertig, los!
    10. Gute Arbeit!
        1. Speichern, welche Tartans die Benutzer gefunden haben
    11. Wer fand was? – Gefundene Tartans speichern
        1. Was ist das Besondere an LocalStorage?
    12. Was LocalStorage für uns leistet
        1. Der Getter und der Setter
    13. Prüfen, was der Browser unterstützt
        1. Moment ... die Geschichte ist noch nicht vorüber
    14. Mit einer Funktion die gefundenen Tartans anzeigen
    15. Die Methoden toggle und toggleClass
        1. Schauen wir uns diesen Codeteil erneut an
    16. Sie haben einen Tartan gefunden? Wo sind die Beweise?
        1. Es gibt eine API dafür
        2. Die Macht von PhoneGap entfesseln
    17. PhoneGap einbinden, um Bilder aufzunehmen
    18. PhoneGap ist fast für das Shooting bereit
    19. Jetzt sind wir für die MediaCapture-API bereit
    20. Was tun wir bei Erfolg?
        1. Und was ist, wenn etwas schiefläuft?
    21. Im wahren Leben läuft nie alles nach Plan
    22. Etwas Anonymität
    23. Fertig!
14. 9. Für die Zukunft gewappnet: (Etwas) Ordnung ins Chaos bringen
    1. Was jetzt?
    2. Es ist kompliziert
       1. Zeit, dass wir uns von unserer kollektiven Illusion der Kontrolle befreien
    3. Ein zukunftsfreundliches Manifest
    4. Zukunftsoffen
       1. Eine neue Hoffnung
    5. Zukunftssicher können Sie nicht sein, zukunftsoffen schon
       1. Es gibt keine Allzwecklösungen
    6. Heute App, morgen Webseite
       1. Die PhoneGap-Referenzen entfernen
    7. Es ist ein langer Weg: Hier sind einige Direktiven
    8. Die Zukunft im Blick
15. A. Was übrig bleibt: Die Top Sechs der Themen, die wir nicht behandelt haben
    1. 1. Auf Mobilgeräten testen
    2. 2. Remote-Debugging
       1. WEb INspector REmote (weinre)
       2. Wie weinre funktioniert
       3. Einen eigenen weinre-Server laufen lassen
       4. Den weinre-Inspector erforschen
    3. 3. Ermitteln, welche Browser wir unterstützen
       1. Listen, die festhalten, welcher Browser was unterstützt
       2. Testen, was Ihr Browser unterstützt
       3. Oder beides zur gleichen Zeit ...
    4. 4. Geräte-APIs
       1. Was sind Geräte-APIs?
       2. Von DAP und WAC aufgestellte Standards
       3. Klingt gut! Warum wird es dann in diesem Buch nicht behandelt?
    5. 5. Application Stores und App-Vertrieb
       1. Eine Warnung: Die meisten Apps sind ein Minusgeschäft
       2. Jeder hat seinen Application Store ...
       3. ... und jetzt gibt es sie auch noch für Web-Apps
       4. Einige Tipps von Nicht-Experten
    6. 6. RESS: REsponsive Design + serverseitige Komponenten
       1. Die Zukunft von RESS
16. B. Die Webserverumgebung einrichten: Das Fundament
    1. Was wir von Ihnen fordern
    2. Nur lokal verfügbar
    3. Windows und Linux: XAMPP installieren und konfigurieren
       1. Laden Sie das Paket mit der Webserversoftware herunter
       2. Für die Windows-Kinder
    4. XAMPP in Betrieb nehmen
       1. Linux-Nutzer aufgepasst
       2. Online gibt es massenhaft Informationen
    5. Mac-Kids: Es ist MAMP-Zeit
       1. Die Installation ist ein Klacks
    6. Im richtigen Hafen anlegen
       1. Auf einem Mac ...
       2. ... und unter Windows und Linux
    7. Auf Ihren Webserver zugreifen
       1. Die Wurzel der Dinge
    8. phpInfo, bitte!
17. C. WURFL installieren: Geräte erschnüffeln
    1. Wer ist der Kopf?
       1. Die API herunterladen
    2. Und wo ist die Hand?
    3. Kopf und Hand zusammenbringen
    4. Ein paar Dateisystem-Aufräumarbeiten
    5. Ihre Notizsammlung!
       1. Der Pfad zum WURFL-PHP-API-Code
       2. Ressourcenpfade
       3. Fall abgeschlossen!
18. D. Android-SDK und Werkzeuge installieren: Die passende Umgebung schaffen
    1. Laden wir das Android-SDK herunter
       1. Schritte zu einem glücklichen Android-SDK
    2. Die richtigen Werkzeuge für die Aufgabe
       1. Plattformen und Werkzeuge installieren
    3. Drücken Sie Install und werfen Sie die Kaffeemaschine an
    4. Träumen virtuelle Geräte von elektrischen Schafen?
    5. Ein neues virtuelles Gerät erstellen
    6. Nehmen Sie die Dinger in Betrieb!
    7. Apps hin, Apps her
       1. Zur Installation
       2. Zur Deinstallation
       3. Pfadfinder
    8. Den rechten PATH finden
       1. Mac-Menschen
       2. Windows-Menschen
       3. Sie haben es geschafft!
19. Stichwortverzeichnis
20. About the Authors
21. Copyright