fix klausur slides for pdf: add svg pattern and marp directives

- add svg diagonal stripe patterns for pdf background - use @media print to apply svg only in pdf export - keep css gradient for web/screen display - add _header: '' and _footer: '' to all klausur slides
2026-01-12 12:28:30 +01:00
parent 64e67b7034
commit b45a528faf
11 changed files with 189 additions and 90 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
@@ -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
 ---

 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->

 # Die 5 Komponenten

@@ -648,6 +653,8 @@ PRÜFUNGSRELEVANT: 5 Komponenten benennen und erklären können, Stored Program
 ---

 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->

 # Von-Neumann-Architektur: Bedeutung

@@ -1068,6 +1075,8 @@ Formattierungssprache
 ---

 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->

 # HTML Metadaten

@@ -1286,7 +1295,15 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog

 ---

+<!-- _class: lead -->
+
+# Web Disability Simulator
+
+---
+
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->

 # Wie nutzen Menschen das Web?

@@ -1321,6 +1338,8 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
 ---

 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->

 # Warum "Barrierefreiheit"?

@@ -1482,6 +1501,8 @@ div-Button braucht JavaScript für Enter/Space
 ---

 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->

 # Barrieren im Netz vermeiden (a11y)

@@ -1504,7 +1525,6 @@ Manuelles Testen unverzichtbar
 Echte NutzerInnen einbeziehen = Gold-Standard
 -->

-
 ---


--- 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
 ---

 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->

 # Das OSI-Modell: Die Theorie

@@ -402,6 +406,8 @@ PRÜFUNGSRELEVANT: 7 Schichten mit Beispielen, Unterschied OSI vs. TCP/IP
 ---

 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->

 # TCP/IP: Die Praxis

@@ -637,6 +643,8 @@ Heute: Fast nur noch HTTPS
 ---

 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->

 # Schicht 7: Anwendung

@@ -693,12 +701,16 @@ Von oben nach unten: 7 bis 1
 ---

 <!-- _class: lead klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->

 # HTTP/S im Detail

 ---

 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->

 # HTTP-Request

@@ -726,6 +738,8 @@ Body kommt nach leerem Zeile (bei POST)
 ---

 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->

 # HTTP-Response

@@ -751,6 +765,8 @@ Content-Length: 1234
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
+
+# HTTP-Methoden

 | Methode | CRUD | Zweck | Beispiel |
 |---------|------|-------|----------|
@@ -1091,6 +1107,79 @@ vw/vh = Viewport (sichtbarer Bereich)

 <!-- _class: klausur -->
 <!-- _header: '' -->
+<!-- _footer: '' -->
+
+# 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-Klassen = Zustände, kein JavaScript nötig!
+-->
+
+---
+
+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# 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
+
+<!--
+content nur bei ::before/::after
+-->
+
+---
+
+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# 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)
+
+<!--
+Mobile First = Standard für klein, dann größere überschreiben
+-->
+
+---
+
+<!-- _class: lead -->
+
 # Teil 3: Layouts (optional)
 ## Flexbox & mehr

@@ -1271,76 +1360,9 @@ Oder gleichmäßig verteilt

 <!-- _class: lead -->

-# 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-Klassen = Zustände, kein JavaScript nötig!
-->
-
---
-
-<!-- _class: klausur -->
-
-# 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
-
-<!--
-content nur bei ::before/::after
-->
-
---
-
-<!-- _class: klausur -->
-
-# 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)
-
-<!--
-Mobile First = Standard für klein, dann größere überschreiben
-->
-
---
-
-<!-- _class: lead -->
-
 # Teil 4: CSS vertiefen (optional)
 ## Transitions & moderne Features
-
+
 ---

 # Transitions: Sanfte Übergänge
--- 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;
--- a/courses/223015c/slides/assets/klausur-pattern.svg
+++ b/courses/223015c/slides/assets/klausur-pattern.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80">
+  <defs>
+    <pattern id="diagonalStripes" patternUnits="userSpaceOnUse" width="80" height="80" patternTransform="rotate(135)">
+      <rect width="40" height="80" fill="#fce4ec"/>
+      <rect x="40" width="40" height="80" fill="#ffffff"/>
+    </pattern>
+  </defs>
+  <rect width="100%" height="100%" fill="url(#diagonalStripes)"/>
+</svg>