- Como Criar Um Site, Blog – WebMaster.pt - https://www.webmaster.pt -

Avisos Personalizados Com Plugin jQuery Humanized Messages

Tweet [3]

Humanized Messages exemplo

Muitas vezes é preciso exibir mensagens, alertas ou avisos  para visitantes de sites ou usuários de sistemas virtuais, como CMSs, Home Brokings, E-commerces, Intranets, dentre muitos outros. A fim de incrementar a usabilidade e melhorar a experiência das pessoas, é aceitável e conveniente que estas mensagens sejam exibidas de maneira suave, agradável, não obstrusiva.

Existe uma maneira de exibir mensagens personalizadas e, ainda por cima, gerar um log de eventos em um site. É uma maneira bastante simples, feita através do plugin para jQuery Humanized Messages.

Com Humanized Messages é possível mostrar mensagens personalizadas que aparecem de maneira a não incomodar nem atrapalhar a navegação e, como plus, é possível registrar log com os “passos” do visitante (excelente para ser usado em recursos de auditoria em sistemas corporativos, por exemplo).

Usando o Humanized Messages

Primeiramente, faça download do Humanized Messages [4]. No arquivo compactado, já virá o javascript principal, uma folha de estilos e um jQuery. Preferencialmente, utilize a última versão do jQuery:


<link rel="stylesheet" type="text/css" href="humanmsg.css" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="humanmsg.js"></script>

Para não dar problemas de compatibilidade (principalmente com Internet Explorer), lembre-se de usar um Doctype [5] adequado e declará-lo corretamente.

Então, para fazer o Humanized Messages funcionar, a chamada para o código é:


humanMsg.displayMsg("MENSAGEM");

Vamos supor que queiramos ativar o Humanized Messages sempre que links de classe “msglog” forem clicados. A linha de código seria (depois de o jQuery já iniciado [6], claro):


$('a.showmessage').click(function() {
  humanMsg.displayMsg('Você clicou em um link especial e seu conteúdo é:' + $(this).text() + '!');
  return false;
});

E pronto! A partir de agora, sempre que este link for clicado, uma mensagem mais “humanizada” aparecerá através de uma apresentação elegante e sofisticada! Se mesmo assim não gostar, basta alterar o CSS para que fique do agrado.

Claro que, com alguns ifs e elses, é possível apresentar menagens dinâmicas, que podem servir para diversas finalidades.

Conclusão sobre o Humanized Messages

Realmente o Humanized Messages traz, através de um uso simples e ultrarápido, a possibilidade de exibição de mensagens variadas em seu site, software, intranet, extranet, sistema virtual ou qualquer outro.

O log que aparece é para fins meramente “ilustrativos”. Em um site ou sistema do mundo real, seria possível realmente aproveitar este plus do Humanized Messages para fazer um log de verdade e, para fazer isso, é bastante simples. Basta usar alguma função de AJAX do jQuery [7] e enviar alguma mensagem para cada clique a um arquivo no servidor que faz a inserção num banco de dados.

Mas isso é assunto para outro artigo…  ;-)

Tweet [3]
Be Sociable, Share!
  • [8]
  • [9]
  • [10]
  • [11]
  • [12]