Início » Padrões de Projeto para Sites de Internet » O HTML5 e a Padronização da Internet

O HTML5 e a Padronização da Internet

1. História

Desde 1999 o desenvolvimento do HTML ficou estagnado na versão 4, enquanto a W3C se preocupou com outros aspectos da Web , como por exemplo o XHTML e os desenvolvedores em otimizar o trabalho com essas outras ferramentas.

Porém tanto empresas quanto desenvolvedores perceberam que havia a necessidade de uma transformação na maneira com que estavam sendo trabalhadas as páginas da web porque ela cresceu de uma forma assombrosa e não existia um padrão de trabalho e exibição de suas páginas. Foi então que surgiu a ideia do HTML5.

O HTML5 uma união de vários aspectos encontrados tanto nas versões anteriores quanto de propostas introduzidas pelos navegadores e empresas como o Opera Software(o Opera Browser foi o pioneiro no uso do HTML5), como forma de aperfeiçoar e intensificar a experiência Web.

O HTML5 tem como base para o seu funcionamento a definição da Web Semântica, que propõe uma linguagem escrita – neste caso de marcação- que seja de fácil compreensão tanto do ser humano quanto da máquina já que a mesma atribui um significado a alguma característica que é interpretada tanto pelo usuário quanto pela máquina da mesma forma. Como descrito pela W3C a Web Semântica é a evolução da já muito conhecida “Web de Documentos” se tornando assim a “Web de Dados” onde as páginas possuem características que podem ser utilizadas para diversos fins sem necessariamente estar presas a um documento estático presentes no servidor.

Sendo assim as páginas deixam de ser um sistema fechado para funcionar como parte de um todo. E para que isso seja possível as páginas devem se adequar a um padrão definido, este padrão que foi um acordo definido pelas maiores empresas da área e homologado pela W3C,o órgão regulador da Internet. Esse padrão definiu diversas regras que fizeram com que muitas funções das versões anteriores do HTML fossem totalmente retiradas ou somente substituídas e surgissem novas funções para facilitar o trabalho e manipulação das páginas de web.

Uma das mudanças mais significativas é a dissociação do design da página do código HTML. As folhas de estilo(CSS) para a criação dos padrões de design da página já eram utilizados, mas existiam ainda alguns problemas com interpretação dos estilos que ocasionavam transtorno para os desenvolvedores. Com o HTML 5 as páginas agora para muitas funções necessitam das folhas de estilo, pois muitas das tags relacionadas à formatação de objetos da página não existem mais.

Outro ponto relevante na forma de manipular o design do HTML 5 foi a criação dos modelos de estrutura inexistentes nas versões anteriores e que funcionam em detrimento das funções de criação de bloco de página.

Algumas das novas tags presentes no HTML 5 servem exatamente para este propósito são as tags de estrutura que serão discutidas adiante.

2. Novidades

Algumas das novidades presentes no HTML 5 que facilitarão a vida do desenvolvedor e dos mecanismos de busca e indexação :

2.1.Estrutura básica

A estrutura básica do código HTML continua praticamente inalterada contando com apenas alguns pontos em que houve uma redução nas declarações são elas:

2.1.1.Doctype :

Basta indicar na primeira linha do documento o tipo de documento desta forma :

<!DOCTYPE html>

2.1.2.Charset:

A metatag charset sofreu uma diminuição significativa em sua declaração bastando somente indicar a tabela de caracteres a ser usada:

<meta charset=”utf-8”>

2.2.Novas ferramentas

2.2.1.Canvas

A tag canvas serve para introduzir algumas funções de edição de imagem em bitmap que podem ser utilizadas através de APIs ou do Javascript.

2.2.2.Vídeo e áudio

Diferente das versões anteriores, o HTML 5 pode inserir um objeto de vídeo ou áudio sem importar nenhuma API proprietária substituindo neste caso a tag embed. Para importar a API basta somente utilizar a nova tag video ou a tag audio , estas que possuem propriedades e funcionamento similar a já conhecida tag img.

2.2.3.Geolocalização

Com essa ferramenta que é uma API é possível descobrir de que localidade o usuário está acessando o conteúdo da página da Web, sendo possível assim a criação de conteúdos personalizados e específicos para a região do usuário.

2.2.4.Caching de aplicações

Hoje em dia é cada vez mais importante os aplicativos baseados na web acessem conteúdos off-line. Mesmo que os navegadores possuam ferramentas de cache elas não são eficientes. O HTML5 pretende acabar com esses inconvenientes.

As principais vantagens para o usuário são :

  • O acesso as páginas da internet off-line;

  • Quando conectado as páginas carregam muito mais rapidamente pois o navegador necessitará somente fazer o download dos recursos que sofrerem alteração .

2.2.5.Banco de Dados

Uso incomum entre os não desenvolvedores, os bancos de dados são ferramentas muito úteis para armazenar dados do usuário evitando no caso de páginas da web o uso constante de cookies. O HTML5 introduziu em sua estrutura a API Web SQL Databases.

2.2.6.Elementos de Estrutura

Como citado no início do artigo novas tags para auxilar na organização das páginas foram criadas para facilitar não só na organização e padronização como também auxiliar as ferramentas de busca a encontrar as informações pertinentes no site.

Elas são uma evolução da tag <div> e cada uma serve como um bloco separado para página são elas:

<header>,<footer>,<article>,<aside>,<nav> e <section>.

Na imagem a seguir podemos perceber as diferenças entre a criação da estrutura de uma página de HTML de versões anteriores e com o novo HTML5.

imagem retirada do site (http://www.hemersonvianna.com.br/desenvolvimento/html5/html5-a-revolucao-da-linguagem-de-estruturacao/ em 07 de março de 2013 às 13:07)

3.HTML 5 x Browsers

Até o momento nenhum navegador do mercado possui suporte total para as novas ferramentas presentes no HTML5. Porém o Google, a Mozilla Foundation, a Opera Software, entre outras empresas do mercado caminham de forma razoável em direção à total funcionalidade do HTML5 em seus navegadores. É importante salientar que todos os navegadores presentes no mercado devem se adequar ao HTML5 para que as páginas funcionem da mesma forma em todas as plataformas e browsers já que esta é a principal proposta da W3C.

No site www.html5test.com é possível visualizar todas as ferramentas suportadas pelo browser utilizado para acessá-lo. O site atribui uma nota com base nas ferramentas suportadas. O browser com a melhor nota é o Maxthon 4.0 e o browser beta com melhor pontuação é o Google Chrome Canary.A última versão do Internet Explorer (versão 10 para o Windows 8) da Microsoft pontua na sétima posição atrás de todos os outros navegadores populares do mercado.

4. Sites HTML5

No site é possível http://101besthtml5sites.com/encontrar muitos sites criados em HTML5 mostrando assim as diversas novidades nele presentes.

A W3C possui um site oficial dedicado ao HTML5 (http://www.w3schools.com/html/html5_intro.asp) onde mantém atualizações periódicas sobre o HTML5,além de auxiliar os interessados em trabalhar com ele.

Referências

http://www.tecmundo.com.br/navegador/2254-o-que-e-html-5-.htm?utm_source=outbrain&utm_medium=recomendados&utm_campaign=outbrain=obinsite

http://www.tecmundo.com.br/flash/4587-quais-as-vantagens-do-html5-para-o-usuario-comum-.htm?utm_source=outbrain&utm_medium=recomendados&utm_campaign=outbrain=obinsite

http://tableless.com.br/html5/?chapter=3

http://pt.wikipedia.org/wiki/HTML5

http://gestaoemti.com.br/geolocalizacao-com-html5/

http://www.html5rocks.com/pt/tutorials/appcache/beginner/

http://elemarjr.net/2010/10/19/html-5-parte-6-armazendando-dados-com-web-sql-databases/

http://channel9.msdn.com/posts/HTML5-Estrutura-bsica-DOCTYPE-e-Charsets

http://vinteum.com/html5-doctype/

http://blog.criarideia.com/estrutura-basica-do-html5.html

http://danielcorrea.me/blog/37-novos-elementos-de-marcacao-do-html5.html

http://www.infowester.com/introhtml5.php

http://www.w3schools.com/html/html5_intro.asp

http://www.hemersonvianna.com.br/desenvolvimento/html5/html5-a-revolucao-da-linguagem-de-estruturacao/

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

w

Conectando a %s