Portable Infoboxen

## Funktionsbeschreibung

### Beschreibung

Eine Box, die eine strukturierte Zusammenfassung von Fakten bietet und plattformunabhängig dargestellt werden kann.

### Art

Information

FANDOM Weiterentwicklungen in Richtung eines integrativen Wiki-Ökosystems schließen nun auch einige empfohlene Vorgehensweisen im Umgang mit portablen Infoboxen ein. Diese neue Art von Infoboxen ist die nächste Generation nach den auf Lua basierten InfoboxBuilder-Vorlagen – es wurden bereits viele portable Infoboxen erstellt! Diese Seite stellt eine alternative zur derzeit offiziellen Dokumentation auf der zuvor verlinkten Hilfeseite dar.

**Diese Seite richtet sich in erster Linie an diejenigen, die sich mit dem Erstellen oder Modifizieren von Vorlagen beschäftigen.**

Sollten dir Fehler und Bugs bei der Benutzung von portablen Infoboxen auffallen, dann sammle sie mit uns auf der Bug-Liste.

## Hintergrund

Wie fast alle Infoboxen, werden auch die portablen Infoboxen im Vorlagen-Namensraum angelegt (bspw. `Vorlage:Infobox Charakter`). Im Gegensatz zu den meisten anderen Vorlagen, die mit vorzugsweise mit Wikitext oder Lua erstellt werden, verwenden portable Infoboxen ein spezielles XML-Format. Dieses Format bzw. diese Auszeichnungssprache ist typisch für HTML oder Erweiterungen innerhalb von Wikitext. Und tatsächlich ist die Grundlage für die Syntax der portablen Infoboxen nichts anderes als ein Skript für eine Erweiterung. Dies erlaubt es, die Infobox auf unterschiedlichen Plattformen darstellen zu können.

Sobald die Vorlage für eine portable Infobox erstellt worden ist, kann sie wie jede andere Vorlage auch auf Artikelseiten eingesetzt werden. In den allermeisten Fällen bedeutet dies, dass bei einer Umstellung der Infoboxen lediglich die Vorlage angepasst werden muss und die Artikel unangetastet bleiben. Das Umwandlungswerkzeug hilft euch dabei, kann euch die Arbeit aber nicht komplett abnehmen, weshalb du umgewandelte Infoboxen sicherheitshalber immer noch einmal überprüfen solltest. Vor allem bei Code, der veraltete Techniken verwendet, überaus komplex ist, weil Lua verwendet wird, oder aufwendige Aufrufe von Parserfunktionen einsetzt, dann stößt auch das Umwandlungswerkzeug an seine Grenzen.

## Grundlagen

*Hauptartikel: Hilfe:Infoboxen*

Die Verwendung einer Infobox auf einer Artikelseite sieht in den meisten Fällen folgendermaßen aus:

```
{{Infobox Charakter
}}

```

Die aufgerufene Vorlage (in diesem Fall Vorlage:Infobox Charakter) verwendet wahrscheinlich die Syntax portabler Infoboxen und sieht ungefähr so aus:

```
<infobox>
 <title source="Name" />
 <image source="Bild">
 <caption source="Bildunterschrift" />
 </image>
 <data source="Rang" />
 <data source="Alter" />
 <data source="Status" />
 <data source="Größe" />
 <data source="Gewicht" />
</infobox>

```

Dieses Beispiel produziert eine bereits brauchbare Infobox und repräsentiert ein absolutes Basisprodukt, welches das Umwandlungswerkzeug ausspucken kann. Es gibt jedoch einige zusätzliche Möglichkeiten, um den Funktionsumfang deiner Infobox zu erweitern. Im nächsten Beispiel werden die Tags `default` (kann innerhalb jedes Tags verwendet werden, der einen `source`-Aufruf hat), `label` und `format` verwendet. Mit letzterem können wir die Ausgabe noch spezifischer formatieren, auf die genaue Funktionsweise kommen wir später allerdings noch einmal zu sprechen.

```
<infobox>
 <title source="Name">
 <default>{{PAGENAME}}</default>
 </title>
 <image source="Bild">
 <caption source="Bildunterschrift" />
 </image>
 <data source="Rang">
 <label>Rang</label>
 </data>
 <data source="Alter">
 <label>Alter</label>
 </data>
 <data source="Status">
 <label>Status</label>
 </data>
 <data source="Größe">
 <label>Größe</label>
 <format>{{{Größe}}} Zentimenter</format>
 </data>
 <data source="Gewicht">
 <label>Gewicht</label>
 <format>{{{Gewicht}}} Gramm</format>
 </data>
</infobox>

```

## Entwürfe mit dem Umwandlungswerkzeug erstellen

*Hauptartikel: Hilfe:Umwandlung von Infoboxen*

Das Umwandlungswerkzeug für Infoboxen wird verwendet, um andere Infoboxtypen („klassische“ Infoboxen, oder Lua/InfoboxBuilder-Infoboxen) in portable Infoboxen umzuwandeln. Man sollte dabei nicht vergessen, dass das Werkzeug euch dabei lediglich unterstützen und euch nicht die ganze Arbeit abnehmen kann. Das Ergebnis muss, je nach Komplexität der Infobox, noch einmal überarbeitet werden.

## Infoboxen mit dem VisualtEditor einfügen

Der VisualEditor (VE) – der am häufigsten eingesetzte Editor bei Neulingen und Anfängern – macht das Einfügen einer Infobox ganz einfach. Über das Drop-down-Menü „Einfügen“ klickst du einfach auf „Infobox“ und wählst dann die gewünschte Infobox aus. Der Nachteil ist jedoch, dass das weitere Modifizieren der Infobox im VE nicht ganz so einfach ist und auch das Einfügen von Bildern und Videos sich derzeit noch etwas schwierig gestaltet. Hierfür musst in den Quelltext-Editor wechseln und die gewünschten Anpassungen manuell tätigen.

Einfügen einer Infobox im VEAuswahl des Quelltext-EditorsInfobox-Code im Quelltext-Editor
## Tags

*Hauptartikel: Hilfe:Infoboxen#Verfügbare Tags*

Wenn du dich mit traditionellen Vorlagen auskennst, weißt du wahrscheinlich schon, dass man einen Begriff, der von drei geschweiften Klammern umgeben ist (bspw. `{{{Begriff}}}`) auch Parameter nennt. Sie repräsentieren die Eingabemöglichkeiten für eine Vorlage, und in vorigen Beispiel würde dann `{{{Begriff}}}` durch das, was im Artikel in der Vorlage eingegeben wird, ersetzt. Bei den portablen Infoboxen wird diese Art von Eingabe durch folgendes Format ersetzt: `source="Begriff"`. Diese andere Art von Parameter werden auch eingesetzt, um übergebene Werte zu speichern, können sie aber auf unterschiedliche Weise darstellen. Die Ausgabe kann mit dem `<format>`-Tag beeinflusst werden.

Du solltest dich auch mit der Verschachtelung von Tags vertraut machen, da nicht alle Tags untereinander kompatibel sind. Bei XML ist es ebenfalls wichtig, dass Tags stets geschlossen werden. Ist kein Schließ-Tag notwendig (weil sich bspw. innerhalb des Tags keine weiteren Tags befinden), kann dieser auch einfach mit `/>` geschlossen werden.

Um mehrere `<data>`-Elemente zu gruppieren (horizontal oder vertikal), kannst du den `<group>`-Tag verwenden.

Die `<navigation>`-Tags sind eine Sonderlösung, um jegliche Art von Wikitext innerhalb einer portablen Infobox darzustellen, falls dieser sonst ignoriert werden würde. Üblicherweise umschließen `<navigation>`-Tags ganze Abschnitte (wie die `<data>`-Tags) und können verwendet werden, um Links oder andere Informationen anzuzeigen. Üblicherweise werden `<navigation>`-Tags als Fußleiste einer Infobox eingesetzt.

## Bilder

Dank einer Tabber-ähnlichen Funktion ist es nicht nur möglich, einzelne Bilder in eine portable Infobox einzufügen, sondern mit den `<gallery>`- und `<tabber>`-Tags mehrere Bilder auf einmal zu verwenden. Siehe auch Hilfe:Infoboxen#Einbinden mehrerer Bilder oder Videos.

Ein einzelnes Bild in einer Infobox

```
<!-- Infobox Character -->
<infobox layout="stacked">
  <title source="Name"><default>{{PAGENAME}}</default></title>
  <image source="Bild" />
  <data source="Staffel"><label>Staffel</label></data>
  <data source="Erster Auftritt"><label>Erster Auftritt</label></data>
</infobox>

```

Beispiel für die Benutzung des `<gallery>`-Tags

```
{{Infobox Charakter
    Snoopy Haus.jpg|Haus
    Snoopy Doppeldecker.jpg|Doppeldecker
    Snoopy Woodstock.jpg|Mit Woodstock
  </gallery>
           [[Series 4|4]], [[Series 5|5]], [[Series 6|6]]
}}

```

Beispiel für die Benutzung des `<tabber>`-Tags

```
{{Infobox Character
    Mit Woodstock = [[Datei:Snoopy Woodstock.jpg]]
  </tabber>
           [[Staffel 4|4]], [[Staffel 5|5]], [[Staffel 6|6]]
}}

```

## Styling mit CSS

*Hauptartikel: Hilfe:Infoboxen/CSS*

Portable Infoboxen erhalten automatisch ein einfaches Styling, das sich am über den Theme-Designer ausgewählten Farbschema orientiert. Ist ein Parameter nicht ausgefüllt, wird die entsprechende Zeile nicht angezeigt – sofern kein `<default>`-Tag Verwendung findet.

Inline-CSS wird bei den portablen Infoboxen nicht unterstützt, ebenso wenig benutzerdefinierte Klassen für vorhandene Tags. Vorhandene Klassen der portablen Infobox können allerdings über das lokale CSS angepasst werden, und mit den `theme`- und `theme-source`-Attributen können Infoboxen auch unabhängig voneinander gestaltet werden.

### Layout

Es gibt zwei Arten von möglichen Layouts, die Art der Anzeige der `<data>`- und der `<label>`-Felder beeinflussen.

### Label

Data

Das voreingestellte Standardlayout ist tabellarisch angelegt, mit der Beschriftung links und dem Inhalt rechts daneben.

### Label

Data

Das andere Layout erreichst du mit `<infobox layout="stacked">` und stellt die beiden Felder leicht versetzt übereinander dar.

### Gruppen

Mit Gruppen bzw. dem `<group>`-Tag kannst du das Layout und einige Funktionen für bestimmte Abschnitte innerhalb einer Infobox kontrollieren. Gruppen sind vor allem dann äußerst nützlich, wenn du bestimmte Teile einer Infobox ein- und ausklappbar machen möchtest. Hierfür verwendest du eines der folgenden Attribute:

* `collapse="closed"` - standardmäßig eingeklappt
* `collapse="open"` - standardmäßig ausgeklappt

### Themes

*Hauptartikel: TBD*

Themes sind eine Zusammenstellung an CSS-Regeln, die eine bestimmte Infobox betreffen (über das `theme="NameDesThemes"`-Attribut von `<infobox>`). Wenn du ein Theme näher spezifizieren willst, wende deine Regeln einfach auf die Klasse `.portable-infobox.pi-theme-NameDesThemes` auf `MediaWiki:Wikia.css` an. Dadurch werden die Standard-Styles für diese Infobox überschrieben.

## Fortgeschrittene Ausgaben

Daten so auszugeben, wie sie eingegeben werden, ist eine recht einfache Anwendungsmöglichkeit.