Televisão Digital Educativa

Modelagem de Conteúdos Interativos | Prof. Dr. Francisco Rolfsen Belda

Desenvolvimento da aplicação

leave a comment »

O desenvolvimento da aplicação prototipada neste trabalho baseou-se na estrutura de conteúdos definida no modelo proposto e considerou a concepção do ambiente da fábrica virtual, conforme apresentado. Com o objetivo de testar a viabilidade técnica de sua execução em condições reais e adaptadas ao contexto nacional, a implementação computacional empregou ferramentas que integram o middleware Ginga (MORENO, 2006), do Sistema Brasileiro de Televisão Digital, com uso da linguagem declarativa NCL e da linguagem procedural LUA. Além do fato de constituir uma especificação diretamente ligada ao SBTVD, algumas características da NCL favoreceram sua adoção como base para o desenvolvimento da parte declarativa da aplicação, tais como ser baseada em XML, ser de fácil aprendizagem, voltar-se especificamente para a descrição de formas de interatividade com sincronismo espaço-temporal entre objetos de mídia, poder ser processada por múltiplos dispositivos, incluindo telefones celulares, e suportar integração com aplicações procedurais codificadas em linguagem LUA, usada no protótipo para gerenciar o acesso a contextos dentro de um ambiente televisivo composto por mídias associadas.

Com o intuito inicial de testar esse conjunto de ferramentas foram instaladas as seguintes aplicações, disponibilizadas para download gratuito através do site oficial do Ginga-NCL: a) Ginga Player Emulator, versão 1.1.1, software em JAVA™ que emula o set-top-box do SBTVD, sendo capaz de reproduzir (com algumas limitações) documentos em NCL; b) Composer, versão 2.2.1 – software com interface gráfica de edição de documentos NCL; c) Máquina virtual Linux para VMWare, contendo Ginga-NCL C++, versão 0.10.1, middleware capaz de rodar com maior fidelidade as aplicações em NCL.

Os testes práticos de desenvolvimento de aplicações tiveram como base de referência os tutoriais disponibilizados no site oficial do Ginga, contendo instruções para a criação de conteúdos interativos por meio das linguagens previstas no middleware do SBTVD, bem como experiências mantidas pela equipe a partir da participação em oficinas de NCL ministradas na USP em São Carlos como parte do programa de popularização desse conjunto de softwares lançado no âmbito do próprio SBTVD, com apoio do Laboratório Lince do Departamento de Computação da UFSCar.

O modelo de aplicação tomado como referência para o desenvolvimento do protótipo em plataforma de televisão digital, objeto central deste trabalho, considerou a seguinte situação em relação aos recursos tecnológicos para implementação de sistemas de televisão digital: emprego de linguagem NCL para sincronização de mídias e adaptação de interfaces; dispositivos de hardware para armazenamento local de mídias e rede para distribuição de vídeos sob demanda; e canal de retorno intermitente para submissão de resposta do tele-interator a testes de conhecimentos (quiz). Na presente versão, não é considerada a possibilidade de submissão direta de vídeos pelo tele-interator, ainda que se possam utilizar, no âmbito da programação, vídeos colaborativos e participativos submetidos pelas comunidades de aprendizagem através da internet.

a) Contextos de conteúdo

A implementação computacional do modelo baseado em ambientes virtuais televisivos compostos por espaços temáticos que abrigam conteúdos audiovisuais foi viabilizada, no âmbito da sintaxe da linguagem NCL, por meio da utilização de “contextos”, conforme previsto em documentos de referência consultados, de forma que cada “contexto” da aplicação correspondesse a um arquivo NCL representando um espaço televisivo finito e coesamente organizado para que funcionasse de maneira independente em relação aos demais. Dessa forma, o sistema possui um “contexto raiz”, ou inicial, a partir do qual se pode acessar outros três conceitos de segundo nível, correspondentes, na aplicação, a espaços temáticos ligados ao ambiente televisivo da fábrica virtual. Esses três contextos de ordem secundária correspondem, no protótipo, a: Chão de fábrica, Escritório de gestão e Fórum. Todos eles podem ser acessados através do contexto raiz, sendo, portanto, conteúdos em relação a este e continentes em relação às classes de mídia que abrigam. O trecho de código abaixo ilustra a representação dessa relação de continência entre o contexto raiz e os três contextos que representam espaços temáticos de conteúdo[1].

<body>

<context id=”contexto_gestao” refer=”gestao#gestao”/>

<context refer=”chao_fabrica#chao_fabrica”/>

<context id=”contexto_forum” refer=”forum#forum”/>

</body>

Ressalte-se que, no sistema da aplicação prototipada, esses três contextos são arquivos NCL separados do código do contexto raiz, na medida em que este invoca os contextos externos, seus contextos continentes, por meio do seguinte comando:

<importedDocumentBase>.

<importNCL alias=”gestao” documentURI=”gestao/main.ncl” />

<importNCL alias=”chao_fabrica” documentURI=”chao_fabrica/main.ncl” />

<importNCL alias=”forum” documentURI=”forum/main.ncl” />

</importedDocumentBase>

Para indicar a possibilidade de acesso a um contexto, a interface da aplicação exibe ao tele-interator quatro imagens selecionáveis que representam comandos de acionamento de seus respectivos conteúdos. Três imagens correspondem aos contextos secundários citados, e estão a eles vinculados no código da aplicação por meio de elementos descriptor, como ilustra o trecho de código a seguir. A quarta imagem corresponde ao acionamento direto de um vídeo alocado fora desses contextos, referente à reportagem da série “Profissões”, na medida em que sua pauta e roteiro não mantêm relação temática de pertinência a eles, mas sim ao ambiente da fábrica como um todo.

<media id=”Chao_Fabrica” src=”media/chao_fabrica.jpg” descriptor=”DChaoFabrica”/>

<media type=”image” src=”media/gestao.jpg” descriptor=”DEscritorio”/>

<media type=”image” src=”media/forum.jpg” descriptor=”DForum”/>

<media type=”image” src=”media/profissoes.png” descriptor=”DProfissoes”/>

O resultado dessa codificação sobreposta às respectivas mídias na interface visualizada pelo tele-interator é reproduzida na Figura 24.

Figura 24. Tela do protótipo para seleção de contextos secundários

A seleção de um dos contextos a partir do contexto raiz ocasiona o acionamento de um elemento link associado a uma conexão que inicia a exibição de uma animação tridimensional simulando a imersão do tele-interator no espaço temático escolhido e reproduzindo, assim, a sensação de seu deslocamento físico através do ambiente da fábrica virtual até o local onde se abrigam os conteúdos de interesse. Ao iniciar a transição ao contexto secundário, esse comando interrompe a exibição de vídeo e áudio da mídia do contexto raiz (vídeo-principal) e mantém parados os componentes vinculados aos demais contextos. Esse comando funciona assim:

<link xconnector=”onSelectionStartNStopN”>

<bind component=”Chao_Fabrica” role=”onSelection”/>

<bind component=”video_principal” role=”stop” />

<bind component=”contexto_chao_fabrica” role=”start” />

<bind component=”som_principal” role=”stop” />

<bind component=”som_chao_fabrica” role=”start” />

<bind component=”Chao_Fabrica” role=”stop” />

<bind component=”Gestao” role=”stop” />

<bind component=”Forum” role=”stop” />

<bind component=”titulo” role=”stop” />

<bind component=”profissoes” role=”stop” />

</link>

Note-se que as mídias que estão dentro do contexto secundário acessado também estão dentro do contexto raiz, de forma que esse comando deve encerrar todas as mídias que existem somente no contexto raiz, e não todas as mídias a ele vinculadas. Uma vez acessado um contexto secundário, é possível voltar ao contexto raiz por meio de um comando que fecha as mídias vinculadas àquele e aciona um elemento link, comum a todos os espaços temáticos. Este elemento fecha o contexto e leva o teleinterator novamente ao ambiente virtual da fábrica, até sua interface de pausa, que aciona outro elemento link direcionado à exibição do menu raiz da aplicação, conforme os trechos de código a seguir:

<link id=”fecha_forum” xconnector=”onEndStartN”>

<bind component=”contexto_forum” role=”onEnd”/>

<bind component=”video_principal” interface =”pausa” role=”start” />

</link>

<link xconnector=”onBeginPauseNStartN”>

<bind component=”video_principal” interface=”pausa” role=”onBegin”/>

<bind component=”video_principal” role=”pause” />

<bind component=”Chao_Fabrica” role=”start” />

<bind component=”Gestao” role=”start” />

<bind component=”Forum” role=”start” />

<bind component=”profissoes” role=”start” />

<bind component=”titulo” role=”start” />

</link>

b) Acionamento de vídeos

Vídeos de diferentes classes inseridos dentro de um determinado contexto são acionados por meio de comandos que funcionam de forma análoga aos de acionamento de contextos. A qualquer momento durante a exibição de um contexto secundário, é dada ao usuário a opção de retornar ao contexto anterior, isto é, à interface de pausa do ambiente principal (menu raiz) e que dá acesso aos outros contextos a ele vinculados:

<link id=”profissoes_fecha” xconnector=”onKeySelectionStopNStartN”>

<bind component=”profissoes_video” role=”onSelection”>

<bindParam name=”keyCode” value=”GREEN”/>

</bind>

<bind component=”profissoes_video” role=”stop” />

<bind component=”video_principal” interface =”pausa” role=”start” />
</link>

Um conjunto de episódios de vídeos de uma mesma classe, ou que se queira reunir em uma subunidade temática ou classificativa de conteúdos, podem ser agrupados dentro de um contexto secundário, criando um terceiro nível de continência de peças de mídia. Na aplicação prototipada, esse contexto terciário dentro de um espaço temático como Chão de fábrica ou Escritório de Gestão ou Fórum assume a forma de programas associados às séries de vídeo. No Chão de fábrica, por exemplo, esse contexto corresponde ao conjunto de demonstrações de funcionamento de máquinas e processos de manufatura. Em relação ao uso de linguagem declarativa, o acesso a esse novo contexto segue o mesmo padrão dos anteriores, com a invocação de um outro arquivo NCL a partir de ícone de seleção inserido em seu respectivo espaço temático.

<context refer=”eureka#eureka”/>

<importedDocumentBase>

<importNCL alias=”eureka” documentURI=”eureka.ncl” />

</importedDocumentBase>

O resultado na interface do tele-interator é o seguinte:

Figura 25. Tela do espaço temático Chão de fábrica

De modo a permitir uma navegação mais intuitiva nessa na interface televisiva, foi desenvolvida uma aplicação em linguagem procedural LUA para operar a seleção de acesso a um conteúdo audiovisual alocado dentro de um contexto qualquer. O uso dessa linguagem para a codificação de aplicações integradas ao NCL para agregar funções computacionais aos programas desenvolvidos com base nos pressupostos do middleware visa integrar recursos declarativos e imperativos de forma a viabilizar a produção de conteúdos interativos mais avançados. LUA combina sintaxe para programação procedural com artefatos para descrição de dados por meio de tabelas associativas e semântica extensível, destacando-se seu uso ideal para prototipagens rápidas.

Neste experimento, a linguagem LUA foi empregada de forma a testar a simulação de um cursor na tela de televisão, movimentado pelas setas do controle remoto, com comportamento similar ao de um mouse de computador, movendo-se gradualmente em todas as direções até o ícone de seleção de interesse do tele-interator. Essa aplicação LUA é iniciada na forma de uma mídia inserida no próprio arquivo NCL e é empregada, também, para indicar a opção de acesso a um contexto dentro do contexto (exemplo de código a seguir), como no caso da série Eureka, alojada dentro do espaço Chão de fábrica, com vídeos de demonstração do funcionamento de máquinas-ferramentas instaladas no Laboratório de Otimização de Processos de Fabricação (OPF), que integra o NUMA.

<media id=”cf_lua” src=”selecao.lua” descriptor=”cf_dsLua”>

<area/>

</media>

Assim, a mídia “cf_lua” possui uma área como o identificador “eureka”. Quando essa área é ativada, um link NCL aciona o início do contexto correspondente à série de vídeos Eureka:

<link xconnector=”onBeginStartNStopN”>

<bind component=”cf_lua” interface=”eureka” role=”onBegin”/>

<bind component=”cf_lua” role=”stop” />

<bind component=”som_transicao” role=”stop” />

<bind component=”voltar” role=”stop” />

<bind component=”contexto_eureka” role=”start” />

</link>

Essa aplicação foi desenvolvida a partir de duas estruturas principais, organizadas na forma de tabelas associativas. Uma delas define as escolhas disponíveis aos tele-interatores a partir de um menu de conteúdos apresentados, sendo que cada possível item de seleção (um vídeo, por exemplo) corresponde a um membro da tabela, com seu respectivo número de identificação (id), imagem, imagem com atributo de seleção (para indicar a iminência de acionamento daquela mídia, para confirmação do tele-interator), além de duas linhas de texto que descrevem o conteúdo e suas dimensões e coordenadas de posicionamento na interface. Esta tabela corresponde ao seguinte trecho de código:

local escolhas = {}

local img = canvas:new(‘selecao2.png’)

local img2 = canvas:new(‘selecao2_hover.png’)

escolhas[1] = {id=1,imagem = img,imagem_hover=img2,selecionado=0,texto1=”Demonstracoes de experimentos, maquinas e”,texto2=” invencoes que solucionam problemas.”,srcw=105,srch=86,x=30,y=280,disponivel=0}

local img = canvas:new(‘selecao2.png’)

local img2 = canvas:new(‘selecao2_hover.png’)

escolhas[2] = {id=2,imagem = img,imagem_hover=img2,selecionado=0,texto1=”Demonstracoes de experimentos, maquinas e”,texto2=” invencoes que solucionam problemas.”,srcw=105,srch=86,x=30,y=80,disponivel=0}

local img = canvas:new(‘selecao1.png’)

local img2 = canvas:new(‘selecao1_hover.png’)

escolhas[3] = {id=3,imagem = img,imagem_hover=img2,selecionado=0,texto1=”Demonstracoes de experimentos, maquinas e”,texto2=” invencoes que solucionam problemas.”,srcw=105,srch=86,x=200,y=80}

A outra tabela utilizada pela aplicação LUA define os parâmetros básicos para o movimento e posicionamento do ponteiro que pode ser manipulado pelo tele-interator, como um cursor, para acionamento das mídias inseridas naquele contexto, a partir de uma imagem que representa uma seta de seleção, bem como suas coordenadas e dimensões:

local img = canvas:new(‘pointer.gif’)

local seta = {img=img,x=DX/2,y=DY/2,srcx=15,srcy=15}

A aplicação é renderizada por meio da função “redraw()”, que desenha a imagem de fundo, as opções do menu, com seus textos e imagens respectivos, e a seta que representa o cursor de seleção.

function redraw ()

— Desenha Fundo

canvas:compose(0,0,fundo)

— Desenha as opcoes e texto

desenha_escolhas_texto()

— Desenha a seta

canvas:compose(seta.x, seta.y, seta.img, srcx,srcy)

canvas:flush()

end

A função que desenha a escolha do texto (“desenha_escolhas_texto”) considera a existência de alguma opção em estado hover, isto é, que tenha sido pré-selecionada pelo tele-interator por meio do posicionamento do ponteiro (cursor) sobre seu respectivo ícone de acionamento (imagem, por exemplo). Apenas se e quando houver um ícone em hover, a aplicação apresenta o texto relacionado ao conteúdo pré-selecionado na tela. Caso não haja esta condição, a aplicação exibe um cabeçalho padrão que esclarece ao tele-interator seu contexto de navegação. Por fim, a função desenha os botões de opção, com a alternativa de carregamento de uma imagem de botão com destaque para indicar sua eventual condição de hover. Esses comandos funcionam conforme o trecho seguinte:

function desenha_escolhas_texto()

— Verifica se alguma opcao foi “hover”

local hover

hover = verifica_hover()

— Se esta em cima de alguma posicao possivel, escreve na tela o texto referente

if(hover ~= 0) then

if(escolhas[2].selecionado==1 or escolhas[3].selecionado==1) then

canvas:attrColor (‘red’)

canvas:attrFont (‘Times’,16,’Bold’)

canvas:drawText(‘Video Aula indisponivel…’,100,415)

else

canvas:attrColor (‘black’)

canvas:attrFont (‘Times’,15,’Bold’)

canvas:drawText(escolhas[hover].texto1,100,415)

canvas:drawText(escolhas[hover].texto2,100,430)

end

else

escolhas[2].selecionado=0

escolhas[3].selecionado=0

canvas:attrColor (‘black’)

canvas:attrFont (‘Times’,15,’Bold’)

canvas:drawText(‘Chao de Fabrica:’,100,415)

canvas:attrFont (‘Times’,11,’Normal’)

canvas:drawText(‘Conhecimentos sobre producao, manufatura, maquinas e ferramentas’,100,430)

end

— Desenha os botoes de opcao

for i=1,num_escolhas do

— Se esse botao estiver em hover, entao desenha-o no modo hover

if(i == hover) then

canvas:compose(escolhas[i].x,escolhas[i].y,escolhas[i].imagem_hover,srcx,srcy)

else

canvas:compose(escolhas[i].x,escolhas[i].y,escolhas[i].imagem,srcx,srcy)

end

end

end

A Figura 26 ilustra, por meio de duas telas seqüenciais capturadas do protótipo, como ocorre na interface do tele-interator esse efeito de seleção e pré-seleção de conteúdo por meio da aplicação descrita, a partir do movimento do cursor sobre o ícone de seleção dos vídeos da série Eureka. Dessa forma, quando o cursor está posicionado fora do ícone de seleção, o cabeçalho exibe o título e a descrição do espaço temático (no caso, Chão de fábrica). Quando posicionado sobre o ícone representativo da série, o cabeçalho passa a exibir uma frase que descreve o seu conteúdo (“Demonstrações de experimentos…”) e o ícone respectivo assume coloração mais brilhante, de forma a indicar o estado de pré-seleção.

Figura 26. Mecanismo de seleção e pré-seleção com uso de cursor

A única função dessa aplicação com a qual o usuário interage diretamente é a que gerencia o movimento da seta ou cursor (“gerencia_seta”). Essa função recebe os eventos enviados por meio do controle remoto e orienta o deslocamento do ponteiro em função de alterações sucessivas no valor de suas coordenadas de posicionamento na tela:

function gerencia_seta(evt)

if evt.class == ‘key’ and evt.type == ‘press’

then

— apenas as setas movem a mira

if evt.key == ‘CURSOR_UP’ then

seta.y = seta.y – 17

elseif evt.key == ‘CURSOR_DOWN’ then

seta.y = seta.y + 17

elseif evt.key == ‘CURSOR_LEFT’ then

seta.x = seta.x – 17

elseif evt.key == ‘CURSOR_RIGHT’ then

seta.x = seta.x + 17

elseif evt.key == ‘ENTER’ then

verifica_enter()

end

else

redraw()

end

end

Quando o tele-interator pressiona o botão de confirmação, a aplicação aciona uma função (“verifica_enter”) que verifica a existência de um ícone de opção ao qual o ponteiro esteja sobreposto e, em caso afirmativo, aciona o conteúdo respectivo. Essa mesma lógica de programação é válida para que se encerre o contexto presente (Eureka) e retorne-se ao contexto anterior (Chão de fábrica), mediante o acionamento do ponteiro posicionado sobre o botão correspondente a esta opção. A função descrita é a seguinte:

function verifica_enter()

local hover = 0

hover = verifica_hover()

if(hover == 0) then

return

end

if(hover == 1) then

— Inicia Alguma Ancora!

event.post(‘out’, {class=’ncl’, type=’presentation’, transition=’start’, area=’eureka’})

return

end

if(hover == 2) then

escolhas[2].selecionado=1

— Inicia Alguma Ancora!

–event.post(‘out’, {class=’ncl’, type=’presentation’, transition=’start’, area=’profissoes’})

return

end

end

O propósito dessas funções é, basicamente, o de permitir o acesso sob demanda (escolher, selecionar e assistir, com possibilidade de repetir a operação) de conteúdos audiovisuais inseridos dentro de um contexto. O menu de seleção está baseado em imagens e textos descritivos que indicam personagens e informações retratadas em cada mídia oferecida, cujo mecanismo de acionamento segue os princípios das funções anteriormente descritas.

c) Redimensionamento de tela e encerramento

No protótipo desenvolvido, ao acionar-se o link para o vídeo (“e_img1”), é acionada junto com ele a exibição de um botão que dá ao tele-interator a opção de redimensionar a tela (“e_resize1_1”). Há duas opções: em formato full screen (tela cheia) ou em janela lateral posicionada junto ao menu de seleção de conteúdos daquele contexto. A segunda opção visa manter o tele-interator inserido no ambiente televisivo, de forma a preservar-se a contextualização gráfica do espaço ao qual o conteúdo em exibição esteja tematicamente vinculado. A ativação do recurso para redimensionar da tela corresponde ao botão amarelo do controle remoto. Quando acionado, este botão dispara dois links, sendo o primeiro para a exibição do vídeo em formato de tela cheia (“resize1”) e o segundo para desativação do botão amarelo e ativação de um segundo botão, verde, correspondente à opção para retorno ao formato de tela em janela reduzida (“deresize1”).

<link id=”resize1″ xconnector=”onKeySelectionResize”>

<bind component=”e_resize1_1″ role=”onSelection”>

<bindParam name=”keyCode” value=”YELLOW”/>

</bind>

<bind component=”e_img1″ interface=”bounds” role=”set”>

<bindParam name=”bounds” value=”0,0,100%,100%” />

</bind>

</link>

<link id=”resize1_abre” xconnector=”onKeySelectionStartNStopN”>

<bind component=”e_resize1_1″ role=”onSelection”>

<bindParam name=”keyCode” value=”YELLOW”/>

</bind>

<bind component=”e_resize1_2″ role=”start” />

<bind component=”e_resize1_1″ role=”stop” />

</link>

Os outros vídeos têm suas opções de exibição controladas de forma análoga a este. Da mesma forma, pode-se acionar o botão verde a qualquer momento para sair de um contexto, desativando todas as mídias que estejam nele contidas e em funcionamento. O código utilizado para isso é:

<link id=”fechatudo” xconnector=”onKeySelectionStopN”>

<bind component=”e_sair” role=”onSelection”>

<bindParam name=”keyCode” value=”GREEN”/>

</bind>

<bind component=”e_img2″ role=”stop” />

<bind component=”e_img3″ role=”stop” />

<bind component=”e_img1″ role=”stop” />

<bind component=”e_sair” role=”stop” />

<bind component=”e_botao1″ role=”stop” />

<bind component=”e_botao2″ role=”stop” />

<bind component=”e_botao3″ role=”stop” />

<bind component=”e_fundo” role=”stop” />

<bind component=”e_titulo” role=”stop” />

<bind component=”e_som” role=”stop” />

<bind component=”e_resize1_1″ role=”stop” />

<bind component=”e_resize1_2″ role=”stop” />

<bind component=”e_resize2_1″ role=”stop” />

<bind component=”e_resize2_2″ role=”stop” />

<bind component=”e_resize3_1″ role=”stop” />

<bind component=”e_resize3_2″ role=”stop” />

</link>

d) Vídeo-aula interativa

O protótipo desenvolvido para validação do modelo de conteúdos possui, ainda, conforme antecipado, um conteúdo com recursos especiais de interatividade, organizado conforme a classe de vídeo-aula e inserido no espaço temático referente ao contexto do Escritório de gestão. Além da vídeo-aula, este espaço abriga um vídeo em formato de entrevista, produzido como parte da série Em debate. A vídeo-aula é, ela própria, organizada como um contexto à parte, na medida em que o sincronismo de conteúdos a ela vinculados é definido com base em um arquivo NCL também invocado a partir do contexto anterior (o espaço temático). A pasta correspondente à aplicação da vídeo-aula está organizada por meio da vinculação de oito diferentes arquivos NCL, correspondetes ao código principal deste contexto e a sete conteúdos complementares veiculados em eventos de interação durante a vídeo-aula, incluindo um tese de conhecimento com seleção de alternativas, além de um arquivo LUA, correspondente à aplicação que controla o cursor. Também são dispostos arquivos de textos que definem legendas para as alternativas de respostas.

Os recursos de interatividade acionados a partir da aula (acesso a currículo, glossário, imagens, entre outros meta-conteúdos) também se estruturam, na linguagem declarativa, como contextos, cujo acionamento está vincuado por critérios de sincronismo aos tópicos de conteúdo tratados pelo professor durante a exposição. Uma imagem é exibida na tela em sincronia com fases temporais da aula de forma a indicar ao tele-interator a opção de acionamento de um meta-conteúdo, o que pode ser feito por meio do botão vermelho do controle remoto. Essa ação acarreta o início de um novo contexto, correspondente ao conteúdo complementar ou extra acionado. Conforme previsto no modelo, alguns contextos de exibição de conteúdos complementares são veiculados por default, automaticamente, sem necessidade de acionamento pelo tele-interator.

Não há, porém, uma codificação padrão para a chamada de um contexto de meta-conteúdo em meio à exibição de uma vídeo-aula, tendo em vista a multiplicidade das opções de vinculação de conteúdos previstas a partir de suas inter-relações de sincronismo e dependência, entre outros critérios estabelecidos no modelo. Conforme o roteiro de cada aula, pode ser necessário redimensionamento especial para visibilidade de certas imagens e textos ou mesmo acionamento de pausa no vídeo principal para o caso de sua vinculação a conteúdos extras.

O trecho de código a seguir ilustra algumas possibilidades de vinculação de conteúdos a uma vídeo-aula, conforme experimentadas nesta prototipagem, em torno de classes como currículo e gráfico, além de um teste de múltipla escolha, considerando os intervalos temporais durante os quais cada opção se mantém acessível:

<media type=”video” src=”media/videoaula.mp4″ descriptor=”DVideo1″>

<property name=”bounds”/>

<area begin=”5s” end=”40s”/>

<area id=”tempo_grafico” begin=”95s” end=”145s”/>

<area id=”tempo_risco” begin=”172s” end=”235s”/>

<area id=”tempo_4etapas” begin=”260s” end=”415s”/>

<area id=”tempo_teste” begin=”430s”/>

<area id=”tempo_estrutura” begin=”960s” end=”1273s”/>

<area id=”tempo_publico” begin=”1353s” end=”1400s”/>

</media>

O elemento link é mais uma vez utilizado como forma de conexão entre um conteúdo exibido por default e o acionamento de um contexto complementar que o expande, conforme exemplificado no trecho a seguir a partir do acionamento da classe currículo:

<media type=”image” src=”media/botoes/vermelho_bizarro.png” descriptor=”DInteracao”/>

<link id=”link_simbolo_curriculo_abre_comeca” xconnector=”connectors#onBeginStartN”>

<bind component=”video1″ interface=”tempo_curriculo” role=”onBegin”/>

<bind component=”simbolo_curriculo” role=”start” />

</link>

<link id=”link_simbolo_curriculo” xconnector=”connectors#onKeySelectionStartNStopN”>

<bind component=”simbolo_curriculo” role=”onSelection”>

<bindParam name=”keyCode” value=”RED”/>

</bind>

<bind component=”contexto_curriculo” role=”start”/>

<bind component=”simbolo_curriculo” role=”stop” />

</link>

Esse mesmo tipo de recurso pode ser usado para vinculação de outras classes de conteúdo que possam ser acionados como recursos de informação seletiva sob comando do tele-interator a partir de uma mídia principal.

e) Teste de conhecimento

A vídeo-aula contém um teste de conhecimento com alternativas de verdadeiro ou falso. Para sua implantação, foi testada uma aplicação especial vinculada na forma de um contexto e que também combina recursos de LUA e NCL. Na linguagem declarativa, são explicitados os descritores de alternativas e suas condições de acionamento pelo tele-interator. O recurso link pode ser mais uma vez utilizado para relacionar as alternativas (verdadeiro e falso) a seus respectivos botões de acionamento (azul e amarelo):

<link xconnector=”connectors#onKeySelectionStartNStopN”>

<bind component=”verdadeiro” role=”onSelection”>

<bindParam name=”keyCode” value=”YELLOW”/>

</bind>

<bind component=”falso” role=”stop”/>

<bind component=”verdadeiro” role=”stop” />

<bind component=”resposta1″ role=”start”/>

</link>

De acordo com este teste realizado em linguagem LUA, uma função controlaria o tempo de espera pela resposta do usuário (de dez segundos, conforme estabelecido no roteiro) e determinaria, ao final desse tempo, o acionamento automático do conteúdo seguinte, revelando o resultado do teste:

function sleep(tempo)

local agora = event:uptime()

while event:uptime()-agora < tempo do

end

end

function handler (evt)

if(evt.value ==”1″)

end

end

event.register(handler)

No códifo NCL da aplicação, outro recurso de link é empregado para encerrar a escolha e submeter a resposta que revela o resultado daquele teste em particular, em função da resposta do interator. São previstas três situações: resposta sobre cada alternativa (1 e 2) e resposta vazia (sem opção após dez segundos). O trecho de código a seguir ilustra uma dessas situações considerando a escolha de uma das alternativas:

<link xconnector=”connectors#onBegin1StopNdelay”>

<bind role=”onBegin” component=”resposta1″/>

<bind role=”dstop” component=”resposta1″/>

<bind role=”dstop” component=”resposta2″/>

<bind role=”dstop” component=”resposta3″/>

<bind role=”dstop” component=”falso”/>

<bind role=”dstop” component=”verdadeiro”/>

</link>

f) Fórum participativo

O Fórum consiste em um contexto do ambiente televisivo da fábrica virtual concebido como espaço para a veiculação de conteúdos especialmente produzidos por membros de uma comunidade de aprendizagem, de forma a reforçar o senso de protagonismo associado aos conteúdos ali abrigados. Para isso, foram selecionados conteúdos das classes de depoimento, pergunta e resposta, produzidos a partir das séries de programas Eu Pesquiso e Quero Saber. Essas duas séries correspondem a contextos distintos que podem ser acessados a partir do contexto do Fórum, tendo como recurso de seleção a mesma aplicação LUA descrita anteriormente e utilizada também nos espaços de Chão de fábrica e Escritório de gestão.

A escolha de um vídeo a ser exibido a partir de um dos subcontextos do Fórum segue o mesmo princípio de oferta, seleção e exibição descrito para os contextos anteriores, com base em um menu com imagens e textos representativos de seu conteúdo:

<media type=”image” src=”media/eu_pesquiso/botao1.png” descriptor=”DBotao1″/>

<media type=”image” src=”media/eu_pesquiso/botao2.png” descriptor=”DBotao2″/>

<media type=”image” src=”media/eu_pesquiso/botao3.png” descriptor=”DBotao3″/>

Ao selecionar-se um dos vídeos oferecidos no menu, correspondentes aos botões numerados deste trecho de código apresentado, é acionado um elemento link que exibe uma imagem representando o nome da pessoa que protagoniza aquele conteúdo (“nome1”) e, a partir dela, o seu vídeo respectivo:

<link xconnector=”onSelectionStartNStopN”>

<bind component=”botao1″ role=”onSelection”/>

<bind component=”img1″ role=”stop” />

<bind component=”img2″ role=”stop” />

<bind component=”img3″ role=”stop” />

<bind component=”img4″ role=”stop” />

<bind component=”img1″ role=”start” />

<bind component=”nome1″ role=”start” />

<bind component=”sair” role=”start” />

<bind component=”info” role=”start” />

<bind component=”nome1″ role=”stop” />

<bind component=”nome2″ role=”stop” />

<bind component=”nome3″ role=”stop” />

<bind component=”nome4″ role=”stop” />

<bind component=”video1″ role=”stop” />

<bind component=”video2″ role=”stop” />

<bind component=”video3″ role=”stop” />

<bind component=”video4″ role=”stop” />

<bind component=”about1″ role=”stop” />

<bind component=”about2″ role=”stop” />

<bind component=”about3″ role=”stop” />

<bind component=”about4″ role=”stop” />

<bind component=”nome1_d” role=”stop” />

<bind component=”nome2_d” role=”stop” />

<bind component=”nome3_d” role=”stop” />

<bind component=”nome4_d” role=”stop” />

</link>

Uma tela ilustrativa dessa exibição é apresentada na Figura 27.

Figura 27. Seleção de vídeo da série Quero Saber para exibição em Fórum

Com uma mídia componente do Fórum ativada, é oferecida ao tele-interator a opção de acionar o botão azul do controle remoto, que dispara dois links simultâneos e associados. O primeiro, para se redimensionar o tamanho do vídeo na tela, conforme critérios descritos anteriormente. O segundo aciona a disposição, na tela, de imagens e textos que correspondem a informações complementares sobre o autor do tópico no fórum, por meio de conteúdos recolhidos da classe crédito ou de metadados associados ao atributo autor daquela respectiva mídia. Essa vinculação corresponde à de conteúdos complementares, conforme estabelecido no modelo, porém com a padronização de um critério fixo para a adaptação da tela de forma a se abrigar mais ou menos informação acerca do autor da mensagem audiovisual em exibição. Esses links são assim representados:

<link xconnector=”onKeySelectionResize”>

<bind component=”nome1″ role=”onSelection”>

<bindParam value=”BLUE”/>

</bind>

<bind component=”img1″ interface=”bounds” role=”set”>

<bindParam value=”300,115,190,100″ />

</bind>

</link>

<link xconnector=”onKeySelectionStartNStopN”>

<bind component=”nome1″ role=”onSelection”>

<bindParam value=”BLUE”/>

</bind>

<bind component=”about1″ role=”start” />

<bind component=”nome1_d” role=”start” />

<bind component=”menos_info” role=”start” />

<bind component=”nome1″ role=”stop” />

<bind component=”info” role=”stop” />

</link>

Uma operação análoga, por meio do mesmo botão, é feita para que se possa voltar ao estado anterior, com o vídeo exibido em uma tela maior e com menos informação sobre seu autor disponível na interface. Esse recurso é aplicado a todos os vídeos contidos no contexto do Fórum. Para sair desse contexto, mais uma vez, basta pressionar o botão verde, que aciona um link que desativa todas as mídias em funcionamento no contexto, desativando, portanto, o próprio contexto.

Com isso, acreditamos que essa experiência de prototipagem conduzida a partir do modelo estrutural de conteúdos proposto neste trabalho permite aclarar algumas condições para sua aplicação em situação reais de desenvolvimento de programas educativos e interativos para televisão digital, de forma a indicar parâmetros de validade da modelagem desenvolvida em circunstâncias similares às projetadas para sua efetiva utilização. A partir desse experimento de validação, e considerando os objetivos mais amplos do trabalho, pretende-se discutir, nas Considerações Finais, algumas questões referentes ao grau de subsídios fornecido pelo modelo bem como aos aspectos mais específicos de sua concepção e formulação que favorecem seu uso e aplicação, considerando os limites metodológicos do trabalho.


[1] Os códigos utilizados no protótipo, incluindo as aplicações associados à vídeo-aula, podem ser consultados na íntegra por meio do endereço www.edcasadaarvore/doutorado/codigos/.

Anúncios

Written by Francisco Rolfsen Belda

22/09/2010 às 05:57

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: