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
improve termin 1 to match termin 0 quality
2025-12-18 01:22:37 +01:00 · 2025-12-17 21:57:53 +01:00 · 2025-12-17 20:46:53 +01:00 · 2025-12-17 20:26:04 +01:00 · 2025-12-17 20:22:44 +01:00 · 2025-12-17 19:53:51 +01:00
9 changed files with 272 additions and 223 deletions
@@ -62,3 +62,4 @@ Desktop.ini
 !build/*.html
 *.pdf
 index.md.bak
+hdm-lehrauftrag-uebersicht.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

@@ -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)
@@ -18,21 +18,28 @@ h2 {
 </style>

 <!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->

-![bg fit](./assets/digital-landscape.png)
-
-<!-- Startbild: Futuristisches Netzwerk, Datenströme, oder digitale Landschaft -->
-
---
+![bg fit opacity:0.4](./assets/digital-landscape.png)

 # Dateiformate, Schnittstellen, Speichermedien & Distributionswege

-Modul "Technik 1" – 1. Semester
+**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
@@ -42,7 +49,7 @@ Hochschule der Medien Stuttgart
 - Softwareentwickler & IT-Berater
 - Schwerpunkte: Cloud, AI, Web-Technologien, Systemarchitektur, Open Source
 - Hintergrund: Philosophie & Informatik
- Kontakt: michael.czechowski@lehre.dhbw-stuttgart.de
+- Kontakt: mail@librete.ch

 <!--
 Kurze Vorstellung
@@ -52,20 +59,6 @@ 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:**
@@ -86,24 +79,72 @@ HTML/CSS-Frage: Viele kennen Hex-Codes aus Webdesign

 ---

-# Kursübersicht
+# Warum dieses Modul?

-**Ziel:** Technische Grundlagen verstehen, um mit Entwicklungsteams, Kunden und Projektpartnern auf Augenhöhe zusammenarbeiten zu können.
+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.

-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
- **09.01.** Bild- & Video-Kompression
- **23.01.** Speichermedien & Hardware-Schnittstellen
- **30.01.** Distribution, APIs, Metadaten & Zukunft
- **TBA** Vertiefung & offene Fragen
+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":
-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)
+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
 -->

@@ -18,8 +18,20 @@ h2 {
 </style>

 <!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->

-![bg fit](./assets/digital-landscape.png)
+![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)

 ---

@@ -28,6 +40,7 @@ h2 {
 # Termin 1 – 19.12.2025
 ## Grundlagen, Text & Audio

+
 ---

 ![bg right:40%](./assets/matrix-code.png)
@@ -73,8 +86,11 @@ 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
+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
 -->

 ---
@@ -91,11 +107,14 @@ Transistoren in CPUs: Milliarden Bits schalten Millionen Mal pro Sekunde
 2⁸ = **256 Möglichkeiten** (0-255)

 <!--
-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
+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
 -->

 ---
@@ -103,7 +122,7 @@ Rechnung: 2×2×2×2×2×2×2×2 = 256
 <!-- _header: '' -->
 <!-- _footer: '' -->

-![bg](./assets/grayscale-gradient.png)
+![bg fit](./assets/grayscale-gradient.png)

 <!--
 256 Graustufen: 0 = Schwarz, 255 = Weiß
@@ -119,9 +138,16 @@ Rechnung: 2×2×2×2×2×2×2×2 = 256
 - **Zahlen 0-255** (oder -128 bis +127)

 <!--
-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
+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
 -->

 ---
@@ -129,7 +155,7 @@ R=0-255, G=0-255, B=0-255 → 256³ = 16,7 Millionen Farben
 <!-- _header: '' -->
 <!-- _footer: '' -->

-![bg](./assets/rgb-color-model.png)
+![bg fit](./assets/rgb-color-model.png)

 <!--
 RGB = Additive Farbmischung (Bildschirme)
@@ -221,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
@@ -248,8 +274,9 @@ UTF-8-Kodierung: Variable Länge spart Speicher bei ASCII

 <!-- _header: '' -->
 <!-- _footer: '' -->
+<!-- _backgroundColor: #000 -->

-![bg](./assets/hex-binary-table.png)
+![bg fit](./assets/hex-binary-table.png)

 <!--
 Hex-Binär-Umrechnungstabelle
@@ -270,12 +297,21 @@ Jede Hex-Ziffer = 4 Bits
 0-9, A-F (10=A, 11=B, ..., 15=F)

 <!--
-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
+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
 -->

 ---
@@ -294,20 +330,30 @@ Hex-Editor: Standard-Tool für Dateianalyse
 **Achtung:** TXT, HTML, CSS haben **keine** Magic Number!

 <!--
-Magic Number = Signature am Dateianfang
-"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
+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!
 -->

 ---

 <!-- _header: '' -->
 <!-- _footer: '' -->
+<!-- _backgroundColor: #000 -->

-![bg](./assets/hexeditor-screenshot.png)
+![bg fit](./assets/hexeditor-screenshot.png)

 <!--
 Hex-Editor-Screenshot mit PNG-Datei
@@ -349,16 +395,16 @@ Ziel: Hex-Dump lesen lernen, Dateiformate verstehen
 **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
 -->

 ---
@@ -410,7 +456,7 @@ Streaming? Unmöglich.
 <!-- _header: '' -->
 <!-- _footer: '' -->

-![bg](./assets/compression-types.png)
+![bg fit](./assets/compression-types.png)

 <!--
 Lossless vs. Lossy Kompression
@@ -580,12 +626,30 @@ Unwichtige Frequenzen reduzieren
 **4. Huffman-Coding**
 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!
 -->

 ---
@@ -613,8 +677,9 @@ Aber: Diminishing Returns ab 256 kbps

 <!-- _header: '' -->
 <!-- _footer: '' -->
+<!-- _backgroundColor: #000 -->

-![bg](./assets/audio-spectrogram.png)
+![bg fit](./assets/audio-spectrogram.png)

 <!--
 Spektrogramm-Vergleich
@@ -646,7 +711,7 @@ Das Pferd war aus dem Stall

 ---

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

 # Napster (1999)

@@ -746,15 +811,15 @@ Alternative: Spek (spek.cc) – reiner Spektrogramm-Viewer
 **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
 -->

 ---
@@ -763,7 +828,7 @@ Psychoakustik in Aktion: Subjektive Wahrnehmung

 # Fragen & Diskussion

-**Kontakt:** michael.czechowski@lehre.dhbw-stuttgart.de
+**Kontakt:** mail@librete.ch
 **Folien:** Online verfügbar unter https://hdm.librete.ch

 ---
@@ -18,8 +18,20 @@ h2 {
 </style>

 <!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->

-![bg fit](./assets/digital-landscape.png)
+![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)

 ---

@@ -18,8 +18,20 @@ h2 {
 </style>

 <!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->

-![bg fit](./assets/digital-landscape.png)
+![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)

 ---

@@ -18,8 +18,20 @@ h2 {
 </style>

 <!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->

-![bg fit](./assets/digital-landscape.png)
+![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)

 ---
Author	SHA1	Message	Date
libretech	75c8476043	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	2025-12-18 01:22:37 +01:00
libretech	3a0cb91391	improve termin 1 to match termin 0 quality - frontpage: black bg, title, 223015b, git link - email: mail@librete.ch (both files) - remove forum references (no forum for 60 students) - remove screenshot requirements (just experiment) - simplify fleißaufgaben (no submission, discuss next week) - deepen speaker notes for bits/bytes beginners: - bit (shannon, why binary) - byte (why 8 bits, ibm history) - 256 states (everyday examples) - hexadecimal (why hex, conversion practice) - magic numbers (security aspect) - mp3 (4 steps simplified)	2025-12-17 21:57:53 +01:00
libretech	8eac5d9dc8	fix intro front: black bg, clickable git link	2025-12-17 20:46:53 +01:00
libretech	274deabeb7	add hdm-lehrauftrag-uebersicht.md to gitignore	2025-12-17 20:26:04 +01:00
libretech	02116f320e	update intro with modulhandbuch content, add course info to readme	2025-12-17 20:22:44 +01:00
libretech	7cd962bbf6	apply feedback to termin 1: wtf theme, 50/50 images, speaker notes	2025-12-17 19:53:51 +01:00
libretech	c0aff39030	update image list: mark termin 1 done, fix ascii/grayscale prompts	2025-12-17 19:53:50 +01:00
libretech	e76f8914bd	add wtf mystery files for hands-on exercise	2025-12-17 19:53:50 +01:00
libretech	06c710d1d6	add termin 0 intro slides with modulhandbuch ziel	2025-12-17 19:53:50 +01:00
libretech	f078c74ddf	update termin 5 slides with expanded content	2025-12-17 18:07:57 +01:00
libretech	e0bf6eac64	update termin 4 slides with expanded content	2025-12-17 18:07:57 +01:00
libretech	b491b2ed38	update termin 3 slides with expanded content	2025-12-17 18:07:57 +01:00
libretech	45869a1e11	update termin 2 slides with expanded content	2025-12-17 18:07:57 +01:00
libretech	b39ed32cad	update termin 1 slides with expanded content	2025-12-17 18:07:57 +01:00
libretech	9dacec48b8	remove unused partial slide files	2025-12-17 18:07:43 +01:00
libretech	aa6f3792c8	move assets to slides/assets for relative image paths	2025-12-17 18:07:30 +01:00
libretech	c5c2c10877	update makefile to use slides/assets and direct dev server	2025-12-17 18:07:23 +01:00
libretech	18cd988fc6	add termin 1 images - matrix-code, lightbulb-onoff, grayscale-gradient - rgb-color-model, ascii-table, hex-binary-table - hexeditor-screenshot, cassette-ipod, compression-types - audio-spectrogram, napster-interface - karlheinz-brandenburg.jpg, suzanne-vega.jpg (real photos)	2025-12-17 13:43:03 +01:00
libretech	acac4ace89	change image references from .jpg to .png - update IMAGE_LIST.md and all slide files - keep karlheinz-brandenburg.jpg and suzanne-vega.jpg as .jpg (real photos) - keep code examples unchanged (exiftool, HTML examples)	2025-12-17 13:26:05 +01:00
libretech	747adbd7a3	simplify makefile for modular slide workflow - single 'make dev' serves build/ with file picker ui - 'make assemble' concatenates header + intro + termin + outro - remove individual dev-1/dev-2 targets (marp ui handles file selection) - delete completed PLAN-split-slides.md	2025-12-14 20:34:46 +01:00
libretech	32a8efb92d	split index.md into modular slide files - extract _frontmatter.md, _intro.md, _outro.md as shared components - create separate files per termin with date-topic naming convention: 2025-12-19-termin-1-grundlagen-text-audio.md 2026-01-09-termin-2-bild-audio-video.md 2026-01-23-termin-3-speichermedien-schnittstellen.md 2026-01-30-termin-4-distribution-apis-zukunft.md 2026-xx-xx-termin-5-vertiefung-offene-fragen.md - keep index.md.bak as backup (gitignored)	2025-12-14 20:34:20 +01:00
libretech	660ef3426c	add marp skill and slide split plan	2025-12-14 19:17:20 +01:00