Aprender html5 em 4 passos

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 DINHEIRO
ESCOLA PSICOLOGIA
ESCOLA CRIATIVIDADE
ESCOLA WORDPRESS
ESCOLA FREELANCER
ESCOLA APOSTAS
HOME
FERRAMENTAS ↓
LIVROS
SUBSCREVER
ARQUIVOS
SOBRE ↓
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 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
Find us on Facebook
Escola Criatividade
81,660 people like Escola Criatividade.
Like

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:
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 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 é:
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>
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:
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.
1
2
<videosrc="movie.ogg"controls="controls">
</video>
1
2
3
<videosrc="movie.ogg"width="320"height="240"controls="controls"
OseunavegadornãosuportaoelementovideodeHTML5.
</video>
1
2
3
4
5
<videowidth="320"height="240"controls="controls">
<sourcesrc="movie.ogg"type="video/ogg"/>
<sourcesrc="movie.mp4"type="video/mp4"/>
OseunavegadornãosuportaoelementovídeodeHTML5.
</video>

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:
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.
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.
1
2
<audiosrc="song.ogg"controls="controls">
</audio>
1
2
3
<audiosrc="song.ogg"controls="controls">
OseunavegadornãosuportaareproduçãodeaudioHTML5.
</audio>
1
2
3
4
5
6
<audiocontrols="controls">
<sourcesrc="song.ogg"type="audio/ogg"/>
<sourcesrc="song.mp3"type="audio/mpeg"/>
<sourcesrc="song.wav"type="audio/wav"/>
OseunavegadornãosuportareproduçãodeaudioHTML5.
</audio>

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
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.
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.
54
Curtir
1 <canvasid="meuCanvas"width="250"height="150"></canvas>
1
2
3
4
5
6
<scripttype="text/javascript">
varc=document.getElementById("meuCanvas");
varcxt=c.getContext("2d");
cxt.fillStyle="#00FF00";
cxt.fillRect(0,0,150,75);
</script>

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á!
1
2
3
4
5
6
7
8
9
<scripttype="text/javascript">
varc=document.getElementById("meuCanvas");
varcxt=c.getContext("2d");
varimg=newImage()
img.src="imagem_fantastica.png"
cxt.drawImage(img,0,0);
</script>

Aprender html5 em 4 passos

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (18)

Semelhante a Aprender html5 em 4 passos

Semelhante a Aprender html5 em 4 passos (20)

Aprender html5 em 4 passos