byte-nibble-hex visualisierung: html-demo + slide #50
neue stufen-visualisierung (byte → 2 nibbles → 2 hex-ziffern → 4D/77/M) ersetzt ascii-platzhalter durch sauberes html/css-demo + bg-fit png
This commit is contained in:
@@ -948,13 +948,15 @@ Farbbild: Rot + Grün + Blau
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
2⁸
|
<!-- _header: '' -->
|
||||||
|
<!-- _footer: '' -->
|
||||||
|
|
||||||
2⁴ 2⁴
|
|
||||||
|
|
||||||
16 16
|
<!--
|
||||||
|
Kernidee: jedes Byte lässt sich sauber in zwei 4-Bit-Hälften (Nibbles) zerlegen. Jede Hälfte hat 2⁴ = 16 Zustände – und genau 16 Symbole hat Hex (0-F). Deshalb passt Hex perfekt: 1 Nibble = 1 Hex-Ziffer, 1 Byte = 2 Hex-Ziffern. Keine krumme Umrechnung.
|
||||||
|
-->
|
||||||
|
|
||||||
0-F 0-F
|
|
||||||
<!--
|
<!--
|
||||||
# Zahlensysteme
|
# Zahlensysteme
|
||||||
|
|
||||||
|
|||||||
185
slides/223015c/assets/demos/byte-nibble-hex.html
Normal file
185
slides/223015c/assets/demos/byte-nibble-hex.html
Normal 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) = <code>4D</code> (hex) = <strong>77</strong> (dez) = <strong>"M"</strong> (ASCII)
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="math">
|
||||||
|
<span class="eq">16 × 16 = 256</span> · <span class="eq">2⁴ × 2⁴ = 2⁸</span> · Darum passt Hex so gut zu Bytes.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</content>
|
||||||
|
</invoke>
|
||||||
BIN
slides/223015c/assets/demos/byte-nibble-hex.png
Normal file
BIN
slides/223015c/assets/demos/byte-nibble-hex.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Reference in New Issue
Block a user