libretech
753afd6aba
kap1 (~32 slides, vs ist 100): bogen 'wie sind wir vom lochkarten-rechenwerk zum HTML-tag im browser gekommen'. struktur: pioniere-galerie reduziert auf 6 personen (lovelace/hollerith/turing/von-neumann/hopper/hamilton), 4 internet-milestones (1969/1971/1983/1989), HTML-anatomie + semantik. streichungen: pro-person-galerie, IBM/NS-vertiefung, framework-logos (gehört kap3), A11y (verschoben nach kap2). 4 NEU demos: kap-c-01-bogen, internet-timeline, dce-cix-karte, html-tags-cheatsheet. kap2 (~50 slides, vs ist 91): bogen 'wie reisen bytes von frankfurt nach stuttgart und wie wird HTML hübsch'. sub-A netzwerk 25 slides (IP/MAC/port-tripel, 4 TCP/IP-schichten + encapsulation, DNS-hierarchie, HTTP-request/response, statuscodes 200/301/404/500, HTTP/1.1/2/3, TCP-handshake, 7-schritte-synthese), sub-B CSS+A11y 25 slides (anatomie/selektoren/spezifizität/box-model/flexbox/grid/responsive/farbe + BFSG-EAA-zeitleiste/POUR/semantik+ARIA/kontrast/keyboard/error-states). streichungen: encapsulation-doppelt, bittorrent/P2P, glossar-folien, IPv6-tiefen. 12 NEU demos (HTTP-anatomien, statuscodes, http-versionen, 7-schritte-master, flexbox/grid-axes, flexbox-vs-grid, bfsg-zeitleiste, pour-diagramm, summary). kap3 (~30 slides, vs ist 49): bogen 'was passiert wenn HTML+CSS da sind und nichts reagiert? JS macht es interaktiv'. variablen/funktionen/schleifen/DOM/events/dark-mode-toggle/to-do/fetch/localStorage. frameworks-vorschau (react/vue/angular) als ÜBERSICHTS-folie statt logo-galerie. JS auf verstehen-niveau (nicht klausurrelevant per vorschlag). streichungen: framework-logo-galerie, doppelte 'was kann JS'-folien, lange hands-on-codes (code in assets/code/). 2 NEU demos: js-was-kann-es, library-vs-framework. reuse-budget: ~150 von 164 vorhandenen demos werden genutzt (a11y/css-selektoren/network-chain/dns/tcp/encap/js-*). NEU-budget: 18 demos total (4+12+2).
5.7 KiB
5.7 KiB
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?"
- Eröffner: der „URL bis Pixel"-Ablauf als Bogen-Anker. 7 Schritte, jeder kommt in diesem Kapitel dran.
- Adress-Tripel: IP, MAC, Port. Drei Schichten, drei Fragen.
- TCP/IP-Schichten: 4 Schichten + Encapsulation. Warum Schichten überhaupt?
- DNS: wie findet die Maschine die richtige IP zur URL?
- HTTP: wie sieht die Anfrage und Antwort aus?
- Pivot zu Darstellung: Browser hat HTML. Jetzt: wie wird das hübsch?
- CSS-Anatomie: Selektoren, Box-Model, Kaskade.
- Layout: Flexbox + Grid.
- 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.