Front-End do Século XXI.I

1,075 views
974 views

Published on

HTML5, CSS3, JS and more things...

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

No Downloads
Views
Total views
1,075
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Front-End do Século XXI.I

  1. 1. Front-end do século XXI.IHTML5, CSS3, JS and more things... LuizTiago.com
  2. 2. Luiz Tiago...Front-end Manager @ MGR TecnologiaiPhone DeveloperjQuery Brasil TeamEspecialista em “Mobile Development”And more things...
  3. 3. Um pouco do passado... ultrad.com.br
  4. 4. Um pouco do passado...A web não tinha formaA W3C estava começandoOs desenvolvedores estavam começandoOs browsers estavam começando
  5. 5. Um pouco do passado...“Escolha o browser que você utiliza”“Qual resolução você utiliza?”( ) 640x480 ( ) 800x600
  6. 6. Estamos no passado?“Este site só funciona no Internet Explorer”“Resolução máxima recomendada”Sites que não funcionam em dispositivosmóveisFalta de mão-de-obra qualificada
  7. 7. Melhoria progressivaO projeto é feito de baixo para cimaEm seguida o desenvolvedor adicionafuncionalidades e melhorias para ocomportamento da página
  8. 8. Melhoria progressivaAs funcionalidades não são afetadasA navegabilidade não é afetadaApenas o layout e efeitos avançados podemsofrer pequenas alterações dependendo dobrowser em que estiver acessando
  9. 9. Timeline 2001 2011 20219,8 milhões 58 milhões ?????
  10. 10. Mercado
  11. 11. Mercado Como ser procurado? Como ser escolhido? Como manter destaque?
  12. 12. Tríade Client-sideHTMLCSS Javascript
  13. 13. Front-end Designer x EngineerHTML e CSS, hoje, é obrigação de todo o timeJavascript cresce cada dia maisPor que ficar de fora?
  14. 14. Hands on...
  15. 15. CSS3
  16. 16. CSS3Bordas arredondadasSombras e degradêsAnimações / TransiçõesFontes diferenciadasFácil criação de layout em colunasNem todo browser suporta...
  17. 17. CSS3
  18. 18. Não é CSS3,mas vale à pena!
  19. 19. CSS3Chrome / Firefox / Safari IE6 / IE7 / IE8
  20. 20. CSS3http://www.css3files.com/http://www.css3.info/http://www.css3generator.com/
  21. 21. Anunciado no início de 2009Conclusão (implementação 100%) previstapara 2022Esperar?
  22. 22. Navegadores antigos sãocomo TV’s preto e branco....
  23. 23. Navegadores modernossão como TV’s Full HD....
  24. 24. A TV já resolveu esse problema... (Zeno Rocha) E você esperando?
  25. 25. Tags semânticas<header> <footer><article> <section> <content><nav> <hgroup><data>entre outras...
  26. 26. Elementos multimídiaaudiovideo
  27. 27. Desenhoscanvassvg
  28. 28. Elementos que valorizam a semântica;Elementos multimídia;Facilidade para desenhos dinâmicos (canvas);Drag and Drop de elementos;Geolocation API;Armazenamento de dados no cliente;Não faz quase nada sozinho
  29. 29. var comoFaz =“JAVASCRIPT”;
  30. 30. JAVASCRIPTTop Languages @ Github
  31. 31. JAVASCRIPTNão tem nada haver com JavajQueryAJAXJSON Futuro!
  32. 32. jQueryHá muito tempo é a biblioteca Javascript demaior usoCódigo-abertoCross-browser :)Qualquer um pode contribuir
  33. 33. jQuery - quem usa?Google, Amazon, IBM, Microsoft, Twitter, Dell,Best Buy, NBC, EA, Match, ESPN, CBS News,Bank of AmericaEu...Você!
  34. 34. jQuery - como contribuir?Código https://github.com/jquery/jquery http://bugs.jquery.com/Tradução (EN -> PT-BR) http://www.jquerybrasil.org
  35. 35. More things...NoSQL PerformanceNode.JS MobileTestes EscalabilidadePatterns ModularizaçãoGit
  36. 36. Front-end do século XXI.IUm ninja não aparece muito...mas deixa um resultado considerável(Leo Balter)
  37. 37. Can I help you?@ luiztiagowww.luiztiago.comluiztiago@luiztiago.com

×