Eu costumo dizer que a internet revolucionou as comunicações, os estudos, democratizou o conhecimento, dividiu a história. Deixou tudo mais próximo e mais distante ao mesmo tempo.Rogério Rios – CEO Click Art Tecnologia
O HTML5 tráz inúmeras alterações que possibilitam mais interação nos navegadores, principalmente nos dispositivos móveis, como smartphones ou tablets, sem necessitar de recursos externos para, por exemplo, executar um vídeo ou uma música diretamente no navegador. É indispensável na construção de um site ou mesmo na diagramação de artigos. Devido a essas inúmeras alterações, estar preparado e atualizado é essencial para quem trabalha ou estuda na área.
Diferença entre HTML4 e HTML5
A versão 4 da HTML tornou-se uma recomendação World Wide Web Consortium (W3C) em 1998, para atender às necessidades da web estática, a Web 1.0. Nesse período, era utilizada apenas para postar conteúdo sem que o usuário pudesse interagir com ele. Desde então a web evoluiu, agregando novas tecnologias e conceitos que tornaram possível a publicação de conteúdo dinâmico (Web 2.0), dando poder ao usuário para interagir com os websites.
Ao perceber que a HTML4 não atendia adequadamente às necessidades do desenvolvimento para Web 2.0, a W3C criou o XHTML, uma espécie de HTML com as regras rigorosas da linguagem XML.
O XHTML também não agradou a comunidade de desenvolvedores por não atender a seus anseios de mudança.
Então, algumas empresas e desenvolvedores criaram a Web Hypertext Application Technology Working Group (WHATWG), uma organização com foco no trabalho com formulários web e aplicações.
Tempos depois, em 2006, criaram a linguagem HTML5 para atender tanto às normas e aos padrões da W3C quanto aos anseios da comunidade de desenvolvedores.
A HTML5 é o resultado da quinta maior revisão da linguagem HTML, considerada o novo padrão para Web, que une o que há de melhor na HTML versão 4, XHTML e HTML DOM, e adicionará um conjunto de novos recursos. Ela está a poucos passos de ser considerada um padrão oficial, apesar de nenhum dos navegadores existentes darem suporte completo aos novos recursos. Estima-se que, em alguns anos, a especificação do HTML5 estará completa e os navegadores darão suporte total a essa versão da linguagem.
Fato curioso
Antes mesmo de a HTML5 se tornar um padrão oficial, a W3C já trabalhava na HTML 5.1, o que nos permite crer que, talvez, a HTML5 não se torne um padrão oficial, mas sim a HTML5.1.
HTML5 e JavaScript
A força da HTML5 não está apenas nos novos elementos e atributos, mas também na possibilidade de acessá-los, manipulá-los e formatá-los com JavaScript e CSS utilizando o Document Object Model (DOM), que é a interface entre a linguagem JavaScript e os objetos/elementos da linguagem HTML e que ofecere uma maneira-padrão para a construção de sites ricos e interativos com HTML, CSS e JavaScript. Para saber mais sobre o DOM, visite o endereço: <http://www.w3schools.com/dom/>.
Novos recursos e vantagens do HTML5
As principais vantagens são:
- Novos recursos baseados em HTML, CSS, DOM e JavaScript;
- Redução da necessidade de plugins externos (como para o uso do Flash). Apesar que isso não é mais usado em construção de sites modernos.;
- Permissão do uso de elementos (tags) para substituir diversos scripts usados atualmente;
- Melhor manipulação de erros;
- Independência do dispositivo, ou seja, as mesmas marcações serão utilizadas e renderiza- das em diferentes tipos de dispositivos.
E será que sugiram novos recursos? Ah surgiram sim, e são muito legais.
- O elemento
<canvas>para criação de desenhos e gráficos; - Os elementos
<audio>e<video>para reprodução de mídia; - Novos elementos de conteúdo específico, como
<article>,<footer>,<header>,<nav>,<section>; - Novos atributos para campos de formulário e tipos de dados, como date, time, email, url, search etc.;
- Novas APIs para manipulação de conteúdo offline, geolocalização, acesso a bancos de dados, validação de formulário, comunicação bidirecional com o servidor, execução de scripts em paralelo, manipulação de áudio e vídeo, criação de gráficos e desenhos etc.
Novas APIs
A linguagem HTML5 permite a utilização de uma série de APIs que ajudam na criação de aplicações web. Essas APIs podem ser acessadas por meio de scripts JavaScript e usadas em conjunto com os novos elementos HTML. São elas:
- WebFoms 2.0 – disponibiliza mais tipos de entrada de dados (button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url e week) em formulários, validação de entrada mais simples (por meio do atributo pattern no elemento
<input>) e menos scripts na página. - Web SQL Database – conjunto de APIs para manipular bancos de dados do lado do cliente usando SQL via JavaScript.
- Web Storage – permite manipular o histórico de navegação e dados no computador do cliente utilizando uma forma mais eficiente do que os antigos cookies. Armazena até 5MB de dados sem expiração definida e sem os complexos cálculos de data dos cookies.
- Web Sockets – API que permite que páginas web usem o protocolo Web Socket para a comunicação de duas vias com um servidor. Essa API permite que os aplicativos web mantenham comunicação bidirecional assíncrona com o servidor.
- Web Workers – utilizada para a execução de scripts em segundo plano (em paralelo), independentemente de qualquer script em execução na interface do usuário. Isso permite que scripts de execução demorada não sejam interrompidos por scripts que respondem a cliques ou outras interações com o usuário. As tarefas longas são executadas sem atrapalhar as transações de requisição/resposta.
- Geolocation – define uma interface de alto nível para as informações de localização associada apenas com o dispositivo que hospeda a aplicação, como latitude e longitude. A API Geolocation permite por meio de JavaScript a integração e consumo de serviços de geolocalização no globo, como, por exemplo, servicos Google Maps.
- Vídeo & Áudio – executa conteúdo multimídia por meio dos elementos
<audio>,<video>e chamadas a métodos de controle via JavaScript. - Canvas e SVG – possibilita desenhar na tela do navegador utilizando o elemento
<canvas>e JavaScript. A API SVG é vetorial, e baseada em XML; logo, acessível via DOM. A API Canvas desenha pixel a pixel via JavaScript. - Aplicações Offline – executa aplicações web offline referenciadas em cache pelo atributo manifest do elemento
<html>. Esse atributo aponta para um arquivo de manifesto, indicando as URLs que devem ser postas em cache para execução offline. Uma vez colocadas em cache, o usuário pode navegar pelas páginas em cache sem estar online. - Drag & Drop – em meio visual, permite operações para arrastar e soltar elementos. Uma operação de arrastar pode ser a ação padrão de um evento MouseDown que é seguido por uma série de eventos MouseMove, e a parada (queda) pode ser desencadeada quando o mouse é liberado. Para acessar as funções dessa API, utilizam-se scripts JavaScript. Nossa como isso ERA chato de fazer!
Declaração DOCTYPE
A declaração DOCTYPE nas versões anteriores ao HTML5 referiam-se a uma Document Type Definition (DTD), a qual especifica as regras para a linguagem de marcação, para que os navegadores possam processar os elementos e atributos da linguagem corretamente.
A declaração DOCTYPE deve ser a primeira instrução em um documento HTML antes do elemento <html>.
O <DOCTYPE> não é um elemento HTML, mas sim uma instrução para que o navegador saiba a versão da linguagem de marcação que está sendo utilizada.
A linguagem HTML5 requer um elemento <DOCTYPE> para garantir que a página seja renderizada pelo navegador de maneira correta, mas não se refere a nenhuma DTD. A declaração DOCTYPE no HTML5 é <!DOCTYPE html> e não é case-sensitive. Nas versões anteriores do HTML a declaração DOCTYPE era maior porque a linguagem HTML foi baseada na linguagem SGML, portanto era necessário ter uma referência a uma DTD. No HTML5 o tipo de documento só é necessário para ativar o modo padrão de renderização (exibição) para documentos escritos usando a sintaxe HTML, o que já é feito com a declaração <!DOCTYPE html>.
Bom galera, é isso, essa é a primeira parte da séria HTML5. Se você gostou, não deixe de acompanhar, muito mais coisas estão por vir, eu garanto que você não vai se arrepender.
Dúvidas ou comentários, entre em contato conosco, faremos o possível para responder a todos os questionamentos.
