3- I FRAMES

Dite la verità, ormai non ci speravate più vero? E invece, a costo di ritardare clamorosamente la data di chiusura di TGM, ecco a voi una guida sensata (beh, oddio...) e soprattutto ragionata (palla clamorosa!) al confezionamento dei frames, detti anche ‘cornici’ dagli amanti della Bella Lingua. Cosa siano essi, dovreste proprio saperlo, a meno che vi ostiniate ancora oggi ad usare la versione 0.5 di Netscape Navigator o di Internet Explorer: in questo caso, avete due possibilità, o procedete a un download della versione più recente di Explorer (http://www.microsoft.com) oppure vi tirate giù l’ultima release di Netscape Navigator (http://www.netscape.com. Mentre scrivo siamo ancora alla 3.01 in Italiano, ma va necessariamente detto che esiste la beta release 2 di Communicator, che comprende anche Navigator 4.0: con esso, potrete fare finalmente tutto quello che facevate con Internet Explorer 3, contenti?), visto che col vostro Browser attuale non potrete più vedere altro che qualche directory FTP, e magari nemmeno quella. Il mondo del WEB è in costante aggiornamento e gli effetti grafici migliori si pagano con il download continuato dei browser più aggiornati. Comunque sia, visto che ormai il filo del discorso principale si è perduto irrimediabilmente per sempre, riprendiamolo da capo: i frames, che lo sappiate o meno (e in tal caso ve lo dico io), sono in sostanza quelle "sottofinestre" in cui alcune pagine web suddividono la finestra principale del vostro browser. L’uso di questa tecnica è ormai diffusissimo, e d’altronde non poteva essere altrimenti, vista la sua indubbia utilità. Ovviamente, quando s’introduce un concetto nuovo, non possono mancare le "leggi del Paolone", quelle che di punto in bianco inserisco nel testo quasi fossero Verità Supreme e inappellabili. Ma d’altronde non è così per la maggior parte delle cose che s’imparano a scuola dalle arcigne professoresse di Latino?

1. I frame salvano la vita del webmaster solo qualora li sappia usare in modo intelligente
2. mettere i frame solo per stupire è controproducente

Il rischio che si corre, infatti, è come sempre quello di esagerare: pagine suddivise in cinquantun finestrelle con tanto di bordi, barre di scorrimento, fondini, colori e via dicendo, più che essere inutili, sono un vero e proprio strazio sia da vedere sia da gestire, e non c’è niente di meglio che una pagina strutturata con troppi frame per indurre l’occasionale visitatore a premere il tasto "Indietro" del browser. Il fatto è che, come intuibile, più si suddivide lo schermo, minore sarà lo spazio a disposizione di ogni singola finestrella, con tutte le conseguenze del caso. Diciamo quindi subito che, prima di codificare una pagina strutturata a cornici, è sempre meglio munirsi di carta, penna e righello, con cui mettere giù le proprie idee su un foglio, magari a quadretti o millimetrato. Una volta che abbiamo bene in testa ciò che vogliamo fare, possiamo finalmente caricare il solito editor di testi e buttare giù qualche riga in HTML.

<HTML>
<HEAD>
<TITLE> iniziamo </TITLE>
</HEAD>

<FRAMESET ROWS= "25%,*">
<FRAME>
<FRAME>
</FRAMESET>

</HTML>

Chi, in questi mesi, ha seguito i miei deliri con la dovuta attenzione, dovrebbe essersi subito accorto di un paio di stranezze. La prima, ovviamente, è l’apparizione di tutta una serie di tag nuove ("frame, frameset, si chi sun cui ròb lì?" direbbe il milanese tipo), e la seconda... no... fermi un attimo... la seconda dovete dirmela voi! Osservate bene e noterete che manca qualcosa... ci siete arrivati? Ok, comunque sia, si tratta della dichiarazione di corpo: semplicemente non c’è e non ci deve essere, perché i tag <frameset> sostituiscono a tutti gli effetti i tag <body>. Qualora inseriate la dichiarazione di corpo, otterrete un documento perfettamente leggibile con Internet Explorer, ma Netscape Navigator si rifiuterà in tutti i modi di visualizzarlo. Quindi eliminate i <body> senza esitazioni, in fondo non sono quella grave perdita...
Comunque sia, il comando <frameset> dichiara apertamente che, con questo documento HTML, intendiamo solamente suddividere la finestra del browser nel modo che riteniamo opportuno. Effettivamente, quasi mi scordavo di dirvi una cosa importantissima: quando intendiamo usare i frames, dobbiamo pensare che, al posto di gestire un solo documento HTML, ne dovremo gestire uno diverso per ogni finestrella. Il primo file (chiamiamolo frames.htm) serve SOLO ed ESCLUSIVAMENTE a preparare il browser e a fargli caricare i documenti necessari. Quindi, se intendiamo suddividere la finestra del Netscape (o di Explorer) in due frames, dovremo scrivere TRE documenti diversi:

1° Il file preparatorio o "dichiarazione"
2° il documento da visualizzare nel primo frame
3° il documento da visualizzare nel secondo

Il primo andrà ovviamente a caricare gli altri due. Ma torniamo a bomba sul nostro esempio di prima: come noterete, il comando <frameset> vanta addirittura un parametro, detto ROWS, che a sua volta dispone di un paio di attributi. A cosa servono questi ultimi tre elementi? Beh, ROWS spiega al browser che vuole suddividere la finestra corrente in righe, mentre i due attributi ne specificano l’altezza. In questo caso, il primo frame andrà ad occupare il 25% dell’altezza globale della finestra del browser, mentre il resto sarà lasciato al secondo. Se noi avessimo inserito COLS al posto di ROWS, la suddivisione sarebbe avvenuta verticalmente, in colonne. Un esempio di suddivisione verticale potete osservarlo - come sempre - su Zzap!, o, perché no, presso la mia home page (devo ripetervi ancora l’indirizzo? Uffa! Vabbé, http://philos.unipv.it/paolone). I dati dei parametri possono essere specificati: 1) in pixel, 2) in percentuale, 3) in wildcard. I primi due sistemi non necessitano certo di spiegazioni, le wildcard invece possono essere interessanti per la loro comodità.

<FRAMESET COLS= "120,*">
Apre un primo frame largo 120 pixel, e lascia tutto il resto della finestra al secondo.
<FRAMESET COLS= "3*,*">
Apre un primo frame largo ¾ dello schermo, e lascia l’ultimo quarto al secondo: 3* singifica, appunto, * moltiplicato per 3. Ovviamente scrivere COLS= "*,*"> significa né più né meno suddividere il browser a metà. In quest’ultimo caso avremmo potuto anche scrivere "50%,50%" che sarebbe stata la stessa cosa.
<FRAMESET ROWS= "32,25%,*">
Apre tre finestre orizzontali, la prima alta 32 pixel, la seconda un quarto dello schermo, e lascia il resto alla terza. Come vedete, potete esprimervi come volete con la massima libertà. Cercate di usare meno attributi "assoluti" (dimensioni in pixel) possibile, lasciando questa possibilità solo agli scopi particolari.

Altri parametri interessanti per <frameset> sono quelli che conferiscono alle nostre cornici l’aspetto che desideriamo: BORDER (Netscape) e FRAMESPACING (Explorer) specificano la larghezza in pixel del bordo della cornice, esattamente come potrebbe avvenire per le <table>: siccome noi vogliamo ottenere gli stessi risultati con entrambi i browser, qualora servisse conferire un determinato spessore a un bordo è meglio usare entrambi gli attributi, assegnando loro il medesimo valore. Va inserito, cioè, un ipotetico <frameset cols= "120,*" border=5 framespacing=5> e non uno solo di essi. BORDERCOLOR specifica (con la solita notazione esadecimale) il colore del bordo e FRAMEBORDER stabilisce se è il caso di metterlo o no. Frameborder accetta come valori "YES" e "NO". Eliminare il bordo può creare effetti interessanti e mascherare la presenza eccessiva di cornici sullo schermo.

Veniamo così alla seconda "brutta bestia" del nostro esempio: il tag <frame>. Questo altro non fa che aprire, appunto, il frame che abbiamo dichiarato con <frameset>. Una volta aperto un frame, potremo suddividerlo a sua volta in altri frame, semplicemente adducendo un nuovo <frameset> e annidandolo nel codice come si fa con le tabelle. Volete un esempio? Eccovi accontentati...

<FRAMESET COLS= "*,*">
<FRAME>
<FRAMESET ROWS= "*,*">
<FRAME>
<FRAME>
</FRAMESET>
<FRAME>
</FRAMESET>

Questo non fa altro che suddividere lo schermo in tre porzioni diverse.
Come sempre, è opportuno accompagnare i nostri <frame> con qualche attributo.
NAME: Dà un nome al nostro frame in modo che il browser lo possa riconoscere all’istante, ogni volta che un documento HTML lo dichiarerà apertamente. Tra un po’ ne vedremo l’utilità.
SRC: Punta a un file HTML e lo inserisce nel frame corrente. SCROLLING ("YES" o "NO") stabilisce se l’utente potrà far scorrere il contenuto, oppure no; e NORESIZE nega all’incauto visitatore la possibilità di modificare a mano le dimensioni della nostra cornice.

A questo punto manca solo un ultimo ospite per questo polpettone teorico, e poi passeremo finalmente alla sanissima pratica: è vero che ormai abbiamo tutti la possibilità di vedere i frame, ma con i soliti puzzoni che non ritengono opportuno passare nemmeno a Netscape Navigator 2, come la mettiamo? Senza contare la schiera di nuovi utenti che, magari, hanno a disposizione il solo Tiber (aaaaaargh!) oppure una vecchissima versione di Mosaic data in regalo dal provider... bene, per tutti coloro che avessero difficoltà a visualizzare i frame, esiste il comando <noframe> che riserva uno spazio visualizzabile, appunto, da tutti quei browser che con le cornici non vanno molto d’accordo.
Semplicemente, il nostro browser più figo ignora tutto ciò che è compreso in questo tag, e che di contro è l’unica cosa comprensibile dai visualizzatori più vecchi. Potete inserirlo dove volete, anche fuori dall’area delimitata da <frameset> e dalla sua rispettiva negazione </frameset>

<NOFRAME>
E allora, cosa aspetti a passare a un browser più recente?
</NOFRAME>

Detto questo, compiliamo finalmente il nostro primo documento vero e proprio. Quello che segue è il selettore, e ci conviene chiamarlo FRAME.HTM.

<html>
<head>
<title>esempio di suddivisione in frames</title>
</head>
<frameset cols="*,*">
<frame name="sel"
src="scelta.htm"
marginheight="0"
marginwidth="0"
scrolling="NO"
frameborder="NO">
<frame name="main">
<noframes>
<body>
ma schifo di browser hai?
</body>
</noframes>
</frameset>
</html>

Come vedete, abbiamo messo tutto ciò che abbiamo imparato prima, compreso un tag <body> per sicurezza tra i <noframe>. Questo documento si preoccupa in sostanza di fare le seguenti cose:

1. suddividere la finestra del browser in due colonne di eguale dimensione
2. attivare il frame sinistro, chiamandolo "sel" e caricandovi all’interno il file "scelta.htm" (che segue)
3. attivare il frame destro, chiamandolo "main" senza caricarvi dentro niente
4. avvisare chi ha un browser troppo vecchio che è giunta l’ora di cambiarlo

Passiamo così al selettore, quello che vogliamo mettere nella finestra a sinistra, o, meglio, nel frame "sel". Questo file si chiamerà "scelta.htm"

<html>
<head>
<title>Selettore</title>
</head>
<body bgcolor="#000080" text="#FFFFFF" link="#00FFFF"
vlink="#00FF00" alink="#F0FFF0">
<div align="center"><center>
<table border="0">
<tr>
<td>
<a href="docum.htm" target="_self">
1
Visualizza il
documento in questo frame
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="docum.htm" target="main">
2
visualizza il
documento nel secondo frame
</A>
</td>
</tr>
<tr>
<td align="center">
<a href="docum.htm" target="_top">
3
visualizza il
documento in una nuova finestra
</A>
</td>
</tr>
<tr>
<td align="center">
<a href="docum.htm" target="_blank">
4
visualizza il
documento in un secondo browser
</A>
</td>
</tr>
</table>
</center></div>
</body>
</html>

So che è un po’ lungo, ma vale proprio la pena digitarlo. Questo documento costituisce una piattaforma di lancio per un terzo documento, chiamato "docum.htm": tramite le diverse opportunità di scelta, potremo aprirlo dove vorremo: nel secondo frame, nel primo, addirittura a pieno schermo o, esageriamo, obbligando il browser ad aprire una seconda copia di se stesso per ospitare il nuovo arrivato. Questa magia è possibile tramite il comando TARGET, che dovremo inserire nei nostri hyperlink quando vogliamo far visualizzare questo o quello in un frame particolare. Da qui si evince anche l’importanza di poter chiamare ogni singolo frame con un nome proprio. Il collegamento andrà strutturato in questa forma:

<A HREF= "nomefile.ext" TARGET= "nome del frame"> clicca qui! </A>

Nel nostro caso, per far apparire nel frame "main" la solita immagine "racchia.jpg", raffigurante nostra sorella appena sveglia al mattino con due occhiaie così, dovremo inserire il seguente comando da qualche parte:

<A HREF= "racchia.jpg" TARGET= "main"> orrore! </A>

Esistono anche dei nomi riservati, che servono appunto a creare qualche effetto speciale. Si distinguono dagli altri nomi per il fatto che hanno un trattino come prima lettera, e che se per caso tentaste di utilizzarli come nomi per i vostri frame, combinereste solo un bel macello.

_blank: apre un secondo browser sullo schermo
_top: ripulisce il browser dai vostri frame
_parent: apre il documento nel frame immediatamente apparentato a quello in uso
_self: apre il documento nel frame in uso

NOTA BENE: quando inserite un collegamento a un altro documento, viene in mancanza di altre istruzioni viene accettato di default il parametro TARGET= "_self", ovvero il nuovo documento verrà aperto nello stesso frame in cui si trova il collegamento attivo. Se volessimo impostare come frame di default uno in particolare, dovremmo usare il comando <BASE TARGET= "nome del frame">: questo dirotterà proprio lì tutti i documenti che apriremo con un link "sguarnito".

Terminiamo così fornendo il famoso "docum.htm", ovvero il file che vogliamo caricare usando "scelta.htm":

<html>
<head>
<title>Questo...</title>
</head>
<body bgcolor="#FFFFFF" text="#0000FF">
Questo 
è il
documento
che 
volevi
visualizzare
</body>
</html>

A questo punto dovreste proprio essere in grado di fare tutto il possibile coi frames. Qualora aveste ancora delle titubanze, potete connettervi al sito Internet http://www.webreference.com/dev/frames. Lì troverete tutto, ma proprio tutto - con tanto d’immagini esplicative - sull’arte d’incorniciare i vostri documenti. Noi ci rileggiamo puntuali il mese prossimo.

ECCO DUNQUE COSA SALTA FUORI:

[prossima puntata] [indice]