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 {
font-size: 0.9rem;
}
section.dimmed {
opacity: 0.2;
}
</style>
<!-- _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**.
| 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 |
<!--
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
-->
| 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) |
<!--
SPEAKER NOTES:
@@ -268,7 +261,6 @@ SPEAKER NOTES:
- Header = Metadaten (wer, wohin, wie groß)
- Paket/Segment/Frame = gleiche Daten, verschiedene Verpackung
- 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.
| 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 |
<!--
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).
| Protokoll | Wofür? | Port | Schicht |
|-----------|--------|------|---------|
| **HTTP** | Webseiten übertragen | 80 | Anwendung |
| **HTTPS** | HTTP + Verschlüsselung | 443 | Anwendung |
| **TCP** | Zuverlässige Übertragung | – | Transport |
| **UDP** | Schnelle Übertragung | – | Transport |
| **IP** | Routing durchs Internet | – | Internet |
| **DNS** | Namen → IP-Adressen | 53 | Anwendung |
| Protokoll | Wofür? | Port | Schicht |
|-----------|--------------------------------|------|---------------------|
| **HTTP** | Webseiten + Inhalte übertragen | 80 | Anwendung (Layer 4) |
| **HTTPS** | HTTP + Verschlüsselung | 443 | Anwendung (Layer 4) |
| **DNS** | Namen → IP-Adressen | 53 | Anwendung (Layer 4) |
| **TCP** | Zuverlässige Übertragung | – | Transport (Layer 4) |
| **UDP** | Schnelle Übertragung | – | Transport (Layer 4) |
| **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:
@@ -402,12 +397,12 @@ SPEAKER NOTES:
# Das TCP/IP-Modell
| Schicht | Name | Aufgabe | Protokolle |
|---------|------|---------|------------|
| **4** | Anwendung | Was? Welcher Dienst? | HTTP, DNS, SMTP |
| **3** | Transport | Zuverlässigkeit, Ports | TCP, UDP |
| **2** | Internet | Routing, globale Adressen | IP |
| **1** | Netzzugang | Lokale Übertragung | Ethernet, WLAN |
| Schicht | Name | Aufgabe | Protokolle |
|---------|------|------------------------------------------|-------------------|
| **4** | Anwendung | Dienste steuern, Daten austauschen etc. | HTTP, DNS, SMTP |
| **3** | Transport | Zuverlässige Verbindung aufbauen (Ports) | TCP, UDP |
| **2** | Internet | Routing, global eindeutige Adressen | IP |
| **1** | Netzzugang | Lokale Übertragung | Ethernet, WLAN |
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)
- Internet: Wie zum Zielrechner? (IP)
- Netzzugang: Wie zum nächsten Gerät? (Ethernet, WLAN)
- KLAUSUR: Welches Protokoll → welche Schicht
-->
---
<!-- _class: erklaerung -->
<!-- _class: "erklaerung dimmed" -->
<!-- _header: '' -->
<!-- _footer: '' -->
@@ -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:
---
<!-- _class: dimmed -->
# Woher kennt Ihr Laptop die Router-MAC?
**ARP** – Address Resolution Protocol
@@ -1441,6 +1438,8 @@ SPEAKER NOTES:
---
<!-- _class: dimmed -->
# MTU & Fragmentierung
**MTU** = Maximum Transmission Unit
@@ -1465,21 +1464,24 @@ SPEAKER NOTES:
---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# 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` |
<small>CRUD = Create, Read, Update, Delete</small>
```http
GET /index.html HTTP/1.1
POST /login HTTP/1.1
```
<!--
SPEAKER NOTES:
@@ -1528,14 +1530,18 @@ POST /users → Neuen Benutzer erstellen
---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# 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:
---
<!-- _class: dimmed -->
# 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