add pdf download links to index page

- move bletchley park image after turing portrait
- condense turing biography section
- add full name after A.A.L. initials

.claude/commands/humanify.md

@@ -0,0 +1,75 @@
+# Humanify Slide Command
+
+Transformiere die angegebene Slide(s) in meinen persönlichen Lehr- und Erzählstil.
+
+**Argument:** $ARGUMENTS (Slide-Nummer, Titel, oder Range wie "15-20")
+
+---
+
+## Mein pädagogischer Stil (extrahiert aus Termin 1)
+
+### 1. Konversationelle Speaker Notes auf Deutsch
+- Direkte Zitate in Anführungszeichen: `"Ich schaue in viele fragende Gesichte..."`
+- Natürliche, gesprochene Sprache - kein Vorlesungsdeutsch
+- Persönliche Ansprache: "ihr", "euch", "wir"
+
+### 2. Storytelling & Spannungsbogen
+- Cliffhanger: `"am Ende der heutigen Veranstaltung werdet ihr mir genau sagen können..."`
+- Übergänge zwischen Konzepten als Geschichte erzählen
+- Neugier wecken bevor die Antwort kommt
+
+### 3. Rhetorische Fragen & Interaktion
+- `Frage: "Weiß jemand wieviele Zustände wir mit 8 Bit beschreiben können?"`
+- `Fangfrage: "Wie hoch ist die Sample Rate von Vinyls?"` → Überraschende Antwort
+- Einladungen: `"Wie würdet ihr vorgehen?"`
+
+### 4. Literarische & kulturelle Referenzen
+- `»256 Shades of Gray«` (mit deutschen Guillemets »...«)
+- Metaphern: `"ganz literarisch"`, `"stellt euch vor ihr seid ArchäologInnen"`
+- Popkulturelle Anknüpfungspunkte
+
+### 5. Rätsel & Denkaufgaben
+- Seerose-Rätsel für exponentielles Wachstum
+- Aktivierung statt passives Zuhören
+
+### 6. Etymologie & Historie
+- Wortherkunft: `"von griech. hexa „sechs" und lat. decem „zehn""`
+- Historische Anekdoten: `"Es gab durchaus einen »Machtkampf«..."`
+- Personen hinter den Konzepten
+
+### 7. Progressive Enthüllung
+- Konzepte über mehrere Slides aufbauen (Das Byte: 3 Slides)
+- Erst Frage, dann Antwort auf nächster Slide
+- Spannung halten
+
+### 8. Struktur der Speaker Notes
+```markdown
+<!--
+"Gesprochener Text in Anführungszeichen"
+
+Fakten und Hintergrundinfos als Stichpunkte:
+- Punkt 1
+- Punkt 2
+
+Frage: "Interaktive Frage an Studierende?"
+
+Überleitung: "Und damit kommen wir zu..."
+-->
+```
+
+---
+
+## Aufgabe
+
+1. Lies die angegebene(n) Slide(s) aus den Dateien in `slides/`
+2. Analysiere den aktuellen Inhalt und die Speaker Notes
+3. Transformiere die Speaker Notes in meinen Stil:
+   - Füge gesprochene Zitate hinzu
+   - Baue rhetorische Fragen ein
+   - Ergänze Übergänge und Storytelling-Elemente
+   - Füge Etymologie oder historischen Kontext hinzu wo passend
+   - Nutze deutsche Guillemets »...« für Titel/Zitate
+4. Behalte die Slide-Inhalte (Bullet Points, Code, Tabellen) weitgehend bei
+5. Zeige mir die vorgeschlagenen Änderungen bevor du sie anwendest
+
+**WICHTIG:** Nicht übertreiben! Authentisch bleiben, nicht jede Slide braucht alles.

.gitignore

@@ -63,3 +63,4 @@ Desktop.ini
 *.pdf
 index.md.bak
 hdm-lehrauftrag-uebersicht.md
+slides/assets-original/

CLAUDE.md

@@ -5,6 +5,7 @@ This project builds a presentation deck for Marp based on Markdown files.
 ## Agent Restrictions
 - Agent NEVER runs commands on its own except changing files INSIDE THIS FOLDER, never any other then this
 - Agent NEVER runs build commands or any automated processes without explicit user request, as the user is working in dev mode
+- Agent NEVER runs deploy commands (make deploy, scp, etc.) without explicit user permission - always ask first
 
 ## Critical File Protection: index.md
 - `index.md` is the MAIN CONTENT FILE for the entire lecture series - treat with extreme care

IMAGE_LIST.md

@@ -1,99 +1,124 @@
 # Image List for HdM Internettechnik Slides
 
-This document lists all images needed for the lecture slides. Each image includes:
-- **Filename**: Target filename in `./assets/`
-- **Context**: Where/why it's used in the slides
-- **AI Prompt**: Suggested prompt for image generation (Gemini, DALL-E, Midjourney, etc.)
-
-**Recommended settings:**
-- Aspect ratio: 16:9 (1920x1080 or similar)
-- Style: Clean, professional, educational
-- For historical photos: Consider using real images from Wikipedia Commons or similar
-
-**Legend:**
-- ✅ = Already exists in assets/
-- ⬚ = Not yet created
+Save images to `./slides/assets/` with the exact filenames.
 
 ---
 
-## Intro / Title Slides
-
-### ⬚ digital-landscape.png
-- **Context**: Opening slide background for Termin 1, sets futuristic tech mood
-- **AI Prompt**: Futuristic digital landscape with glowing blue and purple data streams, abstract network connections, binary patterns flowing through a neon-lit cyber environment, wide cinematic shot, no text
-
-### ⬚ network-cables.png
-- **Context**: Opening slide background for Termin 2 (Netzwerke, Protokolle, CSS)
-- **AI Prompt**: Network infrastructure with colorful ethernet cables, server racks, fiber optic lights, data center aesthetic, blue and orange accent lighting, wide cinematic shot, no text
-
-### ⬚ javascript-code.png
-- **Context**: Opening slide background for Termin 3 (Interaktivität, JavaScript)
-- **AI Prompt**: JavaScript code on dark IDE background, syntax highlighting in vibrant colors, modern code editor aesthetic, shallow depth of field on code, programming atmosphere, wide cinematic shot, no text
+## background-termin-1.png
+**Gemini Prompt:**
+```
+Futuristic digital landscape with glowing blue and purple data streams, abstract network connections, binary patterns flowing through a neon-lit cyber environment, wide cinematic shot 16:9 aspect ratio, no text
+```
 
 ---
 
-## Termin 1: Geschichte, Grundlagen & HTML
+## background-termin-2.png
+**Gemini Prompt:**
+```
+Network infrastructure with colorful ethernet cables, server racks, fiber optic lights, data center aesthetic, blue and orange accent lighting, wide cinematic shot 16:9 aspect ratio, no text
+```
 
-### ⬚ hollerith-machine.jpg
-- **Context**: Herman Hollerith's tabulating machine, US Census 1890
-- **AI Prompt**: Historical photograph style of Hollerith tabulating machine from 1890s, punch card reader, mechanical computing device, sepia tone, museum exhibit quality, vintage industrial equipment
-- **Search**: `Hollerith tabulating machine` on commons.wikimedia.org or `site:loc.gov Hollerith census`
+---
 
-### ⬚ dehomag-hollerith.jpg
-- **Context**: IBM Hollerith machines used by Dehomag (Deutsche Hollerith-Maschinen GmbH) in 1930s Germany
-- **AI Prompt**: Historical photograph style of Hollerith machines in 1930s German office setting, punch card processing, bureaucratic documentation, black and white historical photo aesthetic
-- **Search**: `Dehomag Hollerith` or `Deutsche Hollerith-Maschinen` on commons.wikimedia.org or bundesarchiv.de
+## background-termin-3.png
+**Gemini Prompt:**
+```
+JavaScript code on dark IDE background, syntax highlighting in vibrant colors, modern code editor aesthetic, shallow depth of field on code, programming atmosphere, wide cinematic shot 16:9 aspect ratio, no text
+```
 
-### ⬚ oppenheimer-poster.jpg
-- **Context**: Reference to Manhattan Project, introduces WWII computing context
-- **AI Prompt**: Dramatic portrait in style of Oppenheimer movie poster, scientist silhouette against atomic explosion background, 1940s aesthetic, cinematic dramatic lighting
-- **Search**: `Oppenheimer 2023 poster` or `J. Robert Oppenheimer portrait` on commons.wikimedia.org
+---
 
-### ⬚ john-von-neumann.jpg
-- **Context**: Portrait of John von Neumann, father of computer architecture
-- **AI Prompt**: Professional portrait of 1950s mathematician/scientist, suit and tie, blackboard with equations in background, academic setting, black and white photography style
-- **Search**: `John von Neumann` on commons.wikimedia.org (public domain photos available)
+## hollerith-machine.tif
+**Search (preferred):**
+- commons.wikimedia.org: `Hollerith tabulating machine`
+- google.com: `site:loc.gov Hollerith census`
 
-### ⬚ eniac.jpg
-- **Context**: ENIAC computer (1945), first electronic general-purpose computer
-- **AI Prompt**: Historical photograph of ENIAC computer room, massive machine with vacuum tubes, cables, switches, 1940s technology, operators working, wide shot showing scale, black and white
-- **Search**: `ENIAC computer` on commons.wikimedia.org or `site:archives.upenn.edu ENIAC`
+**Gemini Prompt (fallback):**
+```
+Historical photograph style of Hollerith tabulating machine from 1890s, punch card reader, mechanical computing device, sepia tone, museum exhibit quality, vintage industrial equipment, 16:9
+```
 
-### ⬚ arpanet-1969.png
-- **Context**: First ARPANET map showing 4 nodes (UCLA, Stanford, UCSB, Utah)
-- **AI Prompt**: Clean diagram of early ARPANET network from 1969, four nodes connected by lines, US map background, vintage technical drawing style, labeled nodes: UCLA, SRI, UCSB, Utah
-- **Search**: `ARPANET 1969 map` or `ARPANET logical map` on commons.wikimedia.org
+---
 
-### ⬚ lightbulb-onoff.png
-- **Context**: Explaining the bit concept (0 or 1, on or off)
-- **AI Prompt**: Simple lightbulb comparison: one lit bright yellow, one dark/off, side by side, clean minimal style, binary concept visualization, white background, educational diagram
+## dehomag-hollerith.jpg
+**Search (preferred):**
+- commons.wikimedia.org: `Dehomag Hollerith`
+- bundesarchiv.de: `Deutsche Hollerith-Maschinen`
+
+**Gemini Prompt (fallback):**
+```
+Historical photograph of Hollerith machines in 1930s German office setting, punch card processing, bureaucratic documentation, black and white historical photo aesthetic, 16:9
+```
+
+---
+
+## oppenheimer-poster.jpg
+**Search (preferred):**
+- commons.wikimedia.org: `J. Robert Oppenheimer portrait`
+- google.com: `Oppenheimer 2023 movie poster`
+
+**Gemini Prompt (fallback):**
+```
+Dramatic portrait in style of Oppenheimer movie poster, scientist silhouette against atomic explosion background, 1940s aesthetic, cinematic dramatic lighting, 16:9
+```
+
+---
+
+## john-von-neumann.jpg
+**Search (preferred):**
+- commons.wikimedia.org: `John von Neumann portrait`
+- google.com: `John von Neumann LANL`
+
+**Gemini Prompt (fallback):**
+```
+Professional portrait of 1950s mathematician scientist, suit and tie, blackboard with equations in background, academic setting, black and white photography style, 16:9
+```
+
+---
+
+## eniac.jpg
+**Search (preferred):**
+- commons.wikimedia.org: `ENIAC computer`
+- google.com: `site:archives.upenn.edu ENIAC`
+
+**Gemini Prompt (fallback):**
+```
+Historical photograph of ENIAC computer room, massive machine with vacuum tubes cables switches, 1940s technology, operators working, wide shot showing scale, black and white, 16:9
+```
+
+---
+
+## arpanet-1969.png
+**Search (preferred):**
+- commons.wikimedia.org: `ARPANET 1969 map`
+- commons.wikimedia.org: `ARPANET logical map December 1969`
+
+**Gemini Prompt (fallback):**
+```
+Clean technical diagram of early ARPANET network from 1969, four nodes connected by lines on US map background, vintage technical drawing style, labeled nodes UCLA SRI UCSB Utah, 16:9
+```
+
+---
+
+## lightbulb-onoff.png
+**Gemini Prompt:**
+```
+Simple lightbulb comparison showing binary concept, one lightbulb lit bright yellow, one lightbulb dark off, side by side, clean minimal style, white background, educational diagram, 16:9
+```
 
 ---
 
 ## Summary
 
-| Lecture | Total | ✅ Done | ⬚ Todo |
-|---------|-------|--------|--------|
-| Intro/Title Slides | 3 | 0 | 3 |
-| Termin 1 (Geschichte/Grundlagen/HTML) | 7 | 0 | 7 |
-| Termin 2 (Netzwerke/Protokolle/CSS) | 0 | 0 | 0 |
-| Termin 3 (Interaktivität/JavaScript) | 0 | 0 | 0 |
-| **Total** | **10** | **0** | **10** |
-
----
-
-## Generation Tips
-
-1. **Historical photos**: Prefer real historical photos from Wikipedia Commons, Library of Congress, or university archives for authenticity
-2. **Diagrams**: Use "clean infographic style", "technical illustration", "minimal diagram" in prompts
-3. **Backgrounds**: Use "wide cinematic shot", "no text", "opacity-friendly" for title slide backgrounds
-4. **Consistency**: Add "educational style", "professional presentation" to maintain visual coherence
-
-## Asset Directory
-
-Create the assets directory if it doesn't exist:
-```bash
-mkdir -p ./assets
-```
-
-Place all images in `./slides/assets/` with the exact filenames listed above.
+| Image | Type |
+|-------|------|
+| background-termin-1.png | Generate |
+| background-termin-2.png | Generate |
+| background-termin-3.png | Generate |
+| hollerith-machine.tif/jpg | Search or Generate |
+| dehomag-hollerith.webp | Search or Generate |
+| oppenheimer.png | Search or Generate |
+| john-von-neumann.png | Search or Generate |
+| eniac.avif | Search or Generate |
+| arpanet-1969.png | Search or Generate |
+| lightbulb-onoff.png | Generate |

Makefile

@@ -1,21 +1,16 @@
 # Makefile for Marp Slides Project
 
-.PHONY: help build dev watch pdf html clean install deploy assemble
+.PHONY: help build dev watch pdf html clean install deploy deploy-html copy-assets optimize-images
 
-# Slide components
+# Directories
 SLIDES_DIR = slides
 BUILD_DIR = build
-HEADER = $(SLIDES_DIR)/_frontmatter.md
-INTRO = $(SLIDES_DIR)/_intro.md
-OUTRO = $(SLIDES_DIR)/_outro.md
 
-# Termin files (date-topic naming convention)
-TERMIN_1 = 2025-12-19-termin-1-grundlagen-text-audio
-TERMIN_2 = 2026-01-09-termin-2-bild-audio-video
-TERMIN_3 = 2026-01-23-termin-3-speichermedien-schnittstellen
-TERMIN_4 = 2026-01-30-termin-4-distribution-apis-zukunft
-TERMIN_5 = 2026-xx-xx-termin-5-vertiefung-offene-fragen
-TERMINS = $(TERMIN_1) $(TERMIN_2) $(TERMIN_3) $(TERMIN_4) $(TERMIN_5)
+# Termin files (date-topic naming convention) - each is self-contained
+TERMIN_1 = 2025-12-20-termin-1-geschichte-grundlagen-html
+TERMIN_2 = 2026-01-10-termin-2-netzwerke-protokolle-css
+TERMIN_3 = 2026-01-24-termin-3-interaktivitaet-javascript
+TERMINS = $(TERMIN_1) $(TERMIN_2) $(TERMIN_3)
 
 # Default target
 help:
@@ -29,27 +24,25 @@ help:
 	@echo "    make pdf        - Export all slides to PDF"
 	@echo "    make html       - Export all slides to HTML"
 	@echo ""
+	@echo "  Deploy:"
+	@echo "    make deploy     - Full build + deploy (HTML, PDF, assets)"
+	@echo "    make deploy-html - HTML only deploy (faster)"
+	@echo ""
 	@echo "  Other:"
-	@echo "    make assemble   - Assemble all termin files in build/"
+	@echo "    make optimize-images - Resize images to max 1920px"
 	@echo "    make clean      - Remove generated files"
 	@echo "    make install    - Install dependencies"
-	@echo "    make deploy     - Deploy slides to server"
 
 # Ensure build directory exists
 $(BUILD_DIR)/.exists:
 	@mkdir -p $(BUILD_DIR)
 	@touch $@
 
-# Assemble all termin files
-assemble: $(BUILD_DIR)/.exists
-	@echo "Assembling slides..."
-	@for f in $(TERMINS); do \
-		echo "  $$f.md"; \
-		cat $(HEADER) $(INTRO) $(SLIDES_DIR)/$$f.md $(OUTRO) > $(BUILD_DIR)/$$f.md; \
-	done
-	@echo "  all.md"
-	@cat $(HEADER) $(INTRO) $(foreach t,$(TERMINS),$(SLIDES_DIR)/$(t).md) $(OUTRO) > $(BUILD_DIR)/all.md
-	@cp -r $(SLIDES_DIR)/assets $(BUILD_DIR)/ 2>/dev/null || true
+# Copy assets and materials to build directory
+copy-assets: $(BUILD_DIR)/.exists
+	@echo "Copying assets..."
+	@cp -r $(SLIDES_DIR)/assets $(BUILD_DIR)/
+	@cp -r $(SLIDES_DIR)/materials $(BUILD_DIR)/ 2>/dev/null || true
 
 # Development server - serves slides/ directly with HMR
 dev:
@@ -58,30 +51,38 @@ dev:
 	PORT=1312 npx @marp-team/marp-cli --server $(SLIDES_DIR)/
 
 # Watch for changes
-watch: assemble
-	npx @marp-team/marp-cli --watch $(BUILD_DIR)/all.md
+watch:
+	npx @marp-team/marp-cli --watch $(SLIDES_DIR)/
 
 # Build all slides (HTML + PDF)
-build: assemble
+build: copy-assets
 	@echo "Building all slides..."
 	@for f in $(TERMINS); do \
 		echo "Building $$f..."; \
-		npx @marp-team/marp-cli $(BUILD_DIR)/$$f.md -o $(BUILD_DIR)/$$f.html; \
-		npx @marp-team/marp-cli $(BUILD_DIR)/$$f.md --pdf --allow-local-files -o $(BUILD_DIR)/$$f.pdf; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md -o $(BUILD_DIR)/$$f.html; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md --pdf --allow-local-files -o $(BUILD_DIR)/$$f.pdf; \
 	done
-	@echo "Building all.md..."
-	npx @marp-team/marp-cli $(BUILD_DIR)/all.md -o $(BUILD_DIR)/all.html
-	npx @marp-team/marp-cli $(BUILD_DIR)/all.md --pdf --allow-local-files -o $(BUILD_DIR)/all.pdf
+	@./scripts/generate-index.sh $(BUILD_DIR)
+	@echo "Done! Output in $(BUILD_DIR)/"
 
-# Export to PDF (all slides combined)
-pdf: assemble
+# Export all slides to PDF
+pdf: $(BUILD_DIR)/.exists
 	@echo "Exporting to PDF..."
-	npx @marp-team/marp-cli $(BUILD_DIR)/all.md --pdf --allow-local-files -o $(BUILD_DIR)/all.pdf
+	@for f in $(TERMINS); do \
+		echo "  $$f.pdf"; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md --pdf --allow-local-files -o $(BUILD_DIR)/$$f.pdf; \
+	done
+	@echo "Done! PDFs in $(BUILD_DIR)/"
 
-# Export to HTML (all slides combined)
-html: assemble
+# Export all slides to HTML
+html: copy-assets
 	@echo "Exporting to HTML..."
-	npx @marp-team/marp-cli $(BUILD_DIR)/all.md -o $(BUILD_DIR)/all.html
+	@for f in $(TERMINS); do \
+		echo "  $$f.html"; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md -o $(BUILD_DIR)/$$f.html; \
+	done
+	@./scripts/generate-index.sh $(BUILD_DIR)
+	@echo "Done! HTML files in $(BUILD_DIR)/"
 
 # Clean generated files
 clean:
@@ -93,8 +94,26 @@ install:
 	@echo "Installing dependencies..."
 	npm install
 
-# Deploy slides
+# Optimize images (resize to max 1920px, requires nix-shell -p imagemagick)
+optimize-images:
+	@echo "Creating optimized images from assets-original..."
+	@mkdir -p $(SLIDES_DIR)/assets
+	@nix-shell -p imagemagick --run 'find $(SLIDES_DIR)/assets-original -maxdepth 1 -type f \( -name "*.png" -o -name "*.jpg" -o -name "*.jpeg" -o -name "*.webp" -o -name "*.avif" \) -exec sh -c '"'"'for img; do magick "$$img" -resize "1920x>" -quality 85 "$(SLIDES_DIR)/assets/$$(basename "$$img")"; done'"'"' _ {} +'
+	@echo "Done! Optimized images in assets/"
+
+# Deploy slides (full build)
 deploy: build
 	@echo "Deploying slides..."
-	scp $(BUILD_DIR)/all.html tengo@tuttle.uberspace.de:/home/tengo/html/malta/index.html
-	scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/malta/
+	@echo "Copying HTML files..."
+	scp $(BUILD_DIR)/*.html tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/
+	@echo "Copying assets..."
+	scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/
+	@echo "Copying materials..."
+	scp -r $(BUILD_DIR)/materials/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/ 2>/dev/null || true
+
+# Deploy HTML only (faster, no PDF rebuild)
+deploy-html: html
+	@echo "Deploying HTML only..."
+	scp $(BUILD_DIR)/*.html tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/
+	scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/
+	scp -r $(BUILD_DIR)/materials/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/ 2>/dev/null || true

README.md

@@ -1,17 +1,15 @@
-# 223015b – Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+# 223015c – Grundlagen IT- und Internettechnik
 
 **Modul "Technik 1"** · 1. Semester · Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart · Wintersemester 2025/26
 
-**Repository:** [git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
-
 ---
 
 ## Über dieses Modul
 
 > *Internettechnologien 1 – "Technische Grundlagen von IT-Projekten"*
 
-Die Digitalisierung verändert die Prozesse und Tätigkeiten in allen Branchen. Sie hat neue Geschäftsmodelle ermöglicht und auch unseren Alltag stark verändert. Kaum ein Projekt in der Medienwelt kommt ohne digitale Technik aus – als Produkt, Kollaborationsplattform oder Marketing- und Verkaufsplattform.
+Die Digitalisierung verändert die Prozesse und Tätigkeiten in allen Branchen. Kaum ein Projekt in der Medienwelt kommt ohne digitale Technik aus – als Produkt, Kollaborationsplattform oder Marketing- und Verkaufsplattform.
 
 **Ziel:** Technische Grundlagen verstehen, um mit Entwicklungsteams, Kunden und Projektpartnern auf Augenhöhe zusammenarbeiten zu können.
 
@@ -19,152 +17,59 @@ Die Digitalisierung verändert die Prozesse und Tätigkeiten in allen Branchen.
 
 | # | Datum | Thema |
 |---|-------|-------|
-| 1 | 19.12.2025 | Grundlagen, Text & Audio |
-| 2 | 09.01.2026 | Bild- & Videoformate |
-| 3 | 23.01.2026 | Speichermedien & Schnittstellen |
-| 4 | 30.01.2026 | Distribution, APIs & Zukunft |
-| 5 | TBA | Vertiefung & offene Fragen |
+| 1 | 20.12.2025 | Geschichte, Grundlagen & HTML |
+| 2 | 10.01.2026 | Netzwerke, Protokolle & CSS |
+| 3 | 24.01.2026 | Interaktivität & JavaScript |
 
 ### Kompetenzen
 
 In dieser Veranstaltung erwerben Sie folgende Kompetenzen:
-- Technische Konzepte des Internets verstehen (Netzwerke, Protokolle, Client/Server)
-- Dateiformate analysieren und verstehen
-- Grundlagen von Kompression (Audio, Bild, Video)
-- Speichermedien und Schnittstellen kennen
-- APIs und Distributionswege verstehen
+- Geschichte der Informatik verstehen (Hollerith, Von-Neumann, ARPANET)
+- Technische Konzepte des Internets verstehen (Netzwerke, Protokolle, DNS, HTTP)
+- HTML-Seiten strukturieren und semantisch aufbauen
+- CSS für Layout und Design einsetzen (Selektoren, Box-Modell, Flexbox)
+- JavaScript für Interaktivität nutzen (DOM-Manipulation, Events)
 
-**Dozent:** Michael Czechowski · michael.czechowski@lehre.dhbw-stuttgart.de
+**Dozent:** Michael Czechowski · mail@librete.ch
 
 ---
 
-## Slides erstellen
+## Development
 
-### 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:
+### Voraussetzungen
 
 ```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
+npm install
 ```
 
-## Tips
+### Commands
 
-- 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
+```bash
+npm run dev        # Development server (http://localhost:8080)
+npm run build      # Build slides
+npm run export:pdf # Export to PDF
+```
 
-## Troubleshooting
+### Makefile
 
-- **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
+```bash
+make dev    # Start development server
+make build  # Build slides
+make pdf    # Export to PDF
+make clean  # Remove generated files
+```
 
-## Contributing
+## Projektstruktur
 
-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
+```
+slides/
+├── 2025-12-20-termin-1-geschichte-grundlagen-html.md
+├── 2026-01-10-termin-2-netzwerke-protokolle-css.md
+├── 2026-01-24-termin-3-interaktivitaet-javascript.md
+└── assets/
+    └── (images)
+```
 
 ## 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.
+Licensed under [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).

package.json

@@ -4,11 +4,11 @@
   "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/",
+    "build": "marp index.md --allow-local-files -o build/index.html && cp -r assets build/",
+    "dev": "marp --server --allow-local-files -p 1313 ./",
+    "watch": "marp --watch --allow-local-files index.md",
+    "export:pdf": "marp index.md --allow-local-files --pdf -o build/index.pdf",
+    "export:html": "marp index.md --allow-local-files --html -o build/index.html && cp -r assets build/",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],

scripts/generate-index.sh

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

slides/2026-01-10-termin-2-netzwerke-protokolle-css.md

@@ -9,23 +9,57 @@ title: "Termin 2: Netzwerke, Protokolle & CSS"
 ---
 
 <style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #d63384;
+  --color-dimmed: #4a4a6a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
 section {
   font-size: 1.7rem;
 }
 h2 {
-  color: var(--color-dimmed);
+  color: var(--color-highlight);
+}
+pre {
+  background: #0f0f23;
+  color: #d63384;
+  border-radius: 8px;
+  border-left: 3px solid #d63384;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a1a2e;
+  color: #d63384;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
+}
+section.klausur {
+  background: #fce4ec !important;
+}
+section.klausur footer {
+  display: none;
 }
 </style>
 
 <!-- _class: invert -->
 <!-- _header: '' -->
+<!-- _footer: '' -->
 <!-- _backgroundColor: black -->
 
-![bg fit opacity:0.4](./assets/background-termin-2.png)
+![bg fit opacity:0.2](./assets/background-termin-2.png)
 
 # Grundlagen IT- und Internettechnik
 
-**223015b** · Modul "Technik 1" · 1. Semester
+**223015c** · Modul "Technik 1" · 1. Semester
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart
 
@@ -44,17 +78,15 @@ Hochschule der Medien Stuttgart
 
 **Was wir gelernt haben:**
 
-- Geschichte: Hollerith → IBM → Von Neumann → ARPANET
+- Geschichte: Lovelace -> Hollerith → IBM -> Turing → Von Neumann → ARPANET -> Kalifornische ForscherInnen
 - Von-Neumann-Architektur (5 Komponenten)
-- Bits, Bytes, Hexadezimal
-- HTML-Grundlagen & semantische Tags
+- Bits, Bytes, Hexadezimal (8Bits = 2 * 4Bits = 16 * 16 Hexadezimalzahlen)
 
-**Fragen? Probleme bei der Fleißaufgabe?**
+**Fragen? Unklarheiten?**
 
 <!--
 Kurze Wiederholung
 Fragen klären
-Wer hat die Fleißaufgabe gemacht?
 -->
 
 ---
@@ -62,15 +94,190 @@ Wer hat die Fleißaufgabe gemacht?
 # Heute
 
 **Vormittag:**
-- Netzwerke vertieft (OSI, TCP/IP)
+- Netzwerke (OSI, TCP/IP)
 - DNS: Wie funktionieren Domain-Namen?
-- HTTP im Detail
+- HTTP(S) im Detail
 
 **Nachmittag:**
 - CSS-Grundlagen
+- "Barrierefreiheit" (a11y, WCAG)
 - Selektoren & Spezifität
-- Layouts mit Flexbox
-- Hands-On: Eure Seite stylen
+- Hands-On: Styling
+
+---
+
+# Ressourcen zum Selbstlernen
+
+* Online Code-Editor: https://codepen.io/pen/
+* MDN (Mozilla Developer Network): https://developer.mozilla.org/de/
+* HTML-Referenz: https://nextlevelshit.github.io/html-over-js/
+* CSS lernen: https://codescripsi.es/
+* Flexbox-Spiel: https://flexboxfroggy.com/
+* Grid-Spiel: https://cssgridgarden.com/
+
+---
+
+<!-- _class: lead -->
+
+# Teil 1: Rechner verbinden
+## Netzwerk-Grundlagen
+
+---
+
+# Warum Rechner verbinden?
+
+- Daten und Informationen teilen
+- Zusammenarbeiten & Kollaboration
+- Kommunizieren
+- Ressourcen teilen (Drucker, Speicher, andere Geräte)
+
+---
+
+# Kommunikationsarten
+
+| Kategorie | Beispiel |
+|-----------|----------|
+| **Synchron** | Telefonat, Video-Call |
+| **Asynchron** | E-Mail, Brief, SMS |
+| **Verbindungsorientiert** | Telefon (Leitung aufbauen) |
+| **Verbindungslos** | Brief, Postkarte |
+
+<!--
+Internet nutzt beides: TCP = verbindungsorientiert, UDP = verbindungslos
+-->
+
+---
+
+<!-- _class: klausur -->
+
+# Das OSI-Modell
+
+**7 Schichten der Netzwerkkommunikation:**
+
+| Schicht | Name | Beispiel |
+|---------|------|----------|
+| 7 | Anwendung | HTTP, FTP, SMTP |
+| 6 | Darstellung | Verschlüsselung, Kompression |
+| 5 | Sitzung | Sessions |
+| 4 | Transport | TCP, UDP |
+| 3 | Vermittlung | IP, Routing |
+| 2 | Sicherung | Ethernet, MAC |
+| 1 | Bitübertragung | Kabel, WLAN |
+
+<!--
+OSI = Open Systems Interconnection
+ISO-Standard
+Theoretisches Modell
+TCP/IP ist die praktische Implementierung
+-->
+
+---
+
+<!-- _class: klausur -->
+
+# TCP/IP: Die Praxis
+
+**Das Internet nutzt TCP/IP (4 Schichten):**
+
+| TCP/IP | Entspricht OSI | Protokolle |
+|--------|----------------|------------|
+| Anwendung | 5-7 | HTTP, DNS, SMTP |
+| Transport | 4 | TCP, UDP |
+| Internet | 3 | IP |
+| Netzzugang | 1-2 | Ethernet, WLAN |
+
+**TCP/IP = Transmission Control Protocol / Internet Protocol**
+
+<!--
+TCP/IP einfacher als OSI
+Praktisch gewachsen, nicht theoretisch geplant
+-->
+
+---
+
+# IP-Adressen
+
+**Jeder Rechner im Netzwerk braucht eine Adresse**
+
+**IPv4:** 4 Zahlen (0-255), Punkt-getrennt
+`192.168.1.1`
+
+**Problem:** 2⁸·2⁸·2⁸·2⁸ = 2³² = nur 4,3 Milliarden Adressen
+→ Reicht nicht für alle Geräte!
+
+**IPv6:** 128 Bit = 3,4 × 10³⁸ Adressen
+`2001:0db8:85a3:0000:0000:8a2e:0370:7334`
+
+<!--
+Eure IP: ipconfig (Win) / ifconfig (Mac/Linux)
+Private IPs: 192.168.x.x, 10.x.x.x
+Öffentliche IP: Router hat eine
+NAT = Network Address Translation
+-->
+
+---
+
+# Spezielle IP-Adressen
+
+| Adresse | Bedeutung |
+|---------|-----------|
+| `127.0.0.1` | **Localhost** – Ihr eigener Rechner |
+| `192.168.x.x` | Private Adressen (Heimnetz) |
+| `10.x.x.x` | Private Adressen (Firmen) |
+
+**Localhost = "Ich selbst"**
+→ Perfekt für Web-Entwicklung!
+
+<!--
+Localhost für lokale Entwicklung
+Private IPs werden nicht im Internet geroutet
+Router macht NAT (Network Address Translation)
+-->
+
+---
+
+# Ports: Die Türnummern
+
+**IP-Adresse = Hausnummer**
+**Port = Wohnungstür**
+
+| Port | Dienst |
+|------|--------|
+| 80 | HTTP (Web) |
+| 443 | HTTPS (Web, verschlüsselt) |
+| 22 | SSH (Terminal) |
+| 25 | SMTP (E-Mail senden) |
+
+**Beispiel:** `192.168.1.1:8080`
+(IP-Adresse : Port)
+
+<!--
+Ein Server kann viele Dienste anbieten
+Ports 0-1023 = "well-known" (reserviert)
+Ports 1024-65535 = frei nutzbar
+-->
+
+---
+
+# Routing: Der Weg durchs Netz
+
+**Router = Postamt**
+- Entscheidet, wohin Pakete gehen
+- Findet besten Weg
+- Pakete können verschiedene Wege nehmen!
+
+**Traceroute:** Zeigt den Weg
+```bash
+traceroute google.de     # Mac/Linux
+tracert google.de        # Windows
+```
+
+<!--
+Live-Demo: traceroute zu google.de
+Zeigt alle Router auf dem Weg
+Pakete können verschiedene Wege nehmen
+Adaptives Routing bei Auslastung
+-->
 
 ---
 
@@ -83,17 +290,17 @@ Wer hat die Fleißaufgabe gemacht?
 
 # Wiederholung: OSI-Modell
 
-**Merksatz:** "**A**lle **d**eutschen **S**tudenten **t**rinken **v**erschiedene **S**orten **B**ier"
+**Merksatz:** "**A**lle **d**eutschen **S**tudierenden **t**rinken **v**erschiedene **S**orten **B**ier/Brause"
 
 | Schicht | Name | Merksatz |
 |---------|------|----------|
 | 7 | **A**nwendung | **A**lle |
 | 6 | **D**arstellung | **d**eutschen |
-| 5 | **S**itzung | **S**tudenten |
+| 5 | **S**itzung | **S**tudierenden |
 | 4 | **T**ransport | **t**rinken |
 | 3 | **V**ermittlung | **v**erschiedene |
 | 2 | **S**icherung | **S**orten |
-| 1 | **B**itübertragung | **B**ier |
+| 1 | **B**itübertragung | **B**ier/Brause |
 
 <!--
 Von oben nach unten: 7 bis 1
@@ -170,9 +377,9 @@ Overhead reduziert reale Geschwindigkeit
 **Ethernet-Frame:**
 
 ```
-┌────────┬────────┬──────┬─────────┬─────┐
-│Präambel│Ziel-MAC│Src-MAC│  Daten  │ FCS │
-└────────┴────────┴──────┴─────────┴─────┘
+┌────────┬────────┬────────┬────────┬─────┐
+│Präambel│Ziel-MAC│Src-MAC │ Daten  │ FCS │
+└────────┴────────┴────────┴────────┴─────┘
 ```
 
 <!--
@@ -256,6 +463,8 @@ ACK bestätigt Empfang
 
 ---
 
+<!-- _class: klausur -->
+
 # Schicht 7: Anwendung
 
 **Protokolle, die wir täglich nutzen:**
@@ -300,14 +509,15 @@ DNS macht Internet benutzbar
 # DNS-Hierarchie
 
 ```
-                    . (Root)
-                   /|\
-                  / | \
-               .de .com .org
-              /       \
-           hdm-stuttgart  google
+                  (Root)
+                     . 
+                   / | \
+                 /   |   \
+               .de .org .com
+               /           \
+         hdm-stuttgart   google
               |            |
-            www          mail
+            www           mail
 ```
 
 **FQDN:** `www.hdm-stuttgart.de.` (mit Punkt am Ende!)
@@ -362,34 +572,6 @@ MX = Mail Exchange
 
 ---
 
-# Hands-On: DNS erkunden (15 Min)
-
-**Terminal öffnen:**
-
-```bash
-# DNS-Auflösung
-nslookup hdm-stuttgart.de
-nslookup google.com
-
-# Detaillierter (Linux/Mac)
-dig hdm-stuttgart.de
-dig google.com MX
-
-# Weg verfolgen
-traceroute hdm-stuttgart.de   # Mac/Linux
-tracert hdm-stuttgart.de      # Windows
-```
-
-**Online-Tool:** https://toolbox.googleapps.com/apps/dig/
-
-<!--
-nslookup auf allen Systemen verfügbar
-dig zeigt mehr Details
-Verschiedene Record-Typen ausprobieren
--->
-
----
-
 <!-- _class: lead -->
 
 # HTTP im Detail
@@ -461,26 +643,6 @@ POST = nicht idempotent
 
 ---
 
-# Hands-On: HTTP beobachten (20 Min)
-
-**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
-
-**Beobachtet:** Anzahl Requests, Dateitypen (JS, CSS, Bilder...)
-
----
-
-<!-- _class: lead -->
-
-# Pause
-## 15 Minuten
-
----
-
 <!-- _class: lead -->
 
 # Teil 2: CSS
@@ -523,13 +685,14 @@ Separation of Concerns
 <style>p { color: blue; }</style>
 ```
 
-**Option 3: Inline** (vermeiden!)
+**Option 3: Inline als HTML-Attribute** (vermeiden!)
 ```html
 <p style="color: blue;">...</p>
 ```
 
 <!--
 Externe Datei = wiederverwendbar, cachebar
+Option 3 vermeiden aufgrund der hohen Spezifiät (sog. Code Smell)
 -->
 
 ---
@@ -641,7 +804,7 @@ IDs für JavaScript/Anker-Links
 # Selektoren: Kombinationen
 
 ```css
-/* Nachfahre (irgendwo drin) */
+/* Nachfahre (egal wie tief verschachtelt) */
 article p {
     line-height: 1.6;
 }
@@ -801,31 +964,214 @@ vw/vh = Viewport (sichtbarer Bereich)
 
 ---
 
-# Hands-On: Erste Styles (30 Min)
+<!-- _class: lead -->
 
-**Erstellt `style.css` für eure HTML-Seite:**
+# "Barrierefreiheit"
+## a11y – Accessibility
 
-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://codescripsi.es/
-- **Basics:** Alle machen
-- **Advanced:** Wer möchte
+<!-- _class: klausur -->
+
+# Wie nutzen Menschen das Web?
+
+| Eingabe | Nutzungsweise |
+|---------|---------------|
+| **Maus** | Klicken, Scrollen |
+| **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
+| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, JAWS) |
+| **Sprachsteuerung** | "Klicke auf Anmelden" |
+| **Augensteuerung** | Eye-Tracking |
+| **Switch-Geräte** | Ein-/Aus-Schalter |
+
+→ **Nicht alle nutzen Maus + Bildschirm!**
+
+<!--
+a11y = Accessibility (a + 11 Buchstaben + y)
+15% der Weltbevölkerung haben eine Behinderung
+Temporäre Einschränkungen: gebrochener Arm, helle Sonne
+Situative Einschränkungen: laute Umgebung, Baby auf dem Arm
+-->
+
+---
+
+<!-- _class: klausur -->
+
+# Warum "Barrierefreiheit"?
+
+**Rechtlich:**
+- EU: European Accessibility Act (seit Juni 2025 in Kraft!)
+- DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen
+
+**Ethisch:**
+- Teilhabe für alle Menschen
+- Digitale Inklusion
+
+**Praktisch:**
+- Bessere UX für **alle** (SEO, Mobile, ältere Menschen)
+- Größerer Markt (~15% der Bevölkerung)
+
+<!--
+European Accessibility Act: gilt jetzt für private Unternehmen
+"Barrierefreiheit" = gutes Design für alle
+Curb-Cut-Effekt: Rampen helfen auch Kinderwagen, Koffern...
+-->
+
+---
+
+# WCAG: Der Standard
+
+**W**eb **C**ontent **A**ccessibility **G**uidelines
+
+**4 Prinzipien (POUR):**
+
+| Prinzip | Bedeutung |
+|---------|-----------|
+| **Perceivable** | Wahrnehmbar – Inhalte müssen erkennbar sein |
+| **Operable** | Bedienbar – Funktionen müssen nutzbar sein |
+| **Understandable** | Verständlich – Inhalte müssen klar sein |
+| **Robust** | Robust – Funktioniert mit verschiedenen Technologien |
+
+<!--
+WCAG vom W3C (World Wide Web Consortium)
+Aktuelle Version: WCAG 2.2 (2023)
+Level: A (minimal), AA (Standard), AAA (optimal)
+Gesetzlich meist Level AA gefordert
+-->
+
+---
+
+# Perceivable: Wahrnehmbar
+
+**Textalternativen für Nicht-Text:**
+```html
+<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
+```
+
+**Kontrast:** Mindestens 4.5:1 für Text
+
+**Untertitel:** Videos brauchen Captions
+
+**Responsive:** Inhalte bei 200% Zoom nutzbar
+
+<!--
+Leeres alt="" für dekorative Bilder
+Contrast-Checker: WebAIM Contrast Checker
+Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
+-->
+
+---
+
+# Operable: Bedienbar
+
+**Tastaturzugänglich:**
+```css
+/* Fokus-Indikator NIE entfernen! */
+:focus {
+    outline: 2px solid blue;
+    outline-offset: 2px;
+}
+
+/* Wenn custom styling: */
+button:focus-visible {
+    box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
+}
+```
+
+**Genug Zeit:** Keine automatischen Timeouts ohne Warnung
+
+**Keine Blitze:** Nichts blinkt mehr als 3x pro Sekunde
+
+<!--
+Tab-Reihenfolge = DOM-Reihenfolge
+Skip-Links: "Zum Hauptinhalt springen"
+:focus-visible = nur bei Tastatur-Navigation
+-->
+
+---
+
+# Understandable: Verständlich
+
+**Sprache angeben:**
+```html
+<html lang="de">
+```
+
+**Konsistente Navigation:** Gleiche Elemente an gleicher Stelle
+
+**Fehler erklären:**
+```html
+<input type="email" aria-describedby="email-error">
+<p id="email-error" role="alert">
+    Bitte geben Sie eine gültige E-Mail-Adresse ein.
+</p>
+```
+
+<!--
+Screenreader nutzen lang für korrekte Aussprache
+Konsistenz reduziert kognitive Last
+Fehlermeldungen: konkret, hilfreich, am Feld
+-->
+
+---
+
+# Robust: Technisch solide
+
+**Semantisches HTML:**
+```html
+<!-- Schlecht -->
+<div class="button" onclick="...">Klick mich</div>
+
+<!-- Gut -->
+<button type="button">Klick mich</button>
+```
+
+**ARIA nur wenn nötig:**
+```html
+<!-- Nötig: Custom-Komponente -->
+<div role="tablist" aria-label="Produktkategorien">
+    <button role="tab" aria-selected="true">Schuhe</button>
+    <button role="tab" aria-selected="false">Jacken</button>
+</div>
+```
+
+<!--
+ARIA = Accessible Rich Internet Applications
+Erste Regel von ARIA: Wenn möglich, natives HTML nutzen!
+button hat eingebaute Tastatur-Unterstützung
+div-Button braucht JavaScript für Enter/Space
+-->
+
+---
+
+<!-- _class: klausur -->
+
+# Barrieren im Netz vermeiden (a11y)
+
+**Tastatur-Test:**
+- Alle Funktionen nur mit Tab + Enter nutzbar?
+- Fokus immer sichtbar?
+- Logische Tab-Reihenfolge?
+
+**Screenreader-Test:**
+- VoiceOver (Mac): `Cmd + F5`
+- NVDA (Windows): Gratis-Download
+
+**Tools:**
+- axe DevTools, WAVE (Browser-Extensions)
+- Lighthouse (in Chrome DevTools)
+
+<!--
+Automatische Tests finden ~30% der Probleme
+Manuelles Testen unverzichtbar
+Echte NutzerInnen einbeziehen = Gold-Standard
+-->
 
 ---
 
 <!-- _class: lead -->
 
-# Mittagspause
-## 60 Minuten
-
----
-
-<!-- _class: lead -->
-
-# Teil 3: Layouts
+# Teil 3: Layouts (optional)
 ## Flexbox & mehr
 
 ---
@@ -1003,6 +1349,8 @@ Oder gleichmäßig verteilt
 
 ---
 
+<!-- _class: klausur -->
+
 # Pseudo-Klassen
 
 ```css
@@ -1022,6 +1370,8 @@ Pseudo-Klassen = Zustände, kein JavaScript nötig!
 
 ---
 
+<!-- _class: klausur -->
+
 # Pseudo-Elemente
 
 ```css
@@ -1042,6 +1392,8 @@ content nur bei ::before/::after
 
 ---
 
+<!-- _class: klausur -->
+
 # Responsive Design
 
 **Media Queries:** CSS je nach Bildschirmgröße
@@ -1064,89 +1416,6 @@ Mobile First = Standard für klein, dann größere überschreiben
 
 ---
 
-# Hands-On: Layout bauen (60 Min)
-
-**Erstellt ein komplettes Layout:**
-
-1. **Header** mit Logo (links) und Navigation (rechts)
-2. **Main** mit zwei Spalten (Sidebar + Content)
-3. **Footer** mit zentriertem Copyright
-
-**Anforderungen:**
-- Nutzt Flexbox
-- Responsive: Auf Handy untereinander
-- Hover-Effekte für Links
-- Mindestens 2 Farben
-
-**Hilfe:** https://css-tricks.com/snippets/css/a-guide-to-flexbox/
-
----
-
-# Beispiel-Struktur
-
-```html
-<body>
-    <header>
-        <div class="logo">Meine Seite</div>
-        <nav>
-            <a href="#">Home</a>
-            <a href="#">Über</a>
-            <a href="#">Kontakt</a>
-        </nav>
-    </header>
-    
-    <main>
-        <aside>Sidebar</aside>
-        <article>Hauptinhalt</article>
-    </main>
-    
-    <footer>© 2026</footer>
-</body>
-```
-
----
-
-# Beispiel-CSS
-
-```css
-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 2rem;
-    background: #2c3e50;
-    color: white;
-}
-
-main {
-    display: flex;
-    gap: 2rem;
-    padding: 2rem;
-}
-
-aside {
-    flex: 0 0 250px;
-}
-
-article {
-    flex: 1;
-}
-
-@media (max-width: 768px) {
-    main { flex-direction: column; }
-    aside { flex: none; }
-}
-```
-
----
-
-<!-- _class: lead -->
-
-# Pause
-## 15 Minuten
-
----
-
 <!-- _class: lead -->
 
 # Teil 4: CSS vertiefen
@@ -1270,37 +1539,6 @@ Variablen machen's einfach
 
 ---
 
-# Hands-On: Styling finalisieren (45 Min)
-
-**Erweitert eure Seite:**
-
-1. **Transitions** für alle Links und Buttons
-2. **CSS-Variablen** für Farben
-3. **Hover-Effekte** für Karten/Boxen
-4. **Media Query** für Mobile
-
-**Bonus:**
-- Dark Mode Support
-- Animierte Navigation
-
----
-
-# Fleißaufgabe bis 24.01.
-
-**Baut eine vollständige Portfolio-Seite:**
-
-1. Mehrere Unterseiten (HTML-Dateien)
-2. Konsistentes Layout (Header, Footer, Navigation)
-3. Responsive Design (Mobile-freundlich)
-4. Mindestens ein Kontaktformular
-
-**Ressourcen:**
-- CSS lernen: https://codescripsi.es/
-- Flexbox: https://flexboxfroggy.com/
-- Grid: https://cssgridgarden.com/
-
----
-
 <!-- _class: lead -->
 
 # Fragen & Diskussion
@@ -1311,22 +1549,6 @@ Variablen machen's einfach
 
 ---
 
-# Zusammenfassung Termin 2
-
-**Netzwerke:**
-- OSI-Modell (7 Schichten) vs. TCP/IP (4 Schichten)
-- DNS: Namen → IP-Adressen
-- HTTP: Request/Response, Status-Codes
-
-**CSS:**
-- Selektoren (Element, Klasse, ID)
-- Box-Modell (Content, Padding, Border, Margin)
-- Flexbox für Layouts
-- Responsive Design mit Media Queries
-- Transitions für Animationen
-
----
-
 # Lizenz
 
 Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**

slides/2026-01-24-termin-3-interaktivitaet-javascript.md

@@ -9,23 +9,51 @@ title: "Termin 3: Interaktivität & JavaScript"
 ---
 
 <style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #d63384;
+  --color-dimmed: #4a4a6a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
 section {
   font-size: 1.7rem;
 }
 h2 {
-  color: var(--color-dimmed);
+  color: var(--color-highlight);
+}
+pre {
+  background: #0f0f23;
+  color: #d63384;
+  border-radius: 8px;
+  border-left: 3px solid #d63384;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a1a2e;
+  color: #d63384;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
 }
 </style>
 
 <!-- _class: invert -->
 <!-- _header: '' -->
+<!-- _footer: '' -->
 <!-- _backgroundColor: black -->
 
-![bg fit opacity:0.4](./assets/background-termin-3.png)
+![bg fit opacity:0.2](./assets/background-termin-2.png)
 
 # Grundlagen IT- und Internettechnik
 
-**223015b** · Modul "Technik 1" · 1. Semester
+**223015c** · Modul "Technik 1" · 1. Semester
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart