MisterDAOS/visualizar

Was macht visualizar?

Ein visuelles Element kommt nur dann in die Stunde, wenn es etwas zeigt, das Worte nicht gut zeigen: Form, Struktur, Richtung, Beziehung, Proportion, Raum. Ein dekoratives visuelles Element oder eines, das den Text wiederholt, erhöht die kognitive Last und kann sogar falsch sein. Im Zweifel nicht machen: Ein fehlendes visuelles Element kostet weniger als ein falsches.

1. Wählen Sie den Typ

Die Idee ist …	Block	Beispiel
Beziehung, Abhängigkeit, Fluss, Ursache → Wirkung	aula.diagrama (Mermaid graph TD/LR)	Wie der Selic-Zins den Brotpreis beeinflusst
Abfolge von Interaktionen zwischen Akteuren	aula.diagrama (sequenceDiagram)	Phasen eines Gerichtsverfahrens
Zeitstrahl	aula.diagrama (timeline)	Brasilianische Verfassungen
Hierarchie / Klassifikation	aula.diagrama (graph TD oder mindmap)	Hierarchie der Rechtsnormen
Numerische Daten, Proportion, Geometrie, Grundriss	aula.figura (handgezeichnetes SVG)	Inflation Monat für Monat
Ein Werk, Objekt oder realer Ort	aula.imagem	Der Palácio da Alvorada

2. Reduzieren, bis nur noch die Idee übrig ist

• Eine Idee pro visuellem Element. Wenn zwei nötig sind, sind es zwei visuelle Elemente.
• Maximal ~7 Elemente (Knoten, Balken, Beschriftungen). Fragen Sie bei jedem: "Wenn ich das entferne, bleibt die Idee klar?" Wenn ja, entfernen Sie es.
• Kurze Beschriftungen: ein Wort oder Ausdruck, keine Sätze.
• Kein Titel innerhalb des Diagramms (der Block hat bereits titulo).

3. Visuelles Element und Erklärung zusammenführen (Kontiguität, ohne Redundanz)

• Verwenden Sie das Feld texto des Blocks: Die Erklärung erscheint daneben (oder gleich darunter, wenn das visuelle Element breit ist).
• Der Text beschreibt das visuelle Element nicht Element für Element – er sagt, wohin man schauen soll und was man schlussfolgern soll ("Beachten Sie, dass der Pfeil zurückgeht: Es ist ein Kreislauf.").
• Wenn eine Beschriftung im visuellen Element stehen kann, bleibt sie dort, nicht in einer separaten Legende.

4. Regeln pro Typ

Mermaid

• Text mit Sonderzeichen oder R$ wird in Anführungszeichen gesetzt: A["R$ 1.000"].
• Zeilenumbruch in einer Beschriftung: <br/>.
• graph TD (von oben nach unten) für Grundlagen → Konsequenzen; graph LR für zeitliche Prozesse.

SVG (Abbildungen und Diagramme)

• Berechnen Sie die Koordinaten mit einem Skript (z. B. node -e "..."), nicht "nach Augenmaß": falsche Proportionen lügen.
• viewBox mit Rand, font-family="Inter, sans-serif", Texte mit fill="currentColor" (funktioniert im hellen und dunklen Modus).
• Maximal 2 Datenfarben + neutral. Datenquelle in der legenda.

Bilder

• Verwenden Sie in Architektur-, Design- und Kunststunden Kontrastpaare (ein Fall, der scheitert × einer, der gelingt), in zwei aufeinanderfolgenden aula.imagem-Blöcken, mit dem Titel "Vorher: …" / "Nachher: …". Fordern Sie die Lernenden auf, zuerst zu schauen und dann zu lesen. Der texto sagt, wohin man schauen soll und was das Bild nicht zeigt (Grundriss, Maßstab, Material, Kontext), und beschreibt nur, was man sieht.
• Bevorzugen Sie Wikimedia Commons. Überprüfen Sie auf der Dateiseite den Autor und die Lizenz und füllen Sie credito, licenca und link aus (die Dateiseite).
• Verwenden Sie den direkten Bildlink (upload.wikimedia.org/...) in src.
• Verwenden Sie niemals ein Bild ohne Quellenangabe oder von einer Website, die die Vervielfältigung verbietet.

5. Prüfen durch Anschauen – Pflicht

Dass das Rendern fehlerfrei ist, beweist nicht, dass das visuelle Element richtig ist. Nach dem Schreiben des Blocks:

1. Warten Sie ~3 Sekunden (die Seite aktualisiert sich automatisch).
2. [Claude Code] Scrollen Sie im App-Browser zum Block und machen Sie einen Screenshot (z. B. javascript_tool mit document.querySelectorAll('[data-tipo="diagrama"]') → letztes → scrollIntoView(), dann computer → screenshot). Bei anderen Agenten: Bitten Sie die Lernenden, hinzuschauen und zu bestätigen.
3. Prüfen Sie kritisch:
   • Zeigt jeder Pfeil in die richtige Richtung? Ist jede Beziehung wahr?
   • Stimmen die Zahlen und Proportionen mit den Daten überein?
   • Ist eine Beschriftung abgeschnitten, überlappend oder unleserlich?
   • Ist ein roter Rahmen "Fehler im Diagramm" erschienen? → Korrigieren Sie die Syntax.
   • Bild: Geladen? (img.naturalWidth > 0)
   • Kann man die Idee allein durch Anschauen verstehen?
4. Korrigieren und erneut prüfen. Wenn Sie kein korrektes und klares visuelles Element erstellen können, entfernen Sie den Block und erklären Sie es in Textform.