24
DESENVOLVIMENTO E DESIGN E WEBSITES III Profº. 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

Aula 10 - Desenvolvimento de games em HTML 5

Embed Size (px)

DESCRIPTION

Aula desenvolvida para o curso Técnico de Informática para Internet da ETEC de São Sebastião. 19/04/2013

Citation preview

Page 1: 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

Page 2: Aula 10 - Desenvolvimento de games em HTML 5

ANTES DE MAIS NADA, QUAIS FORAM AS

FERRAMENTAS QUE VOCÊS ENCONTRARAM?

Page 3: Aula 10 - Desenvolvimento de games em HTML 5

VAMOS FALAR UM POUCO SOBRE CADA UMA

DELAS...

Page 4: Aula 10 - Desenvolvimento de games em HTML 5

HOJE...

HTML 5 no desenvolvimento de games!

Page 5: Aula 10 - Desenvolvimento de games em HTML 5

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

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

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

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

MAS POR QUE AS FOTOS DO VINGADORES??

Porque eu gosto!

Page 10: Aula 10 - Desenvolvimento de games em HTML 5

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

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

QUEREM VER COMO ERA O FLASH

ANTIGAMENTE??

Page 13: Aula 10 - Desenvolvimento de games em HTML 5

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

FUTURE SPLASH ANIMATOR E...FLASH 1.0

Page 15: Aula 10 - Desenvolvimento de games em HTML 5

SITE DA DOLLY, TÃO BOM QUANTO O

COMERCIAL...

Page 16: Aula 10 - Desenvolvimento de games em HTML 5

VOLTANDO AO HTML

VENDEDOR DA BATALHA – HTML 5

Page 17: Aula 10 - Desenvolvimento de games em 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.

Page 18: Aula 10 - Desenvolvimento de games em HTML 5

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

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

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

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

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

DÚVIDAS?

Page 24: Aula 10 - Desenvolvimento de games em HTML 5

BOA NOITE A TODOS!

Muito Obrigado!

Professor Especialista em Gerenciamento de

Projetos Henrique Nunweiler Angelim Silva

E-mail:

[email protected]

Redes Sociais:

Henrique Nunweiler