Non basta costruire un sito internet: bisogna infatti prevedere le correzioni, le variazioni, gli aggiornamenti - che senz'altro ci saranno, se vogliamo mantenere il nostro web-site vivo e attivo. Insomma bisogna prevedere delle normali operazioni per la gestione corretta del sito. È utile allora "smembrare" le pagine in diversi "pezzi comuni", in modo che le modifiche apportate a un file abbiano effetto su tutto il contenuto del sito.
Perché usare le inclusioni
Molto spesso in un sito internet ben costruito ci sono diversi elementi ricorrenti, che danno al sito stesso un aspetto organico e ben strutturato.
Infatti se inseriamo in ognuna delle nostre pagine un logo ben riconoscibile, le barre e i menu di navigazione, alcuni elementi grafici costanti, otteniamo un duplice vantaggio: da un lato, attraverso la ripetizione di elementi noti, diamo al sito una certa coerenza e facciamo capire al visitatore che si trova all'interno di un medesimo contesto; d'altra parte, grazie alle barre di navigazione, forniamo al visitatore uno strumento prezioso per passare senza fatica da una sezione all'altra, e dunque miglioriamo l'usabilità del nostro sito web.
Anche se gli elementi ricorrenti sono una componente da tenere presente nella progettazione del sito, purtroppo a livello tecnico possono rivelarsi scomodi se non vengono presi in considerazione alcuni accorgimenti.
Infatti riportare lo stesso elemento in tutte le pagine del sito può diventare un grosso svantaggio nel caso in cui non vengano prese determinate precauzioni: ad esempio, nel caso in cui io abbia un menu e voglia eliminarle una voce (perché una sezione del mio sito non esiste più) mi vedo costretto ad aprire tutti i files che contengono il menu, e ripulirli uno per uno dal codice che corrisponde a quella voce.
Se questo procedimento è sostenibile per siti molto piccoli, in siti medio-grandi è decisamente scomodo e richiede un tempo notevole: sia per le correzioni, sia per il download e l'upload dei file.
Molti webmaster alle prime armi risolvono il problema utilizzando una struttura a frames e inserendo gli elementi comuni in frames separati. L'esempio classico è quello di un frame in alto con il logo, un frame a sinistra con il menu, e un frame a destra con la pagina. Ma i frames hanno degli svantaggi, dovuti ai problemi con i motori di ricerca.
Non è raro infatti il caso in cui un sito a frames venga "indicizzato" male, così a seguito di una ricerca, anziché l'URL principale del sito, viene indicato dal motore di ricerca l'URL di una pagina interna al frameset, del tutto avulsa da ogni contestoe magari priva di menu. In questo modo viene seriamente minata la navigazione all'interno del sito mededesimo.
Comunque se vi è già successo che un motore di ricerca vi catturi un URL interno al sito, al posto della URL principale, potete cercare di ricostruire il frameset attraverso JavaScript.
Vediamo allora quali sono i metodi per includere gli elementi comuni in files esterni alla pagina, ma che dalla pagina vengono richiamati: in questo modo gli elementi ricorrenti vengono scritti una sola volta (in files separati), ma vengono poi inclusi nella pagina attraverso una sintassi particolare.
Tra tutti metodi più o meno ortodossi per includere files comuni, un posto privilegiato lo occupano le SSI (Server Side Includes): le "famigerate" inclusioni lato-server.
Dal punto di vista del webmaster si tratta di "scorporare" il codice comune a più pagine e di inserirlo in un file completamente nuovo, che non contenga nient'altro che il codice medesimo. Nel nuovo file non è necessario intestare il documento come HTML (<html> <head> <body>, eccetera): infatti bisogna tener presente che il file che stiamo creando verrà inserito in un altro file che l'intestazione già ce l'ha.
Da notare anche che i percorsi dei link e delle immagini presenti nella pagina che viene inclusa di norma fanno riferimento alla pagina principale (quella in cui verrano a trovarsi una volta avvenuta l'inclusione), e non alla pagina in cui materialmente si trovano.
Una volta creato il file comune a tutte le pagine, non ci resta che scrivere nei files che lo includono la direttiva che indica che in quel determinato punto della pagina deve essere effettuata un'inclusione.
Purtroppo la sintassi non è unica, ma varia a seconda della piattaforma utilizzata, delle estensioni che sono presenti sul server, e dei linguaggi di scripting che abbiamo a disposizione. I meccanismo di inclusione sono però riconducibili a una casistica limitata. Vediamone alcuni.
Come avviene il procedimento di inclusione
L'utente del sito vede una pagina in codice HTML standard, né più né meno, e non ha modo di accorgersi dell'inclusione. Infatti il meccanismo di inclusione avviene "lato-server", cioè prima ancora che la pagina venga "spedita" al computer client che ne fa richiesta: prima di "servire" la pagina all'utente, il web server processa il file e riconosce la direttiva che indica l'inclusione; di conseguenza "prende" il file indicato nella sintassi, e lo inserisce nella pagina. Insomma è un po' come un copia-incolla effettuato dal web server.
Lo svantaggio di questo meccanismo, come abbiamo visto, è dato dal fatto che la sintassi non è unica, ma dipende dal tipo piattaforma e di web server che si sta utilizzando. La sintassi utilizzata con il web server Apache (web server molto utilizzato in ambiente Unix) infatti è leggermente diversa da quella utilizzata da IIS (Internet Information Server di Microsoft, che viene installato di norma su piattaforme Windows NT / 2000).
Le cose cambiano (nel senso che si hanno più strumenti a nostra disposizione) se si ha la possibilità di utilizzare le estensioni di FrontPage 2000, oppure se si ha la possibilità di utilizzare linguaggi di scripting lato-server, come asp, php o jsp.
In pratica prima di effettuare un'operazione di inclusione, bisogna conoscere quali siano le caratteristiche della macchina su cui metteremo il sito. Per lo più basta leggere le specifiche dello spazio che stiamo utilizzando e capire se si tratta di un server NT (che utilizza il sistema operativo Windows NT o 2000) o Unix-compatibile (che utilizza quindi un sistema operativo della famiglia Unix / Linux).
Vediamo nel dettaglio i procedimenti di inclusione più diffusi.
Includere con Windows NT e asp
Se ci troviamo in presenza di una piattaforma che utilizza come sistema operativo Windows NT o Windows 2000 e come web server IIS (Internet Information Server) di Microsoft, e che quindi può utilizzare le pagine asp(active server pages), possiamo allora utilizzare una sintassi di inclusione di questo tipo:
<!--#include file="pecorso/mioFile.inc"-->
Con questa sintassi possiamo indicare al web server un percorso relativo.
In questo modo la direttiva viene passata al pre-processore e la sintassi inclusa all'interno della pagina.
Il file principale che effettua l'inclusione può avere qualsiasi tipo di estensione consentita (html, htm, asp), così come il file che viene incluso (htm, html, asp, inc, txt). Anche se è raccomandabile - nel caso in cui il file incluso non contenga codice asp, ma solo "puro" HTML - di dare al file estensione ".inc", in modo da riconoscere i files inclusi dagli altri.
IIS (a differenza di Apache) è in grado di includere delle pagine asp che contengano del codice da eseguire. In questo caso però, per un corretto funzionamento, bisogna tener sempre presente che viene prima letto tutto il contenuto di eventuali includes, e quindi eseguito il codice ASP presente.
Esiste anche un'altra direttiva per effettuare il comando di inclusione:
<!--#include virtual="percorso/mioFile.inc"-->
La parola virtual in questo caso fa riferimento a una directory che sul file system del server si trova fisicamente in un determinato posto, ma che è impostata come se appartenesse al web-site in questione in un determinato percorso. È possibile configurare una directory virtuale soltanto se si ha accesso alle impostazioni di IIS. Nella maggior parte dei casi è sufficiente l'utilizzo di "include file".
Includere con Unix e Apache
Apache utilizza due comandi per effettuare le SSI (Server Side Includes, cioè le inclusioni lato-server).
Nel file che effettua l'inclusione, nel punto in cui l'inclusione avviene dobbiamo scrivere la sintassi:
<!--#include file="mioFile.html" -->
Questa direttiva fa però riferimento all'inclusione di un file che si trova nella stessa directory rispetto alla pagina principale. Non è quindi possibile utilizzare un'indicazione di percorso.
Per utilizzare l'inclusione di un file tramite un percorso (assoluto o relativo) bisogna servirsi di un'altra direttiva:
<!--#include virtual="percorso/mioFile.html " -->
Da notare che con Apache di norma il file che include deve aver estensione shtml (cioè "server-parsed HTML"), mentre il file che viene incluso può avere qualsiasi estensione: è un particolare importante, perché se non viene attribuita al file che include un'estensione "shtml" l'inclusione non avviene.
Si tratta di un metodo di Apache per "snellire" il lavoro del web server: infatti soltanto i files con estensione "shtml" vengono processati per trovare ed effettuare le direttive di inclusione. I files "html" e "htm" invece vengono "serviti" al client così come sono, senza essere processati, dal momento che Apache in questo modo sa a priori che non contengono inclusioni.
Se la norma è quella di attribuire estensione "shtml" ai files che includono, l'amministratore del web server può però - se lo ritiene utile - cambiare quest'opzione e far sì che il web server processi anche file con estensioni differenti alla ricerca di inclusioni (è sufficiente che configuri il file httpd.conf di Apache aggiungendo - ad esempio - la riga "AddHandler server-parsed html" al posto di "AddHandler server-parsed shtml"). In questo modo però si appesantisce il web server, perché ogni pagina "html" viene esaminata alla ricerca dei comandi di inclusione.
Si tratta comunque di un'eccezione alla regola: di norma su Apache, soltanto se attribuite al file estensione "shtml" l'inclusione avrà luogo.
Il file che invece viene incluso può avere qualsiasi tipo di estensione consentita ("html","htm","txt","inc"). È da notare però che - a differenza di IIS - le inclusioni di Apache devono contenere solo codice HTML, non è possibile cioè includere codice (in linguaggio di scripting lato-server) da eseguire.
Le inclusioni lato-client
È bene sottolineare che esistono due tipi di inclusione: quelle lato-server (di cui finora abbiamo parlato) e quelle lato-client. Nel primo caso si occuperà il server di "mettere insieme i pezzi" restituendo un contesto ordinato; nel secondo caso invece i files vengono inviati separatamente alla macchina locale (il client) e sarà il browser a ricostruire la pagina in un contesto dotato di senso.
Ad esempio, quando includiamo nella pagina un javascript che si trova in un file esterno, tramite la sintassi:
<script language="javaScript" src="mieiJs/mioScript.js"></script>
o quando includiamo la definizione degli stili in un altro file con estensione css e lo includiamo nella HEAD tramite la sintassi:
<link rel=stylesheet href="mieiCss/mieiStili.css" type=text/css>
anche in questi casi stiamo effettuando delle inclusioni, che vengono però analizzate e risolte dal browser sul nostro computer locale.
In linea di massima è più comodo avere a parte, in file esterni, la definizione degli stili e quei javascript che ricorrono in tutte le pagine: in questo modo in fatti è facilissimo apportare delle correzioni, e basta una semplice modifica a un file per cambiare i caratteri su tutto un sito.
Quando ai metodi di inclusione lato-server che abbiamo esaminato finora: c'è da dire che non a tutti piacciono, specialmente a quei webmaster che siano alle prime armi, perché il meccanismo di inclusione non è così intuitivo; i files sono infatti separati e vengono ricostruiti dal server; di conseguenza sul nostro computer locale non possiamo vedere la pagina ricostruita nella sua interezza. Proprio per questo i webmaster alle prime armi preferiscono vedere quello che stanno facendo anche in locale e utilizzare le inclusioni tramite JavaScript.
Includere codice tramite JavaScript
Vediamo allora come sfruttare le inclusioni che vengono eseguite dal browser, per includere gli elementi comuni a più pagine.
È opportuno ricordare, però, che il codice che prenderemo in esame non verrà visualizzato, se il visitatore del sito sceglie come opzione del browser di non eseguire i javascript.
Vediamo ora come includere una barra di navigazione in più pagine utilizzano javascript.
Per prima cosa dobbiamo creare una stringa, vale a dire una variabile costituita da una sequenza di numeri, lettere e caratteri vari.
Nel convertire il codice HTML in una stringa javascript dobbiamo tenere presente che ogni stringa incomincia e si conclude con le virgolette e che non posso andare a capo per indicare il contenuto della variabile.
Prendiamo in esame queste tre righe di codice HTML:
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#FF7800" width="80%">
<tr align="center">
<td><img src="shim.gif" width="5" height="20"></td>
Per creare una stringa con javascript è sufficiente inizializzarla con il suo contenuto. Ad esempio:
barra="ciao";
Dove "barra" è il nome della variabile e "ciao" il suo contenuto.
Se scrivessimo in questo modo la prima riga:
barra="<table cellpadding="0" cellspacing="0" border="0" bgcolor="#FF7800" width="80%">";
incorreremo in un errore. È infatti evidente che nel codice HTML compaiono delle virgolette, che causano la chiusura della variabile dove noi non vorremmo, e che di conseguenza compromettono tutto lo script. Infatti la corretta chiusura dovrebbe essere a fine riga.
Ci sono due soluzioni:
- racchiudere la stringa tra virgolette doppie e trasformare le virgolette che compaiono all'interno del codice HTML in virgolette semplici. Così:
barra="<table cellpadding='0' cellspacing='0' border='0' bgcolor='#FF7800' width='80%'>";
- Oppure far precedere ogni virgoletta inserita all'interno della stringa (che non indichi quindi la chiusura) dal "back-slash": è il cosiddetto carattere di "escape", che fa sì che javascript "non veda" il carattere in questione e non le riconosca quindi come virgolette di chiusura. Così:
barra="<table cellpadding="0" cellspacing="0" border="0" bgcolor="#FF7800" width="80%">";
Alcuni webmaster si limitano a non inserire alcun tipo di virgolette all'interno della stringa, tanto l'HTML viene interpretato lo stesso. Così:
barra="<table cellpadding=0 cellspacing=0 border=0 bgcolor=#FF7800 width=80%>";
Ma se è vero che il codice dell'ultimo esempio viene corretamente interpretato dai browser delle ultime generazioni, la mancanza di virgolette potrebbe creare qualche problema coi browser più datati. È preferibile, dunque, quantomeno utilizzare le virgolette ad apice singolo.
L'indentazione: sommare le stringhe
Rimane un altro problema, quello cioè di mantenere il codice in ordine. Infatti - come dicevamo - gli "a capo" non sono ammessi. E dunque avremmo una sola riga lunghissima con tutto il codice. Così:
barra="<table cellpadding="0" cellspacing="0" border="0" bgcolor="#FF7800" width="80%">"<tr align="center"><td><img src="shim.gif" width="5" height="20"></td>";
Per mantenere un po' d'ordine nel codice (per mantenere cioè quella che normalmente si chiama "indentazione"), ricorriamo a uno escamotage.
Infatti sommando ogni volta la variabile a se stessa, abbiamo modo di utilizzare correttamente gli a capo. Si tratta insomma di un concatenamento di variabili. Da notare il ";" a fine riga che indica la chiusura dell'istruzione. Così:
barra="<table cellpadding="0" cellspacing="0" border="0" bgcolor="#FF7800" width="80%">";
barra = barra + "<tr align="center">";
barra = barra + "<td><img src="shim.gif" width="5" height="20"></td>";
Un altro valido (e più semplice) metodo per mantenere l'indentazione del codice è quello di utilizzare la somma di stringhe, ma senza la necessità di sommare la variabile a se stessa e andando a capo in corrispondenza dell'operatore di somma (il "+"). Così:
barra="<table cellpadding="0" cellspacing="0" border="0" bgcolor="#FF7800" width="80%">" + <span style="color:#ba1b2a">// queste prime due righe <b>non vanno a capo</b></span>
"<tr align="center">" +
"<td>" +
"<img src="shim.gif" width="5" height="20" />" +
"</td>";
Come si può vedere nell'esempio ogni riga si apre e si chiude con le virgolette (il che equivale a dire che ogni riga è una stringa) e a fine riga troviamo l'operatore che ci consente di concatenere le stringhe(il "+"). Inoltre si può notare che l'inizializzazione della variabile incomincia all'inizio del codice (con la sintassi barra=) e si conclude con il punto e virgola.
Questo metodo ci consente tra l'altro di utilizzare anche la spaziatura a inizio riga per mantenere il codice in ordine.
Inseriamo il file
A questo punto prendiamo il codice che abbiamo convertito e lo salviamo come file "nomeFile.js". Non c'è bisogno di intestare il file in alcun modo (non è necessario cioè aprire il tag <script> che invece verrà utilizzato nel documento principale).
Nella head del documento principale inseriamo poi il codice:
<script language="javaScript" src="percorso/nomeFile.js"></script>
Che fa riferimento al nostro file javaScript (attenzione a inserire esattamente il percorso del file).
Infine individuiamo il punto in cui vogliamo inserire la barra e lì scriviamo:
<script language="javaScript">
document.write(barra);
</script>
<noscript>
<strong>Per visualizzare correttamente questa pagina c necessario avere javascript abilitato.</strong>
</noscript>
In pratica chiediamo a javascript di scrivere il contenuto della variabile "barra" in quel determinato punto.
L'esempio che abbiamo preso in considerazione ci permette di vedere le cose sul nostro computer di casa, già come si vedranno in internet. Ed è particolarmente utile quando non possiamo conoscere a priori quale sia la piattaforma che ospiterà il nostro sito e quali caratteristiche abbia.
Purtroppo questa tecnica ha un grosso svantaggio: basta che il visitatore abbia javascript disabilitato, perché non sia in grado di visualizzare più niente.
Problematiche delle inclusioni JavaScript
Le inclusioni tramite JavaScript possono essere utili anche per un altro motivo. Infatti dal momento che i vari file che compongono una pagina vengono scaricati nella cache del browser, il file ".js" sarà già presente nei "file temporanei di Internet" (se si usa Internet Explorer) senza bisogno di essere ulteriormente ricaricato. Ciò ovviamente è sinonimo di un aumento di velocità nella visualizzazione delle pagine.
Ci sono però delle controindicazioni che è bene tenere presente, se si intendono usare le inclusioni Javascript. I motori di ricerca (che per molti versi possono essere paragonati a browser testuali, particolarmente obsoleti) non sono in grado di leggere o interpretare i javascript. Dunque tutto il contenuto presente nel javascript esterno verrà ignorato: non soltanto il testo, ma non saranno "visti" neanche eventuali link, con la conseguente impossibilità per lo spider di navigare all'interno del sito ai fini dell'indicizzazione.
Se quello che volete è un buon posizionamento nei motori di ricerca, insomma, vi conviene evitare accuratamente le inclusioni Javascript e preferire le inclusioni lato-server: in questo caso infatti il motore di ricerca ha la possibilità di analizzare comodamente tutto il contenuto. Se è invece la velocità di visualizzazione delle pagine che cercate le inclusioni javascript fanno al caso vostro.
Le inclusioni con le estensioni di FrontPage 2000
Vediamo ora come utilizzare degli "editor visuali" per includere i files.
Le inclusioni di FrontPage 2000 possono essere a tutti gli effetti considerati delle "inclusioni lato-server", dal momento che è il server di FrontPage (che deve essere installato dal gestore dello spazio web) che processa ed esegue la sintassi del l'inclusione.
Se sul nostro spazio web sono abilitate le estensioni di FrontPage 2000 (cfr. Lezione «Le estensioni Server di Front Page»), possiamo utilizzare il meccanismo di inclusione proprio di FrontPage, che è molto semplice ed intuitivo. È bene però tenere presente che un'inclusione effettuata con questa tecnica non viene visualizzata da Netscape 4 (viene invece visualizzata da tutti gli altri browser: Netscape 6, Opera 5, ovviamente Internet Explorer 5 e successivi).
Dopo aver "impostato il web" (cfr. Lezione «Creare un sito web») sul nostro computer con la solita procedura di FrontPage (se "non impostiamo un web" il meccanismo che esaminiamo non può essere utilizzato, perché le voci in questione non sono attive) usiamo i comandi: Inserisci > componente > inclusione pagina.
Frontpage ci consente di sfogliare i files del nostro computer e di inserire la pagina che si vuole includere. Nella finestra di visualizzazione del documento che stiamo creando il file incluso è stato inserito in modo visuale e non c'è traccia dell'inclusione. Ma se guardiamo il codice HTML notiamo che la sintassi che Frontpage utilizza per includere è la seguente:
<!--webbot bot="Include" U-Include="mioPercorso/mioFile.htm" TAG="BODY" -->
Se invece apriamo la pagina da internet con il nostro browser - dopo averla messa sul server - vediamo che il file è stato inserito all'interno del codice.
La sintassi che abbiamo visto è proprietaria di FrontPage, quindi - come già detto, ma è bene ripeterlo - è necessario verificare che sul server siano presenti le estensioni di FrontPage, altrimenti non funzionerà nulla.
Inoltre, poiché FrontPage utilizza un sistema complesso per gestire il web site (alcuni files infatti vengono ripetuti all'interno di directories caratterizzate dall'estensione "_vti_cnf"), per effettuare il procedimento di ftp, si raccomanda di utilizzare la procedura di pubblicazione del sito.
In caso contrario l'inclusione potrebbe non avvenire correttamente.
I "modelli" di Dreamweaver
Non si tratta in questo caso di inclusioni, ma di una funzionalità del programma che ci permette di lavorare su un modello di pagina, che - una volta variato - apporta le modifiche a tutte le pagine che da questo modello dipendono.
Poiché anche in questo caso si tratta di un'opzione che ci consente di gestire in una sola volta molti files comuni, vediamo in breve questa funzionalità di Dreamweaver.
Non ci sono in questo caso files inclusi (né lato-client, né lato-server): le pagine che manderemo sul server sono a tutti gli effetti "pagine complete" dall'inizio alla fine. Il "template" ("modello") è infatti una pagina mastro che permette di "compilare" una serie di pagine simili sul computer locale.
Dopo aver impaginato una pagina si tratta di salvarla come template: è un file con estensione "dwt" che contiene zone ("regions" cioè "aree") editabili e zone non editabili.
Le modifiche al template o alla pagina possono essere applicate utilizzando i comandi: Modify > Templates (Elabora > Modelli)
Le zone editabili hanno una colorazione differente dal resto della pagina e sono contrassegnate nel codice dai commenti:
<!-- #BeginEditable "nomeZona" -->
qui il codice che varia in ogni pagina, nella altre zone invece il codice comune
<!-- #EndEditable -->.
Una zona editabile si imposta con i comandi: Modify > Templates > New Editable Region (Elabora > Modelli > Nuova area modificabile) e si cancella con: Modify > Templates > Remove Editable Region (Elabora > Modelli > Rimuovi area modificabile)
Da notare che nel template si ragiona "al contrario": vengono contrassegnate le zone che sono soggette a modifiche, mentre le zone comuni non hanno alcuna demarcazione particolare. Dunque quando costruiamo un template dobbiamo creare il layout comune a tutte le pagine (che in automatico viene riconosciuto in quanto tale), e poi individuare quali sono le zone soggette a variazioni e contrassegnarle con delle etichette apposite.
Il "template" che abbiamo creato serve, in un secondo momento, per creare altre pagine (con il comando "File > New from template", cioè "File > Nuovo da modello"), da salvare normalmente come ".htm", o ".html". Successivamente ogni volta che faremo delle modifiche al "template" ci verrà chiesto se vogliamo applicare anche le modifiche alle pagine che abbiamo creato a partire dal template.
Alcune zone della pagina - se necessario - possono essere "sganciate" utilizzando la funzionalità: Modify > Templates > Detach from Template (Elabora > Modelli > Stacca dal modello)
Si tratta in ogni caso di una funzionalità del programma di semplice utilizzo, che permette di gestire con facilità le parti comuni a più pagine, ed è utile soprattutto quando non si conosca quale sia la piattaforma su cui il sito verrà poi a trovarsi. Lo svantaggio è quello di dover effettuare l'upload di tutti i files interessati alle variazioni. Mentre con le inclusioni (lato-server o lato-client) basta fare l'upload di un singolo file.
Ulteriori informazioni sui templates di Dreamweaver possono essere trovate sulla Guida a Dreamweaver.
