domingo, 13 de abril de 2014

Javascript - Apresentando seu aplicativo com o Shepherd















Em certas ocasiões, você tem uma tela muito complexa em seu aplicativo web/mobile onde o usuário pode ficar facilmente perdido em meio à um grande volume de informações e campos que aparecem para ele. Criar telas intuitivas pode ser trabalhoso ou às vezes não é o suficiente.

O shepherd.js pode ajudar você a resolver este problema! Ele permite criar uma apresentação ou um pequeno "help" de seu app. Ele faz isto através de tooltips destacados na tela, onde você pode informar para que cada sessão serve ou o que deve ser informado em determinado campo. Veja uma demonstração clicando neste link.

Este post mostra como criar uma apresentação de tela quando o usuário a acessa pela primeira vez.



Digamos que é necessário criar uma apresentação para uma tela de cadastro de notebooks.

Dentro da div com o id proprietário ficarão os campos onde serão inseridos os dados do proprietário <div id="proprietario"> e dentro da div com o id notebooks <div id="notebooks"> ficarão os campos dos notebooks.

Obviamente, o primeiro passo é incluir a biblioteca javascript e o estilo css:

 <link rel="stylesheet" href="shepherd-theme-arrows.css" />  
 <script src="shepherd.min.js"></script>  

A função abaixo, quando invocada, orienta o usuário da aplicação web em dois passos:

   
   
 var criarApresentacao = function()  
 {  
      tour = new Shepherd.Tour({  
       defaults: {  
        classes: 'shepherd-theme-arrows',  
        scrollTo: true  
       }  
      });  
     
      /*  
       * Dica #1  
       */  
      tour.addStep('Passo1', {  
       title: 'Cadastro de proprierário',  
       text: 'Cadastre aqui os dados do proprierário',  
       attachTo: '#proprietario',  
       buttons: [  
        {  
         text: 'Ok',  
         classes: 'shepherd-button-secondary',  
         action: function(){  
              tour.next();  
         }   
        }  
       ]  
      });  
   
      /*  
       * Dica #2  
       */  
      tour.addStep('Passo2', {  
       title: 'Cadastro de notebooks',  
       text: 'Cadastre aqui os notebooks',  
       attachTo: '#notebooks',  
       buttons: [  
        {  
         text: 'Ok',  
         classes: 'shepherd-button-secondary',  
         action: function(){  
              tour.hide();  
         }  
        }  
       ]  
      });  
   
      tour.start();  
 };  


Este tipo de apresentação deve ocorrer apenas no primeiro acesso. Mas como verificar se o cliente esta acessando a tela pela primeira vez? Esta verificação pode ser feita salvando dados do usuário em cookies, localStorage ou até mesmo no lado do servidor utilizando uma coluna da tabela do usuário no banco de dados. No código abaixo, esta verificação é feita utilizando o localStorage.


 if (window.localStorage &&   
   (localStorage['meuapp_apresentacao_inicial_nb'] != 1))  
 {  
      criarApresentacao();  
      localStorage['meuapp_apresentacao_inicial_nb'] = '1';  
 }       





Nenhum comentário:

Postar um comentário