Upload
max-claus-nunes
View
1.117
Download
0
Embed Size (px)
DESCRIPTION
TDC 2013 - Exemplos da palestra de Ferramentas e Bibliotecas que você deveria estar utilizando
Citation preview
Globalcode – Open4education
Ferramentas e Bibliotecas que você deveria estar utilizando
Desenvolvimento Web
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
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
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
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
Globalcode – Open4education
Developer Tools Chrome
Fácil de desenvolver, experimentar alterações e encontrar bugs
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
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
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
Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/debugging
Globalcode – Open4education
YSlow, PageSeepd, Sprite e Bundle
Alta Performance
Globalcode – Open4education
YSlow e PageSpeed
•http://developer.yahoo.com/yslow/•https://developers.google.com/speed/
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.
Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/bundle
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
Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/bundle
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
Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/sprite
Globalcode – Open4education
Modernizr
Usar HTML 5 e CSS 3
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
Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/modernizr
Globalcode – Open4education
Twitter Bootstrap
Design Responsivo
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
Globalcode – Open4education
DEMO
Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/twitter-bootstrap
Globalcode – Open4education
De uma olhada também em:• Integração Contínua - Travis
• Tests para Javascript - Jasmine ou QUnit
• Google Fonts
Outras ferramentas
Globalcode – Open4education
Dúvidas?