Richtlinien für fahrradzukunft.de

Die Richtlinien wurden ab Ausgabe 4 entwickelt.

Zwar sind auch die Ausgaben 0-3 überarbeitet, es kann jedoch vorkommen, dass in diesen älteren Ausgaben einige Richtlinien nicht umgesetzt wurden, weil an alten Ausgaben nicht zu stark im Nachhinein etwas verändert werden sollte.

Ein Teil des Markups wird per PHP automatisch generiert. Hinweise speziell dazu stehen in grau hinterlegten Kästen.

Kurzes Inhaltsverzeichnis:
Vollständiges Inhaltsverzeichnis:

Übergeordnete Ziele

URL-Struktur/ Dateinamen

"Sprechende" URLs und Dateinamen sind ein Ziel. Das ist nützlich für Leser, die z. B. einen Link am Telefon buchstabieren wollen, aber auch für Suchmaschinen, die einzelne Bestandteile einer URL berücksichtigen, wenn sie mit dem Suchwort übereinstimmen.

Alle HTML-Dokumente tragen den Namen index.php. Bei allen Pfaden, die auf einen /enden, liegt dahinter ein HTML-Dokument index.php

Namen enthalten keine Großbuchstaben, Leerzeichen, Sonderzeichen oder Unterstriche. Unterstriche führen beim Ablesen aus unterstrichenen Links leicht dazu, dass sie mit einem Leerzeichen verwechselt werden. Stattdessen wird Minus als Trennzeichen eingesetzt: /foo-bar/

Bereich Pfad class in body Bemerkung
Startseite / home
Artikel einer Ausgabe /5/ editorial Editorial
/5/lichtkafkaeske/
/5/gelesen/ read Rubriken
/5/leserbriefe/ letter-to-editor
/5/hohlspeiche/ hohlspeiche
Service-Seiten /archiv/ archive
/impressum/ impressum
/impressum/satzung.pdf
/impressum/spendennachweis.pdf
/faq/ faq
/registrierung/
/registrierung/erfolgreich/
/registrierung/unvollstaendig/		 registration
Bilder /bilder/05/lichtkafkaeske/01.jpg Bild.
Weil der Dateimanager meines Editors leider keine sinnvolle numerisch-alphabetische Sortierung beherrscht (1.jpg, 10.jpg, 2.jpg) tragen die Bildordner und Dateinamen als pragmatischen Kompromiss führende Nullen. Bild-URLs werden nicht häufig weitergeben und daher ist bei Ihnen Schönheit und Purismus nicht so hochrangig wie bei URLs von Dokumenten. Bilder stehen in einem eigenen Ast, obwohl sie logisch besser direkt in das Verzeichnis eines Artikels passen, weil es so übersichtlicher im Dateimanager bleibt. Auch dies also ein bewußter Kompromiss.
/bilder/05/lichtkafkaeske/michael-wandinger.jpg Portraitbild eines Autors.
Vorname und Nachname vollständig. Auch wenn ein Autor Redakteur ist und daher sein Portraitbild öfter verwendet wird, soll das Bild jedesmal in den Bilder-Ordner des Artikels platziert werden.
/bilder/05/lichtkafkaeske/formel-01.png Formel-Bild
/bilder/05/lichtkafkaeske/schmuck-01.png Schmuckbild.
Sie sollen die Zählung der normalen Bilder nicht beeinflussen.
/bilder/05/titelbild.jpg Titelbild
/bilder/05/lichtkafkaeske/01-big.jpg
/bilder/05/lichtkafkaeske/michael-wandinger-big.jpg
/bilder/05/titelbild-gross.jpg		 Große Versionen von Bildern.
Aus programmiertechnischen Gründen kann das Postfix "-gross" nur beim Titelbild verwendet werden, nicht jedoch auch bei den anderen.
/bilder/05/lichtkafkaeske/01-orig.jpg Originalbild
Sie werden nicht auf die Hauptdomain hochgeladen, sondern dienen dem Bildredakteur zur Erstellung der verschiedenen Versionen. Der Bildredakteur archiviert sie lokal bei sich.
Fehlerseiten /error/401/
/error/403/
/error/404/
/error/500/		 error
Technische Bereiche /css/default.css
 Medienspezifische Blöcke sind hier per @media eingebunden
/css/bilder/logo.gif Per CSS eingefügte Bilder.
/includes/ Includes
PDFs /pdf/fz-ausgabe-5.pdf
/pdf/fz-ausgabe-5-lichtkafkaeske.pdf		 Der Name garantiert denjenigen, die das PDF abspeichern, eine leichte Zuordnung.
"ausgabe" kommt im Namen vor, damit die Zahl nicht als Jahreszahl fehlinterpretiert werden kann.

Diverse

Standardauszeichnungen werden nicht erwähnt, nur Besonderheiten.

Trennung von Struktur und Gestalt

Ja.

Für das zweispaltige Layout werden 2 TDs genutzt, weil CSS schlecht für Spaltenlayouts geeignet. Siehe dazu auch:

HTML-Version: XHTML strict

Ja

Zeichenkodierung: UTF-8

Ja. Sonderzeichen und Umlaute, die unterstützt werden, werden nicht als Entities geschrieben. Das erleichtert das Lesen und Pflegen der Seiten für den Editor.

Kein Byte Order Mark (BOM).

Validität

Ja

Sprachangabe

Da FZ in deutscher Sprache erscheint: <html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

Passagen mit englischsprachigem Inhalt erhalten: xml:lang="en" lang="en"

Normalisierung von zurückgegebenen Links

Damit Suchmaschinen nur eine einzige Adresse einer Ressource listen (Kanonizität), sind in .htaccess Weiterleitungen eingerichtet:

# Weiterleitung 301 
# von http://www.fahrradzukunft.de/* 
# nach http://fahrradzukunft.de/*
 	
RewriteCond %{HTTP_HOST} ^www.fahrradzukunft\.de$ [NC]
RewriteRule ^(.*) http://fahrradzukunft.de/$1 [NC,R=301]
# Weiterleitung 301 
# von http://www.fahrradzukunft.de/*/index.php 
# nach http://fahrradzukunft.de/*/
 	
RewriteCond %{THE_REQUEST} index\.(php) [NC]
RewriteRule (.*)index\.(php) /$1 [NC,R=301]

Weiterleitung

Wenn alte Artikel neu ausgezeichnet werden, erhalten sie auch eine URL nach dem Muster der neuen Artikel. Für den alten URL wird eine Weiterleitung eingerichtet.

Vier TDs für das Spaltenlayout

<table class="column-layout">
 <tr>
 <td class="logo-td"></td>
 <td class="search-td"></td>
 </tr>
 <tr>
 <td class="nav-td"></td>
 <td class="content-td"></td>
 </tr>
</table>

Benennung

Klassenname

Englischsprachige Bezeichnungen. Nur Klassennamen, die Struktur transportieren. Also zum Beispiel nicht grey-box sondern summary.

URLs als Linktext

Vorab: URLs als Linktext werden vermieden, weil natürliche Sprache besser lesbar ist.

Wenn doch ein URL als Linktext dient, erhält er bevorzugt die Form example.tldstatt http://www.example.tld, www.example.tld oder http://example.tld
- natürlich nur wenn die Inhalte nicht ausschließlich auf der Subdomain .wwwerreichbar sind.

Dies hat auch Vorteile für Suchmaschinen, die beim URL nur eine maximale Anzahl von Bestandteilen auswerten (Google z. B. bis zum achten Trennzeichen). Fällt www weg, wird ein Bestandteil mehr interpretiert.

Verweise auf deutschsprachige Seiten

Falls eine deutschsprachige (Start)Seite existiert, erhält sie den Vorzug gegenüber der englischsprachigen.

Links auf PDFs

Sie werden mit (PDF) direkt im Linktext eindeutig gekennzeichnet. Beispiel <a href="…">Messwerte (PDF)</a>

Listenpunkt in Navigation

Sie entsprechen der Überschrift des zugehörigen Artikels und werden allenfalls gekürzt.

<h1>title: Der Verkehr in Valencia aus der Fahrradperspektive</h1>
<!-- short_title: Verkehr in Valencia -->

Titel

<title>Säuglingstransport | Fahrradzukunft Ausgabe 8</title>

Das Was ist wichtiger als das Wo. Der Titel einer Seite erscheint als Beschriftung eines Browsertabs. Die Breite der Tabs ist begrenzt, der hintere Teil eines längeren Namens wird also nicht mehr sichtbar. Wenn der Sitename vorne im Titel steht, sieht der Nutzer, falls er mehrere Tabs der Site geöffnet hat, dasselbe. Daher steht der Seiteninhalt vorne im Titel und nicht der Sitename.

<title></title>
<h1>title: Der Verkehr in Valencia aus der Fahrradperspektive</h1>

URLs beim Druck ausgeben

Das gibt es zur Zeit mangels PHP-Skript nicht. Das Lastenheft ist jedoch fertig.

Sprungmarke für seiteninterne Links

<a href="#zum-autor">…</a>

<h4 id="zum-autor">…</h4> und nicht
<h4><a name="zum-autor">…</a></h4>

Kein Öffnen in neuem Fenster erzwingen

Kein targent="blank"

Named Entity als UTF-8

Je weniger benannte Zeichen ("named entities", z. B. &divide;) der zu editierende Quellcode enthält, desto leichter lässt er sich lektorieren.

Sie werden automatisch von einem Skript durch die entsprechenden UTF-8-Zeichen ersetzt.

Hauptbereiche

Skip-Link

<body>
<div class="skip"><a href="#content">Sprunglink zum Inhalt</a></div>

Suche

<div class="search">…</div>

Service-Navigation

<div class="service-nav">…</div>

Haupt-Navigation

Die gesamte Navigation wird per PHP automatisch erzeugt. 
Mögliche Kurztitel stehen im Artikel selbst. 
Pfade stehen in der jeweiligen Editorial-Seite:
<!-- artikel_liste: -->
<!-- artikel_liste: ledersattel-1/ -->
<!-- artikel_liste: ledersattel-2/ -->
<!-- artikel_liste: ledersattel-3/ -->
<!-- artikel_liste: kettennietendruecker/ -->
<!-- artikel_liste: tandem-starrgabel/ -->
<!-- artikel_liste: selbstbau-lastenanhaenger/ -->
<!-- artikel_liste: nabendynamo-lade-adapter/ -->
<!-- artikel_liste: vivavelo/ -->
<!-- artikel_liste: leserbriefe/ -->
<!-- artikel_liste: hohlspeiche/ -->
<body class="editorial">

<div class="nav">…</div>

Zum Verstecken von Artikeln in der Navi - falls sie erst fast fertig sind:

<!-- versteckte_artikel_liste: … -->

Aktiver Link

<li><a href="/05/">Editorial</a></li>
<li class="active"><strong>Eine deutsche "Lichtkafkaeske"</strong></li>

Nur mit dem Element strong allein, kann es Schwierigkeiten bei der Gestaltung per CSS geben. Im engen Sinne handelt es sich also bei class="active"um redundantes Markup.

Kein Deppenlink

Inhalt

<div class="content">…</div>

Artikel-Seiten

Hier geht es nicht um Service-Seiten oder um die Navigation

Untertitel und Autor

Bei Titeln: Keine Angabe in <p class="author"></p>, nur in <div class="author"></p>.

<h3 id="content">Der Verkehr in Valencia aus der Fahrradperspektive</h3>
<p class="subtitle">Reisebeobachtungen</p>
<p class="author">von Tadej Brezina</p>

<h1>title: Der Verkehr in Valencia aus der Fahrradperspektive</h1>
<!-- subtitle: Reisebeobachtungen -->
<!-- author: Tadej Brezina -->

Datentabelle

<table class="data">…</table>

Zebrastreifen

Die Lesbarkeit von Tabellenzeilen wird durch eine abwechselnde Hintergrundfarbe (per CSS) verbessert.

Studie zum Nutzen: http://alistapart.com/articles/zebrastripingmoredataforthecase

Legende

<table><caption>Tabelle 1: …</caption>…</table>

Zusätzliche Informationen werden in tfoot aufgenommen. Bevorzugt als ol.

Anmerkungszeichen: &nbsp;<span class="an">[1]</span>

Falls nur eine einzige Anmerkung vorkommt, wird das Anmerkungszeichen * eingesetzt:
&nbsp;<span class="an">*</span>

Falls in der gleichen Tabelle bereits Literaturverweise vorkommen und deshalb alphanumerische Anmerkungszeichen bereits belegt sind, werden arabische Kleinbuchstaben eingesetzt:
&nbsp;<span class="an">[a]</span>

Bezeichner für Tabellennummerierung

Jede Tabelle erhält eine Nummerierung nach dem Muster
<table><caption>Tabelle 1: …</caption>…</table>

Leere Zelle

Die ganze Gruppe der Versionen des Internet Explorers beherrscht empty-cellsnicht. Also &nbsp;für leere Zellen.

Urheberschaftsbezeichner

Wie bei Bildern.

Umfangreiche Tabelle

Bei sehr umfangreichen Tabellen kann im Class-Attribut der Wert bigangegeben werden. Das führt zu einer minimal verringerten Schriftgröße.

Keine Zebrastreifen

Wenn keine weiteren Angaben gemacht werden, wird jede Datentabelle per CSS mit Zebrastreifen ausgestattet.

Wird dies nicht gewünscht, kann dies mit der Angabe der Klasse nozebra bewirkt werden:

<table class="data nozebra">…</table>

Bild

Bild gilt hier als Oberbegriff für Foto, Grafik oder Diagramm.

Standardfälle/ typische Bildklassen:

  1. Foto
    1. Portrait
    2. Schmuckbild
    3. Reisebild
    4. …
  2. Grafik
    1. Logo
    2. Infografik
    3. …
  3. Diagramm
    1. Grafische Darstellung von Messwerten
    2. …

Bildgröße

Falls der Inhalt eines Bildes sich bei der Auflösung des eingebetteten Bildes nicht erschließt, wird ein Link zu einer großen Version angeboten. Alternativ: Das Bild wird größer eingebunden, bis hin zu einer maximalen Breite von ca. 700px.

Inhalt des Alt-Attributes

"Inhalt des Alt-Attributes" wird im Text abgekürzt als "Alt-Text". "Leerer Alt-Text" meint alt="", nicht das Weglassen des Attributes.

Die Kernfragen lauten: Wann belästigt der Alt-Text den Leser/Hörer, wann trägt er wesentlich zum Erreichen des Kommunikationszieles der Seite bei? Hat der Alt-Text einen Wert für den Leser/Hörer?

  1. Ein Text soll möglichst nicht in seiner Verständlichkeit leiden, wenn das Dokument ohne Bilder genutzt wird (Beispiel: Textbrowser oder Screenreader).
    Die Intention des W3C für den Alt-Text ist es, in ihm einen alternativen (äquivalenten) Text bereitzustellen, wenn das Bild nicht dargestellt wird.
  2. Auf fahrradzukunft.de werden Bilder als th und Legenden als td ausgezeichnet. Eine Legende ist also durch dieses Markup einem Bild klar zugeordnet.
  3. Weil Legenden als Text ausgezeichnet sind, werden sie stets auch vom Textbrowser und Screenreader ausgegeben.
  4. Nutzer eines Textbrowsers oder Screenreaders wollen ein und diesselbe Information nicht zweimal lesen/hören.
  5. Sollte es möglich sein, ein Textäquivalent für das Bild zu formulieren, welches sich eindeutig von der Bildbeschreibung unterscheidet und zusätzlich wesentlich zum Erreichen des Kommunikationszieles der Seite beiträgt, dann erhält der Alt-Text diesen Inhalt.
    Ansonsten folgt aus Punkt 4:
    bei Existenz einer Legende soll der Alt-Text leer bleiben. Denn wäre es gefüllt mit einem Inhalt, der dem Inhalt der Legende ähnlich wäre, würde der Nutzer den Inhalt zweimal lesen/hören:
    Einmal aus dem Alt-Text und einmal aus der Legende.
    Das wäre eine Belästigung.
  6. Manche Textbrowser verhalten sich in Bezug auf den Alt-Text leider fehlerhaft und geben bei alt="" den Dateinamen des Bildes aus. Nicht schön, aber viel weniger störend als das doppelte Ausgeben einer bereits existierenden Information.
    Da auf fahrradzukunft.de Bilder typischerweise einem prägnanten Namensmuster wie 05.jpg folgen, wirkt sich das fehlerhafte Verhalten des Textbrowsers kaum negativ aus.
  7. Bei Bildern, die über keine Legende verfügen und die keine reinen Schmuckbilder sind, besteht der Alt-Text aus einem Textäquivalent.
    Jedoch nur dann, wenn der Inhalt des Bildes für das Verständnis des Textes wichtig/nützlich ist.
    Siehe dazu auch:
    "When an image says more than a thousand words
    There are images with messages of their own, like photographs, paintings, and graphs, which really say more than a thousand words. For such images, the best practical approach is usually to write an alternative textual presentation of the information into a separate document, or into a separate part of a document, and link to it. You might then use the alt attribute to specify a condensed textual alternative, or just refer to the fact that separate text is available." (Korpela in http://www.cs.tut.fi/~jkorpela/html/alt.html#content)

Der blinde Usability-Experte Bernhard Stoeger (Uni Linz, Österreich) hat mir explizit bestätigt, dass meine Überlegungen zum Alt-Text zutreffend sind.

Weiterführender Text Guidelines on alt texts in img elements von Jukka Korpela mit tiefgehenden Überlegungen dazu, wie ein guter äquivalenter Text verfasst werden kann und wie er sich von einer Bildbeschreibung unterscheidet.

Ebenfalls interessant: Use of ALT texts in IMGs von Alan Flavell.

Größenangabe

Ja. Dann können Browser die Seite schneller aufbauen. Sie wird jedoch von einem Skript automatisch generiert. Daher: keine solchen Angaben im Quelltext.

Ein Bild mit Legende

Bild 3: Lorem ipsum

Zum Markup siehe auch: http://www.cs.tut.fi/~jkorpela/www/captions.html

<table class="pic">
	<tr>
		<th><img …/></th>
	</tr>
	<tr>
		<td>…</td>
	</tr>
</table>

Möglichst keine p innerhalb von td, sonst müssen extra Regeln definiert werden, damit der Abstand zwischen Bild und Bildbeschriftung klein bleibt.

Warum wird nicht die folgende Auszeichnung verwendet?
<div class="pic"><img … /><div>Lorem ipsum</div></div>

Zum einen, weil man bei dieser Auszeichnung Aufwand treiben muss, wenn man auf diese Weise auch Gruppen von Bildern mit Legende neben- oder untereinander positionieren will oder wenn eine Legende sich auf mehrere Bilder bezieht und dies auch im Markup, nicht nur in der Visualisierung, deutlich werden soll.

Zum anderen, weil eine Tabelle auf sehr einfach Weise erlaubt, dass die Legende nicht breiter wird als das Bild. Per CSS wird für alle Bildtabellen die Breite auf 1px gesetzt. Bei div müsste für jedes Bild die konkrete Breite des Bildes als Breite für das divangegeben werden.

Ein Bild mit rechts daneben stehender Legende ist nicht vorgesehen.

Bild ohne Legende - Blocklevel

<table class="pic">
	<tr>
		<th><img …/></th>
	</tr>
</table>

Als Markup genügen würde selbstverständlich <div class="pic"><img … /></div>

Durch die pauschale Auszeichnung von Bildern mit table wird es für die Autoren leichter, mal eine Legende einzufügen, bzw. sie wieder zu entfernen.

Mehrere Bilder untereinander mit je einer Legende darunter

Bild 3: Lorem ipsum
Bild 4: Dolor sed 
<table class="pic">
	<tr>
		<th><img …/></th>
		<td>…</td>
	</tr>
</table>
<table class="pic">
	<tr>
		<th><img …/></th>
		<td>…</td>
	</tr>
</table>

Mehrere zusammengehörende Bilder nebeneinander mit einer gemeinsamen Legende darunter

Bild 3+4: Lorem ipsum 
<table class="pic">
	<tr>
		<th><img …/></th>
		<th><img …/></th>
	</tr>
	<tr>
		<td colspan="2">…</td>
	</tr>
</table>

Mehrere zusammengehörende untereinanderstehende Bilder mit rechts daneben stehenden Legenden

Dies wird als Datentabelle ausgezeichnet.

Umflossenes Bild

<table class="pic fl"> für links stehende Bilder, die umflossen werden und
<table class="pic fr"> für Bilder, die rechts stehen

Einzelne Bilder, die typischerweise umflossen werden, wie das Bild des Autors könnten auch mit einem Semantik transportierenden Microformat wie class="author" versehen werden. Aber fl oder fr ist universeller einsetzbar.

Bildlink

<a class="pic"><img … /></a>

Verweise auf größere Versionen von Bildern werden automatisch per PHP erzeugt.

Sollten sich Leser beschweren, dass ihnen die Bildvergrößerung verborgen bleibt, überlegen wir neu, ob und wie man das Skript erweitern kann, z. B. durch Ausgeben eines Hinweistextes.

Bezeichner für Bildnummerierung

Muster Bild 1:

Inhalt einer Legende

Der Inhalt bezieht sich auf das Bild. Eine Teilzusammenfassung, also eine Zusammenfassung des Inhaltes eines oder mehrerer Absätze in der Nähe eines Bildes ist nicht möglich.

Bei Legenden mit mehr als einem Satz werden Satzzeichen am Ende verwendet. Besteht die Legende nur aus einem Satz, entfällt das Satzzeichen am Ende.

Grafik oder Diagramm

Alle Grafiken erhalten eine Nummerierung und eine Legende.

Foto

Der Gestalter und die Redaktion entscheidet, ob einem Foto einer der folgenden Zustände zugewiesen wird:

  1. Ohne Nummerierung und ohne Beschreibung
  2. Ohne Nummerierung und mit Beschreibung
  3. Mit Nummerierung und ohne Beschreibung
  4. Mit alles ;)

Urheberschaftsbezeichner

Bilder oder Grafiken, die nicht vom Autor stammen, werden gekennzeichnet.
Von: M. Wandinger

Der Bezeichner Von: hat zwei Vorteile:

  1. er passt für Fotos, Grafiken und Tabellen
  2. er lässt sich leicht von den Nummerierungsbezeichnern wie Bild 1: oder Tabelle 1: unterscheiden

Schmuckbild

Bilder die inhaltlich keine Bedeutung haben, sondern vielmehr nur als Schmuck dienen, erhalten keine Bildbezeichner.

Formel

Checkliste: Bild oder Text, Block oder Inline, Formelzeichen, Präfix im Dateinamen, Alt-Text, UTF8 oder Entity, …

Bild-Formel

Mathematische Formeln mit Sonderzeichen, die nicht in typischen Zeichensätzen enthalten sind oder komplexe Formeln, z. B. solche mit Brüchen lassen sich auf zwei Arten zugänglich auf einer Webseite anbieten:

  1. Eingebettet als MathML
  2. Als Bild plus LaTeX-Markup der Formel im Alt-Attribut

MathML wird leider nur von sehr wenigen Browsern unterstützt. Bei etlichen Browsern muss erst ein Plugin installiert werden, damit der eingebettete Code sichtbar wird. Variante Eins fällt also flach.

Das LaTeX-Markup einer Formel im Alt-Attribut (fett hervorgehoben) dagegen ist ohne Probleme für Blinde in ihrem Screenreader zugänglich - laut persönlicher Auskunft des blinden Usability-Experten und Mathematikers Bernhard Stoeger (Uni Linz). Auch die Wikipedia setzt diese Variante ein.

Inline:

<p>Lorem ipsum <img
class="formula"
alt="\int_0^\infty e^{-x^2}\,dx."
src="/bilder/05/lichtkafkaeske/formel-01.png"> adipisit.</p>

oder

<p>Lorem ipsum <br />
<img
class="formula"
alt="\int_0^\infty e^{-x^2}\,dx."
src="/bilder/05/lichtkafkaeske/formel-01.png"><br />
adipisit.</p>

Block:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><img 
class="formula" 
alt="\int_0^\infty e^{-x^2}\,dx."
src="/bilder/05/lichtkafkaeske/formel-01.png"/></p>
<p>Aliquam augue odio, elementum sit amet, molestie ut, rutrum pretium, odio. 
Mauris elit.</p>

Text-Formel

Mathematische Formeln, deren Zeichen in typischen Zeichensätzen vorhanden sind, werden als Text eingefügt:

Inline:

<p>Lorem ipsum <span class="formula">…</span> adipisit.</p>

oder

<p>Lorem ipsum <br />
<span class="formula">…</span><br />
adipisit.</p>

Block:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><span class="formula">…</span></p>
<p>Aliquam augue odio, elementum sit amet, molestie ut, rutrum pretium, odio. 
Mauris elit.</p>

Indizes werden mit Hilfe von sub und sup ausgezeichnet.

Zusätzliches LaTeX-Markup im Title-Attribut ist laut Bernhard Stoeger nicht nötig, ja sogar eher störender Ballast. "Einfachheit und Kürze der Darstellung geht vor stilistischer Konformität oder syntaktischer Reinheit."

Tabelle zum Testen, welche Zeichen problemlos dargestellt werden:

Direkt als UTF8 Entity Name
∙ &sdot; Multiplikationszeichen
÷ &divide; Geteiltzeichen
α &alpha; alpha klein
β &beta; beta klein
γ &gamma; gamma klein
Δ &Delta; Delta groß
≤ &le; Kleiner-Gleich
≥ &ge; Größer-Gleich
∑ &sum; Summe
∞ &infin; unendlich
≠ &ne; ungleich
≈ &asymp; beinahe gleich
√ &radic; Wurzel
μ &mu; my klein
‰ &permil; Promille
± &plusmn; Plusminus
⅓ ⅔ ⅛ ⅜ ¼ ½ ¾ ⅕… Brüche

Weitere siehe: http://de.selfhtml.org/html/referenz/zeichen.htm#benannte_griechisch

Sonderzeichen als kleine GIFs: http://www.med.wright.edu/images/symbols/index.html

Multiplikationszeichen

Wie in DIN 1338 angegeben, wird als Multiplikationszeichen der Punktoperator ∙ verwendet:
3 ∙ 4

Vor und nach dem Malzeichen steht ein Leerzeichen.

Geteiltzeichen

Als Geteiltzeichen wird ÷ verwendet: 3 ÷ 4

Es wird nicht der Doppelpunkt : verwendet, weil dieser auch als Satzzeichen vorkommen.

Vor und nach dem Geteiltzeichen steht ein Leerzeichen.

Der Vorteil der Verwendung des / gegenüber dem ÷, wäre sein Vorkommen zwischen Einheitenzeichen. Das Auge müsste also nicht zwei verschiedene Zeichen "erfassen".

Minuszeichen und unäres Minus

Als Minuszeichen bzw. als unäres Minus (der Operator zum Kennzeichnen des Negativen einer Zahl) wird der Bindestrich - verwendet:

Eigentlich gibt es ein typografisches korrektes &minus;, welches besser an Zahlen angepasst ist und etwas niedriger positioniert ist. Aber es wird noch nicht gut von Browsern unterstützt und der Aufwand des Markups wäre groß für den sehr kleinen Effekt. Gegen den Einsatz spricht auch, dass man es, wenn es nicht als Entity geschrieben ist, kaum von einem normalen Bindestrich unterscheiden kann. Das erschwert die Korrektur im HTML-Editor.

Vor und nach dem Minuszeichen steht ein Leerzeichen.

Formelzeichen, Variablen, Konstanten, Operatoren

Formelzeichen (Abkürzungen für physikalische Größen, Skalare, Vektoren, …) könnten gekennzeichnet werden, aber ich habe mich gegen diesen Aufwand entschieden.

Variablen, Konstanten und Operatoren werden ebenfalls nicht gesondert gekennzeichnet.

Formelbezeichner und Formelnummerierung

Möglichst nicht. Falls doch, muss hier noch ein Modus festgelegt werden.

LaTeX-Markup im Alt-Text

Für Blinde ist das TeX-Markup umso besser lesbar, je weniger Satz- oder Formatierungsinformationen es enthält, teilte mir Bernhard Stoeger mit. Dies sollte für das TeX-Markup im Alt-Attribut daher angestrebt werden.

Kein nummerierter Bezeichner im Alt-Text

Ein nummerierter Bezeichner (fett hervorgehoben) im Alt- bzw. im Title-Attribut - Beispiel alt="Formel 1: \int_0^\infty e^{-x^2}\,dx." -trägt laut Bernhard Stoeger nicht zu einer besseren Nutzbarkeit für blinde Nutzer bei. Zu geschwätzig.

Daher wird keiner eingesetzt.

Typografie

Hochgestellte und tiefgestellte Zeichen

sub und sup

Nicht: ² und ³.

Gedankenstrich

Halbgeviertstrich: –

Eingabeerleichterung: Drei aufeinanderfolgende Bindestriche "---" werden durch 
ein Ersetzungsskript durch den Gedankenstrich ersetzt.

Ellipse

Typografisch korrekt ist: …

Eingabeerleichterung: Drei aufeinanderfolgende Punkte "..." werden durch 
ein Ersetzungsskript durch den Gedankenstrich ersetzt.

Zollzeichen/Sekundenzeichen

Verwendet wird: ″ (U + 2033)

Eingabeerleichterung: Drei aufeinanderfolgende gerade Anführungszeichen werden durch 
ein Ersetzungsskript durch das Zollzeichen/Sekundenzeichen ersetzt.

Apostrophzeichen/Minutenzeichen

Verwendet wird: ′ (U+2032)
Das schönere und korrekte Zeichen für ein Apostroph wäre: ’ (U+2019)
Aber der Aufwand der Unterscheidung wird zur Zeit nicht betrieben. 

Eingabeerleichterung: Ein gerades Anführungszeichen wird durch 
ein Ersetzungsskript durch das U+2032 ersetzt.

Anführungszeichen

Es werden Guillemets verwendet. Beispiel: »Lorem«

Eingabeerleichterung: Doppelte gerade Anführungszeichen werden 
durch ein Ersetzungsskript durch Guillemets ersetzt.

Bis-Strich

Der Halbgeviertstrich als Bis-Strich wird bei der Notation von Intervallen wie 15–30 km verwendet. Er steht für das gesprochene Wort "bis". Als Intervallgrenzen sind nur zählbare (ordinale) Typen und Zahlen möglich.

Achtung! Der Bis-Strich wird eigentlich nicht gesetzt, wenn zu dem bis ein von gehört.
Beispiel aus Wikipedia:

Falsch: Öffnungszeiten: von Mo–Do von 10:30–22:00 Uhr
Korrekt: Öffnungszeiten: Mo–Do 10:30–22:00 Uhr
Korrekt: Öffnungszeiten: von Mo bis Do von 10:30 bis 22:00 Uhr

Aber das vergessen wir beim Lektorieren bestimmt :)

Abkürzung mit Punkt am Ende eines Satzes

Keine zwei Punkte hintereinander.

Abkürzung: geschütztes Leerzeichen

Abkürzungen im Fließtext werden vermieden. Falls sie doch verwendet werden, steht innerhalb der Abkürzung ein geschütztes Leerzeichen.
'd.&nbsp;h.'

Sie werden automatisch von einem Skript gesetzt.

Satzzeichen: geschütztes Leerzeichen

' – ' '&nbsp;– '
' –,' '&nbsp;–, '
' …' '&nbsp;…'

Sie werden automatisch von einem Skript gesetzt.

(Gemischte) Brüche

So: ¾
Nicht so: 3/4

So: 1⅝
Nicht so: 1 5/8

Brüche in tief- oder hochgestellten Zeichen

Es werden nicht die Unicodezeichen verwendet, weil sonst die Zeichen zu klein und damit schwer lesbar dargestellt werden.

So: v<sub>1/2</sub>
Nicht so: v<sub>½</sub>

Zahlenangaben für Flächenformate und räumliche Abmessungen

Satz wie in DIN 1338:2010-10, 4.2.3, Seite 9:
9 cm&nbsp;× 12 cm

Zitat aus dem Entwurf E DIN 1338:2010-10, Seite 18:

Die als produktartiger Term geschriebenen Flächen- und Raumformate sind nicht lediglich eine Aufforderung zum Ausmultiplizieren. Beispielsweise ist das Format 9 cm × 12 cm nicht gleich dem Format 8 cm × 13,5 cm, obwohl die Flächeninhalte 9 cm × 12 cm = 8 cm × 13,5 cm = 108 cm² einander gleich sind. In den Formatangaben stecken noch (ungenannt) die rechtwinkligen Koordinaten, also etwa 9 cm (in X−Richtung) × 12 cm (in Y−Richtung). Daher ist es sinnwidrig und falsch, für Formate und dergleichen an Stelle von Termen wie 9 cm × 12 cm Terme wie 9 × 12 cm² oder gar 9 × 12 cm zu verwenden. Sind die Größen in Wörtern ausgedrückt, so schreibt man die Rechenzeichen am besten ebenfalls als Wort, z. B. "Länge mal Breite".

Eingabehilfe: " xxx " wird automatisch durch " ×" ersetzt.

Maßzahl und (Hilfs)Einheit(enzeichen): geschützte Leerzeichen

Eingabeerleichterung: Zwischen Maßzahl und (Hilfs)Einheit(enzeichen) muss manuell kein 
geschütztes Leerzeichen gesetzt werden. Das erledigt ein Skript.
Liste der verwendeten (Hilfs)Einheiten(zeichen)
(Hilfs)Einheit (Hilfs)Einheitenzeichen
Ampere A
Candela cd
Coulomb C
Dollar USD | $
Euro EUR | €
Farad F
Grad siehe unten
Grad Celsius °C
Gramm g
Hertz Hz
Joule J
Kelvin K
Lumen lm
Lux lx
Meter m
Minute | Minuten min
Newton N
Ohm Ω
Pascal Pa
Pfund Sterling GBP | £
Pixel | Bildpunkt | Bildpunkte | Bildpunkten px
Promille ‰
Prozent %
Schweizer Franken CHF
Sekunde | Sekunden s
Siemens S
Stunde|Stunden h
Tesla T
Volt V
Watt W
Weber Wb
Zoll siehe unten

Achtung! Vor dem Einheitenzeichen für Grad (Winkel) und für Zoll steht kein Leerzeichen.

Zusammensetzungen

3 Milliampere oder 3 µm
3 Amperestunden oder 3 Ah
Bruch: km/h oder Kilometer/Stunde
Produkt: m2·kg·s−3·A−1 (der Multiplikationspunkt wird vorteilhaft in längeren zusammengesetzten Einheitenzeichen zur Gliederung eingesetzt)

Präfix(zeichen)

Einheitenpräfixe wie Nano, Mikro, Milli, Zenti, Dezi, Kilo, Mega, Giga bzw. ihre Entsprechungen als Einheitenpräfixzeichen wie n, µ, m, c, d, k, M, G können Einheiten voranstehen.

Exponenten

Einheitenzeichen können auch Exponenten tragen, wie m<sup>2</sup>.
Alternative Formen wie qm oder m²wurden zuvor (per Skript) ersetzt.

Zeichen vor Maßzahl

Das Sonderzeichen ~ direkt vor einer Maßzahl drückt aus, dass es sich um eine ungefähre Angabe handelt.
Vorkommen können weiterhin: - + ( [ "

Zeichen innerhalb der Maßzahl

Dezimalzahl: 3,5
Tausenderpunkt: 3.500
Gleitkommazahl: 3,2·102 oder 3,2·10-2
Maßzahlbereiche: 30–50 g (Halbgeviertstrich)

Maßzahl und (Hilfs)Einheitenzeichen: halbbreites geschütztes Leerzeichen

Zwischen Maßzahl und (Hilfs)Einheitenzeichen wird per Skript Markup ergänzt um ein
halbbreites geschütztes Leerzeichen zu verwirklichen.
<span class="nnbsp">3&nbsp;V</span>

Anmerkung ( Fußnote, Endnote)

Verweise

Verweis auf eine Anmerkung (Anmerkungszeichen)

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore&nbsp;<a id="anz1" class="anz" href="#an1">[1]</a> magna
aliquam erat volutpat.</p>

<p>Um die Eingangs gestellte Frage beantworten zu
können <fz_note>Erstes intensives Schreiben an diesem Artikel 2003, 
aufgrund diverser Umstände aber späte Veröffentlichung.</fz_note> kann
man sich zuerst mit der vorgeschriebenen Ausleuchtung des Scheinwerfers
befassen. So unsinnig die Vorschriften in manchen Punkten auch sind! Die
hier wesentlichen Punkte sind:</p>

Achtung! Der PHP-Schnipsel muss direkt hinter dem Text ohne Leerzeichen stehen.
Es wird automatisch ein geschütztes Leerzeichen eingefügt.
Mehrere Verweise auf die gleiche Anmerkung

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore&nbsp;<a id="anz1a" class="an" href="#an1">[1]</a> magna aliquam erat volutpat.</p>

<p>Mauris aliquam turpis at lectus vestibulum scelerisque&nbsp;<a id="anz1b" class="an" href="#an1">[1]</a> nunc sit amet risus.</p>

Anmerkungsverzeichnis

<div class="an">
 	<h4>Anmerkungen</h4>
	<ol>
		<li id="an1">Consectetur adipisicing elit, sed do eiusmod tempor incididunt
 		ut labore et dolore magna aliqua. <a class="cross-ref" href="#anz1">[zur Textstelle]</a></li>
 		…
	</ol> 
</div>
Erneuter Verweis auf eine bereits existierenden Anmerkung
<div class="an">
 	<h4>Anmerkungen</h4>
	<ol>
		<li id="an1">Consectetur adipisicing elit, sed do eiusmod tempor incididunt
 		ut labore et dolore magna aliqua. <a class="cross-ref" href="#anz1a">[zur 1. Textstelle]</a> <a href="#anz1b">[zur 2. Textstelle]</a></li>
 		…
	</ol> 
</div>
Freies Positionieren des Anmerkungsverzeichnisses

Normalerweise wird das Anmerkungsverzeichnis automatisch ans Ende positioniert. Falls eine spezielle Position gewünscht wird:

<fz_insert_note><h5>Anmerkungen</h5></fz_insert_note>

Literatur

Dieser Abschnitt ist noch in Bearbeitung, also unvollständig.

lvz steht für "Literaturverweiszeichen".

Verweis

Verweis auf einen Literaturbeleg

Als Verweistext wird das Autor-Jahr-System verwendet.
<p>Lorem ipsum <a class="li" id="#lvz-kettler-2008" href="#kettler-2008" title="Kettler, Dietmar: Recht für Radfahrer – Ein Rechtsberater. …">[Kettler 2008]</a> dolor adipisit.</p>

<p>Lorem ipsum <fz_literature name="Kettler 2008"><strong>Kettler</strong>, Dietmar:
<em>Recht für Radfahrer – Ein Rechtsberater.</em> …</fz_literature> dolor adipisit.</p>
Erneuter Verweis auf einen bereits existierenden Beleg
<p>Consectutur <fz_literature name="Kettler 2008" /> eiusmod tempor.</p>

Also einfach den Beleg weglassen.

Apostrophe in Verweistexten
<fz_literature name="O'Neill 2006"><strong>O'Neill</strong>, J.: …</fz_literature>

Ja, das einfache Anführungszeichen ist nicht das typografische korrekte Apostroph, sondern nur ein ähnliches, als Ersatz akzeptiertes Zeichen.

Mehrere Autoren in Verweistexten

[Kettler et al. 2008] sondern [Kettler 2008]
Der Verweis soll kurz bleiben um den Lesefluss nicht mehr als nötig aufzuhalten.

Verweistext bei mehreren Werken mit gleichem Autor aus dem gleichen Jahr

[Herry 2007a] [Herry 2007b]

Beleg

Aufbau eines Literaturbelegs

Selbstständig:

<strong>Kettler</strong>, Dietmar:
<em>Recht für Radfahrer – Ein Rechtsberater.</em>
2. überarbeitete und aktualisierte Auflage.
Berlin: Rhombos-Verlag, 2008. 
240 Seiten.
25,00 €.
ISBN 978-3-938807-99-6

Unselbstständig:

<strong>Leser</strong>, H.; <strong>Icke</strong>, S.:
<em>Rechts abbiegende Lkw und Radfahrer. 
Feldversuche zum Blickverhalten von Lkw-Fahrern.</em>
VDI-Berichte Nr. 1986, 2007.
S. 3–17.
98,00 €.
ISBN 978-3-18-091986-7

Mehr zur Auszeichnung und Gestaltung, inklusive Beispielseite, siehe: http://borumat.de/html/literaturverzeichnis-nach-din-1505-mit-dl-plus-autor-jahr

Einzelner Literaturbeleg mitten im Fließtext - ohne Verweis
<div class="li"><p><strong>Kettler</strong>, Dietmar:
<em>Recht für Radfahrer – Ein Rechtsberater.</em>…</p></div>
Mehrere Literaturbelege
<div class="li">
	<h4>Literatur</h4>
	<dl>
		<dt id="kettler-2008">Kettler 2008</dt>
		<dd><strong>Kettler</strong>, Dietmar:
		<em>Recht für Radfahrer – Ein Rechtsberater.</em>
		…
		<a class="cross-ref" href="#lvz-kettler-2008">[zur Textstelle]</a></dd>
	</dl>
</div>
Standardposition des Literaturverzeichnisses

Hinter der Rubrik "Zum Autor".

Belege ohne Verweise

Mehrere Literaturbelege - wenn gar keine Verweise existieren

Noch nicht ausgereift: [Ohne Textstelle]ist in diesem Fall redundant.

<div class="li">
	<h4>Literatur</h4>
	<dl>
		<dt id="kettler-2008">Kettler 2008</dt>
		<dd><strong>Kettler</strong>, Dietmar:
		<em>Recht für Radfahrer – Ein Rechtsberater.</em>
		…
		<span class="noref">[Ohne Textstelle]</span></dd>
	</dl>
</div>
Mehrere Literaturbelege - Gemisch aus Belegen mit Verweis und ohne Verweis
<p>Lorem ipsum <fz_literature name="Kettler 2008"><strong>Kettler</strong>, Dietmar:
<em>Recht für Radfahrer – Ein Rechtsberater.</em> …</fz_literature> doloret.</p>

<fz_literature insert="false" name="Leser 2007"><strong>Leser</strong>, H.; 
<strong>Icke</strong>, S.: <em>Rechts abbiegende Lkw und Radfahrer. 
Feldversuche zum Blickverhalten von Lkw-Fahrern.</em> …</fz_literature>

<div class="li">
	<h4>Literatur</h4>
	<dl>
		<dt id="kettler-2008">Kettler 2008</dt>
		<dd><strong>Kettler</strong>, Dietmar:
		<em>Recht für Radfahrer – Ein Rechtsberater.</em>
		…<a class="cross-ref" href="#lvz-kettler-2008">[zur Textstelle]</a></dd>
		<dt id="leser-et-al-2007">Leser 2007</dt>
		<strong>Leser</strong>, H.; <strong>Icke</strong>, S.:
		<em>Rechts abbiegende Lkw und Radfahrer. 
		Feldversuche zum Blickverhalten von Lkw-Fahrern.</em>
		…
		<span class="noref">[Ohne Textstelle]</span></dd>
	</dl>
</div>

Position des Literaturverzeichnisses manuell bestimmen

<h4>Quellen</h4>
<fz_literature_listing><h5>Literatur</h5></fz_literature_listing>
<h5>Weitere verwendete wissenschaftliche Literatur</h5>

Durchkoppelung

Beispiele: Input-Output-Funktion, Vincent-van-Gogh-Straße, 12-Volt-Ausführung, Ultimate-5-Halterung ("Ultimate 5" ist eine Modellbezeichnung des Herstellers Ortlieb), 400-Euro-Job, Conditio-sine-qua-non-Formel, Peer-to-Peer-Client, das Zu-spät-Kommen, das In-Kraft-Treten

Bei Anführungszeichen:

Richtig: "Auferstanden-aus-Ruinen"-Hymne, "Harry-Potter"-Roman

Falsch: "Auferstanden aus Ruinen"-Hymne, "Harry Potter"-Roman

Achtung! Innerhalb von Anführungszeichen, wenn danach kein angekoppelter Bestandteil folgt, muss nicht durchgekoppelt werden: "Ultimate 5"

Ausnahmen bei der Pflicht zur Durchkoppelung: Eigennamen

Beides ist erlaubt: Robert Bosch Stiftung, Robert-Bosch-Stiftung

Maßzahl: Ziffern/Zahlwort

Für eine Richtlinien zu Thema "Wann Ziffern, wann Zahlwörter" gab es keine Einigung innerhalb der Redaktion.

Einheit: ausgeschrieben/abgekürzt

Für eine Richtlinien zu Thema "Wann Einheitenzeichen, wann ausgeschriebenes Wort für Einheit" gab es keine Einigung innerhalb der Redaktion.

Betontes und stark Betontes

Entweder strong oder em, nicht jedoch beides zugleich.

Keine Verwendung von Großbuchstaben zur Betonung (ausser der Autor besteht auf diese hässliche Form ;)

E-Mail-Adressen

Sie werden "verschleiert" damit es die "Harvester" der Spammer etwas schwerer haben, sie zu ernten.

<fz_email>info@arndt-last.de</fz_email>

Ausgegeben wird als Quelltext bei aktiviertem Javascript:

<span class="unobscured"><a href="mailto:redaktion@fahrradzukunft.de">redaktion@fahrradzukunft.de</a></span>

Bei deaktiviertem Javascript:

<span class="obscured">mail<span class="crap">|Spamschutz: Text zwischen senkrechten Balken entfernen|</span>@fahrradzukunft.de</span>

Der Nutzer am Display, mit aktiviertem CSS, bekommt den Inhalt des span.crap nicht zu sehen.

Abkürzung von Namen

Wenn ein Name, z. B. eines Herstellers, oft in einem Artikel genannt wird, kann die Verwendung einer Abkürzung nützlich sein. Die Abkürzung wird beim ersten Auftreten des ausgeschriebenen Namens eingeführt. Es werden keine Abkürzungen verwendet, die sich Marketingleute ausgedacht haben, wie z. B. "r-m" für "Riese und Müller", sondern schlichte Abkürzungen aus Großbuchstaben. Das stört die Lesegewohnheiten (Großschreibung von Substantiven), die Erkennung von Wortarten nicht.

Beispiel:
Marketingmäßig zumindest scheint Riese und Müller (im Folgenden RM) mit dem Birdy auch im Reisesegment mitfischen zu wollen.

Interview

Folge aus Frage und Antwort:

<div class="interview">
	<h4>Interview mit Professor …</h4>
	<p>Einleitende Worte …</p>
	<div class="q-and-a">
		<p class="question">…</p>
		<div class="answer"><p>…</p></div>
	</div>
	<div class="q-and-a">
		<p class="question">…</p>
		<div class="answer"><p>…</p><p>…</p></div>
	</div>
	…
</div>

Es ist unwahrscheinlich, dass Fragen aus mehr als einem Absatz bestehen. Daher wird P dafür verwendet. DIV soll bevorzugt ausschließlich zum Gruppieren verwendet werden.

Schwerpunktthema

Das Schwerpunktthema wird auf der Editorialseite eingetragen:
<!-- thema: Ledersattel -->
<body class="editorial">

Das Schwerpunktthema steht in der jeweiligen Überschrift auf der Archivseite:

<th>Ausgabe 11: <span class="main-topic">Ledersattel</span></th>

Erscheinungsdatum

Das Erscheinungsdatum wird auf der Editorialseite eingetragen:
<!-- erscheinungs_datum: 2010-4-24 -->
<body class="editorial">

<p class="publication-date">Erschienen im April 2010</p>

Verweis auf PDF-Version

Der Verweis wird automatisch per PHP erzeugt.

<p class="pdf-version"><a href="/pdf/fz-ausgabe-11.pdf">Diese Ausgabe als PDF</a></p>

Seiteninternes Inhaltsverzeichnis

Das Verzeichnis wird automatisch per PHP erzeugt.
<div class="toc">…</div>

Der Verweis auf den Bereich "Rechtliche Hinweise" wird per CSS ausgeblendet.

Zum Autor

Bei mehr als einem Autor: "Zu den Autoren"
Bei einer Autorin: "Zur Autorin"

<div class="about">
	<h4>Zum Autor</h4>
	<p><img … />
	Michael Wandinger ist seit 20 Jahren in der Informatik tätig, …</p>
</div>

Rechtliche Hinweise

Der Abschnitt wird automatisch per PHP erzeugt.

Direkt hinter dem Bereich "Zum Autor".

<div class="about">
	<h4>Zum Autor</h4>
	…
</div
<div class="manifestations">
	<h4 id="manifestations">Rechtliche Hinweise</h4>
	<p>Alle auf dieser Seite gemachten Angaben erfolgen 
	nach bestem Wissen, aber ohne jegliche Gewährleistung. 
	Die Autoren und der Verein "Fahrradzukunft" lehnen jegliche Haftung 
	für unmittelbare und mittelbare Schäden durch Befolgung oder Nichtbefolgung 
	von auf dieser Seite gegebenen Ratschlägen ab.</p>
	<p>Alle Fotos, Grafiken oder Tabellen stammen von den jeweiligen Autoren. 
	Ausnahmen sind gekennzeichnet.</p>
</div>

Fazit/ Abstract/ Anmerkung der Redaktion/ Zusammenfassung/ Betontes Blocklevel Element

<div class="emphasized">…</div>

Ankündigung

Erscheint jeweils auf der Startseite und dem Editorial der aktuellen Ausgabe.

<div class="announcement">…</div>

Blockzitat

<blockquote>
	<p>Computers rarely improve the efficiency of the information work
	they are designed for because they are too hard to use and
	do too little that is sufficiently useful. Their many features,
	designed to make them more marketable, merely increase cost and complexity.
	(Landauer, Thomas K.: <em>The Trouble with Computers.</em> The
	MIT Press, 1996.)</p>
	<p>Modularized software and networked computing will require a re-engineering
	of the entire economy and of a substantial part of our culture.
	(<a href="http://www3.sympatico.ca/cypher/computers.htm">William
	Sheridan</a>)</p>
</blockquote>

Keine Anführungszeichen um das Blockzitat!

Seiten mit mehr als einem Artikel

Zum Beispiel in der Rubrik "Gelesen".

Zwei Fälle werden unterschieden:

  1. Alle Artikel stammen von einem einzigen Autor
  2. Es gibt mindestens zwei verschiedene Autoren

Alle Artikel stammen von einem einzigen Autor

<h3 id="content">Gelesen</h3>
<p class="author"><span>gelesen von </span>Volker Briese</p>
<div class="toc">…</div>

<h4 id="ding-der-nation">Ding der Nation?</h4>
<div class="li">…</div>
…
<div class="author"><h5 id="zum-autor">Zum Autor</h5>…</div>

<h4 id="lorem-ipsum">Lorem Ipsum</h4>
<div class="li">…</div>
…
<div class="about"><h5 id="zum-autor-2>Zum Autor</h5>…</div>
<!-- author: Volker Briese --> 
<h4 id="ding-der-nation">Ding der Nation?</h4>
<div class="li">…</div>
…
<div class="about"><h5 id="author">Zum Autor</h5>…</div>

<h4>Lorem Ipsum</h4>
<div class="li">…</div>
…
<div class="about"><h5>Zum Autor</h5>…</div>

Es gibt mindestens zwei verschiedene Autoren

<h3 id="content">Gelesen</h3>
<div class="toc">…</div>
<h4 id="ding-der-nation">Ding der Nation?</h4>
<p class="author"><span>gelesen von </span>Volker Briese</p>
<div class="li">…</div>
…
<div class="author"><h5 id="author">Zur Autorin</h5>…</div>

<h4 id="welche-bedingungen-machen-unfaelle-schwerer">Welche Bedingungen machen 
Unfälle schwerer?</h4>
<p class="author"><span>gelesen von </span>Carmen Hagemeister</p>
<div class="li">…</div>
…
<div class="author"><h5>Zur Autorin</h5>…</div>
<!-- class: mixed -->
<!-- author: Volker Briese --> 
<!-- author: Volker Briese --> 
<h4>Ding der Nation?</h4>
<p class="author"><span>gelesen von </span>Volker Briese</p>
<div class="li">…</div>
…
<div class="about"><h5 id="author">Zum Autor</h5>…</div>

<h4>Welche Bedingungen machen Unfälle schwerer?</h4>
<p class="author"><span>gelesen von </span>Carmen Hagemeister</p>
<div class="li">…</div>
…
<div class="author"><h5>Zur Autorin</h5>…</div>

Anmerkung:
Die Überschrift <h1>title: Gelesen</h1> wird automatisch erzeugt.
Die Überschrift für "Zum Autor" etc. ist h5 und nicht wie sonst h4.

Rechtliche Hinweise

Wenn mehrere Artikel auf einer stehen, erscheint der Hinweis nur einmal am Ende der Seite und nicht am Ende jedes Artikels.

Spezielle Seiten

Editorial

Titelbild

Der Code wird automatisch per PHP erzeugt.

Es wird ein Bildlink zu einer großen Version des Titelbildes (1000px Höhe) angeboten.

<h3 id="content">Editorial</h3>
<table class="pic fr">
	<tr>
		<th><a class="pic" href="/bilder/12/titelbild-gross.jpg"><img 
		src="/bilder/12/titelbild.jpg" alt="" height="283" width="200"></a></th> 
	</tr>
</table>

Rubrik-Seite: Hohlspeiche

Merkmale eines Beitrags:

Textbeitrag

<div class="hohlspeiche">
 <div class="text">
	 <p>Übrigens ist die Sorge um den hohen Verschleiß der Spike-Spitzen …</p>
 </div>
 <div class="reference">
	 <p>Gefunden: Pippi Langstrumpf</p>
	 <p>Aus: Bike 2/09</p>
 </div>
	<p>Lorem ipsum …</p>
</div>

Bildbeitrag

<div class="hohlspeiche">
 <table class="pic">
	 <tr>
	 	<th><img src="…" /></th>
	 </tr>
 <tr>
	 <td>Gefunden: Pippi Langstrumpf</td>
 <td>Aus: <a href="…">http://example.tld</a></td>
 </tr>
 </table>
 <p>Lorem ipsum …</p>
</div>

Rubrik-Seite: Gelesen

Die Rubrik kann eine oder mehrere Rezensionen enthalten.

Wenn mehrere Rezensionen enthalten sind, können diese von einem oder mehreren Rezensenten stammen.

Beispiel: eine Rezension

<h3 id="content">Gelesen: Ding der Nation?</h3>
<p class="author"><span>gelesen von </span>Volker Briese</p>
<div class="toc">…</div>
<div class="li">…</div>
…
<div class="author">…</div>
<h1>title: Gelesen: Ding der Nation? </h1>
<!-- author: Volker Briese --> 
<!-- short_title: Gelesen -->
<div class="li">…</div>
…
<div class="author">…</div>

Achtung! short_title ist nötig, weil sonst der Eintrag in der Hauptnavi zu lang wird.

Überschrift

Die Überschrift sollte möglichst den Titel und den Autor des Buches nicht enthalten, da der Literaturbeleg direkt hinter der Überschrift folgt.

Nur Literaturbeleg ohne Cover

<div class="li">
</p>…</p>
</div

Details zu Literaturbelegen: siehe

Literaturbeleg und Cover

Ein Cover sollte, wenn möglich für jede Besprechung bereitgestellt werden.

<div class="li">
<p><img … /></p>
</div>

Rubrik-Seite: Leserbriefe

Reihenfolge:

  1. Briefe zum Titelthema der letzten Ausgabe
  2. Briefe zu anderen Beiträgen und Leserbriefen der letzten Ausgabe
  3. Briefe zu älteren FZ-Beiträgen/ Leserbriefen
  4. alle anderen (ohne Bezug zu konkreten FZ-Artikeln-oder-Leserbriefen).
<div class="l-and-r">
	<h4>Steil auf Kurz</h4>
	<p class="reference">Zu: <a href="/04/lastenanhaenger/">Lastenanhänger</a> (Ausgabe 4)</p>
	<div class="letter">
		<p>…</p>
		<p>…</p>
		<p class="author">Ulrich Gehrmann, Wunstorf</p>
	</div>
	<div class="reply">
		<p>…</p>
		<p>…</p>
		<p class="author">Andreas Oehler, Autor des Artikels, Redaktionsmitglied</p>
	</div>
</div>
<div class="l-and-r">
	<h4>Steil auf Kurz</h4>
	<fz_ref>/4/lastenanhaenger/</fz_ref>
	<div class="letter">

Als Linktext in referencewird bewußt nur der eigentliche Titel verwendet. So ist das Wesentliche leichter für den Leser erfassbar.

Leserbriefe erhalten jeweils einen Teaser als Überschrift

Grußformel, falls

  1. ein Redakteur der Antwortende ist: Andreas Oehler, Autor des Artikels, Redaktionsmitglied
  2. kein Einzelner der Redaktion als Antwortender auftritt, sondern die Redaktion als Gesamtheit: Die Redaktion
  3. ein Gastautor der Antwortende ist: Michael Wilch, Autor des Artikels

Service-Seiten

Startseite

Beide Stränge sind verfügbar: HTML-Versionen, PDF-Versionen.

Archiv

Die gesamte Seite wird per PHP automatisch erzeugt.

Wichtige Änderung gegenüber dem alten Archiv: der Nutzer kann auf der Archivseite alle PDF-Links sehen, wenn er einen wählt, erscheint sein Login und er landet dann direkt auf dem ausgewählten PDF, muss also nicht mehr wie bisher erneut auswählen.

Eine andere Änderung: Auf der Archivseite stehen jetzt auch die PDFs einzelner Artikel bereit.

Das Editorial ist bei der Onlineversion die Entsprechung der Gesamtausgabe im PDF.

Mit dem Markup sind sämtliche Bestandteile separat per Nachfahren-Selektor im Stylesheet gestaltbar.

<table class="archive">
	<tbody>
		<tr class="issue">
			<th>Ausgabe 5</th>
			<td class="pdf"><a href="…">PDF</a></td>
			<td class="online"><a href="…">Online</a></td>
		</tr>
		<tr>
			<th>Eine deutsche "Lichtkafkaeske"</th>
			<td class="pdf"><a href="…">PDF</a></td>
			<td class="online"><a href="…">Online</a></td>
		</tr>
		<tr>
			<th>Überholverhalten von Kraftfahrzeugen</th>
			<td class="pdf"><a href="…">PDF</a></td>
			<td class="online"><a href="…">Online</a></td>
		</tr>
		<tr>
			<th>…</th>
			<td class="pdf"><a href="…">PDF</a></td>
			<td class="online"><a href="…">Online</a></td>
		</tr>
	</tbody>
	<tbody>
		<tr class="issue">
			<th>Ausgabe 4</th>
			<td class="pdf"><a href="…">PDF</a></td>
			<td class="online"><a href="…">Online</a></td>
		</tr>
		<tr>
			<th>Lowrider = Lowquality?</th>
			<td class="pdf"><a href="…">PDF</a></td>
			<td class="online"><a href="…">Online</a></td>
		</tr>
		<tr>
			<th>Warum brechen Gepäckträger?</th>
			<td class="pdf"><a href="…">PDF</a></td>
			<td class="online"><a href="…">Online</a></td>
		</tr>
		<tr>
			<th>…</th>
			<td class="pdf"><a href="…">PDF</a></td>
			<td class="online"><a href="…">Online</a></td>
		</tr>
	</tbody>
</table>

FAQ

<dl><dt>Frage</dt><dd>Antwort</dd></dl>

Registrierung

div um label und input-Paare (also Layout-Markup), damit sie ohne Autorenstylesheet gut nutzbar bleiben

<form id="registration" …>
	<fieldset>
 		<legend>…</legend>
 		<div><label for="Vorname">Vorname</label><input id="Vorname" name="Vorname" … /></div>
 		…
 	</fieldset>
 	<fieldset>
 		<legend>…</legend>
 		<div><label for="Beruf">Beruf/ Spezialgebiet<br />
		<span>z. B. Lehrer/&nbsp;Mathe-Physik,<br />
		E-Technik-Ing/&nbsp;Mobilfunk,<br />
		Polizist/&nbsp;Diebstahlprävention,&nbsp;…</span></label>
		<input id="Beruf" name="Beruf" size="40" type="text" />
		</div>
	</fieldset>
 	<input id="submit" … />
 </form>

Nebeninformation im Label werden durch das span von der Hauptinformation abgegrenzt.
Im Stylesheet erhält label ein hinreichend große Breite, damit nicht zu viele Umbrüche die Lesbarkeit beeinträchtigen.

Fehlerdokument

Die jeweiligen Fehlerdokumente sind freundlich zum Leser und verwendet keine für ihn fremden Begriffe wie "404". Es enthält die das Suchfeld, die Service-Navigation und eine Mailadresse zum Webmaster. So kann der Leser sich entweder leicht selber helfen oder den Webmaster informieren.

Gestaltung

Hier werden nur Merkmale aufgeführt, die sich direkt auf die Gebrauchstauglichkeit auswirken

Druckstylesheet

Ja.

Abbildungsbeschreibungen nicht breiter als Bild

Siehe: http://borumat.de/html-und-css-tipps#bilduntertitel-maximale-so-breit-wie-bild

Hinreichender Kontrast

zwischen Vorder- und Hintergrund

Besuchte Links

werden farblich hervorgehoben

Schriftgröße 0.87em

Nur der Nutzer kennt die beste Schriftgröße für seine Sehkraft, nicht der Autor. Daher wäre es eigentlich geboten, wesentliche Teile wie Fließtext und Navigation als 1em ausgeliefert. Jedoch beträgt die Schriftgröße bei typischen Browsern im frisch installierten Zustand 16px. Leider wissen bisher nur wenige Nutzer davon, dass man diesen Standard dauerhaft anpassen kann. Bei Verdana ist 16px sehr groß. Daher wird hier der "reinen Lehre" nicht gefolgt und bodydie Größe 0.875emzugewiesen.

Inhalte, wie z. B. eine Legend, werden auf 0.85em ihres Elternelementes verkleinert.

Maximale Zeichenzahl pro Zeile

Zu lange Zeilen lassen sich schlecht lesen. Besonders auffällig ist dies bei sehr breiten Displays. Daher wird eine maximale Zeichenzahl pro Zeile im Bereich Fließtext angegeben.

Internet Explorer 6 unterstützt die Eigenschaft max-width nicht. Damit auch in diesem weit verbreiteten Browser die nützliche Eigenschaft umgesetzt wird, ist ein spezielles Skript per Browserweiche eingebunden.

<!–[if lte IE 6]>
<script type="text/javascript" src="/css/minmax.js"></script>
<![endif]–>

Kein Umbruch in Kontonummer

.account { white-space: nowrap }