9.9 KiB
9.9 KiB
Kapitel 3 — Inhalte: Bild, Audio, Video
Bedient Klausur-Blöcke: 4 (Bilder) + 5 (Audio) + 6 (Video) Slide-Budget: ~49 (das umfangreichste Kapitel, ggf. 2 Vorlesungstermine)
Bogen
Eine längere Sitzung (oder zwei), eine Linie: „Drei Modalitäten — Bild, Audio, Video — drei Pipelines, drei Format-Politiken. Was passiert technisch und was politisch, und wie wählt man im Alltag?"
- Wir öffnen damit, dass alle drei Modalitäten Lossy-Kompression nutzen — und dass diese Lossy-Kompression nur funktioniert weil sie Wahrnehmungs-Lücken ausnutzt. Brücke zu Kapitel 2 (Psychoakustik/Psychovisualität).
- Bilder zuerst — am stärksten visualisierbar, JPEG-Pipeline ist die didaktische Königsdisziplin. Alle 6 Schritte durchspielen.
- Audio als zweite Modalität — MP3-Trick konkret, Spotify-Stufen am Handy, Format-Wahl-Matrix.
- Video als „Bild + Zeit". Container/Codec-Trennung als entscheidendes Konzept. I/P/B-Frames. Patent-Politik (AV1 vs HEVC) als Industrie-Geschichte.
Advance Organizer
Wahrnehmung als Hebel (aus Kap 2)
│
┌───────────┼───────────┐
▼ ▼ ▼
BILD AUDIO VIDEO
│ │ │
Raster/Vektor Sampling Container
JPEG-Pipeline MP3-Trick + Codec
Format-Wahl Format-Wahl I/P/B
│ │ │
└───────────┴───────────┘
│
Patent · Adoption · Politik
(JPEG XL · WebP · AV1)
→ neue Demo-Datei: kap03-modalitäten-bogen.html
Folien-Skelett
Eröffnung (3 Slides)
| # | Typ | Titel/Kern | Lernziel | Berührungspunkt | Visualisierung |
|---|---|---|---|---|---|
| 1 | Cover | Kapitel 3 — Inhalte: Bild, Audio, Video | — | — | reuse |
| 2 | Lead | Drei Modalitäten, ein Prinzip | Hook | Instagram · Spotify · YouTube | NEU collage |
| 3 | Advance Organizer | Wahrnehmung als gemeinsamer Hebel | Roter Faden | — | NEU kap03-bogen |
Sub-Sektion A — Bilder (18 Slides, bedient Block 4)
| # | Typ | Titel/Kern | Lernziel | Berührungspunkt | Visualisierung |
|---|---|---|---|---|---|
| 4 | Lead | Bilder | — | — | — |
| 5 | Inhalt | Pixel — ein Bild als Zahlen-Gitter | L4.1 | Smartphone-Foto-Auflösung | NEU pixel-gitter |
| 6 | Inhalt | Rastergrafik: viele Pixel | L4.1 | Smartphone-Foto | NEU raster-zoom |
| 7 | Inhalt | Vektorgrafik: mathematische Anweisungen | L4.1 | Logo · Icon | NEU vektor-skalierung |
| 8 | Klausur | Raster vs Vektor (Tabelle + Skalierung) | L4.1 | — | reuse vergleichs-tabelle |
| 9 | Inhalt | Wann welches? | L4.1, L4.4 | Logo (V), Foto (R), Icon (V) | — |
| 10 | Lead | JPEG: das Foto-Workhorse seit 1992 | — | — | — |
| 11 | Inhalt | JPEG-Pipeline-Übersicht (6 Schritte) | L4.2 | — | NEU pipeline-übersicht |
| 12 | Inhalt | Schritt 1: RGB → Y'CbCr (Farbraumkonversion) | L4.2 | — | reuse yuv-zerlegung |
| 13 | Inhalt | Schritt 2: Chroma-Subsampling 4:2:0 | L4.2 | — | NEU chroma-subsampling-grafik |
| 14 | Inhalt | Schritt 3: 8×8 Blöcke | L4.2 | — | NEU block-aufteilung |
| 15 | Inhalt | Schritt 4: DCT (Diskrete Kosinus-Transformation) | L4.2, L4.3 | — | NEU dct-frequenzraum |
| 16 | Inhalt | Schritt 5: Quantisierung | L4.2, L4.3 | — | NEU quantisierungstabelle |
| 17 | Inhalt | Schritt 6: Huffman-Coding | L4.2 | — | NEU huffman-zip |
| 18 | Klausur | Die 6 Schritte als Memo-Liste | L4.2 | — | NEU |
| 19 | Demo | JPEG-Artefakte sichtbar machen | L4.2, L4.3 | Squoosh im Browser | reuse jpeg-artifacts |
| 20 | Lead | Andere Bildformate | — | — | — |
| 21 | Inhalt | PNG · GIF · WebP · AVIF · SVG | L4.4 | — | reuse format-grid |
| 22 | Klausur | Wann-welches-Format-Matrix | L4.4 | Logo · Foto · Screenshot · Icon · Animation | NEU entscheidungsmatrix |
| 23 | Inhalt | Patent-Politik: warum WebP > JPEG XL | L4.5 | Chrome-Adoption · Apple | NEU patent-zeitleiste |
Sub-Sektion B — Audio (8 Slides, bedient Block 5)
| # | Typ | Titel/Kern | Lernziel | Berührungspunkt | Visualisierung |
|---|---|---|---|---|---|
| 24 | Lead | Audio | — | — | — |
| 25 | Inhalt | Sampling + Bittiefe Recap | L5.1 | aus Kap 1 | — |
| 26 | Inhalt | MP3-Trick: Maskierung | L5.1 | — | NEU maskierung-grafik |
| 27 | Inhalt | MP3-Trick: Hörschwelle | L5.1 | — | NEU hörschwelle-grafik |
| 28 | Inhalt | Bitrate-Stufen 128/192/320 kbit/s | L5.2 | Spotify-Setting | NEU bitrate-vergleich |
| 29 | Inhalt | Audio-Format-Landschaft | L5.3 | WAV · MP3 · FLAC · AAC · OGG · Opus | NEU format-tabelle |
| 30 | Klausur | Format-Wahl: Stream · Master · Sprachnachricht · Podcast | L5.3 | — | NEU entscheidungsmatrix-audio |
| 31 | Demo | Spotify-Stream-Bitrate live anhören | L5.2 | Spotify-App | — |
Sub-Sektion C — Video (14 Slides, bedient Block 6)
| # | Typ | Titel/Kern | Lernziel | Berührungspunkt | Visualisierung |
|---|---|---|---|---|---|
| 32 | Lead | Video — Bild plus Zeit | — | — | — |
| 33 | Inhalt | Pixel × Pixel × Hz = Datenflut | L6.4 | 4K@60fps roh | NEU datenflut-rechnung |
| 34 | Klausur | Container ≠ Codec | L6.1 | .mp4 öffnen | NEU container-codec-trennung |
| 35 | Inhalt | Was ist ein Container | L6.1 | MP4 · MKV · WebM | NEU container-anatomie |
| 36 | Inhalt | Was ist ein Codec | L6.1 | H.264 · H.265 · VP9 · AV1 | — |
| 37 | Inhalt | Inter-Frame-Kompression — die zentrale Idee | L6.2 | — | NEU inter-frame-diagram |
| 38 | Klausur | I- · P- · B-Frames | L6.2 | — | reuse IPB-frame-diagram |
| 39 | Inhalt | Motion Compensation | L6.2 | — | NEU motion-compensation |
| 40 | Lead | Die Codec-Landschaft | — | — | — |
| 41 | Inhalt | H.264 / AVC — der Workhorse | L6.3 | YouTube · Zoom | reuse h264-folie |
| 42 | Inhalt | H.265 / HEVC — Patent-Chaos | L6.3 | Apple-Adoption | reuse h265-folie |
| 43 | Inhalt | VP9 + AV1 — Antwort von Google + Alliance | L6.3 | YouTube-Streaming | reuse av1-folie |
| 44 | Klausur | Patent vs Open: warum AV1 | L6.3 | Netflix · YouTube · Twitch | NEU patent-vergleich |
| 45 | Inhalt | 4K-Stream-Bitrate vs Heim-Bandbreite | L6.4 | 25 Mbit/s eigener Anschluss | NEU bandbreite-vergleich |
Selbstlernen + Zusammenfassung (4 Slides)
| # | Typ | Titel/Kern | Lernziel | Berührungspunkt | Visualisierung |
|---|---|---|---|---|---|
| 46 | Selbstlernen | Bild in Squoosh.app komprimieren | L4.2, L4.4 | Squoosh im Browser | — |
| 47 | Selbstlernen | MP3 vs FLAC unterscheidbar? | L5.1, L5.2 | Spotify HiFi-Test | — |
| 48 | Selbstlernen | mediainfo auf eine Videodatei | L6.1, L6.2 | mediainfo CLI | — |
| 49 | Zusammenfassung | Drei Modalitäten, gleiches Prinzip | alle | — | NEU summary |
Streichungs-Liste
Aus dem aktuellen 02-bild-audio-video.md (~70 Slides):
- Diverse Vertiefungs-Slides die Hauptfolien wörtlich wiederholen — raus (Mayer Redundancy)
- DCT-Math-Tiefe in einer eigenen Folie — eindampfen auf Schritt 4 (Slide 15)
- Doppelte „Container vs Codec"-Folien — eine reicht (Slide 34)
- AV1-Emmy-Award als eigene Folie — als Speaker-Note in Slide 43
Aus dem aktuellen 01-grundlagen-text-audio.md werden Bilder/Audio/Video-Folien hierher verschoben:
- MP3-Psychoakustik-Slides
- Sampling-Recap nur als Vorgriff (Recap statt Vollerklärung — die kam in Kap 1)
Visualisierungen — neu zu bauen
| Demo-Datei | Was zeigt sie |
|---|---|
kap03-modalitäten-bogen.html |
Advance Organizer drei Modalitäten |
pixel-gitter.html |
Bild als Zahlen-Gitter |
raster-zoom.html |
Rasterbild beim Skalieren pixelig |
vektor-skalierung.html |
Vektorbild bleibt scharf |
pipeline-übersicht.html |
JPEG 6 Schritte als Pipeline |
chroma-subsampling-grafik.html |
4:4:4 vs 4:2:0 visuell |
dct-frequenzraum.html |
Bildblock im Frequenzraum |
quantisierungstabelle.html |
Tabelle + Effekt |
huffman-zip.html |
Huffman als finale Kompression |
entscheidungsmatrix-bildformate.html |
Wann-welches-Bildformat |
patent-zeitleiste.html |
JPEG XL vs WebP Adoption |
maskierung-grafik.html |
Lauter-Ton-überdeckt-leisen |
hörschwelle-grafik.html |
Hörschwelle im Frequenzraum |
bitrate-vergleich.html |
128/192/320 kbit/s mit Größenvergleich |
format-tabelle-audio.html |
WAV/MP3/FLAC/AAC/OGG/Opus |
entscheidungsmatrix-audio.html |
Wann-welches-Audio-Format |
datenflut-rechnung.html |
4K@60fps roh: Datenrate |
container-codec-trennung.html |
MP4-Hülle, drinnen verschiedene Codecs |
container-anatomie.html |
MP4-Container-Aufbau |
inter-frame-diagram.html |
Inter-Frame als Konzept |
motion-compensation.html |
Block aus vorigem Frame verschieben |
patent-vergleich.html |
H.264/H.265/AV1 Patent-Politik |
bandbreite-vergleich.html |
4K-Bitrate vs Internet-Bandbreite |
summary-kap03.html |
Zusammenfassung |
Reuse: yuv-zerlegung, jpeg-artifacts, format-grid, IPB-frame-diagram, h264/h265/av1-Slides, vergleichs-tabelle (alle Bestand in slides/223015b/assets/).
Hinweis Zeitlich
50 Slides für 90 Min ist eng (~1,8 min pro Slide inkl Erklärung). Optionen:
- Variante A: Als zwei Termine planen (Termin 1: Bilder, Termin 2: Audio+Video). Sauberster pädagogischer Schnitt.
- Variante B: In einem Termin durchziehen, Selbstlernens als Hausaufgabe.
- Variante C: Audio kürzen (Sub-Sektion B als reduzierte Vertiefungs-Stunde mit Verweis auf Kap 1).
Entscheidung Dozent.
Validierungs-Status
- Bogen formuliert
- Advance Organizer skizziert
- Folien-Skelett (3 Sub-Sektionen)
- Selbstlernen in jeder Sub-Sektion
- Streichungs-Liste
- Visualisierungs-TODO
- Zeit-Hinweis für Dozent
- Dozent-Review und Lock