Introdução ao desenvolvimento
de jogos educativos HTML5 para o Moodle
David Melo da Luz
Sobre mim
David Melo da Luz
MBA em Engenharia de Software
IBTA – Instituto Brasileiro de Tecnologia Avançada (Atualmente)
...
Meus projetos pessoais
Plataforma de educação infantil Escola de
design intrucional
O que é faço hoje exatamente?
Jogo das placas Detran.SP
Regaste Solidariuns
Secretaria Educação Estado SP
Jô ANNINHA
SP Ga...
Quem são vocês?
Quem aqui já fez jogos educativos digitais?
Profissionais de EAD?
Designers instrucionais?
Administradores...
Temos que ser rápidos...
Mas fiquem a vontade para contatar em caso de dúvidas
Mas fiquem a vontade para contatar em caso de dúvidas
davidmelo8@gmail.com
Objetivo Geral
Que vocês saiam daqui com várias ideias de como
produzir jogos educativos.
Objetivos específicos
1. Conhecer o fluxo de desenvolvimento de um jogo educativo
profissional em html5.
2. Conhecer quais...
Muito importante!
O jogo pode ser um objeto de curso, o jogo pode ser o curso.
Podemos apenas utilizar elementos de gamefi...
Jogos HTML5
Jogos HTML5
São jogos que rodam utilizando tecnologias nativas do navegador
Principais vantagens
• Rodam diretamente no navegador
• Não depende de plugins de terceiros
• São portáveis
• São fáceis d...
O canvas é o elemento “novo” do HTML que permite “desenhar
dinâmicamente” usando javascript. Como esse desenho é feito
dep...
Canvas
var ctx = document.getElementById("meucanvas").getContext("2d");
WebGL
var gl = document.getElementById("meucanvas"...
Eu, em 2010, recebendo a
notícia que o HTML
implementaria o elemento
canvas que permitiria o
desenvolvimento de jogos sem
...
Eu descobrindo como
desenhar um quadrado
amarelo estático no navegador
usando o Canvas
<canvas id="myCanvas" width="578" h...
APIs Canvas e WebGL são genéricas –
Não foram feitas exclusivamente para
jogos
Conhecer o fluxo de desenvolvimento de um jogo
educativo profissional em html5.
Objetivo 1
1. Elaboração do conteúdo bruto (quando não existe).
Fluxo de produção de um game
1. Elaboração do conteúdo bruto (quando não existe).
2. Definição dos objetivos de aprendizagem.
Fluxo de produção de um g...
1. Elaboração do conteúdo bruto (quando não existe).
2. Definição dos objetivos de aprendizagem.
3. Desenvolvimento do doc...
1. Elaboração do conteúdo bruto (quando não existe).
2. Definição dos objetivos de aprendizagem.
3. Desenvolvimento do doc...
1. Elaboração do conteúdo bruto (quando não existe).
2. Definição dos objetivos de aprendizagem.
3. Desenvolvimento do doc...
1. Elaboração do conteúdo bruto (quando não existe).
2. Definição dos objetivos de aprendizagem.
3. Desenvolvimento do doc...
1. Elaboração do conteúdo bruto (quando não existe).
2. Definição dos objetivos de aprendizagem.
3. Desenvolvimento do doc...
1. Elaboração do conteúdo bruto (quando não existe).
2. Definição dos objetivos de aprendizagem.
3. Desenvolvimento do doc...
Conhecer quais são os instrumentos necessários
para a construção de um jogo educativo html5.
Objetivo 2
Maneira 1 – Utilizando Softwares autorais de EaD e e-learning
3 Maneiras mais comuns de
produzir jogos educativos em HTML5
Maneira 1 – Utilizando Softwares autorais de EaD e e-learning
Maneira 2 – Utilizando Softwares autorais para Games
3 Manei...
Maneira 1 – Utilizando Softwares autorais de EaD e e-learning
Maneira 2 – Utilizando Softwares autorais para Games
Maneira...
Maneira 1 – Utilizando Softwares autorais de EaD e e-learning
Maneira 2 – Utilizando Softwares autorais para Games
Maneira...
Fazer um comparativo entre as principais soluções
existentes no mercado (2015).
Objetivo 3
Maneira 1 – Utilizando Softwares autorais de EaD
e e-learning
Adobe Captivate Articulate
Maneira 2 – Utilizando Softwares autorais para
Games.
Maneira 2 – Utilizando Softwares autorais para
Games.
Maneira 2 – Utilizando Softwares autorais para
Games.
Maneira 3 – Utilizando bibliotecas, frameworks e
plug-ins javascript
Maneira 3 – Utilizando bibliotecas, frameworks e
plug-ins javascript
Maneira 3 – Utilizando bibliotecas, frameworks e
plug-ins javascript
Maneira 3 – Utilizando bibliotecas, frameworks e
plug-ins javascript
CreateJS
Maneira 3 – Utilizando bibliotecas, frameworks e
plug-ins javascript
Phaser.JS
Comparativo das soluções que exportam para HTML5
Captivate GameMaker Construct Unity PhaserJS
Curva de
aprendizagem
Ótimo ...
Conhecer alternativas para disponibilizar/e ou
integrar um jogo HTML5 no Moodle.
Objetivo 4
Como integrar com o Moodle?
Existem 2 maneiras
Maneira muito fácil: Embedar no HTML de
qualquer página no (página, lição, tarefa e etc).
Maneira fácil: empacotar como recurso Scorm
Template limpo disponível em:
github.com/davidluz/scormJSTemplate
Já acabou?
Exemplo prático de integração
com Moodle
Discussão e dúvidas
Contato: davidmelo8@gmail.com
Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )
Próximos SlideShares
Carregando em…5
×

Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )

395 visualizações

Publicada em

Palestra realizada no dia 28/11/2015 na 11ª Edição do MoodleMoot (Brasília)

Publicada em: Educação
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
395
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
17
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Isso pra DI’s - para programadores – ir de unity ou libs Javascript
  • Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )

    1. 1. Introdução ao desenvolvimento de jogos educativos HTML5 para o Moodle David Melo da Luz
    2. 2. Sobre mim David Melo da Luz MBA em Engenharia de Software IBTA – Instituto Brasileiro de Tecnologia Avançada (Atualmente) Pós graduação em Programação e produção de jogos Serviço Nacional de Aprendizagem Comercial – SENAC SP Graduação em Psicologia Pontifícia Universidade Católica de São Paulo (PUC-SP) Últimos trabalhos formais: Consultor em tecnologia | Designer instrucional (Atual) Fundação Vanzolini Designer instrucional Fundação Padre Anchieta (TV Cultura) Consultor Plataforma Geekie
    3. 3. Meus projetos pessoais Plataforma de educação infantil Escola de design intrucional
    4. 4. O que é faço hoje exatamente? Jogo das placas Detran.SP Regaste Solidariuns Secretaria Educação Estado SP Jô ANNINHA SP GameJAM 2015 Jogos e objetos de aprendizagem para e-learning e EaD.
    5. 5. Quem são vocês? Quem aqui já fez jogos educativos digitais? Profissionais de EAD? Designers instrucionais? Administradores de sistemas/moodle? Programadores?
    6. 6. Temos que ser rápidos...
    7. 7. Mas fiquem a vontade para contatar em caso de dúvidas
    8. 8. Mas fiquem a vontade para contatar em caso de dúvidas davidmelo8@gmail.com
    9. 9. Objetivo Geral Que vocês saiam daqui com várias ideias de como produzir jogos educativos.
    10. 10. Objetivos específicos 1. Conhecer o fluxo de desenvolvimento de um jogo educativo profissional em html5. 2. Conhecer quais são os instrumentos necessários para a construção de um jogo educativo. 3. Fazer um comparativo entre as principais soluções existentes no mercado (2015). 4. Conhecer alternativas para disponibilizar/e ou integrar um jogo HTML5 no Moodle.
    11. 11. Muito importante! O jogo pode ser um objeto de curso, o jogo pode ser o curso. Podemos apenas utilizar elementos de gameficação.
    12. 12. Jogos HTML5
    13. 13. Jogos HTML5 São jogos que rodam utilizando tecnologias nativas do navegador
    14. 14. Principais vantagens • Rodam diretamente no navegador • Não depende de plugins de terceiros • São portáveis • São fáceis de integrar • Desenvolvimento não exige necessariamente o uso de nenhum software específico.
    15. 15. O canvas é o elemento “novo” do HTML que permite “desenhar dinâmicamente” usando javascript. Como esse desenho é feito depende do contexto (context) utilizado. Atualmente existem dois contextos disponíveis: 2D e WebGl. Cada um deles é um objeto que expõe uma API diferente que pode ser usada para desenhar ( o canvas 2D, e o WebGL3D). Elemento Canvas
    16. 16. Canvas var ctx = document.getElementById("meucanvas").getContext("2d"); WebGL var gl = document.getElementById("meucanvas").getContext("webgl");
    17. 17. Eu, em 2010, recebendo a notícia que o HTML implementaria o elemento canvas que permitiria o desenvolvimento de jogos sem plugins de navegador...
    18. 18. Eu descobrindo como desenhar um quadrado amarelo estático no navegador usando o Canvas <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.rect(188, 50, 200, 100); context.fillStyle = 'yellow'; context.fill(); context.lineWidth = 7; context.strokeStyle = 'black'; context.stroke(); </script>
    19. 19. APIs Canvas e WebGL são genéricas – Não foram feitas exclusivamente para jogos
    20. 20. Conhecer o fluxo de desenvolvimento de um jogo educativo profissional em html5. Objetivo 1
    21. 21. 1. Elaboração do conteúdo bruto (quando não existe). Fluxo de produção de um game
    22. 22. 1. Elaboração do conteúdo bruto (quando não existe). 2. Definição dos objetivos de aprendizagem. Fluxo de produção de um game
    23. 23. 1. Elaboração do conteúdo bruto (quando não existe). 2. Definição dos objetivos de aprendizagem. 3. Desenvolvimento do documento de High concept Fluxo de produção de um game
    24. 24. 1. Elaboração do conteúdo bruto (quando não existe). 2. Definição dos objetivos de aprendizagem. 3. Desenvolvimento do documento de High concept 4. Desenvolvimento do Game Design Document (GDD). Fluxo de produção de um game
    25. 25. 1. Elaboração do conteúdo bruto (quando não existe). 2. Definição dos objetivos de aprendizagem. 3. Desenvolvimento do documento de High concept 4. Desenvolvimento do Game Design Document (GDD). 5. Produção dos Assets Fluxo de produção de um game
    26. 26. 1. Elaboração do conteúdo bruto (quando não existe). 2. Definição dos objetivos de aprendizagem. 3. Desenvolvimento do documento de High concept 4. Desenvolvimento do Game Design Document (GDD). 5. Produção dos Assets 6. Produção Game Fluxo de produção de um game
    27. 27. 1. Elaboração do conteúdo bruto (quando não existe). 2. Definição dos objetivos de aprendizagem. 3. Desenvolvimento do documento de High concept 4. Desenvolvimento do Game Design Document (GDD). 5. Produção dos Assets 6. Produção Game 7. Testes Fluxo de produção de um game
    28. 28. 1. Elaboração do conteúdo bruto (quando não existe). 2. Definição dos objetivos de aprendizagem. 3. Desenvolvimento do documento de High concept 4. Desenvolvimento do Game Design Document (GDD). 5. Produção dos Assets 6. Produção Game 7. Testes 8. Publicação Fluxo de produção de um game
    29. 29. Conhecer quais são os instrumentos necessários para a construção de um jogo educativo html5. Objetivo 2
    30. 30. Maneira 1 – Utilizando Softwares autorais de EaD e e-learning 3 Maneiras mais comuns de produzir jogos educativos em HTML5
    31. 31. Maneira 1 – Utilizando Softwares autorais de EaD e e-learning Maneira 2 – Utilizando Softwares autorais para Games 3 Maneiras mais comuns de produzir jogos educativos em HTML5
    32. 32. Maneira 1 – Utilizando Softwares autorais de EaD e e-learning Maneira 2 – Utilizando Softwares autorais para Games Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript 3 Maneiras mais comuns de produzir jogos educativos em HTML5
    33. 33. Maneira 1 – Utilizando Softwares autorais de EaD e e-learning Maneira 2 – Utilizando Softwares autorais para Games Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript 3 Maneiras mais comuns de produzir jogos educativos em HTML5 No próximo item vou descrever as vantagens e desvantagens de cada uma destas maneiras.
    34. 34. Fazer um comparativo entre as principais soluções existentes no mercado (2015). Objetivo 3
    35. 35. Maneira 1 – Utilizando Softwares autorais de EaD e e-learning Adobe Captivate Articulate
    36. 36. Maneira 2 – Utilizando Softwares autorais para Games.
    37. 37. Maneira 2 – Utilizando Softwares autorais para Games.
    38. 38. Maneira 2 – Utilizando Softwares autorais para Games.
    39. 39. Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript
    40. 40. Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript
    41. 41. Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript
    42. 42. Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript CreateJS
    43. 43. Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript Phaser.JS
    44. 44. Comparativo das soluções que exportam para HTML5 Captivate GameMaker Construct Unity PhaserJS Curva de aprendizagem Ótimo Bom Bom média média Custo US$2.139,00 U$74,00 R$474.00 Grátis* U$1500 Grátis Flexibilidade Ruim Bom Bom Ótimo Ótimo Desempenho Ruim Regular Regular Ótimo Bom Integação com moodle Ótimo Fácil Fácil Difícil Fácil Experiência Mobile Regular Regular Boa Ótimo Ótimo Permite fluxo de produção Multidisciplinar Regular Bom Bom Ótimo Ótimo
    45. 45. Conhecer alternativas para disponibilizar/e ou integrar um jogo HTML5 no Moodle. Objetivo 4
    46. 46. Como integrar com o Moodle?
    47. 47. Existem 2 maneiras
    48. 48. Maneira muito fácil: Embedar no HTML de qualquer página no (página, lição, tarefa e etc).
    49. 49. Maneira fácil: empacotar como recurso Scorm Template limpo disponível em: github.com/davidluz/scormJSTemplate
    50. 50. Já acabou?
    51. 51. Exemplo prático de integração com Moodle
    52. 52. Discussão e dúvidas
    53. 53. Contato: davidmelo8@gmail.com

    ×