update readme files

This commit is contained in:
overcuriousity
2025-08-13 15:10:20 +02:00
parent 75410e2b84
commit e93f394263
3 changed files with 628 additions and 25 deletions

View File

@@ -121,9 +121,9 @@ vol -f memory.dmp windows.info
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
@@ -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
<video src="/pfad/zum/video.mp4" title="Beschreibung" controls></video>
<video src="/videos/demo.mp4" title="Tool-Demonstration" controls></video>
```
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
<video
src="/videos/advanced-tutorial.mp4"
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
- `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
@@ -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 `<source>`-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
```