Desenvolvendo aplicações interativas para TVD com NCL Profª Ms. Elaine Cecília Gatto

02/09/2011 - 14:00 as 18:00

1ª JEAUSC – Jornada de Engenharias, Arquitetura e Urbanismo

Ferramentas necessárias

• 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/)

Introdução ao NCL

• NCL – Nested Context Language: linguagem de contexto aninhados.

• Linguagem de marcação tipo XHTML

• Nasceu do NCM – Nested Context Model: Modelo de contextos aninhados. Utiliza conceitos de nós e elos aplicados em documentos hipermídia.

• Desenvolvido na PUC-RIO pelo laboratório TELEMIDIA

Estrutura básica de um documento NCL

Estrutura básica de um documento NCL

Regiões - region

• É o local que você define para exibição das suas mídias.

• Primeiro você deve definir a região da tela de TV.

• Em seguida, você deve definir as regiões de cada objeto de mídia (vídeo, figura, legenda, etc)

• Layout (IHC – Interface Humano Computador)

• É importante, antes de programar, fazer a prototipação das telas que sua aplicação terá.

• O trecho de código a seguir, mostra como definir duas regiões, uma para dispositivos móveis e outra para TV.

Regiões - region

Região – region

rgTV

rgTVCentro

Region – região

• Atributos:

• id: identificador da região

• device: classe de dispositivo (tv fixa, portátil ou móvel)

• 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: número entre 0 e 25 que define a camada da região no eixo z

• title: título da região

Region – região

left width right

top

height

bottom Região pai : zindex=1

Região filha: zindex=2

Region – região

Region – região

rgTV zindex=1

rgMenu

rgMenu1

rgMenu2

rgMenu3

rgMenu4

Region – região

Region – região

rgTV zindex=1

rgMenu

rgMenu1

rgMenu2

rgMenu3

rgMenu4

Tocando um vídeo

Descritores • São responsáveis pela configuração de como os objetos de mídia

deverão ser apresentados.

• Atributos:

• id (identificação): identificador do descritor

• region (região): identificador da região a ser utilizada por esta mídia

• explicitDur (duração explícita): define a duração do objeto de mídia em segundos

• freeze (congelado): identifica o que acontece ao final da apresentação do objeto de mídia associado ao descritor (true/false)

• player (tocador): identifica a ferramenta de apresentação a ser utilizada para exibir o objeto de mídia.

• EXEMPLO: <descriptor id=“dTeste” region=“rTeste” explicitDur=“3s” freeze=“true”/>

Reproduzindo uma Imagem sobre um vídeo

Parâmetros de Descritores

• Existe um outro elemento opcional que está contido em descritor:

• <descriptor Param>: define um parâmetro do descritor como um par de propriedade e valor.

• Cada descritor pode conter diversos elementos <descriptor Param>:

• <descriptor Param name=“nomeParam” value=“valorParam”>

Parâmetros de Descritores

• Parâmetros reservados para áudio:

• soundLevel: “0” = mute; “0,5” ou “50%” = metade; “1” ou “100%”= máximo.

• 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%

• Parâmetros reservados para mídia visual:

• top

• left

• bottom

• right

• width

• height

Parâmetros de Descritores

• Parâmetros reservados para mídia visual:

• location: posição do objeto de mídia em left, top. Valores: % ou pixels.

• size: dimensões do objeto de mídia em width e height. Valores: % ou pixels.

• bounds: posição e dimensões do objeto de mídia em left, top, width e height. Valores: % ou pixels.

• zIndex: posição da região no eixo z (sobreposições de regiões).

• 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 tranparência. Valores entre 0 e 1 ou %.

Parâmetros de Descritores

• Parâmetros reservados para mídia visual:

• fit: efeitos conforme abaixo

• fill: redimensiona o conteúdo do objeto de mídia para que toque todas as bordas da região. Distorce se necessário.

• hidden: se a mídia for maior ou menor que a região, a área restante é preenchida com a cor de fundo.

• meet: redimensiona o conteúdo do objeto de mídia mantendo suas proporções até atingir uma das bordas da região. Espaços vazios são preenchidos com a cor de fundo.

• meetBest: o objeto é redimensionado até o dobro do seu tamanho original.

• slice: redimensiona o conteúdo do objeto de mídia mantendo suas proporções até que toda a região seja preenchida. Corta partes do objeto se necessário.

Parâmetros de Descritores

• Parâmetros reservados para mídia textual:

• scroll: barras de rolagem. Valores: none, horizontal, vertical, both, automatic.

• style: folh de estilo;

• fontColor: cor da fonte

• fontFamily: família da fonte

• fontSize: tamanho da fonte em pontos.

• fontVariant: variação de fonte. Valores: normal ou small-caps (letras maiúsculas pequenas)

• fontWeight: valores normal ou bold (negrito)

Exemplo 1: parâmetros de descritor – áudio

Exemplo 2: parâmetros de descritor - áudio

Exemplo 1: parâmetros de descritor – imagem

Exemplo 2: parâmetros de descritor – imagem

Exemplo 3: parâmetros de descritor – imagem

Exemplo 4: parâmetros de descritor – imagem

Exemplo 5: parâmetros de descritor – imagem

Media – mídia

• Uma mídia é sempre uma imagem, um vídeo, um html, etc. Um objeto de mídia também pode ser chamado de nó de mídia.

• Atributos:

• id: identificador único.

• src: endereço do local onde a mídia está armazenada (arquivos locais, remotos ou streaming)

• type: tipo MIME da mídia

• descriptor: identificador do descritor (descriptor)

• refer: referência a um outro nó de mídia (reúso)

• instance: usado apenas quando refer é utilizado. Valores: new, instSame, gradSame.

Media – mídia

• MIMETYPES: cadeia de caracteres que define a classe da mídia e o tipo de codificação. Exemplos:

• Áudio:

• audio/mpeg: .mp1, .mp2, .mp3

• Vídeo:

• 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 aplicação NCL é um contexto especial. Um contexto pode aninhar outros contextos. Estrutura básica:

<context id=“contextoNome”>

<!-- portas -- >

<!-- mídias, 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 conteúdo – 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 mídia no início da exibição de um contexto.

Iniciando e terminando dois objetos de mídia simultaneamente

Links – elos e Connectors – conectores

• Os elos, ou links, associam nós através de conectores, que definem a semântica da associação entre os nós. Define o relacionamento de sincronismo propriamento dito entre interfaces de objetos de uma aplicação NCL. Seu comportamento é definido pelo conector que o elo utiliza.

• No exemplo do slide anterior, o link elo 1 inicia duas mídias – onBegin – e o link elo2 termina – onEnd – duas mídias, por meio do uso de conectores.

• Um elo associa objetos através de um conector. O conector é aquele que define a ação: iniciar, parar, repetir, ir para outro ponto do vídeo, setar variáveis, etc.

• Uma condição sempre deve ser satisfeita para que ações possam ser disparadas.

Links – elos e Connectors – conectores

• Podemos ler os elos, links, do exemplo, da seguinte forma: “Quando iniciar a apresentação do vídeo principal, inicie também a apresentação da imagem principal. Quando terminar a apresentação do vídeo principal, termine a apresentação também da imagem principal”.

• Atributos de link:

• id: identificação

• xconnector: conector, da base de conectores já existente, que será utilizado

• linkParam: parâmetros do ele como pares atributo, valor

• bind: componentes envolvidos no elo e as regras de cada um, conforme o connector

Iniciando uma mídia quando outra termina

Exibindo um vídeo em loop até a intervenção do usuário

Redimensionando uma região