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

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

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:

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.

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.

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.

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.

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.

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

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.

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.

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:

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:

É 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.

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:

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.

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:

Ou, de forma mais estruturada.

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.

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.

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.

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.

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.

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.

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.

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:

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.

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

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:

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

Retornar o Valor de Um Atributo Customizado

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

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.

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.

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.

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."

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.

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