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
This commit is contained in:
@@ -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/' -->
|
||||
|
||||
|
||||
Reference in New Issue
Block a user