` 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]` Ordne 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. --- ### F3 – Charset: Was passiert ohne `<meta charset>`? **Thema:** HTML – Zeichenkodierung **Punkte:** 1 **Typ:** `[MC]` 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.** ✅ - [ ] Die Seite wird langsamer, da der Browser alle Sprachen durchprobieren muss. - [ ] Das CSS wird nicht geladen. > **Feedback:** Ohne charset nutzt der Browser oft einen Standard wie Latin-1. Bei UTF-8-gespeicherten Dateien → Umlaute und Emojis werden falsch dargestellt (Mojibake). ---  ## BLOCK G – CSS --- ### G1 – Spezifität: ID vs. Klasse vs. Element **Thema:** CSS Spezifität – Grundregel **Punkte:** 2 **Typ:** `[MC]` Gegeben: ``` p { color: blue; } .highlight { color: green; } #main { color: red; } ``` 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).** ✅ - [ ] 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. --- ### G2 – Responsive Design: Mobile First – Welche Farbe? **Thema:** CSS Media Queries – Mobile First **Punkte:** 2 **Typ:** `[MC]` ```css .container { background: white; } @media (min-width: 768px) { .container { background: blue; } } @media (min-width: 1024px) { .container { background: green; } } ``` 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).** ✅ - [ ] Weiß – keine Media-Query greift zwischen den Breakpoints. > **Feedback:** Mobile First: Basis = white. Bei 900px: 768px-Query greift ✓, 1024px-Query greift ✗ → blau. ---  ### G3 – Desktop First: `max-width` erkläre **Thema:** CSS Media Queries – Desktop First **Punkte:** 1 **Typ:** `[MC]` Wie würde eine Media Query für „Desktop First" aussehen (Standard ist Desktop, Anpassung für kleine Screens)? - [ ] `@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.** ✅ - [ ] `@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. --- ### G4 – Mobile First vs. Desktop First: Vergleich **Thema:** CSS Media Queries – Konzept-Vergleich **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? > **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. ---  ## BLOCK H – Barrierefreiheit --- ### H1 – Wie nutzen Menschen das Web? **Thema:** Barrierefreiheit – Eingabegeräte **Punkte:** 2 **Typ:** `[MATCH]` Ordne 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. --- ### H2 – Einschränkungen: Temporär vs. situativ **Thema:** Barrierefreiheit – Einschränkungstypen **Punkte:** 2 **Typ:** `[MC]` Eine Person kann aktuell nur mit einer Hand ihr Handy bedienen, weil sie das Baby auf dem Arm trägt. Wie klassifiziert man diese Einschränkung? - [ ] 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.** ✅ - [ ] 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. ---  ### H3 – Curb-Cut-Effekt: Beispiel identifizieren **Thema:** Barrierefreiheit – Curb-Cut-Effekt **Punkte:** 1 **Typ:** `[MC]` 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.** ✅ - [ ] 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. > **Feedback:** Curb-Cut-Effekt = eine barrierefreie Lösung nutzt am Ende allen. Untertitel für Gehörlose → helfen auch in lauter Umgebung. Kontrastreiche Farben für Sehbehinderung → besser im Sonnenlicht, für ältere Menschen. ---  ### 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 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). --- ### H5 – EAA: Was ist das? **Thema:** Barrierefreiheit – Rechtlicher Rahmen **Punkte:** 1 **Typ:** `[MC]` 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.** ✅ - [ ] Ein deutsches Gesetz, das nur öffentliche Behörden betrifft. - [ ] Ein technisches Standard wie HTML oder CSS. > **Feedback:** EAA = European Accessibility Act. Seit 28. Juni 2025 in Kraft. Betrifft E-Commerce, Banking, Telekommunikation, Transport, E-Books. In Deutschland umgesetzt durch das BFSG (Barrierefreiheitsstärkungsgesetz). Verstoß: bis 100.000€ Bußgeld möglich. --- ### H6 – Barrierefreiheit: Warum auch für „normale" Benutzende? **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 Benutzenden 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. --- ### 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 schön aussieht. - [x] **Sie navigieren nur mit Tab + Enter durch die Seite und prüfen: Erreichen Sie alle Funktionen? Ist der Fokus immer sichtbar? Ist die Tab-Reihenfolge logisch?** ✅ - [ ] Sie installieren einen Screenreader und lassen die Seite vorlesen. - [ ] Sie öffnen den Quellcode und zählen die barrierefreien Tags. > **Feedback:** Der Tastatur-Test ist der schnellste barrierefreie Selbsttest: Nur Tab + Enter benutzen. Wenn man so eine Funktion nicht erreicht kann, ist sie für Tastatur-Benutzende (und damit auch für Screenreader-Benutzende) nicht zugänglich. Tools wie axe DevTools oder Lighthouse automatisieren ~30% der Checks. ---  ## BLOCK I – Zusammenfassung-Fragen (Übergreifend) ---  ### I1 – Gesamtablauf: Wahl der richtigen Methode **Thema:** HTTP + TCP + DNS zusammen **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. > **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. ---  ### I2 – Gesamtablauf: Störfall analysieren **Thema:** Netzwerk + HTTP – Transfer/Problemlösung **Punkte:** 3 **Typ:** `[ESSAY]` Sie rufen eine Webseite auf und erhalten eine Fehlermeldung. Beschreibe drei verschiedene Szenarien, die zu einer Fehlermeldung führen könnten, und erkläre, in welcher „Schicht" des Ablaufs (DNS, TCP, HTTP) das Problem liegt und wie Sie es erkennen. > **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. ---  ## BLOCK J – Dateiformate: Grundbegriffe --- ### J1 – Was bedeutet „komprimieren"? **Thema:** Grundbegriffe – Kompression **Punkte:** 1 **Typ:** `[MC]` Was bedeutet es, eine Datei zu komprimieren? - [ ] Die Datei wird auf einem anderen Speichermedium gesichert. - [x] **Die Dateigröße wird durch Entfernung oder Vereinfachung von Daten reduziert.** ✅ - [ ] Die Datei wird verschlüsselt, damit sie kleiner aussieht. - [ ] Die Datei wird in ein anderen Format umgewandelt, ohne dass sich die Größe ändert. > **Feedback:** Kompression = Dateigröße reduzieren. Zwei Familien: verlustfrei (alle Daten bleiben erhalten, z. B. ZIP, PNG) und verlustbehaftet (Daten werden dauerhaft weggeworfen, z. B. JPEG, MP3). --- ### J2 – Verlustfrei vs. verlustbehaftet **Thema:** Grundbegriffe – Kompressionsprimitiven **Punkte:** 2 **Typ:** `[MATCH]` Ordne jedem Format zu, ob es verlustfrei oder verlustbehaftet komprimiert. | Format | Kompressions-Typ | |---|---| | JPEG | Verlustbehaftet | | PNG | Verlustfrei | | MP3 | Verlustbehaftet | | ZIP | Verlustfrei | | FLAC | Verlustfrei | | WebP (lossy) | Verlustbehaftet | > **Feedback:** Verlustfrei = Originaldaten perfekt rekonstruierbar (ZIP, PNG, FLAC). Verlustbehaftet = Daten dauerhaft weggeworfen, nicht mehr zurückholbar (JPEG, MP3). --- ### J3 – Verlustfrei vs. verlustbehaftet: Erkläre **Thema:** Grundbegriffe – Konzept **Punkte:** 2 **Typ:** `[ESSAY]` Erkläre den Unterschied zwischen verlustfreier und verlustbehafteter Kompression. Nenne je ein konkretes Beispiel und erkläre, warum man in unterschiedlichen Situationen unterschiedliche Kompressionstypen wählt. > **Musterlösung:** Verlustfrei: Alle Originaldaten bleiben erhalten – die Datei kann perfekt rekonstruiert werden (z. B. ZIP, PNG). Verlustbehaftet: Daten werden dauerhaft weggeworfen – die Datei kann nicht mehr perfekt hergestellt werden (z. B. JPEG, MP3). Wahl: Fotos fürs Web → JPEG (verlustbehaftet), weil der Unterschied kaum sichtbar ist und die Datei deutlich kleiner wird. Archivierung oder Grafiken → PNG (verlustfrei), weil Qualitätsverlust inakzeptabel wäre. --- ### J4 – Was bedeutet „skalieren"? **Thema:** Grundbegriffe – Skalierung **Punkte:** 1 **Typ:** `[MC]` Was passiert, wenn ein Rasterbild vergrößert wird? - [ ] Neue Pixel werden aus dem Dateiformat automatisch geladen. - [x] **Fehlende Pixel müssen durch Interpolation „erfunden" werden – es entsteht keine neue Information.** ✅ - [ ] Das Bild wird verlustfrei größer, weil Pixel automatisch duplifiziert werden. - [ ] Die Dateigröße bleibt gleich, nur der Zoom im Betrachter ändert sich. > **Feedback:** Ein Rasterbild hat eine native Auflösung. Alles darüber hinaus = Schätzung (Interpolation). Deshalb werden vergrößerte Rasterbilder unscharf – es gibt einfach keine Daten für die fehlenden Pixel. --- ### J5 – Was bedeutet „konvertieren"? **Thema:** Grundbegriffe – Konvertierung **Punkte:** 1 **Typ:** `[MC]` Was bedeutet es, eine Datei zu konvertieren? - [ ] Die Datei wird komprimiert und umbenannt. - [x] **Die Daten werden von einem Format in ein anderes umgewandelt (z. B. JPEG → PNG, MP4 → WebM).** ✅ - [ ] Die Datei wird verschlüsselt und in ein neues Format gepackt. - [ ] Die Dateiendung wird umbenannt, ohne dass sich der Inhalt ändert. > **Feedback:** Konvertierung = Format-Umwandlung. Der Inhalt bleibt inhaltlich gleich, aber die Art der Speicherung (Kompression, Struktur) ändert sich. Wichtig: Eine Dateiendung umzubenennen ist KEINE Konvertierung. --- ### J6 – Was bedeutet „codieren" und „decodieren"? **Thema:** Grundbegriffe – Codec-Konzept **Punkte:** 2 **Typ:** `[ESSAY]` Erkläre, was „codieren" und „decodieren" bedeuten. Erkläre anschließend, warum der Begriff „Codec" aus beiden Wörtern zusammengesetzt ist, und nenne ein konkretes Beispiel. > **Musterlösung:** Codieren = Daten in ein bestimmtes Format umwandeln (z. B. Rohvideodaten → H.264-komprimiertes Video). Decodieren = das Gegenteil: komprimierte Daten wieder in abspielbare Form zurückwandeln (z. B. H.264 → Pixeldaten für den Bildschirm). Codec = Co(der) + Dec(oder) – ein Algorithmus, der beides kann. Beispiel: H.264 ist ein Video-Codec: Der Encoder erzeugt die komprimierte Datei, der Decoder im Player spielt sie wieder ab. --- ### J7 – Codec vs. Container **Thema:** Grundbegriffe – Codec/Container-Unterschied **Punkte:** 2 **Typ:** `[MC]` Was ist der Unterschied zwischen einem Container und einem Codec bei Videodateien? - [ ] Container und Codec sind synonyme Begriffe für das gleiche Konzept. - [x] **Der Container (z. B. MP4) ist die „Verpackung", die verschiedene Streams zusammenpackt. Der Codec (z. B. H.264) bestimmt, wie der Video-Stream komprimiert wird.** ✅ - [ ] Der Codec ist die Dateiendung, der Container der Kompressionsalgorithmus. - [ ] Ein Container enthält immer genau einen Codec – es kann keine Kombination geben. > **Feedback:** Container ≠ Codec. Ein MP4-Container kann H.264, H.265 oder AV1 enthalten. Gleiche Endung `.mp4`, unterschiedlicher Inhalt. Der Container packt zusammen (Video, Audio, Untertitel, Metadaten), der Codec komprimiert. --- ### J8 – Codec vs. Container: Zuordnung **Thema:** Grundbegriffe – Codec/Container-Zuordnung **Punkte:** 2 **Typ:** `[MATCH]` Ordne zu: Container oder Codec? | Name | Typ | |---|---| | MP4 | Container | | H.264 | Codec | | WebM | Container | | AV1 | Codec | > **Feedback:** Container = Dateiformat, das Streams zusammenpackt (MP4, MKV, WebM). Codec = Kompressionsalgorithmus für einen bestimmten Stream (H.264, AV1, AAC). --- ### J9 – Redundanz vs. Irrelevanz **Thema:** Grundbegriffe – Kompressionsprinzipien **Punkte:** 2 **Typ:** `[MATCH]` Verlustfreie und verlustbehaftete Kompression arbeiten nach unterschiedlichen Prinzipien. Ordne zu. | Prinzip | Kompressionstyp | |---|---| | Redundanz entfernen (wiederholende Muster kompakter darstellen) | Verlustfrei | | Irrelevanz entfernen (für Menschen nicht wahrnehmbar) | Verlustbehaftet | > **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). --- ### J10 – Dateneinheiten: Größenordnungen **Thema:** Grundbegriffe – Speichereinheiten **Punkte:** 2 **Typ:** `[ORDER]` Sortiere die Dateneinheiten von kleinster zu größter: 1. Byte 2. Kilobyte (KB) 3. Megabyte (MB) 4. Gigabyte (GB) 5. Terabyte (TB) 6. Petabyte (PB) > **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. --- ### J11 – Bit und Byte: Umrechnung **Thema:** Grundbegriffe – Bit/Byte-Verhältnis **Punkte:** 1 **Typ:** `[NUMERIC]` Ein Bit ist die kleinste Informationseinheit. Ein Byte besteht aus wie vielen Bit? **Lösung:** **8** (±0) > **Feedback:** 1 Byte = 8 Bit. Ein Byte kann einen Wert von 0 bis 255 darstellen (2⁸ − 1). Die Unterscheidung Bit/Byte ist fundamental – Bit wird mit kleinem „b" abgekürzt (b), Byte mit großem „B" (B). Deshalb: 1 Mbit/s ≠ 1 MB/s. --- ### J12 – 7-Bit ASCII: Wie viele Zeichen? **Thema:** Grundbegriffe – ASCII-Zeichenkodierung **Punkte:** 1 **Typ:** `[NUMERIC]` Der ASCII-Standard verwendet 7 Bit pro Zeichen. Wie viele verschiedene Zeichen können damit dargestellt werden? **Lösung:** **128** (±0) > **Feedback:** Bei n Bit gibt es 2ⁿ mögliche Werte. 7 Bit → 2⁷ = 128 Zeichen. Diese umfassen: Ziffern (0–9), Buchstaben (A–Z, a–z), Sonderzeichen und Steuerzeichen. Achtung: Umlaute (ä, ö, ü) sind nicht im ASCII-Sortiment – dafür braucht man z. B. UTF-8. --- ### J13 – Hexadezimalzahlen: Zwei 4-Bit-Werte **Thema:** Grundbegriffe – Hexadezimal **Punkte:** 2 **Typ:** `[NUMERIC]` Zwei Hexadezimalzahlen werden jeweils durch 4 Bit dargestellt. Wie viele verschiedene Werte kann eine einzelne Hexadezimalziffer annehmen? **Lösung:** **16** (±0) > **Feedback:** 4 Bit → 2⁴ = 16 Werte (0–15). Diese werden in Hexadezimal als 0–9 und A–F dargestellt. Zwei Hex-Ziffern zusammen = 8 Bit = 1 Byte → ein Byte lässt sich immer als genau zwei Hex-Ziffern schreiben (z. B. Byte 255 = FF, Byte 10 = 0A). --- ### J14 – Ein Pixel, drei Kanäle, 8 Bit **Thema:** Grundbegriffe – Speicherbedarf eines Pixels **Punkte:** 1 **Typ:** `[NUMERIC]` Ein einzelner Pixel wird durch drei Farbkanäle (R, G, B) mit jeweils 8 Bit Farbtiefe gespeichert. Wie viele Byte Informationen enthalten ein solcher Pixel? **Lösung:** **3** (±0) > **Feedback:** 3 Kanäle × 8 Bit = 24 Bit = 3 Byte pro Pixel. Das entspricht einer 24-Bit-Farbtiefe (True Color). Diese 3 Byte pro Pixel bilden die Basis für jede Speicherberechnung von Rasterbildern: Breite × Höhe × 3 Bytes = Gesamtgröße unkomprimiert. ---  ## BLOCK K – Bildformate & Raster vs. Vektor --- ### K1 – Was ist ein Pixel? **Thema:** Digitale Bilder – Grundbegriffe **Punkte:** 1 **Typ:** `[MC]` Was ist ein Pixel in einem digitalen Bild? - [ ] Ein winziges physisches Kameraobjektiv. - [x] **Ein einzelner Farbpunkt in einem Rasterbild – der kleinste Baustein.** ✅ - [ ] Eine Einheit zur Messung der Dateigröße. - [ ] Ein Synonym für eine Farbe im RGB-Farbraum. > **Feedback:** Pixel = Picture Element. Ein digitales Rasterbild ist ein 2D-Array aus Pixeln, jeder mit einem Farbwert (z. B. RGB). --- ### K2 – Speicherbedarf berechnen **Thema:** Rastergrafiken – Berechnung **Punkte:** 2 **Typ:** `[NUMERIC]` Ein Bild ist 1920 × 1080 Pixel groß und nutzt 24-Bit-Farbtiefe (True Color). Wie groß ist das Bild unkomprimiert in Megabyte? (Runde auf eine Dezimalstelle) **Formel:** Breite × Höhe × (Farbtiefe / 8) = Bytes **Lösung:** 1920 × 1080 × 3 = 6.220.800 Bytes ≈ **6,2 MB** (±0,1) > **Feedback:** 24 Bit = 3 Bytes pro Pixel (8 Bit pro Kanal: R, G, B). 1920 × 1080 = 2.073.600 Pixel × 3 Bytes = 6.220.800 Bytes. Durch 1.000.000 ≈ 6,2 MB. --- ### K3 – Farbtiefe: Bedeutung **Thema:** Rastergrafiken – Farbtiefe **Punkte:** 2 **Typ:** `[MATCH]` Ordne jeder Farbtiefe ihre Bedeutung zu. | Farbtiefe | Bedeutung | |---|---| | 1 Bit | 2 Farben (Schwarz/Weiß) | | 8 Bit | 256 Farben (Graustufen, GIF) | | 24 Bit | 16,7 Millionen Farben (True Color, Standard) | | 32 Bit | 16,7 Millionen Farben + Alpha (Transparenz) | > **Feedback:** Bei n Bit gibt es 2ⁿ mögliche Werte. 24 Bit = 8 Bit pro Kanal (R, G, B). 32 Bit = 24 Bit Farbe + 8 Bit Alpha-Kanal für Transparenz. --- ### K4 – Was ist Alpha-Transparenz? **Thema:** Rastergrafiken – Transparenz **Punkte:** 1 **Typ:** `[MC]` Was bedeutet ein 32-Bit-Bild gegenüber einem 24-Bit-Bild? - [ ] Es hat doppelt so viele Pixel. - [x] **Es hat einen zusätzlichen Alpha-Kanal (8 Bit), der die Transparenz jedes Pixels speichert.** ✅ - [ ] Es nutzt eine höhere Auflösung. - [ ] Es kann mehr Dateiformate speichern. > **Feedback:** 32 Bit = 24 Bit (RGB) + 8 Bit Alpha. Der Alpha-Kanal bestimmt, wie durchsichtig jeder Pixel ist (0 = vollständig transparent, 255 = vollständig undurchsichtig). Wichtig für PNGs mit Hintergrund-Transparenz. --- ### K5 – Raster vs. Vektor: Kern-Unterschied **Thema:** Raster vs. Vektor – Konzept **Punkte:** 2 **Typ:** `[MC]` Was ist der fundamentale Unterschied zwischen Raster- und Vektorgrafiken? - [ ] Vektorgrafiken sind immer farbiger als Rastergrafiken. - [x] **Rastergrafiken speichern einzelne Pixel; Vektorgrafiken speichern geometrische Beschreibungen (Pfade, Formen), die beliebig skaliert werden können.** ✅ - [ ] Rastergrafiken können keine Farben darstellen, Vektorgrafiken schon. - [ ] Der Unterschied liegt nur in der Dateiendung, nicht im Inhalt. > **Feedback:** Raster = „Malen nach Zahlen" (jeder Pixel einzeln). Vektor = „Bauanleitung" (Formen beschreiben). Diese Unterschied bestimmt alles: Skalierung, Dateigröße, Einsatzbereich. --- ### K6 – Raster vs. Vektor: Vergleich **Thema:** Raster vs. Vektor – Eigenschaften zuordnen **Punkte:** 2 **Typ:** `[MATCH]` Ordne jeder Eigenschaft zu: Raster oder Vektor? | Eigenschaft | Typ | |---|---| | Skalierung ohne Qualitätsverlust | Vektor | | Ideal für Fotos | Raster | | Dateigröße abhängig von der Auflösung | Raster | | Ideal für Logos und Icons | Vektor | | Speicherung als 2D-Array von Pixeln | Raster | | Dateigröße abhängig von der Komplexität | Vektor | > **Feedback:** Raster = Pixel-basiert, auflösungsabhängig, ideal für Fotos. Vektor = Beschreibungs-basiert, beliebig skalierbar, ideal für Grafiken/Logos. --- ### K7 – Skalierung: Warum werden Rasterbilder unscharf? **Thema:** Rastergrafiken – Skalierung Transfer **Punkte:** 2 **Typ:** `[ESSAY]` Erkläre, warum ein Rasterbild beim Vergrößern unscharf wird, während ein Vektorbild bei beliebiger Größe scharf bleibt. Nenne einen konkreten Anwendungsfall, in dem diese Eigenschaft ausschlaggebend ist. > **Musterlösung:** Ein Rasterbild hat eine feste Auflösung (eine bestimmte Anzahl von Pixeln). Beim Vergrößern müssen neue Pixel „erfunden" werden (Interpolation) – es gibt keine echten Daten für die fehlenden Stellen → Unschärfe. Ein Vektorbild speichert nur Beschreibungen (Pfade, Formen). Beim Vergrößern werden einfach die Koordinaten skaliert – keine Information geht verloren → immer scharf. Anwendungsfall: Ein Logo auf einer Visitenkarte UND auf einem Plakat → SVG nutzen, damit es bei beliebiger Größe scharf bleibt. --- ### K8 – Vektor → Raster: Wie heißt das? **Thema:** Raster vs. Vektor – Konvertierung **Punkte:** 1 **Typ:** `[MC]` Wie heißt der Prozess, bei dem eine Vektorgrafik in eine Rastergrafik umgewandelt wird? - [ ] Vektorisierung - [x] **Rasterisierung** ✅ - [ ] Pixelierung - [ ] Komprimierung > **Feedback:** Rasterisierung = Vektor → Raster (trivial, immer möglich). Der umgekehrte Prozess (Raster → Vektor) heißt „Tracing" und funktioniert oft nur unbefriedigend. ---  ### K9 – Interpolation: Welches Verfahren wofür? **Thema:** Rastergrafiken – Interpolationsverfahren **Punkte:** 2 **Typ:** `[MATCH]` Ordne jedem Interpolationsverfahren seine Eigenschaft zu. | Verfahren | Eigenschaft | |---|---| | Nearest Neighbor | Schnell, pixelig – gut für Pixel-Art | | Bilinear | Glättet, Standard-Verfahren | | Bicubic | Hohe Qualität, rechenintensiver | | Lanczos | Beste Qualität, mathematisch komplex | > **Feedback:** Bei der Wahl: Pixel-Art → Nearest Neighbor (soll pixelig bleiben). Normale Bilder → Bilinear oder Bicubic. Maximale Qualität bei Fotos → Lanczos. ---  ## BLOCK L – JPEG: Innenleben --- ### L1 – JPEG: Verlustfrei oder verlustbehaftet? **Thema:** JPEG – Grundeigenschaft **Punkte:** 1 **Typ:** `[MC]` JPEG ist ein … - [x] **…verlustbehaftetes Bildformat. Beim Speichern werden Daten dauerhaft weggeworfen.** ✅ - [ ] …verlustfreies Bildformat wie PNG. - [ ] …Videoformat für Streaming. - [ ] …Vektorgrafik-Format. > **Feedback:** JPEG = Joint Photographic Experts Group. Verlustbehaftet: Beim Speichern werden Daten dauerhaft weggeworfen – eine gespeicherte JPEG kann nicht perfekt zum Original zurückgeführt werden. Quality 100 ≠ verlustfrei, nur „wenig wegwerfen". --- ### L2 – Psychovisuelle Kompression: Das Auge austricksen **Thema:** JPEG – Wahrnehmungsprinzip **Punkte:** 2 **Typ:** `[MC]` 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) 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. > **Feedback:** Psychovisuelle Kompression = Schwächen des Auges ausnutzen. Kern: Mehr Stäbchen (Helligkeit) als Zapfen (Farbe) im Auge → Helligkeit sichern, Farbe reduzieren. Der Verlust ist für Menschen kaum sichtbar. --- ### L3 – Farbraumkonversion: RGB → YCbCr **Thema:** JPEG Schritt 1 – Farbraum **Punkte:** 2 **Typ:** `[MC]` Warum wird bei JPEG von RGB in YCbCr konvertiert? - [ ] YCbCr nutzt weniger Speicher pro Pixel als RGB. - [x] **In YCbCr sind Helligkeit (Y) und Farbe (Cb, Cr) getrennt – die Farbauflösung kann unabhängig von der Helligkeit reduziert werden.** ✅ - [ ] RGB kann keine Transparenz darstellen, YCbCr schon. - [ ] Die Konvertierung ist ein verlustfreier Schritt, der die Dateigröße halbiert. > **Feedback:** Y = Helligkeit (Luminanz), Cb/Cr = Farbdifferenzen (Chrominanz). Diese Trennung ermöglicht Chroma Subsampling: Helligkeit voll behalten, Farbe reduzieren – ohne sichtbaren Verlust. --- ### L4 – Chroma Subsampling: Was ist 4:2:0? **Thema:** JPEG Schritt 2 – Subsampling **Punkte:** 2 **Typ:** `[MC]` Was bedeutet das Subsampling-Schema 4:2:0? - [ ] 4 Pixel teilen sich eine Helligkeit, aber jeder hat eigene Farbe. - [x] **4 Pixel teilen sich einen Farbwert (Chrominanz), aber jeder hat eine eigene Helligkeit (Luminanz). Die Farbauflösung wird auf 25% reduziert.** ✅ - [ ] 4:2:0 bedeutet, dass keine Farbe gespeichert wird – nur Graustufen. - [ ] Die Notation beschreibt die Blockgröße, nicht die Farbauflösung. > **Feedback:** 4:2:0 = JPEG-Standard. Von 4 Pixeln wird nur 1 Farbwert gespeichert (2×2-Block teilt Farbe), aber jeder Pixel behält seine eigene Helligkeit. Ergebnis: 50% Datenreduktion, kaum sichtbar. --- ### L5 – JPEG-Schritte: Richtige Reihenfolge **Thema:** JPEG – Kompressionsablauf **Punkte:** 2 **Typ:** `[ORDER]` Sortiere die Schritte der JPEG-Kompression in der richtigen Reihenfolge: 1. Farbraumkonversion (RGB → YCbCr) 2. Chroma Subsampling 3. Block-Aufteilung (8×8) 4. DCT (Frequenzanalyse) 5. Quantisierung (hier passiert der Verlust!) 6. Huffman-Coding (verlustfrei) > **Feedback:** Der einzige verlustbehaftete Schritt ist die Quantisierung (Schritt 5). Alles davor bereitet die Daten vor, alles danach komprimiert die Ergebnisse verlustfrei weiter. --- ### L6 – Welcher Schritt ist verlustbehaftet? **Thema:** JPEG – Verlust lokalisieren **Punkte:** 1 **Typ:** `[MC]` Bei welchem Schritt der JPEG-Kompression werden Daten dauerhaft weggeworfen? - [ ] Farbraumkonversion (RGB → YCbCr) - [ ] DCT (Discrete Cosine Transform) - [x] **Quantisierung – hier werden unwichtige Frequenzkoeffizienten auf Null gesetzt oder vergröbert.** ✅ - [ ] Huffman-Coding > **Feedback:** DCT selbst ist verlustfrei und reversibel – es sortiert nur die Daten nach Wichtigkeit. Die Quantisierung ist der einzige verlustbehaftete Schritt: Sie wirft hohe Frequenzen (feine Details) weg. Huffman-Coding danach ist wieder verlustfrei. ---  ### L7 – DCT: Was macht sie? **Thema:** JPEG – DCT-Prinzip **Punkte:** 1 **Typ:** `[MC]` Was leitet die DCT (Discrete Cosine Transform) bei JPEG? - [ ] Sie komprimiert die Daten verlustbehaftet. - [x] **Sie wandelt 64 Pixelwerte eines 8×8-Blocks in 64 Frequenzkoeffizienten um – sortiert die Information nach Wichtigkeit (niedrige Frequenz = wichtig, hohe Frequenz = Details).** ✅ - [ ] Sie verschlüsselt die Daten für sichere Übertragung. - [ ] Sie reduziert die Farbauflösung des Bildes. > **Feedback:** DCT = Herzstück von JPEG, aber selbst verlustfrei. Sie sortiert: Der DC-Koeffizient (0,0) = Durchschnittshelligkeit eines Blocks. Die AC-Koeffizienten = Helligkeitsänderungen. 90% der Information steckt in den ersten 10–15 Koeffizienten. --- ### L8 – Huffman-Coding: Prinzip **Thema:** JPEG – Huffman **Punkte:** 2 **Typ:** `[MC]` Wie funktioniert Huffman-Coding? - [ ] Alle Zeichen bekommen gleich lange Codes – einfach und effizient. - [x] **Häufige Werte bekommen kurze Codes, selten vorkommende lange Codes – variable Bitlänge statt fester 8 Bit.** ✅ - [ ] Huffman-Coding verschlüsselt die Daten zusätzlich. - [ ] Es funktioniert nur für Texte, nicht für Bilddaten. > **Feedback:** Huffman = verlustfrei, optimal für bekannte Häufigkeiten. Präfix-frei: Kein Code ist Anfang eines anderen → eindeutig decodierbar. Auch in ZIP, PNG, MP3 verwendet. ---  ### L9 – JPEG-Artefakte: Benennen **Thema:** JPEG – Artefakte identifizieren **Punkte:** 2 **Typ:** `[MATCH]` Ordne jedem JPEG-Artefakt seine Beschreibung zu. | Artefakt | Beschreibung | |---|---| | Blocking | 8×8-Blöcke werden sichtbar als Rechteckmuster | | Ringing | „Geister" oder Halos an scharfen Kanten | | Posterization | Farbverläufe werden stufig statt fließend | > **Feedback:** Alle drei sind Folgen der Quantisierung. Blocking: Weil jeder 8×8-Block unabhängig komprimiert wird. Ringing: DCT hat Probleme mit harten Kanten (Gibbs-Phänomen). Posterization: Zu wenige Bits für feine Farbabstufungen. ---  ## BLOCK M – Bildformate: PNG, GIF, WebP, SVG --- ### M1 – PNG: Verlustfrei oder verlustbehaftet? **Thema:** PNG – Grundeigenschaft **Punkte:** 1 **Typ:** `[MC]` Wie komprimiert PNG? - [ ] Verlustbehaftet – wie JPEG, aber mit besserer Qualität. - [x] **Verlustfrei – die Originaldaten können perfekt rekonstruiert werden.** ✅ - [ ] Gar nicht – PNG speichert Daten unkomprimiert. - [ ] PNG nutzt eine Kombination aus verlustfrei und verlustbehaftet. > **Feedback:** PNG nutzt DEFLATE-Kompression (wie ZIP) – verlustfrei. Deshalb ist PNG ideal für Grafiken, Screenshots und Bilder mit Transparenz, aber größer als JPEG für Fotos. --- ### M2 – PNG vs. JPEG: Wann was? **Thema:** Bildformate – Formatwahl **Punkte:** 2 **Typ:** `[ESSAY]` Erklären Sie, wann Sie PNG und wann JPEG wählen würden. Nenne je zwei konkrete Anwendungsfälle und begründen Sie Ihre Wahl. > **Musterlösung:** PNG: (1) Screenshots – Texte und Linien bleiben scharf, keine Artefakte. (2) Logos mit Transparenz – PNG unterstützt Alpha-Transparenz, JPEG nicht. JPEG: (1) Fotos fürs Web – deutlich kleiner bei kaum sichtbarem Qualitätsverlust. (2) Social Media – Plattformen re-komprimieren sowieso, PNG würde nur unnötig groß sein. --- ### M3 – GIF: Wie viele Farben? **Thema:** GIF – Eigenschaften **Punkte:** 1 **Typ:** `[MC]` Wie viele Farben kann ein GIF-Bild gleichzeitig anzeigen? - [ ] 16 Farben - [ ] 16,7 Millionen Farben - [x] **256 Farben (8-Bit-Palette)** ✅ - [ ] Unbegrenzt – GIF unterstützt alle Farben. > **Feedback:** GIF = 8-Bit-Palette = 256 Farben maximal. Deshalb sehen GIF-Bilder bei Fotos oft banding/posterisiert aus. GIF überlebt heute wegen Animationen. ---  ### M4 – WebP vs. JPEG: Vorteil? **Thema:** Bildformate – WebP **Punkte:** 1 **Typ:** `[MC]` Was ist der hauptsächliche Vorteil von WebP gegenüber JPEG? - [ ] WebP unterstützt Videos, JPEG nicht. - [x] **WebP erzeugt bei gleicher Qualität 25–35% kleinere Dateien als JPEG.** ✅ - [ ] WebP ist verlustfrei, JPEG nicht. - [ ] WebP kann keine Fotos speichern, nur Grafiken. > **Feedback:** WebP (Google, 2010) kann sowohl lossy als auch lossless komprimieren, unterstützt Transparenz und Animationen. Bei gleicher visueller Qualität sind WebP-Dateien deutlich kleiner als JPEG. --- ### M5 – SVG: Was ist es? **Thema:** SVG – Grundbegriff **Punkte:** 1 **Typ:** `[MC]` Was ist SVG? - [ ] Ein verlustbehaftetes Rasterbild-Format wie JPEG. - [x] **Ein Vektorgrafik-Format, das Bilder als geometrische Beschreibungen (XML) speichert – beliebig skalierbar ohne Qualitätsverlust.** ✅ - [ ] Ein Video-Container wie MP4. - [ ] Ein komprimiertes Archivformat wie ZIP. > **Feedback:** SVG = Scalable Vector Graphics. Web-Standard für Vektorgrafiken. Beschreibt WAS gezeichnet werden soll (`<circle>`, `<rect>`, `<path>`), nicht wie jeder Pixel aussieht. Ideal für Logos, Icons, Illustrationen. --- ### M6 – Formatwahl: Szenario zuordnen **Thema:** Bildformate – Formatwahl Transfer **Punkte:** 2 **Typ:** `[MATCH]` 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 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). ---  ## BLOCK N – Video-Kompression ---  ### N1 – Spatial vs. Temporal Compression **Thema:** Video – Kompressionsprinzipien **Punkte:** 2 **Typ:** `[MATCH]` Ordne jedem Prinzip seine Beschreibung zu. | Prinzip | Beschreibung | |---|---| | Spatial Compression (Intra-Frame) | Komprimiert jedes einzelne Bild für sich (wie JPEG) | | Temporal Compression (Inter-Frame) | Speichert nur die Änderungen zwischen aufeinanderfolgenden Bildern | | Motion Compensation | Beschreibt Bewegung durch Vektoren statt Pixel zu kopieren | > **Feedback:** Spatial = räumlich (innerhalb eines Frames). Temporal = zeitlich (zwischen Frames). Motion Compensation = Bewegungsvektoren. 90% eines Frames ist oft identisch mit dem vorherigen – deshalb ist Temporal-Kompression so wirksam. ---  ### N2 – I-Frame, P-Frame, B-Frame: Was ist was? **Thema:** Video – Frame-Typen **Punkte:** 2 **Typ:** `[MATCH]` Ordne jedem Frame-Typ seine Beschreibung zu. | Frame-Typ | Beschreibung | |---|---| | I-Frame (Keyframe) | Vollständiges Bild, unabhängig dekodierbar – keine Referenz auf andere Frames | | P-Frame | Nur Änderungen gegenüber vorherigen Frames speichern (~30% der Größe eines I-Frames) | | B-Frame | Änderungen gegenüber vorherigen UND zukünftigen Frames (~15% der Größe eines I-Frames) | > **Feedback:** I = Intra (innerhalb). P = Predicted (aus Vergangenheit). B = Bi-directional (Vergangenheit + Zukunft). B-Frames sind am kleinsten, aber brauchen mehr Rechenleistung zum Decodieren. ---  ### N3 – Was passiert, wenn ein I-Frame beschädigt ist? **Thema:** Video – I-Frame Bedeutung Transfer **Punkte:** 2 **Typ:** `[ESSAY]` Erkläre, warum ein I-Frame bei der Videokompression so wichtig ist. Was passiert, wenn ein einzelner I-Frame in einem Videostream beschädigt wird? > **Musterlösung:** Ein I-Frame ist ein vollständiges, unabhängig dekodierbare Bild. Alle nachfolgenden P- und B-Frames referenzieren auf vorherige Frames – letztlich auf das letzte I-Frame. Wenn ein I-Frame beschädigt wird, können alle abhängigen P- und B-Frames bis zum nächsten intakten I-Frame nicht mehr korrekt rekonstruiert werden → Videofehler sichtbar bis zum nächsten Keyframe. Deshalb werden typischerweise alle 1–2 Sekunden neue I-Frames eingefügt. ---  ### N4 – Motion Compensation: Prinzip **Thema:** Video – Motion Compensation **Punkte:** 1 **Typ:** `[MC]` Was beschreibt ein Motion Vector bei der Videokompression? - [ ] Die Helligkeit eines einzelnen Pixels. - [x] **Die Verschiebung eines Bildblocks zwischen zwei Frames (z. B. „verschiebe um +20 Pixel nach rechts").** ✅ - [ ] Die Kompressionsrate des gesamten Videos. - [ ] Die Anzahl der Farben in einem Frame. > **Feedback:** Motion Compensation speichert Bewegung als Vektoren statt Pixel zu kopieren. Wenn sich ein 16×16-Block von (100,200) auf (120,200) bewegt, wird nur „+20, 0" gespeichert – deutlich kleiner als den Block zweimal zu speichern. ---  ### N5 – Video-Codecs: Zeitstrahl **Thema:** Video – Codecs-Übersicht **Punkte:** 2 **Typ:** `[ORDER]` Sortiere die Video-Codecs nach Veröffentlichungsjahr (alt → neu): 1. H.264 / AVC (2003) 2. H.265 / HEVC (2013) 3. VP9 (2013) 4. AV1 (2018) > **Feedback:** H.264 revolutionierte Streaming. H.265 und VP9 kamen gleichzeitig – H.265 technisch besser, aber Patent-Chaos. AV1 vereint die Industrie: patent-frei, 30% besser als H.265. --- ### N6 – AV1: Warum die Zukunft? **Thema:** Video – AV1 Transfer **Punkte:** 2 **Typ:** `[ESSAY]` Erkläre, warum AV1 als „die Zukunft" der Videokompression gilt. Nenne mindestens zwei konkrete Eigenschaften und erkläre, warum H.265 trotz besserer technischer Kompression nicht die gleiche Dominanz erreicht hat. > **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. ---  ## BLOCK O – Speichermedien & Schnittstellen ---  ### O1 – KB vs. KiB: Was ist der Unterschied? **Thema:** Speicher – Einheiten **Punkte:** 2 **Typ:** `[MC]` Eine Festplatte wird als „1 TB" vermarktet, aber Windows zeigt nur ~931 GB an. Warum? - [ ] Windows zeigt falsche Werte an – das ist ein Bug. - [x] **Hersteller nutzen dezimale Einheiten (1 TB = 1.000 GB), Windows nutzt binäre Einheiten (1 TiB = 1.024 GiB). Bei TB-Größen entsteht eine ~7% Diskrepanz.** ✅ - [ ] Die Festplatte verliert beim Formatieren fast 10% ihrer Kapazität. - [ ] Windows reserviert automatisch 10% als Sicherheitspuffer. > **Feedback:** SI (Dezimal): 1 KB = 1.000 Bytes, 1 MB = 1.000 KB. IEC (Binär): 1 KiB = 1.024 Bytes, 1 MiB = 1.024 KiB. Bei 1 TB: 1.000⁴ vs. 1.024⁴ Bytes → ~7% Unterschied. Windows zeigt binäre Werte an, aber mit SI-Bezeichnung (GB statt GiB) → Verwirrung. ---  ### O2 – HDD vs. SSD: Kern-Unterschied **Thema:** Speichermedien – HDD vs. SSD **Punkte:** 1 **Typ:** `[MC]` Was ist der fundamentale technische Unterschied zwischen HDD und SSD? - [ ] HDDs sind elektronisch, SSDs mechanisch. - [x] **HDDs speichern Daten magnetisch auf sich drehenden Plattern (mechanisch). SSDs nutzen Flash-Speicher (elektronisch, keine beweglichen Teile).** ✅ - [ ] Beide Technologien funktionieren identisch, der Unterschied liegt nur im Gehäuse. - [ ] HDDs nutzen Flash-Speicher, SSDs magnetische Platten. > **Feedback:** HDD = Hard Disk Drive = mechanisch (Platter, Spindel, Schreib-Lese-Kopf). SSD = Solid State Drive = elektronisch (Flash-Speicher). Diese Unterschied bestimmt alles: Geschwindigkeit, Latenz, Geräusche, Haltbarkeit. ---  ### O3 – HDD vs. SSD: Eigenschaften zuordnen **Thema:** Speichermedien – Vergleich **Punkte:** 2 **Typ:** `[MATCH]` Ordne jeder Eigenschaft zu: HDD oder SSD? | Eigenschaft | Typ | |---|---| | Sequentielle Lesgeschwindigkeit ~150 MB/s | HDD | | Sequentielle Lesgeschwindigkeit ~3.500 MB/s | SSD (NVMe) | | Latenz ~10 ms | HDD | | Latenz ~0,02 ms | SSD | | Günstig pro TB (~15€/TB) | HDD | | Ideal für Betriebssystem | SSD | > **Feedback:** Der dramatische Unterschied liegt bei Random Access: SSD ~500× schneller. Deshalb: Betriebssystem auf SSD, Archiv auf HDD. Viele nutzen beides: Kleine SSD für System + große HDD für Daten. ---  ### O4 – USB-C: Stecker oder Protokoll? **Thema:** Schnittstellen – USB-C **Punkte:** 2 **Typ:** `[MC]` Ein USB-C-Kabel kann langsam sein, obwohl es wie ein „modernes" Kabel aussieht. Warum? - [ ] USB-C-Kabel sind immer gleich schnell – die Geschwindigkeit liegt am Gerät. - [x] **USB-C ist nur ein Steckertyp, kein Protokoll. Ein USB-C-Kabel kann USB 2.0 (480 Mbit/s) bis USB4 (40 Gbit/s) sein – am Stecker nicht erkennbar.** ✅ - [ ] USB-C-Kabel werden nach einem Jahr automatisch langsamer. - [ ] Die Geschwindigkeit hängt nur vom Betriebssystem ab. > **Feedback:** USB-C = Steckerform. Das Protokoll dahinter kann USB 2.0, 3.2 oder USB4 sein. Ein billiges USB-C-Kabel ist oft nur USB 2.0 mit neuem Stecker. Kabel-Spezifikation prüfen! ---  ### O5 – Dateisysteme: Zuordnung **Thema:** Dateisysteme – Überblick **Punkte:** 2 **Typ:** `[MATCH]` Ordne jedem Dateisystem seine ideale Anwendung zu. | Dateisystem | Ideal für | |---|---| | FAT32 | USB-Sticks, SD-Karten (maximale Kompatibilität) | | NTFS | Windows-Systeme (Journaling, Rechte) | | APFS | macOS, iOS (Snapshots, CoW) | | ext4 | Linux-Systeme (Journaling, stabil) | | exFAT | Große Dateien auf portablen Medien | > **Feedback:** FAT32 = kleinster gemeinsamer Nenner, aber max. 4 GB pro Datei. exFAT = FAT32 ohne Größenlimits. NTFS/APFS/ext4 = moderne Systeme mit Journaling. Journaling = bei Absturz werden Änderungen nicht verloren. ---  ### O6 – FAT32: Warum nicht für große Dateien? **Thema:** Dateisysteme – FAT32 Limitation **Punkte:** 1 **Typ:** `[MC]` Sie versuchen, eine 5-GB-Videodatei auf einen FAT32-formatierten USB-Stick zu kopieren. Was passiert? - [ ] Die Datei wird automatisch aufgeteilt in kleinere Teile. - [x] **Der Vorgang fehlschlägt – FAT32 unterstützt keine einzelnen Dateien größer als 4 GB.** ✅ - [ ] Die Datei wird automatisch komprimiert, bis sie unter 4 GB ist. - [ ] FAT32 hat keine Dateigrößenbeschränkung. > **Feedback:** FAT32-Limit: max. 4 GB pro Datei. Ein 4K-Video oder ISO-Image passt oft nicht. Lösung: USB-Stick mit exFAT oder NTFS formatieren. --- ### O7 – Die 3-2-1-Regel **Thema:** Backup – Prinzip **Punkte:** 2 **Typ:** `[ESSAY]` Erkläre die 3-2-1-Regel für Backups. Begründe, warum jede der drei Ziffern wichtig ist. > **Musterlösung:** 3 Kopien: Original + 2 Backups. Warum? Das Original kann kaputt gehen, das erste Backup auch – das zweite ist der Sicherheitspuffer. 2 verschiedene Medientypen (z. B. SSD + HDD, oder lokal + Cloud). Warum? Gleiche Medien haben gleiche Schwachstellen (z. B. Batch-Fehler bei HDDs derselben Charge). 1 Kopie an einem anderen Ort (Cloud, anderes Gebäude). Warum? Brand oder Wasserschaden zerstört alles vor Ort; Ransomware verschlüsselt alle angeschlossenen Laufwerke gleichzeitig. ---  ### O8 – Backup-Arten: Unterschiede **Thema:** Backup – Typen **Punkte:** 2 **Typ:** `[MATCH]` Ordne jedem Backup-Typ seine Beschreibung zu. | Backup-Typ | Beschreibung | |---|---| | Full (Vollständig) | Kompletter Datenbestand jedes Mal – einfach, aber langsam und platzhungrig | | Inkrementell | Nur Änderungen seit dem letzten Backup (egal welcher Art) – schnell, aber Wiederherstellung komplex | | 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.

--- marp: true theme: gaia paginate: true backgroundColor: #fff header: "" footer: "" title: "Fragenkatalog - Klausurvorbereitung" --- FA2 # Fragenkatalog – 223015b/223015c **IT-Grundlagen/Dateiformate · HdM Stuttgart · M. Czechowski** Stand: 01.02.2026 --- > **Legende – Moodle XML-Typen:** > `[MC]` = `multichoice` (einzelne Auswahl) > `[MM]` = `multichoice` + `false` (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)` --- ## BLOCK A – Von-Neumann-Architektur --- ### A1 – Komponenten zuordnen **Thema:** Von-Neumann Grundstruktur **Punkte:** 3 **Typ:** `[MATCH]` Ordne jeder Komponente der Von-Neumann-Architektur ihre Funktion zu. | Komponente | Funktion | |---|---| | Rechenwerk (ALU) | Führt arithmetische und logische Operationen durch | | Steuerwerk | Holt, dekodiert und steuert die Ausführung von Befehlen | | Speicherwerk | Enthält sowohl Programme als auch Daten | | Ein-/Ausgabe | Schnittstelle zu externen Geräten (Tastatur, Bildschirm, Netzwerk) | | Bus-System | Verbindet alle Komponenten mittels Adress-, Daten- und Steuerbus | > **Feedback:** Die 5 Komponenten: ALU (Rechnen), Steuerwerk (Befehle steuern), Speicherwerk (Programme UND Daten), Ein-/Ausgabe (Peripherie), Bus-System (Verbindung). --- ### A2 – Welche Komponente ist das? **Thema:** Von-Neumann – einzelne Komponente identifizieren **Punkte:** 1 **Typ:** `[MC]` 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** ✅ - [ ] Speicherwerk - [ ] Ein-/Ausgabe > **Feedback:** Das Steuerwerk (Control Unit) orchestriert den Fetch-Decode-Execute-Zyklus – es ist der „Dirigent" der CPU. --- ### 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) - [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. --- ## BLOCK B – Netzwerk-Grundlagen (TCP/IP) --- ### B1 – Protokoll → TCP/IP-Schicht zuordnen **Thema:** TCP/IP-Schichtmodell – Zuordnung **Punkte:** 3 **Typ:** `[MATCH]` 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. --- ### B2 – Welche Schicht ist das? (einzeln) **Thema:** TCP/IP – einzelne Schicht identifizieren **Punkte:** 1 **Typ:** `[MC]` Das Protokoll IP arbeitet auf welcher TCP/IP-Schicht? - [ ] Anwendung - [ ] Transport - [x] **Internet** ✅ - [ ] Netzzugang > **Feedback:** IP (Internet Protocol) arbeitet auf der Internet-Schicht – dort werden Pakete adressiert und geroutet. --- ### B3 – Schicht-Funktion beschreiben **Thema:** TCP/IP – Funktionen der Schichten **Punkte:** 2 **Typ:** `[ESSAY]` Beschreibe 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). --- ### 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. - [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. - [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. - [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]` Ordne 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). --- ### B8 – MAC ändert sich, IP nicht: Warum? **Thema:** IP vs. MAC beim Routing – Transfer **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. > **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. --- ### B9 – Encapsulation: Dateneinheit → Schicht **Thema:** Encapsulation – Zuordnung **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. | Dateneinheit | Schicht + Was wird ergänzt | |---|---| | Daten | Anwendungsschicht – die eigentliche Nachricht (z. B. HTML-Seite) | | Segment | Transportschicht – Daten + Ports und Sequenznummern | | Paket | Internetschicht – Segment + IP-Adressen (Quelle und Ziel) | | Frame | Netzzugangsschicht – Paket + MAC-Adressen und Prüfsumme | > **Feedback:** D-S-P-F: Daten → Segment → Paket → Frame. Jede Schicht fügt einen Header (und beim Frame auch einen Trailer) hinzu. --- ### B10 – Encapsulation: Reihenfolge sortieren **Thema:** Encapsulation – Reihenfolge **Punkte:** 2 **Typ:** `[ORDER]` Sortiere 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. --- ### B11 – Decapsulation: Umgekehrte Reihenfolge **Thema:** Decapsulation – Empfänger-Seite **Punkte:** 2 **Typ:** `[MC]` Wenn der Server das Signal empfängt, passiert Decapsulation. In welcher Reihenfolge werden die Header entfernt? - [ ] 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.** ✅ - [ ] Internet → Netzzugang → Transport → Anwendung > **Feedback:** Das Auspacken erfolgt in umgekehrter Reihenfolge wie das Einpacken – der äußerste Header (Frame) wird zuerst entfernt. --- ### B12 – Encapsulation: Lückentext **Thema:** Encapsulation – Terminologie **Punkte:** 2 **Typ:** `[CLOZE]` Bei der Übertragung wird eine Nachricht von Schicht zu Schicht verpackt. Die Transportschicht erzeugt ein [[1:Segment]], die Internetschicht ein [[2:Paket]], und die Netzzugangsschicht einen [[3:Frame]]. Am Empfänger wird dieses in [[4:umgekehrter Reihenfolge]] wieder abgepackt (Decapsulation). > **Feedback:** D-S-P-F vorwärts beim Senden, F-P-S-D beim Empfangen. Jeder Name beschreibt die Dateneinheit mit allen bis zu dieser Schicht hinzugefügten Headern. --- ### B13 – TCP vs. UDP: Videostreaming **Thema:** TCP vs. UDP – Echtzeit-Szenario **Punkte:** 2 **Typ:** `[MC]` 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.** ✅ - [ ] 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. > **Feedback:** Der Kern: Bei Echtzeit zählt Latenz, nicht Vollständigkeit. Ein fehlendes Frame ist besser als ein eingefrorenes Video. --- ### B14 – TCP vs. UDP: Unterschiede beschreiben **Thema:** TCP vs. UDP – Konzept-Vergleich **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. > **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. --- ### B15 – TCP vs. UDP: Richtig oder Falsch? **Thema:** TCP vs. UDP – Aussagen prüfen **Punkte:** 1 **Typ:** `[MC]` „UDP garantiert, dass alle Pakete in der richtigen Reihenfolge ankommen." Diese Aussage ist … - [ ] …korrekt – UDP nutzt Sequenznummern wie TCP. - [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. > **Feedback:** UDP = „fire and forget". Keine Verbindung, keine Sequenznummern, keine Bestätigung. Genau deshalb ist es schneller. --- ### B16 – TCP 3-Way-Handshake: SYN geht verloren **Thema:** TCP-Verbindungsaufbau – Störfall **Punkte:** 2 **Typ:** `[MC]` 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.** ✅ - [ ] Der Client sendet direkt ein ACK als Fallback – Verbindung mit zwei Paketen. - [ ] Das verloren gegangene SYN wird vom Netzwerk automatisch rekonstruiert. > **Feedback:** Ohne SYN beim Server: kein SYN-ACK, kein Handshake, keine Verbindung. TCP retransmittiert nach Timeout. --- ### B17 – TCP 3-Way-Handshake: Ablauf beschreiben **Thema:** TCP-Verbindungsaufbau – Konzept **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. > **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. --- ### B18 – TCP Sequenznummern: Wozu? **Thema:** TCP – Sequenznummern **Punkte:** 1 **Typ:** `[MC]` 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 Benutzende 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. --- ## BLOCK C – HTTP --- ### C1 – HTTP-Methoden: Zuordnung **Thema:** HTTP-Methoden – Was macht was **Punkte:** 2 **Typ:** `[MATCH]` Ordne 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? - [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. - [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. - [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. --- ### C5 – GET: Warum nicht für Passwörter? **Thema:** HTTP-Methoden – GET Sicherheit **Punkte:** 2 **Typ:** `[MC]` 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.** ✅ - [ ] GET erlaubt nur Zahlen, keine Buchstaben. - [ ] GET wird vom Server nie verschlüsselt, POST immer. > **Feedback:** GET-Parameter hängen an der URL (`?pw=123`). Diese ist in History, Logs, Proxies sichtbar. HTTPS verschlüsselt zwar beides auf der Leitung, aber die URL selbst wird an zu vielen Stellen gespeichert. --- ### C6 – Status-Codes: Kategorisierung **Thema:** HTTP Status-Codes – Bedeutung der ersten Ziffer **Punkte:** 2 **Typ:** `[MATCH]` Ordne 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. - [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. - [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]` Ordne 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). --- ### C10 – Status-Codes: Freitext **Thema:** HTTP Status-Codes – Konzept zusammenfassen **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. > **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. --- ## 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. - [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:** 2 **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. --- ### D3 – DNS: Warum zwingend nötig? **Thema:** DNS – Transfer/Begründung **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? > **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. --- ### D4 – DNS: Lückentext **Thema:** DNS – Terminologie **Punkte:** 1 **Typ:** `[CLOZE]` Der DNS-Server übersetzt einen [[1:Domain-Namen]] in eine [[2:IP-Adresse]]. Dieser Schritt fällt [[3:vor]] dem TCP-Handshake statt, weil TCP nur zu [[4:IP-Adressen]] Verbindungen aufbauen kann. > **Feedback:** Die vier Lücken beschreiben den DNS-Ablauf vollständig: Was wird übersetzt, in was, wann, und warum. --- ## BLOCK E – Der Gesamtablauf (Zusammen) --- ### E1 – Reihenfolge eines HTTPS-Aufrufs **Thema:** Gesamtablauf – Sortierung **Punkte:** 2 **Typ:** `[ORDER]` Sortiere die Schritte eines HTTPS-Aufrufs in der richtigen Reihenfolge: 1. DNS-Auflösung (Name → IP) 2. TCP 3-Way-Handshake (Verbindung aufbauen) 3. TLS-Handshake (Verschlüsselung vereinbaren) 4. HTTP GET (Anfrage senden) 5. HTTP 200 OK + HTML (Antwort empfangen) > **Feedback:** DNS → TCP → TLS → HTTP Request → HTTP Response. Jeder Schritt ist eine Voraussetzung für den nächsten. --- ### E2 – Reihenfolge: Welche Folge ist korrekt? **Thema:** Gesamtablauf – Multiple Choice **Punkte:** 1 **Typ:** `[MC]` 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** ✅ - [ ] (1) HTTP GET → (2) DNS → (3) TCP-Handshake → (4) HTTP 200 OK - [ ] (1) DNS → (2) HTTP GET → (3) TCP-Handshake → (4) HTTP 200 OK > **Feedback:** DNS immer zuerst. Dann TCP (Verbindung). Dann HTTP (Anfrage/Antwort). --- ## BLOCK F – HTML-Grundlagen --- ### F1 – `` vs. ``: Was passiert bei Fehler? **Thema:** HTML-Struktur – head/body **Punkte:** 2 **Typ:** `[MC]` Eine studierende Person platziert den `` 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]` Ordne 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. --- ### F3 – Charset: Was passiert ohne `<meta charset>`? **Thema:** HTML – Zeichenkodierung **Punkte:** 1 **Typ:** `[MC]` 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.** ✅ - [ ] Die Seite wird langsamer, da der Browser alle Sprachen durchprobieren muss. - [ ] Das CSS wird nicht geladen. > **Feedback:** Ohne charset nutzt der Browser oft einen Standard wie Latin-1. Bei UTF-8-gespeicherten Dateien → Umlaute und Emojis werden falsch dargestellt (Mojibake). ---  ## BLOCK G – CSS --- ### G1 – Spezifität: ID vs. Klasse vs. Element **Thema:** CSS Spezifität – Grundregel **Punkte:** 2 **Typ:** `[MC]` Gegeben: ``` p { color: blue; } .highlight { color: green; } #main { color: red; } ``` 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).** ✅ - [ ] 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. --- ### G2 – Responsive Design: Mobile First – Welche Farbe? **Thema:** CSS Media Queries – Mobile First **Punkte:** 2 **Typ:** `[MC]` ```css .container { background: white; } @media (min-width: 768px) { .container { background: blue; } } @media (min-width: 1024px) { .container { background: green; } } ``` 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).** ✅ - [ ] Weiß – keine Media-Query greift zwischen den Breakpoints. > **Feedback:** Mobile First: Basis = white. Bei 900px: 768px-Query greift ✓, 1024px-Query greift ✗ → blau. ---  ### G3 – Desktop First: `max-width` erkläre **Thema:** CSS Media Queries – Desktop First **Punkte:** 1 **Typ:** `[MC]` Wie würde eine Media Query für „Desktop First" aussehen (Standard ist Desktop, Anpassung für kleine Screens)? - [ ] `@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.** ✅ - [ ] `@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. --- ### G4 – Mobile First vs. Desktop First: Vergleich **Thema:** CSS Media Queries – Konzept-Vergleich **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? > **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. ---  ## BLOCK H – Barrierefreiheit --- ### H1 – Wie nutzen Menschen das Web? **Thema:** Barrierefreiheit – Eingabegeräte **Punkte:** 2 **Typ:** `[MATCH]` Ordne 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. --- ### H2 – Einschränkungen: Temporär vs. situativ **Thema:** Barrierefreiheit – Einschränkungstypen **Punkte:** 2 **Typ:** `[MC]` Eine Person kann aktuell nur mit einer Hand ihr Handy bedienen, weil sie das Baby auf dem Arm trägt. Wie klassifiziert man diese Einschränkung? - [ ] 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.** ✅ - [ ] 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. ---  ### H3 – Curb-Cut-Effekt: Beispiel identifizieren **Thema:** Barrierefreiheit – Curb-Cut-Effekt **Punkte:** 1 **Typ:** `[MC]` 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.** ✅ - [ ] 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. > **Feedback:** Curb-Cut-Effekt = eine barrierefreie Lösung nutzt am Ende allen. Untertitel für Gehörlose → helfen auch in lauter Umgebung. Kontrastreiche Farben für Sehbehinderung → besser im Sonnenlicht, für ältere Menschen. ---  ### 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 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). --- ### H5 – EAA: Was ist das? **Thema:** Barrierefreiheit – Rechtlicher Rahmen **Punkte:** 1 **Typ:** `[MC]` 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.** ✅ - [ ] Ein deutsches Gesetz, das nur öffentliche Behörden betrifft. - [ ] Ein technisches Standard wie HTML oder CSS. > **Feedback:** EAA = European Accessibility Act. Seit 28. Juni 2025 in Kraft. Betrifft E-Commerce, Banking, Telekommunikation, Transport, E-Books. In Deutschland umgesetzt durch das BFSG (Barrierefreiheitsstärkungsgesetz). Verstoß: bis 100.000€ Bußgeld möglich. --- ### H6 – Barrierefreiheit: Warum auch für „normale" Benutzende? **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 Benutzenden 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. --- ### 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 schön aussieht. - [x] **Sie navigieren nur mit Tab + Enter durch die Seite und prüfen: Erreichen Sie alle Funktionen? Ist der Fokus immer sichtbar? Ist die Tab-Reihenfolge logisch?** ✅ - [ ] Sie installieren einen Screenreader und lassen die Seite vorlesen. - [ ] Sie öffnen den Quellcode und zählen die barrierefreien Tags. > **Feedback:** Der Tastatur-Test ist der schnellste barrierefreie Selbsttest: Nur Tab + Enter benutzen. Wenn man so eine Funktion nicht erreicht kann, ist sie für Tastatur-Benutzende (und damit auch für Screenreader-Benutzende) nicht zugänglich. Tools wie axe DevTools oder Lighthouse automatisieren ~30% der Checks. ---  ## BLOCK I – Zusammenfassung-Fragen (Übergreifend) ---  ### I1 – Gesamtablauf: Wahl der richtigen Methode **Thema:** HTTP + TCP + DNS zusammen **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. > **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. ---  ### I2 – Gesamtablauf: Störfall analysieren **Thema:** Netzwerk + HTTP – Transfer/Problemlösung **Punkte:** 3 **Typ:** `[ESSAY]` Sie rufen eine Webseite auf und erhalten eine Fehlermeldung. Beschreibe drei verschiedene Szenarien, die zu einer Fehlermeldung führen könnten, und erkläre, in welcher „Schicht" des Ablaufs (DNS, TCP, HTTP) das Problem liegt und wie Sie es erkennen. > **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. ---  ## BLOCK J – Dateiformate: Grundbegriffe --- ### J1 – Was bedeutet „komprimieren"? **Thema:** Grundbegriffe – Kompression **Punkte:** 1 **Typ:** `[MC]` Was bedeutet es, eine Datei zu komprimieren? - [ ] Die Datei wird auf einem anderen Speichermedium gesichert. - [x] **Die Dateigröße wird durch Entfernung oder Vereinfachung von Daten reduziert.** ✅ - [ ] Die Datei wird verschlüsselt, damit sie kleiner aussieht. - [ ] Die Datei wird in ein anderen Format umgewandelt, ohne dass sich die Größe ändert. > **Feedback:** Kompression = Dateigröße reduzieren. Zwei Familien: verlustfrei (alle Daten bleiben erhalten, z. B. ZIP, PNG) und verlustbehaftet (Daten werden dauerhaft weggeworfen, z. B. JPEG, MP3). --- ### J2 – Verlustfrei vs. verlustbehaftet **Thema:** Grundbegriffe – Kompressionsprimitiven **Punkte:** 2 **Typ:** `[MATCH]` Ordne jedem Format zu, ob es verlustfrei oder verlustbehaftet komprimiert. | Format | Kompressions-Typ | |---|---| | JPEG | Verlustbehaftet | | PNG | Verlustfrei | | MP3 | Verlustbehaftet | | ZIP | Verlustfrei | | FLAC | Verlustfrei | | WebP (lossy) | Verlustbehaftet | > **Feedback:** Verlustfrei = Originaldaten perfekt rekonstruierbar (ZIP, PNG, FLAC). Verlustbehaftet = Daten dauerhaft weggeworfen, nicht mehr zurückholbar (JPEG, MP3). --- ### J3 – Verlustfrei vs. verlustbehaftet: Erkläre **Thema:** Grundbegriffe – Konzept **Punkte:** 2 **Typ:** `[ESSAY]` Erkläre den Unterschied zwischen verlustfreier und verlustbehafteter Kompression. Nenne je ein konkretes Beispiel und erkläre, warum man in unterschiedlichen Situationen unterschiedliche Kompressionstypen wählt. > **Musterlösung:** Verlustfrei: Alle Originaldaten bleiben erhalten – die Datei kann perfekt rekonstruiert werden (z. B. ZIP, PNG). Verlustbehaftet: Daten werden dauerhaft weggeworfen – die Datei kann nicht mehr perfekt hergestellt werden (z. B. JPEG, MP3). Wahl: Fotos fürs Web → JPEG (verlustbehaftet), weil der Unterschied kaum sichtbar ist und die Datei deutlich kleiner wird. Archivierung oder Grafiken → PNG (verlustfrei), weil Qualitätsverlust inakzeptabel wäre. --- ### J4 – Was bedeutet „skalieren"? **Thema:** Grundbegriffe – Skalierung **Punkte:** 1 **Typ:** `[MC]` Was passiert, wenn ein Rasterbild vergrößert wird? - [ ] Neue Pixel werden aus dem Dateiformat automatisch geladen. - [x] **Fehlende Pixel müssen durch Interpolation „erfunden" werden – es entsteht keine neue Information.** ✅ - [ ] Das Bild wird verlustfrei größer, weil Pixel automatisch duplifiziert werden. - [ ] Die Dateigröße bleibt gleich, nur der Zoom im Betrachter ändert sich. > **Feedback:** Ein Rasterbild hat eine native Auflösung. Alles darüber hinaus = Schätzung (Interpolation). Deshalb werden vergrößerte Rasterbilder unscharf – es gibt einfach keine Daten für die fehlenden Pixel. --- ### J5 – Was bedeutet „konvertieren"? **Thema:** Grundbegriffe – Konvertierung **Punkte:** 1 **Typ:** `[MC]` Was bedeutet es, eine Datei zu konvertieren? - [ ] Die Datei wird komprimiert und umbenannt. - [x] **Die Daten werden von einem Format in ein anderes umgewandelt (z. B. JPEG → PNG, MP4 → WebM).** ✅ - [ ] Die Datei wird verschlüsselt und in ein neues Format gepackt. - [ ] Die Dateiendung wird umbenannt, ohne dass sich der Inhalt ändert. > **Feedback:** Konvertierung = Format-Umwandlung. Der Inhalt bleibt inhaltlich gleich, aber die Art der Speicherung (Kompression, Struktur) ändert sich. Wichtig: Eine Dateiendung umzubenennen ist KEINE Konvertierung. --- ### J6 – Was bedeutet „codieren" und „decodieren"? **Thema:** Grundbegriffe – Codec-Konzept **Punkte:** 2 **Typ:** `[ESSAY]` Erkläre, was „codieren" und „decodieren" bedeuten. Erkläre anschließend, warum der Begriff „Codec" aus beiden Wörtern zusammengesetzt ist, und nenne ein konkretes Beispiel. > **Musterlösung:** Codieren = Daten in ein bestimmtes Format umwandeln (z. B. Rohvideodaten → H.264-komprimiertes Video). Decodieren = das Gegenteil: komprimierte Daten wieder in abspielbare Form zurückwandeln (z. B. H.264 → Pixeldaten für den Bildschirm). Codec = Co(der) + Dec(oder) – ein Algorithmus, der beides kann. Beispiel: H.264 ist ein Video-Codec: Der Encoder erzeugt die komprimierte Datei, der Decoder im Player spielt sie wieder ab. --- ### J7 – Codec vs. Container **Thema:** Grundbegriffe – Codec/Container-Unterschied **Punkte:** 2 **Typ:** `[MC]` Was ist der Unterschied zwischen einem Container und einem Codec bei Videodateien? - [ ] Container und Codec sind synonyme Begriffe für das gleiche Konzept. - [x] **Der Container (z. B. MP4) ist die „Verpackung", die verschiedene Streams zusammenpackt. Der Codec (z. B. H.264) bestimmt, wie der Video-Stream komprimiert wird.** ✅ - [ ] Der Codec ist die Dateiendung, der Container der Kompressionsalgorithmus. - [ ] Ein Container enthält immer genau einen Codec – es kann keine Kombination geben. > **Feedback:** Container ≠ Codec. Ein MP4-Container kann H.264, H.265 oder AV1 enthalten. Gleiche Endung `.mp4`, unterschiedlicher Inhalt. Der Container packt zusammen (Video, Audio, Untertitel, Metadaten), der Codec komprimiert. --- ### J8 – Codec vs. Container: Zuordnung **Thema:** Grundbegriffe – Codec/Container-Zuordnung **Punkte:** 2 **Typ:** `[MATCH]` Ordne zu: Container oder Codec? | Name | Typ | |---|---| | MP4 | Container | | H.264 | Codec | | WebM | Container | | AV1 | Codec | > **Feedback:** Container = Dateiformat, das Streams zusammenpackt (MP4, MKV, WebM). Codec = Kompressionsalgorithmus für einen bestimmten Stream (H.264, AV1, AAC). --- ### J9 – Redundanz vs. Irrelevanz **Thema:** Grundbegriffe – Kompressionsprinzipien **Punkte:** 2 **Typ:** `[MATCH]` Verlustfreie und verlustbehaftete Kompression arbeiten nach unterschiedlichen Prinzipien. Ordne zu. | Prinzip | Kompressionstyp | |---|---| | Redundanz entfernen (wiederholende Muster kompakter darstellen) | Verlustfrei | | Irrelevanz entfernen (für Menschen nicht wahrnehmbar) | Verlustbehaftet | > **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). --- ### J10 – Dateneinheiten: Größenordnungen **Thema:** Grundbegriffe – Speichereinheiten **Punkte:** 2 **Typ:** `[ORDER]` Sortiere die Dateneinheiten von kleinster zu größter: 1. Byte 2. Kilobyte (KB) 3. Megabyte (MB) 4. Gigabyte (GB) 5. Terabyte (TB) 6. Petabyte (PB) > **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. --- ### J11 – Bit und Byte: Umrechnung **Thema:** Grundbegriffe – Bit/Byte-Verhältnis **Punkte:** 1 **Typ:** `[NUMERIC]` Ein Bit ist die kleinste Informationseinheit. Ein Byte besteht aus wie vielen Bit? **Lösung:** **8** (±0) > **Feedback:** 1 Byte = 8 Bit. Ein Byte kann einen Wert von 0 bis 255 darstellen (2⁸ − 1). Die Unterscheidung Bit/Byte ist fundamental – Bit wird mit kleinem „b" abgekürzt (b), Byte mit großem „B" (B). Deshalb: 1 Mbit/s ≠ 1 MB/s. --- ### J12 – 7-Bit ASCII: Wie viele Zeichen? **Thema:** Grundbegriffe – ASCII-Zeichenkodierung **Punkte:** 1 **Typ:** `[NUMERIC]` Der ASCII-Standard verwendet 7 Bit pro Zeichen. Wie viele verschiedene Zeichen können damit dargestellt werden? **Lösung:** **128** (±0) > **Feedback:** Bei n Bit gibt es 2ⁿ mögliche Werte. 7 Bit → 2⁷ = 128 Zeichen. Diese umfassen: Ziffern (0–9), Buchstaben (A–Z, a–z), Sonderzeichen und Steuerzeichen. Achtung: Umlaute (ä, ö, ü) sind nicht im ASCII-Sortiment – dafür braucht man z. B. UTF-8. --- ### J13 – Hexadezimalzahlen: Zwei 4-Bit-Werte **Thema:** Grundbegriffe – Hexadezimal **Punkte:** 2 **Typ:** `[NUMERIC]` Zwei Hexadezimalzahlen werden jeweils durch 4 Bit dargestellt. Wie viele verschiedene Werte kann eine einzelne Hexadezimalziffer annehmen? **Lösung:** **16** (±0) > **Feedback:** 4 Bit → 2⁴ = 16 Werte (0–15). Diese werden in Hexadezimal als 0–9 und A–F dargestellt. Zwei Hex-Ziffern zusammen = 8 Bit = 1 Byte → ein Byte lässt sich immer als genau zwei Hex-Ziffern schreiben (z. B. Byte 255 = FF, Byte 10 = 0A). --- ### J14 – Ein Pixel, drei Kanäle, 8 Bit **Thema:** Grundbegriffe – Speicherbedarf eines Pixels **Punkte:** 1 **Typ:** `[NUMERIC]` Ein einzelner Pixel wird durch drei Farbkanäle (R, G, B) mit jeweils 8 Bit Farbtiefe gespeichert. Wie viele Byte Informationen enthalten ein solcher Pixel? **Lösung:** **3** (±0) > **Feedback:** 3 Kanäle × 8 Bit = 24 Bit = 3 Byte pro Pixel. Das entspricht einer 24-Bit-Farbtiefe (True Color). Diese 3 Byte pro Pixel bilden die Basis für jede Speicherberechnung von Rasterbildern: Breite × Höhe × 3 Bytes = Gesamtgröße unkomprimiert. ---  ## BLOCK K – Bildformate & Raster vs. Vektor --- ### K1 – Was ist ein Pixel? **Thema:** Digitale Bilder – Grundbegriffe **Punkte:** 1 **Typ:** `[MC]` Was ist ein Pixel in einem digitalen Bild? - [ ] Ein winziges physisches Kameraobjektiv. - [x] **Ein einzelner Farbpunkt in einem Rasterbild – der kleinste Baustein.** ✅ - [ ] Eine Einheit zur Messung der Dateigröße. - [ ] Ein Synonym für eine Farbe im RGB-Farbraum. > **Feedback:** Pixel = Picture Element. Ein digitales Rasterbild ist ein 2D-Array aus Pixeln, jeder mit einem Farbwert (z. B. RGB). --- ### K2 – Speicherbedarf berechnen **Thema:** Rastergrafiken – Berechnung **Punkte:** 2 **Typ:** `[NUMERIC]` Ein Bild ist 1920 × 1080 Pixel groß und nutzt 24-Bit-Farbtiefe (True Color). Wie groß ist das Bild unkomprimiert in Megabyte? (Runde auf eine Dezimalstelle) **Formel:** Breite × Höhe × (Farbtiefe / 8) = Bytes **Lösung:** 1920 × 1080 × 3 = 6.220.800 Bytes ≈ **6,2 MB** (±0,1) > **Feedback:** 24 Bit = 3 Bytes pro Pixel (8 Bit pro Kanal: R, G, B). 1920 × 1080 = 2.073.600 Pixel × 3 Bytes = 6.220.800 Bytes. Durch 1.000.000 ≈ 6,2 MB. --- ### K3 – Farbtiefe: Bedeutung **Thema:** Rastergrafiken – Farbtiefe **Punkte:** 2 **Typ:** `[MATCH]` Ordne jeder Farbtiefe ihre Bedeutung zu. | Farbtiefe | Bedeutung | |---|---| | 1 Bit | 2 Farben (Schwarz/Weiß) | | 8 Bit | 256 Farben (Graustufen, GIF) | | 24 Bit | 16,7 Millionen Farben (True Color, Standard) | | 32 Bit | 16,7 Millionen Farben + Alpha (Transparenz) | > **Feedback:** Bei n Bit gibt es 2ⁿ mögliche Werte. 24 Bit = 8 Bit pro Kanal (R, G, B). 32 Bit = 24 Bit Farbe + 8 Bit Alpha-Kanal für Transparenz. --- ### K4 – Was ist Alpha-Transparenz? **Thema:** Rastergrafiken – Transparenz **Punkte:** 1 **Typ:** `[MC]` Was bedeutet ein 32-Bit-Bild gegenüber einem 24-Bit-Bild? - [ ] Es hat doppelt so viele Pixel. - [x] **Es hat einen zusätzlichen Alpha-Kanal (8 Bit), der die Transparenz jedes Pixels speichert.** ✅ - [ ] Es nutzt eine höhere Auflösung. - [ ] Es kann mehr Dateiformate speichern. > **Feedback:** 32 Bit = 24 Bit (RGB) + 8 Bit Alpha. Der Alpha-Kanal bestimmt, wie durchsichtig jeder Pixel ist (0 = vollständig transparent, 255 = vollständig undurchsichtig). Wichtig für PNGs mit Hintergrund-Transparenz. --- ### K5 – Raster vs. Vektor: Kern-Unterschied **Thema:** Raster vs. Vektor – Konzept **Punkte:** 2 **Typ:** `[MC]` Was ist der fundamentale Unterschied zwischen Raster- und Vektorgrafiken? - [ ] Vektorgrafiken sind immer farbiger als Rastergrafiken. - [x] **Rastergrafiken speichern einzelne Pixel; Vektorgrafiken speichern geometrische Beschreibungen (Pfade, Formen), die beliebig skaliert werden können.** ✅ - [ ] Rastergrafiken können keine Farben darstellen, Vektorgrafiken schon. - [ ] Der Unterschied liegt nur in der Dateiendung, nicht im Inhalt. > **Feedback:** Raster = „Malen nach Zahlen" (jeder Pixel einzeln). Vektor = „Bauanleitung" (Formen beschreiben). Diese Unterschied bestimmt alles: Skalierung, Dateigröße, Einsatzbereich. --- ### K6 – Raster vs. Vektor: Vergleich **Thema:** Raster vs. Vektor – Eigenschaften zuordnen **Punkte:** 2 **Typ:** `[MATCH]` Ordne jeder Eigenschaft zu: Raster oder Vektor? | Eigenschaft | Typ | |---|---| | Skalierung ohne Qualitätsverlust | Vektor | | Ideal für Fotos | Raster | | Dateigröße abhängig von der Auflösung | Raster | | Ideal für Logos und Icons | Vektor | | Speicherung als 2D-Array von Pixeln | Raster | | Dateigröße abhängig von der Komplexität | Vektor | > **Feedback:** Raster = Pixel-basiert, auflösungsabhängig, ideal für Fotos. Vektor = Beschreibungs-basiert, beliebig skalierbar, ideal für Grafiken/Logos. --- ### K7 – Skalierung: Warum werden Rasterbilder unscharf? **Thema:** Rastergrafiken – Skalierung Transfer **Punkte:** 2 **Typ:** `[ESSAY]` Erkläre, warum ein Rasterbild beim Vergrößern unscharf wird, während ein Vektorbild bei beliebiger Größe scharf bleibt. Nenne einen konkreten Anwendungsfall, in dem diese Eigenschaft ausschlaggebend ist. > **Musterlösung:** Ein Rasterbild hat eine feste Auflösung (eine bestimmte Anzahl von Pixeln). Beim Vergrößern müssen neue Pixel „erfunden" werden (Interpolation) – es gibt keine echten Daten für die fehlenden Stellen → Unschärfe. Ein Vektorbild speichert nur Beschreibungen (Pfade, Formen). Beim Vergrößern werden einfach die Koordinaten skaliert – keine Information geht verloren → immer scharf. Anwendungsfall: Ein Logo auf einer Visitenkarte UND auf einem Plakat → SVG nutzen, damit es bei beliebiger Größe scharf bleibt. --- ### K8 – Vektor → Raster: Wie heißt das? **Thema:** Raster vs. Vektor – Konvertierung **Punkte:** 1 **Typ:** `[MC]` Wie heißt der Prozess, bei dem eine Vektorgrafik in eine Rastergrafik umgewandelt wird? - [ ] Vektorisierung - [x] **Rasterisierung** ✅ - [ ] Pixelierung - [ ] Komprimierung > **Feedback:** Rasterisierung = Vektor → Raster (trivial, immer möglich). Der umgekehrte Prozess (Raster → Vektor) heißt „Tracing" und funktioniert oft nur unbefriedigend. ---  ### K9 – Interpolation: Welches Verfahren wofür? **Thema:** Rastergrafiken – Interpolationsverfahren **Punkte:** 2 **Typ:** `[MATCH]` Ordne jedem Interpolationsverfahren seine Eigenschaft zu. | Verfahren | Eigenschaft | |---|---| | Nearest Neighbor | Schnell, pixelig – gut für Pixel-Art | | Bilinear | Glättet, Standard-Verfahren | | Bicubic | Hohe Qualität, rechenintensiver | | Lanczos | Beste Qualität, mathematisch komplex | > **Feedback:** Bei der Wahl: Pixel-Art → Nearest Neighbor (soll pixelig bleiben). Normale Bilder → Bilinear oder Bicubic. Maximale Qualität bei Fotos → Lanczos. ---  ## BLOCK L – JPEG: Innenleben --- ### L1 – JPEG: Verlustfrei oder verlustbehaftet? **Thema:** JPEG – Grundeigenschaft **Punkte:** 1 **Typ:** `[MC]` JPEG ist ein … - [x] **…verlustbehaftetes Bildformat. Beim Speichern werden Daten dauerhaft weggeworfen.** ✅ - [ ] …verlustfreies Bildformat wie PNG. - [ ] …Videoformat für Streaming. - [ ] …Vektorgrafik-Format. > **Feedback:** JPEG = Joint Photographic Experts Group. Verlustbehaftet: Beim Speichern werden Daten dauerhaft weggeworfen – eine gespeicherte JPEG kann nicht perfekt zum Original zurückgeführt werden. Quality 100 ≠ verlustfrei, nur „wenig wegwerfen". --- ### L2 – Psychovisuelle Kompression: Das Auge austricksen **Thema:** JPEG – Wahrnehmungsprinzip **Punkte:** 2 **Typ:** `[MC]` 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) 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. > **Feedback:** Psychovisuelle Kompression = Schwächen des Auges ausnutzen. Kern: Mehr Stäbchen (Helligkeit) als Zapfen (Farbe) im Auge → Helligkeit sichern, Farbe reduzieren. Der Verlust ist für Menschen kaum sichtbar. --- ### L3 – Farbraumkonversion: RGB → YCbCr **Thema:** JPEG Schritt 1 – Farbraum **Punkte:** 2 **Typ:** `[MC]` Warum wird bei JPEG von RGB in YCbCr konvertiert? - [ ] YCbCr nutzt weniger Speicher pro Pixel als RGB. - [x] **In YCbCr sind Helligkeit (Y) und Farbe (Cb, Cr) getrennt – die Farbauflösung kann unabhängig von der Helligkeit reduziert werden.** ✅ - [ ] RGB kann keine Transparenz darstellen, YCbCr schon. - [ ] Die Konvertierung ist ein verlustfreier Schritt, der die Dateigröße halbiert. > **Feedback:** Y = Helligkeit (Luminanz), Cb/Cr = Farbdifferenzen (Chrominanz). Diese Trennung ermöglicht Chroma Subsampling: Helligkeit voll behalten, Farbe reduzieren – ohne sichtbaren Verlust. --- ### L4 – Chroma Subsampling: Was ist 4:2:0? **Thema:** JPEG Schritt 2 – Subsampling **Punkte:** 2 **Typ:** `[MC]` Was bedeutet das Subsampling-Schema 4:2:0? - [ ] 4 Pixel teilen sich eine Helligkeit, aber jeder hat eigene Farbe. - [x] **4 Pixel teilen sich einen Farbwert (Chrominanz), aber jeder hat eine eigene Helligkeit (Luminanz). Die Farbauflösung wird auf 25% reduziert.** ✅ - [ ] 4:2:0 bedeutet, dass keine Farbe gespeichert wird – nur Graustufen. - [ ] Die Notation beschreibt die Blockgröße, nicht die Farbauflösung. > **Feedback:** 4:2:0 = JPEG-Standard. Von 4 Pixeln wird nur 1 Farbwert gespeichert (2×2-Block teilt Farbe), aber jeder Pixel behält seine eigene Helligkeit. Ergebnis: 50% Datenreduktion, kaum sichtbar. --- ### L5 – JPEG-Schritte: Richtige Reihenfolge **Thema:** JPEG – Kompressionsablauf **Punkte:** 2 **Typ:** `[ORDER]` Sortiere die Schritte der JPEG-Kompression in der richtigen Reihenfolge: 1. Farbraumkonversion (RGB → YCbCr) 2. Chroma Subsampling 3. Block-Aufteilung (8×8) 4. DCT (Frequenzanalyse) 5. Quantisierung (hier passiert der Verlust!) 6. Huffman-Coding (verlustfrei) > **Feedback:** Der einzige verlustbehaftete Schritt ist die Quantisierung (Schritt 5). Alles davor bereitet die Daten vor, alles danach komprimiert die Ergebnisse verlustfrei weiter. --- ### L6 – Welcher Schritt ist verlustbehaftet? **Thema:** JPEG – Verlust lokalisieren **Punkte:** 1 **Typ:** `[MC]` Bei welchem Schritt der JPEG-Kompression werden Daten dauerhaft weggeworfen? - [ ] Farbraumkonversion (RGB → YCbCr) - [ ] DCT (Discrete Cosine Transform) - [x] **Quantisierung – hier werden unwichtige Frequenzkoeffizienten auf Null gesetzt oder vergröbert.** ✅ - [ ] Huffman-Coding > **Feedback:** DCT selbst ist verlustfrei und reversibel – es sortiert nur die Daten nach Wichtigkeit. Die Quantisierung ist der einzige verlustbehaftete Schritt: Sie wirft hohe Frequenzen (feine Details) weg. Huffman-Coding danach ist wieder verlustfrei. ---  ### L7 – DCT: Was macht sie? **Thema:** JPEG – DCT-Prinzip **Punkte:** 1 **Typ:** `[MC]` Was leitet die DCT (Discrete Cosine Transform) bei JPEG? - [ ] Sie komprimiert die Daten verlustbehaftet. - [x] **Sie wandelt 64 Pixelwerte eines 8×8-Blocks in 64 Frequenzkoeffizienten um – sortiert die Information nach Wichtigkeit (niedrige Frequenz = wichtig, hohe Frequenz = Details).** ✅ - [ ] Sie verschlüsselt die Daten für sichere Übertragung. - [ ] Sie reduziert die Farbauflösung des Bildes. > **Feedback:** DCT = Herzstück von JPEG, aber selbst verlustfrei. Sie sortiert: Der DC-Koeffizient (0,0) = Durchschnittshelligkeit eines Blocks. Die AC-Koeffizienten = Helligkeitsänderungen. 90% der Information steckt in den ersten 10–15 Koeffizienten. --- ### L8 – Huffman-Coding: Prinzip **Thema:** JPEG – Huffman **Punkte:** 2 **Typ:** `[MC]` Wie funktioniert Huffman-Coding? - [ ] Alle Zeichen bekommen gleich lange Codes – einfach und effizient. - [x] **Häufige Werte bekommen kurze Codes, selten vorkommende lange Codes – variable Bitlänge statt fester 8 Bit.** ✅ - [ ] Huffman-Coding verschlüsselt die Daten zusätzlich. - [ ] Es funktioniert nur für Texte, nicht für Bilddaten. > **Feedback:** Huffman = verlustfrei, optimal für bekannte Häufigkeiten. Präfix-frei: Kein Code ist Anfang eines anderen → eindeutig decodierbar. Auch in ZIP, PNG, MP3 verwendet. ---  ### L9 – JPEG-Artefakte: Benennen **Thema:** JPEG – Artefakte identifizieren **Punkte:** 2 **Typ:** `[MATCH]` Ordne jedem JPEG-Artefakt seine Beschreibung zu. | Artefakt | Beschreibung | |---|---| | Blocking | 8×8-Blöcke werden sichtbar als Rechteckmuster | | Ringing | „Geister" oder Halos an scharfen Kanten | | Posterization | Farbverläufe werden stufig statt fließend | > **Feedback:** Alle drei sind Folgen der Quantisierung. Blocking: Weil jeder 8×8-Block unabhängig komprimiert wird. Ringing: DCT hat Probleme mit harten Kanten (Gibbs-Phänomen). Posterization: Zu wenige Bits für feine Farbabstufungen. ---  ## BLOCK M – Bildformate: PNG, GIF, WebP, SVG --- ### M1 – PNG: Verlustfrei oder verlustbehaftet? **Thema:** PNG – Grundeigenschaft **Punkte:** 1 **Typ:** `[MC]` Wie komprimiert PNG? - [ ] Verlustbehaftet – wie JPEG, aber mit besserer Qualität. - [x] **Verlustfrei – die Originaldaten können perfekt rekonstruiert werden.** ✅ - [ ] Gar nicht – PNG speichert Daten unkomprimiert. - [ ] PNG nutzt eine Kombination aus verlustfrei und verlustbehaftet. > **Feedback:** PNG nutzt DEFLATE-Kompression (wie ZIP) – verlustfrei. Deshalb ist PNG ideal für Grafiken, Screenshots und Bilder mit Transparenz, aber größer als JPEG für Fotos. --- ### M2 – PNG vs. JPEG: Wann was? **Thema:** Bildformate – Formatwahl **Punkte:** 2 **Typ:** `[ESSAY]` Erklären Sie, wann Sie PNG und wann JPEG wählen würden. Nenne je zwei konkrete Anwendungsfälle und begründen Sie Ihre Wahl. > **Musterlösung:** PNG: (1) Screenshots – Texte und Linien bleiben scharf, keine Artefakte. (2) Logos mit Transparenz – PNG unterstützt Alpha-Transparenz, JPEG nicht. JPEG: (1) Fotos fürs Web – deutlich kleiner bei kaum sichtbarem Qualitätsverlust. (2) Social Media – Plattformen re-komprimieren sowieso, PNG würde nur unnötig groß sein. --- ### M3 – GIF: Wie viele Farben? **Thema:** GIF – Eigenschaften **Punkte:** 1 **Typ:** `[MC]` Wie viele Farben kann ein GIF-Bild gleichzeitig anzeigen? - [ ] 16 Farben - [ ] 16,7 Millionen Farben - [x] **256 Farben (8-Bit-Palette)** ✅ - [ ] Unbegrenzt – GIF unterstützt alle Farben. > **Feedback:** GIF = 8-Bit-Palette = 256 Farben maximal. Deshalb sehen GIF-Bilder bei Fotos oft banding/posterisiert aus. GIF überlebt heute wegen Animationen. ---  ### M4 – WebP vs. JPEG: Vorteil? **Thema:** Bildformate – WebP **Punkte:** 1 **Typ:** `[MC]` Was ist der hauptsächliche Vorteil von WebP gegenüber JPEG? - [ ] WebP unterstützt Videos, JPEG nicht. - [x] **WebP erzeugt bei gleicher Qualität 25–35% kleinere Dateien als JPEG.** ✅ - [ ] WebP ist verlustfrei, JPEG nicht. - [ ] WebP kann keine Fotos speichern, nur Grafiken. > **Feedback:** WebP (Google, 2010) kann sowohl lossy als auch lossless komprimieren, unterstützt Transparenz und Animationen. Bei gleicher visueller Qualität sind WebP-Dateien deutlich kleiner als JPEG. --- ### M5 – SVG: Was ist es? **Thema:** SVG – Grundbegriff **Punkte:** 1 **Typ:** `[MC]` Was ist SVG? - [ ] Ein verlustbehaftetes Rasterbild-Format wie JPEG. - [x] **Ein Vektorgrafik-Format, das Bilder als geometrische Beschreibungen (XML) speichert – beliebig skalierbar ohne Qualitätsverlust.** ✅ - [ ] Ein Video-Container wie MP4. - [ ] Ein komprimiertes Archivformat wie ZIP. > **Feedback:** SVG = Scalable Vector Graphics. Web-Standard für Vektorgrafiken. Beschreibt WAS gezeichnet werden soll (`<circle>`, `<rect>`, `<path>`), nicht wie jeder Pixel aussieht. Ideal für Logos, Icons, Illustrationen. --- ### M6 – Formatwahl: Szenario zuordnen **Thema:** Bildformate – Formatwahl Transfer **Punkte:** 2 **Typ:** `[MATCH]` 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 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). ---  ## BLOCK N – Video-Kompression ---  ### N1 – Spatial vs. Temporal Compression **Thema:** Video – Kompressionsprinzipien **Punkte:** 2 **Typ:** `[MATCH]` Ordne jedem Prinzip seine Beschreibung zu. | Prinzip | Beschreibung | |---|---| | Spatial Compression (Intra-Frame) | Komprimiert jedes einzelne Bild für sich (wie JPEG) | | Temporal Compression (Inter-Frame) | Speichert nur die Änderungen zwischen aufeinanderfolgenden Bildern | | Motion Compensation | Beschreibt Bewegung durch Vektoren statt Pixel zu kopieren | > **Feedback:** Spatial = räumlich (innerhalb eines Frames). Temporal = zeitlich (zwischen Frames). Motion Compensation = Bewegungsvektoren. 90% eines Frames ist oft identisch mit dem vorherigen – deshalb ist Temporal-Kompression so wirksam. ---  ### N2 – I-Frame, P-Frame, B-Frame: Was ist was? **Thema:** Video – Frame-Typen **Punkte:** 2 **Typ:** `[MATCH]` Ordne jedem Frame-Typ seine Beschreibung zu. | Frame-Typ | Beschreibung | |---|---| | I-Frame (Keyframe) | Vollständiges Bild, unabhängig dekodierbar – keine Referenz auf andere Frames | | P-Frame | Nur Änderungen gegenüber vorherigen Frames speichern (~30% der Größe eines I-Frames) | | B-Frame | Änderungen gegenüber vorherigen UND zukünftigen Frames (~15% der Größe eines I-Frames) | > **Feedback:** I = Intra (innerhalb). P = Predicted (aus Vergangenheit). B = Bi-directional (Vergangenheit + Zukunft). B-Frames sind am kleinsten, aber brauchen mehr Rechenleistung zum Decodieren. ---  ### N3 – Was passiert, wenn ein I-Frame beschädigt ist? **Thema:** Video – I-Frame Bedeutung Transfer **Punkte:** 2 **Typ:** `[ESSAY]` Erkläre, warum ein I-Frame bei der Videokompression so wichtig ist. Was passiert, wenn ein einzelner I-Frame in einem Videostream beschädigt wird? > **Musterlösung:** Ein I-Frame ist ein vollständiges, unabhängig dekodierbare Bild. Alle nachfolgenden P- und B-Frames referenzieren auf vorherige Frames – letztlich auf das letzte I-Frame. Wenn ein I-Frame beschädigt wird, können alle abhängigen P- und B-Frames bis zum nächsten intakten I-Frame nicht mehr korrekt rekonstruiert werden → Videofehler sichtbar bis zum nächsten Keyframe. Deshalb werden typischerweise alle 1–2 Sekunden neue I-Frames eingefügt. ---  ### N4 – Motion Compensation: Prinzip **Thema:** Video – Motion Compensation **Punkte:** 1 **Typ:** `[MC]` Was beschreibt ein Motion Vector bei der Videokompression? - [ ] Die Helligkeit eines einzelnen Pixels. - [x] **Die Verschiebung eines Bildblocks zwischen zwei Frames (z. B. „verschiebe um +20 Pixel nach rechts").** ✅ - [ ] Die Kompressionsrate des gesamten Videos. - [ ] Die Anzahl der Farben in einem Frame. > **Feedback:** Motion Compensation speichert Bewegung als Vektoren statt Pixel zu kopieren. Wenn sich ein 16×16-Block von (100,200) auf (120,200) bewegt, wird nur „+20, 0" gespeichert – deutlich kleiner als den Block zweimal zu speichern. ---  ### N5 – Video-Codecs: Zeitstrahl **Thema:** Video – Codecs-Übersicht **Punkte:** 2 **Typ:** `[ORDER]` Sortiere die Video-Codecs nach Veröffentlichungsjahr (alt → neu): 1. H.264 / AVC (2003) 2. H.265 / HEVC (2013) 3. VP9 (2013) 4. AV1 (2018) > **Feedback:** H.264 revolutionierte Streaming. H.265 und VP9 kamen gleichzeitig – H.265 technisch besser, aber Patent-Chaos. AV1 vereint die Industrie: patent-frei, 30% besser als H.265. --- ### N6 – AV1: Warum die Zukunft? **Thema:** Video – AV1 Transfer **Punkte:** 2 **Typ:** `[ESSAY]` Erkläre, warum AV1 als „die Zukunft" der Videokompression gilt. Nenne mindestens zwei konkrete Eigenschaften und erkläre, warum H.265 trotz besserer technischer Kompression nicht die gleiche Dominanz erreicht hat. > **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. ---  ## BLOCK O – Speichermedien & Schnittstellen ---  ### O1 – KB vs. KiB: Was ist der Unterschied? **Thema:** Speicher – Einheiten **Punkte:** 2 **Typ:** `[MC]` Eine Festplatte wird als „1 TB" vermarktet, aber Windows zeigt nur ~931 GB an. Warum? - [ ] Windows zeigt falsche Werte an – das ist ein Bug. - [x] **Hersteller nutzen dezimale Einheiten (1 TB = 1.000 GB), Windows nutzt binäre Einheiten (1 TiB = 1.024 GiB). Bei TB-Größen entsteht eine ~7% Diskrepanz.** ✅ - [ ] Die Festplatte verliert beim Formatieren fast 10% ihrer Kapazität. - [ ] Windows reserviert automatisch 10% als Sicherheitspuffer. > **Feedback:** SI (Dezimal): 1 KB = 1.000 Bytes, 1 MB = 1.000 KB. IEC (Binär): 1 KiB = 1.024 Bytes, 1 MiB = 1.024 KiB. Bei 1 TB: 1.000⁴ vs. 1.024⁴ Bytes → ~7% Unterschied. Windows zeigt binäre Werte an, aber mit SI-Bezeichnung (GB statt GiB) → Verwirrung. ---  ### O2 – HDD vs. SSD: Kern-Unterschied **Thema:** Speichermedien – HDD vs. SSD **Punkte:** 1 **Typ:** `[MC]` Was ist der fundamentale technische Unterschied zwischen HDD und SSD? - [ ] HDDs sind elektronisch, SSDs mechanisch. - [x] **HDDs speichern Daten magnetisch auf sich drehenden Plattern (mechanisch). SSDs nutzen Flash-Speicher (elektronisch, keine beweglichen Teile).** ✅ - [ ] Beide Technologien funktionieren identisch, der Unterschied liegt nur im Gehäuse. - [ ] HDDs nutzen Flash-Speicher, SSDs magnetische Platten. > **Feedback:** HDD = Hard Disk Drive = mechanisch (Platter, Spindel, Schreib-Lese-Kopf). SSD = Solid State Drive = elektronisch (Flash-Speicher). Diese Unterschied bestimmt alles: Geschwindigkeit, Latenz, Geräusche, Haltbarkeit. ---  ### O3 – HDD vs. SSD: Eigenschaften zuordnen **Thema:** Speichermedien – Vergleich **Punkte:** 2 **Typ:** `[MATCH]` Ordne jeder Eigenschaft zu: HDD oder SSD? | Eigenschaft | Typ | |---|---| | Sequentielle Lesgeschwindigkeit ~150 MB/s | HDD | | Sequentielle Lesgeschwindigkeit ~3.500 MB/s | SSD (NVMe) | | Latenz ~10 ms | HDD | | Latenz ~0,02 ms | SSD | | Günstig pro TB (~15€/TB) | HDD | | Ideal für Betriebssystem | SSD | > **Feedback:** Der dramatische Unterschied liegt bei Random Access: SSD ~500× schneller. Deshalb: Betriebssystem auf SSD, Archiv auf HDD. Viele nutzen beides: Kleine SSD für System + große HDD für Daten. ---  ### O4 – USB-C: Stecker oder Protokoll? **Thema:** Schnittstellen – USB-C **Punkte:** 2 **Typ:** `[MC]` Ein USB-C-Kabel kann langsam sein, obwohl es wie ein „modernes" Kabel aussieht. Warum? - [ ] USB-C-Kabel sind immer gleich schnell – die Geschwindigkeit liegt am Gerät. - [x] **USB-C ist nur ein Steckertyp, kein Protokoll. Ein USB-C-Kabel kann USB 2.0 (480 Mbit/s) bis USB4 (40 Gbit/s) sein – am Stecker nicht erkennbar.** ✅ - [ ] USB-C-Kabel werden nach einem Jahr automatisch langsamer. - [ ] Die Geschwindigkeit hängt nur vom Betriebssystem ab. > **Feedback:** USB-C = Steckerform. Das Protokoll dahinter kann USB 2.0, 3.2 oder USB4 sein. Ein billiges USB-C-Kabel ist oft nur USB 2.0 mit neuem Stecker. Kabel-Spezifikation prüfen! ---  ### O5 – Dateisysteme: Zuordnung **Thema:** Dateisysteme – Überblick **Punkte:** 2 **Typ:** `[MATCH]` Ordne jedem Dateisystem seine ideale Anwendung zu. | Dateisystem | Ideal für | |---|---| | FAT32 | USB-Sticks, SD-Karten (maximale Kompatibilität) | | NTFS | Windows-Systeme (Journaling, Rechte) | | APFS | macOS, iOS (Snapshots, CoW) | | ext4 | Linux-Systeme (Journaling, stabil) | | exFAT | Große Dateien auf portablen Medien | > **Feedback:** FAT32 = kleinster gemeinsamer Nenner, aber max. 4 GB pro Datei. exFAT = FAT32 ohne Größenlimits. NTFS/APFS/ext4 = moderne Systeme mit Journaling. Journaling = bei Absturz werden Änderungen nicht verloren. ---  ### O6 – FAT32: Warum nicht für große Dateien? **Thema:** Dateisysteme – FAT32 Limitation **Punkte:** 1 **Typ:** `[MC]` Sie versuchen, eine 5-GB-Videodatei auf einen FAT32-formatierten USB-Stick zu kopieren. Was passiert? - [ ] Die Datei wird automatisch aufgeteilt in kleinere Teile. - [x] **Der Vorgang fehlschlägt – FAT32 unterstützt keine einzelnen Dateien größer als 4 GB.** ✅ - [ ] Die Datei wird automatisch komprimiert, bis sie unter 4 GB ist. - [ ] FAT32 hat keine Dateigrößenbeschränkung. > **Feedback:** FAT32-Limit: max. 4 GB pro Datei. Ein 4K-Video oder ISO-Image passt oft nicht. Lösung: USB-Stick mit exFAT oder NTFS formatieren. --- ### O7 – Die 3-2-1-Regel **Thema:** Backup – Prinzip **Punkte:** 2 **Typ:** `[ESSAY]` Erkläre die 3-2-1-Regel für Backups. Begründe, warum jede der drei Ziffern wichtig ist. > **Musterlösung:** 3 Kopien: Original + 2 Backups. Warum? Das Original kann kaputt gehen, das erste Backup auch – das zweite ist der Sicherheitspuffer. 2 verschiedene Medientypen (z. B. SSD + HDD, oder lokal + Cloud). Warum? Gleiche Medien haben gleiche Schwachstellen (z. B. Batch-Fehler bei HDDs derselben Charge). 1 Kopie an einem anderen Ort (Cloud, anderes Gebäude). Warum? Brand oder Wasserschaden zerstört alles vor Ort; Ransomware verschlüsselt alle angeschlossenen Laufwerke gleichzeitig. ---  ### O8 – Backup-Arten: Unterschiede **Thema:** Backup – Typen **Punkte:** 2 **Typ:** `[MATCH]` Ordne jedem Backup-Typ seine Beschreibung zu. | Backup-Typ | Beschreibung | |---|---| | Full (Vollständig) | Kompletter Datenbestand jedes Mal – einfach, aber langsam und platzhungrig | | Inkrementell | Nur Änderungen seit dem letzten Backup (egal welcher Art) – schnell, aber Wiederherstellung komplex | | 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.