zur « Themenübersicht Dit&Dat

Diverses - Sparte

Eingetragen / aktualisiert am 01.05.2007

Da basteln wir eine eine unglaublich schöne Seite mit viel Information, investieren viel Arbeit in Grafiken...
Aber was ist mit den Menschen, für die das Lesen unserer Seite anstrengend ist?
Vielleicht möchten wir auch einfach Inhalte für den Ausdruck aufbereiten, gerade bei grafischen Seiten mit u.U. vielen Farben kann dies ein Problem darstellen.
Oder wir möchten einfach unseren Besuchern als Gimmick ein anderes Design anbieten.

Viele sog. barrierefreie Seiten arbeiten hier mit JavaScript. Nur haben viele Nutzer, gerade auch auf Firmenrechnern JavaScript abgeschaltet. So erschließt sich mir nicht der Sinn, wie man JavaScript mit Anspruch auf barrierefreiheit benutzen kann und dies sogar noch belobhudelt wird. Besser ist hier eine serverseitige Lösung, z.B. auf Grundlage von PHP, da hier der Server die Inhalte liefert, gleich welche Sicherheitsstufe eingestellt ist.
Damit der Tipp hier funktioniert, müssen bestimmte Voraussetzungen erfüllt sein:

Voraussetzungen:
Auf dem Server muss PHP laufen! Dies ist mitlerweile selbst bei Billiganbietern der Fall, notfalls erkundigen.
Klientseitig, also beim Besucher, müssen Cookies aktiviert sein, damit ein Layoutwechsel unmittelbar und für alle Seiten wirksam ist. Selbst wenn der User Cookies abgeschaltet hat, kann für die jeweilige Seite das Layout gewechselt werden, es ist nur umständlicher, da nur die jeweilig aufgerufene Seite ihr Layout wechselt. Hilfreich ist hier vielleicht eine Info-Seite, die den Besucher aufklärt, welche Aufgabe ein Cookie hat und diese dann aktiviert.

Website:
Das Layout mus klar von dem Inhalt getrennt sein! Keine Formatierungen im Code wie font, font-size usw.!
Alle Formatierungen für Tabellen, Inhalte, Schriften, Hintergründe usw. werden in einer externen .css-Datei definiert.
Die Struktur der Webseite, die in Kontainern definiert wird, muss für jedes Layout gleich sein. In der CSS-Datei werden lediglich die Eigenschaften dieser, von Links, Hintergründen usw. definiert.

So gehts:
Wir erstellen das Layout der Seite, in dem wir die Struktur der Seite vorgeben.
In der CSS-Datei definieren wir dann Schriftgrößen, Hintergründe usw.
Jedem Entwurf vergeben wir einen Namen, bzw. erstellen eine eigene CSS-Datei.
Nun haben wir verschiedene CSS-Dateien mit völlig unterschiedlichen Layouts, so bauen wir den Switch in unsere Website ein:
Als erstes müssen wir ein Cookie setzen, damit sich die aktuelle Seite und auch das gewünschte Layout gemerkt wird.
Cookies müssen immer vor dem HTML-Tag gesetzt werden, natürlich müssen die Dateien auch alle auf .php enden!

<?php
if (empty($_GET['style'])) {
  if (empty($_COOKIE['style'])) {
    $css_name = "formate";
  }
  else {
  $css_name = $_COOKIE['style'];
  }
}
else {
  $css_name = $_GET['style'];
}
setcookie("style", $css_name, time()+(60*60*24*30));
$_GET['style'] = $css_name;
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n";
?>
<html>
<head>
usw.......
Was passiert?
Ist kein Cookie gesetzt, wird automatisch die normale formate.css aufgerufen, ansonsten das Cookie mit dem gewünschten Layout aufgerufen.
Wird ein Layout gewählt, wird ein Cookie mit dem entsprechen Layout gesetzt, oder ein vorhandenes überschrieben.
Im Header der Website muss nun natürlich auch ein Hinweis auf die CSS-Dateien bestehen, der sieht sieht so aus:
<link rel="stylesheet" type="text/css" href="verzeichnis/<?php echo "".$css_name."" ?>.css" media="screen"  />
<link rel="alternate stylesheet" type="text/css" href="verzeichnis/formate_text.css" title="text" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="verzeichnis/formate_blau.css" title="text" media="screen" />
Die Alternativen heißen hier formate_text und formate_blau.

Auf der Website müssen natürlich auch noch die Links für den Switch angebracht werden, die sähen dann  in diesm Beispiel so aus:
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=formate" title="Link zur Normalansicht"> normal </a>|
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=formate_text" title="Link zur Textversion"> text </a>|
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=formate_blau" title="Textversion mit blauem Hintergrund">blau</a>|

Beispiel:
http://www.um-fritz.de/styleswitcher
Hier habe ich das Script entlehnt...
Eine besonders schöne Seite mit Demos und Infos.

Infos über CSS-Layouts:
de.selfhtml.org/css/layouts/index.htm

 

Styleswitcher per PHP