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

Globalcode – Open4education

Ferramentas e Bibliotecas que você deveria estar utilizando

Desenvolvimento Web


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


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


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


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


Developer Tools Chrome

Fácil de desenvolver, experimentar alterações e encontrar bugs


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


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


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


DEMO

Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/debugging


YSlow, PageSeepd, Sprite e Bundle

Alta Performance


YSlow e PageSpeed

•http://developer.yahoo.com/yslow/•https://developers.google.com/speed/


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.


DEMO

Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/bundle


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


DEMO

Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/bundle


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


DEMO

Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/sprite


Modernizr

Usar HTML 5 e CSS 3


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


DEMO

Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/modernizr


Twitter Bootstrap

Design Responsivo


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


DEMO

Código Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/twitter-bootstrap


De uma olhada também em:• Integração Contínua - Travis

• Tests para Javascript - Jasmine ou QUnit

• Google Fonts

Outras ferramentas


Dúvidas?

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

Technology

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