Web Design  »  Articoli  »  Web design 

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.

Altri articoli

Altre guide

Altre newsletter