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 |
| `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:
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):
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.
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.
> **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
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Claude Opus 4.8