Style Switcher per tutti

Com'è noto, i fogli di stile consentono di modificare quasi totalmente la presentazione
di struttura e contenuto di una pagina html. Realizzare siti internet attenti
agli standard è importante, e utilizzare i fogli di stile per curare totalmente
la presentazione è il primo passo. Un ulteriore passo avanti può essere fatto
permettendo all'utente di personalizzare la sua esperienza di navigazione: vedremo
infatti come sia possibile (attraverso i più diffusi linguaggi di scripting: Javascript,
PHP, ASP e ASP.NET) poter offrire all'utente la possibilità di scegliere il foglio
di stile con cui verrà presentato il sito.

Mettere a disposizione uno style switcher (letteralmente modificatore di
stile) non è solo un voler mostrare quanto siamo bravi con i fogli di stile,
ma una scelta attenta verso l'utente. Ecco un esempio di cosa sia possibile ottenere
solo agendo sui css per la presentazione di una pagina: Css
Zen Garden. Certo, in un sito "reale" e non puramente dimostrativo della potenza
del design e dei css, gli stili alternativi saranno al massimo quattro o cinque,
e uno di questi dovrà essere preferibilmente una versione testuale ad alta leggibilità
per gli utenti ipovedenti. Ecco un esempio di sito istituzionale progettato senza
l'uso di tabelle che consente una buona personalizzazione del look and feel
del sito da parte dell' utente: il sito
del Comune di Torino.

Progettare un sito adatto per lo style switcher

Aggiungere al vostro sito uno style switcher non è difficile, e vedremo in questo articolo diversi modi pronti
e collaudati per farlo. Iniziamo con il dire che il vostro sito dovrà rispondere a certi requisiti se vorrete garantire
una piena personalizzazione:

1. Il sito deve essere interamente basato su un modello (template) html
   che non fa uso di tabelle e le pagine devono tutte ricalcarlo, almeno per quanto
   riguarda le sezioni principali (header, navigazione, corpo centrale e footer);
2. Le pagine dovranno essere realizzate in un linguaggio strict e in particolare
   in HTML 4.01 Strict oppure in XHTML 1.x Strict. Questo per un semplice motivo:
   utilizzare un linguaggio strict (e validare
   le pagine!) ci garantisce che nell'html non abbiamo utilizzato attributi html
   presentazionali vecchio stile quali width, height,
   cellpadding, etc...;
3. Dovrebbe esserci, preferibilmente, un unico file css applicabile a schermo
   per tutte le pagine del sito: questo ci consente un maggiore centralità della
   presentazione e ci consente di utilizzare senza modificarlo uno dei qualsiasi
   style switcher che vedremo nel corso dell' articolo;
4. Dovrebbe esserci un unico foglio di stile per la stampa valido per tutte le
   pagine del sito. Questo file dovrà preferibilmente essere totalmente dedicato,
   e quindi non andrà a ridefinire le regole per lo schermo ma servirà solo ed esclusivamente
   per definire gli stili di stampa. Questo file potrebbe ricalcare ad esempio, semplificandolo
   e rendendolo adatto alla stampa, il layout base del sito.

I punti sopra indicati potrebbero apparentemente sembrare dei vincoli, ma in
realtà sono delle vere e proprie linee guida per la progettazione di un sito attenente
agli standard attuali. A questo punto, se il sito che avete realizzato risponde
ai requisiti appena visti, non vi resta che preparare dei fogli di stile alternativi
per poter offrire all'utente la possibilità di scegliere la presentazione preferita.

Le due vie per lo style switcher: client-side e server-side

Sostanzialmente ci sono due modi per aggiungere uno style switcher ad un sito:
lato client e lato server. Quale che sia la strategia implementativa che sceglierete
(a seconda soprattutto del supporto di linguaggi lato server) il principio di
funzionamento è comune e si appoggia sull'uso dei cookie.

I cookie sono dei piccoli file di testo che memorizzano sul computer dell'utente,
in questo caso, il foglio di stile preferito, così da poter mantenere questa informazione
durante l'intera sessione di navigazione tra le pagine del sito e le visite successive.
Se decidete di aggiungere uno style switcher al vostro sito il consiglio è di
preparare un messaggio o una paginetta in cui si dice all'utente che gli sarà
possibile scegliere tra diverse personalizzazioni del sito, e lo si avverte che
per poter usare appieno questo strumento dovrà avere i cookie abilitati.

Per l'implementazione lato client, l'unica via possibile è il Javascript:
in questo caso lo script girerà sul browser dell'utente. Il principale vantaggio
è che, a differenza di script lato server, non necessita di hosting particolari
ed è quindi applicabile a tutti i siti, indipendentemente dalla piattaforma (Windows,
Mac o Linux), dal fatto che si tratti o meno di uno spazio gratuito, e dal supporto
di tecnologie lato server. Ci sono però due svantaggi: il visitatore dovrà avere
Javascript abilitato per poterne usufruire e dovrà disporre di un browser con
un buon supporto degli standard e in particolare del DOM (in sostanza in browser
ormai obsoleti come Netscape 4.7 non funzionerà).

Per l'implementazione lato server, le possibili vie sono moltissime: CGI, ASP,
ASP.NET, PHP, JSP e ColdFusion. Vedremo le principali: PHP, ASP e ASP.NET, spiegando
il semplice meccanismo con cui si realizza uno script per uno style switcher lato
server. Principi così semplici da poter essere applicati, con al massimo una decina
di righe di codice, a qualsiasi supporto lato server e che per un discreto programmatore
web richiederanno pochi minuti di codifica, anche per le tecnologie che non tratteremo.

Uno style switcher lato server è decisamente più ben supportato e maneggevole
rispetto all'analogo in Javascript, eliminando i due limiti che quest'ultimo impone.
L'unico "svantaggio", se così si può chiamare, è che necessita di un hosting con
supporto lato server, e che quindi risulta più costoso rispetto ad un hosting
normale: ma le potenzialità di creazione di un sito con supporto di tecnologie
dinamiche sono decisamente molto maggiori.

Style switcher in Javascript

Uno dei più noti style swicher in Javascript è senza dubbio quello
presentato su Alistapart. Credo che siano moltissimi, nell'ordine di migliaia,
i siti che fanno uso di questo script con o senza modifiche. Per questo articolo,
presenterò invece un'alternativa che ho cercato in rete, trovandola in
questa
pagina in tedesco. Il principio di funzionamento è praticamente identico al
più ben noto script di Alistapart. Il codice, a parer mio, risulta molto più pulito
e comprensibile e include le funzioni di manipolazione dei cookie. L'unico "problema"
è che l'autore ha usato nomi di variabili in tedesco e si è dimenticato di una
chiamata a funzione fondamentale, che ho provveduto ad aggiungere nello script
che vi presento. Va precisato, comunque, che non sono necessarie conoscenze
di Javascript per poterlo usare: nel corso dell' articolo vedremo come utilizzare
questo script comodamente.

Il principio di funzionamento

Per chi ha nozioni di Javascript e per i curiosi in generale ho preparato una
pagina
con il codice da visualizzare on line. Il principio di funzionamento dello
style switcher in Javascript è abbastanza semplice e si basa sui fogli di stile
alternativi. Mentre Opera e Mozilla hanno supporto per i fogli di stile alternativi
e danno la possibilità attraverso il browser di cambiare il foglio di stile con
cui viene presentata una pagina html, Internet Explorer non offre questa possibilità.
Inoltre, implementare uno style switcher ha un vantaggio anche su Opera e Mozilla:
quello di memorizzare il foglio di stile preferito anche per le visite successive.

Vediamo come funziona lo script. Al caricamento della pagina html che include
lo script, si va a ricercare se è presente un cookie che definisce lo stile preferito
dall'utente. In caso positivo, la funzione switchStyle,
attraverso il DOM, "esplora"
la pagina alla ricerca di tag link che
servono per includere i vari fogli di stile, disabilitando quelli non necessari
e lasciando attivo solo quello di cui si è reperita l'informazione nel cookie.
Lo stesso procedimento viene effettuato al cambio di css: in questo caso, in più,
verrà riscritto il cookie per memorizzare il css scelto dall'utente.

Come includere il codice per lo style switcher

Ci sono dei semplici passi per includere lo style switcher in una pagina html:
la preparazione delle dichiarazioni nella sezione head e l'aggiunta dei link per
lo styleswitching. Vediamole.

Preparare le dichiarazioni

La prima cosa da fare è dichiarare nella sezione head
della nostra pagina il foglio di stile di default attraverso il tag link:

<link rel="stylesheet" type="text/css" href="fogliobase.css" title="default">

Ovviamente potrete cambiare il nome del file css, ma è importante che il titolo
del foglio di stile base sia "default".

Ora possiamo procedere a dichiarare i fogli di stile alternativi,
che dovranno essere in questa forma:

<link rel="alternate stylesheet" type="text/css" href="black.css" title="accessibile">

È indispensabile, per il corretto funzionamento, che ogni foglio di
stile che ogni css linkato abbia un titolo, specificato attraverso l' attributo
title. Mentre per il css base dovrete
usare il titolo "default" ai css alternativi potrete assegnare i titoli
che più vi piacciono.

Infine, aggiungiamo il codice javascript alla pagina, sempre nella
sezione head:

<script type="text/javascript" src="switch.js"></script>

La parte dichiarativa si è conclusa, vediamo quindi come risulta ora la sezione
head completa della nostra pagina:

<head>
<title>titolo della pagina</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="foglioprincipale.css" title="default">
<link rel="alternate stylesheet" type="text/css" href="black.css" title="accessibile">
<link rel="alternate stylesheet" type="text/css" href="postcard.css" title="cartolina">
<script type="text/javascript" src="switch.js"></script>
</head>

Come si può notare, ci sono anche le dichiarazioni title
e charset che sono necessarie in una
pagina html.

Aggiungere i link

A questo punto non ci resta che aggiungere la parte funzionale, e cioè i link
che consentono lo style switching. Questi vanno inseriti in qualsiasi parte della
nostra pagina html all' interno del body.
Ecco come fare:

<a href="javascript:setStyle('cartolina')">Stile cartolina</a>

È importante notare come tra i singoli apici ci sia il title
del foglio di stile linkato nell'head, e sarebbe meglio che i vari link siano
preceduti da un header informativo, ad esempio:

<div id="styleswitch">
    <h3>Scegli lo stile del sito:</h3>
    <ul>
        <li><a href="javascript:setStyle('default')">Stile base</a></li>
        <li><a href="javascript:setStyle('postcard')">Cartolina</a></li>
        <li><a href="javascript:setStyle('black')">Sito accessibile</a></li>
    </ul>
</div>

L' esempio finale

Gli elementi per poter mettere uno style switcher in javascript nel vostro
sito a questo punto ci sono tutti, non resta che vederlo in azione! Ho preparato
pagina
di esempio molto semplice e con dei fogli di stile molto particolari scritti
velocemente.

Il codice da scaricare

Ho preparato anche un pacchetto zip contenente il file javascript e un modello
di pagina html commentato che potrà essere usato come base per preparare pagine
predisposte allo style switcher.

Nella seconda parte dell' articolo vedremo gli style switcher lato server.

In questa parte dell'articolo vedremo come sia possibile aggiungere uno style switcher lato server ad una pagina html. Il procedimento, indipendentemente dalla tecnologia di sviluppo, è decisamente più semplice rispetto all'analogo con Javascript: non dovremo preoccuparci di fogli di stile alternativi nè di titoli sulle dichiarazioni di tipo link.

Il principio di funzionamento

Uno style switcher lato server si compone sostanzialmente di due porzioni di codice distinte:

1. Caricamento dello stile preferito dall'utente attraverso i cookie
2. Pagina di scrittura del cookie e di redirect sulla pagina chiamante per mostrare il nuovo stile scelto.

Per quanto riguarda la prima parte, negli esempi che vedremo la funzionalità sarà incorporata nella pagina (PHP o ASP che sia) con i contenuti. Il codice si potrà facilmente spostare in un file dedicato e includerlo come codice esterno, così da poterlo riusare facilmente in tutte le pagine se non si tratta della pagina template del sito.

Per quanto riguarda la memorizzazione del cookie, esso conserverà, questa volta,
solo l'informazione sul nome del file CSS (estensione esclusa) corrispondente
al foglio di stile scelto dall'utente. Ovviamente, sarà anche necessario predisporre
nelle pagine che fanno uso dello style switcher i link per consentire il cambio
di stile.

Style switcher in PHP

Abbiamo già visto in linea di massima il principio di funzionamento, ora vediamo
il codice che va inserito nella sezione head della pagina PHP che
userà lo style switcher e che si occupa del caricamento dello stile scelto dall'utente:

<head>
<title>Style Switcher in php</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<?if(isset($_COOKIE["style"])){
    $style=$_COOKIE["style"];
    print("<link rel="stylesheet" type="text/css" href="$style.css"n");
    }
else
    print("<link rel="stylesheet" type="text/css" href="default.css"n");
?>

</head>

Ora aggiungiamo nella stessa pagina i link per i cambiamenti di stile nel body, che richiama la pagina setstyle.php
passandogli un parametro via querystring nella forma:

<a href="setstyle.php?style=accessibile">Versione accessibile</a>

In sostanza dopo il segno di uguale nell'url setstyle.php?style= seguirà il nome del file CSS (senza estensione!) che consente alla pagina setstyle.php di scrivere il cookie, e ridirezionare il browser sulla pagina che l'ha richiamata. Quest'ultima, avendo nella sezione head le istruzioni di caricamento del cookie e del relativo foglio di stile, provvederà a mostrarsi con il CSS appena impostato. Il passaggio è decisamente veloce, praticamente quanto un semplice reload della pagina, e il nuovo CSS avrà effetto da subito, venendo memorizzato per successive visite.

A questo punto realizziamo una semplice pagina di PHP puro per settare il cookie. La chiameremo setstyle.php e conterrà solo le seguenti righe di codice:

<?php
setcookie("style", $_GET["style"], time()+31536000);
header("Location:".$HTTP_SERVER_VARS["HTTP_REFERER"]);
?>

Style Switcher in ASP

Il principio di funzionamento per lo style switcher in ASP è praticamente identico
all'analogo in PHP. Per entrambi l'ispirazione proviene da brainjar.com.
La versione dello style switcher in ASP qui presentata è leggermente diversa per
quanto riguarda il caricamento del CSS, identica invece a quella di brainjar.com
per quanto riguarda la scrittura del cookie. Vediamo subito la parte riguardante
il caricamento del cookie e del relativo foglio di stile nella sezione head
della nostra pagina ASP:

<head>
<title>Style switcher in ASP</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<% if Request.Cookies("style") <> "" then %>
<link rel="stylesheet" type="text/css" href="<%= Request.Cookies("style")%>.css" media="screen">
<%else %>
<link rel="stylesheet" type="text/css" href="default.css" media="screen">
<% end if %>
</head>

Nella stessa pagina, all'interno del body, aggiungiamo i link
per i cambiamenti di stile. Ogni link richiama la pagina setstyle.asp passandogli
un parametro via querystring nella forma:

<a href="setstyle.asp?style=accessibile">Versione accessibile</a>

In sostanza, dopo il segno di uguale nell'url setstyle.asp?style=
seguirà il nome del file css (senza estensione!) che consente alla pagina
setstyle.asp di scrivere il cookie, e ridirezionare il browser sulla pagina
che l'ha richiamata. Il funzionamento è identico all'esempio in PHP.

Il cookie memorizza l'informazione del foglio di stile relativo e la pagina
la trova al caricamento. Ecco come il cookie viene scritto, attraverso la pagina
setstyle.asp:

<% 'Imposta il cookie per lo stile del sito.
Response.Buffer = true
if Request.QueryString("style") <> "" then
    Response.Cookies("style") = Request.QueryString("style")
    Response.Cookies("style").Expires = FormatDateTime(DateAdd("d", 60, Now()))
else
     Response.Cookies("style").Expires = FormatDateTime(DateAdd("d", -1, Now()))
end if
'Ridireziona sulla pagina chiamante.
Response.Redirect(Request.ServerVariables("HTTP_REFERER"))
%>

Ecco l'esempio.

Abbiamo anche preparato uno
zip con i file ASP, PHP e CSS utilizzati negli esempi.

Un ulteriore passo avanti per lo Style Switcher lato server

Le due versioni ASP e PHP dello style switcher che abbiamo visto fanno uso dei cookie. Come abbiamo detto nella prima parte dell'articolo è buona norma spiegare all'utente cosa gli si mette a disposizione, e in linea di massima come funziona la personalizzazione dell'ambiente e della grafica del sito. Un valido esempio lo si può trovare sul sito del comune di Torino.

I cookie scritti dai vari style switcher che abbiamo visto, non sono dannosi e non conservano informazioni ulteriori se non quelle relative al foglio di stile con cui l'utente ha scelto di visualizzare il sito, ed è bene precisarlo insieme alle indicazioni di massima per abilitare i cookie sui principali browser. Gli style switcher lato server, a differenza di quello in javascript effettuano il cambiamento di stile esclusivamente attraverso i cookie e il ricaricamento della pagina grazie al cookie appena scritto. Quindi, a differenza dello style switcher in Javascript, se i cookie sono disabilitati non sarà possibile effettuare il cambiamento di stile neanche per la pagina corrente.

Diverse versioni degli style switcher lato server presenti in rete fanno uso, anzichè dei cookie, delle variabili di sessione. Queste variabili sono "personali" di ciascun utente, vengono memorizzate lato server e la loro durata corrisponde all'intera sessione di navigazione. In sostanza, quando l'utente abbandona il sito o chiude la finestra del browser il contenuto di queste variabili è perso. Per questo motivo preferisco i cookie, che invece consentono di mantenere la scelta della personalizzazione oltre la sessione di navigazione e non richiedono risorse in memoria lato server. Una soluzione attenta anche agli utenti che hanno i cookie disabilitati, e per qualche motivo non vogliono, non possono o non sanno abilitarli sarebbe quella di implementare uno style switcher che fa uso sia delle sessioni che dei cookie: esso avrebbe i vantaggi di entrambe le soluzioni.