Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Collective.amberjack ploneconf2010



collective.amberjack is a plone based tool to create interactive tutorial.

collective.amberjack is a plone based tool to create interactive tutorial.

These are the slides presented during this talk: http://ploneconference2010.blip.tv/file/4317469/



Total Views
Views on SlideShare
Embed Views



4 Embeds 8

http://www.redturtle.it 3
http://www.dev.redturtle.it 3
https://www.redturtle.it 1
http://localhost 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Collective.amberjack ploneconf2010 Collective.amberjack ploneconf2010 Presentation Transcript

  • collective.amberjack Massimo Azzolini RedTurtle chapter one: the interactive age.
  • who am I? Massimo Azzolini RedTurtle’s co-founder and project manager massimo@redturtle.net
  • the idea ✓ provide tours for plone’s newbies ✓ show portal’s features ✓ tutor your audience link foto
  • that’s not all folks! ✓ every product/add-on might have its amberjack tutorial ✓ just-hired people in companies needs tutorials ✓ wizards
  • amber-what?!? ✓ it provides an unobtrusive javascript infrastructure for online tours ✓ your audience can navigate the site and get additional info ✓ developed by Arash Yalpani
  • basically it provides ✓ a fancy popup “div” with prev/next/exit buttons, fully html enabled for your steps. ✓ a mapping between a step and each url you can visit. amberjack.org
  • chunks of HTML <div title="http://amberjack.org/skins/customize/?travel=2"> <strong>Include a video for example:</strong> <object width="330" height="272"><param name="movie" value="http://www.youtube.com/v/C-3wuYyXGN8" /><param name="wmode" value="transparent" /><embed src="http:// www.youtube.com/v/C-3wuYyXGN8" type="application/x-shockwave- flash" wmode="transparent" width="330" height="272"></embed></ object> <form> What is your favorite cocktail? <select><option value="">Select</option> ...</select> </form> </div>
  • http://www.flickr.com/photos/eklektikos/2541408630/sizes/l/ we want more: tours, steps, editors, users the blueprint
  • the blueprint ✓we want interactive tutorials, not just tours ✓we need a UI to show them ✓we need people that write them ✓we want to deliver and to share them
  • Demo: collective.amberjack at a glance
  • So, interaction! ✓ let the user interact with the plone interface ✓ let the tool guide the user ✓ let the tool replace the user’s actions ✓ there are many features to cover in plone: • we have “helpers” for plone’s features • we didn’t cover them all… yet.
  • the core package: collective.amberjack.core ✓wraps the amberjack javascript library ✓gives it the interactive flavour ✓registers the tutorials ✓manages validations ✓tutorial preconditions ✓microstep validations
  • Javascript Libraries ✓amberjack.js - the basic library, revised and improved ✓amberjackPlone.js - the engine for the interaction ✓stepAdapters.js - the behaviour associated with any helper: helper: { highlight: function() {...}, step: function() {...} }, ✓windmillUtils.js - utilities shared with the windmill tool
  • Do not touch Plone ✓ collective.amberjack does not change anything in Plone itself ✓ we used unobtrusive javascript code and tours described through HTML http://www.flickr.com/photos/dhowellphoto/3023319312
  • How a tutorial is made ✓ A tutorial is made of steps • a step an url • e.g. “insert an external link” ✓ every step is made by several microsteps • e.g. “type the following text…” • or “click the link icon…” ✓ two types of microsteps • with helper “>>” • just description
  • The registration ✓ZCML registration ✓ file upload ✓url reference
  • preconditions: could I run this tutorial? ✓ isAnonymous ✓ isAuthenticated ✓ hasRole ✓ isCreated ✓ isNotCreated ✓ [add your precondition here]
  • validations: did I finish? ✓ check the microstep condition = checkstep ✓ custom condition condition = { "selector": {"description":"id"}, "operator":"co", "value":"Plone" } ✓ can I go next? condition = doitmanually
  • collective.amberjack.portlet ✓provides a portlet that draws a set of tours in a given order ✓you may choose: • the title • the list of tours and order them • popup skin type ✓it enables/disables the tours in accordion to the validators • e.g.: first create a folder then a page
  • The Tutorials: collective.amberjack.plonetour • the python approach, • the .cfg approach not so good: #success: • too complicated for • easier to read middle experienced user • easier to write • so custom • easier to be generated • not reusable • easier to distribute • extremely integrated with i18n • problems with i18n I don’t wanna re-invent the wheel
  • python - tour definition ajTour = { 'tourId':u'basic01_add_and_publish_a_folder', 'title': _(u'Add and publish a Folder'), 'steps': (add_folder, fill_out_the_fields, publish_folder, all_done, )}
  • cfg - tour definition [amberjack] steps = 0_create-a-new-folder 1_fill-out-the-fields 2_publish-the-folder 3_all-done title = Add and publish a folder validators = python: isNotCreated(context,'/myfolder') python: hasRole(context,request, 'Reviewer')
  • python - the step add_folder = { 'validators': (isManager, isNotFolderCreated,), 'url': u'/', 'xpath': u'', 'xcontent': u'', 'title': _(u"Create a new folder"), 'text': _(u"Folders are one..."), 'steps': ({...})
  • cfg - the step [0_create-a-new-folder] blueprint = collective.amberjack.blueprints.step text = the folders are.. title = Create a new folder url = / microsteps = 0_0_microstep 0_1_microstep 0_2_microstep 0_3_microstep
  • python - a microstep 'steps': ( {'description': _(u"In the [Title] field, type.."), 'idStep': u'form_title', 'selector': u'', 'text': u'MyFolder'}, … ,)}
  • cfg - a microstep [0_1_microstep] blueprint = collective.amberjack.blueprints.windmillmicrostep selector = {"//dl[@id='plone-contentmenu-factories']/ dt/a/span[1]" : 'xpath'} method = click description = Click the [Add new...] drop-down menu.
  • python - ajStep (from aj-ids to html) ajStandardSteps = ( ... ('form_title', '#archetypes-fieldname-title input'), ('form_description', '#archetypes-fieldname-description textarea'), ... )
  • cfg - ajStep (no more needed) ajStandardSteps = ( ... ('form_title', '#archetypes-fieldname-title input'), ('form_description', '#archetypes-fieldname-description textarea'), ... )
  • python - ZCML registration <collective.amberjack:tour tourdescriptor=".tour1.ajTour" /> <collective.amberjack:ajstep stepsdescriptor= ".ajStandardSteps.ajStandardSteps" />
  • cfg - ZCML registration <collective.amberjack:tour tourlocation="tours.zip" /> <collective.amberjack:ajstep stepsdescriptor= ".ajStandardSteps.ajStandardSteps" />
  • Sandbox ✓ portal as a sandbox ✓ personal folders as sandboxes ✓ from sandbox to wizard ✓ “save my data, I’ll be back soon” ✓ ... http://www.flickr.com/photos/bhollar/425116404/
  • Sandbox: member folders. Step 1.
  • ehm, I said “member folders”
  • Sandbox: member folders. Step 2.
  • Sandbox: member folders. Step 3.
  • TTTW - Tutorials Through The Web ✓ editors want to use the browser to create their tours ✓ what’s better than click and save? ✓ we enhanced Windmill
  • Create a folder and a page - TTTW
  • What’s windmill? • “Windmill is a web testing tool designed to let you painlessly automate and debug your web application.”
  • the audience ✓editors, should have less difficulties in writing a tutorial • “..and in your opinion, that CFG syntax should be easy?!?” ✓programmers, may use the collective.amberjack suite to • create the online demo for the plone add-on • get functional tests
  • TTTW: wishes and dreams ✓make it easier: if the html doesn’t speak enough it can be painful ✓create a tutorial directly from plone start windmill from the plone site ✓save it on a local, but also on shared repository so that it can be easily shared with someone else ✓import/export as a package
  • stop videos, start interactive tutorials use collective.amberjack.windmill create a website publish your tutorials http://www.flickr.com/photos/orphanjones/414401592
  • playing with.. ploneformgen.demo.plone.org
  • http://www.flickr.com/photos/anirudhkoul/3786725982 we have a team the team, now
  • the contributors • Mirco Angelini • Irene Capatti • Andrea Benetti • Giorgio Borelli • Federica D'Elia • Jacopo Deyla • Luca Fabbri • Domen Kozar • Andrew Mleczko • Leonardo J. Caballero (es) • Vincent Fretin • Vincent Fretin (fr) • Giacomo Spettoli • Stefano Marchetti (it) • Massimo Azzolini • Andrew Mleczko (pl) • Aaron VanDerlip • Tamosauskas (pt-br) • Michael Davis
  • RedTurtle is supporting the project ✓ stable team to enhance ✓ Activities won't be based and mantain the tool on my spare time anymore ✓ more people ✓ They are going to be ✓ you’re still welcome! supported and scheduled in a more stable way. ✓ amberjack company ✓ “10 percent manifesto”-ish branded
  • we have a plan and it’s public
  • next release 1.1 ✓refactor the code ✓Check if the user completes the step ✓validations & preconditions ✓manage prev/next buttons ✓TTTW: implementation ✓amberjack’s template for sunburst ✓sandbox ✓translations: choose the right approach ✓1.0: implementation ✓test coverage ✓2.0: brainstorm
  • References ✓ Project management: • https://launchpad.net/collective.amberjack • https://blueprints.launchpad.net/collective.amberjack • https://bugs.launchpad.net/collective.amberjack • https://launchpad.net/collective.amberjack.windmill ✓ wiki & documentation • http://www.coactivate.org/projects/collectiveamberjack/
  • References ✓mailing list: • http://www.coactivate.org/projects/collectiveamberjack/lists/ collectiveamberjack-discussion • http://www.coactivate.org/projects/collectiveamberjack/lists/collective- amberjack-support/ ✓code svn on collective: • http://dev.plone.org/collective/browser/collective.amberjack.buildout • http://dev.plone.org/collective/browser/collective.amberjack.core • http://dev.plone.org/collective/browser/collective.amberjack.plonetour • http://dev.plone.org/collective/browser/collective.amberjack.portlet • http://dev.plone.org/collective/browser/collective.amberjack.windmill
  • Grazie. Thank you.
  • Questions!? Massimo Azzolini massimo@redturtle.net http://www.flickr.com/photos/seandreilinger/2326448445