From 64f4729f45679b4bb1775b2610aae9ef5b0b07e6 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Mon, 2 Feb 2026 14:03:54 +0100 Subject: [PATCH] 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 --- .../223015c/01-geschichte-grundlagen-html.md | 163 ++++++++++ slides/223015c/02-netzwerke-protokolle-css.md | 284 ++++++++++++++++++ 2 files changed, 447 insertions(+) diff --git a/slides/223015c/01-geschichte-grundlagen-html.md b/slides/223015c/01-geschichte-grundlagen-html.md index a3bf414..3ee23ae 100644 --- a/slides/223015c/01-geschichte-grundlagen-html.md +++ b/slides/223015c/01-geschichte-grundlagen-html.md @@ -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; +} @@ -652,6 +679,26 @@ PRÜFUNGSRELEVANT: 5 Komponenten benennen und erklären können, Stored Program --- + + + + +# 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) + +--- + @@ -689,6 +736,27 @@ PRÜFUNGSRELEVANT: Warum Von-Neumann revolutionär, Unterschied zu Harvard, Beis --- + + + + +# 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 @@ -1117,6 +1185,30 @@ PRÜFUNGSRELEVANT: Was gehört in , Unterschied zu , wichtigste Meta --- + + + + +# HTML Metadaten: Erklaerung + +**Definition:** Der ``-Bereich enthaelt Informationen ueber das Dokument, die nicht direkt im Browser angezeigt werden. + +| Meta-Tag | Zweck | Beispiel | +|----------|-------|----------| +| `` | 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 --> diff --git a/slides/223015c/02-netzwerke-protokolle-css.md b/slides/223015c/02-netzwerke-protokolle-css.md index 434e9fd..345dfd2 100644 --- a/slides/223015c/02-netzwerke-protokolle-css.md +++ b/slides/223015c/02-netzwerke-protokolle-css.md @@ -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:**