|
Testo
scorrevole
Inserire
testo scorrevole in sequenza verticale od orizzontale all'interno di una
pagina Web è stato finora possibile con l'ausilio di applet Java.
Purtroppo l'inserimento di applicazioni Java rallenta notevolmente il
caricamento della pagina. Da ciò consegue una certa diffidenza da parte
degli sviluppatori di pagine Web, che spesso preferiscono rinunciare ad un
effetto sostanzialmente estetico e non funzionale.
Anche Javascript, ad onor del vero, consente un effetto simile, sfruttando
la propria sintassi e le proprietà dei form HTML :
Visualizza
l'esempio pratico
Questo esempio ha evidenti limiti di ordine estetico, sui quali si
potrebbe sorvolare, e di ordine tecnico, dai quali non si può prescidere.
Riguardo questi ultimi è doveroso sottolineare, infatti, come il codice
script esaminato sfrutti in modo obsoleto il modello di oggetti, accedendo
soltanto ad una limitata porzione degli elementi.
In altre parole il codice preso in esame non sfrutta le innovazioni
introdotte dal DOM (Document Object Model) di Internet Explorer 4, che al
contrario della rivale Netscape, prevede un oggetto "all".
Questo oggetto consente agli eventi di accedere a tutti gli elementi del
documento.
In questo articolo, quindi, viene presentato un esempio in HTML dinamico
che genera lo scorrimento verticale di testo, sul modello, per intenderci,
dei titoli di coda di un film. E' garantita la totale compatibilità con
Netscape 4 e MS Internet Explorer 4.
L'esempio comprende quattro file:
- dhtml02.htm
- bannerconfig.js
- banner.js
- stile.css
- bianco.gif
dhtml02.htm
Questo è il file deputato ad ospitare l'effetto di scorrimento del testo.
All'interno di esso non va inserita l'intera sintassi Javascript ma un
richiamo ai file esterni con estensione .js e .css, oltrechè il
posizionamento dinamico nella pagina.
Quest'ultimo si realizza attraverso il codice:
<IMG SRC="bianco.gif" NAME="holdspace" ID="holdspace"
WIDTH="200" HEIGHT="150"
STYLE="visibility:hidden; position:absolute; top:150px; left:200px;">
L'attributo ID identifica in modo univoco l'elemento "holdspace".
"WIDTH" ed "HEIGHT" stabiliscono rispettivamente la
larghezza e l'altezza della finestra entro la quale scorre il testo.
"STYLE" posiziona in modo assoluto, secondo le regole dei fogli
di stile, la finestra all'interno della pagina, stabilendo le distanza dal
margine superiore (top) e sinistro (left).
Come accennato, il file .htm non contiene l'intero codice Javascript che,
per maggior ordine e semplicità, è contenuto in due file esterni con
estensione .js. Mentre i fogli di stile sono stati raccolti in un altro
file con estensione .css.
I file con estensione .js vengono richiamati con il codice contenuto alla
fine del documento htm, in posizione immediatamente precedente la chiusura
del tag </BODY>:
La possibilità di includere il codice Javascript in file esterni è
prevista dalle nuove specifiche di HTML 4.0, ed è attualmente supportata
da Netscape 3 e 4, e da Internet Explorer 4. Il più evidente vantaggio di
questa nuova funzionalità è nel poter scrivere librerie di script
condivisibili da più file htm. In altre parole uno script usato da
diversi documenti non deve più essere scritto in ogni pagina. In questo
modo si realizza una netta separazione tra contenuti e presentazione, con
un guadagno in termini di funzionalità e di tempo. Se, infatti, si vuole
modificare il contenuto dello script, sarà sufficiente agire sul solo
file esterno, lasciando inalterati i singoli documenti. Oltretutto il file
esterno viene caricato nella cache del browser e richiamato ad ogni nuova
pagina, velocizzando in questo modo il caricamento delle stesse.
I browser che supportano l'attributo SRC ignorano il contenuto
dell'elemento SCRIPT. Al contrario, i file che non supportano l'attributo
SRC, eseguono come codice il contenuto dell'elemento SCRIPT.
Come
il codice Javascript, anche un foglio di stile può essere allegato ad un
documento esterno. Ciò avviene attraverso la creazione di un file con
estensione .css contenente gli elementi tipici di un foglio di stile. Il
richiamo all'interno della pagina html, avviene con una semplica riga di
codice inserita tra i tag <HEAD>:
<link rel=stylesheet href="stile.js">
Nel nostro esempio il foglio di stile collegato contiene il seguente
codice:
La prima riga di codice stabilisce che i link da visitare e già visitati
non abbiano la sottolieatura tipica dei collegamenti ipertestuali. La
seconda riga, invece, prevede che tale sottolineatura appaia quando il
puntatore del mouse passa sul collegamento. Le righe successive si
riferiscono alla formattazione e giustificazione del testo.
Bannerconfig.js
Questo file, come del resto intuibile dal nome, configura le diverse
opzioni relative allo scorrimento del testo, nonché al contenuto dello
stesso.
Il codice:
var NS4 = (document.layers) ? true : false;
var IE4 = (document.all) ? true : false;
determina quali browser possano accedere al documento, e restituisce il
valore "true" o "false". Come precedentemente
accennato, questa demo è compatibile con Netscape 4 (NS4) e Internet
Explorer 4 (IE4).
Il codice script che segue immediatamente il controllo dei browser, è
quello che determina le opzioni di visualizzazione del testo:
var interval = 10;
determina la velocità di scorrimento del testo. A valori più bassi
corrisponde una velocità di scorrimento più elevata.
var increment = 1;
Questo codice incrementa il dato precedente, moltiplicandolo per il suo
valore. Ad un aumento di questo valore, diminuisce la velocità di
scorrimento del testo.
var pause = 1000;
Questo valore, espresso il millisecondi, si riferisce alla pausa di
visualizzazione del testo. Ovviamente, a valori più alti fa riscontro un
maggior tempo di visualizzazione.
var bannerColor = "#FFFF80";
Questo codice fa riferimento al colore di background espresso in valori
alfanumerici. Nell'esempio presentato in questo articolo il colore
impostato è il giallo.
Se non si desidera ottenere tonalità particolari si possono inserire i
colori nella forma letterale (red, white, yellow ecc.).
var leftPadding = 3;
var topPadding = 30;
Questi valori stabiliscono rispettivamente: la distanza in pixel dal
margine destro e superiore della finestra deputata alla visualizzazione
del testo (impostata nel file htm con le misure: WIDTH="200"
HEIGHT="150").
Il codice contenuto all'interno dell'oggetto array, stabilisce il testo da
visualizzarsi nell'esempio:
Come si evince dal codice, l'inserimento di link è possibile grazie al
tag <A class=newslink HREF='http://inews.tecnet.it'></A>.
Perché il codice funzioni correttamente non è possibile inserire testo
che contenga apici doppi.
Per aggiungere un'altra schermata di testo è sufficiente scriveere altro
codice all'interno di "", facendo attenzione a che l'ultimo
gruppo si chiuda senza la virgola finale.
Banner.js
Questo file, a differenza di quelli esaminati finora, non è
personalizzabile e non va quindi alterato nel codice.
Il ruolo svolto da questo file è determinante ai fini del corretto
funzionamento della demo, e consiste nella:
- assengazione
del codice necessario alle variabili;
- definizione
degli elementi principali e "child" delle proprietà;
- creazione
degli elementi principali e child dell'elemento "banner".
Un
effetto simile a quello finora esaminato si può ottenere in altro modo,
ma limitatamente a Ms Internet Explorer 4. La demo che segue, infatti, si
serve delle nuove specifiche dei frame in linea supportate esclusivamente
dal browser di Redmond.
I frame in linea, previsti ufficialmente da HTML 4.0, consentono di
annidare all'interno del tag frameset esterni. Grazie a questa opportunità
possiamo creare all'interno del nostro documento htm una finestra Iframe
all'interno della quale visualizzare un file esterno. Ciò avviene nel
modo seguente:
<IFRAME src="file_esterno.htm" name="iframe"
frameborder=0 scrolling=no width=251 height=173 align=middle></IFRAME>
Come evidente, IFrame segue le regole tipiche dei frame HTML. In questo
caso abbiamo eliminato lo scroller di pagina e reso invisibile il bordo.
Un altro documento di nome "file_esterno.htm" viene creato, e
successivamente visualizzato all'interno di IFrame. Il file esterno deve
contenere all'interno del tag <HEAD> il seguente codice:
Visualizza
l'esempio pratico
La velocità di scorrimento della pagina è regolata dal valore
window.setTimeout("runTimer();", 100) ed è espressa in
millisecondi.
Se la pagina dovesse contenere uno sfondo complesso, come per esempio
un'immagine, consigliamo di rendere fisso il background di pagina con il
tag:
<BODY bgproperties="fixed">
Iframe risulta, rispetto all'esempio precedente, di più agevole
impostazione e comprensione. I suoi limiti maggiori sono
nell'incompatibilità con Netscape, e nella necessità di richiamare file
html esterni. Cosa, quest'ultima, che vanifica uno dei punti qualificanti
di HTML dinamico: la diminuzione del numero di passaggi dal lato server a
quello client.
Fonte: Html.it |
