Tag Archives: Plone

Theming Plone websites with Diazo (for non-developers)

Plone 4.2 has just been released. Congrats to Release Manager Eric Steele and all of the excellent folks who worked hard to make it happen!  For me, this is one of the most exciting Plone releases ever, because this is the first release of Plone that includes the amazing Diazo theming system as part of the Plone core.

Diazo completely revolutionizes the process of theming a Plone website, and it’s already making the lives of everyday Plone integrators better  What’s more, while Diazo is now part of Plone, via the plone.app.theming module, it’s also a standalone website theming system that can be used the theme pretty much any website.  So, not only is Diazo a revolution in Plone theming, I also think that it has the potential to revolutionize how any website is themed.  (Diazo-powered Drupal or WordPress anyone? ;-) )

What is Diazo?

Diazo is a simpler and smart approach to theming a website–without sacrificing creative control.  Here’s how it works: Your graphic designer, who doesn’t need to know anything about Plone, builds you a theme consisting of one or more HTML + CSS templates.  Plone emits its HTML pages, known as the “content.”  Diazo then lets you merge bits and pieces of Plone’s HTML content into your theme’s HTML and CSS template.  Diazo’s merging behavior is governed by a simple text-based rules file consisting of simple directives such as <append>, <replace> and <drop>.  It’s a drop-dead simple syntax that anyone can master, and it doesn’t require you to understand anything about how Plone works–basic HTML and CSS literacy is all you need.

I’m intrigued, tell me more.

Diazo does its magic by building on top of XSLT (eXtenstible Stylesheet Language Transformations), a standard originally developed in the late ’90s that defines a language for transforming XML documents into other XML documents.  (HTML pages are one kind of XML document.)  Raw XSLT is too generalized and too complex for everyday use as a everyday website theming technology, so Diazo provides a simple and user-friendly set of basic rules that get compiled into XSLT behind the scenes.  If you’re already an XSLT wizard, you can use the full power of XSLT expressions in your Diazo rules files, but most folks will never need or want to do this.

Plone 4.2 comes pre-configured for Diazo (via plone.app.theming), so if you’re using Plone, you don’t have to lift a finger.  If you are using Plone alongside other web applications, or not using Plone at all,  most modern webservers already have support for XSLT transformations, so deploying Diazo via WSGI, Ngnix, Varnish or Apache is simple and straightforward.

Diazo’s been around for a while, and it’s been battle tested in production as an add-on product for several years now.  It’s ready for prime-time.  There are already a couple dozen Diazo-powered Plone themes available for download, and I’m expecting to see lots more as Diazo becomes “mainstream best practice.”  It’s pretty easy to take any generic open-source HTML/CSS website theme and adapt it for Diazo.

Sounds great, what’s the catch?

There isn’t one.  That’s why Diazo is so exciting.  One thing to think about, though, is whether Diazo’s definition of “theming” matches yours.  Unfortunately, if you’ve been using certain other CMSes, you might have some odd ideas about what’s part of a “theme.”  (Hint: not an e-commerce system!)  With Diazo, theming is about HTML, CSS and Javascript–it’s not about adding new logical functionality to your website such as image sliders, calendars, shopping carts or content types.  Sure, these kinds of features can be an important part of a website’s “look and feel” but they’re not legitimately within the scope of a Diazo theme.

So, if you need to make a Plone website look beautiful, Diazo is all you need.  If you need to fundamentally change what content Plone is emitting in the first place, then you’ll need to dive into Plone customization.  Diazo doesn’t completely replace all of the customization that you might to do Plone, but it narrows the scope of what you need to do inside of Plone quite a bit.

The future is even brighter

If you’ve got a vivid imagination, you might already be thinking, “OK, simple text-based rules files are cool, but what about a graphical editor for building themes?”  Well, that’s in the pipeline.  Martin Aspeli is putting the finishing touches on a version of plone.app.theming that includes a graphical editor for Diazo rules files.  This is currently slated to ship with Plone 4.3, and will make it point-and-click easy to build or modify Diazo theme rules.

Final thoughts

I’m really excited about Diazo.  It’s the fulfillment of a vision for “rules-based theming” that’s been percolating in the Plone and Python communities for a number of years now, starting with Paul Everitt’s original implementation of Deliverance way back in 2008.  It was a radical idea then, and it’s still cutting-edge now.  Diazo brings rules based theming into the mainstream, both for Plone and for other web applications.  I think we’re going to look back a few years from now and wonder why we ever themed websites any other way.

Hidden gems of the Plone Collective

Periodically, I trawl through the Plone Collective repository (both via Github and via PyPi) to see what folks are building but not publicizing widely via Plone.org.  As usual, I found some hidden gems that I think deserve a bit wider attention.

Fair warning: I’ve tested each of these products in a Plone 4.1.5 development instance, but I’ve not deployed any in production or reviewed the code.  All are written by experienced Plone community members, though, so they should be at least reasonable sane.  I’d love to hear about your experiences with any of them.

collective.folderorder - Jens Klein and BlueDynamics Alliance

http://pypi.python.org/pypi/collective.folderorder/1.2

Plone’s default folder view shows items in the order they were added, and while you can manually rearrange items, there’s no way to automatically resort items in a folder view.  (Although you can add a collection as the default view of a folder, this is not always obvious to new users, and quite a few clicks.)  With collective.folderorder, you get a new “Order” option the Actions menu for a folder, and you can easily choose from several default folder ordering schemes, including: reverse order, unordered, and partial ordering. Even better, it provides an easy way for developers to add new ordering schemes.

I’d love to see this one PLIPed for future inclusion in Plone, possibly with a few more ordering options (e.g. last modified, creation date). It’s a small but welcome UI affordance.

collective.folderpositionLaurence Rowe

http://pypi.python.org/pypi/collective.folderposition/1.0

Another small but welcome improvement to folder ordering.  This one adds a nice little set of buttons below a folder listing that allows you to move items instantly to the top, the bottom or up/down a designated number of slots. Again, super convenient when you need to rearrange a lot of folder items.

collective.prettydate – Franco Pellegrini  & Héctor Velarde

http://plone.org/products/collective.prettydate

collective.prettydate reformats the display absolute dates/times (e.g. 3/1/2012) to relative date (e.g. one month ago, four days ago, etc.)  This is really nice for news sites or sites with upcoming events.

collective.embedly – Quintagroup

http://plone.org/products/collective.embedly

collective.embedly makes it stupidly simple to embed almost any externally hosted multimedia (YouTube, Vimeo, Slideshare.net, etc.) into Plone.  It uses the fantastic service “Embedly” which is itself built on the open “oembed” standard.    Developers who want a bit more power may also want to look at collective.oembed.

collective.routes – Nathan Van Gheem

http://plone.org/products/collective.routes

This one is a bit conceptual, but pretty awesome.  From the prolific and talented Nathan Van Gheem comes collective.routes, which makes it possible to build URLs in Plone that do catalog queries, e.g. http://mysite.com/blog/date/of/blog/post.  This isn’t really an end-user product, but it makes it easy for integrators to build really nice URLs for their custom Plone apps.

Game-changer for low-cost Plone hosting

Wow. Long-time Python community hosting favorites WebFaction just upped the memory on their low-end hosting plan to 256MB (not including OS memory) for $5.50/month.  You can bump it to 512MB for another $7/month.  That’s more than enough memory to comfortably run a modest Plone site, and when you combine it with WebFaction’s solid support reputation, suddenly you’ve got a fantastic low-end Plone hosting option.  Nice.

Chameleon page templates make Plone 4 another 20% faster

Plone 4 out of the box is already one of the fastest content management systems around.  And it’s still getting faster.  Malthe Borch has cut a major new release of Chameleon that gives Plone another big speed bump with almost zero effort.

Chameleon is a lightning fast drop-in replacement for the Zope Page Template system that Plone (and other Python applications) use.  By simply adding Chameleon to your Plone 4 buildout, you can immediately speed up your site by 20% or more, with zero code changes.

The homepage of a stock Plone 4.1rc3 instance yields 13.23 pages/sec on my laptop test environment[1].  With Chameleon added to the buildout, it jumps to 15.94 pages/sec.  That’s a 15% increase.  Not too shabby!  In the real world, where your page templates are doing considerably more work, you should see an even bigger boost.

Malthe’s been brewing this up for a while now, and it’s great to see it cross over into “ready for everyday production use.”  Give it a try!  Malthe’s taking bug reports if you run into any hiccups.

[1] 2GHz MacBook, 2GB RAM, Plone 4.1rc3 via svn, no proxy caching.  ab -n 20 -c 3, average of 10 runs

Check out Cook Inletkeeper’s awesome new “Weather & Tides” feature

At the end of last week, we pulled the trigger on the new inletkeeper.org for our friends at Cook Inletkeeper in Homer, Alaska.   It’s almost certainly the last major website I’ll launch as a staffer at Groundwire, and while it’s definitely a little bittersweet, I couldn’t be more proud of the results here.  In many ways, it’s a pretty typical “state of the art” website for a small conservation organization.  Plone makes that pretty easy these days.  But the trick I’m most proud of, both strategically and technically, is the “Weather & Tides” feature.

The staff at Cook Inkeeper dreamed up this “engagement superpower” in the course of living and working in, on and around the waters of Cook Inlet.  In Alaska, the weather is big, just like everything else.  And so are the tides.  And while there’s a ton of information about the weather and tides available online, it’s pretty scattered across different sites, and there’s no “single source” that pulls together all of the “must have” information for Cook Inlet residents.  That’s where we came in.

Inletkeeper staffer Michael Sharp, himself an avid sailor and surfer (when he’s not rocking campaign & communications strategy), identified the various sources for terrestrial and marine weather forecasts and current conditions data, and showed us a really cool iPhone app for generating tide predictions.   We took a look at the data sources–yep, all easy-to-parse RSS and XML.  And even better, it turned out that the tide prediction software underneath the iPhone app was open-source!

A few hours of development time later, my colleagues Matt Yoder and Ryan Foster had a slick, open-source and open-data powered “Weather and Tides” page for the new inletkeeper.org.  Then Cook Inletkeeper asked “Hey, can you make it work great on the iPhone, too?”  Matt got his mobile-fu on, and managed to “mobilize” the page with a few clever bits of CSS and Javascript.  No custom app required, this is all straight-up HTML.  I particularly like the way you can “swipe” to move between panels.  It’s hard to tell this isn’t a native iPhone app.

A few other nice details we managed to work in:

  • The tide graph also includes a perpetual tide table, formatted to look just like Cook Inletkeeeper’s popular print tide tables booklet.
  • Cook Inletkeeper staff can point-and-click to edit the list of weather and tide stations shown.
  • The page uses cookies to automatically remember your customized settings.
  • Cook Inletkeeper staff can automatically “hot-link” to custom settings, great for customized email marketing outreach.
  • “Recommend on Facebook” button

One of the things I will miss most about Groundwire is the thrill of being able to help conceive and create fun, effective tools like that help environmental groups engage their audiences.

Live “Google Docs”-like editing in Plone (and real-time chatting too!)

Yiorgis Gozadinos from Jarn recently released some amazing new work last week, a suite of packages called jarn.xmpp.* that enable powerful real-time interactivity in Plone, including:

  • Real-time simultaneous document editing (that’s right, just like Google Docs!)
  • Instant messaging/status updates between Plone users (think Twitter or Yammer)

Yiorgis has a great little video that shows this in action. Pretty magical.

collective.contentstats: nice!

Long-time Plone community member Raphael Ritz just released collective.contentstats, a new little add-on for Plone that generates a simple grid view that counts up each of your Plone content objects by content type and by workflow state.

In addition to the obvious function of providing a quick and easy way to track how many pieces of content you’ve got in your site, being able to quickly click through any number to get a list of the matching content objects is a tremendous simple way for site managers to zero in on draft content that might have gotten abandoned before being published, or old, retracted content that is ripe for deletion.

We’re already using it on Groundwire.org, and I’m looking forward to rolling it out to Groundwire clients.  Thanks, Raphael!