Pagine ad alta leggibilità con ASP e CSS

Home + Articoli + Grafica e Immagini + Articolo # 49

Concesso in esclusiva a Mr.Webmaster. Vietata la riproduzione.

Le regole dell'accessibilità e dell'usabilità consigliano l'utilizzo di un menu che consenta al lettore di una pagina di modificare al volo la dimensione dei caratteri della pagina, al fine di ottenere una migliore leggibilità.

Il lettore potrebbe avere problemi di vista oppure semplicemente soffrire di stanchezza da utilizzo del computer: capirete quindi l'importanza di non farlo stancare adottando un sistema come quello che descriveremo in questo articolo.

In pratica il cambiamento della pagina consisterà nella modifica del font size del testo da 10 pixel di default, ad esempio, a 13 pixel piuttosto che a 15 pixel; questo sistema rischia di guastare l'estetica della pagina: sta alla bravura dello sviluppatore e del designer trovare la soluzione più indolore in termini di stile.

Buona lettura!

Struttura dell'utility

Per realizzare questa utility abbiamo bisogno di utilizzare diversi file che collaborino tra loro, al fine di ottenere un risultato standard che, soprattutto, non necessiti di modifiche al crescere o comunque al mutare di caratteristiche varie del sito.

Utilizzeremo diversi fogli di stile, dove l'unica differenza tra loro consiste nell'impostare il font-size alla dimensione che gli compete; ad esempio, il file 10.css sarà uguale a 12.css solo che il primo riporterà

font-size: 10px;

mentre il secondo riporterà

font-size: 13px;

Utilizzeremo poi un file di inclusione ASP in cui verifichiamo lo stato del cookie in cui andiamo ad impostare il font size da utilizzare nella pagina; se vuoto, imposteremo il font size per default, ad esempio, a 10 pixel.

Il compito di questo file non finisce qui; dichiareremo una variabile in cui andiamo a memorizzare il valore del cookie, in modo da usarla in fase di richiamo del file CSS in tutte le pagine ASP, scritte naturalmente in XHTML.

Abbiamo poi il file che richiamiamo per impostare al volo il cookie contenente le dimensioni a cui impostare il testo; una volta valorizzato il cookie, effettuerà un redirect al file che ha effettuato la chiamata.

Avremo poi le pagine in cui impostare il menu di scelta delle dimensioni del testo, che consiglio di includere in un file di inclusione, allo scopo di non doverlo modificare N volte in caso le esigenze lo richiedano.

I prossimi paragrafi svelano "come fare" tutte queste cose.

I fogli di stile CSS da utilizzare

Come detto nel paragrafo precedente, utilizzeremo N file CSS per l'applicazione, il cui nome sarà uguale alle dimensioni del testo da impostare.

Avremo quindi 10.css

p
{
    font: Normal 10px Verdana;
}

Poi 13.css

p
{
    font: Normal 13px Verdana;
}

Ed in fine 15.css

p
{
    font: Normal 15px Verdana;
}

Ho supposto che usiate dei Tag p per includere i paragrafi da dimensionare; naturalmente, all'occorrenza, potete usare anche dei paragrafi di tipo div piuttosto che delle celle td.

Un consiglio: prima di creare i vari file CSS consiglio di definire completamente lo stile del sito, in modo da non dover intervenire N volte su tutti i file. Una volta definito farete copia e incolla del file CSS di default (ad esempio 10.css) e lo rinominerete col numero del caso e modificherete i vari font-size che vi interessano.

Il file di configurazione: style.asp

Veniamo adesso agli script ASP per la realizzazione del nostro menu per la generazione di pagine ad alta leggibilità. Iniziamo col file di configurazione, le cui funzioni sono descritte nel secondo paragrafo di questo articolo, il file style.asp

<%
    If Request.Cookies("fontsize") = "" Then
        Response.Cookies("fontsize") = "10"
    End If
    Dim style
    style = Request.Cookies("fontsize")
%>

Com'è possibile intuire, il cookie "fontsize" contiene il valore da impostare come dimensioni del testo. Il lavoro della variabile "style" può apparire attualmente un po anonimo, ma vedremo la sua funzione nell'ultimo paragrafo di questo articolo.

Il file che modifica il testo: fontsize.asp

Questo file è il cuore di quella che potremmo definire "la nostra applicazione", pur trattandosi di una semplice e ormai indispensabile utility.

Pur essendo il cuore dell'applicazione, ci bastano solo due righe di codice per svolgere tutte le funzioni necessarie: la prima riga imposta il valore del cookie "fontsize" e la seconda rimanda il lettore alla pagina da cui è stata effettuata la scelta di modificare il font size della pagina.

Vediamo il codice

<%@LANGUAGE = VBScript%>
<%
    Response.Cookies("fontsize") = Request.QueryString("fs")
    Response.Redirect Request.ServerVariables("HTTP_REFERER")
%>

Il codice proposto potrebbe essere smembrato in più righe, ma quando è possibile risparmiare codice, tempo e fatica... fatelo!

Il menu nelle pagine del sito

Siamo giunti alla fase finale conclusiva dell'articolo, l'impostazione del menu di navigazione. Come consigliato in precedenza, sarebbe opportuno includere il menu in un file esterno e richiamarlo con le SSI.

Prenderemo in esame il file index.asp, ovvero la potenziale Homepage del sito; tuttavia il codice da utilizzare nelle altre pagine è lo stesso.

Il compito dei vari file del sito sarà anche quello di includere il file style.asp, esaminato in precedenza, ed includere lato client, dinamicamente, il file CSS che dimensiona il testo di default oppure a seconda della scelta del lettore.

Vediamo il codice

<%@LANGUAGE = VBScript%>
<!--#include file="style.asp"-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<title>Pagine ad alta leggibilità con ASP e CSS</title>
<meta http-equiv="content-type"
 content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="<%=style%>.css" />
</head>
<body>

<h1>Pagine ad alta leggibilità con ASP e CSS</h1>

<p>
    <b>Alta leggibilità:</b>
    <a href="fontsize.asp?fs=10">10</a> |
    <a href="fontsize.asp?fs=13">13</a> |
    <a href="fontsize.asp?fs=15">15</a>
</p>

<p>
    BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA
    BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA
    BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA
    BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA
    BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA
</p>

</body>
</html>

Isoliamo le tre fasi salienti: il richiamo del file di configurazione

<!--#include file="style.asp"-->

il richiamo dinamico del foglio di stile CSS

<link rel="stylesheet" type="text/css" href="<%=style%>.css" />

ed il codice del menu

<p>
    <b>Alta leggibilità:</b>
    <a href="fontsize.asp?fs=10">10</a> |
    <a href="fontsize.asp?fs=13">13</a> |
    <a href="fontsize.asp?fs=15">15</a>
</p>

Iscriviti
Cancellati