# Kap 2 — Netzwerke, Protokolle & CSS

**Bedient Klausur-Blöcke:** C (TCP/IP-Schichten) + D (IP/MAC/Port) + E (DNS+HTTP) + F (Browser-Ablauf) + H (CSS) + I (A11y)
**Slide-Budget:** ~50 (90-min, ggf. 2 Termine — größtes Kapitel)
**Aktueller Stand:** 91 Slides → bleibt ungefähr gleich, aber strukturell aufgeräumt.

## Bogen

Eine Stunde, eine Frage: **„Wie reisen Bytes vom Server in Frankfurt zu deinem Browser in Stuttgart — und wie wird der ankommende HTML-Code zu einer hübschen Seite?"**

1. **Eröffner:** der „URL bis Pixel"-Ablauf als Bogen-Anker. 7 Schritte, jeder kommt in diesem Kapitel dran.
2. **Adress-Tripel:** IP, MAC, Port. Drei Schichten, drei Fragen.
3. **TCP/IP-Schichten:** 4 Schichten + Encapsulation. Warum Schichten überhaupt?
4. **DNS:** wie findet die Maschine die richtige IP zur URL?
5. **HTTP:** wie sieht die Anfrage und Antwort aus?
6. **Pivot zu Darstellung:** Browser hat HTML. Jetzt: wie wird das hübsch?
7. **CSS-Anatomie:** Selektoren, Box-Model, Kaskade.
8. **Layout:** Flexbox + Grid.
9. **A11y:** BFSG/EAA + WCAG POUR + semantisch + ARIA.

## Advance Organizer

Bogen-konkret: „Pakete reisen → Browser rendert" als zwei-akt-pipeline. Wird in der Sub-Sektionen ausgepackt.

→ Demo: `kap-c-02-bogen.html` (NEU)

## Folien-Skelett (Vorschlag)

### Sub-A: Netzwerk (25 Slides)

| # | Typ | Titel/Kern | Lernziel | Visualisierung |
|---|-----|-----------|---------|----------------|
| 1 | Cover | Kapitel 2 | — | reuse |
| 2 | Lead | Pakete reisen + Browser rendert | F.1 | NEU bogen |
| 3 | Inhalt | URL→Pixel (Vorschau auf alle 7 Schritte) | F.1 | reuse |
| 4 | Lead | Adressen | — | — |
| 5 | Klausur | IP — Endgerät identifizieren | D.1 | reuse ip-packet |
| 6 | Klausur | MAC — nächster physischer Hop | D.2 | reuse ethernet |
| 7 | Klausur | Port — Ziel-Programm | D.3 | reuse client-server-ports |
| 8 | Klausur | IP vs MAC vs Port — Vergleich | D.4 | reuse |
| 9 | Lead | TCP/IP-Schichtenmodell | — | — |
| 10 | Klausur | Die 4 Schichten | C.1 | reuse osi-tcpip-diagram |
| 11 | Inhalt | Encapsulation Schritt für Schritt | C.2 | reuse encap-stack + decap-stack |
| 12 | Klausur | Datenüberbringung: Bit→Frame→Packet→Segment | C.3 | reuse encap-layers |
| 13 | Inhalt | OSI vs TCP/IP | C.4 | reuse osi-tcpip-diagram |
| 14 | Lead | DNS | — | — |
| 15 | Klausur | Was tut DNS? | E.1 | reuse dns-lookup |
| 16 | Klausur | DNS-Hierarchie Root→TLD→Authoritative | E.1 | reuse dns-tree |
| 17 | Demo | nslookup im Terminal | E.1 | — |
| 18 | Lead | HTTP | — | — |
| 19 | Klausur | HTTP-Request lesen (Method, Path, Header) | E.2 | NEU http-request-anatomie |
| 20 | Klausur | HTTP-Response (Status, Header, Body) | E.2 | NEU http-response-anatomie |
| 21 | Klausur | Statuscodes 200/301/404/500 | E.3 | NEU statuscodes-tabelle |
| 22 | Inhalt | HTTP/1.1 → HTTP/2 → HTTP/3 | E.4 | NEU http-versionen |
| 23 | Demo | DevTools Network-Tab | E.2 | — |
| 24 | Inhalt | TCP-Handshake | C.1 | reuse tcp-handshake |
| 25 | Klausur | Block F: Synthese URL→Pixel (7 Schritte) | F.1 | NEU 7-schritte-master |

### Sub-B: CSS + A11y (25 Slides)

| # | Typ | Titel/Kern | Lernziel | Visualisierung |
|---|-----|-----------|---------|----------------|
| 26 | Lead | Was tut CSS? | — | — |
| 27 | Inhalt | CSS-Anatomie | H.1 | reuse css-anatomie |
| 28 | Klausur | CSS-Selektoren-Übersicht | H.2 | reuse css-selector-* |
| 29 | Inhalt | Kombinatoren | H.2 | reuse css-combinators |
| 30 | Inhalt | Pseudo-Klassen + Pseudo-Elemente | H.2 | reuse |
| 31 | Klausur | Spezifizität | H.3 | reuse css-specificity |
| 32 | Klausur | Box-Model | H.1 | reuse css-box-model + box-model-diagram |
| 33 | Inhalt | Display: block / inline / flex / grid | H.4 | — |
| 34 | Inhalt | Flexbox-Anatomie | H.4 | NEU flexbox-axes |
| 35 | Inhalt | Grid-Anatomie | H.4 | NEU grid-areas |
| 36 | Klausur | Flexbox vs Grid — wann was | H.4 | NEU flexbox-vs-grid |
| 37 | Inhalt | Responsive Design (media queries) | H.4 | reuse css-responsive |
| 38 | Inhalt | Farbe + Kontrast | I.4 | reuse css-colors |
| 39 | Lead | Barrierefreiheit | — | — |
| 40 | Klausur | BFSG + EAA — was kommt 28.06.2025 | I.1 | NEU bfsg-zeitleiste |
| 41 | Klausur | WCAG-POUR (4 Prinzipien) | I.2 | NEU pour-diagramm |
| 42 | Klausur | Semantisches HTML als A11y-Foundation | I.3 | reuse a11y-semantic |
| 43 | Inhalt | ARIA als Ergänzung | I.3 | — |
| 44 | Inhalt | Alt-Text für Bilder | I.4 | — |
| 45 | Klausur | Kontrast 4.5:1 für Text | I.4 | reuse contrast-levels |
| 46 | Inhalt | Keyboard-Navigation | I.4 | reuse keyboard-a11y + a11y-focus |
| 47 | Klausur | Error-States: visuell + textuell | I.4 | reuse a11y-error |
| 48 | Demo | A11y-Audit mit DevTools | I.4 | — |
| 49 | Selbstlernen | Eine eigene Seite auf WCAG prüfen | I.4 | — |
| 50 | Zusammenfassung | Reise + Render | alle | NEU |

## Streichungs-Liste

Aus aktuellem 02-netzwerke-protokolle-css.md (91 Slides):
- Doppelte Vertiefungs-Folien zu „Encapsulation" (3 → 1)
- BitTorrent/P2P-Folien — gehört nicht hierhin, raus
- Glossar-Folien — als Speaker-Notes
- Diverse „Bei näherem Hinsehen"-Slides (Mayer-Redundancy)
- ARP-Lookup-Detail — entfernen oder als Bonus
- IPv6-Tiefen-Folien — auf eine Folie eindampfen

## Visualisierungs-TODO

| Demo | Neu/Reuse |
|------|-----------|
| kap-c-02-bogen | NEU |
| http-request-anatomie | NEU |
| http-response-anatomie | NEU |
| statuscodes-tabelle | NEU |
| http-versionen | NEU |
| 7-schritte-master | NEU |
| flexbox-axes | NEU |
| grid-areas | NEU |
| flexbox-vs-grid | NEU |
| bfsg-zeitleiste | NEU |
| pour-diagramm | NEU |
| summary-c-02 | NEU |
| Alle anderen | reuse aus 164 bestehenden |

→ 12 neue Demos für Kap 2. Großes Demo-Investment, aber klausur-zentral.