O documento discute boas práticas de desenvolvimento web, cobrindo tópicos como padrões web, separação de conteúdo e apresentação, desempenho e ferramentas. Ele enfatiza a importância de comunicação, padrões de código, controle de versão e testes durante o desenvolvimento.

1. Desenvolvimento Web
Filipe Vernetti Giusti
Agile Development House

3. 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

4. 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

5. Boas práticas

6. Comunicação

7. Comentários no código
Não comente o óbvio.
// Abre o arquivo e retorna seu
descritor
$fp = fopen(“foobar.txt”, “r”);

8. Comentários no código
Comentários devem explicar uma decisão
e/ou facilitar o entendimento de um trecho
de código.

9. 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;
}
}

10. 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.

11. 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(){}

12. Conversar
Avisar quando iniciar uma tarefa.
Avisar quando terminar tarefas (e já
aproveita pra revisar os commits!)

13. Code Standards
Tenha-os
Siga-os

14. 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.

15. Controle de versão

16. 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.

17. Testes, code coverage e
integração contínua

18. 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.

20. Desenvolvimento Web

21. Web standards

22. 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.

23. Web standards
História
Misturar conteúdo com
apresentação.

24. 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.

25. Web standards
História
Design limitado a uma coluna.
Usar <tables> pareceu “tão” fácil.

26. Web standards
História
CSS

27. Web standards
História
Web standards incompletos
Guerra dos browsers

28. Web standards
História
CSS hacks.
Misturar interação com conteúdo.

29. Web standards
Não existem padrões na web, apenas
recomendações (W3C).

30. 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)

31. Web standards
DOCTYPEs decidem o modo de
renderização
• Quirks
• Quase Standards – Layout com tabelas
• Standards

32. 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

33. Semântica

34. Semântica
Use nomes e elementos com significado.

35. Semântica
<table cellspacing="0" cellpadding="0">
<tr>
<td class=“titulo">SACOMP</td>
</tr>
<tr>
<td>Conteudo</td>
</tr>
</table>

36. Semântica
<div class=“titulo">SACOMP</div>
<div class="conteudo">Conteudo</div>

37. Semântica
<h1>SACOMP</h1>
<p>Conteudo</p>

38. Semântica
<h2 class=“h3">Noticias</h2>

39. Semântica
<h2 class=“conteudo-adicional">Noticias</h2>

40. Semântica
<div class=“conteudo-adicional ">
<h2>Noticias</h2>
</div>

41. Semântica
<div class="esquerda">
Navegação
</div>
<div class="direita">
Conteudo
</div>

42. Semântica
<div class=“navegacao">
Navegação
</div>
<div class=“conteudo-principal">
Conteudo
</div>

43. Separação em camadas

44. Separação em camadas
• Conteúdo (HTML)
• Apresentação (CSS)
• Interação (JavaScript)

45. Separação em camadas
Por que separar em camadas?
• Manutenção do código
• Controle nas diversas mídias
• Performance

46. Separação em camadas
<div style=“color: red;">
Muito importante
</div>

47. Separação em camadas
<div style=“importante">
Muito importante
</div>

48. Graceful degradation e
JavaScript não-obstrutivo

49. Graceful degradation e
JavaScript não-obstrutivo
Nada de código JavaScript no HTML
Sem eventos inline
Melhorias progressivas

50. Graceful degradation e
JavaScript não-obstrutivo
<a href=“javascript:doStuff()">
Magic
</a>

51. Graceful degradation e
JavaScript não-obstrutivo
<a href="#" onclick="doStuff(); return false">
Magic
</a>

52. Graceful degradation e
JavaScript não-obstrutivo
<a href=“stuff.html" onclick="doStuff(); return
false">
Magic
</a>

53. Graceful degradation e
JavaScript não-obstrutivo
<a href=“stuff.html" class=“magic">
Magic
</a>

54. 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;
};
}
};

55. Graceful degradation e
JavaScript não-obstrutivo
Elementos que dependem de JavaScript
devem ser gerados com JavaScript.

56. Performance

57. Performance
•
•
•
•
•
CSS sprites
Otimização de imagens
Gzip
Expire headers
Deployment

58. Performance
• Agrega diversas imagens em uma
• Escolha da imagem por CSS

59. Performance

60. 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;}

61. Performance
20 requisições HTTP se tornam uma
Rollover sempre disponível

62. Performance
Reduzir imagens ao máximo
Usar o formato adequado pro tipo de imagem

63. Performance
• Smush.it™
– Combina diversos otimizadores open-source
– Compressão sem perdas
– Remove meta-data supérflua

64. Performance
• Gzip
– Apache: mod_deflate
– IIS 7: HTTP Compression
Não comprimir imagens, pdfs, arquivos
comprimidos
Comprimir CSS, HTML, JS - arquivos de
texto

65. Performance
• Expire Headers
– Apache: mod_expires
– IIS 7: HTTP Expires
Cache!

66. Performance
• JavaScript deployment
– Concatenar
– Minimizar
• JSMin
• YUI Compressor

67. Ferramentas
• Firefox Add-ons
– Firebug
– YSlow
– HTML Validator
– Inline code finder
– Firefinder
– QuickJava
• Multiple IE

70. Ferramentas para
Desenvolvimento Web
Filipe Vernetti Giusti
Agile Development House