update readme files
This commit is contained in:
overcuriousity
parent
75410e2b84
commit
e93f394263
16
README.md
16
README.md
@ -250,10 +250,26 @@ Ihr Artikel-Inhalt hier...
|
|||||||
2. Installer ausführen
|
2. Installer ausführen
|
||||||
3. Einstellungen konfigurieren
|
3. Einstellungen konfigurieren
|
||||||
|
|
||||||
|
## Video-Demonstration
|
||||||
|
<video src="/videos/setup-tutorial.mp4" title="Setup-Tutorial" controls></video>
|
||||||
|
|
||||||
## Häufige Probleme
|
## Häufige Probleme
|
||||||
Lösungen für typische Probleme...
|
Lösungen für typische Probleme...
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Video-Integration
|
||||||
|
|
||||||
|
Knowledgebase-Artikel unterstützen eingebettete Videos für praktische Demonstrationen:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<video src="/videos/demo.mp4" title="Tool-Demonstration" controls></video>
|
||||||
|
```
|
||||||
|
|
||||||
|
**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
|
### Artikel-Struktur-Richtlinien
|
||||||
|
|
||||||
**Erforderliche Felder**:
|
**Erforderliche Felder**:
|
||||||
|
|||||||
@ -1,5 +1,405 @@
|
|||||||
# Manuell hinzufügen
|
# Video-Bereitstellung für ForensicPathways Knowledgebase
|
||||||
|
|
||||||
Hier müssen Videos, die eingebettet werden sollen, manuell abgespeichert werden.
|
Videos müssen manuell in diesem Verzeichnis bereitgestellt werden, da sie aufgrund unterschiedlicher Lizenzierung nicht Bestandteil des Open-Source-Git-Repositorys sind.
|
||||||
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.
|
## 🎥 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 title="Autopsy Installation Tutorial" controls>
|
||||||
|
<source src="/videos/tools/autopsy/installation.mp4" type="video/mp4">
|
||||||
|
<source src="/videos/tools/autopsy/installation.webm" type="video/webm">
|
||||||
|
<source src="/videos/tools/autopsy/installation.ogv" type="video/ogg">
|
||||||
|
<p>Ihr Browser unterstützt das Video-Element nicht.</p>
|
||||||
|
</video>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🔧 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
|
||||||
@ -121,9 +121,9 @@ vol -f memory.dmp windows.info
|
|||||||
vol -f memory.dmp windows.pslist
|
vol -f memory.dmp windows.pslist
|
||||||
```
|
```
|
||||||
|
|
||||||
## Video-Einbindung
|
## Video-Demonstration
|
||||||
|
|
||||||
<video src="/path/to/video.mp4" title="Volatility Demo" controls></video>
|
<video src="/videos/volatility-basics.mp4" title="Volatility Grundlagen Tutorial" controls preload="metadata"></video>
|
||||||
|
|
||||||
## Weiterführende Links
|
## Weiterführende Links
|
||||||
|
|
||||||
@ -143,20 +143,181 @@ vol -f memory.dmp windows.pslist
|
|||||||
|
|
||||||
### Video-Einbindung
|
### 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
|
```html
|
||||||
<video src="/pfad/zum/video.mp4" title="Beschreibung" controls></video>
|
<video src="/videos/demo.mp4" title="Tool-Demonstration" controls></video>
|
||||||
```
|
```
|
||||||
|
|
||||||
Unterstützte Attribute:
|
#### Vollständige Video-Konfiguration
|
||||||
- `src`: Pfad zur Videodatei
|
|
||||||
- `title`: Titel für Metadaten
|
```html
|
||||||
- `controls`: Zeigt Player-Steuerung
|
<video
|
||||||
- `autoplay`: Automatisches Abspielen
|
src="/videos/advanced-tutorial.mp4"
|
||||||
- `muted`: Stummgeschaltet
|
title="Erweiterte Analysefunktionen"
|
||||||
|
controls
|
||||||
|
preload="metadata"
|
||||||
|
width="720"
|
||||||
|
height="405"
|
||||||
|
muted
|
||||||
|
poster="/images/video-thumbnail.jpg"
|
||||||
|
>
|
||||||
|
<p>Ihr Browser unterstützt das Video-Element nicht.</p>
|
||||||
|
</video>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 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
|
- `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
|
||||||
|
src="https://www.youtube.com/embed/VIDEO_ID"
|
||||||
|
title="YouTube-Tutorial: Forensic Analysis mit Tool XYZ"
|
||||||
|
width="560"
|
||||||
|
height="315"
|
||||||
|
frameborder="0"
|
||||||
|
allowfullscreen
|
||||||
|
></iframe>
|
||||||
|
```
|
||||||
|
|
||||||
|
**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
|
||||||
|
<video src="/videos/demo.mp4" title="Demo" controls></video>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Output (automatisch generiert):**
|
||||||
|
```html
|
||||||
|
<div class="video-container">
|
||||||
|
<video
|
||||||
|
src="/videos/demo.mp4"
|
||||||
|
title="Demo"
|
||||||
|
controls
|
||||||
|
preload="metadata"
|
||||||
|
data-video-title="Demo"
|
||||||
|
>
|
||||||
|
<p>Your browser does not support the video element.</p>
|
||||||
|
</video>
|
||||||
|
<div class="video-metadata">
|
||||||
|
<div class="video-title">Demo</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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
|
||||||
|
<video title="Demo" controls>
|
||||||
|
<source src="/videos/demo.mp4" type="video/mp4">
|
||||||
|
<source src="/videos/demo.webm" type="video/webm">
|
||||||
|
<p>Ihr Browser unterstützt das Video-Element nicht.</p>
|
||||||
|
</video>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 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
|
### Code-Blöcke
|
||||||
|
|
||||||
@ -173,10 +334,10 @@ import volatility.registry as registry
|
|||||||
|
|
||||||
### Tabellen
|
### Tabellen
|
||||||
|
|
||||||
| Plugin | Beschreibung | Beispiel |
|
| Plugin | Beschreibung | Video-Tutorial |
|
||||||
|--------|--------------|----------|
|
|--------|--------------|----------------|
|
||||||
| pslist | Prozesse auflisten | `vol -f dump.raw windows.pslist` |
|
| pslist | Prozesse auflisten | [Tutorial ansehen](/videos/pslist-demo.mp4) |
|
||||||
| malfind | Malware finden | `vol -f dump.raw windows.malfind` |
|
| malfind | Malware finden | [Demo](/videos/malfind-basics.mp4) |
|
||||||
|
|
||||||
## Artikel-Typen
|
## Artikel-Typen
|
||||||
|
|
||||||
@ -274,13 +435,20 @@ Das System validiert automatisch:
|
|||||||
- Broken Links werden geloggt (development)
|
- Broken Links werden geloggt (development)
|
||||||
- Dateinamen-Präfixe helfen bei der Organisation und Verknüpfung
|
- 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
|
## Deployment
|
||||||
|
|
||||||
1. Artikel von Nextcloud-Share herunterladen: https://cloud.cc24.dev/f/47971
|
1. Artikel von Nextcloud-Share herunterladen: https://cloud.cc24.dev/f/47971
|
||||||
2. Artikel in `src/content/knowledgebase/` ablegen (flache Struktur mit Präfixen)
|
2. Videos manuell in `public/videos/` bereitstellen (siehe `public/videos/README.md`)
|
||||||
3. Frontmatter nach Schema überprüfen/anpassen
|
3. Artikel in `src/content/knowledgebase/` ablegen (flache Struktur mit Präfixen)
|
||||||
4. Build-Prozess validiert automatisch
|
4. Frontmatter nach Schema überprüfen/anpassen
|
||||||
5. Artikel erscheint in Knowledgebase-Übersicht
|
5. Build-Prozess validiert automatisch
|
||||||
|
6. Artikel erscheint in Knowledgebase-Übersicht
|
||||||
|
|
||||||
### Troubleshooting
|
### Troubleshooting
|
||||||
|
|
||||||
@ -295,9 +463,16 @@ Das System validiert automatisch:
|
|||||||
- Groß-/Kleinschreibung beachten
|
- Groß-/Kleinschreibung beachten
|
||||||
|
|
||||||
**Video lädt nicht:**
|
**Video lädt nicht:**
|
||||||
- Pfad korrekt?
|
- Pfad korrekt? (beginnt mit `/videos/`)
|
||||||
- Datei im `public/` Ordner?
|
- Datei im `public/videos/` Ordner?
|
||||||
- Unterstütztes Format? (mp4, webm, ogg)
|
- Unterstütztes Format? (mp4, webm, ogg)
|
||||||
|
- Firefox-kompatibel? (H.264/AVC für MP4)
|
||||||
|
|
||||||
|
**Firefox-Video-Probleme:**
|
||||||
|
- H.265/HEVC-Codecs vermeiden
|
||||||
|
- Multiple `<source>`-Tags für Fallbacks nutzen
|
||||||
|
- Browser-Console auf Codec-Fehler prüfen
|
||||||
|
- MIME-Types korrekt gesetzt?
|
||||||
|
|
||||||
## Beispiel-Ordnerstruktur
|
## Beispiel-Ordnerstruktur
|
||||||
|
|
||||||
@ -311,4 +486,16 @@ src/content/knowledgebase/
|
|||||||
├── concept-hash-functions-digital-signatures.md
|
├── concept-hash-functions-digital-signatures.md
|
||||||
├── concept-regex-pattern-matching.md
|
├── concept-regex-pattern-matching.md
|
||||||
└── concept-chain-of-custody.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
|
||||||
```
|
```
|
||||||
Loading…
x
Reference in New Issue
Block a user