Letzte Änderung: 21.10.98 von B. Tritsch
Stichworte:
Das Projekt World Wide Web (WWW) hat 1989 seinen Ursprung in den Forschungslabors des CERN (Europäisches Forschungszentrum für Teilchenphysik). Das CERN hat eine Reihe von Beschleunigern, an denen große Teams von Physikern aus der ganzen Welt Grundlagenforschung in Hochenergiephysik betreiben. Die Teams haben oft Mitglieder aus einem Dutzend verschiedener Länder. Die Experimente sind so komplex, daß ihre Planung, der Bau von Equipment und die Durchführung viele Jahre dauern kann. Der Bau des LEP-Rings dauerte beispielsweise 7 Jahre bis zum ersten Experiment, am Ende waren ca. 3.000 Wissenschaftler damit beschäftigt. Das WWW entstand aus der Notwendigkeit den internationalen Teams eine Möglichkeit zur Verfügung zu stellen eine sich rasch ändernde Kollektion an Berichten, Blaupausen, Bilder, Photos, Veröffentlichungen und andere Dokumente zu verwalten.
Der initiale Vorschlag zu einem Netzwerk an verknüpften Dokumenten wurde vom CERN-Physiker Tim Berners-Lee im März 1989 gemacht. Der erste textbasierte Prototyp stand 18 Monate später zur Verfügung. Im Dezember 1991 wurde eine erste öffentliche Demonstration auf der Hypertext '91 Konferenz in San Antonio, Texas gegeben. Die Entwicklung schritt voran und gipfelte im Februar 1993 zunächst in der ersten Version eines graphischen WWW-Interfaces: Mosaic
Mosaic wurde so populär, daß sein Autor Marc Andreessen ein Jahr später seine Wirkungsstätte - das National Center for Supercomputing Applications (NCSA) in Chicago - verließ und mit einem Partner die Netscape Communication Corp. gründete.
1994 unterzeichneten das CERN und das M.I.T. einen Vertrag, der das WWW-Konsortium ins Leben rief. Es hat das Ziel die zukünftigen Entwicklungen rund um das WWW, die Standardisierung der Protokolle und die Interoperabilität zwischen verschiedenen Plattformen voranzutreiben. Berners-Lee wurde Direktor und hunderte von Universitäten und Firmen sind dem Konsortium beigetreten. In den USA wird das Konsortium durch das M.I.T. vertreten, in Europa durch das französische Forschungszentrum INRIA.
Insgesamt ist das WWW eine Initiative für eine weitgefächerte Informationssuche mit dem Ziel, den Zugang zu einer riesigen Welt von Dokumenten zu eröffnen. Es ist der architektonische Rahmen zum Zugriff auf verknüpfte Dokumente auf tausenden von Rechnern auf der ganzen Welt. Die Protokolle des WWW stellen viele der gebräuchlichsten Anwendungsdienste des Internets dar. Innerhalb von fünf Jahren wurde aus einem Weg für Physiker iher Dokumente zu verwalten eine Applikation, von der Millionen Menschen denken sie sei das "Internet".
Die Popularität des "Web" stammt von seinem bunten graphischen Interface, das es dem Benutzer einfach macht auf eine enorme Informationsfülle im Internet zuzugreifen. Die Menge der im WWW-Format angebotenen Informationen steigt sehr schnell. Es gibt WWW-Server für Bibliotheken, Firmen, Forscher etc., wobei sich die Themenbandbreite auf die unterschiedlichsten Gebiete erstreckt.
Stichworte:
Die Entwickler des WWW definierten mehrere Protokolle der Anwendungsschicht und einen Standard für die Veröffentlichung von Dokumenten. Die drei Schlüsselkonzepte sind URL, HTML und HTTP. URLs sind sogenannte einheitliche Ressourcenzeiger (Uniform Resource Locators), die in erster Linie Erweiterungen eines vollständigen Pfadnamens für ein Datenobjekt innerhalb des Internets darstellen. Damit läßt sich das Datenobjekt in einer Welt, die aus der Gesamtheit aller Internet-Hosts besteht, eindeutig identifizieren. HTML (HyperText Markup Language) nennt sich die Spezifikation der Hypertext-Verknüpfunssprache, die ein WWW-Dokument inhaltlich beschreibt. Das HTTP (HyperText Transport Protocol) beschreibt schließlich das Transportprotokoll, das für den Zugriff auf weit entfernte WWW-Dokumente benötigt wird.
Für den Benutzer besteht das WWW aus einer weltweiten Sammlung an Dokumenten, die landläufig auch einfach Seiten (Pages) genannt werden. Jede Seite kann Verbindungen (Zeiger = Links, definiert durch URLs) zu anderen Seiten haben. Benutzer können Links folgen indem sie sie mit der Maus anklicken und was sie zu der zugehörigen Seite führt. Dieser Prozeß kann beliebig oft wiederholt werden.
Die WWW-Seiten werden mit einem Client-Programm betrachtet, das man Browser nennt. NCSA Mosaic, Netscape Navigator und Microsoft Internet Explorer sind die populärsten Browser. Ein Browser lädt die angeforderte Seite von einem WWW-Server, interpretiert den Text und die beinhalteten Formatierungskommandos und zeigt die Seite sauber formatiert auf dem Bildschirm an.
Ein typischer Web-Server lauscht auf dem TCP-Port 80 auf eintreffende Verbindungen von einem Browser (oder einem anderen Client).Nachdem die Verbindung etabliert wurde, schickt der Client eine Anfrage (Request) und der Server antwortet darauf (Reply oder Response). Danach wird die Verbindung wieder freigegeben. Das zugehörige Protokoll ist HTTP.
Soll beispielsweise auf eine WWW-Seite unter der URL http://www.w3.org/hypertext/index.html zugegriffen werden, geschieht dies nach folgendem Schema:
Man sollte dabei immer bedenken, daß für jedes Seitenelement vom Browser zu Server eine eigenen Verbindung aufgebaut werden muß. Enthält die Seite viele Bilder, Icons usw, so ist dieses Vorgehen nicht sonderlich effektiv, vereinfacht die Implementierung jedoch wesentlich.
Abbildung 6.1: Zugriffsmechanismus über das HTTP-Protokoll
Ein HTML-Dokument enthält typischerweise Graphiken, Text, Tonaufnahmen, Videos sowie Verbindungen zu anderen HTML-Dokumenten überall auf der Welt. Manche dieser MIME-konformen multimedialen Daten werden nicht durch den Browser direkt, sondern über Helfer-Applikationen angezeigt. Über Ursprungseiten mit potentiellen Verbindungen zu einer Vielzahl von weiteren HTML-Dokumenten (die ihrerseits wieder Verbindungspunkte beinhalten können) erfolgt der initiale Navigationsstart durch das WWW zur gesuchten Information. Diese sogenannte Hypernavigation läßt dem Benutzer jede Bewegungsfreiheit innerhalb der vorhandenen Dokumente, führt jedoch auch oft zu einem Verirren im Hypernavigationsraum ("Being lost in Hyperspace"). Browser- und Suchwerkzeuge sowie Dienste ähnlich den "Gelben Seiten" unterstützen daher den informationssuchenden Benutzer.
Abbildung 6.2: Grundsätzlicher Aufbau des WWW
Einige Web-Seiten beinhalten Formulare, in die der Benutzer Informationen eingeben kann. Typische Applikationen nutzen diese Formulare als Suchanfrage in einer Datenbank, Produktbestellung oder als Eingabemaske für Umfragen. Andere Web-Seiten nutzen Karten, um Informationen über geographische Objekte zu erhalten. Die Behandlung solcher Formulare und Karten erfordert eine Steuerung der folgenden Abläufe.
Zur benutzerabhängigen Steuerung von Abläufen, der dynamischen Erstellung von Dokumenten und der Bearbeitung von interaktiven Anforderungen innerhalb des WWW-Umgebung werden spezielle Mechanismen auf der Serverseite benötigt. Externe Programme, die typischerweise in einer höheren Programmiersprache geschrieben sind, und sogenannte Gateway Scripts lassen sich daher an einen WWW-Server anschließen. Der Informationsaustausch zwischen diesen Programmen bzw. Gateway Scripts und dem WWW-Server geschieht tradtionell über das Common Gateway Interface (CGI). Inzwischen gibt es jedoch eine Reihe von mächtigeren Mechanismen, wie z.B. die Active Server Pages.
WWW-Server sind somit in der Lage abhängig von eintreffenden Interaktionsmeldungen der WWW-Clients (den WWW-Browsers) HTML-Dokumente dynamisch zu erzeugen und an die Clients zurückzusenden. Weiterhin können auf diese Weise benutzerinitiierte Anforderungen der Clients auf der Serverseite beantwortet werden. Somit sind interaktive Schulungsanwendungen auch auf der Basis des World Wide Web realisierbar.
Stichworte:
WWW-Seiten werden in einer Sprache geschrieben, die sich HyperText Markup Language (HTML) nennt. HTML erlaubt es dem Benutzer, Web-Seiten zu produzieren, die Text, Graphik und Zeiger (Links) auf andere Seiten enhalten. Hierbei sind die Links besonders interessant, da sie der "Klebstoff" zwischen den einzelnen Seiten sind. Jeder Link und damit auch jede Seite hat eine eindeutige Identifikation, die URL (Uniform Resource Locator). Eine URL (z.B. http://www.w3.org/hypertext/index.html) besteht grundsätzlich aus drei Teilen:
Bei vielen Einstiegseiten in größere Web-Strukturen führt ein leerer lokaler Name zur Home Page der zugehörigen Organisation.
Neben dem HTTP-Protokoll können URLs jedoch auch auf anderen Standard-Protokollen basieren:
| Name | Benutzt für | Beispiel |
|---|---|---|
| http | HTML | http://www.igd.fhg.de/ |
| ftp | FTP | ftp://ftp.igd.fhg.de/pub/outgoing |
| file | Lokale Datei | /usr/hypertext/losgets.html |
| news | News-Gruppe | news:comp.os.minix |
| news | News-Artikel | news:AA0134223112@cs.utha.edu |
| gopher | Gopher | gopher://gopher.tc.umn.edu/11/Libraries |
| mailto | Schicken von Email | mailto:tritsch@igd.fhg.de |
| telnet | Remote Login | telnet://www.igd.fhg.de:80 |
Tabelle 6.1: Standard-Protokolle für URLs
Nachdem jetzt klar ist, wie URLs arbeiten, geht es jetzt weiter zu HTML. HTML ist eine Anwendung des ISO-Standards 8879 SGML (Standard Generalized Markup Language), jedoch speziell auf die Bedürfnisse von Hypertext und dem WWW zugeschnitten. Markup-Sprachen enthalten explizite Kommandos für die Formatierung eines Dokuments. So beginnt z.B. mit dem Kommando <B> der Fettdruck und </B> beendet ihn wieder. Dies ist für einen Browser sehr leicht zu interpretieren, ist jedoch auch abhängig von der momentan gewählten Auflösung des Ausgabegeräts. Dies steht in einem starken Kontrast zu proprietären Textdokumenten wie z.B. von MS-Word for Windows oder WordPerfect.
Eine "saubere" Web-Seite besteht aus einem Kopf und einem Körper, die durch <HTML>- und </HTML>-Tags (= Formatierungskommandos) umschlossen sind. Der Kopf ist durch die Tags <HEAD> und </HEAD>, der Körper durch <BODY> und </BODY> umschlossen. Die Kommandos innerhalb der Tags werden Direktiven genannt. Die meisten Tags haben das Format mit <ETWAS> für den Start und </ETWAS> für das Ende. Tags sind nicht abhängig von der Groß- und Kleinschreibung und manche Tags haben Parameter, z.B.
<IMG SRC="bild.gif" ALT="sonstwas">
Hierbei ist <IMG> das Tag mit den Parametern SRC und ALT, die Reihenfolge der Parameter ist beliebig. Im folgenden werden die wichtigsten Tags tabellarisch aufgeführt:
| Tag | Bedeutung |
|---|---|
| <HTML> ... </HTML> | Definiert eine WWW-Seite in HTML |
| <HEAD> ... </HEAD> | Umschließt den Kopf |
| <TITLE> ... </TITLE> | Definiert den Titel |
| <BODY> ... </BODY> | Umschließt den Körper |
| <Hn> ... </Hn> | Überschrift der n-ten Stufe |
| <B> ... </B> | Setzt ... in Fettdruck |
| <I> ... </I> | Setzt ... in kursiv |
| <UL> ... </UL> | Umschließt eine ungeordnete Liste (mit Bullets) |
| <OL> ... </OL> | Umschließt eine geordnete Liste (mit Zahlen) |
| <BR> | Erzeugt einen Umbruch |
| <P> | Start eines Abschnitts |
| <HR> | Horizontale Linie |
| <PRE> ... </PRE> | Vorformatierter Text, nicht formatieren |
| <IMG SRC="..."> | Lade ein Bild an dieser Stelle |
| <A HREF="..."> ... </A> | Definiert einen Hyperlink |
Tabelle 6.2: Auswahl der gebräuchlichsten HTML-Tags
Neuere HTML-Versionen (ab 2.0) unterstützen auch Tabellen, aktive Graphiken mit integrierten Links, Formulare und Positionsangaben wie rechts- oder linksbündig.
Stichworte:
Zwischen purem HTML und multimedialen Katalogseiten im WWW liegen Welten. Jeder, der Dokumente für das WWW entwirft, zusammenstellt oder aus Datenbanken generiert, muß sich Gedanken machen, wie die Seiten am Ende aussehen sollen. Insbesondere, wenn sich Firmen über das WWW präsentieren, sollte Wert auf eine adäquate Gestaltung des Web-Auftritts gelegt werden. Neben einigen fast "Standard" zu nennenden Bestandteilen von WWW-Dokumenten gibt es Tips und Tricks für ein gelungenes Design.
Zu klären ist vor dem ersten Web-Dokument, ob alle (graphischen) Browser die eigenen Dokumente anzeigen können oder die besonderen Eigenschaften eines einzelnen Produkts es Wert sind, sie einzubinden. Der Minimalstandard ist HTML, Tabellen haben sich mittlerweile durchgesetzt, aber Frames sind nicht überall zu sehen.
Jeder, der WWW-Dokumente erstellt sollte darauf achten, daß sie ohne Bildmaterial zu erkennen bzw. zu verstehen sind. Angesichts der Überlastung der Netzverbindungen laden immer mehr Anwender Bilder gar nicht.
Ein paar Zutaten sollten auf keinen Fall fehlen: Titel und Überschrift, das Datum der letzten Veränderung und wer für die Seite verantwortlich ist. Typischerweise sieht das Grundgerüst einer HTML-Seite wie im folgenden Listing aus:
<html> <head> <title>Vorlesung: Internet - Technologie und Anwendungen</title> </head> <body> <h1>Internet - Technologie und Anwendungen </h1> <h2>Kapitel 6: WWW - Historie und Grundlagen</h2> <p>Letzte Auml;nderung: 17.9.97 von B. Tritsch </p> <!-- Hier folgt individueller HTML-Code --> <p><a href="kap7.htm">Zum nauml;chsten Kapitel</a> </p> <address> For comments or questions about this page, please <a href="mailto:tritsch@zgdv.de">send me email. </a> </address> </body> </html>
Graphische Browser stellen den in <TITLE> ... </TITLE> eingeschlossenen Text im Fensterrahmen dar. Deswegen sollte ein solcher Titel nicht ein längerer Satz, sondern eine möglichst prägnante Beschreibung sein. Suchmaschinen wie Alta Vista heben zudem den Titel einer Seite hervor, daher ist er für all diejenigen wichtig, die im Web unter sinnvollen "Namen" gefunden werden wollen.
Überschriften unterschiedlicher Größe (<H1> bis <H6>) dienen der Gleiderung von Dokumenten. Dasselbe gilt für mehrere Listenarten (<UL>, <OL>, <DL>). Insgesamt gleidern HTML-Tags ein Dokument eher logisch, als Einzelheiten auszuzeichnen. Statt kursive Schrift vorzugeben (<I>), ziehen die Vertreter der reinen Lehre eine Betonung (engl.: emphasis, <EM>) vor.
Im WWW gilt wie im Desktop Publishing: Sparsamkeit in Schriftenvarianten, Beschränkung auf möglichst eine Listenart und nicht alle Überschriften zu verwenden. Dies alles führt zu klarerem Layout.
HTML ist derzeit noch keine Sprache, mit der sich Texte bis ins letzte Zeichen in ihrer Erscheinung festlegen lassen. Dennoch erlauben proprietäre Erweiterungen die Festlegung eines Schrifttyps, einen vertikalen und horizontalen Leerraum oder den Einzug eines Absatzanfangs. Sogar die aktuelle HTML-Version 3.2 macht ein wenig Textdesign möglich: Eine Initiale mit Hilfe von <FONT SIZE=+3>A</FONT> ist schnell erstellt. Allerdings erhöht diese Vorgabe auch den Durchschuß, d.h. den Abstand zwischen Zeilen. Soll außer der Schriftgröße auch die Farbe verändert werden, kann das im selben Tag geschehen:
<FONT SIZE=+3 COLOR="AA0000">
Statt AA0000 könnte für die Farbe jede andere Kombination hexadezimaler RGB-Werte stehen (das Beispiel ist ein mittleres Rot). Bei Modifikationen der Schriftfarben sollte man genau darauf achten, daß Text schwarz auf weiß (oder hellgrau) am besten zu lesen ist, vor allem wenn es mehr als ein paar Worte sind.
Eine weitverbreitete Methode zur Formatierung von Texten sind transparente GIF-Graphiken, wobei die Graphiken oftmals nur ein Pixel groß sind. Ein transparentes Pixel in der richtigen Weise vergrößert ermöglicht beispielsweise eine Einrückung um 15 Pixel
<IMG SRC="1pix.gif" WIDTH=15>
Erst mit Tabellen allerdings ist Textdesign schön, wobei auch die Kleinstdateien (43 Bytes) mit einem tranparenten Pixel verwendet werden. Ein besonders interessantes Beispiel ist eine Tabelle, die auf 100 Prozent Breite des Viewers festgelegt ist. Durch horizontale Dreiteilung und den Einsatz des transparenten Pixels in den beiden äußeren Spalten fließt der Text in einer schmalen Säule, die sich nach der Pixelbreite des Browsers richtet. In einem solchen Fall ist es sinnvoll, in IMG dem Attribut WIDTH einen absoluten Wert zu geben statt einen in Prozent. Dadurch daß das "Bild" sich in einer Tabellenzelle befindet, ginge das Design ins Leere da jede prozentuale Vorgabe sich auf die Zelle bezöge.
Tabellen eignen sich sicherlich gut für Logos und Navigationsleisten im Kopf einer WWW-Seite. Hierbei werden in einige Tabellenzellen GIF-Graphiken gelegt und in andere Texte mit angepaßten Hintergrundfarben. Hierdurch werden große zusammenhängende Graphiken vermieden, die sowohl viel Platz verbrauchen als auch einen hohen Aufwand bei der Pflege benötigen (insbesondere bei Updates der Web-Seiten).
Viele Web-Seiten werden mit aufwendigen Graphiken veredelt. Hierbei ist zu beachten, daß weder zu große Dateien noch zu viele Farben oder gar aufwendige Farbverläufe verwendet werden. Soll der Text die Graphik umfließen, muß letztere rechts oder links ausgerichtet werden: ALIGN=right beispielsweise. Zwei Attribute des IMG-Tags dienen dazu, solche textumflossenen Graphiken mit horizontalem und vertikalem Abstand zu versehen (VSPACE und HSPACE).
Bei all den vorangegangenen Designtips sollte man jedoch nicht den Inhalt vergessen. Eine Studie stellte fest, daß die ersten 24 Zeilen einer Web-Seite keine Verweise auf andere Server enthalten sollten: schließlich will man das Publikum bei sich behalten. Weiterhin sollte sich das Wichtigste einer Web-Seite innerhalb der ersten 300 Pixel in der Vertikalen befinden. Nur interessanter und informativer Inhalt bindet den Betrachter jedoch wirklich, Banalitäten schrecken ihn ab.
Fehler sollten in einer Web-Seite nicht vorkommen, nicht einmal in der Rechtschreibung. Das gilt auch für fremdsprachliche Texte. Niemand ist perfekt, aber wer englischsprachige Seiten zur Verfügung stellen will sollte diese von versierten Korrektoren gegenlesen lassen. Fehler wie beispielsweise ein falscher beim englischen Wort "Informations" sind nicht reputationsfördern.
Ähnliches läßt sich bei veralteten Links vermerken, die ins Leere weisen oder Links, die nicht halten was sie suggerieren. Eine andere Unsitte, die Besucher auf Web-Seiten oftmals stört, sind lange Dokumente, die nur durch die Verwendung von horizontalen und vertikalen Scrollbars lesbar sind. Blinkende Textteile (<BLINK>) sind ebenso zu vermeiden, da sie den Leser immer wieder vom Textinhalt ablenken.
Besondere gestalterische Möglichkeiten werden über Frames eröffnet. Diese unterteilen die Oberfläche eines Browsers in mehrere unabhängige Seiten. Die Benutzerführung kann dadurch ausgefeilter sein. Jedoch ist die Darstellung von Frames oftmals abhängig vom Browser-Hersteller und viele Benutzer lassen sich von Frames verwirren. Dennoch sind sie in vielen aktuellen Web-Seiten zu finden.
Eine Reihe von WWW-Sites dokumentieren die Technik und das Design von Web-Seiten: