Diazo for web grafting

Posted by fulvio at Aug 01, 2012 09:10 AM |
Filed under:

Diazo-for-web-grafting.png

I recently completed an interesting little project, which provides me with the opportunity to showcase a very useful technology - Diazo.  To start, take a look at the following two websites:

At first glance, these two sites seem to have nothing in common, except for the general topic they seem to present:  They come from different organizations, they look very different, and judging by the respective main navigation menus, the rest of the site has very different content.  However, if you look just a little more closely you will notice that apart from the header and footer of the two sites, the main page body is actually the same.  It works the same in both sites, too:  you can click on checkboxes, expand the various filters in the middle column such as the "Counties served", and the results in the right column are dynamically updated accordingly.  All the filters and search results are the same, too.  (This is an example of a "faceted navigation", which is some interesting functionality in its own right.)

I'll let you in on the secret now:  they are actually the same site.

A bit of history:  Over a year ago I participated in creating the 501 Commons site, with its faceted navigation directory, by customizing the Plone add-on product eea.facetednavigation, where all the filters and search results are dynamically loaded from SalesForce.  Earlier this year, Washington Nonprofits kicked off a project to redesign their old website.  As part of this re-vamping, they negotiated with 501 Commons to have the same resource directory embedded within their new site.  The redesign of the new Washington Nonprofits site was commissioned to a separate company, but I was pulled in to solve this particular embedding problem.  The requirement was that the new washingtonnonprofits.org site would launch with the 501Commons resource directory seamlessly embedded into one of their pages, while leaving all control over the directory itself in the hands of 501 Commons.

Diazo - plastic surgery without the scalpels

With Diazo, all that was needed for this to happen was the HTML and CSS of the new Washington Nonprofits site design, which was available through the browser at a temporary URL (the new site had not launched yet).  I never needed access to the source code or any implementation detail of the new Washington Nonprofits site, and it never had to be modified or altered.  A subdomain (directory.washingtonnonprofits.org) merely had to be set up and pointed to the server hosting 501commons.org.

Even more remarkably, the implementation on the 501 Commons site did not need to be altered for this to happen, either.  Consider that the two sites are built on completely different platforms, hosted in different environments, and managed by independent organizations.  501 Commons is a Plone site with a SalesForce integration, hosted on Soliton Consulting's servers [now moved to a different hosting provider], while Washington Nonprofits is definitely not Plone, and could literally run on any other platform.

Applying a custom graphics design to a website is a process known in the industry as "skinning", or "theming".  That is, designers produce the desired look and feel of a site, usually manifested in the form of Photoshop composite files.  Then, that design is converted into HTML and CSS code.  The resulting code is then usually applied to the underlying website platform code.  In most Content Management Systems, this requires writing code that is tailored to the very specific implementations of the various functionalities of the site, e.g. menus, search, sidebars, etc.

Diazo makes it possible to "skin" a site without modifying any of the underlying code.  The magic happens in a so-called "rules" file, which is an XML file containing a set of transformation rules.  These rules are then translated into XSLT transforms, which are applied on the fly to the HTML dynamically generated by the server.  The rules act as go-betweens to modify a static HTML theme file, and place the dynamic content into the theme skeleton.  For example, rules can say "drop this element of the theme", or "replace that block of theme with this piece of content", or "insert this piece of content before this block of the theme".  XPath or CSS3 selectors are used in the rules to identify elements in the theme or the content.  The theme skeleton can thus be completely rearranged by the rules.  Of course, the theme refers to the CSS styles, which is where the graphic design takes shape.  Please refer to the last section below for some example rules.

Diazo also includes the ability to selectively apply a theme, depending on the URL used in the request to the server.  And so it is that the same server, indeed the same Plone site, can serve up two apparently completely different sites.  One site is the "original" 501commons.org/directory, which is left untouched by Diazo, and the other has the Diazo skin for directory.washingtonnonprofits.org.  (Of course, the former has a skin of its own, but that is a "traditional" skin, deeply ingrained in the code that generates all the site components.)

The reason why I called Diazo a new "technology" at the top of this article, is that it is completely independent of any web framework.  It works on any platform, regardless of whether you use Plone, Drupal, Wordpress, Django, Pyramid, Ruby on Rails, or what have you.  Of course, it is now part of the Plone core, so Plone makes it particularly easy to adopt, but that does not make it specific to Plone.

New prosthetics with Diazo

Medical science has opened up many new possibilities with artificial limbs, organs, skin transplants, etc.  Diazo allows similar advances in web development.  No longer do we have to put all our eggs in one monolithic technology basket.  It is now very easy to just take one site's skin, and graft it onto a different site.  The end result is that the two sites appear to be one and the same, with the capabilities of both.  And why limit ourselves to two?

Every web platform has distinct strengths and weaknesses.  Blogs, shopping carts, custom data-driven web applications, wikis, issue trackers, forums, ... many platforms have tried to incorporate as many different applications into their core or their set of add-on plugins as possible, often with less than stellar results.  It is now easier than ever before to use different solutions and integrate them into one seamless site.

  • Use a WordPress blog inside your Plone site
  • Integrate a Trac issue tracker within a Drupal site
  • Merge a Plone site with a Django application and a separate shopping cart framework

 

If you have any specific ideas for how Diazo might apply to your situation, please let me know in the comments below!

A few sample rules

The following rule takes the <title> element from the content, and replaces the last 11 characters, i.e. it substitutes "501 Commons" with "Washington Nonprofits" in the title:

<replace content="/html/head/title">
<xsl:variable name="valueLength" select="string-length(//html/head/title/text())-11" />
<title>
<xsl:value-of select="substring(//html/head/title/text(),1,$valueLength)"/> Washington Nonprofits
</title>
</replace>

The next example shows how I made links open a new browser tab or window:

<xsl:template match="//a[contains(@class,'internal')]/@class">
        <xsl:attribute name="class">external</xsl:attribute>
        <xsl:attribute name="target">_blank</xsl:attribute>
</xsl:template>

 

Find out more

Filed under: