HTML5 e suas faces – Parte 1: Uma rápida abordagem

Escrito por

Publicado em: 3 de setembro de 2014 - Atualizado em: 24 de fevereiro de 2019

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

html5 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.

Sou um Desenvolvedor front-end na Agência Assoweb, gosto de filmes, séries, códigos, música e cultura Geek em geral.