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).
4.9 KiB
4.9 KiB
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?"
- Eröffner: „Du tippst
librete.chein und schaust auf eine Seite. Was alles dahinter steht." → 7-Schritte-Diagramm (Vorschau auf Block F, wird in Kap 2 vertieft). - 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.
- Von-Neumann-Architektur: 5 Komponenten. Brücke zum Smartphone: „dein iPhone ist eine Von-Neumann-Maschine".
- Pivot zu Netz: „Eine Maschine ist eine Maschine. Was passiert, wenn wir zwei verbinden? ARPANET (1969)."
- Internet-Timeline: ARPANET (1969) → Email (1971) → TCP/IP (1983) → WWW (1989) → Mosaic (1993). Vier Milestones, nicht zwanzig.
- Physik: 1,3 Mio km Unterseekabel als Bodenfaktor, DE-CIX Frankfurt.
- Pivot zu HTML: „Du surfst auf der Website. Was bekommst du eigentlich vom Server geliefert?" → HTML.
- HTML-Anatomie: Tag-Struktur, DOCTYPE, head/body. Semantische Tags. Validität (warum kein div-Suppe).
- 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.