Guardate un esempio di html dinamico cliccando sull'immagine accanto.
Seminario tenuto al Dipartimento di Fisica di Bari il 6 Maggio 98. Consigli e commenti sono benvenuti: mandateli a info@zitogiuseppe.com.
Nell'Aprile 1994 ho avuto la possibilita' di partecipare al primo Congresso Web tenutosi a Ginevra: il Web era all'inizio ma c'era gia' la tecnica dei CGI-script che permetteva una certa interattivita' con l'uso di moduli come quando interroghiamo un motore di ricerca. Inoltre un certo Mark Pesce gia' parlava di VRML una estensione 3D dell'HTML con tecniche di realta' virtuale.
Nonostante questo,il problema di rendere le pagine Web sempre piu' dinamiche e simili ad esempio ai materiali che uno puo' trovare su un CD-rom o addirittura ai videogiochi, e' stato sempre piu' sentito ,proprio in seguito al fenomenale successo del Web: questa estensione multimediale di Internet basata su quello che adesso e' il notissimo linguaggio di scrittura di ipertesti chiamato HTML.
l'HTML e' statico e permette al massimo di inserire in una pagina un'immagine, una colonna sonora oppure uno spezzone video. L'HTML non e' un linguaggio di programmazione ma solo di formattazione, permettendo di controllare come un testo comparira' nella finestra del browser. Dal 94 sono stati inventati vari modi per ovviare a questa staticita': uno e' quello dei plugin come Shockwave(speciali programmi da caricare che estendono il browser), l'altro quello degli applet (programmi)Java che possono essere inclusi nel testo come un'immagine e all'interno della loro finestra interagire con l'utente. Il problema con queste soluzioni e' l'insufficiente integrazione tra l'applet(o il plugin) e il documento circostante in quanto reagiscono in maniera diversa. Inoltre il loro uso per la creazione di materiale dinamico e' problematico per l'utente normale o perche' difficile da usare(Java) o perche' richiede programmi a pagamento.
Con l'HTML dinamico nato da circa un anno,
tutta la pagina Web diventa un programma e puo' come un applet, interagire col lettore oppure variare il suo contenuto in base a un copione( in inglese script)
predefinito.Questa tecnologia e' accessibile a chiunque abbia un browser delle nuove generazioni ed e' molto piu' facile da usare di Java.
Il DOM e' la descrizione della pagina Web cosi' come verrebbe fatta in un moderno
linguaggio di programmazione, come una collezione (o meglio gerarchia) di oggetti. Una volta che il browser ha implementato il DOM , allora
i normali comandi HTML talvolta arricchiti da nuove opzioni servono a creare oggetti.
Dopodiche' usando Javascript potete inviare ai singoli oggetti dei comandi.
L'oggetto in base al comando ricevuto modifica il proprio comportamento.
Uno script non e' altro che una lista di questi comandi che indicano
il comportamento dinamico del documento.
Ad esempio il comando HTML L'HTML dinamico in una formula: DHTML = DOM + Javascript +CSS
Quello che si chiama HTML dinamico e' in effetti un'estensione del vecchio
HTML (arrivato alla versione 4.0 proprio per poter incorporare le nuove estensioni) con l'uso di tre nuove tecnologie:
Da notare che l'uso dei CSS sebbene essenziale puo' essere trascurato in una fase iniziale
e per questo motivo l'argomento
sara' trattato poco e in un paragrafo a parte per semplificare questa introduzione.
<IMG NAME=pippo ...
crea un oggetto immagine chiamato pippo e l'istruzione Javascript
images['pippo'].width=50
comanda l'oggetto immagine di ridurre la sua larghezza a 50.
Il Document Object Model, ovvero come ti trasformo un documento in programma di computer.
Non c'e' bisogno di essere un programmatore per capire che un applet Java e' molto piu' interattivo della pagina Web nella quale si trova. Il suo segreto?
Esso e' un programma scritto in Java e quindi sfrutta tutte le risorse del
computer su cui gira. Che ne direste di trasformare la pagina Web in un programma? Come? Impariamo da Java e dai moderni linguaggi di programmazione.(Se non
siete programmatori non preoccupatevi: e' necessario sapere solo il significato
di poche parole come oggetto,proprieta',evento e di come queste si applicano
alla pagina Web). Dunque un programma Java e' innanzitutto formato
da una collezione di oggetti che descrivono cio' di cui il programma si occupa ,il DOM non fa altro che definire gli oggetti in una pagina Web.
Avete una window che contiene dei frames che a loro volta contengono un document che ha images, forms,links. Una form ha al suo interno oggetti elements di vario tipo.
Questo e' tutto o quasi. Ogni oggetto ha delle proprieta' che lo descrivono. Ad esempio un'oggetto image avra' le proprieta' width e height e l'istruzione:
document.images[1].width=50modifica questa larghezza. Esso ha inoltre dei metodi (strano nome) che permettono di inviare dei messaggi alla stesso per comandargli di fare qualcosa.Ad esempio il metodo write dell'oggetto document permette di inviare il messaggio:
document.write("Ciao a tutti") il cui effetto
sara' di far apparire la frase suddetta nel documento.
Da notare che per riferirsi a proprieta' e metodi si usa la stessa notazione: nomeoggetto.nomeproprieta' oppure nomeoggetto.nomemetodo() : l'unica differenza essendo in un paio di parentesi () dopo il nome del metodo che racchiudono il messaggio da inviare all'oggetto.
Ovviamente il DOM non serve a niente se non e'
implementato in un browser:uno dei maggiori problemi attuali e' che i DOM
non solo sono cambiati dalla versione 3 alla versione 4 dei 2 maggiori
browsers ma sono diversi tra Netscape e Microsoft! Ma il W3C sta preparando
una raccomandazione alla quale si spera che i due contendenti si uniformeranno in un prossimo futuro. Questo significa che per ora invece di avere un solo DOM ne abbiamo 3 o 4.Per fortuna essi hanno un
minimo denominatore comune al quale ci atterremo per lo piu' in questa introduzione.
Per un'aggiornamento sulla situazione vedere qui.
Programmi in Javascript ovvero come far danzare la compagnia degli oggetti del documento
Per chi non conosce la programmazione, il passaggio all'HTML
dinamico puo' essere difficile:si tratta di qualcosa
di molto piu' complesso del vecchio HTML.
Se guardate il testo di una pagina Web (il cosiddetto sorgente) di HTML dinamico vi accorgerete che essa contiene dei normali comandi HTML con nuove opzioni. Queste sono ignorate dai browsers tradizionali. Essa inoltre contiene degli strani commenti (indicati in HTML da <!-- --> ) che cominciano e finiscono cosi:
< SCRIPT language=Javascript > <!-- Inizia programma Javascript serie di istruzioni Javascript // fine programma Javascript --> </SCRIPT>Queste inclusioni sono per lo piu' tra <HEAD> e </HEAD> ma non sempre.
Anche questi inserti sono ignorati dai browser senza HTML dinamico.
Il comportamento dinamico degli oggetti nella pagina non e' altro che una lista di istruzioni del tipo proprieta'=valore e/o messaggi del tipo metodo() e puo' essere predefinito da chi ha scritto la pagina in modo che avvenga quando la pagina e' caricata, oppure iniziato da qualcosa che l'utente compie. In questo caso si dice che si e' avuto un certo evento e chi scrive la pagina deve indicare cosa deve succedere quando l'evento accade.
Una parte importante del DOM e' percio' una lista dei nomi di questi eventi.
Ad esempio quando il lettore passa il mouse su un'immagine viene attivato l'evento MouseOver.
La maniera piu' facile di animare un documento e' quella di indicare nella descrizione di un oggetto l'opzione :
OnNomeEvento = "lista di cose da fare" per esempio:onMouseOver="window.status='Symmetry';return true"aggiunta al comando <IMG .
Se la lista di cose da fare e' lunga,allora e' meglio scriverla da parte (appunto tra <HEAD> e </HEAD>), dargli un nome specificando che e' una function Javascript e nel comando riferirsi ad essa usando quel nome. In gergo, si dice allora che la funzione e' il gestore dell'evento (in inglese event handler).
Questa capacita' di definire delle funzioni e' propria di tutti i linguaggi di programmazione.Javascript ha un certo numero di funzioni predefinite per operazioni molto frequenti.
Javascript e' un linguaggio di programmazione limitato ma che ha le usuali possibilita' dei linguaggi di programmazione di definire variabili, cicli, biforcazioni etc.Esso permette inoltre di definire nuovi oggetti e anche collezioni di oggetti simili (i cosiddetti vettori o array in inglese).
Quest'ultima possibilita' ci permette di descrivere in un documento
persone o cose creando un database sugli stessi come vedremo fra poco.
Il database viene inviato assieme al documento e puo' essere interrogato
sul computer del lettore.
Come cercare (e copiare) il programma Javascript che vi serve.
Quando dovete creare un particolare documento dinamico, la prima cosa da
fare e' trovare un documento in rete che fa la stessa cosa. Questa serie di domande (alcune con risposta) vi da un'idea dell'enorme
mole di materiale disponibile in rete.
Come si fa a trovare cio' che ci serve? Come mostra la riga Javascript nell'Ufficio informazioni virtuale esistono
cataloghi di documenti gia' pronti da usare, inoltre Hotbot permette di
cercare solo tra i documenti con script.
Raccolte di script di libri in commercio sono disponibili. Alcuni
siti sono inoltre specializzati in tutorial DHTML e forniscono talvolta
dei servizi che permettono di creare a volo il documento che vi serve.
Infine non occorre trascurare la possibilita' di cercare e di fare domande sui newsgroups dedicati a Javascript e DHTML. In ogni caso i materiali sono cosi' diffusi che basta un'esplorazione a caso per trovare cio' che serve.
Una volta trovato il documento, seguite queste istruzioni per caricare
lo stesso sul vostro disco e farlo eseguire in locale.
Dopodiche' potete procedere a modificarlo in modo da fare cio' che volete.
Ma allora a cosa servono i fogli di stile a cascata?
I fogli di stile a cascata (in inglese Cascading Style Sheets o CSS in breve)
sono una lista di specifiche aggiuntive del documento Web che di solito
sono su un file a parte chiamato pippo.css . Questo viene richiamato
nella pagina Web col comando:
<LINK REL="stylesheet" TYPE="text/css" HREF="pippo.css" >
Ma possono essere inclusi anche nell'HTML.
Queste specifiche aggiuntive permettono nell'html dinamico la definizione di nuove proprieta' degli oggetti della pagina:proprieta' che si riferiscono appunto a come l'oggetto comparira' nella pagina (il suo stile ). Esempi di queste proprieta' sono font-size e background per definire la dimensione dei caratteri e il colore da usare come sfondo.
I CSS servono ad estendere l'HTML permettendogli di fare cose prima impossibili.E inoltre,tenendo separato il foglio di stile dal file HTML, si puo' tenere separata la descrizione della struttura e del contenuto del documento (file html) dalla descrizione della sua presentazione(file css). Consideriamo ad esempio il problema di far muovere un blocco di testo nella pagina Web.
Dobbiamo delimitare in qualche modo il blocco di testo e indicarne con precisione(al livello del singolo pixel) la posizione iniziale. L'animazione puo' allora essere fatta in Javascript. Per far questo si racchiude il pezzo di documento che si vuole animare tra i comandi:
<DIV NAME=pippo CLASS=pluto> </DIV>(oppure SPAN se il pezzo di testo comincia all'interno di una riga) facendo riferimento con l'opzione class a una serie di specifiche in un file CSS tra cui anche la posizione x e y(indicata dalle proprieta' top,left e position). A tutti gli effetti il blocco di testo diventa un oggetto di nome pippo avente come proprieta' le coordinate x e y . Ora per muovere il blocco di testo basta variare x,y con Javascript.
I CSS permettono quindi di:
Inutile dire che anche le specifiche CSS dovute al W3C sono in rapida
evoluzione con aggiunte e aggiornamenti continui e che le implementazioni attuali fatte da Netscape e Microsoft sono un po' diverse in modo da rendere
piu' interessante la vita dello scrittore di pagine Web(:-).
La loro importanza per l'HTML dinamico puo' essere ricavata dal fatto che
in essi potremo specificare dei comportamenti dinamici predefiniti per
un dato oggetto, come ad esempio l'apparire o scomparire di immagini con effetti di dissolvenza.
Dalla teoria alla pratica: documenti e data base
L'HTML dinamico e' molto piu' difficile del vecchio HTML.In particolare
per sviluppare dei documenti e' necessario conoscere un po' la programmazione.
Ma c'e' il grosso vantaggio di avere sempre il sorgente disponibile per gli
esempi che trovate in rete. Questo vi permette di praticare uno stile
di programmazione "taglia e incolla". Cioe', se dovete creare un documento,
trovate in rete un documento simile, ritagliate il codice, incollatelo
nel vostro documento, e dopo esservi assicurati che funziona, modificatelo fino a fargli fare cio' che vi interessa.
Per avere un'idea di cosa significa sviluppare HTML dinamici,viene presentata un'applicazione non banale riguardante l'accesso e la gestione di un piccolo data base. Per capire come si puo' arrivare a padroneggiare il DHTML in modo da scrivere una tale applicazione, vengono inoltre presentati una serie di circa 10 documenti scelti in modo da farvi vedere passo a passo le difficolta' di un'applicazione come quella del data base. Tagliando e incollando questi documenti potrete avere un'idea piu' precisa e di prima mano del DHTML.
Ci sono tre gradi di complessita' che chi si accosta al DHTML deve affrontare. Nel primo gradino abbiamo i soliti concetti alla base di ogni programma di computer : una serie di dati in ingresso vengono manipolati da funzioni producendo dei risultati in uscita.
Nel secondo gradino dobbiamo conoscere il DOM in modo da poter manipolare frames, finestre, elementi di moduli,etc inviando loro dei comandi quando si verificano degli eventi in seguito ad azioni degli utenti.
Infine al terzo gradino dobbiamo sapere come si fa a definire nuovi tipi di oggetti che poi serviranno per contenere le informazioni del data base.
Ritagliando e provando uno a uno questi documenti potrete avere un'idea piu' precisa di come avvenga la programmazione del DHTML.
Per completezza va ricordato che esiste un'altro gradino di complessita' ignorato in questa introduzione ma che e' importantissimo nelle applicazioni reali: come
tener conto delle differenze tra i vari browsers.
Javascript come colla: integrazione dell'HTML dinamico con altre tecnologie Web.
Se si chiede a un esperto qual'e' la differenza tra un linguaggio di programmazione generale come Java e un linguaggio di "scripting" come Javascript, la
risposta e' che il linguaggio di scripting non serve tanto a sviluppare
applicazioni ben definite, quanto a far da collante tra le varie applicazioni
esistenti su un computer in modo che collaborino in maniera armoniosa.
Questo e' vero anche per Javascript . Ad esempio voi potete realizzare una simulazione di un esperimento con un applet Java (cosa difficile o impossibile da fare in Javascript) ed usare Javascript per integrare l'applet con la pagina Web dove si trova, permettendo ad esempio di definire e verificare i dati che pilotano l'applet.
In maniera analoga,i dati in un modulo possono essere validati in locale con Javascript prima di essere inviati a uno CGI script sul server remoto.
Una funzione ancora piu' importante puo' essere svolta coi mondi
virtuali VRML, dove un programma Javascript puo' indicare cosa succede
quando si clicca col mouse uno degli oggetti 3D( o in generale
l'avatar che rappresenta il lettore urta uno degli oggetti).
Il problema maggiore ora con l'HTML dinamico e' il fatto che ci sono almeno 4
DOM diversi utilizzati dalle principali versioni di browsers e inoltre
altri browser che non l'implementano.
Il W3C dovrebbe fissare le specifiche entro la fine dell'anno. Al momento attuale realizzare
certe applicazioni significa fare 3 0 4 diversi documenti da presentare
a seconda del browser usato per la lettura.Anche scrivere una semplice animazione di un testo diventa un compito difficile.Nonostante questo, spero di aver
mostrato che e' possibile gia' adesso fare delle interessanti applicazioni. Una volta che Netscape e Microsoft si saranno uniformati alle raccomandazioni del W3C, sara' molto piu' facile.
Inoltre come per l'HTML statico stanno uscendo
degli ambienti
di sviluppo visuali che permettono lo sviluppo di DHTML senza dover conoscere i dettagli del DOM e senza dover programmare in Javascript.
La pagina Web diventera' sempre piu' dinamica con scritte e immagini in
movimento, immagini che reagiscono in maniera originale, suoni associati
ad alcuni elementi, etc..
L'HTML dinamico permette inoltre un'altra possibilita' meno visibile
per il lettore ma importante per lo sviluppatore:quella di passare a una
"produzione industriale" di pagine Web. Se dovete preparare centinaia di
pagine con caratteristiche analoghe, ora potete scrivere un HTML dinamico
che provvede a sfornarle a volo a partire da un database.
In ogni caso e' prevedibile un grande successo di queste nuove tecniche non fosse altro che per la possibilita' che da a persone digiune di programmazione, di realizzare delle cose prima possibili solo coi CGI script e con Java.
Un presente con numerosi problemi ma un luminoso futuro.
Al momento attuale (Febbraio 98) Hotbot recensisce 3 milioni di pagine con
frammenti di Javascript (su un totale di circa 100 milioni). Per fare
un confronto,le pagine con applet Java sono 600000 e quelle con Shockwave
50000. Non c'e' dubbio che Javascript e il DHTML sono popolari.Ma la maggior
parte dell'uso si limita a piccole applicazioni come il frammento
di codice che da la data di ultima modifica.Applicazioni sofisticate o avanzate sono molto rare e di solito fanno crashare uno dei due browser in continuazione.
Ultimo aggiornamento :