HTML5: Algumas de suas Novidades

Introdução

HTML5 é considerada a próxima geração do HTML e suas funcionalidades inovadoras o tornam uma alternativa à tecnologias proprietárias como Adobe Flash. HTML5 é um padrão aberto e já é suportado pela maioria dos novos navegadores. Além das novas tags adicionadas ao HTML5 ainda tem-se a possibilidade de melhor estruturar um site, permitindo que um motor de busca logo identifique cada área da página a partir de suas tags específicas. Nota-se aqui a ideia de Web Semântica que é um conceito muito difundido e com o intuito de tornar a informação bem definida e identificada por padrões que possibilitarão aos motores de busca entenderem o sentido em que cada informação foi descrita. Assim, ao invés de termos resultados sem sentido teremos um retorno melhor e mais bem definido daquilo que realmente estávamos procurando.

Além disso, o HTML5 propicia ao desenvolvedor Web o poder de criar jogos que variam em complexidade, alguns chegando a ser comparados a jogos desenvolvidos em plataformas complexas.

HTML5 e a Web Semântica

Cada vez mais informações são criadas na Web, principalmente com o advento da Web 2.0 em que o usuário pode criar o seu próprio conteúdo por meio das redes sociais ou Web Sites pessoais. Tornou-se cada vez mais necessário o desenvolvimento de ferramentas que retornem resultados mais precisos diante de tantas informações irrelevantes que temos na Web.

Conforme Alvarenga diz os motores de busca como Google e Yahoo apresentam muitas limitações quanto à eficiência e eficácia ao recuperar informações, pois até então a busca é baseada em palavras-chave contidas nos textos.

Além disso, outro problema reside nos próprios detentores do conteúdo, que são os sites, em que se prioriza muitos mais a exibição e formatação do conteúdo, sendo assim o conteúdo pobremente descrito e impossibilitando que as máquina conheçam o contexto e o sentido em que a informação foi descrita.

Quando fazemos uma busca pode-se verificar a quantidade de informação que nos é apresentada. Após os inúmeros resultado cabe ao usuário avaliar essa grande quantidade de informação e selecionar o que lhe é interessante.

No entanto, com o advento do HTML5 tem-se um novo cenário em que agora novos elementos para estruturar as informações com foco na Web Semântica foram criadas. Com isso os motores de busca também poderão se beneficiar dessas novas características que as página da web trarão consigo.

Todos esses benefícios serão possíveis porque agora os motores de busca conhecerão cada parte do site e com isso poderão fazer inferências sob as informações de acordo com o sentido e o contexto podendo oferecer aos usuários resultados mais relevantes.

Algumas das novas tags incorporadas ao HTML5

Tag article: Define um artigo. Um artigo deve ser algo independente como, por exemplo, uma postagem em um blog ou em um fórum ou até mesmo um comentário.
Tag aside: Define um conteúdo secundário de uma página, por exemplo, um menu secundário ou um banner de anunciantes.
Tag audio: Define um conteúdo de áudio. Usando src = ”nome_arquivo” pode ser definido a fonte do áudio.
Tag footer: Define um rodapé de uma página.
Tag header: Define um cabeçalho de uma página.
Tag nav: Define links de navegação como por exemplo um simples menu.
Tag section: Define uma seção do conteúdo na qual é utilizado para organizar capítulos, cabeçalhos, rodapé, entre outros.
Tag video: Define um conteúdo de vídeo.

Nota-se que com essas novas tags tem-se uma possibilidade agora de estruturar melhor o site e saber o que representa cada parte do web site.

Jogos em HTML5

Uma das características que o HTML5 nos permite e que está chamando a atenção de todos é a possibilidade de criar jogos, animações, banners, tocar vídeo e diversas outras aplicações. Todas essas características eram possíveis de serem realizadas usando Adobe Flash, porém com as últimas descobertas de erros, problemas de segurança e lentidão nos dispositivos móveis o Adobe Flash foi primeiramente deixado de ser incorporado nos produtos da Apple. A Apple anunciou tempos depois das descobertas dos problemas do Adobe Flash que o grande futuro seria utilizar o HTML5 ao invés do Adobe Flash, com isso outras empresas também acabaram aceitando a idéia como Microsoft, Google, Opera e diversas outras empresas.

O HTML 5 facilita e melhora a apresentação e estrutura do conteúdo da Web através de novas tags para a utilização de canvas, tocar vídeos, drag-and-drop, etc. Todos esses recursos eram possíveis apenas com Flash.

Para o desenvolvimento de jogos em HTML 5 tem-se a incorporação de uma nova tag que é a canvas. Sua tag é <canvas></canvas> e possui dois atributos que são width e height que são responsáveis por definir as dimensões do canvas. Um exemplo de utilização de canvas é mostrado abaixo:

Listagem 1: Exemplo de utilização de Canvas

<canvas width="320" height="240" id="canvas" >
<p>Teste de utilização de canvas</p>
</canvas>

O canvas possui como forma primitiva apenas o retângulo. Para produzir formas complexas é preciso desenhar o path, um caminho que será traçado dentro do canvas. Para isso existe uma Application Programming Interface (API) específica. A partir de funções simples se desenham formas complexas. Para isso utiliza-se um ponteiro que cada vez que é movido, vai “riscando” por onde passa. Além disso, o canvas possui também a possibilidade de se usar imagens e aplicá-las diretamente, entre os formatos suportados estão o .gif, .jpg e .png. Canvas também possui uma API para a aplicação de texto.

Abaixo segue um exemplo do que é possível desenhar no browser utilizando canvas:

Figura 1. Um exemplo de uma imagem feito utilizando canvas.

Dois tipos de jogos já desenvolvidos utilizando HTML5 é o jogo da velha e o jogo Sukuri que pode ser conferido nas referências.

HTML5 já tem diversos games inteiramente escritos com as novas funcionalidades disponibilizadas aos desenvolvedores não se limitando apenas a jogos simples. Alguns desses jogos podem ser vistos abaixo como o The Convergence, Runfield e o clássico Angry Birds.

Figura 2. O jogo The Convergence foi totalmente feito em HTML5.

Figura 3. Mais um jogo feito em HTML é o Runfield.

Figura 4. O popular Angry Birds também foi feito utilizando-se HTML5.

Se você realmente estiver interessado em criar games para o HTML5 saiba que já existem diversas APIs para isso sendo desenvolvidas e chegando ao nosso mercado todos os dias. Em breve estudaremos uma dessas APIs para criar um jogo completo utilizando HTML5. Como sugestão o leitor pode escolher algumas APIs e estudar como elas funcionam, essa é uma excelente prática para criar seus próprios jogos utilizando HTML5.

Conclusões

Neste artigo abordou-se algumas das novas características do HTML5 como a Web Semântica e o desenvolvimento de jogos. Tanto a Web Semântica quanto o desenvolvimento de jogos são duas áreas extremamente importantes que há muito tempo são motivos de estudos para Web. Hoje com HTML5 tem-se a possibilidade de criar games incríveis utilizando essa tecnologia que trouxe excelentes recursos aos desenvolvedores. Também tem-se o advento da Web Semântica no HTML 5 em que os motores de busca finalmente farão um trabalho muito melhor para nós seres humanos que até então fazíamos o trabalho “sujo” de avaliação e seleção.

Aguarde que mais artigos sobre essas duas importantes características que foram adicionadas ao HTML5 serão tratadas e abordadas em profundidade.

Bibliografia

Desenvolvimento de Jogos em HTML 5. Disponível em http://www.sbgames.org/papers/sbgames10/computing/short/Computing_short13.pdf.

W3C,2010, HTML5 CANVAS TAG, Disponível em: http://www.w3schools.com/html5/tag_canvas.asp.

SOUZA, Renato Rocha; ALVARENGA, Lídia. A Web Semântica e suas contribuições para a ciência da informação. Ciência da Informação, Brasília, p.132-141, 03 jan. 2004.

Desenvolvimento - HTML