collective amberjack - european plone symposium

collective.amberjackon-line tutorials with

Massimo Azzolini

RedTurtle

Monday, May 31, 2010

who am I?

Massimo AzzoliniRedTurtle’s co-founder and project [email protected]


mailto:[email protected]

mailto:[email protected]

link foto

the basic idea

✓ tours for plone’s newbies

✓ show portal’s features

✓ tutor your audience


that’s not all folks!

✓ every product/add-on

might have its amberjack tutorial

✓ just-hired people in companies needs tutorials

✓ wizards

✓ a shared tutorials’ repository


the first goal

✓ Use Amberjack to offer guided help for Plone’s first-time users

✓ Use it in real use cases

✓ PLIP #9324: include it in a next 4.x release


link foto

we already have these tours

✓ Add and publish a Folder

✓ Add and publish a Page

✓ Add and publish a News Item

✓ Add and publish an Event

✓ Format a page using the visual editor

✓ Create internal links


link foto

we already have these tours

✓ Create external links

✓ Upload an image

✓ Insert image on a page

✓ Upload and link to a File

✓ Using the Contents tab

✓ Using the Display menu


http://www.flickr.com/photos/slopjop/1300515408

a spotlight




you just installed Plone... and you’re an happy guy


..and you need to learn it by yourself..

hum, should I just select the tour from the list? so easy?


... complete the steps!

one at a time, please


http://www.flickr.com/photos/eklektikos/2541408630/sizes/l/

the blueprint tours, steps, editors, users




the blueprint

✓we want to have tours

✓we need tours’ creators

✓programmers

✓editors

✓we need different tools

✓python oriented

✓user interface oriented

✓we want our tours used

✓just as a demo

✓as a guided aid

✓run in a sandbox

✓we want them

✓downloadable

✓sharable

✓installable


http://www.flickr.com/photos/dhowellphoto/3023319312

Do not touch Plone

✓ collective.amberjack do not changes anything in Plone itself

✓ we used unobtrusive javascript code and tours descripted through HTML




the software components

amberjack librarycollective.amberjack.corecollective.amberjack.portletcollective.amberjack.plonetour(collective.amberjack.windmill)(collective.amberjack.yourtour)


the software components

amberjack librarycollective.amberjack.corecollective.amberjack.portletcollective.amberjack.plonetour(collective.amberjack.windmill)(collective.amberjack.yourtour)collective.amberjack.subskins


amberjack.org

✓ developed by Arash Yalpani

✓ provides an unobtrusive javascript infrastructure for online tours

✓ not completely usable for

our purposes


amberjack.org

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.


some use case not fully supported

✓in Plone a path does not identify uniquely a html page:

• view a page (/plone/page-a/view)

• edit a page (/plone/page-a/edit)

• save a page (/plone/page-a/view)

✓it’s not just about links, we also submit forms


the solutions

✓make the mapping between steps and url less strong:

• now the steps has an order (1. 2. 3....)

✓don’t just rely on urls to pass tour variables

• use cookies


collective.amberjack.core

✓all the javascript engine

✓tour definition and registration

✓step definition

✓ZCML configuration for

• tours

• ajStep

✓validators definition

✓Amberjack skins

• model_t

• safari

• light_grey


an example: add a folder

✓ the tour is made by the steps:

• add_folder,

• fill_out_the_fields,

• publish_folder,

• all_done

✓ the “fill_out_the_fields” step has to:

• fill the “title” field with a value

• fill the “description” field with another value

• save it

✓ filling a field is entering a string inside a HTML field

✓ it’s about JS and HTML.


collective.amberjack.core - tour


collective.amberjack.core - tour

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,

)}


collective.amberjack.core - step


collective.amberjack.core - step

add_folder = {

'validators': (isManager, isNotFolderCreated,),

'url': u'/',

'xpath': u'',

'xcontent': u'',

'title': _(u"Create a new folder"),

'text': _(u"Folders are one..."),

'steps': ({...})


collective.amberjack.core - microsteps


collective.amberjack.core - microsteps

'steps': ( {'description':

_(u"In the [Title] field, type.."),

'idStep': u'form_title',

'selector': u'',

'text': u'MyFolder'},

{'description': _(u"In the [Description] field, type .."),

'idStep': u'form_description',

'selector': u'',

'text': _("This folder will be used...")},)}


collective.amberjack.core - ajStep


collective.amberjack.core - ajStep

ajStandardSteps = (

...

('form_title',

'#archetypes-fieldname-title input'),

('form_description',

'#archetypes-fieldname-description textarea'),

...

)


collective.amberjack.core - ZCML registration


collective.amberjack.core - ZCML registration

<collective.amberjack:tour

tourdescriptor=".tour1.ajTour"

/>

<collective.amberjack:ajstep

stepsdescriptor= ".ajStandardSteps.ajStandardSteps"

/>


http://www.flickr.com/photos/traveleden/3797157077

validators

✓ isAnonymous

✓ isAuthenticated

✓ isManager

✓ isReviewer

✓ isContributor

✓ isEditor

✓ isReader




collective.amberjack.plonetour

✓defines the 12 tours

✓provides tour specific validators

• isFolderCreated

• isNotFolderCreated

✓ZCML registration

✓translations

• english

• french

• italian

• spanish

• polish

• brasilian


collective.amberjack.portlet

✓provides a portlet thats draws a set of tours in a given order

✓you may choose:

• portlet’s title

• the list of tours from the available ones..

• ...and order them

• amberjack skin type

✓it enables/disables the tours in accordion to the validators

• e.g.: first create a folder then a page


http://www.flickr.com/photos/orphanjones/414401592

write your own tour as simple as you need




http://www.flickr.com/photos/domhuk/197875701

what you need to do

✓ create an empty package via paster

✓ write your tour in myTour.py

✓ add it to the available ones through ZCML

✓ translate it

✓ (opt. add custom ajSteps)




See in actionhttp://www.flickr.com/photos/vramak/3499502280


http://www.flickr.com/photos/vramak/3499502280

http://www.flickr.com/photos/vramak/3499502280

Create a folder and a page


http://www.flickr.com/photos/tranchis/3173646667

Coding events when the project improves




http://www.flickr.com/photos/johnthescone/2526186118

Sprints

✓ Bolzano Sprint ’08

✓ Sorrento Sprint ’09✓ a short summer sprint ’09

✓ Plone conference ’09

✓ Ferrara Sprint ’10

✓ Sorrento Sprint ’10




http://www.flickr.com/photos/uhuru1701/2247554605

I want you

we’ll sprint on Fri-Sun(yes, it’s tomorrow :)

http://www.coactivate.org/projects/sorrento-sprint-2010/project-home




http://www.flickr.com/photos/fabio48/317814195/

Stages - Thesis

smart students from the

University of Ferrara




http://www.flickr.com/photos/biscuitsmlp/2246503687

What’s new?

we have a teamwe have a plan




http://www.flickr.com/photos/anirudhkoul/3786725982

we have a team the team, actually now




http://www.flickr.com/photos/snapr/484776493/sizes/o/

the main contributors

✓ Federica D'Elia

✓ Mirco Angelini

✓ Luca Fabbri

✓ Andrew Mleczko

✓ Vincent Fretin

✓ Giacomo Spettoli

✓ Andrea Benetti

✓ Massimo Azzolini





and during the sprints

✓ Aaron VanDerlip

✓ Michael Davis

✓ Irene Capatti

✓ Giorgio Borelli

✓ Jacopo Deyla





translate ‘em all

✓ Leonardo J. Caballero (es)

✓ Vincent Fretin (fr)

✓ Stefano Marchetti (it)

✓ Andrew Mleczko (pl)

✓ Tamosauskas (pt-br)




RedTurtle will support the project

✓ stable team to enhance and mantain the tool

✓ 4 more people

✓ you’re welcome!

✓ amberjack company branded

✓ Activities won't be no more based on my spare time.

✓ They are going to be supported and scheduled in a more stable way.

✓ “10 percent manifesto”-ish


we have a plan and it’s public


next release 1.1

✓refactor the code

✓validations & preconditions

✓TTTW: discussion about poc/implementation

✓sandbox

✓1.0: implementation

✓2.0: brainstorm

✓Check if the user completes the step

✓I wanna write what I want!

✓manage prev/next buttons

✓amberjack’s template for sunburst

✓translations: choose the right approach

✓test coverage


next release 1.1




✓sandbox


✓2.0: brainstorm






✓test coverage



next release 1.1




✓sandbox


✓2.0: brainstorm






✓test coverage




✓sandbox


next release 1.1




✓sandbox


✓2.0: brainstorm






✓test coverage




✓sandbox


✓2.0: brainstorm


next release 1.1




✓sandbox


✓2.0: brainstorm






✓test coverage




✓sandbox


✓2.0: brainstorm






✓test coverage


TTTW - Tutorials Through The Web

editors want to use the browser to create their tours

what’s better than click and save?

we’re enhancing Windmill!!


Create a folder and a page - TTTW


further releases

✓TTTW

✓create a tutorial from plone

✓save it on a local or shared repository

✓export as a package

✓extend it

✓“import” a package

✓sandbox use cases

✓portal as a sandbox

✓personal folders as sandboxes

✓from sandbox to wizard

✓“save my data, I’ll be back soon”

✓...


References

✓Project management:

• https://launchpad.net/collective.amberjack

• https://blueprints.launchpad.net/collective.amberjack

• https://bugs.launchpad.net/collective.amberjack

✓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


Grazie. Thank you.


http://www.flickr.com/photos/seandreilinger/2326448445

Questions!?

Massimo [email protected]




collective amberjack - european plone symposium

Technology

core collective

amberjack tutorial

plone collective

plonetour collective

portlet collective

windmill collective

yourtour collective

goal use amberjack