DESENVOLVIMENTO WEB DENTRO DOS
PARADIGMAS DO HTML5
Alex de Andrade Catini¹, Tiago Piperno Bonetti¹
¹Universidade Paranaense (Unipar) Paranavaí – PR – Brasil
Alex.catini@gmail.com, bonetti@unipar.br
Resumo: Este trabalho contém uma análise científica sobre a linguagem de
desenvolvimento Web HTML5 que surgiu por conta de um grande problema enfrentado pelos desenvolvedores e fabricantes de navegadores, tendo por base mostrar as suas funções e suas utilizações. Para seu desenvolvimento realizamos uma revisão, que permitiu ate o momento concluir que após a sua criação e utilização, muitas das funções antes feitas por aplicações de terceiros são agora tratadas nativamente e trazendo uma estética junto ao código.
1. Introdução
O HTML5 apresenta diversas funcionalidades que tem o importante papel de ajudar na evolução da padronização esperada, que é definida pela da W3C (World Wide Web Consortium), entidade essa que define os padrões de comportamentos dos navegadores, que segundo a mesma tem como missão: “Conduzir a Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo”. Como muitos dos navegadores ainda não seguem a padronização e com a crescente necessidade do uso de recursos, muitos desses navegadores recorre ao uso de plug-ins que são usados para realizar funções, mas que não são nativos e não seguem padrões definidos, eis então que para suprir esta falta de padronização e agregar novas funcionalidades a uma “nova” internet, surge o HTML5 [Schroeder, 2012].
Desde os primórdios do surgimento dos navegadores, já houve a necessidade de realizar determinadas tarefas nas próprias páginas da Web, e com isso surgiram se os chamados plug-ins, que são nada mais do que extensões que permitem a realização das tarefas que hoje nos meados do século 21 são funções básicas, tais como: ver vídeos, ouvir músicas, ler revistas e artigos on-line, jogas games entre outras. Mas os chamados plug-ins muitas vezes consomem uma grande quantidade de recursos das máquinas, pois por suas tecnologias não serem incorporadas aos navegadores, acaba que estes, por sua vez, não trabalham em total harmonia e assim não trabalhando de acordo com o esperado. Já o HTML5 possui muitas dessas tecnologias incorporadas a ele, para não dizer todas, que por sua vez trabalham de acordo com o esperado.
Baseados nesta condição objetivamos realizar uma revisão sobre o recursos que o HTML5 traz junto a ele nativamente, definindo algumas tecnologias já incorporadas.
2. Metodologia
Para montagem deste trabalho foi efetuada revisão bibliográfica sobre HTML5 para obter um conhecimento mais aprofundado sobre o tema, utilizando-se de artigos, e-books e sites. Os conhecimentos obtidos através do estudo iram apontar os recursos que o HTML5 traz consigo em sua versão.
3. Mudanças e Aprimoramentos
Segundo Schroeder [2012] o HTML5 traz como base tags breves que facilitam as estruturações no processo de desenvolvimento com parâmetros de início e fim, e ainda há outros elementos e atributos em que sua função e significado foram modificados e que agora podem ser reutilizados de forma mais eficaz. Por exemplo, tags como B e I que foram descontinuados em versões anteriores do HTML e que agora assumem funções diferentes e integram mais significado para os usuários.
O HTML5 modifica a forma de como escrevemos códigos e organizamos as informações na página Web. Seria mais semântica com menos linhas de código, que seria mais interatividade sem a necessidade da instalação de plug-ins que acarretaria em perda de desempenho. É a criação de códigos que possibilitaria trabalhar com outros sistemas mais eficientemente, transparecendo a qualidade das transações, pronto para futuros dispositivos e que facilita a reutilização da informação de diversas formas [Ferreira, 2012].
3.2. Recursos Disponíveis Nativamente
O HTML5 traz consigo as suas novas funcionalidade, que antes eram realizadas por plug-ins que de certa forma traziam muitas vezes frustrações e baixo desempenho, mas que agora já traz incorporada nativamente no HTML5 tais recursos, trazendo assim melhor desempenho e menor índice de bugs e falhas.
3.3.1. Áudio e vídeo
Uma das grandes deficiências da web atual está na ausência de reprodução nativa de áudio e vídeo, tendo que ser contornada por plug-ins (geralmente o Flash Player). Esta nova versão (HTML5) traz incorporado à linguagem tags com o intuito de implementar estas funcionalidades, antes ausentes nativamente: a tag áudio exibida na figura 1 e a tag vídeo exibida na figura 2 mostram seus exemplos de funcionalidade inseridas na linhas de códigos [Schroeder, 2012].
Figura 1 - Tag de áudio padronizada pelo HTML5
Figura 2 - Tag de vídeo padronizada pelo HTML5
Fonte: <http://www.w3schools.com/html/html5_video.asp>.
3.3.2. Animações gráficas
Estas funcionalidades são implementadas através de SVG - Scalable Vectorial Graphics (Gráficos vetoriais escaláveis) e Canvas. O SVG é um projeto já existente a W3C que trabalha com desenhos vetoriais, porém, foram realizadas algumas adaptações para poder realizar a renderização das imagens dentro de um documento HTML de maneira mais prática. Já o canvas é uma API que permite você desenhar via Javascript (utilizando o conceito bitmap, pixel a pixel). Apesar de serem duas ferramentas utilizadas para desenhos, cada um tem sua aplicabilidade, tendo o SVG como vantagem resolução independente (isso permite alterar a escala para qualquer resolução de tela), possui um bom suporte para animações, e para isso pode se utilizar de sintaxe declarada ou via Javascript e possui controle total sobre os elementos utilizando a API Svg Dom (Document Object Model) em Javascript. Já o Canvas possui na maior parte uma alta performance de desenho em contextos 2D, desempenho constante, só ocorrendo degradação com o aumento da resolução da imagem, adequado para a geração de gráficos, edição de imagens e manipulação de pixels [Rogerio, 2010].
3.3.3. Armazenamento de dados
Para suprir a necessidade de armazenamento de dados do cliente, foi desenvolvida a API Web Storage, que possui os métodos: getItem, setItem, removeItem e clear, que melhor atendem as necessidade existentes. A Storage pode ser acessada de duas
maneiras, através da sessionStorage e localStorage [Pilgram].
A sessionStorage disponibiliza os dados apenas para a janela que criou o dado até que seja fechada (por exemplo, quando a sessão anterior for encerrada, e você abrir outra janela com uma nova sessão, ela não terá acesso aos dados daquela sessão anterior), já a localStorage, não armazena os dados por sessão. Se um dado for setado pela local storage esse ficará automaticamente disponível para qualquer janela, e ficará disponível no próximo dia, semana ou ano, até que seja deletado pelo usuário. A W3C por padrão sugeriu que o armazenamento passasse a ser de 5 megabytes por origem [Rocha, 2011].
Para casos com grande complexidade, existe ainda a possibilidade de se criar Banco de Dados locais baseados no padrão SQL (Structures Query Language). A criação, conexão, e demais operações são todas realizadas através de Javascript pelos já conhecidos comandos SQL [Schroeder, 2012].
3.3.4. Aplicações off-line
Com os consideráveis avanços de armazenamento de dados locais do usuário, torna-se cada vez mais viável a construção de aplicações web off-line que são simples e composta de uma lista de URLs – HTML, CSS, Javascript, imagens ou qualquer outro tipo de recurso, ainda mais que o HTML5 disponibiliza de maneira que indicam ao navegador que recursos devem ser colocados em cache no momento que o usuário esteja conectado com a internet, realizando o download dos arquivos para que os mesmos funcionem off-line. Esta informação é disponibilizada através de um arquivo conhecido como Manifest, que contém uma lista de endereços web que estarão disponíveis no cache [Pilgram].
3.3.5. Geolocalizacão
A geolocalização basicamente é a informação de qual é a posição atual dos usuários diante do globo. A três formas de se obter essa informação com os navegadores, os quais são Geolocalização IP, Triangulação GPRS e GPS, que podem ser classificadas como de baixa, media e alta precisão respectivamente [Schroeder, 2012].
3.3.6. CSS 3
Outro ponto forte do HTML5 são as novas opções em CSS, que são responsável por controlar o visual das informações exibidas pelo HTML. O CSS é responsável também por controla às informações exibidas em qualquer meio de acesso de forma mais simplificada, a tabela 4 a seguir ira exibir comandos das novas funcionalidades [Ferreira, 2012].
Propriedades Efeitos
Background-size Permite definir o tamanho do plano de fundo
Border-radius Bordas arredondadas
Box-shadow Sobras em elementos “caixa”
Text-shadow Sombras em texto
CSS Gradients Gradientes com planos de fundo/bordas
CSS Columns Colunas automáticas em blocos de texto
CSS Transform Transformações em elementos (rotação, distorção,
escala, etc).
CSS Animations Animações das propriedades automáticas.
Tabela 1 - Comandos novos de CSS 3.
Fonte: Schroede.
4. Considerações Finais
Concluiu-se que a linguagem HTML5 traz padrões não existentes nas versões anteriores, que eram fundamentais na qualidade da construção de uma web mais limpa e padronizada, com compatibilidade com todos os recursos existentes na web, claro alguns recursos para serem utilizados ainda dependem de aplicações de terceiros, mas com a constante evolução da web logo será sanada essa dependências.
5. Referências:
Schroeder, R. (2012) Caminhos: HTML5, Um novo desenvolvimento para a web. 5 v. TCC (Graduação) - Curso de Pesquisa e Extensão, Departamento de Conhecimento, Centro Universitário Para O Desenvolvimento do Alto Vale do Itajaí, Rio do Sul, 2012. Disponível em: <http://www. caminhos.unidavi.edu.br/>. Acesso em: 01 ago. 2014.
Rogério, P. (s.d.) SVG vs Canvas. Disponível em:
<http://www.pinceladasdaweb.com.br/blog/2010/09/01/svg-vs-canvas/>. Acesso em: 25 jul. 2014.
Ferreira, D. E. E. (2012) HTML5 e CSS3 com farinha e pimenta. 218 f. TCC (Graduação) - Curso de Pesquisa e Extensão, Tableless, São Paulo, 2012. Disponível em: <http://tableless.com.br/>. Acesso em: 21 maio 2014.
Pilgrim, M. (s.d.) DIVE INTO HTML5. Disponível em:
<http://diveintohtml5.com.br/index.html>. Acesso em: 20 jun. 2014.
Rocha, Z. (s.d.) HTML5 - Local Storage. Disponível em:
