Construir um bom código HTML garante um bom andamento de um projeto de desenvolvimento de interfaces. Muitos dos atributos e marcações que normalmente sentimos falta apenas na integração das camadas de apresentação e de comportamento podem ser antecipados em um código HTML maduro e eficiente, deixando apenas as particularidades de cada interface para ajustes pós-integração. Para isso, deve-se seguir regras bem simples:
Cada elemento-chave deve poder ser identificado
Em nosso código de teste, vamos usar uma lista não-ordenada simples:
<ul>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ul>
Imaginando que haverá outras listas nesta tela, o ideal é identificá-la diretamente:
<ul id="lista-especial">
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ul>
Ou pelo seu pai, onde todas as listas-filhas terão a mesma apresentação e comportamento:
<div id="conteudo">
<ul>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ul>
</div>
Se esta lista for um menu, certamente o designer irá escolher uma forma de realçar cada item ou pedir certo comportamento diferenciado como por exemplo alterar a cor com o passar de cursor ou com o item ativado. Prevendo isso, cada item dentro da lista deve ser identificado:
<ul id="menu-principal">
<li id="menu-item-1"><a href="#1">Primeira página</a></li>
<li id="menu-item-2"><a href="#2">Segunda página</a></li>
<li id="menu-item-3"><a href="#3">Terceira página</a></li>
<li id="menu-item-4"><a href="#4">Quarta página</a></li>
</ul>
Desta forma, seja qual for a implementação escolhida para o menu o desenvolvedor poderá manipular:
#menu-item-1 {background:pink;}
#menu-item-1 a{background:blue;}
#menu-item-1 a:hover{background:red;}
Mais um pé nos frameworks CSS
Seu designer favorito não consegue fazer outro tipo de layout que não seja de largura fixa, centralizado na tela? Então você já pode antecipar que o HTML terá um bloco logo abaixo da tag body somente para este fim. Não me lembro, inclusive, da última interface que montei que não precisei deste bloco. Nem todas as possibilidades de uma interface podem ser incluídas num HTML enxuto e puramente semântico. Algumas divs auxiliares sempre são necessárias. Da mesma forma, vejo que sempre preciso dos blocos de cabeçalho, rodapé e barra lateral.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Meu site</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script type="text/javascript" src="behavior.js"></script>
</head>
<body>
<div id="centralizando-layout">
<div id="cabecalho">
<h1>Olá mundo!</h1>
</div>
<div id="conteudo">
Este é um elemento solto
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua.</p>
</div>
<ul id="lateral">
<li id="mn-it-1"><a href="#1">Primeira página</a></li>
<li id="mn-it-2"><a href="#2">Segunda página</a></li>
<li id="mn-it-3"><a href="#3">Terceira página</a></li>
<li id="mn-it-4"><a href="#4">Quarta página</a></li>
</ul>
<div id="rodape">
<p>© 2008 Meu site</p>
</div>
</div>
</body>
</html>
Evite expressões órfãs
Veja no exemplo anterior a expressão “Este é um elemento solto” e tente manipulá-la via CSS ou JavaScript. É mais complicado, não? Tente sempre manter os elementos dentro de marcações específicas:
<div id="content"> <h2>Este não é um elemento sem pai</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>
Melhor antecipar do que alterar cinqüenta telas depois
Muitas das decisões podem ser antecipadas mesmo sem olhar o layout ou o sistema, mas é melhor que não seja assim. Antes de começar a montar o código HTML, analise a interface previamente aprovada e conheça bem as limitações do sistema. Não é bola de cristal ou receita de bolo, e sim uma questão de saber reconhecer os padrões de código que se repetem projeto após projeto.
26/06/2008 às 10:17
26/06/2008 às 13:22
26/06/2008 às 18:05
26/06/2008 às 19:41
26/06/2008 às 19:42
01/07/2008 às 15:17
04/07/2008 às 23:06
07/08/2008 às 03:34
12/09/2008 às 17:39
03/11/2008 às 13:42