Istruzioni

I componenti di JSI 3

Da quanti files è composto JSI 3?
Quattro, vediamoli brevemente insieme per iniziare a orientarci.
  1. jsi-contenitore-head.js è il cuore di JSI. Il richiamo a questo file deve essere messo tra i tag <head> </head> della pagina contenitore. In questo file ci sono le principali variabili che l'utilizzatore deve personalizzare.
  2. jsi-contenitore-body.js è il file di JSI che deve essere inserito tra i tag <body> </body> della pagina contenitore, nel punto in cui vogliamo che appaiano i contenuti inclusi. E' la funzione che inizializza le variabili di JSI e le altre funzioni dello script.
  3. jsi-pagine-head-ricomponi.js è un file opzionale. Se utilizzato, deve essere inserito tra i tag <head> </head> delle pagine incluse. Questo file impedisce che le pagine si aprano singolarmente: serve per essere sicuri che quando si entra da una qualunque pagina interna del sito (ad esempio seguendo il link fornito da un motore di ricerca) questa sia vista inclusa nella pagina contenitore.
  4. jsi-pagine-body-accelera.js è anch'esso un file opzionale; se utilizzato, deve essere richiamato prima del tag di chiusura </body> nelle pagine incluse. E' un file che serve ad accelerare lo script, accelerando l'apertura della pagina inclusa: senza questo file la pagina inclusa viene visualizzata solo quando è caricata tutta.
    Facciamo un esempio. Vogliamo includere una pagina con delle immagini, e con una connessione lenta il caricamento della pagina può richiedere molto tempo: con questo file la pagina inclusa viene visualizzata nella struttura contenitore gradualmente, man mano che viene caricata; senza questo file la pagina viene visualizzata solo quando completa, e fino ad allora vedremo nella pagina contenitore il messaggio di attesa.
    Se questo file non viene utilizzato in tutte le pagine si deve cambiare una variabile nello script principale, come specificato più sotto. Conviene segnalare fin d'ora che, in assenza di questo file, JSI può lavorare solo in modalità reload.
Cos'altro serve per far funzionare JSI?
Due cose: Non occorre invece richiamare più nulla all'evento onload nel tag <body> della pagina contenitore: questo accadeva con una versione precedente, ma con JSI 3 resta semplicemente <body>.
Come fare per assicurare il buon funzionamento in locale con Explorer e la Service Pack 2?
Per evitare che la SP2 blocchi l'esecuzione di JSI nelle pagine destinate alla consultazione in locale o da cd-rom, occorre inserire un particolare commento chiamato "mark of the web". Esso deve essere inserito nei primi 2048 byte del codice (x)html, ad esempio dopo il doctype. Il commento da inserire è:
<!-- saved from url=(0014)about:internet -->
Questo commento deve essere messo in tutte le pagine, quindi sia nella pagina contenitore che nelle pagine incluse.
Se si secglie di usarlo, è molto importante che il "mark of the web" sia presente in tutte le pagine: in caso contrario il browser si comporta in modo anomalo e pur bloccando il funzionamento degli script nelle pagine senza "mark of the web" non fornisce alcun avviso, rendendo così impossibile all'utente proseguire la navigazione nelle pagine in esame.

Realizzare un sito con JSI

Dove devono essere messi i file di JSI?
Fino all'attuale versione la posizione dei file di JSI è irrilevante. Consiglio tuttavia - per semplicità - di metterli nella radice del sito; se si utilizza JSI per realizzare una singola sezione (ad esempio la galleria fotografica) consiglio di mettere i file nella cartella relativa a questa sezione.
Come costruisci un sito con JSI?
Ecco la sequenza delle operazioni da fare:
  1. creare le pagine del sito:
    • la pagina contenitore (negli esempi che faremo, sarà la pagina index.html)
    • la pagina che sarà visualizzata per prima all'interno della pagina contenitore (negli esempi che faremo, sarà la pagina home.htm)
    • le altre pagine del sito (negli esempi che faremo, saranno pagina-1.htm e pagina-2.htm)
  2. personalizzare le variabili di JSI nei diversi file che lo compongono
  3. personalizzare le variabili nei link
  4. personalizzare i tag <noscript> </noscript>
Consiglio di iniziare con poche pagine di prova per prendere confidenza con le diverse opzioni di JSI.
Inizialmente avremo quindi una serie di file molto simile a questa:
  • index.html
  • home.htm
  • pagina-1.htm
  • pagina-2.htm
  • stile.css
  • jsi-contenitore-body.js
  • jsi-contenitore-head.js
  • jsi-pagine-body-accelera.js
  • jsi-pagine-head-ricomponi.js
Faremo riferimento a questo semplice schema per le prime prove con JSI, poi vedremo come organizzare un sito più articolato, con cartelle e sotto-cartelle nelle quali organizzare al meglio le pagine (x)html.

1. Il codice delle pagine

Come è fatta la pagina contenitore?
La pagina contenitore è la "cornice" dentro alla quale sono visualizzate le pagine incluse. In <head> </head> saranno ovviamente presenti il doctype, il title, i metatag e il richiamo al foglio di stile. In <body> </body> la pagina avrà l'intestazione del sito, il menù di navigazione, una parte destinata ai contenuti (inseriti da JSI) ed eventualmente il footer.
Semplificando un po', quello che segue è il codice base di una pagina contenitore. Gli elementi inseriti per JSI sono cinque:
  1. il "mark of the web" per il funzionamento in locale con la SP2
  2. il richiamo dello script in <head> </head>
  3. l'evento onclick nei link che richiamano le pagine del sito
  4. il <div> </div> "contenuti"
  5. il richiamo dello script in <body> </body> con il suo tag <noscript> </noscript>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- saved from url=(0014)about:internet -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">

<head>

<title>Nome Sito</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="it" />
<meta http-equiv="imagetoolbar" content="no" />

<meta name="description" content="..." />
<meta name="keywords" content="..." />
<meta name="author" content="..." />
<meta name="copyright" content="..." />

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

<script src="jsi-contenitore-head.js" type="text/javascript"></script>

</head>

<body>

<h1>Nome sito</h1>

<div id="menu">
<ul>
<li><a href="home.htm" onclick="return vai(this.href,0,0);">home</a></li>
<li><a href="pagina-1.htm" onclick="return vai(this.href,0,0);">pagina 1</a></li>
<li><a href="pagina-2.htm" onclick="return vai(this.href,0,0);">pagina 2</a></li>
</ul>
</div>

<div id="contenuti"><span></span></div>

<script src="jsi-contenitore-body.js" type="text/javascript"></script>
<noscript> </noscript>


</body>

</html>
Come sono fatte le pagine incluse?
Le pagine incluse sono delle normalissime pagine web. In <head> </head> hanno il loro doctype, il title, i metatag per l'indicizzazione da parte dei motori di ricerca e il richiamo al foglio di stile. Il <body> </body> si caratterizza per la presenza dei soli contenuti; per chi ha familiarità con i frames, può essere utile dire che le pagine da includere vanno pensate come le pagine che sono richiamate in un frameset.
Quello che segue è il codice base di una pagina da includere. Per il corretto funzionamento di JSI occorre inserire:
  1. il "mark of the web" per il funzionamento in locale con la SP2
  2. il richiamo dello script per ricomporre le pagine in <head> </head>
  3. l'evento onclick nei link che richiamano le pagine del sito
  4. il richiamo dello script per accelerare l'apertura delle pagine prima del tag di chiusura </body>, con il suo tag <noscript> </noscript>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- saved from url=(0014)about:internet -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">

<head>

<title>Pagina 1 - Nome sito</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="it" />
<meta http-equiv="imagetoolbar" content="no" />

<meta name="description" content="..." />
<meta name="keywords" content="..." />
<meta name="author" content="..." />
<meta name="copyright" content="..." />

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

<script src="jsi-pagine-head-ricomponi.js" type="text/javascript"></script>

</head>

<body>

<h2>Pagina 1</h2>

<p>Testo pagina 1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

<p>Nel testo ecco un link ad un'altra pagina inclusa, ad esempio la <a href="pagina-2.htm" onclick="return vai(this.href,0,0);">pagina 2</a>.</p>

<script src="jsi-pagine-body-accelera.js" type="text/javascript"></script>
<noscript> </noscript>


</body>

</html>

2. Le variabili di JSI

In quali file ci sono variabili da personalizzare?
I file che contengono le variabili da personalizzare sono due:
Come intervenire sulle variabili del file jsi-contenitore-head.js ?
Dobbiamo andare a personalizzare le variabili che troviamo all'inizio del codice. Vediamole una per una:
var ricarica_pag=0;
// 0 per mantenere fissa la struttura, 1 per ricaricare la struttura;
Con questa variabile possiamo scegliere come far lavorare JSI: in modalità asincrona (0) cioè mantenendo fissa la struttura e aggiornando solo la parte corrispondente alla pagina inclusa come se fosse un frameset, oppure in modalità reload (1) cioè ricaricando ogni volta la struttura della pagina insieme ai contenuti.

Se scegliamo var ricarica_pag=0;, questa impostazione sarà quella di default ma potrà essere modificata in specifiche situazioni sfruttando una variabile passata con i link; se scegliamo var ricarica_pag=1;, tutto il sito lavorerà solo in modalità reload indipendentemente dalle variabili passate con i link.
var iload=0;
// 0 se c'è l'acceleratore in tutte pagine incluse, 1 se non c'è mai o se c'è solo in alcune;
Anche questa variabile, legata alla presenza del richiamo a jsi-pagine-body-accelera.js nelle pagine incluse, condiziona il funzionamento di JSI in modalità asincrona (0) oppure in modalità reload (1).

Questa variabile è stata inserita per facilitare il lavoro di chi utilizza JSI per modificare gradualmente il proprio sito precedentemente fatto con i frames: se non è ancora stato inserito il richiamo al file jsi-pagine-body-accelera.js in tutte le pagine da includere conviene mettere var iload=1;, se invece tutte le pagine hanno l'acceleratore si deve mettere var iload=0;.
Anche quando l'acceleratore è presente solo in alcune pagine è possibile lasciare var iload=0; e poi intervenire su una variabile passata con i link che richiamano le pagine, che assumerà valore 0 oppure 1 a seconda che queste abbiano o meno l'acceleratore: si tratta di una soluzione tecnicamente più fine, ma un po' più complessa da gestire.
Chi usa JSI per costruire un sito da zero facilmente imposterà il codice delle pagine incluse in modo che tutte abbiano il richiamo all'acceleratore, e quindi userà var iload=0;.

Ai fini della modalità di funzionamento, occorre ricordare che l'acceleratore - oltre ad accelerare l'apertura delle pagine incluse - è indispensabile se si vuole che JSI lavori in modalità asincrona. Quindi, se usiamo var iload=0; JSI potrà lavorare sia in modalità asincrona che in modalità reload; se invece usiamo var iload=1; tutto il sito lavorerà solo in modalità reload, indipendentemente dalle altre impostazioni.
Vediamo in pratica le due possibilità:
  • lasciando var iload=0; è possibile visualizzare le pagine che hanno già l'acceleratore usando la modalità asincrona (nei link che richiamano queste pagine useremo - come vedremo tra poco - this.href,0,0); le pagine senza acceleratore verranno invece visualizzate usando la modalità reload grazie alla diversa impostazone del link che le richiamano (in questo caso useremo this.href,1,0)
  • mettendo var iload=1; tutto il sito lavorerà in modalità reload e tutti i link potranno essere impostatati da subito con this.href,0,0: appena aggiunto l'acceleratore a tutte le pagine sarà sufficiente cambiare var iload=1; in var iload=0; e - senza più dover mettere mano ai link - tutto passerà al funzionamento in modalità asincrona.
var pag_iniziale='home.htm';
// la prima pagina inclusa;
Qui indichiamo la pagina che verrà inclusa di default all'apertura della pagina contenitore: di solito corrisponde ai contenuti della homepage del sito.
var attesa='<p>Attendere, apertura della pagina in corso...<\/p>';
// messaggio di attesa;
Questo è il messaggio che compare in attesa del caricamento di una pagina. In alcuni casi, se il caricamento è molto veloce, è quasi superfluo, in altri casi invece è importante per far capire al navigatore che sta succedendo qualcosa.

Se non vogliamo il messaggio di attesa è semplicissimo:
var attesa='';
oppure:
var attesa='<p> <\/p>';
Consiglio ai meno esperti di mantenere i tag del paragrafo, sarà più facile inserire nuovamente il messaggio se cambiano idea.

E' semplice personalizzare la grafica del messaggio di attesa (ad esempio con una classe), oppure inserire un'immagine con una barra di progressione; occorre solo prestare attenzione alla corretta sintassi (stiamo scrivendo dentro ad uno script, quindi occorrono i dovuti caratteri di escape) e al percorso dell'immagine (se relativo, si riferisce alla posizione della pagina contenitore). Facciamo due esempi per i meno esperti:
var attesa='<p class=\"attesa\">Attendere, apertura della pagina in corso...<\/p>';
oppure:
var attesa='<img src=\"immagini\/attesa.gif\" height=\"20\" width=\"100\" alt=\"Attendere, apertura della pagina in corso...\" \/>';
var deepdir=3;
// numero di sotto-cartelle del sito;
Questa versione di JSI è indipendente dalla struttura e consente di organizzare il sito utilizzando liberamente cartelle e sotto-cartelle. Per fare questo, con la variabile deepdir dobbiamo indicare la profondità del sito cioè il numero di cartelle utilizzate una dentro l'altra.

Per capire l'utilità di questa variabile, occorre ricordare un problema che si ha comunemente con le inclusioni. Una pagina contenuta in una sotto-cartella potrebbe avere dei link relativi tipo <a href="../index.html">: se questi link venissero trascritti così come sono quando la pagina viene inclusa nella pagina contenitore che si trova ad un livello superiore, i link risulterebbero sbagliati. Al tempo stesso, prevedere già i percorsi adatti alla pagina contenitore renderebbe i link della pagina da includere inutilizzabili quando questa viene visualizzata isolata (ad esempio se javascript è disattivo). Lo stesso ragionamento si applica anche ad altri tipi di percorsi, ad esempio quelli utilizzati per richiamare le immagini.
Con JSI possiamo invece scrivere i percorsi relativi considerando l'effettiva posizione delle pagine nelle cartelle e sotto-cartelle del sito: sarà lo script che andrà ad adattarli quando le pagine vengono inserite nella pagina contenitore.

Durante la fase di inclusione JSI scorre tutte le stringhe dei percorsi relativi e di volta in volta li corregge ricostruendo il percorso assoluto (più o meno come fanno anche i browser). Visto che per ogni sotto-livello (quindi per ogni ../) JSI deve ripercorrere la stringa, ho pensato di limitare l'impiego di risorse e accelerare le operazioni di inclusione limitando il lavoro di JSI al numero effettivamente necessario di controlli.
Se ad esempio c'è solo una cartella (o meglio se ci sono solo collegamenti con un ../) è inutile far verificare allo script se sono presenti tre ../ (quindi ../../../) che in genere corrispondono anche a tre cartelle una dentro l'altra. Nel caso invece che ci siano ben quattro sotto-livelli, mettendo var deepdir=4; lo script andrà a correggere anche i link così: ../../../../index.html.

Se si mette un numero più alto del necessario si rallenta solo un pochino lo script, mentre bisogna fare attenzione a non mettere un numero più basso perché alcuni link non sarebbero corretti.
var struttura=new Array();
struttura[0]='index.html';
   // inserire il nome della pagina contenitore;
struttura[1]=struttura[0];
struttura[2]='foto.htm';      // secondo tipo di pagina contenitore;
struttura[3]='altro.htm';    // terzo tipo di pagina contenitore;
JSI prevede la possibilità di richiamare più strutture contenitore diverse. In una situazione reale potremmo ad esempio avere una pagina con la struttura generale del sito e poi una pagina di una sotto-sezione (ad esempio per le foto) che ha i menù diversi. Creando un array per le strutture c'è dunque la possibilità di chiamare direttamente tramite i link una nuova struttura diversa e contemporaneamente caricare al suo interno una qualsiasi altra pagina.

E' possibile aggiungere altre strutture all'array in questo modo:
struttura[4]='quarta-struttura.htm';
struttura[5]='quinta-struttura.htm';

e così via.
Come intervenire sulle variabili del file jsi-pagine-head-ricomponi.js ?
Dobbiamo andare a personalizzare una sola variabile. Eccola:
self.location.href='index.html?load=1&pag='...
// sostituire a index.html il nome della pagina contenitore
Questa volta è semplice: si tratta di modificare il nome della pagina contenitore nella quale si ricompongono le pagine incluse, se è diverso da index.html.

3. Le variabili nei link

Come devono essere impostate le variabili nei link?
Nei link presenti nella pagina contenitore e nelle pagine incluse possiamo usare una funzione che ci permette di personalizzare ulteriormente il funzionamento dello script, in modo diverso e specifico per ogni singola pagina.
<a href="pagina.htm" onclick="return vai(this.href,0,0);">pagina</a>
oppure
<a href="pagina.htm" onclick="return vai(this.href,1,0);">pagina</a>
oppure
<a href="pagina.htm" onclick="return vai(this.href,0,2);">pagina</a>
eccetera...
Le variabili passate con i link sono tre: this.href e due variabili numeriche.

La prima variabile è this.href e non necessita di personalizzazione: dice allo script di applicare le successive indicazioni alla pagina richiamata in quel link.

La variabile centrale ha molte analogie con la variabile var iload vista precedentemente: condiziona il funzionamento di JSI ed è legata alla presenza dello script jsi-pagine-body-accelera.js nella pagina da includere. Può assumere valore 0 oppure 1:
  • se impostata a 0 la pagina verrà aperta secondo la modalità definita nel file jsi-contenitore-head.js
  • se impostata a 1 la pagina verrà aperta in modalità reload.
Questa variabile dovrebbe essere sempre zero; l'unico caso in cui è da impostare a 1 è quando lo script viene utilizzato in modalità asincrona (quindi con var ricarica_pag=0; e var iload=0;) ma in alcune pagine - magari perché non ancora convertite - non c'è il richiamo a jsi-pagine-body-accelera.js: impostando la variabile centrale a 1 nei link che richiamano queste pagine lo script funziona correttamente anche in assenza dell'acceleratore.

La terza variabile serve per richiamare le strutture alternative inserite nell'array iniziale:
  • se impostata a 0 la pagina inclusa si apre nella pagina contenitore iniziale
  • se impostata a 1 la pagina inclusa si apre nella pagina contenitore iniziale, ma forzando l'apertura in modalità reload
    Facciamo un esempio: potremmo volere come regola generale di funzionamento del sito che la pagina contenitore sia sempre fissa (ad esempio per non far interrompere la musica), ma per alcuni link per qualche motivo potremmo volere che la pagina si ricarichi: in questo caso useremo 1 al posto di 0 nell'ultimo parametro.
  • se ci sono altre strutture contenitore è possibile specificare il numero corrispondente per far includere la pagina richiamata dal link in quella struttura.
    Ad esempio, se per le foto è prevista un'altra struttura (definita nell'array iniziale con struttura[2]='foto.htm';), mettendo 2 nell'ultimo parametro la pagina richiamata nel link si aprirà inclusa nella struttura delle foto.
In caso di dubbio, consiglio di impostare le variabili a this.href,0,0.
Cosa succede se si scrivono i link normalmente, senza l'evento onclick con le variabili da personalizzare?
Se nelle pagine incluse è stato messo il richiamo al file jsi-pagine-head-ricomponi.js le pagine si aprono all'interno della pagina contenitore: il link infatti chiama la pagina, che a sua volta riconosce di dover essere incorporata nella pagina contenitore.
Se non c'è il richiamo allo script per ricomporre le pagine, queste si aprono isolate.

La funzione richiamata dall'evento onclick non è strettamente necessaria per lo script (infatti nelle versioni precedenti non l'avevo implementata), ma permette di sfruttare lo script in tutte le sue potenzialità: ogni pagina e ogni link possono comportarsi diversamente semplicemente cambiando uno 0 in 1.

4. Le combinazioni delle variabili (con tabelle riassuntive)

Come si combinano tra loro le variabili nel link e nello script principale? Quale prevale?
Per capire quale effetto si ottiene dalla combinazione delle diverse variabili di JSI, dobbiamo tenere a mente come lavora lo script. Una volta che ci troviamo dentro a una qualsiasi pagina di un sito realizzato con JSI, il punto di partenza per l'ulteriore funzionamento è rappresentato dai link. Questi danno a JSI la prima indicazione di come comportarsi per aprire la pagina che richiamano: Inoltre, può essere facilmente ricordata un'altra semplice regola:
Possiamo riassumere le combinazioni delle variabili?
Per avere una visione d'insieme del funzionamento dei JSI con tutte le combinazioni possibili, è disponibile una serie di tabelle riassuntive.

5. Il tag <noscript> </noscript>

Come deve essere utilizzato il tag <noscript> </noscript> ?
Per assicurare la navigabilità di base (senza perdita di contenuti) quando javascript è disattivo, può essere utile inserire qualcosa nei tag <noscript> </noscript> dei richiami in body:

Lo voglio... così!
ovvero: istruzioni brevi per webmaster di poche parole

Voglio un sito che lavori tutto in modalità asincrona!
Ecco, in breve, le istruzioni per configurare JSI in modalità asincrona:
Voglio un sito che lavori tutto in modalità reload!
Ecco, in breve, le istruzioni per configurare JSI in modalità reload:
Voglio un sito che lavori in parte in modalità asincrona e in parte in modalità reload!
Ecco, in breve, le istruzioni per configurare JSI in modalità mista:
Voglio un sito in cui le pagine incluse si aprono sempre nella loro cornice, anche quando richiamate con un link diretto!
Occorre una sola cosa:

Consigli e suggerimenti per il webmaster

Come avviene la validazione del codice (x)html delle pagine?
Il validatore del W3C (http://validator.w3.org) legge il codice (x)html presente nella pagina senza l'intervento di JSI. La pagina contenitore sarà dunque sottoposta a validazione per la sua struttura generale, mentre i contenuti verranno validati analizzando le singole pagine incluse. Il modo più semplice è utilizzare l'interfaccia del W3C e inserire manualmente l'URL specifico di ciascuna pagina.
Chi utilizza Opera o Firefox ha l'abitudine di inviare la pagina al validatore usando un'apposita opzione del browser. Con javascript attivo in realtà invierà ogni volta al validatore la pagina contenitore, nella quale si è ricomposta la pagina che vediamo a video: occorrerà pertanto effettuare questa operazione disattivando temporaneamente javascript.

Similmente, per chi vuole esporre i "bollini" di validazione in tutte le pagine occorre un'accortezza. Il codice proposto in automatico dal validatore fa riferimento al referrer (in questo frammento: <a href="http://validator.w3.org/check?uri=referer">) e nei siti costruiti con JSI non va bene, perché il referrer sarà normalmente la pagina contenitore. Occorrerà dunque modificare manualmente il codice inserendo dopo check?uri= il percorso assoluto della pagina.
Qualche consiglio per usare i fogli di stile nei siti realizzati con JSI?
In base alle esigenze del webmaster, è possibile usare lo stesso foglio di stile per la pagina contenitore e per le pagine incluse, oppure usarne due diversi. In questo secondo caso, il css dominante è quello della pagina contenitore, che si applica sia alla struttura che ai contenuti inclusi da JSI; l'intervento del css della pagina inclusa è apprezzabile solo in caso di navigazione con javascript disattivo, quando la pagina si apre non inclusa oppure è visualizzata nell'iframe.

Conviene ricordare che nelle pagine realizzate con JSI esistono due id che possono essere sfruttati nel foglio di stile:
Alcuni script per le statistiche di accesso al sito devono essere messi prima del tag di chiusura </body>, e altrettanto è richiesto per il richiamo di jsi-pagine-body-accelera.js: in che ordine devono essere messi?
Nelle pagine incluse è preferibile mettere prima lo script con il richiamo a jsi-pagine-body-accelera.js, poi lo script per il contatore delle visite e infine il tag di chiusura </body>.