Wikipedia:Technik/Skin/GUI

Benutzeroberfläche


Diese Seite stellt Möglichkeiten vor, sich seine Benutzeroberfläche mit aktiven Bedienelementen (Knöpfchen, Menüpunkte) selbst zu programmieren und zu gestalten.

Aufbau einer Wiki-SeiteBearbeiten

Grundsätzlich kann man seine eigenen Schaltflächen überall auf der Standard-Seite zwischen den vorhandenen Bedienelementen einfügen oder auch uninteressante Menüfelder entfernen, mindestens unsichtbar machen.

Eine klassische Wiki-Seite („Desktop“, also stationärer PC) ist aufgeteilt in drei Bereiche:

  1. Inhalt: #content
  2. Portal-Rahmen:
  3. Fußbereich: #footer

Die Skins sind jedoch frei darin, die Seite optisch anders aufzuteilen und die Elemente den Bereichen zuzuweisen.

Auf einem Mobilgerät kann kein solches Portal angezeigt werden; hier werden die Strukturen völlig anders organisiert und teilweise auf gesonderte Seiten ausgelagert.

Die wesentlichen Klassen (.class) und Identifikatoren (#id) einer Wiki-Seite auf dem Desktop, die mit Schaltflächen in Verbindung stehen, sind:

Selektor Deutsch Englisch
p- portlet
n- navigation
  #p-personal Angemeldeter Benutzer personal toolbar
#pt-userpage Benutzer
#pt-notifications Echo-Zählerfeld
#pt-mytalk Eigene Diskussion
#pt-preferences Einstellungen
#pt-betafeatures Beta
#pt-watchlist Beobachtungsliste
#pt-mycontris Eigene Beiträge
#pt-logout Abmelden
  #p-cactions Seitenbezogene Aktionen(*) content action
#ca-nstab-main
-project, -template
Artikel, Seite etc.
#ca-talk Seiten-Diskussion
#ca-ve-edit Bearbeiten mit VisualEditor
#ca-edit
#ca-view
Quelltext bearbeiten/ansehen
#ca-history Versionsgeschichte
#ca-move Verschieben
#ca-watch
#ca-unwatch
Beobachten
Nicht beobachten
  #p-search Suche
#searchform Suchformular
  #p-navigation Navigation
#n-mainpage-description Hauptseite
#n-aboutsite Über Wikipedia
#n-topics Themenportale
#n-alphindex Von A bis Z
#n-randompage Zufälliger Artikel
  #p-Mitmachen Mitmachen
#n-help Hilfe
#n-portal Autorenportal
#n-recentchanges Letzte Änderungen
#n-contact Kontakt
#n-sitesupport Spenden
  #p-coll-print_export Drucken / Exportieren (#collectionPortletList)
#coll-create_a_book Buch erstellen (nur Artikel)
#coll-download-as-rl PDF-Version (nur Artikel)
#t-print Druckansicht
  #p-tb Werkzeuge; auch Seitentyp-bezogene Möglichkeiten, etwa auf Benutzerseiten toolbar
#t-whatlinkshere Links auf diese Seite
#t-recentchangeslinked Änderungen an verlinkten Seiten
#t-contributions Benutzerbeiträge (nur auf Benutzer-bezogenen Seiten)
#t-upload Hochladen
#t-specialpages Spezialseiten
#t-permalink Permanenter Link
#t-info Seiteninformationen
  #p-sisterprojects Schwesterprojekte (z. B.: Wikipedia:Fragen zur Wikipedia)
  #p-lang Interlanguages languages
.interwiki-ar,
.interwiki-bar, …
Die einzelnen Sprachlinks haben Klassen, die den jeweiligen Sprachcode enthalten
div#bodyContent
u. a.
Artikelansicht / Bearbeitungsfeld (“content”)

Zu einer anderen Liste siehe meta:Help:User style/de #Referenz und deren englischsprachige Version. Diese vereinfachte Darstellung soll nur einen Überblick zur ersten groben Orientierung geben.

Anmerkungen:

(*) Im Vector-Skin wird der Bereich p-cactions je nach der aktuellen Breite des Browserfensters aufgeteilt. Die horizontale Leiste #p-views enthält so viele Tabs wie momentan sichtbar sein können; ein Element bleibt in der dropdown-Liste. Alle anderen Elemente sind als #p-cactions unter Mehr ▼ auszuklappen. Siehe auch unten: Vector-Leiste

SkinsBearbeiten

Desktop

Vector-Skin (klassisch [2010, „Legacy“])(*)
  pt-   Benutzer und benutzerspezifisch
nav ca- (Seitenbezogene Aktionen) Suchfeld
Mit Seitentitel #firstHeading
tb Artikelansicht / Bearbeitungsfeld
div#bodyContent
Textarea
IL
Monobook-Skin
pt-   Benutzer und benutzerspezifisch
  ca- (Seitenbezogene Aktionen)
Suche Seitentitel #firstHeading
nav Artikelansicht / Bearbeitungsfeld
div#bodyContent
Textarea
Mit
tb
IL

Die Selektoren galten auch für MySkin (April 2013 abgeschaltet).

Modern-Skin
Seitentitel #firstHeading
pt-   Benutzer und benutzerspezifisch
Suche ca- (Seitenbezogene Aktionen)
nav #contentSub
Mit Artikelansicht / Bearbeitungsfeld
div#mw_contentholder
Textarea
tb
IL
Kölnisch Blau (cologneblue)
Wikipedia   nav
Suche Interlanguages
Mit Seitentitel
Drucken Artikelansicht / Bearbeitungsfeld
div
Textarea
ca-
pt-


Mobil

Mobil
.header   Suche  

.pre-content .heading-holder
Seitentitel
.subpages

#page-actions   #ca-watch   #ca-edit  
#mw-content-text


Artikelansicht / Bearbeitungsfeld

Textarea


#page-secondary-actions Diskussion
Versionsgeschichte

 
footer

Vector-LeisteBearbeiten

 Info: 2020 wird zur Ablösung des „klassischen Vector“ von 2010 („Legacy“) ein Nachfolger entwickelt.

Bei Vector ist die horizontale Navigation oben wie folgt gegliedert:

  • #left-navigation
    • #p-namespaces .vectorTabs
      • #ca-nstab-main
      • #ca-talk
  • #right-navigation
    • #p-views .vectorTabs
      • #ca-view
      • #ca-edit
      • #ca-history
      • #ca-watch (Stern)
      • #ca-move
    • #p-cactions .vectorMenu Ausklappen Mehr ▼
    • #p-search

Mindestens ein Element von #p-views (das auch benutzerdefiniert hinzugefügt sein kann) ist zum Ausklappen in #p-cactions enthalten; auch alle außer #ca-watch aus der horizontalen Leiste #p-views, die dort nicht mehr hinpassen. Die anderen Elemente von #p-views werden rechtsbündig dargestellt.

GesamtseiteBearbeiten

Weitgehend einheitlich für Desktop und Mobil haben Wiki-Seiten folgenden Aufbau:

  • <body>
    • Desktop: #content class="mw-body" role="main"
      • #top
      • Mobil: Banner-Bereich
      • Mobil: <form> – Kopfbereich
      • #mw-body
        • Desktop: Banner-Bereich #siteNotice
        • Seitentitel
          • Desktop: #firstHeading
          • Mobil: #section_0
        • #mw-content-text wesentlicher Inhaltsbereich
          • .mw-parser-output – nur wenn aus Wikitext generiert
          • (ggf. eingebettet) Inhaltsverzeichnis
            • Desktop: #toc
            • Mobil: .toc-mobile
          • Desktop: #catlinks – Kategorien
    • Desktop: #mw-navigation
      • #mw-head – Kopfbereich; meist oben horizontal
      • #mw-panelSidebar; meist links vertikal
    • Fußbereich
      • Desktop: #footer .mw-footer
      • Mobil: <footer> .mw-footer

Die bisher nur in der Mobildarstellung verwendeten semantischen HTML5-Elemente <header>, <main>, <nav> und <footer> werden ab 2020 zunehmend auch in die Desktop-Skins eingearbeitet. Die Selektoren sollen dabei ungestört weiter funktionieren, sollten jedoch nicht überspezifisch mittels vorangestelltes div sein.

RandbereichBearbeiten

Der „linke Rand“ der Desktop-Oberflächen wird durch MediaWiki:Sidebar konfiguriert.

Auf Endgeräten mit kleinem Display (Mobil) kann er unterschiedlich angeordnet sein.

Siehe dazu auch: Wikipedia:WikiProjekt Benutzerfreundlichkeit/Sidebar.

InhaltsbereichBearbeiten

Die „Nutzfläche“ innerhalb der Portalseite enthält etwa den Artikelinhalt; auch den Bearbeitungsbereich oder eine Auflistung der Benutzerbeiträge.

Der Selektor ist bei verschiedenen Skins sehr unterschiedlich. Die Eigenschaft mw.util.$content des Objektes mediaWiki (keine Funktion, deshalb keine Klammern) enthält ein jQuery-Objekt, das diesen Inhaltsbereich repräsentiert.[1] Von dort aus sind die weiteren Selektoren weitgehend gleich. $content ist erst dann nutzbar, wenn das Dokument geladen wurde (document ready). Im Übrigen lässt sich eine Tausendstelsekunde sparen, wenn mit .find() Elemente des Inhaltsbereichs in $content gesucht werden und nicht im gesamten document.

BearbeitungsbereichBearbeiten

Wenn eine Seite zur Bearbeitung geöffnet wird, entstehen weitere Schaltflächen und Werkzeugleisten:

Standard-Bearbeitungswerkzeugleiste (inklusive Extra-Editbuttons, falls aktiviert)
ggf.
wikEd-Werkzeugleiste (Anpassung)


Bearbeitungsfeld:

Seitentext

textarea#wpTextbox1

„Edittools“ (Sonderzeichenleiste)

Auch die Sonderzeichenleiste kann durch benutzerdefinierte Listenelemente und Links ergänzt werden; beispielsweise zum Einfügen von Vorlagen. Das Definitionsskript in MediaWiki:Onlyifediting.js kann als Vorbild genutzt werden.

HTML-FormularBearbeiten

Der Bearbeitungsbereich ist HTML-technisch Teile eines Formulars <form>. Folgende Identifizierer sind dort vorhanden:

  • form#editform
    • textarea#wpTextbox1
    • div.editOptions
      • input#wpSummary
      • div.editCheckboxes
        • input#wpMinoredit
        • input#wpWatchthis
    • div.editButtons
      • input#wpSave
      • input#wpPreview
      • input#wpDiff
    • versteckte Elemente:
      • input#wpEditToken
      • input#baseRevId
      • input#undidRev
      • input#wpStarttime
      • input#wpEdittime
      • input#oldid
      • input#wpSection
      • input#wpAutoSummary

Aktive Bedienelemente verändernBearbeiten

Grundsätzlich benötigt man für jedes Bedienelement

  • ein Link href zur Angabe der Aktion
  • einen Titel, also Linktext

Außerdem können Stileigenschaften definiert werden (CSS).

Vor allen Manipulationen an der Portalseite muss sichergestellt sein, dass die Seite bereits aufgebaut wurde. Wenn man interaktiv tätig wird, kann man sie sehen und das ist immer der Fall. Anders verhält es sich, wenn man Skripte schreibt, die beim Laden der Seite automatisch tätig werden; vor allem wenn aus common.js heraus Funktionen aufgerufen werden, existieren die Elemente wahrscheinlich noch gar nicht und das Skript könnte abstürzen, zumindest nicht wirksam werden. Besser ist es, eine Funktion MeineFunktion erstmal nur zu definieren, aber noch nicht auszuführen. Dies erfolgt erst anschließend im richtigen Moment durch den jQuery-Aufruf

    jQuery(document).ready(MeineFunktion);

und in MeineFunktion stehen alle wirksamen Aktivitäten.

Grundsätzlich ist es eine gute Idee, zunächst den Aufbau der für Anwender sichtbaren Seitenelemente abzuwarten und erst danach, wenn der Mensch eine halbwegs sortierte Seite präsentiert bekam, diskret im Hintergrund Kleinigkeiten zu verbessern, unsichtbare Details an unsichtbaren Untermenüs zu justieren. Besonderes Know-How ist allerdings erforderlich, wenn man das Layout der Skin-Seite völlig umschmeißen möchte, weil beim Betrachten zunächst das Standard-Layout angezeigt wird, dann ein Weilchen blockiert ist und dann auf das umgemodelte Layout springt.

Ausblenden mit CSSBearbeiten

Wer der Meinung ist, nun genug Arbeitskraft und Nerven beigetragen zu haben, und nicht auch noch Schecks hinterherschmeißen möchte, kann in seine common.css einfügen:

#n-sitesupport {
   display: none;
}

blendet die „Spenden“ aus.

Mehr Anregungen.

addPortletLink()Bearbeiten

Den komfortabelsten Zugang zur Gestaltung eigener Bedienelemente bietet diese Standardfunktion, die ein neues Bedienelement hinzufügt:

mw.util.addPortletLink()
addPortletLink(Container, Aktion, Titel, ID, Tooltip, Hotkey, Vor)
Container
portlet
Elementgruppe, zu der hinzugefügt werden soll.
p-cactions oder p-tb oder andere (ohne # des CSS-Selektors)
Aktion
href
Meist URL; beginnend also etwa mit http:// oder auch nur beginnend mit / der relative Pfad auf dem Server oder aber mit javascript:
Titel
text
Linktitel
ID
id
Eindeutiger Bezeichner des neuen Elements auf der Seite.
Sollte mit dem passenden "ca-", "pt-", "n-", "t-" beginnen, um die Übersicht zu behalten. Darf keine Leerzeichen enthalten.
Tooltip
tooltip
Kurzer Hilfe-Text; wird angezeigt, wenn mit der Maus über dem Element schwebend.
Hotkey
accesskey
Möglichst eindeutiger einzelner Buchstabe (oder anderes Zeichen) zur Bildung einer Tastenkombination.
"g" erlaubt etwa Alt+g – Großbuchstaben weniger sinnvoll. Konflikte mit Standard-Tastaturkombinationen beachten!
Vor
nextnode
Bezeichner eines anderen Elements im selben Container, vor dem das neue Element eingefügt werden soll. Kann auch ein jQuery-Objekt sein. Anders als bei den anderen Bezeichnern dieser Parameterliste muss hier ein "#" dem Bezeichner vorangestellt werden, wenn kein jQuery-Objekt übergeben wird.[2]
  • Alle Parameter sind vom Typ string (Zeichenkette).
  • Die ersten 3 Parameter sind Pflichtparameter; es empfiehlt sich, möglichst alle anzugeben.
Rückgabe DOM node des neuen Elements
LI Element, bei veralteten Skins ein A, oder null.

Die Funktion prüft nicht von sich aus, ob die Seite bereits aufgebaut wurde. Die Benutzung muss also in einen Aufruf von ready() eingebettet werden. Außerdem sollte sichergestellt werden, dass die Komponente mw.util bereit ist; Näheres dazu.

Veraltet ist der Aufruf von addPortletLink() ohne vorangestelltes mw.util. Dies stammt aus wikibits und wird seit April 2017 nicht mehr unterstützt.

Beispiel für einzelnen Aufruf:

mw.util.addPortletLink(
	'p-tb',
	mw.util.getUrl( 'Spezial:Präfixindex' ),
	'Präfix-Suche',
	't-search-prefix',
	'Alle Seiten (mit Präfix)',
	'g',
	null
);

Anmerkungen:

  • mw.util.getUrl() stellt sicher, dass die URL nicht nur bei http, sondern auch bei https und verschiedenen Server-Konfigurationen richtig ist.
  • Gebildet wird dabei nur ein relativer Pfad auf demselben Server, der mit / beginnt.
  • null ist eine weitere Möglichkeit, um ausdrücklich zu signalisieren, dass man keine Zeichenkette anzugeben wünscht.

Im Anschluss wird intern updateTooltipAccessKeys() automatisch aufgerufen.

Beispiel für eine komplexe Einbindung mit Abwarten der Vorbedingungen:

jQuery( document ).ready( function () {
	mw.loader.using( [ 'mediawiki.util' ], function () {
		mw.util.addPortletLink(
			'p-tb',
			mw.util.getUrl( 'Spezial:Präfixindex' ),
			'Präfix-Suche',
			't-search-prefix',
			'Alle Seiten (mit Präfix)',
			'q',
			null
		);
	} ); // .using()
} ); // .ready()

TestenBearbeiten

Bei der Bearbeitung des Skriptes werden die Definitionen bereits wirksam, wenn man „Vorschau“ oder „Änderungen“ anklickt. Damit lassen sie sich an den auf der Portalumgebung sichtbaren Elementen testen, ohne die Versionsgeschichte belasten zu müssen. →JS

WikiEditorBearbeiten

WikiEditor, die neuere Bearbeiten-Werkzeugleiste, besitzt eine API zum Einfügen und Entfernen von Elementen. Eine knappe Dokumentation auf Englisch ist vorhanden unter mw:Extension:WikiEditor/Toolbar customization. Modul: wikiEditor-ui-toolbar

HTML, DOM und jQueryBearbeiten

Wenn die in HTML geschriebene Seite dargestellt ist, wurde auch ein Document Object Model (DOM) aufgebaut. Es kann in seiner Struktur beliebig manipuliert werden; addPortletLink ist ein Beispiel dafür. Eine nachträgliche Veränderung am DOM zieht eine Änderung der dargestellten Seite nach sich.

Weiterführend:

jQueryBearbeiten

Das Arbeiten kann unterstützt werden durch die Skript-Bibliothek jQuery. Sie enthält viele Hilfsfunktionen; darunter auch solche, die Veränderungen des DOM erleichtern. Die dazu erforderlichen Basis-Funktionen sind im Allgemeinen von vornherein in WMF-Projekten geladen; nur weitergehende Module müssten durch Benutzer abgefordert werden.

Einzelheiten unter JS/jQuery.

document readyBearbeiten

Eine der meistbenutzten Funktionen ist

    jQuery(document).ready( MeineFunktion );

oder kurz, aber leicht zu übersehen

    $( MeineFunktion );

Sie bewirkt, dass MeineFunktion erst dann ausgeführt wird, wenn das document grundsätzlich geladen wurde und die Elemente der Basis-Seite bekannt sind. (Siehe dazu Warten, bis die Seite geladen ist)

BookmarkletBearbeiten

Ein alternativer und für manche Benutzer vielleicht einfacherer Weg ist die Verwendung von Bookmarklets. Hier wird einer Bookmark („Favoriten“) ein JavaScript-Code zugewiesen, so dass die Verwaltung und Darstellung der Schaltflächen vom Browser übernommen wird. Siehe hierzu Technik/Browser/Bookmarklet.

Weitere InformationenBearbeiten

AnmerkungenBearbeiten

  1. Ab Herbst 2012 mit 1.20wmf11 umfasst dies auch den Titel (Gerrit:19008).
  2. Warum das so ist, frage man die Entwickler. Vielleicht baut ja jemand eine Service-Abfrage ein und ergänzt das stillschweigend, wo fehlend.