``` 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
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 ```