HTML5, CSS3, JavaScript

Programmierung und Design von WebApplications mit HTML5, CSS3 und JavaScript

→ hier geht's zur eigentlichen Kurshomepage

Web-Anwendungen der nächsten Generation sind deutlich flexibler und einfacher zu erstellen als ihre Vorgänger. Ein Vorteil der Entwicklung von Webseiten mit HTML5, CSS3 und JavaScript liegt in der Cross-Plattform Fähigkeit von Web-Anwendungen. So verfügen nicht nur die meisten Smartphone über einen HTML5 fähigen Browser, eine einmal geschriebene Web-Anwendung läuft auch auf ganz unterschiedlichen Betriebssystemen und kann von jedem Ort der Welt aus aufgerufen werden.

In diesem Kurs soll die Front-End Entwicklung von reichhaltigen Web-Anwendungen mit HTML5 (Beschreibung des Inhalts), CSS3 (Beschreibung des Designs) und JavaScript (Beschreibung der Interaktion) im Detail erklärt werden. Ein Fokus der Vorlesung wird darin liegen, die neuen Fähigkeiten von HTML5 auszureizen und dabei immer noch zu älteren Standards kompatibel zu bleiben.

Benötigte Vorkenntnisse

• HTML Vorkenntnisse
• Leichte Programmierkenntnisse (Skriptsprachen reichen aus, auch z.B. Programmieren in Maple, Matlab, etc. reicht aus)
• Umgang mit einem WebBrowser
• Umgang mit einem Texteditor und einem Betriebssystem seiner Wahl

Hilfreich, aber nicht unbedingt notwendig, sind Grundkenntnisse von CSS und JavaScript. Beides wird jedoch ausreichend erläutert, so dass man hier auch ohne großartige Vorkenntnisse einsteigen kann.

Grobe Inhaltsliste

• Ziele von HTML5 und historisches
• Aufbau von HTML5
• Neue Bausteine von HTML5
• Bessere Formulare dank HTML5
• Multimedia auf Webseiten
• Grafik mit Canvas und SVG und JavaScript
• Dateizugriff mit JavaScript
• Offline-Speicher
• Neue Datentechnologien mit Websockets und Webworkern
• Bessere JavaScripts mit jQuery
• Animationen und Dialoge mit jQuery und jQueryUI
• Neue CSS3 Elemente
• Neue CSS3 Pseudo-Klassen
• Die CSS3 Transitions im Fokus
• Bessere Unterstützung für mobile Endgeräte
• Ausblick auf WebGL

Am Ende des Kurses wird jeder Teilnehmer in der Lage sein bestehende Webseiten zu reichhaltigen Web-Anwendungen zu erweitern, oder komplett neue Web-Anwendungen inkl. asynchronen Aufrufen, Benutzerdialogen und Animationen zu erstellen. Im Kurs wird nicht die Frage beantwortet, woher die dahinterliegenden Daten kommen. Es wird immer mit statischen Webseiten gearbeitet, welche dann auf Client-Seite Interaktionen zulassen. Serverseitig dynamische Webseiten mit ASP.NET, PHP, Python und dergleichen werden nicht besprochen.

'Schein'kriterien

• Regelmäßige Bearbeitung der Übungsaufgaben
• Durchführung eines kleinen Abschlussprojektes

Die Übung findet direkt nach der Vorlesung statt und ist im Rahmen der vorgegebenen Zeit durchführbar. Bei den Übungen kommt es nicht darauf an, die beste Lösung zu finden, sondern sich über die Problemstellung Gedanken zu machen und Erfahrungen im Entwickeln von Web-Anwendungen zu sammeln. Als Abschlussprojekt kann man kleine Spiele programmieren, ein jQuery Plugin oder sonstige Nutzerinteraktionen auf einer vorhandenen Seite einfügen. Der Kreativität sind hier keine Grenzen gesetzt. Der Arbeitsaufwand sollte jedoch innerhalb eines vernünftigen Bereiches liegen.

Die Übungsaufgaben können auch auf jeden (privaten) Laptop, welcher über einen aktuellen Browser (IE 9+, Chrome 13+, Opera 11+, Firefox 4+, Safari 5+, ...) und einen Texteditor verfügt, durchgeführt werden.

Hilfreiche Links

• Wikipedia Artikel zu HTML5
• HTML5 Demonstrationen und Beispiele
• Dive Into HTML5 - Buch (Onlineausgabe)
• Resourcen zu HTML5
• Übersicht vom W3C Konsortium zu HTML5
• Viele Resourcen zu CSS3
• Generator von CSS3 Eigenschaften
• Wikipedia Artikel zu CSS(3)
• Übersicht vom W3C Konsortium zu CSS3
• Wikipedia Artikel zu JavaScript
• Seite des jQuery Projektes
• Seite des jQuery Plugins jQueryUI