Makeover: semantisches Markup für Vorlagen

[Matthias Scharwies]

Liebe Selfer,

das angedachte Makeover besteht ja aus vielen Komponenten. Eine davon sind die im SELF-Wiki verwendeten Vorlagen:

• Kategorie:!Vorlagen
• Hilfe:MediaWiki/Vorlagen - alle Boxen mal auf einer Seite

Heute geht's mir hauptsächlich um die Hinweise und Warn-Boxen:

HTML

Ist-Zustand:

<div class="note-box note-box-advice">
    <p class="note-box-title">Hinweis</p>
    <div class="note-box-text">...</div>
</div>

Div-Suppe mit Klassen ohne Semantik

Leider kann man in Mediawiki noch keine HTML-Elemente wie aside verwenden. Andererseits würde ein dann erforderliches h3 oder h4 in das automatisierte Inhaltsverzeichnis übernommen. Das könnte man umstellen, dürfte dann aber keine h3 oder h4 in „normalen“ Verzeichniskategorien haben.

Mein Vorschlag:

<div role="note">
    <p role="heading">Hinweis</p>
    <div>...</div>
</div>

Das role="note" habe ich aus dieser Seite der CSSWG übernommen. (Schaut euch die Seite im Seiteninspektor mal in hell und dunkel an!) Es wäre kürzer, müsste aber durch eine Klasse aside, attention, info etc ergänzt werden.

role="heading" wäre genauso lang wie eine Klasse, aber semantischer.

Das div für den Text ist nötig, um neben p auch ul zu ermöglichen.

Die Vorlage:Info könnte eine role="complementary"erhalten und so die Rolle eines footers erhalten.

Was haltet ihr davon?

CSS

Mittelfristig wollen wir ja neben dem „klassischen“ weißen Hintergrund auch einen Dark Mode anbieten. Dazu müssten wir uns überlegen, ob wir die bisherigen Vorlagen so lassen wollen:

• Hinweis, Achtung und Info haben einen massiven Titelbalken und ein pastellfarbenes Textfeld.
• Empfehlung, Beachten, Hauptartikel, etc haben nur einen farbigen Randstreifen links.

Die W3C kombinieren den farbigen Rand links mit einem Pastellfarbenen Hintergrund. Im Dark Mode sind die Felder durch einen Alphawert von 0.5 etwas heller als der Rest - es gibt aber keine farbige Unterscheidung mehr.

1. Sollen wir unsere 2 Versionen behalten oder nur die „schlankere“ Version mit linken Randstreifen verwenden?

2. Sollen wir die Unterscheidung in rot für Warnungen und grün für normale Info beibehalten? Für Leute mit Rot-Grün-Schwäche wäre ein roter Warnkasten und dafür dann „grüne“ Boxen nur mit Rand evtl. besser.

3. Die Farben würde ich erst mal so lassen, müssen dann aber an den Dark Mode angepasst werden. @Der Martin meinte, dass in diesem Beispiel das Grün im Dunklen Modus zu hell wäre. Was meint ihr?

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Liebe Selfer,

Ich habe im Test-Wiki mal ausprobiert: Hilfe:MediaWiki/Vorlagen

1. Sollen wir unsere 2 Versionen behalten oder nur die „schlankere“ Version mit linken Randstreifen verwenden?

Im Prinzip ist nach außen (fast) alles gleich geblieben.

2. Sollen wir die Unterscheidung in rot für Warnungen und grün für normale Info beibehalten? Für Leute mit Rot-Grün-Schwäche wäre ein roter Warnkasten und dafür dann „grüne“ Boxen nur mit Rand evtl. besser.

Das habe ich jetzt mal so ausprobiert.

• {{Hinweis|...}} hat nur einen grünen Rand, aber keinen Hintergrund mehr; ^[1]
• {{Beachten|...}} dafür auch einen hellroten Hintergrund.

Wie findet ihr das?

BTW: Die Begriffsklärungen waren rot umrandet - sind jetzt unter Verlinkungen und Navigationen vereinheitlicht.

Dort war auch die ToDo-Vorlage zu finden, die ich jetzt aber als Note-Box in rot realisiert habe.

Ist das ok so?

Herzliche Grüße

Matthias Scharwies

---

1. Oft wurde die Hinweis-Vorlage eher optisch verwendet. Hier wäre eine Info-Vorlage (role="complementary") passender. ↩︎

[Der Martin]

Hallo Matthias,

(fast) nachträglich nochmal frohe verregnete Weihnachten!

Hilfe:MediaWiki/Vorlagen

1. Sollen wir unsere 2 Versionen behalten oder nur die „schlankere“ Version mit linken Randstreifen verwenden?

Im Prinzip bin ich eher für Minimalismus, d.h. so wenig unterschiedliche Varianten wie möglich. Vor allem bei semantisch ähnlichen Aussagen wie Hinweis, Empfehlung oder Beachten Sie würde ich ein einheitliches Design vorziehen.

Sollen wir die Unterscheidung in rot für Warnungen und grün für normale Info beibehalten? Für Leute mit Rot-Grün-Schwäche wäre ein roter Warnkasten und dafür dann „grüne“ Boxen nur mit Rand evtl. besser.

Das ist ein schwerwiegendes Argument. Aber deine Spielwiese hat die roten Boxen im Moment einmal ohne, einmal mit Titelbalken). Absicht? Wenn ja, warum?

• {{Hinweis|...}} hat nur einen grünen Rand, aber keinen Hintergrund mehr;
• {{Beachten|...}} dafür auch einen hellroten Hintergrund.

Wie findet ihr das?

Ich biete an, die Blöcke Hinweis, Empfehlung usw. (also was jetzt nur den grünen Rand hat) auch in eine Box zu packen - eine grüne ohne Titelbalken. Und alle roten Boxen, die wegen ihrer Wichtigkeit stärker herausstechen sollen, werden mit Titelbalken dargestellt. Das reduziert die Vielfalt, aber gleichzeitig bleiben Boxen mit weniger dramatischem (grün) oder sehr wichtigem Inhalt (rot) deutlich am Titelbalken oder dessen Fehlen unterscheidbar. Wäre das auch ein vernünftiger Weg?

Bleibt die Frage, wie die aktuell graue Info-Box mit Titelbalken in dieses Schema passt. im Moment noch gar nicht, weil sie von jemandem mit Rot-Grün-Schwäche möglicherweise wie die rote Achtung-Box wahrgenommen wird - ich kann das nicht wirklich beurteilen.

Angenehme Ruhetage
 Martin

[Matthias Scharwies]

Servus!

Hallo Matthias,

(fast) nachträglich nochmal frohe verregnete Weihnachten!

Hilfe:MediaWiki/Vorlagen

1. Sollen wir unsere 2 Versionen behalten oder nur die „schlankere“ Version mit linken Randstreifen verwenden?

Im Prinzip bin ich eher für Minimalismus, d.h. so wenig unterschiedliche Varianten wie möglich. Vor allem bei semantisch ähnlichen Aussagen wie Hinweis, Empfehlung oder Beachten Sie würde ich ein einheitliches Design vorziehen.

Sollen wir die Unterscheidung in rot für Warnungen und grün für normale Info beibehalten? Für Leute mit Rot-Grün-Schwäche wäre ein roter Warnkasten und dafür dann „grüne“ Boxen nur mit Rand evtl. besser.

Das ist ein schwerwiegendes Argument. Aber deine Spielwiese hat die roten Boxen im Moment einmal ohne, einmal mit Titelbalken). Absicht? Wenn ja, warum?

• {{Hinweis|...}} hat nur einen grünen Rand, aber keinen Hintergrund mehr;
• {{Beachten|...}} dafür auch einen hellroten Hintergrund.

Wie findet ihr das?

Ich biete an, die Blöcke Hinweis, Empfehlung usw. (also was jetzt nur den grünen Rand hat) auch in eine Box zu packen - eine grüne ohne Titelbalken. Und alle roten Boxen, die wegen ihrer Wichtigkeit stärker herausstechen sollen, werden mit Titelbalken dargestellt. Das reduziert die Vielfalt, aber gleichzeitig bleiben Boxen mit weniger dramatischem (grün) oder sehr wichtigem Inhalt (rot) deutlich am Titelbalken oder dessen Fehlen unterscheidbar. Wäre das auch ein vernünftiger Weg?

Jein, klingt aber logisch. Problem ist die {{Vorlage|Beachten|,|...}}, die gleich mit "Beachten Sie, dass ..." anfängt.

Für mich wirkt diese Vorlage jetzt aufdringlich, da ich den hellroten Hintergrund (noch) nicht gewohnt bin.

Bleibt die Frage, wie die aktuell graue Info-Box mit Titelbalken in dieses Schema passt.

Ich hatte auch überlegt, die rechten Aside-Boxen als gelbe Post-Its zu gestalten. Das würde bei 100% Breite aber komisch aussehen.

im Moment noch gar nicht, weil sie von jemandem mit Rot-Grün-Schwäche möglicherweise wie die rote Achtung-Box wahrgenommen wird - ich kann das nicht wirklich beurteilen.

Grad gefunden: toptal.com/colorfilter

Bin beeindruckt, dass selbst blau anders aussieht (ist mit ein bisschen Nachdenken aber logisch bei RGB).

Mir geht es erst mal um die passende HTML-Struktur (ist weitgehend fertig), dann um die nötigen CSS-Selektoren. Anpassungen können jetzt sehr schnell gemacht werden - idealerweise nach/ bei einer Video-Konferenz.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Die Vorlagen dienen ja dazu durch Textbausteine ein einheitliches Design zu erreichen. Die Beispiel-Vorlage gehört auch zu den (oben besprochenen) Kästen, obwohl mittlerweile nur noch der linke, gelbe Rand von Titelzeile und Umrandung und Hintergrundfarbe übrig geblieben ist. ^[1]

Sie wird hier erklärt: Vorlage:Beispiel

Es war mir gar nicht mehr bewusst, dass es einen Helferlein/Viewport-Emulator gibt, den man auch in die Beispiel-Vorlage integrieren kann:

Vorlage:Beispiel#anklickbar und mit Link zum Viewport-Emulator

Das ist ja mittlerweile obsolet oder? Kann man den entfernen?

---

Das thematisch dazugehörende Frickl-Makeover wird hier diskutiert:

https://github.com/SELFHTML/SelfTrack/issues/5

Herzliche Grüße

Matthias Scharwies

---

1. Das könnte im Dark Mode zu Problemen führen. Die heute übliche Notierung innerhalb eines <source lang="xyz">...</source> mit Syntax-Highlighting erfordert eigentlich einen weißen (oder zumindest hellen) Hintergrund. ↩︎

[Felix Riesterer]

Lieber Matthias,

Es war mir gar nicht mehr bewusst, dass es einen Helferlein/Viewport-Emulator gibt, den man auch in die Beispiel-Vorlage integrieren kann:

Vorlage:Beispiel#anklickbar und mit Link zum Viewport-Emulator

dieses Feature wurde in der Tat kaum genutzt. Anfänglich hatte ich den Eindruck, dass es sehr begeistert aufgenommen wurde, nur um dann ganz schnell in der Bedeutungslosigkeit zu verschwinden.

Das ist ja mittlerweile obsolet oder?

Wer am Desktop entwickelt, hat in der Regel ein genügend breites Display, um mit den Entwicklerwerkzeugen seines Browsers ein wesentlich flexibleres Werkzeug zur Verfügung zu haben, inklusive simulierbaren Touch-Verhaltens. Das kann der Viewport-Emulator niemals leisten. Auch kann er kaum auf kleinen Displays sinnvoll verwendet werden. Da er aktuell zu primitiv gestrickt ist, um sich bei kleinen Displays komplett zu verweigern, ist er auch in meinen Augen obsolet geworden.

Kann man den entfernen?

Man kann. Dazu gehört aber zunächst, dass man die Verwendungen im Wiki alle aufspürt, was ich mangels Ahnung nicht leisten kann. Wenn man dann die Vorlage entfernt hat, ist er im Prinzip entfernt, ohne dass man sich um die PHP-Bestandteile in der SELFHTML-Extension im Mediawiki Gedanken machen müsste.

Liebe Grüße

Felix Riesterer

[Matthias Scharwies]

Lieber Felix!

Danke für Dein Feedback!

Kann man den entfernen?

Man kann. Dazu gehört aber zunächst, dass man die Verwendungen im Wiki alle aufspürt, was ich mangels Ahnung nicht leisten kann.

Das geht über eine Volltextsuche im Offline-Wiki.

Man kann aber auch die zusätzliche Option (die es analog zur zeige=Beispiel:... ja war) einfach aus der Vorlage entfernen.

(Das werde ich auch mit der Vorlage:Fortsetzung so machen. Die Pfeile und die blaue Linkfarbe sollten eine Titelzeile erübrigen.)

Wenn man dann die Vorlage entfernt hat, ist er im Prinzip entfernt, ohne dass man sich um die PHP-Bestandteile in der SELFHTML-Extension im Mediawiki Gedanken machen müsste.

Genau!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Weihnachten und Familie halten mich zur Zeit vom Computer fern. Deswegen kann ich zu deinen Überlegungen noch zu wenig sagen.

Den Viewport-Emulator hatte ich als Name mal irgendwo gesehen, aber keine Ahnung gehabt, wie man ihn nutzt, wozu er da ist und wie man rankommt. Ist der irgendwo prominent präsentiert und ich habe das lediglich übersehen? Ich hatte gedacht, das wäre ein Vorläufer des Frickl gewesen. Aber das war dann wohl ein Irrtum.

Rolf

[Matthias Scharwies]

Lieber Rolf,

Weihnachten und Familie halten mich zur Zeit vom Computer fern.

Genieß die Zeit! Ich fahre jetzt erst nach Hannover, bin dadurch aber wieder mehrere Stunden im Zug.

Den Viewport-Emulator hatte ich als Name mal irgendwo gesehen, aber keine Ahnung gehabt, wie man ihn nutzt, wozu er da ist und wie man rankommt. Ist der irgendwo prominent präsentiert und ich habe das lediglich übersehen?

Ja, in der Hilfe: Vorlage:Beispiel 😀

Sonst war der aber schon 2014 obsolet, da man das gleiche mit Firebug erreichen konnte.

Man muss halt alle 10 Jahre mal drüberschauen, ob's überhaupt verwendet wird.

Ich habe jetzt die Vorlagen URLmove, Löschen, Vergleiche, Browsericon und Browsericonset (mit Versionsnummern) gelöscht, da sie eh niemand mehr verwendet. Die Alt-Vorkommen sind bereits beseitigt.

Deswegen kann ich zu deinen Überlegungen noch zu wenig sagen.

Kein Problem, das sind ja alles Vorüberlegungen und Vorarbeiten.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Liebe Selfer,

das angedachte Makeover besteht ja aus vielen Komponenten. Eine davon sind die im SELF-Wiki verwendeten Vorlagen:

• Hilfe:MediaWiki/Vorlagen - alle Boxen mal auf einer Seite im Test-Wiki

Ich habe das HTML-Markup geändert:^[1]

<div role="note">
    <p role="heading">Hinweis</p>
    <div>...</div>
</div>

Dark Mode

Mittelfristig wollen wir ja neben dem „klassischen“ weißen Hintergrund auch einen Dark Mode anbieten.

Hier ein erstes Zwischenergebnis: bplaced.net/makeover

Man kann mit den Entwicklertools (oder im OS) zwischen hellem oder dunklen Modus hin- und her schalten. Der helle Modus sieht eigentlich aus wie immer, die geänderten Vorlagen fallen imho nicht weiter auf.

Aber im Dunklen Modus:

1. Als Hintergrundfarbe wollen wir kein schwarz, #003war noch zu grell @Rolf B fand den Kompromiss #112. Wie findet ihr's?
2. Das S-Logo ist im hellen Modus transparent und für mich ein weißes "S". Deshalb stört mich das dunkle "S" im Dunklen Modus ein wenig - andere im Online-Stammtisch aber nicht.
3. Größtes Problem ist die Farbe der role="navigation"-Blöcke wie sidebar, TOC und Text-Info. Da müssen wir noch mal ran und besonders an Text- und Linkfarben, um ausreichende Kontraste zu erzielen.
4. die Hinweise und Warn-Boxen wie Empfehlung, Beachten, Hinweis, etc haben nur einen farbigen Randstreifen links.
   • Die roten Hinweisboxen gibt es nur für sicherheitskritische Hinweise; die grünen Hinweis-Boxen sind jetzt neutraler, einige wurden entweder zu {{Achtung| oder zu {{Info| (role="complementary")
   • ToDo-Boxen sind nicht mehr blau (Linkfarbe), sondern rot.
5. Bei den Verlinkungen und Navigationen haben die Begriffsklärungen ihren Hintergrund verloren. Dafür habe ich in der Wikipedia ein passendes Icon gefunden.
6. die Beispiele haben ja CodeSnippets mit Syntax-Highlighting. Entweder färben wir die Boxen im Dunklen Modus gelb ein, was evtl. noch zu grell wirkt - oder wir entwickeln ein eigenes CSS für die einzelnen Klassen.
7. Ganz unten gibt es die cat-links. Für die und das Breadcrumb-Menü oben habe ich noch keine Idee.
8. Oben rechts seht ihr zwei neue Buttons. Hier sollen die Navigationen dynamisch versteckt und nur auf button-Click geöffnet werden. Die sind zur Zeit noch ohne Funktion!

Ich habe die SELF/Farben mal in unterschiedlichen Helligkeitsstufen ausprobiert. Evtl. finden wir hier passende Farbtöne

Weitere Vorgehensweise:

1. Farbvorschläge + Verbesserungen einarbeiten. (Die Farbpalette kann als custom properties definiert und im Dunklen Modus dann bequem aufgerufen werden. Das können mittlerweile alle Browser!)
2. neues Skin erstellen, wobei wohl alles in JS im MediaWiki.Common.js möglich ist.
3. mehrere Wochen im Test-Wiki testen

Herzliche Grüße

Matthias Scharwies

---

1. Das role="note" habe ich aus dieser Seite der CSSWG übernommen. (Schaut euch die Seite im Seiteninspektor mal in hell und dunkel an!) Es wäre kürzer, müsste aber durch eine Klasse aside, attention, info etc ergänzt werden. ↩︎