Sistemas Multimídia. ð Linguagens de autoria. Sistemas Multimídia. ð Principal vantagem do HTML é simplicidade => SUCESSO. Sistemas Multimídia

(1)

1

Hipermídia na Web

Profa. Débora Christina Muchaluat Saade

debora@midiacom.uff.br

2

ð

 

Linguagens de autoria

• HTML

• SMIL

65 Sistemas Multimídia

HTML

ð 

HyperText Markup Language

ð 

HTML 2.0 (1994), HTML 3.2, HTML 4.0, HTML 4.01

ð 

Objetivos do projeto do HTML:

• riqueza: deve ser poderoso para suportar um número grande

de aplicações

• simplicidade: deve ser simples para um usuário não-expert

entender seus conceitos e criar páginas HTML

• acessibilidade e independência de plataforma: deve focar em

conteúdo e não em apresentação

ð 

especificado em SGML (Declaração SGML e DTD

específicas)

148

Sistemas Multimídia

HTML

ð

 

Principal vantagem do HTML é simplicidade =>

SUCESSO

ð

 

Mas apresenta muitas limitações como uma

linguagem para especificação de documentos

hipermídia

149

Limitações do HTML

ð 

Definição de elos embutidos no conteúdo das páginas

HTML

• impede a reutilização de conteúdo sem herança de elos

• não permite a criação de elos com origem em páginas com

direito de leitura somente

• elos só podem ser percorridos em uma direção, impedindo

saber que páginas referenciam outras

ð 

só permite a criação de elos com uma origem e um

destino sempre disparados pela interação do usuário

ð 

não oferece suporte à definição de relacionamentos de

sincronização temporal e espacial

167

XHTML

ð

 

eXtensible HyperText Markup Language

ð

 

reformulação do HTML 4 em DTDs XML

ð

 

XHTML 1.0 foi publicado em janeiro de 2000

ð

 

mesmas DTD’s do HTML 4

ð

 

facilitar próximas extensões do HTML

• XHTML 1.1 – estrutura modular

ð

 

HTML5 – proposta mais recente

• Sincronização multimídia com programação em

(2)

170

SMIL

ð 

Synchronized Multimedia Integration Language

• SMIL 1.0 - 1998

• SMIL 2.0 - 2001

• SMIL 2.1 - 2005

• SMIL 3.0 – 2008

• WG do W3C encerrou as atividades em abril/2012

ð 

Linguagem declarativa para especificação de

documentos multimídia na Web

• Baseada no CMIF, do CWI em Amsterdam

• Modelo baseado em sincronização hierárquica

171

SMIL

ð

 

Fornece as seguintes facilidades:

• Relações temporais facilmente definidas

• Sincronização precisa entre as diversas mídias

• Usa um modelo temporal híbrido baseado em

sincronização hierárquica e eventos

• Definição da localização espacial dos objetos

• Definição de âncoras em mídias contínuas

• Adaptação do documento a variações de

características do sistema e do usuário

• Especificação de animações

172

SMIL

ð

 

Estrutura de um documento SMIL

<smil>

<head>

<meta ... />

...

informações sobre o documento

...

<meta ... />

<layout>

...

definição do layout espacial

...

</layout>

</head>

<body>

...

objetos

...

relações temporais

...

âncoras e elos

...

</body>

</smil>

173 Sistemas Multimídia

SMIL

ð

 

Definição do layout espacial do documento

<layout>

<root-layout id="main_window" width="721" height="587"/> <region id="text1" left="4%" top="4%" width="37%" height="22%"/> <region id="video1" left="52%" top="5%" width="45%" height="42%"/> <region id="image1" left="3%" top="44%" width="46%" height="40%"/>

</layout> main_window video1 text1 image1 174 Sistemas Multimídia

SMIL

ð 

Um documento SMIL contém apenas a estrutura da

apresentação e a descrição dos objetos, e não seu

conteúdo

ð 

tipos de mídia:

• texto (

text

)

• imagem estática (

img

)

• áudio (

audio

)

• vídeo (

video

,

animation

)

ð 

Exemplo:

<

video

id="News-Leader"

src

="cnn.mpv" dur="5s"

region="V-Main"/>

176

SMIL

ð

 

Especificação dos relacionamentos de

sincronização:

• composição paralela –

par

• composição sequencial –

seq

(3)

177

ð

 

Composição paralela -

par

:

texto: 0 5s vídeo: 0 8s áudio: 0 10s <par>

</par>

178

ð

 

Definição de início explícito

texto: 0 5s vídeo: 3s 11s áudio: 4s 14s <par>

</par>

179

SMIL

ð

 

Definição de término da composição

par

texto: 0 13s vídeo: 0 8s áudio: 0 10s término efetivo <par endsync=”first”>

<text src=”title.html” region=”m-title” dur=”13s” /> <video src=”cnn.mpv” region=”V-main” /> <audio src=”cnn.aiff” /> </par> 180 Sistemas Multimídia

SMIL

ð

 

Composição seqüencial -

seq

:

video1:

0 5s

video2:

5s 13s

<seq>

181

SMIL

ð

 

Definição de início explícito

video1:

0 5s

video2:

7s 15s

<seq>

182

SMIL

ð

 

<

excl

>

• Só um componente pode tocar por vez

• Se um componente começa a tocar enquanto outro

está tocando, este é pausado ou parado

<excl>

(4)

183

SMIL

ð

 

Aninhamento de elementos

par

,

seq

e

excl

A1: I1: T2: V2: A2: <seq> <par>

<par>

</par> </seq> 184 Sistemas Multimídia

SMIL

ð

 

Âncoras

• Região de um elemento

• Elemento

• Apresentação inteira

ð

 

Elos unidirecionais com apenas 1 origem e 1

destino

ð

 

Elementos:

• <a>

• <area>

185 Sistemas Multimídia

SMIL

ð 

Elemento <a>

• O conteúdo do elemento

a

é a âncora de origem

• A âncora de destino é dada pelo atributo

href

• O atributo

show

pode assumir 3 valores

– 

replace

: a apresentação de origem é substituída pela de destino

– 

new

: a apresentação de origem prossegue e a de destino é

iniciada em uma nova janela

– 

pause

: a apresentação de origem é interrompida e a de destino é

iniciada em uma nova janela

<ahref=”archives-dcab.smil#v1” show=”new”> <video src=”dcab.mpv” region=”V-Main” /> </a>

186

SMIL

ð 

Elemento <area>:

• Permite especificar âncoras em sub-regiões temporais e

espaciais dos objetos

• sub-regiões espaciais: atributo

coords

âncora “face”

imagem estática “larry.gif” âncora “tie”

187

SMIL

ð

 

Elemento

<area>

:

• sub-regiões temporais: atributos

begin

e

end

0 10s

âncora

2s 6s

video:

188

SMIL

Documento de origem: webnews.smil

“larry.gif”

0 10s

talk01 2s 6s

“larry_talk.aiff”

Documento de destino: larry.smil <audio src=”larry_talk.aiff” >

<areaid=”talk01” begin=”2s” end=”6s” /> </audio>

(5)

189

ð

 

Elemento

<switch>

- exibição de conteúdo

alternativo

ð

 

escolha do conteúdo baseado em atributos de

teste

• system-bitrate, system-language, ...

192

ð

 

Inclui facilidades da

proposta SMIL State

• Permite a definição de

variáveis no documento

SMIL e definição de

testes, através de

expressões booleanas

sobre essas variáveis,

para controlar exibição

de componentes do

documento

<seq>

<seq expr="lastPlayed < 1"> <audio src="chapter1.mp3" /> <setvalue ref="lastPlayed" value="1" /> </seq>