Definindo estrutura, apresentação e comportamento

out 23

Web Standards , , 12 comentários

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: