sidebar

O Poder das Barras Laterais

19 out 2007

Se você utiliza um programa de navegador moderno e eficiente, provavelmente ele oferece um recurso que ultimamente tem sido esquecido pela maioria dos usuários e webdesigners: as barras laterais.

O que são sidebars

Você usa o Mozilla Firefox? Vá em Exibir, Painel e verá a lista de barras laterais disponíveis. Clique em qualquer uma delas pra vê-la funcionando.

Você usa o Opera? No canto esquerdo há uma lista de botõesinhos, um acima do outro (é muito botão pra um navegador só!). Clicando em cada um deles você ativa sua barra lateral para a função correspondente.

Você usa o Mozilla? O completo, e não o Firefox? Então simplesmente aperte a tecla *F9*. Você verá a lista de algumas barras laterais disponíveis.

Enfim, uma barra lateral (ou painel) nada mais é do que uma área retangular estreita e comprida que aparece na área à esquerda no navegador, ao lado da área de apresentação de páginas. Essa área pode apresentar conteúdo interessante, como é o caso da barra lateral What's Related do Mozilla, que encontra páginas que têm a ver com a página que você está vendo agora na área principal.

O que coloco nisso? (como uso isso pra melhorar meu site)

Um sidebar na verdade é apenas uma página HTML simples. No caso do Mozilla e do Mozilla Firefox, pode ser uma página utilizando XUL (linguagem própria de interface das aplicações Mozilla). Ou seja, você pode adicionar funcionalidades criando um pequeno programa que fique ao lado da página principal: uma calculadora, um chat simplório sempre presente, um formulário para publicação em blogs... São diversas as possibilidades, mas vejamos apenas os casos simples, que já oferecem bastante poder (e também funcionam no Opera). Você pode:

  • listar as últimas notícias - com contador de comentários entre parênteses ao lado de cada uma delas;
  • oferecer links diretos para as principais seções do seu site;
  • oferecer um formulário minúsculo para busca direta no seu site;
  • oferecer um sinalizador para seu status de online (aquela imagem pequenininha que diz se você está ou não online no momento) de ICQ ou Yahoo!;
  • colocar a previsão do tempo e cotação do dólar discretamente, embaixo de tudo isso;
  • o que mais você achar interessante.

Você pode fazer do sidebar um RSS com super-poderes, com muitas informações além das últimas notícias publicadas. Pense nele como um recurso adicional a se oferecer: se usuário quiser um RSS, usa um RSS; se quiser um Sidebar, instala o sidebar.

Um exemplo de aplicação para Sidebars é o instalador de Sidebars do The One Ring, sugerido pelo Hugo nos comentários. Fica em http://www.theonering.net/staff/corvar/cgi-bin/sidebar-inst.pl.

Criando um arquivo estático

Vamos então a um exemplo simples. Como fazer um sidebar estático com uma lista de links? Simples! Escreva um HTML normal (pensando no espaço reduzido) com única diferença: todo link que você pretende que abra na área de conteúdo do navegador deve ter target="_content".

E é só isso! Notícia 01 Mas é claro que você dificilmente vai querer algo estático. Da mesma forma que uma página normal, o sidebar pode ser também uma página PHP, JSP, Perl/CGI... O que você quiser.

Instalando a Sidebar no navegador

O próximo passo é criar um link para instalar o sidebar que você fez para o seu site. Conheço até o momento dois tipos de link: um para instalar nos navegadores Mozilla e outro para o Opera. Ainda não descobri um link para o Konqueror, se alguém souber comenta aqui!

Para instalar em um navegador mozilla, coloque um qualquer coisa que ative a seguinte função JavaScript (pode ser um link, um botão...): sidebar.addPanel("Site Teste", "http://www.tes.te/sidebar.php", "") Substitua o título do sidebar e o endereço para o arquivo pelos valores que desejar.

Para o Opera, você deve fazer um link normal para o arquivo, adicionando o atributo rel, desta forma: Instalar Sidebar ----

Concluindo

Espero que este texto traga um pouco de esclarecimento sobre o assunto. São poucas linhas, mas a coisa é realmente simples. O que espanta é a falta de popularidade de um recurso tão útil. Mas ainda há tempo para revertermos o quadro! Principalmente agora, com a ascensão do Firefox...