HTML5 como Ferramenta para o Desenvolvimento de Jogos Interativos Web

Loading....

Loading....

Loading....

Loading....

Loading....

Texto

(1)

consistente e adequado para que tais ferramentas educacionais não sejam reféns de empresas de tecnologia.

Nos últimos anos muito se trabalhou para que isso se torne uma realidade. Com o advento do HTML 5 (W3C, 2010), diversas possibilidades podem ser exploradas, dentre elas, a criação de jogos educacionais para o ensino. Como se trata de uma nova tecnologia, outras possibilidades podem ser vislumbradas e tratadas com boas perspectivas. Logo, o presente trabalho apresenta uma breve explanação sobre esta nova tecnologia, bem como o desenvolvimento de procedimentos reutilizáveis para a produção dos jogos interativos.

2. Estado da arte

A linguagem de marcação HTML (Hiper Text Mark-up Language) derivou-se da linguagem de marcação pioneira SGML (Standard Generalized Mark-up Language) desenvolvida na

década de 60, sofrendo adaptações com o intuito de auxiliar na estruturação e apresentação de documentos em um nave-gador - browser. A atualização do HTML 4.01 passou por período de uma década sem grandes modificações (W3C, 2010).

Pela necessidade de uma reestruturação, a W3C(World Wide Web Consortium) buscou melhorias e inovações para facilitar tanto o trabalho de desenvolvedores quanto no simples uso da web por usuários domésticos. Também contando com a ajuda da WHATWG (Web Hypertext Application Technology Working Group), esta sendo desenvolvida a quinta versão da linguagem de apresentação HTML, que chega ao mer-c a d o q u e b r a n d o b a r r e i r a s d e compatibilidade na exibição de vídeos via internet, utilização da geolocalização padronizada e aprimoramento no uso off-line de aplicações web, permitindo com isso a fácil exibição de gráficos interativos em browsers, além de outros serviços que ainda estão em fase de aperfeiçoamento e prometem revolucionar o modo como a

Figura 1: Demonstração da aplicação Muro em iPad. FONTE: Deviantart (2010)

17

TECNOLOGIA

HTML5 como Ferramenta para o Desenvolvimento de Jogos Interativos Web

1 Castro H. C. Souza 1 Jader L. Nascimento 2 Alex Coelho 1 Graduando de Graduação de Sistemas de Informação da Faculdade Católica do To-cantins – Campus Sede.

2

Mestre em Ciência da Com-putação – Professor do cole-giado de Sistemas de Infor-mação da Faculdade Católica do Tocantins – alex@catoli-ca-to.edu.br

Resumo: Atualmente se busca facilitar o

acesso a informação e o conhecimento por meios de elementos de interesse comum e em constante transformação como a web e jogos interativos. Uma das formas mais utilizadas para tais perspectivas consiste na introdução de jogos nos mais diversos contextos, facilitando a absorção, o apren-dizado e a construção do conhecimento. Porém, para que isso ocorra é necessário considerar além de fatores específicos ligados ao processo de desenvolvimento de jogos, que existam tecnologias de desenvolvimento que auxiliem nesse pro-cesso. Diante disso, e considerando tanto o alcance da web quanto a sua facilidade de disponibilizar conteúdo é importante que sejam consideradas tecnologias que permitam utilizar todo o potencial dispo-nibilizado pela corrida tecnológica. Neste sentido, vem surgindo um novo conceito de linguagem de desenvolvimento web: a HTML 5, sendo uma evolução da HTML 4, credenciadas pelo consorcio W3C, res-ponsável em criar e manter tais padrões web. A utilização do HTML 5 combinada a criação de procedimentos para games online abre caminho para criação de jogos interativos. Logo, o objetivo deste traba-lho é apresentar o desenvolvimento de jogos interativos realizado com a utili-zação da linguagem HTML 5.

Palavras-chaves: HTML 5, Jogos

interativos educacionais, W3C.

Abstract: Today is seeking to facilitate

access to information and knowledge by means of elements of common interest and in constant transformation and continues as the web and interactive ga-mes. One of the most used for such views is the introduction of gaming in various contexts, facilitating absorption, learning and knowledge building. But for that to happen we need to consider in addition to

specific factors related to the process of game development, there are developing technologies that assist in this process. Given this, and considering the scope of the web as its ease of content available is considered to be important technologies that use the full potential offered by the technology race. In this sense, has emer-ged a new concept in web deve-lopment language: HTML 5, and an evolution of HTML 4, accredited by the W3C consortium, responsible for creating and maintaining these web standards. The combined use of HTML 5 establishing procedures for online gaming opens way for creation of interactive games. There-fore, the aim of this work is development interactive games with HTML 5.

Keywords: HTML 5, Interactive

educa-tional games, W3C.

1. Introdução

O avanço tecnológico e a constante busca por novas formas de auxiliar no processo de entretenimento e distribuição de conteúdo culminam com a criação de elementos que tornem tal processo atrativo. A criação de jogos pode ser considerada uma das estratégias mais importantes neste sentido, no qual está presente e são trabalhadas nos mais diversos âmbitos, desde o ensino f u n d a m e n t a l a t é o p r o c e s s o d e aprendizagem com conteúdos específicos ligados a áreas como administração, contabilidade e engenharia. Como exem-plo, pode ser citado a criação de jogos comerciais de empresas e autarquias, como o SEBRAE em seu âmbito nacional. Logo, é importante considerar que a utilização da internet neste contexto ainda é pouco explorada devido a falta de tecnologias que forneçam suporte

(2)

consistente e adequado para que tais ferramentas educacionais não sejam reféns de empresas de tecnologia.

Nos últimos anos muito se trabalhou para que isso se torne uma realidade. Com o advento do HTML 5 (W3C, 2010), diversas possibilidades podem ser exploradas, dentre elas, a criação de jogos educacionais para o ensino. Como se trata de uma nova tecnologia, outras possibilidades podem ser vislumbradas e tratadas com boas perspectivas. Logo, o presente trabalho apresenta uma breve explanação sobre esta nova tecnologia, bem como o desenvolvimento de procedimentos reutilizáveis para a produção dos jogos interativos.

2. Estado da arte

A linguagem de marcação HTML (Hiper Text Mark-up Language) derivou-se da linguagem de marcação pioneira SGML (Standard Generalized Mark-up Language) desenvolvida na

década de 60, sofrendo adaptações com o intuito de auxiliar na estruturação e apresentação de documentos em um nave-gador - browser. A atualização do HTML 4.01 passou por período de uma década sem grandes modificações (W3C, 2010).

Pela necessidade de uma reestruturação, a W3C(World Wide Web Consortium) buscou melhorias e inovações para facilitar tanto o trabalho de desenvolvedores quanto no simples uso da web por usuários domésticos. Também contando com a ajuda da WHATWG (Web Hypertext Application Technology Working Group), esta sendo desenvolvida a quinta versão da linguagem de apresentação HTML, que chega ao mer-c a d o q u e b r a n d o b a r r e i r a s d e compatibilidade na exibição de vídeos via internet, utilização da geolocalização padronizada e aprimoramento no uso off-line de aplicações web, permitindo com isso a fácil exibição de gráficos interativos em browsers, além de outros serviços que ainda estão em fase de aperfeiçoamento e prometem revolucionar o modo como a

Figura 1: Demonstração da aplicação Muro em iPad. FONTE: Deviantart (2010)

17

TECNOLOGIA

HTML5 como Ferramenta para o Desenvolvimento de Jogos Interativos Web

1 Castro H. C. Souza 1 Jader L. Nascimento 2 Alex Coelho 1 Graduando de Graduação de Sistemas de Informação da Faculdade Católica do To-cantins – Campus Sede.

2

Mestre em Ciência da Com-putação – Professor do cole-giado de Sistemas de Infor-mação da Faculdade Católica do Tocantins – alex@catoli-ca-to.edu.br

Resumo: Atualmente se busca facilitar o

acesso a informação e o conhecimento por meios de elementos de interesse comum e em constante transformação como a web e jogos interativos. Uma das formas mais utilizadas para tais perspectivas consiste na introdução de jogos nos mais diversos contextos, facilitando a absorção, o apren-dizado e a construção do conhecimento. Porém, para que isso ocorra é necessário considerar além de fatores específicos ligados ao processo de desenvolvimento de jogos, que existam tecnologias de desenvolvimento que auxiliem nesse pro-cesso. Diante disso, e considerando tanto o alcance da web quanto a sua facilidade de disponibilizar conteúdo é importante que sejam consideradas tecnologias que permitam utilizar todo o potencial dispo-nibilizado pela corrida tecnológica. Neste sentido, vem surgindo um novo conceito de linguagem de desenvolvimento web: a HTML 5, sendo uma evolução da HTML 4, credenciadas pelo consorcio W3C, res-ponsável em criar e manter tais padrões web. A utilização do HTML 5 combinada a criação de procedimentos para games online abre caminho para criação de jogos interativos. Logo, o objetivo deste traba-lho é apresentar o desenvolvimento de jogos interativos realizado com a utili-zação da linguagem HTML 5.

Palavras-chaves: HTML 5, Jogos

interativos educacionais, W3C.

Abstract: Today is seeking to facilitate

access to information and knowledge by means of elements of common interest and in constant transformation and continues as the web and interactive ga-mes. One of the most used for such views is the introduction of gaming in various contexts, facilitating absorption, learning and knowledge building. But for that to happen we need to consider in addition to

specific factors related to the process of game development, there are developing technologies that assist in this process. Given this, and considering the scope of the web as its ease of content available is considered to be important technologies that use the full potential offered by the technology race. In this sense, has emer-ged a new concept in web deve-lopment language: HTML 5, and an evolution of HTML 4, accredited by the W3C consortium, responsible for creating and maintaining these web standards. The combined use of HTML 5 establishing procedures for online gaming opens way for creation of interactive games. There-fore, the aim of this work is development interactive games with HTML 5.

Keywords: HTML 5, Interactive

educa-tional games, W3C.

1. Introdução

O avanço tecnológico e a constante busca por novas formas de auxiliar no processo de entretenimento e distribuição de conteúdo culminam com a criação de elementos que tornem tal processo atrativo. A criação de jogos pode ser considerada uma das estratégias mais importantes neste sentido, no qual está presente e são trabalhadas nos mais diversos âmbitos, desde o ensino f u n d a m e n t a l a t é o p r o c e s s o d e aprendizagem com conteúdos específicos ligados a áreas como administração, contabilidade e engenharia. Como exem-plo, pode ser citado a criação de jogos comerciais de empresas e autarquias, como o SEBRAE em seu âmbito nacional. Logo, é importante considerar que a utilização da internet neste contexto ainda é pouco explorada devido a falta de tecnologias que forneçam suporte

(3)

browsers com a utilização de tecnologias de suporte a nova versão HTML. Isso abre caminho para que se vislumbre diversas possibilidades, dentro de um mercado bi-lionário que representa e têm despertado o interesse de um número cada vez maior de pessoas (FERNANDES, 2009).

Segundo Novak (2010) os jogos eletrô-nicos, em sua essência, são considerados uma das formas e práticas mais expres-sivas de entretenimento do século 21, no qual a paixão, em sua maioria das vezes movida pela criatividade e diversão, torna os jogos elementos diferenciados. Considerando todas as possibilidades tecnológicas que podem ser exploradas pela utilização do novo padrão, a criação de jogos interativos está dentre as mais cobiçadas atualmente, tendo como elemento central os benefícios que a internet e a web podem fornecer.

A utilização de elementos que colaboram para a criação de explicações e práticas que ajudam a desvendar a arte do apren-dizado e compreensão são ele-mentos considerados por diversos pesquisadores que tentam a todo instante buscar novos conceitos que norteiem tais processos. Dentre as diversas possi-bilidades existentes e comprovadas para a fixação de conteúdo, em seus diversos aspectos, a criação dos jogos eletrônicos está entre as mais atrativas (PERUCIA, 2007).

Os jogos têm conquistado público de todos os gêneros e idades, criando novos desafios para os profissionais da área, dentre eles a criação de jogos que con-tribuam para o cres-cimento sócio inte-lectual, fazendo com que tal ferramenta contribua de maneira significativa para processos como de ensino e aprendizado. Esses de-safios podem ser vistos a todo o momento e estão sempre presentes quando se busca a criação de uma expe-riência interativa que proporcione um alto grau de diversão e aprendizado para seus usuários.

Assim, considerando todas as pos-sibilidades tecnológicas que podem ser exploradas pela utilização do novo padrão HTML 5, a criação de jogos inte-rativos está dentre as mais cobiçadas atualmente, tendo como elemento central

os bene-fícios que a internet e a web podem trazer ao processo entretenimento e educação, como por exemplo.

3.Estudo de caso

O trabalho em seu eixo principal consiste na criação de procedimentos para um jogo interativo, tomando por base o desenvolvimento de um jogo de memória com cartas. Foram utilizadas técnicas re-conhecidas aceitas para a criação de jogos como Sprites e Tiles, associados ao processo de criação da arte, bem como a gerência e criação dos procedimentos de controle interativo que foram produzidos utilizando Javascript. Os procedimentos e páginas foram desenvolvidos utilizando a IDE (Interface Development Enviroment) Netbeans e os testes realizados utilizando navegadores que já possibilitam o manu-seio da tecnologia HTML 5, como o Safari, disponibilizado pela Apple.

O principal fator a ser levantado para fazer uso da tecnologia, consistiu no suporte que deve ser oferecido a nova versão do HTML. Considerando que o H-TML 5 fornece novos componentes para a criação de elementos apresentáveis em navegadores, sua transformação é total-mente dependente de tecnologias como Javascript, sendo responsável por toda a criação e manipulação dos elementos gráficos em tempo de execução, bem co-mo eventos e animações, além de tratar a interação entre o usuário e os compo-nentes do jogo.

Para a criação gráfica dos ele-mentos foi utilizada uma das novas tags ou componente fornecidos pela HTML 5, o Canvas, que define o local da página para criar todo e qualquer tipo de “desenho” a ser implementado. Tal procedimento pode ser visualizado no trecho de código apre-sentado na Figura 2.

Figura 2: Tag de criação do objeto Canvas. <center> <canvas id=”rostoreto” width=”150” height=”150”> </canvas> </center>

19

web é desenvolvida e utilizada (TA-BLELESS, 2010).

Diante das mudanças ofertadas por este novo padrão de desenvolvimento web, uma infinidade de aplicações das mais diversas categorias já vem sendo criadas por desenvolvedores de todo o mundo. Desde simples remodelagens de paginas construídas com o antigo HTML4, até aplicações robustas, tido como um novo conceito de aplicações denominadas Web App, como por exem-plo, o “Muro” (MACMAGAZINE, 2010). Desenvolvida pela DeviantArt a aplicação é um editor gráfico que demonstra o poder do HTML5, podendo ser utilizado até em iPad's, como ilustra a Figura 1.

O HTML (Hyper Text Markup Language) que inicialmente foi definido como sendo a linguagem de marcação base da web, foi concebido para ser uma linguagem para descrever seman-ticamente documentos científicos embora sua finalidade e concepção foi adequada aos longos dos anos. Em sua quinta versão o HTML está passando por uma revisão importante, uma nova tecnologia para criação e desen-volvimento de paginas esta sendo criada pela W3C (World Wide Web Consortium) buscando se adequar aos novos padrões da web que se m o d i f i c a r a m d e s d e s u a u l t i m a atualização, feita em 1999 (W3C, 2010).

O funcionamento do HTML5 está em fase experimental e diversas empresas aderiram a essa tecnologia. Para tanto, já estão sendo utilizadas novas tecnologias propostas pela nova HTML em diversos serviços, principalmente no que tange a apresentação de conteúdo e criação de jogos interativos na web (SLIDESHARE, 2010).

Diante disso, é importante ana-lisar a influência do tema, suas possi-bilidades e recursos visuais e sonoros para a criação de um jogo. Dentre estes recursos o HTML 5 oferece novas possibilidades para o desenvolvimento web, o que torna possível o desen-volvi-mento de jogos, sem a necessidade de plataformas auxiliares ou mesmo codecs especiais (SLIDESHARE, 2010). O HTML 5 promete ser uma revolução na Web devido a sua função mais polemica:

não precisar de ferramentas externas para acesso a vídeos, jogos, imagens, áudios ou qualquer outro recurso disponibilizado, assim, reduzindo ou até mesmo extinguindo a necessidade da utilização do aplicativo Flash Player da Adobe, bem como semelhantes. O HTML 5 favorece a criação de aplicações mais elaboradas, c o m m a i s e m e l h o r e s r e c u r s o s , enriquecendo ainda mais a atual web.

Tomando o exemplo apresentado na Figura 1, aliado ao enorme avanço das tecnologias que são empregadas a web atual, surgem também uma gama de procedimentos reutilizáveis para jogos online. Isso culmina com a possibilidade de tais procedimentos virem a se tornar um engine, no caso um motor para jogos online web. Um engine, também denominada game engine, é definido como um software ou conjunto de biblio-tecas utilizadas para facilitar o desen-volvimento de jogos ou qualquer outra aplicação que utilize gráficos em tempo real (3DENGINES, 2010).

Em sua maioria tais proce-dimentos são distribuídos como API's ou em conjunto com ferramentas que auxiliam no desenvolvimento, por meio de scripts reutilizáveis preconcebidos, que são adaptados as necessidades apre-sentadas, conhecidos como middleware's. Um exemplo de jogo que utiliza recursos do HTML 5 e Javascript estilo 8-bits é o Leave Me Alone (AKIHABARA, 2010) apresentado na Figura 2. Tal jogo interativo embora não apresente docu-mentação completa da engine apresenta em algumas demonstrações recursos interessantes até então trabalhados sobre

Figura 2: Interface do jogo Leave Me Alone FONTE: Akihabara (2010)

(4)

browsers com a utilização de tecnologias de suporte a nova versão HTML. Isso abre caminho para que se vislumbre diversas possibilidades, dentro de um mercado bi-lionário que representa e têm despertado o interesse de um número cada vez maior de pessoas (FERNANDES, 2009).

Segundo Novak (2010) os jogos eletrô-nicos, em sua essência, são considerados uma das formas e práticas mais expres-sivas de entretenimento do século 21, no qual a paixão, em sua maioria das vezes movida pela criatividade e diversão, torna os jogos elementos diferenciados. Considerando todas as possibilidades tecnológicas que podem ser exploradas pela utilização do novo padrão, a criação de jogos interativos está dentre as mais cobiçadas atualmente, tendo como elemento central os benefícios que a internet e a web podem fornecer.

A utilização de elementos que colaboram para a criação de explicações e práticas que ajudam a desvendar a arte do apren-dizado e compreensão são ele-mentos considerados por diversos pesquisadores que tentam a todo instante buscar novos conceitos que norteiem tais processos. Dentre as diversas possi-bilidades existentes e comprovadas para a fixação de conteúdo, em seus diversos aspectos, a criação dos jogos eletrônicos está entre as mais atrativas (PERUCIA, 2007).

Os jogos têm conquistado público de todos os gêneros e idades, criando novos desafios para os profissionais da área, dentre eles a criação de jogos que con-tribuam para o cres-cimento sócio inte-lectual, fazendo com que tal ferramenta contribua de maneira significativa para processos como de ensino e aprendizado. Esses de-safios podem ser vistos a todo o momento e estão sempre presentes quando se busca a criação de uma expe-riência interativa que proporcione um alto grau de diversão e aprendizado para seus usuários.

Assim, considerando todas as pos-sibilidades tecnológicas que podem ser exploradas pela utilização do novo padrão HTML 5, a criação de jogos inte-rativos está dentre as mais cobiçadas atualmente, tendo como elemento central

os bene-fícios que a internet e a web podem trazer ao processo entretenimento e educação, como por exemplo.

3.Estudo de caso

O trabalho em seu eixo principal consiste na criação de procedimentos para um jogo interativo, tomando por base o desenvolvimento de um jogo de memória com cartas. Foram utilizadas técnicas re-conhecidas aceitas para a criação de jogos como Sprites e Tiles, associados ao processo de criação da arte, bem como a gerência e criação dos procedimentos de controle interativo que foram produzidos utilizando Javascript. Os procedimentos e páginas foram desenvolvidos utilizando a IDE (Interface Development Enviroment) Netbeans e os testes realizados utilizando navegadores que já possibilitam o manu-seio da tecnologia HTML 5, como o Safari, disponibilizado pela Apple.

O principal fator a ser levantado para fazer uso da tecnologia, consistiu no suporte que deve ser oferecido a nova versão do HTML. Considerando que o H-TML 5 fornece novos componentes para a criação de elementos apresentáveis em navegadores, sua transformação é total-mente dependente de tecnologias como Javascript, sendo responsável por toda a criação e manipulação dos elementos gráficos em tempo de execução, bem co-mo eventos e animações, além de tratar a interação entre o usuário e os compo-nentes do jogo.

Para a criação gráfica dos ele-mentos foi utilizada uma das novas tags ou componente fornecidos pela HTML 5, o Canvas, que define o local da página para criar todo e qualquer tipo de “desenho” a ser implementado. Tal procedimento pode ser visualizado no trecho de código apre-sentado na Figura 2.

Figura 2: Tag de criação do objeto Canvas. <center> <canvas id=”rostoreto” width=”150” height=”150”> </canvas> </center>

19

web é desenvolvida e utilizada (TA-BLELESS, 2010).

Diante das mudanças ofertadas por este novo padrão de desenvolvimento web, uma infinidade de aplicações das mais diversas categorias já vem sendo criadas por desenvolvedores de todo o mundo. Desde simples remodelagens de paginas construídas com o antigo HTML4, até aplicações robustas, tido como um novo conceito de aplicações denominadas Web App, como por exem-plo, o “Muro” (MACMAGAZINE, 2010). Desenvolvida pela DeviantArt a aplicação é um editor gráfico que demonstra o poder do HTML5, podendo ser utilizado até em iPad's, como ilustra a Figura 1.

O HTML (Hyper Text Markup Language) que inicialmente foi definido como sendo a linguagem de marcação base da web, foi concebido para ser uma linguagem para descrever seman-ticamente documentos científicos embora sua finalidade e concepção foi adequada aos longos dos anos. Em sua quinta versão o HTML está passando por uma revisão importante, uma nova tecnologia para criação e desen-volvimento de paginas esta sendo criada pela W3C (World Wide Web Consortium) buscando se adequar aos novos padrões da web que se m o d i f i c a r a m d e s d e s u a u l t i m a atualização, feita em 1999 (W3C, 2010).

O funcionamento do HTML5 está em fase experimental e diversas empresas aderiram a essa tecnologia. Para tanto, já estão sendo utilizadas novas tecnologias propostas pela nova HTML em diversos serviços, principalmente no que tange a apresentação de conteúdo e criação de jogos interativos na web (SLIDESHARE, 2010).

Diante disso, é importante ana-lisar a influência do tema, suas possi-bilidades e recursos visuais e sonoros para a criação de um jogo. Dentre estes recursos o HTML 5 oferece novas possibilidades para o desenvolvimento web, o que torna possível o desen-volvi-mento de jogos, sem a necessidade de plataformas auxiliares ou mesmo codecs especiais (SLIDESHARE, 2010). O HTML 5 promete ser uma revolução na Web devido a sua função mais polemica:

não precisar de ferramentas externas para acesso a vídeos, jogos, imagens, áudios ou qualquer outro recurso disponibilizado, assim, reduzindo ou até mesmo extinguindo a necessidade da utilização do aplicativo Flash Player da Adobe, bem como semelhantes. O HTML 5 favorece a criação de aplicações mais elaboradas, c o m m a i s e m e l h o r e s r e c u r s o s , enriquecendo ainda mais a atual web.

Tomando o exemplo apresentado na Figura 1, aliado ao enorme avanço das tecnologias que são empregadas a web atual, surgem também uma gama de procedimentos reutilizáveis para jogos online. Isso culmina com a possibilidade de tais procedimentos virem a se tornar um engine, no caso um motor para jogos online web. Um engine, também denominada game engine, é definido como um software ou conjunto de biblio-tecas utilizadas para facilitar o desen-volvimento de jogos ou qualquer outra aplicação que utilize gráficos em tempo real (3DENGINES, 2010).

Em sua maioria tais proce-dimentos são distribuídos como API's ou em conjunto com ferramentas que auxiliam no desenvolvimento, por meio de scripts reutilizáveis preconcebidos, que são adaptados as necessidades apre-sentadas, conhecidos como middleware's. Um exemplo de jogo que utiliza recursos do HTML 5 e Javascript estilo 8-bits é o Leave Me Alone (AKIHABARA, 2010) apresentado na Figura 2. Tal jogo interativo embora não apresente docu-mentação completa da engine apresenta em algumas demonstrações recursos interessantes até então trabalhados sobre

Figura 2: Interface do jogo Leave Me Alone FONTE: Akihabara (2010)

(5)

ainda estar em fase de desenvolvimento, que devido a isto está em constantes mudanças até chegar a sua versão final, sendo que os desenvolvedores terão que permanecer atentos a novas mudanças para atualizar suas aplicações. A in-compatibilidade dos browsers também ainda é um desafio, pois não adianta desenvolver recursos e não utilizá-los. Lembrando que pela falta de um padrão definido, os browsers estão trabalhando de maneiras distintas, no qual alguns já detêm de melhores desempenhos em algumas funcionalidades que outros, po-rem, ainda não disponibilizam recursos suficientes para utilização de alguns tipos de stream de vídeo, por exemplo, aos quais necessitam de codecs especificos que garantam alta qualidade de video.

Concluindo, foram consideradas novas ideias e discussões na nova versão da HTML, que ainda está em fase criação e busca por padrões, que serão futu-ramente definidos pela W3C. Isso leva a uma grande disputa por território comer-cial entre as empresas do ramo como já pode ser percebido na web.

5. Referências

W3C, World Wide Web. HTML5 differences f r o m H T M L 4 . D i s p o n í v e l e m : http://www.w3.org/TR/html5-diff/. Acesso em: 22 abr. 2010.

SLIDESHARE, Campus Party. O HTML 5 e o f u t u r o d a w e b . D i s p o n í v e l e m : http://www.slideshare.net/campus-partybrasil/o-html-5-e-o-futuro-da-web . Acesso em: 30 abr. 2010.

MACMAGAZINE, DeviantART lança Muro, um web app de desenho em HTML5 que funciona t a m b é m e m i P a d s . D i s p o n í v e l e m : http://macmagazine.com.br/2010/08/11/deviantar t-lanca-muro-um-web-app-de-desenho-em-html5-que-funciona-tambem-em-ipads/. Acesso em: 14 set. 2010.

LEMAY, Laura. Aprenda em 1 Semana: HTML

4. 3ª Tiragem. Rio de Janeiro: Campus, 1998.

WHATWG, Apple Computer, Inc.; Mozilla Foundation e Opera Software ASA. HTML5 (including next generation additions still in d e v e l o p m e n t ) . D i s p o n í v e l e m : <

http://www.whatwg.org/specs/web-apps/current-work/html5-letter.pdf >. Acesso em: 30 abr. 2010.

SLIDESHARE, Campus Party. O HTML 5 e o f u t u r o d a w e b . D i s p o n í v e l e m : http://www.slideshare.net/campuspartybrasil/o-html-5-e-o-futuro-da-web. Acesso em: 30 abr. 2010.

INFO ONLINE, Jobs diz que Flash é D e s n e c e s s á r i o . D i s p o n í v e l e m : http://info.abril.com.br/noticias/tecnologia- pessoal/jobs-diz-que-flash-e-desnecessario-29042010-13.shl . Acesso em: 30 abr. 2010.

PERUCIA, A. et al. Desenvolvimento de Jogos Eletrônicos: Teoria e Prática. 2ª. Edição. Novatec Editora: São Paulo, 2007.

NOVAK, J. Desenvolvimento de Games: Tradução da 2º Edição Norte-Americana. Cengage Learning: Nova York, 2010.

FERNANDES, A. et al. Jogos Eletrônicos - Mapeando Novas Perspectivas. Visual Books: São Paulo, 2009.

D E V I A N TA RT, D e v i a n t A RT M u r o . Disponível em: http://muro.deviant-art.com/. Acesso em: 14 set. 2010.

TABLELESS, HTML 5. Um guia de referência para os desenvolvedores web. Disponível em: http://tableless.com.br/html5/. Acesso em: 14 de set. 2010.

3DENGINES, Data Base. DevMaster - your source for game development. Disponível em: http://www.devmaster.net/engi-nes/. Acesso em: 14 de set. 2010.

AKIHABARA, Engine Akihabara. Engine Akihabara, que utiliza alguns recursos do HTML 5. Disponível em: http://www.kesiev.c-om/akihabara/. Acesso em: 15 de set. 2010.

Engine Akihabara. Engine Akihabara, que utiliza alguns recursos do HTML 5. Disponível em: < http://www.kesiev.com/akihabara/ >. Acesso em: 15 de set. 2010.

21

No que consiste a parte de ani-mações e eventos para interação com o usuário, como supracitado, foi utilizada a linguagem Javascript. Logo, foram contemplados aspectos para transfor-mações dos objetos HTML 5 em tempo real, prezando pela reutilização e controle de todos os elementos do jogo por meio de funções, sendo um arcabouço para a criação de um futuro motor para jogos mais complexos que venham a ser produ-zidos. A Figura 3 apresenta trecho do có-digo elaborado para a transformação dos desenhos apresentados no jogo.

Para o gerenciamento dos even-tos de seleção das cartas foram desenvolvidas funções que determinam as devidas operações com o método “add-EventListener” da marcação Canvas, definindo eventos como o “mousedown” e “mouseup”. Além disso, foi necessário que outros procedimentos importantes fossem criados, como sequências de veri-ficações e procedimentos para se saber se o usuário escolheu cartas iguais e se o jogo chegou ao seu término.

Como já dito em alguns trechos deste trabalho, o HTML 5 promete ser uma revolução na web devido a sua função mais polêmica: não precisar de ferramentas externas para o acesso a ví-deos, imagens, áudios ou qualquer outro recurso disponibilizado como obtido no jogo proposto no trabalho, sendo que o resultado dos procedimentos apresenta-dos podem ser visualizaapresenta-dos na Figura 4.

Por ser um jogo muito simples, a ideia principal consistia na criação de estruturas utilizando o padrão HTML 5 sendo um arcabouço para a padronização

de implementações futuras, considerando aspectos simples como a interatividade, bem como registro de ações com o auxílio da linguagem Javascript para propor-cionar reutilização de código e proce-dimentos de desenvolvimento.

4. Conclusões

Diante das perspectivas para o HTML 5, pode ser traçado um paralelo entre as vantagens e desvantagens do padrão. Com uma fácil implementação, o padrão favorece a criação de aplicações mais elaboradas, com mais e melhores recursos, enriquecendo ainda mais a atual web. Futuramente, após sua consolidação, tais perspectivas podem comutar em uma navegação mais rápida, pois com a modernização de suas tags (marcações), não serão necessárias muitas linhas de código para designar uma funcionalidade e, portanto, facilitará o trafego dos códigos pela rede. Considerando tais perspectivas, o padrão HTML 5 traz bene-fícios como uma melhor organização do código e facilidade na declaração de diversos objetos por parte do desen-volvedor. Outra vantagem a ser consi-derada está no fato de facilitar a vida do usuário desta nova tecnologia, sendo que este não necessitará mais da instalação de plug-ins ou qualquer software parecido para a utilização dos mais diversos recur-sos que a web apresenta com cons-tantes mudanças e inovações.

Tais transformações conside-rando as ferramentas e possibilidades supracitadas sobre a modernização da web também traz desvantagens. Atualmente, a maior desvantagem consiste no fato de

Figura 3: Trecho JavaScript para criação e transformação de objetos HTML5.

Figura 4. Jogo de memória produzido com HTML 5 e procedimentos em Javascript.

(6)

ainda estar em fase de desenvolvimento, que devido a isto está em constantes mudanças até chegar a sua versão final, sendo que os desenvolvedores terão que permanecer atentos a novas mudanças para atualizar suas aplicações. A in-compatibilidade dos browsers também ainda é um desafio, pois não adianta desenvolver recursos e não utilizá-los. Lembrando que pela falta de um padrão definido, os browsers estão trabalhando de maneiras distintas, no qual alguns já detêm de melhores desempenhos em algumas funcionalidades que outros, po-rem, ainda não disponibilizam recursos suficientes para utilização de alguns tipos de stream de vídeo, por exemplo, aos quais necessitam de codecs especificos que garantam alta qualidade de video.

Concluindo, foram consideradas novas ideias e discussões na nova versão da HTML, que ainda está em fase criação e busca por padrões, que serão futu-ramente definidos pela W3C. Isso leva a uma grande disputa por território comer-cial entre as empresas do ramo como já pode ser percebido na web.

5. Referências

W3C, World Wide Web. HTML5 differences f r o m H T M L 4 . D i s p o n í v e l e m : http://www.w3.org/TR/html5-diff/. Acesso em: 22 abr. 2010.

SLIDESHARE, Campus Party. O HTML 5 e o f u t u r o d a w e b . D i s p o n í v e l e m : http://www.slideshare.net/campus-partybrasil/o-html-5-e-o-futuro-da-web . Acesso em: 30 abr. 2010.

MACMAGAZINE, DeviantART lança Muro, um web app de desenho em HTML5 que funciona t a m b é m e m i P a d s . D i s p o n í v e l e m : http://macmagazine.com.br/2010/08/11/deviantar t-lanca-muro-um-web-app-de-desenho-em-html5-que-funciona-tambem-em-ipads/. Acesso em: 14 set. 2010.

LEMAY, Laura. Aprenda em 1 Semana: HTML

4. 3ª Tiragem. Rio de Janeiro: Campus, 1998.

WHATWG, Apple Computer, Inc.; Mozilla Foundation e Opera Software ASA. HTML5 (including next generation additions still in d e v e l o p m e n t ) . D i s p o n í v e l e m : <

http://www.whatwg.org/specs/web-apps/current-work/html5-letter.pdf >. Acesso em: 30 abr. 2010.

SLIDESHARE, Campus Party. O HTML 5 e o f u t u r o d a w e b . D i s p o n í v e l e m : http://www.slideshare.net/campuspartybrasil/o-html-5-e-o-futuro-da-web. Acesso em: 30 abr. 2010.

INFO ONLINE, Jobs diz que Flash é D e s n e c e s s á r i o . D i s p o n í v e l e m : http://info.abril.com.br/noticias/tecnologia- pessoal/jobs-diz-que-flash-e-desnecessario-29042010-13.shl . Acesso em: 30 abr. 2010.

PERUCIA, A. et al. Desenvolvimento de Jogos Eletrônicos: Teoria e Prática. 2ª. Edição. Novatec Editora: São Paulo, 2007.

NOVAK, J. Desenvolvimento de Games: Tradução da 2º Edição Norte-Americana. Cengage Learning: Nova York, 2010.

FERNANDES, A. et al. Jogos Eletrônicos - Mapeando Novas Perspectivas. Visual Books: São Paulo, 2009.

D E V I A N TA RT, D e v i a n t A RT M u r o . Disponível em: http://muro.deviant-art.com/. Acesso em: 14 set. 2010.

TABLELESS, HTML 5. Um guia de referência para os desenvolvedores web. Disponível em: http://tableless.com.br/html5/. Acesso em: 14 de set. 2010.

3DENGINES, Data Base. DevMaster - your source for game development. Disponível em: http://www.devmaster.net/engi-nes/. Acesso em: 14 de set. 2010.

AKIHABARA, Engine Akihabara. Engine Akihabara, que utiliza alguns recursos do HTML 5. Disponível em: http://www.kesiev.c-om/akihabara/. Acesso em: 15 de set. 2010.

Engine Akihabara. Engine Akihabara, que utiliza alguns recursos do HTML 5. Disponível em: < http://www.kesiev.com/akihabara/ >. Acesso em: 15 de set. 2010.

21

No que consiste a parte de ani-mações e eventos para interação com o usuário, como supracitado, foi utilizada a linguagem Javascript. Logo, foram contemplados aspectos para transfor-mações dos objetos HTML 5 em tempo real, prezando pela reutilização e controle de todos os elementos do jogo por meio de funções, sendo um arcabouço para a criação de um futuro motor para jogos mais complexos que venham a ser produ-zidos. A Figura 3 apresenta trecho do có-digo elaborado para a transformação dos desenhos apresentados no jogo.

Para o gerenciamento dos even-tos de seleção das cartas foram desenvolvidas funções que determinam as devidas operações com o método “add-EventListener” da marcação Canvas, definindo eventos como o “mousedown” e “mouseup”. Além disso, foi necessário que outros procedimentos importantes fossem criados, como sequências de veri-ficações e procedimentos para se saber se o usuário escolheu cartas iguais e se o jogo chegou ao seu término.

Como já dito em alguns trechos deste trabalho, o HTML 5 promete ser uma revolução na web devido a sua função mais polêmica: não precisar de ferramentas externas para o acesso a ví-deos, imagens, áudios ou qualquer outro recurso disponibilizado como obtido no jogo proposto no trabalho, sendo que o resultado dos procedimentos apresenta-dos podem ser visualizaapresenta-dos na Figura 4.

Por ser um jogo muito simples, a ideia principal consistia na criação de estruturas utilizando o padrão HTML 5 sendo um arcabouço para a padronização

de implementações futuras, considerando aspectos simples como a interatividade, bem como registro de ações com o auxílio da linguagem Javascript para propor-cionar reutilização de código e proce-dimentos de desenvolvimento.

4. Conclusões

Diante das perspectivas para o HTML 5, pode ser traçado um paralelo entre as vantagens e desvantagens do padrão. Com uma fácil implementação, o padrão favorece a criação de aplicações mais elaboradas, com mais e melhores recursos, enriquecendo ainda mais a atual web. Futuramente, após sua consolidação, tais perspectivas podem comutar em uma navegação mais rápida, pois com a modernização de suas tags (marcações), não serão necessárias muitas linhas de código para designar uma funcionalidade e, portanto, facilitará o trafego dos códigos pela rede. Considerando tais perspectivas, o padrão HTML 5 traz bene-fícios como uma melhor organização do código e facilidade na declaração de diversos objetos por parte do desen-volvedor. Outra vantagem a ser consi-derada está no fato de facilitar a vida do usuário desta nova tecnologia, sendo que este não necessitará mais da instalação de plug-ins ou qualquer software parecido para a utilização dos mais diversos recur-sos que a web apresenta com cons-tantes mudanças e inovações.

Tais transformações conside-rando as ferramentas e possibilidades supracitadas sobre a modernização da web também traz desvantagens. Atualmente, a maior desvantagem consiste no fato de

Figura 3: Trecho JavaScript para criação e transformação de objetos HTML5.

Figura 4. Jogo de memória produzido com HTML 5 e procedimentos em Javascript.

Imagem

Referências

temas relacionados :