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/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)