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 · 2025-12-19 15:16:24 +01:00 · 2025-12-19 15:03:55 +01:00
56 changed files with 2232 additions and 696 deletions
@@ -0,0 +1,75 @@
+# Humanify Slide Command
+
+Transformiere die angegebene Slide(s) in meinen persönlichen Lehr- und Erzählstil.
+
+**Argument:** $ARGUMENTS (Slide-Nummer, Titel, oder Range wie "15-20")
+
+---
+
+## Mein pädagogischer Stil (extrahiert aus Termin 1)
+
+### 1. Konversationelle Speaker Notes auf Deutsch
+- Direkte Zitate in Anführungszeichen: `"Ich schaue in viele fragende Gesichte..."`
+- Natürliche, gesprochene Sprache - kein Vorlesungsdeutsch
+- Persönliche Ansprache: "ihr", "euch", "wir"
+
+### 2. Storytelling & Spannungsbogen
+- Cliffhanger: `"am Ende der heutigen Veranstaltung werdet ihr mir genau sagen können..."`
+- Übergänge zwischen Konzepten als Geschichte erzählen
+- Neugier wecken bevor die Antwort kommt
+
+### 3. Rhetorische Fragen & Interaktion
+- `Frage: "Weiß jemand wieviele Zustände wir mit 8 Bit beschreiben können?"`
+- `Fangfrage: "Wie hoch ist die Sample Rate von Vinyls?"` → Überraschende Antwort
+- Einladungen: `"Wie würdet ihr vorgehen?"`
+
+### 4. Literarische & kulturelle Referenzen
+- `»256 Shades of Gray«` (mit deutschen Guillemets »...«)
+- Metaphern: `"ganz literarisch"`, `"stellt euch vor ihr seid ArchäologInnen"`
+- Popkulturelle Anknüpfungspunkte
+
+### 5. Rätsel & Denkaufgaben
+- Seerose-Rätsel für exponentielles Wachstum
+- Aktivierung statt passives Zuhören
+
+### 6. Etymologie & Historie
+- Wortherkunft: `"von griech. hexa „sechs" und lat. decem „zehn""`
+- Historische Anekdoten: `"Es gab durchaus einen »Machtkampf«..."`
+- Personen hinter den Konzepten
+
+### 7. Progressive Enthüllung
+- Konzepte über mehrere Slides aufbauen (Das Byte: 3 Slides)
+- Erst Frage, dann Antwort auf nächster Slide
+- Spannung halten
+
+### 8. Struktur der Speaker Notes
+```markdown
+<!--
+"Gesprochener Text in Anführungszeichen"
+
+Fakten und Hintergrundinfos als Stichpunkte:
+- Punkt 1
+- Punkt 2
+
+Frage: "Interaktive Frage an Studierende?"
+
+Überleitung: "Und damit kommen wir zu..."
+-->
+```
+
+---
+
+## Aufgabe
+
+1. Lies die angegebene(n) Slide(s) aus den Dateien in `slides/`
+2. Analysiere den aktuellen Inhalt und die Speaker Notes
+3. Transformiere die Speaker Notes in meinen Stil:
+   - Füge gesprochene Zitate hinzu
+   - Baue rhetorische Fragen ein
+   - Ergänze Übergänge und Storytelling-Elemente
+   - Füge Etymologie oder historischen Kontext hinzu wo passend
+   - Nutze deutsche Guillemets »...« für Titel/Zitate
+4. Behalte die Slide-Inhalte (Bullet Points, Code, Tabellen) weitgehend bei
+5. Zeige mir die vorgeschlagenen Änderungen bevor du sie anwendest
+
+**WICHTIG:** Nicht übertreiben! Authentisch bleiben, nicht jede Slide braucht alles.
@@ -62,3 +62,5 @@ Desktop.ini
 !build/*.html
 *.pdf
 index.md.bak
+hdm-lehrauftrag-uebersicht.md
+slides/assets-original/
@@ -1,172 +0,0 @@
-# Asset-Liste: Bildbeschreibungen & Kontext
-
-## **Allgemein / Titel**
-
-| Dateiname | Kontext | Beschreibung für Suche/Generierung |
-|-----------|---------|-----------------------------------|
-| `digital-landscape.jpg` | Titelfolie, Einstieg | Futuristische digitale Landschaft mit Netzwerk-Verbindungen, leuchtende Datenpunkte, abstrakte binäre Muster, Glasfaser-Optik, cyber-ästhetisch, blau-violette Farbpalette |
-
---
-
-## **Woche 1: Bits, Bytes & Encoding**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `matrix-code.jpg` | Hex-Dump Mystery-Folie | Matrix-Style fallender grüner Code, binäre Zahlen, Hex-Zahlen (0-9, A-F), schwarzer Hintergrund, mysteriös, "digital rain" |
-| `lightbulb-onoff.jpg` | Bit-Demonstration (AN/AUS) | Zwei Glühbirnen nebeneinander: eine leuchtend (AN/gelb), eine dunkel (AUS/grau), minimalistisch, einfache Illustration, technisch-didaktisch |
-| `grayscale-gradient.jpg` | 256 Graustufen-Beispiel | Sanfter Verlauf von reinem Schwarz (#000000) zu reinem Weiß (#FFFFFF), horizontal oder vertikal, 256 diskrete Stufen sichtbar, technische Visualisierung |
-| `rgb-color-model.jpg` | RGB-Farben erklären | RGB-Farbmodell-Diagramm mit drei überlappenden Kreisen (Rot, Grün, Blau), Venn-Diagramm-Stil, zeigt additive Farbmischung (Rot+Grün=Gelb, etc.), sauber, lehrreich |
-| `ascii-table.png` | ASCII-Tabelle (1963) | Vollständige ASCII-Tabelle, 128 Zeichen (0-127), tabellarische Darstellung mit Dezimal-, Hex- und Zeichen-Spalten, retro/technisch, schwarz-weiß oder grün-schwarz (Terminal-Stil) |
-| `hex-binary-table.jpg` | Hexadezimal-Erklärung | Konversionstabelle: Dezimal (0-15), Binär (0000-1111), Hexadezimal (0-F), drei Spalten, übersichtlich, didaktische Grafik |
-| `hexeditor-screenshot.png` | Hex-Editor mit PNG-Datei | Screenshot eines Hex-Editors (z.B. HxD, Hex Fiend), zeigt PNG-Datei-Header mit Magic Number `89 50 4E 47`, linke Spalte Adressen, Mitte Hex-Werte, rechts ASCII-Darstellung |
-
---
-
-## **Woche 2: MP3 & Audio-Kompression**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `cassette-ipod.jpg` | Analog vs. Digital Kontrast | Kassette (1980er, retro) neben iPod Classic (2000er, weiß), Side-by-Side-Vergleich, nostalgisch vs. modern, auf neutralem Hintergrund |
-| `compression-types.jpg` | Lossless vs. Lossy Visualisierung | Diagramm mit zwei Pfeilen: "Lossless" (Original → Komprimiert → Original exakt rekonstruiert), "Lossy" (Original → Komprimiert → Ähnlich, aber nicht identisch), Wasserglas-Metapher möglich |
-| `karlheinz-brandenburg.jpg` | Fraunhofer IIS, MP3-Erfinder | Porträtfoto von Karlheinz Brandenburg (Entwickler, ~60 Jahre, graues Haar, Brille), professionell, Konferenz- oder Labor-Setting, alternativ: Fraunhofer IIS-Gebäude Erlangen |
-| `suzanne-vega.jpg` | "Tom's Diner" – erster MP3-Song | Suzanne Vega (Sängerin, 1980er-90er Ästhetik), Album-Cover "Solitude Standing" (1987) oder Konzertfoto, warm, akustisch, ikonisch |
-| `audio-spectrogram.jpg` | Frequenz-Vergleich (Bitrate) | Spektrogramm-Vergleich: drei Panels (Original, 320 kbps, 128 kbps), Y-Achse = Frequenz (Hz), X-Achse = Zeit, Farbe = Intensität, hohe Frequenzen verschwinden bei niedriger Bitrate (dunkle Bereiche oben) |
-| `napster-interface.jpg` | Napster-Screenshot (1999) | Screenshot Napster-Software (Windows 98/2000-Stil), Suchleiste, Liste von MP3-Dateien, Peer-Verbindungen, retro-UI, grün-graue Interface, historisch |
-
---
-
-## **Woche 3: Bilder & JPEG-Kompression**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `photo-comparison.jpg` | Hochauflösend vs. komprimiert | Side-by-Side: Linkes Bild scharf und detailliert, rechts stark JPEG-komprimiert mit sichtbaren Artefakten (Blocking, Ringing), gleiches Motiv (z.B. Landschaft oder Porträt) |
-| `jpeg-artifacts.jpg` | JPEG-Artefakte Zoom | Stark vergrößerter Ausschnitt eines JPEG-Bildes: 8×8-Blöcke sichtbar (Blocking), "Geister" um Text/Kanten (Ringing), Farb-Banding in Himmel/Verläufen |
-| `gif-animation.gif` | GIF-Animation (Meme) | Klassisches animiertes GIF (z.B. "Dancing Baby" 90er-Stil oder modernes Meme), 256 Farben, loop, pixelig-charmant, Internet-Kultur |
-| `instagram-quality-loss.jpg` | Vorher/Nachher Instagram-Upload | Zwei Versionen eines Fotos: Oben "Original" (scharf, hochauflösend), unten "Nach Instagram-Upload" (sichtbar schlechter, matschig, Kompressionsartefakte), Pfeile zeigen Unterschiede |
-
---
-
-## **Woche 4: Video-Kompression & Codecs**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `netflix-4k.jpg` | Netflix 4K-Streaming | Netflix-Interface auf 4K-TV, zeigt Filmauswahl mit "4K Ultra HD"-Badge, scharfes Bild, moderne Wohnzimmer-Setting, oder: Netflix-Logo mit "4K" |
-| `container-codec-diagram.jpg` | Container vs. Codec Visualisierung | Diagramm: Schachtel (MP4-Container) enthält mehrere Streams – Video-Track (H.264), Audio-Track (AAC), Untertitel (SRT), Metadaten, farbcodiert, technisch-didaktisch |
-| `iframe-pframe-diagram.jpg` | I/P/B-Frame-Abhängigkeiten | Diagramm: Sequenz von Frames (I-B-B-P-B-B-I), Pfeile zeigen Abhängigkeiten (P zeigt auf I, B zeigt auf I und P), farbcodiert (I=rot, P=blau, B=grün), technisch |
-| `youtube-vp9.jpg` | YouTube VP9-Logo | YouTube-Logo mit "VP9"-Badge oder Text, alternativ: YouTube-Player mit VP9-Codec-Info (Stats for Nerds), modern, Google-Branding |
-| `av1-logo.jpg` | AV1-Logo (Alliance for Open Media) | AV1-Logo (stilisiertes "AV1" mit dreieckigem Design), schwarz oder weiß auf transparentem Hintergrund, modern, clean |
-| `streaming-quality-switch.jpg` | Adaptive Bitrate Streaming | Visualisierung: Videoplayer mit Qualitätsoptionen (240p, 480p, 720p, 1080p, 4K), Balkendiagramm zeigt Bandbreite über Zeit, Qualität wechselt dynamisch, Netzwerk-Symbol |
-
---
-
-## **Woche 5: Speichermedien, Dateisysteme, Backup**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `hdd-ssd-comparison.jpg` | HDD vs. SSD Technologie | Aufgeschraubte HDD (Platter, Lesekopf sichtbar) neben SSD-Platine (Chips, keine beweglichen Teile), Side-by-Side, technisch-präzise, neutraler Hintergrund |
-| `directory-tree.jpg` | Verzeichnisbaum-Struktur | Baumdiagramm: Root (/) an der Spitze, Zweige zu Ordnern (home, usr, etc.), Unterordner, Dateien als Blätter, hierarchisch, clean, schwarz-weiß oder minimalistisch |
-| `backup-disaster.jpg` | Festplatten-Crash / Ransomware | Kaputte Festplatte (physisch beschädigt, Kratzer auf Platter) ODER Bildschirm mit Ransomware-Warnung ("Your files are encrypted"), dramatisch, Warnsignal |
-| `bit-rot.jpg` | Daten-Degradation über Zeit | Abstraktes Bild: Binärcode oder Pixel, die sich auflösen/verfallen, visuelle Metapher für Datenverlust, glitch-artig, beunruhigend |
-| `lto-tape.jpg` | LTO-Kassette + Laufwerk | LTO-Ultrium-Kassette (schwarz, kompakt, Label sichtbar) neben oder in LTO-Bandlaufwerk (Rack-Mount), professionelle Rechenzentrum-Ästhetik |
-| `m-disc.jpg` | M-DISC Blu-ray | M-DISC Blu-ray-Disc (mit "M-DISC"-Logo auf Disc oder Verpackung), Nahaufnahme, metallisch glänzend, hochwertig |
-| `dna-helix.jpg` | DNA-Storage Konzept | DNA-Doppelhelix mit überlagerten Binärcode (0 und 1) oder Daten-Symbolen, futuristisch, wissenschaftlich, blau-grüne Farbpalette, Sci-Fi-ästhetisch |
-
---
-
-## **Woche 6: Schnittstellen (Hardware)**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `cable-mess.jpg` | Kabelsalat / Anschluss-Chaos | Haufen verschiedener Kabel (USB-A, USB-C, HDMI, DisplayPort, Lightning, Ethernet), durcheinander, chaotisch, auf Schreibtisch oder weiß, frustrierend |
-| `pc-back-1990s.jpg` | PC-Rückseite 1990er | Rückseite eines PCs aus den 90ern: VGA, PS/2 (lila/grün), Seriell (COM), Parallel (LPT), SCSI, viele verschiedene Ports, retro, nostalgisch, beige Gehäuse |
-| `usb-c-cables.jpg` | Identische USB-C-Kabel | Mehrere USB-C-Kabel (3-5), die identisch aussehen, aber mit Fragezeichen oder Labels ("USB 2.0?", "USB 4?", "Thunderbolt?"), Verwirrung symbolisierend |
-| `thunderbolt-logo.jpg` | Thunderbolt-Logo | Thunderbolt-Logo (Blitz-Symbol, schwarz oder weiß), offizielles Intel-Branding, clean, auf transparentem Hintergrund |
-| `hdmi-cable.jpg` | HDMI-Kabel + Stecker | HDMI-Kabel mit Stecker (Typ A, Standard), Nahaufnahme des Pin-Layouts, schwarz, auf weißem Hintergrund, technisch-präzise |
-| `displayport-cable.jpg` | DisplayPort-Kabel + Stecker | DisplayPort-Kabel mit Stecker (charakteristische asymmetrische Form, Verriegelung sichtbar), schwarz, technisch |
-| `hdcp-warning.jpg` | HDCP-Fehler Bildschirm | Schwarzer Bildschirm oder blauer Error-Screen mit Text "HDCP Error" oder "HDCP-Handshake fehlgeschlagen", frustrierend, technischer Fehler |
-| `ethernet-cable.jpg` | Ethernet-Kabel (RJ45) | Cat6 Ethernet-Kabel mit RJ45-Stecker, Nahaufnahme der 8 Pins (farbcodiert), blau oder grau, technisch |
-| `vintage-ports.jpg` | Alte Anschlüsse (Nostalgie) | Collage: VGA-Port (blau, 15-Pin), PS/2 (lila/grün, rund), Seriell (DB9), Parallel (DB25), retro, beige/grau, Museums-Qualität |
-
---
-
-## **Woche 7: Distribution (CDN, P2P, Streaming)**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `sneakernet-truck.jpg` | LKW voller Festplatten | LKW geladen mit Servern oder Festplatten-Paletten, "Sneakernet"-Konzept, humorvoll-dokumentarisch, logistisch, Lagerhalle oder Straße |
-| `aws-snowmobile.jpg` | AWS Snowmobile | AWS Snowmobile (45-Fuß-Container auf LKW), weiß mit AWS-Logo, dramatisch, Rechenzentrum im Hintergrund, offizielles AWS-Pressefoto-Stil |
-| `cd-dvd-bluray.jpg` | Optische Medien Evolution | Drei Discs nebeneinander: CD (compact, silber), DVD (ähnlich, aber Label), Blu-ray (blau-schimmernd), Evolution, zeitlich geordnet |
-| `server-overload.jpg` | Server unter Last (Hug of Death) | Server-Racks mit roten Warnlichtern oder Error-Screens, Rauch/Hitze-Effekt (metaphorisch), Überlastung, dramatisch-technisch |
-| `cdn-map.jpg` | CDN-Knoten Weltkarte | Weltkarte mit leuchtenden Punkten (Points of Presence), Linien verbinden Punkte (Netzwerk), blau-violett, futuristisch, globale Infrastruktur |
-| `netflix-openconnect.jpg` | Netflix Open Connect Appliance | Netflix Open Connect Server-Appliance (schwarzes Rack-Mount-Gerät, Netflix-Logo), professionell, Rechenzentrum-Setting |
-| `p2p-network.jpg` | P2P-Netzwerk Diagramm | Netzwerk-Diagramm: Viele Knoten (Peers) verbunden, keine zentrale Hierarchie, dezentral, organisch, Linien zwischen Knoten, technisch-didaktisch |
-| `bittorrent-swarm.jpg` | BitTorrent-Swarm Visualisierung | Visualisierung: Zentrale Datei (Torrent), umgeben von vielen Peers (kleine Kreise), Pfeile zeigen Datenfluss (Chunks), dynamisch, farbcodiert |
-| `pirate-bay-logo.jpg` | The Pirate Bay Logo | The Pirate Bay Schiffs-Logo (Piratenschiff, schwarz-weiß oder farbig), ikonisch, kontroverser historischer Kontext |
-| `ipfs-logo.jpg` | IPFS Logo | IPFS-Logo (Würfel-Design mit Verbindungen), blau-weiß, geometrisch, modern, offizielles Protocol Labs-Branding |
-| `streaming-hls.jpg` | Streaming-Pipeline (HLS/DASH) | Diagramm: Encoder → Segmente (2-10s) → CDN → Player, verschiedene Qualitäten parallel (240p-4K), technisch, Flowchart-Stil |
-
---
-
-## **Woche 8: APIs & Software-Schnittstellen**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `api-diagram.jpg` | API-Kommunikation | Diagramm: Zwei Boxen (App A, App B) verbunden durch "API" (Pfeile bidirektional), zeigt Request/Response, clean, technisch-minimalistisch |
-| `http-request-response.jpg` | HTTP Request/Response-Zyklus | Diagramm: Client (Browser-Symbol) → Request (Pfeil mit "GET /page") → Server (Server-Symbol) → Response (Pfeil mit "200 OK + HTML") → Client, Zyklus, didaktisch |
-| `rest-api.jpg` | REST-API Struktur | Diagramm: URLs als Ressourcen (`/users`, `/posts`), HTTP-Methods (GET, POST, PUT, DELETE) daneben, tabellarisch oder Baum-Struktur, technisch |
-| `graphql-logo.jpg` | GraphQL Logo | GraphQL-Logo (rosa/magenta Raute mit "GraphQL"-Text), offizielles Branding, clean, auf transparentem Hintergrund |
-| `websocket-diagram.jpg` | WebSocket bidirektionale Verbindung | Diagramm: Client ↔ Server (bidirektionale Pfeile), "Persistent Connection", im Gegensatz zu HTTP (unidirektionale Pfeile), technisch-vergleichend |
-| `grpc-logo.jpg` | gRPC Logo | gRPC-Logo (blau-grünes "gRPC"-Design), offizielles Google/CNCF-Branding, modern |
-
---
-
-## **Woche 9: Metadaten & Interoperabilität**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `exif-gps.jpg` | EXIF-Daten mit GPS | Foto mit eingeblendeten EXIF-Daten als Overlay: GPS-Koordinaten, Kamera-Modell, Datum, Kartenpunkt zeigt Standort, Privacy-Warnung, technisch-dokumentarisch |
-| `mcafee-exif-fail.jpg` | John McAfee Guatemala-Story | Foto von John McAfee (2012, Guatemala, mit Hund) ODER Screenshot des Vice-Artikels mit Foto + GPS-Koordinaten eingeblendet, historisch-dokumentarisch |
-| `id3-tag-editor.jpg` | ID3-Tag-Editor Screenshot | Screenshot eines ID3-Editors (z.B. Kid3, mp3tag), zeigt MP3-Datei mit Feldern (Artist, Album, Year, Genre, Cover-Art), übersichtlich |
-| `musicbrainz-logo.jpg` | MusicBrainz Logo | MusicBrainz-Logo (stilisierte Note oder "MB"-Buchstaben), offizielles Branding, open-source-freundlich |
-| `pdf-metadata-leak.jpg` | PDF-Metadaten Analyse | Screenshot: PDF-Metadaten-Fenster zeigt versteckte Infos (Autor, Firma, Software, Änderungsdatum), Warnung, forensisch |
-| `binary.png` | Binäre Limitationen | Binärcode (0 und 1) als Hintergrund, eventuell mit Warnung oder Fragezeichen, technisch-abstrakt, schwarz-weiß oder grün-schwarz (Matrix-Stil) |
-
---
-
-## **Woche 10: Zukunft & Synthese**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `futuristic-datacenter.jpg` | Futuristisches Rechenzentrum | Modernes Rechenzentrum mit Server-Racks, blaue LED-Beleuchtung, alternativ: DNA-Helix überlagert auf Servern, Sci-Fi-ästhetisch, sauber, high-tech |
-| `jpeg-xl-logo.jpg` | JPEG XL Logo | JPEG XL Logo (stilisiertes "JXL" oder "JPEG XL"), modern, clean, offizielles Branding |
-| `dna-storage-concept.jpg` | DNA-Storage Visualisierung | DNA-Doppelhelix mit Daten-Symbolen, Petrischale mit DNA-Proben, Laborumgebung, futuristisch-wissenschaftlich, blau-grün |
-| `science.jpg` | Wissenschaft/Forschung (Allgemein) | Wissenschaftliche Visualisierung: Labor, Mikroskop, DNA-Sequenzierung, oder abstrakte Wissenschafts-Grafik, professionell, blau-weiß |
-
---
-
-## **Zusammenfassung: Asset-Kategorien**
-
-| Kategorie | Anzahl | Notizen |
-|-----------|--------|---------|
-| **Technische Diagramme** | 15+ | Flow-Charts, Netzwerk-Topologien, Container/Codec-Visualisierungen |
-| **Screenshots/UIs** | 10+ | Hex-Editor, Napster, ID3-Editor, Netflix, Browser DevTools |
-| **Logos** | 8+ | Thunderbolt, HDMI, GraphQL, gRPC, IPFS, AV1, MusicBrainz, JPEG XL |
-| **Hardware-Fotos** | 12+ | HDDs, SSDs, Kabel, Ports, LTO-Tapes, M-DISC |
-| **Vergleiche (Vorher/Nachher)** | 5+ | JPEG-Artefakte, Instagram-Quality, HDD vs. SSD, Kassette vs. iPod |
-| **Historische/Nostalgie** | 6+ | 90er-PC, ASCII-Tabelle, Napster, WordPerfect, John McAfee |
-| **Futuristisch/Konzeptuell** | 5+ | DNA-Storage, Quantum, Futuristic Datacenter, AI-Compression |
-
---
-
-## **Generierungs-Tipps für AI-Tools (Midjourney, DALL-E, Stable Diffusion)**
-
-**Allgemeine Prompts-Zusätze:**
- Für **technische Diagramme**: `"technical diagram, clean lines, minimal colors, educational, isometric view, white background"`
- Für **Screenshots**: `"UI screenshot, realistic software interface, high resolution, modern design"`
- Für **Fotos/Realismus**: `"product photography, studio lighting, white background, high detail, professional"`
- Für **Futuristisch**: `"futuristic, sci-fi, blue-violet color palette, glowing, high-tech, cinematic lighting"`
- Für **Retro/Nostalgie**: `"1990s aesthetic, beige computer, CRT monitor, retro technology, nostalgic"`
-
-**Negative Prompts (was vermeiden):**
- `"blurry, text artifacts, watermark, low quality, distorted, unrealistic proportions"`
-
@@ -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
@@ -26,56 +26,57 @@ This document lists all images needed for the lecture slides. Each image include

 ## Termin 1: Grundlagen, Text & Audio

-### ⬚ matrix-code.png
- **Context**: Opening visual for "Mysterium" hex dump slide
+### ✅ matrix-code.png
+- **Context**: Opening visual for "WTF!?" hex dump slide
 - **AI Prompt**: Matrix-style green digital rain code falling on black background, glowing green characters, cyberpunk hacker aesthetic, mysterious data visualization

-### ⬚ lightbulb-onoff.png
+### ✅ lightbulb-onoff.png
 - **Context**: Explaining the bit concept (0 or 1, on or off)
 - **AI Prompt**: Simple lightbulb comparison: one lit bright yellow, one dark/off, side by side, clean minimal style, binary concept visualization, white background

-### ⬚ grayscale-gradient.png
+### ✅ grayscale-gradient.png ⚠️ NEEDS REGENERATION
 - **Context**: Explaining 256 grayscale values (0=black to 255=white)
- **AI Prompt**: Smooth horizontal grayscale gradient from pure black on left to pure white on right, demonstrating 256 shades, clean minimal style, technical demonstration
+- **AI Prompt**: Horizontal grayscale gradient bar on a neutral gray background (#808080), gradient goes from pure black (left) to pure white (right), add visible value labels "0" on left and "255" on right, ensure edges are clearly visible against background, clean educational diagram style, 16:9 aspect ratio
+- **Issue**: Current image has barely visible edges on left (black) and right (white) sides

-### ⬚ rgb-color-model.png
+### ✅ rgb-color-model.png
 - **Context**: Explaining RGB color model (3 bytes per pixel)
 - **AI Prompt**: RGB color model visualization showing three overlapping circles (red, green, blue) creating cyan, magenta, yellow, and white in overlaps, clean educational diagram style

-### ⬚ ascii-table.png
- **Context**: Showing ASCII character encoding
- **AI Prompt**: Clean ASCII table showing characters 0-127 with their decimal and hex values, vintage computer terminal aesthetic, green on black or clean white background, educational reference chart
+### ✅ ascii-table.png
+- **Context**: Showing ASCII character encoding (7-bit, 128 characters total)
+- **AI Prompt**: Clean ASCII table showing printable characters 32-126 with their decimal and hex values, vintage computer terminal aesthetic, green on black or clean white background, educational reference chart. Note: ASCII is 7-bit encoding with 128 total characters (0-127), not 256. First 32 (0-31) are control characters, 127 is DEL.

-### ⬚ hex-binary-table.png
+### ✅ hex-binary-table.png
 - **Context**: Hex to binary conversion reference
 - **AI Prompt**: Clean conversion table showing hexadecimal digits 0-F with their 4-bit binary equivalents, educational reference style, programmer cheat sheet aesthetic

-### ⬚ hexeditor-screenshot.png
+### ✅ hexeditor-screenshot.png
 - **Context**: Showing what a hex editor looks like
 - **AI Prompt**: Screenshot of hex editor software showing file bytes in hexadecimal with ASCII representation on the right side, typical hex editor layout, technical software interface

-### ⬚ cassette-ipod.png
+### ✅ cassette-ipod.png
 - **Context**: Audio format evolution intro
 - **AI Prompt**: Vintage audio cassette tape next to modern iPod or MP3 player, technology evolution comparison, nostalgic meets modern, clean product photography style

-### ⬚ compression-types.png
+### ✅ compression-types.png
 - **Context**: Lossless vs lossy compression comparison
 - **AI Prompt**: Split diagram comparing lossless (ZIP icon, identical files) vs lossy (JPEG/MP3 icon, smaller but different), educational infographic style, clear visual distinction

-### ⬚ karlheinz-brandenburg.jpg
- **Context**: MP3 inventor portrait/reference
+### ✅ karlheinz-brandenburg.jpg
+- **Context**: MP3 inventor portrait/reference (Fraunhofer IIS)
 - **AI Prompt**: Professional portrait style of a German scientist/engineer in academic setting, Fraunhofer institute aesthetic, 1990s technology pioneer look (or use real photo)

-### ⬚ suzanne-vega.jpg
- **Context**: "Tom's Diner" - the song used to test MP3
+### ✅ suzanne-vega.jpg
+- **Context**: "Tom's Diner" - the song used to test MP3 compression
 - **AI Prompt**: Female singer-songwriter aesthetic, acoustic guitar, 1980s folk music style, intimate cafe performance setting (or use real photo)

-### ⬚ audio-spectrogram.png
- **Context**: Visualizing audio frequencies
+### ✅ audio-spectrogram.png
+- **Context**: Visualizing audio frequencies and MP3 compression effects
 - **AI Prompt**: Colorful audio spectrogram visualization showing frequency spectrum over time, rainbow gradient from low (red) to high (blue) frequencies, scientific audio analysis display

-### ⬚ napster-interface.png
- **Context**: MP3 piracy era / file sharing history
+### ✅ napster-interface.png
+- **Context**: MP3 piracy era / file sharing history (1999-2001)
 - **AI Prompt**: Late 1990s peer-to-peer file sharing interface aesthetic, Windows 98/2000 style dialog boxes, music file listings, nostalgic internet era, retro software UI

 ---
@@ -86,6 +87,14 @@ This document lists all images needed for the lecture slides. Each image include
 - **Context**: Demonstrating compression quality loss
 - **AI Prompt**: Side-by-side comparison of same landscape photo: left side crystal clear high resolution, right side heavily compressed with visible JPEG artifacts, blocky pixels and color banding, split down the middle, educational comparison style

+### ⬚ raster-vs-vector.png
+- **Context**: Comparison of raster and vector graphics scaling
+- **AI Prompt**: Split image showing scaling comparison: left side shows raster/bitmap image (photo of flower) that becomes pixelated when zoomed in, right side shows vector graphic (simple logo/icon) that stays crisp at any zoom level, magnifying glass effect on both sides, educational diagram style, clean white background
+
+### ⬚ vector-circle-example.png
+- **Context**: Explaining how vector graphics store shapes mathematically
+- **AI Prompt**: Educational diagram showing a circle with labeled parameters: center point (x,y coordinates), radius line, color fill indicator, stroke width indicator, mathematical notation style, clean technical illustration, blueprint aesthetic
+
 ### ✅ jpeg-artifacts.png
 - **Context**: Close-up example of JPEG compression artifacts
 - **AI Prompt**: Close-up macro shot of heavily compressed JPEG image showing visible compression artifacts, blocky 8x8 pixel blocks, mosquito noise around edges, color banding in gradients, technical demonstration image
@@ -126,6 +135,10 @@ This document lists all images needed for the lecture slides. Each image include

 ## Termin 3: Speichermedien & Schnittstellen

+### ⬚ rosetta-disk.png
+- **Context**: Long-term archival - Rosetta Project by Long Now Foundation
+- **AI Prompt**: Rosetta Disk by Long Now Foundation, small nickel disk with micro-etched text visible under magnification, archival preservation technology, scientific artifact photography, emphasis on the intricate etched patterns containing thousands of languages
+
 ### ⬚ hdd-ssd-comparison.png
 - **Context**: Storage technology comparison
 - **AI Prompt**: Side-by-side comparison: opened hard disk drive showing silver platters and read/write head on left, modern NVMe SSD circuit board with flash chips on right, technical product photography, white background, educational comparison
@@ -186,6 +199,14 @@ This document lists all images needed for the lecture slides. Each image include
 - **Context**: Network connectivity
 - **AI Prompt**: Blue Ethernet cable with clear RJ45 connector showing gold pins, Cat6 or Cat7 network cable, technical product shot, networking infrastructure aesthetic

+### ⬚ wifi-bluetooth.png
+- **Context**: Wireless connectivity introduction (WLAN & Bluetooth slides)
+- **AI Prompt**: Modern Wi-Fi router with antenna and Bluetooth symbol overlay, wireless technology concept, clean product photography showing both standards, blue LED lights, home networking aesthetic
+
+### ⬚ nas-server.png
+- **Context**: Network Attached Storage introduction
+- **AI Prompt**: Synology or QNAP NAS device with multiple hard drive bays, blue LED status lights, home server setup in modern office environment, network storage infrastructure, clean product photography
+
 ### ⬚ vintage-ports.png
 - **Context**: Legacy connector nostalgia/history
 - **AI Prompt**: Collection of vintage computer ports and connectors: VGA blue, PS/2 keyboard and mouse, serial DB9, parallel DB25, arranged like museum display, retro computing history, nostalgic tech photography
@@ -301,11 +322,13 @@ This document lists all images needed for the lecture slides. Each image include
 | Lecture | Total | ✅ Done | ⬚ Todo |
 |---------|-------|--------|--------|
 | Intro | 1 | 1 | 0 |
-| Termin 1 (Grundlagen/Text/Audio) | 13 | 0 | 13 |
+| Termin 1 (Grundlagen/Text/Audio) | 13 | 13 | 0 |
 | Termin 2 (Bild/Audio/Video) | 10 | 10 | 0 |
-| Termin 3 (Speichermedien) | 16 | 0 | 16 |
+| Termin 3 (Speichermedien) | 19 | 0 | 19 |
 | Termin 4 (Distribution/APIs) | 25 | 0 | 25 |
-| **Total** | **65** | **11** | **54** |
+| **Total** | **68** | **24** | **44** |
+
+**Note:** grayscale-gradient.png is marked ⚠️ NEEDS REGENERATION due to visibility issues at edges.

 ## Generation Tips

@@ -1,21 +1,19 @@
 # Makefile for Marp Slides Project

-.PHONY: help build dev watch pdf html clean install deploy assemble
+.PHONY: help build dev watch pdf html clean install deploy deploy-html copy-assets optimize-images

-# Slide components
+# Directories
 SLIDES_DIR = slides
 BUILD_DIR = build
-HEADER = $(SLIDES_DIR)/_frontmatter.md
-INTRO = $(SLIDES_DIR)/_intro.md
-OUTRO = $(SLIDES_DIR)/_outro.md

-# Termin files (date-topic naming convention)
+# Termin files (date-topic naming convention) - each is self-contained
+TERMIN_0 = 2025-12-19-termin-0-intro
 TERMIN_1 = 2025-12-19-termin-1-grundlagen-text-audio
 TERMIN_2 = 2026-01-09-termin-2-bild-audio-video
 TERMIN_3 = 2026-01-23-termin-3-speichermedien-schnittstellen
 TERMIN_4 = 2026-01-30-termin-4-distribution-apis-zukunft
 TERMIN_5 = 2026-xx-xx-termin-5-vertiefung-offene-fragen
-TERMINS = $(TERMIN_1) $(TERMIN_2) $(TERMIN_3) $(TERMIN_4) $(TERMIN_5)
+TERMINS = $(TERMIN_0) $(TERMIN_1) $(TERMIN_2) $(TERMIN_3) $(TERMIN_4) $(TERMIN_5)

 # Default target
 help:
@@ -29,28 +27,20 @@ help:
 	@echo "    make pdf        - Export all slides to PDF"
 	@echo "    make html       - Export all slides to HTML"
 	@echo ""
+	@echo "  Deploy:"
+	@echo "    make deploy     - Full build + deploy (HTML, PDF, assets)"
+	@echo "    make deploy-html - HTML only deploy (faster)"
+	@echo ""
 	@echo "  Other:"
-	@echo "    make assemble   - Assemble all termin files in build/"
+	@echo "    make optimize-images - Resize images to max 1920px"
 	@echo "    make clean      - Remove generated files"
 	@echo "    make install    - Install dependencies"
-	@echo "    make deploy     - Deploy slides to server"

 # Ensure build directory exists
 $(BUILD_DIR)/.exists:
 	@mkdir -p $(BUILD_DIR)
 	@touch $@

-# Assemble all termin files
-assemble: $(BUILD_DIR)/.exists
-	@echo "Assembling slides..."
-	@for f in $(TERMINS); do \
-		echo "  $$f.md"; \
-		cat $(HEADER) $(INTRO) $(SLIDES_DIR)/$$f.md $(OUTRO) > $(BUILD_DIR)/$$f.md; \
-	done
-	@echo "  all.md"
-	@cat $(HEADER) $(INTRO) $(foreach t,$(TERMINS),$(SLIDES_DIR)/$(t).md) $(OUTRO) > $(BUILD_DIR)/all.md
-	@cp -r $(SLIDES_DIR)/assets $(BUILD_DIR)/ 2>/dev/null || true
-
 # Development server - serves slides/ directly with HMR
 dev:
 	@echo "Starting dev server with HMR..."
@@ -58,30 +48,43 @@ dev:
 	PORT=1312 npx @marp-team/marp-cli --server $(SLIDES_DIR)/

 # Watch for changes
-watch: assemble
-	npx @marp-team/marp-cli --watch $(BUILD_DIR)/all.md
+watch:
+	npx @marp-team/marp-cli --watch $(SLIDES_DIR)/
+
+# Copy assets and materials to build directory
+copy-assets: $(BUILD_DIR)/.exists
+	@echo "Copying assets..."
+	@cp -r $(SLIDES_DIR)/assets $(BUILD_DIR)/
+	@cp -r $(SLIDES_DIR)/materials $(BUILD_DIR)/ 2>/dev/null || true

 # Build all slides (HTML + PDF)
-build: assemble
+build: copy-assets
 	@echo "Building all slides..."
 	@for f in $(TERMINS); do \
 		echo "Building $$f..."; \
-		npx @marp-team/marp-cli $(BUILD_DIR)/$$f.md -o $(BUILD_DIR)/$$f.html; \
-		npx @marp-team/marp-cli $(BUILD_DIR)/$$f.md --pdf --allow-local-files -o $(BUILD_DIR)/$$f.pdf; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md -o $(BUILD_DIR)/$$f.html; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md --pdf --allow-local-files -o $(BUILD_DIR)/$$f.pdf; \
 	done
-	@echo "Building all.md..."
-	npx @marp-team/marp-cli $(BUILD_DIR)/all.md -o $(BUILD_DIR)/all.html
-	npx @marp-team/marp-cli $(BUILD_DIR)/all.md --pdf --allow-local-files -o $(BUILD_DIR)/all.pdf
+	@echo "Done! Output in $(BUILD_DIR)/"

-# Export to PDF (all slides combined)
-pdf: assemble
+# Export all slides to PDF
+pdf: $(BUILD_DIR)/.exists
 	@echo "Exporting to PDF..."
-	npx @marp-team/marp-cli $(BUILD_DIR)/all.md --pdf --allow-local-files -o $(BUILD_DIR)/all.pdf
+	@for f in $(TERMINS); do \
+		echo "  $$f.pdf"; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md --pdf --allow-local-files -o $(BUILD_DIR)/$$f.pdf; \
+	done
+	@echo "Done! PDFs in $(BUILD_DIR)/"

-# Export to HTML (all slides combined)
-html: assemble
+# Export all slides to HTML
+html: copy-assets
 	@echo "Exporting to HTML..."
-	npx @marp-team/marp-cli $(BUILD_DIR)/all.md -o $(BUILD_DIR)/all.html
+	@for f in $(TERMINS); do \
+		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
 clean:
@@ -93,8 +96,30 @@ install:
 	@echo "Installing dependencies..."
 	npm install

-# Deploy slides
+# Optimize images (resize to max 1920px, requires nix-shell -p imagemagick)
+optimize-images:
+	@echo "Backing up originals to assets-original/..."
+	@mkdir -p $(SLIDES_DIR)/assets-original
+	@cp $(SLIDES_DIR)/assets/*.png $(SLIDES_DIR)/assets-original/ 2>/dev/null || true
+	@cp $(SLIDES_DIR)/assets/*.jpg $(SLIDES_DIR)/assets-original/ 2>/dev/null || true
+	@echo "Resizing images to max 1920px..."
+	@nix-shell -p imagemagick --run 'for img in $(SLIDES_DIR)/assets/*.png; do magick "$$img" -resize "1920x>" -quality 85 "$$img"; done'
+	@nix-shell -p imagemagick --run 'for img in $(SLIDES_DIR)/assets/*.jpg; do magick "$$img" -resize "1920x>" -quality 85 "$$img"; done'
+	@echo "Done! Originals backed up in assets-original/"
+
+# Deploy slides (full build)
 deploy: build
 	@echo "Deploying slides..."
-	scp $(BUILD_DIR)/all.html tengo@tuttle.uberspace.de:/home/tengo/html/malta/index.html
-	scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/malta/
+	@echo "Copying HTML files..."
+	scp $(BUILD_DIR)/*.html tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015b/
+	@echo "Copying assets..."
+	scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015b/
+	@echo "Copying materials..."
+	scp -r $(BUILD_DIR)/materials/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015b/ 2>/dev/null || true
+
+# Deploy HTML only (faster, no PDF rebuild)
+deploy-html: html
+	@echo "Deploying HTML only..."
+	scp $(BUILD_DIR)/*.html tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015b/
+	scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015b/
+	scp -r $(BUILD_DIR)/materials/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015b/ 2>/dev/null || true
@@ -1,6 +1,36 @@
-# HdM - Dateiformate, Speichermedien und Schnittstellen
+# 223015b – Dateiformate, Schnittstellen, Speichermedien & Distributionswege

-## Creating Slides
+**Modul "Technik 1"** · 1. Semester · Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart · Wintersemester 2025/26
+
+**Repository:** [git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+
+---
+
+## Termine
+
+| # | Datum | Thema |
+|---|-------|-------|
+| 1 | 19.12.2025 | Grundlagen, Text & Audio |
+| 2 | 09.01.2026 | Bild- & Videoformate |
+| 3 | 23.01.2026 | Speichermedien & Schnittstellen |
+| 4 | 30.01.2026 | Distribution, APIs & Zukunft |
+| 5 | TBA | Vertiefung & offene Fragen |
+
+### Kompetenzen
+
+In dieser Veranstaltung erwerben Sie folgende Kompetenzen:
+- Technische Konzepte des Internets verstehen (Netzwerke, Protokolle, Client/Server)
+- Dateiformate analysieren und verstehen
+- Grundlagen von Kompression (Audio, Bild, Video)
+- Speichermedien und Schnittstellen kennen
+- APIs und Distributionswege verstehen
+
+**Dozent:** Michael Czechowski · mail@librete.ch
+
+---
+
+## Slides erstellen

 ### Basic Slide Structure

@@ -1,132 +0,0 @@
-# Lehrauftrag HdM Stuttgart – WS 25/26
-
-**Studiengang:** Digital- und Medienwirtschaft / Media Entertainment  
-**Kontakt:** Tahira Siddiqui (Studiengangsmanagerin)  
-**Ort:** HdM Stuttgart, Nobelstraße 10, 70569 Stuttgart
-
---
-
-## Vorlesungen & Termine
-
-### 1. Dateiformate, Schnittstellen, Speichermedien und Distributionswege
-
-*Teil des Moduls "Technik 1", 1. Semester*
-
-| Termin | Tag | Zeit | Status |
-|--------|-----|------|--------|
-| ~~12.12.2025~~ | ~~Fr~~ | ~~14:15 – 17:30~~ | ❌ Auslandsreise |
-| 19.12.2025 | Fr | 14:15 – 17:30 | ✓ |
-| 09.01.2026 | Fr | 14:15 – 17:30 | ✓ |
-| 23.01.2026 | Fr | 14:15 – 17:30 | ✓ |
-| 30.01.2026 | Fr | 14:15 – 17:30 | ✓ |
-
-**⚠️ Offen:** Ersatztermin für 12.12. mit Tahira klären
-
-**Inhalte:**
- Dateiformate (Text, Bild, Audio, Video; Header, Metadaten, Kompression)
- Speichermedien (HDD, SSD, Cloud)
- Schnittstellen (USB, HDMI, APIs)
- Distributionswege (CDN, P2P, Plattformen)
- Werkzeuge & Praxisbezug
-
---
-
-### 2. Grundlagen IT (Internet 1)
-
-| Termin | Tag | Zeit |
-|--------|-----|------|
-| 20.12.2025 | Fr | 10:00 – 16:30 |
-| 10.01.2026 | Fr | 10:00 – 16:30 |
-| 24.01.2026 | Fr | 10:00 – 16:30 |
-
-**Unterlagen:** https://filestore.hdm-stuttgart.de/s/rW4zJUluFlh9ZWJ
-
---
-
-## Chronologie der Korrespondenz
-
-### Phase 1: Anfrage (14.–19.11.2025)
-
-**14.11. – Tahira → Michael:**  
-Anfrage für Lehrauftrag "Dateiformate, Schnittstellen, Speichermedien und Distributionswege". Kurzfristige Besetzung im laufenden Semester benötigt.
-
-**14.11. – Michael → Tahira:**  
-Grundsätzliches Interesse, ab Dezember verfügbar, nur Freitage möglich.
-
-**18.11. – Tahira → Michael:**  
-Bestätigung: Freitage sind kein Problem.
-
-**18.11. – Michael → Tahira:**  
-Zusage: "Solange es freitags stattfinden kann, bin ich ab Dezember einsatzbereit."
-
-**18.11. – Tahira → Michael:**  
-Fragt nach persönlichem Gespräch.
-
-**19.11. – Michael → Tahira:**  
-Gibt Telefonnummer für Rückruf.
-
---
-
-### Phase 2: Terminplanung (24.–27.11.2025)
-
-**24.11. – Tahira → Michael:**  
-Erste Terminvorschläge für "Technik 1": 12.12., 19.12., 09.01., 23.01., 30.01. (je 14:15–17:30).  
-Erwähnt zusätzlich möglichen Lehrauftrag "Grundlagen IT und Internettechnik" als Samstags-Blocktage.
-
-**26.11. – Tahira → Michael:**  
-Fragt nach Meeting morgen Vormittag. Sendet Link zu Unterlagen für Grundlagen IT.
-
-**26.11. – Michael → Tahira:**  
-Schlägt 10 Uhr vor (muss ab 11 Uhr im Zug sein).
-
-**26.11. – Tahira → Michael:**  
-Gegenvorschlag: 9:30 Uhr.
-
-**26.11. – Michael → Tahira:**  
-"Dann 9:30, bis morgen."
-
-**27.11. – Meeting um 9:30 Uhr (vermutlich telefonisch)**
-
---
-
-### Phase 3: Vertragsunterzeichnung (03.12.2025)
-
-**03.12. – Michael → Tahira:**  
-Hat Termin um 16 Uhr übersehen, fragt nach Alternativen.
-
-**03.12. – Tahira → Michael:**  
-Kann länger bleiben oder Freitag ab 12 Uhr.
-
-**03.12. – Michael → Tahira:**  
-Schlägt 14:30 Uhr vor. Gibt Anschrift für Vertrag:  
-Michael Werner Czechowski, Schnellweg 3, 70199 Stuttgart
-
-**03.12. – Tahira → Michael:**  
-"Ja, das passt!"
-
-**03.12. – Persönliches Treffen um 14:30 Uhr an der HdM**
-
---
-
-### Phase 4: Grundlagen IT Termine (05.–08.12.2025)
-
-**05.12. – Tahira → Michael:**  
-Terminvorschläge für Grundlagen IT: 13.12., 20.12., 10.01., 24.01. (je 10:00–17:00). Drei Termine genügen.
-
-**08.12. – Michael → Tahira:**  
-Zeiten passen allgemein, aber 13.12. nicht möglich (Auslandsreise). Bittet um Ausweichtermin.
-
-**08.12. – Tahira → Michael:**  
-Passt Termine an: 20.12., 10.01., 24.01. (je 10:00–16:30).
-
-**08.12. – Michael → Tahira:**  
-"Das passt für mich!"
-
---
-
-## Zusammenfassung
-
- **Zwei Lehraufträge** im WS 25/26
- **Alle Termine freitags** (wie gewünscht)
- **Semesterende:** 31.01.2026
- **Vertrag unterschrieben:** 03.12.2025 (persönlich an der HdM)
@@ -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"
@@ -0,0 +1,228 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
+footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+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-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>
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg fit opacity:0.4](./assets/digital-landscape.png)
+
+# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+
+**223015b** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+**Wintersemester 2025/26**
+
+[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+
+---
+
+![bg fit](./assets/qrcode-0.svg)
+
+---
+
+<!-- _class: lead -->
+
+# Willkommen!
+## Termin 1 – Einführung & Grundlagen
+
+---
+
+# Über mich
+
+**Michael Czechowski**
+
+- Irgendwas mit IT, Cloud und AI
+- Schwerpunkte:
+  - Web-Technologien, Barriere-Armut, Systemarchitektur, Open Source
+- Hintergrund:
+  - Philosophie (Uni Stuttgart) -> NO degree
+  - Wirtschafts-Informatik (Leibniz-FH) -> B.Sc.
+- Kontakt: mail@librete.ch
+
+<!--
+Kurze Vorstellung
+Praxisbezug betonen
+Fragen jederzeit willkommen
+-->
+
+---
+
+<!-- _footer: '' -->
+
+![bg fit](./assets/jung-naiv.png)
+
+---
+
+# AMA (Ask my anything)
+
+*Nur ein Vorschlag ...*
+
+* Hast du alle Bände von AoT daheim?
+* Hast du eine Studierenden-Kneipe mal geleitet?
+* Hast du wirklich 17 Semester Philosophie ohne Abschluss studiert?
+
+---
+
+# Kurze Umfrage
+
+**Bitte Hand heben:**
+
+1) Wer hat schon mal ein Video komprimiert/konvertiert?
+2) Wer kennte die 3-2-1 Regel?
+3) Wer weiß, was der Unterschied zwischen JPEG und PNG ist?
+4) Wer hat schon mal mit APIs gearbeitet?
+5) Wer weiß, was UTF-8 bedeutet?
+6) Wer hat schon mal mit einem CLI gearbeitet?
+6) **Wer hat schon mal etwas mit HTML oder CSS gemacht?** (Hex-Farben wie `#FF0000`?)
+
+<!--
+Niveau der Gruppe einschätzen
+Keine falschen Antworten
+Zeigt, wo wir starten
+HTML/CSS-Frage: Viele kennen Hex-Codes aus Webdesign
+API = Application Programming Interface
+-->
+
+---
+
+# Warum dieses Modul?
+
+**Digitale Medien sind überall** – aber was steckt dahinter?
+
+* Warum ist ein JPEG kleiner als ein PNG?
+* Warum klingt MP3 anders als FLAC?
+* Warum zeigt meine 1 TB Festplatte nur 931 GB?
+* Warum ist USB-C so verwirrend?
+* Wie funktioniert eigentlich Streaming?
+* **→ Die Technik dahinter verstehen!**
+
+<!--
+Praxisnahe Fragen aus dem Alltag
+Nicht nur "was", sondern "warum"
+Verständnis für technische Entscheidungen
+-->
+
+---
+
+# Das Ziel
+
+**Technische Grundlagen verstehen**, um fundierte Entscheidungen treffen zu können.
+
+Als Digital- und Medienwirtschaftler:innen werdet ihr täglich mit technischen Fragen konfrontiert:
+* Welches Format für welchen Zweck?
+* Welche Schnittstelle für welches Gerät?
+* Wie funktioniert die Distribution digitaler Inhalte?
+* **→ Mitreden können – nicht (zwingend) programmieren!**
+
+<!--
+Nicht: Ihr sollt Programmierer werden
+Sondern: Ihr sollt technische Entscheidungen verstehen
+Praxisbezug: Medienproduktion, Marketing, Projektmanagement
+-->
+
+---
+
+# Was ihr lernt
+
+**In dieser Veranstaltung erwerbt ihr folgende Kompetenzen:**
+
+* Fundiertes Grundwissen über Daten und Informationen
+* Dateiformate analysieren und verstehen
+* Grundlagen von Kompression (Audio, Bild, Video)
+* Speichermedien unterscheiden
+* Programmier-Schnittstellen kennenlernen
+* APIs und Distributionswege verstehen
+
+<!--
+Fokus auf Verständnis, nicht auf Programmierung
+Hands-On jede Woche: Selbst ausprobieren
+Ziel: Einblick in die Denkweise von Software-Entwicklern
+-->
+
+---
+
+# Kursübersicht
+
+**5 Termine:**
+
+| # | Datum | Thema |
+|---|-------|-------|
+| 1 | 19.12.2025 | Bits, Bytes, Zeichenkodierung & Audio |
+| 2 | 09.01.2026 | Bild- & Video-Kompression |
+| 3 | 23.01.2026 | Speichermedien & Schnittstellen |
+| 4 | 30.01.2026 | Distribution, APIs & Zukunft |
+| 5 | TBA | Vertiefung & offene Fragen |
+
+**Format:** Theorie + Hands-On (30-40 Min pro Termin)
+
+<!--
+Nicht nur theoretische Inhalte
+Praktische Übungen jede Woche
+Medienwissenschaftler:innen, nicht Informatiker:innen
+-->
+
+---
+
+# Prüfungsleistung 18.02.
+
+**Nach aktuellem Kenntnisstand:**
+
+* 90 min (40% Grundlagen, 40% Dateiformate, 20% AV)
+* Schriftliche Klausur
+* Teils offene Fragen
+* Vermutlich digital
+* Kein Coding!
+* **Prüfungsrelevant:** Alles in den Folien/im Skript
+
+<!--
+Details können sich noch ändern
+Keine Programmieraufgaben
+Verständnisfragen, keine Auswendiglernerei
+-->
+
@@ -1,3 +1,66 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
+footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+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-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>
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg fit opacity:0.4](./assets/digital-landscape.png)
+
+# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+
+**223015b** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+**Wintersemester 2025/26**
+
+[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+
 ---

 <!-- _class: lead -->
@@ -7,6 +70,9 @@

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/photo-comparison.png)

 <!--
@@ -38,6 +104,74 @@ Smartphone-Speicher wäre schnell voll ohne Kompression

 ---

+# Rastergrafiken (Bitmaps)
+
+**Pixelraster:** Jeder Bildpunkt hat Koordinate + Farbwert
+
+**Eigenschaften:**
+- Je größer das Bild → größere Datei
+- **Verkleinern:** Meist ohne Qualitätsverlust
+- **Vergrößern:** Wird unscharf/pixelig!
+
+**Formate:** JPEG, PNG, GIF, BMP, TIFF, WebP
+
+**Verwendung:** Fotos, Screenshots, komplexe Bilder
+
+<!--
+Bitmap = Bit-mapped graphics
+Digitalkameras erzeugen immer Rastergrafiken
+Kompression nötig wegen Dateigrößen (PNG, JPEG, GIF)
+Skalierungsproblem: Interpolation erzeugt Unschärfe
+-->
+
+---
+
+# Vektorgrafiken
+
+**Mathematische Beschreibung statt Pixel**
+
+**Kreis speichern:**
+- Rastergrafik: Tausende Pixel
+- Vektorgrafik: Mittelpunkt + Radius (2 Werte!)
+
+**Gespeichert werden:**
+- Form (Kreis, Linie, Pfad...)
+- Position, Farbe, Strichstärke, Füllung
+
+**Vorteil:** Beliebig skalierbar ohne Qualitätsverlust!
+
+**Formate:** SVG, PDF, AI, EPS
+
+<!--
+Vektorgrafik = geometrische Primitive + Attribute
+SVG = Scalable Vector Graphics (Web-Standard)
+AI = Adobe Illustrator
+Ideal für Logos, Icons, Infografiken
+-->
+
+---
+
+# Raster vs. Vektor
+
+| | Rastergrafik | Vektorgrafik |
+|---|---|---|
+| **Basis** | Pixelraster | Mathematische Objekte |
+| **Skalierung** | Qualitätsverlust | Verlustfrei |
+| **Dateigröße** | Abhängig von Auflösung | Abhängig von Komplexität |
+| **Gut für** | Fotos | Logos, Icons, Text |
+| **Formate** | JPEG, PNG, GIF | SVG, PDF, AI |
+
+**Rasterung:** Vektorgrafik → Rastergrafik (für Bildschirm/Druck)
+
+<!--
+Bildschirme sind Rastergeräte (Framebuffer)
+Jede Vektorgrafik muss gerastert werden zur Anzeige
+Browser rastert SVG in Echtzeit
+Firmenlogos: Immer als Vektor anlegen!
+-->
+
+---
+
 # Lossless: PNG

 **PNG = Portable Network Graphics (1996)**
@@ -80,6 +214,9 @@ Dateierweiterungen: .jpg, .jpeg, .jfif (alle gleich)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/jpeg-artifacts.png)

 <!--
@@ -153,6 +290,9 @@ Photoshop "Save for Web": Standard ist 60

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/gif-animation.png)

 <!--
@@ -236,6 +376,9 @@ JPEG bleibt dominant (Kompatibilität!)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/instagram-quality-loss.png)

 <!--
@@ -289,24 +432,21 @@ Studis sollen selbst "Sweet Spot" finden

 ---

-# Aufgabe bis nächste Woche
+# Fleißaufgabe bis nächste Woche

 **Nimm ein Foto (eigenes oder CC)**

 1. Exportiere: PNG, JPEG Q90, JPEG Q50
 2. Vergleiche Größen & Qualität
-3. Poste im Forum: Screenshot + Reflexion
-
-**Fragen:**
- Welche Quality ist für dich "akzeptabel"?
- Wo siehst du zuerst Artefakte?
+3. Welche Quality ist für dich "akzeptabel"?
+4. Wo siehst du zuerst Artefakte?

 **Bonus:** Teste WebP oder AVIF

 <!--
 Selbstständiges Experimentieren
+Keine Abgabe, nur zum Ausprobieren
 Subjektive Wahrnehmung (jeder anders)
-Forum: Austausch über Ergebnisse
 -->

 ---
@@ -318,6 +458,9 @@ Forum: Austausch über Ergebnisse

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/netflix-4k.png)

 <!-- 
@@ -370,6 +513,9 @@ Ein MP4 kann H.264, H.265 oder AV1 enthalten

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/container-codec-diagram.png)

 <!-- 
@@ -430,6 +576,9 @@ Wenn du vorspulst: Sucht nach nächstem I-Frame

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/iframe-pframe-diagram.png)

 <!-- 
@@ -512,6 +661,9 @@ Fragmentierung verzögert Adoption

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/youtube-vp9.png)

 <!-- 
@@ -545,6 +697,9 @@ Hardware-Decoder erst ab ~2016 (langsame Adoption)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/av1-logo.png)

 <!-- 
@@ -606,6 +761,9 @@ Player misst Bandbreite, wechselt live

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/streaming-quality-switch.png)

 <!-- 
@@ -664,23 +822,39 @@ Encoding-Zeit: H.265 deutlich langsamer als H.264

 ---

-# Aufgabe bis nächste Woche
+# Fleißaufgabe bis nächste Woche

 **Nimm kurzes Video (eigenes oder CC, max. 1 Min)**

 1. Analysiere: Container, Codecs, Bitrate
 2. Konvertiere: H.264 + H.265 (gleiche Qualität)
-3. Poste im Forum:
-   - Dateigrößen
-   - Encoding-Zeiten
-   - Visueller Unterschied?
+3. Vergleiche: Dateigrößen, Encoding-Zeiten, visueller Unterschied?

 **Bonus:** AV1-Encoding (Warnung: SEHR langsam!)

 <!--
 MediaInfo oder ffprobe für Analyse
-HandBrake für Konvertierung (einfacher als CLI)
-Encoding-Zeit: H.265 ~5x langsamer, AV1 ~50x langsamer
-Qualität: Bei gleicher Bitrate H.265 > H.264
+HandBrake für Konvertierung
+Keine Abgabe, nur zum Ausprobieren
 -->

+---
+
+<!-- _class: lead -->
+
+# Fragen & Diskussion
+
+**Kontakt:** mail@librete.ch
+**Folien:** Online verfügbar unter https://librete.ch/hdm/223015b
+
+---
+
+# Lizenz & Attribution
+
+Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
+
+- Erlaubt Teilen & Anpassen mit Namensnennung
+- Adaptionen müssen unter gleicher Lizenz geteilt werden
+
+Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
+
@@ -1,3 +1,65 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
+footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+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-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>
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg fit opacity:0.4](./assets/digital-landscape.png)
+
+# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+
+**223015b** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+**Wintersemester 2025/26**
+
+[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+
 ---

 <!-- _class: lead -->
@@ -7,6 +69,9 @@

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/hdd-ssd-comparison.png)

 <!--
@@ -31,10 +96,153 @@ Mechanisch vs. Elektronisch
 - Write-Zyklen begrenzt

 <!--
-Wiederholung aus vorheriger Iteration (falls schon behandelt)
-Oder erste Einführung, falls Woche 5 Startpunkt für Speicher
-HDD: Platter, Lesekopf, 5.400-15.000 RPM
-SSD: NAND-Flash (SLC/MLC/TLC/QLC)
+HDD: Magnetscheiben (Platter) rotieren mit 5.400-7.200 RPM
+Lesekopf schwebt nanometerdicht über Oberfläche
+"Head Crash": Berührung = Datenverlust (daher Stoßempfindlichkeit)
+Enterprise: 10.000-15.000 RPM (Server)
+
+SSD: NAND-Flash-Speicherzellen
+Typen: SLC (1 Bit), MLC (2 Bit), TLC (3 Bit), QLC (4 Bit)
+SLC = langlebig, teuer (Enterprise)
+QLC = günstig, weniger Schreibzyklen (Consumer)
+Write Amplification: Daten werden mehrfach intern geschrieben
+TRIM: Befehl, der SSD sagt, welche Blöcke frei sind
+-->
+
+---
+
+# Speicherkapazität: KB vs. KiB
+
+**Das Problem:** Hersteller vs. Betriebssysteme
+
+| Dezimal (SI) | Binär (IEC) |
+|--------------|-------------|
+| 1 KB = 1.000 Bytes | 1 KiB = 1.024 Bytes |
+| 1 MB = 1.000 KB | 1 MiB = 1.024 KiB |
+| 1 GB = 1.000 MB | 1 GiB = 1.024 MiB |
+| 1 TB = 1.000 GB | 1 TiB = 1.024 GiB |
+
+**1 TB Festplatte → Windows zeigt ~931 GB!**
+
+<!--
+Hersteller: Dezimal (SI-Präfix) - klingt mehr!
+Betriebssysteme: Binär - aber zeigen "GB" statt "GiB"
+Diskrepanz bei 1 TB: 1.000.000.000.000 vs. 1.099.511.627.776 Bytes
+→ 10% Unterschied bei TB-Größen
+Verwirrung für Konsumenten seit Jahrzehnten
+ISO/IEC 80000-13: Definiert KiB, MiB, GiB, TiB (2008)
+-->
+
+---
+
+# HDD: Aufbau & Struktur
+
+**Komponenten:**
+- **Platter:** Magnetisch beschichtete Scheiben
+- **Spindel:** Dreht mit 5.400-7.200 RPM
+- **Schreib-Lese-Kopf:** Schwebt nm-dünn über Platter
+- **Aktuator:** Bewegt Kopf zur richtigen Spur
+
+**Logische Struktur:**
+- **Spuren:** Konzentrische Kreise auf Platter
+- **Sektoren:** Unterteilung der Spuren (512 Bytes)
+- **Zylinder:** Gleiche Spuren aller Platter
+
+<!--
+Aufbau seit 1956 (IBM) grundsätzlich gleich
+Platter: Aluminium oder Glas mit Magnetschicht
+Spindelgeschwindigkeit: Desktop 7.200, Laptop 5.400, Server 15.000 RPM
+Head Crash: Schreib-Lese-Kopf berührt Platter → Kratzer → Datenverlust
+Sektor: Kleinste adressierbare Einheit
+LBA (Logical Block Addressing): Abstraktion der physischen Struktur
+-->
+
+---
+
+# NVMe: Die SSD-Revolution
+
+**NVMe = Non-Volatile Memory Express (2011)**
+
+**Unterschied zu SATA-SSD:**
+- SATA: Max. ~550 MB/s (AHCI-Protokoll)
+- NVMe: Bis zu 7.000+ MB/s (PCIe direkt)
+
+**Formfaktoren:**
+- M.2 (Steckplatz auf Mainboard)
+- U.2 (Serverbereich)
+- PCIe-Karte (ältere Systeme)
+
+<!--
+SATA = Serial ATA, Protokoll von 2003 (für HDDs optimiert)
+AHCI = Advanced Host Controller Interface
+NVMe nutzt PCIe-Lanes direkt → weniger Overhead
+M.2-Slot kann SATA oder NVMe sein! (B-Key, M-Key, B+M-Key)
+Praxistipp: Nicht jeder M.2-Slot unterstützt NVMe
+-->
+
+---
+
+# SD-Karten (Speicherkarten)
+
+**SD = Secure Digital (2001)**
+
+**Varianten:**
+- SD: bis 2 GB
+- SDHC: bis 32 GB
+- SDXC: bis 2 TB
+- microSD: Kleinere Bauform
+
+**Geschwindigkeitsklassen:**
+Class 10, UHS-I, UHS-II, V30, V90...
+
+**Einsatz:** Kameras, Smartphones, Raspberry Pi
+
+<!--
+Entwickelt von SanDisk, Toshiba, Panasonic
+Spezifikation proprietär (nicht ISO-genormt!)
+Fälschungen: Gefälschte Kapazität häufig → Markenware kaufen!
+Flash-Speicher: Gleiche Vor-/Nachteile wie SSD
+V90: 90 MB/s Mindest-Schreibrate (für 8K Video)
+microSD in Smartphones, Drohnen, Dashcams
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/rosetta-disk.png)
+
+<!--
+Rosetta Disk der Long Now Foundation
+Mikrogeätzte Nickelscheibe mit 1.500+ Sprachen
+-->
+
+---
+
+# Das Rosetta Project
+
+**Long Now Foundation (2002)**
+
+**Ziel:** Dokumentation aller menschlichen Sprachen für die Nachwelt
+
+**Die Rosetta Disk:**
+- 3 Zoll Nickelscheibe
+- 13.000 Seiten mikrogeätzt
+- 1.500+ Sprachen dokumentiert
+- Lesbar mit 1000× Mikroskop
+- Haltbarkeit: 2.000+ Jahre
+
+**Lektion für uns:**
+Digitale Formate veralten – physische Archivierung bleibt relevant
+
+<!--
+Long Now Foundation: Denken in 10.000-Jahres-Zeiträumen
+Benannt nach dem Stein von Rosette (Schlüssel zu Hieroglyphen)
+Problem: CD/DVD halten 10-25 Jahre, Festplatten 5-10 Jahre
+Rosetta Disk: Keine Stromversorgung, kein Decoder nötig
+Nur optische Vergrößerung – Technologie die es immer geben wird
+Parallel: M-DISC, LTO-Tapes für digitale Langzeitarchivierung
 -->

 ---
@@ -58,6 +266,9 @@ Windows: NTFS, macOS: APFS, Linux: ext4

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/directory-tree.png)

 <!-- 
@@ -124,10 +335,19 @@ Sicheres Löschen: DBAN, shred, eraser
 **Nachteil:** Keine Rechte, kein Journaling

 <!--
-FAT = Tabelle am Anfang der Partition
-Verkettete Liste von Clustern
-Fragmentierung: Cluster verstreut → langsam
-USB-Sticks heute meist FAT32 (Kompatibilität!)
+FAT = File Allocation Table (Tabelle am Partitionsanfang)
+Wie ein Inhaltsverzeichnis: "Datei X ist in Clustern 5, 8, 12"
+Fragmentierung: Cluster verstreut → langsamer Zugriff
+Defragmentierung: Cluster zusammenrücken (bei HDD sinnvoll, bei SSD nicht!)
+
+FAT32-Limit: 4 GB = 32-Bit-Zahl für Dateigröße
+2³² Bytes = 4.294.967.296 = 4 GB (daher die Grenze)
+exFAT: 64-Bit → 16 Exabyte theoretisch
+
+Warum FAT32 noch existiert:
+- Kameras, Dashcams, Game-Controller
+- BIOS/UEFI-Bootpartitionen
+- Maximale Kompatibilität (alle OS lesen es)
 exFAT: Microsoft-Patent, seit 2019 in Linux-Kernel
 -->

@@ -221,6 +441,9 @@ Sicherheit: APFS/NTFS für Verschlüsselung

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/backup-disaster.png)

 <!-- 
@@ -286,11 +509,27 @@ Wiederherstellung: Full = 1 Schritt, Inkr. = 7, Diff. = 2
 Laptop + externe Festplatte + Cloud

 <!--
-3-2-1 ist MINIMUM, nicht Maximum!
-Medientypen: SSD, HDD, Optical, Cloud, Tape
-Offsite: Schutz vor lokalem Desaster
-Versionierung: Auch alte Versionen aufbewahren
-Automatisierung: Sonst vergisst man's
+3-2-1-Regel Herkunft: US-Photograph Peter Krogh (2005)
+Buch "The DAM Book" (Digital Asset Management)
+
+Warum 3 Kopien?
+- Original kann kaputtgehen
+- Backup 1 kann auch kaputtgehen
+- Backup 2 = Sicherheitspuffer
+
+Warum 2 Medientypen?
+- Gleiche Medien haben gleiche Schwachstellen
+- SSD + HDD: Unterschiedliche Ausfallmuster
+- Cloud + Lokal: Unterschiedliche Risiken
+
+Warum 1 Offsite?
+- Brand/Wasserschaden zerstört alles vor Ort
+- Ransomware verschlüsselt angeschlossene Laufwerke
+- Offsite = geografisch getrennt (oder Cloud)
+
+Erweiterung: 3-2-1-1-0
+- +1 Offline/Air-Gapped (Ransomware-Schutz)
+- +0 Verified Backups (regelmäßig testen!)
 -->

 ---
@@ -313,6 +552,9 @@ Syncthing: P2P-Sync, kein zentraler Server

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/bit-rot.png)

 <!-- 
@@ -343,6 +585,9 @@ Offene Standards: PDF/A, TIFF, TXT überleben

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/lto-tape.png)

 <!-- 
@@ -374,6 +619,56 @@ Cold Storage: Daten, die selten gebraucht werden

 ---

+# Optische Medien: CD, DVD, Blu-ray
+
+**Laser liest/schreibt Daten:**
+
+| Medium | Jahr | Kapazität | Wellenlänge |
+|--------|------|-----------|-------------|
+| **CD** | 1982 | 700 MB | 780 nm (Infrarot) |
+| **DVD** | 1996 | 4,7–8,5 GB | 650 nm (Rot) |
+| **Blu-ray** | 2006 | 25–100 GB | 405 nm (Blau) |
+
+**Varianten:** ROM (nur lesen), R (einmal brennen), RW (wiederbeschreibbar)
+
+<!--
+CD = Compact Disc (ursprünglich für Audio)
+DVD = Digital Versatile Disc (Video, Daten)
+Blu-ray: Kürzere Wellenlänge → höhere Datendichte
+Pits & Lands: Vertiefungen in der Oberfläche kodieren Bits
+CD-ROM: ~150 KB/s (1×), DVD: ~1,35 MB/s (1×), BD: ~4,5 MB/s (1×)
+Problem: Kratzer, Lichtempfindlichkeit, Alterung der Farbstoffe
+-->
+
+---
+
+# Optische Medien: Heute noch relevant?
+
+**Vorteile:**
+- Günstig (Rohlinge ~0,20–2€)
+- Lange Haltbarkeit (bei richtiger Lagerung)
+- Nicht anfällig für Magnetfelder
+
+**Nachteile:**
+- Langsam im Vergleich zu SSD/HDD
+- Begrenzte Kapazität
+- Viele Laptops ohne Laufwerk
+
+**Einsatz heute:**
+Musik-CDs, Film-DVDs/Blu-rays, Software-Distribution, Archive
+
+<!--
+Streaming hat DVDs/Blu-rays verdrängt (aber nicht ersetzt)
+Filme: Blu-ray oft bessere Qualität als Streaming (Bitrate!)
+Spiele-Discs: Oft nur "Installer", Rest wird heruntergeladen
+Archive: M-DISC für Langzeitarchivierung (nächste Folie)
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/m-disc.png)

 <!-- 
@@ -401,6 +696,9 @@ Nachteil: Teurer (~5€ vs. 0,50€ normale Blu-ray)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/dna-helix.png)

 <!-- 
@@ -433,6 +731,67 @@ Anwendung: Langzeitarchivierung (nicht Live-Daten)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/nas-server.png)
+
+<!--
+NAS-Gerät (z.B. Synology)
+Heimserver-Setup
+-->
+
+---
+
+# Network Attached Storage (NAS)
+
+**NAS = Festplatten im Netzwerk**
+
+**Vorteile:**
+- Zentraler Speicher für alle Geräte
+- RAID-Optionen (Redundanz)
+- Remote-Zugriff möglich
+- Eigene Cloud
+
+**Anbieter:** Synology, QNAP, TrueNAS
+
+**Protokolle:** SMB/CIFS (Windows), NFS (Linux), AFP (Mac legacy)
+
+<!--
+RAID 1: Spiegelung (2 Platten = 1× Kapazität, aber sicher)
+RAID 5: Striping + Parity (3+ Platten, 1 kann ausfallen)
+Synology DSM: Einfache Web-Oberfläche
+NAS ≠ Backup! (Ransomware kann NAS verschlüsseln!)
+3-2-1-Regel: NAS + externe HDD + Cloud
+-->
+
+---
+
+# Cloud-Speicher: Pro & Contra
+
+**Vorteile:**
+✓ Überall verfügbar
+✓ Kein Hardware-Management
+✓ Automatische Backups
+✓ Skalierbar
+
+**Nachteile:**
+✗ Abhängigkeit vom Anbieter
+✗ Datenschutz-Bedenken (DSGVO!)
+✗ Laufende Kosten
+✗ Internet-Abhängigkeit
+
+**Anbieter:** iCloud, OneDrive, Google Drive, Dropbox, Nextcloud
+
+<!--
+Nextcloud: Self-Hosted (Datenschutz!)
+AWS S3 Glacier: Archivierung ~$1/TB/Monat
+DSGVO: US-Anbieter problematisch (Privacy Shield gekippt)
+Zero-Knowledge: Cryptomator, Boxcryptor (Client-Verschlüsselung)
+-->
+
+---
+
 # Hands-On: S.M.A.R.T. & Backup

 **Aufgabe 1 (20 Min):**
@@ -456,20 +815,20 @@ Backup-Test: Ungetestete Backups sind wertlos!

 ---

-# Aufgabe bis nächste Woche
+# Fleißaufgabe bis nächste Woche

 **Analysiere dein System:**

 1. Welches Dateisystem nutzt deine Hauptpartition?
 2. Hast du ein Backup? Welche Art? Wo?
-3. Poste im Forum: S.M.A.R.T.-Screenshot + Backup-Strategie
+3. Lies deine S.M.A.R.T.-Daten aus (CrystalDiskInfo / smartctl)

 **Bonus:** Richte automatisches Backup ein

 <!--
 Selbstreflexion: 60-70% haben KEIN Backup!
-Forum: Peer-Lernen, gegenseitige Motivation
-Bonus: Wer's macht, hat echten Nutzen
+Keine Abgabe, nur zum Ausprobieren
+Nächste Woche kurz besprechen
 -->

 ---
@@ -481,6 +840,9 @@ Bonus: Wer's macht, hat echten Nutzen

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/cable-mess.png)

 <!-- 
@@ -510,6 +872,71 @@ Ohne Standards: Jedes Gerät braucht eigenes Kabel

 ---

+<!-- _class: lead -->
+
+# Interne Schnittstellen
+## PCIe, SATA & M.2
+
+---
+
+# PCIe: Der Daten-Highway
+
+**PCI Express (2003):**
+
+- Lanes: x1, x4, x8, x16
+- Gen 3: 1 GB/s pro Lane
+- Gen 4: 2 GB/s pro Lane
+- Gen 5: 4 GB/s pro Lane
+
+**Nutzung:**
+- Grafikkarte (x16)
+- NVMe-SSD (x4)
+- Netzwerkkarte, Sound (x1)
+
+<!--
+PCIe = Point-to-Point (vs. PCI shared bus)
+Lane = bidirektionale Verbindung
+x16 Gen 4 = 32 GB/s (theoretisch)
+GPU nutzt fast immer x16 Slot
+NVMe nutzt 4 Lanes → daher ~7 GB/s max bei Gen 4
+-->
+
+---
+
+# SATA: Der Standard für Speicher
+
+**Serial ATA (2003):**
+
+- SATA I: 1,5 Gbps (~150 MB/s)
+- SATA II: 3 Gbps (~300 MB/s)
+- SATA III: 6 Gbps (~550 MB/s)
+
+**Vorteile:**
+- Günstig, bewährt
+- Hot-Swap möglich
+- Kabel bis 1m
+
+**Nachteil:** Bottleneck für moderne SSDs
+
+<!--
+SATA-Kabel: Dünn, 7-Pin Daten + 15-Pin Strom
+IDE/PATA: Breite Flachbandkabel (Vorgänger)
+SATA III = Maximum für HDD (100-200 MB/s)
+SSD erreicht SATA-Limit leicht → daher NVMe
+-->
+
+---
+
+<!-- _class: lead -->
+
+# Externe Schnittstellen
+## USB, HDMI, DisplayPort & Co.
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/pc-back-1990s.png)

 <!-- 
@@ -565,6 +992,9 @@ USB 4 basiert auf Thunderbolt 3 (Intel spendete Spec)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/usb-c-cables.png)

 <!-- 
@@ -593,11 +1023,24 @@ Ein USB-C-Kabel kann sein:
 - Oder nur Power Delivery (Laden, keine Daten!)

 <!--
-USB-C = "Auto" (sagt nichts über PS, Hubraum)
-Kleingedrucktes lesen!
-Billige Kabel oft nur USB 2.0 (Lade-Kabel)
-Teuer ≠ besser (aber oft ja)
-USB-IF Zertifizierung: Logo zeigt Spec an
+USB-C = nur der physische Stecker (24-Pin, reversibel)
+Wie "Steckdose" – sagt nichts über Spannung/Leistung
+
+Das Problem: Kabel sehen identisch aus, können aber:
+- Nur laden (kein Daten-Pin verdrahtet)
+- USB 2.0 (480 Mbps – wie vor 20 Jahren!)
+- USB 3.2 Gen 2 (10 Gbps)
+- USB 4 / Thunderbolt 4 (40 Gbps)
+
+Warum?
+- Billige Kabel sparen Drähte (weniger Kupfer = billiger)
+- USB-IF Zertifizierung = freiwillig
+- Händler beschriften falsch oder gar nicht
+
+Praxistipp:
+- Kabel vom Gerätehersteller nutzen
+- Thunderbolt-Logo = garantiert 40 Gbps
+- Im Zweifel: USB-IF zertifizierte Kabel kaufen
 -->

 ---
@@ -651,6 +1094,9 @@ EU-Regulierung: Beschriftung gefordert (aber nicht umgesetzt)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/thunderbolt-logo.png)

 <!-- 
@@ -684,6 +1130,9 @@ Zertifizierung: Blitz-Logo = echt Thunderbolt

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/hdmi-cable.png)

 <!-- 
@@ -722,6 +1171,9 @@ Lizenzgebühren: ~$10.000 Jahresgebühr + $0,15/Gerät

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/displayport-cable.png)

 <!-- 
@@ -778,6 +1230,9 @@ Politik & Marketing entscheiden

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/hdcp-warning.png)

 <!-- 
@@ -814,6 +1269,9 @@ Classic DRM-Problem: Nervt Zahlende, nicht Piraten

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/ethernet-cable.png)

 <!-- 
@@ -849,6 +1307,70 @@ PoE = Power over Ethernet (Strom + Daten)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/wifi-bluetooth.png)
+
+<!--
+WLAN-Router + Bluetooth-Symbol
+Drahtlose Verbindungen
+-->
+
+---
+
+# WLAN (Wi-Fi)
+
+**IEEE 802.11:**
+
+| Standard | Jahr | Max. Speed | Frequenz |
+|----------|------|-----------|----------|
+| 802.11n (Wi-Fi 4) | 2009 | 600 Mbps | 2,4/5 GHz |
+| 802.11ac (Wi-Fi 5) | 2013 | 3,5 Gbps | 5 GHz |
+| 802.11ax (Wi-Fi 6) | 2019 | 9,6 Gbps | 2,4/5/6 GHz |
+| 802.11be (Wi-Fi 7) | 2024 | 46 Gbps | 2,4/5/6 GHz |
+
+**Praxis:** Geteiltes Medium → Real-Speed oft 30-50%
+
+<!--
+Marketing-Namen: Wi-Fi 4, 5, 6, 6E, 7
+2,4 GHz: Bessere Reichweite, aber überlaufen (Mikrowelle!)
+5 GHz: Schneller, aber kürzere Reichweite
+Wi-Fi 6E: 6 GHz-Band (mehr Kanäle, weniger Störungen)
+Mesh-Systeme: Mehrere Access Points, nahtloses Roaming
+-->
+
+---
+
+# Bluetooth
+
+**Bluetooth (1999):**
+
+| Version | Jahr | Speed | Reichweite |
+|---------|------|-------|------------|
+| 4.0 (BLE) | 2010 | 1 Mbps | 100m |
+| 5.0 | 2016 | 2 Mbps | 400m |
+| 5.3 | 2021 | 2 Mbps | 400m |
+
+**Anwendungen:**
+- Audio (Kopfhörer, Lautsprecher)
+- Peripherie (Maus, Tastatur)
+- IoT (Sensoren, Smart Home)
+
+**Codecs:** SBC (Standard), AAC, aptX, LDAC
+
+<!--
+BLE = Bluetooth Low Energy (Fitness-Tracker, AirTags)
+Classic Bluetooth: Höherer Stromverbrauch, für Audio
+aptX/LDAC: Bessere Audioqualität als SBC
+Bluetooth-Interferenz: Auch 2,4 GHz (wie WLAN)
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg](./assets/vintage-ports.png)

 <!-- 
@@ -898,14 +1420,13 @@ Dokumentation: Verstehen, was man hat

 ---

-# Aufgabe bis nächste Woche
+# Fleißaufgabe bis nächste Woche

 **Analysiere deine Kabel:**

 1. Liste alle Kabel (USB, HDMI, etc.)
 2. Identifiziere: Standard, Geschwindigkeit, Features
-3. Ist es beschriftet? Verständlich?
-4. Poste im Forum: Foto + das verwirrendste Kabel
+3. Finde das verwirrendste Kabel

 **Bonus:** Finde USB-C-Kabel, das nur USB 2.0 kann

@@ -913,6 +1434,26 @@ Dokumentation: Verstehen, was man hat
 Kabel-Sammlung durchgehen
 Bewusstsein schaffen: Was habe ich eigentlich?
 Viele Lade-Kabel: USB-C, aber nur USB 2.0 (langsam!)
-Forum: Erfahrungsaustausch, lustige Fundstücke
+Keine Abgabe, nur zum Ausprobieren
 -->

+---
+
+<!-- _class: lead -->
+
+# Fragen & Diskussion
+
+**Kontakt:** mail@librete.ch
+**Folien:** Online verfügbar unter https://librete.ch/hdm/223015b
+
+---
+
+# Lizenz & Attribution
+
+Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
+
+- Erlaubt Teilen & Anpassen mit Namensnennung
+- Adaptionen müssen unter gleicher Lizenz geteilt werden
+
+Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
+
@@ -1,3 +1,66 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
+footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+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-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>
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg fit opacity:0.4](./assets/digital-landscape.png)
+
+# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+
+**223015b** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+**Wintersemester 2025/26**
+
+[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+
 ---

 <!-- _class: lead -->
@@ -441,7 +504,7 @@ Headers: Zeigen Cache-Status, CDN-Provider

 ---

-# Aufgabe bis nächste Woche
+# Fleißaufgabe bis nächste Woche

 **Analysiere Streaming-Dienst oder Website:**

@@ -450,12 +513,12 @@ Headers: Zeigen Cache-Status, CDN-Provider
   - Welcher CDN?
   - Wie viele Requests an CDN vs. Origin?
   - Cache-Headers?
-3. Poste im Forum: Screenshot + Erkenntnisse

-**Bonus:** Linux-ISO via Torrent, poste Peer-Stats
+**Bonus:** Linux-ISO via Torrent, beobachte Peer-Stats

 <!--
-Selbstständige Exploration
+Selbstständiges Experimentieren
+Keine Abgabe, nur zum Ausprobieren
 Netflix: Schwer zu analysieren (verschlüsselt), aber CDN sichtbar
 YouTube: Google CDN (googlevideo.com)
 Spotify: Akamai CDN
@@ -464,6 +527,31 @@ Cache-Control Header: max-age, s-maxage, public/private

 ---

+# Dateitransfer-Protokolle
+
+**FTP (File Transfer Protocol, 1971):**
+- Ältestes Internet-Protokoll für Dateitransfer
+- ⚠️ Unverschlüsselt! (Passwort im Klartext)
+- **SFTP/FTPS:** Sichere Varianten
+
+**WebDAV (Web-based Distributed Authoring):**
+- HTTP-basiert → Firewall-freundlich
+- Wird von vielen Cloud-Diensten genutzt
+- Mountbar als Netzlaufwerk
+
+**Moderne Alternativen:** rsync, rclone, Cloud-APIs
+
+<!--
+FTP: Port 21 (Steuerung), Port 20 (Daten)
+Noch verbreitet für: Webhosting, Legacy-Systeme
+FileZilla: Populärer FTP-Client
+WebDAV: Nextcloud, Box.com nutzen WebDAV
+SMB/NFS: Für lokale Netzwerke besser (schneller)
+rsync: Inkrementelle Übertragung (nur Änderungen)
+-->
+
+---
+
 <!-- _class: lead -->

 # Teil 2: APIs
@@ -893,7 +981,7 @@ WebSocket Echo: Server echot zurück (Test-Server)

 ---

-# Aufgabe bis nächste Woche
+# Fleißaufgabe bis nächste Woche

 **Experimentiere mit öffentlicher API:**

@@ -902,14 +990,13 @@ WebSocket Echo: Server echot zurück (Test-Server)
   - OpenWeather (`openweathermap.org/api`)
   - PokéAPI (`pokeapi.co`)
 2. Mache 3-5 Requests (curl, Postman, oder Code)
-3. Poste im Forum:
-   - Welche API?
-   - Interessante Daten?
-   - Rate-Limiting erlebt? (429 Too Many Requests)
+3. Notiere: Welche Daten? Rate-Limiting erlebt?

 **Bonus:** Baue kleinen Client (Python, JavaScript, etc.)

 <!--
+Selbstständiges Experimentieren
+Keine Abgabe, nur zum Ausprobieren
 GitHub API: Repositories, Users, Issues (kostenlos, aber Rate-Limit)
 OpenWeather: Wetterdaten (API-Key nötig, Free Tier)
 PokéAPI: Pokémon-Daten (keine Auth nötig)
@@ -1311,7 +1398,7 @@ MusicBrainz Picard: Audio-Fingerprinting in Aktion

 ---

-# Aufgabe bis nächste Woche
+# Fleißaufgabe bis nächste Woche

 **Metadaten-Audit:**

@@ -1320,15 +1407,13 @@ MusicBrainz Picard: Audio-Fingerprinting in Aktion
   - Eine MP3 (ID3)
   - Ein PDF (XMP)
 2. Analysiere: Welche Metadaten?
-3. Poste im Forum:
-   - Screenshots (OHNE sensible Infos!)
-   - Überraschungen?
-   - Wie viel KB gespart nach Entfernung?
+3. Notiere: Überraschungen? KB gespart nach Entfernung?

 **Bonus:** Finde alte Datei (>5 Jahre) – was verraten Metadaten über damaliges Setup?

 <!--
-Selbst-Exploration
+Selbstständiges Experimentieren
+Keine Abgabe, nur zum Ausprobieren
 Viele entdecken GPS zum ersten Mal
 Alte Dateien: Zeit-Kapsel (alte Software, Kamera-Modelle)
 KB-Ersparnis: Oft gering, aber Prinzip wichtig
@@ -1352,22 +1437,18 @@ DNA-Helix überlagert

 ---

-# Rückblick: 9 Wochen
+# Rückblick: 5 Termine

-**Woche 1:** Bits → Bytes → Bedeutung (Encoding)
-**Woche 2:** MP3 & Psychoakustik
-**Woche 3:** JPEG & GIF-Kriege
-**Woche 4:** H.264 vs. AV1
-**Woche 5:** HDD vs. SSD, Dateisysteme, Backup
-**Woche 6:** USB-C-Chaos, HDMI vs. DisplayPort
-**Woche 7:** CDN, P2P, Streaming
-**Woche 8:** REST, GraphQL, WebSockets
-**Woche 9:** EXIF, Vendor Lock-in
+**Termin 1:** Bits, Bytes, Zeichenkodierung & Audio (MP3)
+**Termin 2:** Bild- & Videoformate (JPEG, H.264, AV1)
+**Termin 3:** Speichermedien & Schnittstellen
+**Termin 4:** Distribution, APIs & Zukunft
+**Termin 5:** Vertiefung & offene Fragen

 **Heute:** Wohin geht die Reise?

 <!--
-10 Wochen = Journey durch digitale Medien
+5 Termine = Kompakte Journey durch digitale Medien
 Von Grundlagen (Bits) zu Infrastruktur (CDN)
 Technologie + Geschichte + Politik
 Heute: Zukunft + Abschluss-Projekt
@@ -1752,7 +1833,7 @@ Digitale Medien sind das Ergebnis von Standards, Politik, Kompromissen & Innovat
 Ihr habt jetzt die Werkzeuge, um die digitale Welt kritisch zu verstehen.

 <!--
-10 Wochen = Intensive Journey
+5 Termine = Intensive Journey
 Von Grundlagen zu Zukunft
 Technologie ist nicht neutral (Patent-Kriege, Vendor Lock-in)
 Kritisches Denken: Wer profitiert? Wer wird ausgeschlossen?
@@ -1802,17 +1883,37 @@ Command Line Heroes: Tech-Geschichte (Spotify, Apple Podcasts)

 **Nächste Schritte:**
 - Fallstudie (falls Prüfungsleistung)
- Feedback willkommen (Forum, E-Mail)
+- Feedback willkommen (E-Mail)
 - Weiterlernen mit Ressourcen

 **Vielen Dank für eure Aufmerksamkeit!**

 <!--
-10 Wochen gemeinsame Reise
+5 Termine gemeinsame Reise
 Von "Was sind Bits?" zu "DNA-Storage"
-Hands-On jede Woche (Hex-Editor, FFmpeg, exiftool, APIs)
+Hands-On jedes Mal (Hex-Editor, FFmpeg, exiftool, APIs)
 Narrative statt Faktenlisten (Suzanne Vega, John McAfee, Tony Blair)
 Kritische Perspektive (Patent-Kriege, Vendor Lock-in)
 Evaluation: Feedback ernst nehmen, Kurs verbessern
 -->

+---
+
+<!-- _class: lead -->
+
+# Fragen & Diskussion
+
+**Kontakt:** mail@librete.ch
+**Folien:** Online verfügbar unter https://librete.ch/hdm/223015b
+
+---
+
+# Lizenz & Attribution
+
+Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
+
+- Erlaubt Teilen & Anpassen mit Namensnennung
+- Adaptionen müssen unter gleicher Lizenz geteilt werden
+
+Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
+
@@ -1,3 +1,66 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
+footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+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-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>
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg fit opacity:0.4](./assets/digital-landscape.png)
+
+# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+
+**223015b** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+**Wintersemester 2025/26**
+
+[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+
 ---

 <!-- _class: lead -->
@@ -22,3 +85,23 @@ Flexibler Termin für Nachholbedarf
 Themen nach Interesse der Studierenden
 -->

+---
+
+<!-- _class: lead -->
+
+# Fragen & Diskussion
+
+**Kontakt:** mail@librete.ch
+**Folien:** Online verfügbar unter https://librete.ch/hdm/223015b
+
+---
+
+# Lizenz & Attribution
+
+Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
+
+- Erlaubt Teilen & Anpassen mit Namensnennung
+- Adaptionen müssen unter gleicher Lizenz geteilt werden
+
+Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
+
@@ -1,19 +0,0 @@
---
-marp: true
-theme: gaia
-paginate: true
-backgroundColor: #fff
-header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
-title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
---
-
-<style>
-section {
-  font-size: 1.7rem;
-}
-h2 {
-  color: var(--color-dimmed);
-}
-</style>
-
@@ -1,83 +0,0 @@
-![bg fit](./assets/digital-landscape.png)
-
-<!-- Startbild: Futuristisches Netzwerk, Datenströme, oder digitale Landschaft -->
-
---
-
-# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
-
-Modul "Technik 1" – 1. Semester
-Digital- und Medienwirtschaft
-Hochschule der Medien Stuttgart
-
-**Wintersemester 2025/26**
-
---
-
-# Über mich
-
-**Michael Czechowski**
-
- Softwareentwickler & IT-Berater
- Schwerpunkte: Cloud, AI, Web-Technologien, Systemarchitektur, Open Source
- Hintergrund: Philosophie & Informatik
- Kontakt: czechowski@hdm-stuttgart.de
-
-<!--
-Kurze Vorstellung
-Praxisbezug betonen
-Fragen jederzeit willkommen
-->
-
---
-
-# Termine
-
-| Datum | Zeit | Thema |
-|-------|------|-------|
-| 19.12.2025 | 14:15 – 17:30 | Grundlagen, Text & Audio |
-| 09.01.2026 | 14:15 – 17:30 | Bild- & Videoformate |
-| 23.01.2026 | 14:15 – 17:30 | Speichermedien & Schnittstellen |
-| 30.01.2026 | 14:15 – 17:30 | Distribution, APIs & Zukunft |
-| TBA | 14:15 – 17:30 | Vertiefung (wird bekannt gegeben) |
-
-**Ort:** HdM Stuttgart, Nobelstraße 10
-
---
-
-# Kurze Umfrage
-
-**Bitte Hand heben:**
-
-1. Wer hat schon mal ein Video komprimiert/konvertiert?
-2. Wer hat schon mal eine Datei mit einem Hex-Editor geöffnet?
-3. Wer weiß, was der Unterschied zwischen JPEG und PNG ist?
-4. Wer hat schon mal mit APIs gearbeitet?
-5. Wer weiß, was UTF-8 bedeutet? 
-
-<!--
-Niveau der Gruppe einschätzen
-Keine falschen Antworten
-Zeigt, wo wir starten
-->
-
---
-
-# Kursübersicht
-
-**Ziel:** Verstehen, wie digitale Medien technisch funktionieren – von Bits bis zu globalen Distributionsnetzwerken
-
-**5 Termine:**
- **19.12.** Bits, Bytes, Zeichenkodierung & Audio-Kompression
- **09.01.** Bild- & Video-Kompression
- **23.01.** Speichermedien & Hardware-Schnittstellen
- **30.01.** Distribution, APIs, Metadaten & Zukunft
- **TBA** Vertiefung & offene Fragen
-
-<!--
-Medienwissenschaftler:innen, nicht Informatiker:innen
-Fokus: Warum funktionieren Dinge so? Welche Konflikte stecken dahinter?
-Hands-On jede Woche (30-40 Min)
-Narrative statt Faktenlisten
-->
-
@@ -1,27 +0,0 @@
---
-
-<!-- _class: lead -->
-
-# Fragen & Diskussion
-
-**Kontakt:** czechowski@hdm-stuttgart.de
-**Folien:** Online verfügbar unter https://hdm.librete.ch
-
---
-
-# Lizenz & Attribution
-
-Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
-
- Erlaubt Teilen & Anpassen mit Namensnennung
- Adaptionen müssen unter gleicher Lizenz geteilt werden
-
-Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
-
-<!-- 
-Open Educational Resources (OER)
-Studierende können Folien nutzen, remixen, teilen
-CC BY-SA: Wikipedia-Lizenz (Share-Alike)
-Attribution: "Michaล‚ Czechowski, HdM Stuttgart"
-->
-
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41" shape-rendering="crispEdges"><path fill="#ffffff" d="M0 0h41v41H0z"/><path stroke="#000000" d="M4 4.5h7m1 0h3m1 0h3m2 0h2m3 0h2m2 0h7M4 5.5h1m5 0h1m2 0h1m2 0h11m3 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m2 0h1m2 0h1m2 0h1m1 0h1m2 0h1m1 0h3m1 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m1 0h1m2 0h2m2 0h2m3 0h1m1 0h3m1 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m1 0h1m1 0h3m1 0h1m2 0h1m2 0h1m1 0h3m1 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m1 0h2m1 0h4m4 0h1m2 0h1m3 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M12 11.5h2m2 0h2m3 0h7M4 12.5h1m3 0h1m1 0h4m3 0h2m2 0h13m2 0h1M6 13.5h1m1 0h2m1 0h2m3 0h1m1 0h1m2 0h2m4 0h1m1 0h1m3 0h4M7 14.5h2m1 0h2m1 0h2m2 0h5m3 0h1m1 0h1m1 0h2m2 0h1M5 15.5h1m6 0h1m1 0h4m1 0h4m3 0h1m2 0h1M6 16.5h1m2 0h4m1 0h2m1 0h1m2 0h3m2 0h1m7 0h1m2 0h1M4 17.5h1m1 0h1m4 0h1m1 0h2m3 0h2m1 0h1m2 0h1m1 0h3m3 0h1m1 0h1M8 18.5h3m1 0h5m1 0h1m1 0h1m1 0h2m1 0h1m3 0h2m1 0h1m2 0h1M4 19.5h1m2 0h2m3 0h4m1 0h1m3 0h2m1 0h2m3 0h2m2 0h1M5 20.5h3m2 0h1m1 0h2m3 0h2m1 0h1m1 0h4m4 0h1m1 0h4M4 21.5h2m1 0h3m4 0h3m1 0h1m1 0h1m6 0h1m1 0h1m3 0h4M8 22.5h4m1 0h1m2 0h1m1 0h1m3 0h1m1 0h1m2 0h1m3 0h1m1 0h1m1 0h1M4 23.5h2m1 0h1m1 0h1m2 0h1m1 0h3m3 0h1m1 0h4m4 0h2m4 0h1M5 24.5h3m2 0h2m3 0h2m1 0h1m1 0h1m1 0h1m6 0h2m2 0h1M4 25.5h3m4 0h1m1 0h1m3 0h1m1 0h1m4 0h9m1 0h2M6 26.5h1m1 0h1m1 0h1m2 0h1m1 0h1m1 0h5m1 0h1m3 0h1m1 0h2m2 0h1m1 0h1M7 27.5h2m2 0h2m1 0h1m1 0h3m1 0h2m1 0h4m6 0h4M4 28.5h3m2 0h7m3 0h1m2 0h11m3 0h1M12 29.5h1m2 0h1m1 0h1m6 0h1m3 0h1m3 0h1m1 0h1m1 0h1M4 30.5h7m1 0h3m1 0h1m1 0h2m2 0h1m5 0h1m1 0h1m1 0h2m2 0h1M4 31.5h1m5 0h1m3 0h1m2 0h1m3 0h2m3 0h1m1 0h1m3 0h1m2 0h1M4 32.5h1m1 0h3m1 0h1m1 0h1m1 0h1m4 0h4m5 0h6m1 0h2M4 33.5h1m1 0h3m1 0h1m2 0h3m3 0h1m1 0h1m1 0h2m1 0h3m1 0h3m1 0h1m1 0h1M4 34.5h1m1 0h3m1 0h1m2 0h1m1 0h1m1 0h1m1 0h3m4 0h3m1 0h4M4 35.5h1m5 0h1m8 0h1m5 0h1m2 0h1m1 0h1M4 36.5h7m1 0h5m1 0h1m1 0h1m3 0h3m3 0h1m2 0h2m1 0h1"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" shape-rendering="crispEdges"><path fill="#ffffff" d="M0 0h45v45H0z"/><path stroke="#000000" d="M4 4.5h7m1 0h1m1 0h1m1 0h1m2 0h1m2 0h1m3 0h5m3 0h7M4 5.5h1m5 0h1m1 0h1m3 0h4m1 0h1m2 0h1m4 0h1m1 0h2m1 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m2 0h4m3 0h1m1 0h1m1 0h3m2 0h1m1 0h2m1 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m1 0h4m3 0h1m2 0h1m2 0h2m2 0h3m2 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m7 0h1m2 0h2m1 0h4m2 0h2m2 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m5 0h2m2 0h1m2 0h1m1 0h2m7 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M12 11.5h3m2 0h1m1 0h1m1 0h1m3 0h1m1 0h1m1 0h2m1 0h1M4 12.5h1m1 0h2m1 0h3m3 0h2m2 0h2m2 0h4m1 0h1m5 0h1m2 0h1m1 0h2M4 13.5h2m2 0h1m4 0h8m1 0h2m2 0h3m1 0h1m2 0h1m2 0h1m2 0h1M5 14.5h3m2 0h1m1 0h5m2 0h1m1 0h1m1 0h4m2 0h3m2 0h2m2 0h1M5 15.5h1m2 0h2m3 0h1m2 0h1m1 0h2m1 0h1m2 0h1m2 0h4m1 0h1m2 0h1M5 16.5h2m1 0h1m1 0h2m4 0h2m2 0h3m2 0h1m3 0h3m1 0h2m1 0h1m1 0h3M4 17.5h2m2 0h1m2 0h1m1 0h2m4 0h1m7 0h1m2 0h8m2 0h1M4 18.5h1m4 0h2m1 0h1m3 0h1m1 0h2m1 0h3m1 0h2m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1M5 19.5h2m1 0h1m4 0h1m2 0h4m1 0h5m1 0h1m2 0h7m2 0h2M4 20.5h1m1 0h3m1 0h2m3 0h4m1 0h4m1 0h1m2 0h1m1 0h1m1 0h2m1 0h1m1 0h4M6 21.5h4m1 0h2m4 0h1m2 0h1m9 0h11M4 22.5h1m2 0h2m1 0h1m1 0h1m2 0h1m3 0h2m1 0h1m5 0h1m2 0h1m4 0h2m1 0h2M5 23.5h2m1 0h2m3 0h1m2 0h1m1 0h1m2 0h1m1 0h4m3 0h3m2 0h2m1 0h2M4 24.5h4m2 0h2m6 0h1m3 0h1m1 0h1m2 0h1m5 0h1m1 0h3m2 0h1M4 25.5h1m6 0h1m2 0h2m1 0h1m1 0h1m5 0h4m3 0h1m4 0h1m1 0h1M6 26.5h1m1 0h1m1 0h1m3 0h1m1 0h1m4 0h1m1 0h1m2 0h4m2 0h4m3 0h2M4 27.5h2m2 0h2m1 0h2m4 0h1m1 0h2m1 0h2m1 0h2m1 0h1m5 0h1m1 0h3m1 0h1M6 28.5h1m1 0h3m5 0h2m1 0h1m2 0h1m1 0h1m2 0h1m1 0h1m1 0h2m2 0h1m2 0h1m1 0h1M5 29.5h3m4 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h3m1 0h1m2 0h1m1 0h1m2 0h1m2 0h1m1 0h2M5 30.5h3m2 0h4m1 0h1m3 0h5m2 0h1m3 0h1m1 0h1m2 0h1m1 0h1m1 0h1M4 31.5h1m1 0h1m1 0h1m9 0h1m1 0h2m2 0h2m4 0h1m5 0h2m1 0h1M6 32.5h1m3 0h2m2 0h9m1 0h1m4 0h1m2 0h6M12 33.5h3m1 0h2m1 0h1m1 0h1m1 0h1m2 0h3m3 0h1m3 0h1m1 0h3M4 34.5h7m1 0h2m1 0h3m2 0h2m1 0h1m2 0h1m1 0h2m2 0h1m1 0h1m1 0h1m1 0h1m1 0h1M4 35.5h1m5 0h1m1 0h4m2 0h1m1 0h1m3 0h5m1 0h3m3 0h1m2 0h2M4 36.5h1m1 0h3m1 0h1m3 0h1m1 0h2m1 0h1m2 0h1m1 0h1m1 0h1m1 0h1m3 0h6m2 0h1M4 37.5h1m1 0h3m1 0h1m1 0h5m2 0h1m1 0h3m1 0h10m1 0h1m2 0h2M4 38.5h1m1 0h3m1 0h1m1 0h3m2 0h2m1 0h3m3 0h1m3 0h1m3 0h1m1 0h1m1 0h2M4 39.5h1m5 0h1m4 0h2m1 0h1m1 0h3m1 0h2m1 0h1m1 0h1m1 0h1m1 0h1m1 0h2M4 40.5h7m1 0h1m1 0h4m1 0h1m2 0h1m2 0h1m2 0h4m1 0h1m2 0h1m2 0h2"/></svg>
@@ -0,0 +1 @@
+Dies ist eine einfache Textdatei. Keine Magic Number hier! Plaintext hat keinen Standard-Header.
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
libretech	d9c8b0d250	optimize images and add deploy-html target - resize all images to max 1920px width (152MB → 66MB) - add assets-original/ to gitignore for backups - add make optimize-images target - add make deploy-html for faster HTML-only deployment	2025-12-19 15:16:24 +01:00
libretech	800ed932bb	add hex-dec lookup table and 8bit-P character images, update speaker notes	2025-12-19 15:03:55 +01:00
libretech	7d2e943d6e	fix magic numbers slide: clarify ascii vs non-printable bytes, update lookup table link	2025-12-19 14:29:16 +01:00
libretech	7068ea3e56	update termin 0 and 1 slides	2025-12-19 14:05:34 +01:00
libretech	98837f6840	update termin 0 and 1, add qr codes	2025-12-18 23:25:45 +01:00
libretech	2aa34f1421	update termin 0 intro, add jung-naiv image	2025-12-18 23:11:14 +01:00
libretech	51e862b287	add /humanify command for pedagogical style transformation	2025-12-18 22:35:21 +01:00
libretech	3d1bff94f9	fix makefile for modular slide workflow - remove references to deleted _frontmatter.md, _intro.md, _outro.md - add termin 0 to build targets - remove broken assemble target (files are now self-contained) - update build/pdf/html targets to work directly from slides/ - add copy-assets target to copy assets and materials to build/ - fix deploy path to /hdm/223015b/	2025-12-18 22:23:41 +01:00
libretechandClaude Opus 4.5	a7ad4c0f20	termin 1: add sample rate vs bit depth explanation, expand content - add comprehensive slide explaining sample rate (horizontal) vs bit depth (vertical) - change "Achtung" to "Hinweis" for magic number note (fixes contradiction) - add new images: spectogram-chet-baker, hex-code variants, ascii table, rgb variants - expand speaker notes with detailed explanations and teaching prompts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2025-12-18 21:46:16 +01:00
libretech	8974af49ab	termin 1: convert appropriate lists to fragmented (*) for presentation	2025-12-18 18:03:24 +01:00
libretech	c8935845f6	termin 1: fix audacity spectrogram menu path, add manual link	2025-12-18 18:02:15 +01:00
libretech	11fd964c8c	termin 1: fix course number 223015c → 223015b	2025-12-18 17:36:13 +01:00
libretech	ff2d8c12c5	termin 0: fix intro slides content and formatting - remove "Internettechnologien 1" reference (wrong lecture) - rewrite "Warum dieses Modul?" with course-specific questions - rewrite "Das Ziel" to match course content - add "Prüfungsleistung" slide - convert lists to fragmented (*) where pedagogically useful - fix layout issues: move conclusions into fragmented lists	2025-12-18 17:34:56 +01:00
libretech	85b8f7f355	Merge pull request 'storage-media' (#2 ) from storage-media into main Reviewed-on: #2	2025-12-18 17:09:47 +01:00
libretech	1b21d8653c	termin 4: add file transfer protocols slide add FTP, SFTP, WebDAV overview from hauber reference covers legacy protocols still in use today	2025-12-18 02:09:58 +01:00
libretech	261a2e3eff	termin 3: add hauber storage media content add foundational slides from hauber reference: - KB vs KiB (decimal vs binary units) - HDD structure (platter, tracks, sectors) - SD cards (variants, speed classes) - CD/DVD/Blu-ray basics (optical media overview)	2025-12-18 02:06:24 +01:00
libretech	a63caa9d2d	termin 2: add raster vs vector graphics slides add foundational content from hauber reference: - rastergrafiken (bitmaps): pixel-based, scaling issues - vektorgrafiken: mathematical descriptions, SVG/PDF/AI - raster vs vektor comparison table + rasterung concept update IMAGE_LIST.md with 2 new image suggestions	2025-12-18 02:01:21 +01:00
libretech	1b551c333a	standardize termine 2, 4, 5 formatting and content termin 2: fix course number 223015c → 223015b, add frontpage footer, fix email, convert aufgaben to fleißaufgaben (no forum) termin 4: add frontpage footer, fix email, convert aufgaben to fleißaufgaben (no forum), update 9 wochen → 5 termine structure termin 5: rebuild frontpage with course info and git link, fix email	2025-12-18 01:58:59 +01:00
libretechandClaude Opus 4.5	ddbda461d0	termin 3: add rosetta project slides for long-term archival - add rosetta disk slide (Long Now Foundation) - micro-etched nickel disk preserving 1,500+ languages - lesson: digital formats age, physical archival remains relevant - update IMAGE_LIST.md 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2025-12-18 01:51:00 +01:00
libretechandClaude Opus 4.5	32dc418957	termin 3: add storage media content from hauber reference - add NVMe, PCIe, SATA slides (internal interfaces) - add NAS and cloud storage slides - add WLAN and Bluetooth slides (wireless) - deepen speaker notes (HDD/SSD, FAT, 3-2-1, USB-C) - fix email, remove forum references - simplify fleißaufgaben (no submission required) - update IMAGE_LIST.md with 2 new images 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2025-12-18 01:49:22 +01:00
libretech	d87fce67fc	readme: fix email, remove module description section	2025-12-18 01:29:11 +01:00
libretech	2d7731c452	remove redundant ASSETS.md (superseded by IMAGE_LIST.md)	2025-12-18 01:29:06 +01:00
libretech	adaaae5ff2	Merge pull request 'lecture-01' (#1 ) from lecture-01 into main Reviewed-on: #1	2025-12-18 01:23:49 +01:00
libretech	75c8476043	update slides styling and content refinements - fix course number 223015c → 223015b in termin 1 - adjust language: "fuck" → "heck" in example - add black backgrounds for image-only slides - add bg fit to fullscreen images - update digital-landscape.png - add frontmatter to termin 2-4 slides	2025-12-18 01:22:37 +01:00
libretech	3a0cb91391	improve termin 1 to match termin 0 quality - frontpage: black bg, title, 223015b, git link - email: mail@librete.ch (both files) - remove forum references (no forum for 60 students) - remove screenshot requirements (just experiment) - simplify fleißaufgaben (no submission, discuss next week) - deepen speaker notes for bits/bytes beginners: - bit (shannon, why binary) - byte (why 8 bits, ibm history) - 256 states (everyday examples) - hexadecimal (why hex, conversion practice) - magic numbers (security aspect) - mp3 (4 steps simplified)	2025-12-17 21:57:53 +01:00
libretech	8eac5d9dc8	fix intro front: black bg, clickable git link	2025-12-17 20:46:53 +01:00
libretech	274deabeb7	add hdm-lehrauftrag-uebersicht.md to gitignore	2025-12-17 20:26:04 +01:00
libretech	02116f320e	update intro with modulhandbuch content, add course info to readme	2025-12-17 20:22:44 +01:00
libretech	7cd962bbf6	apply feedback to termin 1: wtf theme, 50/50 images, speaker notes	2025-12-17 19:53:51 +01:00
libretech	c0aff39030	update image list: mark termin 1 done, fix ascii/grayscale prompts	2025-12-17 19:53:50 +01:00
libretech	e76f8914bd	add wtf mystery files for hands-on exercise	2025-12-17 19:53:50 +01:00
libretech	06c710d1d6	add termin 0 intro slides with modulhandbuch ziel	2025-12-17 19:53:50 +01:00
libretech	f078c74ddf	update termin 5 slides with expanded content	2025-12-17 18:07:57 +01:00
libretech	e0bf6eac64	update termin 4 slides with expanded content	2025-12-17 18:07:57 +01:00
libretech	b491b2ed38	update termin 3 slides with expanded content	2025-12-17 18:07:57 +01:00
libretech	45869a1e11	update termin 2 slides with expanded content	2025-12-17 18:07:57 +01:00
libretech	b39ed32cad	update termin 1 slides with expanded content	2025-12-17 18:07:57 +01:00
libretech	9dacec48b8	remove unused partial slide files	2025-12-17 18:07:43 +01:00
libretech	aa6f3792c8	move assets to slides/assets for relative image paths	2025-12-17 18:07:30 +01:00
libretech	c5c2c10877	update makefile to use slides/assets and direct dev server	2025-12-17 18:07:23 +01:00
libretech	18cd988fc6	add termin 1 images - matrix-code, lightbulb-onoff, grayscale-gradient - rgb-color-model, ascii-table, hex-binary-table - hexeditor-screenshot, cassette-ipod, compression-types - audio-spectrogram, napster-interface - karlheinz-brandenburg.jpg, suzanne-vega.jpg (real photos)	2025-12-17 13:43:03 +01:00
libretech	acac4ace89	change image references from .jpg to .png - update IMAGE_LIST.md and all slide files - keep karlheinz-brandenburg.jpg and suzanne-vega.jpg as .jpg (real photos) - keep code examples unchanged (exiftool, HTML examples)	2025-12-17 13:26:05 +01:00
libretech	747adbd7a3	simplify makefile for modular slide workflow - single 'make dev' serves build/ with file picker ui - 'make assemble' concatenates header + intro + termin + outro - remove individual dev-1/dev-2 targets (marp ui handles file selection) - delete completed PLAN-split-slides.md	2025-12-14 20:34:46 +01:00
libretech	32a8efb92d	split index.md into modular slide files - extract _frontmatter.md, _intro.md, _outro.md as shared components - create separate files per termin with date-topic naming convention: 2025-12-19-termin-1-grundlagen-text-audio.md 2026-01-09-termin-2-bild-audio-video.md 2026-01-23-termin-3-speichermedien-schnittstellen.md 2026-01-30-termin-4-distribution-apis-zukunft.md 2026-xx-xx-termin-5-vertiefung-offene-fragen.md - keep index.md.bak as backup (gitignored)	2025-12-14 20:34:20 +01:00
libretech	660ef3426c	add marp skill and slide split plan	2025-12-14 19:17:20 +01:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41" shape-rendering="crispEdges"><path fill="#ffffff" d="M0 0h41v41H0z"/><path stroke="#000000" d="M4 4.5h7m1 0h3m1 0h3m2 0h2m3 0h2m2 0h7M4 5.5h1m5 0h1m2 0h1m2 0h11m3 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m2 0h1m2 0h1m2 0h1m1 0h1m2 0h1m1 0h3m1 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m1 0h1m2 0h2m2 0h2m3 0h1m1 0h3m1 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m1 0h1m1 0h3m1 0h1m2 0h1m2 0h1m1 0h3m1 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m1 0h2m1 0h4m4 0h1m2 0h1m3 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M12 11.5h2m2 0h2m3 0h7M4 12.5h1m3 0h1m1 0h4m3 0h2m2 0h13m2 0h1M6 13.5h1m1 0h2m1 0h2m3 0h1m1 0h1m2 0h2m4 0h1m1 0h1m3 0h4M7 14.5h2m1 0h2m1 0h2m2 0h5m3 0h1m1 0h1m1 0h2m2 0h1M5 15.5h1m6 0h1m1 0h4m1 0h4m3 0h1m2 0h1M6 16.5h1m2 0h4m1 0h2m1 0h1m2 0h3m2 0h1m7 0h1m2 0h1M4 17.5h1m1 0h1m4 0h1m1 0h2m3 0h2m1 0h1m2 0h1m1 0h3m3 0h1m1 0h1M8 18.5h3m1 0h5m1 0h1m1 0h1m1 0h2m1 0h1m3 0h2m1 0h1m2 0h1M4 19.5h1m2 0h2m3 0h4m1 0h1m3 0h2m1 0h2m3 0h2m2 0h1M5 20.5h3m2 0h1m1 0h2m3 0h2m1 0h1m1 0h4m4 0h1m1 0h4M4 21.5h2m1 0h3m4 0h3m1 0h1m1 0h1m6 0h1m1 0h1m3 0h4M8 22.5h4m1 0h1m2 0h1m1 0h1m3 0h1m1 0h1m2 0h1m3 0h1m1 0h1m1 0h1M4 23.5h2m1 0h1m1 0h1m2 0h1m1 0h3m3 0h1m1 0h4m4 0h2m4 0h1M5 24.5h3m2 0h2m3 0h2m1 0h1m1 0h1m1 0h1m6 0h2m2 0h1M4 25.5h3m4 0h1m1 0h1m3 0h1m1 0h1m4 0h9m1 0h2M6 26.5h1m1 0h1m1 0h1m2 0h1m1 0h1m1 0h5m1 0h1m3 0h1m1 0h2m2 0h1m1 0h1M7 27.5h2m2 0h2m1 0h1m1 0h3m1 0h2m1 0h4m6 0h4M4 28.5h3m2 0h7m3 0h1m2 0h11m3 0h1M12 29.5h1m2 0h1m1 0h1m6 0h1m3 0h1m3 0h1m1 0h1m1 0h1M4 30.5h7m1 0h3m1 0h1m1 0h2m2 0h1m5 0h1m1 0h1m1 0h2m2 0h1M4 31.5h1m5 0h1m3 0h1m2 0h1m3 0h2m3 0h1m1 0h1m3 0h1m2 0h1M4 32.5h1m1 0h3m1 0h1m1 0h1m1 0h1m4 0h4m5 0h6m1 0h2M4 33.5h1m1 0h3m1 0h1m2 0h3m3 0h1m1 0h1m1 0h2m1 0h3m1 0h3m1 0h1m1 0h1M4 34.5h1m1 0h3m1 0h1m2 0h1m1 0h1m1 0h1m1 0h3m4 0h3m1 0h4M4 35.5h1m5 0h1m8 0h1m5 0h1m2 0h1m1 0h1M4 36.5h7m1 0h5m1 0h1m1 0h1m3 0h3m3 0h1m2 0h2m1 0h1"/></svg>
				`@@ -0,0 +1 @@`
				`Dies ist eine einfache Textdatei. Keine Magic Number hier! Plaintext hat keinen Standard-Header.`