From 81c29a9c93eceecbd8ea604199c79c968223fef4 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Sun, 21 Dec 2025 22:11:36 +0100
Subject: [PATCH] update termin-2 slides

---
 ...01-10-termin-2-netzwerke-protokolle-css.md | 72 ++++++++++---------
 1 file changed, 37 insertions(+), 35 deletions(-)

diff --git a/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md b/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
index a48e20f..b2cd086 100644
--- a/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
+++ b/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
@@ -72,17 +72,15 @@ Hochschule der Medien Stuttgart
 
 **Was wir gelernt haben:**
 
-- Geschichte: Hollerith → IBM → Von Neumann → ARPANET
+- Geschichte: Lovelace -> Hollerith → IBM -> Turing → Von Neumann → ARPANET -> Kalifornische ForscherInnen
 - Von-Neumann-Architektur (5 Komponenten)
-- Bits, Bytes, Hexadezimal
-- HTML-Grundlagen & semantische Tags
+- Bits, Bytes, Hexadezimal (8Bits = 2 * 4Bits = 16 * 16 Hexadezimalzahlen)
 
-**Fragen? Probleme bei der Fleißaufgabe?**
+**Fragen? Unklarheiten?**
 
 <!--
 Kurze Wiederholung
 Fragen klären
-Wer hat die Fleißaufgabe gemacht?
 -->
 
 ---
@@ -90,15 +88,22 @@ Wer hat die Fleißaufgabe gemacht?
 # Heute
 
 **Vormittag:**
-- Netzwerke vertieft (OSI, TCP/IP)
+- Netzwerke (OSI, TCP/IP)
 - DNS: Wie funktionieren Domain-Namen?
-- HTTP im Detail
+- HTTP(S) im Detail
 
 **Nachmittag:**
 - CSS-Grundlagen
 - Selektoren & Spezifität
-- Layouts mit Flexbox
-- Hands-On: Eure Seite stylen
+- Hands-On: Wir bauen uns einen eigenen Caption Generator
+
+---
+
+# Ressourcen zum Selbstlernen
+
+* Online Code-Editor: https://codepen.io/pen/
+* MDN (Mozilla Developer Network): https://developer.mozilla.org/de/
+* HTML-Referenz: https://nextlevelshit.github.io/html-over-js/
 
 ---
 
@@ -111,13 +116,13 @@ Wer hat die Fleißaufgabe gemacht?
 
 # Wiederholung: OSI-Modell
 
-**Merksatz:** "**A**lle **d**eutschen **S**tudenten **t**rinken **v**erschiedene **S**orten **B**ier"
+**Merksatz:** "**A**lle **d**eutschen **S**studierenden **t**rinken **v**erschiedene **S**orten **B**ier"
 
 | Schicht | Name | Merksatz |
 |---------|------|----------|
 | 7 | **A**nwendung | **A**lle |
 | 6 | **D**arstellung | **d**eutschen |
-| 5 | **S**itzung | **S**tudenten |
+| 5 | **S**itzung | **S**studierenden |
 | 4 | **T**ransport | **t**rinken |
 | 3 | **V**ermittlung | **v**erschiedene |
 | 2 | **S**icherung | **S**orten |
@@ -284,6 +289,12 @@ ACK bestätigt Empfang
 
 ---
 
+# Klausurrelevant: TCP/IP und UDP
+
+<!-- TODO: Farbig-hinterlegten Container mit komprimierenten Infos zu beiden Protokollen, Vor und Nachteilen etc. -->
+
+---
+
 # Schicht 7: Anwendung
 
 **Protokolle, die wir täglich nutzen:**
@@ -328,14 +339,15 @@ DNS macht Internet benutzbar
 # DNS-Hierarchie
 
 ```
-                    . (Root)
-                   /|\
-                  / | \
-               .de .com .org
-              /       \
-           hdm-stuttgart  google
+                  (Root)
+                     . 
+                   / | \
+                 /   |   \
+               .de .org .com
+               /           \
+         hdm-stuttgart   google
               |            |
-            www          mail
+            www           mail
 ```
 
 **FQDN:** `www.hdm-stuttgart.de.` (mit Punkt am Ende!)
@@ -504,13 +516,6 @@ POST = nicht idempotent
 
 <!-- _class: lead -->
 
-# Pause
-## 15 Minuten
-
----
-
-<!-- _class: lead -->
-
 # Teil 2: CSS
 ## Webseiten gestalten
 
@@ -551,13 +556,14 @@ Separation of Concerns
 <style>p { color: blue; }</style>
 ```
 
-**Option 3: Inline** (vermeiden!)
+**Option 3: Inline als HTML-Attribute** (vermeiden!)
 ```html
 <p style="color: blue;">...</p>
 ```
 
 <!--
 Externe Datei = wiederverwendbar, cachebar
+Option 3 vermeiden aufgrund der hohen Spezifiät (sog. Code Smell)
 -->
 
 ---
@@ -842,18 +848,10 @@ vw/vh = Viewport (sichtbarer Bereich)
 - **Basics:** Alle machen
 - **Advanced:** Wer möchte
 
----
 
 <!-- _class: lead -->
 
-# Mittagspause
-## 60 Minuten
-
----
-
-<!-- _class: lead -->
-
-# Teil 3: Layouts
+# Teil 3: Layouts (optional)
 ## Flexbox & mehr
 
 ---
@@ -1029,6 +1027,10 @@ Logo links, Links rechts
 Oder gleichmäßig verteilt
 -->
 
+---
+
+
+
 ---
 
 # Pseudo-Klassen