• Like

Loading…

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.

Collective.amberjack ploneconf2010

  • 1,635 views
Uploaded on

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/

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,635
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
16
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. collective.amberjack Massimo Azzolini RedTurtle chapter one: the interactive age.
  • 2. who am I? Massimo Azzolini RedTurtle’s co-founder and project manager massimo@redturtle.net
  • 3. the idea ✓ provide tours for plone’s newbies ✓ show portal’s features ✓ tutor your audience link foto
  • 4. that’s not all folks! ✓ every product/add-on might have its amberjack tutorial ✓ just-hired people in companies needs tutorials ✓ wizards
  • 5. 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
  • 6. 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
  • 7. 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>
  • 8. http://www.flickr.com/photos/eklektikos/2541408630/sizes/l/ we want more: tours, steps, editors, users the blueprint
  • 9. 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
  • 10. Demo: collective.amberjack at a glance
  • 11. 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.
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. The registration ✓ZCML registration ✓ file upload ✓url reference
  • 17. preconditions: could I run this tutorial? ✓ isAnonymous ✓ isAuthenticated ✓ hasRole ✓ isCreated ✓ isNotCreated ✓ [add your precondition here]
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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, )}
  • 22. 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')
  • 23. 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': ({...})
  • 24. 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
  • 25. python - a microstep 'steps': ( {'description': _(u"In the [Title] field, type.."), 'idStep': u'form_title', 'selector': u'', 'text': u'MyFolder'}, … ,)}
  • 26. 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.
  • 27. python - ajStep (from aj-ids to html) ajStandardSteps = ( ... ('form_title', '#archetypes-fieldname-title input'), ('form_description', '#archetypes-fieldname-description textarea'), ... )
  • 28. cfg - ajStep (no more needed) ajStandardSteps = ( ... ('form_title', '#archetypes-fieldname-title input'), ('form_description', '#archetypes-fieldname-description textarea'), ... )
  • 29. python - ZCML registration <collective.amberjack:tour tourdescriptor=".tour1.ajTour" /> <collective.amberjack:ajstep stepsdescriptor= ".ajStandardSteps.ajStandardSteps" />
  • 30. cfg - ZCML registration <collective.amberjack:tour tourlocation="tours.zip" /> <collective.amberjack:ajstep stepsdescriptor= ".ajStandardSteps.ajStandardSteps" />
  • 31. 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/
  • 32. Sandbox: member folders. Step 1.
  • 33. ehm, I said “member folders”
  • 34. Sandbox: member folders. Step 2.
  • 35. Sandbox: member folders. Step 3.
  • 36. 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
  • 37. Create a folder and a page - TTTW
  • 38. What’s windmill? • “Windmill is a web testing tool designed to let you painlessly automate and debug your web application.”
  • 39. 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
  • 40. 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
  • 41. stop videos, start interactive tutorials use collective.amberjack.windmill create a website publish your tutorials http://www.flickr.com/photos/orphanjones/414401592
  • 42. playing with.. ploneformgen.demo.plone.org
  • 43. http://www.flickr.com/photos/anirudhkoul/3786725982 we have a team the team, now
  • 44. 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
  • 45. 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
  • 46. we have a plan and it’s public
  • 47. 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
  • 48. 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/
  • 49. 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
  • 50. Grazie. Thank you.
  • 51. Questions!? Massimo Azzolini massimo@redturtle.net http://www.flickr.com/photos/seandreilinger/2326448445