Beschreibung

Please note: This article is only available in German.
Beschreibung des Kurses

Der Titel des Kurses ist "Programmierung und Design von WebApplications mit HTML5, CSS3 und JavaScript".

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.

Diese Technologien stehen im Mittelpunkt des Kurses:

  • Natürlich die Webseitenbeschreibung mit HTML5

    html5

  • Außerdem das Stylen bzw. Designen dieser über CSS3

    css3

  • Cross-Browser JavaScript durch die Bibliothek jQuery

    jquery

  • Und jQuery Plugins wie das rießige jQuery UI

    jqueryui

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.

Scheinkriterien

  • Nicht notwendig, aber sehr sinnvoll: Ausarbeitung der Übungsaufgaben
  • Regelmäßige Anwesenheit in der Vorlesung
  • Durchführung eines Abschlussprojektes

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.

Kursmaterialien

  • Der Kurs findet im Windows CIP-Pool VL statt (Vorklinikum, VKLG , OG1)
  • Der Raum der Vorlesung ist PHY 5.0.20
  • Die Vorlesung findet Vormittags 9-12 Uhr statt
  • Der Übung findet Nachmittags 13-17 Uhr statt
  • Ein Skript zum Kurs ist als Webseite verfügbar

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.

Created . Last updated .

References

Sharing is caring!