Fandom

Wikia Deutschland

Kommentare4

Plattformunabhängige und auf Galerien basierende Charakterportale

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

Der Originalblog How to add portable gallery-based character portals to your wiki wurde im englischen Community Central von dem Benutzer Speedit verfasst und veröffentlicht und von den deutschen Portabilitäts-Pionieren für das deutsche Portability Wikia übersetzt.

HouseofPortalCards.png

Ein Haus von Portablen Karten - aber nicht alle Geräte sind willkommen...

Die meisten Wikis auf Wikia haben viele Seiten zu den verschiedenen Charakteren ihres jeweiligen Universums, welche oft aber nicht nur auf den Hauptseiten in kleinen, bunten Kästchen dargestellt werden, um die Darsteller, Protagonisten oder Helden vorzustellen. Diese Vorlagen sehen meistens auf dem PC total gut aus, doch in der mobilen Ansicht wirken sie meistens nicht so gut.

Dies macht die Inhalte für die Hälfte der Wikialeser gar nicht oder nur schwer zugänglich, weil Teilstücke nicht plattformunabhängig gestaltet sind. Doch warum ist dieser Code problematisch und wie können wir daran arbeiten, ihn für mobile Leser gut bedienbar und ansprechend zu gestalten?


Das Problem: Tabellen sind kein gutes Design

Oft (aber hoffentlich nicht mehr lange) werden diese Charaktergalerien mit einer auf Tabellen basierten Vorlage wie {{CharPortalAAA}} realisiert. Diese Vorlage beinhaltet mehrere Tabellen mit einer fiesen Mischung aus Wikitext und HTML, die vielerlei Fehlerquellen mit sich bringen. (Erst kürzlich verursachte diese Lösung einige Probleme bzgl. Ausrichtung, und Parsing und brachte weitere Nachteile mit sich.)

Im folgenden, eingeklappten Codebeispiel wird eine MediaWiki-Tabelle mit einer HTML-Tabelle verschachtelt, die wiederum weitere div-Tags beinhaltet. Dies macht den Code bereits nur schwer lesbar. Darüber hinaus gerät die Vorlage an ihre Grenzen, sobald mehr als vier Bilder verwendet werden. Klicke auf „Ausklappen“, um den Code zu sehen; er ist äußerst lang:

Neugierig, dir den Code anzusehen? Klicke auf „Ausklappen“!


{| style="background:#000000; border:1px solid #black; border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px;-webkit-border-radius: 4px 4px 4px 4px;"
|- align="center"
|<div style="position:relative; height: 78px; width: 130px; ">
<div style="position: relative; top: 75px; left: 0px; width: 130px; overflow: hidden; line-height: 12px; z-index: 4; text-align: center;"><table cellspacing="0" cellpadding="1" style="background:#000000;border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;" align="center"><tr><td> [[{{{articlename}}}|<font color=#FFFFFF size="1">'''{{{name}}}'''</font>]] </td></tr></table></div>
<div style="position: absolute; top: 0px; left: 0px; height: 78px; width: 130px; overflow: hidden">
<div style="position: absolute; top: 0px; left: 0px; font-size: 130px; overflow: hidden; line-height: 130px; z-index: 3">[[{{{articlename}}}|     ]]</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 2;">[[Image:{{{image}}}|130px|{{{articlename}}}]]</div>
</div></div>
|}

Diese Vorlage wird meist heimlich in eine weitere Tabelle geschmissen, mit je einem Charakter in einer Zelle. Ein weiteres Problem der Vorlage: Wenn fünf dieser Vorlagen nebeneinander in einer Tabelle stehen, also fünf Zellen, werden gut 20 Pixel von jedem Bild versteckt, weil die Vorlage 130px Breite braucht, uns auf einer Seite aber in der Regel nur etwa 600px zur Verfügung stehen, wenn wir die Mindestbreite berücksichtigen. Und diese massive Vorlage braucht außerdem eine lange Zeit, bis sie geladen wurde.

Die Verzwicktheit: Die mobile Unverträglichkeit

JonSnowPortable.png

Er mag vielleicht tot sein, aber ist er auch portierbar?

Es gibt einen sehr guten Grund, diese Vorlage schnell wegzuschmeißen – Wikia musterte unhandliche Tabellenvorlagen wegen ihrer schlechten Portabilität in der mobilen Ansicht aus, weshalb einige dieser Vorlagen fehlerhaft oder gar nicht angezeigt werden und entsprechend umgewandelt werden müssen, um mit der Zeit Schritt halten zu können.

Ein Großteil der Leser benutzt mobile Geräte, wodurch jede Community in Betracht ziehen sollte, einige Inhalte plattformunabhängig zu gestalten. Es macht wenig Sinn, Inhalte zu präsentieren, die von nicht-portierbaren Codes umgeben sind, denn die Seite wird im schlimmsten Fall fast gar nicht oder anders als gewollt angezeigt. Diese Vorlage wird häufig verwendet, ist aber keine gute Lösung und es ist Zeit, etwas zu ändern!

Die Lösung: Eine Galerie-Vorlage

Ich habe eine anständige Lösung gefunden, die sich wie eine echte Charakterportalseite verhält und fast genauso aussieht wie das Beispiel oben – der Galerie-Tag von Wikia. Ich habe meine Version ironischerweise {{PortalAAA}} benannt, um subtil darauf hinzuweisen, oben stehende Vorlage in die Tonne zu treten. Es ist Zeit, die Zukunft mit offenen Armen zu empfangen und die Portabilität ist ein Teil davon.

Die Galerie zum Charakterportal benötigt drei Dinge (neben einigen hübschen Charakterartikel, auf die sie verlinken können lol):

  • Die Basis der Vorlage, die sich hier befindet.
  • Tolle Bilder zu den Portraits der Charaktere mit einer Breite von 145px und einer Höhe von 85px.
  • Der CSS-Code aus diesem Beitrag

Die Vorlage zeigt die Bilder, verlinkt zu den Artikeln und ist auch in der mobilen Version gut zu sehen. Somit ist es die perfekt geeignete Vorlage für Charakterportalseiten.

Dies ist der vereinfachte Vorlagencode. Vergewissere dich, die Farben an das Design deines Wikis anzupassen. Dieser Code ist ein Geschenk, also benutze und zitiere ihn gerne wo auch immer du magst:

{{#tag:gallery
|{{{gallery}}}
|orientation=landscape
|position=center
|captionalign=center
|captionposition=within
|widths=120px
|columns=5
|bordercolor=#000
|captiontextcolor=#FFF
|bordersize=medium
|spacing=small
|hideaddbutton=true
|navigation=true
}}

<- Passe bordercolor und Beschriftungstext an das Farbdesigns deines Wikias an.

Hier ist der CSS-Code, der dem visuellen Design der ursprünglichen Vorlage entspricht:

.portal .wikia-gallery { margin: 0 0 12px 0; } 
.portal .wikia-gallery-item { padding: 2px !important; }
.portal .gallery-image-wrapper { height:103px !important; }
.portal .thumb { height:104px !important;}
.portal .lightbox-caption { padding:1px !important; font-weight:bold; }


Ich weiß, dass die Verwendung von !important nicht optimal ist, aber das inline-Styling der Galerie muss überschrieben werden. Da in der mobilen Ansicht der Code ignoriert wird, sind wir allerdings auf der sicheren Seite und wir müssen uns keine Gedanken über die farbliche Gestaltung dort machen.

Der Vorlagencode sieht so aus:

{{PortalAAA|gallery=
Filename.png{{!}}link=Articlename{{!}}Caption
}}

Zum Beispiel:

{{PortalAAA|gallery=
JohnDoeP.png{{!}}link=John Doe{{!}}John
JaneDoeP.png{{!}}link=Jane Doe{{!}}Jane
}}

Update: CSS für die Verschachtelung der Bildunterschrift

Die Vorlage erfordert das folgende CSS, um die Bildbeschreibung/Bildunterschrift in der Ecke eines Bildes zu „verschachteln“.

.mainpage .portal .wikia-gallery { margin:7px 0 12px 0 !important; }
.mainpage .portal .gallery-image-wrapper { height: 85px !important;border-radius: 3px; }
.mainpage .portal .gallery-image-wrapper { height: 85px !important;border-radius: 3px; }
.mainpage .portal .thumb { height: 88px !important; }
.mainpage .portal .lightbox-caption { padding: 1px 2px 1px 3px !important;font-weight:bold;font-size: x-small !important;width: auto !important;right: 0 !important;left: initial !important; }

Die Anwendung der Vorlage erfordert class="mainpage" in einem übergeordnetem Tag oder in einem div:

<div class="mainpage">
{{PortalAAA|gallery=
JohnDoeP.png{{!}}link=John Doe{{!}}John
JaneDoeP.png{{!}}link=Jane Doe{{!}}Jane
}}
</div>



Zum Abschluss ...

Vielen Dank für eure Aufmerksamkeit. Zögert nicht, den Blog-Beitrag oder die Originalvorlage meines Heimat-Wikis zu verlinken, wenn ihr die Vorlage in euer Wiki importieren wollt.

Die verwendete Galerievorlage: Verbesserungen und Hilfe:
  • Falls ihr Fragen dazu habt, könnt ihr sie gerne in den Kommentaren stellen oder dem Autor des Originalblogs auf Englisch eine Nachricht hinterlassen.
  • Jegliches Feedback zum Code oder anderen Verbesserungen sind gerne gesehen.

Antworten zu allen weiteren Fragen bezüglich dem Thema Portabilität auf Wikia oder warum man sein Wikia portabler gestalten sollte findest du im Portability Wikia.

Auch bei Fandom

Zufälliges Wiki