Frame, superati? – Si. Usiamo le inclusioni.
Iniziamo con dire cosa sono i frame e a cosa servono.
I frame permettono di dividere la nostra pagina web in più zone. Ogni zona caricherà una pagina al suo interno, tali pagine potranno essere legate fra di loro o anche indipendenti.
I vantaggi di questa tecnica, sono molteplici, ma un po’ obsoleti, guardiamoli nel dettaglio.
- I frame permettono di non ricaricare continuamente tutta la pagina ma solo una porzione di essa. Questo era molto utile qualche tempo fa quando la velocità delle connessioni internet era molto bassa. Un sito con i frame veniva solitamente strutturato in modo che la testata (header) e il menu laterale fossero fissi, e i link in essi presenti venissero aperti nel corpo della pagina. Un bel risparmio in termini di tempo e velocità. Questo vantaggio, pur sempre presente, è ormai irrisorio, data la disponibilità di connessioni ad alta velocità da parte di tutti gli utenti.
- Un grosso vantaggio, per i webmaster, è quello di non ripetere sempre le stesse porzioni di codice. E’ indubbiamente più semplice gestire delle pagine con poco contenuto, rispetto a delle pagine che solo a guardarle fanno venire il mal di testa. Oltre a questo, i frame ci permettono una maggior velocità in fase di modifica. Se dovessimo infatti modificare solo il contenuto del nostro menu, non dovremo andare ad aprire tutte le pagine del nostro sito. Ci basterà aprire il frame nel quale è contenuto il menu e aggiornando un unica pagina, aggiorneremo tutto il sito.
Tra gli svantaggi, invece, possiamo citare la difficoltà dei browser di indicizzare tali pagine. Una pagina con i frame risulterà infatti disgiunta perchè in effetti non esiste, se non come contenitore di altre pagine.
Di seguito, un piccolo esempio di utilizzo dei frame:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>La nostra pagina con i frame</title>
</head>
<frameset rows="*" cols="80,*" frameborder="no" border="0" framespacing="0">
<frame src="/menu.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frameset rows="80,*" frameborder="no" border="0" framespacing="0">
<frame src="/header.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frame src="/content.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>
In alto la dichiarazione del Doctype indica al parser che si tratta di una pagina che segue le direttive della XHTML 1.0 Frameset (l’ultima DTD che supporti i frame).
Successivamente andiamo a creare una struttura su un unica riga frameset rows=”*” (riga 7) ma su due colonne, cols=”80,*” (righe 7). La prima larga 80 px, la seconda che occupa tutto lo spazio rimanente della pagina, *.
Indichiamo le caratteristiche della prima colonna, richiama al suo interno la pagina menu frame src=”/menu.html”, le da un nome name=”leftFrame”, ne definisce gli attributi scrolling=”No” noresize=”noresize”, le assegna un id id=”leftFrame” e un titolo title=”leftFrame”.
Successivamente, andiamo a nidificare un altro frameset all’interno dell’altra colonna. Suddividiamo la colonna in due righe, rows=”80,*” la prima alta 80 px e la seconda che occupi il resto della pagina.
La prima riga sarà il nostro header, src=”/header.html” mentre la seconda, che a causa delle nostre indicazioni occuperà tutta la pagina tranne 80 px in alto e 80 px a sinistra, sarà il corpo della nostra pagina, nel quale inseriremo i contenuti.
I frame si possono combinare in molti modi, avremmo potuto facilmente inserire un footer alla nostra pagina o cambiare la disposizione del menu o tanto altro. Nonostante ciò i frame mantengono una struttura abbastanza rigida, pur se pregevole. Ma se volessimo inserire un frame in un punto specifico della pagina, anche senza usare la struttura con i frameset?
Ci vengono in aiuto gli IFrame (inline frames – frame in linea), che hanno un funzionamento simile ai frame (possiamo inserire nella nostra pagina, un riquadro contenente un altra pagina) ma nel contempo assai diverso. Non siamo infatti legati ad una struttura frameset, possiamo inserire il nostro IFrame in qualsiasi punto della nostra pagina, così:
<iframe src="altrapagina.html" width="350" height="150"> Contenuto alternativo per i browser che non leggono gli iframe. </iframe>
Qui abbiamo definito le dimensioni dell’IFrame, possiamo poi posizionarlo nel punto prescelto attraverso i CSS. I metodi sono molteplici, ne cito solo uno:
<iframe src="altrapagina.html" width="350" height="150" style="position: relative; top: 50p; left: 50px"> Contenuto alternativo per i browser che non leggono gli iframe. </iframe>
Come vedete ho assegnato un posizionamento relativo all’iframe, che si posizionerà a 50px dall’alto e a 50px da sinistra rispetto al proprio box contenitore.
Ma torniamo un attimo al punto focale del discorso… ho la brutta tendenza a divagare, un altro po’ e spiegavo anche come cucinare il gatto.
I frame/frame, sono superati? SI.
Perchè?
Beh, per numerosi motivi, iniziamo:
1) Sono deprecati dal W3C, questo significa che il loro utilizzo non soddisfa le loro specifiche. In pratica, le nostre pagine non potranno mai passare la validazione se contengono frame/frame. Ok, ma in soldoni, validazione a parte? nessuno ci obbliga a farla o a seguire quel che dice il w3c, tanto le pagine funzionano lo stesso.
Questo è un discorso un po’ complesso e sicuramente abbastanza OT rispetto all’argomento principale, ma voglio farvi comunque un breve cenno. Penso sia importante seguire le direttive del w3c per dare un senso di uniformità al tutto. Attualmente ogni browser vede lo stesso sito in modi diversi (a meno di non fare un lavoro certosino utilizzando qualche hack), qualcuno ha addirittura pensato di creare dei tag proprietari per compiere determinate operazioni. Capirete quindi quanto sia complicato per un webmaster gestire il tutto e quanto confonda l’utente ottenere risultati diversi con browser diversi. L’unica strada per porre rimedio a questo problema è creare uno standard. Proprio quello che fa il w3c.
2) La velocità delle connessioni internet è cresciuta così tanto che ormai il guadagno in termine di tempo non giustifica più la creazione di una struttura con i frame. Se ci fosse un grosso guadagno, potrei ancora capire la violazione degli standard del w3c. Ma se il gioco non vale la candela…
3) Ci sono altri modi per i webmaster per risparmiare codice e gestire più facilmente le pagine. In modo migliore e validato. Usare le inclusioni.
Esistono due tipi di inclusioni, quelle client side e quelle server side. La differenza fra di loro è semplice, le prime nascono per linguaggi statici (SHTML, CSS, Javascript, etc) le seconde per linguaggi dinamici (ASP, PHP, JSP, etc)
Riguardo all’argomento trattato, diamo un occhio alle inclusioni che potrebbero servirci.
Nel caso di una pagina SHTML, basta utilizzare questo codice:
<!- - #include file="NomeFile" - ->
N.B. I due trattini alle due estremità vanno inseriti di seguito. Per motivi di formattazione ho dovuto mettere uno spazio tra di essi, altrimenti sembrava un unico trattino, più grande.
Una pagina SHTML è uguale in tutto e per tutto ad una pagina HTML, con la differenza che può includere file esterni. Questo tipo di pagine e di inclusioni sono veramente poco usate, sempre più spesso si necessita di inserire del codice SSL (Server Side Language – Linguaggi Lato Server) nelle nostre pagine. Cosa che le pagine SHTML, non supportano.
Nel caso di una pagina ASP/ASP.NET, possiamo fare così:
<!- - #include file="NomeFile" - ->
N.B. I due trattini alle due estremità vanno inseriti di seguito. Per motivi di formattazione ho dovuto mettere uno spazio tra di essi, altrimenti sembrava un unico trattino, più grande.
Riguardo al PHP, abbiamo più metodi:
<? include("nome_file.php"); ?>
<? require("nome_file.php"); ?>
Si utilizzano in casi diversi, approfondite bene circa la funzione include, e sulla require, prima di utilizzarle.
Guardiamo ora le inclusioni in JSP:
<jsp:include page="NomeFile" /> <%@ include file="NomeFile" %>
Anche qui abbiamo due metodi diversi, da approfondire, qui il primo e qui il secondo.
Esistono innumerevoli altre inclusioni, ogni linguaggio ha il suo metodo e la sua sintassi. Ma andiamo a vedere i vantaggi di questa tecnica per quel che ci riguarda.
Con le inclusioni possiamo inserire il contenuto di una pagina all’interno di un altra, semplicemente richiamandola, questo porta numerosi vantaggi.
1) Meno codice nelle varie pagine con conseguente miglior leggibilità.
2) Possibilità di modificare una sola pagina ed ottenere la modifica simultanea di migliaia di pagine che richiamano la pagina da noi modificata.
3) Facilità di costruzione di una pagina modulare, creando una serie dei box in modo da realizzare un ossatura. nella quale andremo poi ad includere altre pagine.
L’unico svantaggio delle inclusioni è che bisogna fare attenzione a non esagerare. Infatti è più veloce caricare una quantità X di codice, piuttosto che inserire un inclusione che richiami la medesima quantità di codice. Esagerando potremo ottenere dei un certo rallentamento delle nostre pagine.
Fortunatamente, la cache ci viene in aiuto. Ipotizzando di avere una header.aspx che viene richiamata da tutte le pagine del nostro sito, essa verrà memorizzata nella cache del nostro browser e richiamata velocemente all’occorrenza. Avremmo perso molto più tempo in termini di caricamento, inserendo il codice contenuto in header.aspx in ogni pagina del sito.
Infatti, nonostante sia del codice ripetuto, il nostro browser non può rendersene conto, se non dopo averlo caricato. Ma a quel punto il caricamento è fatto, quindi la cosa non porta nessun beneficio.
La differenza sostanziale fra inclusioni e frame, è il refresh totale della pagina durante la navigazione tra una pagina ed un altra, con l’utilizzo delle inclusioni. Questa caratteristica che potrebbe sembrare penalizzante in termini di caricamento (pochi istanti con le moderne connessioni, come già detto) ha però un grandissimo vantaggio.
I motori di ricerca non hanno nessun problema con le inclusioni. Le pagine non sono infatti disgiunte e permettono ai motori di indicizzarle come qualsiasi altra pagina statica.
E con questo, l’argomento è chiuso 
alla prossima.
Articoli correlati
Non dimentichiamo che possiamo ottenere i benefici di ricaricare solo una parte della pagina anche senza usare i frame. Basta utilizzare la teconologia ajax, che nonostante sia spesso abusata ha delle potenzialità non indifferenti.
Ciao ciao
Ciao Furly,
quella parte del web mi è ancora sconosciuta purtroppo, o meglio, io non lo so fare, ma l’ho visto fatto da qualche parte
Quando imparo (e abuserò della tua pazienza per farlo) poi ci faccio un articolo.