diff --git a/archive/223015c_it_grundlagen_40pt.xml b/archive/223015c_it_grundlagen_40pt.xml new file mode 100644 index 0000000..45ce3ea --- /dev/null +++ b/archive/223015c_it_grundlagen_40pt.xml @@ -0,0 +1,469 @@ + + + + + + + + Q1 – Von-Neumann: Komponenten zuordnen + + Ordne jeder Komponente der Von-Neumann-Architektur ihre + Funktion zu.

+ ]]> + + Die 5 Komponenten: ALU (Rechnen), Steuerwerk (Befehle steuern), Speicherwerk (Programme UND Daten), Ein-/Ausgabe (Peripherie), Bus-System (Verbindung). + 3 + 0.25 + 0 + true + Rechenwerk (ALU)Führt arithmetische und logische Operationen durch. + SteuerwerkHolt, dekodiert und steuert die Ausführung von Befehlen. + SpeicherwerkEnthält sowohl Programme als auch Daten (Stored Program Concept). + Ein-/AusgabeSchnittstelle zu externen Geräten wie Tastatur, Bildschirm, Netzwerk. + Bus-SystemVerbindet alle Komponenten mittels Adress-, Daten- und Steuerbus. + + + + + Q2 – Von-Neumann vs. Harvard + + Ein Arduino-Mikrocontroller nutzt die Harvard-Architektur. + Ein modernes Smartphone nutzt eine (modifizierte) Von-Neumann-Architektur.

+

Warum ist die Harvard-Architektur für Echtzeit-Anwendungen + auf dem Arduino vorteilhafter, und was wäre der Nachteil, wenn + das Smartphone diese Architektur verwenden würde?

+ ]]> + + Harvard: separate Code/Daten-Speicher → paralleler Zugriff, schneller. Nachteil: Code und Daten nicht aus gleichem Speicher nahtlos mischbar → weniger Flexibilität, kein „Laden beliebiger Apps" wie bei Von-Neumann. + 2 + 0.25 + 0 + true + true + Genau – Speed vs. Flexibilität. + Nein – überlege, was getrennte Speicher für Code und Daten bedeuten. + separate Speicher für Code und Daten → paralleler Zugriff, schneller. Beim Smartphone wäre es schwieriger, beliebige Apps zu laden – weniger Flexibilität.]]> + + + + + + + + Q3 – Stored Program Concept + + Vor der Von-Neumann-Architektur mussten bei Maschinen wie dem + ENIAC Programme durch Umstecken von Kabeln eingegeben + werden.

+

Was konkret ermöglicht das Stored Program Concept, was + vorher nicht möglich war? Nenne zwei Beispiele.

+ ]]> + + Stored Program: Programme werden als Daten im Speicher abgelegt → austauschbar ohne Hardwareänderung. Ermöglicht: Betriebssysteme, Apps installieren/löschen, Multitasking, Updates. + 2 + 0.25 + 0 + true + true + Genau – Programme als Daten im Speicher = Flexibilität. + Nein – der Kern liegt darin, dass Programme im Speicher als Daten residieren. + Daten im Speicher abgelegt → z. B. Apps können installiert/gelöscht werden und Multitasking (mehrere Programme gleichzeitig) wird möglich.]]> + + + + + + + + Q4 – HTML: <head> vs. <body> + + Ein Student erstellt eine Webseite und platziert alles + im <body> – auch den <title> + und die <meta name="description">.

+

Welche zwei konkreten Konsequenzen hat das?

+ ]]> + + title und meta description gehören in <head>. Im <body>: (1) kein Titel im Browser-Tab / Suchergebnis, (2) keine Beschreibung für Suchmaschinen/Screen-Reader → SEO und Accessibility beeinträchtigt. + 2 + 0.25 + 0 + true + true + Genau – Metadaten im Body werden nicht als solche interpretiert. + Nein – <head> und <body> haben spezifische Funktionen. + keinen Titel an. (2) Suchmaschinen haben keine Beschreibung für das Snippet → schlechte SEO und Screen-Reader können die Seite nicht richtig vorlesen.]]> + <head> und <body>.]]> + + <meta charset> ist ein Problem – title und description funktionieren überall.]]> + + + + + Q5 – Barrierefreiheit: Curb-Cut-Effekt + + Der Curb-Cut-Effekt beschreibt, wie eine + barrierefreie Lösung – ursprünglich für Menschen mit Behinderung – + letztendlich allen zugute kommt.

+

Nenne ein konkretes Web-Beispiel, das diesen Effekt + demonstriert, und erkläre, wer davon profitiert.

+ ]]> + + Beispiel: Untertitel (für Gehörlose) → helfen auch in lauter Umgebung, beim Sprachlernen, bei Ton aus. Alt-Texte (für Screen-Reader) → helfen auch SEO. Semantisches HTML → besser für alle. + 3 + 0.25 + 0 + true + true + Genau – Barrierefreiheit hilft allen. + Nein – überlege, welche barrierefreien Maßnahmen auch Menschen ohne Behinderung nutzen. + Untertitel: Gedacht für Gehörlose, helfen aber auch in lauter Umgebung, beim Sprachlernen oder wenn der Ton aus ist – profitiert fast jedermann.]]> + + + Dark Mode: Gedacht für Sehbehinderung, hilft auch in dunkler Umgebung – Beispiel für den Curb-Cut-Effekt.]]> + + + + + Q6 – European Accessibility Act + + Der European Accessibility Act (EAA) ist seit + Juni 2025 in Kraft.

+

Was bedeutet das konkret für ein deutsches + E-Commerce-Unternehmen, das eine Webseite betreibt?

+ ]]> + + EAA verpflichtet u. a. E-Commerce-Anbieter zur Barrierefreiheit. Die Webseite muss WCAG-Standards erfüllen. Bei Verstoß: Bußgelder bis 100.000 € möglich. + 2 + 0.25 + 0 + true + true + Genau – rechtliche Pflicht zur Barrierefreiheit. + Nein – der EAA erstellt eine rechtliche Verpflichtung für bestimmte Sektoren. + muss barrierefreiheitstechnisch WCAG-Standards erfüllen – E-Commerce ist explizit im EAA geregelt. Bei Verstoß: Bußgelder möglich.]]> + + + + + + + + Q7 – TCP/IP: Protokoll → Schicht + + Ordne jedem Protokoll die richtige TCP/IP-Schicht zu.

+ ]]> + + Anwendung: HTTP, DNS, SMTP. Transport: TCP, UDP. Internet: IP. Netzzugang: Ethernet, WLAN. + 3 + 0.25 + 0 + true + HTTPAnwendung + TCPTransport + IPInternet + EthernetNetzzugang + DNSAnwendung + UDPTransport + + + + + Q8 – Encapsulation: Dateneinheit → Schicht + + Bei der Übertragung wird eine Nachricht von Schicht zu Schicht + verpackt (Encapsulation). Ordne jeder Dateneinheit die zugehörige + Schicht zu.

+ ]]> + + Daten (Anwendung) → Segment (Transport, +Ports) → Paket (Internet, +IP) → Frame (Netzzugang, +MAC). Merkhilfe: D-S-P-F. + 3 + 0.25 + 0 + true + DatenAnwendungsschicht – die eigentliche Nachricht (z. B. HTML-Seite). + SegmentTransportschicht – Daten + Ports und Sequenznummern. + PaketInternetschicht – Segment + IP-Adressen (Quelle und Ziel). + FrameNetzzugangsschicht – Paket + MAC-Adressen und Prüfsumme. + + + + + Q9 – IP vs. MAC vs. Port: Transfer-Szenario + + Dein Laptop sendet eine HTTPS-Anfrage an einen Webserver in + einem anderen Land. Das Paket durchläuft mehrere Router.

+

Welche der folgenden Aussagen über die Adressen auf dem + Weg ist korrekt?

+ ]]> + + IP-Adresse des Ziel-Servers bleibt konstant (global). MAC-Adresse ändert sich bei jedem Hop (lokal, nächster Router). Port 443 (HTTPS) bleibt konstant. + 3 + 0.25 + 0 + true + true + Genau – nur MAC ändert sich unterwegs. + Nein – überlege, welche Adresse bei jedem Hop neu gesetzt wird. + IP-Adresse des Servers bleibt konstant, der Port (443) ändert sich nicht – die MAC-Adresse wird an jedem Router neu gesetzt (lokal, ein Hop).]]> + + + + + + + + Q10 – TCP 3-Way-Handshake: Was passiert wäre? + + Der Client sendet ein SYN zum Server. + Das SYN-Paket geht verloren – es erreicht den Server nie.

+

Was passiert als nächstes, und warum wird keine + Verbindung aufgebaut?

+ ]]> + + Der Server erhält kein SYN → sendet kein SYN-ACK zurück → der Client bekommt keine Antwort → Verbindung wird nicht aufgebaut. TCP wird das SYN nach einem Timeout erneut senden (Neuübertragung). + 3 + 0.25 + 0 + true + true + Genau – ohne SYN beim Server: kein SYN-ACK, kein Handshake. + Nein – überlege, was der Server ohne SYN tun kann. + kein SYN-ACK → der Client erhält keine Antwort → keine Verbindung. Der Client wird das SYN nach einem Timeout erneut senden.]]> + + + + + + + + Q11 – TCP vs. UDP: Videostreaming + + Ein Videostreaming-Dienst sendet Daten an deinen Browser. + Ein einzelnes Paket geht verloren.

+

Warum wählt der Dienst UDP statt TCP, + obwohl ein Paket verloren geht?

+ ]]> + + Bei Echtzeit-Video ist Verzögerung schlimmer als Paketverlust. TCP würde das Paket erneut anfordern → Video friert. UDP ignoriert das Verlust → kurzer Artefakt, Video läuft weiter. + 2 + 0.25 + 0 + true + true + Genau – bei Echtzeit ist Verzögerung ärger als Verlust. + Nein – überlege, was TCP bei einem verlorenen Paket tun würde. + 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.]]> + + + + + + + + Q12 – HTTP-Methoden: Szenario + + Ein Nutzer aktualisiert sein Profilbild auf einer Webseite. + Das Foto wird zum Server gesendet und das alte Bild + ersetzt.

+

Welche HTTP-Methode wird für diese Operation verwendet, + und warum nicht GET?

+ ]]> + + PUT – Daten ersetzen (eine existierende Ressource wird überschrieben). GET ruft nur Daten ab, sendet keine Daten zum Server. + 2 + 0.25 + 0 + true + true + Genau – PUT für das Ersetzen einer Ressource. + Nein – überlege, was „ersetzen" in HTTP bedeutet. + PUT – ersetzt eine existierende Ressource. GET ruft nur Daten ab und sendet keine Daten zum Server.]]> + GET – GET kann auch Daten senden, wenn eine URL mit Parameter verwendet wird.]]> + POST – POST ist immer für das Ersetzen von Daten zuständig.]]> + DELETE – DELETE sendet das neue Foto und löscht gleichzeitig das alte.]]> + + + + + Q13 – HTTP Status-Codes: Fehlerdiagnose + + Du rufst eine Webseite auf und der Browser zeigt folgende + Fehlermeldung an:

+ 
HTTP/1.1 503 Service Unavailable
+

Was bedeutet dieser Code, und wer ist für die Behebung + zuständig – du oder der Betreiber der Webseite?

+ ]]> + + 503 ist ein 5xx-Code = Server-Fehler. Der Server ist überlastet oder temporär nicht verfügbar. Verantwortung liegt beim Serverbetreiber, nicht beim Nutzer. + 2 + 0.25 + 0 + true + true + Genau – 5xx = Server-Problem, nicht dein Fehler. + Nein – überlege, was die Ziffer „5" im Code bedeutet. + Server-Fehler: Der Server ist überlastet oder temporär nicht verfügbar. Verantwortung liegt beim Betreiber – du kannst nur später erneut versuchen.]]> + + + + + + + + Q14 – DNS: Rolle im Ablauf + + Du gibst https://hdm-stuttgart.de in die + Adresszeile ein.

+

Was passiert vor dem TCP-Handshake, und warum + ist dieser Schritt zwingend nötig?

+ ]]> + + DNS-Auflösung: Der Name „hdm-stuttgart.de" wird in eine IP-Adresse umgewandelt. TCP braucht eine IP-Adresse – names können nicht direkt verbunden werden. + 2 + 0.25 + 0 + true + true + Genau – DNS vor TCP, Name → IP. + Nein – überlege, was TCP als Zieladresse braucht. + DNS-Auflösung: Der Name hdm-stuttgart.de wird in eine IP-Adresse umgewandelt. TCP kann nur zu IP-Adressen Verbindungen aufbauen, nicht zu Namen.]]> + + + + + + + + Q15 – CSS Spezifität: Welche Regel gewinnt? + + Gegeben folgender CSS-Code:

+ 
+p           { color: blue; }      /* (A) */
+.highlight  { color: green; }     /* (B) */
+#main       { color: red; }       /* (C) */
+
+

Ein Element <p class="highlight" id="main">Text</p> + wird angezeigt.
+ Welche Farbe zeigt der Text an, und warum?

+ ]]> + + Spezifität: ID (0,1,0,0) > Klasse (0,0,1,0) > Element (0,0,0,1). Alle drei Regeln treffen das Element – ID #main gewinnt → rot. + 2 + 0.25 + 0 + true + true + Genau – ID gewinnt durch höchste Spezifität. + Nein – überlege die Spezifitätswerte: ID > Klasse > Element. + Rot – die ID-Regel #main hat die höchste Spezifität (0,1,0,0) und gewinnt über Klasse (0,0,1,0) und Element (0,0,0,1).]]> + Blau – die Element-Regel steht zuerst im Code und hat daher Vorrang.]]> + Grün – Klassen-Selektoren haben immer Vorrang vor IDs.]]> + Rot – die letzte Regel im Code gewinnt immer, unabhängig vom Selektor-Typ.]]> + + + + + Q16 – Responsive Design: Mobile First + + Ein Developer schreibt folgendes CSS:

+ 
+.container { background: white; }
+
+@media (min-width: 768px) {
+    .container { background: blue; }
+}
+
+@media (min-width: 1024px) {
+    .container { background: green; }
+}
+
+

Welche Farbe hat .container bei einem + Bildschirm von 900 px Breite, und warum?

+ ]]> + + Mobile First: Basis = white. Bei 900px greift min-width: 768px → blue. min-width: 1024px greift NICHT (900 < 1024). Ergebnis: blau. + 2 + 0.25 + 0 + true + true + Genau – 768px greift, 1024px nicht. + Nein – überlege, welche min-width-Bedingungen bei 900px erfüllt sind. + Blau – bei 900 px greift min-width: 768px (900 ≥ 768), aber min-width: 1024px greift nicht (900 < 1024).]]> + Weiß – Media-Queries gelten nur ab 1024 px, darunter bleibt immer die Basis-Farbe.]]> + Grün – die letzte Media-Query überschreibt immer alle vorherigen.]]> + Weiß – bei 900 px greift keine Media-Query, da 900 zwischen den beiden Breakpoints liegt.]]> + + + + + Q17 – Zusammen: Reihenfolge eines HTTPS-Aufrufs + + Du gibst eine URL ein. Welche Reihenfolge der Schritte + ist korrekt?

+ ]]> + + Korrekte Reihenfolge: (1) DNS-Auflösung, (2) TCP 3-Way-Handshake, (3) HTTP-Request (GET), (4) HTTP-Response (200 OK + HTML). + 1 + 0.25 + 0 + true + true + Genau – DNS → TCP → HTTP Request → HTTP Response. + Nein – an erster Stelle steht immer die DNS-Auflösung. + + + + + + + + + Q18 – CSS: 100 Element-Selektoren vs. 1 Klasse + + Es gibt zwei CSS-Regeln für ein <p>-Element:

+ 
+p p p p p p p p p p  { color: blue; }   /* 100× Element-Selektor */
+.highlight           { color: red; }    /* 1× Klasse */
+
+

Das Element hat die Klasse highlight. + Welche Farbe gewinnt?

+ ]]> + + Eine einzelne Klasse (0,0,1,0) schlägt immer hundert Element-Selektoren (0,0,0,100). Spezifität wird nicht additiv „aufgezählt" – die Stelle zählt als Einheit. + 1 + 0.25 + 0 + true + true + Genau – eine Klasse gewinnt immer gegen beliebig viele Elemente. + Nein – Spezifität funktioniert nicht durch Addition innerhalb einer Stelle. + Rot – eine Klasse (0,0,1,0) gewinnt immer gegen beliebig viele Element-Selektoren (0,0,0,n). Spezifität-Stellen überschreiben sich, nicht addieren.]]> + Blau – 100 Element-Selektoren ergeben 0,0,0,100 = höhere Spezifität als 0,0,1,0.]]> + Blau – die längere Regel (mehr Selektoren) hat immer höhere Spezifität.]]> + + + + diff --git a/archive/klausurfragen_it+dateiformate.md b/archive/klausurfragen_it+dateiformate.md new file mode 100644 index 0000000..68f6e08 --- /dev/null +++ b/archive/klausurfragen_it+dateiformate.md @@ -0,0 +1,1829 @@ +# 223015c – Fragenkatalog (Question Pool) +**IT-Grundlagen · HdM Stuttgart · M. Czechowski** +**Ziel: ~100 Fragen, hohe Varianz, semestraler Los-Mechanismus** + +--- + +> **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 – Bus-Typen identifizieren +**Thema:** Von-Neumann – Bus-System im Detail +**Punkte:** 2 +**Typ:** `[MATCH]` + +Ordne jedem Bus-Typ seine Funktion zu. + +| Bus | Funktion | +|---|---| +| Adressbus | Übermittelt die Speicheradresse, an der Daten gelesen/geschrieben werden | +| Datenbus | Führt die eigentlichen Daten zwischen CPU und Speicher | +| Steuerbus | Übermittelt Steuersignale (Lesen/Schreiben, Takt) | + +> **Feedback:** Adressbus = „Wo?", Datenbus = „Was?", Steuerbus = „Wie/Wann?" + +--- + +### A4 – Von-Neumann vs. Harvard: Kern-Unterschied +**Thema:** Architektur-Vergleich – Konzept +**Punkte:** 2 +**Typ:** `[MC]` + +Was ist der fundamentale strukturelle Unterschied zwischen der Von-Neumann- und der Harvard-Architektur? + +- [ ] Harvard verwendet einen schnelleren Bus, Von-Neumann einen langsameren. +- [x] **Bei Harvard sind Programm- und Datenspeicher physisch getrennt; bei Von-Neumann teilen sie denselben Speicher.** ✅ +- [ ] Von-Neumann hat mehr Prozessorkerne als Harvard. +- [ ] Harvard verzichtet komplett auf einen Bus – die Komponenten kommunizieren drahtlos. + +> **Feedback:** Der eine Unterschied: ein Speicher (Von-Neumann) vs. zwei separate Speicher (Harvard). Alles andere folgt aus diesem Prinzip. + +--- + +### A5 – Harvard: Vorteil für Echtzeit erkläre +**Thema:** Von-Neumann vs. Harvard – Transfer/Begründung +**Punkte:** 2 +**Typ:** `[ESSAY]` + +Ein Arduino nutzt die Harvard-Architektur. Erkläre in 2–3 Sätzen, warum diese Architektur für Echtzeit-Anwendungen auf einem Mikrokontroller vorteilhafter ist als die Von-Neumann-Architektur. + +> **Musterlösung:** Harvard trennt Code- und Datenspeicher → CPU kann gleichzeitig einen Befehl aus dem Programmspeicher lesen UND auf Daten im Datenspeicher zugreifen (paralleler Zugriff). Bei Von-Neumann konkurrieren Befehle und Daten um denselben Bus →sequentiell → langsamere Zykluszeit. Bei Echtzeit-Anwendungen zählt jeder Nanosekunde. + +--- + +### A6 – Von-Neumann-Flaschenhals: Was, warum, wie lösen? +**Thema:** Von-Neumann-Bottleneck – Transfer +**Punkte:** 2 +**Typ:** `[ESSAY]` + +Beschreibe den „Von-Neumann-Flaschenhals" (Bottleneck). Erkläre konkret, woher er entsteht und nenne eine Maßnahme, die moderna Architekten einsetzen, um ihn zu mildern. + +> **Musterlösung:** CPU ist schneller als der Datentransfer über den gemeinsamen Bus. Da Befehle und Daten sich denselben Bus teilen, müssen sie nacheinander geladen werden → Engpass. Lösung: Cache-Speicher direkt an der CPU (L1/L2) reduziert Bus-Zugriffe drastisch. + +--- + +### A7 – Flaschenhals: Richtig oder Falsch? +**Thema:** Von-Neumann-Bottleneck – Verständnis prüfen +**Punkte:** 1 +**Typ:** `[MC]` + +„Der Von-Neumann-Flaschenhals entsteht, weil der Speicher langsamer als die CPU ist und Befehle und Daten sich den gleichen Bus teilen müssen." + +Diese Aussage ist … + +- [x] **…korrekt.** ✅ +- [ ] …falsch – der Flaschenhals liegt bei der Ein-/Ausgabe, nicht beim Bus. +- [ ] …falsch – In der Von-Neumann-Architektur haben Befehle und Daten separate Busse. +- [ ] …falsch – Die CPU ist immer langsamer als der Bus. + +> **Feedback:** Genau diese Kombination (gemeinsamer Bus + Geschwindigkeitsdifferenz) definiert den Flaschenhals. + +--- + +### A8 – Stored Program Concept: Was ermöglicht es? +**Thema:** Stored Program Concept – Konzept verstehen +**Punkte:** 2 +**Typ:** `[MM]` (Mehrfachauswahl) + +Welche der folgenden Aussagen beschreiben korrekt, was das Stored Program Concept ermöglicht? (Mehrere Antworten möglich) + +- [x] **Apps können ohne Hardwareänderung installiert und gelöscht werden.** ✅ +- [x] **Multitasking wird möglich, da mehrere Programme im Speicher gleichzeitig residieren können.** ✅ +- [ ] Die CPU kann jetzt selbst neue Befehle erfinden. +- [ ] Der Speicher wird durch das Stored Program Concept doppelt so groß. +- [x] **Betriebssysteme können sich selbst aktualisieren.** ✅ +- [ ] Programme müssen weiterhin durch Umstecken von Kabeln eingegeben werden. + +> **Feedback:** Kern: Programme werden als Daten im Speicher abgelegt → austauschbar ohne Hardware-Änderung. Das öffnet Tür zu: Apps, Multitasking, Updates, Betriebssysteme. + +--- + +### A9 – Stored Program Concept: Lückentext +**Thema:** Stored Program Concept – Terminologie +**Punkte:** 1 +**Typ:** `[CLOZE]` + +Vor der Von-Neumann-Architektur mussten Programme durch [[1:Umstecken von Kabeln]] eingegeben werden. Das Stored Program Concept löst das dadurch, dass Programme als [[2:Daten im Speicher]] abgelegt werden. Das bedeutet, dass [[3:keine Hardwareänderung]] nötig ist, um ein anderes Programm auszuführen. + +> **Feedback:** Die drei Schlüsselbegriffe zusammen erzählen die Story: vorher Kabel, nachher Daten im Speicher, Konsequenz: Hardware-unabhängig. + +--- + +### A10 – Stored Program Concept: Vorher vs. nachher +**Thema:** Stored Program Concept – Transfer historisch +**Punkte:** 2 +**Typ:** `[ESSAY]` + +Der ENIAC war einer der ersten elektronischen Computer. Erkläre in einem kurzen Satz, wie dort Programme „eingegeben" wurden, und erkläre anschließend, was konkret das Stored Program Concept daran änderte. + +> **Musterlösung:** Beim ENIAC mussten Programme durch Umstecken von Kabeln (Verdrahtung) physisch eingegeben werden – jedes neue Programm erforderte eine manuelle Umkonfiguration der Hardware. Das Stored Program Concept speichert Programme als Daten im selben Speicher wie die Arbeitsdaten → austauschbar per Software, keine Verdrahtung nötig. + +--- +--- + + + +## 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 | + +> **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 deinem 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 deinen 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 Benutzer 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]` + +Ein Nutzer 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]` + +Ein Nutzer aktualisiert sein Profilbild – das alte Bild wird durch ein neues ersetzt. Welche HTTP-Methode? + +- [ ] GET – GET kann auch Daten senden. +- [x] **PUT – ersetzt eine existierende Ressource.** ✅ +- [ ] 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]` + +Ein Nutzer löscht einen von ihm erstellten Kommentar auf einer Webseite. Welche HTTP-Methode wird der Browser im Hintergrund verwenden? + +- [ ] GET – GET kann auch Löschvorgänge auslösen. +- [ ] POST – POST ist die Standardmethode für alle Änderungen. +- [ ] 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 – HTTP-Methoden: Freitext-Beschreibung +**Thema:** HTTP-Methoden – Konzept zusammenfassen +**Punkte:** 2 +**Typ:** `[ESSAY]` + +Erkläre in einem kurzen Absatz, warum es in HTTP mehrere Methoden gibt (GET, POST, PUT, DELETE) und nicht einfach eine einzige „Sende-Funktion". Nutze ein konkretes Beispiel. + +> **Musterlösung:** Eine einzelne Methode könnte nicht zwischen „Daten lesen", „Daten erstellen", „Daten ersetzen" und „Daten löschen" unterscheiden – der Server wüsste nicht, was er tun soll. Mit separaten Methoden kann der Server allein anhand der Methode + URL entscheiden: GET `/users/5` → Benutzer 5 anzeigen; DELETE `/users/5` → Benutzer 5 löschen. Das ist sauber, zustandslos und standardisiert. + +--- + +### C6 – 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. + +--- + +### C7 – Status-Codes: Categorisierung +**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 des Nutzers war fehlerhaft | +| 5xx | Server-Fehler – der Server hat ein Problem | + +> **Feedback:** Die erste Ziffer = Kategorie. 200 OK, 301 Moved, 404 Not Found, 503 Service Unavailable – die Kategorie sagt dir sofort, wo das Problem liegt. + +--- + +### C8 – 503: Server-Fehler erkläre +**Thema:** HTTP Status-Codes – 5xx Transfer +**Punkte:** 1 +**Typ:** `[MC]` + +Du rufst eine Webseite auf und erhältst `HTTP/1.1 503 Service Unavailable`. Was bedeutet das? + +- [ ] Du hast 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. Du als Client kannst nur später erneut versuchen. Der Betreiber muss das lösen. + +--- + +### C9 – 404: Wer hat „Schuld"? +**Thema:** HTTP Status-Codes – 4xx Transfer +**Punkte:** 1 +**Typ:** `[MC]` + +Du erhältst einen 404-Fehler. Wer ist für die Ursache verantwortlich? + +- [ ] Der Server ist abgestürzt. +- [ ] Das Internet ist ausgefallen. +- [x] **Der Client (Nutzer) – eine URL wurde angefordert, die nicht existiert (Tippfehler oder veralteter Link).** ✅ +- [ ] Der DNS-Server konnte den Namen nicht auflösen. + +> **Feedback:** 4xx = Client-Fehler. Der Server funktioniert perfekt, er sagt nur: „Das, was du anforderst, habe ich nicht." + +--- + +### C10 – 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 | +|---|---| +| Du rufst eine Seite auf, die seit letztem Jahr auf eine neue URL umgeleitet wurde | 301 Moved Permanently | +| Eine Webseite lädt erfolgreich | 200 OK | +| Du gibst 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 (dein Fehler). 503 = Server-Problem (Betreiber). + +--- + +### C11 – 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]` + +Du gibst `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]` + +Du gibst 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). + +--- + +### E3 – Gesamtablauf: Freitext +**Thema:** Gesamtablauf – Transfer beschreiben +**Punkte:** 3 +**Typ:** `[ESSAY]` + +Du gibst `https://example.com` in deinen Browser ein. Beschreibe jeden Schritt vom Eintippen der URL bis zum Anzeigen der Webseite. Erkläre kurz, was in jedem Schritt passiert und warum dieser Schritt nötig ist. + +> **Musterlösung:** (1) DNS: `example.com` → IP-Adresse (z. B. 93.184.216.34). Nötig, weil TCP nur IPs kennt. (2) TCP-Handshake: SYN → SYN-ACK → ACK. Stellt eine zuverlässige Verbindung her. (3) TLS-Handshake (bei HTTPS): Verschlüsselung vereinbaren. (4) HTTP GET: Browser fordert die HTML-Seite an. (5) HTTP 200 OK: Server sendet die Seite zurück. Browser rendert HTML/CSS/JS. + +--- +--- + +## BLOCK F – HTML-Grundlagen + +--- + +### F1 – `` vs. ``: Was passiert bei Fehler? +**Thema:** HTML-Struktur – head/body +**Punkte:** 2 +**Typ:** `[MC]` + +Ein Student platziert `` und `<meta name="description">` im `<body>` statt im `<head>`. Welche zwei Konsequenzen hat das? + +- [ ] Kein Problem – Browser ignorieren die Unterscheidung. +- [x] **(1) Der Browser-Tab zeigt keinen Titel an. (2) Suchmaschinen haben keine Beschreibung für das Snippet → schlechte SEO, Screen-Reader können die Seite nicht richtig vorlesen.** ✅ +- [ ] (1) Der Titel wird im Seiteninhalt sichtbar angezeigt. (2) Die description wird als Text auf der Seite eingeblendet. +- [ ] Nur das Fehlen von `<meta charset>` ist ein Problem. + +> **Feedback:** `<head>` = Metadaten (unsichtbar für den Nutzer, sichtbar für Browser/Maschinen). `<body>` = sichtbarer Inhalt. Title und description im Body werden nicht als Metadaten interpretiert. + +--- + +### 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 der Nutzer nicht direkt sieht (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 – Spezifität: Zahlenwerte zuordnen +**Thema:** CSS Spezifität – Werte +**Punkte:** 2 +**Typ:** `[MATCH]` + +Ordne jedem Selektor-Typ seinen Spezifitätswert zu. + +| Selektor-Typ | Spezifitätswert | +|---|---| +| Inline-Style (`style="..."`) | 1,0,0,0 | +| ID (`#main`) | 0,1,0,0 | +| Klasse (`.highlight`) | 0,0,1,0 | +| Element (`p`) | 0,0,0,1 | + +> **Feedback:** Von höchster zu niedrigster: Inline > ID > Klasse > Element. Die Stelle zählt als Einheit – sie werden nicht aufgezählt. + +--- + +### G3 – Spezifität: Edge Case – 100 Elemente vs. 1 Klasse +**Thema:** CSS Spezifität – Bonusfrage +**Punkte:** 1 +**Typ:** `[MC]` + +Zwei CSS-Regeln: +``` +p p p p p p p p p p { color: blue; } /* 100× Element */ +.highlight { color: red; } /* 1× Klasse */ +``` +Das Element hat die Klasse `highlight`. Welche Farbe gewinnt? + +- [ ] Blau – 100 Element-Selektoren = höhere Spezifität als eine Klasse. +- [x] **Rot – eine Klasse (0,0,1,0) gewinnt immer gegen beliebig viele Element-Selektoren (0,0,0,n).** ✅ +- [ ] Blau – die längere Regel gewinnt immer. +- [ ] Unentschieden – gleiche Spezifität. + +> **Feedback:** Spezifität wird nicht additiv „aufgezählt" innerhalb einer Stelle. Eine Klasse = eine Stelle höher, egal wie viele Elemente. + +--- + +### G4 – `!important` vs. ID +**Thema:** CSS – `!important` +**Punkte:** 2 +**Typ:** `[MC]` + +``` +#main { color: red; } +p { color: blue !important; } +``` +Welche Farbe hat `<p id="main">`? + +- [ ] Rot – ID ist immer spezifischer. +- [ ] Lila – die Farben mischen sich. +- [x] **Blau – `!important` durchbricht die normale Spezifitäts-Kaskade, gewinnt sogar gegen IDs.** ✅ +- [ ] Rot – `!important` wird von modernen Browsern ignoriert. + +> **Feedback:** `!important` = „Atombombe" im CSS. Überschreibt normale Spezifität. Deshalb: sehr sparsam einsetzen. + +--- + +### G5 – `!important`: Wann und warum vermeiden? +**Thema:** CSS – `!important` Transfer +**Punkte:** 2 +**Typ:** `[ESSAY]` + +Erkläre, was `!important` in CSS tut, und begründe, warum es in der Praxis als „Code Smell" gilt. Nenne eine bessere Alternative. + +> **Musterlösung:** `!important` setzt eine Regel auf höchste Priorität, unabhängig von der Spezifität. In der Praxis wird es als Code Smell betrachtet, weil es die normale Kaskade durchbreitet – wenn viele Regeln `!important` haben, wird die Reihenfolge kaum noch vorhersagbar. Bessere Alternative: Spezifität bewusst erhöhen (z. B. durch eine passendere Selektor-Kombination) oder die CSS-Struktur überarbeiten. + +--- + +### G6 – 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. + +--- + +### G7 – 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. + +--- + +### G8 – 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 Nutzer mobil zugreift und es forced-mobile-first die Grundlage für progressive Enhancement bietet. + +--- +--- + +## BLOCK H – Barrierefreiheit + +--- + +### H1 – Curb-Cut-Effekt: Beispiel identifizieren +**Thema:** Barrierefreiheit – Curb-Cut-Effekt +**Punkte:** 2 +**Typ:** `[MC]` + +Der Curb-Cut-Effekt beschreibt, wie eine barrierefreie Lösung letztendlich allen zugute kommt. Welches Beispiel demonstriert diesen Effekt? + +- [ ] Barrierefreie Webseiten sind langsamer zu laden. +- [ ] Der Curb-Cut-Effekt bedeutet, dass barrierefreie Seiten nur für Menschen mit Behinderung nützlich sind. +- [x] **Untertitel: Gedacht für Gehörlose, helfen aber auch in lauter Umgebung, beim Sprachlernen oder wenn der Ton aus ist.** ✅ +- [ ] Alt-Texte verlverlängern die Ladezeit einer Webseite. + +> **Feedback:** Untertitel = klassisches Curb-Cut-Beispiel. Gedacht für eine Gruppe, nützlich für alle. Weitere Beispiele: Alt-Texte (Screen-Reader → auch SEO), semantisches HTML (Zugänglichkeit → auch Wartbarkeit). + +--- + +### H2 – Curb-Cut-Effekt: Freitext +**Thema:** Barrierefreiheit – Curb-Cut-Effekt Transfer +**Punkte:** 2 +**Typ:** `[ESSAY]` + +Erkläre das Konzept des Curb-Cut-Effekts in einem kurzen Absatz. Nenne zwei konkrete Web-Beispiele und erkläre jeweils, wer ursprünglich die Zielgruppe war und wer letztendlich davon profitiert. + +> **Musterlösung:** Der Curb-Cut-Effekt beschreibt, wie eine Maßnahme, die primär für Menschen mit Behinderung konzipiert wurde, am Ende allen zugute kommt. (1) Untertitel: primär für Gehörlose – helfen auch in lauter Umgebung, beim Sprachlernen, wenn der Ton aus ist. (2) Alt-Texte für Bilder: primär für Screen-Reader-Nutzer – helfen auch Suchmaschinen (SEO), da sie die Bilder „verstehen" können. + +--- + +### H3 – POUR-Prinzip: Verletzung identifizieren +**Thema:** WCAG – POUR-Prinzipien +**Punkte:** 2 +**Typ:** `[MC]` + +Die WCAG basieren auf vier Prinzipien (POUR). Welches Szenario beschreibt eine Verletzung des Prinzips „Bedienbarkeit" (Operable)? + +- [ ] Der Textkontrast ist zu gering (grau auf hellgrau). +- [x] **Eine Navigation funktioniert nur per Maus (Hover), ist aber per Tastatur (Tab-Taste) nicht erreichbar.** ✅ +- [ ] Der Inhalt ist in sehr komplizierter Fachsprache geschrieben. +- [ ] Die Webseite stürzt in alten Browsern ab. + +> **Feedback:** „Bedienbar" = die Schnittstelle kann von jedem genutzt werden, auch ohne Maus (nur Tastatur). Kontrast gehört zu „Wahrnehmbar" (Perceivable). Fachsprache gehört zu „Verständlich" (Understandable). + +--- + +### H4 – POUR: Prinzip zum Szenario zuordnen +**Thema:** WCAG – POUR-Zuordnung +**Punkte:** 2 +**Typ:** `[MATCH]` + +Ordne jedem Szenario das verletzten POUR-Prinzip zu. + +| Szenario | Verletztes Prinzip | +|---|---| +| Ein Bild hat kein Alt-Text – ein Screen-Reader kann es nicht beschreiben | Wahrnehmbar (Perceivable) | +| Ein Formulareingabefeld kann nur mit der Maus erreicht werden | Bedienbar (Operable) | +| Ein automatisch abspielender Ton hat keine Pause-Taste | Bedienbar (Operable) | +| Der Seitentext ist in extrem kleiner Schrift und kann nicht vergrößert werden | Wahrnehmbar (Perceivable) | + +> **Feedback:** Wahrnehmbar = kann der Nutzer es sehen/hören/erkennen? Bedienbar = kann der Nutzer es steuern? Verständlich = kann der Nutzer es verstehen? Robust = funktioniert es mit verschiedenen Technologien? + +--- + +### H5 – POUR: Prinzipien beschreiben +**Thema:** WCAG – POUR Konzept +**Punkte:** 2 +**Typ:** `[ESSAY]` + +Nenne die vier POUR-Prinzipien der WCAG und erkläre in einem Satz pro Prinzip, was es bedeutet. Nenne je ein konkretes Web-Beispiel für eine Verletzung. + +> **Musterlösung:** (1) Perceivable (Wahrnehmbar): Informationen müssen für jeden wahrnehmbar sein. Verletzung: Bild ohne Alt-Text. (2) Operable (Bedienbar): Die Schnittstelle muss von jedem bedient werden können. Verletzung: Navigation nur per Maus. (3) Understandable (Verständlich): Der Inhalt muss verständlich sein. Verletzung: Kein `<lang>`-Attribut → Screen-Reader liest in falscher Sprache vor. (4) Robust (Robust): Der Inhalt muss mit verschiedenen Technologien funktionieren. Verletzung: Proprietäres JavaScript, das nur in Chrome läuft. + +--- +--- + +## BLOCK I – Zusammenfassung-Fragen (Übergreifend) + +--- + +### I1 – Gesamtablauf: Wahl der richtigen Methode +**Thema:** HTTP + TCP + DNS zusammen +**Punkte:** 3 +**Typ:** `[ESSAY]` + +Ein Nutzer klickt auf einen „Neuen Eintrag erstellen"-Button einer Webanwendung. Beschreibe vom Klick bis zur Antwort des Servers, welche Protokolle beteiligt sind und welche HTTP-Methode verwendet wird. + +> **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]` + +Du rufst eine Webseite auf und erhältst 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 du es erkennst. + +> **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 | +| MKV | Container | +| AAC | Codec | +| WebM | Container | +| AV1 | Codec | +| VP9 | Codec | + +> **Feedback:** Container = Dateiformat, das Streams zusammenpackt (MP4, MKV, WebM). Codec = Kompressionsalgorithmus für einen bestimmten Stream (H.264, AV1, AAC). + +--- +--- + +## 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) voll auf, 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. + +--- + +### L10 – JPEG Quality: Sweet Spot +**Thema:** JPEG – Praktische Qualitätswahl +**Punkte:** 1 +**Typ:** `[MC]` + +Bei welcher JPEG-Quality sind Artefakte für die meisten Menschen kaum sichtbar, aber die Datei trotzdem deutlich kleiner? + +- [ ] Quality 30 – hier beginnt die Kompression erst. +- [ ] Quality 100 – nur hier ist JPEG verlustfrei. +- [x] **Quality 85–90 – etwa 10× Kompression, für Menschen kaum unterscheidbar vom Original.** ✅ +- [ ] Quality 50 – der optimale Kompromiss für alle Anwendungen. + +> **Feedback:** Quality 85–90 = der „Sweet Spot". Quality 100 ≠ verlustfrei (immer noch lossy!). Für Web/Social Media: 60–80 oft ausreichend. Für Archivierung: 90–100 oder besser PNG/RAW. + +--- +--- + +## 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äre, wann du PNG und wann JPEG wählen würdest. Nenne je zwei konkrete Anwendungsfälle und begründe deine 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 Videogespeicherung 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 Videogespeicherung? + +- [ ] 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 Videogespeicherung 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]` + +Du versuchst, 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. + +--- + +> **Ende des Katalogs – Aktuell: ~120 Fragen across 15 Blöcke.** +> Abgedeckte Themen: Von-Neumann, TCP/IP, HTTP, DNS, Gesamtablauf, HTML, CSS, Barrierefreiheit, Dateiformate-Grundbegriffe, Bildformate (Raster/Vektor/JPEG/PNG/GIF/WebP/SVG), Video-Kompression, Speichermedien, Schnittstellen, Dateisysteme, Backup. diff --git a/archive/klausurfragen_it.md b/archive/klausurfragen_it.md new file mode 100644 index 0000000..e1a5fd9 --- /dev/null +++ b/archive/klausurfragen_it.md @@ -0,0 +1,439 @@ +Here is the quiz converted into a clean, readable Markdown format. I have preserved the structure, code snippets, and feedback for each question. + +--- + +# 223015c – Grundlagen IT- und Internettechnik + +**WS 2025/26 – Michael Czechowski – HdM Stuttgart** +**40 Punkte / 40 Minuten** + +--- + +### Q1 – Von-Neumann: Komponenten zuordnen (3 pt) + +**Ordne jeder Komponente der Von-Neumann-Architektur ihre Funktion zu.** + +* **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 (Stored Program Concept). +* **Ein-/Ausgabe:** Schnittstelle zu externen Geräten wie 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). + +--- + +### Q2 – Von-Neumann vs. Harvard (2 pt) + +**Ein Arduino-Mikrocontroller nutzt die Harvard-Architektur. Ein modernes Smartphone nutzt eine (modifizierte) Von-Neumann-Architektur.** + +**Warum ist die Harvard-Architektur für Echtzeit-Anwendungen auf dem Arduino vorteilhafter, und was wäre der Nachteil, wenn das Smartphone diese Architektur verwenden würde?** + +* [ ] Harvard ist langsamer, aber sicherer – daher für Echtzeit geeignet. Smartphones brauchen die Geschwindigkeit nicht. +* [x] **Harvard nutzt separate Speicher für Code und Daten → paralleler Zugriff, schneller. Beim Smartphone wäre es schwieriger, beliebige Apps zu laden – weniger Flexibilität.** ✅ +* [ ] Beide Architekturen sind funktional identisch – der Unterschied liegt nur im Gehäuse. +* [ ] Von-Neumann ist schneller durch gemeinsamen Speicher. Harvard wird gewählt, weil Echtzeit-Apps weniger Speicher brauchen. + +> **Feedback:** Harvard: separate Code/Daten-Speicher → paralleler Zugriff, schneller. Nachteil: Code und Daten nicht aus gleichem Speicher nahtlos mischbar → weniger Flexibilität, kein „Laden beliebiger Apps" wie bei Von-Neumann. + +--- + +### Q3 – Stored Program Concept (2 pt) + +**Vor der Von-Neumann-Architektur mussten bei Maschinen wie dem ENIAC Programme durch Umstecken von Kabeln eingegeben werden.** + +**Was konkret ermöglicht das Stored Program Concept, was vorher nicht möglich war? Nenne zwei Beispiele.** + +* [ ] Programme werden auf separater Hardware gespeichert → die Hauptspeicher-Kapazität wird ums Doppelte gesteigert. +* [ ] Die Hardware kann jetzt selbst Befehle erfinden – kein Mensch muss mehr programmieren. +* [x] **Programme werden als Daten im Speicher abgelegt → z. B. Apps können installiert/gelöscht werden und Multitasking (mehrere Programme gleichzeitig) wird möglich.** ✅ +* [ ] Nur ein einzelnes Programm kann gleichzeitig laufen, aber es kann schneller geladenen werden. + +> **Feedback:** Stored Program: Programme werden als Daten im Speicher abgelegt → austauschbar ohne Hardwareänderung. Ermöglicht: Betriebssysteme, Apps installieren/löschen, Multitasking, Updates. + +--- + +### Q4 – HTML: `<head>` vs. `<body>` (2 pt) + +**Ein Student erstellt eine Webseite und platziert *alles* im `<body>` – auch den `<title>` und die `<meta name="description">`.** + +**Welche zwei konkreten Konsequenzen hat das?** + +* [ ] Kein Problem – Browser ignorieren die Unterscheidung zwischen `<head>` und `<body>`. +* [x] **(1) Der Browser-Tab zeigt keinen Titel an. (2) Suchmaschinen haben keine Beschreibung für das Snippet → schlechte SEO und 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 – title und description funktionieren überall. + +> **Feedback:** title und meta description gehören in `<head>`. Im `<body>`: (1) kein Titel im Browser-Tab / Suchergebnis, (2) keine Beschreibung für Suchmaschinen/Screen-Reader → SEO und Accessibility beeinträchtigt. + +--- + +### Q5 – Barrierefreiheit: Curb-Cut-Effekt (3 pt) + +**Der Curb-Cut-Effekt beschreibt, wie eine barrierefreie Lösung – ursprünglich für Menschen mit Behinderung – letztendlich *allen* zugute kommt.** + +**Nenne ein konkretes Web-Beispiel, das diesen Effekt demonstriert, und erkläre, wer davon profitiert.** + +* [ ] Barrierefreie Webseiten sind langsamer zu laden – der Curb-Cut-Effekt beschreibt diesen negativen Nebeneffekt. +* [ ] Der Curb-Cut-Effekt bedeutet, dass barrierefreie Seiten nur für Menschen mit Behinderung nützlich sind. +* [x] **Untertitel: Gedacht für Gehörlose, helfen aber auch in lauter Umgebung, beim Sprachlernen oder wenn der Ton aus ist – profitiert fast jedermann.** ✅ +* [ ] **Dark Mode:** Gedacht für Sehbehinderung, hilft auch in dunkler Umgebung – Beispiel für den Curb-Cut-Effekt. + +> **Feedback:** Beispiel: Untertitel (für Gehörlose) → helfen auch in lauter Umgebung, beim Sprachlernen, bei Ton aus. Alt-Texte (für Screen-Reader) → helfen auch SEO. Semantisches HTML → besser für alle. + +--- + +### Q6 – European Accessibility Act (2 pt) + +**Der European Accessibility Act (EAA) ist seit Juni 2025 in Kraft.** + +**Was bedeutet das konkret für ein deutsches E-Commerce-Unternehmen, das eine Webseite betreibt?** + +* [ ] Der EAA betrifft nur öffentliche Behörden – private Unternehmen sind ausgenommen. +* [ ] Das Unternehmen muss nur eine englische Version der Webseite bereitstellen. +* [x] **Die Webseite muss barrierefreiheitstechnisch WCAG-Standards erfüllen – E-Commerce ist explizit im EAA geregelt. Bei Verstoß: Bußgelder möglich.** ✅ +* [ ] Der EAA regelt nur die Barrierefreiheit von mobilen Apps, nicht von Webseiten. + +> **Feedback:** EAA verpflichtet u. a. E-Commerce-Anbieter zur Barrierefreiheit. Die Webseite muss WCAG-Standards erfüllen. Bei Verstoß: Bußgelder bis 100.000 € möglich. + +--- + +### Q7 – TCP/IP: Protokoll → Schicht (3 pt) + +**Ordne jedem Protokoll die richtige TCP/IP-Schicht zu.** + +* **HTTP:** Anwendung +* **DNS:** Anwendung +* **TCP:** Transport +* **UDP:** Transport +* **IP:** Internet +* **Ethernet:** Netzzugang + +> **Feedback:** Anwendung: HTTP, DNS, SMTP. Transport: TCP, UDP. Internet: IP. Netzzugang: Ethernet, WLAN. + +--- + +### Q8 – Encapsulation: Dateneinheit → Schicht (3 pt) + +**Bei der Übertragung wird eine Nachricht von Schicht zu Schicht verpackt (Encapsulation). Ordne jeder Dateneinheit die zugehörige Schicht zu.** + +* **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:** Daten (Anwendung) → Segment (Transport, +Ports) → Paket (Internet, +IP) → Frame (Netzzugang, +MAC). Merkhilfe: D-S-P-F. + +--- + +### Q9 – IP vs. MAC vs. Port: Transfer-Szenario (3 pt) + +**Dein Laptop sendet eine HTTPS-Anfrage an einen Webserver in einem anderen Land. Das Paket durchläuft mehrere Router.** + +**Welche der folgenden Aussagen über die Adressen auf dem Weg ist korrekt?** + +* [ ] Alle drei Adressen (IP, MAC, Port) ändert sich bei jedem Router. +* [x] **Die IP-Adresse des Servers bleibt konstant, der Port (443) ändert sich nicht – die MAC-Adresse wird an jedem Router neu gesetzt (lokal, ein Hop).** ✅ +* [ ] Die MAC-Adresse bleibt konstant, die IP-Adresse ändert sich bei jedem Hop. +* [ ] IP und Port ändert sich, MAC bleibt konstant – MAC ist die globale Adresse. + +> **Feedback:** IP-Adresse des Ziel-Servers bleibt konstant (global). MAC-Adresse ändert sich bei jedem Hop (lokal, nächster Router). Port 443 (HTTPS) bleibt konstant. + +--- + +### Q10 – TCP 3-Way-Handshake: Was passiert wäre? (3 pt) + +**Der Client sendet ein SYN zum Server. Das SYN-Paket geht verloren – es erreicht den Server nie.** + +**Was passiert als nächstes, und warum wird keine Verbindung aufgebaut?** + +* [ ] Der Server sendet trotzdem ein SYN-ACK, da die IP-Adresse bekannt ist – die Verbindung wird trotzdem aufgebaut. +* [x] **Der Server kennt die Anfrage nicht → sendet kein SYN-ACK → der Client erhält keine Antwort → keine Verbindung. Der Client wird das SYN nach einem Timeout erneut senden.** ✅ +* [ ] Der Client sendet direkt ein ACK als Fallback – die Verbindung wird mit zwei Paketen aufgebaut. +* [ ] Das verloren gegangene SYN wird automatisch vom Netzwerk rekonstruiert – kein Problem. + +> **Feedback:** Der Server erhält kein SYN → sendet kein SYN-ACK zurück → der Client bekommt keine Antwort → Verbindung wird nicht aufgebaut. TCP wird das SYN nach einem Timeout erneut senden (Neuübertragung). + +--- + +### Q11 – TCP vs. UDP: Videostreaming (2 pt) + +**Ein Videostreaming-Dienst sendet Daten an deinen Browser. Ein einzelnes Paket geht verloren.** + +**Warum wählt der Dienst UDP statt TCP, obwohl ein Paket verloren geht?** + +* [ ] 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:** Bei Echtzeit-Video ist Verzögerung schlimmer als Paketverlust. TCP würde das Paket erneut anfordern → Video friert. UDP ignoriert das Verlust → kurzer Artefakt, Video läuft weiter. + +--- + +### Q12 – HTTP-Methoden: Szenario (2 pt) + +**Ein Nutzer aktualisiert sein Profilbild auf einer Webseite. Das Foto wird zum Server gesendet und das *alte Bild ersetzt*.** + +**Welche HTTP-Methode wird für diese Operation verwendet, und warum nicht GET?** + +* [ ] **GET** – GET kann auch Daten senden, wenn eine URL mit Parameter verwendet wird. +* [x] **PUT – ersetzt eine existierende Ressource. GET ruft nur Daten ab und sendet *keine* Daten zum Server.** ✅ +* [ ] **POST** – POST ist immer für das Ersetzen von Daten zuständig. +* [ ] **DELETE** – DELETE sendet das neue Foto und löscht gleichzeitig das alte. + +> **Feedback:** PUT – Daten ersetzen (eine existierende Ressource wird überschrieben). GET ruft nur Daten ab, sendet keine Daten zum Server. + +--- + +### Q13 – HTTP Status-Codes: Fehlerdiagnose (2 pt) + +**Du rufst eine Webseite auf und der Browser zeigt folgende Fehlermeldung an:** +`HTTP/1.1 503 Service Unavailable` + +**Was bedeutet dieser Code, und wer ist für die Behebung zuständig – du oder der Betreiber der Webseite?** + +* [ ] Client-Fehler: Du hast die falsche URL eingegeben – ein 5xx-Code bedeutet, dass deine Anfrage falsch war. +* [ ] Erfolgs-Code: 503 bedeutet, dass der Server die Anfrage erfolgreich umgeleitet hat. +* [x] **Server-Fehler: Der Server ist überlastet oder temporär nicht verfügbar. Verantwortung liegt beim Betreiber – du kannst nur später erneut versuchen.** ✅ +* [ ] Der Code bedeutet, dass der Server die Seite dauerhaft verschoben hat – du muss die neue URL suchen. + +> **Feedback:** 503 ist ein 5xx-Code = Server-Fehler. Der Server ist überlastet oder temporär nicht verfügbar. Verantwortung liegt beim Serverbetreiber, nicht beim Nutzer. + +--- + +### Q14 – DNS: Rolle im Ablauf (2 pt) + +**Du gibst `https://hdm-stuttgart.de` in die Adresszeile ein.** + +**Was passiert *vor* dem TCP-Handshake, und warum ist dieser Schritt zwingend nötig?** + +* [ ] Der Browser sendet direkt den Namen an den Server – DNS wird erst danach für die Verschlüsselung benötigt. +* [x] **DNS-Auflösung: Der Name `hdm-stuttgart.de` wird in eine IP-Adresse umgewandelt. TCP kann nur zu IP-Adressen Verbindungen aufbauen, nicht zu Namen.** ✅ +* [ ] DNS passiert nach dem TCP-Handshake – erst wird die Verbindung aufgebaut, dann der Name aufgelöst. +* [ ] DNS ist nur für HTTPS nötig – bei HTTP kann der Name direkt verwendet werden. + +> **Feedback:** DNS-Auflösung: Der Name „hdm-stuttgart.de" wird in eine IP-Adresse umgewandelt. TCP braucht eine IP-Adresse – names können nicht direkt verbunden werden. + +--- + +### Q15 – CSS Spezifität: Welche Regel gewinnt? (2 pt) + +**Gegeben folgender CSS-Code:** + +```css +p { color: blue; } /* (A) */ +.highlight { color: green; } /* (B) */ +#main { color: red; } /* (C) */ + +``` + +**Ein Element `<p class="highlight" id="main">Text</p>` wird angezeigt.** +**Welche Farbe zeigt der Text an, und warum?** + +* [ ] **Blau** – die Element-Regel steht zuerst im Code und hat daher Vorrang. +* [ ] **Grün** – Klassen-Selektoren haben immer Vorrang vor IDs. +* [x] **Rot – die ID-Regel `#main` hat die höchste Spezifität (0,1,0,0) und gewinnt über Klasse (0,0,1,0) und Element (0,0,0,1).** ✅ +* [ ] **Rot** – die letzte Regel im Code gewinnt immer, unabhängig vom Selektor-Typ. + +> **Feedback:** Spezifität: ID (0,1,0,0) > Klasse (0,0,1,0) > Element (0,0,0,1). Alle drei Regeln treffen das Element – ID #main gewinnt → rot. + +--- + +### Q16 – Responsive Design: Mobile First (2 pt) + +**Ein Developer schreibt folgendes CSS:** + +```css +.container { background: white; } + +@media (min-width: 768px) { + .container { background: blue; } +} + +@media (min-width: 1024px) { + .container { background: green; } +} + +``` + +**Welche Farbe hat `.container` bei einem Bildschirm von 900 px Breite, und warum?** + +* [ ] **Weiß** – Media-Queries gelten nur ab 1024 px, darunter bleibt immer die Basis-Farbe. +* [ ] **Grün** – die letzte Media-Query überschreibt immer alle vorherigen. +* [x] **Blau – bei 900 px greift `min-width: 768px` (900 ≥ 768), aber `min-width: 1024px` greift nicht (900 < 1024).** ✅ +* [ ] **Weiß** – bei 900 px greift keine Media-Query, da 900 zwischen den beiden Breakpoints liegt. + +> **Feedback:** Mobile First: Basis = white. Bei 900px greift min-width: 768px → blue. min-width: 1024px greift NICHT (900 < 1024). Ergebnis: blau. + +--- + +### Q17 – Zusammen: Reihenfolge eines HTTPS-Aufrufs (1 pt) + +**Du gibst eine URL ein. Welche Reihenfolge der Schritte 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:** Korrekte Reihenfolge: (1) DNS-Auflösung, (2) TCP 3-Way-Handshake, (3) HTTP-Request (GET), (4) HTTP-Response (200 OK + HTML). + +--- + +### Q18 – Bonusfrage: Spezifität Edge Case (1 pt) + +**Es gibt zwei CSS-Regeln für ein `<p>`-Element:** + +```css +p p p p p p p p p p { color: blue; } /* 100× Element-Selektor */ +.highlight { color: red; } /* 1× Klasse */ + +``` + +**Das Element hat die Klasse `highlight`. Welche Farbe gewinnt?** + +* [ ] **Blau** – 100 Element-Selektoren ergeben 0,0,0,100 = höhere Spezifität als 0,0,1,0. +* [x] **Rot – eine Klasse (0,0,1,0) gewinnt immer gegen beliebig viele Element-Selektoren (0,0,0,n). Spezifität-Stellen überschreiben sich, nicht addieren.** ✅ +* [ ] **Blau** – die längere Regel (mehr Selektoren) hat immer höhere Spezifität. +* [ ] Unentschieden – die Regeln haben exakt gleiche Spezifität. + +> **Feedback:** Eine einzelne Klasse (0,0,1,0) schlägt immer hundert Element-Selektoren (0,0,0,100). Spezifität wird nicht additiv „aufgezählt" – die Stelle zählt als Einheit. + +--- + +### Q19 – Von-Neumann: Der Flaschenhals (Engpass) + +**Die Von-Neumann-Architektur hat einen bekannten Nachteil, den sogenannten „Von-Neumann-Flaschenhals“. Was ist damit gemeint?** + +* [ ] Das Steuerwerk kann Befehle schneller verarbeiten, als das Rechenwerk sie berechnen kann. +* [x] **Die CPU ist schneller als der Datentransfer über den gemeinsamen Bus. Da Daten und Befehle denselben Bus nutzen, müssen sie nacheinander geladen werden.** ✅ +* [ ] Der Speicher verliert seine Daten, wenn der Strom abgeschaltet wird, was den Startvorgang verlangsamt. +* [ ] Die Ein-/Ausgabegeräte blockieren den Prozessor dauerhaft, da sie keinen eigenen Speicher haben. + +> **Feedback:** Der Flaschenhals entsteht, weil Befehle und Daten sich den gleichen Weg (Bus) teilen müssen und der Speicherzugriff langsamer ist als die CPU-Geschwindigkeit. + +--- + +### Q20 – HTML: Encoding (Charset) + +**In Q4 ging es um Metadaten. Ein weiteres wichtiges Tag im `<head>` ist `<meta charset="UTF-8">`. Was ist die konkrete Konsequenz, wenn dieses Tag fehlt oder falsch ist?** + +* [ ] Die Webseite lädt gar nicht, da der Browser den Binärcode nicht interpretieren kann. +* [x] **Sonderzeichen (Umlaute, Emojis) werden als kryptische Symbole („Hieroglyphen“) dargestellt, da der Browser die falsche Zeichenkodierung rät.** ✅ +* [ ] Die Seite wird langsamer, da der Browser erst alle Sprachen der Welt durchprobieren muss. +* [ ] Das CSS wird nicht geladen, da CSS zwingend UTF-8 voraussetzt. + +> **Feedback:** Ohne definierte `charset` (Zeichensatz) nutzt der Browser oft einen Standard (z. B. Latin-1), was bei UTF-8-gespeicherten Dateien zu Darstellungsfehlern bei ä, ö, ü oder Emojis führt. + +--- + +### Q21 – Barrierefreiheit: POUR-Prinzip + +**Die WCAG basieren auf vier Prinzipien (POUR). Eines davon ist „Bedienbarkeit“ (Operable). Welches Szenario beschreibt eine Verletzung dieses Prinzips?** + +* [ ] Der Textkontrast ist zu gering (grau auf hellgrau), sodass man ihn kaum lesen kann. +* [x] **Eine Navigation funktioniert nur per Maus (Hover), ist aber per Tastatur (Tab-Taste) nicht erreichbar.** ✅ +* [ ] Der Inhalt ist in sehr komplizierter Fachsprache geschrieben, die ein Laie nicht versteht. +* [ ] Die Webseite stürzt in alten Browsern ab. + +> **Feedback:** „Bedienbar“ bedeutet, dass die Schnittstelle (Buttons, Links) von jedem genutzt werden kann – also auch ohne Maus (nur Tastatur). Kontrast gehört zu „Wahrnehmbar“ (Perceivable). + +--- + +### Q22 – Encapsulation: Die Empfänger-Seite (Decapsulation) + +**In Q8 haben wir Daten verpackt. Wenn der Server das Signal empfängt, passiert das Gegenteil (Decapsulation). In welcher Reihenfolge werden die Header *entfernt*?** + +* [ ] Anwendung (HTTP) → Transport (TCP) → Internet (IP) → Netzzugang (Ethernet) +* [ ] Es werden alle Header gleichzeitig entfernt, sobald die Daten im RAM liegen. +* [x] **Netzzugang (Ethernet-Header weg) → Internet (IP-Header weg) → Transport (TCP-Header weg) → Daten.** ✅ +* [ ] Internet (IP) → Netzzugang (Ethernet) → Transport (TCP) → Anwendung (HTTP) + +> **Feedback:** Das Auspacken erfolgt in umgekehrter Reihenfolge wie das Einpacken (Zwiebel-Prinzip). Erst wird der Umschlag (Ethernet) geöffnet, dann das Paket (IP), dann das Segment (TCP). + +--- + +### Q23 – Ports: Wozu genau? + +**Wir wissen aus Q9, dass IP-Adressen Computer identifizieren. Wozu genau dient dann die Port-Nummer (z. B. 80 oder 443) auf dem Zielrechner?** + +* [ ] Sie bestimmt die Geschwindigkeit der Verbindung. +* [ ] Sie dient zur Verschlüsselung der Daten. +* [x] **Sie adressiert den konkreten Dienst bzw. die Anwendung auf dem Computer (z. B. Webserver vs. Mailserver).** ✅ +* [ ] Sie zeigt an, ob der Computer per WLAN oder Kabel verbunden ist. + +> **Feedback:** Die IP ist wie die Hausnummer (welches Gebäude?), der Port ist wie die Türnummer oder der Name an der Klingel (wer im Haus soll das Paket bekommen? Webserver? Mailserver?). + +--- + +### Q24 – TCP: Sequenznummern + +**TCP ist zuverlässig. Ein Mechanismus dafür sind „Sequenznummern“ im Header. Welches Problem lösen diese konkret?** + +* [ ] Sie verhindern, dass Hacker die Verbindung abhören können. +* [x] **Pakete können im Internet unterschiedliche Routen nehmen und in falscher Reihenfolge ankommen. Sequenznummern erlauben das korrekte Sortieren beim Empfänger.** ✅ +* [ ] Sie zählen, wie viele Benutzer gerade gleichzeitig auf dem Server sind. +* [ ] Sie bestimmen die maximale Größe einer Datei. + +> **Feedback:** Da IP-Pakete überholen können, kommen Teil 2 und Teil 3 vielleicht vor Teil 1 an. TCP sortiert sie anhand der Nummern wieder richtig. UDP macht das nicht. + +--- + +### Q25 – HTTP Methoden: Sicherheit + +**Warum sollte man niemals die GET-Methode verwenden, um sensible Daten (z. B. ein Passwort) an den Server zu senden?** + +* [ ] GET ist langsamer als POST und 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 stehen sie im Body.** ✅ +* [ ] GET erlaubt nur Zahlen, keine Buchstaben. +* [ ] GET-Anfragen werden vom Server nicht verschlüsselt, POST-Anfragen immer. + +> **Feedback:** Parameter bei GET hängen an der URL (`?pw=123`). Das ist in der History und in Logs sichtbar. HTTPS verschlüsselt zwar beides auf der Leitung, aber die URL ist an zu vielen Stellen sichtbar. + +--- + +### Q26 – HTTP Status: 404 Not Found + +**Du erhältst einen 404-Fehler. In Q13 (503) lag der Fehler beim Server. Wer hat beim 404-Fehler „Schuld“ bzw. wo liegt die Ursache meistens?** + +* [ ] Der Server ist abgestürzt. +* [ ] Das Internet ist ausgefallen. +* [x] **Der Client (Nutzer). Es wurde eine URL angefordert, die es nicht gibt (Tippfehler oder veralteter Link).** ✅ +* [ ] Der DNS-Server konnte den Namen nicht auflösen. + +> **Feedback:** 4xx-Codes sind Client-Errors. Der Server funktioniert super, er sagt dir nur: „Das, was du (Client) suchst, habe ich nicht.“ + +--- + +### Q27 – CSS: `!important` vs. ID + +**In Q15 hat die ID gewonnen. Nun ändern wir den Code:** + +```css +#main { color: red; } +p { color: blue !important; } + +``` + +**Welche Farbe hat das `<p id="main">` Element nun?** + +* [ ] **Rot** – ID ist immer noch spezifischer als ein Element-Selektor. +* [ ] **Lila** – Die Farben mischen sich. +* [x] **Blau** – `!important` durchbricht die normale Spezifitäts-Kaskade und gewinnt sogar gegen IDs (außer die ID hat auch !important). ✅ +* [ ] **Rot** – `!important` wird von modernen Browsern ignoriert. + +> **Feedback:** `!important` ist die „Atombombe“ im CSS. Es überschreibt normale Spezifitätsregeln (ID, Klasse, Element). Es sollte daher sehr sparsam eingesetzt werden. + +--- + +### Q28 – Responsive Design: Desktop First + +**In Q16 nutzten wir `min-width` (Mobile First). Wie würde die Media Query aussehen, wenn wir „Desktop First“ arbeiten würden (also Standard ist Desktop, Anpassung für kleine Screens)?** + +* [ ] `@media (device-width: small) { ... }` +* [ ] `@media (min-width: ...)` – das bleibt gleich, nur die Reihenfolge ändert sich. +* [x] **`@media (max-width: ...)` – Wir definieren Stile für Bildschirme, die *kleiner* als eine bestimmte Breite sind.** ✅ +* [ ] `@media (mobile: true) { ... }` + +> **Feedback:** Desktop First bedeutet: Das Basis-CSS ist für große Schirme. Mit `max-width` (maximale Breite) definieren wir Ausnahmen für Geräte, die schmaler sind (Tablets, Handys). diff --git a/scripts/generate-index.sh b/scripts/generate-index.sh index bc4e916..f87bf0b 100755 --- a/scripts/generate-index.sh +++ b/scripts/generate-index.sh @@ -41,6 +41,7 @@ TOPIC_MAP["vertiefung-offene-fragen"]="Vertiefung & Offene Fragen" TOPIC_MAP["geschichte-grundlagen-html"]="Geschichte, Grundlagen & HTML" TOPIC_MAP["netzwerke-protokolle-css"]="Netzwerke, Protokolle & CSS" TOPIC_MAP["interaktivitaet-javascript"]="Interaktivität & JavaScript" +TOPIC_MAP["klausurfragen"]="Klausurfragen" # Configure which topics should appear disabled per course # Two modes: fully disabled (non-clickable card) and buttons-disabled (link remains clickable, buttons are disabled) diff --git a/scripts/generate-root-index.sh b/scripts/generate-root-index.sh new file mode 100755 index 0000000..fff811f --- /dev/null +++ b/scripts/generate-root-index.sh @@ -0,0 +1,187 @@ +#!/usr/bin/env bash +# Generate root index.html for /hdm/ +# Lists all courses (klausurfragen are now per-course) + +BUILD_DIR="build" + +cat > "$BUILD_DIR/index.html" << 'HEADER' +<!DOCTYPE html> +<html lang="de"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>HdM Vorlesungen + + + +

HdM Vorlesungen

+

Sommersemester 2026 · Michael Czechowski

+
+
+ + 223015b +
Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+ 6 Kapitel · Modul "Technik 1" + +
+
+ + 223015c +
Grundlagen IT- und Internettechnik
+ 3 Kapitel · Modul "Technik 1" + +
+HEADER + +cat >> "$BUILD_DIR/index.html" << 'FOOTER' +
+

Referenzen

+
+
+ + Plattform +
Code Crispies
+ Selbstlernplattform + +
+
+
+ QR Code +

https://librete.ch/hdm/

+
+ + + +FOOTER + +echo "Generated $BUILD_DIR/index.html" diff --git a/slides/223015b/01-grundlagen.md b/slides/223015b/01-grundlagen.md new file mode 100644 index 0000000..372a66c --- /dev/null +++ b/slides/223015b/01-grundlagen.md @@ -0,0 +1,2215 @@ +--- +marp: true +theme: gaia +paginate: true +backgroundColor: #fff +header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)" +footer: "Michael Czechowski – HdM Stuttgart" +title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege +--- + + + + + + + +![bg cover opacity:0.2](./assets/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg) + +# Dateiformate, Schnittstellen, Speichermedien & Distributionswege + +**223015b** · Modul "Technik 1" · 1. Semester +Digital- und Medienwirtschaft +Hochschule der Medien Stuttgart + +[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/) + + + +--- + +![bg fit](./assets/qrcode-1.svg) + + + +--- + + + +# Teil 1: Einführung +## Grundlagen, Text & Audio + + + +--- + + + +# I. Einführung: Warum diese Vorlesung? + + + +--- + +# Verortung im Modul + +**Modul "Technik 1":** +- Computer & IT-Systeme +- Netzwerke & Protokolle +- **→ Unsere Vorlesung: Daten auf dem Computer** + +**Unser Fokus:** +- Von-Neumann-Architektur: **Speicher** (Memory) +- Wie werden Daten repräsentiert? +- Wie werden Daten gespeichert? +- Wie werden Daten übertragen? + + + +--- + +# Das menschliche Bedürfnis zu speichern + +**Geschichte der Informationsspeicherung:** + +- **40.000 v. Chr.**: Höhlenmalereien (Lascaux, Altamira) +- **3.200 v. Chr.**: Keilschrift auf Tontafeln (Mesopotamien) +- **1450**: Gutenberg-Druckpresse (Buchdruck revolutioniert) +- **1877**: Edison-Phonograph (erstmals Audio gespeichert) +- **1950er**: Magnetbänder, Lochkarten +- **1980er**: Festplatten, CDs +- **2000er**: Flash-Speicher, Cloud + +→ Das Bedürfnis ist **anthropologisch konstant** +→ Die Technologie entwickelt sich **exponentiell** + + + +--- + +# Der Paradigmenwechsel: Analog → Digital + +**Analog (vor ~1980):** +- Information als **kontinuierliche physikalische Größe** +- Beispiel: Schallplatte (Rille formt Schallwelle nach) +- Problem: **Degradation** bei jedem Kopiervorgang + +**Digital (ab ~1980):** +- Information als **diskrete Zahlenfolge** (0 und 1) +- Beispiel: CD (Pits & Lands = Bits) +- Vorteil: **Perfekte Kopien** möglich + +→ Nicht besser oder schlechter, sondern **fundamental anders** + + + +--- + + + +# II. Von der Welt zu den Bits +## Die drei Ebenen des Signals + + + +--- + +# Die drei Ebenen des Signals + +**1. Physisches Signal** – Die Realität +**2. Analoges Signal** – Kontinuierliche Repräsentation +**3. Digitales Signal** – Diskrete Repräsentation + +→ Jeder Übergang ist ein **Übersetzungsakt** mit **Konsequenzen** + +**Zentrale Frage:** +Was gewinnen wir? Was verlieren wir? + + + +--- + +# 1. Physisches Signal: Die Realität + +**Die Welt, wie sie ist** + +- Schallwellen in der Luft (Luftdruckschwankungen) +- Lichtwellen (elektromagnetische Strahlung) +- Temperatur, Bewegung, chemische Prozesse + +**Eigenschaften:** +- ✓ Kontinuierlich in **Raum und Zeit** +- ✓ Unendlich detailliert (theoretisch) +- ✗ Direkt **nicht speicherbar** + + + +--- + +# 2. Analoges Signal: Kontinuierliche Repräsentation + +**Physische Realität → Kontinuierliche Abbildung** + +**Beispiele:** +- **Schallplatte**: Rille formt Schwingungen nach (räumliche Analogie) +- **Magnetband**: Magnetisierung entspricht Schallstärke +- **Thermometer**: Quecksilbersäule entspricht Temperatur +- **Mikrofon**: Luftdruck → elektrische Spannung + +**Eigenschaften:** +- ✓ **Analogie** zur Realität (daher "analog") +- ✓ Immer noch **kontinuierlich**, aber in anderem Medium +- ✗ **Verlustbehaftet** (Rauschen, Verzerrung, Abnutzung) + + + +--- + +# 3. Digitales Signal: Diskrete Repräsentation + +**Kontinuierlich → Diskret (Sampling & Quantisierung)** + +**Zwei fundamentale Schritte:** +1. **Sampling** (zeitlich): Messe nur zu bestimmten Zeitpunkten +2. **Quantisierung** (Amplitude): Runde auf nächsten erlaubten Wert + +**Resultat:** Endliche Menge an Zahlen + +**Eigenschaften:** +- ✓ **Speicherbar** als Bits +- ✓ **Perfekte Kopien** möglich +- ✓ **Rechenbar** (Filter, Effekte, Kompression) +- ✗ **Informationsverlust** (Approximation der Realität) + + + +--- + +# Die drei Ebenen im Vergleich + +| Ebene | Form | Speicherbar? | Kopierbar? | Rechenbar? | Beispiel | +|-------|------|-------------|-----------|-----------|----------| +| **Physisch** | Kontinuierlich | ❌ | ❌ | ❌ | Schallwelle in Luft | +| **Analog** | Kontinuierlich | ✅ | ⚠️ Mit Verlust | ⚠️ Analog-Schaltungen | Schallplatte, Kassette | +| **Digital** | Diskret | ✅ | ✅ Perfekt | ✅ Algorithmen | MP3, WAV, CD | + +→ Jeder Übergang hat **Trade-offs** +→ Digital opfert **Kontinuität** für **Robustheit** + + +Medien +--- + +# Visualisierung: Von Physisch zu Digital + +![bg right:50% fit](./assets/signal-levels-comparison.png) + +**1. Physisch** (Realität) +Glatte Sinuswelle +kontinuierlich in Zeit und Amplitude + +**2. Analog** (Repräsentation) +Leicht verrauschte Kurve +immer noch kontinuierlich + +**3. Digital** (Diskret) +Treppenstufen-Approximation +diskrete Zeitpunkte, diskrete Werte + + + +--- + +# Warum ist diese Unterscheidung wichtig? + +**Verstehen, was passiert, wenn wir:** + +1. **Alte Schallplatten digitalisieren** + → Analog (mit Rauschen) → Digital + → **Rauschen wird "eingefroren"** (bleibt für immer) + +2. **Mit einer Digitalkamera filmen** + → Physisch (Licht) → Digital (Sensor) + → **Kein analoger Zwischenschritt!** (moderne Kameras) + +3. **Audiokassetten kopieren** + → Analog → Analog (Rauschen addiert sich, Generation für Generation) + → Digital → Digital (perfekt, unendlich kopierbar) + +4. **Kompression anwenden** + → Nur bei digitalen Signalen möglich! + → Algorithmen brauchen Zahlen, keine Wellen + + + +--- + +# Praktische Konsequenzen + +**Digitalisierung ist irreversibel** + +Was zwischen Samples passiert: **für immer verloren** +Was bei Quantisierung gerundet wurde: **für immer verloren** + +**Aber:** +- Wenn Sampling-Rate hoch genug (Nyquist erfüllt): kein hörbarer Verlust +- Wenn Bit-Tiefe hoch genug (16-bit+): Quantisierungsrauschen unhörbar + +**Daher die Praxis:** +- **Archivierung**: Höchste Qualität digitalisieren (96 kHz, 24-bit) +- **Distribution**: Dann komprimieren für Streaming/Download (AAC, Opus) + +→ "**You can always go down, but never up**" + + + +--- + + + +# III. Das Problem der Knappheit +## Warum Kompression notwendig ist + + + +--- + +# Ein konkretes Beispiel: 1 Minute Musik + +**Eine Minute Musik in CD-Qualität:** + +44.100 Samples/Sekunde +× 16 Bit pro Sample +× 2 Kanäle (Stereo) +× 60 Sekunden + += **10,584,000 Bytes** ≈ **10,6 MB pro Minute** + + + +--- + +# Konkrete Beispiele: Audio, Video, Bilder + +**Unkomprimierte Größen:** + +| Medium | Parameter | Größe | +|--------|-----------|-------| +| **Audio** | 44,1 kHz, 16-bit, Stereo | **10,6 MB/min** | +| **Bild** | 4000×3000 px, RGB, 8-bit/Kanal | **34,5 MB** | +| **Video** | 4K (3840×2160), 30 fps, 8-bit | **~45 GB/min** | + +**Problem:** Diese Größen sind unpraktikabel für Speicherung und Übertragung. + +--- + +# Skalierung: Von einem Song zu 10.000 Songs + +**Szenario:** Musiksammlung + +| Format | Größe/Song | 10.000 Songs | Speicher nötig | +|--------|-----------|--------------|----------------| +| **WAV (CD)** | 35 MB (3:30 min) | 350 GB | 1× 512 GB SSD | +| **FLAC** | 18 MB (~50% Kompr.) | 180 GB | 1× 256 GB SSD | +| **MP3 320** | 8 MB | 80 GB | 1× 128 GB SSD | +| **MP3 128** | 3,3 MB | 33 GB | 1× 64 GB SSD | + +**Implikation:** +- Ohne Kompression: 350 GB +- Mit MP3 128: 33 GB (Faktor **10:1**) +- **Ermöglicht** iPod (2001: 5–10 GB), Smartphone-Sammlungen + +--- + +# Historischer Kontext: Speicherkapazität 1990–2025 + +| Jahr | Typische Festplatte | Preis/GB | Alben (WAV) | Alben (MP3 128) | +|------|---------------------|----------|-------------|-----------------| +| **1990** | 100 MB | $100 | 0,1 | 1,6 | +| **1995** | 1 GB | $20 | 1,5 | 16 | +| **2000** | 20 GB | $5 | 31 | 330 | +| **2005** | 200 GB | $1 | 314 | 3.300 | +| **2010** | 1 TB | $0,10 | 1.600 | 16.500 | +| **2015** | 2 TB | $0,04 | 3.100 | 33.000 | +| **2020** | 4 TB | $0,025 | 6.200 | 66.000 | +| **2025** | 8+ TB | $0,015 | 12.500 | 132.000 | + +**Faktor (1990 → 2025):** 80.000× Kapazität, 6.667× billiger pro GB + +--- + +# Der digitale Wendepunkt: Zettabyte-Ära + +**Datenmenge der Menschheit:** +- 2010: **2 Zettabyte** (ZB) +- 2015: 15 ZB +- 2020: 64 ZB +- **2025: 181 ZB** (geschätzt) + +**Was ist ein Zettabyte?** +1 ZB = 1.000 Exabyte = 1.000.000 Petabyte = 1.000.000.000 Terabyte + +**Kontext:** 181 ZB = ~18 Milliarden 10-TB-Festplatten + +--- + +# Zwei Philosophien der Kompression + +## **Lossless (Verlustfrei)** +- **Prinzip**: Redundanz entfernen +- **Resultat**: Original perfekt rekonstruierbar +- **Kompression**: 2:1 bis 4:1 (typisch) +- **Beispiele**: ZIP, FLAC, PNG, FFV1 + +## **Lossy (Verlustbehaftet)** +- **Prinzip**: Wahrnehmung austricksen (Psychoakustik/-visuell) +- **Resultat**: Approximation, Original nicht rekonstruierbar +- **Kompression**: 10:1 bis 100:1+ (typisch) +- **Beispiele**: MP3, JPEG, H.264 + +--- + +# Wann welche Strategie? + +| Anwendungsfall | Lossless | Lossy | Begründung | +|----------------|----------|-------|------------| +| **Archivierung** | ✅ | ❌ | Zukunftssicher, keine Degradation | +| **Medizin (Röntgen, MRT)** | ✅ | ❌ | Rechtlich/ethisch: kein Informationsverlust erlaubt | +| **Text, Code** | ✅ | ❌ | Jedes Bit wichtig | +| **Musik-Streaming** | ❌ | ✅ | Bandbreite wichtiger als Perfektion | +| **Social Media (Fotos)** | ❌ | ✅ | Speicher/Bandbreite, „gut genug" reicht | +| **Video-Streaming** | ❌ | ✅ | Anders unpraktikabel (45 GB/min!) | +| **Professionelle Fotografie** | ✅ | ❌* | RAW für Editing, JPEG für Delivery | + +*Hybrid: Bearbeiten in RAW (lossless), exportieren als JPEG (lossy) + +--- + + + +# IV. Fundamentale Konzepte +## Bits, Bytes & Kodierung + +--- + +# Das Bit: 0 oder 1 + +**Die kleinste Informationseinheit** + +- **Bit** = Binary Digit +- Zwei Zustände: 0 oder 1 (aus oder an, falsch oder wahr) +- Physikalisch: Spannung (niedrig/hoch), Magnetisierung (N/S), Licht (aus/an) + +**Beispiele:** +- 1 Bit: Ja/Nein-Frage +- 2 Bits: 4 Zustände (00, 01, 10, 11) +- n Bits: 2^n Zustände + +**Formel:** n Bits können 2^n verschiedene Werte darstellen + +--- + +# Das Byte: 8 Bits = 256 Zustände + +**Standard-Einheit der Informatik** + +- 1 Byte = 8 Bits +- 2^8 = 256 verschiedene Werte (0–255) +- Kann darstellen: Zahlen 0–255, Zeichen (ASCII), Graustufen + +**Warum 8 Bits?** +- Historisch: IBM System/360 (1964) standardisierte 8-bit Byte +- Praktisch: 256 Werte genug für Buchstaben + Sonderzeichen + +**Größere Einheiten:** +- Kilobyte (KB): 1.000 Bytes (dezimal) oder 1.024 Bytes (binär, KiB) +- Megabyte (MB), Gigabyte (GB), Terabyte (TB), ... + +--- + +# Anwendung: RGB-Farben + +**24-bit Farbtiefe (True Color)** + +Jeder Pixel: 3 Kanäle × 8 Bit = 24 Bit = 3 Bytes + +- **Rot**: 8 Bit (0–255) +- **Grün**: 8 Bit (0–255) +- **Blau**: 8 Bit (0–255) + +**Anzahl Farben:** 256 × 256 × 256 = **16.777.216 Farben** + +**Beispiele:** +- Schwarz: (0, 0, 0) +- Weiß: (255, 255, 255) +- Rot: (255, 0, 0) +- Cyan: (0, 255, 255) + +--- + +# Zeichenkodierung: ASCII – Der erste Standard + +**ASCII (American Standard Code for Information Interchange, 1963)** + +- 7 Bit → 128 Zeichen +- Enthält: Buchstaben (A-Z, a-z), Ziffern (0-9), Sonderzeichen, Steuerzeichen + +**Beispiele:** +- 'A' = 65 (dezimal) = 0100 0001 (binär) +- 'a' = 97 +- '0' = 48 +- Leerzeichen = 32 + +**Problem:** Nur für Englisch! Keine Umlaute, kein Kyrillisch, kein Chinesisch. + +--- + +# Das Problem: Sprachen außerhalb des Englischen + +**Extended ASCII (8-bit, 256 Zeichen)** +- ISO-8859-1 (Latin-1): Westeuropäische Sprachen (äöüß) +- ISO-8859-5: Kyrillisch +- Windows-1252: Microsoft-Variante + +**Probleme:** +- Inkompatibel zwischen Sprachen +- Kann nicht Deutsch + Russisch in selber Datei +- Chinesisch, Japanisch: 10.000+ Zeichen → unmöglich mit 8-bit + +**Lösung:** Unicode + +--- + +# Unicode: Ein Standard für alle Schriften + +**Unicode 16.0 (2024): 154.998 Zeichen** + +Umfasst: +- Latein, Kyrillisch, Griechisch, Arabisch, Hebräisch +- CJK (Chinesisch, Japanisch, Koreanisch): ~90.000 Zeichen +- Emoji: ~3.600 +- Historische Schriften (Hieroglyphen, Keilschrift) + +**Struktur:** +- Jedes Zeichen hat einen **Code Point**: U+0041 = 'A' +- Code Points 0–1.114.111 (21 Bit theoretisch) + +**Verschiedene Encodings:** UTF-8, UTF-16, UTF-32 + +--- + +# UTF-8, UTF-16, UTF-32: Encoding-Varianten + +**UTF-8 (variable Länge, 1–4 Bytes):** +- ASCII-kompatibel (A = 1 Byte) +- Umlaute: 2 Bytes (ä = C3 A4) +- Chinesisch: 3–4 Bytes +- **Vorteil**: Effizient für Text mit viel ASCII +- **Standard** im Web (>98% aller Webseiten) + +**UTF-16 (2 oder 4 Bytes):** +- Meiste Zeichen: 2 Bytes +- Seltene: 4 Bytes (Surrogate Pairs) +- **Verwendet**: Windows intern, Java + +**UTF-32 (immer 4 Bytes):** +- Jedes Zeichen: 4 Bytes (verschwenderisch, aber einfach) +- **Vorteil**: Direkter Zugriff (Zeichen N = Byte 4N) + +--- + +# Praxis: Bytes zählen, Dateigrößen verstehen + +**Beispiel: "Hello World!" in verschiedenen Encodings** + +| Encoding | Bytes | Hex | +|----------|-------|-----| +| **ASCII** | 12 | 48 65 6C 6C 6F 20 57 6F 72 6C 64 21 | +| **UTF-8** | 12 | (identisch mit ASCII) | +| **UTF-16** | 26 | FF FE 48 00 65 00 ... (BOM + 2 Bytes/Zeichen) | +| **UTF-32** | 52 | (BOM + 4 Bytes/Zeichen) | + +**Beispiel: "Äpfel" in UTF-8** +- 'Ä' = C3 84 (2 Bytes) +- 'p' = 70 (1 Byte) +- 'f' = 66 +- 'e' = 65 +- 'l' = 6C +- **Total**: 6 Bytes (nicht 5!) + +--- + +# Hexadezimal: Die Sprache der Datei-Analyse + +**Warum Hex?** +- Binär (0/1) ist zu lang: 11111111 = FF (kürzer) +- Dezimal passt nicht zu Bytes: 255 ≠ klare Byte-Grenze +- Hex: 1 Byte = 2 Hex-Ziffern (00–FF) + +**Hexadezimal (Base 16):** +``` +0 1 2 3 4 5 6 7 8 9 A B C D E F +0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 +``` + +**Beispiele:** +- 0xFF = 255 (dezimal) = 1111 1111 (binär) +- 0x10 = 16 (dezimal) +- 0xA0 = 160 (dezimal) + +--- + +# Magic Numbers: Dateitypen erkennen + +**Jede Datei beginnt mit "Magic Bytes"** + +Erste Bytes identifizieren Dateityp (unabhängig von Extension) + +**Beispiele:** + +| Format | Magic Bytes (Hex) | ASCII | +|--------|-------------------|-------| +| **PNG** | 89 50 4E 47 0D 0A 1A 0A | .PNG.... | +| **JPEG** | FF D8 FF | ÿØÿ | +| **GIF** | 47 49 46 38 | GIF8 | +| **PDF** | 25 50 44 46 | %PDF | +| **ZIP** | 50 4B 03 04 | PK.. | +| **MP3** | FF FB (oder FF F3) | ÿû | +| **WAV** | 52 49 46 46 | RIFF | + +**Tool:** `hexdump -C filename | head` (Linux/Mac) + +--- + +# Praxis: "What the HEX-Code" + +**Live-Demo: Datei analysieren** + +```bash +$ hexdump -C image.png | head -n 5 + +00000000 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 |.PNG........IHDR| +00000010 00 00 05 00 00 00 03 84 08 02 00 00 00 8c d9 c0 |................| +00000020 ea 00 00 00 09 70 48 59 73 00 00 0b 13 00 00 0b |.....pHYs.......| +``` + +**Interpretation:** +- `89 50 4E 47` = PNG Magic Number ✓ +- `49 48 44 52` = "IHDR" (Image Header Chunk) +- Nächste Bytes: Breite, Höhe, Bit-Tiefe + +**Anwendung:** +- Datei-Validierung (ist das wirklich ein PNG?) +- Forensik (versteckte Daten?) +- Debugging (warum öffnet Datei nicht?) + +--- + +# Dateneinheiten: KB, MB, GB, TB, PB, ZB + +**Präfixe (SI dezimal vs. Binär):** + +| Einheit | Dezimal (SI) | Binär (IEC) | Faktor | +|---------|--------------|-------------|--------| +| **Kilobyte** | 1 KB = 1.000 Bytes | 1 KiB = 1.024 Bytes | 2^10 | +| **Megabyte** | 1 MB = 1.000 KB | 1 MiB = 1.024 KiB | 2^20 | +| **Gigabyte** | 1 GB = 1.000 MB | 1 GiB = 1.024 MiB | 2^30 | +| **Terabyte** | 1 TB = 1.000 GB | 1 TiB = 1.024 GiB | 2^40 | +| **Petabyte** | 1 PB = 1.000 TB | 1 PiB = 1.024 TiB | 2^50 | +| **Exabyte** | 1 EB = 1.000 PB | | 2^60 | +| **Zettabyte** | 1 ZB = 1.000 EB | | 2^70 | + +**Unterschied:** 1 TB (dezimal) = 0,909 TiB (binär) +→ "1 TB Festplatte" zeigt 931 GB in Windows (weil Windows GiB nutzt) + +--- + +# Binär vs. Dezimal: Der Marketing-Trick + +**Warum zwei Standards?** + +**Dezimal (1000-basiert):** +- Hersteller nutzen: "1 TB = 1.000 GB" +- Größere Zahlen → besser klingt + +**Binär (1024-basiert):** +- Computer-intern: Potenzen von 2 (2^10 = 1024) +- OS (Windows, Mac, Linux) zeigt oft GiB + +**Beispiel:** +Festplatte gekauft: "2 TB" +- Hersteller: 2.000.000.000.000 Bytes +- Windows zeigt: 1.862 GB (eigentlich GiB) +- **Differenz:** ~138 GB "verschwunden" + +**Warum?** +2.000.000.000.000 / 1024^3 = 1.862,6 GiB + +--- + +# Datenwachstum der Menschheit + +**Exponentielles Wachstum:** + +| Meilenstein | Jahr | Datenmenge | +|-------------|------|------------| +| Gesamte Menschheitsgeschichte bis | 2003 | 5 Exabyte | +| Alle 2 Tage (2013) | 2013 | 5 Exabyte | +| Pro Tag (2025) | 2025 | ~500 Exabyte | + +**Treiber:** +- Video (80% des Traffics) +- IoT-Sensoren (Autos, Smart Cities) +- AI-Training Datasets +- Social Media + +**Konsequenz:** Speicherkapazität wächst, aber Daten wachsen schneller +→ Kompression bleibt essentiell + +--- + +# Der digitale Wendepunkt: 181 Zettabyte (2025) + +**Vergleich:** +- 181 ZB = 181.000.000.000.000.000.000.000 Bytes +- = 181 Milliarden Terabyte +- = Alle Worte der Menschheit × 36.000 + +**AI-generierte Inhalte:** +- 2030 (Prognose): 90% aller Daten AI-generiert/augmentiert +- Text (ChatGPT), Bilder (Midjourney, DALL-E), Video (Sora) +- Explosion synthetischer Daten + +**Ökologisch:** +- Rechenzentren: ~1–2% globaler Energieverbrauch +- Kompression reduziert Energie (kleinere Dateien = weniger Übertragung/Speicher) + +--- + + + +# V. Audio +## Von Analog zu Digital + +--- + +# Schall als physisches Phänomen + +**Was ist Schall?** +- Mechanische Welle (Druckschwankung) in Medium (Luft, Wasser, Festkörper) +- Geschwindigkeit: ~340 m/s in Luft (20°C) +- Frequenz: Anzahl Schwingungen/Sekunde (Hz) +- Amplitude: Stärke der Druckschwankung (Lautstärke) + +**Hörbarer Bereich (Mensch):** +- Frequenz: 20 Hz – 20.000 Hz (20 kHz) +- Lautstärke: 0 dB SPL (Hörschwelle) – 120 dB SPL (Schmerzgrenze) + +**Musik:** +- Grundfrequenzen: 27,5 Hz (tiefste Klaviertaste) – 4.186 Hz (höchste) +- Obertöne: bis 15–20 kHz + +--- + +# Analoge Audiowiedergabe: Schallplatte, Magnetband + +**Schallplatte (Vinyl):** +- Rille formt Schallwelle physisch nach +- Nadel tastet ab → mechanische Vibration → elektrisch → Lautsprecher +- **SNR**: ~60–70 dB +- **Frequenzgang**: 20 Hz – 20 kHz (theoretisch, praktisch schlechter) + +**Magnetband (Kassette):** +- Eisenoxid-Partikel magnetisiert entsprechend Signal +- **SNR**: ~50–60 dB (mit Dolby B/C besser) +- **Frequenzgang**: 30 Hz – 15 kHz (Typ II/Metal besser) + +**Vorteile:** Direktheit, keine Digitalisierung, historisch billig +**Nachteile:** Degradation, Generationsverlust, Rauschen + +--- + +# Vor- und Nachteile analoger Medien + +| Aspekt | Vorteil | Nachteil | +|--------|---------|----------| +| **Qualität** | Theoretisch unbegrenzte Auflösung | Praktisch durch Rauschen limitiert | +| **Kopie** | — | Generationsverlust (Rauschen akkumuliert) | +| **Haltbarkeit** | Jahrzehnte (wenn gut gelagert) | Degradiert (Abnutzung, Chemie) | +| **Kosten** | Historisch billig | Heute teuer (Vinyl-Pressung) | +| **Manipulation** | Schwierig, Hardware-basiert | Tape-Speed, Splicing möglich | + +**Fazit:** Für Massenmarkt überholt, für Audiophile/Sammler kulturell relevant. + +--- + +# Der Übergang: Warum Digital? + +**Motivationen (1970er–1980er):** + +1. **Perfekte Kopien**: Keine Generationsverluste (wichtig für Produktion) +2. **Kein Rauschen**: Quantisierungsrauschen kontrolliert, nicht akkumulativ +3. **Manipulation**: Filter, Effekte in Software → flexibel, günstig +4. **Speicher**: Compact Disc (1982) → robust, kompakt, lange Spielzeit + +**Hindernisse:** +- Technologie: ADCs/DACs teuer, langsam +- Skepsis: "Digital klingt kalt/steril" (subjektiv, kulturell) +- Patente: Dolby, Sony/Philips kontrollieren Standards + +**Durchbruch:** CD (1982), DAT (1987), dann 1990er: Digital dominiert Produktion + +--- + +# Digitalisierung: Sampling (zeitlich) + +**Sampling = zeitliche Diskretisierung** + +- Kontinuierliches Signal → nur bestimmte Zeitpunkte messen +- **Sample Rate** (SR): Anzahl Messungen/Sekunde (Hz) + +**Beispiele:** +- CD: 44.100 Hz (44,1 kHz) +- DVD-Audio: 96.000 Hz +- Pro-Audio: 48 kHz, 96 kHz, 192 kHz + +**Nyquist-Theorem:** +SR ≥ 2 × höchste Frequenz → perfekte Rekonstruktion +- Mensch hört bis ~20 kHz → brauchen ≥40 kHz +- CD: 44,1 kHz ✓ + +**Aliasing:** +Wenn SR zu niedrig → hohe Frequenzen "spiegeln" als niedrige (Verzerrung) +→ Anti-Aliasing-Filter vor ADC nötig + +--- + +# Digitalisierung: Quantisierung (Amplitude) + +**Quantisierung = Amplituden-Diskretisierung** + +- Kontinuierliche Spannungswerte → diskrete Stufen +- **Bit Depth**: Anzahl Bits pro Sample + +**Beispiele:** +- CD: 16-bit → 2^16 = 65.536 Stufen +- Pro-Audio: 24-bit → 2^24 = 16.777.216 Stufen + +**SQNR (Signal-to-Quantization-Noise Ratio):** +SQNR ≈ 6 dB × Bits +- 16-bit: ~96 dB (reicht für Hören) +- 24-bit: ~144 dB (Headroom für Produktion) + +**Dithering:** Kleines Rauschen vor Quantisierung → verhindert Verzerrung bei leisen Signalen + +--- + +# Berechnung: Sample Rate × Bit Depth × Kanäle + +**Formel:** +``` +Bitrate (bit/s) = Sample Rate × Bit Depth × Kanäle +Dateigröße = Bitrate × Zeit +``` + +**Beispiel: CD-Audio (Stereo)** +- SR: 44.100 Hz +- Bit Depth: 16-bit +- Kanäle: 2 (Stereo) + +**Bitrate:** +44.100 × 16 × 2 = 1.411.200 bit/s = **1.411 kbit/s** + +**1 Minute:** +1.411 kbit/s × 60 s / 8 (bits → bytes) / 1024 (kB) = **10,6 MB/min** + +**1 Album (60 min):** +10,6 MB × 60 = **636 MB** + +--- + +# Das Speicherproblem der Digitalisierung + +**Historischer Kontext:** + +**1990: Festplatten 100–500 MB** +- 1 Album (636 MB) = gesamte Festplatte! +- Lösung: Kompression (MP3, 1993) + +**1995: Festplatten 1–2 GB** +- 2–3 Alben → immer noch knapp + +**2000: Festplatten 20–40 GB** +- ~30–60 Alben → akzeptabel, aber MP3 = 10× mehr Musik + +**2025: Festplatten 4+ TB** +- ~6.000 Alben (WAV) → Speicher kein Problem mehr +- **Aber:** Streaming dominiert (Bandbreite wichtiger als lokaler Speicher) + +**Fazit:** Ohne MP3 wäre digitale Musik-Revolution der 1990er unmöglich gewesen. + +--- + + + +# V-b. MP3-Revolution +## Psychoakustik als Lösung + +--- + +# Psychoakustik: Der MP3-Trick + +**Grundidee:** Entferne, was Menschen nicht hören + +**Menschliches Gehör ist nicht perfekt:** +1. **Maskierungseffekte**: Laute Töne übertönen leise +2. **Frequenzgrenzen**: <20 Hz, >20 kHz unhörbar +3. **Kritische Bänder**: Frequenzauflösung limitiert + +**Psychoakustisches Modell:** +- Analysiere Signal: Was wird maskiert? +- Quantisiere maskierte Komponenten grob (oder entferne) +- Resultat: Kleinere Datei, kaum hörbarer Unterschied + +--- + +# Maskierungseffekte: Laute Töne übertönen leise + +**Simultane Maskierung:** +- 1 kHz Ton bei 60 dB SPL +- 1,1 kHz Ton bei 40 dB SPL gleichzeitig +- → 1,1 kHz **unhörbar** (vom 1 kHz maskiert) + +**Temporale Maskierung:** +- Lauter Ton → kurz danach sind leise Töne unhörbar (~5–10 ms) +- Pre-Masking: Auch kurz **vor** lautem Ton (auditorische Verarbeitung) + +**Anwendung:** +MP3-Encoder berechnet Masking-Kurve → entfernt/reduziert maskierte Frequenzen + +--- + +# Frequenzbereiche: Was Menschen nicht hören + +**Hörbarer Bereich: 20 Hz – 20 kHz** +- <20 Hz: Infraschall (spürbar, nicht hörbar) +- >20 kHz: Ultraschall (unhörbar, außer für Tiere) + +**Mit Alter sinkt Obergrenze:** +- Kind: ~20 kHz +- 30 Jahre: ~16 kHz +- 50 Jahre: ~12 kHz +- 70 Jahre: ~8 kHz + +**MP3-Strategie:** +- Frequenzen >16 kHz: Entfernen oder stark reduzieren (bei niedrigen Bitraten) +- <30 Hz: Ebenfalls reduzieren (wenig musikalischer Inhalt) + +**Savings:** ~20–30% der Daten in diesen Bereichen + +--- + +# Wahrnehmung ≠ Realität + +**Das Ohr ist kein Mikrofon** + +Mikrofon: Lineare Aufnahme aller Frequenzen (idealisiert) +Ohr: Nichtlinear, frequenzabhängig empfindlich, kontextabhängig + +**Beispiel: Fletcher-Munson-Kurven** +- Gleichlaute Kurven: Wie laut muss Frequenz X sein, damit sie gleich laut wie 1 kHz klingt? +- Bei 100 Hz: Muss ~20 dB lauter sein als 1 kHz (bei leisen Pegeln) +- → Ohr ist weniger empfindlich bei tiefen/hohen Frequenzen + +**MP3 nutzt das:** +- Weniger Bits für Frequenzen, wo Ohr unempfindlich +- Mehr Bits für 2–5 kHz (Sprachbereich, höchste Empfindlichkeit) + +--- + +# Die Geburt der MP3 + +**Geschichte:** +- 1982: IIS Fraunhofer (Erlangen) startet Forschung +- 1987: Patent eingereicht (DE 3740215) +- 1992: MPEG-1 Audio Layer 3 (MP3) standardisiert +- 1995: Erste Software-Player (Winamp, 1997) +- 1998: Erste portable Player (Diamond Rio) +- 1999: Napster → Massenadoption + +**Kernentwickler:** +- Karlheinz Brandenburg (Fraunhofer IIS) +- Dieter Seitzer (Universität Erlangen) + +**Ziel:** Audio über ISDN übertragen (64 kbit/s) mit akzeptabler Qualität + +--- + +# Suzanne Vega: "Tom's Diner" – Die Referenz + +**Warum dieses Lied?** + +Brandenburg testete MP3-Prototypen jahrelang mit Suzanne Vega's "Tom's Diner" (a cappella Version). + +**Eigenschaften:** +- Klare Stimme (testet Vocal-Encoding) +- Minimal begleitet (keine Maskierung durch Instrumente) +- Dynamikreich (leise/laute Passagen) +- Sibilanten (S-Laute, schwierig zu kodieren) + +**Resultat:** +- Codec-Entwicklung optimiert, bis "Tom's Diner" perfekt klang +- → Andere Musik profitierte + +**Kulturelle Bedeutung:** +"Tom's Diner" = "Mona Lisa der digitalen Audio-Ära" (weil so oft genutzt als Referenz) + +--- + +# Wie funktioniert MP3? (Vereinfacht) + +**7 Schritte:** + +1. **Filterbank** (Polyphase + MDCT): Teile Signal in 32/576 Frequenzbänder +2. **Psychoakustisches Modell**: Berechne Masking-Threshold +3. **Quantisierung**: Quantisiere jedes Band entsprechend Threshold (grob wenn maskiert, fein wenn kritisch) +4. **Huffman-Coding**: Verlustfreie Kompression der quantisierten Werte +5. **Bitstream-Formatierung**: Packe in MP3-Frame-Struktur +6. **Optional: Bit Reservoir**: Nutze ungenutzte Bits von einfachen Frames für komplexe + +**Dekodierung:** Umkehrung (Huffman → De-Quantisierung → IMDCT → Synthese-Filterbank → Audio) + +--- + +# Bitrate: Der Qualitäts-Knopf + +**Bitrate = Anzahl Bits pro Sekunde** + +**Gängige MP3-Bitraten:** + +| Bitrate | Qualität | Anwendung | Dateigröße/min | +|---------|----------|-----------|----------------| +| **64 kbit/s** | Niedrig (Telefon) | Sprache, Podcasts | 0,5 MB | +| **128 kbit/s** | Mittel (Radio) | Historisch populär | 1 MB | +| **192 kbit/s** | Gut | Guter Kompromiss | 1,4 MB | +| **256 kbit/s** | Sehr gut | iTunes Standard | 1,9 MB | +| **320 kbit/s** | Höchste (MP3) | "Transparent" (für die meisten) | 2,4 MB | + +**CBR vs. VBR:** +- **CBR** (Constant Bitrate): Gleiche Bitrate durchgehend (einfach, verschwenderisch) +- **VBR** (Variable Bitrate): Bitrate variiert (komplexe Passagen → höher, einfache → niedriger) → effizienter + +--- + +# Variable Bitrate (VBR) vs. Constant (CBR) + +**CBR (Constant Bitrate):** +- Feste Bitrate (z.B. 192 kbit/s) für gesamte Datei +- **Vorteil**: Einfach, Dateigröße vorhersagbar, Streaming-freundlich +- **Nachteil**: Verschwendet Bits bei einfachen Passagen, zu wenig bei komplexen + +**VBR (Variable Bitrate):** +- Bitrate variiert: 128–320 kbit/s je nach Komplexität +- **Vorteil**: Bessere Qualität bei gleicher durchschnittlicher Bitrate +- **Nachteil**: Dateigröße schwankt, manche alte Player hatten Probleme + +**Beispiel:** +- Stille: VBR nutzt ~32 kbit/s (genug) +- Orchester-Crescendo: VBR nutzt 320 kbit/s (nötig) +- Durchschnitt: 192 kbit/s → gleiche Dateigröße wie CBR 192, aber besser klingt + +**Empfehlung (heute):** VBR (alle modernen Player unterstützen) + +--- + + + +# VI. Verlustfreie vs. Verlustbehaftete Audio-Codecs + +--- + +# Lossy-Codecs: MP3, AAC, Ogg Vorbis, Opus + +| Codec | Jahr | Entwickler | Typische Bitrate | Effizienz | Status | +|-------|------|-----------|------------------|-----------|--------| +| **MP3** | 1993 | Fraunhofer/Thomson | 128–320 kbit/s | Baseline | Patent-frei seit 2017 | +| **AAC** | 1997 | MPEG | 96–256 kbit/s | ~30% besser als MP3 | Apple Standard, weit verbreitet | +| **Ogg Vorbis** | 2000 | Xiph.Org | 96–256 kbit/s | Ähnlich AAC | Open Source, Spiele/Software | +| **Opus** | 2012 | IETF | 16–256 kbit/s | Bester Lossy-Codec | WebRTC, Streaming, wächst | + +**Opus:** Hybrid-Codec (SILK für Sprache, CELT für Musik), sehr niedrige Latenz, patent-frei +**AAC:** Apple Music, YouTube (Audio), bessere Qualität als MP3 bei gleicher Bitrate + +--- + +# Lossless-Codecs: FLAC, ALAC, APE, WAV + +| Codec | Jahr | Entwickler | Kompression | Plattform | Open Source | +|-------|------|-----------|-------------|-----------|-------------| +| **WAV** | 1991 | Microsoft/IBM | Keine (unkomprimiert) | Universal | Ja (Format) | +| **FLAC** | 2001 | Josh Coalson (Xiph) | ~50% | Alle (via FFmpeg) | Ja | +| **ALAC** | 2004 | Apple | ~40–60% | Apple, FFmpeg | Ja (seit 2011) | +| **APE** | 2000 | Matthew T. Ashland | ~50–60% | Windows (primär) | Nein (Freeware) | + +**FLAC:** Standard für Lossless (unterstützt von fast allem) +**ALAC:** Apple-Ökosystem (iTunes, iPhone), aber FFmpeg unterstützt auch +**WAV:** Unkomprimiert, riesig, aber universell kompatibel + +--- + +# Vergleichstabelle: Kompressionsrate, Qualität, Anwendung + +| Kriterium | Lossy (MP3 320) | Lossless (FLAC) | Unkomprimiert (WAV) | +|-----------|-----------------|-----------------|---------------------| +| **Dateigröße** | 2,4 MB/min | ~5 MB/min | 10,6 MB/min | +| **Qualität** | "Transparent" (für die meisten) | Perfekt (bitgenau) | Perfekt | +| **Kompression** | ~4:1 | ~2:1 | 1:1 (keine) | +| **Editing** | Vermeiden (Generationsverlust) | Gut (verlustfrei) | Perfekt | +| **Streaming** | Ideal (klein) | Möglich (WLAN) | Unpraktikabel | +| **Archivierung** | ❌ (irreversibel) | ✅ | ✅ (aber groß) | + +**Empfehlung:** +- Archiv: FLAC +- Mobil/Streaming: AAC 256 oder Opus 128 +- Produktion: WAV oder FLAC (24-bit) + +--- + +# Wann welches Format? + +| Anwendungsfall | Empfohlenes Format | Begründung | +|----------------|-------------------|------------| +| **Spotify/Streaming** | Opus 128–192 kbit/s | Effizient, niedrige Latenz | +| **iTunes/Apple Music** | AAC 256 kbit/s | Apple-Standard, gute Qualität | +| **Podcast** | MP3 64–96 kbit/s (Mono) | Sprache braucht weniger | +| **Musik-Archiv** | FLAC 16-bit/44,1 kHz | Verlustfrei, zukunftssicher | +| **Studio-Aufnahme** | WAV 24-bit/96 kHz | Maximale Qualität | +| **Hi-Res Musik** | FLAC 24-bit/96 kHz | Verlustfrei, hohe Auflösung | +| **Gaming (Voicechat)** | Opus 16–32 kbit/s | Niedrige Latenz | +| **Vinyl-Digitalisierung** | FLAC 24-bit/96 kHz | Bewahrt analoge Bandbreite | + +--- + +# Audio-Container: MP3 vs. MP4 vs. OGG + +**Container ≠ Codec** + +**Container** = "Wrapper" (enthält Audio + Metadaten + optional Video/Untertitel) +**Codec** = Kompressionsalgorithmus (wie Daten kodiert sind) + +**Beispiele:** + +| Container | Typische Codecs | Extension | Anwendung | +|-----------|----------------|-----------|-----------| +| **MP3** | MP3 | .mp3 | Musik (historisch) | +| **MP4** | AAC, MP3, ALAC | .m4a, .mp4 | iTunes, Streaming | +| **OGG** | Vorbis, Opus | .ogg, .opus | Open Source, Spiele | +| **FLAC** | FLAC | .flac | Lossless Musik | +| **Matroska** | Alles | .mka | Flexibel, wenig genutzt | + +**Verwirrendes Beispiel:** +- `.mp4` Datei kann AAC (häufig), MP3 (selten), oder ALAC (Apple) enthalten +- Nur Codec-Info gibt Qualität an, nicht Extension! + +--- + +# Metadaten: ID3-Tags, Vorbis Comments + +**Metadaten = Information über die Datei** + +Beispiele: Artist, Album, Track Number, Cover Art, Genre, Year + +**ID3-Tags (MP3):** +- ID3v1: 128 Bytes am Ende, limitiert (30 Zeichen Artist, etc.) +- ID3v2: Variable Länge am Anfang, umfangreich (Unicode, Bilder, Lyrics) + +**Vorbis Comments (FLAC, OGG):** +- Text-basiert (key=value) +- Flexibler als ID3 (keine Feldlängen-Limits) +- Beispiel: `ARTIST=Suzanne Vega`, `ALBUM=Solitude Standing` + +**Cover Art:** +- ID3v2: APIC-Frame (Attached Picture) +- Vorbis: METADATA_BLOCK_PICTURE (Base64-kodiert) + +**Tools:** `ffmpeg -i file.mp3` (zeigt Metadaten), `id3v2`, `metaflac` + +--- + +# Streaming-Formate: Adaptive Bitrate + +**Problem:** Netzwerk-Bandbreite variiert (4G → Wi-Fi → 5G) + +**Lösung: Adaptive Bitrate Streaming (ABS)** + +**Prinzip:** +1. Server kodiert Audio in mehreren Bitraten (64, 128, 256 kbit/s) +2. Client misst Bandbreite +3. Client wählt passende Bitrate +4. Wechsel on-the-fly (bei Bandbreiten-Änderung) + +**Protokolle:** +- **HLS** (HTTP Live Streaming, Apple): .m3u8 Playlist +- **DASH** (Dynamic Adaptive Streaming over HTTP, MPEG): .mpd Manifest + +**Spotify:** +- Nutzt Ogg Vorbis mit ABS (96, 160, 320 kbit/s) +- Offline: Höchste Bitrate wird gespeichert + +--- + +# Audio-Archivierung: Best Practices + +**Ziel:** Langfristige Erhaltung (>50 Jahre) + +**Format:** +- **FLAC** (16-bit/44,1 kHz minimum, besser 24-bit/96 kHz) +- **Alternativ:** WAV (aber größer, keine Metadaten) + +**Speichermedium:** +- Lokal: HDD (extern, offline) + SSD (aktiv) +- Cloud: Backblaze, AWS Glacier (redundant, geografisch verteilt) +- Tape: LTO-9 (professionell, 18 TB, lange Haltbarkeit) + +**3-2-1-Regel:** +- **3** Kopien (Original + 2 Backups) +- **2** verschiedene Medien (z.B. HDD + Cloud) +- **1** offsite (extern, Feuer/Diebstahl-schutz) + +**Migration:** +- Alle 5–10 Jahre: Kopiere auf neue Medien (HDDs degradieren) +- Prüfe Checksums (MD5, SHA-256) → Datenintegrität + +--- + + + +# VII. Kritische Perspektive +## Standards & Macht + +--- + +# Der Patentkrieg: Fraunhofer Lizenzgebühren + +**MP3-Patente (1987–2017):** +- Fraunhofer IIS + Thomson hielten Patente +- Lizenzgebühren: ~$2 pro MP3-fähiges Gerät, $0,01 pro verkauftem Song +- Einnahmen: >$1 Milliarde (geschätzt) + +**Konsequenz:** +- Open-Source-Software (Linux, VLC) musste zahlen oder umgehen +- → Vorbis/Opus als patent-freie Alternative + +**2017: Patente ausgelaufen** +- Alle MP3-Patente weltweit abgelaufen +- MP3 jetzt komplett frei nutzbar +- Aber: AAC/H.264/H.265 haben eigene Patente (MPEG LA) + +**Kritik:** +Patente auf mathematische Algorithmen umstritten (sollte Wissen frei sein?) + +--- + +# Warum Open-Source Ogg Vorbis nutzte + +**Problem:** MP3-Patente + +**Lösung:** Xiph.Org Foundation entwickelt **Ogg Vorbis** (2000) +- Patent-frei (nach bestem Wissen) +- Open Source (BSD-lizenziert) +- Bessere Qualität als MP3 (bei gleicher Bitrate) + +**Adoption:** +- **Wikipedia** (Vorbis für Audio) +- **Spotify** (Vorbis für Streaming) +- **Gaming** (Unreal Engine, Unity unterstützen Vorbis) +- **Mozilla/Firefox** (frühe Unterstützung) + +**Warum nicht dominanter?** +- MP3-Player-Hardware schon weit verbreitet (2000) +- Apple/Microsoft unterstützten nicht nativ (AAC/WMA stattdessen) +- Network-Effekt: "Alle nutzen MP3" + +**Opus (2012):** Nachfolger, noch besser, IETF-Standard, patent-frei + +--- + +# H.264 vs. AV1: Kampf um Video-Standards + +**H.264 (2003):** +- MPEG LA Patent Pool (~1.000 Patente) +- Lizenzgebühren: Komplex (Encoder/Decoder/Distribution) +- **Dominiert** (YouTube, Blu-ray, Streaming bis ~2020) + +**H.265/HEVC (2013):** +- 2× effizienter als H.264 +- **Problem:** 3 Patent Pools (MPEG LA, HEVC Advance, Velos Media) +- Lizenzgebühren unklar, hoch +- → Adoption langsam + +**AV1 (2018):** +- **Alliance for Open Media** (Google, Mozilla, Cisco, Amazon, Netflix, Intel, Microsoft, Apple) +- **Patent-frei** (Mitglieder gewähren royalty-free Lizenzen) +- ~30% effizienter als H.265 +- **Adoption wächst:** YouTube (2021), Netflix (2021), Meta, TikTok + +**Bedeutung:** +Open Standards verhindern Patent-Monopole, senken Kosten, fördern Innovation + +--- + +# Napster: Kulturelle Revolution durch MP3 + +**Napster (1999–2001):** +- P2P File-Sharing (Shawn Fanning, 19 Jahre alt) +- 80 Millionen Nutzer (Peak, 2001) +- Teilen von MP3s → Urheberrechtsverletzung (massiv) + +**Warum möglich?** +- MP3: Klein genug für 56k Modem (1 Song in ~10 Minuten) +- P2P: Dezentral (kein zentraler Server mit Musik) + +**Musikindustrie-Reaktion:** +- Klagen (Metallica, Dr. Dre, RIAA) +- 2001: Napster geschlossen (Gerichtsbeschluss) + +**Langfristige Auswirkung:** +- Zeigte: Menschen wollen digitale Musik, on-demand +- → iTunes Store (2003), Spotify (2008) +- Geschäftsmodell shift: Verkauf → Streaming + +**Zitat (Steve Jobs, 2003):** +> "Napster showed us what people wanted. We just had to make it legal." + +--- + + + +# VIII. Abschluss + +--- + +# Zusammenfassung: Die Kernkonzepte + +**Drei Ebenen des Signals:** +- Physisch (Realität) → Analog (kontinuierlich) → Digital (diskret) + +**Digitalisierung:** +- Sampling (zeitlich) + Quantisierung (Amplitude) = Zahlen +- Nyquist-Theorem: Kein Verlust wenn SR ≥ 2× f_max + +**Kompression:** +- Lossless (Redundanz) vs. Lossy (Psychoakustik) +- MP3: Psychoakustisches Modell → 10:1 Kompression + +**Formate:** +- Lossy: MP3, AAC, Opus (Streaming) +- Lossless: FLAC, ALAC (Archiv) + +**Kritische Perspektive:** +- Patente beeinflussen Standards (MP3, H.264) +- Open Standards (AV1, Opus) demokratisieren Zugang + +--- + +# Fragen & Diskussion + +**Offene Fragen?** + +**Diskussionsthemen:** +- Vinyl vs. Digital: Subjektive Präferenz vs. objektive Messung? +- Streaming vs. Ownership: Was verlieren wir kulturell? +- AI-generierte Musik: Brauchen wir noch menschliche Künstler? + +**Kontakt:** +[Ihre Kontaktinformationen] + +--- + +# Selbstlernen: Audio-Spektrogramm, HEX-Files + +**Aufgabe 1: Audio-Spektrogramm analysieren** +- Tool: Audacity (kostenlos) +- Laden Sie eine MP3 (128 kbit/s) und FLAC +- Vergleichen Sie Spektrogramm (Analyze → Plot Spectrum) +- Frage: Wo sehen Sie Unterschiede? (Hohe Frequenzen fehlen bei MP3?) + +**Aufgabe 2: HEX-File untersuchen** +- Tool: `hexdump -C file.mp3 | head` (Linux/Mac) oder HxD (Windows) +- Finden Sie Magic Bytes (FF FB oder FF F3) +- Identifizieren Sie ID3-Tag (49 44 33 = "ID3") + +**Aufgabe 3: Encodierung vergleichen** +- Enkodieren Sie WAV → MP3 (128, 192, 320 kbit/s) +- Blind-Test: Können Sie Unterschied hören? +- Tool: `ffmpeg -i input.wav -b:a 128k output.mp3` + +--- + +# Lizenz & Attribution + +**Vorlesungsinhalte:** +© 2025 [Ihr Name], Hochschule der Medien Stuttgart +Lizenz: CC BY-SA 4.0 (sofern nicht anders angegeben) + +**Verwendete Quellen:** +- Shannon, C. E. (1948). "A Mathematical Theory of Communication" +- Pohlmann, K. C. (2010). *Principles of Digital Audio* +- Sterne, J. (2012). *MP3: The Meaning of a Format* + +**Abbildungen:** +- Signal-Transformation: Eigene Darstellung +- Weitere Grafiken: Attributiert in jeweiligen Slides + +**Danksagung:** +Fraunhofer IIS (MP3-Geschichte), Xiph.Org (Opus/Vorbis-Dokumentation) + +--- + + + +# Bis zum nächsten Termin! + +**Termin 2: Bild- & Videoformate** +- JPEG, PNG, WebP +- H.264, H.265, AV1 +- Streaming-Technologien + +**Vorbereitung:** +Lesen Sie: Watkinson, J. (2004). *The MPEG Handbook* (Kapitel 1–3) diff --git a/slides/223015b/klausurfragen.md b/slides/223015b/klausurfragen.md index 05be88c..17f2999 100644 --- a/slides/223015b/klausurfragen.md +++ b/slides/223015b/klausurfragen.md @@ -48,7 +48,7 @@ section.disable { # Klausurfragen – 223015b **Dateiformate, Schnittstellen, Speichermedien · HdM Stuttgart · M. Czechowski** -Stand: 01.02.2026 +Stand: 02.02.2026 --- @@ -60,7 +60,7 @@ section.disable { > `[ESSAY]` = `essay` (Freitext, manuell bewertet) > `[SHORTANS]` = `shortanswer` (Stichwort/Satz, automatisch geprüft) > `[NUMERIC]` = `numerical` (Zahlenwert ± Toleranz) -> `[CLOZE]` = `cloze` (Lückentext, gemischt)` +> `[CLOZE]` = `cloze` (Lückentext, gemischt) --- @@ -922,6 +922,8 @@ Wie viele Farben kann ein GIF-Bild gleichzeitig anzeigen? --- + + ### M4 – WebP vs. JPEG: Vorteil? **Thema:** Bildformate – WebP **Punkte:** 1 @@ -1165,6 +1167,8 @@ Eine Festplatte wird als „1 TB" vermarktet, aber Windows zeigt nur ~931 GB an. --- + + ### O2 – HDD vs. SSD: Kern-Unterschied **Thema:** Speichermedien – HDD vs. SSD **Punkte:** 1 @@ -1181,6 +1185,8 @@ Was ist der fundamentale technische Unterschied zwischen HDD und SSD? --- + + ### O3 – HDD vs. SSD: Eigenschaften zuordnen **Thema:** Speichermedien – Vergleich **Punkte:** 2 @@ -1395,4 +1401,4 @@ Beschreiben Sie die drei Speichertechnologien **optisch** (CD/DVD/Blu-ray), **ma Erklären Sie die drei Backup-Typen **Full**, **Inkrementell** und **Differenziell**. Beschreiben Sie für jeden: (1) welche Daten gesichert werden, (2) Vor- und Nachteile, und (3) wann dieser Typ sinnvoll eingesetzt wird. -> **Musterlösung:** **Full:** Kompletter Datenbestand wird jedes Mal gesichert. Vorteil: Einfache Wiederherstellung (nur ein Backup nötig). Nachteil: Langsam, braucht viel Speicherplatz. Einsatz: Wöchentlich als Basis. **Inkrementell:** Nur Änderungen seit dem letzten Backup (egal welcher Art). Vorteil: Schnell, wenig Speicher. Nachteil: Wiederherstellung komplex (Kette aller Backups nötig). Einsatz: Täglich. **Differenziell:** Änderungen seit dem letzten Full-Backup. Vorteil: Schneller als Full, einfachere Wiederherstellung als Inkrementell. Nachteil: Wächst täglich. Einsatz: Mittelweg bei moderatem Datenvolumen. +> **Musterlösung:** **Full:** Kompletter Datenbestand wird jedes Mal gesichert. Vorteil: Einfache Wiederherstellung (nur ein Backup nötig). Nachteil: Langsam, braucht viel Speicherplatz. Einsatz: Wöchentlich als Basis. **Inkrementell:** Nur Änderungen seit dem letzten Backup (egal welcher Art). Vorteil: Schnell, wenig Speicher. Nachteil: Wiederherstellung komplex (Kette aller Backups nötig). Einsatz: Täglich. **Differenziell:** Änderungen seit dem letzten Full-Backup. Vorteil: Schneller als Full, einfachere Wiederherstellung als Inkrementell. Nachteil: Wächst täglich. Einsatz: Mittelweg bei moderatem Datenvolumen. \ No newline at end of file diff --git a/slides/223015c/01-geschichte-grundlagen-html.md b/slides/223015c/01-geschichte-grundlagen-html.md index 44b3604..5dbaf2d 100644 --- a/slides/223015c/01-geschichte-grundlagen-html.md +++ b/slides/223015c/01-geschichte-grundlagen-html.md @@ -668,6 +668,27 @@ Die Frage: Wer entscheidet, was mit Technologie gemacht wird? Die Entwickler? Di --- + + + + +# Von-Neumann-Architektur: Erklaerung + +**Definition:** Das revolutionaere Prinzip, dass Programme und Daten im selben Speicher liegen und Programme somit wie Daten behandelt werden koennen. + +**Kernpunkte:** +- **Stored Program Concept:** Programme sind austauschbare Daten +- **Universalrechner:** Gleiche Hardware fuer beliebige Aufgaben +- **Software-Flexibilitaet:** Programme koennen geladen, geaendert und geloescht werden + +**Vorher (ENIAC):** Programmierung durch Umstecken von Kabeln → Tage fuer jedes neue Programm + +**Nachher:** Software als austauschbare Datei → Betriebssysteme, Apps, Updates moeglich + +**Harvard-Architektur (Alternative):** Getrennter Speicher fuer Code und Daten → schneller, aber weniger flexibel (Arduino, DSPs) + +--- + # Vom Militär zum Netz diff --git a/slides/223015c/klausurfragen.md b/slides/223015c/klausurfragen.md index f9490d0..f79cead 100644 --- a/slides/223015c/klausurfragen.md +++ b/slides/223015c/klausurfragen.md @@ -48,7 +48,7 @@ section.disable { # Klausurfragen – 223015c **IT-Grundlagen · HdM Stuttgart · M. Czechowski** -Stand: 01.02.2026 +Stand: 02.02.2026 --- @@ -60,7 +60,7 @@ section.disable { > `[ESSAY]` = `essay` (Freitext, manuell bewertet) > `[SHORTANS]` = `shortanswer` (Stichwort/Satz, automatisch geprüft) > `[NUMERIC]` = `numerical` (Zahlenwert ± Toleranz) -> `[CLOZE]` = `cloze` (Lückentext, gemischt)` +> `[CLOZE]` = `cloze` (Lückentext, gemischt) --- @@ -138,6 +138,7 @@ Erklären Sie die fünf Komponenten der Von-Neumann-Architektur: **Rechenwerk (A --- + ## BLOCK B – Netzwerk-Grundlagen (TCP/IP) @@ -696,7 +697,7 @@ Was ist die Hauptfunktion eines DNS-Servers? -### D2 – DNS: Zeitlicher Ablauf +### D2-alt – DNS: Zeitlicher Ablauf **Thema:** DNS – Rolle im Gesamtablauf **Punkte:** 2 **Typ:** `[MC]` @@ -994,6 +995,7 @@ Erklären Sie die drei Typen von Einschränkungen: **permanent**, **temporär** --- + ### H3 – Curb-Cut-Effekt: Beispiel identifizieren