223015b 01-grundlagen: encoding+hex strukturiert — encoding-strang (problem→ASCII→unicode→byte zählen) und darstellungs-strang (WTF!?→8-bit→hex→demos) getrennt statt verschachtelt, 3 brücken-folien (ASCII reicht für englisch / byte für byte als advance organizer / hex ist überall), byte-für-byte demo (3 fenster bin/hex/text mit binärdatei-vs-textdatei-marker), lv-original-vs-fake bild ersetzt leere folie zwischen lossless-titles, 'besser erkennen' → 'besser erkennbar', singular Byte plural in eigener brücke korrigiert

slides/223015b/01-grundlagen-text-audio.md

@@ -713,14 +713,19 @@ Kinofilm in üblicher Länge (~120min) über **5 TB (Terabyte)**
 
 ---
 
-<!--
+<!-- _header: "" -->
-Was ist überhaupt KOMPRESSION?
+<!-- _footer: "" -->
+<!-- _paginate: false -->
 
-- Luftdruck in Auto/Fahrradreifen
+![bg](./assets/lv-original-vs-fake.jpg)
-- LNG Flüssiggas
+
-- Tripsdrill, Disneyland
+<!--
-- Oper/Theater/Telenovela
+Analogie: Original vs Fake-Tasche
-- Cola Sirup für den Sodastream
+
+- Links: Original — jedes Detail erhalten (Lossless)
+- Rechts: Fälschung — sieht ähnlich aus, Details verloren (Lossy)
+- Weitere Analogien: Luftdruck im Reifen, LNG, Tripsdrill-Schlange,
+  Telenovela-Zusammenfassung, Sodastream-Sirup
 -->
 
 ---
@@ -800,7 +805,7 @@ Komprimiert: 5A3B8C            (6 Zeichen)
 * Das Ohr hört nicht alle Frequenzen (hohe und tiefe Töne) gleich gut
 * Laute Töne überdecken leise Töne (Maskierung)
 * Das Auge sieht nicht alle Farbnuancen gleich scharf
-* Luminanz (Helligkeit/Dunkelheit) besser erkennen als Chrominanz (Farbunterschiede/Farbigkeit)
+* Luminanz (Helligkeit/Dunkelheit) besser erkennbar als Chrominanz (Farbunterschiede/Farbigkeit)
 * und Vieles mehr
 
 <!--
@@ -1145,6 +1150,66 @@ Sog. RGB Tuple (geordnete endliche Liste)
 
 ---
 
+<!-- _class: lead -->
+
+# ASCII
+## One *Zeichensatz* to rule them all
+
+<!--
+WARUM 7 BIT STATT 8?
+- 1963: Fernschreiber (Teletype) arbeiteten mit 7-Bit-Codes
+- Das 8. Bit diente der Paritätsprüfung (Fehlererkennung bei Übertragung)
+- Speicher war kostspielig: jedes eingesparte Bit zählte
+- 128 Zeichen galten als ausreichend für den englischsprachigen Raum
+
+KULTURHISTORISCHER KONTEXT:
+- "American Standard Code for Information Interchange" (1963)
+- Entwickelt für US-amerikanische Bedürfnisse
+- Keine Unterstützung für: Umlaute (ä, ö, ü), ß, diakritische Zeichen (é, ñ, ç)
+- Nicht-lateinische Schriftsysteme nicht berücksichtigt
+- Führte zu zahlreichen inkompatiblen Erweiterungen (ISO-8859-1, Windows-1252, etc.)
+
+WARUM NOCH HEUTE RELEVANT?
+- UTF-8 vollständig ASCII-kompatibel (Zeichen 0–127 identisch)
+- Internetprotokolle basieren auf ASCII: HTTP-Header, SMTP, URLs
+- Programmiersprachen: Schlüsselwörter und Syntax sind ASCII
+- Ein 60 Jahre alter Standard, der durch Kompatibilitätszwänge fortbesteht
+
+HISTORISCHE RANDNOTIZ:
+- Das @-Zeichen wurde nachträglich aufgenommen
+- Heute unverzichtbar für E-Mail-Adressen weltweit
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/ascii-table-colored.png)
+
+<!--
+US-ASCII (1967) Code Chart
+- 7 Bit = 128 Zeichen
+- Erste 32: Steuerzeichen (nicht druckbar)
+- Zeichen 32–126: Druckbar (Buchstaben, Ziffern, Satzzeichen)
+- Keine Umlaute, kein ñ, kein é
+-->
+
+---
+
+<!-- _class: lead -->
+
+# ASCII reicht für Englisch.
+## Aber was ist mit *ä, é, 中, 🌸*?
+
+<!--
+Brücke: ASCII löst das Problem nur für englischen Text.
+Sobald Umlaute, Akzente, asiatische Schriften oder Emoji ins Spiel kommen,
+sprengt es den 7-Bit-Raum. Lösung: Unicode + UTF-8.
+-->
+
+---
+
 # Unicode: Ein Standard für alle
 
 **Unicode (1991):** Jedes Schriftsystem der Welt
@@ -1194,14 +1259,35 @@ Sog. RGB Tuple (geordnete endliche Liste)
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-![bg fit](./assets/demos/byte-nibble-hex.png)
+![bg fit](./assets/demos/byte-fuer-byte.png)
 
 <!--
-Kernidee: jedes Byte lässt sich sauber in zwei 4-Bit-Hälften (Nibbles) zerlegen. Jede Hälfte hat 2⁴ = 16 Zustände – und genau 16 Symbole hat Hex (0-F). Deshalb passt Hex perfekt: 1 Nibble = 1 Hex-Ziffer, 1 Byte = 2 Hex-Ziffern. Keine krumme Umrechnung.
+Brücke / Strang-Wechsel:
+Bis hier: Wie speichern wir Buchstaben als Byte? (Encoding)
+Ab jetzt: Wie schauen Byte aus, wenn man die Datei roh anstarrt? (Darstellung)
+
+Aussage der Grafik:
+- Fenster 1 (Bin): rohe 0/1 — was tatsächlich auf der Platte steht
+- Fenster 2 (Hex): 2 Ziffern pro Byte — kompakt lesbar
+- Fenster 3 (Text): ASCII-Zeichen wenn ≤ 126, sonst ✗
+- Schon ein Byte > 126 → Binärdatei (z.B. PNG, MP3, ZIP)
+- Nur Werte ≤ 126 → reine Textdatei (z.B. .txt, .csv, .md)
 -->
 
 ---
 
+![bg right:40%](./assets/matrix-code.png)
+
+# WTF!?
+
+```
+89 50 4E 47 0D 0A 1A 0A
+00 00 00 0D 49 48 44 52
+00 00 01 90 00 00 01 2C
+```
+
+---
+
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
@@ -1252,6 +1338,17 @@ Warum gerade 8 Bit?
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
+![bg fit](./assets/demos/byte-nibble-hex.png)
+
+<!--
+Kernidee: jedes Byte lässt sich sauber in zwei 4-Bit-Hälften (Nibbles) zerlegen. Jede Hälfte hat 2⁴ = 16 Zustände – und genau 16 Symbole hat Hex (0-F). Deshalb passt Hex perfekt: 1 Nibble = 1 Hex-Ziffer, 1 Byte = 2 Hex-Ziffern. Keine krumme Umrechnung.
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg fit](./assets/demos/hex-dec-table.png)
 
 <!--
@@ -1293,117 +1390,6 @@ Dieselben 8 Byte (PNG-Dateianfang: 89 50 4E 47 0D 0A 1A 0A) — drei Perspektive
 
 ---
 
-# Wo begegnet Ihnen Hex-Code?
-
-| Kontext | Beispiel |
-|---------|----------|
-| CSS-Farben | `#FF5733` |
-| MAC-Adressen | `00:1A:2B:3C:4D:5E` |
-| Fehlercodes | `0x80070005` |
-| Speicheradressen | `0xA04F20` |
-| Unicode | `U+00E4` (ä) |
-| Datei-Signaturen | `89 50 4E 47` (PNG) |
-
-<!--
-Präfixe:
-- 0x = "das ist Hexadezimal" (C, JavaScript, Python)
-- U+ = Unicode-Codepoint (Standard für Zeichenkodierung)
-- # = CSS-Konvention für Farben
-
-ABKÜRZUNGEN:
-- MAC = Media Access Control (eindeutige Hardware-Adresse einer Netzwerkkarte)
-- Unicode = universeller Zeichensatz für alle Schriftsysteme
-
-Speicheradressen erklärt:
-- 64-Bit-System → Adresse hat 64 Bit = 16 Hex-Ziffern
-- Beispiel vollständig: 0x0000000000A04F20 (führende Nullen weggelassen)
-- "0x" = Präfix, sagt nur "jetzt kommt Hex"
-
-Fehlercodes: Windows zeigt diese bei Bluescreens
--->
-
----
-
-# Bit vs. Byte: Die Verwirrung
-
-**1 Byte = 8 Bit** → Bit ÷ 8 = Byte
-
-| Einheit (Bit) | Einheit (Byte) |
-|---------------|----------------|
-| 1 Kbit = 1.000 Bit | 1 KB = 1.000 Byte = 8.000 Bit |
-| 1 Mbit = 1.000.000 Bit | 1 MB = 1.000.000 Byte = 8 Mbit |
-| 1 Gbit = 1 Mrd. Bit | 1 GB = 1 Mrd. Byte = 8 Gbit |
-
-100 Mbit/s Bandbreite = **12,5 MB/s** Downloadrate
-
-<!--
-Bits = kleines b, Bytes = großes B
-Internetanbieter: Mbit/s (klingt größer!)
-100 Mbit/s ÷ 8 = 12,5 MB/s
-Marketing - 100 klingt besser als 12,5
--->
-
----
-
-<!-- _class: lead -->
-
-# ASCII
-## One *Zeichensatz* to rule them all
-
-<!--
-WARUM 7 BIT STATT 8?
-- 1963: Fernschreiber (Teletype) arbeiteten mit 7-Bit-Codes
-- Das 8. Bit diente der Paritätsprüfung (Fehlererkennung bei Übertragung)
-- Speicher war kostspielig: jedes eingesparte Bit zählte
-- 128 Zeichen galten als ausreichend für den englischsprachigen Raum
-
-KULTURHISTORISCHER KONTEXT:
-- "American Standard Code for Information Interchange" (1963)
-- Entwickelt für US-amerikanische Bedürfnisse
-- Keine Unterstützung für: Umlaute (ä, ö, ü), ß, diakritische Zeichen (é, ñ, ç)
-- Nicht-lateinische Schriftsysteme nicht berücksichtigt
-- Führte zu zahlreichen inkompatiblen Erweiterungen (ISO-8859-1, Windows-1252, etc.)
-
-WARUM NOCH HEUTE RELEVANT?
-- UTF-8 vollständig ASCII-kompatibel (Zeichen 0–127 identisch)
-- Internetprotokolle basieren auf ASCII: HTTP-Header, SMTP, URLs
-- Programmiersprachen: Schlüsselwörter und Syntax sind ASCII
-- Ein 60 Jahre alter Standard, der durch Kompatibilitätszwänge fortbesteht
-
-HISTORISCHE RANDNOTIZ:
-- Das @-Zeichen wurde nachträglich aufgenommen
-- Heute unverzichtbar für E-Mail-Adressen weltweit
--->
-
----
-
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg fit](./assets/ascii-table-colored.png)
-
-<!--
-US-ASCII (1967) Code Chart
-- 7 Bit = 128 Zeichen
-- Erste 32: Steuerzeichen (nicht druckbar)
-- Zeichen 32–126: Druckbar (Buchstaben, Ziffern, Satzzeichen)
-- Keine Umlaute, kein ñ, kein é
--->
-
----
-
-![bg right:40%](./assets/matrix-code.png)
-
-# WTF!?
-
-```
-89 50 4E 47 0D 0A 1A 0A
-00 00 00 0D 49 48 44 52
-00 00 01 90 00 00 01 2C
-```
-
----
-
 ![bg right:30%](./assets/matrix-code.png)
 
 # What the HEX-Code
@@ -1463,6 +1449,71 @@ US-ASCII (1967) Code Chart
 
 ---
 
+<!-- _class: lead -->
+
+# Hex ist überall.
+## Schon mal *gesehen*?
+
+<!--
+Brücke vom Theorie-Block zum Alltags-Recall.
+Bis hier: Was ist Hex und wie liest man es?
+Ab jetzt: Wo siehst du Hex in der Praxis (CSS, MAC, Errorcodes, Unicode, Magic Numbers)?
+-->
+
+---
+
+# Wo begegnet Ihnen Hex-Code?
+
+| Kontext | Beispiel |
+|---------|----------|
+| CSS-Farben | `#FF5733` |
+| MAC-Adressen | `00:1A:2B:3C:4D:5E` |
+| Fehlercodes | `0x80070005` |
+| Speicheradressen | `0xA04F20` |
+| Unicode | `U+00E4` (ä) |
+| Datei-Signaturen | `89 50 4E 47` (PNG) |
+
+<!--
+Präfixe:
+- 0x = "das ist Hexadezimal" (C, JavaScript, Python)
+- U+ = Unicode-Codepoint (Standard für Zeichenkodierung)
+- # = CSS-Konvention für Farben
+
+ABKÜRZUNGEN:
+- MAC = Media Access Control (eindeutige Hardware-Adresse einer Netzwerkkarte)
+- Unicode = universeller Zeichensatz für alle Schriftsysteme
+
+Speicheradressen erklärt:
+- 64-Bit-System → Adresse hat 64 Bit = 16 Hex-Ziffern
+- Beispiel vollständig: 0x0000000000A04F20 (führende Nullen weggelassen)
+- "0x" = Präfix, sagt nur "jetzt kommt Hex"
+
+Fehlercodes: Windows zeigt diese bei Bluescreens
+-->
+
+---
+
+# Bit vs. Byte: Die Verwirrung
+
+**1 Byte = 8 Bit** → Bit ÷ 8 = Byte
+
+| Einheit (Bit) | Einheit (Byte) |
+|---------------|----------------|
+| 1 Kbit = 1.000 Bit | 1 KB = 1.000 Byte = 8.000 Bit |
+| 1 Mbit = 1.000.000 Bit | 1 MB = 1.000.000 Byte = 8 Mbit |
+| 1 Gbit = 1 Mrd. Bit | 1 GB = 1 Mrd. Byte = 8 Gbit |
+
+100 Mbit/s Bandbreite = **12,5 MB/s** Downloadrate
+
+<!--
+Bits = kleines b, Bytes = großes B
+Internetanbieter: Mbit/s (klingt größer!)
+100 Mbit/s ÷ 8 = 12,5 MB/s
+Marketing - 100 klingt besser als 12,5
+-->
+
+---
+
 # Magic Numbers
 
 **Dateityp-Identifikation durch erste Bytes**

slides/223015b/assets/demos/byte-fuer-byte.html

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Byte für Byte — drei Brillen</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+    --bin-bg: #0f0f23;
+    --bin-fg: #e5e7eb;
+    --binary-mark: #ef4444;
+    --ascii-ok: #16a34a;
+    --ctrl: #9ca3af;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 28px 32px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.75rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1rem; }
+  .sub code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
+
+  .windows { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; max-width: 1180px; margin: 0 auto; }
+
+  .window { border: 2px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
+  .window-header { background: var(--bg-soft); padding: 10px 14px; border-bottom: 2px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
+  .window-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
+  .window-name { font-size: 1.15rem; font-weight: 700; color: var(--dark); }
+
+  .window-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
+
+  .window.bin .window-body { background: var(--bin-bg); }
+  .window.bin .row { color: var(--bin-fg); font-size: 1.05rem; letter-spacing: 0.04em; }
+
+  .window.hex .row { color: var(--dark); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.06em; }
+
+  .window.text .row { font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
+  .window.text .glyph.printable { color: var(--ascii-ok); }
+  .window.text .glyph.ctrl { color: var(--ctrl); font-size: 1.1rem; }
+  .window.text .glyph.binary { color: var(--binary-mark); }
+  .window.text .note { font-size: 0.78rem; font-weight: 400; color: var(--muted); margin-left: auto; }
+
+  .footnote { margin-top: 24px; max-width: 1100px; margin-left: auto; margin-right: auto; display: flex; gap: 32px; justify-content: center; font-size: 0.95rem; }
+  .legend { display: flex; align-items: center; gap: 8px; }
+  .swatch { display: inline-block; width: 16px; height: 16px; border-radius: 3px; }
+  .swatch.binary { background: #fee2e2; border: 2px solid var(--binary-mark); }
+  .swatch.ascii { background: #dcfce7; border: 2px solid var(--ascii-ok); }
+  .verdict { margin-top: 14px; text-align: center; font-size: 1.05rem; color: var(--dark); }
+  .verdict strong { color: var(--binary-mark); }
+</style>
+</head>
+<body>
+  <h1>Byte für Byte</h1>
+  <div class="sub">Eine Datei — drei Brillen. Beispiel: erste 8 Byte einer PNG-Datei.</div>
+
+  <div class="windows">
+
+    <div class="window bin">
+      <div class="window-header">
+        <div class="window-title">Fenster 1</div>
+        <div class="window-name">Bin · rohe 0 und 1</div>
+      </div>
+      <div class="window-body">
+        <div class="row">10001001</div>
+        <div class="row">01010000</div>
+        <div class="row">01001110</div>
+        <div class="row">01000111</div>
+        <div class="row">00001101</div>
+        <div class="row">00001010</div>
+        <div class="row">00011010</div>
+        <div class="row">00001010</div>
+      </div>
+    </div>
+
+    <div class="window hex">
+      <div class="window-header">
+        <div class="window-title">Fenster 2</div>
+        <div class="window-name">Hex · 2 Ziffern pro Byte</div>
+      </div>
+      <div class="window-body">
+        <div class="row">89</div>
+        <div class="row">50</div>
+        <div class="row">4E</div>
+        <div class="row">47</div>
+        <div class="row">0D</div>
+        <div class="row">0A</div>
+        <div class="row">1A</div>
+        <div class="row">0A</div>
+      </div>
+    </div>
+
+    <div class="window text">
+      <div class="window-header">
+        <div class="window-title">Fenster 3</div>
+        <div class="window-name">Text · ASCII oder ✗ (> 126)</div>
+      </div>
+      <div class="window-body">
+        <div class="row"><span class="glyph binary">✗</span><span class="note">137 &gt; 126</span></div>
+        <div class="row"><span class="glyph printable">P</span><span class="note">80</span></div>
+        <div class="row"><span class="glyph printable">N</span><span class="note">78</span></div>
+        <div class="row"><span class="glyph printable">G</span><span class="note">71</span></div>
+        <div class="row"><span class="glyph ctrl">CR</span><span class="note">13 · Steuerz.</span></div>
+        <div class="row"><span class="glyph ctrl">LF</span><span class="note">10 · Steuerz.</span></div>
+        <div class="row"><span class="glyph ctrl">SUB</span><span class="note">26 · Steuerz.</span></div>
+        <div class="row"><span class="glyph ctrl">LF</span><span class="note">10 · Steuerz.</span></div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="verdict">
+    Mindestens ein Byte mit Wert &gt; 126 → <strong>Binärdatei</strong>. Sonst: reine Textdatei.
+  </div>
+</body>
+</html>