*Linux Guide

Fare Web - Progetto e Realizzazione - Parte 10

*

Oggetti e Contenuti

JavaScript utili e accessibili (o quasi!)

JavaScript (che da ora chiameremo con la sigla JS) è un linguaggio di scripting orientato agli oggetti e basato sugli eventi: se faccio questo allora succede quello, se faccio quest'altro succede quell'altro.
Questo modo di procedere ha determinato la produzione di centinaia di scripts che ricoprono utilità di svariatissimo genere a carico di tantissimi aspetti della pagina web e non solo. JS è anche alla base di tutti gli oggetti DHTML e conferisce dinamismo e interattività agli elementi html i quali, uniti a opportune soluzioni stilistiche, possono dare origine a effetti e soluzioni grafico-interattive veramente eccezionali come menu, effetti dinamici dello sfondo e/o delle immagini, box informativi scorrevoli a comando, effetti grafici, controlli funzionali, soluzioni informative ed altro.
In genere un prodotto DHTML si inserisce in una pagina con una certa difficoltà in quanto spesso è composto da due o tre blocchi di codice da inserire in aree diverse nell'ambito del codice generale della pagina che ne verrà beneficiata. Ma qual'è il problema maggiore dell'uso di JS?
Il fatto che JS è un linguaggio che il browser deve leggere e attivare e lo fa con degli "additivi" che possono essere disabilitati dall'utente o non essere supportati dallo strumentario dell'utente stesso. Un grosso problema!
Affidare i contenuti totalmente a JS significa diffondere informazioni e contenuti che una parte della popolazione di internet non potrà vedere e consultare e questo affonda i concetti di accessibilità e usabilità.
Da alcune analisi statistiche circa il 10% di utenti disabilita o non supporta JS, ma non tutto è perduto o irrimediabile.
Innanzitutto evitiamo quei JS che gestiscono e includono interamente le informazioni anche dal punto di vista strutturale, quindi evitiamo l'uso di "include" ovvero quegli script che producono oltre che le informazioni, anche la struttura che accoglie tali informazioni.
Poi evitiamo assolutamente gli scripts nei quali gli eventi non possano essere gestiti dall'utente come box autoscorrevoli nei quali le informazioni scorrono senza la possibilità di fermarle.
Sono da evitare anche gli script che dirigono automaticamente ad altre pagine. Sono da scartare quei menu nei quali i links sono all'interno del JS stesso, mentre sono da prediligere quelli in cui i collegamenti sono alloggiati in elementi che fanno parte del codice della pagina, ma che vengono gestiti da JS.
Poi è necessario usare tutti gli accorgimenti offerti da xhtml per rendere usabili e massimamente accessibili questi oggetti e vediamo come fare includendo un motore di ricerca conosciuto come Google e un menu di scelta rapida di siti importanti, tutti oggetti pratici, semplici e molto efficaci e che sono visibili in questa pagina.

Per prima cosa affrontiamo l'inserimento della barra di ricerca di Google. Si tratta di un modulo (form) che si inserisce direttamente nel codice della pagina nel posto prescelto, è di facile configurazione, ma occorre effettuare delle modifiche. Infatti il codice offerto da Google si adatta a documenti redatti nel vecchio HTML 4.0 mentre noi lo adatteremo ad xhtml 1.0. Quello sotto riportato è il codice originale :


<!-- Search Google -->
<center>
<FORM method=GET action="http://www.google.com/search">
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF="http://www.google.com">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif" border="0" ALT="Google" align="absmiddle"></A>
<INPUT TYPE=text name=q size=31 maxlength=255 value="">
<INPUT TYPE=hidden name=hl value=it>
<INPUT type=submit name=btnG VALUE="Cerca con Google">
</td></tr></TABLE>
</FORM>
</center>
<!-- Search Google -->

Si nota subito un tipo di codificazione astruso e molto complesso per la semplicità effettiva dell'oggetto che andremo ad inserire nella nostra pagina. Per rendere conforme l'oggetto alle direttive dell'xhtml 1.0 Transitional dovremo portare tutto a lettere minuscole, dovremo chiudere gli elementi non chiusi (input), elimineremo l'immagine offerta da Google, toglieremo quell'inutile tabella usata a soli fini presentazionali e rimuoveremo tutte le dichiarazioni stilistiche inline. Otterremo quindi questo codice :


<!-- Search Google -->
<form method="get" action="http://www.google.com/search">
<input type="text" name="q" />
<input type="hidden" name="hl" value="it" />
<input type="submit" name="btnG" value="Cerca con Google" />
</form>
<!-- Search Google -->

Fatto ciò dovremo rendere accessibilke e usabile questo oggetto con l'aggiunta degli indici di tabulazione e di qualche altro artificio come evidente sotto :


<!-- Search Google -->
<form method="get" id="google" action="http://www.google.com/search">
<p style="margin:0px;">
<span class="blue">G</span>
<span class="red">o</span>
<span class="yellow">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</p>

<input type="text" tabindex="40" id="q" name="q" />
<input type="hidden" name="hl" value="it" />
<input type="submit" tabindex="41" id="btnG" name="btnG" value="Cerca con Google" />
</form>
<!-- Search Google -->

Si notano gli indici di tabulazione (tabindex) con numero alto in modo che siano successivi a quelli inseriti in altre aree della pagina. Poi si nota che gli elementi più importanti hanno ricevuto una identificazione univoca (id="") per poterli poi rendere soggetti agli influssi dei CSS ed infine si nota una aggiunta di codice (evidenziata di violetto) che è il titolo del modulo di ricerca. Analizziamo quindi il CSS:


#google{width : 94%;
text-align : center;
padding : 5px;
font-size : 120%;
}

#google .blue{color : #00f;
}
#google .red{color : #c00;
}
#google .green{color : #32cd32;
}
#google .yellow{color : #ffd700;
}


#google #q,#google #btnG{width : 90%;
height : 5%;
border-style : solid;
}

La larghezza del modulo (width : 94%) permette a questo di adattarsi nell'elemento raccoglitore. Le dichiarazioni cromatiche evidenziate in violetto, conferiscono alla scritta "Google" l'aspetto multicolore che tutti conoscono. Le altre dichiarazioni stilistiche sono relative al campo di immissione e al pulsante di attivazione della ricerca.

Abbiamo quindi visto come inserire uno strumento utile senza usare tabelle, senza usare immagini e mantenendo la pagina leggera e graficamente carina. Ora passiamo ad inserire il "Menu descrittivo" in JavaScript. Per prima cosa apriamo il Blocco Note e inseriamo lo script JavaScript in un nuovo documento e salviamolo nella stessa cartella che contiene i files del sito, con l'estensione .js (menudesc.js). Lo script da salvare è il seguente :


var textdisplay=new Array()
textdisplay[0]="Il sito italiano dedicato all'accessibilità"
textdisplay[1]="La più importante risorsa online per webmasters"
textdisplay[2]="Il quotidiano online sul mondo dell'informatica"
textdisplay[3]="Il sito per tenere aggiornato il proprio Mac"
textdisplay[4]="Il sito ufficiale della grande fabbrica di Computers"


function jumptolink(what){
var selectedopt=document.a294.a969.options[what]
if (document.getElementById && selectedopt.getAttribute("target")=="newwin")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}

function displaydesc(which){
if (document.all)
descriptions.innerHTML=textdisplay[which]
else if (document.getElementById)
document.getElementById("descriptions").innerHTML=textdisplay[which]
}

displaydesc(document.a294.a969.selectedIndex)
document.a294.a969.options[0].selected=true

L'unica area di codice che saremo autorizzati a modificare secondo le nostre esigenze, è quella evidenziata dove potremo inserire brevi descrizioni dei siti che richiameremo con il menu. Lo script deve essere collegato alla pagina e nell'area di testa del codice della medesima, tra i tags <head> . . . </head> inseriremo il link utilizzando la seguente formula sintattica :


<script type="text/javascript" src="menudesc.js"></script>

Il menu vero e proprio ha il seguente codice :


<form id="desc" name="a294" action="#">
<p style="margin:0px; text-align:center;">Siti importanti</p>
<fieldset>
<select name="a969" size="1" onchange="javascript:displaydesc(document.a294.a969.selectedIndex)" tabindex="50">
<option selected value="http://www.diodati.org">Diodati.org</option>
<option value="http://www.html.it">HTML.it</option>
<option value="http://www.punto-informatico.it">Punto Informatico</option>
<option value="http://www.macupdate.com">Macupdate</option>
<option value="http://www.apple.com">Apple</option>
</select>
<input type="button" value="Vai!" onclick="javascript:jumptolink(document.a294.a969.selectedIndex)" onkeypress="javascript:jumptolink(document.a294.a969.selectedIndex)" tabindex="51" />
</fieldset>
<span id="descriptions"></span>
</form>

Noteremo che il numero di opzioni disponibili (5 siti) è esattamente lo stesso del numero di descrizioni presenti nello script e così deve essere, pena il non funzionamento dello script. Si nota anche la presenza degli indici di tabulazione e soprattutto si nota l'attributo "onkeypress" che fa si che lo script sia attivabile anche con la sola tastiera, infatti l'uso del solo attributo "onclick" presuppone che lo script sia attivabile con il solo uso del mouse.
Passiamo quindi ad inserire un contenuto alternativo per chi abbia disabilitato o non supporti JavaScript.
Si tratta di inserire il marcatore <noscript> che fa si che il suo contenuto compaia solo se il browser sia disabilitato o non supporti JavaScript. Si colloca il marcatore nell'area dove viene alloggiato l'oggetto gestito da JS e si inseriscono all'interno i dati che lo script disabilitato non potrà mostrare, altrimenti, se i dati sono molti, si inserisce un collegamento ad una pagina che li contiene e che li renda quindi disponibili. Nel nostro caso il tag <noscript> è stato prodotto in questo modo :


<noscript>
<p style="font-size:80%;padding:2px;">Se vedi questa scritta si vede che il tuo browser non supporta JavaScript o è stato disabilitato all'uso del medesimo. I dati contenuti nell'oggetto gestito da JavaScript sono i seguenti:</p>
<ul style="font-size:90%;">
<li><a href="http://www.diodati.org" style="color:#00f;">Diodati.org</a></li>
<li><a href="http://www.html.it" style="color:#00f;">HTML.it</a></li>
<li><a href="http://www.punto-informatico.it" style="color:#00f;">Punto Informatico</a></li>
<li><a href="http://www.macupdate.com" style="color:#00f;">Macupdate</a></li>
<li><a href="http://www.apple.com" style="color:#00f;">Apple</a></li>
</ul>
</noscript>

Si nota come dopo il tag "noscript" sia inserito un marcatore di paragrafo il cui stile è stato inserito inline. Si nota anche l'avvertimento dato all'utente sui motivi del mancato funzionamento del menu e su come raggiungere gli stessi obiettivi. Poi è evidente l'uso di una lista per elencare i vari collegamenti. Questo è un accorgimento che deve sempre essere utilizzato per ogni script che venga impiegato nel rispetto di chi ha problemi tecnici nel raggiungere le informazioni.

Concludiamo questa esposizione su come inserire uno script in una pagina, con l'elenco dei siti che raccolgono scripts JavaScript di grande utilità e di vario genere :

  1. JavaFile.com
  2. DHTML Central
  3. Java Script Kit
  4. Java Script Kit
  5. Simply the Best
  6. Dynamic Drive
  7. Open Cube
  8. JsDir
  9. Hot Scripts
  10. JavaScript Resource
  11. Web Scripts Directory

Passiamo ora a vedere come inserire un oggetto .swf, prodotto con il famoso programma per animazioni Flash di Adobe, in modo che sia massimamente accessibile.

<< Precedente | Indice | Successiva >>

Linux Guide | Torna in alto