Jogos Pedaggicos Utilizando Websockets

[AVALIAO CEGA] [AVALIAO CEGA] [AVALIAO CEGA]

[AVALIAO CEGA], [AVALIAO CEGA] [AVALIAO CEGA]

Figura 1: Menu Principal do Jogo

Resumo

Buscando contribuir no s com o ambiente

pedaggico, mas tambm com o objetivo de despertar

nos jovens um maior interesse por computao para

mergulhar neste vasto mundo onde muitos temas ainda

possuem grande carncia de especialistas, adentrando

no mercado de trabalho que est ficando cada vez mais

exigente e necessitado de mo-de-obra qualificada, foi

proposto um jogo didtico. Visando o trabalho em

equipe, o jogo ser um dualplayer via web com

aplicao da tecnologia de websockets e poder ser

utilizado durante e aps aulas para maior fixao de

contedo de uma maneira divertida.

Palavras-chaves: Jogos pedaggicos, websocket,

HTML5, canvas, javascript

Autores Contato: [AVALIAO GEGA], [AVALIAO GEGA], [AVALIAO GEGA]

1. Introduo

Nos ltimos anos o nmero de desistncias nos cursos

de TI tem crescido muito.

A evaso de estudantes do Ensino Superior um

dos principais problemas da educao brasileira e

causou um prejuzo estimado em 9 bilhes de reais na

economia do Pas somente em 2009. [...] Dados de

2008 apontavam um alto ndice de desistncia nos

cursos ligados computao Cincia da

Computao, sobretudo. (HIPLITO;OscarCARTA

CAPITAL [2011]).

H vrios fatores importantes a se relevar em

quesito de desistncias dos alunos referentes a estes

cursos.

Focando reas de qualificaes profissionais que

buscam elaborar projetos, a fim de estimular o

interesse da aprendizagem, foi notrio ausncia destes

no campo de TI. de grande valia a criao destes

projetos por empresas, universidades e organizaes,

atingindo a sociedade desde os mais jovens.

Preocupados com a grande reduo na procura por

cursos da rea de informtica optamos por oferecer

uma alternativa de estudo que promova a fixao dos

contedos de forma divertida.

Com um resultado em longo prazo, esta aplicao

contribuir no s no ensino, mas sempre estar

buscando despertar a fora de vontade do jovem por

estudar mais e impregnar seus conhecimentos da rea

estudada. Sendo de uma maneira divertida, este jogo

facilitar a forma de se adquirir conhecimentos,

deixando de lado a velharia e a monotonia dos estudos

individuais em livros.

O grande lance para os estudantes focar no

contedo abordado em aula e fixar o mesmo junto com

os amigos ou individualmente atravs do jogo.

2. Trabalhos Relacionados

Desenvolver um jogo utilizando uma tecnologia de

comunicao bidirecional que proporcionasse a

integrao entre o dispositivo mvel e o desktop era o

objetivo desde o incio do projeto, a questo primordial

era como aliar a tecnologia ao fator pedaggico que

tambm deveria estar presente no projeto. A inspirao

para tal veio dos jogos de pergunta e resposta, em que

a dinmica do jogo era essencialmente baseada na

velocidade em que os competidores respondiam as

questes. Haver tambm um componente externo, um

caminho que ilustrar o progresso de cada jogador,

componente este que difere dos jogos de pergunta e

respostas, e comum a jogos de tabuleiro.

A tecnologia utilizada para a experincia em tempo

real proporcionada pelo jogo, foi idealizada atravs de

influncias obtidas de um game da Google

Experiments denominado Super Sync Sports. O qual

atravs do websocket que utiliza o protocolo http para

criar uma conexo que permita uma comunicao

bidirecional entre cliente e servidor possibilitando ao

usurio utilizar seu dispositivo mvel como joystick e

interagir com o game e outros jogadores em tempo

real.

Figura 2: Super Sync Sports Google Experiments

3. TI QUIZ - Desenvolvimento

Para que o jogo possa compartilhar dados entre os

dispositivos em tempo real faremos uso da tecnologia

de comunicao bidirecional websocket, que atravs

dos protocolos HTTP e TCP permite a troca de

informaes entre os aparelhos em tempo real (full-

duplex). Para desenvolver as aplicaes utilizaremos a

linguagem de marcao HTML5 atravs de uma IDE

para organizar a disposio dos mdulos

desenvolvidos, javascript para implementar a lgica e

canvas para os elementos grficos, utilizaremos para a

criao do banco de dados o software MySql.

3.1 HTML5

HTML5 (Hypertext MarkupLanguage, verso 5) uma

linguagem de marcao utilizada para a estrutura e

apresentao do contedo nas pginas web, sendo esta

a quinta verso desta linguagem. Incorporando novos

recursos que anteriormente eram acessveis apenas

utilizando outras tecnologias, o HTML5 futuramente se

tornar o novo padro da web. Utilizaremos esta verso

para o desenvolvimento do projeto, pois alguns

recursos essenciais ao jogo como o compartilhamento

de dados em tempo real atravs do websocket s est

presente nesta verso.

3.2 WebSocket

Tecnologia que permite a comunicao bidirecional, ou

seja, full-duplex sobre um nico soquete TCP

(TransmissionControlProtocol) ser utilizada como

ferramenta para a troca de dados entre os jogadores e

atualizao dos dados gerais do jogo pelo servidor.

3.3 Canvas

Elemento presente no HTML5 para delimitar as reas

reservadas para os grficos dinmicos da aplicao

estar presente em toda a parte grfica do projeto.

3.4 Javascript

Linguagem de programao baseada em scripts e tem

sua padronizao determinada pela ECMA

International (associao especializada na

padronizao de sistemas de informao). Toda a

lgica necessria para as aes e reaes dos

personagens e cenrios ter como base scripts

desenvolvidos com Javascript.

Para a fase de testes utilizaremos diversos

dispositivos mveis para testar a performance da

aplicao. Testes sero efetuados durante o

desenvolvimento da aplicao pelos desenvolvedores e

aps por terceiros.

Nas regras do jogo possuir todo o contedo

informativo necessrio para a sanar as possveis

dvidas do(s) jogador(es).

3.5 Materiais e Mtodos

Requisio para o desenvolvimento do projeto:

Infra-estrutura: Velocidade de banda mnima: 2Mb;

Hardware: Computador Windows 7 64bits, 4GB memria RAM, 150GB;

Software: Notpad++, MySql;

Navegador: Chrome superior verso 5.0

Requisies mnimas para utilizao do Jogo:

Velocidade de banda: 2Mb ou superior;

Dispositivos mveis, desktops que possuam o navegador chrome;

O jogo ter como foco a formao de equipes de

estudo, utilizando-se para tais tecnologias que permite

a integrao de ambientes tais como celulares, tablets,

desktops e etc, dispondo-se da web como meio de

comunicao diferentes entre eles.

Um dos poucos requisitos necessrios para a

execuo do software ser obter um dispositivo (seja

ele mvel ou desktop) que possua acesso internet e

um navegador que possua suporte a HTML5,

websocket e canvas.

Contudo foi dado o incio do processo de

desenvolvimento do projeto pesquisando e

armazenando contedo que pudesse servir como base,

para as etapas posteriores, utilizamos para tal,

publicaes do gnero, artigos e notcias relacionadas.

Determinamos o objetivo do projeto e as ferramentas

para atingi-lo decidimos utilizar como foco o HTML5

e websocket por serem novos recursos e ainda pouco

explorados e com grandes possibilidades, dentre essas

possibilidades a comunicao em tempo real que

essencial para um dos objetivos pedaggicos do jogo

que estimular o estudo em grupo.

Atualmente o jogo encontra-se em processo de

desenvolvimento. Estando j definido a mecnica do

jogo, a quantidade de jogadores, as regras, os nveis, os

tipos de perguntas, dentre outras questes necessrias e

relevantes que definir a estrutura terica do jogo. Para

dar prosseguimento as pesquisas e ao trabalho no

projeto em si, estipulamos um cronograma, que est

sendo utilizado como base para as prximas etapas.

Tabela 1: Cronograma

Figure 3: Tela de escolha de perguntas e o dispositivo mvel

como joystick

4. Concluso

Desde o incio do desenvolvimento do projeto, das

coletas de informaes, pesquisas, definio de

objetivos e do prottipo foi possvel notar vrias

possibilidades de desenvolvimento de aplicaes

diferentes.

Em reunies de orientao foram reformulados

alguns pontos e aperfeioamos outros; melhorando o

cenrio, o design e a histria do jogo. Ficando

claramente perceptvel equipe que necessrio

definir corretamente a estrutura do prottipo,

incrementando no projeto o Game Design Document; o

qual registra em detalhes todas as caractersticas do

jogo.

Finalmente, foi criado o prottipo, em meio h

inmeras dificuldades referentes a um conhecimento

slido das ferramentas que esto sendo utilizadas no

desenvolvimento.

Entretanto, notrio um grande potencial de

aplicao para o produto final se o mesmo for

desenvolvido com empenho e organizao at a

concluso.

Agradecimentos

Somos gratos primeiramente Deus por nos ter

concedido a graa em iniciar este projeto, onde

estamos compartilhando experincias, vivendo

aventuras acadmicas, estando sempre em uma

unanimidade. Agradecemos um ao outro por ter a

sabedoria de ouvir, falar no momento certo e

compreender a opinio do prximo. Agradecemos

tambm s nossas famlias que tem tido pacincia,

compreenso e j abriu mo de alguns compromissos

para nos ajudar nesta empreitada. Por fim, deixamos

tambm um singelo muito obrigado ao nosso querido

orientador, que nos acolheu com muito carinho,

prestatividade e confiana em nosso trabalho,

cumprindo perfeitamente o seu papel e nos formando

para ser criadores de idias e sucessores desta

sociedade.

Referncias

VENCESLAU, M., 2013. Reportagem: Falta de

profissionais de TI se agravar no Brasil, diz IDC. [online]

EXAME, So Paulo, Disponvel em:

www.exame.abril.com.br/carreira/noticias/falta-de-

profissionais-de-ti-se-agravara-no-brasil-diz-idc [Acesso em

04 Outubro 2013].

SIMAS, A., 2012. Reportagem: As graduaes campes de

desistncia. [online] GAZETA DO POVO, Paran,

Disponvel em:

www.gazetadopovo.com.br/vidauniversidade/nocampus/cont

eudo.phtml?id=1248860. [Acesso em 24 Novembro. 2013].

VIVES, F., 2011. Entrevista: O gargalo do Ensino Superior

brasileiro. [online] CARTA CAPITAL, So Paulo. Disponvel em: www.cartacapital.com.br/sociedade/o-

gargalo-do-ensino-superior-brasileiro. [Acesso em 04

Outubro 2013].

MEYER, J., 2011. Guia Essencial do HTML5, O - Usando

Jogos para Aprender HTML5 e JavaScript. Rio de Janeiro:

Cincia Moderna.

ALBERS, B.; LUBBERS, P.; SALIM, F., 2013.

Programao Profissional em HTML5. Rio de Janeiro: Alta

Books.

SHANKAR, A. Pro HTML5 Games, 2012. Nova Iorque:

APRESS.

SILVA, M., 2011. HTML5 A Linguagem de Marcao que

revolucionou a Web. So Paulo: NOVATEC.

LOBO, M. Artigo Panorama da Evaso no Ensino Superior

Brasileiro: Aspectos Gerais das Causas e Solues. 2012.

[online] Disponvel em:

www.institutolobo.org.br/imagens/pdf/artigos/art_087.pdf.

[Acesso em 10 Maro. 2014].