How to make a tutorial of first access to the site?

Question

How to make a tutorial of first access to the site?

Navigation

#1 by (5 votes)
#2 by (4 votes)

3

I would like to create a First Access Tutorial for my Site , those that show what each field in the site means, need a hint how to do it or if there is any Framework for this type of interaction with the user, I did some research and did not find anything, probably because I do not know the correct name of this type of interaction. Would anyone have any tips?

javascript jquery html5 css3 ajax

asked by anonymous 08.03.2016 / 16:36

2 answers

Good practices for MVC in PHP Is it more sensible to use client-side validations in Rails?

score 5 · Answer 1

I think the best tool is:

link follows the documentation, eg:

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 easy, just javascript knowledge.

score 4 · Answer 2

When using Bootstrap, bootstraptour is the best option as @Guerra propos, but in case otherwise I recommend hopscotch . With it you set steps to json, it's quite simple:

{
      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."
        }
      ]
    }