O que é HTML5?
É a nova versão da linguagem de marcação HTML, bastante aperfeiçoada. O HTML5 tornou a marcação muito mais clara, se adaptou a forma que os desenvolvedores estão trabalhando. Possibilita colocar áudio e vídeo nos sites sem uso de plugins, o que é positivo tanto para o desenvolvedor quanto para o usuário, que não precisa se preocupar com a atualização de plugins, facilita a forma que os desenvolvedores lidam com formulários, entre outras vantagens.
Novidades
A doctype do HTML5 é muito mais simples:
1
|
<!doctype html> |
A tag <script> também diminuiu, não necessitando mais do atributo “type”:
1
|
<script src=”arquivo.js”></script> |
Isso também é verdade para a tag <link>
Faça a marcação com menos preocupações
Letras maiúsculas ou minúsculas, fechar tags em si mesmas ou não (como <img src=”imagem.jpg” />), não importa. Claro que não devemos começar a escrever código ruim, isso apenas facilita a validação. E também, temos as novas tags, que ajudam o navegador a entender o seu conteúdo:
- <header> – É o topo do site, podendo ter a navegação.
- <nav> – Engloba links de navegação principal. Não deve ser utilizada para links fora da navegação.
- <section> – Para um grande grupo de conteúdo, podendo conter vários <article>.
- <aside> – Define conteúdo a parte do artigo em que esteja inserido.
- <footer> – Pode ser utilizado para o rodapé do site e para outras partes do site também.
Áudio
Para colocar áudio basta:
<áudio src=”musica.mp3”></áudio>
Os atributos autoplay, loop, controls mudam o player, sem necessidade de true ou false. Incluí-los os torna verdadeiros, excluí-los, falso.
Contudo, nem todos os navegadores suportam .mp3, então deve-se usar também .ogg e, para o Internet Explorer, o flash.
- .ogg – Firefox 3.5, Opera 10.5, Chrome 3.0 e Safari 3.0
- .mp3 – Chrome 3.0 e Safari 3.0.wav – Firefox 3.5, Opera 10.5, Chrome 3.0 e Safari 3.0
Vídeo
Funciona exatamente igual ao áudio:
1
|
<video src= "filme.mp4" controls width= "300" height "200" ></video> |
É bom definir tamanhos para o vídeo, já que normalmente ocupam mais espaço. E, claro, há variações de formato de acordo com o navegador:
- H.264 – Safari e IE9
- WebM ou codecs Theora – Chrome, Firefox e Opera
- Flash para o IE, claro.
Formulários
Há vários atributos novos para formulários que simplificam e complementam o desenvolvimento com Javascript e CSS. Vejam só:
- <input type=”text” placeholder=”stuff”> – texto cinza que desaparece quando em foco, por enquanto só funciona para Chrome e Safari
- <input type=”text” autofocus> – automaticamente foca no campo
- <input type=”text” required> – campo de preenchimento obrigatório
- <input type=”text” autocomplete=”off”> – “on” por padrão, como medida de segurança.
Mais atributos para formulários
Estes são particularmente úteis para celulares, pois o teclado muda de acordo com o “type” especificado. Porém, eles aparecem como campos de texto normais. Veja:
1
2
3
4
5
|
<input type= "tel" > <input type= "url" > <input type= "email" > |
Armazenamento local
Usar armazenamento local permite que aplicações web funcionem offline. Por exemplo, quando o usuário estiver usando a aplicação em um celular e perder o sinal, ele simplesmente continua utilizando e depois apenas atualiza os dados quando a conecção voltar. E os navegadores que suportam são: Opera, Firefox, Chrome, Safari e IE!
Como funciona
Funciona via Javascript, então os tipos de dados só poderão ser aqueles suportados por javascript: string, booleans e floats. Se for armazenar outro tipo de dado, terá que realizar parse. É permitido armazenar 5mb localmente por navegador. O Gmail em smartphone já utiliza armazenamento local.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
localStorage.key= "value" ; if ( typeof (localStorage) == ‘undefined’ ) { alert(‘Your browser does not support HTML5 localStorage. Try upgrading.’); } else { try { localStorage.setItem(“name”, “Hello World!”); //saves to the database, “key”, “value” } catch (e) { if (e == QUOTA_EXCEEDED_ERR) { alert(‘Quota exceeded!’); //data wasn’t saved due to quota exceed, error } } } |
Saiba mais
Este artigo se propõe mais a ser um guia geral de HTML5, não se aprofundando em um tópico específico, mas servindo de um guia geral. Para estudar mais, consulte:
Retirado de FrontEnd Brasil.
// Comente!
comentários