Guida ai selettori

Con l'avvento di EasyScript l'installazione di script per il forum o blog e per il profilo è divenuta semplicissima: in pochi click è possibile aggiungere al proprio forum o blog oppure al proprio account una o più estensioni create appositamente per il circuito.
Tuttavia alcuni script necessitano di un'indicazione: occorre specificare in un apposito campo il selettore dell'elemento ove si vuole venga mostrato l'output del codice che si installa. Di conseguenza accade spesso che questa richiesta spiazzi l'utente, facendolo cadere in preda al panico.
In questa guida verrà spiegato nel modo più semplice possibile come gestire script che richiedono un selettore.

Cosa sono i selettori

Il primo passo per comprendere l'argomento è capire cosa sia un selettore.
Come molti sanno, il contenuto di una pagina web è formato dal codice HTML, mentre lo stile della stessa è regolato dal codice CSS che compone i cosiddetti fogli di stile. Nonostante ciò, il CSS risulterebbe quasi del tutto inutile senza la presenza di selettori. Un selettore può essere descritto come l'identificatore di un elemento HTML, con lo scopo di fornire un metodo facile per selezionare quell'elemento. Semplificando si può dire che un selettore è una parola o una sigla associata a un elemento HTML con lo scopo di fornirgli un "nome".
Esistono diversi tipi di selettori, ma quelli maggiormente utilizzati per l'inserimento di script sono gli id e le classi.

1. Id: un id è un selettore che identifica univocamente un elemento. Ciò significa che in una pagina web non devono, o meglio, non dovrebbero esserci due elementi HTML con lo stesso id. Per assegnare un id a un elemento, ad esempio a un div, è sufficiente usare la sintassi id="nome_id":
   HTML

   <div id="nome_id"></div>
2. Classi: a differenza degli id, le classi sono selettori che possono ripetersi in una stessa pagina. Ciò significa che non identificano univocamente l'elemento a cui appartengono. Per assegnare una classe a un elemento, ad esempio a un div, è sufficiente usare la sintassi class="nome_classe":
   HTML

   <div class="nome_classe"></div>

I vantaggi rispetto al passato

In passato per gli script che necessitavano una posizione si richiedeva di inserire tutto o parte del codice javascript in uno dei box in Amministrazione > Grafica > Codice HTML > "dove si vuole lo script". Al contrario con EasyScript si chiede solo di specificare un selettore: il vantaggio non è rappresentato esclusivamente dalla semplificazione del codice da inserire sul forum, ad esempio un solo div vuoto al posto di un javascript con, spesso, dei parametri da gestire, ma soprattutto dalla possibilità di inserire lo script in qualsiasi posizione nel forum! Infatti non è obbligatorio inserire del codice aggiuntivo, ma è possibile anche inserire selettori già presenti di default nelle skin. Esempi semplici possono essere la classe header che racchiude il logo oppure la classe stats che contiene le statistiche. Inoltre, sfruttando le classi, alcuni script possono addirittura essere inseriti nei post.

Inserimento di uno script con selettore

I passi per inserire uno script che richiede un selettore sono tre:

1. Installazione dello script: innanzitutto occorre installare lo script tramite EasyScript.
2. Inserimento di un elemento nel codice del forum: in secondo luogo occorre inserire un elemento, generalmente un div, in Amministrazione > Grafica > Codice HTML > dove si desidera. Naturalmente l'elemento inserito dovrà avere l'id o la classe che verrà inserita in EasyScript. Ad esempio, supponendo di voler inserire la Shoutbox in un apposito div nella homepage del forum, tra i codici HTML, nel box "Codice HTML che sarà mostrato nella homepage del sito" si può inserire:
   HTML

   <div id="shoutbox_container"></div>
   Questo passaggio può essere completamente saltato se si sfruttano id o classi di elementi già esistenti!
3. Inserimento dell'id o della classe in EasyScript: infine occorre cliccare sul tasto "Impostazioni" sotto lo script su EasyScript e inserire nell'apposito campo il selettore. Gli id saranno preceduti dal simbolo #, le classi dal simbolo . (punto). Riprendendo l'esempio precedente, su EasyScript, tra le impostazioni della Shoutbox, verrà inserito #shoutbox_container.