We’re seven members strong now and we’re able to add a lot of things our customers have been seeking. The bigger team also lets each of us work on support projects other than answering emails lightning fast. Since our sysops, developers and designers have been rightly bragging about the great things they’re doing, I thought I’d take the opportunity to tell you about what our amazing team has been doing to improve customer happiness.

Basecamp 101
The mere whisper of the word ‘webinar’ used to make my blood run cold. The library and academic worlds (my old stomping grounds) are lousy with them. I found them to be time sinks where people who didn’t have a full grasp of a topic held their attendees virtually hostage as we endured technical difficulties and dry Powerpoint presentations. My bias came with me when I got to 37signals, so I was surprised to see the number of customers who really wanted a webinar.

After a bit of research in the Fall, Merissa and Chase started a “Basecamp 101� online class that now runs almost every week. I have to say, it’s really terrific. If other webinars had butts, Chase and Merissa’s would be kicking them. Their class is fun and it gives space for potential customers to ask questions of Merissa, Chase and Michael at the end.

It’s exciting tell our customers that we can offer them a demonstration of setting up a project before they even sign up for Basecamp. If you want to check it out sometime, the next one is always listed on our Help page.

Help Videos
There’s plenty of research demonstrating different learning styles, and the support team can definitely attest to the fact that not everyone learns best by reading help documentation. We have some pretty great help pages, but sometimes words and screenshots can’t do justice to some of the features and functions of Basecamp or Highrise. Chase made it his mission to create some really great screencasts for many of our frequently asked questions. You can see the ones he’s created for Basecamp and Highrise. They’ve been a great asset for the support team and have helped our customers in a big way.

Live Chat
Through the Summer and Fall of 2011, we ran live help chat (thanks to our pals at Olark) on highrisehq.com to assist potential customers who had a few questions before signing up for a plan. The whole support team spent a few hours on live chat each day and we noticed that a lot of current customers were using the service to get help. We decided to give it a shot in Basecamp accounts as a premium support feature. If you’re an admin on a Max Basecamp plan or any Suite, you’ll see this friendly little box at the bottom of your Basecamp dashboard:


Of course, we did endure some “Who the heck is this?�s and “Are you a robot?�s the first few weeks, but we’re almost two months into offering the feature and it’s been a great experience. The team can answer questions faster and it’s a true pleasure to interact with our customers in a new way.

Faster Common Requests
Resident support whiz kid Ann is not just great at helping us answer support questions, she’s also quite handy with the console as well. Every day we see some common requests that involve some On Call programmer work and Ann’s been taking on a lot of the common tasks that we used to send to the programming team, including things like:

• Un-sticking Highrise exports/imports
• Finding out who deleted/moved something or changed permissions in an app (known in the support team as an “Ooooh, girl, who…â€� question )
• Creating file archives

It’s been a huge load off our On Call team and it helps us take care of our customers much faster than they expect.

These are all things we’ve been able to add to support in the past five months, and Basecamp Next isn’t even out yet. I don’t know about you, but I’m excited to see what the rest of 2012 holds.

close article | permalink

Custom post types add a level of flexibility to WordPress that makes this open-source Web development platform more useful on many levels. Whenever I have been faced with a Web-based task, especially one that involves organizing information, the first thing I do is examine WordPress to determine if it can handle the job. It usually can.

Image Source

As an Internet marketer and analyst, I need to be able to organize online marketing campaigns in a way that is trackable in Google Analytics. This is the perfect task for WordPress custom post types.

In this article, we’ll explain how to create a WordPress plugin that enables you to organize Internet marketing campaigns using trackable URLs, shortened versions of those URLs, and trackable QR codes that you can also use for offline marketing activities.

We’ll show you how to create this plugin in a way that maximizes ease of use and functionality. If you have other methods that you have found useful, please share them in the comments. Also, let’s remember that we are standing on the shoulders of WordPress developers who have laid the foundation for easier coding.

Here are the criteria for our custom post type plugin:

• It must provide a form in which users can specify a landing page to be tracked, the anchor text or content, the term (if this link is a PPC ad), and any additional information about this link.
• It must provide three custom taxonomy types, so that users can select the URL variables for source, medium and campaign name. This is a taxonomy type because they will be reusable across campaigns and posts.
• It must be organizable in the admin area and be displayed in the user interface.
• The output must include a Google Analytics campaign-trackable URL, the information about the URL in human-readable format, a shortened version of the URL using a URL shortener, and a QR code of the shortened URL.

The File Structure

This plugin will use three files. To set up the structure, create a plugin folder named campaign-tracker. Inside the campaign-tracker folder, create the following three PHP files:

• campaign-tracker.php
• ga-functions.php
• campaign-template.php

After you have created the files, we are ready to start adding the code.

The Plugin File

The main plugin file will be campaign-tracker.php. The content of this file will begin the standard way, by providing WordPress with the information that it needs to recognize it is as plugin. We then dive into setting up the CampaignTracker10 class and functions. We will set up our campaign custom post type and register the taxonomies that we will need. We will also initiate our admin interface.

   <?php
   /*
   Plugin Name: Campaign Tracking 1.0
   Plugin URI: http://www.convergeconsulting.org
   Description: Google Analytics Campaign Tracking system for WordPress 3.0 and above.
   Author: Joshua Dodson
   Version: 1.0
   Author URI: http://www.convergeconsulting.org
   */

   // Include the ga-functions.php helper functions
   include_once('ga-functions.php');

   if(!class_exists('CampaignTracker10'))
   {

      class CampaignTracker10 {

         var $meta_fields = array("gaca10-gaurl","gaca10-gaterm","gaca10-gacontent","gaca10-gadescription");

         // This function will create the custom post type. Thanks to Konstantin Kovshenin's example for additional examples of how to construct custom post types (http://kovshenin.com/2010/03/custom-post-types-in-wordpress-3-0-2089/), which inspired much of this.
         function __construct(){
            // Register custom post types
            register_post_type('campaign', array(
            'label' => _x('Campaigns','campaigns label'), // We're labeling the custom posts as Campaigns and also accounting for gettext appropriately
            'singular_label' => _x('Campaign','campaign singular label'), // Each post will be called a Campaign
            'public' => true, // These will be public
            'show_ui' => true, // Show the UI in admin panel
            '_builtin' => false, // This is a custom post type, not a built in post type
            '_edit_link' => 'post.php?post=%d',
            'capability_type' => 'post',
            'hierarchical' => false,
            'rewrite' => array("slug" => "campaign"), // This is for the permalinks
            'query_var' => "campaign", // This goes to the WP_Query schema
            'supports' => array('title'/* We only need the default title field, but we could use others such as 'author', 'excerpt', 'editor' ,'custom-fields'*/)
            ));

            add_filter("manage_edit-campaign_columns", array(&$this, "edit_columns"));
            add_action("manage_posts_custom_column", array(&$this, "custom_columns"));

            // Register custom taxonomies gasource (for the Campaign Source), gamedium (for the Campaign Medium), and ganame (for Campaign Name)
            // Campaign Source
            register_taxonomy("gasource", array("campaign"), array("hierarchical" => true, "label" => _x( 'Campaign Sources', 'campaign sources taxonomy label' ), "singular_label" => "Campaign Source", "rewrite" => true));
            // Campaign Medium
            register_taxonomy("gamedium", array("campaign"), array("hierarchical" => true, "label" => _x( 'Campaign Mediums', 'campaign mediums taxonomy label' ), "singular_label" => "Campaign Medium", "rewrite" => true));
            // Campaign Name
            register_taxonomy("ganame", array("campaign"), array("hierarchical" => true, "label" => _x( 'Campaign Names', 'campaign names taxonomy label' ), "singular_label" => "Campaign Name", "rewrite" => true));

            add_action("admin_init", array(&$this, "admin_init"));
            add_action("template_redirect", array(&$this, 'template_redirect'));

            add_action("wp_insert_post", array(&$this, "wp_insert_post"), 10, 2);

         }

Let’s give the columns on the admin screen some headings:

   function edit_columns($columns)
   {
      $columns = array(
      'cb' => '<input type="checkbox" />',
      'title' => _x('Campaign Title','campaign title label for edit columns'),
      'gaca10_ganame' => _x('Campaign Name','campaign name label for edit columns'),
      'gaca10_gasources' => _x('Campaign Source','campaign source label for edit columns'),
      'gaca10_gasmedium' => _x('Campaign Medium','campaign medium label for edit columns'),
      );
      return $columns;
   }

Let’s specify which columns we would like to show up on the admin screen for this custom post type. We’ll have columns for campaign source, medium and name, in addition to the post’s title.

   function custom_columns($column)
   {
      global $post;
      switch ($column)
      {
         // The campaign source
         case "gaca10_gasources":
         $gasources = get_the_terms(0, "gasource");
         if ( $gasources && ! is_wp_error( $gasources ) ) :
         $gasources_html = array();
         foreach ($gasources as $gasource)
         array_push($gasources_html, '<a href="' . get_term_link($gasource->slug, "gasource") . '">' . $gasource->name . '</a>');

         echo implode($gasources_html, ", ");
         endif;
         break;

         // The campaign medium
         case "gaca10_gasmedium":
         $gamediums = get_the_terms(0, "gamedium");
         if ( $gamediums && ! is_wp_error( $gamediums ) ) :
         $gamediums_html = array();
         foreach ($gamediums as $gamedium)
         array_push($gamediums_html, '<a href="' . get_term_link($gamedium->slug, "gamedium") . '">' . $gamedium->name . '</a>');

         echo implode($gamediums_html, ", ");
         endif;
         break;

         // The campaign name
         case "gaca10_ganame":
         $ganames = get_the_terms(0, "ganame");
         if ( $ganames && ! is_wp_error( $ganames ) ) :
         $ganames_html = array();
         foreach ($ganames as $ganame)
         array_push($ganames_html, '<a href="' . get_term_link($ganame->slug, "ganame") . '">' . $ganame->name . '</a>');

         echo implode($ganames_html, ", ");
         endif;
         break;
      }
   }

Once our columns are set up appropriately, we should see the following columns (note that this example is with one campaign already added):

The next section enables us to specify which template we would like to use to display this custom post type. We will be using the campaign-template.php template:

   function template_redirect()
   {
      global $wp;

      // If the post type is set and is campaign…
      if (isset($wp->query_vars["post_type"])) {
         if ($wp->query_vars["post_type"] == "campaign")
         {
            // Then use the campaign-template.php file from this plugin directory
            include WP_PLUGIN_DIR.'/campaign-tracker/campaign-template.php';
            die();
         }
      }
   }

If a post is inserted or updated, then loop through the array and update or add the post’s meta data.

   function wp_insert_post($post_id, $post = null)
   {
      if ($post->post_type == "campaign")
      {
         foreach ($this->meta_fields as $key)
         {
            $value = $_POST[$key];
            if (empty($value))
            {
               delete_post_meta($post_id, $key);
               continue;
            }

            if (!is_array($value))
            {
               if (!update_post_meta($post_id, $key, $value))
               {
                  add_post_meta($post_id, $key, $value);
               }
            }
            else
            {
               delete_post_meta($post_id, $key);

               foreach ($value as $entry){
                  add_post_meta($post_id, $key, $entry);
               }
            }
         }
      }
   }

With the following function, we can add custom meta boxes for the admin screen where we edit the campaign:

   function admin_init()
   {
      // Add custom meta boxes for the edit campaign screen
      add_meta_box("gaca10-meta", "Campaign Information", array(&$this, "meta_options"), "campaign", "normal", "core");
   }

The following function is for the admin post meta contents. This lets us create the form in which we specify some of the variables for our trackable URL (except for the taxonomies). It also provides a read-only field that shows the shortened URL after the URL variables have been saved.

   function meta_options()
   {
      global $post;
      $custom = get_post_custom($post->ID);
      if($custom["gaca10-gaurl"][0]){
         $gaurl = $custom["gaca10-gaurl"][0];
      }
      else{ $gaurl = ''; }
      if($custom["gaca10-gaterm"][0]) {
         $gaterm = $custom["gaca10-gaterm"][0];
      }
      else { $gaterm = ''; }
      if ($custom["gaca10-gacontent"][0]) {
         $gacontent = $custom["gaca10-gacontent"][0];
      }
      else { $gacontent = ''; }
      if ($custom["gaca10-gadescription"][0]) {
         $gadescription = $custom["gaca10-gadescription"][0];
      }
      else { $gadescription = ''; }

      $url = trackable_url();
      if ($custom["campaign_tinyurl"][0]) {
         if($gaurl == '') { $shortenedurl = ''; }
         else{ $shortenedurl = create_tiny_url($url); }
      }

      ?>
      <label><?php _ex('Website URL:','website url label'); ?></label><input name="gaca10-gaurl" value="<?php echo $gaurl; ?>" /><br />
      <em><?php _ex('(e.g., http://www.google.com)','website url example'); ?></em><br /><br />

      <label><?php _ex('Campaign Term:','campaign term label'); ?></label><input name="gaca10-gaterm" value="<?php echo $gaterm; ?>" /><br />
      <em><?php _ex('(identify the paid keywords)','campaign term information'); ?></em><br /><br />
      <label><?php _ex('Campaign Content:','campaign content label'); ?></label><input name="gaca10-gacontent" value="<?php echo $gacontent; ?>" /><br />
      <em><?php _ex('(use to differentiate ads)','campaign content information'); ?></em><br /><br />

      <label><?php _ex('Campaign Description:','campaign description label'); ?></label><input name="gaca10-gadescription" value="<?php echo $gadescription; ?>" /><br />
      <em><?php _ex('(use to remind yourself about this specific link)','campaign description information'); ?></em><br /><br />

      <label><?php _ex('Shortened URL:','shortened URL label'); ?></label><input name="gaca10-gashortened-url" value="<?php echo $shortenedurl; ?>" readonly="readonly" /><br />

      <?php
   }
}

}

Here is how the “Add/Edit Campaign� screen will appear:

If CampaignTracker10 exists, then we initiate the plugin:

   if(class_exists('CampaignTracker10')){

      // Initiate the plugin
      add_action("init", "CampaignTracker10Init");

      function CampaignTracker10Init() {
         global $gaca10;
         $gaca10 = new CampaignTracker10();

      }
   }

Combine these functions into the campaign-tracker.php file.

The following taxonomy examples should also be on the “Add/Edit Campaign� screen after everything has been added. Here is the “Campaign Names� taxonomy:

Here is the “Campaign Mediums� taxonomy:

Here is the “Campaign Sources� taxonomy:

Similar to how traditional post categories are set up, you can create new categories or select previous categories.

A note on usage: When you begin to use the system, try to select only one category each from name, source and medium. One category per taxonomy type will prove to be most useful in your actual analysis in Google Analytics. So, as a general rule: one name, one source and one medium per URL.

The Helpful Display Functions

Each of the functions in this section is part of the ga-functions.php file. The functions have been separated from the other functions in order to keep the display functions together.

Our file will begin with the formatted_utm_taxonomy_terms function, which will display a URL-friendly version of the taxonomy terms:

   <?php
   /* Some Helpful Display Functions */

   function formatted_utm_taxonomy_terms($the_term) {
      global $post;
      $post_terms = get_the_terms( $post->ID, $the_term );
      if ( $post_terms && ! is_wp_error( $post_terms ) ) :
      $encoded_terms = array();
      foreach ($post_terms as $term ) {
         if(!$encoded_terms[] = $term->slug){
            $encoded_terms[] = urlencode($term->name);
         }
      }
      $return_terms = implode('+',$encoded_terms);
      return $return_terms;
      endif;
   }

The trackable_url function generates the trackable URL from the fields on the admin screen as well as the taxonomies. This appends the appropriate tracking criteria to the URL so that Google Analytics can use the variables and provide information based on these specific variables. To do this, we will use the add_query_arg WordPress function.

   function trackable_url() {
      global $post;
      $custom = get_post_custom($post->ID);

      // the url
      if ($custom["gaca10-gaurl"][0]) {
         $gaurl = $custom["gaca10-gaurl"][0];
      }
      else { $gaurl = ''; }

      // the term(s)
      if ($gaterm = $custom["gaca10-gaterm"][0]) {
         $gaterm = $custom["gaca10-gaterm"][0];
         $gaterm = urlencode($gaterm);
      }
      else { $gaterm = ''; }

      // the content(s)
      if ($custom["gaca10-gacontent"][0]) {
         $gacontent = $custom["gaca10-gacontent"][0];
         $gacontent = urlencode($gacontent);
      }
      else { $gacontent = ''; }
      $arr_params = array ( 'utm_campaign' => formatted_utm_taxonomy_terms('ganame'), 'utm_source' => formatted_utm_taxonomy_terms('gasource'), 'utm_medium' => formatted_utm_taxonomy_terms('gamedium'), 'utm_term' => $gaterm, 'utm_content' => $gacontent);
      return add_query_arg( $arr_params, $gaurl );

   }

The following functions take the campaign-trackable URL and shortens it with TinyURL. This method uses wp_remote_get to generate the shortened URL. It then saves the shortened URL to the post’s meta data when a post is saved. The trackable_url_tiny function enables us to retrieve the shortened URL in the template.

   // Save the shortened trackable URL to the post meta
   function save_shortened_meta($post_ID) {
      $url = trackable_url();
      $shortened_url = create_tiny_url($url);
      update_post_meta($post_ID, "campaign_tinyurl", $shortened_url);
      return $post_ID;
   }

   // Add an action to save it when the post is saved.
   add_action('save_post', 'save_shortened_meta');

   // Retrieve the shortened URL from post meta
   function trackable_url_tiny($url = null, $post_ID) {
      global $post;
      $custom_fields = get_post_custom($post->ID);
      $campaign_tinyurl = $custom_fields['campaign_tinyurl'][0];
      return $campaign_tinyurl;

      return $post_ID;
   }

   // Create shortened trackable URL through the wp_remote_get function
   function create_tiny_url($strURL) {
      $tinyurl = wp_remote_get( 'http://tinyurl.com/api-create.php?url='.$strURL );
      if( is_wp_error( $response ) ) {
         return 'Something went wrong!';
      } else {
         return $tinyurl['body'];

      }
   }

The trackable_url_report function is what provides the human-readable version of the variables. These are broken out by each section. The landing page, campaign name, source, medium, terms and content are all separated and displayed individually if they exist.

   function trackable_url_report() {
      global $post;
      $custom = get_post_custom($post->ID);

      // get the url
      if ($custom["gaca10-gaurl"][0]) {
         $gaurl = $custom["gaca10-gaurl"][0];
      }
      else { $gaurl = ''; }
      // get the term(s)
      if ($gaterm = $custom["gaca10-gaterm"][0]) {
         $gaterm = $custom["gaca10-gaterm"][0];
      }
      else { $gaterm = ''; }

      // get the content(s)
      if ($custom["gaca10-gacontent"][0]) {
         $gacontent = $custom["gaca10-gacontent"][0];
      }
      else { $gacontent = ''; }

      // The Landing page
      $url_info ='';
      $url_info.= "<strong>". _x( 'Landing Page:','landing page label') . "</strong> ";
      $url_info.= $gaurl;
      $url_info.= "<br />";

      // The campaign name
      $url_info.= "<strong>". _x( 'Campaign:','campaign label') . "</strong> ";
      $url_info.= formatted_utm_taxonomy_terms('ganame');
      $url_info.= "<br />";

      // The Source
      $url_info.= "<strong>". _x( 'Source:','source label') . "</strong> ";
      $url_info.= formatted_utm_taxonomy_terms('gasource');
      $url_info.= "<br />";

      // The medium
      $url_info.= "<strong>". _x( 'Medium:','medium label') . "</strong> ";
      $url_info.= formatted_utm_taxonomy_terms('gamedium');
      $url_info.= "<br />";

      // The term
      $url_info.= "<strong>". _x( 'Term:','term label') . "</strong> ";
      $url_info.= $gaterm;
      $url_info.= "<br />";

      // The content
      $url_info.= "<strong>". _x( 'Content:','content label') . "</strong> ";
      $url_info.= $gacontent;
      $url_info.= "<br />";

      return $url_info;
   }

The display_description function displays the description of the URL. We’ve broken this part out here in order to keep all of the pieces that are specific to the URL together. This is also the last function in the ga-functions.php file.

   function display_description(){
      global $post;
      $custom = get_post_custom($post->ID);
      $description = $custom["gaca10-gadescription"][0];
      return $description;
   }

   ?>

Combine these functions into the ga-functions.php file, and then we can move onto creating the template file.

The Template File

The final file that we will use to generate the view of the trackable URL is campaign-template.php. You will remember from the campaign-tracker.php file that we have a call in the template_redirect() function to redirect users to this template when viewing the custom post type of campaigns.

For display purposes, we will use the single.php file from the current default WordPress theme, TwentyEleven. You can, of course, use another theme and different styles.

First, we include the ga-functions.php file so that we can use some of our display functions. The campaign template also uses the Google Charts API to generate the QR code.

The following code will do all of the heavy lifting to display our campaign-trackable URL, the information about the URL, the shortened URL and the QR code. It will also allow us to edit the post if we need to change a variable. Simply drop this code into the loop.

   <h1 class="entry-title"><?php the_title() ?></h1><br />

   <?php
   echo "<strong>". _x( 'Description:','description label') . "</strong> ";
   echo display_description();
   echo "<br />";
   echo trackable_url_report();
   echo "<br />";
   echo "<strong>". _x('Trackable URL:','trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url()." target='_blank'>".trackable_url()."</a><br />";

   echo "<strong>" . _x('Shortened Trackable URL:','shortened trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url_tiny()." target='_blank'>".trackable_url_tiny()."</a><br />";
   ?>

   <br />
   <img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=<?php trackable_url_tiny(); ?>" /><br />
   <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>

When we combine the code, the campaign template will be as follows:

   <?php
   /**
   * The Template for displaying all single posts.
   *
   * @package WordPress
   * @subpackage Twenty_Eleven
   * @since Twenty Eleven 1.0
   */

   // Include the ga-functions.php file so that we can easily display the results
   include_once('ga-functions.php');

   get_header(); ?>

   <div id="primary">
   <div id="content" role="main">

   <?php while ( have_posts() ) : the_post(); ?>

   <nav id="nav-single">
   <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
   <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&larr;</span> Previous', 'twentyeleven' ) ); ?></span>
   <span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></span>
   </nav><!-- #nav-single -->

   <h1 class="entry-title"><?php the_title() ?></h1><br />

   <?php
   echo "<strong>". _x( 'Description:','description label') . "</strong> ";
   echo display_description();
   echo "<br />";
   echo trackable_url_report();
   echo "<br />";
   echo "<strong>". _x('Trackable URL:','trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url()." target='_blank'>".trackable_url()."</a><br />";

   echo "<strong>" . _x('Shortened Trackable URL:','shortened trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url_tiny()." target='_blank'>".trackable_url_tiny()."</a><br />";
   ?>

   <br />
   <img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=<?php trackable_url_tiny(); ?>" /><br />
   <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>

   <?php comments_template( '', true ); ?>

   <?php endwhile; // end of the loop. ?>

   </div><!-- #content -->
   </div><!-- #primary -->

   <?php get_footer(); ?>

When the template is set up and a campaign has been added, then it should display the following page:

In Conclusion

By using WordPress custom post types in the method described, it is possible to organize marketing campaigns with the relevant Google Analytics campaign-tracking URL, shortened URL and QR code. This makes organizing marketing campaigns much simpler and more effective.

Custom post types make it very easy to set up a system by which to organize content. And we can get creative in how we use custom post types. They can be very useful when organizing content outside of the normal structure of WordPress and other content management systems (i.e. posts, pages, etc.).

Other possible uses of custom post types include the following:

• Manage client contacts,
• Create an employee directory,
• Keep an inventory of items,
• Organize other data.

Resources

You may be interested in the following resources and articles:

• “Custom Post Types in WordPress 3.0,â€� Konstantin Kovshenin
• “Custom Post Types in WordPress,â€� Justin Tadlock
• “Creating a TinyURL With TinyURL’s API,â€� Richard Castera
• “Getting Started With Infographicsâ€� (QR Codes with the Google Charts API), Google Code
• “Post Types,â€� WordPress Codex
• URL Builder tool Google Analytics
• “IQ Lessons,â€� Google Analytics

(al)

© Joshua Dodson for Smashing Magazine, 2012.

close article | permalink

Boney Money Brown.

close article | permalink

Healthy collaboration is a target many aim for but many miss. Why? It’s far easier to say you want your team to work smoothly together without too much stress than it is to actually accomplish the open sharing and feeling of unity, trust and purpose that demands.

Just knowing that collaboration is easy to screw up isn’t of much use though. What would be truly helpful would be a specific taxonomy of the mistakes that frequently hobble teams, including the emotional and irrational complexities that can bedevil collaboration, as well as a benchmark survey of how the best teams manage to get everyone working together well. Handily, that’s just what a new study by Collaborative Coaching and Resonance Strategies aims to find out.

Through two small pilot studies the partners have developed a survey that digs down into what separates mere team members from true team players by asking participants to detail the differences between their ideal team and their actual experiences working in supposedly collaborative groups. Participants also signal their emotional impressions of teamwork by choosing from an array of sketched facial expressions. “These facial expressions are true in all cultures,” explains Yosh Beier, co-founder of Collaborative Coaching. The word disgust, say, may carry different resonance n India and Indiana, so using pictures takes away the danger that differences in culture or language could skew the results.

And even after examining a small sample of just over a hundred responses, Beier explains, he and his research partners are starting to see intriguing patterns emerge, including generational differences, common complaints about the current reality of teams (lack of recognition and excessive workload prominent among them) and similar notions of what moves a team from bearable to exciting.

What we find is there is a certain amount of results that people want to accomplish, so if a team doesn’t even manage to achieve its goals then that is very frustrating and dominates the experience. But it’s a little bit like Maslow’s hierarchy of needs. The moment teams reach a critical amount of ability to really produce results then results aren’t that important any more and other factors dominate such as connection and cohesion. People wonder: Do I see purpose? Is this meaningful for me? How much of a challenge is this?

There is also a generational theme. So far, the younger the respondents, the less happy they are with the current state of affairs on their teams.

It’s too early yet to determine if the youngest team members are the most frustrated simply because they have the highest expectations, Beier says, and an insufficient number of remote workers have so far taken the survey to conclusively determine if being virtual changes teams’ interactions or expectations. So the researchers are rolling out the survey to a number of firms, including consultancy W.L. Gore, and are also making it available online to anyone interested in participating. The only criterion for eligibility is experience working collaboratively. So if you feel like aiding an investigation of how to make teams truly gel and explore your own feelings about collaboration, 15 minutes is all you need to complete it. We’ll keep you posted on the results.

In your experience, what are the key factors that make a team really click so they can be effective collaborators?

Image courtesy of Flickr user woodleywonderworks.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Millennials in the enterprise, part 1: strategies for supporting the new digital workforce
• The Future of Work Platforms: An Overview
• Report: High-Impact Collaboration in the Enterprise

close article | permalink

At Carsonified Towers, we’re all getting super excited for May, when The Future of Web Design hits London for another three days of learning and inspiration. As ever, we kick off the show with four full-day workshops – each lead by a totally inspirational industry leader. From 9am am to 5pm, we’ll be rolling up our sleeves and knuckling down for a serious hit of web savvy. Numbers are capped at 40 for each workshop, ensuring a great learning environment.

This year’s chosen workshop topics are already proving popular. First up, we’ve got the unstoppable force of web awesomeness that is Paul Boag. Director of Headscape, Paul will be leading a crash course in Running A Successful Web Design Business: ”We like to think that being a successful independent web designer is about creating great websites. Its not. Running your own business is about a lot more than having the right professional skills. ”

After wowing the crowds as a Rising Star back in 2011, Steve Fisher has rapidly become one of our most popular speakers. He’ll be joining us again in London to lead his Rock Solid UX Deliverables workshop: “No longer something that has to always be hugely complex and costly, we’ll cover the back-to-basics approach to UX design in this workshop and how to practically dispatch a rock solid responsive web design UX deliverables package.” 

Next up, creator of the uber popular Coach to 5K app, Josh Clark will be crossing the Atlantic to deliver his Teaching Touch workshop – a sell out success at FOWD NYC last year: “The workshop presents nitty-gritty ‘rule of thumb’ design techniques that together form a framework for crafting finger-friendly interface metaphors, affordances, and gestures for a new generation of mobile apps that inform and delight.”

Last but not least, longtime Carsonified favourites, the Web Standardistas will be joining the fun, to teach their Good Ideas Grow On Paper workshop: “Armed with some fundamental design principles and an abundance of tools – which naturally includes the Standardistas’ ‘Bag of Awesomeâ„¢’ (containing a veritable cornucopia of material) – we show the aspiring analogue designer a range of methods for breaking out of the stranglehold of the often clichéd digital world.”

close article | permalink

Microsoft’s new version of Internet Explorer has barred browser plugins in the Metro environment. But Microsoft has revealed a method that plugin-dependent websites can use to leap over Metro’s walls and reach the green fields of the conventional Windows desktop, where Flash is still allowed to roam free.

The relevance of proprietary browser plugins is declining as standards-based web technologies mature. Native web technologies don’t yet supply complete functional equivalence with the capabilities of plugins, but the open web has the advantage of greater ubiquity.

The ubiquity of native web standards over proprietary plugins is set to get a major boost from Microsoft with the launch of Windows 8 and Internet Explorer 10. As we have previously reported, the next major version of Microsoft’s web browser will not display plugins in the Metro environment, which will be the default shell in Windows 8.

A plugin-dependent website prompting the user for permission to run on the desktop. Image courtesy of Microsoft

Microsoft has published a series of posts in its official IE development blog that discuss the implications of this change and what it means for users and web developers. In a new post published this week, IE program manager lead John Hrvatin highlighted the advantages of plugin-free browsing and emphasized the need for web developers to start supporting users who browse in environments that don’t have plugins enabled.

“The transition to a plug-in free web is happening today. Any site that uses plugins needs to understand what their customers experience when browsing plugin free. Lots of web browsing today happens on devices that simply don’t support plugins,” he wrote. “Metro style IE runs plug-in free to improve battery life as well as security, reliability, and privacy for consumers.”

A growing number of websites that rely on browser plugins already offer a standards-based fallback for users who are browsing on popular plugin-free devices such as as the iPhone or iPad. Microsoft has previously discussed some of the steps it is taking to ensure that those websites serve their plugin-free content to Metro users.

There will still likely be many Flash-heavy websites, however, that can’t accommodate users who are browsing without plugins. In the blog post, Hrvatin explained that such websites can ask the user for permission to jump to the conventional Windows desktop and launch the windowed version of Internet Explorer, which will have full support for plugins.

Web developers can get the browser to display the prompt by including the special requiresActiveX=true property in an X-UA-Compatible meta tag or HTTP header. Hrvatin cautions that this feature is included for transitional purposes and is intended to serve as a last resort. The preferred behavior is still for web developers to display a plugin-free version of their site to users who are browsing in the Metro environment.

This article originally appeared on Ars Technica, Wired’s sister site for in-depth technology news.

close article | permalink

App developer Readdle has been very busy lately. A big update arrived recently for its PDF Expert software, and now the company is also launching a brand new note-taking and PDF annotation iPad app called Remarks. Here’s a hands on look at what the app offers users.

Remarks, like PDF Expert, offers PDF annotation and filling tools, but it’s a much more streamlined tool than that app, with a focus on making it easy to mark up and share documents, as well as create your own notes and notebooks independent of any pre-existing PDFs that can also be marked up and shared with other Remarks users for collaborative work.

Remarks is that rare beast among PDF tools, either on or off the iPad: it features a simple, straightforward interface and everything work very quickly, with speedy response times for turning pages, adding notes, and basically anything else you’d want to do. Tools, including pens, highlighters, preset shapes and text entry, are clearly labeled with simple icons, and there’s no visual clutter or wealth of unnecessary options to distract you from what you actually need to get done.

Sharing may be one of Remarks’ best feature. Using email, you can easily share documents with other Remarks users, including annotated PDFs and notes created in the app itself. But in an upcoming update, Readdle is planning to introduce Dropbox, Box.net and other cloud storage sharing options, too, making it even more convenient for doing collaborative work.

Paired with a Bluetooth keyboard or stylus, Remarks is even more useful. It features effective accidental touch or wrist-detection, meaning you can write naturally with a stylus without worrying about drawing in the wrong place, and regular Mac key shortcuts like Command+C, Command+V and Command+A work with keyboard text input.

Remarks allows flexibility in creating notes and notebooks, allowing you to rearrange pages as you add them or after the fact, but it doesn’t overwhelm with options like other iPad notebook offerings. And since it’s also a full-fledged PDF annotation tool, and one that can be used collaboratively, it’s probably one of the most versatile iPad apps for students, and a fairly inexpensive one at $4.99.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• NewNet Q4: Platform mania and social commerce shakeout
• A field guide to cloud computing: current trends, future opportunities
• The rise of tablets in the enterprise

close article | permalink

Every now and then, we release useful freebies for all of our highly valued readers. Today, it is our pleasure to present to you Cuberto‘s fantastic St. Valentine’s icon set  —  exclusively designed for Smashing Magazine and its loyal readers. The icons presented are available in transparent PNGs as well as Photoshop PSDs (128×128 px) and are perfect for any projects you have coming up for St. Valentine’s Day. Enjoy!

Download the Set for free!

This icon set is completely free to use for commercial or personal applications without any restrictions. Please link to this article if you want to spread the word.

• large preview
• download the .zip-package (.zip, 2 Mb)

Initial sketches of Cuberto’s St. Valentine’s icon set.

Quick preview of the icons in the set.

Behind the Design

As always, here are some insights from the designers:

“Our goal was not only to create nice icons but also a functional set that can be used in navigation elements as well as gifts throughout social networks on the upcoming sweet Valentine’s day. Please link to this article if you want to spread the word.”
 —  Peace and Love

Thanks Cuberto, we sincerely appreciate your time and your intentions!

(il)

© Smashing Editorial Team for Smashing Magazine, 2012.

close article | permalink

If you like jsFiddle, then you will love SQL Fiddle. It allows you to select a database, build a schema, populate the schema and run queries against it. The service currently supports MS SQL, MySQL, Oracle, and PostgreSQL. Why is this interesting? You can compare databases, post questions to forums along with your schema and query or just prototype an idea.

close article | permalink

Some people start businesses because they want to get rich. Some because they need to solve a problem that’s been annoying them for ages. And some just want to be able to wear flip-flops to work.

Several years ago, when Brian Curin and his business partners were busy building up the Cold Stone Creamery franchise, “We built a big office, the Taj Mahal of offices,” he explains. But this group of surfers and outdoor enthusiasts wasn’t particularly taken with the suit and tie lifestyle, so when they moved on to their next venture, they let their lifestyle considerations guide them.

The result is Flip Flop Shops, a quick-growing franchise of more than 45 stores selling beach-ready footwear, that Curin, who serves as president, and four partners run out of home offices spread from Atlanta to Vancouver, British Columbia. “It’s a true lifestyle brand,” says Curin. “Jeans, T-shirts, shorts, flip-flops: that’s what we wear everywhere and what’s nice is it’s sort of expected. So where most people couldn’t get away with dressing like bums, when we go to places everyone goes: ‘Oh, it’s the Flip Flop guys. It’s OK. Let them in.’”

Talent

Curin has a simple mantra when it comes to hiring: Attitude first. When adding to their team of support staff (currently five people) or deciding who gets a franchise, experience and qualifications come behind passion. “It’s so critical for us to get the absolute right fit, and that may not be the most qualified all the time. It may just be the person who goes, ‘I used to work in the corporate world and I’d cut off my left arm if I didn’t have to deal with that,’” he says, adding “when you find those people, you just have to set the expectations.”

And a particular location isn’t among his. “Go to Mexico!” he tells his staff. “You’d probably do better if you were just living the life and doing what we need you to do.” Nor are set hours important. “If the waves are good, they’re probably going to be out of their office,” Curin concedes. What is important is that people get work done on time and forge a personal relationship with the team.

To find the right talent for this type of team, Curin is a firm believer in interviewing face to face. “People can sound one way on the phone and interview great and look good on paper, but nothing compares to face to face,” he says, but he’s also a huge fan of a healthy degree of social media snooping to screen candidates before that stage.

“People aren’t smart on Facebook. Most people put everything out there, and so in a matter of a few minutes you get a really good flavor for their vibe. You either like it or you don’t, but it makes you way more prepared when you go meet with them,” he explains. Referrals also help ensure cultural fit: “It’s rare that we get somebody that’s just cold, never met them, out of the blue.”

Tools

In collaboration tools, as in footwear, Curin doesn’t get too fancy. “Part of the whole ‘free your toes’ mentality, this lifestyle we lead, is simplicity, so Apple,” he says, giving a one word answer to the tools his team uses to keep in touch. “Apple gives us all the gadgety things we need — iPhone, iPad, iEverything — to make this whole virtual office thing work for us,” he continues, sounding like a contented fanboy. Anything else? Just FaceTime (Apple again) and “no less than 20″ calls a day to CEO Darin Kraetsch.

The company is also a fan of social media, as we’ve heard for recruiting, but also for keeping up to date with franchisees. “We set up a closed loop Facebook page for shop owners only. We’re the admins on it so we can accept or deny people. The public can’t view it, and it’s set up as a platform for all of our shop owners to talk and share best practices, complain, share inventory, whatever it is,” he says.

Tips

“We respect the fact that we’ve got a really good thing here. We don’t suit-and-tie it. We don’t report to anybody,” says Curin, but he does see one downside to his current setup, and it’s a common one for virtual workers. “The one downfall is you truly never get that total shut off downtime except maybe once, twice a year where we tell each other, ‘hey, I’m going to Hawaii,’ my phone’s done,’” he says.

And while Curin admits that shutting out work stuff at home is a challenge, he’s firmer about shutting out home stuff when he’s working. “Make sure your space is set up the right way, so basically, when you go in there, it’s: ‘I am at work.’ You’ve got to make sure those ground rules are set with your significant other or your roommate, whoever it is.” And this space shouldn’t just be any old desk, chair, computer setup but a place that truly reflects your lifestyle. “To do it successfully, you can still be in your pajamas, but make sure your space fits the vibe of whatever business that you’re in.” Need an example? Check out Curin’s home office to the left.

Image courtesy Flickr user VanDammeMaarten.be.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• NewNet 2012: companies and technologies set to disrupt
• Millennials in the enterprise, part 1: strategies for supporting the new digital workforce
• Report: High-Impact Collaboration in the Enterprise

close article | permalink

In this 4 minute video, you will learn about the concept of control flow in Ruby. This goes in to using if/else statements and case statements

This video is from Treehouse, a high-quality video training site with hundreds of short videos on topics like …

• Accessibility
• CSS3
• Aesthetic Foundations
• Django
• HTML
• CSS
• HTML5
• iOS Development
• JavaScript
• jQuery
• NoSQL
• PHP
• Responsive Web Design
• Ruby
• Ruby on Rails
• UX
• Version Control
• WordPress Theme Design

New videos are added regularly, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

close article | permalink

It’s important for designers to translate the ideas in their heads into a tangible form that stakeholders can relate to. Prior to writing any code, wireframes are a great way to quickly map out the functionality and flow of a website or application. This helps anticipate conflicts (“That's not what I had in mind") early in the process, at a point where they are painless to correct.

Dedicated wireframing tools are in abundance, so you might be surprised that my weapon of choice for sketching wireframes is Microsoft PowerPoint. PowerPoint makes it possible for stakeholders and non-techies to participate in the design process. When exchanging PowerPoint slides over email, you can be fairly certain everyone will be able to view and edit them. The software’s widespread availability and low barrier to entry make it an excellent communication tool, able...read more
By Andreas Wulf

close article | permalink

Hi designers! I’m not a designer. Sorry. I’m a developer. I can barely tell when things look good or not. This week I learned that there are different ampersands out there (thanks, Allison!). But that’s not why I’m writing today. We all have to work together. Professionally, one way we do that is by using version control. A version control system tracks changes to your code. There are a lot of different version control systems out there. Today we’ll be talking about git. Specifically, as it relates to designers making web sites.

Why Use Version Control?

You might be wondering why you should use version control, even for a site you’ll never collaborate with anyone on. This is a valid question. I can best illustrate the answer with a scenario you may have encountered in the past. Let’s say you’re in the middle of making a site and want to try something crazy with the css. Maybe you want to do a bit of an experiment and make everything strange shades of yellow and red. You don’t know if you’re going to keep the work when you finish it. Since it’s an experiment, it would probably be a good idea to not mess up your working version of the site.

At this point, you might be thinking of creating a copy of the site and making your changes on the copy. Maybe you’re sure that you’re going to use this work and you’re going to crank through. Maybe it doesn’t work out, though. Wouldn’t it be nice if you could take a snapshot of your site now, do your experiment, and not have to worry about whether you mess things up? That’s exactly what version control is for!

Step 1: Install and Configure Git

In order to start working with git, though, we need to install it. Git is fairly easy to install. If you’re using Windows, GitHub has an excellent set up guide to get git installed on Windows. They also have great guides for Mac OS X and linux. If you don’t already have git installed, follow those guides and come on back here.

Once you have git installed, you have to tell it who you are. This is done using the config command. Open Terminal and type in the following:

$ git config --global user.name "Jason Seifer"
$ git config --global user.email "jason@teamtreehouse.com"

Step 2: Initialize a repository

We’re going to initialize a git repository now. A repository is just a directory with one or more files we want to track the changes of, in this case our web site. Open up terminal (or command prompt on Windows) and change to the directory containing the site you want to put in to git. Once you’re in there, type the following:

[~/Sites/think_vitamin] $ git init

Assuming you have correctly installed git, you should see the following:

  Initialized empty Git repository in /Users/jason/Sites/think_vitamin/.git/

This is git telling you that thinks are working and that the path it gave you is now a repository. If you don’t see that output, go back to step 1 and verify that everything was correctly installed.

Step 3: Add Your Files

Now that we have initialized our git repository, we have to tell git what files we want to add to the repository. In order to do this, we use the add command. The add command takes either a single file or a path. The add command takes the changes you’ve made and adds them to something in git called the staging area. The staging area is kind of like a waiting room for git. It lets you tell git what changes you’re going to add to the main index.

Since we are already in the directory with our web site, we’ll tell it to add the path of the current directory:

[~/Sites/think_vitamin] $ git add .

At this point, you won’t see any output. My example is just an index.html file. In order to see what git is about to stage, you can use the status command:

[~/Sites/think_vitamin master]$ git status
 
# On branch master
#
# Initial commit
#
# Changes to be committed:
#   (use "git rm --cached <file>..." to unstage)
#
#	new file:   index.html
#

The first line of the output says "On branch master". In git, a branch is just a pointer to something called a commit (explained in the next section). Since this is our first commit, git lets us know that on the second line of output where it says Initial commit. Next, git says there are changes to be committed. My index.html file is there since it’s the only thing I have in the directory right now. This is good!

Step 4: Commit Your Chages

A commit in git is a pointer to a series of changes that you have told git you want to track with the add command. When you commit your changes, git writes them to the index. This is git’s way of saying "this is what the repository looked like at this point in time." So let’s commit our changes:

[~/Sites/think_vitamin]$ git commit -m "Initial commit"
[master (root-commit) 542d5fa] Initial commit
 1 files changed, 1 insertions(+), 0 deletions(-)
 create mode 100644 index.html

Here we use the commit command to tell git to commit our changes to the repository. The -m argument told git that we want to give the commit a message. My message here was "Initial commit" because this was the first commit to the repository. As you make changes, you can be much more descriptive. This is helpful when working on larger teams. Time Pope has a great article on writing good commit messages if you’d like any pointers.

The important thing about commits is that, once you have committed changes, you can always go back to how your repository was at the point in time of that commit. How cool is that? That means that you’re now free to make horrible changes to your site. Wnat to see how Comic Sans looks for all the headers? Go for it! You can always go back.

Step 4: Make some changes

Now that things are committed, you can feel free to make some changes to your code. In my example web page, I made changes to the header of the page. Now we can run git status again to see what happened:

[~/Sites/think_vitamin]$ git status
# On branch master
# Changes not staged for commit:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#	modified:   index.html
#
no changes added to commit (use "git add" and/or "git commit -a")

Now we’ll add the file we just changed:

[~/Sites/think_vitamin]$ git add index.html
1.9.3 [~/Sites/think_vitamin]$ git status
# On branch master
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
#	modified:   index.html
#

Finally, we’ll commit the change:

[~/Sites/think_vitamin]$ git commit -m "Modify home page header"
[master bc8251b] Modify home page header
 1 files changed, 1 insertions(+), 1 deletions(-)

Great! We just made our first two commits. Our co-workers will love us for writing a descriptive message along with the second commit, too, although they might also still be mad for taking the last cup of coffee.

Step 5: Make a branch

Remember earlier when we were talking about making experimental changes that you may want to keep? That’ what branches are for! Branches let you easily separate your work. You can have two branches going at the same time with different work. Branches are great for experimentation with something that you’re not sure you’re going to keep.

Let’s say we wanted to change the font on all headers to Comic Sans. You’re not sure how this is going to look (bad) but your client really wants you to give it a try anyway. Let’s create a branch to do that just in case we want to switch back. In git terms, we call this process creating a branch. We do that by checking out the branch and passing a flag to git saying that we want to create it:

[~/Sites/think_vitamin]$ git checkout -b comic_sans
Switched to a new branch 'comic_sans'

Now that we’re on our comic_sans branch, we are free to make changes and commit them. This won’t affect anything on our master branch until later. Let’s make our changes:

[~/Sites/think_vitamin]$ git status
# On branch comic_sans
# Changes not staged for commit:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#	modified:   index.html
#
no changes added to commit (use "git add" and/or "git commit -a")

Git also let’s us see what changed in between what we’re about to stage with the diff command:

[~/Sites/think_vitamin]$ git diff
diff --git a/index.html b/index.html
index 159202e..266d025 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-<h1>Hello world</h1>
+<h1 style="font-face: Comic Sans">Hello world</h1>

We can also add and commit the change with one command by using the -a flag when committing:

[~/Sites/think_vitamin]$ git commit -am "Make header font comic sans"
[comic_sans 94af8b2] Make header font comic sans
 1 files changed, 1 insertions(+), 1 deletions(-)

Now we’ve committed to the comic_sans branch. Sweet!

Step 6: Merge your changes

Our client is now happy with the header changes. Our experimental branch we created now needs the changes to make their way back in to our main branch. We do this through a process called merging. What we want to do is merge or changes from the comic_sans branch back in to the master branch. First, we have to go to the branch we want to merge to. We do that by checking out. This time, we won’t use the -b parameter since we’re not creating the branch:

[~/Sites/think_vitamin]$ git checkout master
Switched to branch 'master'

Now we use the merge command to get our changes from the comic_sans branch in to master:

[~/Sites/think_vitamin]$ git merge comic_sans 
Updating bc8251b..94af8b2
Fast-forward
 index.html |    2 +-
 1 files changed, 1 insertions(+), 1 deletions(-)

Boom! Now we have all of our changes in to git. If we want to see what these changes were, we can use th log command to get a nice display of times, dates, and authors:

[~/Sites/think_vitamin]$ git log
commit 94af8b2e976ba11755f7483bc761ea2b9a747e0a
Author: Jason Seifer <me@jasonseifer.com>
Date:   Wed Feb 1 15:07:45 2012 -0500
 
    Make header font comic sans
 
commit bc8251b338b8ac4451888e1da482708df6264529
Author: Jason Seifer <me@jasonseifer.com>
Date:   Wed Feb 1 10:16:41 2012 -0500
 
    Modify home page header
 
commit 542d5fab4c86d29a125a78b8a89366f70bdfaa9d
Author: Jason Seifer <me@jasonseifer.com>
Date:   Wed Feb 1 10:10:01 2012 -0500
 
    Initial commit

Well Done!

In this article we learned how to install git, create a repository, change branches, and commit changes to our code. In the next article in this series, we’ll learn about removing files, going back to different commits, and pushing up to GitHub and working with other people. Stay tuned!

close article | permalink

“To most effectively build a thriving enterprise social network, the existing groundswell community, forward-thinking leaders, and use case influencers must be directly involved and feel a personal connection to the success of the network,” said Murray. He noted that although all three of these user groups are important, they each play different roles.

Marketing, sales, information technology, and formal communities of practice are all tangible units at the heart of an organization. Yammer’s implementation experts have found that great things happen when these segments identify use cases for the product. Groundswell adoption and executive attention are both valuable for awareness, but the heart is best able to combat the “what’s in it for meâ€� questions that push back against any new collaboration tool. The heart has identifiable work to get done that can often benefit in a visible way by having faster or broader access to knowledge across the organization.

Value From Sharing Across Similar Stores & Regions

Supervalu  (a nationwide grocery and pharmacy company, which owns Albertsons, Lucky, and Jewel-Osco) provides an especially good example of how Yammer can help facilitate collaboration. When Supervalu’s CEO Craig Herkert started in 2009, he aimed to transform the company through “radical transparencyâ€� and give the stores a hyperlocal focus to better meet their customers’ needs.

With a history that goes back to 1870, Supervalu was a conservative company where social media use was rare. There had been informal use of Yammer at Supervalu for years, but things didn’t take off until the business units began developing ways to support the hyperlocal efforts in the stores.

In one particularly effective project, store directors photographed product displays, posted the pictures on Yammer, and linked the images to local demographics and outcomes. Directors in similar situations (e.g., a college town during spring break) were able to use that information to decide which displays were likely to generate the most sales.

Herkert’s executive vision gave collaboration and transparency greater credibility and budget, but it was the business goal at the heart of the company that gave the collaboration efforts the energy to spread.

As Herkert says in this video, “Yammer has made my life easier, but what it has really done is made my life as a CEO better. Better because I’m able to listen and converse with all of our associates. Real time. All the time.”

7-Eleven convenience stores provide another example. Similar to Supervalu, Yammer was adopted by a groundswell community, and the executives were on-board, but it was in the heart where the value grew.

The company is built on a very distributed model with stores spread around the globe. David Sacks, Yammer’s CEO, said 7-Eleven aimed to use Yammer to “unify its distributed workforce, drive consistency across franchise locations, and foster better communication among employees and leadership.”

7-Eleven’s information technology group was the first to use Yammer, but now the dominant use case is of directors tracking regional trends and sharing that information. They also appreciate how easy it is to quickly share examples of employees supporting their guest services culture. For instance, a story about an employee who helped a customer change a tire in a 7-Eleven parking lot might not be something that would be emailed to all, but it’s perfect for a short post.

Sharing with a Purpose

Sharing is a crucial part of collaboration, and tools such as Yammer provide us with low friction ways to share our knowledge, activities, and results. Yammer’s experience with their clients suggests that while broad, groundswell support and executive attention are important for creating a viable network, business success comes from sharing at the heart of the organization’s work.

How are these three levels (groundswell, heart, executive) of importance in your own collaborations?

Images courtesy of Yammer

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Millennials in the enterprise, part 1: strategies for supporting the new digital workforce
• The Future of Workplaces
• The Future of Work Platforms: An Overview

close article | permalink

Mozilla has officially released Firefox 10. The new version of the open source web browser includes a handful of improvements and new features. The browser’s built-in tools for web developers got a particularly significant boost in this release. The new version also offers better support for a number of web standards.

Firefox’s developers decided last year to transition the browser to a time-based, six-week release cycle. The new release management strategy ensures that performance improvements and support for new web standards reach users as soon as possible. The faster release cycle posed challenges, however, for enterprise adopters and other users who require a longer support period. In order to address that issue, Mozilla has decided to offer an annual extended support release with a full year of updates. Firefox 10 is the first official extended support release.

A minor adjustment to the browser’s navigation bar is the biggest user-facing change in Firefox 10. The forward arrow button is no longer persistently visible by default in the navigation toolbar. It will only appear when the user navigates back a page. That means the button only shows when it can be activated. When the user clicks the forward arrow button and returns to the front of the history stack, the button will disappear again.

The distinctive keyhole shape that is formed by the back and forward buttons in Firefox’s navigation toolbar has been characterized in the past by Mozilla designers as an important part of the browser’s visual identity. Much like the angular tabs in Chrome, it’s an aesthetic characteristic that is uniform across platforms and helps make the browser recognizable.

The user interface change in Firefox 10 will make it so that the keyhole shape is only visible when the user navigates back. The feature worked predictably in our tests and didn’t pose any problems in practice. It’s worth noting, however, that it doesn’t appear to be available when the user has toggled the preference for small toolbar icons.

The new developer tools in Firefox 10

Another major change in Firefox 10 is the introduction of new developer tools. Previous versions of the browser have included a web console, a JavaScript scratchpad, and a simple tool for inspecting the Document Object Model (DOM). Firefox 10 has a new tightly-integrated developer panel with a richer DOM inspector and a tool for viewing, toggling, and modifying CSS properties.

The DOM inspector follows your cursor as you move it over elements of the page and will lock in on an element when you click. An HTML pane at the bottom of the screen will show you the markup for the target element and allow you to modify the values of element attributes. The HTML inspector pane also has a slick breadcrumb bar that makes it easy to see the position of the target element in the page hierarchy.

The CSS inspector will show you a list of CSS properties associated with the selected element, including inherited properties. Each one has a checkbox that you can click to toggle visibility. You can also click one of the values to replace it on the fly.

These built-in development tools in Firefox are simpler and less intrusive than more sophisticated alternatives such as the Firebug add-on. There are a number of additional features under development that will be included in the inspector panels in future versions of the web browser. One of the most intriguing is a tool that uses WebGL to show the user a three-dimensional representation of the page DOM. That feature wasn’t ready for inclusion in Firefox 10 and will potentially appear in the next major release.

In addition to the new inspector, web developers can also look forward to improved support for web standards. An addition of particular significance is a new full-screen API, which makes it possible for an individual HTML element to break out of the browser window and stretch itself to cover the entire screen. This feature is going to be especially useful for videos and games. You can see it in action by visiting Mozilla’s fullscreen demo page.

We first wrote about the full-screen API in November, when the feature originally landed in nightly builds. Mozilla carefully considered potential abuse scenarios when implementing the feature. It’s designed so that an element can only switch into fullscreen mode in response to a direct user action. The browser ensures this by using a technique similar to the one used to block unwanted popup windows.

Another addition in this release is support for 3D CSS transforms. This feature, which was originally created by Apple, offers a declarative mechanism for applying animated three dimensional transformations to individual HTML page elements. It’s important to note that 3D CSS transforms are entirely distinct from WebGL, which is a low-level JavaScript API for 3D programming.

Support for 3D CSS transformations is a welcome addition to the browser. Developers are already using the feature in the wild, but most of the existing 3D CSS content was authored with WebKit-specific prefixes and consequently won’t work in Firefox yet.

Firefox 10 is a solid release that expands the browser’s capabilities. Although the lineup of new features is slim, it’s a respectable update by the standards of the rapid release model. The new version will be pushed out through the Firefox update system shortly. Firefox 10 can also be downloaded directly from the Mozilla website. For more details, you can refer to the official release notes.

This article originally appeared on Ars Technica, Wired’s sister site for in-depth technology news.

close article | permalink

It used to be one of the biggest pains of web development. Juggling different browser versions and wasting endless hours coming up with workarounds and hacks. Thankfully, those troubles are now largely optional for many developers of the web.

Chrome ushered in a new era of the always updating browser and it’s been a monumental success. For Basecamp, just over 40% of our users are on Chrome and 97% of them are spread across three very recent versions: 16.0.912.75, 16.0.912.63, and 16.0.912.77. I doubt that many Chrome users even know what version they’re on — they just know that they’re always up to date.

Firefox has followed Chrome into the auto-updating world and only a small slice of users are still sitting on old versions. For Basecamp, a third of our users are on Firefox: 55% on version 9, 25% on version 8. The key trouble area is the 5% still sitting on version 3.6. But if you take 5% of a third, just over 1% of our users are on Firefox 3.6.

Safari is the third biggest browser for Basecamp with a 13% slice and nearly all of them are on some version of 534.x or 533.x. So that’s a pretty easy baseline as well.

Finally we have Internet Explorer: The favorite punching bag of web developers everywhere and for a very good reason. IE represents just 11% of our users on Basecamp, but the split across versions is large and depressing. 9% of our IE users are running IE7 — a browser that’s more than five years old! 54% are running IE8, which is about three years old. But at least 36% are running a modern browser in IE9.

7% of Basecamp users on undesirables
In summary, we have ~1% of users on an undesirable version of Firefox and about 6% on an undesirable version of IE. So that’s a total of 7% of current Basecamp users on undesirable browser versions that take considerable additional effort to support (effort that then does not go into feature development or other productive areas).

So we’ve decided to raise the browser bar for Basecamp Next and focus only on supporting Chrome 7+, Firefox 4+, Safari 4+, and, most crucially, Internet Explorer 9+. Meaning that the 7% of current Basecamp users who are still on a really old browser will have to upgrade in order to use Basecamp Next.

This is similar to what we did in 2005, when we phased out support for IE5 while it still had a 7% slice of our users. Or as in 2008, when we killed support for IE6 while that browser was enjoing closer to 8% of our users.

We know it’s not always easy to upgrade your browser (or force an upgrade on a client), but we believe it’s necessary to offer the best Basecamp we can possibly make. In addition, we’re not going to move the requirements on Basecamp Classic, so that’ll continue to work for people who are unable to use a modern browser.

Basecamp Next, however, will greet users of old browsers with this:

close article | permalink

Independent and remote work may be on the rise and, as many experts have told us, this offers great benefits, from access to new markets for previously underemployed talent to the joys of autonomy and control for workers. But not every aspect of the change is rosy. Provision of benefits like health insurance is an often mentioned problem as is downward pressure on wages, but on Deskmag recently, Nina Pohler identified another potential problem: exploitation of independent workers by those contracting out work.

“While coworking spaces might come pretty close to the ideal working space, at times they can also be spaces where some of the worst characteristics of a capitalist economy are being reproduced — just like in an ordinary workspace,â€� she writes. Independent work may solve many problems, but it doesn’t get rid of asymmetric relationships between those handing out work and those completing it, she states. What does she mean by this?

If there is a big difference between the partners in a work relationship, sometimes the stronger party gets all the advantages and benefits, while the weaker party has to bear the full risk and disadvantages.

Usually the strong partner is someone who is established and well connected. Often these people or companies are very good at communicating and selling, they act mainly as project managers, while contracting out the actual development or design work to other people. The subcontractors in turn are often newcomers who don’t have a big network, who are rather inexperienced and not as good at selling themselves and their work. Usually these people are happy that someone subcontracts them work and they don’t have to spend time on acquisition, communicating and networking. The relationship between the main contractor and the subcontractor can be win-win situation, but rather often it is not.

The result of this unequal balance of power, Pohler claims, can be impossible deadlines, insane hours, failure to pay for revisions to a project and extremely long lag times before payment for subcontractors. And coworking spaces, she feels, may be inadvertently making the problem worse. “It is easy to find young, skilled and motivated people as subcontractors, and it is easy to build relationships on the assumption that everyone is more or less the same and equal,� she writes.

Pohler may diagnose the problem in her article, but when it comes to solutions, she simply advocates for greater discussion of the issue and more openness in the community.

Is that an adequate solution, or do you think independent workers need to do more to protect themselves?

Image courtesy of Flickr user JD Hancock.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Millennials in the enterprise, part 1: strategies for supporting the new digital workforce
• A 2011 NewNet Forecast
• Report: Web Worker Survey 2010

close article | permalink

It’s no secret that I am in love with Google Fonts. In fact, I use Google Fonts frequently in Treehouse videos. :)

The ongoing drawback to Google Fonts has been the smaller selection compared to other font services, but that’s rapidly changing. Even better, an editorialized web page called “Beautiful Web Type” has popped up that showcases the best fonts that Google has to offer. Loving this!

close article | permalink

Josh Todd and Mike Guida not to long ago were Affiliate Managers for one of the leading Affiliate Networks – GetAds.

They were pulling down good money and living the dream. If you know GetAds founder George Avery at all you know he is a really great guy and takes care of his people.

Last fall Josh Todd quit GetAds to do his own thing.

But it was not that cut and dried. Mike Guida and Josh had plans for a long time to start their own affiliate network called The Black Tie Network. The plan was to keep Guida in place at GetAds so they could steal affiliates and advertisers over to their own network.

It took GetAds a while but eventually one of their top affiliates told GetAds that Mike Guida, an affiliate manager at GetAds, solicited them to come over to their Black Tie Network and represented himself AS GetAds…

Well immediately Mike was fired from GetAds. A place where his child hood friend, George Avery, hired him many years ago and taught him the industry.

Mike had wiped EVERYTHING from his computer when he was let go.

The next day company founder George Avery took his computer to a forensics company which was able to completely recover all of the contents of the computer. What was revealed was amazing. The evidence was huge against them.

GetAds immediately filed a lawsuit against former affiliate managers Josh Todd and Mike Guida. They also sought out a court injunction which would immediately freeze all bank accounts and stop the rogue affiliate network owned by them to stop doing business.

The next day both Josh and Mike attempted to contact GetAds to throw each other under the bus. Each of them had grand stories about how it was all the others idea.

But from the evidence GetAds had gathered it seemed pretty clear that they were working together and they proceeded.

On Monday they all went to court yesterday the judge granted the injunction ceasing all assets of Josh Todd, Mike Guida, and the Blacktie Affiliate Network.

GetAds proceeds on with the lawsuit seeking attorneys fees, lost revenues and damages to the company.

In my opinion, from what I have seen and been told, the evidence is pretty clear and the lost revenue to GetAds seems pretty sizable.

I fully expect a judgement against Josh Todd and Mike Guida to be in the 7 figure neighborhood.

This sounds like some crazy anomaly though right? Wrong… It happens all the time in this industry. Affiliate Managers get greedy and start their own network…. and fail…

Guess who gets f’d in all this? The affiliates that Josh and Mike conned. They will never get paid. Josh and Mike are scewed in this industry and rightfully so.

Think about how shitty this is. A guy like George Avery takes all the risk starting this company… He takes in people and trusts them and they totally fuck him. Good for him on taking these dirtbags down.

close article | permalink

Nick La over at Web Designer Wall put together a great article on how to style images with CSS3. The styles include: Basic Style(rounded corners), Embossed Style, Soft Embossed Style, Cutout Style and Glossy Overlay. I personally love the Embossed Style, it’s ideal for interface buttons. Originally Nick ran into some issues when styling for a responsive layout. He quickly fixed them with an alternate solution. Check out the article to see his solution. Great job Nick, we appreciate the tips and tricks!

View the Tutorial
Demo Page

close article | permalink