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.
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. 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
9. 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.
11. 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.
12. 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'),
...
}
28. 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
29. 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...
30. Thanks to...
• Team at Sorrento '09 / Bolzano '08 sprints
• Massimo
• Stefano
• Harito
• Giorgio
• Daniel
31. 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
Editor's Notes
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.