HTML5 O que tem de novo?

  • Published on
    24-Dec-2014

  • View
    165

  • Download
    0

DESCRIPTION

Vamos analisar o que mudou nesta nova verso, e o que voc precisa saber sobre desenvolvimento Front End avanado com HTML5.

Transcript

  • 1. 2 HTML5 O que tem de novo? Rafael Almeida
  • 2. 3 O que HTML5? O HTML5 a nova verso do HTML4. W3C focava suas atencoes para a criaco do XHTML 2.0; J a WHATWG trabalhava em uma verso do HTML que trazia mais flexibilidade para a produco de websites e sistemas baseados na web. W3C (World Wide Web Consortium) WHATWG (Web Hypertext Application Technology Working Group)
  • 3. 4 O que HTML5? Ao contrrio das versoes anteriores, o HTML5 fornece ferramentas para a CSS e ao Javascript para fazerem seu trabalho da melhor maneira possivel permitindo por meio de suas APIs, a manipulaco das caracteristicas destes elementos, de forma que o website ou a aplicaco continue leve e funcional.
  • 4. 5 O que HTML5? ANTES
  • 5. 6 O que HTML5? AGORA
  • 6. 7 O que HTML5? ANTES
  • 7. 8 O que HTML5? AGORA
  • 8. 12 O que HTML5?
  • 9. 13 O que mudou no mercado?
  • 10. 14 O que mudou no mercado? Fluxo de desenvolvimento Geralmente o fluxo padro de desenvolvimento linear, principalmente em equipes pequenas (agencias, produtoras, etc). Com os padres web, esse cenrio muda para fluxo paralelo.
  • 11. 15 O que mudou no mercado? designer back-endprojeto
  • 12. 16 O que mudou no mercado? designer back-endfront-end
  • 13. 17 O que mudou no mercado? wireframe prototipo design wireframe prototipo front-end wireframe prototipo back-end
  • 14. 18 O que mudou no mercado? wireframe prototipo design front-end back-end
  • 15. 19 O que tem de novo no HTML5?
  • 16. 20 O que tem de novo no HTML5? O que mudou com HTML5? Novos elementos; Novos atributos; Total suporte a CSS3; udio e Video; Grficos 2D e 3D; Local Storage; Local SQL Database; Aplicacoes web; Muito mais...
  • 17. 21 O que tem de novo no HTML5? Elementos Semnticos Novos elementos para cabealhos, rodaps, menus, sees, artigos e outros. Tambm tivemos uma melhoria significativa em elementos de formulrios como novos atributos, inputs e validaes automticas.
  • 18. 22 O que tem de novo no HTML5? Elementos Semnticos
  • 19. 23 O que tem de novo no HTML5? Grficos 2D e 3D Podemos desenhar grficos ou objetos mais facilmente; Canvas; SVG; CSS3 (2D/3D)
  • 20. 24 O que tem de novo no HTML5? Multimdia Podemos assistir videos, ouvir msicas mais fcil do que nunca. Audio API Video API
  • 21. 25 O que tem de novo no HTML5? Aplicaes com HTML5 Hoje conseguimos fazer grandes aplicacoes mais facilmente do que nunca com HTML5; Local data storage; Local file access; Local SQL database; Application cache; Javascript workers; XHTMLHttpRequest 2;
  • 22. 26 O que tem de novo no HTML5? Alm disso ainda podemos fazer muito mais como aplicacoes em tempo real, acessar hardware dos dispositivos (Desktop / Mobile) e fazer aplicacoes mais performticas.
  • 23. 27 O que eu preciso saber antes?
  • 24. 28 O que eu preciso saber antes? Eis que surge a pergunta: O que eu preciso saber antes de comecar a usar HTML5?
  • 25. 29 O que eu preciso saber antes? HTML + CSS + JavaScript Agora depende de at onde voc pretende evoluir.
  • 26. 30 O que eu preciso saber antes? Entenda o princpio das coisas A base continua sendo HTML e CSS, ento no precisamos pensar muito e ver que HTML5 e CSS3 o primeiro passo.
  • 27. 31 O que eu preciso saber antes? Aprenda JavaScript JavaScript uma linguagem de programaco de fcil aprendizado e muito poderosa por sinal. Teste coisas novas, imagine como certa funcionalidade acontece e entenda que JavaScript no jQuery.
  • 28. 32 O que eu preciso saber antes? Estude aquilo que voc usa A tecnologia muda constantemente, se saiu algo novo por que no aprender? Design Responsivo, novas ferramentas, atualizaes...
  • 29. 33 O que eu preciso saber antes? Sim, voc vai ter que aturar o IE Mesmo com novas verses de navegadores, o mercado ainda utiliza versoes que ainda no do suporte a certas funcionalidades do HTML5.
  • 30. 34 Mas e o Google?
  • 31. 35 Mas e o Google? Utilizando HTML5 da forma certa, voc pode ter certeza que alm do seu cdigo ficar mais organizado, o valor semntico da informaco vai fazer mais sentido para os motores de busca. Assim voc aumenta a probabilidade de seu site ficar em uma melhor posico e isso tambm faz voc ser valorizado.
  • 32. 36 E tem mais...
  • 33. 37 E tem mais... Saber desenvolver aplicacoes com HTML5 pode te levar a outro nivel.
  • 34. 38 E tem mais... O mercado mobile est crescendo rpido em todo o mundo e podemos desenvolver aplicacoes mveis com HTML5.