Wikipedia:Technik/Skin/Tutorial

Tutorial: Skin-Programmierung

Diese Projektseite beschreibt insbesondere für Einsteiger in die vertiefte Skin-Programmierung einige Grundlagen.

Für kleinere Manipulationen an der eigenen Benutzeroberfläche ist die Kenntnis dieser Einzelheiten nicht zwingend erforderlich; hier genügen:

Ressourcen

Wie die allermeisten Dokumente im Internet liefert der Wiki-Server eine Seite im Format HTML an die Browser der Leser aus.

Sie enthält das Grundgerüst aller Texte und Inhalte. Durch Programmierung (JS) kann diese HTML-Struktur nachträglich im Browser noch verändert werden, oder die optische Darstellung von Elementen kann verändert werden; am simpelsten durch Ausblendung.

In dieser HTML-Seite werden zusätzliche Datenpakete wirksam, die man allgemein Ressourcen nennt. Relevant sind für diese Beschreibung hier nur solche Datenformate, die im Browser des Lesers noch ausgewertet werden:

CSS
JS

Im erweiterten Sinn zählen dazu noch Bilder und sonstige Multimedia-Inhalte; diese sind einer nachträglichen Programmierung aber kaum zugänglich.

Alle weiteren Programmiersprachen, die gelegentlich genannt werden (PHP, Lua), werden nur innerhalb des Servers wirksam, und zählen deshalb nicht zu den Ressourcen, oder Lua wird über eigene Modulseiten bereits in den Wikitext eingebunden.

Entstehungsprozess einer Wiki-Seite

Nach dem Speichern des Wikitext-Inhalts durch den Autor geschieht Folgendes:

Wikitext → HTML-Inhalt
- Der Wikitext wird vom Parser in HTML-Code umgewandelt.
- Dabei werden vorbereitete Sequenzen eingebundener Seiten eingeschlossen.
- Das Resultat wird durch HTML Tidy weitgehend standardkonform gemacht. Das Ergebnis wird im „Seiten-Cache“ bereitgestellt.
Wenn die Seite bestimmte „TTL-Variablen“ enthält (Datum/Uhrzeit, einige Zählerstände) dann wird sie entsprechend markiert.
- Die TTL-Seiten werden etwa stündlich aktualisiert.
Wenn ein Leser die Seite abfordert, wird der Inhalt (content area) aus dem Cache mit dem umgebenden Portalbereich (portlet) zusammengeführt.
- Der Portalbereich ist ein weitgehend konstanter HTML-Code, der meist links und oben, mit einigen Zeilen auch im Fußbereich sichtbar ist.
- Der Portalbereich hängt von der Skin ab und liegt in verschiedenen Versionen je nach Benutzergruppe vor, etwa anonym, angemeldet, Administrator. Der Portalbereich unterscheidet sich auch geringfügig in Abhängigkeit vom betrachteten Namensraum; so gibt es bei Benutzerseiten und der zugehörigen Diskussion ein Link auf die Benutzerbeiträge. Ansonsten ist aber jede Konfiguration des Portalbereichs über viele Monate konstant und wird vorfabriziert gespeichert.
Wenn sich die Seite ändert, in sie eingebundene Seiten (Vorlagen) oder der Status von Wikilinks durch Erstellung oder Löschung einer Seite (redlink), dann wird die Seite im Cache ungültig und muss mit der nächsten Abfrage neu aufgebaut werden.
Das Vorstehende gilt hinsichtlich Cache für reguläre Seiten (Namensraum-Nummer ≥ 0), also nicht für Spezialseiten. Bei letzteren wird der Seiteninhalt dynamisch im Moment der Anfrage erzeugt und nicht im Cache abgelegt. Der übrige Vorgang (Zusammenführung mit der Portalseite) ist jedoch identisch. Ebenfalls dynamisch sind in der Regel Seiten, in deren URL nicht /wiki/ vorkommt.

Skins

Das Layout der Wiki-Seite hängt von der Skin ab.

Von ihnen sind für den Desktop noch vier im aktiven Gebrauch:

vector
monobook
modern
~~cologneblue („Kölnisch Blau“)~~
timeless

Nur diese von MediaWiki unterstützten Skins lassen sich einfach über die Benutzer-Einstellung Aussehen konfigurieren. Mit dem URL-Parameter useskin lässt sich einmalig die vom Server gelieferte Seite auf Grundlage einer anderen Skin darstellen.

Andere Skins lassen sich im Prinzip benutzen, aber allenfalls mit größerem Aufwand in einem WMF-Projekt. Bei individueller Nutzung der MediaWiki-Software können hingegen beliebige Skin-Programmierungen zugeordnet werden.

Zu jeder Skin gibt es eine gesonderte Programmierung (in PHP) auf dem Server, und bestimmte Details (Selektoren: Klassen und Bezeichner) unterscheiden sich gelegentlich.

Diese Programmierung sorgt für die Abbildung der Bedienelemente auf den HTML-Code und die Anordnung und Reihenfolge in der HTML-Seite. Zum Skin-Paket gehört auch ein Satz an Stilen in CSS und ggf. benötigtes spezifisches JavaScript.

In den frühen Jahren der Wikipedia gab es fast ein Dutzend teils nicht ausgereifter Skin-Programmierungen auf dem Server. Das konnte nicht mehr gepflegt und aktualisiert werden, und letztlich waren die Unterschiede auf HTML-Ebene nicht ausschlaggebend. Wesentliche Effekte lassen sich mit dem identischen HTML-Code auch durch andere Stil-Definitionen (CSS) erreichen.
Auch in jüngerer Zeit gibt es gelegentliche Anläufe zur Definition neuer Skins.

Historische Skins wie etwa amethyst, chick, myskin, nostalgia, simple, standard wurden in den letzten Jahren eingestellt (nostalgia wurde in eine Extension gewandelt).

Zu jeder einzelnen Skin sind auf jeder Ebene spezifische Ressourcen sowohl für CSS wie für JavaScript definierbar:

Weltweit
Projekt (deutschsprachige Wikipedia)
Benutzerdefiniert

Außerdem gibt es je eine gemeinsame („Common“) Ressource für alle Skins.

Themes

Ein weiterer Begriff in diesem Zusammenhang ist theme. Dabei handelt es sich um eine Zusammenstellung von CSS-Stilen, durch die lediglich Farbgebung, Größen, Maßangaben und Schriftarten beeinflusst werden. Die Generierung und Organisation der HTML-Seite ändert sich hierbei nicht.

PHP

Zu einer Skin gibt es einen relativ einfach überschaubaren PHP-Code, der den Aufbau der gesamten HTML-Seite modelliert. Viele Basisfunktionen können einer Schablone entnommen werden.

   class XyzSkin extends SkinTemplate
   class XyzTemplate extends BaseTemplate

Die Bedienungselemente des Portal-Rahmens werden um den Inhaltsbereich gruppiert.

Programmierung der MW-Skins

Erstaunlich ist, dass es immer noch keine spezielle Skin für mobile Geräte gibt.

Zur eigenen PHP-Programmierung auf einem Server:

Im WMF-Projekt ist es aber wenig aussichtsreich, als Standard verbreitet zu werden. Die Vielzahl an PHP-Programmierungen wurde reduziert. Wenn überhaupt, sollen sich Bezeichner und Schnittstellen an Vector orientieren und so kompatibel wie möglich gewählt werden.

Abfolge wirksamer Ressourcen

Zusammen mit jeder Seite werden CSS- und JavaScript-Ressourcen ausgeliefert.

Der überwiegende Teil ist eine Basis-Ausstattung, die für alle Seiten gleich ist, und auch immer mittels gleicher URL verwendet werden. Diese Ressourcen müssen nicht jedes Mal über das Netzwerk übertragen werden. Vielmehr werden sie im Browser-Cache der Leser gespeichert und von dort aus in die Wiki-Seite eingebunden.

Bei CSS-Ressourcen ist die Reihenfolge wichtig. Hier ist es so, dass Browser immer in der folgenden Abfolge die Anweisungen auswerten; eine spätere Forderung überschreibt die vorangegangenen:

Stile (CSS-Deklarationen auf Ebene der gesamten Seite)
Einzelne Elemente mit der spezifischen Eigenschaft style=
Zuweisungen mit der Kennzeichnung !important in den CSS-Deklarationen

Die CSS-Ressourcen enthalten Stile. Sie werden in der folgenden Reihenfolge wirksam; hier einmal Vector als aktuell eingestellte Skin angenommen:

Weltweite Wiki-Stile.
Durch Situation und Projekt und Benutzereinstellungen aktivierte Erweiterungen.
Projekt-Stile
- MediaWiki:Common.css
- MediaWiki:Vector.css
Benutzereinstellungs-Stile
- Special:MyPage/Common.css
- Special:MyPage/Vector.css
Zuweisungen durch Software (JavaScript)

Außerdem ist dabei unterstellt, dass es sich um eine normale Bildschirm-Anzeige handelt. Auf Mobilgeräten und beim Ausdrucken gibt es Abweichungen.

Siehe dazu umfassend: Skin/MediaWiki.

Eigene Modifikation auf Browser-Ebene

Siehe dazu grundlegend: Skin/GUI.

Werkzeuge

Für die Arbeit unabdingbar ist die Ansicht des HTML-Quelltextes.

Eine einfache Ansicht der HTML-Seite liefert jeder gängige Browser. Diese kann jedoch über Tausende von Zeilen gehen, die wiederum sehr lang werden können.
Besser ist es, Werkzeuge zu verwenden, die in den gängigen Browsern nachrüstbar oder teilweise bereits vorhanden sind. Mit ihnen kann das HTML-Dokument Element für Element aufgeklappt werden. Insbesondere ist es möglich, in der dargestellten Seite etwas zu markieren und dann (meist über die rechte Maustaste) den korrespondierenden HTML-Code zu finden und nur dessen übergeordnete Elemente aufzuklappen.
Unter Browser/Entwicklerwerkzeuge #Debugger sind Hilfsmittel benannt, die in der Regel auch über solche Fähigkeiten verfügen.

HTML

Die HTML-Struktur des Inhaltsbereichs hängt vom Wikitext ab.
Die Grundstruktur der HTML-Elemente im umgebenden Portal-Rahmen (vorwiegend links und oben) ist durch die Skin definiert und weltweit jeweils gleich.
Erweiterungen können dem zusätzliche Elemente hinzufügen.
Mittels JavaScript können Benutzer und Helferlein im Nachgang auch ganze Bereiche (etwa die „Linke Spalte“) aus der Grundstruktur herausnehmen und an einer anderen Stelle anordnen; oder entfernen und durch eigene Kreationen ersetzen.

CSS

Das Aussehen der Elemente lässt sich verändern; etwa durch größere Darstellung, in anderen Farben oder völlige Ausblendung.

Grundkenntnisse in CSS sind dazu erforderlich; außerdem die jeweiligen Selektoren (Klasse oder ID) des Elements.

Es gibt mehrere Tausend weltweit gültiger statischer Selektoren; hinzu kommen solche, die dynamisch etwa aus dem momentanen Seitentitel generiert werden. Es können durch zusätzliche Software neue Selektoren hinzukommen; selten und nur bei völliger Neuprogrammierung verschwinden manchmal Selektoren mitsamt der umgebenden Struktur.
Je nach projektweit und über Benutzereinstellungen aktivierten Erweiterungen kommen weitere Elemente mit jeweils spezifischen Selektoren hinzu.
Abhängig von der Art der Aktivität (Ansehen, Bearbeiten, Vergleichen, Sichten) und etlichen Spezialseiten gibt es zusätzliche Selektoren.

Eine Gesamt-Liste aller irgend existenten Selektoren gibt es nicht, und sie wäre auch kaum konsistent zu halten.

In der englischsprachigen Wikipedia hatte man über Jahre hinweg versucht, eine vollständige Aufstellung mitzuschreiben; dies aber irgendwann aufgeben müssen. Der letzte Stand ist hinsichtlich der CSS-Selektoren ein guter Ausgangspunkt, auch wenn einiges hinzugekommen sein mag (die beschriebenen Dateien sind hingegen seit 2011 überholt).

Ein Grundgerüst für das Portal der gängigen Skins ist unter Skin/GUI aufgelistet; Skin/CSS beschreibt einige Standardlösungen. Um für eigene Schöpfungen spezifische Elemente auszustatten, gibt es eine kleine Anleitung. Grundprinzip ist es, sich die momentanen HTML-Seiten in dem Bereich anzusehen, in dem etwas manipuliert werden soll, und dies dann auch in den anderen Skins abzugleichen.

JavaScript

Siehe dazu ausführlich: Skin/JS.