Tom McGee's Blog

Tran­si­tion­Works is a local busi­ness founded by John Har­vey, a for­mer Amer­i­can Express HR exec­u­tive, as a training/forum for peo­ple who are “in tran­si­tion.” Gen­er­ally that means peo­ple who have sud­denly found them­selves out of a job, but also peo­ple who have careers and are look­ing for insight on how to make a change.

The ses­sions involve seven to eight weekly work­shops in which the par­tic­i­pants meet and go through var­i­ous exer­cises to bet­ter under­stand them­selves and their goals. The ulti­mate end is a “search plan sum­mary,” a per­sonal doc­u­ment that acts as their blue­print for the process of tran­si­tion. In fol­low­ing weeks there is an ongo­ing weekly dis­cus­sion, to which all alumni of the pro­gram are invited.

John and his part­ner Alfred asked me to look at their cur­rent state on the web and come up with a new way to posi­tion the orga­ni­za­tion, and turn their web pres­ence into an active forum to fur­ther ener­gize the group.

Base­line

At the begin­ning of the project, their pres­ence on the inter­net was in four pieces. One was their web home page. This was a sin­gle flat file on a server, with a mis­sion state­ment, a course out­line, and con­tact infor­ma­tion. Addi­tion­ally, there were two Yahoo! groups which mem­bers could belong to, and a mail­ing list.

The Yahoo! groups were a prob­lem in par­tic­u­lar; they required two sep­a­rate logins, and a lot of back-and-forth between them to get the whole pic­ture. They didn’t seem to work together at all, and users were frus­trated. The most imme­di­ate need was to bring it all together into one com­mon area, where the value of the pro­gram could be seen by prospec­tive mem­bers, and also serve as a com­mon forum for cur­rent members.

Soft­ware Choices

My first impulse was to use a few best-of-breed com­po­nents for a bulletin-board sys­tem, an events cal­en­dar, a blog, and a mail­ing list. These would be tied together under a sin­gle look-and-feel, accessed via a com­mon home page. For a cou­ple of rea­sons this wasn’t going to work. With the advice of a cou­ple of mem­bers of the group who are involved in the seman­tic web, I took a look at the Dru­pal system.

With the assis­tance of the many plu­gin mod­ules avail­able for Dru­pal, I real­ized I could do exactly what I wanted, and in the process inte­grate the con­tent in sev­eral nice ways.

The bare-bones instal­la­tion of Dru­pal is only some­thing a geek could love. The dis­play really is bare bones — only the most ele­men­tal pieces of con­tent are dis­played, and in a not very help­ful form. I found that sev­eral com­mon mod­ules were absolute indis­pens­able. In addi­tion, the actual man­age­ment of a Dru­pal site is cryp­tic. Many things are very hard to find, as they’re listed in non-intuitive places. Other func­tions require you to go into sep­a­rate screens to man­age. Other rel­a­tively obvi­ous things can’t be done at all with­out hack­ing the code. Once you’ve done one or two of these you get the hang of it. But it pays to take notes on what you’re doing.

Views: With­out the views mod­ule, only the titles of most con­tent nodes is vis­i­ble on any index page. For exam­ple, for most new nodes you have the option of upload­ing a file. If this file is going to be in any way mean­ing­ful, it would be help­ful to let users down­load it. Yet, in the default instal­la­tion you can upload files but you can­not dis­play a link. This is typ­i­cal of the often illog­i­cal meth­ods referred to above. Views lets you take con­tent of a cer­tain type — types you set up using the Flex­in­ode mod­ule — and choose var­i­ous attrib­utes to display.

Using these two mod­ules together I was able to put together mean­ing­ful list­ings of resumes, search-plan sum­maries, ref­er­ence mate­ri­als, and user pro­files; as well as improve the use­ful­ness and appear­ance of the Forum mod­ule.

Con­fi­den­tial­ity

As ses­sion par­tic­i­pants work through their inner­most feel­ings about life and work, and share them with their class­mates, pri­vacy is very impor­tant. Other than the small group, no one else, includ­ing prospec­tive employ­ers, should be able to reach this mate­r­ial. The Organic Groups mod­ule is an ele­gant solution.

The beauty of organic groups is that they really are organic to the site. One a reg­is­tered user has logged in, con­tent assigned to groups is trans­par­ently woven into their view­ing expe­ri­ence. Events, dis­cus­sion threads and doc­u­ments can be flagged at cre­ation to belong to one or more groups. These pieces are invis­i­ble to non-members. What’s more, the exis­tence of the group itself can be invis­i­ble to non-members. Any user can cre­ate a group and invite peo­ple of their choos­ing to par­tic­i­pate, allow­ing for a poten­tially very deep and wide net­work of sub-communities.

Add-ons to organic groups make it more flex­i­ble. Some, such as Block Vis­i­bil­ity and OG_Calendar allow the pri­vacy we needed; Manda­tory Group allows you to build a group that all your reg­is­tered users belong to, so that you can dis­play pieces of con­tent or send mes­sages to your entire readership.

Other help­ful mod­ules I installed include Com­ment, allow­ing reader com­ments on posted items; Pro­file, which in com­bi­na­tion with Views allows a direc­tory list­ing of mem­bers; Con­tact, which sets up a basic con­tact form with options to for­ward traf­fic appro­pri­ately; For­ward allows read­ers to send a page to a col­league; Event, an events cal­en­dar; Menu and Nice_Menus (for pull­down or popout menus); Search, which requires set­ting up a cron job; TinyMCE, a WYSIWYG edi­tor; and Web­Form, to cre­ate cus­tom forms such as the reg­is­tra­tion form.

Man­age­ment of all of these is done through two pan­els; an Admin­is­tra­tion set and a Set­tings set. Again, it’s not at all intu­itive what you find where, so take care­ful notes for your­self. You may not look at a given set­ting for a cou­ple of weeks, and you’ll have to dig hard to find it.

The Look

A three-column-plus-header lay­out seemed appro­pri­ate. The logo at the top of course links back to the home page, and a row of drop-down menus below allows access to top-level func­tions. The per­mis­sions set­tings con­trol which options users can see and do. For exam­ple, anony­mous users can post their resume. Logged-in users can post events, dis­cus­sion top­ics, and var­i­ous kinds of doc­u­ments — which are also con­trolled by their access level. Logged-in users also can see activ­ity in their Groups.

Mate­r­ial in the left col­umn is the admin­is­tra­tive mate­r­ial: search, logon, and con­fig­u­ra­tion options; groups that the user belongs to and a list­ing of who else is cur­rently on line; and com­ing events.

The right col­umn is for posts and infor­ma­tion about posts, such as the most recent entries, most active threads, and new topics.

Pro­gram­ming

A min­i­mal amount of tin­ker­ing was nec­es­sary to make the code do what I needed. In one case a query state­ment was badly writ­ten and need to be redone, oth­er­wise care­ful con­fig­u­ra­tion and stylesheet man­age­ment did the trick.

All-CSS

Mer­ci­fully, the Dru­pal instal­la­tion is mostly table-free (as opposed to Joomla, which I’m using on another project). It’s not per­fect seman­ti­cally — some things that are obvi­ous can­di­dates to be hx level head­lines are div classes instead — but gen­er­ally quite work­able. Almost every­thing (almost) is classed in a rea­son­able way so that a good css stylesheet can be cooked up. There are a few unclassed divs that are of unpre­dictable depth within their par­ents, and hard to get at. The color scheme in gen­eral spins off of the col­ors used in the logo.

Pho­tog­ra­phy

Ah the plea­sures of dig­i­tal pho­tog­ra­phy and Pho­to­shop. My cam­era has a nice panorama set­ting that makes it eas­ier to weave together wide land­scapes, and that’s what I used for these.

Ravine Lake out in Som­er­set County is one of my favorite spots in NJ. I dis­cov­ered it on rides with the bike club, and go there often. My daugh­ter and I were out there one day, and the sun­set was nice so I had her pop up through the sun­roof and take a series of pic­tures of the lake.

As you can see in this mode, the sky is blown out, though the col­ors of the trees come through.

In “sunrise/sunset” mode the sky and the color of the water come through beau­ti­fully, but the land­scape goes too black.

After weav­ing the first three pic­tures together to make a con­tin­u­ous flow, I used Pho­to­shops chan­nels and var­i­ous select tricks to elim­i­nate the blown-out sky. Then, I took as big a sec­tion of con­tin­u­ous tone from the col­or­ful sun­set pic, and masked it in behind the sil­hou­et­ted trees and land­scape of the first. A lit­tle blur­ring around the edges, and a nice Max­field Par­rish thing started to hap­pen (click to enlarge).

There is a series of four dif­fer­ent land­scapes that come up at ran­dom as users nav­i­gate the site. Two are from Memo­r­ial Park in Maple­wood, and one is of the Rock­away River. All have in com­mon visual ele­ments that relate to tran­si­tions, such as wind­ing paths and streams. I also put them through some very arti­fi­cial color cor­rec­tions, so that the greens were really live and vibrant, and the water was a magic-realist blue instead of brown.

The online com­mu­nity went live the evening of July 31. The next phase is to migrate users away from the Yahoo! groups, as well as to put in a per­sonal appear­ance at one of the Tues­day night ses­sions to give a tuto­r­ial as well as some encour­age­ment on using the site.

Com­ments or ques­tions always welcome.