Aprender HTML5 em 4 Passos!

Aprender HTML5 em 4 passos!
| Escola Criatividade
Criar Conta
HOME
Recuperar Password
LIVROS
Entrar na Conta
SUBSCREVER
3 ALUNOS ONLINE \\ ESCOLAS
ARQUIVOS
SOBRE
CONTACTOS
Home / Programao /Aprender HTML5 Em 4 Passos!
Aprender HTML5 em 4 passos!
11
ASSINANTES
SEGUIDORES
FS
COMENTRIOS
245
115
703
632
Pesquisar
08-11-2010, em Programao, por Diogo Espinha
Digitalizao Documentos
Contratos Pronturios Desenhos Condies
imbatveis
At 90% OFF em Quase Tudo

Cadastre-se em 5 Seg e Receba Todo Dia
Ofertas de no Mnimo 50% OFF!
Locao de Salas - RJ
Salas de Reunio, Treinamento, etc Faa sua
Reserva - (21) 2516-0597
Autodesk Inventor - Vdeo

Integre projetos do AutoCAD em um nico
modelo digital. Veja mais!
Videos | Produo F4E

Veja Videos do Filme de Rexona Teens: Friends
Forever. Confira!
Digitalnet Brasil
Videoconferncia, Audioconferncia,
Webconferncia e Streaming
Os melhores restaurantes
Economize at 70% em Restaurantes. No
perca!
Voc tem um Blog? Ganhe

Dinheiro com seu Blog Divulgando Cursos
Online. Cadastre-se Agora!
www.selens.com.br
www.MundoVisual.net
www.youtube.com/RXT
ClubeUrbano.GROUPON.com.br/Rest
Subscreva a Newsletter:
PeixeUrbano.com.br/Cadastre-se
Subscrever!
Autodesk.com.br/inventor-DWG-Video
www.digitalnetbr.com.br
www.Cursos24Horas.com.br/Afiliados
Ol Visitante! Se novo por aqui, talvez queira subscrever o

nosso RSS Feed para actualizaes dirias.
Como de conhecimento geral, o HTML5 chegou recentemente ao mundo da internet. Ainda no

estando na sua verso final, perfeitamente usvel e trouxe algumas mudanas e melhorias,
conforme informmos no artigo de Introduo 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
incio 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 converso da web para esta nova linguagem. Nasceu com a cooperao 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 reduo 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 criao de elementos de udio e vdeo para
reproduo de mdia, novos controlos de formulrios e a criao de um elemento canvas para
criao de imagens.
Para os seus Trabalhos:
http://www.escolacriatividade.com/aprender-html5/[30/11/2010 10:54:24]
Aprender HTML5 em 4 passos! | Escola Criatividade
1. NOVOS ELEMENTOS
Como poder imaginar, a internet mudou bastante deste a implementao do HTML 4,01 em 1999.
Nos dias de hoje, alguns dos elementos so obsoletos, nunca usados ou usados mas em desuso.
Artigos Populares este Ano

48
14 jogos de browser fantsticos e

gratutos
Todos estes elementos foram eliminados ou reescritos para estarem em conformidade com as
exigncias desta nova era. Foi tambm por isso que foram criados novos elementos para melhorar a
estrutura, contedos de mdia e formulrios.
Irei destacar os novos elementos, divididos nas suas categorias:
Novos elementos de marcao

<article> Para contedo externo, como texto de um uma notcia, blog, forum ou outra fonte
de contedo externo.
<aside> - Para contedo parte daquele onde est inserido
<command> Um boto, checkbox.
<details> Para fazer uma descrio acerca de um documento ou partes dele.
<summary> Uma legenda, ou resumo dentro do elemento de detalhes
36
50 Exemplos de Publicidade Criativa

e Explosiva!
34
As 10 melhores plataformas para

criar um blog
30
25 Wallpapers Escuros de Alta

Resoluo e Qualidade
Impressionante
10 Extenses Google Chrome
para Desenvolvedores
93 Designs Incrveis de
Sites com Caf!
27
25
<figure> Para agrupar uma seco de contedo no relacionado, como um vdeo.

<figcaption> A legenda da seco <figure>.
<footer> Para o rodap de um documento ou seco, pode incluir o nome do autor, a data,
informaes de contacto ou informaes de direitos de autor.
<header> Para o cabealho de um documento ou seco, onde pode ser includa a
navegao.
<hgoup> Para uma seco de ttulos usando desde <h1> at <h6>.
<mark> Para diferenciar texto.
<meter> - Elemento de medida, usado apenas se o valor mximo e mnimo forem conhecidos.
<nav> Para a seco de navegao.
<progress> Informa o estado do trabalho em execuo.
<ruby> Para anotao ruby.
<rt> - Para explicao da anotao ruby.
<rp> Elemento usado para mostrar contedo quando o navegador no suportar o elemento
ruby.
<section> Para uma seco no documento, como captulos, cabealhos, rodaps ou outras
seces.
<time> - Para definir tempo ou data, ou ambos.
Entrar
Escola Criatividade no Facebook

Voc curte isto.Curtir
(desfazer)Pgina do
Curtir administradorErroVoc curte
isto.Curtir (desfazer)Pgina
do administradorErro
705704 pessoas curtiram Escola
Criatividade
<wbr> Quebra de palavra, para definir uma quebra de linha.
Novos elementos de mdia

<audio> Para contedo multimdia, sons, msica ou outros streams de udio.
<video> - Para contedo vdeo, como um clipe de vdeo ou outros streams de vdeo.
<source> Para recursos media para os elementos de media, definido dentro dos elementos
de udio ou vdeo.
<embed> Para contedo embutido, como um plug.
O elemento tela
<canvas> Para a criao de grficos atravs de script.
Novos elementos de formulrios

<datalist> Uma lista de opes para valores de introduo
<keygen> Gera passwords para autenticao de utilizadores.
<output> Para diferentes tipos de output, como o que criado atravs de um script.
Novos valores de atributos

tel - O valor de introduo um nmero de telefone.
search O campo de introduo um campo de pesquisa.
Os Mais Comentadores do Ms
Escola Dinheiro (21)
Jonathan [JCM] (5)
Victor Gabriel (4)
co relarts-criativos (3)
Eliezer Cardoso (3)
Srgio Carvalho (3)
C. Eduardo Alencar (2)
Danilo (2)
url - O valor de introduo um URL.

email - O valor de introduo um ou mais endereos de e-mail.
datetime O valor de introduo uma data ou hora.
Darlyn (2)
Dioney Vtor (2)
date - O valor de introduo uma data.

month o valor de introduo um ms.
week o valor de introduo uma semana.
time o valor de introduo um tipo de tempo.
datetime-local o valor de introduo uma data ou tempo local.
number o valor de introduo um nmero.
Temas
Aplicaes
Blogs
range o valor de introduo um nmero dentro de um dado intervalo.
Design Grfico
color O valor de introduo uma cor em formato hexadecimal, como #009900
Fotografia
2. VDEO HTML
Freebies
At agora, nunca foi estabelecido um formato universal para mostrar vdeos numa pgina web. Hoje,
Freelancer
os vdeos so mostrados atravs de um plugin, sendo que o mais usado o Flash. No entanto, nem
todos os navegadores tm os mesmos plugins, sendo necessrio instalar aplicaes complementares
para fazer o trabalho. Com HTML5, ser possvel introduzir um formato universal de introduo de
vdeo atravs do elemento <video>.
Inspirao
Photoshop
Programao
Formatos de Vdeo
Publicidade
Os formatos de vdeo actualmente suportados so Ogg e MPEG-4. No entanto, devido s
Recursos
constantes actualizaes dos navegadores, no h uma lista de compatibilidades actual e concisa

entre os browsers e os formatos de vdeos.
Tipografia
Tutoriais
Como funciona?
Wallpapers

Para introduzir vdeo em HTML5, tudo o que necessrio :
1
2
<video src="movie.ogg" controls="controls">

video>
O atributo controls para introduzir o reproduzir, pausar, e controlo de volume.
Tambm ser boa ideia incluir os atributos de largura e altura. Para navegadores que no
suportam o elemento vdeo, insira um comentrio dentro das tags <video>
1
2
3
<video src="movie.ogg" width="320" height="240" controls="controls">

O seu navegador no 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 vdeo no Safari, ter de estar em MPEG-4. Felizmente, possvel introduzir
mais de uma fonte do vdeo, pelo que podemos introduzir o vdeo em OGG e MPEG-4, para poder
ser reproduzido nos navegadores citados. O Internet Explorer 8 no suporta qualquer um deles,
mas est previsto que a sua verso 9 venha colmatar esta lacuna. Vejamos um exemplo:
1
2
3
4
5
<video width="320" height="240" controls="controls">

<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
O seu navegador no suporta o elemento vdeo de HTML5.
video>
Webdesign
Amigos e Parceiros
Carros Usados
Diretrio Artigos
Diretrio Blogs
Escola Dinheiro
Futebol em Directo
Meteorologia
Templates Wordpress
Vagas de Emprego
Artigos Recomendados
Atributos vdeo
10 E-Books grtis essenciais para Web

Designers
Atributo - Valor do atributo Descrio
15 Extenses de Desenvolvimento Web

para integrar no browser
autoplay autoplay Define se o vdeo ir ser exibido assim que estiver pronto
75+ Ferramentas PHP extremamente

teis
controls controlos Define os controlos que iro ser exibidos.
15 aplicaes desktop Mac e Windows

para bloggar
height pixeis Define a altura do vdeo.
10 razes para o seu cdigo no validar

(e como resolv-las)!
loop loop Define se o vdeo ir ser repetido quando acabar.
10 Extenses Google Chrome para

Desenvolvedores
preload preload Define se o vdeo ir ser carregado ao mesmo tempo que a pgina ir ser
10 templates que resolvem problemas

aos desenvolvedores para web
carregada, e pronto para ser reproduzido. ignorado se o atributo autoplay estiver activo.
src url Define a fonte do vdeo, em um url.
width Define a largura do vdeo.
3. AUDIO HTML
Tal como no caso do vdeo HTML, no houve at agora um formato universal para reproduo de
As 10 melhores plataformas para criar

um blog
50 Aplicaes Web alternativas s
Aplicaes Desktop
15 Aplicaes Web fantsticas para
Professores
40 Ferramentas CSS Extremamente
teis e Poderosas
audio. A reproduo era feita atravs de plugins como Flash. Agora com HTML5 e a introduo do
elemento <audio>, possvel fazer a reproduo num formato universal.
Formatos de vdeo
De momento h 3 formatos suportados, Ogg Vorbis, MP3 e Wav, mas tal como no vdeo, no h
uma tabela actual e concisa da relao entre o suporte dos navegadores e os formatos. Aquilo
que garantido que o Internet Explorer 8 no suporta este elemento.
Como funciona?
Para introduzir o audio com HTML5, basta introduzir o elemento audio:
Assinar o Blog
Escolha os contedos a assinar:
RSS COMPLETO
RSS RESUMIDO
POR EMAIL
TWITTER
CATEGORIAS
NEWSLETTER

Ficou Confundido? Clique aqui!
1
2
<audio src="song.ogg" controls="controls">

audio>
O atributo controls para introduzir os controlos de reproduzir, pausar e controlo de volume.
Deve tambm ser introduzido um comentrio, dentro do elemento audio, para os navegadores
que no suportarem este elemento.
1
2
3
<audio src="song.ogg" controls="controls">

O seu navegador no suporta a reproduo de audio HTML5.
audio>
Mais uma vez, podem ser introduzidas vrias fontes do contedo, para suporte de vrios
navegadores:
1
2
3
4
5
6
<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 no suporta reproduo de audio HTML5.
audio>
Atributos udio
Atributos Valores de Atributos Descrio
autoplay autoplay Define se o udio ir ser reproduzido assim que estiver pronto.
controls controls Define quais os controlos que iro estar disponveis.
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 pgina, e
pronto a reproduzir.
src url Define o url do udio a reproduzir.
4. TELA HTML5 (CANVAS)

O elemento canvas permite introduzir grficos no documento atravs de Javascript. uma rea
rectangular em que se tem o controlo de todo e qualquer pixel, atravs de mtodos para criar caixas,
crculos, caracteres e ainda adicionar imagens.
Criando o elemento canvas

Para criar o elemento canvas, basta introduzir o seguinte cdigo HTML
1
<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 no tem por si s capacidade de fazer a criao de imagens, sendo por isso
necessrio faz-lo atravs de Javascript, e dentro da sua tag <script>. Vejamos um exemplo da
criao de um rectngulo.
1
2
3
4
5
6
O Javascript procura o elemento atravs da funo .getElementById, depois cria um objecto em

contexto atravs da funo .getContext(2d), que neste caso um objecto que faz parte do
HTML5, que permite a introduo de caixas, crculos, caracteres, imagens, entre outros.
As 2 linhas fillStyle e fillRect criam umrectngulo, em que fillRect desenha-o com a sua posio
tamanho e forma e fillStyle torna-o verde atravs de cdigo hexadecimal.
Passo a explicar os valores de fillRect(1,2,3,4):
1. Coordenadas X, em que X o topo da pgina.

2. Coordenadas Y, em que Y o lado esquerdo da pgina.
3. Largura do rectngulo
4. Altura do rectngulo
Quer isto dizer que o nosso rectngulo ir ser desenhado no canto superior esquerdo da pgina.
Exemplo de colocao de imagem:

1
2
3
4
5
6
7
8
9
Muito mais h a descobrir sobre HTML5 e a capacidade de os navegadores suportarem as suas

funes nas suas novas verses.
E VOC, J USA HTML5?

Caso tenha dvidas, dicas de HTML5 para partilhar ou simplesmente um comentrio positivo ou
negativo relativamente ao artigo, no deixe de comentar! A sua opinio importante para ns.
Participe no artigo!
At j!
Voc curte Aprender HTML5 em 4 passos! |
Autor: Diogo Espinha

Blog do Autor | Artigos do Autor: Diogo Espinha
Workaholic e totalmente viciado em computadores, Internet e desporto
motorizado. Adora praticar desporto, um curioso da programao em PHP,
CSS e HTML5 e no dispensa a companhia do seu Mac OSX 86 Snow Leopard!
Para os seus Trabalhos de Desenvolvimento Web:
Gostou deste artigo? Ento torne-se f do Blog no Facebook!

Entrar
Escola Criatividade no Facebook

Voc curte Escola Criatividade.Curtir (desfazer)Pgina do
Curtir administradorErroVoc curte isto.Curtir (desfazer)Pgina do
administradorErro
705704 pessoas curtiram Escola Criatividade
Artigos Recomendados
Introduo ao HTML5 O que h de novo?
Comentrios dos Alunos

Comente o Artigo!
Nome
E-mail
URL (opcional)
Comentar!
Notificar-me de novas respostas aos comentrios!
Este site SEU, portanto, sempre que tiver

sugestes
de
melhorias,
recomendaes
contedos
ou
simplesmente
algum
tipo
de
TORNE-SE MEMBRO!
MEMBROS PREMIUM!
de
feedback para dar, ns gostaramos imenso de o

ouvir. Ajude-nos a melhorar! Ns tentaremos
comprometer-nos com esse objectivo!
FAZER SUGESTO
ASSINANTES
SEGUIDORES
FS
COMENTRIOS
245
115
703
632
CRIADO POR MANOPLIA
HOSPEDADO POR PT WEB SERVICES

2009-2010 | TODOS OS DIREITOS RESERVADOS

Aprender HTML5 em 4 Passos! - Escola Criatividade

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Aprender HTML5 em 4 Passos! - Escola Criatividade

Hochgeladen von

Copyright:

Verfügbare Formate

3 ALUNOS ONLINE \\ ESCOLAS

Home / Programao /Aprender HTML5 Em 4 Passos!

Aprender HTML5 em 4 passos!

08-11-2010, em Programao, por Diogo Espinha

At 90% OFF em Quase Tudo

Autodesk Inventor - Vdeo

Videos | Produo F4E

Voc tem um Blog? Ganhe

Ol Visitante! Se novo por aqui, talvez queira subscrever o

Como de conhecimento geral, o HTML5 chegou recentemente ao mundo da internet. Ainda no

Para os seus Trabalhos:

Aprender HTML5 em 4 passos! | Escola Criatividade

Artigos Populares este Ano

14 jogos de browser fantsticos e

Irei destacar os novos elementos, divididos nas suas categorias:

Novos elementos de marcao

50 Exemplos de Publicidade Criativa

As 10 melhores plataformas para

25 Wallpapers Escuros de Alta

<figure> Para agrupar uma seco de contedo no relacionado, como um vdeo.

Escola Criatividade no Facebook

Aprender HTML5 em 4 passos! | Escola Criatividade

<wbr> Quebra de palavra, para definir uma quebra de linha.

Novos elementos de mdia

Novos elementos de formulrios

Novos valores de atributos

url - O valor de introduo um URL.

date - O valor de introduo uma data.

range o valor de introduo um nmero dentro de um dado intervalo.

color O valor de introduo uma cor em formato hexadecimal, como #009900

Os formatos de vdeo actualmente suportados so Ogg e MPEG-4. No entanto, devido s

constantes actualizaes dos navegadores, no h uma lista de compatibilidades actual e concisa

Aprender HTML5 em 4 passos! | Escola Criatividade

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

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

<video src="movie.ogg" width="320" height="240" controls="controls">

<video width="320" height="240" controls="controls">

10 E-Books grtis essenciais para Web

Atributo - Valor do atributo Descrio

15 Extenses de Desenvolvimento Web

75+ Ferramentas PHP extremamente

controls controlos Define os controlos que iro ser exibidos.

15 aplicaes desktop Mac e Windows

height pixeis Define a altura do vdeo.

10 razes para o seu cdigo no validar

loop loop Define se o vdeo ir ser repetido quando acabar.

10 Extenses Google Chrome para

10 templates que resolvem problemas

src url Define a fonte do vdeo, em um url.

width Define a largura do vdeo.

As 10 melhores plataformas para criar

Aprender HTML5 em 4 passos! | Escola Criatividade

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

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

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

4. TELA HTML5 (CANVAS)

Criando o elemento canvas

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

Desenhando com Javascript

O Javascript procura o elemento atravs da funo .getElementById, depois cria um objecto em

Aprender HTML5 em 4 passos! | Escola Criatividade

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