Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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?
Nächste SlideShare
Wird geladen in …5
×

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

1.719 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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?

×