html514
Corso html 5, lezione 14.
Roberto Abutzu su uiciechi.it, 2013-11-12.

Quattordicesima parte: usiamo i Javascript .

**********

I Javascript.

Javascript è un vero e proprio linguaggio di programmazione e, utilizzato all'interno delle pagine 
html, permette la creazione di script per aggiungere
delle funzioni utili e interessanti per migliorare il sito.

Premetto che questo corso non si occupa di spiegare questo linguaggio, ma si limita ad implementare 
alcuni script trovati in rete per darne prova delle
potenzialità e, ovviamente, per abbellire il risultato di questo corso.

Lo scopo è, e deve rimanere, quello di utilizzare script già creati da altri, non di crearne noi, 
se non altro, per far capire che in giro c'è già tanto
materiale da poter usare e, magari, anche per stimolare a cercare un manuale di Javascript e 
cominciare ad imparare a programmarceli da soli.

Questi script possono essere reperiti in rete ed esistono migliaia di siti che ne mettono a 
disposizione. Di solito è sufficiente copiarli e inserirli
all'interno della index e delle pagine dove vogliamo che lo script operi.

In parole semplici, lo script è un codice che realmente può effettuare delle funzioni o delle 
operazioni aggiuntive al sito in modo automatico. Lo script
esegue fisicamente qualcosa che non è permesso al linguaggio Html. Infatti, proprio per questo, 
questo linguaggio non viene da molti classificato come
linguaggio di programmazione.

Non inoltriamoci troppo in questo discorso, perché sono troppe le differenze e rimando alla rete 
Internet i curiosi, in modo che chi vuole, si va a cercare
le spiegazioni dettagliate nei siti specializzati per la programmazione.

Continuiamo il nostro discorso, procedendo ad operare sulla nostra home page, il file index.html, 
inserendo nella nostra pagina uno script che ci vocalizzerà
la data e l'ora con un messaggio di saluto. Per funzionare non serve una connessione internet in 
quanto comunque lo script fa riferimento all'orologio
del sistema.

La cosa importante da non dimenticare mai, è quella di cercare di inserire questi script 
all'interno di tag div, in modo da delimitare bene l'area dove
reperirli all'interno della pagina, nel nostro caso,index.html.

Purtroppo, inserendo parecchio codice le pagine si allungano tantissimo,quindi, è fondamentale 
metterci nelle condizioni di poter individuare e raggiungere
velocemente gli elementi che inseriamo, quando vogliamo fare modifiche al codice.

Per prima cosa inseriamo un tag div per tutta la nostra pagina, compresi i commenti. Non è 
obbligatorio, ma vi ricordo che con i fogli di stile, questi
div ci consentono di intervenire nella formattazione successivamente.

Per la nostra pagina, questa tag div è invece obbligatoria per far funzionare uno script che 
dobbiamo inserire e che opera proprio su questa tag.

Apriamo il nostro file index.html e, subito dopo l'apertura della tag body, , inseriamo questo 
codice:

Questa è una tag di apertura di un div, con il suo identificativo, ovvero il suo nome che 
riprenderemo poi nei file css.

Portiamoci in fondo al nostro file index.html e nella riga precedente alla chiusura della tag body, 
, inseriamo questo codice:

Chiudiamo quindi questo div e notate il commento che spiega la funzione di questa tag.

Ora possiamo inserire il nostro script, inserendo il codice all'interno di una tag div. Per 
inserire una tag div che contiene lo script, inseriamo l'apertura
all'inizio e la chiusura alla fine del codice del Javascript, sempre con il suo commento che ne 
indichi l'utilizzo.

Avremo, quindi, l'apertura della tag div, l'apertura della tag script, tutto il codice dello script 
che ricordo è in un altro linguaggio, Javascript, la
tag di chiusura dello script ed infine la chiusura della tag div.

Copiate tutto il codice sottostante ed inseritelo subito dopo l'apertura della div Page.

Salvate le modifiche e provate ad aprire la vostra home page, index.html.

Attenzione! Vi potrebbe apparire un fumetto che vi avvisa che dovete abilitare Javascript per far 
funzionare lo script. Se non venite posizionati direttamente
su questa richiesta, premete f6 per portarci il vostro focus e consentite al browser di utilizzare 
Javascript.

Fate attenzione, perché questa richiesta dopo pochi secondi scompare, quindi, abilitatela subito. 
Se non riuscite ad abilitarla, sarà sufficiente premere
f5 per aggiornare la pagina e subito premete f6 per confermare l'utilizzo di Javascript.

Questo script è stato inserito direttamente all'interno della tag Body. Il messaggio che viene 
vocalizzato dallo Screen-reader, viene anche visualizzato
a schermo per le persone vedenti ed è posizionato precisamente a sinistra, sopra il nome del sito.

Salvate le modifiche, apriamo la index con internet Explorer per verificare la funzionalità delle 
modifiche eseguite.

Inseriamo ora un altro Javascript.

E' doveroso dire che il linguaggio HTML 5 è ancora in fase di sviluppo, anche se ormai ha raggiunto 
una fase abbastanza definitiva. Per questo motivo,
non tutti i browser lo gestiscono in modo completo. Come già ripetuto in varie occasioni, 
aggiungiamo a questo problema il fatto che molti dei browser
utilizzati sono piuttosto datati, e risulta che molte delle nuove tag di questo linguaggio non 
vengono riconosciute e, di conseguenza, non interpretate
correttamente.

A minimizzare i problemi di riconoscimento delle tag, ci viene in aiuto un piccolo script da 
inserire all'interno della tag head, appena prima della sua
chiusura. Questo Javascript serve proprio per indicare ai browser di interpretare queste tag in 
modo corretto.

Quindi, per inserire questo Javascript, nella riga che precede la tag , inseriamo il codice che 
segue:

Salviamo le modifiche. Anche se in questo caso non abbiamo nulla per controllare la corretta 
funzionalità di questo Javascript, ma, essendo delle indicazioni
consigliate e fornite direttamente dal W3C, noi ci fidiamo ad occhi chiusi.

Ecco un altro Javascript che inserisco in tutti i siti che costruisco. Con questo Javascript si 
rende il sito molto funzionale, oltre a dargli una nota
in più per l'accessibilità. Infatti, consente a tutti gli ipovedenti e a tutte le persone anziane 
di avere la possibilità di ingrandire, tramite dei link
grafici, tutta la pagina web.

Questa utilità, ripeto, per gli ipovedenti e per le persone anziane, navigatori che faticano a 
leggere i caratteri piccoli, fornisce le seguenti possibilità:

1.Dimensioni normali, alt più 1.
2.Dimensioni medie, alt più 2.
3.dimensioni grandi, alt più 3.
Come avete constatato, all'interno del Javascript gli ho assegnato anche dei tasti di scelta rapida 
come indicato sopra. A video appare un grafico che
riproduce la lettera A di tre dimensioni diverse. Cliccando su una di queste lettere, la persona 
che ne ha bisogno, ipovedente o anziana, può variare le
dimensioni della pagina ingrandendola come desidera. L'importanza di questo Javascript è che riesce 
ad ingrandire completamente tutta la pagina web, comprendendo
tutti gli elementi html, quindi, non si limita solamente ad ingrandire il testo, come tanti 
Javascript in circolazione fanno.

Devo precisare, cosa molto ovvia, che questa utility inserita nel sito servirà agli ipovedenti non 
gravi e a chi ha carenza di vista lieve e non può sostituirsi
ad un ingranditore software. Fatta questa precisazione, vediamo qual è il codice e dove inserire 
questo script nella pagina.

Proprio per la sua caratteristica di ingrandimento completo, questo script lo inseriamo senza 
racchiuderlo dentro ad una tag div dedicata allo script.
Nel suo codice il Javascript è impostato per comprendere tutto il contenuto della tag div Page che 
abbiamo inserito prima e che racchiude tutta la pagina.

La prima operazione da fare è copiare, all'interno della cartella images, il file magnify.png. 
Troviamo questo file all'interno del file zip apposito che
è stato inserito tra i software del mese, sia per la versione del giornale su cd-rom di questo 
mese, sia sul cd-rom del mese scorso. Il file è un grafico
che rappresenta una lettera A maiuscola.

Vediamo dove inserire il codice di questo Javascript. Se non fosse già aperto, apriamo il file 
index.html e portiamoci subito dopo la tag di chiusura del
div che contiene il Javascript della data ed ora. Facciamo una riga di spazio per rendere più 
leggibile il codice ed incolliamo il codice che segue:

Ingrandisci i caratteri:

dimensioni normali (alt+1)  Alt+Maiusc+1

dimensioni medie (alt+2) Alt+Maiusc+2  Alt+Maiusc+2 |
dimensioni grandi (alt+3) Alt+Maiusc+3  Alt+Maiusc+3

Salviamo le modifiche e proviamo la funzionalità di questo Javascript, ovviamente, con l'aiuto di 
un vedente che verifica quello che avviene quando useremo
i comandi di ingrandimento.

Accertatevi che la div page sia stata inserita in modo corretto, perché se ciò non fosse, questo 
ultimo Javascript inserito non funzionerà.

Se tutto risulta funzionante, il codice aggiunto al file index.html nelle lezioni 13 e 14, deve 
essere riportato con le stesse modalità in tutti i file
HTML del sito che stiamo costruendo.

Questo è solo un assaggio per farvi prendere confidenza con queste funzioni aggiuntive. Ne 
inseriremo altre successivamente nelle prossime lezioni e man
mano che l'andamento del corso ci consente di completare le pagine del sito. Per esigenze 
particolari di ognuno, lascio a chi interessa poi cercare in
rete gli script che interessano.

Nota importante per il corso.

In questi due mesi il corso ha avuto un rallentamento per due cause ben definite al quale ho dovuto 
per forza porrer rimedio.

La prima causa è personale, niente di grave e ormai sistemata, una problematica di salute che mi ha 
tenuto un pò lontano dal pc in quanto faticavo nell'utilizzo
della tastiera con la mano destra.

Quella è andata, ma mi pare corretto precisare che tanto io quanto Nunziante siamo davvero 
entusiasti di queste lezioni.

La seconda causa, la più difficoltosa è stata di carattere tecnico e i colpevoli sono i signori del 
W3C.

Come detto più volte, il linguaggio HTML 5 non è ancora definitivo e, quindi, soggetto a modifiche 
anche importanti qualora venisse ritenuto necessario.

Pochi mesi fà il W3C ha deciso di non ritenere più valida e accessibile la tag hgroup. Questa tag 
l'avevamo citata sin dall'inizio ed era presente in quasi
tutte le lezioni, in quanto veniva riportata nello sviluppo ed il completamento della home page, 
index.html.

Ricordo che questa tag aveva lo scopo di racchiudere varie intestazioni con livello successivo e 
progressivo. Per capirci, quando avevamo più intestazioni
h1, h2, h3, h4, eccetera, queste potevano essere racchiuse all'interno di questa tag.

Questa tag creava problematiche di accessibilità e questo lo avevo notato anche io con lo screen 
reader. Infatti, quando mi trovavo all'interno di questa
tag con il focus su una intestazione, se cercavo nella pagina una ulteriore intestazione dello 
stesso livello, questa non mi veniva trovata anche se presente.
Accadeva come se lo Screen-reader rimanesse imprigionato all'interno della tag hgroup. Anche se ho 
cercato per quale motivo è stata eliminata dal codice
HTML 5, non si sa cosa abbia indotto ad eliminare questa tag.

Basandomi solo sulla esperienza d'uso dello screen reader, credo che uno script adeguato, avrebbe 
risolto il problema che mi capitava. Comunque, non avendo
disponibile tutti quelli che potevano essere i problemi, ritengo che per eliminare questa tag, ci 
deve essere per forza una ragione seria.

Comunque ormai questa tag è stata abolita ed ho dovuto riscrivere tutto il corso dall'inizio, 
andando ad apportare a tutte le lezioni le modifiche del
caso. Alla fine forniremo attraverso il giornale Uiciechi.it tutto il corso riveduto e corretto, in 
modo che tutti quelli che stanno seguendo il corso,
potranno avere uno strumento a disposizione adeguato e senza questi errori.

Vorrei ricordare a tutti che questo corso segue fedelmente le direttive del W3C in quanto lo scopo 
principale è quello di consentire a tutti di creare
le pagine del nostro sito conformi alle regole di accessibilità e certificabili proprio attraverso 
il sito del W3C.

Per ora, avendo corretto totalmente tutte le parti precedenti, per coloro che non desiderano 
aspettare la pubblicazione sul giornale Uiciechi.it, ho inserito
un link sul mio sito per scaricarla. Qui trovate tutte le lezioni on line già corrette da questa 
nuova modifica: www.disabilivisivisardegna.it/corso/index.html

Intanto, sto preparando tutte le lezioni modificate in formato Word che poi girerò a Nunziante che 
provvederà a rimetterle a disposizione di tutti.

In allegato a questa lezione, così come per la lezione precedente, tra i software del mese per la 
versione del giornale su cd-rom, troverete i file delle
due immagini e una copia della home page, index.html, esattamente al punto in cui siamo arrivati. 
Questa soluzione è stata presa proprio per avere la certezza
che non avete nella vostra home page, index.html, degli elementi di codice non più corretti.

Vi rimando alla prossima lezione, nella quale cominceremo ad affrontare l'inserimento di altre 
immagini e la loro formattazione tramite i fogli di stile
(CSS).

***********

Per ulteriori spiegazioni, scrivere a: Roberto Abutzu