0
Interactive
tours/tutorials
      with Amberjack

     Nate Aune, Jazkarta
 Plone Symposium East 2009
        Lightning Ta...
You want to:

• Create a guided tour of your site/product
 • promotional purposes
 • instructional purposes
• Engage the u...
Enter Amberjack

• create site tours without taking screenshots
  or making screencasts
• improves the usability of your s...
collective.amberjack

• Plone wrapper for Amberjack
• Comes with two sample tours
 • adding a new event
 • adding a Youtub...
Packages

• collective.amberjack.buildout
• collective.amberjack.core
• collective.amberjack.portlet
• collective.amberjac...
collective.amberjack.buildout


• Check out this buildout if you want to try
  out Amberjack in your Plone site.
• Checks ...
collective.amberjack.core

• Core is the engine of the entire model:
 • javascript files
 • layouts for the popup
 • images...
collective.amberjack.portlet

• Portlet where you can configure which tour to
  run (actually writing the tourId in a field)...
collective.amberjack.metatour

• This is the tour itself.
• Provides a viewlet containing the tour in a
  quot;amberjake-l...
collective.amberjack.metatour

• Provides Plone content types to make:
 • A tour
 • The steps for the tour
• Non-technical...
Demo
http://localhost:8080/amberjack/
Benefits
Tour is just an HTML file
Branded tours
Unlike screencasts, the tour does not have the
       'look' of Plone hardcoded into it.
Multilingual tours
       Use Plone's i18n features
to make tour in more than one language
Modular tours
Unlike screencasts, if the site changes,
  you don't have to redo the tour.
Interactive tours
Unlike screencasts which are passive experiences,
this engages the user by interacting with the site.
Future
• Paster template to quickly create new tours
• And/or modify existing paster template to
  create /tour directory ...
Proposed mini-tours
•   Adding a Folder (on Main Navigation)

•   Adding a Page (inside a folder)

•   Setting a Page as t...
Thanks to...
• Team at Sorrento '09 / Bolzano '08 sprints
 • Massimo
 • Stefano
 • Harito
 • Giorgio
 • Daniel
More info
• Project page:
  http://www.openplans.org/projects/collectiveamberjack/project-home

• Sorrento sprint tasks
  ...
Amberjack Lightning Talk
Amberjack Lightning Talk
Amberjack Lightning Talk
Amberjack Lightning Talk
Amberjack Lightning Talk
Amberjack Lightning Talk
Amberjack Lightning Talk
Amberjack Lightning Talk
Amberjack Lightning Talk
Amberjack Lightning Talk
Upcoming SlideShare
Loading in...5
×

Amberjack Lightning Talk

2,000

Published on

Amberjack is a Javascript library for making interactive site tours. In this lightning talk, I discuss a wrapper of Amberjack for Plone which lets you make tours in your Plone site. This product was developed at the Bolzano and Sorrento sprints and presented as a lightning talk at the Plone Symposium East 2009.

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,000
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide














































  • ie. if you switch skins it should still work just fine (provided the CSS ids stay the same). e.g. Intranets, again due to the fact the tutorial doesn't include the skin at all of the site, it means that a generic Plone tutorial could be applied to a heavily branded, customised
    intranet site with very little (maybe no) customisation.


  • someone can just go through the message catalog and translate e.g. 'Now enter the title
    for your document' into whatever language. The language of the tutorial would switch along with the user interface.


  • You can also start building the tour before the site/add-on is finished, which allows for more iterative documentation efforts.










  • Transcript of "Amberjack Lightning Talk"

    1. 1. Interactive tours/tutorials with Amberjack Nate Aune, Jazkarta Plone Symposium East 2009 Lightning Talk
    2. 2. You want to: • Create a guided tour of your site/product • promotional purposes • instructional purposes • Engage the user • interacts with the site by clicking and typing
    3. 3. Enter Amberjack • create site tours without taking screenshots or making screencasts • improves the usability of your site though easy, great looking and helpful tours • lightweight, stable, LGPLed, and browser compatible Javascript library More info at www.amberjack.org
    4. 4. collective.amberjack • Plone wrapper for Amberjack • Comes with two sample tours • adding a new event • adding a Youtube video
    5. 5. Packages • collective.amberjack.buildout • collective.amberjack.core • collective.amberjack.portlet • collective.amberjack.metatour • collective.amberjack.plonetour
    6. 6. collective.amberjack.buildout • Check out this buildout if you want to try out Amberjack in your Plone site. • Checks out the other packages into the /src directory.
    7. 7. collective.amberjack.core • Core is the engine of the entire model: • javascript files • layouts for the popup • images • css
    8. 8. collective.amberjack.portlet • Portlet where you can configure which tour to run (actually writing the tourId in a field) and with which skin. • Proposed: provide an alternative portlet where the user can choose among a dropdown list which tour to launch.
    9. 9. collective.amberjack.metatour • This is the tour itself. • Provides a viewlet containing the tour in a quot;amberjake-likequot; way. See demo.pt for an example. • a set of microsteps defined in an quot;abstractquot; way. For example a microstep may say quot;write 'helloworld' in the title_fieldquot;: AjSteps = { '1': new AjStep('new_folder','',''), '2': new AjStep('form_title','','MyFolder'), ... }
    10. 10. collective.amberjack.metatour • Provides Plone content types to make: • A tour • The steps for the tour • Non-technical users can make new site tours w/o needing to know HTML.
    11. 11. Demo http://localhost:8080/amberjack/
    12. 12. Benefits
    13. 13. Tour is just an HTML file
    14. 14. Branded tours Unlike screencasts, the tour does not have the 'look' of Plone hardcoded into it.
    15. 15. Multilingual tours Use Plone's i18n features to make tour in more than one language
    16. 16. Modular tours Unlike screencasts, if the site changes, you don't have to redo the tour.
    17. 17. Interactive tours Unlike screencasts which are passive experiences, this engages the user by interacting with the site.
    18. 18. Future • Paster template to quickly create new tours • And/or modify existing paster template to create /tour directory with skeleton code • Use Selenium to create tours • Create site tour content with Plone • Provide sample tour with audio voiceovers • Create tour of Plone.org
    19. 19. Proposed mini-tours • Adding a Folder (on Main Navigation) • Adding a Page (inside a folder) • Setting a Page as the Landing Page of a Folder • Arranging the Order of Content (= The Navigation Order) • Excluding Files from Aggregated Navigation • Creating an image gallery • Adding Google Analytics • Set up a New User / Group • etc...
    20. 20. Thanks to... • Team at Sorrento '09 / Bolzano '08 sprints • Massimo • Stefano • Harito • Giorgio • Daniel
    21. 21. More info • Project page: http://www.openplans.org/projects/collectiveamberjack/project-home • Sorrento sprint tasks http://www.openplans.org/projects/sorrento-sprint-2009/amberjack-site-tours • Buildout: http://svn.plone.org/svn/collective/collective.amberjack.buildout/trunk/ • Mailing list: collectiveamberjack-discussion@lists.openplans.org
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×