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

223015b phase 3a: 5 advance organizers gebaut (eröffnungs-folie pro kapitel) — kap01 welt→datei→mensch mit signal-rein/bedeutung-raus split, kap02 lossless vs lossy mit konvergenz zu wann-was, kap03 drei modalitäten (bild/audio/video) unter wahrnehmungs-lücken mit patent-politik-fußnote, kap04 wohnen-vs-reisen (speicher/schnittstellen) mit anwendungs-wahl, kap05 weg-vs-gepäck (distribution/metadaten) mit 'aufmerksamkeit für das was wir nicht sehen' als roter faden. stil-vorlage three-views.html + byte-fuer-byte.html (light-bg, colored-poles, pink-konvergenz, mono-code-blöcke). pro html: chromium-headless render 1280x680-800px, png visuell inspiziert

Browse Source
This commit is contained in:
libretech
2026-05-14 03:02:43 +02:00
parent bf2ca0bb87
commit ff21ce9d47
10 changed files with 771 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
slides/223015b/assets/demos/kap03-modalitäten-bogen.html
+173
View File
@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Kapitel 3 — Roter Faden</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--hl-soft: #fce7f3;
--bild: #2563eb;
--bild-soft: #dbeafe;
--audio: #ea580c;
--audio-soft: #ffedd5;
--video: #7c3aed;
--video-soft: #ede9fe;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 32px 44px; }
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.02rem; }
.top {
text-align: center;
padding: 12px 20px;
background: var(--hl-soft);
border: 2px solid var(--hl);
border-radius: 10px;
margin: 0 auto 12px;
max-width: 600px;
}
.top-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.top-text { font-size: 1.1rem; font-weight: 700; color: var(--hl); margin-top: 2px; }
.top-arrows { display: flex; justify-content: center; gap: 280px; margin: 4px 0 14px; }
.top-arrows svg { width: 24px; height: 18px; }
.modalities {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 22px;
max-width: 1180px;
margin: 0 auto;
}
.modality {
border: 2px solid;
border-radius: 14px;
padding: 20px 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.modality.bild { border-color: var(--bild); background: var(--bild-soft); }
.modality.audio { border-color: var(--audio); background: var(--audio-soft); }
.modality.video { border-color: var(--video); background: var(--video-soft); }
.modality-icon { font-size: 2.2rem; }
.modality-name { font-size: 1.35rem; font-weight: 700; }
.modality.bild .modality-name { color: var(--bild); }
.modality.audio .modality-name { color: var(--audio); }
.modality.video .modality-name { color: var(--video); }
.modality-block {
background: #fff;
border: 1px solid currentColor;
border-radius: 8px;
padding: 9px 12px;
width: 100%;
box-sizing: border-box;
}
.modality-block .label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 3px;
}
.modality-block .body {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.86rem;
color: var(--dark);
line-height: 1.4;
}
.conv-arrows { display: flex; justify-content: center; gap: 240px; margin: 16px 0 6px; }
.conv-arrows svg { width: 24px; height: 18px; }
.bottom {
max-width: 1180px;
margin: 0 auto;
border: 2px solid var(--hl);
background: var(--hl-soft);
border-radius: 14px;
padding: 16px 22px;
text-align: center;
}
.bottom-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.bottom-text { font-size: 1.15rem; font-weight: 700; color: var(--hl); margin-top: 4px; }
.bottom-sub { font-size: 0.92rem; color: var(--muted); margin-top: 4px; }
</style>
</head>
<body>
<h1>Drei Modalitäten, ein Prinzip</h1>
<div class="sub">Bild · Audio · Video — alle drei nutzen Lossy. Möglich nur, weil Wahrnehmung Lücken hat.</div>
<div class="top">
<div class="top-label">Gemeinsamer Hebel (aus Kap 2)</div>
<div class="top-text">Wahrnehmungs-Lücken</div>
</div>
<div class="top-arrows">
<svg viewBox="0 0 24 18"><polygon points="2,2 22,2 12,16" fill="#d63384"/></svg>
<svg viewBox="0 0 24 18"><polygon points="2,2 22,2 12,16" fill="#d63384"/></svg>
<svg viewBox="0 0 24 18"><polygon points="2,2 22,2 12,16" fill="#d63384"/></svg>
</div>
<div class="modalities">
<div class="modality bild">
<div class="modality-icon">🖼️</div>
<div class="modality-name">Bild</div>
<div class="modality-block">
<div class="label">Pipeline</div>
<div class="body">RGB → YCbCr → DCT → Huffman</div>
</div>
<div class="modality-block">
<div class="label">Format-Wahl</div>
<div class="body">PNG · JPEG · WebP · AVIF · SVG</div>
</div>
</div>
<div class="modality audio">
<div class="modality-icon">🎵</div>
<div class="modality-name">Audio</div>
<div class="modality-block">
<div class="label">Trick</div>
<div class="body">Maskierung · Hörschwelle</div>
</div>
<div class="modality-block">
<div class="label">Format-Wahl</div>
<div class="body">MP3 · AAC · FLAC · Opus</div>
</div>
</div>
<div class="modality video">
<div class="modality-icon">🎬</div>
<div class="modality-name">Video</div>
<div class="modality-block">
<div class="label">Trennung</div>
<div class="body">Container ≠ Codec</div>
</div>
<div class="modality-block">
<div class="label">Codec-Welt</div>
<div class="body">H.264 · H.265 · VP9 · AV1</div>
</div>
</div>
</div>
<div class="conv-arrows">
<svg viewBox="0 0 24 18"><polygon points="2,2 22,2 12,16" fill="#d63384"/></svg>
<svg viewBox="0 0 24 18"><polygon points="2,2 22,2 12,16" fill="#d63384"/></svg>
<svg viewBox="0 0 24 18"><polygon points="2,2 22,2 12,16" fill="#d63384"/></svg>
</div>
<div class="bottom">
<div class="bottom-label">Was alle drei Pipelines am Ende prägt</div>
<div class="bottom-text">Patent-Politik · Industrie-Adoption</div>
<div class="bottom-sub">JPEG XL · WebP · AV1 — Technik allein entscheidet selten</div>
</div>
</body>
</html>