Globalcode – Open4education

Ferramentas e Bibliotecas que você deveria estar utilizando

Desenvolvimento Web

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

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?