O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

HTML5-Programmierung von Kopf bis Fuß

Book Description

"HTML5-Programmierung von Kopf bis Fuß" vermittelt in bewährter Von Kopf bis Fuß-Tradition anhand zahlreicher praktischer Beispiele, grafischer Elemente und Übungen auf kluge und kreative Art die Neuerungen, die HTML5 so spannend machen: Es ist besonders praxisorientiert und erleichtert die Gestaltung von Webseiten mit lokaler Speicherung, macht 2-D-Zeichnungen, Geolocation und Offline-Unterstützung für Webanwendungen möglich, und unterstützt das Einbinden von Video- und Audio-Dateien ohne zusätzliches Plug-in. Dieses Buch wendet sich an Web-Entwickler, die bereits HTML- und CSS-Kenntnisse mitbringen und ihre Konzentration voll auf die Neuerungen und Verbesserungen von HTML5 richten wollen.

Table of Contents

  1. HTML5-Programmierung von Kopf bis Fuß: Webanwendungen mit HTML5 und JavaScript
  2. Dedication
  3. Die Autoren von »HTML5-Programmierung«
  4. Über den Übersetzer dieses Buchs
  5. Wie man dieses Buch benutzt: Einführung
    1. Für wen ist dieses Buch?
    2. Wer sollte eher die Finger von diesem Buch lassen?
    3. Wir wissen, was Sie gerade denken
    4. Und wir wissen, was Ihr Gehirn gerade denkt
    5. Metakognition: Nachdenken übers Denken
    6. Das haben WIR getan
    7. Und das können SIE tun, um sich Ihr Gehirn untertan zu machen
    8. Lies mich!
    9. Softwareanforderungen
    10. Fachgutachter
    11. Danksagungen
    12. Noch mehr Danksagungen!
  6. 1. HTML5 kennenlernen: Willkommen in Webville
    1. ECHTES HTML5 bitte vortreten ...
    2. Wie HTML5 wirklich funktioniert ...
    3. Was kann JavaScript?
    4. Richtiges JavaScript
    5. Fortsetzung: Richtiges JavaScript ...
  7. 2. Einführung in JavaScript und das DOM: Ein bisschen Code
    1. Die Art, wie JavaScript arbeitet
    2. Was Sie mit JavaScript tun können
    3. Variablen deklarieren
      1. Drei Schritte für die Erstellung einer Variablen
    4. Namen für Variablen finden
      1. Regel 1: Beginnen Sie den Namen mit einem Buchstaben, einem _ oder einem $
      2. Regel 2: Danach können Sie eine beliebige Anzahl von Buchstaben, Ziffern, Unterstrichen und Dollarzeichen verwenden
      3. Regel 3: Vermeiden Sie reservierte Wörter
    5. Ausdrucksstärke
    6. Dinge immer wieder tun ...
    7. Entscheidungen treffen mit JavaScript
    8. Viele Entscheidungen ... und ein Standardfall
    9. Wie und wo Sie JavaScript in Ihre Seiten einfügen
    10. Wie JavaScript mit Ihrer Seite interagiert
    11. Ein eigenes DOM backen
    12. Ein Vorgeschmack auf das DOM
    13. Probefahrt mit den Planeten
    14. Sie können nicht am DOM herummachen, bevor die Seite vollständig geladen wurde
      1. Aktualisieren Sie die Seite
    15. Wofür ist das DOM überhaupt gut?
    16. Können wir nochmals über JavaScript sprechen? Oder darüber, wie man mehrere Werte speichert?
      1. Arrays erstellen
      2. Weitere Elemente dem Array hinzufügen
      3. Array-Elemente abrufen
      4. Größe eines Arrays erfahren
    17. Der Phrasendrescher
  8. 3. Events, Handler und der ganze Rest: Ein bisschen Interaktion
    1. Machen Sie sich bereit für webvilleTunes
    2. Los geht’s ...
      1. Probefahrt
    3. Es passiert nichts, wenn ich auf »Hinzufügen« klicke
    4. Auf Events reagieren
    5. Pläne schmieden ...
    6. Zugriff auf die Schaltfläche »Hinzufügen«
    7. click-Handler für die Schaltfläche
      1. Ein Testlauf ...
    8. Was gerade passiert ist ...
    9. Songtitel abrufen
    10. Wie fügen wir einen Song in die Seite ein?
    11. Neue Elemente erstellen
    12. Elemente in das DOM einfügen
    13. Schreiben Sie alles zusammen ...
    14. ... und machen Sie eine Probefahrt
    15. Wiederholung: was wir getan haben
    16. Wie das Code-Fertiggericht genutzt wird
    17. Code-Fertiggericht integrieren
      1. Probefahrt mit den gespeicherten Titeln
  9. 4. JavaScript-Funktionen und Objekte: Echtes JavaScript
    1. Erweitern Sie Ihren Wortschatz
    2. Eigene Funktionen hinzufügen
      1. Funktion pruefeAntwort erstellen
    3. Die Arbeitsweise einer Funktion
    4. Lokale und globale Variablen
      1. Wissen oder Peinlichkeit
    5. Geltungsbereich lokaler und globaler Variablen
    6. Das kurze Leben der Variablen
    7. Haben wir erwähnt, dass Funktionen auch Werte sind?
    8. Funktionen als Wert verwenden
    9. Hat jemand »Objekte« gesagt?!
    10. Über Eigenschaften ...
    11. JavaScript-Objekte erstellen
    12. Was Sie mit Objekten tun können
    13. Objekte an Funktionen übergeben
      1. Fido auf Diät!
    14. Nächste Vorstellung um ...
    15. Test am Drive-in
    16. Objekte können auch ein Verhalten haben
    17. Zurück zum Webville Cinema ...
    18. Aber das kann nicht stimmen!
    19. Weg mit dem Parameter film ...
    20. Und jetzt?
    21. Das Schlüsselwort »this«
    22. Probefahrt mit »this«
    23. Einen Konstruktor erstellen
    24. Unser Konstruktor im Einsatz
    25. Wie funktioniert this eigentlich?
    26. Probefahrt für Ihre Fabrik
    27. Was ist überhaupt das window-Objekt?
    28. Ein genauerer Blick auf window.onload
    29. Noch ein Blick auf das document-Objekt
    30. Ein genauerer Blick auf document.getElementById
    31. Noch ein Objekt: das Element-Objekt
  10. 5. Standortsensitives HTML: Geolocation
    1. Standort, Standort, Standort
    2. Länge und Breite ...
    3. Wie die Geolocation-API Ihren Standort bestimmt
    4. Wo sind Sie überhaupt?
    5. Probefahrt
    6. Was wir gerade getan haben ...
    7. Wie alles zusammenpasst
    8. Unser geheimer Standort ...
    9. Code zum Ermitteln der Entfernung
    10. Standortsensitive Probefahrt
    11. Position auf der Karte darstellen
    12. Karten in Seiten einfügen
      1. Bereit für die Karte ...
    13. Karte anzeigen
    14. Probefahrt mit dem neuen Head-up-Display
    15. Eine Nadel hineinstecken
    16. Markertest
    17. Zurück zur Geolocation-API ...
    18. Wie ist es mit der Genauigkeit?
    19. Genauigkeitstestlauf
    20. »Wohin Sie auch gehen, da sind Sie«
      1. Bewegungen mitverfolgen
    21. Weiter geht’s mit der App
    22. Den alten Code überarbeiten ...
      1. Handler »beobachteStandort« schreiben
      2. Den stop-Handler schreiben
      3. Eine kleine Änderung in zeigeStandort ...
    23. Zeit, sich zu bewegen!
    24. Sie haben Optionen ...
      1. Können wir noch mal über die Genauigkeit sprechen?
    25. Zeitlimits maximales Alter
    26. Optionen angeben
    27. Vervollständigen wir die App!
    28. Die neue Funktion integrieren
    29. Und noch mal!
  11. 6. Mit dem Web sprechen: Extrovertierte Apps
    1. Die Kaukugel & Co. KG möchte eine Web-App
    2. Hintergrundfakten zu Kaukugel & Co.
    3. Schnelleinstieg ...
      1. Drehen Sie um ...
    4. Wie nutzen wir einen Webservice?
    5. Requests mit JavaScript
    6. Zur Seite, XML, hier kommt JSON
    7. Ein kurzes JSON-Beispiel
    8. An die Arbeit!
      1. Noch ein onload-Handler
    9. Kaugummi-Verkaufszahlen anzeigen
    10. Vorsicht, Umleitung!
    11. Einen eigenen Webserver einrichten
    12. Eigenen Webserver einrichten – Fortsetzung
    13. Zurück zum Code
    14. Testen wir schon mal!
    15. Den Kunden beeindrucken ...
    16. Code für JSON überarbeiten
    17. Auf der Zielgeraden ...
    18. Umzug auf den Live-Server
    19. Live-Probefahrt ...
    20. Cliffhanger!
    21. Erinnern Sie sich an den Cliffhanger? Ein Bug
    22. Was machen wir jetzt?!
    23. Welche Browsersicherheitsrichtlinien?
      1. Zulässiges Verhalten für JavaScript-Code
      2. Nicht zulässiges Verhalten für JavaScript-Code
    24. Was sind unsere Optionen?
    25. Darf ich vorstellen: JSONP
    26. Wofür steht das »P«?
    27. Neue Version der Kaukugel & Co.-App
    28. Probefahrt mit dem JSONP-Code
    29. Kaukugel & Co. optimieren
    30. Schritt 1: Das script-Element ...
    31. Schritt 2: Zeit für den Timer
    32. Zeitgesteuerte Probefahrt
    33. Schritt 3: JSONP neu implementieren
      1. Zuerst die JSONP-URL
      2. Ein neues script-Element
      3. Wie fügen wir das Skript in das DOM ein?
      4. Code zum Einfügen des Skripts in das DOM
    34. Fast vergessen: Vorsicht mit dem gefürchteten Browsercache
    35. Noch EINE Probefahrt
    36. Doppelte Verkaufsberichte entfernen
    37. JSON-URL mit lastreporttime
    38. Probefahrt mit letzteBerichtsZeit
    39. Eilnachricht aus Kapitel 7 ...
  12. 7. Entdecken Sie Ihren inneren Künstler: Die Leinwand
    1. Unser neues Start-up: TweetShirt
    2. Ein Blick auf den Entwurf
    3. In der Zwischenzeit bei der TweetShirt-Crew ...
    4. Canvas in Seiten einfügen
    5. Probefahrt mit dem neuen Canvas
    6. Canvas sichtbar machen
    7. Zeichnen auf dem Canvas
    8. Kleine Canvas-Probefahrt ...
    9. Ein genauer Blick auf den Code
    10. Anmutiger Funktionsabbau
    11. TweetShirt: das große Ganze
    12. Zuerst das HTML
    13. Und jetzt das <form>
    14. Zeit zum Rechnen – mit JavaScript
    15. Funktion zeichneQuadrat
    16. Zeit für eine Probefahrt!
      1. Wir sehen alte und neue Quadrate
    17. Aufruf von hintergrundFarbeFuellen
      1. Noch eine schnelle Probefahrt mit hintergrundFarbeFuellen ...
    18. In der Zwischenzeit bei TweetShirt.com ...
      1. Ein paar Stunden später ...
    19. Zeichnen für Geeks
    20. Die arc-Methode im Einzelnen
    21. Ein kleiner Vorgeschmack auf arc
    22. Ich sage Grad, du sagst Radiant
    23. Zurück zum TweetShirt-Kreiscode
    24. Funktion zeichneKreis schreiben ...
      1. ... und Probefahrt!
    25. Willkommen zurück!
    26. Holen Sie sich Ihre Tweets
    27. Probefahrt mit Tweets
    28. Probelauf mit zeichneText
    29. Funktion zeichneText vervollständigen
    30. Schnelle Probefahrt und dann LAUNCH!
    31. Und noch eine Probefahrt
      1. Wir haben einen Pfad! Und jetzt?
    32. Kurze Pause, Lösung
  13. 8. Nicht Vaters Fernseher: Video ... mit dem Gaststar »Canvas«
    1. Brandneu: Webville TV
    2. Bringen wir das HTML hinter uns!
    3. Anschließen und testen ...
    4. Wie funktioniert das Video-Element?
    5. Genauer Blick auf die Videoattribute ...
    6. Was Sie über Videoformate wissen müssen
    7. Die Kontrahenten
    8. Mit den Formaten jonglieren ...
    9. Genauere Angaben zum Videoformat
    10. Ich dachte, es gibt APIs?
    11. »Programmplanung« für Webville TV
    12. Playlist für Webville TV
    13. Was ist mit dem Event-Handler los?
    14. Der »Ende des Videos«-Handler
    15. Eine Probefahrt ...
    16. Wie canPlayType funktioniert
      1. canPlayType im Einsatz
      2. Funktion dateiEndung integrieren
      3. Und Probefahrt ...
    17. Wir brauchen Ihre Hilfe!
    18. Kommen Sie in die Kabine ...
    19. Packen wir das Demogerät aus!
    20. Inspektion des werksseitigen Codes
      1. Zum JavaScript ...
      2. Handler für die Schaltflächen
    21. waehleEffekt und waehleVideo
    22. Hier kommen die Hilfsfunktionen
    23. Der Duft des neuen Demogeräts ... Probefahrt!
    24. Demovideos an den Start ...
    25. Videosteuerelemente implementieren
    26. Die restlichen Steuerelemente implementieren
    27. Nächste Probefahrt!
    28. Das lose Ende ...
    29. Und noch eine ...
    30. Testvideos umschalten
      1. Fahrerwechsel und Probefahrt!
    31. Zeit für Spezialeffekte
    32. Der FX-Plan
    33. Zeit für die Effekttasten
    34. Videoverarbeitung
    35. Videoverarbeitung mit Puffer
    36. Canvas-Puffer implementieren
    37. Video- und Canvas-Elemente positionieren
    38. Code für die Videoverarbeitung schreiben
    39. Den Puffer erstellen
    40. Den Puffer verarbeiten
      1. Wir haben einen Frame verarbeitet. Was nun?
    41. Effekte programmieren
    42. Film Noir-Probefahrt
    43. Große Probefahrt
    44. Wenn die Welt perfekt wäre ...
    45. Wie error-Events genutzt werden
    46. Crashtest!
    47. Wie es weitergeht?
  14. 9. Lokal speichern: Web Storage
    1. Der Browserspeicher (1995–2010)
    2. Wie Web Storage funktioniert
    3. Eigene Notizen
    4. Zeit für eine Probefahrt!
    5. Local Storage und Array bei der Geburt getrennt?
      1. Es gibt noch mehr!
    6. Jetzt wird’s ernst
    7. Die Benutzeroberfläche
    8. Und nun das JavaScript
    9. Zeit für eine Probefahrt!
    10. Benutzeroberfläche
    11. Und noch eine Probefahrt!
    12. Planmäßige Wartungsarbeiten
    13. Do-it-yourself-Wartung
    14. Wir haben die Technologie ...
    15. Neue Version mit Array
      1. Vorher ...
      2. Neu und verbessert
    16. notizErstellen auf ein Array umstellen
    17. Was müssen wir ändern?
    18. Alles zusammen
    19. Fortsetzung: Alles vereint ...
    20. Probefahrt!
    21. Haftnotizen löschen
    22. Die Funktion notizLoeschen
    23. Auswahl der zu löschenden Haftnotiz
    24. Zu löschende Notiz ermitteln
    25. Notizen auch aus dem DOM löschen
      1. Okay, testen Sie ...
    26. Aber natürlich!
    27. Benutzeroberfläche in Farbe
    28. JSON.stringify funktioniert nicht nur mit Arrays
    29. Das neue notizObj
    30. Probefahrt in Farbe
    31. Jetzt kennen Sie localStorage – was machen Sie damit?
  15. 10. JavaScript zum Arbeiten bringen: Web Workers
    1. Das gefürchtete langsame Skript
    2. Womit JavaScript seine Zeit verbringt
    3. Wenn ein Thread nicht reicht
    4. Noch ein Thread zu Hilfe!
    5. Wie Web Workers arbeiten
    6. Ihr erster Web Worker!
      1. Web Worker erstellen
    7. manager.js schreiben
    8. Nachrichten vom Worker empfangen
    9. Jetzt schreiben wir den Worker
      1. Nachrichten-Handler für den Worker
    10. Aufschlag: Probefahrt!
    11. Virtueller Landraub
    12. Sehen Sie sich um
    13. Mandelbrot-Mengen berechnen
    14. Verwendung mehrerer Workers
    15. Wir schreiben die Fraktal Explorer-App
      1. HTML-Markup für den Fraktal Explorer
    16. Workers erstellen und einteilen ...
    17. Den Code schreiben
    18. Workers starten
    19. Implementierung des Worker
    20. Kleiner Boxenstopp ...
    21. Zurück auf die Straße ...
    22. Zurück zum Code: Worker-Ergebnisse verarbeiten
    23. Psychedelische Probefahrt
      1. Auf click-Events reagieren
    24. Noch eine Probefahrt
    25. Canvas an das Browserfenster anpassen
    26. Der ordnungsbedürftige Koch Programmierer
    27. Letzte Probefahrt!
  16. A. Anhang: Was übrig bleibt: Die Top Ten der Themen, die wir nicht behandelt haben
    1. #1 Modernizr
      1. Modernizr in Seiten einbinden
      2. Unterstützung überprüfen
    2. #2 Audio
      1. Standard für Audiocodierung
    3. #3 jQuery
    4. #4 XHTML ist tot, lang lebe XHTML
    5. #5 SVG
    6. #6 Offline-Web-Apps
    7. #7 Web Sockets
    8. #8 Mehr zur Canvas-API
    9. #9 Selectors-API
    10. #10 Es gibt noch mehr!
      1. Indexed Database-API und Web SQL
      2. Drag and Drop
      3. Cross-Document Messaging
      4. Wir könnten noch mehr schreiben ...
    11. Der HTML5-Führer für neue Bauweisen
    12. Neuer Stil für neue Bauten mit CSS3
  17. Stichwortverzeichnis
  18. About the Authors
  19. Kolophon
  20. Copyright