Hilfe: Mobil

Aus LehramtsWiki
Wechseln zu: Navigation, Suche


Diese Seite half dem Wiki-Team bei der Überarbeitung der Inhalte im Zuge der Umstellung auf das neue Design (Stand April 2014). Der Fokus dieser Arbeit liegt darauf, alle Inhalts anpassbar zu machen, sodass diese auf jedem Gerät und bei jeder Bildschirmgröße gut lesbar sind und gut aussehen.

Bitte beachte, dass einige der Inhalte auf dieser Seite nur für die Umstellungsphase relevant waren (November 2013 bis April 2014). Jedoch kann es definitiv nicht schaden sich der Problematik dieses Themas bewusst zu werden.

Allgemeines zum Thema flüssiger Inhalt

Flüssiger Inhalt meint, dass wir als Inhaltsersteller keinerlei feste Formatierungen durchführen, die nicht von außen änderbar sind. D.h. wir sollten nach Möglichkeiten nur die Standard Wikitext-Formatierungen, wie Überschriften, Fettdruck, Kursivdruck, Listen und Definitionslisten verwenden. Das Thema Tabellen wird gesondert weiter unten betrachtet. Generell gilt aber, dass keine neuen Wikitext-Tabellen mehr angelegt werden sollten. Wir müssen versuchen nur noch Vorlagen zu benutzen, welche anpassungsfähig sind (eine Liste wird es bald weiter unten geben) und sämtliche Zusatzformatierungen zu entfernen oder über geeignete Vorlagen zu realisieren.

Nicht optimierte Seiten

Es wird Seiten geben, die entweder nicht mehr optimiert werden sollen oder die sich nicht gut optimieren lassen. Solche Seiten können nun mit einem Hinweis versehen werden, welcher nur im Barcelona-Skin und nur in der Tablet- und Handyversion zu sehen ist. Den genauen Text findest du in der Vorlage:NichtOptimiert. Ergänze -am besten ganz oben auf der Seite- deinen Text um folgende Zeile:

{{NichtOptimiert}}

Neue Module und Extensions

An dieser Stelle eine kurze Liste mit Hilfeseiten zu neuen Extensions / Modulen und deren Verwendung:

Vorlagen zur Formatierung von Sonderinhalt

Was ist Sonderinhalt? Schlichtweg alles, was nicht durch einfache Wikitext-Formatierungen erreicht werden kann (siehe oben). Verwende hierfür bitte nur vorgefertigte Vorlagen. Es folgt eine grobe Übersicht über einige der wichtigsten Vorlagen:

Diese Vorlage kann für vielerlei Zwecke benutzt werden, z.B. als Hinweisbox (blau und rot). Es wird eine Box generiert (wie auf der zukünftigen Startseite) mit frei wählbarem Inhalt. Die Box gibt es in drei verschiedenen Farben. Schau dir bitte den Kommentar in der Vorlage an, für die genaue Verwendung der Farben.
Verwendung:
{{Box|Überschrift=Trallalla|Text=Hier steht ganz viel Text}}
Mithilfe dieser Vorlage kann ein Übersichtskasten an der rechten Seite deines Artikels angezeigt werden mit wichtigen Informationen zu Ansprechpartnern etc.
Verwendung:
{{Infobox Institution
|abkuerzung=abkuerzung
|langname=langname
|strasse=strasse
|ort=ort
|plz=plz
|ansprechpartner=ansprechpartner
|raum=raum
|oeffnungszeiten=oeffnungszeiten
|sprechzeiten=sprechzeiten
|leitung=leitung
|tel=tel
|tel2=tel2
|tel3=tel3
|fax=fax
|fax2=fax2
|fax3=fax3
|email=email
|email2=email2
|email3=email3
|www=
}}
Achte bitte darauf, dass du für lange Worte innerhalb der Infobox entsprechende Umbruchstellen definierst.

Diese Liste hat natürlich noch keinen Anspruch auf Vollständigkeit. Mit der Weiterentwicklung der Seite werden noch weitere Vorlagen hinzukommen.



Lange Worte und lange Titel

Hin und wieder kommt es vor, dass überdurchschnittlich lange Worte gebraucht werden, sowohl im Fließtext als auch im Titel einer Seite. Für Fließtext lässt sich dieses Problem ziemlich leicht lösen: Wir haben ein langes Wort, bspw. Antioxidationsmittel­aufbewahrungskästchen. Mithilfe des Tags ­ lässt sich dieses Wort in Silben der zumindest Umbruchpunkte zerteilen. In fertigem Wikitext könnte ein solches Wort so aussehen:

Antioxidations­mittel­aufbewahrungs­kästchen

Wenn lange Worte in Titeln auftauchen, kann eine Extension benutzt werden, um einen alternativen Titel anzugeben. Sagen wir, wir haben den gleichen Titel wie gerade im Namensraum Vorlage:. Füge in die erste Zeile deines Wikitextes folgende Zeile ein:

<titlehyphen>Antioxidations&shy;mittel&shy;aufbewahrungs&shy;kästchen</titlehyphen>

Wenn der Titel einen Schrägstrich enthält wie z.B. auf der Seite "Course Catalog/​Information Package" ist der Teil "Catalog/​Information" zu lang um mobil vernünftig dargestellt zu werden. Also wäre es nötig nach dem "/" ein Leerzeichen einzufügen, was allerdings in der normalen Ansicht falsch aussieht. Die Lösung hierfür ist ein Leerzeichen, welches keine Breite hat. Dieses kann durch &#8203; erzeugt werden. Im Gegensatz zu &shy; wird hierdurch im Falle eines Umbruchs kein Bindestrich generiert.

<titlehyphen>Course Catalog/&#8203;Information Package</titlehyphen>

Diese Extension ersetzt dann den Titel durch die silbengetrennte Version innerhalb des titlehyphen Tags.

Bilder

Wenn du Bilder in einen Artikel einfügst, dann hast du i.d.R zwei Möglichkeiten:

  • Thumbnail
[[Bild:Mensa-Beispielbild-klein.png|thumb|250px|Mensa Essen]]
Dieser Code generiert ein kleines Vorschaubild mit einer maximalen Größe von 250 Pixeln. Setze den Wert bitte nicht größer als 250px.
  • Bild in Originalgröße
[[Bild:Mensa-Beispielbild-klein.png|Mensa Essen]]
Hier gibst du den Dateinamen deines Bildes und eine Beschreibung an. Wichtig ist, dass keine Größe in Pixeln angegeben wird, da das Bild sich sonst nicht an die Fenstergröße anpasst.

Wenn du eine dieser beiden Möglichkeiten konsequent benutzt, dann sollten alle Bilder, die du einfügst oder bearbeitest, anpassbar sein. Überprüfe dies am besten direkt vor dem Speichern, indem du die Größe deines Browserfensters veränderst.


Weiterhin können Bilder zur Not weiterhin wie folgt eingebunden werden:

[[Bild:Studausw.jpg|right]]

Dies bedeutet, dass das Bild rechts an der Seite angezeigt wird, der Text das Bild aber links umläuft. Im Stylesheet wird dieses Umlaufen für Handy's unterbunden. Als Beispiel siehe Matrikelnummer. Bitte sparsam damit umgehen, da das Bild (in der Handyversion) immer vor dem Text zu sehen ist und dies nicht immer unbedingt erwünscht ist.

Tabellen

Tabellen sind ein heikles Thema im Bereich des Webdesign und es gibt aktuell noch keine perfekte Lösung. Deshalb ist hier ein Kompromiss gefragt, welchen wir aktuell mit der Benutzung von Footable im Wikiteam beschlossen haben. Weiterhin gibt es einige neue Richtlinien, die jeder, der im Wikiteam an Inhalten arbeitet, berücksichtigen sollte. Nur so können wir rechtzeitig mit der mobilen Seite an den Start gehen.

Zusammengefasst sehen wir folgendes Vorgehen vor:

  • Überlegen, ob diese Tabelle nicht anders dargestellt werden kann bspw. als Liste
  • Alte Tabellen als alt markieren
  • Alte Tabelle im Table crusher umwandeln und ggf. optimieren
  • Neue Tabelle direkt hinter die alte Tabelle mit bestimmter Auszeichnung setzen

Tabelle anders darstellen

Es gibt im Wiki einige Tabellen, die nur eine geringe Datenmenge darstellen (weniger als 5 Zeilen / Spalten). Bevor du also solch eine Tabelle mit dem Table crusher umwandelst, könntest du dir überlegen, ob du diese Daten auch als Liste darstellen kannst. Hierzu ein kleines Beispiel:

Sprechzeiten am Campus Essen: Campus Essen
Öffnungszeiten für ausländische Studierende ("Incomings") Mo 13:00 - 15:00 Uhr

Di - Fr 09:00 - 12:00 Uhr

Öffnungszeiten für Programmstudierende ("Incomings") Mo 13:00 - 15:00 Uhr

Mi 09:00 - 12:00 Uhr

Öffnungszeiten für Studierende, die ins Ausland gehen ("Outgoings") Mo 13:00 - 15:00 Uhr

Mi 09:00 - 12:00 Uhr

Öffnungszeiten für Informationen zu Auslandspraktika ("Outgoings") nur 14-tägig in geraden Kalenderwochen:

Di 10:00 - 12:30 Uhr und
Di 14:00 - 15:00 Uhr

(Diese Tabelle ist aus einer alten Seite kopiert und passt sich demnach nicht an den Bildschirm an.)

Diese Tabellen kann auch folgendermaßen als Liste dargestellt werden:

Öffnungszeiten Akademisches Auslandsamt Campus Essen:

  • für ausländische Studierende ("Incomings")
Mo 13:00 - 15:00 Uhr
Di - Fr 09:00 - 12:00 Uhr
  • für Programmstudierende ("Incomings")
Mo 13:00 - 15:00 Uhr
Mi 09:00 - 12:00 Uhr
  • für Studierende, die ins Ausland gehen ("Outgoings")
Mo 13:00 - 15:00 Uhr
Mi 09:00 - 12:00 Uhr
  • für Informationen zu Auslandspraktika ("Outgoings")
nur 14-tägig in geraden Kalenderwochen
Di 10:00 - 12:30 Uhr und
Di 14:00 - 15:00 Uhr

Einrückungen im Wikitext erzielst du übrigens mit einem Doppelpunkt am Zeilenanfang. Hier ein Codeausschnitt vom obigen Beispiel:

* für ausländische Studierende ("Incomings")
:Mo 13:00 - 15:00 Uhr
:Di - Fr 09:00 - 12:00 Uhr


Wenn du deine Tabelle nicht auf die hier vorgestellte Art und Weise umstrukturieren kannst, dann lies einfach weiter ... =)

Alte Tabellen markieren

Dies ist ein sehr wichtiger Schritt zum neuen Wikiaussehen, da wir die alten Tabellen bis zum Start des Barcelona-Skins noch erhalten wollen. Danach sollen jene aber zügigst verschwinden. Deshalb ist es notwendig, dass jede alte Tabelle, die durch eine neue ersetzt werden soll, gekennzeichnet wird. Und zwar so: Nehmen wir an, du hast eine Tabelle, die etwa wie folgt aussieht ...

 {| ...
 ...
 |}

... dann zähle bitte zuerst nach, die wievielte Tabelle dies auf der Seite ist und benutze danach folgende Notation:

 <!--TA(Nummer)-->
 {| ...
 ...
 |}
 <!--TE(Nummer)-->

Sei dir bitte bewusst, dass alles zwischen den Kommentaren später gelöscht wird. Deshalb soll wirklich nur die Tabelle innerhalb jener Kommentare stehen. Beachte bitte genau die Syntax, folgende Notationen werden zu Fehlern führen:

 <!--TA 4-->
 <!--ta8-->
 <!--ta5 -->
 <!--Ta 1 -->
 <!--TA09-->

Es werden Zahlen von 1 bis 9 unterstützt werden. Falls du auf einer Seite mehr als 9 Tabellen umwandeln müsstest, so melde dich bitte bei Sören, damit er dies bei der Ersetzung berücksichtigen kann.

Wir haben uns in einer Sitzung darauf geeinigt, dass jede alte Tabelle um eine bestimmte Klasse (alte-tabelle)erweitert werden muss. Dein Tabellenkopf wird etwa so aussehen:

 {| border="1" rules="all" style="text-align:center" cellspacing="0" cellpadding="4" 
 |-

Es kann auch sein, dass nur die geschweifte Klammer und der Längsstrich vorhanden sind. Jedenfalls fügst du bitte folgendes ein:

 {| border="1" rules="all" style="text-align:center" cellspacing="0" cellpadding="4" class="alte-tabelle"
 |-

Sollte es schon ein class-Attribut geben, ergänze die Klasse alte-tabelle am Ende:

Dieser Schritt ist wichtig, damit wir vorerst alle alten Tabellen ausblenden können, wenn die neue Seite startet.

Alte Tabelle im Table crusher umwandeln

Wenn du die alte Tabelle gekennzeichnet hast, kannst du die gesamte Tabelle ohne die gerade erstellten Kommentare (also nur von {| bis |} ) markieren und kopieren. Unter unseren Spezialseiten findest du ein Werkzeug mit dem Namen Table crusher. Dieses kleine Programm wandelt Wikitext-Tabellen mit den in der Beschreibung genannten Voraussetzungen in HTML-Tabellen um. Füge also deine Tabelle in das Textfeld unten ein und bestätige deine Eingabe. Das Programm generiert deine Tabelle und zeigt diese auf der Ergebnisseite direkt an, sodass du zügig Fehler finden solltest.

Es werden bei der einen oder anderen Tabelle mit ziemlich großer Sicherheit Fehler auftauchen, also überprüfe deine Tabelle bitte nochmal genau.

In dem Textfeld unten steht der generierte Quellcode für deine Seite. Hier musst du noch die Attribute für Footable einsetzen und deine Tabelle ggf. anpassen bzw. optimieren. Wenn deine Tabelle fertig ist, kannst du sie hinter der alten einfügen.

Neue Tabelle einfügen

Nun brauchst du lediglich deine neue Tabelle einzufügen. Beachte bitte, dass du das Barcelona-Skin bei deinen Einstellungen (unter Aussehen) aktiviert haben musst, um die neue Tabelle sehen zu können. Im 'Vector-Skin' werden die neuen Tabellen noch versteckt. Alle weiteren Infos zur neuen Tabelle gibt es auf der Footable Hilfeseite.

Gültigkeitsangaben in Artikeln

Gültigkeitsangaben haben einen zentralen Sinn und Zweck im Wiki. Alles soll immer möglichst aktuell bleiben. Deshalb sollten auch Artikel, welche sich nicht soooo häufig ändern mit einem Ablaufdatum versehen werden. Damit ist sichergestellt, dass alle Artikel ab und an gesichtet und auf Aktualität überprüft werden.

Bitte benutzt folgende Notation um ein Ablaufdatum einzutragen:

{{Gültig­keit|DATUM=2016-04-01}}

Dabei ist das Datum in der Form Jahr-Monat-Tag (yyyy-mm-dd) anzugeben.

Warum nicht die alte Notation?

  1. Diese Art der Notation ist kürzer.
  2. Sie wird in Zukunft keinen sichtbaren Text nach außen produzieren und dient somit nur unseren internen Zwecken
  3. Die bisherige Art und Weise ist bei Suchmaschinen sehr unbeliebt, da "unsichtbarer Text" meistens benutzt wird um Spam einzuschleusen oder eine Seite mit zusätzlichen Schlüsselworten zu überladen. Wer hier etwas weiter lesen möchte, kann sich gerne mal den Artikel über Was ist unsichtbarer Text? Kann ich Text verstecken um ein höheres Ranking in Suchmaschinen zu erhalten? (englisch) zu Gemüte führen.

Farbpalette / Farbschema

Für zukünftige Projekte und generell als Styleguide und Info, hier zwei Farbpaletten, welche sämtliche benutzten Farben im neuen Wiki enthalten:

Als Vergleich dazu, hier das aktuelle Farbscheme der Uni DUE:

Fragen?

Falls du Fragen hast, melde dich bei Sören oder Leon.