24/7/2014 Aprender HTML5 em 4 passos! | Criatividade, Tutoriais Photoshop e Templates

http://www.escolacriatividade.com/aprender-html5/ 1/17

ESCOLAS PLUS ↓ESCOLAS PLUS

ESCOLA DINHEIROESCOLA PSICOLOGIA

ESCOLA CRIATIVIDADEESCOLA WORDPRESS

ESCOLA FREELANCER

ESCOLA APOSTAS

HOMEFERRAMENTAS ↓LIVROSSUBSCREVER

ARQUIVOSSOBRE ↓CONTACTOS

Criatividade, Tutoriais Photoshop e Templates > Programação > Aprender HTML5 em 4 passos!43

Aprender HTML5 em 4 passos!

08-11-2010, em Programação, por Diogo Espinha

Como é de conhecimento geral, o HTML5 chegou recentemente ao mundo da internet. Ainda não estando nasua versão final, é perfeitamente usável e trouxe algumas mudanças e melhorias, conforme informámos no artigode Introdução ao HTMl5. Contudo, ainda muito há por aprender e por isso mesmo decidimos trazer-lhe esteartigo 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 ocrescimento e a conversão da web para esta “nova” linguagem. Nasceu com a cooperação entre a WorldWide 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

Find us on Facebook

Escola Criatividade

81,660 people like Escola Criatividade.

Like

24/7/2014 Aprender HTML5 em 4 passos! | Criatividade, Tutoriais Photoshop e Templates

http://www.escolacriatividade.com/aprender-html5/ 2/17

erros e o facto de as novas funcionalidades serem baseadasem HTML, CSS, DOM e JavaScript. Decidimos destacar

algumas destas novas funcionalidades, que passam pelacriação de elementos de áudio e vídeo para reprodução demídia, novos controlos de formulários e a criação de umelemento “canvas” para criação de imagens.

Se desejar, poderá subscrever a nossa newsletter gratuita ereceber os próximos conteúdos diretamente na sua caixa deemail:

Endereço de Email:

Subscrever!

1. NOVOS ELEMENTOS

Como poderá imaginar, a internet mudou bastante deste a implementação do HTML 4,01 em 1999. Nos diasde 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émpor 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.

24/7/2014 Aprender HTML5 em 4 passos! | Criatividade, Tutoriais Photoshop e Templates

http://www.escolacriatividade.com/aprender-html5/ 3/17

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

24/7/2014 Aprender HTML5 em 4 passos! | Criatividade, Tutoriais Photoshop e Templates

http://www.escolacriatividade.com/aprender-html5/ 4/17

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ídeossão mostrados através de um plugin, sendo que o mais usado é o Flash. No entanto, nem todos osnavegadores 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 doelemento <video>.

Formatos de Vídeo

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

Como funciona?

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

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 oelemento vídeo, insira um comentário dentro das tags <video>

No exemplo anterior, usamos um ficheiro Ogg, que é suportado pelo Firefox, Opera e Chrome. Para quepossa 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 reproduzidonos navegadores citados. O Internet Explorer 8 não suporta qualquer um deles, mas está previsto que asua versão 9 venha colmatar esta lacuna. Vejamos um exemplo:

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.

12

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

123

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

12345

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

24/7/2014 Aprender HTML5 em 4 passos! | Criatividade, Tutoriais Photoshop e Templates

http://www.escolacriatividade.com/aprender-html5/ 5/17

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á umatabela 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:

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ãosuportarem este elemento.

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

Atributos áudio

Atributos – Valores de Atributos – Descrição

autoplay – autoplay – Define se o áudio irá ser reproduzido assim que estiver pronto.

12

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

123

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

123456

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

24/7/2014 Aprender HTML5 em 4 passos! | Criatividade, Tutoriais Photoshop e Templates

http://www.escolacriatividade.com/aprender-html5/ 6/17

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

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 emque se tem o controlo de todo e qualquer pixel, através de métodos para criar caixas, círculos, caracteres eainda adicionar imagens.

Criando o elemento canvas

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

Dá-se um nome , introduzindo o id que neste caso é “meuCanvas”, define-se a largura e a altura e o elementoestá 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áriofazê-lo através de Javascript, e dentro da sua tag <script>. Vejamos um exemplo da criação de umrectângulo.

O Javascript procura o elemento através da função .getElementById, depois cria um objecto em contextoatravés da função .getContext(“2d”), que neste caso é um objecto que faz parte do HTML5, que permitea 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 eforma 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.

54

Curtir

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

123456

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

24/7/2014 Aprender HTML5 em 4 passos! | Criatividade, Tutoriais Photoshop e Templates

http://www.escolacriatividade.com/aprender-html5/ 7/17

Exemplo de colocação de imagem:

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á!

123456789

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