best practice

Veröffentlicht am: 02.02.2015 von Holger Schröck in: IT » CMS

Überschriften

Überschriften strukturieren Ihren Text und bereiten Ihren Text so auf, dass alle (auch Suchmaschinen!) sich schnell darin zurecht finden. Nutzen Sie daher die entsprechenden HTML-tags (vornehmlich <h3> und <h4>) oder die entsprechenden Funktionen im HTML-Editor (Heading3 und Heading4) dafür.

Nur weil Sie ein paar Worte in Großbuchstaben oder Fettschrift schreiben, wird daraus noch lang keine Überschrift.

Tabellen

Tabellen sind nur für tabellarische Daten da. Einladungen sind ebenso keine tabellarischen Daten wie auch der Missbrauch einer Tabelle zur Positionierung von Elementen.

Nutzen Sie daher Tabellen nur für Spielpaarungen oder Ergebnistabellen.

Die Zeilen einer Tabelle werden automatisch mit unterschiedlichen Farben hinterlegt.

Ränder

Sollen die Tabellenzellen einen Rand bekommen, setzen Sie die CSS-Klasse "borders". (Ja: ein Element kann mehrere CSS-Klassen haben)

Zellenausrichtungen

Es sind spezielle CSS-Klassen eingerichtet, die für die Ausrichtung der Tabellenzellen vorgesehen sind. Die Klassennamen sind aus den Abkürzungen von "left" (linksbündig) "center" (zentriert) und "right" (rechtsbündig) gebildet.

Die CSS-Klasse "rcl" richtet also den Text in der ersten Zelle rechtsbündig, in der zweiten zentriert und in der dritten (und in allen folgenden) linksbündig aus.

Definiert sind:: c; cl; ccl; clc; clclc; clcclc; clccclc; cllc; cllcr; cclc; cclccclc; cclcccclc; crc; crcl; crclc; lc; lclc; lrc; rcr; rcl; rclc; rcclc; crccclc; ccrccclc; cccclccclc

Diese CSS-Klassen werden Sie insbesondere für die Tabellen aus SwissChess benötigen. Existiert keine passende Klasse, lassen Sie sich unwichtige Spalten am Ende ausgeben.

SwissChess

In SwissChess können Sie einstellen, welche Spalten in welcher Reihenfolge ausgegeben werden sollen. Achten Sie auch darauf, dass Sie eine genügend große Spaltenbreite eintragen, sonst schneidet SwissChess die Texte ab.

Für Ranglisten empfiehlt sich die Reihenfolge der Spalten mit Rang, Name, Verein, usw. auszugeben. Dann reicht die CSS-Klasse "cllc"; der Rang wird zentriert, Name und Verein erscheinen linksbündig und der Rest wird zentriert.

Einladungen und Ausschreibungen

Für Einladungen und Ausschreibungen bieten sich Definitionslisten an:

<dl class="glossar">
  <dt>Veranstalter:</dt>
  <dd>Schachverband Württemberg e.V.</dd>
  <dt>Termin:</dt>
  <dd>1.1.2015</dd>
  <dt>Runden:</dt>
  <dd>1. Runde: 10 Uhr</dd>
  <dd>2. Runde: 11 Uhr</dd>
  <dd>3. Runde: 12 Uhr</dd>
</dl>

ergibt:

Veranstalter:: Schachverband Württemberg e.V.
Termin:: 1.1.2015
Runden:: 1. Runde: 10 Uhr; 2. Runde: 11 Uhr; 3. Runde: 12 Uhr

Der Definitionsterm (<dt>) hat aus Layout-Gründen einzeilig zu sein, wenn die Definition (<dd>) auch nur einzeilig ist. Muss der Defintionsterm zweizeilig sein, hängen Sie einen Zeilenumbruch (<br />) an.

Die Definitionsliste lässt sich auch sehr gut für Ordnungen verwenden. Nutzen Sie dazu statt der CSS-Klasse "glossar" die Klasse "gso". Der Platz für den Definitionsterm ist deutlich schmäler, aber ausreichend für Paragraf und Absatz.

Bilder

Zur Positionierung von Bildern gibt es mehrere Möglichkeiten:

zentriertes Bild

Das einfachste: dem Bild wird die CSS-Klasse "center" zugewiesen.

zentrietes Bild mit Bildunterschrift

Ab Joomla 3.4

<figure class="center">
  <img src="/..." alt="...">
  <figcaption>Bildunterschrift</figcaption>
</figure>

<figure> und <figcaption> sind Elemente von html5 und funktionieren daher erst mit dem Layout, das mit Joomla 3.4 kommen wird.

Randbilder

Bilder, die am linken oder rechten Rand plaziert werden sollen, erhalten die CSS-Klasse "image-left" bzw. "image-right". Damit umfließt der Text das Bild.

Randbilder mit Bildunterschrift werden wie zentrierte Bilder (s.o.) behandelt nur eben mit einer der CSS-Klassen "image-left" bzw. "image-right".

Verlinkung

Verlinkungen auf Seiten und Dokumente von svw.info sind über den html-Editor zu setzen. Der html-Editor setzt den Link über die internen Optionen und Joomla übersetzt den Link in eine lesbare Adresse. Da eine lesbare Adresse sich mit einer neuen Joomla-Version ändern kann, liefe eine solche dann ins Leere. Mit dem Setzen von Links über den html-Editor kann das nicht passieren.

Eigentlich nicht erwähnenswert sollte sein, dass nicht private sondern E-Mailadressen des Verbands veröffentlicht werden.

Text-Spalten

Um Textblöcke nebeneinander darzustellen, gib es Unterspalten:

<div class="ym-grid">
  <div class="ym-g50 ym-gl">
    <div class="ym-gbox">
      <!-- content -->
      ...
    </div>
  </div>
  <div class="ym-g50 ym-gr">
    <div class="ym-gbox">
     <!-- content -->
     ...
    </div>
  </div>
</div>

Mehr dazu unter http://www.yaml.de/docs/index.html#yaml-grids

Normalen Fließtext auf mehrere Spalten zu verteilen ist nicht zu empfehlen.

Spezielle Formatierungen

Traueranzeigen

werden in ein <div> mit der CSS-Klasse "traueranzeige" eingebettet. Die Klasse sorgt für einen Trauerrand und einem weißen Hintergrund. Als Kreuzzeichen (†) schreiben Sie "&dagger;".

ym-noprint

Elemente mit dieser CSS-Klasse werden nicht gedruckt.

PDFs

Inhalte sind auf jeden Fall als HTML bereit zu stellen. Die Webseite soll kein Sammelsurium von PDF-Dateien sein. Zum Drucken hat das Layout zudem spezielle Formatierungen, die einen ordentlichen Ausdruck ermöglichen.