223015c 02 + dhbw 01: klausurfolien markiert, prosa-sätze bei allen tabellen, layout-fixes

223015c/02:
- glossar landkarte: klausur, prosa, reihenfolge (host→client→server→req→res→protokoll), tcp/http als beispiel
- glossar adressen/daten/eigenschaften/protokolle: prosa-sätze
- tcp/ip-modell: nichtssagenden satz ersetzt
- dateneinheiten: merkhilfe durch prosa ersetzt
- osi vs tcp/ip: bg right statt h:440, prosa statt einzeiler
- port: tabelle→liste, prosa statt bullets
- ip vs mac vs port: prosa
- tcp vs udp, http-methoden, status-codes, einheiten: prosa
- selektoren id + farben: klausur markiert
- farben: mdn-link, prosa-satz

dhbw/01:
- farben: prosa-satz synchronisiert
- über-mich: collage-bild hinzugefügt

slides/223015c/02-netzwerke-protokolle-css.md

@@ -188,18 +188,23 @@ SPEAKER NOTES:
 
 ---
 
-<!-- _class: glossar -->
+<!-- _class: glossar klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #e3f2fd -->
 
 # Glossar: Die Landkarte
 
+Das Web folgt dem **Client-Server-Modell**: Ein Client (Browser) sendet einen **Request**, ein Server liefert eine **Response** – nach den Regeln eines **Protokolls**.
+
 | Begriff | Was ist das? | Analogie |
 |---------|--------------|----------|
+| **Host** | Ein Rechner im Netz | Ein Haus mit Adresse |
 | **Client** | Der, der fragt (Browser) | Gast im Restaurant |
 | **Server** | Der, der antwortet | Küche im Restaurant |
 | **Request** | Die Anfrage | Bestellung |
 | **Response** | Die Antwort | Das Essen |
-| **Protokoll** | Regeln für Kommunikation | Speisekarte + Bestellablauf |
+| **Protokoll** | Regeln für Kommunikation (z. B. TCP, HTTP) | Speisekarte + Bestellablauf |
-| **Host** | Ein Rechner im Netz | Ein Haus mit Adresse |
 
 <!--
 SPEAKER NOTES:
@@ -219,6 +224,8 @@ SPEAKER NOTES:
 
 # Glossar: Adressen & Identitäten
 
+Jedes Gerät im Netz braucht Adressen: eine **IP** für das globale Routing, eine **MAC** für das lokale Netz und einen **Port** für das richtige Programm.
+
 | Begriff | Was ist das? | Beispiel |
 |---------|--------------|----------|
 | **IP-Adresse** | Globale Adresse im Internet | `212.132.79.37` |
@@ -244,6 +251,8 @@ SPEAKER NOTES:
 
 # Glossar: Daten unterwegs
 
+Daten werden Schicht für Schicht verpackt — jede Schicht fügt einen eigenen **Header** hinzu und erzeugt so eine neue Dateneinheit.
+
 | Begriff | Was ist das? | Schicht |
 |---------|--------------|---------|
 | **Paket** | Daten + IP-Header | Internet (Layer 3) |
@@ -268,6 +277,8 @@ SPEAKER NOTES:
 
 # Glossar: Netzwerk-Eigenschaften
 
+**Latenz** und **Bandbreite** bestimmen, wie schnell Daten ankommen — Latenz misst die Verzögerung, Bandbreite die Kapazität.
+
 | Begriff | Was ist das? | Einheit |
 |---------|--------------|---------|
 | **Latenz** | Verzögerung (hin + zurück) | Millisekunden |
@@ -296,6 +307,8 @@ SPEAKER NOTES:
 
 # Glossar: Protokolle
 
+Protokolle regeln die Kommunikation auf jeder Schicht — von der Anwendung (HTTP) über den Transport (TCP/UDP) bis zum Routing (IP).
+
 | Protokoll | Wofür? | Port | Schicht |
 |-----------|--------|------|---------|
 | **HTTP** | Webseiten übertragen | 80 | Anwendung |
@@ -396,7 +409,7 @@ SPEAKER NOTES:
 | **2** | Internet | Routing, globale Adressen | IP |
 | **1** | Netzzugang | Lokale Übertragung | Ethernet, WLAN |
 
-**4 Schichten. Das reicht, um das Internet zu verstehen.**
+Jede Schicht hat genau eine Aufgabe und nutzt nur die Schicht direkt darunter.
 
 <!--
 SPEAKER NOTES:
@@ -466,8 +479,7 @@ SPEAKER NOTES:
 | Internet | IP | **Paket** | IP-Adressen |
 | Netzzugang | Ethernet | **Frame** | MAC-Adressen, Prüfsumme |
 
-Merkhilfe: **D**aten → **S**egment → **P**aket → **F**rame
+Beim Senden wandern Daten von oben nach unten — jede Schicht verpackt die darüberliegende Einheit mit einem eigenen Header.
-(„**D**er **S**ache **P**raktischer **F**olgen")
 
 <!--
 SPEAKER NOTES:
@@ -535,9 +547,9 @@ SPEAKER NOTES:
 
 # Exkurs: OSI vs. TCP/IP
 
-![h:440 center](./assets/demos/osi-tcpip-diagram.png)
+![bg right:50% fit](./assets/demos/osi-tcpip-diagram.png)
 
-OSI = Theorie. TCP/IP = Realität.
+OSI (7 Schichten) ist ein theoretisches Referenzmodell — TCP/IP (4 Schichten) beschreibt das reale Internet.
 
 <!--
 SPEAKER NOTES:
@@ -615,18 +627,14 @@ SPEAKER NOTES:
 
 # Port: Das richtige Programm
 
-![bg right:38% fit](./assets/demos/port-highlight.png)
+![bg right:35% fit](./assets/demos/port-highlight.png)
 
-- Identifiziert ein **Programm** auf einem Rechner
+Ein Port identifiziert ein **Programm** auf einem Rechner — wie eine **Wohnungstür im Mehrfamilienhaus**.
-- Ein Rechner, viele Dienste
-- Analogie: **Wohnungstür im Mehrfamilienhaus**
 
-| Port | Dienst |
+- **80** → HTTP
-|------|--------|
+- **443** → HTTPS
-| 80 | HTTP |
+- **22** → SSH
-| 443 | HTTPS |
+- **53** → DNS
-| 22 | SSH |
-| 53 | DNS |
 
 <!--
 SPEAKER NOTES:
@@ -645,6 +653,8 @@ SPEAKER NOTES:
 
 # IP vs. MAC vs. Port
 
+Drei Adresstypen arbeiten zusammen — nur die **MAC-Adresse** ändert sich unterwegs, IP und Port bleiben auf dem gesamten Weg gleich.
+
 | | IP-Adresse | MAC-Adresse | Port |
 |---|-----------|-------------|------|
 | **Frage** | Welcher Rechner? | Welches Gerät nebenan? | Welches Programm? |
@@ -1354,6 +1364,8 @@ SPEAKER NOTES:
 
 # TCP vs. UDP
 
+TCP und UDP sind beides Transport-Protokolle — TCP garantiert Vollständigkeit, UDP setzt auf Geschwindigkeit.
+
 | | TCP | UDP |
 |---|-----|-----|
 | **Verbindung** | Ja (Handshake) | Nein |
@@ -1455,6 +1467,8 @@ SPEAKER NOTES:
 
 # HTTP-Methoden
 
+HTTP-Methoden beschreiben, **was** der Client mit einer Ressource tun will.
+
 | Methode | Bedeutung | Beispiel |
 |---------|-----------|----------|
 | **GET** | Daten abrufen | Seite laden |
@@ -1516,6 +1530,8 @@ POST /users          → Neuen Benutzer erstellen
 
 # HTTP Status-Codes
 
+Jede HTTP-Response enthält einen dreistelligen Status-Code — die erste Ziffer verrät die Kategorie.
+
 ```http
 HTTP/1.1 200 OK
 HTTP/1.1 404 Not Found
@@ -1837,6 +1853,11 @@ Eine Klasse kann auf beliebig viele Elemente angewendet werden. Ein Element kann
 
 ---
 
+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #e3f2fd -->
+
 # Selektoren: ID
 
 ![bg right:35%](./assets/demos/css-selector-id.png)
@@ -2029,10 +2050,17 @@ Best Practice: Setzt das global für alle Elemente.
 
 ---
 
+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #e3f2fd -->
+
 # Farben
 
 ![bg right:35%](./assets/demos/css-colors.png)
 
+CSS kennt fünf Notationen für Farben: **Keyword**, **Hex**, **RGB**, **RGBA** (mit Transparenz) und **HSL**.
+
 ```css
 /* Keyword */
 color: red;
@@ -2050,6 +2078,8 @@ color: rgba(255, 0, 0, 0.5);
 color: hsl(0, 100%, 50%);
 ```
 
+MDN-Referenz: [CSS `<color>`](https://developer.mozilla.org/de/docs/Web/CSS/Reference/Values/color_value)
+
 <!--
 SPEAKER NOTES:
 
@@ -2070,6 +2100,8 @@ HSL: Hue, Saturation, Lightness. Manchmal intuitiver für Farbanpassungen.
 
 # Einheiten
 
+CSS-Einheiten bestimmen, ob Größen **absolut** (px) oder **relativ** zum Kontext (rem, %, vw) berechnet werden.
+
 | Einheit | Bedeutung |
 |---------|-----------|
 | `px` | Pixel (absolut) |

slides/dhbw/01_web_eng.md

@@ -77,6 +77,8 @@ a {
 
 # Über mich
 
+![bg right:33% fit](./assets/logos/collage.png)
+
 **Michael Werner Czechowski**
 
 - Systems and Platform Engineer