- Metodologie per includere pagine HTML e dinamiche -
  
TUTORIAL
 Come includere efficacemente codice HTML lato client e server

Esempio di inclusione tramite frameset

  <% 'ADV_ORGANIZER 1.0 | formato, categoria, base, altezza, unico, disposizione, voto, dove, numero,tipo,refresh,output response.write(organize_adv(0,categoria,120,600,,,7,,1,0,1,)) %>

DEFINIZIONE
Innanzitutto per "inclusioni" si intende quella tecnica (massicciamente adottata oggi in rete) che prevede l'inserimento di codice (di vario genere) all'interno di una pagina web (ma questo è solo un esempio). Esistono diversi tipi di inclusioni ma in sostanza possiamo suddividerli in due grandi gruppi: lato client (client-side) e lato server (SSI, server-side include). In questo tutorial non scenderemo nel particolare del codice ma ci limiteremo ad analizzare le "strategie" di inclusione con semplici esempi.

INCLUSIONI LATO CLIENT
Per includere un file in un altro lato client è possibile:

  1. Frame - Utilizzare dei frame, creando così una pagina HTML unicamente adibita a "cornice" delle altre pagine che, più che "incluse", si potrebbero definire "affiancate" (vedere anche l'uso dei frame); la pagina "cornice" dovrà contenere solo il frameset (da posizionare prima della tag "<BODY></BODY>"):

    <frameset rows="10%,*" border="0">
    
<frame name="nomeZero" src="directory/file_superiore.htm" marginwidth="10" 
marginheight="10" scrolling="auto" frameborder="0">
    
<frameset cols="10%,*" border="0">
    
<frame name="nomeUno" src="directory/file_sinistra.htm" marginwidth="10" 
marginheight="10" scrolling="auto" frameborder="0">
    
<frame name="nomeDue" src="directory/file_destra.htm" marginwidth="10" 
marginheight="10" scrolling="auto" frameborder="0">
    
</frameset>
    
</frameset>

  2. Iframe - Adottare il più moderno iframe, ovvero una specie di "finestra" interna ad una normalissima pagina HTML, ecco un esempio:

    <iframe name="nostroIframe" src="directory/nome_file_incluso.htm">
    
Qui è possibile inserire del testo visibile ai browser
che non sopportano questa tecnologia.
    
</iframe>

  3. SHTML - Utilizzare, se supportate dal proprio server, pagine SHTML (ovvero server-parsed HTML), uguali in tutto e per tutto a delle comuni pagine HTML se non per il fatto di poter inserire file esterni:

    <!--#include file="directory/nome_del_file.htm" -->

  4. Javascript - Implementare inclusioni JavaScript, stampando ovvero il codice (in una normalissima pagina HTML) tramite "document.write" da un file .JS esterno così richiamato:

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="directory/nome_dello_script.js"></SCRIPT>

  5. CSS - Se l'obiettivo è invece avere una grafica omogenea tramite CSS (e nient'altro) basta semplicemente mettere tutta la formattazione in un file .CSS (leggere anche i CSS (Cascading Style sheet)) e aggiungere all'interno della tag "<HEAD></HEAD>" di una comune pagina HTML:

    <link rel="STYLESHEET" href="directory/nome_del_file.css" type="text/css">

INCLUSIONI LATO SERVER
Per includere un file lato server è invece possibile:

  1. ASP - Su un server Windows che supporta ASP o ASP .NET rispettivamente:

                                    
    
        <!-- #INCLUDE FILE="directory/nome_file.asp" -->
    
      <!-- #INCLUDE FILE="directory/nome_file.aspx" -->
     

  2. PHP - Su un server Linux che supporta PHP:

                                    
    
                                <? include("nome_file.php"); ?>
    <? require("nome_file.php"); ?>
     

  3. FrontPage - Utilizzare, se supportate dal proprio server, le estensioni di FrontPage, ecco un esempio della sintassi (generata dall'editor Microsoft):

    <!-- webbot bot="Include" U-Include="directory/nome_del_file.htm" TAG="BODY" -->

  4. Dreamweaver - Una quarta via è quella proposta ad esempio da Dreamweaver, una pagina-modello (in questo caso un template con estensione .DWT) che, una volta modificato, all'interno di ben determinate aree, altera tutti gli altri file in cui quel modello è stato impostato:

    <!-- #BeginEditable "spazio_comune" -->
    
Tutto ciò che viene scritto qui comparirà
in tutte le altre aree da noi stabilite!
    
<!-- #EndEditable -->

I VANTAGGI E LE PROBLEMATICHE
Ecco i vantaggi e le problematiche elencati in una semplice tabella:

N INCLUSIONI LATO SUPPORTO PRO CONTRO
1 Frameset Client Completo (su tutti i browser più diffusi) Di semplice utilizzo offre interazione di codice lato client Problemi con i motori di ricerca - Le pagine risultano del tutto disgiunte
2 Iframe Client Su alcuni browser incompleto Molto versatile offre interazione di codice lato client Contiene come i frame una pagina esterna
3 SHTML Server Completo (se il server lo supporta) Inclusione non invasiva, ottima per file che non richiedono interazione lato server In genere non può contenere pagine con codice lato server
4 JavaScript Client Completo (su tutti i browser più famosi) Permette di includere anche file con estensioni diverse da .JS (es. .ASPX o .PHP) Ciò che contiene viene quasi ignorato dai motori - Interazione lato server può esserci ma limitata
5 CSS Client Su browser datati: incompleto o assente Con un unico file è possibile gestire forme, posizioni, colori, ecc. delle pagine Permette solo interazioni grafiche, nessuno scripting (nè lato client nè lato server)
6 ASP/PHP Server Completo (se il server supporta ASP o PHP) Permette una grande interazione: raccolta dati, personalizzazione dell'output, ecc. Funziona solo internamente a pagine dinamiche (o interpretate dal server come tali)
7 FrontPage Server Completo (se il server lo supporta) Semplice e versatile A volte soggetto a errori o alterazioni - Legato ad una tecnologia non troppo continuativa
8 Dreamweaver Offline Completo (su tutti i browser) L'inclusione avviene offline, il file che risulta è una comune pagina contenente la parte da annettere Nessuna interazione di codice lato server - Necessità di aggiornamento di tutti i file ad ogni modifica

SOLUZIONI
Non esiste un'inclusione migliore di un'altra, a seconda dei casi è necessario scegliere quella che si reputa più adatta:

  • Se ad esempio si desidera una buona posizione nei motori di ricerca sarà più conveniente un'inclusione Dreamweaver, iframe, SHTML, FrontPage o #INCLUDE (evitando di passare più di una variabile, es. "cas.aspx?id=1&user=13&numero=354&nome=cane").

  • Se il fine è invece la velocità: JavaScript, Dreamweaver, iframe o frameset.

  • Se l'obiettivo è il supporto lato client: Dreamweaver, #INCLUDE, JavaScript o SHTML.

  • Se il file da includere è indispensabile (indici, menù importanti, ecc.): Dreamweaver, frameset, SHTML o #INCLUDE.

Per quanto concerne invece i problemi dei frameset si potrebbe provare a risolverne qualcuno aggiungendo in cima al codice della pagina "cornice":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

E il codice seguente dopo il frameset:

<noframes><body>Il frameset non è visibile!</body></noframes>

Se invece si dovesse stampare del codice JavaScript in una pagina in HTML tramite una pagina asp o aspx basterebbe scrivere:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="directory/nome_dello_script.aspx"></SCRIPT>

Facendo moltissima attenzione nell'aggiungere all'interno del file aspx (o asp) la dichiarazione del tipo di contenuto, esempio:

Response.ContentType = "text/javascript"

 
<< INDIETRO