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

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>

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.

33
34
35
36
37
38
39
40

  <div id="mapContainer"/><div id="date"></div></div>
  <script type="text/javascript">
 
    var cloudmade = new CM.Tiles.CloudMade.Web({key: 'GET YOUR OWN API KEY FROM CLOUDMADE', styleId: 999});
    var map = new CM.Map('mapContainer', cloudmade);
    map.setCenter(new CM.LatLng(37.16, -96.68), 4);
 
  </script>

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.

42
43
44
45
46

  <script type="text/javascript" src="zipsnlats.js"></script>
  <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.

47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

  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.

69
70
71
72
73
74
75
76
77
78
79
80

  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.

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

“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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

    // 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<!-- BLARGH $label $name -->\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:

1

var lots = {"Punta Penca":{"5":{"title":"Lot Number 5","text":"<img width=\"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:

1
2
3
4
5
6
7

     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!

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<img src="puntapenca.jpg" width="600" height="477" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="poly" coords="522,40,552,54,554,64,547,83,533,84,509,65,514,63,509,56,515,48,515,36" href="#" alt="5" />
  <area shape="poly" coords="497,65,522,87,517,89,511,92,506,97,502,103,498,109,493,110,486,106,485,95,484,74,496,66" href="#" alt="7" />
  <area shape="poly" coords="459,83,461,83,474,84,477,119,442,114,445,97,460,78" href="#" alt="9" />
  <area shape="poly" coords="441,116,475,121,476,135,466,142,457,151,424,134,430,127,438,123,441,116" href="#" alt="11" />
  <area shape="poly" coords="421,139,455,156,447,173,420,170,412,159,413,151,422,139" href="#" alt="13" />
  <area shape="poly" coords="426,176,447,179,435,209,413,207,414,201,412,193,415,186,419,178,425,179,426,175" href="#" alt="15" />
  <area shape="poly" coords="423,219,443,220,425,256,398,239,396,235,398,226,404,222,408,217" href="#" alt="17" />
  <area shape="poly" coords="393,242,394,244,397,242,422,256,409,284,377,265,391,242" href="#" alt="19" />
  <area shape="poly" coords="374,267,407,286,402,296,404,313,361,289,361,282,367,275,371,272,374,267" href="#" alt="21" />
  <area shape="poly" coords="337,341,318,345,299,357,284,321,288,319,298,322,302,319,314,331,326,338,337,340" href="#" alt="25" />
  <area shape="poly" coords="307,314,304,300,312,292,289,269,255,284,274,300,283,320,287,318,298,321,302,318,306,314" href="#" alt="27" />
  <area shape="poly" coords="315,258,334,250,338,258,354,270,351,277,349,284,349,291,350,297,351,302,352,310,350,318,340,321,324,295,314,258" href="#" alt="20" />
  <area shape="poly" coords="340,249,340,252,358,266,369,257,383,235,363,226,357,243,339,249" href="#" alt="18" />
  <area shape="poly" coords="376,199,398,210,393,212,390,217,388,220,386,225,385,230,383,234,363,225,376,200" href="#" alt="16" />
  <area shape="poly" coords="400,201,378,191,397,157,405,165,407,170,408,174,406,178,402,182,401,185,400,190,400,194,400,200" href="#" alt="14" />
  <area shape="poly" coords="440,84,415,80,415,114,426,116,431,112,432,107,433,101,434,96,437,89,441,84" href="#" alt="12" />
  <area shape="poly" coords="423,79,428,71,432,64,436,60,441,58,449,54,457,52,462,54,465,57,469,62,471,68,466,67,460,67,455,69,452,72,447,77,447,76,441,83,423,80" href="#" alt="10" />
  <area shape="poly" coords="362,291,403,315,402,329,345,340,343,337,349,335,354,332,357,328,361,324,363,319,364,313,364,306,363,301,362,296,362,291" href="#" alt="23" />
</map>

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:

<script type='text/javascript' src='/things/n/stuff/jquery.maphilight.min.js?ver=1.1'></script>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<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: '<img class="tipcontent" src="punta-penca-views-s.jpg">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!

In fact, I like them so much that I applied for and have been accepted to their “Certified Partner Program,” so I get a little slice of cheddar whenever I refer them.

The only thing that bugs me about BigCommerce is how zealous their control panel is about logging me out. If you’re idle for any length of time, say, because you’re editing HTML in another window, the BigCommerce control panel gets mad and takes its toys and goes home. I guess it’s a security measure so you don’t leave the window open at a public library and end up having some homeless guy’s poems for sale on your site, but it’s mildly annoying.

Just recently, one of my clients who is using BigCommerce asked if each of their product categories could be styled differently. It took me a little work to figure it out, but in the end it was not too tricky. Here’s how I did it.

First of all, the whole process is streamlined heavily by three tools I use very often. Use these:

1. Chrome’s developer tools
2. Fetch for Mac
3. Textmate

PC people, I don’t know what to tell you. There are probably similar tools that match your unnatural alien ways, but I don’t know what they are.

1. Download BigCommerce Template Files

BigCommerce makes a zipfile available that is a big pile of all the template files you might need to change the look of your store. Just click on the word “Design” at the top of your control panel once you’re logged in, and then click the “Download Template Files” button.

Click to Embiggen

2. Log Into FTP

Click to Embiggen

Now you gotta get logged into your BigCommerce FTP site. To find that information, log into your BigCommerce control panel, then click on Settings and FTP Settings as shown in the image at right.

Once you do that, you’ll see a screen that looks like the below image, except your info won’t be blurred out. If it is, you might want to clean your computer screen and maybe stop eating Spaghetti-O’s so close to it.

Click to Embiggen

3. Upload a copy of category.html

Once you unzip the template files, make a copy of category.html. Call it whatever you want, but make sure it has an underscore as the first character, e.g. _custom_category.html. Now take that copy and upload that to your FTP site. Put it right into the directory that you are in when you log in.

Now just edit that sucker using Fetch and Textmate, and add an ID to the body tag like this:

1
2
3
4
5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
%%Panel.HTMLHead%%
<body id="whatever"><!-- LOOKEY HERE. SEE WHAT I DID THERE? -->
The rest of your template goes here.

What this does for you is it allows you to scope your CSS, a trick I learned from Chris Kelly, who has a great big brain. Like, way bigger than mine.

4. Install your custom template

Select your awesome template on the category page. Get there by clicking Products, then Categories, then Edit next to the proper category like so:

Click to Embiggen

And then select your template here:

Click to Embiggen

Aw yeah, now we’re ready to hack some CSS like it was our birthday, or something.

5. Make a custom.css file

Now all you have to do is upload a custom CSS file in the Styles directory of your BigCommerce FTP site, and then get jiggy with it like so

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/* Mmm, Beer! */
body#beer {
background:  url(Background.jpg) 0 0 repeat-x;
color: white;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
body#beer #Wrapper { border-top: 1px solid white;}
body#beer a,
body#beer .ProductPrice, 
body#beer .ProductList em,
body#beer #TopMenu li div,
body#beer #Footer p, 
body#beer .SortBox {
	color: white;
}

And that’s all she wrote, friends! Enjoy the fame and wealth that will pour into your life thanks to Internet Commerce!

I came across AgentShield in the course of editing a WordPress site for one of my clients. The client in question is a real estate development company with some additional dabblings in vacation rental.

AgentShield is basically a wrapper around a developer’s web site which hides the developer’s contact info, or replaces it with the contact info of a sales agent. They do this because a real estate agent doesn’t want to show their client the developer’s web site, then have that client contact the developer directly and thus cut said agent out of the deal.

This way, the real estate agent doesn’t have to develop their own marketing materials about every new development. They can use the materials on that development’s site without fear of losing their leads.

Unfortunately, in my case, I was not aware of any of this, so when I made some changes to my clients site, I made them without adding new AgentShield code. Oops!

Thankfully, AgentShield employs a very helpful gentleman by the name of Jason Dolle, who sent me exactly the code I needed to fix everything up. Basically it consists of a div with a special class to wrap around anything we might want to hide. The div looks like this:

1

<div class="agentshield_hide"></div>

They also have tags for adding contact forms that go to the agent and so on, but I’m going to concentrate on the hiding in this case.

So, one problem was that I added a MailChimp WordPress widget to the sidebar. Everyone knows that MailChimp is awesome, but what’s not necessarily awesome is having a lead sign up to an email list they didn’t mean to. So, the block with the MC Signup widget needed to be hideable.

I made a brand new widget area for it. Note that I’m using a child theme for the Genesis plugin in this case, but regular WordPress should be pretty similar. Only the hook names should change (e.g. register_sidebar

1. I added the new widget area in the functions.php file. Note that there are before_widget and after_widget considerations for AgentShield.

1
2
3
4
5
6
7

genesis_register_sidebar(array(
        'name'=>'Hidden Sidebar',
        'description' => 'This sidebar will be hidden by AgentShield',
        'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>',
        'before_widget' => '<div class="agentshield_hide"><!-- Begin Agentshield--><div class="widget"><div class="widget-wrap">',
        'after_widget' => '</div><!-- End AgentShield --></div></div>'
));

2. I added that new widget area to the sidebar.

1
2
3
4

add_action ('genesis_before_sidebar_widget_area', 'hidebar');
function hidebar() {
        dynamic_sidebar('Hidden Sidebar');
}

3. I added my MailChimp widget to the new sidebar on the widgets page.

Aaaand bingo! That fixed ‘er all up. Now my client is happy, their agents are happy… everyone’s happy! Easy as pie!

www.youtube.com/watch?v=wvWG6NnPn2Q

I’ve only used the ERB (Embedded Ruby Templating) package so far, so I’ll concentrate on that.

Installation
First check out the official guide on layouts and rendering here:
http://guides.rubyonrails.org/layouts_and_rendering.html

Also let me direct your attention to this guide on installing rails on Nettuts. It says it is for designers, but it looks like an install guide for sysadmins. If all that text frightens you as much as it does me, let me just go ahead and tell you that you’re going to be doing a lot of command line work.

Obviously, the best possible answer to this problem is to hire someone to do the text editing for you so you can concentrate on things like horn-rimmed glasses and the Helvetica typeface, but sometimes you just have to get your hands dirty your own self.

If you’re down with the CLI — yeah you know I, uh.. am! –then let’s move on.

Tip Number One: Rails Layout
First of all, just be aware as you’re trying to apply your awesome design that the files you’ll need to edit are all over the place. I assume you’re already hip to either Firebug for Firefox and/or the Chrome Developer Tools. These will help show you what styles are being displayed for a given element, but you then have to track down in the code where that stuff is generated.

As you can see from the Nettuts tutorial, there are a lot of directories going on, but if you’re just trying to apply a design you’re going to be mostly concerned with the /app/views/layouts directory.

The stylesheet and javascript files are located in /public/stylesheets/ and /public/javascripts/ respectively, but when its time to get down with the actual layouts, things get tricky

Clues to Rails Files
Figuring out where to put CSS clases or IDs onto HTML tags so you can apply your styles can be a bit of a pig, but there are some clues. I referred often to the terminal window where I started rails server on my local machine. Every time you refresh the site, rails will tell you exactly what it is rendering from what files, like this:

1
2
3
4
5
6
7
8
9
10

Started GET "/user_session/new" for 127.0.0.1 at Tue Jan 11 12:20:21 -0500 2011
  Processing by UserSessionsController#new as HTML
Rendered layouts/_header.html.erb (6.2ms)
  SQL (0.6ms)  SELECT COUNT(*) AS count_id FROM (LOL BORING SQL)) AS subquery
Rendered layouts/_navbar.html.erb (19.6ms)
Rendered layouts/_message.html.erb (2.7ms)
Rendered layouts/_noticeerror.html.erb (1.8ms)
Rendered layouts/_footer.html.erb (0.8ms)
Rendered user_sessions/new.html.erb within layouts/user_session (73.4ms)
Completed 200 OK in 243ms (Views: 83.5ms | ActiveRecord: 0.6ms)

If you’re familiar with templating, you’re straight away going to be looking for the master template file that tells everything where to be. Most of the time you’re going to have a file called /app/views/layouts/application.html.erb which is the one you’re looking for, but in this case, as you can see from line 9 above, there’s a different master layout file being used. Check this out:

9

Rendered user_sessions/new.html.erb within layouts/user_session (73.4ms)

See how that says “layouts/user_session” instead of “layouts/application”? That’s because the controller, mentioned on line 2 of the server output, has this in it:

1
2

class UserSessionsController < ApplicationController
  layout "user_session"

You use controllers this way to tell ruby what layouts to load based on what got requested. Sneaky, huh? Now, let’s talk about partials.

I’m partial to partials, and so is the marshall
Those files listed like this are partials:

3

Rendered layouts/_header.html.erb (6.2ms)

You can tell because it has an underscore as the first character in the file name. You can also tell because you’ll see this in the master layout file that called it:

<%= render :partial => 'layouts/header' %>

A partial is a bit of layout code that you know you’ll be using again. You don’t want to repeat yourself, so if you discover a slice of templating code that is in more than one file, abstract that mother out to a partial and render it like a boss. That way you don’t have to change it more than once if you should need to.

Last, but not least, let’s talk about adding a class.

How to add a class to a tag
You won’t see a lot of raw HTML in these .erb files. Instead you will see code like this that saves the developers a lot of time, but doesn’t include an obvious place to add a class selector so you can style whatever it is:

1
2
3
4
5

<%= form_for @user, :url => users_path do |f| %>
  <%= f.error_messages %>
  <%= render :partial => "form", :locals => {:f => f} %>
  <%= f.submit "Create" %>
<% end %>

If you want to add a class to that submit button so that it doesn’t look like a visual fart from 2002, just add this bit of magic to line 4:

4

  <%= f.submit "Create", :class => "class_name" %>

Conclusion
That’s pretty much all I know so far and I’m learning every time I dive into this stuff. Please help me by correcting or adding thoughts to anything I have written here! Thanks to Chris Kelly at Highgroove for fielding my questions during the week!

Just kidding! If this guide fails to straighten anything out, or you’d like someone to do the work for you, you can leave a comment on this post or get in touch with me at jim@hodgsonco.com or by phone at (404) 492-9692. I’m your guy.

But now, to business! First of all, you should think about how much control you’d like to have over the look and feel of your blog. If you are just starting out and you’ve never written a single word before, then I recommend that you start with a free blogging service to get your feet wet. The good news is, there are lots of free options.

If you are brand new to Blogging…

Did you keep a diary as a kid? Do you miss being able to write down all those weird feelings you have? Don’t lie, we all know you have wierd feelings!

If this blog is for writing those sorts of personal journal style entries only, then I suggest trying out these options:

• Livejournal
• Diaryland

On either of these sites, you’ll be given an address like http://newblog.diaryland.com where people can see what you are writing. They don’t really have an option (as far as I know) for using your own domain name.

As I said, these two sites are more for personal journal entries. They tend to emphasize the community of other journal writers around you. They offer the ability to do things like add friends and follow other people’s journals, as well as comment on entries and that sort of thing. They are both great choices to get started, but they might not be what you’re looking for if you are going for a more serious blog.

I want to get a little more advanced!

If you are starting something a little more serious like a blog for your work or a music review site, or you just want to be your own blog and not really part of a journal writing community, then there are some free services that cater to you as well.

• Blogger
• WordPress

These two have the ability to look a little more serious, and provide some options for changing the look and feel of your blog using themes. Their free options, however, still don’t allow you to have your own domain name, so you will be http://newblog.wordpress.com or blogger.com.

Let’s have a quick disambiguation about WordPress.

WordPress can refer to the site at wordpress.com where one can get a free blog, but more often when I am speaking of it I am referring to the free blog software that anyone can download and use on their own servers. It’s also called WordPress.

It should be said that one of my favorite blogs, BikeSnobNYC has a wildly successful blog for free at Blogspot, appears regularly on NPR to talk about bikes, and has even been asked to write a regular column for Bicycling magazine. So, you can take a free blog without a custom domain name about as far as any blog can go.

I want to be able to control everything…

If you want some more control over your blog, and you want to be able to add things like themes and widgets, then you might consider some pay options.

Let me talk shortly about themes and widgets in case these terms are foreign to you. My experience is mostly with WordPress, so my definitions hover around that.

A theme is a collection of PHP code and HTML code and CSS styles (in the case of WordPress themes) that tell the pages how to look. The page you are looking at now uses a custom WordPress theme designed by myself and my friend Kurt Rampton. If you want to have a lot of control over how your blog looks, you need theme capability.

A widget is a little snippet of code that does one thing in particular. For instance, you might see somewhere on this page the words “Recent posts”. The code that generates that list and updates it automatically when a new post gets made is a widget. There are widgets for everything. Search widgets, photo displaying widgets… anything you can think of.

If you look at this page on the site for Big Brothers Big Sisters of the Bay Area, a site I’m proud to have worked on, you’ll see a box with an orange tab at the top on the left hand side of the page that contains a photo that changes every time the page loads. That is a simple example of a widget.

So, if you’ve decided you want your own domain name, or you want a little more control over how your site looks and what it can do, or both, then you probably want to host your own blog. So, what does that entail?

Without getting into too much detail, there are three main pieces. You need to register a domain, you need a server to host that domain, and you need blog software on the server.

Here are some more quick definitions to help out a bit:

A domain name is an identification label that defines a realm of administrative autonomy, authority, or control in the Internet, based on the Domain Name System (DNS).

In this page’s case, hodgsonco.com is the domain name. If you already have a company domain name you might want to use what’s called a subdomain, such as blog.yourcompany.com.

The upshot is that your domain name is like your street address, but for the internet.

A server is an application running on a computer that delivers a service.

The word “Server” is also used to refer to the computer on which server software runs, which is the kind of thing that technical people come up with to confuse non-technical people. Haha, gotcha!

In my previous metaphor, if your domain name is like your street address, then the server is kind of like your house.

Blog software, like WordPress, works with the server software to deliver content, and with you to help write content.

Basically, blog software is like a liason. The server talks in markup language (HTML) that your browser understands, telling your browser how to display the words and pictures that make up a web page. You could write this code by hand, and in fact that’s how it’s been done everywhere until recently when blog software started getting so good, but it’s kind of nerdy. Not everyone knows how to do it.

WordPress makes writing posts and pages as easy as editing a Microsoft Word document, so you don’t need a lot of technical knowledge to keep your site updated, which is critical for your ranking in search engines.

To stretch my metaphor even further, WordPress is like the furnishings that you put inside your house. Sure you could live in your house without it, but it wouldn’t be as nice!

So, how to get these three pieces together?

The best thing you can do is get in touch with my friend Chris Kelly over at ithought.org. He runs a one-man hosting operation, so if you send him an email you are emailing him personally and he gets back to you fast. He lives and works right here in Atlanta, has competitive prices, and is a smart guy.

I have a thing for using small local companies whenever I can, probably because I AM a small local company, but if you like larger companies there are also some options for getting what you need all in one place. Here are two companies:

• Dreamhost
• 1and1.com

These guys both offer you the ability to sign up for a new domain name, which costs about $20 or so a year, sign up for your server for around $10 a month give or take, and install WordPress with a few clicks. They’ll handle renewing your domain and even upgrading the WordPress software for you. The WordPress software itself is free of charge.

Once that’s done, you will have a lot of options in WordPress for things like naming your blog, choosing a theme, and then customizing your theme, but I’ll cover that stuff another time.

So, that’s my page on how to start a blog! Thanks for reading. Of course if you need custom themes or help with anything to do with the internet or social media, I can help, so leave a comment here, email me, or call me up at 404.388.6951.

The first thing to do is login with your username and password on the screen that looks like the one pictured here.

Wordpress login screen

You should already have a username and password. If you don’t, talk to whoever has the admin account on your blog. If you’re one of my clients, talk to me!

If you’re not one of my clients, still talk to me!

Once you are logged in, you will be looking at the main dashboard screen as pictured here.

Click posts or uses Quick Post

You want to either click on Posts, then “Add New” under Posts, or use the Quickposts section. The Quickposts form is great for, as you might imagine, quickly adding a post to your blog, but it doesn’t allow you to choose the category that post will go into.

Most of the time this will be fine to use, and you can always change the category of the post that gets added with it later on, so Quick Post might be a good, fast option most of the time. Try it and see if it works out.

If things don’t show up where you think they should, don’t worry. Get in touch with me and we’ll get you back on track.

If you don’t like the cut of Quick Post’s jib, use the main posting screen by choosing “Add New” under the Posts section in the menu bar on the left. That will take you to a screen that looks like this.

The post window

Once here, just add your title and type your content. Getting familiar with the content editor is important to maximize the use of WordPress. It is a lot like a word processing program such as Word, only better because it produces clean HTML that won’t cause web browsers to cry.

Note:Please be careful with using Microsoft products for pasting in copy. Microsoft adds HTML code behind the scenes that causes all kinds of havoc in non-IE browsers as well as IE. I’m told that sometimes pasting the stuff you want to use into Notepad, then selecting it again and copying it a second time removes a lot of this stuff, but I can’t vouch for the accuracy of this method.

Once you have a title and some content that you are happy with, try using the Media editor to add some photos to your post. This is another great feature of WordPress that you are going to love. To get started with it, click on the little icons to the right of the words “Upload/Insert” just above the content editor.

And once that’s all done, you are done editing! Now all we need to do is select a category and then publish this bad boy.

Editing categories on the posts screen

You can see here that the Categories area, bottom right, is highlighted. You may never have to use this, but on some blogs it is useful. Notice here on the East Atlanta Kids Club blog that there is a category for Features and one for News. In their case, a new news item will go into the Features category, and then later on move into News when there is a new feature.

Different categories sometimes mean that the content is displayed different places, especially on templates that I have implemented, so look for that.

As always, if there are any further questions, do not hesitate to give me a ring at 404 492 9692 or send me an email at jim@hodgsonco.com.

We’ll get you all straightened out in no time!