Aula 10 - Desenvolvimento de games em HTML 5

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

ANTES DE MAIS NADA, QUAIS FORAM AS

FERRAMENTAS QUE VOCÊS ENCONTRARAM?

VAMOS FALAR UM POUCO SOBRE CADA UMA

DELAS...

HOJE...

HTML 5 no desenvolvimento de games!

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...=)

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.

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é?!?!

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é?!?!

MAS POR QUE AS FOTOS DO VINGADORES??

Porque eu gosto!

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.

GUERRA ENTRE HTML 5 X FLASH

Guerra iminente, onde já temos vencedores e

perdedores!

Mas antes falaremos sobre o flash!

QUEREM VER COMO ERA O FLASH

ANTIGAMENTE??

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

FUTURE SPLASH ANIMATOR E...FLASH 1.0

SITE DA DOLLY, TÃO BOM QUANTO O

COMERCIAL...

VOLTANDO AO HTML

VENDEDOR DA BATALHA – HTML 5

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.

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.

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.

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/

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!

SINCERAMENTE, GOSTARAM?

E a próxima aula?

Decidiremos juntos o tema!

Mas que tal Mercado de trabalho na programação?

DÚVIDAS?

BOA NOITE A TODOS!

Muito Obrigado!

Professor Especialista em Gerenciamento de

Projetos Henrique Nunweiler Angelim Silva

E-mail:

henrique.silva266@etec.sp.gov.br

Redes Sociais:

Henrique Nunweiler