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
@@ -0,0 +1,205 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Aliasing — derselbe Fehler in zwei Sinnen</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--audio: #ea580c;
|
||||
--bild: #2563eb;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 30px 40px; }
|
||||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: 1.05rem; }
|
||||
.sub strong { color: var(--dark); }
|
||||
|
||||
.pair {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 22px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.modality {
|
||||
border: 2px solid;
|
||||
border-radius: 12px;
|
||||
padding: 16px 18px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.modality.audio { border-color: var(--audio); }
|
||||
.modality.bild { border-color: var(--bild); }
|
||||
|
||||
.mod-head { display: flex; justify-content: space-between; align-items: baseline; }
|
||||
.mod-name { font-size: 1.25rem; font-weight: 700; }
|
||||
.modality.audio .mod-name { color: var(--audio); }
|
||||
.modality.bild .mod-name { color: var(--bild); }
|
||||
.mod-tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
|
||||
|
||||
.canvas {
|
||||
background: var(--soft);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.canvas svg { display: block; }
|
||||
|
||||
.scene-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
.scene { display: flex; flex-direction: column; gap: 4px; }
|
||||
.scene-label {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.scene-cap {
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.4;
|
||||
font-family: ui-monospace, monospace;
|
||||
}
|
||||
.scene-cap strong { color: var(--dark); }
|
||||
|
||||
.ear-eye {
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.5;
|
||||
color: var(--dark);
|
||||
}
|
||||
.ear-eye .arrow { color: var(--hl); font-weight: 700; }
|
||||
.ear-eye-headline {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.modality.audio .ear-eye-headline { color: var(--audio); }
|
||||
.modality.bild .ear-eye-headline { color: var(--bild); }
|
||||
|
||||
.verdict {
|
||||
margin-top: 22px;
|
||||
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.93rem; color: var(--dark); margin-top: 4px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Aliasing — derselbe Fehler in zwei Sinnen</h1>
|
||||
<div class="sub">Was im Ohr <strong>Brummen</strong> macht, macht im Auge <strong>Moiré</strong>. Wurzel: Sampling zu grob.</div>
|
||||
|
||||
<div class="pair">
|
||||
|
||||
<div class="modality audio">
|
||||
<div class="mod-head">
|
||||
<span class="mod-name">Audio</span>
|
||||
<span class="mod-tag">Unterabtastung</span>
|
||||
</div>
|
||||
|
||||
<div class="scene-pair">
|
||||
<div class="scene">
|
||||
<div class="scene-label">Original (18 kHz)</div>
|
||||
<div class="canvas">
|
||||
<svg viewBox="0 0 280 80" width="100%" height="80" preserveAspectRatio="none">
|
||||
<line x1="0" y1="40" x2="280" y2="40" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
|
||||
<path d="M0,40 Q7,5 14,40 T28,40 T42,40 T56,40 T70,40 T84,40 T98,40 T112,40 T126,40 T140,40 T154,40 T168,40 T182,40 T196,40 T210,40 T224,40 T238,40 T252,40 T266,40 T280,40"
|
||||
stroke="#ea580c" stroke-width="2" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="scene-cap">20 Schwingungen<br>schnelle Welle</div>
|
||||
</div>
|
||||
<div class="scene">
|
||||
<div class="scene-label">Bei 22 kHz gesampelt</div>
|
||||
<div class="canvas">
|
||||
<svg viewBox="0 0 280 80" width="100%" height="80" preserveAspectRatio="none">
|
||||
<line x1="0" y1="40" x2="280" y2="40" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
|
||||
<path d="M0,40 Q7,5 14,40 T28,40 T42,40 T56,40 T70,40 T84,40 T98,40 T112,40 T126,40 T140,40 T154,40 T168,40 T182,40 T196,40 T210,40 T224,40 T238,40 T252,40 T266,40 T280,40"
|
||||
stroke="#fed7aa" stroke-width="1.2" fill="none"/>
|
||||
<path d="M0,40 Q70,10 140,40 T280,40"
|
||||
stroke="#ea580c" stroke-width="2.5" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="scene-cap"><strong>2 Schwingungen</strong><br>Brumm-Frequenz</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ear-eye">
|
||||
<div class="ear-eye-headline">Was das Ohr hört</div>
|
||||
Ein schriller 18-kHz-Ton wird zu einem dumpfen 4-kHz-Brumm. Das hohe ist <strong>nicht leiser</strong> — es ist <strong>verloren und falsch ersetzt</strong>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modality bild">
|
||||
<div class="mod-head">
|
||||
<span class="mod-name">Bild</span>
|
||||
<span class="mod-tag">Moiré-Effekt</span>
|
||||
</div>
|
||||
|
||||
<div class="scene-pair">
|
||||
<div class="scene">
|
||||
<div class="scene-label">Original (feine Streifen)</div>
|
||||
<div class="canvas">
|
||||
<svg viewBox="0 0 280 80" width="100%" height="80" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<pattern id="fine-real" x="0" y="0" width="3" height="80" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="1.5" height="80" fill="#1e3a8a"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="280" height="80" fill="url(#fine-real)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="scene-cap">93 Linien<br>volle Auflösung</div>
|
||||
</div>
|
||||
<div class="scene">
|
||||
<div class="scene-label">In niedriger DPI gerendert</div>
|
||||
<div class="canvas">
|
||||
<svg viewBox="0 0 280 80" width="100%" height="80" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="moire-bands" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#1e3a8a"/>
|
||||
<stop offset="10%" stop-color="#bfdbfe"/>
|
||||
<stop offset="20%" stop-color="#1e3a8a"/>
|
||||
<stop offset="30%" stop-color="#bfdbfe"/>
|
||||
<stop offset="40%" stop-color="#1e3a8a"/>
|
||||
<stop offset="50%" stop-color="#bfdbfe"/>
|
||||
<stop offset="60%" stop-color="#1e3a8a"/>
|
||||
<stop offset="70%" stop-color="#bfdbfe"/>
|
||||
<stop offset="80%" stop-color="#1e3a8a"/>
|
||||
<stop offset="90%" stop-color="#bfdbfe"/>
|
||||
<stop offset="100%" stop-color="#1e3a8a"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="280" height="80" fill="url(#moire-bands)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="scene-cap"><strong>5 breite Bänder</strong><br>Moiré-Frequenz</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ear-eye">
|
||||
<div class="ear-eye-headline">Was das Auge sieht</div>
|
||||
Feine Linien sind weg, dafür <strong>breite Streifen</strong>, die nie da waren. Aus 93 Linien werden 5 Bänder — das Bild lügt.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Aliasing kennt keine Modalität. Es ist ein <strong>mathematischer</strong> Fehler — kein technischer.</div>
|
||||
<div class="verdict-a">Egal ob Ton, Bild, Video, Radar, GPS — Sampling muss immer mindestens <strong>doppelt</strong> so dicht sein wie das Signal. Sonst tauscht die Realität Frequenzen aus.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 100 KiB |
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Byte für Byte — drei Brillen</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--border: #cbd5e1;
|
||||
--bg-soft: #f8fafc;
|
||||
--bin-bg: #0f0f23;
|
||||
--bin-fg: #e5e7eb;
|
||||
--binary-mark: #ef4444;
|
||||
--ascii-ok: #16a34a;
|
||||
--ctrl: #9ca3af;
|
||||
}
|
||||
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.75rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1rem; }
|
||||
.sub code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
|
||||
|
||||
.windows { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; max-width: 1180px; margin: 0 auto; }
|
||||
|
||||
.window { border: 2px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
|
||||
.window-header { background: var(--bg-soft); padding: 10px 14px; border-bottom: 2px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
|
||||
.window-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
|
||||
.window-name { font-size: 1.15rem; font-weight: 700; color: var(--dark); }
|
||||
|
||||
.window-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
|
||||
|
||||
.window.bin .window-body { background: var(--bin-bg); }
|
||||
.window.bin .row { color: var(--bin-fg); font-size: 1.05rem; letter-spacing: 0.04em; }
|
||||
|
||||
.window.hex .row { color: var(--dark); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.06em; }
|
||||
|
||||
.window.text .row { font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
|
||||
.window.text .glyph.printable { color: var(--ascii-ok); }
|
||||
.window.text .glyph.ctrl { color: var(--ctrl); font-size: 1.1rem; }
|
||||
.window.text .glyph.binary { color: var(--binary-mark); }
|
||||
.window.text .note { font-size: 0.78rem; font-weight: 400; color: var(--muted); margin-left: auto; }
|
||||
|
||||
.footnote { margin-top: 24px; max-width: 1100px; margin-left: auto; margin-right: auto; display: flex; gap: 32px; justify-content: center; font-size: 0.95rem; }
|
||||
.legend { display: flex; align-items: center; gap: 8px; }
|
||||
.swatch { display: inline-block; width: 16px; height: 16px; border-radius: 3px; }
|
||||
.swatch.binary { background: #fee2e2; border: 2px solid var(--binary-mark); }
|
||||
.swatch.ascii { background: #dcfce7; border: 2px solid var(--ascii-ok); }
|
||||
.verdict { margin-top: 14px; text-align: center; font-size: 1.05rem; color: var(--dark); }
|
||||
.verdict strong { color: var(--binary-mark); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Byte für Byte</h1>
|
||||
<div class="sub">Eine Datei — drei Brillen. Beispiel: erste 8 Byte einer PNG-Datei.</div>
|
||||
|
||||
<div class="windows">
|
||||
|
||||
<div class="window bin">
|
||||
<div class="window-header">
|
||||
<div class="window-title">Fenster 1</div>
|
||||
<div class="window-name">Bin · rohe 0 und 1</div>
|
||||
</div>
|
||||
<div class="window-body">
|
||||
<div class="row">10001001</div>
|
||||
<div class="row">01010000</div>
|
||||
<div class="row">01001110</div>
|
||||
<div class="row">01000111</div>
|
||||
<div class="row">00001101</div>
|
||||
<div class="row">00001010</div>
|
||||
<div class="row">00011010</div>
|
||||
<div class="row">00001010</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="window hex">
|
||||
<div class="window-header">
|
||||
<div class="window-title">Fenster 2</div>
|
||||
<div class="window-name">Hex · 2 Ziffern pro Byte</div>
|
||||
</div>
|
||||
<div class="window-body">
|
||||
<div class="row">89</div>
|
||||
<div class="row">50</div>
|
||||
<div class="row">4E</div>
|
||||
<div class="row">47</div>
|
||||
<div class="row">0D</div>
|
||||
<div class="row">0A</div>
|
||||
<div class="row">1A</div>
|
||||
<div class="row">0A</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="window text">
|
||||
<div class="window-header">
|
||||
<div class="window-title">Fenster 3</div>
|
||||
<div class="window-name">Text · ASCII oder ✗ (> 126)</div>
|
||||
</div>
|
||||
<div class="window-body">
|
||||
<div class="row"><span class="glyph binary">✗</span><span class="note">137 > 126</span></div>
|
||||
<div class="row"><span class="glyph printable">P</span><span class="note">80</span></div>
|
||||
<div class="row"><span class="glyph printable">N</span><span class="note">78</span></div>
|
||||
<div class="row"><span class="glyph printable">G</span><span class="note">71</span></div>
|
||||
<div class="row"><span class="glyph ctrl">CR</span><span class="note">13 · Steuerz.</span></div>
|
||||
<div class="row"><span class="glyph ctrl">LF</span><span class="note">10 · Steuerz.</span></div>
|
||||
<div class="row"><span class="glyph ctrl">SUB</span><span class="note">26 · Steuerz.</span></div>
|
||||
<div class="row"><span class="glyph ctrl">LF</span><span class="note">10 · Steuerz.</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
Mindestens ein Byte mit Wert > 126 → <strong>Binärdatei</strong>. Sonst: reine Textdatei.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 56 KiB |
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Container ≠ Codec</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--container: #2563eb;
|
||||
--video: #7c3aed;
|
||||
--audio: #ea580c;
|
||||
--subs: #16a34a;
|
||||
--meta: #94a3b8;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 28px 40px; }
|
||||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.05rem; }
|
||||
.sub strong { color: var(--dark); }
|
||||
|
||||
.scene {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 22px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.container-box {
|
||||
border: 3px dashed var(--container);
|
||||
border-radius: 14px;
|
||||
padding: 14px 16px 18px;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
}
|
||||
.container-tag {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 18px;
|
||||
background: #fff;
|
||||
padding: 0 10px;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
color: var(--container);
|
||||
}
|
||||
.container-label {
|
||||
text-align: center;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.track {
|
||||
display: grid;
|
||||
grid-template-columns: 90px 1fr;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
background: var(--soft);
|
||||
border-left: 4px solid;
|
||||
border-radius: 6px;
|
||||
padding: 9px 14px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.track.video { border-left-color: var(--video); }
|
||||
.track.audio { border-left-color: var(--audio); }
|
||||
.track.subs { border-left-color: var(--subs); }
|
||||
.track.meta { border-left-color: var(--meta); }
|
||||
|
||||
.track-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.track.video .track-label { color: var(--video); }
|
||||
.track.audio .track-label { color: var(--audio); }
|
||||
.track.subs .track-label { color: var(--subs); }
|
||||
.track.meta .track-label { color: var(--meta); }
|
||||
|
||||
.codec-pill {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.82rem;
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
padding: 2px 9px;
|
||||
border-radius: 4px;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.verdict {
|
||||
margin-top: 22px;
|
||||
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.93rem; color: var(--dark); margin-top: 4px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
.verdict-a code { font-family: ui-monospace, monospace; background: var(--soft); padding: 1px 5px; border-radius: 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Container ≠ Codec</h1>
|
||||
<div class="sub">Die <strong>Hülle</strong> sagt nichts darüber, <strong>wie</strong> der Inhalt komprimiert wurde.</div>
|
||||
|
||||
<div class="scene">
|
||||
|
||||
<div class="container-box">
|
||||
<span class="container-tag">.mp4</span>
|
||||
<div class="container-label">Datei A — älterer Stand</div>
|
||||
|
||||
<div class="track video">
|
||||
<span class="track-label">Video</span>
|
||||
<span><span class="codec-pill">H.264 / AVC</span> · 1080p · 8 Mbit/s</span>
|
||||
</div>
|
||||
<div class="track audio">
|
||||
<span class="track-label">Audio</span>
|
||||
<span><span class="codec-pill">AAC</span> · 192 kbit/s · Stereo</span>
|
||||
</div>
|
||||
<div class="track subs">
|
||||
<span class="track-label">Untertitel</span>
|
||||
<span><span class="codec-pill">TTML</span> · de + en</span>
|
||||
</div>
|
||||
<div class="track meta">
|
||||
<span class="track-label">Metadaten</span>
|
||||
<span>Titel · Dauer · Datum · Bitrate</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-box">
|
||||
<span class="container-tag">.mp4</span>
|
||||
<div class="container-label">Datei B — modern</div>
|
||||
|
||||
<div class="track video">
|
||||
<span class="track-label">Video</span>
|
||||
<span><span class="codec-pill">AV1</span> · 4K · 25 Mbit/s</span>
|
||||
</div>
|
||||
<div class="track audio">
|
||||
<span class="track-label">Audio</span>
|
||||
<span><span class="codec-pill">Opus</span> · 128 kbit/s · 5.1 Surround</span>
|
||||
</div>
|
||||
<div class="track subs">
|
||||
<span class="track-label">Untertitel</span>
|
||||
<span><span class="codec-pill">WebVTT</span> · de + en + ja</span>
|
||||
</div>
|
||||
<div class="track meta">
|
||||
<span class="track-label">Metadaten</span>
|
||||
<span>Titel · Dauer · Datum · HDR-Info</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Gleiche Endung. Anderes Innenleben.</div>
|
||||
<div class="verdict-a"><strong>Container</strong> = Verpackung (<code>.mp4</code>, <code>.mkv</code>, <code>.webm</code>). <strong>Codec</strong> = Komprimierer (H.264 / AV1 / AAC / Opus). <strong>Tool:</strong> <code>mediainfo <datei></code> zeigt beides.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 62 KiB |
@@ -0,0 +1,200 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Drei Dateien — dasselbe Innenleben</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--foto: #2563eb;
|
||||
--audio: #ea580c;
|
||||
--pdf: #7c3aed;
|
||||
}
|
||||
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: 28px; font-size: 1.05rem; }
|
||||
.sub strong { color: var(--dark); }
|
||||
|
||||
.files {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 22px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.file {
|
||||
border: 2px solid;
|
||||
border-radius: 12px;
|
||||
padding: 16px 18px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.file.foto { border-color: var(--foto); }
|
||||
.file.audio { border-color: var(--audio); }
|
||||
.file.pdf { border-color: var(--pdf); }
|
||||
|
||||
.file-head { display: flex; justify-content: space-between; align-items: baseline; }
|
||||
.file-name { font-size: 1.2rem; font-weight: 700; }
|
||||
.file.foto .file-name { color: var(--foto); }
|
||||
.file.audio .file-name { color: var(--audio); }
|
||||
.file.pdf .file-name { color: var(--pdf); }
|
||||
.file-ext { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--muted); }
|
||||
|
||||
.preview {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
height: 130px;
|
||||
background: var(--soft);
|
||||
}
|
||||
|
||||
.hex-strip {
|
||||
background: #0f0f23;
|
||||
border-radius: 6px;
|
||||
padding: 8px 10px;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.6;
|
||||
color: #cbd5e1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hex-strip .magic { color: #fff; font-weight: 700; padding: 0 2px; border-radius: 2px; }
|
||||
.hex-strip.foto-magic .magic { background: var(--foto); }
|
||||
.hex-strip.audio-magic .magic { background: var(--audio); }
|
||||
.hex-strip.pdf-magic .magic { background: var(--pdf); }
|
||||
.hex-label {
|
||||
font-size: 0.68rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--muted);
|
||||
font-weight: 700;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.magic-caption {
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
font-family: ui-monospace, monospace;
|
||||
}
|
||||
.magic-caption .magic-word {
|
||||
color: var(--dark);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.verdict {
|
||||
margin-top: 26px;
|
||||
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.15rem; font-weight: 700; color: var(--hl); }
|
||||
.verdict-a { font-size: 0.95rem; color: var(--dark); margin-top: 4px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Drei Dateien — dasselbe Innenleben</h1>
|
||||
<div class="sub">Außen <strong>völlig verschieden</strong>. Innen reden alle dieselbe Sprache: <strong>Byte für Byte</strong>.</div>
|
||||
|
||||
<div class="files">
|
||||
|
||||
<div class="file foto">
|
||||
<div class="file-head">
|
||||
<span class="file-name">Foto</span>
|
||||
<span class="file-ext">.png</span>
|
||||
</div>
|
||||
<svg class="preview" viewBox="0 0 220 130" preserveAspectRatio="xMidYMid slice">
|
||||
<defs>
|
||||
<linearGradient id="sky-f" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#fde68a"/>
|
||||
<stop offset="60%" stop-color="#fb923c"/>
|
||||
<stop offset="100%" stop-color="#7c3aed"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="220" height="130" fill="url(#sky-f)"/>
|
||||
<circle cx="160" cy="50" r="18" fill="#fef3c7" opacity="0.95"/>
|
||||
<path d="M0,95 L40,80 L80,90 L120,72 L160,86 L220,75 L220,130 L0,130 Z" fill="#1e1b4b"/>
|
||||
<path d="M0,110 L60,100 L120,108 L180,98 L220,105 L220,130 L0,130 Z" fill="#0f172a" opacity="0.7"/>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="hex-label">Erste Bytes der Datei</div>
|
||||
<div class="hex-strip foto-magic">
|
||||
<span class="magic">89 50 4E 47</span> 0D 0A 1A 0A 00 00 00 0D 49 48 44 52
|
||||
</div>
|
||||
</div>
|
||||
<div class="magic-caption"><span class="magic-word">50 4E 47</span> = <span class="magic-word">"PNG"</span></div>
|
||||
</div>
|
||||
|
||||
<div class="file audio">
|
||||
<div class="file-head">
|
||||
<span class="file-name">Sprachnachricht</span>
|
||||
<span class="file-ext">.mp3</span>
|
||||
</div>
|
||||
<svg class="preview" viewBox="0 0 220 130" preserveAspectRatio="none">
|
||||
<rect x="0" y="0" width="220" height="130" fill="#0f0f23"/>
|
||||
<line x1="0" y1="65" x2="220" y2="65" stroke="#374151" stroke-width="1"/>
|
||||
<path d="M0,65 L8,65 L12,55 L16,75 L20,40 L24,90 L28,30 L32,95 L36,35 L40,90
|
||||
L48,45 L56,82 L64,50 L72,78 L80,52 L88,75 L96,55 L104,72
|
||||
L116,58 L128,72 L140,60 L152,70 L168,62 L184,68 L200,64 L220,65
|
||||
L220,130 L0,130 Z" fill="#fb923c" stroke="#ea580c" stroke-width="1"/>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="hex-label">Erste Bytes der Datei</div>
|
||||
<div class="hex-strip audio-magic">
|
||||
<span class="magic">49 44 33</span> 03 00 00 00 00 03 76 54 49 54 32 00 00
|
||||
</div>
|
||||
</div>
|
||||
<div class="magic-caption"><span class="magic-word">49 44 33</span> = <span class="magic-word">"ID3"</span></div>
|
||||
</div>
|
||||
|
||||
<div class="file pdf">
|
||||
<div class="file-head">
|
||||
<span class="file-name">PDF-Dokument</span>
|
||||
<span class="file-ext">.pdf</span>
|
||||
</div>
|
||||
<svg class="preview" viewBox="0 0 220 130" preserveAspectRatio="xMidYMid meet">
|
||||
<rect x="0" y="0" width="220" height="130" fill="#f8fafc"/>
|
||||
<rect x="50" y="14" width="120" height="102" rx="4" fill="#fff" stroke="#cbd5e1" stroke-width="1"/>
|
||||
<rect x="58" y="24" width="80" height="4" rx="1" fill="#7c3aed"/>
|
||||
<rect x="58" y="34" width="104" height="2" fill="#cbd5e1"/>
|
||||
<rect x="58" y="40" width="98" height="2" fill="#cbd5e1"/>
|
||||
<rect x="58" y="46" width="92" height="2" fill="#cbd5e1"/>
|
||||
<rect x="58" y="52" width="100" height="2" fill="#cbd5e1"/>
|
||||
<rect x="58" y="62" width="80" height="2" fill="#cbd5e1"/>
|
||||
<rect x="58" y="68" width="96" height="2" fill="#cbd5e1"/>
|
||||
<rect x="58" y="74" width="88" height="2" fill="#cbd5e1"/>
|
||||
<rect x="58" y="84" width="40" height="3" rx="1" fill="#7c3aed" opacity="0.7"/>
|
||||
<rect x="58" y="92" width="92" height="2" fill="#cbd5e1"/>
|
||||
<rect x="58" y="98" width="86" height="2" fill="#cbd5e1"/>
|
||||
<rect x="58" y="104" width="78" height="2" fill="#cbd5e1"/>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="hex-label">Erste Bytes der Datei</div>
|
||||
<div class="hex-strip pdf-magic">
|
||||
<span class="magic">25 50 44 46</span> 2D 31 2E 37 0A 25 E2 E3 CF D3 0A 0A
|
||||
</div>
|
||||
</div>
|
||||
<div class="magic-caption"><span class="magic-word">25 50 44 46</span> = <span class="magic-word">"%PDF"</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Drei verschiedene Dinge — eine Sprache.</div>
|
||||
<div class="verdict-a">Jede Datei beginnt mit ihrer <strong>Visitenkarte</strong> (Magic Number) und besteht ab da aus nichts als Byte. Foto, Audio, PDF — alle dieselben Bauteile, nur anders zusammengesetzt.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 77 KiB |
@@ -0,0 +1,206 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>JPEG-Pipeline — 6 Schritte vom Foto zur Datei</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--lossless-step: #2563eb;
|
||||
--lossy-step: #ea580c;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 28px 40px; }
|
||||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 1.05rem; }
|
||||
.sub strong { color: var(--dark); }
|
||||
|
||||
.pipeline {
|
||||
display: grid;
|
||||
grid-template-columns: 110px repeat(6, 1fr) 110px;
|
||||
gap: 4px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.endpoint {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
.endpoint-art { width: 88px; height: 60px; display: block; }
|
||||
.endpoint-label {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
color: var(--dark);
|
||||
}
|
||||
.endpoint-size {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.82rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.step {
|
||||
border: 2px solid;
|
||||
border-radius: 8px;
|
||||
padding: 8px 6px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
.step.lossless { border-color: var(--lossless-step); }
|
||||
.step.lossy { border-color: var(--lossy-step); }
|
||||
.step-num {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
color: var(--muted);
|
||||
}
|
||||
.step-name {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.step.lossless .step-name { color: var(--lossless-step); }
|
||||
.step.lossy .step-name { color: var(--lossy-step); }
|
||||
.step-desc {
|
||||
font-size: 0.66rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--muted);
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.legend {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
font-size: 0.84rem;
|
||||
color: var(--dark);
|
||||
}
|
||||
.legend-item { display: flex; align-items: center; gap: 6px; }
|
||||
.legend-swatch {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
.legend-swatch.lossless { background: var(--lossless-step); }
|
||||
.legend-swatch.lossy { background: var(--lossy-step); }
|
||||
|
||||
.verdict {
|
||||
margin-top: 22px;
|
||||
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.93rem; color: var(--dark); margin-top: 4px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>JPEG-Pipeline — 6 Schritte vom Foto zur Datei</h1>
|
||||
<div class="sub">Nur <strong>einer</strong> dieser Schritte verliert Information. Die anderen fünf sind verlustfrei.</div>
|
||||
|
||||
<div class="pipeline">
|
||||
|
||||
<div class="endpoint">
|
||||
<svg class="endpoint-art" viewBox="0 0 88 60">
|
||||
<defs>
|
||||
<linearGradient id="photo-grad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#fde68a"/>
|
||||
<stop offset="55%" stop-color="#fb923c"/>
|
||||
<stop offset="100%" stop-color="#7c3aed"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="88" height="60" rx="3" fill="url(#photo-grad)"/>
|
||||
<circle cx="66" cy="22" r="9" fill="#fef3c7"/>
|
||||
<path d="M0,42 L18,34 L40,40 L60,30 L80,38 L88,33 L88,60 L0,60 Z" fill="#1e1b4b"/>
|
||||
</svg>
|
||||
<div class="endpoint-label">Foto (Roh)</div>
|
||||
<div class="endpoint-size">~36 MB</div>
|
||||
</div>
|
||||
|
||||
<div class="step lossless">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-name">Farbraum</div>
|
||||
<div class="step-desc">RGB → Y'CbCr<br>Helligkeit von Farbe trennen</div>
|
||||
</div>
|
||||
|
||||
<div class="step lossy">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-name">Chroma-Subsampling</div>
|
||||
<div class="step-desc">Cb & Cr auf <strong>¼</strong><br>Auge sieht Farbe grob</div>
|
||||
</div>
|
||||
|
||||
<div class="step lossless">
|
||||
<div class="step-num">3</div>
|
||||
<div class="step-name">8×8 Blöcke</div>
|
||||
<div class="step-desc">Bild in Kacheln<br>jeder Block einzeln</div>
|
||||
</div>
|
||||
|
||||
<div class="step lossless">
|
||||
<div class="step-num">4</div>
|
||||
<div class="step-name">DCT</div>
|
||||
<div class="step-desc">Frequenz-Zerlegung<br>häufige Muster</div>
|
||||
</div>
|
||||
|
||||
<div class="step lossy">
|
||||
<div class="step-num">5</div>
|
||||
<div class="step-name">Quantisierung</div>
|
||||
<div class="step-desc"><strong>Hier</strong> wird weggeworfen<br>hohe Frequenzen raus</div>
|
||||
</div>
|
||||
|
||||
<div class="step lossless">
|
||||
<div class="step-num">6</div>
|
||||
<div class="step-name">Huffman</div>
|
||||
<div class="step-desc">Verlustfrei kürzen<br>häufig → kurz</div>
|
||||
</div>
|
||||
|
||||
<div class="endpoint">
|
||||
<svg class="endpoint-art" viewBox="0 0 88 60">
|
||||
<rect x="0" y="0" width="88" height="60" rx="3" fill="url(#photo-grad)"/>
|
||||
<circle cx="66" cy="22" r="9" fill="#fef3c7"/>
|
||||
<path d="M0,42 L18,34 L40,40 L60,30 L80,38 L88,33 L88,60 L0,60 Z" fill="#1e1b4b"/>
|
||||
</svg>
|
||||
<div class="endpoint-label">JPEG</div>
|
||||
<div class="endpoint-size">~3,5 MB</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<span class="legend-item"><span class="legend-swatch lossless"></span>verlustfrei (umkehrbar)</span>
|
||||
<span class="legend-item"><span class="legend-swatch lossy"></span>verlustbehaftet (Information weg)</span>
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Der <strong>Quanten-Schritt</strong> ist das ganze Geheimnis von JPEG.</div>
|
||||
<div class="verdict-a">Schritte 1, 3, 4, 6 verlieren nichts. Schritt 2 wirft Farb-Detail weg (Auge merkt nicht). Schritt 5 entscheidet — je nach Qualitäts-Stufe — wie viel <strong>Frequenz-Detail</strong> verloren geht. Niedrige Quality = aggressivere Schritt-5-Quantisierung.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 71 KiB |
@@ -0,0 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Dieselbe Aufnahme, zwei Formate</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--lossless: #16a34a;
|
||||
--lossy: #ef4444;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 36px 48px; }
|
||||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 28px; font-size: 1.05rem; }
|
||||
|
||||
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 1200px; margin: 0 auto; }
|
||||
.panel { border: 2px solid var(--border); border-radius: 12px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; background: #fff; }
|
||||
.panel.left { border-color: var(--lossless); }
|
||||
.panel.right { border-color: var(--lossy); }
|
||||
|
||||
.panel-head { display: flex; justify-content: space-between; align-items: baseline; }
|
||||
.panel-tag {
|
||||
font-size: 0.74rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
.panel-name { font-size: 1.5rem; font-weight: 700; }
|
||||
.panel.left .panel-name { color: var(--lossless); }
|
||||
.panel.right .panel-name { color: var(--lossy); }
|
||||
.panel-format {
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.waveform {
|
||||
background: #0f0f23;
|
||||
border-radius: 8px;
|
||||
padding: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
.stat { background: var(--soft); border: 1px solid var(--border); border-radius: 7px; padding: 8px 12px; }
|
||||
.stat .label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
|
||||
.stat .value { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1rem; font-weight: 700; color: var(--dark); margin-top: 2px; }
|
||||
|
||||
.verdict {
|
||||
margin-top: 26px;
|
||||
border: 2px solid var(--hl);
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 16px 22px;
|
||||
text-align: center;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.verdict-q { font-size: 1.2rem; font-weight: 700; color: var(--hl); }
|
||||
.verdict-a { font-size: 1rem; color: var(--dark); margin-top: 6px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Dieselbe Aufnahme, zwei Formate</h1>
|
||||
<div class="sub">3 Sekunden Snare-Hit mit Cymbal-Tail · 44,1 kHz Sample-Rate · Stereo</div>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<div class="panel left">
|
||||
<div class="panel-head">
|
||||
<span class="panel-name">Lossless</span>
|
||||
<span class="panel-tag">FLAC</span>
|
||||
</div>
|
||||
<div class="panel-format">verlustfrei · alle Frequenzen 0–22 kHz erhalten</div>
|
||||
|
||||
<svg class="waveform" viewBox="0 0 800 160" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="green-grad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#34d399"/>
|
||||
<stop offset="100%" stop-color="#16a34a"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<line x1="0" y1="80" x2="800" y2="80" stroke="#374151" stroke-width="1"/>
|
||||
<!-- detailed waveform: transient peak + cymbal decay with high-freq noise -->
|
||||
<path d="M0,80
|
||||
L40,80 L42,78 L44,82 L46,74 L48,88
|
||||
L60,30 L62,135 L64,18 L66,142 L68,28 L70,128 L72,38 L74,118 L76,48 L78,108
|
||||
L90,55 L92,108 L94,52 L96,112 L98,58 L100,105 L102,62 L104,98 L106,68 L108,92
|
||||
L130,72 L132,92 L134,68 L136,94 L138,72 L140,90 L142,74 L144,88
|
||||
L170,76 L172,86 L174,74 L176,87 L178,76 L180,85
|
||||
L220,77 L222,84 L224,76 L226,85 L228,77 L230,83
|
||||
L280,78 L282,83 L284,77 L286,84 L288,78 L290,82
|
||||
L340,79 L342,82 L344,78 L346,82 L348,79 L350,81
|
||||
L400,79 L402,81 L404,79 L406,81 L408,79 L410,81
|
||||
L460,80 L462,81 L464,79 L466,81 L468,80 L470,80
|
||||
L520,80 L522,81 L524,79 L526,80
|
||||
L580,80 L582,80 L584,80
|
||||
L640,80 L700,80 L800,80 Z"
|
||||
fill="url(#green-grad)" stroke="#16a34a" stroke-width="1" opacity="0.95"/>
|
||||
</svg>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat"><div class="label">Dateigröße</div><div class="value">5,3 MB</div></div>
|
||||
<div class="stat"><div class="label">Bitrate</div><div class="value">1.411 kbit/s</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel right">
|
||||
<div class="panel-head">
|
||||
<span class="panel-name">Lossy</span>
|
||||
<span class="panel-tag">MP3 128 kbit/s</span>
|
||||
</div>
|
||||
<div class="panel-format">verlustbehaftet · hohe Frequenzen weggeworfen, Transienten geglättet</div>
|
||||
|
||||
<svg class="waveform" viewBox="0 0 800 160" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="red-grad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#fca5a5"/>
|
||||
<stop offset="100%" stop-color="#ef4444"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<line x1="0" y1="80" x2="800" y2="80" stroke="#374151" stroke-width="1"/>
|
||||
<!-- smoothed waveform: same overall shape, no fine detail in transient peak -->
|
||||
<path d="M0,80
|
||||
L40,80 L48,80
|
||||
L60,48 L65,120 L70,52 L75,115 L80,58 L85,108
|
||||
L100,68 L108,92 L114,70 L120,90
|
||||
L150,75 L160,86 L168,76 L174,85
|
||||
L200,77 L210,84 L220,77 L230,83
|
||||
L260,78 L280,82 L300,78 L320,82
|
||||
L360,79 L380,81 L400,79 L420,81
|
||||
L460,80 L480,80 L520,80
|
||||
L580,80 L640,80 L700,80 L800,80 Z"
|
||||
fill="url(#red-grad)" stroke="#ef4444" stroke-width="1" opacity="0.95"/>
|
||||
</svg>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat"><div class="label">Dateigröße</div><div class="value">0,48 MB</div></div>
|
||||
<div class="stat"><div class="label">Bitrate</div><div class="value">128 kbit/s</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Hört man den Unterschied?</div>
|
||||
<div class="verdict-a">Auf dem Smartphone-Lautsprecher: meist nicht. Im Studio-Monitor mit Kopfhörer: oft schon. — MP3 wirft <strong>91 % der Daten weg</strong>, die der Mensch im Alltag nicht vermisst.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 72 KiB |
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Drei Modalitäten, ein Hebel</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--bild: #2563eb;
|
||||
--audio: #ea580c;
|
||||
--video: #7c3aed;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 32px 48px; }
|
||||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 1.05rem; }
|
||||
|
||||
.table { display: grid; grid-template-columns: 140px 1fr 1fr 1fr; gap: 12px; max-width: 1180px; margin: 0 auto; align-items: stretch; }
|
||||
.col-head { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--muted); padding: 0 8px 4px; }
|
||||
|
||||
.row-label { font-size: 1.15rem; font-weight: 700; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; justify-content: center; border-radius: 10px; }
|
||||
.row-label.bild { background: #dbeafe; color: var(--bild); }
|
||||
.row-label.audio { background: #ffedd5; color: var(--audio); }
|
||||
.row-label.video { background: #ede9fe; color: var(--video); }
|
||||
.row-label small { font-size: 0.78rem; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
|
||||
|
||||
.cell { border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
|
||||
.cell-format { font-family: ui-monospace, monospace; font-size: 0.85rem; color: var(--muted); }
|
||||
.cell-size { font-size: 1.7rem; font-weight: 700; color: var(--dark); font-family: ui-monospace, monospace; }
|
||||
.cell-bar { height: 8px; border-radius: 4px; background: var(--soft); position: relative; overflow: hidden; }
|
||||
.cell-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
|
||||
|
||||
.verdict {
|
||||
margin-top: 22px;
|
||||
max-width: 1180px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border: 2px solid var(--hl);
|
||||
border-radius: 12px;
|
||||
padding: 14px 22px;
|
||||
text-align: center;
|
||||
}
|
||||
.verdict-q { font-size: 1.05rem; font-weight: 700; color: var(--hl); }
|
||||
.verdict-a { font-size: 0.95rem; color: var(--dark); margin-top: 4px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Drei Modalitäten — derselbe Hebel</h1>
|
||||
<div class="sub">Bild, Audio, Video schrumpfen alle dramatisch. Warum? Weil Wahrnehmung Lücken hat.</div>
|
||||
|
||||
<div class="table">
|
||||
<div></div>
|
||||
<div class="col-head">Roh</div>
|
||||
<div class="col-head">Lossy (modern)</div>
|
||||
<div class="col-head">Lossy (aggressiv)</div>
|
||||
|
||||
<div class="row-label bild">Bild<small>12-MP-Foto</small></div>
|
||||
<div class="cell">
|
||||
<div class="cell-format">RAW</div>
|
||||
<div class="cell-size">36 MB</div>
|
||||
<div class="cell-bar"><div class="fill" style="width:100%;background:#2563eb"></div></div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="cell-format">JPEG · Q 90</div>
|
||||
<div class="cell-size">4 MB</div>
|
||||
<div class="cell-bar"><div class="fill" style="width:11%;background:#2563eb"></div></div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="cell-format">JPEG · Q 50</div>
|
||||
<div class="cell-size">800 KB</div>
|
||||
<div class="cell-bar"><div class="fill" style="width:2.2%;background:#2563eb"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="row-label audio">Audio<small>30 s Stereo</small></div>
|
||||
<div class="cell">
|
||||
<div class="cell-format">WAV · 44,1 kHz · 16 bit</div>
|
||||
<div class="cell-size">5,3 MB</div>
|
||||
<div class="cell-bar"><div class="fill" style="width:100%;background:#ea580c"></div></div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="cell-format">MP3 · 192 kbit/s</div>
|
||||
<div class="cell-size">720 KB</div>
|
||||
<div class="cell-bar"><div class="fill" style="width:14%;background:#ea580c"></div></div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="cell-format">MP3 · 64 kbit/s</div>
|
||||
<div class="cell-size">240 KB</div>
|
||||
<div class="cell-bar"><div class="fill" style="width:4.5%;background:#ea580c"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="row-label video">Video<small>30 s · 4K · 30 fps</small></div>
|
||||
<div class="cell">
|
||||
<div class="cell-format">Roh · 8 bit</div>
|
||||
<div class="cell-size">12 GB</div>
|
||||
<div class="cell-bar"><div class="fill" style="width:100%;background:#7c3aed"></div></div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="cell-format">H.264 · 25 Mbit/s</div>
|
||||
<div class="cell-size">94 MB</div>
|
||||
<div class="cell-bar"><div class="fill" style="width:0.8%;background:#7c3aed"></div></div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="cell-format">H.265 · 12 Mbit/s</div>
|
||||
<div class="cell-size">45 MB</div>
|
||||
<div class="cell-bar"><div class="fill" style="width:0.4%;background:#7c3aed"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Bilder schrumpfen ×45. Audio ×22. Video ×270.</div>
|
||||
<div class="verdict-a">Jede Reduktion nutzt eine andere Wahrnehmungs-Lücke: <strong>Bild</strong> die geringere Farbschärfe, <strong>Audio</strong> die Maskierung, <strong>Video</strong> die Frame-zu-Frame-Ähnlichkeit.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 75 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 89 KiB |
@@ -0,0 +1,254 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Eine Datei reist — und erzählt</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--visible: #2563eb;
|
||||
--hidden: #7c3aed;
|
||||
--transit: #ea580c;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 28px 40px; }
|
||||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.05rem; }
|
||||
.sub strong { color: var(--dark); }
|
||||
|
||||
.scene {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.2fr;
|
||||
gap: 22px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border: 2px solid;
|
||||
border-radius: 12px;
|
||||
padding: 16px 18px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.panel.visible { border-color: var(--visible); }
|
||||
.panel.hidden { border-color: var(--hidden); }
|
||||
|
||||
.panel-head { display: flex; justify-content: space-between; align-items: baseline; }
|
||||
.panel-tag {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
.panel-name { font-size: 1.25rem; font-weight: 700; }
|
||||
.panel.visible .panel-name { color: var(--visible); }
|
||||
.panel.hidden .panel-name { color: var(--hidden); }
|
||||
|
||||
.photo {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.photo-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.exif-list {
|
||||
display: grid;
|
||||
grid-template-columns: 130px 1fr;
|
||||
gap: 4px 12px;
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.exif-key {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
padding-top: 3px;
|
||||
}
|
||||
.exif-val { font-family: ui-monospace, monospace; color: var(--dark); }
|
||||
.exif-val.gps { color: var(--hl); font-weight: 700; }
|
||||
|
||||
.transit-strip {
|
||||
max-width: 1200px;
|
||||
margin: 18px auto 0;
|
||||
border: 2px solid var(--transit);
|
||||
border-radius: 12px;
|
||||
padding: 14px 18px;
|
||||
background: #fff;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
.transit-tag {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--transit);
|
||||
writing-mode: vertical-rl;
|
||||
transform: rotate(180deg);
|
||||
text-align: center;
|
||||
}
|
||||
.transit-body { display: flex; flex-direction: column; gap: 8px; }
|
||||
.transit-route {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.hop {
|
||||
background: var(--soft);
|
||||
border: 1.5px solid var(--border);
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.82rem;
|
||||
color: var(--dark);
|
||||
}
|
||||
.hop.origin { border-color: var(--visible); color: var(--visible); }
|
||||
.hop.dest { border-color: var(--visible); color: var(--visible); }
|
||||
.hop.edge { border-color: var(--transit); color: var(--transit); }
|
||||
.arrow { color: var(--muted); font-family: ui-monospace, monospace; }
|
||||
.transit-headers {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.transit-headers strong { color: var(--dark); }
|
||||
|
||||
.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.93rem; color: var(--dark); margin-top: 4px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Eine Datei reist — und erzählt</h1>
|
||||
<div class="sub">Ein Smartphone-Foto geht von <strong>Stuttgart</strong> nach <strong>Tokyo</strong>. Was sieht der Empfänger — und was bekommt er noch dazu?</div>
|
||||
|
||||
<div class="scene">
|
||||
|
||||
<div class="panel visible">
|
||||
<div class="panel-head">
|
||||
<span class="panel-name">Inhalt</span>
|
||||
<span class="panel-tag">Was du siehst</span>
|
||||
</div>
|
||||
|
||||
<svg class="photo" viewBox="0 0 420 280" preserveAspectRatio="xMidYMid slice">
|
||||
<defs>
|
||||
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#fde68a"/>
|
||||
<stop offset="55%" stop-color="#fda4af"/>
|
||||
<stop offset="100%" stop-color="#9333ea"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="hills" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#312e81"/>
|
||||
<stop offset="100%" stop-color="#0f172a"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="420" height="280" fill="url(#sky)"/>
|
||||
<circle cx="320" cy="105" r="32" fill="#fff7ed" opacity="0.95"/>
|
||||
<path d="M0,200 L60,170 L110,185 L160,160 L210,178 L260,150 L310,172 L360,148 L420,168 L420,280 L0,280 Z" fill="url(#hills)"/>
|
||||
<path d="M0,225 L50,210 L100,222 L150,205 L200,220 L250,202 L300,218 L350,200 L420,215 L420,280 L0,280 Z" fill="#1e1b4b" opacity="0.7"/>
|
||||
<rect x="80" y="225" width="14" height="42" fill="#0f172a"/>
|
||||
<rect x="180" y="232" width="10" height="35" fill="#0f172a"/>
|
||||
<rect x="240" y="220" width="18" height="48" fill="#0f172a"/>
|
||||
<rect x="300" y="234" width="11" height="34" fill="#0f172a"/>
|
||||
<rect x="86" y="232" width="3" height="3" fill="#fbbf24"/>
|
||||
<rect x="188" y="240" width="2" height="2" fill="#fbbf24"/>
|
||||
<rect x="248" y="228" width="3" height="3" fill="#fbbf24"/>
|
||||
<rect x="307" y="240" width="2" height="2" fill="#fbbf24"/>
|
||||
</svg>
|
||||
|
||||
<div class="photo-meta">
|
||||
<span>HEIC · 4032 × 3024</span>
|
||||
<span>3,2 MB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel hidden">
|
||||
<div class="panel-head">
|
||||
<span class="panel-name">Gepäck</span>
|
||||
<span class="panel-tag">Was die Datei über sich weiß</span>
|
||||
</div>
|
||||
|
||||
<div class="exif-list">
|
||||
<div class="exif-key">Kamera</div>
|
||||
<div class="exif-val">Apple iPhone 15 Pro · 24 mm · ƒ/1.78</div>
|
||||
|
||||
<div class="exif-key">Belichtung</div>
|
||||
<div class="exif-val">1/250 s · ISO 100 · EV 0</div>
|
||||
|
||||
<div class="exif-key">Aufgenommen</div>
|
||||
<div class="exif-val">2026-04-12 · 18:47:12 · +02:00</div>
|
||||
|
||||
<div class="exif-key">GPS</div>
|
||||
<div class="exif-val gps">48.7847° N · 9.1825° E · 248 m<br><span style="font-weight:400">(Stuttgart, Königstraße 28)</span></div>
|
||||
|
||||
<div class="exif-key">Software</div>
|
||||
<div class="exif-val">iOS 18.4.1 · HDR · Live Photo</div>
|
||||
|
||||
<div class="exif-key">Farbprofil</div>
|
||||
<div class="exif-val">Display P3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="transit-strip">
|
||||
<div class="transit-tag">Weg</div>
|
||||
<div class="transit-body">
|
||||
<div class="transit-route">
|
||||
<span class="hop origin">Stuttgart</span>
|
||||
<span class="arrow">→</span>
|
||||
<span class="hop">DNS</span>
|
||||
<span class="arrow">→</span>
|
||||
<span class="hop">TLS 1.3</span>
|
||||
<span class="arrow">→</span>
|
||||
<span class="hop edge">CDN-Edge Tokyo</span>
|
||||
<span class="arrow">→</span>
|
||||
<span class="hop dest">Tokyo</span>
|
||||
</div>
|
||||
<div class="transit-headers">
|
||||
<strong>HTTP/3 200 OK</strong> · content-type: image/heic · content-length: 3 220 480 · <strong>RTT 47 ms</strong> · cache: HIT (Edge tok-7) · age: 312 s
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Eine Datei = Inhalt + Gepäck + Weg.</div>
|
||||
<div class="verdict-a"><strong>Inhalt</strong> sieht der Empfänger. <strong>Gepäck</strong> verrät, wer sie gemacht hat — und wo. <strong>Weg</strong> entscheidet, wie schnell sie ankommt. Drei Schichten, eine Datei.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 96 KiB |
@@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>1 TB verkauft, 931 GB angezeigt — wo gehen die 69 GB hin?</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--marketing: #2563eb;
|
||||
--os: #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.75rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: 1.05rem; }
|
||||
.sub strong { color: var(--dark); }
|
||||
|
||||
.compare {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 80px 1fr;
|
||||
gap: 18px;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.side {
|
||||
border: 2px solid;
|
||||
border-radius: 12px;
|
||||
padding: 18px 22px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.side.marketing { border-color: var(--marketing); }
|
||||
.side.os { border-color: var(--os); }
|
||||
|
||||
.side-tag {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.side.marketing .side-name { color: var(--marketing); }
|
||||
.side.os .side-name { color: var(--os); }
|
||||
.side-name { font-size: 1.15rem; font-weight: 700; }
|
||||
|
||||
.label-mock {
|
||||
background: var(--soft);
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 14px 22px;
|
||||
min-width: 240px;
|
||||
text-align: center;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.label-mock .big {
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 900;
|
||||
display: block;
|
||||
color: var(--dark);
|
||||
line-height: 1.05;
|
||||
}
|
||||
.side.marketing .label-mock .big { color: var(--marketing); }
|
||||
.side.os .label-mock .big { color: var(--os); }
|
||||
.label-mock .small-line { font-size: 0.78rem; }
|
||||
|
||||
.formel {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.formel strong { color: var(--dark); }
|
||||
|
||||
.arrow-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.arrow-col svg { display: block; }
|
||||
.arrow-col .why {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
color: var(--hl);
|
||||
text-align: center;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.math-box {
|
||||
margin-top: 22px;
|
||||
max-width: 1100px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background: var(--soft);
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 16px 22px;
|
||||
}
|
||||
.math-box-head { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 8px; }
|
||||
.math-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; font-family: ui-monospace, monospace; font-size: 0.9rem; line-height: 1.6; }
|
||||
.math-grid .key { color: var(--muted); }
|
||||
.math-grid .val { color: var(--dark); font-weight: 700; }
|
||||
.math-grid .val.hl { color: var(--hl); }
|
||||
|
||||
.verdict {
|
||||
margin-top: 18px;
|
||||
max-width: 1100px;
|
||||
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.05rem; font-weight: 700; color: var(--hl); }
|
||||
.verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
|
||||
.verdict-a code { font-family: ui-monospace, monospace; background: #fff; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>„1 TB" gekauft — 931 GB im Finder. Wo sind die 69 GB hin?</h1>
|
||||
<div class="sub">Nirgendwo. Es sind <strong>dieselben Byte</strong>. Nur zwei Welten zählen anders.</div>
|
||||
|
||||
<div class="compare">
|
||||
|
||||
<div class="side marketing">
|
||||
<div class="side-tag">Auf der Verpackung</div>
|
||||
<div class="side-name">Marketing</div>
|
||||
<div class="label-mock">
|
||||
<span class="big">1 TB</span>
|
||||
<span class="small-line">externe SSD</span>
|
||||
</div>
|
||||
<div class="formel">
|
||||
1 TB = <strong>10<sup>12</sup></strong> Byte<br>
|
||||
= 1 000 000 000 000
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-col">
|
||||
<svg viewBox="0 0 60 30" width="56" height="30"><path d="M5,15 L48,15 M42,7 L52,15 L42,23" stroke="#d63384" stroke-width="2.5" fill="none"/></svg>
|
||||
<div class="why">geteilt durch<br>2<sup>30</sup></div>
|
||||
</div>
|
||||
|
||||
<div class="side os">
|
||||
<div class="side-tag">Im Finder · Explorer</div>
|
||||
<div class="side-name">Betriebssystem</div>
|
||||
<div class="label-mock">
|
||||
<span class="big">931 GB</span>
|
||||
<span class="small-line">eigentlich: 931 GiB</span>
|
||||
</div>
|
||||
<div class="formel">
|
||||
1 GiB = <strong>2<sup>30</sup></strong> Byte<br>
|
||||
= 1 073 741 824
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="math-box">
|
||||
<div class="math-box-head">Die Rechnung</div>
|
||||
<div class="math-grid">
|
||||
<span class="key">Marketing schreibt</span>
|
||||
<span class="val">1 TB = 1 000 000 000 000 Byte (Basis 10)</span>
|
||||
<span class="key">Betriebssystem rechnet</span>
|
||||
<span class="val">1 TiB = 1 099 511 627 776 Byte (Basis 2)</span>
|
||||
<span class="key">1 TB in GiB umrechnen</span>
|
||||
<span class="val hl">10<sup>12</sup> ÷ 2<sup>30</sup> ≈ 931,3 GiB — der Finder zeigt also „931 GB"</span>
|
||||
<span class="key">Was die Studis sehen</span>
|
||||
<span class="val">Etikett: GB · Anzeige: GB · Bedeutung: zwei verschiedene Dinge</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Es fehlt nichts. Es wird nur in zwei Sprachen gezählt.</div>
|
||||
<div class="verdict-a">Korrekt wären <code>GiB</code> (binär, 1024) und <code>GB</code> (dezimal, 1000). In der Realität verwenden beide Welten <code>GB</code> und meinen verschiedene Zahlen.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 91 KiB |
@@ -0,0 +1,232 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Nyquist-Shannon — wie oft muss man messen?</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--bad: #ef4444;
|
||||
--warn: #f59e0b;
|
||||
--good: #16a34a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 28px 40px; }
|
||||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.05rem; }
|
||||
.sub strong { color: var(--dark); }
|
||||
|
||||
.cases {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.case {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
border: 2px solid;
|
||||
border-radius: 10px;
|
||||
padding: 10px 14px;
|
||||
background: #fff;
|
||||
}
|
||||
.case.bad { border-color: var(--bad); }
|
||||
.case.warn { border-color: var(--warn); }
|
||||
.case.good { border-color: var(--good); }
|
||||
|
||||
.case-meta { display: flex; flex-direction: column; gap: 4px; }
|
||||
.case-tag {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.case-name { font-size: 1.05rem; font-weight: 700; }
|
||||
.case.bad .case-name { color: var(--bad); }
|
||||
.case.warn .case-name { color: var(--warn); }
|
||||
.case.good .case-name { color: var(--good); }
|
||||
.case-rate { font-family: ui-monospace, monospace; font-size: 0.82rem; color: var(--dark); }
|
||||
.case-note { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
|
||||
|
||||
.plot { background: var(--soft); border-radius: 8px; }
|
||||
.plot svg { display: block; }
|
||||
|
||||
.verdict {
|
||||
margin-top: 20px;
|
||||
max-width: 1180px;
|
||||
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.05rem; font-weight: 700; color: var(--hl); }
|
||||
.verdict-a { font-size: 0.92rem; color: var(--dark); margin-top: 4px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
.verdict-a code { font-family: ui-monospace, monospace; background: var(--soft); padding: 1px 5px; border-radius: 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Nyquist-Shannon — wie oft müssen wir messen?</h1>
|
||||
<div class="sub">Dieselbe Welle, drei Sample-Raten. Eine fällt durch, eine reicht knapp, eine ist sicher.</div>
|
||||
|
||||
<div class="cases">
|
||||
|
||||
<div class="case bad">
|
||||
<div class="case-meta">
|
||||
<div class="case-tag">Zu wenig</div>
|
||||
<div class="case-name">Aliasing</div>
|
||||
<div class="case-rate">f<sub>s</sub> = 0,9 · f</div>
|
||||
<div class="case-note">Die Sample-Punkte sitzen auf der Welle — aber verbunden sehen sie aus wie eine <strong>ganz andere, langsamere</strong> Welle.</div>
|
||||
</div>
|
||||
<div class="plot">
|
||||
<svg viewBox="0 0 880 140" width="100%" height="140" preserveAspectRatio="none">
|
||||
<line x1="20" y1="70" x2="860" y2="70" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
|
||||
<path d="M 20,70 Q 46.25,-20 72.5,70 T 125,70 T 177.5,70 T 230,70 T 282.5,70 T 335,70 T 387.5,70 T 440,70 T 492.5,70 T 545,70 T 597.5,70 T 650,70 T 702.5,70 T 755,70 T 807.5,70 T 860,70"
|
||||
stroke="#cbd5e1" stroke-width="1.5" fill="none"/>
|
||||
<polyline points="20,70 136.7,41 253.4,25.7 370.1,31.2 486.8,54.9 603.5,85.8 720.2,109.2 836.9,114.2"
|
||||
stroke="#ef4444" stroke-width="2.5" fill="none"/>
|
||||
<circle cx="20" cy="70" r="5" fill="#ef4444"/>
|
||||
<circle cx="136.7" cy="41" r="5" fill="#ef4444"/>
|
||||
<circle cx="253.4" cy="25.7" r="5" fill="#ef4444"/>
|
||||
<circle cx="370.1" cy="31.2" r="5" fill="#ef4444"/>
|
||||
<circle cx="486.8" cy="54.9" r="5" fill="#ef4444"/>
|
||||
<circle cx="603.5" cy="85.8" r="5" fill="#ef4444"/>
|
||||
<circle cx="720.2" cy="109.2" r="5" fill="#ef4444"/>
|
||||
<circle cx="836.9" cy="114.2" r="5" fill="#ef4444"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case warn">
|
||||
<div class="case-meta">
|
||||
<div class="case-tag">Genau</div>
|
||||
<div class="case-name">Nyquist-Grenze</div>
|
||||
<div class="case-rate">f<sub>s</sub> = 2 · f</div>
|
||||
<div class="case-note">Sample exakt auf <strong>Peak und Tal</strong>. Mathematisch reicht das — visuell sieht es kaputt aus.</div>
|
||||
</div>
|
||||
<div class="plot">
|
||||
<svg viewBox="0 0 880 140" width="100%" height="140" preserveAspectRatio="none">
|
||||
<line x1="20" y1="70" x2="860" y2="70" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
|
||||
<path d="M 20,70 Q 46.25,-20 72.5,70 T 125,70 T 177.5,70 T 230,70 T 282.5,70 T 335,70 T 387.5,70 T 440,70 T 492.5,70 T 545,70 T 597.5,70 T 650,70 T 702.5,70 T 755,70 T 807.5,70 T 860,70"
|
||||
stroke="#cbd5e1" stroke-width="1.5" fill="none"/>
|
||||
<polyline points="46.25,25 98.75,115 151.25,25 203.75,115 256.25,25 308.75,115 361.25,25 413.75,115 466.25,25 518.75,115 571.25,25 623.75,115 676.25,25 728.75,115 781.25,25 833.75,115"
|
||||
stroke="#f59e0b" stroke-width="2" fill="none" opacity="0.5"/>
|
||||
<circle cx="46.25" cy="25" r="5" fill="#f59e0b"/>
|
||||
<circle cx="98.75" cy="115" r="5" fill="#f59e0b"/>
|
||||
<circle cx="151.25" cy="25" r="5" fill="#f59e0b"/>
|
||||
<circle cx="203.75" cy="115" r="5" fill="#f59e0b"/>
|
||||
<circle cx="256.25" cy="25" r="5" fill="#f59e0b"/>
|
||||
<circle cx="308.75" cy="115" r="5" fill="#f59e0b"/>
|
||||
<circle cx="361.25" cy="25" r="5" fill="#f59e0b"/>
|
||||
<circle cx="413.75" cy="115" r="5" fill="#f59e0b"/>
|
||||
<circle cx="466.25" cy="25" r="5" fill="#f59e0b"/>
|
||||
<circle cx="518.75" cy="115" r="5" fill="#f59e0b"/>
|
||||
<circle cx="571.25" cy="25" r="5" fill="#f59e0b"/>
|
||||
<circle cx="623.75" cy="115" r="5" fill="#f59e0b"/>
|
||||
<circle cx="676.25" cy="25" r="5" fill="#f59e0b"/>
|
||||
<circle cx="728.75" cy="115" r="5" fill="#f59e0b"/>
|
||||
<circle cx="781.25" cy="25" r="5" fill="#f59e0b"/>
|
||||
<circle cx="833.75" cy="115" r="5" fill="#f59e0b"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case good">
|
||||
<div class="case-meta">
|
||||
<div class="case-tag">Sicher</div>
|
||||
<div class="case-name">Überabtastung</div>
|
||||
<div class="case-rate">f<sub>s</sub> = 8 · f</div>
|
||||
<div class="case-note">Genug Punkte — die Welle wird Punkt für Punkt nachgezeichnet. So macht es eine CD.</div>
|
||||
</div>
|
||||
<div class="plot">
|
||||
<svg viewBox="0 0 880 140" width="100%" height="140" preserveAspectRatio="none">
|
||||
<line x1="20" y1="70" x2="860" y2="70" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
|
||||
<path d="M 20,70 Q 46.25,-20 72.5,70 T 125,70 T 177.5,70 T 230,70 T 282.5,70 T 335,70 T 387.5,70 T 440,70 T 492.5,70 T 545,70 T 597.5,70 T 650,70 T 702.5,70 T 755,70 T 807.5,70 T 860,70"
|
||||
stroke="#16a34a" stroke-width="2.5" fill="none" opacity="0.9"/>
|
||||
<circle cx="20" cy="70" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="33.1" cy="38.2" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="46.2" cy="25" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="59.4" cy="38.2" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="72.5" cy="70" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="85.6" cy="101.8" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="98.8" cy="115" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="111.9" cy="101.8" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="125" cy="70" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="138.1" cy="38.2" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="151.2" cy="25" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="164.4" cy="38.2" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="177.5" cy="70" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="190.6" cy="101.8" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="203.8" cy="115" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="216.9" cy="101.8" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="230" cy="70" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="243.1" cy="38.2" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="256.2" cy="25" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="269.4" cy="38.2" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="282.5" cy="70" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="295.6" cy="101.8" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="308.8" cy="115" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="321.9" cy="101.8" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="335" cy="70" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="348.1" cy="38.2" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="361.2" cy="25" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="374.4" cy="38.2" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="387.5" cy="70" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="400.6" cy="101.8" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="413.8" cy="115" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="426.9" cy="101.8" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="440" cy="70" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="453.1" cy="38.2" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="466.2" cy="25" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="479.4" cy="38.2" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="492.5" cy="70" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="505.6" cy="101.8" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="518.8" cy="115" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="531.9" cy="101.8" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="545" cy="70" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="558.1" cy="38.2" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="571.2" cy="25" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="584.4" cy="38.2" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="597.5" cy="70" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="610.6" cy="101.8" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="623.8" cy="115" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="636.9" cy="101.8" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="650" cy="70" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="663.1" cy="38.2" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="676.2" cy="25" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="689.4" cy="38.2" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="702.5" cy="70" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="715.6" cy="101.8" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="728.8" cy="115" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="741.9" cy="101.8" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="755" cy="70" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="768.1" cy="38.2" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="781.2" cy="25" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="794.4" cy="38.2" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="807.5" cy="70" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="820.6" cy="101.8" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="833.8" cy="115" r="2.5" fill="#16a34a"/>
|
||||
<circle cx="846.9" cy="101.8" r="2.5" fill="#16a34a"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">f<sub>s</sub> ≥ 2 · f<sub>max</sub>. So einfach. So endgültig.</div>
|
||||
<div class="verdict-a">Das Ohr hört bis <strong>20 kHz</strong>. 2 × 20 = 40 kHz. Die CD nimmt <code>44,1 kHz</code> — die 4,1 sind Sicherheits-Marge.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 140 KiB |
@@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Wir haben gelernt zu lesen — jetzt: wie kommt es rein?</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--done: #94a3b8;
|
||||
--next: #d63384;
|
||||
--bytes: #0891b2;
|
||||
}
|
||||
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.7rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 36px; font-size: 1.05rem; }
|
||||
.sub strong { color: var(--dark); }
|
||||
|
||||
.pivot {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr 240px 1fr 200px;
|
||||
gap: 8px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.station {
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 18px 14px;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.station.bytes { border-color: var(--bytes); background: #0f0f23; color: #fff; }
|
||||
.station-tag {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.station.bytes .station-tag { color: #94a3b8; }
|
||||
.station-name { font-size: 1.3rem; font-weight: 700; }
|
||||
.station.bytes .station-name { color: #67e8f9; }
|
||||
.station-detail { font-size: 0.85rem; color: var(--muted); }
|
||||
.station.bytes .station-detail { color: #94a3b8; font-family: ui-monospace, monospace; font-size: 0.78rem; line-height: 1.4; }
|
||||
|
||||
.station-art { display: flex; align-items: center; justify-content: center; height: 70px; }
|
||||
.station-art svg { width: 80%; height: 100%; }
|
||||
|
||||
.strang {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
.strang-arrow svg { display: block; width: 100%; height: 28px; }
|
||||
.strang-label {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.strang.next .strang-label { color: var(--next); }
|
||||
.strang.done .strang-label { color: var(--done); text-decoration: line-through; text-decoration-color: var(--done); text-decoration-thickness: 1.5px; }
|
||||
.strang-tag {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
text-align: center;
|
||||
}
|
||||
.strang.next .strang-tag { color: var(--next); }
|
||||
.strang.done .strang-tag { color: var(--done); }
|
||||
|
||||
.verdict {
|
||||
margin-top: 28px;
|
||||
max-width: 1100px;
|
||||
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.95rem; color: var(--dark); margin-top: 4px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Wir haben gelernt zu <strong>lesen</strong>. Jetzt: wie kommt es <strong>rein</strong>?</h1>
|
||||
<div class="sub">Die rechte Seite haben wir abgearbeitet. Die linke ist die nächste Stunde.</div>
|
||||
|
||||
<div class="pivot">
|
||||
|
||||
<div class="station">
|
||||
<div class="station-tag">Quelle</div>
|
||||
<div class="station-name">Welt</div>
|
||||
<div class="station-art">
|
||||
<svg viewBox="0 0 120 70" preserveAspectRatio="xMidYMid meet">
|
||||
<path d="M5,35 Q15,10 25,35 T45,35 T65,35 T85,35 T105,35 T115,35"
|
||||
stroke="#d63384" stroke-width="2.5" fill="none"/>
|
||||
<circle cx="115" cy="35" r="3" fill="#d63384"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="station-detail">Schallwelle · Lichtwelle<br>kontinuierlich · analog</div>
|
||||
</div>
|
||||
|
||||
<div class="strang next">
|
||||
<div class="strang-tag">jetzt dran</div>
|
||||
<div class="strang-arrow">
|
||||
<svg viewBox="0 0 220 28" preserveAspectRatio="none">
|
||||
<line x1="6" y1="14" x2="200" y2="14" stroke="#d63384" stroke-width="2.5"/>
|
||||
<path d="M195,7 L208,14 L195,21" stroke="#d63384" stroke-width="2.5" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="strang-label">Sampling + Quantisierung</div>
|
||||
</div>
|
||||
|
||||
<div class="station bytes">
|
||||
<div class="station-tag">Mitte</div>
|
||||
<div class="station-name">Datei</div>
|
||||
<div class="station-detail">
|
||||
89 50 4E 47<br>
|
||||
0D 0A 1A 0A<br>
|
||||
00 00 00 0D
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="strang done">
|
||||
<div class="strang-tag">schon durch</div>
|
||||
<div class="strang-arrow">
|
||||
<svg viewBox="0 0 220 28" preserveAspectRatio="none">
|
||||
<line x1="6" y1="14" x2="200" y2="14" stroke="#94a3b8" stroke-width="2"/>
|
||||
<path d="M195,7 L208,14 L195,21" stroke="#94a3b8" stroke-width="2" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="strang-label">Notation · Encoding · Format</div>
|
||||
</div>
|
||||
|
||||
<div class="station">
|
||||
<div class="station-tag">Ziel</div>
|
||||
<div class="station-name">Mensch</div>
|
||||
<div class="station-art">
|
||||
<svg viewBox="0 0 120 70" preserveAspectRatio="xMidYMid meet">
|
||||
<rect x="14" y="14" width="92" height="14" rx="2" fill="#1a1a2e"/>
|
||||
<rect x="14" y="34" width="68" height="6" rx="1" fill="#cbd5e1"/>
|
||||
<rect x="14" y="44" width="78" height="6" rx="1" fill="#cbd5e1"/>
|
||||
<rect x="14" y="54" width="56" height="6" rx="1" fill="#cbd5e1"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="station-detail">Text · Bild · Klang<br>Bedeutung</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Die Datei ist die Mitte. Beide Wege führen durch sie hindurch.</div>
|
||||
<div class="verdict-a"><strong>Rechts:</strong> aus Byte wird Bedeutung — gerade gelernt. <strong>Links:</strong> aus Welt wird Byte — jetzt.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 60 KiB |
@@ -0,0 +1,159 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Psychoakustik — was MP3 weglässt</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--kept: #16a34a;
|
||||
--tossed: #94a3b8;
|
||||
--masker: #2563eb;
|
||||
--threshold: #ea580c;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 30px 40px; }
|
||||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.05rem; }
|
||||
.sub strong { color: var(--dark); }
|
||||
|
||||
.chart-wrap {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
.chart-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.chart-title { font-size: 1rem; font-weight: 700; }
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
.legend-item { display: flex; align-items: center; gap: 4px; }
|
||||
.legend-swatch {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
.legend-swatch.kept { background: var(--kept); }
|
||||
.legend-swatch.tossed { background: var(--tossed); }
|
||||
.legend-swatch.masker { background: var(--masker); }
|
||||
.legend-swatch.threshold {
|
||||
background: transparent;
|
||||
border-top: 2px dashed var(--threshold);
|
||||
height: 8px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.verdict {
|
||||
margin-top: 22px;
|
||||
max-width: 1180px;
|
||||
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.93rem; color: var(--dark); margin-top: 4px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Psychoakustik — was MP3 wegwirft</h1>
|
||||
<div class="sub">Ein lauter Ton macht leise Nachbarn <strong>unhörbar</strong>. Was nicht hörbar ist, muss man nicht speichern.</div>
|
||||
|
||||
<div class="chart-wrap">
|
||||
<div class="chart-head">
|
||||
<div class="chart-title">Lautstärke (dB SPL) über Frequenz (Hz, logarithmisch)</div>
|
||||
<div class="legend">
|
||||
<span class="legend-item"><span class="legend-swatch masker"></span>lauter Ton (Masker)</span>
|
||||
<span class="legend-item"><span class="legend-swatch kept"></span>hörbar · bleibt</span>
|
||||
<span class="legend-item"><span class="legend-swatch tossed"></span>maskiert · raus</span>
|
||||
<span class="legend-item"><span class="legend-swatch threshold"></span>Hörschwelle</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg viewBox="0 0 1100 380" width="100%" height="380">
|
||||
<line x1="80" y1="340" x2="1060" y2="340" stroke="#1a1a2e" stroke-width="1.5"/>
|
||||
<line x1="80" y1="20" x2="80" y2="340" stroke="#1a1a2e" stroke-width="1.5"/>
|
||||
|
||||
<text x="20" y="30" font-size="11" fill="#6b7280">dB</text>
|
||||
<text x="40" y="50" font-size="10" fill="#6b7280" text-anchor="end">100</text>
|
||||
<text x="40" y="125" font-size="10" fill="#6b7280" text-anchor="end">75</text>
|
||||
<text x="40" y="200" font-size="10" fill="#6b7280" text-anchor="end">50</text>
|
||||
<text x="40" y="275" font-size="10" fill="#6b7280" text-anchor="end">25</text>
|
||||
<text x="40" y="345" font-size="10" fill="#6b7280" text-anchor="end">0</text>
|
||||
|
||||
<line x1="75" y1="50" x2="80" y2="50" stroke="#1a1a2e"/>
|
||||
<line x1="75" y1="125" x2="80" y2="125" stroke="#1a1a2e"/>
|
||||
<line x1="75" y1="200" x2="80" y2="200" stroke="#1a1a2e"/>
|
||||
<line x1="75" y1="275" x2="80" y2="275" stroke="#1a1a2e"/>
|
||||
|
||||
<text x="100" y="360" font-size="10" fill="#6b7280">20</text>
|
||||
<text x="260" y="360" font-size="10" fill="#6b7280">100</text>
|
||||
<text x="420" y="360" font-size="10" fill="#6b7280">500</text>
|
||||
<text x="580" y="360" font-size="10" fill="#6b7280">1k</text>
|
||||
<text x="740" y="360" font-size="10" fill="#6b7280">5k</text>
|
||||
<text x="900" y="360" font-size="10" fill="#6b7280">10k</text>
|
||||
<text x="1040" y="360" font-size="10" fill="#6b7280">20k</text>
|
||||
<text x="540" y="378" font-size="11" fill="#6b7280" text-anchor="middle">Frequenz [Hz]</text>
|
||||
|
||||
<path d="M100,80 Q170,130 260,200 Q350,290 420,310 Q500,335 580,330 Q670,310 740,295 Q820,280 900,250 Q970,200 1040,80"
|
||||
stroke="#ea580c" stroke-width="2" stroke-dasharray="5,5" fill="none"/>
|
||||
|
||||
<path d="M460,340 L460,210 Q480,165 580,80 Q680,165 700,210 L700,340 Z"
|
||||
fill="#2563eb" opacity="0.15"/>
|
||||
<path d="M460,340 L460,210 Q480,165 580,80 Q680,165 700,210 L700,340"
|
||||
stroke="#2563eb" stroke-width="2" fill="none" stroke-dasharray="2,3"/>
|
||||
|
||||
<rect x="572" y="80" width="16" height="260" fill="#2563eb"/>
|
||||
|
||||
<circle cx="240" cy="270" r="6" fill="#16a34a"/>
|
||||
<text x="240" y="260" font-size="10" fill="#16a34a" text-anchor="middle" font-weight="700">bleibt</text>
|
||||
|
||||
<circle cx="420" cy="240" r="6" fill="#16a34a"/>
|
||||
<text x="420" y="230" font-size="10" fill="#16a34a" text-anchor="middle" font-weight="700">bleibt</text>
|
||||
|
||||
<circle cx="510" cy="180" r="6" fill="#94a3b8"/>
|
||||
<text x="510" y="170" font-size="10" fill="#94a3b8" text-anchor="middle">raus</text>
|
||||
|
||||
<circle cx="660" cy="200" r="6" fill="#94a3b8"/>
|
||||
<text x="660" y="190" font-size="10" fill="#94a3b8" text-anchor="middle">raus</text>
|
||||
|
||||
<circle cx="640" cy="155" r="6" fill="#94a3b8"/>
|
||||
<text x="640" y="145" font-size="10" fill="#94a3b8" text-anchor="middle">raus</text>
|
||||
|
||||
<circle cx="860" cy="220" r="6" fill="#16a34a"/>
|
||||
<text x="860" y="210" font-size="10" fill="#16a34a" text-anchor="middle" font-weight="700">bleibt</text>
|
||||
|
||||
<circle cx="960" cy="170" r="6" fill="#16a34a"/>
|
||||
<text x="960" y="160" font-size="10" fill="#16a34a" text-anchor="middle" font-weight="700">bleibt</text>
|
||||
|
||||
<text x="595" y="76" font-size="11" fill="#2563eb" font-weight="700">1 kHz · 90 dB · "Masker"</text>
|
||||
<text x="780" y="105" font-size="11" fill="#ea580c" font-weight="700">Hörschwelle (in Ruhe)</text>
|
||||
<text x="540" y="160" font-size="11" fill="#2563eb" font-weight="700" text-anchor="middle">Maskierungs-Bereich</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">MP3 kodiert nur, was über der <strong>kombinierten Schwelle</strong> liegt.</div>
|
||||
<div class="verdict-a">Alles unterhalb wird weggeworfen — das Ohr hört es ohnehin nicht. So spart MP3 typischerweise <strong>~90 % der Daten</strong>, ohne dass der Mensch im Alltag etwas vermisst.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 77 KiB |
@@ -0,0 +1,222 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Psychovisualität — Luminanz vor Chrominanz</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--full: #2563eb;
|
||||
--reduced: #7c3aed;
|
||||
--y: #1a1a2e;
|
||||
--cb: #2563eb;
|
||||
--cr: #ef4444;
|
||||
--bar-bg: #e2e8f0;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 30px 40px; }
|
||||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: 1.05rem; }
|
||||
.sub strong { color: var(--dark); }
|
||||
|
||||
.compare {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 22px;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.col {
|
||||
border: 2px solid;
|
||||
border-radius: 12px;
|
||||
padding: 16px 20px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.col.full { border-color: var(--full); }
|
||||
.col.reduced { border-color: var(--reduced); }
|
||||
|
||||
.col-head { display: flex; justify-content: space-between; align-items: baseline; }
|
||||
.col-tag {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.col-name { font-size: 1.25rem; font-weight: 700; }
|
||||
.col.full .col-name { color: var(--full); }
|
||||
.col.reduced .col-name { color: var(--reduced); }
|
||||
.col-format {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.82rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.preview {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.preview svg { display: block; }
|
||||
|
||||
.channels {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.channel { display: grid; grid-template-columns: 90px 1fr 60px; gap: 8px; align-items: center; font-size: 0.85rem; }
|
||||
.channel-label {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-weight: 700;
|
||||
}
|
||||
.channel-bar { height: 14px; background: var(--bar-bg); border-radius: 3px; overflow: hidden; }
|
||||
.channel-bar .fill { height: 100%; border-radius: 3px; }
|
||||
.channel-bar .fill.y { background: var(--y); }
|
||||
.channel-bar .fill.cb { background: var(--cb); }
|
||||
.channel-bar .fill.cr { background: var(--cr); }
|
||||
.channel-pct {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.summary-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: var(--soft);
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--dark);
|
||||
}
|
||||
.summary-line strong { color: var(--hl); }
|
||||
|
||||
.verdict {
|
||||
margin-top: 22px;
|
||||
max-width: 1180px;
|
||||
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.93rem; color: var(--dark); margin-top: 4px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Psychovisualität — Luminanz vor Chrominanz</h1>
|
||||
<div class="sub">Das Auge sieht <strong>Helligkeit</strong> scharf. <strong>Farbe</strong> darf grob bleiben — und das Bild sieht trotzdem identisch aus.</div>
|
||||
|
||||
<div class="compare">
|
||||
|
||||
<div class="col full">
|
||||
<div class="col-head">
|
||||
<span class="col-name">Ohne Subsampling</span>
|
||||
<span class="col-tag">4:4:4</span>
|
||||
</div>
|
||||
<div class="col-format">jedes Pixel speichert Y · Cb · Cr in voller Auflösung</div>
|
||||
|
||||
<svg class="preview" viewBox="0 0 320 130" preserveAspectRatio="xMidYMid slice">
|
||||
<defs>
|
||||
<linearGradient id="full-sky" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#fde68a"/>
|
||||
<stop offset="55%" stop-color="#fb923c"/>
|
||||
<stop offset="100%" stop-color="#7c3aed"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="320" height="130" fill="url(#full-sky)"/>
|
||||
<circle cx="230" cy="50" r="22" fill="#fef3c7"/>
|
||||
<path d="M0,90 L40,75 L90,87 L140,68 L190,82 L240,66 L290,80 L320,72 L320,130 L0,130 Z" fill="#1e1b4b"/>
|
||||
<path d="M0,108 L60,100 L120,108 L180,98 L240,106 L300,98 L320,103 L320,130 L0,130 Z" fill="#0f172a" opacity="0.7"/>
|
||||
</svg>
|
||||
|
||||
<div class="channels">
|
||||
<div class="channel">
|
||||
<span class="channel-label">Y</span>
|
||||
<div class="channel-bar"><div class="fill y" style="width:100%"></div></div>
|
||||
<span class="channel-pct">100 %</span>
|
||||
</div>
|
||||
<div class="channel">
|
||||
<span class="channel-label">Cb</span>
|
||||
<div class="channel-bar"><div class="fill cb" style="width:100%"></div></div>
|
||||
<span class="channel-pct">100 %</span>
|
||||
</div>
|
||||
<div class="channel">
|
||||
<span class="channel-label">Cr</span>
|
||||
<div class="channel-bar"><div class="fill cr" style="width:100%"></div></div>
|
||||
<span class="channel-pct">100 %</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-line">
|
||||
<span>Datenmenge:</span>
|
||||
<span><strong>100 %</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col reduced">
|
||||
<div class="col-head">
|
||||
<span class="col-name">JPEG · H.264 Standard</span>
|
||||
<span class="col-tag">4:2:0</span>
|
||||
</div>
|
||||
<div class="col-format">Y voll · Cb & Cr nur in 2×2-Pixel-Blöcken</div>
|
||||
|
||||
<svg class="preview" viewBox="0 0 320 130" preserveAspectRatio="xMidYMid slice">
|
||||
<defs>
|
||||
<linearGradient id="red-sky" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#fde68a"/>
|
||||
<stop offset="55%" stop-color="#fb923c"/>
|
||||
<stop offset="100%" stop-color="#7c3aed"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="320" height="130" fill="url(#red-sky)"/>
|
||||
<circle cx="230" cy="50" r="22" fill="#fef3c7"/>
|
||||
<path d="M0,90 L40,75 L90,87 L140,68 L190,82 L240,66 L290,80 L320,72 L320,130 L0,130 Z" fill="#1e1b4b"/>
|
||||
<path d="M0,108 L60,100 L120,108 L180,98 L240,106 L300,98 L320,103 L320,130 L0,130 Z" fill="#0f172a" opacity="0.7"/>
|
||||
</svg>
|
||||
|
||||
<div class="channels">
|
||||
<div class="channel">
|
||||
<span class="channel-label">Y</span>
|
||||
<div class="channel-bar"><div class="fill y" style="width:100%"></div></div>
|
||||
<span class="channel-pct">100 %</span>
|
||||
</div>
|
||||
<div class="channel">
|
||||
<span class="channel-label">Cb</span>
|
||||
<div class="channel-bar"><div class="fill cb" style="width:25%"></div></div>
|
||||
<span class="channel-pct">25 %</span>
|
||||
</div>
|
||||
<div class="channel">
|
||||
<span class="channel-label">Cr</span>
|
||||
<div class="channel-bar"><div class="fill cr" style="width:25%"></div></div>
|
||||
<span class="channel-pct">25 %</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-line">
|
||||
<span>Datenmenge:</span>
|
||||
<span><strong>50 %</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Halbe Datenmenge. Identisches Bild — für dein Auge.</div>
|
||||
<div class="verdict-a">JPEG, H.264, H.265, WebP — alle reduzieren die Farb-Auflösung auf <strong>ein Viertel</strong>. Das ist Psychovisualität: was wir nicht scharf sehen, muss man nicht scharf speichern.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 76 KiB |
@@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Raster vs. Vektor — Pixel oder Anweisung?</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--raster: #ea580c;
|
||||
--vektor: #2563eb;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 30px 40px; }
|
||||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: 1.05rem; }
|
||||
.sub strong { color: var(--dark); }
|
||||
|
||||
.pair {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 22px;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.col {
|
||||
border: 2px solid;
|
||||
border-radius: 12px;
|
||||
padding: 16px 18px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.col.raster { border-color: var(--raster); }
|
||||
.col.vektor { border-color: var(--vektor); }
|
||||
|
||||
.col-head { display: flex; justify-content: space-between; align-items: baseline; }
|
||||
.col-name { font-size: 1.3rem; font-weight: 700; }
|
||||
.col.raster .col-name { color: var(--raster); }
|
||||
.col.vektor .col-name { color: var(--vektor); }
|
||||
.col-tag {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.col-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
|
||||
|
||||
.views {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
.view { display: flex; flex-direction: column; gap: 4px; }
|
||||
.view-label {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
}
|
||||
.view-canvas {
|
||||
background: var(--soft);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
aspect-ratio: 1.4;
|
||||
overflow: hidden;
|
||||
}
|
||||
.view-canvas svg { display: block; width: 100%; height: 100%; }
|
||||
|
||||
.stats {
|
||||
background: var(--soft);
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.82rem;
|
||||
color: var(--dark);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.stats .key { color: var(--muted); }
|
||||
.stats .val { font-weight: 700; }
|
||||
|
||||
.verdict {
|
||||
margin-top: 22px;
|
||||
max-width: 1180px;
|
||||
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.93rem; color: var(--dark); margin-top: 4px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Raster vs. Vektor — Pixel oder Anweisung?</h1>
|
||||
<div class="sub">Beide zeigen ein Häkchen. Wenn man <strong>reinzoomt</strong>, kommt die Wahrheit raus.</div>
|
||||
|
||||
<div class="pair">
|
||||
|
||||
<div class="col raster">
|
||||
<div class="col-head">
|
||||
<span class="col-name">Raster</span>
|
||||
<span class="col-tag">PNG · JPEG · GIF</span>
|
||||
</div>
|
||||
<div class="col-desc">Ein Gitter aus Pixel-Farbwerten. Jede Position ist festgelegt.</div>
|
||||
|
||||
<div class="views">
|
||||
<div class="view">
|
||||
<div class="view-label">Original (32 × 22 px)</div>
|
||||
<div class="view-canvas">
|
||||
<svg viewBox="0 0 320 220" preserveAspectRatio="xMidYMid meet">
|
||||
<rect x="0" y="0" width="320" height="220" fill="#f8fafc"/>
|
||||
<g shape-rendering="crispEdges">
|
||||
<rect x="20" y="120" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="40" y="140" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="60" y="160" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="80" y="180" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="100" y="160" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="120" y="140" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="140" y="120" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="160" y="100" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="180" y="80" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="200" y="60" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="220" y="40" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="240" y="20" width="20" height="20" fill="#ea580c"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="view">
|
||||
<div class="view-label">4× Zoom</div>
|
||||
<div class="view-canvas">
|
||||
<svg viewBox="80 60 160 160" preserveAspectRatio="xMidYMid meet">
|
||||
<rect x="0" y="0" width="320" height="220" fill="#f8fafc"/>
|
||||
<g shape-rendering="crispEdges">
|
||||
<rect x="20" y="120" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="40" y="140" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="60" y="160" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="80" y="180" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="100" y="160" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="120" y="140" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="140" y="120" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="160" y="100" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="180" y="80" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="200" y="60" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="220" y="40" width="20" height="20" fill="#ea580c"/>
|
||||
<rect x="240" y="20" width="20" height="20" fill="#ea580c"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div><span class="key">Speicher:</span> <span class="val">32 × 22 × 3 Byte = 2 112 Byte</span></div>
|
||||
<div><span class="key">Beim Zoom:</span> <span class="val">pixelig — Information ist erschöpft</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col vektor">
|
||||
<div class="col-head">
|
||||
<span class="col-name">Vektor</span>
|
||||
<span class="col-tag">SVG · PDF · Schriftarten</span>
|
||||
</div>
|
||||
<div class="col-desc">Mathematische Anweisungen: <code style="background:#0f0f23;color:#5fb3e4;padding:0 4px;border-radius:3px;">polyline 30,110 → 90,170 → 250,30</code></div>
|
||||
|
||||
<div class="views">
|
||||
<div class="view">
|
||||
<div class="view-label">Original</div>
|
||||
<div class="view-canvas">
|
||||
<svg viewBox="0 0 320 220" preserveAspectRatio="xMidYMid meet">
|
||||
<rect x="0" y="0" width="320" height="220" fill="#f8fafc"/>
|
||||
<polyline points="30,130 90,190 270,30" stroke="#2563eb" stroke-width="14" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="view">
|
||||
<div class="view-label">4× Zoom</div>
|
||||
<div class="view-canvas">
|
||||
<svg viewBox="80 60 160 160" preserveAspectRatio="xMidYMid meet">
|
||||
<rect x="0" y="0" width="320" height="220" fill="#f8fafc"/>
|
||||
<polyline points="30,130 90,190 270,30" stroke="#2563eb" stroke-width="14" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div><span class="key">Speicher:</span> <span class="val">3 Punkte + Strichbreite = ~80 Byte</span></div>
|
||||
<div><span class="key">Beim Zoom:</span> <span class="val">scharf — wird neu berechnet</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Pixel sind festgenagelt. Vektoren werden bei jedem Zoom <strong>neu berechnet</strong>.</div>
|
||||
<div class="verdict-a">Faustregel: <strong>Foto → Raster</strong> (kann nicht „neu berechnet" werden). <strong>Logo, Icon, Schrift → Vektor</strong> (skalierbar ohne Verlust).</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 76 KiB |
@@ -0,0 +1,189 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Was wir über Kompression gelernt haben</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--lossless: #16a34a;
|
||||
--lossy: #ef4444;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 30px 40px; }
|
||||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 1.05rem; }
|
||||
.sub strong { color: var(--dark); }
|
||||
|
||||
.compare {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 22px;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.col {
|
||||
border: 2px solid;
|
||||
border-radius: 12px;
|
||||
padding: 18px 22px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.col.lossless { border-color: var(--lossless); }
|
||||
.col.lossy { border-color: var(--lossy); }
|
||||
|
||||
.col-head { display: flex; justify-content: space-between; align-items: baseline; }
|
||||
.col-name { font-size: 1.4rem; font-weight: 700; }
|
||||
.col.lossless .col-name { color: var(--lossless); }
|
||||
.col.lossy .col-name { color: var(--lossy); }
|
||||
.col-tag {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.row { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; }
|
||||
.row-key {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
padding-top: 3px;
|
||||
}
|
||||
.row-val { font-size: 0.92rem; line-height: 1.5; color: var(--dark); }
|
||||
.row-val strong {
|
||||
font-family: ui-monospace, monospace;
|
||||
background: var(--soft);
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.matrix {
|
||||
margin-top: 22px;
|
||||
max-width: 1180px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background: var(--soft);
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 14px 22px;
|
||||
}
|
||||
.matrix-head {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.matrix-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: 8px 16px;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
.matrix-grid .scenario { font-weight: 700; color: var(--dark); }
|
||||
.matrix-grid .answer {
|
||||
font-family: ui-monospace, monospace;
|
||||
color: var(--dark);
|
||||
}
|
||||
.matrix-grid .answer.lossless { color: var(--lossless); font-weight: 700; }
|
||||
.matrix-grid .answer.lossy { color: var(--lossy); font-weight: 700; }
|
||||
|
||||
.verdict {
|
||||
margin-top: 18px;
|
||||
max-width: 1180px;
|
||||
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.93rem; color: var(--dark); margin-top: 4px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Was wir über Kompression gelernt haben</h1>
|
||||
<div class="sub">Zwei fundamental verschiedene Wege, dasselbe Ziel: <strong>Daten kleiner machen.</strong></div>
|
||||
|
||||
<div class="compare">
|
||||
|
||||
<div class="col lossless">
|
||||
<div class="col-head">
|
||||
<span class="col-name">Verlustfrei</span>
|
||||
<span class="col-tag">Lossless</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row-key">Was passiert</div>
|
||||
<div class="row-val">Redundanz raus — Wiederholungen kürzer schreiben</div>
|
||||
<div class="row-key">Umkehrbar</div>
|
||||
<div class="row-val">Ja. Aus der komprimierten Datei wird das <strong>exakte</strong> Original wieder.</div>
|
||||
<div class="row-key">Verfahren</div>
|
||||
<div class="row-val">RLE, Huffman, Deflate, LZ77/LZ78</div>
|
||||
<div class="row-key">Formate</div>
|
||||
<div class="row-val">ZIP · PNG · FLAC · TIFF · RAW</div>
|
||||
<div class="row-key">Faktor</div>
|
||||
<div class="row-val">2× – 5× (typisch)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col lossy">
|
||||
<div class="col-head">
|
||||
<span class="col-name">Verlustbehaftet</span>
|
||||
<span class="col-tag">Lossy</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row-key">Was passiert</div>
|
||||
<div class="row-val">Irrelevanz raus — was Mensch nicht wahrnimmt, wird weggeworfen</div>
|
||||
<div class="row-key">Umkehrbar</div>
|
||||
<div class="row-val">Nein. Einmal weg, für immer weg.</div>
|
||||
<div class="row-key">Trick</div>
|
||||
<div class="row-val">Psychoakustik (MP3) · Psychovisualität (JPEG)</div>
|
||||
<div class="row-key">Formate</div>
|
||||
<div class="row-val">MP3 · AAC · JPEG · WebP · H.264 · H.265</div>
|
||||
<div class="row-key">Faktor</div>
|
||||
<div class="row-val">10× – 100× (typisch)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="matrix">
|
||||
<div class="matrix-head">Entscheidungsmatrix — wann nehme ich welches?</div>
|
||||
<div class="matrix-grid">
|
||||
<div class="scenario">Foto-Archiv (RAW)</div>
|
||||
<div class="answer lossless">Lossless</div>
|
||||
<div class="scenario">Spotify-Stream</div>
|
||||
<div class="answer lossy">Lossy</div>
|
||||
|
||||
<div class="scenario">Code-Repository</div>
|
||||
<div class="answer lossless">Lossless (ZIP)</div>
|
||||
<div class="scenario">Instagram-Foto</div>
|
||||
<div class="answer lossy">Lossy (JPEG)</div>
|
||||
|
||||
<div class="scenario">Studio-Master-Track</div>
|
||||
<div class="answer lossless">Lossless (FLAC)</div>
|
||||
<div class="scenario">YouTube-Video</div>
|
||||
<div class="answer lossy">Lossy (H.264)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Lossless für Archiv und Code. Lossy für Streaming und Anzeige.</div>
|
||||
<div class="verdict-a">Faustregel: <strong>Werkzeug</strong> (du arbeitest noch dran) → Lossless. <strong>Konsum</strong> (du schaust/hörst nur) → Lossy.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 108 KiB |
@@ -0,0 +1,188 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Was wir in 90 Minuten gelernt haben</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--left: #d63384;
|
||||
--right: #0891b2;
|
||||
--bytes: #0891b2;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 30px 40px; }
|
||||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 28px; font-size: 1.05rem; }
|
||||
.sub strong { color: var(--dark); }
|
||||
|
||||
.recap {
|
||||
display: grid;
|
||||
grid-template-columns: 160px 1fr 200px 1fr 160px;
|
||||
gap: 10px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.station {
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 18px 12px;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.station.bytes { border-color: var(--bytes); background: #0f0f23; color: #fff; }
|
||||
.station-tag {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.station.bytes .station-tag { color: #94a3b8; }
|
||||
.station-name { font-size: 1.3rem; font-weight: 700; }
|
||||
.station.bytes .station-name { color: #67e8f9; }
|
||||
.station-detail { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
|
||||
.station.bytes .station-detail { color: #94a3b8; font-family: ui-monospace, monospace; font-size: 0.76rem; line-height: 1.35; }
|
||||
|
||||
.strang {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
.strang-arrow { text-align: center; }
|
||||
.strang-arrow svg { width: 100%; height: 18px; }
|
||||
.strang-title {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.strang.left .strang-title { color: var(--left); }
|
||||
.strang.right .strang-title { color: var(--right); }
|
||||
.strang-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--soft);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.strang-list li {
|
||||
font-size: 0.82rem;
|
||||
color: var(--dark);
|
||||
padding-left: 12px;
|
||||
position: relative;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.strang-list li::before {
|
||||
content: "·";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
.strang.left .strang-list li::before { color: var(--left); }
|
||||
.strang.right .strang-list li::before { color: var(--right); }
|
||||
|
||||
.verdict {
|
||||
margin-top: 22px;
|
||||
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.95rem; color: var(--dark); margin-top: 4px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Was wir in 90 Minuten gelernt haben</h1>
|
||||
<div class="sub">Beide Wege gehen durch <strong>dieselbe Mitte</strong>. Du kennst jetzt alle Stationen.</div>
|
||||
|
||||
<div class="recap">
|
||||
|
||||
<div class="station">
|
||||
<div class="station-tag">Quelle</div>
|
||||
<div class="station-name">Welt</div>
|
||||
<div class="station-detail">Schallwelle<br>Lichtwelle<br>kontinuierlich · analog</div>
|
||||
</div>
|
||||
|
||||
<div class="strang left">
|
||||
<div class="strang-arrow">
|
||||
<svg viewBox="0 0 200 18" preserveAspectRatio="none">
|
||||
<line x1="6" y1="9" x2="180" y2="9" stroke="#d63384" stroke-width="2"/>
|
||||
<path d="M174,3 L188,9 L174,15" stroke="#d63384" stroke-width="2" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="strang-title">Welt → Byte</div>
|
||||
<ul class="strang-list">
|
||||
<li>Sampling-Rate</li>
|
||||
<li>Bittiefe · Quantisierung</li>
|
||||
<li>Datenrate-Formel</li>
|
||||
<li>Nyquist · 2·f<sub>max</sub></li>
|
||||
<li>Aliasing & Moiré</li>
|
||||
<li>44,1 kHz = 2·20 kHz + Marge</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="station bytes">
|
||||
<div class="station-tag">Mitte</div>
|
||||
<div class="station-name">Datei</div>
|
||||
<div class="station-detail">
|
||||
Byte-Strom<br>
|
||||
89 50 4E 47<br>
|
||||
nichts als Zahlen
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="strang right">
|
||||
<div class="strang-arrow">
|
||||
<svg viewBox="0 0 200 18" preserveAspectRatio="none">
|
||||
<line x1="6" y1="9" x2="180" y2="9" stroke="#0891b2" stroke-width="2"/>
|
||||
<path d="M174,3 L188,9 L174,15" stroke="#0891b2" stroke-width="2" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="strang-title">Byte → Bedeutung</div>
|
||||
<ul class="strang-list">
|
||||
<li>Bit · Byte · Hex</li>
|
||||
<li>8 Bit = 256 Zustände</li>
|
||||
<li>ASCII · UTF-8</li>
|
||||
<li>Magic Number</li>
|
||||
<li>KB vs KiB</li>
|
||||
<li>Hex im Alltag (CSS, MAC)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="station">
|
||||
<div class="station-tag">Ziel</div>
|
||||
<div class="station-name">Mensch</div>
|
||||
<div class="station-detail">Text · Bild · Klang<br>Bedeutung<br>verstehen</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Eine Datei ist kein Mysterium. Es ist eine <strong>Reihe von Zahlen</strong> mit zwei Geschichten dran.</div>
|
||||
<div class="verdict-a">Eine Geschichte erzählt, <strong>woher</strong> die Zahlen kommen. Die andere, <strong>was</strong> sie bedeuten. Beide kennst du jetzt.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 76 KiB |
@@ -0,0 +1,217 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>USB-C — drei Achsen, eine Verwirrung</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--stecker: #2563eb;
|
||||
--kabel: #ea580c;
|
||||
--protokoll: #7c3aed;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 28px 40px; }
|
||||
h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
|
||||
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.05rem; }
|
||||
.sub strong { color: var(--dark); }
|
||||
|
||||
.axes {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 18px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.axis {
|
||||
border: 2px solid;
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.axis.stecker { border-color: var(--stecker); }
|
||||
.axis.kabel { border-color: var(--kabel); }
|
||||
.axis.protokoll { border-color: var(--protokoll); }
|
||||
|
||||
.axis-head { display: flex; justify-content: space-between; align-items: baseline; }
|
||||
.axis-num {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
color: var(--muted);
|
||||
}
|
||||
.axis-name { font-size: 1.15rem; font-weight: 700; }
|
||||
.axis.stecker .axis-name { color: var(--stecker); }
|
||||
.axis.kabel .axis-name { color: var(--kabel); }
|
||||
.axis.protokoll .axis-name { color: var(--protokoll); }
|
||||
.axis-tagline {
|
||||
font-size: 0.82rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.axis-tagline strong { color: var(--dark); }
|
||||
|
||||
.icon {
|
||||
background: var(--soft);
|
||||
border-radius: 6px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.icon svg { display: block; }
|
||||
|
||||
.options {
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.6;
|
||||
color: var(--dark);
|
||||
background: var(--soft);
|
||||
border-radius: 6px;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
.options strong {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.78rem;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.axis.stecker .options strong { color: var(--stecker); }
|
||||
.axis.kabel .options strong { color: var(--kabel); }
|
||||
.axis.protokoll .options strong { color: var(--protokoll); }
|
||||
|
||||
.scenario {
|
||||
margin-top: 22px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background: var(--soft);
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 14px 22px;
|
||||
}
|
||||
.scenario-head {
|
||||
font-size: 0.74rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--muted);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.scenario-body {
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.scenario-body code {
|
||||
font-family: ui-monospace, monospace;
|
||||
background: #fff;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.verdict {
|
||||
margin-top: 16px;
|
||||
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.05rem; font-weight: 700; color: var(--hl); }
|
||||
.verdict-a { font-size: 0.92rem; color: var(--dark); margin-top: 4px; }
|
||||
.verdict-a strong { color: var(--hl); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>USB-C — drei Achsen, eine Verwirrung</h1>
|
||||
<div class="sub">Derselbe Stecker. <strong>Aber Kabel ≠ Kabel.</strong> <strong>Protokoll ≠ Protokoll.</strong></div>
|
||||
|
||||
<div class="axes">
|
||||
|
||||
<div class="axis stecker">
|
||||
<div class="axis-head">
|
||||
<span class="axis-name">Stecker</span>
|
||||
<span class="axis-num">1 · MECHANIK</span>
|
||||
</div>
|
||||
<div class="axis-tagline">Die <strong>Form</strong>. Was reinsteckt, oval, beidseitig.</div>
|
||||
<div class="icon">
|
||||
<svg viewBox="0 0 120 30" width="140" height="40">
|
||||
<rect x="6" y="9" width="108" height="12" rx="6" fill="#2563eb" opacity="0.18" stroke="#2563eb" stroke-width="2"/>
|
||||
<rect x="22" y="13" width="76" height="4" rx="2" fill="#2563eb"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="options">
|
||||
Nur eine Sorte: <strong>USB-C</strong> (auch USB Type-C). 24 Pins. Beidseitig steckbar. Andere Stecker-Typen: USB-A, USB-B, Micro-USB — nicht mit C kompatibel.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="axis kabel">
|
||||
<div class="axis-head">
|
||||
<span class="axis-name">Kabel</span>
|
||||
<span class="axis-num">2 · WAS DURCH-PASST</span>
|
||||
</div>
|
||||
<div class="axis-tagline">Die <strong>Adern</strong>. Was elektrisch transportiert werden kann.</div>
|
||||
<div class="icon">
|
||||
<svg viewBox="0 0 160 30" width="180" height="40">
|
||||
<path d="M10,15 L150,15" stroke="#ea580c" stroke-width="3"/>
|
||||
<rect x="2" y="8" width="14" height="14" rx="3" fill="#ea580c" opacity="0.4" stroke="#ea580c"/>
|
||||
<rect x="144" y="8" width="14" height="14" rx="3" fill="#ea580c" opacity="0.4" stroke="#ea580c"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="options">
|
||||
<strong>Charge-only</strong> · billig, nur Strom · 5 W<br>
|
||||
<strong>USB 2.0</strong> · 480 Mbit/s · 60 W (3 A)<br>
|
||||
<strong>USB 3.2 Gen 2</strong> · 10 Gbit/s · 100 W<br>
|
||||
<strong>Thunderbolt 4</strong> · 40 Gbit/s · 240 W
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="axis protokoll">
|
||||
<div class="axis-head">
|
||||
<span class="axis-name">Protokoll</span>
|
||||
<span class="axis-num">3 · WAS LÄUFT</span>
|
||||
</div>
|
||||
<div class="axis-tagline">Die <strong>Sprache</strong>. Was die zwei Geräte miteinander reden.</div>
|
||||
<div class="icon">
|
||||
<svg viewBox="0 0 160 30" width="180" height="40">
|
||||
<circle cx="20" cy="15" r="6" fill="#7c3aed"/>
|
||||
<path d="M30,15 L130,15" stroke="#7c3aed" stroke-width="2" stroke-dasharray="6,4"/>
|
||||
<circle cx="140" cy="15" r="6" fill="#7c3aed"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="options">
|
||||
<strong>USB-PD</strong> · Power Delivery (Laden)<br>
|
||||
<strong>USB 2/3/4</strong> · Datenübertragung<br>
|
||||
<strong>Thunderbolt 3/4</strong> · Daten + Display<br>
|
||||
<strong>DisplayPort Alt</strong> · Monitor anschließen<br>
|
||||
<strong>HDMI Alt</strong> · weiter HDMI rausführen
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="scenario">
|
||||
<div class="scenario-head">Konkret: warum lädt der Laptop nicht?</div>
|
||||
<div class="scenario-body">
|
||||
USB-C-Port am Laptop ist da (<strong>Stecker</strong> stimmt). Aber der Aldi-Kabel ist <code>Charge-only</code> mit <code>5 W</code> (<strong>Kabel</strong> kann nicht genug Strom liefern). Oder der Port am Laptop unterstützt nur <code>USB-PD</code> mit 100 W, das Netzteil meldet aber nur 65 W (<strong>Protokoll</strong>-Handshake scheitert). <em>Eine der drei Achsen passt nicht.</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="verdict">
|
||||
<div class="verdict-q">Drei Achsen. Drei unabhängige Fragen. Drei Gründe, warum's nicht funktioniert.</div>
|
||||
<div class="verdict-a">Beim nächsten „USB-C-Kabel funktioniert nicht": <strong>Stecker passt → Kabel-Spec checken → Protokoll-Support prüfen.</strong> In dieser Reihenfolge.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 118 KiB |