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).
Uni Slides - DHBW + HdM
Combined presentation slides for DHBW and HdM Stuttgart courses, built with Marp.
Courses
| Code | Title | Origin | Fokus |
|---|---|---|---|
| 223015b | Dateiformate, Schnittstellen, Speichermedien | HdM | Dateien und Inhalte |
| 223015c | Internettechnologien | HdM | Internet und Web |
| dhbw | Technik I – Grundlagen IT | DHBW | Grundlagen |
Didaktisches Fundament (HdM)
Drei Meta-Lernziele bilden den Maßstab für jede inhaltliche Entscheidung:
- Gelernte Hilflosigkeit ablegen — Technik ist kein Mysterium. Keine Insider-Sprache ohne Erklärung; abstrakte Konzepte über konkrete Beispiele.
- Berührungspunkte schaffen — Inhalte mit der Lebenswelt der Studierenden verknüpfen. Jedes Kapitel braucht mindestens einen Alltags-Anker.
- Erstes fundiertes Wissen und Gefühl für Technik — kein Auswendiglernen, sondern ein belastbarer mentaler Bauplan. Lieber drei Konzepte in Tiefe als zwölf in Breite.
Die operative Umsetzung (Werkzeuge, Validierungs-Kriterien, Anti-Pattern) ist in CLAUDE.md dokumentiert und gilt für alle Beiträge — menschlich wie agentisch.
Project Structure
slides/
├── 223015b/ # HdM: Dateiformate
├── 223015c/ # HdM: Internettechnik
├── dhbw/ # DHBW slides (TBD)
scripts/ # Build scripts
build/ # Generated output (gitignored)
Development
make hdm-dev # Live server all HdM courses (port 1312, HMR)
make hdm-dev-b # 223015b only (port 1313, HMR)
make hdm-dev-c # 223015c only (port 1314, HMR)
make dhbw-dev # DHBW (not yet configured)
Build
make hdm-build # Build all HdM courses (HTML + PDF)
make hdm-build-b # 223015b only
make hdm-build-c # 223015c only
make hdm-html # HTML only all HdM
make hdm-pdf # PDF only all HdM
Klausur Folien
Extract exam slides (<!-- _class: klausur -->) into single file:
make hdm-klausur # All HdM courses
make hdm-klausur-b # 223015b only
make hdm-klausur-c # 223015c only
Output: slides/<course>/klausurfolien.md
Tools
make qr URL=https://example.com # Generate QR code
make qr-slides COURSE=223015b # QR for course URL
make optimize-images COURSE=223015b # Resize images
Deploy
make hdm-deploy # Deploy all HdM courses
make hdm-deploy-b # 223015b only
make hdm-deploy-c # 223015c only
make deploy # Full deploy (all courses)
Marking Slides as Klausur-Relevant
Add this comment block after the slide separator:
---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #e3f2fd -->
# Your Slide Title
Content here...
The klausur class adds a visual indicator (diagonal stripes) during presentation.