223015b+c klausurfragen: sose26-klausurset kuratiert + wording-fixes
- 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>
This commit is contained in:
Claude Opus 4.8
@@ -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).
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user