terça-feira, agosto 18, 2009

CSS e semântica: dando (bons) nomes aos bois

No tempo da Internet a Vapor, ao se escrever cada elemento HTML era preciso especificar como ele seria formatado. A tag mais usada era a <font>. Quer colocar um título grande e vermelho? Fácil:
<font size=+2 color=red>Meu Título</font>
O design de seu sítio virtual se espalhava por de todas as páginas. Trocou de idéia? Quer agora que seu título seja verde? Beleza, agora terá que editar todas as páginas de seu sítio e fazer color=green. Não só vai dar um trabalhão, como você vai esquecer-se de mudar em alguns lugares. Seu design ficará inconsistente: umas páginas de um jeito, outras de outro.

O Cascading Style Sheets (Folhas de Estilo em Cascata) foi criado exatamente para resolver este problema. O CSS permite que o estilo de formatação de um elemento seja definido em uma página separada. Todas as páginas de um sítio passam a ter seus estilos definidos em um único lugar.

Se você quiser mudar o design, um único arquivo precisará ser modificado. As páginas ficam menores e carregam mais rápido, pois não é preciso enchê-las de informações para formatação. O estilo é carregado uma única vez e fica cacheado pelo browser.

Muita gente acha que o CSS existe para que se tenha novas opções de formatação. Não é esta a sua principal vantagem.

Com o CSS é possível dizer: todos meus elementos <H1> são formatados deste jeito, todos meus campos <INPUT> são daquele. E o grande poder do CSS vem com dois novos atributos para os elementos HTML, o class e o id. Uma classe ou id representa um conjunto de formatações. Todo elemento que tiver aquela classe ou id terá estas formatações.

As diferenças entre os dois é que todo elemento pode ter várias classes e apenas um id, e que não podem existir dois elementos com o mesmo id numa página.

Para se ter boas definições de estilo, uma das coisas mais importantes é dar bons nomes à suas classes. Pode até parecer bobagem, mas na prática, o nome que você der definirá que estilos sua classe representará.

Um exemplo de um estilo com nome ruim seria
textoGrandeVermelho {color: red; font-size: 3em;}
Fazendo isto, apesar de estar usando CSS, você estará programando como quando não existia. Caso resolva mudar o design de suas páginas para ter uma fonte verde, ou ficará com uma definição assim:
textoGrandeVermelho {color: green; font-size: 3em;}
ou terá que, como nos velhos tempos, editar todas as páginas de seu site. Não é raro preferirem a dissonância cognitiva.

Bons nomes são semânticos, isto é, devem definir alguma coisa. Você deve definir um nome que represente um objeto de seu design, ou uma qualidade dele. Eis um bom nome:
titulo {color: red; font-size: 3em;}
Assim você pode mudar os estilos de todos seus títulos sem precisar editar outras páginas, nem correr o risco de deixar seu sítio inconsistente. Ao ler o arquivo CSS, fica muito mais fácil identificar o que você precisa mudar se quiser que seu título apareça de maneira diferente. Se você quiser aproveitar suas páginas para outro cliente, bastará editar o arquivo CSS para ter um novo design.

Exemplos de bons nomes seriam: .titulo, .cabecalho, .rodape, .erro, .obrigatorio, .aviso, .filtro, .relatorio. Como cada elemento HTML pode ter mais uma classe, você pode combiná-las para ter definições como:
<H1 class="titulo erro">Título de página de erro</H1> 

<div class="aviso erro">Aviso de preenchimento de form>

<input class="filtro obrigatorio" value="Filtro de preenchimento obrigatório" />

Nomes ruins seriam: .centralizado, .padding-esquerda, .width-td-full. E por que estes nomes são ruins? É porque se você quiser modificar seu site no futuro, será caro e trabalhoso. Se suas páginas tiverem títulos assim:
<H1 class="textoGrandeVermelho centralizado">Meu Titulo</H1>

E você não quiser mais que sejam centralizados, continuará tendo que editar todas as páginas. E será difícil achar no CSS quais são os estilos aplicados apenas a seus títulos. Eles provavelmente se aplicarão também a elementos que nada têm a ver.

Pensar um pouco para ter bons nomes para seus estilos CSS não é frescura. É apenas se preocupar com o futuro, com o tempo que você gastará com a manutenção de seu sítio. Não fazê-lo, é se prender ao passado. É programar como se ainda estivéssemos em 1995.

sábado, agosto 08, 2009

Não deixe o Google bravo quando seu sítio virtual for para manutenção


Vai tirar seu sítio virtual do ar? Vai colocá-lo em manutenção? Seja bem educado e avise claramente a dois importantes usuários :
  • Ao Google

  • Ao resto

Se o Google visitar seu sítio quando ele estiver fora do ar e não encontrar suas páginas, você será penalizado no ranking das buscas. Para que isto não aconteça, siga as orientações oficiais do Google: acesso a todas suas páginas deve retornar um código de status HTTP 503.

Isto é mais fácil falar do que fazer. Mas fique tranquilo. Vou te ensinar a configurar o Apache pra fazer isto. Ah! Isto é pra Linux, claro!

O objetivo é redirecionar todo mundo que tentar visitar seu sítio para uma página que avisa a seus usuários humanos que está fora do ar. O Google terá seu querido status 503. Nada de especial precisará estar instalado no servidor.

Vamos fazer, ou melhor, roubar e adaptar, um shell script para retornar o 503 e avisar aos usuários. Eis o arquivo 503.sh:
#!/bin/sh

echo Status: 503
echo Content-Type: text/html; charset=iso-8859-1
echo Retry-After: 3600
#echo Retry-After: Sat, 8 Ago 2009 23:59:59 GMT
echo ""

cat <<EOF
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>Estamos em manutenção</title>
</head>
<body>
<h1>Estamos em manutenção</h1>
<p>Foi mal! Estamos com problemas.
<p>Em breve voltaremos.</p>
</body>
</html>
EOF

Coloque-o na raiz de seu servidor e dê permissão de execução e acesso a todos: chmod a+rx /var/www/503.sh

O texto entre o cat << EOF e o EOF é o código HTML que aparecerá para o usuário. O macete aí está nos comandos echo que configuram o código de status da página e manda o cabeçalho Retry-After. Este cabeçalho avisa ao Google quando ele pode novamente tentar visitar suas páginas. Pode ter um valor em segundos (tente daqui a uma hora) ou uma data exata.

Agora é a vez de escalpelar o pele vermelha. Vá ao diretório de configuração do Apache e crie um arquivo chamado manutencao.conf. No arquivo de configuração de seu sítio escreva esta linha: #Include /etc/apache2/manutencao.conf. Na hora que o circo pegar fogo, bastará descomentá-la.

Precisaremos do mais legal módulo do Apache, o mod_rewrite. Certifique-se que ele está sendo carregado no seu apache vendo se "rewrite_module" aparece no output do comado /usr/sbin/apache2ctl -t -D DUMP_MODULES. Costuma ser instalado por default.

Eis a versão final do arquivo manutencao.conf:
RewriteEngine On

RewriteCond %{REMOTE_HOST} !^201\.37\.52\.58
RewriteRule . /503.sh [passthrough]

ScriptAlias /503.sh /var/www/503.sh

Sugiro que vá fazendo este arquivo aos poucos e testando a cada passo que der. Eis um passo a passo:
  1. Coloque a linha do ScriptAlias. Tente acessar: http://dominio.com.br/503.sh e veja se aparece a página de aviso de manutenção. Pra ter certeza mesmo, cheque na aba NET do Firebug se o código de retorno é mesmo 503.

  2. Agora ligue o RewriteEngine e coloque a RewriteRule. Toda página do seu sítio deve agora apresentar a mensagem de manutenção.

  3. A cereja no bolo é permitir o acesso normal ao IP da sua máquina com o RewriteCond. Se você tem um IP dinâmico, cheque seu valor de seu IP corrente.

Não esqueça de reinicializar o Apache a cada passo:
/usr/sbin/apache2ctl restart.

Prontinho. Sua configuração está feita.

O ideal é fazer isto tudo com calma. Quando todo o esquema estiver pronto, bastará descomentar uma linha do arquivo de configuração. Não deixe pra aprender isto quando o circo estiver pegando fogo. Com calma dá até pra bolar até &emdash; quem diria &emdash; uma página de manutenção divertida.

Pirataria sinistra

Caraca, estou chocado. Após logar neste site aparece um link para baixar cada livro. Será o Kindle e a pirataria vão acabar com os livros técnicos, como o Napster e o iPod acabaram com a indústria da música?