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

11/02/2018 28 Recursos, Dicas e Técnicas Para HTML5 Que Você Deve Saber

Advertisement
CODE > WEB DEVELOPMENT
28 Recursos, Dicas e Técnicas Para HTML5 Que Você Deve Saber

by Jeffrey Way 14 Jul 2011
Di culty: Beginner Length: Long Languages: Português
Web Development HTML5 HTML CSS JavaScript

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ê cará 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??
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

2 "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.
1 <!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 especi cado 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:
1 <img src="path/to/image" alt="Sobre a Imagem" />

2 <p>Imagem de Marte. </p>
https://code.tutsplus.com/pt/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520 1/18
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.
1 <figure>
2 <img src="path/to/image" alt="Sobre a Imagem" />
3 <figcaption>
4 <p>Isso é uma imagem de algo interessante. </p>
5 </figcaption>
6 </figure>
3. <small> Rede nido

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 rede nido, para referir-se,
de maneira mais apropriada, às "letras miúdas". Imagine uma a rmação de direitos autorais (copyright) no rodapé do seu site. De
acordo com a nova de niçã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 .
1 <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />

2 <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.
1 <link rel="stylesheet" href="path/to/stylesheet.css" />

2 <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 zer, caso se sinta mais confortável
fazendo. Eu estou nesse último grupo.
1 <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 lhos 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.
01 <!DOCTYPE html>
02
03 <html lang="en">
04 <head>
05 <meta charset="utf-8">
06 <title>untitled</title>
07 </head>
08 <body>
09 <h2> Lista de Tarefas </h2>
10 <ul contenteditable="true">
11 <li> Quebrar um motorista robô. </li>
12 <li> Dirigir até uma fábrica abandonada
13 <li> Ver vídeos de mim mesmo </li>
14 </ul>
15 </body>
16 </html>
Ou, como aprendemos na dica anterior, poderíamos ter escrito como:
1 <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 só 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.
01 <!DOCTYPE html>
02
03 <html lang="en">
04 <head>
06 <title>untitled</title>
07 </head>
08 <body>
09 <form action="" method="get">
10 <label for="email">Email:</label>
11 <input id="email" name="email" type="email" />
12
13 <button type="submit"> Enviar Formulário </button>
14 </form>
15 </body>
16 </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 especi cado. Entretanto,
ele não dá suporte ao atributo placeholder , sobre o qual aprenderemos na próxima dica. No m 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.
1 <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, o cialmente, 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.
Quick Tip: Learning about HTML5 Local Storage
" 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, veri car se window.localStorage existe.
via http://www. ndmebyip.com/litmus/
10. Os Header e Footer Semânticos

Já se foram os dias de:
1 <div id="header">
2 ...
3 </div>
4
5 <div id="footer">
6 ...
7 </div>
Div s, 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:
1 <header>
2 ...
3 </header>
4
5 <footer>
6 ...
7 </footer>
É totalmente aceitável possuir vários header se footer s 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.
New HTML5 Form Features
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.
1 header, footer, article, section, nav, menu {

2 display: block;
3 }
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:
1 document.createElement("article");
2 document.createElement("footer");
3 document.createElement("header");
4 document.createElement("nav");
5 document.createElement("menu");
Por mais estranho que seja, esse código ativa o Internet Explorer. Para simpli car 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.
1 
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 especi ca, logicamente, se um campo em particular é
obrigatório. Dependendo da sua preferência de codi cação, você pode declarar esse atributo de duas maneiras:
1 <input type="text" name="someInput" required>
Ou, de forma mais estruturada.
1 <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.
1 <form method="post" action="">

2 <label for="someInput"> Your Name: </label>
3 <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
4 <button type="submit">Go</button>
5 </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 .
1 <input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>
De forma interessante, enquanto eu pre ro escrever de uma forma mais parecida com a do XHTML (usando aspas, etc), escrever o
atributo como autofocus="autofocus" ca 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.
1 <audio autoplay="autoplay" controls="controls">

2 <source src="file.ogg" />
3 <source src="file.mp3" />
4 <a>Download this file.</a>
5 </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 signi ca, 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 especi cação HTML5 não indica um decodi cador 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.
1 <video controls preload>

2 <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
3 <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
4 <p> Seu navegador é antigo. <a href="cohagenPhoneCall.mp4">Ao invés disso, baixe o arquivo.</a> </p>
5 </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 zermos, 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ê, de nitivamente, 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. Pre ro a
segunda solução, é bem menos redundante.
1 <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 especi car o atributo controls dentro do
elemento video .
1 <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.
01 <form action="" method="post">

02 <label for="username">Crie um usuário: </label>
03 <input type="text"
04 name="username"
05 id="username"
06 placeholder="4 <> 10"
07 pattern="[A-Za-z]{4,10}"
08 autofocus
09 required>
10 <button type="submit">Continuar </button>
11 </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> .
1 <h3> Resultados da Busca </h3>

2 <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 div s. Agora que temos acesso aos elementos
header s, article s, section s, e footer s, ainda há necessidade de usarmos uma... div ? Claro.
Div s 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.
HTML5 Features you Should be Using Right Now
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 especi cação, por muitos acreditarem que ele
estivesse se tornando muito complicado. Agora, tem sua própria especi cação.
5. Web Sockets: Não é HTML5. Novamente, foi exportado para sua própria especi cação.
Independentemente da distinção que você requeira, todas essas tecnologias podem ser agrupadas no padrão web moderno. Na
verdade, muitas dessas especi cações rami cadas ainda são administradas pelas mesmas pessoas de antes.
26. O Atributo Data

Agora temos, o cialmente, suporte a atributos customizados em todos os elementos HTML. Enquanto, antigamente, só podiamos
fazer algo assim:
1 <h1 id=someId customAttribute=value> Obrigado, Tony. </h1>
...os validadores de código cariam doidos! Agora, porém, desde que pre xemos nossos atributos customizados usando data ,
podemos, o cialmente, 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
1 <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.
01 <!DOCTYPE html>
02
03 <html lang="en">
04 <head>
06 <title>Exemplo simples de mudança de texto</title>
07 <style>
08
09 h1 { position: relative; }
10 h1:hover { color: transparent; }
11
12 h1:hover:after {
13 content: attr(data-hover-response);
14 color: black;
15 position: absolute;
16 left: 0;
17
18 }
19 </style>
20 </head>
21 <body>
22
23 <h1 data-hover-response="Eu disse, não me toque!"> Não me toque </h1>
24
25 </body>
26 </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.
01 <form action="" method="get">

02 <p>
03 10 + 5 = <output name="sum"></output>
04 </p>
05 <button type="submit"> Calcular </button>
06 </form>
07
08 <script>
09 (function() {
10 var f = document.forms[0];
11
12 if ( typeof f['sum'] !== 'undefined' ) {
13 f.addEventListener('submit', function(e) {
14 f['sum'].value = 15;
15 e.preventDefault();
16 }, false);
17 }
18 else { alert('Seu navegador não está pronto ainda.'); }
19 })();
20 </script>
Veja em funcionamento.
Note que o suporte ao elemento output ainda é bem fraco. Enquanto escrevo, somente o navegador Opera implementava-o bem.
Isso é re etido 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 re ete 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 .
1 <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 lme "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.
1 <form method="post">
2 <h1> Votador de Grandiosidade do "Total Recall" </h1>
3 <input type="range" name="range" min="0" max="10" step="1" value="">
4 <output name="result"> </output>
5 </form>
Note que, além de atribuir os valores de min e max , podemos especi car 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 output que 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."
01 body {
02 font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;
03 text-align: center;
04 }
05 input { font-size: 14px; font-weight: bold; }
06
07 input[type=range]:before { content: attr(min); padding-right: 5px; }
08 input[type=range]:after { content: attr(max); padding-left: 5px;}
09
10 output {
11 display: block;
12 font-size: 5.5em;
13 font-weight: bold;
14 }
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,
con gurados 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
// 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 lembra
localStorage ? (localStorage.rangeValue = range.value) : alert("Salve os dados numa base de dados
}, 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!
Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!
Advertisement
Jeffrey Way
I used to be the editor of Nettuts+ and head of web development courses at Tuts+.
 jeffrey_way
 FEED  LIKE  FOLLOW  FOLLOW
Weekly email summary

Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Email Address
Update me weekly
Advertisement
Translations
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
Powered by
1 COMENTÁRIO Nettuts+ 
1 Iniciar sessão
Mostrar primeiro os mais votados

 Recomendar 1 ⤤ Partilhar
Escreva o seu comentário...
INICIE SESSÃO COM O

OU REGISTE-SE NO DISQUS ?
Nome
Guilherme Ferreira • há 2 anos

Muito bom!
△ ▽ • Responder • Partilhar ›
✉ Subscrever d Acerca do DisqusAdicionar o DisqusAdicionar 🔒 Privacidade
Advertisement
ENVATO TUTS+ 
JOIN OUR COMMUNITY 
HELP 
25,382 1,097 20,362

Tutorials Courses Translations
Envato.com Our products Careers
© 2018 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.
Follow Envato Tuts+

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

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

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

Diunggah oleh

Hak Cipta:

Format Tersedia

11/02/2018 28 Recursos, Dicas e Técnicas Para HTML5 Que Você Deve Saber

CODE > WEB DEVELOPMENT

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

Web Development HTML5 HTML CSS JavaScript

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

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

1 <img src="path/to/image" alt="Sobre a Imagem" />

3. <small> Rede nido

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

4. Sem Mais Types Para Scripts e Links

1 <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />

1 <link rel="stylesheet" href="path/to/stylesheet.css" />

5. Com Ou Sem Aspas

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

6. Torne Seu Conteúdo Editável

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

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

Quick Tip: Learning about HTML5 Local Storage

10. Os Header e Footer Semânticos

É totalmente aceitável possuir vários header se footer s em seus projetos.

11. Mais Recuros de Formulários no HTML5

New HTML5 Form Features

12. Internet Explorer e HTML5

1 header, footer, article, section, nav, menu {

14. Atributo Required

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

Ou, de forma mais estruturada.

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

1 <form method="post" action="">

15. Atributo Autofocus

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

16. Suporte a Áudio

1 <audio autoplay="autoplay" controls="controls">

17. Suporte a Vídeo

1 <video controls preload>

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

18. Precarregue os Vídeos

19. Mostrar Controles

1 <video preload controls>

20. Expressões Regulares

01 <form action="" method="post">

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

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

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

22. Elemento Mark

1 <h3> Resultados da Busca </h3>

23. Quando Usar <div>

24. O Que Já É Possível Usar

HTML5 Features you Should be Using Right Now

25. O Que O HTML5 Não É

1. SVG: Não é HTML5. É, no mínimo, cinco anos mais velho.

26. O Atributo Data

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

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

Retornar o Valor de Um Atributo Customizado

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

27. O Elemento Output

01 <form action="" method="get">

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