SMIL: Synchronized Multimedia Integration Language



Похожие документы
Laboratorio di Basi di Dati e Multimedia

HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>...

Comandi principali del linguaggio HTML (Hyper Text Markup Language)

Tutorial di HTML basato su HTML 4.0 e CSS 2

XML: extensible Markup Language

7.4 Estrazione di materiale dal web

Primi passi con HTML. Il documento HTML

Creare un Ipertesto. 1

HTML 6. I frame. Sintassi di base. I frame e DOCTYPE FRAME. ...head... <FRAMESET lista_attributi> <FRAME SRC= URL lista_attributi>

APPLICAZIONE DI UN COMPORTAMENTO A UN'IMMAGINE E TESTO CREAZIONE GALLERIA IMMAGINI

Esercizi di JavaScript

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML

<a href= page2.html > Questo é il link all altra pagina </a> <a href= page2.html > <img src= "lamiaimmagine.jpg"/> </a>

APPUNTI DI HTML (TERZA LEZIONE)

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1

INTRODUZIONE AL LINGUAGGIO HTML. Internet + HTML + HTTP = WWW

Scaletta. Estensioni UML per il Web. Applicazioni web - 2. Applicazioni web. WAE: Web Application Extension for UML. «Client page»

HTML il linguaggio per creare le pagine per il web

Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:

Inserire audio in una presentazione Power Point e in un sito web

Come distribuire in una pagina Web il video ripreso con la telecamera

Manuale per i redattori del sito web OttoInforma

MANUALE MOODLE STUDENTI. Accesso al Materiale Didattico

extensible Markup Language

Come costruire una presentazione. PowerPoint 1. ! PowerPoint permette la realizzazione di presentazioni video ipertestuali, animate e multimediali

Corso Creare Siti WEB

Guida all'uso del CMS (Content Management System, Sistema di Gestione dei Contenuti)

CMS MUSEO&WEB. Mappe grafiche. Andrea Tempera (OTEBAC) 12 aprile 2010

Capitolo 4 Pianificazione e Sviluppo di Web Part

La struttura: DTD. Laura Farinetti Dip. Automatica e Informatica Politecnico di Torino. laura.farinetti@polito.it

Manuale Utente Vincoli In Rete

b) Dinamicità delle pagine e interattività d) Separazione del contenuto dalla forma di visualizzazione

Adobe Flash CS5.5 e Web Animation. Lezione 7: introduzione ad ActionScript 3.0, livelli guida, realizzazione di un player audio in streaming

LEZIONI DI HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività...

MANUALE PER CONSULTARE LA RASSEGNA STAMPA VIA WEB

TESINA DI SISTEMI MULTIMEDIALI. SmilingWeb: Uno SMIL Player multipiattaforma

XML. XML è contemporaneamente: XML non è:

Consorzio Triveneto S.p.A. Payment Gateway

Settaggio impostazioni tema. Cliccando nuovamente su aspetto e poi su personalizza si avrà modo di configurare la struttura dinamica della template.

HTML 1. HyperText Markup Language

Corso di PHP. Prerequisiti. 1 - Introduzione

Javascript. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori

Introduzione. Strumenti di Presentazione Power Point. Risultato finale. Slide. Power Point. Primi Passi 1

GUIDA ALL HTML. Creato da SUPREMO KING

La realizzazione del software didattico

Informatica A per Ingegneria Gestionale ( ) Il linguaggio HTML. Elisa Quintarelli-Laura Mandelli. HyperText Markup Language

Il linguaggio HTML - Parte 4

Dexma Newsletter System

Compilatore risorse display grafico LCD serie IEC-line

STRUMENTI. Impostare una presentazione I programmi di presentazione

HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento

Internet Architettura del www

La prima applicazione Java. Creazione di oggetti - 1. La prima applicazione Java: schema di esecuzione. Gianpaolo Cugola - Sistemi Informativi in Rete

Scuola Digitale. Manuale utente. Copyright 2014, Axios Italia

Corso di HTML. Prerequisiti. Modulo L3. 1-Concetti generali. Browser Rete Internet Client e server. M. Malatesta 1-Concetti generali-12 28/07/2013

Manuali.net. Nevio Martini

Il Digital Signage. Utilizzi. Il Digital Signage

Introduzione all uso di Eclipse

Informatica per la comunicazione" - lezione 10 -

19. LA PROGRAMMAZIONE LATO SERVER

PROGRAMMA SVOLTO DI INFORMATICA ANNO SCOLASTICO 2013/2014. DOCENTE: Villani Chiara

Macromedia Flash. Realizzato da Emanuela Scionti

Linguaggi per il web oltre HTML: XML

Lo scenario: la definizione di Internet

Javascript: il browser

Rich Media Communication Using Flash CS5

Ipertesto, navigazione e cenni HTML. Lezione Informatica I CLAWEB

Reti di Calcolatori. Il Livello delle Applicazioni

4. Fondamenti per la produttività informatica

TIMESHARK: Uno strumento per la visualizzazione e l analisi delle supertimelines. Relatore: Federico Grattirio

Costruzione di un sito web - HTML

I Tag dell html. Parte quarta

INFN Napoli NESSUS. IL Security Scanner. Francesco M. Taurino 1

MANUALE UTENTE. In questo manuale verranno descritte tutte le sue funzioni. Il sistema OTRS è raggiungibile al seguente link:

HTML: Altri elementi

Book 2. Conoscere i contenuti digitali. Saper riconoscere diversi tipi di contenuti digitali

PowerPoint. Guida introduttiva

EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0

Транскрипт:

SMIL: Synchronized Multimedia Integration Language Giancarlo Fortino g.fortino@unical.it http://si.deis.unical.it/~fortino/teaching/gdmi/index.htm 1

Cronologia Nov 97: Prima release pubblica di SMIL Apr 98: vengono pubblicate le specifiche di SMIL 1.0 come W3C recommendation. Ago 01: vengono pubblicate le specifiche di SMIL 2.0 come W3C recommendation (Jan 2005 2 nd ed.). Feb 05: SMIL 2.1 working draft 2

SMIL permette di (1) disporre degli oggetti multimediali in punti precisi dello schermo (space relations) descrivere il comportamento temporale dei diversi elementi (o media object) di una presentazione ipermediale (time relations) 3

SMIL permette di (2) modificare la riproduzione secondo alcuni parametri relativi alla stazione di lavoro dell utente lingua, bit-rate, etc inserire dei link ad altre presentazioni o parti di esse 4

Struttura di una documento SMIL <smil> <head> <meta name= "author" content= "Your Name" /> <layout> <!-- definizione delle regioni --> </layout> </head> <body> <!-- sincronizzazione degli elementi della presentazione--> </body> </smil> 5

SMIL vs HTML un documento SMIL ha una struttura molto simile ad un documento HTML ma i tag sono case sensitive deve sempre esserci un tag di chiusura i tag devono essere aperti e chiusi nell ordine corretto (XML) 6

La sezione Head contiene la definizione della finestra in cui è contenuta le presentazione è possibile definirvi le regioni: sono porzioni dello schermo entro cui inserire i media della presentazione 7

Posizionamento delle regioni si considera come origine l angolo superiore sinistro della finestra principale, e si calcola la distanza in numero di pixel Origine Top Left Width Height 8

Le regioni <smil> <head> <meta name= author content= Your Name /> <layout> <root-layout width= 300 height= 200 background-color= white /> <region id= icona left= 75 top= 50 width= 40 height= 40 /> </layout> </head> <body> <img src= mondo.gif alt= Icona mondo region= icona /> </body> </smil> 9

Posizionamento relativo e z-index <smil> <head> <layout> <root-layout width= 300 height= 200 background-color= white /> <region id= rettangolo left= 30% top= 50% width= 50 height= 70 z-index= 2 /> <region id= cerchio left= 25% top= 25% width= 100 height= 100 z-index= 1 /> </layout> </head> <body> <img src= rettangolo.gif region= rettangolo /> <img src= cerchio.gif region= cerchio /> </body> </smil> 10

L attributo Fit 11

La sezione Body <smil> <head> contiene le descrizione temporale dello <meta name= author content= Your Name /> svolgimento della presentazione multimediale tutte le <root-layout informazioni width= 300 relative height= 200 alla background-color= white /> sincronizzazione degli oggetti nel tempo: <layout> durata di un oggetto inizio </layout> fine <region id= video left= 75 top= 50 width= 40 height= 40 /> </head> <body> <img src= intervista.rm region= video begin= 3s dur= 5s /> </body> </smil> 12

Riproduzione parallela <smil> il tag <par> permette la riproduzione <body> parallela di più oggetti <par> <!questi due file vengono eseguiti> è possibile <!contemporaneamente> l uso degli offset <audio src= colonna_sonora.au > <audio src= commento_parlato.au begin= 10s > </par> </body> </smil> 13

Riproduzione in sequenza <smil> <body> <seq> </seq> </body> </smil> il tag <seq> permette la riproduzione sequenziale di più oggetti è possibile annidare i tag <seq> e <par> file 1 <par> <!questi due file vengono eseguiti> file 2 <!contemporaneamente> file 3 </par> file 4 <!questo file viene eseguito quando sia> <!file2 che file3 sono terminati> 14

Eventi è possibile sincronizzare due o più oggetti sulla base del verificarsi di un evento: <par endsync= id(commento) > <audio src= colonna_sonora id= musica > <audio src= commento_parlato begin= id(musica)(10s) id= commento > </par> 15

Switch permette di regolare la riproduzione della presentazione sulla base di alcune informazioni relative all utente <switch> <audio src="audio_migliore" system-bitrate="16000" /> <audio src= audio_peggiore" system-bitrate="8000" /> </switch> - può essere inserito sia sella sezione layout che nella <switch> sezione body <audio src= audio_italiano" system-language= it"/> <audio src= audio_inglese" system-language="en"/> </switch> 16

Cosa si può testare? la lingua il bit-rate la dimensione e la profondità dello schermo caption o overdub quali tipi MIME supporta il visualizzatore dell utente 17

Hyperlink <par id= text_and_video > <video src= file_video region= video /> <text src= file_testo region= testo /> </par> SMIL support link unidirezionali molto simile a quelli offerti dal linguaggio HTML si possono inserire link ad una presentazione o a parte di essa utilizzando l id appropriato è possibile modificare lo stato di riproduzione della sorgente del link <a href= presentazione.smil#text_and_video show= Pause > <video src= altro_file_video" region= altra_regione /> </a> 18

Un esempio 19

Definizione delle regioni <head> <layout> <root-layout height="425" width="625 backgroundcolor="black"/> <region id="title" left="5" top="150" width="400" height="200" z- index="1"/> <region id="full" left="0" top="0" height="425" width="450" background-color="#602030"/> <region id="video" left="260" top="240" height="120 width="160" z-index="2"/> <region id="toc" left="450" top="0" height="425" width="175"/> </layout> </head> 20

Sincronizzazione: l indice <par id= text_and_video > <text src="toc.rt" region="toc" /> <seq> <!-- tutto quello che avviene nella --> <!-- regione video --> </seq> </par> 21

Sincronizzazione: la regione video <seq> <text src="title.rt" region="title" dur="20s"/> <!-- animazione mappa --> <!-- video slide show--> </seq> 22

Animazione mappa <par> <audio src="map_narration.rm"/> <img src="map.rp" region="full" fill="freeze"/> </par> 23

Video Slide Show <par> <switch> <img src="slideshow.rp" region="full" fill="freeze" systembitrate="45000"/> <img src="slideshow_low.rp" region="full" fill="freeze" systembitrate="20000"/> </switch> <seq> <video src="video_narration.rm" region="video" dur="27s"/> <audio src="video_narration_audio_only.rm" clip-begin="27s" dur="53s"/> <video src="video_narration.rm" clip-begin="80s" region="video"/> </seq> </par> 24

Alcune limitazioni di SMIL (1) Non fa alcun controllo sulla coerenza: <par dur= 10s > <audio src= colonna_sonora dur= 20s > <audio src= commento_parlato dur= 15s > </par> 25

Alcune limitazioni di SMIL (2) l utente può interagire solo con l intera presentazione e non con i singoli componenti seguendo un link, non è possibile fermare la presentazione originaria non permette l uso di transizioni 26

Players 2.0 AMBULANT/X Open Source SMIL Player: http://www.ambulantplayer.org/ RealOne Platform by RealNetworks: http://www.realnetworks.com/solutions /ecosystem/realone.html?src=rnhmfs GRiNS for SMIL-2.0 by Oratrix 27

Authoring tools RealNetworks RealPresenter Grins TAG Editor 2.0 - G2 release by Digital Renaissance VEON authoring tool 28

Alcuni tutorial SMIL in rete http://www.cwi.nl/~media/smil/tutorial/ http://www.helio.org/products/smil/tutorial/ http://web.tiscalinet.it/dotnet/testosmile.html Specifiche SMIL http://www.w3.org/tr/rec-smil/ http://www.w3.org/tr/smil20/ 29