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
This commit is contained in:
197
AGENTS.md
Normal file
197
AGENTS.md
Normal file
@@ -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/<course>/` following naming pattern `NN-topic.md`
|
||||||
|
- Assets in `slides/<course>/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 `<!-- _class: klausur -->` 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 `<!-- _class: klausur -->` 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/<course>/`
|
||||||
|
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/<course>/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
|
||||||
31
Makefile
31
Makefile
@@ -7,19 +7,13 @@
|
|||||||
COURSES = 223015b 223015c
|
COURSES = 223015b 223015c
|
||||||
SLIDES_DIR = slides
|
SLIDES_DIR = slides
|
||||||
|
|
||||||
# Port configuration (index starts at BASE_PORT, courses increment from there)
|
|
||||||
BASE_PORT = 1310
|
|
||||||
INDEX_PORT = $(BASE_PORT)
|
|
||||||
|
|
||||||
# Course-specific settings
|
# Course-specific settings
|
||||||
223015b_NAME = Dateiformate, Schnittstellen, Speichermedien
|
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 klausurfolien
|
||||||
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_DEPLOY_PATH = /home/tengo/html/hdm/223015b
|
223015b_DEPLOY_PATH = /home/tengo/html/hdm/223015b
|
||||||
|
|
||||||
223015c_NAME = Internettechnologien
|
223015c_NAME = Internettechnologien
|
||||||
223015c_PORT = 1312
|
223015c_KAPITEL = 01-geschichte-grundlagen-html 02-netzwerke-protokolle-css 03-interaktivitaet-javascript klausurfolien
|
||||||
223015c_KAPITEL = 01-geschichte-grundlagen-html 02-netzwerke-protokolle-css 03-interaktivitaet-javascript klausur
|
|
||||||
223015c_DEPLOY_PATH = /home/tengo/html/hdm/223015c
|
223015c_DEPLOY_PATH = /home/tengo/html/hdm/223015c
|
||||||
|
|
||||||
DEPLOY_HOST = tengo@tuttle.uberspace.de
|
DEPLOY_HOST = tengo@tuttle.uberspace.de
|
||||||
@@ -33,9 +27,7 @@ help:
|
|||||||
@echo " 223015c - Internettechnologien"
|
@echo " 223015c - Internettechnologien"
|
||||||
@echo ""
|
@echo ""
|
||||||
@echo "Development:"
|
@echo "Development:"
|
||||||
@echo " make dev - Both servers + index (ports 1311, 1312, 1313)"
|
@echo " make dev - Start development server (port 3000)"
|
||||||
@echo " make dev-b - Dev server for 223015b (port 1312)"
|
|
||||||
@echo " make dev-c - Dev server for 223015c (port 1313)"
|
|
||||||
@echo ""
|
@echo ""
|
||||||
@echo "Build:"
|
@echo "Build:"
|
||||||
@echo " make build - Build all courses"
|
@echo " make build - Build all courses"
|
||||||
@@ -43,7 +35,7 @@ help:
|
|||||||
@echo " make build-c - Build 223015c only"
|
@echo " make build-c - Build 223015c only"
|
||||||
@echo " make pdf - Export all to PDF"
|
@echo " make pdf - Export all to PDF"
|
||||||
@echo " make html - Export all to HTML"
|
@echo " make html - Export all to HTML"
|
||||||
@echo " make klausur - Extract klausur slides"
|
@echo " make klausur - Extract klausurfolien slides"
|
||||||
@echo ""
|
@echo ""
|
||||||
@echo "Tools:"
|
@echo "Tools:"
|
||||||
@echo " make qr URL=... - Generate QR code for URL"
|
@echo " make qr URL=... - Generate QR code for URL"
|
||||||
@@ -63,25 +55,14 @@ build/.exists:
|
|||||||
@mkdir -p build/223015b build/223015c
|
@mkdir -p build/223015b build/223015c
|
||||||
@touch $@
|
@touch $@
|
||||||
|
|
||||||
# Development servers
|
# Development server
|
||||||
dev:
|
dev:
|
||||||
@./scripts/dev-server.sh
|
@./scripts/dev-server.sh
|
||||||
|
|
||||||
dev-kill:
|
dev-kill:
|
||||||
@-pkill -f "python3 -m http.server" 2>/dev/null || true
|
|
||||||
@-pkill -f "marp-cli.*--server" 2>/dev/null || true
|
@-pkill -f "marp-cli.*--server" 2>/dev/null || true
|
||||||
@sleep 0.5
|
@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
|
# Build functions
|
||||||
define build_course
|
define build_course
|
||||||
@echo "Building $(1)..."
|
@echo "Building $(1)..."
|
||||||
@@ -158,7 +139,7 @@ klausur-c:
|
|||||||
@./scripts/extract-klausur.sh 223015c
|
@./scripts/extract-klausur.sh 223015c
|
||||||
|
|
||||||
klausur: klausur-b klausur-c
|
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 Code generation (uses nix-shell)
|
||||||
qr:
|
qr:
|
||||||
|
|||||||
14
README.md
14
README.md
@@ -27,10 +27,12 @@ build/ # Generated output (gitignored)
|
|||||||
## Development
|
## Development
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Start dev servers (hot reload)
|
# Start development server (hot reload)
|
||||||
make dev # All courses + index
|
make dev # Single server for all courses (port 3000)
|
||||||
make dev-b # 223015b only (port 1311)
|
|
||||||
make dev-c # 223015c only (port 1312)
|
# Access individual courses:
|
||||||
|
# 223015b: http://localhost:3000/223015b/
|
||||||
|
# 223015c: http://localhost:3000/223015c/
|
||||||
```
|
```
|
||||||
|
|
||||||
## Build
|
## Build
|
||||||
@@ -43,7 +45,7 @@ make html # HTML only
|
|||||||
make pdf # PDF only
|
make pdf # PDF only
|
||||||
```
|
```
|
||||||
|
|
||||||
## Klausur Slides
|
## Klausur Folien
|
||||||
|
|
||||||
Extract exam-relevant slides (marked with `<!-- _class: klausur -->`) into a single file:
|
Extract exam-relevant slides (marked with `<!-- _class: klausur -->`) into a single file:
|
||||||
|
|
||||||
@@ -53,7 +55,7 @@ make klausur-b # 223015b only
|
|||||||
make klausur-c # 223015c only
|
make klausur-c # 223015c only
|
||||||
```
|
```
|
||||||
|
|
||||||
Output: `slides/<course>/klausur.md`
|
Output: `slides/<course>/klausurfolien.md`
|
||||||
|
|
||||||
The generated file includes:
|
The generated file includes:
|
||||||
- A title slide per kapitel for orientation
|
- A title slide per kapitel for orientation
|
||||||
|
|||||||
@@ -3,13 +3,14 @@
|
|||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "HdM Stuttgart - Lecture Slides (Marp)",
|
"description": "HdM Stuttgart - Lecture Slides (Marp)",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev:b": "PORT=1312 marp --server --allow-local-files courses/223015b/slides/",
|
"dev": "PORT=3000 marp --server --allow-local-files slides/",
|
||||||
"dev:c": "PORT=1313 marp --server --allow-local-files courses/223015c/slides/",
|
|
||||||
"build": "make build",
|
"build": "make build",
|
||||||
"build:b": "make build-b",
|
"build:b": "make build-b",
|
||||||
"build:c": "make build-c",
|
"build:c": "make build-c",
|
||||||
"pdf": "make pdf",
|
"pdf": "make pdf",
|
||||||
"html": "make html",
|
"html": "make html",
|
||||||
|
"klausur": "make klausur",
|
||||||
|
"deploy": "make deploy",
|
||||||
"test": "echo \"No tests specified\" && exit 0"
|
"test": "echo \"No tests specified\" && exit 0"
|
||||||
},
|
},
|
||||||
"keywords": ["marp", "slides", "hdm", "lectures"],
|
"keywords": ["marp", "slides", "hdm", "lectures"],
|
||||||
|
|||||||
@@ -1,106 +1,53 @@
|
|||||||
#!/usr/bin/env bash
|
#!/usr/bin/env bash
|
||||||
# Development server script for HdM slides
|
# Simplified development server for HdM slides
|
||||||
# Starts index server + marp servers for each course
|
# Starts single Marp server for all courses
|
||||||
|
|
||||||
set -e
|
set -e
|
||||||
|
|
||||||
# Configuration
|
# Configuration
|
||||||
INDEX_PORT=1310
|
|
||||||
COURSE_B_PORT=1311
|
|
||||||
COURSE_C_PORT=1312
|
|
||||||
SLIDES_DIR="slides"
|
SLIDES_DIR="slides"
|
||||||
DEV_INDEX_DIR=".dev-index"
|
DEV_PORT=3000
|
||||||
|
|
||||||
# Colors
|
# Colors
|
||||||
RED='\033[0;31m'
|
|
||||||
GREEN='\033[0;32m'
|
GREEN='\033[0;32m'
|
||||||
BLUE='\033[0;34m'
|
BLUE='\033[0;34m'
|
||||||
|
RED='\033[0;31m'
|
||||||
NC='\033[0m' # No Color
|
NC='\033[0m' # No Color
|
||||||
|
|
||||||
# Cleanup function
|
# Cleanup function
|
||||||
cleanup() {
|
cleanup() {
|
||||||
echo -e "\n${RED}Shutting down servers...${NC}"
|
echo -e "\n${RED}Shutting down dev server...${NC}"
|
||||||
kill $PID_INDEX $PID_B $PID_C 2>/dev/null || true
|
pkill -f "marp-cli.*--server" 2>/dev/null || true
|
||||||
exit 0
|
exit 0
|
||||||
}
|
}
|
||||||
|
|
||||||
# Kill existing processes on our ports
|
# Kill existing processes on our port
|
||||||
kill_existing() {
|
kill_existing() {
|
||||||
echo -e "${BLUE}Cleaning up existing processes...${NC}"
|
echo -e "${BLUE}Cleaning up existing processes...${NC}"
|
||||||
# Kill marp processes first
|
|
||||||
pkill -9 -f "marp-cli" 2>/dev/null || true
|
pkill -9 -f "marp-cli" 2>/dev/null || true
|
||||||
pkill -f "python3 -m http.server" 2>/dev/null || true
|
fuser -k $DEV_PORT/tcp 2>/dev/null || true
|
||||||
# Kill ports including marp's WebSocket ports (37717-37720 range)
|
sleep 1
|
||||||
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'
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="de">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
||||||
<title>HdM Slides - Dev</title>
|
|
||||||
<style>
|
|
||||||
*{box-sizing:border-box;margin:0;padding:0}
|
|
||||||
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;max-width:720px;margin:0 auto;padding:3rem 1.5rem;background:#fafafa;color:#1d1d1f;line-height:1.5}
|
|
||||||
h1{font-size:2rem;font-weight:600;letter-spacing:-0.02em;margin-bottom:.5rem}
|
|
||||||
.subtitle{color:#86868b;font-size:1rem}
|
|
||||||
.courses{margin-top:2rem;display:flex;flex-direction:column;gap:.75rem}
|
|
||||||
a.course{display:block;background:#fff;border-radius:12px;padding:1.5rem;text-decoration:none;color:inherit;box-shadow:0 1px 3px rgba(0,0,0,0.08);transition:all .2s ease;cursor:pointer}
|
|
||||||
a.course:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.12)}
|
|
||||||
.course-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
|
|
||||||
.course-b .course-label{color:#1e5f8a}
|
|
||||||
.course-c .course-label{color:#d63384}
|
|
||||||
.course-title{font-size:1.15rem;font-weight:500;color:#1d1d1f;margin:.25rem 0}
|
|
||||||
.course-info{font-size:.85rem;color:#86868b}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>HdM Slides</h1>
|
|
||||||
<p class="subtitle">Development Server</p>
|
|
||||||
<div class="courses">
|
|
||||||
EOF
|
|
||||||
echo " <a class=\"course course-b\" href=\"http://localhost:$COURSE_B_PORT\"><span class=\"course-label\">223015b</span><div class=\"course-title\">Dateiformate, Schnittstellen, Speichermedien & Distributionswege</div><span class=\"course-info\">Port $COURSE_B_PORT</span></a>" >> "$DEV_INDEX_DIR/index.html"
|
|
||||||
echo " <a class=\"course course-c\" href=\"http://localhost:$COURSE_C_PORT\"><span class=\"course-label\">223015c</span><div class=\"course-title\">Grundlagen IT- und Internettechnik</div><span class=\"course-info\">Port $COURSE_C_PORT</span></a>" >> "$DEV_INDEX_DIR/index.html"
|
|
||||||
cat >> "$DEV_INDEX_DIR/index.html" << 'EOF'
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
EOF
|
|
||||||
}
|
}
|
||||||
|
|
||||||
# Main
|
# Main
|
||||||
trap cleanup SIGINT SIGTERM
|
trap cleanup SIGINT SIGTERM
|
||||||
|
|
||||||
kill_existing
|
kill_existing
|
||||||
generate_index
|
|
||||||
|
|
||||||
echo -e "${GREEN}Starting development servers...${NC}"
|
echo -e "${GREEN}Starting development server...${NC}"
|
||||||
echo ""
|
echo ""
|
||||||
echo -e " Index: ${BLUE}http://localhost:$INDEX_PORT${NC}"
|
echo -e " Server: ${BLUE}http://localhost:$DEV_PORT${NC}"
|
||||||
echo -e " 223015b: ${BLUE}http://localhost:$COURSE_B_PORT${NC}"
|
echo -e " Slides: ${BLUE}$SLIDES_DIR/${NC}"
|
||||||
echo -e " 223015c: ${BLUE}http://localhost:$COURSE_C_PORT${NC}"
|
|
||||||
echo ""
|
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 ""
|
echo ""
|
||||||
|
|
||||||
# Start servers
|
# Start single Marp server for all slides
|
||||||
python3 -m http.server $INDEX_PORT --directory "$DEV_INDEX_DIR" &
|
PORT=$DEV_PORT npx @marp-team/marp-cli --server "$SLIDES_DIR/"
|
||||||
PID_INDEX=$!
|
|
||||||
|
|
||||||
PORT=$COURSE_B_PORT npx @marp-team/marp-cli --server "$SLIDES_DIR/223015b/" &
|
# Wait for process to exit
|
||||||
PID_B=$!
|
wait
|
||||||
|
|
||||||
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
|
|
||||||
@@ -1,19 +1,19 @@
|
|||||||
#!/usr/bin/env bash
|
#!/usr/bin/env bash
|
||||||
# Extract klausur-relevant slides from all kapitel
|
# Extract klausur-relevant slides from all kapitel
|
||||||
# Usage: ./extract-klausur.sh <course_id>
|
# Usage: ./extract-klausur.sh <course_id>
|
||||||
# Output: slides/<course>/klausur.md
|
# Output: slides/<course>/klausurfolien.md
|
||||||
|
|
||||||
set -e
|
set -e
|
||||||
|
|
||||||
COURSE="${1:-223015b}"
|
COURSE="${1:-223015b}"
|
||||||
SLIDES_DIR="slides/$COURSE"
|
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
|
# Find the first kapitel file (00-intro.md or 01-*.md) to copy styles from
|
||||||
FIRST_KAPITEL=$(ls "$SLIDES_DIR"/01-*.md 2>/dev/null | head -1)
|
FIRST_KAPITEL=$(ls "$SLIDES_DIR"/00-intro.md "$SLIDES_DIR"/01-*.md 2>/dev/null | head -1)
|
||||||
|
|
||||||
if [[ -z "$FIRST_KAPITEL" ]]; then
|
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
|
exit 1
|
||||||
fi
|
fi
|
||||||
|
|
||||||
@@ -57,7 +57,7 @@ awk '
|
|||||||
' "$FIRST_KAPITEL" >> "$OUTPUT_FILE"
|
' "$FIRST_KAPITEL" >> "$OUTPUT_FILE"
|
||||||
|
|
||||||
# Process each kapitel file in order - extract klausur slides only
|
# 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")
|
filename=$(basename "$md_file")
|
||||||
kapitel_num=$(echo "$filename" | grep -oE '^[0-9]+' | sed 's/^0*//')
|
kapitel_num=$(echo "$filename" | grep -oE '^[0-9]+' | sed 's/^0*//')
|
||||||
|
|
||||||
|
|||||||
@@ -246,19 +246,19 @@ for html in $(ls "$BUILD_DIR"/[0-9][0-9]-*.html 2>/dev/null | sort); do
|
|||||||
LINK
|
LINK
|
||||||
done
|
done
|
||||||
|
|
||||||
# Add klausur entry if it exists
|
# Add klausurfolien entry if it exists
|
||||||
if [[ -f "$BUILD_DIR/klausur.html" ]]; then
|
if [[ -f "$BUILD_DIR/klausurfolien.html" ]]; then
|
||||||
pdf_link=""
|
pdf_link=""
|
||||||
if [[ -f "$BUILD_DIR/klausur.pdf" ]]; then
|
if [[ -f "$BUILD_DIR/klausurfolien.pdf" ]]; then
|
||||||
pdf_link="<a href=\"klausur.pdf\" class=\"btn btn-pdf\">PDF</a>"
|
pdf_link="<a href=\"klausurfolien.pdf\" class=\"btn btn-pdf\">PDF</a>"
|
||||||
fi
|
fi
|
||||||
cat >> "$BUILD_DIR/index.html" << KLAUSUR
|
cat >> "$BUILD_DIR/index.html" << KLAUSUR
|
||||||
<div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
|
<div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
|
||||||
<a href="klausur.html" class="kapitel-link">
|
<a href="klausurfolien.html" class="kapitel-link">
|
||||||
<div class="kapitel-label">Prüfung</div>
|
<div class="kapitel-label">Prüfung</div>
|
||||||
<div class="kapitel-title">Klausurrelevante Folien</div>
|
<div class="kapitel-title">Klausurrelevante Folien</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="klausur.html" class="btn btn-slides">Folien</a>
|
<a href="klausurfolien.html" class="btn btn-slides">Folien</a>
|
||||||
$pdf_link
|
$pdf_link
|
||||||
</div>
|
</div>
|
||||||
KLAUSUR
|
KLAUSUR
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -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
|
|
||||||
---
|
|
||||||
<style>
|
|
||||||
:root {
|
|
||||||
--color-foreground: #1a1a2e;
|
|
||||||
--color-highlight: #1e5f8a;
|
|
||||||
--color-dimmed: #4a4a6a;
|
|
||||||
}
|
|
||||||
section.invert {
|
|
||||||
--color-foreground: #fff;
|
|
||||||
}
|
|
||||||
section {
|
|
||||||
font-size: 1.7rem;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
color: #1e5f8a;
|
|
||||||
}
|
|
||||||
section.invert h1 {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
color: #1f2937;
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
background: #0f0f23;
|
|
||||||
color: #5fb3e4;
|
|
||||||
border-radius: 8px;
|
|
||||||
border-left: 3px solid #1e5f8a;
|
|
||||||
}
|
|
||||||
pre code {
|
|
||||||
background: transparent;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
background: #1a1a2e;
|
|
||||||
color: #5fb3e4;
|
|
||||||
padding: 0.15em 0.4em;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: var(--color-highlight);
|
|
||||||
}
|
|
||||||
section.klausur {
|
|
||||||
background: repeating-linear-gradient(
|
|
||||||
135deg,
|
|
||||||
#e3f2fd,
|
|
||||||
#e3f2fd 40px,
|
|
||||||
#fff 40px,
|
|
||||||
#fff 80px
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
@media print {
|
|
||||||
section.klausur {
|
|
||||||
background: #e3f2fd !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
section.aufgabe {
|
|
||||||
background: #e3f2fd !important;
|
|
||||||
}
|
|
||||||
section.aufgabe footer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
╔═══════════════════════════════════════════════════════════════════╗
|
|
||||||
║ AUTO-GENERATED FILE - DO NOT EDIT MANUALLY ║
|
|
||||||
║ ║
|
|
||||||
║ This file is generated by: make klausur ║
|
|
||||||
║ Source: scripts/extract-klausur.sh ║
|
|
||||||
║ ║
|
|
||||||
║ To update, edit the source slides and re-run make klausur ║
|
|
||||||
╚═══════════════════════════════════════════════════════════════════╝
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!-- _class: invert -->
|
|
||||||
<!-- _header: '' -->
|
|
||||||
<!-- _backgroundColor: #000 -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# 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/)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _header: "" -->
|
|
||||||
<!-- _footer: "" -->
|
|
||||||
|
|
||||||
|
|
||||||
# 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
|
|
||||||
|
|
||||||
<!--
|
|
||||||
REDUNDANZ: Wiederholende Muster kompakter darstellen (z.B. "AAAA" → "4×A")
|
|
||||||
IRRELEVANZ: Für Menschen nicht wahrnehmbar (Psychoakustik, Psychovisuell)
|
|
||||||
|
|
||||||
KLAUSURRELEVANT:
|
|
||||||
- Verlustfrei = Original 1:1 wiederherstellbar
|
|
||||||
- Verlustbehaftet = Information geht verloren, aber kaum wahrnehmbar
|
|
||||||
- Redundanz vs. Irrelevanz ist der Kernunterschied!
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _header: "" -->
|
|
||||||
<!-- _footer: "" -->
|
|
||||||
|
|
||||||
|
|
||||||
# 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 |
|
|
||||||
|
|
||||||
<!--
|
|
||||||
SI-Präfixe (Dezimal): 1 KB = 1.000 Bytes
|
|
||||||
Binär (IEC): 1 KiB = 1.024 Bytes (Kibibyte)
|
|
||||||
Windows zeigt oft binär, sagt aber "KB" → Verwirrung!
|
|
||||||
1 TB Festplatte = ~931 GiB nutzbar
|
|
||||||
|
|
||||||
Eselsbrücke: "Kilo Mega Giga Tera Peta Exa Zetta Yotta"
|
|
||||||
→ "Komm Mit Großem Tee, Peter Exte Zettelt Yachten"
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _header: "" -->
|
|
||||||
<!-- _footer: "" -->
|
|
||||||
|
|
||||||
|
|
||||||
# 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)
|
|
||||||
|
|
||||||
<!--
|
|
||||||
PRÜFUNGSRELEVANT:
|
|
||||||
- Wendepunkt 2002
|
|
||||||
- Speichereinheiten (KB→MB→GB→TB→PB→EB→ZB)
|
|
||||||
- Magnetband als Archivmedium
|
|
||||||
|
|
||||||
QUELLE: Hilbert & López (2011): "The World's Technological Capacity to Store, Communicate, and Compute Information", Science
|
|
||||||
|
|
||||||
METHODIK: 60 analoge + digitale Technologien untersucht (1986-2007)
|
|
||||||
|
|
||||||
WENDEPUNKT 2002: Erstmals mehr digital als analog gespeichert
|
|
||||||
|
|
||||||
ANALOG damals: Bücher, Zeitungen, Vinyl, VHS, Filmrollen, Fotos
|
|
||||||
|
|
||||||
DIGITAL damals: Festplatten, CDs, DVDs, frühe Flash-Speicher
|
|
||||||
|
|
||||||
HEUTE: LTO-9 (2021) speichert 18 TB pro Band, ~$5/TB für Cold Storage
|
|
||||||
|
|
||||||
VERGLEICH: SSD ~$50/TB, HDD ~$15/TB, LTO ~$5/TB
|
|
||||||
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _header: "" -->
|
|
||||||
<!-- _footer: "" -->
|
|
||||||
|
|
||||||
|
|
||||||
# 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
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _header: "" -->
|
|
||||||
<!-- _footer: "" -->
|
|
||||||
|
|
||||||
|
|
||||||
# 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)
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _header: "" -->
|
|
||||||
<!-- _footer: "" -->
|
|
||||||
|
|
||||||
|
|
||||||
# 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
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _header: "" -->
|
|
||||||
<!-- _footer: "" -->
|
|
||||||
|
|
||||||
|
|
||||||
# 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 |
|
|
||||||
|
|
||||||
<!--
|
|
||||||
BERECHNUNG: Breite × Höhe × (Farbtiefe / 8)
|
|
||||||
BEISPIEL: 1920×1080 × 24 Bit = 1920×1080×3 = 6.220.800 Bytes ≈ 6,2 MB
|
|
||||||
|
|
||||||
Farbtiefe erklärt:
|
|
||||||
- 1 Bit: 2^1 = 2 Farben
|
|
||||||
- 8 Bit: 2^8 = 256 Farben
|
|
||||||
- 24 Bit: 2^24 = 16.777.216 Farben (je 8 Bit für R, G, B)
|
|
||||||
- 32 Bit: 24 Bit + 8 Bit Alpha-Kanal
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _header: "" -->
|
|
||||||
<!-- _footer: "" -->
|
|
||||||
|
|
||||||
|
|
||||||
# Vektorgrafiken
|
|
||||||
|
|
||||||
**Speicherung als geometrische Primitive:**
|
|
||||||
- Pfade (Bézierkurven mit Kontrollpunkten)
|
|
||||||
- Grundformen (Rechteck, Ellipse, Polygon)
|
|
||||||
- Text (Glyphen als Outlines)
|
|
||||||
|
|
||||||
**SVG-Beispiel:**
|
|
||||||
```xml
|
|
||||||
<circle cx="50" cy="50" r="40" fill="#ff0000"/>
|
|
||||||
```
|
|
||||||
|
|
||||||
<small>SVG beschreibt nicht jeden einzelnen Pixel im Raster, sondern deklariert wie Farben und Formen gesetzt werden.</small>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Vektorgrafiken beschreiben WAS gezeichnet werden soll.
|
|
||||||
Rastergrafiken beschreiben WIE jeder Pixel aussieht.
|
|
||||||
|
|
||||||
Rendering-Pipeline:
|
|
||||||
Vektordaten → Rasterisierung → Framebuffer → Display
|
|
||||||
|
|
||||||
Beim Skalieren werden einfach die Koordinaten multipliziert.
|
|
||||||
Keine Information geht verloren.
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _header: "" -->
|
|
||||||
<!-- _footer: "" -->
|
|
||||||
|
|
||||||
|
|
||||||
# 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
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Das ist die visuelle Entsprechung zur Psychoakustik.
|
|
||||||
|
|
||||||
Das Auge hat mehr Rezeptoren für Helligkeit (Stäbchen)
|
|
||||||
als für Farbe (Zapfen).
|
|
||||||
|
|
||||||
Hohe Frequenzen = schnelle Wechsel = feine Details
|
|
||||||
Niedrige Frequenzen = langsame Wechsel = große Flächen
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _header: "" -->
|
|
||||||
<!-- _footer: "" -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# 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.
|
|
||||||
|
|
||||||
<!--
|
|
||||||
YCbCr ist wie RGB ein Tripel aus 3 Werten pro Pixel.
|
|
||||||
Der Unterschied: Statt Rot-Grün-Blau speichern wir Helligkeit + 2 Farbdifferenzen.
|
|
||||||
|
|
||||||
Die Umrechnung ist reversibel (mathematische Transformation).
|
|
||||||
Der Clou: Jetzt können wir Helligkeit und Farbe getrennt behandeln.
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _header: "" -->
|
|
||||||
<!-- _footer: "" -->
|
|
||||||
|
|
||||||
|
|
||||||
# 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) |
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Huffman-Coding ist verlustfrei.
|
|
||||||
Der "Code" ist eine Bit-Sequenz, die das Zeichen eindeutig identifiziert.
|
|
||||||
Weil "e" am häufigsten vorkommt, bekommt es den kürzesten Code.
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _header: "" -->
|
|
||||||
<!-- _footer: "" -->
|
|
||||||
|
|
||||||
|
|
||||||
# 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.
|
|
||||||
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Container ≠ Codec
|
|
||||||
Das ist ein häufiges Missverständnis.
|
|
||||||
|
|
||||||
MP4 ist ein Container, nicht ein Codec.
|
|
||||||
Ein MP4 kann H.264, H.265 oder AV1 enthalten.
|
|
||||||
|
|
||||||
Übrigens: JPEG ist ein Codec (für Bilder), kein Container.
|
|
||||||
Bei Bildern fallen Container und Codec oft zusammen.
|
|
||||||
|
|
||||||
Tools wie MediaInfo zeigen beide Informationen.
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _header: "" -->
|
|
||||||
<!-- _footer: "" -->
|
|
||||||
|
|
||||||
|
|
||||||
# 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)
|
|
||||||
|
|
||||||
<!--
|
|
||||||
H.264 revolutionierte Video-Streaming.
|
|
||||||
Ohne H.264 kein Netflix, kein YouTube in HD.
|
|
||||||
|
|
||||||
Hardware-Decoder bedeutet: Kein CPU-Aufwand, kein Akku-Drain.
|
|
||||||
Selbst billige Smartphones können H.264 abspielen.
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _header: "" -->
|
|
||||||
<!-- _footer: "" -->
|
|
||||||
|
|
||||||
|
|
||||||
# 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
|
|
||||||
|
|
||||||
<!--
|
|
||||||
AOM = Alliance for Open Media, gegründet 2015.
|
|
||||||
Historisch: Konkurrierende Tech-Giganten vereint.
|
|
||||||
|
|
||||||
Das Ziel: Nie wieder Patent-Chaos wie bei H.265.
|
|
||||||
|
|
||||||
Problem: Encoding ist sehr langsam (10-100× vs. H.264).
|
|
||||||
Hardware-Encoder lösen das zunehmend.
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _header: "" -->
|
|
||||||
<!-- _footer: "" -->
|
|
||||||
|
|
||||||
|
|
||||||
# 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 Faustregel:
|
|
||||||
- Oft genutzt, schnell gebraucht → SSD
|
|
||||||
- Selten genutzt, viel Kapazität → HDD
|
|
||||||
|
|
||||||
Viele setzen auf beides:
|
|
||||||
Kleine SSD für System + große HDD für Archiv.
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _header: "" -->
|
|
||||||
<!-- _footer: "" -->
|
|
||||||
|
|
||||||
|
|
||||||
# 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)
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Herkunft: Peter Krogh, "The DAM Book" (2005)
|
|
||||||
|
|
||||||
Warum 3 Kopien?
|
|
||||||
- Original kann kaputt gehen
|
|
||||||
- Backup 1 auch
|
|
||||||
- Backup 2 = Sicherheitspuffer
|
|
||||||
|
|
||||||
Warum 2 Medientypen?
|
|
||||||
- Gleiche Medien haben gleiche Schwachstellen
|
|
||||||
- Batch-Fehler bei HDDs derselben Charge
|
|
||||||
|
|
||||||
Warum 1 Offsite?
|
|
||||||
- Brand/Wasserschaden zerstört alles vor Ort
|
|
||||||
- Ransomware verschlüsselt angeschlossene Laufwerke
|
|
||||||
-->
|
|
||||||
458
slides/223015b/klausurfolien.md
Normal file
458
slides/223015b/klausurfolien.md
Normal file
@@ -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
|
||||||
|
---
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--color-foreground: #1a1a2e;
|
||||||
|
--color-highlight: #1e5f8a;
|
||||||
|
--color-dimmed: #4a4a6a;
|
||||||
|
}
|
||||||
|
section.invert {
|
||||||
|
--color-foreground: #fff;
|
||||||
|
}
|
||||||
|
section {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: #1e5f8a;
|
||||||
|
}
|
||||||
|
section.invert h1 {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
background: #0f0f23;
|
||||||
|
color: #5fb3e4;
|
||||||
|
border-radius: 8px;
|
||||||
|
border-left: 3px solid #1e5f8a;
|
||||||
|
}
|
||||||
|
pre code {
|
||||||
|
background: transparent;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
code {
|
||||||
|
background: #1a1a2e;
|
||||||
|
color: #5fb3e4;
|
||||||
|
padding: 0.15em 0.4em;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: var(--color-highlight);
|
||||||
|
}
|
||||||
|
section.klausur {
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
135deg,
|
||||||
|
#e3f2fd,
|
||||||
|
#e3f2fd 40px,
|
||||||
|
#fff 40px,
|
||||||
|
#fff 80px
|
||||||
|
) !important;
|
||||||
|
}
|
||||||
|
@media print {
|
||||||
|
section.klausur {
|
||||||
|
background: #e3f2fd !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
section.aufgabe {
|
||||||
|
background: #e3f2fd !important;
|
||||||
|
}
|
||||||
|
section.aufgabe footer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
╔═══════════════════════════════════════════════════════════════════╗
|
||||||
|
║ AUTO-GENERATED FILE - DO NOT EDIT MANUALLY ║
|
||||||
|
║ ║
|
||||||
|
║ This file is generated by: make klausur ║
|
||||||
|
║ Source: scripts/extract-klausur.sh ║
|
||||||
|
║ ║
|
||||||
|
║ To update, edit the source slides and re-run make klausur ║
|
||||||
|
╚═══════════════════════════════════════════════════════════════════╝
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- _class: invert -->
|
||||||
|
<!-- _header: '' -->
|
||||||
|
<!-- _backgroundColor: #000 -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# 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/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- _header: "" -->
|
||||||
|
<!-- _footer: "" -->
|
||||||
|
|
||||||
|
|
||||||
|
# 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 |
|
||||||
|
|
||||||
|
<!--
|
||||||
|
KLAUSURRELEVANT:
|
||||||
|
- Formel: Breite × Höhe × (Farbtiefe / 8) = Bytes
|
||||||
|
- Beispielrechnung: 1920 × 1080 × 3 = 6.220.800 Bytes ≈ 6,2 MB
|
||||||
|
- Farbtiefe: 2^n Farben bei n Bit
|
||||||
|
- 24 Bit = 8 Bit pro Kanal (R, G, B)
|
||||||
|
- 32 Bit = 24 Bit + 8 Bit Alpha (Transparenz)
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- _header: "" -->
|
||||||
|
<!-- _footer: "" -->
|
||||||
|
|
||||||
|
|
||||||
|
# Vektorgrafiken
|
||||||
|
|
||||||
|
**Speicherung als geometrische Primitive:**
|
||||||
|
- Pfade (Bézierkurven mit Kontrollpunkten)
|
||||||
|
- Grundformen (Rechteck, Ellipse, Polygon)
|
||||||
|
- Text (Glyphen als Outlines)
|
||||||
|
|
||||||
|
**SVG-Beispiel:**
|
||||||
|
```xml
|
||||||
|
<circle cx="50" cy="50" r="40" fill="#ff0000"/>
|
||||||
|
```
|
||||||
|
|
||||||
|
<small>SVG beschreibt WAS gezeichnet werden soll, nicht WIE jeder Pixel aussieht.</small>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
KLAUSURRELEVANT:
|
||||||
|
- Vektor = Beschreibung (deklarativ)
|
||||||
|
- Raster = Pixel für Pixel (imperativ)
|
||||||
|
- Rendering-Pipeline: Vektordaten → Rasterisierung → Display
|
||||||
|
- Skalierung = Koordinaten multiplizieren → keine Information geht verloren
|
||||||
|
- SVG = Scalable Vector Graphics (Web-Standard)
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- _header: "" -->
|
||||||
|
<!-- _footer: "" -->
|
||||||
|
|
||||||
|
|
||||||
|
# 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
|
||||||
|
|
||||||
|
<!--
|
||||||
|
KLAUSURRELEVANT:
|
||||||
|
- Mehr Stäbchen (Helligkeit) als Zapfen (Farbe) im Auge
|
||||||
|
- "Frequenz" = räumliche Frequenz = wie schnell ändert sich Helligkeit?
|
||||||
|
- Niedrig = langsame Änderung = große gleichmäßige Fläche
|
||||||
|
- Hoch = schnelle Änderung = feine Details, Kanten
|
||||||
|
- Analogie zur Psychoakustik bei MP3 (letztes Mal)
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- _header: "" -->
|
||||||
|
<!-- _footer: "" -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# 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
|
||||||
|
|
||||||
|
<!--
|
||||||
|
KLAUSURRELEVANT:
|
||||||
|
- YCbCr = auch 3 Werte pro Pixel, aber anders organisiert
|
||||||
|
- Statt R-G-B: Helligkeit + 2 Farbdifferenzen
|
||||||
|
- Umrechnung ist reversibel (mathematische Transformation)
|
||||||
|
- Vorteil: Helligkeit und Farbe getrennt behandelbar
|
||||||
|
- Bild zeigt: Y (oben), Cb (Mitte), Cr (unten)
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- _header: "" -->
|
||||||
|
<!-- _footer: "" -->
|
||||||
|
|
||||||
|
|
||||||
|
# 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) |
|
||||||
|
|
||||||
|
<!--
|
||||||
|
KLAUSURRELEVANT:
|
||||||
|
- Huffman = verlustfrei, optimal für bekannte Häufigkeiten
|
||||||
|
- Präfix-frei: Kein Code ist Anfang eines anderen
|
||||||
|
- Häufigstes Zeichen = kürzester Code
|
||||||
|
- Auch in ZIP, PNG, MP3 verwendet
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- _header: "" -->
|
||||||
|
<!-- _footer: "" -->
|
||||||
|
|
||||||
|
<!--
|
||||||
|
# Huffman-Coding: Beispiel
|
||||||
|
|
||||||
|
**Originaltext:** `ABRACADABRA` (11 Zeichen × 8 Bit = 88 Bit)
|
||||||
|
|
||||||
|
**Häufigkeitsanalyse:**
|
||||||
|
A=5, B=2, R=2, C=1, D=1
|
||||||
|
|
||||||
|
**Huffman-Baum → Codes:**
|
||||||
|
| Zeichen | Häufigkeit | Code |
|
||||||
|
|---------|------------|------|
|
||||||
|
| A | 5 | `0` |
|
||||||
|
| B | 2 | `10` |
|
||||||
|
| R | 2 | `110` |
|
||||||
|
| C | 1 | `1110` |
|
||||||
|
| D | 1 | `1111` |
|
||||||
|
|
||||||
|
**Codiert:** `0 10 110 0 1110 0 1111 0 10 110 0` = **23 Bit**
|
||||||
|
**Kompression:** 88 → 23 Bit = **74% gespart**
|
||||||
|
|
||||||
|
|
||||||
|
- Beispiel Schritt für Schritt durchrechnen
|
||||||
|
- Warum funktioniert's? A kommt 5× vor, bekommt kürzesten Code
|
||||||
|
- Präfix-Eigenschaft: Kein Code ist Anfang eines anderen → eindeutig dekodierbar
|
||||||
|
- Frage: "Was passiert, wenn alle Zeichen gleich häufig sind?" → Keine Ersparnis
|
||||||
|
- In JPEG: Nicht Buchstaben, sondern DCT-Koeffizienten werden so codiert
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- _header: "" -->
|
||||||
|
<!-- _footer: "" -->
|
||||||
|
|
||||||
|
|
||||||
|
# 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
|
||||||
|
|
||||||
|
<!--
|
||||||
|
KLAUSURRELEVANT:
|
||||||
|
- WebP: VP8-Kompression (Google Video-Codec)
|
||||||
|
- AVIF: Alliance for Open Media (Google, Netflix, Amazon, Apple, Mozilla)
|
||||||
|
- Beide besser als JPEG, aber Kompatibilität bleibt Problem
|
||||||
|
- JPEG bleibt dominant: alte Kameras, Software, Workflows
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- _header: "" -->
|
||||||
|
<!-- _footer: "" -->
|
||||||
|
|
||||||
|
|
||||||
|
# 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
|
||||||
|
|
||||||
|
<!--
|
||||||
|
KLAUSURRELEVANT:
|
||||||
|
- Container ≠ Codec (häufiges Missverständnis!)
|
||||||
|
- MP4 kann H.264, H.265 oder AV1 enthalten
|
||||||
|
- Gleiche Endung, unterschiedlicher Inhalt
|
||||||
|
- Tool-Tipp: MediaInfo zeigt beides an
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- _header: "" -->
|
||||||
|
<!-- _footer: "" -->
|
||||||
|
|
||||||
|
|
||||||
|
# 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)
|
||||||
|
|
||||||
|
<!--
|
||||||
|
KLAUSURRELEVANT:
|
||||||
|
- H.264 revolutionierte Video-Streaming
|
||||||
|
- Ohne H.264 kein Netflix, kein YouTube HD
|
||||||
|
- Hardware-Decoder = kein CPU-Aufwand, kein Akku-Drain
|
||||||
|
- Selbst billigste Smartphones können H.264 abspielen
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- _header: "" -->
|
||||||
|
<!-- _footer: "" -->
|
||||||
|
|
||||||
|
|
||||||
|
# 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
|
||||||
|
|
||||||
|
<!--
|
||||||
|
KLAUSURRELEVANT:
|
||||||
|
- AOM gegründet 2015 – historisch: Konkurrenten vereint
|
||||||
|
- Ziel: Nie wieder Patent-Chaos wie bei H.265
|
||||||
|
- Problem: Encoding sehr langsam (10–100× vs. H.264)
|
||||||
|
- Hardware-Encoder lösen das zunehmend
|
||||||
|
- AV1 gewann 2024 einen Emmy für technische Innovation
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- _header: "" -->
|
||||||
|
<!-- _footer: "" -->
|
||||||
|
|
||||||
|
|
||||||
|
# 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 Faustregel:
|
||||||
|
- Oft genutzt, schnell gebraucht → SSD
|
||||||
|
- Selten genutzt, viel Kapazität → HDD
|
||||||
|
|
||||||
|
Viele setzen auf beides:
|
||||||
|
Kleine SSD für System + große HDD für Archiv.
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- _header: "" -->
|
||||||
|
<!-- _footer: "" -->
|
||||||
|
|
||||||
|
|
||||||
|
# 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)
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Herkunft: Peter Krogh, "The DAM Book" (2005)
|
||||||
|
|
||||||
|
Warum 3 Kopien?
|
||||||
|
- Original kann kaputt gehen
|
||||||
|
- Backup 1 auch
|
||||||
|
- Backup 2 = Sicherheitspuffer
|
||||||
|
|
||||||
|
Warum 2 Medientypen?
|
||||||
|
- Gleiche Medien haben gleiche Schwachstellen
|
||||||
|
- Batch-Fehler bei HDDs derselben Charge
|
||||||
|
|
||||||
|
Warum 1 Offsite?
|
||||||
|
- Brand/Wasserschaden zerstört alles vor Ort
|
||||||
|
- Ransomware verschlüsselt angeschlossene Laufwerke
|
||||||
|
-->
|
||||||
Reference in New Issue
Block a user