Things tagged on designguru.org with "web production"

This project was quite interesting as the Network is a brand new organization that is trying to bridge communicative gaps between a very diverse group of 1,000s of non-profit organizations around the province of Ontario.

Built in Drupal, this site allows administrative members of the Network to login and directly edit/add content - such as 'pages,' event listings and additional downloadable resources; all through the same front-end interface. Changes to the site are made as easily as logging in, pressing 'edit,' entering information through a WYSIWYG editor (looks like a scaled-down version of Microsoft Word) and then saving immediately to the live site.

In crafting the aesthetic of the site, we tried to use open space and natural colors/tones to achieve a simple interface that felt comfortable to peruse.

At launch, the site will be used to relate the Network's identity, post events and resources - such as downloadable PDF documents, blog and invite subscriptions to an email list.

Drupal as a platform affords the Network with modular scalability that will allow us to develop the communicative abilities of the site in time as the member base of the organization grows and multi-lateral dialogue between members becomes more regular and necessary.

In time, this site may serve to represent Network members with a profiling system as well as give them the ability to extend the notion of 'Constellations' - taking common interests into group-based discussion forums, blogs etc...

Aiding the Greater Toronto Transit Authority/Government of Ontario to draft a long-term plan for transportation infrastructure in the Greater Toronto Area, a group of stewards came together to create a series of un-conferences called Transitcamp sessions which would work hand-in-hand with a website that could empower citizens with a common platform to raise their voice on issues relating to transit in the city of Toronto.

Metronauts.ca is this platform - designed by Smack with iconography and design input from Peapod Studios, we built this site in Drupal taking its main purpose to be conversation.

Uniquely, this project blurs the lines between off and online communities by hosting events and using the website to bring conversations into the un-conference sessions, whilst also letting the website be a space for event attendees to share their reflections on the discussions going on @ Transitcamp sessions.

We used the theme of 'conversation' to inspire neat interface innovations such as a rotating header background image that can be clicked on for more information about the photo - allowing site users to submit their own headers to the site and then comment on the photos in rotation.

As a way to relate content's appeal to users as well as add definition to the online identities of site members, we employed an experimental 'karma' system on the site that gives karma to people who post comments and start conversations - with more karma alloted to the latter. In lists of on-going conversations on the site, karma points are listed and offer suggestion to site users that certain topics of conversation may be more interesting or popular.

This brand new website is the public face of a partnership in Ontario, Canada that promotes municipal cultural planning practices. As well, it serves as their mouth-piece and hosts research materials, case studies and so on.

The site was built in Drupal to afford it scalability in the future - should the online community of municipal cultural planners grows and demands more from the site.

Already, you can login to the site and begin posting comments in their blog and library, as well as peruse the documents available in the library section. Members can also post their event listings to the site.

From 2002 until the end of 2007 the JC Report was an email newsletter part-owned by NYC-based Flavorpill Publications.  The newsletter was sent out to just over 40,000 subscribers twice per month.

For 2008, the JC Report officially left Flavorpill and sought to not only increase the frequency of email newsletter issues to weekly but also launch a new dynamic website that would grow in time to support the fashion community at large and develop an online space for that community centred around the JC Report brand.

Previously, the JC Report's web presence comprised of a static-html archive of their back-issue emails.  We decided to create a whole new site in Drupal that would let site contributors around the world all login and post pieces, as well as have editors log in to review the posts before adding necessary imagery etc and publishing live-to-site.

Our goals were manifold with this project; particularily, we wanted to build a simple site that easily allows people to navigate through the huge back-log of content from previous email newsletters as well as register on the site and interact with other readers.

We built two levels of blogs on the site - one powering their day-to-day publishing plus a second private-posting area just for the publication's namesake, Jason Campbell - to be called 'Jason's Dispatches.'

This long-term project is live but will continue to be upgraded through 2008 with innovative features being added quarterly. 

Juma are a Canadian fashion label with two lines; their signature label as well as 'Movement' - an active line of women's wear. Both are tailored for a conservative yet young and funky female who values quality in fabric, stitching and timeless style.

To craft an interactive aesthetic for Juma's new site, we embraced light and transparency to achieve feminine yet bold and sexy qualities - shades of darkness and animated fades with the light-boxed gallery entice the site user to explore Juma's collections and offer mystery around the Juma brand.

ABOUT CALARTS:
The nation's first art institute to offer BFAs and MFAs in both the visual and performing arts, CalArts is dedicated to training and nurturing the next generation of professional artists, fostering brilliance and innovation within the broadest context possible. Emphasis is placed on new and experimental work and students are admitted solely on the basis of artistic ability. To encourage innovation and experimentation, CalArts' six schools--Art, Critical Studies, Dance, Film/Video, Music and Theater--are all housed under one roof in a unique, five-story building with the equivalent of 11 acres of square footage in Valencia, California, just 30 minutes north of downtown Los Angeles.

INTRODUCTION:
After years of managing an ever-growing static-HTML website which included sub-sites for each of its six schools, CalArts was preparing to move their web presence to a Content Management System and looking for an Open Source solution to meet a series of functional and aesthetic requirements.

SITE REQUIREMENTS:
Given the size of content already comprising the old static site, CalArts needed a CMS which could offer innovative means of site navigation whilst allowing inter-relational multi-media content.

To better clarify the specific abilities of each CMS we considered for the solution, Design Guru and CalArts defined a general set of site requirements. In addition to simply storing content and allowing stake-holders to add to/edit it, the site needed to provide modular scalability and function as an application framework that could provide unique data-handling and grow depending on the changing needs of the Institute through time; without needing to undergo massive core upgrades to afford such changes.

Here are some major requirements of the new CMS solution:

User-accessible, hierarchical content :

* Access to all published material on-site should be subject to a robust
* permissions system,
* Content/Comment publishing authority and viewing ability should be user-
* specific, definable by user-groups.

Extensive calendar functionality :

* The ability to restrict event attendance/viewing per user group,
* Users will be able to post events to a common event listing, based on their site permissions,
* The ability to relate multi-media to particular event listings (eg. Attach an image
* or video clip),
* Site-wide Forums & Commenting:
* In order to increase multi-lateral communication, threaded commenting will be
* available throughout the site.

News publishing :

* Permissions-specific ability to submit/publish & view news postings,
* News-to-front-page; high-level users (eg. Staff) will be able to assign news
* postings to the Institute/School front-pages.
* News, as well as other content on the site, can be un/subscribed to by users,
* based on permission and content taxonomy,
* News Syndication via RSS

Advanced Theming possibilities :

* Aesthetically separate each school and other areas of the site whilst maintaining an overall site 'design,'
* Each content item on the site should be style-able independently,
* Dynamic navigation should be able to be presented in multiple areas of the site,
* Content should be group-able (e.g. Faculty types per school; to display in vertical lists that can load individually but be presented alongside these lists.)

SOLUTION:
After considering relative merits of a number of CMS' the decision was made to develop the site in Drupal 5.x

Drupal natively afforded us the framework to build a site that was highly functional and customized yet not locked-down in core structure. When stacked up next to other CMS' which are built to allow simple content hierarchies (like Joomla), Drupal excels in providing the ability to ignore vertical hierarchy and organize multi-media content multi-laterally through taxonomy and associated access permissions.

Of course, at its core, Drupal's use of 'nodes' meant that we could relate anything on the site to each other - which proved to be an invaluable feature of the site when looking at styling and multi-admin content management issues.

Three key aspects of the build were crucial;

1. Aesthetic demands of the site required a combination of third party modules to allow styling patterns across content types, site areas and so on,
2. Hundreds of site users were to be administrators of various areas of the site and afforded permissions accordingly; they had to not be able to interfere with each other's content and all had to be able to work on the site with ease - the default permissions layer would need to be extended and a WYSIWYG editor installed with some image/file handling capability,
3. Custom content types would be necessary along with their dynamic display through lists.

TECHNICAL:
In order to meet the various site requirements and build aspects listed above, we made good use of the following Drupal modules.

Note: this is just a partial list of what we've installed on the site - to give you some leads on modules we really feel were crucial in being able to construct this specific site.

Theme/Styling/Navigation :

* Node Style - to allow each node to call specific CSS and more through custom includes ( http://drupal.org/project/node_style )
* Menu Trails - extends Drupal's active menu denoting to allow styling of multiple click-paths/navigational hierarchies (note the yellowed links on calarts.edu ?) ( http://drupal.org/project/menutrails )
* Menu Trim - allows menus to be split at parent level and auto-block creation of child menu items ( http://drupal.org/project/menu_trim )
* Login Toboggan - modifies the Drupal login system to allow custom menu items to the '/user' login screen etc... ( http://drupal.org/project/logintoboggan )

Administration :

* Administration Menu - an invaluable tool that takes the admin options of a site and throws links into a slick-styled pulldown menu ( http://drupal.org/project/admin_menu )
* Views Bonus Pack - A great extension pack, this module allows things like exports of lists created with the Views module to CSV format - so admins can export any list of node-data on the site and edit it in their local Office Suite of choice ( http://drupal.org/project/views_bonus )
* User Import - This site's user base is pretty large and User Import allowed a straight-forward port of users from CSV files into the site; organized by specific User Role ( http://drupal.org/project/user_import )
* Taxonomy Access Control - Access control over taxonomies/categories per user role; disallows certain users from editing nodes belonging to other schools, for example ( http://drupal.org/project/taxonomy_access )
* Devel - A great tool to display page load times and other information to admins, as well as let them clear the site cache - crucial for ensuring the display of recent revisions to Drupal sites to Anonymous users ( http://drupal.org/project/devel )

Content Types & Data Structures :

* Content Construction Kit (CCK) - essential for customizing content types; this module let us create specific nodal types which, for example, don't have any 'submitted by' information etc.. through custom node-type.tpl.php files ( http://drupal.org/project/cck )
* Category - an extension of Drupal's taxonomy system, this allows us to relate nodes to each other using a flexible lexicon of free-tags and established terms. As well, this module works with the node style module; adding ability to the styling of category-specific nodal lists etc ( http://drupal.org/project/category )
* Views - Essential for any Drupal site that features dynamic lists, this module is responsible for lists through the site of various content types - such as Faculty Bio links (which use blocks created by Views to afford grouped faculty-specific menus) ( http://drupal.org/project/views )
* Panels - This module works with Views to create 'pages' made up of various areas - such as seen on the site's Frontpage ( http://drupal.org/project/panels )
* Usernode - Allows a single node to be create of a particular type (which we made with the CCK) that is associated to a user on the site - this is what let us create Faculty Bios that faculty members can edit themselves ( http://drupal.org/project/usernode )

Content Creaton/Handling :

* Javascript Tools - A great suite of tools including a pop-up javascript calendar like you would see on Expedia ( http://drupal.org/project/jstools )
* Pathauto - Generates semantic/human-readable URL paths to nodes based on arbitrary rules including variables like 'menu path' etc... ( http://drupal.org/project/pathauto )
* FCKeditor - a pretty powerful WYSIWYG editor ( http://drupal.org/project/fckeditor )
* IMCE - image/file handler that facilitates user uploads and integrates with FCK ( http://drupal.org/project/imce )

The general overview of how these modules come together is that we have various content types on the site though it mainly consists of 'page' content. Pages have URLs written by the Pathauto module and in some cases, where we need specific URLs per page which are outside of the rules, specific content types have been created which do not have rules set. Those content types are still subject to the same categories and are thus accessible in site-wide searches and when users click on the tags at the bottom of pages etc...

We used the Views module extensively throughout the site to create custom lists of nodes and those lists aren't always displayed as pages. You can see an implementation of Views blocks on faculty bio pages per school - where the blocks act as dynamic menus; listing all 'usernode' content in particular categories. Each block is headed with a title and the overall effect is a menu which could not have been created with the stock Drupal menu system.

One of the focal accomplishments we made with drupal on this site is the depth to which site theming can take place. With the Node Style module, we have created a series of styles to present each school and other site areas as visually distinct, yet with the same layout - provided by two custom Drupal themes. One theme is simply two columns with a top area that features 5 block areas to store the top menus and search bar. The second theme is a variation of the first; with an additional block position to create the effect of three vertical columns - where the middle one displays views-block-powered dynamic list menus (like on faculty bio pages).

In order to load the dual layers of rotating background imagery per site area, node styles simply call specific image rotation scripts written in php via CSS.

FINAL NOTES & ACKNOWLEDGEMENTS:
The site is running in live-BETA for a few months; after which we'll be rolling out some nifty community functionality. We're really excited about the community functions and will be documenting them on drupal.org for everyone to check out.

Perhaps the main feel-good factor when working with Drupal is the amazing community to learn from and bounce ideas around with. Thanks to anyone who posts to drupal.org and hangs out in #drupal-support - as well as Robert Douglass (from lullabot) for tips and feedback over the past couple of months.

When we were handed this project after a freelancer was unable to continue development, we immediately recognised the value for Joomla's community-building tools and implemented an array of savvy social networking tools.

bebold.org is a great example of how people can come together online, express their motivation in life and forge friendships and other alliances. Functionally, registered members can fill out profiles relating to the topic matter of the book and monitor who on the site has visited them. We built in a private messaging system and simple message board that automatically links each post to the profile of its poster.

A completely bespoke aesthetic was designed - inspired by skype.com and empowered with scalability; a discussion forum was installed to allow for customer interaction and offer new thinking on customer (self) support. In addition to listing products, the site offers both document and software downloads to support multi-link products plus serve as a within-staff document repository.

The commissioned set of code needed to be commented so that the client could add in information necessary in creating additional pages later. A single CSS file was created to maintain a site aesthetic through the home and inner pages.

This long-term project has seen a website evolve with Bobby's career - from being a simple place to store his bio, we have worked with him to develop and then grow his email contact database - helping him promote the music he presents on his BBC Radio1 and Asian Network shows. Recent introductions have been a wordpress-powered blog and media gallery, both integrated into the CMS.