Esta é a forma como a especificação DOM define um “DOM”:

O Document Object Model (DOM) é um Application Programming Interface (API) para HTML válido e documentos XML bem formatados. Ele define a estrutura lógica dos documentos e o modo como um documento é acessado e manipulado.

Em outras palavras, o DOM é uma forma padrão para permitir que as linguagens de programação interajam com documentos HTML / XML. O W3C fornece, o que é chamado de linguagem de vinculações, para o ECMAScript. Isto significa que as funcionalidades definidos na especificação DOM foram implementadas nessa linguagem.

ECMAScript é uma “uniformização” da língua (script) dos “homens das cavernas” – Netscape JavaScript e Microsoft JScript para que todos os browsers possam compreender instruções escritas usando o ECMAScript.

Agora, existem três grandes “dialetos” do ECMAScript: JavaScript (Firefox / Chrome / Safari), JScript (IE), e ActionScript (Adobe Flash / Flex). Estes são chamados dialetos como suporte a código escrito antes da normalização e fornecem alguns recursos não disponíveis no ECMAScript ou em outros dialetos.

Os navegadores fornecem uma implementação das interfaces do DOM que permite ECMAScript (ou dialetos suportados) interagirem com o DOM de um documento XML/HTML. Assim, a maioria dos browsers decentes, lançado conforme os padrões, dizem qual ECMAScript é suportado para cada versão do seu navegador.

O DOM de uma página HTML tem uma “árvore-como estrutura” quando visualizadas. É importante notar que o DOM não representa o conteúdo do HTML, mas representa apenas objetos através dos quais o conteúdo pode ser acessado. Esses objetos são modelados após a marcação que existe na página HTML. As relações, funções, comportamentos e atributos desses objetos são identificados pelo DOM.

Bom, é isso! Você normalmente não precisa de saber sobre interfaces DOM principalmente se você trabalhar com uma biblioteca JavaScript. Mas se você estiver interessado, Quirksmode (http://www.quirksmode.org) tem uma excelente introdução ao DOM.

O QUE É SVG?

SVG é uma linguagem para descrever gráficos bidimensionais e aplicações gráficas em XML. Alguns exemplos de SVG são: o logo da Wikipedia (http://upload.wikimedia.org/wikipedia/commons/7/77/Wikipedia_svg_logo.svg) e o “Hello World” do SVG chamado de “Tiger” (http://www.amplesdk.com/examples/svg/tiger). Veja o fonte desses dois arquivos SVG para ver como SVG parece.

Demo 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>

O QUE É CANVAS?

A especificação do HTML 5 define da seguinte forma: “Elemento de tela que representa um processamento gráficos “bitmap” para gerar imagens, gráficos, jogos através de JavaScript”.

Vladimir Vukićević da Mozilla, em 2006, deu uma boa explicação sobre as diferenças entre o SVG e Canvas:

- SVG é baseado em XML. Isto significa que, cada elemento está disponível no DOM SVG (útil quando você deseja anexar os manipuladores de eventos javascript para um elemento). Canvas não é baseado em XML.

- Canvas é processado pixel por pixel. SVG é um monte de vetores e precisa ser manipulado como um grupo de formas. Uma analogia no mundo Photoshop seria, criar um retângulo usando a “ferramenta forma” contra usar o “PaintBrush”.

Demo 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();
 }
}

QUEM VAI GANHAR?

Mesmo que sejam completamente diferentes na sua natureza e finalidade, há várias coisas que pode ser feito usando “Canvas” e “SVG”. A recente popularização do elemento “Canvas” parecem para algumas pessoas a morte do SVG. Mas pelo que notei está longe da verdade.

O “Canvas” é tão bom como uma imagem – mas ele não manipula pixel por pixel. Neste momento, elemento Canvas não suporta os “manipuladores” de eventos (por exemplo, ter um retângulo 20x60px dentro de um canvas que seja clicável). Já com o SVG isso é possível.

Canvas em seu estado “natural” não é acessível. O SVG, porém, é bastante acessível.

No entanto existe diferenças significativas de desempenho entre Canvas e SVG. O resultado do experimento descrito no link (http://www.borismus.com/canvas-vs-svg-performance) é que: Canvas é mais adequado para um “gráficos intensivos” onde o objeto são os redesenhos com freqüência (como um jogo), enquanto o SVG é melhor para aplicações que envolvem grandes áreas de processamento (como Google Maps).

POSSO USÁ-LOS AGORA?

Sim, pode. Existem muitas iniciativas para permitir que os navegadores que não suportam SVG ou Canvas tornarem-se “usáveis” por outros meios. O Google tem um impressionante projeto SVG Web (http://code.google.com/p/svgweb/) que usa o Flash para renderizar SVG em navegadores que não suportam SVG nativamente. Para Canvas, o Google tem uma biblioteca “explorecanvas” (http://code.google.com/p/explorercanvas/) que utiliza VML (ou Silverlight) para processar os elementos Canvas (basta incluir o arquivo excanvas.js, e ele deve funcionar) no Internet Explorer.

ENTÃO… QUEM GANHA?

Ambos. Estas é uma fase fantástica para SVG e Canvas. Finalmente temos uma alternativa natural para o “Flash” e animação de necessidade básica. Mantenha seus olhos abertos no “mailing list” do “W3C HTML Working Group” (http://lists.w3.org/Archives/Public/public-html/) para as últimas notícias.

Neste artigo, vou mostrar algumas técnicas diferentes CSS3, que alguns dos principais navegadores (mais especificamente Firefox, Chrome, Safari e Opera) já suportam. Com isso ficará evidente a degradação do layout pela falta de suporte dos outros browsers (como por exemplo o Internet Explorer). Usando as extensões específicas disponíveis para cada navegador, muitos dos estilos que estão sendo especificados no CSS3 já podem ser usados hoje!

CSS Vendor Extensions

O CSS permite que os desenvolvedores de navegadores criem implementações proprietárias para os mais variados estilos CSS. Isso permite ao distribuidor do navegador realize implementações próprias para determinada propriedade CSS, mesmo que já padronizado ou especificado, o que não é tão comum nem tão recomendado. Para utilizar no CSS, a propriedade que deseja utilizar para determinado(s) navegador(es) deve ser precedida de um prefixo. Esse prefixo indicará que se trata de uma extensão que somente aquele navegador interpretará.

Alguns browsers com seus prefixos (CSS Proprietary Extensions Scheme):

• Firefox : -moz-
• Safari: -webkit-
• Chrome: -webkit-
• Opera: -o-
• IE: -ms-

A grande vantagem das extensões é que os navegadores podem ir implementando as novas propriedades, como no caso do CSS3. Propriedades essas que já estão previstas, porém não especificadas. Isso certamente acelera a evolução dos navegadores em relação ao suporte às novas propriedades; Prepara os “CSS coders” para a nova forma de trabalhar; e contribui para a especificação oficial do CSS propriamente dita.
Clique se quiser saber mais sobre (CSS Proprietary Extensions Scheme);

Como você deve ter percebido, uma grande desvantagem de usar essas extensões é o fato de que acabamos tendo que repetir as propriedades para que funcione em todos os navegadores. É isso ou procurar soluções com javascript, folhas de estilos alternativas entre outras “viagens” para que a manutenção do código continue simples onerando o mínimo de recursos. Tudo bem, não basta falar, vamos mergulhar na direito no CSS3! Nota: os estilos sem um prefixo é a proposta da especificação atual W3C.

Uma nota sobre os Demos nesta página

Todos os exemplos estão nesta página, por isso, se você não está vendo alguns exemplos corretamente (ou nada), então o navegador que você está usando não dá suporte a técnica particular CSS3.

Sombras

O efeito de sombra aceita vários valores. Em primeiro lugar é simplesmente a cor da sombra. Ele aceita quatro valores de “length” e os dois primeiros são os x (offset horizontal) e do y (offset vertical). O valor seguinte é a quantidade de desfoque adicionado à sombra. O valor da quarta e última, é a quantidade propagação da sombra. “Box shadow” também vai aceitar uma palavra-chave “inset” que vai criar uma sombra interna.

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

DEMO DE SOMBRA

<p>
<div style="width: 500px; height: 100px; margin-left:50px; color: #FFF;
background-color: #069; padding: 0 7px 0 7px; box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px; -webkit-box-shadow: #333 3px 3px 4px;">
&amp;amp;amp;nbsp;</div><br />
</p>

Gradientes

Gradientes pode ser bastante confuso no início, especialmente quando se comparam as diferenças -moz e -webkit. Com -moz você primeiro definir a direção do gradiente, em seguida, determinar o início e término. Da -webkit tem um pouco mais de código. Primeiro você define o tipo de gradiente. Os próximos dois valores definem a direção. Finalmente, os últimos dois valores definem o início e término da cor do gradiente.

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));

DEMO DE GRADIENTE

<p>
<div style="width: 500px; height: 100px; background-color:#2e3192;
background: -moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#069), to(#036));">
&amp;amp;amp;nbsp;</div><br />
</p>

RGBA

O método de cor RGBA realmente é mais fácil do que pode parecer à primeira vista. Leva quatro valores e na ordem em que estão: a quantidade de vermelho, a quantidade de verde, de azul e do nível de opacidade. Em vez de usar cor em (#) hexadecimal, defina o modo de cor em RGB, quanto o nível de opacidade pode se ver a cor transparente. A opacidade aceita valores entre 0 e 1. Com 0 sendo completamente opaco e 1 sendo a cor real definida. O exemplo abaixo tem um valor de opacidade da .5 fazendo com que o elemento fique com 50% de transparência. RGBA na verdade não necessita de qualquer das extensões do navegador.

background-color: rgba(0, 54, 105, .5);

DEMO DE RGBA

<p>
<div style="width: 480px; height: 80px; text-align: center;
padding: 10px; background-color: rgba(0, 54, 105, .5);">
Este elemento está com 50% de transparência </div><br />
</p>

HSL

Junto com RGBA, CSS3 pode tornar o modelo de cor HSL disponível para nós. Isso poderia dar-nos todo um arsenal de cores e tons. Neste modelo de cor, HSL (H = tonalidade, S = saturação, L = luminosidade). Tonalidade é um grau na “roda de cores”, enquanto a saturação e a luminosidade são valores percentuais das cores.

background-color: hsl(209, 41.2%, 20,6%);

DEMO HSL

<p>
<div style="width: 480px; height: 80px; padding: 10px;
background-color: hsl(209, 41.2%, 20,6%);"> &amp;amp;amp;nbsp; </div><br />
</p>

Cor da Borda

Com este estilo, você deve definir border-top border-right border-bottom e border-left separadamente para obter o efeito abaixo. Você vai perceber que eu tenho definido uma borda de 8px juntamente com 8 cores diferentes para cada estilo de cor da borda. Isso porque a mesma quantidade de cores tem de coincidir com a quantidade de pixels na definição da borda.

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;

DEMO COR DA BORDA

<p>
<div style="width: 500px; height: 100px;
background-color: #2e3192; border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;">
&amp;amp;amp;nbsp; </div><br />
</p>

Seleção Cor do Texto

Devo dizer que mudar a cor de seleção de texto é um recurso muito bacana. Com o pseudo-elemento ::selection, você pode alterar a color e background quando o usuário destaca um elemento de texto. O ::selection foi removido do projecto CSS3 atual, mas deixa a esperança que irão adicioná-lo novamente mais tarde!

::selection {
background: #3C0; /* Safari */
color: #90C;
}
::-moz-selection {
background: #3C0; /* Firefox */
color: #90C;
}

DEMO SELEÇÃO DE TEXTO

<style type="text/css">
<!--
#textSelection { width: 500px; }
/* Safari */
p.selection::selection { background: #3C0; color: #90C; }
/* Firefox */
p.selection::-moz-selection { background: #3C0; color: #90C; }
-->
</style>
<div id="textSelection">
<p>Selecione o texto para ver o efeito deste recurso! Selecione o texto para
ver o efeito deste recurso! Selecione o texto para ver o efeito deste recurso!
Selecione o texto para ver o efeito deste recurso! Selecione o texto para ver o
efeito deste recurso! Selecione o texto para ver o efeito deste recurso! Selecione
o texto para ver o efeito deste recurso! Selecione o texto para ver o efeito deste
recurso! Selecione o texto para ver o efeito deste recurso! Selecione o texto para
ver o efeito deste recurso! Selecione o texto para ver o efeito deste recurso!
Selecione o texto para ver o efeito deste recurso! </p>
</div>

Transformação

Com o estilo “transform”, você pode fazer os elementos “crescerem”, quando o mouse estiver sobre o elemento. Com um valor acima de 1 o elemento irá aumentar de tamanho. Por outro lado, com um valor abaixo de 1 fará com que o elemento diminuir de tamanho. Junto com o “scale” o “transform” tem muitos diferentes formas de uso. Visite a página do desenvolvedor do Firefox para ver o que mais você pode usar. (https://developer.mozilla.org/En/CSS/-moz-transform)

-moz-transform: scale(1.15);
-webkit-transform: scale(1.15);

DEMO DE TRANSFORMAÇÃO

<style type="text/css">
<!--
#transform ul { list-style:none; background:none; }
#transform ul li{ width: 200px; color:#FFF; list-style: none; padding: 5px;
background:none; background-color: #069; border-bottom: #036 solid 1px; }
#transform li a:link { color: white; }
#transform li:hover { -moz-transform: scale(1.15); -webkit-transform: scale(1.15);
background-color: #003669; }
-->
</style>
<div id="transform">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">A Empresa</a></li>
		<li><a href="#">Produtos</a></li>
		<li><a href="#">Serviços</a></li>
		<li><a href="#">Contato</a></li>
	</ul>
</div>

Layout Multi-column

Com este novo estilo de “layout multi-column”, podemos dar ao nosso texto um “estilo jornal”. Implementar isto é muito simples em relação ao modo “tradicional” de se fazer com CSS. Primeiro eu especifico quantas colunas eu quero, o tipo de regra que eu quero para separá-las, e como que “espaçamento” eu quero entre as colunas. Simples não?

-moz-column-count:3;
-moz-column-rule: solid 1px black;
-moz-column-gap: 20px;

DEMO DE MULTI-COLUMN

<style type="text/css">
<!--
#multiColumns {
	-moz-column-count:3;
	-moz-column-rule: solid 1px black;
	-moz-column-gap: 20px; }
-->
</style>
<div id="multiColumns">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Resumo

Espero que todos estão tão animado com o CSS3 como eu estou. Ele nos dá mais poder tanto para webmasters quanto para desenvolvedores, e em muitos aspectos muito mais simples. Agora, se nós pudéssemos chegar em todos os navegadores e dizer para apoiá-lo seria fantástico! O que eu mostrei são apenas algumas das novas características potenciais do CSS3. Se você quiser obter mais informações, dicas e/ou ajuda, eu aconselho a visitar todos os sites abaixo:

* CSS: Current Work (http://www.w3.org/Style/CSS/current-work)

* CSS3.info (http://www.css3.info/)

* Mozilla CSS Extensions (https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions)

* The WebKit Open Source Project (http://webkit.org/)

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.

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 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:

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.

Post baseado no artigo de J. David Eisenberg (catcode@catcode.com) também escritor do livro SVG – Scalable Vector Graphics e professor em San Jose, CA.