Tutorial Web Technology

Richard Atterer
Hours: 3 × 2 hours, no credit!
ECTS credits: none

• News
• Dates and Locations
• Contents
  • 19.11.2008: Einführung, HTTP-Protokoll
  • 26.11.2008: Sauberes Design von Webseiten mit HTML und CSS
  • 03.12.2008: Anwendungsentwicklung mit PHP und JavaScript

News

• 14.11.2008: Anmeldung nicht mehr möglich - es haben sich bereits mehr Teilnehmer angemeldet als im Rechnerraum Platz ist. Wer unbedingt am Tutorial teilnehmen will, kann versuchen, einfach so vorbeizukommen, da vermutlich auch wieder einige Teilnehmer abspringen werden.
• 11.11.2008: Bitte melden Sie sich bis einschließlich 16. November per Email an Richard Atterer an, wenn Sie an der Veranstaltung teilnehmen wollen! Bei zu großem Andrang werden diejenigen bevorzugt, die sich zuerst angemeldet haben.

Dates and Locations

• Date: Wednesday, 10-12 c.t. am on Nov 19, Nov 26, Dec 03
• Location: Amalienstraße 17, ground-level computer lab

Contents

Die Veranstaltung soll eine Einführung in die Entwicklung von Web-Anwendungen geben. Da sie sich auch an Erstsemester richtet, werden nur Basis-Programmierkenntnisse in Java vorausgesetzt und erst die grundsätzlichen Konzepte erklärt. An einzelnen Stellen werden Themen aber auch im Detail behandelt.

Form: Im Tutorial werden Themen zunächst erklärt und danach durch die Bearbeitung kleinerer Aufgaben von den Teilnehmern vertieft. Eine freiwillige "Hausaufgabe" kann bearbeitet und bis zum nächsten Termin abgegeben werden. Die Themen sind nur grob umrissen, auf Wunsch können einzelne Aspekte genauer erklärt werden.

Das Tutorial wird von Richard Atterer im Rahmen seiner Tätigkeit als Studentenbetreuer durchgeführt. Gemäß der Vorgaben für diese Tätigkeit werden die Leistungen der Teilnehmer nicht in Form von ECTS-Credits anerkannt. Stattdessen soll die Veranstaltung die Studienbedingungen verbessern, indem sie Wissen vermittelt, das in späteren Studienabschnitten nützlich sein kann, z.B. bei der Durchführung einer Bachelorarbeit.

19.11.2008: Einführung, HTTP-Protokoll

• Wikipedia: Hypertext Transfer Protocol (HTTP)
• Der offizielle Standard: RFC 2068 - HTTP (RFC = "Request for Comments")
• Interessante Features: Verschlüsselung (HTTPS), HTTP-Cookies z.B. mit Session-IDs, Hochladen von Formular-Eingaben und Dateien auf den Server (HTTP GET/PUT), automatische Sprachwahl (z.B. auf dieser Website! - content negotiation), viele Websites auf einem Server-Rechner verwaltbar ("virtual hosts" über Host-Header), Zwischenspeichern (caching) von Inhalten lokal oder auf Proxy-Servern, Referer-Header, Umleitung (redirect), Authentifizierung u.v.m.
• Nützliche Tools für den Browser: Firefox Web Developer Plugin, Live HTTP headers, Firebug
• Low-level-Analyse des Datenverkehrs: Wireshark
• Einfacher Kommandozeilen-Client, der verschickte/empfangene HTTP-Header anzeigt: curl -v -o Ausgabedatei http://www.grahamandgraham.com
• Populärste Server-Implementierung, open-source: Apache HTTP server - unter Linux über die Paketverwaltung installierbar, unter Windows typischerweise als Teil der XAMPP-Distribution
• Dokumentation zur Java-Programmierschnittstelle. Die API enthält mit HttpURLConnection bereits eine fertige HTTP-Client-Implementierung, auf die man normalerweise zurückgreifen sollte.

Hausaufgabe 1 (für Erstsemester): Erweitern Sie die "200 OK"-Rückmeldungen des HTTP-Servers um Unterstützung für den Date-Header, wie er vom HTTP-Standard vorgeschrieben ist. Beispiel: "Date: Wed, 19 Nov 2008 23:59:59 +0100". Tipp: SimpleDateFormat.format()

Hausaufgabe 2 (höhere Semester und engagierte Erstsemester ;-): Erweitern Sie den HTTP-Server um Unterstützung für den teilweisen Download von Dateien (z.B. "Download der Bytes an Offset 100 bis 999 der Datei"). Dazu muss zunächst überprüft werden, ob der Client-Request einen Range-Header enthält. Zur Vereinfachung sollen nur die Syntax-Varianten "Range: bytes=x-y" (ab Byte x bis inklusive Byte y) sowie "Range: bytes=x-" (ab Byte x bis zum Dateiende) unterstützt werden. Die Server-Antwort muss einen Content-Range-Header enthalten. Testen z.B. mit "curl -v -r 100-999 http://localhost:8080/HttpClient.java".

26.11.2008: Sauberes Design von Webseiten mit HTML und CSS

• Zurzeit zu empfehlen für neue Websites: XHTML 1.0 (oder 1.1), Cascading Style Sheets (CSS) 2.1. (In der Zukunft vermutlich Übergang zu HTML 5.)
• Deutsche Einführung in HTML: SELFHTML
• Wichtige Engines (Browser) für's Testen von Webseiten: Trident/MSHTML (Internet Explorer), Gecko (Firefox), WebKit (Safari, Chrome, iPhone,...), Presto (Opera), Opera mini, lynx
• (Mühsame) Alternative zur lokalen Installation von Test-Browsern: Screenshot/rendering services, z.B. Browsershots
• Schnelles Testen von CSS-Änderungen: Firebug
• Automatische Validatoren für XHTML und CSS: W3C-(X)HTML-Validator, W3C-CSS-Validator, Schneegans-Validator
• CSS-Regeln haben die Form Selektor { Attribut: Wert; Attribut: Wert; ... }
• Welche CSS-Regel hat Vorrang? Spezifizität bevorzugt style="..." (Attribut im XHTML) vor #id vor .class vor table (Element). Bei "Gleichstand" zweier Regeln gewinnt diejenige mit mehr Vorkommen (z.B. hat "#a #b {...}" Vorrang vor "#a {...}"). Ansonsten gibt das nächst weniger wichtige Attribut den Ausschlag (z.B. hat "#a .class {...}" Vorrang vor "#a img {...}").
• SELFHTML-Hilfe zum Finden von Farbwerten
• Viele Tipps und Tricks zur Gestaltung mit CSS: A List Apart, Eric Meyer, CSS-Discuss, Position Is Everything, glish.com layouts

Hausaufgabe 1 (für Erstsemester): Erstellen Sie mithilfe des Beispiel-Dokuments eine Webseite, mit der Sie Ihre Süßigkeiten-Sammlung auf Ebay verkaufen wollen. Der Hintergrund der Seite ist orange. Sie enthält eine h1-Überschrift in der Schriftart "Comic Sans MS" (fettgedruckt, kursiv und in rosa), der Rest des Texts ist schwarz in der Default-Schriftart "sans-serif". Nach der Überschrift folgt ein Absatz Text, der einen linken und rechten Rand von 5em (=Abstand zum Rand des Browserfensters) besitzt. Unter ihm erscheint ein Bild der Sammlung, zentriert und von einem 3 Pixel breiten schwarzen Rahmen umgeben. Die Webseite muss sowohl vom XHTML- als auch vom CSS-Validator des W3C als korrekt erkannt werden.

Hausaufgabe 2 (höhere Semester und engagierte Erstsemester): Gestalten Sie ein möglichst einfaches CSS-Stylesheet, mit dem der Inhalt des CSS Zen Garden mehrspaltig formatiert wird. Es muss vom CSS-Validator des W3C als korrekt erkannt werden.

03.12.2008: Anwendungsentwicklung mit PHP und JavaScript

• Einfach zu erlernende Programmiersprache für Webserver: PHP (Docs/Doku), PHP auf Wikipedia
• Unter Linux über die Paketverwaltung installierbar, unter Windows z.B. als Teil der XAMPP-Distribution
• Alternative: Java-basierte Server-Software, Java Enterprise Edition (Java EE), implementiert z.B. in Apache Tomcat
• Problem bei Webanwendungen sind Sicherheitsaspekte - Google: Write secure PHP, Suhosin
• LMU-Informatik: Eigene PHP-Skripte können aus Sicherheitsgründen nur innerhalb des Hochschulnetzes aufgerufen werden. Die Datei public_html/php/xyz.php im Home-Verzeichnis ist erreichbar unter http://php.cip.ifi.lmu.de/~login/php/xyz.php
• JavaScript/ECMAScript: Wikipedia, JavaScript reference (Mozilla developer center), SELFHTML JavaScript/DOM, W3C DOM v2 (core, HTML)
• Nützlich für Untersuchen des DOM-Baumes (Document Object Model): Firefox DOM Inspector, Firebug
• In der Praxis spart die Nutzung eines JavaScript-Frameworks viel Arbeit, z.B. jQuery, Prototype/script.aculo.us, Dojo, ...

Hausaufgabe 1: Ändern Sie das JavaScript für den Ajax-Chat so ab, dass jede neue Chatnachricht als Text-Inhalt eines <p>-Elements an das <body>-Element angehängt wird.

Hausaufgabe 2 (Fortgeschrittene): a) Erweitern Sie den Ajax-Chat so, dass immer die letzten 10 Chatnachrichten auf dem Server zwischengespeichert werden. Dadurch kann erreicht werden, dass keine Chatnachricht verloren geht, wenn innerhalb kurzer Zeit mehrere Browser eine neue Nachricht an den Server schicken.
b) Der Ajax-Chat erlaubt einen CSRF-Angriff, womit das Abschicken von Chatnachrichten von anderen IP-Adressen als der des Angreifers möglich wird. Beheben Sie dieses Sicherheitsrisiko!