Upload
marcus-rocha
View
213
Download
0
Embed Size (px)
DESCRIPTION
Desenvolvendo aplicações interativas para TVD com NCL
Citation preview
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-cc-developers-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/overview.html)
Ginga-NCL Virtual Set-top Box (http://www.softwarepublico.gov.br/dotlrn/clubs/ginga/gingancl/xowiki/gingancl_vm -http://www.softwarepublico.gov.br/dotlrn/clubs/ginga/gingancl/one-community?page_num=0 )
SSH Secure Shell Client (http://www.baixaki.com.br/download/ssh-secure-shell.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
rgTV
rgTVCentro
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 right
top
height
bottom Regio pai : zindex=1
Regio filha: zindex=2
Region regio
Region regio
rgTV zindex=1
rgMenu
rgMenu1
rgMenu2
rgMenu3
rgMenu4
Region regio
Region regio
rgTV zindex=1
rgMenu
rgMenu1
rgMenu2
rgMenu3
rgMenu4
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:
Reproduzindo uma Imagem sobre um vdeo
Parmetros de Descritores
Existe um outro elemento opcional que est contido em descritor:
: define um parmetro do descritor como um par de propriedade e valor.
Cada descritor pode conter diversos elementos :
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 de toda aplicao NCL um contexto especial. Um contexto pode aninhar outros contextos. Estrutura bsica:
......
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