Stand: 24.04.2022

1.1 Über die Vorlesung

Diese Vorlesung ist eine gemeinsame Vorlesung von Prof. Kipp und Prof. Winter für den Studiengang Interaktive Medien im 2. Semester und hat dementsprechend zwei Teile. Im ersten Teil der Vorlesung (Prof. Kipp) geht es um Hintergründe und Technik von Webseiten, hauptsächlich um das Frontend, aber auch um die Interaktion zwischen Frontend und Backend. Im zweiten Teil der Vorlesung (Prof. Winter) geht es um Netzwerke, das Internet und Security.

Dieses Skript deckt nur den ersten Teil von Prof. Kipp ab.

Benötigte Software

Für diesen Teil der Vorlesung benötigen Sie die folgenden Programme:

1.2 Geschichte des World Wide Web

In diesem Teil der Vorlesung beschäftigen wir uns mit Websites und bewegen uns somit auf der Ebene des World Wide Web (WWW). Das WWW ist nur ein Teil des Internets, wie auch in der Definition von Wikipedia (Abruf: 03/2019) klar wird:

Umgangssprachlich wird das World Wide Web oft mit dem Internet gleichgesetzt, es ist jedoch jünger und stellt nur eine von mehreren möglichen Nutzungen des Internets dar. [...] Zum Aufrufen von Inhalten aus dem World Wide Web wird ein Webbrowser benötigt, der z. B. auf einem PC oder einem Smartphone läuft. Mit ihm kann der Benutzer die auf einem beliebigen, von ihm ausgewählten Webserver bereitgestellten Daten herunterladen und auf einem geeigneten Ausgabegerät wie einem Bildschirm oder einer Braillezeile anzeigen lassen. Der Benutzer kann dann den Hyperlinks auf der angezeigten Webseite folgen, die auf andere Webseiten verweisen, gleichgültig ob diese auf demselben Webserver oder einem anderen gespeichert sind. So ergibt sich ein weltweites Netz aus Webseiten. Das Verfolgen der Hyperlinks wird auch als „‍Surfen im Internet“ bezeichnet.

Schauen wir uns einen selektiven Abriss der Geschichte des WWW an.

1960 Ted Nelson erfindet Hypertext mit seinem Xanadu-Projekt

1989 Tim Berners-Lee (CERN) erfindet das World Wide Web, um interessante Informationen mit Kollegen auszutauschen

1990er Jahre Zunehmend dynamische Webseiten für z.B. für das Online-Shopping; der Client zeigt Sicht auf das Kundenkonto (auf dem Server), welches ständig aktualisiert wird. Man spricht von Web-Applikation, wo der Browser die grafische Schnittstelle wird, wohingegen auf dem Server die eigentliche Programmlogik liegt. Dem User werden individuelle Webseiten zugespielt.

seit 2000 Aufkommen des Web 2.0

Definition von Web 2.0 bei Wikipedia (Abruf 03/2019):

Web 2.0 ist ein Schlagwort, das für eine Reihe interaktiver und kollaborativer Elemente des Internets, speziell des World Wide Webs, verwendet wird.

2004 Der Begriff Soziale Medien ersetzt nach und nach den Begriff des Web 2.0. Die bekanntesten großen Netzwerke sind Facebook und Twitter. Facebook verkündete 2010, dass die Plattform 500 Millionen User erreicht hat. 2011 war Facebook die am zweit-häufigsten besuchte Website weltweit nach Google.

Definition von Social Media bei Wikipedia (Abruf 03/2019):

Social Media (auch soziale Medien) sind digitale Medien und Methoden, die es Nutzern ermöglichen, sich im Internet zu vernetzen, sich also untereinander auszutauschen und mediale Inhalte einzeln oder in einer definierten Gemeinschaft oder offen in der Gesellschaft zu erstellen und weiterzugeben.

1.3 Grundbegriffe im Internet

Wir schauen uns hier ein paar grundlegende Mechanismen sowohl des Internets aber insbesondere des WWW an.

Das Internet ist zunächst eine Ansammlung von Rechnern (Ihr Laptop, Ihr Smartphone/Tablet, die Server von Universitäten, Regierungseinrichtungen und Firmen und viele mehr), die alle miteinander kommunizieren. Heutzutage kommen zum Beispiel Autos, Haushaltsgeräte und Armbanduhren dazu.

Client und Server

1.3.1 Kommunikation

Die Kommunikation findet über Kabel (sogenannte Ethernetkabel) oder drahtlos (WLAN) statt.

Eine Form der Kommunikation ist es, Nachrichten von einem Absender zu einem Adressaten zu schicken. Eine Nachricht besteht aus mindestens dem Adressaten (wer soll die Nachricht bekommen) und natürlich dem Inhalt (Text, Bild, Dokument etc.).

Wenn Nachrichten verschickt werden, werden diese in kleinere Pakete zerlegt. Diese Pakete werden dann über mehrere Rechner hinweg an den Adressaten geschickt und dort wieder zur ursprünglichen Nachricht zusammengesetzt. Damit dies möglichst ohne Fehler und möglichst ohne Verlust von Daten funktioniert, gibt es Protokolle, die den grundlegenden Ablauf festlegen und Fehler und Verluste beheben bzw. verhindern (oder minimieren). Für Webentwickler ist das HTTP am relevantesten, weil über dieses Protokoll Webseiten verschickt werden.

Das HTTP-Protokoll setzt auf zwei anderen Protokollen auf, nämlich IP und TCP, die häufig in Kombination "TCP/IP" genannt werden.

1.3.2 Adressen

Wie erwähnt benötigt jede Nachricht einen Adressaten. Wie werden Rechner im Internet "angesprochen"? Jeder Rechner hat eine eindeutige IP-Adresse (IP bezieht sich auf das Protokoll). Diese ändert sich normalerweise bei jeder neuen Einwahl ins Internet, man nennt das auch dynamische Adressvergabe. Sie können Ihre aktuelle IP-Adresse z.B. ansehen bei http://www.wieistmeineip.de.

Wichtige Server haben eine statische IP-Adresse. Unsere Hochschule (HS Augsburg) hat die IP-Adresse

141.82.25.17

Das IP-Adressen aus Zahlen bestehen, fällt es Menschen schwer, sich diese zu merken. Daher gibt es menschenlesbare Domains, wie z.B.

www.hs-augsburg.de

Eine Domain besteht aus drei Teilen:

<subdomain>.<domain>.<top-level domain>

Wie funktioniert die Zuordnung von Domänen zu IP-Adressen? Dazu gibt es spezielle Server, sogenannte DNS-Server. Diese Server sind die "Telefonbücher" des Internets. DNS steht für Domain Name System.

1.3.3 Dienste und Ports

Im Internet werden Daten zu sehr unterschiedlichen Zwecken verschickt. Es werden Dokumente und Fotos runtergeladen, es werden Mails verschickt und Webseiten transportiert. Man spricht hier von verschiedenen Diensten. Die meisten Dienste haben ein eigenes Kommunikationsprotokoll:

Jeder Rechner hat, sobald er mit dem Internet verbunden ist, eine eindeutige IP-Adresse. Damit verschiedene Dienste (z.B. e-Mail, Webseiten, Datei-Download) gleichzeitig mit dem Rechner kommunizieren können, gibt es verschiedene "Andockstellen" eines Rechners, genannt Ports.

1.3.4 URL

Mit Hilfe der IP-Adresse können Sie einen spezifischen Rechner im Internet ansprechen. Wenn Sie jetzt eine spezifische Webseite aufrufen möchten, brauchen Sie ein Format, in dem Sie diese angeben können. Dies nennt sich URL (Uniform Resource Locator) und wurde in einer ersten Form bereits von Tim Berners-Lee entwickelt.

In einem Browser haben Sie einen Eingabereich, wo Sie z.B. folgende Textzeile eingeben können:

www.hs-augsburg.de

Dies ist allerdings nur ein Teil der URL. Die Anfrage funktioniert aber trotzdem, da Ihr Browser fehlende Teile ergänzt. Eine vollständige URL sieht z.B. so aus:

  http://www.hs-augsburg.de/index.html

Dabei ist

Im Browser wird die Angabe ":80" weggelassen, da diese Angabe immer gleich ist. Auch das "http:" wird oft weggelassen oder in grau automatisch vorangestellt.

URLs gibt es nicht nur für Webseiten, sondern auch für andere Dienste wie Filezugriff und Mails (sichtbar am Schema). Für uns relevant ist aber hier nur das Schema für HTTP.

Für HTTP sieht die URL allgemein so aus (Teile in eckigen Klammern sind optional):

scheme://host:port/pfad/.../[?Query][#Fragment]

Die zwei optionalen Teile sind

Beispiel für eine URL mit Query:

https://www.youtube.com/watch?v=U7ILbfPxAIw

Beispiel für eine URL mit Fragment:

https://de.wikipedia.org/wiki/Edward_Snowden#Leben

1.4 Grundprinzipien im WWW

1.4.1 Client-Server

Zwei wichtige Begriffe, die immer wieder auftauchen werden, sind Client und Server.

Das Internet ist wie gesagt eine Ansammlung von Rechnern. Wenn zwei Rechner miteinander kommunizieren, gibt es zwei mögliche Rollen in der Kommunikation: ein Rechner ist der Client, der andere Rechner ist der Server.

Client und Server

Rollenverteilung

Was bedeuten diese Rollen? Der Server bietet einen Dienst an (z.B. eine Webseite auszuliefern) und der Client kann diesen Dienst anfordern. Der Server wartet also passiv auf mögliche Anfragen. Der Client muss aktiv die Verbindung aufnehmen, indem er eine erste Anfrage stellt (in Form einer Nachricht). Der Transport von Nachrichten erfolgt im Internet in der Regel über mehrere Rechner und wird über die entsprechenden Internetprotokolle so gehandhabt, dass sichergestellt ist, dass die Nachricht beim richtigen Rechner und ohne Verluste ankommt.

Client und Server

Wir abstrahieren vom Transport durchs Internet und stellen in der Regel nur Client und Server und ihre Kommunikation dar. Natürlich kann auch der Server Nachrichten zurück an den Client schicken (z.B. um die Webseite auszuliefern).

Client und Server

Viele Clients, ein Server

Ein Server kann mit vielen Clients gleichzeitig kommunizieren und das ist auch der "Normalfall", d.h. ein Server muss sich mit dem Problem herumschlagen, wie er die Verwaltung der vielen Clients managt.

Client und Server

Zum Begriff Server

Der Begriff "Server" ist manchmal verwirrend, weil viele sich darunter große Hallen mit Serverschränken bei einem Unternehmen wie Google oder Amazon vorstellen. Das ist auch korrekt, weil man mit "Server" auch die Hardware meint. Ein Server aber ist gleichzeitig aber auch eine ganz spezielle Software, die die Kommunikation mit potentiell mehreren Clients managt.

Eine Server-Software muss nicht unbedingt bei einer großen Organisation (Hochschule, Suchmaschine, Shop) verortet sein, Sie können auf Ihrem Laptop einen Server installieren und werden dies spätestens im Kapitel zu PHP tun (Software XAMPP).

Einen eigenen Server installiert man häufig auf dem eigenen Laptop, um bestimmte Web-Mechanismen zu testen. Sie haben dann die Situation, dass Ihr Laptop sowohl Client als auch Server ist:

Client und Server auf eigenem Laptop

1.4.2 Request und Response

Webseiten werden über ein Protokoll namens HTTP (Hypertext Transfer Protocol) durch das Internet transportiert. Dieses Protokoll arbeitet nach dem Prinzip Anfrage-Antwort (Request-Response). Das klingt zunächst einfach, hat aber einige wichtige Implikationen.

Beispiel Webseite

Wenn ein Benutzer eine Internetseite in seinem Browser aufruft, schickt der Browser eine Anfrage mit einem bestimmten Adresse (eine URL, die auch einen Dateipfad enthalten kann) ins Internet. Im Internet wird ein Server identifiziert, der diese Anfrage bekommt. Den Benutzer nennt man in diesem Fall auch Client. Das Grundlegende Prinzip ist das von Request (Anfrage) und Response (Antwort):

Anfrage und Antwort

Um hier einen sinnvollen Austausch hinzubekommen, müssen natürlich noch Daten mitgeschickt werden. Bei der Request sind das die Adresse des Servers (Host-Adresse) und ein Pfad (welche Datei wird angefragt? Zum Beispiel "start.html" oder "login.html"). Bei der Response ist das dann das entsprechende HTML-Dokument.

Anfrage und Antwort mit Infos

Der Server geht auf ein bestimmtes Verzeichnis und sucht nun nach dem in der Anfrage angegebenen Pfad. Wenn der Pfad ein Verzeichnis ist, wird nach einer Datei namens index.html gesucht. Ist die Datei gefunden, schickt der Server diese HTML-Datei zurück an den Browser des Benutzers.

Wie sehen Request und Response aus?

Ein Request ist zunächst mal "nur" eine Textnachricht, die z.B. so aussieht:

GET /index.html HTTP/1.1
Host: www.michaelkipp.de
[Leerzeile]

Allgemein ist die Struktur eines Requests wie folgt

METHODE /path HTTP/version
Header1: value
Header2: value
[Leerzeile]
[optional Request-Body]

Es gibt verschiedene Typen von Requests, genannt Methoden. Die zwei mit Abstand wichtigsten Methoden sind GET und POST (weitere sind z.B. HEAD, PUT oder DELETE). Die beiden Requestarten unterscheiden sich darin, wie Parameter verschickt werden (ein Parameter ist z.B. das Suchwort bei einer Suchanfrage). Bei GET stehen diese in der URL, sind also direkt sichtbar, wohingegen bei POST die Parameter im Request-Body "versteckt" sind.

Diese URL-Angabe resultiert z.B. in einem GET-Request:

https://www.google.com&q=snowden

Die Response ist ebenfalls eine Textnachricht. Die allgemeine Struktur ist wie folgt:

HTTP/version statuscode
explanation
Header1: value
Header2: value
[Response-Body]

Wenn Sie z.B. eine Webseite zugeschickt bekommen, steht in der Response:

HTTP/1.1 200 OK
Date: Mon, 27 Jul 2009 12:28:53 GMT
Server: Apache/2.2.14 (Win32)
Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT
Content-Length: 88
Content-Type: text/html
Connection: Closed

<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>

Der dreistellige Statuscode zeigt an, ob es Probleme beim Bearbeiten der Anfrage gab. Beginnt der Statuscode mit 2 ist alles in Ordnung. Beginnt der Code mit 4, ist ein Fehler aufgetreten, der der Client verursacht hat. Sie kennen sicher den Code 404, der zurückkommt, wenn Sie z.B. eine nicht existierende Seite/Datei aufrufen wollten. Beginnt der Code mit 5, ist ein Fehler auf seiten des Servers aufgetreten.

Mehrere Requests

Die obige Darstellung ist etwas vereinfacht. In Wirklichkeit zieht eine Anfrage fast immer weitere Anfragen nach sich. Eine Webseite besteht nämlich in der Regel aus mehreren Dateien (HTML-Datei, Bilder, CSS-Datei/en, JavaScript-Datei/en etc.). Für jede dieser Dateien wird eine eigene Anfrage gestellt und die Antwort enthält die angeforderte Datei.

Diese verschiedenen Anfragen für eine Webseite werden auch nicht immer an den gleichen Server gestellt. So kann eine Webseite Text und Layout von Server A beziehen und vereinzelt Bilder von Wikipedia und ein Video von YouTube.

Zustandslose Kommunikation

Die mit Abstand wichtigste Eigenschaft der Kommunikation über HTTP ist die Tatsache, dass die Kommunikation zustandslos ist. Das heißt, bei jedem Request weiß der Server überhaupt nichts über die vorige Kommunikation.

In einem Gespräch zwischen zwei Menschen haben Sie zum Beispiel eine (An-)Frage wie

Gesprächspartner C an S: Warum?

S kennt weder die vorigen Anfragen noch die Identität von C. Sie können sich vorstellen, dass ein solcher Dialog schwierig ist.

Selbst einfachste Maschinen haben meist einen Zustand. Stellen Sie sich einen Süßigkeiten- oder Getränkeautomaten vor. Sie sind der Client C, der Automat ist Server S:

C/Anfrage 1: Einwurf von 2 Euro
S/Antwort: Zeigt 2 Euro an

C/Anfrage 2: Süßigkeit im Fach 35 (Kosten: 80 Cent)
S/Antwort: Lässt Schokoriegel raus, zeigt 1,20 Euro an

C/Anfrage 3: Süßigkeit im Fach 42 (Kosten: 1,00 Euro)
S/Antwort: Lässt Gummibärchen raus, zeigt 20 Cent an

C/Anfrage 4: Knopf für Restgeld
S/Antwort: Wirft 20 Cent aus

Ich hoffe, Sie sehen, dass der Zustand hier die Geldmenge ist, die dem Client zur Verfügung steht. Ohne diesen Zustand würde selbst diese doch sehr simple Interaktion nicht funktionieren!

Offensichtlich gibt es aber im Web viele Anwendungen, die einen Zustand haben müssen (z.B. ein Online-Shop mit Ihrem Warenkorb). Das heißt, es muss Mechanismen geben, die es erlauben einen Zustand zu modellieren. Cookies und Sessions sind solche Hilfsmittel, die wir im Kapitel PHP im Web noch kennenlernen werden.

1.4.3 HTML, CSS und JavaScript

Was ist eigentlich eine Webseite? Im Browser sehen Sie eine gelayoutete Seite, oft mit integrierten Bildern, manchmal mit Animationen oder interaktiven Elementen.

Eine Webseite besteht im einfachsten Fall aus einer einzigen Textdatei. Diese Datei entspricht allerdings einem bestimmten Format namens HTML (Hypertext Markup Language). Dieses Format erlaubt es Texte und Ihre Funktion im Layout (Überschrift, Absatz, Navigationselement etc.) zu spezifizieren.

Um stilistische Details wie z.B. Schriftgrößen, Farbe und Positionierung/Abstände einzustellen, gibt es oft eine weitere Textdatei im CSS (Cascading Style Sheets)-Format. CSS hat auch einige Mechanismen zur Animation/Interaktion.

Sobald Sie komplexere Interaktionen sehen oder eine Kommunikation im Hintergrund läuft (z.B. das Nachladen von Informationen), kommt die Programmiersprache JavaScript ins Spiel.

Diese drei Mechanismen sind die wichtigsten "Säulen" im Bereich der Webentwicklung, zumindest was den Frontend-Bereich angeht (s.u.).

Zusammengefasst:

1.4.4 Frontend und Backend

In der Webentwicklung unterscheidet man die Bereiche Frontend und Backend.

Frontend-Backend

Das Frontend bezieht sich auf alles, was im Browser abläuft. Der Browser erhält vom Server Dateien mit HTML, CSS und JavaScript. Der Browser stellt anhand der Informationen in HTML/CSS die Webseite dar und startet etwaige JavaScript-Programmteile. Diese JavaScript-Programme wiederum verändern häufig die Darstellung von HTML und CSS.

Das Backend Bezieht sich auf alles, was auf dem Server abläuft. Auf dem Server läuft zunächst mal eine Server-Software. Im einfachsten Fall, liefert diese Software einfach nur Dateien aus, die auf den Festplatten des Servers liegen. Die haben aber auch die Möglichkeit, Webseiten mit Hilfe einer Programmiersprache immer dann erst zusammenzubauen, wenn eine Anfrage eintrifft (das nennt man dann eine dynamische Webseite). Wenn Sie einen Online-Shop betreiben, möchten Sie für einen Kunden vielleicht speziell eine individuelle Startseite zusammenbauen. Eine gängige Programmiersprache dafür ist PHP (möglich ist aber auch Java, Python oder Ruby - heutzutage wird auch immer öfter JavaScript benutzt). Die Inhalte für dynamische Webseiten werden oft in Datenbanken gespeichert und nicht in Dateien. Der bekannteste Typ Datenbanken sind SQL-Datenbanken (SQL ist eine Sprache zur Ansteuerung von Datenbanken).