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 e24af59..941a3c1 100644
--- a/courses/223015b/slides/2025-12-19-termin-0-intro.md
+++ b/courses/223015b/slides/2025-12-19-termin-0-intro.md
@@ -57,8 +57,11 @@ section.klausur {
#fff 80px
) !important;
}
-section.klausur footer {
- display: none;
+@media print {
+ section.klausur {
+ background: url('./assets/klausur-pattern.svg') !important;
+ background-size: cover !important;
+ }
}
section.aufgabe {
background: #e3f2fd !important;
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 f3a3f04..cdcc8bf 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
@@ -57,8 +57,11 @@ section.klausur {
#fff 80px
) !important;
}
-section.klausur footer {
- display: none;
+@media print {
+ section.klausur {
+ background: url('./assets/klausur-pattern.svg') !important;
+ background-size: cover !important;
+ }
}
section.aufgabe {
background: #e3f2fd !important;
@@ -244,6 +247,7 @@ Eselsbrücke: 1 Byte = 1 Buchstabe/Symbol (in ASCII/UTF-8 für einfache Zeichen)
---
+
# Dateneinheiten
@@ -266,6 +270,7 @@ Windows zeigt oft binär, sagt aber "KB" → Verwirrung!
---
+
# Dateneinheiten (Fortsetzung)
@@ -313,6 +318,7 @@ Digital explodierte: IoT, Social Media, Cloud, Video
---
+
# Der digitale Wendepunkt
@@ -813,6 +819,8 @@ Visueller Kontrast: Analog vs. Digital
---
+
+
# Analoge Medien
### Distribution: physisch (Kauf, Verleih, Kopie)
@@ -877,6 +885,8 @@ Paradox: Gerade die Perfektion wurde zum "Problem"
---
+
+
# Digitale Medien
### Distribution: Datenträger (CD, USB), Download, Streaming, P2P
@@ -893,6 +903,8 @@ Paradox: Gerade die Perfektion wurde zum "Problem"
---
+
+
# Digitale Speichermedien
@@ -1272,6 +1284,8 @@ Visualisierung der beiden Philosophien
---
+
+
# Verlustfrei vs. Verlustbehaftet
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 649eb28..13e175c 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
@@ -57,8 +57,11 @@ section.klausur {
#fff 80px
) !important;
}
-section.klausur footer {
- display: none;
+@media print {
+ section.klausur {
+ background: url('./assets/klausur-pattern.svg') !important;
+ background-size: cover !important;
+ }
}
section.aufgabe {
background: #e3f2fd !important;
@@ -136,6 +139,7 @@ Smartphone-Speicher wäre schnell voll ohne Kompression
---
+
# Rastergrafiken (Bitmaps)
@@ -174,6 +178,7 @@ PRÜFUNGSRELEVANT: Speicherberechnung, Farbtiefe-Tabelle, warum Vergrößern pro
---
+
# Vektorgrafiken
@@ -213,6 +218,7 @@ PRÜFUNGSRELEVANT: Warum Vektoren skalierbar, SVG-Grundsyntax, Rendering-Pipelin
---
+
# Raster vs. Vektor: Entscheidungskriterien
@@ -708,6 +714,8 @@ Quelle: https://www.canon.com.hk/cpx/en/technical/va_EOS_Movie_Compression_Optio
---
+
+
# H.264 / AVC Codec (2003)
### Der bisherige Platzhirsch
@@ -828,6 +836,8 @@ Alliance for Open Media
---
+
+
# AV1: Die Open-Source-Revolution
diff --git a/courses/223015b/slides/2026-01-23-termin-3-speichermedien-schnittstellen.md b/courses/223015b/slides/2026-01-23-termin-3-speichermedien-schnittstellen.md
index 676d028..2d5e81f 100644
--- a/courses/223015b/slides/2026-01-23-termin-3-speichermedien-schnittstellen.md
+++ b/courses/223015b/slides/2026-01-23-termin-3-speichermedien-schnittstellen.md
@@ -57,8 +57,11 @@ section.klausur {
#fff 80px
) !important;
}
-section.klausur footer {
- display: none;
+@media print {
+ section.klausur {
+ background: url('./assets/klausur-pattern.svg') !important;
+ background-size: cover !important;
+ }
}
section.aufgabe {
background: #e3f2fd !important;
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 e9cf8c3..b9b9424 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
@@ -57,8 +57,11 @@ section.klausur {
#fff 80px
) !important;
}
-section.klausur footer {
- display: none;
+@media print {
+ section.klausur {
+ background: url('./assets/klausur-pattern.svg') !important;
+ background-size: cover !important;
+ }
}
section.aufgabe {
background: #e3f2fd !important;
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 15883a0..60ac071 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
@@ -57,8 +57,11 @@ section.klausur {
#fff 80px
) !important;
}
-section.klausur footer {
- display: none;
+@media print {
+ section.klausur {
+ background: url('./assets/klausur-pattern.svg') !important;
+ background-size: cover !important;
+ }
}
section.aufgabe {
background: #e3f2fd !important;
diff --git a/courses/223015b/slides/assets/klausur-pattern.svg b/courses/223015b/slides/assets/klausur-pattern.svg
new file mode 100644
index 0000000..3633c18
--- /dev/null
+++ b/courses/223015b/slides/assets/klausur-pattern.svg
@@ -0,0 +1,9 @@
+
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 efb3db7..35bc58f 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
@@ -57,8 +57,11 @@ section.klausur {
#fff 80px
) !important;
}
-section.klausur footer {
- display: none;
+@media print {
+ section.klausur {
+ background: url('./assets/klausur-pattern.svg') !important;
+ background-size: cover !important;
+ }
}
section.aufgabe {
background: #fce4ec !important;
@@ -618,6 +621,8 @@ Euer Laptop, euer Handy, der Server dieser Präsentation
---
+
+
# Die 5 Komponenten
@@ -648,6 +653,8 @@ PRÜFUNGSRELEVANT: 5 Komponenten benennen und erklären können, Stored Program
---
+
+
# Von-Neumann-Architektur: Bedeutung
@@ -1068,6 +1075,8 @@ Formattierungssprache
---
+
+
# HTML Metadaten
@@ -1286,7 +1295,15 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
---
+
+
+# Web Disability Simulator
+
+---
+
+
+
# Wie nutzen Menschen das Web?
@@ -1321,6 +1338,8 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
---
+
+
# Warum "Barrierefreiheit"?
@@ -1482,6 +1501,8 @@ div-Button braucht JavaScript für Enter/Space
---
+
+
# Barrieren im Netz vermeiden (a11y)
@@ -1504,7 +1525,6 @@ Manuelles Testen unverzichtbar
Echte NutzerInnen einbeziehen = Gold-Standard
-->
-
---
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 12be498..834b786 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
@@ -57,8 +57,11 @@ section.klausur {
#fff 80px
) !important;
}
-section.klausur footer {
- display: none;
+@media print {
+ section.klausur {
+ background: url('./assets/klausur-pattern.svg') !important;
+ background-size: cover !important;
+ }
}
section.aufgabe {
background: #fce4ec !important;
@@ -110,7 +113,6 @@ Hochschule der Medien Stuttgart
**Teil 2:**
- CSS-Grundlagen
-- "Barrierefreiheit" (a11y, WCAG)
- Selektoren & Spezifität
- Hands-On: Styling
@@ -118,10 +120,10 @@ Hochschule der Medien Stuttgart
# Ressourcen zum Selbstlernen
+* **CODE CRISPIES: https://codecrispi.es/**
* 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/
-* CSS lernen: https://codescripsi.es/
* Flexbox-Spiel: https://flexboxfroggy.com/
* Grid-Spiel: https://cssgridgarden.com/
@@ -139,7 +141,7 @@ Hochschule der Medien Stuttgart
* Daten und Informationen teilen
* Zusammenarbeiten & Kollaboration
* Ressourcen teilen (Drucker, Speicher, andere Geräte)
-* **Kommunikation**
+* **(Tele)kommunikation** *(gr. telos – Ziel, Ende)*
---
@@ -368,6 +370,8 @@ Query-String für Parameter
---
+
+
# Das OSI-Modell: Die Theorie
@@ -402,6 +406,8 @@ PRÜFUNGSRELEVANT: 7 Schichten mit Beispielen, Unterschied OSI vs. TCP/IP
---
+
+
# TCP/IP: Die Praxis
@@ -637,6 +643,8 @@ Heute: Fast nur noch HTTPS
---
+
+
# Schicht 7: Anwendung
@@ -693,12 +701,16 @@ Von oben nach unten: 7 bis 1
---
+
+
# HTTP/S im Detail
---
+
+
# HTTP-Request
@@ -726,6 +738,8 @@ Body kommt nach leerem Zeile (bei POST)
---
+
+
# HTTP-Response
@@ -751,6 +765,8 @@ Content-Length: 1234
---
+
+
# HTTP-Methoden
@@ -1091,6 +1107,79 @@ vw/vh = Viewport (sichtbarer Bereich)
---
+
+
+
+
+# Pseudo-Klassen
+
+```css
+/* Zustände */
+a:hover { color: red; }
+a:visited { color: purple; }
+input:focus { border-color: blue; }
+
+/* Struktur */
+li:first-child { font-weight: bold; }
+li:nth-child(odd) { background: #eee; }
+```
+
+
+
+---
+
+
+
+
+
+# Pseudo-Elemente
+
+```css
+.required::before {
+ content: "* ";
+ color: red;
+}
+
+p::first-letter { font-size: 2em; }
+p::first-line { font-weight: bold; }
+```
+
+**Unterschied:** `:` = Pseudo-Klasse · `::` = Pseudo-Element
+
+
+
+---
+
+
+
+
+
+# Responsive Design
+
+**Media Queries:** CSS je nach Bildschirmgröße
+
+```css
+/* Mobile First: Standard */
+.container { padding: 1rem; }
+
+/* Ab 768px (Tablet) */
+@media (min-width: 768px) {
+ .container { padding: 2rem; max-width: 720px; }
+}
+```
+
+**Breakpoints:** 768px (Tablet) · 1024px (Desktop) · 1280px (Large)
+
+
+
+---
+
# Teil 3: Layouts (optional)
@@ -1271,76 +1360,9 @@ Oder gleichmäßig verteilt
---
-
-
-# Pseudo-Klassen
-
-```css
-/* Zustände */
-a:hover { color: red; }
-a:visited { color: purple; }
-input:focus { border-color: blue; }
-
-/* Struktur */
-li:first-child { font-weight: bold; }
-li:nth-child(odd) { background: #eee; }
-```
-
-
-
----
-
-
-
-# Pseudo-Elemente
-
-```css
-.required::before {
- content: "* ";
- color: red;
-}
-
-p::first-letter { font-size: 2em; }
-p::first-line { font-weight: bold; }
-```
-
-**Unterschied:** `:` = Pseudo-Klasse · `::` = Pseudo-Element
-
-
-
----
-
-
-
-# Responsive Design
-
-**Media Queries:** CSS je nach Bildschirmgröße
-
-```css
-/* Mobile First: Standard */
-.container { padding: 1rem; }
-
-/* Ab 768px (Tablet) */
-@media (min-width: 768px) {
- .container { padding: 2rem; max-width: 720px; }
-}
-```
-
-**Breakpoints:** 768px (Tablet) · 1024px (Desktop) · 1280px (Large)
-
-
-
----
-
-# Teil 4: CSS vertiefen
+# Teil 4: CSS vertiefen (optional)
## Transitions & moderne Features
---
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 3b1912e..234574c 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
@@ -57,8 +57,11 @@ section.klausur {
#fff 80px
) !important;
}
-section.klausur footer {
- display: none;
+@media print {
+ section.klausur {
+ background: url('./assets/klausur-pattern.svg') !important;
+ background-size: cover !important;
+ }
}
section.aufgabe {
background: #fce4ec !important;
diff --git a/courses/223015c/slides/assets/klausur-pattern.svg b/courses/223015c/slides/assets/klausur-pattern.svg
new file mode 100644
index 0000000..03f7510
--- /dev/null
+++ b/courses/223015c/slides/assets/klausur-pattern.svg
@@ -0,0 +1,9 @@
+