Maturando o HTML

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.

Por | Tags: , | Alterado em 25/06/08 às 19:06

Comentários

  1. Felipe Campos disse:

    Interessante estas dicas… Principalmente para quem está começando no mundo front-end, que é o meu caso, fico perdido em como fazer e essas dicas sempre ajudam nos momentos de dúvidas.
    Parabéns.

  2. Lia disse:

    eu queria entender melhor esse lance de frameworks CSS. é tipo uma padronizaçãozinha?? mas como eu uso isso?? tipo, faço um arkivo “modelo”?? sei lá.. explica?? =)

  3. Dine disse:

    Concordo com tudo, exceto pelo nome de classe escolhida por “centralizando-layout”. Por que não “container” ou “wrapper”?
    Tipo… é o mesmo problema de usar nomes como “texto-branco” ou “box-arredondado”…
    Um dia pode mudar de cor, alinhar pra outro lado e ai não vai fazer sentido mais esses nomes…

  4. Dine, “centralizando-layout” é apenas um exemplo no contexto para fins didáticos. Costumo usar “wrapper” ou “page” para este bloco em especial. []s

  5. Victor Leonardo disse:

    A dica é ótima, mas para quem desenvolve para os programadores em asp.net é meio complicado. No início aqui onde trabalho era um pé de guerra com relação as id’s. Aí passei a usar classe. Depois começou os componentes prontos do asp.net, por exemplo, radio list não dá para fazer com UL e LI porque o .net faz em span e seus “filhos” em outro span com o input e o label dentro. Sim, muito saco.. rsrsrs
    Como foi dito anteriormente é uma ótima dica para quem está iniciando no front-end, tirando a parte de ter que deixar “bunitinho” para os programadores.

  6. Ótimas dicas Simone.
    Outra coisa que poderia está falando em breve, seria as identações em pt-br, ou em inglês. 😀

  7. Siteja disse:

    Muito bom este post. Parabéns!

  8. Rodrigo disse:

    Difícil de achar, mas é algo interessante ver que tem pessoas que saber digitar em um blog. E olha que eu leio muitos, mas poucos me satisfazem.
    Coisas que gostei foi os poucos detalhes de propagandas no blog, cores não berrantes e ótimo gosto para música
    😛
    Parabéns.

  9. “Não me lembro, inclusive, da última interface que montei que não precisei deste bloco.” -> eu ia falar a mesma coisa, mas semana passada mesmo me deparei com o primeiro html, em muitos meses, em que não precisei; pude definir a largura do body fixa…

    Parabéns pelo blog, muito bom 🙂

  10. siteja disse:

    Otimas dicas, concerteza vao ajudar muita gente por ai q ficam meio perdidas…
    parabens pelo blog, e pelo post..
    abraços

  11. Psysapiens disse:

    Muito bom!
    Sou um desses que está começando no mundo front-end agora.
    Depois que li seu texto fiz um teste com o Pixeladas Aleatórias. Abri o blog sem CSS, e o que encontrei?
    Um estruturação totalmente semântica com uma ótima disposição de textos e tudo bunitinho divido por HR’s .
    Belo trabalho, o W3C agradece!
    []’s
    Obs.: no momento do comentário ainda estava sem o suporte do CSS.

Faça um comentário

*