Co jest używane w przypadku końcówek bąbelkowych Googles i podobnych "krzywych uczenia się"/"rozpoczynania" porad bąbelkowych?

Question

Dzisiaj wszedłem do mojego Kalendarza Google i było tam małe pudełko (dymek) wyjaśniające, że wprowadziły nową paletę kolorów dla wydarzeń kalendarza. Pudełko miało mały przycisk zamykania w prawym górnym rogu. W dzisiejszych czasach całkiem normalne rzeczy w sieci.

Chciałbym coś podobnego na mojej stronie (Ruby on Rails), aby pomóc nowym użytkownikom dowiedzieć się o funkcjonalności w witrynie bez konieczności posiadania bańki na stronie, gdy użytkownik zapozna się z funkcjonalnością.

Czy ktoś wie, w jaki sposób tworzone są bańki "rozpoczynające się"? Czy to zwykłe ciasteczko jest przechowywane na komputerze użytkownika, czy widział (zamknięty) końcówkę, czy nie?

Czy ktoś wie o wtyczce/klejnocie rails, który ułatwia wykonanie tych wskazówek?

Dzięki :-)

Answer 1

To nie jest coś, co jest specyficzne dla platformy, ale jest zazwyczaj realizowane na przednim końcu. Kod serwera miałby znaczenie tylko przy pisaniu warunku na stronie, czy rozpocząć wydarzenie.

Jeśli chodzi o front end, to JS Guiders to doskonała wtyczka javascript/jQuery, której można użyć do stworzenia "funkcji przewodnika", takiej jak funkcjonalność na stronach internetowych. Używałem ich w kilku aplikacjach internetowych z powodzeniem. (nie jestem związany, tylko wentylator)

Aby rozpocząć wycieczkę, można też zapisać warunek w DB, a następnie włóż go do javascript lub ustawić ciasteczko i czytać w języku JavaScript.

Zalecam przechowywanie warunku w DB, ponieważ byłoby dość denerwujące mieć wskazówkę/trasę na każdym nowym komputerze, którego używam i aplikacji.

Po tym jQuery i skrypt Guider, można użyć kodu tak, aby utworzyć Tour:

$(document).ready(function() { 

     guiders.createGuider({ 
      buttons: [{ name: "Next"}], 
      description: "This is the first guider", 
      id: "first", 
      next: "second", // when the button is pressed, jump to this guider 
      overlay: true, 
      title: "Guten Tag!" 
     }); 

     guiders.createGuider({ 
      attachTo: "#logo", // dom element to attach to 
      buttons: [{ name: "Close"}], 
      description: "This is the second...", 
      id: "second", 
      overlay: true, // grey out the background to 1/2 opacity 
      position: 3, // Clock position (3 o'clock 
      title: "Find your way home" 
     }); 

    }); 

    if(condition){ 
     guiders.show('first'); // jump into the tour at guider id first 
    } 

Answer 2

dla funkcjonalności, które znikają one po ich zamknięciu, można wyodrębnić koncepcji tego typu railscast - po prostu nie zmieniaj ich na inną i nie stylizuj ich na inne css: http://railscasts.com/episodes/103-site-wide-announcements