|
Testo
interattivo
HTML
dinamico permette, attraverso l'uso congiunto di CSS (Cascading Style
Sheet), script e codice HTML, di creare pagine web interattive mediante i
cosidetti stili dinamici. Nella pratica ciò significa che gli
sviluppatori di pagine web hanno, grazie a queste nuove specifiche, la
possibilità di modificare l'aspetto di un documento senza che questo
venga ricaricato.
Un uso particolarmente interessante degli stili dinamici è quello che
consente la creazione di sommari espandibili che, a seconda delle scelte
effettuate, viene esposto o nascosto alla vista del browser. Uno degli
esempi più evidenti di tale struttura è visibile presso l'home page di
Microsoft.
Il modello di stile dinamico considerato negli esempi di questo articolo
è compatibile esclusivamente con MS Internet Explorer 4, mentre Netscape
ha percorso una strada diversa adottatando il modello JASS (JavaScript
Accesible Style Sheets). Tale incompatibilità è il freno maggiore allo
sviluppo di DHTML presso i creatori di pagine web, che poco tollerano
l'idea di creare siti dinamici che discriminino l'accesso agli utenti
dell'uno o dell'altro browser.
Gli stili dinamici permettono agli sviluppatori di rendere inizialmente
visibile solo una parte del documento, con la possibilità, attraverso la
definizione di elementi e classi in DHTML, di espanderne la struttura e
visualizzarne il contenuto in modo analitico.
Il codice che segue è un esempio molto semplice di tale struttura:
Visualizza
l'esempio pratico
In questo esempio vengono create tre classi: fisso, espandibile e vuoto.
La classe "fisso"stabilisce gli elementi che, una volta cliccati,
cambiano aspetto alla struttura e si associa all'attributo child. Quest'ultimo
contiene l'ID dei dati da nascondere o visualizzare, e identifica, in modo
univoco, gli elementi di questo genere all'interno della struttura.
Nel caso specifico la classe "fisso" determina, oltre al colore
blu del testo, il tipo di puntatore che il mouse deve assumere quando si
trova su un elemento della classe stessa.
Quando si clicca sull'elemento "fisso", il nome di classe dei
dati cambia da "vuoto" a "espandibile", o viceversa,
generando l'effetto desiderato.
Gli SCRIPT indicano al browser come interpretare le informazioni presenti
in una pagina web. In questo modo, relativamente alla marcatura presente
tra <SCRIPT></SCRIPT>, il browser delega all'autore la
gestione degli eventi del documento. Nel momento in cui il browser legge,
attraverso una particolare procedura chiamata di "parser", la
marcatura del documento ed incontra <SCRIPT>, ne passa il contenuto
all'elaboratore di script, per poi continuare l'interpretazione del resto
della pagina.
I browser che non supportano la gesione di script ignorano quanto posto
all'interno di <SCRIPT></SCRIPT>
La
proprietà "CSS cursor" è correttamente interpretata solo da MS
Internet Explorer 4, e permette di impostare diversi tipi di cursori.
L'esempio citato è strutturalmente molto semplice, ma è possibile
renderlo più complesso con l'aggiunta di links con supporto di liste o
immagini.
Gli stili dinamici permettono di animare il testo di un documento HTML
grazie alle proprietà dei fogli di stile e le potenzialità di DHTML.
L'esempio seguente mostra come modificare dinamicamente il colore del
testo quando il cursore del mouse si posiziona sullo stesso:
Visualizza
l'esempio pratico
Il valore dell'attributo CLASS, nel momento in cui il mouse passa
sull'elemento H1, diventa, nel primo caso "blue", e nel secondo
"red". In questo modo viene adottato il colore rosso specificato
per "red" ed il colore blu specificato per "blue".
Altro esempio nel quale viene fatto uso di script e fogli di stile globali
è quello che permette di assegnare un colore di background dinamico ad un
determinata porzione di testo:
Visualizza
l'esempio pratico
Il codice contenuto tra <STYLE></STYLE> determina il colore e
la grandezza del testo. Quest'ultima viene definita in base ai
"punti" (pt), ognuno dei quali rappresenta 1/72 di pollice. I
punti fanno riferimento esclusivamente allo spazio verticale occupato
sullo schermo, mentre la larghezza aumenta proporzionalmente all'aumentare
della misura verticale.
Il colore del testo può definirsi con un identificatore o una lista di
componenti RGB. Il primo dei due modi è semplice ed intuitivo, visto che
è possibile riferirsi al nome inglese dei colori: red, blue, gray, green
ecc.
Il formato RGB usa, per definire i colori, tre numeri interi compresi tra
0 e 255, mediante una scala di valori lineare. Il rosso, quindi, diventa
255,0,0 e le sfumature cromatiche si realizzano attraverso le combinazioni
di valori.
In HTML i valori numerici dei colori vengono definiti in base alla
cosidetta "tripletta esadecimale", ovvero un insieme di tre
numeri e due cifre esadecimali.
Nel breve esempio che segue, uno stesso foglio di stile si serve dei due
metodi sopraesposti per definire il colore rosso del testo:
L'evento OnMouseOver si verifica quando il mouse passa sull'elemento
indicato, ed è accompagnato dall'evento OnMouseOut che, invece, si
realizza quando il mouse viene allontanato dall'elemento.
Tali eventi espongono gli stessi parametri di OnMouseDown e OnMouseUp.
Il concetto di evento (quale notifica generata in seguito ad azione
dell'utente) è fondamentale in DHTML, che proprio grazie ad esso, espone
un gruppo di eventi tali da consentire alla pagina l’interazione tra
utente e documento.
Questa è una delle peculiarità del modello di oggetti dell'HTML
dinamico.
Fonte:
Html.it |
