Hodgson Marketing

How SEO is like Politics

jim — Wed, 28 Dec 2011 16:12:46 +0000

I try to wait until people ask what I think about things before I give my opinion… outside of this blog, of course. I don’t always manage to wait, usually because most of the time no one asks and my opinions are so damned good, but I do try. So, it was with great glee and much rubbing of hands together that I read an email from one of my prized clients asking what I thought about search engine optimization (SEO).

Meta Keywords: The SEO Shake Weight

I replied as honestly as I could, and tried not to ham it up too much. I used words like “snake oil,” but stopped short of words like “scam” and “frivolous,” even though the SEO/SEM marketing proposal I was asked to comment on included mention of “Meta keywords” which are the online marketing equivalent of the shake weight.

At least with a shake weight you might build up some muscles while you appear to be pleasuring an invisible gentleman. If you’re seriously employing meta keywords, which are ignored by Google, if not all big league search engines, you’re merely going through the motions with no hope of pleasuring anyone. Except, of course, for whomever is charging you for the SEO/SEM, I guess. It’s pure profit to them.

SEO: Internet Politics

It occurs to me that they’re very similar, politics and SEO, in that there are a few very important things you need to do right at the outset in order to have any hope of success.

Declare your direction

With SEO, this means it helps to get a domain name that reflects what your site is about. In politics, it means picking a party. Of course, you can always switch either later on, but you’ll lose any good will you’ve built up with Google, the electorate, or both.

Get yourself a great title/slogan

In the case of SEO, that’d be a page title that reflects clearly what your page is about. In politics, you need a slogan that people can identify with, e.g. “I like Ike” or “Newt’s family is like your family”

Be attractive!

In the case of politics, this means actual visual attractiveness. I’m not saying you can’t have a life in politics if you’re hideous, but if you want to go all the way you want to be more Kennedy than Gingrich. More Michelle Obama than, well, pretty much anyone because she’s the best looking first lady perhaps ever in my opinion.

In the case of SEO, you need to make sure your content is relevant to the links you hope to attract, and not just a bunch of gibberish with keywords sprinkled in. You have to know what you’re talking about or you might look a bit like a fool.

www.youtube.com/watch?v=WW_nDFKAmCo

So, why do I think SEO is (mostly) crap?

Feel free to yell at or correct me if I am wrong, here, but keep in mind that this is only my opinion.

Google have a deeply vested interest in serving up truly relevant links. That’s how Google gained market share back in their early days. The search options at the time were a minimum viable product (Yahoo, Lycos, AskJeeves et. al.). You got pages upon pages of results that weren’t even close. Then Google came along with a pile of relevant links for every search and took over the world. Better mousetrap!

If they allowed SEO/SEM to make as big a difference as many people claim, their search results would return whatever marketers wanted them to return, not what the customer wants to see. Thus they’d be effectively degrading their mousetrap. Google hires the smartest people in the world to make sure this doesn’t happen… and then Bing copies them.

Haha, take that! Aw cheer up, Bing, I’m only kidding.

Abandon Hope, Ye Who Continue

Beyond the important points listed above, though, when you get deep into SEO or politics you’re entering a whirling fog of jargon, baseless finger-pointing, and grandstanding. On top of which, if you’re a WordPress user, most of the SEO stuff is handled already for you. If you want to get deep, there’s a plugin called All In One SEO that I hear great things about.

Unfortunately for us as constituents, what is true of SEO is not true of politics. In SEO we have a third party regulatory body called Google, in whose best interests it is to combat disingenuousness. In politics, the professed third party regulatory bodies are motivated to perpetuate disingenuousness.

I’m looking at you, the media. Also you, actual regulatory oversight committees.

Ah well, that’s the system, I guess.

Free Vector Icons Pack

jim — Tue, 06 Dec 2011 02:08:31 +0000

I have an Illustrator file full of vector icons, each on its own layer, that I use to keep all my little drawings in. They get reused a lot, so it’s nice to have them all in one place. I figured someone out there might want to use them, so I stuck them up on SourceForge. Then I got yelled at for using SourceForge, so I moved them to GitHub.

Click here to go to the files on Github!

Now, mind you, the file contains a bunch of icons for companies that I did not draw, but use a lot. Not sure if I will get in trouble for that or not, but if anyone yells at me for it, I’ll just apologize and take it down.

Anyway, here are the ones I did draw that are included:

Mr. Alien

I drew Mr. Alien for some nifty bathroom signs. They were marked “Alien” and “Femalien.” I also put a bow on top of his head to make him into a girl alien because I am not sure how to tell if an alien is a girl or not. I do know that only girls wear bows on their heads though. I learned that by reading Mark Twain or something.

Dolla Dolla Bill Y’all

I pretty much forgot what this sign means because a bunch of bankers broke the economy and then somehow got paid hundreds of billions for their efforts. I’m not trying to occupy the Internet here, or anything, I’m just saying the whole thing is kind of retarded.

Turn On Your Heart Light

This is the exact image that I carved out of a piece of wood and then gave to a pretty girl at summer camp. Cut the hell out of my fingers whittling the thing, and she didn’t even seem to care.

Found out later she and my buddy had been out behind the cabins with one another that whole summer. I’m still mad at them both 20 years later.

Lockdown

I drew this padlock for use in a placard for a client of mine. Of course, I don’t think that modern locks have a big honkin’ keyhole in the side of them, but that’s what they call “Artistic License,” or so I am told.

A Nice Present

I think I also drew this present icon for the above client, but it never ended up getting used. How does that make me feel? Still pretty happy, I guess. I like to draw things.

Keep On Smilin’ Buddy

I drew this for a client’s web site. The people I did the work for were so happy and friendly that I wanted to make a big bright happy smiley face for them. So, I did.

None of the above is sarcastic. They are really super nice people.

Icon Party Over. Thanks for Coming!

Well that about wraps it up, folks! Hope you enjoy my vector icons.

As a side note, I often use these in Photoshop via the Smart Objects functionality. If you’re not using it, check it out. It’s kind of awesome.

How to Get a Busy Person’s Attention: Write Them a Sonnet

jim — Thu, 27 Oct 2011 14:53:28 +0000

Milton also included sonnets with his invoices.

I worked for a couple of weeks on a data visualization of which I am quite proud. The only problem is that I took on that project for a very busy guy.

He’s got a family, is an avid outdoorsman and cyclist from what I gather, and is head of a couple of different business ventures, like Guild Quality and Ignition Alley. I, on the other hand, am a single guy with no kids and only one business. I have plenty of time to come up with silliness.

So, how to get his attention? Hm. Well, why not a sonnet? Never written a sonnet. Off to Wikipedia to find out what a sonnet is, exactly.

Forsooth, What Be A Sonnet?

Our friendly local Wikipedia had this to say: A sonnet is one of several forms of poetry that originate in Europe, mainly Provence and Italy. A sonnet commonly has 14 lines. The term “sonnet” derives from the Occitan word sonet and the Italian word sonetto, both meaning “little song” or “little sound”.

Okay, that doesn’t sound too hard. The main themes I want to get across are:

I made a sweet visualization, like we talked about
I’d like you to look at it so that you can also see how sweet it is
I’d also like to send a sweet little invoice, which will then become bacon that goes into my mouth

What I don’t want to do is sound like I’m impatient (even though I am). This might be a struggle. Oh well, off we go!

O Geoff, ye captain of the Quality Guild,
 Wilt thou not gaze upon my proof of concept?
 For without said look, no man can accept.
 An invoice for these things built.
Besides, without it, where be the Guild?
 With data piled up, but no clear concept
 Of Meaning, or where it's slept.
 So no, the time is now, and request filled,
To gaze and offer notes, perhaps.
 I am proud of the visualization, see,
 And also would like to send an invoice.
I don't mean to be a man who flaps
 His gums. But I'm (again) quite proud, you see
 Of my work. So gaze upon it, for it is choice!

I’ll update this post when (if) I get a response. He may fire me on the spot, of course.

CodeGuard Design Details, The Slideshow Image

jim — Thu, 13 Oct 2011 19:49:45 +0000

Okay, yes, it’s true. I talk a lot on twitter about CodeGuard and the work I do for them. Why? Well, mostly because I like them.

One of the reasons I like them so much is that I’ve done a lot of design work for them and I feel tremendously invested in their project as a result. In fact, I have openly promised to do bodily harm to any other creatives should they get near the CodeGuard team. I’m kidding, of course. Mostly.

All I’m saying is if they got big enough to hire a creative director, I might consider applying for the gig. And that I would challenge any other applicants to combat. That’s just how design gets done, people.

Anyway, here’s a small sample of what we’ve been up to together.

The Early Days

When I was lucky enough to land them as a client back in the spring, their site looked like something this:

Early CodeGuard Screenshot

The image in the middle was actually a slideshow that rotated through several different ideas along the same lines. It was decided that we could do away with the login block on the right hand side, thereby gaining more real estate for imagery. The image area is still known as “The Slideshow” in the filenames, even though it’s now a static image.

Many iterations later, the site took the form it has today, which, as of this writing, looks like this:

CodeGuard.com as of Oct 13 2011

As you can see, the slideshow image takes up the whole space. Note that in the above example the line art comes from the talented folks at Epipheo, and some of the other details are holdovers from the fine work done by The Phuse, but most everything has been iterated over and changed by myself and the CodeGuard team.

In the intervening weeks, a parade of images have called the main slideshow area home. Here is a sample of some of the ones the CodeGuard team and I have produced. Note also that when I say that the “CodeGuard team” and I produced them, it is truly a team effort. Everyone there has great ideas and gets involved, which I like.

Some creatives get crabby about that kind of thing, but I love it. I believe my work can only improve with other people’s input.

Playing it Safe

When we first started working on new slideshow images, we were discussing ways to get across what CodeGuard had to offer its customers. They back up web sites, so I liked the idea of using a safe. Here’s a slideshow image that incorporates that idea.

You can see here that the corners have been burned with the burn tool. I love that vignette look, probably because I have watched too many episodes of Top Gear, and their video people use this technique on almost everything they film. Here’s an example, featuring Ken Block driving like a crazy person. Check out how dark the corners are. That’s no accident, folks.

www.youtube.com/watch?v=lFF2bkiHNVQ

I always apply the vignette by hand, corner by corner, rather than using a filter. You can see it at work in the most recent screenshot above as well. I think it is a subtle way to make an image look slightly more interesting. I originally saw Kurt Rampton do it, I think, and have been doing it myself since.

Rise of The Time Machines

After the safe did a brief stint in the top spot, the CodeGuard team moved more in the direction of using a time machine to emphasize how their service let customers recover from mistakes. That gave rise to many a new image. Perhaps the most popular of these was the DeLorean image, which I turned into vector art using Illustrator’s live paint and live trace features.

As you can see, CodeGuard were starting to get some national press at this time, having just won the TechCrunch Distrupt audience award, so I incorporated the page peel in the lower right to find space for the press logos. In the current site, they have been moved to a whole area of their own because CodeGuard has gotten way too much media attention to fit in a peel.

Nice problem to have, eh?

Here’s another variation on the time machine theme, this time with a deep space twist. I used some images from the Hubble Deep Field project, but used Photoshop’s pinch tool to make them appear to be sucking inward in the direction of the logo, as if the logo were a black hole.

There’s also a subtle nod here to a certain fruit company’s imagery, which was reflected in the filename for this image: “tm-fruity.jpg”

Of course, I was too excited about my safe drawing to let it die so easily, having spent a couple of hours in Illustrator on it, so I brought it back for when already-logged-in users visited the home page.

So, that’s a few of the many cool things I’ve gotten to do for the folks at CodeGuard. I also designed a tee shirt for them which has been very popular. In fact it’s been stolen a few times from their trade show booths!

HTML5 Map Visualization, a HowTo

jim — Thu, 13 Oct 2011 16:48:20 +0000

What could be more boring than data? Ever seen a huge long list of numbers, sliding down into infinity? Horrible! Forget about a glass of wine or a sleeping pill, friends. If you are having trouble drifting off, I suggest reading a spreadsheet.

Of course, analyzed data can be crucial, but doing the analysis is a complicated process best left to mathematicians locked in a basement with a couple of computers and a prodigious supply of coffee. Even then, the analysis is usually pretty hard to understand.

Every now and then, though, someone comes up with a pretty way to view data, and it can be both informative and fun to look at.

The Walmart Visualization

One of those great convergences of data and design came with the Walmart Visualization by Flowing Data. Click and watch the animation. Pretty neat, huh?

That was forwarded to me by a client of mine with the question “Can we do this?”

Unfortunately, in animal kingdom programmer rankings I come in somewhere between an adolescent dachshund and the North American Blue Heron, as depicted in the graphic below.

I also suffer from high self esteem, however, so I decided to give it a try anyway.

The first clue, Tile 5

As I have stated previously, I would much rather lie down in traffic than work with Flash. I’d also probably rather spend a day wearing underpants made of pine cones, but that is neither here nor there.

What is both here and there is that I wanted a HTML 5 way of reproducing the FlowingData visualization. The first clue I had that this could be done came from a library called Tile5, even though I have no idea what Tile5 does.

I did, however, see this demonstration on their page which looked a lot like what I was trying to achieve. Unfortunately, the code was too hard for someone of my level to comprehend and I never quite got it to work despite the expert help of Tile5 mastermind, Damon Oehlman.

From his example, though, I learned about something called CloudMade, who have what they call a Web Maps Studio.

The Map Takes Shape

That’s when things started to take off. Check out my proof of concept code. Mind you, it has to shovel 10,000 lines of data into memory, so it takes a few seconds to load:
http://hodgsonco.com/map/poc.html

As you can see, I only need two javascript libraries loaded to get going:

13
14

Then, in the body of the html document, I declare a div with the id mapContainer. There’s also a div in there with the id “date” which I am using to output the date information as the visualization runs.

That code alone will produce a blank map centered on the US that can be zoomed and dragged just like Google Maps.

Speaking of Google Maps, you might think they’d have an API for creating cool visualizations like this. You might even be especially disappointed in them when they don’t have said API and you are a stockholder who desperately wants their stock price to rise. No such luck, lunch meat.

You want dots? We got dots!

From there all I had to do was slap some dots on the map. I had a huge list of dates with zipcode information to work with, which are the dates that an email sent by my client was opened. My friend K.C. Young of CodeGuard helped turn that zipcode data into latitude/longitude data, which Cloudmade can use to place a marker on the map.

I discovered I could also specify my own image to use as a marker, so I made a mostly-transparent white dot for this purpose. In this way, I could mark the events and also show how they clustered up in certain areas.

Here’s how the code works. First of all, I wanted to step through the huge list of opens (10,000 records) by day. I used setInterval() to do this.

  
  <script type="text/javascript">
  var i=0;
  var currentdate = 0;
  intid = setInterval("stepthrough()", 250);

That fires the following function 4 times a second, which we use to gather up all the events for a certain date.

  function stepthrough() {
    //figure out first date.
    if (currentdate == 0) { // we've not been run before
      currentdate = opens[0]["date"];
    }
 
    while(currentdate == opens[i]["date"]) {
      addpoint(i);
      i++;
    }
 
    //set the date for next iteration
    currentdate = opens[i]["date"];
    jQuery('div#date').text(currentdate);
 
    if (i>=5000) {
    //if (!opens[i]["date"]) {
      console.log("Clearing interval");
      clearInterval(intid);
      jQuery('div#date').text("Limited at 5000 records")
    }
  }

Each time the function above finds a matching date, it fires this function to add a point to the map. The end result is that all the points that match display pretty much simultaneously.

  function addpoint(index) {
    var myMarkerLatLng = new CM.LatLng(opens[index]["latitude"],opens[index]["longitude"]);
    console.log("I: " + index + " LAT: " + opens[index]["latitude"] + " LONG: " + opens[index]["longitude"])
    var icon = new CM.Icon();
    icon.image  = "http://hodgsonco.com/map/transdot.png";
    //icon.iconSize = new CM.Size(32, 32);
    //icon.iconAnchor = new CM.Point(16, 32);
    var myMarker = new CM.Marker(myMarkerLatLng, {title: opens[index]["date"], icon: icon});
    map.addOverlay(myMarker);
  }
 
  script>

I think the end result looks nicer this way, but I also let it run as fast as it wanted to a few times and the end result was that my new 17″ MacBook ground to a halt before all 10,000 records were displayed.

CodeGuard’s Hiyah Tee Shirt

jim — Mon, 03 Oct 2011 20:59:54 +0000

One of my best and most favorite-est clients is local Atlanta startup CodeGuard. They’re great people who have been really easy to work with while still challenging me. When they mentioned that they were interested in a new and different tee shirt design, I knew I wanted to do something cool.

Now, I am a huge fan of MailChimp‘s designs and user experience. I took a short tour over there a few weeks ago, given by my friend Ron Lewis, their creative director. During that tour, I snagged some sweet MailChimp goodies, not least of which being a super comfortable tee shirt with a great off-center design.

That tee, as well as the Highgroove tee, inspired and emboldened the CodeGuard team to get a little bit trans-mundane with their tee shirt. So, with excitement in the air and free license to let my imagination run wild, I set to work.

My first attempt, an ASCII knight. He fell on his own sword.

Hokusai can you see

A lot of the imagery I’ve used for CodeGuard to date has been either things that represent security, like safes and locks and shields, or the time machine images which stress their ability to restore backups of a web site. I wanted to do something less industrial and with a little more spirit this time. I wanted to use something that had a little more soul.

That’s why I tried the ASCII knight at first, but I just couldn’t get it to look quite right. Using too few characters made him obscure, and using too many made the ASCII joke get kind of lost. So I abandoned him. Sorry Mr. Knight. Sometimes my first idea is not the best.

From there I decided to try some Hokusai-style imagery. I’m a huge fan of “The great wave off shore of Kanagawa,” with its ubiquitous white-foamed waves dwarfing fishing boats. I say “ubiquitous” because you can see those very same white-foamed waves crashing to and fro on nearly any tattooed hipster’s forearm in Atlanta nearly 200 years after it was painted.

Still, I love the style, so I searched the Library of Congress’s images, which are public domain, for something neat. I got lucky and found a samurai image I really liked, so I grabbed it and pumped it through Illustrator’s Live Trace. Here’s what I ended up with:

He’s pretty awesome, but he needs a little branding. How about a shield? Perfect, since CodeGuard’s logo is a shield, but I wanted his shield’s style to match his overall look. So I drew something that looked suitable:

Now we’re getting somewhere. From there, I just put him over a red background, whipped up some of those nearly-ubiquitous light rays, then beat them up using various brushes in Photoshop. I also found a pretty cool font that seemed to match the look okay known as Yama Moto. I used that to add the CodeGuard name on the left, and voila!

Everyone liked the design, so it went off to the printers, and was immediately shipped from there to a conference. I’m told it was a big hit with everyone at the conference. In fact, it’s so popular someone lifted the display model from CodeGuard’s booth at the show. ~~Worse yet, I haven’t even gotten my hands on one.~~

Oh well, at least they are well-received. What more can someone ask for their work than for it to be prized?

Update!

I now have my very own Hiyah tee shirt, I’m proud to say, and it’s been lifted from yet another trade show display table, though these two facts are unrelated, I promise.

The Great jQuery Interactive Map Saga, a HowTo: Part Two

jim — Mon, 26 Sep 2011 18:11:12 +0000

Frodo, delighted upon hearing that he'll never have to develop Actionscript ever again.

I am on a quest. Yes, a great and epic quest to construct an interactive map for my client that is both lovely and editable from within WordPress. In Part One I covered the arduous task of using jQuery plugins to make an imagemap do some things it was never designed to do. Now we forge onward, and make our content easy to update!

“But Jim,” you might be saying, “how in the name of Frodo are we going to pass information back and forth from WordPress to javascript?” Still your hearts, friends. We will get there in due course.

It goes without saying that some of the weaker developers will be killed and eaten along the way, but the strong among us will prevail.

Step One: Getting the correct information from WordPress

This is going to be kind of specific to my application, but I’m going to go over it anyway. It’s specific to me because my client is using the Genesis theme framework from Studiopress, and the AgentPress child theme on top of that.

So here’s what I did to get the posts I needed:

    // load WordPress information into an associative array
    var lots = 
      // Now make the JS array happen
      $lots_query = new WP_Query( array('category_name' => 'properties', 'posts_per_page' => -1 ));
      $x=0;
      $lots_data = array();
      while ($lots_query->have_posts()) : $lots_query->the_post();
        /* get custom agentpress data. This is stupefying */
        $ap_options = array();
        for ($i=1;$i<3; $i++) {
          for ($n=1;$n<11;$n++) {
            $label = genesis_get_option('features_1_col'.$i.'_'.$n, AP_SETTINGS_FIELD);
            $name = '_features_1_col'.$i.'_'.$n;
            $value = genesis_get_custom_field($name);
            //print "\n\n\n\n";
            $ap_options[$label] = $value;
          }
        }
        if ($ap_options['Site:'] && $ap_options['Lot Number:']) {
         $lots_data[$ap_options['Site:']][$ap_options['Lot Number:']]['title'] = the_title('','',false);
         $lots_data[$ap_options['Site:']][$ap_options['Lot Number:']]['text'] = get_the_post_thumbnail($lots_query->ID, array( 75,''), array('class'=> 'tipcontent')).get_the_excerpt();
        }
      endwhile;
      echo json_encode($lots_data);
    ?>;

If you’re just using regular WordPress, you can get your post info however you like. As you can see from my snarky comment at line 8, I’m none too pleased with the kludgy nature of this solution, but as someone who learned to write code in PERL, I’m not that bothered.

The important bit is that I constructed myself a multi-dimensional array in PHP and then used PHP’s hand-dandy json_encode() function. I didn’t even know that existed and would totally have constructed a js array by hand had Jon Manuzak not alerted me to it. Thanks Jon!

By the way, do you guys still say “kludge?” I’m 37 years old now. I’m no longer too hip with what the kids are doing. Clue me in, here, skinny jeans.

Step Two: Refer to your JSON data in the javascripts

Now, this JSON business may sound fancy… perhaps too fancy for someone who might, say, stare at a computer for a significant portion of the day wearing only his underpants. In truth, it’s just a fancy name for the javascript version of what I’d call a hash or an associative array.

Here’s what my data looked like:

var lots = {"Punta Penca":{"5":{"title":"Lot Number 5","text":"\"75\" height=\"75\" src=\"http:\/\/lascatalinascr.com\/wp-content\/uploads\/2011\/09\/punta-penca-views-150x150.jpg\" class=\"tipcontent wp-post-image\" alt=\"punta-penca-views\" title=\"punta-penca-views\" \/>Lot 5, like all Punta Penca lots, is among the most beautiful plots of land in the world. The views will astonish and amaze."}}};

…and here is how I referenced that data:

     var lottitle = 'Lot Number ' + jQuery(this).attr('alt'); 
     var lotnumber = jQuery(this).attr('alt');
 
     if (lots && lots["Punta Penca"] && lots["Punta Penca"][lotnumber] && lots["Punta Penca"][lotnumber]["title"]) {
       lottext = lots["Punta Penca"][lotnumber]["text"];
       lottitle = lots["Punta Penca"][lotnumber]["title"];
     }

So I just referred to every level of data with its name in brackets. Such is the magic of JSON.

All is Bliss on the Intertubes

So that’s a wrap for Part Two, friends. Remember, you can always go back to Part One to see how I built the map to begin with, and you can always get in touch with me if you have questions.

I’ll probably have wrong answers, but I’ll give ‘em a shot anyways.

Stay tuned for Part Three, in which I add even more areas of information and things get seriously fancy!

WordPress Plugin Promiscuity

jim — Thu, 22 Sep 2011 12:34:08 +0000

This power strip is a complete whore.

WordPress’s plugin capability reminds me a lot of human sexuality. A web site, much like a person, has needs that require cooperation to fill. Sure, a human’s needs might be a touch more, shall we say, embarrassing than a site’s need to list its most recent posts, but ultimately there’s a want that is getting indulged.

One can take it too far. Sometimes, perhaps drunk on the vapors of pleasure or, more likely, malt liquor, WordPress users install plugin after plugin.

Have you seen my Barry White albums?

“Oh, yes!” they cry. “Jetpack my stats! Akismet my spam comments! All-in-one my SEO!”

These three are well known friends to WordPress, but what if temperatures run higher still? Darker, less-supported plugins may get installed. The pleasure could mount endlessly upon itself. It could roll like a great wave, gathering speed, crashing now on the beach again and again! Nirvana! Xanadu! The Jersey Shore!

And that’s when things grind to a halt, friends: when promiscuousness leads us to that one bad apple.

At this point on TV some ominous chords would be played, and the screen might go all black and white

Now don’t get me wrong. It’s not the numbers that get you, per se. It is possible to be quite the little strumpet without ever having a problem, but in order to live that life one has to be very careful, and very well-informed. More careful and more well-informed than perhaps most of us are willing to become.

Ryan Imel writes in WP Candy:

…plugins are arguably the best part of WordPress. To convey that they are dangerous in large numbers is to do a disservice to the community itself.

It’s true, plugins are great when they fill a need, but it’s also true that the more you have, the more likely you are to have a problem. You won’t know which one is going to cause that problem until it’s too late. We don’t want to go to Too Late Town. We want to stay in Justrightville.

Keep your hands to yourself!

Let’s be careful out there, friends. Let’s exercise a measure of caution, let’s keep ourselves informed, and let’s do our best to keep embarrassing photos of whatever we do get into off the Internet.

ATL Beer List

jim — Fri, 16 Sep 2011 20:56:42 +0000

I spent some time this morning working on my friend Gregg Rothmeier’s passion project, the ATL Beer List.

I like the Google policy of spending 20% of an employees time on stuff they’re interested in, so I try to work on projects like that myself. I also like beer. I mean I really, really like beer.

Of course, I’m also interested in getting as much experience as I can working on designs for Ruby on Rails. I’m getting more and more familiar with how those projects work, I’m happy to say. In fact, I did a little debugging work on the migration tables for this one.

It was really easy stuff, mind you. A fish could have done it, if only someone would invent a fin-friendly keyboard. I just checked Google to see if anyone had, by the way. Doesn’t seem like it.

Anyway, the Beer List is a project that needs a few more little details, but unfortunately I had to break away around lunch to work on some more financially remunerative projects lest I find myself homeless and asking Gregg if I can move in with him for a few weeks.

The Great jQuery Interactive Map Saga, a HowTo: Part One

jim — Thu, 15 Sep 2011 19:43:18 +0000

One of my amazing clients is in the real estate business, which is great. After all, they say that everyone should get into real estate because there’s only so much real estate to own.

Tell that to those wacky Japanese or the fun lovers in Dubai. Those guys construct islands like I scramble eggs.

My clients asked what I thought about coming up with an interactive map to show the placement of their home sites. Google Maps sprang to mind, but as the development in question is new, and the satellite images for it were taken in the dry season, it wouldn’t do. After all, it is important to look our best. This is why I campaign tirelessly to have all photos that show my love handles removed from Facebook.

Death before Flash

Hey, instead of using Flash, let's lie down in the street.

For this application I wanted the ability to highlight each property on mouseover, and I wanted to be able to show popups with further information. Above all, I didn’t want to use Flash. In fact, I’d rather punch myself directly in the gut than develop a Flash application, and I punch pretty hard.

That left jQuery. Now, I’m not much of a programmer, but I think Javascript is painful and annoying, kind of like air travel. Trusty jQuery, though, is like having a cocktail on your flight. You still have to go through some hassle, but it’s a little easier to bear.

Looking around a bit on yonder Google netted me this article from the fine folks at GetHifi. It was slick, but not exactly what I wanted. Every other article on the Internet seemed to link back to this one, as well.

So, like countless others before me, I descended into the nerd mines and began a-hackin’.

Abhi Singh to the rescue

The first promising nugget I found was on the web page of Abhi Singh, who had a sweet little map of India that did some map highlighting and had a tooltip as well. Again, it wasn’t exactly what I wanted, but it was getting close. He also has a little javascript tool that will help you make your AREA coords.

Speaking of AREA coords, even though I have taught a class on Dreamweaver and know that it is as stupefying as any modern software can be, I used Dreamweaver to make my image map, because it’s installed on my computer for some reason. Hope springs eternal, I guess.

I was punished for that hope.

Step one: Make an Image Map

Mind you, it has been many a long year since I even thought of making an image map, but in this case it seemed like the best idea. The properties in question weren’t square, though, and I wanted the thing to behave nice-like, so I thought that polygon-shaped image maps were the key.

Here are my polygonal image map shapes all laid out in Dreamweaver. The light blue areas are them.

That looks like this in code form:

And here’s how Dreamweaver punished me: every time you make a new polygonal image map area thingy, you see this message, which you then have to click on to dismiss. Yeah. Every frickin’ time.

Hey, look, I am all about compliance and accessibility, but do I really need to see that message for each and every shape I make? Jeez! OH well, I got through it.

Step Two: maphilight

The next phase of this Saga has a name. Yes, a beautiful name, as though from the lips of Venus herself: maphilight. Okay, I guess it’s not that fancy, but what it does is. See, it takes your handy-dandy image map you made and highlights each AREA in whatever way you tell it to. Impressed? You should be.

All you have to do is download the little js file and load ‘er up in your header like this:

Then tell the magical gnomes that live in your computer that they should use that script on the image map in question like so:

<script type="text/javascript"> 
jQuery(function() {
	jQuery('.map').maphilight({
	strokeColor: '00ff00',
	strokeWidth: 2,
	neverOn: false,
	groupBy: false,
	wrapClass: true,
	shadow: true,
	shadowX: 0,
	shadowY: 0,
	shadowRadius: 6,
	shadowColor: '000000',
	shadowOpacity: 0.8,
	shadowPosition: 'outside',
	shadowFrom: false
	});
	});
script>

There are some extraneous options listed above that I used for my purposes which you can ignore, but I’ll leave them in in case someone else wonders how to use settings other than the defaults. It took me a bit of tinkering, but as I say, I am a crap programmer.

Anyway, the good news is we’re getting close. Like an old man with gross ears, all we need is a qtip!

Step Whatever I’m On Now

To get the tooltips, I used a plugin called qTip. The developers of qTip are very smart, and also very excited to make sure we all know that qTip version two is coming out and version one will soon be obsolete.

Okay, well, I guess I might be willing to test out some experimental software. After all, what could go wrong, right? Oh God!

This being a production site, I just decided to stick with version 1. In the end it worked out really nice like.

Once again, I inserted a bit of code to let my computer gnomes know that they needed to get off their lazy butts and do some work already. I’m not running a day care center here, after all, you freakin shiftless gnomes.

<script class="example" type="text/javascript"> 
// Create the tooltips only when document ready
jQuery(document).ready(function()
{
   // Use the each() method to gain access to each elements attributes
   jQuery('area').each(function()
   {
      jQuery(this).qtip(
      {
         content: {
            text: 'Punta Penca lots are among the most beautiful parcels of land in the world.',
            title: 'Lot Number ' + jQuery(this).attr('alt'), // Use the ALT attribute of the area map
         },
         style: {
            name: 'cream', // Give it the preset cream style
            border: {
               width: 0, 
               radius: 4 
            }, 
            tip: true // Apply a tip at the default tooltip corner
         },
         hide: { fixed: true, delay: 500 }
      });
   });
});
script>

If you have any questions about the qTip options, just saunter on over to the qTip documentation. It’s very well done. Nice work, qTippers!

Conclusion!

And that, as they say, or would if you paid them enough, is that. The finished product looks something a little bit like this:

Notice that lot number 27 is highlighted, and there’s a sweet corresponding tooltip looking thing. With the options I have set for qTip, I can even put some clicky links and whatnot in the tip window if I want to.

Update! Part Two now exists (and is awesome)

Part Two is now complete. Go forward and see how I hooked all this madness up to WordPress!

Now get back to work!