desenvolvendo aplicações interativas para tvd com ncl
Post on 10-Jul-2015
1.461 Views
Preview:
TRANSCRIPT
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
top related