HTML5 und CSS3

Moderne Webentwicklung mit HTML5 und CSS3

Offline und Storage

Mittels der HTML5 Offline- und Storage-APIs können HTML-Anwendungen erstellt werden, mit denen die Nutzer auch ohne eine Netzwerk- bzw. Internetverbindung arbeiten können. Dateien können beispielsweise automatisch heruntergeladen und für die weitere Verwendung zwischengespeichert werden. Dieses von Desktopanwendungen bekannte Szenario optimiert nicht nur das Anwendungsspektrum der Webanwendung, sondern auch die Lade- und Laufzeitperformance.

• Local / Session Storage
• Offline-Anwendung / Application Cache
• Web SQL Storage / IndexDB

Kommunikation

Effiziente Unterstützung für Konnektivität macht die manuelle Aktualisierung der Anzeige unnötig. Nutzer von Chats, Data-Charts, Real-Time-Daten, Analysen, Spielen usw. profitieren von dieser Form des Datenaustauschs zwischen Client und Server.

• Web Sockets
• Notifications / Push Notifications
• Web Worker

Geräte

Eine einzige Anwendung gleichzeitig für unterschiedliche Endgeräte wie Notebook, Tablet und Smartphone zu entwickeln, ist ein Vorteil der HTML5-Plattform. Einheitliche Schnittstellen und diverse JavaScript-APIs ermöglichen den Zugriff auf gerätespezifische Merkmale. Lokales Laden und Speichern von Dateien, das Anzeigen der aktuellen Position innerhalb einer Karte oder die Steuerung eines Spiels über Fingergesten und Gerätebewegung sind mögliche Szenarien.

• Dateizugriff
• Geo Location
• Multi-Touch
• Device Orientation
• Audio und Video Capture

Semantik und Markup

Webanwendungen übertragen Informationen an Benutzer vor allem über textuelle Darstellung. Inhalte sind miteinander verknüpft und sollen automatisiert durch Suchmaschinen semantisch analysierbar sein. HTML5 bietet genau dazu die Möglichkeit, Inhaltstypen eindeutig zu kennzeichnen und Semantik zu beschreiben.

• Semantische Tags
• Application Markups
• Link Relations
• Neue Elemente, z. B. für Formulare

Multimedia und Grafik

Bisher waren für HTML-basierte Anwendungen immer Plug-ins zur Präsentation von Audio und Video erforderlich. Mit HTML5 können diese Inhalte ohne diese Hilfsmittel wiedergegeben werden. Mit den HTML5-APIs können Audio- und Videoinhalte auch manipuliert werden. So ist es z. B. möglich, Filter, Time-Tracking, Capturing oder auch Grafiken und Animationen innerhalb eines Videos zu implementieren. Zusätzlich versetzt das Canvas-2D bzw. -3D-Element Entwickler in die Lage, Charts, Bilder und Grafiken, bis hin zu Spielen zu entwickeln.

• Video / Audio
• Canvas 2D / 3D

CSS3

• Unterschiede zu Vorgängerversionen
• CSS Selectors
• Webfonts
• Text wrapping
• Columns
• Rounded borders
• Background enhancements
• Transitions, Transforms, Animations

JavaScript-Erweiterungen

Die Entwicklung von HTML5-Anwendungen mit Rücksicht auf die Unterstützung älterer Browsergenerationen wird durch den Einsatz von JavaScript-Bibliotheken stark vereinfacht. Mit den Funktionen aus diesen Quasi-Standard-Bibliotheken lassen sich viele Problemstellungen bewährt lösen.

• HTML4 zu HTML5 mit Modernizr
• CSS2 und CSS3 mit CssLess
• DOM und Ajax mit jQuery
• Datenverarbeitung mit Linq.js
• Nachrichtenverarbeitung mit Rx.js
• TypeScript

Einstieg in komplexe Webanwendungen

Komplexe Webanwendungen benötigen meist dynamische und editierbare Anzeige- und Benutzeroberflächen auf der Basis eines Datenmodells. Wenn Teile der Oberfläche dynamisch aktualisiert werden müssen, helfen Programmiermodelle wie MVVW, die mit praktischen Frameworks wie jQuery UI, Prototype, React oder Vue.js gut und komfortabel umgesetzt werden können. Dieser Teil zeigt die Konzepte, die sich bei diesen Frameworks wiederfinden.

• Model-View-ViewModel Pattern
• Model und Collections, Controller und Views
• Filter
• Routings
• Observables
• Built-in Bindings
• Laden und Speichern von Daten
• Templates, Custom Bindings, Mapping und Validation Plug-ins
• Services, Providers und Factories
• Direktiven