Willkommen! > Sitzungen > [02] Freitag, 23. April 2021

[02] Freitag, 23. April 2021

Das World Wide Web verstehen

HTML-Seiten haben das Internet um einiges zugänglicher gemacht. Davor gab es schon andere Formen der Darstellung von Texten und Bildern im Netz, aber es brauchte erst die Erfindung des World Wide Web (WWW) durch Tim Berners-Lee, damit das Internet für viele Menschen seinen weltweiten Siegeszug antreten konnte. Die Hypertext Markup Language (HTML) hat er dabei gleich miterfunden, genauso wie das Hypertext Transfer Protocol (HTTP). Im WWW kommunizieren Clients mit (Web)servern.

Um zu verstehen, wie diese Konzepte zusammenhängen, habe ich Ihnen einige Videos zusammengestellt, die aufeinander aufbauen.

Client- und Server-Architektur

Das Video erklärt den immer wiederkehrenden Kreislauf der Kommunikation zwischen einem Clientrechner und einem Server. Zentral dabei sind die Begriffe der Anfrage des Clients an den Server (Request) und die Antwort (Response) des Servers an den Client.

Das Thema IP-Adressen und Ports im Themenfeld Netzwerke wird dabei zunächst noch ausgespart. Wir werden uns in einer späteren Einheit noch tiefergehend damit beschäftigen.

Vielen Dank, Elektronik.Info, für das Video! Leider steht es nicht unter CC und ist daher von der CC-Lizenz dieses Skript ausgenommen.

HTTP | Das Hypertext Transfer Protocol

HTML-Seiten werden im WWW vom Server an den Client übermittelt. Eine technische Verabredung, wie das geschehen soll, ist im Hypertext Transfer Protocol (HTTP) festgeschrieben. In den meisten Browsern können Sie in der Adressleiste, am Anfang der URL, sehen, dass die Verbindung vom Client zum Server per HTTP(S) aufgebaut wird.

Das Protokoll des WWW in der Adressleiste des Browsers.

Ist noch ein “S” hinter dem “HTTP” zu sehen, handelt es sich um eine verschlüsselte Verbindung, die von Dritten nicht abgelauscht werden kann. Webseiten sollten heute nur noch per HTTPS ausgeliefert werden. Die Datenschutzgrundverordnung (DSGVO) schreibt für HTML-Formular HTTPS ausdrücklich vor, damit kritische Daten, die in das Formular eingegeben werden, nicht von Dritten abgelauscht werden können.

Vielen Dank, Elektronik.Info, für das Video! Leider steht es nicht unter CC und ist daher von der CC-Lizenz dieses Skript ausgenommen.

Abfragemethoden des Hypertext Transfer Protocols

Das folgende Video steigt noch mehr in die Tiefen von HTTP ein und erläutert Methoden (GET, POST, PUT, DELETE), die in manchen technischen Kontexten noch wichtig sein werden. Am Ende des Videos werden die sogenannten HTTP-Status-Codes erklärt.

Vielen Dank, Kim Peter Mesenhöller, für das Video! Leider steht es nicht unter CC und ist daher von der CC-Lizenz dieses Skripts ausgenommen.

Das Web im Zusammenhang

Für die Hochschule vielleicht ein wenig zu albern, aber nach wie vor gut und eindrücklich: Die Maus erklärt das Internet! Ein Klassiker, den ich Ihnen nicht vorenthalten möchte. Darin noch zu sehen und zu hören: Ein analoges Modem. Wer kennt es noch? Im Gegensatz zur Vinylplatte wird es wahrscheinlich keine Renaissance erfahren.

Auch dieses Video ist leider nicht unter einer CC-Lizenz veröffentlicht worden und ist daher von der CC-Lizenz dieses Skripts ausgenommen.

Geplante Inhalte der heutigen Sitzung

Einführung in die Konzepte des World Wide Web (WWW)
Einrichtung von VSCodium für die Arbeit mit einem Entwicklungswebserver
- Installation einer Extension
Sinnvoller Gebrauch der Chrome Developer Tools für die Entwicklung von Webseiten mit HTML und CSS

Video: Installation eines Webservers in VSCodium

Es ist Zeit, mit einem Webserver zu arbeiten! Zum Glück gibt es eine Extension für VSCodium, mit der in 0,nix ein solcher Entwicklungsserver zur Verfügung steht. Damit können HTML-Dokumente dann “amtlich” über HTTP aufgerufen werden. Wie das funktioniert, zeige ich in einem Video.

Video: Grundlagen der Chrome Developer Tools

Jetzt, da Ihre HTML-Dokumente über HTTP ausgeliefert werden, ist es möglich, diesen Netzwerkverkehr ein wenig genauer zu untersuchen. Das gelingt mit den mächtigen Chrome Developer Tools, die in Chrome/Chromium auf jeder Webseite eingeschaltet werden können. Auch die anderen Browser Firefox und Safari verfügen über solch ein Entwicklungswerkzeug, allerdings gilt der Chrome/Chromium-Browser als Industriestandard unter Webentwickler_innen. Der Grund dafür liegt darin, dass der Browser von Google herausgebracht wird und Google sehr einflussreich geworden ist, was die Implementierung neuer Webstandards und -funktionen angeht.

In einem Video zeige ich die Grundlagen der Chrome Developer Tools und Möglichkeiten, den Datenverkehr zwischen Client und Server zu analysieren.

Arbeitsauftrag zu [03] Freitag, 30. April 2021

Der heutige Arbeitsauftrag dient dazu, einige zentrale Konzepte des World Wide Web nachzuvollziehen.

Ziele

Sie können Extensions in VSCodium installieren und verwenden.
Sie kennen die Grundlagen der Chrome Developer Tools.
Sie können die Kommunikation zwischen Client und Server in Ihrem Browser nachvollziehen.
Sie kennen die Grundlagen des flexbox-Layouts mit CSS.

Teilaufgaben

Extensions in VSCodium installieren

Die Tutorialseite mobil in den Developer Tools.

Installieren Sie die Extension Live Server.
Probieren Sie aus, eine HTML-Datei per Rechtsklick zu öffnen.
Probieren Sie aus, wie die Funktion Live Reload funktioniert: Öffnen Sie ein HTML-Dokument mit Live Server. Anschließend ändern Sie beliebigen Inhalt im HTML und sehen nach, ob sich auch die Darstellung im Browser entsprechend ändert.

Chrome Developer Tools verwenden

Untersuchen Sie eines Ihrer HTML-Dokumente mit den Chrome Developer Tools.
- Wählen Sie verschiedene Elemente im HTML mit dem Picker aus.
- Untersuchen Sie die CSS-Eigenschaften des Elements in dem entsprechenden Panel.
- Ändern Sie CSS-Eigenschaften durch Ausschalten und Hinzufügen.
- Zeigen Sie Ihre Webseite in verschiedenen mobilen Ansichten an!
Untersuchen Sie den Netzwerkverkehr beim Aufruf eines HTML-Dokuments über Live Server.
- Zeigen Sie ein HTML-Dokument mit Live Server an.
- Öffnen Sie den Network-Tab in den Chrome Developer Tools.
- Deaktivieren Sie den Browsercache.
- Laden Sie das Dokument neu, indem Sie die Seite aktualisieren.
- Schauen Sie sich den Request an (Tab Headers) sowie die Response, indem Sie auf die Zeile mit der geladenen Ressource klicken (z.B. index.html).
- Recherchieren Sie, was die HTTP-Status-Codes, z.B. 200, bedeuten.

Flexbox-Layout verwenden

Bauen Sie eine neue Website! Sie können dabei viel von Ihrem bisherigen Inhalt wiederverwenden. In dieser Übung geht es um einen modernen Ansatz, Seiten zu layouten. Sie werden eine Seite entwickeln, die auch auf mobile Endgeräte angepasst ist.

Arbeiten Sie das Tutorial Build a responsive website layout with flexbox durch. Es ist leider nur auf Englisch verfügbar. Aber DeepL ist Ihr Freund.
Nutzen Sie den Quellcode für das Tutorial auf GitHub. Sie können ihn über den Button Clone or download > Download ZIP herunterladen. Sie brauchen von all den Dateien in dem Archiv nur die index.html und die Datei dist/style.css! Die anderen Dateien und Ordner können Sie getrost löschen.
Studieren Sie mithilfe des Tutorials das Konzept der Beispielwebsite genau.
- Für die Darstellung der Seite auf mobilen Endgeräten sind CSS-Media-Queries @media verantwortlich.
- Verschiedene Flexbox-Eigenschaften sorgen für die flexible Darstellung je nach Größe des Viewports.
Spielen Sie in den Chrome Developer Tools mit den mobilen Ansichten der Website herum.
Lernen Sie spielerisch die Möglichkeiten von Flexbox mit dem Spiel Flexbox Froggy kennen.

Abgabe

Geben Sie eine aktualisierte Version Ihrer Arbeit spätestens am Donnerstag, d. 29.04.2021, in GitLab ab. Legen Sie kein neues Projekt an, sondern einen neuen Ordner 2020-04-30-Simple-Responsive-Layout in Ihrem bestehenden Projekt.

GitLab - keine Mails

Wenn Sie zum ersten Mal mit GitLab arbeiten, beachten Sie bitte die Hinweise auf der Seite Using GitLab und folgen Sie den Arbeitsschritten im Video dort.