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,486 views
1,394 views

Published on

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

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,486
On SlideShare
0
From Embeds
0
Number of Embeds
775
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Performance - porque é importante. Estudos mostram que quanto mais rápida a página mais usuários ele tem. A cada segundo de carregamento perde-se 11% em visualizações de página. Outro importante fator, google considera a velocidade de sua página no PageRank
  • Duas ferramentas para analisar performance
  • YSlow mostra graficos com e sem cache. Explicar porque os 3 itens são importantes.
  • O bundle como foi mostrado pode ser feito manualmente, pegando cada javascript e css e juntando eles.
  • 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?

    ×