Makeover für das SELF-Wiki
bearbeitet von Matthias Scharwies# 1. Landing page
Die bisherige *Landing Page* unter selfhtml.org wurde depubliziert und in das SELF-Wiki integriert.
Dafür wurden …
* die Inhalte der *Landing Page* auf die Seite [SELFHTML:Verein](https://wiki.selfhtml.org/wiki/SELFHTML:Verein) übertragen. [^1]
* die Navigationen des Wiki in der Werkzeugleiste links neu angeordnet
* die [Startseite des Wiki](https://wiki.selfhtml.org/wiki/) völlig neu gestaltet
[^1]: Die bisherige Landing Page war nur über github erreichbar und so nur schwierig zu aktualisieren. Andererseits waren ihre Inhalte wie das *mission statement* oft bereits an anderer Stelle als *duplicate content* vorhanden.
# 2. Startseite
Bisher wurde die Startseite per JavaScript zum „Inhaltsverzeichnis“ umbenannt. Sie war eher eine alphabetische Linksammlung, in der viele Links doppelt und dreifach präsentiert wurden.
[![](/images/4b655ab0-96c9-11ec-8367-b42e9947ef30.png?size=medium)](/images/4b655ab0-96c9-11ec-8367-b42e9947ef30.png)
Künftig stellt die neue [Startseite](https://wiki.selfhtml.org/wiki/) Interessantes aus dem SELF-Universum vor. Es gibt aber weiterhin unser [alphabetisches Inhaltsverzeichnis](https://wiki.selfhtml.org/wiki/Inhalt)!
# 3. CSS und Dark Mode
Um das Wiki barrierefreier zu machen, wurden die seit 2010 verwendeten Vorlagen geprüft und überarbeitet. Viele, weniger oft benutzte Vorlagen wurden ersetzt; die [Vorlage:Iconset](https://blog.selfhtml.org/2022/feb/22/geht-das-auch-im-ie-eine-geschichte-der-iconsets-zur-browserunterstutzung) depubliziert.
Leider beschränkt sich die Mediawiki-Software, um eine Kompatibilität auch mit ältesten Browserversionen zu garantieren, auf HTML4.01-Elemente. Deshalb wurden die inhaltsleeren div-Elemente zumindest mit role-Attributen anstelle von nicht zugänglichen Klassen versehen.
~~~ HTML
<div role="note">
<p role="heading">Hinweis</p>
<div>...</div>
</div>
~~~
Das CSS wurde behutsam angepasst und bis auf wenige Ausnahmen werden die Vorlagen jetzt ohne farbigen Hintergrund gestaltet. So wirkt es weniger bunt und ermöglicht höhere Kontraste, die das Lesen erleichtern.
[![Vorlagen und Boxen - vor und nach dem Wiki-Makeover](/images/421baae4-2c11-11ed-ad02-b42e9947ef30.png?size=medium "Vorlagen und Boxen - vor und nach dem Wiki-Makeover")](/images/421baae4-2c11-11ed-ad02-b42e9947ef30.png)
Zusätzlich ermöglicht das CSS nun das Eingehen auf Benutzerwünsche. Es gibt einen Dark Mode, der bei entsprechenden Einstellungen im OS oder Browser aktiviert wird, sowie den Verzicht auf Animationen bei entsprechenden Settings.
Blog-Serie zum Makeover 2022
1. **Makeover für das SELF-Wiki**
2. Oranger Text auf weißem Grund?
3. Icons und Grafiken
Makeover für das SELF-Wiki
bearbeitet von Matthias Scharwies# 1. Landing page
3. Die Landing Page unter selfhtml.org wurde depubliziert und stattdessen die Startseite des Wiki aufgefrischt.<br>Dafür wurden die …
- [Startseite des Wiki](https://wiki.selfhtml.org/wiki/) völlig neu gestaltet
- die Inhalte der *Landing Page* auf die Seite [SELFHTML:Verein](https://wiki.selfhtml.org/wiki/SELFHTML:Verein) übertragen. [^1]
[^1]: Die bisherige Landing Page war nur über github erreichbar und so nur schwierig zu aktualisieren. Andererseits waren ihre Inhalte wie das *mission statement* oft bereits an anderer Stelle als *duplicate content* vorhanden.
# 2. Startseite
Bisher wurde die Startseite per JavaScript zum „Inhaltsverzeichnis“ umbenannt. Sie war eher eine alphabetische Linksammlung, in der viele Links doppelt und dreifach präsentiert wurden.
[![](/images/4b655ab0-96c9-11ec-8367-b42e9947ef30.png?size=medium)](/images/4b655ab0-96c9-11ec-8367-b42e9947ef30.png)
Künftig stellt die neue [Startseite](https://wiki.selfhtml.org/wiki/) Interessantes aus dem SELF-Universum vor.
# 3. CSS und Dark Mode
Um das Wiki barrierefreier zu machen, wurden die seit 2010 verwendeten Vorlagen geprüft und überarbeitet. Viele, weniger oft benutzte Vorlagen wurden ersetzt; die [Vorlage:Iconset](https://blog.selfhtml.org/2022/feb/22/geht-das-auch-im-ie-eine-geschichte-der-iconsets-zur-browserunterstutzung) depubliziert.
Leider beschränkt sich die Mediawiki-Software, um eine Kompatibilität auch mit ältesten Browserversionen zu garantieren, auf HTML4.01-Elemente. Deshalb wurden die inhaltsleeren div-Elemente zumindest mit role-Attributen anstelle von nicht zugänglichen Klassen versehen.
~~~ HTML
<div role="note">
<p role="heading">Hinweis</p>
<div>...</div>
</div>
~~~
Das CSS wurde behutsam angepasst und bis auf wenige Ausnahmen werden die Vorlagen jetzt ohne farbigen Hintergrund gestaltet. So wirkt es weniger bunt und ermöglicht höhere Kontraste, die das Lesen erleichtern.
[![Vorlagen und Boxen - vor und nach dem Wiki-Makeover](/images/421baae4-2c11-11ed-ad02-b42e9947ef30.png?size=medium "Vorlagen und Boxen - vor und nach dem Wiki-Makeover")](/images/421baae4-2c11-11ed-ad02-b42e9947ef30.png)
Zusätzlich ermöglicht das CSS nun das Eingehen auf Benutzerwünsche. Es gibt einen Dark Mode, der bei entsprechenden Einstellungen im OS oder Browser aktiviert wird, sowie den Verzicht auf Animationen bei entsprechenden Settings.
Blog-Serie zum Makeover 2022
1. Makeover nach 12 Jahren
2. Oranger Text auf weißem Grund?
3. Icons und Grafiken