This commit is contained in:
Team3
2026-05-25 19:33:48 +02:00
parent 66a48759b3
commit e964c807d9
14 changed files with 8137 additions and 5 deletions

View File

@@ -0,0 +1,147 @@
```
ANFÄNGER-GUIDE-STIL (HTML/CSS → PDF via WeasyPrint)
FORMAT
- A4 Hochformat, mehrseitig
- @page { size: A4; margin: 22mm 20mm 20mm 20mm; }
- @page :first { margin: 0; } für Cover
- Footer: Seitenzahl Mitte, Guide-Titel rechts (außer Cover)
UMFANG
- 8-12 Kapitel à ~15 Min Lesezeit
- ~1500 Wörter Fließtext pro Kapitel
- 2-3 Code-Beispiele pro Kapitel (kurz, 5-15 Zeilen)
- 15-25 Seiten gesamt
- ~2-3h Lesezeit gesamt
EINSTIEGSNIVEAU
- Setzt nur voraus, dass der Leser weiß, WAS das Thema ist
- Kapitel 1 erklärt Setup und erste Schritte von Null
- Keine Vorkenntnisse im Thema selbst
- Erklärt Begriffe beim ersten Auftreten
KAPITEL-PROGRESSION
- Aufgeteilt in 3 Teile mit eigenen TOC-Sektionen:
- Teil 1: Grundlagen — Was ist es, wie startet man, erste Konzepte
- Teil 2: Strukturen/Bausteine — Die wichtigsten Mechanismen
- Teil 3: Echte Anwendungen — Integration, Tooling, kleine Projekte
- Jedes Kapitel baut auf vorherigen auf
- Tiefere Konzepte erst nach den Grundlagen
- Letztes Kapitel idealerweise mit kleiner echter Anwendung
STRUKTUR
1. Cover: vollflächiger Hintergrund, Hero-Aussage, Outcome-Versprechen
2. Inhaltsverzeichnis: 3 Teile, nummeriert, mit Zeit-Markern (15 Min)
3. Kapitel 1-N
4. Ending: Spaced-Repetition-Plan, nächste Schritte, Begleitmaterial
KAPITEL-AUFBAU
1. Kapitel-Head: große Nummer + Titel + Subtitle, Trennlinie
2. Gap-Opener: kursiv eingerahmt, Information-Gap explizit
3. 2-4 H2-Sektionen
4. Pro Sektion: Erklärtext + Code-Beispiel + ggf. Callout
5. Recall-Box am Ende (3 Fragen)
ELEMENTE
- Fließtext: justify mit Silbentrennung
- Codeblöcke: dunkler Hintergrund, syntax highlighting
- Inline-Code: heller Hintergrund, Hauptfarbe
- Tabellen: Header farbig (Hauptfarbe-Dunkel), Zeilen mit dünner Trennlinie
- Callouts in 3 Varianten: tip (grün), warn (rot), note (Hauptfarbe)
- Recall-Box: dunkler Hintergrund mit Akzentfarbe
TYPOGRAFIE
- Body: 10.5pt Serif (Charter), line-height 1.55
- H1 Kapitel: 22pt Sans-Serif bold, Hauptfarbe-Dunkel
- H2 Sektion: 14pt Sans-Serif bold
- H3 Subsektion: 11pt Sans-Serif bold
- Code: 8.5pt Monospace, line-height 1.5
- Inline-Code: 9pt Monospace
- Recall/Callout-Labels: 8pt uppercase, letter-spacing 1pt
- Cover-H1: 56pt Sans-Serif bold, letter-spacing -2pt
FARBEN (max 3 + Neutrals)
- Hauptfarbe: kräftig, an offizielle Farbe des Themas anlehnen
- Hauptfarbe-Dunkel: dunklere Variante für Headings und Akzente
- Hauptfarbe-Darker: noch dunkler für Cover-Verlauf und Recall-Box
- Hintergrund-Soft: helle Variante der Hauptfarbe
- Code-Hintergrund: #1e2a3a (dunkel)
- Text: #1a1a1a / muted #5a6470 / Linie #d8dde3
- Callout-Farben: grün/rot/Hauptfarbe
INFORMATION-GAP-OPENER (PFLICHT pro Kapitel)
- Kursiv, eingerahmt mit Hauptfarbe-Border
- Stellt konkrete Frage, die das Kapitel beantwortet
- Erzeugt Spannung (Information-Gap)
- Niveau passend zum Kapitel:
- Kapitel 1: setzt nur Grundverständnis voraus
- Letztes Kapitel: darf auf alle vorherigen Kapitel aufbauen
RECALL-BOX (PFLICHT pro Kapitel)
- Am Kapitel-Ende
- Dunkler Hintergrund mit Akzentfarbe
- 3 nummerierte Fragen
- Direkt auf Kapitel-Inhalt bezogen
- Code-Snippets in Fragen mit Akzentfarbe hervorgehoben
ENDING (PFLICHT)
- Spaced-Repetition-Plan: 4 Karten (Heute, +1 Tag, +7 Tage, +30 Tage)
- "Was als nächstes lernen" mit Spezialisierungs-Vorschlägen
- Verweis auf Begleitmaterial (OnePager, Cheatsheet, Mini-Guide)
CALLOUT-NUTZUNG
- tip (grün): Best Practice, idiomatische Lösung
- warn (rot): Fallen, häufige Bugs, Anti-Patterns
- note (Hauptfarbe): Hintergrund-Info, Querverweis
CALLOUT-CSS WICHTIG
- .callout-body > b:first-child mit display:block für Label
- NICHT .callout-body b global mit display:block (zerstört Inline-Bold)
- Mehrzeiliger Body-Text in <p style="margin:0;"> wrappen wenn Inline-Bolds drin sind
THEMENSPEZIFISCHE ANPASSUNGEN (vor Generierung wählen)
- Hauptfarbe: offizielle Farbe des Themas
- Logo-Buchstabe(n): erstes Zeichen oder Kürzel
- Version + Stand-Datum
- 8-12 Kapitel-Titel mit progressivem Aufbau
PFLICHT-ELEMENTE PRO KAPITEL
- 1 Gap-Opener am Anfang
- 2-3 Code-Beispiele (kurz, 5-15 Zeilen)
- Mindestens 1 Callout
- 1 Recall-Box am Ende
VERMEIDEN
- Einleitungs-Floskeln ("In diesem Kapitel lernen wir...")
- Wiederholungen aus vorherigem Kapitel
- Übersichts-Inhalt (steht im OnePager)
- Reine Referenz-Tabellen (stehen im Cheatsheet)
- Konzepte vorwegnehmen, die später dran sind
- Vorausgesetztes Wissen über das Thema
- page-break mitten in Codeblock oder Callout (page-break-inside: avoid)
- Mehr als 3 Schriftgrößen pro Sektion
- Floats oder absolute positioning (bricht in WeasyPrint)
- Subscript/Superscript via Unicode (nicht alle Fonts unterstützen das)
GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
1. HTML schreiben
2. weasyprint file.html file.pdf (Timeout 240s)
3. PDF zu PNGs: alle Seiten konvertieren
4. Mehrere Seiten ansehen (Cover, TOC, Kapitel 1, mittlere Seite, Ending)
5. Prüfen:
- Cover randlos und ohne Footer?
- TOC zeigt alle 3 Teile?
- Kapitel 1 fängt wirklich bei Null an?
- Kapitel beginnen auf neuer Seite?
- Code-Blöcke nicht über Seitenumbruch zerrissen?
- Recall-Boxen vollständig sichtbar?
- Footer mit Seitenzahl korrekt?
- Inline-Bolds in Callouts korrekt (nicht als Blöcke)?
- Steigt der Schwierigkeitsgrad spürbar von Kapitel zu Kapitel?
6. Bei Problemen: fixen, ab Schritt 2 wiederholen
7. Nach max 3 Iterationen ausgeben
INSTALLATION
- pip install weasyprint pdf2image
- apt install poppler-utils
```

View File

@@ -0,0 +1,104 @@
```
CHEATSHEET-STIL QUERFORMAT (HTML/CSS → PDF via WeasyPrint)
FORMAT
- A4 Querformat (297mm × 210mm)
- @page { size: A4 landscape; margin: 0; }
- Padding: 7mm 9mm 18mm 9mm (unten Platz für Footer)
- Position relative für absoluten Footer
LAYOUT
- Grid: hero (auto) / main (4 Spalten) / footer (absolute)
- Main: 4 Spalten gleich breit, gap 3mm
- Spalten intern: flex-column, gap 3mm
- 8-12 thematische Blöcke verteilt (2-3 pro Spalte)
STRUKTUR (in dieser Reihenfolge)
1. Hero: Logo links (15mm), Titel + Untertitel mittig, Version + Stand rechts
2. Main-Grid: 8-12 Blöcke in 4 Spalten
3. Footer: farbige Box mit Quick-Commands + Tag (absolute, unten)
UNTERSCHIEDE ZU HOCHFORMAT-CHEATSHEET
- 4 Spalten statt 3 (mehr horizontaler Platz)
- 9-12 Blöcke statt 8-10
- Footer mit 4 Quick-Commands statt 3
- Kleinere Schriftgrößen (8pt Body statt 8.5pt)
- Kompaktere Code-Blöcke (6.5pt statt 6.8pt)
BLOCK-AUFBAU
- Block-Head: Hauptfarbe-Hintergrund, weißer Text, Icon links (3.5mm)
- Block-Body: weißer Hintergrund, dünner Rand, abgerundet 2mm
- Inhalt: dichte Referenz, nicht Erklärung
- Varianten: Referenz-Tabelle, Code-Block, Kachel-Grid, Plus/Minus
FARBEN (max 3 + Neutrals)
- Hauptfarbe: an offizielle Farbe des Themas anlehnen
- Hauptfarbe-Dunkel: dunklere Variante für Headings
- Hauptfarbe-Darker: noch dunkler für Footer
- Akzentfarbe für Plus/Minus: grün/rot
- Hintergrund-Soft: helle Variante der Hauptfarbe
- Code-Hintergrund: #1e2a3a (dunkel)
- Text: #1a1a1a / muted #5a6470 / Linie #d8dde3
TYPOGRAFIE
- Body: 8pt, line-height 1.35
- Hero h1: 18pt bold
- Block-Head: 8pt bold uppercase, letter-spacing 0.5pt
- Tabellen: 7.5pt, Keys 7pt monospace
- Code: 6.5pt monospace, line-height 1.4
- Inline-Code: 7pt monospace, Hauptfarbe
- Max 3 Schriftgrößen pro Block
ICONS
- SVG inline, stroke statt fill
- 3.5mm in Block-Heads
- 2mm in Tile-Icons (kleiner als Hochformat)
- currentColor für automatische Anpassung
BLOCK-TYPEN (für Variation nutzen)
- Referenz-Tabelle: 2-spaltig (Befehl/Methode → Bedeutung)
- Code-Block: vollständiges Beispiel mit Syntax-Highlighting
- Kachel-Grid: 2x4 mit Icons (z.B. Ökosystem)
- Direktiven-Grid: 2-spaltig kompakte Begriffe + Kurzbeschreibung
- Plus/Minus-Split: 2-spaltig (idiomatisch vs vermeiden)
THEMENSPEZIFISCHE ANPASSUNGEN (vor Generierung wählen)
- Hauptfarbe: offizielle Farbe des Themas
- Logo-Buchstabe(n) oder Kürzel
- Version + Stand-Datum
- Block-Auswahl: 8-12 wichtigste Referenz-Themen
- Quick-Commands im Footer: 4 wichtigste Kommandos
VISUELLE ELEMENTE PFLICHT
- Mindestens 1 Code-Block (oft mehrere im Querformat)
- Mindestens 1 Kachel-Grid mit Icons
- Mindestens 1 Plus/Minus-Split
- Footer mit Quick-Commands
- Versionsbadge in Hero
VERMEIDEN
- Reine Bullet-Listen ohne Struktur
- Erklärtext (gehört in Guide, nicht Cheatsheet)
- Mehr als 12 Blöcke (überfüllt)
- Mehr als 3 Schriftgrößen
- Vertikal sehr lange Blöcke (Spalten unbalanciert)
- Floats oder absolute positioning (außer für Footer)
GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
1. HTML schreiben
2. weasyprint file.html file.pdf
3. PDF zu PNG: python -c "from pdf2image import convert_from_path; convert_from_path('file.pdf', dpi=120)[0].save('preview.png')"
4. Preview ansehen mit Read-Tool
5. Prüfen:
- Footer überlappt nicht mit Inhalt?
- 4 Spalten balanciert (ähnliche Höhe)?
- Alle Blöcke vollständig sichtbar?
- Code-Blöcke nicht abgeschnitten?
- Icons rendern?
6. Bei Problemen: Inhalt straffen oder padding-bottom erhöhen, ab Schritt 2 wiederholen
7. Nach max 3 Iterationen ausgeben
INSTALLATION
- pip install weasyprint pdf2image
- apt install poppler-utils
```

View File

@@ -0,0 +1,171 @@
```
EXTENDED-GUIDE-STIL (HTML/CSS → PDF via WeasyPrint)
FORMAT
- A4 Hochformat, mehrseitig
- @page { size: A4; margin: 22mm 20mm 20mm 20mm; }
- @page :first { margin: 0; } für Cover
- Footer: Seitenzahl Mitte, Guide-Titel rechts (außer Cover)
UMFANG
- 15-20 Kapitel à ~15 Min Lesezeit
- ~1500 Wörter Fließtext pro Kapitel (gleich wie alle anderen Stufen)
- 2-3 Code-Beispiele pro Kapitel (gleich wie alle anderen, 5-15 Zeilen)
- 50-70 Seiten gesamt
- ~4-5h Lesezeit gesamt
EINSTIEGSNIVEAU
- Setzt Anfänger- UND Fortgeschritten-Guide voraus
- Grundbegriffe und fortgeschrittene Patterns werden NICHT mehr erklärt
- Verweist bei Bedarf auf vorherige Guides
- Geht direkt in Internals, Spezial-Themen und Edge-Cases
UNTERSCHIED ZU FORTGESCHRITTEN-GUIDE
- Kapitel-Größe IDENTISCH (1500 Wörter, 2-3 Code-Beispiele, 15 Min)
- Unterschied liegt nur in:
- THEMEN (Experten/Nischen, Internals, Sprach-Mechanismen)
- VORAUSGESETZTEM WISSEN (alle Patterns aus Fortgeschritten)
- KAPITEL-ANZAHL (15-20 statt 12-15)
- "WARUM" über "WIE" (mehr Trade-Offs, mehr Design-Entscheidungen)
KAPITEL-PROGRESSION
- Aufgeteilt in 3 Teile mit eigenen TOC-Sektionen
- Beispiele für PHP:
- Teil 1: Sprach-Internals — Reflection, SPL, Stream-Wrapper, GC, FFI
- Teil 2: Performance & Async — OpCache, Fibers, ReactPHP, Profiling, Caching
- Teil 3: Architektur & Patterns — DI-Container, Event-Dispatcher, CQRS, DDD, Hexagonal, Event Sourcing
- Jedes Kapitel geht in Bereiche, wo die meisten Entwickler nicht hingehen
- Bewusst dort, wo Mainstream-Tutorials aufhören
STRUKTUR
1. Cover: vollflächiger Hintergrund, Hero-Aussage mit "an der Grenze" oder ähnlichem Tone
2. Inhaltsverzeichnis: 3 Teile, nummeriert, Zeit-Marker (15 Min) - kann auf zwei Seiten brechen
3. Kapitel 1-N
4. Ending: Spaced-Repetition-Plan, nächste Schritte (außerhalb des offiziellen Lernpfads), Begleitmaterial
KAPITEL-AUFBAU
1. Kapitel-Head: große Nummer + Titel + Subtitle, Trennlinie
2. Gap-Opener: kursiv eingerahmt, anspruchsvolles Problem oder Tief-Frage
3. 3-5 H2-Sektionen (mehr als im Fortgeschritten-Guide)
4. Pro Sektion: Erklärtext + Code-Beispiel + ggf. Callout
5. Recall-Box am Ende (3 Fragen, anspruchsvoller als alle Stufen davor)
CODE-BEISPIELE
- Production-Code-Niveau, keine Demos
- Echte Library-Namen (Symfony, Doctrine, ReactPHP, EventSauce)
- Internals-Code zur Erklärung von PHP-Mechanismen
- Vereinfachte Implementierungen echter Frameworks
- Länge bleibt 5-15 Zeilen (wie alle anderen Stufen)
ELEMENTE
- Fließtext: justify mit Silbentrennung
- Codeblöcke: dunkler Hintergrund, syntax highlighting
- Inline-Code: heller Hintergrund, Hauptfarbe
- Tabellen: Header farbig (Hauptfarbe-Dunkel), Vergleichstabellen mit Trade-Offs
- Callouts in 3 Varianten: tip (grün), warn (rot), note (Hauptfarbe)
- Recall-Box: dunkler Hintergrund mit Akzentfarbe
TYPOGRAFIE
- Body: 10.5pt Serif (Charter), line-height 1.55
- H1 Kapitel: 22pt Sans-Serif bold, Hauptfarbe-Dunkel
- H2 Sektion: 14pt Sans-Serif bold
- H3 Subsektion: 11pt Sans-Serif bold
- Code: 8.5pt Monospace, line-height 1.5
- Inline-Code: 9pt Monospace
- Recall/Callout-Labels: 8pt uppercase, letter-spacing 1pt
- Cover-H1: 56pt Sans-Serif bold, letter-spacing -2pt
FARBEN (max 3 + Neutrals)
- Hauptfarbe: kräftig, an offizielle Farbe des Themas anlehnen
- Hauptfarbe-Dunkel: dunklere Variante für Headings und Akzente
- Hauptfarbe-Darker: noch dunkler für Cover-Verlauf und Recall-Box
- Hintergrund-Soft: helle Variante der Hauptfarbe
- Code-Hintergrund: #1e2a3a (dunkel)
- Text: #1a1a1a / muted #5a6470 / Linie #d8dde3
- Callout-Farben: grün/rot/Hauptfarbe
INFORMATION-GAP-OPENER (PFLICHT pro Kapitel)
- Kursiv, eingerahmt mit Hauptfarbe-Border
- Anspruchsvolles Problem oder Internals-Frage als Aufhänger
- Niveau: setzt fortgeschrittene Praxis voraus
- Beispiele:
- "Wie weiß Symfony zur Laufzeit, welche Routen in deinem Controller stecken?"
- "PHP räumt Speicher automatisch auf meistens. Aber in Long-Running-Prozessen..."
- "Anämische Entities sind in PHP weit verbreitet..."
RECALL-BOX (PFLICHT pro Kapitel)
- Am Kapitel-Ende
- 3 Fragen, anspruchsvoller als Fortgeschritten
- Fragen nach Warum/Wofür/Wann genau statt Was/Wie
- Code-Snippets in Fragen mit Akzentfarbe hervorgehoben
ENDING (PFLICHT)
- Spaced-Repetition-Plan: 4 Karten (Heute, +7 Tage, +30 Tage, +90 Tage)
- Sehr langfristige Spacing-Abstände
- Aufgaben anspruchsvoll (eigenes Spezialprojekt, Source-Code lesen)
- "Was als nächstes lernen" — bewusst außerhalb offizieller Lernpfade
(Source-Code, eigene Extensions, Sprach-Design, RFCs)
- Verweis auf ALLE Begleitmaterialien (komplette Reihe)
CALLOUT-NUTZUNG
- tip (grün): Best Practice für Spezial-Cases, Library-Empfehlung
- warn (rot): subtile Fallen, Architektur-Anti-Patterns, Komplexitäts-Warnungen
- note (Hauptfarbe): Hintergrund-Info, alternative Lösung, "wann lohnt sich das"
CALLOUT-CSS WICHTIG
- .callout-body > b:first-child mit display:block für Label
- NICHT .callout-body b global mit display:block (zerstört Inline-Bold)
- Mehrzeiliger Body-Text in <p style="margin:0;"> wrappen wenn Inline-Bolds drin sind
GAP-CSS WICHTIG
- .gap > b:first-child mit display:block für "FRAGE ZUM EINSTIEG"-Label
- NICHT .gap b global mit display:block (zerstört Inline-Bold im Frage-Text)
- Bei Inline-Bolds im Gap-Text wird sonst jedes <b> zum Block
THEMENSPEZIFISCHE ANPASSUNGEN (vor Generierung wählen)
- Hauptfarbe: offizielle Farbe des Themas
- Logo-Buchstabe(n) oder Kürzel
- Version + Stand-Datum
- 15-20 Kapitel-Titel: Internals, Spezial-Themen, Production-Edge
- Themen, die der Mainstream-Entwickler nicht täglich braucht
PFLICHT-ELEMENTE PRO KAPITEL
- 1 Gap-Opener am Anfang
- 2-3 Code-Beispiele (5-15 Zeilen, gleich wie alle anderen Stufen)
- Mindestens 1 Callout
- 1 Recall-Box am Ende
VERMEIDEN
- Wiederholung von Anfänger- und Fortgeschritten-Themen
- Einleitungs-Floskeln ("In diesem Kapitel lernen wir...")
- Übersichts-Inhalt (steht im OnePager)
- Reine Referenz-Tabellen (stehen im Cheatsheet)
- Toy-Beispiele (Production-Niveau zeigen)
- Themen, die der Mainstream-Entwickler täglich braucht
(gehören in Anfänger oder Fortgeschritten)
- page-break mitten in Codeblock oder Callout (page-break-inside: avoid)
- Mehr als 3 Schriftgrößen pro Sektion
- Floats oder absolute positioning (bricht in WeasyPrint)
GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
1. HTML schreiben (sehr langes Dokument, ~3500-5000 Zeilen typisch)
2. weasyprint file.html file.pdf (Timeout 300s, große Datei)
3. PDF zu PNGs: alle Seiten konvertieren (dpi=90 für Memory-Effizienz)
4. Schlüsselseiten ansehen: Cover, TOC, Kapitel 1, mittlere Seite, Ending
5. Prüfen:
- Cover randlos und ohne Footer?
- TOC zeigt alle 3 Teile? (kann auf 2 Seiten brechen bei 15+ Kapiteln, OK)
- Kapitel beginnen auf neuer Seite?
- Code-Blöcke nicht über Seitenumbruch zerrissen?
- Recall-Boxen vollständig sichtbar?
- Footer mit Seitenzahl korrekt?
- Setzt der Guide spürbar Anfänger+Fortgeschritten-Wissen voraus?
- Sind Themen wirklich Experten-/Nischen-Niveau?
- Inline-Bolds in Gap-Openers und Callouts korrekt (nicht als Blöcke)?
6. Bei Problemen: fixen, ab Schritt 2 wiederholen
7. Nach max 3 Iterationen ausgeben
INSTALLATION
- pip install weasyprint pdf2image
- apt install poppler-utils
```

View File

@@ -0,0 +1,166 @@
```
FORTGESCHRITTEN-GUIDE-STIL (HTML/CSS → PDF via WeasyPrint)
FORMAT
- A4 Hochformat, mehrseitig
- @page { size: A4; margin: 22mm 20mm 20mm 20mm; }
- @page :first { margin: 0; } für Cover
- Footer: Seitenzahl Mitte, Guide-Titel rechts (außer Cover)
UMFANG
- 12-15 Kapitel à ~15 Min Lesezeit
- ~1500 Wörter Fließtext pro Kapitel (gleich wie Anfänger)
- 2-3 Code-Beispiele pro Kapitel (gleich wie Anfänger, 5-15 Zeilen)
- 30-50 Seiten gesamt
- ~3-4h Lesezeit gesamt
EINSTIEGSNIVEAU
- Setzt Anfänger-Guide oder gleichwertiges Vorwissen voraus
- Grundbegriffe werden NICHT mehr erklärt
- Verweist bei Bedarf auf Anfänger-Guide
- Geht direkt in fortgeschrittene Patterns und Production-Tools
UNTERSCHIED ZU ANFÄNGER-GUIDE
- Kapitel-Größe IDENTISCH (1500 Wörter, 2-3 Code-Beispiele, 15 Min)
- Unterschied liegt nur in:
- THEMEN (anspruchsvoller, weniger bekannt)
- VORAUSGESETZTEM WISSEN (Grundlagen werden nicht wiederholt)
- REIFE der Code-Beispiele (Production-nah statt Demo)
- KAPITEL-ANZAHL (12-15 statt 8-12)
KAPITEL-PROGRESSION
- Aufgeteilt in 3 Teile mit eigenen TOC-Sektionen
- Beispiele für PHP:
- Teil 1: OOP-Patterns — Interfaces, Traits, Enums, Attribute
- Teil 2: Funktional & Generators — Closures, Higher-Order, Generators, Generics
- Teil 3: Production-Tools — PDO, HTTP-Clients, Static Analysis, Tests
- Jedes Kapitel ist tiefer als ein Anfänger-Kapitel
- Mehr Edge Cases, mehr "warum genau so"
- Production-Code-Niveau
STRUKTUR
1. Cover: vollflächiger Hintergrund, Hero-Aussage mit "tiefer" oder ähnlichem Tone
2. Inhaltsverzeichnis: 3 Teile, nummeriert, mit Zeit-Markern (15 Min)
3. Kapitel 1-12
4. Ending: Spaced-Repetition-Plan, nächste Schritte, Begleitmaterial
KAPITEL-AUFBAU
1. Kapitel-Head: große Nummer + Titel + Subtitle, Trennlinie
2. Gap-Opener: kursiv eingerahmt, konkretes Praxis-Problem
3. 2-4 H2-Sektionen
4. Pro Sektion: Erklärtext + Code-Beispiel + ggf. Callout
5. Recall-Box am Ende (3 Fragen, anspruchsvoller als im Anfänger)
CODE-BEISPIELE
- Realistischer als im Anfänger-Guide (kein "foo/bar")
- Production-nahe Patterns
- TypeScript/Type-Hints idiomatisch
- Echte Library-Namen (Guzzle, Doctrine, PHPStan, Symfony)
- Mehr Edge Cases zeigen
- Länge bleibt 5-15 Zeilen (wie Anfänger)
ELEMENTE
- Fließtext: justify mit Silbentrennung
- Codeblöcke: dunkler Hintergrund, syntax highlighting
- Inline-Code: heller Hintergrund, Hauptfarbe
- Tabellen: Header farbig (Hauptfarbe-Dunkel)
- Callouts in 3 Varianten: tip (grün), warn (rot), note (Hauptfarbe)
- Recall-Box: dunkler Hintergrund mit Akzentfarbe
TYPOGRAFIE
- Body: 10.5pt Serif (Charter), line-height 1.55
- H1 Kapitel: 22pt Sans-Serif bold, Hauptfarbe-Dunkel
- H2 Sektion: 14pt Sans-Serif bold
- H3 Subsektion: 11pt Sans-Serif bold
- Code: 8.5pt Monospace, line-height 1.5
- Inline-Code: 9pt Monospace
- Recall/Callout-Labels: 8pt uppercase, letter-spacing 1pt
- Cover-H1: 56pt Sans-Serif bold, letter-spacing -2pt
FARBEN (max 3 + Neutrals)
- Hauptfarbe: kräftig, an offizielle Farbe des Themas anlehnen
- Hauptfarbe-Dunkel: dunklere Variante für Headings und Akzente
- Hauptfarbe-Darker: noch dunkler für Cover-Verlauf und Recall-Box
- Hintergrund-Soft: helle Variante der Hauptfarbe
- Code-Hintergrund: #1e2a3a (dunkel)
- Text: #1a1a1a / muted #5a6470 / Linie #d8dde3
- Callout-Farben: grün/rot/Hauptfarbe
INFORMATION-GAP-OPENER (PFLICHT pro Kapitel)
- Kursiv, eingerahmt mit Hauptfarbe-Border
- Konkretes Praxis-Problem als Aufhänger
- Niveau: setzt Anfänger-Wissen voraus
- Beispiele:
- "Du hast drei verschiedene Logger Datei, Datenbank, Sentry..."
- "Du sollst die Zeilen einer 5-GB-Logdatei verarbeiten..."
- "SQL-Injection ist seit 20 Jahren die häufigste Web-Sicherheitslücke..."
RECALL-BOX (PFLICHT pro Kapitel)
- Am Kapitel-Ende
- 3 Fragen, anspruchsvoller als im Anfänger-Guide
- Fragen nach Wann/Warum/Wofür statt Was/Wie
- Code-Snippets in Fragen mit Akzentfarbe hervorgehoben
ENDING (PFLICHT)
- Spaced-Repetition-Plan: 4 Karten (Heute, +3 Tage, +14 Tage, +60 Tage)
- Anspruchsvollere Spacing-Abstände als im Anfänger-Guide
- Aufgaben anspruchsvoller (echtes Projekt aufsetzen)
- "Was als nächstes lernen" mit Spezialisierungs-Vorschlägen Richtung Extended
- Verweis auf alle Begleitmaterialien (OnePager, Cheatsheet, Mini, Anfänger)
CALLOUT-NUTZUNG
- tip (grün): Best Practice, idiomatische Lösung, Library-Empfehlung
- warn (rot): Fallen, häufige Anti-Patterns, Sicherheits-Risiken
- note (Hauptfarbe): Hintergrund-Info, alternative Lösung, Querverweis
CALLOUT-CSS WICHTIG
- .callout-body > b:first-child mit display:block für Label
- NICHT .callout-body b global mit display:block (zerstört Inline-Bold)
- Mehrzeiliger Body-Text in <p style="margin:0;"> wrappen wenn Inline-Bolds drin sind
THEMENSPEZIFISCHE ANPASSUNGEN (vor Generierung wählen)
- Hauptfarbe: offizielle Farbe des Themas
- Logo-Buchstabe(n) oder Kürzel
- Version + Stand-Datum
- 12-15 Kapitel-Titel: fortgeschrittene Patterns, Tools, Production-Aspekte
- Keine Wiederholung der Anfänger-Grundlagen
PFLICHT-ELEMENTE PRO KAPITEL
- 1 Gap-Opener am Anfang
- 2-3 Code-Beispiele (5-15 Zeilen, gleich wie Anfänger)
- Mindestens 1 Callout
- 1 Recall-Box am Ende
VERMEIDEN
- Wiederholung von Grundlagen aus dem Anfänger-Guide
- Einleitungs-Floskeln ("In diesem Kapitel lernen wir...")
- Übersichts-Inhalt (steht im OnePager)
- Reine Referenz-Tabellen (stehen im Cheatsheet)
- Toy-Beispiele wie foo/bar (Production-Code zeigen)
- Themen, die in Anfänger oder Extended besser passen
- page-break mitten in Codeblock oder Callout (page-break-inside: avoid)
- Mehr als 3 Schriftgrößen pro Sektion
- Floats oder absolute positioning (bricht in WeasyPrint)
GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
1. HTML schreiben
2. weasyprint file.html file.pdf (Timeout 300s)
3. PDF zu PNGs: alle Seiten konvertieren
4. Schlüsselseiten ansehen: Cover, TOC, Kapitel 1, mittlere Seite, Ending
5. Prüfen:
- Cover randlos und ohne Footer?
- TOC zeigt alle 3 Teile?
- Kapitel beginnen auf neuer Seite?
- Code-Blöcke nicht über Seitenumbruch zerrissen?
- Recall-Boxen vollständig sichtbar?
- Footer mit Seitenzahl korrekt?
- Setzt der Guide spürbar Anfänger-Wissen voraus?
- Sind Code-Beispiele realistisch (kein foo/bar)?
- Inline-Bolds in Callouts korrekt (nicht als Blöcke)?
6. Bei Problemen: fixen, ab Schritt 2 wiederholen
7. Nach max 3 Iterationen ausgeben
INSTALLATION
- pip install weasyprint pdf2image
- apt install poppler-utils
```

View File

@@ -0,0 +1,148 @@
```
MINI-GUIDE-STIL (HTML/CSS → PDF via WeasyPrint)
FORMAT
- A4 Hochformat, 3-4 Seiten
- @page { size: A4; margin: 18mm 18mm 16mm 18mm; }
- Footer: Seitenzahl Mitte, Guide-Titel rechts
UMFANG (einheitlich mit allen Guide-Stufen)
- 1 Kapitel (oder besser: 4-6 Sektionen ohne Kapitel-Struktur)
- ~1500 Wörter Fließtext
- 5-7 Code-Beispiele (sehr kurz, 2-7 Zeilen)
- ~15 Min Lesezeit
- 3-4 Seiten
ZIELGRUPPE — KOMPAKTER ANFÄNGER-EINSTIEG
- Echte Anfänger ohne Programmier-Vorwissen im Thema
- Setzt nur allgemeines Verständnis voraus ("was ist Programmieren")
- Begriffe werden bei erstem Auftreten erklärt
- KEIN Sprach-Charakter-Überblick für erfahrene Entwickler
- KEINE fortgeschrittenen Features (auch wenn cool und kurz)
INHALTLICHE PRINZIPIEN
- Nur absolute Basics zeigen
- Themen, die jemand nach 15 Min selbst nachmachen kann
- Keine Tooling-Komplexität (Paketmanager, Build-Systeme, Compiler)
- Keine Sprach-Spezialitäten (Type-Systeme, Decorators, Generics)
- Keine OOP, wenn möglich (oder nur trivialste Form)
- Erklär-Tiefe vor Feature-Breite
- Lieber 5 Konzepte gründlich als 15 oberflächlich
TYPISCHE 5-SEKTIONEN-STRUKTUR
1. Sprache starten — Installation, erste Datei, erstes Programm
2. Variablen — Konzept + 2-3 Basis-Typen
3. Kontrollfluss — if/else mit einfachem Beispiel
4. Listen + Iteration — Array + Schleife
5. Funktionen — Deklaration + Aufruf + Rückgabe
(Diese Reihenfolge baut aufeinander auf und endet mit etwas Sinnvollem.)
STRUKTUR
1. Kompakter Head: Logo links (16mm), Titel + Subtitle mittig, Badge + Zeit rechts
2. Gap-Opener: Frage zum Einstieg, kursiv eingerahmt, niedrigschwellig
3. 4-6 H2-Sektionen mit Erklärtext + Code-Beispiel + ggf. Callout
ELEMENTE
- Fließtext: justify mit Silbentrennung
- Codeblöcke: dunkler Hintergrund, syntax highlighting, sehr kurz (2-7 Zeilen)
- Inline-Code: heller Hintergrund, Hauptfarbe
- Tabellen: nur wenn wirklich nötig (Vergleichs-Operatoren o.ä.)
- Callouts in 3 Varianten: tip (grün), warn (rot), note (Hauptfarbe)
TYPOGRAFIE
- Body: 10.5pt Serif (Charter), line-height 1.55
- Head h1: 20pt Sans-Serif bold
- H2 Sektion: 13pt Sans-Serif bold
- Code: 8.5pt Monospace, line-height 1.5
- Inline-Code: 9pt Monospace
- Callout-Labels: 8pt uppercase, letter-spacing 1pt
FARBEN (max 3 + Neutrals)
- Hauptfarbe: kräftig, an offizielle Farbe des Themas anlehnen
- Hauptfarbe-Dunkel: dunklere Variante für Akzente
- Hintergrund-Soft: helle Variante der Hauptfarbe
- Code-Hintergrund: #1e2a3a
- Text: #1a1a1a / muted #5a6470 / Linie #d8dde3
- Callout-Farben: grün/rot/Hauptfarbe
GAP-OPENER (PFLICHT)
- Kursiv, eingerahmt mit Hauptfarbe-Border
- Niedrigschwellige Frage, die der Guide beantwortet
- Begeistert mit relevanter Statistik oder Praxis-Bezug
- KEINE Fachbegriffe, die noch nicht erklärt sind
- Beispiele:
- "PHP läuft hinter rund drei Viertel aller Webseiten..."
- "JavaScript ist die Sprache des Webs aber wie schreibt man das eigentliche Code..."
- "Python ist die beliebteste Anfänger-Sprache..."
ERKLÄR-TIEFE PRO KONZEPT
- Konzept benennen (z.B. "Variable")
- In einem Satz erklären, was es ist
- Code-Beispiel mit Kommentaren
- Sprach-Eigenheiten erwähnen (z.B. "in PHP beginnen Variablen mit $")
- KEIN Verweis auf andere Konzepte, die noch kommen
CALLOUT-NUTZUNG
- tip (grün): Übungs-Anregung am Ende, ermutigend
- warn (rot): Anfänger-Stolperfallen ("= vs ==", "vergessenes Semikolon")
- note (Hauptfarbe): Hintergrund-Info, Erklärung einer Sprach-Eigenheit
CALLOUT-CSS WICHTIG
- .callout-body > b:first-child mit display:block für Label
- NICHT .callout-body b global mit display:block (zerstört Inline-Bold)
GAP-CSS WICHTIG
- .gap > b:first-child mit display:block für "FRAGE ZUM EINSTIEG"-Label
- NICHT .gap b global mit display:block (zerstört Inline-Bold im Frage-Text)
THEMENSPEZIFISCHE ANPASSUNGEN (vor Generierung wählen)
- Hauptfarbe: offizielle Farbe des Themas
- Logo-Buchstabe(n) oder Kürzel
- Begrüßungs-Statistik im Gap-Opener
- 4-6 Anfänger-Themen wählen (siehe Standard-Struktur)
PFLICHT-ELEMENTE
- 1 Gap-Opener am Anfang
- 5-7 Code-Beispiele (kurz, 2-7 Zeilen, anfänger-tauglich)
- Mindestens 1 Callout (oft: warn für Stolperfalle, tip für Übung am Ende)
- Inline-Codes für Fachbegriffe
VERMEIDEN
- TOC oder Cover (überdimensioniert für 15 Min)
- Einleitungs-Floskeln ("In diesem Mini-Guide lernen wir...")
- Vollständigkeitsanspruch (gehört in größeren Guide)
- Referenz-Tabellen ohne Erklärtext (gehört in Cheatsheet)
- Recall oder Next-Step am Ende (Mini-Guide endet mit Inhalt)
- Themen, die fortgeschritten sind (auch wenn cool):
- Type-Systems, Type-Hints, Generics
- OOP-Features (außer trivialster Form)
- Tooling (Paketmanager, Build, Linting)
- Sprach-Spezialitäten (PHP: strict_types, readonly, Composer, PSR-4)
- page-break mitten in Codeblock oder Callout (page-break-inside: avoid)
- Mehr als 3 Schriftgrößen pro Sektion
- Floats oder absolute positioning (bricht in WeasyPrint)
- Fachbegriffe ohne Erklärung
- Verweise auf andere Konzepte, die noch kommen
- Edge Cases und "aber"-Sätze
GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
1. HTML schreiben
2. weasyprint file.html file.pdf
3. PDF zu PNGs: alle Seiten konvertieren
4. Alle Seiten ansehen
5. Prüfen:
- Head sauber (Logo überlappt nicht mit Titel)?
- Code-Blöcke nicht über Seitenumbruch zerrissen?
- Callouts vollständig sichtbar?
- Inline-Bolds in Callouts/Gap korrekt (nicht als Blöcke)?
- Footer mit Seitenzahl korrekt?
- Würde ein echter Anfänger das verstehen?
- Wurden alle Fachbegriffe beim ersten Auftreten erklärt?
6. Bei Problemen: fixen, ab Schritt 2 wiederholen
7. Nach max 3 Iterationen ausgeben
INSTALLATION
- pip install weasyprint pdf2image
- apt install poppler-utils
```

View File

@@ -0,0 +1,96 @@
```
ONEPAGER-STIL QUERFORMAT (HTML/CSS → PDF via WeasyPrint)
FORMAT
- A4 Querformat (297mm × 210mm)
- @page { size: A4 landscape; margin: 0; }
- Padding: 9mm 11mm 9mm 11mm
LAYOUT
- Grid: hero+stats (auto) / divider / main (1fr, 3 Spalten) / footer (absolute)
- Stats-Bar in Hero integriert (rechts), spart vertikalen Platz
- Main: 3 Spalten gleich breit, gap 4mm
- Spalten intern: flex-column, gap 4mm
- 6 thematische Blöcke verteilt (2 pro Spalte)
STRUKTUR (in dieser Reihenfolge)
1. Hero: Logo links (22mm), Titel + Untertitel mittig, 4 Stats rechts
2. Divider: 1.5pt schwarze Linie
3. Main-Grid: 6 Blöcke in 3 Spalten
4. Footer: farbige Box mit Kernaussage + Tag (absolute, unten)
UNTERSCHIEDE ZU HOCHFORMAT
- 3 Spalten statt 2 (mehr horizontaler Platz)
- 6 Blöcke statt 4-5
- Stats integriert in Hero statt eigene Zeile
- Kleinere Schriftgrößen (9.5pt Body statt 10pt)
- Kompaktere Code-Blöcke (7pt statt 7.5pt)
BLOCK-AUFBAU
- Titel: 9.5pt bold uppercase, Icon links, Hauptfarbe-Unterstreichung 2pt
- Inhalt: visuell, nicht reine Textbullets
- Varianten: Icon-Liste, Code-Block, Kachel-Grid, Plus/Minus-Spalten, Type-Grid
FARBEN (max 3 + Neutrals)
- Hauptfarbe: an offizielle Farbe des Themas anlehnen
- Hauptfarbe-Dunkel: für Headings
- Hauptfarbe-Darker: für Footer
- Akzentfarbe: kontrastierend
- Hintergrund-Soft: helle Variante der Hauptfarbe
- Code-Hintergrund: #1e2a3a
- Text: #1a1a1a / muted #5a6470 / Linie #e5e5e5
TYPOGRAFIE
- Body: 9.5pt, line-height 1.4
- Hero h1: 20pt bold
- Block-Titel: 9.5pt bold uppercase, letter-spacing 0.5pt
- Stats-Zahl: 14pt bold, Label 6.5pt uppercase
- Code: 7pt monospace, dunkler Hintergrund
- Feature-Text: 8.5pt
- Max 3 Schriftgrößen pro Block
ICONS
- SVG inline, stroke statt fill
- 4mm in Block-Titeln (kleiner als Hochformat wegen kompakter Layout)
- 2.8mm in Kachel-Icons
- currentColor für automatische Anpassung
THEMENSPEZIFISCHE ANPASSUNGEN (vor Generierung wählen)
- Hauptfarbe: offizielle Farbe des Themas
- Logo-Buchstabe(n) oder Kürzel
- 4 Stats: themen-relevante Zahlen
- Block-Auswahl: 6 wichtigste Aspekte für Erstübersicht
VISUELLE ELEMENTE PFLICHT
- Mindestens 1 Code-Block
- Mindestens 1 Kachel-Grid mit Icons (Ökosystem)
- Mindestens 1 Plus/Minus-Split (Modern vs Legacy o.ä.)
- Footer als farbige Box (visueller Anker)
- Stats-Bar im Hero
VERMEIDEN
- Reine Bullet-Listen in jedem Block
- Mehr als 6 Hauptblöcke (Querformat hat eh schon mehr Platz)
- Mehr als 3 Schriftgrößen
- Marketing-Floskeln in Hero
- Floats oder absolute positioning (außer für Footer)
- Vertikal sehr lange Blöcke (würden Spalten unbalanciert machen)
GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
1. HTML schreiben
2. weasyprint file.html file.pdf
3. PDF zu PNG: python -c "from pdf2image import convert_from_path; convert_from_path('file.pdf', dpi=120)[0].save('preview.png')"
4. Preview ansehen mit Read-Tool
5. Prüfen:
- Stats-Bar überlappt nicht mit Titel?
- 3 Spalten balanciert (ähnliche Höhe)?
- Footer nicht abgeschnitten?
- Code-Block lesbar?
- Alle Icons rendern?
6. Bei Problemen: fixen, ab Schritt 2 wiederholen
7. Nach max 3 Iterationen ausgeben
INSTALLATION
- pip install weasyprint pdf2image
- apt install poppler-utils
```