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
This commit is contained in:
@@ -713,14 +713,19 @@ Kinofilm in üblicher Länge (~120min) über **5 TB (Terabyte)**
|
||||
|
||||
---
|
||||
|
||||
<!--
|
||||
Was ist überhaupt KOMPRESSION?
|
||||
<!-- _header: "" -->
|
||||
<!-- _footer: "" -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||
- Luftdruck in Auto/Fahrradreifen
|
||||
- LNG Flüssiggas
|
||||
- Tripsdrill, Disneyland
|
||||
- Oper/Theater/Telenovela
|
||||
- Cola Sirup für den Sodastream
|
||||
|
||||
|
||||
<!--
|
||||
Analogie: Original vs Fake-Tasche
|
||||
|
||||
- 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: '' -->
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
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: '' -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
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)
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
# 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: '' -->
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
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: '' -->
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
@@ -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: '' -->
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
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 é
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
# 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
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
# 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**
|
||||
|
||||
@@ -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 > 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 > 126 → <strong>Binärdatei</strong>. Sonst: reine Textdatei.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
Reference in New Issue
Block a user