Este documento fornece instruções sobre como desenvolver aplicações interativas para TV usando a linguagem NCL. Apresenta as ferramentas necessárias, como o Eclipse IDE e plugins, e conceitos básicos da estrutura NCL como regiões, descritores, mídia e contextos. Também explica como tocar vídeos e imagens, definir parâmetros e vincular objetos de mídia.

1. 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

2. 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/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/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/)

3. 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

4. Estrutura básica de um
documento NCL

5. Estrutura básica de um
documento NCL

6. 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.

7. Regiões - region

8. Região – region
rgTVCentro
rgTV

9. 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

10. Region – região
left width right
top
height
Região filha: zindex=2
bottom Região pai : zindex=1

11. Region – região

12. Region – região
rgTV
rgMenu1 zindex=1
rgMenu2
rgMenu3
rgMenu4
rgMenu

13. Region – região

14. Region – região
rgTV
zindex=1
rgMenu1
rgMenu2
rgMenu3
rgMenu4
rgMenu

15. Tocando um vídeo

16. 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”/>

17. Reproduzindo uma Imagem sobre
um vídeo

18. 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”>

19. 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

20. 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 %.

21. 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.

22. 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)

23. Exemplo 1: parâmetros de descritor
– áudio

24. Exemplo 2: parâmetros de descritor
- áudio

25. Exemplo 1: parâmetros de descritor
– imagem

26. Exemplo 2: parâmetros de descritor
– imagem

27. Exemplo 3: parâmetros de descritor
– imagem

28. Exemplo 4: parâmetros de descritor
– imagem

29. Exemplo 5: parâmetros de descritor
– imagem

30. 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.

31. 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

32. 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

33. Port – portas
• Uma porta é um ponto de interface de um contexto que
oferece acesso externo ao conteúdo – objetos internos – do
contexto.

34. 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.

35. Iniciando e terminando dois objetos de mídia
simultaneamente

36. 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.

37. 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

38. Iniciando uma mídia quando outra
termina

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

40. Redimensionando uma região