Definindo estrutura, apresentação e comportamento

Um desenvolvimento maduro para a Web conta com bons nomes de arquivos, um diretórios organizados e separação das camadas de estrutura, apresentação e comportamento.

O que é estrutura, apresentação e comportamento em uma interface Web

Definimos assim cada uma destas camadas:

Estrutura

A camada de estrutura é formada por uma linguagem de marcação, como o XML, HTML e XHTML. Este arquivo contém o conteúdo do documento, além de informações de indexação e documentos relacionados.

O conteúdo deve ser marcado de modo que seja perfeitamente compreensível para qualquer tipo de usuário, seja ele quem for ou qual seja o dispositivo utilizado. Deve-se marcar cada trecho com seu correspondente, de acordo com a definição do tipo de documento (DTD). No HTML, por exemplo, usamos as tags:

  • <p> para parágrafos;
  • <a> para links de hipertexto;
  • <h1>, <h2> e <h3> para títulos;
  • <ul>, <ol>, <li>, <dl>, <dt> e <dd> para listas;
  • <table>, <thead>, <tbody>, <caption>, <tr> e <td> para tabelas; e assim por diante.

Cada elemento deve procurar seu melhor correspondente no tipo de documento. Se um elemento ou um conjunto deles não tiver uma boa correlação deve-se usar elementos genéricos:

  • <div> para elementos em bloco;
  • <span> para elementos em linha (dentro de parágrafos, por exemplo).

A seguir, um exemplo de documento bem simples pronto para a publicação.

<!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>

  <h1>Olá mundo!</h1>

  <div id="avatar">
    <img src="avatar.jpg" width="48" height="48" alt="Foto">
  </div>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    onummy nibh euismod tincidunt ut laoreet dolore erat
    olutpat. Ut wisi enim ad minim veniam, quis nostation
    llamcorper suscipit lobortis nisl ex.</p>

  <p>Ut wisi enim ad minim veniam, quis nostrud exerci.
    <a href="http://outrosite.com" rel="external"
        title="Outro site">link abre uma nova janela</a>.
        Lorem ipsum dolor sit amet, sectetuer cidunt ut
        dolore magna aliquam erat volutpat.</p>

  <p><a href="mailto:eu@provedor.com">mande um e-mail!</a></p>

</body>
</html>

Se somente este código for mostrado ao usuário, é muito provável que ele consiga realizar as tarefas possíveis nesta interface que incluem ler o texto, ver a foto, clicar no link externo e mandar uma mensagem eletrônica.

Nesta camada, são tomadas decisões de conteúdo, como a hierarquia das seções (definidas pelos seus títulos), como será o formato de data, como estruturar um menu de navegação ou um breadcrumb, entre outras. Além disso, é nesta camada que reside boa parte das definições de acessibilidade de uma interface.

Veja um exemplo de página apenas com a estrutura. Perceba que mesmo sem layout ela continua sendo compreensível e que continua funcionando sem JavaScript. Para ver a estrutura de qualquer página use uma extensão para como o WebDeveloper para Firefox e aperte Ctrl+Shift+S.

Apresentação

Na camada de apresentação, está tudo que caracteriza o layout da página. Com o CSS, definimos cores de fontes, fundos, posição dos elementos na página e todas as outras decisões estéticas.

Veja um exemplo de código CSS aplicado ao nosso exemplo de estrutura:

body{
	font: 0.8em Arial, Helvetica, sans-serif;
	background: url(fundo.jpg) no-repeat;
	padding: 140px 0 0 100px;
}
p{
	width: 400px;
	margin:0;
	padding:10px;
	background: url(fundo.png);
}
p + p + p{
	background: transparent;
}
h1{
	width: 400px;
	margin-left: -30px;
	font: bold 3.5em Georgia,Times New Roman,serif;
	color: #93360D;
}
div{
	float: left;
	margin: 0 10px 0 0;
}
img{
	border: 1px solid #000;
}
a{
	color: #000;
}
a:hover{
	color: #93360D;
}
a[rel="external"]{
	background: url(externo.png) center right no-repeat;
	padding-right: 13px;
}
a[href ^="mailto:"]{
	font-size: 0.85em;
	font-weight: bold;
	text-decoration: none;
	padding: 2px 10px;
	background: #E0C284;
}

Separando todas as definições de estilo num documento separado permite melhor gerenciamento de estilos diferenciados de acordo com a mídia. Pode haver um estilo diferenciado para impressão:

@media print{
	* {
		color: #000;
		font-family: Georgia,Times New Roman,serif;
		text-decoration: none;
	}
	p + p + p, img{
		display: none;
	}
}

Veja o exemplo anterior, agora com a camada de apresentação.

Comportamento

Já na camada de comportamento, estão todos os efeitos e todas as decisões funcionais da interface. Manter a programação separada da estrutura facilita a manutenção e evita erros. Além disso, é mais fácil tratar alternativas para usuários que não possuem suporte a esta camada, como usuários de celular e de quiosques.

No exemplo anterior, clique no link para abrir um site externo em nova janela.

Veremos um artigo mais detalhado sobre scripts não intrusivos mais adiante.

Referências:

Artigos relacionados:

Este artigo está licenciado como Atribuição-Uso Não-Comercial-Compartilhamento pela mesma - Licença 2.5 Brasil.

Este artigo foi publicado por Simone Villas Boas no pixeladas aleatórias [http://s1mone.net] em 23/10/2007 às 23:37 na categoria Web Standards, com as tags, , . Você pode acompanhar os comentários neste feed. Você pode deixar um comentário, ou enviar um trackback do seu site.

12 comentários para o artigo “Definindo estrutura, apresentação e comportamento”

  1. Jader Rubini:
    24/10/2007 às 12:55

    Muito bom artigo. Explicadinho e muito importante pra quem tá começando a desenvolver de verdade pra web.

    Só uma erratazinha:

    Este documento contém o conteúdo do documento, além de informações de indexação e documentos relacionados.

    Não seria melhor “esta camada contém…” ou “nesta camada fica…”?

  2. Simone Villas Boas:
    24/10/2007 às 13:00

    Jader, obrigada.
    Troquei ‘documento’ por ‘arquivo’ e agora faz mais sentido. Gostaria de enfatizar que um arquivo .html é um documento fechadinho, como se ele não precisasse realmente de outros arquivos…
    8:*

  3. ubiratan:
    24/10/2007 às 15:35

    É sempre bom um post como este para clarear a mentes de alguns desenvolvedores.

    bom, simples e direto.

  4. Leonardo L Procópio:
    24/10/2007 às 17:27

    Muito bom Simone! Parabéns! super explicado pra ninguem botar defeito ou dificuldade!!!
    Excelente para indicar pro pessoal daqui!!!

    Grande abraço!

  5. Inside:
    24/10/2007 às 20:03

    Sou obrigado a deixar um post lá do blog e um trackback =]

    Valeu S1mone

  6. Web 2 Ponto 0 » Definindo estrutura, apresentação e comportamento:
    24/10/2007 às 20:06

    [...] A Simone postou algo muito interessante aqui. [...]

  7. Fabio Rocha:
    25/10/2007 às 07:37

    Putz, bom pra vir a profundidade de minha ignorância esse post. :)

  8. ulysses:
    25/10/2007 às 11:00

    Muito obrigado. O mundo seria muito mais bonito se tudo fosse feito desse jeito, eis sua contribuição.

  9. Como planejar um documento web | Tecnologia da Informação - Desenvolvimento e Educação:
    29/10/2007 às 13:44

    [...] Villas Boas, do Pixeladas Aleatórias, escreveu um brilhante post de como deve ser estruturado um documento web, dividindo o processo de produção do documento em três [...]

  10. Cid Andrade:
    29/10/2007 às 13:46

    Simone, essa é aquela coisa simples que todo mundo gostaria de ter escrito. Já foi para o meu blog.

  11. Siteja:
    25/11/2007 às 04:12

    Muito bom o post, parabéns.

    Em desenvolvimento web, é muito importante a separação de conteúdo (estrutura), design (apresentação) e programação (comportamento). São três coisas distintas, que não devem ser feitas uma em cima da outra, o que tornaria a aplicação uma verdadeira bagunça, dificultando a manutenção e portabilidade.

    Separando elas, a aplicação fica limpa e fácil de entender. Além da organização, facilita o trabalho em grupo, onde cada profissional trabalharia em uma parte.

    t+

  12. Andre Lima:
    07/01/2008 às 16:57

    Realmente é sensacional!!!

    Parabéns!

Faça um comentário