SlideShare a Scribd company logo
1 of 51
Download to read offline
collective.amberjack
chapter one: the interactive age.
Massimo Azzolini
RedTurtle
who am I?
Massimo Azzolini
RedTurtle’s co-founder and project manager
massimo@redturtle.net
link foto
the idea
✓ provide 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
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
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.
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:
the blueprint
tours, steps, editors, users
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
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
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,
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 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"
/>
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”
✓ ...
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
• 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)
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
we have a plan and it’s public
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
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.
http://www.flickr.com/photos/seandreilinger/2326448445
Questions!?
Massimo Azzolini
massimo@redturtle.net

More Related Content

What's hot

Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaPuppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaÖnder Ceylan
 
WebGL For Game Development Spring 2013
WebGL For Game Development Spring 2013WebGL For Game Development Spring 2013
WebGL For Game Development Spring 2013Tony Parisi
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloRobert Nyman
 
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, CroatiaLeave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, CroatiaRobert Nyman
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for MobileRemy Sharp
 
Puppeteer can automate that! - AmsterdamJS
Puppeteer can automate that! - AmsterdamJSPuppeteer can automate that! - AmsterdamJS
Puppeteer can automate that! - AmsterdamJSÖnder Ceylan
 
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]Dirk Ginader
 
Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!Dirk Ginader
 
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFMWordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFMWalter Ebert
 
Puppeteer can automate that! - HolyJS Piter 2020
Puppeteer can automate that! - HolyJS Piter 2020Puppeteer can automate that! - HolyJS Piter 2020
Puppeteer can automate that! - HolyJS Piter 2020Önder Ceylan
 
jQuery Super Basic
jQuery Super BasicjQuery Super Basic
jQuery Super BasicDavid Nguyen
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery PluginsMarc Grabanski
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010Nicholas Zakas
 
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsCool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsRyan Weaver
 
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...Patrick Lauke
 
MozTW Jetpack Workshop: Taipei
MozTW Jetpack Workshop: TaipeiMozTW Jetpack Workshop: Taipei
MozTW Jetpack Workshop: Taipeilittlebtc
 
HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015dmethvin
 

What's hot (20)

Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaPuppeteer can automate that! - Frontmania
Puppeteer can automate that! - Frontmania
 
WebGL For Game Development Spring 2013
WebGL For Game Development Spring 2013WebGL For Game Development Spring 2013
WebGL For Game Development Spring 2013
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
 
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, CroatiaLeave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for Mobile
 
Puppeteer can automate that! - AmsterdamJS
Puppeteer can automate that! - AmsterdamJSPuppeteer can automate that! - AmsterdamJS
Puppeteer can automate that! - AmsterdamJS
 
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
 
Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!
 
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFMWordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
 
Puppeteer can automate that! - HolyJS Piter 2020
Puppeteer can automate that! - HolyJS Piter 2020Puppeteer can automate that! - HolyJS Piter 2020
Puppeteer can automate that! - HolyJS Piter 2020
 
jQuery Super Basic
jQuery Super BasicjQuery Super Basic
jQuery Super Basic
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
 
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsCool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
 
Mastering Grunt
Mastering GruntMastering Grunt
Mastering Grunt
 
SocketStream
SocketStreamSocketStream
SocketStream
 
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
 
MozTW Jetpack Workshop: Taipei
MozTW Jetpack Workshop: TaipeiMozTW Jetpack Workshop: Taipei
MozTW Jetpack Workshop: Taipei
 
HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015
 

Viewers also liked

Resoconto dalla Plone Conference 2010
Resoconto dalla Plone Conference 2010Resoconto dalla Plone Conference 2010
Resoconto dalla Plone Conference 2010Stefano Marchetti
 
Bringing "real life" relations to Plone
Bringing "real life" relations to PloneBringing "real life" relations to Plone
Bringing "real life" relations to PloneMassimo Azzolini
 
Plone TuneUp challenges
Plone TuneUp challengesPlone TuneUp challenges
Plone TuneUp challengesAndrew Mleczko
 
Ferrara Eventi - la nostra applicazione iPhone per vivere al meglio Ferrara
Ferrara Eventi - la nostra applicazione iPhone per vivere al meglio FerraraFerrara Eventi - la nostra applicazione iPhone per vivere al meglio Ferrara
Ferrara Eventi - la nostra applicazione iPhone per vivere al meglio FerraraRedTurtle S.r.l.
 
Project management software of your dreams
Project management software of your dreamsProject management software of your dreams
Project management software of your dreamsAndrew Mleczko
 
Needle in an enterprise haystack
Needle in an enterprise haystackNeedle in an enterprise haystack
Needle in an enterprise haystackAndrew Mleczko
 
ItalianSkin: an improvement in the accessibility of the Plone interface in or...
ItalianSkin: an improvement in the accessibility of the Plone interface in or...ItalianSkin: an improvement in the accessibility of the Plone interface in or...
ItalianSkin: an improvement in the accessibility of the Plone interface in or...Vincenzo Barone
 
Fast content import in Plone
Fast content import in PloneFast content import in Plone
Fast content import in PloneAndrew Mleczko
 
Strategie e comunicazione per il turismo sul web
Strategie e comunicazione per il turismo sul webStrategie e comunicazione per il turismo sul web
Strategie e comunicazione per il turismo sul webMassimo Azzolini
 
Breve resoconto dalla World Plone Conference 2009 26 Ottobre - 1 Novembre
Breve resoconto dalla World Plone Conference 2009 26 Ottobre - 1 NovembreBreve resoconto dalla World Plone Conference 2009 26 Ottobre - 1 Novembre
Breve resoconto dalla World Plone Conference 2009 26 Ottobre - 1 NovembreStefano Marchetti
 
3M per Plone Mockup, Mediacore, Mailchimp
3M per Plone Mockup, Mediacore, Mailchimp3M per Plone Mockup, Mediacore, Mailchimp
3M per Plone Mockup, Mediacore, MailchimpStefano Marchetti
 
Future is bright, future is Plone
Future is bright, future is PloneFuture is bright, future is Plone
Future is bright, future is PloneAndrew Mleczko
 

Viewers also liked (19)

BibliotecaAccessibile
BibliotecaAccessibileBibliotecaAccessibile
BibliotecaAccessibile
 
Resoconto dalla Plone Conference 2010
Resoconto dalla Plone Conference 2010Resoconto dalla Plone Conference 2010
Resoconto dalla Plone Conference 2010
 
Il futuro di Plone
Il futuro di PloneIl futuro di Plone
Il futuro di Plone
 
Bringing "real life" relations to Plone
Bringing "real life" relations to PloneBringing "real life" relations to Plone
Bringing "real life" relations to Plone
 
Plone TuneUp challenges
Plone TuneUp challengesPlone TuneUp challenges
Plone TuneUp challenges
 
Ferrara Eventi - la nostra applicazione iPhone per vivere al meglio Ferrara
Ferrara Eventi - la nostra applicazione iPhone per vivere al meglio FerraraFerrara Eventi - la nostra applicazione iPhone per vivere al meglio Ferrara
Ferrara Eventi - la nostra applicazione iPhone per vivere al meglio Ferrara
 
Migrazione Plone4
Migrazione Plone4Migrazione Plone4
Migrazione Plone4
 
Project management software of your dreams
Project management software of your dreamsProject management software of your dreams
Project management software of your dreams
 
Plone per tutte le stagioni
Plone per tutte le stagioniPlone per tutte le stagioni
Plone per tutte le stagioni
 
Plone Konferenz 2012
Plone Konferenz 2012Plone Konferenz 2012
Plone Konferenz 2012
 
Needle in an enterprise haystack
Needle in an enterprise haystackNeedle in an enterprise haystack
Needle in an enterprise haystack
 
Plone e Web 2.0
Plone e Web 2.0Plone e Web 2.0
Plone e Web 2.0
 
ItalianSkin: an improvement in the accessibility of the Plone interface in or...
ItalianSkin: an improvement in the accessibility of the Plone interface in or...ItalianSkin: an improvement in the accessibility of the Plone interface in or...
ItalianSkin: an improvement in the accessibility of the Plone interface in or...
 
Fast content import in Plone
Fast content import in PloneFast content import in Plone
Fast content import in Plone
 
Strategie e comunicazione per il turismo sul web
Strategie e comunicazione per il turismo sul webStrategie e comunicazione per il turismo sul web
Strategie e comunicazione per il turismo sul web
 
Breve resoconto dalla World Plone Conference 2009 26 Ottobre - 1 Novembre
Breve resoconto dalla World Plone Conference 2009 26 Ottobre - 1 NovembreBreve resoconto dalla World Plone Conference 2009 26 Ottobre - 1 Novembre
Breve resoconto dalla World Plone Conference 2009 26 Ottobre - 1 Novembre
 
3M per Plone Mockup, Mediacore, Mailchimp
3M per Plone Mockup, Mediacore, Mailchimp3M per Plone Mockup, Mediacore, Mailchimp
3M per Plone Mockup, Mediacore, Mailchimp
 
Social intranet
Social intranetSocial intranet
Social intranet
 
Future is bright, future is Plone
Future is bright, future is PloneFuture is bright, future is Plone
Future is bright, future is Plone
 

Similar to Collective.amberjack ploneconf2010

Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MITjeresig
 
Pde build
Pde buildPde build
Pde buildOwen Ou
 
Release management with NuGet/Chocolatey/JIRA
Release management with NuGet/Chocolatey/JIRARelease management with NuGet/Chocolatey/JIRA
Release management with NuGet/Chocolatey/JIRAYaroslav Serhieiev
 
Setting up Notifications, Alerts & Webhooks with Flux v2 by Alison Dowdney
Setting up Notifications, Alerts & Webhooks with Flux v2 by Alison DowdneySetting up Notifications, Alerts & Webhooks with Flux v2 by Alison Dowdney
Setting up Notifications, Alerts & Webhooks with Flux v2 by Alison DowdneyWeaveworks
 
Amberjack Lightning Talk
Amberjack Lightning TalkAmberjack Lightning Talk
Amberjack Lightning TalkJazkarta, Inc.
 
20130528 solution linux_frousseau_nopain_webdev
20130528 solution linux_frousseau_nopain_webdev20130528 solution linux_frousseau_nopain_webdev
20130528 solution linux_frousseau_nopain_webdevFrank Rousseau
 
jQuery 1.3 and jQuery UI
jQuery 1.3 and jQuery UIjQuery 1.3 and jQuery UI
jQuery 1.3 and jQuery UIjeresig
 
Operating Docker
Operating DockerOperating Docker
Operating DockerJen Andre
 
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletonGeorge Nguyen
 
Dexterity in 15 minutes or less
Dexterity in 15 minutes or lessDexterity in 15 minutes or less
Dexterity in 15 minutes or lessrijk.stofberg
 
There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010Emma Jane Hogbin Westby
 
WordPress Plugin Development 201
WordPress Plugin Development 201WordPress Plugin Development 201
WordPress Plugin Development 201ylefebvre
 
Azure Web SItes - Things they don't teach kids in school - Multi-Mania
Azure Web SItes - Things they don't teach kids in school - Multi-ManiaAzure Web SItes - Things they don't teach kids in school - Multi-Mania
Azure Web SItes - Things they don't teach kids in school - Multi-ManiaMaarten Balliauw
 
gDayX - Advanced angularjs
gDayX - Advanced angularjsgDayX - Advanced angularjs
gDayX - Advanced angularjsgdgvietnam
 
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...Sencha
 
Drupal 8, Where Did the Code Go? From Info Hook to Plugin
Drupal 8, Where Did the Code Go? From Info Hook to PluginDrupal 8, Where Did the Code Go? From Info Hook to Plugin
Drupal 8, Where Did the Code Go? From Info Hook to PluginAcquia
 

Similar to Collective.amberjack ploneconf2010 (20)

Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MIT
 
Pde build
Pde buildPde build
Pde build
 
Django Girls Tutorial
Django Girls TutorialDjango Girls Tutorial
Django Girls Tutorial
 
WebGL Awesomeness
WebGL AwesomenessWebGL Awesomeness
WebGL Awesomeness
 
End-to-end testing with geb
End-to-end testing with gebEnd-to-end testing with geb
End-to-end testing with geb
 
Release management with NuGet/Chocolatey/JIRA
Release management with NuGet/Chocolatey/JIRARelease management with NuGet/Chocolatey/JIRA
Release management with NuGet/Chocolatey/JIRA
 
Setting up Notifications, Alerts & Webhooks with Flux v2 by Alison Dowdney
Setting up Notifications, Alerts & Webhooks with Flux v2 by Alison DowdneySetting up Notifications, Alerts & Webhooks with Flux v2 by Alison Dowdney
Setting up Notifications, Alerts & Webhooks with Flux v2 by Alison Dowdney
 
Docker, c'est bonheur !
Docker, c'est bonheur !Docker, c'est bonheur !
Docker, c'est bonheur !
 
Amberjack Lightning Talk
Amberjack Lightning TalkAmberjack Lightning Talk
Amberjack Lightning Talk
 
20130528 solution linux_frousseau_nopain_webdev
20130528 solution linux_frousseau_nopain_webdev20130528 solution linux_frousseau_nopain_webdev
20130528 solution linux_frousseau_nopain_webdev
 
jQuery 1.3 and jQuery UI
jQuery 1.3 and jQuery UIjQuery 1.3 and jQuery UI
jQuery 1.3 and jQuery UI
 
Operating Docker
Operating DockerOperating Docker
Operating Docker
 
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
 
Dexterity in 15 minutes or less
Dexterity in 15 minutes or lessDexterity in 15 minutes or less
Dexterity in 15 minutes or less
 
There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010
 
WordPress Plugin Development 201
WordPress Plugin Development 201WordPress Plugin Development 201
WordPress Plugin Development 201
 
Azure Web SItes - Things they don't teach kids in school - Multi-Mania
Azure Web SItes - Things they don't teach kids in school - Multi-ManiaAzure Web SItes - Things they don't teach kids in school - Multi-Mania
Azure Web SItes - Things they don't teach kids in school - Multi-Mania
 
gDayX - Advanced angularjs
gDayX - Advanced angularjsgDayX - Advanced angularjs
gDayX - Advanced angularjs
 
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
 
Drupal 8, Where Did the Code Go? From Info Hook to Plugin
Drupal 8, Where Did the Code Go? From Info Hook to PluginDrupal 8, Where Did the Code Go? From Info Hook to Plugin
Drupal 8, Where Did the Code Go? From Info Hook to Plugin
 

More from Massimo Azzolini

Value design + Experience design = Business design
Value design + Experience design = Business designValue design + Experience design = Business design
Value design + Experience design = Business designMassimo Azzolini
 
Design thinking e strategia di marketing, il percorso, il metodo e il gioco d...
Design thinking e strategia di marketing, il percorso, il metodo e il gioco d...Design thinking e strategia di marketing, il percorso, il metodo e il gioco d...
Design thinking e strategia di marketing, il percorso, il metodo e il gioco d...Massimo Azzolini
 
Personas + Business Model Canvas: Il redesign del sito a 4 mani con il cliente
Personas + Business Model Canvas: Il redesign del sito a 4 mani con il clientePersonas + Business Model Canvas: Il redesign del sito a 4 mani con il cliente
Personas + Business Model Canvas: Il redesign del sito a 4 mani con il clienteMassimo Azzolini
 
Il Web design nella Pubblica Amministrazione in 10 passi
Il Web design nella Pubblica Amministrazione in 10 passiIl Web design nella Pubblica Amministrazione in 10 passi
Il Web design nella Pubblica Amministrazione in 10 passiMassimo Azzolini
 
Plone intranet - World Plone Day 2015 Bologna
Plone intranet - World Plone Day 2015 BolognaPlone intranet - World Plone Day 2015 Bologna
Plone intranet - World Plone Day 2015 BolognaMassimo Azzolini
 
Be agile: take back control over your work
Be agile: take back control over your workBe agile: take back control over your work
Be agile: take back control over your workMassimo Azzolini
 
Agile values, methods and software
Agile values, methods and softwareAgile values, methods and software
Agile values, methods and softwareMassimo Azzolini
 
Corsi 3.0 - il sito e il social
Corsi 3.0 - il sito e il socialCorsi 3.0 - il sito e il social
Corsi 3.0 - il sito e il socialMassimo Azzolini
 
Stop that earthquake - Plone and Pyramid to the rescue - PloneConf 2012
Stop that earthquake - Plone and Pyramid to the rescue - PloneConf 2012Stop that earthquake - Plone and Pyramid to the rescue - PloneConf 2012
Stop that earthquake - Plone and Pyramid to the rescue - PloneConf 2012Massimo Azzolini
 
Penelope - oltre il classico project management
Penelope - oltre il classico project managementPenelope - oltre il classico project management
Penelope - oltre il classico project managementMassimo Azzolini
 
Provincia Di Ferrara's Plone case study
Provincia Di Ferrara's Plone case studyProvincia Di Ferrara's Plone case study
Provincia Di Ferrara's Plone case studyMassimo Azzolini
 

More from Massimo Azzolini (12)

Value design + Experience design = Business design
Value design + Experience design = Business designValue design + Experience design = Business design
Value design + Experience design = Business design
 
Design thinking e strategia di marketing, il percorso, il metodo e il gioco d...
Design thinking e strategia di marketing, il percorso, il metodo e il gioco d...Design thinking e strategia di marketing, il percorso, il metodo e il gioco d...
Design thinking e strategia di marketing, il percorso, il metodo e il gioco d...
 
Personas + Business Model Canvas: Il redesign del sito a 4 mani con il cliente
Personas + Business Model Canvas: Il redesign del sito a 4 mani con il clientePersonas + Business Model Canvas: Il redesign del sito a 4 mani con il cliente
Personas + Business Model Canvas: Il redesign del sito a 4 mani con il cliente
 
Il Web design nella Pubblica Amministrazione in 10 passi
Il Web design nella Pubblica Amministrazione in 10 passiIl Web design nella Pubblica Amministrazione in 10 passi
Il Web design nella Pubblica Amministrazione in 10 passi
 
Plone intranet - World Plone Day 2015 Bologna
Plone intranet - World Plone Day 2015 BolognaPlone intranet - World Plone Day 2015 Bologna
Plone intranet - World Plone Day 2015 Bologna
 
Be agile: take back control over your work
Be agile: take back control over your workBe agile: take back control over your work
Be agile: take back control over your work
 
Agile values, methods and software
Agile values, methods and softwareAgile values, methods and software
Agile values, methods and software
 
Corsi 3.0 - il sito e il social
Corsi 3.0 - il sito e il socialCorsi 3.0 - il sito e il social
Corsi 3.0 - il sito e il social
 
Stop that earthquake - Plone and Pyramid to the rescue - PloneConf 2012
Stop that earthquake - Plone and Pyramid to the rescue - PloneConf 2012Stop that earthquake - Plone and Pyramid to the rescue - PloneConf 2012
Stop that earthquake - Plone and Pyramid to the rescue - PloneConf 2012
 
Penelope - oltre il classico project management
Penelope - oltre il classico project managementPenelope - oltre il classico project management
Penelope - oltre il classico project management
 
Provincia Di Ferrara's Plone case study
Provincia Di Ferrara's Plone case studyProvincia Di Ferrara's Plone case study
Provincia Di Ferrara's Plone case study
 
GoogleDocs on Plone
GoogleDocs on PloneGoogleDocs on Plone
GoogleDocs on Plone
 

Recently uploaded

GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
ServiceNow Integration with MuleSoft.pptx
ServiceNow Integration with MuleSoft.pptxServiceNow Integration with MuleSoft.pptx
ServiceNow Integration with MuleSoft.pptxshyamraj55
 
IEEE Computer Society 2024 Technology Predictions Update
IEEE Computer Society 2024 Technology Predictions UpdateIEEE Computer Society 2024 Technology Predictions Update
IEEE Computer Society 2024 Technology Predictions UpdateHironori Washizaki
 
Leveraging Mainframe Data in Near Real Time to Unleash Innovation With Cloud:...
Leveraging Mainframe Data in Near Real Time to Unleash Innovation With Cloud:...Leveraging Mainframe Data in Near Real Time to Unleash Innovation With Cloud:...
Leveraging Mainframe Data in Near Real Time to Unleash Innovation With Cloud:...Precisely
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Dragino Technology LoRaWANデバイス、ゲートウェイ ユースケース
Dragino Technology   LoRaWANデバイス、ゲートウェイ ユースケースDragino Technology   LoRaWANデバイス、ゲートウェイ ユースケース
Dragino Technology LoRaWANデバイス、ゲートウェイ ユースケースCRI Japan, Inc.
 
CHIPS Alliance_Object Automation Inc_workshop
CHIPS Alliance_Object Automation Inc_workshopCHIPS Alliance_Object Automation Inc_workshop
CHIPS Alliance_Object Automation Inc_workshopObject Automation
 
Reference Domain Ontologies and Large Medical Language Models.pptx
Reference Domain Ontologies and Large Medical Language Models.pptxReference Domain Ontologies and Large Medical Language Models.pptx
Reference Domain Ontologies and Large Medical Language Models.pptxChimezie Ogbuji
 
COMPUTER_GROUP 7_10 ST. JOHN VIANNEY.pptx
COMPUTER_GROUP 7_10 ST. JOHN VIANNEY.pptxCOMPUTER_GROUP 7_10 ST. JOHN VIANNEY.pptx
COMPUTER_GROUP 7_10 ST. JOHN VIANNEY.pptxabalosyvonne42
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
High-Level Synthesis for the Design of AI Chips
High-Level Synthesis for the Design of AI ChipsHigh-Level Synthesis for the Design of AI Chips
High-Level Synthesis for the Design of AI ChipsObject Automation
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Does AI(Artificial intelligence) need a Working Memory??
Does AI(Artificial intelligence) need a Working Memory??Does AI(Artificial intelligence) need a Working Memory??
Does AI(Artificial intelligence) need a Working Memory??N.K KooZN
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceOpsTree solutions
 
GDG Cloud Southlake 31: Santosh Chennuri and Festus Yeboah: Empowering Develo...
GDG Cloud Southlake 31: Santosh Chennuri and Festus Yeboah: Empowering Develo...GDG Cloud Southlake 31: Santosh Chennuri and Festus Yeboah: Empowering Develo...
GDG Cloud Southlake 31: Santosh Chennuri and Festus Yeboah: Empowering Develo...James Anderson
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
LLM Threats: Prompt Injections and Jailbreak Attacks
LLM Threats: Prompt Injections and Jailbreak AttacksLLM Threats: Prompt Injections and Jailbreak Attacks
LLM Threats: Prompt Injections and Jailbreak AttacksThien Q. Tran
 

Recently uploaded (20)

GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
ServiceNow Integration with MuleSoft.pptx
ServiceNow Integration with MuleSoft.pptxServiceNow Integration with MuleSoft.pptx
ServiceNow Integration with MuleSoft.pptx
 
IEEE Computer Society 2024 Technology Predictions Update
IEEE Computer Society 2024 Technology Predictions UpdateIEEE Computer Society 2024 Technology Predictions Update
IEEE Computer Society 2024 Technology Predictions Update
 
Leveraging Mainframe Data in Near Real Time to Unleash Innovation With Cloud:...
Leveraging Mainframe Data in Near Real Time to Unleash Innovation With Cloud:...Leveraging Mainframe Data in Near Real Time to Unleash Innovation With Cloud:...
Leveraging Mainframe Data in Near Real Time to Unleash Innovation With Cloud:...
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Dragino Technology LoRaWANデバイス、ゲートウェイ ユースケース
Dragino Technology   LoRaWANデバイス、ゲートウェイ ユースケースDragino Technology   LoRaWANデバイス、ゲートウェイ ユースケース
Dragino Technology LoRaWANデバイス、ゲートウェイ ユースケース
 
CHIPS Alliance_Object Automation Inc_workshop
CHIPS Alliance_Object Automation Inc_workshopCHIPS Alliance_Object Automation Inc_workshop
CHIPS Alliance_Object Automation Inc_workshop
 
Reference Domain Ontologies and Large Medical Language Models.pptx
Reference Domain Ontologies and Large Medical Language Models.pptxReference Domain Ontologies and Large Medical Language Models.pptx
Reference Domain Ontologies and Large Medical Language Models.pptx
 
COMPUTER_GROUP 7_10 ST. JOHN VIANNEY.pptx
COMPUTER_GROUP 7_10 ST. JOHN VIANNEY.pptxCOMPUTER_GROUP 7_10 ST. JOHN VIANNEY.pptx
COMPUTER_GROUP 7_10 ST. JOHN VIANNEY.pptx
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
High-Level Synthesis for the Design of AI Chips
High-Level Synthesis for the Design of AI ChipsHigh-Level Synthesis for the Design of AI Chips
High-Level Synthesis for the Design of AI Chips
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Does AI(Artificial intelligence) need a Working Memory??
Does AI(Artificial intelligence) need a Working Memory??Does AI(Artificial intelligence) need a Working Memory??
Does AI(Artificial intelligence) need a Working Memory??
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer Experience
 
GDG Cloud Southlake 31: Santosh Chennuri and Festus Yeboah: Empowering Develo...
GDG Cloud Southlake 31: Santosh Chennuri and Festus Yeboah: Empowering Develo...GDG Cloud Southlake 31: Santosh Chennuri and Festus Yeboah: Empowering Develo...
GDG Cloud Southlake 31: Santosh Chennuri and Festus Yeboah: Empowering Develo...
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
LLM Threats: Prompt Injections and Jailbreak Attacks
LLM Threats: Prompt Injections and Jailbreak AttacksLLM Threats: Prompt Injections and Jailbreak Attacks
LLM Threats: Prompt Injections and Jailbreak Attacks
 

Collective.amberjack ploneconf2010

  • 1. collective.amberjack chapter one: the interactive age. Massimo Azzolini RedTurtle
  • 2. who am I? Massimo Azzolini RedTurtle’s co-founder and project manager massimo@redturtle.net
  • 3. link foto the idea ✓ provide tours for plone’s newbies ✓ show portal’s features ✓ tutor your audience
  • 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. 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.
  • 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>
  • 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
  • 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. 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
  • 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
  • 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, 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 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. 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” ✓ ...
  • 33. ehm, I said “member folders”
  • 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
  • 44. 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)
  • 45. 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
  • 46. we have a plan and it’s public
  • 47. 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
  • 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