WWW

Hypertexte sind Dokumente (Webseiten), die auf (Hosts mit) Webservern (WWW-Server-Diensten) abgelegt sind oder dort dynamisch generiert werden und durch Verweise (Hyperlinks) miteinander verknüpft sind.

Webseiten werden im Internet durch (Hosts mit) Webclients (WWW-Client-Applikationen, Webbrowser/WWW-Browser) abgerufen und dargestellt (HTML-Rendering).

Client-Server-Applikationsprotokoll für die Kommunikation zwischen Webclient und Webserver.

HTTP-Methode

Dabei wählt der Client (Browser) eine geeignete Methoder unter diesen aus:

• GET (Seitenanforderung) [Standard]

• HEAD (nur Abfrage der Ressourceninformationen)

• POST (Formulareingabedatenu ̈bertragung)

• PUT (Sendung für die Speicherung auf dem Server)

URL/Pfad der Ressource

Protokollversion: (HTTP/1.1)

Protokollversion: (HTTP/1.1)

Statuscode und Text

Dabei antwortet der Server mit einem dieser Codes entsprechend:

• 2[…] - Erfolg (200 OK)

• 3[…] - Umleitung (301 moved permanently)

• 4[…] - Clientfehler (401 unauthorized, 404 not found)

• 5[…] - Serverfehler (505 HTTP Version not supported)

Request-Headers

• Host: www.uni-wuppertal.de (Server-Host, ggf. vhost)

• User-Agent: Mozilla/5.0 ... (Browser)

• Accept: text/html (akzeptierte Dateitypen)

• Accept-Encoding: gzip,deflate (Komprimierung)

• Accept-Charset: utf8,iso-8859-1 (Zeichensätze)

• Cookie: ... (Cookie als Information für den Server)

Response-Headers

• Set-Cookie: ... (Cookie zur Speicherung beim Client)

• Server: Apache/2.4.6 (Linux/SUSE) (Webserver)

• Content-Length: 32185 (Länge der Ressource im Body)

• Content-Type: text/html;charset=utf8 (Ressourcentyp)

• aktuelles Datum, letzte Änderung ...

Hinweis zur Formulareingabedatenübertragung

• GET: Die Formulardaten werden an die URL als Query String angehängt und in der Request-Line an den Server gesendet. Der Request-Body ist bei diesen Anfragen leer

• POST: Die URL bleibt unverändert und die Formulardaten werden im Request-Body übertragen.

HTTPS (HTTP Secure)

Erweiterung des HyperText Transfer Protocol (HTTP/1.x) für sichere, d. h. Server-authentifizierte, authentizitätsüberprüfte, unverfälschbare und verschlüsselte Übertragung der Daten durch Verwendung von SSL/TLS

CSS (Cascading Style Sheets, seit HTML 4)

Trennung von Form und Inhalt bei Webseiten durch Nutzung auslagerbarer (syntaktisch neuer) Darstellungsinformationen für HTML-Dateien. Mit Einbindung externer CSS-Ressourcen ist die gleichzeitige Designveränderung aller Webseiten einer Website problemlos möglich – etwa bei Modifikation des Corporate Design (CD als Teil der CI) einer Einrichtung. (aktuell: CSS3, modularer Aufbau, weitgehend standardisiert)

JavaScript (Microsoft: JScript)

Programmiersprache für eingebettete Scripts in HTML-Seiten. Die Programm-Scripts (<script>...</script>) werden durch den Webbrowser in einer Sandbox dynamisch während des Seitenaufbaus (Rendering) ausgeführt (interpretiert). Webseiten können somit zu verschiedenen Aufrufzeitpunkten und in verschiedenen Browsern sowie auf verschiedenen Hosts unterschiedliches Aussehen und verschiedene Inhalte haben.

DOM (Document Object Model)

Programmierschnittstelle (API) für den Zugriff auf Attribute von Webseiten insb. durch JavaScript.

DHTML (Dynamic HTML, DOM-Scripting)

Kombination von HTML, JavaScript und DOM. Webdesign-Methode für clientseitig dynamische Webseiten.

Webclients (Webbrowser)

sind Programme, die WWW-Ressourcen (insb. HTML-Seiten) von Webservern (vorwiegend per HTTP(S)) abrufen und darstellen (Rendering via HTML/XML-Engine)

Beispiele

• Firefox

• Opera

• Internet Explorer

• Microsoft Edge

• Safari

• ...

Webclients sind oft (nicht standardisiert) funktional erweiterbar

• Content PlugIns

  Schnittstellen zu externen Programmen (Helper-Applications) für die Darstellung extern generierter Inhalte in einem Webbrowser-Fenster: Adobe Acrobat Reader, Flash Player ...

• Browser AddOns

  Installierbare Zusatzmodule für diverse Zwecke: Sprachübersetzung (BabelFish), Oberflächengestaltung, Web-Mail-Notifier, Sicherheit (Flagfox), Datenschutz ...

Webserver sind Server-Dienste (Services) auf Hosts, die Ressourcen wie HTML-Seiten, CSS-Dateien, JPG-/GIF-/PNG-Graphiken etc. an Webclients per HTTP(S) ausliefern.

Beispiele: Apache, Microsoft IIS, Sun-Webserver ...

Hinweis: Oft werden auch die Hosts, auf denen Webserver-Dienste angeboten werden, als ”Webserver“ bezeichnet.

Differenzierung

1. Webserver mit statischen Seiten

2. Webserver mit (serverseitig generierten) dynamischen Inhalten

3. Application Server

4. Web Content Management System (WCMS, CMS)

Webserver mit statischen Seiten

1. Anfrage des Webclients an den Webserver (HTTP-Request):

   • GET + [URL der Ressource]

2. Server holt die angefragte Ressource aus seinem Dateisystem,

   soweit diese vorhanden und auslieferbar ist

3. Antwort des Webservers an den Webclient (HTTP-Response):

   • 200 (OK) + [Ressource]

     oder entsprechende Fehlermeldung, z. B.

   • 404 (Not found)

4. Client stellt die ausgelieferte Webseite mit der entsprechenden

   Rendering-Engine (HTML, XML) dar.

   
   

Das muss ich noch lernen

Bei Bedarf werden dabei zusätzliche Komponenten genutzt:

• JavaScript/JScript-Engine in einer Sandbox (DHTML)

• Java Virtual Machine (JavaVM) für Java-Applets

• PlugIns: Darstellung der Ausgabe von Helper-Applications

• AddOns: Modifikation der Seiteninhalte.

Webserver mit dynamischen Inhalten

Zusätzlich zu o.g. Funktionalität der Auslieferung statischer WWW-Ressourcen erzeugt der Webserver nach Anforderung (HTTP-Request) dynamisch in einem Webcontainer oder per Script-Engine HTML-Seiten, die anschließend wie statische Seiten an den Browser geschickt werden (HTTP-Response)

Beispiele serverseitiger Script-/Programmiersprachen

• PHP (PHP: Hypertext Preprocessor) per Apache-Modul (→ LAMP/WAMP)

• ASP (MS Active Server Pages) per IIS-Modul, ASP.NET

• Python (Webserver-Modul)

• Perl via CGI-Schnittstelle (Common Gateway Interface)

• Java-Servlets: Java-Klassen, deren Instanzen in einem Servlet-Container (z. B. Tomcat) auf dem Webserver erzeugt werden.

Web Content Management System

Ein WCMS (oft kurz CMS, Inhaltsverwaltungssystem) dient der gemeinsamen Redaktion von Websites, also der Erstellung, Bearbeitung und Organisation von WWW-Inhalten.

Die Inhalte (Contents) werden durch das WCMS automatisch (meist CD-konform) dynamisch oder turnusmäßig formatiert. Durch komfortable Redaktionssysteme für die Bearbeitung der Inhalte benötigen Webredakteure i. d. R. kein überreguläre Textverarbeitungs-Fähigkeiten hinausgehendes Spezialwissen zu HTML, XML, CSS etc.

Ein WCMS kann auf mehrere Hosts verteilt sein:

• Redaktionssystem (Intra-/Extranet, meist WWW-basiert)

• Datenbank für Contents (interne Zone)

• Webserver (demilitarisierte Zone)

WCMS verfügen zumeist über komplexe Rechtesysteme, mit denen sich Rollen und Verantwortlichkeiten festlegen lassen.

Eine medienneutrale Datenhaltung der Inhalte ermöglicht die Erzeugung unterschiedlicher Dokumenttypen (PDF, HTML) sowie responsive Webseiten (Responsive Webdesign).

Beispiele

• Typo3: PHP + Datenbank (MySQL, Oracle ...) (z. B. Webseiten der Uni Wuppertal)

• Joomla! (ehem. Mambo): PHP + MySQL

• p@blish (ehem. CodeZope): altes CMS der Uni Wuppertal

• Drupal (GNU GPL): PHP + MySQL oder PostgreSQL

• RedDot (kommerziell): Open Text Web Solutions AG

• imperia: Perl + Datenbank

  
  

• WordPress (GNU GPL): PHP + MySQL (Tool zur Erstellung einer Website, nur mit Erweiterungen ein WCMS!)

Definition

WWW-Proxy (Vertreter, Bevollmächtigter)

Vermittlungsstelle zwischen Webclients und Webservern für die Zwischenspeicherung von Webinhalten (Webcache).

Der Hauptzweck des Einsatzes von WWW-Proxies besteht in der Reduktion des Datenvolumens [Intranet ↔ Internet] und der schnelleren Verfügbarkeit oft angeforderter Ressourcen

• Proxies arbeiten in der Regel transparent, da HTTP-Requests aus einem Intranet am Gateway in das externe Netz am Port erkennbar sind (HTTP: 80).

• In Webbrowsern lassen sich Proxy-Einstellungen manuell oder automatisch (PAC-Datei, WPAD) konfigurieren.

• Durch den Einsatz von WWW-Proxies sind Seitensperrungen leicht realisierbar.

• Aufgrund der Zwischenspeicherung der Webinhalte gelten für Proxies erhöhte Datenschutz- und Sicherheitsanforderungen.

Beispiele

• JavaFX (SUN/Oracle): Java-basiertes Framework

• Apache Flex: Adobe Flash-basiert (per PlugIn)

• Microsoft Silverlight: proprietäres PlugIn (→ Office 365)

• jQuery, Ext JS: JavaScript-/Ajax-Framework

Ajax (Asynchronous JavaScript and XML)

Durch die XHR-API (XMLHttpRequest-API) XML-fähiger Webbrowser sind HTTP-Requests wie GET, PUT oder POST innerhalb einer Webseite per JavaScript möglich, ohne die Seite neu laden zu müssen.

Angular (AngularJS, Angular 2)

JavaScript- bzw. TypeScript-basierte Webframeworks (Open Source, entwickelt von Google) für die Erstellung von Single-Page-Webanwendungen (Model View ViewModel).

HTML-Ansichten (Views) werden durch Erweiterungen der HTML-tag-Attribute clientseitig generiert. Asynchrone Zugriffsmöglichkeiten (via Ajax, XHR-API) sind integriert.