Richtlinien für fahrradzukunft.de

Die Richtlinien wurden ab Ausgabe 4 entwickelt.

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

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

Inhalt:

Übergeordnete Ziele

URL-Struktur/ Dateinamen

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

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

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

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

Diverse

Standardauszeichnungen werden nicht erwähnt, nur Besonderheiten.

Trennung von Struktur und Gestalt

Ja.

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

HTML-Version: XHTML strict

Ja

Zeichenkodierung: UTF-8

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

Kein Byte Order Mark (BOM).

Validität

Ja

Sprachangabe

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

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

Normalisierung von zurückgegebenen Links

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

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

Weiterleitung

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

Vier TDs für das Spaltenlayout

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

Benennung

Klassenname

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

www. in URLs und 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 http://example.tld statt http://www.example.tld oder www.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.

Links auf PDFs

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

Listenpunkt in Navigation

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

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

Titel

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

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

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

URLs beim Druck ausgeben

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

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>

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>

Zu Artikeln

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

Untertitel und Autor

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

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

Datentabelle

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

Legende

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

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

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

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

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

Bezeichner für Tabellennummerierung

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

Leere Zelle

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

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.

Keine Zebrastreifen

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

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

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

Bild

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

Standardfälle/ typische Bildklassen:

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

Bildgröße

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

Inhalt des Alt-Attributes

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

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

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

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

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

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

Größenangabe

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

Bild plus Legende

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 div angegeben werden.

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 jeweils einer Bildbeschriftung

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

Mehrere Bilder nebeneinander mit einer gemeinsamen Bildbeschriftung

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

Umflossenes Bild

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

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

Bildlink

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

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

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

Bezeichner für Bildnummerierung

Muster Bild 1:

Inhalt einer Legende

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

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

Grafik oder Diagramm

Alle Grafiken erhalten eine Nummerierung und eine Legende.

Foto

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

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

Urheberschaftsbezeichner

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

Der Bezeichner Von: hat zwei Vorteile:

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

Schmuckbild

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

E-Mail-Adressen

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

<?php echo email("mail@fahrradzukunft.de") ?>

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

Bei Lesern, die Javascript aktiviert haben,
<span class="crap">|Spamschutz: Text zwischen senkrechten Balken entfernen|</span>
wird der Text via CSS ausgeblendet.

Formel

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

Bild-Formel

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

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

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

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

Inline:

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

oder

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

Block:

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

Text-Formel

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

Inline:

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

oder

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

Block:

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

Indizes werden mit Hilfe von sub und sup ausgezeichnet.

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

Tabelle zum Testen, welche Zeichen problemlos dargestellt werden:

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

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

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

Multiplikationszeichen

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

Vor und nach dem Malzeichen steht ein Leerzeichen.

Geteiltzeichen

Als Geteiltzeichen wird ÷ verwendet: 3 ÷ 4

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

Vor und nach dem Geteiltzeichen steht ein Leerzeichen.

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

Minuszeichen und unäres Minus

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

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

Vor und nach dem Minuszeichen steht ein Leerzeichen.

Brüche in tief- oder hochgestellten Bereichen

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

Also v<sub>1/2</sub> und nicht v<sub>½</sub>

Zollzeichen

Typografisch korrekt ist ″&Prime; und nicht das hier verwendeten gerade Anführungszeichen ". Ich möchte den Zusatzaufwand für diesen minimalen Unterschied nicht betreiben.

Flächen- oder Raumformate als als produktartiger Term

3 cm × 4 cm

Zitat aus dem Entwurf E DIN 1338:2010-03, S. 21:

"[...] 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“"

Formelzeichen, Variablen, Konstanten, Operatoren

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

Variablen, Konstanten und Operatoren werden ebenfalls nicht gesondert gekennzeichnet.

Formelbezeichner und Formelnummerierung

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

LaTeX-Markup im Alt-Text

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

Kein nummerierter Bezeichner im Alt-Text

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

Daher wird keiner eingesetzt.

Abkürzungen 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.

Automatische Rechtschreibkorrektur

Nur eindeutig als falsche Zeichenfolge erkennbare und eindeutig in eine richtige Zeichenfolge Transformierbares wird mit Hilfe eines statischen Skriptes automatisch korrigiert.

Liste folgt.

Mikro-/Orthotypografie

Einige Aufgaben sollen mit Hilfe von Skripten erleichtert werden.

Achtung! Die Reihenfolge der Skripte ist wichtig.

Die Listen werden bewußt in dieser ausführlichen Form gepflegt, statt alle Kombinationen in einem einzigen regulären Ausdruck zu "verstecken". Die redundante Form lässt sich besser auf einen Blick übersehen.

Die Zeichenfolgen zwischen den Hochkommata. Das Leerzeichen statt des zutreffenden regulären Ausdrucks steht dort, damit die jeweiligen Listen hier in den Richtlinien leichter gelesen werden können. Im entsprechenden Skript stehen die vollständigen regulären Ausdrücke.

Maßzahlen und Einheiten

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

Statische Skripte

Diese Skripte werden lokal ausgeführt. Im Gegensatz dazu stehen dynamische Skripte, die auf dem Server ausgeführt werden.

Abkürzungen: Leerzeichen

Das Setzen von Leerzeichen zwischen Bestandteilen von Abkürzungen kann leicht vergessen werden.

Zwischen den Bestandteilen folgender Abkürzungen wird per Skript automatisch ein Leerzeichen gesetzt:
'z.B.'
'd.h.'
'o.ä.'
'u.U.'
'Z.B.'
'D.h.'
'O.ä.'
'U.U.'

Auf dem Server werden die normalen Leerzeichen später per dynamischem Skript durch ein geschütztes Leerzeichen ersetzt.

Satzzeichen: Eingabeerleichterung

Das Eingeben einiger Satzzeichen wie Gedankenstrich oder Ellipse ist mühsam. Autoren können Kürzel verwenden, die dann mit einem statischen Skript automatisch ersetzt werden:

'–' '–'
'…' '…'

Satzzeichen: falsch gesetzte Leerzeichen entfernen

Versehentlich wird in der Nachbarschaft einiger Satzzeichen leicht ein Leerzeichen zuviel gesetzt.

In folgenden Zeichenfolgen werden die Leerzeichen getilgt:
'– ,' '–,'

Später (sowieso) dynamisch gesetzte geschützte Leerzeichen entfernen

Dies erleichtert das Lektorat. Siehe Motiv für dynamische Skripte.

Dynamische Skripte

Motiv:
Je weniger benannte Zeichen ("named entities", z.B. &nbsp;) der Quellcode enthält, desto besser bleibt er für Menschen lesbar. So fällt das Lektorat leichter. Nun könnte man (manuell oder per statischem Skript) statt des benannten Zeichens &nbsp; direkt das Unicodezeichen U+00A0 für ein geschütztes Leerzeichen im HTML-Editor eingeben. Das scheidet jedoch aus, weil leider viele HTML-Editoren (anders als z.B. Textverarbeitungen) das Unicodezeichen U+00A0 für ein geschütztes Leerzeichen nicht so darstellen, dass man es von einem normalen Leerzeichen unterscheiden kann und dennoch der Lesefluss nicht getrübt wird..

Man kann dem begegnen, indem die benannten Zeichen erst auf dem Server hinzugefügt werden, dynamisch also, per PHP-Skript. Ein wichtiger, positiver Nebeneffekt einer solchen Automatisierung:
das Setzen der Artikel wird deutlich erleichtert, weil weniger (und besonders fehlerträchtige) Arbeit manuell erledigt werden muss.

Maßzahlen und Einheiten: geschützte Leerzeichen

Testcase ungeparst als Quelltext und geparst und gerendert

Zu den Anforderungen an den regulären Ausdruck:

  1. Ziffern
    Bei der Maßzahl geht es nicht um Zahlwörter (Numerale) wie z.B. drei, sondern allein um solche in Form von Ziffern.
  2. Zeichen innerhalb der Maßzahl
    Zwischen den Ziffern kann ein Komma stehen (Dezimalzahl): 3,5
    Zwischen den Ziffern kann ein Tausenderpunkt vorkommen: 3.500
    Maßzahlen können als Gleitkommazahl vorkommen: 3,2·102 oder 3,2·10-2
  3. 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: - + ( [ "
  4. Zeichen nach Maßzahl
    Es muss ein Leerzeichen stehen
  5. Maßzahlbereiche
    sind möglich.
    30-50 g
  6. Einheiten(zeichen) und Hilfseinheiten(zeichen)
    Maßzahlen kommen in Verbindung mit einer Einheit (als ausgeschriebenes Wort), wie z.B. Volt, bzw. in Verbindung mit dem entsprechenden Einheitenzeichen, hier wäre das V, vor.
    Einheiten können Leerzeichen enthalten, wie z.B. Schweizer Franken.
    Weiterhin kommen Maßzahlen mit Hilfseinheiten Prozent und Promille bzw. ihren Entsprechungen als Hilfseinheitenzeichen % und ‰ vor.
    Liste aller Einheiten(zeichen) und Hilfseinheitenzeichen:
    Ampere|A
    Candela|cd
    Coulomb|C
    Dollar|USD|$
    Euro|EUR|€
    Farad|F
    Grad
    Grad Celsius|°C
    Gramm|g
    Hertz|Hz
    Joule|J
    Kelvin|K
    Kilometer
    Lumen|lm
    Lux|lx
    Meter|m
    Minute|Minuten|min
    Newtonmeter|Nm
    Newton|N
    Ohm|?
    Pascal|Pa
    Pfund Sterling|GBP|£
    Promille|‰
    Prozent|%
    Schweizer Franken|CHF
    Sekunde|Sekunden|s
    Siemens|S
    Stunde|Stunden|h
    Tesla|T
    Voltampere|VA
    Volt|V
    Watt|W
    Weber|Wb
    Zoll
    Bewußt enthält die Liste die vollen Einheiten auch dann, wenn z.B. wie im Fall Grad Celsius die volle Einheit entfallen könnte, weil ja das vordere Schlüsselwort Grad schon vorkommt.
    Achtung! Vor dem Einheitenzeichen ° (für Winkel) steht kein Leerzeichen. Deshalb steht es nicht in der Liste.
  7. Zusammensetzungen
    1. Einheitenpräfixe und Einheitenpräfixzeichen
      Einheitenpräfixe wie Nano, Mikro, Milli, Zenti, Dezi, Kilo, Mega, Giga bzw. ihre Entsprechungen als Einheitenpräfixzeichen wie n, µ, m, c, d, k, M, G können Einheiten voranstehen.
    2. Exponent
      Einheitenzeichen können auch Exponenten tragen, wie z.B. in m² oder m<sup>2</sup>.
      Falls das Präfix q vom Autor verwendet wurde, wird es durch den Exponent ersetzt.
    3. Bruch
      Einheiten(zeichen) können mit einem Bruchzeichen / zusammengesetzt sein, wie z.B. km/h bzw. Kilometer/Stunde.
    4. Produkt
      Einheitenzeichen können mit einem Mittelpunkt · zu einem Produkt zusammengesetzt sein, wie z.B. A·s.
      Zusammengesetzte Einheiten, die auch ohne Mittelpunkt als SI-Einheit definiert sind, wie z.B. Nm oder VA werden explizit in die Liste unten aufgenommen.
  8. Satzzeichen dahinter
    Hinter Einheiten(zeichen), Hilfseinheiten(zeichen) oder den aufgelisteten Zusammensetzungen können folgende Satzzeichen stehen:
    Leerzeichen . , : ? ! ( ) [ ] = / " ' + -

Aufgabe des Skripts:
Ersetzen eines vorhandenen normalen Leerzeichens durch ein geschütztes Leerzeichen &nbsp; zwischen Paarungen aus Maßzahl und Einheit(enzeichen) bzw. Hilfseinheit(enzeichen) bzw. den aufgelisteten Zusammensetzungen.
Es wird bewußt für das geschützte Leerzeichen nicht das Unicodezeichen U+00A0 verwendet, weil es es weder in der Quelltextansicht eines Browsers, noch in HTML-Editoren eine Möglichkeit gibt das Unicodezeichen vom normalen (ungeschützten) Leerzeichen visuell zu unterscheiden. Eine Prüfung wäre dann nicht mehr möglich.

Satzzeichen: geschützte Leerzeichen

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

Abkürzungen: geschützte Leerzeichen

Das normale Leerzeichen innerhalb der folgenden Abkürzungen wird durch ein geschütztes Leerzeichen ersetzt.

'z. B.'
'd. h.'
'o. ä.'
'u. U.'
'Z. B.'
'D. h.'
'O. ä.'
'U. U.'
'et al.'

Anmerkung ( Fußnote, Endnote)

Verweise

Verweis auf eine Anmerkung (Anmerkungszeichen)

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

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

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

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

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

Anmerkungsverzeichnis

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

Literatur

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

lvz steht für "Literaturverweiszeichen".

Verweis

Verweis auf einen Literaturbeleg

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

Lorem ipsum <?php literature('Kettler 2008', '<strong>Kettler</strong>, Dietmar:
<em>Recht für Radfahrer – Ein Rechtsberater.</em> …'); ?> dolor adipisit.
Erneuter Verweis auf einen bereits existierenden Beleg
Consectutur <?php literature('Kettler 2008'); ?> eiusmod tempor.

Also einfach den Beleg weglassen.

Apostrophe in Verweistexten
<?php literature("O'Neill 2006","O'Neill, ME et al.: 
Postural effects when cycling in late pregnancy, Woman Birth, 19 (4): 
107-11, 2006 Dec."); ?>
Mehrere Autoren in Verweistexten

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

Verweistext bei mehreren Werken mit gleichem Autor aus dem gleichen Jahr

[Herry 2007a] [Herry 2007b]

Beleg

Aufbau eines Literaturbelegs

Selbstständig:

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

Unselbstständig:

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

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

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

Hinter der Rubrik "Zum Autor".

Belege ohne Verweise

Mehrere Literaturbelege - wenn gar keine Verweise existieren

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

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

<?php noref_literature('Leser 2007', '<strong>Leser</strong>, H.; 
<strong>Icke</strong>, S.: <em>Rechts abbiegende Lkw und Radfahrer. 
Feldversuche zum Blickverhalten von Lkw-Fahrern.</em> …'); ?>

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

Position des Literaturverzeichnisses manuell bestimmen

<h4>Quellen</h4>
<?php insert_literature('<h5>Literatur</h5>'); ?>
<h5>Weitere verwendete wissenschaftliche Literatur</h5>

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"

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

Interview

Folge aus Frage und Antwort:

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

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

Schwerpunktthema

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

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

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

Erscheinungsdatum

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

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

Verweis auf PDF-Version

Der Verweis wird automatisch per PHP erzeugt.

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

Seiteninternes Inhaltsverzeichnis

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

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

Zum Autor

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

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

Rechtliche Hinweise

Der Abschnitt wird automatisch per PHP erzeugt.

Direkt hinter dem Bereich "Zum Autor".

<div class="author">
	<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/ Ankündigung/ Abstract/ Anmerkung der Redaktion/ Zusammenfassung/ Betontes Blocklevel Element

<div class="strong">…</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!

Hochgestellter und tiefgestellter Text

sub und sup

Ziffern und einige andere Zeichen existieren zwar als Unicodezeichen, jedoch sind diese Zeichen in typischen Schriften nicht enthalten. Der Editor zeigt sie nicht an. Er kann, anders als z.B. der Browser Firefox, nicht nach alternativen Schriften suchen und diese dann für die Darstellung heranziehen.

Die Ziffern ² und ³ sind als Unicodezeichen jedoch in typischen Schriften enthalten.

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

Keine Überschriften.

Text-Beitrag plus Beleg plus optionalem Kommentar

Das p ist wichtig.

<table class="hohlspeiche-text">
	<tr>
		<th><p>Übrigens ist die Sorge um den hohen Verschleiß der Spike-Spitzen …</p></th>
	</tr>
	<tr>
		<td>Aus: "Bike" 2/09</td>
	</tr>
	<tr>
		<td class="hohlspeiche-comment"><p>Lorem ipsum …</p></td>
	</tr>
</table>

Bildbeitrag plus Beleg plus optionalem Kommentar

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

Rubrik-Seite: Gelesen

Überschrift

Muster: "Bicycling Science" von David Gordon Wilson

Autor

Muster: Gelesen von Peter de Leuw

Cover und Literaturbeleg

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

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

Zu Literaturbelegen: siehe

Rechtliche Hinweise

Wenn mehrere Besprechungen in der Rubrik stehen, erscheint der Hinweis nur einmal am Ende der Rubrik und nicht am Ende jeder einzelnen Besprechung.

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>
	<?php ref("/4/lastenanhaenger/"); ?>
	<div class="letter">

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

Leserbriefe erhalten jeweils einen Teaser als Überschrift

Grußformel, falls

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

Service-Seiten

Startseite

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

Archiv

Die gesamte Seite wird per PHP automatisch erzeugt.

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

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

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

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

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

FAQ

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

Registrierung

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

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

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

Fehlerdokument

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

Gestaltung

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

Druckstylesheet

Ja.

Abbildungsbeschreibungen nicht breiter als Bild

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

Hinreichender Kontrast

zwischen Vorder- und Hintergrund

Besuchte Links

werden farblich hervorgehoben

Schriftgröße 0.875em

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.

Inhalten, wie z.B. einer Legende, werden auf 0.85em ihres Elternelementes verkleinert.

Maximale Zeichenzahl pro Zeile

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

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

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

Kein Umbruch in Kontonummer

.account { white-space: nowrap; }

Alle class- und id-Attribute für Artikel-Seiten

Hier werden keine Attributwerte aufgelistet, die auf Service-Seiten oder in der Navigation vorkommen.

class

answer
archive
author
editorial
fl
an
formula
fr
hohlspeiche
hohlspeiche-text
hohlspeiche-comment
interview
issue
letter-to-editor
li
l-and-r
letter
main-topic
manifestations
maximize-note
pdf-version
pic
publication-date
q-and-a
question
reference
reply
strong
subtitle
toc
url

id

content
manifestations