frontend: Fokusmarke bekommt einen eigenen Strahlenkranz in Petrol
Der mit der Cursor-Zeile geteilte Ring war zu leise — „das erkennt man zu wenig" (Nutzer). Damit fällt auch die in D32 als Preis notierte Zweideutigkeit weg: Sie war das Zugeständnis für die Sparsamkeit, und wenn die Sparsamkeit nicht funktioniert, ist das Zugeständnis nicht mehr zu rechtfertigen. Gebaut wie der gelbe Kranz aus D28 (Schein nach außen, Füllung bleibt dem Status, kein Blinken, `z-index:2` gegen das Abschneiden durch später gemalte Geschwister) — aber in PETROL, nicht in Gelb. Die Frage stand ausdrücklich im Raum; die Antwort ist nein, weil die beiden Verschiedenes bedeuten und gleichzeitig auftreten: Gelb ist eine stehende Tatsache über den Plan („seit deinem letzten Besuch live gegangen"), Petrol ein Zuruf („schau jetzt hierhin"). Im Pad-Betrieb ist die Kombination der Normalfall — man zeigt auf das, was sich geändert hat. Wären beide gelb, könnte ein Knoten nicht beides sagen. Der Schein ist helles Teal (#14B8A6), der Ring dunkles Petrol. Die erste Fassung nahm für beides `--or` und wirkte trotz identischer Geometrie leiser als das Gelb. Der Grund ist nicht Geschmack: Ein dunkler Schein auf weißem Grund liest sich als Schatten, ein heller als Licht. Gegen die Stationspunkte des günstigsten Pfads (D18) geprüft statt angenommen — zwei Marken gezielt auf Pfad-Endknoten (mit Punkt), eine daneben (ohne): Der Kranz sitzt eng am Knoten und hat einen harten Ring, der Stationspunkt ist ein großer blasser Fleck ohne Rand. Verwechseln kann man das nicht. Kombinationen ausbuchstabiert, weil sie real vorkommen: `focusmark.current` (Tinte innen, Teal außen) und `fresh.focusmark` (Petrol-Ring innen, Gelb außen — zwei Scheine nach außen gehen nicht). Letztere steht nach der ersten: gleiche Spezifität, und bei allen drei sollen Zuruf und Neuheit gewinnen. SPEC §9 und D32 nachgezogen.
This commit is contained in:
@@ -1284,3 +1284,48 @@ Rahmen neu laden, verlöre man bei jedem Diagramm-Update die Schreibmarke im Pad
|
|||||||
**Haltung daraus:** Der Rahmen ist zum **Mitlesen** gut; für längeres Schreiben
|
**Haltung daraus:** Der Rahmen ist zum **Mitlesen** gut; für längeres Schreiben
|
||||||
ist der eigene Tab die verlässliche Fläche, solange das Cookie nicht
|
ist der eigene Tab die verlässliche Fläche, solange das Cookie nicht
|
||||||
serverseitig auf `SameSite=None` steht.
|
serverseitig auf `SameSite=None` steht.
|
||||||
|
|
||||||
|
**Nachtrag zu D32 — eigener Strahlenkranz in Petrol statt geteilter Ring.**
|
||||||
|
Der geteilte Ring mit der Cursor-Zeile war zu leise: „Das erkennt man zu wenig"
|
||||||
|
(Nutzer). Damit fällt die oben als Preis notierte Zweideutigkeit weg — sie war
|
||||||
|
das Zugeständnis für die Sparsamkeit, und wenn die Sparsamkeit nicht funktioniert,
|
||||||
|
ist das Zugeständnis auch nicht mehr zu rechtfertigen.
|
||||||
|
|
||||||
|
Gebaut wie der gelbe Kranz aus D28 (Schein nach außen, Füllung bleibt dem Status,
|
||||||
|
kein Blinken, `z-index:2` gegen das Abschneiden durch später gemalte
|
||||||
|
Geschwister) — aber **in Petrol, nicht in Gelb**. Die Frage stand ausdrücklich im
|
||||||
|
Raum („oder würdest du dafür auch das gelbe Leuchten nehmen?"), und die Antwort
|
||||||
|
ist nein:
|
||||||
|
|
||||||
|
- Die beiden bedeuten Verschiedenes und treten **gleichzeitig** auf. Gelb ist eine
|
||||||
|
stehende Tatsache über den Plan („seit deinem letzten Besuch live gegangen"),
|
||||||
|
Petrol ein Zuruf („schau jetzt hierhin"). Im Pad-Betrieb ist die Kombination der
|
||||||
|
Normalfall — man zeigt auf das, was sich geändert hat. Wären beide gelb, könnte
|
||||||
|
ein Knoten nicht beides sagen, und bei einem gelben Knoten wüsste niemand mehr,
|
||||||
|
welche der beiden Aussagen gemeint ist. Das wäre genau die Verwechslung, die
|
||||||
|
dieser Nachtrag behebt, nur mit der anderen Farbe.
|
||||||
|
- Die Farblogik ist schon vergeben: Petrol ist im Diagramm die Farbe für
|
||||||
|
Interaktion und Aufmerksamkeit (Fokusring, Alt-Ring, „scharf"-Ring, günstigster
|
||||||
|
Pfad — D18), Gelb die für Status-Neuigkeit. D15 gab Petrol nur für die
|
||||||
|
**Gate-Codierung** auf, nicht als Signalfarbe.
|
||||||
|
|
||||||
|
**Der Schein ist helles Teal (`#14B8A6`), der Ring dunkles Petrol (`--or`).**
|
||||||
|
Die erste Fassung nahm für beides `--or` und wirkte trotz identischer Geometrie
|
||||||
|
leiser als der gelbe Kranz. Der Grund ist nicht Geschmack: Ein **dunkler** Schein
|
||||||
|
auf weißem Grund liest sich als Schatten, ein **heller** als Licht. Reichweite
|
||||||
|
kommt daher vom hellen Teal, die Zuordnung zur Akzentfarbe vom dunklen Ring
|
||||||
|
(3 px, damit er gegen den helleren Schein besteht).
|
||||||
|
|
||||||
|
**Gegen die Stationspunkte geprüft, nicht angenommen.** Der günstigste Pfad legt
|
||||||
|
blasse Petrol-Punkte hinter die Endknoten (D18) — ein petrolfarbener Kranz hätte
|
||||||
|
damit verschwimmen können. Deshalb wurden zwei Marken gezielt auf Pfad-Endknoten
|
||||||
|
gesetzt (mit Punkt) und eine daneben (ohne): Der Kranz sitzt eng am Knoten und
|
||||||
|
hat einen harten Ring, der Stationspunkt ist ein großer blasser Fleck ohne Rand.
|
||||||
|
Sie sind auseinanderzuhalten.
|
||||||
|
|
||||||
|
Kombinationen sind ausbuchstabiert, weil sie real vorkommen: `focusmark.current`
|
||||||
|
(Tinte innen, Teal außen) und `fresh.focusmark` (Petrol-Ring innen, Gelb außen —
|
||||||
|
zwei Scheine nach außen gehen nicht, einer muss der Ring sein). Die Regel für
|
||||||
|
`fresh.focusmark` steht **nach** der für `focusmark.current`: gleiche Spezifität,
|
||||||
|
und wenn alles drei zutrifft, sollen Zuruf und Neuheit gewinnen, nicht die eigene
|
||||||
|
Cursor-Zeile.
|
||||||
|
|||||||
+12
-8
@@ -397,17 +397,21 @@ verknüpft (siehe D25):
|
|||||||
Druck.
|
Druck.
|
||||||
|
|
||||||
### Fokusmarke im Diagramm (`!!!`, §1)
|
### Fokusmarke im Diagramm (`!!!`, §1)
|
||||||
Ein mit `!!!` markierter Knoten trägt **dieselbe Hervorhebung wie die
|
Ein mit `!!!` markierter Knoten trägt einen **Strahlenkranz in Petrol** —
|
||||||
Cursor-Zeile** (weißer Halo + Ring in Tinte) und wird ins Bild geholt — bewusst
|
kräftiger Ring in `--or` (`#0F766E`) plus leuchtender Schein in hellem Teal
|
||||||
kein eigenes Aussehen: Es gibt nur einen Begriff „hier schauen", und ein
|
(`#14B8A6`) — und wird ins Bild geholt. Gebaut wie der gelbe Kranz für „neu in
|
||||||
dritter Ring neben Fokusrahmen, Strahlenkranz (§9) und Cursor-Ring wäre ein
|
Produktion" (§9): Schein nach **außen**, damit die Knotenfüllung dem Status (§4)
|
||||||
Zeichen zu viel.
|
gehört und lesbar bleibt. Kein Blinken.
|
||||||
|
|
||||||
|
- **Die Farbe trägt die Bedeutung:** Gelb heißt „seit deinem letzten Besuch live
|
||||||
|
gegangen" (eine stehende Tatsache), Petrol heißt „jemand zeigt gerade hierauf"
|
||||||
|
(ein Zuruf). Beides kann zugleich zutreffen und muss darum unterscheidbar
|
||||||
|
bleiben; trifft es zusammen, wird der Ring petrol und der Schein gelb.
|
||||||
|
- Trifft die Marke mit der **Cursor-Zeile** zusammen, liegt der Tinte-Ring innen
|
||||||
|
und der Schein außen — die eigene Cursor-Position und der fremde Zuruf bleiben
|
||||||
|
so auseinanderzuhalten.
|
||||||
- Ins Bild geholt wird nur, wenn sich die Marke **ändert** — sonst zöge das
|
- Ins Bild geholt wird nur, wenn sich die Marke **ändert** — sonst zöge das
|
||||||
Diagramm bei jedem Neubau den Blick zurück und man könnte nicht wegscrollen.
|
Diagramm bei jedem Neubau den Blick zurück und man könnte nicht wegscrollen.
|
||||||
- Weil `!!!` im Text steht, sehen **alle** dieselbe Stelle. Der Unterschied zur
|
|
||||||
eigenen Cursor-Zeile ist im Bild nicht zu erkennen; für Screenreader benennt
|
|
||||||
das `aria-label` die Marke ausdrücklich.
|
|
||||||
- Wie die Cursor-Zeile erscheint sie **nicht** im Druck und **nicht** im
|
- Wie die Cursor-Zeile erscheint sie **nicht** im Druck und **nicht** im
|
||||||
Grafikexport: Sie sagt „schau jetzt hierhin", nicht „so ist der Plan".
|
Grafikexport: Sie sagt „schau jetzt hierhin", nicht „so ist der Plan".
|
||||||
|
|
||||||
|
|||||||
+7
-2
@@ -177,8 +177,13 @@ verworfene Elemente. Quelle sind ES-Module unter `src/`; `index.html` ist der
|
|||||||
Schreibmarke im Pad. **Umhängen im DOM lädt jeden `<iframe>` neu** — wer
|
Schreibmarke im Pad. **Umhängen im DOM lädt jeden `<iframe>` neu** — wer
|
||||||
Container um `#srcArea` herum neu aufbaut, wirft die Pad-Sitzung weg.
|
Container um `#srcArea` herum neu aufbaut, wirft die Pad-Sitzung weg.
|
||||||
- Fokusmarke `!!!` (D32, SPEC §1): Parser setzt `focus`, Renderer die Klasse
|
- Fokusmarke `!!!` (D32, SPEC §1): Parser setzt `focus`, Renderer die Klasse
|
||||||
`focusmark`, CSS teilt die Regel mit `.node.current` (ein Begriff „hier
|
`focusmark`, CSS gibt ihr einen **eigenen Strahlenkranz in Petrol** (Nachtrag zu
|
||||||
schauen"). Erkannt **nur alleinstehend** — `(^|\s)!!!(?=\s|$)`, bewusst ohne
|
D32; der geteilte Ring mit `.current` war zu leise). Schein in **hellem** Teal
|
||||||
|
`#14B8A6`, Ring in dunklem `--or`: ein dunkler Schein auf Weiß liest sich als
|
||||||
|
Schatten, ein heller als Licht. Wie bei `.fresh` braucht die Regel `z-index:2`,
|
||||||
|
sonst schneidet ein später gemaltes Geschwister den Kranz ab (D28). Die
|
||||||
|
Kombinationen `focusmark.current` und `fresh.focusmark` sind ausbuchstabiert;
|
||||||
|
letztere steht bewusst **danach** (gleiche Spezifität). Erkannt **nur alleinstehend** — `(^|\s)!!!(?=\s|$)`, bewusst ohne
|
||||||
Lookbehind (Safari erst ab 16.4), sonst verlöre `Achtung!!!` seine
|
Lookbehind (Safari erst ab 16.4), sonst verlöre `Achtung!!!` seine
|
||||||
Ausrufezeichen. Extraktion **nach** den Tags; der Kommentar fällt vorher weg,
|
Ausrufezeichen. Extraktion **nach** den Tags; der Kommentar fällt vorher weg,
|
||||||
eine Marke hinter `%%` wirkt also nicht. `revealFocusMark()` scrollt **nur bei
|
eine Marke hinter `%%` wirkt also nicht. `revealFocusMark()` scrollt **nur bei
|
||||||
|
|||||||
+24
-2
@@ -536,8 +536,24 @@
|
|||||||
nur einen Begriff „hier schauen", und ein dritter Ring neben Fokusring,
|
nur einen Begriff „hier schauen", und ein dritter Ring neben Fokusring,
|
||||||
Strahlenkranz und Cursor-Ring wäre ein Zeichen zu viel. Der Unterschied
|
Strahlenkranz und Cursor-Ring wäre ein Zeichen zu viel. Der Unterschied
|
||||||
steht im `aria-label`. */
|
steht im `aria-label`. */
|
||||||
#out .node.current,
|
#out .node.current{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink)}
|
||||||
#out .node.focusmark{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink)}
|
/* Fokusmarke `!!!` (SPEC §1, D32): **Strahlenkranz in Petrol**, nach dem Muster
|
||||||
|
der Neuheiten-Markierung (D28), nur in der Akzentfarbe der App statt in Gelb.
|
||||||
|
Der geteilte Ring mit der Cursor-Zeile war zu leise — „das erkennt man zu
|
||||||
|
wenig" (Nutzer) —, und ein Ring allein wächst beim Zoomen nicht mit dem
|
||||||
|
Blickbedürfnis. Der Kranz löst zugleich die in D32 hingenommene Schwäche:
|
||||||
|
Cursor-Zeile (Tinte, innen) und fremde Marke (Petrol, außen) sind jetzt
|
||||||
|
unterscheidbar. Kein Blinken (WCAG 2.2.2/2.3.1, vgl. D28), und `z-index`,
|
||||||
|
weil der Schein AUSSERHALB der Knotenbox liegt — ohne ihn malt jedes später
|
||||||
|
kommende Geschwister seinen Hintergrund darüber und schneidet ihn ab. */
|
||||||
|
/* Der Schein ist **helles** Teal (#14B8A6), nicht das dunkle Petrol des Rings:
|
||||||
|
Ein dunkler Schein auf weißem Grund liest sich als Schatten, ein heller als
|
||||||
|
Licht — deshalb wirkte die erste Fassung leiser als der gelbe Kranz aus D28,
|
||||||
|
obwohl die Geometrie dieselbe war. Der Ring bleibt dunkles Petrol und ordnet
|
||||||
|
die Marke der Akzentfarbe zu; das Leuchten macht die Reichweite. */
|
||||||
|
#out .node.focusmark{box-shadow:0 0 0 3px var(--or),0 0 20px 7px rgba(20,184,166,.85);z-index:2}
|
||||||
|
/* Beides zugleich: Cursor-Zeile innen (Tinte), fremde Marke außen (Petrol). */
|
||||||
|
#out .node.focusmark.current{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink),0 0 20px 7px rgba(20,184,166,.85)}
|
||||||
/* Neu in Produktion seit dem letzten Besuch (D28): gelber Strahlenkranz um den
|
/* Neu in Produktion seit dem letzten Besuch (D28): gelber Strahlenkranz um den
|
||||||
Knoten. Bewusst ein Schein nach AUSSEN statt Farbe im Knoten — die Füllung
|
Knoten. Bewusst ein Schein nach AUSSEN statt Farbe im Knoten — die Füllung
|
||||||
gehört dem Status (SPEC §4) und bleibt lesbar. Kein Blinken: WCAG 2.2.2/2.3.1
|
gehört dem Status (SPEC §4) und bleibt lesbar. Kein Blinken: WCAG 2.2.2/2.3.1
|
||||||
@@ -549,6 +565,12 @@
|
|||||||
#out .node.fresh{box-shadow:0 0 0 2px #FACC15,0 0 16px 5px rgba(234,179,8,.65);z-index:2}
|
#out .node.fresh{box-shadow:0 0 0 2px #FACC15,0 0 16px 5px rgba(234,179,8,.65);z-index:2}
|
||||||
/* Beides zugleich: Cursor-Zeile innen (Tinte), Neuheit außen (gelb). */
|
/* Beides zugleich: Cursor-Zeile innen (Tinte), Neuheit außen (gelb). */
|
||||||
#out .node.fresh.current{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink),0 0 18px 6px rgba(234,179,8,.65)}
|
#out .node.fresh.current{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink),0 0 18px 6px rgba(234,179,8,.65)}
|
||||||
|
/* Neu in Produktion UND jemand zeigt darauf: Ring in Petrol (der bewusste
|
||||||
|
Zuruf, innen), Kranz in Gelb (die stehende Nachricht, außen). Zwei Scheine
|
||||||
|
nach außen gingen nicht — einer muss der Ring sein. Steht bewusst **nach**
|
||||||
|
`.node.focusmark.current`: gleiche Spezifität (drei Klassen), und wenn alles
|
||||||
|
drei zutrifft, soll Zuruf + Neuheit gewinnen, nicht die eigene Cursor-Zeile. */
|
||||||
|
#out .node.fresh.focusmark{box-shadow:0 0 0 3px var(--or),0 0 20px 7px rgba(234,179,8,.65);z-index:2}
|
||||||
/* Alt gedrückt = Sprung-Geste scharf: Cursor an allen Knoten, Petrol-Ring am
|
/* Alt gedrückt = Sprung-Geste scharf: Cursor an allen Knoten, Petrol-Ring am
|
||||||
Knoten unter dem Zeiger. Auf verlinkten Knoten ist das die einzige
|
Knoten unter dem Zeiger. Auf verlinkten Knoten ist das die einzige
|
||||||
Rückmeldung, weil dort der einfache Klick dem Link gehört (D25). */
|
Rückmeldung, weil dort der einfache Klick dem Link gehört (D25). */
|
||||||
|
|||||||
Reference in New Issue
Block a user