Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Globalcode – Open4educationFerramentas e Bibliotecas que vocêdeveria estar utilizandoDesenvolvimento Web
Globalcode – Open4education1/2 Zombie TeamMax Claus Nunes Danimar Ribeiroemail: maxcnunes@gmail.comskype: maxcnunesgithub:...
Globalcode – Open4educationAgendaFerramentas• Developer Tools Chrome• YSlow e PageSpeed• Sprintgen• Bundle (ASP.NET MVC)Bi...
Globalcode – Open4educationDesenvolvimento Web:O que o usuário quer?• Design Amigável - Que seja fácil de usar e funcione ...
Globalcode – Open4educationDesenvolvimento Web:O que o desenvolvedor quer?• Fácil de desenvolver, experimentar alterações ...
Globalcode – Open4educationDeveloper Tools ChromeFácil de desenvolver, experimentar alterações eencontrar bugs
Globalcode – Open4educationPodia ser mais simples...Ver o problemaEditar código emalgum editor detexto ou IDESalvar altera...
Globalcode – Open4educationDeveloper ToolsChrome• Comandos: inspect, $0, monitorEvents• Custom rule css• Console Logging: ...
Globalcode – Open4educationAtalhos uteisSource• Ctrl+Shift+E - Executar no console código selecionado na aba Sources.• Ctr...
Globalcode – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/debugging
Globalcode – Open4educationYSlow, PageSeepd,Sprite e BundleAlta Performance
Globalcode – Open4educationYSlow e PageSpeed•http://developer.yahoo.com/yslow/•https://developers.google.com/speed/
Globalcode – Open4educationYSlow e PageSpeed• Provê estatisticas sobre a página• Mostra quais itens precisam de atenção.oD...
Globalcode – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/bundle
Globalcode – Open4educationBundle• O que é?• Fazendo manualmente.ohttp://refresh-sf.com/yui/• Integrado a sua linguagem de...
Globalcode – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/bundle
Globalcode – Open4educationSprite {tool: Spritegen}• Reduz a quantidade de requisições HTTPcombinando várias imagens em um...
Globalcode – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/sprite
Globalcode – Open4educationModernizrUsar HTML 5 e CSS 3
Globalcode – Open4educationModernizr• Inclui HTML5 “shim”• Detecta se o navegador do usuário tem suportepara recursos do H...
Globalcode – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/modernizr
Globalcode – Open4educationTwitter BootstrapDesign Responsivo
Globalcode – Open4educationTwitter Bootstrap• Melhor experiência visual para o usuário emqualquer dispositivo e resolução•...
Globalcode – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/twitter-bootstrap
Globalcode – Open4educationDe uma olhada também em:• Integração Contínua - Travis• Tests para Javascript - Jasmine ou QUni...
Globalcode – Open4educationDúvidas?
Upcoming SlideShare
Loading in …5
×

Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web

1,717 views

Published on

TDC 2013 - Exemplos da palestra de Ferramentas e Bibliotecas que você deveria estar utilizando

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web

  1. 1. Globalcode – Open4educationFerramentas e Bibliotecas que vocêdeveria estar utilizandoDesenvolvimento Web
  2. 2. Globalcode – Open4education1/2 Zombie TeamMax Claus Nunes Danimar Ribeiroemail: maxcnunes@gmail.comskype: maxcnunesgithub: github.com/maxcnunesblog: blog.maxcnunes.netemail: danimaribeiro@gmail.comgithub: github.com/danimaribeiro
  3. 3. Globalcode – Open4educationAgendaFerramentas• Developer Tools Chrome• YSlow e PageSpeed• Sprintgen• Bundle (ASP.NET MVC)Bibliotecas e Frameworks• Modernizer• Twitter BootstrapExemplos Utilizados: https://github.com/maxcnunes/TDC-2013
  4. 4. Globalcode – Open4educationDesenvolvimento Web:O que o usuário quer?• Design Amigável - Que seja fácil de usar e funcione bem emqualquer dispositivo• Velocidade de uso - Não quer ficar esperando página carregar
  5. 5. Globalcode – Open4educationDesenvolvimento Web:O que o desenvolvedor quer?• Fácil de desenvolver, experimentar alterações eencontrar bugs• Design Responsivo - Mas de uma maneira que não precisecomeçar do zero• Alta Performance - Diminuir a quantidade e tamanho dasrequisições HTTP• Usar HTML 5 e CSS 3 - Garantindo que os usuários tenham amelhor experiência possível independente do navegador que estejamutilizando
  6. 6. Globalcode – Open4educationDeveloper Tools ChromeFácil de desenvolver, experimentar alterações eencontrar bugs
  7. 7. Globalcode – Open4educationPodia ser mais simples...Ver o problemaEditar código emalgum editor detexto ou IDESalvar alteraçõesRecarregar oBrowsernovamenteProcesso de codificação
  8. 8. Globalcode – Open4educationDeveloper ToolsChrome• Comandos: inspect, $0, monitorEvents• Custom rule css• Console Logging: log, info, debug, warn, error, assert, group, time• Debugging: debugger, breaskpoints• Workspace• Local Modifications• Aba Network• Chrome HAR viewer
  9. 9. Globalcode – Open4educationAtalhos uteisSource• Ctrl+Shift+E - Executar no console código selecionado na aba Sources.• Ctrl+Shift+O - Buscar função pelo nome.• Esc - Abre/Fecha o console• Ctrl+F - Procurar no arquivo atual.• Ctrl+Shift+F - Procurar em todos os arquivos.• Ctrl+O - Buscar arquivo pelo nome.• Ctrl+Shif+J - Abrir Dev Tools direto na aba de Console
  10. 10. Globalcode – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/debugging
  11. 11. Globalcode – Open4educationYSlow, PageSeepd,Sprite e BundleAlta Performance
  12. 12. Globalcode – Open4educationYSlow e PageSpeed•http://developer.yahoo.com/yslow/•https://developers.google.com/speed/
  13. 13. Globalcode – Open4educationYSlow e PageSpeed• Provê estatisticas sobre a página• Mostra quais itens precisam de atenção.oDiminuir quantidade de requisiçõesoUsar cache do navegadoroMinificar javascript e css• Otimiza javascript e css.
  14. 14. Globalcode – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/bundle
  15. 15. Globalcode – Open4educationBundle• O que é?• Fazendo manualmente.ohttp://refresh-sf.com/yui/• Integrado a sua linguagem de preferência• O que ele faz por você• Minifica CSS• Minifica JS• Demo AspNet MVC
  16. 16. Globalcode – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/bundle
  17. 17. Globalcode – Open4educationSprite {tool: Spritegen}• Reduz a quantidade de requisições HTTPcombinando várias imagens em um únicoarquivo• Utiliza background-position no CSS para atribuir aimagem correta para cada elemento• Ferramenta: Spritegen
  18. 18. Globalcode – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/sprite
  19. 19. Globalcode – Open4educationModernizrUsar HTML 5 e CSS 3
  20. 20. Globalcode – Open4educationModernizr• Inclui HTML5 “shim”• Detecta se o navegador do usuário tem suportepara recursos do HTML5 e CSS3• Possibilita que o desenvolvedor trate cadasituação do qual o browser não suporta• YepNope - permite carregar apenas o que oseu usuário necessitaModernizr
  21. 21. Globalcode – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/modernizr
  22. 22. Globalcode – Open4educationTwitter BootstrapDesign Responsivo
  23. 23. Globalcode – Open4educationTwitter Bootstrap• Melhor experiência visual para o usuário emqualquer dispositivo e resolução• CSS media query - estilo específico de acordocom o dispositivo e resolução utilizada pelousuário• Ponto de partida para um design reponsivo• Fácil customização• Temas - http://bootswatch.com/Twitter Bootstrap
  24. 24. Globalcode – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/twitter-bootstrap
  25. 25. Globalcode – Open4educationDe uma olhada também em:• Integração Contínua - Travis• Tests para Javascript - Jasmine ou QUnit• Google FontsOutras ferramentas
  26. 26. Globalcode – Open4educationDúvidas?

×