libretech
8fd33b291b
bogen-treu nach docs/223015c/02-netzwerke-protokolle-css-bogen.md. sub-A netzwerk (18 slides): - lead 'sub-A netzwerk' - klausur drei-adressen-tabelle (IP weltweit eindeutig endgerät, MAC lokal eindeutig NIC, port programm — mit beispielen 80/443/22) - ip-packet demo reuse - client-server-ports demo reuse - lead TCP/IP, warum-schichten erklärung, klausur 4-schichten-tabelle (network-access/internet/transport/application mit protokollen + dateneinheiten frame/packet/segment/data) - encap-stack demo reuse, klausur encapsulation-pyramide - OSI vs TCP/IP tabelle (7 vs 4 schichten) - lead DNS, dns-lookup demo reuse, dns-tree demo reuse - lead HTTP, klausur HTTP-request mit GET/path/header, klausur HTTP-response mit statuscode/header/body - klausur statuscodes-tabelle (200/301/302/400/401/403/404/500/503) - HTTP-versionen 1.1/2/3 mit hauptverbesserungen pro version - tcp-handshake demo reuse - klausur synthese 'URL → pixel 7 schritte' (URL-parsen→DNS→TCP→TLS→HTTP→HTML/CSS/JS→render) - network-chain demo reuse sub-B CSS+A11y (22 slides): - lead sub-B - css-anatomie demo reuse mit selektor/property/value erklärung + 3 einbindungsarten - klausur CSS-selektoren-tabelle (element/klasse/id/pseudo/kombinatoren) - css-combinators demo reuse - klausur spezifizität-hierarchie (inline 1000, id 100, klasse 10, element 1) - css-box-model demo reuse + ASCII-darstellung + box-sizing border-box best-practice - display: block/inline/flex/grid übersicht - klausur flexbox-vs-grid (1D vs 2D, anwendungs-fälle) - css-responsive demo reuse (media queries, mobile-first) - lead A11y, klausur BFSG+EAA-pflicht ab 28.06.2025 (wer betroffen, ausnahmen kleinunternehmen, 100k bußgeld), klausur WCAG-POUR-prinzipien - a11y-semantic demo reuse, ARIA als ergänzung (button vs div role=button), contrast-levels demo reuse, keyboard-a11y demo reuse, a11y-error demo reuse - selbstlernen A11y-audit mit lighthouse - zusammenfassung 'netzwerk + browser-synthese + CSS + A11y' reuse-demos: ip-packet, client-server-ports, encap-stack, dns-lookup, dns-tree, tcp-handshake, network-chain, css-anatomie, css-combinators, css-box-model, css-responsive, a11y-semantic, contrast-levels, keyboard-a11y, a11y-error (15 demos reused) no NEU demos in dieser session — alle inline als markdown-tabellen + code-blocks klausur-marker (11): drei-adressen, 4-schichten, encapsulation, HTTP-request, HTTP-response, statuscodes, URL→pixel-7-schritte, CSS-selektoren, spezifizität, box-model, flexbox-vs-grid, BFSG/EAA, WCAG-POUR 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.