Produo de de jogos concepo ee desenvolvimento de

Produção de de jogos: concepção ee desenvolvimento de de aplicações hipermídias educacionais Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Uso de jogos educacionais O uso dos jogos educacionais podem contribuir para resgatar o interesse do aprendiz. O interesse em aprender é despertado no aluno por meio de ambientes lúdicos que harmonizam conhecimento e prática dos conceitos repassados em sala de aula. É importante pensar no jogo educacional como um recurso auxiliar no processo de ensino e aprendizagem, pois eles são atividades lúdicas que possuem objetivos pedagógicos especializados para o desenvolvimento do raciocínio. Os jogos educacionais devem explorar a possibilidade de combinar entretenimento com Educação utilizando os recursos da multimídia. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Multimídia - é um recurso que combina texto, som, imagem, animação e vídeo para exibir uma informação. Texto: é a informação textual, na forma de palavra escrita; Som: é a informação na forma de áudio, ou seja, na forma de música, de voz, de ruídos ou de efeitos sonoros; Imagem: é a informação na forma de desenhos, fotos, figuras ou gráficos; Animação: é a informação na forma de imagem com movimento e sem som e Vídeo: é a informação na forma de imagem com movimento e som. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Hipermídia - também chamada de multimídia interativa, é uma estrutura não linear que permite ao usuário navegar aleatoriamente. É uma nova forma de gerenciar informações. Pode-se dizer que: Hipermídia = Multimídia + Hipertexto Multimídia - é um recurso que combina texto, som, imagem, animação e vídeo para exibir uma informação. Hipertexto - é um recurso que vincula informações adicionais por meio de link’s, ou seja, é um texto que linca com informações complementares. OBS: Esse recurso permite criar Aplicações Hipermídias que são software’s que permitem acessar as informações de forma direta, instantânea, por meio de elos interativos. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Aplicação hipermídia – é formada por uma hiperbase, um conjunto de estruturas de acesso e uma interface, ou seja: Hiperbase: é formada pelas informações organizadas de forma não linear através de nodos, links e âncoras; - Nodo: é o componente em que são armazenadas as informações nas mais variadas mídias; - Link: é a ligação entre os nodos, estabelecendo a navegação; - ncora: corresponde a uma área sensível no nodo, que desvia para outro nodo; Estruturas de Acesso: definem as formas de acessar as informações dentro da aplicação hipermídia; Interface: é o conteúdo da tela. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Desenvolvimento de uma aplicação hipermídia O desenvolvimento de uma aplicação hipermídia comercial envolve profissionais de diversas áreas. A equipe multidisciplinar deve ser formada por: - coordenador; - programador; - designer (interface); - produtor de mídias (áudio, vídeo, animações, textos); Os recursos a serem considerados são: - orçamento disponível; - tempo para o desenvolvimento; - hardware necessário; - software a ser usado; - conteúdo da aplicação (especialista). Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Uso das aplicações hipermídia As aplicações hipermídia são utilizadas em protótipos de aplicativos tanto na área comercial, educacional como de lazer. São usados em jogos, em cursos interativos, em aplicações de Banco de Dados, em demonstrações de produtos, em quiosques interativos, em entretenimento. . . As aplicações hipermídias na Educação auxiliam no processo de ensino e aprendizagem, pois prendem a atenção, entusiasmam, entretém e transmitem as informações de várias formas, estimulando diversos sentidos ao mesmo tempo. Isso faz com que a atenção e o interesse do aluno sejam mantidos, promovendo a retenção da informação e facilitando a aprendizagem. As aplicações hipermídias educacionais são chamados de softwares educacionais. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Software educacional 1 -2 Segundo Eduardo O. Chaves, professor de Tecnologia na Educação, Faculdade de Educação da Universidade Estadual de Campinas: “A produção de software educacional de alta qualidade técnica e com sofisticação pedagógica é um desafio enfrentado pelo Brasil. A produção deste software esbarra na dificuldade de diálogo entre analistas de sistemas e profissionais da área de Psicologia e Educação. Estes profissionais não trocam informações uns com os outros. Concluindo, o que se tem de software educacional é pouco e é material ingênuo do ponto de vista de pedagógico. ” Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Software educacional 2 -2 A disseminação do uso do computador na Escola mostra a falta e/ou a baixa qualidade do software educacional disponível. O software estrangeiro não corresponde à realidade sócio-econômica, cultural e lingüística do Brasil. Isso deveria servir de estímulo para que os professores se interessassem pelo desenvolvimento de software nacional de qualidade. Um software educacional exige testes e padrões para atingir níveis de alta qualidade. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Aplicação hipermídia educacional - Pode ser formada por uma lição, pelo conteúdo de uma aula, de um curso, de um programa de treinamento, de uma unidade curricular ou de uma atividade didática qualquer. É sempre formada por um conteúdo a ser aprendido. A produção de uma aplicação hipermídia educacional é normalmente, um trabalho de equipe e inclui o projeto, a metodologia do desenvolvimento, a implementação, a avaliação e a distribuição. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Projeto de uma aplicação educacional O projeto de uma aplicação hipermídia educacional, de qualquer tipo, deve considerar que o processo de desenvolvimento precisa incluir tanto o funcionamento da aplicação quanto os mecanismos pedagógicos e didáticos que constituem a base de toda a aplicação de ensino e aprendizagem. Para projetar uma aplicação hipermídia educacional é válido, a partir da escolha do tema, responder às seguintes perguntas: • quais os conceitos relevantes do tema (conteúdo), considerando a realidade do aluno? • quais as principais unidades a serem trabalhadas para facilitar o entendimento do conteúdo? • como será formada a aplicação educacional para atender isso? Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Formação de uma aplicação hipermídia educacional Uma aplicação hipermídia educacional pode ser formada por: • um conteúdo teórico sobre determinado assunto; • um conteúdo teórico mais atividades de reforço e/ou avaliação; • atividades de reforço e/ou de avaliação sobre determinado conteúdo; • atividades que podem ou não fornecer feedback; OBS: é possível ter avaliação com escore. As atividades podem ser: • de diversos tipos: questões de múltiplas escolhas; de V ou F; de completar; de marcar ou ainda tipo lazer como jogos ou histórias; • de um só tipo, porém, com diferentes graus de dificuldades; • de diversos tipos com níveis diferentes de dificuldade para cada tipo. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Metodologia para o desenvolvimento Metodologia - é um conjunto de normas, procedimentos, técnicas e ferramentas de análise que definem o padrão desejado para o desenvolvimento de projetos de sistemas ou aplicações hipermídias educacionais. A metodologia tradicional se caracteriza por dividir o trabalho de criação de uma aplicação hipermídia em etapas, cada uma delas contendo um conjunto de atividades e procedimentos. O desenvolvimento de uma aplicação educacional de qualquer tipo envolve as fases mostradas abaixo: Análise e Planejamento Modelagem Implementação Avaliação e Manutenção Distribuição Modelo Conceitual Modelo de Navegação Modelo de Interface Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Análise e Planejamento 1º) Análise e planejamento - nessa fase é preciso considerar como a aplicação hipermídia educacional será formada. É preciso definir o tema, considerar as aplicações similares e os recursos disponíveis. São feitas a coleta dos dados e a análise destes dados. É preciso definir ainda o objetivo da aplicação, o público alvo, como esse produto será usado, quando, onde e para que? e o que é esperado com o uso da aplicação ? Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Modelagem 2º) Modelagem - Segundo Johnson-Laird, “Modelagem é uma técnica que permite a construção de modelos, com o objetivo de facilitar a compreensão, a discussão e a aprovação de um sistema antes da sua construção real”. A fase de modelagem de uma aplicação hipermídia educacional inclui a criação de 3 modelos: conceitual, de navegação e de interface. a) Modelo Conceitual – se refere ao conteúdo da aplicação hipermídia educacional e de como esse conteúdo será disponibilizado ao aluno. b) Modelo de Navegação – define as estruturas de acesso, ou seja, como serão os elos. A navegação deve ser intuitiva para evitar a desorientação do usuário e diminuir a sobrecarga cognitiva. c) Modelo de Interface – deve ser compatível com o modelo conceitual e de navegação. O design de interfaces precisa estar em harmonia com o conteúdo. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Implementação 3º) Implementação - a implementação abrange a produção ou reutilização e digitalização das mídias. É o processo de criar as mídias do projeto, incluindo os sons, as imagens, animações e vídeos utilizando softwares específicos. Com relação às mídias é preciso considerar os direitos autorais, mesmo para as mídias disponíveis na rede se deve colocar a fonte nos créditos. A implementação é a etapa de transferir os dados para o computador utilizando um Sistema de Autoria que oferece os recursos necessários para integrar todas as mídias em uma estrutura interativa permitindo uma navegação lógica, intuitiva para que o aluno não fique desorientado. Depois de implementado é preciso testar, testar. . . e testar para corrigir o que for necessário. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Avaliação e Manutenção 4º) Avaliação e Manutenção - é a fase de testes, verificação das informações e correção dos erros de conteúdo e de gramática. A avaliação deve ser feita durante todas as fases do processo. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Distribuição 5º) Distribuição - para a distribuição é preciso definir o módulo de execução, roteiro de instalação e a embalagem caso a distribuição seja em CD’s. A distribuição pode ser via rede através dos recursos da hipermídia distribuída. A World Wide Web criada no fim da década de 80 permitiu a inclusão dos avanços tecnológicos relacionados às mídias áudio visuais na rede, possibilitando a distribuição de aplicações hipermídia na Internet. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Construção de modelos 1 -2 Modelo – segundo Johnson-Laird, é a representação de algo antes de sua construção e modelagem é uma técnica que permite a construção de modelos. O modelo de uma aplicação hipermídia, educacional ou não, têm como objetivos: • definir o domínio (o conteúdo), dividi-lo em nós e estabelecer como os nós resultantes serão conectados (modelo conceitual); • determinar como o usuário vai interagir com a aplicação para diminuir a carga cognitiva e evitar a desorientação (modelo navegacional); • criar a identidade visual (modelo de interface). OBS: Existem diversos métodos para a criação do modelo de aplicações hipermídia. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Construção de modelos 2 -2 Métodos de criação de Modelos - Diferentes métodos têm sido propostos para ajudar na criação do modelo de uma aplicação hipermídia. Esses métodos ajudam a definir e limitar o escopo e a representar graficamente a rede de nós da aplicação. São eles: HDM - Hypermedia Design Model; OOHDM - Objects Oriented Hypermedia Design Model; RMM - Relational Management Model; HMT - Hypermedia Modeling Technique utiliza quatro modelos para descrever uma aplicação. STORYBOARD – ferramenta para criar quadros. OBS: Na criação do modelo de aplicações educacionais, não muito complexas, pode ser utilizado o recurso storyboard ou ainda o método descritivo. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Storyboard - é uma ferramenta criada para o desenvolvimento de quadros (frames) que compõem uma animação, porém pode ser usado para representar de forma gráfica, a rede de nós de uma aplicação hipermídia educacional ou não. É um esboço do modelo de uma aplicação mostrando como seus elementos estarão organizados. Ajuda no planejamento do conteúdo de cada unidade, na disposição das mídias. É o “rascunho” da aplicação hipermídia permitindo aos responsáveis pelo projeto visualizarem sua estrutura de navegação, ou seja, discutirem a seqüência do conteúdo e fazerem as revisões e o acompanhamento necessários para o bom andamento do trabalho. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Etapas de um storyboard Um storyboard permite variar o nível de detalhamento para representar os resultados advindos da fase de análise e planejamento e a descrição da interatividade prevista na aplicação. O storyboard é criado depois da análise e planejamento. Para construir um storyboard é válido seguir as etapas: • organizar o conteúdo, relacionado ao tema da aplicação hipermídia, de forma lógica; • determinar as estruturas de acesso, ou seja, o controle da navegação; • especificar o conteúdo a ser exibido e as mídias a serem utilizadas em cada tela. OBS: As telas são representadas por quadros e cada quadro de um storyboard deve mostrar o conteúdo desta tela. O storyboard pode ser feito em um editor de texto, no Power Point ou simplesmente à mão. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Exemplos de storyboard 1 -5 Um storyboard é um esboço, na forma gráfica, do que a aplicação conterá e de como os seus componentes serão dispostos. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Exemplos de storyboard 2 -5 Um storyboard é um roteiro que indica a disposição das informações na aplicação hipermídia. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Exemplos de storyboard 3 -5 Um storyboard pode ser formado por um conjunto de quadros que podem ter uma padronização para facilitar o trabalho de modelagem. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Exemplos de storyboard 4 -5 Um storyboard pode ser formado por quadros com a descrição do que deve aparecer em cada tela. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Exemplos de storyboard 5 -5 Um storyboard pode ser formado por anotações sem nenhuma formalização mas que indique o roteiro da aplicação. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Quadros de um storyboard Cada quadro representa uma tela. Número da tela: Identificação da página: Tela = informações Instruções para a programação: Número da tela – é formado por uma numeração progressista que indica a ordem de acesso à página, ou seja, determina a navegação. Identificação da página – é a referência ao conteúdo da página, ou seja, é o nome da página. Indica ao usuário onde ele se encontra dentro da aplicação, isso evita a desorientação. Instruções para programação – descrevem que objetos serão usados naquela tela, quais as mídias, ou seja, o nome dos arquivos que contém as mídias. Indicam cores, fontes, texturas a serem usadas na programação. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Disposição dos quadros Os quadros de um storyboard podem estar dispostos de outras formas, tal como abaixo em que as informações são descritas sob cada quadro. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Distribuição do espaço As informações devem estar distribuídas de forma harmônica na tela que pode ser segundo o modelo abaixo: 1. Identificação da página 1 2. Controle de navegação entre contexto – menu geral 2 5 4 3. Auxílio à navegação: navegação seqüencial na aplicação 4. Opções: ex: ícones para outras 3 mídias (é opcional) 5. Conteúdos Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Distribuição dos objetos A distribuição dos objetos na tela, referentes ao conteúdo da aplicação pode obedecer ao esquema abaixo que mostra a posição de cada objeto na tela. Animais Vertebrados com penas: AVESTRUZ Tela 2. 8 1. Animais 1. 1 Vertebrados 1. 1. 1 XXXXX 1. 1. 2 YYYYY 1. 1. 3 ZZZZZZ 1. 2 Invertebrados 1. 2. 1 XXXXX 1. 2. 2 YYYYY 2 - 8 O avestruz é a maior ave que existe. É uma ave não voadora. Sua principal característica é o pescoço longo sem plumagem. 1. 2. 3 ZZZZZZ Página: Animais vertebrados com penas Campo Texto com a definição e hipertexto Imagem de um avestruz Narração: arquivo avestruz 1. wav Som: aves. mid Fim Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Telas de uma aplicação Além das telas com o conteúdo, é comum uma tela de apresentação, de créditos e de menu, quando esse não fica disponível em todas as páginas da aplicação. Tela de Apresentação - é a primeira tela e deve identificar a aplicação. Deve ser atraente, com efeitos, letras “vistosas”, animações, som. . . Ela deve seduzir o leitor e seu layout deve estar em harmonia com o restante da aplicação. Tela de Créditos - é a tela que mostra os “autores da obra”. Como uma aplicação hipermídia, normalmente, é um trabalho de equipe, o nome dos diversos profissionais e muitas vezes um pequeno currículo de cada um é mostrado na aplicação, além da fonte das mídias utilizadas e não criadas pela equipe. Tela Menu - é a tela com as opções básicas da aplicação que determinam a navegação entre contextos. Cada opção desvia para uma tela específica que pode ter outro menu. As telas subseqüentes obedecem a um padrão. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Aplicação hipermídia educacional A concepção e o desenvolvimento de uma aplicação hipermídia educacional, centrada no aluno aprendiz, envolve além do conteúdo, da exposição desse conteúdo na aplicação e na forma de acessá-lo, o design da interface, que deve ser baseado nas teorias da percepção visual, nos conceitos de semiótica e, principalmente, nas abordagens da ergonomia. Uma tendência na área educacional é o uso dos recursos oferecidos pela Hipermídia Adaptativa para o desenvolvimento de softwares educacionais adaptáveis ao perfil do aluno visando uma aprendizagem mais efetiva adequando as estratégias de ensinoao estilo de aprendizagem do aluno. Além disso existem estudos na busca pelo modelo afetivo da inter-relação entre emoções e aprendizagem para aprimorar as aplicações hipermídias educacionais. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Modelo RIVED STORYBOARD – Projeto RIVED do Governo Federal oferece cursos para capacitar equipes interessadas, das universidades federais na produção de objetos de aprendizagem, segundo as normas do projeto. O curso discute o impacto da tecnologia na Educação, planeja material didático reutilizável para uso em cursos de EAD. O padrão RIVED para a modelagem dos objetos de aprendizagem obedece a formatação abaixo: Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Método Descritivo - consiste em descrever todas as etapas que identificam o que deverá conter cada tela da aplicação hipermídia, educacional ou não e serve de roteiro ao programador para a implementação. É utilizado para aplicações simples. Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Exemplos Os exemplos abaixo contemplam 2 métodos de modelagem. Storyboard – Literatura Descritivo – Bruxaria Achamento do Brasil Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach

Bibliografia ANTUNES, Celso. Como desenvolver conteúdos explorando as inteligências múltiplas. Petrópolis: Editora Vozes, 2003 FALKEMBACH, G. M. Informática na Educação: Novos paradigmas – I Congresso Nacional de Escolas Franciscanas Santa Maria - 2000 FALKEMBACH, G. A. M. Adaptive hypermedia: An option for the development os educacional systems in order to getting more effective learning. In: International conference on new technologies in science education, Aveiro Portugal Proceedings International Conference on New Technologies in Science Education. 2001 JOHNSON-LAIRD, P. N. Mental Models. Cognitive Science. Harvard Univers. Press, Cambridge, Mass. , 2001 MOREIRA, M. A. Teorias de Aprendizagem E. P. U. São Paulo, 1999 SILVEIRA, S. R. - Estudo e Construção de uma ferramenta de autoria multimídia para a elaboração de jogos educativos. Dissertação de Mestrado POA-PPGC UFRGS, 1999 PRIMO, A. F. T. Multimídia e Educação. Revista de divulgação cultural, Blumenau, SC, nº 60 - 1998 PRIMO, A. F. T. Um novo meio chamado "multimídia" – disponível em: http: //virtual. inesc. pt/virtual/CGME 99/actas/lista_artigos. html Projeto DEALS VALENTE, J. A. Diferentes Usos do Computador na Educação. Em J. A. Valente (Org. ), Computadores e Conhecimento: repensando a educação (pp. 1 -23). Campinas, SP: Gráfica da UNICAMP. 1999 Centro Interdisciplinar de Novas Tecnologias na Educação Drª Gilse A. Morgental Falkembach