BETA 2099.3 - HTML Dinamico

Benvenuti alla prima parte di questa serie di articoli dedicati ad analizzare alcuni aspetti del DHTML, l'HTML dinamico introdotto dalle versioni 4 dei due browsers più noti: Netscape Navigator/Communicator e Microsoft Internet Explorer. Naturalmente cercheremo di fare largo uso di esempi contenenti pezzi di codice che potrete facilmente riutilizzare nelle vostre pagine.
L'HTML dinamico, al contrario di quello che si può pensare, non è un linguaggio, ma è il termine con il quale si indica un insieme di tecnologie, che attualmente è costituito da quattro componenti:

Cerchiamo di seguito, di capire a cosa serve ciascun componente, quali sono le sue caratteristiche fondamentali e i problemi che bisogna affrontare nell'implementazione all'interno di una pagina web.

L'HTML è un "linguaggio" che fornisce una serie di comandi per la visualizzazione formattata di testi e immagini, che a loro volta possono essere collegati tramite riferimenti ipertestuali. I comandi dell'HTML (detti tag) sono racchiusi tra i simboli di < e > (minore e maggiore) e permettono solo un controllo statico della pagina.
Se siete a digiuno di HTML (di seguito la sua conoscenza di base è ritenuta acquisita), cercando nei motori di ricerca potrete trovare numerosissimi manuali in italiano che vi spiegano i comandi fondamentali.
Il problema principale dell'HTML è che ad ogni nuova versione dei browser, c'è anche un aggiornamento di tale linguaggio, atto ad ampliarne le possibilità. Il problema dov'è allora, si può chiedere qualcuno. Il fatto è che molto spesso i tag inseriti dalla Netscape non hanno corrispondenze con quelli della Microsoft, oppure hanno sintassi diverse.

Naturalmente in questo caso il problema di incompatibilità non è particolarmente pesante. In teoria i tag sconosciuti non dovrebbero venire interpretati dal browser (come avviene in questo caso), ma la pratica dimostra che non sempre è così. Ad esempio la diversa visualizzazione delle tabelle (anche su versioni successive dello stesso browser) può causare non pochi problemi se vogliamo avere un posizionamento accurato e preciso degli elementi della pagina.

Per risolvere problemi di questo tipo ci sono varie possibilità, in base al tempo che vogliamo dedicare alla creazione (e agli aggiornamenti) del sito e in base al target di persone che crediamo possano consultarlo.
Ecco le principali scelte che possiamo operare:

In tutti i casi potrebbe comunque essere utile una versione solo testo del sito, perchè darebbe possibilità di accesso a chi ha browser vecchi e a chi ha connessioni lente.

A partire da Netscape Navigator 2.0, la Netscape ha introdotto il JavaScript, che è un vero e proprio linguaggio di programmazione a oggetti di tipo script (non compilato)

L'evoluzione di questo linguaggio sta progredendo sensibilmente, di seguito potete vedere una tabella con le varie versioni di javascript relative al programma della Netscape.

Browser Netscape	Versione del JavaScript
Navigator 1.0	Non supporta JavaScript
Navigator 2.0	JavaScript 1.0
Navigator 3.0	JavaScript 1.1
Navigator/Communicator 4.0	JavaScript 1.2
Navigator/Communicator 4.06	JavaScript 1.3

La prima versione del JavaScript della Microsoft (denominata Jscript) è stata introdotta con Explorer 3 e possiamo dire che è abbastanza compatibile con quello della Netscape. A migliorare ulteriormente la compatibilità, ci pensa il processo di standarizzazione del linguaggio di un ente preposto, l'European Computer Manufacturers Association, che ha formulato le specifiche ECMA-262. Successivamente lo standard ECMA-262 è stato anche approvato dall'ISO (International Organization for Standards) con la sigla ISO-16262.
Il JavaScript di Navigator/Communicator 4.06 e successivi e il Jscript di Explorer 4 seguono molto lo standard ECMAScript e questo garantisce una ottima compatibilità tra i due.

Tramite l'uso di JavaScript si possono eseguire calcoli, gestire controlli sui form, associare azioni particolari agli eventi, trasformare una pagina statica in interattiva, ecc.

Gli Stylesheets sono stati introdotti per la prima volta (con un supporto parziale) su Explorer 3.0 e successivamente con un supporto migliore (ma non ancora completo rispetto alle raccomandazioni CSS livello 1 espresse a riguardo dal W3C) su Explorer 4 e Navigator/ Communicator 4.
Il loro utilizzo permette di separare il contenuto (testo, immagini, ecc.) dallo stile con cui vengono visualizzati (colori, tipo di font, grandezza del font, margini della pagina, ecc.). Il vantaggio maggiore nell'operare tale separazione, sta nel fatto che in tal modo si può controllare e tenere uniforme l'estetica del sito tramite un file esterno.

Ecco un esempio di descrizione di un testo, in cui tramite HTML vogliamo fare visualizzare una riga con font Times New Roman, grandezza 4, colore magenta e in corsivo.

La visualizzazione è la seguente, identica con browser vers. 4 e successivi, diversa per i browser che ignorano gli stili e quindi visualizzano la seconda scritta in nero, non in corsivo e con dimensione di default:

Oltre allo stile in linea, che fa riferimento a un singolo tag, possiamo inserire anche degli stili che fanno riferimento ad un'intera pagina (fogli di stile globali), o a una serie di pagine (fogli di stile collegati).
In genere il foglio di stile globale è inserito nell'intestazione (head) della pagina, nella stessa zona cioè in cui si mettono gli script e raccoglie tutte le informazioni sullo stile della pagina.
Un foglio di stile collegato invece, è definito su un file separato con estensione "js" e permette di condividere gli stili su più pagine, quelle in cui richiameremo tale file js.

Tramite l'utilizzo degli StyleSheets possiamo avere una migliore gestione del sito. Ad esempio collegando ogni pagina html con un foglio di stile esterno che ne descrive le principali caratteristiche estetiche, possiamo modificare tipo di font, grandezza, ecc. cambiando solo il file con il foglio di stile! Usando solo HTML invece, avremmo dovuto modificare tutte le pagine del sito. Inoltre impostando gli attributi con gli StyleSheets, possiamo andarli a modificare dinamicamente, ad esempio quando ci passiamo sopra con il mouse, quando succede un certo evento, ecc.

Il DOM (Document Object Model), definisce il modo in cui gli oggetti del documento HTML sono esposti al linguaggio script. In altre parole, possiamo dire che DOM definisce la struttura logica dei documenti e il modo con cui si può accedervi e manipolarli. Attualmente non tutti i tag HTML possono essere associati ad eventi, in questo ambito l'implementazione su Explorer 4 è migliore rispetto a quella di Netscape 4. Inoltre il modello di DOM di Explorer 4 è più vicino agli intenti del W3C, mentre proposte della Netscape come i Layer (divisione della pagina in più livelli sovrapposti) sono state rigettate dal consorzio di standarizzazione. La prossima versione di Navigator, manterrà la compatibilità con i Layer, ma contemporaneamente appoggierà le proposte del W3c.

Il codice DHTML è un file di testo, non deve essere compilato, quindi è possibile usare un semplice editor di testo: in tal caso si può utilizzare anche un computer non particolarmente recente. Per vedere il risultato dei nostri sforzi poi, bisogna aprire tale file con il browser e ad ogni cambiamento del sorgente, per vedere i risultati basta fare "reload" (aggiorna).
Attualmente però per realizzare cose ad un certo livello (e impiegando il minor tempo possibile), è consigliabile utilizzare un editor cosidetto "visuale". Con tali programmi buona parte dei comandi di HTML e Stylesheets vengono inseriti automaticamente utilizzando dei menu. Quando poi vogliamo inserire del codice "a mano" basta passare nella visualizzazione "codice sorgente" e il gioco è fatto.
Tra i programmi più completi di questo tipo cito Microsoft Visual Interdev 6.0 e Macromedia Dreamweaver (da poco giunto alla versione 2.0). Per un programmatore invece sconsiglio i diffusi Microsoft FrontPage 98 o FrontPage Express, perchè addirittura prevaricano le vostre modifiche al codice sorgente, spostano i tag, ecc. compiendo a volte dei veri e propri disastri.

Ormai i classici link testuali sottolineati sono cosa del passato, ora possiamo cambiargli colore quando il mouse ci passa sopra e abbiamo la possibilità di non fare visualizzare la sottolineatura (ad esempio inutile se si tratta di un menù, in cui è evidente che ogni voce è un link).

<html>
<head>
<title>Esempio 1</title>
</head>

<body>
<a href="file.htm">Link non sottolineato</a> (al passaggio diventa rosso)
<p><a href="file.htm" class="sottolinea">Link sottolineato</a> (al passaggio diventa rosso)</p>
<p><a class="grassetto" href="file">Link che diventa grassetto</a> (il testo successivo si sposta di conseguenza)</p>
<p><a href="file.htm" class="cambiosf"> Link con cambio di sfondo </a> (al passaggio sfondo rosso e testo blu)</p>
</body>
</html>

Tramite questo foglio di stile, viene applicato a tutti i link testuali della pagina il seguente stile:
colore normale: blu
decorazioni: nessuna
colore al passaggio del mouse: rosso

Con l'uso di a.sottolinea {...} invece, creo una classe chiamata "sottolinea", che si comporta in modo diverso, in questo caso mettendo come decorazione al link, la normale sottolineatura. Per richiamare tale classe all'interno del tag html <a href ...> aggiungo il nome della classe in questo modo: <a class="sottolinea" href ...>
Le altre due classi che ho creato, "grassetto" e "cambiosf" rendono il testo in grassetto (la prima) e testo bianco con sfondo rosso (la seconda).
Ecco il risultato:

Se state guardando questa pagina con Navigator 4 avrete una brutta sorpresa: al passaggio del mouse i link rimangono tristemente statici. Purtroppo è così, Navigator 4 non interpreta il comando hover (letteralmente librarsi, volteggiare). Non esiste nemmeno un comando alternativo e anche se in teoria si potrebbe simulare un effetto simile tramite i layer, tale implementazione risulterebbe troppo compicata e poco pratica per giustificarne l'utilizzo.

Guardando un po' più in là invece, spulciando tra la documentazione preliminare del successore di Navigator 4.5, si può trovare un modo per implementare tale effetto su questo browser di prossima uscita (del nuovo engine grafico, nel momento in cui sto scrivendo queste note, è disponibile la versione per programmatori distribuita da Mozilla, denominata Gecko; l'engine portato avanti parallelamente dalla Nescape invece è soprannominato Gemini). Tale metodo implementativo fa uso di una nuova interessante novità introdotta dalla Netscape che ha il nome di "Action Sheets". In pratica si tratta di un metodo per scrivere script in un file separato dal documento html (o xml) e richiamarlo tramite uno Style Sheets.

All'interno del tag <actionsheet> c'è un elenco di stylesheets (nel nostro caso uno), però all'interno della grafa non c'è la solita descrizione degli stili associati, ma l'associazione a due eventi (onMouseOver e onMouseOut) che a sua volta richiamano due diverse funzioni JavaScript. Tali funzioni sono definite nel solito modo all'interno dei tag <script type="text/javascript"> e </script>
L'esempio mostra anche la possibilità di agganciare all'actionsheet, una libreria esterna in JavaScript "fly.js" tramite l'uso dei seguenti tag:
<script type="text/javascript" src="fly.js">
</script>
In tal modo è come se il file fly.js venisse incollato "al volo" nel listato e diventandone parte integrante, possiamo utilizzare le funzioni definite all'interno. Questo metodo si può utilizzare anche nelle normali pagine html mettendo le due righe all'interno dei tag <head> e funziona da Explorer 4 e successivi e da Navigator 3 e successivi.

Salvando il listato di cui sopra come libreria.act (ad esempio), possiamo includerla in un file html in questo modo:

Gli Action Sheets sono stati proposti al W3C, il consorzio che si occupa della standarizzazione delle tecnologie su Internet. Anche la Microsoft ha proposto un'idea del tutto analoga a cui è stato dato il nome di "Behavior": tale novità è presente su Explorer 5.

Fabrizio Pucci è Collaboratore di BETA2; è raggiungibile su Internet tramite la redazione

Copyright © 1999 Fabrizio Pucci, tutti i diritti sono riservati. Questo Articolo di BETA, insieme alla Rivista, è distribuibile secondo i termini e le condizioni della Licenza Pubblica Beta, come specificato nel file LPB.