public/uni
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

223015b phase 3b: 2 konkrete eröffner-demos (statt schablone) + STATUS.md für branch-fortsetzung. kap02-eroeffner: FLAC vs MP3-128 mit synth-svg-wellenformen, echten dateigrößen (5.3 MB vs 0.48 MB), bitrate-vergleich, verdict-frage 'hört man den unterschied'. kap03-eroeffner: 3×3-tabelle bild/audio/video × roh/lossy-modern/lossy-aggressiv mit echten zahlen (foto 36MB→4MB→800KB, audio 5.3MB→720KB→240KB, video 12GB→94MB→45MB) + visuelle größenbalken + verdict mit reduktionsfaktoren ×45/×22/×270 und drei verschiedenen wahrnehmungs-tricks pro modalität. kap4+5 eröffner noch offen, status-doc beschreibt nächste schritte für branch-fortsetzung von unterwegs

Browse Source
This commit is contained in:
libretech
2026-05-14 10:44:41 +02:00
parent 1c8185ba10
commit f573e9d78b
5 changed files with 341 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
slides/223015b/assets/demos/kap02-eroeffner.html
+158
View File
@@ -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>
slides/223015b/assets/demos/kap02-eroeffner.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

slides/223015b/assets/demos/kap03-eroeffner.html
+119
View File
@@ -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>
slides/223015b/assets/demos/kap03-eroeffner.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB