ESTRATÉGIA DE DESENVOLVIMENTO DE SOFTWARE INTERATIVO COM GINGA-NCL PARA TV DIGITAL

(1)

ESTRATÉGIA DE DESENVOLVIMENTO DE SOFTWARE

INTERATIVO COM GINGA-NCL PARA TV DIGITAL

João Vitor Carvalho de Melo – jvcmelo@aluno.ufabc.edu.br Universidade Federal do ABC

Avenida dos Estados, 5001 - Bairro Bangú 09210-580 – Santo André – São Paulo

Iann Vicari Mascarenhas – iann.vicari@aluno.ufabc.edu.br Universidade Federal do ABC

Geiza Caruline Costa – geiza.costa@ufabc.edu.br Universidade Federal do ABC

Celso Setsuo Kurashima – celso.kurashima@ufabc.edu.br Universidade Federal do ABC

Resumo: Com o início da operação da TV Digital aberta no Brasil e a disseminação do

sistema em todo território nacional, a criação de conteúdo interativo vem crescendo gradativamente pela utilização em diversas emissoras brasileiras da TV aberta. O objetivo deste trabalho é apresentar de uma maneira simples e didática a criação de um aplicativo de TV digital baseado na linguagem Ginga-NCL. Espera-se que um desenvolvedor iniciante ou interessado em contato com este guia tenha facilidade para compreender e criar seus próprios conteúdos para TV digital. Este artigo visa contribuir com o aumento de desenvolvedores de aplicativos interativos, facilitando a compreensão sobre o conteúdo interativo e ampliando o estudo sobre aplicativos para TV.

(2)

1. INTRODUÇÃO

O Sistema Brasileiro de TV Digital (SBTVD), criado em função do decreto nº 5.820 no ano de 2006, estabeleceu as diretrizes para a migração do sistema analógico para o novo sistema digital da televisão aberta terrestre. Em 2015, a transmissão do sinal digital já é uma realidade, segundo o Ministério das Comunicações (MINISTÉRIO DAS COMUNICAÇÕES, 2014), em 2018 haverá a interrupção total das transmissões do sinal analógico.

Além da melhoria da qualidade de áudio e vídeo, o SBTVD permite a interatividade através de aplicativos disponibilizados pela emissora juntamente com a programação. Isso permite que novas oportunidades de negócio sejam exploradas, tanto no âmbito de entretenimento, educação ou comercial, como para fins de utilidade pública.

O objetivo deste artigo é propor uma estratégia para o desenvolvimento de software aplicativo em linguagem NCL (Nested Context Language) que são executados no middleware Ginga – responsável pela apresentação dos programas interativos no SBTVD.

Diferentemente das linguagens de programação imperativas como as orientadas a objetos ou procedurais, a linguagem NCL é declarativa e provê suporte para a especificação de objetos de mídias com sincronização espaço-temporal.

O ambiente de desenvolvimento de aplicações interativas para a TV digital também é diferenciado uma vez que as aplicações em teste devem ser executadas no Ginga – em máquina virtual ou e um programa equivalente para Windows ou outro sistema operacional. 2. METODOLOGIA

Nesta seção será apresentada a metodologia abordada para o desenvolvimento de um software aplicativo baseado em Ginga-NCL, destacando os componentes principais de um documento NCL.

Para o desenvolvimento de um software aplicativo baseado em Ginga-NCL em um computador Windows, foi utilizada a ferramenta SciTe Text Editor. Esta é uma ferramenta open source muito útil para construir e executar programas facilmente (SCITE TEXT EDITOR, 2015). Ela não é a única ferramenta disponível para este fim, podem ser utilizadas outras, como o Notepad++.

O software aplicativo pode ser testado em qualquer software com suporte a aplicativos em linguagem Ginga-NCL que emule a TV Digital no computador. Existem alguns softwares gratuitos, como por exemplo o GingaForWindows (GINGA NCL, 2015). Há também o software proprietário Astrobox, que possui licença gratuita para fins de pesquisa.

A ferramenta AstroBox é proprietária, desenvolvida pela empresa TOTVS (ASTRODEVNET, 2015). Esta ferramenta desempenha um papel fundamental para emular, executar e testar aplicativos Ginga-NCL em um computador. Ela é executada em ambiente Linux por meio de uma máquina virtual. Neste trabalho optou-se por utilizar o software Astrobox, em virtude da emulação da TV Digital no computador ser mais precisa com esta ferramenta.

A Figura 1 a seguir exibe em contexto geral como funciona o teste de um aplicativo em Ginga-NCL em um computador. O código é escrito em linguagem Ginga-NCL no Windows, em algum editor de texto XML. Este código é então transferido para a máquina virtual, por algum software de transferência de arquivos. Em Seguida, na máquina virtual, executa-se o software Astrobox e o código em Ginga-NCL. O software aplicativo será exibido na tela do computador e a navegação se dará pelo teclado.

(3)

Figura 1 – Processo de emulação da TV Digital no computador. 3. SOFTWARE

Esta seção abordará uma breve explicação e estratégias das etapas do desenvolvimento de um software aplicativo em Ginga-NCL em um contexto geral.

3.1 Desenvolvimento de um software aplicativo em Ginga-NCL

Um software aplicativo em Ginga-NCL é composto de um documento principal chamado “main”. Neste documento são definidas as características gerais de funcionamento do aplicativo. Este documento é composto por um cabeçalho, que identifica o documento. Três outros documentos externos em NCL são importados ao documento “main”, que definem características mais específicas do aplicativo. Estes três outros documentos são: Regiões, Descritores e Conectores. A Figura 2 a seguir exibe a estrutura básica de um documento em NCL.

Figura 2 – Estrutura básica do documento principal em NCL Etapas de criação do documento em Ginga-NCL

Para escrever o documento “main” siga as etapas enumeradas a seguir:

1- Abra o SciTE Text Editor. A primeira etapa é escrever o cabeçalho do arquivo do arquivo, composto geralmente por duas linhas. A primeira identifica a versão do documento e a segunda é uma referência ao tipo de documento NCL. Na Figura 3 a seguir, o tipo de documento é “main”. Adicionalmente, pode-se adicionar comentários sobre a criação do documento utilizando a sintaxe <! -- comentários -->.

(4)

Figura 3 – Cabeçalho do arquivo

2- Escreva o cabeçalho do documento. O cabeçalho é composto de três partes: regiões, descritores e conectores. Estas três partes serão escritas em documentos externos diferentes e em seguida importadas em seguida ao documento “main”. Além de organizar melhor o código principal, minimiza possíveis erros e conflitos que podem acontecer no momento do teste do aplicativo.

O documento regiões especifica uma área na tela, onde será exibida uma determinada mídia ou contexto (CARVALHO et al., 2009).

3- Escreva o documento regiões, abrindo concomitamente ao documento “main” um novo documento no SciTE Text Editor. Inicie escrevendo o cabeçalho do arquivo, da mesma maneira que fizemos para o documento principal. Na segunda linha identifique o tipo de documento, neste caso são “regiões”. A Figura 4 a seguir ilustra um exemplo de duas regiões criadas. As regiões criadas estarão compreendidas dentro da base de regiões, identificada pelo elemento <regionBase>. Para exemplificar, criamos a região de fundo, ou seja, a área em que a programação da emissora estará sendo exibida e a região da área utilizada pelo aplicativo. Toda região possui um identificador único representado pelo atributo id (CARVALHO, et al., 2009). Em cada região é possível configurar os parâmetros de largura, altura e zIndex, que corresponde a qual camada estará sendo exibido determinada região, mais externa ou mais interna. Deve-se criar e configurar uma região para cada botão ou mídia que o aplicativo contiver.

Figura 4 – Estrutura do documento Regiões

Após escrever e configurar os parâmetros de todas as regiões do aplicativo, salve o arquivo como regioes.ncl.

4- Escreva o documento descritores. Os descritores definem como os elementos serão apresentados na tela [apostila]. Para isso, um descritor deve indicar a região à qual está relacionado e definir as especificidades de sua apresentação. Um descritor é definido pela sintaxe <descriptorBase> . Dentro desta sintaxe são definidos os atributos, que são as propriedades dos elementos de mídia. Os atributos de mídia que podem ser utilizados podem ser encontrados em (NCL HANDBOOK, 2015). Neste exemplo, o atributo utilizado é o id,

(5)

que identifica unicamente um elemento dentro de um documento, ou seja, para cada região criada ela é identificada como única dentro do código.

5- Abra um novo documento no SciTE Text Editor e inicie escrevendo o cabeçalho do arquivo, da mesma maneira que fizemos para o documento principal. Na segunda linha identifique o documento como “descritores”. Em seguida vamos importar a região que criamos anteriormente utilizando a sintaxe <importBase alias = “reg” documentURI=”regioes.ncl” />. Em seguida escrevemos a base de descritores e a qual região ele pertence, conforme ilustra a Figura 5 abaixo. Fazemos isso para todas as regiões dos elementos do aplicativo, que foram criados no documento regiões. Após escrever e configurar os parâmetros de todas os descritores do aplicativo, salve o arquivo como descritores.ncl.

Figura 5 – Criação do documento descritores

6- Crie documento “conectores”. Os conectores definem relações genéricas que serão utilizadas pelos elementos de um documento NCL (CARVALHO et al., 2009). Eles definem como os elos são ativados e o que eles disparam. Através de conectores, é possível fazer com que a exibição de uma mídia comece simultaneamente a outra, bem como termine simultaneamente a outra e diversas outras ações [http://gingarn.wikidot.com/tutorialncl#toc2]. Um conector é definido numa base de conectores, utilizando o elemento <connectorBase> e em seguida o elemento <causalConnector> (NCL HANDBOOK, 2015). Este elemento define uma relação de causa e efeito. A Figura 6 a seguir ilustra um exemplo de um conector criado. A condição é dada ao pelo papel “onBegin”, indicando que a condição espera pelo início da apresentação de um elemento, enquanto a ação é dada pelo papel “Setar”, indicando que a apresentação de um elemento será iniciada. Para configurar todos os tipos de conectores consulte o documento (NCL HANDBOOK, 2015). Após escrever e configurar os parâmetros de todas os conectores do aplicativo, salve o arquivo como conectores.ncl.

(6)

Figura 6 – Estrutura básica de um documento Conectores.

Estes três documentos externos criados serão importado ao documento principal “main”, conforme ilustra a Figura 7 abaixo:

Figura 7 – Documentos externos: regiões, descritores e conectores importados ao documento main

7- Escreva o corpo do documento NCL. O corpo do documento NCL é responsável pela definição dos elementos e a sincronização entre eles e pela definição de elos e nós. Um elo é utilizado para identificar os elementos participantes de uma relação [apostial].

No exemplo da Figura 8 abaixo, o corpo inicia-se com a criação de uma porta de interatividade <port id="portaInteratividade" component="interatividade" />, ela dará início a interatividade do aplicativo quando este for executado exibindo na tela o ícone de interatividade . Na sequência escrevemos os contextos de mídia. No exemplo dado, as mídias iniciadas são o botão de interatividade e a programação da emissora como fundo.

Em elos, definimos a ação dos botões do controle remoto, como por exemplo, o botão vermelho do controle ou a tecla F1 seleciona o ícone de interatividade para acessar a aplicação. Um elo é definido pelo elemento <link>. Este elemento define a relação sendo utilizada através do seu atributo xconnector. O elo do exemplo, está relacionado as ações que irão acontecer ao selecionar o botão vermelho. A sintaxe <bind> cria ligação entre os elementos e os papéis [apostila]. No exemplo, utilizamos o atributo <bind role> que identifica o papel da ação, ou seja, o que acontecerá ao selecionarmos a tecla vermelha do controle remoto, que é acessar a aplicação. O atributo <bind component> identifica o elemento participante da ação. No exemplo, ao selecionarmos o botão vermelho, o ícone da interatividade para de ser executado e o menu da aplicação é executado e apresentado na tela, juntamente com a programação da TV.

(7)

Figura 8 – Corpo do documento NCL

Quando o elo do exemplo anterior for ativado, ele buscará no código o comando que exiba na tela o botão de interatividade e a apresentação do menu principal. Para isto, deve-se criar o elemento <contexto id>. Um contexto é um nó de composição [apostila], ele inicia todos os seus elementos filhos quando ele é iniciado. Quando o elo for executado, ele procurará pelo contexto relacionado ao menu principal, quando este for solicitado. No exemplo da Figura 9 abaixo, quando o contexto para o menu for solicitado, uma porta identificará cada componente do menu. Um cabeçalho para o aplicativo foi criado como exemplo de componente do menu. Uma porta identificará este cabeçalho e este será exibido na tela por meio do elemento <media id="cabecalho" type="image/png" src="imagens/cabecalho.png" descriptor="des#descritorCabecalho" />. Este elemento de mídia é responsável por chamar a imagem do arquivo e apresenta-la na tela, quando este for solicitado.

Figura 9 – Criação de um contexto para apresentação de componentes do menu

Para cada componente do menu principal é necessário criar uma porta, que identifica unicamente este componente e uma mídia, que se relacione a ele por meio de uma imagem, que será exibida na tela, no momento em que o menu for solicitado pelo usuário. As imagens que serão desenhadas para cada componente do menu foram feitas em formato .png e salvas em uma subpasta “imagens” na pasta do software aplicativo. Na Figura 10 seguir, segue um exemplo de diretórios que foram criados e como eles devem estar arranjados para que a aplicação possa ser executada em um emulador de TV Digital.

(8)

O documento “main” é finalizado com a criação dos contextos, como no exemplo anterior. Com estas dicas é possível construir um software aplicativo simples para execução em um emulador de TV Digital no computador Windows ou Linux.

4. RESULTADOS E DISCUSSÃO

Nesta seção apresentaremos o software aplicativo desenvolvido em Ginga-NCL sendo executado na ferramenta Astrobox.

A seguir a Figura 11 exibe um software aplicativo desenvolvido utilizando estas estratégias. O software aplicativo com objetivo instrutivo chamado “Primeiros Socorros”, foi executado no software Astrobox. A Figura 11 a seguir é uma imagem feita do software Astrobox executando o software aplicativo.

Figura 11 – Software aplicativo sendo executado no software Astrobox

Como exemplo de apresentação do software, escolheu-se uma imagem de um programa da TV Digital aberta para inserção dos elementos do aplicativo. A Figura 12-a a seguir mostra o ícone de interatividade iniciado na tela, o usuário aciona o botão vermelho do controle remoto. A Figura 12-b demonstra como o aplicativo será exibido na tela da TV. O menu é exibido na tela e o usuário pode navegar por entre os botões disponíveis e usufruir do conteúdo.

a) b) Figura 12 – Exemplo da aplicação rodando na TV Digital

(9)

5. CONSIDERAÇÕES FINAIS

Este artigo apresentou de maneira didática os procedimentos para a criação de um software aplicativo para plataforma Ginga-NCL. Mesmo que de uma maneira simples, este trabalho serve como base e motivação para que outros trabalhos possam ser desenvolvidos. Demonstrou-se que há pouca dificuldade em programar em Ginga-NCL, devido as linhas de código serem escritas no formato XML com o uso de comandos tipo “tags”. Há uma infinidade de possibilidades de criação de softwares aplicativos em Ginga-NCL, com menus, botões e mídias diferentes que podem ser explorados pelo desenvolvedor, para aplicativos de TV Digital aberta. Como trabalho futuro, planeja-se desenvolver aplicativos para a linguagem Lua que podem ser chamados de dentro do Ginga-NCL e possuem maiores possibilidades e liberdade quanto a programação voltada para a interatividade com o usuário.

Agradecimentos

Os autores agradecem ao Sr. Fábio Cardoso e ao Sr. Rafael Pedroso, da TV-UNESP, Bauru. Este trabalho foi financiado pelo CNPq , Projeto Global-ITV, Processo: 490088/2013-9.

6. REFERÊNCIAS BIBLIOGRÁFICAS

ASTRODEVNET. Astrobox. Disponível em <https://www.astrodevnet.com.br/Astro DevNet/home.html> Acesso em: 20. Abril. 2015

CARVALHO, Rafael; SANTOS, Joel; DAMASCENO, Jean. SILVA, Julia; SAADE, Débora. Introdução às linguagens NCL e Lua: Desenvolvendo aplicações Interativas para TV Digital. Anais: Semana das Engenharias 2009.Rio de Janeiro: UFF, 2009.

GINGA NCL. Ginga4Windows. Disponível em < http://www.gingancl.org.br/ en/ferramentas > Acesso em 20.Abril.2015

MINISTÉRIO DAS COMUNICAÇÕES. Disponível em <http://www.brasil.gov.br/infra estrutura/2014/12/desligamento-do-sinal--analogico-de-tv-sera-avisado-com-antecedencia>. Acesso em 21 abr. 2015

NCL HANDBOOK. Descriptor. Disponível em <http://handbook.ncl.org.br/doku.php? id=descriptor> Acesso em 20.Abril.2015

SCITE TEXT EDITOR. A free source code editor for Win32 and X. Disponível em <http://www.scintilla.org/SciTE.html> Acesso em 20.Abril.2015

(10)

STRATEGY FOR DEVELOPMENT OF INTERACTIVE APPLICATION SOFTWARE WITH GINGA-NCL FOR DIGITAL TV

Abstract: With the deployment of Digital TV system in Brazil nowadays it covers all national

territory. As part of this process, software applications that run on TV screen are being transmitted by TV broadcasters. These applications include user interaction content, which greatly attract attention from most of viewers. The goal of this paper is to present a simple and didactic procedure to create a TV application based on Ginga-NCL platform. It is expected that any beginner developer in contact with this guide will have more facility to understand and create his/her own interactive application. This tutorial aims to expand developers of interactive applications for terrestrial digital TV.