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