Perspective screenshots seem to be all the rave in the Web 2.0 world these days. What follows is a quick primer on how to create this effect in Photoshop CS3. In order to create the effect, you need a screenshot of your website, document or other item you wish to distort. For this demo, I’m using the New York Times website.

First you’ll open your screenshot and make sure the layer isn’t locked. If it is, copy and paste the screenshot as a new layer. I often do this by creating an entirely new RGB image. Now the easy part, make sure you have the layer you wish to distort (in this example, it should be the only layer) and click “Edit” > “Transform”. Here you’ll find a bunch of great filters which you should play with when you have a few minutes.

The first two give you similar functionality as the Free Transform tool. The real power comes from Skew, Distort, Perspective and Warp. Each tool has some unique powers that let you create scaled perspective images, page corner turns and other fun distortions to your image.

To create the NYT screenshot above, I simply used the Perspective tool, dragging the bottom right control handle a few pixels to the left. Next to clean up the image, I scaled it down so it was a more optimal size for my allocated space (35% of the original size) and then saved it out with “Save for Web & Devices” formerly Image Ready. That’s it - it’s really very simple. Enjoy!

I recently wrote about the Google Chart API but neglected to include a function for finding a maximum range that made sense. The following code can be used to come up with a good range limiter. This is very handy for setting limits on graphs and also for calculating the next level of measurement.

There are two functions doing the work here. The first function, get_max_range() is the one you will call in your code passing in your value as a singular parameter. It will return an integer value that you can use as your delimiter for the maximum value on your graph. The second function is a helper function that is used recursively to determine the base unit of the most significant digit. That value then becomes the exponent of the divisor and multiplier in the ceil() function and the return value.

function get_max_range($num){
	// Erik Giberti, 2008
	$magnitude = pow(10,get_exponent(abs($num),0));
	$new_num = ceil(abs($num)/$magnitude);
	if($num < 0){ $new_num = $new_num * -1; }
	return $new_num * $magnitude;
}
 
function get_exponent($num, $mag = 0){
	// Erik Giberti, 2008
	if($num/10 > 1){
		return get_exponent($num/10, $mag+1);
	} else {
		return $mag;
	}
}

Examples:
As you’ll see it works equally well with positive and negative numbers.

get_max_range(0.1) = 1
get_max_range(1.2) = 2
get_max_range(23.45) = 30
get_max_range(364)= 400
get_max_range(4567) = 5000
get_max_range(-59136789) = -60000000

Limitations:

1. While this works well for both positive and negative numbers, it doesn’t work well for very small numbers. For example 0.012 will still return a maximum scale of 1. If someone would like to expand on this work, please feel free and I’ll post the changes here.

2. Very large numbers only consider the most significant digit. The of course could be changed by altering the base_exponent value to better suit your datasets. I find this general value works well for graphing which is what this was intended for anyway.

License:

This code is released to you for use under the GPL.

Anyone who’s immersed in the world of data and its presentation knows the value of a well designed and laid out graphic can lead to a project. Currently application developers have two primary tools at their disposal, Adobe Flex and the Google Chart API for making dynamic graphics. Silverlight may offer some similar features, but I’ve no experience building with it. Additionally, Java is also very capable, but when you see how simple the Google product is, you’d need a very strong reason to consider running anything like this in house again. As such I have left them out of the discussion.

I’ve used Flex for some simple reporting graphs. The real power in Flex lays in it’s ability to create entire interfaces, even entire websites entirely in a rich multimedia capable environment. I’ve been intoxicated with the raw power to manipulate the data in real time and interact in a way not easily possible on the web before. However, all of this power comes at a steep price, while the core SDK is free - for time pressed developers - the IDE environment saves a huge amount of effort. Because of it’s great power, sometimes using Flex is a little like bringing a machete to the dinner table - a little bit more power than you really need to cut the vegetables with. This is where Google Charts comes in.

Way back when in December of 2007, Google anounced the Google Chart API. This revolutionized graphing for developers, although I suspect many may not realize it yet! Lets start our exploration with some fake data and see just what we can do with the API. We’ll use a small slice of some new user signup data I have at my disposal to get our hands dirty with.

Generating this table is no special feat, some simple database queries against your own internal data and presto, you’ve got a column of numbers too. But that’s where the fun begins. Consider this table for a minute, it’s pretty clear there’s a normal distribution curve there, but are they the same? Are there more men or women - or is it nearly equal? Are there other things this data could be telling us?

Let’s start with the marketing department’s questions. Are we attracting more men or women? If we sum the numbers in the table together, we get 4,595 men and 4,609 women. We can create a pie chart with these numbers so folks can look at a glance and see what that would look like.

http://chart.apis.google.com/chart?
cht=p&
chs=250x100&
chd=t:4595,4609&
chl=Male|Female&
chco=0000ff,ff0000

The line break is for clarity only. To walk through the pieces, the cht is simply the chart type, p for pie (p3 is a 3d pie), chs is a width x height value, chd is the data, chl are the labels and chco are the colors. Interestingly, you can actually skip the labels on and still generate a graph, but obviously it becomes much clearer when you provide the labels.

Now lets look at the curves - obviously we have a peak during the day and lows at night, but just what does that look like and is it the same for men and women? Here we can use the bar chart.

http://chart.apis.google.com/chart?
cht=bvg&
chs=630x150&
chbh=10,0,5&
chco=0000ff,ff0000&
chg=101,33.3&
chxt=x,y&
chxl=0:|12a|1a|2a|3a|4a|5a|6a|7a|8a|9a|10a|11a|12p|1p|2p|3p|4p|5p|6p|7p|8p|9p|10p|11p|1:|0|125|250|375&
chd=t:13.9,12.8,16.3,20.5,21.1,32.0,36.8,33.3,45.9,41.6,51.5,57.9,77.6,80.0,77.9,79.2,85.6,97.3,97.1,87.2,64.8,42.9,32.5,19.7|10.1,9.1,10.7,16.8,23.7,27.2,33.3,41.1,41.3,46.1,51.5,50.4,78.1,92.0,85.6,88.8,92.8,97.6,89.9,81.6,66.1,47.7,29.3,18.1&

Now with this chart, there’s quite a bit more going on. Google recommends that for larger data sets you use their special encoding system, but in order to keep this simple I went ahead and used the decimal encoding so it would be easier to understand. For those who are ready for that next step, take a look at the docs for the API, there’s excellent pseudo code there for how to transition to the encoding method they use. cht still defines the chart type, in this case a horizontal bar chart with grouped data. chs is the size again; read the docs carefully if you decide to implement one of these. The bar chart can extend past your chosen size and you’ll simply crop your data. chbh comes in handy here by letting me shrink the size of the bars to 10 pixels and removing lots of padding. Last but not least chco sets the colors bringing us to the really new stuff.

For bar charts the data has to be limited into a range of 0-100. If your maximum data point is less than 100, you’re in luck, just feed the data in place of this method below. However, if your data doesn’t live in the realm of 0-100, you’ll need to consider doing some more work. The simplest method is to create a percentage (some PHP code is below outlining how to do that). The X and Y axis are blank by default with a bar graph. There are a number of methods for making them display but I find this method the most logical. If your data is broken out by percentages already, using the default Y axis value is fine, however, in our example, it’s not. So we’re going to pass two parameters. First chxt=x,y, what this does is tells the API that the first label set I pass in is for the X axis, and the second is for the Y. Now we can pass in the values we want to display on the X and Y axis. chxl defines our labels using position indexes to reference back to the values we had assigned in our chxt parameter. In our example, index 0 is X and index 1 is Y - notice they’re bolded: chxl=0:|label1|label2| … |labeln|1:|label1|label2| … and so on. The last parameter I skipped over from before is chg which sets up the grid based on a percentage. I passed in 101% spacing for the vertical bars along the X axis, and 33.3% for the horizontal bars because they lined up with my increments.

For those unsure how to generate the percentages in PHP, it’s very simple. The first thing we’ll do is loop over our dataset to determine what our largest value is. Then, instead of passing in the raw values as we did with the pie chart above, we’ll actually pass in their percentage of the maximum number. If your like me, you might want to step the scale up to the next logical number. I did that on my graph, but did not do it in the code below - I’ll save that for another blog post. Then you can at last loop over the data one more time to create the actual data strings. Once it’s all done, you’ll have a single string you can drop into your image call.

$result = $conn->query($select);

// get the maximum value in our data
$max = 0;
while($row = $result->fetch_assoc()){
   if($row['Male'] > $max){ $max = $row['Male']; }
   if($row['Female'] > $max){ $max = $row['Female']; }
}
$result->data_seek(0);

// generate the two datasets
$data_male = "";
$data_female = "";
while($row = $result->fetch_assoc()){
   if(strlen($data_male) == 0){ $data_male .= ","; $data_female .= ","; }
   $data_male .= round($row['Male']/$max,1);
   $data_female .= round($row['Female']/$max,1);
}

// Concatenate the strings to complete the data parameter
$data = $data_male . "|" . $data_female;

There are so many different graph types available, I obviously can’t share them all in this already rather long post. I highly encourage you to read over the API. It’s very simple to understand and extremely easy to use. Google only requests that if you’ll use more than 250,000 graphs a day, you let them know.

Last Friday afternoon I wrote a MySpace application called Visitor Track. This is not a wholly original idea - nor was I the first to try it on MySpace. As of this writing there is even another application still listed in the application directory.

Before I explain how I went about going from 0 to 12,000+ users in a matter of 48 hours, I want to mention a few things.

1. It’s critical to understand that the MySpace audience clearly demonstrated a desire for more information about who’s looking (or not looking) at them.
2. Having a fantastic marketing plan will not make an application succeed no matter how cool YOU think it is, it needs to find an audience.
3. There is AMAZING growth potential in the MySpace application domain, even without notifications, invites and the viral components developers desire and users loath.

What I did was leverage the users profile well, provided a clean canvas with only what the user was expecting and was straightforward and honest in the application description. While I certainly could have leveraged advertising to promote the application, I chose not to so I could watch the growth of the application as it progressed organically.

The following chart is from Zynganomics who’ve been tracking MySpace applications since the initial launch of the platform.

As you can see, prior to the suspension of the application, growth was extremely strong.

Leverage the profile:

This is the single most important thing developers on the platform can do right now. With a general lack of viral push channels, developers need to hope that users find them. MySpace has recently started adding friend feed notifications about application installs and that has helped fuel growth through awareness within social circles.

The Profile for Visitor Track was a plain white box with two lines of text. I made the box as small as I could so it didn’t clutter the users profile with useless information. You can see what it looked like here:

The language, placement, size, color - everything - about the profile should be considered over and over and over and over again.

Name of the application:

The name of the application is very important. The largest viral channel available to applications today is the Friend Subscriptions. Basically a copy of the Facebook Newsfeed feature, this is the one place that the application will be seen by users you won’t otherwise touch.

Graphic design is over-rated:

My application about page had a poorly created icon and just a few lines of text to describe the application. I spent no time creating a fancy graphic interface - no time altering the colors of the page or install buttons with CSS and kept everything about as plain as it could be.

Compare that to the highly designed canvas pages of larger applications from widget giants like Slide and Rock You below:

Note: that the arrows facing the install buttons are animated in both cases and that neither app has more installs than Visit Tracker did.

Speed is everything:

If you aren’t tied to OAuth authentication and tight OpenSocial integration use an IFRAME - it’s less secure for you as a developer, but you ultimately control the communication between your application and your users. You’ll rely on REST requests to gather information about your users which means you’ll leverage the backend hardware more. However, what you lose in signed ajax requests and opensocial.postTo(), you make up for in speed and reliability. I’ve observed continual performance bottlenecks accessing AJAX content during peak times. While it’s reasonable to assume that this will continue to become more stable, now is the time to begin capturing audience before it’s too late.

Deliver:

Because it’s so easy to get started as an app and because the market of available users is so large, even knockoff applications can be quiet successful in terms of capturing users and market share. Consider the number of applications attempting to build on the success that applications experienced on Facebook like Honesty Box (of which I am a developer) on MySpace today (there are no less than 5 copycat applications).

It’s critical to deliver on what you told the users you would do! Below is a screenshot of the canvas (I omitted the right hand column which was advertising - a naive attempt to make money in this endeavor).

As you can see I kept it really simple. I leveraged the amazing Google Charts API for the graphs and the rest is just text. There’s gold in them hills, and a diligent miner with the appropriate tools will find it. Even this relatively little application had nearly 20K page views, which monetized effectively could yield ~$120/month or more.

I want to apologize to any MySpace users and employees who might have been offended by my application. I sincerely hope you’ll forgive my transgression against the TOS and that we can make beautiful applications together in the future (that don’t violate the TOS).

I’ve been experimenting with twitter a lot lately. Generally, I find it’s something I use more away from my computer than while I’m at it. However, I’ve been frustrated by my mobile experience more than a few times and I’m not sure where to head next. I have a BlackBerry Curve with service via AT&T. I’m reasonably happy with the phone. If you think of twitter as SMS² you’ll start to understand how I’ve been using it. When I’m at my computer, I reach out to individuals, I connect with co-workers via IM, Skype, Email, Facebook, MySpace etc. When I’m away from the full glory of my machine, I do lighter communication - SMS and twitter. Keep in mind, this is a generalization.

Currently as a BlackBerry user, you’ve got a few options for accessing twitter (options are good right?), each of which I’ll get into more detail about below:

1. m.twitter.com - the mobile phone optimized version
2. twitter.com - the full blown site
3. TinyTwitter
4. TwitterBerry
5. GTalk

This chart summarizes my experience using the different methods of accessing twitter, but keep reading for more detail.

(more…)

Any long/short time followers of mine will know that I’ve been critical of Rackspace in the past. Robert Scoble claims Rackspace is his favorite company and promotes his FastCompany.tv flick. For those who want to see Scoble’s interview, it’s embedded below. I have to admit, after 20 minutes - I got a little bored.

I did, however, found this gem interesting - the entry price point for equipment with Rackspace is $300! I thought that steep in a world where servers are available for $1,500 (or less - comparing against a Rackspace $300 dollar machine). Consider a $2000 machine over 3 years depreciation ($55/month) plus power and ping ($100/u from he.net totaling up to $155/month). For the cost of a single Rackspace machine, you get a fully equipped machine racked with power and ping for almost 1/2 the price. For the remaining $145/month, install a firewall and hire a tech to run “yum” or “Window’s Update” (don’t fool yourself, that’s all that Rackspace does). Backup is an important feature to be sure - be don’t fool yourself, Rackspace passes that cost on to you as well.

Good technology is expensive, but people are more so. While they knock Google etc in the video for allowing 10% of a cluster to be “down” before dealing with it - it’s a pure numbers game. It’s cheaper to let 10% of your servers be off-line than it is to keep someone onboard to keep them up and running 24/7.

Another side note: I’m a big fan of Scobelizer - and looking forward to reading Naked Conversations when it arrives from Amazon with my other must reads next week - but, it was kind of sad to hear how many times the word “Segate” was dropped during the video. I know they’re a sponsor - but WTF?

GPSed is a great new GPS tool for tracking your location via your GPS enabled BlackBerry. More importantly, it scratches an itch I’ve had lately of helping me to geo-tag my photos. Flickr and Picassa are supported so that covers the majority of photo sharing apps. A little freaky perhaps is the ability to track exactly where the phone was when it last checked in. I’ll be using this when snapping photos on assorted walks around Rochester, MN providing better information for everyone to use.

I read about it first at Berry Review. This is MUCH better than the FindMe application for Facebook which uses cell towers (as best as I was able to tell) instead of the built in GPS unit to triangulate location. I could see this having huge utility for tracking down friends when your at a large venue (like a sports arena) and trying to locate your friends - although the mobile site has varied degrees of detail from the very slick Google maps interface on the full blown website.

I’ve been experimenting with Twitter for just over 4 months now, using it in my personal and professional life. There seems to be a large and still growing developer community building up around it churning out great applications, including one I heard about (via @purplecar on twitter of course). The application by tweetclouds.com aims to create a tag cloud (much like the one on this and many other blogs) from your tweets; you can see mine here in all it’s glory.

If you’re on twitter, follow me - I’d love to hear from folks who are experimenting with new ways of extending twitter.

Some other interesting tools include Twitter Stats, which received some coverage on TechCrunch in January.

Quite possibly my favorite is TwitterVision, a nice mashup leveraging the public tweet stream and google maps to visualize the public feed. Incidentally David Troy (the author) has also created FlickrVision, basically the same app but using photos instead.

There’s also Twitterholic a top 100 twitter user board, Twubble a great way to find people you might be interested in following (recently featured on FaceReviews), Twitterverse another cloud app but for the entire twitter universe and if your totally lost as to why anyone uses twitter, I recommend the Twitter in Plain English video by CommonCraft.

If I’m missing a way cool web based app, please let me know in the comments below. I’ll save desktop applications for another post, there certainly are plenty of those too!

I’m not sure when my love affair with Rackspace ended. Perhaps it was when we were brushed off as a client or when they began having catastrophic problems with their data centers. Either way, I thought it was funny when I saw an email today that they now have a corporate blog. I’ve been critical of Rackspace before and just wanted to highlight this additional failure of them as a company. With the astronomical fees they charge for server hosting, you would think they could have hired a PR firm a long time ago to tell them to get involved with their customers. This just seems like another last ditch effort to bring themselves into a web 2.0 culture that’s ready to move into new directions. They even have a token welcome to our blog entry from February. Someone please provide them some assistance with URL rewriting. The real test will be to see if they delete this trackback or are actually open to feedback and criticism on their blog.

Some folks may be asking why I don’t unsubscribe from their mailing lists… quite simply, I enjoy having fodder for these occasional rants.

Startups looking for a database back end will soon have more options (hopefully). MySQL is a fantastic lightweight database that scales reasonably well for most projects. Microsoft SQL Server, Oracle, DB2 and other commercial offerings scale well and have lots of great support but at a massive cost, creating a barrier to entry for most providers. Last year, Amazon announced their solution, a database in the cloud (my thoughts). Not to be outdone, Google is rumored to be announcing their own online equivillent tonight at one of their campfire format press events. They used Campfire One to announce OpenSocial and Tech Crunch is rumoring that they may be announcing their cloud database platform BigTable. With this, small businesses will be able to better outsource database (and database management) with minimal costs and potentially unlimited scale. This is ideal as the amount of user generated, tags, index, and categorized content online continues to grow. Many companies are having great success using Amazon’s Web Services for storage and computational intensive projects. This is a natural extension to that.