DESENVOLVIMENTO WEB DENTRO DOS PARADIGMAS DO HTML5

Prévia do material em texto

1
UNIVERSIDADE PARANAENSE
CURSO DE SISTEMAS DE INFORMAÇÃO 
UNIDADE UNIVERSITÁRIA DE PARANAVAÍ
ALEX DE ANDRADE CATINI
DESENVOLVIMENTO WEB DENTRO DOS PARADIGMAS DO
HTML5
PARANAVAÍ
2014
2
ALEX DE ANDRADE CATINI
DESENVOLVIMENTO WEB DENTRO DOS PARADIGMAS DO
HTML5
Trabalho de conclusão da disciplina de Estágio 
Supervisionado em Sistemas de Informação I, 
apresentado a banca examinadora do curso de 
Sistemas de Informação da Universidade 
Paranaense – UNIPAR, como exigência parcial 
para a obtenção do grau de bacharel em 
Sistemas de Informação, sob a orientação dos 
Professores Tiago Piperno Bonetti.
PARANAVAÍ
2014
3
FOLHA DE APROVAÇÃO
ALEX DE ANDRADE CATINI
DESENVOLVIMENTO WEB DENTRO DOS PARADIGMAS DO
HTML5
Trabalho de conclusão aprovado como requisito parcial para obtenção do grau de 
Bacharel em Sistemas de Informação da Universidade Paranaense – UNIPAR, pela 
seguinte banca examinadora:
____________________________________________________
Prof. Esp. Tiago Piperno Bonetti (Orientador)
Especialista em Tecnologias em desenvolvimento de Soluções Corporativas 
Web, Dispositivos Móveis e Gerenciamento de Redes de Computadores.
____________________________________________________
Profª. Mª. Claudete Werner
Mestre em Ciência da Computação
____________________________________________________
Prof. Esp. Willian Barbosa Magalhães
Especialista em Desenvolvimento de Sistemas para Internet
Paranavaí 
2014
4
AGRADECIMENTOS
Agradeço pelo apoio da minha família que nunca deixou que eu desanimasse 
mesmo nos momentos mais difíceis pelos quais passei. E aos meus amigos que 
sempre estiveram ao meu lado quando precisei, me ensinando e aconselhando.
Ao professor Tiago Piperno Bonetti, que com muita paciência e atenção 
sanou minhas dúvidas, dando sugestões valiosas e que me ajudaram para que 
conseguisse realizar meu trabalho.
5
RESUMO
A linguagem HTML5 surgiu por conta de um grande problema enfrentado pelos 
desenvolvedores e fabricantes de navegadores por volta de 2004, pois a internet 
estava seguindo rumos desiguais e sem padronização, em contra partida alguns 
fabricantes de navegadores resolveram tomar as rédeas da situação, iniciando 
assim o projeto de uma linguagem padronizada que iria atender a todos e deixar de 
depender de aplicativos de terceiros (plug-ins), foi quando o HTML5 surgiu, por volta 
de 2008, tomando âmbito mundial pelas suas funcionalidades e recursos oferecidos, 
mudando e padronizando assim a internet que conhecemos. Este trabalho tem como 
objetivo mostrar os padrões de desenvolvimento web dentro dos conceitos de 
HTML5. Através da revisão da literatura buscaremos abordar sobre os padrões de 
desenvolvimento desta linguagem de programação para o desenvolvimento web. O 
HTML5 trás consigo várias tecnologias incorporadas bem com Javascript e CSS3, e 
nativamente fornece suporte a muitas extensões, que antes somente eram executas 
com ajuda de plug-ins, quanto á padronização o HTML5 traz uma linguagem clara e 
intuitiva, com tags objetivas, facilitando a programação. Com base neste trabalho 
concluiu-se que a linguagem HTML5 traz padrões que antes não existentes nas 
versões anteriores, que eram fundamentais na qualidade da construção de uma 
internet mais limpa e padronizada, com compatibilidade com todos os recursos 
existentes na web, claro alguns recursos para serem utilizando ainda depende de 
aplicações de terceiros, mas com a constante evolução da web logo será sanada 
essas incompatibilidades.
Palavras chaves: HTML5, Padronização, CSS, Javascript.
6
ABSTRACT
The HTML5 language ( Hypertext Markup Language version 5 ) appeared on behalf 
of a major problem faced by developers and browser vendors around 2004 , because 
the internet was following unequal and without standardization directions , matched 
against some browser vendors decided to take the reins of the situation , thereby 
initiating the design of a standardized language that would suit everyone and stop 
relying on third-party ( plug- ins ) applications , was when the HTML5 emerged 
around 2008 , taking worldwide for its features and capabilities offered , changing 
and standardizing the internet so that we know. This work aims to show web 
development standards within the concepts of HTML5 . Through literature review will 
seek to address on the patterns of development of this programming language for 
web development . The HTML5 back to follow various technologies incorporated well 
with Javascript and CSS3 (Cascading Style Sheets version 3 ) , and natively 
supports many extensions , which was previously only performed through the help of 
plug- ins , as will standardize HTML5 brings in a clear and intuitive language with 
tags objective by facilitating the programming . Based on this work it was concluded 
that brings HTML5 language patterns that previously did not exist in previous 
versions , which were fundamental to the quality of construction of a cleaner and 
internet standard , compatibility with all existing resources on the web , of course 
some features to be still dependent on using third-party applications , but with the 
constant evolution of the web will soon be remedied such dependencies .
Key words: HTML5, standardization, CSS, Javascript.
7
ÍNDICE DE FIGURAS
Figura 1 - Tag de áudio padronizada pelo HTML5 31
Figura 2 - Tag de vídeo padronizada pelo HTML5 31
Figura 3 - Vídeo sendo reproduzido nativamente do HTML5 32
Figura 4 - Teste de performance gráfica 34
Figura 5 - Mapa Mundi renderizado 34
Figura 6 - Banco de dados Web SQL 37
Figura 7 - Recurso de geolocalização 39
Figura 8 - Comparação sobre Web Semântica 40
Figura 9 - Linhas de código usando a Microdata 44
Figura 10 - Mapa dos arquivos 47
Figura 11 – Arquivo HTML da pagina principal 48
Figura 12 - Arquivo CSS da pagina principal 48
Figura 13 - Pagina principal da implementação 49
Figura 14 - Arquivo HTML da animação 50
Figura 15 - 1º Parte do Javascript 51
Figura 16 - 2º Parte do Javascript 51
Figura 17 - 3º Parte do Javascript 52
Figura 18 – Arquivo CSS da animação 52
Figura 19 - Animação em Canvas 53
Figura 20 - Arquivo HTML da musica 53
Figura 21 – Musica sendo executada através da função do HTML5 54
Figura 22 – Arquivo HTML do vídeo 55
Figura 23 – Vídeo sendo executada através da função do HTML5 55
Figura 24 - Arquivo HTML da aplicação de geolocalizacão 56
Figura 25 - Javascript da programação de geolocalizacão 57
Figura 26 - Mapa com a posição do usuário marcada 58
Figura 27 - Arquivo HTML da aplicação off-line 58
Figura 28 - Função de verificação e criação do banco de dados 59
Figura 29 - Função de alteração 60
Figura 30 - Função de exclusão 60
Figura 31 - Função de inclusão 61
8
Figura 32 - Função de seleção de itens 61
Figura 33 - Aplicação Off-line 62
9
ÍNDICE DE TABELAS
Tabela 1 - Comparação entre codificação de XHTML 1.0 e HTML5. 20
Tabela 2 - Elemento raiz do HTML5 22
Tabela 3 - Metadados do documento HTML5 23
Tabela 4 - Elementos de scripting do HTML5 23
Tabela 5 - Elementos de seção do HTML5 24
Tabela 6 - Tag de agrupamento de conteúdo 25
Tabela 7 - Tag semânticas do HTML5 27
Tabela 8 - Tags de edição 27
Tabela 9 - Elementos embutidos do HTML5 28
Tabela 10 - Tabulação do dados 29
Tabela 11 - Formulários do HTML5 30
Tabela 12 - Elementos interativos 30
Tabela 13 - Exemplo da Função SessionStorage 36
Tabela 14 - Exemplo da Função LocalStorage 36
Tabela 15 - Comandos novos de CSS 3. 39
Tabela 16 - Versões do JavaScript 42
10
SUMÁRIO
FOLHA DE APROVAÇÃO 3
RESUMO 5
ABSTRACT 6
ÍNDICE DE FIGURAS 7
ÍNDICE DE TABELAS 9
1. INTRODUÇÃO 13
1.1. Contexto 13
1.2. Objetivos 13
1.3. Justificativa e Motivação 13
1.4. Escopo 14
1.5. Organização do trabalho 14
2. HTML5 16
2.1. A história do HTML 16
2.2. Sobre o HTML5 19
2.3. Mudanças e aprimoramentos 203. PADRÕES DE HTML5 NO DESENVOLVIMENTO 22
3.1. Elementos do HTML5 22
3.1.1. Elemento raiz 22
3.1.2. Metadados do documento 22
3.1.3. Scripting 23
3.1.4. Seções 23
3.1.5. Agrupando conteúdo 24
3.1.6. Semântica á nível de texto 25
3.1.7. Edições 27
3.1.8. Conteúdo embutido (nativo) 28
11
3.1.9. Tabulação de dados 29
3.1.10. Formulários 29
3.1.11. Elementos interativos 30
3.2. Recursos 31
3.2.1. Áudio e Vídeo 31
3.2.2. Animações gráficas 32
3.2.3. Armazenamento de dados 35
3.2.4. Aplicações off-line 37
3.2.5. Geolocalização 38
3.2.6. CSS 3 39
3.2.7. Web semântica 40
3.2.7. JavaScript 41
3.2.8. Microdata 43
4. TRABALHOS CORRELATOS 45
4.1. HTML5, Um novo desenvolvimento para a web 45
4.1.1. Objetivos 45
4.1.2. Conclusão 45
4.2. O Impacto do HTML5 no desenvolvimento para a internet 46
4.2.1. Objetivo 46
4.2.2. Conclusão 46
5. IMPLEMENTAÇÃO 47
5.1. A organização dos arquivos 47
5.2. Pagina principal 47
5.2.1. HTML 47
5.2.2. CSS 48
5.2.3. Resultado 49
5.3. Animação 49
12
5.3.1. HTML 49
5.3.2. JavaScript 50
5.3.3. CSS 52
5.3.4. Resultado 53
5.4. Musicas 53
5.4.1. HTML 53
5.4.2. Resultado 54
5.5. Vídeo 54
5.5.1. HTML 55
5.5.2. Resultado 55
5.6. Geolocalizacão 56
5.6.1. HTML 56
5.6.2. JavaScript 56
5.6.3. Resultado 57
5.7. Aplicação Off-line 58
5.7.1. HTML 58
5.7.2. JavaScript 59
5.7.3. Resultado 62
CONCLUSÃO 63
REFERENCIAS 64
OUTROS ANEXOS 66
13
1. INTRODUÇÃO
O capitulo introdutório que se segue, apresentará o contexto e os objetivos que 
envolvem este projeto, tendo como foco proporcionar ao leitor um maior 
entendimento sobre o assunto apresentado. Ao final do capitulo, está presente uma 
detalhada explicação sobre o decorre dos próximos capítulos.
1.1. Contexto 
O HTML5 apresenta novas funcionalidades que serão apresentadas nos capítulos 
seguintes e tem o papel importante 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 (SCHROEDE, 2012).
1.2. Objetivos
Um dos objetivos é realizar uma revisão bibliográfica sobre HTML5, nos quais os 
principais objetivos deste trabalho são:
 Descrever um estudo das metodologias de desenvolvimento do HTML5.
 Apontar os recursos que o HTML5 traz junto a ele nativamente.
 Definir tecnologias incorporadas ao HTML5.
 Mostrar um exemplo de uma página web que usa o HTML5 em sua estrutura, 
mostrando os seus recursos nativos sendo utilizados.
1.3. Justificativa e Motivação
14
Desde os primórdios do surgimento dos navegadores, já ouve a necessidade de 
realizar determinadas tarefas nas próprias paginas 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 por sua vez utilização 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, que por sua vez trabalham de acordo com o 
esperado. 
1.4. Escopo
O HTML5 já está no mercado há algum tempo e possui inúmeros recursos que 
devem ser utilizados de acordo com os seus padrões de desenvolvimento, que vão 
ser mostrados nos demais capítulos. 
1.5. Organização do trabalho
Este capítulo trata da introdução do trabalho, onde são evidenciados os objetos 
gerais e principais, justificativa e motivação e o escopo. 
Inicialmente no Capítulo 2 é contada a historia do HTML até a chegada do 
HTML5, onde são apresentadas as mudanças e aprimoramentos constantes dele.
O capítulo 3 é apresenta-se sobre os padrões de HTML5 no desenvolvimento 
web, onde são abordados os elementos validos e os recursos oferecidos por ele, 
relatando detalhadamente cada um desse tópicos.
O capítulo 4 abordará dois trabalhos correlatos a este, onde é relatado em um 
breve trecho os objetivos e as conclusões obtidas por eles.
O capítulo 5 ira mostra os recursos implementados relatando características da 
programação e mostrando os resultados obtidos com o uso da tecnologia. 
15
Por fim, no o trabalho se encerra com conclusão final do estudo, relatando os 
resultados obtidos no decorrer da pesquisa.
16
2.
17
3. HTML5
Este capítulo irá contar um pouco sobre a história do HTML até o início do 
HTML5 onde fará uma abordagem sobre o assunto relatando as mudanças que 
existem e algumas tecnologias por ele utilizadas.
3.1. A história do HTML
Em 1980 Tim Berners-Lee propôs um projeto baseado no conceito de hipertexto 
denominado ENQUIRE. Este projeto foi inicialmente todo desenvolvido em 
linguagem Pascal. Em 1989 Tim Berners-Lee e um estudante da Organização 
Europeia para a Pesquisa Nuclear (CERN), que se chamava Robert Cailliau, que o 
ajudou a conseguir implementar a primeira comunicação bem sucedida entre um 
cliente HTTP e um servidor através da internet. Surgia então a World Wide Web. 
Porém o protocolo HTTP só foi implementado em fevereiro de 1993 (PILGRIM, 
2010). 
A sigla HTML significa HyperText Markup Language em português, linguagem 
de marcação de hipertexto. A primeira versão do HTML foi baseada na linguagem 
SGML. A SGML era utilizada para a estruturação de documentos e foi dela que o 
HTML herdou diversas tags tais como: título (<h1> ao <h6>), cabeçalho (<head>) e 
parágrafo (<p>). A maior diferença entre essas duas linguagens de marcação de 
texto é que o HTML utiliza a tag <a> com o atributo (href), permitindo assim à 
ligação de uma página a outra. Esse conceito de interligação entre documentos é a 
base do funcionamento de toda Web (PILGRIM, 2010).
O HTML surgiu por volta de 1990 e até o seu quinto ano de criação sofreu 
diversas revisões e alterações nas suas especificações. Nesta época, quem 
controlava o padrão era o CERN e a Internet Engineering Task Force (IETF), que 
após o ano de 1995, o padrão passou a ser regularizado pela W3C, entidade que 
regula os padrões Web. Pois em agosto de 1994 foi fundado a W3C, um grupo 
formado por instituições comerciais e educacionais com o objetivo de definir os 
padrões para todas as diversas áreas relacionadas à Web.
18
Em 1993, Dave Raggett propôs uma evolução do padrão HTML denominada 
HTML+. Entretanto tal proposta nunca foi adiante. A real proposta que continuou 
coma evolução do HTML foi o HTML 2.0, o qual foi apresentado na primeira 
conferência mundial sobre Web, a World Wide Web Conference. Essa versão do 
HTML pode ser vista apenas como uma correção da versão anterior, simplesmente 
formalizando as características existentes no HTML, logo depois, Raggett escreveu 
a versão HTML 3.0 baseado em seu mais recente rascunho do HTML+. Entretanto, 
mais uma vez das versões do HTML não foi adiante. Esta especificação foi superada 
pela versão 3.2, a qual novamente foi uma correção e providenciou total 
compatibilidade com a versão 2. O HTML 3.2 contou com características, tais comotabelas, applets e texto flutuante ao redor de imagens. Posteriormente, Raggest foi 
co-author do HTML 4 e ajudou com o desenvolvimento das linguagens como 
XHTML, XForms, MathML e além de outras especificações mais modernas da W3C.
Em dezembro de 1997 a W3C publicou o HTML 4 e após dois meses publicou o 
XML 1. A W3C reformulou o grupo responsável pelo HTML para criar uma “suíte de 
tags XML”. O primeiro passo foi dado em dezembro de 1998, quando o grupo 
reescreveu o HTML em XML sem adicionar elementos ou atributos novos. Essa 
especificação foi chamada de XHTML 1. O objetivo seguinte da W3C foi à 
reestruturação dos formulários Web. Em agosto de 1999 o mesmo grupo 
responsável pelo HTML publicou o primeiro rascunho da extensão dos formulários 
para XHTML. Alguns meses depois, essa “extensão dos formulários para XHTML” foi 
renomeada de “XForms”, e em dezembro de 1999 o HTML 4.01 foi publicado 
trazendo como principal premissa a compatibilidade com as suas versões anteriores 
através de 3 implementações de:
 Scrict (estrita) – implementação na qual fica proibida a utilização de 
elementos obsoletos da linguagem;
 Transitional (transitória) – implementação na qual os elementos obsoletos são 
permitidos;
 Frameset – implementação direcionada para site que usam frames.
19
Enquanto isso, com a transição do XML completa, os membros do grupo do 
HTML criaram “a nova geração do HTML”. Em maio de 2001 eles publicaram a 
primeira versão do XHTML 1.1 (PILGRIM, 2010).
Em 2003 o grupo incumbido ao XForms, conseguiu publicar a primeira versão 
em outubro, já em julho de 2004 a W3C organizou um workshop chamado 
“Workshop on Web Applications and Compound Documents”, nesse workshop 
estavam presentes os membros da W3C e companhias desenvolvedoras de 
navegadores como a fundação Mozilla e a Opera. Neste workshop foi apresentado 
uma visão do futuro da web com uma evolução do padrão HTML 4, incluindo novas 
características para aplicações modernas, deixando a W3C bem claro que não 
seriam desenvolvidas novas tecnologias de extensões do HTML e CSS que não 
fossem criadas pelo atual grupo de trabalho da W3C. Diante desse impasse, o grupo 
que desenvolvia o HTML e os formulários HTML tinha duas escolhas: ou se uniam à 
W3C, ou se separavam. Em contrapartida, em julho de 2004 surgiu o Web Hypertext 
Application Technology Working Group (WHATWG) (PILGRIM, 2010).
O WHATWG é o grupo de trabalho tecnológico de aplicações de hipertexto para 
Web. Tratava-se de um grupo livre, não oficial e de colaboração dos 
desenvolvedores de navegadores e de seus interessados. O WHATWG desenvolve 
especificações baseadas no HTML e em tecnologias relacionadas para facilitar o 
desenvolvimento e compatibilidade das aplicações web, com a intenção de submeter 
os resultados para um padrão organizacional. Essas submissões podem então fazer 
parte do padrão formal do HTML (PILGRIM, 2010).
O WHATWG trabalhou por muito tempo somente por e-mail e alcançaram seu 
maior feito com os formulários HTML 4, que passou a incorporar tecnologias dos 
autores do grupo sem quebrar o padrão de compatibilidade com o conteúdo 
existente. O grupo foi criado para assegurar que o futuro desenvolvimento destas 
especificações fosse completamente livre, através de arquivos públicos e uma lista 
de discussão aberta (PILGRIM, 2010).
Por muitos anos o W3C e o WHATWG se ignoraram. Enquanto o WHATWG 
focava nos formulários e nas novas características no HTML, o W3C estava ocupado 
20
com a versão 2.0 do XHTML, Mas em outubro de 2006, ficou claro que a WHATWG 
estava vivendo um momento mais sério, enquanto o XHTML 2.0 estava sendo 
lançado como rascunho e não estava sendo utilizada pela maioria dos navegadores. 
Em outubro de 2006, Tim Berners-Lee, o fundador da W3C, anunciou que a W3C 
deveria trabalhar em conjunto com a WHATWG. O que resultou no primeiro passo 
de trabalho em conjunto sendo renomear o “Web Application 1.0” para “HTML5” 
(PILGRIM, 2010).
 
1.1. Sobre o HTML5
Em 2008 a primeira versão do HTML5 é publicada o primeiro esboço do HTML5 
é introduzido, mas mudanças ainda estão por vir. Especialistas dizem que o HTML5 
é uma tecnologia em constante evolução que nunca será totalmente 'terminada', no 
mesmo ano a Firefox 3 se torna compatível com o HTML5, começando a aceitar os 
comandos do HTML5, que por sua vez, atraiu também o Chrome, safari e o Internet 
Explorer (WIX).
Em Janeiro de 2010 o YouTube lança um tocador em HTML5, podendo ser 
acessada pelo TestTube, e já em julho lançou uma versão melhorada do tocador, 
mas em abril de Steve Jobs depressa o Flash Player, dizendo que "O flash foi criado 
para PCs usando um mouse, não para telas touchscreen usando os dedos", fazendo 
assim com que as empresas se voltassem para o HTML5. Ainda em 2010 a Scribd 
(site de compartilhamento de documentos) muda seus arquivos para HTML5, 
trazendo uma nova interface aos usuários de tabletes, mas em agosto a banda 
Arcade Fire lança seu primeiro vídeo interativo em HTML5 e a Chrome Web é 
inaugurada em dezembro, trazendo vários aplicativos em HTML5 (WIX).
Agora em julho de 2011 a Pandora começa a se utilizar os player nativos do 
HTML5, por serem mais leves e rápidos e menos complicados do que seus rivais, 
em setembro 34% dos sites mais vistos na internet já se utilizando do HTML5 (WIX).
Em abril de 2012 a empresa Flickr cria uma ferramenta de upload em HTML5 
facilitando o uploads de arquivos pesados, trazendo maior agilidade no processo e 
em junho a plataforma wix.com bate recordo de + 1.000,000 sites criados em HTML5 
21
por usuários do serviço. Já em 2013 a estimativa é do HTML5 estará presente em 
mais de 1.000.000,000 de dispositivos (WIX).
3.2.Mudanças e aprimoramentos
Quando da criação do HTML4 a “W3C alertou os desenvolvedores sobre 
algumas boas práticas que deveriam ser seguidas ao produzir códigos client-side. 
Desde este tempo, assuntos como a separação da estrutura do código com a 
formatação e princípios de acessibilidade foram trazidos para discussões e à 
atenção dos fabricantes e desenvolvedores” (FERREIRA, 2012, p. 29).
Porém o HTML4 não trazia em sua estrutura uma semântica do código com uma 
real diferenciação e também não facilitação a utilização de alguns recursos, tais 
como Javascript ou CSS (Cascading Style Sheets) (FERREIRA, 2012).
O HTML5 tem uma linguagem mais simplificada, que facilita na programação e 
diminuindo satisfatoriamente as antigas e extensas linhas de código, que são 
exemplificados na tabela 1 a seguir, onde se faz uma comparação entre o XHTML 
1.0 e HTML5; mas é imprescindível ressaltar que a nomenclatura XHTML é definida 
pelo próprio desenvolvedor e não havia qualquer padronização quanto a essa 
estrutura. 
XHTML 1.0 HTML5
<div id= “header”> <header>
<div id= “nav”> <nav>
<div id= “article”> <artide>
<div class= “section”> <section>
<div id= “sidebar”> <aside>
<div id= “footer”> <footer>
Tabela 1 - Comparação entre codificação de XHTML 1.0 e HTML5.
(FONTE: DIEGO)
22
São definidas as regras de marcação que usaremos no HTML5 e no XHTML 
pela WHATWG, que também é responsável pela definição das APIs que fazem parte 
da base da arquitetura web. Um dos principais objetivos do HTML5 é trazer a 
transparência ao usuário final da manipulação do elemento, possibilitando ao 
desenvolvedor modificar as características dos objetos de forma não intrusiva. Ao 
contrário das versões anteriores, o HTML5 fornece ferramentas para a CSS e o 
Javascript fazerem seu trabalho da melhor maneira possível, eventualmente 
diminuindo a possibilidade de bugs. O HTML5 permite por meio de suas APIs a 
manipulação das características destes elementos, de forma que o website ou a 
aplicação continue leve e funcional, sem a necessidade de criações de grandes 
blocos de scripts, ao contrário da sua versão antiga que não trazia tais 
possibilidades (FERREIRA, 2012).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ódigo e organizamos a 
informação 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). 
23
4.
24
5. PADRÕES DE HTML5 NO DESENVOLVIMENTO
Neste Capítulo serão apresentados os padrões de HTML5 no desenvolvimento 
web e suas características principais que o destacam.
5.1.Elementos do HTML5
Os tópicos a seguir iram descrever as tags padrões do HTML5 que são valida 
para criação de novos sites no padrão HTML5.
1.1.1. Elemento raiz
A tabela 2 a seguir mostra o elemento raiz do HTML5.
Elemento Descrição
<html> Representa a raiz de um documento HTML ou XHTML. Todos os 
outros elementos devem ser descendentes desse elemento.
Tabela 2 - Elemento raiz do HTML5
(FONTE: NETWORK et al., 2014)
1.1.2. Metadados do documento 
Podemos dizer que os metadados são instrumentos para a busca e 
recuperação da informação, determinados a seguir na tabela 3.
Elemento Descrição
<head> Representa uma coleção de metadados sobre o documento, incluindo 
links suas definições de scripts e folhas de estilo.
<title>
Define o título do documento , apresentado na barra de título do 
navegador ou na guia da página. Ele só pode conter texto e todas as 
tags contidas não são interpretados.
<base> Define a URL base para URL relativa na página .
<link> Usado para linkar JavaScript e CSS externo o documento HTML .
<meta> Define os metadados que não podem ser definidas usando outro 
25
elemento HTML .
<style> Style tag usada para escrever CSS iline.
Tabela 3 - Metadados do documento HTML5
(FONTE: NETWORK et al., 2014)
5.1.1. Scripting
Os Scripting são roteiro a serem seguidos pelos navegadores para realizar 
determinadas tarefas escritas pelo desenvolvedor da aplicação, exemplificado se 
você precisar somar a media de um aluno, o script ira encaminhar passo a passo o 
navegador para realizar a soma das medias e exibe-la na tela. Para a inserção de 
um script se utiliza a tag exibida na tabela 4.
Elemento Descrição
<script> Define um script interno ou link para um script externo. A linguagem de 
script é JavaScript
<noscript> Define um conteúdo alternativo a ser exibido quando o navegador não 
suporta scripts.
Tabela 4 - Elementos de scripting do HTML5
(FONTE: NETWORK et al., 2014)
5.1.2. Seções
A tabela 5 aponta os elementos de seção validos do HTML5.
Elemento Descrição
<body> Representa o principal conteúdo de um documento HTML. Há 
apenas um elemento <body> em um documento.
<section> Define a seção do Documento.
<nav> Define uma seção que contém apenas links de navegação.
<article>
Define que pode existir de forma independente do resto do 
conteúdo. Esta Tag poderia ser um post no fórum, um artigo de 
revista ou jornal, uma entrada de log da Web, um comentário 
enviado pelo usuário, ou qualquer outro item independente do 
26
conteúdo.
<aside> Define um conteúdo reservado do resto do conteúdo da página. 
Se for removida, o conteúdo restante ainda fazem sentido.
<h1>,<h2>,<h3>,
<h4>,<h5>,<h6>
São elementos que representam os seis níveis de titulos de 
cabeçalhos dos documentos. Um elemento título descreve 
brevemente o tema da seção.
<header>
Define o cabeçalho de uma página ou seção. Muitas vezes 
contém um logotipo, o título do site e uma menu de navegação 
do conteúdo.
<footer>
Define o rodapé de uma página ou seção. Muitas vezes contém 
um aviso de copyright, alguns links para informações legal ou 
endereços para dar feedback.
<address> Define uma seção que contém informações de contato, como 
endereço e telefone.
<main> Define o conteúdo principal ou importante no documento. Existe 
apenas um elemento <main> no documento.
Tabela 5 - Elementos de seção do HTML5
(FONTE: NETWORK et al., 2014)
5.1.3. Agrupando conteúdo
O agrupamento de conteúdo dentro do HTML5 se da através das tags a baixo 
conforme tabela 6.
Elemento Descrição
<p> Define uma parte que deve ser exibido como um paragrafo.
<hr> Representa uma ruptura temática entre parágrafos de um artigo ou 
seção ou qualquer conteúdo mais longo.
<pre> Indica que o seu conteúdo é pré-formatado e que este formato deve 
ser preservada.
<blockquote> Representa uma citação.
<ol> Define uma lista ordenada de itens, que é uma lista que mudam o 
seu significado, se alterar a ordem dos seus elementos
<ul> Define uma lista não ordenada.
27
<li> Define um item de uma lista de uma ol ou de um ul.
<dl> Representa uma Lista de Definição
<dt> Representa um item da Lista de Definição <dd>.
<dd> Representa a definição dos termos listados imediatamente antes 
dele.
<figure> O elemento figura representa um conteúdo de fluxo, opcionalmente 
com um subtítulo.
<figcaption> Representa a legenda do Figure.
<div> Representa um contêiner genérico sem nenhum significado 
especial.
Tabela 6 - Tag de agrupamento de conteúdo
(FONTE: NETWORK et al., 2014)
5.1.4. Semântica á nível de texto
A semântica trazida pelo HTML5 facilitou em muito o entendimento das 
codificações, trazendo um significado mais claro de cada elemento, exibido na 
tabela 7 abaixo.
Elemento Descrição
<a>
Representa um contêiner genérico sem nenhum significado 
especial Representa um hyperlink, ligando a outro recurso.
<em> Representa a ênfase do conteudo.
<strong> Representa a importância de um pedaço de texto com o forte 
elemento não altera o sentido da frase.
<small>
Representa um comentário lateral , que é o texto como um 
aviso legal, um autor que não é essencial para a compreensão 
do documento.
<s> Representa o conteúdo que não é mais preciso ou relevante.
<cite> Representa o título de uma obra.
<q> Representa uma linha de cotação.
<dfn> Representa um termo cuja definição está contida em seu 
conteúdo ancestral mais próximo.
28
<abbr> Representa uma abreviatura ou uma sigla , eventualmente, 
com o seu significado.
<data>
Associates em seu conteúdo um equivalente legível por 
máquina . (Esse elemento só está na versão WHATWG do 
padrão HTML, e não na versão HTML5 do W3C).
<time> Representa uma data e hora valor, eventualmente, com um 
equivalente legível por máquina.
<code> Representa um código de computador.
<var>
Representa uma variável, que é uma expressão ou contexto de 
programação matemática real, um identificador que representa 
uma constante, um símbolo de identificação de uma 
quantidade física, um parâmetro de função, ou um mero 
espaço reservado em prosa.
<samp> Representa a saída de um programa ou de um computador.
<kbd>
Representa a entrada do usuário, muitas vezes a partir do 
teclado, mas não é necessário, pode representar outra 
entrada, como comandos de voz transcritas.
<sub>, <sup> Representa um subscrito , respectivamente, um sobrescrito.
<i>
Representa um texto em uma alternativa de voz ou o humor, 
ou pelo menos de qualidade diferente, como uma 
denominação taxonómica, um termo técnico, uma frase 
idiomática, um pensamento ou um nome do navio.
<b>
Representa um texto que a que chama a atençãopara fins 
utilitários. Ele não transmite importância extra e não implica 
uma voz alternativa.
<u>
Representa unarticulate annoatation não-textuais, como rotular 
o texto como sendo misspelt ou rotular um nome próprio no 
texto chinês.
<mark> Representa texto destacado para referência fins, que é por sua 
relevância em outro contexto.
<ruby> Representa o conteúdo a ser marcado com anotações de rubi , 
corridas curtas de texto apresentado ao lado do texto. Isso é 
muitas vezes usado em conjunto com idioma do Leste Asiático, 
29
onde as anotações funcionam como um guia para a pronúncia, 
como o japonês furigana.
<rt> Representa o texto de uma anotação ruby.
<rp>
Representa parêntese em torno de uma anotação ruby, usado 
para mostrar a anotação de forma alternada pelos 
navegadores que não suportam a exibição padrão para 
anotações.
<bdi> Representa o texto que deve ser isolado de seu entorno para 
formatação de texto bidirecional. Ele permite incorporar espaço 
de texto com uma direcionalidade diferente, ou desconhecido.
<bdo> Representa a direcionalidade de seus filhos, a fim de substituir 
explicitamente o algoritmo bidireccional Unicode.
<span>
Representa o texto sem nenhum significado específico. Isso 
tem que ser usado quando nenhum outro elemento do texto-
semântica transmite um significado adequado, o que, neste 
caso, é muitas vezes trazido por atributos globais, como classe 
, lang , ou dir.
<br> Representa uma quebra de linha.
<wbr>
Representa uma oportunidade de quebra de linha , que é um 
ponto de embrulho sugerido, a fim de melhorar a legibilidade 
do texto dividido em várias linhas.
Tabela 7 - Tag semânticas do HTML5
(FONTE: NETWORK et al., 2014)
5.1.5. Edições
A tabela 8 mostra a tags de edição do HTML5.
Elemento Descrição
<ins> Defines an addition to the document.
<del> Defines a removal from the document.
Tabela 8 - Tags de edição 
(FONTE: NETWORK et al., 2014)
5.1.6. Conteúdo embutido (nativo)
30
As tags a seguir na tabela 9 são responsáveis por executar muitas das 
aplicações nativas incorporadas ao HTML5.
Elemento Descrição
<img> Representa uma imagem.
<iframe> Representa um contexto de navegação aninhada , que é um 
documento HTML embutido.
<embed> Representa um ponto de integração para uma non_HTML, 
aplicação externa, muitas vezes ou conteúdo interativo.
<object>
Representa um recurso externo , que será tratado como uma 
imagem, um sub-documento HTML ou um recurso externo para ser 
processado por um plugin.
<param> Define os parâmetros para o uso por plugins invocadas por 
<object> elementos.
<video> Representa um vídeo , e seus arquivos de áudio e legendas 
associadas, com a interface necessária para jogar.
<audio> Representa um som , ou um fluxo de áudio.
<source> Permite aos autores especificar recursos de mídia alternativos para 
elementos de mídia, como <video> ou <audio>.
<track> Permite aos autores especificar cronometrado pista de texto para 
elementos de mídia, como <video> ou <audio>.
<canvas>
Representa uma área de bitmap que os scripts podem ser usados 
​​para renderizar gráficos, como gráficos, gráficos do jogo, todas as 
imagens visuais em tempo real.
<map> Em conjunto com <area> , define um mapa de imagem.
<area> Em conjunto com <map> , define um mapa de imagem.
<svg> Define um incorporado imagem vectorial.
<math> Define uma fórmula matemática.
Tabela 9 - Elementos embutidos do HTML5
(FONTE: NETWORK et al., 2014)
5.1.7. Tabulação de dados
31
A tabela 10 a seguir mostra os elementos de tabulação.
Elemento Descrição
<table> Representa dados com mais de uma dimensão.
<caption> Representa o título de uma tabela.
<colgroup>
Representa um conjunto de uma ou mais colunas de uma 
tabela.
<col> Representa uma coluna de uma tabela.
<tbody>
Representa o bloco de linhas que descreve os dados concretos 
de uma mesa.
<thead>
Representa o bloco de linhas que descreve os rótulos de 
colunas de uma tabela.
<tfoot>
Representa o bloco de linhas que descreve os resumos das 
colunas de uma tabela.
<tr> Representa uma linha de células de uma tabela.
<td> Representa uma célula de dados numa tabela.
<th> Representa uma célula de cabeçalho de uma tabela.
Tabela 10 - Tabulação do dados
(FONTE: NETWORK et al., 2014)
5.1.8. Formulários
As tags exibidas na tabela 11 fazem referencia a definições de formulários em 
HTML5.
Elemento Descrição
<from> Representa um formular , consistindo de controles, que podem 
ser submetidos a um servidor para processamento.
<fieldset> Representa um conjunto de controles.
<legend> Representa a legenda para um <fieldset>.
<label> Representa a legenda de um controle de formulário.
<Input> Representa um campo de dados digitados que permite ao 
usuário editar os dados.
32
<button> Representa um botão.
<select> Representa um controle que permite a seleção entre um 
conjunto de opções.
<DataList> Representa um conjunto de opções pré-definidas para outros 
controles
<Optgroup> Representa um conjunto de opções , logicamente agrupadas.
<option> Representa uma opção em um <select> elemento, ou uma 
sugestão de um <datalist> elemento.
<textarea> Representa um controle de edição de texto de múltiplas linhas.
<keygen> Representa um controle chave gerador par.
<output> Representa o resultado de um cálculo.
<progress> Representa o progresso realização de uma tarefa.
<meter> Representa um escalar de medição (ou um valor fracionário), 
dentro de um intervalo conhecido.
Tabela 11 - Formulários do HTML5
(FONTE: NETWORK et al., 2014)
5.1.9. Elementos interativos
A tabela 12 exibe os elementos interativos de HTML5 validos e inconformidade 
com o seu padrão.
Elemento Descrição
<details> Representa uma ferramenta a partir da qual o usuário pode obter 
informações ou controles adicionais.
<summary> Representa um resumo, caption, ou legenda para uma 
determinada <details>.
<command> Representa um comando que o usuário pode invocar.
<menu> Representa uma lista de comandos.
Tabela 12 - Elementos interativos
(FONTE: NETWORK et al., 2014)
5.2.Recursos
33
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 ao HTML5 tais 
recursos citados abaixo, trazendo assim melhor desempenho e menor índice de 
bugs e falhas.
3.2.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 exemplo de 
funcionalidade inseridas na linhas de códigos (SCHROEDE, 2012). 
Figura 1 - Tag de áudio padronizada pelo HTML5
(FONTE: http://www.w3schools.com/html/html5_audio.asp).
Figura 2 - Tag de vídeo padronizada pelo HTML5 
(FONTE: http://www.w3schools.com/html/html5_video.asp).
Adicionalmente com estas tags, podem ser utilizados atributos como autoplay 
(execução automática do conteúdo), controls (botões com exibição de controles 
play, pause, etc) e demais atributos existente (SCHROEDE, 2012). Pode ser feita 
também a customização das tags de controls por outros elementos HTML e por meio 
de Javascript podemos controlar propriedades como o PLAY, PAUSE, VOLUME e 
34
por CSS podemos criar o nosso próprio player, tecnologias essas incorporadas à 
linguagem do HTML5 (DOUGLAS, 2013). É sempre importante lembrar que existem 
diversos formatos de áudio e vídeo que se utilizam de muitos codec’s 
(Codificadores/Decodificadores) para sua leitura. Para áudio os formatos mais 
comuns sãooga, mp3 e wma, já para vídeo ogv, mp4 e wmv. A figura 3 apresenta 
uma reprodução de vídeo com o uso dos recursos apresentados anteriormente 
(SCHROEDE, 2012).
Figura 3 - Vídeo sendo reproduzido nativamente do HTML5
(FONTE: http://html5demos.com/video).
3.2.2. Animações gráficas
Na mesma linha dos vídeos, uma grande deficiência quando se trata de trabalho 
com desenhos é a falta de suporte para imagens vetoriais ou bitmaps. Web sites 
com animações, gráficos e grandes efeitos visuais são desenvolvidos geralmente 
em outras plataformas separadas que em sua maioria são o Flash ou Silverlight. 
Apesar de apresentar um excelente resultado, estas plataformas raramente agregam 
algum tipo de semântica ao seu conteúdo e possuem um consumo de hardware 
maior que o essencial, indo contra os princípios de levar a web e seu conteúdo para 
todos e em qualquer lugar (SCHROEDE, 2012). 
35
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, a figura 4 exibe animação testando a performance gráfica do computador 
do usuário utilizando a tecnologia canvas, a qual atua melhor no desempenho e 
utilização de recursos, já na figura 5 apresenta uma imagem do mapa mundi que foi 
desenvolvida para múltiplas plataformas em que foi empregada a tecnologia SVG 
que por sua vez trabalha melhor com o ajuste de resolução, para que não haja perda 
qualidade da imagem, ambas são desenvolvidas sobre os padrões de HTML5 
(ROGERIO, 2010).
36
Figura 4 - Teste de performance gráfica
(FONTE: http://www.webkit.org/demos/sticky-notes/)
Figura 5 - Mapa Mundi renderizado 
(FONTE: GRONER, 2013).
3.2.3. Armazenamento de dados
37
Nas aplicações complexas, principalmente as que utilizam AJAX (conjunto de 
tecnologias Javascript, DOM, CSS e XML) fica difícil manter o dados do usuário 
quando o botão voltar ou avançar dos navegadores é utilizado, isto porque o 
navegador foi projetado para navegar de uma página para outra e não para 
aplicações. O objeto history, que já existia em versões anteriores do HTML, foi 
incorporado com dois novos métodos na versão do HTML5: o pushState, registra 
uma nova entrada no seu histórico de sessão, mantendo o histórico e o 
replaceState, ele substituí a entrada do histórico de sessão atual pelos dados que você 
passa (SCHROEDE, 2012).
Em diversas situações do cotidiano dos usuários em que era preciso armazenar 
dados para que sejam utilizados de alguma maneira (seja para sessão no servidor, 
ou para necessidade do usuário) antes se usava Cookies (grupo de dados salvos 
com informações do usuário através dos cabeçalhos HTTP, usadas para criação de 
páginas customizada), porém, a complexidade para manipular e recuperar os dados 
tornou o seu uso complicado, pelo grande número de informações armazenadas que 
em alguns navegadores limitaram a quantidade de armazenamento dos cookies de 
no máximo 20 nomes de 4.096 bytes cada (SCHROEDE, 2012).
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 
(PILGRIM). 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), exemplificado em linguagem de programação na tabela 
13, 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, 
exemplificado em linguagem de programação na tabela 14. A W3C por padrão 
sugeriu que o armazenamento passasse a ser de 5 megabytes por origem (ROCHA, 
2011).
38
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
 }
else {
sessionStorage.clickcount = 1;
 }
document.getElementById("result").innerHTML="You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
Tabela 13 - Exemplo da Função SessionStorage 
(FONTE: W3SCHOOLS)
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
}
else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML="You have clicked the button " +
localStorage.clickcount + " time(s).";
Tabela 14 - Exemplo da Função LocalStorage
(FONTE: W3SCHOOLS)
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, exemplificado na figura 6 onde mostra a 
utilização do Banco de Dados Web SQL (SCHROEDE, 2012).
39
Figura 6 - Banco de dados Web SQL
(FONTE: http://www.webkit.org/demos/sticky-notes/).
3.2.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 é 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 (PILGRIM). 
Para acessar informações do cache, existe o objeto applicationCache ou 
AppCache (Cache da aplicação) , que permite ao desenvolvedor especificar quais 
arquivos devem ser armazenados em cache atualizando constantemente para que 
quando o usuário ficar sem conexão, possa usufruir da aplicação mesmo off-line. As 
aplicações web off-line trazem grandes vantagens que são maior velocidade, pois 
com os recursos armazenados em cache local o carregamento se torna mais 
40
eficiente e traz a redução de carga do servidor, pois uma vez carregado no cache o 
navegador só irá realizar download do que foi alterado (BIDELMAN, 2013).
3.2.5. Geolocalizaçã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, abaixo 
detalhadas (SCHROEDE, 2012). 
Geolocalização IP (Internet Protocol) através de métodos disponíveis consulta se 
a localização de determinado IP estasendo utilizado. Mas o serviço de localização 
via IP possui um mecanismo precisão com uma grande escala, a níveis de estado 
(OLIVEIRA, 2012).
Triangulação GPRS é (General Packet Radio Service) essa triangulação é feita 
através das torres de celulares próximas, que triangulam a sua posição, essa 
tecnologia consegue ser mais precisa que a via IP, pois a triangulação GPRS pode 
se obter a informação do bairro onde se encontra o usuário (OLIVEIRA, 2012).
O GPS é a tecnologia mais precisa quanto à localização, com apena uma 
margem de erro de 5 metros da posição atual do usuário (OLIVEIRA, 2012).
O desenvolver uma aplicação controle que se tem sobre a maneira utilizada, é o 
de solicitar “alta precisão” utilizando dos recursos existentes no aparelho do usuário, 
pois às vezes o dispositivo não tem suporte de algumas tecnologias, e para que tal 
aplicação tenha acesso a esses recursos, por padrão o HTML5 requer do usuário 
uma permissão para proceder com a aplicação, à figura 7 apresenta uma aplicação 
que se utiliza de Geolocalizacão IP (SCHROEDE, 2012).
41
Figura 7 - Recurso de geolocalização
(FONTE: http://jsfiddle.net/frontendbrasil/gS9ST/2/light/)
3.2.6. CSS 3
Outro ponto forte do HTML5 são as novas opções em CSS, que é 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 irá 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 15 - Comandos novos de CSS 3.
(FONTE: SCHROEDE, 2012, p. 35)
42
3.2.7. Web semântica 
A Web semântica se desenvolveu através da utilização de várias tecnologias, 
como: eXtensible Markup Language (XML), Resource Description Framework (RDF), 
arquitetura de metadados, ontologias, entre outras. Que com a criação e 
desenvolvimento do HTML5, foram criadas novas tags e conceito de microdata, 
entre outras API's (Application Programming Interface) que visam simplificar e 
facilitar o desenvolvimento (DEJALMA; WILLIAN).
A semântica trazida nesta versão do HTML faz com que a linguagem de 
máquina passa a tomar o formato da linguagem humano conhecida, fazendo com 
que a semântica do código aumente o seu poder de representação e significado, 
transcendendo e estabelece diretamente a maneira com que organizamos o 
conteúdo da web, facilitando o entendimento do código (DEJALMA; WILLIAN).
Os buscados existentes na internet são afetados diretamente, ampliando seus 
métodos de localização de informações e filtragem, estabelecendo maior relevância 
e hierarquia a respeito do conteúdo, realizando uma melhor seleção do conteúdo de 
maneira com que o usuário se satisfaça com a sua busca, a figura 8 abaixo 
demostra como são códigos sem e com semântica (DEJALMA; WILLIAN).
Figura 8 - Comparação sobre Web Semântica
(FONTE: http://riremorrer.com/uploads/artigos/59fe1f5bf5e0e128e28c7f9da842d68c.png)
Definido os elementos descritos abaixo de maneira simples e conexa: 
Header: define o cabeçalho. 
43
Nav: define o menu ou a navegação do site. 
Article: define uma parte da página que corresponde a formulários, textos e etc. 
Section: define uma seção do layout em um determinado elemento.
Aside: consiste em envolver informações que tem algo a ver com o conteúdo 
principal do site. Pode ser um menu lateral, um sidebar padrão com menu, banner, 
busca etc.
Footer: define o rodapé do elemento ou do layout.
3.2.7. JavaScript 
O Javascript é a aplicação que traz interatividade as páginas web, realizando 
toda a manipulação dos dados transformando a web no que nos conhecemos hoje, 
pois ela trabalha ao lado do usuário, interpretando e realizando tarefas que são 
executas nos navegadores. Sendo possível definir, alterar e controlar de forma 
dinâmica a apresentação de um documento HTML e também manipular os aspectos 
relacionados à cor de fundo, de textos e de links, ou mesmo interferir no 
posicionamento dos elementos HTML de um documento tudo em uma função 
Javascript. É possível realizar alterações em folha de estilos associada ao 
documento criando novas regras CSS ou anulando regras existentes com o 
Javascript (SILVA, 2010; FLATSCHART, 2011).
O Javascript pode realizar varias manipulações nos navegadores, em diversos 
aspectos como abrir janelas pop-up, exibir mensagem ao usuário, alterar dimensões 
do navegador, ocultar barras de status, retirar e acrescentar menus e ate mesmo 
abrir e fechar janelas do seu navegador. Como toda linguagem o JavaScript também 
sofre mudanças e alterações conforme indica a tabela a baixo (SILVA, 2010; 
FLATSCHART, 2011). 
Versão Implementação Mês/ano
JavaScript 1.0 Netscape 2.0 Março 1996
JavaScript 1.1 Netscape 3.0 Agosto 1996
JavaScript 1.2 Netscape 4.0 e 4.05 Junho 1997
JavaScript 1.3 Netscape 4.06 e 4.07x Outubro 1998
44
JavaScript 1.4 Servidores Netscape -
JavaScript 1.5 Netscape 6.0 – Firefox 
1.0 – Opera 6.0 a 9.0
Novembro 2000
JavaScript 1.6 Firefox 1.5 – Safari 3.0 e 
3.1
Novembro 2005
JavaScript 1.7 Firefox 2.0 – Safari 3.2 e 
4.0 – Chrome 1.0
Outubro 2006
JavaScript 1.8 Firefox 3.0 Junho 2008
JavaScript 1.8.1 Firefox 3.5 2008
JavaScript 1.9 Firefox 4.0 2009
JavaScript 1.0 Internet Explorer 3 Agosto 1996
JavaScript 2.0 Internet Explorer 3 – 
Windows IIS 3
Janeiro 1997
JavaScript 3.0 Internet Explorer 4 Outubro 1997
JavaScript 4.0 Visual Studio 6.0 -
JavaScript 5.0 Internet Explorer 5 Março 1999
JavaScript 5.1 Internet Explorer 5.01 -
JavaScript 5.5 Internet Explorer 5.5 Julho 2000
JavaScript 5.6 Internet Explorer 6 Outubro 2001
JavaScript 5.7 Internet Explorer 7 Novembro 2006
JavaScript 5.8 Internet Explorer 8 Março 2009
ECMA-262 v1 Navegadores versão 4 1 versão 4 1998
ECMA-262 v2 Versão de testes 1998
ECMA-262 v3 Navegadores versão 6 1999
ECMA-262 v4 Navegadores versão 6+ 2002
ECMA-262 v5 Mozilla 2009
ECMA-262,v6 Mozilla 2014 official publication 
process starting in March 
2015.
Tabela 16 - Versões do JavaScript
(FONTE: MAURÍCIO, 2010, p .28)
45
3.2.8. Microdata 
A microdata é um conceito semelhante aos microformats e RDFa, ela esta 
presente no HTML5, e tem a capacidade de estender as potencialidades semânticas 
do HTML, as informações representadas através de microdata utilizam elementos 
pertencentes a um vocabulário específico que deve ser referenciado no documento 
HTML. O vocabulário é a especificação das propriedades utilizadas e qual tipo de 
informação elas representam de maneira clara (PAGANI, 2010; FLATSCHART, 
2011).
Atualmente os vocabulários de microdata podem ser encontrados no site, 
contendo especificações para descrever eventos, empresas, pessoa, produto e até 
breadcrumbs (caminhos de navegação de um site). No site podem ser encontradas 
as propriedades referentes a cada especificação e uma descrição de finalidade e 
utilização dos mesmos (PAGANI, 2010; FLATSCHART, 2011).
Ao utilizar este tipo de padrão para descrição de dados, você possibilita que 
mecanismos de busca entendam estas informações dentro do contexto semântico 
definido e facilita a outras aplicações reconhecer e importar estes dados de seu site. 
E isto não é uma projeção para o futuro, o mecanismo de busca do Google já 
reconhece microdata e possui artigos no Help Center do Webmasters Tools, 
portanto, já pode ser utilizado (PAGANI, 2010; FLATSCHART, 2011).
Os primeiros passos para utilizar a microdata no HTML5, é determinar uma tag 
que seráo escopo da microdata, ou seja, será o elemento que irá conter as 
informações determinadas. Para isso, essa tag deve possuir a propriedade 
itemscope que define um item de dados e também a propriedade itemtype que 
define de o tipo da entidade aquele item pertence, com o valor indicando o 
vocabulário da microdata a ser utilizado para que o mecanismo de busca saiba que 
tipo de informação irá encontrar dentro das tags deste elemento (PAGANI, 2010; 
FLATSCHART, 2011).
As tags que estarão dentro desta div devem conter a propriedade itemprop para 
identificar qual elemento (propriedade) aquela tag estará representando. No caso do 
46
vocabulário Organization temos elementos como name (nome da empresa), tel 
(telefone), geo (coordenadas geográficas como latitude e longitude), entre outras, 
também sendo possível adicionar microdata aninhado, sendo assim, outro 
vocabulário do microdata para detalhar alguma informação. Exemplificados abaixo 
na figura 9, onde foram utilizadas as propriedades do vocabulário Organization, e o 
modo aninhado o microdata Address, especificando detalhes do endereço (PAGANI, 
2010; FLATSCHART, 2011).
Figura 9 - Linhas de código usando a Microdata
(FONTE: PAGANI, 2010)
47
6. TRABALHOS CORRELATOS 
O presente capítulo apresentará um breve relato sobre trabalho que foram 
realizados na mesma linha de pesquisa, apresentando métodos, recursos, e 
resultados obtidos na linha de conhecimento sobre desenvolvimento Web com uso 
do HTML5.
6.1.HTML5, Um novo desenvolvimento para a web
Segundo Schroede (2012) trabalho aponta as novidades existentes na 
linguagem para a construção da internet, contidas no HTML5 apontando o seu uso 
em diversos lugares, e acima de tudo deixando a dependência de aplicativos de 
terceiros.
4.1.1. Objetivos
Os objetivos do trabalho são apresentados sobre a falta de padronização da web 
nas antigas versões existentes anteriormente à criação do HTML5, onde era suprida 
por meio de plug-ins e outras aplicações de terceiros que não traziam em sua 
programação um padrão bem definido, perturbando assim os desenvolvedores de 
navegadores, que com o HTML5 traz suporte a áudio e vídeo, desenhos e 
animações, armazenamento de dados, aplicações off-line, geolocalizacão e CSS3 
com a incorporação de algumas tecnologias.
4.1.2. Conclusão
Ao término do trabalho Schroede (2012) conclui que os avanços trazidos com o 
HTML5 são promissores e apontaram um novo rumo para a Web, mas que seu 
processo ainda é um pouco lento pelo fato da migração dos navegadores se 
adaptarem aos novos recursos existentes, pois antes não havia nem um tipo de 
48
padrão, e, com a criação do HTML5 os padrões foram criados e sem sombra de 
duvida, sua criação é rica em recursos e aplicações que melhor atendem a 
mobilidade nas plataformas de desenvolvimento, utilizando as aplicações em 
diversos dispositivos que tem acesso à internet. 
6.2. O Impacto do HTML5 no desenvolvimento para a internet 
A linguagem HTML5 teve grande impacto no desenvolvimento web, desde a sua 
criação, alterando substantivamente os cenários da web por volta de 2009, pois 
antes cada grupo seguia um padrão de desenvolvimento o que dificultava muito no 
desenvolvimento web (DIEGO).
4.2.1. Objetivo 
O trabalho apresenta com objetivos principais realizar uma revisão bibliográfica, 
onde conta um pouco da história sobre o HTML5 e aponta algumas das 
funcionalidades que existente na linguagem, fazendo comparações e analise de 
outra linguagem de desenvolvimento web.
4.2.2. Conclusão 
Segundo Diego, a migração para o novo padrão de linguagem HTML5 deve 
ocorrer gradativamente, nem todos os desenvolvedores conseguem se atualizar e 
nem todos os usuários aceitam futuros transtornos com a troca de navegadores, 
mais que muito navegadores já encontram se com nova tecnologia. Também existe 
a questão das novas funcionalidades que devem ser bem analisadas para que os 
usuários que ainda não possuem essa nova tecnologia incorporada ao seu 
navegador, tenha problemas.
49
50
7. IMPLEMENTAÇÃO
Neste Capítulo serão apresentados e descritos todos os principais códigos da 
implementação realizada contando como foi sua utilização e sua parte no código, 
analisando seus resultados. 
7.1. A organização dos arquivos
A figura 10 a baixo mostra como esta dividido as estruturas dos arquivos HTML, 
CSS, JavaScript e as imagens e mídias usadas na implementação. 
Figura 10 - Mapa dos arquivos
7.2.Pagina principal
Os subitens abaixo irão mostrar em detalhes toda a programação da página 
principal apontando as funções principais, e ao final mostrando o resultado obtido 
com a implementação.
5.2.1. HTML
A figura 11 mostra a codificação em HTML da tela principal.
51
Figura 11 – Arquivo HTML da pagina principal
Na linha 1 é criado a raiz de todo documento, de onde todos os outros elementos 
devem descender, na linha 2 é criado a cabeçalho do HTML onde irá ser inserido 
todos os metadados, incluindo suas definições de CSS, linha 3 é determinado o 
titulo da página, na linha 4 é determinado o charset que por sua vez quando 
determinado é responsável pela interpretação de palavras e suas acentuações, na 
linha 5 é feito a chamada do arquivo CSS para modelagem desta página, que será 
exibido na figura 11 abaixo, nas linhas de 9 a 13 são criados botões que faze ligação 
com as demais abas que serão exibidas nos próximos itens.
5.2.2. CSS
Abaixo na figura 12 esta a codificação em CSS da pagina principal.
Figura 12 - Arquivo CSS da pagina principal
52
As linhas 1 a 8 correspondem a modelagem do corpo do HTML, então que nas 
linhas 10 a 31 fazem a configuração do cabeçalho, já na linha 33 a 44 é realizada a 
modelagem dos botões que a pagina contem, exibida na figura 13 onde se 
apresenta o resultado dos dois arquivos trabalhando em conjunto.
5.2.3. Resultado
A figura 13 abaixo é o resultando obtido através do trabalho em conjunto dos 
dois arquivos HTML e CSS. 
Figura 13 - Pagina principal da implementação
7.3. Animação 
 
Os subitens abaixo irão mostrar em detalhes toda a programação da pagina que 
contem a animação feita em canvas apontando as funções principais, e ao final 
mostrando o resultado obtido com a implementação desta função.
5.3.1. HTML 
A figura 14 mostra a codificação em HTML da animação.
53
Figura 14 - Arquivo HTML da animação
Na linha 6 é setado o script da animação onde está toda a manipulação dos 
dados, na linha 8 o arquivo JavaScript é iniciado e na linha 11 a tag vídeo é utilizada 
para reproduzir o vídeo da animação, onde é definido o id do arquivo de vídeo que 
será utilizado pela aplicação JavaScript na manipulação da animação, na mesma 
linha é definidos também a o auto play do vídeo e a repetição, já nas linha 12 e 13 é 
feito indicado o caminha do vídeo nas pastas, nas linhas 15 e 19 são passados 
parâmetros para que o arquivo JavaScript possa realizar a animação.
5.3.2. JavaScript
As figuras 15, 16 e 17 mostram partes da codificação que faz a manipulação 
da animação via script.
54
Figura 15 - 1º Parte do Javascript
Nas linhas 1 a 11 são criadas variáveis, nas linhas 13 a 20 esta sendo feita a 
inicialização das instruções, e nas linhas 21 a 40 estão executando uma função para 
manipulação dos parâmetros do vídeo.
Figura 16 - 2º Parte do Javascript
As linhas 117 a 157 realizam funções de particionar o vídeo com se fosse 
explosões, espalhando os pixels pela tela do usuário.
55
Figura 17 - 3º Parte do Javascript
Nas linhas 159 a 197 é realizado funções de restaurações dos pixels 
espalhados, ate a restauração completa do vídeo.
5.3.3. CSS
A figura 18 exibe o arquivo CSS que modela a aplicação da animação.
Figura 18 – Arquivo CSS da animação 
56
5.3.4. Resultado 
A figura 19 mostra a programação da animação sendo executada.Figura 19 - Animação em Canvas
7.4. Musicas 
O subitem abaixo irá mostra em detalhes toda a programação da pagina que 
contem uma musica que será executada com o player nativo do HTML5, e ao final 
mostrando o resultado obtido com a implementação dessa função.
5.4.1. HTML
A figura 20 apresenta a implementação da musica com player nativo do HTML5.
Figura 20 - Arquivo HTML da musica
57
A linha 10 faz a abertura da tag <audio> e determina também o diretório onde o 
arquivo da musica se encontra, determinando a visibilidade do controlador, o auto 
play da musica e a repetição, e na linha 15 a 18 é utilizado a tag button com 
algumas funções de controle inseridas realizar a manipulação do arquivo de musica, 
como altera volume, dar play ou stop.
5.4.2. Resultado
A imagem 21 exibe a musica sendo executada somente com o player do 
HTML5. 
Figura 21 – Musica sendo executada através da função do HTML5
7.5. Vídeo 
O subitem abaixo irá mostra em detalhes toda a programação da página que 
contem um vídeo que será executado com o codec nativo do HTML5, e ao final 
mostrando o resultado obtido com a implementação dessa função.
7.5.1. HTML
58
A figura 22 apresenta a implementação do vídeo com o codec nativo do HTML5.
Figura 22 – Arquivo HTML do vídeo
A linha 9 é realizada a abertura da tag <video> determinando o comprimento e a 
altura com que o vídeo será exibido na tela, na mesma linha é inserido a visibilidade 
do controlador e o auto play, já na linha 11 é definido o diretório do arquivos em 
vídeo que se localiza na pasta Mídias, sendo fechado a tag <video> na linha 12.
5.5.2. Resultado
A figura 23 abaixo apresenta a execução de um vídeo com o codec nativo do 
HTML.
Figura 23 – Vídeo sendo executada através da função do HTML5
59
7.6. Geolocalizacão
O subitens abaixo iram mostrar em detalhes toda a programação da página que 
contém a aplicação de Geolocalizacão nos padrões do HTML5, e ao final mostrando 
o resultado obtido com a implementação dessa função.
7.6.1. HTML
A figura 24 apresenta a implementação da aplicação de Geolocalizacão do 
padrão HTML5.
Figura 24 - Arquivo HTML da aplicação de geolocalizacão
As linhas 6 e 7 fazendo a ligação com as APIs de geolocalizacão 
disponibilizadas pela google, na linha 8 é feito a ligação com o arquivo JavaScript 
que será exibido abaixo no próximo subitem, já na linha 10 é feito a inicialização do 
arquivo JavaScript, onde começa a ser feita a busca da localização do usuário que 
será exibida por conta das linhas 12 a 14, no qual irá mostra a posição do usuário no 
mapa.
7.6.2. JavaScript
 A figura 25 exibirá a programação via script para obtenção da coordenada do 
usuário.
60
Figura 25 - Javascript da programação de geolocalizacão
As linhas 1 e 2 instanciam as variáveis, já nas linhas 4 a 10 é feito a localização 
do usuário, e nas linhas 12 a 37 feito a localização do usuário obtendo sua latitude e 
sua longitude para realizar a marcação de um ponto no mapa, e as linhas 39 a 42 é 
para tratamento de erro na obtenção da localização.
5.6.3. Resultado
A figura 26 mostra o mapa com um ponto vermelho marcado, o qual indica a 
localização atual do usuário que se utilizada da aplicação.
61
Figura 26 - Mapa com a posição do usuário marcada
7.7. Aplicação Off-line
O subitens abaixo iram mostrar em detalhes toda a programação da página que 
contém a aplicação Off-line nos padrões do HTML5, e ao final mostrando o resultado 
obtido com a implementação dessa função.
7.7.1. HTML
A figura 27 apresenta a implementação da aplicação Off-line no padrão HTML5.
Figura 27 - Arquivo HTML da aplicação off-line
62
Na linha 1 com a abertura do HTML também é iniciado o arquivo MANIFEST que 
armazena o cache da pagina para o acesso off-line, e na linha 9 junto com o corpo 
da pagina é iniciado a aplicação em JavaScript, que ira realizar as tarefas de 
criação, alteração e exclusão no Banco de Dados SQLlite do próprio navegador que 
estão dispostos nas linhas 24 a 26 respectivamente, e os dados coletados são 
extraído das linhas 21 a 22. 
5.7.2. JavaScript
As figuras 28, 29, 30 e 31 apresentaram a programação via script das funções 
para manipulação das informações no banco do dados SQLlite.
Figura 28 - Função de verificação e criação do banco de dados
63
Nas linhas 3 a 23 são responsáveis por fazer a verificação do banco de dados 
para que nas linhas 25 a 31 o banco de dados seja criado com sucesso, e nas linhas 
33 a 45 realize criação das tabelas do banco.
Figura 29 - Função de alteração
Entre as linhas 57 a 85 é realizado o comando de alteração de itens constantes 
no banco, que são selecionados pelo usuário.
Figura 30 - Função de exclusão
64
Nas linhas 86 a 109 são responsáveis pela exclusão de itens constantes no 
banco de dados, que são selecionados pelo usuário. 
Figura 31 - Função de inclusão
Nas linhas 111 a 137 são responsáveis pela inclusão de itens no banco de 
dados, que são inseridos pelo usuário. 
Figura 32 - Função de seleção de itens
65
As linhas 139 a 161 permite o usuário selecionar os itens já inclusos no banco 
de dados, para que possa ser realizar as funções de alteração ou exclusão se assim 
o usuário desejar.
5.7.3. Resultado 
A figura 33 exibe aplicação off-line utilizando o banco de dados SQLlite como 
alguns itens já inclusos.
Figura 33 - Aplicação Off-line
66
CONCLUSÃO
A pesquisa com a linguagem HTML5 nos conceitos de padrões que antes não 
existentes nas versões anteriores, que se faziam fundamentais na qualidade da 
construção de uma web mais limpa e padronizada, mas que demoro um pouco para 
virar uma realizada, apenas pelo simples fato da competitividade entre a W3C e a 
WHATWG, que por fim, entraram em um consenso e eis que surge o HTML5 para 
satisfação e salvação da WEB.
O HTML5 atualmente em 2014 se tornou um linguagem padrão por conta de sua 
semântica bem organizada e dos recursos oferecido trazendo maior obtenção de 
resultados satisfatórios.
Conclui-se que o HTML5 é uma linguagem prospera e que hoje já ocupa quase 
100% do mercado, mas que falta algumas melhorias a serem implantadas quanto ao 
alguns recursos que depende de aplicações de terceiro, mas que em breve devem 
ser solucionadas. 
67
REFERENCIAS
BIDELMAN, Eric. Guia Básico sobre o uso do Cache do Aplicativo. Disponível 
em: <http://www.html5rocks.com/pt/tutorials/appcache/beginner/>. Acesso em: 15 
abr. 2014.
DJALMA G. C. J, WILLIAN B. M; Html5 e Web semântica, A web com significado. 
Universidade Paranaense, Paranavaí-PR. on-line. 
DOUGLAS, Allan. HTML5 - As tags AUDIO e VIDEO. Disponível em: 
<http://www.devmedia.com.br/html5-as-tags-audio-e-video/26018>. Acesso em: 25 
maio 2014.
 EIS, Diego; VILELA, Luis; ZITZMANN, Tilman. HTML. Disponível em: 
<http://tableless.com.br/html5/>. Acesso em: 27 maio 2014.
FLATSCHART, Fábio. HTML5: Embarque imediato. 3. ed. Rio de Janeiro: Brasport 
Livros e Multimidia Ltda, 2011. 230 p. (Web conceitos & ferramentas).
FERREIRA, Diego Eis Elcio. HTML5 e CSS3 com farinha e pimenta. 2012. 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 mar. 2014.
GRONER, Loiane. Exemplo Ext JS 4: Mapa Múndi em SVG. Disponível em: 
<http://www.loiane.com/2013/12/exemplo-ext-js-4-mapa-mundi-em-svg/>. Acesso 
em: 27 maio 2014.
NETWORK, Mozilla Developer et al. Lista de elementos do HTML5. 2014. 
Disponível em: <https://developer.mozilla.org/pt-
BR/docs/Web/HTML/HTML5/HTML5_element_ list>. Acesso em: 31 out. 2014.
PAGANI, Talita. Introdução a Microdata no HTML5. 2010. Disponível em: 
<http://tableless.com.br/introducao-a-microdata-no-html5/#disqus_thread>. Acesso 
em: 27 out. 2014.
68
PILGRIM, Mark. HTML5: Up and Running: Dive into the Futureof Web 
Development. United States Of America: O'reilly Media, 2010. 222 p. Disponível em: 
<http://prodeveloper.ucoz.ru/_ld/0/3_Mark_Pilgrim-HT.pdf>. Acesso em: 31 out. 
2014.
PILGRIM, Mark. DIVE INTO HTML5. Disponível em: 
<http://diveintohtml5.com.br/index.html>. Acesso em: 20 abr. 2014.
ROCHA, Zeno. HTML5 - Local Storage. Disponível em: 
<http://zenorocha.com/html5-local-storage/>. Acesso em: 27 maio 2014. 
ROGÉRIO, Pedro. SVG vs Canvas. Disponível em: 
<http://www.pinceladasdaweb.com.br/blog/2010/09/01/svg-vs-canvas/>. Acesso em: 
25 maio 2014.
SCHROEDER, Ricardo. Caminhos: HTML5, Um novo desenvolvimento para a 
web. 2012. 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 set. 2012. 
SILVA, Maurício Samy. JavaScript: Guia do Programador. São Paulo: Rubens 
Prates, 2010. 64 p. Disponível em: 
<https://www.novatec.com.br/livros/javascriptguia/capitulo9788575222485.pdf>. 
Acesso em: 25 out. 2014.
W3SCHOOLS. HTML5. Disponível em: <http://www.w3schools.com/html/>. Acesso 
em: 24 maio 2014.
WIX. A História Visual do HTML5. Disponível em: 
<http://pt.wix.com/blog/2012/08/a-historia-visual-do-html5/>. Acesso em: 31 out. 
2014.