apply feedback to termin 1: wtf theme, 50/50 images, speaker notes

update image list: mark termin 1 done, fix ascii/grayscale prompts
add wtf mystery files for hands-on exercise
2025-12-17 19:53:51 +01:00 · 2025-12-17 19:53:50 +01:00 · 2025-12-17 19:53:50 +01:00 · 2025-12-17 19:53:50 +01:00 · 2025-12-17 18:07:57 +01:00 · 2025-12-17 18:07:57 +01:00
12 changed files with 527 additions and 148 deletions
@@ -26,56 +26,57 @@ This document lists all images needed for the lecture slides. Each image include

 ## Termin 1: Grundlagen, Text & Audio

-### ⬚ matrix-code.png
- **Context**: Opening visual for "Mysterium" hex dump slide
+### ✅ matrix-code.png
+- **Context**: Opening visual for "WTF!?" hex dump slide
 - **AI Prompt**: Matrix-style green digital rain code falling on black background, glowing green characters, cyberpunk hacker aesthetic, mysterious data visualization

-### ⬚ lightbulb-onoff.png
+### ✅ lightbulb-onoff.png
 - **Context**: Explaining the bit concept (0 or 1, on or off)
 - **AI Prompt**: Simple lightbulb comparison: one lit bright yellow, one dark/off, side by side, clean minimal style, binary concept visualization, white background

-### ⬚ grayscale-gradient.png
+### ✅ grayscale-gradient.png ⚠️ NEEDS REGENERATION
 - **Context**: Explaining 256 grayscale values (0=black to 255=white)
- **AI Prompt**: Smooth horizontal grayscale gradient from pure black on left to pure white on right, demonstrating 256 shades, clean minimal style, technical demonstration
+- **AI Prompt**: Horizontal grayscale gradient bar on a neutral gray background (#808080), gradient goes from pure black (left) to pure white (right), add visible value labels "0" on left and "255" on right, ensure edges are clearly visible against background, clean educational diagram style, 16:9 aspect ratio
+- **Issue**: Current image has barely visible edges on left (black) and right (white) sides

-### ⬚ rgb-color-model.png
+### ✅ rgb-color-model.png
 - **Context**: Explaining RGB color model (3 bytes per pixel)
 - **AI Prompt**: RGB color model visualization showing three overlapping circles (red, green, blue) creating cyan, magenta, yellow, and white in overlaps, clean educational diagram style

-### ⬚ ascii-table.png
- **Context**: Showing ASCII character encoding
- **AI Prompt**: Clean ASCII table showing characters 0-127 with their decimal and hex values, vintage computer terminal aesthetic, green on black or clean white background, educational reference chart
+### ✅ ascii-table.png
+- **Context**: Showing ASCII character encoding (7-bit, 128 characters total)
+- **AI Prompt**: Clean ASCII table showing printable characters 32-126 with their decimal and hex values, vintage computer terminal aesthetic, green on black or clean white background, educational reference chart. Note: ASCII is 7-bit encoding with 128 total characters (0-127), not 256. First 32 (0-31) are control characters, 127 is DEL.

-### ⬚ hex-binary-table.png
+### ✅ hex-binary-table.png
 - **Context**: Hex to binary conversion reference
 - **AI Prompt**: Clean conversion table showing hexadecimal digits 0-F with their 4-bit binary equivalents, educational reference style, programmer cheat sheet aesthetic

-### ⬚ hexeditor-screenshot.png
+### ✅ hexeditor-screenshot.png
 - **Context**: Showing what a hex editor looks like
 - **AI Prompt**: Screenshot of hex editor software showing file bytes in hexadecimal with ASCII representation on the right side, typical hex editor layout, technical software interface

-### ⬚ cassette-ipod.png
+### ✅ cassette-ipod.png
 - **Context**: Audio format evolution intro
 - **AI Prompt**: Vintage audio cassette tape next to modern iPod or MP3 player, technology evolution comparison, nostalgic meets modern, clean product photography style

-### ⬚ compression-types.png
+### ✅ compression-types.png
 - **Context**: Lossless vs lossy compression comparison
 - **AI Prompt**: Split diagram comparing lossless (ZIP icon, identical files) vs lossy (JPEG/MP3 icon, smaller but different), educational infographic style, clear visual distinction

-### ⬚ karlheinz-brandenburg.jpg
- **Context**: MP3 inventor portrait/reference
+### ✅ karlheinz-brandenburg.jpg
+- **Context**: MP3 inventor portrait/reference (Fraunhofer IIS)
 - **AI Prompt**: Professional portrait style of a German scientist/engineer in academic setting, Fraunhofer institute aesthetic, 1990s technology pioneer look (or use real photo)

-### ⬚ suzanne-vega.jpg
- **Context**: "Tom's Diner" - the song used to test MP3
+### ✅ suzanne-vega.jpg
+- **Context**: "Tom's Diner" - the song used to test MP3 compression
 - **AI Prompt**: Female singer-songwriter aesthetic, acoustic guitar, 1980s folk music style, intimate cafe performance setting (or use real photo)

-### ⬚ audio-spectrogram.png
- **Context**: Visualizing audio frequencies
+### ✅ audio-spectrogram.png
+- **Context**: Visualizing audio frequencies and MP3 compression effects
 - **AI Prompt**: Colorful audio spectrogram visualization showing frequency spectrum over time, rainbow gradient from low (red) to high (blue) frequencies, scientific audio analysis display

-### ⬚ napster-interface.png
- **Context**: MP3 piracy era / file sharing history
+### ✅ napster-interface.png
+- **Context**: MP3 piracy era / file sharing history (1999-2001)
 - **AI Prompt**: Late 1990s peer-to-peer file sharing interface aesthetic, Windows 98/2000 style dialog boxes, music file listings, nostalgic internet era, retro software UI

 ---
@@ -301,11 +302,13 @@ This document lists all images needed for the lecture slides. Each image include
 | Lecture | Total | ✅ Done | ⬚ Todo |
 |---------|-------|--------|--------|
 | Intro | 1 | 1 | 0 |
-| Termin 1 (Grundlagen/Text/Audio) | 13 | 0 | 13 |
+| Termin 1 (Grundlagen/Text/Audio) | 13 | 13 | 0 |
 | Termin 2 (Bild/Audio/Video) | 10 | 10 | 0 |
 | Termin 3 (Speichermedien) | 16 | 0 | 16 |
 | Termin 4 (Distribution/APIs) | 25 | 0 | 25 |
-| **Total** | **65** | **11** | **54** |
+| **Total** | **65** | **24** | **41** |
+
+**Note:** grayscale-gradient.png is marked ⚠️ NEEDS REGENERATION due to visibility issues at edges.

 ## Generation Tips

@@ -1,3 +1,24 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
+footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+---
+
+<style>
+section {
+  font-size: 1.7rem;
+}
+h2 {
+  color: var(--color-dimmed);
+}
+</style>
+
+<!-- _class: invert -->
+
 ![bg fit](./assets/digital-landscape.png)

 <!-- Startbild: Futuristisches Netzwerk, Datenströme, oder digitale Landschaft -->
@@ -21,7 +42,7 @@ Hochschule der Medien Stuttgart
 - Softwareentwickler & IT-Berater
 - Schwerpunkte: Cloud, AI, Web-Technologien, Systemarchitektur, Open Source
 - Hintergrund: Philosophie & Informatik
- Kontakt: czechowski@hdm-stuttgart.de
+- Kontakt: michael.czechowski@lehre.dhbw-stuttgart.de

 <!--
 Kurze Vorstellung
@@ -53,19 +74,23 @@ Fragen jederzeit willkommen
 2. Wer hat schon mal eine Datei mit einem Hex-Editor geöffnet?
 3. Wer weiß, was der Unterschied zwischen JPEG und PNG ist?
 4. Wer hat schon mal mit APIs gearbeitet?
-5. Wer weiß, was UTF-8 bedeutet? 
+5. Wer weiß, was UTF-8 bedeutet?
+6. **Wer hat schon mal HTML oder CSS gemacht?** (Hex-Farben wie `#FF0000`?)

 <!--
 Niveau der Gruppe einschätzen
 Keine falschen Antworten
 Zeigt, wo wir starten
+HTML/CSS-Frage: Viele kennen Hex-Codes aus Webdesign
 -->

 ---

 # Kursübersicht

-**Ziel:** Verstehen, wie digitale Medien technisch funktionieren – von Bits bis zu globalen Distributionsnetzwerken
+**Ziel:** Technische Grundlagen verstehen, um mit Entwicklungsteams, Kunden und Projektpartnern auf Augenhöhe zusammenarbeiten zu können.
+
+Die Digitalisierung verändert alle Branchen. Kaum ein Projekt in der Medienwelt kommt ohne digitale Technik aus – als Produkt, Kollaborationsplattform oder Marketing-/Verkaufskanal.

 **5 Termine:**
 - **19.12.** Bits, Bytes, Zeichenkodierung & Audio-Kompression
@@ -75,9 +100,10 @@ Zeigt, wo wir starten
 - **TBA** Vertiefung & offene Fragen

 <!--
+Aus dem Modulhandbuch "Internettechnologien 1":
+Grundkenntnisse der Internettechnologien sind unabdingbar für gemeinsames Verständnis von Projektanforderungen.
 Medienwissenschaftler:innen, nicht Informatiker:innen
 Fokus: Warum funktionieren Dinge so? Welche Konflikte stecken dahinter?
 Hands-On jede Woche (30-40 Min)
-Narrative statt Faktenlisten
 -->

@@ -1,3 +1,26 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
+footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+---
+
+<style>
+section {
+  font-size: 1.7rem;
+}
+h2 {
+  color: var(--color-dimmed);
+}
+</style>
+
+<!-- _class: invert -->
+
+![bg fit](./assets/digital-landscape.png)
+
 ---

 <!-- _class: lead -->
@@ -9,17 +32,17 @@

 ![bg right:40%](./assets/matrix-code.png)

-# Mysterium
+# WTF!?

 ```
-89 50 4E 47 0D 0A 1A 0A 
+89 50 4E 47 0D 0A 1A 0A
 00 00 00 0D 49 48 44 52
 00 00 01 90 00 00 01 2C
 ```

 **Was ist das?**

-<!-- 
+<!--
 Hex-Dump ohne Erklärung auf Bildschirm werfen
 Fragen in den Raum: "Was seht ihr?"
 "Ist das Text? Ein Bild? Code?"
@@ -28,6 +51,18 @@ Fragen in den Raum: "Was seht ihr?"

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/lightbulb-onoff.png)
+
+<!--
+Bit = Binary Digit
+Demonstration: Glühbirne AN/AUS = 1 Bit
+-->
+
+---
+
 # Das Bit

 **Kleinste Informationseinheit**
@@ -36,11 +71,8 @@ Fragen in den Raum: "Was seht ihr?"
 - AN oder AUS
 - Strom fließt oder nicht

-![bg right:50%](./assets/lightbulb-onoff.png)
-
-<!-- 
-Bit = Binary Digit
-Demonstration: Glühbirne AN/AUS = 1 Bit
+<!--
+BIT = Binary Digit (Binärziffer) – 1948 von Claude Shannon geprägt
 Alles Digitale basiert darauf
 Transistoren in CPUs: Milliarden Bits schalten Millionen Mal pro Sekunde
 -->
@@ -58,10 +90,23 @@ Transistoren in CPUs: Milliarden Bits schalten Millionen Mal pro Sekunde
 **Wie viele Kombinationen?**
 2⁸ = **256 Möglichkeiten** (0-255)

-<!-- 
-Rechnung gemeinsam: 2×2×2×2×2×2×2×2 = 256
-Jedes Bit kann 0 oder 1 sein
-256 verschiedene Werte mit 8 Bits darstellbar
+<!--
+BYTE = Wortspiel aus "Bit" + "Bite" (Bissen)
+Warum 8 Bits? Historisch: IBM System/360 (1964) setzte Standard
+Vorher: 6-Bit, 7-Bit Systeme (z.B. ASCII = 7 Bit)
+8 Bit = 2 Hex-Ziffern = praktisch für Hardware
+Rechnung: 2×2×2×2×2×2×2×2 = 256
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/grayscale-gradient.png)
+
+<!--
+256 Graustufen: 0 = Schwarz, 255 = Weiß
 -->

 ---
@@ -73,9 +118,7 @@ Jedes Bit kann 0 oder 1 sein
 - **256 Lautstärkestufen**
 - **Zahlen 0-255** (oder -128 bis +127)

-![bg left:40%](./assets/grayscale-gradient.png)
-
-<!-- 
+<!--
 1 Byte ist extrem limitiert
 Für Farbbild: 3 Bytes pro Pixel (RGB)
 R=0-255, G=0-255, B=0-255 → 256³ = 16,7 Millionen Farben
@@ -83,6 +126,17 @@ R=0-255, G=0-255, B=0-255 → 256³ = 16,7 Millionen Farben

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/rgb-color-model.png)
+
+<!--
+RGB = Additive Farbmischung (Bildschirme)
+-->
+
+---
+
 # Farben: RGB-Modell

 **1 Pixel = 3 Bytes**
@@ -91,18 +145,16 @@ R=0-255, G=0-255, B=0-255 → 256³ = 16,7 Millionen Farben
 - **Grün:** 0-255
 - **Blau:** 0-255

-**Beispiel:**
-`FF 00 00` = Rot
-`00 FF 00` = Grün
-`FF FF FF` = Weiß
+**Beispiele:**
+`FF 00 00` = Rot | `00 FF 00` = Grün
+`00 00 00` = Schwarz | `FF FF FF` = Weiß

-![bg right:40%](./assets/rgb-color-model.png)
-
-<!-- 
-RGB = Additive Farbmischung (Bildschirme)
+<!--
 CMYK = Subtraktive Farbmischung (Druck)
 Hex-Notation: FF = 255 in Dezimal
 CSS-Farben nutzen Hex: #FF0000 = Rot
+Wer HTML/CSS gemacht hat, kennt das schon!
+background-color: #FF0000; = Rot
 -->

 ---
@@ -130,9 +182,12 @@ Chaos: Verschiedene Standards für verschiedene Sprachen

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/ascii-table.png)

-<!-- 
+<!--
 ASCII-Tabelle (1963)
 7 Bit = 128 Zeichen
 Erste 32: Steuerzeichen (nicht druckbar)
@@ -191,6 +246,18 @@ UTF-8-Kodierung: Variable Länge spart Speicher bei ASCII

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/hex-binary-table.png)
+
+<!--
+Hex-Binär-Umrechnungstabelle
+Jede Hex-Ziffer = 4 Bits
+-->
+
+---
+
 # Hexadezimal: Lesbarkeit

 **Binär ist unleserlich:**
@@ -199,15 +266,15 @@ UTF-8-Kodierung: Variable Länge spart Speicher bei ASCII
 **Hexadezimal (Base 16):**
 `4D 50 33` (= "MP3" in ASCII)

-**Jede Hex-Ziffer = 4 Bits**
+**Jede Hex-Ziffer = 4 Bits (ein "Nibble")**
 0-9, A-F (10=A, 11=B, ..., 15=F)

-![bg right:40%](./assets/hex-binary-table.png)
-
-<!-- 
+<!--
+Warum genau 4 Bits? 2⁴ = 16 Werte = eine Hex-Ziffer (0-F)
 Hex = Shortcut für Menschen, nicht für Computer
 Computer denken binär, wir lesen hex
 1 Byte = 2 Hex-Ziffern (00-FF)
+"Nibble" = halb Byte = 4 Bits (Wortspiel!)
 Hex-Editor: Standard-Tool für Dateianalyse
 -->

@@ -222,20 +289,27 @@ Hex-Editor: Standard-Tool für Dateianalyse
 | PNG | `89 50 4E 47 0D 0A 1A 0A` | `.PNG` |
 | JPEG | `FF D8 FF` | `ÿØÿ` |
 | PDF | `25 50 44 46` | `%PDF` |
-| ZIP | `50 4B 03 04` | `PK` |
+| ZIP/DOCX/ODT | `50 4B 03 04` | `PK` |

-<!-- 
+**Achtung:** TXT, HTML, CSS haben **keine** Magic Number!
+
+<!--
 Magic Number = Signature am Dateianfang
-Computer schauen in erste Bytes (nicht auf .jpg/.png)
 "PK" = Phil Katz (Erfinder von PKZip)
+DOCX, XLSX, ODT = ZIP-Archive mit XML-Inhalt!
 Dateiendungen können lügen, Magic Numbers nicht
+→ FAKE CHECK: virus.exe → bild.jpg umbenennen täuscht nur Menschen
+Computer erkennt echten Typ an Magic Number
 -->

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/hexeditor-screenshot.png)

-<!-- 
+<!--
 Hex-Editor-Screenshot mit PNG-Datei
 Erste Bytes: 89 50 4E 47 = PNG-Signatur
 IHDR = Image Header (Breite, Höhe, Farbtiefe)
@@ -245,11 +319,12 @@ Tool: HxD (Windows), Hex Fiend (Mac), xxd (Linux)

 ---

-# Hands-On: Mystery Files
+# Hands-On: WTF Files

 **Aufgabe (30 Min):**

-1. Drei Dateien ohne Extension: `mystery1`, `mystery2`, `mystery3`
+1. Drei Dateien ohne Extension: `wtf1`, `wtf2`, `wtf3`
+   → Download: `materials/` Ordner
 2. Öffne im Hex-Editor
 3. Lies erste 16 Bytes
 4. Identifiziere Format (Magic Number)
@@ -257,16 +332,19 @@ Tool: HxD (Windows), Hex Fiend (Mac), xxd (Linux)

 **Tools:** hexed.it (online), HxD, Hex Fiend, Bless

-<!-- 
+<!--
 Praktische Phase: Studierende arbeiten selbst
-Dateien: PNG, JPEG, TXT (vorbereitet)
+Dateien im materials/ Ordner:
+- wtf1: Plaintext (keine Magic Number)
+- wtf2: PNG (89 50 4E 47)
+- wtf3: JPEG (FF D8 FF)
 Gruppenarbeit: 3-4 Personen
 Ziel: Hex-Dump lesen lernen, Dateiformate verstehen
 -->

 ---

-# Aufgabe bis nächste Woche
+# Fleißaufgabe bis nächste Woche

 **Finde eine Datei auf deinem Computer**

@@ -277,7 +355,7 @@ Ziel: Hex-Dump lesen lernen, Dateiformate verstehen

 **Bonus:** Finde Datei ohne Magic Number in Standard-Listen

-<!-- 
+<!--
 Selbstständiges Arbeiten
 Forum: Peer-Learning, gegenseitige Hilfe
 Bonus: Spornt Neugierige an
@@ -292,9 +370,12 @@ Bonus: Spornt Neugierige an

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/cassette-ipod.png)

-<!-- 
+<!--
 Kassette neben iPod
 Visueller Kontrast: Analog vs. Digital
 1980er vs. 2000er
@@ -326,9 +407,19 @@ Streaming? Unmöglich.

 ---

-# Zwei Philosophien
+<!-- _header: '' -->
+<!-- _footer: '' -->

-![bg right:50%](./assets/compression-types.png)
+![bg](./assets/compression-types.png)
+
+<!--
+Lossless vs. Lossy Kompression
+Visualisierung der beiden Philosophien
+-->
+
+---
+
+# Zwei Philosophien

 **Lossless (Verlustfrei):**
 - Original exakt wiederherstellbar
@@ -340,7 +431,7 @@ Streaming? Unmöglich.
 - JPEG, MP3, H.264
 - 90%+ Ersparnis

-<!-- 
+<!--
 Lossless: Findet Muster, beschreibt effizienter
 Lossy: Wirft "Unwichtiges" weg (Psychoakustik/Psychovisuell)
 Trade-off: Größe vs. Qualität
@@ -349,6 +440,7 @@ Trade-off: Größe vs. Qualität
 ---

 # Lossless: Run-Length Encoding
+## Lauflängenkodierung

 **Original:**
 ```
@@ -362,8 +454,9 @@ AAAAABBBCCCCCCCC

 **Ersparnis:** 16 → 6 Zeichen (62% Reduktion)

-<!-- 
-RLE = Simplest Compression Algorithm
+<!--
+RLE = Run-Length Encoding = Lauflängenkodierung
+Simplest Compression Algorithm
 Gut für repetitive Daten (Fax, simple Grafiken)
 Schlecht für chaotische Daten (Fotos, Audio)
 -->
@@ -392,12 +485,21 @@ Kompression = Modell der menschlichen Wahrnehmung

 ---

-![bg](./assets/karlheinz-brandenburg.jpg)
+![bg right:50%](./assets/karlheinz-brandenburg.jpg)

-<!-- 
-Foto: Karlheinz Brandenburg
+# Karlheinz Brandenburg
+
+**"Vater der MP3"**
+
+- Diplom-Ingenieur, Universität Erlangen-Nürnberg
+- Fraunhofer IIS (Institut für Integrierte Schaltungen)
+- Forschung ab 1982, Patent 1988
+- Hörte "Tom's Diner" über 10.000 Mal
+
+<!--
 Fraunhofer IIS Erlangen
-"Vater der MP3"
+Forschung dauerte über 10 Jahre
+Perfektionist: Jeder Hörtest musste bestehen
 -->

 ---
@@ -424,12 +526,22 @@ Patent lief 2017 aus

 ---

-![bg](./assets/suzanne-vega.jpg)
+![bg right:50%](./assets/suzanne-vega.jpg)

-<!-- 
+# Suzanne Vega
+
+**"Tom's Diner" (1987)**
+
+- A cappella (keine Instrumente)
+- Klare, hohe Frequenzen
+- Perfekter Stresstest für Kompression
+- Der erste Song, der als MP3 kodiert wurde
+
+<!--
 Suzanne Vega – "Tom's Diner" (1987)
-Der erste Song, der als MP3 kodiert wurde
-Karlheinz Brandenburg hörte ihn tausende Male
+A cappella = einfacher zu analysieren (nur Stimme)
+Hohe Frequenzen = Herausforderung für Kompression
+Brandenburg hörte den Song über 10.000 Mal
 -->

 ---
@@ -499,9 +611,12 @@ Aber: Diminishing Returns ab 256 kbps

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/audio-spectrogram.png)

-<!-- 
+<!--
 Spektrogramm-Vergleich
 Original vs. 320 kbps vs. 128 kbps
 Hohe Frequenzen verschwinden bei niedriger Bitrate
@@ -531,13 +646,22 @@ Das Pferd war aus dem Stall

 ---

-![bg](./assets/napster-interface.png)
+![bg right:50%](./assets/napster-interface.png)

-<!-- 
-Napster-Screenshot (1999)
-P2P-Filesharing für MP3s
-Shawn Fanning, 19 Jahre alt
-80 Millionen User in 2 Jahren
+# Napster (1999)
+
+**P2P-Filesharing für MP3s**
+
+- Shawn Fanning, 19 Jahre alt
+- 80 Millionen User in 2 Jahren
+- Musikindustrie verklagt (2001)
+- Pandora's Box: Nicht mehr aufzuhalten
+
+<!--
+P2P = Peer-to-Peer
+Shawn Fanning gründete Napster als Student
+RIAA verklagte Napster, Schließung 2001
+Aber: LimeWire, Kazaa, BitTorrent folgten
 -->

 ---
@@ -601,22 +725,23 @@ Vinyl-Revival: 2020er Gegenbewegung
 1. Lade Lied runter (eigenes oder CC)
 2. Konvertiere in verschiedene Bitraten:
   - 320 kbps, 128 kbps, 64 kbps
-3. Tool: Audacity (kostenlos)
+3. Tool: **Audacity** (kostenlos)
 4. Höre Unterschiede (Kopfhörer!)
 5. Vergleiche Dateigrößen

-**Optional:** Spektrogramm-Ansicht
+**Spektrogramm:** Track-Menü → Spektrogramm

-<!-- 
-Audacity: FOSS Audio-Editor
+<!--
+Audacity: FOSS Audio-Editor (audacityteam.org)
 Export: Datei → Exportieren → MP3 → Bitrate wählen
-Spektrogramm: Analysieren → Spektrogramm
-Hohe Frequenzen verschwinden bei niedriger Bitrate
+Spektrogramm-Ansicht: Track-Name klicken → "Spektrogramm"
+Hohe Frequenzen (oben im Bild) verschwinden bei niedriger Bitrate
+Alternative: Spek (spek.cc) – reiner Spektrogramm-Viewer
 -->

 ---

-# Aufgabe bis nächste Woche
+# Fleißaufgabe bis nächste Woche

 **Nimm ein Lied (eigenes oder CC)**

@@ -626,9 +751,29 @@ Hohe Frequenzen verschwinden bei niedriger Bitrate

 **Bonus:** Niedrigste Bitrate finden, bei der du keinen Unterschied hörst

-<!-- 
+<!--
 WAV = Unkomprimiert (Referenz)
 Goldenes Ohr: Manche hören Unterschied, manche nicht
 Psychoakustik in Aktion: Subjektive Wahrnehmung
 -->

+---
+
+<!-- _class: lead -->
+
+# Fragen & Diskussion
+
+**Kontakt:** michael.czechowski@lehre.dhbw-stuttgart.de
+**Folien:** Online verfügbar unter https://hdm.librete.ch
+
+---
+
+# Lizenz & Attribution
+
+Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
+
+- Erlaubt Teilen & Anpassen mit Namensnennung
+- Adaptionen müssen unter gleicher Lizenz geteilt werden
+
+Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
+
@@ -1,3 +1,26 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
+footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+---
+
+<style>
+section {
+  font-size: 1.7rem;
+}
+h2 {
+  color: var(--color-dimmed);
+}
+</style>
+
+<!-- _class: invert -->
+
+![bg fit](./assets/digital-landscape.png)
+
 ---

 <!-- _class: lead -->
@@ -7,9 +30,12 @@

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/photo-comparison.png)

-<!-- 
+<!--
 Links: Hochauflösend
 Rechts: Stark komprimiert (JPEG-Artefakte sichtbar)
 Instagram-Effekt
@@ -80,9 +106,12 @@ Dateierweiterungen: .jpg, .jpeg, .jfif (alle gleich)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/jpeg-artifacts.png)

-<!-- 
+<!--
 Beispiel: Stark komprimiertes JPEG
 Blocking (8×8-Blöcke sichtbar)
 Ringing (Geister um Kanten)
@@ -153,9 +182,12 @@ Photoshop "Save for Web": Standard ist 60

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/gif-animation.png)

-<!-- 
+<!--
 GIF-Animation (z.B. Meme)
 256 Farben, aber Animationen möglich
 -->
@@ -236,9 +268,12 @@ JPEG bleibt dominant (Kompatibilität!)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/instagram-quality-loss.png)

-<!-- 
+<!--
 Vorher/Nachher: Hochauflösend vs. Instagram-Upload
 Sichtbare Qualitätsverluste
 -->
@@ -318,6 +353,9 @@ Forum: Austausch über Ergebnisse

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/netflix-4k.png)

 <!-- 
@@ -370,6 +408,9 @@ Ein MP4 kann H.264, H.265 oder AV1 enthalten

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/container-codec-diagram.png)

 <!-- 
@@ -430,6 +471,9 @@ Wenn du vorspulst: Sucht nach nächstem I-Frame

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/iframe-pframe-diagram.png)

 <!-- 
@@ -512,6 +556,9 @@ Fragmentierung verzögert Adoption

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/youtube-vp9.png)

 <!-- 
@@ -545,6 +592,9 @@ Hardware-Decoder erst ab ~2016 (langsame Adoption)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/av1-logo.png)

 <!-- 
@@ -606,6 +656,9 @@ Player misst Bandbreite, wechselt live

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/streaming-quality-switch.png)

 <!-- 
@@ -677,10 +730,30 @@ Encoding-Zeit: H.265 deutlich langsamer als H.264

 **Bonus:** AV1-Encoding (Warnung: SEHR langsam!)

-<!-- 
+<!--
 MediaInfo oder ffprobe für Analyse
 HandBrake für Konvertierung (einfacher als CLI)
 Encoding-Zeit: H.265 ~5x langsamer, AV1 ~50x langsamer
 Qualität: Bei gleicher Bitrate H.265 > H.264
 -->

+---
+
+<!-- _class: lead -->
+
+# Fragen & Diskussion
+
+**Kontakt:** czechowski@hdm-stuttgart.de
+**Folien:** Online verfügbar unter https://hdm.librete.ch
+
+---
+
+# Lizenz & Attribution
+
+Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
+
+- Erlaubt Teilen & Anpassen mit Namensnennung
+- Adaptionen müssen unter gleicher Lizenz geteilt werden
+
+Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
+
@@ -1,3 +1,26 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
+footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+---
+
+<style>
+section {
+  font-size: 1.7rem;
+}
+h2 {
+  color: var(--color-dimmed);
+}
+</style>
+
+<!-- _class: invert -->
+
+![bg fit](./assets/digital-landscape.png)
+
 ---

 <!-- _class: lead -->
@@ -7,9 +30,12 @@

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/hdd-ssd-comparison.png)

-<!-- 
+<!--
 HDD aufgeschraubt neben SSD-Platine
 Mechanisch vs. Elektronisch
 -->
@@ -58,6 +84,9 @@ Windows: NTFS, macOS: APFS, Linux: ext4

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/directory-tree.png)

 <!-- 
@@ -221,6 +250,9 @@ Sicherheit: APFS/NTFS für Verschlüsselung

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/backup-disaster.png)

 <!-- 
@@ -313,6 +345,9 @@ Syncthing: P2P-Sync, kein zentraler Server

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/bit-rot.png)

 <!-- 
@@ -343,6 +378,9 @@ Offene Standards: PDF/A, TIFF, TXT überleben

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/lto-tape.png)

 <!-- 
@@ -374,6 +412,9 @@ Cold Storage: Daten, die selten gebraucht werden

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/m-disc.png)

 <!-- 
@@ -401,6 +442,9 @@ Nachteil: Teurer (~5€ vs. 0,50€ normale Blu-ray)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/dna-helix.png)

 <!-- 
@@ -481,6 +525,9 @@ Bonus: Wer's macht, hat echten Nutzen

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/cable-mess.png)

 <!-- 
@@ -510,6 +557,9 @@ Ohne Standards: Jedes Gerät braucht eigenes Kabel

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/pc-back-1990s.png)

 <!-- 
@@ -565,6 +615,9 @@ USB 4 basiert auf Thunderbolt 3 (Intel spendete Spec)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/usb-c-cables.png)

 <!-- 
@@ -651,6 +704,9 @@ EU-Regulierung: Beschriftung gefordert (aber nicht umgesetzt)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/thunderbolt-logo.png)

 <!-- 
@@ -684,6 +740,9 @@ Zertifizierung: Blitz-Logo = echt Thunderbolt

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/hdmi-cable.png)

 <!-- 
@@ -722,6 +781,9 @@ Lizenzgebühren: ~$10.000 Jahresgebühr + $0,15/Gerät

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/displayport-cable.png)

 <!-- 
@@ -778,6 +840,9 @@ Politik & Marketing entscheiden

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/hdcp-warning.png)

 <!-- 
@@ -814,6 +879,9 @@ Classic DRM-Problem: Nervt Zahlende, nicht Piraten

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/ethernet-cable.png)

 <!-- 
@@ -849,6 +917,9 @@ PoE = Power over Ethernet (Strom + Daten)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/vintage-ports.png)

 <!-- 
@@ -909,10 +980,30 @@ Dokumentation: Verstehen, was man hat

 **Bonus:** Finde USB-C-Kabel, das nur USB 2.0 kann

-<!-- 
+<!--
 Kabel-Sammlung durchgehen
 Bewusstsein schaffen: Was habe ich eigentlich?
 Viele Lade-Kabel: USB-C, aber nur USB 2.0 (langsam!)
 Forum: Erfahrungsaustausch, lustige Fundstücke
 -->

+---
+
+<!-- _class: lead -->
+
+# Fragen & Diskussion
+
+**Kontakt:** czechowski@hdm-stuttgart.de
+**Folien:** Online verfügbar unter https://hdm.librete.ch
+
+---
+
+# Lizenz & Attribution
+
+Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
+
+- Erlaubt Teilen & Anpassen mit Namensnennung
+- Adaptionen müssen unter gleicher Lizenz geteilt werden
+
+Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
+
@@ -1,3 +1,26 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
+footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+---
+
+<style>
+section {
+  font-size: 1.7rem;
+}
+h2 {
+  color: var(--color-dimmed);
+}
+</style>
+
+<!-- _class: invert -->
+
+![bg fit](./assets/digital-landscape.png)
+
 ---

 <!-- _class: lead -->
@@ -1807,7 +1830,7 @@ Command Line Heroes: Tech-Geschichte (Spotify, Apple Podcasts)

 **Vielen Dank für eure Aufmerksamkeit!**

-<!-- 
+<!--
 10 Wochen gemeinsame Reise
 Von "Was sind Bits?" zu "DNA-Storage"
 Hands-On jede Woche (Hex-Editor, FFmpeg, exiftool, APIs)
@@ -1816,3 +1839,23 @@ Kritische Perspektive (Patent-Kriege, Vendor Lock-in)
 Evaluation: Feedback ernst nehmen, Kurs verbessern
 -->

+---
+
+<!-- _class: lead -->
+
+# Fragen & Diskussion
+
+**Kontakt:** czechowski@hdm-stuttgart.de
+**Folien:** Online verfügbar unter https://hdm.librete.ch
+
+---
+
+# Lizenz & Attribution
+
+Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
+
+- Erlaubt Teilen & Anpassen mit Namensnennung
+- Adaptionen müssen unter gleicher Lizenz geteilt werden
+
+Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
+
@@ -1,3 +1,26 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
+footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+---
+
+<style>
+section {
+  font-size: 1.7rem;
+}
+h2 {
+  color: var(--color-dimmed);
+}
+</style>
+
+<!-- _class: invert -->
+
+![bg fit](./assets/digital-landscape.png)
+
 ---

 <!-- _class: lead -->
@@ -22,3 +45,23 @@ Flexibler Termin für Nachholbedarf
 Themen nach Interesse der Studierenden
 -->

+---
+
+<!-- _class: lead -->
+
+# Fragen & Diskussion
+
+**Kontakt:** czechowski@hdm-stuttgart.de
+**Folien:** Online verfügbar unter https://hdm.librete.ch
+
+---
+
+# Lizenz & Attribution
+
+Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
+
+- Erlaubt Teilen & Anpassen mit Namensnennung
+- Adaptionen müssen unter gleicher Lizenz geteilt werden
+
+Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
+
@@ -1,19 +0,0 @@
---
-marp: true
-theme: gaia
-paginate: true
-backgroundColor: #fff
-header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
-title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
---
-
-<style>
-section {
-  font-size: 1.7rem;
-}
-h2 {
-  color: var(--color-dimmed);
-}
-</style>
-
@@ -1,27 +0,0 @@
---
-
-<!-- _class: lead -->
-
-# Fragen & Diskussion
-
-**Kontakt:** czechowski@hdm-stuttgart.de
-**Folien:** Online verfügbar unter https://hdm.librete.ch
-
---
-
-# Lizenz & Attribution
-
-Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
-
- Erlaubt Teilen & Anpassen mit Namensnennung
- Adaptionen müssen unter gleicher Lizenz geteilt werden
-
-Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
-
-<!-- 
-Open Educational Resources (OER)
-Studierende können Folien nutzen, remixen, teilen
-CC BY-SA: Wikipedia-Lizenz (Share-Alike)
-Attribution: "Michaล‚ Czechowski, HdM Stuttgart"
-->
-
@@ -0,0 +1 @@
+Dies ist eine einfache Textdatei. Keine Magic Number hier! Plaintext hat keinen Standard-Header.
Author	SHA1	Message	Date
libretech	50c8208e63	apply feedback to termin 1: wtf theme, 50/50 images, speaker notes	2025-12-17 19:53:51 +01:00
libretech	00b4e0161a	update image list: mark termin 1 done, fix ascii/grayscale prompts	2025-12-17 19:53:50 +01:00
libretech	c7d51e6df8	add wtf mystery files for hands-on exercise	2025-12-17 19:53:50 +01:00
libretech	35c2dc73b7	add termin 0 intro slides with modulhandbuch ziel	2025-12-17 19:53:50 +01:00
libretech	6945330c92	update termin 5 slides with expanded content	2025-12-17 18:07:57 +01:00
libretech	f8308596e4	update termin 4 slides with expanded content	2025-12-17 18:07:57 +01:00
libretech	a77ed41b2f	update termin 3 slides with expanded content	2025-12-17 18:07:57 +01:00
libretech	4123203d55	update termin 2 slides with expanded content	2025-12-17 18:07:57 +01:00
libretech	cd30a913ff	update termin 1 slides with expanded content	2025-12-17 18:07:57 +01:00
libretech	dc5f7855f7	remove unused partial slide files	2025-12-17 18:07:43 +01:00
				`@@ -0,0 +1 @@`
				`Dies ist eine einfache Textdatei. Keine Magic Number hier! Plaintext hat keinen Standard-Header.`