ferramentas e bibliotecas que você deveria estar utilizando - desenvolvimento web
DESCRIPTION
TDC 2013 - Exemplos da palestra de Ferramentas e Bibliotecas que você deveria estar utilizandoTRANSCRIPT
![Page 1: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/1.jpg)
Globalcode – Open4education
Ferramentas e Bibliotecas que você deveria estar utilizando
Desenvolvimento Web
![Page 2: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/2.jpg)
Globalcode – Open4education
1/2 Zombie Team
Max Claus Nunes Danimar Ribeiro
email: [email protected]
skype: maxcnunes
github: github.com/maxcnunes
blog: blog.maxcnunes.net
email: [email protected]
github: github.com/danimaribeiro
![Page 3: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/3.jpg)
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
![Page 4: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/4.jpg)
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
![Page 5: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/5.jpg)
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
![Page 6: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/6.jpg)
Globalcode – Open4education
Developer Tools Chrome
Fácil de desenvolver, experimentar alterações e encontrar bugs
![Page 7: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/7.jpg)
Globalcode – Open4education
Podia ser mais simples...
Ver o problemaEditar código em algum editor de
texto ou IDE
Salvar alteraçõesRecarregar o
Browser novamente
Processo de codificação
![Page 8: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/8.jpg)
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
![Page 9: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/9.jpg)
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
![Page 10: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/10.jpg)
Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/debugging
![Page 11: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/11.jpg)
Globalcode – Open4education
YSlow, PageSeepd, Sprite e Bundle
Alta Performance
![Page 12: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/12.jpg)
Globalcode – Open4education
YSlow e PageSpeed
•http://developer.yahoo.com/yslow/•https://developers.google.com/speed/
![Page 13: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/13.jpg)
Globalcode – Open4education
YSlow e PageSpeed
• Provê estatisticas sobre a página• Mostra quais itens precisam de atenção.
o Diminuir quantidade de requisiçõeso Usar cache do navegadoro Minificar javascript e css
• Otimiza javascript e css.
![Page 14: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/14.jpg)
Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/bundle
![Page 15: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/15.jpg)
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
![Page 16: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/16.jpg)
Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/bundle
![Page 17: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/17.jpg)
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
![Page 18: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/18.jpg)
Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/sprite
![Page 19: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/19.jpg)
Globalcode – Open4education
Modernizr
Usar HTML 5 e CSS 3
![Page 20: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/20.jpg)
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
![Page 21: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/21.jpg)
Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/modernizr
![Page 22: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/22.jpg)
Globalcode – Open4education
Twitter Bootstrap
Design Responsivo
![Page 23: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/23.jpg)
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
![Page 24: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/24.jpg)
Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/twitter-bootstrap
![Page 25: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/25.jpg)
Globalcode – Open4education
De uma olhada também em:• Integração Contínua - Travis
• Tests para Javascript - Jasmine ou QUnit
• Google Fonts
Outras ferramentas
![Page 26: Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web](https://reader035.vdocuments.site/reader035/viewer/2022070302/548f48fab479590d6c8b4618/html5/thumbnails/26.jpg)
Globalcode – Open4education
Dúvidas?