Merkblatt für RedakteurInnen

Merkblatt für RedakteurInnen
LiebeR RedakteurIn,
für das Programmieren in (X)HTML sind im Rahmen der Verordnung für barrierefreie
Informationstechnologie des Landes NRW besondere Anforderungen gestellt. Der
Styleguide der WWU versucht, diese umzusetzen. Daraus ergeben sich für die HTMLProgrammierung konkrete Konsequenzen. Teile davon setzt der integrierte Smart-Editor in
Infosite leider falsch oder gar nicht um. RedakteurInnen, die selbst HTML beherrschen,
sollten bitte die folgenden Hinweise beachten.
Basics:
1. Für die Hervorhebung von Text durch Fettdruck ist der fett zu schreibende Text
zwischen <strong> und </strong> einzuschließen.
Beispiel:
<strong>Fetter Text</strong>
Begründung:
Der Text wird so nicht nur fett formatiert, sondern auch semantisch hervorgehoben.
– Ausgabemedien, die ohne Bildschirm auskommen müssen (z.B. Vorlesesoftware)
kann so auch eine Hervorhebung erwirken (z.B. durch Wechsel der Stimme oder
der Lautstärke)
2. Für die Hervorhebung von Text durch Kursivdruck ist der kursiv zu schreibende
Text zwischen <em> und </em> einzuschließen.
Beispiel:
<em>Kursiver Text</em>
Begründung:
Der Text wird so nicht nur kursiv formatiert, sondern auch semantisch
hervorgehoben – Ausgabemedien, die ohne Bildschirm auskommen müssen (z.B.
Vorlesesoftware) kann so auch eine Hervorhebung erwirken (z.B. durch Wechsel
der Stimme oder der Lautstärke)
3. Alle HTML-Tags müssen auch wieder geschlossen werden. Absätze werden durch
<p> und </p> eingerahmt, Auflistungspunkte durch <li> und </li>.
Beispiel:
<p>Absatz</p>
Begründung:
Der in den Webseiten verwandte Sprachstandard XHTML 1.0 verlangt dies zur
besseren Strukturierung des Textes.
4. HTML-Tags, die kein abschließendes Tag kennen (z.B. Zeilenwechsel-Befehle)
sind in sich durch ein „/“ zu schließen.
Beispiele:
Zeilenumbruch
<br />
Bild
<img src=“bild.jpg“ alt=“Bild“ />
Begründung:
Der in den Webseiten verwandte Sprachstandard XHTML 1.0 verlangt dies zur
besseren Strukturierung.
5. Alle Bilder müssen einen Alternativtext haben, der durch das alt-Attribut in das imgTag eingebaut wird. Sollte kein Alternativtext möglich/nötig sein, dann ist ein leeres
alt-Attribut einzusetzen.
Beispiele:
<img src=“gruppenbilg.jpg“ alt=“Gruppenbild der MitarbeiterInnen“ />
<img src=“bild.jpg“ alt=““ />
Begründung:
Es gibt Ausgabemedien, die keine Bilder darstellen können. (z.B.
Vorleseprogramme oder Generatoren für Blindenschrift) – Hier kann der
Alternativtext die durch das Bild zu erzeugenden Informationen bringen.
6. Hyperlinks sollen, um in das Erscheinungsbild der WWU-Webseiten zu passen, mit
einer Formatvorlage versehen werden, einer sog. Klasse. Das führt dazu, dass bei
allen Bowsern, außer dem Internet-Explorer, vor dem Link ein kleines Pictogramm
eingeblendet wird. Für die Links gibt es 4 verschiedene Klassen.
● Links innerhalb der WWU:
<a href=“URL innerhalb der WWU“ class=“int“>Linktext</a>
●
Links außerhalb der WWU:
<a href=“URL innerhalb der WWU“ class=“ext“>Linktext</a>
●
Links auf Medien (z.B. pdf-Dateien):
<a href=“URL innerhalb der WWU“ class=“download“>Linktext</a>
●
Links auf E-Mails (Formular oder mailto):
<a href=“mailto:[email protected]“ class=“e_mail“>E-Mail</a>
Begründung:
Um im Rahmen des Gesamtlayouts der WWU ein einheitliches Bild abzugeben,
sollen die Icons verwendet werden. Damit sich die Anwender besser zurechtfinden,
sind diese vier Icons empfohlen worden.
7. Mailto-links sind weitgehend zu vermeiden. Stattdessen soll für Mail-Links zu UniAdressen das Mailback-Formular verwendet werden. Hier kann an entsprechender
Stelle die Uni-Adresse ohne „@uni-muenster.de“ eingegeben werden. Für MailLinks gibt es eine Format-Klasse „e_mail“ (vgl. Punkt 6.).
Beispiel:
<a href=“http://wwwuv2.unimuenster.de/kommentieren/kontakt.php?empf=goden&amp;k=1“ class=“e_mail“
target=“_blank“>Mail an Matthias Goden</a>
Begründung:
Der Mailto-Link funktioniert nur, wenn auf PCs ein Mail-Programm installiert und
konfiguriert ist. Auf den Rechercheplätzen oder in CIP-Pools ist das idR nicht der
Fall und der link ist unbrauchbar. Ein link zum Mail-Formular würde aber in o.g.
Situationen funktionieren.
Wichtig: Das Formular funktioniert ausschließlich für Adressen @uni-muenster.de!
8. Das Kaufmännische Und-Zeichen „&“ ist als &amp; zu kodieren.
Begründung:
Das Kaufmännische Und-Zeichen dient immer zur Kodierung von Sonderzeichen
(z.B. Umlaute wie &auml; oder Unicode-Zeichen, s.u.). Um Verwechslungen zu
vermeiden, sollte es immer kodiert werden, wenn es selbst ausgegeben werden
soll.
Beispiel:
Die Ausgabe „C & A“ wird durch den HTML-Text C &amp; A erreicht.
Für Fortgeschrittene
1. Angabe von Sprachwechseln
Der Wechsel von Sprachen ist anzugeben. Das gilt nicht nur für ganze TextPassagen sondern auch für einzelne Wörter wie „online“, „E-Mail“ usw. Das
geschieht durch Verwendung des <span>-Tags mit den Attributen lang und
xml:lang. Eine Liste mit den offiziellen Sprach-Abkürzungen nach der Norm ISO
639-1 gibt es unter
http://www.sub.uni-goettingen.de/ssgfi/projekt/doku/sprachcode.html
Links zu fremdsprachigen Webseiten sollten ebenhalls kenntlich gemacht werden.
Hierzu benutzt man das Attribut hreflang im <a>-Tag.
Beispiele:
<span lang=“en“ xml:lang=“en“>english text</span>
<span lang=“fr“ xml:lang=“fr“>text en francais</span>
<span lang=“it“ xml:lang=“it“>texto italiano</span>
<span lang=“la“ xml:lang=“la“>textus latinus</span>
<a href=“index-en.html“ hreflang=“en“>Englische Seite</a>
<a href=“http://www.google.fr“ hreflang=“fr“>Google
Frankreich</a>
Begründung:
Vorleseprogramme sollten Fremdwörter und Anglizismen korrekt aussprechen.
Missverständnisse könnten z.B. beim Begriff „email“ aufkommen: Bei deutscher
Aussprache könnte eine Keramikbeschichtung, bei englischer Aussprache
elektronische Post gemeint sein. Ein weiteres Beispiel ist das Wort „Main“ (bei
Deutscher Aussprache der Name eines Flusses, bei englischer die Vorsilbe
„Haupt-“).
Die doppelte Sprachangabe (mit lang=““ und zusätzlich xml:lang=““ dient der
Abwärts-Kompatibilität. Laut XHTML-Sprachspezifikation genügt xml:lang=““,
ältere Browser können das aber nicht interpretieren.
2. Ausschreiben von Abkürzungen
Durch das Verwenden des <abbr>-Tags sollen Abkürzungen ausgeschrieben
werden.
Beispiele:
<abbr title=“Primarstufe“>P</abbr>
<abbr title=“zum Beispiel“>z.B.</abbr>
<abbr title=“siehe oben“>s.o.</abbr>
Begründung:
Bei Erstbesuch von Seiten aus bislang unbekanntem Kontext begegnen einem oft
Abkürzungen, mit denen man nicht viel anfangen kann (z.B. Bezeichnungen von
Modulnamen) – hier können solche Angaben das Verständnis erleichtern.
3. Fremdsprachliche Abkürzungen:
Bei fremdsprachlichen Abkürzungen können Punkte 1 und 2 kombiniert werden:
Beispiele:
<abbr title=“Bachelor“ lang=“en“ xml:lang=“en“>BA</abbr>
<abbr title=“et cetera“ lang=“la“ xml:lang=“la“>etc.</abbr>
4. Verwenden von semantischen Zeichen-Kodierungen.
Das Auslassungszeichen „...“ = &hellip; [steht für horizontal ellipse]
Der Gedankenstrich „-“ = &mdash; [Strich in der Breite eines „m“]
römische Zahlen:
● I
=
&#x2160; [= Unicode]
II
=
&#x2161; [= Unicode]
III
=
&#x2162; [= Unicode]
● IV
=
&#x2163; [= Unicode]
● V
=
&#x2164; [= Unicode]
● VI
=
&#x2165; [= Unicode]
● VII
=
&#x2166; [= Unicode]
● VIII
=
&#x2167; [= Unicode]
● IX
=
&#x2168; [= Unicode]
● X
=
&#x2169; [= Unicode]
Begründung:
Der HTML-Text soll semantisch korrekt sein. z.B. erschließt sich uns die Abkürzung
„II“ erst durch kognitive Leistung als römische Ziffer. In der Unicode-Spezifikation ist
die römische Zahl allerdings wie eine arabische Ziffer als wirkliche Zahl angelegt.
Ebenso sollen Auslassung- und Rechenzeichen von Interpunktions-Zeichen
unterschieden werden.
●
●
Für Profis
1. Es gibt Abkürzungen, die abgekürzt in deutsch, ausgeschrieben in einer anderen
Sprache vorgelesen werden müssten. Auch dies kann man mit dem oben
Geschriebenen umsetzen:
Beispiele:
<abbr title=“hypertext markup language“ lang=“en“ xml:lang=“en“><span
lang=“de“ xml:lang=“de“>HTML</span></abbr>
oder
<abbr title=“world wide web“ lang=“en“ xml:lang=“en“><span lang=“de“
xml:lang=“de“>WWW</span></abbr>
In beiden Fällen sind es eigentlich englische Abkürzungen (HTML bzw. WWW), die
aber als Abkürzung in deutsch vorgelesen werden. Das umschließende <abbr>Tag setzt jedoch die Sprache auf englisch. So ist durch das <span>-Tag ein RückWechsel auf deutsch nötig.
2. Es kann manchmal sinnvoll sein, Sprachen mit regionalem Akzent zu versehen.
Durch eine kleine Erweiterung des bisher Geschriebenen ist auch das möglich:
<span lang=“es-AR“ xml:lang=“es-AR“>Rio de Janeiro</span>
Eine Liste für diese Erweiterungen gibt es u.a. unter
http://www.iso.org/iso/en/prods-services/iso3166ma/02iso-3166-codelists/list-en1.html
3. Hervorhebungen durch Großbuchstaben sind über Stylesheets zu machen. (<span
style=“text-transform:uppercase“>groß zu schreibender
Text</span>)
Mit all den oben geschriebenen Informationen sähe ein Mail-Befehl an [email protected] wie folgt aus:
<a href="http://wwwuv2.unimuenster.de/kommentieren/kontakt.php?empf=goden&amp;k=1"
target="_blank" class="e_mail">goden <span lang="en"
xml:lang="en" style="text-transform:uppercase">at</span> unimuenster <span lang="en" xml:lang="en" style="texttransform:uppercase">dot</span> de</a>
Ausgabe:
 goden AT uni-muenster DOT de