Webdesign

von Prof. Jürgen Plate

Interaktion, Sicherheit, Design-Regeln

Interaktion mit dem Benutzer

Hier finden Sie nur kurze Hinweise auf diese Möglichkeiten. Genauere Informationen müssen Sie der Dokumentation des jeweiligen WWW-Servers und der Fachliteratur entnehmen. Es gibt mehrere Möglichkeiten der Interaktion.

Image-Maps (ISMAP, <MAP> und USEMAP)

Image-Maps erlauben die Verzweigung zu bestimmten Informationen durch die Auswahl ("Anklicken") von bestimmten Regionen innerhalb eines Inline-Bildes. Dafür gibt es zwei verschiedene Verfahren:

Server-seitige Image-Maps

Bei Server-seitigen Image-Maps muß die Verarbeitung durch ein auf dem WWW-Server laufendes CGI-Programm erfolgen. Im HTML-File ist eine Kombination aus einem <A HREF>-Befehl für das CGI-Programm und einem <IMG>-Tag für das Bild mit der Angabe "ISMAP" anzugeben. Zum Beispiel: 

<a href="http://host.domain/cgi-bin/mapper">
<img src="image.gif" ismap></a>

Client-seitige Image-Maps

Bei Client-seitigen Image-Maps erfolgt die Verarbeitung durch den Browser auf Grund von entsprechenden Angaben in der HTML-Datei, und es ist kein CGI-Programm notwendig. Diese Möglichkeit ist seit HTML 3.2 vorgesehen und wird von allen neueren Web-Browsern unterstützt. Welche Teile des Bildes den Sprung zu welchem Hyperlink bewirken sollen, wird mit Hilfe von <MAP> festgelegt - entweder in derselben HTML-Datei wie die Verwendung des Bildes oder in einer separaten Datei die gemeinsam mit dem Bild abgespeichert ist.
Im <IMG>- oder <OBJECT>-Tag des Bildes wird dann mit "USEMAP" auf diese Map-Spezifikation verwiesen.
Da nicht alle Benutzer die Darstellung von Bildern eingeschaltet haben und da manche Web-Browser und viele Suchmaschinen solche Image-Maps nicht richtig verarbeiten, muß man bei einer Image-Map zusätzlich ein "normales" Link angeben, das zu einer Liste von Hypertext-Links in Textform führt. Damit wird sichergestellt, daß alle Benutzer und Suchhilfen die betreffenden Informationen erreichen können.

Quelltext des Beispiels: 

<map name="map3">
<area shape=rect coords="0,0,89,15"  href="#oben"  alt="oben">
<area shape=rect coords="0,16,89,31" href="#mitte" alt="mitte">
<area shape=rect coords="0,32,89,47" href="#unten" alt="unten">
</map>
<p>Klicken Sie auf eines der drei Felder 
<a href="#nomap"><img src="map.gif" alt="HIER!" usemap="#map3"></a>

Die Eingabe für Browser ohne Image-Map-Fähigkeiten hat folgenden Aufbau: 

<a name="nomap">Ihr Browser ... </a> 
Sie ... k&ouml;nnen ... nun ... ausw&auml;hlen:
<ul>
<li><a href="#oben">Infos oben</a>
<li><a href="#mitte">Infos mitte</a>
<li><a href="#unten">Infos unten</a>
</ul>

Hier das Ganze zum Ausprobieren:

oben mitte unten

Klicken Sie auf eines der drei Felder HIER!

Je nachdem, wohin Sie in dieses Bild klicken, gelangen Sie zu einer der folgenden vier Stellen (die entsprechende Zeile sitzt an der Oberkante der Seite):

Manche Web-Browser stellen <MAP> nicht als Bild, sondern als Pull-down-Menü mit den in den ALT-Parametern angegebenen Texten dar. Die Angabe dieser Texte mit ALT= in <AREA> ist deshalb zwingend vorgeschrieben.

Das folgende Beispiel zeigt eine Imagemap von Deutschland. Die einzelnen Bundesländer sind als Polygon definiert. Klickt man auf ein Land, wird das dazu passende Link aufgerufen. Hier führen die Links jedoch nirgendwohin.

Baden-Würtenberg Bayern Hamburg Hessen Niedersachsen Österreich Schweiz Rheinland-Pfatz Saarland Nordrhein-Westfalen Thüringen Sachsen-Anhalt Sachsen Brandenburg Meklenburg-Vorpommern Schleswig-Holstein

Im Quelltext sieht das so aus: 

<IMG SRC="de_map.gif" WIDTH=450 HEIGHT=543 BORDER=0 ISMAP USEMAP=#germany></A>
<MAP NAME="germany">
<AREA SHAPE="POLY" COORDS="65,445,73,449,75,447,78,447,80,450,84,449,88,447,91,445,94,446,96,448,98,448,101,447,98,445,97,442,99,439,102,436,106,434,111,435,114,438,115,439,118,440,121,438,123,438,130,442,132,440,136,442,142,443,144,441,154,448,157,442,161,444,164,442,168,443,167,439,165,437,167,435,166,432,166,427,168,419,161,401,167,394,169,395,174,390,174,386,172,382,174,381,177,382,180,381,178,378,179,368,175,362,173,362,170,357,171,355,166,351,165,340,167,339,165,333,163,336,158,336,158,330,155,331,154,330,155,326,152,323,148,324,147,318,137,319,140,321,140,326,135,326,133,331,132,331,129,331,129,334,126,334,122,335,118,341,115,341,115,334,111,334,110,327,109,328,109,332,106,334,102,330,103,338,105,339,104,343,103,345,105,346,101,350,99,358,96,366,92,367,89,373,88,376,83,379,83,382,77,389,76,394,74,398,72,399,72,396,69,396,69,398,59,399,57,395,53,396,53,408,72,405,71,412,67,417,67,421,69,427,67,430,65,445" 
HREF="baden_wuerttemberg.html" ALT="Baden-W&uuml;rtenberg">
<AREA SHAPE="POLY" COORDS="157,447,177,462,181,456,181,447,202,450,209,457,231,444,251,442,250,439,255,434,276,439,285,450,287,439,279,438,282,427,271,413,288,399,293,399,298,395,299,386,304,381,312,385,314,380,312,373,313,371,310,367,308,367,304,362,298,363,278,342,271,341,268,338,254,316,259,306,239,283,235,278,220,281,213,274,212,276,211,287,208,288,205,286,203,283,199,283,195,281,191,283,196,286,194,290,191,291,189,293,183,292,182,284,167,272,158,280,153,281,153,288,146,292,143,292,144,300,138,300,135,297,126,299,127,298,126,306,130,318,128,328,134,325,137,322,134,320,134,316,150,315,149,320,154,318,161,334,165,327,170,353,182,367,184,383,177,386,177,393,170,398,166,397,164,401,170,418,169,436,170,446,157,447" 
HREF="bayern.html" ALT="Bayern">
<AREA SHAPE="POLY" COORDS="150,90,154,97,158,97,161,94,166,98,169,97,163,91,165,85,163,81,150,90" 
HREF="hamburg.html" ALT="Hamburg">
<AREA SHAPE="POLY" COORDS="82,304,94,299,103,318,100,324,106,330,107,325,112,325,113,331,117,332,117,338,120,332,125,331,125,322,126,319,121,300,121,297,130,294,139,295,141,297,141,288,147,288,151,283,151,277,157,278,162,272,162,265,156,267,159,253,161,251,157,248,163,242,167,242,164,238,168,233,158,226,156,220,152,222,153,226,150,227,143,224,143,221,145,218,143,214,147,209,144,207,140,207,138,210,134,215,126,219,125,215,120,215,122,220,120,222,115,223,112,222,108,228,113,226,115,232,113,238,106,239,107,244,99,254,96,253,91,257,93,261,90,264,92,272,88,272,86,274,86,278,91,287,86,291,87,296,87,298,79,298,78,300,82,304" 
HREF="hessen.html" ALT="Hessen">
<AREA SHAPE="POLY" COORDS="63,84,72,84,86,82,91,92,87,94,90,100,97,101,100,94,98,88,110,98,106,82,111,71,120,76,131,73,144,91,150,94,157,101,161,98,167,101,170,99,180,104,182,102,188,107,193,104,206,121,214,120,211,126,206,129,198,127,194,128,192,131,186,131,186,136,192,147,193,155,197,161,194,161,198,169,195,171,197,175,193,178,182,179,179,183,183,190,180,193,184,204,183,208,176,207,173,207,159,219,152,217,149,221,147,222,148,215,150,209,145,204,138,203,140,198,141,192,134,185,128,175,124,165,129,161,128,152,124,154,120,158,113,159,113,151,101,153,96,157,97,162,101,163,101,172,102,174,99,175,95,174,92,178,84,179,89,175,84,170,87,163,83,159,77,159,72,153,69,157,69,160,59,166,52,166,54,160,50,154,40,153,42,145,53,146,55,131,61,121,62,103,52,103,54,92,57,94,58,91,38,89,37,86,50,80,87,74,103,64,108,68,101,77,84,78,63,82,63,84" 
HREF="niedersachsen.html" ALT="Niedersachsen">
<AREA SHAPE="POLY" COORDS="147,450,153,453,155,450,167,458,167,463,172,461,170,468,176,467,184,458,185,452,193,451,196,454,199,452,204,460,217,459,223,452,229,452,232,447,239,448,241,446,253,446,253,440,257,441,261,440,265,444,273,440,277,443,276,446,285,453,289,450,289,445,291,439,287,435,283,435,286,427,275,413,289,402,296,402,302,396,302,385,313,388,316,383,324,386,341,382,354,361,359,360,366,364,369,363,389,375,409,377,418,372,423,374,426,372,424,377,425,395,425,399,430,404,439,415,446,416,447,421,436,430,425,433,426,454,422,460,423,468,419,473,420,476,413,482,398,482,393,488,377,491,371,497,367,496,362,503,358,503,352,509,345,511,337,512,332,507,323,509,314,503,305,505,292,499,283,505,278,500,265,494,266,486,257,480,254,473,235,477,232,473,221,473,213,480,180,485,169,486,155,475,146,478,142,473,144,464,146,461,145,458,147,450" 
HREF="osterreich.html" ALT="&Ouml;sterreich">
<AREA SHAPE="POLY" COORDS="64,448,69,452,75,452,77,450,77,452,86,452,92,448,98,452,104,449,107,445,105,444,101,443,104,439,108,438,110,440,110,442,113,445,116,443,117,446,124,444,124,441,129,446,134,443,136,446,142,445,144,449,142,457,144,463,138,471,140,478,148,480,153,479,162,485,166,489,179,488,181,502,172,507,173,510,164,517,152,519,144,521,137,517,134,518,129,526,128,531,129,537,123,541,118,536,109,528,98,520,94,522,80,535,65,536,46,539,38,535,38,531,32,526,30,520,28,518,22,520,20,515,15,515,10,524,4,521,7,515,19,505,23,499,25,491,28,486,28,481,37,470,43,461,47,461,50,455,60,454,64,448" 
HREF="schweiz.html" ALT="Schweiz">
<AREA SHAPE="POLY" COORDS="59,351,65,352,66,357,73,359,82,359,92,364,98,351,101,346,102,339,97,323,100,317,92,303,81,306,73,299,78,296,86,297,85,292,81,290,88,285,82,277,85,269,89,269,88,263,84,261,82,254,77,248,77,253,73,258,62,262,61,266,52,268,44,271,43,276,40,276,38,274,40,282,34,283,30,281,21,285,15,289,6,289,5,298,13,297,15,305,20,310,26,312,28,313,27,321,21,328,29,330,45,323,57,328,58,336,58,340,62,344,73,344,97,344,96,351,59,351" 
HREF="rheinland_pfalz.html" ALT="Rheinland-Pfatz">
<AREA SHAPE="POLY" COORDS="22,331,30,333,45,326,55,331,56,334,57,342,59,344,96,344,95,349,55,350,57,354,48,355,42,349,38,349,36,353,28,343,10,343,11,333,22,331"
HREF="saarland.html" ALT="Saarland">
<AREA SHAPE="POLY" COORDS="52,170,62,168,73,158,84,164,82,174,85,176,81,180,86,183,104,177,108,172,101,159,110,153,111,162,122,161,125,155,125,161,119,167,124,178,138,195,136,207,128,216,123,212,118,214,119,220,110,221,105,226,107,231,111,229,111,235,103,237,103,243,99,250,94,250,89,256,89,260,85,255,79,245,75,245,72,256,61,260,59,264,56,264,41,270,41,274,37,272,37,281,29,278,24,280,23,274,16,269,21,265,10,254,15,246,6,239,19,233,17,228,14,229,20,220,20,209,11,193,19,191,27,193,40,189,45,184,39,178,52,170" 
HREF="nordrhein_westfalen.html" ALT="Nordrhein-Westfalen">
<AREA SHAPE="POLY" COORDS="164,269,170,269,186,283,187,289,189,289,189,287,193,288,187,283,194,278,201,280,206,280,207,284,209,284,208,274,214,269,218,270,217,275,221,278,231,276,233,277,236,272,231,269,238,261,240,266,242,264,242,262,248,261,245,257,246,252,254,246,260,245,259,242,256,242,254,238,247,236,249,241,247,245,237,245,232,240,227,240,223,236,217,237,215,235,215,232,211,230,214,225,211,220,195,219,192,206,187,205,186,209,180,211,176,209,174,214,159,221,161,226,164,226,165,230,171,231,168,240,170,241,169,245,164,245,163,254,160,255,158,265,161,261,165,263,164,269" 
HREF="thueringen.html" ALT="Th&uuml;ringen">
<AREA SHAPE="POLY" COORDS="188,203,197,205,198,217,214,218,217,224,215,229,218,231,218,235,224,235,229,238,233,237,239,242,245,242,247,238,242,230,240,222,242,207,261,201,265,199,274,199,278,195,276,189,260,182,257,184,252,181,246,179,241,172,248,172,250,168,247,165,243,165,244,152,242,152,238,151,238,143,240,141,239,134,241,131,228,130,219,123,216,123,215,127,206,131,198,130,195,132,188,134,194,145,196,146,195,150,198,153,195,155,201,160,198,163,201,170,200,172,200,176,197,178,196,181,186,182,184,183,186,190,183,194,188,203" 
HREF="sachsen_anhalt.html" ALT="Sachsen-Anhalt">
<AREA SHAPE="POLY" COORDS="245,209,261,204,267,202,276,204,280,209,279,215,282,218,287,214,290,214,295,217,312,216,315,210,316,206,321,206,323,208,330,203,336,204,345,208,345,214,349,219,343,245,338,244,337,239,332,232,324,233,321,235,321,238,326,242,312,249,307,253,295,255,293,261,291,258,284,265,283,268,276,268,275,275,269,272,257,276,250,288,246,280,241,281,237,275,238,272,236,268,237,266,239,270,251,263,251,259,248,258,250,253,258,247,262,247,263,244,259,240,253,235,247,234,243,224,245,209" 
HREF="berlin.html" ALT="Sachsen">
<AREA SHAPE="POLY" COORDS="207,116,217,115,217,110,220,109,223,109,233,103,234,101,241,102,248,107,255,107,260,110,267,110,273,105,276,108,278,103,281,104,296,87,300,93,311,93,306,101,312,103,317,97,318,102,315,106,316,113,308,120,308,129,328,142,327,149,326,152,329,160,333,162,332,169,336,173,331,185,330,187,338,199,333,201,323,205,316,203,311,209,311,213,297,215,289,211,282,215,281,211,281,206,277,201,280,197,278,187,259,179,256,180,250,178,245,173,250,171,250,165,244,163,246,151,241,149,242,130,239,128,229,128,226,124,217,118,207,116" 
HREF="brandenburg.html" ALT="Brandenburg">
<AREA SHAPE="POLY" COORDS="185,100,189,103,194,100,205,114,214,113,215,108,220,105,222,107,231,102,232,98,245,101,247,104,257,105,259,107,267,107,271,103,281,101,295,84,301,91,311,90,308,101,317,96,313,78,318,78,318,73,312,73,310,70,306,72,295,67,309,64,291,46,281,51,274,45,281,39,289,42,291,38,283,32,287,24,284,22,277,23,277,18,273,17,269,23,267,22,263,33,250,33,245,31,240,43,224,53,218,52,207,62,207,64,200,61,194,62,190,66,183,72,181,79,187,79,190,82,193,82,192,88,187,90,217,90,216,100,200,98,186,97,181,98,182,100,185,100" 
HREF="meklenburg.html" ALT="Meklenburg-Vorpommern">
<AREA SHAPE="POLY" COORDS="83,51,91,49,117,50,118,47,112,48,108,44,110,39,96,23,97,7,101,0,105,0,102,5,104,11,122,9,132,12,133,14,136,12,144,11,153,16,154,14,159,23,160,31,153,35,164,33,165,38,169,35,184,43,192,38,194,30,201,30,205,38,199,39,196,44,197,51,189,58,187,58,186,63,190,63,182,72,180,79,186,79,189,83,192,83,189,88,167,87,166,83,166,78,163,79,148,89,143,84,139,76,134,70,124,69,122,69,118,62,124,62,124,58,89,58,82,54,83,51" 
HREF="schleswig_holstein.html" ALT="Schleswig-Holstein">
<AREA SHAPE="default" NOHREF>
</MAP>

Formulare und CGI-Programme am Server (Common Gateway Interface)

Ein CGI-Programm ist ein Computer-Programm, das auf dem WWW-Server läuft und die Ausgabe an den Client sendet. Die Ausgabe besteht in der Regel aus einem HTML-Dokument. Im Gegensatz zu HTML-Dateien, die einen festen Inhalt besitzen, kann man damit Informationen dynamisch generieren. So lassen sich Infos übermitteln, die sich laufend ändern oder die von Benutzer-Eingaben abhängen.

Der Aufruf des CGI-Programms erfolgt in einem Hypertext-Link oder einem Formular mit einem URL der Form:

http://host.domain/cgi-directory/filename

oder

http://host.domain/cgi-directory/filename?parameterliste

Beispiel: Ein einfaches UNIX-Shell-Script, das Datum und Uhrzeit anzeigt.

  #!/bin/sh
  echo "Content-Type: text/html"
  echo ""
  echo "<html><head><title>Datum</title></head>"
  echo "<body><p>Heute ist "
  date 
  echo "</body></html>"

CGI-Prozeduren können in verschiedenen Sprachen geschrieben werden (Shell-Scripts, Perl-Scripts, C-Programme u.a.). Die Detail-Informationen dazu finden Sie in der Dokumentation des jeweiligen WWW-Servers. Wichtig sind die beiden ersten Zeilen, die Zeile Content-Type: text/html und die darauffolgende Leerzeile, welche die Antwort des CGI-Programms von einer normalen HTML-Datei unterscheiden.

Zugriffe zählen

Eigentümer einer Website möchten oft wissen, wie oft Ihre Informationen von Interessenten in aller Welt gelesen werden. Die schlechteste Möglichkeit ist ein Counter auf der Homepage selbst, denn der verhindert, daß die Seiten in einem Cache gespeichert werden und so dem Surfer schnell angezeigt werden können. Besser ist da die Veröffentlichung einer Server-Statistik.

Die meisten WWW-Server führen eine Log-Datei, in der alle Zugriffe auf die WWW-Seiten protokolliert werden, und Sie können mit einem einfachen UNIX-Shell-Script zählen, wie oft Ihr Filename darin vorkommt. Zum Beispiel: 

#!/bin/sh
url="$1"
logfile=/home/infosys/log/access_log
n=`grep -i "$url" $logfile | wc -l`
echo "$n Zugriffe auf $url"

Außerdem finden Sie im Log-File auch die Information, von welchen Clients auf Ihre Datei zugegriffen wurde (aber im allgemeinen nicht, von welchen Personen). Damit zählen Sie aber nur, wie oft die Datei angefordert, und nicht, wie oft die Information tatsächlich gelesen wurde. Schuld daran sind die Cache-Speicher, die zur Entlastung der Netzverbindungen notwendig sind, denn die meisten Browser haben einen lokalen Cache-Speicher und viele Institutionen verwenden Cache-Server ('Proxy-Cache'), die dann für alle Zugriffe aus diesem Bereich wirken.

Wie oft eine Datei tatsächlich gelesen wurde, ist im allgemeinen also wesentlich mehr als die am WWW-Server gezählte Zahl der Datei-Übertragungen.

Formulare

Der Inhalt von HTML-Dateien wird jeweils vom WWW-Server zum Benutzer am Client gesendet. Mit Hilfe von Formularen, die in HTML-Dateien stehen, können die Benutzer bestimmte Informationen am Client eingeben und an den WWW-Server senden. Diese Daten werden meistens von einem auf diesem Server laufenden CGI-Programm verarbeitet. Zum Beispiel: 

<FORM METHOD="GET" ACTION="http://host.domain/cgi-bin/testmich">
Anmeldung zur Weihnachtsfeier des Fachbereichs am 18. Dezember 
<P>
<INPUT TYPE="radio" NAME="kommt" VALUE="ja" CHECKED> Ich komme.<br>
<INPUT TYPE="radio" NAME="kommt" VALUE="nein"> Ich komme nicht.
<P>
Name: <INPUT NAME="Name" SIZE="40" MAXLENGTH="60"><BR>
Telefonnummer: <INPUT NAME="tel" SIZE="20" MAXLENGTH="20">
<P>
<INPUT TYPE="submit" VALUE="Weg damit">
</FORM>

bewirkt eine Darstellung wie

Anmeldung zur Weihnachtsfeier des Fachbereichs am 18. Dezember

Ich komme.
Ich komme nicht.

Name:

Telefonnummer:

Anmerkung: Das in diesem Beispiel verwendete CGI-Programm gibt es nicht (schon, weil es den Rechner nicht gibt).

Eine 'echte' Anmeldungs-Prozedur würde die Zu- und Absagen mit Name und Telefonnummer in einer Datenbank speichern und dann die Bestätigung an den Client senden.

Das Senden einer solchen Antwort ist immer notwendig, denn der Benutzer muß auf seinem Bildschirm erkennen können, daß das Anklicken des Submit-Knopfes funktioniert hat. Im einfachsten Fall genügt eine kurze Meldung, daß die Eingabe verarbeitet wird, und ein Hinweis, daß der Benutzer mit der Back-Taste oder dem Back-Befehl seines Browsers zur vorherigen Information zurückkehren und weiterarbeiten kann.

Für genauere Informationen über die vom Server unterstützten Übertragungs-Methoden und die Übergabe der Eingabedaten an das CGI-Programm ist ein Studium der entsprechenden Fachliteratur nötig.
Als Methode können GET oder POST verwendet werden.

Die CGI-Programme müssen so geschrieben werden, daß Ihre Ausführung kein Sicherheitsrisiko für den Server-Computer darstellen kann, egal was für eventuell seltsame Eingaben von den Benutzern kommen. Inzwischen gibt es auch diverse fertige CGI-Programme zum Einsatz auf dem Server.

Nun etwas mehr Info zum Aufbau von Formularen. Zur Erinnerung: Formulare werden durch die Tags <FORM> ... </FORM> begrenzt, wobei über die Attribute METHOD und ACTION die Art der Verarbeitung und das Bearbeitungsprogramm auf dem Server spezifiziert werden:

<FORM METHOD=POST ACTION="URL des Bearbeitungsprogramms" >

Innerhalb eines Formulars gibt es neben drei Eingabe-Tags, INPUT, SELECT und TEXTAREA.

Das INPUT-Widget <INPUT ...Attribute ...>

Dies ist das häufigste Widget und es hat zahlreiche Attribute:
TYPE="...."
Typ des Widgets. Als Typangaben sind möglich: CHECKBOX, HIDDEN, PASSWORD, RADIO, RESET, SUBMIT, TEXT, IMAGE.
NAME="...."
Name des Eingabefeldes. Dieser Name wird im Datenstrom zurückgegeben.
VALUE="...."
Defaultwert (TEXT, HIDDEN), Wert des Menüpunkts (CHECKBOX, RADIO), Beschriftung des Feldes (RESET, SUBMIT).
SRC="...."
Quelldatei für einen IMAGE-Button.
CHECKED
Defaulteinstellung bei CHECKBOX und RADIO.
SIZE="...."
Feldgröße (Anzahl Zeichen) beim TEXT-Widget.
MAXLENGTH="...."
Maximallänge der Eingabe beim TEXT-Widget.
ALIGN="...."
Position des Textes neben einem Bild beim IMAGE-Tag.

Die folgenden Beispiele sollen die Anwendung des INPUT-Tags etwas erläutern. Das Passwort-Feld unterscheidet sich vom Textfeld nur dadurch, daß die Eingabezeichen als '*' geechot werden. Grundsätzlich hat jedes Feld einen Namen, der es dem Programm oder Script auf dem Server erlaubt, das Eingabefeld zu identifizieren. Bei RADIO-Buttons kann ein Wert aus dem Angebot ausgewählt werden, bei einer CHECKBOX deren mehrere.

Das TEXTAREA-Widget <TEXTAREA> .... </TEXTAREA>

erlaubt die Definition eines rechteckigen Eingabefeldes. Die Größe des Feldes auf dem Bildschirm wird durch die Attribute ROWS und COLS festgelegt; die Eingabe selbst kann umfangreicher sein. Zwischen <TEXTAREA> und </TEXTAREA> kann eine Textvorgabe stehen. Es gibt drei Attribute:
NAME="...."
Name des Eingabefeldes (wie bei INPUT).
ROWS="...."
Anzahl Zeilen des Feldes
COLS="...."
Anzahl Spalten des Eingabefeldes

Das SELECT-Widget <SELECT> .... </SELECT>

Selektionsfelder benötigen weniger Platz als Checkboxes oder Radiobuttons; sie gleichen Pull-Down-Menüs. Es gibt auch nur drei Attribute:
NAME="...."
Name des Feldes wie schon zuvor.
SIZE="...."
Anzahl der dargestellten Elemente. MULTIPLE erlaubt Mehrfachauswahlen. Fehlt die SIZE-Angabe, stellt sich das Widget als Pull-Down-Menü dar, von dem zunächst nur ein Menüpunkt sichtbar ist und das man zunächst öffnen muß (Pop-Up-Menü). Im anderen Fall zeigt sich das Menü als Scrollbar.
OPTION
Ein Menüfeld wird über das OPION-Tag beschrieben, wobei der voreingestellte Menüpunkt über das SELECTED-Attribut ausgewählt wird. Beispiel:
<SELECT NAME="name" SIZE="4">
  <OPTION SELECTED>Feld 1
  <OPTION>Feld 2
  <OPTION>Feld 3
  <OPTION>Feld 4
</SELECTED>


<SELECT NAME="name" SIZE="1">
  <OPTION SELECTED>Feld 1
  <OPTION>Feld 2
  <OPTION>Feld 3
  <OPTION>Feld 4
</SELECTED>

Der Image-Button

Ein Image-Button erfüllt zwei Aufgaben: Er übernimmt die Aufgabe des SUBMIT-Feldes und übermittelt zusätzlich die Koordinaten der Stelle, auf die im Bild geklickt wurde.
Beispiel:
<INPUT NAME="name" TYPE="image" SRC=bilder/Sender.gif" ALIGN="top">

Mailto Deluxe

Man kann mit einem Link der Form 

<a href="mailto:account@domain.tld">Mail senden</a>

einen Link erzeugen, mit der eine Mail abgesetzt bzw. der Editor gestartet wird, um eine Mail zu kreieren. Diese FOrm ist jedoch recht spartanisch, denn der Absender muß Betreff, Cc: usw. alles selbst eingeben. Es lassen sich jedoch für die einzelnen Felder auch Werte voreinstellen. Die wichtigsten Felder sind dabei:

subject
Betreff-Zeile
cc
Verteiler, Kopie (carbon copy)
bcc
Blinder Verteiler (blind carbon copy)
body
Nachrichtentext

Beispiele:

<a href=mailto:account@domain.tld?subject=Webseiten-Mail">E-Mail mir!</a>

erzeugt eine Mail mit Betreff(-vorgabe) "Webseiten-Mail"

<a href="mailto:account@domain.tld?body=Hier eintragen">E-Mail mir!</a>

erzeugt entsprechend eine Mail, die bereits etwas im Text stehen hat.

Natürlich läßt sich beides kombinieren. Die einzelnen Felder werden durch ein Ampersand (&) voneinander getrennt.

<a href="mailto:account@domain.tld?body=Hier+eintragen& cc=account2@domain2.tld&subject=Wichtige Anfrage">E-Mail mir!</a>

Die Nachricht geht an account@domain.tld, als Kopie an account2@domain2.tld und hat die Betreffsvorgabe "Wichtige Anfrage". Im Text steht anfänglich "Hier eintragen!".

Na, wollen Sie das mal testen?

Dies läßt sich überall dort ideal einsetzen, wo Programme angeschrieben werden, das berühmte 'subscribe' oder 'join' and einen Mailinglisten-Server, der per E-Mail gesteuert wird.

Client- und Servertechnik

Definitionen

Server

Server (Verkäufer, Bedienender) sind die Computer, auf denen die Informationen gespeichert sind. WWW-Server laufen meistens auf Unix-Rechnern und werden auch als HTTP-Dämonen bezeichnet. Es gibt mehrere solche Software-Produkte, sowohl public domain als auch kommerziell.

Client

Clients (Kunden) sind die Rechner, die Dienste in Anspruch nehmen. Client-Programme sind die Programme, mit denen die Benutzer von ihren eigenen Rechnern aus auf die Informationen, die auf den Servern gespeichert sind, zugreifen.

Return-Codes eines WWW-Servers

Ein WWW-Server gibt auf jede Anfrag eine Status-Antwort zurück. Sie zeigt die Version des Servers an und gibt einen Ergebniscode zurück. Manchmal wird auch noch eine Meldung angehängt. Die erste Zeile sieht typischerweise so aus:

HTTP/1.0 200 OK

wobei HTTP/1.0 die HTTP-Version ist, 200 ist ein Fehlercode und OK die zugehörige Meldung. Es gibt natürlich viele andere Codes.

Erfolgsmeldungen

Rückmeldungen im Bereich 2xx melden Erfolg. Der Body - sofern vorhanden - ist das Objekt, das die Anfrage zurückgibt. Der Body muß im MIME-Format vorliegen. Wichtige Codes sind:
200 OK
Die Anforderung war erfolgreich
201 Created
Antwort auf den POST-Befehl
202 Accepted
Anforderung wird bearbeitet (noch nicht abgeschlossen)
203 Partial Information
Antwort auf den GET-Befehl.
204 No Response
Anforderung erhalten; es gibt keine Rückinfo, die zu senden wäre.

Umleitungen

Rückmeldungen im Bereich 3xx weisen auf Aktionen hin, die der Client (normalerweise Automatisch) ausführen muß, um eine anforderung zu erfüllen.
301 Moved
Den angeforderten Daten wurde auf Dauer eine neue URL zugewiesen. Die Antwort enthält eine Headerzeile der Form URL:neue url.
302 Temporarily_Moved
Den angeforderten Daten wurde zeitweise eine neue URL zugewiesen. Die Antwort enthält eine Headerzeile der Form URL:neue url.
303 Method
Entweder eine andere Netzwerkadresse oder eine andere Methode als GET verwenden. Im Body sind weitere Infos zu den Parametern.
304 Not_Modified
Antwort auf bedingte GET-Anweisung, wenn das Dokument unverändert ist.

Client-Fehler

Rückmeldungen im Bereich 4xx weisen auf scheinbare oder echte Fehler beim Client hin. Der Body kann ein HTML-Dokument enthalten, das den Fehler näher beschreibt.
400 Bad Request
Anforderung hat falsche Sytax oder kann nicht bedient werden.
401 Unauthorized
Unzulässige Zugriffsberechtigung (falscher Header?).
402 Payment Required
Ungültiges Verrechnungsschema.
403 Vorbidden
Anforderung verboten.
404 Not Found
Der Server hat nichts gefunden, was der angegebenen URL entspricht (Tippfehler? Seite gelöscht?)

Server-Fehler

Rückmeldungen im Bereich 5xx weisen auf Fehler beim Server. Der Body kann ein HTML-Dokument enthalten, das den Fehler näher beschreibt.
500 Internal Error
Interner Serverfehler.
501 Not Implemented
Anforderung wird nicht unterstützt.
502 Bad Gateway
Ungültige Antwort von Gateway oder einem anderen Server.
503 Service Unavailable
Server Überlaset oder gesperrt.
504 Gateway Timeout
Gateway (z. B. Datenbank) antwortet nicht.

Cookies

Cookies sind kleine Informationseinheiten, die beim Besuch einer Wehsite zunächst im Arbeitsspeicher des heimischen Computers gespeichert werden. Unter Umständen werden diese Daten nach Verlassen des Wehservers in Form einer Textdatei auf die lokale Festplatte geschriehen.

Ein Cookie besteht aus einem Namen, einem Wert (Zeichenkette) und einem URL. Zudem besitzt ein Cookie eine Lebensdauer. Wird der Ausflug ins Netz beendet und der Browser geschlossen, werden alle Cookies, deren Lebensdauer noch nicht abgelaufen ist, in einer Datei gespeichert. Man spricht dann von 'persistenten Cookies'. Zukünftig läßt sich dann mühelos verfolgen, wie oft genau dieser Anwender wiederkommt und was er tut.

Ursprünglich wurden von Netscape die Cookies zur Erleichterung für den Anwender entwickelt. Sie sollten persönliche Informationen enthalten, die der Anwender beim nächsten Besuch eines Online-Angebots nicht mehr eingeben mußte, z. B. für den Zugriff auf Angebote, die eine Zugangskennung erfordern. Eine andere Anwendung wäre ein 'Einkaufskorb'. Da jeder Seitenabruf einen abgeschlossenen Kommunikationsvorgang darstellt, kann der Server nicht speichern, welche Waren ein Kunde schon in seinen Korb gelegt hat. Cookies bieten hier die Möglichkeit den Inhalt des Einkaufskorbes beim Kunden zu speichern, bis die abschließende Bestellung durch eine Bestätigung erfolgt. Normalerweise lassen sich Cookies auch keiner spezifischen Identitäten zuordnen, sofern der Besucher nicht woanders seine Identität preisgibt.

Unternehmen können mit Hilfe von Cookies Abrufprofile erstellen z. B. für verläßliche Abrufprofile für Reichweitenuntersuchungen. Schließlich will man wissen, welche Seiten wie oft abgerufen werden. Daraus lassen sich u. a. Schlußfolgerungen für die weitere Gestaltung einer Website ziehen. Trotz zahlreicher Ansätze gibt es bislang noch kein genormtes Verfahren zur Bildung von Abrufprofilen. Grundsätzlich besteht die Möglichkeit zur Bildung von Abrufprofilen jedoch auch ohne Cookies - durch die Auswertung von Logbüchern, z. B. mit entsprechenden Monitoring-Tools.

Problematisch wird es, wenn Cookies mit langer Lebensdauer eingesetzt werden. Durch persistente Cookies ist es möglich, einen Benutzer über mehrere Sessions hinweg zu identifizieren. Dadurch erhöht sich die Informationsmenge und die Zuordnung einer Personenidentität vereinfacht sich. Das ist ganz ohne Cookies nicht möglich. Mittlerweile gibt es eine Reihe von Shareware-Tools, mit denen sich Cookies auf dem Computer identifizieren und löschen lassen. Normalerweise befindet sich im Verzeichnisbaum des Browsers irgendwo eine Datei namens 'cookies.txt'. Auf UNIX-Systemen genügt es, die Leseberechtigung der Datei wegzunehmen. Auf Windows-Rechnern kann man den Inhalt der Datei löschen und sie dann auf 'Read-Only' zu setzen. Letztendlich sind Cookies aber harmlos.

Anbieter, die in Ihrem WWW-Angebot Cookies verwenden, sollten einfach vorher auf deren Anwendung und den Zweck hinweisen. Dann weiß nämlich der Websurfer woran er ist und wird auch weniger Vorbehalte gegen die Cookies haben.

Weitere Informationen über Cookies findet man unter

Die Datei robots.txt

Wieviele Betreiber einer Internetpräsentation haben sich beim Studium Ihrer Serverlogbücher bestimmt schon gefragt, warum in regelmäßigen Abständen eine Datei namens robots.txt abgerufen wird.

Wen interessiert diese Datei? Die Datei wird von Suchmachinen gesucht die Spider oder Crawler benutzen. Suchmaschinen die, nachdem Ihr Server einmal angemeldet, in regelmauml;szlig;igen Abständen Ihren Server aufsuchen und nach eventüllen Veränderungen und neün Seiten und Verzeichnissen auf Ihrem Server suchen.

Der 'robots exclusion standard' ist ein Quasistandard, der entwickelt wurde, um dem Serverbetreiber die Möglichkeit zu geben, ausgewählte Bereiche des Servers für die Spider der Suchmaschinen zu sperren. Durch Eintragungen in der Datei robots.txt können Sie also Verzeichnisse angeben, die nicht in Suchmaschinen automatisch aufgenommen werden sollen.

Wie ist robots.txt aufgebaut?

# Bemerkung
User-agent: *
Disallw:/test

#
Hinter diesen Zeichen können Sie Bemerkungen hinterlassen, die jedoch vom Spider ignoriert werden. Wenn Sie einem bestimmten Spider etwas mitteilen möchten, so kouml;nnen Sie in der User-agent-Zeile eine Bemerkung hinterlassen.

User-agent:
* Ein Stern bedeutet, daß die Angaben für alle Spider gelten.

Disallow:/Verzeichnis
In diese Zeile tragen Sie die Verzeichnisse ein, die nicht aufgesucht werden sollen (Im obigen Beispiel das Verzeichnis test).

Wichtig ist, daß sie die Datei in Ihrem Server-Hauptverzeichnis hinterlegen und nicht in dem betreffenden Unterverzeichnis. Wenn Sie keine robots.txt-Datei auf Ihrem Server hinterlegt haben, werden alle Verzeichnisse von den Spidern besucht.

Geschützte Bereiche

Bei WWW-Servern, die unter UNIX laufen wird ein Feature des Betriebssystems genutzt, das es erlaubt, das Server-Verzeichnis abzuschotten. Dieser Systemaufruf heißt chroot() und mancht das Verzeichnis, in dem der Server seine Daten hat, für alle Client-Anfragen zum Wurzelverzeichnis. Es existiert so aus Sicht des Clients nur dieses Verzeichnis mit seinen Unterverzeichnissen. Der Zugriff auf wichtige Systemdateien ist daher unmöglich.

Des weiteren erlauben die Server, bestimmte Datenverzeichnisse nur für bestimmte Rechner freizugeben oder Verzeichnisse durch Benutzerkennung und Psßwort zu schützen. Dies geschieht entweder in der Serverkonfiguration oder über die Datei .htaccess in einem beliebigen Verzeichnis. Alle Dateien innerhalb und unterhalb dieses Verzeichnisses sind dann geschützt.

Wie .htaccess funktioniert

Der (Lese-)Zugriff auf alle Dateien in einem Verzeichnisbaum wird individuell kontrolliert durch eine Datei bestimmten Namens (hier ".htaccess") mit bestimmten Inhalten. Sie muß einen Authentifizierungsnamen enthalten (AuthName "abc xyz ...") sowie eine globale Zugriffsregel und/oder eine Liste der zugriffsberechtigten Benutzernamen.

Um solche geschützte Verzeichnisse einzurichten, gehen Sie folgendermaßen vor: Erstellen Sie in dem Verzeichnis, welches Sie mit einem Paßwort schützen wollen, eine Datei namens .htaccess mit folgendem Inhalt: 

 
AuthUserFile /pfad/zu/einer/passwortdatei
AuthGroupFile /dev/null
AuthName "wieimmerdasheissensoll"
AuthType Basic
<Limit GET POST PUT>
  require user webmaster
</Limit>

Bitte ersetzen Sie /pfad/zu/.htpasswd durch einen realen Verzeichnispfad, in welchem sich die Datei .htpasswd mit den Userdaten befindet. Beim Authentisierungstyp (AuthType) gibt es derzeit nur den Typ "Basic".

"wieimmerdasheissensoll" können Sie durch eine kurze Nachricht ersetzen, die in der User-Authentifizierungs-Pop-Up Box erscheint (String mit Leerzeichen in Gänsefüßchen setzen!).
Das Verzeichnis ist jetzt nur für die Person freigegeben, die als Benutzernamen webmaster eingibt. Nun müssen Sie noch ein Paßwort für den Benutzer webmaster erstellen. Wie das geht, erfahren Sie weiter unten.
Jetzt kann auf das Verzeichnis nur noch mit dem Usernamen webmaster und dem eingegebenen Paßwort zugegriffen werden.
Man kann die Sperre aber auch nur von der IP-Adresse des Clients abhängen lassen. Zunächst machen wir mal ganz zu: 

 
AuthUserFile /pfad/zu/.htpasswd
AuthName "wieimmerdasheissensoll"
order deny,allow
deny from all

Jetzt öffnen wir für alle Rechner des C-Netzes 192.168.34.0: 

 
AuthUserFile /pfad/zu/.htpasswd
AuthName "wieimmerdasheissensoll" 
order deny,allow
deny from all
allow from 192.168.34.

Hier darf niemand zugreifen, wenn der Name "nobody" nicht in der Paßwort-Datei definiert ist: 

 
AuthUserFile /pfad/zu/.htpasswd
AuthName "wieimmerdasheissensoll"
order deny,allow
deny from all
allow from 192.168.34.
require user nobody

Möchten Sie dagegen einigen Benutzern den Zugriff auf das Verzeichnis ermöglichen, so gehen Sie bitte wie folgt vor. Erstellen Sie mit dem Programmhtpasswd weitere Benutzer. Nun erstellen Sie in dem zu schützenden Verzeichnis eine Datei namens .htgroup mit folgendem Inhalt: 

 
logins: webmaster benutzer2 benutzer3

Geben Sie hier einen beliebigen Gruppennamen, gefolgt von einem Doppelpunkt ein, und listen Sie alle Benutzer durch ein Leerzeichen voneinander getrennt dahinter auf, die Zugriff auf das Verzeichnis erhalten sollen. Nun müssen Sie noch die .htaccess in dem entsprechenden Verzeichnis wie folgt anpassen: 

 
AuthUserFile /pfad/zu/.htpasswd
AuthGroupFile /pfad/zu/.htgroup
AuthName "wieimmerdasheissensoll"
AuthType Basic
<Limit GET>
  require group logins
</Limit>

Wollen Sie einen einzelnen Benutzer entfernen, so löschen Sie seinen Namen einfach aus der Auflistung in der Datei .htgroup und gegebenenfalls auch aus der Datei .htpasswd.

Möchten Sie hingegen vielen Benutzern den Zugriff auf das Verzeichnis ermöglichen, so ist die doppelte Eintragung in .htpasswd und .htgroup etwas lästig. Gehen Sie bitte wie folgt vor. Erstellen Sie mit htpasswd weitere Benutzer. Nun müssen Sie noch die .htaccess in dem entsprechenden Verzeichnis wie folgt anpassen: 

AuthType Basic
AuthName Sicherheit
AuthUserFile /opt/www/htdocs/geheim/.htpasswd
AuthGroupFile /dev/null
<Limit GET>
require valid-user
</Limit>

Wollen Sie den Schutz des Verzeichnisses aufheben, löschen Sie einfach .htaccess, .htpasswd und .htgroup in den entsprechenden Verzeichnissen. Wollen Sie dagegen nur einen einzelnen Benutzer entfernen, so löschen Sie seinen Namen einfach aus der Auflistung in der Datei .htpasswd.

Paßwort-Datei

Mit den .htaccess-Dateien sind lediglich Strukturen definiert worden. Ohne den Eintrag von Benutzernamen und Paßwörtern in die Paßwort-Datei kann noch kein einziger Benutzer zugreifen. Entsprechende Eintragungen werden mit dem Programm htpasswd durchgeführt: 

 
htpasswd [-c] passwordfile username

Nun müssen Sie zweimal das Paßwort für den Benutzer "webmaster" eingeben.
Wird der Parameter "-c"eingegeben, erzeugt das Programm eine neue Paßwortdatei. Wenn schon ein entsprechender Benutzer existiert, wird das Paßwort geändert.
Benutzernamen und Paßwörter sind frei wählbare Strings; sie haben nichts mit den User-IDs der Benutzerverwaltung unter UNIX zu tun -- und sie sollten es auch nicht!
Das Paßwort wird verschlüsselt abgelegt, wie man das von den UNIX-Paßwort-Dateien /etc/passwd bzw. /etc/shadow kennt. Die Verschlüsselung erfolgt jedoch nach einem eigenen Verfahren. Beispiel für eine Paßwort-Datei: 

 
boss:IN3WY1lATStaY
schmidt:INQaGJBu4yljQ
meier:INqq3xgT4zpp6
huber:INT.EAmojNwN6

Mit dem folgenden Perl-Programmstück kann man auch einen Eintrag in der Passwortdatei erzeugen: 

 
# Passwort basteln aus $name (Name) und $passwd (Passwort)
# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Der Name der Psswortdatei steht in der Variablen $PASS
#
# Beim Namen:
# - Umlaute konvertieren
# - alles weg, was nicht Buchstabe ist
# - alles in Kleinbuchstaben umwandeln

$temp = $name;
$temp =~ s/ä/ae/g;
$temp =~ s/ö/oe/g;
$temp =~ s/ü/ue/g;
$temp =~ s/Ä/ae/g;
$temp =~ s/Ö/oe/g;
$temp =~ s/Ü/ue/g;
$temp =~ s/ß/ss/g;
$temp =~ tr/a-zA-Z//cd;  
$temp =~ tr/A-Z/a-z/;         

$namlen = length $temp;
$newpass = crypt($password,substr($password,0,2));

open DAT, ">>"$PASS || die "Fehler \"$!\"beim \Öffnen der Passwortdatei!\n";
print DAT $newuid, ":", $newpass, "\n";
close DAT;

Testen können Sie dies, wenn Sie http://www.netzmafia.de/geheim/index.html aufsuchen und folgende Zugangsdaten eingeben:

HTML-Editoren

Den perfekten Editor für HTML gibt es nicht. Alle Produkte haben besondere Features - und stets eine längere Mängelliste. Viele Editoren sind programmierte Geheimnisse für Freaks und auch nur von solchen verwendbar.

Textbasierte Editoren bieten wenig Komfort und benötigen anfangs als Unterstützung ein HTML-Handbuch neben der Tastatur. Trotzdem werden sie von Profis bevorzugt eingesetzt. Eine Erweiterung stellen sogenannte "Makro-Editoren" dar. Hierbei handelt es sich zwar um Texteditoren, aber durch die Fähigkeit, mit einer bestimmten Tastenkombination oder durch Klicken auf ein Icon eine beliebige Zeichenfolge in den Text einzufügen, kommen sie dem Anfänger entgegen. Die wichtigsten Tags sind als Makro abrufbar, womit das ständige Blättern im Handbuch wegfällt, im Text erscheinen aber die HTML-Tags im Quellformat. Ob Texteditor oder Makroeditor - es wird auf jeden Fall noch ein Browser zur Kontrolle des Ergebnisses benötigt.

WYSIWYG-Editoren zeigen das Layout im Entstehungsprozeß und setzen immer weniger HTML-Kenntnisse voraus. Die Vorschau ist jedoch meist nicht verbindlich. Der Grund für die mangelnde WYSIWYG-Tauglichkeit liegt in HTML selbst: Die Sprache ist nicht standardisiert; der die Standardisierung hinkt der notorischen Entwicklung neuer Browser-Features hinterher. Wie groß z. B. die Schrift wird, hängt von der Interpretation des Browsers (Version) ab, der das Ganze umsetzt- und außerdem vom Rechnersystem. Ein Apple Mac stellt die gleiche Seite oft ganz anders dar als ein PC. Zudem kann auch der Benutzer Schriftgröße- und -Art nach eigenen Vorlieben einstellen.

Office-Pakete mit HTML-Fähigkeiten, z. B. Programmpakete wie Star Office oder MS Office bieten die Möglichkeit, Dokumente direkt in HTML-Code abzulegen. Dabei wird jedoch versucht, möglichst nahe am Original zu bleiben - was zu einer Unzahl von unnötigen HTML-Anweisungen führt, die nur das Aussehen beeinflussen sollen. Wenn dabei noch ungewöhnliche Zeichensätze verwendet werden, ist das Resultat nicht einmal auf jedem PC zu sehen, geschweige denn auf anderen Plattformen. Aus den eben erwähnten Formatierungsproblemen sind solche Seiten nur bedingt universell für das Web-Design einsetzbar. Im Firmen-Intranet, wo man davon ausgehen kann, daß alle Rechner die gleiche Ausstattung und Softwarebasis besitzen, kann man propietäre Formate einsetzen, nicht jedoch bei einer weltweiten Internet-Präsenz.

Konventer-Programme setzen auf professionelle Satz- und Layoutprogramme (z. B. QuarkXPress, Pagemaker) auf und erzeugen aus den grafischen Layouts HTML-Seiten. Ihre Entwicklung steckt noch in den Kinderschuhen.

Professionelle HTML-Entwickler ziehen manuell geschriebenen Code vor, da es oft genauso lange dauert, programmbedingte Unzulänglichkeiten auszubügeln wie einen sauberen Code manuell aufzubauen. Und selbst für den Gelegenheitsschreiber sind HTML-Kenntnisse sind stets nützlich. Auf jeden Fall sollte man das Ergebnis seiner Arbeit mit den beiden verbreiteten Browsern von Netscape und Microsoft überprüfen.

Design-Regeln

Zweck des World Wide Web ist es immer noch, untereinander verknüpfte Informationen bereitzustellen. Natürlich sollen die Webseiten keine Textwüsten auf Einheitsgrau sein, aber auf der anderen Seite sind Seiten, auf denen es an allen Ecken und Enden zappelt, genauso abschreckend. Deshalb folgen nun ein paar Tips für Webseiten-Designer.

Egal, ob das WWW-Angebot eine 'Textwüste' wird oder ob man es schrill und bunt gestaltet, man muß sich Gedanken über die Stuktur des Angebotes machen. Dabei gibt es zwei Möglichkeiten :

Meist wird sich eine Mischform ergeben. Eine 'Textwüste kann man relativ einfach auflockern, indem man ein paar kleine Bilder einstreut.

Beim Gestalten einer HTML-Seite sollte man auch an das Bildschirmformat denken. Mehr als eine Schreibmaschinenseite sollte eine einzelne Webseite nur dann sein, wenn es sich um einen zusammenhängenden Text handelt. Übergeordnete Seiten sollte in der Regel auf einen Bildschirm passen.

* Empfehlungen für das Gestalten von HTML-Seiten

* Aktualität

Ein Webangebot muß möglichst aktuell sein - wie eine Tageszeitung. Liefern Sie Ihren Lesern handfeste Informationen. Langatmiges Geschwafel sorgt dafür, daß kaum jemand weiterliest. Sorgen Sie für Quervernetzung der einzelnen Seiten. Schließlich sollten die Daten und Infos aktuell sein und ständig ergänzt werden. Denn auf einer seit Monaten nicht mehr aktualisierten Homepage läßt sich ein Surfer so schnell nicht mehr blicken. Bieten Sie Seiten wie "News" oder "Aktuelles" nur an, wenn Sie diese ständig pflegen wollen und können. Nichts ist so peinlich wie "Alles Gute zum Neuen Jahr" auf der News-Seite im Monat Juni. Deshalb versprechen Sie auch nichts, was Sie nicht halten können.

* Versprechen Sie nichts, was Sie nicht halten können

Links, die auf ein Baustellenschild führen, verärgern den Leser wie leere Versprechungen. Der Surfer sieht einen vielversprechenden Querverweis, klickt ihn an und dann? Nichts! Niente! Wenn das Angebot noch so rudimentär ist, daß man ein Baustellenschild aufstellen müßte, dann sollte man es noch nicht zeigen. Besser ist es bei Menüs, den entsprechenden Verweis als ganz normalem Text zu belassen. Dann sieht der Besucher: "Da kommt demnächst was." und er wird mal wieder nachsehen kommen. Wenn natürlich monatelang das Link nicht mit Info gefüllt wird, dann ist es auch schlecht. Auf lange Sicht werden nur die Server im Netz überleben, die echte Informationen bieten, die gut aufbereitet sind. Ansonsten ist ein WWW-Angebot ständig im Umbau - also nichts, was man extra erwähnen müßte.

* Bunt und zappelig

Das sind WWW-Seiten, auf denen sich an allen Ecken und Enden etwas bewegt: blinkende Schrift, animierte GIFs, Laufschrift. Seit animierte GIFs erfunden wurden, zappelt es allenthalben. So schön es für einen selbst sein mag, animierte Bilder auf seiner Homepage zu sehen, so nervig ist es für Besucher, die sich häufig im Web herumtreiben. Außerdem ziehen Bewegungen auf der Webseite zuviel Aufmerksankeit auf sich und stören auf Dauer beim konzentrierten Lesen des restlichen Textes. Verzichten Sie also auf die Wackelbildchen. Ein knalliges 'NEU' reicht schon, es muß nicht noch blinken. Laufschriften sind für Schnelleser zu langsam und für Langsamleser zu schnell - also so oder so ungeeignet. Ein Icon oder eine Grafik wirken genauso gut.

Apropos Icons: Es gibt massenhaft Icon-Sammlungen, aus denen man sich bedienen kann. Noch besser ist es aber, wenn man sich die Sinnbilder selbst malt. Das ist gar nicht so schwer. Fangen Sie doch damit an, ein vorhandenens Icon zu modifizieren. Übrigens reichen für ein Icon normalerweise 16 - 32 Farben - dadurch wird die Bilddatei nicht nur kleiner, sondern es gibt auch keine Probleme mit der Darstellung beim Surfer, wenn dessen Grafik nicht dem letzten Stand der Technik entspricht.

Waagrechte Linien: Keine Zeitschrift und kein Buch strukturiert seinen Inhalt durch waagrechte Linien. Wenn sie nicht gezielt als Gestaltungselement dienen sollen, sind sie nur von Übel - egal, ob sie mit <HR> erzeugt oder ob sie durch farbige GIF-Bilder dargestellt werden.

* Bilder

* Frames

Bei Frames scheiden sich die Geister. Puristen sagen, wer Frames benutzt, sei einfach nicht in der Lage, sein Angebot zu strukturieren. Das ist sicher bei manchen Angeboten richtig. Auf der anderen Seite kann der sparsame Einsatz von Frames das Navigieren durch die WWW-Seiten zu erleichtern. Nachteil ist auf jeden Fall, daß sich Infos, die innerhalb eines Frames dargestellt werden, nicht einfach in die 'Bookmarks' übernommen werden können.

Viele Programmierer stellen mit dem FRAME-Tag Unfug an. Auf einer Seite sollten sich maximal drei Frame-Abteilungen tummeln. Ein Frame kann dabei generelle Navigationswerkzeuge für die Homepage vorhalten, der zweite Frame birgt einen Stichwort-Index und der dritte zeigt den eigentlichen Inhalt. Mehr Frames braucht niemand.

Verlinken Sie auf externe Seiten Seiten, so sollte eindeutig sein, daß der Inhalt derjenigen Seite nicht von Ihnen ist. Wenn ein Link zu einem anderen Server führt, laden Sie dieses Link nicht innerhalb des Frames. Das schränkt die dargestellte Fläche der angesteuerten Seite ein. Laden Sie fremde Seiten grundsätzlich mit der Option target= "_parent" oder target="_blank" im <A HREF=...>-Tag.

* Farben

Noch immer gibt es grafisch unempfindliche Naturen, die hellblaue Schrift auf knalligem Rot für chic halten. Über Ästhetik mag man streiten, nicht aber über Lesbarkeit. Und diese Farbkombination ist ebenso ätzend wie Gelb auf Grün oder Pink auf Hellblau. Als optische Killer Nummer zwei haben sich Hintergrundgrafiken erwiesen. Ein im Grafikprogramm kontrastarm aussehendes Bild kann im Browser stärker stören als vorgesehen, insbesondere wenn der Browser dithert. Denken Sie auch an die immer noch zahlreichen Benutzer im Netz, die vor Graustufenmonitoren sitzen. Am besten verwenden Sie in der Regel dunkle Schrift auf hellem Grund.

Wählen Sie für Ihre Links eine deutlich andere Farbe als die Textfarbe.

Gestalten Sie alle Ihre Links in der gleichen Farbe, es sei denn, Sie können deutlich zum Ausdruck bringen, daß auch der anderfarbige Link ein Link ist. Bei den Benutzern hat die blaue oder violette Farbe und die Unterstreichung für Links einen hohen Wiedererkennungswert. Die Farbe kann der allgemeinen Erscheinung Ihrer Webseite angepaßt werden, auf die Untersteichung sollten Sie jedoch nicht verzichten.

Wählen Sie im BODY-Tag nicht die gleichen Farben für Link (LINK), visited Link (VLINK), animated LINK (ALINK). Ein Link erhält die VLINK-Farbe, wenn dieser bereits besucht wird. Die ALINK-Farbe erscheint solange der Link gedrückt ist. Für ALINK empfiehlt sich eine Farbe, die in der Nähe der LINK-Farbe liegt.

* Bewahre uns vor Plug-ins

Shockwave hier, Real Audio da, usw. An jeder Ecke wachsen neue Plug-Ins. Und jeder Autor verwendet einen anderen Multimedia-Standard, für jede Homepage benötigt der Surfer andere Plug-Ins. Das alles kostet nicht nur Download-Zeit, sondern müllt dem Besucher der Homepage auch die Platte voll. Dazu kommen höhere Hardwareanforderungen, Inkompatibilitäten der Plug-Ins untereinander und mögliche Softwarefehler. Überlegen Sie also, ob Multimedia-Erweiterungen wirklich nötig sind.

* Nutzlose Applets

Die Anzahl der nutzlosen Applets und Scripts steigt expotentiell. Dabei handelt es sich um Besucher-Zähler, Lauftexte oder Animationen. Solche Applets und Scripts können nützlich sein, beispielsweise für Suchsysteme, Pull-Down-Menüs zur Benutzerführung und zur Prüfung von Formularen. Bedenken Sie jedoch, daß durch Viren und "trojanische Pferde" die Scripts bei den Benutzern in Verruf geraten sind und oft im Browser deaktiviert wurden. Verwenden Sie Scripts also sparsam oder überhaupt nur im Intranet. Und bevor Sie das Javascript-Laufband auf Ihrer Homepage unterbringen, bedenken Sie, daß andere User dasselbe tun. Der Renner unter den Nutzlosigkeiten ist jedoch der Besucherzähler, der bei jedem Aufruf Ihrer Homepage verändert wird. Das verhindert nämlich, daß die Seiten im Proxy-Cache eines Providers zwischengespeichert werden können, und der Surfer bessere Ladezeiten bekommt. Besser ist es, eine Serverstatistik zu veröffentlichen, die täglich oder wöchentlich aktualisiert wird.

* Testen Sie Ihre Homepage

Nichts ist peinlicher als eine fehlerhafte Homepage. Und Bugs schleichen sich schnell ein. Was auf Ihrem Rechner lokal noch nett aussieht, kann sich bei einer kritischen Probefahrt schnell als grauenhaft herausstellen. Die wichtigsten Tests:

Suchmaschinen

Wenn ein potentieller Kunde Informationen im Internet mit einer Suchmaschine sucht erhält er eine Liste mit WWW-Seiten, die seinen Suchbegriffen mehr oder weniger gut entsprechen. Da die Suchmaschinen oft Tausende von Seiten finden, ist es entscheidend, daß Ihre Seite am Anfang dieser Liste steht, sonst wird sie nicht gesehen. Die Software der Suchmaschinen legt die Reihenfolge fest, mit der die Ergebnisse angezeigt werden. Einige  Suchmaschinen beschreiben den Algorithmus, nachdem die Reihenfolge festgelegt wird, andere nicht.

Suchmaschinen werten Ihre Seiten auf zwei Arten aus: sie sehen sich den Seitentext an und sie werten die Meta-Tags aus. Meta-Tags sind besondere HTML Befehle, die die Seite für die Suchmaschine beschreiben und Schlüsselwörter angeben.

Keywords

Die richtigen Schlüsselwörter können Ihnen eine gute Position bei den Suchmaschinen sichern. Stellen Sie eine Liste mit Schlüsselwörtern auf. Schreiben Sie sich etwa 20 - 50 Schlüsselwörter auf, eins in jede Zeile. Wenn Sie diese Liste haben, Numerieren Sie die Schlüsselwörter nach ihrer Wichtigkeit. Sie müssen sich entscheiden. Haben Sie eine lange Liste von Schlüsselwörtern, werden Ihre Seiten zwar auch bei vielen Suchbegriffen gefunden, aber nie an der Spitze der Suchergebnisse stehen. Nehmen Sie nur wenige Schlüsselwörter, erhöht sich der Anteil dieser und Ihre Seite wird oben im Suchergebnis erscheinen. Wenn Ihre Liste mit Schlüsselwörtern kurz ist und Sie sicher sind, daß die Interessenten genau nach diesen Begriffen suchen, sollten Sie auch gezielt vorgehen. Wenn nicht, müssen Sie Ihre Schlüsselwörter breit streuen. Fragen Sie sich, was Ihr Kunde als Suchbegriffe eingeben würde? Überlegen Sie sich alle Begriffe, die eine Beziehung zu Ihrer Seite haben und tragen Sie diese in Ihre Liste ein. Überlegen Sie weiter: " Was könnte ein Kunde suchen ?" Das hilft Ihnen weiter. Probieren Sie ein paar Begriffe bei verschiedenen Suchmaschinen aus.

Meta-Tags

Mit den Meta-Tags keywords und description können Sie den Suchmaschinen wichtige Informationen geben. Überschreiten Sie nicht die vorgegebene Maximallänge von 1024 Zeichen für die Keywords und entwerfen Sie eine ansprechende Beschreibung Ihrer Seite. Dies wird Ihre Visitenkarte in den Suchmaschinen, nutzen Sie diese Gelegenheit und holen Sie die Kunden auf Ihre Seite.
Meta-Tags sind besondere HTML Kommandos im Header Ihrer Internet Seite, die von einem Browser nicht angezeigt werden. Die Meta-Tags enthalten Informationen über die Informationen in Ihrer Seite. Sie können mit diesen Meta-Tags der Suchmaschine Informationen über Schlüsselwörter und eine Beschreibung des Seiteninhaltes angeben. Nicht alle Suchmaschinen werten die Meta-Tags aus. Aber alle wichtigen Suchmaschinen werten die Meta-Tags aus.
Sie können mit Hilfe der Meta-Tags vorgeben, wie Ihre Seite im Suchergebnis angezeigt wird und auch Schlüsselwörter direkt vorgeben. Bis zu 200 Schlüsselwörter sind erlaubt. Sie können hier zusätzlich auch Suchbegriffe aufführen, die nicht im Text erscheinen.

Meta-Tag keywords

Im Meta-Tag keywords können Sie die Schlüsselwörter für Ihre Seite angeben. Geben Sie hier die Schlüsselwörter ein, die Sie im vorigen Abschnitt bestimmt haben. Achten Sie darauf, die Schlüsselwörter nicht zu oft (mehr als sieben Mal) zu wiederholen. Einige Suchmaschinen erkennen dies als 'spamdexing' und bestrafen Sie, indem sie Ihre Seite ans Ende der Suchergebnissse stellen.
Stellen Sie die relevanten Schlüsselwörter an den Anfang Ihres Meta-Tags. Die Schlüsselwörter am Anfang werden höher bewertet als Schlüsselwörter am Ende der Liste. Trennen Sie die Schlüsselwörter jeweils mit Komma voneinander und sparen Sie sich dabei das Leerzeichen nach dem Komma! Beispiel:

<META Name="keywords"Content="Supercomputer,billig,alles umsonst!,usw">

Meta-Tag description

Mit dem Meta-Tag description legen Sie die Beschreibung Ihrer Seite fest. So wird Ihre Seite dann auch von der Suchmaschine im Suchergebnis angezeigt. Die Beschreibung Ihrer Seite muß so interessant sein, daß Ihr potentieller Kunde dem Verweis auf Ihre Seite auch folgt. Machen Sie die Beschreibung für Ihren Kunden interessant -- nicht für die (Such-)Maschine!
Sagen Sie, warum es lohnenswert ist, Ihre Seite zu besuchen. Welchen Vorteil hat Ihr Kunde dadurch? Ist Ihre Beschreibung ansprechend und interessant? Würden Sie selbst diese Seite nach Ihrer Beschreibung besuchen wollen? Hilft Ihren Kunden diese Seite weiter? Begrenzen Sie Ihr Meta-Tag description auf 150 Zeichen (Leerzeichen eingeschlossen). Längere Beschreibungen werden bei manchen Suchmaschinen abgeschnitten. Beispiel:

<METAName="description" Content="Hier gibt es tolle Hexenpelze in vielen geilen Farben!">

Die wichtigsten META-Tags:

keywords
Unter welchen Begriffen soll man die Seite finden?
<META NAME="keywords" CONTENT="Keyword1, Keyword2, ...">

description
Beschreibung der Webseite oder des Anbieters der Seite
<META NAME="description" CONTENT="Beschreibung der Seite/Firma">

author
Wer schrieb die Webseite? <META NAME="author" CONTENT="Josef Meier">

rating
Damit die Seite nicht unter den "Red Light District" kommt ;-)
<META NAME="rating" CONTENT="General">

robots
Robots von welchen Sites dürfen denn die Seite abscannen?
<META NAME="robots" CONTENT="ALL">

revisit
Wann soll der Robot denn wieder nachschauen?
<META NAME="revisit-after" CONTENT="31 days">

Content-Type
Was für ein Zeichensatz (charset) Wird verwendet? (latein, japanisch, etc.)
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

Seitentitel und -text

sind neben den Meta-Tags die Quelle für Ihre Schlüsselbegriffe. Gerade, wenn Sie auch hier Ihre Schlüsselworte gezielt einsetzen, können Sie Ihr Suchergebnis entscheidend verbessern. Die Suchmaschinen bewerten Ihre Schlüsselwörter nach Position und Anteil am gesamten Text. Wenn Sie folgendes beachten, wird Ihre Seite eine gute Bewertung erreichen:

Optimieren Ihrer Seite

] Melden Sie Ihre Seite vorerst bei nur einer Suchmaschine an. Überprüfen Sie den Status Ihrer URL und warten Sie, bis Ihre Seite in den Index aufgenommen wurde. Suchen Sie in der Suchmaschine nach den angegebenen Schlüsselwörtern und prüfen, an welcher Stelle Ihre Seite gelistet wird. Entspricht das Suchergebnis noch nicht Ihrer Erwartung, so müssen Sie Ihre Seite weiter bearbeiten. Gehen Sie dabei wie folgt vor:

Nun können Sie Ihre Seite bei den anderen Suchmaschinen anmelden. Sie können Anmeldedienste z.B: von Klug Suchen (http://www.klug-suchen.de/) oder Submit It! (www.submit-it.com/) nutzen oder aber Ihre Seite selber anmelden.

Die Suchmaschinen durchsuchen Ihre Seite automatisch. Sie bräuchten also nur Ihre Hauptseite anzumelden. Es kann aber etwas dauern, bis alle Ihre Seiten vom Robot besucht worden sind. Melden Sie Ihre Seiten von Hand an. So können Sie sichergehen, daß diese bald im Index der Suchmaschine gespeichert sind. Wenn die Seite nicht mehr existiert oder die Stuktur Ihrer WWW-Seiten sich geändert hat melden Sie Ihre Seite noch einmal bei der Suchmaschine an. Tote Links werden dann aus dem Index entfernt.

Spamindexing

Mogeln kann man leider überall. Auch bei den Suchmaschinen gibt es Tricks, um zu einer besseren Plazierung zu kommen. Aber die Suchmaschinen achten vermehrt auf diese Spam Techniken. Seien Sie also vorsichtig, wenn Sie diese Tricks verwenden. Eventuell wird auch Ihre Seite gesperrt! 'Spamdexing' setzt sich zusammen aus den Worten 'spamming' und 'index'. Es beschreibt die Technik, Information in eine Webseite zu schleusen, so daß die Seite von der Suchmaschine in einer guten Position eingeordnet wird. Generell ist spamdexing das Einbringen von Informationen in Ihre Seite, die der Benutzer nicht sehen kann, die aber das Ranking in den Suchmaschinen beeinflussen. Dafür gibt es viele Möglichkeiten:

Wenn Sie ein Schlüsselwort mehrere hundert Male auf Ihrer Webseite unterbringen, wird die Suchmaschine Ihre Seite in einer besseren Position anzeigen als die Seiten Ihrer Wettbewerber. Diese Schlüsselwörter werden üblicherweise am Ende der Seite plaziert, so daß der Leser sie nicht sieht. Oder sie werden für den Leser (nicht für die Suchmaschine) unsichtbar gemacht (Textfarbe = Hintergrundfarbe, kleinste Schriftgröße). Ein Kommentar wird auf Ihrer Webseite nicht angezeigt, jedoch von den Suchmaschinen ausgewertet. Stellen Sie an den Anfang der Seite einige Zeilen Kommentar mit Ihren Schlüsselwörtern.

Die meisten Suchmaschinen erkennen spamdexing und so werden z. B. Seiten mit auffallender Wiederholung von Schlüsselwörtern ans Ende des Suchergebnisses gesetzt. Generell gibt es aber wohl immer Möglichkeiten, bei den Suchmaschinen zu mogeln. Dies lohnt sich aber immer weniger, weil der Aufwand immer höher wird.

Weitere Informationen finden Sie im Skript Suchen im Internet.

Zum vorhergehenden Abschnitt Zum Inhaltsverzeichnis Zum nächsten Abschnitt

Copyright © FH München, FB 04, Prof. Jürgen Plate