Baixar - Unipar

DESENVOLVIMENTO WEB DENTRO DOS
PARADIGMAS DO HTML5
Alex de Andrade Catini¹, Tiago Piperno Bonetti¹
¹Universidade Paranaense (Unipar)
Paranavaí – PR – Brasil
[email protected], [email protected]
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, ebooks 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
Fonte: <http://www.w3schools.com/html/html5_video.asp>.
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
Background-size
Border-radius
Box-shadow
Text-shadow
CSS Gradients
CSS Columns
CSS Transform
CSS Animations
Efeitos
Permite definir o tamanho do plano de fundo
Bordas arredondadas
Sobras em elementos “caixa”
Sombras em texto
Gradientes com planos de fundo/bordas
Colunas automáticas em blocos de texto
Transformações em elementos (rotação, distorção,
escala, etc).
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
<http://diveintohtml5.com.br/index.html>. Acesso em: 20 jun. 2014.
em:
Rocha,
Z.
(s.d.) HTML5
Local
Storage. Disponível
<http://zenorocha.com/html5-local-storage/>. Acesso em: 27 maio 2014.
em: