É bastante comum um web site ter que exibir anúncios, comunicados, alertas, promoções ou qualquer outro tipo de notificações a seus visitantes. Os desenvolvedores sempre estão em busca de maneiras chamativas e atrativas de alertar o visitante quanto à última promoção ou assinatura de sua newletter.
Bem, existe uma forma de realizar estas notificações de uma maneira diferente e interessante, usando o plugin para jQuery SlideNote!
Com SlideNote, quando a barra de rolagem da janela chega a um ponto predeterminado, uma mensagem vinda da lateral do site é dinamicamente exibida, surpreendendo o visitante. Bastante útil quando há mensagem que realmente não podem deixar de ser notadas! :-)
Usando o SlideNote
Assim como a grande maioria de plugins do jQuery, usar o SlideNote é algo bastante simples e segue a mesma “linha” de uso dos demais plugins apresentados aqui no Webmaster.pt [4].
Para começar, acesse o site oficial do SlideNote [5] e faça o download do mesmo. Existem algumas opções para download; pessoalmente, costumo sempre indicar a versão minificada [6], mas, neste caso, antes dela seria interessante baixar o pacote completo do SlideNote [7] que vem com alguns exemplos demonstrativos.
Primeiramente, é preciso chamar os códigos do jQuery e o próprio SlideNote na página (adaptando os caminhos para sua estrutura de diretório):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.slidenote.js" type="text/javascript"></script>
O SlideNote funciona tornando o elementos alvos do documento (ou fontes externas, através de AJAX) invisíveis e, quando se atinge determinado ponto na rolagem da página, ele faz um slide lateral com a div (a aparência da mensagem é a da própria div-alvo, através de estilização com CSS).
Ele é tão simples de se usar que, para usá-lo, basta isso:
$('#note').slideNote();
Uma dica interessante é, via CSS, já deixar o elemento invisível por default. Dessa forma, mesmo se o visitante, por qualquer motivo, não esteja com javascript habilitado, não verá a div com a mensagem “jogada” no site.
Opções do SlideNote
O SlideNote também possui algumas opções de controle:
- where. Determina em quantos px de rolagem o elemento com SlideNote vai aparecer (int).
- corner. De que lado da tela a mensagem vai vir (“left” ou “right”).
- url. Caso queira um conteúdo externo para a mensagem (url do arquivo).
- container. Usado com “url”, especifica em qual “container” o conteúdo será injetado (elemento).
- closeImage. Imagem do botão “Fechar” do SlideNote (URL da imagem).
Poucas e rápidas opções para uma customização satisfatória. Se quiséssemos, por exemplo, um SlideNote para o elemento “#notificacao”, vindo da esquerda quando o visitante rolar 500px, o código seria:
$('#notificacao').slideNote({
corner: 'left',
where: 500
});
Com isso, seria mostrado um slidenote com o conteúdo que estivesse dentro da div “notificacao”.
Conclusão sobre o SlideNote
Realmente o SlideNote é um fantástico script para exibição de conteúdos de forma chamativa, dinâmica e interativa. O “fator surpresa” na exibição da mensagem somente quando se atinge determinado ponto de rolagem da página, certamente contribui para que esta mensagem não passe despercebida.
Entretanto, deve-se usar o plugin com cautela. Afinal, exibir uma mensagem chamativa em toda e qualquer página, sem critérios estratégicos, pode acabar levando ao efeito oposto ao que se pretendia: o visitante ficar “cheio” ou entediado e abandonar o site.
Talvez uma política de cookies ou, para o caso de sistemas restritos, controle por sessões, sejam boas ideias para restringir a exibição de mensagens através do SlideNotes. Fica a critério de cada desenvolvedor usar estas ou outras técnicas para tal.
