Kapitel 4: WWW
World Wide Web
Was versteht man unter dem World Wide Web?
Das World Wide Web (WWW) ist ein Client-Server-basiertes Hypertext-System im Internet.
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).
WWW-Architektur
Wie setzt sich die WWW-Architektur zusammen?
1. Kernstandards (HTTP, HTML, URL)
2. Standarderweiterungen (HTTPS, CSS, JavaScript ...)
3. Webclients
4. Webserver
Kapite 4: WWW
Kernstandards der WWW-Architektur
Wie lauten die Kernstandards der WWW-Architektur?
HTTP (HyperText Transfer Protocol)
Client-Server-Applikationsprotokoll
HTML (HyperText Markup Language)
Dokumentenbeschreibungssprache
XHTML (eXtensible HyperText Markup Language)
XML-Reformulierung (eXtensible Markup Language) durch das W3C (WWW Consortium). HTML 4.01 = ̃ XHTML 1.0
URL (Uniform Resource Locator, Quellenanzeiger)
Eindeutige Adresse einer WWW-Ressource (z. B. Webseite)
Format: <Zugriffsmechanismus>:<Ort>
URI (Uniform Resource Identifier)
Verallgemeinerung
Format: <Schema>:<schemaspezifischer Teil>
HTTP
Was ist HTTP? Beschreiben Sie die Funktion.
Client-Server-Applikationsprotokoll für die Kommunikation zwischen Webclient und Webserver.
HTTP-Kommunikation wird jeweils vom Client (Webbrowser) initiiert und besteht aus Frage-Antwort-Paaren:
HTTP-Request
Anfrage des Clients an den Server
Methode (Was ist zu tun?)
Adresse einer Ressource (Welche Webseite?)
Version (Wie soll die U ̈bertragung erfolgen?)
HTTP-Response
Antwort des Servers
Status (Erfolgreich! / Nicht erfolgreich und warum!)
Ressource (soweit erfolgreich)
Version (So erfolgt die Übertragung!)
Skizzieren Sie die HTTP-Kommunikation und nennen Sie Bestandteile der Kommunikation.
Request/Response-Line: wesentliche Informationen in Kürze
Request/Response-Headers: Metainformationen über den Inhalt
Request/Response-Body: Inhalt (übertragene Daten, Ressource)
Beschreiben Sie Line für Request und Response.
setzt sich folgendermaßen zusammen:
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)
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)
Beschreiben Sie Headers für Request und Response.
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)
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 ...
Header-Format: Name: Wert
ℹ Nicht alle Headers müssen vorhanden sein
Beschreiben Sie Body für Request und Response.
GET: leer (Standardanfrage)
POST: Formulareingaben
HEAD: leer (Anfrage)
PUT: Datei für die Speicherung auf dem Server
angeforderte Ressource oder leer (z. B. nach HEAD-Request)
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.
HTTP-Ports
Welchen Port nutzt HTTTP üblicherweise?
HTTP Port 80/TCP
Standard-Erweiterungen der WWW-Architektur
Nennen Sie die Standard-Erweiterungen der WWW-Architektur und erläutern Sie ihre Funktionen.
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.
Web-Clients als Teil der WWW-Architektur
Erläutern Sie den Begriff Web-Client und nennen Sie Erweiterungsmöglichkeiten.
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 als Teil der WWW-Architektur
Erläutern Sie den Begriff Webserver und nennen Sie Differenzierungspunkte.
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
Webserver mit statischen Seiten
Webserver mit (serverseitig generierten) dynamischen Inhalten
Application Server
Web Content Management System (WCMS, CMS)
Webserver mit statischen Seiten (1)
Welche Interaktion findet auf Webservern mit statischen Seiten statt?
Anfrage des Webclients an den Webserver (HTTP-Request):
GET + [URL der Ressource]
Server holt die angefragte Ressource aus seinem Dateisystem,
soweit diese vorhanden und auslieferbar ist
Antwort des Webservers an den Webclient (HTTP-Response):
200 (OK) + [Ressource]
oder entsprechende Fehlermeldung, z. B.
404 (Not found)
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 (2)
Wie sieht der Aufbau von Webservern mit dynamischen Inhalten aus?
Nennen Sie Beispiele zu serverseitigen Script-/Programmiersprachen
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.
Application Server (3)
Webserver mit dynamischen Inhalten, bei denen die Engine für die serverseitige Ausführung von Script-/Programmiersprachen (Script-Engine/Webcontainer für die dynamische Erzeugung von WWW-Ressourcen) in einem Web Application Framework integriert ist.
TomEE: Apache Webserver + Tomcat (als Framework)
WildFly (JBoss/Red Head): plattformunabhängig, konform zum Java EE-Standard (Java Enterprise Edition)
Apache Geronimo: Open Source Java EE Anwendungsserver
ZOPE (Z Object Publishing Environment): Python-basiert
WebLogic (Oracle): Java EE Anwendungsserver
WAS (WebSphere Application Server, IBM): Java EE Server
Oracle Application Server: Anwendungsserver mit Datenbank
WCMS (4)
Was ist ein WCMS und welche Funktionen und Eigenschaften erfüllt es?
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).
Nennen Sie beispielhafte Web Content Management Systeme.
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!)
Ergänzungen und Hinweise zur WWW-Architektur
Neben dynamischen Webseiten, die clientseitig erzeugt werden:
DHTML (HTML + JavaScript + DOM)
Java-Applets (Ausführung in der JavaVM-Sandbox)
und solchen, die serverseitig erzeugt werden
PHP, ASP, Python (per Webserver-Modul)
externe Interpreter/Module via CGI (Perl etc.)
Java-Servlets (Ausführung im Sevlet-Container)
gibt es auch Mischformen, also Kombinationen client- und serverseitiger dynamischer Funktionalität.
Proxy
Was ist die Funktion eines Proxys und wie interagiert ein Proxy?
Definition
WWW-Proxy (Vertreter, Bevollmächtigter)
Vermittlungsstelle zwischen Webclients und Webservern für die Zwischenspeicherung von Webinhalten (Webcache).
Anfrage
[Browser → Proxy] (HTTP-Request)
Falls die angeforderte Ressource bereits im Proxy-Cache vorhanden und (ggf. nach HEAD-Request) nicht veraltet ist ⇒ OK ⇒ 3.
Ansonsten
Anfrage [Proxy → Webserver]
Antwort [Webserver → Proxy] (Auslieferung der Ressource)
Speicherung der Ressource im Proxy-Cache
Antwort
[Proxy → Browser] (HTTP-Response)
Auslieferung der Ressource aus dem Proxy-Cache
Was zeichnet ein Proxy aus und welche Eigenschaften und besitzt es?
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.
RIA
Was bedeutet RIA?
Erläutern Sie die Funktionen und Eigenschaften.
RIA (Rich Internet Application)
Web-Applikationen, d. h. Anwendungen, die über das WWW, also via Webschnittstelle (per Webbrowser) zu bedienen sind, aber das ‘Look&Feel’ einer Desktop-Applikation haben.
Voraussetzung dafür ist schneller asynchroner Datenaustausch zwischen Webclient und RIA-Webserver, der clientseitig z. B. durch leistungsfähige JavaScript-(Ajax-)Bibliotheken, Java oder Adobe Flash ermöglicht wird.
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 und Angular
Was bedeuten Ajax und Angular?
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.
Web 2.0
Was ist Web 2.0?
ist keine (Internet-)Technologie, sondern die Beschreibung der inzwischen üblichen und weiterentwickelten Nutzungsweisen des WWW (sowie anderer Internetdienste) auf Basis bereits vorhandener Technologien (TCP/IP, HTTP, HTML etc.):
Blogs
Twitter
Podcasts
Wikis: Online-Lexika
Integration weiterer Internetdienste ins WWW
Last changed7 months ago