CssSelector 1.0

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(); ?> 
		
deve essere inserita all'interno del marcatore head al posto delle dichiarazioni 
di stile. 

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>
		