223015b kap2: demos + barn rgb/cmyk
- 18 demos aus refactor/didaktik-rewrite-2026 cherry-picked (aliasing-paar, byte-fuer-byte, container-vs-codec, drei-dateien, jpeg-pipeline, kap02-05-eroeffner, kb-vs-kib, nyquist-diagram, pivot-signal-zu-byte, psychoakustik/psychovisualitaet-grafik, raster-vs-vektor, summary-kap02, summary-organizer, usb-c-drei-achsen) - barn-rgb.png + barn-cmyk.png neu generiert (analog zu ybcbr.webp, kanaltrennung mit korrekter k-extraktion) - lv-original-vs-fake.jpg + 02-bild-audio-video.md slides wired up
This commit is contained in:
@@ -0,0 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Die Reise einer Datei</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--slot1: #0891b2;
|
||||
--slot2: #2563eb;
|
||||
--slot3: #7c3aed;
|
||||
--slot4: #be185d;
|
||||
--slot5: #ea580c;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 32px 40px; }
|
||||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 30px; font-size: 1.05rem; }
|
||||
.sub strong { color: var(--dark); }
|
||||
|
||||
.journey {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
|
||||
gap: 6px;
|
||||
align-items: stretch;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.station {
|
||||
border: 2px solid;
|
||||
border-radius: 10px;
|
||||
padding: 14px 12px 12px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.station.s1 { border-color: var(--slot1); }
|
||||
.station.s2 { border-color: var(--slot2); }
|
||||
.station.s3 { border-color: var(--slot3); }
|
||||
.station.s4 { border-color: var(--slot4); }
|
||||
.station.s5 { border-color: var(--slot5); }
|
||||
|
||||
.station-tag { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
|
||||
.station-name { font-size: 1.05rem; font-weight: 700; text-align: center; line-height: 1.2; }
|
||||
.station.s1 .station-name { color: var(--slot1); }
|
||||
.station.s2 .station-name { color: var(--slot2); }
|
||||
.station.s3 .station-name { color: var(--slot3); }
|
||||
.station.s4 .station-name { color: var(--slot4); }
|
||||
.station.s5 .station-name { color: var(--slot5); }
|
||||
.station-detail { font-size: 0.78rem; color: var(--muted); text-align: center; }
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0 4px;
|
||||
justify-content: center;
|
||||
}
|
||||
.link-rate {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 700;
|
||||
color: var(--dark);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.link-protocol {
|
||||
font-size: 0.7rem;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.link-arrow svg { width: 32px; height: 14px; }
|
||||
|
||||
.scenario {
|
||||
margin-top: 28px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background: var(--soft);
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 16px 22px;
|
||||
}
|
||||
.scenario-head { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 6px; }
|
||||
.scenario-body { font-size: 0.98rem; line-height: 1.55; }
|
||||
.scenario-body code { font-family: ui-monospace, monospace; background: #fff; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); }
|
||||
|
||||
.verdict {
|
||||
margin-top: 18px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
border: 2px solid var(--hl);
|
||||
border-radius: 12px;
|
||||
padding: 14px 22px;
|
||||
}
|
||||
.verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
|
||||
.verdict-a { font-size: 0.92rem; color: var(--dark); margin-top: 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Die Reise einer Datei</h1>
|
||||
<div class="sub">Ein 4K-Trailer (<strong>1,2 GB</strong>) reist von der externen SSD auf den Monitor — jede Etappe ist ein eigener Engpass.</div>
|
||||
|
||||
<div class="journey">
|
||||
<div class="station s1">
|
||||
<div class="station-tag">Quelle</div>
|
||||
<div class="station-name">SSD<br>extern</div>
|
||||
<div class="station-detail">NVMe-Stick</div>
|
||||
</div>
|
||||
|
||||
<div class="link">
|
||||
<div class="link-rate">3 200 MB/s</div>
|
||||
<svg class="link-arrow" viewBox="0 0 32 14"><path d="M2,7 L26,7 M22,2 L28,7 L22,12" stroke="#d63384" stroke-width="2" fill="none"/></svg>
|
||||
<div class="link-protocol">USB 4 / TB4</div>
|
||||
</div>
|
||||
|
||||
<div class="station s2">
|
||||
<div class="station-tag">Aufnahme</div>
|
||||
<div class="station-name">Laptop</div>
|
||||
<div class="station-detail">RAM & CPU</div>
|
||||
</div>
|
||||
|
||||
<div class="link">
|
||||
<div class="link-rate">~7 000 MB/s</div>
|
||||
<svg class="link-arrow" viewBox="0 0 32 14"><path d="M2,7 L26,7 M22,2 L28,7 L22,12" stroke="#d63384" stroke-width="2" fill="none"/></svg>
|
||||
<div class="link-protocol">PCIe 4.0</div>
|
||||
</div>
|
||||
|
||||
<div class="station s3">
|
||||
<div class="station-tag">Decoder</div>
|
||||
<div class="station-name">GPU</div>
|
||||
<div class="station-detail">H.264-Hardware</div>
|
||||
</div>
|
||||
|
||||
<div class="link">
|
||||
<div class="link-rate">2 200 MB/s</div>
|
||||
<svg class="link-arrow" viewBox="0 0 32 14"><path d="M2,7 L26,7 M22,2 L28,7 L22,12" stroke="#d63384" stroke-width="2" fill="none"/></svg>
|
||||
<div class="link-protocol">HDMI 2.1</div>
|
||||
</div>
|
||||
|
||||
<div class="station s4">
|
||||
<div class="station-tag">Display</div>
|
||||
<div class="station-name">4K-Monitor</div>
|
||||
<div class="station-detail">3840 × 2160</div>
|
||||
</div>
|
||||
|
||||
<div class="link">
|
||||
<div class="link-rate">visuell</div>
|
||||
<svg class="link-arrow" viewBox="0 0 32 14"><path d="M2,7 L26,7 M22,2 L28,7 L22,12" stroke="#d63384" stroke-width="2" fill="none"/></svg>
|
||||
<div class="link-protocol">Licht</div>
|
||||
</div>
|
||||
|
||||
<div class="station s5">
|
||||
<div class="station-tag">Ziel</div>
|
||||
<div class="station-name">Auge</div>
|
||||
<div class="station-detail">Bewusstsein</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scenario">
|
||||
<div class="scenario-head">Was hier passiert</div>
|
||||
<div class="scenario-body">
|
||||
Die <code>1,2 GB</code> liegen verschlüsselt komprimiert auf dem Stick. Sie reisen über <strong>USB-C</strong> in den RAM, werden vom GPU <strong>dekodiert</strong> (H.264 → roher RGB-Strom), und über <strong>HDMI</strong> als unkomprimiertes Bild an den Monitor geschickt. Dort entstehen pro Sekunde 60 Bilder mit je rund <code>24 MB</code> — also <strong>1,4 GB/s an rohem Pixelstrom</strong>, der niemals als Datei vorliegt.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Speicher und Schnittstelle sind keine zwei Themen — sie sind die zwei Seiten desselben Engpasses.</div>
|
||||
<div class="verdict-a">Wo Bytes wohnen entscheidet, wie schnell sie reisen können. Wo sie reisen entscheidet, wo sie wohnen müssen.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user