📚 Updated project documentation and chat training data files
This commit is contained in:
@ -1 +1,308 @@
|
||||
|
||||
# Screenshot-Tool für Mitarbeiterschulungen
|
||||
|
||||
## Überblick
|
||||
|
||||
Das automatische Screenshot-Tool erstellt systematisch Screenshots aller Seiten Ihrer Webanwendung für Schulungszwecke und Präsentationsmaterial. Es ist speziell für die Ausarbeitung von Mitarbeiterschulungen und IHK-Präsentationen entwickelt worden.
|
||||
|
||||
## Funktionen
|
||||
|
||||
### 🎯 Kernfunktionen
|
||||
- **Automatische Routenerkennung**: Erkennt alle verfügbaren Seiten der Webanwendung
|
||||
- **Multi-Auflösung**: Screenshots in Desktop-, Tablet- und Mobile-Auflösungen
|
||||
- **Kategorisierung**: Organisiert Screenshots nach Benutzergruppen (Admin, Benutzer, Öffentlich)
|
||||
- **Automatischer Login**: Meldet sich automatisch als Administrator an
|
||||
- **Detaillierte Berichte**: Erstellt umfassende Berichte über erstellte Screenshots
|
||||
|
||||
### 📱 Unterstützte Auflösungen
|
||||
- **Desktop**: 1920x1080 (Standard)
|
||||
- **Tablet**: 1024x768
|
||||
- **Mobile**: 375x667 (iPhone-Format)
|
||||
- **Large Desktop**: 2560x1440 (4K-Display)
|
||||
|
||||
### 📂 Ordnerstruktur
|
||||
```
|
||||
docs/schulung/screenshots/
|
||||
├── admin/ # Administrator-Bereich
|
||||
│ ├── desktop/ # Desktop-Auflösung
|
||||
│ ├── tablet/ # Tablet-Auflösung
|
||||
│ └── mobile/ # Mobile-Auflösung
|
||||
├── benutzer/ # Allgemeiner Benutzerbereich
|
||||
│ ├── desktop/
|
||||
│ ├── tablet/
|
||||
│ └── mobile/
|
||||
├── oeffentlich/ # Öffentlich zugängliche Seiten
|
||||
│ ├── desktop/
|
||||
│ ├── tablet/
|
||||
│ └── mobile/
|
||||
├── berichte/ # Berichte und Statistiken
|
||||
└── wartung/ # Wartung und System-Tools
|
||||
```
|
||||
|
||||
## Installation
|
||||
|
||||
### Voraussetzungen
|
||||
- **Python 3.7+** installiert
|
||||
- **Google Chrome** oder **Firefox** Browser
|
||||
- **Flask-Webanwendung** läuft lokal
|
||||
|
||||
### 1. Abhängigkeiten installieren
|
||||
```bash
|
||||
pip install selenium webdriver-manager
|
||||
```
|
||||
|
||||
### 2. ChromeDriver (automatisch)
|
||||
Das Tool installiert ChromeDriver automatisch über `webdriver-manager`.
|
||||
|
||||
### 3. Tool-Dateien
|
||||
Die folgenden Dateien sollten im `scripts/` Ordner vorhanden sein:
|
||||
- `screenshot_tool.py` - Hauptprogramm
|
||||
- `screenshot_config.json` - Konfigurationsdatei
|
||||
- `run_screenshot_tool.ps1` - PowerShell-Skript für Windows
|
||||
|
||||
## Verwendung
|
||||
|
||||
### Methode 1: PowerShell-Skript (Windows - Empfohlen)
|
||||
|
||||
```powershell
|
||||
# Einfache Ausführung
|
||||
.\scripts\run_screenshot_tool.ps1
|
||||
|
||||
# Interaktiver Modus
|
||||
.\scripts\run_screenshot_tool.ps1 -Interactive
|
||||
|
||||
# Quick-Run mit benutzerdefinierten Parametern
|
||||
.\scripts\run_screenshot_tool.ps1 -QuickRun -ServerUrl "http://localhost:5000"
|
||||
```
|
||||
|
||||
### Methode 2: Direkter Python-Aufruf
|
||||
|
||||
```bash
|
||||
cd scripts
|
||||
python screenshot_tool.py
|
||||
```
|
||||
|
||||
### Methode 3: Mit Konfigurationsdatei
|
||||
|
||||
1. **Konfiguration anpassen**:
|
||||
```json
|
||||
{
|
||||
"server": {
|
||||
"base_url": "http://localhost:5000",
|
||||
"admin_email": "admin@example.com",
|
||||
"admin_password": "admin123"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
2. **Tool ausführen**:
|
||||
```bash
|
||||
python screenshot_tool.py --config screenshot_config.json
|
||||
```
|
||||
|
||||
## Konfiguration
|
||||
|
||||
### Server-Einstellungen
|
||||
```json
|
||||
{
|
||||
"server": {
|
||||
"base_url": "http://localhost:5000",
|
||||
"admin_email": "admin@example.com",
|
||||
"admin_password": "admin123"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Browser-Einstellungen
|
||||
```json
|
||||
{
|
||||
"browser": {
|
||||
"type": "chrome", // "chrome" oder "firefox"
|
||||
"headless": true, // Ohne GUI (für Server)
|
||||
"page_load_timeout": 15, // Sekunden
|
||||
"screenshot_delay": 2 // Wartezeit vor Screenshot
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Erweiterte Einstellungen
|
||||
```json
|
||||
{
|
||||
"advanced": {
|
||||
"take_full_page_screenshots": true,
|
||||
"wait_for_dynamic_content": true,
|
||||
"generate_thumbnails": true,
|
||||
"compress_images": false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Ausgabe und Berichte
|
||||
|
||||
### Screenshot-Dateien
|
||||
- **Format**: PNG (verlustfrei)
|
||||
- **Benennung**: `seitenname_auflösung_zeitstempel.png`
|
||||
- **Beispiel**: `dashboard_desktop_20250116_143022.png`
|
||||
|
||||
### Automatische Berichte
|
||||
|
||||
#### 1. JSON-Bericht (`screenshot_report.json`)
|
||||
```json
|
||||
{
|
||||
"session_info": {
|
||||
"start_time": "2025-01-16T14:30:22",
|
||||
"duration_seconds": 125.5,
|
||||
"total_screenshots": 48
|
||||
},
|
||||
"statistics": {
|
||||
"successful_screenshots": 45,
|
||||
"failed_screenshots": 3,
|
||||
"skipped_routes": 12
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 2. Markdown-Bericht (`screenshot_bericht.md`)
|
||||
- Übersichtliche Darstellung aller Ergebnisse
|
||||
- Verwendungshinweise für Schulungen
|
||||
- Empfehlungen für Präsentationen
|
||||
|
||||
## Verwendung für Schulungen
|
||||
|
||||
### 1. IHK-Präsentationen
|
||||
- **Desktop-Screenshots** für Hauptpräsentationen verwenden
|
||||
- **Admin-Ordner** für Administrative Funktionen zeigen
|
||||
- **Benutzer-Ordner** für alltägliche Arbeitsabläufe
|
||||
|
||||
### 2. Mitarbeiterschulungen
|
||||
- **Schritt-für-Schritt-Anleitungen** mit Screenshots erstellen
|
||||
- **Verschiedene Auflösungen** für Responsive-Design-Demonstrationen
|
||||
- **Kategorisierte Ordner** für zielgruppenspezifische Schulungen
|
||||
|
||||
### 3. PowerPoint-Integration
|
||||
```
|
||||
1. Screenshots aus docs/schulung/screenshots/ importieren
|
||||
2. Desktop-Auflösung für Folien verwenden
|
||||
3. Mobile-Screenshots für Responsive-Design-Folien
|
||||
4. Admin-Screenshots für Administratoren-Schulungen
|
||||
5. Benutzer-Screenshots für allgemeine Mitarbeiterschulungen
|
||||
```
|
||||
|
||||
### 4. Schulungshandbuch
|
||||
- Screenshots als Illustrationen verwenden
|
||||
- Schritt-für-Schritt-Anleitungen visuell unterstützen
|
||||
- Verschiedene Benutzerrollen demonstrieren
|
||||
|
||||
## Fehlerbehebung
|
||||
|
||||
### Häufige Probleme
|
||||
|
||||
#### 1. "Selenium nicht verfügbar"
|
||||
```bash
|
||||
pip install selenium
|
||||
```
|
||||
|
||||
#### 2. "ChromeDriver nicht gefunden"
|
||||
```bash
|
||||
pip install webdriver-manager
|
||||
```
|
||||
|
||||
#### 3. "Login fehlgeschlagen"
|
||||
- Admin-Zugangsdaten in Konfiguration prüfen
|
||||
- Server-URL korrekt?
|
||||
- Flask-App läuft?
|
||||
|
||||
#### 4. "Keine Screenshots erstellt"
|
||||
- Browser startet nicht → Headless-Modus deaktivieren
|
||||
- Zeitüberschreitung → Timeouts erhöhen
|
||||
- Routen nicht gefunden → Flask-App-Verbindung prüfen
|
||||
|
||||
### Debug-Modus
|
||||
```bash
|
||||
# Ausführlicher Logging
|
||||
export SCREENSHOT_DEBUG=true
|
||||
python screenshot_tool.py
|
||||
|
||||
# Nicht-Headless-Modus (zeigt Browser)
|
||||
export SCREENSHOT_HEADLESS=false
|
||||
python screenshot_tool.py
|
||||
```
|
||||
|
||||
### Log-Dateien
|
||||
- **screenshot_tool.log**: Detaillierte Ausführungslogs
|
||||
- **selenium.log**: Browser-spezifische Logs
|
||||
|
||||
## Erweiterte Verwendung
|
||||
|
||||
### 1. Benutzerdefinierte Routen
|
||||
```json
|
||||
{
|
||||
"routes": {
|
||||
"custom_routes": [
|
||||
{
|
||||
"url": "/special-demo",
|
||||
"category": "benutzer",
|
||||
"description": "Spezielle Demo-Seite"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Geplante Ausführung
|
||||
```bash
|
||||
# Windows Task Scheduler
|
||||
schtasks /create /tn "Screenshot Tool" /tr "powershell.exe .\scripts\run_screenshot_tool.ps1 -QuickRun" /sc weekly
|
||||
|
||||
# Linux Cron
|
||||
0 2 * * 0 cd /path/to/project && python scripts/screenshot_tool.py
|
||||
```
|
||||
|
||||
### 3. CI/CD-Integration
|
||||
```yaml
|
||||
# GitHub Actions Beispiel
|
||||
- name: Create Screenshots
|
||||
run: |
|
||||
pip install selenium webdriver-manager
|
||||
python scripts/screenshot_tool.py --headless --output docs/screenshots
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### 1. Vor der Ausführung
|
||||
- ✅ Server läuft und ist erreichbar
|
||||
- ✅ Admin-Account funktioniert
|
||||
- ✅ Alle Seiten sind vollständig geladen
|
||||
- ✅ Test-Daten sind vorhanden
|
||||
|
||||
### 2. Für Schulungen
|
||||
- 📸 Verwenden Sie konsistente Auflösungen
|
||||
- 📚 Organisieren Sie Screenshots thematisch
|
||||
- 🎯 Erstellen Sie zielgruppenspezifische Ordner
|
||||
- 📝 Dokumentieren Sie jeden Screenshot
|
||||
|
||||
### 3. Qualitätssicherung
|
||||
- 🔍 Überprüfen Sie Screenshots auf Vollständigkeit
|
||||
- 🎨 Achten Sie auf einheitliche Darstellung
|
||||
- 📊 Verwenden Sie Berichte zur Qualitätskontrolle
|
||||
- 🔄 Automatisieren Sie regelmäßige Updates
|
||||
|
||||
## Support und Weiterentwicklung
|
||||
|
||||
### Bei Problemen
|
||||
1. **Log-Dateien prüfen**: `screenshot_tool.log`
|
||||
2. **Konfiguration validieren**: `screenshot_config.json`
|
||||
3. **Browser-Kompatibilität testen**: Chrome vs. Firefox
|
||||
4. **Netzwerk-Konnektivität prüfen**: Server erreichbar?
|
||||
|
||||
### Erweiterungsmöglichkeiten
|
||||
- **Annotation-Tool**: Automatische Markierungen auf Screenshots
|
||||
- **Video-Recording**: Automatische Bildschirmaufnahmen
|
||||
- **Multi-Language**: Screenshots in verschiedenen Sprachen
|
||||
- **A/B-Testing**: Vergleichsscreenshots verschiedener Versionen
|
||||
|
||||
---
|
||||
|
||||
**Erstellt für**: Mitarbeiterschulungen und IHK-Präsentationen
|
||||
**Version**: 1.0
|
||||
**Datum**: 16.01.2025
|
||||
**Kompatibilität**: Windows 10+, Python 3.7+, Chrome/Firefox
|
||||
Reference in New Issue
Block a user