SUCHE MIT Google
Web virtualuniversity.ch
HOME DIDAKTIK ECDL ELEKTRONIK GUIDES HR MANAGEMENT MATHEMATIK SOFTWARE TELEKOM
DIENSTE
Anmeldung
Newsletter abonnieren
Sag's einem Freund!
VirtualUniversity als Startseite
Zu den Favoriten hinzufügen
Feedback Formular
e-Learning für Lehrer
Spenden
Autoren login
KURSE SUCHEN
Kurse veröffentlichen

Suche nach Datum:

Suche mit Schlüsselwort:

Suche nach Land:

Suche nach Kategorie:
PARTNER
ausbildung24.ch - Ausbildungsportal, Seminare, Kursen... 

 
HTMLopen.de - Alles was ein Webmaster braucht

 
PCopen.de - PC LAN Netze und Netzwerke - alles was ein IT Profi und Systemtechnicker braucht

GUIDES UND TUTORIAL

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&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

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


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.

  • 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

    Knopf 1 Knopf 2 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

    K. 1 K. 2 K. 3 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.

DIPLOMARBEITEN UND BÜCHER

Diplomarbeiten zum Runterladen:

Suche im Katalog:
Architektur / Raumplanung
Betriebswirtschaft - Funktional
Erziehungswissenschaften
Geowissenschaften
Geschichtswissenschaften
Informatik
Kulturwissenschaften
Medien- und Kommunikationswissenschaften
Medizin
Psychologie
Physik
Rechtswissenschaft
Soziale Arbeit
Sozialwissenschaften


JOBS
HOME | E-LEARNING | SITEMAP | LOGIN AUTOREN | SUPPORT | FAQ | KONTAKT | IMPRESSUM
Virtual University in: Italiano - Français - English - Español
VirtualUniversity, WEB-SET Interactive GmbH, www.web-set.com, 6301 Zug

Partner:   Seminare7.de - PCopen.de - HTMLopen.de - WEB-SET.com - YesMMS.com - Ausbildung24.ch - Manager24.ch - Job und Karriere