Michael Czechowski
1d29a9f03c
- 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
121 lines
5.4 KiB
HTML
121 lines
5.4 KiB
HTML
<!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>
|