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?
2 Respostas
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.
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."
}
]
}