Canvas HTML 5

1 INTRODUÇÃO

Conforme o W3C ou World Web Consortium, o HTML que é uma linguagem de marcação para estilizar as páginas da internet, foi desenvolvido para romper barreiras, fazendo com que a informação publicada possa ser acessada por meio de dispositivos diferentes em diversos lugares. Desde 1993 foram desenvolvidas várias versões evoluindo até os dias atuais à versão HTML5, que foi idealizada por desenvolvedores de empresas como Mozilla, Apple e Opera em 2004. Não contentes com o caminho que a web tomava, visaram uma versão que proporcionasse mais flexibilidade para a criação de sites e sistemas na web. Vieram com a nova versão elementos e atributos para proporcionar esta flexibilidade.

Conforme Sarti (2009) o HTML5 tem a finalidade de facilitar a compreensão e manutenção de código e padronizar a maneira de publicar conteúdo.

Com o desenvolvimento do HTML5, o que irá melhorar com relação a animações na web? Alguns dos novos recursos proporcionam mais poder ao HTML5, assim como o elemento canvas que possui recursos para manipulação de animações, gráficos e fotos. Conforme Moreira (2010) canvas é um novo e poderoso elemento entre as inúmeras e novas funcionalidades do HTML5. Com o canvas consegue-se de maneira fácil criar gráficos, composições de fotos e animações usando JavaScript.

De maneira simples e rápida, pretende-se demonstrar a praticidade de utilização do elemento “<canvas>” no HTML5 e como isto facilita o desenvolvimento de aplicações web com gráficos, fotos e animações.

2 VERSÕES DO HTML

Conforme Weiman (2001), HTML ou HyperText Markup Language, é uma linguagem de marcação com a função de estilizar as páginas da internet, ou seja, o HTML é responsável pela maneira como imagens, links, banners, textos serão apresentados ao usuário e como será a estilização de cada um deles.

De acordo com Carvalho (2004), HTML não é uma linguagem de programação, mas somente uma linguagem de marcação onde toda a formatação é utilizado para definir como o conteúdo aparecerá na tela do computador.

Segundo Aurelio (2006) o HTML nasceu em 1991 no CERN (European Council for nuclear Research), na Suíça por Tim Berners Lee, 44 anos. Inicialmente a linguagem serviria para interligar computadores do laboratório e outras instituições de pesquisa e exibir documentos científicos de forma simples e fácil de acessar.

Um desenvolvimento fundamental para a evolução não só do HTML, mas de toda internet foi a liberação da biblioteca WWW (World Wide Web) em julho de 1992 dando origem à construção de vários browsers e servidores que tornaram a WEB viável. Acompanharemos abaixo a evolução do HTML:

• 1992 - Primeira aparição do HTML;

• 1997 - HTML 4.0: Com o lançamento dos browsers Netscape versão 4.0 em agosto de 1997 e do Internet Explorer versão 4.0 em outubro do mesmo ano, que apresentaram as tecnologias CSS, JavaScript/VBScript e DOM que juntas tornaram o HTML dinâmico. Surgindo assim o DHTML;

• 1999 - HTML 4.01: Alguma modificações da versão anterior;

• 2000 - XHTML 1.0: É criado e consiste de uma versão XML do HTML versão 4.01.

Atualmente está em fase de desenvolvimento a versão 5 do HTML, essa versão traz novos recursos e elementos colocando em risco a vida útil de vários plug-ins. Um dos novos elementos é o canvas que através de uma API gráfica, irá renderizar imagens 2D dinâmicas que poderão ser usadas em jogos, gráficos, etc;

3. ADOBE FLASH

Conforme English (2006) o Flash é uma ferramenta de design e desenvolvimento utilizada para criar animações, aplicativos, ambientes interativos, jogos e até mesmo todo o conteúdo de um site. O arquivo de extensão SWF é o arquivo de publicação das aplicações desenvolvidas na tecnologia Flash para a internet. Para que possa ser exibido, é necessário que o navegador possua a tecnologia Flash Player instalada.

Para desenvolver uma animação utilizando o flash é necessário a utilização de um programa de desenvolvimento, o adobe flash, um navegador e o flash player instalado. Para fazer as analises foi utilizado a nova versão da ferramenta adobe Flash CS5.

A ultima versão do adobe flash player é a 10.1.102.64, com este plug-in instalado qualquer navegador poderá executar as animações feitas em flash.

3.1 Porque citar o Adobe Flash?

Bla bla bla...

4. ELEMENTO <CANVAS>

Para desenvolver uma animação utilizando o elemento <canvas> é necessário a utilização de um programa de desenvolvimento, como o simples bloco de notas, um navegador com o JavaScript habilitado ou suporte a linguagens script como o PHP e que tenha suporte à HTML 5.

As seguintes ferramentas podem ser utilizadas para desenvolvimento:

• Bloco de notas;

• Dreamweaver CS5;

• NetBeans IDE 6.9;

• Qualquer outro editor de script

Os testes foram efetuados nos seguintes navegadores:

• Mozilla Firefox 3.6;

• Opera;

• Google Chrome.

O Internet Explorer ainda não possui suporte para executar animações desenvolvidas utilizando o HTML 5, fazendo com que as animações não executem, travando constantemente.

O desenvolvedor deverá ter conhecimento em HTML 5 e linguagens script como o JavaScript ou PHP.

4.1 Como usar o Canvas

De acordo com o tableless.com.br o uso do elemento canvas baseia-se na declaração do elemento em seu código HTML exibindo um retângulo vazio que possibilita desenhar nele. Para desenhar é necessário obter o contexto do elemento via linguagem script, é recomendado usar o JavaScript, linguagem na qual foi usada para visualização dos testes deste artigo. No código do JavaScript um objeto irá representar o contexto do elemento canvas, permitindo a manipulação de cada pixel do espaço dimensionado em seu código HTML.

Exemplificando

...