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

223015c 02: schicht-nummern auf 4-schichten-modell vereinheitlicht, alle abkürzungen bei erstnennung aufgelöst

Browse Source
This commit is contained in:
libretech
2026-06-17 12:17:55 +02:00
parent 27199ee1cc
commit 7885aee8fc
1 changed files with 24 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
slides/223015c/02-netzwerke-protokolle-css.md
+24 -20
View File
@@ -215,7 +215,7 @@ Das Web folgt dem **Client-Server-Modell**: Ein Client (Browser) sendet einen **
# Glossar: Adressen & Identitäten
Jedes Gerät im Netz braucht Adressen: eine **IP** für das globale Routing, eine **MAC** für das lokale Netz und einen **Port** für das richtige Programm.
Jedes Gerät im Netz braucht Adressen: eine **IP** (Internet Protocol) für das globale Routing, eine **MAC** (Media Access Control) für das lokale Netz und einen **Port** für das richtige Programm.
| Begriff | Was ist das? | Beispiel |
|---------|--------------|----------|
@@ -248,10 +248,10 @@ Daten werden Schicht für Schicht verpackt — jede Schicht fügt einen eigenen
|-------------|-------------------------------------------------------|--------------------------|
| **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) |
| **Segment** | Payload + TCP-Header (Anwendungsport) | Transport (Layer 3) |
| **Paket** | Payload + IP-Header (WLAN-Router) | Internet (Layer 2) |
| **Frame** | Payload + MAC-Header (Netzwerkkarte) | Netzzugang (Layer 1) |
| **Bit** | Abfolge von Signalen (Licht, Strom, Kabel, Mobilfunk) | Netzzugang (Layer 1) |
<!--
@@ -306,9 +306,9 @@ Protokolle regeln die Kommunikation auf jeder Schicht — von der Anwendung (HTT
| **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) |
| **TCP** | Zuverlässige Übertragung | – | Transport (Layer 3) |
| **UDP** | Schnelle Übertragung | – | Transport (Layer 3) |
| **IP** | Routing durchs Internet | – | Internet (Layer 2) |
<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>
@@ -406,6 +406,8 @@ SPEAKER NOTES:
Jede Schicht hat genau eine Aufgabe und nutzt nur die Schicht direkt darunter.
<small>SMTP = Simple Mail Transfer Protocol</small>
<!--
SPEAKER NOTES:
- TCP/IP = das echte Internet
@@ -424,7 +426,7 @@ SPEAKER NOTES:
# TCP/IP-Modell – Vertiefung
Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum theoretischen OSI-Modell (7 Schichten, 1984). TCP/IP hat sich durchgesetzt, weil es das reale Internet beschreibt.
Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum theoretischen OSI-Modell (Open Systems Interconnection, 7 Schichten, 1984). TCP/IP hat sich durchgesetzt, weil es das reale Internet beschreibt.
**Schicht-Aufgaben im Detail:**
@@ -441,6 +443,8 @@ Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum
**Warum Schichten?** Abstraktion. HTTP muss nicht wissen, ob Ethernet oder WLAN verwendet wird. Änderungen in einer Schicht betreffen andere nicht.
<small>FTP = File Transfer Protocol · ICMP = Internet Control Message Protocol · PPP = Point-to-Point Protocol</small>
---
# Schichten verpacken Daten
@@ -501,9 +505,9 @@ SPEAKER NOTES:
| Schicht | Einheit | Header-Inhalte |
|---------|---------|----------------|
| Anwendung | Daten | HTTP-Header, Cookies, Content-Type |
| Transport | Segment | Quell-/Zielport, Sequenznummer, Flags (SYN, ACK) |
| Internet | Paket | Quell-/Ziel-IP, TTL, Protokoll (TCP=6, UDP=17) |
| Netzzugang | Frame | Quell-/Ziel-MAC, EtherType, CRC-Prüfsumme |
| Transport | Segment | Quell-/Zielport, Sequenznummer, Flags (SYN = Synchronize, ACK = Acknowledge) |
| Internet | Paket | Quell-/Ziel-IP, TTL (Time To Live), Protokoll (TCP=6, UDP=17) |
| Netzzugang | Frame | Quell-/Ziel-MAC, EtherType, CRC-Prüfsumme (Cyclic Redundancy Check) |
**Overhead-Rechnung (1 Byte HTTP-Body):**
- Ethernet: 14 + 4 Byte (Header + Trailer)
@@ -623,7 +627,7 @@ Ein Port identifiziert ein bestimmtes **Programm** (bzw. einen Dienst) auf einem
- **80** → HTTP
- **443** → HTTPS
- **22** → SSH
- **22** → SSH (Secure Shell)
- **53** → DNS
<!--
@@ -796,7 +800,7 @@ DNS ist **dezentral** organisiert: Kein Server kennt alle Namen.
Jede Ebene verweist nur auf die Ebene darunter:
- Root → TLDs (.de, .com, .org)
- Root → TLDs (Top-Level-Domains: .de, .com, .org)
- .de → autoritative Server jeder .de-Domain
- hdm-stuttgart.de → www, mail, …
@@ -959,7 +963,7 @@ Der Handshake synchronisiert **Sequenznummern** – essenziell für TCPs Zuverl
- SYN-Flood-Attacke: Millionen SYNs ohne ACK → Server-Ressourcen erschöpft
- Schutz: SYN-Cookies (Server speichert keinen State bis ACK kommt)
**Verbindungsabbau:** 4-Way-Handshake (FIN → ACK → FIN → ACK) oder RST für sofortigen Abbruch.
**Verbindungsabbau:** 4-Way-Handshake (FIN = Finish → ACK → FIN → ACK) oder RST (Reset) für sofortigen Abbruch.
---
@@ -1514,7 +1518,7 @@ HTTP-Methoden definieren die **Semantik** der Anfrage – was der Client vom Ser
**Idempotent:** Mehrfaches Ausführen hat denselben Effekt wie einmaliges (GET, PUT, DELETE).
**Safe:** Ändert nichts am Server (nur GET, HEAD, OPTIONS).
**REST-Prinzip:** URLs identifizieren Ressourcen, Methoden definieren Aktionen.
**REST-Prinzip** (Representational State Transfer): URLs identifizieren Ressourcen, Methoden definieren Aktionen.
```
GET /users/42 → Benutzer 42 abrufen
PUT /users/42 → Benutzer 42 vollständig ersetzen
@@ -1582,7 +1586,7 @@ Die erste Ziffer kategorisiert die Antwort:
- **301 vs. 302:** 301 = permanent umgezogen (Cache-fähig), 302 = temporär (nicht cachen)
- **304 Not Modified:** Browser hat Cache, Server bestätigt: noch aktuell → spart Bandbreite
**API-Design:** Korrekte Status-Codes sind wichtig für Clients. `200` bei Fehler mit `{"error": "..."}` im Body ist schlechtes Design.
**API-Design** (Application Programming Interface): Korrekte Status-Codes sind wichtig für Clients. `200` bei Fehler mit `{"error": "..."}` im Body ist schlechtes Design.
---
@@ -1712,7 +1716,7 @@ p {
}
```
- Trennt **Inhalt** (HTML) von **Darstellung** (CSS)
- Trennt **Inhalt** (HTML – Hypertext Markup Language) von **Darstellung** (CSS)
- "Cascading" = Regeln können überschrieben werden
- Eine CSS-Datei kann viele HTML-Seiten stylen
@@ -1982,7 +1986,7 @@ Spezifität bestimmt, welche CSS-Regel gewinnt, wenn mehrere auf dasselbe Elemen
- Eine ID schlägt jede Anzahl von Klassen
- `!important` bricht alles → vermeiden, da schwer zu überschreiben
**Best Practice:** Flache Spezifität anstreben. BEM-Methodik (`.block__element--modifier`) hält Spezifität gleichmäßig niedrig.
**Best Practice:** Flache Spezifität anstreben. BEM-Methodik (Block Element Modifier, `.block__element--modifier`) hält Spezifität gleichmäßig niedrig.
---
@@ -2062,7 +2066,7 @@ Best Practice: Setzt das global für alle Elemente.
![bg right:35%](./assets/demos/css-colors.png)
CSS kennt fünf Notationen für Farben: **Keyword**, **Hex**, **RGB**, **RGBA** (mit Transparenz) und **HSL**.
CSS kennt fünf Notationen für Farben: **Keyword**, **Hex**, **RGB** (Red Green Blue), **RGBA** (RGB + Alpha) und **HSL** (Hue, Saturation, Lightness).
```css
/* Keyword */