CENTRO UNIVERSITÁRIO ADVENTISTA DE SÃO PAULO CAMPUS ENGENHEIRO COELHO CURSO SISTEMAS PARA INTERNET ELIANE ALEXANDRE TAMARA PAULO AGUIAR

Transcrição

1 CENTRO UNIVERSITÁRIO ADVENTISTA DE SÃO PAULO CAMPUS ENGENHEIRO COELHO CURSO SISTEMAS PARA INTERNET ELIANE ALEXANDRE TAMARA PAULO AGUIAR O USO DE JOGOS EDUCATIVOS NO ENSINO DA MATEMÁTICA ELEMENTAR ENGENHEIRO COELHO SÃO PAULO 2012

2 ELIANE ALEXANDRE TAMARA PAULO AGUIAR O USO DE JOGOS EDUCATIVOS NO ENSINO DA MATEMÁTICA ELEMENTAR Trabalho de Conclusão de Curso do Centro Universitário Adventista de São Paulo do curso de Sistemas para Internet, sob orientação do Prof. Me. Percival Lucena. ENGENHEIRO COELHO 2012

3 Trabalho de Conclusão de Curso do Centro Universitário Adventista de São Paulo, do curso de Sistemas para Internet apresentado e aprovado em de de Prof. Me. Fabiano Alves de Souza Prof Me. Thales de Társis Cézare

4 Não andeis ansiosos de coisa alguma; em tudo, porém, sejam conhecidas, diante de Deus, as vossas petições, pela oração e pela súplica, com ações de graça. (Filipenses 4:6)

5 AGRADECIMENTOS À Deus pela direção, pelo entendimento, pela paciência e por nos conceder forças, saúde e a vida; À meu querido irmão e Professor Elias Alexandre pelos conselhos, dedicação e orientação; Ao nosso orientador Prof. Me. Percival Lucena, pela competência, experiência e dedicação com que orientou este trabalho; Aos nossos queridos pais, por acreditar em nosso potencial e por apoiar as nossas decisões, pelos conselhos e amor; À todos os professores e colegas do curso de Sistemas para Internet que estiveram conosco até aqui;

6 Ouço e esqueço Vejo, e me lembro Faço e compreendo Provérbio chinês

7 RESUMO O presente trabalho tem por objetivo apresentar o projeto Mathéma, um jogo infantil que explora as equações das quatros operações aritméticas básicas. Voltado para atividades lúdico-educativas, o protótipo desenvolvido pretende auxiliar no aprendizado da matemática elementar. O trabalho desenvolvido apresenta um protótipo de jogo digital online acessível através de um navegador web. O protótipo foi construído utilizando as linguagens JavaScript e HTML5. O protótipo desenvolvido embora dependente de um navegador web pode ser executado mesmo quando não há conexão com a Internet. Foram documentadas as diversas etapas da criação do protótipo do jogo e realizou-se uma comparação do protótipo com outros jogos educativos digitais já existentes no mercado. Palavras Chave: Jogo Educativo; JavaScript; Matemática.

8 ABSTRACT This work aims to present the Mathéma project, a children's game that explores the four basic arithmetic operations. Aimed at recreational and educational activities, the prototype is intended to assist in the learning of elementary mathematics. The work presents a prototype of a online digital game accessible via a web browser. The prototype was built using HTML5 and JavaScript languages. The prototype developed can run on offline mode even when no Internet connection available. The documentation provides details about the tool's requirements, designs and deveopment. This works also provide a brief comparison between Mathéma and some other digital educational games available on the market. Key Words: Educational Games; JavaScript; Mathmatics.

9 LISTA DE FIGURAS Figura 1-Diagrama de Caso de Uso -"Configuração do jogo" Figura 2-Diagrama de Caso de Uso-"Jogo em Andamento" Figura 3-Diagrama de Caso de Uso-Fim de jogo-"jogador acertou todas as equações" Figura 4-Diagrama de Caso de Uso- "Jogador continua jogar ate o acerto da equação" Figura 5-Diagrama de Classe Figura 7-Diagrama de Sequência-"Se o jogador acerta todas as equações" Figura 6-Diagrama de Sequência-"Escolhas Durante a execução do jogo" Figura 8-Diagrama de Sequência-"Jogador continua a jogar ate o acerto da equação" Figura 9-Mapa de navegação do Jogo Figura 10- Tela Inicial (Configuração do Jogo) Figura 11-Tela de baixa e alta fidelidade da execução do jogo Figura 12-tela inicial(configuração do jogo) Figura 13-Tela do jogo(em execução)

10 LISTA DE ABREVIATURAS, SIGLAS OU TERMOS OPERACIONAIS HTML5 Hypertext Markup Language, versão 5 HTML- Hypertext Markup Language PROJ- Projetos e estudos sobre o uso de jogos de aprendizagem MIT- Massachusetts Institute of Technology SWF- Shockwave Flash File JVM- Java Virtual Machine AWT- Toolkit Abstract Window W3C- World Wide Web Consortium DOM- Document Object Model

11 SUMÁRIO 1- INTRODUÇÃO Objetivo METODOLOGIA REVISÃO BIBLIOGRÁFICA Jogos educacionais e o papel do professor Jogos educacionais e a influência nos alunos Tecnologias para desenvolvimento de Jogos online Flash X HTML Adobe Flash Porque o HTML 5? JavaScript Prototipação de baixa e alta fidelidade PROJETO E DESENVOLVIMENTO DO JOGO MATHÉMA Requisitos do sistema Diagramas de caso de uso Modelagem Diagrama de Classe Diagramas de Sequência O mapa de navegação Prototipação de Baixa e Alta Fidelidade Interface do Jogador CONCLUSÃO Trabalhos futuros REFERÊNCIAS BIBLIOGRÁFICAS Apêndice Código Fonte do Jogo... 29

12 11 1- INTRODUÇÃO A dificuldade no aprendizado e a falta de compreensão da matemática, são fatores quotidianos na vida de adultos e crianças. Devido as dificuldades iniciais de aprendizado muitas crianças desistem do estudo da Matemática e se dedicam a outras áreas. Tal deficiência acompanha a criança em sua vida adulta limitando seu raciocínio e tomada de decisão. Há necessidade dos professores romperem com a forma tradicional de ensino, utilizando métodos inovadores que possam incluir uma parcela maior das crianças no aprendizado efetivo da matemática Objetivo Os jogos educacionais têm contribuído para minimizar as dificuldades encontradas no processo de aprendizado. Esse projeto tem como proposta auxiliar o professor com uma ferramenta que apresente o conteúdo de matemática elementar e divertida e dinâmica. É esperado que os alunos que utilizem esta ferramenta apresentem uma melhor compreensão das operações básicas de soma, subtração, multiplicação e divisão. O foco deste protótipo é uma ferramenta online, intermediando e facilitando o aprendizado do aluno, com uma interface amigável, que pode ser executada diretamente no navegador WEB.

13 METODOLOGIA Pesquisa bibliográfica, exploratória e investigativa. Estratégia Interativo e Incremental Implementação Modelagem Teste

14 REVISÃO BIBLIOGRÁFICA 3.1 Jogos educacionais e o papel do professor Para Moran (1994) as tecnologias não substituem o professor, mas modificam algumas das suas funções. A tarefa de passar informações pode ser deixada aos bancos de dados, livros, vídeos e programas em CD. O professor se transforma agora no estimulador da curiosidade do aluno por querer conhecer, por pesquisar, por buscar a informação mais relevante. Num segundo momento, coordena o processo de apresentação dos resultados pelos alunos. Depois, questiona alguns dos dados apresentados, contextualiza os resultados, os adapta à realidade dos alunos. Transforma informação em conhecimento com ética. Jogos educativos são mais uma ferramenta disponível ao professor para transmissão de informação e auxilio ao processo educativo. 3.2 Jogos educacionais e a influência nos alunos Para Piaget (1969, p.151) o desenvolvimento mental sofre influência do meio que vive, isto é, se a criança desde pequena tem um convívio junto a música, provavelmente esta se tornará um músico. Seguindo este princípio a experiência agradável da criança com a matemática pode permitir que a criança tenha um melhor desenvolvimento nesta disciplina. Piaget determina dois tipos de aprendizado, o que é absorvido por compreensão e o aprendizado memorizado. No primeiro caso o aluno entende os conceitos que lhe são apresentados, usando o mesmo em outras situações semelhantes. No aprendizado memorizado o aluno que não entende, se esforça para gravar, limitando o seu desenvolvimento (NOÉ, 2012). Segundo Barry (1984, p.36) o aprendizado de conceitos matemáticos requer habilidade de compreensão dos conceitos. O uso de jogos digitais poderá amenizar a até anular os bloqueios que muitas crianças criam e convivem em relação à matemática. A interação lúdica da criança com o jogo pretende criar um estimulo gratificante de forma que a criança possa compreender o funcionamento da matemática elementar e também possa desenvolver conceitos mais avançados a posterior. Existem vários estudos sob o impacto do uso de jogos como ferramenta

15 14 educacional. O psicólogo Daphne Bavelierda junto a um grupo da Universidade de Rochester (LENT, 2010), analisou o desempenho de aprendizagem de 23 rapazes com cerca de 20 anos de idade, que foram divididos em três grupos: jogadores que jogavam todos os dias e jogadores que jogavam ao menos 5 horas por semana e por fim usuários que não jogavam. A pesquisa contou com inúmeros testes, entre eles testes de percepção, precisão, atenção, agilidade de raciocínio e tomada de decisão. Concluiu-se que o primeiro grupo tinham maior agilidade de raciocínio e conseguiam tomar decisões mais rapidamente, em contra partida o terceiro grupo apresentavam apenas precisão. Os resultados de um estudo feito no Reino Unido, em 2001, mostram que o uso de entretenimento interativo, por meio de jogos, desenvolve nos alunos maiores habilidades de leitura e compreensão, bem como o pensamento crítico (KROTOSKI, 2005). Os resultados também sugerem que os jogos promovem o desenvolvimento social, tanto durante os exercícios em classe quanto quando usado apenas para diversão. 3.3 Tecnologias para desenvolvimento de Jogos online. Existem várias tecnologias disponíveis que permitem o desenvolvimento de jogos educacionais online. A seguir será revisado algumas destas tecnologias Flash X HTML5 O Adobe Flash tem animações, interatividade e gráficos ricos para os navegadores da Web, través de um plug-in instalado na área de trabalho.porém, o HTML5 é totalmente suportado nos navegadores, que poderia substituir o Flash completamente, eliminando a necessidade de ferramentas de criação de plug-ins Certamente um número crescente de gigantes da internet pensa em fazer essa migração. A mais famosa, a Apple no ano passado rejeitou a ideia de usar o Flash em iphones e ipads, citando descamação da plataforma e da disponibilidade geral do HTML5, como alternativa, comenta (Jackson, 2011) Adobe Flash Adobe Flash, é uma plataforma de desenvolvimento de sistemas com suporte a gráficos vetoriais, áudios, vídeos e elementos multimídia. A ferramenta permite gerar

16 15 animações e diversos jogos com apresentações dos mais variados tipos, utilizando a linguagem de programação ActionScript. O adobe flash gera arquivos.swf(shockwave Flash File), sites inteiros podem ser feitos em '.swf', permitindo serem executados em navegadores que suportam o plug-in Flash Player (GAY, 2012) Porque o HTML 5? Hypertext Markup Language (HTML5) é a quinta versão do HTML, uma linguagem de estrutura e apresentação padronizada pelo W3C. Essa nova versão possuí suporte a novos elementos multimídia como Canvas, vídeos. O novo padrão vem sendo adotado em navegadores e também como base de aplicativos em diversos tipos de smartphones e tablets. Alguns navegadores que possuem suporte integral ou parcial ao HTM5 incluem: o Internet Explorer 9, Safari 4, Opera 11.61, Firefox 3.6 e o Chrome (HICKSON, 2012). Aplicativos e jogos multimídia podem ser desenvolvidos em HTML5 utilizando-se as linguagens JavaScript (JS) JavaScript A ultima versão disponível da linguagem JavaScript é a versão Esta versão possui suporte a programação orientada a objetos integrada a estrutura de eventos do browsers através do DOM. Por possuir uma biblioteca de funções limitadas, os programas escritos em JS comumente utilizam bibliotecas externas de terceiros como o Jquery, Prototype e Dojo ( KESTEREN, 2012). Contudo, a ferramenta de programação baseada em Eclipse é capaz de converter a linguagem para JS de forma que possa ser executada em qualquer navegador (PAGANI, 2012) Prototipação de baixa e alta fidelidade Protótipos de Baixa Fidelidade: São aqueles que não se assemelham com o produto

17 16 final (ROGERS et al, 2002). São úteis para a exploração e testes na fase inicial de desenvolvimento do sistema, simples, baratos e de fácil produção e alteração facilitando deste modo a exploração e teste de ideias. Estes tipos de protótipos nunca são desenvolvidos com o objetivo de serem incorporados no produto final. Aspectos positivos: custos Reduzidos, menor tempo de desenvolvimento, eficiente para recolha de requisitos de interface, eficiente e facilita múltiplos testes de opções de design. Protótipos de Alta Fidelidade: Os protótipos de alta fidelidade são aqueles que mais se assemelham com o produto final (ROGERS et al, 2002). Utilizam as mesmas técnicas e materiais que o sistema final (ROGERS et al, 2002). São os protótipos indicados quando os objetos são a venda do sistema ou o teste de problemas técnicos. O protótipo ainda deve ter funcionalidades limitadas e os requisitos não funcionais, normalmente, não estão implementados. Aspectos positivos: possuir funcionalidades semelhantes às do sistema final, permitir a definição completa do esquema de navegação, permitir elevado grau de interatividade com os utilizadores, permitir a exploração e testes diversos com um elevado grau de realismo. O Protótipo é um documento de requisitos, facilita a venda da ideia do sistema final.

18 17 4. PROJETO E DESENVOLVIMENTO DO JOGO MATHÉMA Esta seção descreve o processo de desenvolvimento do Jogo Mathéma. O processo teve inicio com a obtenção dos requisitos funcionais através dos casos de uso. A seguir foram analisados os requisitos não funcionais através de cenários. E foi realizada a modelagem do sistema utilizando diagramas de classe, de sequência e mapas de navegação. 4.1 Requisitos do sistema Diagramas de caso de uso No caso de uso "Configuração do jogo", o jogador terá a opção de escolha entre as quatro operações básicas da matemática, são elas: soma, subtração, multiplicação e divisão. A configuração estará pronta e o jogador começará a jogar. Figura 1-Diagrama de Caso de Uso -"Configuração do jogo".

19 18 Após o jogador escolher a operação matemática, e começar a jogar ele, terá a opção de parar o jogo ou voltar para a tela de configuração, para escolher outra operação matemática. Figura 2-Diagrama de Caso de Uso-"Jogo em Andamento". Se o jogador acertar todas as equações, ele voltará a tela de configuração do jogo, para escolher outra operação matemática. Figura 3-Diagrama de Caso de Uso-Fim de jogo-"jogador acertou todas as equações". Se o jogar errar alguma equação do jogo, terá que tentar até ocorrer o acerto, para que passe para próxima equação, durante o jogo, ele tem a escolha de voltar a configuração do jogo e escolher outra operação matemática. Figura 4-Diagrama de Caso de Uso- "Jogador continua jogar ate o acerto da equação".

20 Modelagem. Nesta seção serão descritos os modelos criados para o sistema Diagrama de Classe Figura 5-Diagrama de Classe. O diagrama é composto por quatro classes: jogo.html, jogo.js, estilo.css e tela.js. jogo.html ele é a estrutura principal do sistema, ele utiliza outros artefatos para a realização do jogo, ele utiliza estilo CSS para fazer renderização ou seja para exibição das propriedades gráfica da tela. Ele usa dois arquivos JavaScript para compilar o fluxo da execução do jogo. A tela.js controla a estrutura da tela do jogo e o jogo.js controla a lógica do jogo Diagramas de Sequência A configuração é composta pela escolha de uma das quatro operações básicas:

21 20 soma, subtração, multiplicação, divisão e nível do jogo: fácil, médio e difícil. Figura 6-Diagrama de Sequência-"Escolhas Durante a execução do jogo". Descrição de acordo com o Diagrama da Figura 6, segue esquema de acordo com o Caso de Uso da Figura 2. Figura 7-Diagrama de Sequência-"Se o jogador acerta todas as equações". Diagrama da Figura 7, segue esquema de acordo com o Caso de Uso da Figura 3.

22 21 Figura 8-Diagrama de Sequência-"Jogador continua a jogar ate o acerto da equação". Diagrama da Figura 8, segue esquema de acordo com o Caso de Uso da Figura O mapa de navegação O mapa de navegação é um fluxograma usado para avaliar pela primeira vez o tamanho real do protótipo. Com ele é possível ver a distribuição do jogo e saber quantas vezes o jogador precisará clicar até chegar ao fim do jogo. Também nos permite situar em cada fase seu respectivo conteúdo. Figura 9-Mapa de navegação do Jogo.

23 22 O mapa de navegação mostra como o jogo funciona, onde a primeira tela NOVO JOGO possui as quatro operações básicas da matemática, o jogar escolhe qual operação irá jogar. Ao clicar na operação escolhida abrirá uma nova janela do jogo onde ao topo irá ter a equação a ser resolvida, logo abaixo possui uma tabela com 25 opções de respostas e por ultimo, um botão voltar que leva a tela de configuração do jogo Prototipação de Baixa e Alta Fidelidade Telas de baixa e alta fidelidade, apresentando a configuração do jogo, onde o jogador escolhe qual operação deseja jogar. Figura 10- Tela Inicial (Configuração do Jogo) A tela do jogo é composta por uma equação e um conjunto de resposta aleatória, que o jogador de acordo com sua lógica responde até o termino das vinte e cinco opções de resposta. Ao terminar, volta para tela de configuração do jogo.

24 23 Figura 11-Tela de baixa e alta fidelidade da execução do jogo Interface do Jogador A tela inicial do jogo possui o nome (Mathéma) no topo e ao centro, abaixo possui o nome tela do jogo (Novo jogo), em seguida, possui quatro botões, onde cada um representa uma operação matemática (com o nome e o símbolo da operação), onde o primeiro é soma, segundo subtração, terceira multiplicação e por ultimo divisão. Podemos encontrar o 1º e o 2º botão um do lado do outro já o 3º e o 4º vai estar posicionado abaixo de cada botão anterior. Figura 12-tela inicial(configuração do jogo).

25 24 Ao clicar em um dos botões abrirá uma nova Interface. Logo ao topo e centro da tela o jogador visualiza a equação a ser resolvida, abaixo da equação há uma tabela com vinte e cinco opções de respostas. O jogador terá que selecionar a possível resposta da respectiva equação. Ao acertar a resposta o número da tabela desaparece para que a opção de resposta não seja escolhida novamente. Caso erre a resposta, o jogador será obrigado a responder certo a equação para que possa ser gerada uma nova equação. Abaixo da tabela, possui um botão Voltar, que ao se clicado voltará na primeira interface (Novo Jogo). Ao acertar todas as equações abrirá, a terceira e ultima interface, nela contém um botão de voltar, que ao clicar irá para tela de configuração do jogo. OBS: A 2º interface do jogo será a mesma para as quatro operações básicas, correspondendo a soma, multiplicação, subtração ou divisão. Figura 13-Tela do jogo(em execução).

26 CONCLUSÃO O Jogo Mathéma surgiu com a proposta de tornar o dia a dia do ensino mais interessante e motivador, integrando a matemática com a informática, de uma forma mais simples. O foco do protótipo é contribuir com o ensino da matemática aproveitando o conhecimento e interesse dos alunos por novas tecnologias. O aluno do ensino fundamental tem a sua disposição atualmente inúmeros estímulos tecnológicos. As ferramentas educacionais devem portanto ser condizentes com a realidade do meio que o estudante se encontra. O uso de jogos, passa a ser uma forma de contribuir para motivar os alunos a buscar, pesquisar, construírem o conhecimento, não por obrigação, mas despertando a vontade de aprender. Espera-se que o uso do jogo Mathéma possa ser disponibilizado para diversas escolas e contribua como um diferencial positivo no ensino e aprendizado da matemática elementar Trabalhos futuros Este trabalho exige mais amadurecimento prático do protótipo, pois é necessário aplicar o jogo por um período de tempo, com alunos e avaliar o ganho real no aprendizado. O feedback de alunos e educadores poderá trazer uma série de sugestões para aperfeiçoamento do jogo. A implementação de um banco dinâmico de equações usando recursos da linguagem do HTML5. Implementação de diferentes níveis de dificuldade. Recursos avançados como controle de pontuação, tempo de jogo, número de erros e tentativas. Desenvolvimento do jogo para plataforma android. Existe um longo caminho para criar novos métodos educacionais e ferramentas que tornem o aprendizado uma realidade mais prazerosa, dinâmica e eficiente. O protótipo proposto pretende ser um passo inicial para diminuir a distância entre o aluno e o computador e professor e a tecnologia.

27 26 6. REFERÊNCIAS BIBLIOGRÁFICAS DAMIANI, E. B. JavaScript Guia de consulta rápida. São Paulo, Editora Novatec, FANTASTICO05 TRATAMENTO de Choque. Reportagem do Programa Fantástico do dia 30/10/ Rede Globo de Televisão. Disponível em: <fantastico.globo.com/jornalismo/ Fantastico/0,,AA ,00.html>. Acesso em: 24 março GAMELEARNING. A. K. Game for Learning. TechnologyReview, Disponível em: < >. Acesso em: 29 Março GAMEPLAN. S. Game Plan. TechLearning. Disponível em: < Acesso em: 29 Março GONÇALVES, J. P. Uso de jogos computacionais educativos via Internet na a matemática - projeto FORMEL. Brasília/ DF: Anais do XVII Prêmio Jovem Cientista, Disponível em:< pdf>acesso em: 29 maio GROVER, C.; VEER, E. A. V. Flash CS4 O manual que faltava. São Paulo, Editora Digertati Books JACKSON, J. Adobe Flash versus HTML Disponível em: < Acesso em 21 junho de Jogos educativos: entretenimento e tecnologia ajudam em sala de aula. Disponível em: < >. Acesso em: 20 Março 2012.

28 27 KESTEREN, A. V. HTML5 differences from HTML4: Disponível em:< Acesso em: 17 novembro LENT,R. Videojogos e Videogames. Disponível em< > Instituto de Ciências Biomédicas-Universidade Federal do Rio de Janeiro. Acesso em: 29 abril MACEDO, L. de, SÍCOLE,A. L. Ensaios Construtivistas. São Paulo, Casa do Psicólogo, MACEDO, L. de.; SÍCOLE, A. L.; PASSOS, N. C. 4 cores, Senha e Dominó: Oficina de Jogos em uma pesperctiva construtivista e psicopedagógica. São Paulo, Casa do Psicólogo, MACEDO, L. de.; SÍCOLE, A. L.; PASSOS, N. C. Aprender com Jogos e Situações Problema. Porto Alegre, Aritmed, MANTOVANI, A. O. Z. de. A posição Epistemológica de Jean Piaget. Campinas S.P. Gráfica R. Vieira, NIELSEN, J. Flash: 99% Bad Disponível em:< >. Acesso em: 11 Maio noticias/integra.php?id=384>. Acesso em: 4 Março O aprendizado através de jogos para computador: por uma escola mais divertida e mais eficiente.disponível em:< Acesso em: 29 Março 2012: PALHARES, O. Desenvolvimento do Raciocínio Lógico. 2006, 26f. Notas de Aula. PAPERT, S. A máquina das crianças: Repensando a escola na era da informática. Porto Alegre, Artes Médicas, 1994.

29 28 RESIG, J. Versions of JavaScript Disponível em: < >. Acesso em: 19 maio RISCHBIETER, L. Uso de jogos na educação-palestrante da Futuro Eventos,em entrevista para a Rádio SP Rio em Dez/2011.Disponível em:< Acesso em: 19 maio SANTELLI, P. S. D. da. Noção de multiplicação, divisão e resolução de problemas via jogos de regras. 115p.(Monografia) Curso de Pós-Graduação em Psicopedagogia, Centro Universitário Adventista de São Paulo, Engenheiro Coelho, SP, SILVA, M. S. Criando sites com HTML sites de alta qualidade com HTML e CSS. São Paulo, Editora Novatec, SILVEIRA, S. R. Estudo e Construção de uma ferramenta de autoria multimídia para a elaboração de jogos educativos. Dissertação. POA-PPGC UFRGS, SOMMERVILLE, I. Engenharia de Software. São Paulo, 8 edição, 2010.

30 29 Apêndice Código Fonte do Jogo Código que gera a tela do jogo(tela.js).

31 30 Continuidade do código da tela (tela.js). Continuidade do código da tela do jogo(tela.js).

32 Array das tabelas do jogo(jogo.js). 31

33 lógica do jogo(jogo.js). 32

34 Continuidade da lógica do jogo(jogo.js). 33