HTML: Immagini - Server users.dimi.uniud.it
annuncio pubblicitario
Laboratorio di Tecnologie Web HTML: Immagini Dott. Stefano Burigat www.dimi.uniud.it/burigat Aggiungere immagini E' possibile inserire immagini all'interno delle pagine web in due modi: come contenuto inline o come immagini di background. La seconda modalità dovrebbe essere utilizzata in tutti i casi in cui dobbiamo inserire immagini a scopo decorativo piuttosto che come contenuto vero e proprio delle pagine e dovrebbe essere implementata tramite l'utilizzo di CSS (ciò consente di rendere il codice html più pulito e facilitare la modifica dello stile delle pagine; ne parleremo più avanti). Per poter essere riconosciute dai browser e visualizzate in una pagina web, le immagini dovrebbero essere salvate nei formati raster GIF, JPEG, PNG oppure nel formato vettoriale SVG (jpeg è preferibile per immagini complesse come le foto, svg o png sono preferibili per immagini come loghi o simili, svg non è supportato da IE8 e precedenti). E' quindi necessario convertire eventuali immagini salvate in altri formati. Se si vuole invece mantenere tali immagini nel loro formato originario e fornirle all'utente, si può rendere l'immagine accessibile tramite link, come nell'esempio seguente. In tal caso, l'immagine viene scaricata come file sul computer dell'utente o aperta all'interno del browser se questo è dotato di apposito plugin per la sua visualizzazione. <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> </head> <body> <article> <h1>HTML5</h1> <p>L'HTML5 è un <a href="http://it.wikipedia.org/wiki/Linguaggio_di_markup">lingu aggio di markup</a> per la strutturazione delle pagine web...</p> <aside> <p><a href="tree.xcf">Scarica mappa del sito</a></p> </aside> </article> </body> </html> L'elemento <img> L'elemento che viene utilizzato per inserire immagini inline è l'elemento vuoto <img>. Tale elemento è un cosiddetto elemento rimpiazzato (replaced) in quanto le immagini non vengono specificate direttamente nel codice sorgente come contenuto (come succede per il testo) ma ne viene inserito un riferimento tramite l'utilizzo dell'attributo “src” (la sintassi per la specifica del riferimento è la stessa utilizzata per i link). Sarà poi il browser ad occuparsi di sostituire il riferimento con l'immagine vera e propria quando dovrà visualizzare la pagina. Normalmente, i riferimenti sono relativi ad immagini presenti sullo stesso server del sito ma è possibile anche creare riferimenti ad immagini presenti su altri siti utilizzando un URL assoluto (anche se in questo caso è necessario avere il permesso per poterlo fare). Poichè <img> è un elemento inline, esso non causa un'interruzione di riga e quindi le immagini, di default, vengono inserite all'interno del flusso del testo, con il loro margine inferiore allineato con la baseline del testo (la linea di base, o baseline, è la linea sulla quale la maggior parte delle lettere si allineano verticalmente ed oltre la quale si estendono i tratti discendenti). Se si vuole posizionare un'immagine in modo diverso o modificarne aspetti come i bordi è necessario utilizzare CSS. L'esempio seguente inserisce due immagini all'interno di un paragrafo di testo. <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> </head> <body> <article> <h1>HTML5</h1> <p>L'HTML5 <img src="imgs/html5.png" alt="" /> è un linguaggio di markup per la strutturazione delle pagine web mentre CSS <img src="imgs/css3.png" alt="" /> è un linguaggio usato per definire la formattazione delle pagine web.</p> <aside> <p><a href="glossario.html">Vai al glossario</a></p> </aside> </article> </body> </html> Quando il browser incontra un elemento <img>, effettua una richiesta al server per poter scaricare il file. Ciò implica che in particolari situazioni (di solito, quando si sta accedendo al sito tramite una connessione lenta) l'utente si accorga del caricamento progressivo delle risorse. Per ovviare a tale problema è consigliabile evitare di riempire i siti di troppe immagini o di immagini troppo grandi. Inoltre, se si vuole visualizzare la stessa immagine più volte, anche in pagine differenti, si dovrebbe utilizzare sempre link allo stesso file sul server (e non link a diverse copie della stessa immagine) in modo che il browser possa sfruttare il caching delle immagini senza doverne scaricare copie multiple. Oltre all'attributo <src>, è obbligatorio inserire all'interno dell'elemento <img> anche l'attributo “alt” che serve a fornire una breve descrizione dell'immagine nei casi in cui l'immagine non possa essere vista (ad esempio, per accessi tramite screen reader, quando la visualizzazione delle immagini è disabilitata, nel caso in cui l'immagine non sia disponibile, quando il sito viene analizzato da un motore di ricerca). Se l'immagine non aggiunge nulla di significativo al contenuto testuale, è preferibile lasciare vuoto il valore dell'attributo “alt” come è stato fatto nell'esempio precedente (notate che non ci deve essere alcuno spazio all'interno delle virgolette). Tenete presente che il modo in cui viene gestito l'attributo “alt” quando l'immagine non è disponibile non è coerente tra i diversi browser. Ad esempio, Chrome e Safari visualizza un'icona di immagine assente, Internet Explorer un'icona accompagnata dal valore dell'attributo, Firefox solo il valore dell'attributo. Questo diverso comportamento può creare effetti non voluti (soprattutto nel caso di Firefox in cui il testo dell'attributo si mescola con il testo del contenuto). In certi casi, ad esempio per quanto riguarda diagrammi o grafici, ci potrebbe essere la necessità di associare una descrizione più lunga di quanto fornito normalmente tramite l'attributo “alt”. Nelle versioni di HTML precedenti alla 5, esisteva l'attributo “longdesc” che poteva essere utilizzato a tale scopo. In HTML5, si può usare l'elemento <figcaption> (insieme a <figure>) per fornire tali informazioni ma la soluzione migliore è quella di inserire tutte le informazioni che servono direttamente nel contenuto testuale della pagina (o, al limite, creare un link ad un documento descrittivo). Al link http://webaim.org/techniques/alttext/ potete trovare una discussione approfondita su come è meglio utilizzare l'attributo “alt” in funzione del contenuto e della funzione della relativa immagine. L'elemento <img> supporta anche l'attributo “title” che permette di inserire del testo che verrà visualizzato in un tooltip quando l'utente passerà con il puntatore del mouse sopra l'immagine. <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> </head> <body> <article> <h1>HTML5</h1> <p>L'HTML5 <img src="imgs/html5.png" alt="" title="Logo ufficiale di HTML5" /> è un linguaggio di markup per la strutturazione delle pagine web ...</p> </article> </body> </html> Dimensioni di un'immagine Di default, un browser visualizza un'immagine con le sue dimensioni originali. Se un'immagine è di 128 per 128 pixel, quello sarà lo spazio che l'immagine occuperà nella finestra del browser. E' però possibile utilizzare due attributi dell'elemento <img>, “width” ed “height”, per specificare quanto dovrà occupare l'immagine a schermo rispettivamente in larghezza ed altezza. Utilizzare correttamente tali attributi può portare ad un caricamento ottimale di una pagina. Questo a causa del modo in cui i browser creano le pagine: come detto in precedenza, quando un browser incontra un elemento <img> fa una richiesta al server per la relativa immagine e intanto va avanti a visualizzare il resto del contenuto; quando poi l'immagine arriva, il browser può calcolare la dimensione dell'immagine ma deve ridisegnare la pagina per inserire tale contenuto e spostare tutto ciò che appariva in seguito (creando problemi all'utente che nel frattempo aveva iniziato a leggere il contenuto). Se invece vengono specificati “width” ed “height”, un browser sa già quanto spazio deve riservare all'immagine e non ha quindi bisogno di ridisegnare la pagina quando l'immagine arriva dal server. Il modo corretto di specificare “width” ed “height” è quello di inserire i valori esatti dell'immagine originale. Sebbene tali attributi possano essere utilizzati per ridimensionare un'immagine, ad esempio per realizzare delle miniature delle immagini, ciò non è consigliabile. Se l'immagine originale è più piccola dei valori inseriti, il risultato può essere un'immagine sfocata o pixellosa. Se l'immagine originale è più grande delle dimensioni inserite, si spreca tempo e banda per scaricare dati che non verranno utilizzati. In entrambi i casi, inoltre, il browser deve effettuare delle operazioni costose dal punto di vista computazionale di scalatura delle immagini. Se poi non si mantengono le proporzioni dell'immagine originale, quella visualizzata risulta deformata. Se necessario, è quindi preferibile ridimensionare un'immagine esternamente con appositi strumenti di elaborazione delle immagini e poi specificare nel codice html le dimensioni corrette. <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> </head> <body> <article> <h1>HTML5</h1> <p>Immagine originale: <img src="imgs/html5.png" alt="logo HTML5" width="128" height="128"/></p> <p>Immagine rimpicciolita: <img src="imgs/html5.png" alt="logo HTML5" width="64" height="64"/></p> <p>Immagine ingrandita: <img src="imgs/html5.png" alt="logo HTML5" width="256" height="256"/></p> <p>Immagine deformata: <img src="imgs/html5.png" alt="logo HTML5" width="256" height="128"/></p> </article> </body> </html> NOTA: le indicazioni del paragrafo precedente sull'effetto negativo di specificare dimensioni diverse da quelle dell'immagine originale non si applicano (ad eccezione della deformazione) al caso delle immagini svg in quanto il contenuto di tali immagini è specificato in modo matematico e ciò porta a poterne variare le dimensioni senza compromissione della qualità. NOTA: l'utilizzo di width ed height è appropriato se si sta creando un'unica versione di una pagina con immagini di dimensione fissa ma non lo è nel caso in cui si voglia creare più versioni di una pagina (ad esempio, per dispositivi diversi) in cui la dimensione delle immagini può essere diversa. Immagini come link Un'immagine può essere trasformata in link semplicemente includendo l'elemento <img> all'interno di un elemento <a> che specifica la risorsa a cui il browser dovrà accedere quando l'utente cliccherà sull'immagine. <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> </head> <body> <article> <h1>HTML5</h1> <p>L'HTML5 <a href="http://it.wikipedia.org/wiki/HTML5"><img src="imgs/html5.png" alt="Link alla pagina Wikipedia su HTML5" title="Logo ufficiale di HTML5" /></a> è un linguaggio di markup per la strutturazione delle pagine web ...</p> </article> </body> </html> E' anche possibile associare dei link a specifiche parti di un'immagine, creando le cosiddette “image maps”. Per far ciò sono necessari diversi diversi passaggi ed elementi. Per prima cosa bisogna creare l'image map utilizzando l'elemento <map>. L'unica cosa che è necessario specificare per tale elemento è un nome che identifichi univocamente l'image map. Ciò si effettua utilizzando gli attributi “id” e “name”, entrambi i quali devono avere come valore il nome univoco scelto (sebbene solo l'attributo “name” sia obbligatorio in HTML5, tale duplicazione è necessaria per mantenere la compatibilità con tutti i browser). <map id="mappa01" name="mappa01"></map> All'interno dell'elemento <map> vanno inseriti tanti elementi vuoti <area> quante sono le aree cliccabili dell'immagine. Tali aree non dovrebbero sovrapporsi (se si sovrappongono, ha la precedenza l'area definita per prima). Attraverso l'elemento <area>, vengono specificati tre attributi fondamentali: “href” determina la risorsa a cui si accede quando si clicca su quell'area dell'immagine, “shape” determina il tipo di forma dell'area, “coords” specifica le esatte dimensioni dell'area. Inoltre, così come <img> anche <area> richiede la presenza dell'attributo “alt” per specificare del testo alternativo all'area dell'immagine. L'esempio seguente mostra la definizione di un'area rettangolare. <area shape="rect" coords="135,304,220,370" alt="Area rettangolare" href="http://it.wikipedia.org/wiki/Rettangolo" /> L'attributo “shape” supporta tre tipi di forme, aree rettangolari (valore rect, come nell'esempio), aree circolari (valore circle) e poligoni generici (valore poly). Per capire come vanno inserite le coordinate di tali aree bisogna considerare che l'angolo in alto a sinistra di un'immagine ha coordinate (0,0) mentre l'angolo in basso a destra ha coordinate (larghezza immagine, altezza immagine). La coordinata x quindi cresce da sinistra verso destra e quella y dall'alto verso il basso. Come mostrato nell'esempio precedente le coordinate vengono inserite come una lista di numeri separati da virgole. Per le aree circolari devono essere specificati la coordinata x del centro, la coordinata y del centro ed il raggio del cerchio. Per i rettangoli, è sufficiente inserire le coordinate x ed y dell'angolo in alto a sinistra seguite dalle coordinate x ed y del punto in basso a destra. Per i poligoni generici, bisogna inserire la sequenza di coordinate x ed y di ogni punto del poligono. Una volta specificate le aree cliccabili dell'immagine, bisogna aggiungere l'attributo “usemap” all'elemento <img> che specifica l'immagine a cui associare l'image map. Il valore di tale attributo deve essere uguale al valore dell'attributo “name” dell'image map preceduto dal simbolo #. <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> </head> <body> <article> <h1>Mappa cliccabile dell'Italia</h1> <p> <img src="imgs/italia.jpg" width="400" height="497" usemap="#mappa01" /> <map id="mappa01" name="mappa01"> <area shape="poly" coords="105,129,102,132,116,148,108,155,87,220,153,225,157,214 ,164,209,169,200,171,187,177,183,171,175,179,167,160,154,162,1 47,154,142,144,150,130,147" alt="Toscana" href="http://it.wikipedia.org/wiki/Toscana" /> <area shape="rect" coords="135,304,220,370" alt="Rettangolo" href="http://it.wikipedia.org/wiki/Rettangolo" /> <area shape="circle" coords="315,99,34" alt="Cerchio" href="http://it.wikipedia.org/wiki/Cerchio" /> </map> </p> </article> </body> </html>
