Grupo Ginga Goiás

Em breve o Grupo Ginga Goias disponibilizará uma nova aplicação. Trata-se da aplicação O Pintor.

A aplicação O Pintor tem como tema principal o pintor grego da Renascença, El Greco.  Através da aplicação, o usuário poderá acesssar e navegar em páginas HTML, com informações sobre o pintor e suas obras. O usuário poderá também fazer a simulação de compras pela TV, acessando um formulário html para efetuar compras de obras do pintor. Na aplicação é inserida também efeitos de transição e transparência através da linguagem NCL.

Abaixo segue 2 screenshots da aplicação:

Aplicação O Pintor - Grupo Ginga Goias

O Grupo Ginga Goias disponibilizará em breve a aplicação T4-Salvation V2.1.

Nesta versão fizemos uma pequena modificação em relação à versão anterior. Adicionamos uma nova funcionalidade que é a Sincronização de um Objeto de Mídia com Retardo.

Adicionamos um novo objeto de mídia (telainicio.jpg) o qual será  executado quando nosso documento NCL for iniciado (ou seja, nossa porta de entrada). Sincronizamos este objeto de mídia com outros 2 objetos de mídia, o vídeo inicial da aplicação (t4-salvation.mpeg) e o botao interativo (botaointeratividade.jpg) de forma que a execução do vídeo e do botão interativo ocorram com um retardo de 5 segundos em relação ao objeto de mídia telainicio.jpg.

Nós devemos definir o retardo no conector, ou seja, para que possamos definir um período de tempo em segundos que deve transcorrer após a ativação do elo para que aquela ação seja executada.

Para definir o retardo, nos definimos em nosso conector o atributo delay do elemento de linguagem <simpleAction>. Abaixo segue a definição do conector onBeginStartDelay3, o qual possui um retardo fixo de 3 segundos:

<connectorBase>
<causalConnector id=” onBeginStartDelay3″>
<simpleCondition role=”onBegin”/>
<simpleAction role=”start” delay=”3s”/>
</causalConnector>
</connectorBase>

Na aplicação T4-Salvation V2.1, nós utilizamos um retardo de 5 segundos, portanto o conector acima não seria útil para nós, e além do mais, é bem mais interessante que possamos especificar o valor de retardo diretamento no elo e não determinado pelo conector, para que também o conector possa ser reaproveitado por mais elos. Para isso, a NCL nos permite definir um parâmetro de conector (<connectorParam>). Definimos então, um conector com retardo parametrizado:

<connectorBase>
<causalConnector id=” onBeginStartDelay”>
<connectorParam name=”vDelay”/>
<simpleCondition role=”onBegin”/>
<simpleAction role=”start” delay=”$vDelay/>
</causalConnector>
</connectorBase>

Agora sim podemos definir em nosso elo qual será o retardo que gostaríamos de ter para que determinada ação seje executada. Entretando ainda há um problema para nossa aplicação em especial. Queremos que o retardo ocorra a 5 segundos do início da aplicação, e que 2 objetos (vídeo e o botão interativo) de mídia sejam iniciados a partir de 5 segundos. Pelo conector acima, podemos iniciar apenas 1 objeto de mídia. Devemos então definir um conector que permita iniciar não apenas um, mas 2 objetos de mídia simultâneamente. Para isso definimos o conector onBeginStart2Delay, o qual é listado abaixo:

<connectorBase>
<causalConnector id=” onBeginStart2Delay”>
<connectorParam name=”vDelay”/>
<simpleCondition role=”onBegin”/>
<simpleAction role=”start”  max=”2″ qualifier=”par” delay=”$vDelay/>
</causalConnector>
</connectorBase>

Note que para nosso caso em especial adicionamos dois novos atributos em nosso elemento <simpleAction>, max e qualifier.

max: cardinalidade máxima do papel, ou seja, o número máximo de interfaces de objetos que devem ser associadas a esse papel no elo que o utilize. Caso não haja limite no número máximo de interfaces que podem ser associadas ao papel, deve assumir o valor unbounded. O default é 1.
qualifier: define se todas as condições devem ser satisfeitas por todas as interfaces ligadas ao papel (valor “and”)  ou se basta que qualquer uma delas seja satisfeita (valor “or”). Esse atributo só tem efeito quando a cardinalidade máxima do papel é maior do que 1.

Como em nossa aplicação devemos associar duas interfaces ao papel, definimos max=”2″.

Nosso elo então, ficou assim:

<link xconnector=”onBeginStart2Delay” id=”comecavideointerativo”>
<linkParam name=”vDelay” value=”5s”/>
<bind role=”onBegin” component=”telainicio”/>
<bind role=”start” component=”video”/>
<bind role=”start” component=”botaointeratividade”/>
</link>

Para informar o valor desejado de retardo, devemos utilizar o elemento <linkParam>, especificando os atributos name e value.

Nossa tela inicial da aplicação é mostrada abaixo, após 5 segundos, os objetos de mídia vídeo e botãointeratividade são iniciados:

Tela Inicial da Aplicação T4-Salvation V2.1 - Com retardo de 5 segundos

Após o Retardo de 5 segundos, objetos de mídia botãointeratividade e vídeo são iniciados

Nos próximos dias estaremos disponibilizando a atualização do código com essa nova funcionalidade.

Por: Daniel Alves da Cruz
danielcruz7333.wordpress.com

Acesse:
www.grupogingagoias.com.br
twitter.com/grupogingagoias

Como já sabemos, a NCL é a linguagem base do ambiente declarativo Ginga-NCL, e tem como sua principal característica ser do tipo structure-based, ou seja, a NCL faz uma definição bastante acurada entre o conteúdo e a estrutura de uma aplicação.

Por esta característica, a linguagem NCL não define nenhum tipo de objeto de mídia em si, ao invés disso,  através do elemento de linguagem <media>, ela “junta” os objetos de mídia que serão apresentados na aplicação. Uma aplicação desenvolvida em NCL apenas definirá como os diversos objetos de mídia serão estruturados e relacionados no espaço e tempo.

Sendo assim, podemos ter qualquer tipo de objeto s do tipo imagem (png, jpeg, bmp, gif, …), vídeo (mpeg, mov, avi, rmvb, …), texto (doc, txt, pdf, …) e etc. E o mais interessante, podemos ter objetos de código declarativo (html, smil, ncl, svg, …),  de código imperativo (Lua, xlet, …) dentre outros. Obviamente que quais objetos de mídia são suportados depende dos exibidores de mídia que estão juntos ao formatador NCL (player).

Por esta característica, uma aplicação NCL pode executar outra aplicação NCL definida no seu elemento de linguagem <media>, assim como uma aplicação NCL pode conter objetos de mídia representando outra aplicação NCL, de forma recursiva. O que é muito interessante, tendo em vista que a linguagem NCL dá suporte à exibição de aplicações em múltiplos dispositivos. Um exemplo: uma aplicação NCL (pai) poderia executar uma outra aplicação NCL (filho), a aplicação filho poderia ser a responsável pela interatividade em um dispositivo portátil, sem a necessidade do usuário ter q executar a interatividade no dispositivo pai.

O Grupo Ginga Goiás, explorando esta característica da linguagem NCL, desenvolveu uma aplicação chamada NCN (Ncl Chama Ncl). É uma aplicação bastante simples, onde mostramos um exemplo de uma aplicação NCL (Pai) que executa uma outra aplicação NCL (filho).

A aplicação consiste na execução de um documento Ncl (pai) a qual fornece uma opção ao usuário para executar um outro documento Ncl (filho). Abaixo vemos a figura da aplicação Ncl (pai).

Execução da Aplicação NCL (Pai)

Temos portanto dois documentos ncls, NclPai.ncl e NclFilho.ncl. O documento NclPai.ncl define em sua estrutura o documento NclFilho.ncl e o executa em dado momento. A interatividade propriamente dita da aplicação, ficará a cargo do documento Ncl (filho).

Quando a aplicação é carregada (NclPai.ncl), é dada a opção para o usuário executar o outro documento Ncl (filho) pressionando o botão 1 do controle remoto. Após pressionado, o documento NclFilho.ncl é carregado, e através dele o usuário poderá navegar através dos botões interativos do controle remoto. Veja figura abaixo:

Execução da Aplicação Ncl (filho)

Note que toda a interação da aplicação é feita através do documento NclFilho.ncl.

Carregado o documento responsável pela interação, o usuário poderá então interagir através do controle remoto. Como dito anteriormente, este é um exemplo bem interessante, pois como no desenvolvimento de aplicações para execução em múltiplos dispositivos, será comum o desenvolvedor optar por realizar determinadas interações da aplicação através de outros documentos declarativos, quer serão executados se o usuário realmente quiser ver a interatividade da aplicação.

Voltando à aplicação,  é no documento NclPai.ncl que deverão conter as linhas de código necessárias para executar o documento NclFilho.ncl. No documento NclFilho.ncl não há nada de novo, apenas o desenvolvimento necessário para a interação com o usuário.

No documento NclPai.ncl é definido as seguintes linhas dentro do elemento <head>:

<importedDocumentBase>
<importNCL documentURI=”NclFilho.ncl” alias=”documentoNclFilho”/>
</importedDocumentBase>

Aqui, apenas importamos o documento NclFilho.ncl e demos um alias a ele através do elemento <importedDocumentBase>.

Dentro do elemento <body> devemos fazer o reuso do documento NclFilho.ncl como um novo contexto do documento NclPai.ncl.

<context id=”docNclFilho” refer=”documentoNclFilho#ncl2″/>

obs.: ncl2 é o id do documento NclFilho.ncl

Pronto, basta agora eu utilizar um conector para fazer um elo startando o docNclFilho.

<link xconnector=”connBase#onKeySelectionStartNStopN” id=”iniciaDocumentoNclFilho”>
<bind role=”onSelection” component=”botaoinicio”>
<bindParam name=”keyCode” value=”1″/>
</bind>
<bind role=”start” component=”docNclFilho”/>
<bind role=”stop” component=”fundoPai”/>
<bind role=”stop” component=”inicio”/>
<bind role=”stop” component=”botaoinicio”/>
</link>

O código desta aplicação está disponível para download em nosso portal. Abaixo segue algumas imagens da aplicação.

por: Daniel Alves da Cruz

danielcruz733.wordpress.com

Botão Vermelho - Menu para Escolha de Vídeos Carregados

Vídeo Entrevista Carregado

Botão Verde - Informações Carregada no Canto da Tela

Botão Amarelo - Informações Carregada Abaixo do Vídeo

Botão Volta - Quando pressionado volta à Tela Anterior

Segundo Vídeo sendo Executado

Aplicação Sendo Executada no Set-Top-Box Virtual Ginga-Ncl

O Grupo Ginga Goiás disponibiliza uma nova versão do script T4-Salvation.

A primeira versão da aplicação foi desenvolvida com o objetivo de introduzir usuários novatos à linguagem NCL 3.0 e à ferramenta de autoria de programas audiovisuais Composer. O script consiste em um vídeo o qual é sincronizado com outros 3 objetos de mídia, um botão interativo, a interatividade do vídeo e um botão sair. Quando o vídeo é carregado, o objeto de mídia “botão interativo” também é inicado através do link onBeginStart. Este objeto de mídia indica ao usuário que o vídeo em execução possui interatividade.

<link xconnector=”connBase#onBeginStart” id=”comecavideointerativo”>
<bind role=”onBegin” component=”video”/>
<bind role=”start” component=”botaointeratividade”/>
</link>

Especificamos que neste script o botão interativo do controle remoto será o verde, portanto através deste botão, o usuário poderá carregar a interatividade. Para que a interatividade não fique carregada durante toda execução do fil me, iniciamos juntamente com a interatividade um botão sair (se o usuário quiser voltar a ver  o vídeo normalmente). Esta sincronização foi feita através do link onKeySelectionStartNSTopN.

<link xconnector=”connBase#onKeySelectionStartNStopN” id=”comecainterativade”>
<bind role=”onSelection” component=”botaointeratividade”>
<bindParam name=”keyCode” value=”GREEN”/>
</bind>
<bind role=”start” component=”interatividade”/>
<bind role=”start” component=”botaosair”/>
<bind role=”stop” component=”botaointeratividade”/>
</link>

Na primeira versão do script, foi feita apenas este tipo de sincronização. Nesta nova versão, foi adicionado algumas funcionalidades como um menu interativo, redimensionamento e alternância de vídeo, interação e feedback com o usuário.

Quando o usuário pressiona o botão verde do controle remoto, a interatividade simulando um menu é carregada.

Neste momento um menu com 5 opções é carregado para interação com o usuário. Através das setas (baixo, cima) do controle remoto, o usuário poderá escolher qual opção deseja. Nesta parte da aplicação não há sincronização do vídeo.  O link usado para startar o menu é o mesmo da versão anterior, adicionando apenas as 5 opções de menu.

<link xconnector=”connBase#onKeySelectionStartNStopN” id=”comecainterativade”>
<bind role=”onSelection” component=”botaointeratividade”>
<bindParam name=”keyCode” value=”GREEN”/>
</bind>
<bind role=”start” component=”interatividade”/>
<bind role=”start” component=”botaosair”/>
<bind role=”start” component=”opcao1″/>
<bind role=”start” component=”opcao2″/>
<bind role=”start” component=”opcao3″/>
<bind role=”start” component=”opcao4″/>
<bind role=”start” component=”opcao5″/>
<bind role=”stop” component=”botaointeratividade”/>
</link>

As opções do menu quando executadas informam o seguinte: Cast (elenco do filme), Movie (informações gerais sobre o filme), Bonus (vídeos de entrevistas, making off), SoundTrack (trilha sonora do filme) e About Us (informações sobre desenvolvedor da aplicação).

Quando qualquer uma das opções do menu é ativada, o vídeo é redimensionado e são iniciados os objetos de mídia associados ao menu. Para fazer o redimensionamento do vídeo foi criado o conector onSelectionSetNStartNStopN, o qual é listado abaixo.

<causalConnector id=”onSelectionSetNStartNStopN”>
<connectorParam name=”var”/>
<simpleCondition role=”onSelection”/>
<compoundAction operator=”seq”>
<simpleAction role=”set” value=”$var” max=”unbounded” qualifier=”par”/>
<simpleAction role=”start” max=”unbounded” qualifier=”par”/>
<simpleAction role=”stop” max=”unbounded” qualifier=”par”/>
</compoundAction>
</causalConnector>

O link para a interação ficou assim:

<link xconnector=”onSelectionSetNStartNStopN” id=”primeiraopcao”>
<bind role=”onSelection” component=”opcao1″/>
<bind role=”set” component=”nodeSettings” interface=”opcao”>
<bindParam name=”var” value=”1″/>
</bind>

<bind role=”start” component=”resultado1″/>
<bind role=”start” component=”resultado11″/>
<bind role=”start” component=”resultadotopo”/>
<bind role=”stop” component=”resultado2″/>
<bind role=”stop” component=”resultado3″/>
<bind role=”stop” component=”resultado4″/>
<bind role=”stop” component=”resultado14″/>
<bind role=”stop” component=”resultado5″/>
<bind role=”stop” component=”botaosair”/>
<bind role=”set” interface=”bounds” component=”video”>
<bindParam name=”var” value=”20.0%,16.0%,30.0%,65.0%”/>
</bind>

A figura abaixo mostra o vídeo redimensionado assim como as informações referentes ao menu selecionado:

A mesma lógica segue para as demais opções do menu.

Na opção Bonus há a possibilidade de executar outro vídeo para visualização. São disponibilizados 4 vídeos (entrevistas com os atores Christian Bale e Sam Worthington, um vídeo premium do filme e o making off). O usuário poderá escolher o vídeo através das teclas 1,2,3 e 4 do controle remoto (veja figura abaixo):

Se o usuário executar qualquer um dos 4 vídeos, o vídeo atual é parado assim como as informações do menu Bonus. O vídeo escolhido é executado sendo redimensionado para o tamanho 20.0%,20.0%,80.0%,60.0%. O conector usado assim como seu link são mostrados abaixo:

<causalConnector id=”onKeySelectionSetNStartNStopNAbortN”>
<connectorParam name=”keyCode”/>
<connectorParam name=”var”/>
<simpleCondition role=”onSelection” key=”$keyCode”/>
<compoundAction operator=”seq”>
<simpleAction role=”set” value=”$var” max=”unbounded” qualifier=”par”/>
<simpleAction role=”start” max=”unbounded” qualifier=”par”/>
<simpleAction role=”stop” max=”unbounded” qualifier=”par”/>
<simpleAction role=”abort” max=”unbounded” qualifier=”par”/>
</compoundAction>
</causalConnector>

<link xconnector=”onKeySelectionSetNStartNStopNAbortN” id=”entrevistabalevideo”>
<bind role=”onSelection” component=”opcao3″>
<bindParam name=”keyCode” value=”1″/>
</bind>
<bind role=”start” component=”entrevistabale”/>
<bind role=”stop” component=”resultado3″/>
<bind role=”abort” component=”video”/>
<bind role=”set” interface=”bounds” component=”entrevistabale”>
<bindParam name=”var” value=”20.0%,20.0%,80.0%,60.0%”/>
</bind>
</link>

O usuário pode continuar navegando através do menu. Se o usuário, por exemplo, pressionar a opção About Us, o vídeo é redimensionado novamente (veja figura abaixo):

A mesma lógica segue para os demais vídeos. Se o usuário quiser sair da aplicação e ver o vídeo normalmente, basta pressionar o botao sair do controle remoto.

A aplicação T4-Salvation versão 2 está disponível em nosso portal para download.

Abaixo segue outras imagens da aplicação.

Abraço a todos !

por: Daniel Alves da Cruz

danielcruz733.wordpress.com

twitter.com/grupogingagoias

Foi disponibilizado em nosso portal um novo script, Viva os Animais.

A aplicação Viva os Animais é uma aplicação do tipo T-Learning voltado para o público infantil. Aplicações do tipo T-Learning são programas voltados para aprendizagem do usuário utilizando a tecnologia do sinal digital de televisão. Ou seja, são programas que visam estimular o conhecimento, aprendizado e raciocínio sobre determinado assunto, utilizando da televisão como meio de trasmissão. Um exemplo de T-Learning seria o ensino a distância, hoje oferecido através do E-Learning (utilização do computador e internet) mas com diversas vantagens:

• Cerca de 95% da população possui um televisor em casa;

• Nem toda família possui um computador conectado à internet em seu domicílio;

• A televisão é um dispositivo bem conhecido e de fácil uso, usado a décadas;

• As pessoas tendem a acreditar no conteúdo distribuído na TV, o que facilita a aprendizagem pelo T-Learning;

• A televisão tem o poder de atingir todos os níveis da sociedade, desde as tribos indígenas da amazônia à população de classe média alta dos grandes centros.

Alguns serviços de T-Learning conhecidos são disponibilizados pela BBC de londres como o canal CBeebies. Neste canal, enquanto um programa infantil é apresentado, a criança pode pressionar o botão vermelho do controle remoto, iniciando assim uma séria de atividades interativas, estimulando o desenvolvimento da criança. Outro serviço é o KIT, um canal interativo dedicado ao reforço-escolar. Um estudante pode mandar uma dúvida por email para a equipe de professores, os quais em 30 minutos retornam um vídeo com a solução da dúvida.

Como um exemplo de aplicação T-Learning, o Grupo Ginga Goias desenvolveu a aplicação Viva os Animais. Esta aplicação tem por objetivo estimular habilidades e o raciocínio em crianças alfabetizadas. O script pode ainda ser melhorado, incluindo um áudio explicativo, o que ampliaria o público-alvo da aplicação ,para crianças ainda não alfabetizadas.

Viva os Animais consiste em uma tela com vários animais, através das teclas (esquerda, direita, acima, abaixo), a criança pode selecionar determinado animal pressionando a tecla OK. Quando a tecla é selecionada um áudio com o som do animal é executado, juntamente com uma tela com informações sobre o animal. A tela abaixo mostra a tela inicial do programa:

Tela Inicial da Aplicação Viva os Animais

Pela imagem acima, vemos que a seleção está no animal Golfinho. Apertando a tecla OK do controle remoto, o áudio com o som do golfinho é executado, assim como uma tela com informações sobre o animal. Veja figura abaixo:

Interatividade Executada - Áudio Golfinho e Informações Golfinho

A aplicação visa também, estimular na criança uma consciência positiva sobre os animais, relacionar o som do animal com sua imagem, aproximando de certa forma a criança do meio-ambiente.

O Grupo Ginga Goias disponibilizou a aplicação em seu portal para download, com isso esperamos contar com o feedback dos usuários, estimular o processo criatório de aplicações T-Learning e contar com futuras atualizações para o script.

Contamos com o apoio de todos. Mande sugestões ou faça suas críticas.

Obrigado !!!!

Por: Daniel Alves da Cruz
danielcruz733.wordpress.com

Acesse
www.grupogingagoias.com.br

twitter.com/grupogingagoias