diff --git a/Makefile b/Makefile index 3fb1613..bf21ca9 100644 --- a/Makefile +++ b/Makefile @@ -7,14 +7,18 @@ COURSES = 223015b 223015c COURSE_DIR = courses +# Port configuration (index starts at BASE_PORT, courses increment from there) +BASE_PORT = 1310 +INDEX_PORT = $(BASE_PORT) + # Course-specific settings 223015b_NAME = Dateiformate, Schnittstellen, Speichermedien -223015b_PORT = 1312 +223015b_PORT = 1311 223015b_TERMINS = 2025-12-19-termin-0-intro 2025-12-19-termin-1-grundlagen-text-audio 2026-01-09-termin-2-bild-audio-video 2026-01-23-termin-3-speichermedien-schnittstellen 2026-01-30-termin-4-distribution-apis-zukunft 2026-xx-xx-termin-5-vertiefung-offene-fragen 223015b_DEPLOY_PATH = /home/tengo/html/hdm/223015b 223015c_NAME = Internettechnologien -223015c_PORT = 1313 +223015c_PORT = 1312 223015c_TERMINS = 2025-12-20-termin-1-geschichte-grundlagen-html 2026-01-10-termin-2-netzwerke-protokolle-css 2026-01-24-termin-3-interaktivitaet-javascript 223015c_DEPLOY_PATH = /home/tengo/html/hdm/223015c @@ -59,33 +63,23 @@ build/.exists: @touch $@ # Development servers -dev: dev-index - @echo "Starting all dev servers..." - @echo "" - @echo " Index: http://localhost:1311" - @echo " 223015b: http://localhost:1312" - @echo " 223015c: http://localhost:1313" - @echo "" - @echo "Press Ctrl+C to stop all servers" - @trap 'kill 0' INT; \ - PORT=1312 npx @marp-team/marp-cli --server $(COURSE_DIR)/223015b/slides/ & \ - PORT=1313 npx @marp-team/marp-cli --server $(COURSE_DIR)/223015c/slides/ & \ - python3 -m http.server 1311 --directory .dev-index & \ - wait +dev: + @./scripts/dev-server.sh -dev-index: - @mkdir -p .dev-index - @echo 'HdM Slides

HdM Slides

Development Server

223015b - DateiformatePort 1312223015c - InternettechnikPort 1313' > .dev-index/index.html +dev-kill: + @-pkill -f "python3 -m http.server" 2>/dev/null || true + @-pkill -f "marp-cli.*--server" 2>/dev/null || true + @sleep 0.5 dev-b: - @echo "Starting 223015b dev server on port 1312..." - @echo "Open: http://localhost:1312" - PORT=1312 npx @marp-team/marp-cli --server $(COURSE_DIR)/223015b/slides/ + @echo "Starting 223015b dev server on port $(223015b_PORT)..." + @echo "Open: http://localhost:$(223015b_PORT)" + PORT=$(223015b_PORT) npx @marp-team/marp-cli --server $(COURSE_DIR)/223015b/slides/ dev-c: - @echo "Starting 223015c dev server on port 1313..." - @echo "Open: http://localhost:1313" - PORT=1313 npx @marp-team/marp-cli --server $(COURSE_DIR)/223015c/slides/ + @echo "Starting 223015c dev server on port $(223015c_PORT)..." + @echo "Open: http://localhost:$(223015c_PORT)" + PORT=$(223015c_PORT) npx @marp-team/marp-cli --server $(COURSE_DIR)/223015c/slides/ # Build functions define build_course @@ -188,10 +182,18 @@ else @echo "Done! Originals in assets-original/" endif +# Root index for /hdm/ +HDM_DEPLOY_PATH = /home/tengo/html/hdm + +build-index: build/.exists + @echo "Building root index..." + @echo 'HdM Vorlesungen

HdM Vorlesungen

Wintersemester 2025/26 · Michael Czechowski

223015b
Dateiformate, Schnittstellen, Speichermedien & Distributionswege
6 Termine · Modul "Technik 1"223015c
Grundlagen IT- und Internettechnik
3 Termine · Modul "Technik 1"
' > build/index.html + # Deploy define deploy_course @echo "Deploying $(1)..." scp build/$(1)/*.html $(DEPLOY_HOST):$($(1)_DEPLOY_PATH)/ + scp build/$(1)/*.pdf $(DEPLOY_HOST):$($(1)_DEPLOY_PATH)/ 2>/dev/null || true scp -r build/$(1)/assets/ $(DEPLOY_HOST):$($(1)_DEPLOY_PATH)/ scp -r build/$(1)/materials/ $(DEPLOY_HOST):$($(1)_DEPLOY_PATH)/ 2>/dev/null || true @echo "$(1) deployed!" @@ -203,7 +205,12 @@ deploy-b: build-b deploy-c: build-c $(call deploy_course,223015c) -deploy: deploy-b deploy-c +deploy-index: build-index + @echo "Deploying root index..." + scp build/index.html $(DEPLOY_HOST):$(HDM_DEPLOY_PATH)/ + @echo "Root index deployed!" + +deploy: build-index deploy-b deploy-c deploy-index @echo "All courses deployed!" # Clean diff --git a/courses/223015b/slides/2025-12-19-termin-0-intro.md b/courses/223015b/slides/2025-12-19-termin-0-intro.md index 2365622..a5e404d 100644 --- a/courses/223015b/slides/2025-12-19-termin-0-intro.md +++ b/courses/223015b/slides/2025-12-19-termin-0-intro.md @@ -58,7 +58,7 @@ Hochschule der Medien Stuttgart **Wintersemester 2025/26** -[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b) +[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/) --- diff --git a/courses/223015b/slides/2025-12-19-termin-1-grundlagen-text-audio.md b/courses/223015b/slides/2025-12-19-termin-1-grundlagen-text-audio.md index a85a6b9..4856ebc 100644 --- a/courses/223015b/slides/2025-12-19-termin-1-grundlagen-text-audio.md +++ b/courses/223015b/slides/2025-12-19-termin-1-grundlagen-text-audio.md @@ -64,7 +64,7 @@ Hochschule der Medien Stuttgart **Wintersemester 2025/26** -[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b) +[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/) --- @@ -99,6 +99,32 @@ Hochschule der Medien Stuttgart --- +![bg right:40%](./assets/matrix-code.png) + +# WTF!? – Auflösung + +``` +89 50 4E 47 ... +``` + +| Hex | Dezimal | ASCII | +|-----|---------|-------| +| `89` | 137 | ✗ (> 127, nicht druckbar) | +| `50` | 80 | **P** | +| `4E` | 78 | **N** | +| `47` | 71 | **G** | + +→ **PNG**-Signatur! (Das `89` markiert: "Ich bin binär, kein Text!") + + + +--- + @@ -278,25 +304,30 @@ Digital explodierte: IoT, Social Media, Cloud, Video -# Der digitale Wendepunkt (Hilbert-Studie) +# Der digitale Wendepunkt | Jahr | Analog | Digital | Digital-Anteil | |------|--------|---------|----------------| -| **1986** | 2,57 EB | 0,02 EB | **1%** | -| **2000** | ~37 EB | ~13 EB | 25% | +| **1986** | 2,6 EB | 0,02 EB | **1%** | | **2002** | — | — | **50%** (Wendepunkt) | -| **2007** | ~18 EB | ~277 EB | **94%** | +| **2007** | 18 EB | 277 EB | **94%** | -**Beobachtung:** Analog blieb nahezu konstant (~2,6 → ~18 EB) -Digital explodierte: ×14.000 in 21 Jahren +**Perspektive:** +- 1986: "Petabyte" war ein theoretisches Konzept +- 2025: ~181 Zettabyte jährlich produziert + +**Magnetband lebt:** LTO-Tapes bleiben günstigstes Archivmedium +(AWS Glacier, Film-Archive, Rechenzentren) --- @@ -345,6 +376,38 @@ Model Collapse: AI trainiert auf AI-Output → Qualitätsverlust --- + + +# ASCII +## Ein Zeichensatz to rule them all + + + +--- + @@ -837,22 +900,36 @@ Visualisierung der beiden Philosophien --- -# Zwei Philosophien + + -**Lossless (Verlustfrei):** -- Original exakt wiederherstellbar -- ZIP, PNG, FLAC -- 30-50% Ersparnis +# Kompression: Zwei Philosophien -**Lossy (Verlustbehaftet):** -- Daten irreversibel verändert -- JPEG, MP3, H.264 -- 90%+ Ersparnis +| | Lossless | Lossy | +|---|---|---| +| **Prinzip** | Redundanz entfernen | Irrelevanz entfernen | +| **Reversibel** | Ja (bitgenau) | Nein | +| **Kompression** | 30-50% | 80-99% | +| **Algorithmen** | RLE, Huffman, LZW, DEFLATE | DCT, Psychoakustik | + +**Lossless:** ZIP, PNG, FLAC, GIF +**Lossy:** JPEG, MP3, AAC, H.264, H.265, AV1 + +**Entscheidung:** Archiv/Code → Lossless, Medien → Lossy --- diff --git a/courses/223015b/slides/2026-01-09-termin-2-bild-audio-video.md b/courses/223015b/slides/2026-01-09-termin-2-bild-audio-video.md index 9d9ab11..4c35cb7 100644 --- a/courses/223015b/slides/2026-01-09-termin-2-bild-audio-video.md +++ b/courses/223015b/slides/2026-01-09-termin-2-bild-audio-video.md @@ -42,6 +42,12 @@ code { a { color: var(--color-highlight); } +section.klausur { + background: #e3f2fd !important; +} +section.klausur footer { + display: none; +} @@ -59,7 +65,14 @@ Hochschule der Medien Stuttgart **Wintersemester 2025/26** -[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b) +[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/) + +--- + + + + +![bg fit](./assets/qr/slides-223015b.png) --- @@ -104,70 +117,123 @@ Smartphone-Speicher wäre schnell voll ohne Kompression --- + + + # Rastergrafiken (Bitmaps) -**Pixelraster:** Jeder Bildpunkt hat Koordinate + Farbwert +**Aufbau:** 2D-Array von Pixeln mit Farbwerten -**Eigenschaften:** -- Je größer das Bild → größere Datei -- **Verkleinern:** Meist ohne Qualitätsverlust -- **Vergrößern:** Wird unscharf/pixelig! +**Speicherbedarf (unkomprimiert):** +Breite × Höhe × Farbtiefe (in Bytes) +→ 1920×1080 × 3 Byte (RGB) = **6,2 MB** -**Formate:** JPEG, PNG, GIF, BMP, TIFF, WebP +**Farbtiefe:** +- 1 Bit = 2 Farben (S/W) +- 8 Bit = 256 Farben (Graustufen/Palette) +- 24 Bit = 16,7 Mio. Farben (True Color) +- 32 Bit = True Color + Alpha (Transparenz) -**Verwendung:** Fotos, Screenshots, komplexe Bilder +**Skalierung:** Interpolation (Nearest Neighbor, Bilinear, Bicubic) --- + + + # Vektorgrafiken -**Mathematische Beschreibung statt Pixel** +**Speicherung als geometrische Primitive:** +- Pfade (Bézierkurven mit Kontrollpunkten) +- Grundformen (Rechteck, Ellipse, Polygon) +- Text (Glyphen als Outlines) -**Kreis speichern:** -- Rastergrafik: Tausende Pixel -- Vektorgrafik: Mittelpunkt + Radius (2 Werte!) +**SVG-Beispiel:** +`` +→ 3 Parameter statt 5.027 Pixel (r=40) -**Gespeichert werden:** -- Form (Kreis, Linie, Pfad...) -- Position, Farbe, Strichstärke, Füllung +**Rendering-Pipeline:** +Vektordaten → Rasterisierung → Framebuffer → Display -**Vorteil:** Beliebig skalierbar ohne Qualitätsverlust! - -**Formate:** SVG, PDF, AI, EPS +**Auflösungsunabhängig:** Gleiche Datei für Icon (32px) und Plakat (3m) --- -# Raster vs. Vektor + + -| | Rastergrafik | Vektorgrafik | +# Raster vs. Vektor: Entscheidungskriterien + +| Kriterium | Raster | Vektor | |---|---|---| -| **Basis** | Pixelraster | Mathematische Objekte | +| **Speicherung** | Pixelmatrix | Geometrie + Attribute | | **Skalierung** | Qualitätsverlust | Verlustfrei | -| **Dateigröße** | Abhängig von Auflösung | Abhängig von Komplexität | -| **Gut für** | Fotos | Logos, Icons, Text | -| **Formate** | JPEG, PNG, GIF | SVG, PDF, AI | +| **Komplexität** | O(Breite × Höhe) | O(Anzahl Objekte) | +| **Bearbeitung** | Pixelbasiert | Objektbasiert | -**Rasterung:** Vektorgrafik → Rastergrafik (für Bildschirm/Druck) +**Wann Raster?** Fotos, Texturen, komplexe Farbverläufe +**Wann Vektor?** Logos, Icons, Typografie, technische Zeichnungen + +**Konvertierung:** +- Raster → Vektor: Tracing (verlustbehaftet, approximiert) +- Vektor → Raster: Rasterisierung (exakt, aber auflösungsgebunden) --- @@ -365,8 +431,6 @@ GIF überlebte kulturell (Meme-Format) - HDR-Unterstützung - Patent-frei -**Problem:** Browser-Support dauert Jahre - + + +![bg fit](./assets/qr/slides-223015b.png) --- diff --git a/courses/223015b/slides/2026-01-30-termin-4-distribution-apis-zukunft.md b/courses/223015b/slides/2026-01-30-termin-4-distribution-apis-zukunft.md index 979eea9..e90ef63 100644 --- a/courses/223015b/slides/2026-01-30-termin-4-distribution-apis-zukunft.md +++ b/courses/223015b/slides/2026-01-30-termin-4-distribution-apis-zukunft.md @@ -59,7 +59,14 @@ Hochschule der Medien Stuttgart **Wintersemester 2025/26** -[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b) +[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/) + +--- + + + + +![bg fit](./assets/qr/slides-223015b.png) --- diff --git a/courses/223015b/slides/2026-xx-xx-termin-5-vertiefung-offene-fragen.md b/courses/223015b/slides/2026-xx-xx-termin-5-vertiefung-offene-fragen.md index 994a9d2..eaff42d 100644 --- a/courses/223015b/slides/2026-xx-xx-termin-5-vertiefung-offene-fragen.md +++ b/courses/223015b/slides/2026-xx-xx-termin-5-vertiefung-offene-fragen.md @@ -59,7 +59,14 @@ Hochschule der Medien Stuttgart **Wintersemester 2025/26** -[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b) +[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/) + +--- + + + + +![bg fit](./assets/qr/slides-223015b.png) --- diff --git a/courses/223015b/slides/assets/compression-types.png b/courses/223015b/slides/assets/compression-types.png index f29a122..d6b0896 100644 Binary files a/courses/223015b/slides/assets/compression-types.png and b/courses/223015b/slides/assets/compression-types.png differ diff --git a/courses/223015b/slides/assets/qr/asciitable.png b/courses/223015b/slides/assets/qr/asciitable.png new file mode 100644 index 0000000..dc3bdeb Binary files /dev/null and b/courses/223015b/slides/assets/qr/asciitable.png differ diff --git a/courses/223015b/slides/assets/qr/audacity-spectrogram.png b/courses/223015b/slides/assets/qr/audacity-spectrogram.png new file mode 100644 index 0000000..5268779 Binary files /dev/null and b/courses/223015b/slides/assets/qr/audacity-spectrogram.png differ diff --git a/courses/223015b/slides/assets/qr/mediainfo.png b/courses/223015b/slides/assets/qr/mediainfo.png new file mode 100644 index 0000000..505e90e Binary files /dev/null and b/courses/223015b/slides/assets/qr/mediainfo.png differ diff --git a/courses/223015b/slides/assets/qr/repo-223015b.png b/courses/223015b/slides/assets/qr/repo-223015b.png new file mode 100644 index 0000000..6acdf75 Binary files /dev/null and b/courses/223015b/slides/assets/qr/repo-223015b.png differ diff --git a/courses/223015b/slides/assets/qr/slides-223015b.png b/courses/223015b/slides/assets/qr/slides-223015b.png new file mode 100644 index 0000000..87c6a57 Binary files /dev/null and b/courses/223015b/slides/assets/qr/slides-223015b.png differ diff --git a/courses/223015b/slides/assets/qr/squoosh.png b/courses/223015b/slides/assets/qr/squoosh.png new file mode 100644 index 0000000..0f29b33 Binary files /dev/null and b/courses/223015b/slides/assets/qr/squoosh.png differ diff --git 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 index 40e4cb0..01dd991 100644 --- 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/) + +--- + + + + +![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! --- @@ -632,9 +647,19 @@ Laptop, Smartphone, Server, Spielkonsole... (separate Speicher für Code und Daten → schneller für Echtzeitanwendungen) --- @@ -1033,20 +1058,35 @@ Formattierungssprache Im Browsertab als Überschrift sichtbar - + - + - + ... - + ``` * *Webseiten werden nicht nur von Menschen besucht, sondern auch von Suchmaschinen, Programmen, Bots etc.* * *Metadaten helfen bspw. auch Screen-Readern beim "Verstehen" der Inhalte* + + --- # HTML-Tags und Attribute diff --git 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 index 0d615c6..a8536a8 100644 --- 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/) + +--- + + + + +![bg fit](./assets/qr/slides-223015c.png) + --- @@ -165,10 +174,19 @@ Internet nutzt beides: TCP = verbindungsorientiert, UDP = verbindungslos | 1 | Bitübertragung | Kabel, WLAN | --- @@ -189,8 +207,18 @@ TCP/IP ist die praktische Implementierung **TCP/IP = Transmission Control Protocol / Internet Protocol** --- @@ -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 + + + +--- + +# 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 + + + +--- + # Schicht 7: Anwendung @@ -479,8 +551,21 @@ ACK bestätigt Empfang | **SSH** | 22 | Sichere Fernsteuerung | --- @@ -572,12 +657,41 @@ MX = Mail Exchange --- - +# 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) | + + --- + + +# HTTP/S im Detail + +--- + + + # HTTP-Request ```http @@ -603,6 +717,8 @@ Body kommt nach leerem Zeile (bei POST) --- + + # HTTP-Response ```http @@ -614,7 +730,11 @@ Content-Length: 1234 ... ``` -**Status-Codes:** 2xx Erfolg · 3xx Umleitung · 4xx Client-Fehler · 5xx Server-Fehler +**Status-Codes:** +- **2xx** Erfolg +- **3xx** Umleitung +- **4xx** Client-Fehler (Browser, App, WhatsApp) +- **5xx** Server-Fehler (Instagram, Google, HdM) + # HTTP-Methoden -| Methode | 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 +| Methode | CRUD | Zweck | Beispiel | +|---------|------|-------|----------| +| **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 | --- @@ -1012,9 +1141,21 @@ Situative Einschränkungen: laute Umgebung, Baby auf dem Arm - Größerer Markt (~15% der Bevölkerung) --- diff --git a/courses/223015c/slides/2026-01-24-termin-3-interaktivitaet-javascript.md b/courses/223015c/slides/2026-01-24-termin-3-interaktivitaet-javascript.md index 647a2eb..f8481b0 100644 --- 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/) + +--- + + + + +![bg fit](./assets/qr/slides-223015c.png) + --- diff --git a/courses/223015c/slides/assets/qr/codepen.png b/courses/223015c/slides/assets/qr/codepen.png new file mode 100644 index 0000000..0b524bb Binary files /dev/null and b/courses/223015c/slides/assets/qr/codepen.png differ diff --git a/courses/223015c/slides/assets/qr/codescripsi.png b/courses/223015c/slides/assets/qr/codescripsi.png new file mode 100644 index 0000000..97ecfae Binary files /dev/null and b/courses/223015c/slides/assets/qr/codescripsi.png differ diff --git a/courses/223015c/slides/assets/qr/cssgridgarden.png b/courses/223015c/slides/assets/qr/cssgridgarden.png new file mode 100644 index 0000000..a790a33 Binary files /dev/null and b/courses/223015c/slides/assets/qr/cssgridgarden.png differ diff --git a/courses/223015c/slides/assets/qr/flexboxfroggy.png b/courses/223015c/slides/assets/qr/flexboxfroggy.png new file mode 100644 index 0000000..7efba01 Binary files /dev/null and b/courses/223015c/slides/assets/qr/flexboxfroggy.png differ diff --git a/courses/223015c/slides/assets/qr/freecodecamp.png b/courses/223015c/slides/assets/qr/freecodecamp.png new file mode 100644 index 0000000..8ce9127 Binary files /dev/null and b/courses/223015c/slides/assets/qr/freecodecamp.png differ diff --git a/courses/223015c/slides/assets/qr/html-over-js.png b/courses/223015c/slides/assets/qr/html-over-js.png new file mode 100644 index 0000000..70a4dbd Binary files /dev/null and b/courses/223015c/slides/assets/qr/html-over-js.png differ diff --git a/courses/223015c/slides/assets/qr/mandala.png b/courses/223015c/slides/assets/qr/mandala.png new file mode 100644 index 0000000..30438c2 Binary files /dev/null and b/courses/223015c/slides/assets/qr/mandala.png differ diff --git a/courses/223015c/slides/assets/qr/mdn-button.png b/courses/223015c/slides/assets/qr/mdn-button.png new file mode 100644 index 0000000..9477b6d Binary files /dev/null and b/courses/223015c/slides/assets/qr/mdn-button.png differ diff --git a/courses/223015c/slides/assets/qr/mdn-details.png b/courses/223015c/slides/assets/qr/mdn-details.png new file mode 100644 index 0000000..6f532de Binary files /dev/null and b/courses/223015c/slides/assets/qr/mdn-details.png differ diff --git a/courses/223015c/slides/assets/qr/mdn-dialog.png b/courses/223015c/slides/assets/qr/mdn-dialog.png new file mode 100644 index 0000000..0df945d Binary files /dev/null and b/courses/223015c/slides/assets/qr/mdn-dialog.png differ diff --git a/courses/223015c/slides/assets/qr/mdn-input.png b/courses/223015c/slides/assets/qr/mdn-input.png new file mode 100644 index 0000000..e34c60e Binary files /dev/null and b/courses/223015c/slides/assets/qr/mdn-input.png differ diff --git a/courses/223015c/slides/assets/qr/mdn.png b/courses/223015c/slides/assets/qr/mdn.png new file mode 100644 index 0000000..24a8136 Binary files /dev/null and b/courses/223015c/slides/assets/qr/mdn.png differ diff --git a/courses/223015c/slides/assets/qr/odinproject.png b/courses/223015c/slides/assets/qr/odinproject.png new file mode 100644 index 0000000..357a646 Binary files /dev/null and b/courses/223015c/slides/assets/qr/odinproject.png differ diff --git a/courses/223015c/slides/assets/qr/repo-223015c.png b/courses/223015c/slides/assets/qr/repo-223015c.png new file mode 100644 index 0000000..46b6365 Binary files /dev/null and b/courses/223015c/slides/assets/qr/repo-223015c.png differ diff --git a/courses/223015c/slides/assets/qr/slides-223015c.png b/courses/223015c/slides/assets/qr/slides-223015c.png new file mode 100644 index 0000000..2c7cb48 Binary files /dev/null and b/courses/223015c/slides/assets/qr/slides-223015c.png differ diff --git a/courses/223015c/slides/assets/qr/vscode.png b/courses/223015c/slides/assets/qr/vscode.png new file mode 100644 index 0000000..fa3852a Binary files /dev/null and b/courses/223015c/slides/assets/qr/vscode.png differ diff --git a/flake.lock b/flake.lock new file mode 100644 index 0000000..c2cc24a --- /dev/null +++ b/flake.lock @@ -0,0 +1,61 @@ +{ + "nodes": { + "flake-utils": { + "inputs": { + "systems": "systems" + }, + "locked": { + "lastModified": 1731533236, + "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=", + "owner": "numtide", + "repo": "flake-utils", + "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b", + "type": "github" + }, + "original": { + "owner": "numtide", + "repo": "flake-utils", + "type": "github" + } + }, + "nixpkgs": { + "locked": { + "lastModified": 1766902085, + "narHash": "sha256-coBu0ONtFzlwwVBzmjacUQwj3G+lybcZ1oeNSQkgC0M=", + "owner": "NixOS", + "repo": "nixpkgs", + "rev": "c0b0e0fddf73fd517c3471e546c0df87a42d53f4", + "type": "github" + }, + "original": { + "owner": "NixOS", + "ref": "nixos-unstable", + "repo": "nixpkgs", + "type": "github" + } + }, + "root": { + "inputs": { + "flake-utils": "flake-utils", + "nixpkgs": "nixpkgs" + } + }, + "systems": { + "locked": { + "lastModified": 1681028828, + "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=", + "owner": "nix-systems", + "repo": "default", + "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e", + "type": "github" + }, + "original": { + "owner": "nix-systems", + "repo": "default", + "type": "github" + } + } + }, + "root": "root", + "version": 7 +} diff --git a/scripts/dev-server.sh b/scripts/dev-server.sh new file mode 100755 index 0000000..07e676c --- /dev/null +++ b/scripts/dev-server.sh @@ -0,0 +1,106 @@ +#!/usr/bin/env bash +# Development server script for HdM slides +# Starts index server + marp servers for each course + +set -e + +# Configuration +INDEX_PORT=1310 +COURSE_B_PORT=1311 +COURSE_C_PORT=1312 +COURSE_DIR="courses" +DEV_INDEX_DIR=".dev-index" + +# Colors +RED='\033[0;31m' +GREEN='\033[0;32m' +BLUE='\033[0;34m' +NC='\033[0m' # No Color + +# Cleanup function +cleanup() { + echo -e "\n${RED}Shutting down servers...${NC}" + kill $PID_INDEX $PID_B $PID_C 2>/dev/null || true + exit 0 +} + +# Kill existing processes on our ports +kill_existing() { + echo -e "${BLUE}Cleaning up existing processes...${NC}" + # Kill marp processes first + pkill -9 -f "marp-cli" 2>/dev/null || true + pkill -f "python3 -m http.server" 2>/dev/null || true + # Kill ports including marp's WebSocket ports (37717-37720 range) + fuser -k $INDEX_PORT/tcp $COURSE_B_PORT/tcp $COURSE_C_PORT/tcp 2>/dev/null || true + fuser -k 37717/tcp 37718/tcp 37719/tcp 37720/tcp 2>/dev/null || true + sleep 2 +} + +# Generate dev index +generate_index() { + mkdir -p "$DEV_INDEX_DIR" + cat > "$DEV_INDEX_DIR/index.html" << 'EOF' + + + + + + HdM Slides - Dev + + + +

HdM Slides

+

Development Server

+
+EOF + echo " 223015b
Dateiformate, Schnittstellen, Speichermedien & Distributionswege
Port $COURSE_B_PORT" >> "$DEV_INDEX_DIR/index.html" + echo " 223015c
Grundlagen IT- und Internettechnik
Port $COURSE_C_PORT" >> "$DEV_INDEX_DIR/index.html" + cat >> "$DEV_INDEX_DIR/index.html" << 'EOF' +
+ + +EOF +} + +# Main +trap cleanup SIGINT SIGTERM + +kill_existing +generate_index + +echo -e "${GREEN}Starting development servers...${NC}" +echo "" +echo -e " Index: ${BLUE}http://localhost:$INDEX_PORT${NC}" +echo -e " 223015b: ${BLUE}http://localhost:$COURSE_B_PORT${NC}" +echo -e " 223015c: ${BLUE}http://localhost:$COURSE_C_PORT${NC}" +echo "" +echo -e "Press ${RED}Ctrl+C${NC} to stop all servers" +echo "" + +# Start servers +python3 -m http.server $INDEX_PORT --directory "$DEV_INDEX_DIR" & +PID_INDEX=$! + +PORT=$COURSE_B_PORT npx @marp-team/marp-cli --server "$COURSE_DIR/223015b/slides/" & +PID_B=$! + +sleep 3 # Stagger starts to avoid WebSocket port collision + +PORT=$COURSE_C_PORT npx @marp-team/marp-cli --server "$COURSE_DIR/223015c/slides/" & +PID_C=$! + +# Wait for any process to exit +wait diff --git a/scripts/generate-index.sh b/scripts/generate-index.sh index 5d02d36..3ade7aa 100755 --- a/scripts/generate-index.sh +++ b/scripts/generate-index.sh @@ -8,22 +8,40 @@ BUILD_DIR="${2:-build/$COURSE}" # Course-specific configuration case "$COURSE" in 223015b) - TITLE="223015b - Dateiformate, Schnittstellen, Speichermedien" - SUBTITLE="Dateiformate, Schnittstellen, Speichermedien & Distributionswege" - REPO_URL="https://git.librete.ch/hdm/223015b" + TITLE="Dateiformate, Schnittstellen, Speichermedien & Distributionswege" + SUBTITLE="223015b · Modul \"Technik 1\" · 1. Semester" + SLIDES_URL="https://librete.ch/hdm/223015b" + ACCENT_COLOR="#5da9e9" + ACCENT_LIGHT="#e8f4fc" ;; 223015c) - TITLE="223015c - Internettechnologien" - SUBTITLE="Internettechnologien" - REPO_URL="https://git.librete.ch/hdm/223015c" + TITLE="Grundlagen IT- und Internettechnik" + SUBTITLE="223015c · Modul \"Technik 1\" · 1. Semester" + SLIDES_URL="https://librete.ch/hdm/223015c" + ACCENT_COLOR="#d63384" + ACCENT_LIGHT="#fce4ec" ;; *) TITLE="$COURSE - HdM Slides" SUBTITLE="Lecture Slides" - REPO_URL="https://git.librete.ch/hdm/$COURSE" + SLIDES_URL="https://librete.ch/hdm/$COURSE" + ACCENT_COLOR="#0066cc" + ACCENT_LIGHT="#e8f4fc" ;; esac +# Topic mappings for nice German titles +declare -A TOPIC_MAP +TOPIC_MAP["intro"]="Einführung" +TOPIC_MAP["grundlagen-text-audio"]="Grundlagen, Text & Audio" +TOPIC_MAP["bild-audio-video"]="Bild, Audio & Video" +TOPIC_MAP["speichermedien-schnittstellen"]="Speichermedien & Schnittstellen" +TOPIC_MAP["distribution-apis-zukunft"]="Distribution, APIs & Zukunft" +TOPIC_MAP["vertiefung-offene-fragen"]="Vertiefung & Offene Fragen" +TOPIC_MAP["geschichte-grundlagen-html"]="Geschichte, Grundlagen & HTML" +TOPIC_MAP["netzwerke-protokolle-css"]="Netzwerke, Protokolle & CSS" +TOPIC_MAP["interaktivitaet-javascript"]="Interaktivität & JavaScript" + cat > "$BUILD_DIR/index.html" << HEADER @@ -32,65 +50,142 @@ cat > "$BUILD_DIR/index.html" << HEADER $TITLE -

$COURSE

-

$SUBTITLE
- HdM Stuttgart - WS 2025/26 - Michael Czechowski

+
+

$TITLE

+

$SUBTITLE

+

HdM Stuttgart · Wintersemester 2025/26 · Michael Czechowski

+
+
HEADER # Generate links for each termin (sorted) @@ -98,23 +193,26 @@ for html in $(ls "$BUILD_DIR"/2*.html 2>/dev/null | sort); do filename=$(basename "$html") # Extract components from filename - date=$(echo "$filename" | grep -oE '^[0-9]{4}-[0-9]{2}-[0-9]{2}') + date=$(echo "$filename" | grep -oE '^[0-9]{4}-[0-9x]{2}-[0-9x]{2}') termin_num=$(echo "$filename" | grep -oE 'termin-[0-9]+' | grep -oE '[0-9]+') - topic_raw=$(echo "$filename" | sed -E 's/^[0-9]{4}-[0-9]{2}-[0-9]{2}-termin-[0-9]+-//' | sed 's/\.html$//') + topic_raw=$(echo "$filename" | sed -E 's/^[0-9]{4}-[0-9x]{2}-[0-9x]{2}-termin-[0-9]+-//' | sed 's/\.html$//') - # Format topic: replace - with space, capitalize - topic=$(echo "$topic_raw" | sed 's/-/ /g' | sed 's/.*/\u&/') + # Look up nice topic name or fallback + topic="${TOPIC_MAP[$topic_raw]}" + if [[ -z "$topic" ]]; then + topic=$(echo "$topic_raw" | sed 's/-/ /g' | sed 's/.*/\u&/') + fi # Format date - if [[ "$date" =~ ^[0-9]{4}-[0-9]{2}-[0-9]{2}$ ]]; then - formatted_date=$(date -d "$date" "+%d.%m.%Y" 2>/dev/null || echo "$date") + if [[ "$date" =~ ^[0-9]{4}-[0-9]{2}-[0-9]{2}$ ]] && [[ ! "$date" =~ xx ]]; then + formatted_date=$(date -d "$date" "+%d. %B %Y" 2>/dev/null || echo "$date") else - formatted_date="TBA" + formatted_date="Termin folgt" fi # Handle termin number if [[ "$termin_num" == "0" ]]; then - termin_label="Einfuhrung" + termin_label="Einführung" else termin_label="Termin $termin_num" fi @@ -124,35 +222,27 @@ for html in $(ls "$BUILD_DIR"/2*.html 2>/dev/null | sort); do # Check if PDF exists pdf_link="" if [[ -f "$BUILD_DIR/$pdf_filename" ]]; then - pdf_link="PDF" + pdf_link="PDF" fi cat >> "$BUILD_DIR/index.html" << LINK -
- -

$termin_label

- $formatted_date - $topic - - $pdf_link -
+
+ +
$termin_label
+
$topic
+
$formatted_date
+ + Folien + $pdf_link +
LINK done -# Add QR code if exists -if [[ -f "$BUILD_DIR/qr-$COURSE.png" ]]; then - cat >> "$BUILD_DIR/index.html" << QRSECTION -
- QR Code -

Scan to open on mobile

-
-QRSECTION -fi - cat >> "$BUILD_DIR/index.html" << FOOTER +