Corso html 5. Di Roberto Abutzu. `***********` Tredicesima parte: Le immagini. `**********`

Transcript

1 Corso html 5. Di Roberto Abutzu. `***********` 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

2 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

3 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

4 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à

5 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: ``<p>logo con le tag title e alt:</p><img 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: ``<p>visitate il sito dell'unione Italiana dei Ciechi e degli Ipovedenti:</p><a href=" 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

6 (identificativo). Ecco la stringa completa dell'identificativo: ``<p>visitate il sito dell'unione Italiana dei Ciechi e degli Ipovedenti:</p><a href=" 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 -->`` ``<h2>corso html 5 per disabili visivi</h2>`` ``<aside>`` ``<p>il 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=" 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</a><br />`` ``</aside>`` ``</div><!-- chiuso contenuti -->`` Verificando il codice, possiamo notare che è comparsa una nuova tag: "aside".

7 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