Diese Arbeit soll einen Einblick verschaffen, welche Technologien eigentlich hinter dem täglich genutzten World Wide Web stecken. Weiters soll der Leser ein Gefühl entwickeln, für welches Einsatzszenario welche Technologie sinnvoll sein könnte. Einführend wird der technische Hintergrund einer Standard Web-Anfrage dargestellt sowie der Aufbau und die Funktionsweise des HTTP-Protokolls. Darauf werden die Technologien auf Seiten des Clients als auch des Servers vorgestellt. Die Erklärungen erfolgen, wenn möglich anhand von kurzen Beispielen.

2. Basics

War das Internet ursprünglich nur amerikanischen Universitäten vorbehalten, erlangte es durch das Email in den frühen Siebzigern immer mehr an Bedeutung. Für den Laien interessant wurde es Anfang der Neunziger, als der erste grafische Webbrowser gratis zur Verfügung stand. Es entstand das World Wide Web und wurde zum meistgenutzten Internet-Dienst (Hyper Text Transfer Protocol – kurz HTTP).

Zu Beginn wird nun das HTTP-Protokoll und dessen Akteure vorgestellt.

2.1. Hyper Text Transfer Protocol – HTTP

Das Hypertext Transfer Protocol ist der de facto Standard um Daten des World Wide Web zu transferieren. Seit Version 1.1 ist es möglich nahezu jede Dateiart (MIME-Types) zu übermitteln. HTTP arbeitet auf der Anwendungsschicht des ISO/OSI Modells, üblicherweise auf TCP-Port 80.

Webseiten werden auf einem HTTP-Daemon zur Verfügung gestellt. Dieser Server wartet auf HTTP-Requests des Browsers auf der Client-Seite, an welche er die geforderte Datei (html, jpg, gif, ...) übermittelt. Die Verbindung zwischen Client und Server wird nach erfolgreicher Übertragung geschlossen. Somit handelt es sich um ein zustandsloses Protokoll.

Abbildung 1 zeigt eine Standard-Kommunikation zwischen Server und Browser. Für dieses Beispiel wurde der Datentransfer eines regulären Web-Requests in Mozilla-Firefox mittels des TamperData-Plugins überwacht.

Abbildung 1 Beispiel HTTP

Durch einen Klick auf einen Link oder durch direkte Eingabe der URL im Browser wird ein Request-Header an den Zielserver gesendet. Dieser enthält zu Beginn den GET-Befehl, der definiert, welche Datei auf dem Server angesprochen werden soll. In diesem Fall wird die Datei index.html im Wurzel-Verzeichnis abgerufen.
Weitere Request-Methoden:

GET	Anfrage an/auf eine Datei, übermittelte Parameter stehen in der URL
POST	Anfrage an/auf eine Datei, übermittelte Parameter stehen im Header als Extra-Datenblock
PUT	Upload von Dateien auf einen Webserver, sofern Schreibrechte für den Ordner gesetzt sind
DELETE	löscht Dateien (wenn Berechtigung vorhanden)
HEAD	liefert den Header eines GET-Requests ohne Dateiinhalt. Es lässt sich somit einfach überprüfen ob eine Datei noch existiert, ohne zwingenden Download.
TRACE	Server gibt den letzten erhaltenen Request zurück
OPTIONS	Liefert die vom Server unterstützten Befehle und Funktionen
CONNECT	Für Proxy-Applikationen

Als nächstes im Beispiel folgt der Hostname des betreffenden Servers. Bei den Accept-Parametern wird angegeben, welche Dateiformate Charset, Sprache und Codierung des Inhalts vom Clients akzeptiert werden. Charsets sind im deutschsprachigen Raum aufgrund der Umlaute wichtig, da diese nur mit passendem Charset-Encoding korrekt angezeigt werden (UTF-8, ISO-8859-1). Keep-Alive erhält die Verbindung für eine gewisse Zeit aufrecht, um zusätzliche Dateien z.B. Bilder über die bestehende Connection zu transferieren. Somit erspart man sich zeitraubende neu aufbauende TCP-Kanäle. Der Server antwortet mit einem Statuscode. In diesem Fall mit Code 200, was bedeutet, dass der Befehl erfolgreich ausgeführt wurde.

Mögliche Statuscodes:

1##	Information
2##	Erfolgreiche Operation
3##	Umleitung
4##	Client-Fehler
5##	Server-Fehler

Weiters sind im Response-Header des Servers Informationen über Zeit und Datum sowie Details zur HTTPD-Software (inklusive der aktiven Module) enthalten. Im Beispiel handelt es sich um die Webserver-Software Apache mit aktiviertem SSL (Verschlüsselung) und PHP 4 (Erstellung von Webseiten mit dynamischen Inhalten). Zusätzlich werden Informationen über das tatsächliche Keep-Alive-Verhalten übermittelt. Transfer-Encoding chunked bedeutet, dass der Inhalt der gewünschten Datei paketweise transferiert und mit einem Abschlusspaket beendet wird. Content-Type ist hier gesetzt auf text/html – bei einem Bild wäre dies beispielsweise image/jpg oder image/gif.

Beliebte Software für den Webserverbetrieb:

Bezeichnung	Link		Verbreitung[1]
Apache Webserver	http://www.apache.org	Gratis	60.17%
Microsoft Internet Information Server	http://www.microsoft.com/	$	30.78%
Sun Webserver	http://sun.com/webserver	$	1.64%
Zeus Web Server	http://www.zeus.com/products/zws/	$	0.52%

2.2. Inhalte – statisch/dynamisch

Wie schon erwähnt kann mittels HTTP beinahe jede Dateiart übermittelt werden. Dies geschieht mit Hilfe des ursprünglich aus dem Mail-Breich stammenden MIME-Type-Systems, was bedeutet „Multipurpose Internet Mail Extension“. Dateityp-Informationen werden im Header mitgeschickt (Content-Type), sodass der Browser den Dateiinhalt entsprechend interpretieren kann. Dabei unterscheidet er zwischen drei Arten. Zum einen die interne Interpretation, bei der der Browser selbst die Inhalte verarbeitet und darstellt (z.B.: html, gif, jpeg). Auch möglich ist die Verlinkung zu einem externen Programm (z.B.: doc à c:\programme\ms office\winword.exe). Weiters hat der Browser die Möglichkeit Plugins zu laden. Dies erfolgt über spezielle DLL-Treiberdateien. Häufige Anwendung findet diese Technik bei PDF-Dateien bei denen der Acrobat Reader Plugin geladen wird. Ein weiteres Beispiel wäre der Quicktime-Plugin zur Film-Wiedergabe (mpeg, mov, …). Meist handelt es sich bei den übertragenen Dateien um zusammengesetzte Dokumente. Das bedeutet ein HTML-Dokument beinhaltet mehrere verschiedene Dateitypen (weitere HTML-Dateien in Frames, Bilder, Flash-Animationen, …)

Abbildung 2 MIME-Type Verarbeitungstechniken

Doch welcher Dateiinhalt ist jetzt dynamisch und welcher statisch?

Das hängt von den eingesetzten Web-Technologien ab, die gleich noch genauer erläutert werden. Befindet sich eine reine HTML-Datei und eine einfache Bilddatei auf einem Webserver so sind diese statisch. Wird jedoch bei Aufruf der Dateien der Inhalt live generiert - mit Hilfe einer serverseitigen Webtechnologie (z.B. PHP) - so handelt es sich um dynamische Inhalte. Auch auf Seiten des Browsers können Inhalte dynamisch und interaktiv gestaltet werden. Dazu dienen Web-Technologien wie z.B. Javascript oder Flash MX auf Client-Seite.

3. Client-Technologien

Im Folgenden werden nun die Client-Web-Technologien beschrieben. Es werden die Funktionsweise und die möglichen Einsatzszenarien beschrieben sowie Vor- und Nachteile erörtert.

3.1. HTML

Die Hyper Text Markup Language wurde Ende der Achtziger von Tim Berners-Lee entwickelt und ist heute der Standard zur Darstellung von Text, Bildern und anderen Inhalten im World Wide Web. Ein HTML-Dokument besteht aus dem darzustellenden Inhalt, Tags, welche das Layout und die Formatierung des Inhalts bestimmen, sowie Tags, die Metainformationen für Suchmaschinen enthalten. Ein Tag kann Attribute und andere Tags beinhalten und wird wie folgt dargestellt:

<tag attribut=“wert“> Inhalt und andere Tags </tag>

Aufbau

html

Abbildung 3 Beispiel HTML

Abbildung 3 stellt ein Beispiel für ein HTML-Dokument dar. In der ersten Zeile wird der Dokumenttyp deklariert. Dadurch erhält der Browser die nötigen Informationen bezüglich der HTML-Version. Eröffnet wird das HTML-Dokument mit dem html-Tag in Zeile 3. Im head-Tag (Zeile 4 bis 11) sind Meta-Informationen für Suchmaschinen angegeben. Wichtig hierbei sind Schlüsselwörter, nach denen die Websurfer suchen und die Beschreibung, welche beim Suchmaschinen-Listing angezeigt wird. Ebenfalls im head-Tag befindet sich der title-Tag, dessen Inhalt in der Titelleiste des Browsers angezeigt wird. Auch er ist suchmaschinenrelevant. Auf den head folgt der body-Tag. Dieser enthält die darzustellenden Inhalte mit den entsprechenden Formatierungstags. Im Beispiel wird ein Tabelle (table) definiert. <tr> steht für eine Zeile und <td> für die Spalten der jeweiligen Zeile. strong stellt den Inhalt als fett geschrieben im Browser dar. Im nächsten Kapitel wird gezeigt, wie und warum solche alten Formatierungstags vermieden werden sollten.

Sicherlich am wichtigsten ist der a-Tag, mit dem Links angelegt werden können. Dazu wird im Attribut href die entsprechende Adresse angegeben. Hier beispielsweise führt der Text „Ask Monty Python“ durch einen Klick zur Adresse „http://www.montypython.com“. Das Attribut target spezifiziert, ob sich die href-Adresse in einem neuen Fenster oder in einem bestimmten Frame öffnen soll. Frames sind HTML-Seiten, eingebettet und strukturiert in einem HTML-Dokument. Übliche Anwendung wäre rechts eine Navigation und Links ein Content-Fenster. Vorteil dabei: Es wird nur der Inhalt ohne die Navigation neu geladen und verursacht weniger Datentransfer. Nachteil: Bei einigen Suchmaschinen treten Probleme beim Listing auf.

Eine komplette Liste aller Tags mit Beispielen befindet sich auf folgender Website:

http://de.selfhtml.org/

3.2. CSS – Cascading Style Sheets

HTML ist im Wesentlichen für die Struktur eines Dokumentes verantwortlich. Durch die unterschiedlichen browserspezifischen Tags kommt es zu Kompatibilitätsproblemen. Hierbei schaffen Style-Sheets Abhilfe. Sie bieten die Möglichkeit, ergänzend zu HTML, einmalig und ohne Redundanzen die Formateigenschaften der einzelnen HTML-Elemente zu definieren. Es gibt verschiedene Alternativen, um CSS in HTML anzuwenden. Das folgende Beispiel in Abbildung 4 wird diese demonstrieren.

3.2.1. Methoden

Grundsätzlich besteht eine CSS-Definition aus einem Selektor und einer Deklaration. Ein Beispiel für eine allgemeine Formatierung wäre in Abbildung 4 die Zeile 14 und 18. Es wird vereinbart, dass alle a-Tags orange und alle tr-Tags in der Farbe Magenta dargestellt werden. Der Selektor wäre hier „a“ und die Deklaration „{ color: orange}“. Für den User bedeutet dies: Alle Links werden orange und alle Tabellen-Zeilen magentafarben.

Gruppierung

Die Gruppierung erlaubt es, mehrere Tags gleich zu deklarieren wie Abbildung 4 – Zeile 17 demonstriert. Für den User werden Überschriften h1 bis h3 dunkelgrün angezeigt.

Klassifizierung

In CSS ist es möglich, Klassen zu definieren. Im Beispiel werden alle Links (a-Tags) orange dargestellt, will man jedoch einen oder mehrere spezielle Links in einer anderen Farbe anzeigen, so muss eine Ableitung des a-Selektors angelegt werden. Dies veranschaulicht Zeile 15 in Abbildung 4. Der betreffende künftig andersfarbene Link muss wie in Zeile 27 mit dem class-Attribut erweitert werden. Ein Beispiel für eine allgemeine (nicht elementspezifische) Klasse zeigen Zeile 16 und Zeile 34. Es gibt sogenannte Pseudo-Klassen wie z.B. hover oder visited um die der a-Selektor erweitert werden kann. a:hover {color:red} würde die Farbe eines Links auf Rot ändern sobald der Mauszeiger diesen passiert.

IDs

Mit Hilfe von IDs können die Elemente eindeutig identifiziert und verändert werden. Dies veranschaulicht Zeile 20 und 35.

Vererbung

Wurden für ein Element gewisse Eigenschaften (z.B.: color) definiert, so erben diese die Kinder des Elements, es sei denn, es wurden die im Style-Sheet definierten Eigenschaften überschrieben. Beispiel dafür in Abbildung 4: Für den Tag tr wurde die Farbe Magenta bestimmt. tr hat mehrere td-Tags als Kinderelemente für die jedoch kein color-Style deklariert ist. Somit erben diese den Style von tr. (Zeile 18, 29, 30) In der HTML-Ausgabe in Abbildung 4 erbt Test 1 im Beispiel den color-Wert von tr. Bei Test 2 bis 4 wird dieser mit verschiedenen Methoden überschrieben.

3.2.2. Einbindung

Stylesheets können auf verschiedene Arten in ein HTML-Dokument eingebunden werden. Zum einen wie im Beispiel dargestellt, durch einfügen eines Style-Tags im Head-Tag. Weiters durch ein Attribut „style“ im betreffenden Element wie in Zeile 31 – Abbildung 4.

Die gängigste Technik um eine HTML-Dokument mit einem Stylesheet zu vereinen ist jedoch die Verlinkung. Dies erfolgt durch einen link-Tag im head-Teil des HTML-Dokuments. Hier werden Style-Informationen in einer separaten Datei gespeichert.

<link rel="stylesheet" href="test.css" type="text/css" />

css

Abbildung 4 Beispiel CSS

3.3. XML – eXtensible Markup Language

XML steht für strukturierte Daten. XML ist ein Satz an Regeln (man kann ebenso von Richtlinien oder Konventionen sprechen) für die Erstellung von Textformaten zur Strukturierung solcher Daten. XML ist keine Programmiersprache und man braucht auch kein Programmierer zu sein, um XML zu benutzen oder zu lernen. XML erleichtert es einem Computer, Daten zu generieren oder zu lesen und sorgt dafür, dass eine bestimmte Datenstruktur eindeutig bleibt.[2]

XML ähnelt zwar HTML, dennoch sind die Technologien unterschiedlich. Wie HTML verwendet XML Tags und für Attribute Wertepaare im Format name=“wert“. Die Tags und Attribute sind allerdings bei HTMTL vordefiniert. Bei XML existieren keine vordefinierten Tags. Die Interpretation dieser erfolgt anwendungsspezifisch.

XML bietet folgende Vorteile[3]:

· Plattformneutralität

· Trennung von Inhalt und Präsentation

· Repräsentation beliebig komplexer strukturierter Daten

· Anreicherung von Nutzdaten um Metainformationen

· Verbesserung der Qualität von Dokumenten- und Datenverarbeitungsprozessen

· Verfügbarkeit standardisierter Tools

XML bietet also eine gute Möglichkeit, um strukturierte Daten zwischen unterschiedlichen Systemen auszutauschen.

3.3.1. Wohlgeformtheit

XML ist im Vergleich zu HTML nicht fehlertolerant. Es müssen eine Reihe von formalen Auszeichnungsregeln³ beachtet werden. Beim geringsten Verstoß gegen diese Regeln muss der XML-Parser bzw. die interpretierende Applikation den Vorgang abbrechen und eine Fehlermeldung ausgeben.

Es folgen die Regeln³ für well-formedness:

· Ein XML-Dokument hat genau ein Wurzelelement

· XML-Elemente müssen mit einem Ende-Tag abgeschlossen werden.

· XML-Elemente müssen korrekt geschachtelt sein.

· Attributwerte müssen in Anführungszeichen oder Hochkomma stehen.

· Attribute müssen als Name=Wert-Paar definiert werden.

Abbildung 5 zeigt ein Beispiel für ein einfach wohlgeformtes XML-Dokument.

xml

Abbildung 5 Beispiel XML

3.3.2. XML-Familie

XML ist eine Familie von Techniken. Es gibt Methoden/Technologien, um die Inhalte zu präsentieren sowie zur Festlegung der Struktur. Die folgende Tabelle aus dem Buch Web-Technologien von Heiko Wöhr zeigt eine Liste mit den gängigen Technologien.

Akronym	Name	Anwendung
XSL	eXtensible Stylesheet Language	Formatierung und Layout
XSLT	eXtensible Stylesheet Language Transformations	Transformation
XPath	XML Path Language	Zugriff auf Dokumentenknoten
XML Schema	XML Schema	Dokumenttypdefinition

3.4. Javascript

Javascript ist ein Scriptsprache und basiert auf Objekten. Sun Microsystems entwickelte sie 1995, worauf sie in den damals beliebten Browser Netscape Communicator eingebaut wurde. Microsoft führte kurz danach ebenfalls eine Skript-Sprache namens JScript im Internet Explorer ein. Die beiden Sprachen sind jedoch nicht kompatibel. Es erfordert einiges an Programmieraufwand, da die verschiedenen Browser erkannt werden müssen und nur für den jeweiligen Browser ein passender Java-Script-Code ausgeführt werden darf. Nicht selten müssen zwei Versionen eines Programms erstellt werden. Dies geschieht auch im Beispiel des FCKEditors (www.fckeditor.net). Dabei handelt es sich um eine gratis Software, die es erlaubt eine Rich-GUI in ein HTML-Dokument einzubinden. Mittels Javascript entsteht ein Toolbar, der dem von Microsoft Office ähnelt, eine Art All-In-One-Lösung zur Erstellung von Content-Management-Systemen. Wenn hier der Sourcecode genauer betrachtet wird, stellt man fest, dass aus Kompatibilitätsgründen zwei Versionen geschrieben wurden, eine für Gecko-Browser, die auf der Mozilla-Technologie beruhen und eine für den Internet-Explorer von Microsoft.

Eine weitere Eigenschaft von Javascript ist das Sandboxverhalten. Javascript wurde um einige Funktionen gekürzt, die in anderen üblichen Programmiersprachen standardmäßig vorhanden sind. Javascript ist aus Sicherheitsgründen nicht fähig lokale Dateien zu lesen oder zu schreiben. Weiters können keine Netzwerkverbindungen aufgebaut werden.

Javascript hat folgende Leistungsmerkmale[4]:

· Zugriff auf die Bestandteile des geladenen Dokumentes

· Dynamische Änderung des geladenen Dokumentes

· Steuerung externer Komponenten

· Reaktion auf Benutzeraktionen Fenstermanagement

· Fenstermanagement

Die Syntax von Javascript ähnelt Java und C und ist für erfahrene Programmierer relativ einfach zu erlernen. Weniger einfach und durchschaubar sind die unterschiedlichen Interpretationen des Codes der verschiedenen Browser, wie schon am FCKEditor erklärt.

Es gibt drei Möglichkeiten Javascript in ein HTML-Dokument einzubinden:

<SCRIPT>-Tag

Dieser kann im Head angeführt sein sowie an einer beliebigen Stelle im Body-Tag. Das folgende Beispiel öffnet ein Popup-Fenster mit der Nachricht „Hello World!“.

Beispiel:

alert("Hello World!");

</script>

Event Handler

Event-Hanlder sind in HTML 4.0 definiert. Sie ermöglichen die Reaktion auf Anwenderereignisse wie z.B. Klicks oder Text-Selektionen (onClick, onSelect). Das folgende Beispiel öffnet durch einen Klick auf ein Bild wieder ein Hello-Popup-Fenster.

Beispiel:

href-Attribut

Eine weitere Technik zur Einbindung von Javascript in HTML ist das Einfügen von „javascript:“ im URL-Attribut des Anker-Tags.

Beispiel:

<a href=“javascript:alert(„Hello World!“);“>Hallo Welt</a>

3.5. Ajax

Ajax steht für Asynchronous JavaScript and XML und ermöglicht eine http-Anfrage in einer HTML-Seite mittels JavaScript. Vorteil dabei ist, dass nur die relevanten Daten und nicht erneut die komplette Seite übertragen werden. Abbildung 6 zeigt einen Vergleich zwischen einem klassischen und einem mit Hilfe von Ajax gelösten Request.

Ajax-vergleich

Abbildung 6 AJAX[5]

Grundsätzlich ist die Idee von Ajax gut, da redundanter Datentransfer vermieden wird. Beispielsweise müssen die Grundstruktur und die Navigation nicht immer bei jedem Request neu mitgeschickt werden. Weiters baut diese Technik auf bereits unterstützten Technologien auf und benötigt daher keine Plugins.

Leider bringt diese Technologie auch einige Probleme mit sich. Zum einen funktioniert der Zurück-Knopf nicht, da die Browser für reguläre HTTP-Requests konzipiert sind. Softwareentwickler fanden unterschiedliche Lösungen, um diesem Problem entgegen zu treten. Das Dojo-Toolkit (http://dojotoolkit.org), welches frei verfügbar ist, bietet eine bereits fertige Lösung mit Hilfe einer Callback_Funktion, die bei Betätigung des Zurück-Knopfs ausgeführt wird. Es legt praktisch eine zweite Historie an.

Ein weiteres Problem von Ajax stellt die Latenzzeit dar. Wenn eine Anfrage im Hintergrund ausgeführt wird, so kann es zu einer gewissen Wartezeit kommen. Erst dann ist der Inhalt vollständig übertragen und kann dargestellt werden. Grund dafür könnte ein erhöhter Rechenaufwand auf Seiten des Servers sein oder z.B. die Auslastung, wenn viele Anfragen zur selben Zeit eintreten. Ein regulärer Benutzer erwartet sofort nach einem von ihm getätigten Input eine Reaktion. Auch hierfür muss mittels Javascript eine Lösung gefunden werden. Einige Lösungsansätze lassen rechts oben eine animierte Sanduhr erscheinen, andere wiederum ändern einfach den Mauszeiger. Hierfür sind der Kreativität keine Grenzen gesetzt. Nichts desto trotz muss dieses Problem behandelt werden.

AJAX ist langsam im Kommen, obwohl die Technik schon länger bekannt ist. Paradebeispiele für AJAX-Anwendungen sind zwei Services vom Trendsetter Google. GoogleMail bietet eine Gratis-Mailbox, dessen Webmail-Seite komplett in Ajax gelöst ist. Falls Javascript deaktiviert ist und somit die Ajax-Technik nicht funktioniert, wird zu einer rein HTML-basierten Webmail-Seite gewechselt. GoogleMaps zeigt eine Weltkarte in der mit Hilfe von Ajax navigiert werden kann. Bei einem Zoom-In wird beispielsweise nicht die ganze Seite neu geladen, nur die Bilder in der Karte.

3.6. Java-Applets

Mittels Java-Applets lassen sich komplexe Anwendungen im Browser starten. Applets sind Java-Programme, werden im HTML-Code verlinkt und in einer Sandbox ausgeführt. Ohne speziell gewährte Rechte bleibt das Programm eingeschränkt:

· Kein Zugriff auf das Dateisystem des Clients

· Netzwerkverbindungen können nicht aufgebaut werden

· Fremde Bibliotheken dürfen nicht benutzt werden

· Und keine externen Programme ausgeführt

Beispiel für den HTML-Code:

Da durch Gewähren spezieller Rechte Java im vollen Funktionsumfang genutzt werden kann, ist diese Technologie bei Anti-Viren-Herstellern beliebt. Firmen wie Norton und TrendMicro bieten gratis voll funktionsfähige Virenscanner als Applet an. (http://housecall.trendmicro.com).

Ein weiteres Einsatzgebiet findet sich in der Foto-Entwicklungs-Branche. Hier sind Foto-Verwaltungsprogramme implementiert, die im Browser direkt ausgeführt werden. Ein wichtiger Vorteil von Java-Applets ist der Datei-Transfer. Bei einem regulären Datei-Upload im Browser sieht man keine Geschwindigkeit und was noch fataler ist – keine Rest-Upload-Zeit. Dies lässt sich mittels Java relativ einfach lösen und ist beispielsweise für einen Upload eines 5 MB großen Fotos unumgänglich. Auf www.sourceforge.net sind mehrere open-source File-Upload-Projekte gratis verfügbar.

Einen Nachteil von Applets gibt es dennoch. Standardgemäß ist im Internet Explorer nur eine veraltete und fehlerhafte Java-Version installiert, Mozilla-Produkte und Opera beinhalten gar keine Java-Virtual-Machine. Es ist also erforderlich den Java-Plugin zu installieren, um Applets mit großem Funktionsumfang korrekt auszuführen. Dies kann für technisch weniger begabte/interessierte Nutzer eine Hürde darstellen.

3.7. Flash

Flash ist ein kommerzielles Produkt von Adobe Systems. Es dient primär zur Erstellung von Vector-Graphiken und Animationen. Um Flash-Filme zu designen und zu generieren benötigt man das Tool Flash Professional (getestete Version für diese Arbeit - 8.0). Während der Entwicklung im Tool werden fla-Dateien erstellt, für das Web binäre um einiges kleinere swf-Dateien. Mit Hilfe eines Plugins, der installeirt sein muss, können diese im Browser des Clients ausgeführt werden. In moderneren Browsern kann der Plugin – falls nicht vorhanden - nachträglich mit einem Click installiert werden. Der Flash-Player ist gleich nach dem Acrobat Reader der am weitesten verbreitete Browser-Plugin.

Abbildung 7 zeigt das Userinterface von Flash Professional. Wichtigstes Element ist die Zeitleiste. Ein Flash-Film basiert wie ein Cartoon auf Frames . Startpunkt ist eine Szene, hier „Szene 1“. In einer Szene können beliebig viele Ebenen angelegt werden, in einer Ebene wiederum beliebig viele Objekte.

flash

Abbildung 7 Flash-GUI

Als erstes sollte man sich überlegen, wie viele Frames pro Sekunden beim Abspielen durchlaufen werden. Das menschliche Auge kann 23 Bilder pro Sekunde erfassen, deshalb bietet sich diese Zahl an. Allerdings sollte bei der Anzahl der Frames auch die erforderliche Rechenleistung berücksichtigt werden. Da der Flash-Film auf dem Client-Rechner ausgeführt wird, trägt dieser die komplette Rechenlast. Nicht jeder besitzt einen High-End-Rechner.

3.7.1. Frames

Es gibt verschiedene Frames: Frames, Keyframes und leere Keyframes.

Keyframes sind in der Zeitleiste mit einem Punkt gekennzeichnet. Erstellt man mit Hilfe der Werkzeugleiste eine Zeichnung, z.B. einen Kreis in einem Keyframe bei Frame 1 und fügt danach reguläre Frames bis Frame 15 ein, so bedeutet dies, dass das Bild im Keyframe bis zu Frame 15 dargestellt wird. Möchte man, dass sich beim fünfzehnten Frame das Bild ändert (z.B. die Farbe des Kreises), so muss ein neuer Keyframe eingefügt werden. Leere Keyframes werden benötigt, falls einige Zeit nichts angezeigt werden soll. Möchte man einen Zeichentrickfilm nach alter Technik erstellen, legt man viele verschiedene Keyframes aneinandergereiht an.

flash-zeitleiste

Abbildung 8 Flash - Zeitleiste - Frames

3.7.2. Tweens

Für Bewegungen und Verformungen gibt es in Flash modernere Methoden als hunderte von einzelnen Bildern hintereinanderzulegen. Es lassen sich sogenannte Tweens zwischen 2 Keyframes erstellen. Beispielsweise wäre in Keyframe in Frame 1 ein grüner Kreis ganz links im Bild und in Keyframe an Stelle 15 ganz rechts, so kann ein Bewegungs-Tween erstellt werden. Das Programm berechnet sich den Weg von rechts nach links durch Interpolation. Wäre bei Frame 15 ein Rechteck, so könnte man einen Form-Tween erstellen. Der Kreis würde sich zu einem Rechteck umformen. Einen erfolgreich erstellten Tween erkennt man an dem Pfeil zwischen den Keyframes. Dies ist in der Zeitleiste bei Abbildung 7 ersichtlich. Wichtiger Stolperstein: Es darf pro Ebene nur ein Objekt enthalten sein auf das ein Tween erstellt werden kann.

3.7.3. Verschieben von Formen und Zeichnungen

Flash hat eine Eigenart über die zu Beginn fast jeder stolpert. Werden 2 Formen gezeichnet und übereinander geschoben, vereinen sich diese sofern sie gleichfarbig sind. Wären sie verschiedenfarbig, so schneidet die Übergeordnete die Untergeordnete aus. Seit Flash Version 8 hat man jedoch die Möglichkeit, die Vektorgrafiken direkt als Objekte zu zeichnen, sodass böse Überraschungen ausbleiben. Eine weitere hilfreiche Funktion diesbezüglich sind Gruppierungen.

3.7.4. Symbole

In Flash können Symbole erstellt werden. Sie erinnern etwas an Klassen bei der Objektorientierten Programmierung, da Symbole in Flash angelegt, jedoch nur Instanzen der Symbole in die Bühne eingefügt werden.

Es gibt drei Arten:

Movieclips sind ähnlich der Szenen. Ein Movieclip besitzt eine eigene Zeitleiste, in der wiederum beliebig viele Ebenen sowie Frames angelegt werden können. Movieclip Objekte lassen sich in Szenen und in Movieclip-Objekte einfügen.

Buttons sind Schaltflächen. Da Flash interaktiv ist und programmierbar, können komplette Web-Seiten mit Formularen erstellt werden. Buttons haben nur vier Frames. Mit diesen wird das Verhalten eines Userinputs behandelt wie Abbildung 9 zeigt.

flash_knopf

Abbildung 9 Flash - Buttons

Grafiken ähneln den Movieclips. Jedoch gibt es einen Unterschied: Movieclips können unabhängig von der Hauptzeitleiste abgespielt werden, Grafiken nicht.

Die erstellten Symbole scheinen in der Bibliothek auf (rechts Abbildung 7). Allerdings können nicht nur Symbole, sondern auch alle gängigen Medientypen in diese Bibliothek importiert und somit im Flash-Film verwendet werden. Es lassen sich z.B. Bitmaps oder Mp3s einbinden und dadurch komplexe audiovisuelle Effekte erstellen.

3.7.5. Actionscript

Mittels Actionscript lassen sich die im Film verwendeten Medienobjekte steuern. Deshalb ist Flash meist die erste Wahl bei Online-Spielen, die im Browser gestartet werden sollen. Es existieren zahlreiche Source-Codes zur Kollisionsbehandlung und anderen spielorientierten Programmiertechniken. Es können praktisch alle Einstellungen, die während der Entwicklung getätigt wurden auch im Nachhinein dynamisch verändert werden.

3.7.6. Trendsetter

Durch die Videofunktionalität von Flash entstand ein neuer Trend. Webseiten auf denen User ihre Videos uploaden können, erfreuen sich hoher Beliebtheit. Seiten wie Youtube.com leiden bereits an Performance-Problemen aufgrund des immensen Userandrangs. Vorteil der im Hintergrund stehenden Flash-Technologie: Es werden praktisch alle Video-Formate unterstützt bzw. es können alle Formate in das Flash-Video-Format konvertiert werden.

Das bisherige Problem von Online-Videos waren die fehlenden Plugins und dessen Versionen. Auf der einen Webseite sind Quicktime-Videos, welche sich ohne zugehörigen Quicktime-Player nicht abspielen lassen. Die nächste Seite verlangt Windows MediaPlayer 10, da der Client nur Version 9 des Players installiert hat, sieht dieser nur verpixelte Umrisse. Jetzt, da sich im Prinzip mit einem Player alle Formate abspielen lassen und die Internetbandbreite heute ausreichend ist, konnte sich dieser Hype erst entwickeln.

Leider hat die Sache einen Haken: Copyright. Da jeder beliebige Internet-User Videos uploaden kann sind Urheberrechtsverstöße an der Tagesordnung und seit im Beispiel von Youtube.com ein umsatzstarkes Unternehmen dahinter steht, wurde Youtube zu einem Ziel von Klagen. Multimillionen-Dollarklagen könnten der Community äußerst schaden. Raubkopierer nutzen so ziemlich alle bekannten Plattformen, um aktuelle Tv-Serien und Kinofilme upzuloaden und diese auf ihren Websites zu verlinken (http://www.alluc.net).

4. Server-Technologien und Anwendungen

Bisher wurden unterschiedliche Client-Technolgien vorgestellt. Es folgen nun einige serverseitige Anwendungen, welche zwar die gleichen Ziele verfolgen, sich aber dennoch unterscheiden. Typischerweise liefern alle vorgestellten Technologien ein dynamisch generiertes Dokument mit Unterstützung von Datenbanken.

Abbildung 10 veranschaulicht eine Standard-Kommunikation unter Berücksichtigung der Serveranwendungen. Der Client schickt mittels Browser eine Anfrage an ein Dokument (z.B. add_to_basket.php) und übergibt gewisse Parameter (z.B.: id von Produkt das in den Warenkorb soll). Anhand der Dateiendung ermittelt der Server den passenden Interpreter (definiert in der Server-Konfiguration). Mittels des Common Gateway Interfaces gibt er nun die übergebenen Parameter sowie den Pfad und Dateinamen der gewünschten Datei (Skript: add_to_basket.php) and den Interpreter (PHP) weiter. Dieser (php.exe) führt das gewünschte Skript aus und liefert das Resultat an den Webserver, welcher dieses wiederum an den Client weiterleitet.

Abbildung 10 Web-Anfrage mit Server-Anwendung

Bevor nun die einzelnen serverseitigen Anwendungen vorgestellt werden, wird zunächst das Problem der temporären Informationsspeicherung (im obigen Beispiel ein Warenkorb) über mehrer Requests behandelt.

Session-Management

Da es sich bei HTTP um ein zustandsloses Protokoll handelt, werden ständig Verbindungen eines Clients zum Server neu aufgebaut. Sollen dabei individuelle Daten zwischengespeichert werden, kommt es zu einem Problem, welches sich am Beispiel der Authentifizierung gut aufzeigen lässt:

Beim FTP-Protokoll verlangt der Server nach erfolgreichem Verbindungsaufbau, Benutzername und Passwort. Vor korrekter Eingabe dieser Daten sind keine anderen Befehle möglich. Stimmen Benutzername sowie Passwort wird intern im FTP-Server vermerkt „User hat sich eingeloggt“ und die restlichen FTP-Befehle sind verfügbar. Da die Verbindung beibehalten bleibt und der Server weiß, dass sich der User dieser Verbindung bereits angemeldet hat, ist es nicht nötig für jeden geschützten Befehl die Benutzerdaten erneut mitzusenden.

Bei HTTP wäre dies für Serveranwendungen nötig, da Verbindungen nach erfolgreichem Transfer wieder gekappt werden. Die Lösung dieses Problems heißt Session. Es wird eine sogenannte Session-Id generiert mit deren Hilfe Clients wiedererkannt werden können. Nicht nur das, es lassen sich auch Daten in einer Session speichern. Hat sich in unserem Beispiel ein User angemeldet, so erhält er eine Session-Id, welche bei jedem Request übermittelt werden muss. In der Session wird die Information gespeichert, dass er sich bereits angemeldet hat, wie beim FTP-Beispiel.

Es gibt 3 Methoden, Werte im Browser automatisch zu übermitteln:

Hidden Fields gehören zu HTML-Formularen. Sie werden im Browser nicht angezeigt, jedoch beim Übersenden des Formulars als ganz normaler Wert übermittelt.

Beispiel:

URL Rewritting nennt man jene Technik, bei der jeder Link im resultierenden Dokument vom Server durch eine Session-Id ergänzt wird. Dies kann sehr aufwendig sein und man läuft Gefahr die Erweiterung nicht-dynamisch generierter Links zu vergessen.

Cookies sind Informationen die vom Server an den Client gesendet werden. Der Client speichert diese für eine definierte Zeit und sendet sie automatisch bei jedem neuen Request mit. Vorteil dabei ist die Unabhängigkeit zu HTML, da das Dokument nicht beeinflusst wird. Sowohl Cookies als auch Sessions sind nur für eine gewisse Zeitspanne gültig. Cookies lassen sich im Browser anzeigen. Abbildung 11 zeigt ein Cookie von amazon.de, dargestellt in Firefox.

Abbildung 11 Cookie

Auf Grund von clientseitigen Beschränkungen wie z.B eine Größenlimitierung von 4kb ist es allerdings sinnvoll, Zustandsinformationen auf dem Server zu speichern und lediglich Ids in den Cookies zu halten. Beispielsweise könnte ein Warenkorb mit maximal 4kb nur mit einer limitierter Anzahl an Produkte bestückt werden, was sicherlich nicht im Interesse des Verkäufers wäre.

4.1. PHP

PHP steht für Hypertext Preprocessor und wird hauptsächlich dazu verwendet, dynamische Webseiten zu erstellen. Der Source-Code bleibt auf dem Server und wird interpretiert wie in Abbildung 10 bereits beschrieben. Der Client bekommt den Code nie zu Gesicht und erhält lediglich die Ausgabe. PHP ist Open-Source und kann gratis auf www.php.net für alle gängigen Betriebssysteme und Webserver heruntergeladen werden.

PHP bedeutete 1995 zunächst Personal Home Page und war eine Kollektion von Perl-Scripts. Später wurde ein Präprozessor in C geschrieben, worin PHP heute noch weiterentwickelt wird. Die rasant steigende Beliebtheit liegt daran, dass die Programmiersprache im Vergleich zu anderen sehr leicht zu erlernen ist.

Nicht nur wegen der Einfachheit sondern auch aufgrund der äußerst umfangreichen Funktionsbibliothek und der hohen Datenbankkompatibilität ist für viele Entwickler PHP die erste Wahl. PHP.net ermöglicht eine Suche nach Funktionen. Auf jeder Seite einer Funktion sind Programmierbeispiele aus einem Forum angeführt (eine Art best-of). Nur selten muss das Rad neu erfunden werden..

LAMP steht für Linux (Betriebssystem), Apache (Webserver), MySql (Datenbank) und PHP und stellt die meist verwendete Kombination dar, da es sich um performante und kostenlose Software handelt. Für Windows-Benutzer, die sich ohne großen Aufwand einen Einblick in die Technologien verschaffen möchten, bietet XAMPP Lite einen bequemen Einstieg. Es handelt sich dabei um eine Kollektion der oben genannten Anwendungen für Windows. Was es für Einsteiger interessant macht, ist die Installation. Webserver und Datenbank sind bereits vorkonfiguriert. Die Installatio/Konfiguration erfolgt durch einen Klick auf eine Setup-Batch-Datei.

PHP ist an Perl/Java angelehnt und erlaubt seit Version 4 eine objektorientierte Programmierung. Eine weitere wichtige Erneuerung in dieser Version war die Einführung von Sessions. Die aktuelle Version ist jedoch 5 und bietet zusätzlich bessere Funktionalität zur objektorientierten Entwicklung und Datenbankunterstützung, effizientere Speicherverwaltung, besonders wichtig - Exception-Handler für die Fehlerbehandlung, Zip-Funktionalität, SimpleXML und noch einiges mehr.

Das folgende Beispiel zeigt ein PHP-Skript (index.php), welches die übergebenen Parameter id und name ausgibt.

php-sample

Abbildung 12 PHP Beispiel

In der php.ini wird PHP konfiguriert und Module können aktiviert und deaktiviert werden. Für Entwickler ist es essentiell zu wissen wie die Konfiguration des Zielservers, auf dem das Programm letztendlich betrieben wird, aufgebaut ist. Beispielsweise ist bei Webhosts meist die Socket-Funktion deaktiviert, die es PHP ermöglicht Netzwerkverbindungen aufzubauen (TCP). Es würde also keinen Sinn ergeben, diese Funktion einzubauen, obwohl sie in der lokalen Entwicklungsumgebung zur Verfügung stände.

Im Web existieren bereits eine Vielzahl an Open-Source Projekten in PHP. Man sollte sich vor Beginn eines Projektes umsehen, ob es nicht bereits eine Gratisversion gibt (Content-Management, Groupware, Foren, Chats, …)

4.2. Java-Servlets & JSP

Java-Servlets sind Instanzen von Javaklassen, die sich in sogenannten Containern (z.B. Apache Tomcat), die mit dem Webserver kommunizieren, befinden. Die Instanzen nehmen Client-Anfragen entgegen. Sie dienen ebenfalls zur Erstellung von dynamischen Webseites, allerdings lässt sich der Source-Code nicht wie bei PHP bequem zwischen den HTML-Tags einfügen. HTML-Code muss mühsam mittels Ausgabe-Befehlen generiert werden.

Allerdings gibt es JSP (Java Server Pages). Die Einbettung des Programmcodes erfolgt wie bei PHP nur mit etwas anderer Syntax. Beim ersten Aufruf einer JSP-Datei wird ein Servlet generiert und steigert somit die Performance. Sinn dahinter liegt in der Differenzierung zwischen Präsentation und Applikation. Web-Applikationen können so aufgebaut werden, dass der Webdesigner mittels JSP die dynamischen Inhalte ohne Programmierkenntnisse einfügen kann. Der logische Teil befindet sich in Servlets und wird von den Entwicklern erstellt.

4.3. ASP

Active Server Pages stellen die Microsoft-Lösung der oben erwähnen Technologien dar. ASP kann nur in Kombination mit Internet Information Services betrieben werden. Dies ist der Webserver von Microsoft und kann optional zu Windows XP (Version 5) installiert werden, ist jedoch auf 10 Verbindungen beschränkt. Eine voll funktionsfähige Version enthält der Windows Server 2003 (Version 6). Um die neueste Version des IIS zu erhalten, ist es zwingend erforderlich die neuste Windows Version zu kaufen – Vista (IIS Version 7.0). Den IIS gibt es nicht als Standalone-Version.

5. Zusammenfassung

Es wurde behandelt, was hinter den Kulissen eines Standard-Web-Aufrufs steckt und zwischen dynamischen und statischen Dokumenten differenziert. Darauf folgend wurden Client-Technologien vorgestellt. HTML ist zuständig für das Layout bzw. den Aufbau der Seite und beinhaltet Text und bettet Medien in die Seite ein. Mittels Style Sheets lassen sich die Formatierungen der Tags definieren (auch anwendbar auf XML). Javascript ermöglicht Inhalte von Textfeldern zu überprüfen als auch die Webseite dynamisch zu verändern (DHTML). Ajax bietet die Möglichkeit, Anfragen in einer HTML-Seite im Hintergrund zu tätigen, ohne dass die komplette Seite neu geladen werden muss. Java-Applets sind je nach Berechtigung vollwertige Java-Programme, die im Browser geladen werden können. Flash ist ein Tool zur Erstellung von Vectorgrafiken und Animationen. Es lassen sich audio-visuelle Effekte und Präsentationen sowie Spiele erstellen. Von großer Bedeutung ist das Flash-Video-Format, das einen regelrechten Hype ausgelöst hat. Auf der Serverseite wurden PHP, Java-Servlets und ASP kurz vorgestellt. Alle Technologien werden benutzt, um dynamische Inhalte auf dem Server zu generieren. Wichtig dabei: der Client hat keinen Zugriff auf den Source-Code der Programme.

Literatur

[WBTC1] Heiko Wöhr: Web-Technologien – Konzepte, Programmiermodelle, Architekturen; dpunkt.verlag 1. Auflage 2004

[WBTC2] Strobel Claus: Web-Technologien – Oldenbourg 2004

[FLASH1] Tobias Gräning: Einstieg in Flash 8, Galileo Press; Auflage: 1 (Dez. 2005)

[FLASH2] Digital Media for Artists (KunstUni Linz): http://www.dma.ufg.ac.at/app

[HTML] HTML/XHTML : http://de.selfhtml.org/html/index.htm

[JSCRPT] JavaScript/DOM: http://de.selfhtml.org/javascript/index.htm

[JSCRPT] Christian Wenz: Javascript:

http://www.galileocomputing.de/openbook/javascript/

[AJAX] Ajax Grundlagen: http://developer.mozilla.org/de/docs/AJAX:Getting_Started

[AJAX2] Allgemeines zu Ajax: http://www.ajax-community.de/allgemein/

[PHP1] PHP Handbuch http://www.php-homepage.de/manual/

[PHP2] PHP.net : http://www.php.net/

[WIKI] Wikipedia - Die freie Enzyklopadie: http://de.wikipedia.org/wiki/Hauptseite, Stand: 28.02.2007

Abbildungsverzeichnis

Abbildung 1 Beispiel HTTP.. 3

Abbildung 2 MIME-Type Verarbeitungstechniken.. 3

Abbildung 3 Beispiel HTML. 3

Abbildung 4 Beispiel CSS.. 3

Abbildung 5 Beispiel XML. 3

Abbildung 6 AJAX.. 3

Abbildung 7 Flash-GUI 3

Abbildung 8 Flash - Zeitleiste - Frames. 3

Abbildung 9 Flash - Buttons. 3

Abbildung 10 Web-Anfrage mit Server-Anwendung. 3

Abbildung 11 Cookie. 3

Abbildung 12 PHP Beispiel 3

[1] Verbreitung der Webserver Software: Stand Februar 2007, Quelle: http://news.netcraft.com/

[2] XML in 10 Punkten - http://www.w3c.de/Misc/XML-in-10-points.html

[5] Abbildung 6 AJAX: Quelle: http://upload.wikimedia.org/wikipedia/de/c/c2/Ajax-vergleich.png