Sistemas Multimídia e Hipermídia

(1)

1

Sistemas Multimídia

Sistemas Multimídia e Hipermídia

Profa. Débora Christina Muchaluat Saade [email protected]

Departamento de Ciência da Computação - UFF

2

Sistemas Multimídia e Hipermídia

ð 

Multimídia x Hipermídia

ð 

Documentos Hipermídia

•  Objetos de Mídia

•  Relações

ð 

Modelos Hipermídia

ð 

Entidades Hipermídia

•  Nós

•  Âncoras

•  Elos

•  Composições

ð 

Modelos para Sincronização Temporal

3

Multimídia x Hipermídia

ð 

Sistema Multimídia:

•  Sistema capaz de manipular ao menos um tipo de mídia discreta e um tipo de mídia contínua na forma digital de maneira sincronizada

ð 

Sistema Hipermídia:

•  Sistema Multimídia capaz de tratar eventos causados pela interação com o usuário e reagir a esses eventos

4

Hipertexto, Multimídia e Hipermídia

5

Documentos Hipermídia

ð 

Componentes de um documento hipermídia

•  Objetos de mídia

–  Texto, imagem, gráfico, áudio, vídeo, animação ...

•  Relacionamentos entre os objetos

Blablabla!

...!

Blablabla!

...!

6

Relações Hipermídia

ð 

Relações de referência

•  Ex.: relação hipermídia tradicional (elo HTML - Web) ð 

Relações de sincronização

•  definem o posicionamento temporal e espacial dos objetos ð 

Relações de estruturação

•  especificam a estrutura lógica de um documento, tal como um livro e seus capítulos, os capítulos e suas seções etc.

ð 

Relações semânticas

•  Ex.: aquela entre um professor e as várias disciplinas que ele leciona ou entre um fabricante e os diversos produtos fabricados

ð 

Relações de derivação

•  Ex.: aquelas que indicam os objetos que deram origem a outros objetos

(2)

7

Modelo Hipermídia

ð 

É necessário um modelo conceitual hipermídia para expressar os componentes de um documento

ð 

Diversos modelos propostos na literatura

•  Intermedia, HyperCard, KMS, Neptune, NoteCards, etc.

•  CMIF, AHM, FireFly, I-HTSPN, Madeus, Microcosm, Trellis, IMAP, Labyrinth, NCM, etc.

•  Modelo Dexter – modelo de referência

•  MHEG – padrão ISO

ð 

Componentes de um documento são representados pelas entidades do modelo

8

Entidades Hipermídia

ð 

Principais entidades hipermídia

•  Blocos de informação (texto, áudio, vídeo, imagem ...) –  Nós (nodes)

•  Âncoras (anchors)

•  relacionamentos –  Elos (links)

–  nós de composição/composições (composite nodes/

compositions)

•  grupo de nós e/ou elos

9

Nó Hipermídia

ð 

Representa um objeto de mídia abstraindo como seu conteúdo está representado

ð 

Modelagem do conteúdo não faz parte do modelo conceitual

•  Nó serve para representar texto, imagem, áudio, vídeo ...

ð 

Para permitir a criação de relacionamentos entre partes internas ao conteúdo de um nó

•  âncoras

10

Âncora

ð 

Representa uma região do conteúdo de um nó que pode ser usada para criar elos

ð 

A definição da região depende do tipo do nó. Exemplos:

•  Texto: string de caracteres (posição inicial e final)

•  Imagem: conjunto de pixels (área retangular - coordenadas do pixel superior esquerdo e do inferior direito)

•  Áudio: seqüência de amostras (amostra inicial e final)

•  Vídeo: seqüência de quadros (quadro inicial e final)

•  Mídias contínuas: Instante de tempo inicial e final

ð 

A lista de âncoras de um nó define a sua interface

Elos

ð 

Usados para representar relacionamentos entre (partes de) nós

ð 

Significado (semântica) do relacionamento pode ser qualquer

ð 

É muito comum pensar no elo tradicional hipermídia – hyperlink – hiper-elo

•  Uma seleção (clique do mouse) na âncora de origem causa a apresentação da âncora de destino

ð 

Pode ser usado para representar relação de sincronização – synclink – elo de sincronização

•  O início da apresentação da âncora de origem causa a apresentação da âncora de destino

elo

Nó A Nó B

Ponto de interface de um nó (âncora)

Elos Multiponto

ð 

Podem interligar qualquer número de nós

Se o vídeo A ! está sendo exibido!

E o usuário clicou ! no botão B!

Pausa o vídeo A !

Inicia o vídeo C !

Inicia o áudio D !

(3)

13

Nós de Composição

ð 

Usados para representar relacionamentos entre nós. Podem ser definidos como:

•  Grupos de nós

•  Grupos de nós e elos

...

N2 N1 N2 Nn

N1 Nn

14

Nós de Composição

ð 

Podem ser usados para representar relações de estruturação:

•  Livro composto de capítulos

– 

Capítulos compostos de seções

ð 

Podem ser usados para representar relações de sincronização:

•  Apresentação dos componentes em seqüência

•  Apresentação dos componentes em paralelo

...

N2

N1 Nn

Seq N2

N1 Nn

...

N2

N1 Nn

Par N2

N1 Nn

Sec1.1!

Sec1.2!

cap2!

cap3!

livro!

cap1!

15

Interface de um nó de composição

ð 

Âncoras – permitindo a criação de

relacionamentos com a composição diretamente (b na figura)

ð 

Deve permitir a criação de relacionamentos entre componentes internos e nós externos

•  Portas – composicionalidade (a e c na figura)

a!

b!

c!

16

Modelos para Sincronização Temporal

ð 

Unidades de Tempo:

•  Instantes

•  Intervalos

ð 

Diversos Paradigmas:

•  Scripts

•  Timeline

•  Ferramentas para Especificação Formal

•  Sincronização Hierárquica

•  Baseado em Restrições

•  Baseado em Eventos

17

Unidades de Tempo

ð 

Instantes

•  Evento acontece instantaneamente –  não tem duração

ð 

Intervalos

•  Evento acontece entre um par de instantes –  tem duração

intervalo!

instante!

18

Relações Temporais entre Instantes

ð 

Before

ð 

After

ð 

Simultaneous

(4)

19

Relações Temporais entre Intervalos

ð 

Existem 13 relações básicas

(Allen 83)

^x

y

x y

t

x y

t x

y

x y t

x y Allen’s Relation Illustration

x meets y y met by x x starts y y started by x

x finishes y y finished by x

x before y y after x X overlaps y y overlapped by x

x during y y contains x

x equals y

20

Paradigmas para Sincronização Temporal

ð 

Scripts

•  Usa programação baseada em scripts para especificar a sincronização

– 

como em um ambiente de programação orientada a eventos

– 

Ex.: HTML5, Macromedia Flash, Asymetrix Toolbook,

Dynamic HTML

to handle buttonClick!

play “rocket.wav”!

end buttonClick!

ð 

Vantagens:

ð  expressividade

ð 

Desvantagens:

ð  Requer conhecimento de programação

ð  Dificuldade na visualização da estrutura do documento

21

Paradigmas para Sincronização Temporal

ð 

Timeline (linha do tempo)

•  Objetos posicionados diretamente no instante de tempo que devem começar a ser exibidos

ð 

Vantagens:

ð  Representação intuitiva

ð  Facilidade de visualização da estrutura temporal

ð 

Desvantagens:

ð  Não há relações entre os objetos

ð  Dificuldade para representar eventos assíncronos (interatividade)

ð  Dificuldade de edição

ð  Impossibilidade de ajustes temporais durante a execução

Ex.: Adobe Premier, Macromedia Flash MX, Macromedia Director

22

ð 

Desvantagens:

ð  Requer conhecimento do formalismo

ð  Redes se tornam complexas para relacionamentos entre partes de nós

Paradigmas para Sincronização Temporal

ð 

Ferramentas para Especificação Formal

•  Flowcharts

•  Redes de Petri

– 

notação formal baseada em grafo dirigido

• Lugares e transições

Ex.: Macromedia Authorware Ex.: OCPN, I-HTSPN, Trellis, caT

ð 

Vantagens:

ð  Expressividade

ð  permite realizar ajustes durante a execução

ð  Permite verificação formal

Paradigmas para Sincronização Temporal

ð 

Sincronização Hierárquica

•  Composições com semântica temporal

– sequencial e paralela Ex.: XMT-Ω, SMIL, CMIF, AHM

ð  Vantagens:

ð  Facilidade de autoria ð  expressividade ð  permite realizar

ajustes durante a execução

ð  Desvantagens:

•  Dificuldade para representar eventos assíncronos (interatividade)

•  Para sincronizar com partes de nós, precisamos:

– Dividir o objeto em várias partes ou

– Combinar esse modelo com outra abordagem (baseada em eventos, por exemplo)

Paradigmas para Sincronização Temporal

ð 

Baseado em Restrições

•  Conjunto básico de relações entre instantes ou intervalos (relações de Allen)

Ex.: FireFly, Madeus

ð  Vantagens:

ð  Facilidade de autoria ð  expressividade ð  permite realizar ajustes

durante a execução

ð  Desvantagens:

•  Dificuldade para representar eventos assíncronos (interatividade)

•  Para sincronizar com partes de nós, precisamos:

– Dividir o objeto em várias partes ou

– Combinar esse modelo com outra abordagem (baseada em eventos, por exemplo) after 10s

(5)

25

Paradigmas para Sincronização Temporal

ð  Baseado em Eventos

•  Eventos são representados como instantes ou intervalos de tempo

•  Relacionamentos são definidos baseados em eventos que ocorrem durante a apresentação do documento, como p.e.:

– Apresentação de uma âncora – Seleção de uma âncora (clique do

mouse)

– Posicionamento do mouse sobre uma âncora

Ex.: IMAP, Labyrinth, NCM, NCL, MHEG

ð 

Vantagens:

ð Expressividade

ð Facilidade para tratar interatividade

ð permite realizar ajustes durante a execução

ð 

Desvantagens:

ð  Dificuldade de autoria

26

Referências

ð  (Allen, 1983) Allen, J. F. Maintaining Knowledge about Temporal Intervals, Communications of the ACM, 26(11), 1983, 832-843.

ð  (Buchanan, 1992) Buchanan, Zellweger. Specifying Temporal Behaviour in hypermedia documents, ECHT’92, Milão, 1992.

ð  (Halasz, 1994) Halasz, F.; Schwartz, M. The Dexter Hypertext Reference Model, Communications of the ACM, 37(2), Fevereiro 1994.

ð  (Pérez-Luque, 1996) Pérez-Luque, M. J.; Little, T. D. C. A Temporal Reference Framework for Multimedia Synchronization, IEEE Journal on Selected Areas in Communications, 14(1), Janeiro 1996.

ð  (Hardman, 1998) Hardman, L. Modelling and Authoring Hypermedia Documents, PhD Thesis, University of Amsterdam, disponível em http://www.cwi.nl/~lynda/

thesis, 1998.

ð  (Soares, 2000) Soares, Rodrigues, Muchaluat-Saade. Modeling, Authoring and Formatting Hypermedia Documents in the HyperProp System, ACM Multimedia Systems Journal, março 2000.

ð  (Na, 2001) Na, J.; Furuta, R. Dynamic Documents: Authoring, Browsing and Analysis Using a High-Level Petri Net-Based Hypermedia System, ACM Symposium on Document Engineering, Atlanta, Novembro 2001.

27

Sistema Hipermídia

28

Autoria Hipermídia

ð 

Autoria de Documentos Hipermídia

•  Gráfica x Declarativa

ð 

Editores Gráficos:

•  Várias visões integradas

– 

Estrutural, temporal, espacial

•  Visões intuitivas para o autor

•  Facilidade de edição

•  Editores complexos

ð 

Linguagens declarativas:

•  Representação textual do documento

•  Editores simples

•  Formato XML

Hypermedia Objects Author

EDITOR Graphical Interface

Declarative Language

<?xml version="1.0" ?>

...

</hyperdocument>

Document Base

29

Autoria Gráfica

51

Armazenamento

ð 

Servidores Hipermídia

ð 

Principais funções

•  Armazenamento dos documentos –  Estrutura e conteúdo

•  Suporte a Trabalho Cooperativo –  Controle de versões

–  Controle de acesso –  Controle de notificação

•  Adaptação dos documentos

(6)

52

Execução

53

Execução - Formatador

54

Execução - Formatador

56

Sistemas Multimídia e Hipermídia

Sistemas Multimídia e Hipermídia

Profa. Débora Christina Muchaluat Saade [email protected]

Departamento de Ciência da Computação - UFF

Sistemas Multimídia e Hipermídia

Multimídia x Hipermídia

Documentos Hipermídia

• Objetos de Mídia

• Relações

Modelos Hipermídia

Entidades Hipermídia

• Nós

• Âncoras

• Elos

• Composições

Modelos para Sincronização Temporal

Multimídia x Hipermídia

Sistema Multimídia:

• Sistema capaz de manipular ao menos um tipo de mídia discreta e um tipo de mídia contínua na forma digital de maneira sincronizada

Sistema Hipermídia:

• Sistema Multimídia capaz de tratar eventos causados pela interação com o usuário e reagir a esses eventos

Hipertexto, Multimídia e Hipermídia

Documentos Hipermídia

Componentes de um documento hipermídia

• Objetos de mídia

– Texto, imagem, gráfico, áudio, vídeo, animação ...

• Relacionamentos entre os objetos

Relações Hipermídia

Relações de referência

Relações de sincronização

Relações de estruturação

Relações semânticas

Relações de derivação

Modelo Hipermídia

É necessário um modelo conceitual hipermídia para expressar os componentes de um documento

Diversos modelos propostos na literatura

• Intermedia, HyperCard, KMS, Neptune, NoteCards, etc.

• CMIF, AHM, FireFly, I-HTSPN, Madeus, Microcosm, Trellis, IMAP, Labyrinth, NCM, etc.

• Modelo Dexter – modelo de referência

• MHEG – padrão ISO

Componentes de um documento são representados pelas entidades do modelo

Entidades Hipermídia

Principais entidades hipermídia

• Blocos de informação (texto, áudio, vídeo, imagem ...) – Nós (nodes)

• Âncoras (anchors)

• relacionamentos – Elos (links)

– nós de composição/composições (composite nodes/

compositions)

• grupo de nós e/ou elos

Nó Hipermídia

Representa um objeto de mídia abstraindo como seu conteúdo está representado

Modelagem do conteúdo não faz parte do modelo conceitual

• Nó serve para representar texto, imagem, áudio, vídeo ...

Para permitir a criação de relacionamentos entre partes internas ao conteúdo de um nó

• âncoras

Âncora

Representa uma região do conteúdo de um nó que pode ser usada para criar elos

A definição da região depende do tipo do nó. Exemplos:

• Texto: string de caracteres (posição inicial e final)

• Imagem: conjunto de pixels (área retangular - coordenadas do pixel superior esquerdo e do inferior direito)

• Áudio: seqüência de amostras (amostra inicial e final)

• Vídeo: seqüência de quadros (quadro inicial e final)

• Mídias contínuas: Instante de tempo inicial e final

A lista de âncoras de um nó define a sua interface

Elos

Usados para representar relacionamentos entre (partes de) nós

Significado (semântica) do relacionamento pode ser qualquer

É muito comum pensar no elo tradicional hipermídia – hyperlink – hiper-elo

• Uma seleção (clique do mouse) na âncora de origem causa a apresentação da âncora de destino

Pode ser usado para representar relação de sincronização – synclink – elo de sincronização

• O início da apresentação da âncora de origem causa a apresentação da âncora de destino

Elos Multiponto

Podem interligar qualquer número de nós

Nós de Composição

Usados para representar relacionamentos entre nós. Podem ser definidos como:

• Grupos de nós

• Grupos de nós e elos

Nós de Composição

Podem ser usados para representar relações de estruturação:

• Livro composto de capítulos

•  Objetos de Mídia

•  Relações

•  Nós

•  Âncoras

•  Elos

•  Composições

•  Sistema capaz de manipular ao menos um tipo de mídia discreta e um tipo de mídia contínua na forma digital de maneira sincronizada

•  Sistema Multimídia capaz de tratar eventos causados pela interação com o usuário e reagir a esses eventos

•  Objetos de mídia

–  Texto, imagem, gráfico, áudio, vídeo, animação ...

•  Relacionamentos entre os objetos

•  Intermedia, HyperCard, KMS, Neptune, NoteCards, etc.

•  CMIF, AHM, FireFly, I-HTSPN, Madeus, Microcosm, Trellis, IMAP, Labyrinth, NCM, etc.

•  Modelo Dexter – modelo de referência

•  MHEG – padrão ISO

•  Blocos de informação (texto, áudio, vídeo, imagem ...) –  Nós (nodes)

•  Âncoras (anchors)

•  relacionamentos –  Elos (links)

–  nós de composição/composições (composite nodes/

•  grupo de nós e/ou elos

•  Nó serve para representar texto, imagem, áudio, vídeo ...

•  âncoras

•  Texto: string de caracteres (posição inicial e final)

•  Imagem: conjunto de pixels (área retangular - coordenadas do pixel superior esquerdo e do inferior direito)

•  Áudio: seqüência de amostras (amostra inicial e final)

•  Vídeo: seqüência de quadros (quadro inicial e final)

•  Mídias contínuas: Instante de tempo inicial e final

•  Uma seleção (clique do mouse) na âncora de origem causa a apresentação da âncora de destino

•  O início da apresentação da âncora de origem causa a apresentação da âncora de destino

•  Grupos de nós

•  Grupos de nós e elos

•  Livro composto de capítulos

•  Apresentação dos componentes em seqüência

•  Apresentação dos componentes em paralelo

•  Portas – composicionalidade (a e c na figura)

•  Instantes

•  Intervalos

•  Scripts

•  Timeline

•  Ferramentas para Especificação Formal

•  Sincronização Hierárquica

•  Baseado em Restrições

•  Baseado em Eventos

•  Evento acontece instantaneamente –  não tem duração

•  Evento acontece entre um par de instantes –  tem duração

•  Usa programação baseada em scripts para especificar a sincronização

•  Objetos posicionados diretamente no instante de tempo que devem começar a ser exibidos

•  Flowcharts

•  Redes de Petri

•  Gráfica x Declarativa

•  Várias visões integradas

•  Visões intuitivas para o autor

•  Facilidade de edição

•  Editores complexos