|
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: 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 alert ("questo documento contiene: " + tag_names); } </SCRIPT> </HEAD> <BODY onload="showElements()"> <U><B>Prova</B></U> </BODY> </HTML> 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> 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>
<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> </BODY> </HTML> 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> 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. 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 |
