Como muitos de vocês sabem estou em uma empreitada maluca não só para me tornar um Jedi em PHP mas também para ter um bom domínio em uma ferramenta que não é um sabre de luz mas chega perto: o Code Igniter.
Para isso estou fazendo o que todo desenvolvedor adora fazer em suas folgas: devorando documentação e passando algumas madrugadas fazendo testes.
Entre os estudos entrou o desenvolvimento do And After todinho baseado no Code Igniter – e é bastante coisa. Cheguei na vez de portar O Desenvolvedor para o CI, e no meio do caminho resolvi aproveitar para reestruturar o html (que está super sujo, podem conferir) e aplicar alguns conhecimentos que adquiri desde a criação do blog: otimização do CSS, performance do javascript e o badalado html5.
Como escrever um bom HTML?
Resolvi refazer todo o HTML (e CSS) deste blog durante a migração para PHP. O código estava sujo (várias implementações "puxadinhos" foram feitas depois de pronto) e seria mais produtivo refazer tudo para transformar em template ao invés de tentar aproveitar alguma coisa (e posteriormente melhorar o código).
Em pouco mais de uma hora a estrutura estava montada com os novos elementos do HTML5 (sections, articles, navs, asides) e eu estava terminando também a base de CSS, com especificações da estrutura e visual do blog.
Considero minha produtividade para montar um html é razoavelmente boa, mas confesso que ontem me surpreendi, fui procurar o motivo da produtividade e reparei como mudei minha forma de desenvolver ao longo do tempo.
Abaixo algumas dicas que consegui listar como as razões para atualmente eu conseguir desenvolver de forma muito mais eficiente e com um código muito melhor os htmls.
#1 Conheça o CSS – escreva menos
Não adianta, se você sabe o que é possível fazer com uma linguagem (CSS) você não precisa ficar quebrando a cabeça e sujando o código com workarrounds. Então minha primeira dica é estudar CSS: saber o que é possível fazer, o que faz cada propriedade, valores permitidos, etc.
Meu maior aumento de produtividade relacionado ao CSS se deve ao fato de atualmente aproveitar ao máximo o que o CSS se propõe a fazer: estilos em cascata.
Criei dois exemplos do mesmo código para ilustrar isso, estão bem simples mas acho que conseguem mostrar como é possível escrever mais rápido se pensar antes na estrutura do HTML e reduzir as classes e elementos do código.
Exemplo de código "sobrecarregado" com classes:
<ul class="comments">
<li class="comment_odd">
<img class="thumb" src="src" alt="avatar" />
<span class="author">Name</span> - <span class="date">dd-mm-yyy</span>
<div class="comment">
Comment
</div>
</li>
<li class="comment">
<img class="thumb" src="src" alt="avatar" />
<span class="author">Name</span> - <span class="date">dd-mm-yyy</span>
<div class="comment">
Comment
</div>
</li>
</ul>
CSS
ul.comments{
padding: 10px;
}
li.comment_odd, li.comment{
padding: 10px;
border bottom: 1px solid #333;
margin-bottom: 5px;
}
li.comment_odd{
background: #efefef;
}
ul.comments img.thumb{
float: left;
margin: 0 10px 5px 0;
border: 1px solid #ccc;
}
ul.comments li .comment{
color: #666;
font-size: 1.1em;
}
E agora um bloco de código com a mesma função porém com um html mais limpo e um css aproveitando as heranças de estilo.
<ul class="comments">
<li class="odd">
<img src="src" alt="avatar" />
<span class="author">Name</span> - <span class="date">dd-mm-yyy</span>
<div>
Comment
</div>
</li>
<li>
<img src="src" alt="avatar" />
<span class="author">Name</span> - <time>dd-mm-yyy</time>
<div>
Comment
</div>
</li>
</ul>
CSS
ul.comments{
padding: 10px;
}
ul.comments li{
padding: 10px;
border bottom: 1px solid #333;
margin-bottom: 5px;
}
ul.comments li.odd{
background: #efefef
}
ul.comments li img{
float: left;
margin: 0 10px 5px 0;
border: 1px solid #ccc;
}
ul.comments li div{
color: #666;
font-size: 1.1em;
}
Neste curto exemplo as otimizações não são tão visíveis no CSS (por ser poucos elementos e classes) mas em alguns layouts um pouco mais complexos a diferença é muito perceptível. É possível "economizar" o uso de várias classes (mudei inclusive uma tag, para o time do html).
Algumas coisas que devem ser utilizadas:
- Usar CSS sprite sempre que possível
- Evitar o abuso de classes
- Backgrounds podem retirar várias imagens do seu HTML, mas analise do ponto de vista do conteúdo: a imagem faz parte do conteúdo ou do layout?
#2 Semântica – escreva direito
Antes eu montava um html pensando no layout da página: como posicionar os elementos (e já era tableless, só quem viveu lembra do tempo das tables dentro de tables), espaçamentos, backgrounds… hoje em dia eu digo: não faça o html pensando no layout, faça pensando no conteúdo.
Este item pode parecer contraditório ao primeiro, mas na verdade são complementares. Você precisa saber como é o layout pois certamente isto influencia algumas coisas no HTML, mas você deve guiar sua estrutuar ao conteúdo e não ao layout.
Olhe o seu layout, pense em como será a estrutura da sua página, olhe o conteúdo e pense quais tags se encaixam para cada área. Com o HTML5 está rolando debates intensos sobre o uso de articles ou sections, então é melhor pensar antes de começar a escrever… 🙂
Outra dica para isso ficar melhor é na hora de escrever o html não desenvolver o CSS, no início isso causava improdutividade pois eu demorava mais para adaptar o CSS depois, hoje isso aumenta minha produtividade pois apesar de não escrever o CSS já vou matutando como ele será, e isso vai mudando conforme escrevo. Quando transformar o conteúdo HTML no layout, o CSS já está pensado e revisado! 😀
Esta segunda basicamente diz: a web é semântica e o HTML é conteúdo, CSS é layout.
#3 Otimize
Eu acredito que quase todo o código pode ser otimizado, utilizando estas técnicas eu gosto muito do resultado final – mas depois de pronto acabo percebendo que algumas coisas poderiam ser melhoradas.
Nesta última etapa incluo também o desenvolvimento do javascript (leia: javascript: extreme performance) que com a popularização da banda larga a interface (renderização do HTML e código javascript) representa uma porcentagem muito maior da espera do usuário para ver a página.
Depois de tudo pronto "leia" seu código, veja se pode otimizar, reduzir seu CSS, minimizar o número de requisições (evitar muitos .js e .css separados, usar CSS Sprite, transformar backgrounds que usam imagens em cores/css3, etc).
Estas são três regras que eu procuro seguir sempre que vou desenvolver um HTML, quais são as dicas/críticas de vocês?
Comentem que eu atualizo o post ou faço uma nova lista baseado nas sugestões! 🙂