Development of an Educational Environment based on Multimedia and Augmented Reality

Transcrição

1 Development of an Educational Environment based on Multimedia and Augmented Reality Eduardo Shiwaku Okawa, Claudio Kirner Instituto de Matemática e Computação Universidade Federal de Itajubá, UNIFEI Itajubá, Brasil dudu.unifei@gmail.com, ckirner@gmail.com Abstract Technology can improve the environment of teachers and students, but several factors make difficult its usage in teaching and learning process. This paper discusses this problem and presents the development of the tool AEMIO, which aims to offer an integrated environment containing media, augmented reality and games to support online teaching and learning. Using a webpage which includes text, image, narration, sound, 3D visualization and further elements, it is possible to present educational information improving the motivation to have better conditions to teach and learn. Keywords educational environment; multimídia; augmented reality; games; online integrated media; Resumo O uso de tecnologia pode melhorar as condições de trabalho de professores e alunos, mas vários fatores dificultam sua inserção no processo de ensino e aprendizagem. Nesse sentido, este artigo discute o problema e apresenta o desenvolvimento da ferramenta AEMIO, que visa oferecer um ambiente integrado de mídias, realidade aumentada e jogos para apoiar uma forma de ensino e aprendizagem online. Por meio de uma página web, com textos, imagens, narrações, sons, vídeos, visualizações 3D e elementos complementares, é possível apresentar informações educacionais, melhorando a motivação para ensinar e aprender. Palavras-Chave ambiente educacional; multimídia, realidade aumentada; jogos; mídias integradas online; I. Introdução O ensino, de maneira geral, ainda limita-se à sala de aula, promovendo pouca motivação, principalmente aos alunos que dispõem de acesso a novas tecnologias, como tabletes e celulares. Pensando em contribuir para uma maior motivação dos alunos, surgiu a ideia de desenvolver uma ferramenta multimídia online, que pudesse ser acessada de qualquer lugar. Além disso, a ferramenta deveria ter características de jogos e permitir que cada aluno pudesse ter a possibilidade de seguir o seu próprio ritmo. Para isso ser possível, foi planejada uma página web, estruturada como um site público, para possibilitar o acesso de pessoas de todas as classes sociais. Nesta página, existem jogos, imagens, vídeos, informações textuais, informações narradas, visualizações 3D e ambientes de Realidade Aumentada, tornando este sistema de ensino diferenciado. A. Objetivo e Resumo do Trabalho O objetivo desse trabalho é discutir e desenvolver ferramentas computacionais de apoio ao ensino e aprendizagem, levando em consideração questões como eficácia, eficiência, disponibilidade, acesso, atratividade, etc. Para isso, foi desenvolvida a ferramenta AEMIO [15], baseada no framework de mídias integradas online (MIIO) [5], incluindo itens que a diferenciam de outras ferramentas, como jogos (Unity) [3], jogos em Realidade Aumentada (RA), e ainda, um ambiente que facilite o aprendizado. Cada página foi estilizada de acordo com o tema proposto, tendo temas variados. Qualquer pessoa será capaz de utilizar essa aplicação em qualquer lugar, sendo necessário apenas ter um dispositivo computacional, internet e uma webcam. Primordialmente, a interface web, foi meticulosamente construída para agradar visualmente e ser de alta usabilidade. Sendo de alta usabilidade, ela estimulará pessoas leigas da área da computação a tentar utilizá-la. Após a pessoa constatar que é simples sua utilização, ela deverá ficar mais motivada à aprendizagem. A ferramenta baseada em Mídias Interativas Integradas online foi proposta de uma forma a apresentar uma boa usabilidade para os usuários. No seu formato original, a ferramenta é composta de links ao redor de uma imagem, na qual em cada ponto o usuário pode visualizar imagens, narrações, vídeos, objetos 3D, textos e ambientes em RA de um tema qualquer. Na nova proposta, os links estão dispostos em duas colunas laterais (direita e esquerda) de uma figura. Essa figura preenche o centro do sistema de forma alongada, dando a possibilidade do usuário navegar sobre ela com a barra de rolagem, isso dá a sensação para o usuário de estar dentro de um ambiente a ser desvendado gradativamente. Em cada ponto, nas laterais da imagem, o estudante pode visualizar imagens relacionadas a textos, vídeos, narrações, objetos 3D e um ambiente de RA. Para complementar o ensino e atrair amantes de jogos, foi disponibilizado um jogo em RA e um para celulares. Esses jogos são simples e intuitivos, mas com o objetivo, de alguma forma, relembrar conceitos aprendidos na seção MIIO. Um dos jogos foi construído com o Unity 3D que é uma ferramenta de autoria integrada para a criação de jogos em 3D, que facilita o desenvolvimento dos games para os desenvolvedores. O outro foi desenvolvido no Flaras [2], constituindo um jogo de RA.

2 B. Metodologia O trabalho foi desenvolvido através da leitura de artigos da pesquisa de aplicativos para o ensino de temas educacionais. Foram pesquisadas tecnologias de desenvolvimento, que dessem suporte ao que seria proposto, para se alcançar o máximo de todos os pontos chaves do projeto. Para isso, foi necessário a pesquisa e estudo de linguagens de programação, como, HTML, CSS, PHP, C#, o uso de frameworks, como JQuery, editores de imagem, modelador 3D, o Flaras, programa de desenvolvimento para RA, Unity para o desenvolvimento de jogos para celular. Todo o desenvolvimento foi acompanhado com testes contínuos para evitar problemas futuros. C. Estruturação do Artigo O artigo, inicialmente, discute algumas formas de ensino no Brasil, destacando conclusões para evidenciar pontos falhos, e desta forma, apresentar o projeto intitulado AEMIO. O projeto visa trazer uma ferramenta computacional, que possa melhorar as condições de ensino e aprendizagem. A seção II contém os trabalhos relacionados, onde são apresentados projetos diversos sobre tecnologias de ensino, que subsidiaram o desenvolvimento da aplicação. A seção III contém o desenvolvimento da aplicação, passando pelas etapas de desenvolvimento do site, do conteúdo e dos jogos. A seção IV mostra os detalhes de utilização da ferramenta e a seção V apresenta a conclusão. II. Trabalhos Relacionados A. Trabalhos que Integram Mídias Em [7], fica claro a importância do papel da tecnologia com relação a um ensino eficiente na educação. Nesse caso, a característica de propiciar a interação e a construção colaborativa de conhecimento da tecnologia de informação e comunicação evidenciou o potencial de incitar o desenvolvimento de habilidades de escrever, ler, interpretar textos e hipertextos. Nesse texto, a autora reforça também, a importância das páginas da Internet e seus hiperlinks que dão acesso a um mundo de informações por meio de palavras, imagens, animações, gráficos, sons, clipes, etc. Os hiperlinks são caminhos de aprendizagem que podem ser acessados sem um roteiro específico, uma vez que cada pessoa começa de onde quiser e pode parar quando estiver satisfeita. Cada um pode seguir seu roteiro, ou seja, pessoas criam o seu conteúdo de forma a ter um ensino personalizado, seguindo sua própria sequência com relação a seus interesses e necessidades. Um projeto, que vem acontecendo na Escola Estadual Antônio Canela, situada na cidade de Montes Claros, MG, mostra o engajamento da diretora, supervisores, funcionários, professores, alunos e comunidade na integração da Tecnologia da Informação e Comunicação na escola. Os alunos são incentivados a criar seus hipertextos e homepages por monitores que são supervisionados por uma professora. B. Trabalho com Realidade Virtual Adição de Patinhos [11] é uma aplicação em Realidade Virtual voltada para a educação infantil, que mistura o lúdico com o real, em aritmética básica. De forma bem simples, em um ambiente totalmente virtual, o aluno pode interagir com os objetos em forma de patinhos, somá-los, e receber o resultado de forma animada, sendo o resultado a quantidade de patinhos dentro da lagoa. A Figura 1 ilustra bem o ambiente virtual criado na aplicação. Fig. 1. Adição de Patinhos. C. Trabalhos com Realidade Aumentada Sistema Solar com Realidade Aumentada (SOL-RA) [6] é uma aplicação voltada ao ensino de planetas, satélites naturais e do Sol. Por meio de um livro (Figura 2) com figuras e textos, além dos marcadores impressos no livro, o conteúdo é transmitido. Seu diferencial é sua potencialização com RA, sendo necessário uma webcam e um computador para poder usar essa tecnologia. Ao posicionar o marcador impresso do livro no campo de visão de uma webcam, é exibido, no monitor ou visualizador, o respectivo planeta da página em questão e, ainda, com um marcador chamado controle é possível colocar o planeta em movimento e até mesmo exibir informações sobre o astro. Uma ferramenta desse porte é muito importante para a evolução do ensino e da educação, porém vemos duas restrições que o deixam limitado. A primeira é que só pode ser usado de modo off-line, ou seja, não abre a possibilidade de ser utilizado em uma página instantaneamente, o que dificultaria na disseminação da aplicação. A segunda é o fato de não possuir vídeos, o que abriria uma porta maior para aprendizagem. Fig. 2. Livro do Sistema Solar com Realidade Aumentada. MiniLabEletroMag-RA [9] é uma aplicação para a aprendizagem de eletromagnetismo com Realidade Aumentada que se propõem a ensinar alguns conceitos de eletromagnetismo de uma maneira diferenciada (Figura 3). Métodos antigos de ensino dificultam o aluno a enxergar esses conceitos relativamente abstratos e tipicamente tridimensionais, exigindo do aluno muita imaginação para entender o que é explicado. Esta aplicação visa auxiliar no ensino de conceitos de corrente elétrica, circuitos elétricos, o campo magnético gerado pela passagem de corrente elétrica por um fio retilíneo e a experiência de Oersted. A Realidade Aumentada torna-se fundamental para o ensino deste tipo de conceito, dando a possibilidade dos alunos interagirem com o

3 experimento, vendo tudo em um ambiente real potencializado com os objetos virtuais e informações sonoras. Outro ponto positivo da aplicação é o fato dela estar disponível na internet 24h por dia nos sete dias na semana, sendo possível o acesso e uso de alunos de qualquer lugar do mundo. Esta aplicação tem uma parte de visualização e sonora muito rica, porém, faltamlhe mais informações textuais, para conseguir um ensino mais profundo. Fig. 5. RE-MIIO-Arco-Íris. Fig. 3. Imagens da aplicação MiniLabEletroMag-RA. Aritmética para Crianças [12] é uma aplicação de Realidade Aumentada, voltada para o ensino de matemática básica. Com alguns marcadores, o aluno consegue se entreter e ao mesmo tempo visualizar ilustrações para aprender a fazer contas de somar. Em um ambiente real, onde o próprio jogador consegue se ver, objetos virtuais como imagens, objetos em 3D de patinhos e narrações, exemplificam contas de matemática. Esta aplicação se mostra muito útil para ensinar a somar, apenas brincando, porém, aliada a outras formas de ensino com textos, imagens e vídeos ela poderia ser ainda mais eficaz. Na figura 4, é possível ver algumas cenas da aplicação em funcionamento. O REA-MIIO-Colearn [13] é uma aplicação que utiliza o framework MIIO que tem o objetivo de mostrar de forma rápida, informações referentes ao livro Recursos Educacionais Abertos e Redes Sociais (Colearn) [10]. Na figura 6, é possível verificar a estrutura da aplicação. Por meio de uma figura auto explicativa, players de narração, vídeos e imagens, o REA traz informações do Colearn. O objetivo deste livro é apresentar estratégias significativas fundamentadas em bases teóricas e práticas sobre os Recursos Educacionais Abertos. Ele pode ser produzido, reutilizado e disseminado para promover a aprendizagem colaborativa aberta. Fig. 6. Estrutura do REA-MIIO-Colearn. Fig. 4. Cenas da Aplicação de Aritmética para Crianças. D. Trabalhos com Mídias Interativas Integradas Online (MIIO) RE-MIIO-Arco-Íris [8] é uma aplicação que utiliza o framework MIIO e seu tema é o Arco-Íris. Intitulada também como figura que fala, seu objetivo é ensinar sobre o arco-íris, suas características, suas cores, etc. Na figura 5, é possível ver players que emitem narrações, explicando cada ponto, podendo o usuário seguir qualquer sequência que quiser. E. MIIO com Realidade Virtual, Realidade Aumentada e Jogos Segundo [4], a Internet é um fenômeno irreversível, por isso temos visto uma grande migração de aplicações para este meio. Em relação à Realidade Aumentada, vem se verificando um novo foco que seria a Realidade Aumentada Online na Educação. A Realidade Aumentada veio para modificar o ambiente de estudo, modificando o modo de como uma pessoa lida com as informações, sendo a pessoa capaz de aprender com muito mais facilidade e de uma maneira mais agradável, por isso, a internet se encaixa com propriedade nessa questão. Então, a Realidade Aumentada Online vem com a motivação de levar a todos, ricos, pobres, leigos ou especialistas, meios para eles terem acesso a informações com uma tecnologia que os auxiliem a aprender.

4 Recursos Educacionais Baseados em Mídias Interativas Integradas Online (REMIIO) [1] são aplicações desenvolvidas com o framework chamado Mídias Interativas Integradas Online. Pode-se observar que tal ambiente, munido de textos informativos, narrações complementares, vídeos, objetos 3D e ambientes de realidade aumentada de um determinado tema, gera uma ferramenta propícia para o aprendizado. Porém, pode-se ver falhas em relação a sua usabilidade e, ainda, algo que acrescente um diferencial extra, como por exemplo, RA, ambientes virtuais e jogos para celular. Propõem-se então, a ferramenta AEMIO, que tem o objetivo de juntar varias ferramentas propícias para a aprendizagem com uma interface intuitiva, para assim gerar um ambiente eficaz de aprendizagem completa. III. Desenvolvimento A. Estrutura As Mídias Interativas Integradas Online são conceitos de Hipermídia que contém elementos tais como, imagens, textos, narrações, vídeos, objetos 3D [14], sendo ela a base do desenvolvimento do AEMIO. É uma página web, que trabalha como uma interface, contendo uma imagem principal que guia o usuário em um ambiente diferenciado, colocando em sua disposição botões. Em cada botão há textos com imagens, um player com narração sobre o conteúdo proposto, um vídeo, um ambiente de realidade virtual e um de realidade aumentada. Além disso, é disponibilizado um jogo para celular e um jogo em realidade aumentada. Essa página web foi feita para o acesso de usuários via navegador de computador, celular e tablete. B. Site O site foi planejado, dispondo seus botões de interação com duas colunas laterais a uma imagem central (Figura 7), como se fosse uma timeline, onde o usuário tem condições de seguir a sequência que quiser para interagir com os elementos. estilo das páginas foram utilizados a linguagem CSS e o framework IONIC. Além disso, foram utilizados o Javascript e o JQuery para alguns efeitos na página. Para o desenvolvimento do back-end, foi utilizado a linguagem PHP. Todo o design, incluindo os botões, o logo, os banners e etc., foi feito com o software Fireworks e o Inkscape. As narrações foram gravadas com o software Audacity e o player utilizado foi o JWPlayer, que suporta tanto dispositivos móveis quanto computadores. C. Realidade Virtual No desenvolvimento dos objetos 3D, para uso na Realidade Virtual, foram utilizados alguns programas para a modelagem e para edição de imagens. Para a modelagem 3D, foram utilizados os modeladores 3D Vivaty Studio e o Blender. Para a edição de todas as imagens inseridas nas modelagens foi utilizado o editor de imagens Fireworks. O software utilizado para a visualização dos objetos 3D foi o Cortona 3D Viewer. D. Realidade Aumentada No desenvolvimento dos aplicativos de Realidade Aumentada, foram utilizados os objetos 3D, criados no Vivaty e Blender, e foi utilizado o programa Flaras. O Flaras é um software de desenvolvimento de aplicações de RA que não necessita de programação. Ele disponibiliza uma interface intuitiva, com botões autoexplicativos e uma janela onde é possível posicionar e interagir com os elementos da cena. Com o Flaras, foi possível à criação de um aplicativo por planeta, incluindo Sol e Plutão, que há pouco tempo passou de planeta para planeta anão. Para cada aplicação, foram posicionados pontos, que exibem objetos. Como consta na figura 8, para o primeiro ponto, existem dois objetos, o planeta Júpiter estático e outro em movimento, pois dessa maneira, quando o usuário clicar no planeta ele começa a girar. No segundo ponto, há uma imagem do espaço sideral. Fig. 7. Interface do site AEMIO. A página foi toda desenvolvida no programa Dreamweaver, que é um software de desenvolvimento de páginas web profissional. Foi utilizada, para o desenvolvimento do front-end da página, a linguagem HTML para o desenvolvimento da estrutura do site, e para o Fig. 8. Interface do Flaras. E. Jogo para Celular No desenvolvimento do jogo para celular, foi utilizado o software Unity, sendo a linguagem de programação utilizada, o C#. Na criação do personagem, ambiente e todos os elementos do jogo, foram utilizados o Fireworks e o Inkscape.

5 F. Conteúdo Inicialmente, como projeto piloto, foi proposto o tema sobre o Sistema Solar. O tema Sistema Solar aborda informações sobre os planetas, o Sol, entre outros elementos que compõem o sistema. Todo o conteúdo do site, que está disposto em forma de narração, texto, vídeo, imagem, RV e RA foi pesquisado de sites especializados sobre o assunto. IV. Utilização Para utilizar o site, deve-se seguir a imagem central como uma timeline, interagindo com os botões que estão dispostos em duas colunas: uma à esquerda e outra à direita da imagem central. Ao final da imagem, que é o final de todas as informações feitas para o usuário, existe um jogo para celular com o nome de Flappy Earth e um jogo de Realidade Aumentada com o nome de Ordene os Planetas. A. Botão Info Ao clicar no botão info, um modal (Figura 9) é aberto sobre a página atual, fazendo com que o usuário tenha todas as informações do respectivo elemento (planeta, planeta anão ou o Sol). Essas informações são passadas por meio de textos e imagens. Além disso, um player é disponibilizado para informações extras que são narradas. Fig. 10. Interface do Ambiente Virtual. Caso o usuário esteja acessando o site via celular ou tablete, um app deve ser instalado, o FreeX3D. C. Botão RA Ao clicar no botão RA, um modal é aberto com uma imagem do objeto. Para ter acesso a esse conteúdo, é necessário clicar na imagem. Neste instante, se abrirá uma nova janela onde será necessário uma webcam instalada e um marcador impresso. Para imprimir o marcador, existe, abaixo da imagem, um botão de como utilizar a aplicação. D. Botão Vid Ao clicar no botão Vid, um modal (Figura 11) é aberto com um vídeo relacionado à área selecionada. Fig. 9. Modal de Informações. B. Botão 3D Ao clicar no botão 3D, é aberto um modal, em que é exibida uma imagem do objeto em 3D que será aberto em um Ambiente Virtual. Para isso, um plugin é exigido, como o Cortona 3D. Tendo ele instalado no computador, basta clicar na imagem e abrir o objeto. O ambiente virtual (Figura 10) possibilita ao usuário navegar pela cena caminhando, voando, entre outras opções. Fig. 11. Modal de vídeo. E. Jogo para Celular - Flappy Earth O Flappy Earth é um jogo de aventura, onde o personagem principal é um planeta com asas. Seu objetivo principal é manter-se vivo, desviando dos asteroides que aparecem repentinamente. A cada asteroide desviado, a pontuação é incrementada. Ao fundo do jogo é possível ver o espaço sideral, estando o Sol na parte de baixo.

6 forma diferenciada, no sentido de o aluno descobrir o conteúdo de uma maneira não entediante, o sistema oferece a liberdade que o usuário precisa. Como projetos futuros, serão criadas aplicações com temas variados para o sistema AEMIO, incluindo áreas como geografia, matemática, história, física, entre outros. Além disso, será feita uma avaliação do sistema por meio de questionário, levando em consideração questões como usabilidade, facilidade, interatividade e etc. Fig. 12. Jogo Flappy Earth. F. Jogo em RA - Ordene os Planetas Ordene os Planetas é um jogo com RA do tipo teste. Ele tem o objetivo de fazer com que o usuário relembre algum tipo de informação passada durante os seus estudos no sistema. O objetivo principal deste jogo é a ordenação dos planetas na sequência correta, do mais próximo, ao mais distante do Sol. Desta maneira, os planetas aparecem desordenados e o usuário deve levar cada planeta ao seu lugar correto. Fig. 13. Jogo Ordene os Planetas. V. Conclusão A inserção de tecnologias em ambientes educacionais proporciona maior interatividade e consequentemente estímulo ao usuário. A Realidade Aumentada, por exemplo, trouxe um ambiente fora do comum ao usuário, moderno e versátil, que pode mudar o paradigma de ensino e aprendizagem. O ambiente de ensino AEMIO traz uma forma mais flexível de se aprender, na qual o usuário segue o seu ritmo. Varias opções são disponibilizadas, atendendo desde pessoas que gostam de ler a pessoas que gostam de jogar. De uma Referências [1] C. Kirner, Recursos Educacionais baseados em Mídias Interativas Integradas Online, Disponível em: < Acesso em: 19/04/2014. [2] R. C. Souza, H. D. F. Moreira e C. Kirner, FLARAS 1.0 Flash Augmented Reality Authoring System, e-book, Disponível em: < Acesso em: 19/04/2014. [3] Unity, Disponível em: < Acesso em: 19/04/2014. [4] C. Kirner, T. G. Kirner, M. F. Rezende Junior e R. C. Souza, "Realidade Aumentada Online na Educação Aberta." In Open Educational Resources and Social Networks: Co-Learning and Professional Development, edited by A Okada, st ed. Scholio Educational Research & Publishing, August [5] C. Kirner, Mídias Integradas Online, Disponível em: < Acesso em: 09/06/2014. [6] E. S. Okawa, C. Kirner e T. G. Kirner, Sistema Solar com Realidade Aumentada, Anais do VII Workshop de Realidade Virtual e Aumentada - WRVA 2010, Porto Alegre: SBC, pp [7] M. E. B. de Almeida, Prática e Formação de Professores na Integração de Mídias. Disponível em: < o19.pdf>. Acesso em: 09/06/2014. [8] C. Kirner, Recurso Educacional baseado em Mídias Interativas Integradas Online - Arco-Íris, Disponível em: < Acesso em: 09/06/2014. [9] R. C. Souza e C. Kirner. MiniLabEletroMag-RA (Mini laboratório de Eletromagnetismo com Realidade Aumentada). Disponível em: < Acesso em: 10/06/2014. [10] A. Okada, Recursos Educacionais Abertos e Redes Sociais: coaprendizagem e desenvolvimento profissional. Ebook, The Open University, UK, Scholio Educational Research & Publishing, Creative Commons License, ed Disponível em: < Acesso em: 11/06/2014. [11] C. Kirner, Adição de Patinhos. Disponível em: < Acesso em: 13/06/2012. [12] C. Kirner. Aritmética para Crianças. Disponível em: < Acesso em: 13/06/2014. [13] Adaptado por C. Kirner, Hipermídia Online, Creative Commons License, Disponível em: < Acesso em: 11/06/2014. [14] C. Kirner, T. G. Kirner, C. S. Rezende, J. C. N. C. Neiva, L. C. Freitas, L. A. G. Nogueira e R. E. P. L. Barbosa, Recursos Educacionais com Mídias Interativas Integradas Online Animais, Disponível em: Acesso em: 10/06/2014. [15] E. S. Okawa, C. Kirner, Desenvolvimento de Aplicações Educacionais com Mídias Integradas Online envolvendo Realidade Virtual, Aumentada e Jogos, Disponível em: < Acesso em: 15/09/2014.