public/uni
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

223015c 02: layer 1 (bit) ergänzt, tabellen-refactor, http/2.0, dimmed/klausur-klassen

Browse Source
This commit is contained in:
libretech
2026-05-22 09:47:58 +02:00
parent abc8dece9c
commit 7ae2a9964a
1 changed files with 76 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
slides/223015c/02-netzwerke-protokolle-css.md
+76 -67
View File
@@ -91,6 +91,9 @@ section.erklaerung p {
section.erklaerung table { section.erklaerung table {
font-size: 0.9rem; font-size: 0.9rem;
} }
section.dimmed {
opacity: 0.2;
}
</style> </style>
<!-- _class: invert --> <!-- _class: invert -->
@@ -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**. 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 | | Begriff | Was ist das? |
|---------|--------------|----------| |---------------|--------------------------------------------------------------------------|
| **Host** | Ein Rechner im Netz | Ein Haus mit Adresse | | **Host** | Ein netzwerkfähiger Rechner (Laptop, Smartphone, Display in S-Bahn etc.) |
| **Client** | Der, der fragt (Browser) | Gast im Restaurant | | **Client** | Host bzw. Anwendung mit einer Anfrage (bspw. Browser) |
| **Server** | Der, der antwortet | Küche im Restaurant | | **Server** | Host bzw. Anwendung mit der Antwort (bspw. Webserver) |
| **Request** | Die Anfrage | Bestellung | | **Request** | Die Anfrage des Clients |
| **Response** | Die Antwort | Das Essen | | **Response** | Die Antwort des Servers |
| **Protokoll** | Regeln für Kommunikation (z. B. TCP, HTTP) | Speisekarte + Bestellablauf | | **Protokoll** | Regeln für Kommunikation (z. B. TCP, HTTP) |
<!--
SPEAKER NOTES:
- 6 Grundbegriffe – tauchen überall auf
- Client/Server = Grundstruktur des Webs
- Browser = Client
- Google/HdM/Netflix = Server
- Request/Response = Kommunikationsmuster
- Protokoll = Regelwerk
- Analogie: Restaurant in Japan ohne Regeln zu kennen
- Host = Rechner mit Adresse im Netz
-->
--- ---
@@ -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. 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 | | Begriff | Was ist das? | Schicht |
|---------|--------------|---------| |-------------|-------------------------------------------------------|--------------------------|
| **Paket** | Daten + IP-Header | Internet (Layer 3) | | **Payload** | Die eigentlichen Nutzdaten (bspw. Request, Response) | Anwendung |
| **Segment** | Daten + TCP-Header | Transport (Layer 4) | | **Header** | Metadaten vor und nach dem Payload | Jedes Layer |
| **Frame** | Daten + MAC-Header | Netzzugang (Layer 2) | | **Segment** | Payload + TCP-Header (Anwendungsport) | Transport (Layer 4) |
| **Header** | Metadaten am Anfang | Jede Schicht | | **Paket** | Payload + IP-Header (WLAN-Router) | Internet (Layer 3) |
| **Payload** | Die eigentlichen Nutzdaten | Der Inhalt | | **Frame** | Payload + MAC-Header (Netzwerkkarte) | Netzzugang (Layer 2) |
| **Bit** | Abfolge von Signalen (Licht, Strom, Kabel, Mobilfunk) | Bitübertragung (Layer 1) |
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -268,7 +261,6 @@ SPEAKER NOTES:
- Header = Metadaten (wer, wohin, wie groß) - Header = Metadaten (wer, wohin, wie groß)
- Paket/Segment/Frame = gleiche Daten, verschiedene Verpackung - Paket/Segment/Frame = gleiche Daten, verschiedene Verpackung
- Wie Matroschka: Schicht packt Schicht ein - Wie Matroschka: Schicht packt Schicht ein
- Wird klarer beim Schichtenmodell gleich
--> -->
--- ---
@@ -279,13 +271,13 @@ SPEAKER NOTES:
**Latenz** und **Bandbreite** bestimmen, wie schnell Daten ankommen — Latenz misst die Verzögerung, Bandbreite die Kapazität. **Latenz** und **Bandbreite** bestimmen, wie schnell Daten ankommen — Latenz misst die Verzögerung, Bandbreite die Kapazität.
| Begriff | Was ist das? | Einheit | | Begriff | Was ist das? | Einheit |
|---------|--------------|---------| |----------------|-------------------------------------------------|--------------------|
| **Latenz** | Verzögerung (hin + zurück) | Millisekunden | | **Latenz** | Verzögerung (hin + zurück) | Millisekunden (ms) |
| **Bandbreite** | Datenmenge pro Zeiteinheit | Mbit/s | | **Bandbreite** | Datenmenge pro Zeiteinheit | Mbit/s |
| **Hop** | Ein Sprung zum nächsten Router | – | | **Hop** | Ein Sprung zum nächsten Router (im Internet) | – |
| **Round-Trip** | Hin- und Rückweg | – | | **Round-Trip** | Hin- und Rückweg | – |
| **Ping** | "Bist du da?" + Antwort | ms | | **Ping** | Client sendet "ping", bekommt von Server "pong" | ms |
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -309,14 +301,17 @@ SPEAKER NOTES:
Protokolle regeln die Kommunikation auf jeder Schicht — von der Anwendung (HTTP) über den Transport (TCP/UDP) bis zum Routing (IP). Protokolle regeln die Kommunikation auf jeder Schicht — von der Anwendung (HTTP) über den Transport (TCP/UDP) bis zum Routing (IP).
| Protokoll | Wofür? | Port | Schicht | | Protokoll | Wofür? | Port | Schicht |
|-----------|--------|------|---------| |-----------|--------------------------------|------|---------------------|
| **HTTP** | Webseiten übertragen | 80 | Anwendung | | **HTTP** | Webseiten + Inhalte übertragen | 80 | Anwendung (Layer 4) |
| **HTTPS** | HTTP + Verschlüsselung | 443 | Anwendung | | **HTTPS** | HTTP + Verschlüsselung | 443 | Anwendung (Layer 4) |
| **TCP** | Zuverlässige Übertragung | – | Transport | | **DNS** | Namen → IP-Adressen | 53 | Anwendung (Layer 4) |
| **UDP** | Schnelle Übertragung | – | Transport | | **TCP** | Zuverlässige Übertragung | – | Transport (Layer 4) |
| **IP** | Routing durchs Internet | – | Internet | | **UDP** | Schnelle Übertragung | – | Transport (Layer 4) |
| **DNS** | Namen → IP-Adressen | 53 | Anwendung | | **IP** | Routing durchs Internet | – | Internet (Layer 3) |
<i><small>HTTP(S) = Hypertext Transfer Protocol (Secure)</small> · <small>DNS = Domain Name System</small> · <small>TCP = Transmission Control Protocol</small> · <small>UDP = User Datagram Protocol</small> · <small>IP = Internet Protocol</small>
</i>
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -402,12 +397,12 @@ SPEAKER NOTES:
# Das TCP/IP-Modell # Das TCP/IP-Modell
| Schicht | Name | Aufgabe | Protokolle | | Schicht | Name | Aufgabe | Protokolle |
|---------|------|---------|------------| |---------|------|------------------------------------------|-------------------|
| **4** | Anwendung | Was? Welcher Dienst? | HTTP, DNS, SMTP | | **4** | Anwendung | Dienste steuern, Daten austauschen etc. | HTTP, DNS, SMTP |
| **3** | Transport | Zuverlässigkeit, Ports | TCP, UDP | | **3** | Transport | Zuverlässige Verbindung aufbauen (Ports) | TCP, UDP |
| **2** | Internet | Routing, globale Adressen | IP | | **2** | Internet | Routing, global eindeutige Adressen | IP |
| **1** | Netzzugang | Lokale Übertragung | Ethernet, WLAN | | **1** | Netzzugang | Lokale Übertragung | Ethernet, WLAN |
Jede Schicht hat genau eine Aufgabe und nutzt nur die Schicht direkt darunter. Jede Schicht hat genau eine Aufgabe und nutzt nur die Schicht direkt darunter.
@@ -419,12 +414,11 @@ SPEAKER NOTES:
- Transport: Kommt an? Welches Programm? (TCP, UDP) - Transport: Kommt an? Welches Programm? (TCP, UDP)
- Internet: Wie zum Zielrechner? (IP) - Internet: Wie zum Zielrechner? (IP)
- Netzzugang: Wie zum nächsten Gerät? (Ethernet, WLAN) - Netzzugang: Wie zum nächsten Gerät? (Ethernet, WLAN)
- KLAUSUR: Welches Protokoll → welche Schicht
--> -->
--- ---
<!-- _class: erklaerung --> <!-- _class: "erklaerung dimmed" -->
<!-- _header: '' --> <!-- _header: '' -->
<!-- _footer: '' --> <!-- _footer: '' -->
@@ -1009,7 +1003,7 @@ SPEAKER NOTES:
# Was Ihr Browser sendet # Was Ihr Browser sendet
```http ```http
GET / HTTP/1.1 GET / HTTP/2.0
Host: www.hdm-stuttgart.de Host: www.hdm-stuttgart.de
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html Accept: text/html
@@ -1109,6 +1103,9 @@ SPEAKER NOTES:
--- ---
<!-- _class: dimmed -->
# Woher kennt Ihr Laptop die Router-MAC? # Woher kennt Ihr Laptop die Router-MAC?
**ARP** – Address Resolution Protocol **ARP** – Address Resolution Protocol
@@ -1441,6 +1438,8 @@ SPEAKER NOTES:
--- ---
<!-- _class: dimmed -->
# MTU & Fragmentierung # MTU & Fragmentierung
**MTU** = Maximum Transmission Unit **MTU** = Maximum Transmission Unit
@@ -1465,21 +1464,24 @@ SPEAKER NOTES:
--- ---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# HTTP-Methoden # HTTP-Methoden
HTTP-Methoden beschreiben, **was** der Client mit einer Ressource tun will. HTTP-Methoden beschreiben, **was** der Client mit einer Ressource tun will.
| Methode | Bedeutung | Beispiel | | Methode | Bedeutung | Beispiel |
|---------|-----------|----------| |---------|-----------|-----------------------------------------------|
| **GET** | Daten abrufen | Seite laden | | **GET** | Daten abrufen | Seite laden `GET /index.html HTTP/2.0` |
| **POST** | Daten senden | Formular absenden | | **POST** | Daten senden | Formular absenden `POST /login HTTP/2.0` |
| **PUT** | Daten ersetzen | Profil aktualisieren | | **PUT** | Daten ersetzen | Profil aktualisieren `PUT /users/42 HTTP/2.0` |
| **DELETE** | Daten löschen | Account löschen | | **DELETE** | Daten löschen | Account löschen `DELETE /users/42 HTTP/2.0` |
<small>CRUD = Create, Read, Update, Delete</small>
```http
GET /index.html HTTP/1.1
POST /login HTTP/1.1
```
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -1528,14 +1530,18 @@ POST /users → Neuen Benutzer erstellen
--- ---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# HTTP Status-Codes # HTTP Status-Codes
Jede HTTP-Response enthält einen dreistelligen Status-Code — die erste Ziffer verrät die Kategorie. Jede HTTP-Response enthält einen dreistelligen Status-Code — die erste Ziffer verrät die Kategorie.
```http ```http
HTTP/1.1 200 OK HTTP/2.0 200 OK
HTTP/1.1 404 Not Found HTTP/2.0 404 Not Found
HTTP/1.1 500 Internal Server Error HTTP/2.0 500 Internal Server Error
``` ```
| Code-Bereich | Bedeutung | | Code-Bereich | Bedeutung |
@@ -1586,6 +1592,9 @@ Die erste Ziffer kategorisiert die Antwort:
--- ---
<!-- _class: dimmed -->
# Zusammenfassung Teil 1 # Zusammenfassung Teil 1
**Der Ablauf:** **Der Ablauf:**
@@ -1632,11 +1641,11 @@ Die vier Kernkonzepte für Web-Entwickelnde:
- Caching auf jeder Ebene (TTL = Time To Live) - Caching auf jeder Ebene (TTL = Time To Live)
**2. TCP-Verbindungsaufbau:** **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 - Keep-Alive: Verbindung bleibt offen für mehrere Requests
- HTTP/2: Multiplexing – viele Requests über eine Verbindung - HTTP/2: Multiplexing – viele Requests über eine Verbindung
**3. HTTP Request/Response:** **3. HTTP(S) Request/Response:**
``` ```
Request: Methode + URL + Header + (Body) Request: Methode + URL + Header + (Body)
Response: Status + Header + Body Response: Status + Header + Body