Webtechniken im Überblick feniweb.ch

Webtechniken im Überblick

Links 3D feniweb.ch

Links zu Websprachen

http://www.oreilly.de/german/freebooks/rlinux3ger/ch137.html (JAVA d)

Leider haben wir an dieser Stelle ein technisches Problem

Links | Archiv

Letzte Änderungen 31.03.2020

Webtechniken im Überblick

von Wolfgang Wiese (www.xwolf.de)

1. HTML

HTML ist die Abkürzung für „Hypertext Markup Language“. Sie beschreibt, wie der darzustellende Text strukturiert und formatiert wird, und wie unterschiedliche Medientypen (wie Bilder, Grafiken, Töne usw.) in die Seite eingebunden werden können. Die Grundsyntax von HTML wird in der HTML-Norm festgelegt, welche vom World Wide Web Consortium definiert wird. Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden zwei Teilen:

Header (Kopf - enthält Angaben zu Titel u.ä.)
Body (Körper - enthält den eigentlichen Text mit Überschriften, Verweisen, Grafikreferenzen usw.)

Neben dem eigentlichen Text enthalten HTML-Dateien HTML-spezifische Befehle. Alle HTML-Befehle stehen in sog. Tags. Die Tags werden durch spitze Klammern markiert. Fast alle Befehle von HTML bestehen aus einem einleitenden und einem abschließenden Tag. Der Text dazwischen ist der "Gültigkeitsbereich" für die betreffenden Tags.

Beispiel:

<html>
<head>
<title>Text des Titels</title>
</head>
<body> 
Text, Verweise, Grafikreferenzen usw.  
</body>
</html>

Quellcode 1. HTML

Der gesamte Inhalt einer HTML-Datei, wie in Quellcode 1 angegeben, wird in die Tags <html> bzw. </html> eingeschlossen. Hinter dem einleitenden HTML-Tag folgt der einleitende Tag für den Kopf <head>. Zwischen diesem Tag und seinem Gegenstück </head> werden allgemeine Angaben, meist META-Daten, zur HTML-Datei notiert. Die wichtigste dieser Angaben ist der Titel der Webseite, die durch die Tags <title> bzw. </title> markiert wird. Unterhalb davon folgt der Textkörper, kenntlich gemacht durch die Tags <body> bzw. </body>. Im Textkörper wird der eigentliche Inhalt der Seite notiert, also das, was im Anzeigefenster des Webbrowsers angezeigt werden soll. Eine umfangreiche deutschsprachige Dokumentation von HTML wurde von Stefan Münz erstellt und ist Online abrufbar.

2. XML

XML steht für Extensible Markup Language. Mit Hilfe von XML lassen sich Kontext und Inhalt einer Seite fest definieren und maschinell auswertbar machen. Genauer: „Dadurch, daß alle Dokumente den gleichen Regeln folgen, ist es möglich, Anwendungen zu schaffen, welche die Informationen aus den Dokumenten auslesen und automatisch verarbeiten.“ [Zitat: http://www.w3.org/TR/REC-xml] XML entstand aus SGML („Standard Generalized Markup Language“). Im Vergleich zu HTML bietet XML die Möglichkeit eigene HTML-Tags zu definieren und ist somit anpaßbar an die Bedürfnisse der Benutzer, bzw. an die Umgebungsdaten.
Ebenso wie HTML ist XML ein Standard, welcher vom W3C-Konsortium verwaltet wird. Das folgende Beispiel zeigt eine typische XML-Struktur.

<?xml version=„1.0“ ?>
<!DOCTYPE gruss [
	<!ELEMENT gruss #PCDATA>
	<!ELEMENT inhalt #PCDATA>
]>
<gruss>Hallo XML!</gruss>
<inhalt>
Hier schreiben wir einen schönen 
Text, der als „inhalt“ klassifiziert wird.
</inhalt>

Quellcode 2. XML-Beispiel 1

In der ersten Zeile des Beispiels wird die Nummer für die verwendete XML-Version angegeben. Darauf folgt in der nächsten Zeile die Angabe welcher Dokumententyp zu verwenden ist. Dieser kann entweder –wie im Beispiel– direkt angegeben sein, oder aber in einer gesonderten Dokumententyp-Definition-Datei (DTD-Datei) ausgelagert sein.
Im der DTD wird angegeben, wie ein Tag zu interpretieren ist. In diesem Fall werden die beiden neuen Tags <gruss> und <inhalt> mittels der Angabe <!ELEMENT * #PCDATA> als Textfelder definiert.
Die XML-Spezifikation enthält weit mehr Element-Typen. So lassen sich alle HTML-Tags durch XML-Definitionen festlegen: XML ist somit eine Oberklasse von HTML. Aufgrund der Erweiterbarkeit und Plattformunabhängigkeit von XML bietet es sich als universelles Speicherformat für Datensätze an. So zeigt das folgende Beispiel, wie ein Benutzerdatensatz aussehen könnte:

<?xml version=„1.0“ ?>
<!DOCTYPE user SYSTEM „user.dtd“>
<user id=“1000“>
  <name>Wolfgang Wiese</name>
  <login>unrzc9</login>
  <email>Wolfgang.Wiese@rrze.uni-erlangen.de</email>
</user>

Quellcode 3. XML-Beispiel 2

Ein weiterer Vorteil von XML ist der, daß die neuste Generation der Webbrowser (Internet Explorer 5.0, Netscape 6.0 ) in der Lage sind, XML-Dateien zu lesen und entsprechend der DTD anzuzeigen.

3. CGI

CGI steht für Common Gateway Interface und definiert einen standardisierten Weg, Daten aus einem HTML-Formular an einen Webserver zu übertragen, welcher wiederum mit diesen Daten als Argument einen neuen Prozeß (CGI-Programm) startet.
CGI Mechanismus
Die Abbildung zeigt dieses Schema. Aus einer HTML-Seite werden die Daten eines Formulars zuerst an den Webserver geschickt. Dieser ruft als nächstes ein CGI-Programm auf und übergibt diesem die eingegebenen Daten.
Das CGI-Programm verarbeitet diese Daten und übergibt dem Webserver als Antwort entweder Statusinformationen oder, im häufigsten Fall, den Content-Type und den Inhalt einer neuen Seite. Mit Hilfe von CGI-Programmen lassen sich komplexe Funktionen auf einer Website realisieren, angefangen bei dem einfachen ausfüllen und speichern eines Formulars, bis zu CGI-Programmsystemen mit denen Server konfiguriert und gesteuert werden können. Da bei CGI nur die Art der Datenübergabe geregelt ist, ist die Programmiersprache, die für das CGI-Programm verwendet wird, nicht festgelegt. Das CGI ist somit weitgehend plattformunabhängig. Da ein CGI-Programm auf dem Server ausgeführt wird, auf dem das aufgerufene CGI-Programm liegt, ist es unabhängig davon, welchen Browser oder welches Betriebssystem der Benutzer, also die Person, die es ausführt, verwendet. Ein einführendes Tutorial zu CGI befindet sich im CGI-Teil dieser Website.

4. SSI

Mit Hilfe von SSI, d.h. „Server-Site Includes“ lassen sich Befehle innerhalb einer HTML-Seite einbauen, die vom Webserver ausgeführt werden. Im Normalfall handelt es sich bei diesen Befehlen um dynamische Ausgaben, wie z.B. die Systemzeit oder die Kennung des verwendeten Browsers. Es lassen sich jedoch auch Programme starten und deren Ausgabe in die Datei einbetten. Da SSI-Befehle vom Webserver ausgeführt werden, „sieht“ der Benutzer diese in der Regel nicht: Der Webserver verarbeitet diese Befehle zuerst und zeigt dann die Ergebnisse innerhalb der vom Benutzer angeforderten Webseite an.
SSI ist technisch als Ergänzung zu HTML zu verstehen, um den Zugriff auf CGI-Programmen zu vereinfachen. Ebenso wie bei CGI ist SSI unabhängig davon, welcher Browser oder welches Betriebssystem vom Benutzer genutzt wird.
Eine Übersicht zu SSI findet sich im CGI-Teil dieser Website.

5. PHP

Ähnlich wie SSI arbeitet PHP. PHP steht für „Hypertext Preprocessor“ und ist eine serverseitig interpretierte Skriptsprache, welche in den HTML-Quellcode eingebunden werden kann. PHP hat eine ähnliche Syntax wie C, Java und Perl, hat jedoch zusätzlich einige Features wie z.B. Kommandos zum Zugriff auf Datenbanken.
PHP kann sowohl über ein Modul in die Seite integriert werden als auch als CGI aufgerufen werden. Der folgende Quellcode zeigt ein Beispiel, wie ein PHP-Aufruf in HTML eingebunden wird:

<html>
<head>
<title>PHP-Beispiel</title>
</head>
<body> 

<? 
    echo „Hallo Welt!“;
?>

</body>
</html>

Quellcode 4. PHP-Beispiel

Bei der Anforderung der obigen Datei durch einen Benutzer wird der Webserver diese zuerst lesen, den PHP-Teil (im Beispiel blau markiert) interpretieren, d.h. den PHP-Teil durch dessen Ausgabe ersetzen und die Seite mit dem interpretierten Inhalt an den Benutzer weiterleiten. Ein Tutorial, sowie weitere Informationen zu PHP finden sich auf der Webseite vom PHP-Center.

6. Java

Java wurde seit 1990 von SUN entwickelt und 1995 der Öffentlichkeit vorgestellt. Es handelt sich dabei um eine objektorientierte Programmiersprache mit deren Hilfe es möglich ist, interaktive Programme in Form eines „Applets“ in einem Browser ablaufen zu lassen. Ein Applet ist ein Programm, welches innerhalb der HTML-Seite eingebunden wird [Zitat: "Contentmanagement für das Intranet des Klinikums der Universität Erlangen-Nürnberg", Stephan Raabe, Studienarbeit, Lehrstuhl Betriebssysteme].
Java ist plattformunabhängig: Das eigentliche Programm wird auf dem Quellrechner vorkompiliert und die Referenz darauf im HTML-Quellcode eingebunden. Bei einem Aufruf wird das Javaprogramm mittels der auf dem Ziel-Rechner befindlichen „Java Virtual Machine“ (JVM) lauffähig gemacht und gestartet. Die JVM ist auf jedem Betriebssystem installierbar und verarbeitet den vorkompilierten Bytecode des Quellrechners, um daraus einen Maschinencode zu machen, der vom Zielrechner ausgeführt werden kann [Zitat: "Web Professional", Rainer Kolbeck, Interest Verlag, 1998, ISBN 3-8245-0402-2].

7. JavaScript

JavaScript ist eine Entwicklung der Firmen SUN und Netscape. Im Gegensatz zu den anderen hier aufgeführten Techniken, wird JavaScript vollständig Browserseitig ausge-führt. Das bedeutet, daß JavaScript nicht durch den Webserver, auf dem die Seite liegt, ausgeführt wird, sondern durch den Browser auf dem Rechner des Benutzers.
JavaScript lehnt sich in der Syntax an Java an, wird allerdings nicht vorkompiliert und ist eine Skriptsprache. Der JavaSkript-Quellcode wird dabei direkt in die HTML-Seite eingebunden.


<html>
<head>
<title>JavaScript-Beispiel</title>
</head>
<body>
Hallo 

<script language="JavaScript">
  document.writeln("Welt!");
</script>

</body>
</html>

Quellcode 5. JavaScript-Beispiel

Das Beispiel aus Quellcode 5 zeigt das Vorgehen. Im Beispiel wird als Ergebnis der String „Welt!“ mit Hilfe von JavaScript ausgegeben, so daß letztlich im Browser der Text „Hallo Welt!“ zu sehen ist [Aus: "JavaScript - 7-Tage-Crashkurs", Arman Danesh, Markt&Technik, 1996, ISBN 3-8272-5176-1].
Damit JavaScript ausgeführt werden kann, muß der Browser des Benutzers dieses verstehen bzw. die JavaScript-Funktion eingeschaltet haben. Da JavaScript jedoch schon weit verbreitet ist und von über 90% aller Browser verstanden wird, hat sich diese Technik weitgehend etabliert.

8. ASP

ASP heißt „Active Server Pages“. Es ist eine Technik vergleichbar mit CGI und PHP, wobei es jedoch eine Eigenentwick-lung von Microsoft ist. ASP läßt sich derzeit fehlerfrei nur auf den Webserver Microsoft-IIS ausführen, hat dafür aber auch Zugriff auf Funktionen, die mittels der Skriptsprache ActiveX® implementiert sind [Siehe auch: ASP-Forum, http://www.asp-forum.de]. Aufgrund von Sicherheitsproblemen, insbesonders bei der Nutzung von ActiveX®, sowie der Beschränkung auf den Webserver, geht die Nutzung von ASP derzeit stark zurück.
Ähnlich wie PHP, kann es in Webseiten durch eine umrandende Markierung eingebunden werden. Man verwendet hier die Kennzeichnung durch <% ... %>.

9. Sonstiges

Weitere Techniken, die benutzt werden können, sind DHTML („Dynamic HTML“), CSS („Cascading Style Sheets“), Shockwave, ActiveX® und VRML („Virtual Reality Modelling Language“). Diese spielen jedoch bei der Implementierung von interaktiven Webseiten eine geringe Rolle. Besonders CSS und DHTML werden zwar häufig angewendet, jedoch liegt ihre Bedeutung mehr darin, das Design einer Seite zu bestimmen und nicht aktiv einen Mechanismus zu steuern.
Ein Vergleich der meisten der oben genannten Techniken mit einer Trennung auf serverseitige und clientseitige Techniken findet sich im Artikel Interaktive Mechanismen für Webseiten.

10. Akzeptanz und Nutzung der Webtechniken

Da ein nicht unerheblicher Zeitaufwand bei der Implementierung von interaktiven Webseiten für die Unterstützung der oben angesprochenen Techniken benötigt wird, stellt sich die Frage, inwieweit diese überhaupt genutzt werden.
Derzeit gibt es jedoch in dieser Richtung nur wenige Forschungsberichte, bzw. bewerten diese nicht direkt die benutzten Techniken, sondern nur das Surfverhalten der Benutzer [Siehe hierzu auch: "Studie. Websites vergraulen Surfer", c't Bericht zur Studie des Forschungsschwerpunkts Kommunikation an der FH Düsseldorf, Juli 2000].
Abschätzungen über die Nutzung von JavaScript oder CSS auf publikumsstarken Websites sprechen zwar von einer Nutzung von über 80%, jedoch muß dies nicht für alle Seite gelten. Man hat hier das Problem, daß Websites, die von größeren Unternehmen oder Online-Dienstleistern angeboten werden, eine hohe Änderungs- und Verbesserungsrate haben, während einfache Homepages oder Seiten bei denen nur wenige Benutzer auftreten kaum mit neueren Techniken versehen werden. Auch in diesem Punkt spielen Image-Überlegungen der Unternehmen eine große Rolle und wieviel Geld diese für eine akkurate Pflege der Website ausgeben.

Auswertung der Umfrage
In Form einer Online-Umfrage wurde versucht eine Abschätzung darüber zu erhalten, welche der angegebenen Techniken am häufigsten von Webdesignern und Programmierern eingesetzt wird. Die Umfrage fand vom 22.5.2000 bis zum 5.6.2000 auf xwolf.com statt und erfaßte die Meinungen von 405 Personen zu der Frage: „Welches ist Ihre bevorzugte Programmiersprache zur Gestaltung dynamischer Webseiten?“.
Aus den Ergebnissen nach (siehe Abbildung) erkennt man, daß CGI, JavaScript und PHP am häufigsten genutzt werden, während ASP und sonstige Techniken keine große Rolle mehr spielen.

Anmerkung:

Dieser Artikel ist ein Auszug aus meiner Diplomarbeit "Konzeption und Realisierung eines Web-Content-Management-Systems am Beispiel des Rechenzentrums Erlangen-Nürnberg", welche über die Diplomarbeitenbörse Diplom.de käuflich erwerbbar ist.