add slide content improvements and dev server setup

223015b:
- add WTF hex code explanation slide (89=137 decimal, PNG signature)
- add ASCII lead slide with historical context
- remove Hilbert-Studie reference from title

223015c termin 2:
- add OSI layer 5 (session) and layer 6 (presentation) slides
- add URL/domain anatomy slide
- mark HTTP/S section as klausur
- improve status codes formatting with client/server examples
- add CRUD column to HTTP methods table

infrastructure:
- add dev-server.sh for multi-course development
- update generate-index.sh with course-specific colors
- add QR codes for slide URLs

courses/223015b/slides/2025-12-19-termin-0-intro.md

@@ -58,7 +58,7 @@ Hochschule der Medien Stuttgart
 
 **Wintersemester 2025/26**
 
-[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
 
 ---
 

courses/223015b/slides/2025-12-19-termin-1-grundlagen-text-audio.md

@@ -64,7 +64,7 @@ Hochschule der Medien Stuttgart
 
 **Wintersemester 2025/26**
 
-[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
 
 ---
 
@@ -99,6 +99,32 @@ Hochschule der Medien Stuttgart
 
 ---
 
+![bg right:40%](./assets/matrix-code.png)
+
+# WTF!? – Auflösung
+
+```
+89 50 4E 47 ...
+```
+
+| Hex | Dezimal | ASCII |
+|-----|---------|-------|
+| `89` | 137 | ✗ (> 127, nicht druckbar) |
+| `50` | 80 | **P** |
+| `4E` | 78 | **N** |
+| `47` | 71 | **G** |
+
+→ **PNG**-Signatur! (Das `89` markiert: "Ich bin binär, kein Text!")
+
+<!--
+Hex = 2 Ziffern = 1 Byte = 8 Bit
+89 hex = 8×16 + 9 = 137 dezimal
+ASCII geht nur bis 127, also nicht druckbar
+50, 4E, 47 = P, N, G in ASCII
+-->
+
+---
+
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
@@ -278,25 +304,30 @@ Digital explodierte: IoT, Social Media, Cloud, Video
 <!-- _class: klausur -->
 <!-- _footer: '' -->
 
-# Der digitale Wendepunkt (Hilbert-Studie)
+# Der digitale Wendepunkt
 
 | Jahr | Analog | Digital | Digital-Anteil |
 |------|--------|---------|----------------|
-| **1986** | 2,57 EB | 0,02 EB | **1%** |
-| **2000** | ~37 EB | ~13 EB | 25% |
+| **1986** | 2,6 EB | 0,02 EB | **1%** |
 | **2002** | — | — | **50%** (Wendepunkt) |
-| **2007** | ~18 EB | ~277 EB | **94%** |
+| **2007** | 18 EB | 277 EB | **94%** |
 
-**Beobachtung:** Analog blieb nahezu konstant (~2,6 → ~18 EB)
-Digital explodierte: ×14.000 in 21 Jahren
+**Perspektive:**
+- 1986: "Petabyte" war ein theoretisches Konzept
+- 2025: ~181 Zettabyte jährlich produziert
+
+**Magnetband lebt:** LTO-Tapes bleiben günstigstes Archivmedium
+(AWS Glacier, Film-Archive, Rechenzentren)
 
 <!--
-Hilbert & López (2011): "The World's Technological Capacity to Store, Communicate, and Compute Information", Science
-Erste systematische Studie zur weltweiten Speicherkapazität
-60 analoge und digitale Technologien untersucht (1986-2007)
-2002 = Beginn des "digitalen Zeitalters"
-Analog: Bücher, Zeitungen, Vinyl, VHS, Fotos
-Digital: Festplatten, CDs, DVDs, Flash-Speicher
+QUELLE: Hilbert & López (2011): "The World's Technological Capacity to Store, Communicate, and Compute Information", Science
+METHODIK: 60 analoge + digitale Technologien untersucht (1986-2007)
+WENDEPUNKT 2002: Erstmals mehr digital als analog gespeichert
+ANALOG damals: Bücher, Zeitungen, Vinyl, VHS, Filmrollen, Fotos
+DIGITAL damals: Festplatten, CDs, DVDs, frühe Flash-Speicher
+HEUTE: LTO-9 (2021) speichert 18 TB pro Band, ~$5/TB für Cold Storage
+VERGLEICH: SSD ~$50/TB, HDD ~$15/TB, LTO ~$5/TB
+PRÜFUNGSRELEVANT: Wendepunkt 2002, Speichereinheiten (KB→MB→GB→TB→PB→EB→ZB), Magnetband als Archivmedium
 -->
 
 ---
@@ -345,6 +376,38 @@ Model Collapse: AI trainiert auf AI-Output → Qualitätsverlust
 
 ---
 
+<!-- _class: lead -->
+
+# ASCII
+## Ein Zeichensatz to rule them all
+
+<!--
+WARUM 7 BIT STATT 8?
+- 1963: Fernschreiber (Teletype) arbeiteten mit 7-Bit-Codes
+- Das 8. Bit diente der Paritätsprüfung (Fehlererkennung bei Übertragung)
+- Speicher war kostspielig: jedes eingesparte Bit zählte
+- 128 Zeichen galten als ausreichend für den englischsprachigen Raum
+
+KULTURHISTORISCHER KONTEXT:
+- "American Standard Code for Information Interchange" (1963)
+- Entwickelt für US-amerikanische Bedürfnisse
+- Keine Unterstützung für: Umlaute (ä, ö, ü), ß, diakritische Zeichen (é, ñ, ç)
+- Nicht-lateinische Schriftsysteme (Kyrillisch, Arabisch, CJK) wurden nicht berücksichtigt
+- Führte zu zahlreichen inkompatiblen Erweiterungen (ISO-8859-1, Windows-1252, etc.)
+
+WARUM NOCH HEUTE RELEVANT?
+- Abwärtskompatibilität: UTF-8 ist vollständig ASCII-kompatibel (Zeichen 0-127 identisch)
+- Internetprotokolle basieren auf ASCII: HTTP-Header, SMTP, URLs
+- Programmiersprachen: Schlüsselwörter und Syntax sind ASCII
+- Ein 60 Jahre alter Standard, der durch Kompatibilitätszwänge fortbesteht
+
+HISTORISCHE RANDNOTIZ:
+- Das @-Zeichen wurde nachträglich aufgenommen
+- Heute unverzichtbar für E-Mail-Adressen weltweit
+-->
+
+---
+
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
@@ -837,22 +900,36 @@ Visualisierung der beiden Philosophien
 
 ---
 
-# Zwei Philosophien
+<!-- _class: klausur -->
+<!-- _footer: '' -->
 
-**Lossless (Verlustfrei):**
-- Original exakt wiederherstellbar
-- ZIP, PNG, FLAC
-- 30-50% Ersparnis
+# Kompression: Zwei Philosophien
 
-**Lossy (Verlustbehaftet):**
-- Daten irreversibel verändert
-- JPEG, MP3, H.264
-- 90%+ Ersparnis
+| | Lossless | Lossy |
+|---|---|---|
+| **Prinzip** | Redundanz entfernen | Irrelevanz entfernen |
+| **Reversibel** | Ja (bitgenau) | Nein |
+| **Kompression** | 30-50% | 80-99% |
+| **Algorithmen** | RLE, Huffman, LZW, DEFLATE | DCT, Psychoakustik |
+
+**Lossless:** ZIP, PNG, FLAC, GIF
+**Lossy:** JPEG, MP3, AAC, H.264, H.265, AV1
+
+**Entscheidung:** Archiv/Code → Lossless, Medien → Lossy
 
 <!--
-Lossless: Findet Muster, beschreibt effizienter
-Lossy: Wirft "Unwichtiges" weg (Psychoakustik/Psychovisuell)
-Trade-off: Größe vs. Qualität
+REDUNDANZ: Wiederholende Muster (z.B. "AAAA" → "4A")
+IRRELEVANZ: Für Menschen nicht wahrnehmbar (Psychoakustik, Psychovisuell)
+LOSSLESS-ALGORITHMEN:
+- RLE (Run-Length Encoding): Wiederholungen zählen
+- Huffman: Häufige Zeichen = kurze Codes
+- LZW: Wörterbuch aufbauen (GIF, TIFF)
+- DEFLATE: Huffman + LZ77 (ZIP, PNG, gzip)
+LOSSY-ALGORITHMEN:
+- DCT (Discrete Cosine Transform): Frequenzanalyse (JPEG, MP3)
+- Psychoakustik: Maskierungseffekte nutzen (MP3, AAC)
+- Bewegungskompensation: Nur Differenzen speichern (H.264, H.265)
+PRÜFUNGSRELEVANT: Unterschied Redundanz vs. Irrelevanz, Beispiele für beide Kategorien
 -->
 
 ---

courses/223015b/slides/2026-01-09-termin-2-bild-audio-video.md

@@ -42,6 +42,12 @@ code {
 a {
   color: var(--color-highlight);
 }
+section.klausur {
+  background: #e3f2fd !important;
+}
+section.klausur footer {
+  display: none;
+}
 </style>
 
 <!-- _class: invert -->
@@ -59,7 +65,14 @@ Hochschule der Medien Stuttgart
 
 **Wintersemester 2025/26**
 
-[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-223015b.png)
 
 ---
 
@@ -104,70 +117,123 @@ Smartphone-Speicher wäre schnell voll ohne Kompression
 
 ---
 
+<!-- _class: klausur -->
+<!-- _footer: '' -->
+
 # Rastergrafiken (Bitmaps)
 
-**Pixelraster:** Jeder Bildpunkt hat Koordinate + Farbwert
+**Aufbau:** 2D-Array von Pixeln mit Farbwerten
 
-**Eigenschaften:**
-- Je größer das Bild → größere Datei
-- **Verkleinern:** Meist ohne Qualitätsverlust
-- **Vergrößern:** Wird unscharf/pixelig!
+**Speicherbedarf (unkomprimiert):**
+Breite × Höhe × Farbtiefe (in Bytes)
+→ 1920×1080 × 3 Byte (RGB) = **6,2 MB**
 
-**Formate:** JPEG, PNG, GIF, BMP, TIFF, WebP
+**Farbtiefe:**
+- 1 Bit = 2 Farben (S/W)
+- 8 Bit = 256 Farben (Graustufen/Palette)
+- 24 Bit = 16,7 Mio. Farben (True Color)
+- 32 Bit = True Color + Alpha (Transparenz)
 
-**Verwendung:** Fotos, Screenshots, komplexe Bilder
+**Skalierung:** Interpolation (Nearest Neighbor, Bilinear, Bicubic)
 
 <!--
-Bitmap = Bit-mapped graphics
-Digitalkameras erzeugen immer Rastergrafiken
-Kompression nötig wegen Dateigrößen (PNG, JPEG, GIF)
-Skalierungsproblem: Interpolation erzeugt Unschärfe
+DEFINITION: Bitmap = Bit-mapped graphics, 2D-Matrix aus Pixeln
+BERECHNUNG SPEICHERBEDARF: Breite × Höhe × (Farbtiefe / 8)
+BEISPIEL: 1920×1080 × 24 Bit = 1920×1080×3 = 6.220.800 Bytes ≈ 6,2 MB
+FARBTIEFE erklärt:
+- 1 Bit: 2^1 = 2 Farben (Schwarz/Weiß, Fax)
+- 8 Bit: 2^8 = 256 Farben (GIF, Graustufen)
+- 24 Bit: 2^24 = 16.777.216 Farben (True Color, RGB je 8 Bit)
+- 32 Bit: 24 Bit + 8 Bit Alpha-Kanal (Transparenz)
+INTERPOLATION bei Skalierung:
+- Nearest Neighbor: Schnell, pixelig (Pixel-Art)
+- Bilinear: Mittelwert aus 4 Nachbarn (Standard)
+- Bicubic: 16 Nachbarn, glatter (Photoshop-Standard)
+- Lanczos: Beste Qualität, rechenintensiv
+PRÜFUNGSRELEVANT: Speicherberechnung, Farbtiefe-Tabelle, warum Vergrößern problematisch
 -->
 
 ---
 
+<!-- _class: klausur -->
+<!-- _footer: '' -->
+
 # Vektorgrafiken
 
-**Mathematische Beschreibung statt Pixel**
+**Speicherung als geometrische Primitive:**
+- Pfade (Bézierkurven mit Kontrollpunkten)
+- Grundformen (Rechteck, Ellipse, Polygon)
+- Text (Glyphen als Outlines)
 
-**Kreis speichern:**
-- Rastergrafik: Tausende Pixel
-- Vektorgrafik: Mittelpunkt + Radius (2 Werte!)
+**SVG-Beispiel:**
+`<circle cx="50" cy="50" r="40" fill="#ff0000"/>`
+→ 3 Parameter statt 5.027 Pixel (r=40)
 
-**Gespeichert werden:**
-- Form (Kreis, Linie, Pfad...)
-- Position, Farbe, Strichstärke, Füllung
+**Rendering-Pipeline:**
+Vektordaten → Rasterisierung → Framebuffer → Display
 
-**Vorteil:** Beliebig skalierbar ohne Qualitätsverlust!
-
-**Formate:** SVG, PDF, AI, EPS
+**Auflösungsunabhängig:** Gleiche Datei für Icon (32px) und Plakat (3m)
 
 <!--
-Vektorgrafik = geometrische Primitive + Attribute
-SVG = Scalable Vector Graphics (Web-Standard)
-AI = Adobe Illustrator
-Ideal für Logos, Icons, Infografiken
+PRIMITIVE: Grundbausteine der Vektorgrafik
+- Pfade: Sequenz von Punkten, verbunden durch Linien/Kurven
+- Bézierkurven: Quadratisch (3 Kontrollpunkte), Kubisch (4 Kontrollpunkte)
+- Formen: Rechteck, Ellipse, Polygon (intern als Pfade)
+SVG-SYNTAX Beispiele:
+- <rect x="0" y="0" width="100" height="50"/>
+- <circle cx="50" cy="50" r="25"/>
+- <path d="M 0 0 L 100 100"/> (MoveTo, LineTo)
+BERECHNUNG: Kreis mit r=40 → Fläche = π×40² ≈ 5.027 Pixel vs. 3 Parameter
+RENDERING-PIPELINE: Vector → Tessellation → Rasterization → Framebuffer
+FORMATE:
+- SVG: XML-basiert, Web-Standard, editierbar
+- PDF: Seiten-Beschreibungssprache, Vektoren + Raster gemischt
+- AI/EPS: Adobe-proprietär, Druckvorstufe
+PRÜFUNGSRELEVANT: Warum Vektoren skalierbar, SVG-Grundsyntax, Rendering-Pipeline
 -->
 
 ---
 
-# Raster vs. Vektor
+<!-- _class: klausur -->
+<!-- _footer: '' -->
 
-| | Rastergrafik | Vektorgrafik |
+# Raster vs. Vektor: Entscheidungskriterien
+
+| Kriterium | Raster | Vektor |
 |---|---|---|
-| **Basis** | Pixelraster | Mathematische Objekte |
+| **Speicherung** | Pixelmatrix | Geometrie + Attribute |
 | **Skalierung** | Qualitätsverlust | Verlustfrei |
-| **Dateigröße** | Abhängig von Auflösung | Abhängig von Komplexität |
-| **Gut für** | Fotos | Logos, Icons, Text |
-| **Formate** | JPEG, PNG, GIF | SVG, PDF, AI |
+| **Komplexität** | O(Breite × Höhe) | O(Anzahl Objekte) |
+| **Bearbeitung** | Pixelbasiert | Objektbasiert |
 
-**Rasterung:** Vektorgrafik → Rastergrafik (für Bildschirm/Druck)
+**Wann Raster?** Fotos, Texturen, komplexe Farbverläufe
+**Wann Vektor?** Logos, Icons, Typografie, technische Zeichnungen
+
+**Konvertierung:**
+- Raster → Vektor: Tracing (verlustbehaftet, approximiert)
+- Vektor → Raster: Rasterisierung (exakt, aber auflösungsgebunden)
 
 <!--
-Bildschirme sind Rastergeräte (Framebuffer)
-Jede Vektorgrafik muss gerastert werden zur Anzeige
-Browser rastert SVG in Echtzeit
-Firmenlogos: Immer als Vektor anlegen!
+KOMPLEXITÄT erklärt:
+- Raster O(w×h): Speicher wächst mit Pixelanzahl
+- Vektor O(n): Speicher wächst mit Objektanzahl
+BEISPIEL: Foto einer Wiese
+- Raster: 1920×1080 = 2 Mio. Pixel, komprimiert ~500 KB
+- Vektor: Jeder Grashalm ein Pfad → Millionen Objekte, unkomprimierbar
+KONVERTIERUNG:
+- Raster→Vektor (Tracing): Kantenerkennung, verlustbehaftet
+  - Tools: Potrace (Open Source), Adobe Live Trace, Inkscape
+  - Funktioniert gut: Logos, Zeichnungen, Text
+  - Funktioniert schlecht: Fotos, Farbverläufe
+- Vektor→Raster (Rasterisierung): Exakt, aber Auflösung fixiert
+  - Jeder Bildschirm macht das (GPU)
+  - Export: "Auflösung" wählen = Ziel-Pixelgröße
+ENTSCHEIDUNGSBAUM:
+- Foto/Screenshot? → Raster
+- Logo/Icon/Diagramm? → Vektor
+- Druckvorlage? → Vektor (Auflösungsunabhängig)
+- Web-Animation? → SVG (Vektor) oder Video (Raster)
+PRÜFUNGSRELEVANT: Wann welches Format, Konvertierungsrichtungen und deren Eigenschaften
 -->
 
 ---
@@ -365,8 +431,6 @@ GIF überlebte kulturell (Meme-Format)
 - HDR-Unterstützung
 - Patent-frei
 
-**Problem:** Browser-Support dauert Jahre
-
 <!-- 
 WebP: Von Google entwickelt, deshalb Skepsis
 AVIF: Alliance for Open Media (Google, Netflix, Amazon, Mozilla...)
@@ -728,8 +792,7 @@ Hardware-Encoder kommen (ab 2020er-GPUs)
 - 480p (1 Mbps)
 - 240p (0,5 Mbps)
 
-Segmente: 2-10 Sekunden
-Player wählt dynamisch
+Segmente: 2-10 Sekunden (Player wählt dynamisch)
 
 <!-- 
 DASH = Dynamic Adaptive Streaming over HTTP
@@ -756,19 +819,11 @@ Bandbreite schwankt → Player reagiert
 
 # Container im Detail
 
-**MP4:**
-- Standard für Web, Mobile
-- H.264, H.265, AV1
-- DRM-fähig
+**MP4:** Standard für Web/Mobile, DRM-fähig (H.264, H.265, AV1)
 
-**MKV (Matroska):**
-- Open Source, extrem flexibel
-- Beliebig viele Audio-/Untertitel-Spuren
-- Fast jeden Codec
+**MKV:** Open Source, beliebig viele Spuren (fast jeder Codec)
 
-**WebM:**
-- Google, Web-optimiert
-- Nur VP9/AV1 + Opus/Vorbis
+**WebM:** Google/Web-optimiert (nur VP9/AV1 + Opus/Vorbis)
 
 <!-- 
 MP4 = MPEG-4 Part 14 (ISO-Standard)
@@ -783,15 +838,15 @@ MKV vs. MP4: Offenheit vs. Kompatibilität
 
 **Aufgabe (40 Min):**
 
-**Tool:** FFmpeg (CLI) oder HandBrake (GUI)
+**Tools:**
+- Desktop: FFmpeg, HandBrake, [MediaInfo](https://mediaarea.net/MediaInfoOnline)
+- Browser: [Squoosh.app](https://squoosh.app) (Bilder), [MediaInfo Online](https://mediaarea.net/MediaInfoOnline)
+- iOS/Android: MediaInfo App, VLC
 
 1. Download: CC-Video (Big Buck Bunny, ~1 Min)
-2. Analysiere: `ffmpeg -i video.mp4` oder MediaInfo
-3. Notiere: Container, Codec, Bitrate, Auflösung
-4. Konvertiere:
-   - H.264, 1080p, 5 Mbps
-   - H.265, 1080p, 2,5 Mbps
-5. Vergleiche: Größen, Encoding-Zeit, Qualität
+2. Analysiere: Container, Codec, Bitrate, Auflösung
+3. Konvertiere: H.264 vs. H.265 (gleiche Qualität)
+4. Vergleiche: Größen, Encoding-Zeit
 
 <!-- 
 Big Buck Bunny: Open-Source-Film (Blender Foundation)

courses/223015b/slides/2026-01-23-termin-3-speichermedien-schnittstellen.md

@@ -58,7 +58,14 @@ Hochschule der Medien Stuttgart
 
 **Wintersemester 2025/26**
 
-[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-223015b.png)
 
 ---
 

courses/223015b/slides/2026-01-30-termin-4-distribution-apis-zukunft.md

@@ -59,7 +59,14 @@ Hochschule der Medien Stuttgart
 
 **Wintersemester 2025/26**
 
-[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-223015b.png)
 
 ---
 

courses/223015b/slides/2026-xx-xx-termin-5-vertiefung-offene-fragen.md

@@ -59,7 +59,14 @@ Hochschule der Medien Stuttgart
 
 **Wintersemester 2025/26**
 
-[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-223015b.png)
 
 ---