XIV sacomp ufpel desenvolvimento web

414 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
414
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

XIV sacomp ufpel desenvolvimento web

  1. 1. Desenvolvimento Web Filipe Vernetti Giusti Agile Development House
  2. 2. Sumário • Boas práticas de desenvolvimento de software (ou como ser feliz programando) – Comunicação – Code Standards (Padrões de codificação) – Controle de versão – Testes, code coverage (análise de cobertura de código) e integração contínua
  3. 3. Sumário • Desenvolvimento Web – Web standards (padrões web) – Semântica – Separação em camadas – Graceful degradation e JavaScript nãoobstrutivo – Performance – Ferramentas • Dúvidas
  4. 4. Boas práticas
  5. 5. Comunicação
  6. 6. Comentários no código Não comente o óbvio. // Abre o arquivo e retorna seu descritor $fp = fopen(“foobar.txt”, “r”);
  7. 7. Comentários no código Comentários devem explicar uma decisão e/ou facilitar o entendimento de um trecho de código.
  8. 8. Comentários no código // Ordena $array utilizando o selection sort $len = count($array) -1; for($i=0; $i<=$len ; $i++) { $ini = $i; for($j=$i+1; $j<=$len; $j++) if ($array[$j] < $array[$i]) $ini = $j; if ($ini != $i) { $troca = $array[$i]; $array[$i] = $array[$ini]; $array[$ini] = $troca; } }
  9. 9. Documentação (automatizada, é claro) Simples com RDoc, phpDocumentator, Doxygen... O esforço é de apenas pensar sobre o que método, classe, etc, faz e escrever com anotações especiais.
  10. 10. Documentação (automatizada, é claro) /** * Descrição curta de bar * * Descrição longa, executa intensamente {@link foo()} para conquistar o mundo * * @param $useless Não faz nada. * @return true */ function bar($useless){foo();return TRUE;} function foo(){}
  11. 11. Conversar Avisar quando iniciar uma tarefa. Avisar quando terminar tarefas (e já aproveita pra revisar os commits!)
  12. 12. Code Standards Tenha-os Siga-os
  13. 13. Code Standards É simples. Escolha, ajuste a IDE e pronto! Facilitam a legibilidade e mantém a consistência, tornando-se mais fácil analisar as diferenças em, por exemplo, uma ferramenta de controle de versão.
  14. 14. Controle de versão
  15. 15. Controle de versão • • • • CVS SVN Mercurial GIT Controlar versões enviadas ao cliente e organizar a resolução de bugs. Organizar o desenvolvimento de novas funcionalidades.
  16. 16. Testes, code coverage e integração contínua
  17. 17. Testes, code coverage e integração contínua Confiança de alterar o código sem estragar nada. O mínimo que se pode fazer são testes unitários. Code coverage ajuda a verificar se algum teste está faltando. Integração contínua garante que nenhum infeliz comitou e se esqueceu de rodar os testes antes.
  18. 18. Desenvolvimento Web
  19. 19. Web standards
  20. 20. Web standards História No começo havia o HTML. Era apenas texto, listas e links. Isso era chato. As pessoas queriam cores, fontes variadas e imagens. Surgiu o primeiro problema.
  21. 21. Web standards História Misturar conteúdo com apresentação.
  22. 22. Web standards História Cor de fundo, bordas, espaçamento, fontes, etc, tudo era definido no HTML. Ao mudar em uma página era preciso mudar em todas.
  23. 23. Web standards História Design limitado a uma coluna. Usar <tables> pareceu “tão” fácil.
  24. 24. Web standards História CSS
  25. 25. Web standards História Web standards incompletos Guerra dos browsers
  26. 26. Web standards História CSS hacks. Misturar interação com conteúdo.
  27. 27. Web standards Não existem padrões na web, apenas recomendações (W3C).
  28. 28. Web standards • Código HTML/XHTML válido • Código semanticamente correto • Separação de conteúdo (HTML), apresentação (CSS) e interação (JavaScript)
  29. 29. Web standards DOCTYPEs decidem o modo de renderização • Quirks • Quase Standards – Layout com tabelas • Standards
  30. 30. Web standards • Doctype Strict renderização o modo Standards • Doctype Transitional XHTML renderiza o modo quase Standards • Outros ou nenhum doctype renderiza o modo Quirks
  31. 31. Semântica
  32. 32. Semântica Use nomes e elementos com significado.
  33. 33. Semântica <table cellspacing="0" cellpadding="0"> <tr> <td class=“titulo">SACOMP</td> </tr> <tr> <td>Conteudo</td> </tr> </table>
  34. 34. Semântica <div class=“titulo">SACOMP</div> <div class="conteudo">Conteudo</div>
  35. 35. Semântica <h1>SACOMP</h1> <p>Conteudo</p>
  36. 36. Semântica <h2 class=“h3">Noticias</h2>
  37. 37. Semântica <h2 class=“conteudo-adicional">Noticias</h2>
  38. 38. Semântica <div class=“conteudo-adicional "> <h2>Noticias</h2> </div>
  39. 39. Semântica <div class="esquerda"> Navegação </div> <div class="direita"> Conteudo </div>
  40. 40. Semântica <div class=“navegacao"> Navegação </div> <div class=“conteudo-principal"> Conteudo </div>
  41. 41. Separação em camadas
  42. 42. Separação em camadas • Conteúdo (HTML) • Apresentação (CSS) • Interação (JavaScript)
  43. 43. Separação em camadas Por que separar em camadas? • Manutenção do código • Controle nas diversas mídias • Performance
  44. 44. Separação em camadas <div style=“color: red;"> Muito importante </div>
  45. 45. Separação em camadas <div style=“importante"> Muito importante </div>
  46. 46. Graceful degradation e JavaScript não-obstrutivo
  47. 47. Graceful degradation e JavaScript não-obstrutivo Nada de código JavaScript no HTML Sem eventos inline Melhorias progressivas
  48. 48. Graceful degradation e JavaScript não-obstrutivo <a href=“javascript:doStuff()"> Magic </a>
  49. 49. Graceful degradation e JavaScript não-obstrutivo <a href="#" onclick="doStuff(); return false"> Magic </a>
  50. 50. Graceful degradation e JavaScript não-obstrutivo <a href=“stuff.html" onclick="doStuff(); return false"> Magic </a>
  51. 51. Graceful degradation e JavaScript não-obstrutivo <a href=“stuff.html" class=“magic"> Magic </a>
  52. 52. Graceful degradation e JavaScript não-obstrutivo window.onload = function () { var magic = getElementsByClassName("magic"); for (var i=0, l=magic.length; i<l; i++) { magic.onclick = function () { doStuff(); return false; }; } };
  53. 53. Graceful degradation e JavaScript não-obstrutivo Elementos que dependem de JavaScript devem ser gerados com JavaScript.
  54. 54. Performance
  55. 55. Performance • • • • • CSS sprites Otimização de imagens Gzip Expire headers Deployment
  56. 56. Performance • Agrega diversas imagens em uma • Escolha da imagem por CSS
  57. 57. Performance
  58. 58. Performance #nav li a {background-image:url(‘sprite.gif')} #nav li a.item1 {background-position:0px 0px} #nav li a:hover.item1 {background-position:0px -72px} #nav li a.item2 {background-position:0px -143px;} #nav li a:hover.item2 {background-position:0px -215px;}
  59. 59. Performance 20 requisições HTTP se tornam uma Rollover sempre disponível
  60. 60. Performance Reduzir imagens ao máximo Usar o formato adequado pro tipo de imagem
  61. 61. Performance • Smush.it™ – Combina diversos otimizadores open-source – Compressão sem perdas – Remove meta-data supérflua
  62. 62. Performance • Gzip – Apache: mod_deflate – IIS 7: HTTP Compression Não comprimir imagens, pdfs, arquivos comprimidos Comprimir CSS, HTML, JS - arquivos de texto
  63. 63. Performance • Expire Headers – Apache: mod_expires – IIS 7: HTTP Expires Cache!
  64. 64. Performance • JavaScript deployment – Concatenar – Minimizar • JSMin • YUI Compressor
  65. 65. Ferramentas • Firefox Add-ons – Firebug – YSlow – HTML Validator – Inline code finder – Firefinder – QuickJava • Multiple IE
  66. 66. Ferramentas para Desenvolvimento Web Filipe Vernetti Giusti Agile Development House

×