Aspetti multimediali

La multimedialità consente di lavorare con numerosi tipi di informazioni gestite dal computer, superando l'angusto limite del tradizionale testo o delle sole immagini fisse. Con le tecniche che ne stanno alla base si possono associare ad un testo numerosi tipi di immagini, animazioni, suoni e video, così da rendere più immediata la comunicazione (e...forse, anche più coinvolgente lo studio e interessante l'approfondimento).

Conviene pertanto orientarsi opportunamente tra le tecniche di base che aggiungono all'ipertesto caratteristiche multimediali. In questo incontro si parlerà pertanto di come

• eseguire delle scansioni di immagini,
• condurre delle semplici elaborazioni grafiche,
• estrarre tracce audio da cd,
• masterizzare dei cd.

I formati delle immagini

Le tecniche di digitalizzazione e di memorizzazione di un'immagine sono numerose e in corrispondenza di ciascuna esiste un formato grafico o tipo di file che codifica le diverse informazioni grafiche. I tipi di file grafici sono pertanto numerosi e spesso legati alla particolare piattaforma: si pensi al formato BMP, standard delle immagini nei sistemi Windows e utilizzato ancora per creare immagini di sfondo del relativo desktop. Nell'ambito multimediale e particolarmente di Internet, sono però due soli i formati utilizzati: il tradizionale formato GIF e il formato JPEG (o JPG). Lo scopo di questa sezione è di descrivere brevemente le particolarità di questi ultimi.

Il formato GIF. Il formato GIF è il formato grafico attualmente più utilizzato nel Web. La sigla GIF sta per Graphics Interchange Format ed è stata sviluppata da CompuServe per rispondere all'esigenza di utilizzare un formato per le immagini interpretabili da diversi sistemi operativi. I file GIF dovrebbero poter essere letti su qualsiasi computer, utilizzando il software appropriato.
I file GIF sono ideali per loghi, icone, immagini in bianco e nero e altre semplici immagini. Il formato non è invece molto adatto a immagini dettagliate in quanto può utilizzare solo 256 colori: per esempio, per le fotografie, è certamente un formato da evitare.

Vi sono tre varianti del formato GIF:

1. GIF normale (o plain GIF): l'immagine va considerata come una foto incollata sulla pagina Web: tutte le immagini finora inserite nel testo di tale corso sono state catturate dallo schermo e salvate in questo formato.
2. GIF trasparente: il colore dello sfondo viene reso invisibile e quindi l'immagine è come se fosse stata disegnata direttamente sulla pagina. Un esempio di ciò è l'immagine riportata sotto: in quella a destra, è stato posto uno sfondo fucsia per mettere in evidenza le parti trasparenti.
3. Gif animata: è formata da una successione di immagini GIF statiche che si avvicendano rapidamente creando una semplice animazione.

Il formato JPG. Il formato JPEG (pronuncia "gei-peg"), acronimo di Joint Photographic Experts Group, è stato progettato per la memorizzazione di immagini fotografiche. A differenza delle immagini GIF, le immagini JPEG possono avere qualsiasi numero di colori (generalmente 16 milioni) e l'algoritmo che comprime le informazioni grafiche nel file per renderlo di dimensioni accettabili, funziona particolarmente bene per le immagini fotografiche e dunque i file creati hanno dimensioni notevolmente inferiori a quelle realizzabili con il formato GIF. Per contro l'algoritmo di compressione non è molto adatto per immagini in bianco e nero o per immagini con blocchi estesi di colore uniforme.

In definitiva se si dispone di una immagine tipo un disegno con una gamma molto limitata di colori è preferibile scegliere il formato GIF mentre se l'immagine consiste in una fotografia con un elevato numero di colori conviene scegliere il formato di memorizzazione JPEG. Va comunque sottolineato che questo formato, per ridurre le dimensioni del file che contiene l'immagine, opera una compressione che elimina alcune informazioni contenute nell'immagine. Quindi quando si salva un'immagine in formato JPEG, si può decidere quanta parte delle informazioni contenute nell'immagine dovrà essere eliminata dalla compressione. Maggiore sarà la perdita prodotta dalla compressione e maggiore sarà la compattezza del file prodotto ma anche maggiore il degrado dell'immagine. In alcuni casi si può provare con vari livelli di compressione in modo da trovare il livello ottimale per ottenere la qualità desiderata.

Acquisizione di immagini 1

Vediamo ora qual'è la tecnica per acquisire un'immagine da scanner. A tal fine utilizzeremo due distinti programmi, Corel Photo-Paint 8 e Paint Shop 5, in modo da evidenziare gli aspetti comuni di tale tecnica.

Il server della rete ha attualmente collegati due scanner ad una porta di acquisizione di tipo SCSI: uno scanner piano e uno scanner per negativi/diapositive. Per poterli utilizzare devono essere già accesi nella fase di avvio del sistema in modo che vengano riconosciuti dal sistema operativo (lo sono sempre se non si premono intenzionalmente i due interruttori di alimentazione). Nel caso siano invece spenti, si dovrà metterli in funzione premendo i rispettivi interruttori e quindi riavviare il Server-NT con le operazioni Start/Shut Down e Restart the computer.

Inserita un'immagine sul piano dello scanner vogliamo ora acquisirla. Per far ciò utilizzeremo, per prima, una opzione del programma CorelDraw 8 installato sul server. Questo programma è uno dei più conosciuti programmi di grafica e permette di gestire e modificare qualsiasi tipo di immagine a mappa di bit cioè un'immagine composta da una griglia di punti variamente colorati.
Per avviare CorelDraw 8, fare clic sul pulsante Start della barra delle applicazioni e quindi selezionare il percorso Programs/CorelDRAW8/Corel Photo-Paint con un clic finale su Corel Photo-Paint. Entrati nel programma,

• selezionare la voce di menu File,
• seguita da Acquisizione immagine/Selezione sorgente. È necessario seguire questa procedura per assicurarci che, delle due periferiche di input collegate al cavo SCSI cioè in questo caso dei due scanner, venga attivato quello corretto anziché l'altro. Va quindi selezionato lo scanner Microteck Scanmaker (quello per negativi e diapositive è invece lo scanner Epson Filmscan).
• Va ora attivato il programma che gestisce lo scanner: per far ciò fare clic su File/Acquisizione immagine/Acquisizione: appaiono due finestre: Untitled Job1 e Preview.

Questo programma è il vero e proprio responsabile del controllo e del funzionamento dello scanner: è cioè il suo driver ossia il programma, predisposto dal produttore, che sovraintende alla scansione e che infine trasferisce al programma chiamante (in questo caso, Corel Photo-Paint) i risultati della scansione. Dobbiamo ora predisporre le modalità della scansione:

• facciamo un clic sulla piccola freccia all'estrema destra del campo Type nella finestra Untitled Job1.

Le due opzioni principali saranno Millions of Colors e Line art. La prima è conveniente quando vogliamo riprodurre una fotografia o un disegno a colori, la seconda quando abbiamo a che fare con un disegno al tratto in bianco e nero o con una pagina di testo stampato. Scegliamo Millions of Colors.
Quindi definiamo la risoluzione immettendo un valore medio di 300 nella cella Resolution e scegliendo la voce dpi nella casella accanto. Va detto che dpi significa "punti per pollice" e definisce il livello di dettaglio con cui verrà analizzata l'immagine. Maggiore è questo numero (si può arrivare comunemente a 600 dpi) maggiori saranno i dettagli rilevati ma pure le dimensioni dell'immagine, indicate (non compresse) in questa finestra accanto alla voce Image size.

Prima della scansione vera e propria va fatta un'anteprima di quanto posto sul piano dello scanner anche per individuare la parte di interesse. Premiamo pertanto il pulsante Preview nella finestra Preview. Lo scanner inizia quindi ad analizzare l'immagine e alla fine la riporta nel riquadro nero. Tramite il mouse va ora evidenziata la zona rettangolare di cui si vuole la scansione: quindi

• avviare la scansione vera e propria con un clic su Scan.

Alla fine ci si ritrova in Corel Photo-Paint con l'immagine acquisita: si potrà ora elaborarla a piacimento con i numerosi strumenti messi a disposizione dal programma.
Volendo salvarla su file dobbiamo decidere se mantenere il numero di colori (16 milioni) rilevati nella scansione oppure se ridurli ai 256 di un'immagine in formato GIF. Nel primo caso l'immagine verrà memorizzata nel formato JPG: per far ciò vanno attuate le seguenti operazioni:

• selezionare la voce di menu File/Salva con nome. Appare visualizzata la finestra Salva un'immagine su disco.
• In corrispondenza della cella Save as type (Salva come tipo) fare un clic sulla piccola freccia alla destra per selezionare il formato di memorizzazione. Scegliamo il formato JPEG;
• va poi fornito, nella cella corrispondente il nome del file sotto il quale si vuole salvare l'immagine e, infine,
• fare clic su Salva.
• Appare ora la finestra Esporta JPEG che permette di scegliere il livello di compressione. Volendo per ora accettare le scelte standard, fare clic su OK. Alla fine della procedura otterremo un file con estensione JPG e con il nome che abbiamo scelto.

Se invece vogliamo ridurre a 256 (o meno) i colori presenti nell'immagine, dovremo preventivamente ridurre i livelli di colore presenti nell'immagine a 8 bit. Ne segue che

• selezionata la voce di menu Immagine/Converti in,
• fare clic su Tavolozza (8 bit): appare la finestra Converti in tavolozza che presenta diverse schede e opzioni.
• In corrispondenza della cella Tavolozza scegliamo con un clic sulla piccola freccia a destra la voce Ottimizzata e
• assicuratici che i colori siano 256 (o meno se l'immagine contiene pochi colori),
• fare clic su OK.

Possiamo ora salvare l'immagine con la procedura precedente File/Salva con nome, scegliendo come tipo (Save as type) il formato GIF e inserendo il nome. Infine clic su Salva.

Acquisizione di immagini 2

Operazioni sostanzialmente analoghe a quelle sopra descritte si seguono anche con Paint Shop 5. Paint Shop è un programma molto agile che permette veloci ritocchi delle immagini acquisite e, nel contempo, pure sofisticate elaborazioni.

Entrati in Paint Shop, si avvia la scansione

• selezionando la voce di menu File,
• seguita da Import/Twain/Acquire.

Viene ora attivato il driver dello scanner: entro il driver è possibile selezionare la cosiddetta profondità di colore ossia l'ampiezza della gamma di colori con la quale verrà eseguita la scansione. Come già detto, tale parametro è strettamente legato al tipo di immagine che si intende acquisire:

• se l'immagine è una foto, la gamma dev'essere la più ampia possibile: si parla allora di 16 milioni di colori o della profondità di 24 bit. Ciò significa che ad ogni elemento dell'immagine (pixel) si associa un certo numero che occupa 3 byte di memoria nel caso dei 24 bit.
• Se l'immagine possiede pochi colori è allora conveniente richiedere una scansione con una profondità di colore pari a 8 bit corrispondente ad una gamma di 256 colori.
• Se poi l'immagine è un disegno al tratto o la stampa di un testo e la si vuole in bianco/nero, la profondità di colore scende a 1 bit, pari a due soli colori, appunto il bianco e il nero.

Fatta questa scelta, va definita la risoluzione della scansione: anche qui se l'immagine verrà prevalentemente utilizzata a video non è necessario una risoluzione elevata: un valore medio di 300 dpi, è generalmente più che sufficiente (anzi, spesso si scende a 100 dpi soprattutto quando le dimensioni dell'originale sono rilevanti).

Selezionata con il mouse la zona cui siamo interessati, si avvia la scansione e alla fine ci si ritrova in Paint Shop con l'immagine acquisita: si potrà ora elaborarla a piacimento con i numerosi strumenti messi a disposizione dal programma.

Salvare l'immagine acquisita

Nell'ipotesi che l'immagine sia stata acquisita con la profondità di 24 bit o, equivalentemente con 16 milioni di colori, possiamo ancora decidere se ridurli ai 256 (o meno) di un'immagine in formato GIF. Nel primo caso l'immagine verrà memorizzata nel formato JPG mentre nel secondo, il formato scelto sarà il GIF.
Il salvataggio dell'immagine segue le tecniche usuali:

• selezionare la voce di menu File/Save as. Appare visualizzata la finestra Salva con nome.
• In corrispondenza della cella Save as type (Salva come tipo) fare un clic sulla piccola freccia alla destra per selezionare il formato di memorizzazione. Scegliamo il formato JPEG (o JPG);
• va poi fornito, nella cella corrispondente il nome del file sotto il quale si vuole salvare l'immagine:
• Volendo definire il livello di compressione dell'immagine va selezionato il pulsante Options: lasciando quello predefinito, va infine fatto
• un clic su Save.

Alla fine della procedura otterremo un file con estensione JPG memorizzato nella cartella scelta e con il nome voluto.
Se invece vogliamo ridurre a 256 (o meno) i colori presenti nell'immagine, dovremo preventivamente ridurre i livelli di colore dell'immagine a 8 bit. Ne segue che

• selezionata la voce di menu Colors,
• fare clic su Decrease Color Depth: appare la relativa finestra che dà l'accesso a diverse opzioni.
• Scelta con un clic la voce corrispondente ai 256 colori,
• appare la finestra che ci chiede quale dev'essere il metodo di riduzione dei colori.
• Accettiamo lo standard e avviamo la riduzione con un clic su OK.

Possiamo ora salvare l'immagine con la procedura precedente File/Save as, scegliendo come tipo (Save as type) il formato GIF e inserendo il nome. Infine clic su Save.

Cattura dello schermo

Spesso, nella realizzazione di un ipertesto, si incontra la necessità di memorizzare una particolare videata o una specifica zona dello schermo (in questo corso lo si è fatto varie decine di volte). Le operazioni da seguire sono molto semplici: vediamole in Paint Shop.

Supponiamo di voler acquisire una parte della schermata che appare durante l'editazione di un file in Word. A tal fine dobbiamo avviare Paint Shop e quindi, entrati nel programma, attivare la voce di menu Capture/Start. Immediatamente la finestra del programma si riduce ad icona sulla barra di Windows e si ritorna alla finestra di Word. Ora con il tasto funzione predefinito F11 (che può essere modificato con Capture/Setup) possiamo selezionare la zona che ci interessa.

• Con una prima pressione di F11 si fissa il primo vertice della zona rettangolare che si desidera catturare: il puntatore del mouse si trasforma di conseguenza in una piccola croce che possiamo muovere estendendo la zona finché
• un secondo clic fissa il secondo e ultimo vertice.

Ci ritroviamo al termine con la zona selezionata entro Paint Shop. Possiamo infine elaborare ulteriormente il file e salvarlo con la solita tecnica (fig. 1): essendo questa un'immagine con relativamente pochi colori conviene senza dubbio scegliere il formato GIF per la memorizzazione definitiva.

Fig. 1: Immagine acquisita con l'opzione di cattura schermo.

Volendo ritagliare i bordi della videata appena acquisita va utilizzato il tasto Crop :

• selezionato questo strumento dalla barra alla sinistra,
• si fissa con un clic un vertice della zona rettangolare che si intende mantenere:
• quindi allargare la zona fino alle dimensioni desiderate.
• Un doppio clic entro questa zona, cancellerà tutto quanto non vi è compreso.

Sfondi trasparenti

Un'altra semplice elaborazione molto usata nel Web e realizzabile con Paint Shop riguarda la trasformazione di un colore in una trasparenza. Si tratta cioè di definire, tra i colori dell'immagine, quale colore verrà considerato dal browser come trasparente. Tale caratteristica, possibile solo nel formato GIF, permette di far emergere attraverso le parti trasparenti, lo sfondo della pagina: in tal modo le stesse immagini non appariranno necessariamente di forma rettangolare ma assumeranno la forma delle zone non trasparenti (si veda l'esempio sopra).

Descriviamo la procedura per rendere trasparente lo sfondo bianco dell'immagine precedentemente acquisita. Innanzitutto, va selezionato lo strumento Dropper che permette di copiare un colore dell'immagine e riportarlo come colore di primo piano o di sfondo a seconda del pulsante del mouse premuto. Si faccia pertanto

• un clic tramite il pulsante destro del mouse sul colore (bianco) che si vuole rendere trasparente. In tal modo il colore di sfondo, indicato dal pannello cambia e viene sostituito dal bianco (rettangolo inferiore destro della figura 2).

Fig. 2: Pannello che mostra il colore di primo piano (grigio) e di sfondo (bianco).

Selezionare quindi la voce di menu Color e Set Palette Transparency. Nella finestra che appare si possono decidere i colori che verranno resi, nel browser, come trasparenti. Optiamo per la seconda possibilità e che definisce trasparente il colore che attualmente è quello di sfondo (appunto il bianco). Un clic su OK termina la procedura: la figura sottostante dà il risultato riportato dal browser una volta che si sia definita una opportuna immagine (o colore) di sfondo.

Fig. 3: L'immagine precedente con un colore (il bianco) reso trasparente.

Il tag <IMG>

Dopo aver generato un'immagine in formato GIF o JPG, è possibile includerla in una pagina Web. Queste immagini, dette immagini in linea, possono essere specificate in HTML utilizzando il tag <IMG>. Questo è un tag vuoto che dispone di numerosi attributi, alcuni dei quali specifici dei due principali browser grafici, Netscape e Internet Explorer: noi ne affronteremo i principali.

Poiché il tag <IMG> non introduce un'interruzione di riga, è possibile inserire un'immagine nella riga di testo corrente e l'immagine sarà visualizzata insieme ai testi: proviamo pertanto ad inserire l'immagine floppy.gif, presente sul server. Dopo averla copiata sulla cartella locale di lavoro ed aperto un nuovo file HTML

• si selezioni il pulsante Image dalla barra degli strumenti;
• in corrispondenza della cella Source, fare un clic sull'icona di cartella all'estrema destra. Questa apre una finestra che ci permette di selezionare l'immagine appena copiata dal server nella nostra cartella locale: quindi,
• con un clic su Open, riportiamo la sua URL (in questo caso costituita dal solo nome del file) nella casella Source. Infine
• fare clic su OK.

Come si può vedere l'editor inserisce il codice

<img src="floppy.gif" width=83 height=84 border=0 alt="">

che mette in evidenza diversi attributi, tra i quali spicca per primo il più importante, l'attributo SRC (source o sorgente). Questo è l'unico obbligatorio per il tag <IMG> e indica al browser dove trovare l'immagine che si intende inserire nella pagina. Seguono poi gli attributi che definiscono le dimensioni, in pixel, dell'immagine e quindi l'attributo ALT che permette di associare un breve testo all'immagine, testo che verrà visualizzato quando il mouse passa sopra l'immagine.

Se ora, accanto al codice immettiamo un breve testo qualsiasi e poi visualizziamo il risultato, notiamo che quest'ultimo viene posto accanto all'immagine in modo tale che la sua linea di base corrisponda con il margine inferiore dell'immagine (vedi figura seguente).

Più in generale, il tag <IMG> prevede l'attributo ALIGN che consente di allineare l'immagine alla parte superiore, al centro o alla parte inferiore del testo. Proviamo perciò a sfruttare questi attributi selezionandoli nella finestra degli attributi del tag cioè nella finestra che viene aperta con la selezione del tasto Image. Alla fine si dovrebbero ottenere le seguenti 3 disposizioni (al di sotto di ognuna il codice prodotto):

<img src="floppy.gif" width=83 height=84 border=0 alt="" align="top">

<img src="floppy.gif" width=83 height=84 border=0 alt="" align="middle">

<img src="floppy.gif" width=83 height=84 border=0 alt="" align="bottom">

In definitiva l'attributo

Se però il testo è formato da più di una riga e si inserisce un'immagine in mezzo al testo, tutto il testo che non riesce ad essere affiancato viene posizionato sopra e sotto l'immagine con un effetto esteticamente indesiderato (si provi ad aggiungere dell'altro testo e a visualizzarne l'effetto). È per tale motivo che spesso si preferisce fare in modo che il testo circondi l'immagine: a tal fine sono stati introdotti due nuovi valori dell'attributo ALIGN del tag <IMG>: LEFT e RIGHT.

ALIGN="LEFT" allinea un'immagine al margine sinistro della finestra e ALIGN="RIGHT" allinea l'immagine al margine destro. Utilizzando questi attributi il testo che segue l'immagine viene visualizzato nello spazio che si trova a destra o a sinistra dell'immagine, a seconda del tipo di allineamento scelto. Ecco degli esempi che fanno uso di un'immagine più piccola della precedente, new.gif (da prelevare dal server).

Il tag <IMG> della figura di sinistra fa uso dell'attributo ALIGN="LEFT". Come si può vedere il testo si trova dalla parte destra dell'immagine e la avvolge sia sopra che sotto. La medesima immagine compare pure sul lato destro entro il medesimo paragrafo: per ottenere ciò è stato sufficiente inserire un altro tag <IMG> con attivato l'attributo ALIGN="RIGHT".

Immagini e link

Ma un'immagine può funzionare come link? La risposta è certamente affermativa e questo fatto apre notevoli possibilità a chi intende comporre ipertesti che siano, non solo esteticamente attraenti, ma che forniscano strumenti efficaci per la loro consultazione. In effetti basta includere il tag <IMG> all'interno del tag <A> che l'intera immagine fungerà da area attiva per il link.

Inseriamo, per esempio, una link destinazione di nome inizio all'inizio del file attualmente aperto:

• posizionato il cursore all'inizio del file,
• selezionare il tasto Anchor e
• immettere nella cella corrispondente all'attributo NAME, il testo inizio.

Ora, reperita dal server l'immagine ritorna.gif e salvata localmente, portiamoci alla fine del file che stiamo editando e la inseriamo con l'attivazione del pulsante Image. Non ci rimane che

• evidenziare tutto il codice immesso e relativo al tag <IMG> e,
• con un ulteriore clic sul tasto Anchor,
• inserire in corrispondenza dell'attributo HREF l'URL relativo, #inizio,
• seguito da OK.

Nella successiva visualizzazione è sufficiente passare il mouse sopra l'immagine che il puntatore si trasforma in una mano con l'indice puntato: è quindi possibile selezionare il link e ritornare all'inizio del file.

Altri esempi di immagini trasformate in link utili alla "navigazione" di un ipertesto sono le tre immagini sottostanti.