From 102a6d53e595106d2e6853383999d288ec65d9f3 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@librete.ch>
Date: Fri, 3 Jul 2026 13:37:01 +0200
Subject: [PATCH] 223015b+c klausurfragen: sose26-klausurset kuratiert +
 wording-fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 223015c: G7 id-selektor neu (ersetzt spezifität-ansatz), B10 encapsulation
  + E3 gesamtablauf disabled (tcp-handshake nie ausreichend behandelt),
  G6 ohne hsl + farbname/color code, H6 curb-cut-wording (genau zwei
  beispiele, klickflächen/kontrast/tab+enter), H7 attribute statt tags
  + screenreader-distraktor + tastatur-wording, B7b dns: domain->ip
- 223015b: J22 ohne buch-lesen + überwiegend unabhängig, K2 sie-form
  + taschenrechner-hinweis, strg/cmd+f
- .gitignore: slides/**/*-INTERN.md (lokale klausur-previews, nie deployen)
- 223015b/CLAUDE.md: deck-doku + downstream-verweis aufs klausur-repo

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .gitignore                      |  4 ++
 slides/223015b/CLAUDE.md        | 34 +++++++++++++++
 slides/223015b/klausurfragen.md | 20 +++++----
 slides/223015c/klausurfragen.md | 74 +++++++++++----------------------
 4 files changed, 75 insertions(+), 57 deletions(-)
 create mode 100644 slides/223015b/CLAUDE.md

diff --git a/.gitignore b/.gitignore
index a8d908a..1a9f21e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,3 +34,7 @@ hdm-internettechnik-slides/
 *.tmp
 *.bak
 .idea
+
+# Interne Klausur-Previews – NIE committen/deployen
+slides/**/*-INTERN.md
+slides/*-INTERN.md
diff --git a/slides/223015b/CLAUDE.md b/slides/223015b/CLAUDE.md
new file mode 100644
index 0000000..8590a7b
--- /dev/null
+++ b/slides/223015b/CLAUDE.md
@@ -0,0 +1,34 @@
+# CLAUDE.md — 223015b lecture deck
+
+Marp lecture slides + master question catalog for HdM Stuttgart course **223015b — „Dateiformate, Schnittstellen, Speichermedien & Distributionswege"**. Author: Michael Czechowski, SoSe 2026. This directory is the **source of truth**; the exam artifacts (Moodle XML) are derived downstream (see [Downstream](#downstream)).
+
+## Files
+
+| File | Role |
+|---|---|
+| `00-intro.md` | Intro / organizational deck |
+| `01-grundlagen-text-audio.md` | Grundlagen: Text & Audio |
+| `02-bild-audio-video.md` | Bild, Audio, Video |
+| `03-speichermedien-schnittstellen.md` | Speichermedien & Schnittstellen |
+| `04-distribution-apis-zukunft.md` | Distribution, APIs, Zukunft |
+| `05-vertiefung-offene-fragen.md` | Vertiefung / offene Fragen |
+| `klausurfolien.md` | Exam-review slides |
+| `klausurfragen.md` | **Master question catalog — 122 Fragen** (`[MC]/[MM]/[MATCH]/[ORDER]/[ESSAY]/[SHORTANS]/[NUMERIC]/[CLOZE]`) |
+| `assets/`, `materials/` | Images and supporting material |
+
+All decks are **Marp** Markdown (`marp: true`, theme `gaia`) with a shared inline `<style>` block. Highlight color for this course: `#1e5f8a` (blue). Sibling deck: `../223015c/` (Internettechnik, highlight `#d63384`).
+
+## Conventions
+
+- Each question in `klausurfragen.md` = `### <ID> – <title>` + `**Thema:**` + `**Punkte:**` + `**Typ:**` + body + `> **Feedback:**`/`> **Musterlösung:**`. Keep this shape — downstream tooling parses `**Thema:**` and `**Typ:**`.
+- Correct MC options marked `- [x] **…** ✅`; matching as a 2-column table; ordering as a numbered list.
+- `marp` CLI renders to HTML/PDF: `marp <file>.md` (see marp-team/marp-cli).
+
+## Downstream
+
+The **exam question bank + Moodle Quiz XML** live in a separate repo:
+
+- Local: `/home/mwc/Documents/HDM/klausur/`
+- Git: `ssh://tengo@git.librete.ch:41240/libretech/2026-hdm-klausur.git`
+
+There, `klausurfragen-b-course-dateiformate.md` is a **curated subset (81/122)** of this deck's `klausurfragen.md`, and the questions are exported as Moodle XML for import. **Edit questions here first**, then sync the subset + regenerate/patch the XML downstream (that repo's CLAUDE.md + `moodle-quiz-xml` skill document the XML format and workflow).
diff --git a/slides/223015b/klausurfragen.md b/slides/223015b/klausurfragen.md
index fb00fdd..b38f28a 100644
--- a/slides/223015b/klausurfragen.md
+++ b/slides/223015b/klausurfragen.md
@@ -592,10 +592,10 @@ Was ist der fundamentale Unterschied zwischen analoger und digitaler Speicherung
 Ordnen Sie jede Eigenschaft zu: Vorteil von Analog oder Vorteil von Digital?
 
 **Eigenschaft:**
-- Kein Abspielgerät nötig (Buch lesen)
+- Kein Abspielgerät nötig
 - Bit-identische Kopien ohne Qualitätsverlust
-- Unabhängig von Strom und Internet
-- Einfache Durchsuchbarkeit (Strg+F)
+- Überwiegend unabhängig von Strom und Internet
+- Einfache Durchsuchbarkeit (bspw. Strg/Cmd+F)
 - Haptisches Erlebnis
 
 **Zuordnen zu:** Analog · Digital
@@ -611,10 +611,10 @@ Ordnen Sie jede Eigenschaft zu: Vorteil von Analog oder Vorteil von Digital?
 
 | Eigenschaft | Vorteil von |
 |---|---|
-| Kein Abspielgerät nötig (Buch lesen) | Analog |
+| Kein Abspielgerät nötig | Analog |
 | Bit-identische Kopien ohne Qualitätsverlust | Digital |
-| Unabhängig von Strom und Internet | Analog |
-| Einfache Durchsuchbarkeit (Strg+F) | Digital |
+| Überwiegend unabhängig von Strom und Internet | Analog |
+| Einfache Durchsuchbarkeit (bspw. Strg/Cmd+F) | Digital |
 | Haptisches Erlebnis | Analog |
 
 > **Feedback:** Analog: physisch, unabhängig, haptisch – aber Verschleiß und Generationsverlust. Digital: perfekte Kopien, durchsuchbar, korrigierbar – aber abhängig von Technik und Formaten.
@@ -684,7 +684,9 @@ Was ist ein Pixel in einem digitalen Bild?
 **Punkte:** 2
 **Typ:** `[NUMERIC]`
 
-Ein Bild ist 1920 × 1080 Pixel groß und nutzt 24-Bit-Farbtiefe (True Color). Wie groß ist das Bild unkomprimiert in Megabyte? (Runde auf eine Dezimalstelle)
+Ein Bild ist 1920 × 1080 Pixel groß und nutzt 24-Bit-Farbtiefe (True Color). Wie groß ist das Bild unkomprimiert in Megabyte? (Runden Sie auf eine Dezimalstelle.)
+
+**Hinweis:** Der Taschenrechner des Computers darf verwendet werden.
 
 **Formel:** Breite × Höhe × (Farbtiefe / 8) = Bytes
 
@@ -696,7 +698,9 @@ Ein Bild ist 1920 × 1080 Pixel groß und nutzt 24-Bit-Farbtiefe (True Color). W
 **Punkte:** 2
 **Typ:** `[NUMERIC]`
 
-Ein Bild ist 1920 × 1080 Pixel groß und nutzt 24-Bit-Farbtiefe (True Color). Wie groß ist das Bild unkomprimiert in Megabyte? (Runde auf eine Dezimalstelle)
+Ein Bild ist 1920 × 1080 Pixel groß und nutzt 24-Bit-Farbtiefe (True Color). Wie groß ist das Bild unkomprimiert in Megabyte? (Runden Sie auf eine Dezimalstelle.)
+
+**Hinweis:** Der Taschenrechner des Computers darf verwendet werden.
 
 **Formel:** Breite × Höhe × (Farbtiefe / 8) = Bytes
 
diff --git a/slides/223015c/klausurfragen.md b/slides/223015c/klausurfragen.md
index bd78ac7..4833c4f 100644
--- a/slides/223015c/klausurfragen.md
+++ b/slides/223015c/klausurfragen.md
@@ -416,7 +416,7 @@ Ordnen Sie jedem Begriff seine Beschreibung bzw. sein Beispiel zu.
 **Was ist das? / Beispiel (ungeordnet):**
 - Ein netzwerkfähiger Rechner (Laptop, Smartphone)
 - Menschenlesbarer Name – z. B. `hdm-stuttgart.de`
-- „Telefonbuch": übersetzt einen Namen in eine IP
+- „Telefonbuch": übersetzt eine Domain in eine IP
 - Nummer eines Programms bzw. Dienstes – z. B. `80`, `443`, `22`
 - Hardware-Adresse der Netzwerkkarte – z. B. `aa:bb:cc:dd:ee:ff`
 - Globale Adresse im Internet – z. B. `212.132.79.37`
@@ -435,11 +435,11 @@ Ordnen Sie jedem Begriff seine Beschreibung bzw. sein Beispiel zu.
 | IP-Adresse | Globale Adresse im Internet – z. B. `212.132.79.37` |
 | MAC-Adresse | Hardware-Adresse der Netzwerkkarte – z. B. `aa:bb:cc:dd:ee:ff` |
 | Port | Nummer eines Programms bzw. Dienstes – z. B. `80`, `443`, `22` |
-| DNS | „Telefonbuch": übersetzt einen Namen in eine IP |
+| DNS | „Telefonbuch": übersetzt eine Domain in eine IP |
 | Domain | Menschenlesbarer Name – z. B. `hdm-stuttgart.de` |
 | Host | Ein netzwerkfähiger Rechner (Laptop, Smartphone) |
 
-> **Feedback:** IP = global, MAC = lokal (Hardware), Port = Programm auf dem Host, DNS = Name→IP, Domain = der lesbare Name, Host = der Rechner selbst.
+> **Feedback:** IP = global, MAC = lokal (Hardware), Port = Programm auf dem Host, DNS = Domain→IP, Domain = der lesbare Name, Host = der Rechner selbst.
 
 ---
 
@@ -544,6 +544,8 @@ Ordnen Sie jeder Portnummer den passenden Dienst zu.
 
 ---
 
+<!-- _class: disable -->
+
 ### B10 – Encapsulation: Reihenfolge sortieren
 **Thema:** Encapsulation – Reihenfolge
 **Punkte:** 2
@@ -551,21 +553,6 @@ Ordnen Sie jeder Portnummer den passenden Dienst zu.
 
 Sortieren Sie die Dateneinheiten in der Reihenfolge, wie sie beim Senden entstehen (von innen nach außen):
 
-- Frame
-- Paket
-- Segment
-- Daten
-
-
----
-
-### B10 – Encapsulation: Reihenfolge sortieren (Lösung)
-**Thema:** Encapsulation – Reihenfolge
-**Punkte:** 2
-**Typ:** `[ORDER]`
-
-Sortieren Sie die Dateneinheiten in der Reihenfolge, wie sie beim Senden entstehen (von innen nach außen):
-
 1. Daten
 2. Segment
 3. Paket
@@ -948,6 +935,8 @@ Sie geben `https://hdm-stuttgart.de` in die Adresszeile ein. Was passiert **vor*
 
 ---
 
+<!-- _class: disable -->
+
 ### E3 – Gesamtablauf: DNS, TCP, HTTP erklären
 **Thema:** Gesamtablauf – Schritte erklären
 **Punkte:** 3
@@ -955,16 +944,6 @@ Sie geben `https://hdm-stuttgart.de` in die Adresszeile ein. Was passiert **vor*
 
 Erklären Sie die drei Hauptphasen beim Aufruf einer Webseite: **DNS-Auflösung**, **TCP-Verbindungsaufbau** und **HTTP-Request/Response**. Beschreiben Sie für jede Phase: (1) was passiert, (2) warum sie vor der nächsten kommen muss.
 
-
----
-
-### E3 – Gesamtablauf: DNS, TCP, HTTP erklären (Lösung)
-**Thema:** Gesamtablauf – Schritte erklären
-**Punkte:** 3
-**Typ:** `[ESSAY]`
-
-Erklären Sie die drei Hauptphasen beim Aufruf einer Webseite: **DNS-Auflösung**, **TCP-Verbindungsaufbau** und **HTTP-Request/Response**. Beschreiben Sie für jede Phase: (1) was passiert, (2) warum sie vor der nächsten kommen muss.
-
 > **Musterlösung:** **DNS-Auflösung:** Der Domain-Name wird in eine IP-Adresse übersetzt. Muss zuerst kommen, weil TCP nur mit IP-Adressen arbeiten kann. **TCP-Verbindungsaufbau:** Der 3-Way-Handshake (SYN → SYN-ACK → ACK) baut eine zuverlässige Verbindung auf. Muss vor HTTP kommen, weil HTTP auf TCP aufsetzt und eine bestehende Verbindung braucht. **HTTP-Request/Response:** Der Browser sendet GET, der Server antwortet mit 200 OK + HTML. Kann erst nach TCP-Verbindung stattfinden.
 
 ---
@@ -1110,14 +1089,12 @@ Ordnen Sie jede Schreibweise für die Farbe Rot ihrer Notation zu.
 - `#FF0000`
 - `rgb(255, 0, 0)`
 - `rgba(255, 0, 0, 0.5)`
-- `hsl(0, 100%, 50%)`
 
 **Notation (ungeordnet):**
-- HSL (Hue, Saturation, Lightness)
 - RGBA (RGB + Alpha/Transparenz)
 - RGB (Red Green Blue)
 - Hexadezimal
-- Schlüsselwort
+- Farbname / Color Code
 
 ---
 
@@ -1130,13 +1107,12 @@ Ordnen Sie jede Schreibweise für die Farbe Rot ihrer Notation zu.
 
 | Schreibweise | Notation |
 |---|---|
-| `red` | Schlüsselwort |
+| `red` | Farbname / Color Code |
 | `#FF0000` | Hexadezimal |
 | `rgb(255, 0, 0)` | RGB (Red Green Blue) |
 | `rgba(255, 0, 0, 0.5)` | RGBA (RGB + Alpha/Transparenz) |
-| `hsl(0, 100%, 50%)` | HSL (Hue, Saturation, Lightness) |
 
-> **Feedback:** Fünf Wege, dieselbe Farbe anzugeben. RGBA ergänzt RGB um einen Alpha-Kanal (Transparenz). HSL beschreibt Farbton, Sättigung und Helligkeit – intuitiver beim manuellen Anpassen.
+> **Feedback:** Vier Wege, dieselbe Farbe anzugeben. RGBA ergänzt RGB um einen Alpha-Kanal (Transparenz).
 
 ---
 
@@ -1156,7 +1132,7 @@ Mit welchem CSS-Selektor sprechen Sie **gezielt dieses eine Element über seine
 - [ ] `#intro { color: red; }`
 - [ ] `.intro { color: red; }`
 - [ ] `p { color: red; }`
-- [ ] `p #intro { color: red; }`
+- [ ] `ul > li#intro { color: red; }`
 
 ---
 
@@ -1176,9 +1152,9 @@ Mit welchem CSS-Selektor sprechen Sie **gezielt dieses eine Element über seine
 - [x] **`#intro { color: red; }`**
 - [ ] `.intro { color: red; }`
 - [ ] `p { color: red; }`
-- [ ] `p #intro { color: red; }`
+- [ ] `ul > li#intro { color: red; }`
 
-> **Feedback:** Der ID-Selektor beginnt mit `#` und wählt das Element mit dem passenden `id`-Attribut; eine `id` darf pro Seite nur einmal vorkommen – er adressiert genau ein Element. Abgrenzung: `.intro` = Klassen-Selektor, `p` = Element-Selektor (trifft alle `<p>`), `p #intro` = Nachfahren-Selektor.
+> **Feedback:** Der ID-Selektor beginnt mit `#` und wählt das Element mit dem passenden `id`-Attribut; eine `id` darf pro Seite nur einmal vorkommen – er adressiert genau ein Element. Abgrenzung: `.intro` = Klassen-Selektor (die Klasse hier heißt zudem `text`), `p` = Element-Selektor (trifft alle `<p>`), `ul > li#intro` = Kind-Kombinator – trifft nur ein `<li>` mit dieser ID direkt unter einem `<ul>`, nie das gegebene `<p>`.
 
 ---
 
@@ -1238,7 +1214,7 @@ Ordnen Sie jedem Eingabegerät seine Nutzungsweise zu.
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Erklären Sie, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle Benutzenden hat. Nennen Sie mindestens zwei konkrete Beispiele.
+Erklären Sie, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle Benutzenden hat (**Curb-Cut-Effekt**). Nennen Sie genau zwei Beispiele aus der alltäglichen Benutzung von Computern und Laptops.
 
 
 ---
@@ -1248,9 +1224,9 @@ Erklären Sie, warum barrierefreie Gestaltung nicht nur für Menschen mit Behind
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Erklären Sie, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle Benutzenden hat. Nennen Sie mindestens zwei konkrete Beispiele.
+Erklären Sie, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle Benutzenden hat (**Curb-Cut-Effekt**). Nennen Sie genau zwei Beispiele aus der alltäglichen Benutzung von Computern und Laptops.
 
-> **Musterlösung:** Barrierefreiheit verbessert die UX für alle: (1) SEO – Alt-Texte und semantisches HTML helfen Suchmaschinen, die Seite besser zu verstehen → besseres Ranking. (2) Mobile – viele barrierefreie Prinzipien (z. B. große Tippflächen, guter Kontrast) sind auch für Mobilgeräte im Sonnenlicht wichtig. (3) Ältere Menschen – Sehschwäche, motorische Einschränkungen betreffen einen großen Anteil der Bevölkerung. Der Markt: ~15% Menschen mit Behinderung + ~20% ältere Menschen.
+> **Musterlösung (je zwei ausreichend):** Curb-Cut-Effekt = barrierefreie Gestaltung hilft allen. (1) Große Klickflächen – nötig bei motorischen Einschränkungen (z. B. Parkinson), helfen aber allen auf kleinen Screens oder mit Touchpad. (2) Guter Kontrast – nötig bei Sehschwäche, hilft aber allen bei Sonnenlicht auf dem Display. (3) Untertitel – nötig für Gehörlose, helfen allen in lauter Umgebung. (4) Tastaturbedienung (bspw. Navigation mit Tab- und Enter-Taste) – nötig bei motorischen Einschränkungen, nutzen auch Power-User (Shortcuts). Analogie: Bordsteinabsenkung für Rollstühle nutzt auch Kinderwagen und Rollkoffern.
 
 ---
 
@@ -1261,10 +1237,10 @@ Erklären Sie, warum barrierefreie Gestaltung nicht nur für Menschen mit Behind
 
 Sie möchten eine Webseite auf Barrierefreiheit testen, ohne assistive Technologie zu installieren. Was machen Sie?
 
-- [ ] Sie scrollen durch die Seite und schauen, ob sie schön aussieht.
-- [ ] Sie navigieren nur mit Tab + Enter durch die Seite und prüfen: Erreichen Sie alle Funktionen? Ist der Fokus immer sichtbar? Ist die Tab-Reihenfolge logisch?
-- [ ] Sie installieren einen Screenreader und lassen die Seite vorlesen.
-- [ ] Sie öffnen den Quellcode und zählen die barrierefreien Tags.
+- [ ] Sie scrollen durch die Seite und schauen, ob sie ansprechend gestaltet ist.
+- [ ] Sie navigieren nur mit Tab- und Enter-Taste durch die Seite und prüfen: Erreichen Sie alle Funktionen? Ist der Fokus immer sichtbar? Ist die Tab-Reihenfolge logisch?
+- [ ] Sie installieren einen Screenreader, lassen die Seite vorlesen und protokollieren, welche Elemente ignoriert wurden.
+- [ ] Sie öffnen den Quellcode und zählen die Barrierefreiheits-Attribute (bspw. `aria-label`).
 
 
 ---
@@ -1276,10 +1252,10 @@ Sie möchten eine Webseite auf Barrierefreiheit testen, ohne assistive Technolog
 
 Sie möchten eine Webseite auf Barrierefreiheit testen, ohne assistive Technologie zu installieren. Was machen Sie?
 
-- [ ] Sie scrollen durch die Seite und schauen, ob sie schön aussieht.
-- [x] **Sie navigieren nur mit Tab + Enter durch die Seite und prüfen: Erreichen Sie alle Funktionen? Ist der Fokus immer sichtbar? Ist die Tab-Reihenfolge logisch?**
-- [ ] Sie installieren einen Screenreader und lassen die Seite vorlesen.
-- [ ] Sie öffnen den Quellcode und zählen die barrierefreien Tags.
+- [ ] Sie scrollen durch die Seite und schauen, ob sie ansprechend gestaltet ist.
+- [x] **Sie navigieren nur mit Tab- und Enter-Taste durch die Seite und prüfen: Erreichen Sie alle Funktionen? Ist der Fokus immer sichtbar? Ist die Tab-Reihenfolge logisch?**
+- [ ] Sie installieren einen Screenreader, lassen die Seite vorlesen und protokollieren, welche Elemente ignoriert wurden.
+- [ ] Sie öffnen den Quellcode und zählen die Barrierefreiheits-Attribute (bspw. `aria-label`).
 
-> **Feedback:** Der Tastatur-Test ist der schnellste barrierefreie Selbsttest: Nur Tab + Enter benutzen. Wenn man so eine Funktion nicht erreicht kann, ist sie für Tastatur-Benutzende (und damit auch für Screenreader-Benutzende) nicht zugänglich. Tools wie axe DevTools oder Lighthouse automatisieren ~30% der Checks.
+> **Feedback:** Der Tastatur-Test ist der schnellste barrierefreie Selbsttest: Nur Tab- und Enter-Taste benutzen. Wenn man so eine Funktion nicht erreichen kann, ist sie für Tastatur-Benutzende (und damit auch für Screenreader-Benutzende) nicht zugänglich. Tools wie axe DevTools oder Lighthouse automatisieren ~30% der Checks.