add erklaerung slides to 223015b course files

- add erklaerung css class and 6 explanation slides to 01-grundlagen-text-audio.md
- add erklaerung css class and 9 explanation slides to 02-bild-audio-video.md
- add erklaerung css class and 2 explanation slides to 03-speichermedien-schnittstellen.md
- regenerate klausurfolien.md with updated content

slides/223015b/02-bild-audio-video.md

@@ -68,6 +68,33 @@ section.aufgabe {
 section.aufgabe footer {
   display: none;
 }
+section.erklaerung {
+  font-size: 1.1rem;
+  background: linear-gradient(180deg, #f8fbff 0%, #e8f4fc 100%) !important;
+  border-left: 6px solid #1e5f8a;
+}
+section.erklaerung h1 {
+  font-size: 1.6rem;
+  color: #1e5f8a;
+  margin-bottom: 0.5rem;
+}
+section.erklaerung h2 {
+  font-size: 1.3rem;
+  color: #1f2937;
+  margin-top: 0;
+}
+section.erklaerung ul,
+section.erklaerung ol {
+  font-size: 1.0rem;
+  line-height: 1.4;
+}
+section.erklaerung p {
+  font-size: 1.05rem;
+  line-height: 1.5;
+}
+section.erklaerung table {
+  font-size: 0.95rem;
+}
 </style>
 
 <!-- _class: invert -->
@@ -220,6 +247,33 @@ KLAUSURRELEVANT:
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Rastergrafiken: Erklaerung
+
+**Definition:** Bilder als zweidimensionales Raster (Array) von Pixeln mit Farbwerten.
+
+**Speicherberechnung (unkomprimiert):**
+```
+Breite × Hoehe × (Farbtiefe ÷ 8) = Bytes
+```
+
+**Beispiel:** 1920×1080 bei 24 Bit
+- 1920 × 1080 × 3 = 6.220.800 Bytes ≈ **6,2 MB**
+
+| Farbtiefe | Farben | Anwendung |
+|-----------|--------|-----------|
+| 1 Bit | 2 | S/W, Fax |
+| 8 Bit | 256 | Graustufen, GIF |
+| 24 Bit | 16,7 Mio | True Color (RGB) |
+| 32 Bit | 16,7 Mio + Alpha | Transparenz |
+
+**Merkhilfe:** "24 Bit = 3 Bytes = RGB" (8+8+8)
+
+---
+
 # Das Problem der Skalierung
 
 **Vergrößern:**
@@ -274,6 +328,33 @@ KLAUSURRELEVANT:
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Vektorgrafiken: Erklaerung
+
+**Definition:** Bilder als mathematische Beschreibung geometrischer Formen (Pfade, Kurven, Formen).
+
+| Eigenschaft | Raster | Vektor |
+|-------------|--------|--------|
+| Speicherung | Pixel-Array | Geometrie-Anweisungen |
+| Skalierung | Qualitaetsverlust | Verlustfrei |
+| Ideal fuer | Fotos | Logos, Icons |
+| Formate | JPEG, PNG | SVG, PDF, AI |
+
+**SVG-Beispiel:**
+```xml
+<circle cx="50" cy="50" r="40" fill="red"/>
+```
+→ Beschreibt WAS, nicht WIE (deklarativ)
+
+**Konvertierung:**
+- Vektor → Raster: Einfach (Rasterisierung)
+- Raster → Vektor: Schwierig (Tracing)
+
+---
+
 # Raster- und Vektorgrafiken
 
 | | Raster | Vektor |
@@ -338,6 +419,31 @@ KLAUSURRELEVANT:
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Psychovisuelle Wahrnehmung: Erklaerung
+
+**Definition:** Das menschliche Auge hat Schwaechen, die Kompressionsverfahren gezielt ausnutzen.
+
+**Was Menschen schlecht sehen:**
+| Eigenschaft | Wahrnehmung | JPEG-Strategie |
+|-------------|-------------|----------------|
+| Farbe vs. Helligkeit | Helligkeit besser | Farbaufloesung reduzieren |
+| Hohe Frequenzen | Schlechter | Feine Details verwerfen |
+| Kleine Unterschiede | Kaum merkbar | Quantisierung |
+
+**Raeumliche Frequenz:**
+- **Niedrig:** Langsame Aenderung = grosse Flaechen
+- **Hoch:** Schnelle Aenderung = feine Details, Kanten
+
+**Biologische Grundlage:**
+- Mehr Staebchen (Helligkeit) als Zapfen (Farbe) im Auge
+- Aehnlich: Psychoakustik bei MP3 (Maskierungseffekte)
+
+---
+
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
@@ -442,6 +548,32 @@ KLAUSURRELEVANT:
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# JPEG Farbraumkonversion: Erklaerung
+
+**Definition:** Umwandlung von RGB (Rot-Gruen-Blau) in YCbCr (Helligkeit + Farbdifferenzen).
+
+| Kanal | Bedeutung | Behandlung |
+|-------|-----------|------------|
+| **Y** | Luminanz (Helligkeit) | Volle Aufloesung behalten |
+| **Cb** | Blau-Gelb-Differenz | Kann reduziert werden |
+| **Cr** | Rot-Gruen-Differenz | Kann reduziert werden |
+
+**Warum diese Trennung?**
+- Menschliches Auge: empfindlicher fuer Helligkeit als Farbe
+- Y behaelt volle Aufloesung → Schaerfe erhalten
+- Cb/Cr reduziert (Chroma Subsampling) → Daten sparen
+
+**Chroma Subsampling 4:2:0:**
+- 4 Pixel teilen sich einen Farbwert
+- Jeder Pixel behaelt eigene Helligkeit
+- = 50% Datenreduktion bei kaum sichtbarem Verlust
+
+---
+
 # JPEG Schritt 2: Chroma Subsampling
 
 **Notation `J:a:b`** (bezogen auf 4×2 Pixel-Block):
@@ -623,12 +755,35 @@ KLAUSURRELEVANT:
 - Präfix-frei: Kein Code ist Anfang eines anderen
 - Häufigstes Zeichen = kürzester Code
 - Auch in ZIP, PNG, MP3 verwendet
+-->
 
 ---
 
--->
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
+# Huffman-Coding: Erklaerung
 
+**Definition:** Verlustfreie Kompression durch variable Codelaengen basierend auf Zeichenhaeufigkeit.
+
+**Prinzip:**
+- Haeufige Zeichen → kurze Codes
+- Seltene Zeichen → lange Codes
+- Praefix-frei: Kein Code ist Anfang eines anderen
+
+**Beispiel ABRACADABRA:**
+| Zeichen | Haeufigkeit | Code |
+|---------|-------------|------|
+| A | 5× | `0` (1 Bit) |
+| B | 2× | `10` (2 Bit) |
+| R | 2× | `110` (3 Bit) |
+
+**Kompression:** 88 Bit → 23 Bit = **74% gespart**
+
+**Einsatz:** JPEG, ZIP, PNG, MP3, DEFLATE
+
+---
 
 <!-- _class: klausur -->
 <!-- _header: '' -->
@@ -772,6 +927,34 @@ KLAUSURRELEVANT:
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# WebP & AVIF: Erklaerung
+
+**Definition:** Moderne Bildformate mit besserer Kompression als JPEG.
+
+| Format | Jahr | Basis | Vorteil |
+|--------|------|-------|---------|
+| **WebP** | 2010 | VP8 (Google) | 25-35% kleiner als JPEG |
+| **AVIF** | 2019 | AV1 | 50% kleiner als JPEG |
+
+**WebP Features:**
+- Lossy und Lossless
+- Transparenz (Alpha)
+- Animationen (ersetzt GIF)
+
+**AVIF Features:**
+- HDR-Unterstuetzung
+- Patent-frei (Alliance for Open Media)
+- Beste Kompression, aber langsamer
+
+**Browser-Support 2025:** WebP universell, AVIF waechst
+**Realitaet:** JPEG bleibt dominant (Kompatibilitaet)
+
+---
+
 # Formatwahl in der Praxis
 
 | Anwendung | Format |
@@ -890,6 +1073,33 @@ KLAUSURRELEVANT:
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Container vs. Codec: Erklaerung
+
+**Definition:** Container und Codec sind zwei verschiedene Konzepte bei Videodateien.
+
+| Begriff | Bedeutung | Beispiele |
+|---------|-----------|-----------|
+| **Container** | Dateiformat/"Box" | MP4, MKV, WebM, MOV |
+| **Codec** | Kompressionsalgorithmus | H.264, H.265, VP9, AV1 |
+
+**Container enthaelt:**
+- Video-Stream (komprimiert mit Codec)
+- Audio-Stream(s)
+- Untertitel
+- Metadaten (Kapitel, Thumbnail)
+
+**Wichtig:** Gleiche Endung ≠ gleicher Inhalt!
+- film.mp4 kann H.264, H.265 oder AV1 enthalten
+- Tool-Tipp: **MediaInfo** zeigt beides an
+
+**Merkhilfe:** "Container = Schachtel, Codec = Verpackungsart"
+
+---
+
 # Gängige Container
 
 | Container | Verwendung |
@@ -1115,6 +1325,33 @@ KLAUSURRELEVANT:
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# H.264/AVC: Erklaerung
+
+**Definition:** Der dominierende Video-Codec seit 2003, der modernes Video-Streaming erst ermoeglichte.
+
+**Warum so erfolgreich?**
+| Eigenschaft | Bedeutung |
+|-------------|-----------|
+| Kompression | ~100:1 moeglich |
+| Hardware | Decoder in jedem Geraet seit ~2010 |
+| Verbreitung | YouTube, Netflix, Blu-ray |
+
+**Technische Features:**
+- Variable Block-Groessen (16×16 bis 4×4)
+- Deblocking-Filter (reduziert Blocking-Artefakte)
+- I-, P-, B-Frames (temporale Kompression)
+
+**Patent-Situation:**
+- MPEG-LA Pool: 2000+ Patente
+- "Internet Broadcast" fuer Endnutzer kostenlos
+- Hardware-Decoder: ~$0,20/Geraet
+
+---
+
 # Das Patent-Problem
 
 **H.264 ist nicht frei**
@@ -1221,6 +1458,33 @@ KLAUSURRELEVANT:
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# AV1: Erklaerung
+
+**Definition:** Der offene, lizenzfreie Video-Codec der Zukunft, entwickelt von der Alliance for Open Media.
+
+**Alliance for Open Media (AOM):**
+- Gegruendet 2015: Google, Netflix, Amazon, Microsoft, Apple, Mozilla
+- Ziel: Patent-freier Standard nach H.265-Chaos
+
+| Eigenschaft | AV1 |
+|-------------|-----|
+| Effizienz | 30% besser als H.265 |
+| Lizenz | Royalty-free, Open Source |
+| Features | 8K, HDR, hohe Frame-Rates |
+
+**Stand 2025:**
+- YouTube, Netflix nutzen AV1 fuer 4K/8K
+- Hardware-Encoder in aktuellen GPUs
+- Emmy-Gewinner 2024 fuer technische Innovation
+
+**Nachteil:** Encoding sehr langsam (Hardware loest das)
+
+---
+
 <!-- _header: '' -->
 <!-- _footer: 'https://blog.mozilla.org/en/mozilla/av1-video-codec-wins-emmy/' -->
 

slides/223015b/03-speichermedien-schnittstellen.md

@@ -68,6 +68,33 @@ section.aufgabe {
 section.aufgabe footer {
   display: none;
 }
+section.erklaerung {
+  font-size: 1.1rem;
+  background: linear-gradient(180deg, #f8fbff 0%, #e8f4fc 100%) !important;
+  border-left: 6px solid #1e5f8a;
+}
+section.erklaerung h1 {
+  font-size: 1.6rem;
+  color: #1e5f8a;
+  margin-bottom: 0.5rem;
+}
+section.erklaerung h2 {
+  font-size: 1.3rem;
+  color: #1f2937;
+  margin-top: 0;
+}
+section.erklaerung ul,
+section.erklaerung ol {
+  font-size: 1.0rem;
+  line-height: 1.4;
+}
+section.erklaerung p {
+  font-size: 1.05rem;
+  line-height: 1.5;
+}
+section.erklaerung table {
+  font-size: 0.95rem;
+}
 </style>
 
 <!-- _class: invert -->
@@ -235,6 +262,29 @@ Kleine SSD für System + große HDD für Archiv.
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# HDD vs. SSD: Erklaerung
+
+**Kernunterschied:** HDD = mechanisch (Magnetplatten), SSD = elektronisch (Flash-Speicher)
+
+| Eigenschaft | HDD | SSD |
+|-------------|-----|-----|
+| Zugriffszeit | ~10 ms | ~0.1 ms |
+| Seq. Lesen | ~150 MB/s | ~500-7000 MB/s |
+| Preis/TB | guenstig | teurer |
+| Haltbarkeit | mechanisch anfaellig | Schreibzyklen begrenzt |
+
+**Entscheidungsregel:**
+- **SSD:** Haeufiger Zugriff, Geschwindigkeit wichtig (OS, Apps, aktive Projekte)
+- **HDD:** Grosse Datenmengen, selten genutzt (Archiv, Backup, Cold Storage)
+
+**Merkhilfe:** "Schnell = SSD, Speicher = HDD"
+
+---
+
 <!-- _class: lead -->
 
 # Dateisysteme
@@ -484,6 +534,31 @@ Warum 1 Offsite?
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# 3-2-1-Backup-Regel: Erklaerung
+
+**Definition:** Bewährte Strategie zur Datensicherung gegen unterschiedliche Verlustszenarien.
+
+| Element | Bedeutung | Schutz gegen |
+|---------|-----------|--------------|
+| **3** Kopien | Original + 2 Backups | Hardware-Defekt |
+| **2** Medientypen | z.B. SSD + HDD | Medienspezifische Fehler |
+| **1** Offsite | Anderer Ort/Cloud | Lokale Katastrophen |
+
+**Beispiel-Setup:**
+1. Arbeitsdaten auf SSD (Original)
+2. Externes Backup auf HDD (lokal)
+3. Cloud-Backup bei Anbieter (offsite)
+
+**Merkhilfe:** "3 Kopien, 2 Medien, 1 woanders"
+
+**Herkunft:** Peter Krogh, "The DAM Book" (2005) - gilt bis heute als Goldstandard.
+
+---
+
 # Backup-Arten
 
 **Vollständig (Full):**

slides/223015b/klausurfolien.md

@@ -102,6 +102,166 @@ Hochschule der Medien Stuttgart
 <!-- _footer: "" -->
 
 
+# Verlustfrei vs. Verlustbehaftet
+
+| | Verlustfrei (Lossless) | Verlustbehaftet (Lossy) |
+|---|---|---|
+| **Prinzip** | **Redundanz** entfernen | **Irrelevanz** entfernen |
+| **Reversibel** | Ja (Original wiederherstellbar) | Nein (Information unwiederbringlich weg) |
+| **Reduktion** | 30-50% | 80-99% |
+| **Formate** | ZIP, PNG, FLAC, GIF | JPEG, MP3, H.264/H.265 |
+
+**Faustregel:**
+- Medien für Endnutzer → Lossy oft akzeptabel
+- Quellmaterial, Code, Archive → Lossless nötig
+
+<!--
+REDUNDANZ: Wiederholende Muster kompakter darstellen (z.B. "AAAA" → "4×A")
+IRRELEVANZ: Für Menschen nicht wahrnehmbar (Psychoakustik, Psychovisuell)
+
+KLAUSURRELEVANT:
+- Verlustfrei = Original 1:1 wiederherstellbar
+- Verlustbehaftet = Information geht verloren, aber kaum wahrnehmbar
+- Redundanz vs. Irrelevanz ist der Kernunterschied!
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Dateneinheiten
+
+| Einheit | Bytes | Potenz | Beispiel |
+|---------|------:|:------:|----------|
+| **Byte** | 1 | 10⁰ | Farbwerte eines Pixels |
+| **Kilobyte (KB)** | 1.000 | 10³ | Kleiner Programmcode |
+| **Megabyte (MB)** | 1 Million | 10⁶ | Textdokument |
+| **Gigabyte (GB)** | 1 Milliarde | 10⁹ | Kinofilm in FullHD |
+| **Terabyte (TB)** | 1 Billion | 10¹² | ~12h Video in 4K |
+| **Petabyte (PB)** | 1 Billiarde | 10¹⁵ | Netflix-Gesamtarchiv |
+| **Exabyte (EB)** | 1 Trillion | 10¹⁸ | Alle E-Mails weltweit/Tag |
+| **Zettabyte (ZB)** | 1 Trilliarde | 10²¹ | Internet-Traffic 2016 |
+
+<!--
+SI-Präfixe (Dezimal): 1 KB = 1.000 Bytes
+Binär (IEC): 1 KiB = 1.024 Bytes (Kibibyte)
+Windows zeigt oft binär, sagt aber "KB" → Verwirrung!
+1 TB Festplatte = ~931 GiB nutzbar
+
+Eselsbrücke: "Kilo Mega Giga Tera Peta Exa Zetta Yotta"
+→ "Komm Mit Großem Tee, Peter Exte Zettelt Yachten"
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Der digitale Wendepunkt
+
+| Jahr | Analog | Digital | Digital-Anteil |
+|------|--------|---------|----------------|
+| **1986** | 2,6 EB | 0,02 EB | **1%** |
+| **2002** | — | — | **50%** (Wendepunkt) |
+| **2007** | 18 EB | 277 EB | **94%** |
+
+**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)
+
+<!--
+PRÜFUNGSRELEVANT:
+ - Wendepunkt 2002
+ - Speichereinheiten (KB→MB→GB→TB→PB→EB→ZB)
+ - Magnetband als Archivmedium
+
+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
+
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Analoge Medien
+### Distribution: physisch (Kauf, Verleih, Kopie)
+
+- **Text**
+    - Bücher, Zeitungen, Zeitschriften, Lochkarten
+- **Bild**
+    - Fotografie (Negativ, Dia, Polaroid), Mikrofilm
+- **Audio:**
+    - Schallplatte (Vinyl, Schellack), Tonband, Musikkassette
+- **Video:**
+    - Film (35mm, Super 8), VHS, Betamax
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Digitale Medien
+### Distribution: Datenträger (CD, USB), Download, Streaming, P2P
+
+- **Text**
+    - E-Book (PDF, EPUB), Dokumente (TXT, DOCX)
+- **Bild**
+    - Digitalfoto (JPEG, PNG, RAW, WebP, GIF)
+- **Audio**
+    - Audiodatei (MP3, FLAC, WAV, AAC, OGG)
+- **Video**
+    - Videodatei (MP4, MKV, AVI, WebM)
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Digitale Speichermedien
+
+- **Optische Speicher**
+    - CD, DVD, Blu-ray
+- **Magnetische Speicher**
+    - Festplatte (HDD), Magnetband (LTO)
+- **Flash-Speicher**
+    - SSD, USB-Stick, SD-Karte
+- **Cloud-Speicher**
+    - Dropbox, Google Drive, iCloud, AWS S3
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
 # Rastergrafiken
 
 **Aufbau:** Liste von Pixeln mit Farbwerten (2D-Array)
@@ -243,6 +403,7 @@ KLAUSURRELEVANT:
 - Präfix-frei: Kein Code ist Anfang eines anderen
 - Häufigstes Zeichen = kürzester Code
 - Auch in ZIP, PNG, MP3 verwendet
+-->
 
 
 ---