I FILE MULTIMEDIALI (1)

Transcript

1 Scheda 31 I FILE MULTIMEDIALI (1) INTRODUZIONE Per file multimediale si intende un file utilizzato per rappresentare immagini, suoni o filmati. Esistono vari tipi di file multimediali e ogni volta è necessario saper scegliere un buon compromesso fra qualità e spazio occupato in memoria. Lo spazio occupato diventa fondamentale se la risorsa multimediale deve essere utilizzata nel WEB MP3 MP3, per esteso Motion Picture Expert Group 1/2 Audio Layer 3, è un algoritmo di compressione audio in grado di ridurre drasticamente la quantità di dati richiesti per memorizzare un suono, rimanendo comunque una riproduzione fedele del file originale non compresso. MIDI FILE Con l'acronimo MIDI (Musical Instrument Digital Interface) si indica il protocollo standard per l'interazione degli strumenti musicali elettronici (anche tramite un computer). Il MIDI, nato negli anni '80, è rimasto pressoché inalterato ed è intensamente utilizzato nella produzione di musica digitale. I motivi risiedono probabilmente nel ruolo di standard, pressoché incontrastato, che il MIDI ha assunto nell'ambito musicale, e nella cura riposta dai progettisti nella stesura delle prime specifiche. Di fatto, il MIDI ha peculiarità interessanti su più fronti: la qualità e la praticità del sistema hanno consentito una rapida diffusione dello standard nella realizzazione di musica digitale la leggerezza dei file MID (in termini di kb): tramite Internet ed i software multimediali, il MIDI diventa un media di uso comune non più appannaggio esclusivo dei musicisti. la diffusione di basi di livello qualitativo sempre maggiore: fatto che ha permesso a molti musicisti di svolgere con facilità e qualità il proprio lavoro. il costo: Molti produttori hardware e software puntano sulla multimedialità dei propri prodotti. Con un investimento minimo, o ricorrendo a programmi freeware, è possibile per ognuno disporre di un computer in grado di realizzare produzioni musicali di buon livello

2 Scheda 32 I FILE MULTIMEDIALI (2) TIPI DI FILES GRAFICI Qualsiasi tipo di immagine memorizzata su disco e rappresentata da un file avente un nome scelto dall utente e una estensione tipica dei file contenenti immagini. L estensione indica anche il tipo di file grafico. I più comuni files di tipo grafico presentano estensione BMP, JPEG e GIF FILE DI TIPO BMP L'immagine viene vista come una scacchiera e ad ogni elemento della scacchiera, chiamato pixel, viene associato uno specifico colore. L'immagine bitmap è caratterizzata da due proprietà: risoluzione: determinata dal numero di pixel contenuti nell'unità di misura considerata (in genere il pollice inglese, che misura 2,54 cm) ed è ottenuta moltiplicando il numero di pixel orizzontali per quello dei pixel verticali profondità di colore: definita dalla memoria che si dedica ad ogni pixel, ovvero dal numero di bit dedicati ad ogni pixel per descrivere il colore, maggiore è il numero di bit, maggiore è il numero di colori che è possibile descrivere La grafica bitmap è ideale per rappresentare immagini, per modificare contrasti e luminosità di queste, per applicare filtri di colore. Questa modalità ha il difetto di occupare notevole spazio in memoria FILE DI TIPO JPEG JPEG è l'acronimo di Joint Photographic Experts Group, un comitato ISO/CCITT che ha definito il primo standard internazionale di compressione per immagini sia a livelli di grigio che a colori. Attualmente JPEG è lo standard di compressione delle immagini fotografiche più utilizzato. Le estensioni più comuni per questo formato sono.jpeg,.jpg,.jfif,.jpg,.jpe, anche se il più comune in tutte le piattaforme è.jpg. FILE DI TIPO GIF Il GIF (Graphics Interchange Format) è un formato per immagini di tipo bitmap molto utilizzato nel World Wide Web, sia per immagini fisse che per le animazioni. È stato introdotto nel 1987 da CompuServe per fornire un formato adatto alle immagini a colori. Il formato GIF si diffuse perché utilizzava un sistema di compressione adottati in precedenza. Il formato GIF è basato sull'uso di una tavolozza di colori: anche se il singolo colore può essere uno fra milioni di sfumature, solo un certo numero di essi è disponibile (al massimo 256). I colori sono memorizzati in una tavolozza, una tabella che associa un numero ad un certo valore di colore. La limitazione a 256 colori appariva ragionevole all'epoca della creazione del formato GIF perché non erano ancora diffusi dispositivi in grado di visualizzarne un numero superiore. Per disegni al tratto, fumetti, fotografie in bianco e nero sono di regola sufficienti 256 colori. Uno dei colori della tavolozza, può essere definito come trasparente e quindi, in fase di visualizzazione, è sostituito con lo sfondo. Questa caratteristica (canale alpha) permette di simulare immagini non rettangolari

3 Scheda 33 RIEPILOGO FILE GRAFICI GESTIONE DEI FILE CONTENENTI IMMAGINI Scegliere un tipo di file significa selezionare un rapporto qualità spazio occupato su disco (o anche velocità di visualizzazione) più conveniente. Per editare (ossia modificare) un file contenente immagini o per convertire un file da un tipo ad un altro si possono utilizzare vari programmi: MS PAINT: viene fornito insieme a Windows. Risulta molto semplice da usare, ma presenta solo le funzioni principali. ADOBE FOTOSHOP: uno dei migliori software per l'elaborazione di file grafici. FAST STONE CAPTURE: per la cattura di immagini a video. ACDSEE32: programma datato ma leggerissimo e utilissimo soprattutto per la visualizzazione delle GIF ANIMATE. IRFANWEW: come il precedente consente la visualizzazionie rapida Qualsiasi tipo di immagine memorizzata su disco e rappresentata da un file avente un nome scelto dall utente e una estensione tipica dei file contenenti immagini. L estensione indica anche il tipo di file grafico. ESTENSIONE BMP GIF PNG JPG JPEG TIPO Bit MaP Graphic Interchange Format Portable Network Graphic Joint Photographic Experts Group DESCRIZIONE File di qualità, occupa moltissimo spazio su disco. Formato adatto per piccole immagini o immagini in corso di modifica (vedi consigli a fine scheda). File molto compresso adatto per vignette o immagini con pochi colori. Molto utilizzato per le pagine internet. Questo tipo di file comprende anche la possibilità di includere animazioni. Possibilità di colore trasparente E' un tipo di compressione senza perdita di dati, anche per alte profondità di colore. Purtroppo però produce file di grandi dimensioni. Esistono due tipi di file PNG: 1.PNG-8 2.PNG-24 Il formato PNG-8 usa colori a 8 bit e presenta molte analogie con i file di tipo GIF. Il formato PNG-24 supporta colori a 24 bit e presenta molte analogie con i file di tipo JPEG. È adatto sia per le immagini fotografiche che per le immagini geometriche e in più ha il vantaggio di supportare la trasparenza File mediamente compresso adatto per fotografie. Molto utilizzato per le pagine internet.

4 Scheda 34 DREAMWEAVER - INTRODUZIONE Dreamweaver è un programma per la realizzazione di siti web prodotto da Macromedia (dal 2005 società di proprietà di Adobe Systems) è tra i programmi più utilizzati nel suo campo Dreamweaver presenta molte funzioni utili per gli sviluppatori. Al lancio del programma compare la schermata di avvio simile a quella visualizzata in basso. Per definire un nuovo sito o lavorare su un sito già creato in precedenza selezionare Gestisci siti dal menu Sito. Comparirà una finestra di dialogo che consente di scegliere il sito su cui lavorare oppure di crearne uno nuovo. Per selezionare un sito esistente selezionarlo dall'elenco di sinistra e cliccare su FINE. Per definire un nuovo sito cloccare su Nuovo... e indicare il Nome del sito e la posizione o cartella nella quale verranno salvati i file. Per visualizzare una nuova pagina, selezionare HTML dalla Colonna centrale (vedi freccia rossa presente nell'immagine superiore). Oppure selezionare Nuovo dal menu File per visualizzare un pannello (vedi disegno a destra) da cui selezionare il tipo di file che si vuole editare (ES. Pagina Vuota e poi HTML). Nella parte destra della schermata è presente una struttura di cartelle contenenti i file del sito che si sta modificando o creando (riquadro rosso della figura in alto).

5 Scheda 35 DREAMWEAVER - AREA DI LAVORO E GEST. PARAGRAFO Dopo aver visualizzato una pagina questa comparirà nell'area di lavoro. Contemporaneamente nella parte superiore compariranno 3 pulsanti, Codice, Dividi, Progettazione (disegno a lato) che consentono di visualizzare rispettivamente il codice HTML della pagina, il codice HTML e la pagina insieme, oppure la sola pagina. Un altro pulsante utile è Anteprima nel browser identificato da una icona con un piccolo mappamondo. Cliccando sulla piccola freccetta in basso visualizzata sul pulsante è possibile scegliere quale, fra i browser presenti nel PC, si vuole utilizzare. Durante l'uso di Dreamweaver, nella parte inferiore della schermata (vedi freccia e relativo ingrandimento nelle foto a sinistra e in basso) compare la cosiddetta FINESTRA DI ISPEZIONE DELLE PROPRIETA' utilizzando la quale è possibile visionare e modificare le caratteristiche del componente della pagina (paragrafo, tabella, immagine ecc.) su cui si sta operando (cioè su cui si è fatto click con il mouse. La finestra delle proprietà visualizzata in alto rappresenta le proprietà di Pagina, Paragrafo e Carattere. E' bene ricordare che, ove possibile, le gestione del layout viene gestito da Dreamweaver tramite comandi CSS. Per l'utente che sconosce tali comandi si consiglia di limitare l'utilizzo del pannello solamente per la parte HTML. Per la gestione del layout grassetto e corsivo, dopo aver selezionato sulla pagina i caratteri interessati, cliccare sui pulsanti (C in figura) B per il grassetto e I per il corsivo. In Dreamweaver non è consentita la gestione del carattere sottolineato in quanto, ormai, fuori standard perché facilmente confondibile con i link. Per la gestione allineamento paragrafo utilizzare i comandi dal Menu Formato: cliccare su Allinea e poi, dal menu secondario, Sinistra, Al centro, Destra, Giustifica; da tastiera, dopo aver posizionato il cursore nel paragrafo desiderato, premere rispettivamente: Ctrl+Alt+Shift+L: allineam. a sinistra Ctrl+Alt+Shift+C: allineam. al centro Ctrl+Alt+Shift+R: allineam. a destra Ctrl+Alt+Shift+J: allineam. giustificato

6 Scheda 36 DREAMWEAVER - GESTIONE IMMAGINI Dopo aver selezionato il punto in cui inserire l'immagine, dal menu Inserisci selezionare Immagine oppure premere CTRL ALT I per la scelta del file si opera come di consueto. Sono supportati tutti i formati più comuni, jpg, png, bmp, gif. Una volta selezionata l immagine viene chiesto di inserire alcune informazioni riguardanti l accessibilità, rigorosamente controllata dal W3C in fase di validazione degli standard. Successivamente basta cliccare su Ok per vedere la propria immagine esattamente come apparirà nella pagina finale. Nella finestra di ispezione delle proprietà, cliccando su una immagine inserita nella pagina compariranno tutti i parametri fra cui (vedi riquadri in rosso nella figura in alto: larghezza e altezza in pixel, nome del file, Testo alternativo (standard W3C) e allineamento dell'immagine rispetto a testo circostante.

7 Scheda 37 DREAMWEAVER - GESTIONE TABELLE (1) Per inserire una tabella posizionare il cursore nel punto in cui si vuole inserire la tabella quindi selezionare tabella dal menu inserisci oppure premere CTRL ALT T per visualizzare la finestra di dialogo TABELLA Tramite questa finestra sarà possibile specificare le caratteristiche di base della nuova tabella: numero di righe numero di colonne larghezza (in pixel o percentuale dipende dalla scelta effettuata dall'elenco a discesa a destra), bordo (spessore espresso in pixel 0 = nessun bordo) padding o margine interno spacing o spaziatura tra le singole celle. Nella sezione Intesatazione abbiamo la possibilità di specificare, se necessario, la riga o la colonna in cui inserire i titoli dei dati che comporranno la tabella (questa opzione è molto utile, ad esempio, se si desidera rappresentare all'interno della tabella una raccolta di dati) Le opzioni per l'intestazione sono quattro: nessuna a sinistra in alto entrambi Nella sezione Accessibilità è possibile definire alcuni parametri riguardanti l'accessibilità e precisamente: Didascalia: attributo caption Riepilogo: attributo summary Confermare tutti i parametri cliccando su Ok. Successivamente sarà possibile modificare questi parametri dalla finestra di ispezione delle proprietà tabella. Per visualizzare questa tabella basta selezionarla interamente cliccando con il mouse su uno dei suoi bordi. Una tabella selezionata si mostra con i lati destro e inferiore più spessi con delle maniglie di ridimensionamento (vedi figura seguente)

8 Scheda 38 DREAMWEAVER - GESTIONE TABELLE (2) Per modificare i parametri alle varie celle utilizzare la finestra di ispezione delle proprietà celle pulsantino è attivo se si selezionano 2 o più celle. Cliccando su questo pulsantino si uniscono le celle selezionate Cliccando su questo pulsantino è possibile dividere la cella in più righe o colonne (compare una finestra di dialogo per completare operazione) pulsantino è attivo se si seleziona 1 sola cella. Orizz da questo elenco a discesa selezionare il tipo di allineamento orizzontale Vert da questo elenco a discesa selezionare il tipo di allineamento verticale La digitare il la larghezza con o senza il segno percentuale (%) in base alle proprie esigenze Al digitare il l'altezza con o senza il segno percentuale (%) in base alle proprie esigenze No a capo attivare la check box per impostare sempre su una sola riga il testo eventualmente contenuto Intest attivare questa casella per imporre la caratteristica di intestazione (tag TH). Anche se sconsigliata dal consorzio W3C, la tecnica delle tabelle può essere utilizzata per una semplice gestione della pagina in modo da posizionare facilmente testo ed immagini. In questo caso la tabella o le tabelle utilizzate saranno con bordi invisibili (border = 0). di seguito 2 esempi di gestione pagina con tabelle.

9 Scheda 39 DREAMWEAVER - GESTIONE ELENCHI TIPOLOGIE DI ELENCHI GESTIBILI DREAMWEAVER ELENCHI NON ORDINATI ELENCHI ORDINATI ELENCHI DEFINIZIONI Palermo o Palermo 1. Palermo a. Palermo Palermo Roma o Roma 2. Roma b. Roma Capoluogo della Sicilia Napoli o Napoli 3. Napoli c. Napoli Roma Firenze o Firenze 4. Firenze d. Firenze Capoluogo del Lazio Palermo I. Palermo A Palermo Napoli Roma II. Roma B Roma Capoluogo della Campania Napoli III. Napoli C Napoli Firenze Firenze IV. Firenze D Firenze Capoluogo delle Toscana Per gestire elenchi ordinati e non ordinati di tipo standard utilizzare gli appositi tasti sul pannello proprietà di dreamweaver: Utilizzare questo pulsante per elenchi non ordinati (DISC) Utilizzare questo pulsante per elenchi non ordinati (1, 2, 3, 4, ecc)) Utilizzare questi pulsanti per attivare o disattivare sottoelenchi Per una gestione completa degli elenchi utilizzare i comandi Elenco dal menu Formato. Una volta selezionata la tipologia (Elenco Non Ordinato, Ordinato, Definizioni) digitare almeno una voce dell'elenco. Successivamente, tenendo il cursore del mouse su una voce dell'elenco, dallo stesso menu Formato > Elenco selezionare la scelta Proprietà che consente di selezionare tutte le possibili opzioni: Elenco a discesa TIPO ELENCO: è possibile selezionare fra Elenco Numerato, Elenco Puntato, Elenco a Directory (obsoleto), Elenco a Menu (obsoleto) Elenco a discesa Stile: in base alla scelta del tipo elenco è possibile selezionare fra i possibili elenchi ordinati (numeri, lettere maiuscole, lettere minuscole, numeri romani ecc.) o fra i possibili elenchi non ordinati (disc, square ecc.) Casella Conteggio iniziale: in caso di elenchi ordinati, digitare il numero dell'elemento iniziale (anche nel caso si sia scelto un tipo a lettere ad esempi se si vuole iniziare l'elenco con D digitare 4) Elenco a discesa Nuovo stile: in base al tipo di elenco (ordinato o non ordinato), e solo per la voce selezionata al momento, è possibile selezionare un nuovo stile Casella Inizia conteggio da: in base al tipo di elenco (ordinato o non ordinato), e solo per la voce selezionata al momento, è possibile digitare il numero dell'elemento.

10 Scheda 40 DREAMWEAVER - ANCORAGGI E LINK Si definisce ancoraggio un segno invisibile inserito all'interno di una pagina html inserito allo scopo di far scorrere la pagina automaticamente (scrolling automatico) fino al punto in cui si trova l'ancoraggio stesso. Gli ancoraggi sono utilissimi nelle pagine molto lunghe. Dreamweaver, in fase di progettazione pagina rende visibile l'ancoraggio inserito tramite una icona a forma si ancora di colore giallo Per inserire un ancoraggio: 1. Posizionare il cursore del mouse nel punto della pagina in cui si vuole inserire l'ancoraggio 2. Dal menu Inserisci selezionare Ancoraggio con nome. Comparirà una finestra di dialogo in cui inserire il nome dell'ancoraggio. Digitare il nome e cliccare su Ok Si definisce Link una parte testuale o una immagine cliccando sui quali si ottiene lo scrolling di una pagina fino ad un ancoraggio o la visualizzazione di un'altra pagina. Per inserire un link testuale: 1. selezionare il testo o l'immagine a cui si vuole assegnare il link 2. dal menu Inserisci selezionare Collegamento Ipertestuale per visualizzare la relativa finestra di dialogo: Casella Testo: compare il testo selezionato. Eventualmente digitare il testo Elenco a discesa Collegamento: selezionare il nome dell'ancoraggio a cui si vuole collegare il link oppure cliccare sulla piccola icona cartella di colore giallo per visualizzare la finestra di dialogo da cui selezionare il file HTML a cui si vuole collegare il link Elenco a discesa Destinazione: normalmente non effettuare alcuna selezione. Per visualizzare la pagina linkata in una nuova finestra del browser selezionare _Blank casella Titolo: digitare il titolo del link ossia una descrizione del link (tooltip) che verrà visualizzata nel browser semplicemente posizionando il cursore del mouse sul link (raccomandata dal consorzio W3C) Per inserire un link grafico: 1. Selezionare l'immagine cliccandoci sopra 2. Nella finestra di ispezione delle proprietà immagini, cliccare sulla piccola icona cartella (di colore giallo) per visualizzare la finestra di dialogo Seleziona file da cui selezionare il file da linkare. In alternativa trascinare con il mouse partendo dall'icona mirino (a sinistra dell'icona cartella) fino a nome del file da linkare scegliendolo dall'elenco file nella zona destra della schermata di dreamweaver.