HTML5 – O que tem de novo?

1,077 views

Published on

Vamos analisar o que mudou nesta nova versão, e o que você precisa saber sobre desenvolvimento Front End avançado com HTML5.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,077
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 – O que tem de novo?

  1. 1. 2 HTML5 – O que tem de novo? Rafael Almeida
  2. 2. 3 O que é HTML5? O HTML5 é a nova versão do HTML4. W3C focava suas atenções para a criação do XHTML 2.0; Já a WHATWG trabalhava em uma versão do HTML que trazia mais flexibilidade para a produção de websites e sistemas baseados na web. W3C (World Wide Web Consortium) WHATWG (Web Hypertext Application Technology Working Group)
  3. 3. 4 O que é HTML5? Ao contrário das versões anteriores, o HTML5 fornece ferramentas para a CSS e ao Javascript para fazerem seu trabalho da melhor maneira possível permitindo por meio de suas APIs, a manipulação das características destes elementos, de forma que o website ou a aplicação continue leve e funcional.
  4. 4. 5 O que é HTML5? ANTES <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. 5. 6 O que é HTML5? AGORA <!DOCTYPE html>
  6. 6. 7 O que é HTML5? ANTES <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. 7. 8 O que é HTML5? AGORA <meta charset="UTF-8">
  8. 8. 12 O que é HTML5?
  9. 9. 13 O que mudou no mercado?
  10. 10. 14 O que mudou no mercado? Fluxo de desenvolvimento Geralmente o fluxo padrão de desenvolvimento é linear, principalmente em equipes pequenas (agencias, produtoras, etc). Com os padrões web, esse cenário muda para fluxo paralelo.
  11. 11. 15 O que mudou no mercado? designer back-endprojeto
  12. 12. 16 O que mudou no mercado? designer back-endfront-end
  13. 13. 17 O que mudou no mercado? wireframe prototipo design wireframe prototipo front-end wireframe prototipo back-end
  14. 14. 18 O que mudou no mercado? wireframe prototipo design front-end back-end
  15. 15. 19 O que tem de novo no HTML5?
  16. 16. 20 O que tem de novo no HTML5? O que mudou com HTML5? ➢ Novos elementos; ➢ Novos atributos; ➢ Total suporte a CSS3; ➢ Áudio e Vídeo; ➢ Gráficos 2D e 3D; ➢ Local Storage; ➢ Local SQL Database; ➢ Aplicações web; ➢ Muito mais...
  17. 17. 21 O que tem de novo no HTML5? Elementos Semânticos Novos elementos para cabeçalhos, rodapés, menus, seções, artigos e outros. Também tivemos uma melhoria significativa em elementos de formulários como novos atributos, inputs e validações automáticas.
  18. 18. 22 O que tem de novo no HTML5? Elementos Semânticos
  19. 19. 23 O que tem de novo no HTML5? Gráficos 2D e 3D Podemos desenhar gráficos ou objetos mais facilmente; ➢ Canvas; ➢ SVG; ➢ CSS3 (2D/3D)
  20. 20. 24 O que tem de novo no HTML5? Multimédia Podemos assistir vídeos, ouvir músicas mais fácil do que nunca. ➢ Audio API ➢ Video API
  21. 21. 25 O que tem de novo no HTML5? Aplicações com HTML5 Hoje conseguimos fazer grandes aplicações mais facilmente do que nunca com HTML5; ➢ Local data storage; ➢ Local file access; ➢ Local SQL database; ➢ Application cache; ➢ Javascript workers; ➢ XHTMLHttpRequest 2;
  22. 22. 26 O que tem de novo no HTML5? Além disso ainda podemos fazer muito mais como aplicações em tempo real, acessar hardware dos dispositivos (Desktop / Mobile) e fazer aplicações mais performáticas.
  23. 23. 27 O que eu preciso saber antes?
  24. 24. 28 O que eu preciso saber antes? Eis que surge a pergunta: “O que eu preciso saber antes de começar a usar HTML5?”
  25. 25. 29 O que eu preciso saber antes? HTML + CSS + JavaScript Agora depende de até onde você pretende evoluir.
  26. 26. 30 O que eu preciso saber antes? Entenda o princípio das coisas A base continua sendo HTML e CSS, então não precisamos pensar muito e ver que HTML5 e CSS3 é o primeiro passo.
  27. 27. 31 O que eu preciso saber antes? Aprenda JavaScript JavaScript é uma linguagem de programação de fácil aprendizado e muito poderosa por sinal. Teste coisas novas, imagine como certa funcionalidade acontece e entenda que JavaScript não é jQuery.
  28. 28. 32 O que eu preciso saber antes? Estude aquilo que você usa A tecnologia muda constantemente, se saiu algo novo por que não aprender? Design Responsivo, novas ferramentas, atualizações...
  29. 29. 33 O que eu preciso saber antes? Sim, você vai ter que aturar o IE Mesmo com novas versões de navegadores, o mercado ainda utiliza versões que ainda não dão suporte a certas funcionalidades do HTML5.
  30. 30. 34 Mas e o Google?
  31. 31. 35 Mas e o Google? Utilizando HTML5 da forma certa, você pode ter certeza que além do seu código ficar mais organizado, o valor semântico da informação vai fazer mais sentido para os motores de busca. Assim você aumenta a probabilidade de seu site ficar em uma melhor posição e isso também faz você ser valorizado.
  32. 32. 36 E tem mais...
  33. 33. 37 E tem mais... Saber desenvolver aplicações com HTML5 pode te levar a outro nível.
  34. 34. 38 E tem mais... O mercado mobile está crescendo rápido em todo o mundo e podemos desenvolver aplicações móveis com HTML5.

×