147 lines
5.4 KiB
Markdown
147 lines
5.4 KiB
Markdown
```
|
|
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
|
|
``` |