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
- HTML5-Programmierung von Kopf bis Fuß: Webanwendungen mit HTML5 und JavaScript
- Dedication
- Die Autoren von »HTML5-Programmierung«
- Über den Übersetzer dieses Buchs
-
Wie man dieses Buch benutzt: Einführung
- Für wen ist dieses Buch?
- Wer sollte eher die Finger von diesem Buch lassen?
- Wir wissen, was Sie gerade denken
- Und wir wissen, was Ihr Gehirn gerade denkt
- Metakognition: Nachdenken übers Denken
- Das haben WIR getan
- Und das können SIE tun, um sich Ihr Gehirn untertan zu machen
- Lies mich!
- Softwareanforderungen
- Fachgutachter
- Danksagungen
- Noch mehr Danksagungen!
- 1. HTML5 kennenlernen: Willkommen in Webville
-
2. Einführung in JavaScript und das DOM: Ein bisschen Code
- Die Art, wie JavaScript arbeitet
- Was Sie mit JavaScript tun können
- Variablen deklarieren
- Namen für Variablen finden
- Ausdrucksstärke
- Dinge immer wieder tun ...
- Entscheidungen treffen mit JavaScript
- Viele Entscheidungen ... und ein Standardfall
- Wie und wo Sie JavaScript in Ihre Seiten einfügen
- Wie JavaScript mit Ihrer Seite interagiert
- Ein eigenes DOM backen
- Ein Vorgeschmack auf das DOM
- Probefahrt mit den Planeten
- Sie können nicht am DOM herummachen, bevor die Seite vollständig geladen wurde
- Wofür ist das DOM überhaupt gut?
- Können wir nochmals über JavaScript sprechen? Oder darüber, wie man mehrere Werte speichert?
- Der Phrasendrescher
-
3. Events, Handler und der ganze Rest: Ein bisschen Interaktion
- Machen Sie sich bereit für webvilleTunes
- Los geht’s ...
- Es passiert nichts, wenn ich auf »Hinzufügen« klicke
- Auf Events reagieren
- Pläne schmieden ...
- Zugriff auf die Schaltfläche »Hinzufügen«
- click-Handler für die Schaltfläche
- Was gerade passiert ist ...
- Songtitel abrufen
- Wie fügen wir einen Song in die Seite ein?
- Neue Elemente erstellen
- Elemente in das DOM einfügen
- Schreiben Sie alles zusammen ...
- ... und machen Sie eine Probefahrt
- Wiederholung: was wir getan haben
- Wie das Code-Fertiggericht genutzt wird
- Code-Fertiggericht integrieren
-
4. JavaScript-Funktionen und Objekte: Echtes JavaScript
- Erweitern Sie Ihren Wortschatz
- Eigene Funktionen hinzufügen
- Die Arbeitsweise einer Funktion
- Lokale und globale Variablen
- Geltungsbereich lokaler und globaler Variablen
- Das kurze Leben der Variablen
- Haben wir erwähnt, dass Funktionen auch Werte sind?
- Funktionen als Wert verwenden
- Hat jemand »Objekte« gesagt?!
- Über Eigenschaften ...
- JavaScript-Objekte erstellen
- Was Sie mit Objekten tun können
- Objekte an Funktionen übergeben
- Nächste Vorstellung um ...
- Test am Drive-in
- Objekte können auch ein Verhalten haben
- Zurück zum Webville Cinema ...
- Aber das kann nicht stimmen!
- Weg mit dem Parameter film ...
- Und jetzt?
- Das Schlüsselwort »this«
- Probefahrt mit »this«
- Einen Konstruktor erstellen
- Unser Konstruktor im Einsatz
- Wie funktioniert this eigentlich?
- Probefahrt für Ihre Fabrik
- Was ist überhaupt das window-Objekt?
- Ein genauerer Blick auf window.onload
- Noch ein Blick auf das document-Objekt
- Ein genauerer Blick auf document.getElementById
- Noch ein Objekt: das Element-Objekt
-
5. Standortsensitives HTML: Geolocation
- Standort, Standort, Standort
- Länge und Breite ...
- Wie die Geolocation-API Ihren Standort bestimmt
- Wo sind Sie überhaupt?
- Probefahrt
- Was wir gerade getan haben ...
- Wie alles zusammenpasst
- Unser geheimer Standort ...
- Code zum Ermitteln der Entfernung
- Standortsensitive Probefahrt
- Position auf der Karte darstellen
- Karten in Seiten einfügen
- Karte anzeigen
- Probefahrt mit dem neuen Head-up-Display
- Eine Nadel hineinstecken
- Markertest
- Zurück zur Geolocation-API ...
- Wie ist es mit der Genauigkeit?
- Genauigkeitstestlauf
- »Wohin Sie auch gehen, da sind Sie«
- Weiter geht’s mit der App
- Den alten Code überarbeiten ...
- Zeit, sich zu bewegen!
- Sie haben Optionen ...
- Zeitlimits maximales Alter
- Optionen angeben
- Vervollständigen wir die App!
- Die neue Funktion integrieren
- Und noch mal!
-
6. Mit dem Web sprechen: Extrovertierte Apps
- Die Kaukugel & Co. KG möchte eine Web-App
- Hintergrundfakten zu Kaukugel & Co.
- Schnelleinstieg ...
- Wie nutzen wir einen Webservice?
- Requests mit JavaScript
- Zur Seite, XML, hier kommt JSON
- Ein kurzes JSON-Beispiel
- An die Arbeit!
- Kaugummi-Verkaufszahlen anzeigen
- Vorsicht, Umleitung!
- Einen eigenen Webserver einrichten
- Eigenen Webserver einrichten – Fortsetzung
- Zurück zum Code
- Testen wir schon mal!
- Den Kunden beeindrucken ...
- Code für JSON überarbeiten
- Auf der Zielgeraden ...
- Umzug auf den Live-Server
- Live-Probefahrt ...
- Cliffhanger!
- Erinnern Sie sich an den Cliffhanger? Ein Bug
- Was machen wir jetzt?!
- Welche Browsersicherheitsrichtlinien?
- Was sind unsere Optionen?
- Darf ich vorstellen: JSONP
- Wofür steht das »P«?
- Neue Version der Kaukugel & Co.-App
- Probefahrt mit dem JSONP-Code
- Kaukugel & Co. optimieren
- Schritt 1: Das script-Element ...
- Schritt 2: Zeit für den Timer
- Zeitgesteuerte Probefahrt
- Schritt 3: JSONP neu implementieren
- Fast vergessen: Vorsicht mit dem gefürchteten Browsercache
- Noch EINE Probefahrt
- Doppelte Verkaufsberichte entfernen
- JSON-URL mit lastreporttime
- Probefahrt mit letzteBerichtsZeit
- Eilnachricht aus Kapitel 7 ...
-
7. Entdecken Sie Ihren inneren Künstler: Die Leinwand
- Unser neues Start-up: TweetShirt
- Ein Blick auf den Entwurf
- In der Zwischenzeit bei der TweetShirt-Crew ...
- Canvas in Seiten einfügen
- Probefahrt mit dem neuen Canvas
- Canvas sichtbar machen
- Zeichnen auf dem Canvas
- Kleine Canvas-Probefahrt ...
- Ein genauer Blick auf den Code
- Anmutiger Funktionsabbau
- TweetShirt: das große Ganze
- Zuerst das HTML
- Und jetzt das <form>
- Zeit zum Rechnen – mit JavaScript
- Funktion zeichneQuadrat
- Zeit für eine Probefahrt!
- Aufruf von hintergrundFarbeFuellen
- In der Zwischenzeit bei TweetShirt.com ...
- Zeichnen für Geeks
- Die arc-Methode im Einzelnen
- Ein kleiner Vorgeschmack auf arc
- Ich sage Grad, du sagst Radiant
- Zurück zum TweetShirt-Kreiscode
- Funktion zeichneKreis schreiben ...
- Willkommen zurück!
- Holen Sie sich Ihre Tweets
- Probefahrt mit Tweets
- Probelauf mit zeichneText
- Funktion zeichneText vervollständigen
- Schnelle Probefahrt und dann LAUNCH!
- Und noch eine Probefahrt
- Kurze Pause, Lösung
-
8. Nicht Vaters Fernseher: Video ... mit dem Gaststar »Canvas«
- Brandneu: Webville TV
- Bringen wir das HTML hinter uns!
- Anschließen und testen ...
- Wie funktioniert das Video-Element?
- Genauer Blick auf die Videoattribute ...
- Was Sie über Videoformate wissen müssen
- Die Kontrahenten
- Mit den Formaten jonglieren ...
- Genauere Angaben zum Videoformat
- Ich dachte, es gibt APIs?
- »Programmplanung« für Webville TV
- Playlist für Webville TV
- Was ist mit dem Event-Handler los?
- Der »Ende des Videos«-Handler
- Eine Probefahrt ...
- Wie canPlayType funktioniert
- Wir brauchen Ihre Hilfe!
- Kommen Sie in die Kabine ...
- Packen wir das Demogerät aus!
- Inspektion des werksseitigen Codes
- waehleEffekt und waehleVideo
- Hier kommen die Hilfsfunktionen
- Der Duft des neuen Demogeräts ... Probefahrt!
- Demovideos an den Start ...
- Videosteuerelemente implementieren
- Die restlichen Steuerelemente implementieren
- Nächste Probefahrt!
- Das lose Ende ...
- Und noch eine ...
- Testvideos umschalten
- Zeit für Spezialeffekte
- Der FX-Plan
- Zeit für die Effekttasten
- Videoverarbeitung
- Videoverarbeitung mit Puffer
- Canvas-Puffer implementieren
- Video- und Canvas-Elemente positionieren
- Code für die Videoverarbeitung schreiben
- Den Puffer erstellen
- Den Puffer verarbeiten
- Effekte programmieren
- Film Noir-Probefahrt
- Große Probefahrt
- Wenn die Welt perfekt wäre ...
- Wie error-Events genutzt werden
- Crashtest!
- Wie es weitergeht?
-
9. Lokal speichern: Web Storage
- Der Browserspeicher (1995–2010)
- Wie Web Storage funktioniert
- Eigene Notizen
- Zeit für eine Probefahrt!
- Local Storage und Array bei der Geburt getrennt?
- Jetzt wird’s ernst
- Die Benutzeroberfläche
- Und nun das JavaScript
- Zeit für eine Probefahrt!
- Benutzeroberfläche
- Und noch eine Probefahrt!
- Planmäßige Wartungsarbeiten
- Do-it-yourself-Wartung
- Wir haben die Technologie ...
- Neue Version mit Array
- notizErstellen auf ein Array umstellen
- Was müssen wir ändern?
- Alles zusammen
- Fortsetzung: Alles vereint ...
- Probefahrt!
- Haftnotizen löschen
- Die Funktion notizLoeschen
- Auswahl der zu löschenden Haftnotiz
- Zu löschende Notiz ermitteln
- Notizen auch aus dem DOM löschen
- Aber natürlich!
- Benutzeroberfläche in Farbe
- JSON.stringify funktioniert nicht nur mit Arrays
- Das neue notizObj
- Probefahrt in Farbe
- Jetzt kennen Sie localStorage – was machen Sie damit?
-
10. JavaScript zum Arbeiten bringen: Web Workers
- Das gefürchtete langsame Skript
- Womit JavaScript seine Zeit verbringt
- Wenn ein Thread nicht reicht
- Noch ein Thread zu Hilfe!
- Wie Web Workers arbeiten
- Ihr erster Web Worker!
- manager.js schreiben
- Nachrichten vom Worker empfangen
- Jetzt schreiben wir den Worker
- Aufschlag: Probefahrt!
- Virtueller Landraub
- Sehen Sie sich um
- Mandelbrot-Mengen berechnen
- Verwendung mehrerer Workers
- Wir schreiben die Fraktal Explorer-App
- Workers erstellen und einteilen ...
- Den Code schreiben
- Workers starten
- Implementierung des Worker
- Kleiner Boxenstopp ...
- Zurück auf die Straße ...
- Zurück zum Code: Worker-Ergebnisse verarbeiten
- Psychedelische Probefahrt
- Noch eine Probefahrt
- Canvas an das Browserfenster anpassen
- Der ordnungsbedürftige Koch Programmierer
- Letzte Probefahrt!
- A. Anhang: Was übrig bleibt: Die Top Ten der Themen, die wir nicht behandelt haben
- Stichwortverzeichnis
- About the Authors
- Kolophon
- Copyright
Product information
- Title: HTML5-Programmierung von Kopf bis Fuß
- Author(s):
- Release date: April 2012
- Publisher(s): O'Reilly Verlag
- ISBN: 97833868991826
You might also like
book
Softwareentwicklung von Kopf bis Fuß
Was lernen Sie mit diesem Buch? Haben Sie sich schon einmal gefragt, was es mit testgetriebener …
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
Datenanalyse von Kopf bis Fuß
Natürlich kann man Geschäftsentscheidungen aus unternehmerischem Instinkt treffen. In der Regel ist es aber doch sehr …
book
Java™ von Kopf bis Fuß
Java von Kopf bis Fuß ist eine umfassende Erlebnistour durch die Objektorientierte Programmierung und Java. Ganz …