Compare commits

..
8 Commits
Author SHA1 Message Date
libretech 7eec3c4688 move assets to slides/assets for relative image paths 2025-12-17 18:07:30 +01:00
libretech 5486f45f44 update makefile to use slides/assets and direct dev server 2025-12-17 18:07:23 +01:00
libretech 4d6b8fc620 add termin 1 images
- matrix-code, lightbulb-onoff, grayscale-gradient
- rgb-color-model, ascii-table, hex-binary-table
- hexeditor-screenshot, cassette-ipod, compression-types
- audio-spectrogram, napster-interface
- karlheinz-brandenburg.jpg, suzanne-vega.jpg (real photos)
2025-12-17 13:43:03 +01:00
libretech f2eef57b05 change image references from .jpg to .png
- update IMAGE_LIST.md and all slide files
- keep karlheinz-brandenburg.jpg and suzanne-vega.jpg as .jpg (real photos)
- keep code examples unchanged (exiftool, HTML examples)
2025-12-17 13:26:05 +01:00
libretech 5bc521abee simplify makefile for modular slide workflow
- single 'make dev' serves build/ with file picker ui
- 'make assemble' concatenates header + intro + termin + outro
- remove individual dev-1/dev-2 targets (marp ui handles file selection)
- delete completed PLAN-split-slides.md
2025-12-14 20:34:46 +01:00
libretech 40b4a194ff split index.md into modular slide files
- extract _frontmatter.md, _intro.md, _outro.md as shared components
- create separate files per termin with date-topic naming convention:
  2025-12-19-termin-1-grundlagen-text-audio.md
  2026-01-09-termin-2-bild-audio-video.md
  2026-01-23-termin-3-speichermedien-schnittstellen.md
  2026-01-30-termin-4-distribution-apis-zukunft.md
  2026-xx-xx-termin-5-vertiefung-offene-fragen.md
- keep index.md.bak as backup (gitignored)
2025-12-14 20:34:20 +01:00
libretech 59d58d96db add marp skill and slide split plan 2025-12-14 19:17:20 +01:00
libretech 70b169e883 add personal notes on hdm teaching assignment 2025-12-14 18:33:54 +01:00
17 changed files with 363 additions and 791 deletions

No files matched your search

-1
View File
@@ -62,4 +62,3 @@ Desktop.ini
!build/*.html !build/*.html
*.pdf *.pdf
index.md.bak index.md.bak
hdm-lehrauftrag-uebersicht.md
+23 -26
View File
@@ -26,57 +26,56 @@ This document lists all images needed for the lecture slides. Each image include
## Termin 1: Grundlagen, Text & Audio ## Termin 1: Grundlagen, Text & Audio
### ✅ matrix-code.png ### ⬚ matrix-code.png
- **Context**: Opening visual for "WTF!?" hex dump slide - **Context**: Opening visual for "Mysterium" hex dump slide
- **AI Prompt**: Matrix-style green digital rain code falling on black background, glowing green characters, cyberpunk hacker aesthetic, mysterious data visualization - **AI Prompt**: Matrix-style green digital rain code falling on black background, glowing green characters, cyberpunk hacker aesthetic, mysterious data visualization
### ✅ lightbulb-onoff.png ### ⬚ lightbulb-onoff.png
- **Context**: Explaining the bit concept (0 or 1, on or off) - **Context**: Explaining the bit concept (0 or 1, on or off)
- **AI Prompt**: Simple lightbulb comparison: one lit bright yellow, one dark/off, side by side, clean minimal style, binary concept visualization, white background - **AI Prompt**: Simple lightbulb comparison: one lit bright yellow, one dark/off, side by side, clean minimal style, binary concept visualization, white background
### ✅ grayscale-gradient.png ⚠️ NEEDS REGENERATION ### ⬚ grayscale-gradient.png
- **Context**: Explaining 256 grayscale values (0=black to 255=white) - **Context**: Explaining 256 grayscale values (0=black to 255=white)
- **AI Prompt**: Horizontal grayscale gradient bar on a neutral gray background (#808080), gradient goes from pure black (left) to pure white (right), add visible value labels "0" on left and "255" on right, ensure edges are clearly visible against background, clean educational diagram style, 16:9 aspect ratio - **AI Prompt**: Smooth horizontal grayscale gradient from pure black on left to pure white on right, demonstrating 256 shades, clean minimal style, technical demonstration
- **Issue**: Current image has barely visible edges on left (black) and right (white) sides
### ✅ rgb-color-model.png ### ⬚ rgb-color-model.png
- **Context**: Explaining RGB color model (3 bytes per pixel) - **Context**: Explaining RGB color model (3 bytes per pixel)
- **AI Prompt**: RGB color model visualization showing three overlapping circles (red, green, blue) creating cyan, magenta, yellow, and white in overlaps, clean educational diagram style - **AI Prompt**: RGB color model visualization showing three overlapping circles (red, green, blue) creating cyan, magenta, yellow, and white in overlaps, clean educational diagram style
### ✅ ascii-table.png ### ⬚ ascii-table.png
- **Context**: Showing ASCII character encoding (7-bit, 128 characters total) - **Context**: Showing ASCII character encoding
- **AI Prompt**: Clean ASCII table showing printable characters 32-126 with their decimal and hex values, vintage computer terminal aesthetic, green on black or clean white background, educational reference chart. Note: ASCII is 7-bit encoding with 128 total characters (0-127), not 256. First 32 (0-31) are control characters, 127 is DEL. - **AI Prompt**: Clean ASCII table showing characters 0-127 with their decimal and hex values, vintage computer terminal aesthetic, green on black or clean white background, educational reference chart
### ✅ hex-binary-table.png ### ⬚ hex-binary-table.png
- **Context**: Hex to binary conversion reference - **Context**: Hex to binary conversion reference
- **AI Prompt**: Clean conversion table showing hexadecimal digits 0-F with their 4-bit binary equivalents, educational reference style, programmer cheat sheet aesthetic - **AI Prompt**: Clean conversion table showing hexadecimal digits 0-F with their 4-bit binary equivalents, educational reference style, programmer cheat sheet aesthetic
### ✅ hexeditor-screenshot.png ### ⬚ hexeditor-screenshot.png
- **Context**: Showing what a hex editor looks like - **Context**: Showing what a hex editor looks like
- **AI Prompt**: Screenshot of hex editor software showing file bytes in hexadecimal with ASCII representation on the right side, typical hex editor layout, technical software interface - **AI Prompt**: Screenshot of hex editor software showing file bytes in hexadecimal with ASCII representation on the right side, typical hex editor layout, technical software interface
### ✅ cassette-ipod.png ### ⬚ cassette-ipod.png
- **Context**: Audio format evolution intro - **Context**: Audio format evolution intro
- **AI Prompt**: Vintage audio cassette tape next to modern iPod or MP3 player, technology evolution comparison, nostalgic meets modern, clean product photography style - **AI Prompt**: Vintage audio cassette tape next to modern iPod or MP3 player, technology evolution comparison, nostalgic meets modern, clean product photography style
### ✅ compression-types.png ### ⬚ compression-types.png
- **Context**: Lossless vs lossy compression comparison - **Context**: Lossless vs lossy compression comparison
- **AI Prompt**: Split diagram comparing lossless (ZIP icon, identical files) vs lossy (JPEG/MP3 icon, smaller but different), educational infographic style, clear visual distinction - **AI Prompt**: Split diagram comparing lossless (ZIP icon, identical files) vs lossy (JPEG/MP3 icon, smaller but different), educational infographic style, clear visual distinction
### ✅ karlheinz-brandenburg.jpg ### ⬚ karlheinz-brandenburg.jpg
- **Context**: MP3 inventor portrait/reference (Fraunhofer IIS) - **Context**: MP3 inventor portrait/reference
- **AI Prompt**: Professional portrait style of a German scientist/engineer in academic setting, Fraunhofer institute aesthetic, 1990s technology pioneer look (or use real photo) - **AI Prompt**: Professional portrait style of a German scientist/engineer in academic setting, Fraunhofer institute aesthetic, 1990s technology pioneer look (or use real photo)
### ✅ suzanne-vega.jpg ### ⬚ suzanne-vega.jpg
- **Context**: "Tom's Diner" - the song used to test MP3 compression - **Context**: "Tom's Diner" - the song used to test MP3
- **AI Prompt**: Female singer-songwriter aesthetic, acoustic guitar, 1980s folk music style, intimate cafe performance setting (or use real photo) - **AI Prompt**: Female singer-songwriter aesthetic, acoustic guitar, 1980s folk music style, intimate cafe performance setting (or use real photo)
### ✅ audio-spectrogram.png ### ⬚ audio-spectrogram.png
- **Context**: Visualizing audio frequencies and MP3 compression effects - **Context**: Visualizing audio frequencies
- **AI Prompt**: Colorful audio spectrogram visualization showing frequency spectrum over time, rainbow gradient from low (red) to high (blue) frequencies, scientific audio analysis display - **AI Prompt**: Colorful audio spectrogram visualization showing frequency spectrum over time, rainbow gradient from low (red) to high (blue) frequencies, scientific audio analysis display
### ✅ napster-interface.png ### ⬚ napster-interface.png
- **Context**: MP3 piracy era / file sharing history (1999-2001) - **Context**: MP3 piracy era / file sharing history
- **AI Prompt**: Late 1990s peer-to-peer file sharing interface aesthetic, Windows 98/2000 style dialog boxes, music file listings, nostalgic internet era, retro software UI - **AI Prompt**: Late 1990s peer-to-peer file sharing interface aesthetic, Windows 98/2000 style dialog boxes, music file listings, nostalgic internet era, retro software UI
--- ---
@@ -302,13 +301,11 @@ This document lists all images needed for the lecture slides. Each image include
| Lecture | Total | ✅ Done | ⬚ Todo | | Lecture | Total | ✅ Done | ⬚ Todo |
|---------|-------|--------|--------| |---------|-------|--------|--------|
| Intro | 1 | 1 | 0 | | Intro | 1 | 1 | 0 |
| Termin 1 (Grundlagen/Text/Audio) | 13 | 13 | 0 | | Termin 1 (Grundlagen/Text/Audio) | 13 | 0 | 13 |
| Termin 2 (Bild/Audio/Video) | 10 | 10 | 0 | | Termin 2 (Bild/Audio/Video) | 10 | 10 | 0 |
| Termin 3 (Speichermedien) | 16 | 0 | 16 | | Termin 3 (Speichermedien) | 16 | 0 | 16 |
| Termin 4 (Distribution/APIs) | 25 | 0 | 25 | | Termin 4 (Distribution/APIs) | 25 | 0 | 25 |
| **Total** | **65** | **24** | **41** | | **Total** | **65** | **11** | **54** |
**Note:** grayscale-gradient.png is marked ⚠️ NEEDS REGENERATION due to visibility issues at edges.
## Generation Tips ## Generation Tips
+2 -40
View File
@@ -1,44 +1,6 @@
# 223015b – Dateiformate, Schnittstellen, Speichermedien & Distributionswege # HdM - Dateiformate, Speichermedien und Schnittstellen
**Modul "Technik 1"** · 1. Semester · Digital- und Medienwirtschaft ## Creating Slides
Hochschule der Medien Stuttgart · Wintersemester 2025/26
**Repository:** [git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
---
## Über dieses Modul
> *Internettechnologien 1 – "Technische Grundlagen von IT-Projekten"*
Die Digitalisierung verändert die Prozesse und Tätigkeiten in allen Branchen. Sie hat neue Geschäftsmodelle ermöglicht und auch unseren Alltag stark verändert. Kaum ein Projekt in der Medienwelt kommt ohne digitale Technik aus – als Produkt, Kollaborationsplattform oder Marketing- und Verkaufsplattform.
**Ziel:** Technische Grundlagen verstehen, um mit Entwicklungsteams, Kunden und Projektpartnern auf Augenhöhe zusammenarbeiten zu können.
### Termine
| # | Datum | Thema |
|---|-------|-------|
| 1 | 19.12.2025 | Grundlagen, Text & Audio |
| 2 | 09.01.2026 | Bild- & Videoformate |
| 3 | 23.01.2026 | Speichermedien & Schnittstellen |
| 4 | 30.01.2026 | Distribution, APIs & Zukunft |
| 5 | TBA | Vertiefung & offene Fragen |
### Kompetenzen
In dieser Veranstaltung erwerben Sie folgende Kompetenzen:
- Technische Konzepte des Internets verstehen (Netzwerke, Protokolle, Client/Server)
- Dateiformate analysieren und verstehen
- Grundlagen von Kompression (Audio, Bild, Video)
- Speichermedien und Schnittstellen kennen
- APIs und Distributionswege verstehen
**Dozent:** Michael Czechowski · michael.czechowski@lehre.dhbw-stuttgart.de
---
## Slides erstellen
### Basic Slide Structure ### Basic Slide Structure
+132
View File
@@ -0,0 +1,132 @@
# Lehrauftrag HdM Stuttgart – WS 25/26
**Studiengang:** Digital- und Medienwirtschaft / Media Entertainment
**Kontakt:** Tahira Siddiqui (Studiengangsmanagerin)
**Ort:** HdM Stuttgart, Nobelstraße 10, 70569 Stuttgart
---
## Vorlesungen & Termine
### 1. Dateiformate, Schnittstellen, Speichermedien und Distributionswege
*Teil des Moduls "Technik 1", 1. Semester*
| Termin | Tag | Zeit | Status |
|--------|-----|------|--------|
| ~~12.12.2025~~ | ~~Fr~~ | ~~14:15 – 17:30~~ | ❌ Auslandsreise |
| 19.12.2025 | Fr | 14:15 – 17:30 | ✓ |
| 09.01.2026 | Fr | 14:15 – 17:30 | ✓ |
| 23.01.2026 | Fr | 14:15 – 17:30 | ✓ |
| 30.01.2026 | Fr | 14:15 – 17:30 | ✓ |
**⚠️ Offen:** Ersatztermin für 12.12. mit Tahira klären
**Inhalte:**
- Dateiformate (Text, Bild, Audio, Video; Header, Metadaten, Kompression)
- Speichermedien (HDD, SSD, Cloud)
- Schnittstellen (USB, HDMI, APIs)
- Distributionswege (CDN, P2P, Plattformen)
- Werkzeuge & Praxisbezug
---
### 2. Grundlagen IT (Internet 1)
| Termin | Tag | Zeit |
|--------|-----|------|
| 20.12.2025 | Fr | 10:00 – 16:30 |
| 10.01.2026 | Fr | 10:00 – 16:30 |
| 24.01.2026 | Fr | 10:00 – 16:30 |
**Unterlagen:** https://filestore.hdm-stuttgart.de/s/rW4zJUluFlh9ZWJ
---
## Chronologie der Korrespondenz
### Phase 1: Anfrage (14.–19.11.2025)
**14.11. – Tahira → Michael:**
Anfrage für Lehrauftrag "Dateiformate, Schnittstellen, Speichermedien und Distributionswege". Kurzfristige Besetzung im laufenden Semester benötigt.
**14.11. – Michael → Tahira:**
Grundsätzliches Interesse, ab Dezember verfügbar, nur Freitage möglich.
**18.11. – Tahira → Michael:**
Bestätigung: Freitage sind kein Problem.
**18.11. – Michael → Tahira:**
Zusage: "Solange es freitags stattfinden kann, bin ich ab Dezember einsatzbereit."
**18.11. – Tahira → Michael:**
Fragt nach persönlichem Gespräch.
**19.11. – Michael → Tahira:**
Gibt Telefonnummer für Rückruf.
---
### Phase 2: Terminplanung (24.–27.11.2025)
**24.11. – Tahira → Michael:**
Erste Terminvorschläge für "Technik 1": 12.12., 19.12., 09.01., 23.01., 30.01. (je 14:15–17:30).
Erwähnt zusätzlich möglichen Lehrauftrag "Grundlagen IT und Internettechnik" als Samstags-Blocktage.
**26.11. – Tahira → Michael:**
Fragt nach Meeting morgen Vormittag. Sendet Link zu Unterlagen für Grundlagen IT.
**26.11. – Michael → Tahira:**
Schlägt 10 Uhr vor (muss ab 11 Uhr im Zug sein).
**26.11. – Tahira → Michael:**
Gegenvorschlag: 9:30 Uhr.
**26.11. – Michael → Tahira:**
"Dann 9:30, bis morgen."
**27.11. – Meeting um 9:30 Uhr (vermutlich telefonisch)**
---
### Phase 3: Vertragsunterzeichnung (03.12.2025)
**03.12. – Michael → Tahira:**
Hat Termin um 16 Uhr übersehen, fragt nach Alternativen.
**03.12. – Tahira → Michael:**
Kann länger bleiben oder Freitag ab 12 Uhr.
**03.12. – Michael → Tahira:**
Schlägt 14:30 Uhr vor. Gibt Anschrift für Vertrag:
Michael Werner Czechowski, Schnellweg 3, 70199 Stuttgart
**03.12. – Tahira → Michael:**
"Ja, das passt!"
**03.12. – Persönliches Treffen um 14:30 Uhr an der HdM**
---
### Phase 4: Grundlagen IT Termine (05.–08.12.2025)
**05.12. – Tahira → Michael:**
Terminvorschläge für Grundlagen IT: 13.12., 20.12., 10.01., 24.01. (je 10:00–17:00). Drei Termine genügen.
**08.12. – Michael → Tahira:**
Zeiten passen allgemein, aber 13.12. nicht möglich (Auslandsreise). Bittet um Ausweichtermin.
**08.12. – Tahira → Michael:**
Passt Termine an: 20.12., 10.01., 24.01. (je 10:00–16:30).
**08.12. – Michael → Tahira:**
"Das passt für mich!"
---
## Zusammenfassung
- **Zwei Lehraufträge** im WS 25/26
- **Alle Termine freitags** (wie gewünscht)
- **Semesterende:** 31.01.2026
- **Vertrag unterschrieben:** 03.12.2025 (persönlich an der HdM)
-150
View File
@@ -1,150 +0,0 @@
---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
---
<style>
section {
font-size: 1.7rem;
}
h2 {
color: var(--color-dimmed);
}
</style>
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #000 -->
![bg fit opacity:0.4](./assets/digital-landscape.png)
# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
**223015b** · Modul "Technik 1" · 1. Semester
Digital- und Medienwirtschaft
Hochschule der Medien Stuttgart
**Wintersemester 2025/26**
[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
---
<!-- _class: lead -->
# Internettechnologien 1
## "Technische Grundlagen von IT-Projekten"
---
# Über mich
**Michael Czechowski**
- Softwareentwickler & IT-Berater
- Schwerpunkte: Cloud, AI, Web-Technologien, Systemarchitektur, Open Source
- Hintergrund: Philosophie & Informatik
- Kontakt: mail@librete.ch
<!--
Kurze Vorstellung
Praxisbezug betonen
Fragen jederzeit willkommen
-->
---
# Kurze Umfrage
**Bitte Hand heben:**
1. Wer hat schon mal ein Video komprimiert/konvertiert?
2. Wer hat schon mal eine Datei mit einem Hex-Editor geöffnet?
3. Wer weiß, was der Unterschied zwischen JPEG und PNG ist?
4. Wer hat schon mal mit APIs gearbeitet?
5. Wer weiß, was UTF-8 bedeutet?
6. **Wer hat schon mal HTML oder CSS gemacht?** (Hex-Farben wie `#FF0000`?)
<!--
Niveau der Gruppe einschätzen
Keine falschen Antworten
Zeigt, wo wir starten
HTML/CSS-Frage: Viele kennen Hex-Codes aus Webdesign
-->
---
# Warum dieses Modul?
Die Digitalisierung verändert die Prozesse und Tätigkeiten in allen Branchen. Sie hat neue Geschäftsmodelle ermöglicht und auch unseren Alltag stark verändert.
Kaum ein Projekt in der Medienwelt kommt ohne digitale Technik aus:
- Als **Produkt** (z.B. Verkauf einer Webseite)
- Als **Kollaborationsplattform**
- Als **Marketing- und Verkaufsplattform**
<!--
Aus dem Modulhandbuch "Internettechnologien 1"
Digitalisierung betrifft alle Branchen
Technik ist nicht optional, sondern zentral
-->
---
# Das Ziel
**Technische Grundlagen verstehen**, um mit Entwicklungsteams, Kunden und Projektpartnern **auf Augenhöhe** zusammenarbeiten zu können.
Grundkenntnisse der Internettechnologien und der Prozesse der Software-Entwicklung sind **unabdingbar**, um ein gemeinsames Verständnis von Projektanforderungen und dem Projektvorgehen zu erreichen.
<!--
Nicht: Ihr sollt Programmierer werden
Sondern: Ihr sollt mitreden können
"Auf Augenhöhe" = verstehen, was Entwickler:innen meinen
-->
---
# Was ihr lernt
**In dieser Veranstaltung erwerbt ihr folgende Kompetenzen:**
- Technische Konzepte des Internets verstehen (Netzwerke, Protokolle, Client/Server)
- Dateiformate analysieren und verstehen
- Grundlagen von Kompression (Audio, Bild, Video)
- Speichermedien und Schnittstellen kennen
- APIs und Distributionswege verstehen
<!--
Fokus auf Verständnis, nicht auf Programmierung
Hands-On jede Woche: Selbst ausprobieren
Ziel: Einblick in die Denkweise von Software-Entwicklern
-->
---
# Kursübersicht
**5 Termine:**
| # | Datum | Thema |
|---|-------|-------|
| 1 | 19.12.2025 | Bits, Bytes, Zeichenkodierung & Audio |
| 2 | 09.01.2026 | Bild- & Video-Kompression |
| 3 | 23.01.2026 | Speichermedien & Schnittstellen |
| 4 | 30.01.2026 | Distribution, APIs & Zukunft |
| 5 | TBA | Vertiefung & offene Fragen |
**Format:** Theorie + Hands-On (30-40 Min pro Termin)
<!--
Nicht nur theoretische Inhalte
Praktische Übungen jede Woche
Medienwissenschaftler:innen, nicht Informatiker:innen
-->
@@ -1,38 +1,3 @@
---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
---
<style>
section {
font-size: 1.7rem;
}
h2 {
color: var(--color-dimmed);
}
</style>
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #000 -->
![bg fit opacity:0.4](./assets/digital-landscape.png)
# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
**223015c** · Modul "Technik 1" · 1. Semester
Digital- und Medienwirtschaft
Hochschule der Medien Stuttgart
**Wintersemester 2025/26**
[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
--- ---
<!-- _class: lead --> <!-- _class: lead -->
@@ -40,12 +5,11 @@ Hochschule der Medien Stuttgart
# Termin 1 – 19.12.2025 # Termin 1 – 19.12.2025
## Grundlagen, Text & Audio ## Grundlagen, Text & Audio
--- ---
![bg right:40%](./assets/matrix-code.png) ![bg right:40%](./assets/matrix-code.png)
# WTF!? # Mysterium
``` ```
89 50 4E 47 0D 0A 1A 0A 89 50 4E 47 0D 0A 1A 0A
@@ -64,18 +28,6 @@ Fragen in den Raum: "Was seht ihr?"
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/lightbulb-onoff.png)
<!--
Bit = Binary Digit
Demonstration: Glühbirne AN/AUS = 1 Bit
-->
---
# Das Bit # Das Bit
**Kleinste Informationseinheit** **Kleinste Informationseinheit**
@@ -84,13 +36,13 @@ Demonstration: Glühbirne AN/AUS = 1 Bit
- AN oder AUS - AN oder AUS
- Strom fließt oder nicht - Strom fließt oder nicht
![bg right:50%](./assets/lightbulb-onoff.png)
<!-- <!--
BIT = Binary Digit (Binärziffer) – 1948 von Claude Shannon geprägt Bit = Binary Digit
Shannon war Mathematiker bei Bell Labs – begründete die Informationstheorie Demonstration: Glühbirne AN/AUS = 1 Bit
Warum binär? Elektronische Schaltungen haben nur 2 Zustände: Strom/kein Strom Alles Digitale basiert darauf
Das ist physikalisch am stabilsten (weniger Fehler als 3 oder 10 Zustände) Transistoren in CPUs: Milliarden Bits schalten Millionen Mal pro Sekunde
Alles Digitale basiert auf dieser simplen Idee: AN oder AUS
Transistoren in modernen CPUs: Milliarden davon, schalten Milliarden Mal pro Sekunde
--> -->
--- ---
@@ -107,25 +59,9 @@ Transistoren in modernen CPUs: Milliarden davon, schalten Milliarden Mal pro Sek
2⁸ = **256 Möglichkeiten** (0-255) 2⁸ = **256 Möglichkeiten** (0-255)
<!-- <!--
BYTE = Wortspiel aus "Bit" + "Bite" (Bissen) – ein "Bissen" Information Rechnung gemeinsam: 2×2×2×2×2×2×2×2 = 256
Warum genau 8 Bits? Jedes Bit kann 0 oder 1 sein
- 1964: IBM System/360 setzte diesen Standard (vorher: 6-Bit, 7-Bit Systeme) 256 verschiedene Werte mit 8 Bits darstellbar
- ASCII (1963) brauchte 7 Bit für 128 Zeichen
- 8 Bit = praktisch für Hardware (Zweierpotenz: 2³ = 8)
- 8 Bit = 2 Hexadezimalziffern (elegante Darstellung)
Eselsbrücke: 1 Byte = 1 Buchstabe (in ASCII/UTF-8 für einfache Zeichen)
Rechnung: 2×2×2×2×2×2×2×2 = 256 mögliche Kombinationen
-->
---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg fit](./assets/grayscale-gradient.png)
<!--
256 Graustufen: 0 = Schwarz, 255 = Weiß
--> -->
--- ---
@@ -137,28 +73,12 @@ Rechnung: 2×2×2×2×2×2×2×2 = 256 mögliche Kombinationen
- **256 Lautstärkestufen** - **256 Lautstärkestufen**
- **Zahlen 0-255** (oder -128 bis +127) - **Zahlen 0-255** (oder -128 bis +127)
<!-- ![bg left:40%](./assets/grayscale-gradient.png)
256 = die "magische Zahl" bei 8 Bit
Alltagsbeispiele:
- Lautstärkeregler (0 = stumm, 255 = max)
- Helligkeitswerte in Bildern (0 = schwarz, 255 = weiß)
- Alter in Jahren (0-255 reicht für Menschen locker)
- Zeichen (ASCII erweitert: 256 Buchstaben/Symbole)
Für Farbbilder: 3 Bytes pro Pixel (R, G, B)
Jeder Kanal 0-255 → 256³ = 16.777.216 Farben ("True Color")
Das menschliche Auge kann etwa 10 Millionen Farben unterscheiden
→ 24 Bit reicht für fotorealistische Bilder
-->
---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg fit](./assets/rgb-color-model.png)
<!-- <!--
RGB = Additive Farbmischung (Bildschirme) 1 Byte ist extrem limitiert
Für Farbbild: 3 Bytes pro Pixel (RGB)
R=0-255, G=0-255, B=0-255 → 256³ = 16,7 Millionen Farben
--> -->
--- ---
@@ -171,16 +91,18 @@ RGB = Additive Farbmischung (Bildschirme)
- **Grün:** 0-255 - **Grün:** 0-255
- **Blau:** 0-255 - **Blau:** 0-255
**Beispiele:** **Beispiel:**
`FF 00 00` = Rot | `00 FF 00` = Grün `FF 00 00` = Rot
`00 00 00` = Schwarz | `FF FF FF` = Weiß `00 FF 00` = Grün
`FF FF FF` = Weiß
![bg right:40%](./assets/rgb-color-model.png)
<!-- <!--
RGB = Additive Farbmischung (Bildschirme)
CMYK = Subtraktive Farbmischung (Druck) CMYK = Subtraktive Farbmischung (Druck)
Hex-Notation: FF = 255 in Dezimal Hex-Notation: FF = 255 in Dezimal
CSS-Farben nutzen Hex: #FF0000 = Rot CSS-Farben nutzen Hex: #FF0000 = Rot
Wer HTML/CSS gemacht hat, kennt das schon!
background-color: #FF0000; = Rot
--> -->
--- ---
@@ -208,9 +130,6 @@ Chaos: Verschiedene Standards für verschiedene Sprachen
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/ascii-table.png) ![bg](./assets/ascii-table.png)
<!-- <!--
@@ -247,12 +166,12 @@ Umlaute: "ä" = 2 Bytes, Chinesisch: 3 Bytes, Emoji: 4 Bytes
# Beispiel: Bytes zählen # Beispiel: Bytes zählen
**Text:** `"Why the heck braucht 💩 4 Bytes?!"` **Text:** `"Why the fuck braucht 💩 4 Bytes?!"`
``` ```
W h y → je 1 Byte (4 Bytes) W h y → je 1 Byte (4 Bytes)
t h e → je 1 Byte (4 Bytes) t h e → je 1 Byte (4 Bytes)
h e c k → je 1 Byte (4 Bytes) f u c k → je 1 Byte (4 Bytes)
→ 1 Byte (Leerzeichen) → 1 Byte (Leerzeichen)
b r a u c h t → je 1 Byte (7 Bytes) b r a u c h t → je 1 Byte (7 Bytes)
→ 1 Byte → 1 Byte
@@ -272,19 +191,6 @@ UTF-8-Kodierung: Variable Länge spart Speicher bei ASCII
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #000 -->
![bg fit](./assets/hex-binary-table.png)
<!--
Hex-Binär-Umrechnungstabelle
Jede Hex-Ziffer = 4 Bits
-->
---
# Hexadezimal: Lesbarkeit # Hexadezimal: Lesbarkeit
**Binär ist unleserlich:** **Binär ist unleserlich:**
@@ -293,25 +199,16 @@ Jede Hex-Ziffer = 4 Bits
**Hexadezimal (Base 16):** **Hexadezimal (Base 16):**
`4D 50 33` (= "MP3" in ASCII) `4D 50 33` (= "MP3" in ASCII)
**Jede Hex-Ziffer = 4 Bits (ein "Nibble")** **Jede Hex-Ziffer = 4 Bits**
0-9, A-F (10=A, 11=B, ..., 15=F) 0-9, A-F (10=A, 11=B, ..., 15=F)
![bg right:40%](./assets/hex-binary-table.png)
<!-- <!--
Warum Hexadezimal statt Dezimal? Hex = Shortcut für Menschen, nicht für Computer
- Binär ist zu lang: 01001101 (8 Zeichen für 1 Byte) Computer denken binär, wir lesen hex
- Dezimal passt nicht: 77 (unregelmäßig, manchmal 2, manchmal 3 Ziffern) 1 Byte = 2 Hex-Ziffern (00-FF)
- Hex ist perfekt: 4D (immer 2 Ziffern pro Byte) Hex-Editor: Standard-Tool für Dateianalyse
Trick: 4 Bits = 1 Hex-Ziffer (weil 2⁴ = 16)
0000 = 0, 0001 = 1, ..., 1001 = 9, 1010 = A, 1011 = B, ..., 1111 = F
"Nibble" = 4 Bits = halbes Byte (Wortspiel: nibble = knabbern, byte = beißen)
Umrechnung üben:
- 0x4D = 4×16 + 13 = 64 + 13 = 77 (Dezimal) = Buchstabe "M" in ASCII
- 0xFF = 15×16 + 15 = 255 (Maximum für 1 Byte)
Hex-Editor = Standard-Tool für Dateianalyse und Reverse Engineering
--> -->
--- ---
@@ -325,35 +222,18 @@ Hex-Editor = Standard-Tool für Dateianalyse und Reverse Engineering
| PNG | `89 50 4E 47 0D 0A 1A 0A` | `.PNG` | | PNG | `89 50 4E 47 0D 0A 1A 0A` | `.PNG` |
| JPEG | `FF D8 FF` | `ÿØÿ` | | JPEG | `FF D8 FF` | `ÿØÿ` |
| PDF | `25 50 44 46` | `%PDF` | | PDF | `25 50 44 46` | `%PDF` |
| ZIP/DOCX/ODT | `50 4B 03 04` | `PK` | | ZIP | `50 4B 03 04` | `PK` |
**Achtung:** TXT, HTML, CSS haben **keine** Magic Number!
<!-- <!--
Magic Number = Signatur/Fingerabdruck am Dateianfang Magic Number = Signature am Dateianfang
Wozu? Betriebssystem erkennt Dateityp unabhängig von Dateiendung Computer schauen in erste Bytes (nicht auf .jpg/.png)
"PK" = Phil Katz (Erfinder von PKZip)
Geschichte: "PK" bei ZIP = Phil Katz (Erfinder von PKZip, 1989) Dateiendungen können lügen, Magic Numbers nicht
Fun Fact: DOCX, XLSX, PPTX, ODT = alles ZIP-Archive mit XML-Inhalt!
→ Einfach .zip anhängen und entpacken!
Dateien OHNE Magic Number: TXT, HTML, CSS, JSON, XML
→ Diese sind reiner Text, kein binäres Format
→ Werden anhand Inhalt/Endung erkannt
Sicherheits-Aspekt:
virus.exe → bild.jpg umbenennen täuscht nur Menschen
Windows vertraut der Endung, aber Tools wie "file" (Linux) lesen Magic Number
→ Nie Dateien von Fremden öffnen, nur weil sie harmlos aussehen!
--> -->
--- ---
<!-- _header: '' --> ![bg](./assets/hexeditor-screenshot.png)
<!-- _footer: '' -->
<!-- _backgroundColor: #000 -->
![bg fit](./assets/hexeditor-screenshot.png)
<!-- <!--
Hex-Editor-Screenshot mit PNG-Datei Hex-Editor-Screenshot mit PNG-Datei
@@ -365,12 +245,11 @@ Tool: HxD (Windows), Hex Fiend (Mac), xxd (Linux)
--- ---
# Hands-On: WTF Files # Hands-On: Mystery Files
**Aufgabe (30 Min):** **Aufgabe (30 Min):**
1. Drei Dateien ohne Extension: `wtf1`, `wtf2`, `wtf3` 1. Drei Dateien ohne Extension: `mystery1`, `mystery2`, `mystery3`
→ Download: `materials/` Ordner
2. Öffne im Hex-Editor 2. Öffne im Hex-Editor
3. Lies erste 16 Bytes 3. Lies erste 16 Bytes
4. Identifiziere Format (Magic Number) 4. Identifiziere Format (Magic Number)
@@ -380,31 +259,28 @@ Tool: HxD (Windows), Hex Fiend (Mac), xxd (Linux)
<!-- <!--
Praktische Phase: Studierende arbeiten selbst Praktische Phase: Studierende arbeiten selbst
Dateien im materials/ Ordner: Dateien: PNG, JPEG, TXT (vorbereitet)
- wtf1: Plaintext (keine Magic Number)
- wtf2: PNG (89 50 4E 47)
- wtf3: JPEG (FF D8 FF)
Gruppenarbeit: 3-4 Personen Gruppenarbeit: 3-4 Personen
Ziel: Hex-Dump lesen lernen, Dateiformate verstehen Ziel: Hex-Dump lesen lernen, Dateiformate verstehen
--> -->
--- ---
# Fleißaufgabe bis nächste Woche # Aufgabe bis nächste Woche
**Finde eine Datei auf deinem Computer** **Finde eine Datei auf deinem Computer**
1. Öffne im Hex-Editor 1. Öffne im Hex-Editor
2. Schau dir die ersten 16 Bytes an 2. Screenshot der ersten 16 Bytes
3. Identifiziere die Magic Number (falls vorhanden) 3. Identifiziere Magic Number
4. Nächste Woche: Kurze Diskussion 4. Poste im Forum: Format + kurze Beschreibung
**Bonus:** Finde Datei ohne Magic Number **Bonus:** Finde Datei ohne Magic Number in Standard-Listen
<!-- <!--
Selbstständiges Experimentieren Selbstständiges Arbeiten
Keine Abgabe, nur zum Ausprobieren Forum: Peer-Learning, gegenseitige Hilfe
Nächste Woche kurz besprechen Bonus: Spornt Neugierige an
--> -->
--- ---
@@ -416,9 +292,6 @@ Nächste Woche kurz besprechen
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/cassette-ipod.png) ![bg](./assets/cassette-ipod.png)
<!-- <!--
@@ -453,20 +326,10 @@ Streaming? Unmöglich.
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg fit](./assets/compression-types.png)
<!--
Lossless vs. Lossy Kompression
Visualisierung der beiden Philosophien
-->
---
# Zwei Philosophien # Zwei Philosophien
![bg right:50%](./assets/compression-types.png)
**Lossless (Verlustfrei):** **Lossless (Verlustfrei):**
- Original exakt wiederherstellbar - Original exakt wiederherstellbar
- ZIP, PNG, FLAC - ZIP, PNG, FLAC
@@ -486,7 +349,6 @@ Trade-off: Größe vs. Qualität
--- ---
# Lossless: Run-Length Encoding # Lossless: Run-Length Encoding
## Lauflängenkodierung
**Original:** **Original:**
``` ```
@@ -501,8 +363,7 @@ AAAAABBBCCCCCCCC
**Ersparnis:** 16 → 6 Zeichen (62% Reduktion) **Ersparnis:** 16 → 6 Zeichen (62% Reduktion)
<!-- <!--
RLE = Run-Length Encoding = Lauflängenkodierung RLE = Simplest Compression Algorithm
Simplest Compression Algorithm
Gut für repetitive Daten (Fax, simple Grafiken) Gut für repetitive Daten (Fax, simple Grafiken)
Schlecht für chaotische Daten (Fotos, Audio) Schlecht für chaotische Daten (Fotos, Audio)
--> -->
@@ -531,21 +392,12 @@ Kompression = Modell der menschlichen Wahrnehmung
--- ---
![bg right:50%](./assets/karlheinz-brandenburg.jpg) ![bg](./assets/karlheinz-brandenburg.jpg)
# Karlheinz Brandenburg
**"Vater der MP3"**
- Diplom-Ingenieur, Universität Erlangen-Nürnberg
- Fraunhofer IIS (Institut für Integrierte Schaltungen)
- Forschung ab 1982, Patent 1988
- Hörte "Tom's Diner" über 10.000 Mal
<!-- <!--
Foto: Karlheinz Brandenburg
Fraunhofer IIS Erlangen Fraunhofer IIS Erlangen
Forschung dauerte über 10 Jahre "Vater der MP3"
Perfektionist: Jeder Hörtest musste bestehen
--> -->
--- ---
@@ -572,22 +424,12 @@ Patent lief 2017 aus
--- ---
![bg right:50%](./assets/suzanne-vega.jpg) ![bg](./assets/suzanne-vega.jpg)
# Suzanne Vega
**"Tom's Diner" (1987)**
- A cappella (keine Instrumente)
- Klare, hohe Frequenzen
- Perfekter Stresstest für Kompression
- Der erste Song, der als MP3 kodiert wurde
<!-- <!--
Suzanne Vega – "Tom's Diner" (1987) Suzanne Vega – "Tom's Diner" (1987)
A cappella = einfacher zu analysieren (nur Stimme) Der erste Song, der als MP3 kodiert wurde
Hohe Frequenzen = Herausforderung für Kompression Karlheinz Brandenburg hörte ihn tausende Male
Brandenburg hörte den Song über 10.000 Mal
--> -->
--- ---
@@ -627,29 +469,11 @@ Unwichtige Frequenzen reduzieren
Lossless-Kompression der Restdaten Lossless-Kompression der Restdaten
<!-- <!--
MP3-Kompression in 4 Schritten (vereinfacht): FFT = Fast Fourier Transform
Psychoakustik = Modell des menschlichen Gehörs
1. FFT (Fast Fourier Transform) Quantisierung = Wo passiert Datenverlust
- Wandelt Schallwellen in Frequenzen um Huffman = Finaler Effizienz-Boost (lossless)
- Wie ein Prisma Licht in Farben zerlegt MP3 ist KEIN einfaches "Kleiner machen" – es simuliert dein Gehirn
2. Psychoakustisches Modell
- Fragt: "Was kann ein Mensch NICHT hören?"
- Maskierungseffekte: Lauter Ton verdeckt leisen daneben
- Hohe/tiefe Frequenzen werden schlechter wahrgenommen
3. Quantisierung (hier passiert der Datenverlust!)
- Unwichtige Frequenzen werden "grob" gespeichert
- Wichtige Frequenzen bleiben genau
- Wie JPEG: Details entfernen, wo es nicht auffällt
4. Huffman-Coding (verlustfrei)
- Häufige Muster = kurze Codes
- Seltene Muster = lange Codes
- Finaler Effizienz-Boost
MP3 ist KEIN einfaches "Kleiner machen"
→ Es simuliert, wie dein Gehirn Musik verarbeitet!
--> -->
--- ---
@@ -675,11 +499,7 @@ Aber: Diminishing Returns ab 256 kbps
--- ---
<!-- _header: '' --> ![bg](./assets/audio-spectrogram.png)
<!-- _footer: '' -->
<!-- _backgroundColor: #000 -->
![bg fit](./assets/audio-spectrogram.png)
<!-- <!--
Spektrogramm-Vergleich Spektrogramm-Vergleich
@@ -711,22 +531,13 @@ Das Pferd war aus dem Stall
--- ---
![bg right:50% fit](./assets/napster-interface.png) ![bg](./assets/napster-interface.png)
# Napster (1999)
**P2P-Filesharing für MP3s**
- Shawn Fanning, 19 Jahre alt
- 80 Millionen User in 2 Jahren
- Musikindustrie verklagt (2001)
- Pandora's Box: Nicht mehr aufzuhalten
<!-- <!--
P2P = Peer-to-Peer Napster-Screenshot (1999)
Shawn Fanning gründete Napster als Student P2P-Filesharing für MP3s
RIAA verklagte Napster, Schließung 2001 Shawn Fanning, 19 Jahre alt
Aber: LimeWire, Kazaa, BitTorrent folgten 80 Millionen User in 2 Jahren
--> -->
--- ---
@@ -790,55 +601,34 @@ Vinyl-Revival: 2020er Gegenbewegung
1. Lade Lied runter (eigenes oder CC) 1. Lade Lied runter (eigenes oder CC)
2. Konvertiere in verschiedene Bitraten: 2. Konvertiere in verschiedene Bitraten:
- 320 kbps, 128 kbps, 64 kbps - 320 kbps, 128 kbps, 64 kbps
3. Tool: **Audacity** (kostenlos) 3. Tool: Audacity (kostenlos)
4. Höre Unterschiede (Kopfhörer!) 4. Höre Unterschiede (Kopfhörer!)
5. Vergleiche Dateigrößen 5. Vergleiche Dateigrößen
**Spektrogramm:** Track-Menü → Spektrogramm **Optional:** Spektrogramm-Ansicht
<!-- <!--
Audacity: FOSS Audio-Editor (audacityteam.org) Audacity: FOSS Audio-Editor
Export: Datei → Exportieren → MP3 → Bitrate wählen Export: Datei → Exportieren → MP3 → Bitrate wählen
Spektrogramm-Ansicht: Track-Name klicken → "Spektrogramm" Spektrogramm: Analysieren → Spektrogramm
Hohe Frequenzen (oben im Bild) verschwinden bei niedriger Bitrate Hohe Frequenzen verschwinden bei niedriger Bitrate
Alternative: Spek (spek.cc) – reiner Spektrogramm-Viewer
--> -->
--- ---
# Fleißaufgabe bis nächste Woche # Aufgabe bis nächste Woche
**Nimm ein Lied (eigenes oder CC)** **Nimm ein Lied (eigenes oder CC)**
1. Exportiere: WAV, MP3 320 kbps, MP3 128 kbps 1. Exportiere: WAV, MP3 320 kbps, MP3 128 kbps
2. Höre die Unterschiede (Kopfhörer!) 2. Notiere: Dateigrößen, Höreindrücke
3. Vergleiche die Dateigrößen 3. Poste im Forum: Screenshot + Reflexion
**Bonus:** Niedrigste Bitrate finden, bei der du keinen Unterschied hörst **Bonus:** Niedrigste Bitrate finden, bei der du keinen Unterschied hörst
<!-- <!--
Selbstständiges Experimentieren WAV = Unkomprimiert (Referenz)
Keine Abgabe, nur zum Ausprobieren
Goldenes Ohr: Manche hören Unterschied, manche nicht Goldenes Ohr: Manche hören Unterschied, manche nicht
Psychoakustik in Aktion: Subjektive Wahrnehmung
--> -->
---
<!-- _class: lead -->
# Fragen & Diskussion
**Kontakt:** mail@librete.ch
**Folien:** Online verfügbar unter https://hdm.librete.ch
---
# Lizenz & Attribution
Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
- Erlaubt Teilen & Anpassen mit Namensnennung
- Adaptionen müssen unter gleicher Lizenz geteilt werden
Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
@@ -1,38 +1,3 @@
---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
---
<style>
section {
font-size: 1.7rem;
}
h2 {
color: var(--color-dimmed);
}
</style>
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #000 -->
![bg fit opacity:0.4](./assets/digital-landscape.png)
# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
**223015c** · Modul "Technik 1" · 1. Semester
Digital- und Medienwirtschaft
Hochschule der Medien Stuttgart
**Wintersemester 2025/26**
[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
--- ---
<!-- _class: lead --> <!-- _class: lead -->
@@ -42,9 +7,6 @@ Hochschule der Medien Stuttgart
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/photo-comparison.png) ![bg](./assets/photo-comparison.png)
<!-- <!--
@@ -118,9 +80,6 @@ Dateierweiterungen: .jpg, .jpeg, .jfif (alle gleich)
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/jpeg-artifacts.png) ![bg](./assets/jpeg-artifacts.png)
<!-- <!--
@@ -194,9 +153,6 @@ Photoshop "Save for Web": Standard ist 60
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/gif-animation.png) ![bg](./assets/gif-animation.png)
<!-- <!--
@@ -280,9 +236,6 @@ JPEG bleibt dominant (Kompatibilität!)
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/instagram-quality-loss.png) ![bg](./assets/instagram-quality-loss.png)
<!-- <!--
@@ -365,9 +318,6 @@ Forum: Austausch über Ergebnisse
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/netflix-4k.png) ![bg](./assets/netflix-4k.png)
<!-- <!--
@@ -420,9 +370,6 @@ Ein MP4 kann H.264, H.265 oder AV1 enthalten
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/container-codec-diagram.png) ![bg](./assets/container-codec-diagram.png)
<!-- <!--
@@ -483,9 +430,6 @@ Wenn du vorspulst: Sucht nach nächstem I-Frame
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/iframe-pframe-diagram.png) ![bg](./assets/iframe-pframe-diagram.png)
<!-- <!--
@@ -568,9 +512,6 @@ Fragmentierung verzögert Adoption
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/youtube-vp9.png) ![bg](./assets/youtube-vp9.png)
<!-- <!--
@@ -604,9 +545,6 @@ Hardware-Decoder erst ab ~2016 (langsame Adoption)
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/av1-logo.png) ![bg](./assets/av1-logo.png)
<!-- <!--
@@ -668,9 +606,6 @@ Player misst Bandbreite, wechselt live
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/streaming-quality-switch.png) ![bg](./assets/streaming-quality-switch.png)
<!-- <!--
@@ -749,23 +684,3 @@ Encoding-Zeit: H.265 ~5x langsamer, AV1 ~50x langsamer
Qualität: Bei gleicher Bitrate H.265 > H.264 Qualität: Bei gleicher Bitrate H.265 > H.264
--> -->
---
<!-- _class: lead -->
# Fragen & Diskussion
**Kontakt:** czechowski@hdm-stuttgart.de
**Folien:** Online verfügbar unter https://hdm.librete.ch
---
# Lizenz & Attribution
Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
- Erlaubt Teilen & Anpassen mit Namensnennung
- Adaptionen müssen unter gleicher Lizenz geteilt werden
Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
@@ -1,38 +1,3 @@
---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
---
<style>
section {
font-size: 1.7rem;
}
h2 {
color: var(--color-dimmed);
}
</style>
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #000 -->
![bg fit opacity:0.4](./assets/digital-landscape.png)
# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
**223015b** · Modul "Technik 1" · 1. Semester
Digital- und Medienwirtschaft
Hochschule der Medien Stuttgart
**Wintersemester 2025/26**
[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
--- ---
<!-- _class: lead --> <!-- _class: lead -->
@@ -42,9 +7,6 @@ Hochschule der Medien Stuttgart
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/hdd-ssd-comparison.png) ![bg](./assets/hdd-ssd-comparison.png)
<!-- <!--
@@ -96,9 +58,6 @@ Windows: NTFS, macOS: APFS, Linux: ext4
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/directory-tree.png) ![bg](./assets/directory-tree.png)
<!-- <!--
@@ -262,9 +221,6 @@ Sicherheit: APFS/NTFS für Verschlüsselung
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/backup-disaster.png) ![bg](./assets/backup-disaster.png)
<!-- <!--
@@ -357,9 +313,6 @@ Syncthing: P2P-Sync, kein zentraler Server
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/bit-rot.png) ![bg](./assets/bit-rot.png)
<!-- <!--
@@ -390,9 +343,6 @@ Offene Standards: PDF/A, TIFF, TXT überleben
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/lto-tape.png) ![bg](./assets/lto-tape.png)
<!-- <!--
@@ -424,9 +374,6 @@ Cold Storage: Daten, die selten gebraucht werden
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/m-disc.png) ![bg](./assets/m-disc.png)
<!-- <!--
@@ -454,9 +401,6 @@ Nachteil: Teurer (~5€ vs. 0,50€ normale Blu-ray)
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/dna-helix.png) ![bg](./assets/dna-helix.png)
<!-- <!--
@@ -537,9 +481,6 @@ Bonus: Wer's macht, hat echten Nutzen
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/cable-mess.png) ![bg](./assets/cable-mess.png)
<!-- <!--
@@ -569,9 +510,6 @@ Ohne Standards: Jedes Gerät braucht eigenes Kabel
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/pc-back-1990s.png) ![bg](./assets/pc-back-1990s.png)
<!-- <!--
@@ -627,9 +565,6 @@ USB 4 basiert auf Thunderbolt 3 (Intel spendete Spec)
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/usb-c-cables.png) ![bg](./assets/usb-c-cables.png)
<!-- <!--
@@ -716,9 +651,6 @@ EU-Regulierung: Beschriftung gefordert (aber nicht umgesetzt)
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/thunderbolt-logo.png) ![bg](./assets/thunderbolt-logo.png)
<!-- <!--
@@ -752,9 +684,6 @@ Zertifizierung: Blitz-Logo = echt Thunderbolt
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/hdmi-cable.png) ![bg](./assets/hdmi-cable.png)
<!-- <!--
@@ -793,9 +722,6 @@ Lizenzgebühren: ~$10.000 Jahresgebühr + $0,15/Gerät
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/displayport-cable.png) ![bg](./assets/displayport-cable.png)
<!-- <!--
@@ -852,9 +778,6 @@ Politik & Marketing entscheiden
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/hdcp-warning.png) ![bg](./assets/hdcp-warning.png)
<!-- <!--
@@ -891,9 +814,6 @@ Classic DRM-Problem: Nervt Zahlende, nicht Piraten
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/ethernet-cable.png) ![bg](./assets/ethernet-cable.png)
<!-- <!--
@@ -929,9 +849,6 @@ PoE = Power over Ethernet (Strom + Daten)
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/vintage-ports.png) ![bg](./assets/vintage-ports.png)
<!-- <!--
@@ -999,23 +916,3 @@ Viele Lade-Kabel: USB-C, aber nur USB 2.0 (langsam!)
Forum: Erfahrungsaustausch, lustige Fundstücke Forum: Erfahrungsaustausch, lustige Fundstücke
--> -->
---
<!-- _class: lead -->
# Fragen & Diskussion
**Kontakt:** czechowski@hdm-stuttgart.de
**Folien:** Online verfügbar unter https://hdm.librete.ch
---
# Lizenz & Attribution
Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
- Erlaubt Teilen & Anpassen mit Namensnennung
- Adaptionen müssen unter gleicher Lizenz geteilt werden
Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
@@ -1,38 +1,3 @@
---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
---
<style>
section {
font-size: 1.7rem;
}
h2 {
color: var(--color-dimmed);
}
</style>
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #000 -->
![bg fit opacity:0.4](./assets/digital-landscape.png)
# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
**223015b** · Modul "Technik 1" · 1. Semester
Digital- und Medienwirtschaft
Hochschule der Medien Stuttgart
**Wintersemester 2025/26**
[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
--- ---
<!-- _class: lead --> <!-- _class: lead -->
@@ -1851,23 +1816,3 @@ Kritische Perspektive (Patent-Kriege, Vendor Lock-in)
Evaluation: Feedback ernst nehmen, Kurs verbessern Evaluation: Feedback ernst nehmen, Kurs verbessern
--> -->
---
<!-- _class: lead -->
# Fragen & Diskussion
**Kontakt:** czechowski@hdm-stuttgart.de
**Folien:** Online verfügbar unter https://hdm.librete.ch
---
# Lizenz & Attribution
Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
- Erlaubt Teilen & Anpassen mit Namensnennung
- Adaptionen müssen unter gleicher Lizenz geteilt werden
Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
@@ -1,26 +1,3 @@
---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
---
<style>
section {
font-size: 1.7rem;
}
h2 {
color: var(--color-dimmed);
}
</style>
<!-- _class: invert -->
![bg fit](./assets/digital-landscape.png)
--- ---
<!-- _class: lead --> <!-- _class: lead -->
@@ -45,23 +22,3 @@ Flexibler Termin für Nachholbedarf
Themen nach Interesse der Studierenden Themen nach Interesse der Studierenden
--> -->
---
<!-- _class: lead -->
# Fragen & Diskussion
**Kontakt:** czechowski@hdm-stuttgart.de
**Folien:** Online verfügbar unter https://hdm.librete.ch
---
# Lizenz & Attribution
Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
- Erlaubt Teilen & Anpassen mit Namensnennung
- Adaptionen müssen unter gleicher Lizenz geteilt werden
Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
+19
View File
@@ -0,0 +1,19 @@
---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
---
<style>
section {
font-size: 1.7rem;
}
h2 {
color: var(--color-dimmed);
}
</style>
+83
View File
@@ -0,0 +1,83 @@
![bg fit](./assets/digital-landscape.png)
<!-- Startbild: Futuristisches Netzwerk, Datenströme, oder digitale Landschaft -->
---
# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
Modul "Technik 1" – 1. Semester
Digital- und Medienwirtschaft
Hochschule der Medien Stuttgart
**Wintersemester 2025/26**
---
# Über mich
**Michael Czechowski**
- Softwareentwickler & IT-Berater
- Schwerpunkte: Cloud, AI, Web-Technologien, Systemarchitektur, Open Source
- Hintergrund: Philosophie & Informatik
- Kontakt: czechowski@hdm-stuttgart.de
<!--
Kurze Vorstellung
Praxisbezug betonen
Fragen jederzeit willkommen
-->
---
# Termine
| Datum | Zeit | Thema |
|-------|------|-------|
| 19.12.2025 | 14:15 – 17:30 | Grundlagen, Text & Audio |
| 09.01.2026 | 14:15 – 17:30 | Bild- & Videoformate |
| 23.01.2026 | 14:15 – 17:30 | Speichermedien & Schnittstellen |
| 30.01.2026 | 14:15 – 17:30 | Distribution, APIs & Zukunft |
| TBA | 14:15 – 17:30 | Vertiefung (wird bekannt gegeben) |
**Ort:** HdM Stuttgart, Nobelstraße 10
---
# Kurze Umfrage
**Bitte Hand heben:**
1. Wer hat schon mal ein Video komprimiert/konvertiert?
2. Wer hat schon mal eine Datei mit einem Hex-Editor geöffnet?
3. Wer weiß, was der Unterschied zwischen JPEG und PNG ist?
4. Wer hat schon mal mit APIs gearbeitet?
5. Wer weiß, was UTF-8 bedeutet?
<!--
Niveau der Gruppe einschätzen
Keine falschen Antworten
Zeigt, wo wir starten
-->
---
# Kursübersicht
**Ziel:** Verstehen, wie digitale Medien technisch funktionieren – von Bits bis zu globalen Distributionsnetzwerken
**5 Termine:**
- **19.12.** Bits, Bytes, Zeichenkodierung & Audio-Kompression
- **09.01.** Bild- & Video-Kompression
- **23.01.** Speichermedien & Hardware-Schnittstellen
- **30.01.** Distribution, APIs, Metadaten & Zukunft
- **TBA** Vertiefung & offene Fragen
<!--
Medienwissenschaftler:innen, nicht Informatiker:innen
Fokus: Warum funktionieren Dinge so? Welche Konflikte stecken dahinter?
Hands-On jede Woche (30-40 Min)
Narrative statt Faktenlisten
-->
+27
View File
@@ -0,0 +1,27 @@
---
<!-- _class: lead -->
# Fragen & Diskussion
**Kontakt:** czechowski@hdm-stuttgart.de
**Folien:** Online verfügbar unter https://hdm.librete.ch
---
# Lizenz & Attribution
Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
- Erlaubt Teilen & Anpassen mit Namensnennung
- Adaptionen müssen unter gleicher Lizenz geteilt werden
Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
<!--
Open Educational Resources (OER)
Studierende können Folien nutzen, remixen, teilen
CC BY-SA: Wikipedia-Lizenz (Share-Alike)
Attribution: "Michaล‚ Czechowski, HdM Stuttgart"
-->
Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.7 MiB

After

Width:  |  Height:  |  Size: 7.3 MiB

-1
View File
@@ -1 +0,0 @@
Dies ist eine einfache Textdatei. Keine Magic Number hier! Plaintext hat keinen Standard-Header.
Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 197 KiB