update termin 1 slides with expanded content

2025-12-17 18:07:57 +01:00
parent 9dacec48b8
commit b39ed32cad
1 changed files with 135 additions and 26 deletions
@@ -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 -->
@@ -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,7 @@ 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
 -->
@@ -66,6 +97,17 @@ Jedes Bit kann 0 oder 1 sein

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/grayscale-gradient.png)
+
+<!--
+256 Graustufen: 0 = Schwarz, 255 = Weiß
+-->
+
+---
+
 # Was kann man mit 256 Zuständen machen?

 - **256 Zeichen** (Buchstaben, Zahlen, Symbole)
@@ -73,9 +115,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 +123,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**
@@ -96,10 +147,7 @@ R=0-255, G=0-255, B=0-255 → 256³ = 16,7 Millionen Farben
 `00 FF 00` = Grün
 `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
@@ -130,9 +178,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 +242,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:**
@@ -202,9 +265,7 @@ UTF-8-Kodierung: Variable Länge spart Speicher bei ASCII
 **Jede Hex-Ziffer = 4 Bits**
 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)
@@ -233,9 +294,12 @@ Dateiendungen können lügen, Magic Numbers nicht

 ---

+<!-- _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)
@@ -292,9 +356,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 +393,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 +417,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
@@ -392,9 +469,12 @@ Kompression = Modell der menschlichen Wahrnehmung

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/karlheinz-brandenburg.jpg)

-<!-- 
+<!--
 Foto: Karlheinz Brandenburg
 Fraunhofer IIS Erlangen
 "Vater der MP3"
@@ -424,9 +504,12 @@ Patent lief 2017 aus

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/suzanne-vega.jpg)

-<!-- 
+<!--
 Suzanne Vega – "Tom's Diner" (1987)
 Der erste Song, der als MP3 kodiert wurde
 Karlheinz Brandenburg hörte ihn tausende Male
@@ -499,9 +582,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,9 +617,12 @@ Das Pferd war aus dem Stall

 ---

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

-<!-- 
+<!--
 Napster-Screenshot (1999)
 P2P-Filesharing für MP3s
 Shawn Fanning, 19 Jahre alt
@@ -626,9 +715,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:** 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/
+