Matthias Scharwies: Makeover für das SELF-Wiki

Am 14. September wurde unser Wiki ein Achtel Jahrhundert (12,5 Jahre) alt! In unserer Vereins-Chronik gibt es einen Überblick mit vielen Screenshots aus vergangenen Jahren.

Wir wollten das unrunde Jubiläum zum Anlass für ein Makeover nehmen, das auf der Mitgliederversammlung 2021 beschlossen wurde.

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 übertragen. [1]
  • die Navigationen des Wiki in der Werkzeugleiste links neu angeordnet
  • die Startseite des Wiki völlig neu gestaltet

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.

Künftig stellt die neue Startseite Interessantes aus dem SELF-Universum vor. Es gibt aber weiterhin unser alphabetisches Inhaltsverzeichnis!

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 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.

<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

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

  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. ↩︎

  1. Hallo Matthias,

    Auf meinem Samsung Galaxy S10+ sieht die Startseite des Wiki etwas kaputt aus:

    screenshot_wiki

    Das Menü bleibt immer aufgeklappt und verdeckt teilweise den Inhalt, dem nur eine schmale Breite gegönnt ist...

    Beste Wünsche - und vielen Dank für deine viele Mühe!
    ottogal

    1. Guten Morgen!

      Danke für die Rückmeldung! Ich/ wir kümmern uns drum!

      Herzliche Grüße

      Matthias Scharwies

      --
      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
  2. Hallo,

    ich wollte ein positives Feedback hinterlassen. 😃 Meine Tochter Marina verwendet diese Website für ihren Informatikunterricht. Sie geht in die 9.Klasse und die Informationen, die man aus dieser Website entnehmen kann sind sehr hilfreich und informativ. Die Website wird ebenfalls von ihrem Lehrer empfohlen und die Schule bzw. die Klase arbeitet sehr gerne damit. Auch ich bin hocherfreut über die preisgegebenen Informationen. Viele Grüße Högenmann👍

    1. Servus!

      ich wollte ein positives Feedback hinterlassen. 😃

      Vielen Dank für die freundlichen Worte. Leider hat das mit dem oben angesprochenen Makeover onch nicht geklappt - wir wind aber weiter dran!

      Herzliche Grüße

      Matthias Scharwies

      --
      Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!