Recursos, dicas e técnicas sobre HTML 5 que você deve saber – pt2

0

Este é mais um blog da sequencia de informações bacanas sobre html5!

A primeira parte do artigo você pode encontrar aqui.

Sem mais delongas, vamos à segunda parte!

1. A Semântica de Cabeçalho e Rodapé

Já se foram os dias de:

<div id=”header”>

</div>
<div id=”footer”>

</div>

Divs, por natureza, não têm estrutura semântica – mesmo depois de um ID é aplicada. Agora, com HTML5, temos acesso aos elementos <header> e <footer>. O mark-up acima pode agora ser substituído por:

<header>

</header>
<footer>

</footer>

Tente não confundir estes elementos com o header e footer do seu site. Você pode ter vários headers para N elementos em seu site, de acordo com o recipiente. É claro que na maioria das vezes não faz sentido isto, mas não é uma proibição também.

 

2. Validação de formulários

Validar formularios ficou muito mais intuitivo, simples e rápido! Por sorte eu já fiz um post exclusivo disso aqui.

 

3. Utilização de hgroup*

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

 

4. O atributo Required

Este já não é grande novidade a todos, mas foi algo que revolucionou a vida de muita gente!

Formulários permitem um novo atributo obrigatório, que especifica, naturalmente, se uma entrada específica é necessária. Depende de sua preferência de codificação, você pode declarar este atributo em uma de duas maneiras:

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

ou

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

 

5. O atributo autofocus

Mais uma vez, HTML5 elimina a necessidade de soluções em JavaScript. Se uma determinada entrada deve ser “selecionada”, ou focalizada, por padrão, podemos agora utilizar o atributo autofocus.

<input type=”text” name=”someInput” placeholder=”CodigoSimples” required autofocus>

 

6. Suporte a áudio

Já não temos que confiar em plugins de terceiros para renderizar áudio. HTML5 oferece agora o elemento <audio>. Bem, pelo menos, em casos comuns, você não terá que se preocupar com esses plugins. Por enquanto, apenas o mais recentes navegadores oferecem suporte para áudio com HTML5 nativo, porém para os tipos de áudios comuns você agora não irá precisar se preocupar.

<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” />
<source src=”file.mp3″ />
<a>Download file.</a>
</audio>

 

7. Suporte a vídeo

Muito parecido com o elemento <audio>, também, é claro o HTML5 oferece ao suporte nativo ao player de vídeo novos navegadores. A compatibilidade entre codecs, formatos e navegadores ainda é pequena, mas você já consegue rodar arquivos comuns como mp4 com facilidade.

<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> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p>
</video>

 

8 Suportes adicionais a vídeo

O HTML5 ainda possui duas funcionalidades bastante legais quando o assunto é execução de vídeos. Você tem a opçao de utilizar a tag “preload” que simplesmente pré carrega o vídeo ao término do load da página, isso assume que se um vídeo está mais no final da página o usuário já estará carregando o vídeo para assisti-lo.  A utilização é bem simples:

<video preload>

Outra funcionalidade legal, são os controles de display. Que habilitam no vídeo uma espécie de “controles” para o usuário fazer controle de volume, adiantar ou atrasar o vídeo,etc. A utilização também é bem tranquila:

<video preload controls>

 

Por hoje é só! No próximo e último post vamos continuar falando sobre HTML5 e todos os seus recursos que você deveria aprender.

Um grande abraço!

 

Compartilhe.