From 753afd6ababeb5b908177c8154c2062a47c96f1d Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Thu, 14 May 2026 16:35:44 +0200
Subject: [PATCH] 223015c phase 2: 3 bogen-docs (kap1 geschichte+HTML, kap2
 netzwerke+CSS, kap3 JS)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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).
---
 .../01-geschichte-grundlagen-html-bogen.md    |  87 +++++++++++++
 .../02-netzwerke-protokolle-css-bogen.md      | 117 ++++++++++++++++++
 .../03-interaktivitaet-javascript-bogen.md    |  75 +++++++++++
 3 files changed, 279 insertions(+)
 create mode 100644 docs/223015c/01-geschichte-grundlagen-html-bogen.md
 create mode 100644 docs/223015c/02-netzwerke-protokolle-css-bogen.md
 create mode 100644 docs/223015c/03-interaktivitaet-javascript-bogen.md

diff --git a/docs/223015c/01-geschichte-grundlagen-html-bogen.md b/docs/223015c/01-geschichte-grundlagen-html-bogen.md
new file mode 100644
index 0000000..485dfb7
--- /dev/null
+++ b/docs/223015c/01-geschichte-grundlagen-html-bogen.md
@@ -0,0 +1,87 @@
+# Kap 1 — Geschichte, Grundlagen & HTML
+
+**Bedient Klausur-Blöcke:** A (Von-Neumann) + B (Internet-Entstehung) + G (HTML-Grundlagen)
+**Slide-Budget:** ~40 (90-min)
+**Aktueller Stand:** 100 Slides → 60% Reduktion nötig.
+
+## Bogen
+
+Eine Stunde, eine Frage: **„Wie sind wir vom Lochkarten-Rechenwerk zum HTML-Tag im Browser gekommen — und warum spielt das heute noch eine Rolle?"**
+
+1. **Eröffner:** „Du tippst `librete.ch` ein und schaust auf eine Seite. Was alles dahinter steht." → 7-Schritte-Diagramm (Vorschau auf Block F, wird in Kap 2 vertieft).
+2. **Pioniere:** Lovelace (algorithm) → Hollerith (Maschine zählt Daten) → Turing (universelle Maschine) → von Neumann (Architektur, die wir heute noch nutzen). 6 Personen, keine Galerie-Folie pro Person.
+3. **Von-Neumann-Architektur:** 5 Komponenten. Brücke zum Smartphone: „dein iPhone ist eine Von-Neumann-Maschine".
+4. **Pivot zu Netz:** „Eine Maschine ist eine Maschine. Was passiert, wenn wir zwei verbinden? ARPANET (1969)."
+5. **Internet-Timeline:** ARPANET (1969) → Email (1971) → TCP/IP (1983) → WWW (1989) → Mosaic (1993). Vier Milestones, nicht zwanzig.
+6. **Physik:** 1,3 Mio km Unterseekabel als Bodenfaktor, DE-CIX Frankfurt.
+7. **Pivot zu HTML:** „Du surfst auf der Website. Was bekommst du eigentlich vom Server geliefert?" → HTML.
+8. **HTML-Anatomie:** Tag-Struktur, DOCTYPE, head/body. Semantische Tags. Validität (warum kein div-Suppe).
+9. **Selbstlernen:** Im DevTools-Inspector eine Seite anschauen.
+
+## Advance Organizer
+
+Konkret-erkenntnisgewinnend (nicht Schablone): das **Welt-zu-Pixel-Diagramm** mit allen Stationen, die in diesem Kapitel angerissen werden — Rechenarchitektur, Internet-Layer, HTML-Render. Wird in Kap 2 (Netzwerk-Tiefe) und 3 (JS) vertieft.
+
+→ Demo-Datei: `kap-c-01-bogen.html` (NEU)
+
+## Folien-Skelett (Vorschlag)
+
+| # | Typ | Titel/Kern | Lernziel | Visualisierung |
+|---|-----|-----------|---------|----------------|
+| 1 | Cover | Kapitel 1 | — | reuse |
+| 2 | Lead | „Du tippst librete.ch ein..." | — | — |
+| 3 | Advance Organizer | Welt → Pixel (alle Stationen) | A.1+B.1+G.1 | NEU kap-c-01-bogen |
+| 4 | Lead | Pioniere | — | — |
+| 5 | Inhalt | Ada Lovelace + Hollerith | A.3 | reuse |
+| 6 | Inhalt | Turing + Manhattan-Projekt + ENIAC | A.3 | reuse |
+| 7 | Inhalt | von Neumann + die Architektur | A.1, A.2 | reuse |
+| 8 | Klausur | Die 5 Komponenten Von-Neumann | A.1 | reuse |
+| 9 | Inhalt | Hopper, Booth, Hamilton | A.3 | reuse |
+| 10 | Lead | Vom Militär zum Netz | — | — |
+| 11 | Inhalt | Kalter Krieg + ARPANET | B.1 | reuse |
+| 12 | Klausur | Internet-Timeline (4 Milestones) | B.1 | NEU timeline |
+| 13 | Inhalt | WWW 1989 Berners-Lee | B.1 | reuse |
+| 14 | Inhalt | Mosaic + die 90er | B.1 | reuse |
+| 15 | Inhalt | Unterseekabel | B.2 | reuse |
+| 16 | Inhalt | DE-CIX, Frankfurt | B.2 | NEU dce-cix-karte |
+| 17 | Lead | Was bekommt der Browser? | — | — |
+| 18 | Inhalt | Eine Webseite ist HTML | G.1 | reuse |
+| 19 | Klausur | HTML-Anatomie: Tag-Struktur | G.1 | reuse |
+| 20 | Demo | HTML-Grundgerüst | G.3 | reuse grundgeruest |
+| 21 | Klausur | DOCTYPE + head + body | G.3 | reuse |
+| 22 | Inhalt | Attribute (id, class, href, src) | G.1 | reuse tag-attribut |
+| 23 | Inhalt | Semantische HTML-Tags | G.2 | reuse |
+| 24 | Klausur | Header/nav/main/article/section/footer | G.2 | reuse |
+| 25 | Inhalt | Warum semantisch? (SEO, A11y) | G.4 | reuse |
+| 26 | Inhalt | Validität: kein div-Suppe | G.4 | — |
+| 27 | Demo | Inspector im Browser | G.1 | reuse dom-tree |
+| 28 | Inhalt | Häufige HTML-Tags-Übersicht | G.1, G.2 | NEU html-tags-cheatsheet |
+| 29 | Inhalt | Forms (input, label, button, textarea) | G.1 | reuse button + input |
+| 30 | Inhalt | Dialog + Details | G.2 | reuse dialog + details-open/closed |
+| 31 | Selbstlernen | DevTools-Inspector eigene Lieblings-Seite | G.4 | — |
+| 32 | Zusammenfassung | Pioniere → Internet → HTML | alle A+B+G | NEU |
+
+~32 statt 100 Slides. Drastische Reduktion durch Streichen der Vertiefungs-Folien und Galerie-Inflation.
+
+## Streichungs-Liste
+
+Aus aktuellem 01-geschichte-grundlagen-html.md (100 Slides):
+- Galerie-Folien pro Person (jede mit Bild + 5 Bullet Points): 12 Personen → 6 (Lovelace, Hollerith, Turing, von Neumann, Hopper, Hamilton)
+- Z3, Mark I, ENIAC als drei Einzelfolien → eine
+- IBM/NS-Vertiefung als zwei Folien → eine
+- HTML-Tag-Listen-Folien (jede mit 5-7 Tags) → eine Cheatsheet-Folie
+- Frameworks-Logos-Slides (React, Vue, Astro etc.) — gehört in JS-Kapitel (Block J)
+- A11y-Folien hier → verschieben nach Kap 2 (wo CSS/A11y kombiniert)
+- Diverse „Bei näherem Hinsehen"-Vertiefungen die Mayer-Redundancy verletzen
+
+## Visualisierungs-TODO
+
+| Demo | Neu/Reuse | Status |
+|------|-----------|--------|
+| kap-c-01-bogen | NEU | Phase 3 |
+| internet-timeline | NEU | Phase 3 |
+| dce-cix-karte | NEU | Phase 3 |
+| html-tags-cheatsheet | NEU | Phase 3 |
+| Alle anderen | reuse | bereits in 164 demos |
+
+→ 4 neue Demos für Kap 1.
diff --git a/docs/223015c/02-netzwerke-protokolle-css-bogen.md b/docs/223015c/02-netzwerke-protokolle-css-bogen.md
new file mode 100644
index 0000000..5c71ada
--- /dev/null
+++ b/docs/223015c/02-netzwerke-protokolle-css-bogen.md
@@ -0,0 +1,117 @@
+# 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.
diff --git a/docs/223015c/03-interaktivitaet-javascript-bogen.md b/docs/223015c/03-interaktivitaet-javascript-bogen.md
new file mode 100644
index 0000000..3befb18
--- /dev/null
+++ b/docs/223015c/03-interaktivitaet-javascript-bogen.md
@@ -0,0 +1,75 @@
+# Kap 3 — Interaktivität & JavaScript
+
+**Bedient Klausur-Block:** J (nicht-klausurrelevant, Verstehen-Niveau)
+**Slide-Budget:** ~30 (90-min, ggf. weniger)
+**Aktueller Stand:** 49 Slides → leicht reduzieren + neu sortieren.
+
+## Bogen
+
+Eine Stunde, eine Frage: **„Was passiert, wenn der HTML-Code da ist und nichts mehr funktioniert? Wo kommt das Interaktive her?"**
+
+1. **Eröffner:** Eine statische Website (HTML+CSS) reagiert auf nichts. Klick auf Button → nichts. **JS macht es interaktiv.**
+2. **Was ist JS?** Browser-Skriptsprache seit 1995. Heute in jedem Webserver, jeder Mobile-App, vielen Desktop-Apps (Electron).
+3. **Variablen, Funktionen, Schleifen:** das Mindeste. Code-Lesen-Niveau.
+4. **DOM:** HTML ist im Browser ein Baum. JS kann ihn anfassen.
+5. **Events:** User-Aktionen lösen JS-Callbacks aus.
+6. **Hands-on:** Dark-Mode-Toggle, To-Do-Liste — kleine Beispiele für ein „Aha".
+7. **Frameworks-Vorschau:** React, Vue, Angular — was sind die, wann nimmt man sie?
+
+## Advance Organizer
+
+„Statisch → Dynamisch". HTML+CSS rendert. JS reagiert.
+
+## Folien-Skelett (Vorschlag)
+
+| # | Typ | Titel/Kern | Lernziel | Visualisierung |
+|---|-----|-----------|---------|----------------|
+| 1 | Cover | Kapitel 3 | — | reuse |
+| 2 | Lead | „Statisch ist langweilig" | — | — |
+| 3 | Inhalt | Was kann JS, was kann es nicht | J.1 | NEU js-was-kann-es |
+| 4 | Inhalt | JS-Timeline (1995, 2009 Node, 2015 ES6) | J.1 | reuse |
+| 5 | Inhalt | Wie binde ich JS ein | J.1 | reuse |
+| 6 | Inhalt | Die Browser-Konsole (DevTools) | J.1 | reuse js-console |
+| 7 | Inhalt | Variablen: let, const, var | J.1 | — |
+| 8 | Inhalt | Datentypen (string, number, boolean, ...) | J.1 | — |
+| 9 | Inhalt | Arrays | J.1 | reuse js-arrays |
+| 10 | Inhalt | Objects | J.1 | reuse js-objects |
+| 11 | Inhalt | Funktionen | J.1 | — |
+| 12 | Inhalt | Schleifen (for, forEach, map, filter) | J.1 | reuse js-loops |
+| 13 | Inhalt | Kontrollstrukturen (if/else) | J.1 | — |
+| 14 | Lead | Das DOM | — | — |
+| 15 | Inhalt | DOM als Baum | J.2 | reuse dom-tree |
+| 16 | Inhalt | Elemente finden (querySelector) | J.2 | reuse js-manipulate |
+| 17 | Inhalt | Elemente erzeugen (createElement) | J.2 | reuse js-create |
+| 18 | Inhalt | Klassen manipulieren (classList) | J.2 | reuse js-classlist |
+| 19 | Lead | Events | — | — |
+| 20 | Inhalt | Event-Listener | J.3 | reuse js-event-listener |
+| 21 | Inhalt | preventDefault | J.3 | reuse js-preventdefault |
+| 22 | Inhalt | Häufige Events (click, input, submit) | J.3 | — |
+| 23 | Demo | Dark-Mode-Toggle | J.3 | reuse js-darkmode |
+| 24 | Demo | To-Do-Liste | J.3 | reuse js-todo |
+| 25 | Inhalt | fetch + JSON | J.1 | reuse js-fetch |
+| 26 | Inhalt | localStorage | J.1 | reuse js-localstorage |
+| 27 | Lead | Frameworks | — | — |
+| 28 | Inhalt | React + Vue + Angular — was sind sie | J.4 | reuse |
+| 29 | Inhalt | Library vs Framework | J.4 | NEU library-vs-framework |
+| 30 | Selbstlernen | Eigenes Mini-Projekt | alle J | — |
+
+~30 statt 49 Slides. Reduktion durch Wegnehmen der Galerie-Folien für jedes Framework-Logo.
+
+## Streichungs-Liste
+
+Aus aktuellem 03-interaktivitaet-javascript.md (49 Slides):
+- Framework-Logo-Galerie-Folien (React-Logo + Vue-Logo + Svelte-Logo + Astro-Logo + Webpack/Vite/Parcel separat) — eine Übersichts-Folie reicht
+- Doppelte „Was kann JS"-Folien — eine reicht
+- Hands-On-Folien mit langem Code — Code in `assets/code/` als separate Datei, in Folie nur kurzer Auszug
+
+## Visualisierungs-TODO
+
+| Demo | Neu/Reuse |
+|------|-----------|
+| js-was-kann-es | NEU |
+| library-vs-framework | NEU |
+| Alle anderen | reuse |
+
+→ 2 neue Demos für Kap 3. Geringes Demo-Investment, dafür gut bestückt aus den 164 vorhandenen Demos.