diff --git a/courses/223015b/slides/2025-12-19-termin-0-intro.md b/courses/223015b/slides/2025-12-19-termin-0-intro.md index 02d72ac..e24af59 100644 --- a/courses/223015b/slides/2025-12-19-termin-0-intro.md +++ b/courses/223015b/slides/2025-12-19-termin-0-intro.md @@ -3,7 +3,7 @@ marp: true theme: gaia paginate: true backgroundColor: #fff -header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege" +header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)" footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26" title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege --- @@ -52,9 +52,9 @@ section.klausur { background: repeating-linear-gradient( 135deg, #e3f2fd, - #e3f2fd 20px, - #fff 20px, - #fff 40px + #e3f2fd 40px, + #fff 40px, + #fff 80px ) !important; } section.klausur footer { diff --git a/courses/223015b/slides/2025-12-19-termin-1-grundlagen-text-audio.md b/courses/223015b/slides/2025-12-19-termin-1-grundlagen-text-audio.md index 68bcd37..f3a3f04 100644 --- a/courses/223015b/slides/2025-12-19-termin-1-grundlagen-text-audio.md +++ b/courses/223015b/slides/2025-12-19-termin-1-grundlagen-text-audio.md @@ -3,7 +3,7 @@ marp: true theme: gaia paginate: true backgroundColor: #fff -header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege" +header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)" footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26" title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege --- @@ -52,9 +52,9 @@ section.klausur { background: repeating-linear-gradient( 135deg, #e3f2fd, - #e3f2fd 20px, - #fff 20px, - #fff 40px + #e3f2fd 40px, + #fff 40px, + #fff 80px ) !important; } section.klausur footer { @@ -92,7 +92,7 @@ Hochschule der Medien Stuttgart -# Termin 1 – 19.12.2025 +# Teil 1: Einführung ## Grundlagen, Text & Audio --- @@ -767,12 +767,12 @@ Windows vertraut der Endung, aber "file" (Linux) liest Magic Number ![bg contain right:22%](./assets/qr/hexed-it.png) -# Hands-On: WTF Files +# Hands-On: HEX Files **Aufgabe (30 Min):** 1. Drei Dateien ohne Dateiendung: - `wtf1` `wtf2` `wtf3` + `hex1` `hex2` `hex3` 3. Lies erste 16 Bytes aus und identifiziere Dateiformat (Magic Number) 5. *Optional: Datei umbenennen und korrekte Dateiendung anhängen (bspw. `.jpg`)* @@ -812,11 +812,105 @@ Visueller Kontrast: Analog vs. Digital --- -# Warum digital? Das Speicherproblem + -**Analog → Digital:** Kopieren ohne Qualitätsverlust, aber... +# 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 + +--- + +# Analoge Medien: Vor- und Nachteile + +| Vorteile | Nachteile | +|----------|-----------| +| Kein Abspielgerät nötig (Buch, Foto) | Qualitätsverlust bei jeder Kopie | +| Haptisches Erlebnis | Physischer Verschleiß | +| Unabhängig von Strom/Internet | Begrenzte Haltbarkeit | +| Keine Formatkonvertierung | Platzbedarf bei Lagerung | +| Eindeutiges Original | Aufwendige Durchsuchbarkeit | + + + +--- + +# Von Analog zu Digital: Die Kopier-Revolution + +**Das Problem analoger Kopien:** +Kassette → Kassette → Kassette = immer schlechter + +**Was Digital anders macht:** +- **Identische Kopien** – kein Qualitätsverlust, nie +- **Einfache Massenproduktion** – Copy & Paste +- **Perfekte Archivierung** – Bits verändern sich nicht + +**Daher: "Raubkopien"** +Der Begriff entstand, weil digitale Kopien *tatsächlich identisch* mit dem Original waren – nicht wie bei Kassetten eine schlechtere Version. + +Quelle: [c64-wiki.de/wiki/Raubkopie](https://www.c64-wiki.de/wiki/Raubkopie) + + + +--- + + + +# 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) + +--- + + + +# Digitale Speichermedien + +* **Optische Speicher** + * CD, DVD, Blue-Ray +* **Magnetische Speicher** + * Festplatte (HDD), Magnetband (LTO) +* **Flash-Speicher** + * SSD, USB-Stick, SD-Karte +* **Cloud-Speicher** + * Dropbox, Google Drive, iCloud, AWS S3 + +--- + +# Das Speicherproblem der Digitalisierung **CD-Qualität (1982):** +Ziel: Analoge Schallwelle möglichst originalgetreu rekonstruieren 44.100 Hz × 16 Bit × 2 Kanäle = **10,6 MB/Minute** | Inhalt | Größe | Problem (1990er) | @@ -827,10 +921,24 @@ Visueller Kontrast: Analog vs. Digital **→ Digital ist super, aber zu groß für Speicher & Internet** + +--- + +# Abtastrate (Sample Rate) × Bittiefe (Bit Depth) + +**Zwei Dimensionen der Digitalisierung:** + +| Dimension | Was bedeutet es? | CD-Qualität | +|-----------|------------------|-------------| +| **Abtastrate** (Sample Rate) | Messungen pro Sekunde (horizontal) | 44.100 Hz | +| **Bittiefe** (Bit Depth) | Genauigkeit pro Messung (vertikal) | 16 Bit | + +**44.100 Hz × 16 Bit** × 2 Kanäle + + + +--- + # Kompression @@ -904,138 +1053,62 @@ DAS SPEKTROGRAMM zeigt es: --- - - +# Wo liegt der Hebel für Kompression? -![bg fit](./assets/compression-types.png) +**CD-Qualität:** 44.100 Hz × 16 Bit × 2 Kanäle = **10,6 MB/Min** +**MP3 (128 kbps):** = **~1 MB/Min** (Faktor 10!) + +**Container-Parameter (das Raster):** + +| Parameter | Reduzieren → | Konsequenz | +|-----------|--------------|------------| +| Abtastrate | Weniger Messpunkte/Sek | Max. Frequenz sinkt | +| Bittiefe | Weniger Lautstärkestufen | Mehr Rauschen | +| Kanäle | Mono statt Stereo | Kein Raumklang | --- -# Sample Rate vs. Bit Depth +# Psychoakustik: Der MP3-Trick -**Zwei Dimensionen der Digitalisierung:** +**Inhalt (was durchs Raster geht):** -| Dimension | Was bedeutet es? | CD-Qualität | -|-----------|------------------|-------------| -| **Sample Rate** | Messungen pro Sekunde (horizontal) | 44.100 Hz | -| **Bit Depth** | Genauigkeit pro Messung (vertikal) | 16 Bit | +| Methode | Reduzieren → | Konsequenz | +|---------|--------------|------------| +| Psychoakustik | Unhörbare Frequenzen | Kaum wahrnehmbar | -**16 Bit = 2¹⁶ = 65.536 Lautstärkestufen** -(von absoluter Stille bis maximaler Lautstärke) +→ **MP3 nutzt hauptsächlich Psychoakustik** +→ Container bleibt ähnlich, Inhalt wird "ausgedünnt" - ---- - - - -# Verlustfrei vs. Verlustbehaftet - -| | Verlustfrei (Lossless) | Verlustbehaftet (Lossy) | -|---|---|---| -| **Prinzip** | **Redundanz** entfernen | **Irrelevanz** entfernen | -| **Reversibel** | Ja (Original wiederherstellbar) | Nein (Daten unwiederbringlich weg) | -| **Reduktion** | 30-50% | 80-99% | -| **Formate** | ZIP, PNG, FLAC, GIF | JPEG, MP3, H.264/H.265 | - -**Faustregel:** - * **Medien** → (tendenziell) verlustbehaftet - * **Vektorgrafiken**, Textdokumente, Archive, Programmcode → verlustfrei - - - ---- - -# Verlustfrei: Lauflängenkodierung (RLE) - -**Original:** `AAAAABBBCCCCCCCC` (16 Zeichen) - -**Komprimiert:** `5A3B8C` (6 Zeichen) → **62% kleiner** - -**Prinzip:** Wiederholungen zählen statt wiederholen - - - ---- - -# Verlustbehaftet: Der Trick - -**Kernidee:** Entferne, was Menschen nicht wahrnehmen - -| Format | Nutzt Schwächen von... | Fachbegriff | -|--------|------------------------|-------------| -| **JPEG** | Auge (Farbe < Helligkeit) | Psychovisuell | -| **MP3** | Ohr (Maskierungseffekte) | Psychoakustik | - - - ---- - -![bg right:40%](./assets/karlheinz-brandenburg.jpg) - -# Karlheinz Brandenburg - -**"Vater der MP3"** - -* Diplom-Ingenieur, Universität Erlangen-Nürnberg -* Fraunhofer IIS (Institut für Integrierte Schaltungen) -* Forschung ab 1982, Patent 1988 - - --- @@ -1062,6 +1135,24 @@ Patent lief 2017 aus --- +![bg right:40%](./assets/karlheinz-brandenburg.jpg) + +# Karlheinz Brandenburg + +**"Vater der MP3"** + +- Diplom-Ingenieur, Universität Erlangen-Nürnberg +- Fraunhofer IIS (Institut für Integrierte Schaltungen) +- Forschung ab 1982, Patent 1988 + + + +--- + ![bg right:50%](./assets/suzanne-vega.jpg) # Suzanne Vega @@ -1080,6 +1171,7 @@ A cappella = einfacher zu analysieren (nur Stimme) Hohe Frequenzen = Herausforderung für Kompression Brandenburg hörte den Song über 10.000 Mal --> + + + +![bg fit](./assets/compression-types.png) + + + +--- + + + +# Verlustfrei vs. Verlustbehaftet + +| | Verlustfrei (Lossless) | Verlustbehaftet (Lossy) | +|---|---|---| +| **Prinzip** | **Redundanz** entfernen | **Irrelevanz** entfernen | +| **Reversibel** | Ja (Original wiederherstellbar) | Nein (Daten unwiederbringlich weg) | +| **Reduktion** | 30-50% | 80-99% | +| **Formate** | ZIP, PNG, FLAC, GIF | JPEG, MP3, H.264/H.265 | + +**Faustregel:** + * **Medien**, Bilder, Videos, Audio → (tendenziell) verlustbehaftet + * **Vektorgrafiken**, Textdokumente, Archive, Programmcode → verlustfrei + + + +--- + +# Beispiel: Verlustbehaftet (lossy) + +**Kernidee:** Entferne, was Menschen nicht wahrnehmen + +| Format | Nutzt Schwächen von... | Fachbegriff | +|--------|------------------------|-------------| +| **JPEG** | Auge (Farbe < Helligkeit) | Psychovisuell | +| **MP3** | Ohr (Maskierungseffekte) | Psychoakustik | + + + +--- + + +# Beispiel: Verlustfrei (lossless) +### Lauflängenkodierung (RLE) + +**Original:** `AAAAABBBCCCCCCCC` (16 Zeichen) + +**Komprimiert:** `5A3B8C` (6 Zeichen) → **62% kleiner** + +**Prinzip:** Wiederholungen zählen statt wiederholen + + + +--- + @@ -1233,10 +1407,10 @@ Aber: LimeWire, Kazaa, BitTorrent folgten **Musikindustrie:** - CDs kosten $15-20 -- MP3s gratis (illegal, aber egal) +- MP3s gratis (illegal, aber yolo) - Einzelne Songs statt Alben -**2001:** Napster verklagt, geschlossen +**2001:** Napster wird verklagt und schließt **Aber:** Pandora's Box offen → LimeWire, Kazaa, BitTorrent, später Spotify @@ -1259,10 +1433,10 @@ Spotify (2008): Streaming-Ära beginnt ✓ Musik wurde portabel (Walkman → iPod) ✓ Alben wurden irrelevant (Playlists) ✓ Musikkonsum explodierte (kostenlos/billig) -✓ Künstler verloren Kontrolle +✓ KünstlerInnen verloren Kontrolle **Aber auch:** -❌ Künstler verdienen weniger pro Stream +❌ KünstlerInnen verdienen weniger pro Stream ❌ Audio-Qualität sank (Loudness War) ❌ Physische Medien starben @@ -1278,6 +1452,8 @@ Vinyl-Revival: 2020er Gegenbewegung --- + + # Hands-On: Audio-Spektrogram **Aufgabe (30 Min):** diff --git a/courses/223015b/slides/2026-01-09-termin-2-bild-audio-video.md b/courses/223015b/slides/2026-01-09-termin-2-bild-audio-video.md index 0c39c76..649eb28 100644 --- a/courses/223015b/slides/2026-01-09-termin-2-bild-audio-video.md +++ b/courses/223015b/slides/2026-01-09-termin-2-bild-audio-video.md @@ -3,7 +3,7 @@ marp: true theme: gaia paginate: true backgroundColor: #fff -header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege" +header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)" footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26" title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege --- @@ -52,9 +52,9 @@ section.klausur { background: repeating-linear-gradient( 135deg, #e3f2fd, - #e3f2fd 20px, - #fff 20px, - #fff 40px + #e3f2fd 40px, + #fff 40px, + #fff 80px ) !important; } section.klausur footer { @@ -96,7 +96,7 @@ Hochschule der Medien Stuttgart -# Termin 2 – 09.01.2026 +# Teil 1: Dateiformate ## Bild-, Audio- & Videoformate --- @@ -707,9 +707,10 @@ Quelle: https://www.canon.com.hk/cpx/en/technical/va_EOS_Movie_Compression_Optio --- -# H.264: Der König + -**H.264 / AVC (2003)** +# H.264 / AVC Codec (2003) +### Der bisherige Platzhirsch **Warum dominant?** ✓ Exzellente Kompression (100:1 möglich) @@ -755,9 +756,8 @@ Patent-Pool: Firmen teilen Patente, gemeinsame Lizenzierung --- -# H.265 / HEVC +# H.265 / HEVC Codec (2013) -**H.265 (2013):** 50% bessere Kompression als H.264 **ABER:** Patent-Desaster @@ -827,6 +827,8 @@ Alliance for Open Media --- + + # AV1: Die Open-Source-Revolution **AV1 (2018):** @@ -838,6 +840,7 @@ Alliance for Open Media: Google, Netflix, Amazon, Microsoft, Apple, Mozilla... ✓ 30% besser als H.265 ✓ Royalty-free, Open Source ✓ 8K, HDR, hohe Frame-Rates +✓ Erster Codec, der einen Grammy gewonnen hat (2025) **Stand 2025:** YouTube, Netflix nutzen AV1 für 4K/8K @@ -848,6 +851,8 @@ Alle Big-Tech-Player vereint (historisch!) "Fuck you" an Patent-Mafia Problem: Encoding SEHR langsam (10-100x vs. H.264) Hardware-Encoder kommen (ab 2020er-GPUs) + +Source: https://blog.mozilla.org/en/mozilla/av1-video-codec-wins-emmy/ --> --- diff --git a/courses/223015b/slides/2026-01-23-termin-3-speichermedien-schnittstellen.md b/courses/223015b/slides/2026-01-23-termin-3-speichermedien-schnittstellen.md index 821bc51..676d028 100644 --- a/courses/223015b/slides/2026-01-23-termin-3-speichermedien-schnittstellen.md +++ b/courses/223015b/slides/2026-01-23-termin-3-speichermedien-schnittstellen.md @@ -3,7 +3,7 @@ marp: true theme: gaia paginate: true backgroundColor: #fff -header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege" +header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)" footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26" title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege --- @@ -52,9 +52,9 @@ section.klausur { background: repeating-linear-gradient( 135deg, #e3f2fd, - #e3f2fd 20px, - #fff 20px, - #fff 40px + #e3f2fd 40px, + #fff 40px, + #fff 80px ) !important; } section.klausur footer { diff --git a/courses/223015b/slides/2026-01-30-termin-4-distribution-apis-zukunft.md b/courses/223015b/slides/2026-01-30-termin-4-distribution-apis-zukunft.md index 7ba5038..e9cf8c3 100644 --- a/courses/223015b/slides/2026-01-30-termin-4-distribution-apis-zukunft.md +++ b/courses/223015b/slides/2026-01-30-termin-4-distribution-apis-zukunft.md @@ -3,7 +3,7 @@ marp: true theme: gaia paginate: true backgroundColor: #fff -header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege" +header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)" footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26" title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege --- @@ -52,9 +52,9 @@ section.klausur { background: repeating-linear-gradient( 135deg, #e3f2fd, - #e3f2fd 20px, - #fff 20px, - #fff 40px + #e3f2fd 40px, + #fff 40px, + #fff 80px ) !important; } section.klausur footer { diff --git a/courses/223015b/slides/2026-xx-xx-termin-5-vertiefung-offene-fragen.md b/courses/223015b/slides/2026-xx-xx-termin-5-vertiefung-offene-fragen.md index 0d386c0..15883a0 100644 --- a/courses/223015b/slides/2026-xx-xx-termin-5-vertiefung-offene-fragen.md +++ b/courses/223015b/slides/2026-xx-xx-termin-5-vertiefung-offene-fragen.md @@ -3,7 +3,7 @@ marp: true theme: gaia paginate: true backgroundColor: #fff -header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege" +header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)" footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26" title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege --- @@ -52,9 +52,9 @@ section.klausur { background: repeating-linear-gradient( 135deg, #e3f2fd, - #e3f2fd 20px, - #fff 20px, - #fff 40px + #e3f2fd 40px, + #fff 40px, + #fff 80px ) !important; } section.klausur footer { diff --git a/courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md b/courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md index 2ce9f69..8e36754 100644 --- a/courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md +++ b/courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md @@ -3,7 +3,7 @@ marp: true theme: gaia paginate: true backgroundColor: #fff -header: "Grundlagen IT- und Internettechnik" +header: "Grundlagen IT- und Internettechnik (223015c)" footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26" title: "Termin 1: Geschichte, Grundlagen & HTML" --- @@ -52,9 +52,9 @@ section.klausur { background: repeating-linear-gradient( 135deg, #fce4ec, - #fce4ec 20px, - #fff 20px, - #fff 40px + #fce4ec 40px, + #fff 40px, + #fff 80px ) !important; } section.klausur footer { diff --git a/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md b/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md index 957ccb1..0851cd4 100644 --- a/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md +++ b/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md @@ -3,7 +3,7 @@ marp: true theme: gaia paginate: true backgroundColor: #fff -header: "Grundlagen IT- und Internettechnik" +header: "Grundlagen IT- und Internettechnik (223015c)" footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26" title: "Termin 2: Netzwerke, Protokolle & CSS" --- @@ -52,9 +52,9 @@ section.klausur { background: repeating-linear-gradient( 135deg, #fce4ec, - #fce4ec 20px, - #fff 20px, - #fff 40px + #fce4ec 40px, + #fff 40px, + #fff 80px ) !important; } section.klausur footer { diff --git a/courses/223015c/slides/2026-01-24-termin-3-interaktivitaet-javascript.md b/courses/223015c/slides/2026-01-24-termin-3-interaktivitaet-javascript.md index cc145cc..3b1912e 100644 --- a/courses/223015c/slides/2026-01-24-termin-3-interaktivitaet-javascript.md +++ b/courses/223015c/slides/2026-01-24-termin-3-interaktivitaet-javascript.md @@ -3,7 +3,7 @@ marp: true theme: gaia paginate: true backgroundColor: #fff -header: "Grundlagen IT- und Internettechnik" +header: "Grundlagen IT- und Internettechnik (223015c)" footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26" title: "Termin 3: Interaktivität & JavaScript" --- @@ -52,9 +52,9 @@ section.klausur { background: repeating-linear-gradient( 135deg, #fce4ec, - #fce4ec 20px, - #fff 20px, - #fff 40px + #fce4ec 40px, + #fff 40px, + #fff 80px ) !important; } section.klausur footer {