Tis the Season

Figured I’d make a substantial post regarding recent webdev work. This is a collection of campaigns, with my contribution ranging from full buildouts, to design, to strategy and marketing consulting.

 

A campaign page build for WIHD

 

Year-End ecommerce campaign/Adwords – Amercian Cancer Society Greetings

 

New branding for EOY Campaign, YouTube custom channel styling – American Heart Association

 

Custom ecard Memorial/Tribute donation form – NFTE

 

Landing Microsite (one of many to come)

 

Email Appeal, Holiday Catalog email cutup and build – Save The Children

 

Holiday Email Appeal buildout – Heifer International

WebbyDevvy

 

I haven’t posted any recent webdev stuff in the past month or so. I’d like to update my portfolio with some exciting projects I’ve been working on, especially timely ones for East coast clients affected by Hurricane Sandy. But timely has not really been a theme of this blog, so instead here’s a very useful infographic for designers/developers on social media platforms to the right. Click on it to make it biiiig.

 

Also, because the graphic is so freaking tall and won’t fit into a post aesthetically, here’s a picture of a dog playing tug-of-war with a lobster.

 

The Bigtop

I haven’t posted a lot about recent webdev and other projects for some months, so here’s a quick one. I’m in the process of rebuilding the site for the Bend Circus Center. It’s a new local business that offers classes in aerial silks, trapeze, slacklining and more. The existing Spinsterz store is a go-to shop for fire dancing, stilts, and hoops supplies and the Circus Center will be piggy-backing on it.

Check on it infrequently to see what new stuff gets added 😀

Portfolio: Assorted FB Apps

Love it or hate it, Facebook is big news for the foreseeable future.

As such, it’s a huuuge opportunity for non-profits, allowing them to build advocacy, receive donations, and improve the effectiveness of existing campaigns, or events. I’ve done dozens of Facebook apps in the past, but this Longer Road post is about two sets of apps, 4 each for two clients.

But wait, I can’t take full-credit! I helped design five of them, built-out seven, and did the fb dev work. My other team members at ZuriGroup and our great clients deserve the majority of credit!  Anyway, without further adieu, these are the two great organization’s pages: Lustgarten Foundation and World Neighbors (make sure to Like them!) Also, I included screenshots below, as eventually their campaigns/links might change.

Portfolio: SteelLife

 

Got a new website to add to the ole’ portfolio. This was a fun one, a project I wrapped up over the weekend for my friend here in town, the same gal behind BD-Landscapes.com. For this site, I built out a custom mini-site for their new line of products, with a lightweight and simple look, but a lot of fancy css and javascript behind the scenes. Check out the site, and make sure to also follow them on Facebook.

Mathy Funtimes

While I usually do a bit of JS and PHP on occasion, I sometimes get thrown a doozy. In this case, it was coding up a custom form field that validates a unique checksum-verified airmile member card number. This was certainly outside my experience, but I managed it, also finally finding a use for all that math I forgot learned in high school.

Here’s a breakdown of what I did, starting with the javascript that first passes the form field through a few important checks first (also i make use of jquery in addition to vanilla javascript):

function validate_form(thisform){
var airmile = $.trim($("input[name='Field5833165']").val());
if(airmile!=''){
airmile = airmile.replace(/ /g,'');
if($.isNumeric(airmile)){
if(airmile.length==11){

 

The above code basically strips blank spaces, checks if empty, checks if the field contains anything except numerical characters (0-9) and verifies that the field is the correct length. If any of these fail, an will popup (see below).


$.ajax({
type: "GET",
dataType: 'jsonp',
data: 'num='+airmile,
jsonp: 'jsonp_callback',
url: 'https://sample.com/airmiles/airmile.php',
success: function (data) {
if(data.success==0){
alert('Your airline miles number is invalid.');
return false;
}else{
// Airline number is valid... continue
if(CheckForm(thisform)){
thisform.submit();
}
}
}
});
// prevent script form submitting when ajax is processing
return false;
}else{
// Not 11 characters
alert('Your airline miles number is invalid.');
return false;
}
}else{
// Not numeric
alert('Your airline miles number is invalid.');
return false;
}
}else{
// They didn't enter a number, continue
return true;
}
}

Above, we’re making a JSON callback to a PHP script that will run all the fancy arithmatic to validate the miles card number. It won’t even bother with the PHP unless it passed all the initial checks in the JS. If success, it procedes to submit the form, if not, it throws errors. Now here’s the PHP script, which does the fancy math:


function send_response($resp){
return $_GET['jsonp_callback'] . '(' . json_encode($resp) . ');';
}
function airmile_check_digit($digits){
$digits =(string)$digits;
$total_sum = ($digits{0}*2) + ($digits{1}*6) + ($digits{2}*4) + ($digits{3}*3) + ($digits{4}*8) + ($digits{5}*7) + ($digits{6}*6) + ($digits{7}*4) + ($digits{8}*7) + ($digits{9}*3);

 

The fun math begins! Above you see that we’re turning the digits to an array so we can access individual numbers. Then we multiply each digit in the string by a unique value, provided by the air miles card company as part of their checksum algorithm.


$divisor = 11;
$quotient = floor($total_sum/$divisor);
$remainder = $total_sum%$divisor;
if ($remainder $chk_digit = 0;
}else {
$chk_digit = floor(11-$remainder);
}
//see if check matches the final digit

if ($chk_digit==$digits{10}) {
$response = array(‘success’=>1);
//echo “Card number is GOOD

“;
}else{
$response = array(‘success’=>0);
//echo “Card number is BAD
“;
}

 

This previous step takes that large sum and divides it by 11. We then run a modulo operation to reveal the remainder, then subtract it from 11. If this number is less than 2, the check digit = 0, otherwise it will equal the check digit and be a success. That’s it! Any string of numbers should now validate the final checksum digit.


// Individual Registration
if( location.href.indexOf('/reg_new/register.asp') >0 && $("form[name='registrationForm']").size()>0 ){

$(“#Image1”).click(function(){
var theform = $(this).closest(‘form’).get(0);
return validate_form(theform);
});

}
// Individual Registration
if( location.href.indexOf(‘/donorReg/donorBilling.asp’) >0 && $(“form[name=’billingForm’]”).size()>0 ){

$(“input[name=’imageField’]”).click(function(){
var theform = $(this).closest(‘form’).get(0);
return validate_form(theform);
});

 

Lastly, we return to our JS script, where we are performing the functions that actually start this script, In this case, our Airmiles number is on a donation and a registration form, running when the submit button is clicked.

Portfolio: ChildFund/Nokero

Yet another cool site here to add to the portfolio. This one is a standalone landing page for ChildFund International and Nokero, a company that makes affordable solar lights and specializing in developing countries. For this project, I did all the design work, full site codeup, JS thermometer, and more. The campaign just started, so go donate a few bucks if you’re feeling charitable 🙂