Os dados devem ser separados da apresentação.
Continuação das
Considerações sobre tableless.
Os dados devem ser separados da apresentação.
Você deve evitar definir como os dados serão apresentados, quando estiver montando seu código (x)HTML, evite usar fontes, cores etc… dentro da linguagem de marcação.
O (x)HTML deve ser usado para montar a estrutura do seu documento e o CSS dizer como o dispositivo deve exibir essa estrutura.
Não entendeu?
Simples, vamos dizer que eu queira montar um documento que tenha um título, dois parágrafos e uma lista de links dos assuntos relacionados.
Dentro do
teria o seguinte código
<h1>Dentro da tag de título, você coloca o título</h1>
<p>Dentro da tag de parágrafo, você coloca o parágrafo, descrevendo o que quer.</p>
<p>Depois você não queria colocar uma lista de links? � exatamente o que usará</p>
<ul>
<li>
<a href="http://www.exemplo.com" title="Exemplo">Exemplo</a>
</li>
<li>
<a href="http://www.exemplo.com" title="Exemplo">Exemplo</a>
</li>
</ul>
Como viu, é tão simples como escrever um documento de texto.
Mas pera ai, vai ficar feio para burro!!!
Para isso que serve o CSS, não tinha dito que os dados e apresentação devem ser separados?
Você cria um outro documento com o CSS e linka ao primeiro, com o seguinte código:
h1 {
font-family: Verdana, Arial;
font-color: #0000ff;
font-size: 12px;
}
p {
font-family: Helvica, Arial;
font-size: 10px;
text-align: justify;
}
ul li{
list-style-type: none;
}
Desta forma, seu código de marcação e dados estará em um arquivo e a definição da apresentação estará em outro.
Ha, tá! Mas o que eu ganho com isso?
- Para mudar todo o layout do site, basta mudar um arquivo.
- Seu site possuirá um layout consistente em todas as páginas.
- Você pode criar versões do seu site para impressão, para dispositivos móveis etc…, mudando apenas um arquivo.
- Seu código ficará mais limpo, facilitando a manutenção.
- Seu site ficará mais leve, pois o CSS é carregado em cache de maneira muito mais eficiente que a formatação feita pelo HTML.
- Suas páginas não serão um amontoado de códigos, facilitando a indexação pelos mecanismos de buscas.
As vantagens não se esgotam nas acima, mas essas são as principais.
Para quem está iniciando o desenvolvimento desta forma, depois de ter se acostumado com a forma anterior, sente um pouco de dificuldade, mas basta um pouco de pratica, para não querer mais fazer da forma anterior.
Para acompanhar os tópicos:
Artigos Relacionados
Comments
5 Comentários
-
Assine
-
Ofertas
Legal cara.
Ia escrever algo sobre isso… Mas ta ai já!
Muito melhor usar CSS do que direto na fonte.
E outra coisa, usar padrões!
Até mais
[...] Mas o Bruno Alves foi mais rápido e escreveu antes em seu blog. [...]
Depois que você começa a separar o código da apresentação, fica tão feliz com os resultados que acaba meio viciado em fazer isso.
Hoje acho estranho não fazer desta forma.
Abraço
[...] Bruno Alves Home Contact « Os dados devem ser separados da apresentação. Troquei de Tema » [...]
Com certeza, temos que seguir a risca o desenvolvimento em camadas!!!