webmaster

Notificações Interativas Com SlideNote – Plugin jQuery

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. O nosso website está online! Explore a nova versão beta, onde terá acesso a novos recursos e melhorias. A sua experiência e feedback são muito importantes para nós! Novos artigos, todas as semanas! Fique atento.
Artigos SEO

Artigos SEO

Search Engine Optimization

Artigos WordPress

Criação de websites.

Tutoriais

Ensino numa série de passos simples

Notificações Interativas Com SlideNote – Plugin jQuery

SlideNote: notificações interativas

É 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.

Para começar, acesse o site oficial do SlideNote e faça o download do mesmo. Existem algumas opções para download; pessoalmente, costumo sempre indicar a versão minificada, mas, neste caso, antes dela seria interessante baixar o pacote completo do SlideNote 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):




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.

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)

Deixe o seu comentário, participe!

Leave a Reply

Your email address will not be published. Required fields are marked *


Versão Beta

Estamos a mudar

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. Ajudamos os nossos clientes a levar o conteúdo certo às pessoas certas, criando artigos e recursos que facilitam a criação e otimização de websites.

Artigos Populares

Guia Prático Sobre Segurança Do Joomla

Dicas para diminuir substancialmente o número de vetores de ataque ao Joomla! Proteja o seu trabalho!

Os Segredos Do Sucesso Na Internet

A responsabilidade. O querer. O erro e a experimentação. O social. A memória da internet. Ser quem você é.

38 Ideias Espetaculares Para Sites De Empresas

Encontre inspiração nestes 45 exemplos de sites de empresas para criar o site da sua empresa.