O documento discute ferramentas e bibliotecas úteis para desenvolvimento web, incluindo Developer Tools do Chrome para depuração, YSlow e PageSpeed para melhorar desempenho, Spritegen para criar sprites de imagem, Bundle para minificar arquivos, Modernizr para detectar recursos HTML5/CSS3 e Twitter Bootstrap para criar designs responsivos. Demonstrações ao vivo destas ferramentas são fornecidas através de links para código no GitHub.

1. Globalcode – Open4education
Ferramentas e Bibliotecas que você
deveria estar utilizando
Desenvolvimento Web

2. Globalcode – Open4education
1/2 Zombie Team
Max Claus Nunes Danimar Ribeiro
email: maxcnunes@gmail.com
skype: maxcnunes
github: github.com/maxcnunes
blog: blog.maxcnunes.net
email: danimaribeiro@gmail.com
github: github.com/danimaribeiro

3. Globalcode – Open4education
Agenda
Ferramentas
• Developer Tools Chrome
• YSlow e PageSpeed
• Sprintgen
• Bundle (ASP.NET MVC)
Bibliotecas e Frameworks
• Modernizer
• Twitter Bootstrap
Exemplos Utilizados: https://github.com/maxcnunes/TDC-2013

4. Globalcode – Open4education
Desenvolvimento Web:
O que o usuário quer?
• Design Amigável - Que seja fácil de usar e funcione bem em
qualquer dispositivo
• Velocidade de uso - Não quer ficar esperando página carregar

5. Globalcode – Open4education
Desenvolvimento Web:
O que o desenvolvedor quer?
• Fácil de desenvolver, experimentar alterações e
encontrar bugs
• Design Responsivo - Mas de uma maneira que não precise
começar do zero
• Alta Performance - Diminuir a quantidade e tamanho das
requisições HTTP
• Usar HTML 5 e CSS 3 - Garantindo que os usuários tenham a
melhor experiência possível independente do navegador que estejam
utilizando

6. Globalcode – Open4education
Developer Tools Chrome
Fácil de desenvolver, experimentar alterações e
encontrar bugs

7. Globalcode – Open4education
Podia ser mais simples...
Ver o problema
Editar código em
algum editor de
texto ou IDE
Salvar alterações
Recarregar o
Browser
novamente
Processo de codificação

8. Globalcode – Open4education
Developer Tools
Chrome
• 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. Globalcode – Open4education
Atalhos uteis
Source
• 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. Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/debugging

11. Globalcode – Open4education
YSlow, PageSeepd,
Sprite e Bundle
Alta Performance

12. Globalcode – Open4education
YSlow e PageSpeed
•http://developer.yahoo.com/yslow/
•https://developers.google.com/speed/

13. Globalcode – Open4education
YSlow e PageSpeed
• Provê estatisticas sobre a página
• Mostra quais itens precisam de atenção.
o
Diminuir quantidade de requisições
o
Usar cache do navegador
o
Minificar javascript e css
• Otimiza javascript e css.

14. Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/bundle

15. Globalcode – Open4education
Bundle
• O que é?
• Fazendo manualmente.
o
http://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. Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/bundle

17. Globalcode – Open4education
Sprite {tool: Spritegen}
• Reduz a quantidade de requisições HTTP
combinando várias imagens em um único
arquivo
• Utiliza background-position no CSS para atribuir a
imagem correta para cada elemento
• Ferramenta: Spritegen

18. Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/sprite

19. Globalcode – Open4education
Modernizr
Usar HTML 5 e CSS 3

20. Globalcode – Open4education
Modernizr
• Inclui HTML5 “shim”
• Detecta se o navegador do usuário tem suporte
para recursos do HTML5 e CSS3
• Possibilita que o desenvolvedor trate cada
situação do qual o browser não suporta
• YepNope - permite carregar apenas o que o
seu usuário necessita
Modernizr

21. Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/modernizr

22. Globalcode – Open4education
Twitter Bootstrap
Design Responsivo

23. Globalcode – Open4education
Twitter Bootstrap
• Melhor experiência visual para o usuário em
qualquer dispositivo e resolução
• CSS media query - estilo específico de acordo
com o dispositivo e resolução utilizada pelo
usuário
• Ponto de partida para um design reponsivo
• Fácil customização
• Temas - http://bootswatch.com/
Twitter Bootstrap

24. Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/twitter-bootstrap

25. Globalcode – Open4education
De uma olhada também em:
• Integração Contínua - Travis
• Tests para Javascript - Jasmine ou QUnit
• Google Fonts
Outras ferramentas

26. Globalcode – Open4education
Dúvidas?