Prepare-se para o HTML 5

Publicado em 19 novembro 2009 por Cameroon
Tags:(X)HTML 5, Canvas, HTML 5, SVG, Web Forms 2, XML

Com apoio no Chrome, Firefox 3.5, Opera e Safari, o HTML 5 está chegando em você como um trem desgovernado. Aqui estão algumas sugestões para ajudar você a se preparar para subir a bordo ao invés de ser deixada na plataforma ou atropelado.

Veja o que outros têm feito

A primeira coisa que você pode fazer para se preparar para o HTML 5 é ver como as outras pessoas estão usando. Uma visita à galeria de HTML 5 (http://html5gallery.com/) vai mostrar como vários sites já estão usando os novos elementos de HTML 5. Use-o como fonte de inspiração!

Agora, mão à obra

Você pode olhar para os sites (http://html5doctor.com/), ler todos os artigos disponíveis na internet e até mesmo ler as especificações (http://www.whatwg.org/specs/web-apps/current-work/), mas nenhum deles vão te ajudar a entender o HTML 5, tanto quanto utilizando os novos elementos. Você pode modificar parte de um site existente ou fazer uma experiência criando novas páginas. Faça isso com seu site pessoal, de amigos ou até em sua empresa.

Ao fazer isso, você vai descobrir o que funciona e o que não funciona. Por exemplo, eu descobri que o Firefox 3.5 trata elementos como o article e a section como display:inline e eu tinha que definir explicitamente-los para display:block para fazê-los funcionar como esperado.

O (X) em análise

Se você é como a maioria dos designers, você provavelmente não escreve todas as marcações (tags) na mão. Mas até os bons editores tentam acompanhar os novos elementos de (X)HTML 5, e mesmo assim você acaba fazendo algumas marcações na mão e desta forma você acaba aprendendo um pouco. Existe um pouco de confusão (e polêmica!) sobre a relação entre HTML 5, XHTML 1.0/1.1 e XHTML 5. Vamos deixar tudo bem claro agora.

HTML 4.0 (a linguagem de marcação que todos nós conhecemos e amamos) é baseada em um “livro de regras” (rulebook) chamado SGML. No livro de regras da SGML, os nomes dos elementos não são “case sensitive”, você pode ter elementos com tags de fechamento opcional (como <p>) e você pode ter valores de atributo sem aspas.

XHTML 1.0 e 1.1 são baseados em um “livro de regras” chamado XML. No livro de regras XML, elemento e atributo nomes são “case sensitive”, cada tag de abertura deve ter uma tag de fechamento e os valores dos atributos devem estar entre aspas.

HTML 5 define uma linguagem de marcação que não seja baseado em qualquer livro de regras, mas podem ser escritas de “forma HTML” (ou renderizada, conforme a especificação chamada) ou de ” forma XHTML”.

Quando você escreve de “forma HTML”, você está autorizando deixar algumas tags abertas, valores de atributos sem aspas e elementos e nomes de atributos não são case sensitive. Você também terá de usar em algumas tags marcação XML, será obrigado a colocar barra em elementos como <img /> ou <hr />

Quando você usa a serialização XHTML, você tem que seguir as regras XML mencionado alguns parágrafos atrás.

Eu sugiro que você escreva a sua marcação em XHTML 5, ou, se você usar o HTML 5, fazer a marcação como se fosse XHTML. Vai ser melhor ficar com o padrão XML que requer um tag de fechamento para cada tag de abertura, em vez de gastar o seu tempo de para otimizar as tags que têm fechamento e/ou abertura opcional. Da mesma forma, colocar com aspas todos os valores de atributo ao invés de tentar decidir quando você pode deixar o valor de atributo sem aspas. Além de não ter que gastar neurônios sobre essas decisões, a marcação será mais consistente.

Se você utiliza alguma ferramenta de geração automática de marcação configure para gerar XHTML 5 em vez do HTML 5. O uso de XML é o futuro, seus espaços permitem que você tenha documentos “poliglota”, que consistem em várias marcações para além do HTML5 o RDF, MathML e o SVG. Você também pode usar ferramentas como XPath, XSLT e XQuery de marcação baseada em XML, utilizando qualquer analisador XML de sua escolha.

Claro, nem tudo é boa notícia. Se você trabalhar com XHTML 5, lembre-se que o servidor deve entregar os documentos com um tipo MIME de application/xhtml+xml ou text/xml. Isto pode envolver a negociação com o seu serviço de hospedagem. Além disso, quando você entregar um arquivo XML, qualquer erro de sintaxe irá causar uma mensagem de erro.

Error Message

Se você estiver fazendo a marcação com a mão, acho que essas mensagens de erro manterá você fiel a validação. Se você estiver usando ferramentas que criam XHTML, não há problema, pois a maioria das ferramentas produzem códigos XML bem formados.

Expressões Regulares

HTML 5 estende o elemento input oferecendo novos atributos que permitem especificar os dados de entrada. Esses atributos incluem min e max (para definir um intervalo numérico), e também oferece novos valores para o atributo type como a url, email, date e time

Se nenhum desses novos tipos de entrada atendem às suas necessidades o HTML 5 fornece o atributo pattern para elementos input com type=”text”. O valor do atributo pattern é uma expressão regular, tal como definido no ECMAScript e utilizado em JavaScript. As expressões regulares são uma forma concisa e talvez um tanto enigmática de especificar um padrão de caracteres. Por exemplo, se eu quiser um jogo de cinco dígitos mais hífen e três caracteres para CEP, posso usar esse padrão:

([0-9]{5}-[0-9]{3})

Todo poder do novo formulário web já estão parcialmente implementado no Safari e Chrome, e completamente no Opera (veja este site http://a.deveria.com/caniuse/ para obter mais informações sobre a capacidade de cada browser). Não se preocupe se o seu browser ainda não suporta as extensões do form para o HTML 5, você pode fazer o download do Google Web Forms 2 (http://code.google.com/p/webforms2/)

Aqui está um exemplo de formulário que valida data e cep:

<p>
  Digite uma data: <input type="date" name="data"
  required="required"
  title="Fotmato de data dd-mm-yyyy" />
</p>

<p>
  Digite um cep:
  <input type="text" name="cep"
   required="required"
   pattern="([0-9]{5}-[0-9]{3})"
title="CEP: 99999-999" />
</p>

As expressões regulares são muito úteis e vale a pena investir um tempo para aprender. Muitos editores de texto já tem integrado pesquisa com expressão regular e substituição características, e quando você começar a usá-los, você nunca mais conseguirá ficar sem eles.

Arte estática com SVG

Se você quiser que as bordas nítidas, o HTML 5 permite que você use SVG (Scalable Vector Graphics) em seus documentos. Colocar inline SVG é parcialmente implementado em Firefox, Safari e Opera, de acordo com este site (http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers).

E aqui está o SVG gerado:

SVG

<svg xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 200 100"
  width="200px" height="100px">
  <circle cx="50" cy="50" r="30"
  style="stroke:none; fill:#ff0000;"/>
  <g transform="translate(100, 20) scale(1.65)">
  <polygon points="36 25, 25 36, 11 36, 0 25,
  0 11, 11 0, 25 0, 36 11"
  style="stroke:none; fill:#0000ff;" />
  </g>
  <rect x="60" y="20" height="60" width="60"
  style="stroke:none; fill:#00ff00;
  fill-opacity: 0.5;" />
</svg>

Embora seja possível usar o JavaScript para modificar dinamicamente um gráfico SVG, HTML 5 oferece uma melhor solução:

Canvas em ação

O elemento de canvas é uma das características mais marcantes do HTML 5, e é suportada pelo Firefox, Safari, Opera e Chrome mas não pelo Internet Explorer. O elemento de canvas é realmente uma característica promissora. Você usa JavaScript para desenhar o que você precisa sobre a tela em branco. (Obs: A qualidade gráfica me surpreendeu!)

Aqui está o mesmo desenho feito com SVG em Canvas:

Canvas

E aqui está o JavaScript que o criou o desenho:

function drawSimpleCanvas() {
 var canvas =
 document.getElementById("simpleCanvas");
  if (canvas.getContext) {
  var ctx = canvas.getContext("2d");
  ctx. (); // the circle
  ctx.fillStyle = "#ff0000";
  ctx.arc(50, 50, 30, 0, 2*Math.PI, true);
  ctx.closePath();
  ctx.fill();
  ctx.save();
  // move and resize the octagon
  ctx.translate(100, 20);
  ctx.scale(1.65, 1.65);
  ctx.fillStyle = "#0000ff";
  ctx.beginPath();
  ctx.moveTo(36, 25); ctx.lineTo(25, 36);
  ctx.lineTo(11, 36); ctx.lineTo(0, 25);
  ctx.lineTo(0, 11); ctx.lineTo(11, 0);
  ctx.lineTo(25, 0); ctx.lineTo(36, 11);
  ctx.closePath();
  ctx.fill();
  // restore graphics as they
  // were before move and resize
  ctx.restore();
  ctx.fillStyle = "#00ff00";
  ctx.globalAlpha = 0.5;
  ctx.beginPath();
  ctx.rect(60, 20, 60, 60);
  ctx.closePath();
  ctx.fill();
 }
}

Veja Canvas tutorial da Mozilla (https://developer.mozilla.org/en/Canvas_tutorial) para uma introdução mais aprofundada.

O que você está esperando?

Apesar de alguns desenvolvedores terem receio sobre a direção em que o HTML 5 está levando a web (e eu compartilho com este receio), as características do HTML 5 são bem interessantes e vale a pena ser explorada. Assim, comece a olhar código fonte de outras pessoas, e fazer experiências em seu próprio site, e mergulhe nas novas características de validação de formulários e as de CANVAS.