Editor de Recursos Educacionais Para Mesa Tangível

Versão 1.3 – Outubro de 2020

©2020 – Universidade Federal do Rio Grande do Sul – UFRGS
Centro Interdisciplinar de Novas Tecnologias na Educação – CINTED
Programa de Pós-Graduação em Informática na Educação – PPGIE

eduba.editor@gmail.com

Desenvolvido por:Evandro Preuss
 
Orientação: Liliana Passerino (In Memoriam)
Dr. Renato Ventura Bayan Henriques
Dra. Sandra Baldassarri


Manual de Utilização do Software


Sumário

1 Introdução
2 Interface do editor
2.1   Área de edição da cena
2.2   Botões do arquivo da aplicação
2.2.1   Nome da Aplicação
2.3   Botões do controle de cena
2.4   Botões de proporção de tela
2.5   Botões de elementos
2.5.1    Configuração de Cena
2.5.2    Adicionar Texto
2.5.3    Adicionar Imagem
2.5.4    Adicionar Vídeo
2.5.5    Adicionar Área de Interação
2.5.6    Configurar Feedback
2.5.7    Lista de Fiduciais
2.5.8    Configurar Requisitos
3 Emulador
4 Roteiro para criação das aplicações
5 Animações de Imagens

1 Introdução

O Editor de Recursos Educacionais Tangíveis e Eletrônicos Eduba permite criar atividades para uma mesa tangível. O editor faz parte do projeto Nidaba, desenvolvido no Programa de Pós-Graduação em Informática na Educação (PPGIE) da UFRGS. O Projeto recebeu esse nome em referência às escolas dedicadas à Nidaba, que era uma deusa suméria da escrita, aprendizado e astrologia, atuando como instrutora e guardiã do conhecimento para homens e deuses. Os sumérios inventaram a escrita entre 3500-3000 aC como meio de comunicação para o comércio. A escrita cuneiforme utilizava impressões em argila e sua forma mais antiga conhecida era pictografia - símbolos que representavam objetos/conceitos. As escolas dedicadas a Nidaba eram chamadas E-DUB-A, e desta forma Nidaba tornou-se a deusa da alfabetização e padroeira da arte da escrita. Nosso sistema Nidaba pretende, ao assumir esse nome, recuperar o poder do pictográfico na representação de conhecimento e dos objetos tangíveis, como as tábuas de argila como suporte. Todos esses elementos estarão presentes em nosso ambiente, agora atualizados e diversificados com pictogramas, sons, animações e objetos tangíveis.

O Editor é baseado numa interface web e as atividades são formadas por um conjunto de cenas. Em cada cena é escolhida a imagem de fundo, o áudio de narração ou explicação e as demais imagens que compõem o cenário, com possiblidade de animações dessas imagens. Quando há interação com objetos tangíveis, no editor são delimitadas as áreas dessa interação e a configuração dos marcadores fiduciais (fig. 1) corretos e incorretos e o respectivo feedback sonoro ou pictográfico para cada resposta. Esses marcadores fiduciais são fixados na base dos objetos reais que farão a interação com a mesa tangível.

Figura 1 – Marcadores fiduciais fixados na base dos objetos reais

Na tela inicial do Eduba Editor (fig. 2) é possível escolher o idioma (Português, Inglês ou Espanhol), Criar Nova Aplicação ou Abrir Aplicação Existente.

Figura 2 – Tela inicial do editor Eduba

2 Interface do editor

Ao criar uma nova aplicação, é solicitado que se informe o nome da mesma e recomenda-se que não sejam usados caracteres especiais, espaços em branco, cedilha e caracteres acentuados, pois esses nomes de arquivos podem apresentar problemas ao utilizar a aplicação em outro computador. Se utilizar esses caracteres, o sistema vai substituí-los por um hífen.

Após criar ou abrir uma aplicação, a interface do editor (fig. 3) apresenta ao centro a cena que está em edição.
Na parte superior os botões relacionados ao arquivo da aplicação, ao controle de cena e proporção de tela.
Na esquerda apresenta os elementos que serão utilizados para compor a cena.
Na direita, apresenta as propriedades de acordo com o elemento que estiver selecionado.

Figura 3 –- Interface do editor Eduba

2.1 Área de edição da cena

Na área central do editor devem ser inseridos os elementos da cena, que podem ser escolhidos na barra de botões de elementos, que fica à esquerda do editor. Ao selecionar um elemento na barra, deve-se clicar na área de edição da cena e definir sua posição, arrastando o elemento, definir o seu tamanho, redimensionando-o com o mouse, a partir de suas bordas ou definir suas propriedades, na parte direita do editor.

Clicando sobre o ícone do Eduba Editor , no canto superior esquerdo, será exibida a ajuda do sistema, com o manual de utilização do software.

2.2 Botões do arquivo da aplicação

Na parte esquerda da barra superior, estão os botões relacionados ao arquivo da aplicação:

2.2.1 Nome da Aplicação

Ao lado dos botões do arquivo da aplicação aparece o nome da aplicação.
Clicando sobre o nome da aplicação aparece o link para visualização da aplicação no emulador, que pode ser disponibilizado para outras pessoas que não tem acesso ao Eduba Editor.
Esse link é somente para visualizar a aplicação, sem permissão de edição

2.3 Botões do controle de cena

No centro, estão os botões de controle de cena. Uma aplicação é um conjunto de cenas, que são exibidas de acordo com a ordem programada:

2.4 Botões de proporção de tela

Na parte superior direita da tela estão os botões de proporção de tela, para que a mesma fique de acordo com a proporção do projetor e da mesa tangível. O primeiro detalhe da aplicação a ser editada é definir a resolução da aplicação a ser editada, caso a proporção seja importante, especialmente se tiver círculos e imagens de pessoas, para evitar distorções:

2.5 Botões de elementos

Em cada cena, podem ser definidas e inseridos os elementos que compõem as cenas, a partir da barra de elementos, à esquerda do editor. Ao selecionar um elemento, suas propriedades são exibidas na área à direita do editor.

2.5.1 Configuração de Cena

O botão   Configurar Cena permite definir as propriedades da cena:

2.5.2 Adicionar Texto

O botão Adicionar Texto permite adicionar texto à cena e definir posição X, Y, cor, tamanho, texto e fonte. Permite alterar a ordem de posicionamento na cena: trazer para frente e enviar para trás, copiar e excluir o objeto.

2.5.3 Adicionar Imagem

O botão Adicionar Imagem (Botões de Elementos) permite adicionar uma imagem na cena. Recomenda-se utilizar imagens no formato .PNG ou .GIF (aceita GIF animado) com fundo transparente, se o fundo da cena não for totalmente branco.

Pode-se arrastar e redimensionar a imagem ou digitar manualmente os valores das coordenadas X e Y e da Largura e Altura nas propriedades da imagem. Se alterar manualmente a largura, a altura será ajustada automaticamente para manter a proporção. Se alterar a altura, a proporção não será mantida.

A imagem pode se alterada clicando sobre o botão (Imagem: ) Alterar Imagem, nas Propriedades de Imagem

Há os botões que permitem excluir o elemento de imagem da cena, alterar a ordem de posicionamento na cena: trazer para frente e enviar para trás, espelhar horizontalmente, espelhar verticalmente, girar 45º e copiar o elemento para ser colado na mesma cena ou em outra cena. Se for na mesma cena, ela será colada na posição em que for clicado. Se for em outra cena, ela será colada exatamente na mesma posição original, independente de onde for clicado.

2.5.4 Adicionar Vídeo

O botão Adicionar Vídeo permite adicionar um vídeo na cena, definindo o seu tempo de Início, Velocidade de reprodução, Volume (0 a 100) e se o mesmo executará uma única vez ou se irá Repetir indefinidamente. Permite alterar a ordem de posicionamento na cena: trazer para frente e enviar para trás, copiar e excluir o objeto.

2.5.5 Adicionar Área de Interação

O botão Adicionar Área de Interação adiciona uma área de interação através dos marcadores fiduciais na aplicação.
O princípio de interação numa mesa tangível baseia-se na colocação de objetos reais com marcadores fiduciais (identificados com números de 1 a 40) em sua base sobre áreas de interação específicas na superfície da mesa tangível.
Esta área de interação define as posições e coordenadas destas áreas, quais os elementos de marcação fiduciais corretos e incorretos e os respectivos sons que serão executados e imagens que serão exibidas.

Após adicionar e posicionar a área de interação no local adequado, é necessário definir:

Para que ocorra a interação, é necessário definir um ou mais marcadores fiduciais corretos ou incorretos para a área:

Pode-se adicionar várias listas de fiduciais. Normalmente uma área tem pelo menos um fiducial correto e um asterisco (* - todos os demais que não são corretos) como fiducial incorreto, mas podem ser definidas várias listas com fiduciais corretos e incorretos.

A execução da aplicação executa e dá o feedback para a primeira lista que satisfaz a condição correta.

Se duas ou mais listas de incorretos tiverem os mesmos parâmetros, a primeira vez é executada a primeira lista, a segunda vez é executada a segunda lista, a terceira vez a terceira lista, e assim sucessivamente até a quantidade de listas que há, repetindo sempre a última, quando exceder a quantidade de listas. Isto é útil para permitir diferentes feedbacks de erro, por exemplo, mudando a explicação à medida que os erros se repetem, podendo inclusive enviar para uma cena (definindo a "Próxima cena") com uma explicação mais detalhada, dicas e lições adicionais.

2.5.6 Configurar Feedback

O botão Configurar Feedback permite configurar (opcionalmente) a imagem e áudio de feedback genéricos para todos os acertos e erros das áreas de interação da cena, de acordo com o fiducial colocado na área.
Se o áudio de acerto ou de erro é o mesmo para todos os fiduciais, ao invés de configurar em cada área de interação e cada lista de fiduciais, permite definir isso no feedback:

2.5.7 Lista de Fiduciais

O botão   Lista de Fiduciais permite cadastrar nomes significativos para os fiduciais para facilitar o preenchimento das listas de fiduciais.
Automaticamente serão incluídos nessa lista todos os fiduciais que são utilizados na aplicação. Na caixa de texto da esquerda está o número de identificação do fiducial e na caixa de texto da direita o nome do mesmo. Opcionalmente pode ser alterado o nome do marcador fiducial para que ele seja mais significativo.

2.5.8 Configurar Requisitos

Os requisitos servem para criar atividades respeitando as ordens de sequências, como por exemplo, uma receita de bolo onde deve ir primeiro a farinha, depois o leite, depois os ovos e por último o fermento.
Para isso, devem ser criados os requisitos, na Lista de Requisitos, clicando em Adicionar Requisito e alterando o nome para um nome significativo.

Quando há requisitos, a lista de fiduciais da área de fiducial apresenta novos campos relacionados aos requisitos:

Por exemplo, no caso da receita de bolo com farinha, leite, ovos e fermento, deve ser adicionada uma Área de Fiducial com 4 listas de Fiducial e os respectivos sons de erro de condição:

3 Emulador

O Eduba Editor possui um emulador que permite executar testar as aplicações sem a necessidade de uma mesa tangível, no computador ou tablet.

Para testar as aplicações, ao clicar no botão Apresentar cena, a aplicação é executada através do Emulador. Para uma melhor visualização e manter a proporção da tela recomenda-se que o navegador esteja com a visualização em tela cheia (pressionar F11 para exibir a tela cheia).
A figura 4 apresenta a tela do emulador, com os fiduciais da aplicação na parte inferior.

Figura 4 - Emulador

Para que as interações ocorram, basta arrastar os quadrados que representam os fiduciais, dispostos na parte inferior, para a área de execução da aplicação, posicionando-os sobre as áreas de interação. Os fiduciais podem ser arrastados ou permite clicar sobre o mesmo e clicar sobre a área desejada. Ao clicar no canto superior direito do quadrado que representa um fiducial, o mesmo pode ser rotacionado, alterando sua orientação.

Durante a execução, podem ser utilizadas as seguintes funcionalidades, de acordo com a tecla pressionada:

4 Roteiro para criação das Aplicações

Para criar uma aplicação para uma mesa tangível deve-se:

5 Animações de Imagens

No Eduba Editor é possível fazer animações das imagens.

Animação de Aparecer - Zoom In

A animação mais básica é aquele em que uma imagem simplesmente aparece na tela.
Para isso, basta Adicionar Animação Tipo: Desaparecer, para que a imagem não apareça quando a cena for exibida. Adicionar Animação Tipo: Zoom In - Tempo: 2 segundos.
Com isso, a imagem vai aparecer com um zoom de 2 segundos de duração.

Animação de Movimento

Outra animação básica pode ser obtida com um movimento da imagem da posição atual para uma nova posição.
Para isso, basta Adicionar Animação Tipo: Movimento - Tempo: 1segundo (ou o tempo desejado - quanto maior o tempo, mais lenta é a animação) e arrastar a imagem para a posição desejada. Se precisar, pode redimensionar a imagem.

Animação de Entrar na cena

Uma animação que poder ser feita é aquela em que a imagem entra na cena vindo da esquerda para o centro da tela.
Para isso, basta adicionar uma imagem e Adicionar Animação Tipo: Movimento

- Tempo: 3 segundos e alterar a posição inicial da imagem X: -210. Observe que a imagem do exemplo tem uma largura de 207 pixels, então a posição inicial X deve ser 207 pixels ou mais à esquerda da borda da tela, por isso usamos o valor (negativo) 210, ou seja, a imagem estará a -210 pixels da borda esquerda quando a cena for exibida, estando portanto, fora da área visível da cena. Com a animação, ela vai se movendo até a posição final da animação, aparecendo na cena.

Animação de surgir na cena

Uma das animações interessantes é aquela que a imagem surge na tela aumentado seu tamanho, dando a impressão que ela está vindo de longe para a cena. Para fazer essa animação, vamos escolher uma imagem de uma floresta para ser a imagem de fundo e uma imagem de um macaco que vai aparecer na tela.

No Eduba Editor, escolha a imagem de fundo (1), clique no botão para Adicionar Imagem (2) e clique na posição onde a imagem deve ser inserida (3).

Com a imagem do macaco selecionada, aparecerá as Propriedades da Imagem no painel da direita.

Clique em Adicionar Animação (1) e escolha Desaparecer (2), para que a imagem não seja exibida com a cena.

Clique novamente em Adicionar Animação (3) e escolha Zoom In, com Tempo de 2 segundos (4).

Podemos também adicionar uma animação de movimento.

Clique em Adicionar Animação (1)  e escolha o Tipo: Movimento (2). Arraste a imagem para a posição desejada (3) e altere o seu tamanho (4). Escolha o tempo que deve durar essa animação: 3 segundos (5).

Pronto! Temos uma animação básica.

É só testar, clicando no botão Apresentar cena ( 4 ).

Se quizéssemos, poderíamos ter adicionado um áudio para cada animação, que seria reproduzido durante a animação. Para incluir um áudio, deve-se clicar no ícone da escolha de áudio de cada animação.

Podemos continuar a animação na mesma cena ou numa nova cena. Um jeito fácil de fazer as animações mudando as imagens é numa nova cena.

Ao invés de criar uma nova cena, vamos duplicar a cena atual para aproveitarmos a imagem de fundo e o posicionamento da imagem. Para duplicar a cena, é só clicar no botão Duplicar Cena.

Na cena_2 - certifique-se de estar na cena_2 – (1), como vamos dar sequência na animação, a posição inicial da imagem deve ser a mesma da posição final da cena anterior.

Copie os valores de X Final, Y Final, Largura Final, Altura Final, digitando nos campos X (2), Y (3), Largura (4), Altura (5).

Apague todas as animações anteriores (6, 7 e 8).

Troque a imagem do macaco por uma imagem na qual ele está de costas.

Clique em Adicionar Animação (1), escolha o Tipo: Movimento (2), arraste a imagem para a posição final (3) e altere o tamanho (4), para que ela fique bem pequena, dando a impressão de estar longe. Altere o Tempo de duração da animação para 2 segundos (5).

Adicione mais uma animação (6) e escolha Tipo: Zoom out (7), para que a imagem vá diminuído até sumir. Defina o tempo de animação para 2 segundos (8).

Só falta definir a transição da cena_1 para a cena_2.

Volte para a cena_1 e nas Propriedades de Cena escolha a Próxima cena: cena_2, Ir após: 6 segundos.

Técnicas com edição de imagens

Para a animação, algumas técnicas de edição de imagens podem ser usadas.

Usamos a imagem do macaco, na qual foi deixado o fundo transparente e salva como formato PNG.

Para fazer o macaco virado de costas, pintamos de marrom a sua cara e a barriga e pintamos de rosa as orelhas e uns detalhes do rabo sobre as mãos.

 

Criação de GIFs Animados

Outra técnica que pode ser utilizada é criar um GIF animado da imagem. Para isso, basta espelhar horizontalmente a imagem e salvar a imagem com outro nome.

   

No site https://gifmaker.me/ é possível criar um GIF animado a partir do envio de 2 ou mais imagens.

Assim, o macaco parece que fica se "mexendo" o tempo todo.

No Eduba Editor, ao invés de usar uma imagem estática PNG, pode ser usado um GIF animado.