add erklaerung slides after klausur slides in 223015c

- add section.erklaerung CSS class with pink theme styling - add 6 explanation slides to 01-geschichte-grundlagen-html.md - add 10 explanation slides to 02-netzwerke-protokolle-css.md - each slide includes definition, key points, and mnemonics
2026-02-02 14:03:54 +01:00
parent c35541961e
commit 64f4729f45
2 changed files with 447 additions and 0 deletions
@@ -68,6 +68,33 @@ section.aufgabe {
 section.aufgabe footer {
  display: none;
 }
+section.erklaerung {
+  font-size: 1.1rem;
+  background: linear-gradient(180deg, #fff8fa 0%, #fef0f4 100%) !important;
+  border-left: 6px solid #a02060;
+}
+section.erklaerung h1 {
+  font-size: 1.6rem;
+  color: #a02060;
+  margin-bottom: 0.5rem;
+}
+section.erklaerung h2 {
+  font-size: 1.3rem;
+  color: #1f2937;
+  margin-top: 0;
+}
+section.erklaerung ul,
+section.erklaerung ol {
+  font-size: 1.0rem;
+  line-height: 1.4;
+}
+section.erklaerung p {
+  font-size: 1.05rem;
+  line-height: 1.5;
+}
+section.erklaerung table {
+  font-size: 0.95rem;
+}
 </style>

 <!-- _class: invert -->
@@ -652,6 +679,26 @@ PRÜFUNGSRELEVANT: 5 Komponenten benennen und erklären können, Stored Program

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Die 5 Komponenten: Erklaerung
+
+**Definition:** Die Von-Neumann-Architektur beschreibt den grundlegenden Aufbau moderner Computer in fuenf Funktionseinheiten.
+
+| Komponente | Aufgabe | Beispiel |
+|------------|---------|----------|
+| **Rechenwerk (ALU)** | Arithmetische & logische Operationen | +, -, ×, ÷, Vergleiche |
+| **Steuerwerk** | Holt, dekodiert und steuert Befehle | Fetch-Decode-Execute-Zyklus |
+| **Speicherwerk** | Speichert Programme UND Daten | RAM, ROM |
+| **Ein-/Ausgabe** | Kommunikation mit Aussenwelt | Tastatur, Monitor, USB |
+| **Bus-System** | Verbindet alle Komponenten | Adress-, Daten-, Steuerbus |
+
+**Merkhilfe:** "**R**echnen, **S**teuern, **S**peichern, **E**in/**A**us, **B**us" (RSSEAB)
+
+---
+
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
@@ -689,6 +736,27 @@ PRÜFUNGSRELEVANT: Warum Von-Neumann revolutionär, Unterschied zu Harvard, Beis

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# 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)
+
+---
+
 <!-- _class: lead -->

 # Vom Militär zum Netz
@@ -1117,6 +1185,30 @@ PRÜFUNGSRELEVANT: Was gehört in <head>, Unterschied zu <body>, wichtigste Meta

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# HTML Metadaten: Erklaerung
+
+**Definition:** Der `<head>`-Bereich enthaelt Informationen ueber das Dokument, die nicht direkt im Browser angezeigt werden.
+
+| Meta-Tag | Zweck | Beispiel |
+|----------|-------|----------|
+| `<title>` | Browser-Tab, Lesezeichen, SEO | "Meine Website" |
+| `<meta charset>` | Zeichenkodierung | UTF-8 fuer Umlaute |
+| `<meta description>` | Suchmaschinen-Snippet | Max. 160 Zeichen |
+| `<meta viewport>` | Mobile Darstellung | width=device-width |
+| `<meta og:image>` | Social Media Vorschau | Bild beim Teilen |
+
+**Wichtige Unterscheidung:**
+- `<head>`: Metadaten (fuer Browser, Suchmaschinen, Social Media)
+- `<body>`: Sichtbarer Inhalt (fuer Menschen)
+
+**Merkhilfe:** "Head = Gehirn (unsichtbar), Body = Koerper (sichtbar)"
+
+---
+
 # HTML-Tags und Attribute

 ```html
@@ -1340,6 +1432,29 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Web-Nutzung: Erklaerung
+
+**Definition:** Menschen nutzen das Web auf sehr unterschiedliche Weisen - nicht nur mit Maus und Bildschirm.
+
+**Eingabemethoden:**
+- **Maus/Trackpad:** Klicken, Scrollen, Hover
+- **Tastatur:** Tab-Navigation, Shortcuts, Pfeiltasten
+- **Screenreader:** Vorlesen von Inhalten (NVDA, VoiceOver, JAWS)
+- **Sprache/Augen:** Sprachbefehle, Eye-Tracking, Switch-Geraete
+
+**Arten von Einschraenkungen:**
+- **Permanent:** Blindheit, Taubheit, motorische Einschraenkungen
+- **Temporaer:** Gebrochener Arm, Augen-OP
+- **Situativ:** Sonnenlicht, laute Umgebung, Baby auf Arm
+
+**Merkhilfe:** "a11y" = a + 11 Buchstaben + y = "accessibility"
+
+---
+
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
@@ -1379,6 +1494,28 @@ PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Barrierefreiheit: Erklaerung
+
+**Definition:** Barrierefreiheit (Accessibility) bedeutet, dass digitale Inhalte fuer alle Menschen zugaenglich sind - unabhaengig von koerperlichen oder technischen Einschraenkungen.
+
+**Rechtlicher Rahmen:**
+- **European Accessibility Act (EAA):** Seit Juni 2025 EU-weit verpflichtend
+- **BITV 2.0:** Deutsche Verordnung fuer oeffentliche Stellen
+- **Strafen:** Bis zu 100.000 EUR Bussgeld moeglich
+
+**Curb-Cut-Effekt:** Massnahmen fuer Menschen mit Behinderung helfen allen:
+- Untertitel → laute Umgebung, Sprachlernen
+- Kontrast → Sonnenlicht, aeltere Menschen
+- Tastatur-Navigation → Power-User, RSI-Betroffene
+
+**Business Case:** ~15% Menschen mit Behinderung + ~20% Aeltere = 35% potenzielle Zielgruppe
+
+---
+
 # WCAG: Der Standard

 **W**eb **C**ontent **A**ccessibility **G**uidelines
@@ -1532,6 +1669,32 @@ Echte NutzerInnen einbeziehen = Gold-Standard

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Barrieren vermeiden: Erklaerung
+
+**Definition:** Praktische Massnahmen zur Pruefung und Sicherstellung der Barrierefreiheit von Webseiten.
+
+**Tastatur-Test (selbst durchfuehren):**
+1. Tab druecken → Springt der Fokus logisch durch die Seite?
+2. Ist der fokussierte Bereich immer sichtbar markiert?
+3. Kann man alle Funktionen ohne Maus bedienen?
+
+**Screenreader-Test:**
+- **Mac:** VoiceOver aktivieren mit `Cmd + F5`
+- **Windows:** NVDA installieren (kostenlos)
+- **Frage:** Ergibt die vorgelesene Seite Sinn?
+
+**Automatische Tools (finden ~30% der Probleme):**
+- axe DevTools, WAVE (Browser-Extensions)
+- Lighthouse (in Chrome DevTools unter F12)
+
+**Merkhilfe WCAG-Prinzipien:** "**P**erceivable, **O**perable, **U**nderstandable, **R**obust" (POUR)
+
+---
+

 <!-- _class: lead -->

@@ -71,6 +71,33 @@ section.aufgabe footer {
 section.glossar {
  font-size: 1.4rem;
 }
+section.erklaerung {
+  font-size: 1.1rem;
+  background: linear-gradient(180deg, #fff8fa 0%, #fef0f4 100%) !important;
+  border-left: 6px solid #a02060;
+}
+section.erklaerung h1 {
+  font-size: 1.6rem;
+  color: #a02060;
+  margin-bottom: 0.5rem;
+}
+section.erklaerung h2 {
+  font-size: 1.3rem;
+  color: #1f2937;
+  margin-top: 0;
+}
+section.erklaerung ul,
+section.erklaerung ol {
+  font-size: 1.0rem;
+  line-height: 1.4;
+}
+section.erklaerung p {
+  font-size: 1.05rem;
+  line-height: 1.5;
+}
+section.erklaerung table {
+  font-size: 0.95rem;
+}
 </style>

 <!-- _class: invert -->
@@ -402,6 +429,29 @@ SPEAKER NOTES:

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# TCP/IP-Modell: Erklaerung
+
+**Definition:** Das TCP/IP-Modell beschreibt die Kommunikation im Internet in vier hierarchischen Schichten.
+
+| Schicht | Frage | Protokolle | Dateneinheit |
+|---------|-------|------------|--------------|
+| 4 Anwendung | Was will ich? | HTTP, DNS, SMTP | Daten |
+| 3 Transport | Kommt es an? | TCP, UDP | Segment |
+| 2 Internet | Welcher Rechner? | IP | Paket |
+| 1 Netzzugang | Wie zum Nachbarn? | Ethernet, WLAN | Frame |
+
+**Kernprinzip:** Jede Schicht hat eine Aufgabe und kennt nur ihre Nachbarschichten.
+
+**Encapsulation:** Jede Schicht verpackt die Daten der darueberliegenden Schicht mit eigenem Header.
+
+**Merkhilfe Schichten:** "**A**lle **T**rinken **I**mmer **N**och" (Anwendung-Transport-Internet-Netzzugang)
+
+---
+
 # Schichten verpacken Daten

 ```
@@ -461,6 +511,30 @@ SPEAKER NOTES:

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Dateneinheiten: Erklaerung
+
+**Definition:** Jede Schicht im TCP/IP-Modell hat eine eigene Bezeichnung fuer die Daten, die sie verarbeitet.
+
+| Schicht | Dateneinheit | Was kommt hinzu? |
+|---------|--------------|------------------|
+| Anwendung | **Daten** (Message) | Anwendungsspezifische Infos |
+| Transport | **Segment** | Ports, Sequenznummern |
+| Internet | **Paket** | IP-Adressen (Quelle, Ziel) |
+| Netzzugang | **Frame** | MAC-Adressen, Pruefsumme |
+
+**Encapsulation-Prozess:**
+```
+Daten → [TCP-Header + Daten] → [IP-Header + Segment] → [Eth-Header + Paket + Eth-Trailer]
+```
+
+**Merkhilfe:** "**D**er **S**ache **P**raktischer **F**olgen" (Daten-Segment-Paket-Frame, von oben nach unten)
+
+---
+
 # Warum ist das clever?

 **Ohne Schichten:**
@@ -640,6 +714,29 @@ SPEAKER NOTES:

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# IP vs. MAC vs. Port: Erklaerung
+
+**Definition:** Drei verschiedene Adresstypen fuer drei verschiedene Fragen im Netzwerk.
+
+| Adresstyp | Frage | Reichweite | Aendert sich? |
+|-----------|-------|------------|---------------|
+| **IP-Adresse** | Welcher Rechner im Internet? | Global | Nein (Ziel bleibt) |
+| **MAC-Adresse** | Welches Geraet nebenan? | Lokal (1 Hop) | Ja, bei jedem Hop |
+| **Port** | Welches Programm? | Auf einem Rechner | Nein |
+
+**Analogie Briefpost:**
+- **IP** = Empfaengeradresse auf dem Brief (bleibt gleich)
+- **MAC** = "Naechstes Postamt" (aendert sich bei jeder Station)
+- **Port** = Wohnungsnummer im Mehrfamilienhaus
+
+**Merkhilfe:** "**I**P = **I**nternet-weit, **M**AC = **M**omentaner Nachbar, **P**ort = **P**rogramm"
+
+---
+
 <!-- _class: lead -->

 # Die Reise eines Klicks
@@ -922,6 +1019,31 @@ SPEAKER NOTES:

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# 3-Way-Handshake: Erklaerung
+
+**Definition:** Der TCP-Verbindungsaufbau in drei Schritten, bei dem Client und Server ihre Sequenznummern austauschen.
+
+**Die drei Schritte:**
+1. **SYN** (Client → Server): "Ich will reden, starte bei Seq=1000"
+2. **SYN-ACK** (Server → Client): "OK, ich starte bei Seq=5000, erwarte 1001"
+3. **ACK** (Client → Server): "Verstanden, erwarte 5001 - los geht's!"
+
+**Warum so kompliziert?**
+- Beide Seiten muessen **bereit** sein
+- Sequenznummern werden **synchronisiert** (daher SYN)
+- Verlorene Pakete koennen spaeter **erkannt und nachgefordert** werden
+
+**Analogie Telefonat:**
+- Klingeln → Abheben → "Hallo?" → Gespraech beginnt
+
+**Merkhilfe:** "**S**ag mir → **S**icher, **A**ntworte → **A**lles klar" (SYN → SYN-ACK → ACK)
+
+---
+
 # Nach dem Handshake

 **Status:** Die TCP-Verbindung steht.
@@ -1429,6 +1551,31 @@ SPEAKER NOTES:

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# TCP vs. UDP: Erklaerung
+
+**Definition:** Die zwei Transport-Protokolle mit unterschiedlichen Garantien und Anwendungsfaellen.
+
+| Eigenschaft | TCP | UDP |
+|-------------|-----|-----|
+| Verbindungsaufbau | Ja (3-Way-Handshake) | Nein |
+| Reihenfolge | Garantiert | Nicht garantiert |
+| Verlorene Pakete | Werden nachgefordert | Gehen verloren |
+| Geschwindigkeit | Langsamer (Overhead) | Schneller |
+
+**Wann TCP?** Wenn **alles ankommen** muss:
+- Web (HTTP/HTTPS), E-Mail, Datei-Downloads
+
+**Wann UDP?** Wenn **Geschwindigkeit** wichtiger ist als Vollstaendigkeit:
+- Video-Calls, Gaming, DNS, Streaming
+
+**Merkhilfe:** "**T**CP = **T**otal **C**omplete **P**ackages" vs. "**U**DP = **U**nsicher, **D**afuer **P**rompt"
+
+---
+
 # Warum UDP bei Video-Calls?

 **Szenario:** Ein Paket geht verloren.
@@ -1508,6 +1655,30 @@ Das wird wichtiger, wenn ihr mit REST-APIs arbeitet.

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# HTTP-Methoden: Erklaerung
+
+**Definition:** HTTP-Methoden beschreiben die gewuenschte Aktion auf einer Ressource.
+
+| Methode | Bedeutung | Typischer Einsatz |
+|---------|-----------|-------------------|
+| **GET** | Daten abrufen | Webseite laden, Bild anzeigen |
+| **POST** | Daten senden | Formular absenden, Login |
+| **PUT** | Daten ersetzen | Profil komplett aktualisieren |
+| **PATCH** | Daten teilweise aendern | Einzelnes Feld aendern |
+| **DELETE** | Daten loeschen | Account loeschen |
+
+**Idempotenz:** GET, PUT, DELETE koennen mehrfach ausgefuehrt werden mit gleichem Ergebnis. POST nicht (mehrfach absenden = mehrere Bestellungen).
+
+**REST-APIs:** Nutzen diese Methoden systematisch fuer CRUD-Operationen (Create, Read, Update, Delete).
+
+**Merkhilfe:** "**G**ib mir, **P**oste das, **P**latziere neu, **D**elete" (GET, POST, PUT, DELETE)
+
+---
+
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
@@ -1543,6 +1714,31 @@ Status-Codes sagen euch, was passiert ist.

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# HTTP Status-Codes: Erklaerung
+
+**Definition:** Dreistellige Codes, die der Server zurueckgibt, um das Ergebnis einer Anfrage zu beschreiben.
+
+| Bereich | Bedeutung | Wichtige Codes |
+|---------|-----------|----------------|
+| **2xx** | Erfolg | 200 OK, 201 Created, 204 No Content |
+| **3xx** | Umleitung | 301 Moved Permanently, 304 Not Modified |
+| **4xx** | Client-Fehler | 400 Bad Request, 403 Forbidden, 404 Not Found |
+| **5xx** | Server-Fehler | 500 Internal Error, 502 Bad Gateway, 503 Unavailable |
+
+**Haeufigste Codes im Alltag:**
+- **200:** Alles OK, hier sind die Daten
+- **404:** Seite nicht gefunden (falsche URL)
+- **403:** Zugriff verweigert (keine Berechtigung)
+- **500:** Server hat einen Fehler (nicht eure Schuld)
+
+**Merkhilfe:** "**2**=alles **g**ut, **3**=woanders, **4**=du Fehler, **5**=Server Fehler"
+
+---
+
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
@@ -1579,6 +1775,34 @@ Wie Encapsulation funktioniert.

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Netzwerke Zusammenfassung: Erklaerung
+
+**Der Ablauf eines Webseitenaufrufs:**
+1. **DNS** (UDP:53): Domain → IP-Adresse aufloesen
+2. **TCP-Handshake:** SYN → SYN-ACK → ACK (Verbindung aufbauen)
+3. **HTTP-Request:** GET /index.html (Seite anfordern)
+4. **HTTP-Response:** 200 OK + HTML (Seite erhalten)
+
+**Die 4 Schichten (TCP/IP):**
+
+| Schicht | Protokolle | Dateneinheit |
+|---------|------------|--------------|
+| Anwendung | HTTP, DNS | Daten |
+| Transport | TCP, UDP | Segment |
+| Internet | IP | Paket |
+| Netzzugang | Ethernet | Frame |
+
+**Merkhilfen:**
+- Schichten: "**A**lle **T**rinken **I**mmer **N**och"
+- Dateneinheiten: "**D**er **S**ache **P**raktischer **F**olgen"
+- IP bleibt gleich, MAC aendert sich bei jedem Hop
+
+---
+
 # Werkzeuge zum Selbst-Erkunden

 **Im Browser (F12 → Network-Tab):**
@@ -1870,6 +2094,33 @@ Inline-Styles schlagen alles – außer !important, was ihr vermeiden solltet.

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# CSS Spezifitaet: Erklaerung
+
+**Definition:** Spezifitaet bestimmt, welche CSS-Regel gewinnt, wenn mehrere Regeln auf dasselbe Element zutreffen.
+
+**Spezifitaet als 4-stellige Zahl (a,b,c,d):**
+
+| Kategorie | Gewicht | Beispiel |
+|-----------|---------|----------|
+| **a:** Inline-Style | 1,0,0,0 | `style="..."` |
+| **b:** ID | 0,1,0,0 | `#header` |
+| **c:** Klasse, Attribut, Pseudo-Klasse | 0,0,1,0 | `.wichtig`, `:hover` |
+| **d:** Element, Pseudo-Element | 0,0,0,1 | `p`, `::before` |
+
+**Vergleich:** Von links nach rechts, hoehere Zahl gewinnt.
+- 0,1,0,0 > 0,0,99,99 (eine ID schlaegt beliebig viele Klassen)
+
+**Praktische Tipps:**
+- Vermeide IDs in CSS (zu spezifisch)
+- Vermeide `!important` (bricht das System)
+- Nutze Klassen fuer wiederverwendbare Styles
+
+---
+
 # Box-Modell

 ```
@@ -2117,6 +2368,39 @@ Das Gegenteil wäre Desktop First mit max-width – aber Mobile First ist heute

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Responsive Design: Erklaerung
+
+**Definition:** Webseiten passen sich automatisch an verschiedene Bildschirmgroessen an (Desktop, Tablet, Smartphone).
+
+**Mobile First Ansatz:**
+1. Basis-CSS fuer kleine Bildschirme schreiben
+2. Mit `@media (min-width: ...)` fuer groessere Bildschirme erweitern
+
+```css
+/* Basis (Mobile) */
+.container { padding: 1rem; }
+
+/* Ab 768px (Tablet) */
+@media (min-width: 768px) { .container { padding: 2rem; } }
+
+/* Ab 1024px (Desktop) */
+@media (min-width: 1024px) { .container { max-width: 1200px; } }
+```
+
+**Typische Breakpoints:**
+- **576px:** Kleine Smartphones
+- **768px:** Tablets
+- **1024px:** Desktop
+- **1200px:** Grosse Bildschirme
+
+**Merkhilfe:** "Mobile First" = Basis klein, dann groesser werden
+
+---
+
 # Zusammenfassung CSS

 **Selektoren:**