From e93f3942638b51da29357abb0c3252e71f89122e Mon Sep 17 00:00:00 2001 From: overcuriousity Date: Wed, 13 Aug 2025 15:10:20 +0200 Subject: [PATCH] update readme files --- README.md | 16 ++ public/videos/README.md | 408 +++++++++++++++++++++++++++++++++++++++- src/content/README.md | 229 +++++++++++++++++++--- 3 files changed, 628 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index f45841d..030d94d 100644 --- a/README.md +++ b/README.md @@ -250,10 +250,26 @@ Ihr Artikel-Inhalt hier... 2. Installer ausführen 3. Einstellungen konfigurieren +## Video-Demonstration + + ## Häufige Probleme Lösungen für typische Probleme... ``` +### Video-Integration + +Knowledgebase-Artikel unterstützen eingebettete Videos für praktische Demonstrationen: + +```html + +``` + +**Wichtige Hinweise**: +- Videos müssen manuell in `public/videos/` bereitgestellt werden (nicht im Git-Repository enthalten) +- Firefox-kompatible Formate verwenden (MP4 H.264, WebM VP9) +- Detaillierte Video-Dokumentation: siehe `src/content/knowledgebase/README.md` + ### Artikel-Struktur-Richtlinien **Erforderliche Felder**: diff --git a/public/videos/README.md b/public/videos/README.md index 172356e..be5810f 100644 --- a/public/videos/README.md +++ b/public/videos/README.md @@ -1,5 +1,405 @@ -# Manuell hinzufügen +# Video-Bereitstellung für ForensicPathways Knowledgebase -Hier müssen Videos, die eingebettet werden sollen, manuell abgespeichert werden. -Da diese anders lizensiert sein können, sind sie nicht Bestandteil des Open-Source-Repositorys. -Bei Bedarf bitte Kontakt aufnehmen mit mstoeck3@hs-mittweida.de. \ No newline at end of file +Videos müssen manuell in diesem Verzeichnis bereitgestellt werden, da sie aufgrund unterschiedlicher Lizenzierung nicht Bestandteil des Open-Source-Git-Repositorys sind. + +## 🎥 Video-Quelle und Lizenzierung + +**Video-Quelle:** https://cloud.cc24.dev/f/47971 (Interner Nextcloud-Share) +**Kontakt bei Fragen:** mstoeck3@hs-mittweida.de + +### Lizenzhinweise + +- Videos können proprietäre Lizenzen haben +- Nicht für öffentliche Redistribution geeignet +- Nur für den internen Gebrauch in ForensicPathways +- Urheberrechte beachten bei eigenen Video-Beiträgen + +## 📁 Empfohlene Verzeichnisstruktur + +``` +public/videos/ +├── tools/ # Tool-spezifische Tutorials +│ ├── autopsy/ +│ │ ├── autopsy-installation.mp4 +│ │ ├── autopsy-basics.mp4 +│ │ └── autopsy-advanced-analysis.webm +│ ├── volatility/ +│ │ ├── volatility-setup.mp4 +│ │ ├── volatility-pslist-demo.mp4 +│ │ └── volatility-malfind-tutorial.webm +│ └── yara/ +│ ├── yara-rules-basics.mp4 +│ └── yara-advanced-hunting.mp4 +├── methods/ # Methodologie-Videos +│ ├── timeline-analysis/ +│ │ ├── timeline-fundamentals.mp4 +│ │ └── timeline-correlation.webm +│ ├── disk-imaging/ +│ │ ├── imaging-best-practices.mp4 +│ │ └── imaging-verification.mp4 +│ └── incident-response/ +│ ├── ir-methodology.mp4 +│ └── ir-documentation.webm +├── concepts/ # Konzeptuelle Erklärungen +│ ├── forensics-fundamentals/ +│ │ ├── hash-functions-explained.mp4 +│ │ ├── chain-of-custody.mp4 +│ │ └── evidence-handling.webm +│ └── technical-concepts/ +│ ├── regex-patterns.mp4 +│ └── file-systems.webm +└── shared/ # Übergreifende Inhalte + ├── nist-methodology.mp4 + ├── legal-considerations.webm + └── best-practices-overview.mp4 +``` + +## 🦊 Firefox-Kompatibilität (KRITISCH) + +### **Wichtiger Hinweis** +Videos **müssen** in Firefox-kompatiblen Formaten bereitgestellt werden, da das System automatische Firefox-Unterstützung implementiert. Nicht-kompatible Formate führen zu Fehlern! + +### Unterstützte Formate + +#### ✅ Empfohlene Formate (höchste Kompatibilität) + +**MP4 (H.264/AVC + AAC):** +```bash +# Konvertierung mit ffmpeg +ffmpeg -i input.mov \ + -c:v libx264 \ + -c:a aac \ + -profile:v baseline \ + -level 3.0 \ + -movflags +faststart \ + output.mp4 +``` + +**WebM (VP8/VP9 + Vorbis/Opus):** +```bash +# VP9 für beste Qualität +ffmpeg -i input.mov \ + -c:v libvpx-vp9 \ + -c:a libopus \ + -b:v 1M \ + -b:a 128k \ + output.webm + +# VP8 für breitere Kompatibilität +ffmpeg -i input.mov \ + -c:v libvpx \ + -c:a libvorbis \ + -b:v 1M \ + -b:a 128k \ + output.webm +``` + +#### ⚠️ Fallback-Format + +**OGG Theora (für ältere Firefox-Versionen):** +```bash +ffmpeg -i input.mov \ + -c:v libtheora \ + -c:a libvorbis \ + -b:v 1M \ + -b:a 128k \ + output.ogv +``` + +### ❌ Nicht unterstützte Formate in Firefox + +- **H.265/HEVC** (.mp4, .mov) - Wird nicht dekodiert +- **AV1** (.mp4, .webm) - Eingeschränkte Unterstützung +- **Proprietäre Codecs** (.wmv, .avi mit proprietären Codecs) +- **Apple-spezifische Formate** (.mov mit ProRes, .m4v) + +### Multi-Format-Bereitstellung + +Für maximale Kompatibilität mehrere Formate bereitstellen: + +```html + +``` + +## 🔧 Video-Konvertierung und -Optimierung + +### Qualitätsrichtlinien + +#### Auflösung und Bitrate + +**720p (empfohlen für Tutorials):** +```bash +ffmpeg -i input.mov \ + -vf scale=1280:720 \ + -c:v libx264 \ + -b:v 2M \ + -c:a aac \ + -b:a 128k \ + output.mp4 +``` + +**1080p (für detaillierte Demonstrationen):** +```bash +ffmpeg -i input.mov \ + -vf scale=1920:1080 \ + -c:v libx264 \ + -b:v 4M \ + -c:a aac \ + -b:a 128k \ + output.mp4 +``` + +**480p (mobile-optimiert):** +```bash +ffmpeg -i input.mov \ + -vf scale=854:480 \ + -c:v libx264 \ + -b:v 1M \ + -c:a aac \ + -b:a 96k \ + output.mp4 +``` + +### Optimierung für Web-Streaming + +#### Fast Start für progressive Download +```bash +# Metadata an Dateianfang verschieben +ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4 +``` + +#### Keyframe-Intervall optimieren +```bash +# Keyframes alle 2 Sekunden für bessere Suche +ffmpeg -i input.mov \ + -c:v libx264 \ + -g 60 \ + -keyint_min 60 \ + -sc_threshold 0 \ + output.mp4 +``` + +### Batch-Konvertierung + +**Alle Videos in einem Verzeichnis konvertieren:** +```bash +#!/bin/bash +# convert-all.sh +for file in *.mov *.avi *.mkv; do + if [ -f "$file" ]; then + name=$(basename "$file" | cut -d. -f1) + + # MP4 erstellen + ffmpeg -i "$file" \ + -c:v libx264 \ + -c:a aac \ + -b:v 2M \ + -b:a 128k \ + -movflags +faststart \ + "${name}.mp4" + + # WebM erstellen + ffmpeg -i "$file" \ + -c:v libvpx-vp9 \ + -c:a libopus \ + -b:v 1.5M \ + -b:a 128k \ + "${name}.webm" + fi +done +``` + +## 📊 Dateigröße und Performance + +### Größenrichtlinien + +**Streaming-optimiert:** +- 720p: 5-15 MB/Minute +- 1080p: 20-40 MB/Minute +- 480p: 2-8 MB/Minute + +**Maximale Dateigröße:** +- Tutorial-Videos: < 100 MB +- Kurze Demos: < 50 MB +- Konzept-Erklärungen: < 30 MB + +### Kompressionseinstellungen + +**Ausgewogene Qualität/Größe:** +```bash +ffmpeg -i input.mov \ + -c:v libx264 \ + -preset medium \ + -crf 23 \ + -c:a aac \ + -b:a 128k \ + output.mp4 +``` + +**Hohe Kompression (kleinere Dateien):** +```bash +ffmpeg -i input.mov \ + -c:v libx264 \ + -preset slow \ + -crf 28 \ + -c:a aac \ + -b:a 96k \ + output.mp4 +``` + +## 🎬 Video-Thumbnail-Generierung + +Automatische Thumbnail-Erstellung: + +```bash +# Thumbnail nach 10 Sekunden +ffmpeg -i input.mp4 -ss 00:00:10 -vframes 1 -q:v 2 thumbnail.jpg + +# Mehrere Thumbnails für Auswahl +ffmpeg -i input.mp4 -vf fps=1/30 thumb_%03d.jpg +``` + +Thumbnails speichern in: +``` +public/images/video-thumbnails/ +├── autopsy-installation-thumb.jpg +├── volatility-basics-thumb.jpg +└── timeline-analysis-thumb.jpg +``` + +## 🔍 Qualitätskontrolle + +### Pre-Upload-Checkliste + +**✅ Format-Kompatibilität:** +- [ ] MP4 mit H.264/AVC Video-Codec +- [ ] AAC Audio-Codec +- [ ] Fast Start aktiviert (`movflags +faststart`) +- [ ] Keyframe-Intervall ≤ 2 Sekunden + +**✅ Firefox-Test:** +- [ ] Video lädt in Firefox ohne Fehler +- [ ] Audio synchron mit Video +- [ ] Controls funktionieren +- [ ] Seeking funktioniert flüssig + +**✅ Technische Qualität:** +- [ ] Auflösung angemessen (720p+ für GUI-Demos) +- [ ] Audio klar und verständlich +- [ ] Keine Kompressionsartefakte +- [ ] Dateigröße < 100 MB + +**✅ Inhaltliche Qualität:** +- [ ] Beschreibender Dateiname +- [ ] Angemessene Länge (< 10 Minuten für Tutorials) +- [ ] Klare Demonstration der Funktionalität +- [ ] Sichtbare UI-Elemente + +### Automated Testing + +```bash +#!/bin/bash +# video-check.sh - Basis-Validierung +for video in public/videos/**/*.mp4; do + echo "Checking: $video" + + # Format prüfen + format=$(ffprobe -v quiet -select_streams v:0 -show_entries stream=codec_name -of csv=p=0 "$video") + if [ "$format" != "h264" ]; then + echo "❌ Wrong codec: $format (should be h264)" + fi + + # Dateigröße prüfen + size=$(stat -c%s "$video") + if [ $size -gt 104857600 ]; then # 100MB + echo "⚠️ Large file: $(($size / 1048576))MB" + fi + + echo "✅ $video validated" +done +``` + +## 🚨 Troubleshooting + +### Häufige Firefox-Probleme + +**Problem: Video lädt nicht** +``` +Lösung: +1. Codec überprüfen: ffprobe -v quiet -show_format -show_streams video.mp4 +2. Fallback-Format hinzufügen +3. Fast Start aktivieren +``` + +**Problem: Audio/Video out of sync** +``` +Lösung: +ffmpeg -i input.mp4 -c:v copy -c:a aac -avoid_negative_ts make_zero output.mp4 +``` + +**Problem: Seeking funktioniert nicht** +``` +Lösung: +ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4 +``` + +### Performance-Probleme + +**Problem: Lange Ladezeiten** +``` +Lösungsansätze: +1. Bitrate reduzieren +2. Auflösung verringern +3. Keyframe-Intervall optimieren +4. Progressive Download aktivieren +``` + +**Problem: Hohe Bandbreiten-Nutzung** +``` +Lösungsansätze: +1. Adaptive Streaming implementieren +2. Multiple Qualitätsstufen bereitstellen +3. Preload="metadata" verwenden +``` + +## 📋 Deployment-Checkliste + +**Nach Video-Upload:** + +1. **✅ Dateistruktur prüfen** + ```bash + ls -la public/videos/tools/autopsy/ + ``` + +2. **✅ Permissions setzen** + ```bash + chmod 644 public/videos/**/*.mp4 + ``` + +3. **✅ Artikel-Verlinkung testen** + - Video-Tags in Markdown funktionieren + - Responsive Container werden generiert + - Thumbnails laden korrekt + +4. **✅ Browser-Kompatibilität** + - Firefox: Codec-Support prüfen + - Chrome: Performance testen + - Safari: Fallback-Formate testen + - Mobile: Touch-Controls funktionieren + +5. **✅ Build-System** + ```bash + npm run build + # Keine Video-bezogenen Fehler in Console + ``` + +Bei Problemen kontaktieren Sie mstoeck3@hs-mittweida.de mit: +- Browser und Version +- Video-Dateiname und -pfad +- Fehlermeldungen aus Browser-Console +- Screenshot des Problems \ No newline at end of file diff --git a/src/content/README.md b/src/content/README.md index 379e3d1..8ff0684 100644 --- a/src/content/README.md +++ b/src/content/README.md @@ -121,9 +121,9 @@ vol -f memory.dmp windows.info vol -f memory.dmp windows.pslist ``` -## Video-Einbindung +## Video-Demonstration - + ## Weiterführende Links @@ -143,20 +143,181 @@ vol -f memory.dmp windows.pslist ### Video-Einbindung -Videos können direkt in Markdown eingebettet werden: +Videos können direkt in Markdown eingebettet werden und werden automatisch mit responsiven Containern erweitert: + +#### Basis-Video-Einbindung ```html - + ``` -Unterstützte Attribute: -- `src`: Pfad zur Videodatei -- `title`: Titel für Metadaten -- `controls`: Zeigt Player-Steuerung -- `autoplay`: Automatisches Abspielen -- `muted`: Stummgeschaltet +#### Vollständige Video-Konfiguration + +```html + +``` + +#### Unterstützte Video-Attribute + +**Basis-Attribute:** +- `src`: **Erforderlich** - Pfad zur Videodatei (relativ zu `/public/`) +- `title`: **Empfohlen** - Beschreibung für Metadaten und Accessibility +- `controls`: Zeigt Player-Steuerung (Standard-Empfehlung) + +**Erweiterte Attribute:** +- `autoplay`: Automatisches Abspielen (nicht empfohlen für UX) +- `muted`: Stummgeschaltet (erforderlich für Autoplay in den meisten Browsern) - `loop`: Endlosschleife -- `preload`: "none", "metadata", "auto" +- `preload`: `"none"` | `"metadata"` | `"auto"` (Standard: `"metadata"`) +- `poster`: Vorschaubild-URL +- `width`/`height`: Feste Dimensionen (Optional, responsive Container anpasst sich automatisch) + +**Accessibility-Attribute:** +- `aria-label`: Alternative Beschreibung +- `aria-describedby`: ID eines Elements mit detaillierter Beschreibung + +#### iframe-Einbindung (YouTube, Vimeo, etc.) + +```html + +``` + +**iframe-Attribute:** +- `src`: **Erforderlich** - Embed-URL des Video-Dienstes +- `title`: **Erforderlich** - Beschreibung für Accessibility +- `width`/`height`: Empfohlene Dimensionen (werden responsive angepasst) +- `frameborder`: Auf `"0"` setzen für modernen Look +- `allowfullscreen`: Vollbild-Modus erlauben +- `loading`: `"lazy"` für Performance-Optimierung + +### Automatische Video-Verarbeitung + +Das System erweitert Video-Tags automatisch: + +**Input:** +```html + +``` + +**Output (automatisch generiert):** +```html +
+ +
+
Demo
+
+
+``` + +### Firefox-Kompatibilität + +**Wichtiger Hinweis:** Videos müssen in Firefox-kompatiblen Formaten bereitgestellt werden: + +#### Empfohlene Formate + +**Primäre Formate (höchste Kompatibilität):** +- **MP4 (H.264/AVC)**: `.mp4` - Beste Kompatibilität across Browser +- **WebM (VP8/VP9)**: `.webm` - Moderne Browser, gute Kompression + +**Sekundäre Formate:** +- **OGG Theora**: `.ogv` - Fallback für ältere Firefox-Versionen + +#### Format-Konvertierung + +```bash +# Mit ffmpeg zu Firefox-kompatiblem MP4 konvertieren +ffmpeg -i input.mov -c:v libx264 -c:a aac -movflags +faststart output.mp4 + +# Mit ffmpeg zu WebM konvertieren +ffmpeg -i input.mov -c:v libvpx-vp9 -c:a libvorbis output.webm + +# Multi-Format-Bereitstellung + +``` + +#### Firefox-spezifische Probleme + +Das System erkennt automatisch Firefox und implementiert Error-Recovery: + +- **Automatische Fehlererkennung** für nicht unterstützte Formate +- **Fallback-Mechanismen** bei Codec-Problemen +- **Erweiterte Logging** für Debugging + +**Bekannte Firefox-Probleme:** +- H.265/HEVC nicht unterstützt +- Proprietäre Codecs teilweise eingeschränkt +- MIME-Type-Sensitivität höher als bei Chrome + +### Video-Datei-Management + +#### Dateistruktur + +``` +public/ +├── videos/ +│ ├── tools/ +│ │ ├── autopsy-basics.mp4 +│ │ ├── volatility-tutorial.webm +│ │ └── yara-rules-demo.mp4 +│ ├── methods/ +│ │ ├── timeline-analysis.mp4 +│ │ └── disk-imaging.mp4 +│ └── concepts/ +│ ├── hash-functions.mp4 +│ └── chain-custody.mp4 +└── images/ + └── video-thumbnails/ + ├── autopsy-thumb.jpg + └── volatility-thumb.jpg +``` + +#### Dateigröße-Empfehlungen + +- **Streaming-Qualität**: 5-15 MB/Minute (720p) +- **High-Quality Tutorials**: 20-40 MB/Minute (1080p) +- **Mobile-Optimiert**: 2-8 MB/Minute (480p) + +#### Konventionen + +**Dateinamen:** +- Lowercase mit Bindestrichen: `tool-autopsy-installation.mp4` +- Präfix nach Kategorie: `tool-`, `method-`, `concept-` +- Beschreibender Suffix: `-basics`, `-advanced`, `-troubleshooting` + +**Video-Titel:** +- Beschreibend und suchfreundlich +- Tool/Methode im Titel erwähnen +- Skill-Level angeben: "Grundlagen", "Erweitert", "Expertenlevel" ### Code-Blöcke @@ -173,10 +334,10 @@ import volatility.registry as registry ### Tabellen -| Plugin | Beschreibung | Beispiel | -|--------|--------------|----------| -| pslist | Prozesse auflisten | `vol -f dump.raw windows.pslist` | -| malfind | Malware finden | `vol -f dump.raw windows.malfind` | +| Plugin | Beschreibung | Video-Tutorial | +|--------|--------------|----------------| +| pslist | Prozesse auflisten | [Tutorial ansehen](/videos/pslist-demo.mp4) | +| malfind | Malware finden | [Demo](/videos/malfind-basics.mp4) | ## Artikel-Typen @@ -274,13 +435,20 @@ Das System validiert automatisch: - Broken Links werden geloggt (development) - Dateinamen-Präfixe helfen bei der Organisation und Verknüpfung +### Video-Validierung + +- Dateipfade auf Existenz geprüft (development) +- Format-Kompatibilität gewarnt +- Firefox-spezifische Warnings bei problematischen Formaten + ## Deployment 1. Artikel von Nextcloud-Share herunterladen: https://cloud.cc24.dev/f/47971 -2. Artikel in `src/content/knowledgebase/` ablegen (flache Struktur mit Präfixen) -3. Frontmatter nach Schema überprüfen/anpassen -4. Build-Prozess validiert automatisch -5. Artikel erscheint in Knowledgebase-Übersicht +2. Videos manuell in `public/videos/` bereitstellen (siehe `public/videos/README.md`) +3. Artikel in `src/content/knowledgebase/` ablegen (flache Struktur mit Präfixen) +4. Frontmatter nach Schema überprüfen/anpassen +5. Build-Prozess validiert automatisch +6. Artikel erscheint in Knowledgebase-Übersicht ### Troubleshooting @@ -295,9 +463,16 @@ Das System validiert automatisch: - Groß-/Kleinschreibung beachten **Video lädt nicht:** -- Pfad korrekt? -- Datei im `public/` Ordner? +- Pfad korrekt? (beginnt mit `/videos/`) +- Datei im `public/videos/` Ordner? - Unterstütztes Format? (mp4, webm, ogg) +- Firefox-kompatibel? (H.264/AVC für MP4) + +**Firefox-Video-Probleme:** +- H.265/HEVC-Codecs vermeiden +- Multiple ``-Tags für Fallbacks nutzen +- Browser-Console auf Codec-Fehler prüfen +- MIME-Types korrekt gesetzt? ## Beispiel-Ordnerstruktur @@ -311,4 +486,16 @@ src/content/knowledgebase/ ├── concept-hash-functions-digital-signatures.md ├── concept-regex-pattern-matching.md └── concept-chain-of-custody.md + +public/videos/ +├── tools/ +│ ├── autopsy-timeline-tutorial.mp4 +│ ├── volatility-basics-demo.mp4 +│ └── yara-rules-advanced.webm +├── methods/ +│ ├── timeline-analysis-walkthrough.mp4 +│ └── disk-imaging-best-practices.mp4 +└── concepts/ + ├── hash-functions-explained.mp4 + └── chain-custody-procedures.mp4 ``` \ No newline at end of file