Working collaboratively on the web can be a real dilemma for some, However there are some very powerful tools available on the web, which project management and communication much much easier.

BaseCamp

One of the most popular options out there is a service offered by Basecamp. This project management tool makes keeping schedules and time lines much easier, as well as offering methods to break down project focus into smaller tasks.

The Pros

• Allows multiple user accounts with varying access rights,
• Allows you to set milestones and meetings
• You can tick off individual tasks as then are completed

The Cons

• Its not free
• It can be difficult to get used to the tools
• does not support add-ons

Collabtive

This not so well known option is the definite alternative to Basecamp. Collabtive is a free open source solution to managing your projects, which you can download and run on your own sever, with a whole raft of controls available to you.

The Pros

• Its Free
• You have full access to the source code if you want to adapt it
• built in messaging system to be used similar to a chat client

The Cons

• It can take a while to get used to
• Can be a bit simplistic in its features

PB Wiki

For those of you, who like me find project management style tools not so great for collaborative work, defiantly try out PB Wiki, a powerful wikipedia tool which enables users to post anything from diagrams to scraps of ideas and then gives a powerful search mechanism to find anything you need.

The Pros

• Its Free
• Gives you the freedom to layout the information in any way you see fit
• full administration features, as well as displaying a full and detailed change log

The Cons

• Not as many on the project management features
• Could do with a more features

There are many more tools availaible aside from the ones I have mentioned. but these offer a way to instigate collaboration and to make working together easy and fun.

I wrote a blog back in April 08 about 99 Designs, At the time the website had only just established itself and was creating some animosity amongst designers. My view back then was that 99Designs was a strong website with a lot of potential to do good for designers and Clients alike. 6 months Later Ive decided to revisit this topic and see how things are progressing on both sides of the fence.

The first thing that really shocked me was that the rules have changed. Previously when a contest was held a winner had to be picked from the designs put forward, I mean after all this is the entire premise of a contest, and just to clarify;

“A contest, is an event in which two or more individuals or teams engage in competition against each other, often for a prize or similar incentive.”

But this is no longer the case, upon a contest closing the contest holder is now able to either pick a winner, or just create yet another contest for the same prize money. This completely defies the entire point of creating a contest scenario. I am not the only one who feels this is an injustice, graphicpush wrote a very compelling argument against the premise describing it (quite rightly) as sweatshop labour where designers work for nothing. positive space blog also made a similar point along with xemion and an armful of others who had string arguments against the site. Is it really right for designers to be pitted against each other, designing for clients who may never even pay them for their work.

I think the greatest problem I have with the site is its disrespect for designers. The very idea of a website which portrays design as a pot luck situation, where someone might stumble upon a good design is a complete joke. It makes the entire profession seem like a gimmick, but more than this it is yet another damaging blow to the craft. Web and graphic designers alike have always been at the bottom the food chain in terms of salary, but not charging them anything for their efforts is one step too far in my opinion.

I wanted this to be a level argument, so lets look at it from the other end of the spectrum, If you are a client looking for a design lets say a logo, 99designs would seem like the perfect solution, very cheap prices, a rate, which you can set yourself, a raft of willing designers, the chance to describe exactly what you want and all of this for the a nominal fee. Sounds reasonable. But the truth is the only people making any real money out of this situation are the creators of 99designs themselves. Taking the money from the contest holders. and pouring it all back into sitepoint no doubt.

I started this blog with a view to being fair and level, but the more I have reseached, the more I have realised there is no fairness to be had, just exploitation of a craft which takes many years harness and perfect. My original argument was that If a designer was good enough he should win through the fairness of the contest, but when the contest holders move the goal posts as it were, they make the very idea of fairness an impossibility, and I dont know how that makes you feel but its certainly not something I want any part of.

This tutorial will show you how to create a randomized banner image for your website using just 1 line of php. This is exactly the same as the technique as I am using on this site. To see it in action simply refresh the page a few times

Your Images

To start things off create a new folder called banners, inside of this you want to put your banner images all should be the same size, for example 700px x 100px. Name the banners 1.jpg, 2jpg, 3.jpg etc for however many you want.

The Code

this will only work on a .php page, so make sure that whatever page you apply this to you use the correct extension.

<img src="images/banners/<?php echo(rand(1,3)); ?>.jpg" alt="a banner" />

The code itself is pretty straight forward, all we are doing is creating the pathway to the banners in a standard <img src> tag.

Then when we get to the banner name we use PHP’s rand() function to randomise the image. This is why we have names our images 1, 2, 3.

As you can see the first argument passed in is the 1 number for the rand function to start on. The argument is the maximum number the function should randomize between. In this case 3, but you can make this whatever you like.

<?php
echo( rand( 1, 3 ) );
?>

And Your Done

That’s all you should need, now if you save your file and upload it, you will see a random image display. To see what is being rendered simply view the source of the image link and you will see a static link with a hard coded image, which will change when you refresh the page.

This technique can be applied to more than just banners, you can use it on virtually anything. happy coding

For many web developers creating a database driven website is a standard requirement. This tutorial will show you how using a database configuration file can make your life a lot easier and keep your code a lot cleaner.

Why Bother?

The beauty of writting a config file is that once you have it, you can use it anywhere. Meaning you wont suffer from code repetition on your site. The real advantage comes from when you want to change the name or a password on a database, you can do this quickly and easily in one place.

Create Your Config File.

Lets go, create a new file and call it config.php this is what will house all our database specific information. The information required will resemble the following format.

<?php
	//website http structure
	$SITE = "http://".$_SERVER['HTTP_HOST'];
	$IMAGES = "images/";
	//connection string
	$con = mysql_connect('localhost','USERNAME', 'PASSWORD');
	//if connection fails
	if (!$con) {
		echo "cannot connect to database";
	} else {
		//select database
		$db = mysql_select_db('DATABASE_NAME', $con) or die("problem selecting database '$MYSQL[DATABASENAME]'");
	}
?>

In this file we are setting up a few global variables. We define the path of the website, the location of our images folder. Then comes the clever stuff, we define the connection to our database and store it against $con. Then below this we give display a message should our connection to the databse fail at any time otherwise we connect to the database we want. its as simple as that.

All we need do now is require this file on every page that needs to use a databse connection. This can be written like so.

<?php
require_once("http://www.yoursite.com/resources/config.php");
?>

By using the require_once() function we call in all the variables that are expressed the config.php file. This means that when we want to communicate with the database we can simply begin the sql expression, knowing the connection has already been created.

<?php
$sql = "SELECT * FROM yourTable";
?>

And thats all it takes, why not try it out on your own projects and see just how much time you can save youself.

A little while ago I read a tutorial on FriendlyBit about how to create a fading background in CSS. I quoted on that blog that this same effect would be more reliable and effective in jQuery. Actions speak loader than words, so I thought I would dedicate a short tutorial to show how this can be achieved.

Here is the demo

1 – Call In Jquery

To start off we will need to attach jquery, if you do not have a copy you can download it from jquery.com. Once you have this create a new file call it fade.html and call the jquery framework into the page.

2 – Set the Scene

Lets create some basic HTML which we can create the effect on, like so.

<div class="row1">
	highlight text
</div>
<div id="box">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div class="box1">
</box1>

This will give us a link to click and some text to highlight.

3 – Style It Up

Now we want to add some styling to the page.

.row1{
	padding: 10px;
	cursor:pointer;
	text-decoration: underline;
}
#box {
	padding: 10px  5px  5px  20px;
	width:400px;
	z-index:2;
	position:absolute;
}
.box1 {
	background-color: #CEDEEE;
	border: 2px solid #107FC9;
	width:390px;
	height:70px;
	position:absolute;
	margin: 5px;
	top:45px;
	z-index:1;
	opacity:0.00;
}

Its important to note the styles above have been created as position absolute. I call this the mirror method, becuase If you look at the html you can see another div called box1 which contains nothing. This is actually what were going to fade in and out. So we dont interfere with the text, we want this div to sit behind the box. Notice also that box1 has been set with an opacity:0.00; meaning we wont be able to see it straight off.

4 – The Smart Part

Now we are going to use just a few simple lines of code to animate a fade effect.

	$(function(){
		$('.row1').click(function(){
			$('.box1').animate({opacity:0.99}, 1000);
			$('.box1').animate({opacity:0}, 1000);
		});
	});

Lets break this down. Firstly we want this function to initiate onload, so we open with $(function(){ Inside of this we have a click funciton, attached to the div class row1 this means when we click the words ‘highlight text’ we trigger the function.Inside of this we simple run two simple lines of code. The first acts upon the div with a class of box1. The first argument picks the css selector, in this case the opacity and turns it up to almost full (0.99), the second argument sets a time in milliseconds, which the animate is to complete by, in this case 1000 milliseconds. underneath this we duplicate this code but with 1 key difference, we switch the opacity back down again. ths giving us a fading effect.

So in just a few lines we have achieved a very fancy effect, which can be used multiple times. Simple as that!

Click here to see the demo in action.

I decided to write this post after reading a very interesting article on DesignBit about getting paid for working freelance. I have learned a lot of lessons, many of them the hard way. Being great at web design, and being great with clients, are 2 very different requirements. By setting your self some basic rules, you will save yourself a lot of trouble and time when working on projects.

Be realistic when Costing Projects

This is a classic mistake many freelancers make. You need to be realistic when you work out the cost of a project. The best method is to work out a realistic hourly wage you want to be paid. Then take that number and multiply it by the number of hours you will take to complete the project. This will give you the magic number you should look to put forward in an invoice.

Always Write a Brief

By writing a clearly defined brief, which your client then signs, you are creating a safety net for yourself. Writing an outline of objectives ensures a clear understanding of what the client expects and what needs to be achieved. In the classic case that a client decides half way through a project to change a feature or include new functionality, you have a signed document, which you can refer them to. Depending on the request you can then decide if the change is within scope, or needs to be charged as an addition.

Phase The Payments

Talking about money can be a tricky subject, but if you clearly define a structure it will make life a lot easier. Phase payments require you to break a project up into segments. When phase 1 is completed X amount is paid. then phase 2 can commence, and so on. This not only ensures confidence between yourself and the client, its also a great motivational tool.

Organisation Is Everything

There are some powerful open source project management tools out there. Basecamp is my personal favourite. By breaking down a project into individual tasks, you can clearly identify your workflow and timelines as well as focus on individual goals.

Keep It Professional

When you’re dealing with a client keep it business like, Use email instead of Instant Messaging. Keep them up to date with progression reports. Lay boundaries for times when you want to be contacted and stick to it. This not only shows you mean business, but gives the client more confidence in your professionalism.

After Sale Service

So 3 months passes after you have completed a project and your old client comes back to you, they have uncovered a problem and they want you to sort it out. Now this is a classic example of something that happens time and again. What’s important to remember here is how you would feel if you were in there position. By going that step further you can cement some strong business relationships and build a good business network, its work considering that around 80% of business tends to come from referrals. So by helping out a client, you could be indirectly helping yourself.