Level 1 — Vertiefung

HTML-Kurs-Pipeline

Phase 0 bis Phase 6: Vom Bootstrap uber Helpfulness-Scoring bis zu interaktiven HTML-Kursen mit Tiefenkarte.

Auf dieser Seite

Phase 0: Bootstrap — Zielgruppen + Integrationsmodus
Phase 1-2: Analyse & Curriculum — Tiefenkarte erstellen
Phase 3: Foundation — CSS Design-System, Fonts, Farben
Phase 4: Build — Zielgruppen-Pipelines parallel
Phase 5-6: Polish & Tiefenkarte — Cross-Level-Links

Phase 0: Bootstrap

Weichenstellung: Zielgruppen und Integrationsmodus

Phase 0 der Kurs-Pipeline bestimmt die Grundkonfiguration. Welche ZielgruppenDrei vordefinierte Zielgruppen: Anwender (max L2, Schwelle HS>=7), Entwickler (max L3, Schwelle HS>=6), Entscheider (max L1, Schwelle HS>=8). Custom-Zielgruppen sind erweiterbar. sollen bedient werden? Lauft die Pipeline im Standalone-Modus (Codebase wird direkt analysiert) oder im Integrationsmodus (Knowledge-Graph-Daten aus einem vorherigen Verstehen-Lauf werden einbezogen)?

# Phase 0: Bootstrap-Konfiguration
audiences:
  anwender:
    max_depth: L2
    hs_threshold: 7         # Mind. HS 7 fur eigene Seite
    languages: ["de", "en"]
  entwickler:
    max_depth: L3
    hs_threshold: 6         # Mind. HS 6 fur eigene Seite
    languages: ["de", "en"]
  entscheider:
    max_depth: L1
    hs_threshold: 8         # Nur hochrelevante Themen
    languages: ["de", "en"]

integration:
  kg_path: ".claude-learning/knowledge-graph.json"
  mode: "standalone" | "integrated"

Zielgruppen-Profile: Jede Zielgruppe hat eine maximale Tiefe und eine HS-Schwelle. Entwickler bekommen die meiste Tiefe (bis L3), Entscheider nur L1 — aber mit hoherer Qualitatsschwelle.

Im Integrationsmodus werden KG-Daten (Complexity, Fan-in, Layer) fur das HS-Scoring genutzt, was zu objektiveren Bewertungen fuhrt.

Phase 1-2: Analyse & Curriculum

Codebase verstehen, Helpfulness-Scoring, Tiefenkarte erstellen

Phase 1 analysiert die Codebase (oder liest den Knowledge Graph im Integrationsmodus). Phase 2 erstellt das Curriculum: Welche Themen werden auf welchem Level behandelt? Das Helpfulness-ScoringHS = Komplexitat(0-3) + Relevanz(0-3) + Lernwert(0-2) + Eigenstandigkeit(0-2). Maximum: 10. Themen uber der Schwelle bekommen eigene Unterseiten. entscheidet autonom uber die Tiefenstruktur.

Helpfulness-Scoring — Interaktiv

HS = Komplexitat(0-3) + Relevanz(0-3) + Lernwert(0-2) + Eigenstandigkeit(0-2)

Komplexitat: 2

Relevanz: 2

Lernwert: 1

Eigenstandigkeit: 1

Helpfulness-Score: 6 / 10

Entwickler: Eigene Seite | Anwender: Kein Deep-Dive

Die TiefenkarteEin Baum, der zeigt, welche Themen auf welchem Level als eigene Seite existieren und welche nur als Absatz auf der Elternseite eingebettet sind. Die Karte wird in Phase 6 als Transparenz-Report ausgegeben. ist das Ergebnis: ein Baum mit L0 als Wurzel, darunter L1-Themen (HS uber Schwelle), und darunter L2/L3-Themen. Themen unter der Schwelle werden als Absatze auf der Elternseite behandelt.

Phase 3: Foundation

CSS Design-System, Google Fonts, Farbpalette

Phase 3 erstellt die CSS-Foundation, die alle generierten Seiten nutzen. Das Energiekonzern-Design wird als :root-Variablen definiert: Farben, Fonts, Breakpoints. Die Google Fonts (Bricolage Grotesque, DM Sans, JetBrains Mono) werden als Preconnect-Links eingebunden.

/* Phase 3: CSS Custom Properties */
:root {
  /* Farben */
  --color-deep-blue:     #000099;
  --color-impulse-orange: #FE8F11;
  --color-warm-gray:     #E4DAD4;
  --color-warm-gray-bg:  #F3EFEB;
  --color-code-bg:       #000066;
  --color-text:          #1A1A2E;

  /* Fonts */
  --font-display: 'Bricolage Grotesque';
  --font-body:    'DM Sans';
  --font-mono:    'JetBrains Mono';
}

Wichtig: Das CSS wird inline in jede HTML-Datei eingebettet — kein externer Build-Prozess, keine CSS-Datei. Jede generierte Seite ist self-containedEine HTML-Datei, die ohne externe Abhangigkeiten (ausser Google Fonts CDN) funktioniert. CSS und JavaScript sind inline eingebettet. Das ermoglicht Offline-Nutzung und einfaches Teilen..

Phase 4: Build

Zielgruppen-Pipelines parallel, HS-Schwellen, Level-Erzeugung

Phase 4 ist die Hauptbauphase. Pro Zielgruppe lauft eine unabhangige Sub-Pipeline, die alle Seiten fur diese Zielgruppe erzeugt. Innerhalb jeder Sub-Pipeline werden Themen und Sprachen (DE/EN) parallel gebaut.

Parallele Zielgruppen-Pipelines

CUR

Curriculum

Tiefenkarte

➔

ANW

Anwender

L0-L2, HS>=7

➔

DEV

Entwickler

L0-L3, HS>=6

➔

ENT

Entscheider

L0-L1, HS>=8

➔

OUT

HTML

kurs/

Fur jedes Thema, das uber der HS-Schwelle liegt, wird eine eigene HTML-Datei generiert. Die Datei enthalt das komplette Design-System (aus Phase 3), den themenspezifischen Inhalt mit Modulen, Visualisierungen und Code-Blöcken, sowie Navigation (Breadcrumbs, Sibling-Links, Deep-Dive-Links).

Phase 5-6: Polish & Tiefenkarte

Cross-Level-Links, Transparenz-Report, Qualitatskontrolle

Phase 5 (POLISH) fugt Cross-Level-Links hinzu: L0-Seiten erhalten Deep-Dive-Links zu L1-Seiten, L1-Seiten zu L2, usw. Ausserdem werden Sibling-Navigationen (Links zu anderen Seiten auf dem gleichen Level) und Sprachlinks (DE<->EN) eingefugt.

Phase 6 (TIEFENKARTE) erzeugt den Transparenz-Report: Eine Ubersicht, welche Themen welchen HS-Score erhalten haben, welche als eigene Seiten generiert wurden und welche als Absatze eingebettet blieben. Das macht die HS-Entscheidungen nachvollziehbar.

# Tiefenkarte (Transparenz-Report Auszug)
L0 index_dev_de.html
  Skill-Architektur     HS=9  → L1 skill-architektur_dev_de.html
    Phasen-Orchestrierung HS=8  → L2 phasen-orchestrierung_dev_de.html
  Agenten-Pipeline      HS=9  → L1 agenten-pipeline_dev_de.html
    Agenten-Kommunikation HS=8  → L2 agenten-kommunikation_dev_de.html
  Design-System         HS=7  → L1 design-system_dev_de.html
    # Kein L2 — HS der Sub-Themen < 8
  Erweiterbarkeit       HS=5  → Absatz auf L0 (unter Schwelle 6)

HTML-Templates vertiefen