add claude code settings and skills

fix termin 3 slide overflow and formatting
- rename Projekt slides to Übung - condense overflowing slides - remove JS validation (not fitting lecture context) - remove emojis from summary - add speaker notes for condensed content
2025-12-18 00:45:48 +01:00 · 2025-12-18 00:45:31 +01:00 · 2025-12-18 00:45:25 +01:00 · 2025-12-18 00:19:06 +01:00 · 2025-12-18 00:19:01 +01:00 · 2025-12-18 00:18:56 +01:00
19 changed files with 713 additions and 626 deletions
@@ -0,0 +1,373 @@
+# Marp/Marpit Complete Reference
+
+## Overview
+
+**Marp** = Markdown Presentation Ecosystem
+**Marpit** = The core framework ("skinny framework for creating slide deck from Markdown")
+
+Built-in themes: `default`, `gaia`, `uncover`
+
+---
+
+## Slide Structure
+
+### Slide Separation
+Slides are separated by horizontal rulers:
+```markdown
+---
+```
+Alternatives: `___`, `***`, `- - -`
+
+**Important**: May need empty line before `---` per CommonMark spec.
+
+### Basic Document Structure
+```markdown
+---
+marp: true
+theme: gaia
+paginate: true
+---
+
+# First Slide
+
+Content here
+
+---
+
+# Second Slide
+
+More content
+
+<!-- Speaker notes go here -->
+```
+
+---
+
+## Directives
+
+### Syntax Options
+
+**HTML Comments:**
+```markdown
+<!-- theme: default -->
+<!-- paginate: true -->
+```
+
+**Front-matter (YAML):**
+```markdown
+---
+theme: default
+paginate: true
+---
+```
+
+### Directive Scopes
+
+| Scope | Applies to | Syntax |
+|-------|-----------|--------|
+| Global | Entire deck | Normal directive |
+| Local | Current + following slides | Normal directive mid-document |
+| Spot | Single slide only | Underscore prefix: `_directive` |
+
+### Global Directives
+- `theme` — Slide deck theme
+- `style` — Custom CSS
+- `lang` — Language attribute (accessibility)
+- `headingDivider` — Auto-split at heading levels (1-6)
+
+### Local Directives
+- `paginate` — Page numbers (true/false/hold/skip)
+- `header` — Persistent header text
+- `footer` — Persistent footer text
+- `class` — CSS class for slide
+- `backgroundColor` — Slide background color
+- `backgroundImage` — Background image URL
+- `backgroundPosition` — CSS background-position
+- `backgroundRepeat` — CSS background-repeat
+- `backgroundSize` — CSS background-size
+- `color` — Text color
+
+### Spot Directive Example
+```markdown
+<!-- _backgroundColor: aqua -->
+<!-- _class: lead -->
+```
+Only affects current slide.
+
+### Pagination Values
+- `true` — Show and increment
+- `false` — Hide but increment
+- `hold` — Show without incrementing
+- `skip` — Hide without incrementing
+
+### Heading Divider
+```markdown
+---
+headingDivider: 2
+---
+
+# Section 1
+Content
+
+## Slide 1.1    <!-- auto slide break -->
+Content
+
+## Slide 1.2    <!-- auto slide break -->
+Content
+```
+
+---
+
+## Image Syntax
+
+### Basic Resizing
+```markdown
+![w:200](image.jpg)           <!-- width 200px -->
+![h:300](image.jpg)           <!-- height 300px -->
+![w:200 h:150](image.jpg)     <!-- both -->
+```
+
+Units: px, em, cm, pt, etc. (no viewport units vw/vh)
+
+### Image Filters
+```markdown
+![blur:10px](image.jpg)
+![brightness:1.5](image.jpg)
+![contrast:200%](image.jpg)
+![grayscale:1](image.jpg)
+![sepia:50%](image.jpg)
+![hue-rotate:180deg](image.jpg)
+![invert:100%](image.jpg)
+![opacity:0.5](image.jpg)
+![saturate:2](image.jpg)
+![drop-shadow:0,5px,10px,rgba(0,0,0,.4)](image.jpg)
+```
+
+Combine multiple:
+```markdown
+![brightness:.8 sepia:50%](image.jpg)
+```
+
+### Background Images
+```markdown
+![bg](image.jpg)              <!-- full background -->
+![bg fit](image.jpg)          <!-- contain/fit -->
+![bg cover](image.jpg)        <!-- cover (default) -->
+![bg auto](image.jpg)         <!-- original size -->
+![bg 150%](image.jpg)         <!-- scale percentage -->
+```
+
+### Split Backgrounds
+```markdown
+![bg left](image.jpg)         <!-- left half -->
+![bg right](image.jpg)        <!-- right half -->
+![bg left:40%](image.jpg)     <!-- custom split -->
+![bg right:33%](image.jpg)
+```
+
+### Multiple Backgrounds
+```markdown
+![bg](image1.jpg)
+![bg](image2.jpg)
+![bg](image3.jpg)
+```
+Arranges horizontally by default.
+
+```markdown
+![bg vertical](image1.jpg)
+![bg](image2.jpg)
+```
+Arranges vertically.
+
+---
+
+## Fragmented Lists (Animations)
+
+### Bullet Lists — Use `*`
+```markdown
+* First item      <!-- reveals first -->
+* Second item     <!-- reveals second -->
+* Third item      <!-- reveals third -->
+```
+
+Regular `-` or `+` bullets don't animate.
+
+### Ordered Lists — Use `)`
+```markdown
+1) First item
+2) Second item
+3) Third item
+```
+
+Regular `.` numbered lists don't animate.
+
+### Output
+```html
+<li data-marpit-fragment="1">First</li>
+<li data-marpit-fragment="2">Second</li>
+```
+
+**Note**: Actual animation depends on presentation viewer.
+
+---
+
+## Theme CSS
+
+### Required Metadata
+```css
+/* @theme my-theme */
+```
+
+### Core Selectors
+```css
+/* Slide container */
+section {
+  width: 1280px;
+  height: 720px;
+  font-size: 32px;
+}
+
+/* Higher specificity alternative */
+:root {
+  --color-primary: #3498db;
+}
+
+/* Pagination */
+section::after {
+  content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total);
+}
+```
+
+### Scoped Styles
+```markdown
+<style scoped>
+/* Only this slide */
+h1 { color: red; }
+</style>
+```
+
+### Global Inline Styles
+```markdown
+<style>
+/* All slides */
+section { background: #f0f0f0; }
+</style>
+```
+
+### Theme Inheritance
+```css
+/* @theme derived-theme */
+@import 'default';
+/* or */
+@import-theme 'default';
+```
+
+### Units
+- `rem` scales relative to slide `<section>` (isolated from HTML root)
+- Slide dimensions require absolute units (px, cm, in, mm)
+
+---
+
+## Marp CLI
+
+### Installation
+```bash
+npm install -g @marp-team/marp-cli
+# or
+brew install marp-cli
+```
+
+### Basic Conversion
+```bash
+marp slide.md                    # → HTML
+marp --pdf slide.md              # → PDF
+marp --pptx slide.md             # → PowerPoint
+marp --images png slide.md       # → PNG images
+```
+
+### Development Server
+```bash
+marp --server ./slides/
+PORT=1312 marp --server ./
+```
+
+Query formats: `http://localhost:8080/deck.md?pdf`
+
+### Watch Mode
+```bash
+marp --watch slide.md
+```
+
+### Key Options
+```bash
+-o, --output <file>      # Output path
+-w, --watch              # Watch for changes
+-s, --server             # HTTP server mode
+-p, --preview            # Open preview window
+--pdf                    # PDF output
+--pptx                   # PowerPoint output
+--images [png|jpeg]      # Image output
+--image-scale <n>        # Resolution (e.g., 2 for 2x)
+--allow-local-files      # Enable local file access (security risk)
+--pdf-notes              # Include speaker notes in PDF
+--browser <name>         # chrome, edge, firefox
+```
+
+---
+
+## Common Patterns
+
+### Title Slide
+```markdown
+<!-- _class: lead -->
+
+# Presentation Title
+
+**Author Name**
+Date
+```
+
+### Two-Column Layout (via background)
+```markdown
+![bg left:50%](image.jpg)
+
+# Right Content
+
+Text appears on right side
+```
+
+### Speaker Notes
+```markdown
+# Slide Title
+
+Content
+
+<!--
+These are speaker notes.
+Not visible in slides.
+Visible in presenter mode.
+-->
+```
+
+### Custom Class
+```markdown
+<!-- _class: centered dark -->
+
+# Centered Dark Slide
+```
+
+Then in CSS/theme:
+```css
+section.centered { text-align: center; }
+section.dark { background: #222; color: #fff; }
+```
+
+---
+
+## Project Conventions (This Project)
+
+- Theme: `gaia`
+- Assets: `./assets/filename.png`
+- Build output: `build/`
+- Dev server: `make dev` (port 1312)
+- Never end with `---` (creates empty slide)
@@ -0,0 +1,79 @@
+---
+name: marp
+description: Marp/Marpit documentation and slide creation guide. Use this skill when working with Marp presentations, slide syntax, themes, directives, or troubleshooting Marp-related issues.
+allowed-tools:
+  - Read
+  - Glob
+  - Grep
+  - WebFetch
+---
+
+# Marp/Marpit Skill
+
+## Purpose
+
+This skill provides comprehensive knowledge about Marp (Markdown Presentation Ecosystem) and its core engine Marpit. Use this when creating, editing, or troubleshooting Markdown-based slide presentations.
+
+## Documentation Sources
+
+When you need Marp information, fetch from these official sources:
+
+### Marpit Framework (Core Engine)
+- **Main docs**: https://marpit.marp.app/
+- **Markdown syntax**: https://marpit.marp.app/markdown
+- **Directives**: https://marpit.marp.app/directives
+- **Theme CSS**: https://marpit.marp.app/theme-css
+- **Fragmented list**: https://marpit.marp.app/fragmented-list
+- **Image syntax**: https://marpit.marp.app/image-syntax
+
+### Marp CLI
+- **Usage guide**: https://github.com/marp-team/marp-cli
+
+## Key Concepts to Learn
+
+### 1. Slide Separation
+Slides are separated by `---` (horizontal rule). The first `---` after frontmatter starts the first slide.
+
+### 2. Directives
+- **Global directives**: Apply to all slides (in frontmatter)
+- **Local directives**: Apply to current slide only (`<!-- _directive: value -->`)
+- **Spot directives**: Underscore prefix for local scope
+
+### 3. Image Syntax
+Marp extends standard Markdown image syntax:
+- `![bg](image.jpg)` - background image
+- `![bg fit](image.jpg)` - fit to slide
+- `![bg right:40%](image.jpg)` - split background
+- `![w:200](image.jpg)` - width filter
+- `![h:300](image.jpg)` - height filter
+
+### 4. Theme CSS
+- Themes use CSS with special Marpit selectors
+- `section` = slide container
+- `section::after` = pagination
+- CSS variables for theming
+
+### 5. Scoped Styles
+```html
+<style scoped>
+/* Only applies to this slide */
+</style>
+```
+
+## Workflow
+
+When asked about Marp:
+
+1. **Read REFERENCE.md first** - Contains comprehensive syntax documentation
+2. **Check local files** - Read existing slides and themes in the project
+3. **Fetch official docs if needed** - Use WebFetch for edge cases
+4. **Provide concrete examples** - Show actual Marp syntax
+5. **Reference project conventions** - Follow CLAUDE.md guidelines
+
+## Project-Specific Notes
+
+This project uses:
+- Theme: `gaia`
+- Assets path: `./assets/`
+- Build output: `build/`
+- Dev server: `make dev` (port 1312)
@@ -1,172 +0,0 @@
-# Asset-Liste: Bildbeschreibungen & Kontext
-
-## **Allgemein / Titel**
-
-| Dateiname | Kontext | Beschreibung für Suche/Generierung |
-|-----------|---------|-----------------------------------|
-| `digital-landscape.jpg` | Titelfolie, Einstieg | Futuristische digitale Landschaft mit Netzwerk-Verbindungen, leuchtende Datenpunkte, abstrakte binäre Muster, Glasfaser-Optik, cyber-ästhetisch, blau-violette Farbpalette |
-
---
-
-## **Woche 1: Bits, Bytes & Encoding**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `matrix-code.jpg` | Hex-Dump Mystery-Folie | Matrix-Style fallender grüner Code, binäre Zahlen, Hex-Zahlen (0-9, A-F), schwarzer Hintergrund, mysteriös, "digital rain" |
-| `lightbulb-onoff.jpg` | Bit-Demonstration (AN/AUS) | Zwei Glühbirnen nebeneinander: eine leuchtend (AN/gelb), eine dunkel (AUS/grau), minimalistisch, einfache Illustration, technisch-didaktisch |
-| `grayscale-gradient.jpg` | 256 Graustufen-Beispiel | Sanfter Verlauf von reinem Schwarz (#000000) zu reinem Weiß (#FFFFFF), horizontal oder vertikal, 256 diskrete Stufen sichtbar, technische Visualisierung |
-| `rgb-color-model.jpg` | RGB-Farben erklären | RGB-Farbmodell-Diagramm mit drei überlappenden Kreisen (Rot, Grün, Blau), Venn-Diagramm-Stil, zeigt additive Farbmischung (Rot+Grün=Gelb, etc.), sauber, lehrreich |
-| `ascii-table.png` | ASCII-Tabelle (1963) | Vollständige ASCII-Tabelle, 128 Zeichen (0-127), tabellarische Darstellung mit Dezimal-, Hex- und Zeichen-Spalten, retro/technisch, schwarz-weiß oder grün-schwarz (Terminal-Stil) |
-| `hex-binary-table.jpg` | Hexadezimal-Erklärung | Konversionstabelle: Dezimal (0-15), Binär (0000-1111), Hexadezimal (0-F), drei Spalten, übersichtlich, didaktische Grafik |
-| `hexeditor-screenshot.png` | Hex-Editor mit PNG-Datei | Screenshot eines Hex-Editors (z.B. HxD, Hex Fiend), zeigt PNG-Datei-Header mit Magic Number `89 50 4E 47`, linke Spalte Adressen, Mitte Hex-Werte, rechts ASCII-Darstellung |
-
---
-
-## **Woche 2: MP3 & Audio-Kompression**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `cassette-ipod.jpg` | Analog vs. Digital Kontrast | Kassette (1980er, retro) neben iPod Classic (2000er, weiß), Side-by-Side-Vergleich, nostalgisch vs. modern, auf neutralem Hintergrund |
-| `compression-types.jpg` | Lossless vs. Lossy Visualisierung | Diagramm mit zwei Pfeilen: "Lossless" (Original → Komprimiert → Original exakt rekonstruiert), "Lossy" (Original → Komprimiert → Ähnlich, aber nicht identisch), Wasserglas-Metapher möglich |
-| `karlheinz-brandenburg.jpg` | Fraunhofer IIS, MP3-Erfinder | Porträtfoto von Karlheinz Brandenburg (Entwickler, ~60 Jahre, graues Haar, Brille), professionell, Konferenz- oder Labor-Setting, alternativ: Fraunhofer IIS-Gebäude Erlangen |
-| `suzanne-vega.jpg` | "Tom's Diner" – erster MP3-Song | Suzanne Vega (Sängerin, 1980er-90er Ästhetik), Album-Cover "Solitude Standing" (1987) oder Konzertfoto, warm, akustisch, ikonisch |
-| `audio-spectrogram.jpg` | Frequenz-Vergleich (Bitrate) | Spektrogramm-Vergleich: drei Panels (Original, 320 kbps, 128 kbps), Y-Achse = Frequenz (Hz), X-Achse = Zeit, Farbe = Intensität, hohe Frequenzen verschwinden bei niedriger Bitrate (dunkle Bereiche oben) |
-| `napster-interface.jpg` | Napster-Screenshot (1999) | Screenshot Napster-Software (Windows 98/2000-Stil), Suchleiste, Liste von MP3-Dateien, Peer-Verbindungen, retro-UI, grün-graue Interface, historisch |
-
---
-
-## **Woche 3: Bilder & JPEG-Kompression**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `photo-comparison.jpg` | Hochauflösend vs. komprimiert | Side-by-Side: Linkes Bild scharf und detailliert, rechts stark JPEG-komprimiert mit sichtbaren Artefakten (Blocking, Ringing), gleiches Motiv (z.B. Landschaft oder Porträt) |
-| `jpeg-artifacts.jpg` | JPEG-Artefakte Zoom | Stark vergrößerter Ausschnitt eines JPEG-Bildes: 8×8-Blöcke sichtbar (Blocking), "Geister" um Text/Kanten (Ringing), Farb-Banding in Himmel/Verläufen |
-| `gif-animation.gif` | GIF-Animation (Meme) | Klassisches animiertes GIF (z.B. "Dancing Baby" 90er-Stil oder modernes Meme), 256 Farben, loop, pixelig-charmant, Internet-Kultur |
-| `instagram-quality-loss.jpg` | Vorher/Nachher Instagram-Upload | Zwei Versionen eines Fotos: Oben "Original" (scharf, hochauflösend), unten "Nach Instagram-Upload" (sichtbar schlechter, matschig, Kompressionsartefakte), Pfeile zeigen Unterschiede |
-
---
-
-## **Woche 4: Video-Kompression & Codecs**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `netflix-4k.jpg` | Netflix 4K-Streaming | Netflix-Interface auf 4K-TV, zeigt Filmauswahl mit "4K Ultra HD"-Badge, scharfes Bild, moderne Wohnzimmer-Setting, oder: Netflix-Logo mit "4K" |
-| `container-codec-diagram.jpg` | Container vs. Codec Visualisierung | Diagramm: Schachtel (MP4-Container) enthält mehrere Streams – Video-Track (H.264), Audio-Track (AAC), Untertitel (SRT), Metadaten, farbcodiert, technisch-didaktisch |
-| `iframe-pframe-diagram.jpg` | I/P/B-Frame-Abhängigkeiten | Diagramm: Sequenz von Frames (I-B-B-P-B-B-I), Pfeile zeigen Abhängigkeiten (P zeigt auf I, B zeigt auf I und P), farbcodiert (I=rot, P=blau, B=grün), technisch |
-| `youtube-vp9.jpg` | YouTube VP9-Logo | YouTube-Logo mit "VP9"-Badge oder Text, alternativ: YouTube-Player mit VP9-Codec-Info (Stats for Nerds), modern, Google-Branding |
-| `av1-logo.jpg` | AV1-Logo (Alliance for Open Media) | AV1-Logo (stilisiertes "AV1" mit dreieckigem Design), schwarz oder weiß auf transparentem Hintergrund, modern, clean |
-| `streaming-quality-switch.jpg` | Adaptive Bitrate Streaming | Visualisierung: Videoplayer mit Qualitätsoptionen (240p, 480p, 720p, 1080p, 4K), Balkendiagramm zeigt Bandbreite über Zeit, Qualität wechselt dynamisch, Netzwerk-Symbol |
-
---
-
-## **Woche 5: Speichermedien, Dateisysteme, Backup**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `hdd-ssd-comparison.jpg` | HDD vs. SSD Technologie | Aufgeschraubte HDD (Platter, Lesekopf sichtbar) neben SSD-Platine (Chips, keine beweglichen Teile), Side-by-Side, technisch-präzise, neutraler Hintergrund |
-| `directory-tree.jpg` | Verzeichnisbaum-Struktur | Baumdiagramm: Root (/) an der Spitze, Zweige zu Ordnern (home, usr, etc.), Unterordner, Dateien als Blätter, hierarchisch, clean, schwarz-weiß oder minimalistisch |
-| `backup-disaster.jpg` | Festplatten-Crash / Ransomware | Kaputte Festplatte (physisch beschädigt, Kratzer auf Platter) ODER Bildschirm mit Ransomware-Warnung ("Your files are encrypted"), dramatisch, Warnsignal |
-| `bit-rot.jpg` | Daten-Degradation über Zeit | Abstraktes Bild: Binärcode oder Pixel, die sich auflösen/verfallen, visuelle Metapher für Datenverlust, glitch-artig, beunruhigend |
-| `lto-tape.jpg` | LTO-Kassette + Laufwerk | LTO-Ultrium-Kassette (schwarz, kompakt, Label sichtbar) neben oder in LTO-Bandlaufwerk (Rack-Mount), professionelle Rechenzentrum-Ästhetik |
-| `m-disc.jpg` | M-DISC Blu-ray | M-DISC Blu-ray-Disc (mit "M-DISC"-Logo auf Disc oder Verpackung), Nahaufnahme, metallisch glänzend, hochwertig |
-| `dna-helix.jpg` | DNA-Storage Konzept | DNA-Doppelhelix mit überlagerten Binärcode (0 und 1) oder Daten-Symbolen, futuristisch, wissenschaftlich, blau-grüne Farbpalette, Sci-Fi-ästhetisch |
-
---
-
-## **Woche 6: Schnittstellen (Hardware)**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `cable-mess.jpg` | Kabelsalat / Anschluss-Chaos | Haufen verschiedener Kabel (USB-A, USB-C, HDMI, DisplayPort, Lightning, Ethernet), durcheinander, chaotisch, auf Schreibtisch oder weiß, frustrierend |
-| `pc-back-1990s.jpg` | PC-Rückseite 1990er | Rückseite eines PCs aus den 90ern: VGA, PS/2 (lila/grün), Seriell (COM), Parallel (LPT), SCSI, viele verschiedene Ports, retro, nostalgisch, beige Gehäuse |
-| `usb-c-cables.jpg` | Identische USB-C-Kabel | Mehrere USB-C-Kabel (3-5), die identisch aussehen, aber mit Fragezeichen oder Labels ("USB 2.0?", "USB 4?", "Thunderbolt?"), Verwirrung symbolisierend |
-| `thunderbolt-logo.jpg` | Thunderbolt-Logo | Thunderbolt-Logo (Blitz-Symbol, schwarz oder weiß), offizielles Intel-Branding, clean, auf transparentem Hintergrund |
-| `hdmi-cable.jpg` | HDMI-Kabel + Stecker | HDMI-Kabel mit Stecker (Typ A, Standard), Nahaufnahme des Pin-Layouts, schwarz, auf weißem Hintergrund, technisch-präzise |
-| `displayport-cable.jpg` | DisplayPort-Kabel + Stecker | DisplayPort-Kabel mit Stecker (charakteristische asymmetrische Form, Verriegelung sichtbar), schwarz, technisch |
-| `hdcp-warning.jpg` | HDCP-Fehler Bildschirm | Schwarzer Bildschirm oder blauer Error-Screen mit Text "HDCP Error" oder "HDCP-Handshake fehlgeschlagen", frustrierend, technischer Fehler |
-| `ethernet-cable.jpg` | Ethernet-Kabel (RJ45) | Cat6 Ethernet-Kabel mit RJ45-Stecker, Nahaufnahme der 8 Pins (farbcodiert), blau oder grau, technisch |
-| `vintage-ports.jpg` | Alte Anschlüsse (Nostalgie) | Collage: VGA-Port (blau, 15-Pin), PS/2 (lila/grün, rund), Seriell (DB9), Parallel (DB25), retro, beige/grau, Museums-Qualität |
-
---
-
-## **Woche 7: Distribution (CDN, P2P, Streaming)**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `sneakernet-truck.jpg` | LKW voller Festplatten | LKW geladen mit Servern oder Festplatten-Paletten, "Sneakernet"-Konzept, humorvoll-dokumentarisch, logistisch, Lagerhalle oder Straße |
-| `aws-snowmobile.jpg` | AWS Snowmobile | AWS Snowmobile (45-Fuß-Container auf LKW), weiß mit AWS-Logo, dramatisch, Rechenzentrum im Hintergrund, offizielles AWS-Pressefoto-Stil |
-| `cd-dvd-bluray.jpg` | Optische Medien Evolution | Drei Discs nebeneinander: CD (compact, silber), DVD (ähnlich, aber Label), Blu-ray (blau-schimmernd), Evolution, zeitlich geordnet |
-| `server-overload.jpg` | Server unter Last (Hug of Death) | Server-Racks mit roten Warnlichtern oder Error-Screens, Rauch/Hitze-Effekt (metaphorisch), Überlastung, dramatisch-technisch |
-| `cdn-map.jpg` | CDN-Knoten Weltkarte | Weltkarte mit leuchtenden Punkten (Points of Presence), Linien verbinden Punkte (Netzwerk), blau-violett, futuristisch, globale Infrastruktur |
-| `netflix-openconnect.jpg` | Netflix Open Connect Appliance | Netflix Open Connect Server-Appliance (schwarzes Rack-Mount-Gerät, Netflix-Logo), professionell, Rechenzentrum-Setting |
-| `p2p-network.jpg` | P2P-Netzwerk Diagramm | Netzwerk-Diagramm: Viele Knoten (Peers) verbunden, keine zentrale Hierarchie, dezentral, organisch, Linien zwischen Knoten, technisch-didaktisch |
-| `bittorrent-swarm.jpg` | BitTorrent-Swarm Visualisierung | Visualisierung: Zentrale Datei (Torrent), umgeben von vielen Peers (kleine Kreise), Pfeile zeigen Datenfluss (Chunks), dynamisch, farbcodiert |
-| `pirate-bay-logo.jpg` | The Pirate Bay Logo | The Pirate Bay Schiffs-Logo (Piratenschiff, schwarz-weiß oder farbig), ikonisch, kontroverser historischer Kontext |
-| `ipfs-logo.jpg` | IPFS Logo | IPFS-Logo (Würfel-Design mit Verbindungen), blau-weiß, geometrisch, modern, offizielles Protocol Labs-Branding |
-| `streaming-hls.jpg` | Streaming-Pipeline (HLS/DASH) | Diagramm: Encoder → Segmente (2-10s) → CDN → Player, verschiedene Qualitäten parallel (240p-4K), technisch, Flowchart-Stil |
-
---
-
-## **Woche 8: APIs & Software-Schnittstellen**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `api-diagram.jpg` | API-Kommunikation | Diagramm: Zwei Boxen (App A, App B) verbunden durch "API" (Pfeile bidirektional), zeigt Request/Response, clean, technisch-minimalistisch |
-| `http-request-response.jpg` | HTTP Request/Response-Zyklus | Diagramm: Client (Browser-Symbol) → Request (Pfeil mit "GET /page") → Server (Server-Symbol) → Response (Pfeil mit "200 OK + HTML") → Client, Zyklus, didaktisch |
-| `rest-api.jpg` | REST-API Struktur | Diagramm: URLs als Ressourcen (`/users`, `/posts`), HTTP-Methods (GET, POST, PUT, DELETE) daneben, tabellarisch oder Baum-Struktur, technisch |
-| `graphql-logo.jpg` | GraphQL Logo | GraphQL-Logo (rosa/magenta Raute mit "GraphQL"-Text), offizielles Branding, clean, auf transparentem Hintergrund |
-| `websocket-diagram.jpg` | WebSocket bidirektionale Verbindung | Diagramm: Client ↔ Server (bidirektionale Pfeile), "Persistent Connection", im Gegensatz zu HTTP (unidirektionale Pfeile), technisch-vergleichend |
-| `grpc-logo.jpg` | gRPC Logo | gRPC-Logo (blau-grünes "gRPC"-Design), offizielles Google/CNCF-Branding, modern |
-
---
-
-## **Woche 9: Metadaten & Interoperabilität**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `exif-gps.jpg` | EXIF-Daten mit GPS | Foto mit eingeblendeten EXIF-Daten als Overlay: GPS-Koordinaten, Kamera-Modell, Datum, Kartenpunkt zeigt Standort, Privacy-Warnung, technisch-dokumentarisch |
-| `mcafee-exif-fail.jpg` | John McAfee Guatemala-Story | Foto von John McAfee (2012, Guatemala, mit Hund) ODER Screenshot des Vice-Artikels mit Foto + GPS-Koordinaten eingeblendet, historisch-dokumentarisch |
-| `id3-tag-editor.jpg` | ID3-Tag-Editor Screenshot | Screenshot eines ID3-Editors (z.B. Kid3, mp3tag), zeigt MP3-Datei mit Feldern (Artist, Album, Year, Genre, Cover-Art), übersichtlich |
-| `musicbrainz-logo.jpg` | MusicBrainz Logo | MusicBrainz-Logo (stilisierte Note oder "MB"-Buchstaben), offizielles Branding, open-source-freundlich |
-| `pdf-metadata-leak.jpg` | PDF-Metadaten Analyse | Screenshot: PDF-Metadaten-Fenster zeigt versteckte Infos (Autor, Firma, Software, Änderungsdatum), Warnung, forensisch |
-| `binary.png` | Binäre Limitationen | Binärcode (0 und 1) als Hintergrund, eventuell mit Warnung oder Fragezeichen, technisch-abstrakt, schwarz-weiß oder grün-schwarz (Matrix-Stil) |
-
---
-
-## **Woche 10: Zukunft & Synthese**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `futuristic-datacenter.jpg` | Futuristisches Rechenzentrum | Modernes Rechenzentrum mit Server-Racks, blaue LED-Beleuchtung, alternativ: DNA-Helix überlagert auf Servern, Sci-Fi-ästhetisch, sauber, high-tech |
-| `jpeg-xl-logo.jpg` | JPEG XL Logo | JPEG XL Logo (stilisiertes "JXL" oder "JPEG XL"), modern, clean, offizielles Branding |
-| `dna-storage-concept.jpg` | DNA-Storage Visualisierung | DNA-Doppelhelix mit Daten-Symbolen, Petrischale mit DNA-Proben, Laborumgebung, futuristisch-wissenschaftlich, blau-grün |
-| `science.jpg` | Wissenschaft/Forschung (Allgemein) | Wissenschaftliche Visualisierung: Labor, Mikroskop, DNA-Sequenzierung, oder abstrakte Wissenschafts-Grafik, professionell, blau-weiß |
-
---
-
-## **Zusammenfassung: Asset-Kategorien**
-
-| Kategorie | Anzahl | Notizen |
-|-----------|--------|---------|
-| **Technische Diagramme** | 15+ | Flow-Charts, Netzwerk-Topologien, Container/Codec-Visualisierungen |
-| **Screenshots/UIs** | 10+ | Hex-Editor, Napster, ID3-Editor, Netflix, Browser DevTools |
-| **Logos** | 8+ | Thunderbolt, HDMI, GraphQL, gRPC, IPFS, AV1, MusicBrainz, JPEG XL |
-| **Hardware-Fotos** | 12+ | HDDs, SSDs, Kabel, Ports, LTO-Tapes, M-DISC |
-| **Vergleiche (Vorher/Nachher)** | 5+ | JPEG-Artefakte, Instagram-Quality, HDD vs. SSD, Kassette vs. iPod |
-| **Historische/Nostalgie** | 6+ | 90er-PC, ASCII-Tabelle, Napster, WordPerfect, John McAfee |
-| **Futuristisch/Konzeptuell** | 5+ | DNA-Storage, Quantum, Futuristic Datacenter, AI-Compression |
-
---
-
-## **Generierungs-Tipps für AI-Tools (Midjourney, DALL-E, Stable Diffusion)**
-
-**Allgemeine Prompts-Zusätze:**
- Für **technische Diagramme**: `"technical diagram, clean lines, minimal colors, educational, isometric view, white background"`
- Für **Screenshots**: `"UI screenshot, realistic software interface, high resolution, modern design"`
- Für **Fotos/Realismus**: `"product photography, studio lighting, white background, high detail, professional"`
- Für **Futuristisch**: `"futuristic, sci-fi, blue-violet color palette, glowing, high-tech, cinematic lighting"`
- Für **Retro/Nostalgie**: `"1990s aesthetic, beige computer, CRT monitor, retro technology, nostalgic"`
-
-**Negative Prompts (was vermeiden):**
- `"blurry, text artifacts, watermark, low quality, distorted, unrealistic proportions"`
-
@@ -5,7 +5,7 @@ paginate: true
 backgroundColor: #fff
 header: "Grundlagen IT- und Internettechnik"
 footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
-title: "Tag 1: Geschichte, Grundlagen & HTML"
+title: "Termin 1: Geschichte, Grundlagen & HTML"
 ---

 <style>
@@ -19,9 +19,9 @@ h2 {

 <!-- _class: invert -->
 <!-- _header: '' -->
-<!-- _footer: '' -->
+<!-- _backgroundColor: black -->

-![bg fit opacity:0.4](./assets/digital-landscape.png)
+![bg fit opacity:0.4](./assets/background-termin-1.png)

 # Grundlagen IT- und Internettechnik

@@ -35,7 +35,7 @@ Hochschule der Medien Stuttgart

 <!-- _class: lead -->

-# Tag 1 – 20.12.2025
+# Termin 1 – 20.12.2025
 ## Geschichte, Grundlagen & HTML

 ---
@@ -47,7 +47,7 @@ Hochschule der Medien Stuttgart
 - Softwareentwickler & IT-Berater
 - Schwerpunkte: Cloud, AI, Web-Technologien, Systemarchitektur, Open Source
 - Hintergrund: Philosophie & Informatik
- Kontakt: michael.czechowski@lehre.dhbw-stuttgart.de
+- Kontakt: mail@librete.ch

 <!--
 Kurze Vorstellung
@@ -107,61 +107,10 @@ MedienStudentInnen, nicht InformatikerInnen
 <!-- _header: '' -->
 <!-- _footer: '' -->

-![bg](./assets/torches-of-freedom.jpg)
+![bg fit](./assets/hollerith-machine-2.jpg)

 <!--
-Torches of Freedom, 1929
-Edward Bernays, Neffe von Sigmund Freud
-->
-
---
-
-# Torches of Freedom (1929)
-
-**Edward Bernays** – Neffe von Sigmund Freud
-
-**Problem:** Frauen rauchen nicht in der Öffentlichkeit (Tabu)
-**Auftraggeber:** American Tobacco Company
-
-**Lösung:** Suffragetten-Marsch, Osterparade NYC
-"Torches of Freedom" – Zigaretten als Freiheitssymbol
-
-**Ergebnis:** Umsatz verdoppelt, Tabu gebrochen
-
-<!--
-Bernays gilt als "Vater der PR"
-Manipulation durch Medien und Symbolik
-Verbindung Psychologie + Massenmedien
-Warum erzähle ich das? → Technik formt Gesellschaft, Gesellschaft formt Technik
-->
-
---
-
-# Warum diese Geschichte?
-
-**Technik ist nie neutral.**
-
- Lochkarten zählten Menschen... und sortieren sie
- Computer berechneten Atombomben... und verbinden uns
- Das Internet demokratisiert Wissen... und verbreitet Desinformation
-
-**MedienwirtschaftlerInnen** müssen verstehen:
-Technologie ist ein Werkzeug – **wofür** es genutzt wird, entscheiden Menschen.
-
-<!--
-Kritisches Denken über Technologie
-Medienkompetenz braucht technisches Verständnis
-->
-
---
-
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg](./assets/hollerith-machine.jpg)
-
-<!--
-Hollerith-Lochkartenmaschine, ca. 1890
+Hollerith-Lochkartenmaschine, ca. 1910
 US Census Bureau
 -->

@@ -186,6 +135,30 @@ Eine Karte = ein Datensatz (eine Person)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/hollerith-machine.jpg)
+
+<!--
+Hollerith-Lochkartenmaschine, ca. 1908
+US Census Bureau
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/hollerith-machine-3.jpg)
+
+<!--
+Hollerith-Lochkartenmaschine, ca. 1940
+US Census Bureau
+-->
+
+---
+
 # Die Geburt von IBM

 **1896:** Hollerith gründet "Tabulating Machine Company"
@@ -208,7 +181,7 @@ Heute: IBM als Cloud- und AI-Unternehmen (Watson, Red Hat)
 <!-- _header: '' -->
 <!-- _footer: '' -->

-![bg](./assets/ibm-nazi-hollerith.jpg)
+![bg fit](./assets/dehomag-hollerith.webp)

 <!--
 Hollerith-Maschinen im Dritten Reich
@@ -265,7 +238,7 @@ Verantwortung von TechnikerInnen und MedienarbeiterInnen
 <!-- _header: '' -->
 <!-- _footer: '' -->

-![bg fit opacity:0.4](./assets/oppenheimer-poster.jpg)
+![bg fit opacity:0.4](./assets/oppenheimer.png)

 <!--
 Oppenheimer-Filmplakat (2023)
@@ -294,7 +267,7 @@ Von Neumann kam 1943 als Berater

 ---

-![bg right:40%](./assets/john-von-neumann.jpg)
+![bg right:40%](./assets/john-von-neumann.png)

 # John von Neumann (1903–1957)

@@ -342,7 +315,7 @@ ENIAC-Projekt in Philadelphia sollte helfen
 <!-- _header: '' -->
 <!-- _footer: '' -->

-![bg](./assets/eniac.jpg)
+![bg](./assets/eniac.avif)

 <!--
 ENIAC (1945)
@@ -445,13 +418,16 @@ Speicher enthält beides: Was zu tun ist (Programm) + Womit (Daten)
 - Kein Multitasking
 - Keine Updates

-**JEDES digitale Gerät** basiert auf diesem Prinzip:
-Laptop, Smartphone, Router, Smartwatch, Auto-Computer...
+**Die meisten Computer** basieren auf diesem Prinzip:
+Laptop, Smartphone, Server, Spielkonsole...
+
+**Ausnahme:** Mikrocontroller & DSPs nutzen oft die **Harvard-Architektur**
+(separate Speicher für Code und Daten → schneller für Echtzeitanwendungen)

 <!--
-Alternativen existieren (Harvard-Architektur für Embedded)
-Aber: Grundkonzept gilt überall
-Deshalb wichtig zu verstehen
+Harvard-Architektur: AVR, PIC, viele ARM-Prozessoren
+Modified Harvard in modernen CPUs (separate Caches)
+Für Medienwirtschaft: Von-Neumann-Konzept reicht
 -->

 ---
@@ -485,7 +461,7 @@ Paul Baran (RAND Corp): Packet Switching
 | Jahr | Meilenstein |
 |------|-------------|
 | **1966** | ARPANET-Projekt startet |
-| **1969** | Erste Verbindung: UCLA ↔ Stanford |
+| **1969** | Erste Verbindung: UCLA <-> Stanford |
 | **1974** | TCP/IP-Protokoll entwickelt |
 | **1983** | ARPANET wechselt zu TCP/IP |
 | **1989** | Tim Berners-Lee erfindet das WWW |
@@ -774,23 +750,21 @@ a = anchor (Anker)

 # Hands-On: Werkzeuge einrichten

-**Option 1: Ganz einfach**
- Texteditor (Notepad, TextEdit, gedit)
- Datei speichern als `index.html`
- Im Browser öffnen (Firefox empfohlen)
+**Option 1: Texteditor + Browser**
+- Notepad, TextEdit oder gedit
+- Speichern als `index.html` → Im Browser öffnen

-**Option 2: Komfortabler**
- VS Code (kostenlos): https://code.visualstudio.com
+**Option 2: VS Code** (empfohlen)
+- code.visualstudio.com
 - Extension: "Live Server"

-**Option 3: Ohne Installation**
- https://stackblitz.com
- https://codepen.io
+**Option 3: Online-Editoren**
+- stackblitz.com
+- codepen.io

 <!--
 Erstmal ohne IDE starten!
 Verstehen: HTML ist nur Text
-Browser interpretiert den Text
 -->

 ---
@@ -954,17 +928,15 @@ Antworten sammeln: Brief, Telefon, Fax, Funk...

 # Kommunikationsarten

-| Kategorie | Denkweise |
-|-----------|-----------|
-| **Synchron** | "Ich sende und warte auf Antwort" |
-| **Asynchron** | "Ich sende – du antwortest später" |
-| **Verbindungsorientiert** | "Wir bauen erst eine Leitung auf" |
-| **Verbindungslos** | "Ich schicke Pakete los – jedes für sich" |
+| Kategorie | Beispiel |
+|-----------|----------|
+| **Synchron** | Telefonat, Video-Call |
+| **Asynchron** | E-Mail, Brief, SMS |
+| **Verbindungsorientiert** | Telefon (Leitung aufbauen) |
+| **Verbindungslos** | Brief, Postkarte |

 <!--
-Telefon = synchron + verbindungsorientiert
-Brief = asynchron + verbindungslos
-Internet nutzt beides!
+Internet nutzt beides: TCP = verbindungsorientiert, UDP = verbindungslos
 -->

 ---
@@ -1127,22 +1099,13 @@ HTTPS = HTTP + TLS-Verschlüsselung

 # Hands-On: Netzwerk erkunden (20 Min)

-**Öffnet das Terminal:**
- Windows: PowerShell
- Mac/Linux: Terminal
+**Terminal öffnen:** PowerShell (Win) / Terminal (Mac/Linux)

-**Befehle ausprobieren:**
 ```bash
-# Eure IP-Adresse
-ipconfig    # Windows
-ifconfig    # Mac/Linux
-
-# Ping (erreichbar?)
-ping google.de
-
-# Weg zum Server
-tracert google.de    # Windows
-traceroute google.de # Mac/Linux
+ipconfig          # IP-Adresse (Win)
+ifconfig          # IP-Adresse (Mac/Linux)
+ping google.de    # Erreichbarkeit testen
+tracert google.de # Weg zum Server (Win)
 ```

 ---
@@ -1231,15 +1194,11 @@ Validierung kostenlos

 **Baut eine "Über mich"-Seite mit:**

-1. **Semantischem Grundgerüst** (header, nav, main, footer)
-2. **Navigation** mit Links zu Abschnitten
-3. **Über-mich-Abschnitt** mit Bild
-4. **Hobbies-Liste**
-5. **Kontaktformular** mit:
-   - Name (required)
-   - E-Mail (type="email")
-   - Nachricht (textarea)
-   - Absenden-Button
+1. Semantisches Grundgerüst (header, nav, main, footer)
+2. Navigation mit Links zu Abschnitten
+3. Über-mich-Abschnitt mit Bild
+4. Hobbies-Liste
+5. Kontaktformular (Name, E-Mail, Nachricht, Button)

 **Ziel:** Vollständige, valide HTML-Seite

@@ -1266,12 +1225,11 @@ Validierung kostenlos

 **Nächster Termin:** 10.01.2026 – CSS & Netzwerke

-**Kontakt:** michael.czechowski@lehre.dhbw-stuttgart.de
-**Repository:** git.librete.ch/hdm/223015b
+**Kontakt:** mail@librete.ch

 ---

-# Zusammenfassung Tag 1
+# Zusammenfassung Termin 1

 **Geschichte:**
 - Hollerith → IBM → Nazi-Deutschland → Verantwortung
@@ -1283,10 +1241,14 @@ Validierung kostenlos
 - Von-Neumann-Architektur
 - IP-Adressen, Ports, HTTP

-**Praxis:**
- HTML-Grundstruktur
- Semantische Tags
- Native HTML-Features
+---
+
+# Zusammenfassung Termin 1 (Praxis)
+
+**Was wir gemacht haben:**
+- HTML-Grundstruktur erstellt
+- Semantische Tags angewendet
+- Native HTML-Features genutzt

 ---

@@ -5,7 +5,7 @@ paginate: true
 backgroundColor: #fff
 header: "Grundlagen IT- und Internettechnik"
 footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
-title: "Tag 2: Netzwerke, Protokolle & CSS"
+title: "Termin 2: Netzwerke, Protokolle & CSS"
 ---

 <style>
@@ -19,9 +19,9 @@ h2 {

 <!-- _class: invert -->
 <!-- _header: '' -->
-<!-- _footer: '' -->
+<!-- _backgroundColor: black -->

-![bg fit opacity:0.4](./assets/network-cables.png)
+![bg fit opacity:0.4](./assets/background-termin-2.png)

 # Grundlagen IT- und Internettechnik

@@ -35,12 +35,12 @@ Hochschule der Medien Stuttgart

 <!-- _class: lead -->

-# Tag 2 – 10.01.2026
+# Termin 2 – 10.01.2026
 ## Netzwerke, Protokolle & CSS

 ---

-# Rückblick Tag 1
+# Rückblick Termin 1

 **Was wir gelernt haben:**

@@ -285,7 +285,7 @@ Ports = "Türnummern" auf Server
 # Das Problem

 **Menschen:** `www.hdm-stuttgart.de`
-**Computer:** `141.62.1.53`
+**Computer:** `212.132.79.37`

 **DNS** = Domain Name System
 → Übersetzt Namen in IP-Adressen
@@ -327,9 +327,9 @@ FQDN = Fully Qualified Domain Name
 1. Browser fragt lokalen DNS-Resolver
 2. Resolver fragt Root-Server → ".de ist bei..."
 3. Resolver fragt .de-Server → "hdm-stuttgart bei..."
-4. Resolver fragt hdm-Server → "www = 141.62.1.53"
+4. Resolver fragt hdm-Server → "www = 212.132.79.37"
 5. Resolver cached Antwort
-6. Browser verbindet zu 141.62.1.53
+6. Browser verbindet zu 212.132.79.37
 ```

 **Caching:** Antworten werden gespeichert
@@ -347,7 +347,7 @@ TTL = Time To Live (wie lange cachen)

 | Typ | Bedeutung | Beispiel |
 |-----|-----------|----------|
-| **A** | IPv4-Adresse | `www → 141.62.1.53` |
+| **A** | IPv4-Adresse | `www → 212.132.79.37` |
 | **AAAA** | IPv6-Adresse | `www → 2001:db8::1` |
 | **CNAME** | Alias | `blog → www.example.com` |
 | **MX** | Mail-Server | `@ → mail.example.com` |
@@ -427,27 +427,15 @@ Body kommt nach leerem Zeile (bei POST)
 HTTP/1.1 200 OK
 Content-Type: text/html; charset=UTF-8
 Content-Length: 1234
-Date: Fri, 10 Jan 2026 10:00:00 GMT

 <!DOCTYPE html>
-<html>
-...
-</html>
+<html>...</html>
 ```

-**Status-Codes:**
-
-| Code | Bedeutung |
-|------|-----------|
-| **2xx** | Erfolg (200 OK, 201 Created) |
-| **3xx** | Umleitung (301 Moved, 302 Found) |
-| **4xx** | Client-Fehler (404 Not Found, 403 Forbidden) |
-| **5xx** | Server-Fehler (500 Internal Error) |
+**Status-Codes:** 2xx Erfolg · 3xx Umleitung · 4xx Client-Fehler · 5xx Server-Fehler

 <!--
-Status-Codes merken!
-404 = Seite nicht gefunden
-500 = Server-Problem
+200 OK, 404 Not Found, 500 Internal Error
 -->

 ---
@@ -475,20 +463,14 @@ POST = nicht idempotent

 # Hands-On: HTTP beobachten (20 Min)

-**Browser DevTools öffnen:**
- Windows/Linux: `F12` oder `Strg+Shift+I`
- Mac: `Cmd+Option+I`
+**DevTools öffnen:** `F12` (Win/Linux) · `Cmd+Option+I` (Mac)

 **Tab "Netzwerk" (Network):**
+1. Beliebige Webseite öffnen
+2. Requests beobachten
+3. Auf Request klicken → Headers & Response analysieren

-1. Öffnet eine beliebige Webseite
-2. Beobachtet die Requests
-3. Klickt auf einen Request
-4. Analysiert Headers und Response
-
-**Fragen:**
- Wie viele Requests für eine Seite?
- Welche Dateitypen werden geladen?
+**Beobachtet:** Anzahl Requests, Dateitypen (JS, CSS, Bilder...)

 ---

@@ -531,30 +513,23 @@ Separation of Concerns

 # CSS einbinden

-**Option 1: Externe Datei (empfohlen!)**
+**Option 1: Externe Datei** (empfohlen!)
 ```html
-<head>
 <link rel="stylesheet" href="style.css">
-</head>
 ```

-**Option 2: Im `<style>`-Tag**
+**Option 2: Style-Tag**
 ```html
-<head>
-    <style>
-        p { color: blue; }
-    </style>
-</head>
+<style>p { color: blue; }</style>
 ```

-**Option 3: Inline (vermeiden!)**
+**Option 3: Inline** (vermeiden!)
 ```html
-<p style="color: blue;">Text</p>
+<p style="color: blue;">...</p>
 ```

 <!--
 Externe Datei = wiederverwendbar, cachebar
-Inline nur für Debugging/Ausnahmen
 -->

 ---
@@ -830,19 +805,14 @@ vw/vh = Viewport (sichtbarer Bereich)

 **Erstellt `style.css` für eure HTML-Seite:**

-1. Verlinkt die CSS-Datei im `<head>`
-2. Setzt eine Grundschrift:
-   ```css
-   body {
-       font-family: system-ui, sans-serif;
-       line-height: 1.6;
-       color: #333;
-   }
-   ```
-3. Stylt Überschriften, Links, Listen
-4. Experimentiert mit Farben und Abständen
+1. CSS-Datei im `<head>` verlinken
+2. Grundschrift setzen (`font-family`, `line-height`, `color`)
+3. Überschriften, Links, Listen stylen
+4. Mit Farben und Abständen experimentieren

-**Ressource:** https://codecrispi.es/
+**Ressource:** https://codescripsi.es/
+- **Basics:** Alle machen
+- **Advanced:** Wer möchte

 ---

@@ -1037,24 +1007,17 @@ Oder gleichmäßig verteilt

 ```css
 /* Zustände */
-a:hover { color: red; }        /* Maus drüber */
-a:active { color: darkred; }   /* Beim Klicken */
-a:visited { color: purple; }   /* Bereits besucht */
-
-/* Formular */
+a:hover { color: red; }
+a:visited { color: purple; }
 input:focus { border-color: blue; }
-input:disabled { opacity: 0.5; }

 /* Struktur */
 li:first-child { font-weight: bold; }
-li:last-child { border: none; }
 li:nth-child(odd) { background: #eee; }
 ```

 <!--
-Pseudo-Klassen = Zustände
-Kein JavaScript nötig!
-nth-child für Zebra-Streifen
+Pseudo-Klassen = Zustände, kein JavaScript nötig!
 -->

 ---
@@ -1062,26 +1025,18 @@ nth-child für Zebra-Streifen
 # Pseudo-Elemente

 ```css
-/* Vor dem Inhalt */
 .required::before {
    content: "* ";
    color: red;
 }

-/* Nach dem Inhalt */
-blockquote::after {
-    content: " – Unbekannt";
-    font-style: italic;
-}
-
-/* Erste Zeile/Buchstabe */
-p::first-line { font-weight: bold; }
 p::first-letter { font-size: 2em; }
+p::first-line { font-weight: bold; }
 ```

+**Unterschied:** `:` = Pseudo-Klasse · `::` = Pseudo-Element
+
 <!--
-:: = Pseudo-Element
-: = Pseudo-Klasse
 content nur bei ::before/::after
 -->

@@ -1089,34 +1044,22 @@ content nur bei ::before/::after

 # Responsive Design

-**Media Queries: CSS je nach Bildschirmgröße**
+**Media Queries:** CSS je nach Bildschirmgröße

 ```css
-/* Standard (Mobile First) */
-.container {
-    padding: 1rem;
-}
+/* Mobile First: Standard */
+.container { padding: 1rem; }

-/* Ab 768px Breite (Tablet) */
+/* Ab 768px (Tablet) */
@media (min-width: 768px) {
-    .container {
-        padding: 2rem;
-        max-width: 720px;
-    }
-}
-
-/* Ab 1024px Breite (Desktop) */
-@media (min-width: 1024px) {
-    .container {
-        max-width: 960px;
-    }
+    .container { padding: 2rem; max-width: 720px; }
 }
 ```

+**Breakpoints:** 768px (Tablet) · 1024px (Desktop) · 1280px (Large)
+
 <!--
-Mobile First = Standard für klein
-Dann größere Screens überschreiben
-Breakpoints: 768px, 1024px, 1280px typisch
+Mobile First = Standard für klein, dann größere überschreiben
 -->

 ---
@@ -1352,7 +1295,7 @@ Variablen machen's einfach
 4. Mindestens ein Kontaktformular

 **Ressourcen:**
- CSS lernen: https://codecrispi.es/
+- CSS lernen: https://codescripsi.es/
 - Flexbox: https://flexboxfroggy.com/
 - Grid: https://cssgridgarden.com/

@@ -1364,12 +1307,11 @@ Variablen machen's einfach

 **Nächster Termin:** 24.01.2026 – JavaScript

-**Kontakt:** michael.czechowski@lehre.dhbw-stuttgart.de
-**Repository:** git.librete.ch/hdm/223015b
+**Kontakt:** mail@librete.ch

 ---

-# Zusammenfassung Tag 2
+# Zusammenfassung Termin 2

 **Netzwerke:**
 - OSI-Modell (7 Schichten) vs. TCP/IP (4 Schichten)
@@ -5,7 +5,7 @@ paginate: true
 backgroundColor: #fff
 header: "Grundlagen IT- und Internettechnik"
 footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
-title: "Tag 3: Interaktivität & JavaScript"
+title: "Termin 3: Interaktivität & JavaScript"
 ---

 <style>
@@ -19,9 +19,9 @@ h2 {

 <!-- _class: invert -->
 <!-- _header: '' -->
-<!-- _footer: '' -->
+<!-- _backgroundColor: black -->

-![bg fit opacity:0.4](./assets/javascript-code.png)
+![bg fit opacity:0.4](./assets/background-termin-3.png)

 # Grundlagen IT- und Internettechnik

@@ -35,15 +35,15 @@ Hochschule der Medien Stuttgart

 <!-- _class: lead -->

-# Tag 3 – 24.01.2026
+# Termin 3 – 24.01.2026
 ## Interaktivität & JavaScript

 ---

 # Rückblick

-**Tag 1:** Geschichte, Von-Neumann, HTML
-**Tag 2:** Netzwerke, DNS, HTTP, CSS
+**Termin 1:** Geschichte, Von-Neumann, HTML
+**Termin 2:** Netzwerke, DNS, HTTP, CSS

 **Eure Portfolio-Seiten?**
 - Wer hat mehrere Seiten?
@@ -169,11 +169,11 @@ Fehler werden hier auch angezeigt

 ```javascript
 // Modern (empfohlen)
-let alter = 25;            // Kann geändert werden
+let age = 25;              // Kann geändert werden
 const name = "Max";        // Konstante (nicht änderbar)

 // Alt (vermeiden!)
-var stadt = "Stuttgart";   // Problematisches Scoping
+var city = "Stuttgart";    // Problematisches Scoping
 ```

 **Regeln:**
@@ -193,27 +193,26 @@ var = alte Syntax, hat Scoping-Probleme

 ```javascript
 // String (Text)
-const text = "Hallo";
-const text2 = 'Welt';
-const text3 = `Hallo ${text2}`;  // Template Literal
+const text = "Hello";
+const text2 = 'World';
+const text3 = `Hello ${text2}`;  // Template Literal

 // Number (Zahl)
-const ganzzahl = 42;
-const kommazahl = 3.14;
+const integer = 42;
+const decimal = 3.14;

 // Boolean (Wahrheitswert)
-const istWahr = true;
-const istFalsch = false;
+const isTrue = true;
+const isFalse = false;

 // Undefined & Null
-let unbekannt;           // undefined
-const nichts = null;     // null (bewusst leer)
+let unknown;             // undefined
+const nothing = null;    // null (bewusst leer)
 ```

 <!--
 typeof prüft den Typ
 Template Literals mit Backticks!
-Keine Unterscheidung int/float
 -->

 ---
@@ -221,27 +220,22 @@ Keine Unterscheidung int/float
 # Arrays: Listen

 ```javascript
-const farben = ["rot", "grün", "blau"];
+const colors = ["red", "green", "blue"];

 // Zugriff (0-basiert!)
-console.log(farben[0]);    // "rot"
-console.log(farben[2]);    // "blau"
+console.log(colors[0]);    // "red"
+console.log(colors[2]);    // "blue"

 // Länge
-console.log(farben.length); // 3
+console.log(colors.length); // 3

-// Hinzufügen
-farben.push("gelb");       // Am Ende
-farben.unshift("weiß");    // Am Anfang
-
-// Entfernen
-farben.pop();              // Letztes Element
-farben.shift();            // Erstes Element
+// Hinzufügen/Entfernen
+colors.push("yellow");     // Am Ende hinzufügen
+colors.pop();              // Letztes entfernen
 ```

 <!--
 Index startet bei 0!
-farben[3] = viertes Element
 Arrays sind veränderbar auch bei const
 -->

@@ -251,27 +245,23 @@ Arrays sind veränderbar auch bei const

 ```javascript
 const person = {
-    vorname: "Max",
-    nachname: "Mustermann",
-    alter: 25,
-    hobbies: ["Lesen", "Sport"]
+    firstName: "Max",
+    lastName: "Smith",
+    age: 25,
+    hobbies: ["Reading", "Sports"]
 };

 // Zugriff
-console.log(person.vorname);      // "Max"
-console.log(person["nachname"]);  // "Mustermann"
+console.log(person.firstName);     // "Max"
+console.log(person["lastName"]);   // "Smith"

-// Ändern
-person.alter = 26;
-
-// Hinzufügen
-person.beruf = "Student";
+// Ändern/Hinzufügen
+person.age = 26;
+person.job = "Student";
 ```

 <!--
-Key-Value-Paare
-Punkt-Notation oder Bracket-Notation
-Verschachtelt möglich
+Key-Value-Paare, Punkt- oder Bracket-Notation
 -->

 ---
@@ -313,15 +303,15 @@ true || false  // true (ODER)

 1. Erstelle Variablen für dich:
   ```javascript
-   const name = "Dein Name";
-   let alter = 20;
+   const name = "Your Name";
+   let age = 20;
   const hobbies = ["Hobby1", "Hobby2"];
   ```

 2. Gib sie aus:
   ```javascript
-   console.log(`Ich bin ${name}, ${alter} Jahre alt.`);
-   console.log("Meine Hobbies:", hobbies);
+   console.log(`I am ${name}, ${age} years old.`);
+   console.log("My hobbies:", hobbies);
   ```

 3. Erstelle ein `person`-Objekt und greife auf Properties zu
@@ -332,28 +322,26 @@ true || false  // true (ODER)

 ```javascript
 // Funktion definieren
-function grüßen(name) {
-    return `Hallo ${name}!`;
+function greet(name) {
+    return `Hello ${name}!`;
 }

 // Funktion aufrufen
-const nachricht = grüßen("Max");
-console.log(nachricht);  // "Hallo Max!"
+const message = greet("Max");
+console.log(message);  // "Hello Max!"

 // Arrow Function (modern)
-const addieren = (a, b) => {
+const add = (a, b) => {
    return a + b;
 };

 // Kurzform (bei einem Ausdruck)
-const verdoppeln = x => x * 2;
+const double = x => x * 2;
 ```

 <!--
 function = klassische Syntax
 Arrow Functions = modern, kürzer
-Parameter = Eingabe
-return = Rückgabe
 -->

 ---
@@ -361,24 +349,23 @@ return = Rückgabe
 # Kontrollstrukturen: if/else

 ```javascript
-const alter = 18;
+const age = 18;

-if (alter >= 18) {
-    console.log("Volljährig");
-} else if (alter >= 16) {
-    console.log("Fast volljährig");
+if (age >= 18) {
+    console.log("Adult");
+} else if (age >= 16) {
+    console.log("Almost adult");
 } else {
-    console.log("Minderjährig");
+    console.log("Minor");
 }

 // Ternärer Operator (Kurzform)
-const status = alter >= 18 ? "Erwachsen" : "Kind";
+const status = age >= 18 ? "Adult" : "Child";
 ```

 <!--
 Bedingung in Klammern
 Code-Block in geschweiften Klammern
-Ternär für einfache Fälle
 -->

 ---
@@ -392,29 +379,17 @@ for (let i = 0; i < 5; i++) {
 }

 // for...of (Arrays)
-const farben = ["rot", "grün", "blau"];
-for (const farbe of farben) {
-    console.log(farbe);
+const colors = ["red", "green", "blue"];
+for (const color of colors) {
+    console.log(color);
 }

 // forEach (Array-Methode)
-farben.forEach(farbe => {
-    console.log(farbe);
-});
-
-// while
-let count = 0;
-while (count < 3) {
-    console.log(count);
-    count++;
-}
+colors.forEach(color => console.log(color));
 ```

 <!--
-for = wenn Anzahl bekannt
-for...of = für Arrays/Iterables
-forEach = Array-Methode
-while = solange Bedingung wahr
+for = Anzahl bekannt, for...of = Arrays, forEach = Array-Methode
 -->

 ---
@@ -422,29 +397,23 @@ while = solange Bedingung wahr
 # Nützliche Array-Methoden

 ```javascript
-const zahlen = [1, 2, 3, 4, 5];
+const numbers = [1, 2, 3, 4, 5];

 // map: Transformieren
-const verdoppelt = zahlen.map(x => x * 2);
-// [2, 4, 6, 8, 10]
+const doubled = numbers.map(x => x * 2);    // [2, 4, 6, 8, 10]

 // filter: Filtern
-const groß = zahlen.filter(x => x > 2);
-// [3, 4, 5]
+const large = numbers.filter(x => x > 2);   // [3, 4, 5]

 // find: Erstes Element finden
-const gefunden = zahlen.find(x => x > 3);
-// 4
+const found = numbers.find(x => x > 3);     // 4

 // reduce: Aggregieren
-const summe = zahlen.reduce((acc, x) => acc + x, 0);
-// 15
+const sum = numbers.reduce((acc, x) => acc + x, 0);  // 15
 ```

 <!--
-Funktionale Programmierung
-Sehr mächtig für Datenverarbeitung
-Originales Array bleibt unverändert
+Funktionale Programmierung, Original-Array bleibt unverändert
 -->

 ---
@@ -455,16 +424,14 @@ Originales Array bleibt unverändert

 1. Funktion die prüft ob Zahl gerade ist:
   ```javascript
-   function istGerade(zahl) {
-       // Dein Code
-   }
+   function isEven(num) { /* your code */ }
   ```

 2. Funktion die Array-Summe berechnet

-3. Schleife die 1-10 ausgibt und "Fizz" für durch 3 teilbare, "Buzz" für durch 5 teilbare Zahlen
+3. FizzBuzz: 1-10 ausgeben, "Fizz" bei /3, "Buzz" bei /5

-**Tipp:** `zahl % 2 === 0` prüft ob gerade
+**Tipp:** `num % 2 === 0` prüft ob gerade

 ---

@@ -800,57 +767,31 @@ State in Klasse gespeichert

 ---

-# Beispiel: Formular-Validierung
-
-```javascript
-const form = document.querySelector("#kontaktForm");
-const emailInput = document.querySelector("#email");
-const errorMessage = document.querySelector("#error");
-
-form.addEventListener("submit", function(event) {
-    const email = emailInput.value;
-    
-    if (!email.includes("@")) {
-        event.preventDefault();
-        errorMessage.textContent = "Bitte gültige E-Mail eingeben!";
-        errorMessage.style.display = "block";
-    }
-});
-
-// Live-Feedback
-emailInput.addEventListener("input", function() {
-    if (emailInput.value.includes("@")) {
-        errorMessage.style.display = "none";
-    }
-});
-```
-
-<!--
-Client-Side Validation
-Zusätzlich zu HTML-Validation
-UX: Sofortiges Feedback
-Server-Validation trotzdem nötig!
-->
-
---
-
 # Hands-On: Interaktive Features (45 Min)

 **Baut in eure Seite ein:**

-1. **Dark Mode Toggle**
+1. **Dark Mode Toggle** – Button toggelt Klasse auf `body`
+2. **Accordion/FAQ** – Klick zeigt/versteckt Antwort
+
+**Tipp:** `classList.toggle()` + CSS `display: none/block`
+
+**Hilfe:** https://codescripsi.es/
+
+<!--
+Ausführlicher:
+1. Dark Mode Toggle
   - Button der Klasse auf `body` toggelt
   - CSS für `.dark-mode`

-2. **Accordion/FAQ**
+2. Accordion/FAQ
   - Klick auf Frage → Antwort erscheint/verschwindet
-   - Tipp: `classList.toggle()` + CSS `display: none/block`
+   - Tipp: classList.toggle() + CSS display: none/block

-3. **Formular-Validierung**
+3. Formular-Validierung (entfernt - passt nicht zum Kurskontext)
   - Prüft ob Felder ausgefüllt
   - Zeigt Fehlermeldung
-
-**Hilfe:** https://nextlevelshit.github.io/web-engineering-mandala/
+-->

 ---

@@ -868,30 +809,21 @@ Server-Validation trotzdem nötig!

 ---

-# Projekt: Interaktive Portfolio-Seite
+# Übung: Interaktive Portfolio-Seite

-**Ihr habt jetzt alle Bausteine:**
-
- **HTML:** Struktur
- **CSS:** Design
- **JavaScript:** Interaktivität
-
-**Kombiniert sie!**
+**Kombiniert eure Bausteine:**
+HTML (Struktur) + CSS (Design) + JavaScript (Interaktivität)

 ---

-# Projekt-Anforderungen
+# Übung: Anforderungen

 **Must-Have:**
 - [ ] Semantisches HTML
- [ ] Responsive CSS (Mobile + Desktop)
- [ ] Mindestens 2 interaktive Features mit JS
+- [ ] Responsive CSS
+- [ ] 2 interaktive JS-Features

-**Nice-to-Have:**
- [ ] Dark Mode
- [ ] Animationen/Transitions
- [ ] Formular mit Validierung
- [ ] Dynamisch generierte Inhalte
+**Nice-to-Have:** Dark Mode, Animationen, Formular-Validierung

 **Zeit:** 60 Minuten

@@ -902,21 +834,18 @@ Server-Validation trotzdem nötig!
 ```javascript
 const form = document.querySelector("#todoForm");
 const input = document.querySelector("#todoInput");
-const liste = document.querySelector("#todoListe");
+const list = document.querySelector("#todoList");

 form.addEventListener("submit", function(event) {
    event.preventDefault();
-    
    if (input.value.trim() === "") return;

    const li = document.createElement("li");
    li.textContent = input.value;
-    
-    // Löschen per Klick
    li.addEventListener("click", () => li.remove());

-    liste.appendChild(li);
-    input.value = "";  // Input leeren
+    list.appendChild(li);
+    input.value = "";
 });
 ```

@@ -945,32 +874,20 @@ Node.js für Backend
 # Fetch: Daten laden

 ```javascript
-// Daten von API laden
-fetch("https://api.example.com/data")
-    .then(response => response.json())
-    .then(data => {
-        console.log(data);
-    })
-    .catch(error => {
-        console.error("Fehler:", error);
-    });
-
-// Mit async/await (moderner)
-async function ladeDaten() {
+// Mit async/await (modern)
+async function loadData() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data);
    } catch (error) {
-        console.error("Fehler:", error);
+        console.error("Error:", error);
    }
 }
 ```

 <!--
-APIs = Schnittstellen zu Daten
-JSON = JavaScript Object Notation
-async/await = lesbarere Syntax
+APIs = Schnittstellen zu Daten, JSON = JavaScript Object Notation
 -->

 ---
@@ -980,10 +897,7 @@ async/await = lesbarere Syntax
 ```javascript
 // Speichern
 localStorage.setItem("name", "Max");
-localStorage.setItem("settings", JSON.stringify({
-    darkMode: true,
-    language: "de"
-}));
+localStorage.setItem("settings", JSON.stringify({ darkMode: true }));

 // Laden
 const name = localStorage.getItem("name");
@@ -991,13 +905,10 @@ const settings = JSON.parse(localStorage.getItem("settings"));

 // Löschen
 localStorage.removeItem("name");
-localStorage.clear();  // Alles löschen
 ```

 <!--
-Daten bleiben nach Browser-Neustart
-Max 5-10 MB
-Nur Strings → JSON.stringify/parse
+Daten bleiben nach Browser-Neustart, nur Strings → JSON.stringify/parse
 -->

 ---
@@ -1009,59 +920,41 @@ Nur Strings → JSON.stringify/parse
 function Button() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>
-        Klicks: {count}
+        Clicks: {count}
    </button>;
 }
 ```

-**Vue.js** (Evan You)
-```vue
-<template>
-    <button @click="count++">Klicks: {{ count }}</button>
-</template>
-<script setup>
-import { ref } from 'vue';
-const count = ref(0);
-</script>
-```
+**Weitere:** Vue.js, Svelte, Angular

 <!--
-Frameworks für größere Apps
-Komponenten-basiert
-State Management eingebaut
+Frameworks für größere Apps, Komponenten-basiert
 -->

 ---

+<!-- _class: "" -->
+
 # Ressourcen zum Weiterlernen

-**Dokumentation:**
- MDN Web Docs: https://developer.mozilla.org/de/
+- **MDN Web Docs:** https://developer.mozilla.org/de/
+- **freeCodeCamp:** https://freecodecamp.org
+- **The Odin Project:** https://theodinproject.com

-**Interaktiv lernen:**
- HTML: https://nextlevelshit.github.io/html-over-js/
- CSS: https://codecrispi.es/
- JS Visualisierung: https://nextlevelshit.github.io/web-engineering-mandala/
-
-**Kurse:**
- freeCodeCamp: https://freecodecamp.org
- The Odin Project: https://theodinproject.com
+**Interaktiv:**
+- https://codescripsi.es/

 ---

+<!-- _class: "" -->
+
 # Tools für die Praxis

-**Editoren:**
- VS Code (empfohlen)
- WebStorm (JetBrains)
- Neovim (für Terminal-Fans)
+**Editoren:** VS Code (empfohlen), WebStorm, Neovim

-**Online-Editoren:**
- CodePen: https://codepen.io
- StackBlitz: https://stackblitz.com
+**Online:** CodePen, StackBlitz

-**Versionskontrolle:**
- Git + GitHub/GitLab
+**Versionskontrolle:** Git + GitHub/GitLab

 ---

@@ -1073,38 +966,49 @@ State Management eingebaut

 # Was ihr gelernt habt

-**Tag 1:**
+**Termin 1:** Geschichte, Von-Neumann, HTML
+**Termin 2:** Netzwerke, DNS, HTTP, CSS
+**Termin 3:** JavaScript, DOM, Events
+
+<!--
+Termin 1:
 - Geschichte der Informatik (Hollerith → Internet)
 - Von-Neumann-Architektur
 - HTML-Grundlagen

-**Tag 2:**
+Termin 2:
 - Netzwerke, DNS, HTTP
 - CSS: Selektoren, Box-Modell, Flexbox

-**Tag 3:**
+Termin 3:
 - JavaScript: Variablen, Funktionen, Schleifen
 - DOM-Manipulation
 - Events & Interaktivität
+-->

 ---

 # Ihr könnt jetzt...

-✅ Den historischen Kontext von IT verstehen
-✅ Erklären wie das Internet funktioniert
-✅ HTML-Seiten strukturieren
-✅ CSS für Layout und Design nutzen
-✅ JavaScript für Interaktivität einsetzen
-✅ **Mit EntwicklerInnen auf Augenhöhe sprechen!**
+- Den historischen Kontext von IT verstehen
+- Erklären wie das Internet funktioniert
+- HTML-Seiten strukturieren
+- CSS für Layout und Design nutzen
+- JavaScript für Interaktivität einsetzen
+- **Mit EntwicklerInnen auf Augenhöhe sprechen!**

 ---

-# Feedback
+# Feedback – Eure Meinung zählt!

-**Was hat gut funktioniert?**
-**Was könnte besser sein?**
-**Welche Themen wünscht ihr euch für die Zukunft?**
+Euer ehrliches Feedback hilft mir, den Kurs zu verbessern.
+**Es gibt keine falschen Antworten!**
+
+- Was hat gut funktioniert?
+- Was könnte besser sein?
+- Welche Themen interessieren euch noch?
+
+*Feedback gerne auch anonym per E-Mail an mail@librete.ch*

 ---

@@ -1112,12 +1016,11 @@ State Management eingebaut

 # Danke!

-**Kontakt:** michael.czechowski@lehre.dhbw-stuttgart.de
-**Repository:** git.librete.ch/hdm/223015b
+**Kontakt:** mail@librete.ch

 **Ressourcen:**
 - https://nextlevelshit.github.io/html-over-js/
- https://codecrispi.es/
+- https://codescripsi.es/
 - https://nextlevelshit.github.io/web-engineering-mandala/

 ---
Author	SHA1	Message	Date
libretech	ecc7486cdd	add claude code settings and skills	2025-12-18 00:45:48 +01:00
libretech	86f3cc8172	fix termin 3 slide overflow and formatting - rename Projekt slides to Übung - condense overflowing slides - remove JS validation (not fitting lecture context) - remove emojis from summary - add speaker notes for condensed content	2025-12-18 00:45:31 +01:00
libretech	90c37d1b93	fix termin 1 slide formatting	2025-12-18 00:45:25 +01:00
libretech	6ebc8a13cc	add termin 3 slides with images - rename Tag → Termin throughout - add black background for title slide	2025-12-18 00:19:06 +01:00
libretech	ce9ec8d636	add termin 2 slides with images - rename Tag → Termin throughout - add black background for title slide	2025-12-18 00:19:01 +01:00
libretech	4436f2d6cb	add termin 1 slides with images - rename Tag → Termin throughout - add black background for title slide - fix image extensions to match actual files	2025-12-18 00:18:56 +01:00
libretech	b5a3282ed7	rename background images, split summary slide, remove assets.md - rename background images to background-termin-{1,2,3}.png - split termin 1 summary slide to fix overflow - remove ASSETS.md (wrong project file)	2025-12-18 00:01:23 +01:00
libretech	18800ca731	update termin 3 slides based on feedback - convert all german variable names to english - change email to mail@librete.ch - change website to codescripsi.es - simplify overflow slides (loops, fetch, frameworks) - improve feedback slide for psychological safety	2025-12-17 23:09:46 +01:00
libretech	44b1aa29dc	update termin 2 slides based on feedback - fix hdm ip address (212.132.79.37) - change website to codescripsi.es with basics/advanced - change email to mail@librete.ch - simplify overflow slides (http, css, pseudo elements)	2025-12-17 23:09:40 +01:00
libretech	82503a5fc5	update termin 1 slides based on feedback - remove torches of freedom story (ibm story sufficient) - fix von-neumann claim (not all devices, mention harvard) - change email to mail@librete.ch - simplify overflow slides - rename dehomag image file	2025-12-17 23:09:32 +01:00