223015c 02: deutsch-qualität, fragmente/anglizismen raus, neutraler ton
This commit is contained in:
@@ -345,16 +345,16 @@ SPEAKER NOTES:
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
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
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
**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
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
**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
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
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
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
@@ -1213,7 +1209,7 @@ SPEAKER NOTES:
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
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:
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
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:
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
@@ -1313,7 +1309,7 @@ SPEAKER NOTES:
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
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:
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
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
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
@@ -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
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
@@ -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
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user