Desenvolvendo

aplicaes
interativas para TVD
com NCL
Prof Ms. Elaine Ceclia Gatto
02/09/2011 - 14:00 as 18:00
1 JEAUSC Jornada de Engenharias, Arquitetura e Urbanismo

Ferramentas necessrias
Eclipse IDE (http://www.eclipse.org/downloads/packages/eclipse-ide-ccdevelopers-includes-incubating-components/indigor)
NCL Eclipse plugin NCL para o Eclipse
(http://laws.deinf.ufma.br/ncleclipse/installation.html)
VMWare Player
(http://www.vmware.com/br/products/desktop_virtualization/player/overvi
ew.html)
Ginga-NCL Virtual Set-top Box
(http://www.softwarepublico.gov.br/dotlrn/clubs/ginga/gingancl/xowiki/gin
gancl_vm http://www.softwarepublico.gov.br/dotlrn/clubs/ginga/gingancl/onecommunity?page_num=0 )
SSH Secure Shell Client (http://www.baixaki.com.br/download/ssh-secureshell.htm)
Scite Compilador Lua (http://www.scintilla.org/SciTE.html)
NCL Validator (http://laws.deinf.ufma.br/nclvalidator/)

Introduo ao NCL
NCL Nested Context Language: linguagem de contexto
aninhados.
Linguagem de marcao tipo XHTML
Nasceu do NCM Nested Context Model: Modelo de
contextos aninhados. Utiliza conceitos de ns e elos aplicados
em documentos hipermdia.
Desenvolvido na PUC-RIO pelo laboratrio TELEMIDIA

Estrutura bsica de um
documento NCL

Estrutura bsica de um
documento NCL

Regies - region
o local que voc define para exibio das suas mdias.
Primeiro voc deve definir a regio da tela de TV.
Em seguida, voc deve definir as regies de cada objeto de
mdia (vdeo, figura, legenda, etc)
Layout (IHC Interface Humano Computador)
importante, antes de programar, fazer a prototipao das
telas que sua aplicao ter.
O trecho de cdigo a seguir, mostra como definir duas regies,
uma para dispositivos mveis e outra para TV.

Regies - region

Regio region

rgTVCentro
rgTV

Region regio
Atributos:
id: identificador da regio
device: classe de dispositivo (tv fixa, porttil ou mvel)
left: coordenada x do lado esquerdo
right: coordenada x do lado direito
top: coordenada y do lado superior
bottom: coordenada y do lado inferior
height: altura
width: largura
zindex: nmero entre 0 e 25 que define a camada da regio
no eixo z
title: ttulo da regio

Region regio
left

width

top

height

Regio filha: zindex=2

bottom

Regio pai : zindex=1

right

Region regio

Region regio
rgMenu1
rgMenu2
rgMenu3
rgMenu4

rgMenu

rgTV
zindex=1

Region regio

Region regio
rgTV
zindex=1

rgMenu1
rgMenu2
rgMenu3
rgMenu4

rgMenu

Tocando um vdeo

Descritores
So responsveis pela configurao de como os objetos de mdia
devero ser apresentados.
Atributos:
id (identificao): identificador do descritor
region (regio): identificador da regio a ser utilizada por esta
mdia
explicitDur (durao explcita): define a durao do objeto de
mdia em segundos
freeze (congelado): identifica o que acontece ao final da
apresentao do objeto de mdia associado ao descritor
(true/false)
player (tocador): identifica a ferramenta de apresentao a ser
utilizada para exibir o objeto de mdia.
EXEMPLO: <descriptor id=dTeste region=rTeste explicitDur=3s
freeze=true/>

Reproduzindo uma Imagem sobre

um vdeo

Parmetros de Descritores
Existe um outro elemento opcional que est contido em
descritor:
<descriptor Param>: define um parmetro do descritor
como um par de propriedade e valor.
Cada descritor pode conter diversos elementos <descriptor
Param>:
<descriptor Param name=nomeParam value=valorParam>

Parmetros de Descritores
Parmetros reservados para udio:
soundLevel: 0 = mute; 0,5 ou 50% = metade; 1 ou
100%= mximo.
balanceLevel: valores entre 0 e 1 ou entre 0% e 100%
trebleLevel: valores entre 0 e 1 ou entre 0% e 100%
bassLevel: valores entre 0 e 1 ou entre 0% e 100%
Parmetros reservados para mdia visual:
top
left
bottom
right
width
height

Parmetros de Descritores
Parmetros reservados para mdia visual:
location: posio do objeto de mdia em left, top. Valores: %
ou pixels.
size: dimenses do objeto de mdia em width e height.
Valores: % ou pixels.
bounds: posio e dimenses do objeto de mdia em left, top,
width e height. Valores: % ou pixels.
zIndex: posio da regio no eixo z (sobreposies de regies).
background: cor de fundo (white, black, silver, gray, red,
maroon, fuchsia, purple, lime, green, yellow, olive, blue, navy,
aqua, teal ou transparent)
visible: true ou false (visivel ou invisivel)
transparency: grau de tranparncia. Valores entre 0 e 1 ou %.

Parmetros de Descritores
Parmetros reservados para mdia visual:
fit: efeitos conforme abaixo
fill: redimensiona o contedo do objeto de mdia para que
toque todas as bordas da regio. Distorce se necessrio.
hidden: se a mdia for maior ou menor que a regio, a rea
restante preenchida com a cor de fundo.
meet: redimensiona o contedo do objeto de mdia
mantendo suas propores at atingir uma das bordas da
regio. Espaos vazios so preenchidos com a cor de
fundo.
meetBest: o objeto redimensionado at o dobro do seu
tamanho original.
slice: redimensiona o contedo do objeto de mdia
mantendo suas propores at que toda a regio seja
preenchida. Corta partes do objeto se necessrio.

Parmetros de Descritores
Parmetros reservados para mdia textual:
scroll: barras de rolagem. Valores: none, horizontal, vertical,
both, automatic.
style: folh de estilo;
fontColor: cor da fonte
fontFamily: famlia da fonte
fontSize: tamanho da fonte em pontos.
fontVariant: variao de fonte. Valores: normal ou small-caps
(letras maisculas pequenas)
fontWeight: valores normal ou bold (negrito)

Exemplo 1: parmetros de descritor

udio

Exemplo 2: parmetros de descritor

- udio

Exemplo 1: parmetros de descritor

imagem

Exemplo 2: parmetros de descritor

imagem

Exemplo 3: parmetros de descritor

imagem

Exemplo 4: parmetros de descritor

imagem

Exemplo 5: parmetros de descritor

imagem

Media mdia
Uma mdia sempre uma imagem, um vdeo, um html, etc.
Um objeto de mdia tambm pode ser chamado de n de
mdia.
Atributos:
id: identificador nico.
src: endereo do local onde a mdia est armazenada
(arquivos locais, remotos ou streaming)
type: tipo MIME da mdia
descriptor: identificador do descritor (descriptor)
refer: referncia a um outro n de mdia (reso)
instance: usado apenas quando refer utilizado. Valores:
new, instSame, gradSame.

Media mdia
MIMETYPES: cadeia de caracteres que define a classe da mdia
e o tipo de codificao. Exemplos:
udio:
audio/mpeg: .mp1, .mp2, .mp3
Vdeo:
video/mpeg: .mp2, .mpeg, .mpg, .mpe
Imagem:
image/png: .png
Texto:
text/html: .htm, .html, .xhtml

Context contextos

Um contexto agrupa objetos. O objeto <body> de toda aplicao

NCL um contexto especial. Um contexto pode aninhar outros
contextos. Estrutura bsica:
<context id=contextoNome>
<!-- portas -- >
<!-- mdias, contextos, etc -->
<!-- elos -->
......
</context>
Atributos:
id: identificador do contexto
refer: referencia a outro contexto

Port portas
Uma porta um ponto de interface de um contexto que
oferece acesso externo ao contedo objetos internos do
contexto.

Port portas
Em todo documento NCL costuma haver ao menos uma porta.
Mais portas podem ser criadas, caso queira iniciar mais do que
uma mdia no incio da exibio de um contexto.

Iniciando e terminando dois objetos de mdia

simultaneamente

Links elos e Connectors conectores

Os elos, ou links, associam ns atravs de conectores, que
definem a semntica da associao entre os ns. Define o
relacionamento de sincronismo propriamento dito entre
interfaces de objetos de uma aplicao NCL. Seu
comportamento definido pelo conector que o elo utiliza.
No exemplo do slide anterior, o link elo 1 inicia duas mdias
onBegin e o link elo2 termina onEnd duas mdias, por
meio do uso de conectores.
Um elo associa objetos atravs de um conector. O conector
aquele que define a ao: iniciar, parar, repetir, ir para outro
ponto do vdeo, setar variveis, etc.
Uma condio sempre deve ser satisfeita para que aes
possam ser disparadas.

Links elos e Connectors conectores

Podemos ler os elos, links, do exemplo, da seguinte forma: Quando
iniciar a apresentao do vdeo principal, inicie tambm a
apresentao da imagem principal. Quando terminar a apresentao
do vdeo principal, termine a apresentao tambm da imagem
principal.
Atributos de link:
id: identificao
xconnector: conector, da base de conectores j existente, que
ser utilizado
linkParam: parmetros do ele como pares atributo, valor
bind: componentes envolvidos no elo e as regras de cada um,
conforme o connector

Iniciando uma mdia quando outra

termina

Exibindo um vdeo em loop at a

interveno do usurio

Redimensionando uma regio