223015c 02: deutsch-qualität, fragmente/anglizismen raus, neutraler ton

This commit is contained in:
2026-06-17 10:36:16 +02:00
parent ed756461e6
commit 3d6059c070
+49 -53
View File
@@ -345,16 +345,16 @@ SPEAKER NOTES:
![bg right:40% fit](./assets/demos/network-chain.png) ![bg right:40% fit](./assets/demos/network-chain.png)
Zwischen euch und einer Webseite liegen viele Stationen. Zwischen Klick und fertiger Webseite liegen viele Stationen.
Jede Komponente "spricht" anders: Jede Schicht spricht eine andere Sprache:
- Browser → **HTTP** - Browser → **HTTP**
- Netzwerkkarte → **Bits / Signale** - Netzwerkkarte → **Bits und Signale**
- Router → **IP-Pakete** - Router → **IP-Pakete**
- Provider → **Routing** - Provider → **Routing**
Wie zusammenbringen? Diese Sprachen müssen zusammenspielen.
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -370,7 +370,7 @@ SPEAKER NOTES:
# Die Lösung: Arbeitsteilung # Die Lösung: Arbeitsteilung
Statt dass jedes Programm alles können muss: **Aufgaben aufteilen.** Statt dass jedes Programm alles können muss, teilen sich mehrere Schichten die Aufgaben.
| Wer? | Aufgabe | Typische Geräte | | Wer? | Aufgabe | Typische Geräte |
|------|---------|-----------------| |------|---------|-----------------|
@@ -447,9 +447,9 @@ Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum
![bg right:52% fit](./assets/demos/encap-layers.png) ![bg right:52% fit](./assets/demos/encap-layers.png)
**Encapsulation:** Jede Schicht packt ein. **Encapsulation:** Jede Schicht verpackt die Daten der darüberliegenden Schicht.
**Decapsulation:** Beim Empfang wird ausgepackt. **Decapsulation:** Beim Empfang packt jede Schicht ihren Teil wieder aus.
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -515,18 +515,17 @@ SPEAKER NOTES:
--- ---
# Warum ist das clever? # Vorteile der Schichtung
**Ohne Schichten:** **Ohne Schichten:**
Jede App müsste wissen, wie Ethernet-Frames gebaut werden, wie WLAN funktioniert, wie Router Pakete weiterleiten... Jede Anwendung müsste wissen, wie Ethernet-Frames gebaut werden, wie WLAN funktioniert und wie Router Pakete weiterleiten.
**Mit Schichten:** **Mit Schichten:**
Der Browser sagt: "Ich will diese Seite." Der Browser fordert nur die Seite an. Alles Weitere übernehmen die Schichten darunter.
Alles andere übernehmen die Schichten darunter.
**Austauschbarkeit:** **Austauschbarkeit:**
WLAN statt Ethernet? Nur Schicht 1 ändert sich. Wechselt WLAN zu Ethernet, ändert sich nur Schicht 1.
HTTP/2 statt HTTP/1? Nur Schicht 4 ändert sich. Löst HTTP/2 die Version HTTP/1 ab, ändert sich nur Schicht 4.
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -559,7 +558,7 @@ SPEAKER NOTES:
<!-- _class: lead --> <!-- _class: lead -->
# Die drei Adressen # Die drei Adressen
## IP, MAC und Port – wer braucht was? ## IP, MAC und Port im Zusammenspiel
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -580,8 +579,7 @@ SPEAKER NOTES:
- **Bleibt gleich** auf dem gesamten Weg - **Bleibt gleich** auf dem gesamten Weg
- Analogie: **Empfänger auf einem Brief** - Analogie: **Empfänger auf einem Brief**
Router lesen die IP und entscheiden: Router lesen die Ziel-IP und leiten das Paket in die passende Richtung weiter.
"Ist das für mich? Nein → in welche Richtung weiterleiten?"
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -604,7 +602,7 @@ aa:bb:cc:dd:ee:ff
- **Ändert sich bei jedem Hop** - **Ändert sich bei jedem Hop**
- Analogie: **"Nächstes Postamt: XY"** - Analogie: **"Nächstes Postamt: XY"**
Funktioniert nur innerhalb eines Netzwerksegments. Sie funktioniert nur innerhalb eines Netzwerksegments.
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -719,7 +717,7 @@ Ihr seid im WLAN der HdM und ruft auf:
https://www.hdm-stuttgart.de https://www.hdm-stuttgart.de
``` ```
**Zwischen Enter und fertiger Seite:** ~200 Millisekunden. Zwischen Enter und fertiger Seite vergehen rund 200 Millisekunden.
In dieser Zeit passieren hunderte Operationen. In dieser Zeit passieren hunderte Operationen.
@@ -775,11 +773,11 @@ SPEAKER NOTES:
www.hdm-stuttgart.de → 212.132.79.37 www.hdm-stuttgart.de → 212.132.79.37
``` ```
Euer Laptop fragt sich durch: Euer Laptop arbeitet die Quellen der Reihe nach ab:
1. **Browser-Cache:** "War ich da kürzlich?" → Nein 1. **Browser-Cache** prüfen → kein Eintrag
2. **OS-Cache:** "Kennt das Betriebssystem die IP?" → Nein 2. **OS-Cache** prüfen → kein Eintrag
3. **Router/Provider:** DNS-Server wird gefragt 3. **Router/Provider:** DNS-Server anfragen
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -836,7 +834,7 @@ SPEAKER NOTES:
# DNS ist selbst Netzwerk # DNS ist selbst Netzwerk
Die DNS-Anfrage ist ein ganz normales Paket: Die DNS-Anfrage ist ein gewöhnliches Paket:
| Eigenschaft | Wert | | Eigenschaft | Wert |
|-------------|------| |-------------|------|
@@ -867,7 +865,7 @@ www.hdm-stuttgart.de = 212.132.79.37
Diese Information wird gecached (für Minuten bis Stunden). Diese Information wird gecached (für Minuten bis Stunden).
**Nächster Schritt:** Verbindung aufbauen. Der nächste Schritt ist der Verbindungsaufbau.
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -894,7 +892,7 @@ SPEAKER NOTES:
--- ---
# Warum ein Handshake? # Zweck des Handshakes
TCP ist **verbindungsorientiert**: TCP ist **verbindungsorientiert**:
@@ -905,8 +903,6 @@ TCP ist **verbindungsorientiert**:
**Analogie:** **Analogie:**
Telefonat: Klingeln → Abheben → "Hallo?" → Gespräch beginnt Telefonat: Klingeln → Abheben → "Hallo?" → Gespräch beginnt
Nicht: Einfach losreden und hoffen, dass jemand zuhört.
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
- Warum Aufwand? - Warum Aufwand?
@@ -975,7 +971,7 @@ Der Handshake synchronisiert **Sequenznummern** – essenziell für TCPs Zuverl
![bg right:42% fit](./assets/demos/client-server-ports.png) ![bg right:42% fit](./assets/demos/client-server-ports.png)
**Jetzt erst** kann HTTP gesprochen werden. Erst jetzt kann HTTP übertragen werden.
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -1011,10 +1007,10 @@ Accept-Language: de-DE
Connection: keep-alive Connection: keep-alive
``` ```
~200 Bytes Text. Der Request umfasst rund 200 Bytes Text.
**GET** = "Gib mir" (im Gegensatz zu POST = "Nimm das") **GET** ruft Daten ab (im Gegensatz zu **POST**, das Daten sendet).
**/** = "Die Startseite" **/** bezeichnet die Startseite.
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -1106,13 +1102,13 @@ SPEAKER NOTES:
<!-- _class: dimmed --> <!-- _class: dimmed -->
# Woher kennt euer Laptop die Router-MAC? # Router-MAC per ARP ermitteln
**ARP** – Address Resolution Protocol **ARP** – Address Resolution Protocol
![w:900 center](./assets/demos/arp-lookup.png) ![w:900 center](./assets/demos/arp-lookup.png)
Das passiert automatisch. Die Info wird gecached. Das geschieht automatisch. Die Information wird gecached.
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -1139,7 +1135,7 @@ Frame wird zu **Bits** – Bits werden zu Signalen:
01001000 01010100 01010100 01010000 ... 01001000 01010100 01010100 01010000 ...
``` ```
Ab hier übernimmt die Physik. Ab Schicht 1 erfolgt die Übertragung physikalisch.
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -1171,13 +1167,13 @@ SPEAKER NOTES:
**Laptop** → [Frame] → **Router** **Laptop** → [Frame] → **Router**
Der Router empfängt: Der Router verarbeitet das Frame in drei Schritten:
1. **Layer 1:** Signale → Bits 1. **Layer 1:** Signale werden zu Bits.
2. **Layer 2:** Frame prüfen. MAC okay? → Auspacken 2. **Layer 2:** Frame und MAC-Adresse werden geprüft, dann ausgepackt.
3. **Layer 3:** IP lesen. "212.132.79.37 – nicht mein Netz" 3. **Layer 3:** Die Ziel-IP liegt außerhalb des lokalen Netzes.
**Routing-Entscheidung:** "Ich schicke es Richtung Internet." **Routing-Entscheidung:** Das Paket geht Richtung Internet weiter.
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -1190,7 +1186,7 @@ SPEAKER NOTES:
--- ---
# Der Router verpackt NEU # Der Router verpackt neu
![w:900 center](./assets/demos/ethernet-rehop.png) ![w:900 center](./assets/demos/ethernet-rehop.png)
@@ -1213,7 +1209,7 @@ SPEAKER NOTES:
![bg right:35% fit](./assets/demos/hop-chain.png) ![bg right:35% fit](./assets/demos/hop-chain.png)
Bei jedem Hop: Bei jedem Hop laufen drei Schritte ab:
1. Auspacken bis Layer 3 (IP) 1. Auspacken bis Layer 3 (IP)
2. Routing-Entscheidung 2. Routing-Entscheidung
@@ -1249,9 +1245,9 @@ SPEAKER NOTES:
![bg right:42% fit](./assets/demos/server-decap.png) ![bg right:42% fit](./assets/demos/server-decap.png)
Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus. Jede Schicht prüft, ob das Paket für sie bestimmt ist, und packt dann die nächste aus.
Am Ende versteht der Webserver: "Jemand will die Startseite." Am Ende erkennt der Webserver die Anfrage nach der Startseite.
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -1280,7 +1276,7 @@ Content-Length: 45231
... ...
``` ```
~45 KB HTML müssen jetzt zu euch. Rund 45 KB HTML müssen nun zu euch übertragen werden.
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -1294,7 +1290,7 @@ SPEAKER NOTES:
# Encapsulation beim Server # Encapsulation beim Server
Der Server macht **dasselbe** – nur in die andere Richtung: Der Server durchläuft dieselben Schritte – nur in umgekehrter Richtung:
![bg right:40% fit](./assets/demos/encap-stack.png) ![bg right:40% fit](./assets/demos/encap-stack.png)
@@ -1313,7 +1309,7 @@ SPEAKER NOTES:
![bg right:38% fit](./assets/demos/response-hops.png) ![bg right:38% fit](./assets/demos/response-hops.png)
Gleiches Spiel wie der Hinweg: Der Rückweg funktioniert wie der Hinweg:
- Hop für Hop durchs Internet - Hop für Hop durchs Internet
- **IP bleibt gleich** (Start/Ziel) - **IP bleibt gleich** (Start/Ziel)
@@ -1332,9 +1328,9 @@ SPEAKER NOTES:
![bg right:42% fit](./assets/demos/decap-stack.png) ![bg right:42% fit](./assets/demos/decap-stack.png)
Rückweg = Encapsulation umgekehrt. Der Rückweg ist die umgekehrte Encapsulation.
Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus. Jede Schicht prüft, ob das Paket für sie bestimmt ist, und packt dann die nächste aus.
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -1417,7 +1413,7 @@ Beide sind Transport-Protokolle (Schicht 3), aber mit fundamental unterschiedlic
--- ---
# Warum UDP bei Video-Calls? # UDP bei Video-Calls
**Szenario:** Ein Paket geht verloren. **Szenario:** Ein Paket geht verloren.
@@ -1444,7 +1440,7 @@ SPEAKER NOTES:
**MTU** = Maximum Transmission Unit **MTU** = Maximum Transmission Unit
Ethernet-Frame kann maximal **1500 Bytes** Nutzdaten transportieren. Ein Ethernet-Frame kann maximal **1500 Bytes** Nutzdaten transportieren.
**Problem:** Ein Foto hat 3.000.000 Bytes. **Problem:** Ein Foto hat 3.000.000 Bytes.
@@ -1705,7 +1701,7 @@ HTML definiert die Struktur – was ist auf der Seite. CSS definiert das Aussehe
--- ---
# Was ist CSS? # CSS im Überblick
![bg right:35%](./assets/demos/css-anatomie.png) ![bg right:35%](./assets/demos/css-anatomie.png)
@@ -1932,7 +1928,7 @@ Element.Klasse: Das Element muss beides sein. "p.wichtig" heißt: nur p-Elemente
--- ---
# Spezifität: Welche Regel gewinnt? # Spezifität von Selektoren
![bg right:35%](./assets/demos/css-specificity.png) ![bg right:35%](./assets/demos/css-specificity.png)
@@ -2316,7 +2312,7 @@ Einheiten: rem für Schrift, relative Einheiten für Layout.
# Fragen & Diskussion # Fragen & Diskussion
**Nächster Termin:** 24.01.2026 – JavaScript **Nächstes Thema:** JavaScript
**Kontakt:** lb-czechowski@hdm-stuttgart.de **Kontakt:** lb-czechowski@hdm-stuttgart.de