public/uni
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
102a6d53e595106d2e6853383999d288ec65d9f3
uni/slides/223015c/klausurfragen.md
T
libretechandClaude Opus 4.8 102a6d53e5 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>
2026-07-03 13:37:01 +02:00

1262 lines
41 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: ""
footer: ""
title: "Fragenkatalog – IT-Grundlagen (223015c)"
---
<style>
:root {
--color-foreground: #1a1a2e;
--color-highlight: #d63384;
--color-dimmed: #4a4a6a;
}
section.invert {
--color-foreground: #fff;
}
section {
font-size: 1.325rem;
}
h1 {
color: #a02060; /* darker raspberry */
}
section.invert h1 {
color: #fff;
}
h2 {
color: #1f2937; /* dark gray, almost black */
}
pre {
background: #0f0f23;
color: #f8f8f8;
border-radius: 8px;
}
pre code {
background: transparent;
color: inherit;
}
code {
background: #0f0f23;
color: #d63384;
padding: 0.15em 0.4em;
border-radius: 4px;
}
section code:not(.hljs) { color: #d63384 !important; }
section code.hljs { color: #f8f8f8 !important; }
a {
color: var(--color-highlight);
}
section.disable {
opacity: 0.3;
}
</style>
# Klausurfragen – 223015c
**IT-Grundlagen · HdM Stuttgart · M. Czechowski**
<small>Stand: 24.06.2026</small>
---
> **Legende – Moodle XML-Typen:**
> `[MC]` = `multichoice` (einzelne Auswahl)
> `[MM]` = `multichoice` + `<single>false</single>` (Mehrfachauswahl)
> `[MATCH]` = `matching` (Zuordnung)
> `[ORDER]` = `ordering` (Reihenfolge)
> `[ESSAY]` = `essay` (Freitext, manuell bewertet)
> `[SHORTANS]` = `shortanswer` (Stichwort/Satz, automatisch geprüft)
> `[NUMERIC]` = `numerical` (Zahlenwert ± Toleranz)
> `[CLOZE]` = `cloze` (Lückentext, gemischt)`
---
<!-- _class: lead -->
## BLOCK A – Von-Neumann-Architektur
---
### A3 – Von-Neumann: Was wird ermöglicht?
**Thema:** Von-Neumann – Bedeutung
**Punkte:** 2
**Typ:** `[MM]` (Mehrfachauswahl)
Welche der folgenden Aussagen werden durch die Von-Neumann-Architektur ermöglicht? (Mehrere Antworten möglich)
- [ ] Betriebssysteme können verschiedene Programme aus dem Speicher laden.
- [ ] Apps können ohne Hardwareänderung installiert werden.
- [ ] Der Computer kann nur ein einziges Programm gleichzeitig ausführen.
- [ ] Multitasking wird möglich.
- [ ] Die Hardware muss für jedes neue Programm physisch umgebaut werden.
- [ ] Software kann aktualisiert werden, ohne die Hardware zu ändern.
---
### A3 – Von-Neumann: Was wird ermöglicht? (Lösung)
**Thema:** Von-Neumann – Bedeutung
**Punkte:** 2
**Typ:** `[MM]` (Mehrfachauswahl)
Welche der folgenden Aussagen werden durch die Von-Neumann-Architektur ermöglicht? (Mehrere Antworten möglich)
- [x] **Betriebssysteme können verschiedene Programme aus dem Speicher laden.**
- [x] **Apps können ohne Hardwareänderung installiert werden.**
- [ ] Der Computer kann nur ein einziges Programm gleichzeitig ausführen.
- [x] **Multitasking wird möglich.**
- [ ] Die Hardware muss für jedes neue Programm physisch umgebaut werden.
- [x] **Software kann aktualisiert werden, ohne die Hardware zu ändern.**
> **Feedback:** Kern der Von-Neumann-Architektur: Programme und Daten teilen denselben Speicher → Programme sind austauschbare Daten. Ohne das: kein Betriebssystem, keine Apps, kein Multitasking, keine Updates.
---
### A5 – Von-Neumann vs. Harvard-Architektur
**Thema:** Von-Neumann – Abgrenzung
**Punkte:** 2
**Typ:** `[MC]`
Was unterscheidet die Von-Neumann-Architektur von der Harvard-Architektur?
- [ ] Von-Neumann nutzt mehrere CPUs, Harvard nur eine.
- [ ] Bei Von-Neumann liegen Programme und Daten im selben Speicher; die Harvard-Architektur trennt Befehls- und Datenspeicher physisch.
- [ ] Die Harvard-Architektur kann keine Schleifen ausführen.
- [ ] Es gibt keinen Unterschied – beide Begriffe meinen dasselbe.
---
### A5 – Von-Neumann vs. Harvard-Architektur (Lösung)
**Thema:** Von-Neumann – Abgrenzung
**Punkte:** 2
**Typ:** `[MC]`
Was unterscheidet die Von-Neumann-Architektur von der Harvard-Architektur?
- [ ] Von-Neumann nutzt mehrere CPUs, Harvard nur eine.
- [x] **Bei Von-Neumann liegen Programme und Daten im selben Speicher; die Harvard-Architektur trennt Befehls- und Datenspeicher physisch.**
- [ ] Die Harvard-Architektur kann keine Schleifen ausführen.
- [ ] Es gibt keinen Unterschied – beide Begriffe meinen dasselbe.
> **Feedback:** Kernunterschied: gemeinsamer Speicher (Von-Neumann) gegenüber getrennten Speichern für Befehle und Daten (Harvard). Der gemeinsame Speicher macht Programme zu austauschbaren Daten – die Grundlage für ladbare Software.
---
<!-- _class: lead -->
## BLOCK B – Netzwerk-Grundlagen (Client-Server & TCP/IP)
---
### B0 – Client-Server: Begriffe zuordnen
**Thema:** Client-Server-Modell – Grundbegriffe
**Punkte:** 3
**Typ:** `[MATCH]`
Ordnen Sie jedem Begriff des Client-Server-Modells seine Beschreibung zu.
**Begriff:**
- Host
- Client
- Server
- Request
- Response
- Protokoll
**Beschreibung (ungeordnet):**
- Regeln für die Kommunikation (z. B. TCP, HTTP)
- Die Antwort des Servers
- Die Anfrage des Clients
- Host bzw. Anwendung mit der Antwort (z. B. Webserver)
- Host bzw. Anwendung mit einer Anfrage (z. B. Browser)
- Ein netzwerkfähiger Rechner (Laptop, Smartphone, Display in der S-Bahn)
---
### B0 – Client-Server: Begriffe zuordnen (Lösung)
**Thema:** Client-Server-Modell – Grundbegriffe
**Punkte:** 3
**Typ:** `[MATCH]`
Ordnen Sie jedem Begriff des Client-Server-Modells seine Beschreibung zu.
| Begriff | Beschreibung |
|---|---|
| Host | Ein netzwerkfähiger Rechner (Laptop, Smartphone, Display in der S-Bahn) |
| Client | Host bzw. Anwendung mit einer Anfrage (z. B. Browser) |
| Server | Host bzw. Anwendung mit der Antwort (z. B. Webserver) |
| Request | Die Anfrage des Clients |
| Response | Die Antwort des Servers |
| Protokoll | Regeln für die Kommunikation (z. B. TCP, HTTP) |
> **Feedback:** Das Web folgt dem Client-Server-Modell: Ein Client sendet einen Request, ein Server liefert eine Response – nach den Regeln eines Protokolls. Host = der Rechner, Client/Server = die Rollen, die er dabei einnimmt.
---
### B0a – Was ist das Client-Server-Modell?
**Thema:** Client-Server-Modell – Grundprinzip
**Punkte:** 1
**Typ:** `[MC]`
Ein Browser fordert eine Webseite an, ein Webserver liefert sie aus. Wie heißt dieses Grundmodell des Web?
- [ ] Client-Server-Modell: Ein Client stellt eine Anfrage (Request), ein Server antwortet (Response).
- [ ] Peer-to-Peer-Modell: Alle Geräte sind gleichberechtigt und tauschen direkt Daten aus.
- [ ] Broadcast-Modell: Ein Server sendet ununterbrochen an alle Geräte im Netz.
- [ ] Master-Slave-Modell: Der Browser steuert den Server fern.
---
### B0a – Was ist das Client-Server-Modell? (Lösung)
**Thema:** Client-Server-Modell – Grundprinzip
**Punkte:** 1
**Typ:** `[MC]`
Ein Browser fordert eine Webseite an, ein Webserver liefert sie aus. Wie heißt dieses Grundmodell des Web?
- [x] **Client-Server-Modell: Ein Client stellt eine Anfrage (Request), ein Server antwortet (Response).**
- [ ] Peer-to-Peer-Modell: Alle Geräte sind gleichberechtigt und tauschen direkt Daten aus.
- [ ] Broadcast-Modell: Ein Server sendet ununterbrochen an alle Geräte im Netz.
- [ ] Master-Slave-Modell: Der Browser steuert den Server fern.
> **Feedback:** Im Client-Server-Modell hat jede Seite eine feste Rolle: Der Client fragt an (Request), der Server antwortet (Response). Derselbe Host kann je nach Situation Client oder Server sein.
---
### B0b – Client-Server: Lückentext
**Thema:** Client-Server-Modell – Terminologie
**Punkte:** 2
**Typ:** `[CLOZE]`
Das Web folgt dem Client-Server-Modell: Ein [___] sendet einen [___], ein [___] liefert eine [___] – nach den Regeln eines [___] (z. B. HTTP).
---
### B0b – Client-Server: Lückentext (Lösung)
**Thema:** Client-Server-Modell – Terminologie
**Punkte:** 2
**Typ:** `[CLOZE]`
Das Web folgt dem Client-Server-Modell: Ein [[1:Client]] sendet einen [[2:Request]], ein [[3:Server]] liefert eine [[4:Response]] – nach den Regeln eines [[5:Protokolls]] (z. B. HTTP).
> **Feedback:** Client = fragt an, Server = antwortet, Request = Anfrage, Response = Antwort, Protokoll = die Regeln, nach denen beide kommunizieren.
---
### B4 – Was ist eine MAC-Adresse?
**Thema:** MAC-Adresse – Konzept
**Punkte:** 1
**Typ:** `[MC]`
Was identifiziert eine MAC-Adresse?
- [ ] Den konkreten Dienst (z. B. Webserver) auf einem Computer.
- [ ] Den Computer im globalen Internet über Netzwerkgrenzen hinweg.
- [ ] Die Netzwerkkarte eines Geräts auf einem lokalen Netzwerksegment.
- [ ] Die Routen, die ein Paket durch das Internet nimmt.
---
### B4 – Was ist eine MAC-Adresse? (Lösung)
**Thema:** MAC-Adresse – Konzept
**Punkte:** 1
**Typ:** `[MC]`
Was identifiziert eine MAC-Adresse?
- [ ] Den konkreten Dienst (z. B. Webserver) auf einem Computer.
- [ ] Den Computer im globalen Internet über Netzwerkgrenzen hinweg.
- [x] **Die Netzwerkkarte eines Geräts auf einem lokalen Netzwerksegment.**
- [ ] Die Routen, die ein Paket durch das Internet nimmt.
> **Feedback:** MAC = Media Access Control. Sie ist eine 48-Bit-Adresse, die einer Netzwerkkarte ab Werk zugewiesen wird – lokal, ein Hop.
---
### B5 – Was ist eine IP-Adresse?
**Thema:** IP-Adresse – Konzept
**Punkte:** 1
**Typ:** `[MC]`
Was identifiziert eine IP-Adresse?
- [ ] Die Netzwerkkarte eines Geräts auf einem lokalen Segment.
- [ ] Ein Gerät (Host) im globalen Internet – sie ermöglicht das Routing über Netzwerkgrenzen.
- [ ] Den Dienst, der auf einem bestimmten Port läuft.
- [ ] Die physische Leitung zwischen zwei Computern.
---
### B5 – Was ist eine IP-Adresse? (Lösung)
**Thema:** IP-Adresse – Konzept
**Punkte:** 1
**Typ:** `[MC]`
Was identifiziert eine IP-Adresse?
- [ ] Die Netzwerkkarte eines Geräts auf einem lokalen Segment.
- [x] **Ein Gerät (Host) im globalen Internet – sie ermöglicht das Routing über Netzwerkgrenzen.**
- [ ] Den Dienst, der auf einem bestimmten Port läuft.
- [ ] Die physische Leitung zwischen zwei Computern.
> **Feedback:** IP = Internet Protocol. Die IP-Adresse ist der globale „Hausnummer" eines Geräts – routing-tauglich, im Gegensatz zur lokalen MAC-Adresse.
---
### B6 – Was ist eine Port-Nummer?
**Thema:** Port – Konzept
**Punkte:** 1
**Typ:** `[MC]`
Wozu dient eine Port-Nummer auf dem Zielrechner?
- [ ] Sie bestimmt die Geschwindigkeit der Verbindung.
- [ ] Sie identifiziert das Gerät im Netzwerk.
- [ ] Sie adressiert den konkreten Dienst bzw. die Anwendung auf dem Computer (z. B. Webserver auf 80, HTTPS auf 443).
- [ ] Sie zeigt an, ob das Gerät per WLAN oder Kabel verbunden ist.
---
### B6 – Was ist eine Port-Nummer? (Lösung)
**Thema:** Port – Konzept
**Punkte:** 1
**Typ:** `[MC]`
Wozu dient eine Port-Nummer auf dem Zielrechner?
- [ ] Sie bestimmt die Geschwindigkeit der Verbindung.
- [ ] Sie identifiziert das Gerät im Netzwerk.
- [x] **Sie adressiert den konkreten Dienst bzw. die Anwendung auf dem Computer (z. B. Webserver auf 80, HTTPS auf 443).**
- [ ] Sie zeigt an, ob das Gerät per WLAN oder Kabel verbunden ist.
> **Feedback:** IP = „Welches Gebäude?", Port = „Welche Tür im Gebäude?" (welcher Dienst soll die Anfrage empfangen).
---
### B7 – IP, MAC, Port: Zuordnung
**Thema:** Adressierung – Unterschiede auf einen Blick
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jeder Adresse ihre Beschreibung zu.
**Adresse:**
- IP-Adresse
- MAC-Adresse
- Port-Nummer
**Beschreibung (ungeordnet):**
- Adressiert einen bestimmten Dienst auf einem Computer
- Lokale Adresse einer Netzwerkkarte – nur innerhalb eines Segments gültig
- Globale Adresse eines Geräts – ermöglicht Routing über Netzwerkgrenzen
---
### B7 – IP, MAC, Port: Zuordnung (Lösung)
**Thema:** Adressierung – Unterschiede auf einen Blick
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jeder Adresse ihre Beschreibung zu.
| Adresse | Beschreibung |
|---|---|
| IP-Adresse | Globale Adresse eines Geräts – ermöglicht Routing über Netzwerkgrenzen |
| MAC-Adresse | Lokale Adresse einer Netzwerkkarte – nur innerhalb eines Segments gültig |
| Port-Nummer | Adressiert einen bestimmten Dienst auf einem Computer |
> **Feedback:** Drei Ebenen der Adressierung: Gerät global (IP), Gerät lokal (MAC), Dienst auf dem Gerät (Port).
---
### B7a – IP, MAC, Port: Drei Ebenen erklären
**Thema:** Adressierung – Transfer
**Punkte:** 3
**Typ:** `[ESSAY]`
Erklären Sie die drei Adressierungsebenen **IP-Adresse**, **MAC-Adresse** und **Port-Nummer**. Beschreiben Sie für jede: (1) was sie identifiziert, (2) auf welcher Ebene sie gilt (lokal/global), (3) eine Analogie aus dem Alltag.
---
### B7a – IP, MAC, Port: Drei Ebenen erklären (Lösung)
**Thema:** Adressierung – Transfer
**Punkte:** 3
**Typ:** `[ESSAY]`
Erklären Sie die drei Adressierungsebenen **IP-Adresse**, **MAC-Adresse** und **Port-Nummer**. Beschreiben Sie für jede: (1) was sie identifiziert, (2) auf welcher Ebene sie gilt (lokal/global), (3) eine Analogie aus dem Alltag.
> **Musterlösung:** **IP-Adresse:** Identifiziert ein Gerät im Internet. Global gültig, ermöglicht Routing über Netzwerkgrenzen. Analogie: „Postanschrift eines Hauses". **MAC-Adresse:** Identifiziert eine Netzwerkkarte. Nur lokal gültig (ein Hop). Analogie: „Seriennummer des Briefkastens". **Port-Nummer:** Identifiziert einen Dienst auf dem Gerät. Analogie: „Türnummer in einem Mehrfamilienhaus" – IP sagt welches Haus, Port sagt welche Wohnung.
---
### B7b – Adressen & Identitäten: Begriffe zuordnen
**Thema:** Adressierung – Glossar (IP, MAC, Port, DNS, Domain)
**Punkte:** 3
**Typ:** `[MATCH]`
Ordnen Sie jedem Begriff seine Beschreibung bzw. sein Beispiel zu.
**Begriff:**
- IP-Adresse
- MAC-Adresse
- Port
- DNS
- Domain
- Host
**Was ist das? / Beispiel (ungeordnet):**
- Ein netzwerkfähiger Rechner (Laptop, Smartphone)
- Menschenlesbarer Name – z. B. `hdm-stuttgart.de`
- „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`
---
### B7b – Adressen & Identitäten: Begriffe zuordnen (Lösung)
**Thema:** Adressierung – Glossar (IP, MAC, Port, DNS, Domain)
**Punkte:** 3
**Typ:** `[MATCH]`
Ordnen Sie jedem Begriff seine Beschreibung bzw. sein Beispiel zu.
| Begriff | Was ist das? / Beispiel |
|---|---|
| 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 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 = Domain→IP, Domain = der lesbare Name, Host = der Rechner selbst.
---
### B5a – IP-Adresse: Beispiel erkennen
**Thema:** IP-Adresse – Format/Beispiel
**Punkte:** 1
**Typ:** `[MC]`
Welche der folgenden Angaben ist eine IP-Adresse (IPv4)?
- [ ] `212.132.79.37`
- [ ] `aa:bb:cc:dd:ee:ff`
- [ ] `hdm-stuttgart.de`
- [ ] `443`
---
### B5a – IP-Adresse: Beispiel erkennen (Lösung)
**Thema:** IP-Adresse – Format/Beispiel
**Punkte:** 1
**Typ:** `[MC]`
Welche der folgenden Angaben ist eine IP-Adresse (IPv4)?
- [x] **`212.132.79.37`**
- [ ] `aa:bb:cc:dd:ee:ff`
- [ ] `hdm-stuttgart.de`
- [ ] `443`
> **Feedback:** IPv4 = vier durch Punkte getrennte Zahlen (0–255). `aa:bb:cc:dd:ee:ff` ist eine MAC, `hdm-stuttgart.de` eine Domain, `443` ein Port.
---
### B4a – MAC-Adresse: Eigenschaften
**Thema:** MAC-Adresse – Format/Eigenschaften
**Punkte:** 1
**Typ:** `[MC]`
Welche Aussage über die MAC-Adresse `aa:bb:cc:dd:ee:ff` ist korrekt?
- [ ] Sie ist die Hardware-Adresse der Netzwerkkarte, ab Werk vergeben und nur im lokalen Netz relevant.
- [ ] Sie wird vom Internet-Provider zugewiesen und ermöglicht globales Routing.
- [ ] Sie identifiziert ein bestimmtes Programm auf dem Rechner.
- [ ] Sie ändert sich, sobald der Rechner eine neue Webseite aufruft.
---
### B4a – MAC-Adresse: Eigenschaften (Lösung)
**Thema:** MAC-Adresse – Format/Eigenschaften
**Punkte:** 1
**Typ:** `[MC]`
Welche Aussage über die MAC-Adresse `aa:bb:cc:dd:ee:ff` ist korrekt?
- [x] **Sie ist die Hardware-Adresse der Netzwerkkarte, ab Werk vergeben und nur im lokalen Netz relevant.**
- [ ] Sie wird vom Internet-Provider zugewiesen und ermöglicht globales Routing.
- [ ] Sie identifiziert ein bestimmtes Programm auf dem Rechner.
- [ ] Sie ändert sich, sobald der Rechner eine neue Webseite aufruft.
> **Feedback:** MAC = Media Access Control. 48 Bit, in Hex notiert (`aa:bb:cc:dd:ee:ff`), ab Werk in die Netzwerkkarte eingebrannt, nur lokal (ein Hop) gültig. Globales Routing macht die IP, das Programm adressiert der Port.
---
### B6a – Port: Well-Known Ports zuordnen
**Thema:** Port – bekannte Portnummern
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jeder Portnummer den passenden Dienst zu.
**Port:**
- 80
- 443
- 22
- 53
**Dienst (ungeordnet):**
- DNS (Namensauflösung)
- SSH (verschlüsselte Fernwartung)
- HTTPS (Web, verschlüsselt)
- HTTP (Web, unverschlüsselt)
---
### B6a – Port: Well-Known Ports zuordnen (Lösung)
**Thema:** Port – bekannte Portnummern
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jeder Portnummer den passenden Dienst zu.
| Port | Dienst |
|---|---|
| 80 | HTTP (Web, unverschlüsselt) |
| 443 | HTTPS (Web, verschlüsselt) |
| 22 | SSH (verschlüsselte Fernwartung) |
| 53 | DNS (Namensauflösung) |
> **Feedback:** Well-Known Ports (0–1023) sind festen Diensten zugeordnet. 80 = HTTP, 443 = HTTPS, 22 = SSH, 53 = DNS. Der Port sagt dem Host, welches Programm die Anfrage bekommt.
---
<!-- _class: disable -->
### B10 – Encapsulation: Reihenfolge sortieren
**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
4. Frame
> **Feedback:** Zwiebelprinzip: Die Anwendung erzeugt Daten → Transport verpackt zu einem Segment → Internet zu einem Paket → Netzzugang zum Frame.
---
<!-- _class: lead -->
## BLOCK C – HTTP
---
### C1 – HTTP-Methoden: Zuordnung
**Thema:** HTTP-Methoden – Was macht was
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jeder HTTP-Methode ihre Hauptfunktion zu.
**Methode:**
- GET
- POST
- PUT
- DELETE
**Hauptfunktion (ungeordnet):**
- Löscht eine Ressource auf dem Server
- Ersetzt eine existierende Ressource vollständig
- Erstellt eine neue Ressource auf dem Server
- Ruft eine Ressource ab (nur lesen)
---
### C1 – HTTP-Methoden: Zuordnung (Lösung)
**Thema:** HTTP-Methoden – Was macht was
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jeder HTTP-Methode ihre Hauptfunktion zu.
| Methode | Hauptfunktion |
|---|---|
| GET | Ruft eine Ressource ab (nur lesen) |
| POST | Erstellt eine neue Ressource auf dem Server |
| PUT | Ersetzt eine existierende Ressource vollständig |
| DELETE | Löscht eine Ressource auf dem Server |
> **Feedback:** CRUD-Mapping: GET=Read, POST=Create, PUT=Update, DELETE=Delete.
---
### C2 – POST vs. PUT: Unterschied
**Thema:** HTTP-Methoden – POST vs. PUT
**Punkte:** 1
**Typ:** `[MC]`
Eine Person erstellt einen neuen Blog-Eintrag auf einer Webseite. Welche HTTP-Methode wird verwendet?
- [ ] POST – eine neue Ressource wird erstellt.
- [ ] PUT – PUT wird immer verwendet, wenn Daten gesendet werden.
- [ ] GET – GET kann auch Daten senden mit URL-Parametern.
- [ ] DELETE – DELETE erstellt und löscht gleichzeitig.
---
### C2 – POST vs. PUT: Unterschied (Lösung)
**Thema:** HTTP-Methoden – POST vs. PUT
**Punkte:** 1
**Typ:** `[MC]`
Eine Person erstellt einen neuen Blog-Eintrag auf einer Webseite. Welche HTTP-Methode wird verwendet?
- [x] **POST – eine neue Ressource wird erstellt.**
- [ ] PUT – PUT wird immer verwendet, wenn Daten gesendet werden.
- [ ] GET – GET kann auch Daten senden mit URL-Parametern.
- [ ] DELETE – DELETE erstellt und löscht gleichzeitig.
> **Feedback:** POST = „Erstelle etwas Neues". PUT = „Ersetze etwas Bestehendes". Neuer Blog-Eintrag → POST.
---
### C3 – PUT: Profilbild ersetzen
**Thema:** HTTP-Methoden – PUT im Szenario
**Punkte:** 1
**Typ:** `[MC]`
Eine Person aktualisiert ihr Profilbild – das alte Bild wird durch ein neues ersetzt. Welche HTTP-Methode?
- [ ] GET – GET kann auch Daten senden.
- [ ] PUT – ersetzt eine existierende Ressource.
- [ ] POST – POST ist immer für das Ersetzen zuständig.
- [ ] DELETE – DELETE sendet das neue Foto und löscht das alte.
---
### C3 – PUT: Profilbild ersetzen (Lösung)
**Thema:** HTTP-Methoden – PUT im Szenario
**Punkte:** 1
**Typ:** `[MC]`
Eine Person aktualisiert ihr Profilbild – das alte Bild wird durch ein neues ersetzt. Welche HTTP-Methode?
- [ ] GET – GET kann auch Daten senden.
- [x] **PUT – ersetzt eine existierende Ressource.**
- [ ] POST – POST ist immer für das Ersetzen zuständig.
- [ ] DELETE – DELETE sendet das neue Foto und löscht das alte.
> **Feedback:** „Ersetzen einer existierenden Ressource" = PUT. POST wäre, wenn ein völlig neues Bild erstellt würde, ohne dass ein vorhandenes überschrieben wird.
---
### C4 – DELETE: Wann nutzen?
**Thema:** HTTP-Methoden – DELETE im Szenario
**Punkte:** 1
**Typ:** `[MC]`
Eine Person löscht einen von ihr erstellten Kommentar auf einer Webseite. Welche HTTP-Methode wird der Browser im Hintergrund verwenden?
- [ ] GET – GET kann auch Löschvorgänge auslösen.
- [ ] POST – POST ist die Standardmethode für alle Änderungen.
- [ ] PUT – PUT löscht und ersetzt gleichzeitig.
- [ ] DELETE – der Kommentar wird vom Server entfernt.
---
### C4 – DELETE: Wann nutzen? (Lösung)
**Thema:** HTTP-Methoden – DELETE im Szenario
**Punkte:** 1
**Typ:** `[MC]`
Eine Person löscht einen von ihr erstellten Kommentar auf einer Webseite. Welche HTTP-Methode wird der Browser im Hintergrund verwenden?
- [ ] GET – GET kann auch Löschvorgänge auslösen.
- [ ] POST – POST ist die Standardmethode für alle Änderungen.
- [ ] PUT – PUT löscht und ersetzt gleichzeitig.
- [x] **DELETE – der Kommentar wird vom Server entfernt.**
> **Feedback:** DELETE = „Entferne diese Ressource vom Server." Konkret: der Kommentar wird anhand seiner URL/ID identifiziert und gelöscht.
---
### C6 – Status-Codes: Kategorisierung
**Thema:** HTTP Status-Codes – Bedeutung der ersten Ziffer
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jeder ersten Ziffer eines HTTP-Status-Codes ihre Bedeutung zu.
**Erste Ziffer:**
- 2xx
- 3xx
- 4xx
- 5xx
**Bedeutung (ungeordnet):**
- Server-Fehler – der Server hat ein Problem
- Client-Fehler – die Anfrage der Anfragenden war fehlerhaft
- Weiterleitung – die Ressource wurde verschoben
- Erfolg – die Anfrage wurde erfolgreich verarbeitet
---
### C6 – Status-Codes: Kategorisierung (Lösung)
**Thema:** HTTP Status-Codes – Bedeutung der ersten Ziffer
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jeder ersten Ziffer eines HTTP-Status-Codes ihre Bedeutung zu.
| Erste Ziffer | Bedeutung |
|---|---|
| 2xx | Erfolg – die Anfrage wurde erfolgreich verarbeitet |
| 3xx | Weiterleitung – die Ressource wurde verschoben |
| 4xx | Client-Fehler – die Anfrage der Anfragenden war fehlerhaft |
| 5xx | Server-Fehler – der Server hat ein Problem |
> **Feedback:** Die erste Ziffer = Kategorie. 200 OK, 301 Moved, 404 Not Found, 503 Service Unavailable – die Kategorie sagt Ihnen sofort, wo das Problem liegt.
---
### C7 – 503: Server-Fehler erkläre
**Thema:** HTTP Status-Codes – 5xx Transfer
**Punkte:** 1
**Typ:** `[MC]`
Sie rufen eine Webseite auf und erhalten `HTTP/2 503 Service Unavailable`. Was bedeutet das?
- [ ] Sie haben die falsche URL eingegeben.
- [ ] Der Server hat die Anfrage erfolgreich umgeleitet.
- [ ] Der Server ist überlastet oder temporär nicht verfügbar – Verantwortung liegt beim Betreiber.
- [ ] Der Server hat die Seite dauerhaft verschoben.
---
### C7 – 503: Server-Fehler erkläre (Lösung)
**Thema:** HTTP Status-Codes – 5xx Transfer
**Punkte:** 1
**Typ:** `[MC]`
Sie rufen eine Webseite auf und erhalten `HTTP/2 503 Service Unavailable`. Was bedeutet das?
- [ ] Sie haben die falsche URL eingegeben.
- [ ] Der Server hat die Anfrage erfolgreich umgeleitet.
- [x] **Der Server ist überlastet oder temporär nicht verfügbar – Verantwortung liegt beim Betreiber.**
- [ ] Der Server hat die Seite dauerhaft verschoben.
> **Feedback:** 5xx = Server-Problem. Sie als Client können nur später erneut versuchen. Der Betreiber muss das lösen.
---
### C8 – 404: Wer hat „Schuld"?
**Thema:** HTTP Status-Codes – 4xx Transfer
**Punkte:** 1
**Typ:** `[MC]`
Sie erhalten einen 404-Fehler. Wer ist für die Ursache verantwortlich?
- [ ] Der Server ist abgestürzt.
- [ ] Das Internet ist ausgefallen.
- [ ] Der Client (Anfragende) – eine URL wurde angefordert, die nicht existiert (Tippfehler oder veralteter Link).
- [ ] Der DNS-Server konnte den Namen nicht auflösen.
---
### C8 – 404: Wer hat „Schuld"? (Lösung)
**Thema:** HTTP Status-Codes – 4xx Transfer
**Punkte:** 1
**Typ:** `[MC]`
Sie erhalten einen 404-Fehler. Wer ist für die Ursache verantwortlich?
- [ ] Der Server ist abgestürzt.
- [ ] Das Internet ist ausgefallen.
- [x] **Der Client (Anfragende) – eine URL wurde angefordert, die nicht existiert (Tippfehler oder veralteter Link).**
- [ ] Der DNS-Server konnte den Namen nicht auflösen.
> **Feedback:** 4xx = Client-Fehler. Der Server funktioniert perfekt, er sagt nur: „Das, was Sie anfragen, habe ich nicht."
---
### C9 – Status-Codes: Szenarios zuordnen
**Thema:** HTTP Status-Codes – Transfer Zuordnung
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jedem Szenario den passenden HTTP-Status-Code zu.
**Szenario:**
- Sie rufen eine Seite auf, die seit letztem Jahr auf eine neue URL umgeleitet wurde
- Eine Webseite lädt erfolgreich
- Sie geben eine URL ein, die nicht existiert
- Der Webserver ist überlastet
**Status-Code (ungeordnet):**
- 503 Service Unavailable
- 404 Not Found
- 200 OK
- 301 Moved Permanently
---
### C9 – Status-Codes: Szenarios zuordnen (Lösung)
**Thema:** HTTP Status-Codes – Transfer Zuordnung
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jedem Szenario den passenden HTTP-Status-Code zu.
| Szenario | Status-Code |
|---|---|
| Sie rufen eine Seite auf, die seit letztem Jahr auf eine neue URL umgeleitet wurde | 301 Moved Permanently |
| Eine Webseite lädt erfolgreich | 200 OK |
| Sie geben eine URL ein, die nicht existiert | 404 Not Found |
| Der Webserver ist überlastet | 503 Service Unavailable |
> **Feedback:** 200 = Alles gut. 301 = dauerhaft verschoben. 404 = nicht gefunden (Ihr Fehler). 503 = Server-Problem (Betreiber).
---
### C9a – Status-Codes: 2xx, 4xx, 5xx vergleichen
**Thema:** HTTP Status-Codes – Kategorien erklären
**Punkte:** 3
**Typ:** `[ESSAY]`
Erklären Sie die drei HTTP-Status-Code-Kategorien **2xx**, **4xx** und **5xx**. Beschreiben Sie für jede: (1) was sie bedeutet, (2) wer „schuld" ist (Client oder Server), (3) ein konkretes Beispiel mit Szenario.
---
### C9a – Status-Codes: 2xx, 4xx, 5xx vergleichen (Lösung)
**Thema:** HTTP Status-Codes – Kategorien erklären
**Punkte:** 3
**Typ:** `[ESSAY]`
Erklären Sie die drei HTTP-Status-Code-Kategorien **2xx**, **4xx** und **5xx**. Beschreiben Sie für jede: (1) was sie bedeutet, (2) wer „schuld" ist (Client oder Server), (3) ein konkretes Beispiel mit Szenario.
> **Musterlösung:** **2xx (Erfolg):** Die Anfrage wurde erfolgreich verarbeitet. Niemand ist „schuld" – alles funktioniert. Beispiel: 200 OK – die Webseite wurde korrekt geladen. **4xx (Client-Fehler):** Die Anfrage war fehlerhaft. Der Client ist verantwortlich. Beispiel: 404 Not Found – Nutzende haben eine URL eingetippt, die nicht existiert. **5xx (Server-Fehler):** Der Server hat ein Problem. Der Betreiber ist verantwortlich. Beispiel: 503 Service Unavailable – der Server ist überlastet oder in Wartung.
---
<!-- _class: lead -->
## BLOCK D – DNS
---
### D1 – DNS: Was macht es?
**Thema:** DNS – Grundfunktion
**Punkte:** 1
**Typ:** `[MC]`
Was ist die Hauptfunktion eines DNS-Servers?
- [ ] Er verschlüsselt die Verbindung zwischen Client und Server.
- [ ] Er übersetzt einen Domain-Namen (z. B. `hdm-stuttgart.de`) in eine IP-Adresse.
- [ ] Er routet Pakete durch das Internet.
- [ ] Er weist jedem Computer eine MAC-Adresse zu.
---
### D1 – DNS: Was macht es? (Lösung)
**Thema:** DNS – Grundfunktion
**Punkte:** 1
**Typ:** `[MC]`
Was ist die Hauptfunktion eines DNS-Servers?
- [ ] Er verschlüsselt die Verbindung zwischen Client und Server.
- [x] **Er übersetzt einen Domain-Namen (z. B. `hdm-stuttgart.de`) in eine IP-Adresse.**
- [ ] Er routet Pakete durch das Internet.
- [ ] Er weist jedem Computer eine MAC-Adresse zu.
> **Feedback:** DNS = Domain Name System = „Telefonbuch des Internets". Name → IP. Ohne DNS müsste man überall IP-Adressen eintippen.
---
### D2 – DNS: Zeitlicher Ablauf
**Thema:** DNS – Rolle im Gesamtablauf
**Punkte:** 1
**Typ:** `[MC]`
Sie geben `https://hdm-stuttgart.de` in die Adresszeile ein. Was passiert **vor** dem TCP-Handshake?
- [ ] Der Browser sendet direkt den Namen an den Server – DNS wird erst danach benötigt.
- [ ] DNS-Auflösung: Der Name wird in eine IP-Adresse umgewandelt. TCP kann nur zu IP-Adressen Verbindungen aufbauen.
- [ ] DNS passiert nach dem TCP-Handshake.
- [ ] DNS ist nur für HTTPS nötig – bei HTTP kann der Name direkt verwendet werden.
---
### D2 – DNS: Zeitlicher Ablauf (Lösung)
**Thema:** DNS – Rolle im Gesamtablauf
**Punkte:** 1
**Typ:** `[MC]`
Sie geben `https://hdm-stuttgart.de` in die Adresszeile ein. Was passiert **vor** dem TCP-Handshake?
- [ ] Der Browser sendet direkt den Namen an den Server – DNS wird erst danach benötigt.
- [x] **DNS-Auflösung: Der Name wird in eine IP-Adresse umgewandelt. TCP kann nur zu IP-Adressen Verbindungen aufbauen.**
- [ ] DNS passiert nach dem TCP-Handshake.
- [ ] DNS ist nur für HTTPS nötig – bei HTTP kann der Name direkt verwendet werden.
> **Feedback:** DNS vor TCP. Kein Name-to-IP? Kein Handshake möglich. TCP arbeitet auf IP-Adressen, nicht auf Domain-Namen.
---
<!-- _class: lead -->
## BLOCK E – Der Gesamtablauf (Zusammen)
---
<!-- _class: disable -->
### E3 – Gesamtablauf: DNS, TCP, HTTP erklären
**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.
---
<!-- _class: lead -->
## BLOCK F – HTML-Grundlagen
---
### F1 – `<head>` vs. `<body>`: Was passiert bei Fehler?
**Thema:** HTML-Struktur – head/body
**Punkte:** 2
**Typ:** `[MC]`
Eine studierende Person platziert den `<title>` und `<meta name="description">` im `<body>` statt im `<head>`. Welche zwei Konsequenzen hat das?
- [ ] Kein Problem – Browser ignorieren die Unterscheidung.
- [ ] (1) Der Browser-Tab zeigt keinen Titel an. (2) Suchmaschinen haben keine Beschreibung für das Snippet → schlechte SEO, Screen-Reader können die Seite nicht richtig vorlesen.
- [ ] (1) Der Titel wird im Seiteninhalt sichtbar angezeigt. (2) Die description wird als Text auf der Seite eingeblendet.
- [ ] Nur das Fehlen von `<meta charset>` ist ein Problem.
---
### F1 – `<head>` vs. `<body>`: Was passiert bei Fehler? (Lösung)
**Thema:** HTML-Struktur – head/body
**Punkte:** 2
**Typ:** `[MC]`
Eine studierende Person platziert den `<title>` und `<meta name="description">` im `<body>` statt im `<head>`. Welche zwei Konsequenzen hat das?
- [ ] Kein Problem – Browser ignorieren die Unterscheidung.
- [x] **(1) Der Browser-Tab zeigt keinen Titel an. (2) Suchmaschinen haben keine Beschreibung für das Snippet → schlechte SEO, Screen-Reader können die Seite nicht richtig vorlesen.**
- [ ] (1) Der Titel wird im Seiteninhalt sichtbar angezeigt. (2) Die description wird als Text auf der Seite eingeblendet.
- [ ] Nur das Fehlen von `<meta charset>` ist ein Problem.
> **Feedback:** `<head>` = Metadaten (unsichtbar für die Benutzenden, sichtbar für Browser/Maschinen). `<body>` = sichtbarer Inhalt. Title und description im Body werden nicht als Metadaten interpretiert.
---
### F2 – `<head>`: Was gehört wohin?
**Thema:** HTML-Struktur – Zuordnung
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jedem Element zu, ob es in `<head>` oder `<body>` gehört.
**Element:**
- `<title>`
- `<meta charset="UTF-8">`
- `<meta name="description">`
- `<h1>Willkommen</h1>`
- `<p>Text hier</p>`
- `<link rel="stylesheet">`
**Wohin? (ungeordnet):**
- `<head>`
- `<body>`
- `<body>`
- `<head>`
- `<head>`
- `<head>`
---
### F2 – `<head>`: Was gehört wohin? (Lösung)
**Thema:** HTML-Struktur – Zuordnung
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jedem Element zu, ob es in `<head>` oder `<body>` gehört.
| Element | Wohin? |
|---|---|
| `<title>` | `<head>` |
| `<meta charset="UTF-8">` | `<head>` |
| `<meta name="description">` | `<head>` |
| `<h1>Willkommen</h1>` | `<body>` |
| `<p>Text hier</p>` | `<body>` |
| `<link rel="stylesheet">` | `<head>` |
> **Feedback:** `<head>` = alles, was die Benutzenden nicht direkt sehen (Metadaten, Styles, Titel). `<body>` = alles, was im Browser-Fenster angezeigt wird.
---
### F4 – Umschließende vs. selbst-schließende Tags
**Thema:** HTML-Anatomie – Tag-Typen
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jedes HTML-Element seinem Tag-Typ zu.
**Element:**
- `<a>`
- `<body>`
- `<img>`
- `<input>`
- `<meta>`
**Tag-Typ (ungeordnet):**
- Selbst-schließend (kein End-Tag)
- Selbst-schließend (kein End-Tag)
- Selbst-schließend (kein End-Tag)
- Umschließend (Start- und End-Tag)
- Umschließend (Start- und End-Tag)
---
### F4 – Umschließende vs. selbst-schließende Tags (Lösung)
**Thema:** HTML-Anatomie – Tag-Typen
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jedes HTML-Element seinem Tag-Typ zu.
| Element | Tag-Typ |
|---|---|
| `<a>` | Umschließend (Start- und End-Tag) |
| `<body>` | Umschließend (Start- und End-Tag) |
| `<img>` | Selbst-schließend (kein End-Tag) |
| `<input>` | Selbst-schließend (kein End-Tag) |
| `<meta>` | Selbst-schließend (kein End-Tag) |
> **Feedback:** Umschließende Tags haben Inhalt zwischen Start und Ende (`<a>…</a>`). Selbst-schließende Tags stehen allein, weil sie keinen Inhalt umschließen (`<img>`, `<input>`, `<meta>`).
---
<!-- _class: lead -->
## BLOCK G – CSS
---
### G6 – CSS-Farbnotationen zuordnen
**Thema:** CSS Farben – Notationen
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jede Schreibweise für die Farbe Rot ihrer Notation zu.
**Schreibweise:**
- `red`
- `#FF0000`
- `rgb(255, 0, 0)`
- `rgba(255, 0, 0, 0.5)`
**Notation (ungeordnet):**
- RGBA (RGB + Alpha/Transparenz)
- RGB (Red Green Blue)
- Hexadezimal
- Farbname / Color Code
---
### G6 – CSS-Farbnotationen zuordnen (Lösung)
**Thema:** CSS Farben – Notationen
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jede Schreibweise für die Farbe Rot ihrer Notation zu.
| Schreibweise | Notation |
|---|---|
| `red` | Farbname / Color Code |
| `#FF0000` | Hexadezimal |
| `rgb(255, 0, 0)` | RGB (Red Green Blue) |
| `rgba(255, 0, 0, 0.5)` | RGBA (RGB + Alpha/Transparenz) |
> **Feedback:** Vier Wege, dieselbe Farbe anzugeben. RGBA ergänzt RGB um einen Alpha-Kanal (Transparenz).
---
### G7 – Selektoren: Der ID-Selektor
**Thema:** CSS Selektoren – ID-Selektor
**Punkte:** 2
**Typ:** `[MC]`
Gegeben ist folgendes HTML-Element:
```html
<p id="intro" class="text">Hallo Welt</p>
```
Mit welchem CSS-Selektor sprechen Sie **gezielt dieses eine Element über seine ID** an?
- [ ] `#intro { color: red; }`
- [ ] `.intro { color: red; }`
- [ ] `p { color: red; }`
- [ ] `ul > li#intro { color: red; }`
---
### G7 – Selektoren: Der ID-Selektor (Lösung)
**Thema:** CSS Selektoren – ID-Selektor
**Punkte:** 2
**Typ:** `[MC]`
Gegeben ist folgendes HTML-Element:
```html
<p id="intro" class="text">Hallo Welt</p>
```
Mit welchem CSS-Selektor sprechen Sie **gezielt dieses eine Element über seine ID** an?
- [x] **`#intro { color: red; }`**
- [ ] `.intro { color: red; }`
- [ ] `p { 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 (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>`.
---
<!-- _class: lead -->
## BLOCK H – Barrierefreiheit
---
### H1 – Wie nutzen Menschen das Web?
**Thema:** Barrierefreiheit – Eingabegeräte
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jedem Eingabegerät seine Nutzungsweise zu.
**Eingabe:**
- Maus
- Tastatur
- Screenreader
- Sprachsteuerung
- Augensteuerung
- Switch-Geräte
**Nutzungsweise (ungeordnet):**
- Ein-/Aus-Schalter
- Eye-Tracking
- „Klicke auf Anmelden"
- Vorlesen von Inhalten
- Tab-Navigation, Enter, Pfeiltasten
- Klicken, Scrollen
---
### H1 – Wie nutzen Menschen das Web? (Lösung)
**Thema:** Barrierefreiheit – Eingabegeräte
**Punkte:** 2
**Typ:** `[MATCH]`
Ordnen Sie jedem Eingabegerät seine Nutzungsweise zu.
| Eingabe | Nutzungsweise |
|---|---|
| Maus | Klicken, Scrollen |
| Tastatur | Tab-Navigation, Enter, Pfeiltasten |
| Screenreader | Vorlesen von Inhalten |
| Sprachsteuerung | „Klicke auf Anmelden" |
| Augensteuerung | Eye-Tracking |
| Switch-Geräte | Ein-/Aus-Schalter |
> **Feedback:** Nicht alle nutzen Maus + Bildschirm. ~15% der Weltbevölkerung haben eine Behinderung (WHO). Assistive Technologien wie Screenreader (NVDA, VoiceOver, JAWS) oder Switch-Geräte ermöglichen Web-Zugang für Menschen mit verschiedenen Einschränkungen.
---
### H6 – Barrierefreiheit: Warum auch für „normale" Benutzende?
**Thema:** Barrierefreiheit – Business Case
**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 (**Curb-Cut-Effekt**). Nennen Sie genau zwei Beispiele aus der alltäglichen Benutzung von Computern und Laptops.
---
### H6 – Barrierefreiheit: Warum auch für „normale" Benutzende? (Lösung)
**Thema:** Barrierefreiheit – Business Case
**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 (**Curb-Cut-Effekt**). Nennen Sie genau zwei Beispiele aus der alltäglichen Benutzung von Computern und Laptops.
> **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.
---
### H7 – Tastatur-Test: Was prüfen?
**Thema:** Barrierefreiheit – Praktischer Test
**Punkte:** 2
**Typ:** `[MC]`
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 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`).
---
### H7 – Tastatur-Test: Was prüfen? (Lösung)
**Thema:** Barrierefreiheit – Praktischer Test
**Punkte:** 2
**Typ:** `[MC]`
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 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- 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 View Git Blame Copy Permalink