• Rotating images for the three latest posts.
• Archive of all posts.
• News feed of stories related to human rights and corporate social responsibility.
• Easily add authors with biographies and photographs.
• User-friendly forums
• An easy way to create endnotes for research articles.
• Articles must be downloadable as PDFs.

My favorite part of this job was creating the WordPress plugin List Contributors, simply because it’s a very versatile little tool that I imagine I’ll be using on some future projects.

I also enjoyed trouble-shooting the downloadable PDFs. I really hate redundant data entry since it probably means that someone isn’t doing their job properly. The solution I came up with has the benefits of working from the same data (saves on server resources) and offloading most of the heavy lifting to someone else (in this case, pdfmyurl.com). The full explanation of the process can be found here.

This is the second site I’ve ever built for which I wasn’t asked to do the actual design and layout. I don’t know what my clients are trying to tell me.

Visit the site.

Getting the production site up and running took a little longer than I predicted due to a late-in-the-game design decision, but I’m much happier with where it wound up than I would have been.

The center-piece of the site, the portfolio slider on the front page, uses the Page Thumbnail functionality of WordPress 2.9 to make it ridiculously easy to add new items. This is unlike the slider on my front page, which is hand-crafted in Coda because I don’t want the XHTML section of my brain to atrophy.

Since there is a secondary slider on the portfolio pages, I set the thumbnail sizes in WordPress to generate the appropriate sizes so that each image only had to be uploaded one time in one place to put the correct images in both places.

The Road Not Taken

The first iterations of the design were very dark, brooding almost. Paul Lucci, my partner in crime over at Crooked Gremlins, was brought on to do the illustration work and to help with the logo. The first ideas we had matched the attitude of the site, which was way too serious.

The Metal Goddess, indicating strength

The game-board, indicating strategy

Ultimately, the client wanted a more light-hearted look, which we pulled off with a lighter color palette and brighter imagery in the slider.

The Services Section

One of the last pieces of the site to come together was the Services section. I’m still kind of amazed how it only takes one or two ideas to make a thing that seemed totally broken and unapproachable a nice thing to look at.

Paul provided the illustrations here, as well.

Visit the site

When I was asked how difficult it would be to create a live counter on the site that showed the number of minutes that the organization has given to the families it has helped, my first thought was something along the lines of “not very difficult at all.”

I mean, really. How hard could it possibly be? I knew of some simple Javascript codelets that could immediately provide a solution for a ticking clock. But, once I wrote out the actual feature list for the thing I was creating, I noticed some pretty big hurdles.

Here’s what the counter needed to produce:

• The number of minutes that have passed since January 1st of 2000, along with a ticking seconds counter.
• This number must be live, updating on the page constantly.
• Each individual number must be wrapped in its own container, with pictures of specific children behind them.
• Clicking on a number/child will bring up that child’s story.
• Supply an embeddable widget that other people can put on their blogs/MySpace/Facebook pages.

Getting the number of minutes

This was the easiest part of this entire equation: display the number of minutes that have elapsed between now and January 1st, 2000. Since the number of minutes needed to be the same regardless of timezone (this was actually a big deal), I couldn’t use Javascript. So, I wrote this extremely simple PHP script:

date_default_timezone_set('America/Los_Angeles');

echo $diff;


The time() command will always return time in Unix Epoch format, which is the number of seconds that have elapsed since January 1, 1970. The number of seconds between January of 2000 and now is simply the difference between the two variables (on line 6).

Everytime this script loads, it prints a number that looks something like this: 321178160. Originally, I had the script divide by 60 (giving me the number of minutes) and kick that out, but I realized that since I needed the seconds to tick on the page, it would have to load this server-side script every second. This would not have been ideal (actually, this is how the embeddable widget works, but it's only running the script once; it doesn't implement ticking seconds or keep the clock live).

Minutes, not seconds

For performance's sake, I had to keep as much stuff as possible on the client side. The minutes are calculated from the PHP clock script, and then Javascript adds time to it. The seconds are done entirely with Javascript, since the timezone for the seconds is irrelevant.

Parsing the Number

First thing I needed was an AJAX call to grab the number from the clock.php script. That much was easy:
$.ajax({
url: '/clock/counter.php',
success: function(data) {

}
});

Then, I needed to turn that number into minutes and wrap each digit in its own container. But, this number also had to be updated every second, which was accomplished by adding 1 to the number from the PHP script every second and then dividing by 60. Like so:

function maketime(){

}

The wrapem() function is actually a little bit misleading in its name. Really, the wraps are applied to each character when they are split into an array and rejoined in their own spans. What wrapem() does is attach appropriate numbers to their corresponding background image and link.

function wrapem(){
$(".number:nth-child(1)").attr("id","one");
$(".number:nth-child(3)").attr("id","three").wrap('<a href="/2010/02/27/meet-alia" class="clink" />');
$(".number:nth-child(4)").attr("id","four").wrap('<a href="/2010/02/27/meet-anthony-2" class="clink" />');
$(".number:nth-child(5)").attr("id","five").wrap('<a href="/2010/02/27/meet-daniela" class="clink" />');
$(".number:nth-child(7)").attr("id","seven").wrap('<a href="/2010/03/04/meet-noah/" class="clink" />');
$(".number:nth-child(8)").attr("id","eight").wrap('<a href="2010/03/04/meet-robbie/" class="clink" />');
$(".number:nth-child(9)").attr("id","nine").wrap('<a href="/2010/03/04/meet-augustin/" class="clink" />');
$(".number:nth-child(11)").attr("id","eleven");
$(".number:nth-child(12)").attr("id","twelve");

$("#one").css({background:"url(/clock/images/alex.jpg) no-repeat center center"}).wrap('<a href="/2010/02/27/meet-alex-2" class="clink" />');
$("#three").css({background:"url(/clock/images/alia.jpg) no-repeat center center"});
$("#four").css({background:"url(/clock/images/anthony.jpg) no-repeat center center"});
$("#five").css({background:"url(/clock/images/daniela.jpg) no-repeat center center"});
$("#seven").css({background:"url(/clock/images/noah.jpg) no-repeat center center"});
$("#eight").css({background:"url(/clock/images/robbie.jpg) no-repeat center center"});
$("#nine").css({background:"url(/clock/images/augustin.jpg) no-repeat center center"});
}


The Live Link Problem

Originally, I was going to use the Thickbox functionality that I had already loaded for a different section of the page to open the story boxes for the kids. Unfortunately, it didn't work, and it took me a while to figure out why. Essentially, the links weren't part of the DOM when the page loaded; they were created after the clock script had time to run and generate the numbers. In fact, as far as the DOM was concerned, these numbers were completely new every time the maketime() function ran; every single second. After banging my head against the desk for about three hours, I realized that it would be easy to write my own simple lightbox script and use jQuery's live() method to activate them.

$(function(){
$(".clink").live('click', function(){
hrefval = $(this).attr('href');
$.ajax({ url: hrefval, context: $(".entry"), success: function(data){
$("#story").fadeOut('fast');
$("#story").html(data).fadeIn('fast');
}});
return false;
});
$(".close-story").live('click', function(){
$("#story").fadeOut('fast');
return false;
});
});

By using the href attribute, I didn't even have to change the links that the AJAX was grabbing the data from.

Styling the Counter

Using the split() and join() Javascript functions let me wrap each character in a span, but the problem is that I had two commas and a colon (great name for a TV show, BTW) that, in fact, couldn't be set in their own curved box. Luckily, this number will be seven digits long for the next 10 years and change, so I was able to use the nth selector to remove the "number" class from the characters.

I set the background images for the digits using the same method. I'm sure there's a more elegant way to solve this problem, but I had to weigh how much time I had left to spend on it vs. how much the end user would benefit from some slightly improved code.

Final Thoughts

I wound up learning a lot about JSON and XSS (cross-server scripting) which wound up being irrelevant to the big counter on the home page, but vital to the embeddable one.

Also, I found out that you can embed stylesheets in Javascripts. Like so:

function loadJSON(url) {
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = url;
headID.appendChild(newScript);

loadJSON('http://andreriveroflife.org/clock/counter.php?json=?');

Obviously, the first part is easy and straightforward. For the second part, I wanted to provide them with something that would let them easily maintain a schedule of rotating shows without having to muck about in an XML file or something.

I wound up developing an increasingly robust plugin that I named Showtime. It has a pretty narrow set of real-world applications, but I still think it’s super-useful when applied correctly.

• Motivation.
  You’re more likely to do something if you know someone is counting on you.
• Feeling good.
  You’re volunteering by doing something that you wanted to do anyway (drive to the polls).
• Connecting.
  Coming together with new people, however brief and for what ever reason, is an opportunity we can ill afford to miss these days. This is especially true when it facilitates a common civic purpose, like helping people cast their ballots.

To help sort out the complexity of this project, I’ve broken it down into the major parts: The signup form,the poll locator/Google Map, the messaging system and the user matcher.

The Signup Form

As with all my projects, jQuery plays the lead role. I wanted an AJAX form on the front page for people to sign up, and I couldn’t think of any way to make all the requisite text boxes look good. Using jQuery, I was easily able to split them up into a slider that would only allow users to progress to the next step once they’ve completed the necessary bits.

We wanted to make the signup process as simple as possible so anyone could do it, so we only asked for information that was absolutely necessary;

• Rider or Driver
• Where you vote
• Display name
• Email
• Password

User-friendly signup

I didn’t want to take on the task of developing a user management system from scratch, so I decided to build the site in WordPress. By using the Register Plus plugin, I was able to create a login page that asked for all the necessary information. I then took that form and created the jQuery scrolling signup form for the front page.

Using simple hide() and fadeIn() commands, I was able to prevent users from moving ahead too quickly in the form. They couldn’t click the “Next” button until they had successfully completed the part of the form they were looking at. This proved to be essential for the poll locator, which I’ll talk about in a moment.

Aside from their status as a rider or a driver, the most important piece of information we needed was the street address of the polling place of each individual user. This brings me to…

The Poll Locator

The League of Women Voters built a database of polling places that is searchable by mailing address. They call it Vote411.Org, and without VoterPool couldn’t function.

Because we wanted to match people by their polling places, we couldn’t use something as broad as a ZIP code. Densely populated urban areas like New York City and Los Angeles simply have too many polling places for a system like that to be useful. So, I needed to create a solution that could take a variety of input styles (all uppercase, no capitalization, whatever) and create uniform outputs of polling place addresses.

By combining AJAX with a customized PHP cURL script and the Vote411.Org database, I found our answer. More importantly, if no address comes back from Vote411, the “Next” button won’t appear, meaning that particular user can’t continue. It’s a very effective way of preventing people from signing up with the wrong polling place address.

Searchable Google Map

Searchable Google Map

I had to search for quite a while before I found the answer to this, but by using a MySQL query to print out their polling place’s street address and the Google Maps API, I was able to add a searchable Google map that starts centered on their specific polling place to each user’s page.

It was important that they be able to search the area near their polling place so they could easily find good, public pickup spots. Remember, these were going to be perfect strangers arranging carpools, and people usually behave better when they know someone is watching. Also, Google provides a good set of route planning tools.

The Messaging System

Next to the cURL script that finds the polling place street address, the thing I’m most proud of creating for this project is the custom messaging system.

A big gap in the user functionality that WordPress provides is the ability to message other users. There are a few plugins out there that do it, but none of them allow for front-end access to the messaging system. I didn’t want users mucking around in the WordPress back-end, so I decided to write my own.

I want to take a moment and state that this, this right here, is why I love open-source scripting languages. If the thing you want doesn’t exist, just make it yourself.

The first thing I did was create a MySQL table specifically for messages. Every message contains its own ID, the user ID of the sender, the user ID of the receiver, and the message itself. By cross-referencing the user IDs that WordPress assigns each user, each display name is matched with the appropriate user.

To get the most out of using WordPress, I decided to look into the wp_mail() function. Turns out, you can do quite a bit with it. The most obvious is email alerts to new messages. But, by allowing users to assign phone numbers to their accounts, they can receive text messages to their cell-phones by using the email-to-text function that most carriers provide.

The User Matcher

This actually turned out to be the simplest part of the entire process. Once I had normalized the street addresses that came back from Vote411.Org, it was a simple MySQL query to print out a list of users that matched the same address. Then, running that list through a filter (so drivers only see riders and riders only see drivers) was the last step.

Moving past a beta

VoterPool is up and running, but I won’t know how successful it can be until people start trying to use it. Most of the feedback has been either positive or helpful, which is exactly what someone like me hopes for. What I’m looking forward to learning about next are things like server load, cycles and RAM.

Yes. Weird things excite me.

The old design; too blog-like for a musical group.

One of the group’s best features is, well, them. The photo rotator that I built for the first site was just too small. The new rotator, built with jQuery and updated automatically from a file directory that they can easily maintain, is much more dynamic and appealing, as well as a more significant part of the design.

A fresh look for the tiger

I went back to the drawing board for this one, allowing what I know about the group to inform more of the design choices I made. Shere Khan has been a Princeton institution since 1993, so I thought it appropriate to build a design that had a vintage and slightly wealthier kind of feel to it. The rich red leather of the logo and the buttons remind me of this old chair my grandfather had, which always makes me think of age and money.

I also wanted to reorganize the information flow of the site, after gaining a better understanding of the priorities of the group. The most important stuff (Upcoming Events, Listen to Clips, Watch videos, Have you met) now sits at the bottom of every page, making it much more accessible to a first-time visitor.

Since this was a pro-bono project (my little brother is in the group, and their previous website was simply unacceptable for a member of my family to be featured on) I had to save time wherever I could. A fantastic tutorial for building a textured website header in Photoshop gave me the idea for a wall-papered background, and I implemented a very close version of it for the final design. I’ll post the link if I can ever find it again.

The new image slider is randomized; you never see the same show twice.

I did extensive testing with Internet Explorer 6, as well as people that are browsing without JavaScript enabled. The site looks and functions perfectly under almost all circumstances.

The big back-end switch

The original site was built on the Joomla! platform, which I no longer use. On aesthetics, function and template customization, WordPress just wipes the floor with its open-source cousin. And since I was redesigning the site anyway, it just made sense to transition over to a WordPress install.

The management systems for the members, news posts, tours and photo galleries needed to be much easier to use than the ones offered by Joomla! The built-in category systems WordPress uses allowed me to design an intuitive back-end experience for the group without sacrificing front-end design aesthetics.

A fresh login

Instead of having the login form appear on every page, which is kind of amateurish, I took the opportunity to utilize one of my favorite WordPress plugins; BM Custom Login. This allowed a reinforcement of the new branding, which I will get to in a moment.

Simplified logo, reinforcing the brand.

New branding

It’s a bit misleading to say “new” branding, which implies that the group had a solid logo in the first place. Since I wasn’t able to devote any time to creating a logo, I went with the most direct option available to me; the letters “SK.” I know that the group refers to themselves as SK in conversation, so I figured I may as well go with what the people know.

To match the overall classic feel of the new design, I included the EST date of the group to lend it an air of authenticity, as if this is what the logo had always been.

Visit the site

Member features

The group wanted a more robust section for the Shere Khan alumni. With a few simple plugins, such as Page Restriction and SimpleForum, it was easy to implement. I’m interested to see what problems arise with these systems, since I know that not everyone in the group is as tech-savvy as the others.

Visit the site

It was necessary to create a visual aesthetic that synced up with their current organizational philosophy and structure.

The “wow” factor: A new kind of slider. A great deal of my professional life is consumed by people’s love of jQuery, which is awkward since I can’t lay any claim to the scripting itself. I simply put it in front of people and let them say “Whoa.”

This slider differs from the RealPolitech slider in that it uses text links at the bottom of the imagery for navigation, as opposed to vertical slats that eat up a bunch of space.

Visit the Andre Sobel site.

Deceptively simple

This site contains a great deal of content. which may not be apparent to the average user. This is the designer/developer’s job; make it look easy. If a user feels encumbered or inconvenienced by your website, they will not come back.

Any student of web design, when confronted in a moment of honesty, will tell you that they continually search for ways to make sites simpler. The two words that we hear the most in our line of business? Clean + Simple.

By way of comparison, here is a screen shot of their previous design.

The sites needs to show off not only the work that the consortium does/can do, but also the people within the organization.

“Wow” Factor: The slider on the People page. Uses jQuery and draws from dynamic posts (as opposed to being hard-coded into the template.)

Visit RealPolitech.

Creative Brief: Website for people to interact with a live event – A Gala held on the eve of the 2009 Presidential Inauguration. Also direct, provide technical support and produce content for the six hour live webcast.

This site was built on the WordPress CMS to integrate with live blogging tools such as ScribbleLive and Twitter. The webcast featured the hostess Shia Lazar interviewing several VIPs, including Art Bushkin of StarGazer.org and Dr. Steven Chu, the Secretary of Energy.

Necessary features:

• UStream feed of event.
• Live blog feed from multiple bloggers.
• Twitter integration.

Visit the LINK-live website.