libretech
0a76c1c1d0
bogen-treu nach docs/223015c/01-geschichte-grundlagen-html-bogen.md: - eröffner-hook 'du tippst librete.ch ein, was alles dahinter steht' (vorschau auf alle folgenden kapitel) - 6 pioniere mit jeweils einer folie: lovelace (1843 erster algorithmus), hollerith (1890 lochkarte → IBM), turing (1936 turing-maschine + bletchley park enigma), von neumann (1945 EDVAC stored program), hopper/booth/hamilton zusammen auf einer folie (compiler/assembly/apollo-11 + software engineering term) - klausur von-neumann-5-komponenten-tabelle (steuerwerk, ALU, speicher, I/O, bus) - pivot zu netz: kalter krieg → paul baran packet switching, klausur internet-timeline (4 milestones: 1969 ARPANET, 1971 email, 1983 TCP/IP, 1989 WWW) - berners-lee + WWW (HTTP+HTML+URL als drei standards), unterseekabel + DE-CIX als physikalische realität - pivot zu HTML: was bekommt der browser, HTML-anatomie klausur-tabelle (opening/closing/attribut/inhalt/element), attribute-übersicht (id/class/href/src/alt), self-closing tags - klausur document-grundgerüst (DOCTYPE+html+head+body+meta), grundgeruest-demo reuse - klausur semantische HTML-tags-tabelle (header/nav/main/section/article/aside/footer) - inline-tags (a/strong/em/span/code/br/img), listen/bilder/links, formulare label-for-id-pflicht für A11y - dom-tree demo reuse als visualisierung - selbstlernen DevTools-inspector live, zusammenfassung streichungen vs altem 01-geschichte-grundlagen-html.md (1940 zeilen, 100 slides): - pro-person-galerie-folien stark reduziert (12 personen → 6) - IBM/NS-vertiefung 2 → 1 folie (nur speaker-note ausführlich) - ENIAC/Mark I/Z3 zusammengelegt - bit/byte/hex-blöcke RAUS (sind bereits in 223015b komplett behandelt — keine redundanz mit anderem kurs) - framework-logos (kommt in kap3) - A11y-folien (kommt in kap2) - 'die wichtigsten tags'-listen-folie eingedampft reuse-demos: grundgeruest, dom-tree (beide aus /assets/demos/, bereits vorhanden) no neu demos — alle inline als markdown-tabellen klausur-marker (6): von-neumann-5-komponenten, internet-timeline, HTML-anatomie, grundgerüst, semantische tags, document-struktur 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.