From 7ae2a9964ace7eeee890c59b6c285c4745ffafc3 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Fri, 22 May 2026 09:47:58 +0200 Subject: [PATCH] =?UTF-8?q?223015c=2002:=20layer=201=20(bit)=20erg=C3=A4nz?= =?UTF-8?q?t,=20tabellen-refactor,=20http/2.0,=20dimmed/klausur-klassen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- slides/223015c/02-netzwerke-protokolle-css.md | 143 ++++++++++-------- 1 file changed, 76 insertions(+), 67 deletions(-) diff --git a/slides/223015c/02-netzwerke-protokolle-css.md b/slides/223015c/02-netzwerke-protokolle-css.md index c7ed32c..5b6b7cb 100644 --- a/slides/223015c/02-netzwerke-protokolle-css.md +++ b/slides/223015c/02-netzwerke-protokolle-css.md @@ -91,6 +91,9 @@ section.erklaerung p { section.erklaerung table { font-size: 0.9rem; } +section.dimmed { + opacity: 0.2; +} @@ -197,26 +200,14 @@ SPEAKER NOTES: Das Web folgt dem **Client-Server-Modell**: Ein Client (Browser) sendet einen **Request**, ein Server liefert eine **Response** – nach den Regeln eines **Protokolls**. -| Begriff | Was ist das? | Analogie | -|---------|--------------|----------| -| **Host** | Ein Rechner im Netz | Ein Haus mit Adresse | -| **Client** | Der, der fragt (Browser) | Gast im Restaurant | -| **Server** | Der, der antwortet | Küche im Restaurant | -| **Request** | Die Anfrage | Bestellung | -| **Response** | Die Antwort | Das Essen | -| **Protokoll** | Regeln für Kommunikation (z. B. TCP, HTTP) | Speisekarte + Bestellablauf | - - +| Begriff | Was ist das? | +|---------------|--------------------------------------------------------------------------| +| **Host** | Ein netzwerkfähiger Rechner (Laptop, Smartphone, Display in S-Bahn etc.) | +| **Client** | Host bzw. Anwendung mit einer Anfrage (bspw. Browser) | +| **Server** | Host bzw. Anwendung mit der Antwort (bspw. Webserver) | +| **Request** | Die Anfrage des Clients | +| **Response** | Die Antwort des Servers | +| **Protokoll** | Regeln für Kommunikation (z. B. TCP, HTTP) | --- @@ -253,13 +244,15 @@ SPEAKER NOTES: Daten werden Schicht für Schicht verpackt — jede Schicht fügt einen eigenen **Header** hinzu und erzeugt so eine neue Dateneinheit. -| Begriff | Was ist das? | Schicht | -|---------|--------------|---------| -| **Paket** | Daten + IP-Header | Internet (Layer 3) | -| **Segment** | Daten + TCP-Header | Transport (Layer 4) | -| **Frame** | Daten + MAC-Header | Netzzugang (Layer 2) | -| **Header** | Metadaten am Anfang | Jede Schicht | -| **Payload** | Die eigentlichen Nutzdaten | Der Inhalt | +| Begriff | Was ist das? | Schicht | +|-------------|-------------------------------------------------------|--------------------------| +| **Payload** | Die eigentlichen Nutzdaten (bspw. Request, Response) | Anwendung | +| **Header** | Metadaten vor und nach dem Payload | Jedes Layer | +| **Segment** | Payload + TCP-Header (Anwendungsport) | Transport (Layer 4) | +| **Paket** | Payload + IP-Header (WLAN-Router) | Internet (Layer 3) | +| **Frame** | Payload + MAC-Header (Netzwerkkarte) | Netzzugang (Layer 2) | +| **Bit** | Abfolge von Signalen (Licht, Strom, Kabel, Mobilfunk) | Bitübertragung (Layer 1) | + --- @@ -279,13 +271,13 @@ SPEAKER NOTES: **Latenz** und **Bandbreite** bestimmen, wie schnell Daten ankommen — Latenz misst die Verzögerung, Bandbreite die Kapazität. -| Begriff | Was ist das? | Einheit | -|---------|--------------|---------| -| **Latenz** | Verzögerung (hin + zurück) | Millisekunden | -| **Bandbreite** | Datenmenge pro Zeiteinheit | Mbit/s | -| **Hop** | Ein Sprung zum nächsten Router | – | -| **Round-Trip** | Hin- und Rückweg | – | -| **Ping** | "Bist du da?" + Antwort | ms | +| Begriff | Was ist das? | Einheit | +|----------------|-------------------------------------------------|--------------------| +| **Latenz** | Verzögerung (hin + zurück) | Millisekunden (ms) | +| **Bandbreite** | Datenmenge pro Zeiteinheit | Mbit/s | +| **Hop** | Ein Sprung zum nächsten Router (im Internet) | – | +| **Round-Trip** | Hin- und Rückweg | – | +| **Ping** | Client sendet "ping", bekommt von Server "pong" | ms | --- - + @@ -1009,7 +1003,7 @@ SPEAKER NOTES: # Was Ihr Browser sendet ```http -GET / HTTP/1.1 +GET / HTTP/2.0 Host: www.hdm-stuttgart.de User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Accept: text/html @@ -1109,6 +1103,9 @@ SPEAKER NOTES: --- + + + # Woher kennt Ihr Laptop die Router-MAC? **ARP** – Address Resolution Protocol @@ -1441,6 +1438,8 @@ SPEAKER NOTES: --- + + # MTU & Fragmentierung **MTU** = Maximum Transmission Unit @@ -1465,21 +1464,24 @@ SPEAKER NOTES: --- + + + + + # HTTP-Methoden HTTP-Methoden beschreiben, **was** der Client mit einer Ressource tun will. -| Methode | Bedeutung | Beispiel | -|---------|-----------|----------| -| **GET** | Daten abrufen | Seite laden | -| **POST** | Daten senden | Formular absenden | -| **PUT** | Daten ersetzen | Profil aktualisieren | -| **DELETE** | Daten löschen | Account löschen | +| Methode | Bedeutung | Beispiel | +|---------|-----------|-----------------------------------------------| +| **GET** | Daten abrufen | Seite laden `GET /index.html HTTP/2.0` | +| **POST** | Daten senden | Formular absenden `POST /login HTTP/2.0` | +| **PUT** | Daten ersetzen | Profil aktualisieren `PUT /users/42 HTTP/2.0` | +| **DELETE** | Daten löschen | Account löschen `DELETE /users/42 HTTP/2.0` | + +CRUD = Create, Read, Update, Delete -```http -GET /index.html HTTP/1.1 -POST /login HTTP/1.1 -``` + + + # HTTP Status-Codes Jede HTTP-Response enthält einen dreistelligen Status-Code — die erste Ziffer verrät die Kategorie. ```http -HTTP/1.1 200 OK -HTTP/1.1 404 Not Found -HTTP/1.1 500 Internal Server Error +HTTP/2.0 200 OK +HTTP/2.0 404 Not Found +HTTP/2.0 500 Internal Server Error ``` | Code-Bereich | Bedeutung | @@ -1586,6 +1592,9 @@ Die erste Ziffer kategorisiert die Antwort: --- + + + # Zusammenfassung Teil 1 **Der Ablauf:** @@ -1632,11 +1641,11 @@ Die vier Kernkonzepte für Web-Entwickelnde: - Caching auf jeder Ebene (TTL = Time To Live) **2. TCP-Verbindungsaufbau:** -- 3-Way-Handshake vor jeder HTTP-Anfrage (HTTP/1.1) +- 3-Way-Handshake vor jeder HTTP(S)-Anfrage (HTTP/2.0) - Keep-Alive: Verbindung bleibt offen für mehrere Requests - HTTP/2: Multiplexing – viele Requests über eine Verbindung -**3. HTTP Request/Response:** +**3. HTTP(S) Request/Response:** ``` Request: Methode + URL + Header + (Body) Response: Status + Header + Body