arduino, eletrônica, robotica...

HTML5 para Iniciantes. Use-o agora, é fácil!

Ok, há uma série de artigos por aí sobre HTML5, especialmente desde que o Google Wave chegou (porque é o grande primeiro aplicativo a incorporar a linguagem), mas todas as informações que você precisa saber para começar a usá-la agora sem complicação, baseado em vários sites / artigos / tutoriais. Espero neste artigo, ser capaz de amalgamar e condensar um monte de informações para que qualquer pessoa com conhecimentos básicos em HTML possa começar a usá-lo.

html5.0

Como eu tenho certeza que você provavelmente já sabe, o Internet Explorer não oferece suporte a HTML5. Surpresa, surpresa. Portanto, a primeira coisa que precisamos fazer é:

1. 1. Hack IE usando Javascript

loveIE

Infelizmente isso é inevitável se você quiser usar HTML5 em todos os principais navegadores. A única alternativa seria a de construir o seu site duas vezes, e ninguém quer fazer isso!

Existe um site ótimo chamado HTML5Doctor que prevê a correção perfeita. Eles gentilmente escreveram um pouco de Javascript, que, se incluído no seu <head> IE vai forçar a "ver" os elementos de HTML5 seguinte:

<article>, <aside>, <audio>, <bb>, <canvas>, <datagrid>, <datalist>, <details>, <dialog>,
<eventsource>, <figure>, <footer>, <header>,
<hgroup>, <mark>, <menu>, <meter>, <nav>,
<output>, progress>, <section>, <time>, e o
ultimo mas não menos importante <video>.

Você pode baixá-lo aqui .

Obviamente, usando Javascript não é a correção ideal, porque se você desativá-lo, em seguida, a página ainda não vai funcionar.

HTML5 também sofre com problemas no Firefox 2 e Camino, estes dois browsers utilizam o motor de renderização Gecko. Estes problemas são muito mais difíceis de corrigir, mas, felizmente, os navegadores só tem uma pequena parcela do mercado, então se você não quiser ignorá-los, o HTML5Doctor te ensina um hack para isso também.

Agora que temos todos os principais navegadores (IE, Safari, Chrome, Firefox, Opera) para reconhecer o código, podemos:

2. 2. Comece a usar!

yey

Um dos principais benefícios do HTML5 é que somos capazes de nos livrarmos do excesso de código duplicado. Você não tem que definir tudo por um "id" ou uma "classe", porque os elementos ja são padrão...

Entre outros elementos, para o seu cabeçalho você pode simplesmente usar <header>, <nav> para utilizar a navegação, para as áreas de conteúdo use <section>, e para o rodapé, use <footer>. Além disso, dentro de um <section> você pode dividir seu conteúdo usando <article>.
Você ainda pode continuar usando a <div id="header">, isso não vai parar de trabalhar, só que agora há um caminho melhor e mais simples de fazê-lo.

Há outros dois grandes avanços em HTML5, que vai tornar a vida muito mais simples para os desenvolvedores. O primeiro é:

3. 3. A tag <video>

putEmUp

Não vou repetir: "Flash está morto" porque para falar disso preciso de outro post inteiro, tudo o que eu vou dizer é isto ... Na minha opinião o Flash irá sofrer com a tag <video> mas não irá embora em breve, e uma das principais razões para isso é a segurança.

Para usar a tag <video> tudo que você tem a fazer é esta:

Se você quiser que as pessoas não vejam seu video você pode fazer o seguinte::

<video src=video.ogv>
<p>Seu navegador não consegue visualizar este conteúdo: <a href=”video.ogv”>Download video</a>

Há todas as outras coisas que você pode fazer com o vídeo também, tais como: Personalize os controles têm acessibilidade do teclado nativo, e com um pequeno hack ou dois você pode até mesmo adicionar legendas, em várias línguas!

Um problema chato com o vídeo é que a Apple decidiu não apoiar o formato OGG open source em Safari, em vez de optar por H264, assim, a fim de atender a todos os browsers precisamos incluir duas fontes, uma para cada tipo de arquivo. A coisa boa é que o navegador irá detectar automaticamente qual ele precisa usar e simplesmente não vai exibir o outro:

<video width=320 height=240 controls>
<source src=”video.ogv” type=”video/ogg”>
<source src=”video.mp4″ type=”video/mp4″>
<p>Seu navegador não consegue visualizar este conteúdo: <a href=”video.ogv”>Download video</a>
</video>

O segundo avanço importante que eu estou realmente animado sobre é:

4. 4. Validação de Formulário!

nojquery

Infelizmente, ainda não é suportado pela maioria dos navegadores, na verdade eu estou bem certo de que o Opera é o único no momento. No entanto eu queria incluí-lo só porque eu acho que vai ser brilhante ...

Em vez de andar com Javascript você vai ser capaz de validar formulários, simplesmente aplicando um tipo de entrada, e dizendo-lhe se é necessário ou não:

Você também pode usar autofocus como este:

5. 5. Em conclusão ...

Mesmo ainda estando longe de apoio, a especificação HTML5 final não está sequer terminado ainda, nós podemos começar a usar (a maioria) das coisas que estão descritas acima, e eu realmente acho que deveríamos ... Quanto mais as pessoas começarem a usar , o mais rápido a web vai avançar, ainda mais pressão será colocada em pessoas como a Microsoft a ceder a padrões web e algo corretamente apoio para uma mudança.

Exibições: 1778

Curtir

0 membros curtem isto

Próximo Post >

Comentar

Você precisa ser um membro de Laboratorio de Garagem (arduino, eletrônica, robotica, hacking) para adicionar comentários!

Entrar em Laboratorio de Garagem (arduino, eletrônica, robotica, hacking)

Comentário de Carlos M Herrera em 14 outubro 2010 às 23:28: É um bom progresso, mas vamos esperar para novos progressos.

Comentário de Augusto Fernandes de Araújo em 2 outubro 2010 às 21:59: Gostei das suas explicações... as quais, pasei a adorar tais procedimentos... Grato ... muito bom...

Comentário de Robson santos de oliveira junior em 29 setembro 2010 às 20:42: Cacilde, estava atras de soluções para o hmtl 5. quando ele ficar completo com a proxima atualização dos browsers , vai arrebentar com o flash. a apple ta fazendo escola...excluiu o flash do iphone e o html5 vai acabar por enterra-lo.

Comentário de Eric GREGO em 29 setembro 2010 às 13:44: Muito bom este post! Parabéns...

Comentário de Júlio Carneiro em 27 setembro 2010 às 15:40: Concordo contigo Bruno, o futuro está mais proximo do que imaginamos.

Comentário de Bruno Habermann em 27 setembro 2010 às 12:38: Espero que o HTML5 seja finalizado e incorporado a todos os navegadores em breve, todo tipo de evolução e facilitação é sempre bem vinda, vejo um futuro promissor para este novo padrão de HTML