Deploy to netcup instead of Uberspace (#1)

Co-authored-by: Michael Czechowski <mail@librete.ch>

.claude/skills/marp/REFERENCE.md

@@ -1,373 +0,0 @@
-# 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)

.claude/skills/marp/SKILL.md

@@ -1,79 +0,0 @@
----
-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)

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

Makefile

@@ -96,28 +96,24 @@ install:
 
 # Optimize images (resize to max 1920px, requires nix-shell -p imagemagick)
 optimize-images:
-	@echo "Backing up originals to assets-original/..."
+	@echo "Creating optimized images from assets-original..."
-	@mkdir -p $(SLIDES_DIR)/assets-original
+	@mkdir -p $(SLIDES_DIR)/assets
-	@cp $(SLIDES_DIR)/assets/*.png $(SLIDES_DIR)/assets-original/ 2>/dev/null || true
+	@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'"'"' _ {} +'
-	@cp $(SLIDES_DIR)/assets/*.jpg $(SLIDES_DIR)/assets-original/ 2>/dev/null || true
+	@echo "Done! Optimized images in assets/"
-	@echo "Resizing images to max 1920px..."
-	@nix-shell -p imagemagick --run 'for img in $(SLIDES_DIR)/assets/*.png; do magick "$$img" -resize "1920x>" -quality 85 "$$img"; done'
-	@nix-shell -p imagemagick --run 'for img in $(SLIDES_DIR)/assets/*.jpg; do magick "$$img" -resize "1920x>" -quality 85 "$$img"; done'
-	@echo "Done! Originals backed up in assets-original/"
 
 # Deploy slides (full build)
 deploy: build
 	@echo "Deploying slides..."
 	@echo "Copying HTML files..."
-	scp $(BUILD_DIR)/*.html tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/
+	scp $(BUILD_DIR)/*.html netcup:/srv/libretech-static/decks/hdm/223015c/
 	@echo "Copying assets..."
-	scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/
+	scp -r $(BUILD_DIR)/assets/ netcup:/srv/libretech-static/decks/hdm/223015c/
 	@echo "Copying materials..."
-	scp -r $(BUILD_DIR)/materials/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/ 2>/dev/null || true
+	scp -r $(BUILD_DIR)/materials/ netcup:/srv/libretech-static/decks/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 $(BUILD_DIR)/*.html netcup:/srv/libretech-static/decks/hdm/223015c/
-	scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/
+	scp -r $(BUILD_DIR)/assets/ netcup:/srv/libretech-static/decks/hdm/223015c/
-	scp -r $(BUILD_DIR)/materials/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/ 2>/dev/null || true
+	scp -r $(BUILD_DIR)/materials/ netcup:/srv/libretech-static/decks/hdm/223015c/ 2>/dev/null || true

README.md

@@ -1,75 +0,0 @@
-# 223015c – Grundlagen IT- und Internettechnik
-
-**Modul "Technik 1"** · 1. Semester · Digital- und Medienwirtschaft
-Hochschule der Medien Stuttgart · Wintersemester 2025/26
-
----
-
-## Über dieses Modul
-
-> *Internettechnologien 1 – "Technische Grundlagen von IT-Projekten"*
-
-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.
-
-### Termine
-
-| # | Datum | Thema |
-|---|-------|-------|
-| 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:
-- 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 · mail@librete.ch
-
----
-
-## Development
-
-### Voraussetzungen
-
-```bash
-npm install
-```
-
-### Commands
-
-```bash
-npm run dev        # Development server (http://localhost:8080)
-npm run build      # Build slides
-npm run export:pdf # Export to PDF
-```
-
-### Makefile
-
-```bash
-make dev    # Start development server
-make build  # Build slides
-make pdf    # Export to PDF
-make clean  # Remove generated files
-```
-
-## Projektstruktur
-
-```
-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
-
-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/",
+    "build": "marp index.md --allow-local-files -o build/index.html && cp -r assets build/",
-    "dev": "marp --server ./",
+    "dev": "marp --server --allow-local-files -p 1313 ./",
-    "watch": "marp --watch index.md",
+    "watch": "marp --watch --allow-local-files index.md",
-    "export:pdf": "marp index.md --pdf -o build/index.pdf",
+    "export:pdf": "marp index.md --allow-local-files --pdf -o build/index.pdf",
-    "export:html": "marp index.md --html -o build/index.html && cp -r assets build/",
+    "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

@@ -22,19 +22,36 @@ cat > "$BUILD_DIR/index.html" << 'HEADER'
     }
     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;
-      margin-bottom: 1rem;
       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>
@@ -66,13 +83,23 @@ for html in $(ls "$BUILD_DIR"/2*.html 2>/dev/null | sort); do
   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
-  <a href="$filename" class="termin">
+  <div class="termin-row">
-    <h2>$termin_label</h2>
+    <a href="$filename" class="termin">
-    <span class="date">$formatted_date</span>
+      <h2>$termin_label</h2>
-    <span class="topic">$topic</span>
+      <span class="date">$formatted_date</span>
-  </a>
+      <span class="topic">$topic</span>
+    </a>
+    $pdf_link
+  </div>
 LINK
 done
 

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

@@ -9,19 +9,53 @@ 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
 
@@ -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
+- Bits, Bytes, Hexadezimal (8Bits = 2 * 4Bits = 16 * 16 Hexadezimalzahlen)
-- HTML-Grundlagen & semantische Tags
 
-**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: Styling
-- Hands-On: Eure Seite stylen
+
+---
+
+# 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)
+                  (Root)
-                   /|\
+                     . 
-                  / | \
+                   / | \
-               .de .com .org
+                 /   |   \
-              /       \
+               .de .org .com
-           hdm-stuttgart  google
+               /           \
+         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/
+<!-- _class: klausur -->
-- **Basics:** Alle machen
+
-- **Advanced:** Wer möchte
+# 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
+# Teil 3: Layouts (optional)
-## 60 Minuten
-
----
-
-<!-- _class: lead -->
-
-# Teil 3: Layouts
 ## 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,19 +9,47 @@ 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