Books & Videos

Table of Contents

  1. Chapter 1 Einstieg in die mobile Webprogrammierung: Responsive Webdesign

    1. Springen Sie auf den Mobilzug auf

    2. Seltsame Ereignisse auf dem Weg zur Kneipe

    3. Wenn Handybrowser so toll sind ...

    4. Was ist so anders beim mobilen Web?

    5. Responsive Webdesign

    6. Ein Beispiel einer responsiv gestalteten Site

    7. Andere Umgebung, anderes CSS

    8. CSS-Medienabfragen

    9. Die aktuelle Struktur der Splendid Walrus-Site

    10. Das aktuelle CSS analysieren

    11. Was muss sich ändern?

    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

    16. Die Teile zusammensetzen

    17. Was soll an einem Layout mit fester Breite denn falsch sein?

    18. Was macht »flüssig« besser?

    19. Verflüssigung

    20. Die Verflüssigungsformel

    21. Die Verflüssigung fortsetzen

    22. Kontextwechsel

    23. Suchen Sie den Fehler im Bild?

    24. Flüssige Bilder

    25. Haben wir es jetzt geschafft?

    26. Details, Details

    27. Die Verantwortung nicht vergessen

    28. Das ist eine responsive Site!

    29. Responsives Design ist auch eine Geisteshaltung

  2. Chapter 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?

    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?

    10. Was ist mit diesen großen Bildern?

    11. Es sieht mobilfreundlich aus, ist es aber nicht

    12. Mobilzentriertes responsives Webdesign

    13. Was ist Progressive Enhancement?

    14. Stellen wir die Seite auf den Kopf

    15. Bin ich auf einer neuen Seite oder nicht?

    16. Die Inhalts-Floats reparieren

    17. Mobile First-Medienabfragen

    18. Überraschung! Die Seite funktioniert im IE nicht mehr

    19. Bedingte Kommentare mit einer Medienabfrage kombinieren

    20. Wie kommen wir voran?

    21. Ein src, sie alle zu binden

    22. Wie Sencha.io Src funktioniert

    23. Das ist eine rasante mobile Webseite

    24. Zoom, Zoom, bumm ...

    25. Das Recht zu zoomen

    26. Zurück zu unserem Projektplan

    27. Eigentlich wäre so eine Karte schon recht nützlich

    28. Eine Pseudo-Medienabfrage in JavaScript aufbauen

    29. Fügen Sie der Angezapft-Seite das JavaScript hinzu

    30. Diese Widgets sind nicht responsiv

    31. Die Iframe-Attribute in äquivalentes CSS umwandeln

    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

    37. Breakpoints als Retter

  3. Chapter 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?

    3. Mobilnutzer zu einer mobilgerechten Website umleiten

    4. Mobilnutzer aufspüren

    5. Freundschaft schließen mit dem User-Agent

    6. User-Agent: eine Ausgeburt der Hölle?

    7. Klare Worte: Die meisten großen Sites haben eine eigene Mobilsite

    8. Oder wollen Sie eigentlich einen Redirect durchführen?

    9. Werfen wir einen Blick auf das Skript

    10. Wie das Skript funktioniert

    11. Erstellen Sie ein Mobil-Mock-up

    12. Sonderlieferung ... mit Komplikationen

    13. Nicht alle Handys sind Smartphones ... bei Weitem 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

    18. Ein letzter Flatterball

    19. Zugriffstasten im Einsatz

    20. Ist unsere Seite einsatzbereit?

    21. Was ist schiefgelaufen?

    22. Die Fehler beheben

    23. Mobilfähiges CSS

    24. Hmmm ... etwas fehlt

    25. Der Button-Look wird zutiefst vermisst!

    26. Ein umwerfender Erfolg!

  4. Chapter 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

    3. Nicht unterstützt vs. nicht unterstützbar

    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?

  5. Chapter 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

    3. Die Rettung: Mobilgerätedatenbanken

    4. WURFL

    5. WURFL und seine Fähigkeiten

    6. WURFL: schlauer API-Code

    7. Eine eigene Explorer-Seite aufbauen

    8. Eine Explorer-Seite: die Umgebung einrichten

    9. Ein guter Anfang!

    10. Zwei kleine Erweiterungen, die die Explorer-Seite verbessern

    11. Die Fähigkeiten zum Einsatz bringen

    12. WURFL die richtigen Fragen stellen

    13. Das Gerät initialisieren und die Daten vorbereiten

    14. Ist das Ding mobil?

    15. Gefahr im Verzug!

    16. Die Seite mit WURFL etwas intelligenter machen

    17. Der Panik-Button: nur für Telefone

    18. Geräte zusammentreiben

    19. Geräteklassen

    20. Das Bild ist gerade erheblich komplexer geworden

    21. Die Homepage aus Mobilperspektive bewerten

    22. Anforderungen für die verschiedenen Mobilgerätetypen gruppieren

    23. Unsere Geräteklassen abrunden

    24. Bringen wir das Stück auf die Bühne

    25. Die Zuordnungsfunktion

    26. Was passiert in dieser switch-Anweisung?

    27. Die Vergleichsfunktion zum Prüfen von Fähigkeiten einsetzen

    28. Die letzten Schritte

    29. Und, wie ist es gelaufen?

    30. Die Löcher in den Geräteklassentests stopfen

    31. Die Geräteklassen zum Einsatz bringen

    32. Handeln Sie umsichtig und planvoll

    33. Wir brauchen ein größeres Sicherheitsnetz

    34. Was du heute kannst besorgen ...

  6. Chapter 6 Mit Frameworks mobile Web-Apps bauen: Der Tartanator

    1. HTML5 ... App ... was heißt das eigentlich?

    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

    10. Den Rest der Seite auszeichnen

    11. Und los geht’s!

    12. Das HTML5-data-*-Attribut

    13. Unsere Liste: besser, aber noch nicht gut

    14. Mit jQuery Mobile mehrere Seiten verlinken

    15. Des Tartanators Kern: die Tartans selbst

    16. Wir haben Ihnen den Anfang der Liste vorgegeben

    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

    22. Eine Footer-Werkzeugleiste hinzufügen

    23. Der Werkzeugleiste mehr Pep geben

    24. Die Struktur abschließen

    25. Beginnen wir damit, das Formular zur Erstellung von Tartans aufzubauen

    26. Tartans: Muster wie Rezepte

    27. Tartan-Muster in ein Formular übersetzen

    28. Ein HTML5-Formular aufbauen

    29. Fügen wir ein paar einfache Formularfelder ein

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

  7. Chapter 7 Mobile Web-Apps in der Praxis: Supermobile Web-Apps

    1. Es sieht ansehnlich aus ...

    2. Mobile Apps in der Praxis

    3. Auf die Plätze, fertig, verbessern!

    4. Ein besseres Formular aufbauen

    5. Ein Widget zur Verwaltung der Listen von Farben und Größen

    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

    10. Eine letzte Sache noch!

    11. Zwei von drei: ein guter Anfang

    12. Offline ist wichtig

    13. Ein Grundrezept zur Erstellung eines Cache-Manifests

    14. Unglücklicherweise steckt der Teufel im Detail

    15. Das Manifest mit dem richtigen Inhaltstyp ausliefern

    16. Endlich Sieg

    17. Wie Geolocation funktioniert

    18. Wie man W3C-konforme Browser um ihre Position bittet

    19. Mit der Events suchen-Seite beginnen: das Fundament

    20. Integrieren wir Geolocation

    21. Nichts gefunden

  8. Chapter 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

    4. Machen Sie sich mit PhoneGap Build vertraut

    5. Wie die App funktionieren wird?

    6. Aufgespürte Tartans festhalten

    7. Anatomie des Tartan-Jagd-Projekts

    8. Laden Sie Ihre App herunter

    9. Wählen Sie Ihren Weg

    10. Gute Arbeit!

    11. Wer fand was? – Gefundene Tartans speichern

    12. Was LocalStorage für uns leistet

    13. Prüfen, was der Browser unterstützt

    14. Mit einer Funktion die gefundenen Tartans anzeigen

    15. Die Methoden toggle und toggleClass

    16. Sie haben einen Tartan gefunden? Wo sind die Beweise?

    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?

    21. Im wahren Leben läuft nie alles nach Plan

    22. Etwas Anonymität

    23. Fertig!

  9. Chapter 9 Für die Zukunft gewappnet: (Etwas) Ordnung ins Chaos bringen

    1. Was jetzt?

    2. Es ist kompliziert

    3. Ein zukunftsfreundliches Manifest

    4. Zukunftsoffen

    5. Zukunftssicher können Sie nicht sein, zukunftsoffen schon

    6. Heute App, morgen Webseite

    7. Es ist ein langer Weg: Hier sind einige Direktiven

    8. Die Zukunft im Blick

  1. Appendix Was übrig bleibt: Die Top Sechs der Themen, die wir nicht behandelt haben

    1. 1. Auf Mobilgeräten testen

    2. 2. Remote-Debugging

    3. 3. Ermitteln, welche Browser wir unterstützen

    4. 4. Geräte-APIs

    5. 5. Application Stores und App-Vertrieb

    6. 6. RESS: REsponsive Design + serverseitige Komponenten

  2. Appendix Die Webserverumgebung einrichten: Das Fundament

    1. Was wir von Ihnen fordern

    2. Nur lokal verfügbar

    3. Windows und Linux: XAMPP installieren und konfigurieren

    4. XAMPP in Betrieb nehmen

    5. Mac-Kids: Es ist MAMP-Zeit

    6. Im richtigen Hafen anlegen

    7. Auf Ihren Webserver zugreifen

    8. phpInfo, bitte!

  3. Appendix WURFL installieren: Geräte erschnüffeln

    1. Wer ist der Kopf?

    2. Und wo ist die Hand?

    3. Kopf und Hand zusammenbringen

    4. Ein paar Dateisystem-Aufräumarbeiten

    5. Ihre Notizsammlung!

  4. Appendix Android-SDK und Werkzeuge installieren: Die passende Umgebung schaffen

    1. Laden wir das Android-SDK herunter

    2. Die richtigen Werkzeuge für die Aufgabe

    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

    8. Den rechten PATH finden