Hier stelle ich ein Modul vor, mit dem die Schriftgröße und der Kontrast im Frontend verändert werden können.
Update [18.11.2009]: Die Website, auf der ich die Funktion dieses Moduls gezeigt habe, betreibe ich nicht mehr. Vielleicht wird der Styleswitcher ja noch irgendwo anders eingesetzt und in einem Beitrag verlinkt.
Ziel des Moduls
Barrierefreiheit wird im Internet immer wichtiger, teilweise auch durch Verordnungen vorgeschrieben. Einen Punkt dabei stellt auch die Möglichkeit dar, dass Benutzer im Frontend die Schriftgröße anpassen und den Kontrast verändern können. Damit werden Menschen mit mittleren Sehbeeinträchtigungen berücksichtigt, die beispielsweise sehr lichtempfindlich sind oder kleine Schrift nur schwer lesen können. Weil nicht davon ausgegangen werden kann, dass jeder Benutzer mit seinem Browser so gut umgehen kann, dass er die Schriftgröße clientseitig vergrößern kann, sollte eine entsprechende Funktion auf der Website angeboten werden.
Funktionsweise des Moduls
Über eine zusätzliche Hilfsnavigation können die Benutzer die Schriftgröße und den Kontrast verändern. Klicken sie auf einen entsprechenden Link, wird ein Cookie angelegt, der die Benutzereingabe abspeichert und an Contenido zurück gibt. Dadurch muss nicht bei jeder neu geöffneten Unterseite die Eingabe erneut getätigt werden. Das ganze Prinzip basiert auf einem Artikel, den ich vor längerem bei Lingo4U gefunden und dann für Contenido angepasst habe.
Einbinden des Moduls
Um das Modul einzubinden, müssen einige Dateien verändert bzw. angelegt werden:
- Die Datei cms/css/style.css wird um eine Cookie-Abfrage erweitert und muss als style.php abgespeichert werden.
- Entsprechend müsts ihr den Verweis auf die CSS-Datei im Layout ändern:
Code: Alles auswählen
<link rel="stylesheet" href="css/style.php" type="text/css" media="all" /> - Die Datei cms/includes/fontsize.inc.php muss angelegt werden.
- Dieselbe Datei muss in der cms/front_content.php eingebunden werden.
- Für die Kontrastauswahl müsst ihr sämtliche Grafiken der Website einmal im hellen und einmal im dunklen Design abspeichern.
- Die Grafiken müssen in zwei verschiedenen Unterordner von cms/images sortiert werden.
- Und natürlich müsst ihr das eigentliche Modul für die Hilfsnavigation anlegen und dafür ein Template abspeichern.
An den Anfang eurer CSS-Datei fügt Ihr den PHP-Code ein, der die Werte der Cookies ausliest und in Variablen schreibt. Um die Variablen zu nutzen, ruft ihr sie in eigenen PHP-Blöcken innerhalb des eigentlichen CSS-Bereichs auf. In diesem Code habe ich alle Variablen beispielhaft eingebaut. Wenn ihr die $fontsize als Attribut für html festlegt, könnt ihr im gesamten restlichen CSS-Bereich mit prozentualen Angaben arbeiten, die sich darauf beziehen. Speichert die veränderte CSS-Datei als cms/css/style.php ab, damit der PHP-Code interpretiert werden kann. Denkt daran, das auch im Layout zu verändern.
Code: Alles auswählen
<?php
header('Content-Type: text/css; charset=iso-8859-1');
$browser = getenv("HTTP_USER_AGENT");
/*
* Caching der Seite verhindern
*/
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
header('Cache-Control: no-store');
header('Pragma: no-cache');
list($usec, $sec) = explode(' ',microtime());
print(' /* '.((float)$usec + (float)$sec)." */\n");
if (!empty($_COOKIE['fontsize'])) {
$fontsize = $_COOKIE['fontsize'];
} elseif (!empty($_COOKIE['fontsizeR'])) {
$fontsize = $_COOKIE['fontsizeR'];
} else {
$fontsize = 100;
}
if (!empty($_COOKIE['styleswitch'])) {
$design = $_COOKIE['styleswitch'];
} elseif (!empty($_COOKIE['styleswitchR'])) {
$design = $_COOKIE['styleswitchR'];
} else {
$design = 001;
}
switch ($design) {
case 001:
$bg_color = "FFFFFF";
$font_color = "000000";
$img_folder = "light";
break;
case 002:
$bg_color = "000000";
$font_color = "FFFFFF";
$img_folder = "dark";
break;
}
?>
html {
font-size: <?php print($fontsize); ?>%;
}
body {
color: #<?php print($font_color); ?>;
background-color: #<?php print($bg_color); ?>;
}
#title {
font-size: 100%
background-image:url(../images/<?php print($img_folder); ?>/title.png);
}Anlegen der cms/includes/fontsize.inc.php
Die fontsize.inc.php enthält den eigentlichen Programmcode, der die Cookies anlegt und die Werte reinschreibt. Sie muss im Includes-Verzeichnis des Mandanten-Frontends abgespeichert werden.
Code: Alles auswählen
<?php
/* nach einem gesetzten Cookie suchen */
if (!empty($_COOKIE['fontsize'])) {
$fontsize = $_COOKIE['fontsize'];
} elseif (!empty($_COOKIE['fontsizeR'])) {
$fontsize = $_COOKIE['fontsizeR'];
} else {
$fontsize = 100;
}
if (!empty($_COOKIE['styleswitch'])) {
$design = $_COOKIE['styleswitch'];
} elseif (!empty($_COOKIE['styleswitchR'])) {
$design = $_COOKIE['styleswitchR'];
} else {
$design = 001;
}
/* Schriftgröße soll geändert werden */
if (isset($_GET['font'])) {
if ($_GET['font']=='base') {
$fontsize = 100;
} elseif (($_GET['font']=='dec') && ($fontsize>70)) { /* minimale Schriftgröße in % */
$fontsize -= 10;
} elseif (($_GET['font']=='inc') && ($fontsize<160)) {/* maximale Schriftgröße in % */
$fontsize += 10;
}
/* Session-Cookie setzen, da die meist akzeptiert werden */
setcookie('fontsize', $fontsize, NULL, '/');
/* zusätzlich versuchen, dauerhaften Cookie zu setzen */
setcookie('fontsizeR', $fontsize, time()+60*60*24*365, '/');
/* Caching der Seite verhindern */
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
header('Cache-Control: no-store');
header('Pragma: no-cache');
}
/* Design soll geändert werden */
if (isset($_GET['style'])) {
if ($_GET['style']=='light') {
$design = 001;
} elseif ($_GET['style']=='dark') {
$design = 002;
}
/* Session-Cookie setzen, da die meist akzeptiert werden */
setcookie('styleswitch', $design, NULL, '/');
/* zusätzlich versuchen, dauerhaften Cookie zu setzen */
setcookie('styleswitchR', $design, time()+60*60*24*365, '/');
/* Caching der Seite verhindern */
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
header('Cache-Control: no-store');
header('Pragma: no-cache');
}
?>Damit der Code in das Frontend eingebunden wird, fügt Ihr einfach in die cms/front_content.php eine Zeile ein:
Code: Alles auswählen
include ("includes/fontsize.inc.php");Jede Grafik, die ihr im Frontend nutzt, muss für den hellen und den dunklen Kontrast angepasst werden. Die verschiedenen Versionen werden im Ordner cms/images auf zwei Unterordner verteilt: cms/images/light für die hellen Grafiken mit dunklem Vordergrund, cms/images/dark für die dunklen Grafiken mit hellem Vordergrund.
Anlegen des Moduls Switcher
Die Auswertung der Internetadresse und die Auflösung der Sonderzeichen erfolg ebenso im Modul, wie die Generierung der Templates, mit der die Hilfsnavigation erzeugt wird. Das Modul hat nur einen Output-Bereich. Es wäre allerdings denkbar, zukünftig die Eingabe der Variablen wie z.B. der Dateinamen für die Navigationsbuttons über den Input-Bereich festzulegen.
Code: Alles auswählen
<?php
/***********************************************
* MODUL FONT- AND STYLESWITCHER
*
* Area : Output
* Description : Barrierefreie Navigation zum Anpassen der Schriftgröße und des Kontrasts
* Author : Lennart Brand
* Copyright : mosaik | individual service
* Mail : info@mosaik-is.de
* Created : 06-11-2008
* Version : 0.9 beta
************************************************/
$actionfont = array("inc","base","dec");
$namefont = array("fontbigger","fontbase","fontsmaller");
$titlefont = array("vergrößern","zurücksetzen","verkleinern");
$actionstyle = array("light","dark");
$namestyle = array("lightdesign","darkdesign");
$titlestyle = array("helles","dunkles");
$document_uri_font = current(preg_split('/[&|\?]{1}font=/', $_SERVER['REQUEST_URI']));
$document_ref_font = str_replace('&', '&', $document_uri_font);
$document_uri_style = current(preg_split('/[&|\?]{1}style=/', $_SERVER['REQUEST_URI']));
$document_ref_style = str_replace('&', '&', $document_uri_style);
if (strpos($document_ref_font, '?') === FALSE) {
$document_ref_font .= '?font=';
} else {
$document_ref_font .= '&font=';
}
if (strpos($document_ref_style, '?') === FALSE) {
$document_ref_style .= '?style=';
} else {
$document_ref_style .= '&style=';
}
for($i=0;$i<3;$i++){
toFontTpl($tpl, $document_ref_font, $actionfont[$i], $namefont[$i], $titlefont[$i]);
}
$sCatsFont = $tpl->generate('templates/navigation_barrierfree_item.html', true, false);
$tpl->reset();
for($i=0;$i<2;$i++){
toStyleTpl($tpl, $document_ref_style, $actionstyle[$i], $namestyle[$i], $titlestyle[$i]);
}
$sCatsStyle = $tpl->generate('templates/navigation_barrierfree_item.html', true, false);
$tpl->reset();
$tpl->set('s', 'itemsfont', $sCatsFont);
$tpl->set('s', 'itemsstyle', $sCatsStyle);
$tpl->generate('templates/navigation_barrierfree_container.html');
function toFontTpl(&$oTpl, $url, $action, $name, $title) {
$oTpl->set('d', 'url', $url);
$oTpl->set('d', 'action', $action);
$oTpl->set('d', 'label', $name);
$oTpl->set('d', 'title', "Schriftgröße ".$title);
$oTpl->next();
}
function toStyleTpl(&$oTpl, $url, $action, $name, $title) {
$oTpl->set('d', 'url', $url);
$oTpl->set('d', 'action', $action);
$oTpl->set('d', 'label', $name);
$oTpl->set('d', 'title', $title." Design");
$oTpl->next();
}
?>Das Template barrierfree_container legt, genau wie bei der Hauptnavigation, den Container fest, in den die einzelnen Navigationselemente als Liste eingefügt werden. Ihr speichert es in der Datei cms/templates/navigation_barrierfree_container.html ab:
Code: Alles auswählen
<h3>Layout anpassen:</h3>
<ul> <!-- barrier -->
{itemsfont}{itemsstyle}
</ul> <!-- /barrier -->Code: Alles auswählen
<!-- BEGIN:BLOCK --><li><a href="{url}{action}" title="{title}"><img src="images/{label}.png" height="16" width="16" alt="{title}" title="{title}" border="0" align="absmiddle" /></a></li><!-- END:BLOCK -->Für jeden Navigationspunkt müsst ihr nun nur noch einen entsprechenden Button erstellen. Im zuletzt erstellen Template wurde die Größe der Buttons auf 16x16 Pixel festgelegt. Denkt daran, diese Werte zu ändern, wenn eure Navigationsbuttons eine andere Größe haben. Die Grafiken müssen im Ordner cms/images liegen und, sofern ihr die Einträge Arrays $namefont und $namestyle nicht verändert, folgende Namen haben:
- Schriftgröße erhöhen: fontbigger.png
- Schriftgröße zurücksetzen: fontbase.png
- Schriftgröße verkleinern: fontsmaller.png
- helles Design auswählen: lightdesign.png
- dunkles Design auswählen: darkdesign.png
Das Modul ist noch relativ aufwändig. Gerade die Dopplungen im Modul-Code stören mich noch etwas. Außerdem weiß ich nicht, ob sich die Benutzereingaben über eine Session komfortabler lösen lassen als über die Cookies. Meine PHP-Kenntnisse sind eher niedrig und durch herum experimentieren entstanden. Deshalb meine große Bitte: Wenn euch das Modul gefällt und ihr Lust und Zeit findet, bastelt daran! Ich würde selbst gern wissen, wie es sich optimieren lässt, da ich das Modul inzwischen auf fast jeder Seite einsetze. Ach ja: Die Erweiterung des URIs um die Variablen ist vollständig kompatibel mit dem Plugin Advanced_Mod_Rewrite von xmurrix.
Bitte habt Nachsicht, falls irgend etwas nicht auf Anhieb funktioniert. Das ist mein erstes Modul, das ich weitgehend selbst geschrieben bzw. angepasst habe und hier veröffentliche. Bei mir funktioniert's soweit. Ich beanspruche Frischlingschutz
Beste Grüße
Thanatos