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

neue viz: three-views, why-8-bit, byte-flow (beide kurse)

Browse Source 
- three-views.html: bitstream/hex/bedeutung — gleiche bytes drei perspektiven (PNG-header)
- why-8-bit.html: speicher-adressierung byteweise, halbe byte unmöglich
- byte-flow.html: 1 byte = 8 bit = 2 hex = 1 ASCII (Hello, World!) jeder rahmen ein byte
- screenshots in beide assets/demos ordner
This commit is contained in:
Michael Czechowski
2026-04-26 22:04:28 +02:00
parent 24d7e5f660
commit 1d29a9f03c
12 changed files with 870 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
slides/223015c/assets/demos/byte-flow.html Normal file
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>