improve HTTP material

2 files changed, 66 insertions, 29 deletions

diff --git a/Info/11/3/HTTP/handout.tex b/Info/11/3/HTTP/handout.tex
new file mode 100644
index 00000000..c9b56214
--- /dev/null
+++ b/Info/11/3/HTTP/handout.tex
@@ -0,0 +1,34 @@
+\documentclass[a5paper, landscape]{handout}
+\csname endofdump\endcsname
+\usepackage{minted}
+
+\title{HTTP}
+\setcounter{section}{3}
+\setcounter{subsection}{3}
+
+\begin{document}
+\thispagestyle{empty}
+
+\subsection{HTTP}
+
+\begin{tabular}{p{0.425\linewidth} p{0.575\linewidth}}
+  \textbf{Ablauf} \\[-1mm]
+  \begin{enumerate}
+    \item Der Client baut eine TCP-Verbindung zum Server auf
+    \item Der Client sendet eine Anfrage
+    \item Der Server sendet eine Antwort
+    \item Die Verbindung wird geschlossen
+  \end{enumerate} &
+  \vspace{1mm}
+  \includegraphics[keepaspectratio, width=\linewidth]{img/Copyrighted/http_request.png} \\
+  \vspace{5mm}&\\
+  \centering
+  \includegraphics[keepaspectratio, width=0.4\linewidth]{img/Copyrighted/http_flow.png} &
+  \includegraphics[keepaspectratio, width=\linewidth]{img/Copyrighted/http_response.png} \\
+\end{tabular}
+
+\begin{merke}
+\textbf{Cookies} sind kleine Textdateien, die vom \gap{\Huge Server} an den \gap{\Huge Client} geschickt werden.
+Der Client sendet erhaltene Cookies bei jeder zukünftigen Anfrage erneut an den Server.
+\end{merke}
+\end{document}
diff --git a/Info/11/3/HTTP/slides.md b/Info/11/3/HTTP/slides.md
index cfb6ec18..201fd725 100644
--- a/Info/11/3/HTTP/slides.md
+++ b/Info/11/3/HTTP/slides.md
@@ -66,14 +66,13 @@ Zur besseren Lesbarkeit werden sie oft in 4 Byte-Blöcke unterteilt.
 * Der \textcolor{green!70!black}{Netzanteil} legt das Netzwerk des Geräts fest
 * Der \textcolor{red!70}{Hostanteil} ist eindeutig im LAN.
 
-## \faIcon{desktop} Arbeitsauftrag
-Moderne Webbrowser enthalten *Entwicklerwerkzeuge*, mittels derer das Abrufen und der Aufbau von Webseiten im Detail analysiert werden kann.
-
-* Führe eine Analyse der Kommunikation zwischen Browser und Webserver beim Laden der Seite [informatikschulbuch.de](informatikschulbuch.de) durch.
-Verwende die in den Entwicklerwerkzeugen bereitgestellte Netzwerkanalysefunktion.
-Eine Anleitung findest du im Vorlagen Laufwerk.
-* Untersuche das Ergebnis deiner Netzwerkanalyse: Beschreibe, welche Dateien beim Abrufen der Webseite übertragen wurden, und welchem Zweck diese vermutlich dienen.
-* Durch Anklicken der übertragenen Dateien in der Netzwerkanalyse erhältst Du weitere Details zur Übertragung.
+## \faIcon{desktop} Arbeitsauftrag: Webseitenaufruf \hfill 20 min
+Moderne Webbrowser enthalten \textit{Entwicklerwerkzeuge}, mit denen das Abrufen und der Aufbau von Webseiten im Detail analysiert werden kann.
+
+* Analysiere die Kommunikation zwischen Browser und Webserver beim Laden der Seite *[informatikschulbuch.de](informatikschulbuch.de)*.
+Verwende die in den Entwicklerwerkzeugen bereitgestellte **Netzwerkanalysefunktion** (eine Anleitung findest du im Space).
+* Untersuche das Ergebnis deiner Netzwerkanalyse: Beschreibe, welche **Dateien** beim Abrufen der Webseite übertragen wurden, und welchem Zweck diese vermutlich dienen.
+* Durch Anklicken der übertragenen Dateien in der Netzwerkanalyse erhältst du weitere Details zur Übertragung.
 Ermittle auf diesem Weg folgende Informationen:
   * Wie meldet der Server dem Client, dass er die angefragte Datei liefern kann?
   * Wie erkennt der Client, in welchem Format die gelieferte Datei codiert ist?
@@ -83,7 +82,7 @@ Ermittle auf diesem Weg folgende Informationen:
 Im Internet und vorallem im **WWW** spielt das Anwendungsprotokoll **HTTP** eine zentrale Rolle.
 
 \pause
-![](img/Copyrighted/http_request.png)
+![](img/Copyrighted/http_request_flow.png)
 
 ## \faIcon{pencil-alt} Antwort des HTTP-Servers
 
@@ -92,20 +91,21 @@ Die Antwort des Servers besteht aus einem **Header** gefolgt von den **Nutzdaten
 \pause
 ![](img/Copyrighted/http_response.png)
 
-## \faIcon{hands-helping}\faIcon{desktop} Arbeitsauftrag - 10min
+## \faIcon{hands-helping} \faIcon{desktop} Arbeitsauftrag: HTTP \hfill 10min
 
-* Recherchiert welche Header HTTP gewöhnlich verwendet.
-* Recherchiert welche Funktionen neben `GET`  HTTP unterstützt.
-* Entwerft eine HTTP-Anfrage an einen Webserver eurer Wahl.
-* \faIcon{chalkboard} Präsentiert anschließend eure HTTP-Anfrage
+\let\tightlist\relax
+* Recherchiert welche Header **HTTP** gewöhnlich verwendet.
+* Recherchiert welche Funktionen neben `GET` **HTTP** unterstützt.
+* Entwerft eine **HTTP**-Anfrage an einen Webserver eurer Wahl.
+* \faIcon{chalkboard} Präsentiert anschließend eure **HTTP**-Anfrage
 
 \vspace{1cm}
-**Tipp:** Das Programm `ncat.jar` im Ablage-Verzeichnis kann euch helfen eure Anfrage zu testen.
+**Tipp:** Das Programm `ncat.jar` im Space kann euch helfen eure Anfrage zu testen.
 
-## HTTPS ?
+## HTTP What ?
 
 ### \faIcon{lightbulb} Denkauftrag
-* Wofür steht das **S** in HTTPS?
+* Wofür steht das **S** in **HTTPS**?
 * Welche Art der Verschlüsselung ist für den Aufruf eines Webseite [geeignet]{.underline}?
 
 \pause
@@ -113,7 +113,7 @@ Die Antwort des Servers besteht aus einem **Header** gefolgt von den **Nutzdaten
 * **S** steht für *secure*
 * Asymmetrische Verschlüsselung oder Hybride Verschlüsselung
 
-## HTTPS
+## \faIcon{chalkboard-teacher} HTTPS
 
 Um **Vertraulichkeit** zu gewährleisten findet der Datenaustausch bei **HTTPS**, mittels **HTTP** über eine verschlüsselte Verbindung statt.
 
@@ -121,21 +121,24 @@ Um **Vertraulichkeit** zu gewährleisten findet der Datenaustausch bei **HTTPS**
 ### Datenaustausch
 ![](img/Copyrighted/https.png)
 
-## \faIcon{desktop} Arbeitsauftrag - 5 min
+## \faIcon{desktop} Arbeitsauftrag: Zera bist du's? \hfill 5 min
 
 * Begründe wofür bei **HTTPS** Zertifikate zum Einsatz kommen
 * Finde heraus wie du Dir im Browser das Zertifikat der aktuellen Verbindung anzeigen lassen kannst.
-* Wer hat das Zertifikate für [informatikschulbuch.de](informatikschulbuch.de) ausgestellt und wann?
+    * Wer hat das Zertifikate für [informatikschulbuch.de](informatikschulbuch.de) ausgestellt und wann?
 
 ## Kekse Kekse Kekse
 
 **\faIcon{lightbulb} Was sind eigentlich diese Cookies?**
 \pause
 
-### \faIcon{pencil-alt} Cookies
-**Cookies** sind kleine Textdateien, die vom Server an den Client geschickt werden.
+\begin{merke}
+{\large \faIcon{pencil-alt} \textbf{Cookies}} \\
+\textbf{Cookies} sind kleine Textdateien, die vom \beamerpgap{3}{Server} an den \beamerpgap{3}{Client} geschickt werden.
 Der Client sendet erhaltene Cookies bei jeder zukünftigen Anfrage erneut an den Server.
+\end{merke}
 
+\pause
 ### Funktionen von Cookies
 
 \pause
@@ -143,18 +146,18 @@ Der Client sendet erhaltene Cookies bei jeder zukünftigen Anfrage erneut an den
 >- Speichern von Einstellungen
 >- Tracken von Nutzerverhalten
 
-## Cookies beim Login
+## \faIcon{chalkboard-teacher} Cookies beim Login
 
 ![](img/Copyrighted/cookies.png)
 
-## \faIcon{desktop} Arbeitsauftrag - HTTP per Hand
+## \faIcon{desktop} Arbeitsauftrag: HTTP per Hand
 
 Mit dem Programm `ncat.jar` können Zeichenketten via TCP an einen Server gesendet werden.
-Wir wollen das Programm verwenden um die Seite [schule.muhq.space/klasse7](schule.muhq.space/klasse7) zu testen.
+Wir wollen das Programm verwenden um die Seite **[schule.muhq.space/klasse7](schule.muhq.space/klasse7)** zu testen.
 
-* Recherchiere welcher Port für HTTP verwendet wird.
-* Formuliere eine gültige HTTP-Anfrage für die Webseite.
+* Recherchiere welcher Port für **HTTP** verwendet wird.
+* Formuliere eine gültige **HTTP**-Anfrage für die Webseite.
 * Sende deine Anfrage an den Server und interpretiere die Antwort des Servers
-* Recherchiere welcher Port für HTTPS verwendet wird.
-* Formuliere eine gültige HTTPS-Anfrage für die Webseite.
+* Recherchiere welcher Port für **HTTPS** verwendet wird.
+* Formuliere eine gültige **HTTPS**-Anfrage für die Webseite.
 * Sende deine Anfrage erneut an den Server (`ncat.jar --tls schule.muhq.space 443`).