recursos de acelerômetro
Wemerson Donizete Duarte, Josimeire do Amaral Tavares. Instituto de Informática – Centro Universitário do Triângulo (UNITRI) Caixa Postal 309 – 38.411-106 – Uberlândia – MG –
Brasil
wemersondd@gmail.com, josimeiretavares@gmail.com
Resumo. O uso do HTML5 (Hypertext Markup Language, versão 5) vem sendo a cada dia mais explorado nas aplicações WEB e difundido pelo mundo. Desta forma, este artigo apresenta um estudo sobre tal linguagem de marcação, seus novos recursos, assim como os benefícios do desenvolvimento de jogos WEB, utilizando recursos de acelerômetros dos dispositivos móveis (celulares e tablets). A partir do desenvolvimento de um jogo demonstrativo, será possível compreender as vantagens, recursos, capacidade e formas de utilização da linguagem HTML5, explorando recursos de hardware (acelerômetros) de outros dispositivos.
PalavrasChave. Linguagem HTML5, Acelerômetro, Aplicações Web.
1. Introdução
As páginas web com conteúdo dinâmico não são mais novidades. Graças ao flash, tecnologia desenvolvida pela empresa Adobe Systems Incorporated, atualmente é possível desenvolver sites animados, interativos e com uma gama de conteúdo muito maior quando comparado à tempos remotos. Além disso, aplicações modernas e interativas estão cada vez mais presentes e acessíveis aos usuários, em diversas modalidades de aparelhos, como computadores, celulares, tablets, aparelhos televisores, carros, geladeiras, GPS, dentre outros.
Desse modo, diante das necessidades e tendências atuais, nota-se que o ser humano está cada dia mais dependente de recursos tecnológicos, tornando-se, consequentemente, mais exigente. Sendo assim, nesse cenário, é possível perceber um crescimento significativo de empresas de desenvolvimento de software investindo em aplicações interativas e modernas para as diversas plataformas e tecnologias atuais. Vale ressaltar que tais empresas vêm encontrando o HTML5 (Hypertext Markup Language) como o grande aliado e principal alavancador em criações e inovações.
Isso se deve à possibilidade de usufruir de algumas funcionalidades já disponíveis, visto que o HTML5 ainda não foi totalmente homologado pela W3C (World Wide Web Consortium), tendo como data prevista julho de 2014. Além disso, vale ressaltar que grande parte de suas APIs (Application Programming Interface) já se encontram atualmente disponíveis para a maioria dos navegadores, sendo possível desenvolver aplicações com geoposicionamento, funcionamento off-line, conexão em
tempo real com o servidor, gráficos vetoriais, dentre outros, utilizando acelerômetros e um novo conjunto de recursos de interface.
Neste trabalho, foi utilizada a linguagem de marcação HTML5 por meio da implementação de um jogo educativo, o qual responde de forma interativa a comandos do usuário a partir de um celular ou tablet, através do uso de seu acelerômetro, dispositivo capaz de reconhecer os movimentos do aparelho.
No primeiro momento serão descritos os conceitos da arquitetura e seus recursos, tanto do HTML5 como do acelerômetro. Posteriormente, no estudo de caso serão demonstrados os parâmetros utilizados para a implementação de um jogo educativo, o qual tem como objetivo expor as vantagens da nova versão da referida linguagem e demonstrar seu uso com acelerômetro.
2. A linguagem HTML5 2.1. Contextualização histórica
Antes de aprofundar na conceituação da linguagem HTML5, suas funcionalidades e infinita gama de recursos, faz-se necessário, inicialmente, contextualizar seu surgimento e os eventos propulsores a ele relacionados.
Em 1969, no auge da Guerra Fria, nascia nos EUA a ARPAnet (Advanced Research Projects Agency), a primeira rede de computadores, criada pelo Departamento de Defesa norte-americano. Nesta rede, o principal diferencial seria o fato de todos os pontos se equivalerem, não havendo um comando central, o que culminou no surgimento do conceito de internet. No entanto, a nomenclatura internet veio só mais tarde, em 1974, quando as instituições de ensino e laboratórios dos EUA começaram a se conectar entre si. Ficando cerca de duas décadas restrita aos meios acadêmicos e científicos, somente em 1987 a internet passou a ser liberada para o âmbito comercial [KUROSE 2006].
A partir deste importante marco, grande ênfase passou a ser dada ao nome de Tim Berners-Lee, que, em 1989, inventou a WWW (World Wide Web) e, um ano depois, a HTML, primeira versão da linguagem de formatação de documentos com a capacidade de links e hipertextos, tornando-se o formato básico para publicações na web. Assim, o poder da WWW passou a residir em sua capacidade em associar uma determinada parte de um documento eletrônico a outros computadores a milhares de quilômetros de distância. Esta conexão entre documentos foi possível graças à utilização do protocolo de comunicação chamado HTTP (Hypertext Transfer Protocol) e da linguagem HTML [TIPO GRAFOS 2012] [W3C 2012].
Desde 1994, quando fundada a W3C (World Wide Web Consortium), cujo principal objetivo consiste em definir padrões para as respectivas áreas relacionadas à web, o HTML vem passando por uma série de evoluções constantes e se tornando mais consistente, robusto e incorporando mais funcionalidades. Dessa forma, têm-se abaixo os principais marcos de sua evolução histórica [W3C 2013] [FRONTENDBRASIL 2012]:
1994 - HTML 2.0: Padronização para as características principais; 1994 - HTML 3.0: Uma extensão do HTML;
1995 - HTML 3.2: Netscape e Internet Explorer definem seus próprios padrões;
1995 - JavaScript : criada por Brendan Eich da Netscape; 1996 - CSS1: É apresentada pela primeira vez a Folha de estilo; 1997 - HTML 4.0;
1998 - CSS2: Em maio é lançada a segunda versão da Folha de Estilo; 1999 - HTML 4.01: Algumas modificações da versão anterior;
2000 - XHTML .0: É criado consiste de uma versão XML do HTML v4.01; 2008 - HTML5 é publicado como um novo projeto do W3C.
2012 - HTML5 é liberado para uso.
Antes de ser publicado, o HTML5 já vinha sendo trabalhado desde 2004, com o intuito de suprir as novas expectativas dos usuários. Sua essência consiste em melhorar a linguagem com o suporte para as mais recentes multimídias, enquanto a mantém facilmente legível por seres humanos e consistentemente compreendida por computadores e outros dispositivos (navegadores, parsers, etc). O HTML5 será o novo padrão para HTML, XHTML, e HTML DOM. Atualmente, está em fase de esboço, porém diversos navegadores já implementam algumas de suas funcionalidades [W3C BRASIL 2013] [FRONTENDBRASIL 2012].
No entanto, mesmo iniciado em 2004, o projeto do HTML5 só foi incorporado a W3C em 2006, projeto este inicializado pelo grupo WHATWG (WHAT Working Group) fundado por desenvolvedores de empresas como Mozilla, Apple e Opera em 2004.
Assim, a WHATWG e W3C, além de definirem as novas regras de marcação, passam ambos a definirem, também, as APIs que formarão a base da arquitetura web, tendo como data estimada o final de julho de 2014 para entrega de toda documentação restante. Tais APIs são conhecidas como DOM Level 0 (Document Object Model), tecnologia para interação com objetos HTML, XHTML e XML [W3C BRASIL 2013] [WILLIAM 2012].
No entanto, vale ressaltar que o presente artigo fará menção e abordará somente as funcionalidades já documentadas e publicadas até o momento.
2.2. Vantagens do HTML5 2.2.1. Estrutura
A partir de sua evolução, a nova versão HTML vem trazendo novas e boas perspectivas. Um de seus principais pontos de destaque consiste em oferecer suporte nativo a recursos multimídia sem a necessidade de instalação de plugins de áudio ou vídeo no navegador, assim como a possibilidade de se criar aplicações RIA (Rich Internet Applications) trabalhando a nova API para desenvolvimento de gráficos bidimensionais em conjunto com JavaScript e CSS (Cascading Style Sheets). Além disso, o HTML5 fornece ferramentas que possibilitam a CSS e o JavaScript realizarem seu trabalho da melhor maneira possível. Por meio de suas APIs, torna-se possível a manipulação das características destes elementos, de forma que o website ou a aplicação
continue com boa performance e funcional [MICROSOFTVIRTUALACADEMY 2013].
Vale destacar, ainda, a criação de novas tags, bem como a modificação da função de outras, visando à organização e padronização universal para acesso em todos os navegadores. Como exemplo, pode-se citar a criação de seções comuns e específicas como rodapé, cabeçalho, sidebar, menus, dentre outros, possibilitando a captura de maneira automática de informações localizadas nessas partes dos websites [MICROSOFTVIRTUALACADEMY 2013] [W3C BRASIL 2013].
Apesar de sua evolução em comparação às versões anteriores, o HTML5 ainda apresenta certas desvantagens no que diz respeito à instabilidade em alguns navegadores, como, por exemplo, versões do Internet Explorer anteriores à versão 8.
Entretanto, nota-se que a estrutura básica do HTML5 continua sendo a mesma das versões anteriores da linguagem, havendo apenas uma simplificação na declaração do doctype, charset e lang que devem ser as primeiras linhas de código do documento antes da tag HTML.
A Figura 1 mostra parte de um código em que a estrutura básica pode ser seguida:
Figura 1. Estrutura básica HTML5
Além da organização dos documentos através das novas tags, o HTML5 introduz, sobretudo, uma nova camada de API. São oito novas APIs propostas nesta primeira versão da HTML5, entre as quais algumas podem ser listadas abaixo e ilustradas a partir da Figura 2 a seguir.
API de desenho 2D, graças à nova baliza canvas;
API para os vídeos e os sons/músicas permitidos graças às balizas vídeo e áudio;
API utilizada para as aplicações off-line;
API de edição em combinação graças ao atributo dos contents; API de arrastar-soltar em combinação com o atributo rolante;
para prevenir os problemas de botão "volta para trás". API de geo-localização;
Figura 2. Novas tags criadas no HTML5 [The Wall Street Journal 2011].
Assim, a nova camada da API permite aos programadores limitar a utilização de bibliotecas ou de funções Javascript. Com isso, os programadores têm um código melhor organizado e conforme os padrões do W3C, que visa uma melhor definição da semântica e estrutura do código. Consequentemente, com mais semântica e menos código, abandona-se a organização com base nos blocos e linhas, conforme ilustrado na Figura 3.
Figura 3. Novas tags estruturais [W3C BRASIL].
Por fim, como uma das importantes inovações trazidas pelo HTML5, pode-se destacar a facilidade na manipulação do elemento através da API CANVAS com JavaScript, possibilitando ao desenvolvedor modificar as características dos objetos de forma não intrusiva e de maneira que seja transparente para o usuário final
[MICROSOFTVIRTUALACADEMY 2013] [W3C BRASIL 2013]. 2.2.2. Vantagens aos usuários
Uma das grandes mudanças com a nova versão HTML5 para os usuários consiste em uma maior interatividade sem a necessidade de instalação de plugins adicionais que, anteriormente, causavam dificuldades para os leigos e, de forma geral, prejudicavam o desempenho dos websites. Com a nova linguagem os usuários ganham uma rica variedade de recursos interativos, como a integração com recursos de hardware de dispositivos móveis, páginas melhor elaboradas esteticamente e com mais qualidade funcional devido às novas regras que agora definem os padrões a serem seguidos pelos desenvolvedores de websites.
Outro ponto também muito importante refere-se à possibilidade de acessar a mesma página ou aplicação web de qualquer dispositivo de origem com acesso à internet, como celulares, computadores, tabletes, dentre outros, desde que o navegador seja compatível com a nova linguagem de marcação. A Figura 4 apresenta os diagramas iniciais sobre a acessibilidade do HTML5 nos diversos tipos de dispositivos [MICROSOFTVIRTUALACADEMY 2013] [W3C BRASIL 2013].
Figura 4. Diagrama original inicial HMTL5 [W3C BRASIL 1998].
2.3. Acessibilidade e uso do HTML5
Uma pesquisa realizada pela Strategic Analytics aponta que, em 2011, havia 336 milhões de dispositivos móveis com suporte a HTML5 no mundo. Em 2013, o número deverá passar de um bilhão, sendo que a tendência é que ele seja adotado inclusive em aparelhos mais baratos [STRATEGYANALYTICS 2011].
Segundo Neil Mawston (2011), “o HTML5 permite criar aplicativos quase universais, capazes de rodar numa variedade de dispositivos. O HTML5 vai ajudar smartphones, tablets, PCs, televisores e veículos a convergir no futuro".
2.4. Compatibilidade dos navegadores
Desde o início de sua implantação, houve concordância sobre quais deveriam ser os fundamentos do HTML5 (fundamentos publicados em: http://www.w3.org/TR/html-design-principles/). Resumidamente, os pilares consistem em tornar o comportamento dos diversos browsers interoperáveis (funcionar da mesma forma, em todo browser), definir como o tratamento de erros deverá ser realizado e, ainda, melhorar a linguagem, porém, sem sacrificar a facilidade da criação para conteúdo WEB [W3C 2013].
No entanto, por mais que as especificações do HTML5 estejam em fase adiantada de criação e especificação, existe uma corrida por parte dos navegadores para se tornarem compatíveis com estas novas características. O cenário é animador analisando-se do ponto de vista dos desenvolvedores desses navegadores, pois a maioria deles já possui suporte para grande parte das novas funcionalidades e se consideram prontos para encarar esta mudança [W3C 2013].
3.0. Acelerômetro
Atualmente o acelerômetro está se tornando um item de série nos novos aparelhos celulares. Quase todo aparelho hoje possui este dispositivo, que informa ao sistema do celular quando ele se movimenta de um lado para o outro ou de cima para baixo.
Existem vários tipos de acelerômetros. Alguns utilizam o efeito piezelétrico, que contêm estruturas microscópicas de cristal que são afetadas pelas forças que atuam em um sensor, as quais geram uma tensão elétrica de acordo com a agitação, esse tipo de acelerômetro tem como desvantagens, seu custo de fabricação, por ser maior faz com que os fabricantes acabem optando por outro modelo. A outra modalidade utilizada se baseia na detecção de variações na capacitância em duas microestruturas eletrônicas próximas umas das outras, conforme exemplificado a seguir [SERASA 2013].
A Figura 5 ilustra o acelerômetro de um aparelho Iphone 4S, que utiliza as microestruturas eletrônicas para medir as variações na capacitância e identificar quando há movimentos no aparelho.
Figura 5. Acelerômetro Iphone 4s [HAMMACK 2012].
Abaixo, a Figura 6 utiliza um modelo de circuito de acelerômetro, usado em celulares. O circuito é composto de um elemento móvel, o Seismic Mass, que vibra sobre a base (Housing) em caso de movimentação. Em cada vibração, as aletas do
Seismic Mass se aproximam dos capacitores, alterando a capacitância [HAMMACK 2012].
Figura 6. Housing e Seismic Mass [HAMMACK 2012].
Conforme Bill Hammack (2012) apresenta no seu livro Eight Amazing Engineering Stories, a Figura 7 ilustra o esquema da medida do diferencial, onde ele é medido através das aletas do Seismic Mass, quando se aproximam dos capacitores, alterando sua capacitância. As informações são captadas pelo driver do acelerômetro e interpretadas pelo sistema operacional do dispositivo.
Figura 7. Medida do diferencial [HAMMACK 2012].
3.1. Funcionamento
Para melhor entendimento das funcionalidades do acelerômetro neste artigo, é utilizada a figura 8 que ilustra o funcionamento do acelerômetro.
Figura 8. Acelerômetro conceitual [DECOM. UFOP 2013].
A Figura 8 apresenta um acelerômetro conceitual. Uma mola fixa em uma base (housing) erguendo um peso, calibrada em uma extensão equivalente a 1G (G=força da gravidade) que quando comprimido, gera uma voltagem elétrica e quanto maior a compressão, maior a voltagem gerada. Em geral, a voltagem na saída de um acelerômetro desse tipo é pequena. Mas, com a sensibilidade da eletrônica atual, essas voltagens são suficientes para resultar em medidas confiáveis da aceleração.
Os principais elementos do acelerômetro, housing e seismic mass. Ao movimentar o sistema, a seismic mass estende ou distende a mola, como mostrado na Figuras 10.
Figura 10. Mola encolhendo [HAMMACK 2012].
Se as cargas nas placas forem mantidas constantes, a voltagem nos terminais de saída variam com a distância entre as placas. Placas mais próximas resultam em voltagens menores nos terminais. O circuito acoplado ao Housing mede a força elástica aplicada à mola e retorna a aceleração. [HAMMACK 2012].
A Figura 13 apresenta a dimensão do tamanho do acelerômetro modelo LIS302DL e apresenta sua estrutura microscópica, comparada a uma moeda. Esse design simples faz com que o acelerômetro seja um componente bastante compacto e barato, que custa apenas de 2 a 3 dólares por unidade aos fabricantes. O LIS302DL é usado no WiiMote controle do Nitendo WII e também nos aparelhos da Apple. [SERASA 2013].
3.2. Usabilidade
O acelerômetro pode e vem sendo, atualmente, utilizado para diversas funções, como mudar a faixa no MP3 player, atender ou recusar uma ligação, abrir ou fechar aplicativos, e assim por diante. Por exemplo, uma simples chacoalhada no aparelho adianta a faixa musical, duas colocam o telefone em modo silencioso e por aí vai. Dessa forma, tais funcionalidades incorporadas aos aparelhos atuais passam a torná-los cada vez mais interativos e atrativos aos usuários.
Além disso, outras áreas em que o acelerômetro vem sendo muito explorado e está com muita aceitação, são os jogos e os aplicativos de GPS. No caso dos jogos, o acelerômetro permite implantar controles no estilo do Nintendo Wii, o que abre uma nova gama de possibilidades, possibilitando aos usuários uma incrível interação aos jogos, podendo controlar carros, motos e personagens de jogos apenas movendo seu aparelho celular, por exemplo. [GUIADOHARDWARE 2009] [HAMMACK 2012] 4.0. Estudo de Caso
Para demonstrar na prática e exemplificar o desenvolvimento de aplicações utilizando os conceitos apresentados anteriormente, será apresentado nesta seção um jogo educativo nomeado Super Galaxy, ainda em fase de desenvolvimento, mas suficiente para demonstração dos recursos de acelerômetro. O mesmo foi desenvolvido para rodar em dispositivos móveis que possuam acelerômetro, acesso à internet e navegador com suporte ao HTML5.
O tema de exploração espacial do jogo foi escolhido por representar de forma clara e simples as funcionalidades do acelerômetro propostas neste artigo, além de possuir caráter educativo para usuários.
As telas e códigos-fonte que serão expostos são parte de um jogo educativo em fase de desenvolvimento.
4.1. Desenvolvimento e Testes
A descrição detalhada do ambiente em que foi desenvolvido e executado o estudo de caso é demonstrada na Tabela 1. Primeiramente, tem-se a configuração do computador, ambiente e ferramentas utilizadas para o desenvolvimento e, em seguida, a configuração do dispositivo móvel utilizado para testes.
Tabela 1. Descrição do Ambiente de Desenvolvimento e Testes.
Desenvolvimento Descrição
Hardware Processador Intel i7-3632QM CPU 2.20 GHz,
8 GB de RAM (Random Acess Memory ou Memória de Acesso Randômico) e Disco Rígido de 1 TB (Gigabytes).
Sistema Operacional Windows 8 Professional, 64 bits. IDE - Integrated Development
Desenvolvimento)
Desenvolvimento HTML5, JavaScript Java - JDK (Java Development Kit)
Adicional NetBeans conector de extensão para o Chrome
1.0.0. Layout e edição de imagens GIMP 2.2.
Testes Descrição
Hardware Processador Dual-Core 1.3GHz, 1 GB de RAM e Memória interna de 16 GB, acelerômetro, Display retina de 4 polegadas. Sistema Operacional Apple IOS, Firmware 6.1.4.
Dispositivo Iphone 5.
4.2. Desenvolvimento do jogo
Nesta sessão, o objetivo é demonstrar a interação de um jogo educativo em HTML5 explorando os recursos dos acelerômetros de dispositivos móveis. Sendo assim, o desenvolvimento das aplicações cliente e servidor não serão relatados na íntegra, mas somente de forma a colaborar na compreensão do uso dessas tecnologias. Portanto, não serão exibidos todos os arquivos correspondentes à visualização do usuário (views), ou seja, das telas. Serão apresentadas somente as essenciais para o entendimento.
Para apresentação do jogo demo, foi selecionada a nova API do HTML5, devicemotion, responsável pelo acesso às informações fornecidas por dispositivos de aceleração e orientação (nos dispositivos que possuem acelerômetro). Esta API, implementada juntamente com o JavaScript, torna-se responsável por fornecer a aceleração e rotação dos dispositivos sobre seus eixos.
Como representado na Figura 14, os eventos dessa API identificam os valores (posição) retornados referentes a cada um dos eixos X, Y e Z, onde:
Y é o eixo perpendicular a X e Z, que percorre a tela do dispositivo de baixo para cima;
X é o eixo que percorre a tela do dispositivo de lado a lado (perpendicular a Y e Z);
Z é o eixo perpendicular a X e Y, que completa o sistema, sendo representado como estivesse “saindo” da tela.
Figura 14. Eixos acelerômetro [W3C 2013].
A API expõe dois tipos diferentes de dados do sensor: orientação e movimentação. O evento de captura das coordenadas dos eixos é disparado sempre que há uma mudança significativa na orientação do objeto. Como por exemplo, um usuário inclina ou gira o dispositivo, o evento devicemotion é acionado na janela e fornece os ângulos de rotação alfa, beta e gama (expressos em graus), como pode ser observado em parte do código do método implementado na Figura 15.
Figura 15. Implementação do evento DeviceMotion.
O Device Motion, sempre que possível, na prática, proporciona a aceleração do centro de massa do dispositivo. Para ter acesso a estes dados, apenas é definida uma função para manipulação do evento. Os dados são fornecidos através dos eventData's, listados abaixo:
Acceleration: fornece a aceleração do dispositivo em cada um dos três eixos – propriedades x, y e z (unidade em m/s²);
AccelerationIncludingGravity: igualmente à acceleration, fornece a aceleração do dispositivo em cada um dos três eixos (X, Y e Z). A diferença está no fato de o hardware ter ou não a capacidade de excluir o efeito da gravidade. No caso de o dispositivo estar “deitado” e em repouso, a aceleração no eixo Z sempre terá um valor aproximado de 9.8 (gravidade terrestre) somado a seu valor;
RotationRate: provê as taxas de rotação referentes a cada eixo, propriedades alpha, beta e gamma (exatamente os mesmos dados fornecidos pelo evento deviceorientation).
Quanto mais inclinado o dispositivo, mais rápido o elemento mapeado será movido. Isso é possível através dos movimentos rotacionais dos eixos, a partir dos quais a aceleração é aumentada levando em conta as taxas de alteração dos ângulos e da aceleração gravitacional no dispositivo, expressos em m/s2. A Figura 16 ilustra os movimentos.
Figura 16. EventData Acceleration [MSDN 2013].
O elemento manipulado, referenciado nos eventos citados acima é criado através da API CANVAS 2D.
No código apresentado na Figura 17, o elemento é criado e redimensionado. O mesmo poderia ser totalmente desenhado pelas funcionalidades da API, contudo, na demonstração foi inserido um arquivo.GIF (Graphics Interchange Format) voando.gif, a fim de incorporar melhor ao cenário proposto e manter a essência do jogo.
Figura 17. Criação do personagem [MSDN 2013].
Associando as duas API's com o JavaScript, resulta-se na ação esperada, o elemento criado (personagem do jogo) é referenciado no método ondevicemotion (), sendo que, ao mover a tela do dispositivo, o devicemotion identifica os movimentos e as novas coordenadas do elemento, mudando a posição do personagem na tela.
Nesta demonstração, o personagem (um astronauta) se move no espaço fazendo uma exploração espacial. A Figura 18 apresenta uma das fases do jogo, onde o astronauta tem como objetivo explorar o espaço, passando sobre os planetas para conhecer um pouco mais sobre a história e principais características de cada um.
Figura 18. Fase 1 do jogo demo Super Galaxy.
Na fase apresentada acima, após o astronauta ser movido sobre os planetas do sistema solar, são exibidas na tela as informações sobre aquele planeta em questão. Esta funcionalidade é implementada através da validação das coordenadas do personagem. Conforme parte do método mostrado abaixo na Figura 19, nota-se que, quando o personagem atingir as determinadas coordenadas estabelecidas para cada um dos planetas, é acionado um novo evento, onde serão apresentadas ao jogador as informações educativas oferecidas pelo jogo.
O método apresentado agora é o boundingBoxCheck (), usado no tratamento de colisões. No entanto, como no jogo apresentado os personagens não encontram outros inimigos, obstáculos e nenhuma espécie de ataque, os únicos pontos validados são das bordas delimitadoras da fase, isso de acordo com a tela de cada dispositivo. O método apresentado abaixo apenas mantém o personagem dentro do cenário mantendo um leve efeito de quique após ele ir de encontro às bordas da tela.
Figura 20. Tratamento de colisões.
Por fim, a última funcionalidade apresentada é a nova interação multimídia do html5, com a nova tag <audio>. Todas as telas do jogo possuem uma trilha sonora personalizada, sendo os arquivos de áudio inseridos nas páginas html utilizando somente a nova API de áudio, conforme pode ser observado na Figura 21 eliminando assim a necessidade de plug-ins adicionais como nas versões anteriores do html.
A implementação foi realizada de forma bem simples, com apenas algumas linhas de código, ficando todo o trabalho com o navegador. No código apresentado, a trilha sonora inicia automaticamente e está em loop. Nesta tela, o controlador não aparece, ficando oculto ao usuário por uma opção de estética. Contudo, é possível customizar conforme a necessidade.
Encerrando a apresentação das API utilizadas na criação do jogo, é apresentada a seguir, na Figura 22, a tela inicial de apresentação do jogo educativo, que representa a conclusão do jogo com todas suas funcionalidades propostas.
Figura 22. Tela inicial do jogo Super Galaxy.
5.0. Análise e Conclusão
Apesar de ainda não ser um padrão consolidado, o HTML5 já é uma realidade e vem se fortalecendo e ganhando seu espaço, já sendo utilizado em grandes websites. A partir dos estudos e trabalho realizado, nota-se que o desenvolvimento de jogos educativos em HTML5, utilizando os recursos de acelerômetro de dispositivos móveis, demonstra ser uma eficiente opção para explorar a interatividade com os usuários e jogadores, possibilitando-lhes controlar os jogos apenas movimentando o dispositivo.
O desenvolvimento de aplicações web interativas vem sendo uma tendência em curto prazo, principalmente quando utilizadas em dispositivos móveis, por possibilitar ao usuário maior mobilidade no acesso a jogos.
A nova versão da HTML também possibilita aos desenvolvedores, facilidades e riquezas de benefícios na sua implementação, devido ao grande número de
documentação recém-disponibilizadas, à nova semântica que melhora a distribuição do código e, principalmente, às novas API's desenvolvidas.
Entretanto, vale lembrar algumas limitações do uso desta tecnologia. Como exemplo de cenário não viável para HTML5 com acelerômetro, podem-se citar computadores de usuários com navegadores web desatualizados e, assim, sem suporte à nova versão da linguagem. Além disso, o fato do HTML5 ainda não estar totalmente concluído faz com que os navegadores ainda não estejam totalmente padronizados e preparados para suportar todas as funcionalidades com coesão.
A partir deste estudo, como sugestão para trabalhos futuros, destaca-se o uso da API CANVAS para criação de elementos manipuláveis via Javascript em 2D e 3D, que podem ser muito exploradas nas aplicações web desenvolvidas em HTML5. Isso se justifica pela possibilidade de sua utilização explorando o acelerômetro para manipulação do elemento e, com isso, criar formas, desenhos, manipulação de cores, entre outros, apenas movendo os dispositivos. Tal funcionalidade poderia ser muito útil, por exemplo, em trabalhos de educação e reabilitação de usuários, por trabalhar a coordenação motora e a interatividade, trazendo mais realidade e vida aos jogos e aplicativos em geral, fazendo com que o usuário ou jogador se sinta parte do jogo.
Dessa forma, pode-se dizer que o estudo realizado neste trabalho colabora para fins acadêmicos e até mesmo para o próprio mercado, oferecendo a experiência associada às tecnologias envolvidas e aqui citadas.
Referências Bibliográficas
DECOM UFO. Acelerômetros. Disponível em:
<http://www.decom.ufop.br/imobilis/?p=1889/>. Acessado em 27 abril 2013.
DECOM UFO, Reis, B. HTML5 para sistemas automotivos. Disponível em: <http://www.decom.ufop.br/imobilis/?p=1244>. Acessado em 27 abril 2013.
DEVMEDIA. HTML5, Marins .R, Ribeiro. Novas Tags. Disponível em: <
http://www.devmedia.com.br/html5novas-tags/23613>. Acessado em 22 maio 2013. FRONT END BRASIL. Artigos. Disponível em:
<http://www.frontendbrasil.com.br/artigos/a-historia-do-html/>. Acessado em 10 maio 2013.
HAMMACK, Bill. Eight Amazing Engineering Stories: Using the Elements to Create Extraordinary Technologies. Articulate Noise Books, 2012.
HTML5. Test Browser. Disponível em: < http://html5test.com/>. Acessado em: 10 abril 2013.
<http://www.htmlstaff.org/ver.php?id=1161>. Acessado em 10 maio 2013.
INFO WESTER. Introdução ao HTML5. Disponível em: <http://www.infowester.com/introhtml5.php/>. Acessado em 12 abril 2013.
KUROSE, James F.; ROSS, Keith W. Rede de Computadores e a Internet: uma nova abordagem. São Paulo: Addison Wesley, 2003.
MICROSOFT VIRTUAL ACADEMY. Documentação Curso HTML5. Disponível em: <
http://www.microsoftvirtualacademy.com/training-courses/html5-homologado-pelo w3c>. Acessado em 20 maio 2013.
PETER FRIESE. How to Use the Gyroscope of Your iPhone in a Mobile Web App. Disponível em: <
http://www.peterfriese.de/how-to-use-the-gyroscope-of-your-iphone-in-a mobile-web-app/>. Acessado em 30 abril 2013.
STRATEGY ANALYTICS. One Billion HTML5 Phones to be Sold Worldwide in 2013. Disponível em:
<http://www.strategyanalytics.com/default.aspx?mod=pressreleaseviewer&a0=5145/>. Acessado em 12 de abril 2013.
SERASA. Tipos mais comuns de acelerômetros. Disponível em:
<http://www.seara.ufc.br/tintim/tecnologia/acelerometro/acelerometro01.htm />. Acessado em 15 maio 2013.
TANENBAUM, Andrew S. Redes de Computadores. Tradução da 4rd. Ed. em inglês. Editora Campus, 2003.
TIPO GRAFOS.NET. Evolução do WWW. Disponível em:
<http://www.tipografos.net/internet/berner-lee.html>. Acessado em 11 maio 2013. W3C BRASIL. Curso HTML5. Disponível em:
<http://www.w3c.br/cursos/html5/conteudo/capitulo1.html>. Acessado em 25 abril 2013. W3C. DeviceOrientation Event Specification. Disponível em:
