Eredmény: 1 - 6 (6) összesen

Téma: Izgalmas és hasznos szoftver: egy product tour fejlesztésére keresek proggert

  1. #1
    Bölcs DomainFlotta logója
    Csatlakozott
    12-05-20
    Hely
    Budapest
    Hozzászólás
    2.859
    Begyűjtött 1.167 köszönetet
    673 hozzászólásával

    Alapbeállítás Izgalmas és hasznos szoftver: egy product tour fejlesztésére keresek proggert

    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'
    },
    {
    targetdocument.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


    Stabil növekedési pályára állítanád a vállalkozásod?
    Tartalommarketing a Gyakorlatban Könyv

  2. #2
    Törzsvendég wzol logója
    Csatlakozott
    14-05-31
    Hozzászólás
    118
    Begyűjtött 36 köszönetet
    32 hozzászólásával

    Alapbeállítás re: Izgalmas és hasznos szoftver: egy product tour fejlesztésére keresek proggert

    Tetszik az elképzelés, és szép, nagy kihívásokkal teli a terv

    Két részben reagálnék:

    A PageTour:

    Egy projektben már próbáltam ilyet használni, és azt kell mondanom, hogy sajnos nem találtam egy normális tour motort: mindegyik elhasalt valamilyen számomra fontos szemponton: az egyik az lett volna, hogy ne a JS tárolja a tourt, hanem a DOM. Mindkettőnek megvannak a hátrányai, amiért mégis inkább a DOM mellett voksoltam, az többek közt a JS mérete: ha van egy oldalon 10 tour, egyenként 5 megállóval (ami egy közepesen komplex oldalon elképzelhető), akkor már elég kellemesre hízik tőle a JS - és akkor még ebben nincs többnyelvűség. Ez JS-ben tárolás esetén mindenhol betöltődik, míg ha a DOM-ban van a tour, akkor csak az adott oldalhoz tartozó megállók, szövegek töltődnek le. Hátrány, hogy JS-ben egyszerűbb megcsinálni, hogy egy elem egyszerre több tour megállója is lehessen, továbbá nem tudom milyen SEO hátrányai vannak a DOM-ban elrejtett hosszú tour szövegeknek.

    A másik gond a reszponzív oldalak támogatása volt (itt hasal el a fent említett hopscotch is): azaz, mit csináljon a tour motor, ha a következő elem nem létezik vagy el van rejtve - egyszerű példa: oldalsávban lévő elemre kerül egy megálló, ami nem lesz látható mobil nézetben. Itt van olyan motor ami csak elszáll, van amelyik megjeleníti a következő lépést a 0,0 koordinátánál (ezt csinálja a hopscotch is) - felhasználói élmény szempontjából egyik sem jó megoldás.

    Én végül ezzel kezdtem el foglalkozni - teszteltem, írtam issue-t, de sajnos elakadtunk: https://github.com/crash83k/jquery-page-tour

    A DomSelector:

    Itt még a kisebbik feladat az egér követése és a kirajzolás - a fő probléma a megfelelő elem rögzítése: belekattintok, és az tárolódjon el (kb. mint az Optimizely szerkesztőjében) 4-5 egymásba ágyazott DIV-nél már kezdenek előjönni érdekességek, és akkor még a hover, tab, accordion, carousel egyéb elemekről nem beszéltem. Még a Distill Web Monitor is csinál furcsaságokat, pedig az már Chrome kiegészítőként, full kliens oldalon ad lehetőséget az adott elem kiválasztására belekattintásra - kombinálva XPath vagy akár CSS selector segítségével.

    Mindez berántva egyetlen rendszerbe kemény dió. Persze, ha valami lenne belőle, akkor szívesen megnézném, mert már egy normális tour motornak is örülnék - nemhogy egy azt szerkesztő frontendnek



  3. Az alábbi felhasználók hálásak a válaszért:

    DomainFlotta (2017-07-26)

  4. #3
    Bölcs DomainFlotta logója
    Csatlakozott
    12-05-20
    Hely
    Budapest
    Hozzászólás
    2.859
    Begyűjtött 1.167 köszönetet
    673 hozzászólásával

    Alapbeállítás re: Izgalmas és hasznos szoftver: egy product tour fejlesztésére keresek proggert

    Idézet wzol eredeti hozzászólása Hozzászólás megtekintése
    Tetszik az elképzelés, és szép, nagy kihívásokkal teli a terv

    Két részben reagálnék:
    Köszönöm, igazán hasznos dolgokat írtál. A kihívás a fejlesztőé lesz, aki belevág, erre keresek itt is embert



    többek közt a JS mérete:
    A hopscotch nagyon picike és akár az egész mehetne egy CDN-be. A méret miatt annyira nem aggódom


    A másik gond a reszponzív oldalak támogatása volt (itt hasal el a fent említett hopscotch is) azaz, mit csináljon a tour motor, ha a következő elem nem létezik vagy el van rejtve - egyszerű példa: oldalsávban lévő elemre kerül egy megálló, ami nem lesz látható mobil nézetben. Itt van olyan motor ami csak elszáll, van amelyik megjeleníti a következő lépést a 0,0 koordinátánál (ezt csinálja a hopscotch is) - felhasználói élmény szempontjából egyik sem jó megoldás.
    Erre nem is gondoltam, bár a problémát első körben megoldom egy huszárvágással. Vagyis mobil nézetben nincs tour. Amúgy is kevés hely van mobilon és ott úgy sem csinálnak vagy tanulnak komolyabb szoftvereket használni a userek. Ha van mondjuk egy összetett marketing automatizációs szoftver, amit meg akar tanulni, akkor leül egy normális monitor elé, ami végigvezeti mondjuk egy alap kampány elkészítésén. Erre tökéletes. Minden másra ott az ui/ux

    Aztán ha az mvp sikeres lesz, akkor majd lehet csiszolgatni.

    Amúgy mi lenne a megoldás az általad említett elemre? Ha nem látszik mobilos nézetben az adott elem, akkor mi a jobb megoldás, mint az, hogy kihagyod?



    Én végül ezzel kezdtem el foglalkozni - teszteltem, írtam issue-t, de sajnos elakadtunk: https://github.com/crash83k/jquery-page-tour
    Köszi, ez is tök jó

    Hol akadtatok el vele? Úgy látom szépen frissítgetik

    [
    B]A DomSelector:[/B]

    Itt még a kisebbik feladat az egér követése és a kirajzolás - a fő probléma a megfelelő elem rögzítése: belekattintok, és az tárolódjon el (kb. mint az Optimizely szerkesztőjében) 4-5 egymásba ágyazott DIV-nél már kezdenek előjönni érdekességek, és akkor még a hover, tab, accordion, carousel egyéb elemekről nem beszéltem.
    Igen, ezt én is a gyenge résznek érzem. MVP-nek mégis ideális lenne. Hiszen nem kell minden elemre tour-t rakni. Elég, ha a fontosan részek vannak bemutatva és különböző funkciók, amik esetleg rejtve maradnának a szem elől.


    Még a Distill Web Monitor is csinál furcsaságokat, pedig az már Chrome kiegészítőként, full kliens oldalon ad lehetőséget az adott elem kiválasztására belekattintásra - kombinálva XPath vagy akár CSS selector segítségével.

    Mindez berántva egyetlen rendszerbe kemény dió. Persze, ha valami lenne belőle, akkor szívesen megnézném, mert már egy normális tour motornak is örülnék - nemhogy egy azt szerkesztő frontendnek
    Gondolkodtam azon is, hogy böngésző kiegészítőként kellene megcsinálni, hiszen akkor nem lenne az sem gond, hogy egy admin felületre készítsen az ember tourt. Lehet egyszerűbb is lenne. Majd meglátjuk, hogy találok-e rá embert vagy sem.

    Szóval lehet tolongani a fejlesztésért



  5. #4
    Törzsvendég wzol logója
    Csatlakozott
    14-05-31
    Hozzászólás
    118
    Begyűjtött 36 köszönetet
    32 hozzászólásával

    Alapbeállítás re: Izgalmas és hasznos szoftver: egy product tour fejlesztésére keresek proggert

    A hopscotch nagyon picike és akár az egész mehetne egy CDN-be. A méret miatt annyira nem aggódom
    Rosszul fogalmaztam. Nem a motor mérete aggaszt, hanem maga a tour szövege. Az többszörösére növelheti a JS kódot, nincs minify lehetőséged, és szépíteni talán aszinkron betöltéssel lehet, csak akkor a tour kezdő triggereket addig illene elrejteni Nem mintha a DOM-ban jobb helye lenne, de talán az a kisebbik rossz.

    Amúgy mi lenne a megoldás az általad említett elemre? Ha nem látszik mobilos nézetben az adott elem, akkor mi a jobb megoldás, mint az, hogy kihagyod?
    Ahol használtam (volna) ott szerencsés lett volna opcionálisan azt a megállót vagy átugorni, vagy simán középen megjelentetni a szöveget "rámutatás" nélkül. Csak ehhez úgy kell megfogalmazni a szöveget első esetben, hogy az átugrott szövegre ne utaljon a többi, második esetben pedig akkor is legyen értelme a szövegnek ha nem látszik az az elem amiről a szöveg szól. Viszont az általam próbáltak között olyan is volt, amelyik hiányzó DOM elem miatt leállt, és csak full oldal újratöltés segített.

    A reszponzív támogatás hiánya általános kihívás, de könnyen lehetnek speciális esetek is: például egy webshopban a "kosárba" gomb valószínűleg szerepelni fog a lépések között, de mi van akkor, ha olyan terméknél indítja el a tourt, ami éppen nincs raktáron és nincs "kosárba" gomb, csak "előjegyzés" gomb. Mit tesz a túra motor?

    Illetve a "mobilon nincs túra" elképzeléssel még meg is tudok barátkozni - bár akkor itt a túra indító elemeket is el kell rejtegetni -, viszont tablet esetén már érdemes foglalkozni a témával.

    Hol akadtatok el vele? Úgy látom szépen frissítgetik
    Nos, igen, két issue van, és mind a kettő én vagyok Az elakadás úgy nézett ki, hogy egy idő után el sem indult a túra. Én pedig meguntam a debuggolást.

    Gondolkodtam azon is, hogy böngésző kiegészítőként kellene megcsinálni, hiszen akkor nem lenne az sem gond, hogy egy admin felületre készítsen az ember tourt.
    Ez is működhet, és a kiegészítőn belül lehet bejelentkezni a "főrendszerbe". A kijelölésnél a komolyabb kihívást az jelenti, ha az adott elemnek nincs például ID-je, csak jobb esetben class, rosszabb esetben még az sem, csak mondjuk egy mezei textarea. Classnál még mondhatod, hogy például az ötödik div ezzel a class-szal (még ez is okozhat meglepő pillanatokat), viszont a második textarea-hoz kötni egy túra megállót már eléggé kockázatos.



  6. #5
    Bölcs DomainFlotta logója
    Csatlakozott
    12-05-20
    Hely
    Budapest
    Hozzászólás
    2.859
    Begyűjtött 1.167 köszönetet
    673 hozzászólásával

    Alapbeállítás re: Izgalmas és hasznos szoftver: egy product tour fejlesztésére keresek proggert

    Rosszul fogalmaztam. Nem a motor mérete aggaszt, hanem maga a tour szövege. Az többszörösére növelheti a JS kódot, nincs minify lehetőséged, és szépíteni talán aszinkron betöltéssel lehet, csak akkor a tour kezdő triggereket addig illene elrejteni Nem mintha a DOM-ban jobb helye lenne, de talán az a kisebbik rossz.
    A tour szövege egy külön js fájlból jön. Azt lehet minifyzálni és mehet gyorsítóba is. Ezt nem lehet megúszni. Talán annyi, hogy nem töltöm be mindig, csak akkor, amikor szüksége van rá vagyis elindítja a tourt




    A reszponzív támogatás hiánya általános kihívás, de könnyen lehetnek speciális esetek is: például egy webshopban a "kosárba" gomb valószínűleg szerepelni fog a lépések között, de mi van akkor, ha olyan terméknél indítja el a tourt, ami éppen nincs raktáron és nincs "kosárba" gomb, csak "előjegyzés" gomb. Mit tesz a túra motor?

    Ez egy jó kérdés. Bár nem hinném, hogy a webshopok használatát tanítani kellene a usereknek, de a példát értem. Azonban egyszerű kommunikációval megoldható. Azt írom, hogy ezzel a gombbal tudod kosárba tenni, de ha nincs itt gomb (ami rossz konstrukció), akkor nincs raktáron a termék.


    Illetve a "mobilon nincs túra" elképzeléssel még meg is tudok barátkozni - bár akkor itt a túra indító elemeket is el kell rejtegetni -, viszont tablet esetén már érdemes foglalkozni a témával.
    A mobil nézetben nincs túraindító, ez szerintem egyszerűen megoldható. A tablettel meg nem kell foglalkozni. Vagy minden látszik tablet nézetben is vagy ott sem jelenik meg a túra indítás.
    Bár itt továbbra is az lenne a cél, hogy egy bonyolult folyamatot vagy kényelmi funkciókat mutasson be az oldal, olyat, amik kevesen használnak vagy épp a session recorderekből látszik, hogy rosszul használják.



    Nos, igen, két issue van, és mind a kettő én vagyok Az elakadás úgy nézett ki, hogy egy idő után el sem indult a túra. Én pedig meguntam a debuggolást.
    Az szívás


    Ez is működhet, és a kiegészítőn belül lehet bejelentkezni a "főrendszerbe". A kijelölésnél a komolyabb kihívást az jelenti, ha az adott elemnek nincs például ID-je, csak jobb esetben class, rosszabb esetben még az sem, csak mondjuk egy mezei textarea. Classnál még mondhatod, hogy például az ötödik div ezzel a class-szal (még ez is okozhat meglepő pillanatokat), viszont a második textarea-hoz kötni egy túra megállót már eléggé kockázatos.
    Ez egy jó kérdés. Nem tudom mi van akkor, ha sem class, se id nincs, amihez kötni lehetne. Bár úgy láttam, mintha a hopscotch esetén sok mindenhez tudnád kötni. Akár szóhoz vagy horgonyhoz is



  7. #6
    Törzsvendég wzol logója
    Csatlakozott
    14-05-31
    Hozzászólás
    118
    Begyűjtött 36 köszönetet
    32 hozzászólásával

    Alapbeállítás re: Izgalmas és hasznos szoftver: egy product tour fejlesztésére keresek proggert

    Talán annyi, hogy nem töltöm be mindig, csak akkor, amikor szüksége van rá vagyis elindítja a tourt
    Igen, ez jó ötlet, és így akárhány túrád lehet, akárhány nyelven - csak az aktuális töltődik le és be.

    Azt írom, hogy ezzel a gombbal tudod kosárba tenni, de ha nincs itt gomb (ami rossz konstrukció), akkor nincs raktáron a termék.
    Itt arra gondoltam, hogy van ott egy gomb például "előjegyzés", "értesítést kérek", esetleg "kifutott termék - ezt ajánljuk helyette", csak ennek már egészen más az ID-je, mint annak, amihez a túra megálló van kötve. Ezt kell lekezelni és ez feltételezi, hogy aki írja a szövegeket, tervezi a túrát, az ilyen helyzetekkel tisztában kell hogy legyen.

    Ez egy jó kérdés. Nem tudom mi van akkor, ha sem class, se id nincs, amihez kötni lehetne. Bár úgy láttam, mintha a hopscotch esetén sok mindenhez tudnád kötni. Akár szóhoz vagy horgonyhoz is
    Mivel az én esetemben én voltam a túra készítője és "írója" is, én ilyenkor csináltam például a szövegben egy span-t ID-vel csak azért, hogy arra tudjak mutatni, vagy egy nagyobb div-et ha egy elemcsoportról volt szó (és nem volt az már eleve is egy div-ben). Tehát ha egy kézben fut össze a kettő, akkor elég sok minden megoldható - a fenti példában is a második code elem a target a túra második megállójánál
    Kód:
    document.querySelectorAll("#general-use-desc code")[1]
    , de ha belegondolsz, normál esetben mikor kapna egy <p> egyedi ID-t?



  8. Az alábbi felhasználók hálásak a válaszért:

    DomainFlotta (2017-07-26)

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •