Skip to content

Jazkarta cooks up a new Plone site for Oxfam America

June 26, 2009

May I borrow that ? Or building on the work of others to get the job done.

Open source software has often been compared to cooking. There are recipes and cookbooks (though reading one in public will raise some eyebrows), the ingredients are lines of code. I recently traveled to Portland Oregon to attend the Open Source Bridge Conference.  I visited a friend of mine who built a backyard bread oven. We decided to make pizza. Though we made the dough by hand, there were many things that were pre-assembled, prepared ahead of time or imported from somewhere else, like flour, cheese, olives. All we needed to bring was our dough making skills (which we used a recipe for), adding to it some pre-assembled, ready to go ingredients.

Building websites using open source tools like Plone reminds me of this process, some things we have to build, while other elements are ready to use, they just needed assembly towards an end goal.

We recently relaunched Oxfam America (www.oxfamamerica.org) on Plone 3.1.  I will share with you our recipe for bringing this site into being.  Along the way I will talk about the software ingredients that made this site possible.
Let’s start cooking!

Content Management

Plone

Plone provides the base for the entire project. Since the Plone UI uses familiar desktop editing metaphors, the out of the box usability is a big win for Oxfam America’s editorial staff. As their prior site was based on Plone 2.5,  so far the favorite enhancement provided by the upgrade has been the inline editing capability.

Searching for content

Plone add-on used: collective.formcriteria

This is an add-on that allows you to build search interfaces and search portlets based on the Collections interface. Using this saved us significant development time and reduced the amount of custom coding and templating needed. When Oxfam America adjusted their search requirements, is was simply a matter of adjusting the configuration of the Collection. While using collective.formcriteria, we were able to sponsor improvements that made their way back into the collective.

Human friendly links

Plone add-on used: collective.redirect

This a redirect product that allows the user to create short URLS that map to either longer paths within the site or to an external URL; the latter feature differentiates is from the existing redirection tools.  This allows Oxfam America to publicize a short URL that will redirect to an external fund raising or online advocacy site. This product was developed specifically for Oxfam America and released to the collective.

Slide shows

Plone add-on used: collective.slideshowfolder

This is an extension to SlideShow Folder that provides a series of useful extensions, including a portlet that can render the contents of a slideshow folder.

Multimedia

Plone add-on used: collective.flowplayer

All of Oxfam America’s video and audio content exists on outside servers either in the form of hosted files, or videos hosted on services such as YouTube.  Collective.flowplayer was extended to provide player support for Link objects to allow Oxfam America to meet their specific goals. These improvements were also released back to the community.

See the multimedia area on the Oxfam America website. There are also listings of all videos and all audio slideshows.

Mapping the content

Plone add-on used: Maps

Jarn’s Maps product is the cornerstone product that enables Oxfam America to associate their editorial content with a geographical location.  According to our developers, this product was well architected and a joy to extend. In the Oxfam America site, we used it to create individual Location objects that contain map coordinates. Any article or news story can be associated with a Location, which then drives the map widget contained in the template.

The Plone community often complains that there is no rating system for add-ons.  I am giving Jarn’s Maps product five stars in my own personal rating system – this project would have been difficult to achieve without this tool, it is well engineered and works beautifully.

Easy to create tabs

Plone add-on used: collective.kuputabs

This is a great product. It gives content editors the ability to create tabbed interfaces by marking up content using a combination of Kupu and CSS classes. The tabs are rendered on the public view using a jQuery transform.  We customized this product’s code to provide a tab solution for  Oxfam America’s home page. Anyone needing to provide editing facilities for dynamic page elements should take a look at this product.

Tag cloud

Plone add-on used: Vaporization

This is an older product that provides a configurable tag cloud as well as faceted search abilities.  There is an eggified version here: http://svn.plone.org/svn/collective/Vaporisation/tags/vaporisation-egg-2.0.1/

Engaging the media

Plone add-on used: Press Room

Press Room is a product that just fits the common use case for clients who need a press section.  With the exception of a few extensions to the Press Officer type it was a drop-in solution for Oxfam America.

Image editing and management

Plone add-on used: Image Editor

Oxfam America has thousands of visual assets.  We used the Image Editor product to provide image cropping and resizing functionality.  The default Image Editor aspect ratios were overridden, now editors can only choose from those ratios that fit within Oxfam America’s overall design standards. For example of this product in action, see the Oxfam America press room.

Interactive pages

On the UI layer we used a number of jQuery based tools to achieve the desired effects including:

jQuery UI Tabs and jQuery TOOLS Scrollable

Most of the tabs are driven either by a query on related items, or by Pages that are contained within a Folderish object.  The latter provides an easy editing story for content authors to create, edit and order the appearance of the individual tabs.

We just launched this site and are still kicking the tires and finding some clean-up tasks.  It was a long time in the making, and I would like to thank the highly capable web team of Oxfam America: Michael Borum, Kofi Bosque Hamilton, Robert Baker, and Jeff Deutsch. The web team was responsible for driving the overall visual and information design as well as implementing and troubleshooting the advanced CSS that made the site’s impressive overall look possible.


14 Comments leave one →
  1. June 26, 2009 1:13 pm

    Great post, Nate! Thanks for the acknowledgments. I should point out that the design by Jeff Deutsch was key, and should not go unheralded. We’re very proud of the site, too, and I personally feel we exceeded our own expectations. Sure, there are more enhancements and refinements we’ll want to make over the next several months, but we’re thrilled with the site, as are our colleagues here at Oxfam America.

    • aaron permalink
      June 26, 2009 1:20 pm

      Sorry I forgot to add Jeff, updated post has him in the credits.

  2. June 26, 2009 1:51 pm

    Beautiful Job, Nate and team! The site looks great and what a fantastic use of all the great third party products out there!

    I’ve just discovered slideshowfolder and I’m looking forward to implementing a lot more of the great products being developed.

    Congratulations!

  3. June 26, 2009 1:52 pm

    Nice writeup, dude!

  4. June 26, 2009 3:14 pm

    Beautiful work, fantastic writeup, Nate!

    Can we adapt it into a case study for plone.net?

    • aaron permalink
      June 26, 2009 3:23 pm

      Case study is coming soon……..

  5. Joel permalink
    June 26, 2009 8:51 pm

    What add-on did you use for the scattered portlet style layout?

    • aaron permalink
      June 30, 2009 9:58 am

      Most of the portlet like elements are part of an individual template, they do not use the portlet infrastructure.

  6. June 27, 2009 1:01 am

    Both plone & open source programmers rock!!!

  7. Kofi C permalink
    June 27, 2009 1:43 pm

    Awesome post Aaron,

    The website launch process was relatively seamless and the website rocks. Great job to you and your team.

    Kofi C

  8. June 28, 2009 6:20 am

    Excellent post. There is extraordinary value in sharing these kinds of success stories along with the products that make them possible.

    Even so, I’m reminded that sometimes people tell me, “Your camera takes terrific pictures.” Its not the camera that composes the photo; its the eye behind it. Of course, I’m always happy to recommend a camera that is particularly enabling.

    Similarly, its not the products that make the website, its the people behind it. Tip o’ the hat to Jazkarta and Oxfam America for making this happen. Of course, we’re always happy to recommend products that are particularly enabling.

    Great job!

  9. Bob permalink
    June 30, 2009 8:55 pm

    Site looks great and this is a useful write up for those who may face a similar set of requirements. Nice work!

  10. July 6, 2009 10:16 am

    Very helpful write-up, Aaron. It’s pointed me at tools that I hadn’t tried before, that look quite useful for folks. Thanks!

  11. Theo permalink
    October 4, 2009 6:33 am

    >All of Oxfam America’s video and audio content exists on outside servers either in the form of hosted files, or videos hosted on services such as YouTube. Collective.flowplayer was extended to provide player support for Link objects to allow Oxfam America to meet their specific goals. These improvements were also released back to the community.

    Could you describe how to use flowplayer with external video hostings, like YouTube? They didn’t get you direct link to videofile, so I have no idea how to connect flowplayer with their videofiles to play them on my site.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 306 other followers

%d bloggers like this: