Il multimediale online: il contesto tecnologico

Strategia e gestione dei contenuti multimediali on line

Il contesto tecnologico

Eupolis - Regione Lombardia - dott. Claudio Celeghin28-29 maggio 2012

Il contesto tecnologico

• Grafica per il web• Formati file immagine• Formati file video • Audio • Riprese • Compressioni • Pubblicazione video• Video e CMS28-29 maggio 2012 Eupolis Lombardia - dott. Claudio Celeghin 2

Caratteristiche della grafica per il web

© R

afte

r | S

tock

Fre

e Im

ages

& D

ream

stim

e St

ock

Phot

os

28-29 maggio 2012 Eupolis Lombardia - dott. Claudio Celeghin 3

http://www.stockfreeimages.com/

http://www.dreamstime.com/

Il ruolo della grafica

• La grafica identifica un sito o un prodotto mm• La grafica deve essere coerente in tutte le

sezioni del prodotto• Deve creare l’idea di un “luogo”• Parametri da considerare– “peso” (kb)– ampiezza (pxl)– risoluzione monitor


Immagini tipo bitmap

• gif• jpg• png• bmp• tiff• raw

Grafica bitmap-raster

CONTROSe si ingrandisce

l’immagine si evidenziano i pixel che la compongono

PRO- immagini reali (jpg-bmp) - possibile modificare contrasti e luminosità28-29 maggio 2012 Eupolis Lombardia - dott. Claudio Celeghin 5

GIF• Contiene al massimo 256 colori/8 bit (x pixel)• Meno colori = meno Kb• Va bene per colori omogenei (loghi e

diagrammi)• Il formato grafico più diffuso nel web• interlacciate per progressivo download• trasparenti: “bucano” un colore dell’immagine

per mostrare lo sfondo


Esempio di GIF


JPEG

• True color/24 bit (x pixel)• Usate per fotografie• Compressione con perdita definitiva di dati,

cioè di definizione e colore• Compressione a ogni salvataggio• Conservare sempre copie originali



raw – 14.3 MB jpg – 2 MB gif - 3.7 MB


PNG

• Studiata per il web• Simile alla GIF per compressione• Loghi e colori piatti• Visualizza tutti i colori• Trasparenza• Interlacciamento• Scarso supporto dei browser


Grafica vettoriale

• Grafica composta da descrizioni matematiche di linee e poligoni

• Immagini più facili da modificare • Facilmente ingrandibili senza perdita di qualità• Esportabile in gif e png (meno pratico in jpg)• Sono le immagini create con Flash


Ingrandimento grafica vettoriale


• Alt text: descrivere contenuto e funzione dell’immagine in poche parole

• Immaginate di leggere il documento ad alta voce al telefono

• L’obiettivo è far si che la pagina sia compresa, non tanto l’immagine

• Descrivere l’immagine nel contesto della pagina

Accessibilità delle immagini


Animazioni da evitare

• No per attirare l'attenzione• Potenziale elemento disturbatore nei

confronti del contenuto principale• No intro Flash in home page• Non basta un tasto skip…


Animazioni consigliate

• Uso mirato delle animazioni sul web• Una semplice animazione sulla home page

può aumentare l’interesse visivo per il sito• Può servire per illustrare

concetti o procedure• Fornire sempre controlli per

avviare/fermare l’animazione


Velocità/peso pagina web

Dati: http://www.iwebtool.com/speed_test 28-29 maggio 2012 Eupolis Lombardia - dott. Claudio Celeghin 17

http://www.iwebtool.com/speed_test

Audio, caratteristiche e formati


Audio

• L'audio digitale consente di veicolare efficacemente informazioni

• È più importante della traccia video (es TG) • La traccia audio stand-alone• La componente audio migliora la

presentazione• L'audio può essere registrato, compresso e più

facilmente gestito


Audio

• La registrazione audio deve essere di ottima qualità

• Eliminare rumori di fondo (inseparabili dalla traccia audio)

• La compressione per il web può evidenziare eventuali difetti della registrazione


Formati audio - MIDI

• Estensione: .midi • MIDI : Musical Instrument Digital Interface• Deve essere letto da i dispositivi di musica

elettronica come sintetizzatori e schede audio• I file MIDI non contengono suono, ma le

istruzioni digitali musicali (note)• I file MIDI sono estremamente piccole


Formati audio

MIDI - WAVE

• Esempio: 5 minuti di musica –MIDI = 23KB–Wave = anche 60 MB


MIDI3 minuti

12 KB

WAVE43 secondi7.8 MB

Formati audio

WAVE

• Estensione: .wav• Formato sviluppato da IBM e Microsoft• Supportato da tutti i PC Windows, e da tutti i

browser più diffusi (ad eccezione di Google Chrome)


Formati audio

WMA

• Estensione .wma • Windows Media Audio è simile per qualità al

formato MP3• compatibile con la maggior parte dei player,

iPod escluso. • Può essere un flusso continuo di dati, che lo

rende pratico per l'uso per internet radio o musica on line.


Formati audio

MP3• Estensione .mp3 / .mpga• Compressione con perdita di informazioni• file MP3 la parte del suono del formato MPEG,

originariamente sviluppato per il video • Buona compressione / alta qualità

(file di piccole dimensioni)• Bit rate almeno di 128 kbps, meglio 256 kbits


Formati audio

Studio di registrazione – regia


Studio di registrazione – speaker


Registrazione digitale


Formati video


AVI

• AVI (Audio Video Interleave) • Contenitore multimediale sviluppato da

Microsoft• Supportato da tutti i computer Windows e dai

browser più comuni• Molto diffuso su Internet, non sempre

compatibile con computer non-Windows• Manca il supporto per i sottotitoli


Formati video

Flash• Estensione: .swf (web)• Uso prevalentemente grafico per animazioni

complesse vettoriali e multimediali on line• Richiede un plugin per il browser, preinstallato

nei più diffusi browser (Firefox, IE, Chrome)


Formati video

Flash Video• Estensioni: .flv / .f4v (più recente) • audio/video streaming

(con Adobe Flash Player)• De facto è il formato di default per i video

online

• YT utilizza Adobe Flash Video per trasmettere i suoi contenuti


Formati video

Mpeg-4

• Estensione: .mp4 • Mpeg-4 è molto diffuso su internet• Adatto a videotelefonia e televisione digitale• Filmati web• YT converte i video in in flv/mp4 per la

distribuzione• I video on-line sono sempre più orientati verso

il formato MP4


Formati video

Mpeg-4: funzionamento• Basato su MPEG-2 (DVD) e Apple QuickTime

technology• trasmette solamente la variazione

dell'immagine da frame a frame• Codifica solo le zone dell'immagine che sono

cambiate rispetto a quella precedente• Esclude il refresh della parte uguale tra i due

frame


Formati video

QuickTime

• estensione: .mov• Sviluppato da Apple• Formato comune su Internet• Non possono essere riprodotti su un computer

Windows senza l’installazione di un extra componente (gratis)

• QuickTime base per lo standard MPEG-4


Formati video

WMV

• .wmv • Sviluppato da Microsoft a partire da MPEG-4• Streaming file video • Visualizzabile con Windows Media Player• Video WMV possono essere riprodotti su

computer non-Windows, con l’installazione di un extra componente gratis (“Flip” per Mac).


Formati video


Consigli per le riprese

Consigli per le riprese video

• Fare riprese di soggetti ravvicinati • I dettagli dei campi lunghi finirebbero per

essere invisibili dopo la compressione a bassa risoluzione


Inquadrature e compressione

• Utilizzare un treppiede per ridurre al minimo il movimento della videocamera

• Minimizzare al minimo le differenze tra i fotogrammi e migliorare notevolmente la compressione video

• Evitare zoom e panning (scorrimento orizzontale): con basso frame-rate crea confusione nelle immagini

• Può anche causare una minore compressione delle immagini



• Evitare movimenti e dettagli• Selezionare spezzoni che contengano minimo

movimento e pochi dettagli essenziali



• Utilizzare un semplice sfondo monocromatico, quando possibile per avere immagini video di dimensioni più contenute e aumentare l'efficienza della compressione.


Montaggio: no dissolvenze

• No dissolvenze: favorire tagli netti tra le scene • Utilizzare con parsimonia gli effetti di

transizione• La transizione non comprime in modo

efficiente e può generare problemi sul web se visualizzato su monitor di ampie dimensioni


Compressione• Per la distribuzione sul Web, puntare a file

adatti ad una connessione di media potenza • Velocità di trasmissione dati (bit rate)• kilobyte/s (kbps): quantità di dati per un

secondo di filmato• Evitare inceppamenti del video: impostare

kbps inferiore alla connessione degli utenti


Compressione

• La compressione elimina dati ridondanti e meno importanti da un video

• Algoritmi, o "codec" (compressori-decompressori) gestiscono compressione e decompressione durante la lettura

• Codec con compressione “lossy”: il processo elimina dati dal materiale originale

• Non comprimere più volte i materiali


Compressioni alternative• Fornire versioni alternative dei contenuti • QuickTime può creare diverse versioni di un video– Diverse compressioni– Diverse velocità di connessione– diversi livelli di qualità

• Qualità/connessione


QuickTime esportazione


QuickTime esportazione


Esportazione di QT per cellulare


Cellulare non iPhone3GP2.7 MB176 × 99

Esportazione di QT per iPhone


iPhone

480 × 270

29.8 MB

.MPEG-4

Pubblicare on line il progetto multimediale


Trasporto

• Media di rete – il server– Rete– il computer client– il browser web– browser plug-ins in uso.

• Larghezza di banda disponibile ?• Se i file multimediali sono erogati da un high-end server

multimediale -> alto livello di performance• Possibile prevedere le prestazioni di lettura su PC


Parametri creazione e distribuzione

• Non esistono parametri assoluti a priori• Intranet aziendale: supporto rete controllato

quindi possibile migliore qualità• Utile conoscere configurazione utente base• Verificare le statistiche per sapere velocità di

connessione medie


Informare gli utenti - 1/3

• Non è possibile avere il controllo totale del progetto on line

• Frustrante ricevere dopo una lunga attesa un’informazione che non mi interessa o che non posso visualizzare

• Fornire informazioni all’utente per consentirgli di decidere prima di agire


Informare gli utenti – 2/3

• I file MM dovrebbero apparire nelle pagine secondarie del sito, ma collegate con la Home (dipende dagli obiettivi del sito)

• La pagina principale: semplice html, veloce e senza richiesta di software aggiuntivo

• Allegare informazioni descrittive sui materiali con anteprime


Informare gli utenti – 3/3

• Indicare il tempo complessivo • Dimensione del file in caso di download• Requisiti software per l'accesso ai materiali • Fornire link per scaricare i plug-in necessari• Gli utenti dovrebbero avere una chiara idea

del vostro materiale Mm prima di iniziare a scaricare il file


Fornire il controllo• Fornire informazioni di stato e controlli per i

materiali multimediali• Ad esempio suoni di sottofondo: possibilità di

mute

• Utente non deve essere obbligato a chiudere la finestra per far cessare il suono


Fornire il controllo

• barra di controllo dei media, stop• Evitare riproduzione automatica: non prendere il

controllo al posto dell’utente • No riproduzione automatica di file multimediali

quando una pagina web viene caricata. • Elemento di distrazione• Progettare l'interfaccia multimediale in modo che

i file video vengano attivati solo quando l'utente sceglie esplicitamente di avviare la riproduzione


Fornire feedback

• imdb.com– “Sorry! Looks like we don't have a video format

that your browser knows how to play”– Manca link a download plug-in

• NASA : – “You're missing Adobe Flash Player 10 Plugin

needed to view these videos . Please install Adobe Flash Player Plugin and try again”


http://www.imdb.com/

http://www.adobe.com/go/getflashplayer/

Interazione da tastiera

• Accesso universale e usabilità: assicurarsi che il proprio controller multimediali siano utilizzabili da tastiera

• Interazione tastiera: selezione + attivazione del controllo

• Consentire navigazione con tasti Tab + freccie• Controlli Pausa, Volume anche usando i tasti

freccia


Accessibilità dei video on line

1. Trascrizione: il testo del parlato deve essere interamente trascritto e reso disponibile sulla pagina web

2. Descrizione audio: eventuale descrizione dei cambiamenti di scena più rilevanti

3. Caption: simili ai sottotitoli, possono includere anche sintetiche descrizioni dell’audio (ad es: “domanda dal pubblico”)


Video: il testo alternativo

• Contenuti video: l'alternativa più semplice è trascrizione testuale della traccia audio.

• Utile per l'indicizzazione nei motori di ricerca e la ricerca video

• Testo come didascalie sincronizzate con il video

• Includere una descrizione della traccia video, come testo



Streaming

• Streaming: invia continuamente dati al client• Non scarica l'intero file• Contenuto MM erogato da server

multimediale• Dialogo costante con il client per determinare

il bit/rate supportato• Il server regola costantemente il flusso di dati

in base alla capacità ricettiva del client


Streaming: i vantaggi

• Accesso a qualsiasi punto del video• Ad es: visualizzare solo gli ultimi cinque

minuti, utilizzando i controlli per andare avanti fino al punto di partenza desiderato.

• Minore richiesta di archiviazione per il client: il video non viene memorizzato nel hard disk


Streaming: gli svantaggi

• Software dell’utente deve poter “girare” velocemente per elaborare i dati in arrivo

• In caso di difetti di trasmissione rete o PC non potente i dati multimediali vengono persi

• Riproduzione streaming richiede un elevato potere di elaborazione, quindi il processore deve essere potente per elaborare i fotogrammi video in arrivo.


Live streaming

• Trasmettere un evento in diretta su Internet– Telecamera / videocamera– Codificatore per digitalizzare e comprimere i dati– Un server tramite cui pubblicare i dati– Rete Internet per la distribuzione

• I dati non vengono salvati nell’hard disk


Criticità dello streaming

• Capacità di trasmissione della rete• Capacità di elaborazione del PC (client)• Capacità del software per correggere

interruzioni• Necessità di istallare un plugin


Livello di definizionedel filmato

Live streaming: parametri

Numero degli utenti collegati

Capacità di trasmissione della rete


Download

• Scaricare e memorizzare sul disco rigido del computer

• Il download è progressivo e permette la riproduzione del video anche se non è stato scaricato completamente

• Utilizzo protocollo http quindi non è richiesto nessun server speciale


Download: i vantaggi

• Qualità media del video generalmente superiore allo streaming

• Non c’e’ elaborazione dati in tempo reale tramite rete quindi i dati possono essere di migliore qualità

• E’ possibile che il video scaricato non sia compresso


Download: gli svantaggi

• Richiede molta memoria su hard disk • I media scaricabili non permettono l'accesso

casuale, devo scaricare tutto per vedere la fine.

• Dividere il video in segmenti più piccoli • Utenti web diversi dai telespettatori: no video

lunghi. • Web video vanno dritti al punto focale

dell’argomento


68 siti di video hosting•56.com (Chinese)•Archive.org•Afreeca (South Korean)•AniBOOM•Blinkx

•Blip.tv•BlogTV•Brainpop•Break.com•Buzznet•Comedy.com•Crackle•Dailymotion•EngageMedia•ExpoTV•Funnyordie.com•Flickr•Fotki•Gawkk•Hulu•HD share * (focus on HD videos)•Lafango•Liveleak

•Mail.ru•MaYoMo•Mefeedia•Megaupload *•Metacafe•Mevio•Myspace•MyVideo•Nico Nico Douga (Japanese)•OneWorldTV•Openfilm•Ourmedia•Photobucket•Podblanc•Redtube•Revver•Rambler Vision (Russian)•ReelTime.com•RuTube (Russian)•Sapo Videos (Portuguese)•SchoolTube•ScienceStage•Sevenload•SmugMug

•Tangle.com (formerly Godtube)•Trilulilu (Romanian)•TroopTube•Tudou (Chinese)•Twitvid•Vbox7 (Bulgarian)•Veoh

•Viddler•Videojug•Videolog (Portuguese)•Vidoosh (Iranian)

•Vimeo•Vuze•Vzaar•Wildscreen.tv•Wistia•xtube•Yahoo! Video•Youku (Chinese)

•YouTube•Zoopy


• Nato nel 2005 in California• Acquisito da nel 2006• Terzo sito più visitato al mondo dopo GL e FB• 2012 - 4 miliardi di video visti ogni giorno• 35 ORE di video caricate ogni MINUTO


\

• Visione: utilizza Adobe Flash Video• Upload video: accetta praticamente tutti i

formati video• Formati variano da 320x240 a 4096x3072• Interfaccia in 42 lingue• Fornisce il codice HTML per includere il video

nel proprio sito


Podcast

• Pod (iPod) + cast (broadCast)• Servizio Internet Serie di file audio/video

scaricabili tramite tecnologia RSS• iTunes è il più popolare software per l’ascolto

dei podcast


• un feed RSS– Titolo: deve essere molto specifico e unico– Autore– Descrizione dell’argomento e la programmazione

degli episodi– Parole chiave: elenco dei termini di ricerca

associati al podcast (eventualmente anche errori ortografici)

• Illustrazione del podcast• Caricarlo su un server affidabile

Come creare un podcast


Facciamoci trovare


SEO

Search Engine Optimization (SEO)

• 48 ore di video caricate ogni minuto su YT• Occorre effettuare operazioni specifiche per

farsi trovare• I motori di ricerca non possono indicizzare i

contenuti video senza elementi di contesto• Nei risultati di ricerca Google mette sempre

più in risalto i video attinenti a un argomento


(SEO) - Lato “social”

• Individuare le 5-10 keywords principali che gli utenti cercano su un argomento specifico

• Controllare i “suggerimenti” di Google• Associarle al video• Incoraggiare gli utenti a vedere e a

condividere il video


(SEO) - Trascrizione del testo

• Trascrivere l’eventuale testo audio del video sia su YouTube che sul proprio sito (vedi “accessibilità”)

• Indicare descrizione e la miniatura statica• Comunicare in tutti i modi alle persone che

esiste un tuo video su un determinato argomento


Privacy e copyright

Disposizioni normative e consigli pratici


Diritto alla privacy

• Decreto legislativo 30 giugno 2003, n. 196“Codice in materia di protezione dei dati personali”

• Provvedimento del Garante del 29 luglio 1998, in G.U. 3 agosto 1998, n. 179

• “Codice di deontologia relativo al trattamento di dati personali nell’esercizio dell’attività giornalistica”


Diritto alla privacy e video

• Esiste quindi un limite all'utilizzo di dati che riguardano altre persone

• le immagini di un video possono essere considerati "dati personali" quando ci forniscono informazioni su qualcuno (anche indirettamente)


Diritto alla privacy e video

• Lesivo della privacy – Dare visibilità ai volti delle persone - le persone

ritratte nei video che volete pubblicare devono darvi sempre il loro consenso

– Riprendere l'interno di un'abitazione e situazioni famigliari altrui

– Rivelare informazioni sensibili sui soggetti (salute, politica, religione, sesso)


Eccezioni

• Il diritto alla riservatezza dell'immagine può essere sacrificato solo a condizione di rispettare tre principi fondamentali:– la verità dei fatti– l'interesse pubblico alla notizia – l'essenzialità dell'informazione (Art. 6)


Consigli pratici

• Persone comuni riprese in luoghi pubblici è meglio non siano riconoscibili

• Per i personaggi pubblici non è necessario chiedere il consenso

• Assicurarsi che ciò che pubblicate non sia lesivo per la reputazione del soggetto


Cosa si rischia

• La responsabilità penale per video lesivo della reputazione della persona o interferenza con la vita privata del soggetto

• Reclusione sei mesi / quattro anni• Vedi caso “News of the World”


Copyright

• L’uso di opere protette dal diritto d’autore deve essere sempre autorizzato in via preventiva dai titolari del diritto

• La licenza SIAE per utilizzazione di musica su Internet in siti aziendali, industriali, istituzionali che contengono musica come complemento

• La licenza deve essere sottoscritta dai soggetti intestatari dei domini web responsabili del sito


Copyright

• Copyright: sistema “Content ID”, per editori• Sistema automatico che controlla l’equivalente

di 100 anni di video ogni 24 ore• http://www.youtube.com/watch?v=9g2U12Ss

Rns


http://www.youtube.com/watch?v=9g2U12SsRns

http://www.youtube.com/watch?v=9g2U12SsRns

Eupolis Lombardia - Dott. Claudio Celeghin 90

Diritto d’autore

Legge n. 633 del 22 aprile 1941Sono opere tutelate dalla legge (tra le altre):• Fotografia• Disegni/illustrazioni• MusicaNon è necessario alcun tipo di registrazione

dell’opera per essere tutelati

28-29 maggio 2012


Diritto d’autore: opere fotografiche

Ogni foto pubblicata (non artistica) deve indicare:• nome del fotografo o agenzia• anno di produzione della fotografia• il nome dell'autore dell'opera d'arte fotografataIn caso di mancanza di tali informazioni, la riproduzione

delle foto non si considera abusiva. Diritto esclusivo: 20 anni dalla data di produzione

28-29 maggio 2012


Fotografie artistiche

• Sono opere dell'ingegno, non è necessaria l'indicazione dell’autore e dell'anno di realizzazione

• Durata della tutela: 70 anni dopo morte dell’autore

28-29 maggio 2012


Sanzioni

• La violazione delle norme sul diritto d'autore comporta sanzioni anche penali e di particolare gravità, soprattutto se chi utilizza illegittimamente l'opera altrui lo fa con fini di lucro.

28-29 maggio 2012


Royalty-free • Licenza: utilizzo di una risorsa con limitate

restrizioni sul suo utilizzo e pagando cifra contenuta

• Acquisita la licenza è possibile utilizzare la foto (musica ecc) senza limiti di tempo e spazio, e senza ulteriori costi

• Limitazioni della licenza, ad es 10.000 copie

© Grafphotogpaher | Stock Free Images & Dreamstime Stock Photos28-29 maggio 2012

http://www.stockfreeimages.com/

http://www.dreamstime.com/

Grazie per l’attenzione!

dott. Claudio [email protected]

Eùpolis – Regione Lombardia28-29 maggio 2012

95

Technology

Il multimediale online: il contesto tecnologico