hdm/2025
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: hdm/2025:963ba1d173549544e5478b881c4dd4bbb71bdb61
hdm/2025:main hdm/2025:test-merge hdm/2025:klausur-erklaerungen hdm/2025:narrative-academic-merge
...
compare: hdm/2025:d19c8ddfc971e68f338f9ec4f6632d4632cb35e9
hdm/2025:main hdm/2025:test-merge hdm/2025:klausur-erklaerungen hdm/2025:narrative-academic-merge
10 Commits
963ba1d173 ... d19c8ddfc9
Author SHA1 Message Date
libretech d19c8ddfc9 add background image for termin 2 2025-12-31 01:02:39 +01:00
libretech b3182d6366 update root index with references, qr code, and svg deploy support 2025-12-31 01:02:38 +01:00
libretech b97b49b5be add qr code section to course index pages 2025-12-31 01:02:38 +01:00
libretech 51691cd75e sync course b label color to petrol blue (#1e5f8a) 2025-12-31 01:02:38 +01:00
libretechandClaude Opus 4.5 74cc7aad58 improve inline code contrast across all slides 
- change code text color from #1e5f8a to #5fb3e4 (brighter blue) in course 223015b
- update code styling in course 223015c for better contrast
- update custom-theme.css with --color-dimmed variable

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2025-12-31 00:24:45 +01:00
libretech 7e80d15a06 sync colors: unified petrol blue (#1e5f8a) for course b 2025-12-30 19:47:31 +01:00
libretech aaf1447048 container slide: add dateiformat terminology, simplify layout 2025-12-30 18:39:18 +01:00
libretech 7943824eeb expand container vs codec into 3 detailed slides 2025-12-30 18:00:39 +01:00
libretech eaeae275a7 update h1/h2 colors in course b, fix qr code contain 2025-12-30 17:59:58 +01:00
libretech e6a455b095 fix agenda: add teil 3 and 4 2025-12-30 17:56:20 +01:00
14 changed files with 175 additions and 66 deletions
Expand all files Collapse all files

No files matched your search

Makefile
+3 -1
View File
@@ -187,13 +187,14 @@ HDM_DEPLOY_PATH = /home/tengo/html/hdm
build-index: build/.exists build-index: build/.exists
@echo "Building root index..." @echo "Building root index..."
@echo '<!DOCTYPE html><html lang="de"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>HdM Vorlesungen</title><style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;max-width:720px;margin:0 auto;padding:3rem 1.5rem;background:#fafafa;color:#1d1d1f;line-height:1.5}h1{font-size:2rem;font-weight:600;letter-spacing:-0.02em;margin-bottom:.5rem}.subtitle{color:#86868b;font-size:1rem}.courses{margin-top:2rem;display:flex;flex-direction:column;gap:.75rem}a.course{display:block;background:#fff;border-radius:12px;padding:1.5rem;text-decoration:none;color:inherit;box-shadow:0 1px 3px rgba(0,0,0,0.08);transition:all .2s ease;cursor:pointer}a.course:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.12)}.course-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.course-b .course-label{color:#5da9e9}.course-c .course-label{color:#d63384}.course-title{font-size:1.15rem;font-weight:500;color:#1d1d1f;margin:.25rem 0}.course-info{font-size:.85rem;color:#86868b}footer{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #e5e5e7;color:#86868b;font-size:.85rem}footer a{color:#1d1d1f;text-decoration:none}footer a:hover{text-decoration:underline}</style></head><body><h1>HdM Vorlesungen</h1><p class="subtitle">Wintersemester 2025/26 · Michael Czechowski</p><div class="courses"><a class="course course-b" href="223015b/"><span class="course-label">223015b</span><div class="course-title">Dateiformate, Schnittstellen, Speichermedien & Distributionswege</div><span class="course-info">6 Termine · Modul "Technik 1"</span></a><a class="course course-c" href="223015c/"><span class="course-label">223015c</span><div class="course-title">Grundlagen IT- und Internettechnik</div><span class="course-info">3 Termine · Modul "Technik 1"</span></a></div><footer><a href="mailto:mail@librete.ch">Kontakt</a></footer></body></html>' > build/index.html @echo '<!DOCTYPE html><html lang="de"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>HdM Vorlesungen</title><style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;max-width:720px;margin:0 auto;padding:3rem 1.5rem;background:#fafafa;color:#1d1d1f;line-height:1.5}h1{font-size:2rem;font-weight:600;letter-spacing:-0.02em;margin-bottom:.5rem}.subtitle{color:#86868b;font-size:1rem}.courses{margin-top:2rem;display:flex;flex-direction:column;gap:.75rem}a.course{display:block;background:#fff;border-radius:12px;padding:1.5rem;text-decoration:none;color:inherit;box-shadow:0 1px 3px rgba(0,0,0,0.08);transition:all .2s ease;cursor:pointer}a.course:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.12)}.course-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.course-b .course-label{color:#1e5f8a}.course-c .course-label{color:#d63384}.course-title{font-size:1.15rem;font-weight:500;color:#1d1d1f;margin:.25rem 0}.course-info{font-size:.85rem;color:#86868b}.section-title{font-size:1rem;font-weight:600;color:#86868b;margin-top:2.5rem;margin-bottom:.75rem}.references{display:flex;flex-direction:column;gap:.75rem}footer{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #e5e5e7;color:#86868b;font-size:.85rem}footer a{color:#1d1d1f;text-decoration:none}footer a:hover{text-decoration:underline}.qr-section{margin-top:2.5rem;padding:1.5rem;background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.08);text-align:center}.qr-code{width:100%;height:auto}.qr-url{margin-top:.75rem;font-size:.85rem;color:#86868b}</style></head><body><h1>HdM Vorlesungen</h1><p class="subtitle">Wintersemester 2025/26 · Michael Czechowski</p><div class="courses"><a class="course course-b" href="223015b/"><span class="course-label">223015b</span><div class="course-title">Dateiformate, Schnittstellen, Speichermedien & Distributionswege</div><span class="course-info">6 Termine · Modul "Technik 1"</span></a><a class="course course-c" href="223015c/"><span class="course-label">223015c</span><div class="course-title">Grundlagen IT- und Internettechnik</div><span class="course-info">3 Termine · Modul "Technik 1"</span></a></div><h2 class="section-title">Referenzen</h2><div class="references"><a class="course" href="https://codecrispi.es/"><span class="course-label">Plattform</span><div class="course-title">Code Crispies</div><span class="course-info">Selbstlernplattform</span></a></div><div class="qr-section"><img src="qr-root.svg" alt="QR Code" class="qr-code"><p class="qr-url">https://librete.ch/hdm/</p></div><footer><a href="mailto:mail@librete.ch">Kontakt</a></footer></body></html>' > build/index.html
# Deploy # Deploy
define deploy_course define deploy_course
@echo "Deploying $(1)..." @echo "Deploying $(1)..."
scp build/$(1)/*.html $(DEPLOY_HOST):$($(1)_DEPLOY_PATH)/ scp build/$(1)/*.html $(DEPLOY_HOST):$($(1)_DEPLOY_PATH)/
scp build/$(1)/*.pdf $(DEPLOY_HOST):$($(1)_DEPLOY_PATH)/ 2>/dev/null || true scp build/$(1)/*.pdf $(DEPLOY_HOST):$($(1)_DEPLOY_PATH)/ 2>/dev/null || true
scp build/$(1)/*.svg $(DEPLOY_HOST):$($(1)_DEPLOY_PATH)/ 2>/dev/null || true
scp -r build/$(1)/assets/ $(DEPLOY_HOST):$($(1)_DEPLOY_PATH)/ scp -r build/$(1)/assets/ $(DEPLOY_HOST):$($(1)_DEPLOY_PATH)/
scp -r build/$(1)/materials/ $(DEPLOY_HOST):$($(1)_DEPLOY_PATH)/ 2>/dev/null || true scp -r build/$(1)/materials/ $(DEPLOY_HOST):$($(1)_DEPLOY_PATH)/ 2>/dev/null || true
@echo "$(1) deployed!" @echo "$(1) deployed!"
@@ -208,6 +209,7 @@ deploy-c: build-c
deploy-index: build-index deploy-index: build-index
@echo "Deploying root index..." @echo "Deploying root index..."
scp build/index.html $(DEPLOY_HOST):$(HDM_DEPLOY_PATH)/ scp build/index.html $(DEPLOY_HOST):$(HDM_DEPLOY_PATH)/
scp build/qr-root.svg $(DEPLOY_HOST):$(HDM_DEPLOY_PATH)/ 2>/dev/null || true
@echo "Root index deployed!" @echo "Root index deployed!"
deploy: build-index deploy-b deploy-c deploy-index deploy: build-index deploy-b deploy-c deploy-index
courses/223015b/slides/2025-12-19-termin-0-intro.md
+12 -6
View File
@@ -11,7 +11,7 @@ title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
<style> <style>
:root { :root {
--color-foreground: #1a1a2e; --color-foreground: #1a1a2e;
--color-highlight: #5da9e9; --color-highlight: #1e5f8a;
--color-dimmed: #4a4a6a; --color-dimmed: #4a4a6a;
} }
section.invert { section.invert {
@@ -20,14 +20,20 @@ section.invert {
section { section {
font-size: 1.7rem; font-size: 1.7rem;
} }
h1 {
color: #1e5f8a;
}
section.invert h1 {
color: #fff;
}
h2 { h2 {
color: var(--color-highlight); color: #1f2937;
} }
pre { pre {
background: #0f0f23; background: #0f0f23;
color: #5da9e9; color: #5fb3e4;
border-radius: 8px; border-radius: 8px;
border-left: 3px solid #5da9e9; border-left: 3px solid #1e5f8a;
} }
pre code { pre code {
background: transparent; background: transparent;
@@ -35,7 +41,7 @@ pre code {
} }
code { code {
background: #1a1a2e; background: #1a1a2e;
color: #5da9e9; color: #5fb3e4;
padding: 0.15em 0.4em; padding: 0.15em 0.4em;
border-radius: 4px; border-radius: 4px;
} }
@@ -54,7 +60,7 @@ section.klausur footer {
<!-- _header: '' --> <!-- _header: '' -->
<!-- _backgroundColor: #000 --> <!-- _backgroundColor: #000 -->
![bg fit opacity:0.4](./assets/digital-landscape.png) ![bg cover opacity:0.2](./assets/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg)
# Dateiformate, Schnittstellen, Speichermedien & Distributionswege # Dateiformate, Schnittstellen, Speichermedien & Distributionswege
courses/223015b/slides/2025-12-19-termin-1-grundlagen-text-audio.md
+12 -6
View File
@@ -11,7 +11,7 @@ title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
<style> <style>
:root { :root {
--color-foreground: #1a1a2e; --color-foreground: #1a1a2e;
--color-highlight: #5da9e9; --color-highlight: #1e5f8a;
--color-dimmed: #4a4a6a; --color-dimmed: #4a4a6a;
} }
section.invert { section.invert {
@@ -20,14 +20,20 @@ section.invert {
section { section {
font-size: 1.7rem; font-size: 1.7rem;
} }
h1 {
color: #1e5f8a;
}
section.invert h1 {
color: #fff;
}
h2 { h2 {
color: var(--color-highlight); color: #1f2937;
} }
pre { pre {
background: #0f0f23; background: #0f0f23;
color: #5da9e9; color: #5fb3e4;
border-radius: 8px; border-radius: 8px;
border-left: 3px solid #5da9e9; border-left: 3px solid #1e5f8a;
} }
pre code { pre code {
background: transparent; background: transparent;
@@ -35,7 +41,7 @@ pre code {
} }
code { code {
background: #1a1a2e; background: #1a1a2e;
color: #5da9e9; color: #5fb3e4;
padding: 0.15em 0.4em; padding: 0.15em 0.4em;
border-radius: 4px; border-radius: 4px;
} }
@@ -54,7 +60,7 @@ section.klausur footer {
<!-- _header: '' --> <!-- _header: '' -->
<!-- _backgroundColor: #000 --> <!-- _backgroundColor: #000 -->
![bg fit opacity:0.4](./assets/digital-landscape.png) ![bg cover opacity:0.2](./assets/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg)
# Dateiformate, Schnittstellen, Speichermedien & Distributionswege # Dateiformate, Schnittstellen, Speichermedien & Distributionswege
courses/223015b/slides/2026-01-09-termin-2-bild-audio-video.md
+74 -17
View File
@@ -11,7 +11,7 @@ title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
<style> <style>
:root { :root {
--color-foreground: #1a1a2e; --color-foreground: #1a1a2e;
--color-highlight: #5da9e9; --color-highlight: #1e5f8a;
--color-dimmed: #4a4a6a; --color-dimmed: #4a4a6a;
} }
section.invert { section.invert {
@@ -20,14 +20,20 @@ section.invert {
section { section {
font-size: 1.7rem; font-size: 1.7rem;
} }
h1 {
color: #1e5f8a;
}
section.invert h1 {
color: #fff;
}
h2 { h2 {
color: var(--color-highlight); color: #1f2937;
} }
pre { pre {
background: #0f0f23; background: #0f0f23;
color: #5da9e9; color: #5fb3e4;
border-radius: 8px; border-radius: 8px;
border-left: 3px solid #5da9e9; border-left: 3px solid #1e5f8a;
} }
pre code { pre code {
background: transparent; background: transparent;
@@ -35,7 +41,7 @@ pre code {
} }
code { code {
background: #1a1a2e; background: #1a1a2e;
color: #5da9e9; color: #5fb3e4;
padding: 0.15em 0.4em; padding: 0.15em 0.4em;
border-radius: 4px; border-radius: 4px;
} }
@@ -55,7 +61,7 @@ section.klausur footer {
<!-- _footer: '' --> <!-- _footer: '' -->
<!-- _backgroundColor: #000 --> <!-- _backgroundColor: #000 -->
![bg fit opacity:0.4](./assets/digital-landscape.png) ![bg cover opacity:0.2](./assets/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg)
# Dateiformate, Schnittstellen, Speichermedien & Distributionswege # Dateiformate, Schnittstellen, Speichermedien & Distributionswege
@@ -474,7 +480,7 @@ Lösung: Portfolio-Websites (eigene Kontrolle)
--- ---
![bg right:25%](./assets/qr/squoosh.png) ![bg contain right:25%](./assets/qr/squoosh.png)
# Hands-On: Kompression vergleichen # Hands-On: Kompression vergleichen
@@ -538,24 +544,75 @@ Ohne Kompression: Unmöglich zu streamen oder speichern
--- ---
# Container vs. Codec # Container: Das Dateiformat
**Container = Die Box** **Was ist ein Container?**
Verpackt Video, Audio, Untertitel, Metadaten Das Dateiformat – eine "Box", die verschiedene Streams zusammenpackt:
- Video-Stream, Audio-Stream(s), Untertitel, Metadaten
**Beispiele:** MP4, MKV, AVI, MOV **Gängige Container:**
- **MP4** (.mp4) – Web, Streaming
- **MKV** (.mkv) – Archiv, viele Streams
- **AVI** (.avi) – Legacy (veraltet)
- **MOV** (.mov) – Apple-Ökosystem
**Codec = Kompressionsalgorithmus** <!--
Entscheidet, WIE Daten komprimiert werden Container = Verpackung, nicht der Inhalt
Ein MP4 sagt nichts über die Qualität aus
MKV kann beliebig viele Audio/Untertitel-Spuren haben
-->
**Video-Codecs:** H.264, H.265, VP9, AV1 ---
**Audio-Codecs:** AAC, MP3, Opus
<!-- # Codec: Der Kompressionsalgorithmus
**Was ist ein Codec?** (Coder/Decoder)
Entscheidet, WIE Video/Audio komprimiert wird
**Video-Codecs:**
| Codec | Jahr | Verbreitung |
|-------|------|-------------|
| H.264/AVC | 2003 | Universell, überall |
| H.265/HEVC | 2013 | 4K, effizient, Lizenzen |
| VP9 | 2013 | YouTube, Google |
| AV1 | 2018 | Zukunft, lizenzfrei |
**Audio-Codecs:** AAC, MP3, Opus, FLAC
<!--
H.264 = De-facto-Standard seit 20 Jahren
H.265 = 50% kleinere Dateien, aber teure Lizenzen
AV1 = Open Source, Netflix/YouTube pushen es
-->
---
# Container + Codec = Video
**Das Zusammenspiel:**
```
┌─────────────────────────────┐
│ Container (z.B. MP4) │
│ ┌────────────────────────┐ │
│ │ Video-Stream (H.264) │ │
│ ├────────────────────────┤ │
│ │ Audio-Stream (AAC) │ │
│ ├────────────────────────┤ │
│ │ Untertitel (SRT) │ │
│ └────────────────────────┘ │
└─────────────────────────────┘
```
**Häufiger Irrtum:** "Das ist eine MP4-Datei"
→ Sagt nichts über den Codec aus!
<!--
Container ≠ Codec (häufiges Missverständnis!) Container ≠ Codec (häufiges Missverständnis!)
MP4 ist KEIN Codec, sondern Container MP4 ist KEIN Codec, sondern Container
Schachtel-Analogie: Container = Karton, Codec = Inhalt
Ein MP4 kann H.264, H.265 oder AV1 enthalten Ein MP4 kann H.264, H.265 oder AV1 enthalten
Prüfen mit: MediaInfo, ffprobe
--> -->
--- ---
courses/223015b/slides/2026-01-23-termin-3-speichermedien-schnittstellen.md
+12 -6
View File
@@ -11,7 +11,7 @@ title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
<style> <style>
:root { :root {
--color-foreground: #1a1a2e; --color-foreground: #1a1a2e;
--color-highlight: #5da9e9; --color-highlight: #1e5f8a;
--color-dimmed: #4a4a6a; --color-dimmed: #4a4a6a;
} }
section.invert { section.invert {
@@ -20,14 +20,20 @@ section.invert {
section { section {
font-size: 1.7rem; font-size: 1.7rem;
} }
h1 {
color: #1e5f8a;
}
section.invert h1 {
color: #fff;
}
h2 { h2 {
color: var(--color-highlight); color: #1f2937;
} }
pre { pre {
background: #0f0f23; background: #0f0f23;
color: #5da9e9; color: #5fb3e4;
border-radius: 8px; border-radius: 8px;
border-left: 3px solid #5da9e9; border-left: 3px solid #1e5f8a;
} }
pre code { pre code {
background: transparent; background: transparent;
@@ -35,7 +41,7 @@ pre code {
} }
code { code {
background: #1a1a2e; background: #1a1a2e;
color: #5da9e9; color: #5fb3e4;
padding: 0.15em 0.4em; padding: 0.15em 0.4em;
border-radius: 4px; border-radius: 4px;
} }
@@ -54,7 +60,7 @@ section.klausur footer {
<!-- _header: '' --> <!-- _header: '' -->
<!-- _backgroundColor: #000 --> <!-- _backgroundColor: #000 -->
![bg fit opacity:0.4](./assets/digital-landscape.png) ![bg cover opacity:0.2](./assets/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg)
# Dateiformate, Schnittstellen, Speichermedien & Distributionswege # Dateiformate, Schnittstellen, Speichermedien & Distributionswege
courses/223015b/slides/2026-01-30-termin-4-distribution-apis-zukunft.md
+12 -6
View File
@@ -11,7 +11,7 @@ title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
<style> <style>
:root { :root {
--color-foreground: #1a1a2e; --color-foreground: #1a1a2e;
--color-highlight: #5da9e9; --color-highlight: #1e5f8a;
--color-dimmed: #4a4a6a; --color-dimmed: #4a4a6a;
} }
section.invert { section.invert {
@@ -20,14 +20,20 @@ section.invert {
section { section {
font-size: 1.7rem; font-size: 1.7rem;
} }
h1 {
color: #1e5f8a;
}
section.invert h1 {
color: #fff;
}
h2 { h2 {
color: var(--color-highlight); color: #1f2937;
} }
pre { pre {
background: #0f0f23; background: #0f0f23;
color: #5da9e9; color: #5fb3e4;
border-radius: 8px; border-radius: 8px;
border-left: 3px solid #5da9e9; border-left: 3px solid #1e5f8a;
} }
pre code { pre code {
background: transparent; background: transparent;
@@ -35,7 +41,7 @@ pre code {
} }
code { code {
background: #1a1a2e; background: #1a1a2e;
color: #5da9e9; color: #5fb3e4;
padding: 0.15em 0.4em; padding: 0.15em 0.4em;
border-radius: 4px; border-radius: 4px;
} }
@@ -55,7 +61,7 @@ section.klausur footer {
<!-- _footer: '' --> <!-- _footer: '' -->
<!-- _backgroundColor: #000 --> <!-- _backgroundColor: #000 -->
![bg fit opacity:0.4](./assets/digital-landscape.png) ![bg cover opacity:0.2](./assets/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg)
# Dateiformate, Schnittstellen, Speichermedien & Distributionswege # Dateiformate, Schnittstellen, Speichermedien & Distributionswege
courses/223015b/slides/2026-xx-xx-termin-5-vertiefung-offene-fragen.md
+12 -6
View File
@@ -11,7 +11,7 @@ title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
<style> <style>
:root { :root {
--color-foreground: #1a1a2e; --color-foreground: #1a1a2e;
--color-highlight: #5da9e9; --color-highlight: #1e5f8a;
--color-dimmed: #4a4a6a; --color-dimmed: #4a4a6a;
} }
section.invert { section.invert {
@@ -20,14 +20,20 @@ section.invert {
section { section {
font-size: 1.7rem; font-size: 1.7rem;
} }
h1 {
color: #1e5f8a;
}
section.invert h1 {
color: #fff;
}
h2 { h2 {
color: var(--color-highlight); color: #1f2937;
} }
pre { pre {
background: #0f0f23; background: #0f0f23;
color: #5da9e9; color: #5fb3e4;
border-radius: 8px; border-radius: 8px;
border-left: 3px solid #5da9e9; border-left: 3px solid #1e5f8a;
} }
pre code { pre code {
background: transparent; background: transparent;
@@ -35,7 +41,7 @@ pre code {
} }
code { code {
background: #1a1a2e; background: #1a1a2e;
color: #5da9e9; color: #5fb3e4;
padding: 0.15em 0.4em; padding: 0.15em 0.4em;
border-radius: 4px; border-radius: 4px;
} }
@@ -55,7 +61,7 @@ section.klausur footer {
<!-- _footer: '' --> <!-- _footer: '' -->
<!-- _backgroundColor: #000 --> <!-- _backgroundColor: #000 -->
![bg fit opacity:0.4](./assets/digital-landscape.png) ![bg cover opacity:0.2](./assets/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg)
# Dateiformate, Schnittstellen, Speichermedien & Distributionswege # Dateiformate, Schnittstellen, Speichermedien & Distributionswege
courses/223015b/slides/assets/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 438 KiB

courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md
-1
View File
@@ -264,7 +264,6 @@ Wichtige Lektion für MedienethikerInnen
# Lektionen für heute # Lektionen für heute
* Technologie ist nie neutral * Technologie ist nie neutral
* Steigerung der Rechenleistung ist immer dann nötig, wenn die angehäuften Datenmengen nicht mehr von Menschenhand berechnet werden können
<!-- <!--
courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
+3 -3
View File
@@ -12,7 +12,7 @@ title: "Termin 2: Netzwerke, Protokolle & CSS"
:root { :root {
--color-foreground: #1a1a2e; --color-foreground: #1a1a2e;
--color-highlight: #d63384; --color-highlight: #d63384;
--color-dimmed: #4a4a6a; --color-dimmed: #dde0e4;
} }
section.invert { section.invert {
--color-foreground: #fff; --color-foreground: #fff;
@@ -40,8 +40,8 @@ pre code {
color: inherit; color: inherit;
} }
code { code {
background: #1a1a2e; background: #f0e6eb;
color: #d63384; color: #1a1a2e;
padding: 0.15em 0.4em; padding: 0.15em 0.4em;
border-radius: 4px; border-radius: 4px;
} }
courses/223015c/slides/2026-01-24-termin-3-interaktivitaet-javascript.md
+4 -9
View File
@@ -85,15 +85,10 @@ Hochschule der Medien Stuttgart
# Agenda # Agenda
**Teil 1:** **Teil 1:** JavaScript-Grundlagen
- Was ist JavaScript? **Teil 2:** Das DOM
- Variablen, Datentypen, Operatoren **Teil 3:** Events
- Funktionen & Kontrollstrukturen **Teil 4:** Projekt & Ausblick
**Teil 2:**
- Das DOM: HTML mit JS manipulieren
- Events: Auf NutzerInnen reagieren
- Projekt: Interaktive Webseite
--- ---
scripts/dev-server.sh
+1 -1
View File
@@ -55,7 +55,7 @@ generate_index() {
a.course{display:block;background:#fff;border-radius:12px;padding:1.5rem;text-decoration:none;color:inherit;box-shadow:0 1px 3px rgba(0,0,0,0.08);transition:all .2s ease;cursor:pointer} a.course{display:block;background:#fff;border-radius:12px;padding:1.5rem;text-decoration:none;color:inherit;box-shadow:0 1px 3px rgba(0,0,0,0.08);transition:all .2s ease;cursor:pointer}
a.course:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.12)} a.course:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.12)}
.course-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em} .course-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.course-b .course-label{color:#5da9e9} .course-b .course-label{color:#1e5f8a}
.course-c .course-label{color:#d63384} .course-c .course-label{color:#d63384}
.course-title{font-size:1.15rem;font-weight:500;color:#1d1d1f;margin:.25rem 0} .course-title{font-size:1.15rem;font-weight:500;color:#1d1d1f;margin:.25rem 0}
.course-info{font-size:.85rem;color:#86868b} .course-info{font-size:.85rem;color:#86868b}
scripts/generate-index.sh
+22 -1
View File
@@ -11,7 +11,7 @@ case "$COURSE" in
TITLE="Dateiformate, Schnittstellen, Speichermedien & Distributionswege" TITLE="Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
SUBTITLE="223015b · Modul \"Technik 1\" · 1. Semester" SUBTITLE="223015b · Modul \"Technik 1\" · 1. Semester"
SLIDES_URL="https://librete.ch/hdm/223015b" SLIDES_URL="https://librete.ch/hdm/223015b"
ACCENT_COLOR="#5da9e9" ACCENT_COLOR="#1e5f8a"
ACCENT_LIGHT="#e8f4fc" ACCENT_LIGHT="#e8f4fc"
;; ;;
223015c) 223015c)
@@ -166,6 +166,23 @@ cat > "$BUILD_DIR/index.html" << HEADER
} }
footer a { color: $ACCENT_COLOR; text-decoration: none; } footer a { color: $ACCENT_COLOR; text-decoration: none; }
footer a:hover { text-decoration: underline; } footer a:hover { text-decoration: underline; }
.qr-section {
margin-top: 2.5rem;
padding: 1.5rem;
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
text-align: center;
}
.qr-code {
width: 100%;
height: auto;
}
.qr-url {
margin-top: 0.75rem;
font-size: 0.85rem;
color: #86868b;
}
@media (max-width: 600px) { @media (max-width: 600px) {
.termin-card { .termin-card {
grid-template-columns: 1fr; grid-template-columns: 1fr;
@@ -240,6 +257,10 @@ done
cat >> "$BUILD_DIR/index.html" << FOOTER cat >> "$BUILD_DIR/index.html" << FOOTER
</div> </div>
<div class="qr-section">
<img src="qr-index.svg" alt="QR Code" class="qr-code">
<p class="qr-url">$SLIDES_URL</p>
</div>
<footer> <footer>
<a href="mailto:mail@librete.ch">Kontakt</a> · <a href="mailto:mail@librete.ch">Kontakt</a> ·
<a href="../">Alle Kurse</a> <a href="../">Alle Kurse</a>
themes/custom-theme.css
+8 -3
View File
@@ -6,6 +6,7 @@ section {
background-color: #f0f8ff; background-color: #f0f8ff;
color: #2c3e50; color: #2c3e50;
font-size: 0.85em; font-size: 0.85em;
--color-dimmed: #e0e6eb;
} }
h1 { h1 {
@@ -21,13 +22,17 @@ ul, ol {
font-size: 0.8em; font-size: 0.8em;
} }
code { section code {
background-color: #ecf0f1; color: #1a1a1a;
color: #2c3e50;
padding: 2px 4px; padding: 2px 4px;
border-radius: 3px; border-radius: 3px;
} }
/* Preserve explicit SVG fill colors */
section svg *[fill] {
fill: revert;
}
blockquote { blockquote {
border-left: 4px solid #3498db; border-left: 4px solid #3498db;
background-color: #ecf0f1; background-color: #ecf0f1;