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

remove klausur class from chapter 2, siezen students, add server-decap demo, hide header/footer on oversized slides

Browse Source
This commit is contained in:
libretech
2026-04-20 11:47:55 +02:00
parent 8ed7796968
commit cbebc1a6f7
7 changed files with 210 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
slides/223015c/02-netzwerke-protokolle-css.md
+25 -75
View File
@@ -349,7 +349,7 @@ SPEAKER NOTES:
![bg right:40% fit](./assets/demos/network-chain.png)
Zwischen dir und einer Webseite liegen viele Stationen.
Zwischen Ihnen und einer Webseite liegen viele Stationen.
Jede Komponente "spricht" anders:
@@ -399,10 +399,6 @@ SPEAKER NOTES:
---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# Das TCP/IP-Modell
| Schicht | Name | Aufgabe | Protokolle |
@@ -473,10 +469,6 @@ SPEAKER NOTES:
---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# Dateneinheiten pro Schicht
| Schicht | Name | Dateneinheit | Was kommt hinzu? |
@@ -663,10 +655,6 @@ SPEAKER NOTES:
---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# IP vs. MAC vs. Port
| | IP-Adresse | MAC-Adresse | Port |
@@ -719,7 +707,7 @@ Drei Adressebenen lösen drei verschiedene Probleme:
<!-- _class: lead -->
# Die Reise eines Klicks
## Was passiert, wenn du `www.hdm-stuttgart.de` aufrufst?
## Was passiert, wenn Sie `www.hdm-stuttgart.de` aufrufen?
<!--
SPEAKER NOTES:
@@ -733,7 +721,7 @@ SPEAKER NOTES:
# Das Szenario
Du bist im WLAN der HdM und rufst auf:
Sie sind im WLAN der HdM und rufen auf:
```
https://www.hdm-stuttgart.de
@@ -754,9 +742,13 @@ SPEAKER NOTES:
---
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _paginate: false -->
# Die Zeitlinie
![h:520 center](./assets/demos/timeline.png)
![h:560 center](./assets/demos/timeline.png)
<!--
SPEAKER NOTES:
@@ -791,7 +783,7 @@ SPEAKER NOTES:
www.hdm-stuttgart.de → 212.132.79.37
```
Dein Laptop fragt sich durch:
Ihr Laptop fragt sich durch:
1. **Browser-Cache:** "War ich da kürzlich?" → Nein
2. **OS-Cache:** "Kennt das Betriebssystem die IP?" → Nein
@@ -831,6 +823,10 @@ SPEAKER NOTES:
---
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _paginate: false -->
# Der DNS-Lookup
![w:1100 center](./assets/demos/dns-lookup.png)
@@ -933,26 +929,13 @@ SPEAKER NOTES:
---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _paginate: false -->
# Der 3-Way-Handshake
```
Client (dein Laptop) Server
| |
|-------- SYN (Seq=1000) --------------->|
| "Ich will reden" |
| |
|<--- SYN-ACK (Seq=5000, Ack=1001) ------|
| "OK, ich auch. Ich starte bei 5000"|
| |
|-------- ACK (Ack=5001) --------------->|
| "Verstanden, los geht's" |
| |
| [ Verbindung steht ] |
```
![w:1050 center](./assets/demos/tcp-handshake.png)
**SYN** = Synchronize · **ACK** = Acknowledge
@@ -1028,7 +1011,7 @@ SPEAKER NOTES:
---
# Was dein Browser sendet
# Was Ihr Browser sendet
```http
GET / HTTP/1.1
@@ -1047,7 +1030,7 @@ Connection: keep-alive
<!--
SPEAKER NOTES:
- HTTP-Request: lesbar, menschlich verständlich
- GET = "hol mir was" (POST = "hier Daten für dich")
- GET = "hol mir was" (POST = "hier Daten für Sie")
- "/" = Wurzel = Startseite
- HTTP/1.1 = Protokollversion
- Header: Kontext (Host, Browser, Sprache)
@@ -1131,7 +1114,7 @@ SPEAKER NOTES:
---
# Woher kennt dein Laptop die Router-MAC?
# Woher kennt Ihr Laptop die Router-MAC?
**ARP** – Address Resolution Protocol
@@ -1198,7 +1181,7 @@ SPEAKER NOTES:
---
# Der erste Hop: Dein Router
# Der erste Hop: Ihr Router
```
Laptop → [Frame] → Router
@@ -1280,19 +1263,11 @@ SPEAKER NOTES:
# Decapsulation am Server
```
Bits empfangen (Layer 1)
↓
Frame prüfen: MAC okay? FCS okay? → Auspacken (Layer 2)
↓
IP lesen: Ziel-IP = meine IP? Ja! → Auspacken (Layer 3)
↓
TCP lesen: Port 443, Seq-Nr passt → Auspacken (Layer 4)
↓
HTTP lesen: "GET / HTTP/1.1" (Layer 7)
```
![bg right:42% fit](./assets/demos/server-decap.png)
Der Webserver versteht: "Jemand will die Startseite."
Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
Am Ende versteht der Webserver: "Jemand will die Startseite."
<!--
SPEAKER NOTES:
@@ -1321,7 +1296,7 @@ Content-Length: 45231
...
```
~45 KB HTML müssen jetzt zu dir.
~45 KB HTML müssen jetzt zu Ihnen.
<!--
SPEAKER NOTES:
@@ -1369,7 +1344,7 @@ SPEAKER NOTES:
---
# Decapsulation bei dir
# Decapsulation bei Ihnen
![bg right:42% fit](./assets/demos/decap-stack.png)
@@ -1400,10 +1375,6 @@ SPEAKER NOTES:
---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# TCP vs. UDP
| | TCP | UDP |
@@ -1505,10 +1476,6 @@ SPEAKER NOTES:
---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# HTTP-Methoden
| Methode | Bedeutung | Beispiel |
@@ -1570,10 +1537,6 @@ POST /users → Neuen Benutzer erstellen
---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# HTTP Status-Codes
```http
@@ -1630,10 +1593,6 @@ Die erste Ziffer kategorisiert die Antwort:
---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# Zusammenfassung Teil 1
**Der Ablauf:**
@@ -1966,10 +1925,6 @@ Element.Klasse: Das Element muss beides sein. "p.wichtig" heißt: nur p-Elemente
---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# Spezifität: Welche Regel gewinnt?
![bg right:35%](./assets/demos/css-specificity.png)
@@ -2136,11 +2091,6 @@ HSL: Hue, Saturation, Lightness. Manchmal intuitiver für Farbanpassungen.
---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->
# Einheiten
| Einheit | Bedeutung |