add slide content improvements and dev server setup

223015b: - add WTF hex code explanation slide (89=137 decimal, PNG signature) - add ASCII lead slide with historical context - remove Hilbert-Studie reference from title 223015c termin 2: - add OSI layer 5 (session) and layer 6 (presentation) slides - add URL/domain anatomy slide - mark HTTP/S section as klausur - improve status codes formatting with client/server examples - add CRUD column to HTTP methods table infrastructure: - add dev-server.sh for multi-course development - update generate-index.sh with course-specific colors - add QR codes for slide URLs
2025-12-30 16:24:44 +01:00
parent 0ff5e94e20
commit 1b9b2f315a
36 changed files with 837 additions and 230 deletions
--- a/courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md
+++ b/courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md
@@ -65,7 +65,14 @@ Hochschule der Medien Stuttgart

 **Wintersemester 2025/26**

-[https://git.librete.ch/hdm/223015c](https://git.librete.ch/hdm/223015c)
+[https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-223015c.png)

 ---

@@ -608,9 +615,17 @@ Euer Laptop, euer Handy, der Server dieser Präsentation
 **Wichtig:** Programme und Daten **gemeinsam** im Speicher!

 <!--
-ALU = Arithmetic Logic Unit
-Bus = Datenautobahn zwischen Komponenten
-Speicher enthält beides: Was zu tun ist (Programm) + Womit (Daten)
+VON-NEUMANN-ARCHITEKTUR (1945): Grundlage aller modernen Computer
+5 KOMPONENTEN:
+- ALU (Arithmetic Logic Unit): Rechnet (+, -, ×, ÷) und vergleicht (>, <, =)
+- Steuerwerk: Holt Befehle, dekodiert sie, steuert Ausführung (Fetch-Decode-Execute)
+- Speicherwerk: RAM (flüchtig) + ROM (permanent), enthält Code UND Daten
+- Ein-/Ausgabe (I/O): Tastatur, Maus, Bildschirm, Netzwerk, USB, Sensoren
+- Bus-System: Adressbus (wo), Datenbus (was), Steuerbus (wie)
+KERNPRINZIP: Stored Program Concept - Programme im selben Speicher wie Daten
+VORHER (z.B. ENIAC): Programme durch Umstecken von Kabeln, tagelange Arbeit
+NACHHER: Programme als austauschbare Daten → Flexibilität, Software-Industrie möglich
+PRÜFUNGSRELEVANT: 5 Komponenten benennen und erklären können, Stored Program Concept
 -->

 ---
@@ -632,9 +647,19 @@ Laptop, Smartphone, Server, Spielkonsole...
 (separate Speicher für Code und Daten → schneller für Echtzeitanwendungen)

 <!--
-Harvard-Architektur: AVR, PIC, viele ARM-Prozessoren
-Modified Harvard in modernen CPUs (separate Caches)
-Für Medienwirtschaft: Von-Neumann-Konzept reicht
+BEDEUTUNG VON-NEUMANN-ARCHITEKTUR:
+- Betriebssystem möglich: Lädt verschiedene Programme aus gleichem Speicher
+- Apps installierbar: Können gelöscht/installiert werden ohne Hardware-Änderung
+- Multitasking: Mehrere Programme gleichzeitig im Speicher
+- Updates: Software austauschbar, Hardware bleibt gleich
+- Universalrechner: Gleiche Hardware für Text, Spiele, Video, Wissenschaft
+HARVARD-ARCHITEKTUR (Alternative):
+- Separate Speicher für Code und Daten
+- Vorteil: Schneller (paralleler Zugriff), sicherer (Code nicht überschreibbar)
+- Nachteil: Weniger flexibel, aufwändiger
+- Anwendung: Mikrocontroller (Arduino, ESP32), DSPs, einige ARM-Chips
+MODERNE CPUs: Modified Harvard (L1-Cache getrennt für Speed, RAM gemeinsam für Flexibilität)
+PRÜFUNGSRELEVANT: Warum Von-Neumann revolutionär, Unterschied zu Harvard, Beispiele
 -->

 ---
@@ -1033,20 +1058,35 @@ Formattierungssprache
 <html>
  <head>
    <title>Im Browsertab als Überschrift sichtbar</title>
-    
+
    <meta name="description" content="" />
-    
+
    <meta name="og:image" content="https://...." />
  </head>
-   
+
  ...
-   
+
 </html>
 ```

 * <small>*Webseiten werden nicht nur von Menschen besucht, sondern auch von Suchmaschinen, Programmen, Bots etc.*</small>
 * <small>*Metadaten helfen bspw. auch Screen-Readern beim "Verstehen" der Inhalte*</small>

+<!--
+HEAD-BEREICH: Metadaten, nicht sichtbar im Browser-Fenster
+WICHTIGE META-TAGS:
+- <title>: Browser-Tab, Lesezeichen, Suchergebnis-Titel
+- <meta name="description">: Suchergebnis-Snippet (max. 160 Zeichen)
+- <meta name="viewport">: Mobile Darstellung (width=device-width)
+- <meta charset="UTF-8">: Zeichenkodierung (Umlaute!)
+OPEN GRAPH (og:*): Social Media Vorschau (Facebook, LinkedIn, WhatsApp)
+- og:title, og:description, og:image, og:url
+TWITTER CARDS: twitter:card, twitter:title, twitter:image
+SEO-RELEVANZ: Google nutzt title + description für Ranking und Snippet
+ACCESSIBILITY: <html lang="de"> für Screenreader-Aussprache
+PRÜFUNGSRELEVANT: Was gehört in <head>, Unterschied zu <body>, wichtigste Meta-Tags
+-->
+
 ---

 # HTML-Tags und Attribute
--- a/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
+++ b/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
@@ -65,6 +65,15 @@ Hochschule der Medien Stuttgart

 **Wintersemester 2025/26**

+[https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-223015c.png)
+
 ---

 <!-- _class: lead -->
@@ -165,10 +174,19 @@ Internet nutzt beides: TCP = verbindungsorientiert, UDP = verbindungslos
 | 1 | Bitübertragung | Kabel, WLAN |

 <!--
-OSI = Open Systems Interconnection
-ISO-Standard
-Theoretisches Modell
-TCP/IP ist die praktische Implementierung
+OSI-MODELL: Open Systems Interconnection (1984, ISO 7498)
+ZWECK: Standardisierte Beschreibung von Netzwerkkommunikation
+7 SCHICHTEN (von unten nach oben):
+1. Physical: Bits über Kabel/Funk (Ethernet-Kabel, WLAN-Frequenzen)
+2. Data Link: Frames, MAC-Adressen (Ethernet, Switch)
+3. Network: Pakete, IP-Adressen, Routing (Router)
+4. Transport: Segmente, Ports, Zuverlässigkeit (TCP/UDP)
+5. Session: Verbindungsmanagement (selten separat implementiert)
+6. Presentation: Datenformat, Verschlüsselung (TLS gehört hierher)
+7. Application: Nutzer-Protokolle (HTTP, SMTP, FTP)
+MERKSATZ: "Please Do Not Throw Salami Pizza Away" (Physical→Application)
+REALITÄT: OSI ist Theorie, TCP/IP ist Praxis (fasst Schichten zusammen)
+PRÜFUNGSRELEVANT: 7 Schichten mit Beispielen, Unterschied OSI vs. TCP/IP
 -->

 ---
@@ -189,8 +207,18 @@ TCP/IP ist die praktische Implementierung
 **TCP/IP = Transmission Control Protocol / Internet Protocol**

 <!--
-TCP/IP einfacher als OSI
-Praktisch gewachsen, nicht theoretisch geplant
+TCP/IP-STACK: Praktische Implementierung des Internets
+4 SCHICHTEN statt 7:
+1. Network Access (OSI 1-2): Ethernet, WLAN, physische Übertragung
+2. Internet (OSI 3): IP-Protokoll, Routing, Adressierung
+3. Transport (OSI 4): TCP (zuverlässig) oder UDP (schnell)
+4. Application (OSI 5-7): HTTP, DNS, SMTP, SSH
+TCP vs. UDP:
+- TCP: Verbindungsorientiert, garantierte Zustellung, Reihenfolge (Web, E-Mail)
+- UDP: Verbindungslos, schneller, keine Garantie (Video-Streaming, Gaming, DNS)
+IP-PROTOKOLL: Adressierung + Routing, "Best Effort" (keine Garantie)
+ENTSTEHUNG: ARPANET 1969, TCP/IP 1983 (Flag Day)
+PRÜFUNGSRELEVANT: 4 Schichten, TCP vs. UDP Unterschied, wann welches Protokoll
 -->

 ---
@@ -463,6 +491,50 @@ ACK bestätigt Empfang

 ---

+# Schicht 5: Sitzung (Session)
+
+**Verwaltet Verbindungen zwischen Anwendungen:**
+
+- **Sessions** → Login-Sitzungen, "eingeloggt bleiben"
+- **Dialogsteuerung** → Wer darf wann senden?
+- **Synchronisation** → Wiederaufnahme nach Abbruch
+
+**Beispiele:**
+- Web-Sessions (Cookies, Tokens)
+- RPC (Remote Procedure Call)
+- NetBIOS
+
+<!--
+Session-Layer oft in Anwendung integriert
+Web: Session-ID in Cookie speichern
+Beispiel: Online-Banking Session-Timeout
+-->
+
+---
+
+# Schicht 6: Darstellung (Presentation)
+
+**Übersetzt Datenformate:**
+
+| Funktion | Beispiel |
+|----------|----------|
+| **Encoding** | UTF-8, ASCII, Unicode |
+| **Verschlüsselung** | TLS/SSL (HTTPS) |
+| **Kompression** | gzip, deflate |
+| **Serialisierung** | JSON, XML, Protobuf |
+
+**TLS/SSL:** Transport Layer Security
+→ Verschlüsselt HTTP zu HTTPS
+
+<!--
+Presentation Layer = Dolmetscher
+TLS: Handshake für Schlüsselaustausch
+Zertifikate für Authentifizierung
+Heute: Fast nur noch HTTPS
+-->
+
+---
+
 <!-- _class: klausur -->

 # Schicht 7: Anwendung
@@ -479,8 +551,21 @@ ACK bestätigt Empfang
 | **SSH** | 22 | Sichere Fernsteuerung |

 <!--
-Anwendungsschicht = was NutzerInnen "sehen"
-Ports = "Türnummern" auf Server
+ANWENDUNGSSCHICHT: Protokolle, die NutzerInnen direkt betreffen
+PORTS erklärt:
+- Server lauscht auf Port (wie Türnummer in Hochhaus)
+- Client verbindet sich zu IP:Port
+- Well-Known Ports: 0-1023 (brauchen Admin-Rechte)
+- Registered Ports: 1024-49151
+- Dynamic/Private: 49152-65535 (für Clients)
+WICHTIGE PROTOKOLLE:
+- HTTP/HTTPS: Hypertext Transfer Protocol, Webseiten (80/443)
+- DNS: Domain Name System, Namensauflösung (53, UDP+TCP)
+- SMTP/IMAP/POP3: E-Mail senden/empfangen (25,587/993/995)
+- SSH: Secure Shell, verschlüsselte Fernsteuerung (22)
+- FTP/SFTP: Dateitransfer (21/22)
+HTTPS = HTTP + TLS: Verschlüsselung, Authentifizierung, Integrität
+PRÜFUNGSRELEVANT: Wichtige Ports auswendig, HTTP vs. HTTPS, was macht DNS
 -->

 ---
@@ -572,12 +657,41 @@ MX = Mail Exchange

 ---

-<!-- _class: lead -->
+# URLs & Domains

-# HTTP im Detail
+**URL** = Uniform Resource Locator
+
+```
+https://www.example.com:443/pfad/seite.html?suche=test#kapitel2
+└─┬──┘   └──────┬──────┘└┬┘ └──────┬──────┘ └───┬────┘ └──┬───┘
+Protokoll    Hostname   Port     Pfad         Query     Fragment
+```
+
+| Begriff | Erklärung |
+|---------|-----------|
+| **Domain** | `example.com` (registrierter Name) |
+| **Subdomain** | `www`, `mail`, `api` (Prefix) |
+| **Hostname** | `www.example.com` (vollständig) |
+| **Port** | Standard: 80 (HTTP), 443 (HTTPS) |
+
+<!--
+URL = Adresse einer Ressource im Web
+Hostname = Domain + optionale Subdomain
+Port wird oft weggelassen (Standardports)
+Fragment (#) geht nicht an Server, nur Browser
+Query-String für Parameter
+-->

 ---

+<!-- _class: lead klausur -->
+
+# HTTP/S im Detail
+
+---
+
+<!-- _class: klausur -->
+
 # HTTP-Request

 ```http
@@ -603,6 +717,8 @@ Body kommt nach leerem Zeile (bei POST)

 ---

+<!-- _class: klausur -->
+
 # HTTP-Response

 ```http
@@ -614,7 +730,11 @@ Content-Length: 1234

 **Status-Codes:**
 - **2xx** Erfolg
-<!--
+- **3xx** Umleitung
+- **4xx** Client-Fehler (Browser, App, WhatsApp)
+- **5xx** Server-Fehler (Instagram, Google, HdM)
+
+<!--
 200 OK, 404 Not Found, 500 Internal Error
 -->

@@ -622,18 +742,17 @@ Content-Length: 1234

 <!-- _class: klausur -->

+# HTTP-Methoden
+
 | Methode | CRUD | Zweck | Beispiel |
 |---------|------|-------|----------|
-| **GET** | Daten abrufen | Seite laden |
-| **POST** | Daten senden | Formular absenden |
-| **PUT** | Daten ersetzen | Profil aktualisieren |
-| **PATCH** | Daten teilweise ändern | Einzelnes Feld |
-| **DELETE** | Daten löschen | Account löschen |
-
-**CRUD:** Create, Read, Update, Delete
-→ POST, GET, PUT/PATCH, DELETE
-
-<!--
+| **GET** | Read | Daten abrufen | Seite laden |
+| **POST** | Create | Daten senden | Formular absenden |
+| **PUT** | Update | Daten ersetzen | Profil aktualisieren |
+| **PATCH** | Update | Daten teilweise ändern | Einzelnes Feld |
+| **DELETE** | Delete | Daten löschen | Account löschen |
+
+<!--
 REST-APIs nutzen diese Methoden
 GET = idempotent (mehrfach = gleiches Ergebnis)
 POST = nicht idempotent
@@ -987,10 +1106,20 @@ vw/vh = Viewport (sichtbarer Bereich)
 <!--
 ACCESSIBILITY (a11y): a + 11 Buchstaben + y
 STATISTIK: ~15% der Weltbevölkerung haben eine Behinderung (WHO)
-Temporäre Einschränkungen: gebrochener Arm, helle Sonne
-Situative Einschränkungen: laute Umgebung, Baby auf dem Arm
-->
-
+ARTEN VON EINSCHRÄNKUNGEN:
+- Permanent: Blindheit, Taubheit, motorische Einschränkungen
+- Temporär: Gebrochener Arm, Augen-OP, Ohrenentzündung
+- Situativ: Helle Sonne (Kontrast), laute Umgebung (kein Audio), Baby auf Arm (eine Hand)
+ASSISTIVE TECHNOLOGIEN:
+- Screenreader: NVDA (Windows, kostenlos), VoiceOver (Apple), JAWS (kommerziell)
+- Braillezeilen: Taktile Ausgabe für Blinde
+- Switch-Geräte: Für motorische Einschränkungen
+- Spracheingabe: Dragon NaturallySpeaking, Siri, Google Assistant
+WCAG: Web Content Accessibility Guidelines (A, AA, AAA)
+EUROPEAN ACCESSIBILITY ACT: Seit Juni 2025 verpflichtend!
+PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
+-->
+
 ---

 <!-- _class: klausur -->
@@ -1012,9 +1141,21 @@ Situative Einschränkungen: laute Umgebung, Baby auf dem Arm
 <!--
 RECHTLICHER RAHMEN:
 - European Accessibility Act (EAA): EU-Richtlinie, seit 28. Juni 2025 in Kraft
-Curb-Cut-Effekt: Rampen helfen auch Kinderwagen, Koffern...
-->
-
+- Betrifft: E-Commerce, Banking, Telekommunikation, Transport, E-Books
+- BITV 2.0: Barrierefreie Informationstechnik-Verordnung (DE, öffentliche Stellen)
+- BFSG: Barrierefreiheitsstärkungsgesetz (DE-Umsetzung des EAA)
+- Strafen: Bis zu 100.000€ Bußgeld möglich
+CURB-CUT-EFFEKT:
+- Bordsteinabsenkung für Rollstuhlfahrer → hilft auch Kinderwagen, Rollkoffern, Fahrrädern
+- Untertitel für Gehörlose → helfen in lauter Umgebung, beim Sprachlernen
+- Kontrastreiche Farben → besser bei Sonnenlicht, für ältere Menschen
+BUSINESS CASE:
+- 15% Zielgruppe (Menschen mit Behinderung)
+- +20% ältere Menschen (Sehschwäche, motorische Einschränkungen)
+- SEO-Vorteile: Alt-Texte, semantisches HTML = besser für Google
+PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case
+-->
+
 ---

 # WCAG: Der Standard
--- a/courses/223015c/slides/2026-01-24-termin-3-interaktivitaet-javascript.md
+++ b/courses/223015c/slides/2026-01-24-termin-3-interaktivitaet-javascript.md
@@ -59,6 +59,15 @@ Hochschule der Medien Stuttgart

 **Wintersemester 2025/26**

+[https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-223015c.png)
+
 ---

 <!-- _class: lead -->
--- a/courses/223015c/slides/assets/qr/codepen.png
+++ b/courses/223015c/slides/assets/qr/codepen.png
--- a/courses/223015c/slides/assets/qr/codescripsi.png
+++ b/courses/223015c/slides/assets/qr/codescripsi.png
--- a/courses/223015c/slides/assets/qr/cssgridgarden.png
+++ b/courses/223015c/slides/assets/qr/cssgridgarden.png
--- a/courses/223015c/slides/assets/qr/flexboxfroggy.png
+++ b/courses/223015c/slides/assets/qr/flexboxfroggy.png
--- a/courses/223015c/slides/assets/qr/freecodecamp.png
+++ b/courses/223015c/slides/assets/qr/freecodecamp.png
--- a/courses/223015c/slides/assets/qr/html-over-js.png
+++ b/courses/223015c/slides/assets/qr/html-over-js.png
--- a/courses/223015c/slides/assets/qr/mandala.png
+++ b/courses/223015c/slides/assets/qr/mandala.png
--- a/courses/223015c/slides/assets/qr/mdn-button.png
+++ b/courses/223015c/slides/assets/qr/mdn-button.png
--- a/courses/223015c/slides/assets/qr/mdn-details.png
+++ b/courses/223015c/slides/assets/qr/mdn-details.png
--- a/courses/223015c/slides/assets/qr/mdn-dialog.png
+++ b/courses/223015c/slides/assets/qr/mdn-dialog.png
--- a/courses/223015c/slides/assets/qr/mdn-input.png
+++ b/courses/223015c/slides/assets/qr/mdn-input.png
--- a/courses/223015c/slides/assets/qr/mdn.png
+++ b/courses/223015c/slides/assets/qr/mdn.png
--- a/courses/223015c/slides/assets/qr/odinproject.png
+++ b/courses/223015c/slides/assets/qr/odinproject.png
--- a/courses/223015c/slides/assets/qr/repo-223015c.png
+++ b/courses/223015c/slides/assets/qr/repo-223015c.png
--- a/courses/223015c/slides/assets/qr/slides-223015c.png
+++ b/courses/223015c/slides/assets/qr/slides-223015c.png
--- a/courses/223015c/slides/assets/qr/vscode.png
+++ b/courses/223015c/slides/assets/qr/vscode.png