update slides styling and content refinements

- fix course number 223015c → 223015b in termin 1
- adjust language: "fuck" → "heck" in example
- add black backgrounds for image-only slides
- add bg fit to fullscreen images
- update digital-landscape.png
- add frontmatter to termin 2-4 slides

.gitignore

@@ -62,3 +62,4 @@ Desktop.ini
 !build/*.html
 *.pdf
 index.md.bak
+hdm-lehrauftrag-uebersicht.md

IMAGE_LIST.md

@@ -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
 

README.md

@@ -1,6 +1,44 @@
-# HdM - Dateiformate, Speichermedien und Schnittstellen
+# 223015b – Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 
-## Creating Slides
+**Modul "Technik 1"** · 1. Semester · Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart · Wintersemester 2025/26
+
+**Repository:** [git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+
+---
+
+## Über dieses Modul
+
+> *Internettechnologien 1 – "Technische Grundlagen von IT-Projekten"*
+
+Die Digitalisierung verändert die Prozesse und Tätigkeiten in allen Branchen. Sie hat neue Geschäftsmodelle ermöglicht und auch unseren Alltag stark verändert. Kaum ein Projekt in der Medienwelt kommt ohne digitale Technik aus – als Produkt, Kollaborationsplattform oder Marketing- und Verkaufsplattform.
+
+**Ziel:** Technische Grundlagen verstehen, um mit Entwicklungsteams, Kunden und Projektpartnern auf Augenhöhe zusammenarbeiten zu können.
+
+### Termine
+
+| # | Datum | Thema |
+|---|-------|-------|
+| 1 | 19.12.2025 | Grundlagen, Text & Audio |
+| 2 | 09.01.2026 | Bild- & Videoformate |
+| 3 | 23.01.2026 | Speichermedien & Schnittstellen |
+| 4 | 30.01.2026 | Distribution, APIs & Zukunft |
+| 5 | TBA | Vertiefung & offene Fragen |
+
+### Kompetenzen
+
+In dieser Veranstaltung erwerben Sie folgende Kompetenzen:
+- Technische Konzepte des Internets verstehen (Netzwerke, Protokolle, Client/Server)
+- Dateiformate analysieren und verstehen
+- Grundlagen von Kompression (Audio, Bild, Video)
+- Speichermedien und Schnittstellen kennen
+- APIs und Distributionswege verstehen
+
+**Dozent:** Michael Czechowski · michael.czechowski@lehre.dhbw-stuttgart.de
+
+---
+
+## Slides erstellen
 
 ### Basic Slide Structure
 

hdm-lehrauftrag-uebersicht.md

@@ -1,132 +0,0 @@
-# Lehrauftrag HdM Stuttgart – WS 25/26
-
-**Studiengang:** Digital- und Medienwirtschaft / Media Entertainment  
-**Kontakt:** Tahira Siddiqui (Studiengangsmanagerin)  
-**Ort:** HdM Stuttgart, Nobelstraße 10, 70569 Stuttgart
-
----
-
-## Vorlesungen & Termine
-
-### 1. Dateiformate, Schnittstellen, Speichermedien und Distributionswege
-
-*Teil des Moduls "Technik 1", 1. Semester*
-
-| Termin | Tag | Zeit | Status |
-|--------|-----|------|--------|
-| ~~12.12.2025~~ | ~~Fr~~ | ~~14:15 – 17:30~~ | ❌ Auslandsreise |
-| 19.12.2025 | Fr | 14:15 – 17:30 | ✓ |
-| 09.01.2026 | Fr | 14:15 – 17:30 | ✓ |
-| 23.01.2026 | Fr | 14:15 – 17:30 | ✓ |
-| 30.01.2026 | Fr | 14:15 – 17:30 | ✓ |
-
-**⚠️ Offen:** Ersatztermin für 12.12. mit Tahira klären
-
-**Inhalte:**
-- Dateiformate (Text, Bild, Audio, Video; Header, Metadaten, Kompression)
-- Speichermedien (HDD, SSD, Cloud)
-- Schnittstellen (USB, HDMI, APIs)
-- Distributionswege (CDN, P2P, Plattformen)
-- Werkzeuge & Praxisbezug
-
----
-
-### 2. Grundlagen IT (Internet 1)
-
-| Termin | Tag | Zeit |
-|--------|-----|------|
-| 20.12.2025 | Fr | 10:00 – 16:30 |
-| 10.01.2026 | Fr | 10:00 – 16:30 |
-| 24.01.2026 | Fr | 10:00 – 16:30 |
-
-**Unterlagen:** https://filestore.hdm-stuttgart.de/s/rW4zJUluFlh9ZWJ
-
----
-
-## Chronologie der Korrespondenz
-
-### Phase 1: Anfrage (14.–19.11.2025)
-
-**14.11. – Tahira → Michael:**  
-Anfrage für Lehrauftrag "Dateiformate, Schnittstellen, Speichermedien und Distributionswege". Kurzfristige Besetzung im laufenden Semester benötigt.
-
-**14.11. – Michael → Tahira:**  
-Grundsätzliches Interesse, ab Dezember verfügbar, nur Freitage möglich.
-
-**18.11. – Tahira → Michael:**  
-Bestätigung: Freitage sind kein Problem.
-
-**18.11. – Michael → Tahira:**  
-Zusage: "Solange es freitags stattfinden kann, bin ich ab Dezember einsatzbereit."
-
-**18.11. – Tahira → Michael:**  
-Fragt nach persönlichem Gespräch.
-
-**19.11. – Michael → Tahira:**  
-Gibt Telefonnummer für Rückruf.
-
----
-
-### Phase 2: Terminplanung (24.–27.11.2025)
-
-**24.11. – Tahira → Michael:**  
-Erste Terminvorschläge für "Technik 1": 12.12., 19.12., 09.01., 23.01., 30.01. (je 14:15–17:30).  
-Erwähnt zusätzlich möglichen Lehrauftrag "Grundlagen IT und Internettechnik" als Samstags-Blocktage.
-
-**26.11. – Tahira → Michael:**  
-Fragt nach Meeting morgen Vormittag. Sendet Link zu Unterlagen für Grundlagen IT.
-
-**26.11. – Michael → Tahira:**  
-Schlägt 10 Uhr vor (muss ab 11 Uhr im Zug sein).
-
-**26.11. – Tahira → Michael:**  
-Gegenvorschlag: 9:30 Uhr.
-
-**26.11. – Michael → Tahira:**  
-"Dann 9:30, bis morgen."
-
-**27.11. – Meeting um 9:30 Uhr (vermutlich telefonisch)**
-
----
-
-### Phase 3: Vertragsunterzeichnung (03.12.2025)
-
-**03.12. – Michael → Tahira:**  
-Hat Termin um 16 Uhr übersehen, fragt nach Alternativen.
-
-**03.12. – Tahira → Michael:**  
-Kann länger bleiben oder Freitag ab 12 Uhr.
-
-**03.12. – Michael → Tahira:**  
-Schlägt 14:30 Uhr vor. Gibt Anschrift für Vertrag:  
-Michael Werner Czechowski, Schnellweg 3, 70199 Stuttgart
-
-**03.12. – Tahira → Michael:**  
-"Ja, das passt!"
-
-**03.12. – Persönliches Treffen um 14:30 Uhr an der HdM**
-
----
-
-### Phase 4: Grundlagen IT Termine (05.–08.12.2025)
-
-**05.12. – Tahira → Michael:**  
-Terminvorschläge für Grundlagen IT: 13.12., 20.12., 10.01., 24.01. (je 10:00–17:00). Drei Termine genügen.
-
-**08.12. – Michael → Tahira:**  
-Zeiten passen allgemein, aber 13.12. nicht möglich (Auslandsreise). Bittet um Ausweichtermin.
-
-**08.12. – Tahira → Michael:**  
-Passt Termine an: 20.12., 10.01., 24.01. (je 10:00–16:30).
-
-**08.12. – Michael → Tahira:**  
-"Das passt für mich!"
-
----
-
-## Zusammenfassung
-
-- **Zwei Lehraufträge** im WS 25/26
-- **Alle Termine freitags** (wie gewünscht)
-- **Semesterende:** 31.01.2026
-- **Vertrag unterschrieben:** 03.12.2025 (persönlich an der HdM)

slides/2025-12-19-termin-0-intro.md

@@ -0,0 +1,150 @@
+---
+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 -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg fit opacity:0.4](./assets/digital-landscape.png)
+
+# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+
+**223015b** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+**Wintersemester 2025/26**
+
+[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+
+---
+
+<!-- _class: lead -->
+
+# Internettechnologien 1
+## "Technische Grundlagen von IT-Projekten"
+
+---
+
+# Über mich
+
+**Michael Czechowski**
+
+- Softwareentwickler & IT-Berater
+- Schwerpunkte: Cloud, AI, Web-Technologien, Systemarchitektur, Open Source
+- Hintergrund: Philosophie & Informatik
+- Kontakt: mail@librete.ch
+
+<!--
+Kurze Vorstellung
+Praxisbezug betonen
+Fragen jederzeit willkommen
+-->
+
+---
+
+# Kurze Umfrage
+
+**Bitte Hand heben:**
+
+1. Wer hat schon mal ein Video komprimiert/konvertiert?
+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?
+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
+-->
+
+---
+
+# Warum dieses Modul?
+
+Die Digitalisierung verändert die Prozesse und Tätigkeiten in allen Branchen. Sie hat neue Geschäftsmodelle ermöglicht und auch unseren Alltag stark verändert.
+
+Kaum ein Projekt in der Medienwelt kommt ohne digitale Technik aus:
+- Als **Produkt** (z.B. Verkauf einer Webseite)
+- Als **Kollaborationsplattform**
+- Als **Marketing- und Verkaufsplattform**
+
+<!--
+Aus dem Modulhandbuch "Internettechnologien 1"
+Digitalisierung betrifft alle Branchen
+Technik ist nicht optional, sondern zentral
+-->
+
+---
+
+# Das Ziel
+
+**Technische Grundlagen verstehen**, um mit Entwicklungsteams, Kunden und Projektpartnern **auf Augenhöhe** zusammenarbeiten zu können.
+
+Grundkenntnisse der Internettechnologien und der Prozesse der Software-Entwicklung sind **unabdingbar**, um ein gemeinsames Verständnis von Projektanforderungen und dem Projektvorgehen zu erreichen.
+
+<!--
+Nicht: Ihr sollt Programmierer werden
+Sondern: Ihr sollt mitreden können
+"Auf Augenhöhe" = verstehen, was Entwickler:innen meinen
+-->
+
+---
+
+# Was ihr lernt
+
+**In dieser Veranstaltung erwerbt ihr folgende Kompetenzen:**
+
+- Technische Konzepte des Internets verstehen (Netzwerke, Protokolle, Client/Server)
+- Dateiformate analysieren und verstehen
+- Grundlagen von Kompression (Audio, Bild, Video)
+- Speichermedien und Schnittstellen kennen
+- APIs und Distributionswege verstehen
+
+<!--
+Fokus auf Verständnis, nicht auf Programmierung
+Hands-On jede Woche: Selbst ausprobieren
+Ziel: Einblick in die Denkweise von Software-Entwicklern
+-->
+
+---
+
+# Kursübersicht
+
+**5 Termine:**
+
+| # | Datum | Thema |
+|---|-------|-------|
+| 1 | 19.12.2025 | Bits, Bytes, Zeichenkodierung & Audio |
+| 2 | 09.01.2026 | Bild- & Video-Kompression |
+| 3 | 23.01.2026 | Speichermedien & Schnittstellen |
+| 4 | 30.01.2026 | Distribution, APIs & Zukunft |
+| 5 | TBA | Vertiefung & offene Fragen |
+
+**Format:** Theorie + Hands-On (30-40 Min pro Termin)
+
+<!--
+Nicht nur theoretische Inhalte
+Praktische Übungen jede Woche
+Medienwissenschaftler:innen, nicht Informatiker:innen
+-->
+

slides/2025-12-19-termin-1-grundlagen-text-audio.md

@@ -1,3 +1,38 @@
+---
+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 -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg fit opacity:0.4](./assets/digital-landscape.png)
+
+# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+
+**223015c** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+**Wintersemester 2025/26**
+
+[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+
 ---
 
 <!-- _class: lead -->
@@ -5,11 +40,12 @@
 # Termin 1 – 19.12.2025
 ## Grundlagen, Text & Audio
 
+
 ---
 
 ![bg right:40%](./assets/matrix-code.png)
 
-# Mysterium
+# WTF!?
 
 ```
 89 50 4E 47 0D 0A 1A 0A
@@ -28,6 +64,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,13 +84,13 @@ 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
-Alles Digitale basiert darauf
-Transistoren in CPUs: Milliarden Bits schalten Millionen Mal pro Sekunde
+BIT = Binary Digit (Binärziffer) – 1948 von Claude Shannon geprägt
+Shannon war Mathematiker bei Bell Labs – begründete die Informationstheorie
+Warum binär? Elektronische Schaltungen haben nur 2 Zustände: Strom/kein Strom
+Das ist physikalisch am stabilsten (weniger Fehler als 3 oder 10 Zustände)
+Alles Digitale basiert auf dieser simplen Idee: AN oder AUS
+Transistoren in modernen CPUs: Milliarden davon, schalten Milliarden Mal pro Sekunde
 -->
 
 ---
@@ -59,9 +107,25 @@ Transistoren in CPUs: Milliarden Bits schalten Millionen Mal pro Sekunde
 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) – ein "Bissen" Information
+Warum genau 8 Bits?
+- 1964: IBM System/360 setzte diesen Standard (vorher: 6-Bit, 7-Bit Systeme)
+- ASCII (1963) brauchte 7 Bit für 128 Zeichen
+- 8 Bit = praktisch für Hardware (Zweierpotenz: 2³ = 8)
+- 8 Bit = 2 Hexadezimalziffern (elegante Darstellung)
+Eselsbrücke: 1 Byte = 1 Buchstabe (in ASCII/UTF-8 für einfache Zeichen)
+Rechnung: 2×2×2×2×2×2×2×2 = 256 mögliche Kombinationen
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/grayscale-gradient.png)
+
+<!--
+256 Graustufen: 0 = Schwarz, 255 = Weiß
 -->
 
 ---
@@ -73,12 +137,28 @@ Jedes Bit kann 0 oder 1 sein
 - **256 Lautstärkestufen**
 - **Zahlen 0-255** (oder -128 bis +127)
 
-![bg left:40%](./assets/grayscale-gradient.png)
+<!--
+256 = die "magische Zahl" bei 8 Bit
+Alltagsbeispiele:
+- Lautstärkeregler (0 = stumm, 255 = max)
+- Helligkeitswerte in Bildern (0 = schwarz, 255 = weiß)
+- Alter in Jahren (0-255 reicht für Menschen locker)
+- Zeichen (ASCII erweitert: 256 Buchstaben/Symbole)
+Für Farbbilder: 3 Bytes pro Pixel (R, G, B)
+Jeder Kanal 0-255 → 256³ = 16.777.216 Farben ("True Color")
+Das menschliche Auge kann etwa 10 Millionen Farben unterscheiden
+→ 24 Bit reicht für fotorealistische Bilder
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/rgb-color-model.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
+RGB = Additive Farbmischung (Bildschirme)
 -->
 
 ---
@@ -91,18 +171,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ß
-
-![bg right:40%](./assets/rgb-color-model.png)
+**Beispiele:**
+`FF 00 00` = Rot | `00 FF 00` = Grün
+`00 00 00` = Schwarz | `FF FF FF` = Weiß
 
 <!--
-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,6 +208,9 @@ Chaos: Verschiedene Standards für verschiedene Sprachen
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/ascii-table.png)
 
 <!--
@@ -166,12 +247,12 @@ Umlaute: "ä" = 2 Bytes, Chinesisch: 3 Bytes, Emoji: 4 Bytes
 
 # Beispiel: Bytes zählen
 
-**Text:** `"Why the fuck braucht 💩 4 Bytes?!"`
+**Text:** `"Why the heck braucht 💩 4 Bytes?!"`
 
 ```
 W h y   → je 1 Byte (4 Bytes)
 t h e   → je 1 Byte (4 Bytes)
-f u c k → je 1 Byte (4 Bytes)
+h e c k → je 1 Byte (4 Bytes)
         → 1 Byte (Leerzeichen)
 b r a u c h t → je 1 Byte (7 Bytes)
         → 1 Byte
@@ -191,6 +272,19 @@ UTF-8-Kodierung: Variable Länge spart Speicher bei ASCII
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg fit](./assets/hex-binary-table.png)
+
+<!--
+Hex-Binär-Umrechnungstabelle
+Jede Hex-Ziffer = 4 Bits
+-->
+
+---
+
 # Hexadezimal: Lesbarkeit
 
 **Binär ist unleserlich:**
@@ -199,16 +293,25 @@ 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)
-
 <!--
-Hex = Shortcut für Menschen, nicht für Computer
-Computer denken binär, wir lesen hex
-1 Byte = 2 Hex-Ziffern (00-FF)
-Hex-Editor: Standard-Tool für Dateianalyse
+Warum Hexadezimal statt Dezimal?
+- Binär ist zu lang: 01001101 (8 Zeichen für 1 Byte)
+- Dezimal passt nicht: 77 (unregelmäßig, manchmal 2, manchmal 3 Ziffern)
+- Hex ist perfekt: 4D (immer 2 Ziffern pro Byte)
+
+Trick: 4 Bits = 1 Hex-Ziffer (weil 2⁴ = 16)
+0000 = 0, 0001 = 1, ..., 1001 = 9, 1010 = A, 1011 = B, ..., 1111 = F
+
+"Nibble" = 4 Bits = halbes Byte (Wortspiel: nibble = knabbern, byte = beißen)
+
+Umrechnung üben:
+- 0x4D = 4×16 + 13 = 64 + 13 = 77 (Dezimal) = Buchstabe "M" in ASCII
+- 0xFF = 15×16 + 15 = 255 (Maximum für 1 Byte)
+
+Hex-Editor = Standard-Tool für Dateianalyse und Reverse Engineering
 -->
 
 ---
@@ -222,18 +325,35 @@ 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)
-Dateiendungen können lügen, Magic Numbers nicht
+Magic Number = Signatur/Fingerabdruck am Dateianfang
+Wozu? Betriebssystem erkennt Dateityp unabhängig von Dateiendung
+
+Geschichte: "PK" bei ZIP = Phil Katz (Erfinder von PKZip, 1989)
+Fun Fact: DOCX, XLSX, PPTX, ODT = alles ZIP-Archive mit XML-Inhalt!
+→ Einfach .zip anhängen und entpacken!
+
+Dateien OHNE Magic Number: TXT, HTML, CSS, JSON, XML
+→ Diese sind reiner Text, kein binäres Format
+→ Werden anhand Inhalt/Endung erkannt
+
+Sicherheits-Aspekt:
+virus.exe → bild.jpg umbenennen täuscht nur Menschen
+Windows vertraut der Endung, aber Tools wie "file" (Linux) lesen Magic Number
+→ Nie Dateien von Fremden öffnen, nur weil sie harmlos aussehen!
 -->
 
 ---
 
-![bg](./assets/hexeditor-screenshot.png)
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg fit](./assets/hexeditor-screenshot.png)
 
 <!--
 Hex-Editor-Screenshot mit PNG-Datei
@@ -245,11 +365,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)
@@ -259,28 +380,31 @@ Tool: HxD (Windows), Hex Fiend (Mac), xxd (Linux)
 
 <!--
 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**
 
 1. Öffne im Hex-Editor
-2. Screenshot der ersten 16 Bytes
-3. Identifiziere Magic Number
-4. Poste im Forum: Format + kurze Beschreibung
+2. Schau dir die ersten 16 Bytes an
+3. Identifiziere die Magic Number (falls vorhanden)
+4. Nächste Woche: Kurze Diskussion
 
-**Bonus:** Finde Datei ohne Magic Number in Standard-Listen
+**Bonus:** Finde Datei ohne Magic Number
 
 <!--
-Selbstständiges Arbeiten
-Forum: Peer-Learning, gegenseitige Hilfe
-Bonus: Spornt Neugierige an
+Selbstständiges Experimentieren
+Keine Abgabe, nur zum Ausprobieren
+Nächste Woche kurz besprechen
 -->
 
 ---
@@ -292,6 +416,9 @@ Bonus: Spornt Neugierige an
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/cassette-ipod.png)
 
 <!--
@@ -326,9 +453,19 @@ Streaming? Unmöglich.
 
 ---
 
-# Zwei Philosophien
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
-![bg right:50%](./assets/compression-types.png)
+![bg fit](./assets/compression-types.png)
+
+<!--
+Lossless vs. Lossy Kompression
+Visualisierung der beiden Philosophien
+-->
+
+---
+
+# Zwei Philosophien
 
 **Lossless (Verlustfrei):**
 - Original exakt wiederherstellbar
@@ -349,6 +486,7 @@ Trade-off: Größe vs. Qualität
 ---
 
 # Lossless: Run-Length Encoding
+## Lauflängenkodierung
 
 **Original:**
 ```
@@ -363,7 +501,8 @@ 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 +531,21 @@ Kompression = Modell der menschlichen Wahrnehmung
 
 ---
 
-![bg](./assets/karlheinz-brandenburg.jpg)
+![bg right:50%](./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
+- Hörte "Tom's Diner" über 10.000 Mal
 
 <!--
-Foto: Karlheinz Brandenburg
 Fraunhofer IIS Erlangen
-"Vater der MP3"
+Forschung dauerte über 10 Jahre
+Perfektionist: Jeder Hörtest musste bestehen
 -->
 
 ---
@@ -424,12 +572,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
 -->
 
 ---
@@ -469,11 +627,29 @@ Unwichtige Frequenzen reduzieren
 Lossless-Kompression der Restdaten
 
 <!--
-FFT = Fast Fourier Transform
-Psychoakustik = Modell des menschlichen Gehörs
-Quantisierung = Wo passiert Datenverlust
-Huffman = Finaler Effizienz-Boost (lossless)
-MP3 ist KEIN einfaches "Kleiner machen" – es simuliert dein Gehirn
+MP3-Kompression in 4 Schritten (vereinfacht):
+
+1. FFT (Fast Fourier Transform)
+   - Wandelt Schallwellen in Frequenzen um
+   - Wie ein Prisma Licht in Farben zerlegt
+
+2. Psychoakustisches Modell
+   - Fragt: "Was kann ein Mensch NICHT hören?"
+   - Maskierungseffekte: Lauter Ton verdeckt leisen daneben
+   - Hohe/tiefe Frequenzen werden schlechter wahrgenommen
+
+3. Quantisierung (hier passiert der Datenverlust!)
+   - Unwichtige Frequenzen werden "grob" gespeichert
+   - Wichtige Frequenzen bleiben genau
+   - Wie JPEG: Details entfernen, wo es nicht auffällt
+
+4. Huffman-Coding (verlustfrei)
+   - Häufige Muster = kurze Codes
+   - Seltene Muster = lange Codes
+   - Finaler Effizienz-Boost
+
+MP3 ist KEIN einfaches "Kleiner machen"
+→ Es simuliert, wie dein Gehirn Musik verarbeitet!
 -->
 
 ---
@@ -499,7 +675,11 @@ Aber: Diminishing Returns ab 256 kbps
 
 ---
 
-![bg](./assets/audio-spectrogram.png)
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg fit](./assets/audio-spectrogram.png)
 
 <!--
 Spektrogramm-Vergleich
@@ -531,13 +711,22 @@ Das Pferd war aus dem Stall
 
 ---
 
-![bg](./assets/napster-interface.png)
+![bg right:50% fit](./assets/napster-interface.png)
+
+# 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
 
 <!--
-Napster-Screenshot (1999)
-P2P-Filesharing für MP3s
-Shawn Fanning, 19 Jahre alt
-80 Millionen User in 2 Jahren
+P2P = Peer-to-Peer
+Shawn Fanning gründete Napster als Student
+RIAA verklagte Napster, Schließung 2001
+Aber: LimeWire, Kazaa, BitTorrent folgten
 -->
 
 ---
@@ -601,34 +790,55 @@ 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)**
 
 1. Exportiere: WAV, MP3 320 kbps, MP3 128 kbps
-2. Notiere: Dateigrößen, Höreindrücke
-3. Poste im Forum: Screenshot + Reflexion
+2. Höre die Unterschiede (Kopfhörer!)
+3. Vergleiche die Dateigrößen
 
 **Bonus:** Niedrigste Bitrate finden, bei der du keinen Unterschied hörst
 
 <!--
-WAV = Unkomprimiert (Referenz)
+Selbstständiges Experimentieren
+Keine Abgabe, nur zum Ausprobieren
 Goldenes Ohr: Manche hören Unterschied, manche nicht
-Psychoakustik in Aktion: Subjektive Wahrnehmung
 -->
 
+---
+
+<!-- _class: lead -->
+
+# Fragen & Diskussion
+
+**Kontakt:** mail@librete.ch
+**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/
+

slides/2026-01-09-termin-2-bild-audio-video.md

@@ -1,3 +1,38 @@
+---
+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 -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg fit opacity:0.4](./assets/digital-landscape.png)
+
+# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+
+**223015c** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+**Wintersemester 2025/26**
+
+[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+
 ---
 
 <!-- _class: lead -->
@@ -7,6 +42,9 @@
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/photo-comparison.png)
 
 <!--
@@ -80,6 +118,9 @@ Dateierweiterungen: .jpg, .jpeg, .jfif (alle gleich)
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/jpeg-artifacts.png)
 
 <!--
@@ -153,6 +194,9 @@ Photoshop "Save for Web": Standard ist 60
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/gif-animation.png)
 
 <!--
@@ -236,6 +280,9 @@ JPEG bleibt dominant (Kompatibilität!)
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/instagram-quality-loss.png)
 
 <!--
@@ -318,6 +365,9 @@ Forum: Austausch über Ergebnisse
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/netflix-4k.png)
 
 <!-- 
@@ -370,6 +420,9 @@ Ein MP4 kann H.264, H.265 oder AV1 enthalten
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/container-codec-diagram.png)
 
 <!-- 
@@ -430,6 +483,9 @@ Wenn du vorspulst: Sucht nach nächstem I-Frame
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/iframe-pframe-diagram.png)
 
 <!-- 
@@ -512,6 +568,9 @@ Fragmentierung verzögert Adoption
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/youtube-vp9.png)
 
 <!-- 
@@ -545,6 +604,9 @@ Hardware-Decoder erst ab ~2016 (langsame Adoption)
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/av1-logo.png)
 
 <!-- 
@@ -606,6 +668,9 @@ Player misst Bandbreite, wechselt live
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/streaming-quality-switch.png)
 
 <!-- 
@@ -684,3 +749,23 @@ 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/
+

slides/2026-01-23-termin-3-speichermedien-schnittstellen.md

@@ -1,3 +1,38 @@
+---
+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 -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg fit opacity:0.4](./assets/digital-landscape.png)
+
+# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+
+**223015b** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+**Wintersemester 2025/26**
+
+[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+
 ---
 
 <!-- _class: lead -->
@@ -7,6 +42,9 @@
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/hdd-ssd-comparison.png)
 
 <!--
@@ -58,6 +96,9 @@ Windows: NTFS, macOS: APFS, Linux: ext4
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/directory-tree.png)
 
 <!-- 
@@ -221,6 +262,9 @@ Sicherheit: APFS/NTFS für Verschlüsselung
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/backup-disaster.png)
 
 <!-- 
@@ -313,6 +357,9 @@ Syncthing: P2P-Sync, kein zentraler Server
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/bit-rot.png)
 
 <!-- 
@@ -343,6 +390,9 @@ Offene Standards: PDF/A, TIFF, TXT überleben
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/lto-tape.png)
 
 <!-- 
@@ -374,6 +424,9 @@ Cold Storage: Daten, die selten gebraucht werden
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/m-disc.png)
 
 <!-- 
@@ -401,6 +454,9 @@ Nachteil: Teurer (~5€ vs. 0,50€ normale Blu-ray)
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/dna-helix.png)
 
 <!-- 
@@ -481,6 +537,9 @@ Bonus: Wer's macht, hat echten Nutzen
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/cable-mess.png)
 
 <!-- 
@@ -510,6 +569,9 @@ Ohne Standards: Jedes Gerät braucht eigenes Kabel
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/pc-back-1990s.png)
 
 <!-- 
@@ -565,6 +627,9 @@ USB 4 basiert auf Thunderbolt 3 (Intel spendete Spec)
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/usb-c-cables.png)
 
 <!-- 
@@ -651,6 +716,9 @@ EU-Regulierung: Beschriftung gefordert (aber nicht umgesetzt)
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/thunderbolt-logo.png)
 
 <!-- 
@@ -684,6 +752,9 @@ Zertifizierung: Blitz-Logo = echt Thunderbolt
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/hdmi-cable.png)
 
 <!-- 
@@ -722,6 +793,9 @@ Lizenzgebühren: ~$10.000 Jahresgebühr + $0,15/Gerät
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/displayport-cable.png)
 
 <!-- 
@@ -778,6 +852,9 @@ Politik & Marketing entscheiden
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/hdcp-warning.png)
 
 <!-- 
@@ -814,6 +891,9 @@ Classic DRM-Problem: Nervt Zahlende, nicht Piraten
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/ethernet-cable.png)
 
 <!-- 
@@ -849,6 +929,9 @@ PoE = Power over Ethernet (Strom + Daten)
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/vintage-ports.png)
 
 <!-- 
@@ -916,3 +999,23 @@ 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/
+

slides/2026-01-30-termin-4-distribution-apis-zukunft.md

@@ -1,3 +1,38 @@
+---
+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 -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg fit opacity:0.4](./assets/digital-landscape.png)
+
+# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+
+**223015b** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+**Wintersemester 2025/26**
+
+[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+
 ---
 
 <!-- _class: lead -->
@@ -1816,3 +1851,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/
+

slides/2026-xx-xx-termin-5-vertiefung-offene-fragen.md

@@ -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/
+

slides/_frontmatter.md

@@ -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>
-

slides/_intro.md

@@ -1,83 +0,0 @@
-![bg fit](./assets/digital-landscape.png)
-
-<!-- Startbild: Futuristisches Netzwerk, Datenströme, oder digitale Landschaft -->
-
----
-
-# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
-
-Modul "Technik 1" – 1. Semester
-Digital- und Medienwirtschaft
-Hochschule der Medien Stuttgart
-
-**Wintersemester 2025/26**
-
----
-
-# Über mich
-
-**Michael Czechowski**
-
-- Softwareentwickler & IT-Berater
-- Schwerpunkte: Cloud, AI, Web-Technologien, Systemarchitektur, Open Source
-- Hintergrund: Philosophie & Informatik
-- Kontakt: czechowski@hdm-stuttgart.de
-
-<!--
-Kurze Vorstellung
-Praxisbezug betonen
-Fragen jederzeit willkommen
--->
-
----
-
-# Termine
-
-| Datum | Zeit | Thema |
-|-------|------|-------|
-| 19.12.2025 | 14:15 – 17:30 | Grundlagen, Text & Audio |
-| 09.01.2026 | 14:15 – 17:30 | Bild- & Videoformate |
-| 23.01.2026 | 14:15 – 17:30 | Speichermedien & Schnittstellen |
-| 30.01.2026 | 14:15 – 17:30 | Distribution, APIs & Zukunft |
-| TBA | 14:15 – 17:30 | Vertiefung (wird bekannt gegeben) |
-
-**Ort:** HdM Stuttgart, Nobelstraße 10
-
----
-
-# Kurze Umfrage
-
-**Bitte Hand heben:**
-
-1. Wer hat schon mal ein Video komprimiert/konvertiert?
-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? 
-
-<!--
-Niveau der Gruppe einschätzen
-Keine falschen Antworten
-Zeigt, wo wir starten
--->
-
----
-
-# Kursübersicht
-
-**Ziel:** Verstehen, wie digitale Medien technisch funktionieren – von Bits bis zu globalen Distributionsnetzwerken
-
-**5 Termine:**
-- **19.12.** Bits, Bytes, Zeichenkodierung & Audio-Kompression
-- **09.01.** Bild- & Video-Kompression
-- **23.01.** Speichermedien & Hardware-Schnittstellen
-- **30.01.** Distribution, APIs, Metadaten & Zukunft
-- **TBA** Vertiefung & offene Fragen
-
-<!--
-Medienwissenschaftler:innen, nicht Informatiker:innen
-Fokus: Warum funktionieren Dinge so? Welche Konflikte stecken dahinter?
-Hands-On jede Woche (30-40 Min)
-Narrative statt Faktenlisten
--->
-

slides/_outro.md

@@ -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"
--->
-

slides/materials/wtf1

@@ -0,0 +1 @@
+Dies ist eine einfache Textdatei. Keine Magic Number hier! Plaintext hat keinen Standard-Header.