xiv sacomp ufpel desenvolvimento web

Desenvolvimento Web

Filipe Vernetti Giusti

Agile Development House

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

Sumário

• Desenvolvimento Web– Web standards (padrões web)– Semântica– Separação em camadas– Graceful degradation e JavaScript não-

obstrutivo– Performance– Ferramentas

• Dúvidas

Boas práticas

Comunicação

Comentários no código

Não comente o óbvio.

// Abre o arquivo e retorna seu descritor

$fp = fopen(“foobar.txt”, “r”);


Comentários devem explicar uma decisão e/ou facilitar o entendimento de um trecho de 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;

}}

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.

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

Conversar

Avisar quando iniciar uma tarefa.

Avisar quando terminar tarefas (e já aproveita pra revisar os commits!)

Code Standards

Tenha-os

Siga-os

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.

Controle de versão

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.

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

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.

Desenvolvimento Web

Web standards

Web standardsHistó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.

Web standards História

Misturar conteúdo com apresentação.


Cor de fundo, bordas, espaçamento, fontes, etc, tudo era definido no HTML.

Ao mudar em uma página era preciso mudar em todas.


Design limitado a uma coluna.

Usar <tables> pareceu “tão” fácil.


CSS


Web standards incompletos

Guerra dos browsers


CSS hacks.

Misturar interação com conteúdo.

Web standards

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

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)

Web standards

DOCTYPEs decidem o modo de renderização

• Quirks• Quase Standards – Layout com tabelas• Standards

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

Semântica

Semântica

Use nomes e elementos com significado.

Semântica

<table cellspacing="0" cellpadding="0">

<tr>

<td class=“titulo">SACOMP</td>

</tr>

<tr>

<td>Conteudo</td>

</tr>

</table>

Semântica

<div class=“titulo">SACOMP</div>

<div class="conteudo">Conteudo</div>

Semântica

<h1>SACOMP</h1>

<p>Conteudo</p>

Semântica

<h2 class=“h3">Noticias</h2>

Semântica

<h2 class=“conteudo-adicional">Noticias</h2>

Semântica

<div class=“conteudo-adicional ">

<h2>Noticias</h2>

</div>

Semântica

<div class="esquerda">

Navegação

</div>

<div class="direita">

Conteudo

</div>

Semântica

<div class=“navegacao">

Navegação

</div>

<div class=“conteudo-principal">

Conteudo

</div>

Separação em camadas


• Conteúdo (HTML)• Apresentação (CSS)• Interação (JavaScript)


Por que separar em camadas?

• Manutenção do código• Controle nas diversas mídias• Performance


<div style=“color: red;">

Muito importante

</div>


<div style=“importante">

Muito importante

</div>

Graceful degradation e JavaScript não-obstrutivo


Nada de código JavaScript no HTML

Sem eventos inline

Melhorias progressivas


<a href=“javascript:doStuff()">

Magic

</a>


<a href="#" onclick="doStuff(); return false">

Magic

</a>


<a href=“stuff.html" onclick="doStuff(); return false">

Magic

</a>


<a href=“stuff.html" class=“magic">

Magic

</a>


window.onload = function () {

var magic = getElementsByClassName("magic");

for (var i=0, l=magic.length; i<l; i++) {

magic.onclick = function () {

doStuff();

return false;

};

}

};


Elementos que dependem de JavaScript devem ser gerados com JavaScript.

Performance

Performance

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

Performance

• Agrega diversas imagens em uma• Escolha da imagem por CSS

Performance

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

Performance

20 requisições HTTP se tornam uma

Rollover sempre disponível

Performance

Reduzir imagens ao máximo

Usar o formato adequado pro tipo de imagem

Performance

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

Performance

• Gzip– Apache: mod_deflate– IIS 7: HTTP Compression

Não comprimir imagens, pdfs, arquivos comprimidos

Comprimir CSS, HTML, JS - arquivos de texto

Performance

• Expire Headers– Apache: mod_expires– IIS 7: HTTP Expires

Cache!

Performance

• JavaScript deployment– Concatenar– Minimizar

• JSMin• YUI Compressor

Ferramentas

• Firefox Add-ons– Firebug– YSlow– HTML Validator– Inline code finder– Firefinder– QuickJava

• Multiple IE

Ferramentas para Desenvolvimento Web

Filipe Vernetti Giusti

Agile Development House

xiv sacomp ufpel desenvolvimento web

Technology