• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

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.

Like this presentation? Why not share!

Collective.amberjack ploneconf2010

on

  • 1,807 views

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/

Statistics

Views

Total Views
1,807
Views on SlideShare
1,799
Embed Views
8

Actions

Likes
2
Downloads
16
Comments
0

4 Embeds 8

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

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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