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 & CSS3 (Prags)

Book Description

HTML5 und CSS3 gehört die Zukunft, denn sie bilden die Standards, die das Web künftig prägen werden. Schon jetzt sind viele Features der noch in der Entwicklung befindlichen Technologien nutzbar und erleichtern Webentwicklern die Arbeit ungemein.

Dieses Buch beschäftigt sich genau mit diesen Komponenten von HTML5 und CSS3 und beschreibt anhand von vielen Code-Beispielen die neuen technischen Möglichkeiten und Verbesserungen, die die beiden neuen Standards mit sich bringen. Dabei werden immer Fallback-Möglichkeiten angegeben, mit denen Nutzer älterer Browser ebenfalls problemlos auf eine Website zugreifen können. Ein Blick in die Zukunft zeigt, wohin die Reise gehen kann, wenn HTML5 und CSS3 erst die volle Browserunterstützung erreicht haben.

Table of Contents

  1. HTML5 & CSS3: Webentwicklung mit den Standards von morgen
  2. Danksagungen
  3. Vorwort
    1. HTML5: Plattform oder Spezikation?
    2. Wie die Inhalte organisiert sind
    3. Über dieses Buch
    4. Vorkenntnisse
    5. Online-Ressourcen
  4. 1. HTML5 und CSS3 im Überblick
    1. 1.1 Eine Plattform für die Webentwicklung
      1. Aussagekräftigeres Markup
      2. Multimedia mit weniger Plugins
      3. Bessere Anwendungen
      4. Kommunikation mit anderen Dokumenten
      5. Web Sockets
      6. Clientseitige Speicherung
      7. Bessere Benutzeroberflächen
      8. Bessere Formulare
      9. Verbesserte Barrierefreiheit
      10. Fortschrittliche Selektoren
      11. Visuelle Effekte
    2. 1.2 Abwärtskompatibilität
    3. 1.3 Der Weg in die Zukunft ist steinig
      1. Internet Explorer
      2. Barrierefreiheit
      3. Veraltete Tags
      4. Konkurrierende Unternehmensinteressen
      5. HTML5 und CSS3 befinden sich noch in der Entwicklung
  5. I. Bessere Benutzeroberflächen
    1. 2. Neue strukturelle Tags und Attribute
      1. 1 Einen Blog mit semantischem Markup neu definieren
        1. Auf den Doctype kommt es an
        2. Kopfzeilen
        3. Fußzeilen
        4. Navigation
        5. Abschnitte und Artikel
        6. Artikel
        7. Das aside-Tag und Seitenleisten
        8. aside-Elemente sind keine Seitenleisten
        9. Styling
        10. Ausweichlösung
      2. 2 Pop-up-Fenster mit benutzerdefinierten Datenattributen
        1. Das Verhalten vom Inhalt trennen oder warum onclick böse ist
        2. Mehr Barrierefreiheit
        3. onclick beseitigen
        4. Ausweichlösung
    2. 3. Benutzerfreundliche Webformulare
      1. 3 Daten mit neuen Eingabefeldern beschreiben
        1. Verbessertes Formular für unser AwesomeCo-Projekt
        2. Das grundlegende Formular
        3. Slider mithilfe von range erstellen
        4. Zahlen und Spinboxen
        5. Datumswerte
        6. E-Mail
        7. URL
        8. Farbe
        9. Ausweichlösungen
        10. Den Farbwähler ersetzen
        11. Modernizr
      2. 4 Mit autofocus zum ersten Feld springen
        1. Ausweichlösung
      3. 5 Platzhaltertext für Hinweise nutzen
        1. Ein einfaches Registrierungsformular
        2. Autovervollständigung verhindern
        3. Ausweichlösung
      4. 6 In-Place-Editing mit contenteditable
        1. Das Profilformular
        2. Die Daten ablegen
        3. Ausweichlösung
        4. Bearbeitungsseiten erstellen
        5. Die Zukunft
    3. 4. Bessere Benutzeroberflächen mit CSS3
      1. 7 Tabellen mit Pseudoklassen stylen
        1. Verbesserte Abrechnungen
        2. Gestreifte Zeilen mit :nth-of-type
        3. Spaltentexte ausrichten mit :nth-child
        4. Die letzte Zeile fett darstellen mit :last-child
        5. Rückwärts zählen mit :nth-last-child
        6. Ausweichlösung
        7. HTML-Code ändern
        8. JavaScript verwenden
      2. 8 Links ausdrucken mit :after und content
        1. Das CSS
        2. Ausweichlösung
      3. 9 Mehrspaltige Layouts
        1. Spalten spalten
        2. Ausweichlösung
      4. 10 Benutzeroberflächen für mobile Geräte mit Media Queries
        1. Ausweichlösung
        2. Die Zukunft
    4. 5. Mehr Barrierefreiheit
      1. 11 Navigationshinweise mit ARIA-Rollen
        1. Landmark-Rollen
        2. Rollen für die Dokumentstruktur
        3. Ausweichlösung
      2. 12 Barrierefreie aktualisierbare Bereiche erstellen
        1. Die Seite erstellen
        2. Höfliche, aber bestimmte Aktualisierung
        3. Alles vorlesen lassen
        4. Bereiche ausblenden
        5. Ausweichlösung
        6. Die Zukunft
  6. II. Neue Perspektiven und Klänge
    1. 6. Zeichnen mit dem canvas-Element
      1. 13 Logos zeichnen
        1. Das Logo zeichnen
        2. Text einfügen
        3. Linien zeichnen
        4. Den Ursprung verschieben
        5. Farben
        6. Ausweichlösung
      2. 14 Statistiken grafisch darstellen mit RGraph
        1. Daten mit HTML beschreiben
        2. Ein Balkendiagramm aus HMTL erstellen
        3. Alternativen Inhalt anzeigen
        4. Ausweichlösung
        5. Die Zukunft
    2. 7. Audio und Video einbetten
      1. 7.1 Ein bisschen Geschichte
      2. 7.2 Container und Codecs
        1. Video-Codecs
        2. Codecs und unterstützte Browser
        3. H.264
        4. Theora
        5. VP8
        6. Audio-Codecs
        7. Codecs und unterstützte Browser
        8. Advanced Audio Coding (AAC)
        9. Vorbis (OGG)
        10. MP3
        11. Container und Codecs als Team
      3. 15 Mit Audio arbeiten
        1. Aufbau der grundlegenden Liste
        2. Ausweichlösung
      4. 16 Video einbetten
        1. Ausweichlösung
        2. Die Grenzen von HTML5-Video
        3. Audio, Video und Barrierefreiheit
        4. Die Zukunft
    3. 8. Augenschmaus
      1. 17 Scharfe Ecken abrunden
        1. Ein Anmeldeformular auflockern
        2. Browserspezifische Selektoren
        3. Ausweichlösung
        4. Unterstützung für abgerundete Ecken ermitteln
        5. jQuery Corners
        6. Unser formCorners-Plugin
        7. Die Abrundung aufrufen
        8. Ein kleiner IE-Trick
      2. 18 Schatten, Verläufe und Transformationen
        1. Die grundlegende Struktur
        2. Einen Verlauf hinzufügen
        3. Schatten für das Ansteckschild
        4. Das Namensschild drehen
        5. Transparente Hintergründe
        6. Ausweichlösung
        7. Drehen
        8. Farbverläufe
        9. Transparenz
        10. Alles zusammengenommen
      3. 19 Echte Schriften nutzen
        1. @font-face
        2. Schriftformate
        3. Formate und unterstützte Browser
        4. Schrift ersetzen
        5. Ausweichlösung
        6. Die Zukunft
  7. III. Jenseits von HTML5
    1. 9. Mit clientseitigen Daten arbeiten
      1. 20 Einstellungen mit localStorage speichern
        1. Formular für die Einstellungen
        2. Einstellungen speichern und laden
        3. Einstellungen anwenden
        4. Ausweichlösung
        5. Serverseitige Speicherung
        6. Cookies und JavaScript
      2. 21 Daten in einer clientseitigen relationalen Datenbank speichern
        1. CRUD in Ihrem Browser
        2. Die Oberfläche für die Notizen
        3. Mit der Datenbank verbinden
        4. Eine Notiztabelle erstellen
        5. Notizen laden
        6. Bestimmte Datensätze abrufen
        7. Datensätze einfügen, aktualisieren und löschen
        8. Verpacken
        9. Ausweichlösung
      3. 22 Offline arbeiten
        1. Mit dem Manifest einen Cache definieren
        2. Manifest und Caching
        3. Die Zukunft
    2. 10. Mit anderen APIs spielen
      1. 23 Den Verlauf erhalten
        1. Den aktuellen Zustand speichern
        2. Den vorherigen Status abrufen
        3. Standardwert
        4. Ausweichlösung
      2. 24 Über Domains hinweg kommunizieren
        1. Die Kontaktliste
        2. Nachrichten senden
        3. Die Support-Website
        4. Nachrichten empfangen
        5. Ausweichlösung
      3. 25 Chatten mit Web Sockets
        1. Die Chat-Oberfläche
        2. Mit dem Server sprechen
        3. Ausweichlösung
        4. Flash Socket Policy ähm, was ?
        5. Server
      4. 26 Finden Sie sich selbst: Geolocation
        1. AwesomeCo lokalisieren
        2. Wie man gefunden wird
        3. Ausweichlösung
        4. Die Zukunft
    3. 11. Wie es weitergeht
      1. 11.1 CSS3-Übergänge
        1. Timingfunktionen
      2. 11.2 Web Workers
      3. 11.3 Native Unterstützung für Drag-and-Drop
        1. Drag-and-Drop-Events
        2. Elemente ablegen
        3. Stilregeln ändern
        4. Dateien ziehen
        5. Nicht alles ist gut
      4. 11.4 WebGL
      5. 11.5 Indexed Database API
      6. 11.6 Clientseitige Formularvalidierung
      7. 11.7 Vorwärts!
  8. A. Kurzreferenz
    1. A.1 Neue Elemente
    2. A.2 Attribute
    3. A.3 Formulare
    4. A.4 Attribute für Formularfelder
    5. A.5 Barrierefreiheit
    6. A.6 Multimedia
    7. A.7 CSS3
    8. A.8 Clientseitige Speicherung
    9. A.9 Zusätzliche APIs
  9. B. jQuery-Einführung
    1. B.1 jQuery laden
    2. B.2 jQuery-Grundlagen
    3. B.3 Methoden zum Verändern von Inhalten
      1. Ein- und Ausblenden
      2. html, val und attr
      3. append, prepend und wrap
      4. CSS und Klassen
      5. Verkettungen
    4. B.4 Elemente erstellen
    5. B.5 Events
      1. Bind
      2. Ursprüngliches Event
    6. B.6 Die Funktion document.ready
  10. C. Audio und Video kodieren
    1. C.1 Audio kodieren
    2. C.2 Video für das Web kodieren
  11. D. Ressourcen
    1. D.1 Ressourcen im Web
      1. Apple – HTML5
      2. CSS3.Info
      3. Font Squirrel
      4. HTML5
      5. HTML5 – Mozilla Developer Center
      6. Web Socket-Server mit Node.js implementieren
      7. Probefahrt mit Microsoft IE9
      8. Ruby und Web Sockets – TCP für den Browser
      9. Flash-Richtliniendatei einrichten
      10. Typekit
      11. Unit Interactive: „Better CSS Font Stacks“...
      12. Video für Alle!
      13. Video.js
      14. Wo kann ich ... verwenden?
  12. E. Literaturverzeichnis
  13. Stichwortverzeichnis