From 9e12447528bcc9106ad45f4373028d8666662d62 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Sun, 1 Feb 2026 18:17:51 +0100 Subject: [PATCH] rebuild dev and build system with single marp server - simplify development: single marp server on port 3000 instead of 3 processes - rename klausur to klausurfolien for better naming - update extract script to use 00-intro.md as template when no 01-*.md exists - update makefile and package.json for new workflow - add comprehensive AGENTS.md guidelines --- AGENTS.md | 197 ++ Makefile | 31 +- README.md | 14 +- package.json | 5 +- scripts/dev-server.sh | 95 +- scripts/extract-klausur.sh | 12 +- scripts/generate-index.sh | 12 +- slides/223015b/01-grundlagen-text-audio.md | 1655 ----------------- slides/223015b/klausur.md | 563 ------ slides/223015b/klausurfolien.md | 458 +++++ .../223015c/{klausur.md => klausurfolien.md} | 0 11 files changed, 705 insertions(+), 2337 deletions(-) create mode 100644 AGENTS.md delete mode 100644 slides/223015b/01-grundlagen-text-audio.md delete mode 100644 slides/223015b/klausur.md create mode 100644 slides/223015b/klausurfolien.md rename slides/223015c/{klausur.md => klausurfolien.md} (100%) diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..529d5a2 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,197 @@ +# AGENTS.md - Agent Guidelines for HdM Slides + +This file contains comprehensive guidelines for agentic coding agents working on the HdM Slides project. + +## Project Overview + +This project builds presentation decks for Marp, supporting multiple courses: +- **223015b** - Dateiformate, Schnittstellen, Speichermedien (6 Kapitel) +- **223015c** - Internettechnologien (3 Kapitel) + +## Development Workflow + +### Build Commands +```bash +# Development +make dev # Start single dev server on port 3000 +npm run dev # Alternative command for development server + +# Build +make build # Build all courses (HTML + PDF) +make build-b # Build 223015b only +make build-c # Build 223015c only +make html # HTML only builds +make pdf # PDF only builds + +# Klausur Folien +make klausur # Extract klausurfolien for all courses +make klausur-b # Extract klausurfolien for 223015b +make klausur-c # Extract klausurfolien for 223015c + +# Deployment +make deploy # Deploy all courses (requires explicit permission) +make deploy-b # Deploy 223015b only +make deploy-c # Deploy 223015c only + +# Utilities +make qr URL=... # Generate QR code +make optimize-images COURSE=223015b # Resize images +make clean # Remove generated files +``` + +### Testing +No specific test framework is used. To validate changes: +1. Start dev server: `make dev` +2. Open http://localhost:3000/223015b/ or /223015c/ +3. Verify slides render correctly +4. Run `make build` to ensure no build errors +5. Check generated files in `build/` directory + +## Code Style Guidelines + +### File Structure +- Slides in `slides//` following naming pattern `NN-topic.md` +- Assets in `slides//assets/` +- Always reference images as `./assets/filename.png` +- Scripts in `scripts/` +- Themes in `themes/` +- Generated output in `build/` (gitignored) + +### Naming Conventions +- Slide files: `NN-topic.md` (e.g., `01-grundlagen.md`, `02-bilder.md`) +- Images: `snake_case.jpg` or `kebab-case.jpg` +- Klausur files: `klausurfolien.md` (auto-generated) +- Function names in scripts: `snake_case` +- Variable names in scripts: `snake_case` + +### Markdown Style +- Use ATX-style headers (`# ## ###`) +- YAML frontmatter for slide metadata at top of each file +- Never include a final `---` (creates empty slide) +- Use `` for exam-relevant slides +- Use relative paths for assets: `./assets/image.png` + +### Script Style +- Use `#!/usr/bin/env bash` shebang +- Use `set -e` for error handling +- Use `2>/dev/null || true` for optional operations +- Define variables in UPPER_CASE at script top +- Use colors for terminal output: `\033[0;32m` etc. + +### Git Workflow +- Commit messages: ALWAYS lowercase +- NEVER add co-authoring lines or generated footers +- Follow semantic naming: "add-...", "fix-...", "update-..." +- Commit changes to scripts, Makefile, documentation separately from slide content + +## Agent Restrictions + +### Security +- NEVER run commands outside `/home/mwc/Coding/hdm` folder +- NEVER run build/deploy commands without explicit user request +- NEVER run deploy commands (make deploy, scp, etc.) without explicit permission + +### File Protection +Slide files in `slides/*/*.md` are main content files: +- **ALLOWED**: Adding slides, adjusting content, fixing typos, enhancing sections +- **FORBIDDEN** (without permission): Deleting slides, removing sections, bulk deletions +- Before ANY deletion: ALWAYS ask user for confirmation + +### Klausur Handling +- Klausur files (`klausurfolien.md`) are auto-generated +- NEVER edit klausurfolien.md files directly +- To update klausurfolien: edit source slides with `` markers +- Run `make klausur` to regenerate + +## Development Patterns + +### Adding New Slides +1. Create new file following `NN-topic.md` pattern +2. Copy frontmatter from existing slides in the same course +3. Update Makefile `_KAPITEL` variable if needed +4. Test with `make dev` + +### Modifying Existing Slides +1. Edit the appropriate markdown file in `slides//` +2. Maintain consistent styling with course theme +3. Preserve image paths as `./assets/...` +4. Test changes with dev server + +### Working with Assets +1. Place images in `slides//assets/` +2. Use descriptive names: `diagram-network.jpg`, `example-code.png` +3. Optimize with `make optimize-images COURSE=223015b` +4. Reference as `./assets/filename.ext` + +### Course-Specific Configuration +Each course has specific settings in Makefile: +- Course name and title +- Kapitel list (slide files) +- Deploy path +- Theme colors (in generate-index.sh) + +## Common Tasks + +### Debugging Build Issues +1. Check Makefile syntax: `make -n build` +2. Verify Marp CLI installation: `npx @marp-team/marp-cli --version` +3. Check file permissions: `ls -la slides/` +4. Validate markdown syntax with dev server + +### Updating Course Structure +1. Update `_KAPITEL` variables in Makefile +2. Ensure slide files follow naming convention +3. Update course-specific themes if needed +4. Test both dev and build processes + +### Working with Themes +- Custom theme in `themes/custom-theme.css` +- Course themes defined in individual slide frontmatter +- Use consistent color schemes per course +- Test theme changes across all slides + +## Deployment Process + +Deployment to production server requires explicit permission: +1. Build process: `make build` (HTML + PDF) +2. Index generation: automatically handled +3. Deploy to remote server via SCP +4. Root index deployment + +**IMPORTANT**: Never run deployment commands without explicit user permission. + +## Tools and Dependencies + +### Core Dependencies +- Marp CLI for slide rendering +- Bash scripts for automation +- Make for build orchestration +- Git for version control + +### Optional Tools +- qrencode for QR generation (via nix) +- ImageMagick for image optimization +- Python 3 for simple HTTP server (legacy) + +## Testing Strategy + +Since there's no formal test suite: +1. Manual testing with dev server +2. Build process validation +3. Slide rendering checks +4. Asset path verification +5. Cross-browser compatibility checks (important) + +## Troubleshooting + +### Common Issues +- **Port conflicts**: Use `make dev-kill` to clean up processes +- **Build failures**: Check file permissions and Marp CLI installation +- **Asset loading**: Verify relative paths and file existence +- **Deploy issues**: Check SSH keys and remote permissions + +### Getting Help +1. Check this AGENTS.md file first +2. Review Makefile targets and scripts +3. Test changes incrementally +4. Maintain backup of working configurations \ No newline at end of file diff --git a/Makefile b/Makefile index a160b64..736aac0 100644 --- a/Makefile +++ b/Makefile @@ -7,19 +7,13 @@ COURSES = 223015b 223015c SLIDES_DIR = slides -# Port configuration (index starts at BASE_PORT, courses increment from there) -BASE_PORT = 1310 -INDEX_PORT = $(BASE_PORT) - # Course-specific settings 223015b_NAME = Dateiformate, Schnittstellen, Speichermedien -223015b_PORT = 1311 -223015b_KAPITEL = 00-intro 01-grundlagen-text-audio 02-bild-audio-video 03-speichermedien-schnittstellen 04-distribution-apis-zukunft 05-vertiefung-offene-fragen klausur +223015b_KAPITEL = 00-intro 01-grundlagen-text-audio 02-bild-audio-video 03-speichermedien-schnittstellen 04-distribution-apis-zukunft 05-vertiefung-offene-fragen klausurfolien 223015b_DEPLOY_PATH = /home/tengo/html/hdm/223015b 223015c_NAME = Internettechnologien -223015c_PORT = 1312 -223015c_KAPITEL = 01-geschichte-grundlagen-html 02-netzwerke-protokolle-css 03-interaktivitaet-javascript klausur +223015c_KAPITEL = 01-geschichte-grundlagen-html 02-netzwerke-protokolle-css 03-interaktivitaet-javascript klausurfolien 223015c_DEPLOY_PATH = /home/tengo/html/hdm/223015c DEPLOY_HOST = tengo@tuttle.uberspace.de @@ -33,9 +27,7 @@ help: @echo " 223015c - Internettechnologien" @echo "" @echo "Development:" - @echo " make dev - Both servers + index (ports 1311, 1312, 1313)" - @echo " make dev-b - Dev server for 223015b (port 1312)" - @echo " make dev-c - Dev server for 223015c (port 1313)" + @echo " make dev - Start development server (port 3000)" @echo "" @echo "Build:" @echo " make build - Build all courses" @@ -43,7 +35,7 @@ help: @echo " make build-c - Build 223015c only" @echo " make pdf - Export all to PDF" @echo " make html - Export all to HTML" - @echo " make klausur - Extract klausur slides" + @echo " make klausur - Extract klausurfolien slides" @echo "" @echo "Tools:" @echo " make qr URL=... - Generate QR code for URL" @@ -63,25 +55,14 @@ build/.exists: @mkdir -p build/223015b build/223015c @touch $@ -# Development servers +# Development server dev: @./scripts/dev-server.sh dev-kill: - @-pkill -f "python3 -m http.server" 2>/dev/null || true @-pkill -f "marp-cli.*--server" 2>/dev/null || true @sleep 0.5 -dev-b: - @echo "Starting 223015b dev server on port $(223015b_PORT)..." - @echo "Open: http://localhost:$(223015b_PORT)" - PORT=$(223015b_PORT) npx @marp-team/marp-cli --server $(SLIDES_DIR)/223015b/ - -dev-c: - @echo "Starting 223015c dev server on port $(223015c_PORT)..." - @echo "Open: http://localhost:$(223015c_PORT)" - PORT=$(223015c_PORT) npx @marp-team/marp-cli --server $(SLIDES_DIR)/223015c/ - # Build functions define build_course @echo "Building $(1)..." @@ -158,7 +139,7 @@ klausur-c: @./scripts/extract-klausur.sh 223015c klausur: klausur-b klausur-c - @echo "Klausur slides extracted for all courses!" + @echo "Klausurfolien slides extracted for all courses!" # QR Code generation (uses nix-shell) qr: diff --git a/README.md b/README.md index 21f410c..d2045c6 100644 --- a/README.md +++ b/README.md @@ -27,10 +27,12 @@ build/ # Generated output (gitignored) ## Development ```bash -# Start dev servers (hot reload) -make dev # All courses + index -make dev-b # 223015b only (port 1311) -make dev-c # 223015c only (port 1312) +# Start development server (hot reload) +make dev # Single server for all courses (port 3000) + +# Access individual courses: +# 223015b: http://localhost:3000/223015b/ +# 223015c: http://localhost:3000/223015c/ ``` ## Build @@ -43,7 +45,7 @@ make html # HTML only make pdf # PDF only ``` -## Klausur Slides +## Klausur Folien Extract exam-relevant slides (marked with ``) into a single file: @@ -53,7 +55,7 @@ make klausur-b # 223015b only make klausur-c # 223015c only ``` -Output: `slides//klausur.md` +Output: `slides//klausurfolien.md` The generated file includes: - A title slide per kapitel for orientation diff --git a/package.json b/package.json index 8059b25..eedb82e 100644 --- a/package.json +++ b/package.json @@ -3,13 +3,14 @@ "version": "1.0.0", "description": "HdM Stuttgart - Lecture Slides (Marp)", "scripts": { - "dev:b": "PORT=1312 marp --server --allow-local-files courses/223015b/slides/", - "dev:c": "PORT=1313 marp --server --allow-local-files courses/223015c/slides/", + "dev": "PORT=3000 marp --server --allow-local-files slides/", "build": "make build", "build:b": "make build-b", "build:c": "make build-c", "pdf": "make pdf", "html": "make html", + "klausur": "make klausur", + "deploy": "make deploy", "test": "echo \"No tests specified\" && exit 0" }, "keywords": ["marp", "slides", "hdm", "lectures"], diff --git a/scripts/dev-server.sh b/scripts/dev-server.sh index 0660023..8e27e0c 100755 --- a/scripts/dev-server.sh +++ b/scripts/dev-server.sh @@ -1,106 +1,53 @@ #!/usr/bin/env bash -# Development server script for HdM slides -# Starts index server + marp servers for each course +# Simplified development server for HdM slides +# Starts single Marp server for all courses set -e # Configuration -INDEX_PORT=1310 -COURSE_B_PORT=1311 -COURSE_C_PORT=1312 SLIDES_DIR="slides" -DEV_INDEX_DIR=".dev-index" +DEV_PORT=3000 # Colors -RED='\033[0;31m' GREEN='\033[0;32m' BLUE='\033[0;34m' +RED='\033[0;31m' NC='\033[0m' # No Color # Cleanup function cleanup() { - echo -e "\n${RED}Shutting down servers...${NC}" - kill $PID_INDEX $PID_B $PID_C 2>/dev/null || true + echo -e "\n${RED}Shutting down dev server...${NC}" + pkill -f "marp-cli.*--server" 2>/dev/null || true exit 0 } -# Kill existing processes on our ports +# Kill existing processes on our port kill_existing() { echo -e "${BLUE}Cleaning up existing processes...${NC}" - # Kill marp processes first pkill -9 -f "marp-cli" 2>/dev/null || true - pkill -f "python3 -m http.server" 2>/dev/null || true - # Kill ports including marp's WebSocket ports (37717-37720 range) - fuser -k $INDEX_PORT/tcp $COURSE_B_PORT/tcp $COURSE_C_PORT/tcp 2>/dev/null || true - fuser -k 37717/tcp 37718/tcp 37719/tcp 37720/tcp 2>/dev/null || true - sleep 2 -} - -# Generate dev index -generate_index() { - mkdir -p "$DEV_INDEX_DIR" - cat > "$DEV_INDEX_DIR/index.html" << 'EOF' - - - - - - HdM Slides - Dev - - - -

HdM Slides

-

Development Server

-
-EOF - echo " 223015b
Dateiformate, Schnittstellen, Speichermedien & Distributionswege
Port $COURSE_B_PORT" >> "$DEV_INDEX_DIR/index.html" - echo " 223015c
Grundlagen IT- und Internettechnik
Port $COURSE_C_PORT" >> "$DEV_INDEX_DIR/index.html" - cat >> "$DEV_INDEX_DIR/index.html" << 'EOF' -
- - -EOF + fuser -k $DEV_PORT/tcp 2>/dev/null || true + sleep 1 } # Main trap cleanup SIGINT SIGTERM kill_existing -generate_index -echo -e "${GREEN}Starting development servers...${NC}" +echo -e "${GREEN}Starting development server...${NC}" echo "" -echo -e " Index: ${BLUE}http://localhost:$INDEX_PORT${NC}" -echo -e " 223015b: ${BLUE}http://localhost:$COURSE_B_PORT${NC}" -echo -e " 223015c: ${BLUE}http://localhost:$COURSE_C_PORT${NC}" +echo -e " Server: ${BLUE}http://localhost:$DEV_PORT${NC}" +echo -e " Slides: ${BLUE}$SLIDES_DIR/${NC}" echo "" -echo -e "Press ${RED}Ctrl+C${NC} to stop all servers" +echo -e "Available courses:" +echo -e " 223015b: ${BLUE}http://localhost:$DEV_PORT/223015b/${NC}" +echo -e " 223015c: ${BLUE}http://localhost:$DEV_PORT/223015c/${NC}" +echo "" +echo -e "Press ${RED}Ctrl+C${NC} to stop the server" echo "" -# Start servers -python3 -m http.server $INDEX_PORT --directory "$DEV_INDEX_DIR" & -PID_INDEX=$! +# Start single Marp server for all slides +PORT=$DEV_PORT npx @marp-team/marp-cli --server "$SLIDES_DIR/" -PORT=$COURSE_B_PORT npx @marp-team/marp-cli --server "$SLIDES_DIR/223015b/" & -PID_B=$! - -sleep 3 # Stagger starts to avoid WebSocket port collision - -PORT=$COURSE_C_PORT npx @marp-team/marp-cli --server "$SLIDES_DIR/223015c/" & -PID_C=$! - -# Wait for any process to exit -wait +# Wait for process to exit +wait \ No newline at end of file diff --git a/scripts/extract-klausur.sh b/scripts/extract-klausur.sh index c9c2a5d..fbe4435 100755 --- a/scripts/extract-klausur.sh +++ b/scripts/extract-klausur.sh @@ -1,19 +1,19 @@ #!/usr/bin/env bash # Extract klausur-relevant slides from all kapitel # Usage: ./extract-klausur.sh -# Output: slides//klausur.md +# Output: slides//klausurfolien.md set -e COURSE="${1:-223015b}" SLIDES_DIR="slides/$COURSE" -OUTPUT_FILE="$SLIDES_DIR/klausur.md" +OUTPUT_FILE="$SLIDES_DIR/klausurfolien.md" -# Find the first kapitel file (01-*.md) to copy styles from -FIRST_KAPITEL=$(ls "$SLIDES_DIR"/01-*.md 2>/dev/null | head -1) +# Find the first kapitel file (00-intro.md or 01-*.md) to copy styles from +FIRST_KAPITEL=$(ls "$SLIDES_DIR"/00-intro.md "$SLIDES_DIR"/01-*.md 2>/dev/null | head -1) if [[ -z "$FIRST_KAPITEL" ]]; then - echo "Error: No 01-*.md file found in $SLIDES_DIR" + echo "Error: No 00-intro.md or 01-*.md file found in $SLIDES_DIR" exit 1 fi @@ -57,7 +57,7 @@ awk ' ' "$FIRST_KAPITEL" >> "$OUTPUT_FILE" # Process each kapitel file in order - extract klausur slides only -for md_file in $(ls "$SLIDES_DIR"/[0-9][0-9]-*.md 2>/dev/null | grep -v klausur | sort); do +for md_file in $(ls "$SLIDES_DIR"/[0-9][0-9]-*.md 2>/dev/null | grep -v klausurfolien | sort); do filename=$(basename "$md_file") kapitel_num=$(echo "$filename" | grep -oE '^[0-9]+' | sed 's/^0*//') diff --git a/scripts/generate-index.sh b/scripts/generate-index.sh index b8a1603..354455a 100755 --- a/scripts/generate-index.sh +++ b/scripts/generate-index.sh @@ -246,19 +246,19 @@ for html in $(ls "$BUILD_DIR"/[0-9][0-9]-*.html 2>/dev/null | sort); do LINK done -# Add klausur entry if it exists -if [[ -f "$BUILD_DIR/klausur.html" ]]; then +# Add klausurfolien entry if it exists +if [[ -f "$BUILD_DIR/klausurfolien.html" ]]; then pdf_link="" - if [[ -f "$BUILD_DIR/klausur.pdf" ]]; then - pdf_link="PDF" + if [[ -f "$BUILD_DIR/klausurfolien.pdf" ]]; then + pdf_link="PDF" fi cat >> "$BUILD_DIR/index.html" << KLAUSUR
- +
Prüfung
Klausurrelevante Folien
 - Folien + Folien $pdf_link
KLAUSUR diff --git a/slides/223015b/01-grundlagen-text-audio.md b/slides/223015b/01-grundlagen-text-audio.md deleted file mode 100644 index 0756283..0000000 --- a/slides/223015b/01-grundlagen-text-audio.md +++ /dev/null @@ -1,1655 +0,0 @@ ---- -marp: true -theme: gaia -paginate: true -backgroundColor: #fff -header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)" -footer: "Michael Czechowski – HdM Stuttgart" -title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege ---- - - - - - - - -![bg cover opacity:0.2](./assets/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg) - -# Dateiformate, Schnittstellen, Speichermedien & Distributionswege - -**223015b** · Modul "Technik 1" · 1. Semester -Digital- und Medienwirtschaft -Hochschule der Medien Stuttgart - -[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/) - ---- - -![bg fit](./assets/qrcode-1.svg) - ---- - - - -# Teil 1: Einführung -## Grundlagen, Text & Audio - ---- - - - -# Das Problem der Datengröße - ---- - -# Ein konkretes Beispiel - -**Eine Minute Musik in CD-Qualität:** - -44.100 Messungen/Sekunde -× 16 Bit pro Messung -× 2 Kanäle (Stereo) -× 60 Sekunden - -= **10,6 MB pro Minute** - - - ---- - -# Das Problem skaliert - -| Inhalt | Unkomprimiert | -|--------|-------------:| -| 1 Song (4 Min) | ~42 MB | -| 1 Album (60 Min) | ~635 MB | -| 10.000 Songs | ~420 GB | - -**Kontext 1990er:** -- Festplatte: 100-500 MB -- Modem: 56 kbit/s → 1 Song dauert Stunden - - - ---- - -# Video eskaliert - -**Eine Minute 4K-Video (unkomprimiert):** - -3840 × 2160 Pixel -× 3 Byte pro Pixel (RGB) -× 30 Bilder pro Sekunde -× 60 Sekunden - -= **~45 GB pro Minute** - -Ein 2-Stunden-Film: über **5 Terabyte** - - - ---- - -# Kompressionsraten in der Praxis - -| Medium | Unkomprimiert | Komprimiert | Faktor | -|--------|-------------:|------------:|-------:| -| 1 Song (4 Min) | ~42 MB | ~4 MB (MP3 320) | ~10× | -| 1 Foto (12 MP) | ~36 MB | ~3 MB (JPEG) | ~12× | -| 1 Min 4K-Video | ~45 GB | ~375 MB (H.264) | ~120× | - - - ---- - - - -# Zwei Philosophien der Kompression - - - ---- - -# Verlustfreie Kompression (Lossless) - -**Prinzip:** Redundanz entfernen - -**Beispiel Lauflängenkodierung:** -``` -Original: AAAAABBBCCCCCCCC (16 Zeichen) -Komprimiert: 5A3B8C (6 Zeichen) -``` - -→ 62% kleiner, 100% wiederherstellbar - -**Anwendung:** ZIP, PNG, FLAC, Programmcode - - - ---- - -# Verlustbehaftete Kompression (Lossy) - -**Prinzip:** Irrelevanz entfernen - -**Die Frage:** Was nimmt ein Mensch nicht wahr? - -- Das Ohr hört nicht alle Frequenzen gleich gut -- Das Auge sieht nicht alle Farbnuancen -- Laute Töne überdecken leise Töne - -→ Warum Daten speichern, die niemand wahrnimmt? - - - ---- - - - - - - -# Verlustfrei vs. Verlustbehaftet - -| | Verlustfrei (Lossless) | Verlustbehaftet (Lossy) | -|---|---|---| -| **Prinzip** | **Redundanz** entfernen | **Irrelevanz** entfernen | -| **Reversibel** | Ja (Original wiederherstellbar) | Nein (Information unwiederbringlich weg) | -| **Reduktion** | 30-50% | 80-99% | -| **Formate** | ZIP, PNG, FLAC, GIF | JPEG, MP3, H.264/H.265 | - -**Faustregel:** -- Medien für Endnutzer → Lossy oft akzeptabel -- Quellmaterial, Code, Archive → Lossless nötig - - - ---- - - - - -![bg fit](./assets/compression-types.png) - - - ---- - - - - -# Die Grundbausteine -## Bits, Bytes und ihre Darstellung - ---- - - - - -![bg](./assets/lightbulb-onoff.png) - - - ---- - -# Das Bit - -**Kleinste Informationseinheit** - -- **0 oder 1** -- AN oder AUS -- Strom fließt oder nicht - - - ---- - -# Das Byte - - - ---- - -# Das Byte - -**1 Byte = 8 Bits** - -``` -0 1 0 0 1 1 0 1 -``` - - - ---- - -# Das Byte - -**1 Byte = 8 Bits** - -``` -0 1 0 0 1 1 0 1 -``` - -2⁸ = **256 Möglichkeiten** (0-255) - - - ---- - - - - -»256 Shades of Gray« - -![bg fit](./assets/grayscale-gradient.png) - - - ---- - -# Was kann man mit 256 Zuständen machen? - -* **256 Zeichen** (Buchstaben, Zahlen, Symbole) -* **256 Helligkeit bzw. Luminanz** (0 = Schwarz/Dunkel, 255 = Weiß/Hell) -* **256 Lautstärkestufen** -* **Zahlen 0-255** (oder -128 bis +127) - - - ---- - - - - -![bg fit](./assets/rgb-color-model.png) - - - ---- - - - - -![bg fit](./assets/rgb-color-model-with-title.png) - - - ---- - -![bg right:50%](./assets/addaptive-substractive-colors.jpg) - -# Farben: RGB-Modell - -**1 Pixel = 3 Bytes** - -- **Rot:** 0-255 -- **Grün:** 0-255 -- **Blau:** 0-255 - -**Beispiele:** -`FF 00 00` = Rot -`00 FF 00` = Grün -`00 00 FF` = Blau -`00 00 00` = Schwarz -`FF FF FF` = Weiß - - - ---- - - - - -![bg fit](./assets/hex-dec-lookup-table.png) - ---- - -# Das Problem: Sprachen - -**Die Welt hat mehr als 256 Zeichen!** - -- Englisches Alphabet: 52 (A-Z, a-z) -- + Ziffern: 10 (0-9) -- + Sonderzeichen: ~30 - -**≈ 90 Zeichen → passt in 1 Byte** - -**Aber:** ä, ö, ü, ß, é, à, ç, α, β, 中, 日, 😀 - -→ **1 Byte reicht nicht!** - - - ---- - -# Unicode: Ein Standard für alle (8 Bit) - -**Unicode (1991):** Jedes Schriftsystem der Welt - -**>150.000 Zeichen:** -- Latein, Kyrillisch, Arabisch, Chinesisch, Japanisch... -- Mathematische Symbole, Emoji, historische Schriften - -**UTF-8:** Variable Länge (1-4 Bytes pro Zeichen) -- **Zeichen 0-127: identisch mit ASCII** (Abwärtskompatibilität!) -- 1.112.064 gültige Zeichen -- Umlaute: 2 Bytes · CJK: 3 Bytes · Emoji: 4 Bytes - - - ---- - -# Beispiel: Bytes zählen - -**Text:** `"Hello·🌸·こんにちは·(Kon-ni-chi-wa)"` - -| Zeichen | Bytes | -|---------|-------| -| `Hello·` | 6 × 1 = **6 Bytes** (ASCII) | -| `🌸` | **4 Bytes** (Emoji) | -| `·` | **1 Byte** | -| `こんにちは` | 5 × 3 = **15 Bytes** (Hiragana) | -| `·(Kon-ni-chi-wa)` | **16 Bytes** (ASCII) | - -**Gesamt: 42 Bytes** für 29 sichtbare Zeichen - - - ---- - - - -# Hexadezimal -## Die Sprache der Datei-Analyse - ---- - -# Hexadezimal: Lesbarkeit - -**Binär ist unleserlich:** -`01010000 01001110 01000111` - -**Hexadezimal (Base 16):** -`50 4E 47` (= "PNG" in ASCII) - -**Jede Hex-Ziffer = 4 Bits (ein "Nibble")** -0-9, A-F (10=A, 11=B, ..., 15=F) - -**ASCII Tabelle (0-127):** -[https://www.asciitable.com](https://www.asciitable.com) - - - ---- - - - - - -# ASCII -## One *Zeichensatz* to rule them all - - - ---- - - - - - -![bg fit](./assets/ascii-table-colored.png) - - - ---- - -![bg right:40%](./assets/matrix-code.png) - -# WTF!? - -``` -89 50 4E 47 0D 0A 1A 0A -00 00 00 0D 49 48 44 52 -00 00 01 90 00 00 01 2C -``` - ---- - -![bg right:30%](./assets/matrix-code.png) - -# What the HEX-Code - -``` -89 50 4E 47 ... -``` - -| Binär | Hex | Dez | ASCII | -|-------|-----|-----|-------| -| `1000 1001` | `89` | 137 | ✗ (> 127) | -| `0101 0000` | `50` | 80 | **P** | -| `0100 1110` | `4E` | 78 | **N** | -| `0100 0111` | `47` | 71 | **G** | - -→ **PNG**-Signatur! (Das `89` markiert: "Ich bin binär, kein Text!") - - - ---- - - - - - -![bg fit](./assets/hex-code-hidden.png) - - - ---- - - - - - -![bg fit](./assets/hex-code.png) - - - ---- - - - - -![bg fit](./assets/8bit-P-character.png) - ---- - -# Magic Numbers - -**Dateityp-Identifikation durch erste Bytes** - -| Format | Magic Number (Hex) | Lesbar? | -|--------|-------------------|---------| -| PNG | `89 50 4E 47` | ✗ P N G | -| JPEG | `FF D8 FF` | ✗ ✗ ✗ | -| PDF | `25 50 44 46` | % P D F ✓ | -| ZIP | `50 4B 03 04` | P K ✗ ✗ | - -**Wichtig:** ASCII = nur 0-127! Werte darüber (z.B. `89` = 137) sind **nicht druckbar** (non-printable). *Hex-Editoren zeigen dafür `.` oder `ÿ` als Platzhalter.* - - - ---- - - - - - - -# Dateneinheiten - -| Einheit | Bytes | Potenz | Beispiel | -|---------|------:|:------:|----------| -| **Byte** | 1 | 10⁰ | Farbwerte eines Pixels | -| **Kilobyte (KB)** | 1.000 | 10³ | Kleiner Programmcode | -| **Megabyte (MB)** | 1 Million | 10⁶ | Textdokument | -| **Gigabyte (GB)** | 1 Milliarde | 10⁹ | Kinofilm in FullHD | -| **Terabyte (TB)** | 1 Billion | 10¹² | ~12h Video in 4K | -| **Petabyte (PB)** | 1 Billiarde | 10¹⁵ | Netflix-Gesamtarchiv | -| **Exabyte (EB)** | 1 Trillion | 10¹⁸ | Alle E-Mails weltweit/Tag | -| **Zettabyte (ZB)** | 1 Trilliarde | 10²¹ | Internet-Traffic 2016 | - - - ---- - -# Datenwachstum der Menschheit - -| Jahr | Datenmenge | Kontext | -|------|------------|---------| -| **100.000 v. Chr.** | 0 | Erste Menschen, nur Sprache | -| **3.000 v. Chr.** | ~wenige KB | Keilschrift, Hieroglyphen | -| **1450** | ~wenige GB | Gutenberg, Buchdruck | -| **1986** | **2,6 EB** | 99% analog (Bücher, Vinyl, VHS) | -| **2007** | **295 EB** | 94% digital | -| **2025** | **181 ZB** | 90% unstrukturiert | - - - ---- - - - - - - -# Der digitale Wendepunkt - -| Jahr | Analog | Digital | Digital-Anteil | -|------|--------|---------|----------------| -| **1986** | 2,6 EB | 0,02 EB | **1%** | -| **2002** | — | — | **50%** (Wendepunkt) | -| **2007** | 18 EB | 277 EB | **94%** | - -**Perspektive:** -- 1986: "Petabyte" war ein theoretisches Konzept -- 2025: ~181 Zettabyte jährlich produziert - -**Magnetband lebt:** LTO-Tapes bleiben günstigstes Archivmedium -(AWS Glacier, Film-Archive, Rechenzentren) - - - ---- - - - - - -![bg fit](./assets/2011-hilbert.png) - - ---- - -# 181 Zettabyte – Was bedeutet das? - -**2025:** Welt erzeugt **181 ZB** pro Jahr - -- **2,5 Quintillionen Bytes** täglich -- **29 Terabyte** pro Sekunde -- **90%** davon: unstrukturiert (Videos, Bilder, Audio) -- **70%** davon: von NutzerInnen generiert - -**Zum Vergleich:** -- 1 ZB = 250 Milliarden DVDs -- 181 ZB = Jeder Mensch erzeugt ~23 TB/Jahr - - - ---- - - - - - - -![bg fit](./assets/growth of big data.png) - ---- - -# AI-generierte Inhalte 2025 - -**Wie viel Content ist heute synthetisch?** - -| Bereich | AI-Anteil | -|---------|-----------| -| **Neue Webseiten** | ~74% enthalten AI-Content | -| **Web-Text gesamt** | ~30-40% AI-generiert | -| **Neue Artikel** | ~52% von AI geschrieben | -| **Social-Media-Bilder** | ~71% AI-generiert | - -**Prognose 2026:** 90% des Online-Contents synthetisch - - - ---- - - - -# Teil 2: Die MP3-Revolution -## Psychoakustik & Audio-Kompression - ---- - - - - -![bg](./assets/cassette-ipod.png) - - - ---- - - - - - - -# Analoge Medien -### Distribution: physisch (Kauf, Verleih, Kopie) - -* **Text** - - Bücher, Zeitungen, Zeitschriften, Lochkarten -* **Bild** - - Fotografie (Negativ, Dia, Polaroid), Mikrofilm -* **Audio:** - - Schallplatte (Vinyl, Schellack), Tonband, Musikkassette -* **Video:** - - Film (35mm, Super 8), VHS, Betamax - ---- - -# Analoge Medien: Vor- und Nachteile - -| Vorteile | Nachteile | -|----------|-----------| -| Kein Abspielgerät nötig (Buch, Foto) | Qualitätsverlust bei jeder Kopie | -| Haptisches Erlebnis | Physischer Verschleiß | -| Unabhängig von Strom/Internet | Begrenzte Haltbarkeit | -| Keine Formatkonvertierung | Platzbedarf bei Lagerung | -| Eindeutiges Original | Aufwendige Durchsuchbarkeit | - - - ---- - -# Von Analog zu Digital: Die Kopier-Revolution - -**Das Problem analoger Kopien:** -Kassette → Kassette → Kassette = immer schlechter - -**Was Digital anders macht:** -- **Identische Kopien** – kein Qualitätsverlust, nie -- **Einfache Massenproduktion** – Copy & Paste -- **Perfekte Archivierung** – Bits verändern sich nicht - -**Daher: "Raubkopien"** -Der Begriff entstand, weil digitale Kopien *tatsächlich identisch* mit dem Original waren – nicht wie bei Kassetten eine schlechtere Version. - -Quelle: [c64-wiki.de/wiki/Raubkopie](https://www.c64-wiki.de/wiki/Raubkopie) - - - ---- - - - - - - -# Digitale Medien -### Distribution: Datenträger (CD, USB), Download, Streaming, P2P - -* **Text** - - E-Book (PDF, EPUB), Dokumente (TXT, DOCX) -* **Bild** - - Digitalfoto (JPEG, PNG, RAW, WebP, GIF) -* **Audio** - - Audiodatei (MP3, FLAC, WAV, AAC, OGG) -* **Video** - - Videodatei (MP4, MKV, AVI, WebM) - ---- - - - - - - -# Digitale Speichermedien - -* **Optische Speicher** - - CD, DVD, Blu-ray -* **Magnetische Speicher** - - Festplatte (HDD), Magnetband (LTO) -* **Flash-Speicher** - - SSD, USB-Stick, SD-Karte -* **Cloud-Speicher** - - Dropbox, Google Drive, iCloud, AWS S3 - ---- - -# Das Speicherproblem der Digitalisierung - - -**Ziel: Analoge Schallwelle möglichst originalgetreu rekonstruieren** - -*CD-Qualität (1982): 44.100 Hz × 16 Bit × 2 Kanäle = 10,584 MB/Minute* - - - -| Inhalt | Größe | Problem (1990er) | -|--------|-------|------------------| -| 1 Song (4 Min) | ~42 MB | Ausreichend Speicher | -| 1 Album (60 Min) | ~635 MB | Gesamte Festplatte | - - - - ---- - - - - -![bg cover](./assets/spectogram-chet-baker.png) - - - ---- - -# Die Abtastrate (Sample Rate) -**Analog → Digital ≙ Kontinuierlich → Diskret** -``` - Analog (Vinyl): Digital (CD): - ~~~~~~~~~~~~~~~ • • • • • • • • - Kontinuierliche 44.100 Messpunkte - Wellenform pro Sekunde -``` -**Nyquist-Theorem:** - -> Um eine Frequenz zu rekonstruieren, braucht man mindestens **2× so viele Samples**. -44.100 Hz ÷ 2 = **22.050 Hz** max. darstellbare Frequenz -(Mensch hört: ~20 Hz bis ~20.000 Hz → passt!) - - - ---- - -# Die Bittiefe (Bit Depth) - -**Wie genau messen wir jeden Punkt?** - -| Bittiefe | Stufen | Dynamikumfang | -|----------|--------|---------------| -| 8 Bit | 256 | ~48 dB | -| 16 Bit (CD) | 65.536 | ~96 dB | -| 24 Bit (Studio) | 16.777.216 | ~144 dB | - -**16 Bit = 2¹⁶ = 65.536 Lautstärkestufen** -(von absoluter Stille bis maximaler Lautstärke) - - - ---- - -# Abtastrate (Sample Rate) × Bittiefe (Bit Depth) - -**Zwei Dimensionen der Digitalisierung:** - -| Dimension | Was bedeutet es? | CD-Qualität | -|-----------|------------------|-------------| -| **Abtastrate** (Sample Rate) | Messungen pro Sekunde (horizontal) | 44.100 Hz | -| **Bittiefe** (Bit Depth) | Genauigkeit pro Messung (vertikal) | 16 Bit | - -**44.100 Hz × 16 Bit** × 2 Kanäle = 10,584 MB/Minute - - - ---- - - - -# Kompression -## Weniger Daten, gleiche(?) Information - ---- - -# Wo liegt der Hebel für Kompression? - -**CD-Qualität:** 44.100 Hz × 16 Bit × 2 Kanäle = **10,6 MB/Min** -**MP3 (128 kbps):** = **~1 MB/Min** (Faktor 10!) - -**Container-Parameter (das Raster):** - -| Parameter | Reduzieren → | Konsequenz | -|-----------|--------------|------------| -| Abtastrate | Weniger Messpunkte/Sek | Max. Frequenz sinkt | -| Bittiefe | Weniger Lautstärkestufen | Mehr Rauschen | -| Kanäle | Mono statt Stereo | Kein Raumklang | - - - ---- - -# Psychoakustik: Der MP3-Trick - -**Inhalt (was durchs Raster geht):** - -| Methode | Reduzieren → | Konsequenz | -|---------|--------------|------------| -| Psychoakustik | Unhörbare Frequenzen | Kaum wahrnehmbar | - -→ **MP3 nutzt hauptsächlich Psychoakustik** -→ Container bleibt ähnlich, Inhalt wird "ausgedünnt" - - - ---- - -# Die Geburt der MP3 - -**1982:** Universität Erlangen-Nürnberg -Karlheinz Brandenburg, Diplom-Ingenieur - -**1987:** Fraunhofer IIS entwickelt MPEG-1 Audio Layer III - -**1988:** Patentanmeldung - -**1992:** Erste Software-Implementierung - -**1995:** .mp3 Dateiendung offiziell - - - ---- - -![bg right:40%](./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 - - - ---- - -![bg right:50%](./assets/suzanne-vega.jpg) - -# Suzanne Vega - -**"Tom's Diner" (1987)** - -- Der erste Song, der als MP3 kodiert wurde -- A cappella (keine Instrumente) -- Klare, hohe Frequenzen -- Perfekter Stresstest für Kompression -- Brandenburg hörte "Tom's Diner" über 10.000 Mal - - - - ---- - -# Wie funktioniert MP3? - -Ein Zusammenspiel aus vielen Faktoren: - -* **1. Frequenz-Analyse (FFT)** - Audio → Frequenzspektrum - -* **2. Psychoakustisches Modell** - Welche Töne hört Mensch nicht? - -* **3. Quantisierung** - Unwichtige Frequenzen reduzieren - -* **4. Huffman-Coding** - Lossless-Kompression der Restdaten - - - ---- - -# Bitrate: Der Qualitäts-Knopf - -| Bitrate | Qualität | Kompression | -|---------|----------|-------------| -| **128 kbps** | Hörbar schlechter | ~11x | -| **192 kbps** | Akzeptabel | ~7x | -| **256 kbps** | Gut | ~5,5x | -| **320 kbps** | "CD-Qualität" | ~4,4x | - -**Original CD:** 1.411 kbps (unkomprimiert) - - - - - - - - ---- - -# Der Patentkrieg - -**1990er:** Fraunhofer + Thomson halten MP3-Patente - -**Lizenzgebühren:** -- $0,75 pro Decoder -- $2,50 pro Encoder - -**Problem:** Napster (1999) → unkontrollierte Verbreitung - -**2017:** Patente laufen aus → MP3 ist frei - - - ---- - -![bg right:50% fit](./assets/napster-2001.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 - - - ---- - -![bg right:40% contain](./assets/bittorrent.png) - -# Napster & Musikindustrie - -**1999:** Napster startet -**2001:** 80 Millionen User - -**Musikindustrie:** -- CDs kosten $15-20 -- MP3s gratis (illegal, aber yolo) -- Einzelne Songs statt Alben - -**2001:** Napster wird verklagt und schließt - -**Aber:** Pandora's Box offen -→ LimeWire, Kazaa, BitTorrent, später Spotify - - - ---- - -# Kulturelle Revolution - -**MP3 veränderte:** - -✓ Musik wurde portabel (Walkman → iPod) -✓ Alben wurden irrelevant (Playlists) -✓ Musikkonsum explodierte (kostenlos/billig) -✓ KünstlerInnen verloren Kontrolle - -**Aber auch:** -❌ KünstlerInnen verdienen weniger pro Stream -❌ Audio-Qualität sank (Loudness War) -❌ Physische Medien starben - - - ---- - - - -# Fragen & Diskussion - -**Kontakt:** lb-czechowski@hdm-stuttgart.de -**Folien:** Online verfügbar unter https://librete.ch/hdm/223015b - ---- - -# 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/ - ---- - - - - -# Selbstlernen: Audio-Spektrogram - -**Aufgabe (30 Min):** - -- Live Spektrogram untersuchen https://borismus.github.io/spectrogram/ -- Mit Effekten experimentieren https://audiomass.co/ -- Spektrogramme vergleichen Audacity (kostenloser Download nötig) [https://manual.audacityteam.org/man/spectrogram_view.html](https://manual.audacityteam.org/man/spectrogram_view.html) - - - ---- - - - - -![bg contain right:22%](./assets/qr/hexed-it.png) - -# Selbstlernen: HEX Files - -1. Drei Dateien ohne Dateiendung: - `hex1` `hex2` `hex3` -3. Lies erste 16 Bytes aus und identifiziere Dateiformat (Magic Number) -5. *Optional: Datei umbenennen und korrekte Dateiendung anhängen (bspw. `.jpg`)* - -**Tools:** -- Hex-Editor: [hexed.it](https://hexed.it) -- Magic Numbers: [en.wikipedia.org/wiki/List_of_file_signatures](https://en.wikipedia.org/wiki/List_of_file_signatures) - - - diff --git a/slides/223015b/klausur.md b/slides/223015b/klausur.md deleted file mode 100644 index 9485231..0000000 --- a/slides/223015b/klausur.md +++ /dev/null @@ -1,563 +0,0 @@ ---- -marp: true -theme: gaia -paginate: true -backgroundColor: #fff -header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)" -footer: "Michael Czechowski – HdM Stuttgart" -title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege ---- - - - - - - - - -![bg cover opacity:0.2](./assets/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg) - -# Dateiformate, Schnittstellen, Speichermedien & Distributionswege - -**223015b** · Modul "Technik 1" · 1. Semester -Digital- und Medienwirtschaft -Hochschule der Medien Stuttgart - -[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/) - ---- - - - - - -# Verlustfrei vs. Verlustbehaftet - -| | Verlustfrei (Lossless) | Verlustbehaftet (Lossy) | -|---|---|---| -| **Prinzip** | **Redundanz** entfernen | **Irrelevanz** entfernen | -| **Reversibel** | Ja (Original wiederherstellbar) | Nein (Information unwiederbringlich weg) | -| **Reduktion** | 30-50% | 80-99% | -| **Formate** | ZIP, PNG, FLAC, GIF | JPEG, MP3, H.264/H.265 | - -**Faustregel:** -- Medien für Endnutzer → Lossy oft akzeptabel -- Quellmaterial, Code, Archive → Lossless nötig - - - - ---- - - - - - -# Dateneinheiten - -| Einheit | Bytes | Potenz | Beispiel | -|---------|------:|:------:|----------| -| **Byte** | 1 | 10⁰ | Farbwerte eines Pixels | -| **Kilobyte (KB)** | 1.000 | 10³ | Kleiner Programmcode | -| **Megabyte (MB)** | 1 Million | 10⁶ | Textdokument | -| **Gigabyte (GB)** | 1 Milliarde | 10⁹ | Kinofilm in FullHD | -| **Terabyte (TB)** | 1 Billion | 10¹² | ~12h Video in 4K | -| **Petabyte (PB)** | 1 Billiarde | 10¹⁵ | Netflix-Gesamtarchiv | -| **Exabyte (EB)** | 1 Trillion | 10¹⁸ | Alle E-Mails weltweit/Tag | -| **Zettabyte (ZB)** | 1 Trilliarde | 10²¹ | Internet-Traffic 2016 | - - - - ---- - - - - - -# Der digitale Wendepunkt - -| Jahr | Analog | Digital | Digital-Anteil | -|------|--------|---------|----------------| -| **1986** | 2,6 EB | 0,02 EB | **1%** | -| **2002** | — | — | **50%** (Wendepunkt) | -| **2007** | 18 EB | 277 EB | **94%** | - -**Perspektive:** -- 1986: "Petabyte" war ein theoretisches Konzept -- 2025: ~181 Zettabyte jährlich produziert - -**Magnetband lebt:** LTO-Tapes bleiben günstigstes Archivmedium -(AWS Glacier, Film-Archive, Rechenzentren) - - - - ---- - - - - - -# Analoge Medien -### Distribution: physisch (Kauf, Verleih, Kopie) - -- **Text** - - Bücher, Zeitungen, Zeitschriften, Lochkarten -- **Bild** - - Fotografie (Negativ, Dia, Polaroid), Mikrofilm -- **Audio:** - - Schallplatte (Vinyl, Schellack), Tonband, Musikkassette -- **Video:** - - Film (35mm, Super 8), VHS, Betamax - - ---- - - - - - -# Digitale Medien -### Distribution: Datenträger (CD, USB), Download, Streaming, P2P - -- **Text** - - E-Book (PDF, EPUB), Dokumente (TXT, DOCX) -- **Bild** - - Digitalfoto (JPEG, PNG, RAW, WebP, GIF) -- **Audio** - - Audiodatei (MP3, FLAC, WAV, AAC, OGG) -- **Video** - - Videodatei (MP4, MKV, AVI, WebM) - - ---- - - - - - -# Digitale Speichermedien - -- **Optische Speicher** - - CD, DVD, Blu-ray -- **Magnetische Speicher** - - Festplatte (HDD), Magnetband (LTO) -- **Flash-Speicher** - - SSD, USB-Stick, SD-Karte -- **Cloud-Speicher** - - Dropbox, Google Drive, iCloud, AWS S3 - - ---- - - - - - -# Rastergrafiken - -**Aufbau:** Liste von Pixeln mit Farbwerten (2D-Array) - -**Speicherbedarf (unkomprimiert):** -Breite × Höhe × Farbtiefe (in Bytes) - -**Beispiele:** JPEG, PNG, WebP - -| Bits (Farbtiefe) | Farben | Anwendung | -|-----:|-------:|-----------| -| 1 | 2 | Schwarz/Weiß (Fax) | -| 8 | 256 | Graustufen, GIF | -| 24 | 16,7 Mio. | True Color (Standard) | -| 32 | 16,7 Mio. + Alpha | Transparenz | - - - - ---- - - - - - -# Vektorgrafiken - -**Speicherung als geometrische Primitive:** -- Pfade (Bézierkurven mit Kontrollpunkten) -- Grundformen (Rechteck, Ellipse, Polygon) -- Text (Glyphen als Outlines) - -**SVG-Beispiel:** -```xml - -``` - -SVG beschreibt nicht jeden einzelnen Pixel im Raster, sondern deklariert wie Farben und Formen gesetzt werden. - - - - ---- - - - - - -# Die Schwächen des Auges - -**Menschen sehen:** -- Helligkeit besser als Farbe -- Große Flächen besser als feine Details -- Niedrige Frequenzen besser als hohe - -**JPEG nutzt das aus:** -- Farbauflösung reduzieren (aber Helligkeit behalten) -- Glatte Flächen effizient speichern -- Hohe Frequenzen (Details) verwerfen - - - - ---- - - - - - -![bg right:20%](./assets/Barn-yuv.png) - -# JPEG: Schritt 1 – Farbraumkonversion - -**RGB → Y'CbCr** (seltener Y'UV) - -- **Y** = Helligkeit (Luminanz) – Was das Auge am besten sieht -- **Cb** = Blau-Gelb-Anteil (Chrominanz) -- **Cr** = Rot-Grün-Anteil (Chrominanz) - -**Warum diese Trennung?** -Y (Helligkeit) behält volle Auflösung. -Cb/Cr (Farbe) kann reduziert werden – Auge merkt es kaum. - - - - ---- - - - - - -# JPEG: Schritt 6 – Huffman-Coding - -**Verlustfreie Kompression der Restwerte** - -**Idee:** Statt fester 8 Bit pro Wert → variable Bitlänge -Häufige Werte bekommen kurze Bit-Sequenzen. - -| Zeichen | Häufigkeit | Code (Bit-Sequenz) | -|---------|------------|------| -| e | 40% | `0` (1 Bit) | -| a | 25% | `10` (2 Bit) | -| i | 20% | `110` (3 Bit) | -| o | 10% | `1110` (4 Bit) | -| u | 5% | `1111` (4 Bit) | - - - - ---- - - - - - -# Container und Codec - -**Container = Das Dateiformat (Beispiel: MP4)** -Die "Box", die verschiedene Streams zusammenpackt: -- Video-Stream -- Audio-Stream(s) -- Untertitel -- Metadaten - -**Codec = Der Kompressionsalgorithmus (Beispiel: AV1)** -Entscheidet, WIE komprimiert wird. - - - - - ---- - - - - - -# H.264 / AVC - -**Advanced Video Coding (2003)** - -**Warum dominant?** -- Exzellente Kompression (~100:1 möglich) -- Hardware-Support in jedem Gerät seit ~2010 -- YouTube, Netflix, Blu-ray – alles H.264 - -**Features:** -- Variable Block-Größen (16×16 bis 4×4) -- Deblocking-Filter (reduziert Block-Artefakte) - - - - ---- - - - - - -# AV1: Die offene Zukunft - -**AV1 (2018)** - -**Alliance for Open Media:** -Google, Netflix, Amazon, Microsoft, Apple, Mozilla... - -**Eigenschaften:** -- 30% besser als H.265 -- Royalty-free, Open Source -- 8K, HDR, hohe Frame-Rates - -**Stand 2025:** -YouTube und Netflix nutzen AV1 für 4K/8K -Hardware-Encoder in aktuellen GPUs - - - - ---- - - - - - -# Wann HDD, wann SSD? - -| Anwendung | Empfehlung | -|-----------|------------| -| Betriebssystem | SSD (NVMe) | -| Anwendungen, Spiele | SSD | -| Video-Editing (Projekte) | SSD | -| Foto-Archiv | HDD oder SSD | -| Backup | HDD | -| NAS / Server | HDD (oder Mix) | -| Cold Storage | HDD oder Band | - - - - ---- - - - - - -# Die 3-2-1-Regel - -**3** Kopien eurer Daten -(Original + 2 Backups) - -**2** verschiedene Medientypen -(z.B. SSD + HDD, oder lokal + Cloud) - -**1** Kopie an anderem Ort -(Offsite: Cloud, anderes Gebäude) - - diff --git a/slides/223015b/klausurfolien.md b/slides/223015b/klausurfolien.md new file mode 100644 index 0000000..75bfded --- /dev/null +++ b/slides/223015b/klausurfolien.md @@ -0,0 +1,458 @@ +--- +marp: true +theme: gaia +paginate: true +backgroundColor: #fff +header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)" +footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26" +title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege +--- + + + + + + + + +![bg cover opacity:0.2](./assets/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg) + +# Dateiformate, Schnittstellen, Speichermedien & Distributionswege + +**223015b** · Modul "Technik 1" · 1. Semester +Digital- und Medienwirtschaft +Hochschule der Medien Stuttgart + +**Wintersemester 2025/26** + +[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/) + +--- + + + + + +# Rastergrafiken + +**Aufbau:** Liste von Pixeln mit Farbwerten (2D-Array) + +**Speicherbedarf (unkomprimiert):** +Breite × Höhe × Farbtiefe (in Bytes) + +**Beispiele:** JPEG, PNG, WebP + +| Bits (Farbtiefe) | Farben | Anwendung | +|-----:|-------:|-----------| +| 1 | 2 | Schwarz/Weiß (Fax) | +| 8 | 256 | Graustufen, GIF | +| 24 | 16,7 Mio. | True Color (Standard) | +| 32 | 16,7 Mio. + Alpha | Transparenz | + + + + +--- + + + + + +# Vektorgrafiken + +**Speicherung als geometrische Primitive:** +- Pfade (Bézierkurven mit Kontrollpunkten) +- Grundformen (Rechteck, Ellipse, Polygon) +- Text (Glyphen als Outlines) + +**SVG-Beispiel:** +```xml + +``` + +SVG beschreibt WAS gezeichnet werden soll, nicht WIE jeder Pixel aussieht. + + + + +--- + + + + + +# Die Schwächen des Auges + +**Menschen sehen:** +- Helligkeit besser als Farbe +- Große Flächen besser als feine Details +- Niedrige Frequenzen besser als hohe + +**JPEG nutzt das aus:** +- Farbauflösung reduzieren (Helligkeit behalten) +- Glatte Flächen effizient speichern +- Hohe Frequenzen (feine Details) verwerfen + + + + +--- + + + + + +![bg right:20%](./assets/Barn-yuv.png) + +# JPEG Schritt 1: Farbraumkonversion + +**RGB → Y'CbCr** + +- **Y** = Helligkeit (Luminanz) +- **Cb** = Blau-Gelb-Anteil (Chrominanz) +- **Cr** = Rot-Grün-Anteil (Chrominanz) + +**Warum?** +Y (Helligkeit) behält volle Auflösung +Cb/Cr (Farbe) kann reduziert werden + + + + +--- + + + + + +# JPEG Schritt 6: Huffman-Coding + +**Verlustfreie Kompression der Restwerte** + +**Idee:** Variable Bitlänge statt fester 8 Bit +Häufige Werte → kurze Codes + +| Zeichen | Häufigkeit | Code | +|---------|------------|------| +| e | 40% | `0` (1 Bit) | +| a | 25% | `10` (2 Bit) | +| i | 20% | `110` (3 Bit) | +| o | 10% | `1110` (4 Bit) | +| u | 5% | `1111` (4 Bit) | + + + + + + + +--- + + + + + +# WebP & AVIF: Moderne Alternativen + +**WebP (Google, 2010):** +- Lossy und Lossless +- Transparenz und Animationen +- 25–35% kleiner als JPEG + +**AVIF (2019):** +- Basiert auf AV1-Video-Codec +- 50% kleiner als JPEG +- HDR-Unterstützung, patent-frei + +**Browser-Support 2025:** WebP universell, AVIF wächst + + + + +--- + + + + + +# Container und Codec + +**Container = Dateiformat (z.B. MP4)** +Die "Box", die verschiedene Streams zusammenpackt: +- Video-Stream +- Audio-Stream(s) +- Untertitel +- Metadaten + +**Codec = Kompressionsalgorithmus (z.B. H.264)** +Bestimmt, WIE komprimiert wird + + + + +--- + + + + + +# H.264 / AVC + +**Advanced Video Coding (2003)** + +**Warum dominant?** +- Exzellente Kompression (~100:1 möglich) +- Hardware-Decoder in jedem Gerät seit ~2010 +- YouTube, Netflix, Blu-ray – alles H.264 + +**Features:** +- Variable Block-Größen (16×16 bis 4×4) +- Deblocking-Filter (reduziert Artefakte) + + + + +--- + + + + + +# AV1: Die offene Zukunft + +**AV1 (2018)** + +**Alliance for Open Media:** +Google, Netflix, Amazon, Microsoft, Apple, Mozilla... + +**Eigenschaften:** +- 30% besser als H.265 +- Royalty-free, Open Source +- 8K, HDR, hohe Frame-Rates + +**Stand 2025:** +YouTube, Netflix nutzen AV1 für 4K/8K +Hardware-Encoder in aktuellen GPUs + + + + +--- + + + + + +# Wann HDD, wann SSD? + +| Anwendung | Empfehlung | +|-----------|------------| +| Betriebssystem | SSD (NVMe) | +| Anwendungen, Spiele | SSD | +| Video-Editing (Projekte) | SSD | +| Foto-Archiv | HDD oder SSD | +| Backup | HDD | +| NAS / Server | HDD (oder Mix) | +| Cold Storage | HDD oder Band | + + + + +--- + + + + + +# Die 3-2-1-Regel + +**3** Kopien eurer Daten +(Original + 2 Backups) + +**2** verschiedene Medientypen +(z.B. SSD + HDD, oder lokal + Cloud) + +**1** Kopie an anderem Ort +(Offsite: Cloud, anderes Gebäude) + + diff --git a/slides/223015c/klausur.md b/slides/223015c/klausurfolien.md similarity index 100% rename from slides/223015c/klausur.md rename to slides/223015c/klausurfolien.md