UMA REFLEXÃO SOBRE O HTML5: COMO ESSA TECNOLOGIA TEM POSSIBILITADO A CRIAÇÃO DE PÁGINAS WEB MAIS INTERATIVAS
Hanna França Menezes1
RESUMO: Discutir sobre as possibilidades de construção de conteúdo interativo na web motiva este estudo. O artigo aborda os principais conceitos e características da Tecnologia HTML5.
Palavras–chave: HTML5, TIC, Web.
INTRODUÇÃO
Pensar o uso da tecnologia digital na construção de produtos da nova mídia requer que angulemos nosso olhar para um objeto híbrido e multidisciplinar. Hibridização notável, resultante de características que lhe são próprias ao objeto, como a multimidialidade, a hipertextualidade e a interatividade.
Tendo em vista a evolução das Tecnologias da Informação e Comunicação (TICs) – nas linguagens de programação, no crescimento de largura de banda, nas bases de dados, na disseminação do acesso à web via redes wireless, 3G e 4G, no design de interfaces digitais, no uso efetivo de características e potencialidades da web – é crescente o número de páginas web voltadas para a experimentação de novas mídias digitais.
No caso em estudo, lançou-se mão da tecnologia HTML5, que vem se destacando no mercado por ser uma tecnologia não proprietária, que introduz várias funcionalidades às especificações do HTML, CSS e Javascript (ABREU, 2012).
Sendo assim, o estudo objetivou realizar uma pesquisa bibliográfica acerca da tecnologia HTML5, refletindo sobre o desenvolvimento de páginas web mais dinâmicas e interativas. Como objetivos específicos se têm: entender um pouco sobre as novas especificações para o HTML, CSS e Javascript; e caracterizar o conceito aplicado a tecnologia THML5.
MATERIAIS E MÉTODOS
Para o desenvolvimento deste trabalho, buscou-se fazer um levantamento bibliográfico de trabalhos mais recentes para embasar o estudo. Utilizando-se como base de dados o SCIELO e livros. Para proceder à busca no Scielo utilizaram-se as palavras-chave: HTML5, TIC, Web. Foram encontrados 18 trabalhos sobre o tema, sendo apenas três selecionados para este estudo por terem sido desenvolvidos no âmbito nacional e publicados em periódicos científicos da administração, automação e área afins, e por abordarem aspectos relevantes que merecem consideração. Além dessas referências, utilizaram-se livros e sites eletrônicos.
UM PANORAMA DA TECNOLOGIA HTML5
Desde o início, o HTML5 teve sua proposta moldada na interoperabilidade, ou seja, uma linguagem independente de plataformas, navegadores e outros meios de acesso, pois isso significa menos custo, tornando possível criar apenas um código HTML, o qual pode ser lido por diversos meios, em vez de versões diferentes para dispositivos diversos. Assim, evitou-se que a web fosse desenvolvida em uma base proprietária – com formatos incompatíveis – e limitada (FERREIRA; EIS, 2010).
Nas versões anteriores do HTML, até que algum novo recurso fosse disponibilizado (seja HTML ou CSS) era preciso que toda a especificação da versão tivesse sido concluída e testada, e somente depois era utilizada pelos navegadores e desenvolvedores. Isso implicava em uma grande perda de tempo até que as novas funcionalidades chegassem ao usuário, e, muitas vezes, quando a mesma era lançada já estava desatualizada. Para esta nova versão, a metodologia usada foi diferente, passando a ser modular, tanto o HMTL quanto o CSS agora são divididos em módulos, o que significa dizer que os navegadores não precisam esperar que todo o padrão seja desenvolvido e testado para começar a implementar alguma funcionalidade (SCHROEDER; BASTOS, 2012).
Olhando para o mercado atual e futuro, o HTML5 vem se destacando e sendo apontado como uma nova forma de desenvolvimento de plataformas digitais para a web. Códigos mais limpos, com mais semântica, possibilidade de desenvolver aplicações mais dinâmicas, introdução de animações e multiplicidade de mídias são algumas funcionalidades inovadoras dessa tecnologia.
Sendo assim, um dos principais objetivos do HTML5 é facilitar e melhorar a estrutura e a apresentação de conteúdo na web através de novas tags, incorporando funcionalidades tais como: o uso de canvas, apresentação de vídeo, sistema drag-and-drop2, que antes só eram possíveis através do uso de plugins3 proprietários. Por ser um
padrão aberto, livre do pagamento de royalties e apesar de ser uma tecnologia recente, já é possível construir muitas aplicações para web usando esse padrão, pois navegadores novos (Firefox, Safari, Internet Explorer, Opera, Chrome) já estão usando o novo padrão (SILVA; FIRMINO, 2010).
CANVAS
O HTML5 introduz também o acesso a um novo elemento designado Canvas, que permite a renderização avançada de gráficos numa página HTML, sem que para isso seja necessário à utilização de plugins. Esta especificação define o canvas como um bitmap de modo imediato (immediate mode), que fornece uma superfície dinâmica manipulada via Javascript. Sua tag de marcação é: <canvas></canvas> e possui apenas dois atributos que são width e height, que definem as dimensões do canvas no HTML. Se o navegador não suportar a tag, nada será mostrado, nem mesmo mensagem de erro. É possível então colocar um pequeno texto para passar o feedback:
<canvas width="320" height="240" id="canvas">
2 Termo do inglês que significa arrastar = drag e soltar= drop. Conceito aplicado a ação executada
pelo usuário ao clicar, arrastar e soltar um elemento.
3 Programa instalado no navegador para permitir o uso de recursos que não estão presentes na linguagem HTML, na qual são criadas as páginas.
<p> O seu navegador não suporta o canvas!</p> </canvas>
Caso o navegador possa suportar a tag, esta pode ser manipulada pelo JavaScript (ABREU, 2012).
Segundo Abreu (2012) “o elemento Canvas insere uma área retangular numa página que permite, através de Javascript, desenhar figuras, imagens, gradientes, padrões e texto. Por padrão essa área retangular reservada pelo elemento Canvas apresenta as dimensões de 300x150 píxeis.”
Entretanto, apesar de o Canvas fazer parte do HTML5, seu uso de modo programático é feito através de scripts.
ELEMENTOS DE VÍDEO E ÁUDIO
Além do Canvas o HTML5 trás também outros dois novos elementos (vídeo e áudio), os quais permitem a reprodução de conteúdos multimídia sem que para isso seja necessário o uso de plugins (ABREU, 2012).
De acordo com Shroeder e Bastos (2012, p. 31):
Um dos grandes problemas da web atual é a ausência de reprodução nativa de áudio e vídeo, sendo necessário o uso de plugins, porém esta nova versão traz também tags com o intuito de implementar estas funcionalidades: a tag áudio e a tag vídeo. Com o uso destas tags, podem ser adicionados atributos, tais como: autoplay (execução automática do conteúdo), controls (botões com exibição de controles play, pause, stop, etc), dentre outras opções.
A inserção de elementos de áudio e vídeo é feita da seguinte forma: • Audio: <audio src=teste1.mp3”></audio>
• Vídeo: <video scr=”teste2.mp4”></video>
Porém, Abreu (2012) alerta quanto às limitações, atualmente existentes, no uso desses elementos:
• A especificação não prevê, atualmente, a distribuição de vídeos por streaming; • O carregamento de média está limitado ao mesmo domínio da página que tenta
carregar;
• O vídeo não pode ser carregado em modo full screen (tela cheia) através de scripting.
JAVASCRIPT E CSS3
O HTML5 sozinho não consegue implementar aplicações web, por ser uma linguagem que define conteúdos, necessita do Javascript e do CSS para complementar as aplicações quanto à interação e apresentação, respectivamente (SERRA, 2011).
Tendo em vista a conformidade com os Padrões Web, é importante salientar a necessidade de separar cada uma dessas tecnologias – HTML destina-se a estruturação de páginas web através de marcadores, O CSS está relacionado à apresentação do conteúdo, na criação de estilos para estes marcadores, e o Javascript tem por finalidade fornecer comportamentos adicionando interatividade a uma página web (SILVA, 2012).
Javascript é uma linguagem de programação que fornece meios de adicionar interatividade a uma página web. Ela foi desenvolvida pela Netscape em parceria com a Sun Microsystems e começou a ser implementada em 1996. Diferentemente de muitas linguagens de programação, Javascript foi desenvolvida para ser executada no lado do cliente, isto é, a interpretação e o funcionamento da linguagem dependem de funcionalidades hospedadas no navegador do usuário (SILVA, 2012).
O Javascript é uma linguagem multiplataforma e orientada a objetos. Segundo Serra (2011) “a sua utilização na web é frequentemente efetuada pelo cliente, como por exemplo, na validação de formulários, mas pode ser usada também pelo servidor, para comunicação com a base de dados ou manipulação de arquivos no servidor.”
Dentre as várias funcionalidades do Javascript, pode-se citar a manipulação do conteúdo e apresentação, manipulação do navegador, interação com formulários e com outras linguagens dinâmicas (SILVA, 2012).
O HTML5 permite também a personalização completa do estilo de todos os elementos usados numa página através do CSS (Cacade Styling Sheets – para definição de estilo em documentos de marcação).
Serra (2011) define o CSS como "uma linguagem usada para apresentação e formatação de um documento HTML”. Hoje o CSS está na sua versão 3 pela W3C, algumas das suas novas funcionalidades são:
• Suporte de novos módulos de cor (HSL, CMYK, HSLA, RGBA); • Bordas gradientes;
• Bordas com imagens;
• Caixas com cantos redondos; • Caixas com sombreados;
• Múltiplas colunas de texto sem o uso de tabelas; • Textos com sombreados.
Além destas mudanças, o HTML5 traz também algumas novidades quanto as APIs (Interface de Programação de Aplicações) para manipulação de elementos. As novas opções de CSS são principalmente de novos seletores e propriedades. O Quadro 2 mostra algumas delas (SCHROEDER; BASTOS, 2012).
Propriedade Efeito
Background-size Permite definir tamanho ao plano de fundo.
Border-radius Bordas arredondadas.
Box-shadow Sombras em elementos do tipo “caixa”.
Text-shadow Sombras em texto.
CSS Gradients Gradientes como plano de funcho/bordas. CSS Columns Colunas automaticamente em blocos de texto. CSS Transform Transformações em elementos (rotação,
distorção, escala, etc).
CSS Animations Animações das propriedades
automaticamente. Quadro 2: Principais implementações do CSS.
O HTML5 é uma tecnologia aberta, ou seja, não necessita de softwares para ser implementada, basta somente ter um browser. Junto com as tecnologias CSS e Javascript, o HTML5 é capaz de disponibilizar recursos para a implementação de aplicações mais dinâmicas e com melhor interatividade.
CONCLUSÕES
O HTML5 vem se apresentando como uma nova tecnologia que acrescenta novos padrões para o HTML, CSS e JavaScript, sem romper com as tecnologias existentes, tendo em vista que seu projeto busca obter o máximo de compatibilidade possível com as versões anteriores dos navegadores. Isso tem gerado grandes expectativas em torno do que ele realmente pode oferecer diante do seu atual nível de desenvolvimento.
Mesmo estando em estado de desenvolvimento e ainda longe de ser totalmente implementado, o HTML5 já dispõe de muitas funcionalidades que já podem ser utilizadas em muitos navegadores.
Apesar dos cuidados quanto ao uso desses novos recursos, tendo em vista que ainda são incompatíveis com alguns navegadores, é notável que dentre as várias facilidades de se construir aplicações utilizando os recursos do HMTL5, a mobilidade na plataforma de desenvolvimento se destaca como uma característica de grande motivação e difusão do seu uso, visto que uma mesma aplicação pode ser utilizada nos mais diversos dispositivos que acessam a internet.
REFERÊNCIAS
ABREU, Luís. HTML5. 2. Ed. Lisboa: FCA, 2012.
FERREIRA, Elcio; EIS, Diego. HTML5: Curso 3WC Escritório Brasil. 2010. PREECE, Jenifer; ROGERS, Yvonne; SHARP, Helen. Design de Interação: Além da interação homem-computador.Trad. Viviane Possamai. Porto Alegre: Bookman, 2005 Computação, n. 4, p.32-46, 2009. Disponível em:
<http://repositorioaberto.univab.pt/bitstream/10400.2/1492/1/RCC_4_3.pdf>. Acesso em: 08/08/2013
SCHROEDER, Ricardo; BASTOS, Fernando Andrade. HTML5, um novo desenvolvimento para a web. In MACHADO, Nivaldo (org.). CAMINHOS: Revista online de divulgação da UNIDAVI. Santa Catarina: Editora Unidavi, Nº 5. 2012.
SERRA, Ricardo Jorge Maia. Interfaces tácteis baseadas em HTML5/CSS3/JavaScript. 2011. 238993 f. Dissertação de Mestrado (Mestrado) -Curso de Engenharia Informática e Computação, Faculdade de Engenharia da Universidade do Porto, Portugal, 2012. Disponível em: <http://hdl.handle.net/10216/63293>. Acesso em: 05 abr. 2013.
SILVA, Jucimar Maia Jr; FIRMINO, Emiliano Carlos M. Desenvolvimento de Jogos em HTML5. In Anais do IX SBGames. Florianópolis-SC, 2010. Disponível em: <http://www.sbgames.org/papers/sbgames10/computing/short/Computing_short13.pdf >Acessado em: 09/04/2013
SILVA, Maurício Samy. JavaScript: guia do programador. São Paulo: Novatec Editora, 2012.
