commit 8005f8c280c0452c6e0c5715e6e4fa0a98daad09 Author: Michael Czechowski Date: Sun Dec 14 08:19:11 2025 +0100 initial project setup for hdm dateiformate slides diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..10d7422 --- /dev/null +++ b/.gitignore @@ -0,0 +1,63 @@ +# Dependencies +node_modules/ + +# Build output +build/ + +# Logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Coverage directory used by tools like istanbul +coverage/ + +# nyc test coverage +.nyc_output + +# Dependency directories +jspm_packages/ + +# Optional npm cache directory +.npm + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +# macOS +.DS_Store + +# Windows +Thumbs.db +ehthumbs.db +Desktop.ini + +# Linux +*~ + +# IDEs +.vscode/ +.idea/ +*.swp +*.swo + +# Marp specific +*.html +!build/*.html +*.pdf diff --git a/ASSETS.md b/ASSETS.md new file mode 100644 index 0000000..7439f9b --- /dev/null +++ b/ASSETS.md @@ -0,0 +1,172 @@ +# 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"` + diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..56c648c --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,60 @@ +# AGENTS.md - Agent Guidelines for malta-slides-marp + +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 + +## Build Commands +- `npm run build` - Build slides from Markdown using Marp +- `npm run dev` - Start development server at http://localhost:8080 +- `npm run watch` - Watch mode for live preview during development +- `npm run export:pdf` - Export slides to PDF format +- `npm run export:html` - Export slides to HTML format + +## Test Commands +- `npm test` - Run all tests +- `npm run test:watch` - Run tests in watch mode +- `npm run test -- --testNamePattern="specific test name"` - Run single test + +## Code Style Guidelines + +### File Structure +- Use `slides/` directory for Markdown slide files +- Use `assets/` directory for images and media files +- Always address images as ./assets/filename.png, not assets/ or ../assets/ +- Use `themes/` for custom Marp themes +- Use `build/` directory for generated output files (ignored by git) + +### Naming Conventions +- Slide files: `index.md`, `additional-slides.md` (descriptive names) +- Images: `snake_case.jpg` or `kebab-case.jpg` +- Themes: `custom-theme.css` + +### Markdown Style +- Use ATX-style headers (# ## ###) +- Consistent code block language identifiers +- Frontmatter for slide metadata (title, theme, etc.) +- Never include a final --- as it creates an unwanted empty slide + +### Error Handling +- Validate Marp syntax before build +- Check for missing assets before export +- Log build errors with file paths and line numbers + +### Git Workflow +- Commit slide changes with descriptive messages (ALWAYS lowercase) +- Use feature branches for major slide revisions +- Tag releases with version numbers +- NEVER add co-authoring lines or "Generated with" footers to commits + +## Makefile Commands +- `make build` - Build slides from Markdown +- `make dev` - Start development server +- `make watch` - Watch for changes and rebuild +- `make pdf` - Export slides to PDF +- `make html` - Export slides to HTML +- `make clean` - Remove generated files +- `make install` - Install dependencies +- `make deploy` - Deploy slides to server \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..a8ab4d6 --- /dev/null +++ b/LICENSE @@ -0,0 +1,427 @@ +Attribution-ShareAlike 4.0 International + +======================================================================= + +Creative Commons Corporation ("Creative Commons") is not a law firm and +does not provide legal services or legal advice. Distribution of +Creative Commons public licenses does not create a lawyer-client or +other relationship. Creative Commons makes its licenses and related +information available on an "as-is" basis. Creative Commons gives no +warranties regarding its licenses, any material licensed under their +terms and conditions, or any related information. Creative Commons +disclaims all liability for damages resulting from their use to the +fullest extent possible. + +Using Creative Commons Public Licenses + +Creative Commons public licenses provide a standard set of terms and +conditions that creators and other rights holders may use to share +original works of authorship and other material subject to copyright +and certain other rights specified in the public license below. The +following considerations are for informational purposes only, are not +exhaustive, and do not form part of our licenses. + + Considerations for licensors: Our public licenses are + intended for use by those authorized to give the public + permission to use material in ways otherwise restricted by + copyright and certain other rights. Our licenses are + irrevocable. Licensors should read and understand the terms + and conditions of the license they choose before applying it. + Licensors should also secure all rights necessary before + applying our licenses so that the public can reuse the + material as expected. Licensors should clearly mark any + material not subject to the license. This includes other CC- + licensed material, or material used under an exception or + limitation to copyright. More considerations for licensors: + wiki.creativecommons.org/Considerations_for_licensors + + Considerations for the public: By using one of our public + licenses, a licensor grants the public permission to use the + licensed material under specified terms and conditions. If + the licensor's permission is not necessary for any reason--for + example, because of any applicable exception or limitation to + copyright--then that use is not regulated by the license. Our + licenses grant only permissions under copyright and certain + other rights that a licensor has authority to grant. Use of + the licensed material may still be restricted for other + reasons, including because others have copyright or other + rights in the material. A licensor may make special requests, + such as asking that all changes be marked or described. + Although not required by our licenses, you are encouraged to + respect those requests where reasonable. More considerations + for the public: + wiki.creativecommons.org/Considerations_for_licensees + +======================================================================= + +Creative Commons Attribution-ShareAlike 4.0 International Public +License + +By exercising the Licensed Rights (defined below), You accept and agree +to be bound by the terms and conditions of this Creative Commons +Attribution-ShareAlike 4.0 International Public License ("Public +License"). To the extent this Public License may be interpreted as a +contract, You are granted the Licensed Rights in consideration of Your +acceptance of these terms and conditions, and the Licensor grants You +such rights in consideration of benefits the Licensor receives from +making the Licensed Material available under these terms and +conditions. + + +Section 1 -- Definitions. + + a. Adapted Material means material subject to Copyright and Similar + Rights that is derived from or based upon the Licensed Material + and in which the Licensed Material is translated, altered, + arranged, transformed, or otherwise modified in a manner requiring + permission under the Copyright and Similar Rights held by the + Licensor. For purposes of this Public License, where the Licensed + Material is a musical work, performance, or sound recording, + Adapted Material is always produced where the Licensed Material is + synched in timed relation with a moving image. + + b. Adapter's License means the license You apply to Your Copyright + and Similar Rights in Your contributions to Adapted Material in + accordance with the terms and conditions of this Public License. + + c. BY-SA Compatible License means a license listed at + creativecommons.org/compatiblelicenses, approved by Creative + Commons as essentially the equivalent of this Public License. + + d. Copyright and Similar Rights means copyright and/or similar rights + closely related to copyright including, without limitation, + performance, broadcast, sound recording, and Sui Generis Database + Rights, without regard to how the rights are labeled or + categorized. For purposes of this Public License, the rights + specified in Section 2(b)(1)-(2) are not Copyright and Similar + Rights. + + e. Effective Technological Measures means those measures that, in the + absence of proper authority, may not be circumvented under laws + fulfilling obligations under Article 11 of the WIPO Copyright + Treaty adopted on December 20, 1996, and/or similar international + agreements. + + f. Exceptions and Limitations means fair use, fair dealing, and/or + any other exception or limitation to Copyright and Similar Rights + that applies to Your use of the Licensed Material. + + g. License Elements means the license attributes listed in the name + of a Creative Commons Public License. The License Elements of this + Public License are Attribution and ShareAlike. + + h. Licensed Material means the artistic or literary work, database, + or other material to which the Licensor applied this Public + License. + + i. Licensed Rights means the rights granted to You subject to the + terms and conditions of this Public License, which are limited to + all Copyright and Similar Rights that apply to Your use of the + Licensed Material and that the Licensor has authority to license. + + j. Licensor means the individual(s) or entity(ies) granting rights + under this Public License. + + k. Share means to provide material to the public by any means or + process that requires permission under the Licensed Rights, such + as reproduction, public display, public performance, distribution, + dissemination, communication, or importation, and to make material + available to the public including in ways that members of the + public may access the material from a place and at a time + individually chosen by them. + + l. Sui Generis Database Rights means rights other than copyright + resulting from Directive 96/9/EC of the European Parliament and of + the Council of 11 March 1996 on the legal protection of databases, + as amended and/or succeeded, as well as other essentially + equivalent rights anywhere in the world. + + m. You means the individual or entity exercising the Licensed Rights + under this Public License. Your has a corresponding meaning. + + +Section 2 -- Scope. + + a. License grant. + + 1. Subject to the terms and conditions of this Public License, + the Licensor hereby grants You a worldwide, royalty-free, + non-sublicensable, non-exclusive, irrevocable license to + exercise the Licensed Rights in the Licensed Material to: + + a. reproduce and Share the Licensed Material, in whole or + in part; and + + b. produce, reproduce, and Share Adapted Material. + + 2. Exceptions and Limitations. For the avoidance of doubt, where + Exceptions and Limitations apply to Your use, this Public + License does not apply, and You do not need to comply with + its terms and conditions. + + 3. Term. The term of this Public License is specified in Section + 6(a). + + 4. Media and formats; technical modifications allowed. The + Licensor authorizes You to exercise the Licensed Rights in + all media and formats whether now known or hereafter created, + and to make technical modifications necessary to do so. The + Licensor waives and/or agrees not to assert any right or + authority to forbid You from making technical modifications + necessary to exercise the Licensed Rights, including + technical modifications necessary to circumvent Effective + Technological Measures. For purposes of this Public License, + simply making modifications authorized by this Section 2(a) + (4) never produces Adapted Material. + + 5. Downstream recipients. + + a. Offer from the Licensor -- Licensed Material. Every + recipient of the Licensed Material automatically + receives an offer from the Licensor to exercise the + Licensed Rights under the terms and conditions of this + Public License. + + b. Additional offer from the Licensor -- Adapted Material. + Every recipient of Adapted Material from You + automatically receives an offer from the Licensor to + exercise the Licensed Rights in the Adapted Material + under the conditions of the Adapter's License You apply. + + c. No downstream restrictions. You may not offer or impose + any additional or different terms or conditions on, or + apply any Effective Technological Measures to, the + Licensed Material if doing so restricts exercise of the + Licensed Rights by any recipient of the + Licensed Material. + + 6. No endorsement. Nothing in this Public License constitutes or + may be construed as permission to assert or imply that You + are, or that Your use of the Licensed Material is, connected + with, or sponsored, endorsed, or granted official status by, + the Licensor or others designated to receive attribution as + provided in Section 3(a)(1)(A)(i). + + b. Other rights. + + 1. Moral rights, such as the right of integrity, are not + licensed under this Public License, nor are publicity, + privacy, and/or other similar personality rights; however, to + the extent possible, the Licensor waives and/or agrees not to + assert any such rights held by the Licensor to the limited + extent necessary to allow You to exercise the Licensed + Rights, but not otherwise. + + 2. Patent and trademark rights are not licensed under this + Public License. + + 3. To the extent possible, the Licensor waives any right to + collect royalties from You for the exercise of the Licensed + Rights, whether directly or through a collecting society + under any voluntary or waivable statutory or compulsory + licensing scheme. In all other cases the Licensor expressly + reserves any right to collect such royalties. + + +Section 3 -- License Conditions. + +Your exercise of the Licensed Rights is expressly made subject to the +following conditions. + + a. Attribution. + + 1. If You Share the Licensed Material (including in modified + form), You must: + + a. retain the following if it is supplied by the Licensor + with the Licensed Material: + + i. identification of the creator(s) of the Licensed + Material and any others designated to receive + attribution, in any reasonable manner requested by + the Licensor (including by pseudonym if + designated); + + ii. a copyright notice; + + iii. a notice that refers to this Public License; + + iv. a notice that refers to the disclaimer of + warranties; + + v. a URI or hyperlink to the Licensed Material to the + extent reasonably practicable; + + b. indicate if You modified the Licensed Material and + retain an indication of any previous modifications; and + + c. indicate the Licensed Material is licensed under this + Public License, and include the text of, or the URI or + hyperlink to, this Public License. + + 2. You may satisfy the conditions in Section 3(a)(1) in any + reasonable manner based on the medium, means, and context in + which You Share the Licensed Material. For example, it may be + reasonable to satisfy the conditions by providing a URI or + hyperlink to a resource that includes the required + information. + + 3. If requested by the Licensor, You must remove any of the + information required by Section 3(a)(1)(A) to the extent + reasonably practicable. + + b. ShareAlike. + + In addition to the conditions in Section 3(a), if You Share + Adapted Material You produce, the following conditions also apply. + + 1. The Adapter's License You apply must be a Creative Commons + license with the same License Elements, this version or + later, or a BY-SA Compatible License. + + 2. You must include the text of, or the URI or hyperlink to, the + Adapter's License You apply. You may satisfy this condition + in any reasonable manner based on the medium, means, and + context in which You Share Adapted Material. + + 3. You may not offer or impose any additional or different terms + or conditions on, or apply any Effective Technological + Measures to, Adapted Material that restrict exercise of the + rights granted under the Adapter's License You apply. + + +Section 4 -- Sui Generis Database Rights. + +Where the Licensed Rights include Sui Generis Database Rights that +apply to Your use of the Licensed Material: + + a. for the avoidance of doubt, Section 2(a)(1) grants You the right + to extract, reuse, reproduce, and Share all or a substantial + portion of the contents of the database; + + b. if You include all or a substantial portion of the database + contents in a database in which You have Sui Generis Database + Rights, then the database in which You have Sui Generis Database + Rights (but not its individual contents) is Adapted Material, + including for purposes of Section 3(b); and + + c. You must comply with the conditions in Section 3(a) if You Share + all or a substantial portion of the contents of the database. + +For the avoidance of doubt, this Section 4 supplements and does not +replace Your obligations under this Public License where the Licensed +Rights include other Copyright and Similar Rights. + + +Section 5 -- Disclaimer of Warranties and Limitation of Liability. + + a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE + EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS + AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF + ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS, + IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION, + WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR + PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS, + ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT + KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT + ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU. + + b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE + TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, + NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT, + INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES, + COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR + USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN + ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR + DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR + IN PART, THIS LIMITATION MAY NOT APPLY TO YOU. + + c. The disclaimer of warranties and limitation of liability provided + above shall be interpreted in a manner that, to the extent + possible, most closely approximates an absolute disclaimer and + waiver of all liability. + + +Section 6 -- Term and Termination. + + a. This Public License applies for the term of the Copyright and + Similar Rights licensed here. However, if You fail to comply with + this Public License, then Your rights under this Public License + terminate automatically. + + b. Where Your right to use the Licensed Material has terminated under + Section 6(a), it reinstates: + + 1. automatically as of the date the violation is cured, provided + it is cured within 30 days of Your discovery of the + violation; or + + 2. upon express reinstatement by the Licensor. + + For the avoidance of doubt, this Section 6(b) does not affect any + right the Licensor may have to seek remedies for Your violations + of this Public License. + + c. For the avoidance of doubt, the Licensor may also offer the + Licensed Material under separate terms or conditions or stop + distributing the Licensed Material at any time; however, doing so + will not terminate this Public License. + + d. Sections 1, 5, 6, 7, and 8 survive termination of this Public + License. + + +Section 7 -- Other Terms and Conditions. + + a. The Licensor shall not be bound by any additional or different + terms or conditions communicated by You unless expressly agreed. + + b. Any arrangements, understandings, or agreements regarding the + Licensed Material not stated herein are separate from and + independent of the terms and conditions of this Public License. + + +Section 8 -- Interpretation. + + a. For the avoidance of doubt, this Public License does not, and + shall not be interpreted to, reduce, limit, restrict, or impose + conditions on any use of the Licensed Material that could lawfully + be made without permission under this Public License. + + b. To the extent possible, if any provision of this Public License is + deemed unenforceable, it shall be automatically reformed to the + minimum extent necessary to make it enforceable. If the provision + cannot be reformed, it shall be severed from this Public License + without affecting the enforceability of the remaining terms and + conditions. + + c. No term or condition of this Public License will be waived and no + failure to comply consented to unless expressly agreed to by the + Licensor. + + d. Nothing in this Public License constitutes or may be interpreted + as a limitation upon, or waiver of, any privileges and immunities + that apply to the Licensor or You, including from the legal + processes of any jurisdiction or authority. + + +======================================================================= + +Creative Commons is not a party to its public +licenses. Notwithstanding, Creative Commons may elect to apply one of +its public licenses to material it publishes and in those instances +will be considered the “Licensor.” The text of the Creative Commons +public licenses is dedicated to the public domain under the CC0 Public +Domain Dedication. Except for the limited purpose of indicating that +material is shared under a Creative Commons public license or as +otherwise permitted by the Creative Commons policies published at +creativecommons.org/policies, Creative Commons does not authorize the +use of the trademark "Creative Commons" or any other trademark or logo +of Creative Commons without its prior written consent including, +without limitation, in connection with any unauthorized modifications +to any of its public licenses or any other arrangements, +understandings, or agreements concerning use of licensed material. For +the avoidance of doubt, this paragraph does not form part of the +public licenses. + +Creative Commons may be contacted at creativecommons.org. \ No newline at end of file diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..018c16e --- /dev/null +++ b/Makefile @@ -0,0 +1,56 @@ +# Makefile for Marp Slides Project + +.PHONY: help build dev watch pdf html clean install deploy + +# Default target +help: + @echo "Available commands:" + @echo " make build - Build slides from Markdown" + @echo " make dev - Start development server with live reload" + @echo " make watch - Watch for changes and rebuild automatically" + @echo " make pdf - Export slides to PDF format" + @echo " make html - Export slides to HTML format" + @echo " make clean - Remove generated files" + @echo " make install - Install dependencies" + @echo " make deploy - Deploy slides to server" + +# Build slides +build: + @echo "Building slides..." + npm run build + +# Start development server +dev: + @echo "Starting development server..." + npm run dev + +# Watch for changes +watch: + @echo "Watching for changes..." + npm run watch + +# Export to PDF +pdf: + @echo "Exporting to PDF..." + npm run export:pdf -- --allow-local-files + +# Export to HTML +html: + @echo "Exporting to HTML..." + npm run export:html + +# Clean generated files +clean: + @echo "Cleaning generated files..." + rm -rf dist/ build/ *.pdf *.html + +# Install dependencies +install: + @echo "Installing dependencies..." + npm install + +# Deploy slides +deploy: build + @echo "Deploying slides..." + scp build/index.html tengo@tuttle.uberspace.de:/home/tengo/html/malta/ + scp -r build/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/malta/ diff --git a/README.md b/README.md new file mode 100644 index 0000000..ef33982 --- /dev/null +++ b/README.md @@ -0,0 +1,132 @@ +# HdM - Dateiformate, Speichermedien und Schnittstellen + +## Creating Slides + +### Basic Slide Structure + +Slides are written in Markdown and separated by `---`: + +```markdown +--- +marp: true +theme: uncover +paginate: true +--- + +# Slide Title + +Content here + +--- + +# Next Slide + +More content +``` + +### Frontmatter + +Configure slide settings at the top: + +```yaml +--- +marp: true +theme: uncover +paginate: true +backgroundColor: #fff +title: My Presentation +--- +``` + +### Themes + +Use built-in themes: +- `default` +- `gaia` +- `uncover` + +Or create custom themes in `themes/` directory. + +### Images and Assets + +Place images in `assets/` directory and reference them: + +```markdown +![Alt text](assets/image.jpg) +``` + +## Custom Themes + +Create custom themes in `themes/` directory: + +```css +/* @theme custom-theme */ + +@import-theme "gaia"; + +section { + background-color: #f0f8ff; + color: #2c3e50; +} + +h1 { + color: #3498db; +} +``` + +Apply custom theme in frontmatter: +```yaml +--- +marp: true +theme: custom-theme +--- +``` + +## Development Workflow + +1. Edit slide files in `slides/` directory +2. Use `npm run dev` for live preview +3. Make changes and see updates automatically +4. Export final version with `npm run export:pdf` + +## Makefile Commands + +Alternative commands using Make: + +```bash +make build # Build slides +make dev # Start development server +make pdf # Export to PDF +make html # Export to HTML +make watch # Watch for changes +make clean # Remove generated files +make deploy # Deploy slides to server +``` + +## Tips + +- Use `---` to separate slides +- Frontmatter controls global settings +- Images should be in `assets/` directory +- Custom themes extend built-in themes +- PDF export requires Chrome/Chromium + +## Troubleshooting + +- **PDF export fails**: Ensure Chrome/Chromium is installed +- **Server not starting**: Check if port 8080 is available +- **Styles not applying**: Verify theme file paths +- **Images not loading**: Check relative paths from slides directory + +## Contributing + +1. Follow the file structure conventions +2. Use numbered prefixes for slide files +3. Test builds before committing +4. Keep commit messages lowercase and descriptive + +## License + +This project is licensed under [Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)](https://creativecommons.org/licenses/by-sa/4.0/). + +This project uses Marp which is MIT licensed. diff --git a/index.md b/index.md new file mode 100644 index 0000000..66e81f3 --- /dev/null +++ b/index.md @@ -0,0 +1,4135 @@ +--- +marp: true +theme: gaia +paginate: true +backgroundColor: #fff +header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege" +footer: "Michael Czechowski – HdM Stuttgart – SoSe 2025" +title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege +--- + + + +![bg fit](./assets/digital-landscape.jpg) + + + +--- + +# Dateiformate, Schnittstellen, Speichermedien & Distributionswege + +Medienwissenschaften +Hochschule der Medien Stuttgart + +**Michael Czechowski** +Wintersemester 2025/26 + +--- + +# Kursübersicht + +**Ziel:** Verstehen, wie digitale Medien technisch funktionieren – von Bits bis zu globalen Distributionsnetzwerken + +**10 Wochen:** +- Wochen 1-4: Formate & Kompression +- Wochen 5-6: Speicher & Schnittstellen +- Wochen 7-9: Distribution, APIs & Metadaten +- Woche 10: Zukunft & Synthese + + + +--- + + + +# Woche 1 +## Von Bits zu Bedeutung + +--- + +![bg right:40%](./assets/matrix-code.jpg) + +# Mysterium + +``` +89 50 4E 47 0D 0A 1A 0A +00 00 00 0D 49 48 44 52 +00 00 01 90 00 00 01 2C +``` + +**Was ist das?** + + + +--- + +# Das Bit + +**Kleinste Informationseinheit** + +- **0 oder 1** +- AN oder AUS +- Strom fließt oder nicht + +![bg right:50%](./assets/lightbulb-onoff.jpg) + + + +--- + +# Das Byte + +**8 Bits = 1 Byte** + +``` +0 1 0 0 1 1 0 1 +``` + +**Wie viele Kombinationen?** +2⁸ = **256 Möglichkeiten** (0-255) + + + +--- + +# Was kann man mit 256 Zuständen machen? + +- **256 Zeichen** (Buchstaben, Zahlen, Symbole) +- **256 Graustufen** (0 = Schwarz, 255 = Weiß) +- **256 Lautstärkestufen** +- **Zahlen 0-255** (oder -128 bis +127) + +![bg left:40%](./assets/grayscale-gradient.jpg) + + + +--- + +# Farben: RGB-Modell + +**1 Pixel = 3 Bytes** + +- **Rot:** 0-255 +- **Grün:** 0-255 +- **Blau:** 0-255 + +**Beispiel:** +`FF 00 00` = Rot +`00 FF 00` = Grün +`FF FF FF` = Weiß + +![bg right:40%](./assets/rgb-color-model.jpg) + + + +--- + +# Das Problem: Sprachen + +**Die Welt hat mehr als 256 Zeichen!** + +- Englisches Alphabet: 52 (A-Z, a-z) +- + Ziffern: 10 (0-9) +- + Sonderzeichen: ~30 + +**≈ 90 Zeichen → passt in 1 Byte** + +**Aber:** ä, ö, ü, ß, é, à, ç, α, β, 中, 日, 😀 + +→ **1 Byte reicht nicht!** + + + +--- + +![bg](./assets/ascii-table.png) + + + +--- + +# Unicode: Ein Standard für alle + +**Unicode (1991):** +Jedes Schriftsystem der Welt + +**>150.000 Zeichen:** +- Latein, Kyrillisch, Arabisch, Chinesisch, Japanisch... +- Mathematische Symbole, Emoji, historische Schriften + +**UTF-8:** Variable Länge (1-4 Bytes pro Zeichen) + + + +--- + +# Beispiel: Bytes zählen + +**Text:** `"Why the fuck braucht 💩 4 Bytes?!"` + +``` +W h y → je 1 Byte (4 Bytes) +t h e → je 1 Byte (4 Bytes) +f u c k → je 1 Byte (4 Bytes) + → 1 Byte (Leerzeichen) +b r a u c h t → je 1 Byte (7 Bytes) + → 1 Byte +💩 → 4 Bytes! (0xF0 9F 92 A9) + → 1 Byte +4 B y t e s ? ! → je 1 Byte (9 Bytes) +``` + +**Gesamt: 37 Bytes** + + + +--- + +# Hexadezimal: Lesbarkeit + +**Binär ist unleserlich:** +`01001101 01010000 00110011` + +**Hexadezimal (Base 16):** +`4D 50 33` (= "MP3" in ASCII) + +**Jede Hex-Ziffer = 4 Bits** +0-9, A-F (10=A, 11=B, ..., 15=F) + +![bg right:40%](./assets/hex-binary-table.jpg) + + + +--- + +# Magic Numbers + +**Dateityp-Identifikation durch erste Bytes** + +| Format | Magic Number (Hex) | ASCII | +|--------|-------------------|-------| +| PNG | `89 50 4E 47 0D 0A 1A 0A` | `.PNG` | +| JPEG | `FF D8 FF` | `ÿØÿ` | +| PDF | `25 50 44 46` | `%PDF` | +| ZIP | `50 4B 03 04` | `PK` | + + + +--- + +![bg](./assets/hexeditor-screenshot.png) + + + +--- + +# Hands-On: Mystery Files + +**Aufgabe (30 Min):** + +1. Drei Dateien ohne Extension: `mystery1`, `mystery2`, `mystery3` +2. Öffne im Hex-Editor +3. Lies erste 16 Bytes +4. Identifiziere Format (Magic Number) +5. Benenne um und öffne + +**Tools:** hexed.it (online), HxD, Hex Fiend, Bless + + + +--- + +# Aufgabe bis nächste Woche + +**Finde eine Datei auf deinem Computer** + +1. Öffne im Hex-Editor +2. Screenshot der ersten 16 Bytes +3. Identifiziere Magic Number +4. Poste im Forum: Format + kurze Beschreibung + +**Bonus:** Finde Datei ohne Magic Number in Standard-Listen + + + +--- + + + +# Woche 2 +## Kompression I: Die MP3-Revolution + +--- + +![bg](./assets/cassette-ipod.jpg) + + + +--- + +# Das Problem (1990) + +**1 Minute CD-Audio:** + +- Sample Rate: 44.100 Hz +- Bit Depth: 16 Bit +- Stereo: 2 Kanäle + +**Rechnung:** +44.100 × 16 × 2 = 1.411.200 Bits/Sekunde +≈ **10,6 MB/Minute** +≈ **635 MB für 60-Min-Album** + +**1990:** Festplatten hatten 100-500 MB! + + + +--- + +# Zwei Philosophien + +![bg right:50%](./assets/compression-types.jpg) + +**Lossless (Verlustfrei):** +- Original exakt wiederherstellbar +- ZIP, PNG, FLAC +- 30-50% Ersparnis + +**Lossy (Verlustbehaftet):** +- Daten irreversibel verändert +- JPEG, MP3, H.264 +- 90%+ Ersparnis + + + +--- + +# Lossless: Run-Length Encoding + +**Original:** +``` +AAAAABBBCCCCCCCC +``` + +**Komprimiert:** +``` +5A 3B 8C +``` + +**Ersparnis:** 16 → 6 Zeichen (62% Reduktion) + + + +--- + +# Lossy: Der Trick + +**Kernidee:** Wirf weg, was der Mensch eh nicht wahrnimmt + +**JPEG:** Schwächen des Auges +- Helligkeit besser als Farbe wahrgenommen +- Große Flächen besser als feine Details + +**MP3:** Schwächen des Ohrs +- Mittlere Frequenzen besser als hohe/tiefe +- Laute Töne "maskieren" leise Töne + +→ **Psychoakustik / Psychovisuell** + + + +--- + +![bg](./assets/karlheinz-brandenburg.jpg) + + + +--- + +# Die Geburt der MP3 + +**1982:** Universität Erlangen-Nürnberg +Karlheinz Brandenburg, Diplom-Ingenieur + +**1987:** Fraunhofer IIS entwickelt MPEG-1 Audio Layer III + +**1988:** Patentanmeldung + +**1992:** Erste Software-Implementierung + +**1995:** .mp3 Dateiendung offiziell + + + +--- + +![bg](./assets/suzanne-vega.jpg) + + + +--- + +# "Tom's Diner" + +**Warum dieser Song?** + +- A cappella (keine Instrumente) +- Suzanne Vegas Stimme ist "schwierig" +- Klare, hohe Frequenzen → Stresstest + +*"If I could code Suzanne Vega's voice well, I could code anything."* +— Karlheinz Brandenburg + + + +--- + +# Wie funktioniert MP3? + +**1. Frequenz-Analyse (FFT)** +Audio → Frequenzspektrum + +**2. Psychoakustisches Modell** +Welche Töne hört Mensch nicht? + +**3. Quantisierung** +Unwichtige Frequenzen reduzieren + +**4. Huffman-Coding** +Lossless-Kompression der Restdaten + + + +--- + +# Bitrate: Der Qualitäts-Knopf + +| Bitrate | Qualität | Kompression | +|---------|----------|-------------| +| **128 kbps** | Hörbar schlechter | ~11x | +| **192 kbps** | Akzeptabel | ~7x | +| **256 kbps** | Gut | ~5,5x | +| **320 kbps** | "CD-Qualität" | ~4,4x | + +**Original CD:** 1.411 kbps (unkomprimiert) + + + +--- + +![bg](./assets/audio-spectrogram.jpg) + + + +--- + +# Der Patentkrieg + +**1990er:** Fraunhofer + Thomson halten MP3-Patente + +**Lizenzgebühren:** +- $0,75 pro Decoder +- $2,50 pro Encoder + +**Problem:** Napster (1999) → unkontrollierte Verbreitung + +**2017:** Patente laufen aus → MP3 ist frei + + + +--- + +![bg](./assets/napster-interface.jpg) + + + +--- + +# Napster & Musikindustrie + +**1999:** Napster startet +**2001:** 80 Millionen User + +**Musikindustrie:** +- CDs kosten $15-20 +- MP3s gratis (illegal, aber egal) +- Einzelne Songs statt Alben + +**2001:** Napster verklagt, geschlossen + +**Aber:** Pandora's Box offen +→ LimeWire, Kazaa, BitTorrent, später Spotify + + + +--- + +# Kulturelle Revolution + +**MP3 veränderte:** + +✓ Musik wurde portabel (Walkman → iPod) +✓ Alben wurden irrelevant (Playlists) +✓ Musikkonsum explodierte (kostenlos/billig) +✓ Künstler verloren Kontrolle + +**Aber auch:** +❌ Künstler verdienen weniger pro Stream +❌ Audio-Qualität sank (Loudness War) +❌ Physische Medien starben + + + +--- + +# Hands-On: MP3 sezieren + +**Aufgabe (30 Min):** + +1. Lade Lied runter (eigenes oder CC) +2. Konvertiere in verschiedene Bitraten: + - 320 kbps, 128 kbps, 64 kbps +3. Tool: Audacity (kostenlos) +4. Höre Unterschiede (Kopfhörer!) +5. Vergleiche Dateigrößen + +**Optional:** Spektrogramm-Ansicht + + + +--- + +# Aufgabe bis nächste Woche + +**Nimm ein Lied (eigenes oder CC)** + +1. Exportiere: WAV, MP3 320 kbps, MP3 128 kbps +2. Notiere: Dateigrößen, Höreindrücke +3. Poste im Forum: Screenshot + Reflexion + +**Bonus:** Niedrigste Bitrate finden, bei der du keinen Unterschied hörst + + + +--- + + + +# Woche 3 +## Kompression II: Bilder & JPEG + +--- + +![bg](./assets/photo-comparison.jpg) + + + +--- + +# Was ist ein Bild? + +**Digital = Pixelraster** + +**Beispiel: 1920×1080 (Full HD)** += 2.073.600 Pixel + +**Jedes Pixel = 3 Bytes (RGB)** +2.073.600 × 3 = **6,2 MB** + +**Für EIN Foto!** + + + +--- + +# Lossless: PNG + +**PNG = Portable Network Graphics (1996)** + +**Funktionsweise:** +- Vorhersage (Pixel ähneln Nachbarn) +- Differenz-Encoding +- DEFLATE-Algorithmus (wie ZIP) + +**Kompression:** 20-50% Ersparnis + +**Gut für:** Screenshots, Logos, Text +**Schlecht für:** Fotos + + + +--- + +# Lossy: JPEG + +**JPEG = Joint Photographic Experts Group (1992)** + +**Eigenschaften:** +- Lossy Kompression +- 90%+ Platzersparnis möglich +- Artefakte bei hoher Kompression + +**6 MB → 500 KB** (typisch) + + + +--- + +![bg](./assets/jpeg-artifacts.jpg) + + + +--- + +# Wie funktioniert JPEG? (1/2) + +**Schritt 1: RGB → YCbCr** +- Y = Helligkeit (Luminanz) +- Cb/Cr = Farbe (Chrominanz) + +**Warum?** Menschen sehen Helligkeit besser als Farbe + +**Schritt 2: Chroma Subsampling** +Farbauflösung reduzieren (4:2:0) +→ 50% Datenmenge weg, kaum sichtbar + + + +--- + +# Wie funktioniert JPEG? (2/2) + +**Schritt 3: DCT (Discrete Cosine Transform)** +Bild in 8×8-Blöcke → Frequenzspektrum + +**Schritt 4: Quantisierung** +Hohe Frequenzen (Details) stark reduzieren +→ **Hier passiert Datenverlust!** + +**Schritt 5: Huffman-Coding** +Lossless-Kompression der Restdaten + + + +--- + +# JPEG Quality + +| Quality | Dateigröße | Artefakte | +|---------|------------|-----------| +| **100** | ≈2-3 MB | Kaum | +| **85-90** | ≈200-400 KB | Minimal | +| **50** | ≈100 KB | Sichtbar | + +**Sweet Spot: 85-90** +10x Kompression, für Menschen kaum unterscheidbar + + + +--- + +![bg](./assets/gif-animation.gif) + + + +--- + +# Die GIF-Geschichte + +**GIF = Graphics Interchange Format (1987)** +CompuServe (US-Online-Dienst) + +**Features:** +- 256 Farben max (8-bit Palette) +- Lossless (für Palette) +- Animationen! + +**1994 Twist:** Unisys hält Patent auf LZW-Kompression +→ Fordert Lizenzgebühren + +→ **"Burn All GIFs!" Kampagne** + + + +--- + +# PNG vs. GIF + +**GIF:** +✓ Animationen +✓ Breite Unterstützung +❌ Nur 256 Farben +❌ Patent-Probleme (bis 2003) + +**PNG:** +✓ Millionen Farben +✓ Alpha-Transparenz +✓ Patent-frei +❌ Keine Animationen (bis APNG, 2004) + +**Ergebnis:** PNG für Grafiken, GIF für Memes! + + + +--- + +# WebP & AVIF + +**WebP (Google, 2010):** +- Lossy UND Lossless +- Animationen +- 25-35% kleiner als JPEG + +**AVIF (2019):** +- Basiert auf AV1-Video-Codec +- 50% kleiner als JPEG +- HDR-Unterstützung +- Patent-frei + +**Problem:** Browser-Support dauert Jahre + + + +--- + +![bg](./assets/instagram-quality-loss.jpg) + + + +--- + +# Warum Instagram eure Fotos "ruiniert" + +**Upload-Pipeline:** +1. Dein Foto: 12 MP, 8 MB +2. Instagram skaliert: max. 1080px +3. Re-Kompression: JPEG Quality ~75 +4. Endgröße: 200-400 KB + +**Warum?** +- Speicherkosten (Milliarden Fotos!) +- Ladezeiten (Mobile) +- Bandbreite (günstiger) + + + +--- + +# Hands-On: Kompression vergleichen + +**Aufgabe (40 Min):** + +1. Hochauflösendes Foto (eigenes oder CC) +2. Exportiere: + - PNG + - JPEG Q100, Q85, Q50 + - WebP (optional) +3. Tool: **Squoosh.app** (Google-Tool) +4. Vergleiche: Dateigrößen, sichtbare Unterschiede +5. Wo werden Artefakte sichtbar? + + + +--- + +# 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? + +**Bonus:** Teste WebP oder AVIF + + + +--- + + + +# Woche 4 +## Video-Kompression & Codecs + +--- + +![bg](./assets/netflix-4k.jpg) + + + +--- + +# Das Problem: Video ist RIESIG + +**1 Minute 4K-Video (3840×2160):** + +- 30 fps (Bilder/Sekunde) +- Jedes Bild: 24,8 MB (unkomprimiert) + +**Rechnung:** +30 × 24,8 MB = **744 MB/Sekunde** +× 60 Sekunden = **44,6 GB/Minute** + +**2-Stunden-Film: 5,3 TB!** + + + +--- + +# Container vs. Codec + +**Container = Die Box** +Verpackt Video, Audio, Untertitel, Metadaten + +**Beispiele:** MP4, MKV, AVI, MOV + +**Codec = Kompressionsalgorithmus** +Entscheidet, WIE Daten komprimiert werden + +**Video-Codecs:** H.264, H.265, VP9, AV1 +**Audio-Codecs:** AAC, MP3, Opus + + + +--- + +![bg](./assets/container-codec-diagram.jpg) + + + +--- + +# Video-Kompression: Drei Prinzipien + +**1. Spatial Compression (Intra-Frame)** +Jedes Bild einzeln (wie JPEG) +→ I-Frames + +**2. Temporal Compression (Inter-Frame)** +Nur Änderungen zwischen Bildern +→ P-Frames, B-Frames + +**3. Motion Compensation** +"Ball bewegt sich von A nach B" + + + +--- + +# I-Frames, P-Frames, B-Frames + +**I-Frame (Intra):** +Vollständiges Bild (wie JPEG) +Groß, aber unabhängig + +**P-Frame (Predicted):** +Referenziert vorherige Frames +Viel kleiner + +**B-Frame (Bi-directional):** +Referenziert vorherige UND zukünftige Frames +Am effizientesten + +**GOP:** I - B - B - P - B - B - P - B - B - I + + + +--- + +![bg](./assets/iframe-pframe-diagram.jpg) + + + +--- + +# H.264: Der König + +**H.264 / AVC (2003)** + +**Warum dominant?** +✓ Exzellente Kompression (100:1 möglich) +✓ Hardware-Support (jedes Gerät seit ~2010) +✓ YouTube, Netflix, Blu-ray – alles H.264 + +**Features:** +- Variable Block-Größen (16×16 bis 4×4) +- Deblocking-Filter +- CABAC-Coding + + + +--- + +# Das Patent-Problem + +**H.264 ist NICHT frei!** + +**MPEG-LA (Patent Pool):** +- 2.000+ Patente von ~30 Unternehmen +- Apple, Microsoft, Sony, Panasonic... + +**Lizenzgebühren:** +- Hardware-Decoder: $0,20/Einheit +- Content-Distribution: Kostenlos für "Internet Broadcast" + +**Problem:** Open-Source-Projekte in Grauzone + + + +--- + +# H.265 / HEVC + +**H.265 (2013):** +50% bessere Kompression als H.264 + +**ABER:** Patent-Desaster + +**Drei (!) konkurrierende Patent-Pools:** +- MPEG-LA +- HEVC Advance +- Velos Media + +→ Viele bleiben bei H.264 oder suchen Alternativen + + + +--- + +![bg](./assets/youtube-vp9.jpg) + + + +--- + +# VP9: Googles Antwort + +**VP9 (2013):** +Entwickelt von Google (On2-Akquisition) + +**Eigenschaften:** +✓ Ähnlich H.265-Kompression +✓ KOSTENLOS, patent-frei (laut Google) +✓ YouTube nutzt VP9 für 4K + +**Nachteile:** +❌ Hardware-Support langsam +❌ Höherer CPU-Aufwand +❌ Nicht universell wie H.264 + + + +--- + +![bg](./assets/av1-logo.jpg) + + + +--- + +# AV1: Die Open-Source-Revolution + +**AV1 (2018):** +Alliance for Open Media: Google, Netflix, Amazon, Microsoft, Apple, Mozilla... + +**Ziel:** Patent-freier, moderner Codec + +**Features:** +✓ 30% besser als H.265 +✓ Royalty-free, Open Source +✓ 8K, HDR, hohe Frame-Rates + +**Stand 2025:** +YouTube, Netflix nutzen AV1 für 4K/8K + + + +--- + +# Adaptive Bitrate Streaming + +**Problem:** Internet-Geschwindigkeit variiert + +**Lösung:** Mehrere Qualitäten parallel + +**MPEG-DASH / HLS:** +- 4K (20 Mbps) +- 1080p (5 Mbps) +- 720p (2,5 Mbps) +- 480p (1 Mbps) +- 240p (0,5 Mbps) + +Segmente: 2-10 Sekunden +Player wählt dynamisch + + + +--- + +![bg](./assets/streaming-quality-switch.jpg) + + + +--- + +# Container im Detail + +**MP4:** +- Standard für Web, Mobile +- H.264, H.265, AV1 +- DRM-fähig + +**MKV (Matroska):** +- Open Source, extrem flexibel +- Beliebig viele Audio-/Untertitel-Spuren +- Fast jeden Codec + +**WebM:** +- Google, Web-optimiert +- Nur VP9/AV1 + Opus/Vorbis + + + +--- + +# Hands-On: Video analysieren + +**Aufgabe (40 Min):** + +**Tool:** FFmpeg (CLI) oder HandBrake (GUI) + +1. Download: CC-Video (Big Buck Bunny, ~1 Min) +2. Analysiere: `ffmpeg -i video.mp4` oder MediaInfo +3. Notiere: Container, Codec, Bitrate, Auflösung +4. Konvertiere: + - H.264, 1080p, 5 Mbps + - H.265, 1080p, 2,5 Mbps +5. Vergleiche: Größen, Encoding-Zeit, Qualität + + + +--- + +# 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? + +**Bonus:** AV1-Encoding (Warnung: SEHR langsam!) + + + +--- + + + +# Woche 5 +## Speichermedien, Dateisysteme & Backup + +--- + +![bg](./assets/hdd-ssd-comparison.jpg) + + + +--- + +# Rückblick: HDD vs. SSD + +**HDD:** +- Mechanisch, magnetisch +- Langsam (~150 MB/s) +- Günstig (~20€/TB) +- Empfindlich (Stöße!) + +**SSD:** +- Elektronisch, Flash +- Schnell (~500-7.000 MB/s) +- Teuer (~80-150€/TB) +- Write-Zyklen begrenzt + + + +--- + +# Was fehlt? Dateisysteme! + +**Dateisystem = Bibliothekskatalog für Festplatte** + +**Aufgaben:** +- Dateien speichern & finden +- Metadaten verwalten +- Speicherplatz effizient nutzen +- Fehler erkennen & beheben + + + +--- + +![bg](./assets/directory-tree.jpg) + + + +--- + +# Partitionen & Volumes + +**Partition:** +Zusammenhängender Bereich auf Festplatte + +**Volume:** +Logische Einheit mit Dateisystem + +**Beispiel:** +1 TB HDD → 2 Partitionen +- 500 GB Windows (NTFS) +- 500 GB Daten (exFAT) + + + +--- + +# Formatierung + +**Schnellformatierung:** +- Löscht nur Metadaten +- Daten physisch noch da +- → Datenrettung möglich! + +**Vollständige Formatierung:** +- Überschreibt mit Nullen +- Dauert länger, aber sicherer + + + +--- + +# FAT (File Allocation Table) + +**Geschichte:** 1977, Microsoft + +**Versionen:** +- FAT16: Max. 2 GB +- FAT32: Max. 4 GB Dateien, 2 TB Partitionen +- exFAT: Keine 4 GB-Grenze + +**Vorteil:** Universelle Kompatibilität + +**Nachteil:** Keine Rechte, kein Journaling + + + +--- + +# NTFS + +**NTFS = New Technology File System (1993)** + +**Features:** +✓ Dateien >4 GB (bis 16 EB) +✓ Zugriffsrechte (ACLs) +✓ Journaling (Crash-Schutz) +✓ Kompression & Verschlüsselung +✓ Shadow Copies + +**Nachteil:** Proprietär (nur Windows nativ) + + + +--- + +# APFS + +**Apple File System (2017)** + +**Features:** +✓ Copy-on-Write (Speicherersparnis!) +✓ Snapshots (Time Machine) +✓ Native Verschlüsselung +✓ SSD-optimiert + +**Nachteil:** Nur Apple-Geräte + + + +--- + +# ext4 + +**Fourth Extended File System (2008)** +Linux-Standard + +**Features:** +✓ Journaling +✓ Extents (schneller) +✓ Max. 16 TB Dateien, 1 EB Partitionen +✓ Online-Defragmentierung + +**Nachteil:** Windows/macOS können nicht nativ lesen + + + +--- + +# Dateisysteme: Vergleich + +| FS | OS | Max. Datei | Features | +|----|----|-----------:|----------| +| FAT32 | Alle | 4 GB | Kompatibilität | +| exFAT | Alle | 16 EB | Flash-optimiert | +| NTFS | Win | 16 EB | Journaling, ACLs | +| APFS | macOS | 8 EB | Snapshots, CoW | +| ext4 | Linux | 16 TB | Journaling | + + + +--- + +![bg](./assets/backup-disaster.jpg) + + + +--- + +# Backup: Warum? + +**Realität:** +- Festplatten sterben ohne Vorwarnung +- Ransomware verschlüsselt Daten +- Versehentliches Löschen +- Diebstahl, Brand, Wasserschaden + +**Faustregel: 3-2-1** +Mindestens 3 Kopien, auf mindestens 2 unterschiedlichen Speichermedien und mindestens 1 an einem anderen Ort + + + +--- + +# Backup-Arten + +**Vollständig (Full):** +Kompletter Datenbestand +Langsam, aber einfach + +**Inkrementell:** +Nur Änderungen seit letztem Backup +Schnell, aber Wiederherstellung komplex + +**Differenziell:** +Änderungen seit letztem Voll-Backup +Mittelweg + + + +--- + +# 3-2-1-Regel + +**3** Kopien (Original + 2 Backups) + +**2** verschiedene Medientypen (SSD + HDD) + +**1** Offsite-Backup (Cloud, externes Lager) + +**Beispiel:** +Laptop + externe Festplatte + Cloud + + + +--- + +# Backup-Software + +**macOS:** Time Machine +**Windows:** Veeam Agent (kostenlos) +**Linux:** rsync, Borg, Restic +**Plattformübergreifend:** Duplicati, Syncthing +**Cloud:** Backblaze, Nextcloud + + + +--- + +![bg](./assets/bit-rot.jpg) + + + +--- + +# Langzeitarchivierung: Das Problem + +**Digitale Daten altern:** +- Bit Rot (Degradation) +- Format-Obsoleszenz (WordPerfect .wpd) +- Hardware-Obsoleszenz (Diskettenlaufwerke) + +**Lösung:** +Migration + offene Standards + + + +--- + +![bg](./assets/lto-tape.jpg) + + + +--- + +# Magnetbänder (LTO) + +**Linear Tape-Open:** + +- LTO-9 (2021): 18 TB nativ, 45 TB komprimiert +- Haltbarkeit: 30 Jahre +- Kosten: ~5€/TB (Laufwerk ~5.000€) +- Nutzung: Rechenzentren, Archive + +**Air-Gap-Sicherheit:** +Offline-Band kann nicht von Ransomware verschlüsselt werden + + + +--- + +![bg](./assets/m-disc.jpg) + + + +--- + +# M-DISC (Millennial Disc) + +**Eigenschaften:** +- DVD/Blu-ray-kompatibel +- Anorganische Metallschicht +- Haltbarkeit: 1.000 Jahre (Tests) +- Einsatz: Familienfotos, Archive + + + +--- + +![bg](./assets/dna-helix.jpg) + + + +--- + +# DNA-Storage (Zukunft) + +**Konzept:** Daten in DNA-Sequenzen + +**Eigenschaften:** +- Speicherdichte: 215 Petabyte/Gramm (!!) +- Haltbarkeit: Tausende Jahre +- Kosten: Aktuell $3.500/MB + +**Beispiele:** +Microsoft + Twist Bioscience +Netflix "Biohackers"-Episode (2021) + + + +--- + +# Hands-On: S.M.A.R.T. & Backup + +**Aufgabe 1 (20 Min):** +S.M.A.R.T.-Daten auslesen +- Windows: CrystalDiskInfo +- macOS/Linux: `smartctl -a /dev/sda` +- Notiere: Health, Power-On Hours, Temp + +**Aufgabe 2 (20 Min):** +Test-Backup erstellen +- rsync (Linux/macOS) oder Robocopy (Windows) +- Simuliere Datenverlust → Wiederherstellung + + + +--- + +# 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 + +**Bonus:** Richte automatisches Backup ein + + + +--- + + + +# Woche 6 +## Schnittstellen: USB-C-Chaos & HDMI-Kriege + +--- + +![bg](./assets/cable-mess.jpg) + + + +--- + +# Was ist eine Schnittstelle? + +**Schnittstelle = Verbindung zwischen Systemen** + +**Hardware-Schnittstellen:** +Physischer Anschluss (USB, HDMI, Ethernet) + +**Software-Schnittstellen:** +API (nächste Woche!) + +**Heute:** Hardware-Fokus + + + +--- + +![bg](./assets/pc-back-1990s.jpg) + + + +--- + +# USB: Die Idee + +**Universal Serial Bus (1996)** + +**Ziel:** Ein Kabel für alles + +**Vorher:** +- PS/2 (Maus, Tastatur) +- Seriell (Modem) +- Parallel (Drucker) +- SCSI (Festplatten) + +**USB-Versprechen:** +✓ Ein Stecker, Hot-Pluggable, Stromversorgung + + + +--- + +# USB-Versionen: Chaos + +| Version | Jahr | Geschwindigkeit | Marketing-Name | +|---------|------|----------------:|----------------| +| USB 1.0 | 1996 | 12 Mbps | – | +| USB 2.0 | 2000 | 480 Mbps | Hi-Speed | +| USB 3.0 | 2008 | 5 Gbps | USB 3.2 Gen 1 | +| USB 3.1 | 2013 | 10 Gbps | USB 3.2 Gen 2 | +| USB 3.2 | 2017 | 20 Gbps | USB 3.2 Gen 2×2 | +| USB 4 | 2019 | 40 Gbps | USB4 | + +**NIEMAND versteht das mehr!** + + + +--- + +![bg](./assets/usb-c-cables.jpg) + + + +--- + +# USB-C: Stecker ≠ Geschwindigkeit + +**USB-C = Physischer Stecker (2014)** + +**Eigenschaften:** +✓ Reversibel (beide Seiten gleich) +✓ 24 Pins (vs. 4 bei USB-A) +✓ Unterstützt: Daten, Strom, Video, Audio + +**ABER:** USB-C sagt NICHTS über Geschwindigkeit! + +Ein USB-C-Kabel kann sein: +- USB 2.0 (480 Mbps) 😱 +- USB 3.2 Gen 2 (10 Gbps) +- USB 4 (40 Gbps) +- Thunderbolt 3/4 (40 Gbps) +- Oder nur Power Delivery (Laden, keine Daten!) + + + +--- + +# USB Power Delivery + +**USB PD (über USB-C):** + +- Profile: 5V bis 20V +- Max. 5A +- Bis zu **240W** (USB PD 3.1, 2021) + +**Anwendungen:** +- Laptop-Ladung (60-100W) +- Monitor mit Stromversorgung +- Docking-Stations + +**Problem:** Nicht jedes Kabel unterstützt volles PD! + + + +--- + +# USB-C: Das Wirrwarr + +**Was ein USB-C-Kabel KÖNNEN KANN:** + +**Daten:** USB 2.0 bis USB4 (40 Gbps) + +**Strom:** 5W bis 240W + +**Video:** DisplayPort Alt Mode, HDMI Alt Mode + +**Audio:** USB Audio Class + +**Problem:** Am Kabel steht's oft NICHT drauf! + + + +--- + +![bg](./assets/thunderbolt-logo.jpg) + + + +--- + +# Thunderbolt: Premium-Schnittstelle + +**Thunderbolt (Intel + Apple):** + +- Thunderbolt 3/4 (2015/2020): USB-C, 40 Gbps +- **PCIe über Kabel** → externe GPUs! +- Daisychaining (bis 6 Geräte) +- 100W Power Delivery garantiert + +**Nachteile:** +❌ Teuer (Kabel: 30-80€) +❌ Lizenzgebühren (Intel) +❌ Nur High-End-Geräte + + + +--- + +![bg](./assets/hdmi-cable.jpg) + + + +--- + +# HDMI: Der Heimkino-Standard + +**HDMI (2002):** +Entwickelt von Sony, Panasonic, Toshiba... + +**Versionen:** +- HDMI 1.4 (2009): 4K @ 30 Hz, ARC +- HDMI 2.0 (2013): 4K @ 60 Hz, HDR +- HDMI 2.1 (2017): 8K @ 60 Hz, 4K @ 120 Hz, VRR + +**Features:** +✓ Audio + Video in einem Kabel +✓ HDCP (Copy Protection) +✓ CEC (Gerätesteuerung) + +**Nachteile:** +❌ Proprietär, Lizenzgebühren +❌ Keine Daisychaining + + + +--- + +![bg](./assets/displayport-cable.jpg) + + + +--- + +# DisplayPort: Die PC-Alternative + +**DisplayPort (2006):** +VESA (Video Electronics Standards Association) + +**Versionen:** +- DP 1.4 (2016): 8K @ 60 Hz, HDR +- DP 2.0 (2019): 16K @ 60 Hz, 8K @ 120 Hz + +**Vorteile:** +✓ Lizenzfrei (keine Gebühren!) +✓ Daisychaining (Multi-Monitor) +✓ Adaptive Sync (FreeSync, G-Sync) +✓ USB-C Alt Mode + +**Nachteil:** Weniger verbreitet in TVs + + + +--- + +# HDMI vs. DisplayPort + +| Feature | HDMI 2.1 | DisplayPort 2.0 | +|---------|----------|-----------------| +| **Max. Auflösung** | 8K @ 60 Hz | 16K @ 60 Hz | +| **Lizenz** | Ja (~$10k/Jahr) | Nein | +| **Daisychaining** | Nein | Ja | +| **Adaptive Sync** | VRR (neu) | Ja (nativ) | +| **USB-C** | Alt Mode (selten) | Alt Mode (häufig) | +| **Verbreitung** | TVs dominant | PCs/Monitore | + + + +--- + +![bg](./assets/hdcp-warning.jpg) + + + +--- + +# HDCP: Copy Protection + +**HDCP = High-bandwidth Digital Content Protection** + +**Was ist das?** +- DRM für Video-Signale +- Verschlüsselt zwischen Quelle und Display +- Verhindert "Man-in-the-Middle"-Aufnahme + +**Problem:** +- Alte Monitore: Kein HDCP 2.2 → 4K-Netflix funktioniert nicht! +- Capture-Cards oft blockiert +- "HDCP-Handshake-Fehler" → Schwarzer Bildschirm + +**Kritik:** Schikaniert ehrliche Nutzer, Piraten umgehen es leicht + + + +--- + +![bg](./assets/ethernet-cable.jpg) + + + +--- + +# Ethernet: Das Netzwerkkabel + +**Ethernet (1980er):** + +**Versionen:** +- 100BASE-TX (1995): 100 Mbps +- 1000BASE-T (1999): 1 Gbps (Gigabit) +- 10GBASE-T (2006): 10 Gbps + +**Kabel-Kategorien:** +- Cat5e: bis 1 Gbps (veraltet) +- Cat6: bis 10 Gbps (55m) +- Cat6a: bis 10 Gbps (100m) + +**Stecker:** RJ45 (8P8C) + + + +--- + +![bg](./assets/vintage-ports.jpg) + + + +--- + +# Veraltete Schnittstellen + +**Seriell (RS-232):** 1960er, 115,2 kbps, Modems +**Parallel (LPT):** Drucker, 8 Bits gleichzeitig +**PS/2:** Maus + Tastatur (1987-2010er) +**VGA:** Analoges Video (1987-2010er) + +**Heute:** Manchmal noch auf Mainboards (Legacy-Support) + + + +--- + +# Hands-On: Schnittstellen identifizieren + +**Aufgabe (30 Min):** + +1. Untersuche deinen Laptop/Desktop +2. Welche Anschlüsse vorhanden? +3. Für USB-C: Welche Features? (Daten, Video, Laden?) +4. Teste: Schließe Gerät an verschiedenen Ports an +5. Dokumentiere: Foto + Beschriftung + +**Tools:** Systeminfo (Win), System Report (Mac), lsusb (Linux) + + + +--- + +# 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 + +**Bonus:** Finde USB-C-Kabel, das nur USB 2.0 kann + + + +--- + + + +# Woche 7 +## Distributionswege: CDN, P2P & Streaming + +--- + +![bg](./assets/sneakernet-truck.jpg) + + + +--- + +# Das Problem: Daten müssen reisen + +**Szenario:** 100 TB von Berlin nach München + +**Option 1: Internet-Upload** +- 1 Gbps Uplink = 125 MB/s +- Zeit: **9,3 Tage** (non-stop!) + +**Option 2: Festplatte per Post** +- 10× 10TB HDDs (~2.000€) +- Kopieren: ~10 Stunden +- Versand: 1-2 Tage +- Gesamt: **~3 Tage** + +*"Never underestimate the bandwidth of a station wagon full of tapes."* — Andrew Tanenbaum (1981) + + + +--- + +![bg](./assets/aws-snowmobile.jpg) + + + +--- + +# AWS Snowball + +**AWS Snowball (seit 2015):** + +**Problem:** Petabytes on-premise → AWS-Cloud + +**Geräte:** +- Snowball Edge: 100 TB +- **Snowmobile:** 100 PB (Container auf LKW!) + +**Prozess:** +1. AWS schickt verschlüsseltes Gerät +2. Kunde kopiert Daten lokal (schnell!) +3. Gerät zurück an AWS +4. AWS lädt in S3 hoch + +**Kosten:** Günstiger als Internet-Transfer bei >10 TB + + + +--- + +![bg](./assets/cd-dvd-bluray.jpg) + + + +--- + +# Physische Distribution + +**CD (1982):** 700 MB +**DVD (1995):** 4,7 GB / 8,5 GB +**Blu-ray (2006):** 25 GB / 50 GB / 100 GB + +**Problem heute:** +- Games: 50-150 GB (Call of Duty: 200+ GB!) +- Filme: Streaming überholt Blu-ray +- Disc = "License Key", Rest wird geladen + + + +--- + +![bg](./assets/server-overload.jpg) + + + +--- + +# Zentralisierte Distribution + +**Klassisches Modell:** Ein Server, viele Clients + +**Problem:** +1 Million User wollen 1 GB-Datei +→ Server braucht **1 PB Bandbreite!** +→ Server überlastet → **"Hug of Death"** + +**Lösung:** Content Delivery Networks (CDNs) + + + +--- + +![bg](./assets/cdn-map.jpg) + + + +--- + +# CDNs: Content Delivery Networks + +**CDN = Verteiltes Netzwerk weltweit** + +**Funktionsweise:** +1. **Origin Server** (Hauptquelle) +2. **Edge Servers** (geografisch verteilt) +3. User → nächster Edge Server +4. Erste Anfrage: Edge holt von Origin, cached +5. Weitere Anfragen: Direkt vom Edge (schnell!) + +**Vorteile:** +✓ Reduzierte Latenz (geografische Nähe) +✓ Last-Verteilung +✓ Bandbreitenersparnis + + + +--- + +# CDN-Strategien + +**Static Content:** +- Bilder, CSS, JS, Videos +- Lange Cache-Zeit (TTL: Tage/Wochen) + +**Dynamic Content:** +- User-spezifisch (Profil) +- Kurze TTL oder nicht cachebar + +**Cache Invalidation:** +- Versioning (`style.css` → `style.v2.css`) +- Cache-Purge (manuell leeren) + +*"There are only two hard things in Computer Science: cache invalidation and naming things."* — Phil Karlton + + + +--- + +![bg](./assets/netflix-openconnect.jpg) + + + +--- + +# Netflix: Fallstudie CDN + +**Netflix Open Connect (eigenes CDN):** + +**Strategie:** +- Server IN ISP-Rechenzentren (Telekom, Vodafone...) +- Popular Content vorgeladen (Predictive Caching) +- **95%+ Traffic vom lokalen ISP-Server** + +**Zahlen (2024):** +- 200M+ Subscriber +- ~15% des globalen Internet-Traffics! +- Ohne CDN: Unmöglich + + + +--- + +![bg](./assets/p2p-network.jpg) + + + +--- + +# P2P: Peer-to-Peer + +**P2P = Jeder ist Client UND Server** + +**Philosophie:** Dezentralisierung + +**Anwendungen:** +- BitTorrent (File-Sharing) +- IPFS (InterPlanetary File System) +- Blockchain (Bitcoin, Ethereum) + +**Vorteil:** Skalierbar (mehr User = mehr Bandbreite!) + +**Nachteil:** Langsam bei wenigen Peers, oft für Piraterie missbraucht + + + +--- + +![bg](./assets/bittorrent-swarm.jpg) + + + +--- + +# BitTorrent: Wie funktioniert's? + +**BitTorrent (Bram Cohen, 2001):** + +**Komponenten:** +1. **.torrent-Datei:** Metadaten (Hashes, Tracker-URL) +2. **Tracker:** Vermittelt Peers +3. **Seeders:** Haben komplette Datei +4. **Leechers:** Laden noch +5. **Swarm:** Alle Peers zusammen + +**Mechanismus:** +- Datei in Chunks (z.B. 256 KB) +- Jeder Peer lädt von verschiedenen Peers +- "Tit-for-tat": Wer uploaded, lädt schneller + + + +--- + +![bg](./assets/pirate-bay-logo.jpg) + + + +--- + +# BitTorrent & Piraterie + +**2000er:** Musik-/Film-Piraterie-Revolution + +**Napster (1999-2001):** Zentralisiert → Verklagt, Shutdown + +**BitTorrent (2001+):** Dezentral → Schwerer zu verklagen + +**The Pirate Bay (2003):** BitTorrent-Index +- Blockiert, zieht um, neue Domains +- **Whack-a-Mole-Spiel** + +**Rechtliche Grauzone:** +- Protokoll selbst: Legal +- Inhalte: Oft illegal (Urheberrecht) +- Legitime Uses: Linux-ISOs, Open-Source, Public Domain + + + +--- + +![bg](./assets/ipfs-logo.jpg) + + + +--- + +# IPFS: Dezentrales Web? + +**IPFS = InterPlanetary File System (2015)** + +**Vision:** Web ohne Server + +**Funktionsweise:** +- **Content-Addressable:** Dateien durch Hash identifiziert +- **CID:** Content Identifier (`QmXyZ123...`) +- Datei auf vielen Knoten (wie BitTorrent, aber persistent) +- Abruf: "Gib mir Datei mit Hash X" (egal wo) + +**Vorteile:** Zensur-resistent, kein Single Point of Failure + +**Nachteile:** Langsam (noch), keine Verfügbarkeitsgarantie + +**Anwendung:** NFT-Speicher + + + +--- + +![bg](./assets/streaming-hls.jpg) + + + +--- + +# Streaming: Real-Time-Distribution + +**Streaming = Daten während Empfang konsumiert** + +**Protokolle:** +- **HLS** (Apple): HTTP-basiert, Segmente +- **MPEG-DASH:** Standard, ähnlich HLS +- **WebRTC:** Browser-zu-Browser, niedrige Latenz + +**Adaptive Bitrate:** +- Stream in mehreren Qualitäten (240p-4K) +- Player wechselt dynamisch +- Segmente: 2-10 Sekunden + +**Latenz:** +- Traditional (HLS): 10-30 Sekunden +- Low-Latency HLS: 2-5 Sekunden +- WebRTC: <1 Sekunde (Videocalls) + + + +--- + +# Hands-On: Torrent & CDN + +**Aufgabe (40 Min):** + +**Teil 1: BitTorrent (20 Min)** +1. Lade legalen Torrent (Linux-ISO: ubuntu.com) +2. Tool: qBittorrent oder Transmission +3. Beobachte: Peers, Seeders, Download-Speed, Upload-Speed + +**Teil 2: CDN-Analyse (20 Min)** +1. Öffne populäre Website (z.B. nytimes.com) +2. Browser DevTools → Network-Tab +3. Schaue auf Requests: Welche CDN-Domains? +4. Response-Headers: `X-Cache`, `CF-Ray`, etc. + +**Tools:** cdn77.com/cdn-check + + + +--- + +# Aufgabe bis nächste Woche + +**Analysiere Streaming-Dienst oder Website:** + +1. Wähle: Netflix, YouTube, Spotify, News-Seite +2. DevTools (Network-Tab): + - 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 + + + +--- + + + +# Woche 8 +## Software-Schnittstellen: APIs & Protokolle + +--- + +![bg](./assets/api-diagram.jpg) + + + +--- + +# Was ist eine API? + +**API = Application Programming Interface** + +**Analogie: Restaurant** +- Du (Client) → Speisekarte (API-Dokumentation) +- Bestellst (Request) +- Küche bereitet zu (Backend) +- Kellner bringt Essen (Response) +- Du weißt nicht, WIE gekocht wird – nur WAS du kriegst + +**Typen:** Hardware-APIs, OS-APIs, Web-APIs, Library-APIs + + + +--- + +![bg](./assets/http-request-response.jpg) + + + +--- + +# HTTP: Das Fundament + +**HTTP = HyperText Transfer Protocol (1991)** + +**Request-Struktur:** +- **Method:** GET, POST, PUT, DELETE +- **URL:** Resource-Identifier +- **Headers:** Metadaten (Content-Type, Authorization...) +- **Body:** Optional (bei POST/PUT) + +**Response-Struktur:** +- **Status Code:** 200 OK, 404 Not Found, 500 Error +- **Headers:** Metadaten +- **Body:** HTML, JSON, XML, Binary... + + + +--- + +# HTTP-Methods: CRUD + +**CRUD = Create, Read, Update, Delete** + +| Method | CRUD | Beispiel | +|--------|------|----------| +| **GET** | Read | `/posts` → Alle Posts | +| **POST** | Create | `/posts` → Neuer Post | +| **PUT** | Update | `/posts/42` → Post ersetzen | +| **PATCH** | Update | `/posts/42` → Teilupdate | +| **DELETE** | Delete | `/posts/42` → Post löschen | + +**GET = Idempotent** (mehrfach ausführen = gleiches Ergebnis) + + + +--- + +![bg](./assets/rest-api.jpg) + + + +--- + +# REST: Representational State Transfer + +**REST (Roy Fielding, 2000):** + +**Prinzipien:** +1. **Stateless:** Jede Anfrage eigenständig +2. **Resource-Based:** URLs = Ressourcen (`/users/123`) +3. **HTTP-Methods:** CRUD-Operationen +4. **Hypermedia:** Links zu verwandten Ressourcen + +**Beispiel: Twitter-API** +``` +GET /tweets/123 → Tweet mit ID 123 +POST /tweets → Neuen Tweet erstellen +DELETE /tweets/123 → Tweet löschen +GET /users/alice/tweets → Tweets von Alice +``` + + + +--- + +# REST-Probleme + +**Problem 1: Over-Fetching** +``` +GET /users/123 +→ Gibt zurück: Name, Email, Bio, Avatar, + Follower-Count, Posts, Friends... +``` +Du willst nur Name → Kriegst 90% zu viel + +**Problem 2: Under-Fetching** +``` +GET /users/123 → User-Daten +GET /users/123/posts → Alle Posts +``` +2 Requests statt einem + +**Lösung:** GraphQL + + + +--- + +![bg](./assets/graphql-logo.jpg) + + + +--- + +# GraphQL: Die REST-Alternative + +**GraphQL (Facebook, 2015):** + +**Idee:** Client fragt EXAKT, was er braucht + +**Query-Beispiel:** +```graphql +{ + user(id: 123) { + name + email + posts(limit: 5) { + title + createdAt + } + } +} +``` + +**Vorteile:** +✓ Kein Over-/Under-Fetching +✓ Ein Endpoint (`/graphql`) +✓ Strongly Typed (Schema!) + + + +--- + +# GraphQL Schema +```graphql +type User { + id: ID! + name: String! + email: String + posts: [Post!]! +} + +type Post { + id: ID! + title: String! + content: String! + author: User! +} + +type Query { + user(id: ID!): User + posts: [Post!]! +} + +type Mutation { + createPost(title: String!, content: String!): Post! +} +``` + +**`!` = Required (non-nullable)** + + + +--- + +![bg](./assets/websocket-diagram.jpg) + + + +--- + +# WebSockets: Real-Time + +**Problem mit HTTP:** +- Request-Response-Zyklus +- Server kann nicht "pushen" +- Polling ineffizient + +**WebSocket (2011):** +- **Bidirektionale Verbindung** +- Bleibt offen (Persistent) +- Server kann jederzeit senden + +**Anwendungen:** +Chat (Discord), Live-Updates (Aktienkurse), Multiplayer-Games + + + +--- + +# WebSocket: Chat-Beispiel + +**Flow:** +1. Alice öffnet Chat → WebSocket-Connection +2. Bob öffnet Chat → Eigene Connection +3. Alice tippt: "Hi Bob!" +4. Client sendet: `{"type": "message", "text": "Hi Bob!", "to": "bob"}` +5. Server leitet an Bobs Connection weiter +6. Bob empfängt, zeigt an + +**Kein Polling! Instant!** + + + +--- + +![bg](./assets/grpc-logo.jpg) + + + +--- + +# gRPC: Google's Approach + +**gRPC = Google Remote Procedure Call (2015)** + +**Idee:** Funktion auf Remote-Server aufrufen, als wäre es lokal + +**Eigenschaften:** +- **Protocol Buffers (Protobuf):** Binär, kompakt (statt JSON) +- **HTTP/2:** Multiplexing, Bidirektional +- **Strongly Typed** +- **Code-Generierung** (Client/Server aus `.proto`-Datei) + +**Vorteile:** Performance, Streaming +**Nachteile:** Nicht Browser-kompatibel, Debugging schwieriger + + + +--- + +# gRPC Beispiel + +**`.proto`-Datei:** +```protobuf +service UserService { + rpc GetUser (UserRequest) returns (UserResponse); + rpc ListPosts (Empty) returns (stream Post); +} + +message UserRequest { + int32 id = 1; +} + +message UserResponse { + string name = 1; + string email = 2; +} +``` + +**Code-Generierung:** Client/Server-Code automatisch generiert + + + +--- + +# JSON: Das Standard-Format + +**JSON = JavaScript Object Notation** + +**Eigenschaften:** +- Textbasiert, menschenlesbar +- Schlüssel-Wert-Paare +- Unterstützt: Objekte, Arrays, Strings, Numbers, Booleans, null + +**Beispiel:** +```json +{ + "name": "Alice", + "age": 28, + "posts": [ + {"title": "Hello", "views": 42}, + {"title": "World", "views": 123} + ] +} +``` + + + +--- + +# Hands-On: API abfragen + +**Aufgabe (40 Min):** + +**Teil 1: REST-API (20 Min)** +1. Öffentliche API: `jsonplaceholder.typicode.com` +2. Tool: curl (Terminal) oder Postman (GUI) +3. Beispiele: +```bash +curl https://jsonplaceholder.typicode.com/posts/1 +curl -X POST https://jsonplaceholder.typicode.com/posts \ + -H "Content-Type: application/json" \ + -d '{"title":"Test","body":"Hello","userId":1}' +``` +4. Analysiere: Status-Code, Headers, Body + +**Teil 2: WebSocket (20 Min)** +1. Öffne: `websocket.org/echo.html` +2. Verbinde, sende Nachrichten +3. Beobachte: Instant Response + + + +--- + +# Aufgabe bis nächste Woche + +**Experimentiere mit öffentlicher API:** + +1. Wähle: + - GitHub API (`api.github.com`) + - 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) + +**Bonus:** Baue kleinen Client (Python, JavaScript, etc.) + + + +--- + + + +# Woche 9 +## Metadaten & Interoperabilität + +--- + +![bg](./assets/exif-gps.jpg) + + + +--- + +# Was sind Metadaten? + +**Metadaten = Daten über Daten** + +**Beispiele:** +- **Foto:** Kamera, Datum, GPS, Belichtung +- **MP3:** Künstler, Album, Jahr, Genre, Cover +- **PDF:** Autor, Datum, Software +- **E-Mail:** Absender, Empfänger, Zeitstempel + +**Warum wichtig?** +✓ Organisation, Suche +✓ Kontext (Wann/Wo/Wie?) + +**Aber auch:** +❌ Privacy-Risiko, Forensische Spuren + + + +--- + +# EXIF: Exchangeable Image File Format + +**EXIF (1995, Kamera-Hersteller):** + +**Typische Daten:** +- Kamera-Modell (z.B. "iPhone 15 Pro") +- Datum & Uhrzeit +- Belichtung (Blende, Verschlusszeit, ISO) +- **GPS-Koordinaten** (Latitude, Longitude, Altitude) +- Software (z.B. "Photoshop 2024") + +**Speicherort:** JPEG-Header (Binärformat) + +**Tools:** exiftool, ExifPurge, metapicz.com + + + +--- + +![bg](./assets/mcafee-exif-fail.jpg) + + + +--- + +# EXIF: Privacy-Albtraum + +**Szenario 1: Stalking** +- Foto auf Twitter: "Zuhause entspannen 🏡" +- EXIF: GPS 52.5200° N, 13.4050° E +- → Stalker weiß, wo du wohnst + +**Szenario 2: Whistleblowing** +- Anonyme Quelle schickt PDF +- Metadaten: "Erstellt von: John Doe, Firma XY" +- → Quelle identifiziert + +**Berühmter Fall:** +John McAfee (2012): Vice-Magazine vergaß EXIF zu entfernen +→ GPS verriet Aufenthaltsort in Guatemala + + + +--- + +# Social Media & EXIF-Stripping + +**Welche Plattformen entfernen EXIF?** + +✓ **Twitter/X:** Ja (seit 2015) +✓ **Facebook/Instagram:** Ja (GPS entfernt) +✓ **Reddit:** Ja +❌ **WhatsApp:** Nein (privat, aber Metadaten bleiben) +❌ **E-Mail-Anhänge:** Nein +❌ **Cloud (Dropbox, Google Drive):** Nein + +**Best Practice:** EXIF manuell entfernen vor Upload +```bash +exiftool -all= foto.jpg # Entfernt ALLE Metadaten +``` + + + +--- + +![bg](./assets/id3-tag-editor.jpg) + + + +--- + +# ID3-Tags: Musik-Metadaten + +**ID3 = Identification 3 (1996)** + +**Versionen:** +- **ID3v1:** 128 Bytes am Ende (limitiert!) + - Titel (30 Zeichen), Artist, Album, Jahr +- **ID3v2:** Am Anfang, variable Länge + - Unbegrenzte Textfelder, Cover-Art, Lyrics, BPM + +**Tools:** +- Kid3 (GUI, Multi-Platform) +- MusicBrainz Picard (Auto-Tagging!) +- mp3tag (Windows) + + + +--- + +![bg](./assets/musicbrainz-logo.jpg) + + + +--- + +# MusicBrainz: Offene Musik-Datenbank + +**MusicBrainz (2000):** + +**Idee:** Wikipedia für Musik-Metadaten + +**Community-gepflegt:** +- Künstler, Alben, Tracks +- Relationships (Band-Mitglieder, Label...) +- Releases (verschiedene Editionen, Länder) + +**MusicBrainz Picard:** +- Audio-Fingerprinting (AcoustID) +- Analysiert Waveform, matched mit Datenbank +- Auto-Tagging (auch bei falsch benannten Dateien!) + +**Philosophie:** Open Data (gegen proprietäre Gracenote/CDDB) + + + +--- + +# Dublin Core: Universelle Metadaten + +**Dublin Core (1995, Dublin, Ohio):** + +**15 Kern-Elemente:** +1. Title, 2. Creator, 3. Subject, 4. Description +5. Publisher, 6. Contributor, 7. Date, 8. Type +9. Format, 10. Identifier (ISBN, DOI) +11. Source, 12. Language, 13. Relation +14. Coverage, 15. Rights + +**Anwendung:** Bibliotheken, Archive, Webseiten (HTML ``) + + + +--- + +![bg](./assets/pdf-metadata-leak.jpg) + + + +--- + +# PDF-Metadaten: Hidden Dangers + +**PDF-Metadaten (XMP):** + +**Gespeichert:** +- Titel, Autor, Betreff, Keywords +- Erstellungsdatum, Änderungsdatum +- Software, **Company** (aus Office-Lizenz!) + +**Versteckte Daten:** +- Änderungshistorie (Track Changes) +- Kommentare (vermeintlich gelöscht) +- Ebenen (InDesign, Illustrator) + +**Berühmter Fall:** +Tony Blair Dossier (2003, Irak-Krieg) +→ PDF-Metadaten zeigten Manipulation + + + +--- + +# Interoperabilität: Offene vs. Proprietäre + +**Offene Formate:** +✓ Spezifikation öffentlich +✓ Keine Lizenzgebühren +✓ Viele Programme unterstützen +**Beispiele:** PNG, OGG, MKV, Markdown, SVG + +**Proprietäre Formate:** +❌ Spezifikation geheim +❌ Oft nur in einer Software voll nutzbar +❌ **Lock-in-Effekt** +**Beispiele:** PSD (Photoshop), INDD (InDesign), DWG (AutoCAD), .pages + + + +--- + +# Vendor Lock-in: Beispiele + +**Fall 1: Microsoft Office (.docx)** +- Historisch: .doc undokumentiert +- LibreOffice konnte nicht perfekt konvertieren +- "Formatierung kaputt" → Zurück zu MS Office + +**Fall 2: Adobe Creative Suite** +- PSD: Layer, Blend-Modes → Nur in Photoshop voll editierbar +- GIMP kann öffnen, aber Features fehlen + +**Fall 3: Apple Ecosystem** +- .pages, .numbers, .key → Nur auf Apple native Bearbeitung + + + +--- + +# Datenmigration & Langzeitarchivierung + +**Beispiele toter Formate:** +- WordPerfect (.wpd) – 1980-90er dominant, heute kaum lesbar +- Lotus 1-2-3 (.wks) – Spreadsheet, verschwunden +- Flash (.swf) – Millionen Websites/Games, seit 2020 tot + +**Archivierungs-Strategien:** +1. **Migration:** Regelmäßig in aktuelle Formate konvertieren +2. **Emulation:** Alte Software in VM +3. **Offene Standards:** PDF/A, TIFF, Plain Text + + + +--- + +# Metadaten für Accessibility + +**Alt-Text (Alternative Text):** +```html +Orange tabby cat sleeping on windowsill +``` + +**Warum?** +✓ Screen-Reader (Blinde/Sehbehinderte) +✓ SEO (Suchmaschinen) +✓ Fallback (Bild lädt nicht) + +**PDF-Tags:** Strukturierte PDFs (Überschriften, Listen) +→ Screen-Reader kann navigieren + +**Video:** Closed Captions (CC), Audio Descriptions + + + +--- + +# Hands-On: Metadaten analysieren & entfernen + +**Aufgabe (40 Min):** + +**Teil 1: EXIF (20 Min)** +1. Nimm Foto (oder nutze altes) +2. Analysiere: `exiftool foto.jpg` oder metapicz.com +3. Notiere: GPS? Kamera-Modell? Software? +4. Entferne: `exiftool -all= foto.jpg` +5. Vergleiche Dateigrößen + +**Teil 2: ID3 (20 Min)** +1. Nimm MP3-Datei +2. Analysiere: Kid3, mp3tag, oder exiftool +3. Ändere Tags (z.B. falscher Artist) +4. Optional: MusicBrainz Picard (Auto-Tagging) + + + +--- + +# Aufgabe bis nächste Woche + +**Metadaten-Audit:** + +1. Wähle 3 Dateitypen: + - Ein Foto (EXIF) + - 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? + +**Bonus:** Finde alte Datei (>5 Jahre) – was verraten Metadaten über damaliges Setup? + + + +--- + + + +# Woche 10 +## Zukunft & Synthese + +--- + +![bg](./assets/futuristic-datacenter.jpg) + + + +--- + +# Rückblick: 9 Wochen + +**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 + +**Heute:** Wohin geht die Reise? + + + +--- + +# AI-basierte Kompression + +**Problem:** JPEG/H.264 basieren auf 90er-Jahre-Modellen + +**Neue Ansätze:** + +1. **Neuronale Bild-Kompression:** + - Deep Learning lernt Kompression/Dekompression + - Google's "Learned Image Compression" (2018) + - Outperforms JPEG bei gleicher Größe + +2. **Generative Kompression:** + - Encoder extrahiert semantische Features + - Decoder generiert Bild neu (wie DALL-E) + - **99%+ Kompression**, aber nicht bit-genau! + +**Problem:** Hoher Rechenaufwand, keine Standardisierung + + + +--- + +![bg](./assets/jpeg-xl-logo.jpg) + + + +--- + +# JPEG XL: Der moderne JPEG + +**JPEG XL (2021, ISO-Standard):** + +**Ziele:** +✓ 60% besser als JPEG +✓ Besser als WebP/AVIF (manchmal) +✓ Lossless UND Lossy +✓ Progressive Decoding (wie klassisches JPEG) +✓ Rückwärtskompatibel (JPEG → JPEG XL "Wrapper") + +**Features:** HDR, Animation (wie GIF, aber besser) + +**Status 2025:** Browser-Support langsam (Safari ja, Chrome on-off) + +**Problem:** Google favorisiert WebP/AVIF → politischer Kampf + + + +--- + +# AV1 & VVC: Codec-Krieg + +**AV1 (Alliance for Open Media):** +✓ Etabliert sich (YouTube 4K, Netflix) +✓ Hardware-Decoder in neuen GPUs/Smartphones + +**VVC (H.266, 2020):** +- 50% besser als H.265 +- **Aber:** Patent-Problem (mehrere Pools, unklare Kosten) +- Adoption gering + +**LCEVC:** Add-on für existierende Codecs + +**Zukunft:** +- AV2 (Nachfolger AV1) in Entwicklung +- ML integriert? + + + +--- + +![bg](./assets/dna-storage-concept.jpg) + + + +--- + +# DNA-Storage + +**Konzept:** Daten in DNA-Sequenzen + +**Eigenschaften:** +- Speicherdichte: **215 Petabyte/Gramm** +- Haltbarkeit: Tausende Jahre +- Kosten: Aktuell $3.500/MB (sinkend) + +**Beispiele:** +- Microsoft + Twist Bioscience +- Netflix "Biohackers"-Episode (2021) +- Harvard: Wikipedia (11 GB) in DNA (2017) + +**Problem:** Synthese & Sequenzierung extrem langsam/teuer + +**Anwendung:** Langzeitarchivierung (nicht Live-Daten) + + + +--- + +# Holografischer Speicher + +**Holographic Data Storage:** + +**Prinzip:** +- Laser schreibt in 3D-Kristall (statt 2D-Oberfläche) +- Interferenzmuster speichert Bits +- Paralleler Zugriff (schnell!) + +**Vorteile:** +✓ Hohe Dichte (Terabytes pro Disc) +✓ Schnelle Lesegeschwindigkeit +✓ Langlebig (50+ Jahre) + +**Stand 2025:** Prototypen (Sony, InPhase †), Kommerzialisierung gescheitert + +**Problem:** Teuer, Konkurrenz durch SSDs + + + +--- + +# Quantum Storage? + +**Quantenspeicher:** + +**Konzept:** +- Qubits statt klassische Bits +- Superposition: 0 UND 1 gleichzeitig +- Verschränkung: Qubits korreliert über Distanz + +**Anwendung:** +- Nicht für klassische Daten (Qubits instabil) +- Quantum Key Distribution (QKD) für Kommunikation +- Zukunft: Quanten-RAM für Quantencomputer + +**Stand 2025:** Experimentell, Speicherzeit Millisekunden + + + +--- + +# Web3 & Dezentraler Speicher + +**IPFS, Filecoin, Arweave, Storj:** + +**Idee:** Speicher ohne zentrale Server + +**Filecoin (2017):** +- Blockchain-basiert +- User vermieten Festplatten-Platz +- Bezahlung in FIL (Kryptowährung) + +**Arweave (2018):** +- "Permanent Storage" +- Einmalige Zahlung → Daten für immer (theoretisch) + +**Kritik:** +❌ Langsam vs. AWS S3 +❌ Teurer (oft) +❌ Keine Garantie (Nodes offline) + + + +--- + +# Streaming-Zukunft + +**Trends:** + +**8K-Streaming:** +- 7680×4320 = 33 Megapixel/Frame +- Braucht 100+ Mbps (selbst mit AV1) +- Problem: Kaum Content, kaum TVs + +**VR/AR-Streaming:** +- 2× 4K (pro Auge), 90-120 fps +- Latenz <20ms kritisch +- 5G + Edge Computing nötig + +**Cloud Gaming:** +- Spiel im Rechenzentrum, Stream zu User +- Input-Lag = Todfeind (<50ms) + +**Problem:** Physik (Lichtgeschwindigkeit!) + + + +--- + +# Nachhaltigkeit + +**Digitalisierung ≠ Umweltfreundlich** + +**Rechenzentren:** +- 2024: 1-2% globaler Stromverbrauch (steigend!) +- Kühlung, Server, Netzwerk + +**Streaming:** +- 1h Netflix (HD): ~3 GB, ~0,1 kWh +- × Milliarden Stunden = massiver CO₂ + +**E-Waste:** +- Smartphones: 2-3 Jahre Lebensdauer +- SSDs, HDDs: Nicht ewig + +**Lösungen:** +- Effizientere Codecs (weniger Bandbreite) +- Renewable Energy für Rechenzentren +- Längere Hardware-Lebensdauer (Right to Repair!) + + + +--- + +# Regulierung & Standardisierung + +**Wer entscheidet?** + +**Standards-Organisationen:** +- ISO/IEC (International) +- IETF (Internet-Protokolle) +- W3C (Web-Standards) +- IEEE (Hardware) + +**Problem:** Industrie-Dominanz +- MPEG-LA (Patent-Pools) +- USB-IF (Intel-dominiert) +- HDMI Forum (Consumer-Electronics) + +**EU-Regulierung:** +- USB-C-Pflicht (ab 2024) +- DMA (Digital Markets Act): Interoperabilität +- GDPR: Datenschutz (betrifft Metadaten!) + +**Zukunft:** Mehr Open Standards? Oder Fragmentierung? + + + +--- + +# Fallstudie: Gruppenarbeit + +**Aufgabe (90 Min, ca. 5 Personen):** + +**Szenario:** Mittelständisches Medienunternehmen produziert Videos + +**Erarbeitet Konzept für:** +1. Speichermedien (intern/extern, kurz-/langfristig) +2. Dateiformate (Produktion, Distribution, Archivierung) +3. Dateisysteme (welche für was?) +4. Schnittstellen (SATA, USB, PCIe, Netzwerk) +5. Distributionswege (NAS, Cloud, FTP) +6. Backup-Strategie (3-2-1-Regel!) + +**Ergebnis:** Konzeptpapier (Mindmap, Tabelle, Poster) +**Präsentation:** 5 Min pro Gruppe + + + +--- + +# Alternative Szenarien (Auswahl) + +1. **Mittelständisches Medienunternehmen** (Videos, Streaming) +2. **Kommunales Stadtarchiv** (Digitalisierung historischer Bestände) +3. **Agentur für digitale Kommunikation** (internationale Kampagne) +4. **Digitale Hochschul-Mediathek** (Lehrvideos, Podcasts) +5. **Freiberufliche Fotografin** (Tausende RAW-Fotos/Jahr) +6. **Internationales Reporterteam** (investigative Recherche, sensibel) + +**Jede Gruppe wählt ein Szenario** + + + +--- + +# Was wir insgesamt gelernt haben + +✓ **Bits → Formate:** Encoding, Kompression (MP3, JPEG, H.264) +✓ **Speicher:** HDD, SSD, Dateisysteme, Backup, Archivierung +✓ **Schnittstellen:** USB-C, HDMI, DisplayPort, Ethernet +✓ **Distribution:** CDN, P2P, Streaming, APIs +✓ **Metadaten:** EXIF, ID3, Privacy, Interoperabilität +✓ **Zukunft:** AI-Kompression, DNA-Storage, Nachhaltigkeit + +**Kernbotschaft:** +Digitale Medien sind das Ergebnis von Standards, Politik, Kompromissen & Innovation. + +Ihr habt jetzt die Werkzeuge, um die digitale Welt kritisch zu verstehen. + + + +--- + +# Weiterführende Ressourcen + +**Bücher:** +- "Code" – Charles Petzold (Basics) +- "Understanding Digital Signal Processing" – Richard Lyons + +**Websites:** +- IETF RFCs (ietf.org) +- FFmpeg Documentation (ffmpeg.org) +- Protocol Labs (IPFS, Filecoin) + +**YouTube:** +- Computerphile (Kompression, Encoding) +- Branch Education (Hardware-Visualisierungen) + +**Podcasts:** +- Command Line Heroes (Red Hat) + +**Tools:** MediaInfo, exiftool, FFmpeg, Wireshark + + + +--- + +# Abschluss & Dank + +**Ihr habt gelernt:** +- Dateien zu lesen (Hex, Metadaten) +- Formate zu vergleichen (JPEG vs. PNG, H.264 vs. AV1) +- Infrastruktur zu verstehen (CDN, P2P, APIs) +- Kritisch zu denken (Open Standards, Lock-in, Nachhaltigkeit) + +**Nächste Schritte:** +- Fallstudie (falls Prüfungsleistung) +- Feedback willkommen (Forum, E-Mail) +- Weiterlernen mit Ressourcen + +**Vielen Dank für eure Aufmerksamkeit!** + + + +--- + + + +# Fragen & Diskussion + +**Kontakt:** m.czechowski@librete.ch +**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/ + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..44664bb --- /dev/null +++ b/package.json @@ -0,0 +1,21 @@ +{ + "name": "malta-slides-marp", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "build": "marp index.md -o build/index.html && cp -r assets build/", + "dev": "marp --server ./", + "watch": "marp --watch index.md", + "export:pdf": "marp index.md --pdf -o build/index.pdf", + "export:html": "marp index.md --html -o build/index.html && cp -r assets build/", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC", + "type": "commonjs", + "devDependencies": { + "@marp-team/marp-cli": "^4.2.3" + } +} diff --git a/themes/custom-theme.css b/themes/custom-theme.css new file mode 100644 index 0000000..adbdb37 --- /dev/null +++ b/themes/custom-theme.css @@ -0,0 +1,36 @@ +/* @theme custom-theme */ + +@import-theme "gaia"; + +section { + background-color: #f0f8ff; + color: #2c3e50; + font-size: 0.85em; +} + +h1 { + color: #3498db; + text-shadow: 2px 2px 4px rgba(0,0,0,0.1); +} + +h2 { + color: #e74c3c; +} + +ul, ol { + font-size: 0.8em; +} + +code { + background-color: #ecf0f1; + color: #2c3e50; + padding: 2px 4px; + border-radius: 3px; +} + +blockquote { + border-left: 4px solid #3498db; + background-color: #ecf0f1; + padding: 10px; + margin: 10px 0; +} \ No newline at end of file