public/uni
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

slides: 8 overflow-folien gefixt + fragmented-list-marker eingeführt

Browse Source 
per user-feedback nach QA-render-check aller 493 folien (overflow-detector via PIL bottom-band-darkness):

223015b/01-daten-grundlagen s.036 nyquist:
  H1 'Nyquist-Theorem — warum 2× reicht' → 'Nyquist — warum 2× reicht'
  body text gekürzt, drei fälle als * statt - (marp fragmented list)

223015b/03-inhalte-bild-audio-video s.009 RGB→Y'CbCr:
  H1 verkürzt, bg right 50% → 45% contain, list-marker * (Y/Cb/Cr reveal)
  text 'unabhängig komprimiert werden' eingedampft

223015b/03-inhalte-bild-audio-video s.031 inter-frame:
  H1 'Inter-Frame-Kompression — die zentrale Idee' → 'Inter-Frame — die zentrale Idee'
  bg right 42% → 40% contain
  bullets I/P/B mit * (fragmented reveal)

223015b/05-distribution-metadaten s.012 EXIF-tabelle:
  8 zeilen → 5 zeilen (kamera+linse zusammengelegt, belichtung kompakt, software+bearbeitung zusammengelegt)

223015b/05-distribution-metadaten s.014 EXIF-stripping:
  7 plattform-zeilen → 5 (facebook+iMessage und E-mail+slack+discord zusammen)
  faustregel als italic-zeile statt bold-block

223015c/01-geschichte-grundlagen-html s.006 alan turing:
  bg right 35% (default fill) → 33% contain (verhindert dass composite-bild bis footer reicht)
  3 jahres-zeilen als * bullets (fragmented reveal)

dhbw/01_web_eng s.054 counter:
  in 2 folien gesplittet: 'Counter — Vanilla + React' und 'Counter — Vue + Svelte'
  pointe 'vier frameworks, dasselbe pattern: state → UI re-rendert' am ende der 2. folie

dhbw/08_best_practices s.005 .gitignore:
  code-block gekürzt: 6 sektionen → 5, mehrere lines pro logical group zusammengezogen (pem+key zusammen, vscode+idea zusammen)
  github.com/github/gitignore als markdown-link

bonus: wo pädagogisch sinnvoll - durch * ersetzt (marp progressive-reveal in presenter-modus). nicht überall — nur wo bullets sequenziell aufgedeckt werden sollten.

klausurfolien regeneriert (223015b 27, 223015c 19)
This commit is contained in:
libretech
2026-05-14 20:48:38 +02:00
parent 7e8190d0a8
commit 722a4a9fe8
7 changed files with 52 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
slides/223015b/01-daten-grundlagen.md
+6 -5
View File
@@ -809,20 +809,21 @@ Spektrogramm-Folie als Anschluss: 44,1 kHz → wir können bis ~22 kHz erfassen.
<!-- _class: klausur --> <!-- _class: klausur -->
# Nyquist-Theorem — warum 2× reicht # Nyquist — warum 2× reicht
![bg right:50% contain](./assets/demos/nyquist-diagram.png) ![bg right:50% contain](./assets/demos/nyquist-diagram.png)
**Sample-Rate muss mindestens das *Doppelte* der höchsten Signal-Frequenz sein:** **Sample-Rate ≥ *2× höchste Signal-Frequenz.***
``` ```
f_sample ≥ 2 · f_max f_sample ≥ 2 · f_max
``` ```
Drei Fälle: Drei Fälle:
- **zu wenig** → Aliasing (falsche tiefere Welle)
- **genau** → mathematisches Minimum * **zu wenig** → Aliasing
- **mehr** → sichere Rekonstruktion * **genau** → mathematisches Minimum
* **mehr** → sichere Rekonstruktion
<!-- <!--
Harry Nyquist (1928) + Claude Shannon (1949): Sampling-Theorem. Harry Nyquist (1928) + Claude Shannon (1949): Sampling-Theorem.
slides/223015b/03-inhalte-bild-audio-video.md
+13 -15
View File
@@ -209,18 +209,17 @@ Resultat: Foto-Datei ist 10× kleiner als RAW, sieht für das Auge fast identisc
--- ---
# Schritt 1: Farbraum-Konversion (RGB → Y'CbCr) # Schritt 1: RGB → Y'CbCr
![bg right:50% contain](./assets/Barn-yuv.png) ![bg right:45% contain](./assets/Barn-yuv.png)
**Trick:** Helligkeit von Farbe **trennen**. **Trick:** Helligkeit von Farbe **trennen**.
- **Y** (Luminanz) = wie hell ist der Pixel * **Y** = Luminanz (Helligkeit)
- **Cb** = blau-gelb-Differenz * **Cb** = blau-gelb-Differenz
- **Cr** = rot-grün-Differenz * **Cr** = rot-grün-Differenz
Das Auge sieht **Luminanz scharf**, **Chrominanz grob**. Auge sieht **Y scharf**, **Cb/Cr grob.** Beide werden unabhängig komprimiert.
Durch Trennung können beide unabhängig komprimiert werden.
<!-- <!--
Diese Trennung ist verlustfrei — mathematische Umrechnung zwischen Farbräumen. Diese Trennung ist verlustfrei — mathematische Umrechnung zwischen Farbräumen.
@@ -725,18 +724,17 @@ Konkrete Tools:
--- ---
# Inter-Frame-Kompression — die zentrale Idee # Inter-Frame — die zentrale Idee
![bg right:42% contain](./assets/iframe-pframe-diagram.png) ![bg right:40% contain](./assets/iframe-pframe-diagram.png)
Aufeinanderfolgende Frames sehen sich **sehr ähnlich** (Kamera bewegt sich kaum, Person redet — Hintergrund bleibt fast gleich). Aufeinanderfolgende Frames sind **fast gleich**. Statt jedes ganz speichern: nur **Differenz**.
**Statt jedes Frame komplett zu speichern**, speichere nur die *Differenz* zum vorigen.
Drei Frame-Typen: Drei Frame-Typen:
- **I-Frame** (Intra): ganzes Bild als JPEG-ähnliches Standalone
- **P-Frame** (Predicted): Differenz zum vorigen Frame * **I** (Intra) — ganzes Bild
- **B-Frame** (Bidirectional): Differenz zu vorigem UND nächstem Frame * **P** (Predicted) — Diff zum vorigen
* **B** (Bidirectional) — Diff zu vorigem + nächstem
<!-- <!--
Inter-Frame ist DER Trick, der Video-Kompression überhaupt möglich macht. Inter-Frame ist DER Trick, der Video-Kompression überhaupt möglich macht.
slides/223015b/05-distribution-metadaten.md
+13 -18
View File
@@ -331,14 +331,11 @@ Typische EXIF-Daten in einem Smartphone-Foto:
| Feld | Beispiel | | Feld | Beispiel |
|------|----------| |------|----------|
| Kamera-Hersteller | Apple | | Kamera | Apple iPhone 15 Pro · 24 mm · ƒ/1.78 |
| Kamera-Modell | iPhone 15 Pro | | Belichtung | 1/250 s · ISO 100 |
| Linse, Brennweite | 24 mm, ƒ/1.78 | | **Aufnahme-Zeitstempel** | 2026-04-12 · 18:47:12 +02:00 |
| Belichtung, ISO | 1/250 s, ISO 100 |
| **Aufnahme-Zeitstempel** | 2026-04-12 18:47:12 +02:00 |
| **GPS-Koordinaten** | 48.7847°N 9.1825°E (Stuttgart, Königstraße) | | **GPS-Koordinaten** | 48.7847°N 9.1825°E (Stuttgart, Königstraße) |
| Software-Version | iOS 18.4.1 | | Software | iOS 18.4.1 · Photoshop CC 2025 |
| Bearbeitungs-Spuren | Photoshop CC 2025 |
<!-- <!--
EXIF macht Fotos detektiv-tauglich. EXIF macht Fotos detektiv-tauglich.
@@ -385,19 +382,17 @@ McAfee hat sich danach öffentlich darüber lustig gemacht ("yes that was the ac
--- ---
# Social-Media-EXIF-Stripping (Übersicht) # Social-Media-EXIF-Stripping
| Plattform | Stripped EXIF? | Vorbehalte | | Plattform | Stripped? | Vorbehalt |
|-----------|----------------|------------| |-----------|-----------|-----------|
| **Instagram** | Ja | (komplett entfernt + neu komprimiert) | | **Instagram** | Ja | neu komprimiert |
| **Facebook** | Ja | | | **Facebook · iMessage** | Ja | — |
| **Twitter / X** | Ja | nur bei Foto-Upload, nicht bei Direktnachricht | | **Twitter / X** | Ja | nicht bei Direktnachricht |
| **WhatsApp** | Ja, *wenn als Foto* gesendet | NEIN bei "Dokument senden" | | **WhatsApp** | Ja als Foto | NEIN bei „Dokument senden" |
| **iMessage** | Ja | | | **E-Mail · Slack · Discord** | Nein | Original bleibt |
| **E-Mail (Outlook, GMail)** | Nein | Original-Datei bleibt original |
| **Slack / Discord** | Nein bzw. teilweise | Original-Datei bleibt original |
**Faustregel:** Plattform-Upload = wahrscheinlich Stripped. Datei direkt teilen = unsicher. *Plattform-Upload = meist Stripped. Datei direkt teilen = unsicher.*
<!-- <!--
Diese Tabelle ist nicht klausurrelevant, aber lebensweltlich wichtig. Diese Tabelle ist nicht klausurrelevant, aber lebensweltlich wichtig.
slides/223015b/klausurfolien.md
+5 -14
View File
@@ -312,18 +312,19 @@ Spektrogramm-Folie als Anschluss: 44,1 kHz → wir können bis ~22 kHz erfassen.
<!-- _footer: "" --> <!-- _footer: "" -->
# Nyquist-Theorem — warum 2× reicht # Nyquist — warum 2× reicht
![bg right:50% contain](./assets/demos/nyquist-diagram.png) ![bg right:50% contain](./assets/demos/nyquist-diagram.png)
**Sample-Rate muss mindestens das *Doppelte* der höchsten Signal-Frequenz sein:** **Sample-Rate ≥ *2× höchste Signal-Frequenz.***
``` ```
f_sample ≥ 2 · f_max f_sample ≥ 2 · f_max
``` ```
Drei Fälle: Drei Fälle:
- **zu wenig** → Aliasing (falsche tiefere Welle)
- **zu wenig** → Aliasing
- **genau** → mathematisches Minimum - **genau** → mathematisches Minimum
- **mehr** → sichere Rekonstruktion - **mehr** → sichere Rekonstruktion
@@ -480,17 +481,7 @@ Trick-Frage 2: warum nicht WAV für Spotify? → Daten-Volumen zu hoch fürs Str
<!-- _footer: "" --> <!-- _footer: "" -->
# Container ≠ Codec ![bg fit](./assets/demos/container-vs-codec.png)
![bg right:40% contain](./assets/container-codec-diagram.png)
**Container** = die *Verpackung*: hält Video-Spur, Audio-Spur, Untertitel, Metadaten zusammen.
*Beispiele:* MP4, MKV, WebM, AVI
**Codec** = der *Komprimierer*: wie wird Bild/Audio gespeichert?
*Beispiele:* H.264, H.265, AV1, VP9 (Video) · AAC, MP3, Opus (Audio)
**Eine `.mp4`-Datei kann verschiedene Codecs enthalten.**
<!-- <!--
Das ist DER zentrale Missverständnis-Punkt bei Video. Studis denken oft, „MP4" oder „MKV" sei das Format des Videos. Stimmt nicht. Es ist nur die Hülle. Das ist DER zentrale Missverständnis-Punkt bei Video. Studis denken oft, „MP4" oder „MKV" sei das Format des Videos. Stimmt nicht. Es ist nur die Hülle.
slides/223015c/01-geschichte-grundlagen-html.md
+4 -6
View File
@@ -152,17 +152,15 @@ Schatten: IBM lieferte in den 1930er Jahren Tabelliermaschinen auch ins NS-Deuts
--- ---
![bg right:35%](./assets/alan-turing.jpg) ![bg right:33% contain](./assets/alan-turing.jpg)
# Alan Turing (1912–1954) # Alan Turing (1912–1954)
**Theoretisches Fundament moderner Computer.** **Theoretisches Fundament moderner Computer.**
1936: **Turing-Maschine** — ein gedankliches Modell, das jeden Algorithmus berechnen kann. * **1936** — Turing-Maschine
* **1940er** — Bletchley Park, Enigma-Bruch (geheim bis 1974)
1940er: bricht im **Bletchley Park** die deutsche **Enigma**-Verschlüsselung. Geheim bis 1974. * **1950** — Turing-Test
1950: **Turing-Test** für maschinelle Intelligenz.
<!-- <!--
Alan Turing ist der Vater der theoretischen Informatik. Alan Turing ist der Vater der theoretischen Informatik.
slides/dhbw/01_web_eng.md
+7 -1
View File
@@ -746,7 +746,7 @@ Alle: **Komponenten + reaktive State + Re-Render.**
--- ---
# Counter — vier Wege # Counter — Vanilla + React
**Vanilla JS:** **Vanilla JS:**
```javascript ```javascript
@@ -762,6 +762,10 @@ function Counter() {
} }
``` ```
---
# Counter — Vue + Svelte
**Vue 3 (Composition):** **Vue 3 (Composition):**
```vue ```vue
<script setup>const count = ref(0)</script> <script setup>const count = ref(0)</script>
@@ -774,6 +778,8 @@ function Counter() {
<button on:click={() => count++}>{count}</button> <button on:click={() => count++}>{count}</button>
``` ```
Vier Frameworks, **dasselbe Pattern:** State → UI re-rendert.
--- ---
# Build-Tools # Build-Tools
slides/dhbw/08_best_practices.md
+4 -12
View File
@@ -85,34 +85,26 @@ Automatisches Changelog + SemVer-Bump möglich.
# .gitignore — was nie rein gehört # .gitignore — was nie rein gehört
``` ```
# Dependencies # Dependencies + Build
node_modules/ node_modules/
.pnpm-store/
# Build outputs
dist/ dist/
build/ build/
.next/
.cache/ .cache/
# Secrets # Secrets
.env .env
.env.local .env.local
*.pem *.pem *.key
*.key
# Editor + OS # Editor + OS
.vscode/ .vscode/ .idea/
.idea/
.DS_Store .DS_Store
Thumbs.db
# Logs # Logs
*.log *.log
npm-debug.log*
``` ```
Vorlagen: github.com/github/gitignore Vorlagen: [github.com/github/gitignore](https://github.com/github/gitignore)
--- ---