add data units, global data growth and AI content statistics slides to termin 1

add consistent dark theme styling across all slides
- add CSS variables for colors (foreground, highlight, dimmed) - style code blocks with dark background and blue accent - improve inline code appearance - update link colors - add deploy restriction to CLAUDE.md
2025-12-25 14:08:00 +01:00 · 2025-12-19 21:31:43 +01:00 · 2025-12-19 16:45:59 +01:00 · 2025-12-19 15:20:16 +01:00
9 changed files with 376 additions and 13 deletions
@@ -5,6 +5,7 @@ This project builds a presentation deck for Marp based on Markdown files.
 ## Agent Restrictions
 - Agent NEVER runs commands on its own except changing files INSIDE THIS FOLDER, never any other then this
 - Agent NEVER runs build commands or any automated processes without explicit user request, as the user is working in dev mode
+- Agent NEVER runs deploy commands (make deploy, scp, etc.) without explicit user permission - always ask first

 ## Critical File Protection: index.md
 - `index.md` is the MAIN CONTENT FILE for the entire lecture series - treat with extreme care
@@ -83,6 +83,7 @@ html: copy-assets
 		echo "  $$f.html"; \
 		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md -o $(BUILD_DIR)/$$f.html; \
 	done
+	@./scripts/generate-index.sh $(BUILD_DIR)
 	@echo "Done! HTML files in $(BUILD_DIR)/"

 # Clean generated files
@@ -0,0 +1,93 @@
+#!/usr/bin/env bash
+# Generate index.html for slide overview
+
+BUILD_DIR="${1:-build}"
+
+cat > "$BUILD_DIR/index.html" << 'HEADER'
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>223015b - Dateiformate, Schnittstellen, Speichermedien</title>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 2rem;
+      background: #1a1a2e;
+      color: #eee;
+    }
+    h1 { color: #fff; margin-bottom: 0.5rem; }
+    .subtitle { color: #888; margin-bottom: 2rem; }
+    .termin {
+      background: #16213e;
+      border-radius: 8px;
+      padding: 1.5rem;
+      margin-bottom: 1rem;
+      text-decoration: none;
+      display: block;
+      transition: transform 0.2s, background 0.2s;
+    }
+    .termin:hover { background: #1f4068; transform: translateX(5px); }
+    .termin h2 { color: #fff; margin: 0 0 0.5rem 0; font-size: 1.2rem; }
+    .termin .date { color: #4ecca3; font-size: 0.9rem; }
+    .termin .topic { color: #aaa; font-size: 0.95rem; margin-left: 1rem; }
+    footer { margin-top: 2rem; color: #666; font-size: 0.85rem; text-align: center; }
+    footer a { color: #4ecca3; }
+  </style>
+</head>
+<body>
+  <h1>223015b</h1>
+  <p class="subtitle">Dateiformate, Schnittstellen, Speichermedien & Distributionswege<br>
+  HdM Stuttgart - WS 2025/26 - Michael Czechowski</p>
+HEADER
+
+# Generate links for each termin (sorted)
+for html in $(ls "$BUILD_DIR"/2*.html 2>/dev/null | sort); do
+  filename=$(basename "$html")
+
+  # Extract components from filename
+  # Format: 2025-12-19-termin-1-grundlagen-text-audio.html
+  date=$(echo "$filename" | grep -oE '^[0-9]{4}-[0-9]{2}-[0-9]{2}')
+  termin_num=$(echo "$filename" | grep -oE 'termin-[0-9]+' | grep -oE '[0-9]+')
+  topic_raw=$(echo "$filename" | sed -E 's/^[0-9]{4}-[0-9]{2}-[0-9]{2}-termin-[0-9]+-//' | sed 's/\.html$//')
+
+  # Format topic: replace - with space, capitalize
+  topic=$(echo "$topic_raw" | sed 's/-/ /g' | sed 's/.*/\u&/')
+
+  # Format date
+  if [[ "$date" =~ ^[0-9]{4}-[0-9]{2}-[0-9]{2}$ ]]; then
+    formatted_date=$(date -d "$date" "+%d.%m.%Y" 2>/dev/null || echo "$date")
+  else
+    formatted_date="TBA"
+  fi
+
+  # Handle termin number
+  if [[ "$termin_num" == "0" ]]; then
+    termin_label="Einfuhrung"
+  else
+    termin_label="Termin $termin_num"
+  fi
+
+  cat >> "$BUILD_DIR/index.html" << LINK
+  <a href="$filename" class="termin">
+    <h2>$termin_label</h2>
+    <span class="date">$formatted_date</span>
+    <span class="topic">$topic</span>
+  </a>
+LINK
+done
+
+cat >> "$BUILD_DIR/index.html" << 'FOOTER'
+  <footer>
+    <a href="https://git.librete.ch/hdm/223015b">Git Repository</a> -
+    <a href="mailto:mail@librete.ch">Kontakt</a>
+  </footer>
+</body>
+</html>
+FOOTER
+
+echo "Generated $BUILD_DIR/index.html"
@@ -9,11 +9,38 @@ title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---

 <style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #5da9e9;
+  --color-dimmed: #4a4a6a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
 section {
  font-size: 1.7rem;
 }
 h2 {
-  color: var(--color-dimmed);
+  color: var(--color-highlight);
+}
+pre {
+  background: #0f0f23;
+  color: #5da9e9;
+  border-radius: 8px;
+  border-left: 3px solid #5da9e9;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a1a2e;
+  color: #5da9e9;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
 }
 </style>

@@ -9,11 +9,38 @@ title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---

 <style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #5da9e9;
+  --color-dimmed: #4a4a6a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
 section {
  font-size: 1.7rem;
 }
 h2 {
-  color: var(--color-dimmed);
+  color: var(--color-highlight);
+}
+pre {
+  background: #0f0f23;
+  color: #5da9e9;
+  border-radius: 8px;
+  border-left: 3px solid #5da9e9;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a1a2e;
+  color: #5da9e9;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
 }
 </style>

@@ -180,6 +207,113 @@ Eselsbrücke: 1 Byte = 1 Buchstabe/Symbol (in ASCII/UTF-8 für einfache Zeichen)

 ---

+# Dateneinheiten
+
+| Einheit | Bytes | Bits | Potenz |
+|---------|-------|------|--------|
+| **1 Byte** | 1 | 8 | 10⁰ |
+| **1 Kilobyte (KB)** | 1.000 | 8.000 | 10³ |
+| **1 Megabyte (MB)** | 1.000.000 | 8 Mio. | 10⁶ |
+| **1 Gigabyte (GB)** | 1 Mrd. | 8 Mrd. | 10⁹ |
+| **1 Terabyte (TB)** | 1 Bio. | 8 Bio. | 10¹² |
+
+<!--
+SI-Präfixe (Dezimal): 1 KB = 1.000 Bytes
+Binär (IEC): 1 KiB = 1.024 Bytes (Kibibyte)
+Windows zeigt oft binär, sagt aber "KB" → Verwirrung!
+1 TB Festplatte = ~931 GiB nutzbar
+-->
+
+---
+
+# Dateneinheiten (Fortsetzung)
+
+| Einheit | Bytes | Potenz | Beispiel |
+|---------|-------|--------|----------|
+| **1 Petabyte (PB)** | 10¹⁵ | 1.000 TB | Netflix-Gesamtarchiv |
+| **1 Exabyte (EB)** | 10¹⁸ | 1.000 PB | Alle E-Mails weltweit/Tag |
+| **1 Zettabyte (ZB)** | 10²¹ | 1.000 EB | Internet-Traffic 2016 |
+| **1 Yottabyte (YB)** | 10²⁴ | 1.000 ZB | *Noch nie erreicht* |
+
+<!--
+Peta = 10^15 (Billiarde)
+Exa = 10^18 (Trillion)
+Zetta = 10^21 (Trilliarde)
+Yotta = 10^24 (Quadrillion)
+
+Eselsbrücke: "Kilo Mega Giga Tera Peta Exa Zetta Yotta"
+→ "Komm Mit Großem Tee, Peter Exte Zettelt Yachten"
+-->
+
+---
+
+# Datenwachstum der Menschheit
+
+| Jahr | Datenmenge | Kontext |
+|------|------------|---------|
+| **100.000 v. Chr.** | 0 | Erste Menschen, nur Sprache |
+| **3.000 v. Chr.** | ~wenige KB | Keilschrift, Hieroglyphen |
+| **1450** | ~wenige GB | Gutenberg, Buchdruck |
+| **1986** | **2,6 EB** | Analog (Bücher, Vinyl, Film) |
+| **2007** | **295 EB** | Beginn digitale Dominanz |
+| **2017** | **19 ZB** | Analog kaum gewachsen |
+| **2025** | **181 ZB** | 90% unstrukturiert |
+
+<!--
+Exponentielles Wachstum: Verdopplung alle 2 Jahre
+1986: Letzte Ära mit analoger Dominanz
+2007: Erste Jahr, in dem digital > analog
+2025: 181 ZB = 181.000.000.000.000.000.000.000 Bytes
+Analog blieb bei ~2,6 EB stehen (Bücher, Vinyl, Film)
+Digital explodierte: IoT, Social Media, Cloud, Video
+-->
+
+---
+
+# 181 Zettabyte – Was bedeutet das?
+
+**2025:** Welt erzeugt **181 ZB** pro Jahr
+
+- **2,5 Quintillionen Bytes** täglich
+- **29 Terabyte** pro Sekunde
+- **90%** davon: unstrukturiert (Videos, Bilder, Audio)
+- **70%** davon: von Nutzern generiert
+
+**Zum Vergleich:**
+- 1 ZB = 250 Milliarden DVDs
+- 181 ZB = Jeder Mensch erzeugt ~23 TB/Jahr
+
+<!--
+Quellen: IDC Global DataSphere Forecast, Statista 2025
+IoT-Geräte allein: 73 ZB in 2025
+Cloud-Speicher: 100 ZB (50% der Weltdaten)
+Prognose 2028: 394 ZB
+-->
+
+---
+
+# AI-generierte Inhalte 2025
+
+**Wie viel Content ist heute synthetisch?**
+
+| Bereich | AI-Anteil |
+|---------|-----------|
+| **Neue Webseiten** | ~74% enthalten AI-Content |
+| **Web-Text gesamt** | ~30-40% AI-generiert |
+| **Neue Artikel** | ~52% von AI geschrieben |
+| **Social-Media-Bilder** | ~71% AI-generiert |
+
+**Prognose 2026:** 90% des Online-Contents synthetisch
+
+<!--
+Quellen: Ahrefs 2025, arXiv, Europol-Report
+"Synthetic Media" = AI-generiert oder -manipuliert
+Problem: Schwer zu messen, da Menschen + AI zusammenarbeiten
+Model Collapse: AI trainiert auf AI-Output → Qualitätsverlust
+-->
+
+---
+
 <!-- _header: '' -->
 <!-- _footer: '' -->

@@ -472,8 +606,7 @@ Tool: HxD (Windows), Hex Fiend (Mac), xxd (Linux)
 | PDF | `25 50 44 46` | % P D F ✓ |
 | ZIP | `50 4B 03 04` | P K ✗ ✗ |

-**Wichtig:** ASCII = nur 0-127! Werte darüber (z.B. `89` = 137) sind **nicht druckbar** (non-printable).
-Hex-Editoren zeigen dafür `.` oder `ÿ` als Platzhalter.
+**Wichtig:** ASCII = nur 0-127! Werte darüber (z.B. `89` = 137) sind **nicht druckbar** (non-printable). *Hex-Editoren zeigen dafür `.` oder `ÿ` als Platzhalter.*

 <!--
 "Warum findet ihr 89 nicht in der ASCII-Tabelle?"
@@ -1076,7 +1209,7 @@ Goldenes Ohr: Manche hören Unterschied, manche nicht
 # Fragen & Diskussion

 **Kontakt:** mail@librete.ch
-**Folien:** Online verfügbar unter https://hdm.librete.ch
+**Folien:** Online verfügbar unter https://librete.ch/hdm/223015b

 ---

@@ -9,11 +9,38 @@ title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---

 <style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #5da9e9;
+  --color-dimmed: #4a4a6a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
 section {
  font-size: 1.7rem;
 }
 h2 {
-  color: var(--color-dimmed);
+  color: var(--color-highlight);
+}
+pre {
+  background: #0f0f23;
+  color: #5da9e9;
+  border-radius: 8px;
+  border-left: 3px solid #5da9e9;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a1a2e;
+  color: #5da9e9;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
 }
 </style>

@@ -818,7 +845,7 @@ Keine Abgabe, nur zum Ausprobieren
 # Fragen & Diskussion

 **Kontakt:** mail@librete.ch
-**Folien:** Online verfügbar unter https://hdm.librete.ch
+**Folien:** Online verfügbar unter https://librete.ch/hdm/223015b

 ---

@@ -9,11 +9,38 @@ title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---

 <style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #5da9e9;
+  --color-dimmed: #4a4a6a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
 section {
  font-size: 1.7rem;
 }
 h2 {
-  color: var(--color-dimmed);
+  color: var(--color-highlight);
+}
+pre {
+  background: #0f0f23;
+  color: #5da9e9;
+  border-radius: 8px;
+  border-left: 3px solid #5da9e9;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a1a2e;
+  color: #5da9e9;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
 }
 </style>

@@ -1417,7 +1444,7 @@ Keine Abgabe, nur zum Ausprobieren
 # Fragen & Diskussion

 **Kontakt:** mail@librete.ch
-**Folien:** Online verfügbar unter https://hdm.librete.ch
+**Folien:** Online verfügbar unter https://librete.ch/hdm/223015b

 ---

@@ -9,11 +9,38 @@ title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---

 <style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #5da9e9;
+  --color-dimmed: #4a4a6a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
 section {
  font-size: 1.7rem;
 }
 h2 {
-  color: var(--color-dimmed);
+  color: var(--color-highlight);
+}
+pre {
+  background: #0f0f23;
+  color: #5da9e9;
+  border-radius: 8px;
+  border-left: 3px solid #5da9e9;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a1a2e;
+  color: #5da9e9;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
 }
 </style>

@@ -1877,7 +1904,7 @@ Evaluation: Feedback ernst nehmen, Kurs verbessern
 # Fragen & Diskussion

 **Kontakt:** mail@librete.ch
-**Folien:** Online verfügbar unter https://hdm.librete.ch
+**Folien:** Online verfügbar unter https://librete.ch/hdm/223015b

 ---

@@ -9,11 +9,38 @@ title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---

 <style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #5da9e9;
+  --color-dimmed: #4a4a6a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
 section {
  font-size: 1.7rem;
 }
 h2 {
-  color: var(--color-dimmed);
+  color: var(--color-highlight);
+}
+pre {
+  background: #0f0f23;
+  color: #5da9e9;
+  border-radius: 8px;
+  border-left: 3px solid #5da9e9;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a1a2e;
+  color: #5da9e9;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
 }
 </style>

@@ -65,7 +92,7 @@ Themen nach Interesse der Studierenden
 # Fragen & Diskussion

 **Kontakt:** mail@librete.ch
-**Folien:** Online verfügbar unter https://hdm.librete.ch
+**Folien:** Online verfügbar unter https://librete.ch/hdm/223015b

 ---
Author	SHA1	Message	Date
libretech	6222174921	add data units, global data growth and AI content statistics slides to termin 1	2025-12-25 14:08:00 +01:00
libretech	32cf27d87c	add consistent dark theme styling across all slides - add CSS variables for colors (foreground, highlight, dimmed) - style code blocks with dark background and blue accent - improve inline code appearance - update link colors - add deploy restriction to CLAUDE.md	2025-12-19 21:31:43 +01:00
libretech	cae460dfc9	add index.html generator for slide overview	2025-12-19 16:45:59 +01:00
libretech	fac7683e92	fix slides url: hdm.librete.ch → librete.ch/hdm/223015b	2025-12-19 15:20:16 +01:00