tecnica

Posizioni d'effetto

Massimiliano Valente – mvalente@tecnet.it

Con la definizione della bozza Cascading Style Sheets-Positioning, si è aperta la porta alla possibilità di gestire in modo nuovo i contenuti ipertestuali di un documento Web offrendo la possibilità di creare effetti visivi molto interessanti. Analizziamola in dettaglio attraverso semplici esempi d'immediata utilità

Le proprietà dei fogli di stile (Cascading Style Sheets) permettono, grazie al modello a oggetti, di manipolare dinamicamente la posizione degli elementi all'interno di una pagina Web. I CSS sono stati introdotti nella versione 3.0 di MSIE e definitivamente standardizzati dal W3C. Nel 1996 i rappresentanti di Microsoft e Netscape hanno raggiunto un accordo che ha portato alla definizione della bozza denominata «CSS-Positioning». L'accordo ha reso compatibile il posizionamento dei CSS nelle versioni di Navigator 4.0 ed Explorer 4.0, i quali, comunque, si differenziano per un diverso approccio al modello di script.
Le potenzialità intrinseche del modello CSS-P permettono di gestire in modo finora inedito i contenuti di un documento ipertestuale, rendendo dinamico un sistema di contrassegno statico quale Html.
Gli esempi esposti più avanti mostrano come modificare il contenuto testuale di una pagina senza bisogno che venga ricaricata, ma attraverso l'uso di script associati alle specifiche dei fogli di stile a cascata.
Esaminiamo, prima di tutto, il codice che gestisce la formattazione del contenuto del documento, attraverso i fogli di stile. Questo codice è compreso tra i tag <HEAD> e contiene informazioni fondamentali per il posizionamento degli elementi nella pagina:


<STYLE TYPE="text/css">

#layer1 {POSITION:absolute; Z-INDEX:10; VISIBILITY:visible; LEFT:180px; TOP:70px; width:250px;}
#layer4 {POSITION:absolute; overflow:scroll; Z-INDEX:40; VISIBILITY:hidden; LEFT:180px; TOP:70px; width:250px; height:220px; background-color:#FFFF80; layer-background-color:#FFFF80;}

</STYLE>



Il posizionamento previsto dalla bozza di lavoro CSS-P si divide in: statico, relativo e assoluto.
Il primo (position:static) non ha alcun effetto sulla formattazione del documento, che viene gestita come se si trattasse di un normale ipertesto in Html statico.

Il posizionamento relativo (position:relative) si riferisce alle proprietà che l'elemento assume rispetto agli altri oggetti presenti nel documento, attraverso le proprietà «top» e «left»; quello assoluto fa riferimento alla distanza dal margine alto (top) e sinistro (left) e pone gli elementi al di fuori del layout tradizionale Html. In altre parole, la posizione dell'elemento non dipende dagli altri oggetti presenti nella pagina, ma esclusivamente da valori assoluti. Questo tipo di posizionamento prevede l'uso di SPAM o DIV che, come descriveremo, vanno inseriti in successione.
Absolute impedisce al browser di applicare i suoi algoritmi di posizionamento, quindi anche se la finestra viene ridimensionata la posizione degli elementi non muta.
Z-INDEX definisce la posizione di un elemento nella pagina in relazione all'asse z. A differenza degli assi x (che definiscono la posizione orizzontale da destra a sinistra) e y (verticale dall'alto verso il basso), gli assi y si riferiscono alla terza dimensione, cioè la profondità che va da dietro a davanti. In questo modo è possibile gestire vari strati con il risultato di ottenere una serie di fogli sovrapposti visualizzabili singolarmente. Nel codice esaminato l'elemento «Z-INDEX:10» è sovrapposto rispetto a «Z-INDEX:20», seppure posizionato in modo assoluto nella stessa porzione di pagina (LEFT:180px; TOP:70px;).
La proprietà «visibility» determina quale layer debba essere visualizzato all'atto del caricamento della pagina, e quali invece vadano nascosti e visualizzati solo al verificarsi di determinati eventi. In questo esempio la proprietà del primo strato è immediatamente visibile perché impostata su «visible», al contrario delle altre impostate su «hidden».
La proprietà «overscroll» gestisce i contenuti che eccedono le dimensioni del layer. Tale proprietà assume diversi valori: visible (visualizza tutto il contenuto), hidden (solo i contenuti che rientrano nelle dimensioni del layer), auto (inserisce lo scroll quando il contenuto eccede le dimensioni) e scroll (inserisce sempre lo scroll di pagina).

Colori di sfondo ed eventi


Le proprietà «top, left, width e height» definiscono rispettivamente: la distanza dal margine alto, dal margine sinistro, la larghezza e l'altezza dello strato. Se per le ultime due proprietà non viene impostato nessun valore, il layer si adatta automaticamente alle dimensioni effettive del contenuto. Le distanze sono solitamente espresse in pixel (px), ma possono esserlo anche in percentuale o altre unità di misura previste dai fogli di stile. La posizione degli strati è sempre la stessa (180-70px) per generare l'effetto di sovrapposizione caratteristico di questo esempio.
I colori di sfondo di ogni singolo layer sono modificabili grazie a «background-color» per MSIE, e «layer-background» per Netscape. È possibile impostare un'immagine di sfondo inserendo «background-image(nomefile.gif)» per MSIE, e «layer-background-image:Url(nomefile.gif)» per Netscape:

#layer2 {POSITION:absolute; Z-INDEX:20; VISIBILITY:hidden; LEFT:180px; TOP:70px; width:250px; height:220px; background-image:URL(sfondo2.jpg); layer-background-image:URL(sfondo2.jpg);}

Il codice:

P {font-size:50px; font-weight:bold; font-family:IMPACT; color:#000000;}


prevede la formattazione delle porzioni di testo precedute dal tag <P>. Mentre il codice:

A:link, A:visited { text-decoration:none; color:blue; }
   
A:hover { text-decoration:underline;)


definisce il colore da assegnare ai link testuali, e che gli stessi non siano sottolineati, se non quando il puntatore del mouse vi passa sopra. Quest'ultima caratteristica funziona correttamente solo con MSIE 4, mentre Netscape permette solo di evitare la sottolineatura.
Il linguaggio di script permette di associare alle caratteristiche del CSS-P determinati eventi. Gli eventi sono un concetto tipico di molti linguaggi di programmazione, grazie ai quali è possibile far interagire l'utente con l'ambiente nel quale si trova a operare. Nel caso di pagine Html, gli eventi si manifestano nelle azioni che coinvolgono il documento quando lo stesso risiede nel browser.
La gestione degli eventi di questo esempio è demandata al linguaggio di script Java.
Il codice:

var totalLayersInLoop=4;
var layerNumShowing=1;

stabilisce il numero di strati nella pagina (quattro) e quanti di essi debbano visualizzarsi all'atto del caricamento della stessa (uno). Per aumentarne il numero è necessario variare anche il primo valore.
L'istruzione «var» consente di dichiarare delle variabili, e in casi come questo di assegnargli un valore. Le variabili sono, in JavaScript, rappresentazioni di valori impostati utilizzando un'espressione e possono essere globali o locali. Le prime sono utilizzate da tutte le funzioni del documento, mentre le seconde sono utilizzate solo all'interno di alcune.
Nell'esempio considerato in queste pagine Netscape permette di manipolare solo alcune porzioni del documento (i layer predefiniti), in riferimento al codice:

layerRef="document.layers";


mentre Internet Explorer, rende manipolabile l'intero documento attraverso il codice:

layerRef="document.all";


Le funzioni:


function showLayerNumber(number)
function showLayer(layerName)
function hideLayer(layerName)

completano il codice JavaScript relativo alla manipolazione dei vari livelli di layer.
Perché questo esempio funzioni correttamente è necessario impostare la funzione "init()" all'interno del tag <BODY>:

<BODY onload="init()" background="sfondo.jpg">


I link vengono posizionati e impostati attraverso il codice:

<div style="position:absolute; top:120px; left:19px; font-size:30px; font-family:ARIAL;">

<A HREF="javascript:showLayerNumber(2)">Layer A</A><BR>
<A HREF="javascript:showLayerNumber(3)">Layer B</A><BR>
<A HREF="javascript:showLayerNumber(4)">Layer C</A>

</div>

Il primo layer viene visualizzato di default in quanto impostato come "visible", quindi i link si riferiscono ai restanti tre strati. La formattazione e la posizione dei link sono gestisti dal tag DIV.
A questo punto, è necessario inserire il codice che richiami le funzioni impostate all'interno del tag <SCRIPT> e precedentemente posizionate grazie alle proprietà dei CSS-P. I layer sono quattro, e per ognuno va inserito un richiamo attraverso il tag ID:

 

<DIV ID="layer1" >
<P>
Layer di presentazione
    </DIV>

    <DIV ID="layer2" >
<P>
LAYER A
    </DIV>

Impostando due nuove funzioni è possibile creare altrettanti link che visualizzino in sequenza i layer, sia in avanti (dal primo al quarto) sia indietro (dal quarto al primo).
Per ottenere questo effetto all'interno del codice fonte dello script va inserita la funzione:

function showPreviousLayer(){
var layerNumToShow=layerNumShowing-1;
if (layerNumToShow < 1){layerNumToShow=totalLayersInLoop;}
hideLayer(eval('"layer' + layerNumShowing+'"'));
showLayer(eval('"layer' + layerNumToShow+'"'));
layerNumShowing=layerNumToShow;     }

per visualizzarli a ritroso. E il codice:


function showNextLayer(){
var layerNumToShow=layerNumShowing+1;
if (layerNumToShow > totalLayersInLoop){layerNumToShow=1;}
hideLayer(eval('"layer' + layerNumShowing+'"'));
showLayer(eval('"layer' + layerNumToShow+'"'));
layerNumShowing=layerNumToShow;     }

per visualizzarli con avanzamento progressivo.

Ogni layer è completamente indipendente dagli altri; ciò consente di inserire, oltre al testo, anche componenti grafici, quali immagini o GIF animate.

Come sovrapporre i layer

Ampliando i concetti di posizionamento dinamico e adattandoli a funzionalità avanzate di scripting, è possibile creare effetti visivi molto interessanti. La seconda demo che abbiamo creato, per esempio, mostra come sovrapporre un layer a un altro, facendo in modo che la sovrapposizione si manifesti come una sorta di sipario. In altre parole, il nuovo strato viene visualizzato da sinistra a destra in modo progressivo.
Per comprendere il codice di questo nuovo esempio è necessario introdurre il concetto di area di ritaglio, ovvero «clip». Questo strumento viene associato a un elemento posizionato in modo assoluto nella pagina, e definisce un'area disponibile per la sua visualizzazione. In questo modo tutto ciò che rimane escluso dall'area «clip» non verrà visualizzato nel documento. L'impostazione delle aree di ritaglio avviene attraverso i valori: top, right, bottom e left.

Le funzioni «clipvalues()» e «clipBy()» gestiscono rispettivamente l'area inizialmente visibile di layer, e l'area visualizzata in blue alla pressione del link «Nuovo layer».
Le due funzioni «wipe»:


function wipe1() {


    if (clipValues(block,'r')<250) {
        clipBy(block,0,5,0,0)
        setTimeout("wipe1()",13)

function wipe2() {
    if (clipValues(block,'r')>0) {
        clipBy(block,0,-5,0,0)
        setTimeout("wipe2()",13)

 

consentono l'effetto di visualizzazione progressiva del layer da sinistra a destra. Il valore "250" si riferisce alla larghezza massima in pixel della sua area, e deve coincidere con il valore "width" inserito all'interno del foglio di stile. Il modello a oggetti previsto da Netscape impone al codice JavaScript di richiamare individualmente i valori dell'area clip, al contrario di MSIE che li richiama tutti allo stesso tempo
Impostato correttamente lo script Java è necessario richiamare la funzione «onload» all'interno del tag <BODY>:


onLoad="init()"

La formattazione e il posizionamento dei due layer avvengono attraverso il seguente codice:


<div style="position:absolute; position:absolute; top:70px; left:70px; font-size:30px; font-family:ARIAL; width:250px; heigth:200px;">
LAYER A<BR><BR>
<CENTER><A HREF="javascript:wipe1()">Nuovo layer</A></CENTER>
</div>

<DIV ID="blockDiv" STYLE="position:absolute; top:70px; left:70px; font-size:30px; font-family:ARIAL; clip:rect(0,0,200,0); width:250px; height:200px; background-color:#0080FF; layer-background-color:#0080FF; color:#FFFFFF;">
LAYER B<BR><BR>
<A HREF="javascript:wipe2()">Torna indietro</A>
</div>

Il primo riguarda quello da visualizzare all'atto del caricamento della pagina che deve avere coordinate identiche al secondo (top:70px; left:70px). Il link «nuovo layer» richiama la funzione «wipe1» che permette di sovrapporre visivamente l'altro livello. Il link «torna indietro» richiama la funzione «wipe2» che nasconde nuovamente il secondo layer, riportando la pagina al suo aspetto originario.
(mvalente@tecnet.it)
 


Internet News è un mensile della Casa Editrice Tecniche Nuove S.p.A.
© 1995/99. Tutti i diritti sono riservati.
Internet News non risponde di eventuali errori e omissioni.
Commenti a: inews@tecnet.it