The amount of data available of publicly online is astounding. The US Government has done a pretty good job of providing detailed data to it’s citizens on pretty much anything they keep tabs on. The census data immediately comes to mind, but there is much much more if you take the time to look for it. I stumbled across the USASearch.gov search engine while looking for some population data for cities. The search engine is not as accurate as Google unless you know the government lingo for your data, but it’s pretty good. I suspect there’s a data set there somewhere that would enhance any businesses results and the only cost to you is figuring out how it applies to what you do.

The newsfeed is the single most important touchpoint for any application within the current Facebook design. Facebook has been working very hard to combat spam over the last 12 months. They have reduced the number of invitations, notifications and messages applications can send per day. Additionally, they now monitor the recipient responses to the communication, and create a quality rating based on it. That said, the newsfeed is still the primary source where most people will first interact with an application. As such, it is monumentally important that all outward communications from your application, email, invites, and feed items, are built carefully and intentionally.

This post is a followup to an earlier post covering the key design components of an application. While most of these items are language specific, there are some opportunities for creativity and these areas should be familiar to the designers as well as the marketers and developers.

Newsfeed Stories

There are three flavors of newsfeed stories, one line, short and full. The end user ultimately has the final say on which (if any) of the article types your application can publish. Remember, keep the user experience clean, neat and consistent with Facebook. Newsfeed articles are generated using dynamic variable population of a pre-defined template. For example, a story might look like “{actor} rated <i>{movie}</i> {stars} stars.” At runtime, your developer will pass values for these variables and the final story might look something like, “Erik rated <i>Lakeview Terrace</i> 3 stars.” This templated format is carried through the newsfeed with the exception of the “General Body” field, which is only present in the short story. Facebook provides a very robust developer console which includes the Feed Preview Console. If you haven’t already done so, I recommend installing the developer application so you can access these tools.

One line

Just like the name implies, this is as short as it gets. Links are permitted in the title. The only graphic is the 16 x 16 pixel graphic assigned to the application.

Newsfeed Item - One Line

Key Features:

• Aggregates to newsfeed
• Least intrusive

Short

Short stories begin providing some real flexibility. Up to four 75 x 75 pixel images can be included (scaled dynamically by Facebook as needed) and linked individually. Additionally, more detailed text can be passed. Additionally, a third area called “general body” can also be passed. Some limited HTML is allowed within the templated portion of the story, but not within the “general body.”

Newsfeed Short Story from Honesty Box

Key Features:

• Up to 4 optional images (defined as parameters)
• Freeform Text Block called “General Body”
• No images, tables, or forms within template
• Bold, Italics, Links are allowed within the template
• Aggregate to the newsfeed

Full

As the name implies, Full stories are just that, full. Not only can they include HTML, they can even include form elements! This allows for a dynamic newsfeed item. While your initial reaction may be to jump in and make everything Full stories, they will not aggregate to the main newsfeed and are only useful within the mini-feed.

Newsfeed Full Story from Honesty Box

Key Features:

• Forms
• Images
• Tables
• Does not aggregate

Appended Test Text

This is the text that was appended to the default feed items to see which HTML components were valid. The screenshot shows the output of the default settings. I also added an image to the images array. I noticed that the short story images don’t always load in the console, however, referencing external images seems to work fine.

Newsfeed Template Test Console

<p>Paragraph text</p>
 
<b>Bold Text</b>
<i>Italic Text</i>
 
<a href="http://www.google.com">Link Text</a>
 
<h1>Testing H1</h1>
<h2>Testing H2</h2>
<h3>Testing H3</h3>
 
<table border="1">
<tr><td>c1</td><td>c2</td></tr>
<tr><td>c3</td><td>c4</td></tr>
</table>
 
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />

Invitations/Requests

Some have proclaimed the application invite dead as a viral tool. While they certainly less effective than the early days of the platform, they are still very much an integral component of a marketing strategy. Facebook prohibits any application from incentivizing users to send invitations so forget that. Also off limits are forced invites, so don’t even consider putting the invite screen in your normal application flow.

Application Request

Aggregate News

Facebook’s algorithms attempt to merge stories together whenever possible for an individuals newsfeed. In this way, highly popular applications will have reduced numbers of entries within a single newsfeed, instead referencing multiple friends together, making the experience much better for the end user. Read all about the feed.registerTemplateBundle on the developer for more technical details and tips on creating stories that will aggregate well.

Aggregation Item From Newsfeed

In the example above, 2 of my friends have become fans of Whole Foods. Earlier in the day, I saw only one name, so the copy read, “xxxxx xxxxx became a fan of Whole Foods Market”. Now that a second friend has become a fan, the text has changed to “xxxxx xxxxx and xxxxx xxxxx became fans of Whole Foods Market”. This is story aggregation at it’s best. Instead of generating two items with very little difference, Facebook has created a single item. And if another friend joins, it will eventually change to reference a couple of names and a number of other friends who did the same.

Notifications

Once a user has permitted your application to interact with it, notifications and emails from the application become an option. There are two different notification types. First users can send notifications to other users. These are a common way to engage users with the application. There’s no design elements related to this item, but the 16 x 16 icon will appear along side the messaging. Second, which is new, allows applications to send notifications to users without pre-pending another users name. The screenshots below show an example of each from the Are You Interested? application. The first item is a user to user notification, and the second item is an application to user item. Notifications appear in the footer dialog (if enabled) as well as on the general notifications page.

Notifications

Notifications Dialog

Emails

Facebook permits applications to send email directly to users email account. The application does not have access to the email address and Facebook includes some “unsubscribe” language in the email. Depending on how “spammy” the messages are deemed to be, this link may be at the top or bottom of the message. Application “developers” have access to the applications current “spamminess” level within the Facebook tools.

The developer wiki entry on notifications.sendEmail has the most up to date listing of what HTML is permitted in an email body. As of this writing, it is limited to P, BR, A, B, I, H1, HR, and CENTER.

Application Email Test

Facebook’s information for developers is thorough and easy to navigate, but for designers, it’s a bit more challenging. This guide walks you through the main touch points for the new Facebook design and the visual integration points for applications. This is not a review of all application touchpoints, but rather a graphical designers guide for what spaces and bits they’ll need to design when working on Facebook applications. Newsfeed items were intentionally left from this because I feel their importance would be minimized here and they warrant their own post.

At the very bottom of this post is a quick checklist you can use when designing for Facebook to ensure you capture all the necessary surfaces you’ll need to design for.

Profile Presence

After the newsfeed, the most prominent location users would see your application has historically been the profile. There are three forms of “widgets” or boxes, a tab and the publisher. All of which have some interesting uses.

Publisher

The publisher may be the most revolutionary item from the old facebook style. Designers won’t be doing much here beyond creating a facebook like UI for the application. For those unfamiliar with it’s use, the publisher allows content publication directly from the profile page. Much like updating your status, the publisher can update your photos, video and so much more. The publisher is 520 pixels wide and writes directly to the persons newsfeed.

Profile Publisher

Wall/Info Tabs

This box persists for both the wall and profile tabs of the new design. The box is very small, only 184 pixels wide, and very low on the pages. Note that this size matches the “narrow” box from the boxes tab. It should be noted that the user has to explicitly permit an application to create a profile box.

Wall and Info Box

Boxes Tab

Boxes are the old profile items. They come in two sizes, narrow at 184 pixels and wide at 380 pixels. This tab holds the boxes added by applications by users from the recently phased out facebook profile design. The user can manipulate the placement of the boxes within the tab, including choosing narrow or wide versions. Much like the Wall/Info tabs, users must explicitly allow applications to publish these boxes for all new applications.

Profile Boxes Tab

Named Application Tab

Another exciting change for the profile is the named tab. Unlike the other boxes, the tab actually pulls data from the application in real time. This provides the user with a more dynamic and interactive experience. A word of caution though, the user is responsible for creating the tab themselves. While the process is reasonably simple, it may benefit developers to provide a quick “how to” on adding the tab. Another nice feature of the tab is letting the users get a feel for the application in a controlled way.

Named Application Tab

Application Presence

The application is key for distributing your brand and where your users will spent most of their time. This is not the gateway in - but how they’ll experience you once they begin interacting with the brand.

Application Directory

Each day the application directory becomes less and less important for users to discover new apps. However, it still exists and the 75px x 75px icon is required.

Application Directory

About Application

The about page is a public facing (read indexable by Google and other search engines) page that describes your application, is commonly used for feedback and support issues as well as being referenced by every page in the footer as the go to place if something doesn’t work. This page is important - don’t underestimate it. The critical component here is a large 396 pixel graphic that can be placed at the top of the page. The intended use is as a screenshot, however, can include anything you think will help convey the purpose of your application to a perspective user. Also notice the 16 x 16 pixel icon which is used throughout the site as a “bullet” for your application is used here.

About Application Page

Application Canvas

While last on this list, this is certainly not the least important item. The new design opens up a nice wide 720 pixels to developers which provides ample space to present information in a far less restrictive way. This design can be a re-hash of the profile tab, if appropriate for your application. Keeping the two designs the same certainly helps in building your brand.

Application Canvas

Advertising

Facebook prohibits advertising of any kind, even plugs for your other applications, anywhere but on the canvas page. When designing the assorted boxes, keep this in mind.

Designers Checklist

When designing facebook applications, this list is a nice place to start when figuring out just what components you need to create. As always, use your best judgement with the height of variable height boxes. Your user will not keep the box if they are inconsistent with the Facebook design or use more space than they feel appropriate. Always place the user experience first.

• 16px x 16px - gif
• 75px x 75px - png, jpg or gif
• 396px wide application about graphic - png, jpg or gif
• 720px wide application canvas - html, fbjs, css and flash
• 184px wide profile box - html, fbjs, css and flash
• 380px wide profile box - html, fbjs, css and flash
• 520px wide profile publisher - html, fbjs, css
• 720px wide profile application tab - html, fbjs, css and flash

RGB Venn Diagram

If you’re unfamiliar with the RGB color space, it works basically like this. You add a bit of a color component by increasing one of the values. R=0, G=0, B=0 (or 0,0,0) is black, and R=15, G=15, B=15 (or 15,15,15) is white. The examples below are all created using the data table format included below.

UNION

Union takes two (or more) query results and provides you with the unique result. For example, if I had two queries 3, queries that each returned a segment of the color set with the color value = 15 and the other color values > 14, I could write this as three select statements with a form similar to the following, which selects the red subset SELECT r, g, b FROM colors WHERE r = 15 AND g >= 14 AND b >= 14. That gives me 4 rows, Set 1 below.

Now I’ll include another collection of colors: SELECT r, g, b FROM colors WHERE r BETWEEN 10 AND 12 AND g = 11 AND b BETWEEN 12 AND 14, labeled Set 2. And one more: SELECT r, g, b FROM colors WHERE r BETWEEN 9 AND 10 AND g >= 14 AND b BETWEEN 14 AND 16 The result is Set 3.

And now all merged together using a UNION. Notice it removes the duplicate, highlighted in red above, saving us some time! The order by is just to make life easier when reading the newly merged results. As you can imagine, with a more complex dataset, this could be really handy!

SELECT r, g, b FROM colors WHERE r = 15 AND g >= 14 AND b >= 14
UNION
SELECT r, g, b FROM colors WHERE r BETWEEN 10 AND 12 AND g = 11 AND b BETWEEN 12 AND 14
UNION
SELECT r, g, b FROM colors WHERE r BETWEEN 9 AND 10 AND g = 11 AND b BETWEEN 14 AND 15
ORDER BY r,g,b

UNION ALL

As a quick example, using the same 3 queries and result sets from above, UNION ALL gives us the duplicate record.

SELECT r, g, b FROM colors WHERE r = 15 AND g >= 14 AND b >= 14
UNION ALL
SELECT r, g, b FROM colors WHERE r BETWEEN 10 AND 12 AND g = 11 AND b BETWEEN 12 AND 14
UNION ALL
SELECT r, g, b FROM colors WHERE r BETWEEN 9 AND 10 AND g = 11 AND b BETWEEN 14 AND 15
ORDER BY r,g,b

Tables

A table “colors” was created and into it I populated the full set of colors leveraging the ordinal int values of 0-15, resulting in 4,096 rows of colors. You can of course do this for all 256 values of RGB supported in the CSS color space, which would be more accurate for performance testing of your queries, but I digress…

CREATE TABLE `test`.`colors` (
  `r` INT(4),
  `g` INT(4),
  `b` INT(4),
  PRIMARY KEY (`r`, `g`, `b`)
)
CHARACTER SET utf8;

You can use this script to quickly populate your newly created table. There are lots of other ways to do it, but this was the fastest for me to write today.

$conn = mysqli_connect($server,$username,$password,$schema);
for($r=0; $r<16; $r++){
	for($g=0; $g<16; $g++){
		for($b=0;$b<16; $b++){
			$conn->query("INSERT INTO colors (r,g,b) VALUES ($r,$g,$b)");
		}
	}
}
$conn->close();

Two days ago, AF-Design’s blog moved to WordPress’ SVN access which brought version 2.7-hemorrhage up. For any who are comfortable and familiar withe the existing WordPress administrative screens, I suggest you take a look at the proposed wireframes. Much like anything, it takes some getting used to, but there are some really great usability things coming along. One feature I really like is the quick edit for posts. If you’re like me (and I suspect a number of others) I often mis-categorize or tag a post and it provides a nice quick interface for making the updates.

WordPress Administrator Screenshot

Of course running bleeding edge software right from the repo isn’t without cost. So far I’ve been bit by a few items that I know of:

1. Comments are disabled by default for new posts created with the QuickPress.
2. Pingbacks are disabled by default for new posts created with the QuickPress.
3. Saving changes to already published posts seems to create an invalid page reference which would throw an error in the admin. Not sure what the root cause was there. I’m hopeful r9078 takes care of it.
4. Images are automatically wrapped with a caption [ caption ]…[ /caption ] by default (see above screenshot) and the uploader (as of r9078) doesn’t have a way to turn that off, so it requires manual deletion of the comment code.
5. Alignment of the image doesn’t carry over from the “Insert Media” feature

I think the Automattic WordPress team is doing a fantastic job and am looking forward to a stable version release.

Cutting through wood with a hand saw is a hard job. Pushing the blade back and forth through the wood slowly but surely making the cut deeper and deeper until it’s completed is a time consuming, labor intensive task. Once completed, there’s almost always another piece that needs to be cut.

Often in our daily tasks, we find ourselves pushing and pulling the saw blade back and forth, moving a project along towards it’s expected completion date. As soon as that project is completed, often before it’s completed, another one presents itself and requires our attention. This is very similar to cutting through the log. We often feel taking even the shortest break will put us off our course, the work will pile up, and we’ll never get it all done.

You’re wrong. Sharp tools cut faster.

Franklin Covey has taught us this already. Taking a 10-20 minute break to sharpen the saw can make the cutting process go faster. Increasing productivity and of course resulting in completing the tasks quicker. Taking the time to obtain the needed skills is a hard discipline, but it must be done and done now!

Think about your current and future task list. Now, take 10 minutes to think about your most mundane task and research to see if there’s a book, course, webinar or other resource you can tap to learn more about it. Even the most cursory overview will teach you some nuance that improves your productivity - sometimes - you’ll learn your understanding of a topic is really far more basic than you realize. The added time spent on yourself will help you to complete that mundane task perhaps a little more efficiently, giving you more time to complete the task at hand.

What saw am I sharpening?

I’ve been writing simple, and some not so simple, CRUD (CReate Update Delete) SQL for most of my professional career. I find it boring and tedious, but a necessary evil in the Web 2.0 world. This week I started reading Refactoring SQL Applications by Stéphane Faroult and Joe Celko’s Thinking in Sets. What I found was that many applications I’ve seen (and written) hardly tap the power of SQL and that there are some major mistakes that the PHP/Perl/ColdFusion/ASP.NET/C# programming manuals proliferate in the over simplification of relational database design. I’m now realizing that the majority of code I’ve seen and worked on is actually using SQL as a giant persistent hashmap!

These books are causing me to think about not just the CRUD statements differently, but how my applications interact with the persistent storage engines web apps interact with every day.

Take a few minutes today to sharpen your saw.

In the last post, I explained my work around to get data out of a Microsoft SQL Server using stored procedures. Since then, I’ve continued learning more about the limitations of the FreeTDS driver in PHP and hit another snafu when working with the data. Fields that are exported as VARCHAR are truncated at 256 characters! Whoa! big gotcha when today’s database tables might contain values in VARCHAR(1024) or even bigger! So what’s a PHP script to do? CAST the values!!!

 
-- original statement
SELECT myBigVarChar 
     FROM myTable 
     WHERE myId = 1;
 
-- revised statement
SELECT CAST(myBigVarChar AS text) AS myBigVarChar 
     FROM myTable 
     WHERE myId = 1;

Notice the statement’s a little more unruly to look at, but is functionally the same. The case to text allows the FreeTDS driver to properly convert the data. I also noticed this issue with UNIQUEIDENTIFIER type columns coming through as a BLOB. My fix was to CAST the identifier to a VARCHAR(36) to safely hold the string representation of the UUID.

Hope this saves you some head scratching!

After some effort getting the MSSQL drivers in PHP, I was ready to hook into the RDBMS and use my nicely developed stored procedures. FreeTDS required minimal setup and configuration and I was able to establish a connection and run simple queries against tables in no-time.

However, when I attempted to execute stored procedures, they would fail. To make troubleshooting harder, the MSSQL functions do not return error messages — at least none that I could access in PHP 5.1. My work around to the proper methodology init(), bind(), and execute() process was to use query() and pass in the procedure and parameters as needed. It’s slightly less elegant but opens the data up to you.

// Establish the connection and run the procedure
$connection = mssql_connect("123.123.123.123","db_login","db_password");
mssql_select_db("db_schemaname",$connection);
 
// Run the procedure
$username = "user"; // sanitized!!!
$password = "secret_password"; // sanitized!!!
$result = mssql_query("CheckLogin '$username', '$password'", $connection);
 
// handle the result as needed

The standard disclaimers apply about validating, escaping and bullet proofing any data passed into Microsoft SQL Server using this method. Seriously, heed these warnings, sanitize any data, or you will find your site vulnerable to SQL Injection attacks which are serious business.

If you develop code in PHP or any other language take 5 minutes to read this. It raises excellent points regardless of the language you author in despite it’s focusing on PHP. I particularly liked #7 Use a PHP Framework & #8 Don’t use a PHP Framework. It harkens back to point #1 Use PHP Only When You Need It. Hammers are good at driving nails, but they make terrible screwdrivers. The same can be said of frameworks which are not the panacea that many tout them to be. There is a good tool for each job - the roll of technology folks is to accurately select and implement the correct tool for the task - because not everything is a nail.

The JavaScript UUID Generator class has been refreshed again and is even more efficient than the 0.2 version due largely in part to heavier reliance on built in JavaScript functions. It’s still not a “REAL” UUID, but it’s good enough for most projects. The changes are as follows:

• A leaner and more efficient returnBase(val, base) method for conversion to base16 strings. The original version from irt.org has been replaced with built in JavaScript methods. Some testing for your target platforms should be performed to ensure compatibility with your engine.
• The change from randrange(min, max) in v.0.1 to rand(max) in 0.2 introduced a bug where the maximum value provided would never be matched. This has been fixed to correct for that issue.

Special thanks go out to Robert Kieffer for pointing out these issues and providing the updated code for the base 16 conversion.

Download the latest version.

/*
uuid.js - Version 0.3
JavaScript Class to create a UUID like identifier
 
Copyright (C) 2006-2008, Erik Giberti (AF-Design), All rights reserved.
 
This program is free software; you can redistribute it and/or modify it under 
the terms of the GNU General Public License as published by the Free Software 
Foundation; either version 2 of the License, or (at your option) any later 
version.
 
This program is distributed in the hope that it will be useful, but WITHOUT ANY 
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A 
PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
You should have received a copy of the GNU General Public License along with 
this program; if not, write to the Free Software Foundation, Inc., 59 Temple 
Place, Suite 330, Boston, MA 02111-1307 USA
 
The latest version of this file can be downloaded from
http://www.af-design.com/resources/javascript_uuid.php
 
HISTORY:
6/5/06 	- Initial Release
5/22/08 - Updated code to run faster, removed randrange(min,max) in favor of
          a simpler rand(max) function. Reduced overhead by using getTime() 
          method of date class (suggestion by James Hall).
9/5/08	- Fixed a bug with rand(max) and additional efficiencies pointed out 
	  by Robert Kieffer http://broofa.com/
 
KNOWN ISSUES:
- Still no way to get MAC address in JavaScript
- Research into other versions of UUID show promising possibilities 
  (more research needed)
- Documentation needs improvement
 
*/
 
// On creation of a UUID object, set it's initial value
function UUID(){
	this.id = this.createUUID();
}
 
// When asked what this Object is, lie and return it's value
UUID.prototype.valueOf = function(){ return this.id; }
UUID.prototype.toString = function(){ return this.id; }
 
//
// INSTANCE SPECIFIC METHODS
//
 
UUID.prototype.createUUID = function(){
	//
	// Loose interpretation of the specification DCE 1.1: Remote Procedure Call
	// described at http://www.opengroup.org/onlinepubs/009629399/apdxa.htm#tagtcjh_37
	// since JavaScript doesn't allow access to internal systems, the last 48 bits 
	// of the node section is made up using a series of random numbers (6 octets long).
	//  
	var dg = new Date(1582, 10, 15, 0, 0, 0, 0);
	var dc = new Date();
	var t = dc.getTime() - dg.getTime();
	var h = '-';
	var tl = UUID.getIntegerBits(t,0,31);
	var tm = UUID.getIntegerBits(t,32,47);
	var thv = UUID.getIntegerBits(t,48,59) + '1'; // version 1, security version is 2
	var csar = UUID.getIntegerBits(UUID.rand(4095),0,7);
	var csl = UUID.getIntegerBits(UUID.rand(4095),0,7);
 
	// since detection of anything about the machine/browser is far to buggy, 
	// include some more random numbers here
	// if NIC or an IP can be obtained reliably, that should be put in
	// here instead.
	var n = UUID.getIntegerBits(UUID.rand(8191),0,7) + 
			UUID.getIntegerBits(UUID.rand(8191),8,15) + 
			UUID.getIntegerBits(UUID.rand(8191),0,7) + 
			UUID.getIntegerBits(UUID.rand(8191),8,15) + 
			UUID.getIntegerBits(UUID.rand(8191),0,15); // this last number is two octets long
	return tl + h + tm + h + thv + h + csar + csl + h + n; 
}
 
 
//
// GENERAL METHODS (Not instance specific)
//
 
 
// Pull out only certain bits from a very large integer, used to get the time
// code information for the first part of a UUID. Will return zero's if there 
// aren't enough bits to shift where it needs to.
UUID.getIntegerBits = function(val,start,end){
	var base16 = UUID.returnBase(val,16);
	var quadArray = new Array();
	var quadString = '';
	var i = 0;
	for(i=0;i<base16.length;i++){
		quadArray.push(base16.substring(i,i+1));	
	}
	for(i=Math.floor(start/4);i<=Math.floor(end/4);i++){
		if(!quadArray[i] || quadArray[i] == '') quadString += '0';
		else quadString += quadArray[i];
	}
	return quadString;
}
 
// Replaced from the original function to leverage the built in methods in
// JavaScript. Thanks to Robert Kieffer for pointing this one out
UUID.returnBase = function(number, base){
	return (number).toString(base).toUpperCase();
}
 
// pick a random number within a range of numbers
// int b rand(int a); where 0 <= b <= a
UUID.rand = function(max){
	return Math.floor(Math.random() * (max + 1));
}
 
// end of UUID class file