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