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

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

Browse Source
This commit is contained in:
libretech
2026-06-17 10:36:16 +02:00
parent ed756461e6
commit 3d6059c070
1 changed files with 49 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
slides/223015c/02-netzwerke-protokolle-css.md
+49 -53
View File
@@ -345,16 +345,16 @@ SPEAKER NOTES:
![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**
- Netzwerkkarte → **Bits / Signale**
- Netzwerkkarte → **Bits und Signale**
- Router → **IP-Pakete**
- Provider → **Routing**
Wie zusammenbringen?
Diese Sprachen müssen zusammenspielen.
<!--
SPEAKER NOTES:
@@ -370,7 +370,7 @@ SPEAKER NOTES:
# 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 |
|------|---------|-----------------|
@@ -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)
**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:
@@ -515,18 +515,17 @@ SPEAKER NOTES:
---
# Warum ist das clever?
# Vorteile der Schichtung
**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:**
Der Browser sagt: "Ich will diese Seite."
Alles andere übernehmen die Schichten darunter.
Der Browser fordert nur die Seite an. Alles Weitere übernehmen die Schichten darunter.
**Austauschbarkeit:**
WLAN statt Ethernet? Nur Schicht 1 ändert sich.
HTTP/2 statt HTTP/1? Nur Schicht 4 ändert sich.
Wechselt WLAN zu Ethernet, ändert sich nur Schicht 1.
Löst HTTP/2 die Version HTTP/1 ab, ändert sich nur Schicht 4.
<!--
SPEAKER NOTES:
@@ -559,7 +558,7 @@ SPEAKER NOTES:
<!-- _class: lead -->
# Die drei Adressen
## IP, MAC und Port – wer braucht was?
## IP, MAC und Port im Zusammenspiel
<!--
SPEAKER NOTES:
@@ -580,8 +579,7 @@ SPEAKER NOTES:
- **Bleibt gleich** auf dem gesamten Weg
- Analogie: **Empfänger auf einem Brief**
Router lesen die IP und entscheiden:
"Ist das für mich? Nein → in welche Richtung weiterleiten?"
Router lesen die Ziel-IP und leiten das Paket in die passende Richtung weiter.
<!--
SPEAKER NOTES:
@@ -604,7 +602,7 @@ aa:bb:cc:dd:ee:ff
- **Ändert sich bei jedem Hop**
- Analogie: **"Nächstes Postamt: XY"**
Funktioniert nur innerhalb eines Netzwerksegments.
Sie funktioniert nur innerhalb eines Netzwerksegments.
<!--
SPEAKER NOTES:
@@ -719,7 +717,7 @@ Ihr seid im WLAN der HdM und ruft auf:
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.
@@ -775,11 +773,11 @@ SPEAKER NOTES:
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
2. **OS-Cache:** "Kennt das Betriebssystem die IP?" → Nein
3. **Router/Provider:** DNS-Server wird gefragt
1. **Browser-Cache** prüfen → kein Eintrag
2. **OS-Cache** prüfen → kein Eintrag
3. **Router/Provider:** DNS-Server anfragen
<!--
SPEAKER NOTES:
@@ -836,7 +834,7 @@ SPEAKER NOTES:
# DNS ist selbst Netzwerk
Die DNS-Anfrage ist ein ganz normales Paket:
Die DNS-Anfrage ist ein gewöhnliches Paket:
| Eigenschaft | Wert |
|-------------|------|
@@ -867,7 +865,7 @@ www.hdm-stuttgart.de = 212.132.79.37
Diese Information wird gecached (für Minuten bis Stunden).
**Nächster Schritt:** Verbindung aufbauen.
Der nächste Schritt ist der Verbindungsaufbau.
<!--
SPEAKER NOTES:
@@ -894,7 +892,7 @@ SPEAKER NOTES:
---
# Warum ein Handshake?
# Zweck des Handshakes
TCP ist **verbindungsorientiert**:
@@ -905,8 +903,6 @@ TCP ist **verbindungsorientiert**:
**Analogie:**
Telefonat: Klingeln → Abheben → "Hallo?" → Gespräch beginnt
Nicht: Einfach losreden und hoffen, dass jemand zuhört.
<!--
SPEAKER NOTES:
- 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)
**Jetzt erst** kann HTTP gesprochen werden.
Erst jetzt kann HTTP übertragen werden.
<!--
SPEAKER NOTES:
@@ -1011,10 +1007,10 @@ Accept-Language: de-DE
Connection: keep-alive
```
~200 Bytes Text.
Der Request umfasst rund 200 Bytes Text.
**GET** = "Gib mir" (im Gegensatz zu POST = "Nimm das")
**/** = "Die Startseite"
**GET** ruft Daten ab (im Gegensatz zu **POST**, das Daten sendet).
**/** bezeichnet die Startseite.
<!--
SPEAKER NOTES:
@@ -1106,13 +1102,13 @@ SPEAKER NOTES:
<!-- _class: dimmed -->
# Woher kennt euer Laptop die Router-MAC?
# Router-MAC per ARP ermitteln
**ARP** – Address Resolution Protocol
![w:900 center](./assets/demos/arp-lookup.png)
Das passiert automatisch. Die Info wird gecached.
Das geschieht automatisch. Die Information wird gecached.
<!--
SPEAKER NOTES:
@@ -1139,7 +1135,7 @@ Frame wird zu **Bits** – Bits werden zu Signalen:
01001000 01010100 01010100 01010000 ...
```
Ab hier übernimmt die Physik.
Ab Schicht 1 erfolgt die Übertragung physikalisch.
<!--
SPEAKER NOTES:
@@ -1171,13 +1167,13 @@ SPEAKER NOTES:
**Laptop** → [Frame] → **Router**
Der Router empfängt:
Der Router verarbeitet das Frame in drei Schritten:
1. **Layer 1:** Signale → Bits
2. **Layer 2:** Frame prüfen. MAC okay? → Auspacken
3. **Layer 3:** IP lesen. "212.132.79.37 – nicht mein Netz"
1. **Layer 1:** Signale werden zu Bits.
2. **Layer 2:** Frame und MAC-Adresse werden geprüft, dann ausgepackt.
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:
@@ -1190,7 +1186,7 @@ SPEAKER NOTES:
---
# Der Router verpackt NEU
# Der Router verpackt neu
![w:900 center](./assets/demos/ethernet-rehop.png)
@@ -1213,7 +1209,7 @@ SPEAKER NOTES:
![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)
2. Routing-Entscheidung
@@ -1249,9 +1245,9 @@ SPEAKER NOTES:
![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:
@@ -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:
@@ -1294,7 +1290,7 @@ SPEAKER NOTES:
# 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)
@@ -1313,7 +1309,7 @@ SPEAKER NOTES:
![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
- **IP bleibt gleich** (Start/Ziel)
@@ -1332,9 +1328,9 @@ SPEAKER NOTES:
![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:
@@ -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.
@@ -1444,7 +1440,7 @@ SPEAKER NOTES:
**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.
@@ -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)
@@ -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)
@@ -2316,7 +2312,7 @@ Einheiten: rem für Schrift, relative Einheiten für Layout.
# Fragen & Diskussion
**Nächster Termin:** 24.01.2026 – JavaScript
**Nächstes Thema:** JavaScript
**Kontakt:** lb-czechowski@hdm-stuttgart.de