IMMAGINI E MULTIMEDIALITA'

IMMAGINI E MULTIMEDIALITA’

Le immagini e gli elementi multimediali arricchiscono il
Web. Le immagini sono quegli elementi grafici che si
possono rappresentare in una pagina Web. Le immagini
possono essere: fotografie, icone, illustrazioni, disegni e
semplici animazioni.
Il termine multimedialità identifica un modo di
comunicare mediante mezzi di natura diversa, come
filmati, suoni, immagini, testi e altro ancora.

Formati di immagini
• GIF (Graphics Interchange Format): supporta colori a 8 bit per
  pixel ed è il formato più utilizzato in rete. Ha tre varianti:

   – GIF normale: l’immagine è come una fotografia incollata nella pagina.
   – GIF trasparente: lo sfondo è invisibile e quindi l’immagine è come se
     fosse stata disegnata direttamente sulla pagina
   – GIF animata: è formata da alcune immagini GIF statiche che si
     avvicendano rapidamente creando una semplice animazione

  La sua compressione è considerata lossless (priva di perdite) in
  quanto la qualità dell’immagine non cambia attraverso le
  conversioni in formato GIF. Una conversione lossless conserva
  tutti i bit di dati dell’immagine quando essa viene compressa.

Formati di immagini
• JPEG (Joint Photographic Experts Group): supporta colori a 8
  e 24 bit per pixel. Il formato JPEG è un modello di
  compressione lossy (con perdite); ossia ogni volta che
  l’immagine è compressa in JPEG, alcuni pixel sono scartati.
  Occupa meno spazio di un file GIF, poiché si ha un rapporto di
  compressione maggiore.

• PNG (Portable Network Graphics): supporta colori a 8 e 24 bit
  per pixel. Adotta un algoritmo di compressione lossless. E’
  supportato dai più potenti browser, ma non da tutti.

• BMP: Formato standard delle immagini Microsoft Windows.
  Supporta 1, 4, 8 e 24 bit per pixel. Di solito non è compresso.
  Attualmente i browser standard non supportano questo tipo a
  meno che non utilizzano Paint.

Consigli per ridurre i tempi per scaricare file grafici

• Semplificare gli elementi grafici delle immagini: Utilizzare il
  minor numero possibile di colori e salvare in GIF o JPEG.

• Ripartire le pagine estese in più pagine: Regola generale delle
  pagine Web, ma in particolare quando le pagine hanno molti
  grafici (regola generale: 50 Kbyte).

• Mantenere le immagini più estese nelle loro pagine: Se si ha
  un’immagine molto complessa, è bene inserirla in una pagina
  distinta e creare un link per raggiungerla dalla pagina corrente.

• Riutilizzare le immagini nelle vostre pagine Web: Se si
  riutilizza la stessa immagine più volte, il browser la può caricare
  dalla cache locale, senza la necessità di spostarla tramite la rete.

Descrizione : visualizza fotografie disegni e altre immagini.
Tipo : tag vuoto.
Attributi : align, alt, border, class, dir, height, id, ismap, lang, longdesc,
onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown,
onMouseMove, onMouseOut, onMouseOver, onMouseUp, src, style, title,
usemap, vspace, width.

Il tag  consente di inserire le immagini nei documenti
HTML. Non introduce un’interruzione di riga, quindi si può
inserire un’immagine nella riga di testo corrente e l’immagine
sarà visualizzata insieme ai testi.

Alcuni attributi di 
• SRC: E’ l’unico obbligatorio per il tag . Indica al browser
  dove trovare l’immagine che si vuole inserire nella pagina. Il
  nome del file dell’immagine è racchiuso tra virgolette. Ci sono tre
  scuole di pensiero sul luogo in cui tenere i file:
   – “riduzione al minimo del carico del server”: tutte le immagini devono stare
     sulle macchine remote e che SRC deve fornire un link attraverso la rete
     fino al sito remoto. Es:

   – “tutto debba essere posto nella stessa directory”: riducendo al minimo i
     path da specificare nell’attributo SRC. Es:

Alcuni attributi di 
• ALT: Tale attributo è facoltativo. Contiene un testo che viene
  visualizzato quando l’utente di un browser grafico posiziona il
  puntatore del mouse sull’immagine. Il testo viene visualizzato
  anche quando il browser non può rappresentare le immagini,
  perché l’utente non ha browser grafico o perché ha disabilitato
  il caricamento automatico delle immagini.

• HEIGHT e WIDTH: Permettono di indicare al browser quanto
  spazio dello schermo deve essere riservato a un’immagine,
  riducendo il tempo di caricamento delle pagine.
  L’altezza e la larghezza si devono esprimere in pixel.
  Es:

Codice per visualizzare un’immagine inline

 Un esempio di
   immagine 

Questa è la foto di una stampante:

E'una stampante laser.

Alcuni attributi di 

• ALIGN: Permette di controllare l’allineamento dell’immagine
  con la riga di testo dove è inserita:
   – TOP: Allinea la parte superiore dell’immagine con la parte superiore
     dell’elemento più alto della riga di testo corrente.
   – MIDDLE: Allinea la parte centrale dell’immagine con la parte inferiore
     (o linea di base) della riga di testo.
   – BOTTOM: Allinea la parte inferiore dell’immagine con la parte
     inferiore della riga di testo.

• VSPACE e HSPACE: Permette di stabilire lo spazio verticale e
  orizzontale intorno alle immagini.

Allineare i testi al centro
 Allineamento al centro 
Descrizione: Allinea un elemento al centro della finestra del
browser.
Tipo: tag contenitore.
Attributi: Nessuno.
Una tecnica per allineare un’immagine al centro della pagina è
quella di inserirla all’interno di .

Per introdurre uno spazio sopra e sotto un’immagine, si utilizza il
tag  con l’attributo ALIGN=“CENTER”.

Due tecniche per allineare un’immagine al centro della pagina

 Immagini al centro 

Questa è la foto di una stampante:

E'una stampante laser.

Ha un'ottima qualità di stampa

Link grafici
 
Cornici di immagini

Le seguenti quattro immagini hanno la cornice impostata rispettivamente a 0, 2, 4,
8, pixel:

Link grafici

Nessun accapo 
Descrizione : impedisce al browser di creare un’interruzione di
riga.
Tipo : tag contenitore.
Attributi : nessuno.

In alcuni casi potrebbe essere necessario visualizzare una riga
senza interruzioni. Per creare un’unica riga senza interruzioni si
utilizza il tag  … . Le applicazioni tipiche
sono:
1 Visualizzare una riga di programma.
2 L’input che l’utente immette da tastiera.
3 Un testo che non deve essere ripartito su più righe.

Interruzione condizionale di riga 

Descrizione : inserisce un’interruzione condizionale di riga
all’interno di un tag .
Tipo : tag contenitore.
Attributi : nessuno.

Produce un’interruzione in una riga posta all’interno di
, se la riga si estende oltre il margine destro della
finestra del browser. L’interruzione prodotta da  è
formata da due caratteri di controllo: carriage return (ritorno
carrello) e line feed (avanzamento di riga).

Quando utilizzare le immagini
Quando si inseriscono le immagini in una pagina Web,
bisogna tenere presente che una parte significativa degli utenti
non userà o non potrà usare le informazioni contenute nelle
immagini. Questi utenti si classificano in tre categorie:
a Gli utenti con modem lenti che non vogliono impiegare
   troppo tempo per caricare le immagini.
b Gli utenti con difetti visivi (ipovedenti).
c Gli utenti che hanno disattivato il caricamento automatico
   delle immagini.
Per soddisfare le esigenze di tutti non si inserirà mai delle
informazioni in un’immagine che potranno essere accessibili
solo attraverso quell’immagine.