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 KnockoutJS

Mit Knockout.js lassen sich dynamische und editierbare Anzeige- und Benutzeroberflächen auf Basis eines Datenmodells entwickeln. Immer, wenn Teile der Oberfläche dynamisch aktualisiert werden müssen, wird Knockout.js und das MVVM-Programmiermodell helfen.

• Model-View-ViewModel Pattern
• Observables
• Built-in Bindings
• Laden und Speichern von Daten
• Templates, Custom Bindings, Mapping und Validation Plug-ins

Einstieg in AngularJS

Komplexere HTML5-Anwendungen beinhalten nach einer gewissen Entwicklungszeit viel JavaScript für die Interaktions-, Darstellungs- und Verarbeitungslogik. Bei der Entwicklung ist es deshalb besonders hilfreich, die Übersicht durch eine geeignete Quelltextstruktur zu erhalten. Das in Angular verwendete MVC-Pattern hilft Daten als Modelle, HTML und CSS als Views und die JavaScript-Implementierungen als Logik in Controllern zu verorten und in eine vorgegebene Struktur einheitlich und verständlich zu integrieren.

• Model-View-Controller Pattern
• Model und Collections
• Controller
• Views
• Filter
• Routing
• Templates
• Validation
• Services, Providers und Factories
• Laden und Speichern von Daten über HTTP(S)
• Direktiven