|
|
Dynamic
HTML
Corso
su DHTML
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.
Sommario
Posizionamento
assoluto
Contenuto
Flessibile
Creazione
dinamica
Un
mezzo multimediale
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.
^
On
Top
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.
^
On
Top
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.
^
On
Top
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.
^
On
Top
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
di 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.
^
On
Top
|
ICQ: