v--- a--- r--- i--- e
Dynamic HTML
e futuro del web



Il World Wide Web Consortium (W3C) e' un consorzio formato da: Adobe, Hewlett Packard, IBM, Microsoft, Netscape, Novell, SoftQuad e Sun Microsystems, riuniti per definire un nuovo standard dell'HTML che sostituisca l'attuale HTML 3.2. Il consorzio definira' una piattaforma comune che diverra' il W3C Proposed Recommendation.
Il nuovo HTML dovra' rispondere a nuove esigenze ma dovra' obbligatoriamente mantenere standards creatisi nel corso della sua evoluzione, per fare in modo che questo rimanga un linguaggio universale, traferibile su qualsiasi piattaforma.
I punti fondamentali dell'HTML 4.0 saranno quelli di promuovere:

l'uso di fogli di stile come struttura di base delle pagine (a tal proposito e' da considerare che attualmente molti webmaster, tra i quali io stesso, definiscono la struttura di base attraverso le tabelle). Sara' possibile, per esempio, che i browsers mostrino le tabelle man mano che vengono caricate senza dover attendere il completo download;

la maggior interattivita' dei form;

l'uso di linguaggi alternativi all'inglese, in quanto il web ha messo salde radici anche in paesi non anglosassoni. Riguardo questo punto verranno adottati set di caratteri in base allo standard ISO/IEC:10646, che rappresenta tutte le lingue internazionali. Cio' consentira' di usare lingue diverse all'interno di una stessa pagina.

Nell'HTML 4.0 potranno essere inseriti elementi eseguibili e multimediali, per fare questo il marcatore OBJECT sostituira' gli attuali IMG e APPLET. Questo marcatore omnicomprensivo permette di includere immagini, video, suoni e programmi esecutivi nel documento, attraverso una tecnica gerarchica per specificare varie alternative in base all'ambiente in cui gira il browser dell'utente.
Facendo un esempio riguardo il marcatore OBJECT e la sua caratteristica di generare alternative, verra' di seguito riportato un codice che tenta di visualizzare in alternativa (1) un applet che genera l'immagine animata di una bandiera sventolante; la stessa animazione in formato Mpeg (2), ed infine un'immagine fissa JPG della bandiera:

<OBJECT title="Una bandiera" classid="java:Flag.class" width="300" height="200">
<OBJECT data="flag.mpeg" type application/mpeg">
<OBJECT src="flag.jpg">

<FONT SIZE=4>Una bandiera</FONT>

</OBJECT>
</OBJECT>
</OBJECT>


Il nuovo HTML e' concetto strettamente collegato al Dynamic HTML, cioe' l'estensione dell'HTML che permette di modificare il contenuto di un documento dopo che tale documento e' stato caricato. Riguardo tale materie non v'e' ancora uno standard per cui i due contendenti nella "guerra dei browsers", Netscape e Microsoft hanno avanzato nella quarta generazione dei rispettivi prodotti, proposte incompatibili, sulle quali il W3C dovra' pronunciarsi per la definitiva adozione dell'una o dell'altra.

Per rendere dinamico un documento e' necessario poterne modificare il contenuto successivamente alla visualizzazione da parte del browser. Tale possibilita' e' fornita grazie al Document Object Model.

Secondo il DHTML ogni documento ipertestuale consiste nella combinazione di tag e attributi. Tutti gli elementi di un documento sono rappresentati dalla collezione document.all. Ogni elemento e' rappresentato da un oggetto programmabile il quale appare nella collezione secondo l'ordine di inserimento nel codice sorgente. Ecco un esempio:

<HTML>
<HEAD><TITLE>Gli elementi di un documento</TITLE>

<SCRIPT LANGUAGE="JScript">
function showElements() {
var tag_names = "";
for (i=0; i tag_names = tag_names + document.all(i).tagName + "";
alert ("questo documento contiene: " + tag_names);
}
</SCRIPT>

</HEAD>

<BODY onload="showElements()">

<U><B>Prova</B></U>

</BODY>
</HTML>


Clicca qui per vedere il risultato generato da questo codice (solo con Internet Explorer 4).

Altra possibilita' fornita dal DHTML e' quella di poter posizionare con esattezza testo o immagini all'interno di un documento, specificando le coordinate x e y e il piano z. E' possibile quindi sovrapporre gli elementi, stabilendo l'ordine nel quale devono essere visualizzati, ed e' possibile addirittura creare delle animazioni. Ecco di seguito in codice HTML:

<HTML>

<HEAD><TITLE>Dynamic HTML</TITLE>

<SCRIPT LANGUAGE="JScript">
var id;
function StartGlide()
{
document.all.Banner.style.pixelLeft =
document.body.offsetWidth;
document.all.Banner.style.visibility =
"visible";
id = window.setInterval ("Glide()",50);
document.all.DivTesto.style.pixelTop=
document.all.Banner.height+10;
document.all.DivTesto.style.visibility =
"visible";
}
function Glide()
{
document.all.Banner.style.pixelLeft -= 10;
if (document.all.DivTitolo.style.pixelLeft
<= document.all.Banner.width-50) {
document.all.DivTitolo.style.pixelLeft+=10;
}
if (document.all.Banner.style.pixelLeft<=0)
{

document.all.Banner.style.pixelLeft=0;
window.clearInterval (id) ;
}
}
</SCRIPT>

<STYLE>
body {background: black; color: yellow;}
A:link { color: white }
A:visited { color: yellow }
A:activ { color: gray }
</STYLE>

</HEAD>

<BODY onload="StartGlide()">
<DIV ID="DivTitolo" STYLE= "position:absolute;
top:110; left:100;">
<H1 id="titolo" >di <FONT SIZE=6 COLOR="#FFFF80" FACE="ARIAL">MASSIMILIANO
VALENTE</FONT></H1>
</DIV>

<DIV ID="DivTesto" STYLE= "position:absolute;
top:0; left:200; visibility:hidden;">

Questo e' un esempio di foglio di stile con IE 4,
<BR> e fa parte della
<BR><BR><BR><BR>

<A HREF="guida_dhtml.htm">clicca qui
</DIV>

<IMG ID="Banner" STYLE="visibility:hidden;
position:absolute; top:90; left:460; z-index:-1"
SRC="guida_logo.gif">

</BODY>
</HTML>

</HTML>


Clicca qui per vedere il risultato generato da questo codice (solo con Internet Explorer 4).

Il tag LAYER e' un'estensione privata del linguaggio HTML che permette di isolare, nel documento, un subdocumento posizionabile ovunque (in termini di pixel), sovrapponibile e di dimensioni variabili.
Eccone un esempio:

<HTML> <BODY BGCOLOR="#000000">

<layer name="prova" top=0 left=0 clip=0,0,400,300 width=400 bgcolor=black>

    <layer name="logo" top=42 left=42 width=155>
    <IMG SRC="guida_logo.gif" WIDTH=91 HEIGHT=52 BORDER=0>
    </layer>
    <layer name="max" top=90 left=125 width=380 bgcolor=red>
    <FONT SIZE=5 FACE="ARIAL" color="yellow">MASSIMILIANO VALENTE</FONT>
    </layer>

</layer>

</BODY>

</HTML>


Clicca qui per vedere il risultato generato da questo codice (solo con Netscape 4).

L'uso del tag LAYER, di per se' non e' molto utile, ma se usato insieme a javascript puo' dare ottimi risultati. Si puo', per esempio, creare l'ombreggiatura (di colore e dimensione desiderate) del semplice testo <FONT></FONT>, senza bisogno, dunque, di creare delle gif animate che appesentasticono il documento.
Ecco un esempio di ombreggiatura creata con i LAYER:

<HTML>

<BODY BGCOLOR="#FFFFFF" onLoad="go()">
<INPUT TYPE="button" VALUE="indietro" onClick="document.source()">
<script>
function titolo(text,layerName,topPos,leftPos,face,color,psize,shift,shade)
{layer=document.layers[layerName]
if (shade==null) {shade="gray"}
titolo1(layer.document.layers[0],text,shift,shift,face,shade,psize)
titolo1(layer.document.layers[1],text,0,0,face,color,psize)
layer.top=topPos
layer.visibility="show"
}
function titolo1(layer,text,topPos,leftPos,face,color,psize)
{layer.document.fgColor=color
txt="<font face='"+face+"' point size="+psize
txt+=" color="+color+"><b>"+text+"</b></font>"
layer.document.write(txt)
layer.document.close()
layer.top=topPos
layer.left=leftPos
}
</script>

<layer name="titolo" left=0 clip=560,306 visibility=hide">
<layer top=0 left=0<</layer>
<layer top=0 left=0<</layer>
</layer>

<script>
function go()
{titolo("<CENTER><BR><BR>Testo ombreaggiato <BR>generato in base al nuovo tag<BR><LAYER><BR> Netscape communicator
4</CENTER>","titolo",0,0,"arial","black",6,4)
}
</script>

<layer name="ombra" top=295 left=235 clip=0,0,30,30 width=30 bgcolor="#989898">
</layer>

<layer name="netscape" left=230 top=290 clip=90,30>
<IMG SRC="guida_netscape.gif" WIDTH=30 HEIGHT=30 BORDER=0>
</layer>

</BODY></HTML>

Clicca qui per vedere il risultato generato da questo codice (solo con Netscape 4).

E' possibile creare l'effetto tipico dei frame (una parte della pagina fissa e una o piu' che variano) con l'uso congiunto del tag LAYER e di javascript.

Gli articoli scritti per Internet News


HTML 4.0: uno sguardo al futuro
pubblicato nel maggio 1998 da pag. 86

Testo interattivo con Dynamic HTML
pubblicato nel giugno 1998 da pag. 100

Menu gerarchici a cascata con Dynamic HTML
pubblicato nel luglio/agosto 1998 da pag. 86

Gestire le form con Dynamic HTML
pubblicato nel settembre 1998 da pag. 100


VISITA
Dynamic HTML point
PER SAPERNE DI PIU'


Clicca qui per maggiori informazioni




codice
grafica
varie
html point
Guida al linguaggio e alla programmazione HTML di Massimiliano Valente - 1998