Fandom

Wikia Deutschland

Kommentare2

Portable Infoboxen erstellen - Gruppen

Störung durch Adblocker erkannt!


Wikia ist eine gebührenfreie Seite, die sich durch Werbung finanziert. Benutzer, die Adblocker einsetzen, haben eine modifizierte Ansicht der Seite.

Wikia ist nicht verfügbar, wenn du weitere Modifikationen in dem Adblocker-Programm gemacht hast. Wenn du sie entfernst, dann wird die Seite ohne Probleme geladen.

Portability-header.jpg

Dieser Blog-Beitrag dient als Wissenserweiterung zu „Portable Infoboxen erstellen“ und bietet einen Überblick über komplexere Elemente von portablen Infoboxen, die aber keinesfalls unverständlich sind.

Wofür brauche ich komplexere Elemente?

Grundsätzlich kann eine portable Infobox auch ohne diese Elemente die gleichen Informationen darstellen wie eine portable Infobox mit diesen Elementen. Der Nutzen dieser Elemente ist die Verschönerung, und zwar nicht in Form von CSS, sondern in Form von Funktionen. Du erfährst in diesem Blog-Beitrag zum Beispiel, wie zusammenklappbare Elemente erstellt werden oder mehrere Daten nebeneinander stehen können.

Solche Funktionen sind trotz ihrer Optionalität ein entscheidendes Hilfsmittel zum Erstellen von portablen Infoboxen. Das Ziel der portablen Infoboxen ist es, Nutzern auf möglichst vielen Geräten die Informationen eines Wikis praktisch und anschaulich zu übermitteln. Zwar können auch 10 Daten untereinander stehen, jedoch ist das nicht immer praktisch und schon gar nicht anschaulich. Deshalb kommen diese neuen Elemente ins Spiel, um die Verteilung der Informationen zu optimieren.

Ein neues Tag

Um diese Funktionen verwenden zu können, wird ein neues Tag eingeführt: das <group>-Tag. Wie der Name schon andeutet, wird mit diesem Tag eine Gruppe gebildet, in der Elemente gruppiert sind. Doch was bewirkt dieses Tag? Auf den ersten Blick passiert beim Einfügen nichts, auch wenn andere Tags wie <data> darin verwendet werden.

Das Tag ist primär dazu da, um die neuen Funktionen anzuwenden. Dabei befinden sich innerhalb der Gruppe andere Elemente wie Daten, Unterüberschriften oder Bilder, damit die gewünschte Funktion nur auf diese Elemente, und nicht auf alle, wirkt. Darüber hinaus besitzt dieses Tag seine eigene Klasse .pi-group, mit der zum Beispiel Gruppen visuell durch Ränder oder vergrößerte Abstände getrennt werden.

Wirkung auf Unterüberschriften

Header sind ein gutes Mittel, um die Daten deiner Infobox zu kategorisieren. Zum Beispiel fallen Alter und Geschlecht unter „Biographische Daten“, während Freunde und Zugehörigkeit beispielsweise eher zu „Soziales“ gezählt werden.

Doch bei den Unterüberschriften gibt es ein Problem: Wenn keine biographischen Daten angegeben sind, bleibt die Unterüberschrift trotzdem sichtbar. Das wird oft nicht erwünscht, denn es ist unschön und verwirrend, wenn zwei Header untereinander stehen oder am Ende der Infobox ein Header ohne Kontext steht.

Gruppen bieten eine automatische Funktion, die dieses Problem löst. Es wird mindestens ein Titel, ein Bild oder ein Data benötigt, damit die Gruppe dargestellt wird, denn andernfalls wird sie ganz einfach ausgeblendet. Dieses benötigte Element muss auch einen Inhalt haben, also einen angegebenen Wert haben, sei er per <default> oder per source entstanden.

Konkret auf den oben genannten Fall bezogen bedeutet das jetzt, dass wenn keine biographischen Daten angegeben sind, die Unterüberschrift auch nicht angezeigt wird. Das löst das Problem und es besteht keine Gefahr der Verwirrung oder Unschönheit mehr.

Bearbeitern Lücken zeigen

Fehlendedaten.png

Die Lücke springt ins Auge, sodass Benutzer den Beruf für Hadvar ergänzen können

Nicht immer sind jegliche für eine Infobox benötigte Statistiken jederzeit verfügbar. Zum Beispiel kannst du in manchen Videospielen nicht mehr den Schaden einer Waffe auf Stufe 2 nachschlagen, wenn du diese Waffe bereits auf Stufe 3 hast. Wenn man nicht gerade Lust darauf hat, mehrere Stunden in einen neuen Spielstand zu investieren um diese Waffe auf Stufe 2 zu erhalten und den Schaden auszulesen, wird meist auf die Vervollständigung durch andere Benutzer gesetzt.

Wie wird ein Benutzer überhaupt auf eine Lücke aufmerksam? Falls Daten gänzlich ausgeblendet werden, weil sie nicht angegeben sind, kann wird das Fehlen dieser leicht übersehen. Es ist schon eine deutlich bessere Lösung, per <default>-Tag einen Standard wie „unbekannt“ einzufügen, obwohl das oft missverstanden werden kann. Der beste Weg, Nutzer auf eine Lücke aufmerksam zu machen, ist es, eine visuelle Lücke zu erschaffen.

Eine visuelle Lücke ist in diesem Sinne einfach das Fehlen eines Textes im Feld. Das kann durch <default> </default> erreicht werden, aber es gibt eine bessere Lösung. An dieser Stelle kommt das „show“-Attribut für Gruppen ins Spiel. Durch das Einfügen einer Gruppe wie <group show="incomplete"> werden, unter der Bedingung dass die Gruppe selbst angezeigt wird, jegliche Daten in der Gruppe angezeigt.

An den Stellen, wo keine Werte angegeben sind, entstehen visuelle Lücken, die den Bearbeiter auf fehlende Informationen aufmerksam machen. Mit etwas Glück ist seine Waffe auf Stufe 2 und er kann den Schaden ohne Aufwand ergänzen.

Kleine Daten brauchen wenig Platz

HorizontalMercury.png

Besonders auf mobilen Geräten ist Kompaktheit praktisch, da viel Platz gespart wird

Es kann durchaus vorkommen, dass in einer Infobox bei bestimmten Daten immer kurze Werte wie „15$“ oder „Ja“ angegeben sind. Bei solchen Daten stellst du dir manchmal die Frage, warum sie überhaupt eine ganze Zeile Platz erhalten, wenn 2 von diesen Daten problemlos nebeneinander stehen könnten.

Genau diese Funktion stellen Gruppen mit dem „layout“-Attribut zur Verfügung. Eine Gruppe mit dem Aussehen <group layout="horizontal"> kann nur Daten enthalten und stellt diese horizontal dar. Dabei stehen die Label direkt über den Werten und jedes Data ist genau gleich breit. Am besten sollten nicht mehr als 2-3 Daten in einer solchen Gruppe sein, da sonst die einzelnen Daten zu schmal sind und die Label in mehrere Zeilen getrennt werden müssen.

Mithilfe dieser Funktion können also kleine Daten, die sonst unnötig viel Platz einnehmen, nebeneinander positioniert werden, um die portable Infobox kompakter zu gestalten. Auch auf mobilen Geräten sind die Daten horizontal ausgerichtet, weshalb mobile Nutzer weniger scrollen müssen und mehr Daten gleichzeitig auf dem Bildschirm sehen.

Sekundäre Daten in den Hintergrund bewegen

Nowyouseemenowyoudont.png

Now you see me, now you don't - Per Mausklick tauchen die Daten auf oder verstecken sich wieder

Es gibt eine Grenze zwischen Elementen, die in eine Infobox gehören, und Elementen, die eher in eine Tabelle gehören. Auf dieser Grenze befinden sich Elemente von portablen Infoboxen, die aber nicht unbedingt immer sichtbar sein müssen. Solche Daten sind eher sekundär und nicht jeder Benutzer will sie sofort sehen.

Ein großer Vorteil von Infoboxen ist, dass Informationen in ihr schnell verfügbar sind. Jegliche Informationen in Infoboxen profitieren von ihrer Position, auch die sekundären Informationen. Da diese sekundären Informationen aber nicht von jedem gesehen werden wollen, gibt es eine Funktionen, mit der diese Informationen versteckt werden können.

Dafür wird ein weiteres Attribut der Gruppen benötigt, nämlich das „collapse“-Attribut. Die Elemente einer Gruppe des Typs <group collapse="closed"> werden zunächst versteckt dargestellt und können mit einem Mausklick auf den Header der Gruppe sichtbar beziehungsweise wieder unsichtbar gemacht werden. Der Mausklick auf den Header setzt natürlich voraus, dass es einen Header gibt. Falls die Gruppe keine Unterüberschrift hat, bleiben die Elemente dauerhaft versteckt.

Manchmal willst du auch die Möglichkeit haben, die Elemente einzuklappen, wobei sie anfangs sichtbar sein sollen. Dies wird ganz einfach mit einer Gruppe wie <group collapse="open"> erreicht. Solche Gruppen haben genau die gleichen Funktionen wie Gruppen mit collapse="closed">, mit dem Unterschied dass sie standardmäßig ausgeklappt sind.

Schlusswort

Wie du nun gesehen hast, sind Gruppen vielseitig einsetzbar und stellen viele nützliche Funktionen zur Verfügung. Das heißt aber nicht, dass diese Funktionen so oft wie möglich eingesetzt werden sollten, sondern nur dann eingesetzt werden sollten, wenn sie auch wirklich eine Verbesserung sind.

Ich hoffe, dass dir dieser Blog-Beitrag geholfen hat und du etwas Neues dazugelernt hast. Danke für das Lesen und bei Fragen und Feedback stehen dir die Kommentare zur Verfügung.

Auch bei Fandom

Zufälliges Wiki