MediaWiki Skins – Das Auge liest mit

Der Aufbau und das Design der meisten Wikis sehen aus wie die mittlerweile zehn Jahre alte Wikipedia. Doch es geht auch anders. Wer seinem Wiki ein anderes Gesicht geben will, muss einen anderen Skin verwenden. Mit dem Aussehen ändert sich auch die Handhabung einer MediaWiki-Installation. Ich habe hier ein paar Hinweise und Ideen dazu zusammengetragen und erläutere auch kurz die geplanten Schritte im BlueSpice Skin.

MediaWiki wird vielfältiger

Betrachtet man die Wikimedia-Projekte, verwenden diese alle den aktuellen „Vector“-Skin. Vector wurde 2009 für das MediaWiki 1.16+ im Rahmen der Wikipedia Usability Initiative  entwickelt und bringt schon eine klarere Darstellung und Usability-Verbesserungen gegenüber seinem Vorgänger Monobook. Zusätzlich lassen sich einige besondere Funktionen als Vector-Extension herunterladen.

MediaWiki arbeitet bereits an der Weiterentwicklung des Standard-Skins. Die nächste Stufe, der Athena-Skin, wird u.a. mobile Geräte unterstützen. Einen visuellen Eindruck von Athena erhält man hier.

Einen etwas umfangreicheren Ansatz für einen mögliche Neugestaltung der Wikipedia findet man unter Wikipediaredefined. Hier hat eine von der Wikimedia Foundation unabhängige Werbeagentur einen möglichen Entwurf für das zukünftige Design der Wikipedia veröffentlicht. Das ist ganz interessant. Die Designer erläutern ihre Beweggründe und die Entwicklung ihres Entwurfes.  Die Änderungen beschäfigen sich v.a. mit der Übersichtlichkeit der dargestellten Informationen. Das nüchterne Design lenkt den Fokus auf den Inhalt und bezieht sich mit großen Schaltflächen und einer sehr „eckigen“ Darstellung auf die aktuellen Google+ und Windows 8 Layouts. Diese zielen stärker auf Tablet-User und sonstige mobile Gerät ab.

wikiHow - Das Anleitungs-Wiki
wikiHow – Das Anleitungs-Wiki

Es kommt also Bewegung in das Skinning von Wikipedia und auch von MediaWiki. Die Auswahl an verfügbaren alternativen Skins für MediaWiki ist allerdings noch überschaubar. Das hat zum einen damit zu tun, dass beispielsweise ein WordPress mit seinen reichen Auswahl an Themes zehn Mal mehr Downloads und damit auch mehr Installationen hat. Die Entwickler-Community ist einfach größer und damit auch die Zahl der kommerziellen Skin-Anbieter. Zum anderen legen viele Wikibetreiber darauf wert, dass das Wiki wie die Wikipedia aussieht, um  den Wiedererkennungseffekt zu nutzen und die Akzeptanz der Mitautoren nicht zu gefährden. Doch hier ändert sich langsam die Stimmung und so erleben wir sowohl im Web als auch bei unseren MediaWiki-Kunden ein größeres Interesse an neuen, individuellen  Designs als noch vor wenigen Jahren.

Einen Überblick über alternative Skins erhält in der Galerie der MediaWiki Seite. Weitere schöne Beispiele findet man aber auch hier:

Ein sehr weitgehender Entwurf ist der Skin von wikiHow. WikiHow wirkt auf den ersten Blick eher wie ein typischer Blog. Oben werden groß die Aktionen dargestellt, die ein Nutzer auf dieser Plattform machen kann. Kennzeichnende Wikifunktionen wie Artikel anlegen, Letzte Änderungen, aber auch die Navigation befinden sich auf der rechten Seite in einem Menü, das stark an die Widgetleiste von WordPress erinnert. Der Fokus liegt somit zunächst auf vorhandenen Artikeln und Kategorien. Die typischen „Bearbeiten“-, „Diskussion“- und „Version“-Felder, sieht man dann erst auf den Unterseiten. Eine Navigation und weitere Verlinkungen befinden sich im Übrigen ganz am Ende der Seite.

Beispiele basierend auf BlueSpice

Knowledge Base der DESERTEC Foundation (MediaWiki/BlueSpice)
Knowledge Base der DESERTEC Foundation

Schauen wir kurz in die Welt von BlueSpice. BlueSpice ist eine freie MediaWiki-Distribution für Unternehmen und Organisationen.

DESERTEC hat mit  der DESERTEC Knowledge Platform eine Wissensplattform für erneuerbare Energien gestartet. Die Plattform beruht auf MediaWiki, funktional erweitert mit BlueSpice free. Im Unterschied zu Wikipedia gibt es im Header ein Banner, das zusätzlich Links auf die wichtigsten Themenportale enthält. Ansonsten nutzt DESERTEC wie die Wikipedia die gesamte Bildschirmbreite und sorgt so für einen gewissen Wiedererkennungseffekt.

Beim Standardskin von BlueSpice zeigen sich etwas andere Gestaltungsmerkmale als bei DESERTEC. Der Standardskin ist eigentlich eine Antwort auf die MediaWiki Usability Initiative auf Business-Ebene. Außerdem bringt die Distribution ein sehr umfangreiches Set an Zusatzfunktionen mit. Diese sollten aber nicht von den Inhalten ablenken.

Das Firmenwiki BlueSpice for MediaWiki
Skin des Firmenwikis BlueSpice

Zu diesem Zweck wurde die Navigation etwas aufgeteilt und mit Reitern unterstützt. Damit gewinnt man Flexibilität und hat auch als Nutzer die Möglichkeit individuell einzugreifen.
Um mehr Raum für den Inhalt zu bieten, wurde auf ein Banner verzichtet. Lediglich eine Navigationsleiste sichert Raum für die Suche, die persönlichen Einstellungen, die Verlinkung anderer Anwendungen, wie den Link zum Unternehmensblog oder in das CRM-System.
Wie bei wikiHow gibt es hier die Idee, eine blog-ähnliche Widgetbar einzurichten. BlueSpice bietet eine individuelle Widgetbar, die man auf Knopfdruck öffnen und schließen kann. Für Funktionen und Einblendungen, die alle Nutzer betreffen (Anzeigen oder automatisierte Anzeigen zum Beispiel Nachrichten aus anderen Business-Anwendungen) ist rechts bewusst Platz gelassen.
Für den jeweiligen Artikel relevanten Informationen, wie Kategorien, Autoren oder Unterseiten werden zusammengefasst. Funktionen, die man nicht so häufig einsetzen muss oder die durch Erweiterungen angeboten werden, landen in der Widgetbar.

Gestaltung der Startseite von BlueForge
Gestaltung der Startseite von BlueForge

Linksbündig und mit einer festen Breite versehen, ist der Auftritt aber auch deshalb schmaler, um die Inhalte schneller erfassbar zu machen. Diese Taillierung ist auch eine Anpasung an Sehgewohnheiten im Web. Dort erlebten Webpräsenzen mit schmaleren und zentrierten Inhaltsbereichen einen regelrechten Boom. Trotzdem wird oft nach einem BlueSpice-Skin für die ganzer Bildschirmseite nachgefragt, wie man ihn bei DESERTEC sieht. Schon bald können diese unterschiedlichen Skins in BlueSpice bequem eingerichtet werden (siehe unten: FlexiSkin). Noch zwei Beispiel für BlueSpice Skins:

In MediaWiki den Skin und das Logo ändern

Wie kann ich selbst Hand anlegen? Aktuelle MediaWikis werden standardmäßig u.a. mit dem Vector-Skin ausgeliefert. Kleinere Anpassungen lassen sich relativ schnell vornehmen.

WikiAdmin - Einstellungen – BlueSpice
WikiAdmin – Einstellungen – BlueSpice

Sie ändern z.B. das Logo indem Sie Ihr Logo in das Skins-Verzeichnis ( \mediawiki-1.XX.0\skins\vector) kopieren und in der LocalSettings.php im Hauptverzeichnis (\mediawiki-1.XX.0)die Variable $wgLogo entsprechend anpassen. Es gibt auch eine kurze Beschreibung als Screencast. Das freie BlueSpice for MediaWiki bietet diese Einstellungen neben der Einstellung der erlaubten Bildformate komfortabel im Admin-Bereich an.

Soll ein neuer Skin für das Wiki verfügbar gemacht werden, muss man diesen Skin (PHP-Datei und das Skin-Verzeichnis) in den Skin-Ordner der MediaWiki-Installation kopieren ( \mediawiki-1.XX.0\skins\). Um ihn als Standard einzurichten ist ein Eingriff in die Localsettings.php nötig: Einfach den entsprechenden Skin-Namen in der Variable $wgDefaultSkin eintragen.

Der Skin des Wikis lässt sich sowohl im MediaWiki als auch bei BlueSpice vom User individuell umschalten. Diese Option steht unter den persönlichen Einstellungen > Aussehen zur Verfügung. Alle vorhandenen Skins können dort für die persönliche Darstellung aktiviert werden.

Nach der Installation und der Bereitstellung eines neuen Skins sollte man die verschiedenen Bereiche des Wikis nochmal genauer betrachten. Gerade wenn man zusätzliche Erweiterungen im Einsatz hat, könnte sich die Darstellung durch den neuen Skin an einigen Stellen ändern. Es ist kaum möglich das Verhalten des Skins für alle Einsätze im Voraus zu planen, da es mehr als 1000 Erweiterungen mit unterschiedlichem Funktionsumfang gibt.

Eigenen MediaWiki Skin entwickeln

MediaWiki Skinordner
MediaWiki Skinordner

Für weiteregehende Anpassungen des Skins, beispielsweise an das Unternehmens-CI ist die professionelle Unterstützung von Webdesignern zu empfehlen. Wie bei anderen Web-Projekten gilt es zu prüfen, ob sich der Aufwand für die Entwicklung eines komplett eigenen Skins tatsächlich lohnt, oder ob man nicht auf bestehende Skins zugreift und diese nur etwas anpasst. Der Aufwand kann zwischen ein bis fünf Tagen liegen. Kompliziert wird es erst, wenn man ein größeres Set an Erweiterungen berücksichtigen muss. Ansonsten ist die Datei-Struktur überschaubar.

Es gibt eine PHP-Datei im Skins-Ordner, die den Namen des entsprechenden Skins trägt. Diese greift auf CSS- und Image-Dateien in einem Unterordner zu.  Erweiterungen bringen meist ihre eigenen CSS-Dateien mit und überschreiben ggf. die Skin-Formatierungen. Das macht die Sache leider etwas unübersichtlich. Außerdem verwendet MediaWiki sehr viele Variablen, die man so noch nicht aus anderen Webprojekten kennen kann. Man muss da erst etwas den Überblick gewinnen.

Der Skin basiert auch auf keinem der bekannten Frameworks. Somit muss man bei der Neu-Entwicklung oder Anpassung eines Skins auch ein besonderes Augenmerk auf die Browser-Kompatibilität legen. Eine hilfreiche Anleitung findet man auf wikiHow.

Auch der Skin von BlueSpice wird „flexible“

Derzeit liegt der Schwerpunkt bei der Weiterentwicklung des BlueSpice-Skins noch stärker auf der Flexibilität und Anpassbarkeit. Mit dem nächsten BlueSpice Release soll auch eine Vector-Kompatibiltät hergestellt werden, damit BlueSpice und MediaWiki zukünftig gegenseitig noch stärker von Entwicklungen profitieren können.

Weiter wird der Wunsch vieler Nutzer und die Notwendigkeit größerer Flexibilität in Cloudservices wird zur Wieder-Einführung des Flexiskinmoduls führen. Administratoren können dann komfortabel die wichtigsten Skinanpassungen über den Adminbereich vornehmen.

Im Rahmen der Cloud soll der BlueSpice-Skin außerdem stabiler werden. Ziel ist es daher auf CSS Frameworks wie YAML oder YUI CSS Grids zurückzugreifen. In diesem Zug wird das CSS aufgeräumt und, wenn möglich, modularisiert. Wünschenswert wäre auch eine erhöhte Kompatibilität mit anderen Extensions. Dazu müssten jedoch alle MediaWiki Standard-Hooks und „Bereiche“ unterstützt werden. Diese Schritte sind sehr aufwändig und stehen auf der BlueSpice Roadmap für die Version 2.0 an.

 

Dies könnte Ihnen auch gefallen

1 Kommentar

  • Stefan Seidner

    21. Mai 2014

    Danke für den interessanten Artikel.

    Ist die Info, dass Athena das neue Standard-MediaWiki-Skin werden soll, noch aktuell? Wenn man auf die Versionsgeschichte des Athena-Artikels schaut, hat man den Eindruck dass sich da nicht viel tut…

    Replay

Schreiben Sie einen Kommentar