inserire immagini

PREMESSA

cenni generali su immagini e grafici

Generalità

• è necessario fornire un'alternativa testuale equivalente per ogni immagine
• l’alternativa testuale deve essere commisurata alla funzione o contenuto dell’immagine nel contesto d’uso (in genere non più di 80 caratteri)
• sono vietati oggetti e scritte lampeggianti o in movimento
• testi in forma di immagini sono ammessi solo per loghi o banner
  in questo caso la descrizione dell’immagine deve contenere il testo riportato nel banner
• le immagini protette da © Copyright dovranno avere l´esplicito consenso dell’autore

Suggerimenti

• inserisci descrizioni appropriate e verifica la congruenza dei testi
• usa ALT="" (vuoto) per quelle immagini che non aggiungono nulla d´informativo al contesto della pagina: fotografie o icone puramente decorative
• il "peso" di un´immagine da inserire in una pagina html dovrebbe essere di pochi Kb per non appesantire troppo la pagina stessa; qualora fosse necessario inserire immagini di dimensione superiore ai 200 Kb (immagini di mostre o quadri o altro) indica la dimensione in kilobyte dell´immagine a fianco del link che la richiama. In questo modo il navigatore sarà consapevole del tempo necessario per scaricarla
• la dimensione in pixel non deve essere sovradimensionata rispetto alla risoluzione monitor di moda (mglio immagini al max larghe 600px)
• se utilizzi link realizzati con la grafica (pratica non consigliata) inserisci l’alternativo anche nei link
• nel caso di immagini che rappresentano grafici e in situazioni analoghe, cerca di fornire la stessa quantità di informazioni in modo alternativo, ad esempio riassumendo in un blocco di testo sottostante i dati che quel grafico rappresenta
  è necessario anche fornire la tabella dei dati da cui il grafico proviene: o direttamente vicino al grafico o in una pagina di approfondimento

Il testo alternativo

Il testo alt dovrebbe essere sostitutivo rispetto alle informazioni e ai significati che sono trasmessi dall'immagine. Non serve a descrivere com'è l'immagine o a riportarne informazioni sul formato. Nella scelta della frase da usare per il testo alt, pensa a cosa l'immagine vuole esprimere.

Nelle voci dell'enciclopedia le immagini spesso sono utilizzate per fornire delle informazioni in maniera intuitiva. Molte volte quest'informazione è espressa al meglio utilizzando l'immagine; tuttavia, quando l'immagine non è disponibile probabilmente esiste un testo che può essere utilizzato al posto dell'immagine.

Il testo alt dovrebbe comunicare la stessa informazione che passa attraverso l'immagine. Se l'immagine è stata messa lì come veicolo di informazione circa il colore, allora parla del colore nel testo alt. Se l'immagine dovrebbe dire qualcosa sulle dimensioni o sulla forma, scrivi queste informazioni nel testo alt. Non cercare di descrivere ogni singolo dettaglio dell'immagine, non ne avresti lo spazio; concentra piuttosto i tuoi sforzi nel riassumere quello che potrebbe essere lo scopo dell'immagine in un modo che abbia senso anche per coloro che non la possono vedere.

PROCEDURA

immagini con drupal

nel tipo di contenuto 'pagina base' le immagini possono essere inserite in due modi

1. con il primo modo il sistema può ridimensionare l'immagine (miniatura) che poi può essere utilizzata per un eventuale link
2. con il secondo modo vedo l’immagine anche a dimensioni reali (eventualmente in galleria se scelgo colorbox)

con il passaggio che abbiamo fatto alla versione responsive le immagini vanno inserite nelle pagine base con il primo metodo che genera un codice più pulito e permette un facile ridimensionamento in percentuale

se le immagini da inserire prevalgono sul testo (ad esempio il reportage di una manifestazione con una decina di foto o più e solo poche righe di accompagnamento) è meglio usare il tipo di contenuto 'photogallery' o per le attività dei plessi partire dal tipo di contenuto 'pagina plessi' che ha già una galleria orizzontale a piè di pagina

primo modo

1. utilizzo pulsante 'immagine' dell’editor (piccolo 'quadretto' sulla prima riga)
2. nella finestra che si apre faccio clic su 'cerca sul server'
3. si apre la finestra 'navigatore file' dove vedo tutte le cartelle di caricamento
4. faccio clic sulla cartella 'pictures' (o altra cartella convenzionata dal gruppo di lavoro)
5. nella barra dei menu clicco su 'carica'
6. clicco su 'sfoglia' e cerco sul pc
7. non serve scegliere la dimensione (devo averla già preparata prima di caricarla)
8. clic su 'carica'
9. il sistema carica l'immagine presa dal pc e crea la corrispondente miniatura
10. nel 'navigatore file' il mio file appare evidenziato in blu
11. nella barra dei menu clicco su 'inserisci file'
12. lavoro adesso sulla finestra di dialogo
13. inserisco il testo alternativo che è obbligatorio
14. nella casella  'larghezza' inserisco una percentuale (50% oppure 75% oppure 90%...) e svuoto la casella 'altezza'
15. non metto spaziatura orizzontale (nella casella Hspace) tra l'immagine e il testo perché è un lavoro preventivo sul foglio di stile
16. nell'allineamento non imposto nulla e il testo rimane sopra e sotto all'immagine (soluzione migliore con la navigazione smartphone)
17. clicco su 'ok'
18. analisi codice creato con 'codice sorgente'
    <p><img alt="l'ingresso della scuola" src="/sites/default/files/dsc_0117c.jpg" style="width: 600px; height: 398px;" /></p>
19. torno in codice pagina
20. salvo
21. l'immagine è da ridimensionare in percentuale come da indicazioni in apposita sezione
    ovviamente posso fare subito anche questa parte di procedura

se voglio inserire un'immagine che ho già caricato sul server salto i punti relativi al caricamento e la vado a cercare sfogliando le cartelle

utilizzare l’immagine per un link

1. evidenzio con un clic l’immagine inserita (viene contornata da quadratini)
2. clic su 'inserisci/modifica collegamento' tra i pulsanti dell'editor (anelli di catena sulla seconda riga)
3. lascio in 'protocollo' http:// se devo linkare un sito esterno
4. scelgo 'altro' se devo linkare una pagina del mio sito
5. digito (o copio/incollo) l'url del sito o del nodo
6. nella scheda 'avanzate' inserisco una descrizione del link nella casella 'titolo' (ad esempio link al sito esterno della biblioteca comunale)
7. faccio cli su 'ok'
8. analisi codice creato
   <p><a href="http://www.abbaziamorimondo.it" title="link al sito esterno della biblioteca comunale"><img alt="logo dell'iniziativa" src="/sites/default/files/pictures/medium_bibliopride-logo.jpg" style="width: 120px; float: left; height: 111px; margin-left: 8px; margin-right: 8px" /></a></p>
9. torno in codice pagina
10. salvo

secondo modo

1. questo metodo non dà buoni risultati sulle versioni responsive: NON USARLO
2. utilizzo il box 'immagine'
3. l'opzione attiva di base è 'carica' (parola in blu) e permette di scegliere un immagine dal pc per metterla sul server
4. se scegliessi ''browser di file' andrei a cercare direttamente sul server un'immagine che ho già caricato in precedenza per utilizzarla nuovamente
5. tralasciamo per ora il caricamento multiplo
6. con 'carica' attivo, faccio clic su 'sfoglia' e cerco sul pc
7. clic sul pulsante 'carica'
8. il sistema carica l'immagine in una sottocartella di 'styles'
9. nella scheda che si apre inserisco il 'testo alternativo' e il 'titolo'
10. in 'stile' scelgo con la tendina la dimensione del colorbox (per visualizzarla in galleria)
11. vado nel 'body' e posiziono il cursore dove voglio che venga inserita l'immagine
12. torno nel box 'immagini' e faccio clic su 'inserisci'
13. per allineare e spaziare l'immagine faccio clic sull'immagine e poi sul pulsante 'immagine' dell'editor
14. eseguo le azioni come per il primo modo
15. analisi codice creato
    <p><a class="colorbox colorbox-insert-image" href="http://www.icmarcallo.gov.it/sites/default/files/rocco1.jpg" rel="gallery-all" title=""><img alt="il bellissimo rocco" class="image-medium" src="http://www.icmarcallo.gov.it/sites/default/files/styles/medium/public/ro... style="float: left; margin-left: 8px; margin-right: 8px" title="" typeof="foaf:Image" /></a></p>
16. torno in codice pagina
17. salvo

modalità modifica immagini

per accedere alle proprietà di un'immagine già inserita ci sono 2 modalità

1. clic sull'immagine e poi clic di destra per entrare nel menu contestuale 'proprietà immagine'
2. doppio clic sull'immagine

immagini in percentuale

impostando la dimensione di un'immagine in percentuale essa si adatta alla finestra nella quale viene visualizzata

è un procedimento da fare sempre e particolarmente utile quando l'immagine di un articolo o di una notizia compare anche in prima pagina

procedura da proprietà immagine

• se voglio ridimensionare in percentuale un'immagine già inserita, faccio clic di destra sull'immagine
• nella scheda 'proprietà immagine' inserisco una percentuale adeguata nella casella 'larghezza' (esempio 75%) e svuoto la casella 'altezza'
• clicco su 'ok'

procedura da codice sorgente

1. inserisco l'immagine direttamente nel body (in genere sopra al testo) come indicato nel primo modo
2. entro in 'codice sorgente'
3. elimino il riferimento all'altezza dell'immagine (ad esempio height: 398px;)
4. modifico il riferimento alla larghezza dell'immagine (ad esempio width: 600px;) impostandolo dal 90 al 98% (width: 90% oppure width: 98%)
   per le pagine base metto anche 75%
5. controllo il codice che deve essere simile a questo (occhio alle virgolette)
   <p><img alt="logo expo per le scuole" src="/sites/default/files/dettaglio-pagina-scuola.jpg" style="width: 98%" /></p>
6. proseguo con la creazione della pagina
7. salvo

NORME SULLE IMMAGINI

le immagini

• devono essere nei tipi di file permessi e cioè png gif jpg jpeg
  • gif per la grafica
  • jpg e jpeg per le foto
  • png per entrambi con preferenza per la grafica
• devono essere adeguate al sito web per dimensione e peso
  • la dimensione in pixel non deve essere sovradimensionata rispetto alla risoluzione monitor di moda (meglio al max larghe 600px)
  • il "peso" di un´immagine da inserire in una pagina html dovrebbe essere di pochi Kb per non appesantire troppo la pagina stessa; qualora fosse necessario inserire immagini di dimensione superiore ai 200 Kb (immagini di mostre o quadri o altro ad alta risoluzione) indica la dimensione in kilobyte dell´immagine a fianco del link che la richiama; in questo modo il navigatore sarà consapevole del tempo necessario per scaricarla
  • i nomi delle immagini grafiche possono dipendere dal carattere maiuscolo o minuscolo
    (l'immagine chiamata dollar.gif non è la stessa immagine chiamata dollar.GIF); usiamo sempre tutto minuscolo
• occhio alla compatibilità dei browser con gli spazi tra parole nel nome del file
  ("immagine dollaro.gif" non è "immagine_dollaro.gif")
  puoi utilizzare questi piccoli fatti (soprattutto il secondo) per vedere se il tuo web designer di fiducia, al quale ti sei affidato, è competente nella programmazione HTML

promemoria tag immagini

• IMG: è l'istruzione HTML che dice al browser di inserire l'immagine nella pagina web
• SRC: è l'attributo che indica il nome o l'URL del file grafico che si intende inserire nella pagina web; il nome del file o il suo URL devono essere racchiusi tra apici
• WIDTH / HEIGHT: queste istruzioni (tags) indicano le dimensioni dell'immagine, misurate in pixel. Mediante gli attributi WIDTH e HEIGHT nelle istruzioni IMG e SRC viene conservato la disposizione degli oggetti nella pagina. Inoltre, le pagine web che utilizzano gli attributi WIDTH e HEIGHT nelle istruzioni IMG SRC si scaricano più rapidamente delle pagine che non utilizzano questi attributi
• ALT: significa attributo di testo alternativo. Anche il testo alternativo deve essere contenuto tra apici
• BORDER: se utilizzi un'immagine come link, devi indicare BORDER=0, diversamente il browser avvolgerà un bordo attorno alla immagine. Il colore del bordo sarà lo stesso colore utilizzato nei collegamenti ipertestuali
• HSPACE / VSPACE: Questi attributi definiscono lo spazio orizzontale (sinistra e destra) e verticale (testa e coda) attorno ad un'immagine; utile se non vuoi che il testo rimanga troppo attaccato all'immagine

attenzioni da osservare

• fornire una alternativa testuale equivalente per ogni immagine
  • inserisci descrizioni appropriate e verificare la congruenza dei testi
  • usa ALT="" (vuoto) per quelle immagini che non aggiungono nulla d´informativo al contesto della pagina: fotografie o icone puramente decorative
  • l’alternativa testuale deve essere commisurata alla funzione o contenuto dell’immagine nel contesto d’uso
• sono vietati oggetti e scritte lampeggianti
• sono da verificare bene le scritte in movimento
• testi in forma di immagini sono ammessi solo per loghi o banner
• in questo caso la descrizione dell’immagine deve contenere il testo riportato nel banner
• nel caso di immagini che rappresentano grafici e in situazioni analoghe, cerca di fornire la stessa quantità di informazioni in modo alternativo, ad esempio riassumendo in un blocco di testo sottostante i dati che quel grafico rappresenta; è necessario anche fornire la tabella dei dati da cui il grafico proviene: o direttamente vicino al grafico, o in una pagina di approfondimento
• le immagini protette da © Copyright dovranno avere l´esplicito consenso dell’autore
• grande attenzione quando si pubblicano immagini con persone e soprattutto bambini

  verificare la presenza di liberatoria dei genitori
  mai primi piani
  mai nomi abbinati ai volti

Parte del testo precedente è tratta dalle Linee Guida per realizzare siti ed applicazioni web accessibili per la Regione Emilia-Romagna (3), http://www.regione.emilia-romagna.it/lineeguida/ – licenza Creative Commons Attribuzione-Non commerciale-Non opere derivate 2.5 Italia License