HTML-Einführung von Hubert Partl, August 1996

Interaktion mit dem Benutzer

Mehr Leben ins World Wide Web!

Hier finden Sie nur kurze Hinweise auf diese Möglichkeiten für "Fortgeschrittene". Genauere Informationen müssen Sie der Dokumentation des jeweiligen WWW-Servers und den Referenzen entnehmen.

CGI-Prozeduren (Common Gateway Interface)

Eine CGI-Prozedur ist ein Programm, das auf dem WWW-Server läuft und die Ausgabe wie ein HTML-File an den Client sendet.

Im Gegensatz zu HTML-Files, die einen fixen Inhalt haben, kann man damit Informationen verteilen, die sich laufend ändern oder die von Benutzer-Eingaben abhängen.

Der Aufruf der CGI-Prozedur erfolgt in einem Hypertext-Link oder einem Formular mit einem URL der Form
http://hostname/cgi-directory/filename

Beispiel:

Eine einfache Unix-Shell-Prozedur, die Datum und Uhrzeit anzeigt: 

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

Eine etwas ausführlichere Version einer solchen Datumsanzeige finden Sie an der BOKU Wien.

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 und in den Referenzen.

Zugriffe zählen

Sie als Autor möchten wahrscheinlich wissen, wie oft Ihre Informationen von Interessenten in aller Welt gelesen werden.

Relativ leicht können Sie erfahren, wie oft auf Ihr HTML-File am WWW-Server zugegriffen wurde. Die meisten WWW-Server führen ein "Log-File", in dem alle Zugriffe protokolliert werden, und Sie können mit einem einfachen Unix-Shell-Script zählen, wie oft Ihr Filename darin vorkommt. Beispiel: 

#!/bin/sh
url="$1"
logfile=/a/cern/www.log
n=`grep -i "$url" $logfile | wc -l`
echo "$n Zugriffe auf $url"
exit
Außerdem finden Sie im Log-File auch die Information, von welchen Client-Rechnern auf Ihr File zugegriffen wurde (aber im allgemeinen nicht, von welchen Personen).

Damit zählen Sie aber nur die Anzahl der File-Übertragungen und nicht, wie oft die Information tatsächlich gelesen wurde. Schuld daran sind die sehr nützlichen sogenannten Cache-Speicher, die zur Entlastung der Netzverbindungen notwendig sind:

Die meisten Web-Browser haben einen lokalen Cache-Speicher. Wenn z.B. ein Benutzer in Berlin zehn mal die in Wien gespeicherte HTML-Einführung liest, wird sie nur beim ersten Mal von Wien nach Berlin übertragen und, solange der Platz ausreicht, in seinem Cache-Speicher abgelegt. Bei allen weiteren Zugriffen wird das File nicht nochmals von Wien nach Berlin übertragen, sondern viel einfacher und schneller aus dem lokalen Cache geholt (außer der File-Inhalt wurde inzwischen erneuert).

Viele Institutionen verwenden auch globale Cache-Server ("Proxy"), die dann für alle Zugriffe aus diesem Bereich wirken. Wenn z.B. tausend Benutzer in Berlin die in Wien gespeicherte HTML-Einführung lesen, wird sie nur beim ersten Mal von Wien nach Berlin übertragen und eine Kopie am Berliner Cache-Server abgelegt (solange der Speicherplatz ausreicht). Bei allen weiteren Zugriffen wird das File nicht nochmals von Wien nach Berlin übertragen, sondern viel schneller aus dem Berliner Cache-Server geholt (außer der File-Inhalt wurde inzwischen erneuert).

Die Zahl, wie oft Ihr File tatsächlich gelesen wurde, ist im allgemeinen also wesentlich höher als die am WWW-Server gezählte Zahl der File-Übertragungen.

Manche Autoren wollen die Zahl der Zugriffe auch innerhalb des HTML-Files speichern. Dies ist zwar technisch möglich (z.B. mit Hilfe einer CGI-Prozedur), aber nicht empfehlenswert, denn dann würde sich der File-Inhalt bei jedem Zugriff ändern, die oben beschriebene Cache-Methode nicht mehr wirken und der Zugriff auf das File für die Benutzer um Größenordnungen langsamer und teurer werden. Außerdem ist die Anzahl der File-Übertragungen meist nur für den Autor der Information und den Verwalter des WWW-Servers, aber nicht für die Leser interessant.

Formulare <form>

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

Beispiel:

- - - Die Eingabe von 

<form method="get" 
action="http://www.boku.ac.at/cgi-bin/hein-get">
<b>Anmeldung</b> zur Geburtstagsfeier am 8. M&auml;rz 
<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="wer" size="40" maxlength="512">
<p>
Telefonnummer: 
<input name="tel" size="20" maxlength="512">
<p>
<input type="submit" value="Anmeldung absenden">
</form>
- - - bewirkt eine Darstellung wie

Anmeldung zur Geburtstagsfeier am 8. März

Ich komme.
Ich komme nicht.

Name:

Telefonnummer:

- - -

Anmerkung: Die in diesem Beispiel verwendete CGI-Prozedur dient nur für Tests durch die Leser dieser Einführung. Wenn Sie dieses Formular ausfüllen und absenden, bekommen Sie eine kurze Test-Antwort, aber (leider) keine wirkliche Einladung zum "Heurigen".

Bei der Gestaltung von Formularen müssen die Normen und Konventionen für Benutzerschnittstellen und die Gewohnheiten und Erwartungen der Benutzer berücksichtigt werden.

Für genauere Informationen über die vom Server unterstützten Übertragungs-Methoden ("get" oder "post") und die Übergabe der Eingabedaten an die CGI-Prozedur wird auf die Dokumentation des jeweiligen WWW-Servers und auf die Referenzen verwiesen. Die CGI-Prozeduren 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.

Hier folgt als Beispiel die CGI-Prozedur, mit der die Antwort auf das obige Formular erzeugt wird. Sie verwendet die Methode "get" und den CERN httpd Server mit dem Hilfsprogramm "cgiparse" auf einem Unix-Rechner.

Die vom Formular an den Server gesendete Eingabe hat hier einen Aufbau der Form
name1=value1&name2=value2&name3=value3
und muß erst mit "cgiparse" (oder einem anderen geeigneten Hilfsprogramm) in die einzelnen Felder aufgeteilt werden. 

#!/bin/sh
name="`/usr/local/bin/cgiparse -value wer`"
kommt="`/usr/local/bin/cgiparse -value kommt`"
echo "Content-Type: text/html"
echo ""
echo "<head><title>CGI-Test Geburtstag</title></head><body>"
echo "<h1>CGI-Test Geburtstag</h1>"
echo "<p>Hallo, $name !<p>"
if [ "$kommt" = "ja" ]
   then echo "Es freut mich, da&szlig; Du "
   else echo "Es tut mir leid, da&szlig; Du nicht "
fi
echo "zu meiner Geburtstagsfeier kommen willst. "
echo "<p>(Nein, nicht wirklich, aber "
echo "<b>Danke fuer den Test.</b>)"
echo "<p></body>"
exit
Bei komplexeren Anwendungen werden oft die Methode "post" und die Programmiersprache Perl verwendet, und es gibt jeweils verschiedene Hilfsprogramme für das Herausholen der einzelnen Felder aus dem an den Server gesendeten Eingabe-String.

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 ("Feedback"). Im einfachsten Fall genügt eine kurze Meldung, daß die Eingabe verarbeitet wird, und eventuell ein Hinweis, daß der Benutzer mit der Back-Taste oder dem Back-Befehl seines Browsers zur vorherigen Information zurückkehren und weiterarbeiten kann.

Index-Suche <isindex>

Fast alle Web-Browser haben eine eingebaute Funktion für "Index-Suche", die dem Benutzer die Eingabe eines "Suchbegriffs" ermöglicht - so ähnlich wie ein Formular, das nur aus einem einzigen Eingabe-Feld besteht.

Die Ausgabe der Aufforderung zur Eingabe des Suchbefehls, die Verarbeitung der Benutzereingabe und die Ausgabe der Suchergebnisse müssen durch eine auf dem WWW-Server laufende CGI-Prozedur erfolgen.

Die Angabe des HTML-Befehls <isindex> im <head> aktiviert diese Funktion am Web-Browser. Der Benutzer kann dann den entsprechenden Browser-Befehl eingeben (bzw. das entsprechende Feld am Bildschirm auswählen) und den Suchbegriff eingeben.

Beispiel:

Eine einfache CGI-Prozedur für die Suche in einem Telefonverzeichnis: 

#!/bin/sh
echo "Content-Type: text/html"
echo ""
echo "<head><title>Telefonverzeichnis</title>"
if [ $# -eq 0 ]
then : # <isindex> Such-Maske
     echo "<isindex></head><body>"
     echo "<h1>Suche im Telefonverzeichnis</h1>"
     echo "Geben Sie den Befehl f&uuml;r Index-Suche "
     echo "und einen Suchbegriff ein.</body>"
else : # Suche durchfuehren
     echo "</head><body>"
     echo "<h1>Such-Ergebnis f&uuml;r $1</h1>"
     echo "<pre>"
     grep -i "$1" /usr/lib/telefon.liste
     echo "</pre></body>"
fi
exit
- - -

Eine etwas ausführlichere Version einer solchen Suche finden Sie an der BOKU Wien.

Image-Maps (ismap <map> usemap)

Image-Maps (Bild-Karten) 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 (ismap)

Bei Server-seitigen Image-Maps muß die Verarbeitung durch eine auf dem WWW-Server laufende CGI-Prozedur erfolgen. Diese Möglichkeit ist in HTML 2 vorgesehen und wird von den meisten graphikfähigen Web-Browsern unterstützt.

Im HTML-File ist eine Kombination aus einem <a href>-Befehl für die CGI-Prozedur und einem <img>-Befehl für das Bild mit der Angabe "ismap" anzugeben.

Beispiel:

- - - Die Eingabe von 

<a href="http://www.boku.ac.at/cgi-bin/hein-map">
<img src="austria.gif" ismap></a>
- - - bewirkt eine Darstellung wie

und je nachdem, wo in diesem Bild Sie "klicken", bekommen Sie eine entsprechende Antwort.

Die zugehörige CGI-Prozedur hat folgenden Aufbau: 

#!/bin/sh
echo "Content-Type: text/html"
echo ""
echo "<head><title>CGI-Test Image-Map</title></head><body>"
echo "<h1>CGI-Test Image-Map</h1><p>"
x=`echo $1 | sed -e 's/,.*$//'`
y=`echo $1 | sed -e 's/^.*,//'`
echo "x = $x (von links nach rechts)<p>"
echo "y = $y (von oben nach unten)<p>"
if [ "$y" -lt 16 -o "$y" -gt 31 ]
then echo "Farbe = rot<p>"
else echo "Farbe = weiß<p>"
fi
echo "<p></body>"
exit
- - -

Ein etwas sinnvolleres Beispiel finden Sie an der Universität Wien, wo Sie durch Anklicken der Städte in einer Österreich-Karte Informationen über die jeweilige Stadt erhalten.

Da nicht alle Web-Browser Inline-Bilder und Image-Maps unterstützen und da manche Benutzer mit langsamen oder teuren Netzverbindungen die Darstellung von Bildern in ihren persönlichen Einstellungen ausgeschaltet haben, sollte man bei einer Image-Map immer zusätzlich auch eine gewöhnliche Liste zur Auswahl von Hypertext-Links in Text-Form anbieten, damit alle Benutzer die betreffenden Informationen erreichen können.

Für genauere Informationen über das Zusammenspiel zwischen Bild und CGI-Prozedur und über Hilfsprogramme zu deren Erstellung wird auf die Referenzen verwiesen.

Client-seitige Image-Maps <map> usemap

Bei Client-seitigen Image-Maps erfolgt die Verarbeitung durch den Web-Browser auf Grund von entsprechenden Angaben im HTML-File, und es ist keine CGI-Prozedur notwendig. Diese Möglichkeit ist in HTML 3 vorgesehen und wird bereits von ein paar neueren Web-Browsern unterstützt.

Die Spezifikation, welche Teile des Bildes den Sprung zu welchem Hypertext-Link bewirken sollen, erfolgt mit Hilfe von <map> entweder im selben HTML-File wie die Verwendung des Bildes oder in einem separaten File, das gemeinsam mit dem Bild abgespeichert ist.

Im <img> oder <object>-Befehl des Bildes wird dann mit "usemap" auf diese Map-Spezifikation verwiesen.

Da nicht alle Web-Browser solche Image-Maps unterstützen, muß man bei einer solchen Image-Map zusätzlich ein "normales" Link mit <a href> angeben, das zu einer Liste von Hypertext-Links in einfacher Textform führt. Damit wird sichergestellt, daß alle Benutzer die betreffenden Informationen erreichen können.

Beispiel:

- - - Die Eingabe von 

<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 der Fahne 
<a href="#ohnemap"> 
<img src="austria.gif" alt="oder hier!" usemap="#map3"></a>
- - - bewirkt die Ausgabe von

oben mitte unten

Klicken Sie auf eines der drei Felder der Fahne oder hier!

Je nachdem, wo Sie in diesem Bild "klicken", gelangen Sie zu einer der folgenden vier Stellen:

  1. Sie haben das obere rote Feld ausgewählt.
  2. Sie haben das mittlere weiße Feld ausgewählt.
  3. Sie haben das untere rote Feld ausgewählt.
  4. Ihr Browser unterstützt Client-seitige Image-Maps nicht. Sie sind deshalb hier bei der Alternative "ohne Map" gelandet und können die drei Möglichkeiten nun mit normalen Hypertext-Links auswählen:

Die Eingabe für die im vierten Punkt beschriebene Alternative hat einen Aufbau der folgenden Form: 

<a name="ohnemap">Ihr Browser ... </a> 
Sie ... k&ouml;nnen ... nun ... ausw&auml;hlen:
<ul>
<li><a href="#oben">Informationen zum oberen Bereich</a>
<li><a href="#mitte">Informationen zum mittleren Bereich</a>
<li><a href="#unten">Informationen zum unteren Bereich</a>
</ul>
- - -

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

Electronic Mail (mailto)

Die Angabe eines mailto-URL in einem <a href>-Befehl gibt dem Leser die Möglichkeit, von seinem Client aus eine kurze Nachricht per E-Mail an eine bestimmte Mail-Adresse zu senden, z.B. an den Autor der Web-Page.

Der Benutzer muß das Subject, den Text der Nachricht und seine Absender-Adresse am Client eintippen, und er muß die Erlaubnis zum Absenden von Mail haben.

Mailto-URLs werden nicht von allen Web-Browsern unterstützt. "Richtige" Mail-Programme sind für das Versenden von Electronic Mail im allgemeinen besser geeignet, insbesondere für wichtige oder längere Mail-Texte und für das Lesen von Antworten.

Deshalb ist es empfehlenswert, die Mail-Adresse nicht nur "versteckt" im URL sondern auch sichtbar im Text anzugeben.

Beispiel:

- - - Die Eingabe von 

Wenn Ihnen meine HTML-Einf&uuml;hrung gef&auml;llt, 
sagen Sie es bitte Ihren Kollegen. <br>
Wenn Sie darin Fehler finden, sagen Sie es bitte 
<a href="mailto:partl@mail.boku.ac.at">mir</a>. <br>
Meine Mail-Adresse ist 
<a href="mailto:partl@mail.boku.ac.at">partl@mail.boku.ac.at</a>.
- - - bewirkt eine Darstellung wie

Wenn Ihnen meine HTML-Einführung gefällt, sagen Sie es bitte Ihren Kollegen.
Wenn Sie darin Fehler finden, sagen Sie es bitte mir.
Meine Mail-Adresse ist partl@mail.boku.ac.at.

- - -

Vorwort . Wegweiser . Inhaltsverzeichnis . Wörterbuch . Referenzen . Copyright
© Hubert Partl, BOKU Wien