4.1 Modelagem conceitual
4.1.3 Diagrama de Pacote
Os pacotes em um sistema orientado a objetos representa uma abstração do conjunto que realmente forma o sistema e as classes constituem estes pacotes. De acordo com Fowler
77
(2005), o diagrama de pacotes mostra os pacotes e suas dependências. A ferramenta MARKER foi implementada de acordo com a estrutura de pacotes apresentada no diagrama de pacotes visualizado na Figura 16.
Figura 16. Diagrama de pacotes
78
O pacote beans.marcacao.ufpb.br contém os elementos que compõem o documento base necessário para gerar uma aplicação em NCL pela ferramenta.
O pacote gui.marcacao.ufpb.br contém todas as classes responsáveis pela interface gráfica da ferramenta. Várias classes deste pacote utilizam as funções e os formatadores implementados nas classes Funcoes e MeuFormatter para tratar alguns tipos de dados, como extensões de arquivos e dados dos templates. Essas classes estão definidas no pacote
formatter.marcacao.ufpb.br.
As classes controladoras Controlador e ControladorArquivoConfiguracao definidas no pacote controlador.marcacao.ufpb.br, possui todas as funções para inserir, criar, alterar excluir e manipular arquivos e os dados que compõem estes arquivos.
Um dos pacotes mais importantes da aplicação é o pacote
processador.marcacao.ufpb.br. Este pacote contém três classes: ManipulaArquivo,
TrataArquivo e ArquivoDeConfiguracao. Estas classes são responsáveis por todas as
alterações e movimentações realizadas no desenvolvimento de uma aplicação.
Os métodos dessas classes do pacote processador.marcacao.ufpb.br podem ser observados na Figura 17 representadas pelo diagrama de classe.
79
Figura 17. Pacote processador.marcacao.ufpb.br
Fonte: o autor
A classe ManipulaArquivo é responsável por toda inserção de código NCL no arquivo gerados pelo protótipo da ferramenta. Utilizando os seus métodos é possível inserir elementos media, area, port, context, link, region e descriptor definidos pela linguagem NCL, além de inserir elementos de media local e contexto local que corresponde a mídias geradas no mesmo diretório onde se encontra o arquivo principal de execução da aplicação interativa para TVDI. Já a classe TrataArquivos é responsável pela movimentação de criação dos arquivos necessários à aplicação para a qual está sendo desenvolvida. Dentre seus métodos é possível copiar mídias para pasta do projeto, mover diretórios, criar arquivo de configuração e excluir arquivos. Esta classe possui também métodos que geram arquivos HTML necessário para exibir conteúdos do tipo textos.
Por fim, na classe ArquivoDeConfiguracao os métodos são responsáveis pela inclusão, alteração, remoção e verificação dos dados necessário para abrir o projeto novamente, caso o desenvolvedor docente tenha fechado a ferramenta e queira concluir a aplicação em outro momento.
80
4.1.4 Diagrama de Atividade
A construção de uma aplicação para TVDI requer alguns critérios para sua produção, quanto ao perfil do docente, a escolha de um vídeo de origem, escolha de demais mídias e outros recursos tecnológicos. Soares (2012) contextualiza os seguintes critérios:
• O perfil do docente - precisa conhecer o conceito da TIM e, desta forma, considerando os objetivos propostos para o seu conteúdo educativo, identificar as características do ambiente e os aspectos particulares com relação às inteligências a despertar do aprendente.
• A escolha do vídeo de origem – precisa ser escolhido ou produzido de acordo com a identificação da aplicação do conteúdo relevante às necessidades levantadas pelo docente.
• Outros recursos tecnológicos – Uma vez selecionado o vídeo de origem, as demais mídias ou recursos são agregados à aplicação como forma de interação e incremento de conteúdo.
Apresentados estes critérios, definimos a interação dos componentes na criação do conteúdo interativo, representado pelo diagrama geral de atividade na Figura 18.
81
Figura 18. Diagrama geral de atividade para construção do conteúdo interativo
82
Este diagrama apresenta a atividade geral para criar uma aplicação. Ao acessar o sistema, o desenvolvedor docente pode optar por criar um projeto. Esta opção gera um evento onde é solicitada a localização do vídeo principal no qual o seu conteúdo irá ser trabalhando. Após a inicialização do projeto podem ser inseridas as marcações como forma de acesso ao conteúdo complementar. A inserção dos conteúdos para vídeo, áudio e texto são semelhantes, alterando apenas a atividade para seleção da mídia. O diagrama de atividade para esses três casos pode ser visualizado na Figura 19.
Figura 19. Diagrama de atividade para inserir uma mídia de vídeo
83
O processo de inserção das mídias de áudio e vídeo consiste na localização do arquivo, mas para inserção de um texto o mesmo deve ser digitado ou colado no local específico na tela que será exibida para realização desta ação.
O diagrama de atividade para inserir uma mídia de imagem pode ser visualiza na Figura 20.
Figura 20. Diagrama de atividade para inserir uma mídia de imagem
84
As etapas iniciais não diferem das demais inserções de mídias, mas a partir da seleção do conteúdo o roteiro se altera. Inicialmente o docente deve inserir uma imagem e um comentário para a mesma caso deseje. Em seguida, o mesmo pode continuar inserindo imagens tendo como limite o total de 5 arquivos. A seleção do modo define a forma de exibição da(s) imagem(s). O modo 2 exige a indicação do tempo total de duração para cada imagem, já que a(s) mesma(s) serão exibidas na forma de slide juntamente com o vídeo principal e não necessita de interação do usuário para encerar a sua exibição, sendo realizada de forma automática.
Semelhante a inserção das mídias de áudio e vídeo, a inserção de uma aplicação GingaNCL, o docente deve indicar a pasta do projeto contendo todos os arquivos. O diagrama de atividade que representa esta ação pode ser visualizado na Figura 21.
85
Figura 21. Diagrama de atividade para inserir uma aplicação GingaNCL
Fonte: o autor
Após a indicação da pasta da aplicação GingaNCL o protótipo MARKER procura pelo arquivo principal da aplicação, caso este arquivo não seja encontrado é solicitado ao docente que indique o mesmo dentro da pasta da aplicação. Esta ação exibe uma tela para que o arquivo seja indicado.
86
Todas as figuras representam o fluxo de inserção para cada mídia. Basicamente o fluxo de inserção se altera apenas no tipo da mídia, na iniciação e finalização da ação segue comum a todas as inserções.
4.1.5 Narrativa
Observando as categorias dos modos narrativos, foram selecionados os Modos Push e
Pull. De acordo com a sua estrutura de narrativa, estes dois modos foram os que mais se
adaptaram ao contexto das aplicações a serem desenvolvidas pela ferramenta MARKER que considera inicialmente o docente como único construtor do conteúdo.
A seleção do modo push dá-se devido à observação de suas características serem análogas ao conteúdo do vídeo-base. Considerando um ambiente de vídeo aula, a característica de ramificação no desenvolvimento do fluxo da narrativa por adição de histórias paralelas no próprio vídeo é uma constante. Além disso, por se tratar de conteúdo de aprendizagem, a característica de recepção coletiva de conteúdo interativo do modo push, destaca-se na recepção das mesmas possibilidades de interação. A partir daí, o aluno cria a sua própria aula dependendo de sua interação com o conteúdo. Esta última característica encaixa- se no modo pull devido à capacidade de interação com o conteúdo independente de outro usuário ou da emissora.
O modo pull é utilizado devido a sua característica de independência na interação ao se construir a narrativa. Torna o aluno construtor individual da narrativa, a partir do acesso a conteúdo relevante ou que desperte o interesse do mesmo. Na utilização do conceito deste modo, pode-se criar aplicações mais elaboradas com diversas possibilidades de ramificação e acesso a conteúdos de forma paralela e independente.
A não seleção do modo distributed dá-se pela contextualização do ambiente da aplicação, com relação na construção do conteúdo interativo que não faz parte da criação do usuário final e sim de um profissional de educação que está capacitado para gerar o conteúdo, observando regras de aprendizagem. Mas a colaboração do aluno é vital na criação do conteúdo com coleta de informações por questionário e o seu histórico de acesso ao conteúdo.
87
Posteriormente, estas informações podem ser acessadas pelo desenvolvedor docente, que irá analisar e com base nesta análise pode aperfeiçoar cada vez mais as suas aplicações, assim o conteúdo está sujeito ao constante melhoramento.
4.2 Desenvolvimento do protótipo
A construção do conteúdo baseado na visualização de componentes pode facilitar o desenvolvimento de aplicações mais complexas que requerem conhecimento em linguagens de programação. Este modelo abstrai este conhecimento passando para ferramenta a responsabilidade de gerar o código da aplicação final.
Os modos de seleção e a inserção de conteúdo na aplicação final gerada pela ferramenta são realizados através da identificação, escolha de modelos, modos de operação e seleção de conteúdo. Por exemplo, temos a inserção de imagens onde a visualização do conteúdo pode ser disposta paralelamente ao vídeo principal ou guiada diretamente a visualização das imagens com a pausa do vídeo principal.
Assim, esta seção aborda os detalhes das funcionalidades de implementação do protótipo da ferramenta onde a seção 4.2.1 apresenta os detalhes da criação do template. Na seção 4.2.2 veremos a interface gráfica. Na seção 4.2.3 são descritas as funcionalidades e por fim na seção 4.2.4 a formação dos links interativos.
4.2.1 Criação do template
O template é a estrutura base pra gerar o arquivo final que irá conter todo o código estruturado, organizado e coerente para execução da aplicação GingaNCL gerado pela ferramenta MARKER. Este template deve ser elaborado e organizado para que o seu preenchimento ocorra de forma precisa na localização do conteúdo da linguagem NCL. Por exemplo, elemento <descriptorBase> não pode ser inserido antes do elemento <regionBase> neste template. Inicialmente, na concepção dos templates devem-se identificar os elementos base da formação de um documento NCL.
88
Através da identificação e definição dos elementos necessários para montar um documento NCL 3.0 compatível com o middleware Ginga, podemos construir um modelo inicial comum a todas as aplicações. A partir deste modelo inicial, deve ser realizada a padronização das disposições dos elementos na tela e seus comportamentos a partir da reação com interação do usuário. A disposição dos elementos corresponde à região a qual cada elemento deve ocupar tomando como referências os valores dos atributos correspondentes ao elemento <region> que é definido dentro do seu elemento pai <regionBase> determinado pela linguagem NCL: left, top, width, height, right, bottom e ainda o atributo zIndex, que determina a sobreposição de regiões.
A definição destes valores é dinâmica definida de acordo com a disposição dos elementos de mídia. Mas como podemos definir valores para estes atributos mantendo a independência autoral, já que o produtor do conteúdo não necessariamente necessita de conhecimentos específicos para definir estes parâmetros? A forma de proporcionar este efeito dá-se na segunda etapa de processamento que transforma o modelo base inicial em templates. Com isso o docente “desenvolvedor” pode selecionar de maneira visual a disposição de cada atributo a partir da definição pré-estabelecida na seleção do template.
O preenchimento do atributo zIndex ocorre à medida que as mídias estão sendo inseridas no template. A inserção do valor para o zIndex (0,1,2...) ocorre de maneira sequencial. Este modo de preenchimento ocorrer para evitar a sobreposição de regiões11 que pode ocorre no momento da execução do documento no player gráfico do Ginga4Windows na sua versão 0.13.5. Mas esta sobreposição de região só ocorre quando algum outro elemento também é definido com o mesmo valor zIndex e as suas dimensões ocupam mesmo espaço de tela (Figura 22), Assim é exibido na mesma região ou em uma parte da região da tela em que o outro elemento já tenha sido exibido.
89
Figura 22. Ocorrência de sobreposição de região
Fonte: o autor
Na Figura 22 (a) temos um caso de sobreposição de região devido a definição do mesmo valor para o elemento zIndex e as suas dimensões ocupam o mesmo espaço na tela. Um modo de evitar a sobreposição é definindo o seu posicionamento na tela diferente dos outros elementos, mesmo que os valores do atributo zIndex sejam idênticos Figura 22 (b) ou definindo valores diferentes para o atributo zIndex Figura 22 (c). Note que mesmo que uma região ocupe o espaço na tela de outra região, não ocorre sobreposição devido a diferença de definição do atributo zIndex.
Todo o código da aplicação gera pelo protótipo da ferramenta é inserido no template definido para cada aplicação. A estrutura desse template pode ser observada na Figura 23.
90
Figura 23. Template do documento NCL inicial da aplicação
Fonte: o autor
Cada template possui a sua definição de estrutura da disposição dos elementos multimídia. Foi definida uma região sem atributos <region id= “rgTV”>, isso significa que os valores para esses atributos terão os valores padrão definidos pela linguagem NCL.
Dentro desta região serão definidas as outras regiões para os elementos de mídia inseridos no momento da construção da aplicação. Consequentemente serão inseridos também os descritores para cada região no elemento <descriptor>.
91
Os conectores12 foram todos definidos em outro documento NCL chamado de
ConnectorBase.ncl. Este documento possui todos os conectores necessários para o
desenvolvimento de uma aplicação GingaNCL gerada pela ferramenta MARKER. Como os conectores foram definidos em outro documento, precisou-se importa-lo dentro do template, já que a partir da inserção de uma interação resulta na utilização de pelo menos um tipo de conector definido no documento ConnectorBase.ncl. Portando, podemos importa-lo diretamente no template evitando assim, a sua importação durante o desenvolvimento da aplicação.
Outro ponto importante neste template é a definição da tag <property>, esta tag foi definida antes da tag </media> com base na inserção do vídeo principal. Como o conjunto da aplicação é baseada em um vídeo principal, que inicialmente deve ser inserido no momento de criação de qualquer aplicação gerada pela MARKER, este elemento pode ser definido no
template, já que a inserção desta mídia é tomada como certa para qualquer projeto e a tag
<property name=”bounds”>, pois irá ser utilizada a cada inserção de uma interação.
Outro elemento é a adoção de um design para o projeto de acordo com a descrição da metodologia MML, que designa implantação de um projeto de design para aplicações multimídia. Neste propósito foi adotado o padrão Interative Television Design, proposto pela
British Broadcasting Corporation Interactive Television - BBCi (BBCi, 2005). Este
documento define a estrutura da disposição de objetos multimídia em aplicações para TVDI, baseados na adequação de elementos como: área de informação, disposição de botões, posição do menu, padrão de cor, redimensionamento de tela, informações extra e etc. Um documento final NCL gerado pela ferramenta MARKER é iniciado a partir da implantação deste padrão modificando e inserindo apenas os elementos e atributos definidos entre as tags <region>,
<descriptorBase> e <body>.
12 Na linguagem NCL os sincronismos dos elementos são realizados por sua relação de causalidade definida pelos conectores, onde cada conector representa a relação de causa que pode ser utilizada por um elemento <link> na definição de relação entre objetos (SOARES & BARBOSA, 2012).
92
Os outros elementos serão inseridos no decorrer da construção da aplicação e seleção dos componentes que irão compor o documento que será preenchido automaticamente pela ferramenta MARKER a partir deste template.
4.2.2 Interface Gráfica
A interface gráfica do protótipo MARKER é iniciada com uma tela inicial contendo instruções de uso e a disponibilização das funcionalidades iniciais para se trabalhar com o protótipo da ferramenta. Na Figura 24 podemos verificar a tela inicial do protótipo.
Figura 24. Tela inicial do protótipo MARKER
Fonte: o autor
A tela inicial contém instruções de uso do controle remoto que será emulado após a execução da aplicação utilizando o Ginga4windows Figura 24(1). Na Figura 24(2) é apresentada os passos para acessar um conteúdo utilizando o computador. Cada passo indica o botão correto para acessar, rever e parar um vídeo inserido em uma aplicação criada utilizando o protótipo MARKER. Atalhos para criação Figura 24(3) e abertura Figura 24(4) rápida de um projeto foram adicionados na tela inicial como o objetivo de agilizar estes processos. O desenvolvedor docente pode acessar também os conteúdos referentes que vão dar suporte para que o mesmo possa desenvolver a sua aplicação Figura 24(5). Na Figura 24(6) o usuário do protótipo pode selecionar uma opção para que esta tela inicial não seja mais exibida. Na Figura 24(7) temos o botão para fechar a tela inicial e ter acesso a tela principal do protótipo (Figura 25).
93
Figura 25. Tela principal do protótipo MARKER
Fonte: Sousa (2013)
Na tela inicial é apresentado o Menu que é composto pelo acesso as funcionalidades e informações dispostas pela ferramenta, além da possibilidade de acessar o conteúdo que auxilia o docente na criação de aplicações interativas para o middleware Ginga. Abaixo ao menu, temos a Barra de ferramentas contendo os botões de acesso rápido as funcionalidades. Cada botão é composto por um ícone e uma dica que exibe uma instrução sobre a ação que ele realiza caso seja pressionado.
Na interface principal temos o player que exibirá o vídeo principal. A exibição do vídeo é essencial, devido a identificação dos momentos oportunos para inserção de algum conteúdo como interação.
A barra localizada ao lado do player de vídeo é utilizada para visualizar as interações inseridas na aplicação. Podemos visualizar as informações referentes a cada inserção como: o tempo de início e fim da interação, o ícone utilizado na interação e o tipo de
94
mídias. Outro ponto importante é que barra de interações inseridas é possível excluir o conteúdo inserido a partir do acionamento do botão contendo um “X” vermelho.
4.2.3 Funcionalidades
Nesta seção iremos apresentar as funcionalidades implementadas de acordo com as descrições realizadas na seção 4.1 de modelagem conceitual do protótipo ferramenta. Estas funcionalidades estão descritas da seguinte forma:
Novo Projeto: ao executar a ferramenta MARKER os únicos botões ativos são: Novo
Projeto, Abrir Projeto, Visualizar o conteúdo da TIM e um botão para encerar a aplicação. Na funcionalidade de criar um novo projeto, o docente têm a oportunidade de iniciar a construção de uma nova aplicação para TVDI. O acesso a esta função pode ser realizado de três maneiras, a primeira é utilizando o Menu na opção Arquivo, selecionando a opção Novo Figura 26(b), pelo botão de atalho na barra de ferramentas Figura 26(a) ou utilizando a telha de atalho “Ctrl+N” Figura 26(b). Estas formas de acesso pode ser observada na Figura 26.
Figura 26. Criar novo projeto
Fonte: o autor
Após o acionamento do botão para criação de um novo projeto, a tela com o design da aplicação proposto pelo padrão da BBCi é exibida. Posteriormente avançando na criação do projeto será solicitada a seleção de um plano de fundo para a aplicação e por fim, deve ser
95
inserido o nome do projeto e selecionada uma mídia que corresponderá ao vídeo principal no qual o desenvolvedor docente irá trabalhar, identificando os momentos de interação.
Abrir Projeto: esta opção da ferramenta permite ao desenvolvedor docente selecionar um
projeto que não tenha sido construído, ou seja, ainda não tenha sido finalizado e preparado para execução no middleware. Semelhante a função novo projeto no que diz respeito ao seu acesso, o acionamento desta função gera a solicitação de indicação da pasta do projeto cujo deseja-se continuar o seu desenvolvimento.
Iniciar vídeo: a função iniciar projeto tem como objetivo realizar a inicialização do vídeo
principal para que o desenvolvedor docente identifique o momento desejado de inserir uma marcação. Consequentemente o conteúdo que irá complementar o teor do vídeo principal. Esta iniciação do projeto pode ser realizada tanto acionando o botão de atalho “iniciar” que se encontra na barra de ferramentas, como no controle do player que se encontra abaixo da exibição do vídeo.
Adicionar uma marcação: após a inicialização do projeto com execução do vídeo principal,
a qualquer instante o desenvolvedor docente pode inserir uma marcação como forma de implantar um momento de interação. Dentre as etapas de inserção de marcação será solicitado