Richtlinien für fahrradzukunft.de

Die Richtlinien wurden ab Ausgabe 4 entwickelt.

Änderungen seitdem bis heute.

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/tobis-fahrradgeschichten/ tobis-fahrradgeschichten
/5/hohlspeiche/ hohlspeiche
/5/impressum/ impressum
Service-Seiten /archiv/ archive
/ueber-uns/ ueber-uns
/ueber-uns/satzung.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 oder für Backups 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.
Immer als PNG.
Eigene Zählung. Sie sollen die Zählung der normalen Bilder nicht beeinflussen.
/bilder/05/lichtkafkaeske/schmuck-01.jpg Schmuckbild.
Als JPG oder PNG.
Eigene Zählung.
Sie sollen die Zählung der normalen Bilder nicht beeinflussen.
/bilder/05/lichtkafkaeske/01.png Infografik. Zum Beispiel Diagramme.
Immer als PNG, nicht als GIF oder JPG.
/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.png

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.

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

Autor

Ein einziger Autor

<!-- author: Tadej Brezina -->

<p class="author">von Tadej Brezina</p>

Mehrere Autoren für den ganzen Artikel

<!-- author: Ulrike Brocza -->
<!-- author: Tadej Brezina -->

<p class="author">von Ulrike Brocza und Tadej Brezina</p>

Je ein Autor für einen Teil des Artikels

<!-- class: mixed -->  
<h1>title: Fahrradzukunft selbstgebastelt</h1>  
<!-- author: Andreas Borutta -->  
<!-- author: Rainer Mai -->

<h4>schnipp loch knot</h4>
<p class="author">von Andreas Borutta</p>


<h4>Quick &amp; Lazy</h4>
<p class="author">von Rainer Mai</p>

Interview

siehe

Untertitel

<!-- subtitle: Reisebeobachtungen -->

<p class="subtitle">Reisebeobachtungen</p>

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: ●<span class="an">[1]</span>

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

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

Bezeichner für Tabellennummerierung

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

Urheberschaftsbezeichner

Wie bei Bildern.

Umfangreiche Tabelle

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

Zebrastreifen

Wenn in Datentabellen die geraden Zeilen mit einer Hintergrundfarbe versehen werden sollen:

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

Bild

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

Beispiele:

  1. Foto
    1. Portrait
    2. Schmuckbild
    3. Reisebild
  2. Grafik
    1. Logo
    2. Infografik
    3. Grafische Darstellung von Messwerten
    4. Schmuckgrafik
    5. Formel

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. Und optional auch als zusätzliches Angebot an die Leser, die gerne eine hochaufgelöstes Bild betrachten möchten.

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.

Bildnummerierung

Typischerweise erhalten alle Bilder eine Nummerierung.
Ausnahmen:

  1. Artikel mit nur einem einzigen Bild
  2. Portraitbilder in der Rubrik "Autor"
  3. Schmuckbilder
  4. Bilder in Leserbriefen
  5. Bilder in der Hohlspeiche
  6. Bilder in der Rubrik Gelesen
  7. Bilder in Ankündigungen auf der Startseite

Muster für Bildnummerierungen:
Bild 1: Lorem
Bild 2+3: Ipsum
Bild 7-9: Doloret
Bild 6. Von: Erika Mustermann
Damit keine zweite Zeile verbraucht wird, wenn keine Legende existiert.

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.

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.

Grafik mit im Bild vorhandenen Rahmen

Besser ist es, den Rahmen per Bildbearbeitung zu entfernen. Nur falls das nicht geht, muss verhindert werden, dass einer per CSS erzeugt wird.
<img class="no-border"

Freigestellte Fotos

RGB-Bilder (24 bit), die vor einem einfarbigem Hintergrund freigestellt wurden, erhalten ein Class-Attribut, damit sie, genau wie PNGs per CSS eine Haarlinie als Rahmen bekommen könnne.

<img class="isolated"

Formel

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

Nummerierung

Falls erforderlich/erwünscht wird eine Nummerierung gesetzt.

…&nbsp;(1)

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.

Wichtig: Die Formelbilder müssen einen transparenten Hintergrund haben.

Inline:

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

oder

<p>Lorem ipsum <br />
<img
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 
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 class="formula">…</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
ω &omega; omega klein
π &pi; pi klein
&permil; Promille
± &plusmn; Plusminus

Weitere siehe:
http://de.selfhtml.org/html/referenz/zeichen.htm#benannte_griechisch
http://www.med.wright.edu/images/symbols/index.html

Brüche

Zwar gibt es einige Brüche als Unicodezeichen ( ⅓ ⅔ ⅛ ⅜ ¼ ½ ¾ …), aber naturgemäß nicht alle. Zum Einen ist die Größe der Zahlen sehr gering und verschieden, vor allem aber sähe es uneinheitlich aus, wenn ein Bruch-Unicodezeichen neben einem ausgeschriebenen Bruch wie 5/8 stünde. Daher werden Brüche (und gemischte Brüche wie 1 5/8) konsequent ausgeschrieben und die Unicodezeichen kommen nicht zum Einsatz.

Bei gemischten Brüchen, wird ein geschütztes Leerzeichen gesetzt: 1●5/8

Multiplikationszeichen

Wie in DIN 1338 angegeben, wird als Multiplikationszeichen der Punktoperator (Dot Operator U+22C5) verwendet:
3 ∙ 4

Vor und nach dem Malzeichen steht ein Leerzeichen.

Eingabeerleichterung: Drei aufeinanderfolgende "µ" werden durch 
ein Ersetzungsskript durch  ersetzt.

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

Korrekt ist eigentlich das &minus; U+2212, welches genau auf der Höhe des horizontalen Strichs des Plus-Zeichens ausgerichtet ist und ebenso lang ist wie dieser Strich. Aber der Aufwand ist uns zu groß für den sehr kleinen Effekt. Wir verwenden als Minuszeichen bzw. als unäres Minus (der Operator zum Kennzeichnen des Negativen einer Zahl) den Halbgeviertstrich: Er ist minimal länger als das echte Minuszeichen und minimal niedriger positioniert. Auf jeden Fall viel schöner als das gewöhnliche Bindestrich-Minus.

Gegen den Einsatz des U+2212 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. Und jedes Entity im Quellcode erschwert das Lektorat, weil das Auge daran "kleben" bleibt.

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 (typischerweise mit kursivem Satz), aber ich habe mich gegen diesen Aufwand entschieden (da ich das Markup alleine erledige). Ausnahme: "g" für Erdbeschleunigung (<em>g</em>), um das Zeichen von "g" für Gramm abzugrenzen.

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 zwischen Apostroph- und Minutenzeichen wird zur Zeit nicht betrieben.

Eingabeerleichterung: Ein gerades einfaches 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.

Einfache Guillemets ›Lorem‹ müssen händisch gesetzt werden.

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 :)

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

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.●h.'

Satzzeichen: geschütztes Leerzeichen

' – ' '●– '

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●× 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".

Eingabeerleichterung: Drei aufeinanderfolgende "x" werden durch 
ein Ersetzungsskript durch × ersetzt.

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

Es geht um Eingabeerleichterung.

Zwischen Maßzahl und (Hilfs)Einheit muss manuell kein 
geschütztes Leerzeichen gesetzt werden. Das erledigt ein Skript.

3●Volt

Zwischen Maßzahl und (Hilfs)Einheitzeichen muss manuell kein halbbreites geschütztes Leerzeichen 
gesetzt werden. Auch das erledigt ein Skript.
Zur Zeit wird es mit Hilfe von Markup und CSS improvisiert. Sobald sichergestellt werden kann, dass ein
direkter Einsatz von "U+202F", "&#x202F;" oder "&#8239;" keine Nachteile hat, werden die Skripte umgestellt. https://de.wikipedia.org/wiki/Schmales_Leerzeichen

<span class="nnbsp">3●V</span>

Liste der verwendeten (Hilfs)Einheiten(zeichen)
(Hilfs)Einheit (Hilfs)Einheitenzeichen
Ampere A
bar
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.

Präfix(zeichen)
Prafix Nano Mikro Milli Zenti Dezi Kilo Mega Giga
Präfixzeichen n µ m c d k M G
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)

Exponenten

Einheitenzeichen können auch Exponenten tragen, wie m<sup>2</sup>.
Alternative Formen wie qm oder 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)

Aufzählungen: Keine Interpunktion zwischen Listenpunkten

Zwischen den Listenpunkten wird keine Interpunktion verwendet außer ein Punkt besteht aus mehr als eine Satz.

Grund: mit den Aufzählungszeichen und dem Zeilenumbruch existiert bereits eine starke Trennung.

Den Segen der Duden-Sprachberatung dafür gibt es sogar:
"Grundsätzlich gibt es bei Aufzählungen, die aus untereinander angeordneten frei stehenden Zeilen bestehen, die Möglichkeit, mit oder ohne Interpunktion am Zeilenende zu schreiben."

Kaufmännisches Und (&)

Fichtel&amp;Sachs
Busch&amp;Müller

Anmerkung (Fußnote, Endnote)

Verweis (Zitierung)

Position
  1. Bezug Begriff: direkt mit geschütztem Leerzeichen hinter dem Begriff
  2. Bezug ganzer Satz: direkt mit geschütztem Leerzeichen hinter dem Punkt (oder einem anderen schließenden Satzzeichen)
  3. Bezug Satzteil: direkt mit geschütztem Leerzeichen hinter Satzzeichen des Satzteils, z.B. hinter einem Komma
  4. Bezug mehrere Sätze: wie 2
Markup

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore<a class="an" href="#an1" title="Erstes intensives Schreiben an diesem Artikel 2003, aufgrund diverser Umstände aber späte Veröffentlichung.">[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>

Anmerkungsverzeichnis

Standardposition

Vor der Rubrik "Zum Autor". Bis zur Ausgabe 20 war die Standardposition hinter dieser Rubrik.

Freies Positionieren

Falls eine andere Position als die Standardposition nach den Autoreninfos oder falls eine andere Überschrift als die Standardüberschrift "Anmerkungen" gewünscht ist:

<fz_note_listing><h4>Quellen</h4></fz_note_listing>
Markup
<div class="an">
 	<h4>Anmerkungen</h4>
	<ol>
		<li id="an1">Consectetur adipisicing elit, sed do eiusmod tempor incididunt
 		ut labore et dolore magna aliqua.</li>
 		…
	</ol> 
</div>

Literatur

Verweis (Zitierung/Quellenangabe)

Wir lehnen uns an das Autor-Jahr-System an.

Markup

<p>Lorem ipsum <a class="li" id="#kettler-2008" href="#kettler-2008" title="Dietmar Kettler: Recht für Radfahrer – Ein Rechtsberater. …">[Kettler 2008]</a> dolor adipisit.</p>

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

Also einfach ein leeres Element mit dem gleich Wert im Name-Attribut.

Apostrophe
<fz_literature name="O'Neill 2006">…</fz_literature>

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

Mehrere Autoren

[Kettler et al. 2008]

Mehrere Werke mit gleichem Autor aus dem gleichen Jahr

[Herry 2007a] [Herry 2007b]

Verweis auf ein bereits aufgeführtes Buch - auf eine andere Seite

[Herry 2007a] [Herry 2007b]

Die zweite Stelle erscheint dann im Verzeichnis als z.B. ebd. S. 33

Nachnamen

Keine Schreibung in Großbuchstaben.

Beleg (Titelangabe)

Selbstständig

Dietmar Kettler: Recht für Radfahrer – Ein Rechtsberater. 2. überarbeitete und aktualisierte Auflage. Berlin: Rhombos-Verlag, 2008. S. 3–17. ISBN 978-3-938807-99-6

Unselbstständig

H. Leser, S. Icke: Rechts abbiegende Lkw und Radfahrer. In: <a href="http://vdi.com/berichte/186/">VDI-Berichte, Bd. 186</a>, 2007. S. 3–17. ISSN 1234-5672

Sekundärliteratur

Wird - im Ausnahmefall - ein Beleg (wörtliche Originalquelle/Zahlenmaterial) benutzt, der nicht aus dem zitierten Werk selbst stammt, wenn also aus einer Sekundärquelle zitiert werden muss, so werden beide Belege aufgeführt.

H. Arndt: Die Konzentration der westdeutschen Wirtschaft. Pfullingen 1966. S. 3. Zitiert nach: W. Abelshauser: Wirtschaftsgeschichte der Bundesrepublik Deutschland 1945 - 1980. Frankfurt am Main 1992. S. 72

Literaturverzeichnis

Hier werden Belege aufgelistet.

Standardposition des Literaturverzeichnisses

Hinter der Rubrik "Zum Autor". Bis Ausgabe 20 war es dahinter.

Freies Positionieren des Literaturverzeichnisses
<h4>Quellen</h4>
<fz_literature_listing><h5>Literatur</h5></fz_literature_listing>
<h5>Weitere verwendete wissenschaftliche Literatur</h5>
Mehrere Belege
<p>Lorem ipsum <fz_literature name="Kettler 2008">Dietmar Kettler: Recht für Radfahrer – Ein Rechtsberater. …</fz_literature> doloret.</p>
<div class="li">
	<h4>Literatur</h4>
	<dl>
		<dt id="kettler-2008">Kettler 2008</dt>
		<dd>Dietmar Kettler: Recht für Radfahrer – Ein Rechtsberater. …</dd></dd>
	</dl>
</div>
Mehrere Belege - wenn gar keine Verweise existieren
<div class="li">
	<h4>Literatur</h4>
	<ul>
		<li>Dietmar Kettler: Recht für Radfahrer – Ein Rechtsberater. …</li>
	</ul>
</div>
Mehrere Belege - Wenn sowohl welch mit als auch welche ohne Verweis existieren
<p>Lorem ipsum <fz_literature name="Kettler 2008">Dietmar Kettler:
Recht für Radfahrer – Ein Rechtsberater. …</fz_literature> doloret.</p>
<div class="li">
	<h4>Literatur</h4>
	<dl>
		<dt id="kettler-2008">Kettler 2008</dt>
		<dd>Dietmar Kettler: Recht für Radfahrer – Ein Rechtsberater. …</dd>
</dl> <p>Weitere Literatur ohne Verweise im Text:</p> <ul> <li>H. Leser, S. Icke: Rechts abbiegende Lkw und Radfahrer. …</li> </ul> </div>
Einzelner Beleg mitten im Fließtext - ohne Verweis - ohne Literaturverzeichnis

Zum Beispiel in der Rubrik "Gelesen".

<div class="li">
<p>Dietmar Kettler: Recht für Radfahrer – Ein Rechtsberater. …</p>
</div>

Durchkoppelung

http://de.wikipedia.org/wiki/Durchkopplung

Input-Output-Funktion, Vincent-van-Gogh-Straße, 12-Volt-Ausführung, 12-V-Ausführung (Duden§44), 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, Fichtel-&-Sachs-Ritzel, 8-jährig, 8-mal, 8-prozentig, 100stel-Sekunde

Achtung! 100fach, 80er Jahre, 80er-Jahre

25- bis 30-Jährige (denn beim Ersetzen des "bis" durch einen Bis-Strich, sähen die beiden direkt aufeinander folgenden Striche wie ein einziger sehr langer aus: 25-–30-Jährige

Eigennamen sind von der Pflicht zur Durchkoppelung ausgenommen
Beides ist erlaubt: Robert Bosch Stiftung, Robert-Bosch-Stiftung, Robert Bosch-Stiftung
Zitat Wikipedia: "Dennoch wird von manchen auch die Durchkopplung solcher Eigennamen gefordert. Viele Redaktionsstandards verlangen, dass auch Eigennamen entsprechend den Rechtschreibregeln geschrieben werden, sodass in Zeitungen und Zeitschriften häufig die durchgekoppelte Variante zu lesen ist, also Einstein-Forum usw."

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"

Etablierte Komposita
Viele ursprünglich im Wege der Durchkopplung gebildete Komposita sind inzwischen so etabliert, dass sie zusammengeschrieben werden und die durchgekoppelte Form befremdlich wirkt.
Beispiele: Zuspätkommen statt Zu-spät-Kommen, Inkrafttreten statt In-Kraft-Treten.

Rein fremdsprachliche Aneinandereihungen
Richtig: TopTrail Interconnected Suspension Bicycle Project
Falsch: TopTrail-Interconnected Suspension-Bicycle-Project
Ausnahme! Wenn ein fremdsprachlicher Teil im Deutschen häufig verwendet wird, wie z.B. "Band", dann wird die Ananderreihung wie eine gemischtsprachliche behandelt, also durchgekoppelt: Heavymetal-Band

Gemischtsprachliche Aneinandereihungen
werden durchgekoppelt: Open-Source-Enzyklopädie

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

<body class="interview">
<!-- author: Andreas Oehler -->
Hier wird der Interviewer genannt. Nicht der Interviewte.
<p class="author">Die Fragen stellte Andreas Oehler.</p>
… <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 eingesetzt werden.

<div class="about">
<h4>Zur Person</h4>

Statt "Zum Autor" heißt die Rubrik "Zur Person" und enthält Informationen zum Interviewten.

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, sobald mindestens 3 Überschriften existieren. Dabei bleibt "Rechtliche Hinweise" außen vor.
<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 … alt="Portrait der Autorin/des Autors" />
	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 Rezensenten

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

<h4>Ding der Nation?</h4>
…
<h4>Lorem Ipsum</h4>
… <div class="about"><h4>Zum Rezensenten</h4>…</div>

Es gibt mindestens zwei verschiedene Autoren

<h3 id="content">Gelesen</h3>
<div class="toc">…</div>

<h4>Ding der Nation?</h4>
<p class="author">gelesen von Volker Briese</p>
…
<div class="author"><h5 id="author">Zum Rezensenten</h5>…</div>

<h4>Welche Bedingungen machen Unfälle schwerer?</h4>
<p class="author">gelesen von Carmen Hagemeister</p> … <div class="author"><h5>Zur Rezensentin</h5>…</div>
<!-- class: mixed -->
<!-- author: Volker Briese --> 
<!-- author: Carmen Hagemeister --> 

Anmerkung:
Die Überschrift <h1>title: Gelesen</h1> wird automatisch erzeugt.
Die Überschrift für "Zum Rezensenten" 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>Fundort: Bike 2/09</p> <p>Finder: Pippi Langstrumpf</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">gelesen von Volker Briese</p>
<div class="toc">…</div>

…
<div class="author"><h4>Zum Rezensenten</h4>…</div>
<h1>title: Gelesen: Ding der Nation? </h1>
<!-- author: Volker Briese --> 
<!-- short_title: Gelesen -->

…
<div class="author"><h4>Zum Rezensenten</h4>…</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/●Mathe-Physik,<br />
		E-Technik-Ing/●Mobilfunk,<br />
		Polizist/●Diebstahlprävention,●…</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 body die Größe 0.875em zugewiesen.

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]–>

Telefonnummern

<a href="tel:+497071538325" title="Mit geeigneter Software kann die Telefonnummer direkt zum Wählen übergeben werden.">+49 7071 53 83 25</a>

Der Umbruch wird via CSS verhindert.

Unerwünschte automatische Verlinkung von Nummern verhindern

Browsern von Mobilgeräten werden Nummern automatisch in einen Link umgewandelt um sie als klickbare Telefonnummern verwenden zu können. Es werden jedoch auch Nummern getroffen, die gar keine Telefonnumern sind, wie z.B. die achtstellige ISSN. Über den Eintrag <meta name="format-detection" content="telephone=no" /> im Kopf der Seite wird dieser Automatismus deaktiviert.

Kein Umbruch in Kontonummer

.account { white-space: nowrap }

Code-Formatierung/Normalisierung

Konsistente Muster in Bezug auf Einrückungen, Leerzeichen und Umbrüche erleichtern die Fehlersuche im Code.
Das Folgende ist noch in Arbeit und daher Unvollständig.

bl steht für Blocklevelelement, il Inlinelevelelement. _ Leerzeichen, Zeilenumbruch, sed beliebiger Text, ^ Zeilenanfang, $ Zeilenende, Tabulator

Not pretty Pretty
Mehrfache Leerzeichen auf eines normalisieren __ _
●_
_●
●●
Umbrüche normalisieren ¶¶
_
¶_ _
●¶
¶●
Überflüssige Leerzeichen in BL-Elementen <bl>_ <bl>
_</bl> </bl>
<bl>● <bl>
●</bl> </bl>
Position von Leerzeichen bei IL-Elementen verschieben sed<il>_ sed_<il>
</il>_sed _</il>sed
sed<il>● sed●<il>
</il>●sed ●</il>sed
</il-1><il-2>_ _</il-1><il-2>
</il-1>_<il-2> _</il-1><il-2>
</il-1><il-2>● ●</il-1><il-2>
</il-1>●<il-2> ●</il-1><il-2>
Direkte Folge von End- und Starttag des gleichen IL-Elementes </il><il>
</il>●<il>
</il>_<il> _
Normalisierung von BR-Elementen <br /><br /> <br />
<bl><br /> <bl>
<br /></bl> </bl>
Zeilenumbruch vor BL-Starttag und nach BL-Endtags
Zeilenumbrüche und Einrückungen in Tabellenelementen
Zeilenumbrüche und Einrückungen in Listen
Keine Zeilenumbrüche innerhalb eines BL, außer vor oder nach einem Kind-BL
Leere Elemente. Ausnahmen: Tabellen-Elemente <il></il>
<bl></bl>
<il>_</il>
<bl>_</bl>
<il>●</il>
<bl>●</bl>