Fundamentos de Sistemas Multimídia na Web

Prévia do material em texto

1
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
Hipermídia na Web
Profa. Débora Christina Muchaluat Saade
deborams@telecom.uff.br
HipermHipermíídiadia nana WebWeb
Profa. Débora Christina Muchaluat Saade
deborams@telecom.uff.br
Departamento de Engenharia de TelecomunicaDepartamento de Engenharia de Telecomunicaçções ões -- UFFUFF
2
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
HipermHipermíídia na dia na WebWeb
� Linguagens de autoria
• HTML
• SMIL
50
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
HTMLHTML
� HyperText Markup Language (HTML) 
� Aplicação SGML (Standard Generalized 
Markup Language)
51
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SGMLSGML
� Standard Generalized Markup Language
� ISO 8879 definido em 1986
� Conceitos básicos:
• separação entre conteúdo e apresentação de documentos
– conteúdo estruturado logicamente
– informação específica à apresentação
• objetivo principal do SGML é estruturar a informação, 
lidando com conteúdo e estrutura
• apresentação é feita usando outros mecanismos (style 
sheets)
52
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SGMLSGML
� Uso em larga escala: 
• HTML 2.0: especificado como
aplicação SGML (1994)
� Conteúdo: 
• elementos lógicos estruturados
hierarquicamente => Árvore do 
Documento (Document Tree)
� Processamento automatizado do 
documento
• índice, lista de figuras, tabelas
Livro
Capítulo_1 Capítulo_N
Seção_1.1
Subseção_1.1.1
Parágrafo Figura Tabela
...
53
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SGMLSGML
� Como representar o conteúdo estruturado, de tal forma 
a identificar o que é estrutura e o que é conteúdo do 
documento?
� Marcação (markup): informação sobre o conteúdo do 
documento que está embutida no conteúdo identificada
por algum caracter especial (ou seqüência de caracteres)
� A informação estrutural é definida em termos de 
elementos que têm nomes únicos (capítulo, seção, ...) 
delimitados através de tags de início e fim (start/end tags)
<chapter><heading>Standard Generalized Markup Language</heading>
<paragraph>SGML é um padrão ISO ...</paragraph>
</chapter>
54
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SGMLSGML
� Classe de documentos especificada através de 
uma DTD - Document Type Definition
• os elementos de uma classe de documentos e seus
atributos
• as regras para combinar esses elementos, 
especificando o conteúdo permitido para cada
elemento
55
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SGMLSGML
� Exemplo de DTD de um livro:
<!ELEMENT book (author, heading, chapter+)>
<!ELEMENT chapter (heading, (paragraph|figure)*, section*)>
<!ELEMENT section (heading, (paragraph|figure)*)>
<!ELEMENT (author|heading) (#PCDATA)>
<!ELEMENT paragraph ((#PCDATA|reference)*)>
<!ELEMENT reference EMPTY>
<book>
<author> <heading> <chapter>
<heading> <paragraph> <section>
<heading> <paragraph> <figure><paragraph>
58
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SGMLSGML
� Especificando atributos dos elementos
<!ATTRLIST (chapter|section)
id CDATA #IMPLIED>
<!ATTRLIST reference
id CDATA #REQUIRED
type (section|page) section>
<chapter id=“sgml”><heading>Standard Generalized Markup Language</heading>
<paragraph> ... </paragraph>
<section id=“content”><heading>Content and Presentation</heading>
<paragraph> ... </paragraph>
... in section <reference type=“section” id=“content”></reference> on page <reference 
type=“page” id=“content”></reference> ...
60
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SGMLSGML
� Parser:
• Declaração SGML
– delimitadores de marcação
– nomes reservados (ELEMENT, ATTRLIST, ...)
– tamanho máximo dos nomes dos elementos
– se delimitadores de ínicio e fim podem ser opcionais
– ...
• DTD
• Documento
61
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SGMLSGML
Declaração SGML DTD Documento
Parser
Declaração SGML
DTD Documento
Parser
Declaração SGML DTD
Documento
Parser
Parser SGML genérico
Parser XML Parser HTML
SGML Profile SGML Application
65
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
HTMLHTML
� HyperText Markup Language
� HTML 2.0, 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)
66
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
HTMLHTML
Declaração SGML 
do HTML DTD HTML
Documento
Parser
Parser HTML
69
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
HTMLHTML
� Apesar do SGML focar em conteúdo, as primeiras
versões do HTML tinham elementos e atributos para
especificar a apresentação do documento
• itálico - <I>
• sublinhado - <U>
• negrito - <B>
• tamanhos e cores das fontes - <FONT> …
� a partir da versão 4.0, seu uso foi desaconselhado
(deprecated), devendo ser substituídos por style sheets
70
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
HTMLHTML
� HTML 4 define três DTDs:
• Transitional DTD: deve ser utilizada só para interpretar
HTML 4.0, não para gerar novos documentos, pois contém
elementos e atributos que não devem ser mais utilizados. 
Esses elementos eram utilizados para especificar formatação
nas versões antigas do HTML e agora devem ser substituídos
por style sheets em CSS
• Strict DTD: deve ser utilizada para gerar novos documentos, 
pois não contém elementos deprecated
• Frameset DTD: deve ser usado para especificar documentos
contendo uma estrutura de frames
71
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
HTMLHTML
Documento
HTML Conversor
Documento
HTML
Style sheet
CSS
Transitional DTD
Strict DTD
CSS
76
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
HTMLHTML
� Estrutura básica de um documento HTML
• HEAD: informações que descrevem o 
documento
• BODY: conteúdo do documento
<HTML> Document
Document <HEAD>
Document <BODY>
<HTML>
<HEAD>
<TITLE>
<BODY>
<H1> <P> <UL>
<LI> <LI><LI>
78
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
HTMLHTML
� <HEAD> - cabeçalho do documento
• título do documento
• metadados do documento (formato nome/valor)
• ...
83
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
HTMLHTML
� <BODY> - corpo do documento
• texto estruturado
• listas
• tabelas
• links
• imagens
• formulários
• frames
– se o documento contiver frames, <BODY> deve ser 
substituído por <FRAMESET>
85
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
HTMLHTML
� Exemplo de texto HTML
<HTML>
<HEAD>
<TITLE>Exemplo</TITLE>
</HEAD>
<BODY>
<H1>Exemplo de texto HTML</H1>
<P>Este é um exemplo de texto
HTML.</P>
<P>Serve para ilustrar como as 
<EM>marcações</EM> são utilizadas.</P>
</BODY>
</HTML>
91
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
HTMLHTML
� Links:
• relacionamento entre uma única origem e um único
destino
• especificado embutido no conteúdo do recurso
origem
• impede o reuso do conteúdo sem os elos
Introdução
a1
a2
c1
c2
Seção 3.1
94
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
HTMLHTML
� Links:
• âncora de origem <A> especifica a URI do destino
(atributo HREF):
• âncora de destino (ID ou NAME):
... the <A HREF=“index.html”>index</A> can be found ...
<P><A NAME=“copyright”></A>The copyright of the ...
<P ID=“copyright”>The copyright of the ...
... the <A HREF=“#copyright”>copyright notice</A> contains ...
100
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
HTMLHTML
� Frames: permitemconstruir páginas que agregam vários
documentos em uma janela
Browser Window
Fr
am
e 
1 
co
nt
en
t
<HTML>
<HEAD> ... </HEAD>
<FRAMESET>
<FRAME TITLE=“Primeiro Frame” SRC=“...”>
<FRAME TITLE=“Segundo” SRC=“...”>
<NOFRAMES>...</NOFRAMES>
</HTML>
Frameset Document
<HTML>
<HEAD> ... </HEAD>
<BODY>...</BODY>
</HTML>
Frame 1 Document
<HTML>
<HEAD> ... </HEAD>
<BODY>...</BODY>
</HTML>
Frame 2 Document
Fr
am
e 
2 
co
nt
en
t
102
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
HTMLHTML
� <FORM> - possibilita a definição de formulário em 
páginas HTML, onde o usuário pode informar dados a 
serem submetidos a um servidor
<FORM action="http://somesite.com/prog/adduser" 
method="post">
<P>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> 
Male<BR>
<INPUT type="radio" name="sex" value="Female"> 
Female<BR>
<INPUT type="submit" value="Send"> 
<INPUT type="reset">
</P>
</FORM>
114
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
Style SheetsStyle Sheets
� Especificação do conteúdo estruturado
logicamente
• SGML
• HTML
� Especificação sobre a apresentação do 
documento
• linguagens para especificação de style sheets
– DSSSL - Document Style Semantics and Specification 
Language para SGML
– CSS - Cascading Style Sheets para HTML
– XSL - Extensible Style Language para XML
115
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
CSSCSS
� Cascading Style Sheets
� Histórico
• CSS1 - Cascading Style Sheets, level 1 -
Recomendação W3C em dezembro de 1996
• CSS2 - Cascading Style Sheets, level 2 -
Recomendação W3C em maio de 1998
� O que pode-se especificar com style sheets?
116
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
CSSCSS
� Informações sobre a apresentação do documento
• color
• background
– color, image, repeat, attachment, position
• font
– family, size, size-adjust, style, variant, weight, stretch, height
• text
– vertical-align, text-align, text-decoration, text-indent, text-
transform, word-spacing, letter-spacing, white-space, text-
shadow
• list-style
– type, position, image
118
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
CSSCSS
� Formatação espacial dos elementos (box model)
Esse é um exemplo que ilustra
como um parágrafo (block-level 
element) é tratado espacialmente.
margin
border
padding
content
Top
Bottom
Left Wright
120
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
CSSCSS
� Tabelas
caption
table’s margin
caption’s margin
121
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
CSSCSS
� Por que usar style sheets?
• Especificar diferentes apresentações para um único documento
• Possibilitar uma aparência consistente para um conjunto de documentos
(site)
• HTML não foi projetado para especificar formatação, mas sim conteúdo
– se especificar apresentação junto com a conteúdo, tem que repetir a 
especificação várias vezes, o que dificulta a manutenção
– se especificar apresentação em uma style sheet, é muito mais fácil fazer
modificações que são refletidas em vários documentos
• HTML não oferece suporte suficiente para controlar a apresentação
– ex.: espaçamento entre linhas, sombreado nas fontes, ...
<H1>A heading</H1>
<H1><FONT COLOR="yellow" FACE="Helvetica">A heading</FONT></H1>
H1 {font-family:Arial; color: green} H1 {color: red; background: blue}
126
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
CSSCSS
� Como especificar um estilo?
• grupo de declarações: “propriedade1:valor1; 
propriedade2:valor2”
– Ex.: color: red; font-size: 16px
• associados a elementos HTML
– Ex.: P{color: red; font-size: 16px}
132
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
CSSCSS
� Style sheets podem especificar como um documento será
apresentado em diferentes dispositivos
• em um monitor (screen), em papel (print), com um 
sintetizador de voz (aural), com um dispositivo braille
(braille, embossed), all, handeld, projection, tty, tv
@import url(“loudvoice.css”) aural
@media print {
/* style sheet for print goes here */
}
@media screen {
/* style sheet for screen goes here */
}
135
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
CSSCSS
� Geração de conteúdo
• inserir conteúdo antes (:before) ou depois (:after) de 
elementos (“Figura”, “Nota: ”)
• numeração automática
P.note:before {content: “Note: ”}
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter 
*/
counter-reset: section; /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
136
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
CSSCSS
� Como associar uma style sheet ao conteúdo de um 
documento HTML?
• em uma style sheet externa referenciada no 
cabeçalho do documento
• em uma style sheet embutida no cabeçalho do 
documento
• diretamente em cada elemento do documento
137
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
CSSCSS
� Style sheet externa referenciada no cabeçalho do 
documento :
• através do elemento <LINK>
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="fluorescent.css">
</HEAD>
<BODY>
...
</BODY>
</HTML>
BODY { color: black; 
font-family: Geneva, Helvetica, Arial, sans-serif; 
background-color: white} 
H1 { color:blue}
Documento
HTML
Style Sheet
140
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
CSSCSS
� Style sheet embutida no cabeçalho do documento
• através do elemento <STYLE>
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
BODY {color: red}
H1 {color: black}
-->
</STYLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>
Comentários do HTML: 
para evitar que browsers 
que não implementam
style sheets exibam o conteúdo
da style sheet na tela
142
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
CSSCSS
� Diretamente em cada elemento do documento -
inline style:
• qualquer elemento, exceto <HTML>, pode ter um 
estilo associado
<P style="color: green">
Este é um parágrafo.
</P>
144
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
CSSCSS
cascateamento
he
ra
nç
a<BODY>
|
<UL>
|
<LI>
browser 
style sheet
<BODY>
|
<UL>
|
<LI>
user 
style sheet
<BODY>
|
<UL>
|
<LI>
1. designer 
style sheet
Formatação default 
do browser
Preferências do usuário
<HTML
<HEAD>
<LINK rel="stylesheet" href=“.........”>
<LINK rel=“stylesheet” href=“...”>
...
Documento
HTML
<BODY>
|
<UL>
|
<LI>
2. designer 
style sheet
Relacionado a várias style sheets
Relacionada à
árvore do documento
Usando múltiplas style sheets
148
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
HTMLHTML
� Principal vantagem do HTML é simplicidade => 
SUCESSO
�Mas apresenta muitas limitações como uma
linguagem para especificação de documentos
hipermídia
149
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
LimitaLimitaççõesões do HTMLdo 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
150
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SGMLSGML
� SGML é muito genérico e oferece bastante flexibilidade
para especificação de novas linguagens
• permite que sejam otimidas algumas marcações=> 
minimizar o número de marcações
• processador SGML genérico é muito complexo de ser 
implementado
� Devido a complexidade de processamento, SGML não
teve sucesso para ser usado na Web
� Surge a tendência de diminuir a complexidade do 
SGML, através do desenvolvimento de novos padrões
como o XML
151
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
XMLXML
� eXtensible Markup Language - XML
� XML 1.0 - Recomendação do W3C - Fevereiro
1998
� 2 motivos para uma nova linguagem:
• inflexibilidade do HTML 
– definido por uma única DTD
• complexidade do SGML
– processadores SGML são difíceis de implementar
� XML é um subconjunto de SGML (SGML 
Profile, possui uma declaração SGML específica)
152
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
XMLXML
Declaração SGML
DTD Documento
Parser
Parser XML
SGML Profile
153
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
XMLXML
� Exemplo de documento
<?XML version=“1.0” ?>
<cliente>
<nome> Manoel da Silva </nome>
<endereço>
<rua> Timbiras, 456 </rua>
<cidade> Belo Horizonte </cidade>
<estado> Minas Gerais </estado>
</endereço>
</cliente>
159
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
XMLXML
� DTD - Document Type Definition:
• especifica uma classe de documentos através de 
seus elementos, atributos e tipos dos atributos
• pode ser declarada no próprio documento
• ou em um documento externo referenciado
<?XML version=“1.0” ?>
<!DOCTYPE saudação SYSTEM “alo.dtd”>
<saudação> Alô, mundo! </saudação>
<?XML version=“1.0” ?>
<!DOCTYPE saudação [
<!ELEMENT saudação (#PCDATA)>]>
<saudação> Alô, mundo! </saudação>
161
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
XMLXML
� Diferenças principais entre XML e SGML:
• XML é case-sensitive
• não permite minimizar as marcações, omitindo marcações de 
fim
• minimização de marcação só para end tags nulas, que só
podem ser usadas para elementos vazios
• cada elemento deve ter sua declaração de tipo na DTD, não
permite uma única declaração para um grupo de elementos
<!ELEMENT (author|heading) (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
DTD SGML
DTD XML
163
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
XMLXML
� Tecnologias relacionadas a XML:
• XLink - padrão para adicionar hiper-elos a um documento XML
• XPointer - sintaxe para referenciar partes de um documento XML
• CSS - linguagem para especificar style sheets, aplicável a XML ou
HTML
• XSL - linguagem avançada para expressar style sheets, baseada em 
XSLT
• XPath - linguagem para expressões usada em XSLT
• DOM - conjunto padrão de chamadas de funções para manipular
elementos XML e HTML a partir de uma linguagem de programação
• XML Namespaces - especificação que diz como associar uma URL a 
cada tag ou atributo de um documento XML
• RDF - padrão para definição de metadados
• XML Schema - ajuda projetistas a definir precisamente formatos
baseados em XML
166
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
XMLXML
� Exemplo de linguagens especificadas
em XML:
• eXtensible Hypertext Markup Language 
(XHTML)
• Synchronized Multimedia Integration 
Language (SMIL)
• Nested Context Language (NCL)
• Wireless Markup Language (WML)
• Mathematics Markup Language (MathML)
• Chemical Markup Language (CML)
• Channel Definition Format (CDF)
167
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
XHTMLXHTML
� 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
• Transitional
• Strict
• Frameset
� facilitar próximas extensões do HTML
• XHTML 1.1 – estrutura modular
168
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
XHTMLXHTML
� Algumas diferenças entre XHTML 1.0 e HTML 4:
• documentos devem ser bem-formados
– CORRETO: elementos aninhados
• <p>here is an emphasized <em>paragraph</em>.</p>
– INCORRETO: elementos sobrepostos
• <p>here is an emphasized <em>paragraph.</p></em>
• nomes de elementos e atributos devem ser escritos com letra minúscula
– XML é case-sensitive
• identificadores de fragmentos devem ser especificados baseados somente
no atributo ID e não mais no atributo NAME
• elementos não vazios devem ter end tags
– CORRETO: elementos com end tags
• <p>here is a paragraph.</p><p>here is another paragraph.</p>
– INCORRETO: elementos sem end tags
• <p>here is a paragraph.<p>here is another paragraph.
169
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
XHTMLXHTML
� Algumas diferenças entre XHTML 1.0 e HTML 4 (cont.):
• valores de atributos devem estar entre “aspas”
– CORRETO: valores entre aspas
• <table rows="3">
– INCORRETO: valores sem aspas
• <table rows=3>
• não é permitido minimizar atributos
– CORRETO: atributo declarado sem minimização
• <dl compact="compact">
– INCORRETO: atributo declarado com minimização
• <dl compact>
• elementos vazios devem ter end tags ou start tags terminando com ‘/’
– CORRETO: start tags terminando com ‘/’
• <br/><hr/>
– INCORRETO: elementos vazios sem end tags
• <br><hr>
170
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
� Synchronized Multimedia Integration Language
• versão 1.0 foi Recomendação do W3C em junho/1998
• Versão 2.0 foi recomendação do W3C em agosto de 2001
• Versão 2.1 foi recomendação do W3C em agosto de 2005
• Versão 3.0 foi recomendação do W3C em agosto de 2008
– smilText, SMIL State, SMIL DOM
� Linguagem declarativa para especificação de 
documentos multimídia na Web
• Baseada no CMIF, do CWI em Amsterdam
� Versão 1.0 especificada em XML - DTD SMIL
� A partir da versão 2.0 especificada em XML Schema
171
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
� 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
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
� 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
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
� 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
video1text1
image1
174
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
� 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
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
� Especificação dos relacionamentos de 
sincronização:
• composição paralela - par
• composição seqüencial – seq
• composição exclusiva – excl
177
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
� Composição paralela - par:
texto:
0 5s
vídeo:
0 8s
áudio:
0 10s
<par>
<text src=”title.html” region=”m-title” dur=”5s” />
<video src=”cnn.mpv” region=”V-main” />
<audio src=”cnn.aiff” />
</par>
178
Fundamentos de Sistemas MultimFundamentosde Sistemas Multimíídiadia
SMILSMIL
� Definição de início explícito
texto:
0 5s
vídeo:
3s 11s
áudio:
4s 14s
<par>
<text src=”title.html” region=”m-title” dur=”5s” />
<video id=”v1” src=”cnn.mpv” region=”V-main” begin=”3s” />
<audio src=”cnn.aiff” begin=”id(v1)(1s)” />
</par>
179
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
� 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
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
� Composição seqüencial - seq:
video1:
0 5s
video2:
5s 13s
<seq>
<video id=”video1” src=”cnn.mpv” region=”V-Main” />
<video id=”video2” src=”dcab.mpv” region=”V-Main” />
</seq>
181
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
� Definição de início explícito
video1:
0 5s
video2:
7s 15s
<seq>
<video id=”video1” src=”cnn.mpv” region=”V-Main” />
<video id=”video2” src=”dcab.mpv” region=”V-Main” begin=”2s” />
</seq>
182
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
� <excl>
• Só um componente pode tocar por vez
• Se um componente começa a tocar enquanto outro
está tocando, este é pausado ou parado
<excl>
<img id= “image1” src="image1.jpg" begin="0s".../>
<img id= “image2” src="image2.jpg" begin="10s; image1.click".../>
<img src="image3.jpg" begin="20s; image2.click".../>
</excl>
183
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
� Aninhamento de elementos par, seq e excl
A1:
I1:
T2:
V2:
A2:
<seq>
<par>
<audio id=”A1” region=”A_UK_Main” src=”dcab1c.aiff” />
<img id=”I1” region=”Pix” src=”webgrowth.gif” dur=”10s” />
</par>
<par>
<text id=”T2” region=”r_title” src=”title.html” dur=”6s”/>
<video id=”V2” region=”V-Remote” src=”larry.mpv” />
<audio id=”A2” src=”frans1.aiff” />
</par>
</seq>
184
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
� Âncoras
• Região de um elemento
• Elemento
• Apresentação inteira
� Elos unidirecionais com apenas 1 origem e 1 
destino
� Elementos:
• <a>
• <area>
185
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
� 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
<a href=”archives-dcab.smil#v1” show=”new”>
<video src=”dcab.mpv” region=”V-Main” />
</a>
186
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
� 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”
<img src=”larry.gif” region=”I-Remote” >
<area id=”face” coords=”35%,10%,65%,50%” />
<area id=”tie” coords=”40%,55%,60%,90%” />
</img>
187
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
� Elemento <area>:
• sub-regiões temporais: atributos begin e end
0 10s
 âncora
 2s 6s
<video src=”dcab.mpv” region=”V-Main” >
<area id=”talk” begin=”2s” end=”6s” />
</video>
video:
188
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
Documento de origem: webnews.smil
“larry.gif”
0 10s
talk01
 2s 6s
“larry_talk.aiff”
<img src=”larry.gif” region=”I-Remote” >
<area href=”larry.smil#talk01” show=”new”
coords=”35%,10%,65%,50%” />
</img>
Documento de destino: larry.smil
<audio src=”larry_talk.aiff” >
<area id=”talk01” begin=”2s” end=”6s” />
</audio>
189
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
SMILSMIL
� Elemento <switch> - exibição de conteúdo
alternativo
� escolha do conteúdo baseado em atributos de 
teste
• system-bitrate, system-language, ...
<switch>
<audio system-bitrate=”56000” src=”hi_quality.aiff” />
<audio system-bitrate=”28800” src=”low_quality.aiff” />
</switch>
193
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
Novas Novas LinguagensLinguagens DeclarativasDeclarativas
� Grande tendência: Modularização das linguagens
� Vantagens da utilização de módulos:
• customização
• reuso
• extensibilidade
• Expressividade
� Combinação de módulos de linguagens diferentes
em perfis de linguagem (language profiles)
� Exemplos: XHTML 1.1 e SMIL 2.0
195
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
Novas Novas LinguagensLinguagens
� Exemplos de profiles que podem ser construídos
• XHTML+SMIL Profile (jan/02) - integra
sincronização temporal do SMIL no XHTML
– usa os módulos do XHTML para estrutura e layout espacial e os
do Smil 2.0 para multimídia e sincronização temporal
– Timing and Synchronization Module
– Transition Effects Module
– Animation Module
– Content Control Module
– Media Object Module
196
Fundamentos de Sistemas MultimFundamentos de Sistemas Multimíídiadia
MPEGMPEG--4 XMT4 XMT--ΩΩΩΩΩΩΩΩ usa musa móódulos do SMILdulos do SMIL