Drupal 7.11 and 6.23, maintenance releases which fix security vulnerabilities are now available for download.

Drupal 7.12 and 6.24 also fix other issues reported through the bug tracking system.

Upgrading your existing Drupal 7 and 6 sites is strongly recommended. There are no new features in these releases. For more information about the Drupal 7.x release series, consult the Drupal 7.0 release announcement, more information on the 6.x releases can be found in the Drupal 6.0 release announcement. Drupal 5 is no longer maintained, upgrading to Drupal 6 is recommended.

Changelog

Drupal 7.11 only includes fixes for security issues. Drupal 7.12 also includes bugfixes. The full list of changes between the 7.10 and 7.12 releases can be found by reading the 7.12 release notes. A complete list of all bug fixes in the stable 7.x branch can be found in the git commit log.

Drupal 6.23 only includes fixes for security issues. Drupal 6.24 also includes bugfixes. The full list of changes between the 6.22 and 6.24 releases can be found by reading the 6.24 release notes. A complete list of all bug fixes in the stable 6.x branch can be found at git commit log.

Security vulnerabilities

Drupal 7.11 and 6.23 were released in response to the discovery of security vulnerabilities. Details can be found in the official security advisory:

• SA-CORE-2012-001

To fix the security problem, please upgrade Drupal.

What is included with each release?

We made two versions of both Drupal 7 and 6 available, so you can choose to only include security fixes (Drupal 7.11 and 6.23 respectively) or security fixes and bugfixes (Drupal 7.12 and 6.24). You can choose your preferred version. We are trying to make it easier and quicker to roll out security updates by making security-only releases available as well as ones with bugfixes included. We hope this helps you roll out the fixes as soon as possible. Read more details in the handbook.

Update notes

The default.settings.php file was changed in Drupal 7.12, to add documentation about PDO attribute override capabilities that were added as a result of #1309278: Make PDO connection options configurable.

The robots.txt file was changed in Drupal 6.24 to block filter tips from search engines. The .htaccess and (default.)settings.php files were not changed in Drupal 6. Additionally, indexes were added to the node_comment_statistics and comment tables, for performance.

Known issues #

Drupal 7

Bug fixes in 7.12 release cause problems with the Internationalization (i18n) module. Users of these modules are encouraged to update to 7.11 to get the security fixes, and hold off on the 7.12 upgrade until the 7.x-1.4 release.

Drupal 7.12 is also only compatible with Menu Block 7.x-2.3 and higher.

Drupal 6

In Drupal 6.24, if you have the contributed user_delete module enabled on your site, the update will fail with a Cannot redeclare user_delete_access() error. An update of user_delete module is being worked on.

In Drupal 6.24 if you had locale module enabled earlier, but it is not currently turned on, the update will fail with Call to undefined function locale_inc_callback(). A fix is being worked on for Drupal core.

In Drupal 6.24 if you run your updates with Drush, you might experience duplicate entry errors in your system table. See the ongoing discussion at http://drupal.org/node/1425868

Drupal 7.1 and 6.21, maintenance releases which fix security vulnerabilities are now available for download.

Drupal 7.2 and 6.22 also fix other issues reported through the bug tracking system.

Upgrading your existing Drupal 7 and 6 sites is strongly recommended. There are no new features in these releases. For more information about the Drupal 7.x release series, consult the Drupal 7.0 release announcement, more information on the 6.x releases can be found in the Drupal 6.0 release announcement. Drupal 5 is no longer maintained, upgrading to Drupal 6 is recommended.

Changelog

Drupal 7.1 only includes fixes for security issues. Drupal 7.2 also includes bugfixes. The full list of changes between the 7.0 and 7.2 releases can be found by reading the 7.2 release notes. A complete list of all bug fixes in the stable 7.x branch can be found in the git commit log.

Drupal 6.21 only includes fixes for security issues. Drupal 6.22 also includes bugfixes. The full list of changes between the 6.20 and 6.22 releases can be found by reading the 6.22 release notes. A complete list of all bug fixes in the stable 6.x branch can be found at git commit log.

Security vulnerabilities

Drupal 7.1 and 6.21 were released in response to the discovery of security vulnerabilities. Details can be found in the official security advisory:

• SA-CORE-2011-001

To fix the security problem, please upgrade Drupal.

What is included with each release?

We made two versions of both Drupal 7 and 6 available, so you can choose to only include security fixes (Drupal 7.1 and 6.21 respectively) or security fixes and bugfixes (Drupal 7.2 and 6.22). You can choose your preferred version. We are trying to make it easier and quicker to roll out security updates by making security-only releases available as well as ones with bugfixes included. We hope this helps you roll out the fixes as soon as possible. Read more details in the handbook.

Update notes

The .htaccess file was changed in Drupal 7.2 to allow for simpler server configuration, while the (default.)settings.php just got a minor documentation fix that should not affect any copies. The robots.txt file did not change in Drupal 7.

The robots.txt file was changed in Drupal 6.22 to allow crawlers to index the contact page. The .htaccess and (default.)settings.php files were not changed in Drupal 6.

Known issues

When updating to Drupal 6.22, you might loose some of your block configuration. Follow #1173012: Blocks lose settings during update.php and cache clears for more information. If you need to update to Drupal 6.22 and experience this issue in testing, you can roll back the patch from #235673: Changes to block caching mode not caught.

SHRM Chapter Websites: Worldwide Membership, Powered by Drupal

The Society for Human Resource Management (SHRM) is the world’s largest association serving the needs of the HR industry. With more than 240 chapters in over 140 countries worldwide, SHRM represents a total membership that exceeds 250,000 human resource professionals.
Each SHRM chapter oversees its own site which acts as a local hub of SHRM activity, providing news, industry updates, and event and conference announcements, as well as a complete member directory. Site updates are deployed by SHRM headquarters, while administration is handled by local chapter directors, who may or may not have any experience with website management. Here is an example of the new chapter site capabilities: Cumberland Valley SHRM.

Pitfalls of a Proprietary System

The original SHRM chapter site network was run on a proprietary CMS created with IIS and ASP under Windows. Expensive, clunky and difficult for newly-minted SHRM chapter webmasters to use, only a select few were able to successfully navigate the system well enough to add or modify content on their local chapter site. Seeing the need for a unified, accessible, and easily extensible solution, SHRM approached Saforian to revamp the chapter site network.

The Open Source Approach

Our challenge was twofold: not only did each SHRM chapter need a well-architected, branded site that less web-savvy administrators could comfortably maintain, they also needed a way to migrate old data stored in the existing MSSQL database to the new set-up.

We knew out of the gate that new websites would need to be rapidly configured and deployed as new chapters were founded, and we also knew that the chosen CMS would need to dextrously accommodate a significant amount of custom code.

Drupal’s extensible multi-site functionality, ease of customization, open-source ethos and massive module base fit the bill as an ideal platform replacement for the existing system.

Keeping Updates Manageable

It was clear that without a networked approach, performing maintenance and updates on 240 websites would quickly become a logistical nightmare. Leveraging Drupal’s multi-site capabilities, we crafted a site configuration to keep maintenance as undemanding as possible.

Each chapter site uses a single code base, but separate databases and files directories, meaning that while module and Drupal core updates need only be deployed once, each site has the flexibility to manage divergent content, users and settings.

Command-line Fu

The Drupal shell utility Drush was instrumental in keeping maintenance and deployment times down, giving us the power to automate updates or install modules to all sites with a single command. Coupled with the Permissions_API, Drush let us batch set module permissions via the command line.

Merging Old and New

Data migration was at once the most challenging and interesting aspect of this project. The old chapter sites ran on IIS/ASP/MSSQL, and each site was associated with anywhere from dozens to hundreds of members, files and disparate content types. After a several-weeks-long investigation into the best transfer process, a series of tools and procedures were developed to carefully relocate and reorganize the data.

Working with batches of five chapter websites at a time, we first ran custom scripts to move production data and files into a Drupal 6/MySQL system hosted on a migration server. Once any migration errors were fixed, code was placed in open source version control system Subversion, and the chapter site was transferred from a migration server to a staging system. The new site was cleaned up using Drupal, and finally transferred to its home on the production system, where site data underwent a thorough review from front-end and back-end users.

MSSQL and MS Access data was scrubbed and inserted into MySQL using a custom-built Drupal module, which could be run via the Drupal admin panel or the command line. The module imported HTML pages from the previous system and jettisoned superfluous tags, maintained the integrity of user profile data during transfer, and slotted survey results from the old system into a Drupal Webform-readable format.

Snazzy Features

After all was said and done, the completed SHRM chapter sites were intuitive, flexible and packed with useful tools.

SHRM Administration Panel

Drupal made it easy to create a tailor-made administration panel that helps administrators jump straight to the most important tasks while keeping the techie stuff safely out of the way. Through the panel, administrators can add and edit content, activate or disable memberships, tweak the registration process, assign roles and permissions, manage comments, and edit navigation menus.

Easy Site Configuration Panel

Using this fire-and-forget site setup interface, administrators can choose from five different template color schemes, upload logos, set the site title and contact information, set home page block configuration options, and integrate their site with Facebook, Twitter and Linkedin.

Searchable member directory

Provides member search by name and keyword, or by alphabetical browsing. Administrators can also use the directory as a filtering tool to send out mass emails to their member base, or only to certain member categories.

Customizable Member Profiles

While SHRM global requires that certain profile data be gathered on each member, local branches wanted the ability to add their own fields to member profiles. The Drupal Profile module was adapted to give administrators the power to define customized profile fields for their members, while allowing members to choose whether fields are private or publicly viewable in the member directory.

Paypal Integration

Chapter administrators are able to seamlessly accept donations and event registration payments via Paypal.

Meetings & Events Management

Admins were given an easy way to keep their members abreast of SHRM’s busy conference schedule with custom event content types automatically hooked in to collapsible home page blocks.

Forms & Surveys

The forms and surveys feature lets administrators gather, store, sort and download data from members and non-members.

Training Center

A detailed, all-encompassing built-in training center was created and included on each chapter site, with dozens of video tutorials and articles to help new administrators perform common tasks.

Notable Contributed Modules

Backup and Migrate – Simplified the process of migrating databases from development, staging and production environments, particularly useful in that it fully supports Drush integration.
Calendar – This module came in handy in the creation of a custom events calendar for SHRM conferences and chapter meetings.
CKeditor and CKfinder – A powerful WYSIWYG library and interface.
Private – Node access control for members-only content.
Scheduler – Future-dating content publishing and unpublishing.

Infrastructure

Four total servers were used, here are the configurations:

2 Load Balanced Web Servers

• Processors: Two (2) Intel Xeon Quad Core E5410 2.33 GHz w/ 1333 FSB
• Memory: 8 GB DDR2 PC2-5300
• Hard Drives: 2 x 146GB SAS 15K RPM Mirrored in Raid 1 (for redundancy)
• OS: CentOS 5.5 64bit (Redhat Enterprise)
• PHP: 5.2.10

MySQL server (with a second identical one for failover)

• MySQL server (with a second identical one for failover)
• Processors: Two (2) Intel Xeon Quad Core E5410 2.33 GHz w/ 1333 FSB
• Memory: 8 GB DDR2 PC2-5300
• Hard Drives: 2 x 146GB SAS 15K RPM Mirrored in Raid 1 (for OS) Hard Drives: 2 x 146GB SAS 15K RPM
• Mirrored in Raid 1 (for MySQL)
• OS: CentOS 5.5 64bit (Redhat Enterprise)
• MySQL: 5.1.34

Accomplishing the Work

At Saforian we believe in open source software and have promoted it since our inception. Drupal has played a significant role in allowing us to continue to create flexible, web-based user experiences that foster great visual design and efficient, easy-to-use functionality. It has become our go-to CMS system.

This particular project utilized a team of five individuals with the majority of the development effort being handled by a single, senior-level developer. We had several work streams running simultaneously to ensure an on-time release. Strategy and back-end architecture work started the project, with design and production work following and then full development and migration to finalize.

Our information architect and designers worked initially to define the structure, content hierarchies and overall design styling. An interactive prototype was created to support testing and to serve as a vehicle for gathering feedback from stakeholders and chapter members. Once the design was approved, we quickly moved into our development efforts, which included front-end HTML template production work; Drupal theme integration; module development and configuration; and complete migration exercises.

Pagebuild allows non technical users to build websites very quickly and easily. It was built on top of Drupal, with the idea behind it being to provide an editing interface that is so simple, even an adult could use it. This is a explanation of what we did and how we went about doing it (and why).

Motivation

Spoon Media has been building Drupal sites for the last 6 years. We generally do mid to large size projects and pretty quickly we noticed how often we were turning away business from companies with modest budgets. That wasn’t great for them, because most low budget web solutions are pretty ordinary and it also meant we were sending small jobs elsewhere. This was the main motivation for building Pagebuild – we wanted to let small business get a great website at a inexpensive price but still retain a high standard of product.

High Level Architecture

Pagebuild as a product consists of two main systems which we’ve dubbed front-end and back-end.

The front-end is the software that allows customers to edit their Pagebuild site. This consists of a series of custom Drupal modules and a whole lot of JavaScript that provides the easy to use WYSIWYG experience.

The back-end is the software that allows customers to signup, create and manage their websites. Aegir is used to provision and manage sites and custom Drupal modules provide a simple customer interface to the site provisioning and management process, as well as the standard account and billing settings.

Both the front-end and back-end are powered by their own Aegir platforms.

Of course we use a bunch of great Drupal community modules across both systems. More on that follows.

Front-end

In order to provide an incredibly simple site editing interface it was clear from the beginning that the bulk of the work on the front-end would involve using JavaScript to implement the desired UX.

jQuery, jQuery UI and a series of jQuery plugins are used extensively.

I’ll explain the motivations and provide some light implementation details for selected features.

Editing

It was very important for us that the editor was truly WYSIWYG. It wasn’t enough that a heading was a heading and bolded text was bold. We needed headings to be styled exactly the same whether the user is editing a content area or viewing it. As a result we threw out the idea of using IFrame based WYSIWYG editors such as CKEditor or TinyMCE.

Another requirement was that users should be able to freely drag and drop images from our Media Manager into the content area. Doing this with an IFrame based editor was not possible.

After much back and forth we settled on Twoism’s reviser as the base for the WYSIWYG editor. I say base, as significant Pagebuild specific changes were made in order to get it work just so.

The result is that we are able to provide a true WYSIWYG editing experience that is completely tailored to the Pagebuild Way.

One of coolest features of Pagebuild’s editing would have to be the ability to drag images from the Media Manager toolbar and drop them into the content area at a position that makes sense visually. Unlike other drag and drop solutions in web WYSIWYGs, Pagebuild won’t allow you drop an image in the middle of a sentence. With jQuery UI’s sortable plugin we are able to force the image to be moved around the content area and dropped in sensible drop zones.

Blocks and regions

Of course it’s not enough for users to be able to edit the main content area. In order to allow the user to create unique and flexible page layouts we leverage Drupal’s regions and blocks to make this happen.

When editing a page regions can be shown or hidden, and blocks can be added to regions. This all happens via AJAX, and creating/editing/deleting blocks happens on the page itself to prevent interrupting the editing experience. As an added bonus existing blocks can be dragged from one region to another.

Themes

We provide a number of free themes for customers to choose from. All Pagebuild themes are Zen subthemes. On top of being a great base for our themes it was required in order for our JavaScript to work, as we need all DOM classes and IDs to be consistent across themes.

When a user selects a theme from the Switch theme toolbar we simply set that theme to be the default for all users, and make sure the block visibility remains the same.

I’ll talk more about how themes are put together a below.

Back-end

Where the front-end development was largely JavaScript backed up by Drupal modules to make the magic happen, the back-end is true to its name in being largely the work of Aegir and custom Drupal modules.

Provisioning

From a customer’s perspective the Pagebuild adventure begins with sign-up. Here we capture the customer’s details, process the payment and provision the site.

We use Aegir to provision new sites automagically when the customer has finished signing up. Aegir, being as wonderful as it is, makes this incredibly simple. All you need to do is create a node of type site, and it will be added to Aegir’s task queue.

After sign-up the customer is automatically logged in and presented with the Pagebuild Dashboard. Once the site has been provisioned (which usually happens inside of 60 seconds) they can login to it and start editing right away.

In order to implement a Single Sign On the back-end acts as an OpenID provider. Our custom Drupal install profile adds an entry into the authmap table allowing them to login to their site without having to re-enter their login details.

The custom Drupal install profile on the front-end communicates with the back-end database to setup themes, roles, filters, pathauto and imagecache settings, amongst other things.

Once a customer has signed up they can add new sites to their subscription with a simple single page form.

Domain settings

When a customer first signs up they are asked to enter a subdomain for their website. Initially the site is provisioned as example.pagebuild.net.

Once the site is provisioned though, the customer has the option to use any domain of their choosing for their site.

Again Aegir makes this very simple. When the customer submits the form we check that the domain they have specified points to our IP address. This prevents the site from being unreachable if the A record doesn’t match. Once we’ve checked the A record points to the correct IP address we create a migrate task in Aegir, which goes off and renames the site.

Thanks Aegir!

Theme editor

Customers are able to choose from a set of free themes or they can make their own theme.

Using one of our themes as a starting point, the user can alter every aspect of the design from their browser. They can then save their theme with a new name, effectively forking it from the pre built theme we provided. This concept is used in both Drupal Gardens and in the Sweaver module, however both of those implementations allow so much freedom as to be confusing to a non technical user. We have taken the concept and made it harder to do silly things to your theme by restricting what HTML elements you can actually modify. Whilst this limits the power of the theme editor, on the whole it results in a better theme when used by a novice.

Custom themes

While we provide free themes for customers to use on their site, we also provide them with a service whereby they can purchase a customised design. This is not automated and involves the customer talking with a designer to get a result.

In order to greatly simplify the process of creating themes for Pagebuild we implemented a simple templating language that allows designers to write minimal HTML and as much CSS as they require to get the look right. Each theme only requires a single theme template. This is about all it needs to be:

Using the token module we replace the Pagebuild theme tags with the Zen markup required to make sure the theme works with the Pagebuild editor.

Designers upload the template file, a CSS file and whatever images are required and a complete Zen subtheme is automatically generated and copied into sites/all/themes ready for use.

The permissions on individual theme nodes ensures the theme is available only to the customer who purchased it.

Custom themes are currently only available to designers we have an existing relationship with. In the future we plan to open this feature up to more designers. Further down the track we will open the feature to customers themselves.

Subscriptions

Initially we tried using Ubercart, uc_recurring and various payment modules for the checkout and subscription payments. It turned out this added an unnecessary layer of complexity to the system. The Ubercart product wasn’t meshing well with the existing Aegir and Pagebuild CCK types. Eventually we replaced the whole thing with a simpler custom built payment and subscription module.

The uc_hosting module to integrate Aegir and Ubercart looks promising, but we needed to move quickly, and rolling our own system allowed us to do that. Another benefit is that the payment system is tightly integrated with the rest of the Pagebuild system. This allowed us to do exactly what we need to do without working around the assumptions inherent in Ubercart, uc_recurring and the payment modules.

Main challenges

Internet Explorer

The the first half of development we aimed to support IE7+ for page editing. After considerable effort we decided to ditch native IE support, and instead create a simple UX for the customer to install Google Chrome Frame.

We are really pushing the limit of WebKit and Gecko browsers when it comes to building WYSIWYGs, and we decided that a superior experience was preferable to a lowest-common-denominator one.

The UX we provide for customers to install GCF is as simple as possible, and we doubt it will deter customers.

Of course, GCF is only required for customers when editing their site. We support IE6+ as well as the proper browsers when viewing Pagebuild sites.

Content editable

Instead of using an IFrame based WYSIWYG editor we decided to use a feature of some browsers called content editable.

While we believe this provides a superior editing experience, the cost is in the fact that it is not uniformly supported across all browsers. Worse, some implementations are particularly bad. Anecdote alert: In order to fix a bug caused by Firefox’s implementation of document.execCommand we were forced to build a debug binary of Firefox and step through the rendering code in gdb.

Despite the additional effort required in rolling our own WYSIWYG editor, we are very happy with the experience we’ve managed to produce.

Outro

So that is about it. If you want to see it in action you can sign up for a free trial at https://my.pagebuild.net/signup/demo or take a look at some of the live sites built with Pagebuild:

• Intrinsic Interiors
• Learn Microsoft Excel
• Barbara Mordini

We are really interested to hear what people think about it so please leave us a comment and we will reply. We are constantly developing the product (we roll a new release weekly) and so genuine feedback is really helpful and may even end up becoming part of the product.

We’re delighted to announce the array of courses available for DrupalCon London, which will be held August 22-26, 2011. View the course listing at http://london2011.drupal.org/conference/training

With the Drupal community growing so quickly, building your skills is more important than ever. We want these courses to help the community provide a broader range of services, employ the most innovative and efficient practices, and allow Drupal (and the Drupalists!) to excel. Whether you’re new or experienced with Drupal you can always gain from some hands-on training. We have instructors coming from Canada, U.S. and all over Europe to share their expertise.

Prices range from £150 – £325. These courses are an affordable way to round out your DrupalCon experience. Keep in mind, the early bird registration deadline is the 31st of May!

We hope you’ll find something for everyone on your team, and that you take this unique opportunity for intensive professional development. We’ll be posting further details in the coming week! We’ll have more information about the training providers and the learning objectives for each course.

Meanwhile, check out these brief descriptions here:

If you’re new to Drupal…

Absolute Beginner’s Guide to Drupal   –   £150! (+VAT) Sign up today!

Learn the fundamentals of working with Drupal.

Making the Switch to Drupal: The developer’s view   –   £250! (+VAT) Sign up today!

Learn how to read the blueprint before using your saw.

OpenPublic, build websites for government  -   £325! (+VAT) Sign up today!

Want to Build Sites for Government? Learn to Build Better and Faster with OpenPublic.

Theming for Non-Themers   –   £250! (+VAT) Sign up today!

Learn how to create amazing looking sites in Drupal with no code.

If you’re experienced with Drupal and want to develop new skills…

Advanced Configuration with Views, Page Manager, Flag and Rules   –   £325! (+VAT) Sign up today!

Learn how Drupal works, how to implement hooks, and working with databases and Form API to extend Drupal.

Building Modules for Drupal 7   –   £325! (+VAT) Sign up today!

Learn how Drupal works, how to implement hooks, and working with databases and Form API to extend Drupal.

Drupal 7 SEO   –   £325! (+VAT) Sign up today!

Learn on-page optimization to get the best search engine placement for your site.

Drupal Performance and Scalability   –   £325! (+VAT) Sign up today!

Learn the best practices for tuning and scaling Drupal sites.

If you’re experienced with Drupal and want a deep dive into speciality topics…

Aegir Hosting System: Deep Dive   –   £325! (+VAT) Sign up today!

Learn a scalable solution for deploying and managing Drupal sites.

Creating Awesome UX Deliverables   –   £325! (+VAT) Sign up today!

Learn to develop and communicate a UX Vision, employing best practices and patterns.

Drupal Powered E-commerce   –   £325! (+VAT) Sign up today!

Learn to build e-commerce functionality in Drupal.

jQuery for Drupal   –   £325! (+VAT) Sign up today!

Rich and interactive user interfaces. Learn to build them with this Drupal-jQuery course.

Stay up-to-date with the latest information about DrupalCon London by going to http://london2011.drupal.org/ or following us on Twitter @drupalcon.

Brands are increasingly turning to brand ambassadors to market their products. Ambassadors are individuals with credibility in a given area who are hired by a brand to introduce consumers to a given product and educate them about its advantages.

Liquor companies, for example, often hire bartenders as brand ambassadors. The bartenders / brand ambassadors then tell their customers about the company’s brand of gin, and train other bartenders in making signature cocktails with that gin.

Brand ambassadors provide companies and products with valuable credibility. Wouldn’t you trust a liquor recommendation that came from a bartender over one that came from a salesperson?

The downside is logistics. Creating a regional or national team of brand ambassadors requires big investments in recruitment, training and management.

With Drupal however, you can create an online system that helps recruit, manage and monitor brand ambassadors with much less investment.

This project was another collaboration between design and development shop ISL Consulting in San Francisco, and ClearMetrics digital agency in New York.

The Problem

The client, Twinlab, is a major manufacturer of sports nutrition supplements. They wanted to set up a brand ambassador program from scratch, and they had two overriding goals:

1.) Excellent Applicant Screening: The sale and marketing of sports nutrition supplements is extensively regulated at federal and state levels. As a result, Twinlab couldn’t hire just any personal trainer or gym employee to be a brand ambassador. They needed to find and screen candidates with extensive knowledge of supplements and supplement regulations.

2.) Incentives: Twinlab wanted its brand ambassadors to steer people to its online store, Twinlab.com, to buy product. To do that effectively, Twinlab needed to reward the ambassadors each time a consumer they referred to the site made a purchase. In essence, they need to set up an offline affiliate program.

3.) Flexible Support: The brand ambassadors were to be contractors, working independently in their local markets to raise awareness of Twinlab. They wouldn’t have constant, face-to-face contact with Twinlab marketing staff. As a result, the company needed a way to get the ambassadors new product information and sales collateral (like brochures, posters, signage, etc.) quickly.

Costs had to be kept at a minimum in achieving all these goals. Twinlab couldn’t hire a full-time staff to hire and manage its brand ambassadors. All these tasks would have to be centralized and simplified by an online system.

Drupal was chosen because the client was already running Ubercart with the coupon module very successfully. This site was added to a multi-domain installation so that products could be shared from other sites with this site.

The Star Player of the System: Ubercart Discount Coupons Module

The primary task of this online system was to identify brand ambassadors and customers who had been referred to Twinlab.com by brand ambassadors. The simplest way to identify or “tag” an ambassador or customer was to provide them with specific codes that they could enter into the system during key transactions.

The processes behind the codes used in this program are complicated, but they are largely handled by the Ubercart Discount Coupons (UC Coupon) Module. This module provides the ability to input or generate codes that create various types of discounts in purchasing goods. These codes have some powerful options. They can be set to become active and inactive at certain times, and they can be configured to specify who can redeem them, product requirements, and how many times they can be redeemed. Furthermore, the module provides the administrative interface for managing the coupons and providing reports on their usage.

Custom Module
There was a fair amount of custom code needed to accomplish the unique requirements of the Brand Ambassador system. However, Drupal’s architecture and the features provided by existing contributed modules allowed us to create a custom module that allowed us to use existing, tested code from the Community as our foundation, and add “glue” and customization where needed.

Much of the custom module had to do with modifying the functionality of the Ubercart Discount Coupons Module. A coupon, as set up and controlled by this module, was the basis for the Ambassador’s Code. Our custom module contained the code that worked along with, and modified behavior of Ubercart Discount Coupons Module, for example to add the means to link the codes between Ambassadors and their Customers.

We also had to create quite a few custom pages, a significant one being a “dashboard” page for the Brand Ambassador to view current status of orders and commissions relevant to their membership.

Brand Ambassador Recruitment

ClearMetrics developed an offline-online system that would allow Twinlab to recruit and screen candidates without hiring or contracting recruitment positions.

Twinlab already had a large outside sales staff selling sports supplements to stores and sports organizations around the country. When salespeople came across individuals who would make good ambassadors, they told them about the program, and generated a personalized code that allowed the candidates to log-in to a special section of Twinlab.com to undergo an automated screening process.

Screening Tool

This process began on the front page of the site, where a simple custom form collected the special brand ambassador registration coupon code, validated it against the UC Coupon system, and allowed users to register to apply to become brand ambassadors.

This initial form is a case of using Drupal’s excellent Form API to create some unusual functionality. The form’s button is tied to a client-side jquery script that is able to call a server-side function to evaluate the coupon code value entered into the field, and give meaningful feedback to the user into a div defined as an item of the form, before the form executes its action. The form executes dupal_add_js to add the jquery in the right contexts. This was necessary in order to provide direct feedback on the code via an overlay, without moving the user from the page.

As part of the applications, candidates had to pass an online quiz that tested their knowledge of supplement safety and regulations. The Webform Module came through with flying colors, allowing great flexibility in defining various types of questions, and defining appropriate responses and actions based on the candidate’s submission.

Candidates were also required to put in their credit card information (which was subject to $1 verification charge) in order to confirm their identity and address. Ubercart was used to handle the ecommerce portion of the site. The progression of the candidate to the next phase was handled through UC Coupon by having applicants “purchase” a membership package for $1.

Upon checkout, a conditional action, configured entirely in Ubercart, was triggered to send an email message informing the applicant of next steps.

After they completed these tasks, their application was forwarded to Twinlab managers for final approval. Again, conditional actions provided by Ubercart allowed us to set up the notification system, entirely through site administration forms. This system was optimal for Twinlab because it combined the speed of automatic registration and screening with ultimate human control of who was representing the brand.

Code-Based Incentives

To provide a proper incentive for its brand ambassadors to spread the word about Twinlab products, the company wanted to provide them with a portion of every sale they referred to Twinlab.com. The model was similar to an affiliate program for web sites, the only difference being that brand ambassadors do most of their referrals offline, not online.

When the prospective brand ambassador successfully completed the registration and it was approved by the staff, the user was granted the brand ambassador role, which permitted them access to content and tools provided exclusively to brand ambassadors. Thanks to Drupal’s role-based user permission system, this ability was already available.

Using Drupal’s hook_user, when the brand ambassador role is granted to a user, the system generates a new, individualized coupon just for that brand ambassador, to give to his or her customers. This special coupon is linked to the brand ambassador’s system profile, so that all purchases made using that coupon are tracked. Finally, all of this information is emailed to the brand ambassador, through a straightforward call to Drupal’s hook_mail.

The brand ambassador would hand out the codes to customers. When the customers entered the codes while shopping at Twinlab.com, they got a discount. This functionality was entirely handled by the uc_coupon module. Through the uc_order hook, the sale was then attached to the brand ambassador’s profile through the association with the coupon itself, and a portion of it credited to their account.

Realizing that brand ambassadors were also influencing people online and through social media, ISL created badges that the ambassadors could embed on their blogs and profiles. Brand Ambassadors were provided html code that would render their personalized badges, which would link to the Twinlab.com product catalog, with data in the querystring that set the incoming visitor’s session with the value of the brand ambassador’s customer coupon code. This value was used to populate the coupon code entry in the checkout page with the value of the customer’s coupon code. Therefore, by clicking on the badges, users were navigated to Twinlab.com and received a discount on all purchases made in that session. Like the offline codes, these purchases were trackable.

Brand Ambassador Dashboard

When their applications were approved, brand ambassadors were given access to an exclusive dashboard on Twinlab.com. Simple and easy to navigate, the purpose of the dashboard was to give the ambassadors all the materials and information they needed to represent the brand.

The dashboard was a highly customized feature that was added as a series of contextual menu items in the user’s profile as defined by hook_menu. This allowed the user to access these features, along with all of the information and management provided by Drupal and the modules supporting this program, such as the contentprofile module. Drupal’s hook system allowed us to place the elements of brand ambassador-specific information into the appropriate places within existing account and profile information.

From the dashboard, the ambassadors could download pamphlets, sales sheets, product information, tutorials, e-mail templates, and a variety of other brand collateral. Twinlab could upload new collateral and relevant messages to all ambassador dashboards with just one-click: a big improvement over the alternatives, like sending out unwieldy e-mails to mass list.

The dashboard also aggregated code-based sales for the ambassadors, so they could see how much they had earned through consumer purchases. They could also see who was buying, and through what channels, so they could gauge the effectiveness of their efforts and improve their performance.

The biggest advantage of the dashboard was its speed and ease of use. Ambassadors could get collateral and the sales information when they needed it, just by logging in.

The site is hosted at Rackspace on a dedicated server on a multi-domain installation that runs a number of other sites.

Other Contributed Modules
There are many modules used on the Twinlab.com site. The primary contributed modules used by the Brand Ambassador system were uc_coupon, email_registration, cck, content_profile, securepages, stc_taxes, webform, and, of course, views.

Results

The new Drupal-based system has allowed Twinlab to expand its brand ambassador program and boost website sales. Since implementation, the number of Twinlab brand ambassadors has increased and web sales have jumped.

“The ambassador program has done more than just boost sales though,” said Marc Stover, director of marketing at Twinlab. “It’s enhanced our brand. Every day, hundreds of consumers are learning about our products from experts they trust. You can’t buy that sort of connection. And it’s something we wouldn’t have been able to do without this web-based tool.”

ISL Consulting and ClearMetrics

ISL Consulting is a San Francisco-based web development agency founded in 1993 that has built numerous Drupal websites. ClearMetrics is our New-York based partner that focuses on advertising and media campaigns as well as marketing tools that drive users to take action on websites or in the real world. Together, we’ve built a number of e-commerce and social business sites.

The project was run by a client Project Manager, a Business Analyst and Project Manager on our side, a lead developer and architect, a themer and designer with support for set-up, planning and database issues from another senior engineer and database administrator. As is often the case in these kinds of sites, our developers play an important role with the Business Analyst during the planning phases to explain options to clients. This allows us to best bring Drupal functionality and modules to bear on their business objectives.

The IT Dashboard is a management tool for the United States federal government CIOs to use in overseeing their IT spending. To support transparency and open government initiatives, Federal decision makers also chose to make the IT Dashboard available to the general public. In the IT Dashboard, members of the public can view the same data about performance that government officials use.

Background

In June 2009, Federal IT leaders asked two questions about their IT budgets. These questions are common in the commercial world, but have been difficult to answer in the public sector:

• Where are our IT dollars going?
• Are we getting value from our investments?

The answer to these questions is a website that gives insight into the acquisition and management of the federal government’s $75 billion-plus IT portfolio. The result is the IT Dashboard, a site built in collaboration with the government’s most senior IT leaders and nearly every federal agency.

Purpose of the IT Dashboard

The IT Dashboard provides full lifecycle performance information on IT projects’ scope and status. The data allows users to see project status, spot problems and trends, manage performance and quality expectations, and establish accountability. The tool is useful to the public and to government IT leaders who plan and manage IT investments. The home page screen shown above gives an overview of the tool.

IT Dashboard’s value comes from several facets:

• Mashing-up data from multiple data sets (IT project justification, schedule/status, expenditures, contractors.)
• Ensuring that real-time and complete data is available.
• Presenting the data and comparisons in ways that are visual and easy to drill into.
• Providing only high-level data that doesn’t overwhelm the viewer.

Site Design and Functionality

Originally conceived as a PHP application, the IT Dashboard evolved to a Drupal-based application, employing the Drupal API, several modules, and basic theming. While not all functionality is built in a customary Drupal way, we have modified all pages so that they can be accessed using menu hooks. The advantage of using such hooks is that now all those pages can use the Drupal API, and contributed modules, without worrying about whether or not Drupal has been properly bootstrapped.

One of the primary requirements was that REI Systems deploy the IT Dashboard rapidly. Since the source datasets were already available, developers avoided the need for a data migration step by working with the existing data model. With a working data model and Drupal’s easy-to-use components, we went to initial release in under six weeks. Since the launch in 2009 active development has been ongoing.

Another requirement was that the IT Dashboard incorporate captivating and practical data visualizations. To meet these requirements several visualization libraries are used across the site. FusionCharts drives most of the bar, pie and line graphs throughout the site. Google Motion Charts and JuiceKit power the more advanced Tools section of the site.

Initial plan was for agencies to enter monthly updates through data entry screens. However, this approach quickly led to delays and data quality issues. To address these issues, we introduced an XML API, allowing for system-to-system integration between the IT Dashboard and the systems used by more than 26 Federal agencies.

Access authentication for data providers is handled by integrating with an existing security system, included within the OMB’s MAX system — the tool used by federal agencies to enter and report official budgetary data. This integration was accomplished by extending the Drupal Central Authentication Services module (CAS), which controls role-based data access at both the application and database levels. The application makes certain data visible to the user only if they have appropriate permissions; otherwise, the user is limited to viewing only the publicly available data and graphics. User credentials are propagated to the database and are stored in a database session. This information is used by the Database Views module to enforce authentication and authorization rules.

The use of the FusionCharts library, which uses the Adobe Flash plug-in for rendering, meant that many mobile users were not able to easily access the same information as desktop users. To address the growing need for mobile use, a mobile-friendly version of the website was rolled out using the jqTouch library and the javascript visualization library flot.

Apache SOLR powers the search capability. A private SOLR index is used for authenticated users and a public SOLR index with a subset of the data is used for anonymous users.

Infrastructure

To support easy scalability and accessibility, the IT Dashboard resides in the cloud.

The federal government selected a technical environment that is robust; provides Infrastructure as a Service (IaaS); offers high levels of security, scalability, reliability and accessibility; and has a security plan and existing capabilities to protect publicly accessible web sites that disclose government information.

The IT Dashboard leverages a Content Delivery Network (CDN) structure for the public portion of the website to improve overall system performance. Business data is stored in a separate MySQL database; the Drupal database contains only Drupal-specific configuration information, along with static content.

The infrastructure was selected to support a tool open to use by more than 26 government agencies, members of Congress, the IT vendor community, and the general public – whomever may have some interest in the federal government IT investments.

Module Use

Contributed Modules

Major modules that were used were:

• CAS – Integrates with existing OMB CAS implementation named MAX.
• CCK – Used for data entry and file uploads.
• ClamAV – Scan attachments for viruses.
• Context – Used for page layout.
• Skinr – Allows easy application of a pre-built style library to blocks.
• ThemeKey – Eases transition from old theme to new theme on per page basis.
• Views 3 – Allowed us to plug in our own query backend, necessary to access separate application database.

Custom Modules

The following custom modules were developed for the IT Dashboard:

• Data Controller – A Views 3 Datasource plugin that has support for aggregations and efficient query generation.
• PHP Dataset – Describe data sets for views using custom PHP code. We are using this to drive views that require data from the application database.
• Views FusionCharts – Display style plugin to render view output as a FusionChart. This module is compatible with Views 2 and 3.

Challenges and Lessons Learned

We learned one significant lesson through this effort, namely that Drupal APIs were more versatile than we had originally believed. Our work on the IT Dashboard started initially with a PHP application, not using any Drupal APIs. We found several problems with this approach, each of which make system maintenance more complex and error-prone:

• The logic in SQL queries tended not to be re-used.
• Security items need to be addressed separately for each page viewed.
• There was not clear separation between logic and presentation.

Upon observing these problems, and gaining confidence in Drupal APIs, we revised several pages to use the Views module, which allowed us to:

• Centralize the logic of most queries in View Default.
• Establish a clean separation between View logic and View display.
• Most SQL-injection and XSS issues are already addressed in the code of the contributed modules.

As with any complex development effort, we met several challenges, and learned lessons that may benefit others in the community. The most significant challenges included:

• Reconciling preferences of different stakeholders for different visualization and layouts in order to take advantage of Drupal’s strength in a consistent presentation style.

  Drupal offers many ways to utilize templates and generic modules to implement a consistent look and feel across many screens. However the quick turnaround and occasionally conflicting preferences from different stakeholders made it difficult to develop an overall design that leveraged this Drupal strength. We have made a number of revisions since launch to improve consistency and we plan to address this challenge by spending more time up-front on mock-ups, and facilitating agreement across stakeholders on the end-state vision.

• Legacy system includes a data model that isn’t suited to new uses.

  The IT Dashboard has a separate application database that originated from a previous system. We addressed the challenge of accessing this database by using a custom query plugin for the Views 3 module.

• Facilitating expansion/collapse of table data detail to suit user preferences (an example of custom display functionality).

  Many IT Dashboard screens have custom functionality, which could not be satisfied by the Views module at a basic level. For example, some screens offer a table view of data. However, the desire not to overwhelm all users with the full set of data led to a decision that some rows should offer an “expand” button to allow drill-down capability at the user’s option. Implementing this customized functionality required custom coding.

Project Team

The site is currently operated by a nine member team, composed of the following roles:

• 4 Drupal developers
• 1 database developer
• 1 QA engineer
• 2 business analyst
• 1 project manager

Additional Information

REI Systems is a leading provider of web-enabled, database-driven knowledge management and performance support solutions for federal agencies, state and local governments, and the commercial and industrial sector. For more information, please visit us at http://drupal.reisys.com.

Symantec Connect is an enterprise class, community-driven, social business support and information portal for Symantec products, offering users of Symantec’s deep catalog of applications and services a platform to interact with one another and Symantec employees through rich web-based tools. Connect enables the rapid publishing of information about the day-to-day use of Symantec products through key community-centric features which facilitate the customer’s ability to:

• Ask the community for help with issues and flag solutions when they are posted for easy discovery in the forums
• Suggest and vote on product enhancements
• Publish helper applications and scripts as community downloads
• Publish user-submitted screencast videos for enhanced knowledge sharing
• Build online/offline product centric user groups with events, private content publishing and messaging in the groups
• Keep up with content on a variety of topics within the IT and security-related fields through articles and blog entries
• Enjoy a highly qualified community experience enabled by a suite of Symantec employee moderation, organization, and publishing controls.

All of these features also empower Symantec employees to quickly publish official versions of forum discussions, blog entries, articles, events, downloads, and videos while moderating and vetting content, helping steer the community in the right direction.

A Brief History

Symantec, founded in 1982, is one of the world’s largest software companies with more than 17,500 employees in more than 40 countries. The company provides both security and storage and systems management solutions. Their customer base includes consumers, small businesses, and some of the world’s largest global organizations. The company’s phenomenal growth can be attributed to a combination of market acceptance and strategic acquisitions. 

In early 2008, Symantec’s Customer Experience team began crafting a roadmap designed to consolidate several existing support and discussion sites into a consistent, best-of-breed community offering. The goals of this consolidation were to:

• Give Symantec customers a single point of contact where they could engage with the company’s support, marketing, and product management teams, 
• Draw on other customers experience and expertise, 
• Reduce the support and licensing costs of maintaining a collection of disparate community offerings.

Why Drupal?

After considering the landscape of both proprietary and open-source solutions, Symantec decided to use Drupal as a foundation for their community initiative. Symantec recognized Drupal to be offering: 

• a wealth of out of the box CMS and social media features and functionality
• the ability to scale for high usage sites
• the theme and development flexibility to customize the user experience quickly without the typical lag they had experienced requesting new features from proprietary vendors
• a recognized developer community from which to draw quality development talent

Symantec’s internal UX team even installed and configured rough prototypes in Drupal leveraging the vast library of existing contrib modules to experiment with various use cases for the upcoming project. This ability to rapidly create functional prototypes further cemented the choice of Drupal as the platform for development.

The Team

The project was structured to allow Symantec Customer Experience team to provide input on the design and planning of the site while collaborating with a group of  Drupal experts. Symantec’s internal team is augmented with Drupal expertise in the key areas needed for successful Drupal development.

• WebWise Solutions Inc. leads Connect’s project development and is the principle contact on the project providing long-standing expertise in Drupal-centric project management and user community development.  WebWise handles all day-to-day operations and oversight of everything from server deployment to administering the rewards system and offering a first line of customer support for the site’s users, all of which enables Symantec to focus on utilizing Connect to serve their customers instead of having to worry about maintaining the platform.
• Tabs & Spaces Inc. brings the heavy lifting of custom module development creating upwards of 50 custom modules to augment and extend Drupal to meet the unique needs of building a customer support community around a deep catalog of products and services.
• Jeffrey Dalton Design Inc. adds the “hot sauce” of user experience centered design and theme work leveraging Drupal’s powerful theme system to tailor the interface to the specific needs of the community. After the initial launch the redesign process allowed Jeffrey Dalton Design to fully invest in re-visioning the theme and leveraging user feedback collected throughout the initial months of Connects operation. During this process the Symantec Corporation even went through a brand change of their own which was easily rolled into the new theme.
• Tag1 Consulting delivers the performance and scalability tuning that is essential for Drupal sites with millions of users. With multiple layers of content caching in multi-server configurations, world class scalability expertise allows Symantec Connect to continue it’s rapid growth in a high demand environment.

This augmented team approach allows for rapid expansion of area-specific development expertise when new features and functionality are requested while minimizing Symantec’s development overhead.

Initial Launch

The initial effort (which took place over 6 months) involved merging the content and users from three disparate Symantec communities including:

• 110,000 members from the “Symantec Technical Network” (STN) running on the Lithium platform
• 10,000 members from the “Altiris Support Forums” running on FuseTalk
• 20,000 members of the Altiris “Juice” community already running on Drupal in a separate Drupal 5 site 
• Hundreds of thousands of existing nodes and comments from these three systems. 

As of this writing Symantec Connect has matured to become the community destination for Symantec products with stats boasting:

• 3,000,000+ unique page views each month 
• more than 206,000+ registered users
• content base with 600,000+ combined nodes and comments (and counting)

The Redesign

After the successful launch of Connect in March of 2009, the Connect team spent a portion of the next 18 months gathering user feedback and iterating through ways to improve the site experience. In the beginning of October 2010 Connect launched a totally redesigned theme. The redesign brought with it the freedom to use a more flexible iterative design processes in shaping the new interface. The team was able to focus more on the user experience side of the application and bring out new features aimed at improving the usability of Connect. The overarching goal being: make Connect easier and more intuitive to use and the community will grow both in the quality content and overall responsiveness.

Site Navigation

One area of detailed focus was the site navigation. All site content, both official and user-generated, is created around a combination of content type and taxonomy terms categorizing nodes into “Communities” (ex. Backup and Archiving) and “Utilities” (ex. blogs, articles, downloads, videos, etc). A new site navigation system was needed that would make it easier to move between these communities and utilities and would clearly explain the relationship between them. Moving away from the original tabbed interface, a combination of an interactive two level drop down menus with the breadcrumb model of a site depth path was used to illustrate both the relationship of community to utility, and show a visual representation of where content lives in the hierarchy of the site. The selection of a community and its corresponding utility became possible with a single mouse gesture and click greatly simplifying the navigation tasks. The menu dropping down and then expanding on a per community basis also allowed for the interface to list all utilities available for the current community, while keeping the interface clean and uncluttered.

After some initial user testing a secondary utility only drop down was added, which becomes available in the second level of the breadcrumb once a user is within a given community, making it possible to quickly switch utilities within the same community.

The breadcrumb model then extends beyond the community > utility selection and, when in context, offers further details as links to forum name, blog name, etc. and a single dynamic RSS feed element that remains contextually aware as the site is traversed.

Subtle JQuery animations further enhance the user experience of the menu with quick yet smooth state transitions. All animations were carefully refined to enhance usability without adding unneeded cruft solely for the sake of eye candy.

Below the global navigation an authenticated user menu was added with:

• a user “Account” menu for quick access to account features
• a “Create content” menu with easily identifiable iconography and short text descriptions making a direct one click route to add content
• a custom “Share” menu to better visually integrate the share widgets into the site
• an expandable video screencast help system to allow for in-page video help and user training

Context-Aware Search

The main site search bar was enhanced making it contextually aware as the user browses into each community/utility. The search box sets community name and utility type as initial facets automatically aiding in search relevance by assisting the user to search within the community/utility category of the content they are currently browsing. An additional tab is offered to easily select “Entire Site” and run a global site search. The context also changes when viewing user related pages to make searching a user name quickly accessible. All of these facets and more are also interactive on the Solr search results page so searches can be further refined.

The Drupal Solr search results interface was enhanced by introducing facet state icons and subtle colors to cleanly and clearly layout the relationship of search facet blocks and the effect they will have when clicked. Of particular interest on a site where so many visitors are seeking answers to their questions is the “solved” facet, which returns all of the forum discussions that have been marked as having a recognized solution attached to them. This aids the user to quickly find possible solutions to the subject they are searching.

Visual Design

The overall visual design of Connect was retooled towards simplifying and modernizing the look and feel of the site to better represent a set of content focused around technology and technical users. The theme was aimed at a more open and spacious feel using grey tones to set the theme elements and UI into the background when not needed and allow the content to carry the focus of the page. A restrained use of JQuery elements throughout the site were added to reduce page clutter and reveal content through simple clicks of tabbed and carousel interfaces. This allows community moderators to feature content through node queues without overwhelming the lists and community pages with volume.

Features of Note

Screencast Help

Though still in it’s infancy, the video screencast help system has the potential to be a powerful help feature for site users. The Screencast Help system is an inline JQuery element that expands revealing a set of How-To screencasts created to get users up to speed on step-by-step ways to use Connect and participate in the community. The videos are loaded directly into the expanded element so the user never loses the page they are trying to get help with. The initial implementation is a static set of cached videos, but by leveraging the existing taxonomy system, this feature will be easily enhanced in a future iteration to become contextually aware and show relevant video help as the user browses the site.

Forums

The discussion forums are the centerpiece of the Connect community. The forum feature set allows users to post product and support-related questions to the huge community of Symantec customers world-wide. In a recent study, Symantec noted that 90% of questions posted to Connect are answered by other users on Connect.

One of the custom features built into the Connect forums is the ability for a forum poster to mark a particular answer to his/her question as the “solution”. Marking solutions in this manner make it much easier for subsequent users to quickly find answers to commonly-asked questions. Symantec terms these answered questions as “deflections” that save the company money because they don’t have to be answered by a paid support employee.

This approach to “solved” posts also allows Symantec Community managers to select posts that need to be solved and push those into featured blocks challenging the user community to find solutions.

Ideas

Following the lead of other sites like Dell’s Ideastorm and Ubuntu’s Brainstorm, the Ideas area on Connect allows users to suggest and vote on product improvements. Market researchers know that some of the best new features and product enhancements come from the minds of users who actually deploy and use the product. The Ideas area on Connect allows product users to suggest a new feature or function while giving other community members the power to validate an idea by voting it up or down. Popular feature requests — as voted by the community — get the undivided attention of marketing and development teams. With Drupal’s improved voting api modules we were able to easily skin the voting widgets for various uses both as thumbs up/down widgets and the Ideas up/down widgets.

Known Issues

A much requested feature from site users, Known Issues allows Symantec Support staff to create official notices of product bugs with various status/severity tags and links to technotes in other Symantec web tools, which can then be used to collect votes from users who are experiencing the issue. Support staff can then interact through node comments to dialogue about Symantec’s plans for fixes and bug handling. It is worth noting Known Issues is an excellent example of a user generated site feature. A user submitted an “Idea” asking for the basic outline of functionality and over 245 other users voted that Idea to the top of the board. This brought the Idea to the attention of Symantec’s community managers who requested the feature be developed into “Known Issues”. Many times the best ideas come from dedicated product users expressing potential solutions to problems they face and companies can benefit from creating channels to listen to those Ideas.

Groups

Groups are areas within the community where users with similar interests can gather to share ideas, plan meet ups, and self organize to support each other. Symantec uses Groups, powered by Organic Groups Module, to give their more than 100 regional user groups a place to schedule meetings, communicate with their members, and post agendas and presentations — all from within their Group space on Connect. Private groups give the company’s beta testers, advisory board members, and early adopters a quiet, confidential place to exchange messages, information and files.

Videos

Some users would rather upload videos that discuss their tips and tricks in writing. Symantec Connect makes this possible. In this “YouTube” generation, almost anyone can create a screencast, and in many cases, these visual communication tools do a better job of communicating a user’s ideas than an article or blog post on the same topic. Connect was designed to make submitting these information assets as quick and easy as possible while also empowering Symantec staff to publish their own official videos and screencasts for the community.

Articles

Technical users can submit in-depth articles to Connect so other users of the community can learn from their experience and expertise. Connect articles have been submitted by users around the world. Teachers, trainers, systems administrators, and end users have all shared their tips, tricks, and detailed solutions to technical challenges via articles posted to Connect.

Blogs

Community members are welcome to post blog entries to Connect that describe their experiences with Symantec software. Symantec also leverages the blog platform to spread information from company and industry experts. One example of this is in the extremely popular Security Response Blog.

Downloads

IT departments around the world are constantly writing code snippets and utilities that make working with their enterprise infrastructure easier. Symantec Connect gives them a place to share those tools and utilities with the community. Users are encouraged to submit scripts and utilities they’ve written to solve their own IT problems. The idea being that others who have run into similar obstacles can use some of these user-contributed tools to solve the same problems in their local environments.

Rewards

Quality content and genuine community participation are foundational elements to Connect’s success. Symantec recognized this by taking the more traditional user rewards of account status and badges a step further and offering an innovative points and rewards program. Users earn points by making quality contributions to the community through posting new content, solving outstanding threads, and aiding in the general growth of the site. Points can be tracked and redeemed from within Connect for gift certifications to Amazon.com and other online retailers around the world. The rewards program is a good example of a large company valuing customer feedback and rewarding the efforts their customers make to help each other succeed.

Multi Language Support

Like all global companies, Symantec addresses a worldwide audience of partners and customers, many of whom prefer to communicate in their native languages. Concurrent with the site’s redesign, the Webwise team integrated Symantec’s existing in-house localization workflows to provide localization of Connect into German, French and Spanish, with other languages scheduled to follow. The flexibility of Drupal’s localization modules allowed Symantec to leverage their existing resources to cost-effectively translate the Connect interface into its destination languages.

Conclusion

As Symantec Connect’s content and audience continues to grow so does Symantec’s confidence in the power of Drupal as an enterprise-class application framework. The flexibility of Drupal as a platform, combined with solid design and development resources, creates the possibility for rich user experiences and large-scale web solutions. Symantec Connect stands as solid proof that fortune 500 companies can combine the robust flexibility of the Drupal platform, with the world class skills of dedicated designers and developers from the Drupal community, to build rich content work flows and social networking features into a powerful web tool sets to serve and support massive customer bases globally while eliminating licensing and residual costs from competing proprietary solutions.

In today’s global society, online collaboration has gained tremendous importance as businesses look for ways to share ideas and collaborate easily. Open Atrium is a powerful and flexible Drupal installation that provides intranet solutions to businesses and organizations for sharing ideas. It is used to create intranets where co-workers or teams can collaborate easily. But Open Atrium is filled with so many powerful features that you may need some help to use it to its full potential.

Drupal Intranets with Open Atrium unlocks the power of Open Atrium and guides you through real-world examples of an Open Atrium intranet. Examples and screenshots are used throughout the book so that you can follow along on your Open Atrium installation. The examples walk through setting up your site, user administration, implementing core features, and maintaining your intranet site.

This book starts off with explaining how to set up a web server on a Windows or Mac computer and install Drupal with the Open Atrium distribution. After installing Open Atrium you will learn how to add and maintain users. The book also covers some exciting topics such as the different “spaces” or “workgroup” micro-sites that can be created to match your organization’s structure. Reading each of these sections, you will understand and become familiar with managing the Open Atrium interface. Once you comprehend the Open Atrium interface, you will learn how to create a blog, document library, and issue tracker for each group’s dashboard or site page. The book covers everything from editing a single piece of content to arranging the layout of that content on each page.

By the end of this book, you should be able to establish your own intranet site for your organization or workgroup using the Open Atrium Drupal distribution.

A how-to guide with examples and screenshots to guide you through every step of creating an intranet with Open Atrium

What you will learn from this book :

• Add all the major features of an intranet to your site with Open Atrium
• Get to grips with Open Atrium’s interface and its features
• Install Open Atrium and customize it for your organization or company
• Create sub-sites (spaces) for each of your teams, departments, or workgroups
• Manage users and create a member directory
• Add core features packaged with Open Atrium such as Blog, Calendar, and Issue Tracker
• Extend the functionality of Open Atrium by adding pluggable features developed by the Drupal Open Source community
• Maintain your intranet by performing routine maintenance tasks
• Analyze your site’s logs and reports to ensure that it is running in tip-top condition

Approach

Packed with screenshots and clear instructions, this book allows you to follow along with your own site and ensures you won’t get lost. It’s a how-to guide that guides you simply through each step.

Who this book is written for

This book is intended for beginning to intermediate computer users who either have not worked with Drupal before or want to expand their Drupal knowledge by installing Open Atrium. If you want to learn how to quickly set up an intranet to improve your organization’s communication and workflow, then this book is for you.

About the Author

Tracy currently works as a Web Developer for Phase2 Technology, based in Alexandria, VA. He is the founder of Alpha Geek Tech, LLC, a technology consulting firm. His web experience began in the dot-com era when he worked for Flipside.com. He is actively involved in the developer community and while working as the Technology Director for Quiddities Dev, Inc he spent his free time as the lead programmer and architect for 12seconds.tv.

Get 20% off!

If you order the book through the Packt website, you can save 20% off the cover price. Use DrupalOA20 (case sensitive) when ordering through the official book web page.

Note: you must be logged in to PacktPub.com for discount code to be applied

Sample Chapter

Chapter 5, Dashboard

Headquartered in Atlanta, the Gospel Music Channel (gmc) is a channel that features uplifting music and entertainment, including specials, movies and series that the whole family can enjoy. gmc is the only TV network with every program certified as family safe by the Parents Television Council. DIRECTV, Verizon FiOS, and local cable systems bring gmc into roughly 50 million homes across the country. The brand boasts such popular shows as Dr. Quinn Medicine Woman, Highway to Heaven, Promised Land, Sister Sister, Early Edition and Amen. The website receives about 750,000 monthly page views from 250,000 unique visitors.

The channel recently launched a full site redesign in conjunction with an upgrade from Drupal 5 to Drupal 6. The project team from Mediacurrent would like to share some of what they’ve learned from the design and build of the site with the Drupal community.

Goals

The old gmc site was in need of an aesthetic and architecture facelift. In 2009, the company added uplifting movies and series to its program offerings to better service viewers looking for faith and family-friendly entertainment. The old site had a limited social media strategy and the design’s navigation prevented it from optimally interacting and engaging visitors. During the discovery and strategic planning phases of the project there were several objectives that were established. The goals included:

1. Upgrading the current Drupal 5 site to Drupal 6: The idea of jumping to Drupal 7 was discussed, but was determined to be too risky given many of the unknowns related to key contributed modules.
2. Branding makeover: The gmc executive team wanted a more modern, contemporary website redesign that reinforced the brand’s expansion to beyond music. gmc’s content has been expanding into originally produced movies and plays.
3. Create a more immersive customer experience: The new site needed to integrate more social media and networking calls to action in order to bump registered users on the site. Thus, usability was at top of mind when planning functionality for the new site.
4. Effectively integrating third-party tools: There were a number of applications being piecemealed on the old site that needed to be unified with Drupal-based solutions.
5. Content import: There were large amounts of new assets (3100+ files, 2700+ nodes, and 2200+ taxonomy terms) that needed to be migrated over. During the rebuild, leveraging the core taxonomy system to build rich associations for relevant content was a major desire.

Graphic Design

Upending preconceived notions about gmc’s previous brand was at top of mind during the site redesign. We collaborated extensively with gmc’s internal team to make sure new features would allow gmc’s content shift to continue without the need for constant feature maintenance updates. This was definitely a challenge. Careful planning was needed to create extremely flexible features that could meet the expected growth and ongoing changes, while still being easily managed. To deliver the new site, Mediacurrent utilized a team-based approach, dividing tasks between back-end engineering and front-end theming.

The Graphic Design aspects took into account the following:

Strategy: The design strategy was predicated around three words – uplifting, inspirational, and simplicity. Mediacurrent helped gmc organize their vision into a comprehensive blend of gmc’s branded warm reds with touches of complementary cool grays, blues, purples and aqua blues. Transparent circles with thin white strokes overplayed on top of converging spiral circular gradients were used to achieve the celestial-inspirational feel. The overall design is built around “gmc red”, which was used for link and background navigation colors. Cool grays were used to pull the entire design together and create subtle areas of interest and focus. The gmc team did not want anything too loud or “bullish” in nature.

Menu Design: We had to create a menu system that would visually divide each section of the site while still allowing additional categories to be added underneath corresponding sections. This challenge was met by using the classic tabbed menu system (Nice Menus Module) coupled with waterfall pull down menu interactivity. Of particular note is that when a user has selected a section the tab stays active throughout all section subpages. The active waterfall menu is visually offset or totally contrasted from non-active waterfall navigation. This was achieved with the help of extra classes inserted by jQuery.

Network Bar: gmc wanted to give more prominence to their advertising offerings, social media callouts, and company profile. One other major point of emphasis was the “Get The Channel” feature. We suggested creating a network bar at the very top of the page to pull this important content away from the main content areas in the body and footer. The concept was to streamline the user’s access to this major feature.

Homepage Rotator: The team at gmc wanted to update the user interface and experience to accommodate more content above the fold without disrupting the visual flow of the surrounding content. We designed a rotator that would allow for a larger lead photo, longer titles and more space for story lead text. The rotator allows for a user to pause and move between slides easily.

Challenges

Content import can represent a risk to a Drupal project plan, even when the content is being imported from a previous Drupal version. One method to mitigate the risk of a complex content import is to analyze the input format being used for published content and be on alert for a disproportionate volume of content published to a general content type such as “page.” If the site has an overwhelming amount of content published as a “page” with “PHP” set as the input format, it could be a warning sign for struggles ahead.

gmc editors wanted to be able to build dynamic content associations between entertainers and associated content, but in a way to make the references optional. This was accomplished by augmenting the core taxonomy module with a custom module that creates node associations based on matching terms between content types, such as an actor to a film. This is unique compared to a traditional node reference setup, as actor nodes do not have to exist and can be added later for the association to be automatically created when the appropriately tagged node becomes available.

Creating a custom weekly programming schedule import feature also required extra effort. The available data lacked the necessary structure in order to run a normal import process. Instead, a custom module had to be created that would parse the weekly schedule file and create the appropriate nodes and content associations.

Modules

The back-end management of the gmc site was facilitated through a series of custom publishing solutions and third-party tools, none of which played particularly well together. It was obvious that there was a need to devise a better way to leverage all the moving parts. Enter version 6 of Drupal. The gmc site uses over 50 contributed modules, including staples like CCK and Views.

Here is a breakdown of the modules used:

Module List

admin, authcache, backup_migrate, better_formats, boost, captcha, CCK, content_copy, content_taxonomy, custom_breadcrumbs, date_api, dblog, fb_social, filefield_paths, filefield_sources, forum, globalredirect, googleanalytics, hierarchical_select, hs_content_taxonomy, image_captcha, image_resize_filter, imageapi, imagecache, imagefield, imagefield_assist, imagefield_tokens, imce, imce_wysiwyg, jcarousel, jquery_ui, lightbox2, menu_attributes, menutrails, modr8, nice_menus, nodequeue, noderef_image_helper, nodereference, nodewords, page_title, pathauto, scheduler, search404, seochecklist, share, sharethis, site_map, statistics, taxonomy, taxonomy_manager, views, views_bulk_operations, views_customfield, views_or, views_slideshow, viewscarousel, webform, wysiwyg

Custom Modules

We also needed to extend or customize a number of modules to meet the requirements we were after. Those modules included:

Schedule: gmc wanted to automate their scheduling process and improve the online schedules usability as part of the redesign. The schedule spreadsheets are done by hand with no unique keys for programs This was cumbersome, but we came up with a solution to efficiently manage the process of importing a CSV file to populate the program schedule as well as creating episodes for their shows and the references between them.

Galleria + Node Reference Image Helper: This extended the Galleria module so that we could use the noderef_image_helper module which greatly improves its flexibility and administrative usability.

Relevant Content + Views: The Relevant Content module was extended to use Views which provides all the advantages of a custom view with relevant_content providing the term arguments.

Unicorn Video: gmc is using Unicorn Media as their video CDN, so we created a custom module to work with their API for the sites video features.

Conditional Node Terms: One of the workflow obstacles we encountered was the client’s desire to dynamically link content to terms if a node with matching criteria was found, and for it to act as a normal term if not. A combination of custom term, theming and argument handling functions are combined into a module for this functionality.

During the development of this site, Mediacurrent gained approval from the client to contribute code back to the Drupal community. Team member Chris Hales submitted patches for the Galleria, Relevant Content and Nodewords modules.

Drupal Theming

To reiterate, there was a heavy emphasis to create a highly professional re-brand of the site, while allowing visitors to dive into loads of data without clutter or confusion. In short, theming a custom site like gmc always has obstacles that require creative problem-solving. Here are some we wanted to highlight:

Gradients and Rounded Corners: The detailed design elements required many types of nested content areas with rounded corners and background gradients. However, the design had to appear consistent regardless of browser type and Internet Explorer (IE) does not recognize the border radius style in CSS. In order to theme the nested rounded corners in a way that would appear consistent in IE, background images and additional div classes were added to customize the node output.

Drupal’s Views Pager: The design required particular classes needed for custom theming that were not available from the pager’s output from Drupal core. A theme override function was created and added to template.php that reformats Drupal’s pager output to add the needed classes and remove un-required elements for custom theming.

Video Playlist: The design for the video playlist required that all items in the playlist view display horizontally. The video module outputs the video feed items into a table and so the items could easily be aligned by floating the table rows left. However IE7 does not recognize floats when applied to table rows. In order to accommodate the CSS limitation with IE7, an alternate display was agreed upon with the client to save time in which a horizontal v. vertical alignment is used for IE7 only.

Drupal’s Views Filters and Custom Alpha Pager: The functional requirements for the view pages needed an Alpha Pager which is not available in Drupal 6 views by default. Also, the design for the search fields and submit buttons required custom theming beyond what is readily available from default Drupal output. Custom functionality using PHP, View Arguments, and custom div classes needed for theming, were created and added into the header for each view that needed an Alpha Pager. To theme Drupal’s views search filters to meet the design requirements, CSS is used to position fields and buttons accordingly while also replacing default browser submit buttons with a custom graphic that is consistent in all browsers.

Drop Down Menu Theming: The design required different visual treatment for non-active drop down menus v. active drop down menus. Non-active drop down states are required to have pink and purple backgrounds while the active dropdown would have a white background. Neither Drupal nor the Nice Menus module output unique classes to identify active v. non-active parent items which are needed to target with CSS for independent theming. Nice Menus module had to be patched to add the first, last, odd and even classes needed for CSS targeting to apply some of the custom theming. In order to add the needed “active” and “non-active” classes to menu’s child elements, custom jQuery functionality was created to apply the needed classes dynamically.

Final Thoughts

Every Drupal project should be viewed as a learning experience. Overall, we were able to accomplish key goals and build a powerful, versatile Drupal website that took into account the way gmc was rebranding themselves. The collaborative effort between Mediacurrent and gmc has resulted in a more sophisticated, flexible and professional site.

For project management and ticket tracking, Mediacurrent uses Development Seed’s convenient Drupal distribution, Open Atrium, along with several custom additions including time tracking features. We have been through several PM tools and have been extremely satisfied with Open Atrium. The feature set is akin to what you would find in a more expensive proprietary system, but the flexible Drupal-based system allows us the opportunity to make continued improvements and refinements to the system and how it supports our processes. For example, during the course of this project we customized some of the casetracker-related views to better organize our work around milestones in the project plan.

As with any sizable Drupal implementation, we cannot underscore enough the importance of well-defined site architecture documentation during the planning phase. While most Drupal shops now employ some form of an Agile based methodology, having a roadmap is imperative. In our functional specification document, we incorporated gmc requirements including planned content types, taxonomy, roles, permissions and modules.

Last but not least, the redesign was challenging, yet fun to build. The client’s editors have enjoyed the improved administration features while working with their content. Drupal’s flexibility will allow for continuous and ongoing improvements.

Technology Environment

• Stack: RHEL 5.5 LAMP (Linux, Apache, MySQL, PHP)
• Hosting: Rackspace
• CDN: Unicorn Media
• jQuery: Replaced all Flash widgets in jQuery

About Mediacurrent

Mediacurrent is an Atlanta, GA, based interactive firm that has developed a specialization and consulting vertical within the free, open-source content management system called Drupal. For more information regarding Mediacurrent’s services and portfolio please visit http://www.mediacurrent.com.

Project Team

• Mediacurrent
• Dante Taylor – design
• Chris Hales – development, lead architect
• Trent Wyman – theming
• Jeff Diecks – project management