  |
|
|
|
I Frames e L'iFrame Comporre una pagina in frame I frame (“riquadri”) comparvero per la prima volta con Netscape Navigator 2: si tratta della possibilità di suddividere una medesima finestra del browser in vari riquadri indipendenti. Questa soluzione all’epoca si rivelò un successo, dal momento che permetteva notevoli vantaggi:
Tutte queste caratteristiche hanno causato un vero e proprio boom dei frames, tanto che subito dopo l’invenzione della Netscape, anche Microsoft si trovò a “copiare” la possibilità di strutturare le pagine in questo modo; in seguito (con l’HTML 4) i frames divennero una specifica ufficiale del W3C. Struttura di un framesetPer utilizzare i frame, è necessario creare una pagina che contenga la dichiarazione della struttura che vogliamo utilizzare. Vediamo subito il codice: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT"
"http://www.w3.org/TR/html4/frameset.dtd"> L’esempio completo si trova qui. Come vi sarete accorti, rispetto alle pagine che abbiamo studiato finora cambiano alcune cose. In primo luogo cambia il doctype, cioè il tipo di documento di riferimento. All’inizio del documento al posto di questa riga: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT"> compare ora infatti questa dicitura: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd"> stiamo indicando semplicemente al browser che facciamo riferimento alle specifiche che servono per regolare il comportamento dei frame. Avrete notato inoltre che scompare il tag <body> e al suo posto troviamo il tag <frameset> (“set di riquadri”), che ci permette di indicare come devono essere indicati i frames all’interno della pagina Il tag <frameset> ha sostanzialmente due importanti attributi: rows e cols:
Nell’indicare la grandezza di ciascuna riga (o colonna) possiamo poi lasciare che una o più righe si auto-dimensionino, occupando tutto lo spazio che rimane, in questo caso utilizzeremo l’asterisco (“wild card”); normalmente invece potremo esprimere la grandezza dei riquadri secondo uno dei seguenti sistemi di misura (da scegliere a nostra discrezione):
Una volta creata la nostra griglia con il tag <frameset>, incrociando le righe e le colonne, dobbiamo specificare dove si trova il file di origine di ciascun frame. Possiamo farlo con la sintassi: <frame src="prima.html"> come si può vedere l’origine di ciascun frame è un documento HTML standard (come quelli che abbiamo analizzato finora): avrà dunque la sua dichiarazione di documento, la sua <head> e il suo <body>. Se le dimensioni del riquadro non sono sufficienti a mostrare il documento nella sua interezza, il frame avrà delle barre di scorrimento, a meno che non sia stato esplicitamente specificato il contrario negli attributi (che vedremo tra breve). Per visualizzare il codice HTML di ciascun frame è sufficiente andare nel riquadro desiderato e poi digitare il tasto destro del mouse. Quindi:
È possibile anche individuare un frame in modo più preciso, assegnandogli un nome: <frame id=”primoRiquadro” name=”primoRiquadro” src="prima.html"> la sintassi corretta per dare un nome a un frame dovrebbe essere: id=”primoRiquadro” tuttavia per questioni di retro-compatibilità (con Netscape 4) è oramai entrato nell’uso utilizzare anche name=”primoRiquadro”. Frameset annidatiÈ possibile annidare diversi frames l’uno dentro l’altro. In questo caso, al posto di uno dei tag <frame> è sufficiente includere le indicazioni del nuovo frameset. Così: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT"
"http://www.w3.org/TR/html4/frameset.dtd"> L’esempio completo si trova qui. Attributi dei frames per la visualizzazione Il tag frameset non ha (secondo le specifiche ufficiali) attributi per la visualizzazione. Alcuni attributi tuttavia sono entrati nell’uso e sono correttamente supportati dai browser attuali:
Attributi dei frameA differenza degli attributi del tag frameset, che sono dovuti alla convenzione, i seguenti attributi del tag frame sono invece descritti nelle specifiche del W3C e permettono di modificare l’aspetto dei riquadri e il modo in cui l’utente può interagire con essi:
ApprofondimentiOvviamente sarebbe meglio impostare i bordi e gli spazi tra i frame attraverso i CSS. Nella lezione della guida ai fogli di stile dedicata ai bordi con i CSS è spiegato come fare. I link in un frameset e il tag noframes In una struttura a frames può apparire difficile caricare il contenuto di un link nella sezione appropriata. Grazie all’attributo target possiamo specificare qual'è la destinazione del link; con questa sintassi siamo dunque in grado di caricare il contenuto di un collegamento nel riquadro che riteniamo più opportuno: <a href=”paginaDaLinkare.html” target=”nomeDelFrame”> come si può vedere nell’esempio. Ci sono poi delle “parole chiave” che ci consentono di ricaricare i link in destinazioni predefinite:
Può essere noioso specificare per tutti i link il target appropriato. Ci viene in aiuto allora il tag <base> che ci consente di specificare la destinazione dei tutti link in una sola volta. Il tag va inserito nella pagina contenente i link. Ad esempio: <base target=”_blank”> a questo indirizzo è possibile visualizzare l’esempio completo. Abbiamo già incontrato il tag <base> per impostare un percorso predefinito di default. Ovviamente è possibile combinare i due attributi di <base>: <base href=”http://www.isolajava.com” target=”_blank”> Questa sintassi indica che l’indirizzo di base per i percorsi della pagina è http://www.isolajava.com e che tutti i link vanno aperti in una nuova pagina. Il tag noframesAll’interno della dichiarazione del <frameset> abbiamo sempre visto comparire l’elemento <noframes>: questo tag serviva per browser particolarmente obsoleti (come Mosaic 2) che non erano in grado di leggere e visualizzare una struttura frameset. In previsione di situazioni di questo genere è possibile inserire all’interno del tag <noframes> un contenuto appositamente studiato per questa eventualità, ad esempio l’avvertimento che il sito è strutturato a frame, o un contenuto alternativo, oppure una descrizione per i motori di ricerca (come vedremo tra breve). La struttura è la seguente: <frameset rows="50%,50%"> È importante capire una volta per tutte come funziona questo genere di tag, dal momento che un tipo di struttura di questo genere ricorre in diverse occasioni nell’HTML: il tag <noscript> e i contenuti alternativi nel caso dell’<iframe> utilizzano infatti gli stessi principi di funzionamento. I browser obsoleti non sono in grado di interpretare né la struttura di un frameset, né tanto meno il <noframes>: non essendo un tag previsto nelle specifiche rilasciate all’epoca in cui questi browser sono stati costruiti, si tratta infatti di una sintassi del tutto oscura per loro. Di tutto il codice in questione l’unica parte comprensibile a questo genere di browser è l’HTML standard compreso all’interno del <noframes>: e questo si limitano a leggere. Sono invece i browser moderni che sanno di dover ignorare il <noframes>, dal momento che il suo contenuto non li riguarda. C’è da dire che, se tutti i browser odierni sono in grado di interpretare correttamente la struttura di un frameset, viceversa sotto molti punti di vista i motori di ricerca sono paragonabili a browser obsoleti, e non è raro che un sito organizzato a frame sia inserito nell’indice dei motori di ricerca in maniera non corretta: per questo motivo alcuni di essi “catturano” il contenuto del <noframes> come descrizione di un sito. Quindi per evitare messaggi di questo genere a seguito di una ricerca in rete:
Figura 1. Messaggio del motore di
ricerca per pagine senza «noframes»
 è bene utilizzare il tag noframes per indicare la descrizione del sito: in questo modo miglioriamo anche il posizionamento nei motori di ricerca. Ad esempio: <frameset rows="50%,50%"> L'iframe “Iframe” significa “inline frame”: in qualsiasi momento in un documento che non utilizzi una struttura a frame è possibile creare un frame al volo grazie a questo tag. Possiamo specificare la larghezza e l’altezza del tag, mentre gli attributi di visualizzazione sono gli stessi del tag <frame>: si tratta di una vera e propria finestra verso l’esterno all’interno di un documento ordinario. Questo tag è correttamente supportato da tutti i browser moderni (Netscape 4 non lo supporta, ma questo browser oramai sta scomparendo). La sintassi è: <iframe src="http://www.isolajava.com" width="300" height="300"> Come si può vedere tra l’apertura e la chiusura del tag è possibile specificare un contenuto alternativo per i browser che non siano in grado di leggere l’<iframe>: in realtà questi browser sono ciechi a questo tag (come abbiamo visto per il <noframes>) e dunque leggono direttamente il contenuto al suo interno. Sono invece i browser che supportano questa sintassi a ignorare volutamente quanto viene compreso tra apertura e chiusura del tag. Anche in questo caso sarò opportuno utilizzare la possibilità di inserire un contenuto alternativo per migliorare il posizionamento nei motori di ricerca. Ad esempio: <iframe src="http://www.isolajava.com" width="300" height="300"> Un esempio completo è disponibile a questa pagina. Vantaggi e svantaggi dei frames Abbiamo già visto all’inizio delle lezioni sui frames quali sono stati alcuni dei motivi di successo dei frames. E cioè:
Tuttavia gli svantaggi che comporta un uso scorretto di un layout a frame sono superiori ai vantaggi che possono derivare dal loro utilizzo. I motori di ricerca infatti navigano di link in link attraverso il web per catturare contenuti da indicizzare. È frequente allora che una struttura a frame sia inserita all’interno di un motore di ricerca in modo errato: a volte viene catturato solo un menù (come in questo caso), altre volte compare soltanto la parte interna con il contenuto del frame e dunque viene perso ogni menu di navigazione (come in questo caso). Per evitare problematiche di questo genere, è meglio evitare di utilizzare una struttura a frame; o nel caso in cui la si desideri utilizzare è bene prevedere sin da subito dei metodi che ricostruiscano il frameset, nel caso in cui sia catturata soltanto una pagina interna. È possibile farlo utilizzando JavaScript (un linguaggio di programmazione lato-client). C’è anche da dire che oggi molti dei motivi che rendevano vantaggioso l’utilizzo dei frames sono venuti meno: la banda a disposizione si è ampliata, i CSS alleggeriscono la struttura dei siti e rendono possibile alcune soluzioni che prima erano difficili (come quella di mantenere un menu di navigazione sempre a portata di mano), e la gestione dei contenuti può essere semplificata utilizzando le inclusioni lato server. Viceversa una struttura a frame risulta molto vantaggiosa nel caso in cui si utilizzino delle vere e proprie applicazioni che utilizzano internet (come le piattaforme di e-learning, la webmail, eventuali aree riservate del sito con accesso tramite login e password). In questo caso la suddivisione dei contenuti evita di sovraccaricare il server (dal momento che così vengono ri-caricati solo le parti strettamente necessari), semplifica la gestione, e quindi si rivela estremamente utile. Impaginare a livelli con i CSS Abbiamo già visto due stili di impaginazione: le tabelle e i frame. Come accennato più volte all’interno del corso esiste una terza via: l’impaginazione tramite i fogli di stile (ovvero "CSS", cioè "Cascading Style Sheets", che significa "fogli di stile a cascata"). La sintassi dei CSS esula dall’argomento del corso presente, è importante tuttavia afferrare il concetto che un elemento può essere disposto all’interno della pagina, semplicemente specificando le sue coordinate, o indicando il modo in cui deve essere spostato rispetto agli elementi che lo circondano. Nel caso dell’impaginazione tramite i fogli di stile abbiamo per lo più a che fare con i tag <span> e <div>, che possono essere accuratamente posizionati e visualizzati specificando ad esempio:
Per “livello” (o “layer”) in HTML si intende appunto un <div> posizionato tramite i CSS all’interno della pagina. La sintassi dei CSS è molto diversa da quella dell’HTML solito. Ad esempio per posizionare la testata di HTML.it a 50 pixel dall’alto della pagina e 200 pixel da sinistra, con lo sfondo a righe, bordo nero, e una dimensione di 600 x 80 pixel di è necessario utilizzare questa sintassi. Nella <head>: <style type="text/css"> nel <body>: <div id="logo"> L’esempio completo si trova a questo indirizzo. Il vantaggio di questa impostazione è quella di avere una pagina molto pulita: infatti il file HTML è composto soltanto dai <div> (o dagli span) con i contenuti, mentre lo stile di visualizzazione dei contenuti è affidato ai fogli di stile (per lo più espressi in un file separato). Per gli approfondimenti vi rimandiamo alla guida sui fogli di stile di
HTML.it che approfondisce questo argomento. |
