3

Gostaria de criar um Tutorial de Primeiro Acesso ao meu Site, aqueles que mostram o que significa cada campo do site, preciso de uma dica de como fazer ou se existe algum Framework para este tipo de interação com o usuário, efetuei algumas pesquisas e não encontrei nada, provavelmente porque não sei o nome correto deste tipo de interação. Alguém teria alguma dica?

1

2 Respostas 2

5

Acredito que a melhor ferramenta seja:

http://bootstraptour.com/ segue a documentação, exemplo:

var tour = new Tour({
  steps: [
  {
    element: "#my-element",
    title: "Title of my step",
    content: "Content of my step"
  },
  {
    element: "#my-other-element",
    title: "Title of my step",
    content: "Content of my step"
  }
]});

Super facil, basta conhecimento em javascript.

4

Quando se esta utilizando Bootstrap, o bootstraptour é a melhor opção como o @Guerra propos, mas caso o contrário eu recomendo o hopscotch. Com ele você define os steps com json, é bem simples:

{
      id: "welcome_tour",
      steps: [
        {
          target: "header",
          placement: "bottom",
          title: "This is the navigation menu",
          content: "Use the links here to get around on our site!"
        },
        {
          target: "profile-pic",
          placement: "right",
          title: "Your profile picture",
          content: "Upload a profile picture here."
        },
        {
          target: "inbox",
          placement: "bottom",
          title: "Your inbox",
          content: "Messages from other users will appear here."
        }
      ]
    }

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .