Biztos ismeritek azt a módszert, amikor a látogatót az első alkalommal végigvezetem az oldal funkcióin.
Erre én a http://linkedin.github.io/hopscotch/ megoldását használnánk, mert ez tűnik a leghatékonyabbnak.
A probléma csak az, hogyan készítse el egy átlag user a tourt?
Mert egy ilyet kellene összeraknia:
PHP kód:
{
id: "hello-hopscotch",
steps: [
{
target: "hopscotch-title",
title: "Welcome to Hopscotch!",
content: "Hey there! This is an example Hopscotch tour. There will be plenty of time to read documentation and sample code, but let's just take some time to see how Hopscotch actually works.",
placement: "bottom",
xOffset: 'center',
arrowOffset: 'center'
},
{
target: document.querySelectorAll("#general-use-desc code")[1],
title: "Where to begin",
content: "At the very least, you'll need to include these two files in your project to get started.",
placement: "right",
yOffset: -20
},
{
target: "my-first-tour-file",
placement: "top",
title: "Define and start your tour",
content: "Once you have Hopscotch on your page, you're ready to start making your tour! The biggest part of your tour definition will probably be the tour steps."
},
Nade azt nem várható el tőle, hogy ezt ő írja meg.
Ide kellene a fejlesztő vagyis te.
Arra gondoltam, hogy egy dom selectorral megoldható lenne a feladat.
Vagyis kijelöli a user a megfelelő részt az oldalon és megírja hozzá a szöveget. A végén pedig menti és készen is van a tour.
Ezeket a selectorokat találtam jónak:
https://github.com/andrewchilds/jQuery.DomOutline
Edit fiddle - JSFiddle
Ebből a kettőből kellene egy használható rendszert összegyúrni. Az sem lenne baj, ha a usernek csak egyetlen scriptet kellene beszúrnia az oldalába és az behúzná mindazt ami kell.
Mire jó a product tour?
Amikor a user először van egy oldalon, akkor el tudja indítani ezt a súgót, ami végigvezeti őt azokon a funkciókon, amiket használni tud.
Amikor először használ egy online szoftvert, akkor be lehet mutatni neki az extra funkciókat
Be lehet mutatni egy admin felület működését
Bemutathatod egy szoftver használatát
Végigvezethetted egy nyereményjáték lépésein
Egy user tesztnél bemutathatod a feladatot, amit meg kell oldania
Ráveheted a usert, hogy használja az oldaladon a facebook mentés vagy a megosztás gombokat, esetleg a kommenteket.
A nagy terv
Kifizetem neked a fejlesztés és nyílttá teszem a kódot. Az fsf alapítvány most keres új nyílt forrású szoftver megoldásokat. Ez pedig nagyon hiányzik a piacról, mert nincs ingyenes megoldás.
Vagyis a kódod hasznos lesz több ezer honlaptulajdonos számára.
Köszi a figyelmet.
Kérlek írd ide, ha te is használni tudnád, hogy motiváljuk a leendő fejlesztőt. Ez egy kis hozzájárulás a részedről, de sokat jelent a megvalósulás szempontjából.
Köszi
Könyvjelzők