Bootstrap Tour: Como criar um tutorial de primeiro acesso ao site

Programador Viking 24 de dezembro de 2019 0 Comentários Leitura: 3 min

Você já se deparou com aqueles tutoriais de primeiro acesso em algum sistema web? Ele pode ser criado utilizando uma ferramenta chamada Bootstrap Tour.

Neste artigo, vamos aprender a utilizar essa ferramenta para criar um tutorial de primeiro acesso bem simples.

Esse tipo de conhecimento pode ser muito útil em seus projetos, principalmente para melhor a experiencia do seu usuário.

Vamos lá?

Notebook Para Programar Custo Benefício

Confira o Preço Aqui

Amazon.com.br

Confira neste artigo:

Sobre o Bootstrap Tour

Primeiramente, quando estramos desenvolvendo um sistema web é muito importante pensarmos na experiencia do usuário, e o Boostrap Tour pode te ajudar em muitos casos.

Por exemplo:
Quando acessamos um sistema web novo pela primeira vez, normalmente ficamos perdidos, pois não sabemos onde clicar.

O Boostrap Tour veio para solucionar este problema. Com ele podemos criar um tutorial de primeiro acesso forma simples.

Um ponto super positivo para melhorar a experiencia do seu usuário e não deixa-lo perdido.

Download do Bootstrap Tour

O primeiro passo para utiliza-lo é fazer o download dos arquivos, para isso basta acessar o link abaixo.

Site Oficial: https://bootstraptour.com

Faça o download e descompacte o arquivo .zip

Fazendo a Importação

Para fazer a importação, copie os arquivos das pastas css e js que estão dentro da pasta build para dentro do seu projeto.

Depois de copiar, faça a importação no head do seu HTML.

Se dentro do seu projeto você já estiver usando o Bootstrap, importe apenas:

bootstrap-tour.min.css
bootstrap-tour.min.js:

Exemplo:

<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-tour.min.css" rel="stylesheet">
...
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tour.min.js"></script>

Em outros casos faça a importação do arquivos:

bootstrap-tour-standalone.min.css
bootstrap-tour-standalone.min.js:

Exemplo:

<link href="bootstrap-tour-standalone.min.css" rel="stylesheet">
...
<script src="jquery.min.js"></script>
<script src="bootstrap-tour-standalone.min.js"></script>

Criando o JavaScript

Para que o Bootstrap Tour seja executado, temos que criar um arquivo JavaScript (.js) em nosso projeto e importa-lo também no HTML.

Depois disso, vamos inserir o código abaixo em nosso arquivo JavaScript.

//-> Instancia o tour.
var tour = new Tour({
  steps: [
  {
    element: "#meu-elemento",
    title: "Titulo do primeiro passo.",
    content: "Conteúdo do primeiro passo."
  },
  {
    element: "#meu-outro-elemento",
    title: "Titulo do segundo passo.",
    content: "Conteúdo do segundo passo"
  }
]});

//-> Inicializa o tour.
tour.init();

//-> Inicializa o tour.
tour.start();

Conclusão

Em conclusão, neste artigo vimos que é possivel fazer de maneira simples um tutorial de primeiro acesso, que pode ser utilizado em sites e sistemas web.

É importante pensarmos na experiencia do usuário, principalmente a primeira vez que ele for utilizar o nosso sistema.

Ou seja, o seu próximo passo ideal é começar a aplicar este conhecimento em projetos reais e que o mercado de tecnologia utiliza.

Não perca tempo! Dê um passo decisivo em direção ao seu sucesso profissional agora mesmo. Basta clicar no botão abaixo e abrir as portas para mais de 1400 cursos completos, todos com certificados válidos.

ACESSAR CURSOS COM CERTIFICADO

Você ja conhecia essa ferramenta?
Deixe seu comentário!

Enfim, Muito Obrigado pela audiência e lhe desejo TERABYTES DE SUCESSO!!! 💻