Direkt zum Inhalt
Bild von CVB      vLIB-Logo      Drehendes E-Mail-Logo
Navigation oben / Hauptnavigation
Impressum

XHTML Workshop: Kapitel 8

  • Diese Seite drucken

Dies ist das letzte Kapitel. Wir werden einige Sachen wiederholen und ein eigenes Design auf die Beine stellen. Außerdem beschäftigen wir uns einmal mehr mit Barrierefreiheit und Screenreadern. Die Aufgaben werden aus Wiederholungen und dem erstellen einer CSS-Datei bestehen.

Barrierefreiheit: Zugang zu PDF und Dokumenten von MS-Office

Es gibt WebDesigner (ich nenne sie "Verbrecher"), die Hyperlinks auf Word- oder Excel-Dokumente ins Netz stellen. Diese Personen lassen oft die Benutzer von Linux und Mac PCs außen vor. Jeder gute WebDesigner benutzt keine proprietären Formate wie DOC oder XLS. Es ist am besten alle Daten in XHTML zu hinterlegen. Komplexe Organisationsstrukturen kann man als Grafik in die Webseite einbinden. Damit kann man ca. 95% von Inhalt präsentieren. Wenn es aufgrund von Formaten wie ein 4-Spalten-Design (Zeitungen) nicht möglich oder gewünscht ist den Inhalt in XHTML zu hinterlegen, dann sollte man ein PDF generieren. Allerdings gibt es auch hier einiges zu beachten:

Ein Kardinalfehler, der immer wieder bei der Erstellung von PDF-Dokumenten zu beobachten ist, passiert mit dem meist unbewussten Ausschluß von Screenreadern über die Sicherheitseinstellungen des Dokumentes. In diesen Sicherheitseinstellungen kann der Ersteller des PDF-Dokumentes festlegen, ob ein Kopieren der Inhalte erlaubt ist oder nicht.
Diese Vorgabe wird oftmals benutzt, um eine scheinbare Sicherheit gegen die unerlaubte Vervielfältigung oder Veränderung des Dokumentes zu erreichen. Allerdings sind die gängigen Screenreader genau auf diese Funktion des Kopierens angewiesen, um überhaupt an die Inhalte des Dokumentes zu kommen und diese wiedergeben zu können.

Man sollte ebenfalls bedenken, dass Screenreader mitunter nicht in der Lage sind Acrobat6 PDFs zu lesen, da ein Screenreader vielleicht erst Version 4 unterstützt. Je mehr Inhalte in XHTML-Form abgelegt sind, umso mehr ist die Webseite für einen Blinden von Nutzen. Außerdem sind die Ladezeiten von großen PDFs (2 MB sind keine Seltenheit) zu beachten. Wer hat schon Lust zehn verschiedene PDFs runterzuladen und zu durchsuchen, nur um an die Öffnungszeiten seines Frisörs zu kommen?

Die fertige Webseite

Ziel dieses Workshops war es eine eigene fertige Webseite zu haben. Außerdem sollten Kenntnisse in XHTML, CSS und Barrierefreiheit erlangt werden. Dieses Kapitel wird im Zusammenhang mit Aufgabe 33 dieses Wissen komplett abfragen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<!-- ### Titel, Meta-Angaben und Einbindung der Stylesheets ### -->
   <title>Willkommen bei XHTML und CSS</title>
   <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
   <link rel="stylesheet" href="index.css" type="text/css" />
</head>

<body>

<!-- ### Header, Kopfzeile, die auf jeder Seite wiederholt wird ### -->
<div id="kopf">
   <h1>Willkommen bei XHTML und CSS</h1>
</div>

<hr />

<!-- ### Hauptnavigation, Navigation oben ### -->
<div id="navigation_oben">
   <p class="unsichtbar">Hauptnavigation (oben)</p>
   <ul>
      <li><a href="http://clausvb.de/">clausvb.de</a></li>
      <li><a href="/">doku.clausvb.de</a></li>
      <li><a href="http://validator.w3.org/">Validator</a></li>
      <li><a href="http://dasprovisorium.de/forum/index.php?showforum=68">Forum
      für Fragen</a></li>
   </ul>
</div>

<!-- ### Navigation auf der linken Seite ### -->
<div id="navigation_links">
   <p class="unsichtbar">Navigation (links)</p>
   <ul>
      <li><a
      href="/index.php?inhalt=xhtml_kap01">XHMTL1</a></li>
      <li><a 
      href="/index.php?inhalt=xhtml_kap02">XHMTL2</a></li>
      <li><a
      href="/index.php?inhalt=xhtml_kap03">XHMTL3</a></li>
   </ul>
</div>
	
<hr />

<!-- ### Inhalt / Content ### -->
<div id="inhalt">
   <h2>Überschrift für den Inhalt</h2>
   <p>Ut dapibus sed, egestas et, eros. Quisque pellentesque, libero a ornare
   bibendum. Proin quis orci lacus. Proin faucibus commodo neque. Quisque
   quis vulputate tempus erat. Vivamus egestas hendrerit nibh. For turpis
   gravida. Aliquam et erat.</p>
</div>

<hr />

<div id="fuss">
   <p>
      © e-workers 2004 
      | geändert von <a href="http://clausvb.de/">Claus van Beek</a> 
      | <a href="http://barrierefrei.e-workers.de/">Webseite: e-workers.de</a> 
      | <a href="http://validator.w3.org/">valid XHTML 1.1</a>
   </p>
</div>

</body>
</html>

Diese Seite wird fehlerfrei validiert. Ihr könnt sie unter "index.htm" abspeichern. Die Datei "index.css" müsst Ihr selbst erstellen (siehe Aufgabe 33). Ihr könnt natürlich alle Hyperlinks und Navigationsstrukturen abändern.



Aufgabe 31

  • Was ist ein Tag? Woran erkennt man einen Tag?
  • Wie wird ein Tag im selfHTML auch noch genannt?
  • Wenn man im CSS "h1 { color: red }" sieht, ist "h1" dann ein Tag oder ein Selektor?
  • Aus welchen drei Element besteht eine CSS-Definition?
  • Welchen Tag nimmt man für Fettdruck "b" oder "strong"?

Aufgabe 32

Welche Fehler sind in dem untenstehenden Abschnitt versteckt?

In der CSS-Datei: 
#hauptmenue
{
   position: absolute;
   top: 55px;
   left: 0px;
   height: 20px;
   width: 100%;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
}
#hauptmenue span
{
   text-decoration: none;
   color: #000000;
}
(...)
<div id ="hauptmenü">
  <span><a href="../intranet/termine/">Aktuelles</a></span> |
  <span><a href="../intranet/suche/">Suche</a></span> |
  <span><a href="../intranet/vorwort/">Vorwort</a></span> |
</div>

Verbessert diesen Teil des Sourcecode und zwar sowohl das CSS, als auch das XHTML.

Aufgabe 33

Nehmt das fertige XHTML-Grundgerüst aus dem Kapitel "Die fertige Webseite" und erstellt die Datei "index.css".

Aufgabe 34

Erstellt eine interne Sprungadresse, die nur für den Lynx und Screenreader sichtbar ist. Mit der Sprungadresse "Direkt zum Inhalt" kann der Lynx-User dann die Navigation überspringen und ist direkt im Contentbereich. Wie man das macht, kann man sich bei der ausgezeichneten Seite der Polizei von NRW ansehen.

Powered by Plone

Diese Seite erfüllt die folgenden Standards:

Valid XHTML   Valid CSS