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

135
slides/223015c/assets/demos/why-8-bit.html Normal file
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>