XIV sacomp ufpel desenvolvimento web
-
Upload
filipe-giusti -
Category
Technology
-
view
134 -
download
0
Transcript of XIV sacomp ufpel desenvolvimento web
![Page 1: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/1.jpg)
Desenvolvimento Web
Filipe Vernetti Giusti
Agile Development House
![Page 2: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/2.jpg)
![Page 3: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/3.jpg)
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
![Page 4: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/4.jpg)
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
![Page 5: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/5.jpg)
Boas práticas
![Page 6: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/6.jpg)
Comunicação
![Page 7: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/7.jpg)
Comentários no código
Não comente o óbvio.
// Abre o arquivo e retorna seu descritor
$fp = fopen(“foobar.txt”, “r”);
![Page 8: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/8.jpg)
Comentários no código
Comentários devem explicar uma decisão e/ou facilitar o entendimento de um trecho de código.
![Page 9: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/9.jpg)
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;
}}
![Page 10: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/10.jpg)
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.
![Page 11: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/11.jpg)
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(){}
![Page 12: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/12.jpg)
Conversar
Avisar quando iniciar uma tarefa.
Avisar quando terminar tarefas (e já aproveita pra revisar os commits!)
![Page 13: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/13.jpg)
Code Standards
Tenha-os
Siga-os
![Page 14: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/14.jpg)
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.
![Page 15: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/15.jpg)
Controle de versão
![Page 16: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/16.jpg)
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.
![Page 17: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/17.jpg)
Testes, code coverage e integração contínua
![Page 18: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/18.jpg)
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.
![Page 19: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/19.jpg)
![Page 20: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/20.jpg)
Desenvolvimento Web
![Page 21: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/21.jpg)
Web standards
![Page 22: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/22.jpg)
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.
![Page 23: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/23.jpg)
Web standards História
Misturar conteúdo com apresentação.
![Page 24: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/24.jpg)
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.
![Page 25: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/25.jpg)
Web standards História
Design limitado a uma coluna.
Usar <tables> pareceu “tão” fácil.
![Page 26: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/26.jpg)
Web standards História
CSS
![Page 27: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/27.jpg)
Web standards História
Web standards incompletos
Guerra dos browsers
![Page 28: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/28.jpg)
Web standards História
CSS hacks.
Misturar interação com conteúdo.
![Page 29: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/29.jpg)
Web standards
Não existem padrões na web, apenas recomendações (W3C).
![Page 30: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/30.jpg)
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)
![Page 31: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/31.jpg)
Web standards
DOCTYPEs decidem o modo de renderização
• Quirks• Quase Standards – Layout com tabelas• Standards
![Page 32: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/32.jpg)
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
![Page 33: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/33.jpg)
Semântica
![Page 34: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/34.jpg)
Semântica
Use nomes e elementos com significado.
![Page 35: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/35.jpg)
Semântica
<table cellspacing="0" cellpadding="0">
<tr>
<td class=“titulo">SACOMP</td>
</tr>
<tr>
<td>Conteudo</td>
</tr>
</table>
![Page 36: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/36.jpg)
Semântica
<div class=“titulo">SACOMP</div>
<div class="conteudo">Conteudo</div>
![Page 37: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/37.jpg)
Semântica
<h1>SACOMP</h1>
<p>Conteudo</p>
![Page 38: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/38.jpg)
Semântica
<h2 class=“h3">Noticias</h2>
![Page 39: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/39.jpg)
Semântica
<h2 class=“conteudo-adicional">Noticias</h2>
![Page 40: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/40.jpg)
Semântica
<div class=“conteudo-adicional ">
<h2>Noticias</h2>
</div>
![Page 41: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/41.jpg)
Semântica
<div class="esquerda">
Navegação
</div>
<div class="direita">
Conteudo
</div>
![Page 42: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/42.jpg)
Semântica
<div class=“navegacao">
Navegação
</div>
<div class=“conteudo-principal">
Conteudo
</div>
![Page 43: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/43.jpg)
Separação em camadas
![Page 44: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/44.jpg)
Separação em camadas
• Conteúdo (HTML)• Apresentação (CSS)• Interação (JavaScript)
![Page 45: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/45.jpg)
Separação em camadas
Por que separar em camadas?
• Manutenção do código• Controle nas diversas mídias• Performance
![Page 46: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/46.jpg)
Separação em camadas
<div style=“color: red;">
Muito importante
</div>
![Page 47: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/47.jpg)
Separação em camadas
<div style=“importante">
Muito importante
</div>
![Page 48: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/48.jpg)
Graceful degradation e JavaScript não-obstrutivo
![Page 49: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/49.jpg)
Graceful degradation e JavaScript não-obstrutivo
Nada de código JavaScript no HTML
Sem eventos inline
Melhorias progressivas
![Page 50: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/50.jpg)
Graceful degradation e JavaScript não-obstrutivo
<a href=“javascript:doStuff()">
Magic
</a>
![Page 51: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/51.jpg)
Graceful degradation e JavaScript não-obstrutivo
<a href="#" onclick="doStuff(); return false">
Magic
</a>
![Page 52: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/52.jpg)
Graceful degradation e JavaScript não-obstrutivo
<a href=“stuff.html" onclick="doStuff(); return false">
Magic
</a>
![Page 53: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/53.jpg)
Graceful degradation e JavaScript não-obstrutivo
<a href=“stuff.html" class=“magic">
Magic
</a>
![Page 54: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/54.jpg)
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;
};
}
};
![Page 55: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/55.jpg)
Graceful degradation e JavaScript não-obstrutivo
Elementos que dependem de JavaScript devem ser gerados com JavaScript.
![Page 56: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/56.jpg)
Performance
![Page 57: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/57.jpg)
Performance
• CSS sprites• Otimização de imagens• Gzip• Expire headers• Deployment
![Page 58: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/58.jpg)
Performance
• Agrega diversas imagens em uma• Escolha da imagem por CSS
![Page 59: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/59.jpg)
Performance
![Page 60: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/60.jpg)
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;}
![Page 61: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/61.jpg)
Performance
20 requisições HTTP se tornam uma
Rollover sempre disponível
![Page 62: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/62.jpg)
Performance
Reduzir imagens ao máximo
Usar o formato adequado pro tipo de imagem
![Page 63: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/63.jpg)
Performance
• Smush.it™– Combina diversos otimizadores open-source– Compressão sem perdas– Remove meta-data supérflua
![Page 64: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/64.jpg)
Performance
• Gzip– Apache: mod_deflate– IIS 7: HTTP Compression
Não comprimir imagens, pdfs, arquivos comprimidos
Comprimir CSS, HTML, JS - arquivos de texto
![Page 65: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/65.jpg)
Performance
• Expire Headers– Apache: mod_expires– IIS 7: HTTP Expires
Cache!
![Page 66: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/66.jpg)
Performance
• JavaScript deployment– Concatenar– Minimizar
• JSMin• YUI Compressor
![Page 67: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/67.jpg)
Ferramentas
• Firefox Add-ons– Firebug– YSlow– HTML Validator– Inline code finder– Firefinder– QuickJava
• Multiple IE
![Page 68: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/68.jpg)
![Page 69: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/69.jpg)
![Page 70: XIV sacomp ufpel desenvolvimento web](https://reader034.fdocumentos.tips/reader034/viewer/2022042700/55666910d8b42a3d3f8b4dba/html5/thumbnails/70.jpg)
Ferramentas para Desenvolvimento Web
Filipe Vernetti Giusti
Agile Development House