Início > Trabalho > Aspecto do Site

O aspecto do site

Do que se trata?

Todo o aspecto deste site (as cores, as disposição dos textos e imagens, etc) é controlado através de stylesheets. As stylesheets facilitam imenso a manutenção do site, porque se, por exemplo, eu me lembrar de mudar a cor dos testos, basta-me mudar as propriedades de algumas classes num único ficheiro e essa alteração repercute-se instantaneamente por todo o site.
Por outro lado há a desvantagem de que nem todos os browsers interpretam as mesmas propriedades da mesma forma, por isso nunca se tem muita bem a certeza de que o aspecto final seja exactamente o mesmo... mas também se fosse tudo fácil não tinha piada, não é? ;)

Stylesheets alternativas

A associação de uma stylesheet a uma página é feita através da inclusão na mesma de uma linha do estilo
<link href="main.css" rel="stylesheet" type="text/css" title="Standard">.
O primeiro aributo é o nome do ficheiro que contém a definição da stylesheet; o segundo indica que se trata de uma stylesheet. Um outro valor possível para este segundo atributo seria alternate stylesheet.
Alguns browsers (entre os quais NÃO se encontra o Internet Explorer) oferecem ao utilizador a possibilidade de alternar entre a stylesheet principal e uma alternativa. Desta forma quem faz um site poderia oferecer vários desenhos distintos permitindo a quem vê o site optar pelo que mais lhe agradasse. Infelizmente, não só o IE não oferece esta funcionalidade (e a maioria das pessoas usa o IE para navegar na Internet) como também ela é apenas temporária: se se clicar num link para uma outra página, volta a ser usada a stylesheet principal.

Então como funciona?

Recentemente encontrei um artigo onde esta questão era abordada. O truque consiste em guardar a preferência do utilizador numa cookie e, ao abrir cada página, criar dinamicamente a referência à stylesheet.
Depois foi uma questão de fazer algumas alterações (eu nunca consegui copiar um pedaço de código sem lhe meter o meu cunho para ter a certeza que o percebi).
Por fim um bocadinho de jeito e paciência para construir várias stylesheets alternativas.
A parte mais complicada é mesmo dar-lhes nomes para figurarem nesta página :)
Infelizmente o sistema não funciona para o weblog. Uma vez que este está artmazenado num servidor diferente, não consegue ler a cookie alterada por esta página (por questões de segurança e privacidade não é possível ler cookies de outros domínios). Por isso até eu arranjar um servidorque me permita alojar o site completo ou inventar um qualquer outro mecanismo para sincronizar as duas coisas, vai ficar assim.

Desenhos à escolha

Não esquecer que a troca de skins só funciona com cookies e javascript activados. Certos skins podem não funcionar correctamente em todos os browsers. O weblog ainda não funciona com skins.
Lisa
Menu vertical do lado esquerdo sobre fundo azul. Texto em vários tons de cinzento.
Negra
Fundo negro. Menu horizontal no topo da página e dinâmico (as opções vão abrindo quando se passa o rato).
Não funciona em IE e em browsers mais antigos.
FCP
Site azul e branco, com uma configuração semelhante à Lisa.