Advertisement

28 Recursos, Dicas e Técnicas Para HTML5 Que Você Deve Saber

by
This post is part of a series called HTML5 and You.
Quick Tip: HTML5 Features you Should be Using Right Now
Quick Tip: New HTML5 Form Features

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Essa indústria evolui rápido – muito rápido! Se não tomar cuidado, você ficará para trás, comendo poeira. Então, se você está se sentido sobrecarregado pelas mudanças/atualizações que vieram com o HTML5, use esse artigo como um ponta-pé inicial para o que você precisa saber.

1. Novo Doctype

Você ainda usa aquele doctype complicado e de difícil memorização do XHTML??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Se sim, por que? Mude para o novo doctype do HTML5. Você viverá mais – como o Douglas Quaid diria.

<!DOCTYPE html>

Na verdade, você sabia que ele não é necessário para um documento HTML5? Entretanto, ele é usado pelos navegadores atuais e antigos que requerem que seja especificado um doctype. Os navegadores que não entendem esse doctype, simplesmente, renderizarão o código no modo padrão. Assim, não se preocupe, sinta-se livre para mandar o medo embora e adote o novo doctype do HTML5.

2. O Elemento Figure

Considere o seguinte código para uma imagem:

<img src="path/to/image" alt="Sobre a Imagem" />
<p>Imagem de Marte. </p>

Não há, infelizmente, uma maneira fácil ou semântica de associar a legenda, dentro da tag <p>, com o elemento <img> em si. O HTML5 corrige isso, introduzindo o elemento <figure>. Quando combinada com o elemento <figcaption>, nós podemos, agora, associar a legenda com sua respectiva imagem.

<figure>
	<img src="path/to/image" alt="Sobre a Imagem" />
	<figcaption>
<p>Isso é uma imagem de algo interessante. </p>
	</figcaption>
</figure>

3. <small> Redefinido

Há não muito tempo atrás, eu usava o elemento <small> para criar subtítulos que estavam, relativamente, relacionados à logo. É um elemento de apresentação bastante útil, porém, esse é um uso errôneo, agora. O elemento small foi redefinido, para referir-se, de maneira mais apropriada, às "letras miúdas". Imagine uma afirmação de direitos autorais (copyright) no rodapé do seu site. De acordo com a nova definição desse elemento no HTML5, utilizar o elemento <small> seria a escolha correta para esse tipo de informação.

O elemento small, agora, refere-se às "letras miúdas".

4. Sem Mais Types Para Scripts e Links

Você, possívelmente, ainda adiciona o atributo type às suas tags link e script.

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

Isso não é mais necessário. Está implícito que ambas as tags referem-se a folhas de estilo e scripts, respectivamente. Assim, podemos remover o atributo type por completo.

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

5. Com Ou Sem Aspas

...Eis a questão. Lembre-se, HTML5 não é XHTML. Você não precisa envolver os valores de seus atributos em aspas, se não quiser. Você também não precisa fechar seus elementos. Tendo dito, não há nada de errado se o fizer, caso se sinta mais confortável fazendo. Eu estou nesse último grupo.

<p class=myClass id=someId> Iniciar o reator.

Faça sua escolha com relação a esse ponto. Se você preferir um documento mais estruturado, você pode continuar com as aspas.

6. Torne Seu Conteúdo Editável

Os novos navegadores tem um novo atributo interessante, que pode ser adicionado aos elementos, chamado de contenteditable. Como o nome implica, isso permite que o usuário edite qualquer texto contido dentro do elemento, até incluindo os filhos do elemento. Há inúmeros usos para algo assim, incluindo as simples listas de tarefas, que também podem lançar mão do armazenamento local.

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>untitled</title>
</head>
<body>
	<h2> Lista de Tarefas </h2>
   <ul contenteditable="true">
<li> Quebrar um motorista robô. </li>
<li> Dirigir até uma fábrica abandonada
<li> Ver vídeos de mim mesmo </li>
</ul>
</body>
</html>

Ou, como aprendemos na dica anterior, poderíamos ter escrito como:

<ul contenteditable=true>

7. Campos de E-mail

Se aplicarmos o valor "email" ao atributo type de algum campo de formulário, podemos instruir o navegador a permitir cadeias de caracteres que sigam as regras de estrutura de um endereço de e-mail válido. É verdade. Validação de formulários estará, logo-logo, nos navegadores! Não podemos depender 100% dessa validação, ainda, por questões óbvias. Em navegadores antigos, que não entendem esse valor "email", eles simplesmente criam um campo de texto padrão.

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>untitled</title>
</head>
<body>
	<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />

<button type="submit"> Enviar Formulário </button>
	</form>
</body>
</html>

Nesse momento, não podemos depender de validação dos navegadores. Soluções tanto no cliente quando no servidor devem ser implementadas.

Deve-se perceber que todos os navegadores atuais são um pouco instáveis, quanto aos elementos e atributos que eles suportam ou não. Por exemplo, o Opera parece que dá suporte a validação de e-mails, desde que o atributo name seja especificado. Entretanto, ele não dá suporte ao atributo placeholder, sobre o qual aprenderemos na próxima dica. No fim das contas, não dependa desse tipo de validação de formulário, ainda... Mas, você já pode utilizá-lo!

8. Placeholders

Antes de utilizar um pouco de JavaScript para criar textos indicativos (placeholder), utilize o atributo placeholder para os campos de texto de seus formulários. Claro, você pode atribuir valor inicial através de value e isso até funciona, mas, tão logo o usuário apaga o texto e clica/seleciona outra coisa, o campo continua em branco. O atributo placeholder remedia essa situação.

<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />

De novo, o suporte é impreciso entre os navegadores, porém, a situação melhorará a cada nova versão deles. Além disso, se os navegadores, como o Firefox ou Opera, não dão suporte, atualmente, ao atributo placeholder, não há perigo algum em utilizá-lo. Simplesmente será desconsiderado.

9. Armazenamento Local

Graças ao armazenamento local (não faz parte, oficialmente, do HTML5, mas foi agrupado por conveniência), podemos fazer com que navegadores avançados "lembrem-se" do que digitamos, mesmo depois que o nosso navegador é fechado ou recarregado.

"localStorage guarda os campos com relação ao domínio. Mesmo que você feche a janela do seu navegador, reabra e volte ao site, ele lembrará de todos os campos na localStorage."
-QuirksBlog

Uma vez que, obviamente, não é suportado por todos os navegadores, podemos esperar que esse método funcione, mais notavelmente, no Internet Explorer 8, Safari 4 e Firefox 3.5. Atente que, para compensar os navegadores antigos que não reconhecem armazenamento local, você deveria, primeiro, verificar se window.localStorage existe.

via http://www.findmebyip.com/litmus/

10. Os Header e Footer Semânticos

Já se foram os dias de:

<div id="header">
	...
</div>

<div id="footer">
	...
</div>

Divs, por natureza, não tem estrutura semântica – mesmo após atributos id serem aplicados. Agora, com o HTML5, temos acesso aos elementos <header> e <footer>. O código acima pode ser substituido pelo de logo abaixo:

<header>
	...
</header>

<footer>
	...
</footer>

É totalmente aceitável possuir vários headers e footers em seus projetos.

Tente não confundir esses elementos com os "cabeçalho" e "rodapé" do seu site. Eles referem-se, somente, ao receptáculo. Assim, faz todo sentido, posicionar, por exemplo, meta-informações na parte de baixo de um artigo de um blog, dentro de um elemento footer. O mesmo é verdadeiro para o elemento header.

11. Mais Recuros de Formulários no HTML5

Aprenda mais sobre os recursos úteis de formulários do HTML5 nessa dica rápida em video.

12. Internet Explorer e HTML5

Infelizmente, o tal do Internet Explorer precisa dar uma volta danada para entender esses elementos HTML5 novos.

Todos os elementos, por padrão, possuem o valor inline para a propriedade display.

Para garantir que esses novos elementos HTML5 renderizem corretamente como elementos de tipo bloco, é necessário, por enquanto, estiliza-los como tal.

header, footer, article, section, nav, menu {
 display: block;
}

Infelizmente, o Internet Explorer ignorará esses estilos, porque ele não tem a menor ideia do que o elemento header é, por exemplo. Felizmente, há uma maneira fácil de corrigir isso:

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("nav");
document.createElement("menu");

Por mais estranho que seja, esse código ativa o Internet Explorer. Para simplificar esse processo para cada nova aplicação, Remy Sharp criou um script, comumente chamado de HTML5 shiv. Esse script também ajusta alguns problems de impressão.

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

13. hgroup*

*Desde a primeira publicação desse artigo, o elemento hgroup tornou-se obsoleto e não deve mais ser usado.

14. Atributo Required

Campos de formulários permitem um novo atributo, o required, que especifica, logicamente, se um campo em particular é obrigatório. Dependendo da sua preferência de codificação, você pode declarar esse atributo de duas maneiras:

<input type="text" name="someInput" required>

Ou, de forma mais estruturada.

<input type="text" name="someInput" required="required">

Ambas as formas funcionarão. Com esse código, dentro dos navegadores que dão suporte ao atributo, um formulário não pode ser enviado com o campo "someInput" em branco. Eis um exemplo simples: Também adicionaremos o atributo placeholder, já que nada nos impede de fazê-lo.

<form method="post" action="">
	<label for="someInput"> Your Name: </label>
	<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
	<button type="submit">Go</button>
</form>

Se o campo for deixado em branco e o formulário for enviado, o campo em questão ganhará destaque.

15. Atributo Autofocus

Novamente, o HTML5 acaba com a necessidade de soluções em JavaScript. Se um campo em particular deveria estar "selecionado", ou em foco, por padrão, nós podemos utilizar, agora, o atributo autofocus.

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

De forma interessante, enquanto eu prefiro escrever de uma forma mais parecida com a do XHTML (usando aspas, etc), escrever o atributo como autofocus="autofocus" fica bem estranho. Assim, usaremos o atributo sozinho.

16. Suporte a Áudio

Não precisamos mais depender de plugins de terceiros para renderizar áudios. O HTML5 oferece, agora, o elemento <audio>. Bem, ao menos, algum dia, não precisaremos depender desses plugins. Por enquanto, somente os navegadores mais recentes dão suporte a esse elemento. Assim, é uma boa prática oferecer alguma forma de retrocompatibilidade.

<audio autoplay="autoplay" controls="controls">
	<source src="file.ogg" />
	<source src="file.mp3" />
	Download this file.
</audio>

A Mozilla e o Webkit ainda não andam juntas, quando se trata dos formatos de áudio suportados. O Firefox quer que o tipo .ogg prevaleça, enquanto os Webkit trabalham, sem problemas, com o formato mp3. Isso significa, pelo menos por hora, que você deve criar duas versões do seu áudio.

Quando o Safari carregar a página, ele não reconhecerá o formato .ogg e pulará, seguindo em busca do formato mp3. Note que o IE, como sempre, não dá suporte, e o Opera 10 ou anterior só trabalham com arquivos do tipo .wav.

17. Suporte a Vídeo

Assim como com o elemento <audio>, nós também temos, claro, o elemento video do HTML5 nos navegadores! Na verdade, recentemente, o YouTube anunciou o HTML5 como uma nova opção de formato para seus vídeos embutidos, para aqueles navegadores que o suportam. Infelizmente, novamente, a especificação HTML5 não indica um decodificador de vídeo padrão, deixando para que os criadores dos navegadores decidam. Enquanto o Safari e o Internet Explorer 9 dão suporte ao formato H.264 (o qual os reprodutores em Flash podem executar), o Firefox e o Opera escolheram os formatos de código aberto, Theora e Vorbis. Dessa forma, quando precisar apresentar algum vídeo com o HTML5, deverá apresentar ambos os formatos.

<video controls preload>
	<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
	<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
	<p> Seu navegador é antigo. <a href="cohagenPhoneCall.mp4">Ao invés disso, baixe o arquivo.</a> </p>
</video>

O navegador Chrome pode mostrar, corretamente, videos codificados nos formatos "ogg" e "mp4".

Há alguns pontos importantes a levantar, porém.

  1. Tecnicamente, não precisamos preencher o atritbuto type; entretanto, se não o fizermos, o navegador terá de descobrir o tipo por conta própria. Economize banda e declare.
  2. Nem todos os navegadores compreendem a tag video do HTML5. Logo após os elementos source, podemos oferecer um link para download ou uma versão em Flash. Fica a seu critétio.
  3. Os atributos controls e preload serão discutidos nas duas próximas dicas.

18. Precarregue os Vídeos

O atributo preload faz exatamente o que você está imaginando. Embora, com isso, você tenha de decidir, primeiro, se quer ou não que o navegador precarregue o vídeo. Isso é necessário? Talvez, se o visitante acessar uma página própria para visualização de vídeos, você, definitivamente, deve precarregar o video e evitar que o usuário tenha de esperar muito tempo para assistí-lo. Vídeos podem ser precarregados atribuindo preload="preload", ou, simplesmente, adicionando o atributo preload sozinho. Prefiro a segunda solução, é bem menos redundante.

<video preload>

19. Mostrar Controles

Se você tem seguido cada uma dessas dicas e técnicas, talvez tenha percebido que, com o código acima, o vídeo aparece como se fosse uma imagem, sem qualquer controle. Para renderizar esses controles, devemos especificar o atributo controls dentro do elemento video.

<video preload controls>

Atente que cada navegador renderiza seus tocadores de vídeo diferente um dos outros.

20. Expressões Regulares

Quantas vezes você teve de criar expressões regulares para validar algum campo? Graças ao novo atributo pattern, podemos inserir uma expressão regular diretamente no código HTML.

<form action="" method="post">
	<label for="username">Crie um usuário: </label>
 	<input type="text"
  name="username"
  id="username"
  placeholder="4 <> 10"
  pattern="[A-Za-z]{4,10}"
  autofocus
  required>
	<button type="submit">Continuar </button>
</form>

Se você tem certo conhecimento de expressões regulares, você saberá que o padrão [A-Za-z]{4,10} aceita, somente, letras em maiúsculo e/ou minúsculo. E essa cadeia de caracteres deve ter o mínimo de quatro caracteres e o máximo de dez.

Note que estamos começando a combinar todos esses atributos incríveis!

Se expressões regulares estão além do seu conhecimento, dê uma olhada nisso.

21. Detectar Suporte a Atributos

De que adianta ter esses atributos se não temos uma maneira de saber se o navegador os reconhce? Bem, esse é um ótimo ponto, mas há inúmeras maneiras de determinar isso. Discutiremos duas. A primeira opção é utilizar a excelente biblioteca Modernizr. Alternativamente, podemos criar e dissecar esses elementos para determinar do que são capazes os navegadores. Por exemplo, em nosso exemplo anterior, se quisermos descobrir se um navegador implementa o atributo pattern, poderíamos usar esse trecho JavaScript:

alert( 'pattern' in document.createElement('input') ) // boolean;

Na verdade, esse é um método bem popular de descobrir a compatibilidade de um navegador. A bibioteca jQuery utiliza esse truque. Acima, criamos um novo elemento input e determinamos se o atributo pattern faz parte de seus atributos. Se sim, o navegador suporta a funcionalidade. Caso contrário, não suporta.

<script>
if (!'pattern' in document.createElement('input') ) {
	// realize validação do lado cliente e do servidor
}
</script>

Tenha em mente que essa técnica depende do JavaScript!

22. Elemento Mark

Pense no elemento <mark> como um destacador. Uma cadeia de caracteres envolta nessa tag deveria ser relevante às ações do usuário no momento. Por exemplo, se eu pesquisar por "Open your Mind" em algum blog, eu poderia utilizar JavaScript para envolver todas as ocorrências dessa cadeia de caracteres dentro de elementos <mark>.

<h3> Resultados da Busca </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

23. Quando Usar <div>

Alguns de nós nos questionamos quando e se devemos usar as boas e velhas divs. Agora que temos acesso aos elementos headers, articles, sections, e footers, ainda há necessidade de usarmos uma...div? Claro.

Divs deveriam ser utilizadas quando não houver outro elemento melhor em questão.

Por exemplo, se você se encontrar na necessidade de envolver algum bloco de código dentro de um elemento recipiente, só para posicionar o conteúdo, uma <div> faz todo o sentido. Entretanto, se você estiver interessado em envolver um novo post de blog, ou, talvez, uma lista de links em seu rodapé, considere usar os elementos <article> e <nav>, respectivamente. Eles são bem mais semânticos.

24. O Que Já É Possível Usar

Com toda essa discussão sobre o HTML5 várias pessoas o desprezam completamente – o que é um grande erro. Na verdade, há vários recursos HTML5 que podemos usar em nossos projetos desde já! Código mais simples e claro é sempre uma coisa boa. Na nossa dica rápida em vídeo de hoje, mostrarei a você várias opções.

25. O Que O HTML5 Não É

As pessoas podem ser perdoadas por acreditarem que transições incríveis, sem o uso do JavaScript, fazem parte do HTML5. É – até mesmo a Apple promoveu, inadvertidamente, essa ideia. Para os não desenvolvedores, isso não importa; É uma maneira fácil de se referir aos padrões web modernos. Porém, para nós, embora possa ser só semântica, é importante entender, exatamente, o que o HTML5 não é.

  1. SVG: Não é HTML5. É, no mínimo, cinco anos mais velho.
  2. CSS3: Nãó é HTML5. É...CSS!.
  3. Geolocalização: Não é HTML5.
  4. Armazenamento no Cliente: Não é HTML5. Já foi, mas foi removido da especificação, por muitos acreditarem que ele estivesse se tornando muito complicado. Agora, tem sua própria especificação.
  5. Web Sockets: Não é HTML5. Novamente, foi exportado para sua própria especificação.

Independentemente da distinção que você requeira, todas essas tecnologias podem ser agrupadas no padrão web moderno. Na verdade, muitas dessas especificações ramificadas ainda são administradas pelas mesmas pessoas de antes.

26. O Atributo Data

Agora temos, oficialmente, suporte a atributos customizados em todos os elementos HTML. Enquanto, antigamente, só podiamos fazer algo assim:

<h1 id=someId customAttribute=value> Obrigado, Tony. </h1>

...os validadores de código ficariam doidos! Agora, porém, desde que prefixemos nossos atributos customizados usando data, podemos, oficialmente, usar esse método. Se você, alguma vez, se viu tendo de guardar dados importantes dentro do atributo class, provavelmente para uso com JavaScript, isso virá bem a calhar!

Trecho HTML

<div id="myDiv" data-custom-attr="Meu valor"> Bla Bla </div>

Retornar o Valor de Um Atributo Customizado

var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // Meu valor

Ele pode ser usado, inclusive, em nosso CSS, como nesse exemplo básico de mudança de texto.

<!DOCTYPE html>

<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Exemplo simples de mudança de texto</title>
<style>

h1 { position: relative; }
h1:hover { color: transparent; }

h1:hover:after {
	content: attr(data-hover-response);
	color: black;
	position: absolute;
	left: 0;

}
</style>
</head>
<body>

<h1 data-hover-response="Eu disse, não me toque!"> Não me toque  </h1>

</body>
</html>

Você pode ver o efeito acima na demonstração hospedada no JSBIN.

27. O Elemento Output

Você, provavelmente, já adivinhou, o elemento output é usado para apresentar algum tipo de resultado de cálculo. Por exemplo, se você quiser apresentar as coordenadas da posição do mouse ou a soma de uma série de números, esses dados deveriam ser inseridos no elemento output.

Como um exemplo simples, vamos inserir a soma de dois números em um elemento output vazio, usando JavaScript, quando um botão submit for pressionado.

<form action="" method="get">
	<p>
10 + 5 = <output name="sum"></output>
	</p>
	<button type="submit"> Calcular </button>
</form>

<script>
(function() {
	var f = document.forms[0];

	if ( typeof f['sum'] !== 'undefined' ) {
f.addEventListener('submit', function(e) {
	f['sum'].value = 15;
	e.preventDefault();
}, false);
	}
	else { alert('Seu navegador não está pronto ainda.'); }
})();
</script>

Veja em funcionamento.

Note que o suporte ao elemento output ainda é bem fraco. Enquanto escrevo, somente o navegador Opera implementava-o bem. Isso é refletido no código acima. Se o navegador não reconhece o elemento, simplesmente, alertará você sobre. Em qualquer outro caso, ele busca o elemento output com o atributo name de valor "sum" e atribui o valor 15, após o formulário ser enviado.

Esse elemento também pode receber um atributo for, que reflete o nome do elemento o qual o elemento output se relaciona, de forma semelhante a que o elemento label trabalha.

28. Criação de Sliders Com o Campo Range

O HTML5 introduz o novo tipo de campo, range.

<input type="range">

Notavelmente, ele pode ter os atributos min, max, step, e value, além de outros. Embora apenas o Opera pareça dar suporte a esse tipo de campo, será fantástico quando nós pudermos usar isso de verdade!

Para uma rápida demonstração, vamos construir um votador para que os usuários decidam o quão incrível o filme "Total Recall" é. Não construiremos uma solução de votação real, mas revisaremos como poderíamos fazer, bem rápido.

Passo 1: Estrutura

Primeiro, criaremos a estrutura HTML.

<form method="post">
	<h1> Votador de Grandiosidade do "Total Recall" </h1>
	<input type="range" name="range" min="0" max="10" step="1" value="">
	<output name="result">  </output>
</form>

Note que, além de atribuir os valores de min e max, podemos especificar qual o tamanho do passo (step) de cada trnasição. Se o step tiver o valor de 1, teremos 10 valores a escolher. Nós, também, lançamos mão do novo elemento outputque aprendemos na dica anterior.

Passo 2: CSS

Depois, estilizaremos um pouco. Nós utilizaremos os pseudo-elementos :before e :after para avisar ao usuário quais são os valores min e max atuais. Muito obrigado ao Remy e Bruce por ensinarem esse truque, via "Introducing HTML5."

body {
	font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;
	text-align: center;
}
input { font-size: 14px; font-weight: bold;  }

input[type=range]:before { content: attr(min); padding-right: 5px; }
input[type=range]:after { content: attr(max); padding-left: 5px;}

output {
	display: block;
	font-size: 5.5em;
	font-weight: bold;
}

Criamos, acima, conteúdo antes e depois do campo range, e fazemos seus valores iniciais serem iguais aos atribuídos a min e max, respectivamente.

Passo 3: O JavaScript

Por último, nós:

  • Determinamos se o navegador atual sabe o que é um campo do tipo range. Se não, alertamos o usuário que a demonstração não funcionará.
  • Atualizamos o elemento output dinamicamente, de acordo com que o usuário mexe o slider.
  • Prestamos atenção para quando o usuário tirar o mouse de cima do slider, podermos salvar o valor e salvá-lo no armazenamento local.
  • Então, a próxima vez que o usuário recarregar a página, o campo range e o elemento output já estarão, automaticamente, configurados com os valores selecionados da última vez.
(function() {
	var f = document.forms[0],
range = f['range'],
result = f['result'],
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;

	// Determina se o navegador é um dos modernos, capazes de
	// reconhecer o campo
	var o = document.createElement('input');
	o.type = 'range';
	if ( o.type === 'text' ) alert('Desculpa. Seu navegador não é moderno o suficiente. Tente utilizar o Opera.');

	// Atribui os valores iniciais do campo range e do elemento output
	// para aquilo que estiver salvo localmente, ou o número 5.
	range.value = cachedRangeValue;
	result.value = cachedRangeValue;

	// Quando o usuário selecionar algo, atualizar o armazenamento local.
	range.addEventListener("mouseup", function() {
alert("O valor selecionado foi " + range.value + ". Estou usando o armazenamento local para lembrar do valor. Atualize e verifique num navegador moderno.");
localStorage ? (localStorage.rangeValue = range.value) : alert("Salve os dados numa base de dados ou algo parecido.");
	}, false);

	// Mostra o valor escolhido enquanto arrasta o slider.
	range.addEventListener("change", function() {
result.value = range.value;
	}, false);

})();

Pronto para o mundo real? Provavelmente, não. Mas, ainda assim, é legal de brincar e de se preparar!

Baixe o código fonte, e tente por conta própria. Mas, lembre-se de usar um navegador moderno e atualizado.

Obrigado pela leitura! Falamos sobre muita coisa, mas apenas cobrimos só o topo do iceberg. O HTML5 é bastante poderoso! Espero que esse artigo tenha sevido como uma bela introdução!

Advertisement