Tools of a Web Marketeer

Development discussions have been covered quite a bit so these are productivity/business/fun tools I’d like to or do use.

CMS


WordPress (wordpress.org/) – I already use WordPress, It does everything I need it to do.

Perch (grabaperch.com/) – I haven’t used Perch yet but I can see the value. As soon as I get a chance I’ll do so.

Mockups/Prototyping


Balsamiq (balsamiq.com/) – Love using this.

Data Capture & Forms


Gravity Forms (gravityforms.com/) – A must if you are using WordPress, really powerful.

Wufoo (wufoo.com/) – Again powerful and fun.

I have used them both, I like them both.

Others I have not used but like the look of:

KissInsights (kissinsights.com/) Survey Monkey (surveymonkey.com/, who I think bought Wufoo mentioned above)

Audio & Video


I have used JWPlayer (longtailvideo.com/) with Amazon S3 & Cloudfront. A bit more work than a hosted solution but the combo works well.

BuzzSprout – Podcasting (buzzsprout.com/) – The whole works, I like it.

Others that I have not used but would like to: Sublime Video (sublimevideo.net/) & Brightcove (brightcove.com/)

Sales Leads / CRM


I suppose this is linked to forms further up. If I didn’t roll my own I’d probably use:

Highrise (highrisehq.com/) – Simple and easy to use from the 37 signals gang.

Sales Force (salesforce.com/) – Don’t really like the UI but provides a lot of functionality.

Analytics & Testing


Google Analytics (google.com/analytics/) – Does everything I need and more.

Browser Stack – Browser Testing (browserstack.com/) – Has taken the pain out of browser testing.

Optimizely – A/B Testing (optimizely.com/) – As soon as I get a chance I would love to try this out.

Email


Campain Monitor (campaignmonitor.com/) – I use them, they hook up well with other services, a joy to use. A chance for some passive income too.

Mail Chimp (mailchimp.com) – Haven’t used it myself but heard it’s a good one.

Customers & Social


Get Satisfaction (getsatisfaction.com/)

Assistly (assistly.com/)

HootSuite (hootsuite.com/)

Olark – Live Chat (olark.com/)

I haven’t used any of these but they all look great.

Project Management & Bug tracking


Pivotal Tracker (pivotaltracker.com/) – Tried it and liked it, keeps you motivated but at realistic targets.

Asana (asana.com/) – Had a quick go, but heard good things about it.

Basecamp (basecamphq.com/) – The good old favorite, Basecamp. I use the free version.

Lighthouse (lighthouseapp.com/) – Not used it, but probably the one I’d go for.

Finance


Xero (xero.com/) – Used the personal plan, got some great insights.

A Little Development…


Postmark (postmarkapp.com/) – Email delivery for web apps, loads of API’s. Really simple to set up.

Most go for Github (github.com/). For private projects I like Beanstalk (beanstalkapp.com/).

Keep learning


Good old books

Treehouse from the guys at Carsonified (teamtreehouse.com/) – Really easy and fun way of learning.

CodeSchool (codeschool.com/) – Again up for anything that makes learning more fun. I have used both.

jQuery News Ticker with Google JSAPI

Decided to have a go at creating my first public repo with git and thought I’d share some code I quickly put together: https://github.com/Goldyberg/Horizontal-News-Ticker. Hopefully I’ll find some time for some design and tweeks but feel free to use as you please.

DEMO: http://djog.co.uk/demo/news-ticker/

Gamification in education

Gamification in education

Gamification has been around in the real world and online for some time. Our every day social networks such as Facebook and Twitter make use of game dynamics (number of friends, followers, likes etc) . Gabe Zichermann gave a great talk on the subject.

However, sometimes I’m not sure introducing game dynamics was or should be intended as a priority, but maybe more by-product of a well designed overall product. I am, I suppose directing this at the average web application. Indeed, there are of course game developers who are highly skilled in building immersive gaming experiences.

I’m not going to go too much into the pros and cons. I just think it has value and hasn’t yet been fully taking advantage of in the education sector. With current wealth of web technologies available, building tools to make learning for kids (and adults) more fun is achievable.

I think codeschool is a great example of what can achieved. If you know of any exciting new learning platforms for kids, feel free to comment.

Custom WordPress Documentation

With WordPress becoming more feature rich with each release, I am noticing the the sites I build tend to vary in functionality. Due to this variation, writing documentation and training users has become difficult. I recently came across the new WP-Help plugin and EasyWPGuide which look like useful tools to help solving this problem.

Getting Started with the Instagram API

Just started to play around with with jQuery and the Instagram API. Basically I wanted to search for the a user using their username, get their ID and search for their photos using that ID. The following code seemed to do the trick:

var accessToken = '[your-access-token-here]';
var username;
var getUserID;
var limit = 6;
var setSize = "small";
var size;

var instagram = function() {
     return {
          initiate: function() {
                instagram.getUser();
          },
          getUser: function() {
                username = "[your-username-here]"
                 var getUserURL = 'https://api.instagram.com/v1/users/search?q='+ username +'&access_token='+ accessToken + ''
                //console.log(searchURL);
                $.ajax({
                        type: "GET",
                        dataType: "jsonp",
                        cache: false,
                        url: getUserURL,
                        success: function(data) {
                                         //console.log(data.data[0].id);
                                         getUserID = data.data[0].id;
                                         instagram.loadImages(getUserID);
                        }
                    });
          },
          loadImages: function(userID) {
            var getImagesURL = 'https://api.instagram.com/v1/users/' + userID + '/media/recent/?access_token='+ accessToken +''
                $.ajax({
                        type: "GET",
                        dataType: "jsonp",
                        cache: false,
                        url: getImagesURL,
                        success: function(data) {
                                for (var i = 0; i < limit; i++) {
                                        if (setSize == "small"){
                                                size = data.data[i].images.thumbnail.url;
                                        } else if (setSize == "medium"){
                                                size = data.data[i].images.low_resolution.url ;
                                        } else {
                                                size = data.data[i].images.standard_resolution.url;
                                        }

                                                $(".pics").append("<a target='_blank' href='" + data.data[i].link +"'><img src='" + size +"'></img></a>");
                                        }
                        }
                    });
          }
     }
} ();

$(document).ready(function() {
    instagram.initiate();
});

Ruby On Rails – rake db:schema:load

I recently started learning Ruby on Rails via great sites such as railscasts.com. So I started hacking around at some code, learning GIT and before I knew it I had an app running at heroku.com , backed up by beanstalkapp.com. The only thing was my migrations folder was a bit of a mess and rake db:migrate didn’t quite do the trick. I found this post which helped me out, http://stackoverflow.com/questions/1780789/heroku-problem-question. Skipped over the migrations and just pushed the schema I needed to get me on the way.

Creating a custom theme options panel in WordPress

Creating a custom theme options panel in WordPress

Having worked with WordPress for a while, I wanted to have a crack at creating my own theme options panel. These 3 articles combined together helped me to do so:

Alternatively there is Thematic Options Panel if you don’t want to build from scratch.

Some useful WordPress plugins

UPDATE: Wow, so this list really sparked a great discussion and extra additions on Forrst – http://forr.st/~LKc . I will try to compile the list as best I can.

Been gathering a list of WordPress plugins that I am using or would like to use. I’ll add to the list as and when I find more…

Gravity Forms – http://www.gravityforms.com/
Custom Post Type UI – http://wordpress.org/extend/plugins/custom-post-type-ui/
Taxonomy Widget - http://wordpress.org/extend/plugins/taxonomy-widget/
Widgets Reloaded – http://wordpress.org/extend/plugins/widgets-reloaded/
Edit Flow – http://editflow.org/
Multi Lingual – http://wpml.org/
WP Mail SMTP – http://wordpress.org/extend/plugins/wp-mail-smtp/
Multiple Category Selection Widget – http://wordpress.org/extend/plugins/multiple-category-selection-widget/
Twitter Widget – http://wordpress.org/extend/plugins/wickett-twitter-widget/screenshots/
Members – http://wordpress.org/extend/plugins/members/
Restrict Categories – http://wordpress.org/extend/plugins/restrict-categories/
Google Analytics – http://yoast.com/wordpress/google-analytics/
Vote It Up – http://wordpress.org/extend/plugins/vote-it-up/
WP Post Views – http://wordpress.org/extend/plugins/wp-postviews/ (In fact most of Lester Chan’s plugins http://lesterchan.net/portfolio/programming/php/)
Instagram for WordPress – http://wordpress.org/extend/plugins/instagram-for-wordpress/
AddThis - http://wordpress.org/extend/plugins/addthis/
Theme Check – http://wordpress.org/extend/plugins/theme-check/

Using WordPress Post Thumbnail with Fancybox

Prerequisites

jQuery and Fancybox must be enabled. Have a look at the Fancybox how to page for detailed instructions.

Note – This assumes you have some previous experience with WordPress, however if you have any questions feel free to leave a comment.

Enabling Post Thumbnail

Add the following to your functions.php file:

<?php if ( function_exists('add_theme_support') ) add_theme_support('post-thumbnails'); ?>

How you would usually get the post thumbnail

This is what you would include within your WordPress loop.

<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink() ?><?php the_post_thumbnail('thumbnail'); ?></a>
<?php } ?>

How to use the post thumbnail with with Fancybox

<?php if ( has_post_thumbnail() ) { $thsrc = wp_get_attachment_image_src( get_post_thumbnail_id($post--->ID), 'thumbnail', false, '' );
$fullsrc = wp_get_attachment_image_src( get_post_thumbnail_id($post-&gt;ID), 'large', false, '' );
echo ('<a id="single_image" href="'.$fullsrc[0].'"><img src="'.$thsrc[0].'" alt="" /></a>');
} ?&gt;
<?php } ?>

More