Twitter
Linkedin
Delicious
Posterous
RSSMaturando o HTML
jun 25
CSS Design css, html 13 comentários
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.
jun 26, 2008 @ 10:17:22
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.
jun 26, 2008 @ 13:22:38
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?? =)
jun 26, 2008 @ 18:05:58
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…
jun 26, 2008 @ 19:41:39
Lia, o artigo anterior sobre CSS frameworks: http://s1mone.net/blog/2008/03/uma-outra-visao-sobre-css-frameworks/. []s
jun 26, 2008 @ 19:42:52
Dine, “centralizando-layout” é apenas um exemplo no contexto para fins didáticos. Costumo usar “wrapper” ou “page” para este bloco em especial. []s
jul 01, 2008 @ 15:17:10
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.
jul 04, 2008 @ 23:06:51
Ótimas dicas Simone.
Outra coisa que poderia está falando em breve, seria as identações em pt-br, ou em inglês. :D
ago 07, 2008 @ 03:34:52
Muito bom este post. Parabéns!
set 12, 2008 @ 17:39:32
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
:P
Parabéns.
nov 03, 2008 @ 13:42:45
“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 :)
fev 21, 2009 @ 09:26:11
Otimas dicas, concerteza vao ajudar muita gente por ai q ficam meio perdidas…
parabens pelo blog, e pelo post..
abraços
abr 09, 2009 @ 17:27:01
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.