Se tem algo importante que devemos fazer nas nossas aplicações, é sempre dar ao usuário um feedback sobre o que está acontecendo no seu site e/ou aplicação web.

O exemplo mais claro disso é quando o tempo do processamento de uma informação no servidor demora muito mais tempo do que o esperado.

Se deixarmos apenas a tela “travada” para o usuário, sem nenhum tipo de feedback, é natural que ele assuma que a aplicação está com bug e, na melhor das hipóteses, pare de usar o seu serviço.

Acha que eu estou exagerando? Pense nas vezes em que você se deparou com um serviço online lento. Não deu vontade de parar de usar e xingar quem estava por trás do desenvolvimento? Pois é! Todos já estivemos lá.

Para amenizar este tipo de situação e dar alertas de forma agravável para o seu usuário, hoje exploraremos o Oh Snap!, um plugin bem bacana do jQuery que trabalha com notificações.

Deixando o seu usuário a par da situação

O Oh Snap! é um projeto open source que está distribuído gratuitamente – sob licença MIT – no GitHub, e foi desenvolvido por Justin Domingue. A proposta do plugin é bem simples: mostrar notificações (principalmente em aparelhos mobile).

Tão simples quanto sua premissa, é seu funcionamento. O primeiro passo é baixar o pacote no site oficial.

Feito isso, precisamos importar ele para o nosso projeto web. Na página HTML onde será exibida a mensagem, precisamos importar o arquivo para dentro dela:

<script src="js/ohsnap.js"></script>

Feito isso, precisamos separar um espaço na nossa aplicação onde as mensagens serão encaixadas dinamicamente. Para tal, criaremos uma div vazia:

<div id="ohsnap"></div>

E estamos quase lá! O próximo (e último passo) é chamar a API do Oh Snap! para criar a mensagem que queremos dinamicamente na tela. Para isso, utilizaremos o método ohSnap(). Esta função aceita dois parâmetros: o primeiro é uma string que representa a mensagem que deve ser exibida; a segunda é um objeto de configuração.

Neste objeto, especificamos alguns detalhes sobre a mensagem, como: cor, tamanho e duração. Vejamos um exemplo de uso:

ohSnap('Whooops! Algo errado não está certo!', {color: 'red'});

Este código terá o seguinte efeito na tela:

Bem legal, né? Repare que, na verdade, podemos configurar vários aspectos desta mensagem no objeto de configuração:

• color: cor do alerta. Default: null;
• icon: classe do ícone que deve ser mostrado antes do alerta. Default: null;
• duration: duração da notificação em ms. Default: 5000ms;
• container-id: id do container. Default: ‘ohsnap’;
• fade-duration: duração do efeito de fade in/out. Default: ‘fast’.

Além disso, também podemos customizar as classes CSS das mensagens. Basta alterar os valores das classes (que foram inspiradas no Bootstrap).

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #eed3d7;
  border-radius: 4px;
  position: absolute;
  bottom: 0px;
  right: 21px;
  /* Each alert has its own width */
  float: right;
  clear: right;
  background-color: white;
}
.alert-red {
  color: white;
  background-color: #DA4453;
}
.alert-green {
  color: white;
  background-color: #37BC9B;
}
.alert-blue {
  color: white;
  background-color: #4A89DC;
}
.alert-yellow {
  color: white;
  background-color: #F6BB42;
}
.alert-orange {
  color:white;
  background-color: #E9573F;
}

Bem legal, né? Com esse simples plugin conseguimos dar feedbacks de forma simples e bonita para os nossos usuários!

Referências

• http://justindomingue.github.io/ohSnap/