Tutorial: 5 plugins Javascript para mensagens de notificação muito mais legais

Cansado de ver aquela janelinha padrão do browser nas mensagens de alerta e confirmação da sua aplicação? Nesse post apresentarei uma lista de cinco excelentes plugins Javascript para dar um upgrade no visual da sua aplicação. Confira:

1. noty

noty é um plugin jQuery que facilita a tarefa de criação de mensagens de alerta, confirmação, informação, sucesso e erro como alternativa às caixas de diálogo padrão do navegador. A API do plugin fornece opções para customização do texto, layout, animação, velocidade e botões.

Site: http://needim.github.com/noty/
Licença: GPL

Exemplo:

 <script type="text/javascript" src="jquery.min.js"></script>  
 <script type="text/javascript" src="js/noty/jquery.noty.js"></script>  
 <script type="text/javascript" src="js/noty/layouts/top.js"></script>  
 <script type="text/javascript" src="js/noty/layouts/topLeft.js"></script>  
 <script type="text/javascript" src="js/noty/layouts/topRight.js"></script>  
 <script type="text/javascript" src="js/noty/themes/default.js"></script>  
 

 var noty = noty({text: 'noty - a jquery notification library!'});  

2. Pines Notify

O Pines Notify é um plugin Javascript para mensagens de notificação desenvolvido como parte do framework Pines. É flexível e muito fácil de implementar e utilizar. 

Pines Notyfy

Site: http://pinesframework.org/pnotify/

Licença: GPL, LGPL, e MPL.

Exemplo: 

 $.pnotify({
   title: 'Regular Notice',
   text: 'Tutoriais é '
 });

3. jNotify

O jNotify é um plugin jQuery para mensagens de notificação não-obstrutivas para sistemas web. O usuário pode ser informado sobre ações específicas realizadas pelo sistema, como, por exemplo, a finalização de uma chamada assíncrona ao servidor via Ajax.

Site: http://www.myjqueryplugins.com/jquery-plugin/jnotify
Licença: GPL
Exemplo de uso:

 <!-- JS to add -->  
 <script type="text/javascript">  
  $(document).ready(function(){  
   $("a.jnotify_exemple").click(function(e){  
       e.preventDefault();  
       jNotify(  
           'Tutorial mensagem de alerta com jNotify!',  
           {  
            autoHide : true, // added in v2.0  
            clickOverlay : false, // added in v2.0  
            MinWidth : 250,  
            TimeShown : 3000,  
            ShowTimeEffect : 200,  
            HideTimeEffect : 200,  
            LongTrip :20,  
            HorizontalPosition : 'center',  
            VerticalPosition : 'top',  
            ShowOverlay : true,  
              ColorOverlay : '#000',  
            OpacityOverlay : 0.3,  
            onClosed : function(){ // added in v2.0  
            },  
            onCompleted : function(){ // added in v2.0  
            }  
           });  
       });  
   });  

4. Alertify.js

O alertify.js investe em facilidade de uso, beleza e capacidade de customização para as mensagens de notificação da sua aplicação. Não depende de outras bibliotecas ou frameworks e já possui suporte a diversos navegadores e dispositivos móveis.

Site: http://fabien-d.github.io/alertify.js/
Licença: MIT

Exemplo:

 // alert dialog  
 alertify.alert("Tutorial Alertify.js");  
 // confirm dialog  
 alertify.confirm("Message", function (e) {  
   if (e) {  
     // user clicked "ok"  
   } else {  
     // user clicked "cancel"  
   }  
 });  
 // prompt dialog  
 alertify.prompt("Message", function (e, str) {  
   // str is the input text  
   if (e) {  
     // user clicked "ok"  
   } else {  
     // user clicked "cancel"  
   }  
 }, "Default Value");  

5. Humane.js

O Humane.js é uma boa opção para quem deseja um sistema de notificação simples, moderno e independente de framework. Inclui suporte à aplicações para dispositivos móveis.

Site: http://wavded.github.io/humane-js/

Licença: Não disponível

Exemplo:

 var notify = humane.create({ timeout: 4000, baseCls: 'humane-bigbox' })  
 notify.log('Custom Notifier')  

Gostou das sugestões? Deixe um comentário! ;)

Tutorial upload de arquivos com jQuery e PHP

E aí pessoal, beleza? Dessa vez vamos aprender como implementar a funcionalidade de upload de arquivos utilizando PHP e jQuery. O jQuery (http://jquery.com/) é uma biblioteca Javascript que busca simplificar a implementação de tarefas como manipulação de HTML, tratamento de eventos, animação, Ajax, etc. No nosso artigo usaremos o jQuery basicamente para recuperar o status corrente do upload através de chamadas assíncronas ao servidor.

Visão Geral deste Tutorial

Como já adiantamos, o tutorial consiste de uma página com um campo para upload de arquivos. O arquivo escolhido será enviado via Ajax ao servidor, que, por sua vez, retornará para o cliente o percentual do arquivo que já foi copiado. Este valor será atualizado automaticamente e será exibido em uma div para o usuário. 

Código do Lado do Cliente

No lado do cliente temos uma página simples HTML. Nela definimos um form, que contém um campo do tipo file para que o usuário possa escolher o arquivo para upload e também temos um botão de submit. Até aí, nada demais. A mágica acontece graças ao jQuery. Para este tutorial, utilizamos o plugin jQuery Form, que possibilita o uso de chamadas Ajax em formulários HTML de forma bastante simples. 

Primeiramente, é necessário incluir as bibliotecas javascript do jQuery e do jQuery Form Plugin. Utilizei para este exemplo as bibliotecas disponíveis no googlepais e github, mas você pode (e geralmente deve) baixá-las para o seu servidor e fazer referência a elas.

Após isso, nós definimos um objeto do tipo Options, especificado pelo jQuery Forms Plugin, que conterá atributos referentes à chamada Ajax. Para o nosso exemplo, nós especificamos funções de callback:

beforeSend: Função chamada imediatamente antes do envio do formulário. Geralmente usadas para esquemas de validação pré-submissão. No nosso caso, apenas exibimos uma mensagem via alert.

uploadProgress: Função callback a ser invocada com as informações do progresso do upload. Aqui nós atualizamos uma div com o percentual do upload concluído.

success: Define a função de callback a ser chamada após o envio do formulário. Aqui, apenas um alert será exibido.

error: Função chamada em caso de erro.

Por fim, preparamos o nosso form para ser submetido via Ajax com a chamada $("#uploadForm").ajaxForm(options),  , passando como parâmetro as opções acima.

Veja o código completo:

 <html>  
  <head>  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
  <script src="http://malsup.github.com/jquery.form.js"></script>  
  <title>Upload de arquivos com progresso usando com Ajax, jQuery e PHP</title>  
  <script>  
      $(document).ready(function() {  
           var options = {  
                beforeSend: function() {  
                     alert("Antes de mandar!");  
                },  
                uploadProgress: function(event, position, total, percentComplete) {                      
                     $("#status").html("Percentual completado: " + percentComplete + "%");  
                },  
                success: function() {  
                     alert("Upload concluido!");  
                },  
                error: function() {  
                     alert("Falha ao fazer upload de arquivo.");  
                }  
           };  
           $("#uploadForm").ajaxForm(options);  
      });  
  </script>  
  </head>  
  <body>  
 <h1>Validação de formulário com Ajax e PHP</h1>  
 <form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">  
  Arquivo para upload: <input name="myFile" id="user" type="file" />  
  <input type="submit" value="Enviar!" />  
 </form>  
 <div id="status" />  
 </body>  
 </html>  

Código do Lado do Servidor

O código server-side é uma função simples de upload de arquivos em PHP. Basicamente, o servidor recebe o arquivo no objeto $_FILES e o copia para a pasta /upload/ na raiz do site através da função move_uploaded_file.

Veja o código do arquivo upload.php:

 <?php  
 define ('SITE_ROOT', realpath(dirname(__FILE__)));  
 //upload.php  
 $output_dir = "/upload/";  
 if(isset($_FILES["myFile"]))  
 {  
   //Filter the file types , if you want.  
   if ($_FILES["myFile"]["error"] > 0)  
   {  
    echo "Error: " . $_FILES["file"]["error"] . "<br>";  
   }  
   else  
   {  
     //move the uploaded file to uploads folder;  
     move_uploaded_file($_FILES["myFile"]["tmp_name"],SITE_ROOT. $output_dir. $_FILES["myFile"]["name"]);  
    echo "Uploaded File :".$_FILES["myFile"]["name"];  
   }  
 }  
 ?>  

Então, pessoal, espero que esse tutorial tenha ajudado vocês a conhecerem um pouco mais do poder do jQuery e da sua integração com uma linguagem server-side - no caso, PHP. Dúvidas, sugestões ou críticas? Deixe um comentário! ;)

Validação de formulários com Ajax e PHP

Nesse tutorial veremos como criar um esquema de validação de formulários usando Ajax e PHP. A idéia é realizar as validações dinamicamente, à medida em que o usuário preenche os campos do formulário. Esse modo de validação é especialmente útil para auxiliar o preenchimento de longos formulários, pois com ele o usuário não precisa esperar pelo submit completo do form para saber o resultado da validação server-side. Fazendo o uso de chamadas assíncronas ao servidor (para isso usaremos Ajax), essas verificações serão feitas campo a campo, à medida em que o usuário preenche o formulário.

Para este tutorial, teremos um formulário simples de criação de usuário, em que o visitante do site terá que escolher um nome de usuário para criar o seu perfil. O nome de usuário deve ser único, e por isso nossa validação apenas apontará um erro caso seja escolhido um nome de usuário já cadastrado no sistema. Para fins deste tutorial, manteremos em memória uma lista de usuários pré-definida, mas no seu código, é provável que você implemente uma função de consulta dos usuários ao banco de dados ou a um arquivo.

Bem, vamos ao código!

Lado do Cliente

Primeiramente, vamos criar a nossa página index.html. Ela contém apenas um campo de texto onde será digitado o nome de usuário para cadastro e uma div que informará se o usuário cadastrado já existe ou não no sistema. À medida em que o usuário digita no campo de texto, é chamada a função Javascript checklogin, que recebe o valor do campo como parâmetro.

 <html>  
  <head>  
  <title>Validação de formulário com Ajax e PHP</title>  
  <script>  
      function checkLogin(user)  
      {  
      var xmlhttp;  
      if (window.XMLHttpRequest)  
       {//codigo para IE7+, Firefox, Chrome, Opera, Safari  
       xmlhttp=new XMLHttpRequest();  
       }  
      else  
       {//codigo para IE6, IE5  
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
       }  
      xmlhttp.onreadystatechange=function()  
       {  
       if (xmlhttp.readyState==4 && xmlhttp.status==200)  
           {  
                document.getElementById("result").innerHTML = xmlhttp.responseText == 0 ? "Login já existente!" : "Login ainda não cadastrado!";  
           }  
       }       
      xmlhttp.open("GET","checklogin.php?username=" + user,true);  
      xmlhttp.send();       
      }  
 </script>  
  </head>  
  <body>  
 <h1>Validação de formulário com Ajax e PHP</h1>  
 <form action="#">  
  Usuário: <input name="user" id="user" type="text" onkeyup="checkLogin(this.value)"/>  
 </form>  
 <div id="result" />  
 </body>  
 </html>  

A função checkLogin, definida acima, instancia o objeto xmlhttp de acordo com o tipo de navegador utilizado pelo usuário. Ação tomada quando a requisição assíncrona é respondida é basicamente mudar o texto da div com id "result" de acordo com o resultado da consulta.

Por fim, a função checkLogin abre uma conexão via GET com a página checklogin.php (será definida a seguir) passando como parâmetro o valor corrente do campo de texto. Vale lembrar que a função checkLogin será chamada - e consequentemente a página checklogin.php será consultada - a cada tecla digitada pelo usuário.

Lado do Servidor

Bem, para este exemplo o código server-side é bastante simples. Veja a seguir:

 <?php
 //este array geralmente será substituído por uma busca ao banco de dados ou arquivo texto
 $userList = array('alice', 'bob', 'carl', 'dexter', 'earl', 'frank', 'george', 'john');
 $user = $_GET['username'];
 if (in_array($user, $userList)) {
      echo 0; //usuario ja existe
 } else {
      echo 1; //usuario nao existe. logon ok.
 }
 ?>

A variável $userList contém a lista de usuários cadastrados no nosso sistema fictício. Na vida real, você provavelmente substituirá este trecho por uma consulta a uma base de dados, por exemplo. A partir daí, é muito simples. Caso o nome de usuário enviado como parâmetro via método GET já esteja cadastrado, a requisição retorna o valor 0. Caso contrário, retorna 1.

Voltando um pouco para a função checkLogin, no código da parte do cliente, você verá que o valor retornado pelo código servidor - neste caso, 0 ou 1- é atribuído a xmlhttp.responseText. É nesse ponto que a div será atualizada, mostrando se o usuário já existe ou não na nossa base de usuários.

Concluindo

Bem  pessoal, neste tutorial aprendemos a validar um formulário dinamicamente usando Javascript, PHP e chamadas assíncronas Ajax. Espero que este exemplo simples sirva como base para você fazer coisas mais legais. Sinta-se à vontade para postar dúvidas, críticas e sugestões nos comentários.

Até a próxima!

Ainda precisando de uma mãozinha? Que tal esses:

Tutorial upload de arquivos com jQuery e PHP

Máscara genérica para campos numéricos em Javascript

Olá pessoal, tudo bem? Neste tutorial vamos implementar uma máscara genérica para campos numéricos usando Javascript. A função aceita como parâmetro uma string correspondente ao padrão do campo, podendo ser utilizada como máscara de CPF, máscara de CNPJ, máscara de data e hora, de telefone, etc. Para a string do padrão, será utilizado o caracter '#' para identificar um dígito. Dessa forma, para uma máscara de CPF, o padrão fornecido como parâmetro será "###.###.###-##". No código, fornecemos já alguns exemplos da aplicação da máscara genérica. Este é um exemplo para fins didáticos. Fique à vontade para apontar melhorias e correções. Bons estudos!

 <html>  
 <head>  
 <title>Mascara genérica para campos numéricos</title>  
 <script language="JavaScript" type="text/javascript">  
      function mascaraGenerica(evt, campo, padrao) {  
           //testa a tecla pressionada pelo usuario  
           var charCode = (evt.which) ? evt.which : evt.keyCode;  
           if (charCode == 8) return true; //tecla backspace permitida  
           if (charCode != 46 && (charCode < 48 || charCode > 57)) return false; //apenas numeros            
           campo.maxLength = padrao.length; //Define dinamicamente o tamanho maximo do campo de acordo com o padrao fornecido  
           //aplica a mascara de acordo com o padrao fornecido  
           entrada = campo.value;  
           if (padrao.length > entrada.length && padrao.charAt(entrada.length) != '#') {  
                campo.value = entrada + padrao.charAt(entrada.length);                 
           }  
           return true;  
      }  
 </script>  
 </head>  
 <body>  
 <h2>Máscara genérica para campos numéricos</h2>  
 <form>  
  Mascara de CPF: <input type="text" name="data" OnKeyPress="return mascaraGenerica(event, this, '###.###.###-##');" / >  
 </form>  
 <form>  
  Mascara de CNPJ: <input type="text" name="data" OnKeyPress="return mascaraGenerica(event, this, '##.###.###/####-##');" / >  
 </form>  
 <form>  
  Mascara de Hora: <input type="text" name="data" OnKeyPress="return mascaraGenerica(event, this, '##:##:##');" / >  
 </form>  
 <form>  
  Mascara de Telefone: <input type="text" name="data" OnKeyPress="return mascaraGenerica(event, this, '+## ## ####-####');" / >  
 </form>  
 </body>  
 </html>  

Ano Novo, Blog Novo!

Após muito tempo parado, decidi retomar o projeto do blog Mãozinha da Web! Apesar do longo período sem atualizações, o site manteve uma boa média de visitas diárias, o que mostrou que o conteúdo estava sendo útil para os colegas da área.

Nesse ano de 2013, o site será atualizado diariamente, terá seu layout remodelado, além de serem incluídas novas categorias, como Governança da TI, Segurança da Informação e Empreendedorismo.

Estamos trabalhando para que o blog seja cada vez mais útil e relevante para você.