Neste artigo vou explicar como você pode fazer um tutorial ou um passo a passo dividido entre etapas dentro do seu site. É muito útil quando seu site trata com clientes e você precisa que seu cliente entenda bem as funções do seu sistema, e para isso, você gostaria de criar um passo a passo bem simples e poderoso na interface do seu sistema, explicando o que cada funcionalidade faz.
Vamos fazer isso utilizando um pouco de CSS juntamente com jQuery e Bootstrap.
Eu desenvolvi essa função especificamente para o meu sistema que estou desenvolvendo no momento, e ficou muito sutil e bem simpático, e o melhor de tudo é que você pode personalizar este "tutorial" da maneira que você quiser, é muito versátil!

Veja o exemplo
Como sempre, eu tenho um exemplo abaixo. Ao clicar no botão, você iniciará um tutorial por dentro dessa tela que estou utilizando como exemplo para ver como ficará nosso tutorial no final do artigo.
Este template eu baixei no site Start Bootstrap e você pode fazer o download deste template e muitos outros neste link. É gratuito.

Começar Tutorial! Mostrar/Esconder Painel

Gostou? Bem simpático, não?
Para fazermos esse pequeno tutorial será necessário apenas algumas funções em javascript e o css você pode montar maneira que quiser!
A lógica para montarmos esse tutorial está em como utilizar o z-index de cada elemento. O z-index manipula o quão "colado" está o elemento do resto do html, muito utilizado (indispensável?) para fazer as famosas modal que existem por aí.

Precisamos colocar uma div vazia, de preferencia após o inicio do body, que terá a classe que chamei de tutorial. Esta classe cobre toda a tela com um fundo preto opaco, que terá o z-index 9990, ou seja, ele ficará a frente de todos os elementos do html, inclusive do próprio body. Outros dois elementos que vamos manipular, terão a classe tutorial-destaque e tutorial-apresentacao, que respectivamente são os elementos que ficarão destacados na tela e o texto que será encarregado de guiar o usuário pela interface do sistema.

Geralmente eu coloco o código-fonte do html que utilizei como exemplo, mas neste caso, não vou colocá-lo neste artigo para não ficar uma página gigante de código aqui, você pode baixar o template completo utilizado clicando aqui.
No template, a única alteração a se fazer é definir a div após tag body ser aberta:

<div class="tutorial" style="display:none;" > </div>

Segue o CSS da classe tutorial e das outras classes que vamos utilizar em seguida tutorial-destaque e tutorial-apresentacao:

.tutorial{
	background-color: black;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 9990;
	opacity: 0.7
}

.tutorial-destaque{
	z-index: 9999;
	position: relative;
}

.tutorial-apresentacao{
	color: white;
	position: relative;
	z-index: 9999;
	padding: 15px;
	background-color: rgba(255, 255, 255, 0.3);
	border: 2px solid rgba(0, 0, 0, 0.3);
	border-radius: 7px;
	text-shadow: 1px 1px 4px black;
	width: 50%;
	margin: 10px;
}

Feito isso, se você exibir a div, verá que toda a página ficou escura. A partir de agora, qualquer elemento que estiver com a classe tutorial-destaque e tutorial-apresentacao ficará acima desta camada. É claro que, para isso, precisamos tomar alguns cuidados para que o usuário não clique onde não deva e seja desviado pra outro menu dentro da mesma página e o css se embaralhe todo. Para isso, vamos agora para a parte do javascript onde vamos manipular alguns botões e suas funcionalidades:

Mostrar/esconder código

Este código pode ser organizado da forma que você achar melhor. A lógica utilizada aqui é bem simples: sempre que clicamos em algum elemento que contenha a classe btn-tutorial, o nosso tutorial avança e incrementa a variável global tutorialContador que utilizamos para saber em qual etapa o usuário está.
Para posicionar a apresentação do tutorial em relação ao item que está em destaque, precisamos colocar alguns ids nas divs que serão apresentadas para o usuário, assim, a cada etapa o switch executa um comando específico daquele case.
Uma vez que a classe tutorial está habilitada, nenhum botão funcionará devido ao z-index ser mais baixo, contudo, possa ser interessante desativar todos os botões da tela, pois caso você esteja apresentando algum painel com vários botões e funcionalidades onde o z-index é 9999, eles vão continuar funcionando normalmente. Desabilitar todos os botões farão com que os mesmo não intefiram no tutorial, depois é só reativá-los.

Este mecanismo é maravilhoso! Você pode adicionar vários botões, focar os elementos que você preferir, travar e destravar itens que o usuário pode interagir e criar um passo a passo da forma que você quiser sem nenhum problema.
O que você achou deste artigo? Pude lhe ajudar de alguma forma? Caso sim, curta minha página no Facebook e seja sempre notificado de novos artigos, e se possível, deixe seu comentário na caixa abaixo, você não precisa se registrar! Obrigado.