fix layout and add disabled state for slides
This commit is contained in:
@@ -1,6 +1,82 @@
|
||||
# 223015c – Fragenkatalog (Question Pool)
|
||||
**IT-Grundlagen · HdM Stuttgart · M. Czechowski**
|
||||
**Ziel: ~100 Fragen, hohe Varianz, semestraler Los-Mechanismus**
|
||||
---
|
||||
marp: true
|
||||
theme: gaia
|
||||
paginate: true
|
||||
backgroundColor: #fff
|
||||
header: ""
|
||||
footer: ""
|
||||
title: "Fragenkatalog - Klausurvorbereitung"
|
||||
---
|
||||
<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: #d63384;
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid #d63384;
|
||||
}
|
||||
pre code {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
code {
|
||||
background: #1a1a2e;
|
||||
color: #d63384;
|
||||
padding: 0.15em 0.4em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
a {
|
||||
color: var(--color-highlight);
|
||||
}
|
||||
section.klausur {
|
||||
background: repeating-linear-gradient(
|
||||
135deg,
|
||||
#fce4ec,
|
||||
#fce4ec 40px,
|
||||
#fff 40px,
|
||||
#fff 80px
|
||||
) !important;
|
||||
}
|
||||
@media print {
|
||||
section.klausur {
|
||||
background: #fce4ec !important;
|
||||
}
|
||||
}
|
||||
section.aufgabe {
|
||||
background: #fce4ec !important;
|
||||
}
|
||||
section.aufgabe footer {
|
||||
display: none;
|
||||
}
|
||||
section.disable {
|
||||
opacity: 0.4;
|
||||
}
|
||||
</style>FA2
|
||||
|
||||
|
||||
# Fragenkatalog – 223015b/223015c
|
||||
**IT-Grundlagen/Dateiformate · HdM Stuttgart · M. Czechowski**
|
||||
|
||||
<small>Stand: 01.02.2026</small>
|
||||
|
||||
---
|
||||
|
||||
@@ -15,7 +91,8 @@
|
||||
> `[CLOZE]` = `cloze` (Lückentext, gemischt)`
|
||||
|
||||
---
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
## BLOCK A – Von-Neumann-Architektur
|
||||
|
||||
@@ -40,6 +117,8 @@ Ordne jeder Komponente der Von-Neumann-Architektur ihre Funktion zu.
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### A2 – Welche Komponente ist das?
|
||||
**Thema:** Von-Neumann – einzelne Komponente identifizieren
|
||||
**Punkte:** 1
|
||||
@@ -56,24 +135,7 @@ Ein Programm besteht aus einer Folge von Befehlen. Eine Komponente der Von-Neuma
|
||||
|
||||
---
|
||||
|
||||
### A3 – Bus-Typen identifizieren
|
||||
**Thema:** Von-Neumann – Bus-System im Detail
|
||||
**Punkte:** 2
|
||||
**Typ:** `[MATCH]`
|
||||
|
||||
Ordne jedem Bus-Typ seine Funktion zu.
|
||||
|
||||
| Bus | Funktion |
|
||||
|---|---|
|
||||
| Adressbus | Übermittelt die Speicheradresse, an der Daten gelesen/geschrieben werden |
|
||||
| Datenbus | Führt die eigentlichen Daten zwischen CPU und Speicher |
|
||||
| Steuerbus | Übermittelt Steuersignale (Lesen/Schreiben, Takt) |
|
||||
|
||||
> **Feedback:** Adressbus = „Wo?", Datenbus = „Was?", Steuerbus = „Wie/Wann?"
|
||||
|
||||
---
|
||||
|
||||
### A4 – Von-Neumann: Was wird ermöglicht?
|
||||
### A3 – Von-Neumann: Was wird ermöglicht?
|
||||
**Thema:** Von-Neumann – Bedeutung
|
||||
**Punkte:** 2
|
||||
**Typ:** `[MM]` (Mehrfachauswahl)
|
||||
@@ -91,38 +153,7 @@ Welche der folgenden Aussagen werden durch die Von-Neumann-Architektur ermöglic
|
||||
|
||||
---
|
||||
|
||||
### A5 – Von-Neumann vs. Harvard: Kern-Unterschied
|
||||
**Thema:** Architektur-Vergleich
|
||||
**Punkte:** 1
|
||||
**Typ:** `[MC]`
|
||||
|
||||
Mikrocontroller nutzen oft die Harvard-Architektur. Was unterscheidet sie von der Von-Neumann-Architektur?
|
||||
|
||||
- [ ] Harvard hat mehr Prozessorkerne.
|
||||
- [x] **Bei Harvard sind Code- und Datenspeicher getrennt – bei Von-Neumann teilen sie den gleichen Speicher.** ✅
|
||||
- [ ] Harvard nutzt keinen Bus.
|
||||
- [ ] Der Unterschied liegt nur in der Taktfrequenz.
|
||||
|
||||
> **Feedback:** Von-Neumann: ein gemeinsamer Speicher für Code und Daten. Harvard: zwei separate Speicher. Harvard ist schneller bei Echtzeitanwendungen (paralleler Zugriff), aber weniger flexibel.
|
||||
|
||||
---
|
||||
|
||||
### A6 – Harvard: Wofür?
|
||||
**Thema:** Harvard-Architektur – Anwendung
|
||||
**Punkte:** 1
|
||||
**Typ:** `[MC]`
|
||||
|
||||
Wo nutzt man die Harvard-Architektur?
|
||||
|
||||
- [ ] In allen modernen Laptops und Smartphones.
|
||||
- [ ] In Cloud-Rechenzentren.
|
||||
- [x] **In Mikrokontrollern (z. B. Arduino) und DSPs – dort zählt Echtzeit.** ✅
|
||||
- [ ] Sie wurde durch Von-Neumann ersetzt und existiert nicht mehr.
|
||||
|
||||
> **Feedback:** Harvard-Architektur = Nische für Echtzeit-Anwendungen. Mikrocontroller, Signalprozessoren. Der Rest der modernen Computerwelt: Von-Neumann (z. B. Laptop, Smartphone, Server, Spielkonsole).
|
||||
|
||||
---
|
||||
---
|
||||
<!-- _class: lead -->
|
||||
|
||||
## BLOCK B – Netzwerk-Grundlagen (TCP/IP)
|
||||
|
||||
@@ -136,13 +167,14 @@ Wo nutzt man die Harvard-Architektur?
|
||||
Ordne jedem Protokoll die richtige TCP/IP-Schicht zu.
|
||||
|
||||
| Protokoll | Schicht |
|
||||
|---|---|
|
||||
|----------|---|
|
||||
| HTTP | Anwendung |
|
||||
| DNS | Anwendung |
|
||||
| TCP | Transport |
|
||||
| UDP | Transport |
|
||||
| IP | Internet |
|
||||
| Ethernet | Netzzugang |
|
||||
| WLAN | Netzzugang |
|
||||
|
||||
> **Feedback:** Anwendung: HTTP, DNS, SMTP, FTP. Transport: TCP, UDP. Internet: IP. Netzzugang: Ethernet, WLAN.
|
||||
|
||||
@@ -164,6 +196,8 @@ Das Protokoll IP arbeitet auf welcher TCP/IP-Schicht?
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### B3 – Schicht-Funktion beschreiben
|
||||
**Thema:** TCP/IP – Funktionen der Schichten
|
||||
**Punkte:** 2
|
||||
@@ -194,7 +228,7 @@ Was identifiziert eine MAC-Adresse?
|
||||
### B5 – Was ist eine IP-Adresse?
|
||||
**Thema:** IP-Adresse – Konzept
|
||||
**Punkte:** 1
|
||||
**Typ:** `[MC]`
|
||||
**Typ:** `[MC]`WiFi
|
||||
|
||||
Was identifiziert eine IP-Adresse?
|
||||
|
||||
@@ -240,6 +274,8 @@ Ordne jeder Adresse ihre Beschreibung zu.
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### B8 – MAC ändert sich, IP nicht: Warum?
|
||||
**Thema:** IP vs. MAC beim Routing – Transfer
|
||||
**Punkte:** 2
|
||||
@@ -393,13 +429,14 @@ 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.** ✅
|
||||
- [ ] Sie zählen, wie viele Benutzer gleichzeitig auf dem Server sind.
|
||||
- [ ] Sie zählen, wie viele BenutzerInnen gleichzeitig auf dem Server sind.
|
||||
- [ ] Sie bestimmen die maximale Größe einer Datei.
|
||||
|
||||
> **Feedback:** IP-Pakete können unterschiedliche Routen nehmen → Part 3 kommt vor Part 1. TCP sortiert sie anhand der Sequenznummern wieder.
|
||||
|
||||
---
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
## BLOCK C – HTTP
|
||||
|
||||
@@ -428,7 +465,7 @@ Ordne jeder HTTP-Methode ihre Hauptfunktion zu.
|
||||
**Punkte:** 1
|
||||
**Typ:** `[MC]`
|
||||
|
||||
Ein Nutzer erstellt einen neuen Blog-Eintrag auf einer Webseite. Welche HTTP-Methode wird verwendet?
|
||||
Ein NutzerInnen 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.
|
||||
@@ -444,7 +481,7 @@ Ein Nutzer erstellt einen neuen Blog-Eintrag auf einer Webseite. Welche HTTP-Met
|
||||
**Punkte:** 1
|
||||
**Typ:** `[MC]`
|
||||
|
||||
Ein Nutzer aktualisiert sein Profilbild – das alte Bild wird durch ein neues ersetzt. Welche HTTP-Methode?
|
||||
Ein NutzerInnen aktualisiert sein Profilbild – das alte Bild wird durch ein neues ersetzt. Welche HTTP-Methode?
|
||||
|
||||
- [ ] GET – GET kann auch Daten senden.
|
||||
- [x] **PUT – ersetzt eine existierende Ressource.** ✅
|
||||
@@ -460,7 +497,7 @@ Ein Nutzer aktualisiert sein Profilbild – das alte Bild wird durch ein neues e
|
||||
**Punkte:** 1
|
||||
**Typ:** `[MC]`
|
||||
|
||||
Ein Nutzer löscht einen von ihm erstellten Kommentar auf einer Webseite. Welche HTTP-Methode wird der Browser im Hintergrund verwenden?
|
||||
Ein NutzerInnen löscht einen von ihm 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.
|
||||
@@ -471,9 +508,7 @@ Ein Nutzer löscht einen von ihm erstellten Kommentar auf einer Webseite. Welche
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### C5 – GET: Warum nicht für Passwörter?
|
||||
**Thema:** HTTP-Methoden – GET Sicherheit
|
||||
@@ -491,7 +526,7 @@ Warum sollte man niemals GET verwenden, um sensible Daten (z. B. ein Passwort) a
|
||||
|
||||
---
|
||||
|
||||
### C6 – Status-Codes: Categorisierung
|
||||
### C6 – Status-Codes: Kategorisierung
|
||||
**Thema:** HTTP Status-Codes – Bedeutung der ersten Ziffer
|
||||
**Punkte:** 2
|
||||
**Typ:** `[MATCH]`
|
||||
@@ -502,7 +537,7 @@ Ordne jeder ersten Ziffer eines HTTP-Status-Codes ihre Bedeutung zu.
|
||||
|---|---|
|
||||
| 2xx | Erfolg – die Anfrage wurde erfolgreich verarbeitet |
|
||||
| 3xx | Weiterleitung – die Ressource wurde verschoben |
|
||||
| 4xx | Client-Fehler – die Anfrage des Nutzers war fehlerhaft |
|
||||
| 4xx | Client-Fehler – die Anfrage des NutzerInnens 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 dir sofort, wo das Problem liegt.
|
||||
@@ -514,7 +549,7 @@ Ordne jeder ersten Ziffer eines HTTP-Status-Codes ihre Bedeutung zu.
|
||||
**Punkte:** 1
|
||||
**Typ:** `[MC]`
|
||||
|
||||
Du rufst eine Webseite auf und erhältst `HTTP/1.1 503 Service Unavailable`. Was bedeutet das?
|
||||
Du rufst eine Webseite auf und erhältst `HTTP/2 503 Service Unavailable`. Was bedeutet das?
|
||||
|
||||
- [ ] Du hast die falsche URL eingegeben.
|
||||
- [ ] Der Server hat die Anfrage erfolgreich umgeleitet.
|
||||
@@ -534,7 +569,7 @@ Du erhältst einen 404-Fehler. Wer ist für die Ursache verantwortlich?
|
||||
|
||||
- [ ] Der Server ist abgestürzt.
|
||||
- [ ] Das Internet ist ausgefallen.
|
||||
- [x] **Der Client (Nutzer) – eine URL wurde angefordert, die nicht existiert (Tippfehler oder veralteter Link).** ✅
|
||||
- [x] **Der Client (NutzerInnen) – 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 du anforderst, habe ich nicht."
|
||||
@@ -569,7 +604,8 @@ Erkläre, warum HTTP-Status-Codes aus einer dreistelligen Zahl bestehen und was
|
||||
> **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.
|
||||
|
||||
---
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
## BLOCK D – DNS
|
||||
|
||||
@@ -628,7 +664,8 @@ Der DNS-Server übersetzt einen [[1:Domain-Namen]] in eine [[2:IP-Adresse]]. Die
|
||||
> **Feedback:** Die vier Lücken beschreiben den DNS-Ablauf vollständig: Was wird übersetzt, in was, wann, und warum.
|
||||
|
||||
---
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
## BLOCK E – Der Gesamtablauf (Zusammen)
|
||||
|
||||
@@ -666,9 +703,7 @@ Du gibst eine URL ein. Welche Reihenfolge ist korrekt?
|
||||
> **Feedback:** DNS immer zuerst. Dann TCP (Verbindung). Dann HTTP (Anfrage/Antwort).
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
---
|
||||
<!-- _class: lead -->
|
||||
|
||||
## BLOCK F – HTML-Grundlagen
|
||||
|
||||
@@ -679,14 +714,14 @@ Du gibst eine URL ein. Welche Reihenfolge ist korrekt?
|
||||
**Punkte:** 2
|
||||
**Typ:** `[MC]`
|
||||
|
||||
Ein Student platziert `<title>` und `<meta name="description">` im `<body>` statt im `<head>`. Welche zwei Konsequenzen hat das?
|
||||
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 den Nutzer, sichtbar für Browser/Maschinen). `<body>` = sichtbarer Inhalt. Title und description im Body werden nicht als Metadaten interpretiert.
|
||||
> **Feedback:** `<head>` = Metadaten (unsichtbar für die NutzerInnen, sichtbar für Browser/Maschinen). `<body>` = sichtbarer Inhalt. Title und description im Body werden nicht als Metadaten interpretiert.
|
||||
|
||||
---
|
||||
|
||||
@@ -706,7 +741,7 @@ Ordne jedem Element zu, ob es in `<head>` oder `<body>` gehört.
|
||||
| `<p>Text hier</p>` | `<body>` |
|
||||
| `<link rel="stylesheet">` | `<head>` |
|
||||
|
||||
> **Feedback:** `<head>` = alles, was der Nutzer nicht direkt sieht (Metadaten, Styles, Titel). `<body>` = alles, was im Browser-Fenster angezeigt wird.
|
||||
> **Feedback:** `<head>` = alles, was der NutzerInnen nicht direkt sieht (Metadaten, Styles, Titel). `<body>` = alles, was im Browser-Fenster angezeigt wird.
|
||||
|
||||
---
|
||||
|
||||
@@ -725,7 +760,8 @@ Was ist die konkrete Konsequenz, wenn `<meta charset="UTF-8">` fehlt oder falsch
|
||||
> **Feedback:** Ohne charset nutzt der Browser oft einen Standard wie Latin-1. Bei UTF-8-gespeicherten Dateien → Umlaute und Emojis werden falsch dargestellt (Mojibake).
|
||||
|
||||
---
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
## BLOCK G – CSS
|
||||
|
||||
@@ -753,9 +789,6 @@ Ein Element `<p class="highlight" id="main">` wird angezeigt. Welche Farbe?
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
### G2 – Responsive Design: Mobile First – Welche Farbe?
|
||||
**Thema:** CSS Media Queries – Mobile First
|
||||
@@ -778,6 +811,8 @@ Welche Farbe bei 900 px Breite?
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### G3 – Desktop First: `max-width` erkläre
|
||||
**Thema:** CSS Media Queries – Desktop First
|
||||
**Punkte:** 1
|
||||
@@ -801,10 +836,11 @@ Wie würde eine Media Query für „Desktop First" aussehen (Standard ist Deskto
|
||||
|
||||
Erkläre 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 Nutzer mobil zugreift und es forced-mobile-first die Grundlage für progressive Enhancement bietet.
|
||||
> **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 NutzerInnen mobil zugreift und es forced-mobile-first die Grundlage für progressive Enhancement bietet.
|
||||
|
||||
---
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
## BLOCK H – Barrierefreiheit
|
||||
|
||||
@@ -835,10 +871,10 @@ Ordne jedem Eingabegerät seine Nutzungsweise zu.
|
||||
**Punkte:** 2
|
||||
**Typ:** `[MC]`
|
||||
|
||||
Ein Nutzer kann aktuell nur mit einer Hand sein Handy bedienen, weil er das Baby auf dem Arm trägt. Wie klassifiziert man diese Einschränkung?
|
||||
Eine NutzerInnen kann aktuell nur mit einer Hand sein Handy bedienen, weil er das Baby auf dem Arm trägt. Wie klassifiziert man diese Einschränkung?
|
||||
|
||||
- [ ] Permanent – das ist eine bleibende körperliche Behinderung.
|
||||
- [ ] Temporär – der Nutzer ist verletzt und braucht Zeit zum Heilen.
|
||||
- [ ] Temporär – der NutzerInnen ist verletzt und braucht Zeit zum Heilen.
|
||||
- [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.
|
||||
|
||||
@@ -846,6 +882,8 @@ Ein Nutzer kann aktuell nur mit einer Hand sein Handy bedienen, weil er das Baby
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### H3 – Curb-Cut-Effekt: Beispiel identifizieren
|
||||
**Thema:** Barrierefreiheit – Curb-Cut-Effekt
|
||||
**Punkte:** 1
|
||||
@@ -862,14 +900,16 @@ Welches Beispiel demonstriert den Curb-Cut-Effekt?
|
||||
|
||||
---
|
||||
|
||||
### H4 – Curb-Cut-Effekt: Erkläre
|
||||
<!-- _class: disable -->
|
||||
|
||||
### H4 – Curb-Cut-Effekt: Erklärung
|
||||
**Thema:** Barrierefreiheit – Curb-Cut-Effekt Transfer
|
||||
**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.
|
||||
|
||||
> **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 helft. 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-Nutzer, helfen auch Suchmaschinen (SEO).
|
||||
> **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 helft. 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-NutzerInnen, helfen auch Suchmaschinen (SEO).
|
||||
|
||||
---
|
||||
|
||||
@@ -889,12 +929,12 @@ Was ist der European Accessibility Act (EAA)?
|
||||
|
||||
---
|
||||
|
||||
### H6 – Barrierefreiheit: Warum auch für „normale" Nutzer?
|
||||
### H6 – Barrierefreiheit: Warum auch für „normale" NutzerInnen?
|
||||
**Thema:** Barrierefreiheit – Business Case
|
||||
**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 Nutzer hat. Nenne mindestens zwei konkrete Beispiele.
|
||||
Erkläre, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle NutzerInnen hat. Nenne 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.
|
||||
|
||||
@@ -912,10 +952,12 @@ Du willst eine Webseite auf Barrierefreiheit testen, ohne assistive Technologie
|
||||
- [ ] Du installierst einen Screenreader und lässt die Seite vorlesen.
|
||||
- [ ] Du öffnest den Quellcode und zählst die barrierefreien Tags.
|
||||
|
||||
> **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-Nutzer (und damit auch für Screenreader-Nutzer) nicht zugänglich. Tools wie axe DevTools oder Lighthouse automatisieren ~30% der Checks.
|
||||
> **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-NutzerInnen (und damit auch für Screenreader-NutzerInnen) nicht zugänglich. Tools wie axe DevTools oder Lighthouse automatisieren ~30% der Checks.
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
## BLOCK I – Zusammenfassung-Fragen (Übergreifend)
|
||||
|
||||
---
|
||||
@@ -925,7 +967,7 @@ Du willst eine Webseite auf Barrierefreiheit testen, ohne assistive Technologie
|
||||
**Punkte:** 3
|
||||
**Typ:** `[ESSAY]`
|
||||
|
||||
Ein Nutzer 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.
|
||||
Ein NutzerInnen 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.
|
||||
|
||||
> **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.
|
||||
|
||||
@@ -941,9 +983,7 @@ Du rufst eine Webseite auf und erhältst eine Fehlermeldung. Beschreibe drei ver
|
||||
> **Musterlösung:** (1) DNS-Fehler: „Der Server wurde nicht gefunden" → DNS konnte den Namen nicht auflösen (z. B. Tippfehler in der URL oder DNS-Server nicht erreichbar). (2) TCP-Fehler: „Die Verbindung wurde verweigert" → Server existiert (IP bekannt), akzeptiert aber keine Verbindung (nicht gestartet, Port blockiert). (3) HTTP-Fehler: 404 → TCP-Verbindung erfolgreich, aber die angeforderte Ressource existiert nicht auf dem Server.
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
---
|
||||
<!-- _class: lead -->
|
||||
|
||||
## BLOCK J – Dateiformate: Grundbegriffe
|
||||
|
||||
@@ -1066,12 +1106,8 @@ Ordne zu: Container oder Codec?
|
||||
|---|---|
|
||||
| MP4 | Container |
|
||||
| H.264 | Codec |
|
||||
| MKV | Container |
|
||||
| AAC | Codec |
|
||||
| WebM | Container |
|
||||
| AV1 | Codec |
|
||||
| VP9 | Codec |
|
||||
|
||||
> **Feedback:** Container = Dateiformat, das Streams zusammenpackt (MP4, MKV, WebM). Codec = Kompressionsalgorithmus für einen bestimmten Stream (H.264, AV1, AAC).
|
||||
|
||||
---
|
||||
@@ -1088,14 +1124,6 @@ Verlustfreie und verlustbehaftete Kompression arbeiten nach unterschiedlichen Pr
|
||||
| Redundanz entfernen (wiederholende Muster kompakter darstellen) | Verlustfrei |
|
||||
| Irrelevanz entfernen (für Menschen nicht wahrnehmbar) | Verlustbehaftet |
|
||||
|
||||
**Zusätzlich:** Welches Beispiel passt zu welchem Prinzip?
|
||||
|
||||
| Beispiel | Prinzip |
|
||||
|---|---|
|
||||
| „AAAA" wird zu „4×A" (Run-Length Encoding) | Redundanz |
|
||||
| Hohe Frequenzen in einem Foto werden weggeworfen – das Auge merkt es kaum | Irrelevanz |
|
||||
| Psychoakustik bei MP3: Töne maskieren andere Töne | Irrelevanz |
|
||||
|
||||
> **Feedback:** Der Kernunterschied: Verlustfrei arbeitet mit Redundanz – Wiederholungen werden kompakter gespeichert, aber nichts geht verloren. Verlustbehaftet arbeitet mit Irrelevanz – Daten werden weggeworfen, die Menschen sowieso nicht wahrnehmen können (Psychovisuell bei Bildern, Psychoakustisch bei Audio).
|
||||
|
||||
---
|
||||
@@ -1117,7 +1145,8 @@ Sortiere die Dateneinheiten von kleinster zu größter:
|
||||
> **Feedback:** Jede Stufe = Faktor 1.000 (SI-Präfixe). Merkhilfe: „Komm Mit Großem Tee, Peter". Ein einzelnes Foto (12 MP, unkomprimiert) ≈ 36 MB. Ein FullHD-Kinofilm ≈ 1 GB. Ein 4K-Film pro Minute unkomprimiert ≈ 44 GB.
|
||||
|
||||
---
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
## BLOCK K – Bildformate & Raster vs. Vektor
|
||||
|
||||
@@ -1268,7 +1297,8 @@ Ordne jedem Interpolationsverfahren seine Eigenschaft zu.
|
||||
> **Feedback:** Bei der Wahl: Pixel-Art → Nearest Neighbor (soll pixelig bleiben). Normale Bilder → Bilinear oder Bicubic. Maximale Qualität bei Fotos → Lanczos.
|
||||
|
||||
---
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
## BLOCK L – JPEG: Innenleben
|
||||
|
||||
@@ -1298,7 +1328,7 @@ JPEG ist ein …
|
||||
Wie nutzt JPEG die Schwächen des menschlichen Auges aus?
|
||||
|
||||
- [ ] Das Auge kann keine Farben wahrnehmen – daher werden Farben komplett entfernt.
|
||||
- [x] **Das Auge sieht Helligkeit besser als Farbe. JPEG behält die Helligkeit (Y) voll auf, reduziert aber die Farbauflösung (Cb, Cr) – der Verlust wird kaum wahrgenommen.** ✅
|
||||
- [x] **Das Auge sieht Helligkeit besser als Farbe. JPEG behält die Helligkeit (Y) nahezu vollständig, reduziert aber die Farbauflösung (Cb, Cr) – der Verlust wird kaum wahrgenommen.** ✅
|
||||
- [ ] Das Auge kann keine Details sehen – daher werden alle Details entfernt.
|
||||
- [ ] JPEG nutzt keine Wahrnehmungsforschung, komprimiert rein mathematisch.
|
||||
|
||||
@@ -1421,22 +1451,7 @@ Ordne jedem JPEG-Artefakt seine Beschreibung zu.
|
||||
|
||||
---
|
||||
|
||||
### L10 – JPEG Quality: Sweet Spot
|
||||
**Thema:** JPEG – Praktische Qualitätswahl
|
||||
**Punkte:** 1
|
||||
**Typ:** `[MC]`
|
||||
|
||||
Bei welcher JPEG-Quality sind Artefakte für die meisten Menschen kaum sichtbar, aber die Datei trotzdem deutlich kleiner?
|
||||
|
||||
- [ ] Quality 30 – hier beginnt die Kompression erst.
|
||||
- [ ] Quality 100 – nur hier ist JPEG verlustfrei.
|
||||
- [x] **Quality 85–90 – etwa 10× Kompression, für Menschen kaum unterscheidbar vom Original.** ✅
|
||||
- [ ] Quality 50 – der optimale Kompromiss für alle Anwendungen.
|
||||
|
||||
> **Feedback:** Quality 85–90 = der „Sweet Spot". Quality 100 ≠ verlustfrei (immer noch lossy!). Für Web/Social Media: 60–80 oft ausreichend. Für Archivierung: 90–100 oder besser PNG/RAW.
|
||||
|
||||
---
|
||||
---
|
||||
<!-- _class: lead -->
|
||||
|
||||
## BLOCK M – Bildformate: PNG, GIF, WebP, SVG
|
||||
|
||||
@@ -1527,19 +1542,22 @@ Ordne jedem Szenario das optimale Bildformat zu.
|
||||
| Szenario | Format |
|
||||
|---|---|
|
||||
| Ein Foto für eine Webseite (klein, OK-Qualität) | JPEG |
|
||||
| Ein Screenshot einer Benutzeroberfläche | PNG |
|
||||
| Ein Screenshot einer BenutzerInnenoberfläche | PNG |
|
||||
| Ein Logo, das auf allen Bildschirmgrößen scharf sein muss | SVG |
|
||||
| Ein animiertes Reaktionsbild für einen Chat | GIF |
|
||||
|
||||
> **Feedback:** JPEG = Fotos (klein, lossy OK). PNG = Screenshots, Grafiken mit Transparenz (verlustfrei). SVG = Logos, Icons (skalierbar). GIF = Animationen (256 Farben, aber Animations-Support).
|
||||
|
||||
---
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
## BLOCK N – Video-Kompression
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### N1 – Spatial vs. Temporal Compression
|
||||
**Thema:** Video – Kompressionsprinzipien
|
||||
**Punkte:** 2
|
||||
@@ -1557,6 +1575,8 @@ Ordne jedem Prinzip seine Beschreibung zu.
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### N2 – I-Frame, P-Frame, B-Frame: Was ist was?
|
||||
**Thema:** Video – Frame-Typen
|
||||
**Punkte:** 2
|
||||
@@ -1574,6 +1594,8 @@ Ordne jedem Frame-Typ seine Beschreibung zu.
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### N3 – Was passiert, wenn ein I-Frame beschädigt ist?
|
||||
**Thema:** Video – I-Frame Bedeutung Transfer
|
||||
**Punkte:** 2
|
||||
@@ -1585,6 +1607,8 @@ Erkläre, warum ein I-Frame bei der Videogespeicherung so wichtig ist. Was passi
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### N4 – Motion Compensation: Prinzip
|
||||
**Thema:** Video – Motion Compensation
|
||||
**Punkte:** 1
|
||||
@@ -1601,6 +1625,8 @@ Was beschreibt ein Motion Vector bei der Videogespeicherung?
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### N5 – Video-Codecs: Zeitstrahl
|
||||
**Thema:** Video – Codecs-Übersicht
|
||||
**Punkte:** 2
|
||||
@@ -1627,12 +1653,15 @@ Erkläre, warum AV1 als „die Zukunft" der Videogespeicherung gilt. Nenne minde
|
||||
> **Musterlösung:** AV1 (2018) ist royalty-free und open source – die Alliance for Open Media vereint Google, Netflix, Amazon, Apple, Mozilla. Es liefert 30% bessere Kompression als H.265 und unterstützt 8K, HDR, hohe Frame-Rates. H.265 scheitert vor allem am Patent-Chaos: Drei konkurrierende Patent-Pools (MPEG-LA, HEVC Advance, Velos Media) erzeugen rechtliche Unsicherheit und unklare Kosten → viele Unternehmen bleiben bei H.264 oder wechseln direkt zu AV1.
|
||||
|
||||
---
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
## BLOCK O – Speichermedien & Schnittstellen
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### O1 – KB vs. KiB: Was ist der Unterschied?
|
||||
**Thema:** Speicher – Einheiten
|
||||
**Punkte:** 2
|
||||
@@ -1649,6 +1678,8 @@ Eine Festplatte wird als „1 TB" vermarktet, aber Windows zeigt nur ~931 GB an.
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### O2 – HDD vs. SSD: Kern-Unterschied
|
||||
**Thema:** Speichermedien – HDD vs. SSD
|
||||
**Punkte:** 1
|
||||
@@ -1665,6 +1696,8 @@ Was ist der fundamentale technische Unterschied zwischen HDD und SSD?
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### O3 – HDD vs. SSD: Eigenschaften zuordnen
|
||||
**Thema:** Speichermedien – Vergleich
|
||||
**Punkte:** 2
|
||||
@@ -1685,6 +1718,8 @@ Ordne jeder Eigenschaft zu: HDD oder SSD?
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### O4 – USB-C: Stecker oder Protokoll?
|
||||
**Thema:** Schnittstellen – USB-C
|
||||
**Punkte:** 2
|
||||
@@ -1701,6 +1736,8 @@ Ein USB-C-Kabel kann langsam sein, obwohl es wie ein „modernes" Kabel aussieht
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### O5 – Dateisysteme: Zuordnung
|
||||
**Thema:** Dateisysteme – Überblick
|
||||
**Punkte:** 2
|
||||
@@ -1720,6 +1757,8 @@ Ordne jedem Dateisystem seine ideale Anwendung zu.
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### O6 – FAT32: Warum nicht für große Dateien?
|
||||
**Thema:** Dateisysteme – FAT32 Limitation
|
||||
**Punkte:** 1
|
||||
@@ -1747,6 +1786,8 @@ Erkläre die 3-2-1-Regel für Backups. Begründe, warum jede der drei Ziffern wi
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### O8 – Backup-Arten: Unterschiede
|
||||
**Thema:** Backup – Typen
|
||||
**Punkte:** 2
|
||||
@@ -1761,8 +1802,3 @@ Ordne jedem Backup-Typ seine Beschreibung zu.
|
||||
| Differenziell | Änderungen seit dem letzten Voll-Backup – Mittelweg zwischen beiden |
|
||||
|
||||
> **Feedback:** Typisches Schema: Sonntag Full, Mo–Sa Inkrementell oder Differenziell. Inkrementell = schnellstes Backup, langsamste Wiederherstellung (Kette aufbauen). Full = langsamstes Backup, schnellste Wiederherstellung.
|
||||
|
||||
---
|
||||
|
||||
> **Ende des Katalogs – Aktuell: 105 Fragen across 15 Blöcke.**
|
||||
> Abgedeckte Themen: Von-Neumann, TCP/IP, HTTP, DNS, Gesamtablauf, HTML, CSS, Barrierefreiheit, Dateiformate-Grundbegriffe (inkl. Redundanz/Irrelevanz, Codec/Container, Dateneinheiten), Bildformate (Raster/Vektor/JPEG/PNG/GIF/WebP/SVG), Video-Kompression, Speichermedien, Schnittstellen, Dateisysteme, Backup.
|
||||
|
||||
Reference in New Issue
Block a user