html513
Corso html 5, lezione 13.
Roberto Abutzu su uiciechi.it, 2013-10.

Tredicesima parte:Le immagini.

`**********`

Dopo l'introduzione al linguaggio Css, riprendiamo l'apprendimento del
linguaggio Html 5 introducendo le immagini.

Questo elemento di programmazione risulta essere di vitale importanza nei
siti soprattutto perch il buon uso degli elementi grafici pu determinare
la bellezza e il gradimento del sito stesso.

Le immagini possono essere inserite in vari elementi html, abbellendo
l'aspetto della pagina senza per questo perdere la funzionalit
dell'elemento html.

Dato che questo corso  scritto prevalentemente per persone con disabilit
visive, bisogna precisare che le immagini non sono affatto un ostacolo per
la navigazione con le tecnologie assistive, quali Screen-reader ed
ingranditori software.

Il problema nasce solo quando le immagini non vengono correttamente
etichettate e posizionate nel codice html.

Questo succede spesso, soprattutto nei siti non certificati e poco
accessibili, perch il testo descrittivo dell'immagine o l'etichetta viene
inserita nell'immagine stessa, dando alla persona vedente la possibilit di
leggere visivamente il significato dell'immagine.

Facciamo un esempio utilizzando il nostro menu principale.

Molti CMS (programmi per la creazione di siti web), tendono a creare una
immagine, come un pulsante grafico, per ogni elemento del menu. Il testo che
indica ogni singolo link del menu, viene scritto graficamente in ognuno di
questi pulsanti grafici. Questo risulta essere una immagine, un grafico, una
fotografia che rappresenta una scritta, magari stilizzata.

Per, questo testo nelle immagini non pu essere intercettato dallo
Screen-reader, perch il programma assistivo cerca nel codice l'etichetta
dell'elemento. Non trovandola, la sintesi vocale pu solo limitarsi a
vocalizzare il tipo di elemento, di solito grafico con un numero
progressivo.

Proprio il fatto che in queste immagini si pu aggiungere del testo,
risolvendo la lettura per le persone vedenti, porta in errore i
programmatori che, spesso, dimenticano di etichettare questi elementi
grafici.

Purtroppo, anche grazie ai CMS, sempre pi spesso ci imbattiamo in queste
problematiche perch questi software permettono la creazione di siti web
senza aver nessuna nozione del linguaggio html o di altri linguaggi di
programmazione del web. Bisogna anche per riconoscere che man mano che
questi software vengono sviluppati e aggiornati, le pagine create risultano
sempre pi accessibili proprio per il grande impegno degli sviluppatori, ai
quali siamo in molti a far presente queste carenze.

Molti CMS attuali, almeno i pi famosi e professionali, consentono anche di
modificare manualmente il codice, quindi, con un po' di pazienza si possono
anche creare siti completamente accessibili. Tra quelli pi usabili da un
disabile visivo ricordiamo WordPress e ItCms che producono un codice
sufficientemente accessibile se, chi li usa, conosce cosa  l'accessibilit.

Purtroppo, quelli professionali sono complessi come software, molto grafici
e difficilmente usabili da una persona non vedente, ma con accorgimenti che
si possono imparare, non  impossibile usarli.

Comunque, noi non vedenti, non potendo utilizzare la grafica visivamente
parlando, dobbiamo conoscere molto bene almeno le nozioni del linguaggio per
modificare il codice di questi oggetti di programmazione per renderlo
tecnicamente accessibile. Infine,  logico anche dire che per verificare il
corretto posizionamento delle immagini e dei grafici, come per il contrasto
dei colori, un disabile visivo deve farsi dare un occhio in prestito da una
persona vedente, possibilmente competente, per una corretta valutazione di
quello che  stato programmato.

Questa lunga spiegazione  stata necessaria e doverosa. Infatti, serve a far
capire ai programmatori, quelli  che sostengono che immagini significa
inaccessibilit, che non  vero. In sostanza, le immagini non rendono un
sito inaccessibile, quindi, non serve creare un doppio sito, aggiungendo una
versione testuale.

I siti inaccessibili, e sia chiaro, lo sono solo quando il linguaggio non 
corretto, e questo vale per qualsiasi elemento html.

Ritorniamo al nostro discorso. Come detto in precedenza, una immagine o un
grafico possono assumere varie tipologie di elementi html: possono essere un
link, un pulsante, un elemento di una lista a tendina, ma anche una immagine
decorativa, come una fotografia o un disegno.

I non vedenti possono gestire le immagini nel codice?

S, rispettando alcune condizioni fondamentali gi affrontate nelle lezioni
precedenti: la scelta e il posizionamento di una immagine deve essere
seguita e verificata da una o pi persone vedenti.

Il non rispetto di queste indicazioni, pu portare alla creazione di pagine
graficamente brutte da consultare e che verranno sicuramente chiuse 2
secondi dopo la loro apertura. Vediamo di seguito il codice con il quale,
anche un disabile visivo, pu gestire grafici ed immagini.

La tag delle immagini  la seguente: ``img src="immagine.gif" /``

Spieghiamo prima gli elementi della tag e di seguito inseriremo alcuni
attributi.

La tag  composta dal minore che la apre, poi abbiamo img che  il nome,
segue uno spazio, un  indicatore che si chiama src, segue un segno di uguale
e un segno di virgolette, poi abbiamo il nome dell'immagine, completa
eventualmente del percorso dove verr cercata, chiude il nome dell'immagine
un segno di virgolette, segue uno spazio e una barra, shift pi 7,  e un
maggiore a chiudere tutta la tag.

Anche in questo caso, per il nome del file e del percorso,  niente spazi, le
maiuscole solo se necessarie e se contenute anche nel nome del file.

Per precisare, se la nostra immagine  contenuta all'interno di una
cartella, di solito denominata images, inserire il nome della cartella e
metterci una barra prima del nome del file.

Ecco la tag modificata, completa della cartella dove  contenuta l'immagine:
``img src="images/immagine.gif" /``

Come notato, questa tag non ha la tag di chiusura, quindi, si dice che 
auto-chiudente. In questo modo, la chiusura  sempre consigliabile
inserirla, anche se in Html 5  facoltativa. Questo lo approfondiremo in
futuro, ma sappiate fin da adesso che per molte tag, nella nuova versione di
questo linguaggio html versione 5, anche se  consentito evitare di
chiuderle,  sempre consigliabile eseguire comunque la chiusura, perch
rimane il solito discorso che a seconda del browser che viene utilizzato o
della sua release, non  ancora possibile garantire poi la corretta
visualizzazione della tag stessa nella pagina.

Nonostante html 5 abbia sfoltito e di molto il codice scritto con
abbreviazioni e riducendo le chiusure allo stretto indispensabile, il
consiglio  comunque di scrivere il codice completo compreso delle chiusure.
Solo quando tutti i browser supporteranno correttamente questo linguaggio
allora sar possibile utilizzare queste abbreviazioni.

Ora torniamo alla tag ed andiamo ad inserire una immagine nel sito.

Mi sembra doveroso, a questo punto, inserire un link proprio al sito
dell'unione, e lo inseriremo utilizzando il logo dell'unione stessa.
Qualcuno si chieder il perch di questa mia scelta, ma la ragione  molto
semplice. Siccome questo corso viene scritto dal sottoscritto in
collaborazione con Nunziante Esposito che poi svolge il grosso lavoro di
ripulirlo, formattarlo e pubblicarlo mensilmente sul giornale Uiciechi.it
dell'Unione Italiana dei Ciechi e degli Ipovedenti, a lui v un mio
personale ringraziamento come va alla stessa Unione che ci consente questa
pubblicazione.

Nota importante: approfitto per fare un avviso. Sono stato autorizzato a
pubblicare il logo dell'unione esclusivamente per questo corso. Sappiate che
 illegale appropriarsi di immagini o fotografie dalla rete e poi
pubblicarle senza autorizzazione, quindi, accertatevi sempre che le immagini
che inserite nei vostri siti siano di vostra propriet o, comunque,
autorizzate alla pubblicazione dai legittimi proprietari.

Utilizzeremo il logo che trovate in allegato al Giornale, tra i software del
mese per la versione del giornale su cd-rom. Il file immagine del logo si
chiama logo_uici.gifd.

Nella prima lezione, vi ricordate! Vi avevo fatto creare delle cartelle tra
cui la cartella images. Se non l'avevate creata, fatelo adesso e inserite al
suo interno il logo dell'unione. Quindi, la nostra tag sar: ``img
src="images/logo_uici.gif" /``

Se abbiamo fatto tutto giusto, copiando questo codice all'interno della
nostra index, dovrebbe apparire il logo dell'Unione. Attenzione, per gli
utilizzatori dello Screen-reader, potrebbe accadere che la sintesi non
vocalizzi nulla, come se il logo da noi inserito nel codice e nella cartella
come file immagine, e in ogni caso qualsiasi grafico inserito, non ci fosse.
Per avere la certezza che il grafico viene intercettato,  necessario
impostare la visualizzazione di tutti i grafici nelle impostazioni dello
Screen-reader.

Se questo  impostato ai soli grafici etichettati, il logo non verr visto,
perch una etichetta al grafico non l'abbiamo ancora assegnata. Nel dubbio
consiglio ai non vedenti di farsi aiutare da una persona vedente per
verificare che realmente il logo sia visibile.

Ho inserito questa stringa di codice esattamente sotto all'intestazione dei
contenuti, dopo il menu principale del sito.

Verificata l'immagine con l'aiuto di un occhio in prestito, inseriamo due
attributi che permetteranno la visualizzazione corretta dell'immagine da
parte dello screen-reader e la vocalizzazione descrittiva da parte delle
sintesi vocali. I due attributi sono:

1. Title, che sarebbe il fumetto che compare quando il puntatore del mouse
passa sull'oggetto.

2. Alt, che significa testo alternativo, che poi sarebbe il testo che viene
letto dalla sintesi vocale dello Screen-reader. Alternativo perch a video 
il testo che compare quando l'immagine non  disponibile, per esempio per un
errore del programmatore o un problema al browser. In tal caso viene
visualizzata come una cornice dove al posto dell'immagine o del grafico
compare il testo che noi inseriremo in questa tag.

Scriviamo il codice, completo di testo alternativo, a parte, cos risulter
pi semplice comprendere la sua funzione. Lo inseriremo dopo il codice
inserito prima, l'immagine semplice e senza attributi, ma per distinguerle
meglio, prima di questo secondo codice, inseriamo un paragrafo contenente
del testo esplicativo, per distinguere le due immagini: ``pLogo con le tag
title e alt:/pimg src="images/logo_uici.gif" title="Logo dell'Unione
Italiana dei Ciechi e degli Ipovedenti" alt=" Logo dell'Unione Italiana dei
Ciechi e degli Ipovedenti" /``

Facciamo verificare la presenza del fumetto al passaggio del mouse e notiamo
che lo Screen-reader vocalizza il contenuto della tag Alt. Ottenuto il
risultato voluto, potete anche utilizzare delle immagini vostre, magari
anche in altri formati tipo jpg, e provare a inserirle nel file index.html
del sito che state costruendo. Nelle varie prove vi consiglio di inserire
prima di ogni grafico un paragrafo per poterlo poi identificare nella pagina
web.

Procediamo ora, sempre utilizzando lo stesso logo, facendolo diventare un
link che indirizza al sito UICI. Ecco un paragrafo iniziale esplicativo e il
codice completo. Potete anche fare un copia ed incolla, anche se consiglio
di scrivere tutto di proprio pugno per abituarsi a questi codici. Inserite
entrambi i codici per il paragrafo ed il link da qui: ``pVisitate il sito
dell'Unione Italiana dei Ciechi e degli Ipovedenti:/pa
href="http://www.uiciechi.it/"img src="images/logo_uici.gif" title="Sito
dell'Unione Italiana dei Ciechi e degli Ipovedenti" alt="Sito dell'Unione
Italiana dei Ciechi e degli Ipovedenti" /Sito dell'Unione Italiana dei
Ciechi e degli Ipovedenti/a``

Tra la chiusura dell'immagine e la chiusura del link, ho inserito il testo
del link affinch appaia anche a video senza obbligatoriamente intervenire
sul grafico col fumetto. Non  obbligatorio ma io lo consiglio.

Purtroppo non sempre le immagini o i grafici che inseriamo hanno le giuste
proporzioni rispetto agli altri oggetti di programmazione circostanti.
Potrebbero anche verificarsi problemi di grandezze e di posizionamenti,
quindi, pu essere necessario dover assegnare alle immagini del codice per
la formattazione giusta, per la grandezza e per il corretto posizionamento
nella pagina.

Per poter agire nella formattazione dell'immagine, dobbiamo assegnare
all'immagine un identificativo da poter richiamare successivamente nei fogli
di stile css. Approfitto per ricordarvi che la formattazione degli elementi
di una pagina html viene eseguita dai file css. Assegniamo quindi
all'immagine un identificativo.

Per far comprendere meglio come funziona e come si inserisce questo
attributo,ecco come dovrebbe essere la stringa semplice: ``img
id="logo-uic" src="images/logo_uici.gif" /``

Vediamo invece come si inserisce l'identificativo direttamente nella stringa
precedente. Risulter un po' lunga, ma analizzatela e vedrete che mi sono
limitato solo a inserirgli il nominativo dell'immagine tra le virgolette
(identificativo).

Ecco la stringa completa dell'identificativo:

``pVisitate il sito dell'Unione Italiana dei Ciechi e degli
Ipovedenti:/pa href="http://www.uiciechi.it/"img id="logo-uic"
src="images/logo_uici.gif" title="Sito dell'Unione Italiana dei Ciechi e
degli Ipovedenti" alt="Sito dell'Unione Italiana dei Ciechi e degli
Ipovedenti" /Sito dell'Unione Italiana dei Ciechi e degli Ipovedenti/a``

Nella prossima lezione sui css, vedremo come formattare questa immagine per
dargli le giuste proporzioni e la corretta posizione, inserendo del codice
all'interno del file CSS.

Fatte le prove e resoci conto di come funzionano questi codici, cancelliamo
dal nostro file index.html tutto il codice che abbiamo inserito come
esercizio dall'inizio di questa lezione, e inseriamo tutto il codice
definitivo partendo dalla intestazione di secondo livello dei contenuti. Per
una maggiore sicurezza, sappiate che potete anche copiare ed incollare il
codice nella Index, ma vi consiglio come sempre di provare a riscriverlo
manualmente.

Cancellate tutto quello presente tra le tag di apertura e chiusura della div
dei contenuti, comprese le tag stesse, e scrivete quello che inserisco qui
sotto. Ecco il codice:

`` div id="content"!-- inizio contenuti --``

``h2Corso html 5 per disabili visivi/h2``

``aside``

``pIl corso viene scritto da me in collaborazione con Nunziante Esposito
al quale vanno tutti i miei ringraziamenti. br /``

``Questo scritto viene pubblicato mensilmente nel giornale Uiciechi.it
dell'Unione Italiana dei Ciechi e degli Ipovedenti, del quale vi invito a
visitarne il sito:/p``

``a href="http://www.uiciechi.it/"img id="logo-uic"
src="images/logo_uici.gif" title="Sito dell'Unione Italiana dei Ciechi e
degli Ipovedenti" alt="Sito dell'Unione Italiana dei Ciechi e degli
Ipovedenti" /Unione Italiana dei Ciechi e degli Ipovedenti/abr /``

``/aside``

``/div!-- chiuso contenuti --``

Verificando il codice, possiamo notare che  comparsa una nuova tag:
"aside".

Si apre e si chiude esattamente come tutte le altre tag html semplici,
inserendo la barra dopo il minore della chiusura davanti al nome.
Letteralmente significa "Di fianco". Questa tag Aside, una nuova tag
presente nella versione 5 del codice html, permette di creare un riquadro di
fianco ai contenuti della pagina dove  possibile inserire ulteriori
contenuti in modo da tenerli separati da quelli principali della pagina.

In molti siti, in questo riquadro vengono inserite le ultime notizie con i
relativi link. Ho inserito questa nuova tag in previsione della prossima
lezione Css dove vedremo anche come posizionarla nella pagina. Infatti,
l'Aside  possibile, tramite apposito codice inserito nel file Css,
inserirla a destra o a sinistra della pagina web a seconda del layout
desiderato.

Vi rimando alla prossima lezione per approfondire i concetti sin qui
trattati e per approfondire soprattutto l'inserimento del codice nel file
CSS per le tag trattate, in modo che, man mano che costruiremo il nostro
sito, abbiamo sempre di pi sottomano una pagina html adeguata alle nostre
esigenze.

Per ulteriori spiegazioni, scrivere a: `Roberto Abutzu roberto@evyweb.it`_
