Aula de HTML5 - DevCampos - www.devcampos.com.br

398 visualizações

Publicada em

Aula sobre HTML5 feita pela comunidade DevCampos.

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
398
No SlideShare
0
A partir de incorporações
0
Número de incorporações
198
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula de HTML5 - DevCampos - www.devcampos.com.br

  1. 1. Aula de HTML 5
  2. 2. Rodolfo Ribeiro Barreto
  3. 3. O novo DOCTYPE
  4. 4. <!-- Essa tag foi totalmente reformulada de forma que se tornasse menor e mais padronizada. Ela caracteriza todo o html contido abaixocomo sendo html 5 VERSÃO ANTIGA <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> --> <!DOCTYPE html>
  5. 5. A tag script e o resultado da sua dieta
  6. 6. <!-- No HTML 5 a tag de inclusão javascript também ficou mais leve --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0-rc1/jquery.min.js" defer></script>
  7. 7. Um dos passos para tornar o seu site mobile (View Port)
  8. 8. <!-- Criada para os aparelhos da Apple, a viewport facilita a manipuação da resolução do que é apresentado para dispositivos móveis --> <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. 9. UTF-8 o melhor padrão
  10. 10. <!-- O charset mudou e ficou mais fácil de escrever VERSÃO ANTIGA <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > --> <meta charset="UTF-8">
  11. 11. Uma boa prática para inclusão de arquivos JS (CDN’S)
  12. 12. <!-- CDN: Uma forma de melhorar o desempenho do carregando da sua aplicação é a utilização de uma CDN para arquivos JAVASCRIPT, CSS E IMAGENS. Uma CDN é um servidor dedicado a servir esses tipos de arquivos de uma forma mais rápida, reutilizável e centralizada. --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0-rc1/jquery.min.js" defer></script>
  13. 13. O uso do atributo DEFER
  14. 14. <!-- DEFER: O atributo defer faz com que o arquivo js requerido seja incluido após o carregamento do HTML,CSS e imagens. --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0-rc1/jquery.min.js" defer></script>
  15. 15. As novas tags: header, section, article, footer, adress e nav
  16. 16. <!-- A tag article funciona para o conteúdo que tenha sentido por sí só. Algo como um conteúdo de um blog. --> <article><article> <!-- Header por ser utilizada para qualquer cabeçalho dentro de qualquer combinação de tags. Obs: Como cada cabeçalho tem o seu escopo, você pode repetir uma tag h1 por exemplo. --> <header> <h1>Bem-vindo a aula de HTML 5</h1> </header>
  17. 17. <!-- Section serve para setornizar um conteúdo --> <section></section> <! -- conteudo --> <!-- Essa nova tag serve para criar a sua navegação no site. --> <nav> <ul> <li><a href="#">Geral</a></li> <li><a href="#">Artigos</a></li> </ul> </nav>
  18. 18. <!-- Tag que funciona para construir o rodapé de qualquer parte do layout Obs: Assim como a tag HEADER, ela tem escopo própio. --> <footer> <header> <p>Todos os direitos reservados</p> </header> </footer>
  19. 19. O atributo data-* e o seu enorme porder
  20. 20. <!-- Com atributo data-* podemos criar atributos personalidados. --> <input type="email" data-tipo-campo="email"> <input type="text" data-tipo-campo="inteiro"> <input type="text" data-tipo-campo="data">
  21. 21. Novos atributos para formulários: placeholder, focus, required e autocomplete
  22. 22. <!-- Novos atributos surgiram no html5 para facilitar a vida do programador front-end e padronizar o que é de uso comum a várias aplicações --> <!-- Esse atributo é uma espécie de texto de ajuda dentro do campo --> <input type="text" placeholder="Texto de ajuda"> <!-- O campo recebe imeditamente o foco --> <input type="text" autofocus="yes">
  23. 23. <!-- Após a utilização do campo, o html5 habilita no navegador (se houver) o recurso de salvar o texto digitado no mesmo. --> <input type="text" autocomplete="yes"> <!-- Especifica que esse campo é obrigatório --> <input type="text" required="yes">
  24. 24. Novos tipos de input: email, number, url, search e date
  25. 25. <!-- Novos tipos de campos contidos no html5 --> <input type="email"> <input type="date"> <input type="number"> <input type="search"> <input type="url">
  26. 26. Quando usar div
  27. 27. As diferenças entre usar id e class
  28. 28. A biblioteca HTML5SHIV

×