Collective.amberjack ploneconf2010
-
Upload
massimo-azzolini -
Category
Technology
-
view
1.711 -
download
0
description
Transcript of Collective.amberjack ploneconf2010
![Page 1: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/1.jpg)
collective.amberjackchapter one: the interactive age.
Massimo Azzolini
RedTurtle
![Page 3: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/3.jpg)
link foto
the idea
✓ provide tours for plone’s newbies
✓ show portal’s features
✓ tutor your audience
![Page 4: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/4.jpg)
that’s not all folks!
✓ every product/add-on might have its amberjack tutorial
✓ just-hired people in companies needs tutorials
✓ wizards
![Page 5: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/5.jpg)
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
![Page 6: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/6.jpg)
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.
![Page 7: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/7.jpg)
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>
![Page 8: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/8.jpg)
http://www.flickr.com/photos/eklektikos/2541408630/sizes/l/
we want more:the blueprint
tours, steps, editors, users
![Page 9: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/9.jpg)
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
![Page 10: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/10.jpg)
Demo: collective.amberjack at a glance
![Page 11: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/11.jpg)
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.
![Page 12: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/12.jpg)
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
![Page 13: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/13.jpg)
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
![Page 14: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/14.jpg)
http://www.flickr.com/photos/dhowellphoto/3023319312
Do not touch Plone
✓ collective.amberjack does not change anything in Plone itself
✓ we used unobtrusive javascript code and tours described through HTML
![Page 15: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/15.jpg)
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
![Page 16: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/16.jpg)
The registration
✓ZCML registration
✓file upload
✓url reference
![Page 17: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/17.jpg)
preconditions:could I run this tutorial?
✓ isAnonymous
✓ isAuthenticated
✓ hasRole
✓ isCreated
✓ isNotCreated
✓ [add your precondition here]
![Page 18: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/18.jpg)
validations: did I finish?
✓ check the microstepcondition = checkstep
✓ custom conditioncondition = {
"selector":
{"description":"id"},
"operator":"co", "value":"Plone"
}
✓ can I go next?condition = doitmanually
![Page 19: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/19.jpg)
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
![Page 20: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/20.jpg)
The Tutorials: collective.amberjack.plonetour
• the python approach, not so good:
• too complicated for middle experienced user
• so custom
• not reusable
• extremely integrated with i18n
• the .cfg approach #success:
• easier to read
• easier to write
• easier to be generated
• easier to distribute
• problems with i18nI don’t wanna re-invent the wheel
![Page 21: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/21.jpg)
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,
)}
![Page 22: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/22.jpg)
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')
![Page 23: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/23.jpg)
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': ({...})
![Page 24: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/24.jpg)
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
![Page 25: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/25.jpg)
python - a microstep
'steps': ( {'description':
_(u"In the [Title] field, type.."),
'idStep': u'form_title',
'selector': u'',
'text': u'MyFolder'},
…
,)}
![Page 26: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/26.jpg)
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.
![Page 27: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/27.jpg)
python - ajStep (from aj-ids to html)
ajStandardSteps = (
...
('form_title',
'#archetypes-fieldname-title input'),
('form_description',
'#archetypes-fieldname-description textarea'),
...
)
![Page 28: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/28.jpg)
cfg - ajStep (no more needed)
ajStandardSteps = (
...
('form_title',
'#archetypes-fieldname-title input'),
('form_description',
'#archetypes-fieldname-description textarea'),
...
)
![Page 29: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/29.jpg)
python - ZCML registration
<collective.amberjack:tour
tourdescriptor=".tour1.ajTour"
/>
<collective.amberjack:ajstep
stepsdescriptor= ".ajStandardSteps.ajStandardSteps"
/>
![Page 30: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/30.jpg)
cfg - ZCML registration
<collective.amberjack:tour
tourlocation="tours.zip"
/>
<collective.amberjack:ajstep
stepsdescriptor= ".ajStandardSteps.ajStandardSteps"
/>
![Page 31: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/31.jpg)
http://www.flickr.com/photos/bhollar/425116404/
Sandbox
✓ portal as a sandbox✓ personal folders as
sandboxes✓ from sandbox to wizard✓ “save my data, I’ll be
back soon”✓ ...
![Page 32: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/32.jpg)
Sandbox: member folders. Step 1.
![Page 33: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/33.jpg)
ehm, I said “member folders”
![Page 34: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/34.jpg)
Sandbox: member folders. Step 2.
![Page 35: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/35.jpg)
Sandbox: member folders. Step 3.
![Page 36: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/36.jpg)
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
![Page 37: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/37.jpg)
Create a folder and a page - TTTW
![Page 38: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/38.jpg)
What’s windmill?
• “Windmill is a web testing tool designed to let you painlessly automate and debug your web application.”
![Page 39: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/39.jpg)
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
![Page 40: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/40.jpg)
TTTW: wishes and dreams
✓make it easier: if the html doesn’t speak enough it can be painful
✓create a tutorial directly from plonestart windmill from the plone site
✓save it on a local, but also on shared repositoryso that it can be easily shared with someone else
✓import/export as a package
![Page 41: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/41.jpg)
stop videos, start interactive tutorials
use collective.amberjack.windmillcreate a websitepublish your tutorials
http://www.flickr.com/photos/orphanjones/414401592
![Page 42: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/42.jpg)
playing with.. ploneformgen.demo.plone.org
![Page 43: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/43.jpg)
http://www.flickr.com/photos/anirudhkoul/3786725982
we have a team the team, now
![Page 44: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/44.jpg)
the contributors
• Mirco Angelini
• Andrea Benetti
• Federica D'Elia
• Luca Fabbri
• Andrew Mleczko
• Vincent Fretin
• Giacomo Spettoli
• Massimo Azzolini
• Aaron VanDerlip
• Michael Davis
• Irene Capatti
• Giorgio Borelli
• Jacopo Deyla
• Domen Kozar
• Leonardo J. Caballero (es)
• Vincent Fretin (fr)
• Stefano Marchetti (it)
• Andrew Mleczko (pl)
• Tamosauskas (pt-br)
![Page 45: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/45.jpg)
RedTurtle is supporting the project
✓ stable team to enhance and mantain the tool
✓ more people
✓ you’re still welcome!
✓ amberjack company branded
✓ Activities won't be based on my spare time anymore
✓ They are going to be supported and scheduled in a more stable way.
✓ “10 percent manifesto”-ish
![Page 46: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/46.jpg)
we have a plan and it’s public
![Page 47: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/47.jpg)
next release 1.1
✓refactor the code
✓validations & preconditions
✓TTTW: implementation
✓sandbox
✓1.0: implementation
✓2.0: brainstorm
✓Check if the user completes the step
✓manage prev/next buttons
✓amberjack’s template for sunburst
✓translations: choose the right approach
✓test coverage
![Page 48: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/48.jpg)
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/
![Page 49: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/49.jpg)
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
![Page 50: Collective.amberjack ploneconf2010](https://reader033.fdocuments.in/reader033/viewer/2022060115/557bee5bd8b42aac6b8b51c2/html5/thumbnails/50.jpg)
Grazie. Thank you.