223015b: 5 advance organizers verworfen — plump, gleichförmig, nicht erkenntnisgewinnend (alle nach gleicher schablone: header → topic-boxen → konvergenz-pinkbox, also nur kapitel-titel in diagramm-form statt struktur/spannung sichtbar machen). zusätzlich emoji-icons in mehreren demos (verstoß gegen no-emoji-konvention). neue strategie: pro kapitel eigene konkrete eröffner-grafik (nicht schablone), z.B. wellenform-vergleich FLAC/MP3 für kap2, JPEG-degradation-paar für kap3, datei-reise-pfad mit datenraten für kap4, foto-mit-EXIF-overlay für kap5. kap1 nutzt byte-fuer-byte als eröffner (kein zusätzliches organizer-bild nötig)
This commit is contained in:
@@ -1,135 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Kapitel 1 — Roter Faden</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--hl-soft: #fce7f3;
|
||||
--in: #1e5f8a;
|
||||
--in-soft: #e0f2fe;
|
||||
--out: #16a34a;
|
||||
--out-soft: #dcfce7;
|
||||
--bin-bg: #0f0f23;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 36px 44px; }
|
||||
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; }
|
||||
|
||||
.stage {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 22px;
|
||||
align-items: stretch;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pole {
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 24px 22px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: var(--soft);
|
||||
}
|
||||
.pole.in { border-color: var(--in); background: var(--in-soft); }
|
||||
.pole.center { border-color: var(--hl); background: var(--hl-soft); }
|
||||
.pole.out { border-color: var(--out); background: var(--out-soft); }
|
||||
|
||||
.pole-tag { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
|
||||
.pole-name { font-size: 1.35rem; font-weight: 700; color: var(--dark); }
|
||||
.pole-icon { font-size: 2.4rem; }
|
||||
.pole-detail { font-size: 0.88rem; color: var(--muted); text-align: center; line-height: 1.4; }
|
||||
|
||||
.arrows { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1180px; margin: 18px auto 0; }
|
||||
.arrow-box {
|
||||
border: 1px dashed var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.arrow-label { font-size: 0.85rem; font-weight: 700; color: var(--hl); text-transform: uppercase; letter-spacing: 0.08em; }
|
||||
.arrow-bullets { font-size: 0.95rem; color: var(--dark); margin: 0; padding-left: 18px; line-height: 1.5; }
|
||||
.arrow-bullets li { margin: 2px 0; }
|
||||
|
||||
.byte-strip {
|
||||
margin-top: 28px;
|
||||
background: var(--bin-bg);
|
||||
color: #e5e7eb;
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
padding: 14px 20px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.06em;
|
||||
max-width: 1180px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.byte-strip small { display: block; color: #9ca3af; font-family: system-ui; letter-spacing: 0; font-size: 0.78rem; margin-top: 6px; text-transform: uppercase; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Was steckt in einer Datei — und wie kommt es da rein?</h1>
|
||||
<div class="sub">Dieses Kapitel überbrückt zwei Richtungen, beide treffen sich am Byte.</div>
|
||||
|
||||
<div class="stage">
|
||||
<div class="pole in">
|
||||
<div class="pole-tag">Pol A</div>
|
||||
<div class="pole-icon">🎙️</div>
|
||||
<div class="pole-name">Welt</div>
|
||||
<div class="pole-detail">analoge Signale<br>Druckwelle · Licht · Spannung</div>
|
||||
</div>
|
||||
|
||||
<div class="pole center">
|
||||
<div class="pole-tag">Treffpunkt</div>
|
||||
<div class="pole-icon">📄</div>
|
||||
<div class="pole-name">Datei</div>
|
||||
<div class="pole-detail">Byte-Strom<br>Zahlen von 0 bis 255</div>
|
||||
</div>
|
||||
|
||||
<div class="pole out">
|
||||
<div class="pole-tag">Pol B</div>
|
||||
<div class="pole-icon">👁️</div>
|
||||
<div class="pole-name">Mensch</div>
|
||||
<div class="pole-detail">Bedeutung<br>Text · Bild · Klang</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<div class="arrow-box">
|
||||
<div class="arrow-label">Welt → Datei: rein</div>
|
||||
<ul class="arrow-bullets">
|
||||
<li>Sampling (wie oft messen)</li>
|
||||
<li>Quantisierung (wie genau)</li>
|
||||
<li>Nyquist · Aliasing</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="arrow-box">
|
||||
<div class="arrow-label">Datei → Mensch: raus</div>
|
||||
<ul class="arrow-bullets">
|
||||
<li>Notation (Bin · Dez · Hex)</li>
|
||||
<li>Encoding (ASCII · UTF-8)</li>
|
||||
<li>Format-Erkennung (Magic Numbers)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="byte-strip">
|
||||
01001000 01100101 01101100 01101100 01101111 …
|
||||
<small>der gemeinsame Treffpunkt</small>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB |
@@ -1,151 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Kapitel 2 — Roter Faden</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--hl-soft: #fce7f3;
|
||||
--lossless: #16a34a;
|
||||
--lossless-soft: #dcfce7;
|
||||
--lossy: #ef4444;
|
||||
--lossy-soft: #fee2e2;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 36px 44px; }
|
||||
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; }
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: var(--hl);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.top-arrow { display: flex; justify-content: center; margin-bottom: 14px; }
|
||||
.top-arrow svg { width: 36px; height: 28px; }
|
||||
|
||||
.branches {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 28px;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.branch {
|
||||
border: 2px solid;
|
||||
border-radius: 14px;
|
||||
padding: 22px 22px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.branch.lossless { border-color: var(--lossless); background: var(--lossless-soft); }
|
||||
.branch.lossy { border-color: var(--lossy); background: var(--lossy-soft); }
|
||||
.branch-tag { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
|
||||
.branch-name { font-size: 1.4rem; font-weight: 700; }
|
||||
.branch.lossless .branch-name { color: var(--lossless); }
|
||||
.branch.lossy .branch-name { color: var(--lossy); }
|
||||
.branch-principle { font-size: 1rem; color: var(--dark); }
|
||||
.branch-principle strong { color: var(--dark); }
|
||||
.branch-reverse { font-size: 0.92rem; color: var(--muted); font-style: italic; }
|
||||
.branch-tech, .branch-where {
|
||||
background: #fff;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.branch-tech .label, .branch-where .label {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.branch-tech .body, .branch-where .body {
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
font-size: 0.95rem;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 28px;
|
||||
max-width: 1180px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.conv-arrows { display: flex; justify-content: center; gap: 360px; margin-bottom: 8px; }
|
||||
.conv-arrows svg { width: 28px; height: 20px; }
|
||||
.bottom-box {
|
||||
border: 2px solid var(--hl);
|
||||
background: var(--hl-soft);
|
||||
border-radius: 14px;
|
||||
padding: 18px 22px;
|
||||
text-align: center;
|
||||
}
|
||||
.bottom-q { font-size: 1.3rem; font-weight: 700; color: var(--hl); }
|
||||
.bottom-d { font-size: 0.95rem; color: var(--muted); margin-top: 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Daten sind unhandlich — also was tun?</h1>
|
||||
<div class="sub">Zwei fundamental verschiedene Wege. Die Wahl hängt vom Inhalt ab.</div>
|
||||
|
||||
<div class="top">Kompression</div>
|
||||
<div class="top-arrow">
|
||||
<svg viewBox="0 0 36 28"><polygon points="6,4 30,4 18,24" fill="#d63384"/></svg>
|
||||
</div>
|
||||
|
||||
<div class="branches">
|
||||
<div class="branch lossless">
|
||||
<div class="branch-tag">Weg A</div>
|
||||
<div class="branch-name">Verlustfrei (Lossless)</div>
|
||||
<div class="branch-principle"><strong>Redundanz raus.</strong></div>
|
||||
<div class="branch-reverse">→ vollständig umkehrbar</div>
|
||||
<div class="branch-tech">
|
||||
<div class="label">Techniken</div>
|
||||
<div class="body">RLE · Huffman · LZ77</div>
|
||||
</div>
|
||||
<div class="branch-where">
|
||||
<div class="label">Wo</div>
|
||||
<div class="body">ZIP · PNG · FLAC · RAW</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="branch lossy">
|
||||
<div class="branch-tag">Weg B</div>
|
||||
<div class="branch-name">Verlustbehaftet (Lossy)</div>
|
||||
<div class="branch-principle"><strong>Irrelevanz raus.</strong></div>
|
||||
<div class="branch-reverse">→ nicht umkehrbar</div>
|
||||
<div class="branch-tech">
|
||||
<div class="label">Grundlage</div>
|
||||
<div class="body">Psychoakustik · Psychovisualität</div>
|
||||
</div>
|
||||
<div class="branch-where">
|
||||
<div class="label">Wo</div>
|
||||
<div class="body">MP3 · JPEG · H.264 · WebP</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="conv-arrows">
|
||||
<svg viewBox="0 0 28 20"><polygon points="4,2 24,2 14,18" fill="#d63384"/></svg>
|
||||
<svg viewBox="0 0 28 20"><polygon points="4,2 24,2 14,18" fill="#d63384"/></svg>
|
||||
</div>
|
||||
<div class="bottom-box">
|
||||
<div class="bottom-q">Wann was?</div>
|
||||
<div class="bottom-d">Entscheidungsmatrix — Foto · Stream · Code · Backup</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 65 KiB |
@@ -1,173 +0,0 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
@@ -1,156 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Kapitel 4 — Roter Faden</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--hl-soft: #fce7f3;
|
||||
--wohnen: #0891b2;
|
||||
--wohnen-soft: #cffafe;
|
||||
--reisen: #f59e0b;
|
||||
--reisen-soft: #fef3c7;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 36px 44px; }
|
||||
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; }
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: var(--hl);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.top-arrows { display: flex; justify-content: center; gap: 360px; margin-bottom: 14px; }
|
||||
.top-arrows svg { width: 28px; height: 22px; }
|
||||
|
||||
.branches {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 28px;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.branch {
|
||||
border: 2px solid;
|
||||
border-radius: 14px;
|
||||
padding: 22px 22px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.branch.wohnen { border-color: var(--wohnen); background: var(--wohnen-soft); }
|
||||
.branch.reisen { border-color: var(--reisen); background: var(--reisen-soft); }
|
||||
|
||||
.branch-tag { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
|
||||
.branch-question { font-size: 1.6rem; font-weight: 700; }
|
||||
.branch.wohnen .branch-question { color: var(--wohnen); }
|
||||
.branch.reisen .branch-question { color: var(--reisen); }
|
||||
.branch-name { font-size: 1.1rem; color: var(--dark); }
|
||||
|
||||
.branch-block {
|
||||
background: #fff;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.branch-block .label {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.branch-block .body {
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
font-size: 0.94rem;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.conv-arrows { display: flex; justify-content: center; gap: 360px; margin: 18px 0 6px; }
|
||||
.conv-arrows svg { width: 28px; height: 22px; }
|
||||
|
||||
.bottom {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
border: 2px solid var(--hl);
|
||||
background: var(--hl-soft);
|
||||
border-radius: 14px;
|
||||
padding: 18px 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.3rem; 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>Wo wohnen die Bytes — und wie reisen sie?</h1>
|
||||
<div class="sub">Speicher und Schnittstellen — zwei Seiten desselben Alltagsproblems.</div>
|
||||
|
||||
<div class="top">Bytes wohnen + reisen</div>
|
||||
<div class="top-arrows">
|
||||
<svg viewBox="0 0 28 22"><polygon points="4,2 24,2 14,20" fill="#d63384"/></svg>
|
||||
<svg viewBox="0 0 28 22"><polygon points="4,2 24,2 14,20" fill="#d63384"/></svg>
|
||||
</div>
|
||||
|
||||
<div class="branches">
|
||||
<div class="branch wohnen">
|
||||
<div class="branch-tag">Frage A</div>
|
||||
<div class="branch-question">Wo?</div>
|
||||
<div class="branch-name">Speichermedien</div>
|
||||
<div class="branch-block">
|
||||
<div class="label">Medien</div>
|
||||
<div class="body">HDD · SSD · Flash</div>
|
||||
</div>
|
||||
<div class="branch-block">
|
||||
<div class="label">Organisation</div>
|
||||
<div class="body">Filesystems (FAT32 · NTFS · APFS · ext4)</div>
|
||||
</div>
|
||||
<div class="branch-block">
|
||||
<div class="label">Sicherung</div>
|
||||
<div class="body">Backup nach 3-2-1-Regel</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="branch reisen">
|
||||
<div class="branch-tag">Frage B</div>
|
||||
<div class="branch-question">Wie?</div>
|
||||
<div class="branch-name">Schnittstellen</div>
|
||||
<div class="branch-block">
|
||||
<div class="label">Universalstecker</div>
|
||||
<div class="body">USB-C (3 Achsen: Stecker · Kabel · Protokoll)</div>
|
||||
</div>
|
||||
<div class="branch-block">
|
||||
<div class="label">Display</div>
|
||||
<div class="body">HDMI · DisplayPort · Thunderbolt</div>
|
||||
</div>
|
||||
<div class="branch-block">
|
||||
<div class="label">Netzwerk</div>
|
||||
<div class="body">Ethernet · WiFi</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="conv-arrows">
|
||||
<svg viewBox="0 0 28 22"><polygon points="4,2 24,2 14,20" fill="#d63384"/></svg>
|
||||
<svg viewBox="0 0 28 22"><polygon points="4,2 24,2 14,20" fill="#d63384"/></svg>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="bottom-label">In beiden Fällen</div>
|
||||
<div class="bottom-text">Anwendungs-Wahl statt Auswendiglernen</div>
|
||||
<div class="bottom-sub">Entscheidungsmatrizen pro Use Case</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB |
@@ -1,156 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Kapitel 5 — Roter Faden</title>
|
||||
<style>
|
||||
:root {
|
||||
--dark: #1a1a2e;
|
||||
--muted: #6b7280;
|
||||
--soft: #f8fafc;
|
||||
--border: #cbd5e1;
|
||||
--hl: #d63384;
|
||||
--hl-soft: #fce7f3;
|
||||
--weg: #059669;
|
||||
--weg-soft: #d1fae5;
|
||||
--gepaeck: #be185d;
|
||||
--gepaeck-soft: #fce7f3;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||
body { padding: 36px 44px; }
|
||||
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; }
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--hl);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.top-arrows { display: flex; justify-content: center; gap: 360px; margin-bottom: 14px; }
|
||||
.top-arrows svg { width: 28px; height: 22px; }
|
||||
|
||||
.branches {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 28px;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.branch {
|
||||
border: 2px solid;
|
||||
border-radius: 14px;
|
||||
padding: 22px 22px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.branch.weg { border-color: var(--weg); background: var(--weg-soft); }
|
||||
.branch.gepaeck { border-color: var(--gepaeck); background: var(--gepaeck-soft); }
|
||||
|
||||
.branch-tag { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
|
||||
.branch-question { font-size: 1.5rem; font-weight: 700; }
|
||||
.branch.weg .branch-question { color: var(--weg); }
|
||||
.branch.gepaeck .branch-question { color: var(--gepaeck); }
|
||||
.branch-name { font-size: 1.05rem; color: var(--dark); }
|
||||
|
||||
.branch-block {
|
||||
background: #fff;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.branch-block .label {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.branch-block .body {
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
font-size: 0.92rem;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.conv-arrows { display: flex; justify-content: center; gap: 360px; margin: 18px 0 6px; }
|
||||
.conv-arrows svg { width: 28px; height: 22px; }
|
||||
|
||||
.bottom {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
border: 2px solid var(--hl);
|
||||
background: var(--hl-soft);
|
||||
border-radius: 14px;
|
||||
padding: 18px 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.3rem; 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>Eine Datei reist — und erzählt</h1>
|
||||
<div class="sub">Was passiert auf dem Weg zur Endnutzerin, und was verrät die Datei dabei über sich?</div>
|
||||
|
||||
<div class="top">Datei in Bewegung</div>
|
||||
<div class="top-arrows">
|
||||
<svg viewBox="0 0 28 22"><polygon points="4,2 24,2 14,20" fill="#d63384"/></svg>
|
||||
<svg viewBox="0 0 28 22"><polygon points="4,2 24,2 14,20" fill="#d63384"/></svg>
|
||||
</div>
|
||||
|
||||
<div class="branches">
|
||||
<div class="branch weg">
|
||||
<div class="branch-tag">Frage A</div>
|
||||
<div class="branch-question">Weg</div>
|
||||
<div class="branch-name">Wie kommt der Inhalt zur Nutzerin?</div>
|
||||
<div class="branch-block">
|
||||
<div class="label">Verteilung</div>
|
||||
<div class="body">CDN · PoP · Edge-Caching</div>
|
||||
</div>
|
||||
<div class="branch-block">
|
||||
<div class="label">Schnittstelle</div>
|
||||
<div class="body">REST-API · GET/POST/PUT/DELETE</div>
|
||||
</div>
|
||||
<div class="branch-block">
|
||||
<div class="label">Format</div>
|
||||
<div class="body">JSON</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="branch gepaeck">
|
||||
<div class="branch-tag">Frage B</div>
|
||||
<div class="branch-question">Gepäck</div>
|
||||
<div class="branch-name">Was trägt die Datei mit sich?</div>
|
||||
<div class="branch-block">
|
||||
<div class="label">Metadaten</div>
|
||||
<div class="body">EXIF · ID3 · PDF-Properties</div>
|
||||
</div>
|
||||
<div class="branch-block">
|
||||
<div class="label">Risiko</div>
|
||||
<div class="body">Privacy-Leak (McAfee · Blair)</div>
|
||||
</div>
|
||||
<div class="branch-block">
|
||||
<div class="label">Lockin</div>
|
||||
<div class="body">Adobe PSD · Apple .pages</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="conv-arrows">
|
||||
<svg viewBox="0 0 28 22"><polygon points="4,2 24,2 14,20" fill="#d63384"/></svg>
|
||||
<svg viewBox="0 0 28 22"><polygon points="4,2 24,2 14,20" fill="#d63384"/></svg>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="bottom-label">Roter Faden</div>
|
||||
<div class="bottom-text">Aufmerksamkeit für das, was wir nicht sehen</div>
|
||||
<div class="bottom-sub">Latenz · Caching · Header · Metadaten · Lockin</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB |
Reference in New Issue
Block a user