Banjo – progress report

Eric Steele and I have been making steady progress towards a working web-based tool for making theming Plone sites with Deliverance easier. The tool is called Banjo and is designed for non-technical persons who want to take a pre-existing HTML/CSS website design and make it work with Plone without touching the code.

Here’s the latest screencast:

In the previous screencast, we showed how you can click on elements in the content and theme panes, and identify the CSS selector representing that element. After brainstorming on the UI for how to do the actually mapping, we came up with a simple solution for now.

Step 1: Choose the source element

1. Click on an element in the content pane – a dialog box appears
2. Select which action you want to perform on that element
3. Check off if you want to perform that action on the children of the element
4. Click confirm

Step 2: Choose the destination element

1. Click on an element in the theme pane – a dialog box appears
2. Confirm which element you want to map
3. Check off if you want to perform that action on the children of the element.

Future: Drag-n-drop UI

Eventually, we’d like to build a drag-n-drop interface so that you could just click and element in the content pane, hold the mouse down and drop it onto an element in the theme pane by releasing the mouse button. Then a dialog box like this would appear:

As always, feedback is very welcome. You can join the Banjo mailing list to join in on the conversation and download the buildout if you want to try it out.

By the way, in case you’re interested, these wireframes were created with OmniGraffle using the Yahoo! Design Stencil Kit, which I highly recommend. The SimpleWireFrame stencil is also really good.