Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento web
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,328 views

TDC 2013 - Exemplos da palestra de Ferramentas e Bibliotecas que você deveria estar utilizando

TDC 2013 - Exemplos da palestra de Ferramentas e Bibliotecas que você deveria estar utilizando

Statistics

Views

Total Views
1,328
Views on SlideShare
620
Embed Views
708

Actions

Likes
0
Downloads
6
Comments
0

7 Embeds 708

http://blog.maxcnunes.net 667
http://angular-rails-blog.herokuapp.com 18
http://localhost 14
http://feeds.feedburner.com 4
http://www.linkedin.com 3
http://translate.googleusercontent.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.

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

  • Globalcode – Open4educationFerramentas e Bibliotecas que vocêdeveria estar utilizandoDesenvolvimento Web
  • Globalcode – Open4education1/2 Zombie TeamMax Claus Nunes Danimar Ribeiroemail: maxcnunes@gmail.comskype: maxcnunesgithub: github.com/maxcnunesblog: blog.maxcnunes.netemail: danimaribeiro@gmail.comgithub: github.com/danimaribeiro
  • Globalcode – Open4educationAgendaFerramentas• Developer Tools Chrome• YSlow e PageSpeed• Sprintgen• Bundle (ASP.NET MVC)Bibliotecas e Frameworks• Modernizer• Twitter BootstrapExemplos Utilizados: https://github.com/maxcnunes/TDC-2013 View slide
  • Globalcode – Open4educationDesenvolvimento Web:O que o usuário quer?• Design Amigável - Que seja fácil de usar e funcione bem emqualquer dispositivo• Velocidade de uso - Não quer ficar esperando página carregar View slide
  • Globalcode – Open4educationDesenvolvimento Web:O que o desenvolvedor quer?• Fácil de desenvolver, experimentar alterações eencontrar bugs• Design Responsivo - Mas de uma maneira que não precisecomeçar do zero• Alta Performance - Diminuir a quantidade e tamanho dasrequisições HTTP• Usar HTML 5 e CSS 3 - Garantindo que os usuários tenham amelhor experiência possível independente do navegador que estejamutilizando
  • Globalcode – Open4educationDeveloper Tools ChromeFácil de desenvolver, experimentar alterações eencontrar bugs
  • Globalcode – Open4educationPodia ser mais simples...Ver o problemaEditar código emalgum editor detexto ou IDESalvar alteraçõesRecarregar oBrowsernovamenteProcesso de codificação
  • Globalcode – Open4educationDeveloper ToolsChrome• 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 – Open4educationAtalhos uteisSource• 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 – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/debugging
  • Globalcode – Open4educationYSlow, PageSeepd,Sprite e BundleAlta Performance
  • Globalcode – Open4educationYSlow e PageSpeed•http://developer.yahoo.com/yslow/•https://developers.google.com/speed/
  • Globalcode – Open4educationYSlow e PageSpeed• Provê estatisticas sobre a página• Mostra quais itens precisam de atenção.oDiminuir quantidade de requisiçõesoUsar cache do navegadoroMinificar javascript e css• Otimiza javascript e css.
  • Globalcode – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/bundle
  • Globalcode – Open4educationBundle• O que é?• Fazendo manualmente.ohttp://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 – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/bundle
  • Globalcode – Open4educationSprite {tool: Spritegen}• Reduz a quantidade de requisições HTTPcombinando várias imagens em um únicoarquivo• Utiliza background-position no CSS para atribuir aimagem correta para cada elemento• Ferramenta: Spritegen
  • Globalcode – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/sprite
  • Globalcode – Open4educationModernizrUsar HTML 5 e CSS 3
  • Globalcode – Open4educationModernizr• Inclui HTML5 “shim”• Detecta se o navegador do usuário tem suportepara recursos do HTML5 e CSS3• Possibilita que o desenvolvedor trate cadasituação do qual o browser não suporta• YepNope - permite carregar apenas o que oseu usuário necessitaModernizr
  • Globalcode – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/modernizr
  • Globalcode – Open4educationTwitter BootstrapDesign Responsivo
  • Globalcode – Open4educationTwitter Bootstrap• Melhor experiência visual para o usuário emqualquer dispositivo e resolução• CSS media query - estilo específico de acordocom o dispositivo e resolução utilizada pelousuário• Ponto de partida para um design reponsivo• Fácil customização• Temas - http://bootswatch.com/Twitter Bootstrap
  • Globalcode – Open4educationDEMOCódigo Fonte: https://github.com/maxcnunes/TDC-2013/tree/master/exemplos/twitter-bootstrap
  • Globalcode – Open4educationDe uma olhada também em:• Integração Contínua - Travis• Tests para Javascript - Jasmine ou QUnit• Google FontsOutras ferramentas
  • Globalcode – Open4educationDúvidas?