libretech
1731aa8c40
bogen-treu nach docs/223015c/03-interaktivitaet-javascript-bogen.md: - 2 leads: kapitel-intro, 'statisch ist langweilig' - was-kann-JS-tabelle (mit sicherheits-grenzen erklärung), JS-timeline (1995 brendan eich → 2009 node → 2015 ES6 → heute TS) - JS einbinden (external/inline/module), js-console demo reuse - variablen (let/const/var, const default), datentypen (6 grundtypen + arrays/objects) - js-arrays + js-objects demo reuse, funktionen (declaration + arrow) - js-loops demo reuse, kontrollstrukturen (if/else, ternär, switch) - DOM lead, dom-tree demo reuse, querySelector (CSS-selektoren wiederverwendbar) - js-manipulate demo reuse (textContent/innerHTML/setAttribute/classList) - js-create demo reuse (createElement/appendChild/remove) - events lead, js-event-listener demo reuse, häufige-events-tabelle (click/input/submit/keydown/load/DOMContentLoaded) - js-preventdefault demo reuse, js-darkmode demo reuse, js-todo demo reuse, js-fetch demo reuse, js-localstorage demo reuse - frameworks lead, React/Vue/Angular/Svelte/Astro übersichtstabelle (KEINE logo-galerie), library-vs-framework (inversion of control) - selbstlernen mini-projekt (dark-mode / to-do / API), zusammenfassung des ganzen kurses reuse-demos: js-console, js-arrays, js-objects, js-loops, dom-tree, js-manipulate, js-create, js-event-listener, js-preventdefault, js-darkmode, js-todo, js-fetch, js-localstorage (13 demos reused) no NEU demos in dieser session per klausur-themen-vorschlag: JS NICHT klausurrelevant. lernziele auf verstehen-niveau (kein code-schreiben in klausur). streichungen vs altem 03-interaktivitaet-javascript.md (1050 zeilen, 49 slides): - framework-logo-galerie-folien (react/vue/svelte/astro/webpack/vite/parcel als jeweils eigene folie) → eine übersichts-folie - doppelte 'was kann JS'-folien → eine - lange hands-on-codes als folie → in speaker-notes oder selbstlernen verlinken klausurfolien.md regeneriert: 20 slides (8 aus kap1, 11 aus kap2, 0 aus kap3 → bestätigt JS-nicht-klausurrelevant-design) build geht durch
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.