Interactive
tours/tutorials
with Amberjack
Nate Aune, Jazkarta
Plone Symposium East 2009
Lightning Talk

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

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

collective.amberjack
• Plone wrapper for Amberjack
• Comes with two sample tours
• adding a new event
• adding a Youtube video

Packages
• collective.amberjack.buildout
• collective.amberjack.core
• collective.amberjack.portlet
• collective.amberjack.metatour
• collective.amberjack.plonetour

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.

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

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.

collective.amberjack.metatour
• This is the tour itself.
• Provides a viewlet containing the tour in a
\"amberjake-like\" way. See demo.pt for an
example.
• a set of microsteps defined in an \"abstract\"
way. For example a microstep may say
\"write 'helloworld' in the title_field\":
AjSteps = {
'1': new AjStep('new_folder','',''),
'2': new AjStep('form_title','','MyFolder'),
...
}

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.

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 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

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...

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
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