223015c 02: schicht-nummern auf 4-schichten-modell vereinheitlicht, alle abkürzungen bei erstnennung aufgelöst

slides/223015c/00-intro.md

@@ -97,7 +97,7 @@ Hochschule der Medien Stuttgart
 
 <!-- _class: lead -->
 
-# Herzlich willkommen!
+# Herzlich willkommen
 ## Einführung
 
 ---
@@ -116,13 +116,13 @@ Hochschule der Medien Stuttgart
 
 ---
 
-# Warum dieses Modul?
+# Motivation für dieses Modul
 
 **Das Internet ist überall** – aber was steckt dahinter?
 
 * Warum sehen Webseiten auf dem Handy anders aus?
 * Wie funktioniert eigentlich das Internet?
-* Wie erkennen Sie, ob eine Werbeagentur gute Arbeit leistet?
+* Wie erkennt ihr, ob eine Werbeagentur gute Arbeit leistet?
 * Was hat ein Unterseekabel mit meiner E-Mail zu tun?
 * **→ Die Technik dahinter verstehen und fundierte Entscheidungen treffen**
 
@@ -136,13 +136,13 @@ Als Digital- und MedienwirtschaftlerInnen werdet ihr täglich mit technischen Fr
 * Wie baue ich eine barrierearme Webseite?
 * Welches Protokoll für welchen Zweck?
 * Wie funktioniert das Web hinter den Kulissen?
-* **→ Mitreden können – und selbst Webseiten bauen!**
+* **→ Mitreden können – und selbst Webseiten bauen**
 
 ---
 
-# Was Sie hier lernen werden
+# Lernziele
 
-**In dieser Veranstaltung erwerben Sie folgende Kompetenzen:**
+**In dieser Veranstaltung erwerbt ihr folgende Kompetenzen:**
 
 * Geschichte des Computers und Internets
 * HTML-Grundlagen und semantisches Markup
@@ -172,7 +172,7 @@ Als Digital- und MedienwirtschaftlerInnen werdet ihr täglich mit technischen Fr
 2. Netzwerke, Protokolle, **semantisches HTML** & **CSS**
 3. Interaktivität, Animationen & **JavaScript**
 
-**Ziel:** "Gelernte Hilflosigkeit" ablegen
+**Ziel:** Technische Scheu abbauen und Web-Grundlagen selbst beherrschen
 
 ---
 

slides/223015c/01-geschichte-grundlagen-html.md

@@ -126,7 +126,7 @@ Hochschule der Medien Stuttgart
 2. Netzwerke, Protokolle, **semantisches HTML** & **CSS**
 3. Interaktivität, Animationen & **JavaScript**
 
-**Ziel:** "Gelernte Hilflosigkeit" ablegen
+**Ziel:** Technische Scheu abbauen und Web-Grundlagen selbst beherrschen
 
 ---
 
@@ -403,10 +403,10 @@ Der Turing-Test (1950): Ein Interrogator kommuniziert per Text mit einem Mensche
 - Implosions-Simulationen
 - Nuklearphysik-Gleichungen
 
-**Lösung 1943:** Menschliche "Computer"
+**Lösung 1943:** Die Berechnungen übernehmen menschliche "Computer"
 → Mathematikerinnen mit Taschenrechnern & IBM-Lochkarten
 
-**Zu langsam** → Bedarf an automatischer Berechnung
+**Das ist zu langsam** → es entsteht der Bedarf an automatischer Berechnung
 
 **Schlüsselfigur:** John von Neumann (Mathematik & Stoßwellen)
 
@@ -427,7 +427,7 @@ Das ENIAC-Projekt in Philadelphia sollte die Berechnungen beschleunigen.
 # John von Neumann (1903–1957)
 
 - Geboren in Budapest, Österreich-Ungarn
-- Mit 8: Konnte Telefonbücher auswendig
+- Mit 8: Konnte ganze Telefonbücher auswendig aufsagen
 - Mit 22: Doktor in Mathematik
 
 **Beiträge:**
@@ -623,7 +623,7 @@ COBOL läuft heute noch auf Bankensystemen
 - Jeder Befehl entspricht direkt einer CPU-Instruktion
 - Hardwarenah, aber für Menschen lesbar
 
-**Fun Fact:** Chris Sawyer schrieb **RollerCoaster Tycoon** (1999) fast komplett in x86-Assembly
+**Kuriosum:** Chris Sawyer schrieb **RollerCoaster Tycoon** (1999) fast komplett in x86-Assembly
 
 <!--
 KATHLEEN BOOTH (1922–2022):
@@ -893,7 +893,7 @@ Geprägt 1948 von Claude Shannon
 
 <!--
 Alles Digitale basiert darauf
-Transistoren in CPUs: Milliarden Bits schalten Millionen Mal pro Sekunde
+Transistoren in CPUs: Milliarden Bit schalten Millionen Mal pro Sekunde
 Shannon: Begründer der Informationstheorie
 -->
 
@@ -940,19 +940,19 @@ binary 00101010 = decimal 42
 - ASCII (1963) brauchte 7 Bit für 128 Zeichen
 - 8 Bit = praktisch für Hardware (Zweierpotenz: 2³ = 8)
 - 8 Bit = 2 Hexadezimalziffern (elegante Darstellung)
-- Kleinste adressierbare Einheit im Speicher: Prozessor kann nicht einzelne Bits direkt ansprechen, immer Bytes
+- Kleinste adressierbare Einheit im Speicher: Prozessor kann nicht einzelne Bit direkt ansprechen, immer Byte
 -->
 
 ---
 
-# Was kann man mit 256 Zuständen machen?
+# 256 Zustände – was sich damit darstellen lässt
 
 - **256 Zeichen** (Buchstaben, Zahlen, Symbole)
 - **256 Graustufen** (0 = Schwarz, 255 = Weiß)
 - **256 Lautstärkestufen**
 - **Zahlen 0-255**
 
-**Für Farbe:** 3 Bytes pro Pixel (RGB)
+**Für Farbe:** 3 Byte pro Pixel (RGB)
 R=0-255, G=0-255, B=0-255 → **16,7 Millionen Farben**
 
 <!--
@@ -1004,7 +1004,7 @@ Warum gerade 8 Bit?
 <!--
 Dezimal = was wir im Alltag nutzen (10 Finger → 10 Ziffern)
 Binär = was Computer nutzen (Strom an/aus → 2 Zustände)
-Hexadezimal = Kompromiss: kompakter als Binär, aber passt perfekt auf Bytes (2 Hex-Ziffern = 1 Byte = 8 Bit)
+Hexadezimal = Kompromiss: kompakter als Binär, aber passt perfekt auf Byte (2 Hex-Ziffern = 1 Byte = 8 Bit)
 Die Basis bestimmt, wie viele Symbole pro Stelle zur Verfügung stehen:
 - Dezimal: 10 (0–9)
 - Binär: 2 (0, 1)
@@ -1021,7 +1021,7 @@ Die Basis bestimmt, wie viele Symbole pro Stelle zur Verfügung stehen:
 **Hexadezimal (Base 16):**
 `4D 50 33` (= "MP3" in ASCII)
 
-**Jede Hex-Ziffer = 4 Bits (ein "Nibble")**
+**Jede Hex-Ziffer = 4 Bit (ein "Nibble")**
 0-9, A-F (A=10, B=11, ..., F=15)
 
 `4 = 0100` `D = 1101`
@@ -1031,7 +1031,7 @@ Die Basis bestimmt, wie viele Symbole pro Stelle zur Verfügung stehen:
 <!--
 Hex = Shortcut für Menschen
 1 Byte = 2 Hex-Ziffern (00-FF)
-"Nibble" = 4 Bits = halbes Byte (Wortspiel: nibble = knabbern, byte = beißen)
+"Nibble" = 4 Bit = halbes Byte (Wortspiel: nibble = knabbern, byte = beißen)
 CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot
 -->
 
@@ -1076,7 +1076,7 @@ Dieselben 8 Byte (PNG-Dateianfang: 89 50 4E 47 0D 0A 1A 0A) — drei Perspektive
 
 ---
 
-# Wo begegnet Ihnen Hex-Code?
+# Wo euch Hex-Code begegnet
 
 | Kontext | Beispiel |
 |---------|----------|
@@ -1112,7 +1112,7 @@ Fehlercodes: Windows zeigt diese bei Bluescreens
 
 ---
 
-# Bit vs. Byte: Die Verwirrung
+# Bit vs. Byte: der Unterschied
 
 **1 Byte = 8 Bit** → Bit ÷ 8 = Byte
 
@@ -1126,7 +1126,7 @@ Fehlercodes: Windows zeigt diese bei Bluescreens
 
 
 <!--
-Bits = kleines b, Bytes = großes B
+Bit = kleines b, Byte = großes B
 Internetanbieter: Mbit/s (klingt größer!)
 100 Mbit/s ÷ 8 = 12,5 MB/s
 Warum? Marketing - 100 klingt besser als 12,5
@@ -1146,7 +1146,7 @@ Warum? Marketing - 100 klingt besser als 12,5
 **H**yper**T**ext **M**arkup **L**anguage
 
 * **Keine** Programmiersprache
-* Am ehesten eine Formattierungssprache
+* Am ehesten eine Auszeichnungssprache (Markup)
 * Beschreibt **Struktur und Aufbau** einer Webseite
   * ```html
     <p>Das ist ein Absatz.</p>
@@ -1167,8 +1167,8 @@ Aktuelle Version: HTML5 (seit 2014)
 # Was ist HTML? (2/2)
 
 * Mit HTML werden **HTML-Dokumente** beschrieben (bspw. `index.html`)
-* Ein HTML-Dokument beschreibt das/den `Document Object Model (DOM)` 
-* Der DOM ist eine **hierarchische Baumstruktur** (Kind- und Elternelemente)
+* Ein HTML-Dokument beschreibt das **Document Object Model (DOM)** 
+* Das DOM ist eine **hierarchische Baumstruktur** (Kind- und Elternelemente)
   * *parent nodes / elements*
   * *child nodes / elements*
   * *sibling nodes / elements*
@@ -1178,12 +1178,12 @@ Aktuelle Version: HTML5 (seit 2014)
 
 # HTML-Anatomie (1/2)
 
-Formattierungssprache
+HTML ist eine Auszeichnungssprache (Markup).
 
-* HTML folgt einer strengen **Syntax** zur Formattieren von digitalen Inhalten 
+* HTML folgt einer strengen **Syntax** zum Auszeichnen digitaler Inhalte
   * Syntax: `<element attribute="value"> ... </element>` 
   * Öffnende und schließende HTML-Tags müssen identisch sein
-  * Das schließende Tag muss ein `/` nach der Spitzenklammer haben
+  * Das schließende Tag hat ein `/` direkt nach der öffnenden spitzen Klammer (`</p>`)
     
 ---
 
@@ -1199,7 +1199,7 @@ Formattierungssprache
     * `<b> ... </b>` fett-gedruckter Text (inline)
     * `<a> ... </a>` Hyperlink (Verlinkung zu anderen Webseiten, Bildern)
     * `<body> ... </body>` Sichtbarer Teil eines HTML-Dokuments
-    * `<details> ... </details>` Collapsable / Akkordion / Aufklapp-Text
+    * `<details> ... </details>` Aufklapp-Text (Akkordion)
   * **Selbst-schließend**
     * `<img />` Bild, Vektorgrafik etc.
     * `<input />` Eingabefeld
@@ -1385,7 +1385,7 @@ a = anchor (Anker)
 
 # Natives HTML
 
-Was noch üblicherweise mit Skriptsprachen wie JavaScript und anderen umgesetzt werden musste, kann nun HTML selber. Wer dieses dennoch verwendet, hat das einen sog. *"Code smell"*. 
+Vieles, was früher JavaScript erforderte, beherrscht HTML inzwischen selbst. Wer es dennoch per Skript löst, produziert einen sogenannten *"Code Smell"*.
 
 | Funktion | HTML-Element |
 |----------|--------------|
@@ -1510,7 +1510,7 @@ Accessibility ist eingebaut
 
 <!-- _class: lead -->
 
-# Wie nutzen Menschen das Web?
+# Wie Menschen das Web nutzen
 
 ---
 
@@ -1554,7 +1554,7 @@ Accessibility ist eingebaut
 
 ---
 
-# Wie nutzen Menschen das Web?
+# Wie Menschen das Web nutzen
 
 | Eingabe | Nutzungsweise |
 |---------|---------------|
@@ -1613,10 +1613,10 @@ Screenreader lesen den DOM sequenziell – semantisches HTML (`<nav>`, `<main>`,
 
 ---
 
-# Warum "Barrierefreiheit"?
+# Bedeutung von "Barrierefreiheit"
 
 **Rechtlich:**
-- EU: European Accessibility Act (seit Juni 2025 in Kraft!)
+- EU: European Accessibility Act (seit Juni 2025 in Kraft)
 - DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen
 
 **Ethisch:**

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

@@ -215,13 +215,13 @@ Das Web folgt dem **Client-Server-Modell**: Ein Client (Browser) sendet einen **
 
 # 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.
+Jedes Gerät im Netz braucht Adressen: eine **IP** (Internet Protocol) für das globale Routing, eine **MAC** (Media Access Control) 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` |
 | **MAC-Adresse** | Hardware-Adresse der Netzwerkkarte | `aa:bb:cc:dd:ee:ff` |
-| **Port** | "Türnummer" auf einem Rechner | `80`, `443`, `22` |
+| **Port** | Nummer eines Programms bzw. Dienstes | `80`, `443`, `22` |
 | **DNS** | Telefonbuch: Name → IP | hdm-stuttgart.de → IP |
 | **Domain** | Menschenlesbarer Name | `hdm-stuttgart.de` |
 
@@ -248,10 +248,10 @@ Daten werden Schicht für Schicht verpackt — jede Schicht fügt einen eigenen
 |-------------|-------------------------------------------------------|--------------------------|
 | **Payload** | Die eigentlichen Nutzdaten (bspw. Request, Response)  | Anwendung                |
 | **Header**  | Metadaten vor und nach dem Payload                    | Jedes Layer              |
-| **Segment** | Payload + TCP-Header (Anwendungsport)                 | Transport (Layer 4)      |
-| **Paket**   | Payload + IP-Header (WLAN-Router)                     | Internet (Layer 3)       |
-| **Frame**   | Payload + MAC-Header (Netzwerkkarte)                  | Netzzugang (Layer 2)     |
-| **Bit**     | Abfolge von Signalen (Licht, Strom, Kabel, Mobilfunk) | Bitübertragung (Layer 1) |
+| **Segment** | Payload + TCP-Header (Anwendungsport)                 | Transport (Layer 3)      |
+| **Paket**   | Payload + IP-Header (WLAN-Router)                     | Internet (Layer 2)       |
+| **Frame**   | Payload + MAC-Header (Netzwerkkarte)                  | Netzzugang (Layer 1)     |
+| **Bit**     | Abfolge von Signalen (Licht, Strom, Kabel, Mobilfunk) | Netzzugang (Layer 1)     |
 
 
 <!--
@@ -306,9 +306,9 @@ Protokolle regeln die Kommunikation auf jeder Schicht — von der Anwendung (HTT
 | **HTTP** | Webseiten + Inhalte übertragen | 80 | Anwendung (Layer 4) |
 | **HTTPS** | HTTP + Verschlüsselung         | 443 | Anwendung (Layer 4) |
 | **DNS** | Namen → IP-Adressen            | 53 | Anwendung (Layer 4) |
-| **TCP** | Zuverlässige Übertragung       | – | Transport (Layer 4) |
-| **UDP** | Schnelle Übertragung           | – | Transport (Layer 4) |
-| **IP** | Routing durchs Internet        | – | Internet (Layer 3)  |
+| **TCP** | Zuverlässige Übertragung       | – | Transport (Layer 3) |
+| **UDP** | Schnelle Übertragung           | – | Transport (Layer 3) |
+| **IP** | Routing durchs Internet        | – | Internet (Layer 2)  |
 
 <i><small>HTTP(S) = Hypertext Transfer Protocol (Secure)</small> · <small>DNS = Domain Name System</small> · <small>TCP = Transmission Control Protocol</small> · <small>UDP = User Datagram Protocol</small> · <small>IP = Internet Protocol</small>
 </i>
@@ -350,7 +350,7 @@ Zwischen Klick und fertiger Webseite liegen viele Stationen.
 Jede Schicht spricht eine andere Sprache:
 
 - Browser → **HTTP**
-- Netzwerkkarte → **Bits und Signale**
+- Netzwerkkarte → **Bit und Signale**
 - Router → **IP-Pakete**
 - Provider → **Routing**
 
@@ -361,7 +361,7 @@ SPEAKER NOTES:
 - Browser→Server: min. 7-8 Stationen
 - Jede Station: andere Aufgabe
 - Browser versteht HTTP
-- Netzwerkkarte versteht nur Bits (Strom an/aus)
+- Netzwerkkarte versteht nur Bit (Strom an/aus)
 - Router versteht IP
 - Wie zusammenbringen?
 -->
@@ -406,6 +406,8 @@ SPEAKER NOTES:
 
 Jede Schicht hat genau eine Aufgabe und nutzt nur die Schicht direkt darunter.
 
+<small>SMTP = Simple Mail Transfer Protocol</small>
+
 <!--
 SPEAKER NOTES:
 - TCP/IP = das echte Internet
@@ -424,7 +426,7 @@ SPEAKER NOTES:
 
 # TCP/IP-Modell – Vertiefung
 
-Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum theoretischen OSI-Modell (7 Schichten, 1984). TCP/IP hat sich durchgesetzt, weil es das reale Internet beschreibt.
+Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum theoretischen OSI-Modell (Open Systems Interconnection, 7 Schichten, 1984). TCP/IP hat sich durchgesetzt, weil es das reale Internet beschreibt.
 
 **Schicht-Aufgaben im Detail:**
 
@@ -441,6 +443,8 @@ Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum
 
 **Warum Schichten?** Abstraktion. HTTP muss nicht wissen, ob Ethernet oder WLAN verwendet wird. Änderungen in einer Schicht betreffen andere nicht.
 
+<small>FTP = File Transfer Protocol · ICMP = Internet Control Message Protocol · PPP = Point-to-Point Protocol</small>
+
 ---
 
 # Schichten verpacken Daten
@@ -458,7 +462,7 @@ SPEAKER NOTES:
 - TCP: eigener Header dazu (Ports, Seq-Nr) → weiter
 - IP: eigener Header dazu (IPs) → weiter
 - Ethernet: Header + Trailer (MACs, Prüfsumme)
-- Am Ende: Bits → elektrische Signale / Funk
+- Am Ende: Bit → elektrische Signale / Funk
 - Empfang: Rückwärts auspacken
 -->
 
@@ -501,15 +505,15 @@ SPEAKER NOTES:
 | Schicht | Einheit | Header-Inhalte |
 |---------|---------|----------------|
 | Anwendung | Daten | HTTP-Header, Cookies, Content-Type |
-| Transport | Segment | Quell-/Zielport, Sequenznummer, Flags (SYN, ACK) |
-| Internet | Paket | Quell-/Ziel-IP, TTL, Protokoll (TCP=6, UDP=17) |
-| Netzzugang | Frame | Quell-/Ziel-MAC, EtherType, CRC-Prüfsumme |
+| Transport | Segment | Quell-/Zielport, Sequenznummer, Flags (SYN = Synchronize, ACK = Acknowledge) |
+| Internet | Paket | Quell-/Ziel-IP, TTL (Time To Live), Protokoll (TCP=6, UDP=17) |
+| Netzzugang | Frame | Quell-/Ziel-MAC, EtherType, CRC-Prüfsumme (Cyclic Redundancy Check) |
 
 **Overhead-Rechnung (1 Byte HTTP-Body):**
-- Ethernet: 14 + 4 Bytes (Header + Trailer)
-- IP: 20 Bytes (ohne Optionen)
-- TCP: 20 Bytes (ohne Optionen)
-- **Minimum: 58 Bytes für 1 Byte Nutzlast**
+- Ethernet: 14 + 4 Byte (Header + Trailer)
+- IP: 20 Byte (ohne Optionen)
+- TCP: 20 Byte (ohne Optionen)
+- **Minimum: 58 Byte für 1 Byte Nutzlast**
 
 **Decapsulation:** Empfänger packt in umgekehrter Reihenfolge aus. Jede Schicht prüft ihren Header (z.B. CRC) und reicht Nutzdaten nach oben.
 
@@ -577,7 +581,6 @@ SPEAKER NOTES:
 - **Global eindeutig** (im gesamten Internet)
 - Identifiziert einen **Rechner**
 - **Bleibt gleich** auf dem gesamten Weg
-- Analogie: **Empfänger auf einem Brief**
 
 Router lesen die Ziel-IP und leiten das Paket in die passende Richtung weiter.
 
@@ -600,7 +603,6 @@ aa:bb:cc:dd:ee:ff
 - **Lokal eindeutig** (nur im lokalen Netzwerk relevant)
 - Identifiziert eine **Netzwerkkarte**
 - **Ändert sich bei jedem Hop**
-- Analogie: **"Nächstes Postamt: XY"**
 
 Sie funktioniert nur innerhalb eines Netzwerksegments.
 
@@ -621,11 +623,11 @@ SPEAKER NOTES:
 
 ![bg right:35% fit](./assets/demos/port-highlight.png)
 
-Ein Port identifiziert ein **Programm** auf einem Rechner — wie eine **Wohnungstür im Mehrfamilienhaus**.
+Ein Port identifiziert ein bestimmtes **Programm** (bzw. einen Dienst) auf einem Rechner.
 
 - **80** → HTTP
 - **443** → HTTPS
-- **22** → SSH
+- **22** → SSH (Secure Shell)
 - **53** → DNS
 
 <!--
@@ -674,6 +676,11 @@ SPEAKER NOTES:
 
 Drei Adressebenen lösen drei verschiedene Probleme:
 
+**Port (Schicht 3 – Transport):**
+- 16 Bit → 65.535 mögliche Ports
+- Well-Known Ports (0–1023): HTTP=80, HTTPS=443, SSH=22
+- Ephemeral Ports (49152–65535): Dynamisch für Client-Verbindungen
+
 **IP-Adresse (Schicht 2 – Internet):**
 - Hierarchisch aufgebaut: Netzwerk-Teil + Host-Teil
 - Router lesen nur den Netzwerk-Teil für Routing-Entscheidungen
@@ -685,12 +692,7 @@ Drei Adressebenen lösen drei verschiedene Probleme:
 - Nur relevant für den **nächsten Hop** – wird bei jedem Router ersetzt
 - ARP (Address Resolution Protocol) übersetzt IP → MAC
 
-**Port (Schicht 3 – Transport):**
-- 16 Bit → 65.535 mögliche Ports
-- Well-Known Ports (0–1023): HTTP=80, HTTPS=443, SSH=22
-- Ephemeral Ports (49152–65535): Dynamisch für Client-Verbindungen
-
-**Warum ändert sich nur MAC?** IP ist das Endziel (Brief-Adresse), MAC ist der aktuelle Bote (wer trägt den Brief gerade?).
+**Nur die MAC-Adresse ändert sich unterwegs:** Die IP bezeichnet das Endziel und bleibt konstant, die MAC nur den jeweils nächsten Hop und wird an jedem Router ersetzt.
 
 ---
 
@@ -794,12 +796,12 @@ SPEAKER NOTES:
 
 ![bg right:45% fit](./assets/demos/dns-tree.png)
 
-**Dezentral:** Niemand kennt alles.
+DNS ist **dezentral** organisiert: Kein Server kennt alle Namen.
 
-Jede Ebene kennt nur die nächste:
+Jede Ebene verweist nur auf die Ebene darunter:
 
-- Root → .de, .com, .org
-- .de → alle .de-Domains
+- Root → TLDs (Top-Level-Domains: .de, .com, .org)
+- .de → autoritative Server jeder .de-Domain
 - hdm-stuttgart.de → www, mail, …
 
 <!--
@@ -850,7 +852,7 @@ SPEAKER NOTES:
 - DNS = normales Netzwerk-Protokoll
 - Nutzt UDP (schneller, kleine Anfragen)
 - Port 53
-- Wird auch verpackt: UDP→IP→Ethernet→Bits
+- Wird auch verpackt: UDP→IP→Ethernet→Bit
 -->
 
 ---
@@ -901,7 +903,7 @@ TCP ist **verbindungsorientiert**:
 - Verlorene Pakete können erkannt und neu angefordert werden
 
 **Analogie:**
-Telefonat: Klingeln → Abheben → "Hallo?" → Gespräch beginnt
+Telefonat: Klingeln → Abheben → Gespräch beginnt
 
 <!--
 SPEAKER NOTES:
@@ -961,7 +963,7 @@ Der Handshake synchronisiert **Sequenznummern** – essenziell für TCPs Zuverl
 - SYN-Flood-Attacke: Millionen SYNs ohne ACK → Server-Ressourcen erschöpft
 - Schutz: SYN-Cookies (Server speichert keinen State bis ACK kommt)
 
-**Verbindungsabbau:** 4-Way-Handshake (FIN → ACK → FIN → ACK) oder RST für sofortigen Abbruch.
+**Verbindungsabbau:** 4-Way-Handshake (FIN = Finish → ACK → FIN → ACK) oder RST (Reset) für sofortigen Abbruch.
 
 ---
 
@@ -1007,7 +1009,7 @@ Accept-Language: de-DE
 Connection: keep-alive
 ```
 
-Der Request umfasst rund 200 Bytes Text.
+Der Request umfasst rund 200 Byte Text.
 
 **GET** ruft Daten ab (im Gegensatz zu **POST**, das Daten sendet).
 **/** bezeichnet die Startseite.
@@ -1019,7 +1021,7 @@ SPEAKER NOTES:
 - "/" = Wurzel = Startseite
 - HTTP/2.0 = Protokollversion
 - Header: Kontext (Host, Browser, Sprache)
-- ~200 Bytes Text → müssen durchs Internet
+- ~200 Byte Text → müssen durchs Internet
 -->
 
 ---
@@ -1031,7 +1033,7 @@ SPEAKER NOTES:
 
 <!--
 SPEAKER NOTES:
-- 200 Bytes Request → was passiert damit?
+- 200 Byte Request → was passiert damit?
 - Schicht für Schicht verpacken
 -->
 
@@ -1123,7 +1125,7 @@ SPEAKER NOTES:
 
 # Layer 1: Physical
 
-Frame wird zu **Bits** – Bits werden zu Signalen:
+Frame wird zu **Bit** – Bit werden zu Signalen:
 
 | Medium | Signal |
 |--------|--------|
@@ -1140,7 +1142,7 @@ Ab Schicht 1 erfolgt die Übertragung physikalisch.
 <!--
 SPEAKER NOTES:
 - Ganz unten: Physik
-- Frame → Bits → Signale
+- Frame → Bit → Signale
 - Je nach Medium:
   - Kupfer: Spannung High/Low
   - Glasfaser: Licht an/aus
@@ -1169,7 +1171,7 @@ SPEAKER NOTES:
 
 Der Router verarbeitet das Frame in drei Schritten:
 
-1. **Layer 1:** Signale werden zu Bits.
+1. **Layer 1:** Signale werden zu Bit.
 2. **Layer 2:** Frame und MAC-Adresse werden geprüft, dann ausgepackt.
 3. **Layer 3:** Die Ziel-IP liegt außerhalb des lokalen Netzes.
 
@@ -1178,7 +1180,7 @@ Der Router verarbeitet das Frame in drei Schritten:
 <!--
 SPEAKER NOTES:
 - Router empfängt Frame
-- Physik: Signale → Bits
+- Physik: Signale → Bit
 - Ethernet: MAC okay? Prüfsumme okay? → auspacken
 - IP: Ziel-IP lesen → 212.132.79.37 → nicht mein Netz
 - Routing-Tabelle: In welche Richtung?
@@ -1252,7 +1254,7 @@ Am Ende erkennt der Webserver die Anfrage nach der Startseite.
 <!--
 SPEAKER NOTES:
 - Schicht für Schicht auspacken:
-  - Physik → Bits
+  - Physik → Bit
   - Ethernet → Frame prüfen → auspacken
   - IP → Ziel-IP = meine? Ja → auspacken
   - TCP → Port 443 = Webserver-Prozess → auspacken
@@ -1282,7 +1284,7 @@ Rund 45 KB HTML müssen nun zu euch übertragen werden.
 SPEAKER NOTES:
 - Antwort: 200 OK = alles gut
 - Content-Type: HTML
-- Content-Length: 45231 Bytes
+- Content-Length: 45231 Byte
 - Dann: eigentlicher HTML-Code
 -->
 
@@ -1399,7 +1401,7 @@ Beide sind Transport-Protokolle (Schicht 3), aber mit fundamental unterschiedlic
 **UDP (User Datagram Protocol):**
 - Verbindungslos (Fire-and-Forget)
 - Keine Sequenznummern, keine ACKs
-- Header nur 8 Bytes (TCP: 20+ Bytes)
+- Header nur 8 Byte (TCP: 20+ Byte)
 - Anwendung muss selbst für Zuverlässigkeit sorgen
 
 | Anwendung | Protokoll | Grund |
@@ -1440,9 +1442,9 @@ SPEAKER NOTES:
 
 **MTU** = Maximum Transmission Unit
 
-Ein Ethernet-Frame kann maximal **1500 Bytes** Nutzdaten transportieren.
+Ein Ethernet-Frame kann maximal **1500 Byte** Nutzdaten transportieren.
 
-**Problem:** Ein Foto hat 3.000.000 Bytes.
+**Problem:** Ein Foto hat 3.000.000 Byte.
 
 **Lösung:** TCP zerschneidet die Daten in ~2000 Segmente.
 Jedes Segment hat eine Sequenznummer.
@@ -1451,7 +1453,7 @@ Der Empfänger setzt sie zusammen.
 <!--
 SPEAKER NOTES:
 - MTU = physikalisches Limit
-- Ethernet-Frame: max 1500 Bytes Nutzdaten
+- Ethernet-Frame: max 1500 Byte Nutzdaten
 - Webseite 100KB, Video Gigabytes?
 - TCP zerschneidet in passende Stücke
   - Jedes mit Sequenznummer
@@ -1516,7 +1518,7 @@ HTTP-Methoden definieren die **Semantik** der Anfrage – was der Client vom Ser
 **Idempotent:** Mehrfaches Ausführen hat denselben Effekt wie einmaliges (GET, PUT, DELETE).
 **Safe:** Ändert nichts am Server (nur GET, HEAD, OPTIONS).
 
-**REST-Prinzip:** URLs identifizieren Ressourcen, Methoden definieren Aktionen.
+**REST-Prinzip** (Representational State Transfer): URLs identifizieren Ressourcen, Methoden definieren Aktionen.
 ```
 GET /users/42        → Benutzer 42 abrufen
 PUT /users/42        → Benutzer 42 vollständig ersetzen
@@ -1584,7 +1586,7 @@ Die erste Ziffer kategorisiert die Antwort:
 - **301 vs. 302:** 301 = permanent umgezogen (Cache-fähig), 302 = temporär (nicht cachen)
 - **304 Not Modified:** Browser hat Cache, Server bestätigt: noch aktuell → spart Bandbreite
 
-**API-Design:** Korrekte Status-Codes sind wichtig für Clients. `200` bei Fehler mit `{"error": "..."}` im Body ist schlechtes Design.
+**API-Design** (Application Programming Interface): Korrekte Status-Codes sind wichtig für Clients. `200` bei Fehler mit `{"error": "..."}` im Body ist schlechtes Design.
 
 ---
 
@@ -1714,7 +1716,7 @@ p {
 }
 ```
 
-- Trennt **Inhalt** (HTML) von **Darstellung** (CSS)
+- Trennt **Inhalt** (HTML – Hypertext Markup Language) von **Darstellung** (CSS)
 - "Cascading" = Regeln können überschrieben werden
 - Eine CSS-Datei kann viele HTML-Seiten stylen
 
@@ -1984,7 +1986,7 @@ Spezifität bestimmt, welche CSS-Regel gewinnt, wenn mehrere auf dasselbe Elemen
 - Eine ID schlägt jede Anzahl von Klassen
 - `!important` bricht alles → vermeiden, da schwer zu überschreiben
 
-**Best Practice:** Flache Spezifität anstreben. BEM-Methodik (`.block__element--modifier`) hält Spezifität gleichmäßig niedrig.
+**Best Practice:** Flache Spezifität anstreben. BEM-Methodik (Block Element Modifier, `.block__element--modifier`) hält Spezifität gleichmäßig niedrig.
 
 ---
 
@@ -2064,7 +2066,7 @@ Best Practice: Setzt das global für alle Elemente.
 
 ![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 kennt fünf Notationen für Farben: **Keyword**, **Hex**, **RGB** (Red Green Blue), **RGBA** (RGB + Alpha) und **HSL** (Hue, Saturation, Lightness).
 
 ```css
 /* Keyword */

slides/223015c/03-interaktivitaet-javascript.md

@@ -354,13 +354,13 @@ true || false  // true (ODER)
    const hobbies = ["Hobby1", "Hobby2"];
    ```
 
-2. Gib sie aus:
+2. Gebt sie aus:
    ```javascript
    console.log(`I am ${name}, ${age} years old.`);
    console.log("My hobbies:", hobbies);
    ```
 
-3. Erstelle ein `person`-Objekt und greife auf Properties zu
+3. Erstellt ein `person`-Objekt und greift auf Properties zu
 
 ---
 
@@ -511,7 +511,7 @@ Jedes Element ist ein Objekt
 # Elemente finden
 
 ```javascript
-// Einzelnes Element (erstes gefundene)
+// Einzelnes Element (erstes gefundenes)
 document.getElementById("meinId");
 document.querySelector(".meineKlasse");
 document.querySelector("nav > a");
@@ -631,10 +631,10 @@ remove = aus DOM entfernen
 
 **Aufgaben (in script.js):**
 
-1. Ändere den Text von `#output`
-2. Füge 5 `<li>`-Elemente zur Liste hinzu (mit Schleife!)
-3. Gib jedem geraden Element eine Klasse `highlight`
-4. Style `.highlight` in CSS (z.B. andere Farbe)
+1. Ändert den Text von `#output`
+2. Fügt 5 `<li>`-Elemente zur Liste hinzu (mit Schleife)
+3. Gebt jedem geraden Element eine Klasse `highlight`
+4. Gestaltet `.highlight` in CSS (z. B. andere Farbe)
 
 ---
 
@@ -1027,7 +1027,7 @@ Es gibt keine falschen Antworten.
 
 <!-- _class: lead -->
 
-# Danke!
+# Danke
 
 **Kontakt:** lb-czechowski@hdm-stuttgart.de
 

slides/223015c/assets/demos/port-highlight.html

@@ -5,18 +5,17 @@
   <title>Port-Highlight</title>
   <style>
     html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
-    body { padding: 28px 40px; display: inline-block; }
+    body { padding: 28px 40px 110px; display: inline-block; }
     .line {
       font-family: ui-monospace, "SF Mono", monospace;
       font-size: 2.2rem;
       color: #1a1a2e;
       display: flex;
-      align-items: center;
+      align-items: baseline;
     }
     .port-wrap {
-      display: inline-flex;
-      flex-direction: column;
-      align-items: center;
+      position: relative;
+      display: inline-block;
       margin-left: 4px;
     }
     .port {
@@ -26,11 +25,20 @@
       border-radius: 4px;
       font-weight: 700;
     }
+    .below {
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 4px;
+    }
     .connector {
       width: 2px;
       height: 18px;
       background: #c2410c;
-      margin-top: 4px;
     }
     .caption-text {
       background: #fed7aa;
@@ -42,16 +50,13 @@
       font-size: 1rem;
       font-family: system-ui, sans-serif;
       margin-top: 2px;
+      white-space: nowrap;
     }
   </style>
 </head>
 <body>
   <div class="line">
-    212.132.79.37:<div class="port-wrap">
-      <span class="port">443</span>
-      <div class="connector"></div>
-      <div class="caption-text">Port 443 = HTTPS</div>
-    </div>
+    212.132.79.37:<span class="port-wrap"><span class="port">443</span><span class="below"><span class="connector"></span><span class="caption-text">Port 443 = HTTPS</span></span></span>
   </div>
 </body>
 </html>

slides/223015c/assets/demos/tcp-handshake.html

@@ -104,7 +104,7 @@
     <!-- SYN-ACK -->
     <div class="msg arrow-left msg-reverse" style="left: 83px; right: 80px; top: 180px;">
       <div class="label reply" style="left: 50%; transform: translateX(-50%);">SYN-ACK · Seq=5000, Ack=1001</div>
-      <div class="quote" style="left: 50%; transform: translateX(-50%);">"OK, ich starte bei 5000"</div>
+      <div class="quote" style="left: 50%; transform: translateX(-50%);">"OK, ich starte bei 5000 und erwarte 1001"</div>
     </div>
 
     <!-- ACK -->
@@ -113,7 +113,7 @@
       <div class="quote" style="left: 50%; transform: translateX(-50%);">"Verstanden, los geht's"</div>
     </div>
 
-    <div class="final">✓ Verbindung steht</div>
+    <div class="final">Verbindung steht</div>
   </div>
 </body>
 </html>