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

Escrito por

Publicado em: 3 de setembro de 2014 - Atualizado em: 17 de novembro de 2015

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.

Vamos entender um pouco a lógica acima?

A função getLocation() faz a verificação se o Geolocation é suportado pelo browser.

Atendendo à condição, executa-se o método getCurrentPosition() que irá pegar e exibir as coordenadas geográficas com base no seu IP por meio da função showPosition(). Caso contrário, exibi uma mensagem de incompatibilidade ao usuário. 

Tag <Video>

html5 geolocation

Um dos grandes avanços sem dúvida é a tag <video>.

Anteriormente utilizávamos a combinação da tag <object> com a tag <embed>, o que gerava muitos problemas, pois os plugins que utilizavam flash eram muito inconsistentes. Veja como era:

<object width="426" height="240">
 <param name="movie" value="http://www.youtube.com/v/1N_p5qMnVVE"></param>
 <param name="allowFullScreen" value="true"></param>
 <param name="allowscriptaccess" value="always"></param>
 <embed src="http://www.youtube.com/v/1N_p5qMnVVE"
   type="application/x-shockwave-flash"
   allowscriptaccess="always"
   allowfullscreen="true"
   width="426"
   height="240">
 </embed>
</object>

Mas isso acabou! Com o HTML5 é necessário um código melhor e livre de plugins para executar os videos através da tag <video>. Veja só:

<video controls src="movie.mp4" width="320" height="240"></video>

Além da otimização de carregamento a tag vídeo abrange a navegação das redes sociais onde cada dia mais as pessoas precisam de banda para postarem seus vídeos de final de semana, passeios e gatos tocando pianos.

Lembrando é importante incluir nos elementos source de áudio e vídeo, informação a respeito do container e codecs utilizados. Isso possibilita ao navegador não precisar baixar parcialmente o arquivo de mídia para depois definir se tem capacidade de tocá-lo. Existem três formatos de vídeo suportados pelo elemento <video>: MP4, WebM, e Ogg.

Abaixo uma tabela de compatibilidade:

Navegador Formatos aceitos
Internet Explorer .mp4, .m4v
Safari .mp4, .m4v
Google Chrome .mp4, .m4v, .webm, .ogv
Firefox .webm, .ogv
Opera .webm, .ogv

 

Uma curiosidade do elemento é que ele possibilita a inclusão de um recurso fallback caso o caso de o vídeo não ser carregado. Dessa forma você pode colocar uma thumb do video, por exemplo. Veja:

<video width="320" height="240" controls>
 <source src="movie.mp4" type="video/mp4">
 <source src="movie.ogg" type="video/ogg">
 <img scr="img/thumb-primeiro-frame-video.png" class="thumb-video">
</video>

Parece algo complexo, mas é muito simples e nos dá um ótimo desempenho.

Conclusão

O HTML5 veio para conduzir o desenvolvimento de aplicações, independentemente das plataformas, a  outros patamares, elevando a experiência do usuário, principalmente para os dispositivos móveis.

Continue nos acompanhando, no próximo artigo sobre HTML5 continuaremos a conversar mais sobre todas essas novidades.

Olá
Eu sou o

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