Edição da estrutura base da interface Web, através de HTML e CSS

A aplicação Web, do ponto de vista da aplicação cliente Web (o browser), não é mais do que de uma página Web construída com recurso à especificação HTML, auxiliada da especificação CSS (para a formatação gráfica). A interacção mais profunda com o utilizador, é conseguida através de instruções que são processadas no lado no servidor e não no lado do cliente. De facto, do lado do cliente ou até para o utilizador final, a aplicação Web não se distingue de outro vulgar site: é constituída, tal como qualquer

outro site, de texto, inclusão de imagens, formulários, hiperligações, etc. Constitui apenas a interface, a parte visível para a aplicação Web. Mas este facto não poderá ser uma causa de descrédito, ou de menor importância, uma vez que depende directamen- te da interface, e da sua boa concepção, a forma com que o utilizador interage com maior ou menor facilidade com a aplicação (grau de usabilidade).

A componente HTML, de interface da aplicação Web, foi desenvolvido com recurso à técnica tableless (ausência de tabelas como elemento primordial na construção de um

layout de uma página Web - técnica tradicional), que delega todas as funções da espe-

cificação gráfica do layout na especificação de regras CSS avançadas, separando assim o conteúdo da formatação. Na prática consiste na criação de regras CSS que alteram o comportamento tradicional de uma tag, como por exemplo um parágrafo, definindo a sua posição no ecrã, largura, altura, entre outros atributos.

No exemplo seguinte podemos visualizar um cabeçalho normal, com o título da apli- cação, de nível (importância) 1 especificado através de tags HTML (neste caso o "<h1>"). Este possui uma hiperligação para o ficheiro "index.php".

<h1><a href="index.php">RSS2SMS</a></h1>

O referido código HTML produziria, sem recurso a formatações CSS, o seguinte resultado no browser visível na Fig. 4-11.

Fig. 4-11 Exemplo de cabeçalho HTML de nível 1, sem recurso a CSS

Este resultado, seria facilmente interpretado por um serviço de indexação de um motor de busca (conhecido por crawler) ou por browsers com fins específicos, como

browsers para invisuais ou de dispositivos móveis (normalmente mais limitados), uma

vez que o conteúdo é totalmente especificado através de texto e consequentemente totalmente acessível.

No entanto, o aspecto gráfico do resultado é pobre e pouco apelativo ao utilizador. Se quisermos melhorar, usando uma logomarca, tradicionalmente colocaríamos uma imagem em detrimento do texto. O resultado seria mais apelativo, mas mais inacessí-

vel para browsers com fins específicos, como os que existem em dispositivos móveis (cujo ecrã tem por vezes sérias limitações em termos de largura e altura) e outros out-

puts, uma vez que o texto foi substituído por uma tag que associa uma imagem (que

não consegue ser descrita, sem recurso a legendas).

<h1><a href="index.php"><img src="images/logo.jpg" alt="RSS2SMS" /></a></h1>

Fig. 4-12 Exemplo de cabeçalho com uma imagem, usando a técnica tradicional

Tradicionalmente, a solução passaria pela concepção de versões das páginas formata- das e orientadas aos outputs específicos, resultando numa redundância de dados (e de trabalho). Através de CSS conseguimos produzir regras que permitem alterar o fun- cionamento standard da tag para outro indicado, através da modificação dos seus atri- butos. No exemplo seguinte podemos visualizar três regras CSS, especificadas apenas para o tipo de média screen, que altera o funcionamento normal do cabeçalho de nível 1.

<style type="text/css" media="screen"> h1 {

background-image: url(images/logo.jpg); background-repeat: no-repeat; display: block; width: 205px; height: 100px; /*altera a caixa e atribui um fundo*/

} h1 a {

display: block; height: 100px; width: 205px; /* altera a caixa do link*/

}

h1 a span {

display: none; /*oculta tudo o que estiver envolvido na Span, neste caso o texto */

} </style> (...)

<h1><a href="index.php"><span>RSS2SMS</span></a></h1>

Em termos práticos, o resultado no ecrã seria o mesmo que o apresentado na Fig. 4-12, mas de uma forma totalmente acessível para os indexadores dos motores de busca e outros tipos de output (tipos de media) tais como: impressão em papel, sinteti- zador de voz, dispositivo de braille, dispositivo móvel, entre outros.

A especificação da estrutura do layout para a aplicação Web proposta foi conseguida, como vimos, através de técnicas avançadas de CSS. Para atingir o objectivo final, a estrutura geral do layout foi dividida em partes, com recurso a uma tag HTML com essa função: a tag DIV (division).

<div id="frame">

<div class="logo">Aqui fica a logomarca</div> <div class="separador"></div>

<div class="central">

<div class="esq">Aqui fica o menu</div>

<div class="dir">Aqui fica a zona de autenticação</div> </div>

<div class="separador2"></div> <div class="inferior">

<div id="conteudos">Aqui ficam os conteúdos</div> <div class="acessorios">Aqui ficam os acessórios</div> </div>

<div class="rodape">Aqui fica o conteúdo do rodapé</div> </div>

Cada um destes divisores foi formatado com regras CSS que indicavam o seu posicio- namento no ecrã, entre outras formatações.

O código HTML e CSS foi editado manualmente, linha a linha, com o objectivo de obter um total controle sobre o código produzido. A estrutura base do layout, ou seja o template geral do layout da interface Web, gerou cerca de 200 linhas de formatação CSS e cerca de 200 linhas de HTML.