public/uni
2
0 Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

branch-coexist: 3 neue decks 223015b-2026 / 223015c-2026 / dhbw-2026 daneben main

Browse Source 
per user-request einen branch der main-content UND rewrite-content trägt — saubere separierung statt symlink/merge-conflict.

struktur:
- slides/<course>/ → main-content restored, eigene assets (kein new-demo-leak)
- slides/<course>-2026/ → rewrite-content, eigene assets (komplett kopiert + new demos)

Makefile: COURSES += 223015b-2026 223015c-2026 dhbw-2026 mit eigenen NAME/KAPITEL/DEPLOY/KLAUSUR-konfig. Klausur für b+c=1, dhbw=leer. Deploy-paths /hdm/223015b-2026 etc.

make build durchlaufen für alle 6 decks, 0 fehler.

dedup: 223015c+dhbw assets identisch in beiden ordnern (kein neu-demos auf b ergänzt). 223015b 86 → 120 files in -2026 (= +34 neue eroeffner/usb-c-drei-achsen/container-vs-codec/etc).
This commit is contained in:
libretech committed 2026-05-14 21:54:15 +02:00
1 parent 6209f9f3a0
commit 351e3dfc23
467 files changed
+32391 -4701
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

slides/223015b-2026/assets/2011-hilbert.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 220 KiB

slides/223015b-2026/assets/8bit-P-character.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

slides/223015b-2026/assets/AV1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

slides/223015b-2026/assets/Asterisk_with_jpg-artefacts.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

slides/223015b-2026/assets/Barn-yuv.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 425 KiB

slides/223015b-2026/assets/Common_chroma_subsampling_ratios_YCbCr_CORRECTED.svg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

slides/223015b-2026/assets/Felis_silvestris_silvestris_small_gradual_decrease_of_quality_-_JPEG_compression.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

slides/223015b-2026/assets/IMG_3617.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

slides/223015b-2026/assets/Posterization_example.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 241 KiB

slides/223015b-2026/assets/addaptive-substractive-colors.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 KiB

slides/223015b-2026/assets/artemis.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

slides/223015b-2026/assets/ascii-table-colored.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 484 KiB

slides/223015b-2026/assets/ascii-table.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

slides/223015b-2026/assets/audio-spectrogram.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

slides/223015b-2026/assets/av1-grammy-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 249 KiB

slides/223015b-2026/assets/av1-grammy.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 388 KiB

slides/223015b-2026/assets/av1-logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

slides/223015b-2026/assets/bittorrent.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

slides/223015b-2026/assets/cassette-ipod.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

slides/223015b-2026/assets/compact-disc-cd.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

slides/223015b-2026/assets/compression-types.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 957 KiB

slides/223015b-2026/assets/container-codec-diagram.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

slides/223015b-2026/assets/demos/aliasing-paar.html
+205
View File
@@ -0,0 +1,205 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Aliasing — derselbe Fehler in zwei Sinnen</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--audio: #ea580c;
--bild: #2563eb;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 30px 40px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: 1.05rem; }
.sub strong { color: var(--dark); }
.pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
max-width: 1200px;
margin: 0 auto;
}
.modality {
border: 2px solid;
border-radius: 12px;
padding: 16px 18px;
background: #fff;
display: flex;
flex-direction: column;
gap: 12px;
}
.modality.audio { border-color: var(--audio); }
.modality.bild { border-color: var(--bild); }
.mod-head { display: flex; justify-content: space-between; align-items: baseline; }
.mod-name { font-size: 1.25rem; font-weight: 700; }
.modality.audio .mod-name { color: var(--audio); }
.modality.bild .mod-name { color: var(--bild); }
.mod-tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.canvas {
background: var(--soft);
border-radius: 8px;
overflow: hidden;
}
.canvas svg { display: block; }
.scene-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scene { display: flex; flex-direction: column; gap: 4px; }
.scene-label {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
}
.scene-cap {
font-size: 0.78rem;
color: var(--muted);
line-height: 1.4;
font-family: ui-monospace, monospace;
}
.scene-cap strong { color: var(--dark); }
.ear-eye {
font-size: 0.86rem;
line-height: 1.5;
color: var(--dark);
}
.ear-eye .arrow { color: var(--hl); font-weight: 700; }
.ear-eye-headline {
font-size: 0.9rem;
font-weight: 700;
}
.modality.audio .ear-eye-headline { color: var(--audio); }
.modality.bild .ear-eye-headline { color: var(--bild); }
.verdict {
margin-top: 22px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 2px solid var(--hl);
border-radius: 12px;
padding: 14px 22px;
}
.verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
.verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
.verdict-a strong { color: var(--hl); }
</style>
</head>
<body>
<h1>Aliasing — derselbe Fehler in zwei Sinnen</h1>
<div class="sub">Was im Ohr <strong>Brummen</strong> macht, macht im Auge <strong>Moiré</strong>. Wurzel: Sampling zu grob.</div>
<div class="pair">
<div class="modality audio">
<div class="mod-head">
<span class="mod-name">Audio</span>
<span class="mod-tag">Unterabtastung</span>
</div>
<div class="scene-pair">
<div class="scene">
<div class="scene-label">Original (18 kHz)</div>
<div class="canvas">
<svg viewBox="0 0 280 80" width="100%" height="80" preserveAspectRatio="none">
<line x1="0" y1="40" x2="280" y2="40" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
<path d="M0,40 Q7,5 14,40 T28,40 T42,40 T56,40 T70,40 T84,40 T98,40 T112,40 T126,40 T140,40 T154,40 T168,40 T182,40 T196,40 T210,40 T224,40 T238,40 T252,40 T266,40 T280,40"
stroke="#ea580c" stroke-width="2" fill="none"/>
</svg>
</div>
<div class="scene-cap">20 Schwingungen<br>schnelle Welle</div>
</div>
<div class="scene">
<div class="scene-label">Bei 22 kHz gesampelt</div>
<div class="canvas">
<svg viewBox="0 0 280 80" width="100%" height="80" preserveAspectRatio="none">
<line x1="0" y1="40" x2="280" y2="40" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
<path d="M0,40 Q7,5 14,40 T28,40 T42,40 T56,40 T70,40 T84,40 T98,40 T112,40 T126,40 T140,40 T154,40 T168,40 T182,40 T196,40 T210,40 T224,40 T238,40 T252,40 T266,40 T280,40"
stroke="#fed7aa" stroke-width="1.2" fill="none"/>
<path d="M0,40 Q70,10 140,40 T280,40"
stroke="#ea580c" stroke-width="2.5" fill="none"/>
</svg>
</div>
<div class="scene-cap"><strong>2 Schwingungen</strong><br>Brumm-Frequenz</div>
</div>
</div>
<div class="ear-eye">
<div class="ear-eye-headline">Was das Ohr hört</div>
Ein schriller 18-kHz-Ton wird zu einem dumpfen 4-kHz-Brumm. Das hohe ist <strong>nicht leiser</strong> — es ist <strong>verloren und falsch ersetzt</strong>.
</div>
</div>
<div class="modality bild">
<div class="mod-head">
<span class="mod-name">Bild</span>
<span class="mod-tag">Moiré-Effekt</span>
</div>
<div class="scene-pair">
<div class="scene">
<div class="scene-label">Original (feine Streifen)</div>
<div class="canvas">
<svg viewBox="0 0 280 80" width="100%" height="80" preserveAspectRatio="none">
<defs>
<pattern id="fine-real" x="0" y="0" width="3" height="80" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="1.5" height="80" fill="#1e3a8a"/>
</pattern>
</defs>
<rect x="0" y="0" width="280" height="80" fill="url(#fine-real)"/>
</svg>
</div>
<div class="scene-cap">93 Linien<br>volle Auflösung</div>
</div>
<div class="scene">
<div class="scene-label">In niedriger DPI gerendert</div>
<div class="canvas">
<svg viewBox="0 0 280 80" width="100%" height="80" preserveAspectRatio="none">
<defs>
<linearGradient id="moire-bands" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#1e3a8a"/>
<stop offset="10%" stop-color="#bfdbfe"/>
<stop offset="20%" stop-color="#1e3a8a"/>
<stop offset="30%" stop-color="#bfdbfe"/>
<stop offset="40%" stop-color="#1e3a8a"/>
<stop offset="50%" stop-color="#bfdbfe"/>
<stop offset="60%" stop-color="#1e3a8a"/>
<stop offset="70%" stop-color="#bfdbfe"/>
<stop offset="80%" stop-color="#1e3a8a"/>
<stop offset="90%" stop-color="#bfdbfe"/>
<stop offset="100%" stop-color="#1e3a8a"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="280" height="80" fill="url(#moire-bands)"/>
</svg>
</div>
<div class="scene-cap"><strong>5 breite Bänder</strong><br>Moiré-Frequenz</div>
</div>
</div>
<div class="ear-eye">
<div class="ear-eye-headline">Was das Auge sieht</div>
Feine Linien sind weg, dafür <strong>breite Streifen</strong>, die nie da waren. Aus 93 Linien werden 5 Bänder — das Bild lügt.
</div>
</div>
</div>
<div class="verdict">
<div class="verdict-q">Aliasing kennt keine Modalität. Es ist ein <strong>mathematischer</strong> Fehler — kein technischer.</div>
<div class="verdict-a">Egal ob Ton, Bild, Video, Radar, GPS — Sampling muss immer mindestens <strong>doppelt</strong> so dicht sein wie das Signal. Sonst tauscht die Realität Frequenzen aus.</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/aliasing-paar.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

slides/223015b-2026/assets/demos/ascii-table.html
+311
View File
@@ -0,0 +1,311 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>ASCII-Tabelle</title>
<style>
:root {
--hl: #1e5f8a;
--dark: #1a1a2e;
--muted: #6b7280;
--border: #cbd5e1;
--bg-soft: #f8fafc;
--c-ctrl: #e5e7eb; /* control */
--c-ctrl-text: #4b5563;
--c-space: #fef3c7; /* space */
--c-punct: #ddd6fe; /* punctuation */
--c-digit: #bfdbfe; /* digits */
--c-upper: #bbf7d0; /* uppercase */
--c-lower: #fed7aa; /* lowercase */
--c-del: #fecaca; /* DEL */
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 18px 24px; }
h1 { text-align: center; margin: 0 0 2px; font-size: 1.5rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 14px; font-size: 0.9rem; }
.sub strong { color: var(--dark); }
.table-wrap { display: flex; justify-content: center; }
table.ascii {
border-collapse: separate;
border-spacing: 3px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
table.ascii th, table.ascii td {
width: 68px;
height: 60px;
padding: 0;
text-align: center;
vertical-align: middle;
border-radius: 5px;
}
table.ascii th {
background: var(--dark); color: #fff;
font-size: 0.78rem;
letter-spacing: 0.05em;
font-weight: 700;
width: 56px;
height: 36px;
}
table.ascii th.row { width: 64px; }
table.ascii th .b { display: block; font-size: 0.68rem; opacity: 0.7; font-weight: 400; margin-top: 2px; letter-spacing: 0.04em; }
table.ascii td {
border: 1px solid var(--border);
position: relative;
}
td .hex { position: absolute; top: 3px; left: 5px; font-size: 0.62rem; color: var(--muted); font-weight: 700; }
td .dec { position: absolute; bottom: 3px; right: 5px; font-size: 0.62rem; color: var(--muted); font-weight: 400; }
td .ch { font-size: 1.45rem; font-weight: 700; line-height: 1; }
td.ctrl .ch { font-size: 0.82rem; font-weight: 700; }
td.ctrl .ch small { display: block; font-size: 0.6rem; font-weight: 400; color: var(--muted); margin-top: 2px; letter-spacing: 0; }
td.ctrl { background: var(--c-ctrl); color: var(--c-ctrl-text); }
td.space { background: var(--c-space); }
td.punct { background: var(--c-punct); }
td.digit { background: var(--c-digit); }
td.upper { background: var(--c-upper); }
td.lower { background: var(--c-lower); }
td.del { background: var(--c-del); color: var(--c-ctrl-text); }
.legend {
margin: 14px auto 0;
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
font-size: 0.85rem;
}
.legend .item { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border); }
.legend .swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border); }
.legend .swatch.ctrl { background: var(--c-ctrl); }
.legend .swatch.space { background: var(--c-space); }
.legend .swatch.punct { background: var(--c-punct); }
.legend .swatch.digit { background: var(--c-digit); }
.legend .swatch.upper { background: var(--c-upper); }
.legend .swatch.lower { background: var(--c-lower); }
.legend .swatch.del { background: var(--c-del); }
.meta-row {
margin-top: 10px;
display: flex; gap: 18px; justify-content: center;
font-size: 0.85rem; color: var(--muted);
}
.meta-row strong { color: var(--dark); }
.meta-row code { background: var(--dark); color: #f8f8f8; padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
</style>
</head>
<body>
<h1>ASCII-Tabelle (1963) · 7 Bit · 128 Zeichen</h1>
<div class="sub">Spalte = High-Nibble (Hex 0–7) · Zeile = Low-Nibble (Hex 0–F) · <strong>Hex</strong> oben, <strong>Dezimal</strong> unten</div>
<div class="table-wrap">
<table class="ascii">
<thead>
<tr>
<th class="row">↓ Low<br>→ High</th>
<th>0<span class="b">0000</span></th>
<th>1<span class="b">0001</span></th>
<th>2<span class="b">0010</span></th>
<th>3<span class="b">0011</span></th>
<th>4<span class="b">0100</span></th>
<th>5<span class="b">0101</span></th>
<th>6<span class="b">0110</span></th>
<th>7<span class="b">0111</span></th>
</tr>
</thead>
<tbody>
<tr>
<th class="row">0<span class="b">0000</span></th>
<td class="ctrl"><span class="hex">00</span><span class="ch">NUL<small>null</small></span><span class="dec">0</span></td>
<td class="ctrl"><span class="hex">10</span><span class="ch">DLE<small>data link esc</small></span><span class="dec">16</span></td>
<td class="space"><span class="hex">20</span><span class="ch">SP<small>space</small></span><span class="dec">32</span></td>
<td class="digit"><span class="hex">30</span><span class="ch">0</span><span class="dec">48</span></td>
<td class="punct"><span class="hex">40</span><span class="ch">@</span><span class="dec">64</span></td>
<td class="upper"><span class="hex">50</span><span class="ch">P</span><span class="dec">80</span></td>
<td class="punct"><span class="hex">60</span><span class="ch">`</span><span class="dec">96</span></td>
<td class="lower"><span class="hex">70</span><span class="ch">p</span><span class="dec">112</span></td>
</tr>
<tr>
<th class="row">1<span class="b">0001</span></th>
<td class="ctrl"><span class="hex">01</span><span class="ch">SOH<small>start hdr</small></span><span class="dec">1</span></td>
<td class="ctrl"><span class="hex">11</span><span class="ch">DC1<small>XON</small></span><span class="dec">17</span></td>
<td class="punct"><span class="hex">21</span><span class="ch">!</span><span class="dec">33</span></td>
<td class="digit"><span class="hex">31</span><span class="ch">1</span><span class="dec">49</span></td>
<td class="upper"><span class="hex">41</span><span class="ch">A</span><span class="dec">65</span></td>
<td class="upper"><span class="hex">51</span><span class="ch">Q</span><span class="dec">81</span></td>
<td class="lower"><span class="hex">61</span><span class="ch">a</span><span class="dec">97</span></td>
<td class="lower"><span class="hex">71</span><span class="ch">q</span><span class="dec">113</span></td>
</tr>
<tr>
<th class="row">2<span class="b">0010</span></th>
<td class="ctrl"><span class="hex">02</span><span class="ch">STX<small>start txt</small></span><span class="dec">2</span></td>
<td class="ctrl"><span class="hex">12</span><span class="ch">DC2</span><span class="dec">18</span></td>
<td class="punct"><span class="hex">22</span><span class="ch">"</span><span class="dec">34</span></td>
<td class="digit"><span class="hex">32</span><span class="ch">2</span><span class="dec">50</span></td>
<td class="upper"><span class="hex">42</span><span class="ch">B</span><span class="dec">66</span></td>
<td class="upper"><span class="hex">52</span><span class="ch">R</span><span class="dec">82</span></td>
<td class="lower"><span class="hex">62</span><span class="ch">b</span><span class="dec">98</span></td>
<td class="lower"><span class="hex">72</span><span class="ch">r</span><span class="dec">114</span></td>
</tr>
<tr>
<th class="row">3<span class="b">0011</span></th>
<td class="ctrl"><span class="hex">03</span><span class="ch">ETX<small>end txt</small></span><span class="dec">3</span></td>
<td class="ctrl"><span class="hex">13</span><span class="ch">DC3<small>XOFF</small></span><span class="dec">19</span></td>
<td class="punct"><span class="hex">23</span><span class="ch">#</span><span class="dec">35</span></td>
<td class="digit"><span class="hex">33</span><span class="ch">3</span><span class="dec">51</span></td>
<td class="upper"><span class="hex">43</span><span class="ch">C</span><span class="dec">67</span></td>
<td class="upper"><span class="hex">53</span><span class="ch">S</span><span class="dec">83</span></td>
<td class="lower"><span class="hex">63</span><span class="ch">c</span><span class="dec">99</span></td>
<td class="lower"><span class="hex">73</span><span class="ch">s</span><span class="dec">115</span></td>
</tr>
<tr>
<th class="row">4<span class="b">0100</span></th>
<td class="ctrl"><span class="hex">04</span><span class="ch">EOT<small>end trans</small></span><span class="dec">4</span></td>
<td class="ctrl"><span class="hex">14</span><span class="ch">DC4</span><span class="dec">20</span></td>
<td class="punct"><span class="hex">24</span><span class="ch">$</span><span class="dec">36</span></td>
<td class="digit"><span class="hex">34</span><span class="ch">4</span><span class="dec">52</span></td>
<td class="upper"><span class="hex">44</span><span class="ch">D</span><span class="dec">68</span></td>
<td class="upper"><span class="hex">54</span><span class="ch">T</span><span class="dec">84</span></td>
<td class="lower"><span class="hex">64</span><span class="ch">d</span><span class="dec">100</span></td>
<td class="lower"><span class="hex">74</span><span class="ch">t</span><span class="dec">116</span></td>
</tr>
<tr>
<th class="row">5<span class="b">0101</span></th>
<td class="ctrl"><span class="hex">05</span><span class="ch">ENQ<small>enquiry</small></span><span class="dec">5</span></td>
<td class="ctrl"><span class="hex">15</span><span class="ch">NAK</span><span class="dec">21</span></td>
<td class="punct"><span class="hex">25</span><span class="ch">%</span><span class="dec">37</span></td>
<td class="digit"><span class="hex">35</span><span class="ch">5</span><span class="dec">53</span></td>
<td class="upper"><span class="hex">45</span><span class="ch">E</span><span class="dec">69</span></td>
<td class="upper"><span class="hex">55</span><span class="ch">U</span><span class="dec">85</span></td>
<td class="lower"><span class="hex">65</span><span class="ch">e</span><span class="dec">101</span></td>
<td class="lower"><span class="hex">75</span><span class="ch">u</span><span class="dec">117</span></td>
</tr>
<tr>
<th class="row">6<span class="b">0110</span></th>
<td class="ctrl"><span class="hex">06</span><span class="ch">ACK<small>ack</small></span><span class="dec">6</span></td>
<td class="ctrl"><span class="hex">16</span><span class="ch">SYN</span><span class="dec">22</span></td>
<td class="punct"><span class="hex">26</span><span class="ch">&amp;</span><span class="dec">38</span></td>
<td class="digit"><span class="hex">36</span><span class="ch">6</span><span class="dec">54</span></td>
<td class="upper"><span class="hex">46</span><span class="ch">F</span><span class="dec">70</span></td>
<td class="upper"><span class="hex">56</span><span class="ch">V</span><span class="dec">86</span></td>
<td class="lower"><span class="hex">66</span><span class="ch">f</span><span class="dec">102</span></td>
<td class="lower"><span class="hex">76</span><span class="ch">v</span><span class="dec">118</span></td>
</tr>
<tr>
<th class="row">7<span class="b">0111</span></th>
<td class="ctrl"><span class="hex">07</span><span class="ch">BEL<small>bell 🔔</small></span><span class="dec">7</span></td>
<td class="ctrl"><span class="hex">17</span><span class="ch">ETB</span><span class="dec">23</span></td>
<td class="punct"><span class="hex">27</span><span class="ch">'</span><span class="dec">39</span></td>
<td class="digit"><span class="hex">37</span><span class="ch">7</span><span class="dec">55</span></td>
<td class="upper"><span class="hex">47</span><span class="ch">G</span><span class="dec">71</span></td>
<td class="upper"><span class="hex">57</span><span class="ch">W</span><span class="dec">87</span></td>
<td class="lower"><span class="hex">67</span><span class="ch">g</span><span class="dec">103</span></td>
<td class="lower"><span class="hex">77</span><span class="ch">w</span><span class="dec">119</span></td>
</tr>
<tr>
<th class="row">8<span class="b">1000</span></th>
<td class="ctrl"><span class="hex">08</span><span class="ch">BS<small>backspace</small></span><span class="dec">8</span></td>
<td class="ctrl"><span class="hex">18</span><span class="ch">CAN</span><span class="dec">24</span></td>
<td class="punct"><span class="hex">28</span><span class="ch">(</span><span class="dec">40</span></td>
<td class="digit"><span class="hex">38</span><span class="ch">8</span><span class="dec">56</span></td>
<td class="upper"><span class="hex">48</span><span class="ch">H</span><span class="dec">72</span></td>
<td class="upper"><span class="hex">58</span><span class="ch">X</span><span class="dec">88</span></td>
<td class="lower"><span class="hex">68</span><span class="ch">h</span><span class="dec">104</span></td>
<td class="lower"><span class="hex">78</span><span class="ch">x</span><span class="dec">120</span></td>
</tr>
<tr>
<th class="row">9<span class="b">1001</span></th>
<td class="ctrl"><span class="hex">09</span><span class="ch">HT<small>tab ⇥</small></span><span class="dec">9</span></td>
<td class="ctrl"><span class="hex">19</span><span class="ch">EM</span><span class="dec">25</span></td>
<td class="punct"><span class="hex">29</span><span class="ch">)</span><span class="dec">41</span></td>
<td class="digit"><span class="hex">39</span><span class="ch">9</span><span class="dec">57</span></td>
<td class="upper"><span class="hex">49</span><span class="ch">I</span><span class="dec">73</span></td>
<td class="upper"><span class="hex">59</span><span class="ch">Y</span><span class="dec">89</span></td>
<td class="lower"><span class="hex">69</span><span class="ch">i</span><span class="dec">105</span></td>
<td class="lower"><span class="hex">79</span><span class="ch">y</span><span class="dec">121</span></td>
</tr>
<tr>
<th class="row">A<span class="b">1010</span></th>
<td class="ctrl"><span class="hex">0A</span><span class="ch">LF<small>↵ newline</small></span><span class="dec">10</span></td>
<td class="ctrl"><span class="hex">1A</span><span class="ch">SUB<small>EOF DOS</small></span><span class="dec">26</span></td>
<td class="punct"><span class="hex">2A</span><span class="ch">*</span><span class="dec">42</span></td>
<td class="punct"><span class="hex">3A</span><span class="ch">:</span><span class="dec">58</span></td>
<td class="upper"><span class="hex">4A</span><span class="ch">J</span><span class="dec">74</span></td>
<td class="upper"><span class="hex">5A</span><span class="ch">Z</span><span class="dec">90</span></td>
<td class="lower"><span class="hex">6A</span><span class="ch">j</span><span class="dec">106</span></td>
<td class="lower"><span class="hex">7A</span><span class="ch">z</span><span class="dec">122</span></td>
</tr>
<tr>
<th class="row">B<span class="b">1011</span></th>
<td class="ctrl"><span class="hex">0B</span><span class="ch">VT</span><span class="dec">11</span></td>
<td class="ctrl"><span class="hex">1B</span><span class="ch">ESC<small>escape</small></span><span class="dec">27</span></td>
<td class="punct"><span class="hex">2B</span><span class="ch">+</span><span class="dec">43</span></td>
<td class="punct"><span class="hex">3B</span><span class="ch">;</span><span class="dec">59</span></td>
<td class="upper"><span class="hex">4B</span><span class="ch">K</span><span class="dec">75</span></td>
<td class="punct"><span class="hex">5B</span><span class="ch">[</span><span class="dec">91</span></td>
<td class="lower"><span class="hex">6B</span><span class="ch">k</span><span class="dec">107</span></td>
<td class="punct"><span class="hex">7B</span><span class="ch">{</span><span class="dec">123</span></td>
</tr>
<tr>
<th class="row">C<span class="b">1100</span></th>
<td class="ctrl"><span class="hex">0C</span><span class="ch">FF<small>form feed</small></span><span class="dec">12</span></td>
<td class="ctrl"><span class="hex">1C</span><span class="ch">FS</span><span class="dec">28</span></td>
<td class="punct"><span class="hex">2C</span><span class="ch">,</span><span class="dec">44</span></td>
<td class="punct"><span class="hex">3C</span><span class="ch">&lt;</span><span class="dec">60</span></td>
<td class="upper"><span class="hex">4C</span><span class="ch">L</span><span class="dec">76</span></td>
<td class="punct"><span class="hex">5C</span><span class="ch">\</span><span class="dec">92</span></td>
<td class="lower"><span class="hex">6C</span><span class="ch">l</span><span class="dec">108</span></td>
<td class="punct"><span class="hex">7C</span><span class="ch">|</span><span class="dec">124</span></td>
</tr>
<tr>
<th class="row">D<span class="b">1101</span></th>
<td class="ctrl"><span class="hex">0D</span><span class="ch">CR<small>carriage</small></span><span class="dec">13</span></td>
<td class="ctrl"><span class="hex">1D</span><span class="ch">GS</span><span class="dec">29</span></td>
<td class="punct"><span class="hex">2D</span><span class="ch">-</span><span class="dec">45</span></td>
<td class="punct"><span class="hex">3D</span><span class="ch">=</span><span class="dec">61</span></td>
<td class="upper"><span class="hex">4D</span><span class="ch">M</span><span class="dec">77</span></td>
<td class="punct"><span class="hex">5D</span><span class="ch">]</span><span class="dec">93</span></td>
<td class="lower"><span class="hex">6D</span><span class="ch">m</span><span class="dec">109</span></td>
<td class="punct"><span class="hex">7D</span><span class="ch">}</span><span class="dec">125</span></td>
</tr>
<tr>
<th class="row">E<span class="b">1110</span></th>
<td class="ctrl"><span class="hex">0E</span><span class="ch">SO</span><span class="dec">14</span></td>
<td class="ctrl"><span class="hex">1E</span><span class="ch">RS</span><span class="dec">30</span></td>
<td class="punct"><span class="hex">2E</span><span class="ch">.</span><span class="dec">46</span></td>
<td class="punct"><span class="hex">3E</span><span class="ch">&gt;</span><span class="dec">62</span></td>
<td class="upper"><span class="hex">4E</span><span class="ch">N</span><span class="dec">78</span></td>
<td class="punct"><span class="hex">5E</span><span class="ch">^</span><span class="dec">94</span></td>
<td class="lower"><span class="hex">6E</span><span class="ch">n</span><span class="dec">110</span></td>
<td class="punct"><span class="hex">7E</span><span class="ch">~</span><span class="dec">126</span></td>
</tr>
<tr>
<th class="row">F<span class="b">1111</span></th>
<td class="ctrl"><span class="hex">0F</span><span class="ch">SI</span><span class="dec">15</span></td>
<td class="ctrl"><span class="hex">1F</span><span class="ch">US</span><span class="dec">31</span></td>
<td class="punct"><span class="hex">2F</span><span class="ch">/</span><span class="dec">47</span></td>
<td class="punct"><span class="hex">3F</span><span class="ch">?</span><span class="dec">63</span></td>
<td class="upper"><span class="hex">4F</span><span class="ch">O</span><span class="dec">79</span></td>
<td class="punct"><span class="hex">5F</span><span class="ch">_</span><span class="dec">95</span></td>
<td class="lower"><span class="hex">6F</span><span class="ch">o</span><span class="dec">111</span></td>
<td class="del"><span class="hex">7F</span><span class="ch">DEL</span><span class="dec">127</span></td>
</tr>
</tbody>
</table>
</div>
<div class="legend">
<div class="item"><span class="swatch ctrl"></span>Steuerzeichen (0–31)</div>
<div class="item"><span class="swatch space"></span>Leerzeichen (32)</div>
<div class="item"><span class="swatch punct"></span>Satzzeichen</div>
<div class="item"><span class="swatch digit"></span>Ziffern (48–57)</div>
<div class="item"><span class="swatch upper"></span>Großbuchstaben (65–90)</div>
<div class="item"><span class="swatch lower"></span>Kleinbuchstaben (97–122)</div>
<div class="item"><span class="swatch del"></span>DEL (127)</div>
</div>
<div class="meta-row">
<span><strong>Beispiel:</strong> <code>A</code> = Hex <code>41</code> = Dez <code>65</code> = Bin <code>0100&nbsp;0001</code></span>
<span><strong>Trick:</strong> Ziffern <code>0–9</code> liegen bei <code>30–39</code> · <code>'A'+1='B'</code> · Groß ↔ Klein: Bit 5 togglen</span>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/byte-flow.html
+180
View File
@@ -0,0 +1,180 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Byte-Fluss: Bit → Hex → ASCII</title>
<style>
:root {
--hl: #d63384;
--dark: #1a1a2e;
--muted: #6b7280;
--border: #cbd5e1;
--bg-soft: #f8fafc;
--byte-border: #94a3b8;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 22px 28px; }
h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 18px; font-size: 0.95rem; }
.stage { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 920px; margin: 0 auto; }
.file {
width: 100%; box-sizing: border-box;
border: 2px solid var(--dark);
border-radius: 10px;
background: var(--bg-soft);
overflow: hidden;
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.file .head {
background: var(--dark); color: #fff; padding: 8px 14px;
font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
display: flex; justify-content: space-between; align-items: center;
}
.file .head .name { font-family: ui-monospace, monospace; }
.file .head .meta { font-weight: 400; opacity: 0.7; text-transform: none; letter-spacing: 0; font-size: 0.85em; }
.file .body { padding: 12px 14px; }
.row-bytes { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: nowrap; }
.row-bytes:last-child { margin-bottom: 0; }
.byte-bin {
border: 1px solid var(--byte-border);
border-radius: 4px;
padding: 4px 7px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.92rem;
font-weight: 700;
background: #fff;
letter-spacing: 0.04em;
}
.byte-hex {
border: 1px solid var(--byte-border);
border-radius: 4px;
padding: 6px 0;
font-family: ui-monospace, monospace;
font-size: 1.1rem;
font-weight: 700;
background: #fff;
min-width: 88px;
text-align: center;
}
.byte-ascii {
border: 1px solid var(--byte-border);
border-radius: 4px;
padding: 6px 0;
font-family: ui-monospace, monospace;
font-size: 1.2rem;
font-weight: 700;
background: #fff;
min-width: 88px;
text-align: center;
}
.byte-ascii.np { color: var(--muted); font-style: italic; }
.truncate { color: var(--muted); font-family: ui-monospace, monospace; padding: 4px 6px; font-weight: 700; align-self: center; }
.arrow-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
.arrow {
width: 0; height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-top: 14px solid var(--hl);
}
.arrow-label {
font-size: 0.78rem; color: var(--hl); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
}
.legend {
margin-top: 12px;
display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
font-size: 0.85rem; color: var(--muted);
}
.legend strong { color: var(--dark); }
.legend code { background: var(--bg-soft); border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
</style>
</head>
<body>
<h1>1 Byte = 8 Bit = 2 Hex = 1 ASCII-Zeichen</h1>
<div class="sub">Dieselbe Datei — dieselben Byte, drei Schreibweisen. Jeder Rahmen = ein Byte.</div>
<div class="stage">
<!-- Stage 1: Bitstream -->
<div class="file">
<div class="head"><span class="name">datei.bin</span><span class="meta">Roh-Bit · 8 Bit pro Rahmen</span></div>
<div class="body">
<div class="row-bytes">
<span class="byte-bin">01001000</span><span class="byte-bin">01100101</span><span class="byte-bin">01101100</span><span class="byte-bin">01101100</span><span class="byte-bin">01101111</span><span class="byte-bin">00101100</span><span class="byte-bin">00100000</span><span class="byte-bin">01010111</span>
</div>
<div class="row-bytes">
<span class="byte-bin">01101111</span><span class="byte-bin">01110010</span><span class="byte-bin">01101100</span><span class="byte-bin">01100100</span><span class="byte-bin">00100001</span><span class="byte-bin">00100000</span><span class="byte-bin">01001000</span><span class="byte-bin">01101111</span>
</div>
<div class="row-bytes">
<span class="byte-bin">01110111</span><span class="byte-bin">00100000</span><span class="byte-bin">01100001</span><span class="byte-bin">01110010</span><span class="byte-bin">01100101</span><span class="byte-bin">00100000</span><span class="byte-bin">01111001</span><span class="byte-bin">01101111</span>
</div>
<div class="row-bytes">
<span class="byte-bin">01110101</span><span class="byte-bin">00111111</span><span class="byte-bin">00001010</span><span class="truncate">… (weitere Byte)</span>
</div>
</div>
</div>
<div class="arrow-stack">
<div class="arrow-label">je 8 Bit → 2 Hex-Ziffern</div>
<div class="arrow"></div>
</div>
<!-- Stage 2: Hex -->
<div class="file">
<div class="head"><span class="name">datei.hex</span><span class="meta">Hex-Sicht · 2 Hex-Ziffern pro Rahmen</span></div>
<div class="body">
<div class="row-bytes">
<span class="byte-hex">48</span><span class="byte-hex">65</span><span class="byte-hex">6C</span><span class="byte-hex">6C</span><span class="byte-hex">6F</span><span class="byte-hex">2C</span><span class="byte-hex">20</span><span class="byte-hex">57</span>
</div>
<div class="row-bytes">
<span class="byte-hex">6F</span><span class="byte-hex">72</span><span class="byte-hex">6C</span><span class="byte-hex">64</span><span class="byte-hex">21</span><span class="byte-hex">20</span><span class="byte-hex">48</span><span class="byte-hex">6F</span>
</div>
<div class="row-bytes">
<span class="byte-hex">77</span><span class="byte-hex">20</span><span class="byte-hex">61</span><span class="byte-hex">72</span><span class="byte-hex">65</span><span class="byte-hex">20</span><span class="byte-hex">79</span><span class="byte-hex">6F</span>
</div>
<div class="row-bytes">
<span class="byte-hex">75</span><span class="byte-hex">3F</span><span class="byte-hex">0A</span><span class="truncate">…</span>
</div>
</div>
</div>
<div class="arrow-stack">
<div class="arrow-label">je 1 Byte → 1 Zeichen</div>
<div class="arrow"></div>
</div>
<!-- Stage 3: ASCII -->
<div class="file">
<div class="head"><span class="name">datei.txt</span><span class="meta">Text-Sicht · 1 ASCII-Zeichen pro Rahmen</span></div>
<div class="body">
<div class="row-bytes">
<span class="byte-ascii">H</span><span class="byte-ascii">e</span><span class="byte-ascii">l</span><span class="byte-ascii">l</span><span class="byte-ascii">o</span><span class="byte-ascii">,</span><span class="byte-ascii np">␣</span><span class="byte-ascii">W</span>
</div>
<div class="row-bytes">
<span class="byte-ascii">o</span><span class="byte-ascii">r</span><span class="byte-ascii">l</span><span class="byte-ascii">d</span><span class="byte-ascii">!</span><span class="byte-ascii np">␣</span><span class="byte-ascii">H</span><span class="byte-ascii">o</span>
</div>
<div class="row-bytes">
<span class="byte-ascii">w</span><span class="byte-ascii np">␣</span><span class="byte-ascii">a</span><span class="byte-ascii">r</span><span class="byte-ascii">e</span><span class="byte-ascii np">␣</span><span class="byte-ascii">y</span><span class="byte-ascii">o</span>
</div>
<div class="row-bytes">
<span class="byte-ascii">u</span><span class="byte-ascii">?</span><span class="byte-ascii np">↵</span><span class="truncate">…</span>
</div>
</div>
</div>
<div class="legend">
<span><code>␣</code> = Leerzeichen (0x20)</span>
<span><code>↵</code> = Zeilenumbruch (0x0A, nicht druckbar)</span>
<span><strong>Byte ändern sich nicht.</strong> Nur die Anzeige.</span>
</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/byte-flow.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

slides/223015b-2026/assets/demos/byte-fuer-byte.html
+117
View File
@@ -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>
slides/223015b-2026/assets/demos/byte-fuer-byte.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

slides/223015b-2026/assets/demos/byte-nibble-hex.html
+185
View File
@@ -0,0 +1,185 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Byte → Nibble → Hex</title>
<style>
:root {
--hl: #d63384;
--dark: #1a1a2e;
--muted: #6b7280;
--border: #cbd5e1;
--bg-soft: #f8fafc;
}
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.55rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
.stage { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.level { display: flex; flex-direction: column; align-items: center; }
.label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 600; }
/* Level 1: whole byte */
.byte {
display: flex;
gap: 4px;
padding: 8px 14px;
border: 2px solid var(--dark);
border-radius: 8px;
background: var(--bg-soft);
}
.byte .bit { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.3rem; font-weight: 700; padding: 4px 8px; min-width: 22px; text-align: center; }
.byte .sep { width: 2px; background: var(--hl); margin: 2px 6px; border-radius: 2px; }
/* Split arrows */
.split { display: flex; justify-content: space-between; width: 360px; margin: 2px 0; }
.split .arrow {
width: 0; height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 12px solid var(--hl);
}
/* Level 2: two nibbles */
.nibbles { display: flex; gap: 80px; }
.nibble {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 10px 14px;
border: 2px solid var(--hl);
border-radius: 8px;
background: #fff;
}
.nibble .bits { display: flex; gap: 4px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
.nibble .bits span { padding: 2px 6px; min-width: 20px; text-align: center; }
.nibble .meta { font-size: 0.78rem; color: var(--muted); }
.single-arrow {
width: 0; height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 12px solid var(--hl);
margin: 2px 0;
}
/* Level 3: hex digits */
.hex-digits { display: flex; gap: 80px; }
.hex-digit {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 8px 22px;
border: 2px solid var(--dark);
border-radius: 8px;
background: var(--dark);
color: var(--hl);
}
.hex-digit .digit { font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 800; line-height: 1; }
.hex-digit .meta { font-size: 0.72rem; color: #f3f4f6; opacity: 0.7; }
/* Merge down to byte */
.merge {
display: flex; justify-content: center; margin-top: 2px;
}
.merge-v {
display: grid;
grid-template-columns: 60px 60px;
justify-content: center;
align-items: center;
}
.merge-v .line {
height: 20px;
border-right: 2px solid var(--hl);
}
.merge-v .line.l { border-right: none; border-left: 2px solid var(--hl); }
.bottom-bar { height: 2px; background: var(--hl); width: 120px; }
/* Final result */
.result {
margin-top: 14px;
padding: 14px 22px;
background: #fef3f8;
border-left: 4px solid var(--hl);
border-radius: 4px;
font-size: 1.05rem;
text-align: center;
max-width: 640px;
}
.result code { background: var(--dark); color: var(--hl); padding: 2px 8px; border-radius: 4px; font-family: ui-monospace, monospace; font-weight: 700; }
.result strong { color: var(--hl); }
.math {
margin-top: 10px;
font-size: 0.95rem;
color: var(--dark);
text-align: center;
}
.math .eq { font-family: ui-monospace, monospace; font-weight: 700; }
</style>
</head>
<body>
<h1>1 Byte → 2 Nibble → 2 Hex-Ziffern</h1>
<div class="sub">Jedes Byte lässt sich sauber halbieren – und 4 Bit passen exakt auf eine Hex-Ziffer.</div>
<div class="stage">
<!-- Level 1 -->
<div class="level">
<div class="label">1 Byte · 8 Bit · 2⁸ = 256 Werte</div>
<div class="byte">
<span class="bit">0</span><span class="bit">1</span><span class="bit">0</span><span class="bit">0</span>
<span class="sep"></span>
<span class="bit">1</span><span class="bit">1</span><span class="bit">0</span><span class="bit">1</span>
</div>
</div>
<div class="split">
<div class="arrow"></div>
<div class="arrow"></div>
</div>
<!-- Level 2 -->
<div class="level">
<div class="label">2 Nibble · je 4 Bit · 2⁴ = 16 Werte</div>
<div class="nibbles">
<div class="nibble">
<div class="bits"><span>0</span><span>1</span><span>0</span><span>0</span></div>
<div class="meta">= 4 (dez)</div>
</div>
<div class="nibble">
<div class="bits"><span>1</span><span>1</span><span>0</span><span>1</span></div>
<div class="meta">= 13 (dez)</div>
</div>
</div>
</div>
<div class="split">
<div class="arrow"></div>
<div class="arrow"></div>
</div>
<!-- Level 3 -->
<div class="level">
<div class="label">2 Hex-Ziffern · Symbole 0–F</div>
<div class="hex-digits">
<div class="hex-digit">
<div class="digit">4</div>
<div class="meta">Nibble → 1 Ziffer</div>
</div>
<div class="hex-digit">
<div class="digit">D</div>
<div class="meta">13 → D</div>
</div>
</div>
</div>
<div class="result">
<code>01001101</code> (bin) &nbsp;=&nbsp; <code>4D</code> (hex) &nbsp;=&nbsp; <strong>77</strong> (dez) &nbsp;=&nbsp; <strong>"M"</strong> (ASCII)
</div>
<div class="math">
<span class="eq">16 × 16 = 256</span> &nbsp;·&nbsp; <span class="eq">2⁴ × 2⁴ = 2⁸</span> &nbsp;·&nbsp; Darum passt Hex so gut zu Bytes.
</div>
</div>
</body>
</html>
</content>
</invoke>
slides/223015b-2026/assets/demos/byte-nibble-hex.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

slides/223015b-2026/assets/demos/container-vs-codec.html
+172
View File
@@ -0,0 +1,172 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Container ≠ Codec</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--container: #2563eb;
--video: #7c3aed;
--audio: #ea580c;
--subs: #16a34a;
--meta: #94a3b8;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 28px 40px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.05rem; }
.sub strong { color: var(--dark); }
.scene {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
max-width: 1200px;
margin: 0 auto;
}
.container-box {
border: 3px dashed var(--container);
border-radius: 14px;
padding: 14px 16px 18px;
background: #fff;
position: relative;
}
.container-tag {
position: absolute;
top: -12px;
left: 18px;
background: #fff;
padding: 0 10px;
font-family: ui-monospace, monospace;
font-size: 0.78rem;
font-weight: 700;
color: var(--container);
}
.container-label {
text-align: center;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
margin-bottom: 10px;
}
.track {
display: grid;
grid-template-columns: 90px 1fr;
gap: 12px;
align-items: center;
background: var(--soft);
border-left: 4px solid;
border-radius: 6px;
padding: 9px 14px;
margin-bottom: 6px;
}
.track.video { border-left-color: var(--video); }
.track.audio { border-left-color: var(--audio); }
.track.subs { border-left-color: var(--subs); }
.track.meta { border-left-color: var(--meta); }
.track-label {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.track.video .track-label { color: var(--video); }
.track.audio .track-label { color: var(--audio); }
.track.subs .track-label { color: var(--subs); }
.track.meta .track-label { color: var(--meta); }
.codec-pill {
display: inline-block;
font-family: ui-monospace, monospace;
font-size: 0.82rem;
background: #fff;
border: 1px solid var(--border);
padding: 2px 9px;
border-radius: 4px;
color: var(--dark);
}
.verdict {
margin-top: 22px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 2px solid var(--hl);
border-radius: 12px;
padding: 14px 22px;
}
.verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
.verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
.verdict-a strong { color: var(--hl); }
.verdict-a code { font-family: ui-monospace, monospace; background: var(--soft); padding: 1px 5px; border-radius: 4px; }
</style>
</head>
<body>
<h1>Container ≠ Codec</h1>
<div class="sub">Die <strong>Hülle</strong> sagt nichts darüber, <strong>wie</strong> der Inhalt komprimiert wurde.</div>
<div class="scene">
<div class="container-box">
<span class="container-tag">.mp4</span>
<div class="container-label">Datei A — älterer Stand</div>
<div class="track video">
<span class="track-label">Video</span>
<span><span class="codec-pill">H.264 / AVC</span> · 1080p · 8 Mbit/s</span>
</div>
<div class="track audio">
<span class="track-label">Audio</span>
<span><span class="codec-pill">AAC</span> · 192 kbit/s · Stereo</span>
</div>
<div class="track subs">
<span class="track-label">Untertitel</span>
<span><span class="codec-pill">TTML</span> · de + en</span>
</div>
<div class="track meta">
<span class="track-label">Metadaten</span>
<span>Titel · Dauer · Datum · Bitrate</span>
</div>
</div>
<div class="container-box">
<span class="container-tag">.mp4</span>
<div class="container-label">Datei B — modern</div>
<div class="track video">
<span class="track-label">Video</span>
<span><span class="codec-pill">AV1</span> · 4K · 25 Mbit/s</span>
</div>
<div class="track audio">
<span class="track-label">Audio</span>
<span><span class="codec-pill">Opus</span> · 128 kbit/s · 5.1 Surround</span>
</div>
<div class="track subs">
<span class="track-label">Untertitel</span>
<span><span class="codec-pill">WebVTT</span> · de + en + ja</span>
</div>
<div class="track meta">
<span class="track-label">Metadaten</span>
<span>Titel · Dauer · Datum · HDR-Info</span>
</div>
</div>
</div>
<div class="verdict">
<div class="verdict-q">Gleiche Endung. Anderes Innenleben.</div>
<div class="verdict-a"><strong>Container</strong> = Verpackung (<code>.mp4</code>, <code>.mkv</code>, <code>.webm</code>). <strong>Codec</strong> = Komprimierer (H.264 / AV1 / AAC / Opus). <strong>Tool:</strong> <code>mediainfo &lt;datei&gt;</code> zeigt beides.</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/container-vs-codec.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

slides/223015b-2026/assets/demos/drei-dateien.html
+200
View File
@@ -0,0 +1,200 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Drei Dateien — dasselbe Innenleben</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--foto: #2563eb;
--audio: #ea580c;
--pdf: #7c3aed;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 32px 40px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 28px; font-size: 1.05rem; }
.sub strong { color: var(--dark); }
.files {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 22px;
max-width: 1200px;
margin: 0 auto;
}
.file {
border: 2px solid;
border-radius: 12px;
padding: 16px 18px;
background: #fff;
display: flex;
flex-direction: column;
gap: 12px;
}
.file.foto { border-color: var(--foto); }
.file.audio { border-color: var(--audio); }
.file.pdf { border-color: var(--pdf); }
.file-head { display: flex; justify-content: space-between; align-items: baseline; }
.file-name { font-size: 1.2rem; font-weight: 700; }
.file.foto .file-name { color: var(--foto); }
.file.audio .file-name { color: var(--audio); }
.file.pdf .file-name { color: var(--pdf); }
.file-ext { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--muted); }
.preview {
border-radius: 8px;
border: 1px solid var(--border);
overflow: hidden;
display: block;
height: 130px;
background: var(--soft);
}
.hex-strip {
background: #0f0f23;
border-radius: 6px;
padding: 8px 10px;
font-family: ui-monospace, monospace;
font-size: 0.78rem;
line-height: 1.6;
color: #cbd5e1;
overflow: hidden;
}
.hex-strip .magic { color: #fff; font-weight: 700; padding: 0 2px; border-radius: 2px; }
.hex-strip.foto-magic .magic { background: var(--foto); }
.hex-strip.audio-magic .magic { background: var(--audio); }
.hex-strip.pdf-magic .magic { background: var(--pdf); }
.hex-label {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
font-weight: 700;
margin-bottom: 2px;
}
.magic-caption {
font-size: 0.78rem;
color: var(--muted);
text-align: center;
font-family: ui-monospace, monospace;
}
.magic-caption .magic-word {
color: var(--dark);
font-weight: 700;
}
.verdict {
margin-top: 26px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 2px solid var(--hl);
border-radius: 12px;
padding: 14px 22px;
}
.verdict-q { font-size: 1.15rem; font-weight: 700; color: var(--hl); }
.verdict-a { font-size: 0.95rem; color: var(--dark); margin-top: 4px; }
.verdict-a strong { color: var(--hl); }
</style>
</head>
<body>
<h1>Drei Dateien — dasselbe Innenleben</h1>
<div class="sub">Außen <strong>völlig verschieden</strong>. Innen reden alle dieselbe Sprache: <strong>Byte für Byte</strong>.</div>
<div class="files">
<div class="file foto">
<div class="file-head">
<span class="file-name">Foto</span>
<span class="file-ext">.png</span>
</div>
<svg class="preview" viewBox="0 0 220 130" preserveAspectRatio="xMidYMid slice">
<defs>
<linearGradient id="sky-f" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fde68a"/>
<stop offset="60%" stop-color="#fb923c"/>
<stop offset="100%" stop-color="#7c3aed"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="220" height="130" fill="url(#sky-f)"/>
<circle cx="160" cy="50" r="18" fill="#fef3c7" opacity="0.95"/>
<path d="M0,95 L40,80 L80,90 L120,72 L160,86 L220,75 L220,130 L0,130 Z" fill="#1e1b4b"/>
<path d="M0,110 L60,100 L120,108 L180,98 L220,105 L220,130 L0,130 Z" fill="#0f172a" opacity="0.7"/>
</svg>
<div>
<div class="hex-label">Erste Bytes der Datei</div>
<div class="hex-strip foto-magic">
<span class="magic">89 50 4E 47</span> 0D 0A 1A 0A 00 00 00 0D 49 48 44 52
</div>
</div>
<div class="magic-caption"><span class="magic-word">50 4E 47</span> = <span class="magic-word">"PNG"</span></div>
</div>
<div class="file audio">
<div class="file-head">
<span class="file-name">Sprachnachricht</span>
<span class="file-ext">.mp3</span>
</div>
<svg class="preview" viewBox="0 0 220 130" preserveAspectRatio="none">
<rect x="0" y="0" width="220" height="130" fill="#0f0f23"/>
<line x1="0" y1="65" x2="220" y2="65" stroke="#374151" stroke-width="1"/>
<path d="M0,65 L8,65 L12,55 L16,75 L20,40 L24,90 L28,30 L32,95 L36,35 L40,90
L48,45 L56,82 L64,50 L72,78 L80,52 L88,75 L96,55 L104,72
L116,58 L128,72 L140,60 L152,70 L168,62 L184,68 L200,64 L220,65
L220,130 L0,130 Z" fill="#fb923c" stroke="#ea580c" stroke-width="1"/>
</svg>
<div>
<div class="hex-label">Erste Bytes der Datei</div>
<div class="hex-strip audio-magic">
<span class="magic">49 44 33</span> 03 00 00 00 00 03 76 54 49 54 32 00 00
</div>
</div>
<div class="magic-caption"><span class="magic-word">49 44 33</span> = <span class="magic-word">"ID3"</span></div>
</div>
<div class="file pdf">
<div class="file-head">
<span class="file-name">PDF-Dokument</span>
<span class="file-ext">.pdf</span>
</div>
<svg class="preview" viewBox="0 0 220 130" preserveAspectRatio="xMidYMid meet">
<rect x="0" y="0" width="220" height="130" fill="#f8fafc"/>
<rect x="50" y="14" width="120" height="102" rx="4" fill="#fff" stroke="#cbd5e1" stroke-width="1"/>
<rect x="58" y="24" width="80" height="4" rx="1" fill="#7c3aed"/>
<rect x="58" y="34" width="104" height="2" fill="#cbd5e1"/>
<rect x="58" y="40" width="98" height="2" fill="#cbd5e1"/>
<rect x="58" y="46" width="92" height="2" fill="#cbd5e1"/>
<rect x="58" y="52" width="100" height="2" fill="#cbd5e1"/>
<rect x="58" y="62" width="80" height="2" fill="#cbd5e1"/>
<rect x="58" y="68" width="96" height="2" fill="#cbd5e1"/>
<rect x="58" y="74" width="88" height="2" fill="#cbd5e1"/>
<rect x="58" y="84" width="40" height="3" rx="1" fill="#7c3aed" opacity="0.7"/>
<rect x="58" y="92" width="92" height="2" fill="#cbd5e1"/>
<rect x="58" y="98" width="86" height="2" fill="#cbd5e1"/>
<rect x="58" y="104" width="78" height="2" fill="#cbd5e1"/>
</svg>
<div>
<div class="hex-label">Erste Bytes der Datei</div>
<div class="hex-strip pdf-magic">
<span class="magic">25 50 44 46</span> 2D 31 2E 37 0A 25 E2 E3 CF D3 0A 0A
</div>
</div>
<div class="magic-caption"><span class="magic-word">25 50 44 46</span> = <span class="magic-word">"%PDF"</span></div>
</div>
</div>
<div class="verdict">
<div class="verdict-q">Drei verschiedene Dinge — eine Sprache.</div>
<div class="verdict-a">Jede Datei beginnt mit ihrer <strong>Visitenkarte</strong> (Magic Number) und besteht ab da aus nichts als Byte. Foto, Audio, PDF — alle dieselben Bauteile, nur anders zusammengesetzt.</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/drei-dateien.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

slides/223015b-2026/assets/demos/hex-dec-table.html
+67
View File
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Hex → Dezimal</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; }
body { padding: 28px; }
h1 { text-align: center; margin: 0 0 4px; font-size: 1.6rem; color: #1a1a2e; }
.sub { text-align: center; color: #6b7280; margin-bottom: 18px; font-size: 0.95rem; }
table { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; }
th, td { border: 1px solid #cbd5e1; padding: 7px 10px; text-align: center; font-size: 0.95rem; }
thead th { background: #1a1a2e; color: #fff; }
tbody th { background: #334155; color: #fff; font-weight: 600; }
tbody td.ascii { background: #f3f4f6; }
tbody td.nonascii { background: #fff; color: #6b7280; }
.corner { background: #0f0f23; color: #d63384; }
.legend { display: flex; justify-content: center; gap: 24px; margin-top: 16px; font-size: 0.9rem; color: #374151; }
.sw { display: inline-block; width: 14px; height: 14px; border: 1px solid #cbd5e1; vertical-align: middle; margin-right: 6px; }
.example { margin: 20px auto 0; max-width: 720px; padding: 14px 18px; background: #fef3f8; border-left: 4px solid #d63384; border-radius: 4px; font-size: 1rem; color: #1a1a2e; }
code { background: #1a1a2e; color: #d63384; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-weight: 700; }
</style>
</head>
<body>
<h1>Hex → Dezimal</h1>
<div class="sub">Dezimalwert = (Zeile × 16) + Spalte</div>
<table>
<thead>
<tr>
<th class="corner">×16 / +</th>
<th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th>
<th>8</th><th>9</th><th>A <small style="opacity:.7;font-weight:400">(10)</small></th><th>B <small style="opacity:.7;font-weight:400">(11)</small></th><th>C <small style="opacity:.7;font-weight:400">(12)</small></th><th>D <small style="opacity:.7;font-weight:400">(13)</small></th><th>E <small style="opacity:.7;font-weight:400">(14)</small></th><th>F <small style="opacity:.7;font-weight:400">(15)</small></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="legend">
<span><span class="sw" style="background:#f3f4f6"></span>ASCII (0–127)</span>
<span><span class="sw" style="background:#fff"></span>Non-ASCII (128–255)</span>
</div>
<div class="example">
<strong>Beispiel:</strong> <code>4D</code> → Zeile <code>4</code> × 16 + Spalte <code>D</code> = 64 + 13 = <strong>77</strong> (= "M" in ASCII)
</div>
<script>
const rows = '0123456789ABCDEF';
const tb = document.querySelector('tbody');
for (let r = 0; r < 16; r++) {
const tr = document.createElement('tr');
const th = document.createElement('th');
th.innerHTML = r >= 10 ? rows[r] + ' <small style="opacity:.7;font-weight:400">('+r+')</small>' : rows[r];
tr.appendChild(th);
for (let c = 0; c < 16; c++) {
const td = document.createElement('td');
const v = r*16 + c;
td.textContent = v;
td.className = v <= 127 ? 'ascii' : 'nonascii';
tr.appendChild(td);
}
tb.appendChild(tr);
}
</script>
</body>
</html>
slides/223015b-2026/assets/demos/hex-dec-table.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 275 KiB

slides/223015b-2026/assets/demos/jpeg-pipeline.html
+206
View File
@@ -0,0 +1,206 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>JPEG-Pipeline — 6 Schritte vom Foto zur Datei</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--lossless-step: #2563eb;
--lossy-step: #ea580c;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 28px 40px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 1.05rem; }
.sub strong { color: var(--dark); }
.pipeline {
display: grid;
grid-template-columns: 110px repeat(6, 1fr) 110px;
gap: 4px;
max-width: 1200px;
margin: 0 auto;
align-items: stretch;
}
.endpoint {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
}
.endpoint-art { width: 88px; height: 60px; display: block; }
.endpoint-label {
font-size: 0.92rem;
font-weight: 700;
color: var(--dark);
}
.endpoint-size {
font-family: ui-monospace, monospace;
font-size: 0.82rem;
color: var(--muted);
}
.step {
border: 2px solid;
border-radius: 8px;
padding: 8px 6px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
}
.step.lossless { border-color: var(--lossless-step); }
.step.lossy { border-color: var(--lossy-step); }
.step-num {
font-family: ui-monospace, monospace;
font-size: 0.72rem;
font-weight: 700;
color: var(--muted);
}
.step-name {
font-size: 0.78rem;
font-weight: 700;
line-height: 1.2;
}
.step.lossless .step-name { color: var(--lossless-step); }
.step.lossy .step-name { color: var(--lossy-step); }
.step-desc {
font-size: 0.66rem;
color: var(--muted);
line-height: 1.3;
}
.arrow {
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
font-family: ui-monospace, monospace;
font-size: 1rem;
}
.legend {
margin-top: 16px;
display: flex;
justify-content: center;
gap: 24px;
font-size: 0.84rem;
color: var(--dark);
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-swatch {
width: 14px;
height: 14px;
border-radius: 3px;
display: inline-block;
}
.legend-swatch.lossless { background: var(--lossless-step); }
.legend-swatch.lossy { background: var(--lossy-step); }
.verdict {
margin-top: 22px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 2px solid var(--hl);
border-radius: 12px;
padding: 14px 22px;
}
.verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
.verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
.verdict-a strong { color: var(--hl); }
</style>
</head>
<body>
<h1>JPEG-Pipeline — 6 Schritte vom Foto zur Datei</h1>
<div class="sub">Nur <strong>einer</strong> dieser Schritte verliert Information. Die anderen fünf sind verlustfrei.</div>
<div class="pipeline">
<div class="endpoint">
<svg class="endpoint-art" viewBox="0 0 88 60">
<defs>
<linearGradient id="photo-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fde68a"/>
<stop offset="55%" stop-color="#fb923c"/>
<stop offset="100%" stop-color="#7c3aed"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="88" height="60" rx="3" fill="url(#photo-grad)"/>
<circle cx="66" cy="22" r="9" fill="#fef3c7"/>
<path d="M0,42 L18,34 L40,40 L60,30 L80,38 L88,33 L88,60 L0,60 Z" fill="#1e1b4b"/>
</svg>
<div class="endpoint-label">Foto (Roh)</div>
<div class="endpoint-size">~36 MB</div>
</div>
<div class="step lossless">
<div class="step-num">1</div>
<div class="step-name">Farbraum</div>
<div class="step-desc">RGB → Y'CbCr<br>Helligkeit von Farbe trennen</div>
</div>
<div class="step lossy">
<div class="step-num">2</div>
<div class="step-name">Chroma-Subsampling</div>
<div class="step-desc">Cb &amp; Cr auf <strong>¼</strong><br>Auge sieht Farbe grob</div>
</div>
<div class="step lossless">
<div class="step-num">3</div>
<div class="step-name">8×8 Blöcke</div>
<div class="step-desc">Bild in Kacheln<br>jeder Block einzeln</div>
</div>
<div class="step lossless">
<div class="step-num">4</div>
<div class="step-name">DCT</div>
<div class="step-desc">Frequenz-Zerlegung<br>häufige Muster</div>
</div>
<div class="step lossy">
<div class="step-num">5</div>
<div class="step-name">Quantisierung</div>
<div class="step-desc"><strong>Hier</strong> wird weggeworfen<br>hohe Frequenzen raus</div>
</div>
<div class="step lossless">
<div class="step-num">6</div>
<div class="step-name">Huffman</div>
<div class="step-desc">Verlustfrei kürzen<br>häufig → kurz</div>
</div>
<div class="endpoint">
<svg class="endpoint-art" viewBox="0 0 88 60">
<rect x="0" y="0" width="88" height="60" rx="3" fill="url(#photo-grad)"/>
<circle cx="66" cy="22" r="9" fill="#fef3c7"/>
<path d="M0,42 L18,34 L40,40 L60,30 L80,38 L88,33 L88,60 L0,60 Z" fill="#1e1b4b"/>
</svg>
<div class="endpoint-label">JPEG</div>
<div class="endpoint-size">~3,5 MB</div>
</div>
</div>
<div class="legend">
<span class="legend-item"><span class="legend-swatch lossless"></span>verlustfrei (umkehrbar)</span>
<span class="legend-item"><span class="legend-swatch lossy"></span>verlustbehaftet (Information weg)</span>
</div>
<div class="verdict">
<div class="verdict-q">Der <strong>Quanten-Schritt</strong> ist das ganze Geheimnis von JPEG.</div>
<div class="verdict-a">Schritte 1, 3, 4, 6 verlieren nichts. Schritt 2 wirft Farb-Detail weg (Auge merkt nicht). Schritt 5 entscheidet — je nach Qualitäts-Stufe — wie viel <strong>Frequenz-Detail</strong> verloren geht. Niedrige Quality = aggressivere Schritt-5-Quantisierung.</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/jpeg-pipeline.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

slides/223015b-2026/assets/demos/kap02-eroeffner.html
+158
View File
@@ -0,0 +1,158 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Dieselbe Aufnahme, zwei Formate</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--lossless: #16a34a;
--lossy: #ef4444;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 36px 48px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 28px; font-size: 1.05rem; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 1200px; margin: 0 auto; }
.panel { border: 2px solid var(--border); border-radius: 12px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; background: #fff; }
.panel.left { border-color: var(--lossless); }
.panel.right { border-color: var(--lossy); }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; }
.panel-tag {
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.panel-name { font-size: 1.5rem; font-weight: 700; }
.panel.left .panel-name { color: var(--lossless); }
.panel.right .panel-name { color: var(--lossy); }
.panel-format {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.85rem;
color: var(--muted);
}
.waveform {
background: #0f0f23;
border-radius: 8px;
padding: 6px;
display: block;
}
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: var(--soft); border: 1px solid var(--border); border-radius: 7px; padding: 8px 12px; }
.stat .label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
.stat .value { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1rem; font-weight: 700; color: var(--dark); margin-top: 2px; }
.verdict {
margin-top: 26px;
border: 2px solid var(--hl);
background: #fff;
border-radius: 12px;
padding: 16px 22px;
text-align: center;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.verdict-q { font-size: 1.2rem; font-weight: 700; color: var(--hl); }
.verdict-a { font-size: 1rem; color: var(--dark); margin-top: 6px; }
.verdict-a strong { color: var(--hl); }
</style>
</head>
<body>
<h1>Dieselbe Aufnahme, zwei Formate</h1>
<div class="sub">3 Sekunden Snare-Hit mit Cymbal-Tail · 44,1 kHz Sample-Rate · Stereo</div>
<div class="grid">
<div class="panel left">
<div class="panel-head">
<span class="panel-name">Lossless</span>
<span class="panel-tag">FLAC</span>
</div>
<div class="panel-format">verlustfrei · alle Frequenzen 0–22 kHz erhalten</div>
<svg class="waveform" viewBox="0 0 800 160" preserveAspectRatio="none">
<defs>
<linearGradient id="green-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#34d399"/>
<stop offset="100%" stop-color="#16a34a"/>
</linearGradient>
</defs>
<line x1="0" y1="80" x2="800" y2="80" stroke="#374151" stroke-width="1"/>
<!-- detailed waveform: transient peak + cymbal decay with high-freq noise -->
<path d="M0,80
L40,80 L42,78 L44,82 L46,74 L48,88
L60,30 L62,135 L64,18 L66,142 L68,28 L70,128 L72,38 L74,118 L76,48 L78,108
L90,55 L92,108 L94,52 L96,112 L98,58 L100,105 L102,62 L104,98 L106,68 L108,92
L130,72 L132,92 L134,68 L136,94 L138,72 L140,90 L142,74 L144,88
L170,76 L172,86 L174,74 L176,87 L178,76 L180,85
L220,77 L222,84 L224,76 L226,85 L228,77 L230,83
L280,78 L282,83 L284,77 L286,84 L288,78 L290,82
L340,79 L342,82 L344,78 L346,82 L348,79 L350,81
L400,79 L402,81 L404,79 L406,81 L408,79 L410,81
L460,80 L462,81 L464,79 L466,81 L468,80 L470,80
L520,80 L522,81 L524,79 L526,80
L580,80 L582,80 L584,80
L640,80 L700,80 L800,80 Z"
fill="url(#green-grad)" stroke="#16a34a" stroke-width="1" opacity="0.95"/>
</svg>
<div class="stats">
<div class="stat"><div class="label">Dateigröße</div><div class="value">5,3 MB</div></div>
<div class="stat"><div class="label">Bitrate</div><div class="value">1.411 kbit/s</div></div>
</div>
</div>
<div class="panel right">
<div class="panel-head">
<span class="panel-name">Lossy</span>
<span class="panel-tag">MP3 128 kbit/s</span>
</div>
<div class="panel-format">verlustbehaftet · hohe Frequenzen weggeworfen, Transienten geglättet</div>
<svg class="waveform" viewBox="0 0 800 160" preserveAspectRatio="none">
<defs>
<linearGradient id="red-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fca5a5"/>
<stop offset="100%" stop-color="#ef4444"/>
</linearGradient>
</defs>
<line x1="0" y1="80" x2="800" y2="80" stroke="#374151" stroke-width="1"/>
<!-- smoothed waveform: same overall shape, no fine detail in transient peak -->
<path d="M0,80
L40,80 L48,80
L60,48 L65,120 L70,52 L75,115 L80,58 L85,108
L100,68 L108,92 L114,70 L120,90
L150,75 L160,86 L168,76 L174,85
L200,77 L210,84 L220,77 L230,83
L260,78 L280,82 L300,78 L320,82
L360,79 L380,81 L400,79 L420,81
L460,80 L480,80 L520,80
L580,80 L640,80 L700,80 L800,80 Z"
fill="url(#red-grad)" stroke="#ef4444" stroke-width="1" opacity="0.95"/>
</svg>
<div class="stats">
<div class="stat"><div class="label">Dateigröße</div><div class="value">0,48 MB</div></div>
<div class="stat"><div class="label">Bitrate</div><div class="value">128 kbit/s</div></div>
</div>
</div>
</div>
<div class="verdict">
<div class="verdict-q">Hört man den Unterschied?</div>
<div class="verdict-a">Auf dem Smartphone-Lautsprecher: meist nicht. Im Studio-Monitor mit Kopfhörer: oft schon. — MP3 wirft <strong>91 % der Daten weg</strong>, die der Mensch im Alltag nicht vermisst.</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/kap02-eroeffner.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

slides/223015b-2026/assets/demos/kap03-eroeffner.html
+119
View File
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Drei Modalitäten, ein Hebel</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--bild: #2563eb;
--audio: #ea580c;
--video: #7c3aed;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 32px 48px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 1.05rem; }
.table { display: grid; grid-template-columns: 140px 1fr 1fr 1fr; gap: 12px; max-width: 1180px; margin: 0 auto; align-items: stretch; }
.col-head { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--muted); padding: 0 8px 4px; }
.row-label { font-size: 1.15rem; font-weight: 700; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; justify-content: center; border-radius: 10px; }
.row-label.bild { background: #dbeafe; color: var(--bild); }
.row-label.audio { background: #ffedd5; color: var(--audio); }
.row-label.video { background: #ede9fe; color: var(--video); }
.row-label small { font-size: 0.78rem; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
.cell { border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.cell-format { font-family: ui-monospace, monospace; font-size: 0.85rem; color: var(--muted); }
.cell-size { font-size: 1.7rem; font-weight: 700; color: var(--dark); font-family: ui-monospace, monospace; }
.cell-bar { height: 8px; border-radius: 4px; background: var(--soft); position: relative; overflow: hidden; }
.cell-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.verdict {
margin-top: 22px;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
border: 2px solid var(--hl);
border-radius: 12px;
padding: 14px 22px;
text-align: center;
}
.verdict-q { font-size: 1.05rem; font-weight: 700; color: var(--hl); }
.verdict-a { font-size: 0.95rem; color: var(--dark); margin-top: 4px; }
.verdict-a strong { color: var(--hl); }
</style>
</head>
<body>
<h1>Drei Modalitäten — derselbe Hebel</h1>
<div class="sub">Bild, Audio, Video schrumpfen alle dramatisch. Warum? Weil Wahrnehmung Lücken hat.</div>
<div class="table">
<div></div>
<div class="col-head">Roh</div>
<div class="col-head">Lossy (modern)</div>
<div class="col-head">Lossy (aggressiv)</div>
<div class="row-label bild">Bild<small>12-MP-Foto</small></div>
<div class="cell">
<div class="cell-format">RAW</div>
<div class="cell-size">36 MB</div>
<div class="cell-bar"><div class="fill" style="width:100%;background:#2563eb"></div></div>
</div>
<div class="cell">
<div class="cell-format">JPEG · Q 90</div>
<div class="cell-size">4 MB</div>
<div class="cell-bar"><div class="fill" style="width:11%;background:#2563eb"></div></div>
</div>
<div class="cell">
<div class="cell-format">JPEG · Q 50</div>
<div class="cell-size">800 KB</div>
<div class="cell-bar"><div class="fill" style="width:2.2%;background:#2563eb"></div></div>
</div>
<div class="row-label audio">Audio<small>30 s Stereo</small></div>
<div class="cell">
<div class="cell-format">WAV · 44,1 kHz · 16 bit</div>
<div class="cell-size">5,3 MB</div>
<div class="cell-bar"><div class="fill" style="width:100%;background:#ea580c"></div></div>
</div>
<div class="cell">
<div class="cell-format">MP3 · 192 kbit/s</div>
<div class="cell-size">720 KB</div>
<div class="cell-bar"><div class="fill" style="width:14%;background:#ea580c"></div></div>
</div>
<div class="cell">
<div class="cell-format">MP3 · 64 kbit/s</div>
<div class="cell-size">240 KB</div>
<div class="cell-bar"><div class="fill" style="width:4.5%;background:#ea580c"></div></div>
</div>
<div class="row-label video">Video<small>30 s · 4K · 30 fps</small></div>
<div class="cell">
<div class="cell-format">Roh · 8 bit</div>
<div class="cell-size">12 GB</div>
<div class="cell-bar"><div class="fill" style="width:100%;background:#7c3aed"></div></div>
</div>
<div class="cell">
<div class="cell-format">H.264 · 25 Mbit/s</div>
<div class="cell-size">94 MB</div>
<div class="cell-bar"><div class="fill" style="width:0.8%;background:#7c3aed"></div></div>
</div>
<div class="cell">
<div class="cell-format">H.265 · 12 Mbit/s</div>
<div class="cell-size">45 MB</div>
<div class="cell-bar"><div class="fill" style="width:0.4%;background:#7c3aed"></div></div>
</div>
</div>
<div class="verdict">
<div class="verdict-q">Bilder schrumpfen ×45. Audio ×22. Video ×270.</div>
<div class="verdict-a">Jede Reduktion nutzt eine andere Wahrnehmungs-Lücke: <strong>Bild</strong> die geringere Farbschärfe, <strong>Audio</strong> die Maskierung, <strong>Video</strong> die Frame-zu-Frame-Ähnlichkeit.</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/kap03-eroeffner.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

slides/223015b-2026/assets/demos/kap04-eroeffner.html
+182
View File
@@ -0,0 +1,182 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Die Reise einer Datei</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--slot1: #0891b2;
--slot2: #2563eb;
--slot3: #7c3aed;
--slot4: #be185d;
--slot5: #ea580c;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 32px 40px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 30px; font-size: 1.05rem; }
.sub strong { color: var(--dark); }
.journey {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
gap: 6px;
align-items: stretch;
max-width: 1200px;
margin: 0 auto;
}
.station {
border: 2px solid;
border-radius: 10px;
padding: 14px 12px 12px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.station.s1 { border-color: var(--slot1); }
.station.s2 { border-color: var(--slot2); }
.station.s3 { border-color: var(--slot3); }
.station.s4 { border-color: var(--slot4); }
.station.s5 { border-color: var(--slot5); }
.station-tag { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.station-name { font-size: 1.05rem; font-weight: 700; text-align: center; line-height: 1.2; }
.station.s1 .station-name { color: var(--slot1); }
.station.s2 .station-name { color: var(--slot2); }
.station.s3 .station-name { color: var(--slot3); }
.station.s4 .station-name { color: var(--slot4); }
.station.s5 .station-name { color: var(--slot5); }
.station-detail { font-size: 0.78rem; color: var(--muted); text-align: center; }
.link {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 0 4px;
justify-content: center;
}
.link-rate {
font-family: ui-monospace, monospace;
font-size: 0.88rem;
font-weight: 700;
color: var(--dark);
white-space: nowrap;
}
.link-protocol {
font-size: 0.7rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.link-arrow svg { width: 32px; height: 14px; }
.scenario {
margin-top: 28px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
background: var(--soft);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 16px 22px;
}
.scenario-head { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 6px; }
.scenario-body { font-size: 0.98rem; line-height: 1.55; }
.scenario-body code { font-family: ui-monospace, monospace; background: #fff; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); }
.verdict {
margin-top: 18px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 2px solid var(--hl);
border-radius: 12px;
padding: 14px 22px;
}
.verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
.verdict-a { font-size: 0.92rem; color: var(--dark); margin-top: 4px; }
</style>
</head>
<body>
<h1>Die Reise einer Datei</h1>
<div class="sub">Ein 4K-Trailer (<strong>1,2 GB</strong>) reist von der externen SSD auf den Monitor — jede Etappe ist ein eigener Engpass.</div>
<div class="journey">
<div class="station s1">
<div class="station-tag">Quelle</div>
<div class="station-name">SSD<br>extern</div>
<div class="station-detail">NVMe-Stick</div>
</div>
<div class="link">
<div class="link-rate">3 200 MB/s</div>
<svg class="link-arrow" viewBox="0 0 32 14"><path d="M2,7 L26,7 M22,2 L28,7 L22,12" stroke="#d63384" stroke-width="2" fill="none"/></svg>
<div class="link-protocol">USB 4 / TB4</div>
</div>
<div class="station s2">
<div class="station-tag">Aufnahme</div>
<div class="station-name">Laptop</div>
<div class="station-detail">RAM &amp; CPU</div>
</div>
<div class="link">
<div class="link-rate">~7 000 MB/s</div>
<svg class="link-arrow" viewBox="0 0 32 14"><path d="M2,7 L26,7 M22,2 L28,7 L22,12" stroke="#d63384" stroke-width="2" fill="none"/></svg>
<div class="link-protocol">PCIe 4.0</div>
</div>
<div class="station s3">
<div class="station-tag">Decoder</div>
<div class="station-name">GPU</div>
<div class="station-detail">H.264-Hardware</div>
</div>
<div class="link">
<div class="link-rate">2 200 MB/s</div>
<svg class="link-arrow" viewBox="0 0 32 14"><path d="M2,7 L26,7 M22,2 L28,7 L22,12" stroke="#d63384" stroke-width="2" fill="none"/></svg>
<div class="link-protocol">HDMI 2.1</div>
</div>
<div class="station s4">
<div class="station-tag">Display</div>
<div class="station-name">4K-Monitor</div>
<div class="station-detail">3840 × 2160</div>
</div>
<div class="link">
<div class="link-rate">visuell</div>
<svg class="link-arrow" viewBox="0 0 32 14"><path d="M2,7 L26,7 M22,2 L28,7 L22,12" stroke="#d63384" stroke-width="2" fill="none"/></svg>
<div class="link-protocol">Licht</div>
</div>
<div class="station s5">
<div class="station-tag">Ziel</div>
<div class="station-name">Auge</div>
<div class="station-detail">Bewusstsein</div>
</div>
</div>
<div class="scenario">
<div class="scenario-head">Was hier passiert</div>
<div class="scenario-body">
Die <code>1,2 GB</code> liegen verschlüsselt komprimiert auf dem Stick. Sie reisen über <strong>USB-C</strong> in den RAM, werden vom GPU <strong>dekodiert</strong> (H.264 → roher RGB-Strom), und über <strong>HDMI</strong> als unkomprimiertes Bild an den Monitor geschickt. Dort entstehen pro Sekunde 60 Bilder mit je rund <code>24 MB</code> — also <strong>1,4 GB/s an rohem Pixelstrom</strong>, der niemals als Datei vorliegt.
</div>
</div>
<div class="verdict">
<div class="verdict-q">Speicher und Schnittstelle sind keine zwei Themen — sie sind die zwei Seiten desselben Engpasses.</div>
<div class="verdict-a">Wo Bytes wohnen entscheidet, wie schnell sie reisen können. Wo sie reisen entscheidet, wo sie wohnen müssen.</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/kap04-eroeffner.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

slides/223015b-2026/assets/demos/kap05-eroeffner.html
+254
View File
@@ -0,0 +1,254 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Eine Datei reist — und erzählt</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--visible: #2563eb;
--hidden: #7c3aed;
--transit: #ea580c;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 28px 40px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.05rem; }
.sub strong { color: var(--dark); }
.scene {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 22px;
max-width: 1200px;
margin: 0 auto;
}
.panel {
border: 2px solid;
border-radius: 12px;
padding: 16px 18px;
background: #fff;
display: flex;
flex-direction: column;
gap: 10px;
}
.panel.visible { border-color: var(--visible); }
.panel.hidden { border-color: var(--hidden); }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; }
.panel-tag {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.panel-name { font-size: 1.25rem; font-weight: 700; }
.panel.visible .panel-name { color: var(--visible); }
.panel.hidden .panel-name { color: var(--hidden); }
.photo {
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border);
display: block;
}
.photo-meta {
display: flex;
justify-content: space-between;
font-family: ui-monospace, monospace;
font-size: 0.78rem;
color: var(--muted);
padding: 0 2px;
}
.exif-list {
display: grid;
grid-template-columns: 130px 1fr;
gap: 4px 12px;
font-size: 0.86rem;
line-height: 1.4;
}
.exif-key {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
padding-top: 3px;
}
.exif-val { font-family: ui-monospace, monospace; color: var(--dark); }
.exif-val.gps { color: var(--hl); font-weight: 700; }
.transit-strip {
max-width: 1200px;
margin: 18px auto 0;
border: 2px solid var(--transit);
border-radius: 12px;
padding: 14px 18px;
background: #fff;
display: grid;
grid-template-columns: auto 1fr;
gap: 16px;
align-items: center;
}
.transit-tag {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--transit);
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: center;
}
.transit-body { display: flex; flex-direction: column; gap: 8px; }
.transit-route {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.92rem;
font-weight: 700;
flex-wrap: wrap;
}
.hop {
background: var(--soft);
border: 1.5px solid var(--border);
padding: 4px 10px;
border-radius: 6px;
font-family: ui-monospace, monospace;
font-size: 0.82rem;
color: var(--dark);
}
.hop.origin { border-color: var(--visible); color: var(--visible); }
.hop.dest { border-color: var(--visible); color: var(--visible); }
.hop.edge { border-color: var(--transit); color: var(--transit); }
.arrow { color: var(--muted); font-family: ui-monospace, monospace; }
.transit-headers {
font-family: ui-monospace, monospace;
font-size: 0.78rem;
color: var(--muted);
line-height: 1.5;
}
.transit-headers strong { color: var(--dark); }
.verdict {
margin-top: 18px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 2px solid var(--hl);
border-radius: 12px;
padding: 14px 22px;
}
.verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
.verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
.verdict-a strong { color: var(--hl); }
</style>
</head>
<body>
<h1>Eine Datei reist — und erzählt</h1>
<div class="sub">Ein Smartphone-Foto geht von <strong>Stuttgart</strong> nach <strong>Tokyo</strong>. Was sieht der Empfänger — und was bekommt er noch dazu?</div>
<div class="scene">
<div class="panel visible">
<div class="panel-head">
<span class="panel-name">Inhalt</span>
<span class="panel-tag">Was du siehst</span>
</div>
<svg class="photo" viewBox="0 0 420 280" preserveAspectRatio="xMidYMid slice">
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fde68a"/>
<stop offset="55%" stop-color="#fda4af"/>
<stop offset="100%" stop-color="#9333ea"/>
</linearGradient>
<linearGradient id="hills" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#312e81"/>
<stop offset="100%" stop-color="#0f172a"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="420" height="280" fill="url(#sky)"/>
<circle cx="320" cy="105" r="32" fill="#fff7ed" opacity="0.95"/>
<path d="M0,200 L60,170 L110,185 L160,160 L210,178 L260,150 L310,172 L360,148 L420,168 L420,280 L0,280 Z" fill="url(#hills)"/>
<path d="M0,225 L50,210 L100,222 L150,205 L200,220 L250,202 L300,218 L350,200 L420,215 L420,280 L0,280 Z" fill="#1e1b4b" opacity="0.7"/>
<rect x="80" y="225" width="14" height="42" fill="#0f172a"/>
<rect x="180" y="232" width="10" height="35" fill="#0f172a"/>
<rect x="240" y="220" width="18" height="48" fill="#0f172a"/>
<rect x="300" y="234" width="11" height="34" fill="#0f172a"/>
<rect x="86" y="232" width="3" height="3" fill="#fbbf24"/>
<rect x="188" y="240" width="2" height="2" fill="#fbbf24"/>
<rect x="248" y="228" width="3" height="3" fill="#fbbf24"/>
<rect x="307" y="240" width="2" height="2" fill="#fbbf24"/>
</svg>
<div class="photo-meta">
<span>HEIC · 4032 × 3024</span>
<span>3,2 MB</span>
</div>
</div>
<div class="panel hidden">
<div class="panel-head">
<span class="panel-name">Gepäck</span>
<span class="panel-tag">Was die Datei über sich weiß</span>
</div>
<div class="exif-list">
<div class="exif-key">Kamera</div>
<div class="exif-val">Apple iPhone 15 Pro · 24 mm · ƒ/1.78</div>
<div class="exif-key">Belichtung</div>
<div class="exif-val">1/250 s · ISO 100 · EV 0</div>
<div class="exif-key">Aufgenommen</div>
<div class="exif-val">2026-04-12 · 18:47:12 · +02:00</div>
<div class="exif-key">GPS</div>
<div class="exif-val gps">48.7847° N · 9.1825° E · 248 m<br><span style="font-weight:400">(Stuttgart, Königstraße 28)</span></div>
<div class="exif-key">Software</div>
<div class="exif-val">iOS 18.4.1 · HDR · Live Photo</div>
<div class="exif-key">Farbprofil</div>
<div class="exif-val">Display P3</div>
</div>
</div>
</div>
<div class="transit-strip">
<div class="transit-tag">Weg</div>
<div class="transit-body">
<div class="transit-route">
<span class="hop origin">Stuttgart</span>
<span class="arrow">→</span>
<span class="hop">DNS</span>
<span class="arrow">→</span>
<span class="hop">TLS 1.3</span>
<span class="arrow">→</span>
<span class="hop edge">CDN-Edge Tokyo</span>
<span class="arrow">→</span>
<span class="hop dest">Tokyo</span>
</div>
<div class="transit-headers">
<strong>HTTP/3 200 OK</strong> · content-type: image/heic · content-length: 3 220 480 · <strong>RTT 47 ms</strong> · cache: HIT (Edge tok-7) · age: 312 s
</div>
</div>
</div>
<div class="verdict">
<div class="verdict-q">Eine Datei = Inhalt + Gepäck + Weg.</div>
<div class="verdict-a"><strong>Inhalt</strong> sieht der Empfänger. <strong>Gepäck</strong> verrät, wer sie gemacht hat — und wo. <strong>Weg</strong> entscheidet, wie schnell sie ankommt. Drei Schichten, eine Datei.</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/kap05-eroeffner.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

slides/223015b-2026/assets/demos/kb-vs-kib.html
+194
View File
@@ -0,0 +1,194 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>1 TB verkauft, 931 GB angezeigt — wo gehen die 69 GB hin?</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--marketing: #2563eb;
--os: #ea580c;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 32px 40px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: 1.05rem; }
.sub strong { color: var(--dark); }
.compare {
display: grid;
grid-template-columns: 1fr 80px 1fr;
gap: 18px;
max-width: 1100px;
margin: 0 auto;
align-items: stretch;
}
.side {
border: 2px solid;
border-radius: 12px;
padding: 18px 22px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.side.marketing { border-color: var(--marketing); }
.side.os { border-color: var(--os); }
.side-tag {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
}
.side.marketing .side-name { color: var(--marketing); }
.side.os .side-name { color: var(--os); }
.side-name { font-size: 1.15rem; font-weight: 700; }
.label-mock {
background: var(--soft);
border: 1.5px solid var(--border);
border-radius: 8px;
padding: 14px 22px;
min-width: 240px;
text-align: center;
font-family: ui-monospace, monospace;
font-size: 0.85rem;
color: var(--muted);
line-height: 1.5;
}
.label-mock .big {
font-family: system-ui, sans-serif;
font-size: 2.2rem;
font-weight: 900;
display: block;
color: var(--dark);
line-height: 1.05;
}
.side.marketing .label-mock .big { color: var(--marketing); }
.side.os .label-mock .big { color: var(--os); }
.label-mock .small-line { font-size: 0.78rem; }
.formel {
font-family: ui-monospace, monospace;
font-size: 0.85rem;
color: var(--muted);
text-align: center;
line-height: 1.6;
}
.formel strong { color: var(--dark); }
.arrow-col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: var(--muted);
}
.arrow-col svg { display: block; }
.arrow-col .why {
font-size: 0.78rem;
font-weight: 700;
color: var(--hl);
text-align: center;
line-height: 1.25;
}
.math-box {
margin-top: 22px;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
background: var(--soft);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 16px 22px;
}
.math-box-head { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 8px; }
.math-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; font-family: ui-monospace, monospace; font-size: 0.9rem; line-height: 1.6; }
.math-grid .key { color: var(--muted); }
.math-grid .val { color: var(--dark); font-weight: 700; }
.math-grid .val.hl { color: var(--hl); }
.verdict {
margin-top: 18px;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 2px solid var(--hl);
border-radius: 12px;
padding: 14px 22px;
}
.verdict-q { font-size: 1.05rem; font-weight: 700; color: var(--hl); }
.verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
.verdict-a code { font-family: ui-monospace, monospace; background: #fff; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border); }
</style>
</head>
<body>
<h1>„1 TB" gekauft — 931 GB im Finder. Wo sind die 69 GB hin?</h1>
<div class="sub">Nirgendwo. Es sind <strong>dieselben Byte</strong>. Nur zwei Welten zählen anders.</div>
<div class="compare">
<div class="side marketing">
<div class="side-tag">Auf der Verpackung</div>
<div class="side-name">Marketing</div>
<div class="label-mock">
<span class="big">1 TB</span>
<span class="small-line">externe SSD</span>
</div>
<div class="formel">
1 TB = <strong>10<sup>12</sup></strong> Byte<br>
= 1 000 000 000 000
</div>
</div>
<div class="arrow-col">
<svg viewBox="0 0 60 30" width="56" height="30"><path d="M5,15 L48,15 M42,7 L52,15 L42,23" stroke="#d63384" stroke-width="2.5" fill="none"/></svg>
<div class="why">geteilt durch<br>2<sup>30</sup></div>
</div>
<div class="side os">
<div class="side-tag">Im Finder · Explorer</div>
<div class="side-name">Betriebssystem</div>
<div class="label-mock">
<span class="big">931 GB</span>
<span class="small-line">eigentlich: 931 GiB</span>
</div>
<div class="formel">
1 GiB = <strong>2<sup>30</sup></strong> Byte<br>
= 1 073 741 824
</div>
</div>
</div>
<div class="math-box">
<div class="math-box-head">Die Rechnung</div>
<div class="math-grid">
<span class="key">Marketing schreibt</span>
<span class="val">1 TB = 1 000 000 000 000 Byte (Basis 10)</span>
<span class="key">Betriebssystem rechnet</span>
<span class="val">1 TiB = 1 099 511 627 776 Byte (Basis 2)</span>
<span class="key">1 TB in GiB umrechnen</span>
<span class="val hl">10<sup>12</sup> ÷ 2<sup>30</sup> ≈ 931,3 GiB — der Finder zeigt also „931 GB"</span>
<span class="key">Was die Studis sehen</span>
<span class="val">Etikett: GB · Anzeige: GB · Bedeutung: zwei verschiedene Dinge</span>
</div>
</div>
<div class="verdict">
<div class="verdict-q">Es fehlt nichts. Es wird nur in zwei Sprachen gezählt.</div>
<div class="verdict-a">Korrekt wären <code>GiB</code> (binär, 1024) und <code>GB</code> (dezimal, 1000). In der Realität verwenden beide Welten <code>GB</code> und meinen verschiedene Zahlen.</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/kb-vs-kib.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

slides/223015b-2026/assets/demos/nyquist-diagram.html
+232
View File
@@ -0,0 +1,232 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Nyquist-Shannon — wie oft muss man messen?</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--bad: #ef4444;
--warn: #f59e0b;
--good: #16a34a;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 28px 40px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.05rem; }
.sub strong { color: var(--dark); }
.cases {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 1180px;
margin: 0 auto;
}
.case {
display: grid;
grid-template-columns: 200px 1fr;
gap: 18px;
align-items: center;
border: 2px solid;
border-radius: 10px;
padding: 10px 14px;
background: #fff;
}
.case.bad { border-color: var(--bad); }
.case.warn { border-color: var(--warn); }
.case.good { border-color: var(--good); }
.case-meta { display: flex; flex-direction: column; gap: 4px; }
.case-tag {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
}
.case-name { font-size: 1.05rem; font-weight: 700; }
.case.bad .case-name { color: var(--bad); }
.case.warn .case-name { color: var(--warn); }
.case.good .case-name { color: var(--good); }
.case-rate { font-family: ui-monospace, monospace; font-size: 0.82rem; color: var(--dark); }
.case-note { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.plot { background: var(--soft); border-radius: 8px; }
.plot svg { display: block; }
.verdict {
margin-top: 20px;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 2px solid var(--hl);
border-radius: 12px;
padding: 14px 22px;
}
.verdict-q { font-size: 1.05rem; font-weight: 700; color: var(--hl); }
.verdict-a { font-size: 0.92rem; color: var(--dark); margin-top: 4px; }
.verdict-a strong { color: var(--hl); }
.verdict-a code { font-family: ui-monospace, monospace; background: var(--soft); padding: 1px 5px; border-radius: 4px; }
</style>
</head>
<body>
<h1>Nyquist-Shannon — wie oft müssen wir messen?</h1>
<div class="sub">Dieselbe Welle, drei Sample-Raten. Eine fällt durch, eine reicht knapp, eine ist sicher.</div>
<div class="cases">
<div class="case bad">
<div class="case-meta">
<div class="case-tag">Zu wenig</div>
<div class="case-name">Aliasing</div>
<div class="case-rate">f<sub>s</sub> = 0,9 · f</div>
<div class="case-note">Die Sample-Punkte sitzen auf der Welle — aber verbunden sehen sie aus wie eine <strong>ganz andere, langsamere</strong> Welle.</div>
</div>
<div class="plot">
<svg viewBox="0 0 880 140" width="100%" height="140" preserveAspectRatio="none">
<line x1="20" y1="70" x2="860" y2="70" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
<path d="M 20,70 Q 46.25,-20 72.5,70 T 125,70 T 177.5,70 T 230,70 T 282.5,70 T 335,70 T 387.5,70 T 440,70 T 492.5,70 T 545,70 T 597.5,70 T 650,70 T 702.5,70 T 755,70 T 807.5,70 T 860,70"
stroke="#cbd5e1" stroke-width="1.5" fill="none"/>
<polyline points="20,70 136.7,41 253.4,25.7 370.1,31.2 486.8,54.9 603.5,85.8 720.2,109.2 836.9,114.2"
stroke="#ef4444" stroke-width="2.5" fill="none"/>
<circle cx="20" cy="70" r="5" fill="#ef4444"/>
<circle cx="136.7" cy="41" r="5" fill="#ef4444"/>
<circle cx="253.4" cy="25.7" r="5" fill="#ef4444"/>
<circle cx="370.1" cy="31.2" r="5" fill="#ef4444"/>
<circle cx="486.8" cy="54.9" r="5" fill="#ef4444"/>
<circle cx="603.5" cy="85.8" r="5" fill="#ef4444"/>
<circle cx="720.2" cy="109.2" r="5" fill="#ef4444"/>
<circle cx="836.9" cy="114.2" r="5" fill="#ef4444"/>
</svg>
</div>
</div>
<div class="case warn">
<div class="case-meta">
<div class="case-tag">Genau</div>
<div class="case-name">Nyquist-Grenze</div>
<div class="case-rate">f<sub>s</sub> = 2 · f</div>
<div class="case-note">Sample exakt auf <strong>Peak und Tal</strong>. Mathematisch reicht das — visuell sieht es kaputt aus.</div>
</div>
<div class="plot">
<svg viewBox="0 0 880 140" width="100%" height="140" preserveAspectRatio="none">
<line x1="20" y1="70" x2="860" y2="70" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
<path d="M 20,70 Q 46.25,-20 72.5,70 T 125,70 T 177.5,70 T 230,70 T 282.5,70 T 335,70 T 387.5,70 T 440,70 T 492.5,70 T 545,70 T 597.5,70 T 650,70 T 702.5,70 T 755,70 T 807.5,70 T 860,70"
stroke="#cbd5e1" stroke-width="1.5" fill="none"/>
<polyline points="46.25,25 98.75,115 151.25,25 203.75,115 256.25,25 308.75,115 361.25,25 413.75,115 466.25,25 518.75,115 571.25,25 623.75,115 676.25,25 728.75,115 781.25,25 833.75,115"
stroke="#f59e0b" stroke-width="2" fill="none" opacity="0.5"/>
<circle cx="46.25" cy="25" r="5" fill="#f59e0b"/>
<circle cx="98.75" cy="115" r="5" fill="#f59e0b"/>
<circle cx="151.25" cy="25" r="5" fill="#f59e0b"/>
<circle cx="203.75" cy="115" r="5" fill="#f59e0b"/>
<circle cx="256.25" cy="25" r="5" fill="#f59e0b"/>
<circle cx="308.75" cy="115" r="5" fill="#f59e0b"/>
<circle cx="361.25" cy="25" r="5" fill="#f59e0b"/>
<circle cx="413.75" cy="115" r="5" fill="#f59e0b"/>
<circle cx="466.25" cy="25" r="5" fill="#f59e0b"/>
<circle cx="518.75" cy="115" r="5" fill="#f59e0b"/>
<circle cx="571.25" cy="25" r="5" fill="#f59e0b"/>
<circle cx="623.75" cy="115" r="5" fill="#f59e0b"/>
<circle cx="676.25" cy="25" r="5" fill="#f59e0b"/>
<circle cx="728.75" cy="115" r="5" fill="#f59e0b"/>
<circle cx="781.25" cy="25" r="5" fill="#f59e0b"/>
<circle cx="833.75" cy="115" r="5" fill="#f59e0b"/>
</svg>
</div>
</div>
<div class="case good">
<div class="case-meta">
<div class="case-tag">Sicher</div>
<div class="case-name">Überabtastung</div>
<div class="case-rate">f<sub>s</sub> = 8 · f</div>
<div class="case-note">Genug Punkte — die Welle wird Punkt für Punkt nachgezeichnet. So macht es eine CD.</div>
</div>
<div class="plot">
<svg viewBox="0 0 880 140" width="100%" height="140" preserveAspectRatio="none">
<line x1="20" y1="70" x2="860" y2="70" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
<path d="M 20,70 Q 46.25,-20 72.5,70 T 125,70 T 177.5,70 T 230,70 T 282.5,70 T 335,70 T 387.5,70 T 440,70 T 492.5,70 T 545,70 T 597.5,70 T 650,70 T 702.5,70 T 755,70 T 807.5,70 T 860,70"
stroke="#16a34a" stroke-width="2.5" fill="none" opacity="0.9"/>
<circle cx="20" cy="70" r="2.5" fill="#16a34a"/>
<circle cx="33.1" cy="38.2" r="2.5" fill="#16a34a"/>
<circle cx="46.2" cy="25" r="2.5" fill="#16a34a"/>
<circle cx="59.4" cy="38.2" r="2.5" fill="#16a34a"/>
<circle cx="72.5" cy="70" r="2.5" fill="#16a34a"/>
<circle cx="85.6" cy="101.8" r="2.5" fill="#16a34a"/>
<circle cx="98.8" cy="115" r="2.5" fill="#16a34a"/>
<circle cx="111.9" cy="101.8" r="2.5" fill="#16a34a"/>
<circle cx="125" cy="70" r="2.5" fill="#16a34a"/>
<circle cx="138.1" cy="38.2" r="2.5" fill="#16a34a"/>
<circle cx="151.2" cy="25" r="2.5" fill="#16a34a"/>
<circle cx="164.4" cy="38.2" r="2.5" fill="#16a34a"/>
<circle cx="177.5" cy="70" r="2.5" fill="#16a34a"/>
<circle cx="190.6" cy="101.8" r="2.5" fill="#16a34a"/>
<circle cx="203.8" cy="115" r="2.5" fill="#16a34a"/>
<circle cx="216.9" cy="101.8" r="2.5" fill="#16a34a"/>
<circle cx="230" cy="70" r="2.5" fill="#16a34a"/>
<circle cx="243.1" cy="38.2" r="2.5" fill="#16a34a"/>
<circle cx="256.2" cy="25" r="2.5" fill="#16a34a"/>
<circle cx="269.4" cy="38.2" r="2.5" fill="#16a34a"/>
<circle cx="282.5" cy="70" r="2.5" fill="#16a34a"/>
<circle cx="295.6" cy="101.8" r="2.5" fill="#16a34a"/>
<circle cx="308.8" cy="115" r="2.5" fill="#16a34a"/>
<circle cx="321.9" cy="101.8" r="2.5" fill="#16a34a"/>
<circle cx="335" cy="70" r="2.5" fill="#16a34a"/>
<circle cx="348.1" cy="38.2" r="2.5" fill="#16a34a"/>
<circle cx="361.2" cy="25" r="2.5" fill="#16a34a"/>
<circle cx="374.4" cy="38.2" r="2.5" fill="#16a34a"/>
<circle cx="387.5" cy="70" r="2.5" fill="#16a34a"/>
<circle cx="400.6" cy="101.8" r="2.5" fill="#16a34a"/>
<circle cx="413.8" cy="115" r="2.5" fill="#16a34a"/>
<circle cx="426.9" cy="101.8" r="2.5" fill="#16a34a"/>
<circle cx="440" cy="70" r="2.5" fill="#16a34a"/>
<circle cx="453.1" cy="38.2" r="2.5" fill="#16a34a"/>
<circle cx="466.2" cy="25" r="2.5" fill="#16a34a"/>
<circle cx="479.4" cy="38.2" r="2.5" fill="#16a34a"/>
<circle cx="492.5" cy="70" r="2.5" fill="#16a34a"/>
<circle cx="505.6" cy="101.8" r="2.5" fill="#16a34a"/>
<circle cx="518.8" cy="115" r="2.5" fill="#16a34a"/>
<circle cx="531.9" cy="101.8" r="2.5" fill="#16a34a"/>
<circle cx="545" cy="70" r="2.5" fill="#16a34a"/>
<circle cx="558.1" cy="38.2" r="2.5" fill="#16a34a"/>
<circle cx="571.2" cy="25" r="2.5" fill="#16a34a"/>
<circle cx="584.4" cy="38.2" r="2.5" fill="#16a34a"/>
<circle cx="597.5" cy="70" r="2.5" fill="#16a34a"/>
<circle cx="610.6" cy="101.8" r="2.5" fill="#16a34a"/>
<circle cx="623.8" cy="115" r="2.5" fill="#16a34a"/>
<circle cx="636.9" cy="101.8" r="2.5" fill="#16a34a"/>
<circle cx="650" cy="70" r="2.5" fill="#16a34a"/>
<circle cx="663.1" cy="38.2" r="2.5" fill="#16a34a"/>
<circle cx="676.2" cy="25" r="2.5" fill="#16a34a"/>
<circle cx="689.4" cy="38.2" r="2.5" fill="#16a34a"/>
<circle cx="702.5" cy="70" r="2.5" fill="#16a34a"/>
<circle cx="715.6" cy="101.8" r="2.5" fill="#16a34a"/>
<circle cx="728.8" cy="115" r="2.5" fill="#16a34a"/>
<circle cx="741.9" cy="101.8" r="2.5" fill="#16a34a"/>
<circle cx="755" cy="70" r="2.5" fill="#16a34a"/>
<circle cx="768.1" cy="38.2" r="2.5" fill="#16a34a"/>
<circle cx="781.2" cy="25" r="2.5" fill="#16a34a"/>
<circle cx="794.4" cy="38.2" r="2.5" fill="#16a34a"/>
<circle cx="807.5" cy="70" r="2.5" fill="#16a34a"/>
<circle cx="820.6" cy="101.8" r="2.5" fill="#16a34a"/>
<circle cx="833.8" cy="115" r="2.5" fill="#16a34a"/>
<circle cx="846.9" cy="101.8" r="2.5" fill="#16a34a"/>
</svg>
</div>
</div>
</div>
<div class="verdict">
<div class="verdict-q">f<sub>s</sub> ≥ 2 · f<sub>max</sub>. So einfach. So endgültig.</div>
<div class="verdict-a">Das Ohr hört bis <strong>20 kHz</strong>. 2 × 20 = 40 kHz. Die CD nimmt <code>44,1 kHz</code> — die 4,1 sind Sicherheits-Marge.</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/nyquist-diagram.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

slides/223015b-2026/assets/demos/pivot-signal-zu-byte.html
+173
View File
@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Wir haben gelernt zu lesen — jetzt: wie kommt es rein?</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--done: #94a3b8;
--next: #d63384;
--bytes: #0891b2;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 32px 40px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.7rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 36px; font-size: 1.05rem; }
.sub strong { color: var(--dark); }
.pivot {
display: grid;
grid-template-columns: 200px 1fr 240px 1fr 200px;
gap: 8px;
max-width: 1200px;
margin: 0 auto;
align-items: center;
}
.station {
border: 2px solid var(--border);
border-radius: 12px;
padding: 18px 14px;
background: #fff;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.station.bytes { border-color: var(--bytes); background: #0f0f23; color: #fff; }
.station-tag {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
}
.station.bytes .station-tag { color: #94a3b8; }
.station-name { font-size: 1.3rem; font-weight: 700; }
.station.bytes .station-name { color: #67e8f9; }
.station-detail { font-size: 0.85rem; color: var(--muted); }
.station.bytes .station-detail { color: #94a3b8; font-family: ui-monospace, monospace; font-size: 0.78rem; line-height: 1.4; }
.station-art { display: flex; align-items: center; justify-content: center; height: 70px; }
.station-art svg { width: 80%; height: 100%; }
.strang {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 0 6px;
}
.strang-arrow svg { display: block; width: 100%; height: 28px; }
.strang-label {
font-size: 0.95rem;
font-weight: 700;
text-align: center;
line-height: 1.3;
}
.strang.next .strang-label { color: var(--next); }
.strang.done .strang-label { color: var(--done); text-decoration: line-through; text-decoration-color: var(--done); text-decoration-thickness: 1.5px; }
.strang-tag {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
text-align: center;
}
.strang.next .strang-tag { color: var(--next); }
.strang.done .strang-tag { color: var(--done); }
.verdict {
margin-top: 28px;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 2px solid var(--hl);
border-radius: 12px;
padding: 14px 22px;
}
.verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
.verdict-a { font-size: 0.95rem; color: var(--dark); margin-top: 4px; }
.verdict-a strong { color: var(--hl); }
</style>
</head>
<body>
<h1>Wir haben gelernt zu <strong>lesen</strong>. Jetzt: wie kommt es <strong>rein</strong>?</h1>
<div class="sub">Die rechte Seite haben wir abgearbeitet. Die linke ist die nächste Stunde.</div>
<div class="pivot">
<div class="station">
<div class="station-tag">Quelle</div>
<div class="station-name">Welt</div>
<div class="station-art">
<svg viewBox="0 0 120 70" preserveAspectRatio="xMidYMid meet">
<path d="M5,35 Q15,10 25,35 T45,35 T65,35 T85,35 T105,35 T115,35"
stroke="#d63384" stroke-width="2.5" fill="none"/>
<circle cx="115" cy="35" r="3" fill="#d63384"/>
</svg>
</div>
<div class="station-detail">Schallwelle · Lichtwelle<br>kontinuierlich · analog</div>
</div>
<div class="strang next">
<div class="strang-tag">jetzt dran</div>
<div class="strang-arrow">
<svg viewBox="0 0 220 28" preserveAspectRatio="none">
<line x1="6" y1="14" x2="200" y2="14" stroke="#d63384" stroke-width="2.5"/>
<path d="M195,7 L208,14 L195,21" stroke="#d63384" stroke-width="2.5" fill="none"/>
</svg>
</div>
<div class="strang-label">Sampling + Quantisierung</div>
</div>
<div class="station bytes">
<div class="station-tag">Mitte</div>
<div class="station-name">Datei</div>
<div class="station-detail">
89 50 4E 47<br>
0D 0A 1A 0A<br>
00 00 00 0D
</div>
</div>
<div class="strang done">
<div class="strang-tag">schon durch</div>
<div class="strang-arrow">
<svg viewBox="0 0 220 28" preserveAspectRatio="none">
<line x1="6" y1="14" x2="200" y2="14" stroke="#94a3b8" stroke-width="2"/>
<path d="M195,7 L208,14 L195,21" stroke="#94a3b8" stroke-width="2" fill="none"/>
</svg>
</div>
<div class="strang-label">Notation · Encoding · Format</div>
</div>
<div class="station">
<div class="station-tag">Ziel</div>
<div class="station-name">Mensch</div>
<div class="station-art">
<svg viewBox="0 0 120 70" preserveAspectRatio="xMidYMid meet">
<rect x="14" y="14" width="92" height="14" rx="2" fill="#1a1a2e"/>
<rect x="14" y="34" width="68" height="6" rx="1" fill="#cbd5e1"/>
<rect x="14" y="44" width="78" height="6" rx="1" fill="#cbd5e1"/>
<rect x="14" y="54" width="56" height="6" rx="1" fill="#cbd5e1"/>
</svg>
</div>
<div class="station-detail">Text · Bild · Klang<br>Bedeutung</div>
</div>
</div>
<div class="verdict">
<div class="verdict-q">Die Datei ist die Mitte. Beide Wege führen durch sie hindurch.</div>
<div class="verdict-a"><strong>Rechts:</strong> aus Byte wird Bedeutung — gerade gelernt. &nbsp;&nbsp; <strong>Links:</strong> aus Welt wird Byte — jetzt.</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/pivot-signal-zu-byte.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

slides/223015b-2026/assets/demos/psychoakustik-grafik.html
+159
View File
@@ -0,0 +1,159 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Psychoakustik — was MP3 weglässt</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--kept: #16a34a;
--tossed: #94a3b8;
--masker: #2563eb;
--threshold: #ea580c;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 30px 40px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.05rem; }
.sub strong { color: var(--dark); }
.chart-wrap {
max-width: 1180px;
margin: 0 auto;
background: #fff;
border: 1.5px solid var(--border);
border-radius: 12px;
padding: 16px 20px;
}
.chart-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
}
.chart-title { font-size: 1rem; font-weight: 700; }
.legend {
display: flex;
gap: 16px;
font-size: 0.78rem;
color: var(--muted);
}
.legend-item { display: flex; align-items: center; gap: 4px; }
.legend-swatch {
width: 14px;
height: 14px;
border-radius: 3px;
display: inline-block;
}
.legend-swatch.kept { background: var(--kept); }
.legend-swatch.tossed { background: var(--tossed); }
.legend-swatch.masker { background: var(--masker); }
.legend-swatch.threshold {
background: transparent;
border-top: 2px dashed var(--threshold);
height: 8px;
margin-top: 5px;
}
.verdict {
margin-top: 22px;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 2px solid var(--hl);
border-radius: 12px;
padding: 14px 22px;
}
.verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
.verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
.verdict-a strong { color: var(--hl); }
</style>
</head>
<body>
<h1>Psychoakustik — was MP3 wegwirft</h1>
<div class="sub">Ein lauter Ton macht leise Nachbarn <strong>unhörbar</strong>. Was nicht hörbar ist, muss man nicht speichern.</div>
<div class="chart-wrap">
<div class="chart-head">
<div class="chart-title">Lautstärke (dB SPL) über Frequenz (Hz, logarithmisch)</div>
<div class="legend">
<span class="legend-item"><span class="legend-swatch masker"></span>lauter Ton (Masker)</span>
<span class="legend-item"><span class="legend-swatch kept"></span>hörbar · bleibt</span>
<span class="legend-item"><span class="legend-swatch tossed"></span>maskiert · raus</span>
<span class="legend-item"><span class="legend-swatch threshold"></span>Hörschwelle</span>
</div>
</div>
<svg viewBox="0 0 1100 380" width="100%" height="380">
<line x1="80" y1="340" x2="1060" y2="340" stroke="#1a1a2e" stroke-width="1.5"/>
<line x1="80" y1="20" x2="80" y2="340" stroke="#1a1a2e" stroke-width="1.5"/>
<text x="20" y="30" font-size="11" fill="#6b7280">dB</text>
<text x="40" y="50" font-size="10" fill="#6b7280" text-anchor="end">100</text>
<text x="40" y="125" font-size="10" fill="#6b7280" text-anchor="end">75</text>
<text x="40" y="200" font-size="10" fill="#6b7280" text-anchor="end">50</text>
<text x="40" y="275" font-size="10" fill="#6b7280" text-anchor="end">25</text>
<text x="40" y="345" font-size="10" fill="#6b7280" text-anchor="end">0</text>
<line x1="75" y1="50" x2="80" y2="50" stroke="#1a1a2e"/>
<line x1="75" y1="125" x2="80" y2="125" stroke="#1a1a2e"/>
<line x1="75" y1="200" x2="80" y2="200" stroke="#1a1a2e"/>
<line x1="75" y1="275" x2="80" y2="275" stroke="#1a1a2e"/>
<text x="100" y="360" font-size="10" fill="#6b7280">20</text>
<text x="260" y="360" font-size="10" fill="#6b7280">100</text>
<text x="420" y="360" font-size="10" fill="#6b7280">500</text>
<text x="580" y="360" font-size="10" fill="#6b7280">1k</text>
<text x="740" y="360" font-size="10" fill="#6b7280">5k</text>
<text x="900" y="360" font-size="10" fill="#6b7280">10k</text>
<text x="1040" y="360" font-size="10" fill="#6b7280">20k</text>
<text x="540" y="378" font-size="11" fill="#6b7280" text-anchor="middle">Frequenz [Hz]</text>
<path d="M100,80 Q170,130 260,200 Q350,290 420,310 Q500,335 580,330 Q670,310 740,295 Q820,280 900,250 Q970,200 1040,80"
stroke="#ea580c" stroke-width="2" stroke-dasharray="5,5" fill="none"/>
<path d="M460,340 L460,210 Q480,165 580,80 Q680,165 700,210 L700,340 Z"
fill="#2563eb" opacity="0.15"/>
<path d="M460,340 L460,210 Q480,165 580,80 Q680,165 700,210 L700,340"
stroke="#2563eb" stroke-width="2" fill="none" stroke-dasharray="2,3"/>
<rect x="572" y="80" width="16" height="260" fill="#2563eb"/>
<circle cx="240" cy="270" r="6" fill="#16a34a"/>
<text x="240" y="260" font-size="10" fill="#16a34a" text-anchor="middle" font-weight="700">bleibt</text>
<circle cx="420" cy="240" r="6" fill="#16a34a"/>
<text x="420" y="230" font-size="10" fill="#16a34a" text-anchor="middle" font-weight="700">bleibt</text>
<circle cx="510" cy="180" r="6" fill="#94a3b8"/>
<text x="510" y="170" font-size="10" fill="#94a3b8" text-anchor="middle">raus</text>
<circle cx="660" cy="200" r="6" fill="#94a3b8"/>
<text x="660" y="190" font-size="10" fill="#94a3b8" text-anchor="middle">raus</text>
<circle cx="640" cy="155" r="6" fill="#94a3b8"/>
<text x="640" y="145" font-size="10" fill="#94a3b8" text-anchor="middle">raus</text>
<circle cx="860" cy="220" r="6" fill="#16a34a"/>
<text x="860" y="210" font-size="10" fill="#16a34a" text-anchor="middle" font-weight="700">bleibt</text>
<circle cx="960" cy="170" r="6" fill="#16a34a"/>
<text x="960" y="160" font-size="10" fill="#16a34a" text-anchor="middle" font-weight="700">bleibt</text>
<text x="595" y="76" font-size="11" fill="#2563eb" font-weight="700">1 kHz · 90 dB · "Masker"</text>
<text x="780" y="105" font-size="11" fill="#ea580c" font-weight="700">Hörschwelle (in Ruhe)</text>
<text x="540" y="160" font-size="11" fill="#2563eb" font-weight="700" text-anchor="middle">Maskierungs-Bereich</text>
</svg>
</div>
<div class="verdict">
<div class="verdict-q">MP3 kodiert nur, was über der <strong>kombinierten Schwelle</strong> liegt.</div>
<div class="verdict-a">Alles unterhalb wird weggeworfen — das Ohr hört es ohnehin nicht. So spart MP3 typischerweise <strong>~90 % der Daten</strong>, ohne dass der Mensch im Alltag etwas vermisst.</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/psychoakustik-grafik.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

slides/223015b-2026/assets/demos/psychovisualitaet-grafik.html
+222
View File
@@ -0,0 +1,222 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Psychovisualität — Luminanz vor Chrominanz</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--full: #2563eb;
--reduced: #7c3aed;
--y: #1a1a2e;
--cb: #2563eb;
--cr: #ef4444;
--bar-bg: #e2e8f0;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 30px 40px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: 1.05rem; }
.sub strong { color: var(--dark); }
.compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
max-width: 1180px;
margin: 0 auto;
}
.col {
border: 2px solid;
border-radius: 12px;
padding: 16px 20px;
background: #fff;
display: flex;
flex-direction: column;
gap: 12px;
}
.col.full { border-color: var(--full); }
.col.reduced { border-color: var(--reduced); }
.col-head { display: flex; justify-content: space-between; align-items: baseline; }
.col-tag {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
}
.col-name { font-size: 1.25rem; font-weight: 700; }
.col.full .col-name { color: var(--full); }
.col.reduced .col-name { color: var(--reduced); }
.col-format {
font-family: ui-monospace, monospace;
font-size: 0.82rem;
color: var(--muted);
}
.preview {
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border);
}
.preview svg { display: block; }
.channels {
display: flex;
flex-direction: column;
gap: 6px;
}
.channel { display: grid; grid-template-columns: 90px 1fr 60px; gap: 8px; align-items: center; font-size: 0.85rem; }
.channel-label {
font-family: ui-monospace, monospace;
font-weight: 700;
}
.channel-bar { height: 14px; background: var(--bar-bg); border-radius: 3px; overflow: hidden; }
.channel-bar .fill { height: 100%; border-radius: 3px; }
.channel-bar .fill.y { background: var(--y); }
.channel-bar .fill.cb { background: var(--cb); }
.channel-bar .fill.cr { background: var(--cr); }
.channel-pct {
font-family: ui-monospace, monospace;
font-size: 0.78rem;
color: var(--muted);
text-align: right;
}
.summary-line {
display: flex;
justify-content: space-between;
background: var(--soft);
border-radius: 6px;
padding: 6px 12px;
font-family: ui-monospace, monospace;
font-size: 0.85rem;
color: var(--dark);
}
.summary-line strong { color: var(--hl); }
.verdict {
margin-top: 22px;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 2px solid var(--hl);
border-radius: 12px;
padding: 14px 22px;
}
.verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
.verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
.verdict-a strong { color: var(--hl); }
</style>
</head>
<body>
<h1>Psychovisualität — Luminanz vor Chrominanz</h1>
<div class="sub">Das Auge sieht <strong>Helligkeit</strong> scharf. <strong>Farbe</strong> darf grob bleiben — und das Bild sieht trotzdem identisch aus.</div>
<div class="compare">
<div class="col full">
<div class="col-head">
<span class="col-name">Ohne Subsampling</span>
<span class="col-tag">4:4:4</span>
</div>
<div class="col-format">jedes Pixel speichert Y · Cb · Cr in voller Auflösung</div>
<svg class="preview" viewBox="0 0 320 130" preserveAspectRatio="xMidYMid slice">
<defs>
<linearGradient id="full-sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fde68a"/>
<stop offset="55%" stop-color="#fb923c"/>
<stop offset="100%" stop-color="#7c3aed"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="320" height="130" fill="url(#full-sky)"/>
<circle cx="230" cy="50" r="22" fill="#fef3c7"/>
<path d="M0,90 L40,75 L90,87 L140,68 L190,82 L240,66 L290,80 L320,72 L320,130 L0,130 Z" fill="#1e1b4b"/>
<path d="M0,108 L60,100 L120,108 L180,98 L240,106 L300,98 L320,103 L320,130 L0,130 Z" fill="#0f172a" opacity="0.7"/>
</svg>
<div class="channels">
<div class="channel">
<span class="channel-label">Y</span>
<div class="channel-bar"><div class="fill y" style="width:100%"></div></div>
<span class="channel-pct">100 %</span>
</div>
<div class="channel">
<span class="channel-label">Cb</span>
<div class="channel-bar"><div class="fill cb" style="width:100%"></div></div>
<span class="channel-pct">100 %</span>
</div>
<div class="channel">
<span class="channel-label">Cr</span>
<div class="channel-bar"><div class="fill cr" style="width:100%"></div></div>
<span class="channel-pct">100 %</span>
</div>
</div>
<div class="summary-line">
<span>Datenmenge:</span>
<span><strong>100 %</strong></span>
</div>
</div>
<div class="col reduced">
<div class="col-head">
<span class="col-name">JPEG · H.264 Standard</span>
<span class="col-tag">4:2:0</span>
</div>
<div class="col-format">Y voll · Cb &amp; Cr nur in 2×2-Pixel-Blöcken</div>
<svg class="preview" viewBox="0 0 320 130" preserveAspectRatio="xMidYMid slice">
<defs>
<linearGradient id="red-sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fde68a"/>
<stop offset="55%" stop-color="#fb923c"/>
<stop offset="100%" stop-color="#7c3aed"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="320" height="130" fill="url(#red-sky)"/>
<circle cx="230" cy="50" r="22" fill="#fef3c7"/>
<path d="M0,90 L40,75 L90,87 L140,68 L190,82 L240,66 L290,80 L320,72 L320,130 L0,130 Z" fill="#1e1b4b"/>
<path d="M0,108 L60,100 L120,108 L180,98 L240,106 L300,98 L320,103 L320,130 L0,130 Z" fill="#0f172a" opacity="0.7"/>
</svg>
<div class="channels">
<div class="channel">
<span class="channel-label">Y</span>
<div class="channel-bar"><div class="fill y" style="width:100%"></div></div>
<span class="channel-pct">100 %</span>
</div>
<div class="channel">
<span class="channel-label">Cb</span>
<div class="channel-bar"><div class="fill cb" style="width:25%"></div></div>
<span class="channel-pct">25 %</span>
</div>
<div class="channel">
<span class="channel-label">Cr</span>
<div class="channel-bar"><div class="fill cr" style="width:25%"></div></div>
<span class="channel-pct">25 %</span>
</div>
</div>
<div class="summary-line">
<span>Datenmenge:</span>
<span><strong>50 %</strong></span>
</div>
</div>
</div>
<div class="verdict">
<div class="verdict-q">Halbe Datenmenge. Identisches Bild — für dein Auge.</div>
<div class="verdict-a">JPEG, H.264, H.265, WebP — alle reduzieren die Farb-Auflösung auf <strong>ein Viertel</strong>. Das ist Psychovisualität: was wir nicht scharf sehen, muss man nicht scharf speichern.</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/psychovisualitaet-grafik.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

slides/223015b-2026/assets/demos/raster-vs-vektor.html
+212
View File
@@ -0,0 +1,212 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Raster vs. Vektor — Pixel oder Anweisung?</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--raster: #ea580c;
--vektor: #2563eb;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 30px 40px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: 1.05rem; }
.sub strong { color: var(--dark); }
.pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
max-width: 1180px;
margin: 0 auto;
}
.col {
border: 2px solid;
border-radius: 12px;
padding: 16px 18px;
background: #fff;
display: flex;
flex-direction: column;
gap: 10px;
}
.col.raster { border-color: var(--raster); }
.col.vektor { border-color: var(--vektor); }
.col-head { display: flex; justify-content: space-between; align-items: baseline; }
.col-name { font-size: 1.3rem; font-weight: 700; }
.col.raster .col-name { color: var(--raster); }
.col.vektor .col-name { color: var(--vektor); }
.col-tag {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
}
.col-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
.views {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.view { display: flex; flex-direction: column; gap: 4px; }
.view-label {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
text-align: center;
}
.view-canvas {
background: var(--soft);
border: 1px solid var(--border);
border-radius: 6px;
aspect-ratio: 1.4;
overflow: hidden;
}
.view-canvas svg { display: block; width: 100%; height: 100%; }
.stats {
background: var(--soft);
border-radius: 6px;
padding: 8px 12px;
font-family: ui-monospace, monospace;
font-size: 0.82rem;
color: var(--dark);
line-height: 1.5;
}
.stats .key { color: var(--muted); }
.stats .val { font-weight: 700; }
.verdict {
margin-top: 22px;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 2px solid var(--hl);
border-radius: 12px;
padding: 14px 22px;
}
.verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
.verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
.verdict-a strong { color: var(--hl); }
</style>
</head>
<body>
<h1>Raster vs. Vektor — Pixel oder Anweisung?</h1>
<div class="sub">Beide zeigen ein Häkchen. Wenn man <strong>reinzoomt</strong>, kommt die Wahrheit raus.</div>
<div class="pair">
<div class="col raster">
<div class="col-head">
<span class="col-name">Raster</span>
<span class="col-tag">PNG · JPEG · GIF</span>
</div>
<div class="col-desc">Ein Gitter aus Pixel-Farbwerten. Jede Position ist festgelegt.</div>
<div class="views">
<div class="view">
<div class="view-label">Original (32 × 22 px)</div>
<div class="view-canvas">
<svg viewBox="0 0 320 220" preserveAspectRatio="xMidYMid meet">
<rect x="0" y="0" width="320" height="220" fill="#f8fafc"/>
<g shape-rendering="crispEdges">
<rect x="20" y="120" width="20" height="20" fill="#ea580c"/>
<rect x="40" y="140" width="20" height="20" fill="#ea580c"/>
<rect x="60" y="160" width="20" height="20" fill="#ea580c"/>
<rect x="80" y="180" width="20" height="20" fill="#ea580c"/>
<rect x="100" y="160" width="20" height="20" fill="#ea580c"/>
<rect x="120" y="140" width="20" height="20" fill="#ea580c"/>
<rect x="140" y="120" width="20" height="20" fill="#ea580c"/>
<rect x="160" y="100" width="20" height="20" fill="#ea580c"/>
<rect x="180" y="80" width="20" height="20" fill="#ea580c"/>
<rect x="200" y="60" width="20" height="20" fill="#ea580c"/>
<rect x="220" y="40" width="20" height="20" fill="#ea580c"/>
<rect x="240" y="20" width="20" height="20" fill="#ea580c"/>
</g>
</svg>
</div>
</div>
<div class="view">
<div class="view-label">4× Zoom</div>
<div class="view-canvas">
<svg viewBox="80 60 160 160" preserveAspectRatio="xMidYMid meet">
<rect x="0" y="0" width="320" height="220" fill="#f8fafc"/>
<g shape-rendering="crispEdges">
<rect x="20" y="120" width="20" height="20" fill="#ea580c"/>
<rect x="40" y="140" width="20" height="20" fill="#ea580c"/>
<rect x="60" y="160" width="20" height="20" fill="#ea580c"/>
<rect x="80" y="180" width="20" height="20" fill="#ea580c"/>
<rect x="100" y="160" width="20" height="20" fill="#ea580c"/>
<rect x="120" y="140" width="20" height="20" fill="#ea580c"/>
<rect x="140" y="120" width="20" height="20" fill="#ea580c"/>
<rect x="160" y="100" width="20" height="20" fill="#ea580c"/>
<rect x="180" y="80" width="20" height="20" fill="#ea580c"/>
<rect x="200" y="60" width="20" height="20" fill="#ea580c"/>
<rect x="220" y="40" width="20" height="20" fill="#ea580c"/>
<rect x="240" y="20" width="20" height="20" fill="#ea580c"/>
</g>
</svg>
</div>
</div>
</div>
<div class="stats">
<div><span class="key">Speicher:</span> <span class="val">32 × 22 × 3 Byte = 2 112 Byte</span></div>
<div><span class="key">Beim Zoom:</span> <span class="val">pixelig — Information ist erschöpft</span></div>
</div>
</div>
<div class="col vektor">
<div class="col-head">
<span class="col-name">Vektor</span>
<span class="col-tag">SVG · PDF · Schriftarten</span>
</div>
<div class="col-desc">Mathematische Anweisungen: <code style="background:#0f0f23;color:#5fb3e4;padding:0 4px;border-radius:3px;">polyline 30,110 → 90,170 → 250,30</code></div>
<div class="views">
<div class="view">
<div class="view-label">Original</div>
<div class="view-canvas">
<svg viewBox="0 0 320 220" preserveAspectRatio="xMidYMid meet">
<rect x="0" y="0" width="320" height="220" fill="#f8fafc"/>
<polyline points="30,130 90,190 270,30" stroke="#2563eb" stroke-width="14" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
<div class="view">
<div class="view-label">4× Zoom</div>
<div class="view-canvas">
<svg viewBox="80 60 160 160" preserveAspectRatio="xMidYMid meet">
<rect x="0" y="0" width="320" height="220" fill="#f8fafc"/>
<polyline points="30,130 90,190 270,30" stroke="#2563eb" stroke-width="14" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</div>
<div class="stats">
<div><span class="key">Speicher:</span> <span class="val">3 Punkte + Strichbreite = ~80 Byte</span></div>
<div><span class="key">Beim Zoom:</span> <span class="val">scharf — wird neu berechnet</span></div>
</div>
</div>
</div>
<div class="verdict">
<div class="verdict-q">Pixel sind festgenagelt. Vektoren werden bei jedem Zoom <strong>neu berechnet</strong>.</div>
<div class="verdict-a">Faustregel: <strong>Foto → Raster</strong> (kann nicht „neu berechnet" werden). <strong>Logo, Icon, Schrift → Vektor</strong> (skalierbar ohne Verlust).</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/raster-vs-vektor.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

slides/223015b-2026/assets/demos/summary-kap02.html
+189
View File
@@ -0,0 +1,189 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Was wir über Kompression gelernt haben</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--lossless: #16a34a;
--lossy: #ef4444;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 30px 40px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 1.05rem; }
.sub strong { color: var(--dark); }
.compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
max-width: 1180px;
margin: 0 auto;
}
.col {
border: 2px solid;
border-radius: 12px;
padding: 18px 22px;
background: #fff;
display: flex;
flex-direction: column;
gap: 12px;
}
.col.lossless { border-color: var(--lossless); }
.col.lossy { border-color: var(--lossy); }
.col-head { display: flex; justify-content: space-between; align-items: baseline; }
.col-name { font-size: 1.4rem; font-weight: 700; }
.col.lossless .col-name { color: var(--lossless); }
.col.lossy .col-name { color: var(--lossy); }
.col-tag {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
}
.row { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; }
.row-key {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
padding-top: 3px;
}
.row-val { font-size: 0.92rem; line-height: 1.5; color: var(--dark); }
.row-val strong {
font-family: ui-monospace, monospace;
background: var(--soft);
padding: 1px 6px;
border-radius: 4px;
}
.matrix {
margin-top: 22px;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
background: var(--soft);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 14px 22px;
}
.matrix-head {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin-bottom: 8px;
}
.matrix-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 8px 16px;
font-size: 0.88rem;
}
.matrix-grid .scenario { font-weight: 700; color: var(--dark); }
.matrix-grid .answer {
font-family: ui-monospace, monospace;
color: var(--dark);
}
.matrix-grid .answer.lossless { color: var(--lossless); font-weight: 700; }
.matrix-grid .answer.lossy { color: var(--lossy); font-weight: 700; }
.verdict {
margin-top: 18px;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 2px solid var(--hl);
border-radius: 12px;
padding: 14px 22px;
}
.verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
.verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
.verdict-a strong { color: var(--hl); }
</style>
</head>
<body>
<h1>Was wir über Kompression gelernt haben</h1>
<div class="sub">Zwei fundamental verschiedene Wege, dasselbe Ziel: <strong>Daten kleiner machen.</strong></div>
<div class="compare">
<div class="col lossless">
<div class="col-head">
<span class="col-name">Verlustfrei</span>
<span class="col-tag">Lossless</span>
</div>
<div class="row">
<div class="row-key">Was passiert</div>
<div class="row-val">Redundanz raus — Wiederholungen kürzer schreiben</div>
<div class="row-key">Umkehrbar</div>
<div class="row-val">Ja. Aus der komprimierten Datei wird das <strong>exakte</strong> Original wieder.</div>
<div class="row-key">Verfahren</div>
<div class="row-val">RLE, Huffman, Deflate, LZ77/LZ78</div>
<div class="row-key">Formate</div>
<div class="row-val">ZIP · PNG · FLAC · TIFF · RAW</div>
<div class="row-key">Faktor</div>
<div class="row-val">2× – 5× (typisch)</div>
</div>
</div>
<div class="col lossy">
<div class="col-head">
<span class="col-name">Verlustbehaftet</span>
<span class="col-tag">Lossy</span>
</div>
<div class="row">
<div class="row-key">Was passiert</div>
<div class="row-val">Irrelevanz raus — was Mensch nicht wahrnimmt, wird weggeworfen</div>
<div class="row-key">Umkehrbar</div>
<div class="row-val">Nein. Einmal weg, für immer weg.</div>
<div class="row-key">Trick</div>
<div class="row-val">Psychoakustik (MP3) · Psychovisualität (JPEG)</div>
<div class="row-key">Formate</div>
<div class="row-val">MP3 · AAC · JPEG · WebP · H.264 · H.265</div>
<div class="row-key">Faktor</div>
<div class="row-val">10× – 100× (typisch)</div>
</div>
</div>
</div>
<div class="matrix">
<div class="matrix-head">Entscheidungsmatrix — wann nehme ich welches?</div>
<div class="matrix-grid">
<div class="scenario">Foto-Archiv (RAW)</div>
<div class="answer lossless">Lossless</div>
<div class="scenario">Spotify-Stream</div>
<div class="answer lossy">Lossy</div>
<div class="scenario">Code-Repository</div>
<div class="answer lossless">Lossless (ZIP)</div>
<div class="scenario">Instagram-Foto</div>
<div class="answer lossy">Lossy (JPEG)</div>
<div class="scenario">Studio-Master-Track</div>
<div class="answer lossless">Lossless (FLAC)</div>
<div class="scenario">YouTube-Video</div>
<div class="answer lossy">Lossy (H.264)</div>
</div>
</div>
<div class="verdict">
<div class="verdict-q">Lossless für Archiv und Code. Lossy für Streaming und Anzeige.</div>
<div class="verdict-a">Faustregel: <strong>Werkzeug</strong> (du arbeitest noch dran) → Lossless. <strong>Konsum</strong> (du schaust/hörst nur) → Lossy.</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/summary-kap02.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

slides/223015b-2026/assets/demos/summary-organizer.html
+188
View File
@@ -0,0 +1,188 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Was wir in 90 Minuten gelernt haben</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--left: #d63384;
--right: #0891b2;
--bytes: #0891b2;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 30px 40px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 28px; font-size: 1.05rem; }
.sub strong { color: var(--dark); }
.recap {
display: grid;
grid-template-columns: 160px 1fr 200px 1fr 160px;
gap: 10px;
max-width: 1200px;
margin: 0 auto;
align-items: center;
}
.station {
border: 2px solid var(--border);
border-radius: 10px;
padding: 18px 12px;
background: #fff;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.station.bytes { border-color: var(--bytes); background: #0f0f23; color: #fff; }
.station-tag {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
}
.station.bytes .station-tag { color: #94a3b8; }
.station-name { font-size: 1.3rem; font-weight: 700; }
.station.bytes .station-name { color: #67e8f9; }
.station-detail { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.station.bytes .station-detail { color: #94a3b8; font-family: ui-monospace, monospace; font-size: 0.76rem; line-height: 1.35; }
.strang {
display: flex;
flex-direction: column;
gap: 6px;
padding: 0 6px;
}
.strang-arrow { text-align: center; }
.strang-arrow svg { width: 100%; height: 18px; }
.strang-title {
font-size: 0.92rem;
font-weight: 700;
text-align: center;
line-height: 1.3;
}
.strang.left .strang-title { color: var(--left); }
.strang.right .strang-title { color: var(--right); }
.strang-list {
display: flex;
flex-direction: column;
gap: 3px;
list-style: none;
margin: 0;
padding: 0;
background: var(--soft);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 12px;
}
.strang-list li {
font-size: 0.82rem;
color: var(--dark);
padding-left: 12px;
position: relative;
line-height: 1.4;
}
.strang-list li::before {
content: "·";
position: absolute;
left: 0;
top: 0;
font-weight: 700;
}
.strang.left .strang-list li::before { color: var(--left); }
.strang.right .strang-list li::before { color: var(--right); }
.verdict {
margin-top: 22px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 2px solid var(--hl);
border-radius: 12px;
padding: 14px 22px;
}
.verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
.verdict-a { font-size: 0.95rem; color: var(--dark); margin-top: 4px; }
.verdict-a strong { color: var(--hl); }
</style>
</head>
<body>
<h1>Was wir in 90 Minuten gelernt haben</h1>
<div class="sub">Beide Wege gehen durch <strong>dieselbe Mitte</strong>. Du kennst jetzt alle Stationen.</div>
<div class="recap">
<div class="station">
<div class="station-tag">Quelle</div>
<div class="station-name">Welt</div>
<div class="station-detail">Schallwelle<br>Lichtwelle<br>kontinuierlich · analog</div>
</div>
<div class="strang left">
<div class="strang-arrow">
<svg viewBox="0 0 200 18" preserveAspectRatio="none">
<line x1="6" y1="9" x2="180" y2="9" stroke="#d63384" stroke-width="2"/>
<path d="M174,3 L188,9 L174,15" stroke="#d63384" stroke-width="2" fill="none"/>
</svg>
</div>
<div class="strang-title">Welt → Byte</div>
<ul class="strang-list">
<li>Sampling-Rate</li>
<li>Bittiefe · Quantisierung</li>
<li>Datenrate-Formel</li>
<li>Nyquist · 2·f<sub>max</sub></li>
<li>Aliasing &amp; Moiré</li>
<li>44,1 kHz = 2·20 kHz + Marge</li>
</ul>
</div>
<div class="station bytes">
<div class="station-tag">Mitte</div>
<div class="station-name">Datei</div>
<div class="station-detail">
Byte-Strom<br>
89 50 4E 47<br>
nichts als Zahlen
</div>
</div>
<div class="strang right">
<div class="strang-arrow">
<svg viewBox="0 0 200 18" preserveAspectRatio="none">
<line x1="6" y1="9" x2="180" y2="9" stroke="#0891b2" stroke-width="2"/>
<path d="M174,3 L188,9 L174,15" stroke="#0891b2" stroke-width="2" fill="none"/>
</svg>
</div>
<div class="strang-title">Byte → Bedeutung</div>
<ul class="strang-list">
<li>Bit · Byte · Hex</li>
<li>8 Bit = 256 Zustände</li>
<li>ASCII · UTF-8</li>
<li>Magic Number</li>
<li>KB vs KiB</li>
<li>Hex im Alltag (CSS, MAC)</li>
</ul>
</div>
<div class="station">
<div class="station-tag">Ziel</div>
<div class="station-name">Mensch</div>
<div class="station-detail">Text · Bild · Klang<br>Bedeutung<br>verstehen</div>
</div>
</div>
<div class="verdict">
<div class="verdict-q">Eine Datei ist kein Mysterium. Es ist eine <strong>Reihe von Zahlen</strong> mit zwei Geschichten dran.</div>
<div class="verdict-a">Eine Geschichte erzählt, <strong>woher</strong> die Zahlen kommen. Die andere, <strong>was</strong> sie bedeuten. Beide kennst du jetzt.</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/summary-organizer.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

slides/223015b-2026/assets/demos/three-views.html
+120
View File
@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Dieselben Byte — drei Perspektiven</title>
<style>
:root {
--hl: #d63384;
--dark: #1a1a2e;
--muted: #6b7280;
--border: #cbd5e1;
--bg-soft: #f8fafc;
--magic: #ef4444;
--format: #2563eb;
--transport: #16a34a;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 24px 28px; }
h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 18px; font-size: 0.95rem; }
.stage { display: flex; flex-direction: column; gap: 14px; align-items: stretch; max-width: 1080px; margin: 0 auto; }
.row { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: center; }
.label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-align: right; white-space: nowrap; }
.label small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); margin-top: 2px; font-size: 0.8em; white-space: nowrap; }
.panel { padding: 14px 16px; border: 2px solid var(--border); border-radius: 8px; background: var(--bg-soft); }
.panel.bin { background: #0f0f23; color: #fff; border-color: var(--dark); }
.panel.bin code { color: #e5e7eb; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; word-break: break-all; line-height: 1.5; }
.hex-bytes { display: flex; flex-wrap: wrap; gap: 8px; }
.hex-byte { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
.semantic { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; }
.group { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 6px; min-width: 70px; }
.group .bytes { display: flex; gap: 4px; }
.group .b { background: #fff; border: 1px solid currentColor; border-radius: 3px; padding: 3px 7px; font-family: ui-monospace, monospace; font-size: 1rem; font-weight: 700; color: var(--dark); }
.group .tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.group .meaning { font-size: 0.78rem; line-height: 1.3; color: var(--dark); }
.group.magic { background: #fee2e2; color: var(--magic); }
.group.format { background: #dbeafe; color: var(--format); }
.group.transport { background: #dcfce7; color: var(--transport); }
.arrow-row { display: flex; justify-content: center; }
.arrow {
width: 0; height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-top: 14px solid var(--hl);
}
.footnote { margin-top: 16px; font-size: 0.88rem; color: var(--muted); text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; }
.footnote strong { color: var(--dark); }
</style>
</head>
<body>
<h1>Dieselben 8 Byte — drei Perspektiven</h1>
<div class="sub">PNG-Datei-Anfang: <code style="font-family:ui-monospace,monospace">89 50 4E 47 0D 0A 1A 0A</code></div>
<div class="stage">
<div class="row">
<div class="label">1 · Bitstream<small>was wirklich gespeichert wird</small></div>
<div class="panel bin">
<code class="mono">10001001&nbsp;01010000&nbsp;01001110&nbsp;01000111&nbsp;00001101&nbsp;00001010&nbsp;00011010&nbsp;00001010</code>
</div>
</div>
<div class="arrow-row"><div class="arrow"></div></div>
<div class="row">
<div class="label">2 · Hex<small>gruppiert in 8-Bit-Häppchen</small></div>
<div class="panel">
<div class="hex-bytes">
<span class="hex-byte">89</span>
<span class="hex-byte">50</span>
<span class="hex-byte">4E</span>
<span class="hex-byte">47</span>
<span class="hex-byte">0D</span>
<span class="hex-byte">0A</span>
<span class="hex-byte">1A</span>
<span class="hex-byte">0A</span>
</div>
</div>
</div>
<div class="arrow-row"><div class="arrow"></div></div>
<div class="row">
<div class="label">3 · Bedeutung<small>was die Byte sagen</small></div>
<div class="panel">
<div class="semantic">
<div class="group magic">
<div class="bytes"><span class="b">89</span></div>
<div class="tag">Magic Byte</div>
<div class="meaning">&gt; 127 → "Ich bin Binär, kein Text"</div>
</div>
<div class="group format">
<div class="bytes"><span class="b">50</span><span class="b">4E</span><span class="b">47</span></div>
<div class="tag">Format-Kürzel</div>
<div class="meaning">P · N · G (ASCII) → "PNG-Datei"</div>
</div>
<div class="group transport">
<div class="bytes"><span class="b">0D</span><span class="b">0A</span><span class="b">1A</span><span class="b">0A</span></div>
<div class="tag">Transport-Schutz</div>
<div class="meaning">CR · LF · EOF · LF → erkennt kaputte Übertragung</div>
</div>
</div>
</div>
</div>
</div>
<div class="footnote">
Byte ändern sich nicht — nur unsere <strong>Brille</strong>. Bitstream zeigt das <em>was</em>, Hex das <em>wie kompakt</em>, Bedeutung das <em>warum</em>.
</div>
</body>
</html>
slides/223015b-2026/assets/demos/three-views.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

slides/223015b-2026/assets/demos/usb-c-drei-achsen.html
+217
View File
@@ -0,0 +1,217 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>USB-C — drei Achsen, eine Verwirrung</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--stecker: #2563eb;
--kabel: #ea580c;
--protokoll: #7c3aed;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 28px 40px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.05rem; }
.sub strong { color: var(--dark); }
.axes {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 18px;
max-width: 1200px;
margin: 0 auto;
}
.axis {
border: 2px solid;
border-radius: 12px;
padding: 14px 16px;
background: #fff;
display: flex;
flex-direction: column;
gap: 10px;
}
.axis.stecker { border-color: var(--stecker); }
.axis.kabel { border-color: var(--kabel); }
.axis.protokoll { border-color: var(--protokoll); }
.axis-head { display: flex; justify-content: space-between; align-items: baseline; }
.axis-num {
font-family: ui-monospace, monospace;
font-size: 0.72rem;
font-weight: 700;
color: var(--muted);
}
.axis-name { font-size: 1.15rem; font-weight: 700; }
.axis.stecker .axis-name { color: var(--stecker); }
.axis.kabel .axis-name { color: var(--kabel); }
.axis.protokoll .axis-name { color: var(--protokoll); }
.axis-tagline {
font-size: 0.82rem;
color: var(--muted);
line-height: 1.4;
}
.axis-tagline strong { color: var(--dark); }
.icon {
background: var(--soft);
border-radius: 6px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.icon svg { display: block; }
.options {
font-size: 0.82rem;
line-height: 1.6;
color: var(--dark);
background: var(--soft);
border-radius: 6px;
padding: 10px 14px;
}
.options strong {
font-family: ui-monospace, monospace;
font-size: 0.78rem;
padding: 1px 5px;
border-radius: 3px;
background: #fff;
border: 1px solid var(--border);
}
.axis.stecker .options strong { color: var(--stecker); }
.axis.kabel .options strong { color: var(--kabel); }
.axis.protokoll .options strong { color: var(--protokoll); }
.scenario {
margin-top: 22px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
background: var(--soft);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 14px 22px;
}
.scenario-head {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin-bottom: 6px;
}
.scenario-body {
font-size: 0.92rem;
line-height: 1.5;
}
.scenario-body code {
font-family: ui-monospace, monospace;
background: #fff;
padding: 1px 6px;
border-radius: 4px;
border: 1px solid var(--border);
}
.verdict {
margin-top: 16px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 2px solid var(--hl);
border-radius: 12px;
padding: 14px 22px;
}
.verdict-q { font-size: 1.05rem; font-weight: 700; color: var(--hl); }
.verdict-a { font-size: 0.92rem; color: var(--dark); margin-top: 4px; }
.verdict-a strong { color: var(--hl); }
</style>
</head>
<body>
<h1>USB-C — drei Achsen, eine Verwirrung</h1>
<div class="sub">Derselbe Stecker. <strong>Aber Kabel ≠ Kabel.</strong> <strong>Protokoll ≠ Protokoll.</strong></div>
<div class="axes">
<div class="axis stecker">
<div class="axis-head">
<span class="axis-name">Stecker</span>
<span class="axis-num">1 · MECHANIK</span>
</div>
<div class="axis-tagline">Die <strong>Form</strong>. Was reinsteckt, oval, beidseitig.</div>
<div class="icon">
<svg viewBox="0 0 120 30" width="140" height="40">
<rect x="6" y="9" width="108" height="12" rx="6" fill="#2563eb" opacity="0.18" stroke="#2563eb" stroke-width="2"/>
<rect x="22" y="13" width="76" height="4" rx="2" fill="#2563eb"/>
</svg>
</div>
<div class="options">
Nur eine Sorte: <strong>USB-C</strong> (auch USB Type-C). 24 Pins. Beidseitig steckbar. Andere Stecker-Typen: USB-A, USB-B, Micro-USB — nicht mit C kompatibel.
</div>
</div>
<div class="axis kabel">
<div class="axis-head">
<span class="axis-name">Kabel</span>
<span class="axis-num">2 · WAS DURCH-PASST</span>
</div>
<div class="axis-tagline">Die <strong>Adern</strong>. Was elektrisch transportiert werden kann.</div>
<div class="icon">
<svg viewBox="0 0 160 30" width="180" height="40">
<path d="M10,15 L150,15" stroke="#ea580c" stroke-width="3"/>
<rect x="2" y="8" width="14" height="14" rx="3" fill="#ea580c" opacity="0.4" stroke="#ea580c"/>
<rect x="144" y="8" width="14" height="14" rx="3" fill="#ea580c" opacity="0.4" stroke="#ea580c"/>
</svg>
</div>
<div class="options">
<strong>Charge-only</strong> · billig, nur Strom · 5 W<br>
<strong>USB 2.0</strong> · 480 Mbit/s · 60 W (3 A)<br>
<strong>USB 3.2 Gen 2</strong> · 10 Gbit/s · 100 W<br>
<strong>Thunderbolt 4</strong> · 40 Gbit/s · 240 W
</div>
</div>
<div class="axis protokoll">
<div class="axis-head">
<span class="axis-name">Protokoll</span>
<span class="axis-num">3 · WAS LÄUFT</span>
</div>
<div class="axis-tagline">Die <strong>Sprache</strong>. Was die zwei Geräte miteinander reden.</div>
<div class="icon">
<svg viewBox="0 0 160 30" width="180" height="40">
<circle cx="20" cy="15" r="6" fill="#7c3aed"/>
<path d="M30,15 L130,15" stroke="#7c3aed" stroke-width="2" stroke-dasharray="6,4"/>
<circle cx="140" cy="15" r="6" fill="#7c3aed"/>
</svg>
</div>
<div class="options">
<strong>USB-PD</strong> · Power Delivery (Laden)<br>
<strong>USB 2/3/4</strong> · Datenübertragung<br>
<strong>Thunderbolt 3/4</strong> · Daten + Display<br>
<strong>DisplayPort Alt</strong> · Monitor anschließen<br>
<strong>HDMI Alt</strong> · weiter HDMI rausführen
</div>
</div>
</div>
<div class="scenario">
<div class="scenario-head">Konkret: warum lädt der Laptop nicht?</div>
<div class="scenario-body">
USB-C-Port am Laptop ist da (<strong>Stecker</strong> stimmt). Aber der Aldi-Kabel ist <code>Charge-only</code> mit <code>5 W</code> (<strong>Kabel</strong> kann nicht genug Strom liefern). Oder der Port am Laptop unterstützt nur <code>USB-PD</code> mit 100 W, das Netzteil meldet aber nur 65 W (<strong>Protokoll</strong>-Handshake scheitert). <em>Eine der drei Achsen passt nicht.</em>
</div>
</div>
<div class="verdict">
<div class="verdict-q">Drei Achsen. Drei unabhängige Fragen. Drei Gründe, warum's nicht funktioniert.</div>
<div class="verdict-a">Beim nächsten „USB-C-Kabel funktioniert nicht": <strong>Stecker passt → Kabel-Spec checken → Protokoll-Support prüfen.</strong> In dieser Reihenfolge.</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/usb-c-drei-achsen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

slides/223015b-2026/assets/demos/why-8-bit.html
+135
View File
@@ -0,0 +1,135 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Warum 8 Bit? Adressierung im Speicher</title>
<style>
:root {
--hl: #d63384;
--dark: #1a1a2e;
--muted: #6b7280;
--border: #cbd5e1;
--bg-soft: #f8fafc;
--bad: #ef4444;
--good: #16a34a;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 24px 28px; }
h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
.stage { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 1100px; margin: 0 auto; }
.ram-wrap { display: flex; gap: 18px; align-items: stretch; }
.ram {
display: grid;
grid-template-columns: 90px 90px 230px;
border: 2px solid var(--dark);
border-radius: 8px;
overflow: hidden;
background: var(--bg-soft);
}
.ram .head {
background: var(--dark); color: #fff; padding: 8px 10px;
font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-align: center;
}
.ram .cell {
border-top: 1px solid var(--border); padding: 10px 12px;
font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.05rem; font-weight: 700;
text-align: center; background: #fff;
}
.ram .cell.addr { color: var(--muted); background: var(--bg-soft); }
.ram .cell.bin { font-size: 0.95rem; letter-spacing: 0.05em; }
.ram .row.cur .cell { background: #fef3f8; color: var(--hl); }
.pointer-side { display: flex; flex-direction: column; gap: 12px; padding-top: 36px; }
.ptr-block { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.95rem; }
.ptr-block.ok { background: #dcfce7; color: var(--good); border: 2px solid var(--good); }
.ptr-block.bad { background: #fee2e2; color: var(--bad); border: 2px dashed var(--bad); }
.ptr-block.between {
background: #fff; color: var(--bad); border: 2px dashed var(--bad);
margin: -12px 0 -12px 0;
transform: translateX(-10px);
}
.ptr-block .ico { font-size: 1.3rem; line-height: 1; }
.legend {
display: flex; gap: 22px; padding: 12px 16px; border-top: 1px solid var(--border);
font-size: 0.9rem; color: var(--dark);
}
.legend .row { display: flex; align-items: center; gap: 6px; }
.legend .swatch { width: 14px; height: 14px; border-radius: 3px; }
.conclusion {
margin-top: 6px;
padding: 14px 22px;
background: #fef3f8;
border-left: 4px solid var(--hl);
border-radius: 4px;
font-size: 1rem;
text-align: center;
max-width: 760px;
}
.conclusion strong { color: var(--hl); }
.conclusion code { background: var(--dark); color: #f8f8f8; padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
</style>
</head>
<body>
<h1>Warum 8 Bit? Speicher-Adressierung</h1>
<div class="sub">CPU adressiert <strong>byteweise</strong> — halbe Byte existieren nicht.</div>
<div class="stage">
<div class="ram-wrap">
<div class="ram">
<div class="head">Adresse</div>
<div class="head">Hex</div>
<div class="head">Bit (was im Speicher steht)</div>
<div class="cell addr">0x0000</div>
<div class="cell">48</div>
<div class="cell bin">01001000</div>
<div class="cell addr">0x0001</div>
<div class="cell">65</div>
<div class="cell bin">01100101</div>
<div class="cell addr">0x0002</div>
<div class="cell">6C</div>
<div class="cell bin">01101100</div>
<div class="cell addr">0x0003</div>
<div class="cell">6C</div>
<div class="cell bin">01101100</div>
<div class="cell addr">0x0004</div>
<div class="cell">6F</div>
<div class="cell bin">01101111</div>
<div class="cell addr">0x0005</div>
<div class="cell">21</div>
<div class="cell bin">00100001</div>
</div>
<div class="pointer-side">
<div class="ptr-block ok"><span class="ico">→</span><span>read 0x0000 ✓</span></div>
<div class="ptr-block bad"><span class="ico">✗</span><span>read 0x0000.5 — gibt's nicht</span></div>
<div class="ptr-block ok"><span class="ico">→</span><span>read 0x0001 ✓</span></div>
<div class="ptr-block bad"><span class="ico">✗</span><span>read 0x0001.5 — gibt's nicht</span></div>
<div class="ptr-block ok"><span class="ico">→</span><span>read 0x0002 ✓</span></div>
<div class="ptr-block ok" style="opacity:0.4"><span class="ico">→</span><span>...</span></div>
</div>
</div>
<div class="conclusion">
<strong>Byte = kleinste adressierbare Einheit.</strong><br>
Speichercontroller, Bus und CPU sind alle auf 8-Bit-Häppchen ausgelegt.<br>
Einzelne Bit lesen → muss erst <code>byte = mem[addr]</code>, dann mit <code>byte &amp; 0b1000_0000</code> Bit isolieren.
</div>
</div>
</body>
</html>
slides/223015b-2026/assets/demos/why-8-bit.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

slides/223015b-2026/assets/digital-landscape.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 MiB

slides/223015b-2026/assets/druckwelle.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

slides/223015b-2026/assets/dvd.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 318 KiB

slides/223015b-2026/assets/gif-animation.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

slides/223015b-2026/assets/grayscale-gradient.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

slides/223015b-2026/assets/grayscale-gradient.svg
+258
View File
@@ -0,0 +1,258 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 1440" preserveAspectRatio="none" shape-rendering="crispEdges">
<rect x="0" y="0" width="10" height="1440" fill="rgb(255,255,255)"/>
<rect x="10" y="0" width="10" height="1440" fill="rgb(254,254,254)"/>
<rect x="20" y="0" width="10" height="1440" fill="rgb(253,253,253)"/>
<rect x="30" y="0" width="10" height="1440" fill="rgb(252,252,252)"/>
<rect x="40" y="0" width="10" height="1440" fill="rgb(251,251,251)"/>
<rect x="50" y="0" width="10" height="1440" fill="rgb(250,250,250)"/>
<rect x="60" y="0" width="10" height="1440" fill="rgb(249,249,249)"/>
<rect x="70" y="0" width="10" height="1440" fill="rgb(248,248,248)"/>
<rect x="80" y="0" width="10" height="1440" fill="rgb(247,247,247)"/>
<rect x="90" y="0" width="10" height="1440" fill="rgb(246,246,246)"/>
<rect x="100" y="0" width="10" height="1440" fill="rgb(245,245,245)"/>
<rect x="110" y="0" width="10" height="1440" fill="rgb(244,244,244)"/>
<rect x="120" y="0" width="10" height="1440" fill="rgb(243,243,243)"/>
<rect x="130" y="0" width="10" height="1440" fill="rgb(242,242,242)"/>
<rect x="140" y="0" width="10" height="1440" fill="rgb(241,241,241)"/>
<rect x="150" y="0" width="10" height="1440" fill="rgb(240,240,240)"/>
<rect x="160" y="0" width="10" height="1440" fill="rgb(239,239,239)"/>
<rect x="170" y="0" width="10" height="1440" fill="rgb(238,238,238)"/>
<rect x="180" y="0" width="10" height="1440" fill="rgb(237,237,237)"/>
<rect x="190" y="0" width="10" height="1440" fill="rgb(236,236,236)"/>
<rect x="200" y="0" width="10" height="1440" fill="rgb(235,235,235)"/>
<rect x="210" y="0" width="10" height="1440" fill="rgb(234,234,234)"/>
<rect x="220" y="0" width="10" height="1440" fill="rgb(233,233,233)"/>
<rect x="230" y="0" width="10" height="1440" fill="rgb(232,232,232)"/>
<rect x="240" y="0" width="10" height="1440" fill="rgb(231,231,231)"/>
<rect x="250" y="0" width="10" height="1440" fill="rgb(230,230,230)"/>
<rect x="260" y="0" width="10" height="1440" fill="rgb(229,229,229)"/>
<rect x="270" y="0" width="10" height="1440" fill="rgb(228,228,228)"/>
<rect x="280" y="0" width="10" height="1440" fill="rgb(227,227,227)"/>
<rect x="290" y="0" width="10" height="1440" fill="rgb(226,226,226)"/>
<rect x="300" y="0" width="10" height="1440" fill="rgb(225,225,225)"/>
<rect x="310" y="0" width="10" height="1440" fill="rgb(224,224,224)"/>
<rect x="320" y="0" width="10" height="1440" fill="rgb(223,223,223)"/>
<rect x="330" y="0" width="10" height="1440" fill="rgb(222,222,222)"/>
<rect x="340" y="0" width="10" height="1440" fill="rgb(221,221,221)"/>
<rect x="350" y="0" width="10" height="1440" fill="rgb(220,220,220)"/>
<rect x="360" y="0" width="10" height="1440" fill="rgb(219,219,219)"/>
<rect x="370" y="0" width="10" height="1440" fill="rgb(218,218,218)"/>
<rect x="380" y="0" width="10" height="1440" fill="rgb(217,217,217)"/>
<rect x="390" y="0" width="10" height="1440" fill="rgb(216,216,216)"/>
<rect x="400" y="0" width="10" height="1440" fill="rgb(215,215,215)"/>
<rect x="410" y="0" width="10" height="1440" fill="rgb(214,214,214)"/>
<rect x="420" y="0" width="10" height="1440" fill="rgb(213,213,213)"/>
<rect x="430" y="0" width="10" height="1440" fill="rgb(212,212,212)"/>
<rect x="440" y="0" width="10" height="1440" fill="rgb(211,211,211)"/>
<rect x="450" y="0" width="10" height="1440" fill="rgb(210,210,210)"/>
<rect x="460" y="0" width="10" height="1440" fill="rgb(209,209,209)"/>
<rect x="470" y="0" width="10" height="1440" fill="rgb(208,208,208)"/>
<rect x="480" y="0" width="10" height="1440" fill="rgb(207,207,207)"/>
<rect x="490" y="0" width="10" height="1440" fill="rgb(206,206,206)"/>
<rect x="500" y="0" width="10" height="1440" fill="rgb(205,205,205)"/>
<rect x="510" y="0" width="10" height="1440" fill="rgb(204,204,204)"/>
<rect x="520" y="0" width="10" height="1440" fill="rgb(203,203,203)"/>
<rect x="530" y="0" width="10" height="1440" fill="rgb(202,202,202)"/>
<rect x="540" y="0" width="10" height="1440" fill="rgb(201,201,201)"/>
<rect x="550" y="0" width="10" height="1440" fill="rgb(200,200,200)"/>
<rect x="560" y="0" width="10" height="1440" fill="rgb(199,199,199)"/>
<rect x="570" y="0" width="10" height="1440" fill="rgb(198,198,198)"/>
<rect x="580" y="0" width="10" height="1440" fill="rgb(197,197,197)"/>
<rect x="590" y="0" width="10" height="1440" fill="rgb(196,196,196)"/>
<rect x="600" y="0" width="10" height="1440" fill="rgb(195,195,195)"/>
<rect x="610" y="0" width="10" height="1440" fill="rgb(194,194,194)"/>
<rect x="620" y="0" width="10" height="1440" fill="rgb(193,193,193)"/>
<rect x="630" y="0" width="10" height="1440" fill="rgb(192,192,192)"/>
<rect x="640" y="0" width="10" height="1440" fill="rgb(191,191,191)"/>
<rect x="650" y="0" width="10" height="1440" fill="rgb(190,190,190)"/>
<rect x="660" y="0" width="10" height="1440" fill="rgb(189,189,189)"/>
<rect x="670" y="0" width="10" height="1440" fill="rgb(188,188,188)"/>
<rect x="680" y="0" width="10" height="1440" fill="rgb(187,187,187)"/>
<rect x="690" y="0" width="10" height="1440" fill="rgb(186,186,186)"/>
<rect x="700" y="0" width="10" height="1440" fill="rgb(185,185,185)"/>
<rect x="710" y="0" width="10" height="1440" fill="rgb(184,184,184)"/>
<rect x="720" y="0" width="10" height="1440" fill="rgb(183,183,183)"/>
<rect x="730" y="0" width="10" height="1440" fill="rgb(182,182,182)"/>
<rect x="740" y="0" width="10" height="1440" fill="rgb(181,181,181)"/>
<rect x="750" y="0" width="10" height="1440" fill="rgb(180,180,180)"/>
<rect x="760" y="0" width="10" height="1440" fill="rgb(179,179,179)"/>
<rect x="770" y="0" width="10" height="1440" fill="rgb(178,178,178)"/>
<rect x="780" y="0" width="10" height="1440" fill="rgb(177,177,177)"/>
<rect x="790" y="0" width="10" height="1440" fill="rgb(176,176,176)"/>
<rect x="800" y="0" width="10" height="1440" fill="rgb(175,175,175)"/>
<rect x="810" y="0" width="10" height="1440" fill="rgb(174,174,174)"/>
<rect x="820" y="0" width="10" height="1440" fill="rgb(173,173,173)"/>
<rect x="830" y="0" width="10" height="1440" fill="rgb(172,172,172)"/>
<rect x="840" y="0" width="10" height="1440" fill="rgb(171,171,171)"/>
<rect x="850" y="0" width="10" height="1440" fill="rgb(170,170,170)"/>
<rect x="860" y="0" width="10" height="1440" fill="rgb(169,169,169)"/>
<rect x="870" y="0" width="10" height="1440" fill="rgb(168,168,168)"/>
<rect x="880" y="0" width="10" height="1440" fill="rgb(167,167,167)"/>
<rect x="890" y="0" width="10" height="1440" fill="rgb(166,166,166)"/>
<rect x="900" y="0" width="10" height="1440" fill="rgb(165,165,165)"/>
<rect x="910" y="0" width="10" height="1440" fill="rgb(164,164,164)"/>
<rect x="920" y="0" width="10" height="1440" fill="rgb(163,163,163)"/>
<rect x="930" y="0" width="10" height="1440" fill="rgb(162,162,162)"/>
<rect x="940" y="0" width="10" height="1440" fill="rgb(161,161,161)"/>
<rect x="950" y="0" width="10" height="1440" fill="rgb(160,160,160)"/>
<rect x="960" y="0" width="10" height="1440" fill="rgb(159,159,159)"/>
<rect x="970" y="0" width="10" height="1440" fill="rgb(158,158,158)"/>
<rect x="980" y="0" width="10" height="1440" fill="rgb(157,157,157)"/>
<rect x="990" y="0" width="10" height="1440" fill="rgb(156,156,156)"/>
<rect x="1000" y="0" width="10" height="1440" fill="rgb(155,155,155)"/>
<rect x="1010" y="0" width="10" height="1440" fill="rgb(154,154,154)"/>
<rect x="1020" y="0" width="10" height="1440" fill="rgb(153,153,153)"/>
<rect x="1030" y="0" width="10" height="1440" fill="rgb(152,152,152)"/>
<rect x="1040" y="0" width="10" height="1440" fill="rgb(151,151,151)"/>
<rect x="1050" y="0" width="10" height="1440" fill="rgb(150,150,150)"/>
<rect x="1060" y="0" width="10" height="1440" fill="rgb(149,149,149)"/>
<rect x="1070" y="0" width="10" height="1440" fill="rgb(148,148,148)"/>
<rect x="1080" y="0" width="10" height="1440" fill="rgb(147,147,147)"/>
<rect x="1090" y="0" width="10" height="1440" fill="rgb(146,146,146)"/>
<rect x="1100" y="0" width="10" height="1440" fill="rgb(145,145,145)"/>
<rect x="1110" y="0" width="10" height="1440" fill="rgb(144,144,144)"/>
<rect x="1120" y="0" width="10" height="1440" fill="rgb(143,143,143)"/>
<rect x="1130" y="0" width="10" height="1440" fill="rgb(142,142,142)"/>
<rect x="1140" y="0" width="10" height="1440" fill="rgb(141,141,141)"/>
<rect x="1150" y="0" width="10" height="1440" fill="rgb(140,140,140)"/>
<rect x="1160" y="0" width="10" height="1440" fill="rgb(139,139,139)"/>
<rect x="1170" y="0" width="10" height="1440" fill="rgb(138,138,138)"/>
<rect x="1180" y="0" width="10" height="1440" fill="rgb(137,137,137)"/>
<rect x="1190" y="0" width="10" height="1440" fill="rgb(136,136,136)"/>
<rect x="1200" y="0" width="10" height="1440" fill="rgb(135,135,135)"/>
<rect x="1210" y="0" width="10" height="1440" fill="rgb(134,134,134)"/>
<rect x="1220" y="0" width="10" height="1440" fill="rgb(133,133,133)"/>
<rect x="1230" y="0" width="10" height="1440" fill="rgb(132,132,132)"/>
<rect x="1240" y="0" width="10" height="1440" fill="rgb(131,131,131)"/>
<rect x="1250" y="0" width="10" height="1440" fill="rgb(130,130,130)"/>
<rect x="1260" y="0" width="10" height="1440" fill="rgb(129,129,129)"/>
<rect x="1270" y="0" width="10" height="1440" fill="rgb(128,128,128)"/>
<rect x="1280" y="0" width="10" height="1440" fill="rgb(127,127,127)"/>
<rect x="1290" y="0" width="10" height="1440" fill="rgb(126,126,126)"/>
<rect x="1300" y="0" width="10" height="1440" fill="rgb(125,125,125)"/>
<rect x="1310" y="0" width="10" height="1440" fill="rgb(124,124,124)"/>
<rect x="1320" y="0" width="10" height="1440" fill="rgb(123,123,123)"/>
<rect x="1330" y="0" width="10" height="1440" fill="rgb(122,122,122)"/>
<rect x="1340" y="0" width="10" height="1440" fill="rgb(121,121,121)"/>
<rect x="1350" y="0" width="10" height="1440" fill="rgb(120,120,120)"/>
<rect x="1360" y="0" width="10" height="1440" fill="rgb(119,119,119)"/>
<rect x="1370" y="0" width="10" height="1440" fill="rgb(118,118,118)"/>
<rect x="1380" y="0" width="10" height="1440" fill="rgb(117,117,117)"/>
<rect x="1390" y="0" width="10" height="1440" fill="rgb(116,116,116)"/>
<rect x="1400" y="0" width="10" height="1440" fill="rgb(115,115,115)"/>
<rect x="1410" y="0" width="10" height="1440" fill="rgb(114,114,114)"/>
<rect x="1420" y="0" width="10" height="1440" fill="rgb(113,113,113)"/>
<rect x="1430" y="0" width="10" height="1440" fill="rgb(112,112,112)"/>
<rect x="1440" y="0" width="10" height="1440" fill="rgb(111,111,111)"/>
<rect x="1450" y="0" width="10" height="1440" fill="rgb(110,110,110)"/>
<rect x="1460" y="0" width="10" height="1440" fill="rgb(109,109,109)"/>
<rect x="1470" y="0" width="10" height="1440" fill="rgb(108,108,108)"/>
<rect x="1480" y="0" width="10" height="1440" fill="rgb(107,107,107)"/>
<rect x="1490" y="0" width="10" height="1440" fill="rgb(106,106,106)"/>
<rect x="1500" y="0" width="10" height="1440" fill="rgb(105,105,105)"/>
<rect x="1510" y="0" width="10" height="1440" fill="rgb(104,104,104)"/>
<rect x="1520" y="0" width="10" height="1440" fill="rgb(103,103,103)"/>
<rect x="1530" y="0" width="10" height="1440" fill="rgb(102,102,102)"/>
<rect x="1540" y="0" width="10" height="1440" fill="rgb(101,101,101)"/>
<rect x="1550" y="0" width="10" height="1440" fill="rgb(100,100,100)"/>
<rect x="1560" y="0" width="10" height="1440" fill="rgb(99,99,99)"/>
<rect x="1570" y="0" width="10" height="1440" fill="rgb(98,98,98)"/>
<rect x="1580" y="0" width="10" height="1440" fill="rgb(97,97,97)"/>
<rect x="1590" y="0" width="10" height="1440" fill="rgb(96,96,96)"/>
<rect x="1600" y="0" width="10" height="1440" fill="rgb(95,95,95)"/>
<rect x="1610" y="0" width="10" height="1440" fill="rgb(94,94,94)"/>
<rect x="1620" y="0" width="10" height="1440" fill="rgb(93,93,93)"/>
<rect x="1630" y="0" width="10" height="1440" fill="rgb(92,92,92)"/>
<rect x="1640" y="0" width="10" height="1440" fill="rgb(91,91,91)"/>
<rect x="1650" y="0" width="10" height="1440" fill="rgb(90,90,90)"/>
<rect x="1660" y="0" width="10" height="1440" fill="rgb(89,89,89)"/>
<rect x="1670" y="0" width="10" height="1440" fill="rgb(88,88,88)"/>
<rect x="1680" y="0" width="10" height="1440" fill="rgb(87,87,87)"/>
<rect x="1690" y="0" width="10" height="1440" fill="rgb(86,86,86)"/>
<rect x="1700" y="0" width="10" height="1440" fill="rgb(85,85,85)"/>
<rect x="1710" y="0" width="10" height="1440" fill="rgb(84,84,84)"/>
<rect x="1720" y="0" width="10" height="1440" fill="rgb(83,83,83)"/>
<rect x="1730" y="0" width="10" height="1440" fill="rgb(82,82,82)"/>
<rect x="1740" y="0" width="10" height="1440" fill="rgb(81,81,81)"/>
<rect x="1750" y="0" width="10" height="1440" fill="rgb(80,80,80)"/>
<rect x="1760" y="0" width="10" height="1440" fill="rgb(79,79,79)"/>
<rect x="1770" y="0" width="10" height="1440" fill="rgb(78,78,78)"/>
<rect x="1780" y="0" width="10" height="1440" fill="rgb(77,77,77)"/>
<rect x="1790" y="0" width="10" height="1440" fill="rgb(76,76,76)"/>
<rect x="1800" y="0" width="10" height="1440" fill="rgb(75,75,75)"/>
<rect x="1810" y="0" width="10" height="1440" fill="rgb(74,74,74)"/>
<rect x="1820" y="0" width="10" height="1440" fill="rgb(73,73,73)"/>
<rect x="1830" y="0" width="10" height="1440" fill="rgb(72,72,72)"/>
<rect x="1840" y="0" width="10" height="1440" fill="rgb(71,71,71)"/>
<rect x="1850" y="0" width="10" height="1440" fill="rgb(70,70,70)"/>
<rect x="1860" y="0" width="10" height="1440" fill="rgb(69,69,69)"/>
<rect x="1870" y="0" width="10" height="1440" fill="rgb(68,68,68)"/>
<rect x="1880" y="0" width="10" height="1440" fill="rgb(67,67,67)"/>
<rect x="1890" y="0" width="10" height="1440" fill="rgb(66,66,66)"/>
<rect x="1900" y="0" width="10" height="1440" fill="rgb(65,65,65)"/>
<rect x="1910" y="0" width="10" height="1440" fill="rgb(64,64,64)"/>
<rect x="1920" y="0" width="10" height="1440" fill="rgb(63,63,63)"/>
<rect x="1930" y="0" width="10" height="1440" fill="rgb(62,62,62)"/>
<rect x="1940" y="0" width="10" height="1440" fill="rgb(61,61,61)"/>
<rect x="1950" y="0" width="10" height="1440" fill="rgb(60,60,60)"/>
<rect x="1960" y="0" width="10" height="1440" fill="rgb(59,59,59)"/>
<rect x="1970" y="0" width="10" height="1440" fill="rgb(58,58,58)"/>
<rect x="1980" y="0" width="10" height="1440" fill="rgb(57,57,57)"/>
<rect x="1990" y="0" width="10" height="1440" fill="rgb(56,56,56)"/>
<rect x="2000" y="0" width="10" height="1440" fill="rgb(55,55,55)"/>
<rect x="2010" y="0" width="10" height="1440" fill="rgb(54,54,54)"/>
<rect x="2020" y="0" width="10" height="1440" fill="rgb(53,53,53)"/>
<rect x="2030" y="0" width="10" height="1440" fill="rgb(52,52,52)"/>
<rect x="2040" y="0" width="10" height="1440" fill="rgb(51,51,51)"/>
<rect x="2050" y="0" width="10" height="1440" fill="rgb(50,50,50)"/>
<rect x="2060" y="0" width="10" height="1440" fill="rgb(49,49,49)"/>
<rect x="2070" y="0" width="10" height="1440" fill="rgb(48,48,48)"/>
<rect x="2080" y="0" width="10" height="1440" fill="rgb(47,47,47)"/>
<rect x="2090" y="0" width="10" height="1440" fill="rgb(46,46,46)"/>
<rect x="2100" y="0" width="10" height="1440" fill="rgb(45,45,45)"/>
<rect x="2110" y="0" width="10" height="1440" fill="rgb(44,44,44)"/>
<rect x="2120" y="0" width="10" height="1440" fill="rgb(43,43,43)"/>
<rect x="2130" y="0" width="10" height="1440" fill="rgb(42,42,42)"/>
<rect x="2140" y="0" width="10" height="1440" fill="rgb(41,41,41)"/>
<rect x="2150" y="0" width="10" height="1440" fill="rgb(40,40,40)"/>
<rect x="2160" y="0" width="10" height="1440" fill="rgb(39,39,39)"/>
<rect x="2170" y="0" width="10" height="1440" fill="rgb(38,38,38)"/>
<rect x="2180" y="0" width="10" height="1440" fill="rgb(37,37,37)"/>
<rect x="2190" y="0" width="10" height="1440" fill="rgb(36,36,36)"/>
<rect x="2200" y="0" width="10" height="1440" fill="rgb(35,35,35)"/>
<rect x="2210" y="0" width="10" height="1440" fill="rgb(34,34,34)"/>
<rect x="2220" y="0" width="10" height="1440" fill="rgb(33,33,33)"/>
<rect x="2230" y="0" width="10" height="1440" fill="rgb(32,32,32)"/>
<rect x="2240" y="0" width="10" height="1440" fill="rgb(31,31,31)"/>
<rect x="2250" y="0" width="10" height="1440" fill="rgb(30,30,30)"/>
<rect x="2260" y="0" width="10" height="1440" fill="rgb(29,29,29)"/>
<rect x="2270" y="0" width="10" height="1440" fill="rgb(28,28,28)"/>
<rect x="2280" y="0" width="10" height="1440" fill="rgb(27,27,27)"/>
<rect x="2290" y="0" width="10" height="1440" fill="rgb(26,26,26)"/>
<rect x="2300" y="0" width="10" height="1440" fill="rgb(25,25,25)"/>
<rect x="2310" y="0" width="10" height="1440" fill="rgb(24,24,24)"/>
<rect x="2320" y="0" width="10" height="1440" fill="rgb(23,23,23)"/>
<rect x="2330" y="0" width="10" height="1440" fill="rgb(22,22,22)"/>
<rect x="2340" y="0" width="10" height="1440" fill="rgb(21,21,21)"/>
<rect x="2350" y="0" width="10" height="1440" fill="rgb(20,20,20)"/>
<rect x="2360" y="0" width="10" height="1440" fill="rgb(19,19,19)"/>
<rect x="2370" y="0" width="10" height="1440" fill="rgb(18,18,18)"/>
<rect x="2380" y="0" width="10" height="1440" fill="rgb(17,17,17)"/>
<rect x="2390" y="0" width="10" height="1440" fill="rgb(16,16,16)"/>
<rect x="2400" y="0" width="10" height="1440" fill="rgb(15,15,15)"/>
<rect x="2410" y="0" width="10" height="1440" fill="rgb(14,14,14)"/>
<rect x="2420" y="0" width="10" height="1440" fill="rgb(13,13,13)"/>
<rect x="2430" y="0" width="10" height="1440" fill="rgb(12,12,12)"/>
<rect x="2440" y="0" width="10" height="1440" fill="rgb(11,11,11)"/>
<rect x="2450" y="0" width="10" height="1440" fill="rgb(10,10,10)"/>
<rect x="2460" y="0" width="10" height="1440" fill="rgb(9,9,9)"/>
<rect x="2470" y="0" width="10" height="1440" fill="rgb(8,8,8)"/>
<rect x="2480" y="0" width="10" height="1440" fill="rgb(7,7,7)"/>
<rect x="2490" y="0" width="10" height="1440" fill="rgb(6,6,6)"/>
<rect x="2500" y="0" width="10" height="1440" fill="rgb(5,5,5)"/>
<rect x="2510" y="0" width="10" height="1440" fill="rgb(4,4,4)"/>
<rect x="2520" y="0" width="10" height="1440" fill="rgb(3,3,3)"/>
<rect x="2530" y="0" width="10" height="1440" fill="rgb(2,2,2)"/>
<rect x="2540" y="0" width="10" height="1440" fill="rgb(1,1,1)"/>
<rect x="2550" y="0" width="10" height="1440" fill="rgb(0,0,0)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

slides/223015b-2026/assets/grayscale-zoom.svg
+53
View File
@@ -0,0 +1,53 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
<rect width="1920" height="1080" fill="#ffffff"/>
<text x="960.0" y="100" text-anchor="middle" font-family="sans-serif" font-size="54" fill="#1a1a2e" font-weight="bold">Zoom: die 16 hellsten Abstufungen</text>
<rect x="60.00" y="220" width="101.25" height="500" fill="rgb(255,255,255)" stroke="#1a1a2e" stroke-width="3"/>
<text x="110.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">255</text>
<text x="110.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFF</text>
<rect x="173.25" y="220" width="101.25" height="500" fill="rgb(254,254,254)" stroke="#1a1a2e" stroke-width="3"/>
<text x="223.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">254</text>
<text x="223.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFE</text>
<rect x="286.50" y="220" width="101.25" height="500" fill="rgb(253,253,253)" stroke="#1a1a2e" stroke-width="3"/>
<text x="337.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">253</text>
<text x="337.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFD</text>
<rect x="399.75" y="220" width="101.25" height="500" fill="rgb(252,252,252)" stroke="#1a1a2e" stroke-width="3"/>
<text x="450.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">252</text>
<text x="450.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFC</text>
<rect x="513.00" y="220" width="101.25" height="500" fill="rgb(251,251,251)" stroke="#1a1a2e" stroke-width="3"/>
<text x="563.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">251</text>
<text x="563.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFB</text>
<rect x="626.25" y="220" width="101.25" height="500" fill="rgb(250,250,250)" stroke="#1a1a2e" stroke-width="3"/>
<text x="676.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">250</text>
<text x="676.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFA</text>
<rect x="739.50" y="220" width="101.25" height="500" fill="rgb(249,249,249)" stroke="#1a1a2e" stroke-width="3"/>
<text x="790.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">249</text>
<text x="790.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF9</text>
<rect x="852.75" y="220" width="101.25" height="500" fill="rgb(248,248,248)" stroke="#1a1a2e" stroke-width="3"/>
<text x="903.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">248</text>
<text x="903.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF8</text>
<rect x="966.00" y="220" width="101.25" height="500" fill="rgb(247,247,247)" stroke="#1a1a2e" stroke-width="3"/>
<text x="1016.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">247</text>
<text x="1016.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF7</text>
<rect x="1079.25" y="220" width="101.25" height="500" fill="rgb(246,246,246)" stroke="#1a1a2e" stroke-width="3"/>
<text x="1129.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">246</text>
<text x="1129.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF6</text>
<rect x="1192.50" y="220" width="101.25" height="500" fill="rgb(245,245,245)" stroke="#1a1a2e" stroke-width="3"/>
<text x="1243.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">245</text>
<text x="1243.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF5</text>
<rect x="1305.75" y="220" width="101.25" height="500" fill="rgb(244,244,244)" stroke="#1a1a2e" stroke-width="3"/>
<text x="1356.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">244</text>
<text x="1356.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF4</text>
<rect x="1419.00" y="220" width="101.25" height="500" fill="rgb(243,243,243)" stroke="#1a1a2e" stroke-width="3"/>
<text x="1469.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">243</text>
<text x="1469.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF3</text>
<rect x="1532.25" y="220" width="101.25" height="500" fill="rgb(242,242,242)" stroke="#1a1a2e" stroke-width="3"/>
<text x="1582.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">242</text>
<text x="1582.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF2</text>
<rect x="1645.50" y="220" width="101.25" height="500" fill="rgb(241,241,241)" stroke="#1a1a2e" stroke-width="3"/>
<text x="1696.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">241</text>
<text x="1696.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF1</text>
<rect x="1758.75" y="220" width="101.25" height="500" fill="rgb(240,240,240)" stroke="#1a1a2e" stroke-width="3"/>
<text x="1809.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">240</text>
<text x="1809.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF0</text>
<text x="960.0" y="1020" text-anchor="middle" font-family="sans-serif" font-size="28" fill="#4a4a6a" font-style="italic">jede Stufe = Unterschied von 1/255 ≈ 0,4% Helligkeit</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

slides/223015b-2026/assets/growth-of-big-data.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 161 KiB

slides/223015b-2026/assets/hex-binary-table.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

slides/223015b-2026/assets/hex-code-hidden.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 175 KiB

slides/223015b-2026/assets/hex-code.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

slides/223015b-2026/assets/hex-dec-lookup-table.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

slides/223015b-2026/assets/hexeditor-screenshot.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

slides/223015b-2026/assets/hollerith-machine-2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

slides/223015b-2026/assets/iframe-pframe-diagram.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

slides/223015b-2026/assets/instagram-quality-loss.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

slides/223015b-2026/assets/ipb-compression-canon.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

slides/223015b-2026/assets/jpeg-artifacts.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

slides/223015b-2026/assets/jung-naiv.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 525 KiB

slides/223015b-2026/assets/karlheinz-brandenburg.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 171 KiB

slides/223015b-2026/assets/klausur-pattern.svg
+9
View File
@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80">
<defs>
<pattern id="diagonalStripes" patternUnits="userSpaceOnUse" width="80" height="80" patternTransform="rotate(135)">
<rect width="40" height="80" fill="#e3f2fd"/>
<rect x="40" width="40" height="80" fill="#ffffff"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#diagonalStripes)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 401 B

slides/223015b-2026/assets/kubrick.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 KiB

slides/223015b-2026/assets/lightbulb-onoff.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

slides/223015b-2026/assets/lv-original-vs-fake.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 251 KiB

slides/223015b-2026/assets/matrix-code.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

slides/223015b-2026/assets/moores-law.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

slides/223015b-2026/assets/morpheus.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

slides/223015b-2026/assets/napster-2001.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

slides/223015b-2026/assets/napster-interface.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

slides/223015b-2026/assets/netflix-4k.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

slides/223015b-2026/assets/original-ascii-table.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

Loaded 100 of 467 files, more files were not shown because too many files have changed in this diff. Show more