iCitizenForum.com Case Study
At the end of 2007, Aten Design Group worked with The Colonial Williamsburg Foundation to deploy iCitizenForum.com, a Drupal website about Citizenship. The following case study documents some of the factors that led to choosing Drupal, and outlines the technical approach for the project.
Background
The Colonial Williamsburg Foundation operates the world's largest living history museum in Williamsburg, Virginia. The foundation preserves and interprets a 301-acre Historic Area; operates museums, outreach programs, and the John D. Rockefeller Library; and carries out important research and archaeology pertaining to the origins of America. In accordance with its mission, "That the Future May Learn from the Past", the foundation is concerned not only with recreating the 18th-century experience, but with facilitating education about the idea of America–both in its beginnings, and in its relevance for the future.
iCitizenForum.com, a website that promotes discussion around the topic of Citizenship, is a fitting extension of this core mission.
Discovery
By the time of our involvement with the project in late 2007, work had already started. Designs had been produced. A website had been custom-coded in ColdFusion. Community features had been implemented using a .NET-based social software solution. The concept had already gone through several major evolutions, and its stakeholders felt that the latest iteration still wasn't quite spot-on.
We began our work with a collaborative discovery process to reassess the primary goals for the website and identify the best steps forward. The central purpose of the project, as defined during this process, would be to engage users with a discussion around the idea of Citizenship. In line with this goal, we established the following requirements:
- Use blogs, organized by themes and tags, as the primary means of engaging users.
- Leverage video as a prominent means for delivering content, in blog posts and elsewhere in the website.
- Offer forums as a platform for supplemental discussion.
- Provide in-depth resource materials, including translations for some documents, with background information on the subject of Citizenship.
Choosing Drupal
There were snags early in the prototyping process. The community building software being used didn't support heterogeneous categorization. We wanted two taxonomies for the same content: one for five discussion topics that would serve as site-wide containers, and another for free tagging. Additionally, we saw issues on the horizon with creating page content that would be separate from the blog, structured under a hierarchical menu, but capable of being categorized just like a blog post. In the technical setting at that time, these features were simply unavailable–at least without extensive custom development.
The problems we were up against essentially boiled down to categorization–something Drupal excels at. Beyond categorization, Drupal's community features, configurable content-types, access control, flexible menus, and RSS publishing were attractive. Additionally, content management "at large" was a subject we often visited in our work with Colonial Williamsburg, and had just as often abandoned due to issues of cost, licensing, and interoperability within an already massive web architecture. As a fairly isolated piece within their broad spectrum of web deployments, iCitizenForum.com would be an ideal test-case for the Drupal framework.
Windows Hosting
Colonial Williamsburg runs IIS on Windows NT servers, uses ColdFusion for development, and serves up data with Microsoft SQL Server. It was an uncommon environment for Drupal. Time constraints and a pre-existing service agreement for a dedicated NT server made considering LAMP unrealistic, so we began exploring the viability of hosting Drupal on Windows in a production environment. We installed PHP 5, MySQL, and an IIS module (ISAPI Rewrite) to provide mod_rewrite-like URL rewriting for clean URLs.
Implementation
With server configuration mostly behind us, we began building out the website.
Content Types
- Blog Posts
User participation would revolve around posts authored by iCitizenForum staff and recruited volunteers–who would include videographers, political science and journalism professors, and others... including Craiglist.org's Craig Newmark.- Discussion Topics
- Each discussion topic category, or "term", has an associated node that serves as a stub page for listing associated content.
- Forum Topics
- The website provides traditional threaded forums for user-contributed topics and free-form discussion.
- Pages
- Pages are used for "static" content throughout the website–including in-depth citizenship resource materials.
- Page Translations
- We implemented a content-type specifically for translations, using a CCK Node Reference field to associate each translation with its original English text.
Modules
Optional Core Modules:
- Blog
- Forum
- Help
- Menu
- Profile
- Search
- Statistics
- Tracker
CCK:
- Fieldgroup
- FileField (used for video uploads)
- ImageField (used for images throughout the website)
- Node Reference
- Option Widgets
- Text
Development Tools:
Image Manipulation:
Input Filters:
- JS Calendar
- Javascript Tools
Miscellaneous:
- Flag content
- Job queue
- Masquerade
- Pathauto
- Poormanscron
- Service Links
- Token
- Weight
- External Links (forces external links to load in a new window and uses semantic XHTML)
Spam Control:
- CAPTCHA
- Math CAPTCHA
Video:
The following modules were custom created to handle video uploads, video library presentation, and syndicating video content to YouTube.
- video_upload
- YouTube API
- VideoLib
Development Approach
Content Types and Teaser Lists
We implemented content types using the CCK, and created custom PHP blocks to handle content lists. We went back and forth a bit on whether to do this with views or custom queries, but in the end sided with the latter–our decision aided by the fact that lists would need little-to-no editing, and did not depend on joins with CCK fields.
Additionally, each "Discussion Topic" category within the website has a correlating Discussion Topic node, assigned to its respective category, which serves as a stub for listing related posts. This approach provides workflow controls for categories that are already available for nodes. New topics won't actually appear in the website until the appropriate user publishes the correlating Discussion Topic node.
Throughout the website, custom blocks inspect the current page, determine the current Discussion Topic, and display lists of related content.
Site-wide Call-outs
The client needed a way to call-out any content from within the website in the form of graphic promotions assigned to the right-hand sidebar. This was accomplished by creating a custom block that displays images attached to any content in the website via a CCK imagefield labeled "callout".
WYSIWYG
Originally, content was entered and edited with the help of TinyMCE. We later swapped TinyMCE for Markdown, plagued with the same old problems presented with JavaScript-based attempts at WYSIWYG. (Read more about our thoughts on WYSIWYG vs Markdown.)
CAPTCHA
CAPTCHA was used for all input fields available to unauthenticated users. We chose Math CAPTCHA, rather than image-based CAPTCHA, for accessibility reasons.
Translations
Multiple translations of citizenship resources were accommodated via a custom content type (Page Translations) equipped with a Node Reference field for linking to original texts. Each translation features an overview "about" page that provides a description of the content and goals within iCitzenForum.com, as well as a list of all additional resources available within the website in that specific language. Because the implementation uses a custom content type with a CCK node-relate field, dynamically generating these lists, and linking each translation page back to its respective source, was relatively simple.
Throughout the website, translations are represented visually as a series of flags beneath the title of any document where additional translations are available. In the site-wide footer, these same flags each link to an overview "about" page for the respective translation.
Video Content
Some of the most interesting functionality at iCitzenForum.com involves its handling of video content. Early in the project, we simply allowed content contributors to paste embed code from YouTube, Vimeo, Blip and similar websites into the body field of blog posts. Later, we began discussing a way of aggregating posts that contain video into a single, self-contained video library. Additionally, video editors at Colonial Williamsburg wanted the ability to more closely control the quality of videos being published, which in this case meant hosting the video locally. We wanted to maintain the ability to syndicate video to third-party video websites, but wanted to better manage the quality of original videos posted within iCitizenForum.com.
These new requirements pushed additional development in two directions. First, we needed a way to list video posts together in a library-like setting. Second, we needed to dynamically push videos out to services like YouTube.
Video Library
To accomplish the first requirement, we created a simple module called VideoLib that provides a configurable view for displaying video content, relevant taxonomies, and related videos within a single view-port. The module exposes several theme functions that offer in-depth control over the look and feel of the video library. It includes JavaScript that applies unobtrusive AJAX actions to the taxonomy and related video navigation, providing a highly responsive, single-page experience for users.
Video is attached to content via a CCK file-field labeled "video". Any content type can behave as video content simply by adding the "video" field to it. Within the settings page for VideoLib, admin users can specify which content types that have the "video" field should be included in the video library. Additionally, administrators can choose which taxonomies to expose as navigation blocks. In this case, we wanted Discussion Topics to appear as navigation options down the left side of the page, but not Tags.
It is worth noting that we could have used a combination of page and block views to accomplish a similar end result. We opted instead to create a custom module that rolls all of the necessary functionality into a single, more portable, centrally managed feature for this website, with potential application for future projects as well.
Video Syndication
The development effort, spearheaded by Brad (aka beeradb), quickly evolved into a full-fledged YouTube API module that offers a wide range of interface capabilities that go far beyond the initial needs for simple content syndication. The YouTube API module provides functions for programmatic video management, FeedAPI integration, video feeds, commenting, authentication, rating, and managing favorites between Drupal websites and YouTube.
In addition to automatically pushing content to YouTube and Vimeo, the video library features a video-specific RSS feed that includes all nodes from within the library, their teasers, and their associated videos.
Link Rewriting
Stepping back a moment to the video library functionality, it is worth going into a bit of detail about the way we handled linking. Within the video library itself, all links are routed to URLs that appear as "videolib/{term id}/{node id}", a menu path controlled by the VideoLib module, which in turn handles all of the necessary functionality for displaying videos. We wanted to go beyond this, and make sure that any node within the video library could be displayed outside the library as well (in teaser lists, for example). To accomplish this, we used the custom_url_rewrite system hook function in settings.php. Within that function, we detect if the "node/{node id}" path belongs to a video post. If it does, we dynamically rewrite the URL to "videolib/{term id}/{node id}".
Wrapping Up, Moving Forward
Drupal's robust taxonomy features, combined with its powerful content management capabilities that, while excelling at community features, provide more than a social-software solution, made it an excellent choice for the iCitizenForum project. The initial Drupal-powered deployment launched just eight weeks after redesign efforts began, largely due to the wide range of features already available in core and contributed modules–without the need for extensive custom development. Since launch in early 2008, numerous new features and modifications have been incorporated back into the website. Moving forward, the vision for iCitizenForum.com is that it continues to evolve and adapt. Drupal, with its modular architecture, support for open standards, and passionate community, continues to be an ideal platform for the project.
RTL Arabic is shown LTR
Great node, i liked so much. They indeed made a great job but with a huge mistake!
Have you checked the site's arabic language?
The language seems not to be working correctly in some places, as it's shown LTR insted of RTL with all text upside down.
Let me explain more, imagine, let's say:
-Cibara egaugnal si nwohs tfel ot thgir daetsni fo thgir ot tfel
Did you understand what i tried to say?
Well it's:
-Arabic language is shown left to right instead of right to left
Same thing is what they have on their site, which is not correct. I wonder why?!
Check this link to know what i say:
-Link 1 (all txt, including node title)
Now, these arabic nodes are shown with the correct RTL text —allowing users to understand what's been written— but seems that they have the arabic language set as LTR under "…/admin/settings/language" becuase all nodes are shown with text aligned to the leftside instead of rightside (still node titles not showing correctly):
-Link 2
-Link 3
-Link 4
-Link 5
-Link 6
Drupal's RTL languages (i am sure, at least Arabic) are working perfectly well as i tried on my new dev site, congratulations on it drupal guys, lot of work still to be done. The only thing left —as i think— on those RTL languages is that you should be thinking on changing/flipping default blocks like user login, navigation, … (if any) from left to right and right to left. Means, the ones on the left should be changed to the right and vice versa, when you switch to a RTL language (feature request for D7).
Thanks for pointing that
Thanks for pointing that out... we'll raise the issue with the folks responsible for translations.
Great!
Thank you beeradb, hope my features come true.
I couldn't hold my self seeing that in some place out there, people are designing something wrong and makeing bad propaganda to drupal.
Arabic RTL language is working as expected, but let's imagine how visitors will react when they try to read the unreadable! First thing they'll say, OH? so that's drupal dealing with Arabic? no way to check it out, already not working with professional designers.
But knowing that the problem is not from drupal system itself but from the one who designed that web, gives us total security using it. And that's important.
Finally and leaving iCitizenForum.com, i wish to say again, great job Gábor Hojtsy, drupal translations dept./guys/people who are working hard day by day to get the best out of it.
arabic text broken not a BIDI problem
I don't think the problem with the arabic text is with directionality, typically when you display arabic text in html as LTR the letters in a word are ordered correctly but the text is aligned to the left and the order of the words breaks if it's a mixed direction paragraph.
but on icitizenforum.com the order of letters in words is completely reversed (making it totally unreadable) even if you copy and paste the text in some text editor the order will still be reversed.
so it looks like arabic text is stored incorrectly in the database or something equally serious and not just a CSS line direction problem.
----
http://www.manalaa.net
Definitely is a serious problem
Definitely is a serious problem that iCitizenForum.com guys should tell us about what they did & resolve it by typing the text again, this time correctly as with the other nodes (check nodes i gave above).
Remember what i said before:
Of course if you copy&paste this text in any TxtEdit application, set it as rtl or ltr, it'll still say the same thing which is unreadable.
Hope a detailed response on what happened with this text could be given here.
P.S.: Not a problem with HTML or CSS directions but how the text been saved —i think—, maybe imported it from somebody who wrote it and the one who saved it doesn't actually know how to read arabic! That text was created by uid=1 "icitizen-admin" who had posted other arabic nodes, but correctly.
Arabic Translations
Hi errement, thanks for pointing out the problems with those Arabic pages... tough to catch for us non-Arabic speakers.
We're putting together a two-part solution for the Arabic pages. First, we're using CSS to reverse text-direction and alignment. Second, we need input from the translators regarding the one page with issues. It looks like something happened between the source and its destination that scrambled the text, as the issue isn't affecting most of the pages (as you pointed out).
The changes should be in place in a day or two.
Very nice write up, thanks
Very nice write up, thanks for taking the time.
It looks like a very decent situation for drupal to prove itself, the way you handled the video was interesting, I have been looking for a way to approach the idea.
And the translations? was that user-submitted?
Very clean and attractive solution for the site overall.
props!
--
When God is with you, who can stand against you?
Really nice writing. One
Really nice writing.
One question:
why Windoze IIS hosting? If Windows NT was requested by "service agreement" and/or contract, why not WAMP (windoze,apache,mysql,php) ?
---
Drupal Theme Garden
We're glad you enjoyed the
We're glad you enjoyed the writeup!
What it basically boiled down to was the clients comfort level for server administration moving forward. IIS is an environment the client very comfortable administering, and given the operating system constraints we didn't see a compelling reason to steer them towards apache for this project.
D6?
I guess they don't plan to upgrade in the recent future.
I thought the same
At first glance, I thought the reason View wasn't used is because they went with Drupal 6 and at the time views was still in development. But as I continued reading, I realised this is Drupal 5 and it was a concious decision to not use Views. This is further backed up by using weight.module to handle the node sorting.
The module's used in the list are all available for D6 right now. Is there any reason why D5 was used?
Great write up, I love reading about challenges faced in Drupal and how people over come them!
---
Dee
iScene.eu :: UK Drupal Consultancy
D5!! Also realized that
I also realized that they used D5 for it, by visiting http://icitizenforum.com/update.php
D5 vs. D6
When development originally started, D6 was still in code-freeze. I believe D6 actually became available right after the website launched (early 08). Two factors that affected our decision not to upgrade immediately were the status of CCK and, more specifically, the unavailability of FileField. Upgrading to D6 is definitely in the overall plan, though at this point there is not a solid time-frame for that piece.
admin
Hello,
cool to read those return of experience...
One sad thing about the site is that it seems the content is written using an "admin" username.
If this is $user->uid == 1, this is really bad practice.
see: http://icitizenforum.com/users/admin/track
br,
--
magoo
.
Just because the user name is "admin" doesn't make it UID 1. "admin" is UID 2 on all of my sites.
Michelle
--------------------------------------
See my Drupal articles and tutorials or come check out life in the Coulee Region.
You are correct michelle,
You are correct michelle, 'admin' is not uid 1 for this site.
You are correct michelle & beeradb,
You are correct michelle & beeradb, 'admin' is not uid 1 but uid 26.
But question is, why uid 26 should be named "admin", when for example they have uid 3 free?
Any why, should an "admin" user name, administrate the site?
I'll keep the answer for people to follow up.
Cheers!
why?
What makes this a "really bad practice" ?
Also, thanks to beeradb and Aten Design Group for this awesome writeup!
I prefer to create personal
I prefer to create personal accounts for every contributing user and another administrative account (or more than one depending on the situation).
The bad idea is to give the uid=1 to a "normal" user (i.e. someone that may not understand all the options available to uid=1). What can happen is unpredictable :-).
--
magnus
Nice post
Nice post. Thank you :)
nicely done
"Throughout the website, custom blocks inspect the current page, determine the current Discussion Topic, and display lists of related content."
could you share the code?? Im working on something similar. Am trying to have each page recognize where it belongs in the site's hierarchy and then dynamically build a Navigation menu using that information. The same page/node could belong at two different places in the sites hierarchical structure depending on which "content type" and "taxonomy term" it belongs to.
Btw, i like your use of the breadcrumb :)
Thanks you beeradb for this
Thanks you beeradb for this awesome writeup!
Just a quick note: You need to include the none english charakters in the swf. Like umlauts (äüö) for German language if you want to use sifr. Otherwise those Characters will simply disappear. http://icitizenforum.com/german/declaration-of-human-rights
Excellent
Great write-up...thank you for posting it.
customizing login form
how did they customize the login form.Can anyone share their knowledge regarding it
Site very slow
Is it just me or is the site really slow for all?
Site looks good. Nice work. Great Story.
Just curious if your having an amazing amount of traffic, server slow, some software issues, or haven't done enough optimizing. Drupal makes a lot of queries because of its modular structure trade offs and needs some serious focus when you start scaling for a lot of users..
Loading fast here. (Germany
Loading fast here. (Germany - below 1.5s) However there are certainly a few things that could speed up the loading process like using sprites for the 13 flags etc. and maybe not alot of people are browsing the site atm.
Good look and speed. From
Good look and speed. From Russia it opens about 3 seconds...
------------
My Site