CssSelector

CssSelector è un modulo php che, innestato opportunamente in una pagina web, permette all'utente di selezionare uno stile di visualizzazione della pagina stessa. Gli stili di visualizzazione sono dei fogli di stile messi a disposizione dal web master.

Esempio di utilizzo

Un esempio del funzionamento di CssSelector è disponibile in questa pagina di esempio. In questo caso sono state messi a disposizione tre stili differenti : rosso, verde e blu. Tali stili differiscono solo per il colore di sfondo della pagina. Per poter utilizzare cssSelector è necessario abilitare i cookies. Al primo accesso al sito, l'utente si trova di fronte la form di selezione dello stile. Lo stile applicato alla pagina in questo momento è quello indicato come predefinito dal web master. Una volta effettuata la selezione, l'utente ad ogni accesso successivo vedrà il sito con lo stile che ha scelto. Cliccando sul collegamento cambia visualizzazione gli sarà possibile in ogni momento selezionare un diverso stile di visualizzazione.

Come installare cssSelector nelle proprie pagine web

CssSelector è uno strumento scritto in php, per cui è necessario avere a disposizione php nel proprio sito. Inoltre tutte le pagine che utilizzano cssSelector devono avere estensione .php.

Fase 1: scaricare il modulo

E' necessario innanzitutto scaricare il modulo ed installarlo sul proprio sito. Per scaricare il sorgente cliccate qui. Il modulo viene fornito in un file compresso, è necessario quindi decomprimerlo e caricarlo poi nel proprio spazio web.

Fase 2: includere cssSelector nelle vostre pagine

Per rendere le funzionalità di cssSelector disponibili in una pagina è necessario includere il modulo appena caricato in tale pagina. Tale operazione viene effettuata mediante il comando include del linguaggio php. Per chiarezza è opportuno che questo genere di comandi si trovi all'inizio della pagina.

			<? include("cssSelector.php"); ?>
		

Il parametro dell'include contiene il percorso del modulo cssSelector. Se ad esempio il file si trova nella directory radice del vostro sito, il comando include andrà specificato nel seguente modo:

			<? include("cssSelector.php"); ?>
		

Fase 3: istanziare cssSelector e dichiarare lo stile predefinito

CssSelector in realtà è una classe. Per poterlo utilizzare è necessario creare una variabile che istanzi di questa classe. Nel costruttore va specificato lo stile predefinito. La sintassi del costruttore è la seguente :

			CssSelector(descrizione, 
				media, 
				file)
		

descrizione è la descrizione testuale che compare nella maschera di selezione, media è il tipo di media per al quale il css si riferisce(vedi i vari tipi di media), ed infine file è il percorso per il foglio di stile.

Supponiamo ad esempio di voler creare una istanza di cssSelector $c che abbia come stile predefinito lo stile rosso, come foglio di stile ross.css, e che tale foglio di stile riguardi le periferiche tipo schermo(screen). Allora dovremmo inserire il seguente codice nella pagina :

			$c = new CssSelector("rosso", 
				"screen", 
				"rosso.css");
		

Attenzione, con questa istruzione viene letto il cookie di gestione dello stile. Per una limitazione dei cookies è necessario che questa istruzione sia eseguita prima di ogni altro output. Di solito viene posta subito dopo gli include.

Fase 4 : specificare gli altri stili

Per aggiungere altri stili è necessario utilizzare il metodo add. La sintassi di tale metodo è identica a quella del costruttore. Supponiamo di aggiungere lo stile verde.

			$c->add ("verde", 
				"screen", 
				"verde.css");
		

Fase 5: generare i marcatori per i fogli di stile

A questo punto dobbiamo aggiungere il codice nella pagina per generare il collegamento al foglio di stile. Nelle pagine web il foglio di stile viene specificato con il marcatore link. Il metodo insertCss genera il codice per collegare il foglio di stile selezionato, e specificare gli altri come fogli di stile alternativi. Dato che le dichiarazioni per gli stili vanno inserite nell'head, l'istruzione

			<? $c->insertCss(); ?> 
		

Fase 6: maschera di selezione stile.

A questo punto non resta che inserire il collegamento cambia visualizzazione e la form di selezione. Entrambe queste cose vengono gestite dal metodo showList(). Questo metodo, inserito nel corpo del testo, visualizza il collegamento cambia visualizzazione o la maschera di selezione, se l'utente intende selezionare lo stile o meno.

Sia al collegamento che alla maschera viene assegnato l'id cssSelector. Questo per facilitare la personalizzazione dell'aspetto di questi due elementi.

Codice dell'esempio

<? include("cssSelector.php");
$c=new CssSelector("rosso","screen","rosso.css");
$c->add("verde","screen","verde.css");
$c->add("blue","screen","blu.css");
?>
<html>
    <head>
        <title>CssSelector: Paginadi esempio 1</title>
        <? echo $c->insertCss(); ?>
    </head>
    <body>
        <h1>Esempio CssSelector : pagina 1</h1>
        <? echo $c->showList(); ?>
        <a href="prova2.php">vai alla pagina 2</a>
    </body>
</html>
		

Ottimizzazioni

Dato che gli stili a disposizione sono di solito gli stessi per tutto il sito, è possibile creare un file di configurazione unico che si occupi di effettuare le impostazioni iniziali, e poi includere questo file in tutte le pagine. Questa ottimizzazione permette di gestire in maniera più semplice gli stili messi a disposizione.

File di configurazione : cssConf.php

<? include("cssSelector.php");
$c=new CssSelector("rosso","screen","rosso.css");
$c->add("verde","screen","verde.css");
$c->add("blue","screen","blu.css");
?>
		

Esempio modificato : prova1.php

<html>
    <head>
        <title>CssSelector: Paginadi esempio 1</title>
        <? echo $c->insertCss(); ?>
    </head>
    <body>
        <h1>Esempio CssSelector : pagina 1</h1>
        <? echo $c->showList(); ?>
        <a href="prova2.php">vai alla pagina 2</a>
    </body>
</html>