i file multimediali (1) - emmegiclick

Transcript

CORSO
WEB DESIGNER
PROGR. OPERATIVO SICILIA FSE 2007-2013 Avviso n. 20/2011 “Percorsi formativi per il rafforzamento dell’occupabilità e dell’adattabilità della forza lavoro siciliana periodo 2012/2014
PROGETTO OCCUPAZIONE AMBITO: ForGio - CUP G95C12000230009 - CIP 2007.IT.051.PO.003/II/D/F/9.2.1/0646
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
DISPENSA DEL MODULO DI SOFTWARE APPLICATIVI GESTIONE PAGINE WEB
MARIO GIURLANDA - [email protected] - www.emmegiclick.altervista.org/pmw12
CORSO
WEB DESIGNER
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
CORSO
WEB DESIGNER
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
DESCRIZIONE
File di qualità, occupa moltissimo spazio su
disco. Formato adatto per piccole immagini o
Bit MaP
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
Graphic
pagine internet. Questo tipo di file comprende
Interchange Format
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
Portable Network
Il formato PNG-8 usa colori a 8 bit e presenta
Graphic
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
Joint Photographic
Experts Group
File
mediamente
compresso
adatto
per
fotografie. Molto utilizzato per le pagine
internet.
CORSO
WEB DESIGNER
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).
CORSO
WEB DESIGNER
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
CORSO
WEB DESIGNER
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.
CORSO
WEB DESIGNER
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)
CORSO
WEB DESIGNER
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.
CORSO
WEB DESIGNER
Scheda 39
DREAMWEAVER - GESTIONE ELENCHI
TIPOLOGIE
ELENCHI NON ORDINATI
• Palermo
o Palermo
• Roma
o Roma
• Napoli
o Napoli
• Firenze
o Firenze
Palermo
Roma
Napoli
Firenze
DI ELENCHI GESTIBILI DREAMWEAVER
ELENCHI ORDINATI
ELENCHI DEFINIZIONI
1. Palermo
a. Palermo
Palermo
2. Roma
b. Roma
Capoluogo della Sicilia
3. Napoli
c. Napoli
Roma
4. Firenze
d. Firenze
Capoluogo del Lazio
Napoli
A Palermo
I. Palermo
Capoluogo della Campania
B Roma
II. Roma
Firenze
III.
Napoli C Napoli
Capoluogo delle Toscana
IV. Firenze
D Firenze
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.
CORSO
WEB DESIGNER
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.

i file multimediali (1) - emmegiclick

Transcript

Documenti analoghi

13.Creazione di Pagine Web con Blocco note

Creazione del Sito con Blocco Note, FrontPage, Dreamweaver® ecc

Cose da sapere sul firestore Fs-100 Non registra il 720pn, quindi no

Salvare uno streaming con vlc

Catagolo Regionale

Come installare la distribuzione LINUX RED HAT 7

Dopo l`aggiornamento ad internet explorer 7, nella prima

Registrazione Infotraffico

screenshots didup

Programma di studio Dreamweaver

Configurazione Wireless WLiucBase per Linux Ubuntu 810