libretech
636e7e021e
struktur: - 3 intro: cover, 'drei modalitäten ein prinzip', kap03-eroeffner als advance organizer - 20 BILDER: lead, raster-vs-vektor-demo, klausur-tabelle, lead JPEG, jpeg-pipeline-demo, einzel-folien für jeden schritt (Y'CbCr farbraum mit Barn-yuv reuse, chroma-subsampling mit Common_chroma_ reuse, 8x8+DCT kombiniert, quantisierung detail mit DCT-koeffizienten beispiel, huffman+zigzag+RLE), klausur memo 6 schritte tabelle, JPEG-artefakte felis-katze reuse, lead andere bildformate, übersicht-tabelle PNG/GIF/WebP/AVIF/SVG, klausur wann-welches, patent-politik WebP vs JPEG XL - 8 AUDIO: lead, sampling-bittiefe recap aus kap1, psychoakustik-grafik reuse für maskierung, bitrate-tabelle 64/128/192/320/1411, audio-format-landschaft WAV/FLAC/MP3/AAC/Opus, klausur format-wahl, selbstlernen spotify-bitrate - 14 VIDEO: lead, datenflut-rechnung 4K@60fps = 1.49 GB/s, container-ungleich-codec mit container-codec-diagram reuse, container-anatomie text, inter-frame-kompression mit iframe-pframe-diagram reuse, klausur I/P/B-frames, motion-compensation, lead codec-landschaft, H.264 workhorse, H.265 patent-chaos, VP9+AV1 offene antwort, klausur patent-vs-open, 4K-bitrate vs heim-bandbreite tabelle - 3 selbstlernen + 1 summary: 3-übungen-folie (squoosh/spotify/mediainfo), zusammenfassung-tabelle drei modalitäten reuse-demos: kap03-eroeffner, raster-vs-vektor, jpeg-pipeline, psychoakustik-grafik reuse-assets: Barn-yuv.png, Common_chroma_subsampling.png, Felis_silvestris.jpg, container-codec-diagram.png, iframe-pframe-diagram.png klausur-marker (5 stück, fragmentiert): raster-vs-vektor (8), 6-schritte-memo (18), wann-welches-bildformat (22), audio-format-wahl (30), container-ungleich-codec (34), I/P/B-frames (38), patent-vs-open AV1 (44) 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.