From b45a528fafd0bcd114837f31c956410a8db8f554 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Mon, 12 Jan 2026 12:28:30 +0100 Subject: [PATCH] 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 --- .../slides/2025-12-19-termin-0-intro.md | 7 +- ...25-12-19-termin-1-grundlagen-text-audio.md | 18 +- .../2026-01-09-termin-2-bild-audio-video.md | 14 +- ...-termin-3-speichermedien-schnittstellen.md | 7 +- ...1-30-termin-4-distribution-apis-zukunft.md | 7 +- ...xx-xx-termin-5-vertiefung-offene-fragen.md | 7 +- .../223015b/slides/assets/klausur-pattern.svg | 9 + ...-20-termin-1-geschichte-grundlagen-html.md | 26 ++- ...01-10-termin-2-netzwerke-protokolle-css.md | 168 ++++++++++-------- ...-24-termin-3-interaktivitaet-javascript.md | 7 +- .../223015c/slides/assets/klausur-pattern.svg | 9 + 11 files changed, 189 insertions(+), 90 deletions(-) create mode 100644 courses/223015b/slides/assets/klausur-pattern.svg create mode 100644 courses/223015c/slides/assets/klausur-pattern.svg 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 @@ + + + + + + + + +