neue viz: three-views, why-8-bit, byte-flow (beide kurse)
- 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:
180
slides/223015b/assets/demos/byte-flow.html
Normal file
180
slides/223015b/assets/demos/byte-flow.html
Normal 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>
|
||||||
BIN
slides/223015b/assets/demos/byte-flow.png
Normal file
BIN
slides/223015b/assets/demos/byte-flow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
120
slides/223015b/assets/demos/three-views.html
Normal file
120
slides/223015b/assets/demos/three-views.html
Normal 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 01010000 01001110 01000111 00001101 00001010 00011010 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">> 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>
|
||||||
BIN
slides/223015b/assets/demos/three-views.png
Normal file
BIN
slides/223015b/assets/demos/three-views.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
135
slides/223015b/assets/demos/why-8-bit.html
Normal file
135
slides/223015b/assets/demos/why-8-bit.html
Normal 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 & 0b1000_0000</code> Bit isolieren.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
slides/223015b/assets/demos/why-8-bit.png
Normal file
BIN
slides/223015b/assets/demos/why-8-bit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
180
slides/223015c/assets/demos/byte-flow.html
Normal file
180
slides/223015c/assets/demos/byte-flow.html
Normal 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>
|
||||||
BIN
slides/223015c/assets/demos/byte-flow.png
Normal file
BIN
slides/223015c/assets/demos/byte-flow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
120
slides/223015c/assets/demos/three-views.html
Normal file
120
slides/223015c/assets/demos/three-views.html
Normal 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 01010000 01001110 01000111 00001101 00001010 00011010 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">> 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>
|
||||||
BIN
slides/223015c/assets/demos/three-views.png
Normal file
BIN
slides/223015c/assets/demos/three-views.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
135
slides/223015c/assets/demos/why-8-bit.html
Normal file
135
slides/223015c/assets/demos/why-8-bit.html
Normal 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 & 0b1000_0000</code> Bit isolieren.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
slides/223015c/assets/demos/why-8-bit.png
Normal file
BIN
slides/223015c/assets/demos/why-8-bit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Reference in New Issue
Block a user