Aula 10 - Desenvolvimento de games em HTML 5
-
Upload
henrique-nunweiler -
Category
Technology
-
view
1.134 -
download
5
description
Transcript of Aula 10 - Desenvolvimento de games em HTML 5
![Page 1: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/1.jpg)
DESENVOLVIMENTO E DESIGN E
WEBSITES IIIProfº. Esp. Henrique Nunweiler Angelim Silva
1º Semestre de 2013
Curso Técnico em Informática para Internet
Aula 10.
ETEC de São Sebastião - 188
![Page 2: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/2.jpg)
ANTES DE MAIS NADA, QUAIS FORAM AS
FERRAMENTAS QUE VOCÊS ENCONTRARAM?
![Page 3: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/3.jpg)
VAMOS FALAR UM POUCO SOBRE CADA UMA
DELAS...
![Page 4: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/4.jpg)
HOJE...
HTML 5 no desenvolvimento de games!
![Page 5: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/5.jpg)
MAS ANTES DE CHEGARMOS NA PARTE BOA...
Vamos entender mais sobre o...
Sucessora: HTML, XHTML e HTML DOM
Fase de finalização atualmente.
Muito se fala e pouco se produz, e por que?
Falta de CONHECIMENTO.
Falta de VONTADE.
E falta de VERGONHA NA CARA de quem
realmente desenvolve e tem tempo para
estudar...=)
![Page 6: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/6.jpg)
PARA QUE SERVE O HTML5?
O HTML 5 é uma linguagem que veio
revolucionando o mercado web porque ela veio pra
“quebrar geral”.
Diferente de outras linguagens, ela veio com o
propósito de reduzir recursos adicionais que
costumamos utilizar como extensões para
execução de vídeos e áudio por exemplo.
![Page 7: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/7.jpg)
EXEMPLO DE CÓDIGO - ÁUDIO
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Facin né?!?!
![Page 8: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/8.jpg)
EXEMPLO DE CÓDIGO - VÍDEO
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320"
height="240">
<embed src="movie.swf" width="320"
height="240">
</object>
</video>
Facin também né?!?!
![Page 9: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/9.jpg)
MAS POR QUE AS FOTOS DO VINGADORES??
Porque eu gosto!
![Page 10: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/10.jpg)
CONTINUANDO...
O HTML 5 tem ajudado a indústria de games pois
ao contrário de outras ferramentas de
desenvolvimento de games complicada e com
linguagens de programação específicas, aqui é
HTML! (com suas modificações).
Ele continua interagindo com o javascript, pois seu
objetivo não era substituir o javascript, mas
acrescentar ferramentas que antes o programador
só tinha com ferramentas e plugins separados.
![Page 11: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/11.jpg)
GUERRA ENTRE HTML 5 X FLASH
Guerra iminente, onde já temos vencedores e
perdedores!
Mas antes falaremos sobre o flash!
![Page 12: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/12.jpg)
QUEREM VER COMO ERA O FLASH
ANTIGAMENTE??
![Page 13: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/13.jpg)
AGORA SIM!
O flash foi desenvolvido para desenhos sem
animação. Com a necessidade do mercado de um
software. O flash foi o nome que surgiu depois que
a macromedia se juntou com FutureWare, dona da
ferramenta de desenho Future Splash Animator.
Surgiu assim o flash 1.0
![Page 14: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/14.jpg)
FUTURE SPLASH ANIMATOR E...FLASH 1.0
![Page 15: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/15.jpg)
SITE DA DOLLY, TÃO BOM QUANTO O
COMERCIAL...
![Page 16: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/16.jpg)
VOLTANDO AO HTML
VENDEDOR DA BATALHA – HTML 5
![Page 17: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/17.jpg)
E POR QUE VENCEU?
Pois o flash é Muuuuuuuuuuuuito pesado em
comparação ao HTML 5.
O HTML 5 roda em qualquer navegador atualizado.
O flash você precisar baixar E AINDA ATUALIZAR
O FILHA DA MÃE TODA HORA!
Dentre vários outros motivos.
![Page 18: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/18.jpg)
O HTML 5...
proporciona ambientes de programação e
integração entre linguagens de forma
inacreditavelmente fácil.
Vários frameworks como o Sencha Touch 2 (falei
sobre ele em sala lembra?? Não... Google.com.br
lembra vocês...=) ) estão revolucionando o
mercado, por exemplo, de produção de aplicativos
para dispositivos móveis.
![Page 19: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/19.jpg)
FRAMEWORK?
É uma forma de você unir várias linguagens de
programação de forma abstrata (não precisa
escrever em todas elas) com a finalidade de gerar
um único código fonte.
![Page 20: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/20.jpg)
JOGOS DESENVOLVIDOS EM HTML 5
http://html5games.com/
Nem todos os jogos são maravilhosos, mas estão
em HTML 5 (é o que dizem)!
http://chrome.angrybirds.com/
O cara...Angry Birds
http://chrome.angrybirds.com/
Pac-man
http://worldsbiggestpacman.com/
Bilhar
http://agent8ball.com/
![Page 21: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/21.jpg)
TRABALHO DE HOJE
Escolham 2 áreas de games.
Ex: Puzzle e Action
Então, escolham dois jogos (bons ou fuleiros) em
HTML 5
E dois em outra tecnologia (flash ou outros).
Desenvolver um relatório pequeno (no máximo 1
página) falando os pontos fortes e fracos de cada
um dos 4 jogos.
Colocar uma consideração final a respeito dos
games!
![Page 22: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/22.jpg)
SINCERAMENTE, GOSTARAM?
E a próxima aula?
Decidiremos juntos o tema!
Mas que tal Mercado de trabalho na programação?
![Page 23: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/23.jpg)
DÚVIDAS?
![Page 24: Aula 10 - Desenvolvimento de games em HTML 5](https://reader034.fdocument.pub/reader034/viewer/2022042700/559470ba1a28ab920e8b472e/html5/thumbnails/24.jpg)
BOA NOITE A TODOS!
Muito Obrigado!
Professor Especialista em Gerenciamento de
Projetos Henrique Nunweiler Angelim Silva
E-mail:
Redes Sociais:
Henrique Nunweiler