Vorlesung Web-Technologien

Dr. Albrecht Schmidt, Richard Atterer
Umfang: 1 SWS Vorlesung, 1 SWS Übung

• Aktuelles
• Termine und Ort
• Inhalt
• Vorlesung
• Seminar
• Übung

Aktuelles

• Bei der Vorbesprechung haben sich viel weniger Teilnehmer als erwartet angemeldet, sodass noch Plätze frei sind - wenden Sie sich an Richard Atterer, falls Sie teilnehmen wollen.
• Die Liste der Seminar-Themen, die bei der Vorbesprechung an die Teilnehmer vergeben werden, ist online.
• Vorbesprechung am Di, 13.12.2005, 18 Uhr (s.t.), Amalienstraße 17, Raum 107. An diesem Termin findet die verbindliche Anmeldung für die Veranstaltung statt.

Termine und Ort

• Datum: 2. bis 5. Januar 2006
• Vorlesung/Seminar: 9.00 bis 12.30
• Übung: 14.00 bis 16.00
• Ort: Amalienstraße 17

Inhalt

In dieser Blockvorlesung mit Seminar- und Übungsanteil werden die Technologien, auf denen das WWW aufbaut, vorgestellt. Dies beinhaltet eine Diskussion des TCP- und HTTP-Protokolls, der Standards für HTML, CSS, XML und SGML, der serverseitigen Technologien zur Erzeugung dynamischer Webseiten (z.B. PHP, JSP, ASP) sowie der clientseitigen Programmierung (JavaScript). Im praktischen Teil der Veranstaltung müssen Programmieraufgaben zu den genannten Themen bewältigt werden. Zusätzlich muss jeder Teilnehmer einen ca. 10-minütigen Vortrag zu einem Thema vorbereiten sowie sein Thema in ca. 1000 Worten zusammenfassen.

Die Vorlesung ist geeignet für Studierende der Medieninformatik im Hauptstudium. Als Voraussetzung wird ein Vordiplom in Medieninformatik erwartet.

Vorlesung

Folien

1 Folie pro Seite, 2 Folien pro Seite, 9 Folien pro Seite.

Die Unterlagen sind durch ein Passwort geschützt, das Teilnehmern der Veranstaltung auf Anfrage mitgeteilt wird.

Zeitplan

Seminar

Die folgenden Themen stehen für die Vorträge im Seminar-Anteil der Veranstaltung zur Auswahl. Die Themen werden bei der Vorbesprechung an die Teilnehmer verteilt.

Die zusätzlichen Referenzen können für die Aufbereitung des jeweiligen Themas genutzt werden. Für jeden Vortrag sind 10 Minuten Redezeit und 5 Minuten für Fragen geplant - Vorträge, die die Redezeit erheblich überschreiten, müssen evtl. abgebrochen werden. Die Anzahl der Folien sollte zwischen 5 und 12 liegen..

Deadline ist der 29.12.2005: Jeder Teilnehmer muss bis zu diesem Datum seine Folien sowie eine Zusammenfassung seines Themas in ca. 1000-2000 Worten abgeben. Bitte schicken Sie die Zusammenfassung direkt im Haupttext der Mail, nicht als Anhang. Schicken Sie die Folien als Anhang im OpenOffice- oder PowerPoint-Format an Richard Atterer. Als Sprache für Folien, Zusammenfassung und Vortrag sind Deutsch oder Englisch möglich.

Die Aufteilung auf die Tage ist nur vorläufig und kann sich noch kurzfristig ändern.

Montag

• HTML DOM (Document Object Model) - W3C, SELFHTML
• Victor Czenter: Man-in-the-middle-Angriffe - Wikipedia, SANS-Report
• Max Tafelmayer: Session management, Cookies - Netscape: Cookies, Session-Management in PHP
• Tom Lederer: Apache-Konfigurationsdateien (Aufbau, wichtige Direktiven) - Apache-Dokumentation, .htaccess
• Apache-Logfiles - Apache-Konfiguration, Analog, Webalizer
• Apache-Konfiguration: Virtuelle Hosts - Apache-Dokumentation, HTTP-RFC ("Host"-Header)

Dienstag

• Peter Weckert: SSL/Zertifikate
• (HTTPS - Wikipedia)
• Andreas Schmid: WebDAV - webdav.org, mod_dav
• Daniel Hilkert: WAI WCAG - W3C, Bundesgesetzblatt zu barrierefreier Informationstechnik
• Wolfgang Spießl: Validatoren - W3C, CSS
• Martin Reichenbach: Serverkonfiguration für hohe Performance am Beispiel heise online - Artikel c't 7/04, Seite 90, Newsticker Feb. 2003

Mittwoch

• Java applet security
• Flash security
• XML - W3C, O'Reilly
• Shaohua Liu: XPath - W3C
• Hongchao Ren: XHTML - W3C
• XSLT - W3C
• Florian Anderiasch: XSS, cross-site scripting - heise security, Wikipedia

Donnerstag

• Marcin Olszowy: PHP-Sicherheit
• Kerstin Ruhland: Tomcat - Apache-Projekt, Sun: JSP
• Yuanting Liu: ASP - Microsoft ASP
• Dan Zhu: WAP - Wikipedia, about.com
• Raphael Wimmer: iMode, chtml
• CC/PP - W3C

Übung

Abgabe: Der Abgabetermin für die Aufgaben ist jeweils am Folgetag bis 9 Uhr. Schicken Sie Ihre Lösung per Mail an Richard Atterer.

Montag: HTTP-Server

Programmieren Sie einen einfachen HTTP-Server, der folgende Methoden unterstützt: GET, POST. Bei GET-Anfragen soll die Möglichkeit bestehen, einen Bereich anzugeben (HTTP Ranges). Bei einer POST-Anfrage sollen die Werte der übertragenen Parameter auf dem Server ausgegeben werden (Textausgabe oder GUI). Sie können eines der folgenden Beispiele für Ihre Implementierung erweitern:

• Multi-threaded Server in Java
• Einfacher Server in C

Hinweis: Die Beispiel-Server identifizieren sich als HTTP-1.0-Server, trotzdem können sie um HTTP-1.1-Features wie HTTP Ranges erweitert werden.

Nützliche Links/Hinweise:

• Firefox-Erweiterung: Live HTTP headers
• Firefox-Erweiterung: Web developer toolbar
• Aufruf des Tools "curl", Download ab Byte 30 des URLs:
  curl -v -C 30 http://localhost:8080/file

Dienstag: Web Client

Programmieren Sie einen einfachen HTTP-Client mit Unterstützung für HTTP Ranges. Der Client soll wie folgt aufgerufen werden können:
java HttpClient <URL> <Dateiname> [<Anfang>:<Ende>]
Beispiel:
java HttpClient http://example.org/url filename.txt 400:700
<Anfang> und <Ende> spezifizieren den Bereich der Datei, die vom Server geladen werden soll. Im lokalen Dateisystem sollen die Daten unter <Dateiname> gespeichert werden. Sie können das folgende Beispiel für Ihre Implementierung erweitern: Einfacher Client in Java

Erweitern Sie das Programm, sodass zusätzlich alle in den heruntergeladenen Daten enthaltenen URLs ausgegeben werden.

Mittwoch: AJAX

Schreiben Sie eine HTML-Seite mit JavaScript-Code, der weitere Inhalte vom Server nachlädt und anzeigt, ohne dass die Seite neu geladen wird. Es soll eine sehr einfache "Newsticker"-Funktionalität implementiert werden: Alle 3 Sekunden kontaktiert der JavaScript-Code die Seite "/news.php" auf dem aktuellen Server, bekommt ein HTML-Fragment zurück (z.B. "<a href="x">News</a>") und fügt dieses HTML-Fragment einer Liste von News-Einträgen auf der Seite hinzu. Das Nachladen neuer News-Einträge soll mithilfe eines XMLHttpRequest-Objekts geschehen.

Das Browser-Sicherheitsmodell verlangt, dass die Seite "/news.php" auf dem gleichen WWW-Server wie die Seite liegt, die das JavaScript enthält. In der Übung werden die Zugangsdaten für einen Server bekannt gegeben, auf dem ein passendes PHP-Skript installiert ist und auf den Ihre HTML-Seite zum Testen hochgeladen werden kann.

• Informationen zur API von XMLHttpRequest: jibbering.com, Apple
• Informationen zu HTML DOM (zum Verändern des aktuellen Dokuments von JavaScript aus): SELFHTML, W3C DOM v2 ( core, HTML), Firefox DOM inspector

Donnerstag: Server-side-Skript und Steuerung

Gestalten Sie eine Webseite, die den Zugriff auf verschiedene Geräte in einer Webseite vereint. Dabei handelt es sich um zwei Displays mit integrierten Sensoren und eine Netzsteckerleiste, die über HTTP angesprochen werden können. Wenn die Webseite abgerufen wird, soll der Zustand der beiden Displays und der Steckerleiste visualisiert werden. Für jedes der Displays soll ein Text-Eingabefeld zur Verfügung stehen, das es erlaubt, Text auf das jeweilige Display zu schicken. Bei der Steckerleiste soll es die Möglichkeit geben, die einzelnen Stromanschlüsse ein- und auszuschalten.

Für jeden Besucher soll der zuletzt gesetzte Zustand aller Geräte auf dem Server gespeichert werden. Mittels eines Links auf der Seite soll es möglich sein, diesen Zustand erneut zu setzen. Dies soll mit Hilfe eines Cookies geschehen.

Website zum Hochladen und Testen von PHP-Code
Webcam
Direkter Link zum Video-Stream der Webcam

Ansteuerung der Geräte

Ausführlichere Dokumentation. Mehrere verschiedene Befehle können auch gleichzeitig in einer URL angegeben werden. <id> wird im Folgenden durch die Display ID ersetzt, also entweder 2.229.0.0.0.0.182.222 oder 2.229.0.0.0.0.155.227

• Text in einem Display anzeigen:
  http://141.84.8.33/?id=<id>&message=meintext
  http://141.84.8.33/?id=<id>&message=meintext&posy=0&posx=0
• Inhalt eines Displays löschen:
  http://141.84.8.33/?id=<id>&clear
• Sensoren eines Displays auslesen:
  http://141.84.8.33/?id=<id>&sensors http://141.84.8.33/?id=<id>&sensors&format=<format>
  wobei fuer <format> entweder HTML, XML oder TXT einzusetzen ist
• Stromanschlüsse einschalten:
  http://141.84.8.67/sw?u=power&p=power&o=<dosennr>&f=on
  <dosennr> liegt zwischen 1 und 4. Es wird der Status aller 4 Dosen zurückgegeben.
• Stromanschlüsse ausschalten:
  http://141.84.8.67/sw?u=power&p=power&o=<dosennr>&f=off

Die Webseite muss in PHP implementiert werden. Das Absetzen von HTTP-GET-Requests ist in PHP mit der Funktion fopen() möglich.

Evtl. noch interessant zur Auswertung der Sensorwerte: Die Werte sind CIRCA!!! (+-10)

2.229.0.0.0.0.155.227
         SGX/SGY/SGZ
normal: 481/545/506
links:    531/495/507
rechts: 424/492/504
kopf:    479/437/498
(rücken:480/501/448
display:480/488/563)

=> normal (SGX~480 && SGZ~506)
=> links (SGX~530)
=> rechts (SGX~424)
=> am kopf (SGX~480 && SGY~437)

2.229.0.0.0.0.182.222
         SGX/SGY/SGZ
normal: 417/594/499
links:    553/534/505
rechts: 439/538/501
kopf:    497/482/498
(am rücken:495/540/446
auf display:495/535/556)

=> normal (SGX~417 && SGZ~499)
=> links (SGX~553)
=> rechts (SGX~439)
=> am kopf (SGX~497 && SGY~482)