aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

Gestire le immagini

 

Il secondo tipo di contenuto tipico di una pagina Web sono le immagini. A differenza del testo, non si trovano nella pagina HMTL, ma vengono caricate in quest'ultima per mezzo di uno speciale marcatore che ne indica la posizione all'interno del sito in relazione al documento oltre che le caratteristiche di visualizzazione e l'allineamento rispetto al testo. Nella gestione delle immagini, esistono quindi due fasi: la prima consiste nel preparare il file che le contiene e la seconda consiste nel collegarlo alla pagina nella posizione in cui vogliamo che appaia quando spedito al browser del navigatore. Per tale motivo bisogna conoscere i formati di file utilizzabili e sapere scegliere quello corretto in funzione del contenuto, cioè del tipo di immagine che si vuole riprodurre.

Grafica bitmap e vettoriale
Le immagini prodotte a computer si dividono in due grandi famiglie: le immagini bit map sono composte da una mappa di bit che definisce il colore di ciascun punto della mappa rettangolare di pixel (picture elements) che saranno visualizzati sullo schermo. Sono le uniche direttamente riconoscibili dai browser e hanno un formato fisso e difficilmente modificabile. Le variazioni possibili di un'immagine bitmap consistono nella modifica dei colori dei singoli pixel, nel ridimensionamento dell'immagine oppure nel ritaglio di un particolare: tutte operazioni da realizzare mediante un programma di ritocco come Photoshop, Image Ready, Fireworks, Gimp e altri. Qualsiasi operazione è di fatto un ritocco basato su collage di elementi, magari presi da immagini diverse, e sulla modifica del colore di quelli esistenti. Non è possibile cambiare in maniera interattiva le dimensioni o l'orientamento degli oggetti contenuti in un'immagine bit map e nemmeno alterare il contenuto di un eventuale testo presente. È anche molto difficile ingrandire l'immagine senza perdere qualità, visto che l'ingrandimento viene realizzato mediante l'aggiunta di punti simulati matematicamente mediante una duplicazione approssimata di quelli già esistenti.

Le immagini vettoriali hanno invece la caratteristica di definire ciascun oggetto mediante coordinate geometriche e perciò ne consentono la modifica a piacere: ingrandimento, rimpicciolimento, sostituzione ed eliminazione di interi elementi senza lasciare segno, riscrittura del testo. Sono anche particolarmente adatte per produrre animazioni. Richiedono una notevole "intelligenza" di calcolo, non disponibile sui normali browser e perciò possono essere riprodotte unicamente mediante speciali aggiunte (plug-in) che di solito sono concepite per gestire solo un formato particolare, come Flash di Macromedia oppure Acrobat di Adobe, e vengono utilizzati solo per porzioni particolari di un sito non consultabili in assenza del plug-in. Esiste anche un formato vettoriale definito come standard nel 1999 dal World Wide Web Consortium (http://www.w3c.org), lo SVG (Scalable Vector Graphics), concepito per la definizione vettoriale d'immagini bidimensionali e basato su XML. È stato adottato da numerosi produttori di software, tra cui la stessa Microsoft che lo ha scelto per Office 11, perciò lo vedremo affiorare gradualmente in futuro.

Nella pratica, tutti i principali programmi di modifica delle immagini bitmap consentono di produrre un file di lavoro con alcuni contenuti vettoriali, come ad esempio il testo e le forme geometriche chiave (linea, cerchio, rettangolo) che viene quindi esportato in formato puramente bitmap al termine dell'elaborazione. In questo modo avremo due file distinti: uno di lavoro realizzato nel formato vettoriale tipico del programma, su cui potremo continuare a intervenire con le nostre variazioni e correzioni, e uno da pubblicare, salvato in uno dei tre formati direttamente riconoscibili dai browser: GIF, JPEG e PNG.

I tre moschettieri della grafica Web
Oggi non esiste modo per pubblicare un'immagine sul Web che non passi attraverso l'adozione dei tre formati standard: GIF, JPEG e PNG. I primi due sono compatibili con tutte le versioni di browser in circolazione, mentre il terzo è stato supportato in modo imperfetto fino alla generazione 5.x, perciò va usato con attenzione, anche se di gran lunga preferibile agli altri due.

Il fomato GIF (Graphics Interchange Format) è adatto per comprimere immagini che usino tinte unite e un numero limitato di colori (256), come ad esempio grafici, disegni schematici, videate. In tale contesto, offre un ottimo livello di compressione senza perdita di dati (lossless) e una buona qualità di riproduzione che può anche adattarsi ai colori nativi prodotti da HTML così da creare immagini che si fondono senza soluzione di continuità con lo sfondo HTML della pagina o della tabella che le contiene. Consente inoltre di creare semplici animazioni.

Il formato JPEG (Joint Photographic Experts Group) s'indirizza, come indicato dal nome, alle immagini fotografiche. Prevede diversi livelli di compressione con una perdita progressiva di dati e di qualità. È molto efficace nella compressione d'immagini con sfumature e toni a variazione continua.

Il PNG (Portable Network Graphics) è nato dopo l'avvento dei principali browser e ha tratto beneficio dalle prime esperienze realizzate dai progettisti del Web. Si propone come alternativa evoluta al GIF, ma può anche gestire fotografie visto che permette di riprodurre 16 milioni di colori mediante una compressione senza perdita più efficiente rispetto a quella del formato GIF. Offre anch'esso la possibilità di creare semplici animazioni.

Per il momento è sufficiente ricordare questa regola: GIF o PNG per grafici, immagini con tinte unite o animazioni; JPEG per le fotografie. Nella lezione dedicata al Web design vedremo meglio come sfruttare ciascuno di essi.

Inserire l'immagine nella pagina HTML
Abbiamo detto che ogni immagine costituisce un oggetto esterno alla pagina Web e che viene abbinata a quest'ultima nel momento in cui il server la spedisce al browser del navigatore. A tale scopo è sufficiente inserire nel codice HTML della pagina, lì dove vogliamo che l'immagine compaia, un riferimento che punti alla posizione del file che la contiene e che ne indichi le principali caratteristiche di visualizzazione. Ciò permette di svincolare HTML e grafica di conservare tutte le immagini in una directory centralizzata, una tecnica particolarmente utile nei siti dinamici.

Il marcatore HTML che inserisce l'immagine nella pagina è <img> (image) che deve essere necessariamente abbinato all'attributo src (source – fonte) per indicare la posizione del file grafico. Un esempio pratico del suo uso sarebbe <img src="/zzz/pcopenlogo.gif" width="168" height="55" border="0"> dove si dice che l'immagine pcopenlogo.gif si trova nella cartelletta "zzz" e che va visualizzata con una larghezza di 168 pixel e un'altezza di 55 pixel, senza bordo. Altezza e larghezza non sono indispensabili, poiché il browser userà automaticamente le dimensioni dell'immagine contenuta nel file, tuttavia sono utili per velocizzare la visualizzazione della pagina. Infatti, sapendo lo spazio da riservare, il browser può comporre la pagina immediatamente senza aspettare che l'immagine sia stata caricata per intero. I due parametri servono anche per visualizzare l'immagine a dimensioni diverse (solitamente più piccole) rispetto all'originale. Questo può essere utile nel caso in cui la stessa immagine compaia in più pagine con risoluzioni diverse e non si voglia produrne più versioni. Non è sempre una strategia vincente poiché costringe il browser a compiere un doppio lavoro: scaricare un file più grande del necessario e ridimensionarlo, a scapito della velocità di visualizzazione della pagina. Può essere utile solo quando siamo sicuri che le versioni multiple della stessa immagine siano viste nella stessa sessione di navigazione, magari perché sono nella stessa pagina. In tal caso, il beneficio di caricare un solo file invece che diversi compensa i rallentamenti dovuti alla rielaborazione.

L'attributo border serve a visualizzare o meno un bordo blu, usato per indicare che all'immagine è abbinato un collegamento ipertestuale. È rarissimo trovare siti che usino ancora immagini bordate perché il bordo è decisamente antiestetico e ormai inutile, visto che i navigatori suppongono quasi sempre che tutte le immagini siano cliccabili e possono averne conferma semplicemente portandovi sopra il cursore del mouse.

Un altro attributo molto importante è align usato per allineare l'immagine rispetto agli elementi che la circondano. Poiché si tratta di un attributo che modifica l'impaginazione e non fornisce invece informazioni strutturali, è stato deprecato da HTML 4.01 che consiglia di sostituirlo con una funzione equivalente dei CSS. Tuttavia i progettisti di siti si sono talmente abituati a utilizzarlo che non sparirà tanto presto dalla circolazione.

L'attributo align prevede cinque valori: il più comune, left, allinea l'immagine lungo il margine sinistro della finestra, tabella o altro elemento in cui si trova, lasciando il testo fluire sulla destra. Con right si ottiene naturalmente l'effetto opposto. Con top si allinea il margine superiore dell'immagine al margine superiore della prima riga di testo corrente. Il parametro middle allinea la base della prima riga di testo al centro dell'immagine. Infine bottom allinea la base della prima riga del testo corrente alla base dell'immagine. Trovate un esempio HTML delle varie modalità nel file "Allineamento immagine" sul CD.

Allineare il testo all'immagine
Il punto d'inserimento dell'immagine nella pagina viene indicato mediante il marcatore <img> al quale si associa anche l'attributo di allineamento rispetto al testo già esistente.

Esempio di codice HTML per inserire un'immagine
Qui vediamo una parte della pagina che è stata utilizzata per realizzare la figura sopra. Le immagini sono state inserite in una tabella che contiene uno stile in linea sia per la tabella in quanto tale (vedi la parte in blu nel tag <table>) sia per la didascalia (vedi la parte in blu nel tag <caption>).
Il tag <img> inserisce l'immagine direttamente nella cella della tabella specificando mediante l'attirbuto src dove andarla a pescare e, mediante l'attributo align come allinearla rispetto al testo che segue direttamente la chiusura del tag <img>.

Un altro attributo importante, ma spesso trascurato è alt (alternate) che serve a contenere una breve descrizione dell'immagine da usare nel caso in cui l'immagine stessa non fosse visibile, vuoi perché il navigatore ne ha disattivato la visualizzazione sul proprio browser, vuoi perché non è in grado di vederla. La seconda ipotesi si riferisce sia a navigatori non-vedenti sia a chi utilizza browser vocali che "leggono" il contenuto della pagina al telefono oppure su altro dispositivo di navigazione uditivo (come i navigatori per automobile). L'uso dell'attributo alt costituisce un requisito per rendere il sito accessibile secondo le specifiche WAI (Web Accessibilità Iniziative - http://www.w3.org/WAI/) e sono ormai diventate obbligatorie in gran parte dei siti dell'amministrazione pubblica. Un'alternativa è longdesc che consente d'inserire un link a un altro documento che descriva il contenuto dell'immagine.

Chiudono l'elenco degli attributi per le immagini convenzionali hspace e vspace che indicano in pixel rispettivamente lo spazio orizzontale e verticale da riservare attorno all'immagine. Vengono usati di rado perché si applicano uniformemente sui quattro lati dell'immagine compromettendo anche gli allineamenti rispetto al testo e alla tabella di layout. Di solito, dell'immagine rispetto agli elementi sui lati che c'interessano viene realizzata con maggiore precisione usando celle vuote nella tabella di layout.

  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
  Seconda lezione:
  Siti statici e linguaggio HTML
  Terza lezione:
  Modelli di pagina e tabelle
  Quarta lezione:
  HTML 4.01 e CSS
1. Stile e struttura
  1. Markup fisici e logici
  2. Il deprecato tag font
  3. Gestire gli spazi nel testo
2. Gli standard dell'editoria sul Web
3. CSS e HTML 4.01
  1. Cosa si può fare coi fogli di stile
  2. Ereditarietà e innesco a cascata
  3. Proprietà di trasferimento dei parametri
  4. Regole di ereditarietà
  5. Quattro tipi di CSS
  6. Selettori di classe
4. I colori del Web
  1. Websafe palette
5. Gestire le immagini
6. Esercizi
  Quinta lezione:
  Design e multimedialità
  Sesta lezione:
  Siti interattivi

 Copyright© PC Open - 2002 - 2003

Credits