 |
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 Fachliteraturentnehmen. 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:- In HTML 2 sind nur Server-seitige Image-Maps (ISMAP) vorgesehen, die mit einem
CGI-Programm am Server verarbeitet werden. Dies ist die ältere und kompliziertere Methode.
- Seit HTML 3.2 sind auch Client-seitige Image-Maps (<MAP> und USEMAP)
vorgesehen, die direkt in der HTML-Datei spezifiziert und vom Web-Browser verarbeitet werden.
Dies ist die neuere Methode, sie ist einfacher zu realisieren und wird von allen neueren
Web-Browsern unterstützt.
- In HTML 4 wird empfohlen, in Zukunft nur mehr Client-seitige und keine Server-seitigen
Image-Maps in HTML-Dateien einzubauen.
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="https://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önnen ... nun ... auswä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:
Klicken Sie auf eines der drei Felder
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.
Hier ist der Quellcode: Quellcode
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:
https://host.domain/cgi-directory/filename
oder
https://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="https://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
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.
- GET hängt die Eingabedaten an die URL an (Längenbeschränkung, nur
praktikabel bei wenigen Eingaben),
- POST erzeugt einen eigenen Datenstrom.
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.
- Beispiel 1: Eingabezeile von 40 Zeichen Länge:
<INPUT TYPE="text" NAME="name" SIZE=40 VALUE="No Name">
- Beispiel 2: Verstecktes Eingabefeld, das z. B. zur Identifikation des Formulars dienen kann:
<INPUT TYPE="hidden" NAME="Status" VALUE="form1">
- Beispiel 3: Drei Radio-Buttons, Knopf 1 ist gedrückt:
<INPUT TYPE="radio" NAME="rb1" VALUE="1" CHECKED>Knopf 1
<INPUT TYPE="radio" NAME="rb1" VALUE="2">Knopf 2
<INPUT TYPE="radio" NAME="rb1" VALUE="3">Knopf 3
- Beispiel 4: Checkbox mit 4 Knöpfen, Knöpfe 1 und 2 gedrückt:
<INPUT TYPE="checkbox" NAME="cb1" VALUE="1" CHECKED>K. 1
<INPUT TYPE="checkbox" NAME="cb1" VALUE="2" CHECKED>K. 2
<INPUT TYPE="checkbox" NAME="cb1" VALUE="3">K. 3
<INPUT TYPE="checkbox" NAME="cb1" VALUE="4">K. 4
- Zum Rücksetzen aller Werte auf die Voreinstellungen dient der RESET-Type und
zum Absenden an den Server der SUBMIT-Button:
<INPUT TYPE="reset" VALUE="Rücksetzen">
<INPUT TYPE="submit" VALUE="Abschicken">
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
- Beispiel für die Definition einer Textarea:
<TEXTAREA NAME="name" ROWS=5 COLS=40>
Beliebiger Text, der im Textfeld steht.
</TEXTAREA>
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.
|
|
|
DIENSTE
