Hoje em dia, para qualquer desenvolvedor front-end o HTML5 é algo que faz parte da sua vida assim como uma boa xícara de café.
Diferentemente do que a grande maioria dos desenvolvedores pensam, podemos aplica-lo em diversas situações, o que nos leva a crer que ele vem para extrapolar as barreiras da web permitindo a criação de apps, jogos, sistemas operacionais, desenvolvimento de animações, scripts de localização do usuário (Geolocation), acesso a conteúdo offline atualizado e uma infinidade de recursos para a web.
Uma rápida abordagem do HTML5
Vamos iniciar nesse primeiro post a abordagem das várias faces dessa nova versão, pra você que esta iniciando na área é interessante entender algumas mudanças do HTML5 em relação à sua versão anterior.
Apenas para alinharmos as ideias, o HTML5 é a versão mais recente que veio para substituir o HTML4, desenvolvido numa parceria entre a W3C e a WHATWG.
Seu principal objetivo foi criar e atualizar as especificações do HTML4 gerando também maior otimização para o desenvolvimento e atendendo as demandas dos novos dispositivos. Dentro dessa ideia algumas tags foram atualizadas e outras foram criadas, buscando melhorar a semântica da linguagem. O fato é que a muito o HTML era atualizado mas poucas eram as contribuições para corrigir essa carência que já vinha desde que o Roberto Baggio perdeu o pênalti na copa de 94.
Devemos ter em mente ainda que o HTML5 nos proporciona uma interação e compatibilidade muito mais poderosa, principalmente quando o utilizamos com seus parceiros: CSS3 e Java Script.
Bom Já começamos com uma mudança muito interessante:
DOCTYPE
Trata-se de uma instrução para que o navegador saiba a especificação de código que será utilizada, através do DTD (definição de tipo de documento) traduzindo para o browser a forma como tudo será renderizado.
Anteriormente, no HTML4, fazíamos assim:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
No HTML 5 não há necessidade de referenciar o DTD , isso hoje fica a cargo do Browser. Vejamos então como fica a referencia do DOCTYPE no HTML5:
<!DOCTYPE html>
Simples não?
Aplicações Offline
Outra novidade interessante supimpa é o recurso de aplicação offline do HTML5. Tudo isso é feito com o uso de um arquivo do tipo manifest. Calma! não se assuste, é muito simples. Para que o navegador reconheça as aplicações offline devera inserida uma tag manifest dentro do seu, conforme o exemplo:
<html manifest="/cache.manifest">
Esse arquivo contem uma lista de URLs com arquivos do tipo HTML , CSS , JavaScript, imagens ou qualquer outro tipo de recurso que deverá ser renderizada pelo browser para que possam ser reconhecidos, identificados e inseridos no cache para que uma aplicação funcione off-line. Ao manter o cache deles localmente, os arquivos locais são atualizados à medida que são alterados, de forma sincronizada. Quando o usuário sentir a necessidade de acessar esses arquivos, os mesmos estarão atualizados de acordo a ultima versão online. Aproveitando deixo aqui um simples do arquivo manifest, ele não possui cabeçalho, e nesse exemplo lista poucos recursos:
CACHE MANIFEST /clock.css /clock.js /clock-face.jpg
Geolocation
Aqui podemos ver uma das funcionalidades interessantes proporcionadas pelo HTML5 em conjunto com o JavaScript.
Através do script abaixo como exemplo você consegue obter a localização do usuário com coordenadas de latitude e longitude.