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.
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
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
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
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.
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
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
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
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
25. Globalcode – Open4education
De uma olhada também em:
• Integração Contínua - Travis
• Tests para Javascript - Jasmine ou QUnit
• Google Fonts
Outras ferramentas
Performance - porque é importante. Estudos mostram que quanto mais rápida a página mais usuários ele tem. A cada segundo de carregamento perde-se 11% em visualizações de página. Outro importante fator, google considera a velocidade de sua página no PageRank
Duas ferramentas para analisar performance
YSlow mostra graficos com e sem cache. Explicar porque os 3 itens são importantes.
O bundle como foi mostrado pode ser feito manualmente, pegando cada javascript e css e juntando eles.