• Tweet
• Email

• Tweet
• Email

Como é de conhecimento geral, o HTML5 chegou recentemente ao mundo da internet. Ainda não estando na sua versão final, é perfeitamente usável e trouxe algumas mudanças e melhorias, conforme informámos no artigo de Introdução ao HTMl5. Contudo, ainda muito há por aprender e por isso mesmo decidimos trazer-lhe este artigo com o intuito de aprofundar  o temaou quem sabe dar início ao seu conhecimento sobre HTML5.

A maioria dos navegadores modernos da atualidade já tem suporte para HTML5, o que vem potenciar o crescimento e a conversão da web para esta “nova” linguagem. Nasceu com a cooperação entre a World Wide Web Consorcium (W3C) e  aWeb Hypertext Application Technology Working Group (WHATWG). Desde logo foram definidas algumas regras para o HTML5, de entre as quais destacamos a redução da necessidade de plugins externos, melhoria no manuseio de erros e o facto de as novas funcionalidades serem baseadas em HTML, CSS, DOM e JavaScript. Decidimos destacar algumas destas novas funcionalidades, que passam pela criação de elementos de áudio e vídeo para reprodução de mídia, novos controlos de formulários e a criação de um elemento “canvas” para criação de imagens.

Se desejar, poderá subscrever a nossa newsletter gratuita e receber os próximos conteúdos diretamente na sua caixa de email:

1. NOVOS ELEMENTOS

Como poderá imaginar, a internet mudou bastante deste a implementação do HTML 4,01 em 1999. Nos dias de hoje, alguns dos elementos são obsoletos, nunca usados ou usados mas em desuso. Todos estes elementos foram eliminados ou reescritos para estarem em conformidade com as exigências desta nova era. Foi também por isso que foram criados novos elementos para melhorar a estrutura, conteúdos de mídia e formulários.

Irei destacar os novos elementos, divididos nas suas categorias:

Novos elementos de marcação

• <article> – Para conteúdo externo, como texto de um uma notícia, blog, forum ou outra fonte de conteúdo externo.
• <aside> -  Para conteúdo à parte daquele onde está inserido
• <command> – Um botão, checkbox.
• <details> – Para fazer uma descrição acerca de um documento ou partes dele.
• <summary> – Uma legenda, ou resumo dentro do elemento de detalhes
• <figure> – Para agrupar uma secção de conteúdo não relacionado, como um vídeo.
• <figcaption> – A legenda da secção <figure>.
• <footer> – Para o rodapé de um documento ou secção, pode incluir o nome do autor, a data, informações de contacto ou informações de direitos de autor.
• <header> – Para o cabeçalho de um documento ou secção, onde pode ser incluída a navegação.
• <hgoup> – Para uma secção de títulos usando desde <h1> até <h6>.
• <mark> – Para diferenciar texto.
• <meter> - Elemento de medida, usado apenas se o valor máximo e mínimo forem conhecidos.
• <nav> – Para a secção de navegação.
• <progress> – Informa o estado do trabalho em execução.
• <ruby> – Para anotação ruby.
• <rt> - Para explicação da anotação ruby.
• <rp> – Elemento usado para mostrar conteúdo quando o navegador não suportar o elemento ruby.
• <section> – Para uma secção no documento, como capítulos, cabeçalhos, rodapés ou outras secções.
• <time> - Para definir tempo ou data, ou ambos.
• <wbr> – Quebra de palavra, para definir uma quebra de linha.

Novos elementos de mídia

• <audio> – Para conteúdo multimédia, sons, música ou outros streams de áudio.
• <video> - Para conteúdo vídeo, como um clipe de vídeo ou outros streams de vídeo.
• <source> – Para recursos media para os elementos de media, definido dentro dos elementos de áudio ou vídeo.
• <embed> – Para conteúdo embutido, como um plug.

O elemento tela

• <canvas> – Para a criação de gráficos através de script.

Novos elementos de formulários

• <datalist> – Uma lista de opções para valores de introdução
• <keygen> – Gera passwords para autenticação de utilizadores.
• <output> – Para diferentes tipos de output, como o que é criado através de um script.

Novos valores de atributos

• tel - O valor de introdução é um número de telefone.
• search – O campo de introdução é um campo de pesquisa.
• url - O valor de introdução é um URL.
• email - O valor de introdução é um ou mais endereços de e-mail.
• datetime – O valor de introdução é uma data ou hora.
• date - O valor de introdução é uma data.
• month – o valor de introdução é um mês.
• week – o valor de introdução é uma semana.
• time – o valor de introdução é um tipo de tempo.
• datetime-local – o valor de introdução é uma data ou tempo local.
• number – o valor de introdução é um número.
• range – o valor de introdução é um número dentro de um dado intervalo.
• color – O valor de introdução é uma cor em formato hexadecimal, como #009900

2. VÍDEO HTML

Até agora, nunca foi estabelecido um formato universal para mostrar vídeos numa página web. Hoje, os vídeos são mostrados através de um plugin, sendo que o mais usado é o Flash. No entanto, nem todos os navegadores têm os mesmos plugins, sendo necessário instalar aplicações complementares para fazer o trabalho. Com HTML5, será possível introduzir um formato universal de introdução de vídeo através do elemento <video>.

Formatos de Vídeo

Os formatos de vídeo actualmente suportados são Ogg e MPEG-4. No entanto, devido ás constantes actualizações dos navegadores, não há uma lista de compatibilidades actual e concisa entre os browsers e os formatos de vídeos.

Como funciona?

Para introduzir vídeo em HTML5, tudo o que é necessário é:

<video src="movie.ogg" controls="controls">
</video>

O atributo controls é para introduzir o reproduzir, pausar, e controlo de volume.

Também será boa ideia incluir os atributos de largura e altura. Para navegadores que não suportam o elemento vídeo, insira um comentário dentro das tags <video>

<video src="movie.ogg" width="320" height="240" controls="controls">
O seu navegador não suporta o elemento video de HTML5.
</video>

No exemplo anterior, usamos um ficheiro Ogg, que é suportado pelo Firefox, Opera e Chrome. Para que possa ver o vídeo no Safari, terá de estar em MPEG-4. Felizmente, é possível introduzir mais de uma fonte do vídeo, pelo que podemos introduzir o vídeo em OGG e MPEG-4, para poder ser reproduzido nos navegadores citados. O Internet Explorer 8 não suporta qualquer um deles, mas está previsto que a sua versão 9 venha colmatar esta lacuna. Vejamos um exemplo:

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
O seu navegador não suporta o elemento vídeo de HTML5.
</video>

Atributos vídeo

Atributo - Valor do atributo – Descrição

autoplay – autoplay – Define se o vídeo irá ser exibido assim que estiver pronto

controls – controlos – Define os controlos que irão ser exibidos.

height – pixeis – Define a altura do vídeo.

loop – loop – Define se o vídeo irá ser repetido quando acabar.

preload – preload – Define se o vídeo irá ser carregado ao mesmo tempo que a página irá ser carregada, e pronto para ser reproduzido. É ignorado se o atributo autoplay estiver activo.

src – url – Define a fonte do vídeo, em um url.

width – Define a largura do vídeo.

3. AUDIO HTML

Tal como no caso do vídeo HTML, não houve até agora um formato universal para reprodução de audio. A reprodução era feita através de plugins como Flash. Agora com HTML5 e a introdução do elemento <audio>, é possível fazer a reprodução num formato universal.

Formatos de vídeo

De momento há 3 formatos suportados, Ogg Vorbis, MP3 e Wav, mas tal como no vídeo, não há uma tabela actual e concisa da relação entre o suporte dos navegadores e os formatos. Aquilo que é garantido é que o Internet Explorer 8 não suporta este elemento.

Como funciona?

Para introduzir o audio com HTML5, basta introduzir o elemento audio:

<audio src="song.ogg" controls="controls">
</audio>

O atributo controls é para introduzir os controlos de reproduzir, pausar e controlo de volume.

Deve também ser introduzido um comentário, dentro do elemento audio, para os navegadores que não suportarem este elemento.

<audio src="song.ogg" controls="controls">
O seu navegador não suporta a reprodução de audio HTML5.
</audio>

Mais uma vez, podem ser introduzidas várias fontes do conteúdo, para suporte de vários navegadores:

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
  <source src="song.wav" type="audio/wav" />
O seu navegador não suporta reprodução de audio HTML5.
</audio>

Atributos áudio

Atributos – Valores de Atributos – Descrição

• autoplay – autoplay – Define se o áudio irá ser reproduzido assim que estiver pronto.
• controls – controls – Define quais os controlos que irão estar disponíveis.
• loop – loop – Define se o áudio irá ser reproduzido repetidamente.
• preload – preload – Define se o áudio irá ser carregado ao mesmo tempo do que a página, e pronto a reproduzir.
• src – url – Define o url do áudio a reproduzir.

4. TELA HTML5 (CANVAS)

O elemento canvas permite introduzir gráficos no documento através de Javascript. É uma área rectangular em que se tem o controlo de todo e qualquer pixel,  através de métodos para criar caixas, círculos, caracteres e ainda adicionar imagens.

Criando o elemento canvas

Para criar o elemento canvas, basta introduzir o seguinte código HTML

<canvas id="meuCanvas" width="250" height="150"></canvas>

Dá-se um nome , introduzindo o id que neste caso é “meuCanvas”, define-se a largura e a altura e o elemento está criado.

Desenhando com Javascript

O elemento canvas não tem por si só capacidade de fazer a criação de imagens, sendo por isso necessário fazê-lo através de Javascript, e dentro da sua tag <script>. Vejamos um exemplo da criação de um rectângulo.

<script type="text/javascript">
var c=document.getElementById("meuCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#00FF00";
cxt.fillRect(0,0,150,75);
</script>

O Javascript procura o elemento através da função .getElementById, depois cria um objecto em contexto através da função .getContext(“2d”), que neste caso é um objecto que faz parte do HTML5, que permite a introdução de caixas, círculos, caracteres, imagens, entre outros.

As 2 linhas fillStyle e fillRect criam um rectângulo, em que fillRect desenha-o com a sua posição tamanho e forma e fillStyle torna-o verde através de código hexadecimal.

Passo a explicar os valores de fillRect(1,2,3,4):

• 1. Coordenadas X, em que X é o topo da página.
• 2. Coordenadas Y, em que Y é o lado esquerdo da página.
• 3. Largura do rectângulo
• 4. Altura do rectângulo

Quer isto dizer que o nosso rectângulo irá ser desenhado no canto superior esquerdo da página.

Exemplo de colocação de imagem:

<script type="text/javascript">

var c=document.getElementById("meuCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="imagem_fantastica.png"
cxt.drawImage(img,0,0);

</script>

Muito mais há a descobrir sobre HTML5 e a capacidade de os navegadores suportarem as suas funções nas suas novas versões.

E VOCÊ, JÁ USA HTML5?

Caso tenha dúvidas, dicas de HTML5 para partilhar ou simplesmente um comentário positivo ou negativo relativamente ao artigo, não deixe de comentar! A sua opinião é importante para nós. Participe no artigo!

Até já!