223015c: klausurfragen auf sie vereinheitlicht + 6 fragen ergänzt (a5/c11/c12/f4/g5/g6), emojis raus, stand aktualisiert; index: kapitel 03 + klausurfragen freigeschaltet
This commit is contained in:
+12
-12
@@ -121,8 +121,8 @@ declare -A DISABLED_FULL
|
||||
declare -A DISABLED_BUTTONS
|
||||
# For course B: chapters 3,4,5 should be fully disabled
|
||||
DISABLED_FULL["223015b"]="speichermedien-schnittstellen distribution-apis-zukunft vertiefung-offene-fragen"
|
||||
# For course C: chapter 3 should keep link clickable but buttons disabled
|
||||
DISABLED_BUTTONS["223015c"]="interaktivitaet-javascript"
|
||||
# For course C: all chapters fully active
|
||||
DISABLED_BUTTONS["223015c"]=""
|
||||
|
||||
cat > "$BUILD_DIR/index.html" << HEADER
|
||||
<!DOCTYPE html>
|
||||
@@ -422,24 +422,24 @@ if [[ -f "$BUILD_DIR/klausurfolien.html" ]]; then
|
||||
KLAUSUR
|
||||
fi
|
||||
|
||||
# Add klausurfragen entry if it exists (disabled — wird noch überarbeitet)
|
||||
# Add klausurfragen entry if it exists (active)
|
||||
if [[ -f "$BUILD_DIR/klausurfragen.html" ]] || [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
|
||||
pdf_disabled=""
|
||||
pdf_active=""
|
||||
if [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
|
||||
pdf_disabled="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
|
||||
pdf_active="<a href=\"klausurfragen.pdf\" class=\"btn btn-pdf\">PDF</a>"
|
||||
fi
|
||||
slides_disabled=""
|
||||
slides_active=""
|
||||
if [[ -f "$BUILD_DIR/klausurfragen.html" ]]; then
|
||||
slides_disabled="<span class=\"btn btn-slides btn-disabled\">Folien</span>"
|
||||
slides_active="<a href=\"klausurfragen.html\" class=\"btn btn-slides\">Folien</a>"
|
||||
fi
|
||||
cat >> "$BUILD_DIR/index.html" << KLAUSURFRAGEN
|
||||
<div class="kapitel-card disabled" style="border-left: 3px solid $ACCENT_COLOR;">
|
||||
<div class="kapitel-link">
|
||||
<div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
|
||||
<a href="klausurfragen.html" class="kapitel-link">
|
||||
<div class="kapitel-label">Prüfung</div>
|
||||
<div class="kapitel-title">Klausurfragen</div>
|
||||
</div>
|
||||
$slides_disabled
|
||||
$pdf_disabled
|
||||
</a>
|
||||
$slides_active
|
||||
$pdf_active
|
||||
</div>
|
||||
KLAUSURFRAGEN
|
||||
fi
|
||||
|
||||
+158
-56
@@ -57,7 +57,7 @@ section.disable {
|
||||
# Klausurfragen – 223015c
|
||||
**IT-Grundlagen · HdM Stuttgart · M. Czechowski**
|
||||
|
||||
<small>Stand: 01.02.2026</small>
|
||||
<small>Stand: 17.06.2026</small>
|
||||
|
||||
---
|
||||
|
||||
@@ -84,7 +84,7 @@ section.disable {
|
||||
**Punkte:** 3
|
||||
**Typ:** `[MATCH]`
|
||||
|
||||
Ordne jeder Komponente der Von-Neumann-Architektur ihre Funktion zu.
|
||||
Ordnen Sie jeder Komponente der Von-Neumann-Architektur ihre Funktion zu.
|
||||
|
||||
| Komponente | Funktion |
|
||||
|---|---|
|
||||
@@ -108,7 +108,7 @@ Ordne jeder Komponente der Von-Neumann-Architektur ihre Funktion zu.
|
||||
Ein Programm besteht aus einer Folge von Befehlen. Eine Komponente der Von-Neumann-Architektur ist für das Abrufen, Dekodieren und Ausführen dieser Befehle zuständig. Welche?
|
||||
|
||||
- [ ] Rechenwerk (ALU)
|
||||
- [x] **Steuerwerk** ✅
|
||||
- [x] **Steuerwerk**
|
||||
- [ ] Speicherwerk
|
||||
- [ ] Ein-/Ausgabe
|
||||
|
||||
@@ -123,12 +123,12 @@ Ein Programm besteht aus einer Folge von Befehlen. Eine Komponente der Von-Neuma
|
||||
|
||||
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.** ✅
|
||||
- [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.** ✅
|
||||
- [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.** ✅
|
||||
- [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.
|
||||
|
||||
@@ -147,6 +147,22 @@ Erklären Sie die fünf Komponenten der Von-Neumann-Architektur: **Rechenwerk (A
|
||||
|
||||
---
|
||||
|
||||
### 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.
|
||||
- [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 (TCP/IP)
|
||||
@@ -158,7 +174,7 @@ Erklären Sie die fünf Komponenten der Von-Neumann-Architektur: **Rechenwerk (A
|
||||
**Punkte:** 3
|
||||
**Typ:** `[MATCH]`
|
||||
|
||||
Ordne jedem Protokoll die richtige TCP/IP-Schicht zu.
|
||||
Ordnen Sie jedem Protokoll die richtige TCP/IP-Schicht zu.
|
||||
|
||||
| Protokoll | Schicht |
|
||||
|----------|---|
|
||||
@@ -183,7 +199,7 @@ Das Protokoll IP arbeitet auf welcher TCP/IP-Schicht?
|
||||
|
||||
- [ ] Anwendung
|
||||
- [ ] Transport
|
||||
- [x] **Internet** ✅
|
||||
- [x] **Internet**
|
||||
- [ ] Netzzugang
|
||||
|
||||
> **Feedback:** IP (Internet Protocol) arbeitet auf der Internet-Schicht – dort werden Pakete adressiert und geroutet.
|
||||
@@ -197,7 +213,7 @@ Das Protokoll IP arbeitet auf welcher TCP/IP-Schicht?
|
||||
**Punkte:** 2
|
||||
**Typ:** `[ESSAY]`
|
||||
|
||||
Beschreibe in einem Satz pro Schicht die Hauptfunktion jeder der vier TCP/IP-Schichten (Anwendung, Transport, Internet, Netzzugang).
|
||||
Beschreiben Sie in einem Satz pro Schicht die Hauptfunktion jeder der vier TCP/IP-Schichten (Anwendung, Transport, Internet, Netzzugang).
|
||||
|
||||
> **Musterlösung:** Anwendung: Stellt Protokolle für spezifische Dienste bereit (HTTP für Web, SMTP für Mail). Transport: Sorgt für zuverlässige (TCP) oder schnelle (UDP) Übertragung zwischen zwei Endpunkten. Internet: Adressiert und routet Pakete über Netzwerkgrenzen hinweg mittels IP. Netzzugang: Übertragen von Frames auf einem physischen Übertragungsweg (Ethernet, WLAN).
|
||||
|
||||
@@ -212,7 +228,7 @@ 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.** ✅
|
||||
- [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.
|
||||
@@ -227,7 +243,7 @@ Was identifiziert eine MAC-Adresse?
|
||||
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.** ✅
|
||||
- [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.
|
||||
|
||||
@@ -244,7 +260,7 @@ 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).** ✅
|
||||
- [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).
|
||||
@@ -256,7 +272,7 @@ Wozu dient eine Port-Nummer auf dem Zielrechner?
|
||||
**Punkte:** 2
|
||||
**Typ:** `[MATCH]`
|
||||
|
||||
Ordne jeder Adresse ihre Beschreibung zu.
|
||||
Ordnen Sie jeder Adresse ihre Beschreibung zu.
|
||||
|
||||
| Adresse | Beschreibung |
|
||||
|---|---|
|
||||
@@ -286,7 +302,7 @@ Erklären Sie die drei Adressierungsebenen **IP-Adresse**, **MAC-Adresse** und *
|
||||
**Punkte:** 2
|
||||
**Typ:** `[ESSAY]`
|
||||
|
||||
Ein Paket reist von Ihrem Laptop zu einem Webserver über mehrere Router. Erkläre in 2–3 Sätzen, warum die MAC-Adresse an jedem Router neu gesetzt wird, während die IP-Adresse des Ziel-Servers konstant bleibt.
|
||||
Ein Paket reist von Ihrem Laptop zu einem Webserver über mehrere Router. Erklären Sie in 2–3 Sätzen, warum die MAC-Adresse an jedem Router neu gesetzt wird, während die IP-Adresse des Ziel-Servers konstant bleibt.
|
||||
|
||||
> **Musterlösung:** Die IP-Adresse des Ziel-Servers bleibt konstant, weil sie das globale Routingziel identifiziert – jeder Router nutzt sie, um das nächste Hop zu bestimmen. Die MAC-Adresse hingegen gilt nur für ein einzelnes Netzwerksegment (einen „Hop"). An jedem Router wird ein neuer Frame erstellt mit der MAC des nächsten Hops als Ziel – die alte MAC wird verworfen.
|
||||
|
||||
@@ -297,7 +313,7 @@ Ein Paket reist von Ihrem Laptop zu einem Webserver über mehrere Router. Erklä
|
||||
**Punkte:** 3
|
||||
**Typ:** `[MATCH]`
|
||||
|
||||
Bei der Übertragung wird eine Nachricht von Schicht zu Schicht verpackt. Ordne jeder Dateneinheit die zugehörige Schicht und was hinzugefügt wird.
|
||||
Bei der Übertragung wird eine Nachricht von Schicht zu Schicht verpackt. Ordnen Sie jeder Dateneinheit die zugehörige Schicht und was hinzugefügt wird.
|
||||
|
||||
| Dateneinheit | Schicht + Was wird ergänzt |
|
||||
|---|---|
|
||||
@@ -315,7 +331,7 @@ Bei der Übertragung wird eine Nachricht von Schicht zu Schicht verpackt. Ordne
|
||||
**Punkte:** 2
|
||||
**Typ:** `[ORDER]`
|
||||
|
||||
Sortiere 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
|
||||
@@ -335,7 +351,7 @@ Wenn der Server das Signal empfängt, passiert Decapsulation. In welcher Reihenf
|
||||
|
||||
- [ ] Anwendung → Transport → Internet → Netzzugang
|
||||
- [ ] Alle Header werden gleichzeitig entfernt, sobald die Daten im RAM liegen.
|
||||
- [x] **Netzzugang (Ethernet-Header weg) → Internet (IP-Header weg) → Transport (TCP-Header weg) → Daten.** ✅
|
||||
- [x] **Netzzugang (Ethernet-Header weg) → Internet (IP-Header weg) → Transport (TCP-Header weg) → Daten.**
|
||||
- [ ] Internet → Netzzugang → Transport → Anwendung
|
||||
|
||||
> **Feedback:** Das Auspacken erfolgt in umgekehrter Reihenfolge wie das Einpacken – der äußerste Header (Frame) wird zuerst entfernt.
|
||||
@@ -361,7 +377,7 @@ Bei der Übertragung wird eine Nachricht von Schicht zu Schicht verpackt. Die Tr
|
||||
Ein Videostreaming-Dienst sendet Daten an Ihren Browser. Ein einzelnes Paket geht verloren. Warum wählt der Dienst UDP statt TCP?
|
||||
|
||||
- [ ] UDP sendet jedes Paket doppelt, daher geht statistisch nie etwas verloren.
|
||||
- [x] **Bei Echtzeit ist Verzögerung schlimmer als Verlust. TCP würde das Paket erneut anfordern → Video friert ein. UDP ignoriert es → kurzer Glitch, Video läuft weiter.** ✅
|
||||
- [x] **Bei Echtzeit ist Verzögerung schlimmer als Verlust. TCP würde das Paket erneut anfordern → Video friert ein. UDP ignoriert es → kurzer Glitch, Video läuft weiter.**
|
||||
- [ ] TCP kann bei Videostreaming nicht verwendet werden, da es zu langsam für Multimedia ist.
|
||||
- [ ] UDP ist immer schneller als TCP – deshalb nutzt jeder Streaming-Dienst UDP.
|
||||
|
||||
@@ -385,7 +401,7 @@ Vergleichen Sie **TCP** und **UDP**. Beschreiben Sie für jedes Protokoll: (1) o
|
||||
**Punkte:** 2
|
||||
**Typ:** `[ESSAY]`
|
||||
|
||||
Nenne zwei wesentliche Unterschiede zwischen TCP und UDP und gib für jeden einen konkreten Anwendungsfall an, in dem genau dieses Eigenschaftspaar ausschlaggebend ist.
|
||||
Nennen Sie zwei wesentliche Unterschiede zwischen TCP und UDP und geben Sie für jeden einen konkreten Anwendungsfall an, in dem genau dieses Eigenschaftspaar ausschlaggebend ist.
|
||||
|
||||
> **Musterlösung:** (1) TCP ist verbindungsorientiert und zuverlässig (Handshake, Sequenznummern, ACK) → ideal für Dateiübertragung, wo jedes Byte zählt. (2) UDP ist verbindungslos und schneller, aber ohne Garantie für Lieferung oder Reihenfolge → ideal für Echtzeit-Anwendungen wie Videostreaming oder Online-Gaming, wo Latenz wichtiger als Vollständigkeit ist.
|
||||
|
||||
@@ -401,7 +417,7 @@ Nenne zwei wesentliche Unterschiede zwischen TCP und UDP und gib für jeden eine
|
||||
Diese Aussage ist …
|
||||
|
||||
- [ ] …korrekt – UDP nutzt Sequenznummern wie TCP.
|
||||
- [x] **…falsch – UDP bietet keine Garantie für Reihenfolge noch für Lieferung.** ✅
|
||||
- [x] **…falsch – UDP bietet keine Garantie für Reihenfolge noch für Lieferung.**
|
||||
- [ ] …korrekt – UDP ist sogar zuverlässiger als TCP.
|
||||
- [ ] …falsch – UDP existiert gar nicht mehr in modernen Netzwerken.
|
||||
|
||||
@@ -417,7 +433,7 @@ Diese Aussage ist …
|
||||
Der Client sendet ein SYN zum Server. Das SYN-Paket geht verloren – es erreicht den Server nie. Was passiert als nächstes?
|
||||
|
||||
- [ ] Der Server sendet trotzdem ein SYN-ACK, da die IP-Adresse bekannt ist.
|
||||
- [x] **Der Server kennt die Anfrage nicht → sendet kein SYN-ACK → der Client erhält keine Antwort → keine Verbindung. Der Client sendet das SYN nach einem Timeout erneut.** ✅
|
||||
- [x] **Der Server kennt die Anfrage nicht → sendet kein SYN-ACK → der Client erhält keine Antwort → keine Verbindung. Der Client sendet das SYN nach einem Timeout erneut.**
|
||||
- [ ] Der Client sendet direkt ein ACK als Fallback – Verbindung mit zwei Paketen.
|
||||
- [ ] Das verloren gegangene SYN wird vom Netzwerk automatisch rekonstruiert.
|
||||
|
||||
@@ -430,7 +446,7 @@ Der Client sendet ein SYN zum Server. Das SYN-Paket geht verloren – es erreich
|
||||
**Punkte:** 2
|
||||
**Typ:** `[ESSAY]`
|
||||
|
||||
Beschreibe die drei Schritte des TCP 3-Way-Handshakes. Erkläre, warum alle drei Schritte nötig sind, bevor Daten gesendet werden.
|
||||
Beschreiben Sie die drei Schritte des TCP 3-Way-Handshakes. Erklären Sie, warum alle drei Schritte nötig sind, bevor Daten gesendet werden.
|
||||
|
||||
> **Musterlösung:** (1) Client → Server: SYN („Ich will eine Verbindung aufbauen"). (2) Server → Client: SYN-ACK (「Ich bestätige das und will auch eine Verbindung"). (3) Client → Server: ACK ("Bestätigt"). Alle drei Schritte sind nötig, damit beide Seiten wissen, dass die andere die Verbindung akzeptiert hat – erst dann kann zuverlässiger Datenaustausch beginnen.
|
||||
|
||||
@@ -446,7 +462,7 @@ Beschreibe die drei Schritte des TCP 3-Way-Handshakes. Erkläre, warum alle drei
|
||||
Welches Problem lösen Sequenznummern im TCP-Header konkret?
|
||||
|
||||
- [ ] Sie verhindern, dass Hacker die Verbindung abhören können.
|
||||
- [x] **Pakete können in falscher Reihenfolge ankommen. Sequenznummern erlauben das korrekte Sortieren beim Empfänger.** ✅
|
||||
- [x] **Pakete können in falscher Reihenfolge ankommen. Sequenznummern erlauben das korrekte Sortieren beim Empfänger.**
|
||||
- [ ] Sie zählen, wie viele Benutzende gleichzeitig auf dem Server sind.
|
||||
- [ ] Sie bestimmen die maximale Größe einer Datei.
|
||||
|
||||
@@ -465,7 +481,7 @@ Welches Problem lösen Sequenznummern im TCP-Header konkret?
|
||||
**Punkte:** 2
|
||||
**Typ:** `[MATCH]`
|
||||
|
||||
Ordne jeder HTTP-Methode ihre Hauptfunktion zu.
|
||||
Ordnen Sie jeder HTTP-Methode ihre Hauptfunktion zu.
|
||||
|
||||
| Methode | Hauptfunktion |
|
||||
|---|---|
|
||||
@@ -485,7 +501,7 @@ Ordne jeder HTTP-Methode ihre Hauptfunktion zu.
|
||||
|
||||
Eine Person erstellt einen neuen Blog-Eintrag auf einer Webseite. Welche HTTP-Methode wird verwendet?
|
||||
|
||||
- [x] **POST – eine neue Ressource wird erstellt.** ✅
|
||||
- [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.
|
||||
@@ -502,7 +518,7 @@ Eine Person erstellt einen neuen Blog-Eintrag auf einer Webseite. Welche HTTP-Me
|
||||
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.** ✅
|
||||
- [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.
|
||||
|
||||
@@ -520,7 +536,7 @@ Eine Person löscht einen von ihr erstellten Kommentar auf einer Webseite. Welch
|
||||
- [ ] 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.** ✅
|
||||
- [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.
|
||||
|
||||
@@ -536,7 +552,7 @@ Eine Person löscht einen von ihr erstellten Kommentar auf einer Webseite. Welch
|
||||
Warum sollte man niemals GET verwenden, um sensible Daten (z. B. ein Passwort) an den Server zu senden?
|
||||
|
||||
- [ ] GET ist langsamer als POST – Passwörter müssen schnell übertragen werden.
|
||||
- [x] **Bei GET stehen die Daten sichtbar in der URL (Browser-Verlauf, Server-Logs, Proxy-Server). Bei POST sind sie im Body versteckt.** ✅
|
||||
- [x] **Bei GET stehen die Daten sichtbar in der URL (Browser-Verlauf, Server-Logs, Proxy-Server). Bei POST sind sie im Body versteckt.**
|
||||
- [ ] GET erlaubt nur Zahlen, keine Buchstaben.
|
||||
- [ ] GET wird vom Server nie verschlüsselt, POST immer.
|
||||
|
||||
@@ -549,7 +565,7 @@ Warum sollte man niemals GET verwenden, um sensible Daten (z. B. ein Passwort) a
|
||||
**Punkte:** 2
|
||||
**Typ:** `[MATCH]`
|
||||
|
||||
Ordne jeder ersten Ziffer eines HTTP-Status-Codes ihre Bedeutung zu.
|
||||
Ordnen Sie jeder ersten Ziffer eines HTTP-Status-Codes ihre Bedeutung zu.
|
||||
|
||||
| Erste Ziffer | Bedeutung |
|
||||
|---|---|
|
||||
@@ -571,7 +587,7 @@ Sie rufen eine Webseite auf und erhalten `HTTP/2 503 Service Unavailable`. Was b
|
||||
|
||||
- [ ] 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.** ✅
|
||||
- [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.
|
||||
@@ -587,7 +603,7 @@ 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).** ✅
|
||||
- [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."
|
||||
@@ -599,7 +615,7 @@ Sie erhalten einen 404-Fehler. Wer ist für die Ursache verantwortlich?
|
||||
**Punkte:** 2
|
||||
**Typ:** `[MATCH]`
|
||||
|
||||
Ordne jedem Szenario den passenden HTTP-Status-Code zu.
|
||||
Ordnen Sie jedem Szenario den passenden HTTP-Status-Code zu.
|
||||
|
||||
| Szenario | Status-Code |
|
||||
|---|---|
|
||||
@@ -641,12 +657,44 @@ Erklären Sie die vier HTTP-Methoden **GET**, **POST**, **PUT** und **DELETE**.
|
||||
**Punkte:** 2
|
||||
**Typ:** `[ESSAY]`
|
||||
|
||||
Erkläre, warum HTTP-Status-Codes aus einer dreistelligen Zahl bestehen und was die erste Ziffer konkret bedeutet. Nenne je einen Beispiel-Code für 2xx, 4xx und 5xx.
|
||||
Erklären Sie, warum HTTP-Status-Codes aus einer dreistelligen Zahl bestehen und was die erste Ziffer konkret bedeutet. Nennen Sie je einen Beispiel-Code für 2xx, 4xx und 5xx.
|
||||
|
||||
> **Musterlösung:** Die erste Ziffer kategorisiert die Antwort: 2xx = Erfolg, 3xx = Weiterleitung, 4xx = Client-Fehler, 5xx = Server-Fehler. Die restlichen zwei Ziffern spezifizieren den genauen Fall. Beispiele: 200 OK (Erfolg), 404 Not Found (Client-Fehler), 500 Internal Server Error (Server-Fehler). Diese Struktur ermöglicht es, allein aus dem Code zu verstehen, ob und wo ein Problem liegt – ohne die Antwort ganz lesen zu müssen.
|
||||
|
||||
---
|
||||
|
||||
### C11 – 401 vs. 403: Wo liegt der Unterschied?
|
||||
**Thema:** HTTP Status-Codes – 401 vs. 403
|
||||
**Punkte:** 1
|
||||
**Typ:** `[MC]`
|
||||
|
||||
Eine Person ruft eine geschützte Seite auf. Worin unterscheiden sich 401 und 403?
|
||||
|
||||
- [x] **401 Unauthorized: nicht angemeldet („Wer sind Sie?"). 403 Forbidden: angemeldet, aber ohne Berechtigung („Zugriff verweigert").**
|
||||
- [ ] 401 ist ein Server-Fehler, 403 ein Client-Fehler.
|
||||
- [ ] 401 bedeutet „dauerhaft verschoben", 403 „temporär nicht verfügbar".
|
||||
- [ ] Beide bedeuten dasselbe und sind austauschbar.
|
||||
|
||||
> **Feedback:** 401 = Authentifizierung fehlt (nicht eingeloggt). 403 = Authentifizierung vorhanden, aber Autorisierung fehlt (keine Rechte). Beide gehören zu 4xx (Client-Seite).
|
||||
|
||||
---
|
||||
|
||||
### C12 – 301 vs. 302: Weiterleitung
|
||||
**Thema:** HTTP Status-Codes – 301 vs. 302
|
||||
**Punkte:** 1
|
||||
**Typ:** `[MC]`
|
||||
|
||||
Eine Ressource wurde verschoben. Wann sendet der Server 301 statt 302?
|
||||
|
||||
- [x] **301 bei dauerhafter Verschiebung (Browser und Suchmaschinen merken sich die neue URL). 302 bei temporärer Verschiebung (die alte URL bleibt maßgeblich).**
|
||||
- [ ] 301 ist ein Fehlercode, 302 ein Erfolgscode.
|
||||
- [ ] 301 wird nur bei HTTPS verwendet, 302 nur bei HTTP.
|
||||
- [ ] Es gibt keinen Unterschied in der Wirkung.
|
||||
|
||||
> **Feedback:** 301 Moved Permanently ist cachebar und SEO-relevant (die Linkkraft wandert mit). 302 Found signalisiert eine temporäre Verschiebung – die ursprüngliche URL bleibt gültig.
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
## BLOCK D – DNS
|
||||
@@ -661,7 +709,7 @@ Erkläre, warum HTTP-Status-Codes aus einer dreistelligen Zahl bestehen und was
|
||||
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.** ✅
|
||||
- [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.
|
||||
|
||||
@@ -677,7 +725,7 @@ Was ist die Hauptfunktion eines DNS-Servers?
|
||||
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.** ✅
|
||||
- [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.
|
||||
|
||||
@@ -695,7 +743,7 @@ Sie geben `https://hdm-stuttgart.de` in die Adresszeile ein. Was passiert **vor*
|
||||
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.** ✅
|
||||
- [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.
|
||||
|
||||
@@ -713,7 +761,7 @@ Was ist die Hauptfunktion eines DNS-Servers?
|
||||
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.** ✅
|
||||
- [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.
|
||||
|
||||
@@ -728,7 +776,7 @@ Sie geben `https://hdm-stuttgart.de` in die Adresszeile ein. Was passiert vor de
|
||||
**Punkte:** 2
|
||||
**Typ:** `[ESSAY]`
|
||||
|
||||
Erkläre in 2–3 Sätzen, warum der DNS-Schritt zwingend vor dem TCP-Handshake stehen muss. Was würde passieren, wenn der Browser den Domain-Namen direkt an den Netzwerk-Stack übergeben würde?
|
||||
Erklären Sie in 2–3 Sätzen, warum der DNS-Schritt zwingend vor dem TCP-Handshake stehen muss. Was würde passieren, wenn der Browser den Domain-Namen direkt an den Netzwerk-Stack übergeben würde?
|
||||
|
||||
> **Musterlösung:** TCP arbeitet nur mit IP-Adressen – ein Domain-Name wie `hdm-stuttgart.de` ist für TCP-/IP-Stack sinnlos. Ohne vorherige DNS-Auflösung würde der Browser nicht wissen, an welche IP er das SYN senden soll. Der DNS-Schritt konvertiert den human-readable-Namen in eine maschinenlesbare IP, erst danach kann der Verbindungsaufbau beginnen.
|
||||
|
||||
@@ -771,7 +819,7 @@ Erklären Sie den Encapsulation-Prozess beim Senden einer Nachricht. Beschreiben
|
||||
**Punkte:** 2
|
||||
**Typ:** `[ORDER]`
|
||||
|
||||
Sortiere die Schritte eines HTTPS-Aufrufs in der richtigen Reihenfolge:
|
||||
Sortieren Sie die Schritte eines HTTPS-Aufrufs in der richtigen Reihenfolge:
|
||||
|
||||
1. DNS-Auflösung (Name → IP)
|
||||
2. TCP 3-Way-Handshake (Verbindung aufbauen)
|
||||
@@ -791,7 +839,7 @@ Sortiere die Schritte eines HTTPS-Aufrufs in der richtigen Reihenfolge:
|
||||
Sie geben eine URL ein. Welche Reihenfolge ist korrekt?
|
||||
|
||||
- [ ] (1) TCP-Handshake → (2) DNS → (3) HTTP GET → (4) HTTP 200 OK
|
||||
- [x] **(1) DNS → (2) TCP-Handshake → (3) HTTP GET → (4) HTTP 200 OK** ✅
|
||||
- [x] **(1) DNS → (2) TCP-Handshake → (3) HTTP GET → (4) HTTP 200 OK**
|
||||
- [ ] (1) HTTP GET → (2) DNS → (3) TCP-Handshake → (4) HTTP 200 OK
|
||||
- [ ] (1) DNS → (2) HTTP GET → (3) TCP-Handshake → (4) HTTP 200 OK
|
||||
|
||||
@@ -823,7 +871,7 @@ Erklären Sie die drei Hauptphasen beim Aufruf einer Webseite: **DNS-Auflösung*
|
||||
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.** ✅
|
||||
- [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.
|
||||
|
||||
@@ -836,7 +884,7 @@ Eine studierende Person platziert den `<title>` und `<meta name="description">`
|
||||
**Punkte:** 2
|
||||
**Typ:** `[MATCH]`
|
||||
|
||||
Ordne jedem Element zu, ob es in `<head>` oder `<body>` gehört.
|
||||
Ordnen Sie jedem Element zu, ob es in `<head>` oder `<body>` gehört.
|
||||
|
||||
| Element | Wohin? |
|
||||
|---|---|
|
||||
@@ -861,7 +909,7 @@ Ordne jedem Element zu, ob es in `<head>` oder `<body>` gehört.
|
||||
Was ist die konkrete Konsequenz, wenn `<meta charset="UTF-8">` fehlt oder falsch gesetzt ist?
|
||||
|
||||
- [ ] Die Webseite lädt gar nicht.
|
||||
- [x] **Sonderzeichen (Umlaute, Emojis) werden als kryptische Symbole dargestellt, weil der Browser die falsche Zeichenkodierung rät.** ✅
|
||||
- [x] **Sonderzeichen (Umlaute, Emojis) werden als kryptische Symbole dargestellt, weil der Browser die falsche Zeichenkodierung rät.**
|
||||
- [ ] Die Seite wird langsamer, da der Browser alle Sprachen durchprobieren muss.
|
||||
- [ ] Das CSS wird nicht geladen.
|
||||
|
||||
@@ -869,6 +917,25 @@ Was ist die konkrete Konsequenz, wenn `<meta charset="UTF-8">` fehlt oder falsch
|
||||
|
||||
---
|
||||
|
||||
### 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 | 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
|
||||
@@ -890,7 +957,7 @@ Ein Element `<p class="highlight" id="main">` wird angezeigt. Welche Farbe?
|
||||
|
||||
- [ ] Blau – die Element-Regel steht zuerst im Code.
|
||||
- [ ] Grün – Klassen haben immer Vorrang vor IDs.
|
||||
- [x] **Rot – die ID `#main` hat die höchste Spezifität (0,1,0,0).** ✅
|
||||
- [x] **Rot – die ID `#main` hat die höchste Spezifität (0,1,0,0).**
|
||||
- [ ] Rot – die letzte Regel im Code gewinnt immer.
|
||||
|
||||
> **Feedback:** Spezifität: ID (0,1,0,0) > Klasse (0,0,1,0) > Element (0,0,0,1). Reihenfolge im Code ist nur relevant bei gleicher Spezifität.
|
||||
@@ -912,7 +979,7 @@ Welche Farbe bei 900 px Breite?
|
||||
|
||||
- [ ] Weiß – Media-Queries gelten nur ab 1024 px.
|
||||
- [ ] Grün – die letzte Media-Query überschreibt immer.
|
||||
- [x] **Blau – bei 900 px greift `min-width: 768px` (900 ≥ 768), aber `min-width: 1024px` nicht (900 < 1024).** ✅
|
||||
- [x] **Blau – bei 900 px greift `min-width: 768px` (900 ≥ 768), aber `min-width: 1024px` nicht (900 < 1024).**
|
||||
- [ ] Weiß – keine Media-Query greift zwischen den Breakpoints.
|
||||
|
||||
> **Feedback:** Mobile First: Basis = white. Bei 900px: 768px-Query greift ✓, 1024px-Query greift ✗ → blau.
|
||||
@@ -930,7 +997,7 @@ Wie würde eine Media Query für „Desktop First" aussehen (Standard ist Deskto
|
||||
|
||||
- [ ] `@media (device-width: small) { ... }`
|
||||
- [ ] `@media (min-width: ...)` – bleibt gleich, nur die Reihenfolge ändert sich.
|
||||
- [x] **`@media (max-width: ...)` – Stile für Bildschirme, die kleiner als eine bestimmte Breite sind.** ✅
|
||||
- [x] **`@media (max-width: ...)` – Stile für Bildschirme, die kleiner als eine bestimmte Breite sind.**
|
||||
- [ ] `@media (mobile: true) { ... }`
|
||||
|
||||
> **Feedback:** Desktop First: Basis-CSS für große Schirme. `max-width` = „Wenn der Bildschirm schmäler ist als X, dann…" – Ausnahmen für Tablets/Handys.
|
||||
@@ -942,12 +1009,47 @@ Wie würde eine Media Query für „Desktop First" aussehen (Standard ist Deskto
|
||||
**Punkte:** 2
|
||||
**Typ:** `[ESSAY]`
|
||||
|
||||
Erkläre den Unterschied zwischen „Mobile First" und „Desktop First" beim Responsive Design. Welche Media-Query-Eigenschaft nutzt jeder Ansatz, und warum?
|
||||
Erklären Sie den Unterschied zwischen „Mobile First" und „Desktop First" beim Responsive Design. Welche Media-Query-Eigenschaft nutzt jeder Ansatz, und warum?
|
||||
|
||||
> **Musterlösung:** Mobile First: Das Basis-CSS ist für kleine Bildschirme (Handy). Mit `min-width` werden schrittweise Anpassungen für größere Bildschirme hinzugefügt („ab dieser Breite"). Desktop First: Das Basis-CSS ist für große Bildschirme. Mit `max-width` werden Ausnahmen für kleinere Geräte definiert (「bis zu dieser Breite"). Mobile First wird bevorzugt, weil die Mehrheit der Benutzenden mobil zugrifft und forced-mobile-first die Grundlage für progressive Enhancement bietet.
|
||||
|
||||
---
|
||||
|
||||
### G5 – box-sizing: border-box
|
||||
**Thema:** CSS Box-Modell – box-sizing
|
||||
**Punkte:** 2
|
||||
**Typ:** `[MC]`
|
||||
|
||||
Ein Element hat `width: 200px`, `padding: 20px` und `border: 5px`. Welche sichtbare Gesamtbreite ergibt sich mit `box-sizing: border-box`?
|
||||
|
||||
- [x] **200 px – Padding und Border werden in die angegebene Breite eingerechnet.**
|
||||
- [ ] 250 px – Padding und Border werden zur Breite addiert.
|
||||
- [ ] 245 px – nur das Padding zählt, die Border nicht.
|
||||
- [ ] 200 px, aber nur, wenn kein Margin gesetzt ist.
|
||||
|
||||
> **Feedback:** `border-box`: die `width` umfasst Content + Padding + Border (hier 200 px gesamt). Der Standard `content-box` würde addieren (200 + 2×20 + 2×5 = 250 px). Deshalb gilt `box-sizing: border-box` als Best Practice.
|
||||
|
||||
---
|
||||
|
||||
### 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 | Notation |
|
||||
|---|---|
|
||||
| `red` | Schlüsselwort |
|
||||
| `#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.
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
## BLOCK H – Barrierefreiheit
|
||||
@@ -959,7 +1061,7 @@ Erkläre den Unterschied zwischen „Mobile First" und „Desktop First" beim Re
|
||||
**Punkte:** 2
|
||||
**Typ:** `[MATCH]`
|
||||
|
||||
Ordne jedem Eingabegerät seine Nutzungsweise zu.
|
||||
Ordnen Sie jedem Eingabegerät seine Nutzungsweise zu.
|
||||
|
||||
| Eingabe | Nutzungsweise |
|
||||
|---|---|
|
||||
@@ -985,7 +1087,7 @@ Eine Person kann aktuell nur mit einer Hand ihr Handy bedienen, weil sie das Bab
|
||||
|
||||
- [ ] Permanent – das ist eine bleibende körperliche Behinderung.
|
||||
- [ ] Temporär – die Person ist verletzt und braucht Zeit zum Heilen.
|
||||
- [x] **Situativ – die Einschränkung entsteht durch die aktuelle Umgebung/Situation, nicht durch eine Behinderung.** ✅
|
||||
- [x] **Situativ – die Einschränkung entsteht durch die aktuelle Umgebung/Situation, nicht durch eine Behinderung.**
|
||||
- [ ] Diese Art von Einschränkung existiert nicht – Barrierefreiheit betrifft nur Menschen mit Behinderung.
|
||||
|
||||
> **Feedback:** Drei Typen: Permanent (z. B. Blindheit), Temporär (z. B. gebrochener Arm, Augen-OP), Situativ (z. B. helle Sonne, laute Umgebung, Baby auf dem Arm). Barrierefreie Gestaltung hilft bei allen drei.
|
||||
@@ -1013,7 +1115,7 @@ Erklären Sie die drei Typen von Einschränkungen: **permanent**, **temporär**
|
||||
Welches Beispiel demonstriert den Curb-Cut-Effekt?
|
||||
|
||||
- [ ] Barrierefreie Webseiten laden langsamer.
|
||||
- [x] **Untertitel: gedacht für Gehörlose, helfen aber auch in lauter Umgebung oder beim Sprachlernen.** ✅
|
||||
- [x] **Untertitel: gedacht für Gehörlose, helfen aber auch in lauter Umgebung oder beim Sprachlernen.**
|
||||
- [ ] Der Curb-Cut-Effekt bedeutet, dass barrierefreie Seiten nur für Menschen mit Behinderung nützlich sind.
|
||||
- [ ] Alt-Texte verlängern die Ladezeit einer Webseite.
|
||||
|
||||
@@ -1028,7 +1130,7 @@ Welches Beispiel demonstriert den Curb-Cut-Effekt?
|
||||
**Punkte:** 2
|
||||
**Typ:** `[ESSAY]`
|
||||
|
||||
Erkläre das Konzept des Curb-Cut-Effekts. Nenne zwei konkrete Web-Beispiele und erkläre jeweils, wer die ursprüngliche Zielgruppe war und wer sonst davon profitiert.
|
||||
Erklären Sie das Konzept des Curb-Cut-Effekts. Nennen Sie zwei konkrete Web-Beispiele und erklären Sie jeweils, wer die ursprüngliche Zielgruppe war und wer sonst davon profitiert.
|
||||
|
||||
> **Musterlösung:** Der Curb-Cut-Effekt beschreibt, wie eine Maßnahme für Menschen mit Behinderung am Ende allen zugute kommt – wie die Bordsteinabsenkung, die für Rollstuhlfahrer gedacht war, aber auch Kinderwagen, Rollkoffer und Fahrrädern helfen. Web-Beispiele: (1) Untertitel – primär für Gehörlose, helfen auch in lauter Umgebung oder beim Sprachlernen. (2) Alt-Texte – primär für Screen-Reader-Benutzende, helfen auch Suchmaschinen (SEO).
|
||||
|
||||
@@ -1042,7 +1144,7 @@ Erkläre das Konzept des Curb-Cut-Effekts. Nenne zwei konkrete Web-Beispiele und
|
||||
Was ist der European Accessibility Act (EAA)?
|
||||
|
||||
- [ ] Ein freiwilliges EU-Programm zur Förderung barrierefreier Websites.
|
||||
- [x] **Eine EU-Richtlinie, die seit Juni 2025 in Kraft ist und Barrierefreiheit in bestimmten digitalen Bereichen verpflichtend macht.** ✅
|
||||
- [x] **Eine EU-Richtlinie, die seit Juni 2025 in Kraft ist und Barrierefreiheit in bestimmten digitalen Bereichen verpflichtend macht.**
|
||||
- [ ] Ein deutsches Gesetz, das nur öffentliche Behörden betrifft.
|
||||
- [ ] Ein technisches Standard wie HTML oder CSS.
|
||||
|
||||
@@ -1055,7 +1157,7 @@ Was ist der European Accessibility Act (EAA)?
|
||||
**Punkte:** 2
|
||||
**Typ:** `[ESSAY]`
|
||||
|
||||
Erkläre, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle Benutzenden hat. Nenne 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. Nennen Sie mindestens zwei konkrete Beispiele.
|
||||
|
||||
> **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.
|
||||
|
||||
@@ -1069,7 +1171,7 @@ Erkläre, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung
|
||||
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?** ✅
|
||||
- [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.
|
||||
|
||||
@@ -1090,7 +1192,7 @@ Sie möchten eine Webseite auf Barrierefreiheit testen, ohne assistive Technolog
|
||||
**Punkte:** 3
|
||||
**Typ:** `[ESSAY]`
|
||||
|
||||
Eine Person klickt auf einen „Neuen Eintrag erstellen"-Button einer Webanwendung. Beschreibe vom Klick bis zur Antwort des Servers, welche Protokolle beteiligt sind und welche HTTP-Methode verwendet wird.
|
||||
Eine Person klickt auf einen „Neuen Eintrag erstellen"-Button einer Webanwendung. Beschreiben Sie vom Klick bis zur Antwort des Servers, welche Protokolle beteiligt sind und welche HTTP-Methode verwendet wird.
|
||||
|
||||
> **Musterlösung:** (1) Der Browser sendet eine HTTP-Anfrage. Da es sich um eine neue Ressource handelt, nutzt er POST. (2) Vorher: DNS löst den Domain-Namen auf. (3) TCP-Handshake stellt die Verbindung her. (4) POST-Anfrage wird gesendet (Daten im Body). (5) Server verarbeitet, erstellt den Eintrag, antwortet mit 201 Created.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user