PROGRAMMAZIONE: DHTML
Posizionamento
assoluto
Contenuto
flessibile
Creazione
dinamica
Un
mezzo multimediale
Corso
sul DHTML di HTML.IT
Introduzione
al Dynamic HTML
Evoluzione
dell’Html, permette al contenuto di una pagina di essere
formattato con più flessibilità e accuratezza; testo,
immagini e altri oggetti incorporati nel documento possono
essere nascosti oppure visualizzati stabilendo lo stesso tipo
d’impatto emotivo di un’applicazione multimediale ma...
manca ancora uno standard.
Come
sappiamo, il linguaggio Html è lo strumento più utilizzato
per pubblicare documenti su Internet. Tuttavia, nel suo
formato tradizionale, non è sufficientemente potente per
creare documenti interattivi e multimediali, in altre parole
non fornisce quelle possibilità operative che il mondo del
Web commerciale richiede. Una delle sue limitazioni più
evidenti è rappresentata dalla mancanza di controllo sul
layout della pagina; in un documento Html standard non esiste
la possibilità di specificare le esatte coordinate nelle
quali collocare testo e immagini, né si può visualizzare il
testo con un font particolare. Una volta caricata una pagina
Web nella finestra del browser, non è possibile variarne
contenuto o forma senza evitare che la pagina sia ricaricata.
Questo rappresenta un evidente ostacolo all’uso del
linguaggio Html quale strumento multimediale. Per cercare di
superarlo è stato creato il Dynamic Html (Html Dinamico) il
quale permette al contenuto di una pagina di essere esposto
con più flessibilità e accuratezza attraverso l’uso dei
Cascading Style Sheet (CSS). Usando i fogli stile
standardardizzati dal W3C, gli autori possono definire font,
margini, e spaziatura della linea per parti diverse di un
documento Html. In aggiunta a questi miglioramenti, CSS
consente il posizionamento assoluto del contenuto tramite la
specifica delle coordinate x, y (e uno z-index, che permette a
elementi diversi di un documento di sovrapporsi).
Nell’implementazione
DHtml in Internet Explorer 4 di Microsoft sono stati aggiunti
oggetti multimediali e data object controllabili attraverso
scripting che permettono di utilizzare audio stereofonico, di
manipolare immagini on-the-fly (al volo), e di accedere a
database esistenti su server o client. Un altro
miglioramento introdotto da DHtml riguarda il funzionamento e
l’interattività di un documento. Un documento viene inteso
come un oggetto; il Dhtml espande il modello di documento
rendendolo più simile a quello dei linguaggi di scripting
come JavaScript e VBScript, e provvede a fornire maggiore
controllo sull’oggetto stesso. Grazie a questo modello
esteso, il contenuto della pagina Web diviene più flessibile,
il testo, le immagini e altri oggetti incorporati nel
documento possono essere nascosti oppure visualizzati a
seconda delle esigenze. Inoltre, sono stati estesi anche gli
eventi associabili agli oggetti in modo che, attraverso il
linguaggio di scripting, si possano catturare le azioni
dell’utente, intercettare la battuta di un tasto e una
varietà d’azioni del mouse.
Utilizzando
il Dynamic Html, le pagine Web non solo possono essere più
“leggere” e multipiattaforma, ma forniscono anche lo
stesso impatto emotivo di una qualsiasi applicazione
multimediale.
Nonostante
le notevoli prerogative del nuovo formato, per il DHtml non è
stato ancora deciso uno standard. Attualmente, i due maggior
produttori di browser, Netscape e Microsoft, utilizzano
diverse implementazioni all’interno dei loro browser. La
situazione è in ogni caso provvisoria. Entrambe le società
si sono infatti impegnati a sostenere il futuro standard
stabilito dal Consorzio del World Wide Web (W3C). Una volta
stabilite le caratteristiche che definiscono il modello
dell’oggetto documento e tutti gli eventi associati, la
compatibilità dei documenti all’interno dei vari browser
non rappresenterà più un problema.
Posizionamento
assoluto
A
proposito dei modelli dell’oggetto, ricordiamo che essi sono
stati introdotti per la prima volta con il linguaggio di
scripting di Netscape Navigator 2.0, ma non tutte le proprietà
degli oggetti erano visibili e quindi modificabili dal
linguaggio di scripting. Il modello dell’oggetto ha avuto
un’evoluzione vera e propria con l’introduzione di DHtml.
Per rimanere in casa Netscape, Communicator 4.0 rende
disponibili molti oggetti per l’uso con JavaScript, mentre
il suo rivale, IE 4.0, li rende disponibili tutti con VBScript.
Oggetti ed eventi combinati insieme consentono un completo
controllo sulle pagine Web. Per esempio, il testo di un Link
può cambiare font, dimensione e colore con il passaggio del
mouse sul testo, i contenuti di un articolo possono modificare
la dimensione quando il lettore lo seleziona, e il numero di
telefono può essere convalidato alla pressione di ciascun
tasto in un modulo. Come abbiamo già sottolineato, lo
standard CSS è una parte importante di DHtml e il
posizionamento assoluto del contenuto riveste un ruolo
primario all’interno dei CSS. Con il posizionamento assoluto
si intende indicare la possibilità di assegnare coordinate
esatte al contenuto sia esso rappresentato da testo oppure da
immagini. Il testo può essere ricoperto, lo sfondo può
essere allineato col primo piano senza l’uso dei frame e
delle tabelle, e il contenuto può essere organizzato in
blocchi indipendenti senza utilizzare colonne di tabelle.
Ciò
ha spalancato le porte anche alla possibilità di animare il
contenuto. Dal momento che DHtml rende disponibile ogni parte
della pagina (o la maggior parte nel caso di Communicator 4.0)
al linguaggio di scripting come oggetto, i diversi blocchi del
contenuto possono essere nascosti, visualizzati, e spostati
all’interno della pagina. Per esempio, uno script potrebbe
illuminare una voce del menu selezionato da un utente, oppure
mettere maggiormente in rilievo un particolare contenuto.
Va
notato che Netscape Communicator 4.0 dispone già del tag
<LAYER> per il posizionamento assoluto del contenuto,
tag <LAYER> però non è supportato da IE 4.0.
Tuttavia,
entrambi i programmi supportano il posizionamento assoluto con
CSS, e dal momento che il W3C ha respinto il tag <LAYER>
come standard, esso rimane il metodo preferito per entrambi i
tipi di browser
Contenuto
flessibile
Usando
i fogli di stile CSS, tutto, dall’altezza della linea a
margine all’ampiezza, al font, può essere specificato; nel
caso in cui un particolare tipo di font non sia presente sulla
macchina remota, viene selezionato quello che più si avvicina
al font scelto dall’autore. Viceversa, nella pagina Web si
potevano in precedenza utilizzare solo sette diverse grandezze
di font. Con CSS si è supera questo limite consentendo di
definire la dimensione con precisione in punti o pixel.
Internet
Explorer supporta CSS dalla versione 3.0; Netscape
Communicator dalla versione 4.0.
L’implementazione
di DHtml in IE 4.0 permette di cambiare dinamicamente tutti
gli aspetti degli stili di un documento. Per esempio, un link
può aumentare la dimensione quando il mouse gli passa sopra;
gli articoli in un indice potrebbero illuminarsi quando sono
selezionati, oppure le parole chiave di un articolo di
cinquemila parole potrebbero brillare in rosso per un accesso
più facile e più efficiente. Attualmente, Communicator 4.0
non supporta controllo di CSS tramite JavaScript
Creazione
dinamica
Come
abbiamo descritto, grazie al posizionamento assoluto il
contenuto di un documento può essere collocato ovunque e
animato. Grazie al controllo dinamico tramite CSS, può essere
modificato in ogni istante (per ora solo con IE 4.0). Ma c’è
un’altra possibilità: con la creazione dinamica delle
pagine, il contenuto può essere creato ed esposto, senza
ricaricare o ridisegnare il documento, direttamente attraverso
il modello dell’oggetto oppure attraverso il tag LAYER in
Communicator 4.0. Sebbene le possibilità di creare il
contenuto "al volo" esistesse già prima dell’DHtml,
le vecchie tecniche richiedevano che il documento intero o il
frame dovesse essere ricaricato. Inoltre grazie al data
binding, che permette la connessione del client al server per
aggiornare il contenuto di una pagina, i dati di un database
possono essere mostrati all’interno di tabelle o agli
elementi di un modulo in un documento Html. La maggior parte
delle caratteristiche di organizzazione dei dati definiti
divengono parte dei controlli, così che risulta più facile
manipolarli.
I
dati possono anche formare elementi, e ogni campo dei database
può essere visualizzato e aggiornato separatamente. I dati
presenti negli elementi del modulo possono essere spediti
indietro al server, aggiornando, se necessario, i dati.
Un
mezzo multimediale
L’implementazione
di DHtml da parte di Microsoft incorpora un set di controlli
per il multimedia che migliorano la grafica e il suono
all’interno dei documenti. Tutti questi controlli possono
essere pilotati con linguaggi di scripting, permettendo
all’autore di interagire con l’utente.
I
controlli visuali includono transizioni tra immagini tipo
PowerPoint, l’animazione e l’applicazione di filtri
digitali. Per esempio, quando si clicca su un’immagine, uno
script può applicarle automaticamente un filtro invertendone
i colori. Si può anche combinare il posizionamento assoluto
col controllo del filtro per rendere il documento animato,
oppure a un titolo importante può essere applicato un filtro
motion blur.
Con
il controllo delle transizioni, gli autori possono creare
gradevoli effetti all’apertura e alla chiusura dei documenti
Html. Il controllo della transizione avviene con un’inizializzazione
del tipo di transizione (per esempio, wipe, box in, e
dissolve) che può essere applicata al documento o ad alcuni
oggetti del documento attraverso uno script opportuno.
Il
controllo dell’animazione fornisce più accuratezza alle
animazioni. In precedenza gli autori di pagine Web dovevano
avvalersi di GIF animate (che non potevano essere controllate
con il linguaggio di script) per animare le proprie pagine.
Con il controllo dell’animazione, gli autori possono
controllare i frame per secondo, il loro ordine, e altre
proprietà di un’animazione, attraverso script inclusi nel
documento. Questo significa che le animazioni possono
rispondere all’iterazione dell’utente con ogni altro
oggetto della pagina.
Per
quanto riguarda l’audio, il controllo del mixer può essere
usato per creare e lanciare suoni stereo multi-canale. Il
sonoro può essere caricato nel controllore del mixer,
combinato con altri suoni, e poi attivato su domanda
attraverso uno script. In Communicator 4.0, l’audio
on-demand può essere realizzato attraverso pulg-in Liveaudio.
Dopo
questa introduzione dovresti esserti fatto un'idea di cosa è
e di come opera il DHTML, quindi sei pronto/a ad affrontare il
corso su DHTML su www.html.it
. Questi tutorial approfondiscono l'utilizzo pratico di DHTML.
Ogni tutorial è completato da demo utilizzabili nel proprio
Web. Sezione consigliata a chi conosce HTML e vuole inserire
effetti dinamici avanzati. Le lezioni sono 20 e sono le
seguenti, clikka sull'argomento al quale sei interessato anche
se ti consiglio (se sei alle prime armi) di seguire il corso
punto per punto data la correlazione tra una lezione e
l'altra. Buona fortuna.
Corso
sul DHTML di HTML.IT
1.
Testo
interattivo con Dynamic HTML
Compatibilità: Ms Internet Explorer
Realizzare effetti dinamici su testo ed altri elementi di
pagina in modo semplice e completo con Dynamic HTML: testo
espandibile, modifica del colore di sfondo e testo elastico.
2. Menu
gerarchici a cascata con Dynamic HTML
Compatibilità: Ms Internet Explorer, Netscape
Crea un menu gerarchico sul modello dei sistemi Windows,
attraverso un codice complesso ma agevolmente
personalizzabile. Grazie a questo tutorial riuscirai a
ottimizzare lo spazio dei tuoi documenti Web ed i menu in essi
compresi.
3. Gestire
le form con Dynamic HTML
Compatibilità: Ms Internet Explorer, Netscape
I moduli HTML sono alcuni tra gli elementi più importanti di
un documento per il Web. Grazie a DHTML è possibile rendere
il loro utilizzo dinamico e privo dei limiti estetici dei
classici form HTML. Saprai anche come nascondere e mostrare le
voci di un form, colorare le voci option ed altro ancora.
4. Testo
scorrevole con HTML dinamico
Compatibilità: Ms Internet Explorer, Netscape
Inserire testo scorrevole in un documento Web e perfettamente
compatibile con i maggiori browser. Questo tutorial mostra
come creare un effetto movimento di testo sia verticale che
orizzontale. Indicazioni anche sull'approccio di Javascript
all'argomento.
5. Posizionamento
con DHTML
Compatibilità: Ms Internet Explorer, Netscape
Posizionare dinamicamente gli elementi nella pagina è una
delle peculiarità principali di DHTML. Questo tutorial mostra
come creare e gestire finestre a scomparsa all'interno di un
documento Web.
6. Frame
in linea e scrollbar grafiche con DHTML
Compatibilità: Ms Internet Explorer, Netscape
Creare frame interni alla pagina, con elementi assolutamente
indipendenti dal flusso dei dati del documento. Questo
tutorial mostra come impostare tali finestre in forma grafica,
superando i limiti del tag IFRAME supportato solo da MsIe.
7. Scroller
con testo e immagini fisse
Compatibilità: Ms Internet Explorer, Netscape
Come inserire immagini o altri elementi fissi nonostante lo
scroller di pagina. Questo tutorial spiega passo passo come
ottenere tale risultato compatibilmente con i due maggior
browser.
8. MouseTrace:
immagini che seguono il mouse
Compatibilità: Ms Internet Explorer, Netscape
Crea un effetto per cui un'immagine a scelta segue il
puntatore del mouse in ogni suo movimento sul video. Il
tutorial si compone di due esempi che mostrano come ottenere
il meglio da questo codice.
9. Menu
a scomparsa
Compatibilità: Ms Internet Explorer
Queste demo, sfruttanto le potenzialità del posizionamento
dinamico e gestione degli eventi di DHTML, consentono di
creare menu a scomparsa slideshow, cioè visibili soltanto al
click del mouse. Il tutorial si compone di 5 esempi.
10. Modificare
dinamicamente il background
Compatibilità: Ms Internet Explorer, Netscape
Il tutorial si compone di due esempi: modificare dinamicamente
il colore dello sfondo dopo che la pagina è stata
completamente caricata; modificare l'immagine di sfondo sempre
dopo che la pagina è stata caricata.
11. Scroller
di testo e immagini
Compatibilità: Ms Internet Explorer, Netscape
Tipico effetto marquee, ma compatibile con i due browser più
diffusi. Grazie a questo tutorial imparerai a visualizzare
oggetti e testo in movimento verticale ed orizzontale. Il
tutorial è corredato da ben 6 esempi pratici.
12. Effetti
DHTML per Internet Explorer
Compatibilità: Ms Internet Explorer
Tutorial che mostra come ottenere effetti dinamici per il
browser di Redmond: aggiungi a preferiti di MsIe da link,
finestra a tutto schermo, filtri su immagini e apertura frame
degli active channel.
13. Menu
espandibile ad albero
Compatibilità: Ms Internet Explorer, Netscape
Creare menu sul modello dei sistemi Windows, con voci
visualizzate o nascoste in base ai click del mouse. Questo
tutorial è utilissimo se intendi ottimizzare lo spazio e la
presentazione dei tuoi menu. Il tutto è corredato da tre
esempi pratici.
14. Nascondere
il codice HTML di un documento
Compatibilità: Ms Internet Explorer, Netscape
Grazie a questo tutorial imparerai come inibire l'uso del
tasto destro del mouse e dunque evitare l'attivazione della
voce "visualizza HTML" del browser. In altri termini
potrai, almeno in parte, proteggere il codice fonte delle tue
pagine.
15. Bottoni
animati e link a scorrimento
Compatibilità: Ms Internet Explorer, Netscape
Questo tutorial mostra come ottenere uno splendido effetto
dinamico su menu a scorrimento. Il tutto si compone delle
immagini a corredo grafico e la pagina di esempio pratico.
16. Gestire
data e ora con HTML dinamico
Compatibilità: Ms Internet Explorer, Netscape
Tutorial sulla gestione del tempo in HTML dinamico: confronti
con Javascript, un orologio dinamico per Ms Internet Explorer,
un orologio dinamico crossbrowser, un orologio sulla TITLE bar
di MsIe e un orologio sullo sfondo del documento.
17. Effetti
dinamici sul testo di commento alle immagini
Compatibilità: Ms Internet Explorer, Netscape
Grazie a questo tutorial imparerai a rendere dinamica la
visualizzazione dei commenti alle immagini. Non più semplice
testo inserito all'interno dell'attributo ALT delle immagini,
ma testo a scorrimento anche su testo ed altri elementi. Il
tutorial si compone di 3 esempi pratici.
18. Effetti
dinamici in entrata e uscita di pagina
Compatibilità: Ms Internet Explorer, Netscape
I classici effetti
di transizione esclusivamente compatibili con MsIe, sono
resi possibili anche per Netscape. Questo tutorial mostra 5
differenti effetti di transione in entra di pagina: righe
multiple orizzontali, 2 righe verticali, 2 righe orizzontali,
visualizzazione progressiva e righe multiple verticali.
19. Menu
dal tasto destro del mouse
Compatibilità: Ms Internet Explorer
Un tutorial che mostra tutta la semplicità che l'approccio di
MsIe ha introdotto nella gestione di DHTML. Con pochissime e
semplici righe di codice è possibile creare un menu dal tasto
destro del mouse, con voci personalizzabili.
20. Il
Document Object Model di DHTML
Compatibilità: Ms Internet Explorer
Panoramica generale sulla storia e l'utilizzo attuale del DOM
per DHTML, sia per quanto riguarda il modello adottato da
Microsoft che quello adottato per Netscape.
