xiv sacomp ufpel desenvolvimento web
Post on 28-May-2015
134 Views
Preview:
TRANSCRIPT
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 no código
Comentários devem explicar uma decisão e/ou facilitar o entendimento de um trecho de código.
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;
}}
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.
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.
Web standards História
Design limitado a uma coluna.
Usar <tables> pareceu “tão” fácil.
Web standards História
CSS
Web standards História
Web standards incompletos
Guerra dos browsers
Web standards História
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
Separação em camadas
• Conteúdo (HTML)• Apresentação (CSS)• Interação (JavaScript)
Separação em camadas
Por que separar em camadas?
• Manutenção do código• Controle nas diversas mídias• Performance
Separação em camadas
<div style=“color: red;">
Muito importante
</div>
Separação em camadas
<div style=“importante">
Muito importante
</div>
Graceful degradation e JavaScript não-obstrutivo
Graceful degradation e JavaScript não-obstrutivo
Nada de código JavaScript no HTML
Sem eventos inline
Melhorias progressivas
Graceful degradation e JavaScript não-obstrutivo
<a href=“javascript:doStuff()">
Magic
</a>
Graceful degradation e JavaScript não-obstrutivo
<a href="#" onclick="doStuff(); return false">
Magic
</a>
Graceful degradation e JavaScript não-obstrutivo
<a href=“stuff.html" onclick="doStuff(); return false">
Magic
</a>
Graceful degradation e JavaScript não-obstrutivo
<a href=“stuff.html" class=“magic">
Magic
</a>
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;
};
}
};
Graceful degradation e JavaScript não-obstrutivo
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
top related