Andreas Borutta

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 Skript automatisch generiert. Hinweise speziell dazu stehen in grau hinterlegten Kästen.

Ü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.

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
Service-Seiten /anmelden anmelden
/registrierenregistrieren
/konto-loeschenkonto-loeschen
/konto-einstellungenkonto-einstellungen
/passwort-vergessen passwort-vergessen
/archiv archiv
/ueber-uns ueber-uns
/ueber-uns/satzung.pdf
/faq faq
/datenschutzdatenschutz
/in-zukunftin-zukunft
Artikel einer Ausgabe /5 editorial Editorial
/5/lichtkafkaeske
/5/interview-uebernachtungsnetzwerke interview Interview
/5/gelesen read Rubriken
/5/leserbriefe letter-to-editor
/5/tobis-fahrradgeschichten tobis-fahrradgeschichten
/5/hohlspeiche hohlspeiche
/5/impressum imprint
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/gelesen/cover-01.png Buchcover. Bevorzugt als PNG, alternativ als JPG.
Wenn das Cover von einem grauen Rahmen profitiert kann bei einem JPG einer über die Klasse "isolated" gesetzt werden. Bei PNG erscheint er automatisch.
/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/tab-01.jpg Tabelle als Bild. Falls es es auch HTML-Tabellen gibt, entspricht die Nummerierung des Tabellenbildes der Nummerierung in der Tabellenunterschrift. Anders: es kann also Lücken in der Nummerierung der Tabellenbilddateien geben.
/bilder/05/titelbild.jpg Titelbild
/bilder/05/lichtkafkaeske/01.gross.jpg
/bilder/05/lichtkafkaeske/michael-wandinger.gross.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

 Beispiel für per CSS eingefügte Bilder.
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.

HTML-Version: HTML5

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">

Passagen mit englischsprachigem Inhalt erhalten: lang="en"

Normalisierung von zurückgegebenen Links

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

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.

Benennung

Klassenname

Nur Klassennamen, die Struktur transportieren. Also zum Beispiel emphasized und nicht grey-box.

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.tld statt http://www.example.tld, www.example.tld oder http://example.tld
- natürlich nur wenn die Inhalte nicht ausschließlich auf der Subdomain .www erreichbar 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 per Default der Überschrift des zugehörigen Artikels. Eine kurze Form ist möglich und wird so angegeben:

<h1>Der Verkehr in Valencia aus der Fahrradperspektive</h1>
<fz_title>Verkehr in Valenciay</fz_title>
Titel

Der Inhalt des Elements title wird automatisch vom Skript erzeugt:

<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>Säuglingstransport</h1>

URLs beim Druck ausgeben

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

Sprungmarke für seiteninterne Links

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

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

Kein Öffnen in neuem Fenster erzwingen

Kein target="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.
Vielen benannte Zeichen werden vom HTML-Editor automatisch in die UTF-8 umgewandelt.

Hauptbereiche

Skip-Link

Wird automatisch per Skript erzeugt:

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

Suche

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

Service-Navigation

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

Haupt-Navigation

Die gesamte Navigation wird per Skript automatisch erzeugt. Mögliche Kurztitel stehen im Artikel selbst. Pfade stehen in der jeweiligen Editorial-Seite:

<fz_article>ledersattel-1</fz_article>
<fz_article>ledersattel-2</fz_article>
<fz_article>ledersattel-3</fz_article>
<fz_article>kettennietendruecker</fz_article>
<fz_article>tandem-starrgabel</fz_article>
<fz_article>selbstbau-lastenanhaenger</fz_article>
<fz_article>nabendynamo-lade-adapter</fz_article>
<fz_article>vivavelo</fz_article>
<fz_article>leserbriefe</fz_article>
<fz_article>hohlspeiche</fz_article>
<body class="editorial">

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

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

<main>…</main>

Artikel-Seiten

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

Autor

Ein einziger Autor

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

Mehrere Autoren für den ganzen Artikel

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

Je ein Autor für einen Teil des Artikels

<h2>schnipp loch knot</h2>
<p class="author">von Andreas Borutta</p>
…
<h2>Quick &amp; Lazy</h2>
<p class="author">von Rainer Mai</p>

Interview

siehe

Untertitel

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

Datentabelle

<table>…</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

Wenn in sehr umfangreichen Tabellen die Schriftgröße minimal verringert werden soll:

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

Zebrastreifen

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

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

Bild

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

Beispiele:

  1. Foto
    1. Portrait
    2. Schmuckbild
    3. Reisebild
    4. …
  2. Grafik
    1. Logo
    2. Infografik
    3. Grafische Darstellung von Messwerten
    4. Buchcover
    5. Schmuckgrafik
    6. Formel
    7. …
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

Wir haben - leider - nicht genug Ressourcen um beschreibende Texte für Bilder als Alt-Text zu verfassen.

Bewußt wird der Inhalt aus figcaption nicht (automatisch) in das Alt-Attribut eingetragen. Der Leser würde dann die Information zweimal erhalten. Der blinde Usability-Experte Bernhard Stoeger (Uni Linz, Österreich) hat mir explizit bestätigt, dass dies störend wäre.

WAI empfiehlt ebenfalls im Beispiel 3, wenn ein Text zum Bild im Markup vorhanden ist, alt="" zu verwenden.

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.

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.

1 Einzelnes Bild mit Legende
<figure>
	<img …/>
	<figcaption>…</figcaption>
</figure>

Keine p innerhalb von figcaption, sonst müssen extra Regeln definiert werden, damit der Abstand zwischen Bild und Bildbeschriftung klein bleibt.

Ein einzelnes Bild mit rechts daneben stehender Legende ist nicht vorgesehen.

2 Bild ohne Legende

Kommt außer als Schmuckbild, Formel oder Buchcover nicht vor.

3 Mehrere Bilder untereinander mit je einer Legende darunter
<figure>
	<img …/>
	<figcaption>…</figcaption>
</figure>
</figure>
	<img …/>
	<figcaption>…</figcaption>
</figure>
4 Mehrere zusammengehörende Bilder untereinander mit einer gemeinsamen Legende

Die Bilder müssen diesselbe Breite haben.
Die Legende darf Attribute wie "(oben)" oder "(unten)" enthalten, wenn nötig 

<figure>
	<img …/>
	<img …/>
	<figcaption>…</figcaption>
</figure>
5 Mehrere zusammengehörende Bilder die auf breiten Displays nebeneinander und auf schmalen Displays untereinander stehen – mit einer gemeinsamen Legende

Die Höhen und die Breiten der Bilder müssen identisch sein.
Attribute wie "(oben)","(unten)", "(rechts)" oder "(links)" dürfen nicht vorkommen, weil nicht vorherbestimmbar ist, ob die Darstellung neben- oder untereinander sein wird.

<figure class="img-nebeinander-wenn-platz-ist">
	<img …/>
	<img …/>
	<figcaption>…</figcaption>
</figure>
6 Mehrere zusammengehörende Bilder die auf breiten Displays nebeneinander und auf schmalen Displays untereinander stehen – mit jeweils eigener Legende

Die Höhen und die Breiten der Bilder müssen identisch sein.

<div class="figure-group">
<figure>
	<img …/>
	<figcaption>…</figcaption>
</figure>
</figure>
	<img …/>
	<figcaption>…</figcaption>
</figure>
</div>
7 Mehrere zusammengehörende untereinander stehende Bilder mit jeweils rechts daneben stehenden Legenden

Möglichst vermeiden.

Bild 3: Lorem ipsum
Bild 4: Dolor sed

Wenn es nötig ist, wird es Datentabelle ausgezeichnet.

Umflossenes Bild

<img class="flr"> für rechts stehende Bilder, die umflossen werden.

Bildlink

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

Verweise auf größere Versionen von Bildern werden automatisch per Skript 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. Buchcover in der Rubrik Gelesen
  4. Schmuckbilder
  5. Bilder in Leserbriefen
  6. Bilder in der Hohlspeiche
  7. Bilder in Ankündigungen auf der Startseite

Muster für Bildnummerierungen:
Bild 1: Lorem
Bild 2–3: Ipsum Nicht: Bild 2+3: Ipsum
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, Quelle, Lizenz

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

Wenn es zusätzlich zum Urheber eine Quelle und eine Lizenzangabe gibt, werden diese ebenfalls angegeben. Beispiel:
Von: Richard Masoner (Quelle), Lizenz: CC BY-SA 2.0

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

Nicht komplexe Formeln

Mathematische Formeln, deren Zeichen in typischen Zeichensätzen vorhanden sind und die nicht komplex sind, werden als HTML eingefügt:

<p>Lorem ipsum <fz-formel>a + b = c</fz-formel> adipisit.</p>

oder

<p>Lorem ipsum <br />
<fz-formel>a + b = c</fz-formel><br />
adipisit.</p>

oder

<p><fz-formel>a + b = c</fz-formel></p>

Indizes werden mit Hilfe von sub und sup ausgezeichnet.

Direkt als UTF8 Entity Name
∙ &sdot; Multiplikationszeichen
α &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:
a ∙ b

Vor und nach dem Malzeichen steht ein Leerzeichen.

Geteiltzeichen

Als Geteiltzeichen wird der Schrägstrich / verwendet: a / b

Es wird nicht der Strichdoppelpunkt ÷ verwendet, weil dieser bei Sehschwäche leicht mit dem Pluszeichen verwechselt werden kann.

Vor und nach dem Geteiltzeichen steht ein Leerzeichen.

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, 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).

Variablen und Operatoren werden ebenfalls nicht gesondert gekennzeichnet.

Konstanten

Konstanten werden kursiv gesetzt.

Beispiel: Die Konstante für die Erdbeschleunigung: <em>g</em>.

Nummerierung

Falls erforderlich/erwünscht wird eine Nummerierung gesetzt.

Komplexe Formel

Ein Test am 26.4.23 zeigte, dass MathML noch nicht zuverlässig funktioniert und/oder zu einer unschönen Darstellung führt. Wir verwenden daher ab
Ausgabe 36 MathJax und LaTeX für komplexe Formeln.

<fz-latex>\[ X_i = 2 \pi f L_i = 2 \pi f n p L_i \]</fz-latex>

Typografie

Hochgestellte und tiefgestellte Zeichen

sub und sup

Nicht: ² und ³.

Gedankenstrich

Halbgeviertstrich: –

Ellipse

Typografisch korrekt ist: …

Zollzeichen/Sekundenzeichen

Verwendet wird: ″ (U + 2033)

Minutenzeichen

Verwendet wird: ′ (U+2032)

Apostrophzeichen

Verwendet wird: ’ (U+2019)

Anführungszeichen

Es werden Guillemets verwendet. Beispiel: »Lorem«

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

Geschützter Bindestrich

&#8209;

Beispiel: Im Titel eines Artikels soll der Umbruch in einem wesentlichen Wort verhindert werden.

Grundlagen der Fahrrad&#8209;Ergonomie –●Teil●1
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".

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
<fz-nbsp>3●Volt</fz-nbsp> 

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

<fz-nnbsp>3●V</fz-nnbsp>

Liste der verwendeten (Hilfs)Einheiten(zeichen)
(Hilfs)Einheit (Hilfs)Einheitenzeichen
Amperestunde | Amperestunden Ah
Ampere A
bar
Candela cd
Coulomb C
Dollar $
US-Dollar USD
Euro €
Farad F
Grad siehe unten
Grad Celsius °C
Gramm g
Höhenmeter  
Hertz Hz
Jahr | Jahre | Jahren a
Joule J
Kelvin K
Liter l
Lumen lm
Lux lx
Meter m
Monat | Monate  
Minute | Minuten min
Newton N
Newtonmeter Nm
Ohm Ω
Pascal Pa
Pfund Sterling £
Pixel | Bildpunkt | Bildpunkte | Bildpunkten px
Promille ‰
Prozent %
Quadratmillimeter  
Quadratmeter  
Quadratzentimeter  
Schweizer Franken CHF
Sekunde | Sekunden s
Siemens S
Stunde | Stunden h
Tesla T
Umdrehung | Umdrehungen U
Volt V
Voltampere VA
Watt W
Wattstunde | Wattstunden Wh
Woche | Wochen  
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 Tera
Präfixzeichen n µ m c d k M G T
Zusammensetzungen

3 Milliampere oder 3 µm
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 m² (die "²" ist hier ein eigenes UTF-8-Zeichen) werden in Fahrradzukunft nicht verwendet.

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·10<sup>2</sup>oder 3,2·10<sup>-2</sup>
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><h2>Quellen</h2></fz_note_listing>
Markup
<div class="an">
 	<h2>Anmerkungen</h2>
	<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

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

Freies Positionieren des Literaturverzeichnisses
<h2>Quellen</h2>
<fz_literature_listing><h3>Literatur</h3></fz_literature_listing>
<h3>Weitere verwendete wissenschaftliche Literatur</h3>
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">
	<h2>Literatur</h2>
	<dl>
		<dt id="kettler-2008">Kettler 2008</dt>
		<dd>Dietmar Kettler: Recht für Radfahrer – Ein Rechtsberater. …</dd>
	</dl>
</div>
Mehrere Belege - wenn gar keine Verweise existieren
<div class="li">
	<h2>Literatur</h2>
	<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">
	<h2>Literatur</h2>
	<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">
<h2 class="interviewee">Interview mit Jason Kind</h2>

<p>Einleitende Worte und Infos zum Interviewten</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>

<p class="interviewer">Das Interview führte Andreas Oehler.</p>
	…

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.

Nur ausnahmsweise werden die Infos zur Person des Interviewten unter dem Interview platziert: nur wenn ein Portraitfoto wichtig ist.
Idealerweise wird stattdessen ein Foto mit dem Interviewten, welches ihn in einem Kontext des Interviewthemas zeigt, direkt innerhalb des Interviews platziert. 

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

Schwerpunktthema

Das Schwerpunktthema wird auf der Editorialseite eingetragen:
<fz_topic>Ledersattel</fz_topic>
<body class="editorial">

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

<li><a href="/11">Ausgabe 11: Ledersattel</a>

Erscheinungsdatum

Das Erscheinungsdatum wird auf der Editorialseite eingetragen:

<fz_meta issue="34" date="2022-05-10" />

Daraus erzeugt das Skript:

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

Verweis auf PDF-Version

Der Verweis wird automatisch per Skript 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 Skriptipt erzeugt, sobald mindestens 3 Überschriften existieren:
<div class="toc">…</div>

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

Das Inhaltsverzeichnis kann über

<fz_toc />

frei platziert werden.

Als Standard stehen Verweise auf alle Überschriften der Ebene 2 drin.

<fz_toc level ="2" />

bewirkt, dass es zwei Ebenen im Inhaltsverzeichnis gibt. Also auch Verweise auf Überschriften der Ebene 3.

Als Standard wird das Inhaltsverzeichnis erst erzeugt, wenn mehr als 2 Überschriften der Ebene 2 existieren. Wenn das Inhaltsverzeichnis auch erscheinen soll, wenn es 2 oder weniger H2 gibt:

<fz_toc always="true" />

Zum Autor

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

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

Rechtliche Hinweise

Der Abschnitt wird automatisch per Skript erzeugt.

Direkt hinter dem Bereich "Zum Autor".

<div class="about">
	<h2>Zum Autor</h2>
	…
</div
<div class="manifestations">
	<h4 id="manifestations">Rechtliche Hinweise</h2>
	<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

Siehe Rubrik "Gelesen".

Rechtliche Hinweise

Wenn mehrere Artikel auf einer Seite 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 Skript erzeugt.

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

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">
 <figure>   <img ... />
  <figcaption>Finder: Pippi Langstrumpf<br> 
   Fundort: Bike 2/09</figcaption> 
</figure>	 
 <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.

Der Haupttitel "Gelesen" wird vom Skript erzeugt.

Beispiel: eine Rezension
<h2>Ding der Nation?</h2>
<p class="author">Rezensent: Volker Briese</p>
<fz_toc />

...
<div class="about"><h3>Zum Rezensenten</h3>...</div>
Beispiel: zwei Rezensionen, ein Rezensent

<p class="author">Rezensentin: Carmen Hagemeister</p> 

<fz_toc />

<h2>"Bicycle helmet legislation: Can we reach a consensus?"</h2>
...
<div class="about"><h3>Zum Rezensenten</h3>...</div>
<h2>"Bicyclist injury severities in bicycle-motor vehicle accidents."</h2>
...
<div class="about"><h3>Zum Rezensenten</h3>...</div>

Beispiel: zwei Rezensionen von 2 verschiedenen Rezensenten
<fz_toc />

<h2>"Bicycling Science" von David Gordon Wilson</h2>
<p class="author">Rezensent: Reiner Dölger</p>
...
<div class="about"><h3>Zum Rezensenten</h3>...</div>
<h2>"Recht für Radfahrer – Ein Rechtsberater" von Dietmar Kettler</h2>
<p class="author">Rezensent: Peter de Leuw</p>
...
<div class="about"><h3>Zum Rezensenten</h3>...</div>

Ü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 src="cover-01.png" … /></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">
	<h2>Steil auf Kurz</h2>
	<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">
	<h2>Steil auf Kurz</h2>
	<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

  1. wenn ein Redakteur der Antwortende ist: Andreas Oehler, Autor des Artikels, Redaktionsmitglied
  2. wenn kein Einzelner der Redaktion als Antwortender auftritt, sondern die Redaktion als Gesamtheit: Die Redaktion
  3. wenn 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 Skript 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.

<nav aria-label="Navigation im gesamten Archiv" class="archive">
<ol>
  <li><a href="/34">Ausgabe 34</a>
    <ol>
      <li><a href="/34/leserbriefe">Leserbriefe</a></li>
      <li><a href="/34/fahrradergonomie-1">Grundlagen der Fahrradergonomie&nbsp;–&nbsp;Teil&nbsp;1</a></li>
      <li><a href="/34/standard-rad-als-handgepaeck-im-zug">Ab in den Sack,  rein in den Zug&nbsp;– so wird das Rad zum Handgepäck</a></li>
      <li><a href="/34/bauanleitung-lastenrad">Bauanleitung für ein Lastenrad</a></li>
      <li><a href="/34/per-lastenrad-von-weimar-nach-athen">Per Lastenrad von Weimar nach Athen</a></li>
      <li><a href="/34/steckdose-unterwegs-9">Steckdose unterwegs&nbsp;– Teil&nbsp;9</a></li>
      <li><a href="/34/interview-uebernachtungsnetzwerke">Übernachten auf Gegenseitigkeit</a></li>
      <li><a href="/34/gelesen">Gelesen</a></li>
      <li><a href="/34/hohlspeiche">Hohlspeiche</a></li>
      <li><a href="/34/impressum">Impressum</a></li>
    </ol>
  </li>
...
</nav>

FAQ

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

In Zukunft?

Diese Seite haben wir in Ausgabe 36 eingeführt.

Wir sammeln dort Themen, zu denen wir gerne einen Artikel in der Fahrradzukunft veröffentlichen würden und noch AutorInnen suchen.

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

Abbildungsbeschreibungen nicht breiter als Bild

Ja.

Hinreichender Kontrast

zwischen Vorder- und Hintergrund

Besuchte Links

werden farblich hervorgehoben

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.

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>