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

Moderne Webentwicklung

Book Description

Wer heute Websites entwickelt, ist mit einer Vielzahl von Techniken und Technologien konfrontiert. Und mit mobilen Geräten kommen noch mehr hinzu. Kaum ein Entwickler kann hier überall gleichermaßen gut informiert sein.Um nicht den Anschluss zu verlieren, gibt Peter Gasston in seinem Buch einen praxisorientierten Überblick über die neuesten und wichtigsten Werkzeuge der geräteunabhängigen Webentwicklung mit HTML5, CSS3, JavaScript und Co.Seine leicht verständlichen Erklärungen und praktischen Beispiele versetzen Sie in die Lage, Websites zu entwickeln, die auf allen Geräten funktionieren.

Table of Contents

  1. Einleitung
  2. Die Gerätelandschaft
    1. Desktop/Laptop
    2. Mobilgeräte
    3. Tablet
    4. Fernseher
    5. Die anderen
    6. Die »Zwischendinger«
  3. Die Multiscreen-Welt
  4. Kontext: Was wir nicht wissen
    1. Einige Kontext-Klischees
    2. Nur die Geschwindigkeit zählt
    3. Das werden Sie lernen
  5. Literaturempfehlungen
  6. 1 Die Webplattform
    1. 1.1 Ein kurzer Hinweis zu den Begriffen
    2. 1.2 Wer Sie sind und was Sie wissen müssen
    3. 1.3 Begriffsklärung
    4. 1.4 Das echte HTML5
      1. 1.4.1 Das HTML5-Gerüst
      2. 1.4.2 Neue Standardverfahren
    5. 1.5 CSS3 und mehr
      1. 1.5.1 Herstellerspezifische Präfixe
      2. 1.5.2 CSS-Frameworks und Präprozessoren
    6. 1.6 Browserunterstützung
    7. 1.7 Testen, testen und nochmals testen
    8. 1.8 Zusammenfassung
    9. 1.9 Literaturempfehlungen
  7. 2 Struktur und Semantik
    1. 2.1 Grundsätzliche Anmerkungen
    2. 2.2 Neue HTML5-Elemente
      1. 2.2.1 Was bringen die neuen Elemente überhaupt?
      2. 2.2.2 Der Nachteil der Sektionselemente in HTML5
    3. 2.3 WAI-ARIA
    4. 2.4 Die Bedeutung semantischen Markups
    5. 2.5 Mikroformate
    6. 2.6 RDFa
    7. 2.7 Mikrodaten
      1. 2.7.1 Die API für Mikrodaten
      2. 2.7.2 Mikrodaten, Mikroformate und RDFa
      3. 2.7.3 Schema.org
      4. 2.7.4 Rich Snippets
    8. 2.8 Datenattribute
      1. 2.8.1 Die API für Datenattribute
      2. 2.8.2 jQuery und Datenattribute
      3. 2.8.3 Datenattribute in natura
    9. 2.9 Webkomponenten: Die Zukunft der Auszeichnungssprachen?
    10. 2.10 Zusammenfassung
    11. 2.11 Literaturempfehlungen
  8. 3 Mediengerechtes CSS
    1. 3.1 Media Queries
      1. 3.1.1 Media-Eigenschaften für die Abmessungen
      2. 3.1.2 Media Queries kombinieren und negieren
      3. 3.1.3 Ein kleiner Exkurs: Alles über Pixel
      4. 3.1.4 Media Queries für die Bildschirmauflösung
      5. 3.1.5 Geräteanpassung
      6. 3.1.6 Media-Eigenschaften für die Benutzerinteraktion
      7. 3.1.7 Weitere Media-Eigenschaften
    2. 3.2 Media Queries mit JavaScript
    3. 3.3 Adaptives oder responsives Webdesign?
      1. 3.3.1 Die Eigenschaft »box-sizing«
      2. 3.3.2 Längenmaße dynamisch berechnen
    4. 3.4 Längenangaben relativ zum Viewport
      1. 3.4.1 Einheiten relativ zum HTML-Wurzelelement (root)
      2. 3.4.2 »Mobile First« und Breakpoints für den Inhalt
    5. 3.5 Responsives Design und Objektersetzung
      1. 3.5.1 Das Bildproblem
      2. 3.5.2 Responsive HTML5-Bilder als Lösung
    6. 3.6 Zusammenfassung
    7. 3.7 Literaturempfehlungen
  9. 4 Neue CSS-Konzepte
    1. 4.1 Mehrspalten-Layout
      1. 4.1.1 Spaltenabstände und -linien
      2. 4.1.2 Spaltenspanne und Umbrüche
    2. 4.2 Flexbox
      1. 4.2.1 Das Flexbox-Modell deklarieren
      2. 4.2.2 Die Reihenfolge der Inhalte ändern
      3. 4.2.3 Anordnung innerhalb des Containers
      4. 4.2.4 Mehr Flexibilität
      5. 4.2.5 Wrap und Flow
    3. 4.3 Rasterlayouts
      1. 4.3.1 Das Raster deklarieren und definieren
      2. 4.3.2 Rasterlinien wiederholen
      3. 4.3.3 Elemente im Raster erzeugen
      4. 4.3.4 Ausrichtung und Stapelfolge
      5. 4.3.5 Die Grid-Layout-Syntax
      6. 4.3.6 Über die Terminologie des Rasterlayout-Moduls
      7. 4.3.7 Rasterbereiche
    4. 4.4 Die ferne Zukunft
    5. 4.5 Zusammenfassung
    6. 4.6 Literaturempfehlungen
  10. 5 Modernes JavaScript
    1. 5.1 Neu in JavaScript
      1. 5.1.1 Die Attribute async und defer
      2. 5.1.2 Die addEventListener-Methode
      3. 5.1.3 Das DOMContentLoaded-Ereignis
      4. 5.1.4 Eingabe-Events
      5. 5.1.5 CSS-Selektoren in JavaScript
      6. 5.1.6 Die Methode getElementsByClassName
      7. 5.1.7 Interaktion mit Klassen
    2. 5.2 JavaScript-Bibliotheken
      1. 5.2.1 jQuery
      2. 5.2.2 YepNope
      3. 5.2.3 Modernizr
      4. 5.2.4 Mustache
    3. 5.3 Polyfills und Shims
    4. 5.4 Testen und Debuggen
    5. 5.5 Zusammenfassung
    6. 5.6 Literaturempfehlungen
  11. 6 Geräte-APIs
    1. 6.1 Geolokalisierung
    2. 6.2 Orientierung und Bewegung im Raum
    3. 6.3 Vollbild
    4. 6.4 Vibration
    5. 6.5 Batteriestand
    6. 6.6 Verbindungsinformation
    7. 6.7 Kamera und Mikrofon
    8. 6.8 Web Storage
    9. 6.9 Drag & Drop
    10. 6.10 Mit Dateien arbeiten
    11. 6.11 Mozillas Firefox OS und WebAPIs
    12. 6.12 PhoneGap und native Wrapper
    13. 6.13 Zusammenfassung
    14. 6.14 Literaturempfehlungen
  12. 7 Bilder und Grafiken
    1. 7.1 Vektor- und Pixelgrafiken im Vergleich
    2. 7.2 Scalable Vector Graphics
      1. 7.2.1 Anatomie eines SVG-Bilds
      2. 7.2.2 Verknüpfte SVG-Dateien
      3. 7.2.3 Eingebettetes SVG
      4. 7.2.4 SVG-Filter
      5. 7.2.5 SVG und CSS kommen zusammen
      6. 7.2.6 Ein Nachteil von SVG
    3. 7.3 Das canvas-Element
      1. 7.3.1 Bildmanipulation
      2. 7.3.2 WebGL
    4. 7.4 Wann sollten Sie SVG oder Canvas wählen?
    5. 7.5 Zusammenfassung
    6. 7.6 Literaturempfehlungen
  13. 8 Neue Formulare
    1. 8.1 Neue Eingabetypen
    2. 8.2 Neue Attribute
      1. 8.2.1 autofocus
      2. 8.2.2 placeholder
      3. 8.2.3 autocomplete
      4. 8.2.4 spellcheck
      5. 8.2.5 multiple
      6. 8.2.6 form
    3. 8.3 Vorschlagslisten
    4. 8.4 Bedienelemente und Widgets
      1. 8.4.1 Zahlen
      2. 8.4.2 Datum und Zeit
      3. 8.4.3 Farben
    5. 8.5 Informationen anzeigen
      1. 8.5.1 progress
      2. 8.5.2 meter
      3. 8.5.3 output
    6. 8.6 Formularüberprüfung auf Anwenderseite
    7. 8.7 Die Constraint-Validation-API
    8. 8.8 Formulare und CSS
    9. 8.9 Zusammenfassung
    10. 8.10 Literaturempfehlungen
  14. 9 Multimedia
    1. 9.1 Die Medienelemente
      1. 9.1.1 Zusätzliche Attribute für das video-Element
      2. 9.1.2 Mehrere Quelldateien
      3. 9.1.3 Fallbacks
      4. 9.1.4 Untertitel und Beschriftungen
      5. 9.1.5 Codierung
    2. 9.2 Media Fragments
    3. 9.3 Die Media-API
      1. 9.3.1 Ladestatus
      2. 9.3.2 Zusätzliche Eigenschaften für Audio und Video
    4. 9.4 Medienereignisse
    5. 9.5 Erweiterte Medieninteraktion
      1. 9.5.1 Web-Audio-API
      2. 9.5.2 WebRTC
    6. 9.6 Zusammenfassung
    7. 9.7 Literaturempfehlungen
  15. 10 Web-Apps
    1. 10.1 Web-Apps
      1. 10.1.1 Hosted und Packaged Apps
      2. 10.1.2 Manifest-Dateien
      3. 10.1.3 W3C-Widgets
    2. 10.2 Hybrid-Apps
      1. 10.2.1 PhoneGap
      2. 10.2.2 Titanium
    3. 10.3 TV-Apps
    4. 10.4 Webinos
    5. 10.5 Application Cache
      1. 10.5.1 Inhalte der AppCache-Datei
      2. 10.5.2 Die Caching-Abfolge
      3. 10.5.3 Die AppCache-API
    6. 10.6 Zusammenfassung
    7. 10.7 Literaturempfehlungen
  16. 11 Die Zukunft
    1. 11.1 Webkomponenten
      1. 11.1.1 Templates
      2. 11.1.2 Decorator
      3. 11.1.3 Custom Elements
      4. 11.1.4 Das Shadow DOM
      5. 11.1.5 Die Puzzleteile zusammenfügen
    2. 11.2 Die Zukunft von CSS
      1. 11.2.1 Regions
      2. 11.2.2 Exclusions
      3. 11.2.3 Layouts: Noch weiter in die Zukunft geblickt
      4. 11.2.4 Feature Queries
      5. 11.2.5 Cascading Variables
    3. 11.3 Zusammenfassung
    4. 11.4 Literaturempfehlungen
  17. Anhänge
    1. A Browserunterstützung
    2. B Literaturempfehlungen
    3. Index