Simple tabbed interface using CSS

This post explains how to implement, in the simpler way (using only CSS and HTML), a tabbed interface without add javascript function to show/hide layers.

Download this tutorial

The result is something like this:

How you can see in the previous picture, we have four tabs and when an user clicks over a tab, the layer below the tab-bar displays a new content, related to the clicked tab. For example if you click over About tag, it will display the following content:



Step 1: HTML code
HTML code is very simple: we have a top bar (<div id="bar">) with some tabs, and a main layer which contains all other layers (hidden) with the content related to each tag:

<div id="bar">
<a href="#tab1">Home</a>
<a href="#tab2">About</a>
<a href="#tab3">Contact</a>
<a href="#tab4">Credits</a>
</div>

<div id="container">
<div class="main">
<div id="tab1">First tab element (HOME)...</div>
<div id="tab2">... the second tab element (ABOUT)... </div>
<div id="tab3">... third tab element (CONTACT)... </div>
<div id="tab4">... fourth tag element (CREDITS) </div>
</div>
</div>

Step 2: CSS code
This is the css code which use target pseudo class to show/hide content layers:

/* Tab Bar */
#bar a{padding:4px 6px; background:#E0E9FE; text-decoration:none; font-weight:bold;}
#bar a:hover{color:#003366;}
/* Content Layers */
#container{background:#E0E9FE; padding:10px;}
div.main div {display: none}
div.main div:target {display: block}

For other infos about target pseudo class, take a look here.

Download this tutorial

Read More

Liquid layer with rounded corners using css

This tutorial explains how to design a liquid layer with rounded corners, using CSS and few line of code in HTML.

A simple solution is to define four layers, each ones with the CSS attribute background which contains a rounded corner image:


The result is something like this:


Download this tutorial


Step 1: CSS code
Copy and paste this code in your CSS file:

div.w1{background:#DFDFDF url(pic/w_left_top.gif) no-repeat; width:100%;}
div.w2{background:url(pic/w_right_top.gif) no-repeat top right;}
div.w3{background:url(pic/w_left_bottom.gif) no-repeat left bottom;}
div.w4{background:url(pic/w_right_bottom.gif) no-repeat right bottom; padding:10px;}

How you can see, layer w1 is the main container container with the rounded left-top border in the attribute background.
Layer w2 is contained into layer w1 and it have in the background attribute the rounded right-top border. So, for all others.
Layer w4 will contain your text or other html elements. I added a padding attribute to add 10px space from external borders.


Step 2: HTML code
Now, copy and paste this HTML code into your page:

<div class="w1">
<div class="w2">
<div class="w3">
<div class="w4">
Welcome on my site
</div>
</div>
</div>
</div>

So, add all HMLT elements you want inside w4 layer and your liquid layer with rounded corners is ready to use!

Read More

Mydugg preview, an open source platform (php+mysql) to deploy your digg-like site

Some time ago, I started to deploy mydugg a free, open source platform written in PHP and MySQL to create digg-like site just with a click.


I think digg paradigm can be applied to deploy personal site, wiki site, community site and forum, so I decided to create mydugg and distribute it for free in order to simplify the work to people who have to deploy similar sites in easy way. The package also contains a simple istaller which configures the environment and creates a MySQL database, just with a click. After the install, in the administration area, you can define a site's administrator, add the site's description, manage users and posts:

Admin can also defines a set of categories where users can add posts in specific topics (categories are in the top bar):


In the next week, I'm going to deploy a function to design new themes for sites created with mydugg changing css source. Actually I am testing the application and I hope to distribute the first beta version in January 2008. Stay tuned :)

Read More

Use Google Spreadsheets to get financial informations about companies

In the past days I wrote some posts about Google Spreadsheets and how to use some common formulas like countIf(), vlookup(), sumIf().

This post explains how to use GoogleFinancial() and GoogleLookUp formulas to get financial informations about a list of companies in Google Spreadsheets.

Take a look at this spreadsheet

Spreadsheet structure
My spreadhseet's structure is very simple. It contains a column (column A) with company's name and other columns (B:L) with the financial data I want to get - using GoogleFinancial() formula - for each company (price open, current price, highest price of the day, erning-per -share...).



To get these informations, take a mind GoogleFinancial() formula take two parameter: symbol (the company code used to identify the company in the market) and an attribute (kind of data you want to display). So, first step, we have to get the symbol (company code) using another useful formula, GoogleLookUp().

Use GoogleLookUp() formula to retrieve company code
To find the Company Code (column B) I used GoogleLookUp() formula, a very useful function which use the web to retrieve information about a serie of questions you have (for example about countries and territories, planets, companies, ecc...).
In my example I want to retrieve the company code for each company in the column A. I used this formula:

=GoogleLookup(A6, "ticker")

...where A6 is the reference to the cell which contains the company name, and "ticker" is the attribute you have to use with GoogleLookUp() formula to get the company name.

In my example the previous formula is like:

=GoogleLookup("Apple Inc", "ticker")

and the result is:

AAPL

You can find a detailed guide about GoogleLookUp() formula, with an explanation about all attributes you can use, here.

Get Financial Data using GoogleFinancial() formula
So, for each company, we have the company code (column B) and now we can use GoogleFinancial() formula to get financial informations about our companies. In my example, column C display the currency in which the stock is traded, simply using this formula:

=GoogleFinance($B6, "currency")

...and the result is:

USD

In my spreadsheet I used the following formulas:

Currency: =GoogleFinance($B6, "currency")
Price Open: =GoogleFinance($B6, "priceopen")
Price: =GoogleFinance($B6, "price")
Price-to-Earnings: =GoogleFinance($B6, "pe")
Erning-per-share: =GoogleFinance($B6, "eps")
Beta: =GoogleFinance($B6, "beta")
Volume AVG =GoogleFinance($B6, "volumeavg")
High (highest price the stock traded at for the current day) =GoogleFinance($B6, "Hig")
Low (lowesest price the stock traded at for the current day) =GoogleFinance($B6, "low")

Take a look at this spreadsheet

You can find a full guide aboutGoogleFinancial() formula here.

Read More

Add reddit button with counter in your Blogger Template

This tutorial explains how to add a reddit button with a counter in your Blogger template. I already wrote other posts about integration between Blogger and the most famous social networks (digg, delicious, stumbleupon). To add a reddit button, open HTML view of your Blogger template and add the code below. In reddit, you can choose three different styles:

Style 1

<script>reddit_url='<data:post.url/>'</script>
<script>reddit_title='<data:post.title/>'</script>
<script language="javascript" src="http://reddit.com/button.js?t=1"></script>

How you can see, the code is very simple. You have to add the blogger post url:

<data:post.url/>

...and the blogger post title

<data:post.title/>

Style 2

<script>reddit_url='<data:post.url/>'</script>
<script>reddit_title='<data:post.title/>'</script>
<script language="javascript" src="http://reddit.com/button.js?t=2"></script>

Style 3

<script>reddit_url='<data:post.url/>'</script>
<script>reddit_title='<data:post.title/>'</script>
<script language="javascript" src="http://reddit.com/button.js?t=3"></script>

Read More

Edit in place with Scriptaculous and Coldfusion

After my previous post about this topic (but with PHP instead of Coldfusion) I received some requests about how to implement "Edit in place" Scriptaculous effect using Coldfusion. The structure of this tutorial is the same seen in the previous post with PHP.

Step 1: index.cfm
Create a new blank page, index.cfm. The file's structure is the following:

It contains a link to prototype.js and to scriptaculous framework. The will contains just some lines of code with a layer which contains the text you want to modify with "Edit in Place". So, open index.cfmand add this code into tag:

<div id="myText">This is my text to modify with edit in place</div>
<script>
new Ajax.InPlaceEditor($('myText'), 'javascript:saveText("myText")', {
ajaxOptions: {method: 'get'}
});
</script>

DIV layer (with ID myText) contains text you want to modify using edit in place effect using Scriptaculous. You can also use other tags like <span>, <h1>, to contain the text to modify with edit in place. The code into <script> tag enables Edit in Place function for the content of the layer with ID myText. You can apply the same code to other HTML elements just changing the ID reference "myText" (in bold).

Step 2: ajax_framework.js
In the Step 2 of the PHP tutorial change this code's line into the function saveText():

http.open('get', 'save_text.php?newText='+textId_n+'&nocache = '+nocache);

... with:

http.open('get', 'save_text.cfm?newText='+textId_n+'&nocache = '+nocache);

Step 3: save_text.cfm
Create a new file called save_text.cfm and copy and paste this code inside itself:

<cfif isDefined('URL.newText')>
<cfquery datasource="mydatasource">
INSERT INTO MYTABLE (newText)
VALUES(#URL.newText#)
</cfquery>
<cfoutput>#URL.newText#</cfoutput>
<cfelse>
Error, please fills all fields!
<cfif>

If new value is blank, you have a message error, otherwise the new value will be saved into our database.

Read More

Gantt Chart using Google Spreadsheets and conditional formatting

Today's lesson explains how to implement a dynamic Gantt Chart using Google Spreadsheets and conditional formatting (change with rules option).

Take a look at this spreadsheet or copy this spreadsheet in your Google Apps Account

Implement the gantt chart
For explain the topic of this post I prepared a spreadsheet whit a simple work breakdown structure, with only four columns (WBS, activity, start date, finish date).

The question is: how do you do to change a date and update automatically the gantt chart?

You can think to solve the problem in this way, using a simple IF statement: for each activity, if the date's value, contained into the row 2 (in gray), is equal or grater than the activity's start date or the same date's value (row 2) is equal or less then the activity's finish date, add an "X" into the cell. Otherwise leave the cell blank. Formula for the cell C4 is:

=if(AND((E$2>=$C4),(E$2<=$D4)),"X","")

You can copy and paste this formula into the other cells.

So, if a cell satisfies the previous rule, you can use conditional formatting, to change the cell's background from the default color (white) to another color.

Click on cell background color icon and select Change with rules.



Select the following rules:

Text is exactly = X

... then, select the background color you want to apply to the cell.

How you can see in the first image, I used two color: yellow for activities and green for activities'tasks. You can repeat the previous rule changing the color from yellow to green for your tasks.

Take a look at this spreadsheet here.

Similar posts

Implement a Project Plan and manage activities with Google Spreadsheets
Project Management: a project plan with Excel (template) Google Spreadsheets: formulas tutorial

Read More

Add StumbleUpon button in your Blogger's posts

Social Netoworks are a good resources to generate a costant traffic on your site. Personally I receive a good quantity of visits on this site from Digg (45% of total traffic). I already spoke about hou to add digg button in your blogger template in this post, and now I explains how to add a StumbleUpon button in each Blogger's post.

Select a button
You can select various StumbleUpon buttons like these:

<img alt="StumbleUpon" src="http://www.stumbleupon.com/images/stumble7.gif" border="0" />

<img border="0" src="http://www.stumbleupon.com/images/small_su_logo.png" alt="StumbleUpon">

How you can see, I used the first button on this site, but, if you don't like these images you can find other StumbleUpon icons here.

Add StumbleUpon code into your Blogger Template

First, save a copy of your Blogger template and after, in Modify Template switch into HTML view. Look for this code:

<p class='post-footer-line post-footer-line-3'>

... so, copy and paste the following code below the previous line of code:

<a expr:href='"http://www.stumbleupon.com/submit?url="
+data:post.url'><img alt='StumbleUpon' border='0' src='http://www.stumbleupon.com/images/stumble7.gif'/>
</a>

... and save your template.

Your StumbleUpon button is ready to work! Simple, and useful to attract more traffic on your site :)

Read More

Google Spreadsheets: formulas tutorial

After my previous post about how to implement a Project Plan and manage activities with Google Spreadsheets, I received some emails which asked to me to explain some useful formulas used frequently into spreadsheets. I published an example's spreadsheet which you can see here whith an example about these functions:

- Count If
- Vertical Look Up
- Sum If
- Count Blank

You can use these functions, with the same syntax, using Excel (remember only to use ";" to separate functions' attributes and not ",").


Download this tutorial for Excel

Take a look at Google Spreadsheet file

On-line presentation

If you want you can also take a look at this presentation:




Count If
countif() is a very useful function which you can use to count an element in an interval. In the following example I'm looking foor how many times is repeated the name "Lara" into the interval. The result is 2.

Formula is:

=countif(B13:B17,B8)

...we can "traslate" this formula in this way: count how many times the value contained in the cell B8 is repeated in the interval B13:B17.


Vertical Look Up
vlookup() is another useful function which I use frequently to manage data in a spreadsheet. You can use it to find a value (not repeated) in an interval and return a value contained ina column in the same row of the found value. In the following example I found City and Age for "Jason". The result is Dublin and 34:

Formula is:

=vlookup(F8,F13:G17,2,)

... search for the value in the cell F8 (Jason), in the interval F13:G17, and return the value contained into the interval column with index 2 (Column G).


Sum If
sumif() executes a conditional sum of values contained in an interval based on some criteria:

Formula is:

=sumif(J11:K15,J6,K11:K15)

...sum in the range J11:K11 the values contained in the column Points (interval K11:K15) where the value in the interval J11:J15 is equal to J6.


Count Blank
countblank() count how many blank (empty) cells there are in an interval:


Formula is:

=countblank(N11:N15)

Count blank cells in interval N11:N15.

I suggest you to download the spreadsheet in .xls format or take a look at the Google Spreadsheets file here.

Read More

Edit in place with Scriptaculous and PHP

Today's lesson explains how to implement a simple Edit in Place effect (Flickr-like) using Scriptaculous and PHP (you have to download Scriptaculous framework here).

Step 1: index.php
Create a new blank page, index.php. The file's structure is the following:

It contains a link to prototype.js and to scriptaculous framework. The <body> will contains just some lines of code with a layer which contains the text you want to modify with "Edit in Place". So, open index.php and add this code into <head> tag:

<script language="javascript" src="scriptaculous/lib/prototype.js"></script>
<script language="javascript" src="scriptaculous/src/scriptaculous.js"></script>

...and add the following code into the <body> tag:

<div id="myText">This is my text to modify with edit in place</div>
<script>
new Ajax.InPlaceEditor($('myText'), 'javascript:saveText("myText")', {
ajaxOptions: {method: 'get'}
});
</script>

DIV layer (with ID myText) contains text you want to modify using edit in place effect using Scriptaculous. You can also use other tags like <span>, <h1>, to contain the text to modify with edit in place. The code into <script> tag enables Edit in Place function for the content of the layer with ID myText. You can apply the same code to other HTML elements just changing the ID reference "myText" (in bold).


Step 2: ajax_framework.js
ajax_framework.js contains XMLHTTPRequest to use Ajax functionalities and saveText(): function, to save the new value into the database.

/* XMLHTTPRequest Enable */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
} else {
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();

/* -------------------------- */
/* SAVE TEXT */

var nocache = 0;
var text = '';
function saveText(textId){
textId_n = encodeURI(document.getElementById('textId').value);
textIDGlobal = textId_n;
nocache = Math.random();
http.open('get', 'save_text.php?newText='+textId_n+'&nocache = '+nocache);
http.onreadystatechange = saveTextReply;
http.send(null);
}
function saveTextReply(){
if(http.readyState == 4){
var response = http.responseText;
document.getElementById(textIDGlobal).innerHTML = response;
}

Step 3: save_text.php
save_text.php contains PHP code to save the new value into our database's table (MYTABLE). Copy and paste the following code into the page save_text.php:

<!-- Include Database connections info. -->
<?php include('config.php'); ?>
<?php
if(isset($_GET['newText'])){
$newText= $_GET['newText'];
$insertText_sql = 'INSERT INTO MYTABLE (newText) VALUES('. $newText .')';
$insertText= mysql_query($insertText_sql) or die(mysql_error());
echo $newText;
} else {
echo 'Error! Please fill all fileds!';
}
?>

If new value is blank, you have a message error, otherwise the new value will be saved into our database.

Read More

Gantt Chart with EditGrid online spreadsheets

Today I tried EditGrid to implement a simple Gantt Chart. EditGrid is a free and very powerful on-line application, which you can use to create and manage your spreadsheets.

I found immediatly a clear interface, simple and more similar then Google Spreadsheets to Excel and, moreover, I found a more fast and better response then Google Spreadsheets during the use and a full and more complete control for cells' formatting (border, background, number format...).

Take a look at the spreadsheet

My Gantt chart is a simple list of activities with a start date and a finish date.


Activity's Start Date is calculated like the minimum value of all Start Dates of tasks that compose it.

=min(C6:C9)

Activity's Finish Date is calculated like the maximum value of all Finish Dates of tasks that compose it.

=max(D6:D9)

Task's Duration is calculated using datediff() function:

=datedif(C7,D7,"d")

Unfortunately what it lacks is conditional fromatting to apply to cells (present in Google Spreadsheets), so you have to rapresent the Gantt Chart manually.

In general, I think EditGrid has many points to its favor respect its more famous adversary in terms of usability and funcionalities and it can be a real alternative to Excel more than Google Spreadseets.

Related Posts

Project Management: organize a project plan
Implement a Project Plan and manage activities with Google Spreadsheets
Project Management: a project plan with Excel (template)

Read More

Simple newsletter system using Coldfusion

If you have a website it can be useful to mantain contacts with your users and send periodically some news from your site. Image you have a database with a table USER and some fileds like name and email. This lesson explains how to implement a simple newsletter system using Coldfusion and <cfmail> tag.

Download Tutorial


Step 1: Add form fields
Create a coldfusion blank page and add the following code to the new page:

<form name="insert" id="insert" method="post" action="newsletter.cfm">
<input name="mailObject" type="text" id="title" size="60">
<textarea name="mailText" cols="60" rows="10" wrap="soft" ></textarea>
<input name="submit" type="submit" value="Submit">
</form>

This code adds a field to insert the object and a textarea to insert the text for your message.

Step 2: Coldfusion code to send the message to all users
Add the following code before the <form> tag seen in the previous step:

<cfif isDefined('FORM.submit')>
<!---Set error = 1 if object field and text field are empty--->
<cfif FORM.mailObject EQ ' ' OR FORM.mailText EQ ' '>
<cfset error = 1>
<cfelse>
<cfquery name="getEmail" datasource="myDatasource">
SELECT *
FROM USER
</cfquery>
<!---If error is not = 1, send the message to all users --->
<cfloop query="getEmail">
<cfmail
to="#getEmail.email#"
from="myemail@mysite.com"
subject="#FORM.mailObject#"
replyto="myemail@mysite.com">

Hello #getEmail.name#,

#FORM.mailText#

*********************

Add other infos here like site address, email to contact you...

</cfmail>
</cfloop>
<!---Set error = 0 if object field and text field are not empty--->
<cfset error = 0>
</cfif>
</cfif>

When you submit the form in the step 1, the code execute a query which gets all email address and names of the users stored in your database and execute a loop to send, to each of them, your message. Remember, you have to change datasource name with your datasource name and <cfmail> parameters from nad replyto with your email address.

Read More

Implement a Project Plan and manage activities with Google Spreadsheets

In the past days I added some post about the topic project management: organize a project plan and implement a project plan with Excel. I added also an Excel template that you can download here. In this post I'm going to explain how to implement a project plan using Google Spreadsheets. You can see the example at this link.

Copy and use this spreadsheet

Create a copy of this spreadsheet for your Google Apps account


File structure
My Google Spreadsheets file has two woorksheet WBS (work breakdown structure of the project) and User View (a list with resources to assign to each task.)


Work breakdown structure
In WBS sheet you have the following columns: WBS (task ID), Task (task description), Pred (predecessor), % (percentage of completion), Owner (resource assiged to the task), Role (owner role);


Owner role is calculated looking for the name insert into the column Owner into the sheet User View using VLOOKUP function (vertical lookup), for example:

=vlookup(E5,'user view'!A:B,2,)

...it search the value contained into the cell E5 on the sheet user view in a colum's interval from A to B, and return - if the value in E5 exist in the column A - the result from the column with index 2 (column B).

Sheet WBS has also other columns like star date, finish date, re-planned star date, re-planned finish date, project delay, and a section to assign a variable cost + fixed cost + a manual adjust to each task.

Take a look at the spreadsheet for more info about all columns.


Resources
All resources (task's owner) are located into a second worksheet User view. I have added some basic columns and the hour cost for the resource.


Total Task is calculated automatically from the sheet. I have simply added a function, COUNTIF, that count how time an user si repeted into the sheet WBS

=countif(wbs!E:E,A3)

... it updates the counter if finds in the column E of the sheet WBS a value equal to the value contained into the cell A3.


Excel or Google Spreadsheet?
Sincerly, I found Google Spreedsheets a good application to create spreadsheets with a medium level of complexity, but the "response", for an Excel-addicted, is not the same. In any case it's a useful service and, above all, it's free!

Read More

Coldfusion VS PHP part 1

I love Coldfusion. I think, it is the more simple and powerful language to develop web application, but in some cases, expecially when you have to develop a "dynamic" site - let me pass this term... - for a small client, it can't be the better solutions in terms of cost if compared with PHP. This is a first post that evidences some basic differences between two programming languages such as variables and queries for all programmers that, for necessity, have to migrate from Coldfusion to PHP.

Variables
Coldfusion variables are set with <cfset> tag. In PHP, a variable is set inside a <?php ...?> block of code with a "$" char before the var name. For example:

Coldfusion: <cfset myVar = 0>
PHP: <?php $myVar = 0?>

Differences between URL variables:

Coldfusion: #URL.myVar#
PHP: $_GET['myVar'];

Differences between POST variables:

Coldfusion: #POST.myVar#
PHP: $_POST['myVar'];

Execute a query
Coldfusion queries are "beautiful" :) and very simple to define with <cfquery> tag. You have only to specify a datasource name (database you use in your application) and a query name:

<cfquery datasource="myDatasource" name="getUser">
SELECT * FROM USER
</cfquery>

If you use PHP, when you add a query, you have to include in your page all the parameters to connect to database. I suggest to read this post to have more info about this topic. A tipical query in PHP is structured in this way:

<?php
// Connection's Parameters
$db_host="localhost";
$db_name="database_name";
$username="database_username";
$password="database_password";
$db_con=mysql_connect($db_host,$username,$password);
$connection_string=mysql_select_db($db_name);
// Connection
mysql_connect($db_host,$username,$password);
mysql_select_db($db_name);

// Query
$sql = 'SELECT * FROM USER';
$getUser = mysql_query($sql);
?>

How you can see, I defined a variable $sql (with the query SQL code). mysql_query($sql) execute the query.

Query results
After the execution of a query you would show the query results. With coldfusion you ca use <cfouptut> tag and add the "query" parameter to specify what query's result you want to display.

<cfoutput query="getUser">
#name#, #email#, #city#
</cfoutput>

You can also use this dotted code if inside a <cfoutput> code you want to display results from different queries:

<cfoutput>
#getUser.name#, #getUser.email#, #getCity.city#
</cfoutput>

With PHP you have use mysql_fetch_array() method inside a while statement:

<?php
while ($row = mysql_fetch_array($getUser)){
echo $row['name'] . ',' ;
echo $row['email'] . ',' ;
echo $row['city'] . ',' ;
}
?>

I hope this post about this topic can be useful to all PHP/Coldfusion beginner developers. I will add other infos in the next posts.

Read More

Project Management: a project plan with Excel (template)

In the previous lesson I explained some general rules about how to organize a project plan structure and implement it with an excel worksheet to manage your projects. I implemented the Excel worksheet that contains two sheets: WBS and HR. WBS is the work breakdown structure of our project and HR contains data about the resources assigned to each task.

Download Project Plan Template (excel)


WBS Sheet: Activity-Task status
Columns A:F contains general information about Activities and Tasks:

Before assigning a resource to a task, you have to add all information about the task's owner into the sheet HR.

HR: Define Project Resources
In this sheet you can add resources and assign them to your project's tasks:


Task Assigned counts the number of task assigned to each resources. It is calculated using COUNTIF() Excel function. This is an example of use of this function:

=COUNTIF(WBS.D:D;B5)

... in other words: "update the counter only if, in the interval of reference, WBS.D:D (column D of the WBS worksheet), find a value qual to the cell's value B5 in the sheet HR".


WBS Sheet: Project Dates
Columns G:I contain informations about activity start-date/finish-date/total days. For each task, you have only add a value for Start Date and Finish Date. Days will be calculated automatically such as difference between columns H - columns G.


WBS Sheet: Re-planned Date
Columns K:Q, contains info about re-planned dates and the project delay.
If you want to re-plan start-date or finish-date of an activity, you have check the column K with an "X" into the cell relative to the task you want to re-plan.


So, you set SD Delay (start day delay - in terms of days) and/or FD Delay (finish day delay - in terms of days) - Column L:M. Re-Start Date, Re Finish Date, Re-Days (replanned days) and Project Delay will be calculated from the sheet.

WBS Sheet: Costs Control
Columns S:X contains informations about cost management. You can specify hours and hour cost for each resource assiged to a task.

You can also add Fixed Cost and an Adjust (flat) to simulate cost's trend.

Download Project Plan Template (excel)

More updates about this topic coming soon :)

Read More

Project Management: organize a project plan

This is a first lesson about how to organize a project plan structure to manage a project using Microsoft Excel.

Define the Work Breakdown Structure
What is it a Work Breakdown Structure? We can say it is a hierarchical tree structure useful to organize all necessary task to complete a project. In this example I chose a simplified structure wih only two level (Activity - Task):


An activity is composed from many tasks and every task has some informations about its status, for example: percentage of completion, owner, start date, finish date...
I suggest you not to exaggerate with the levels' structure. A three level plan such as the following is the in many situations:

Level 1. Macro Activity
Level 2. Activity
Level 3. Task

Calculate Start Date, Finish Date and POC of an activity
Let's look an activiy is an group of tasks therefore, all informations about its status depend from the single tasks that compose it.

Start Date of an activity is calculated such as the minimum value of all start date of tasks that compose it.

Start Date Activity = SDAi = min(SDTi)

...where SDTi are the start date of tasks that compose the activity i.

In the same way, Finish Date of an activity is calculated such as the maximum value of all start date of tasks that compose it.

Finish Date Activity = FDAi = max(FDTi)

...where SDTi are the finish date of tasks that compose the activity i.


POC, percentage of completion (%), is calculated such as the average value of all percentage:

POC = POCAi = AVERAGE(POCTi)

...where POCTi are the percentages of completion of tasks that compose the activity i.


Adding a control for replanned task
It can be useful to mantain a trace of original dates, in case you want to re-plan start date or finish date for one or more tasks . In this case, you can add the following columns on your file: Replanned Start Date, Replanned Finish date, Replanned Days (total), Delay (days):


Delay is calculated like the difference of:

Delay = (Replanned Start Date - Start Date) + (Replanned Finish Date - Finish Date)

In the next lesson I will explain how to add a cost control on this plan and how to implement it with Excel.

Read More

Simple 5 stars rating script using AJAX and Coldfusion

This lesson explains how to implement a simple 5 stars rating script using Ajax and Coldfusion. The following picture shows the tutorial structure that we will use to realize this script:

Step 1: Define graphic elements (CSS)

save this image and save it into the pic folder of your website.

Now, create a new css file (default.css) into css folder of your website ad copy and paste this code to create two layer div.star_y (star on), div.star_n(star off):

div.star_y{width:10px; height:10px; background:url(../pic/vote_star.gif); float:left;}
div.star_n{width:10px; height:10px; background:url(../pic/vote_star.gif) 0 10px; float:left;}

Step 2: Define graphic elements: (HTML)
Image you want to use this 5 stars rate script to rate posts in your blog. You have a query that return all posts' titles with the current rate (post rate) and show one or more stars "on" in this way:

5 stars rating script using Ajax
post rate 3/5

First, add a link to the css file adding this line of code into <head> page's tag:

<link href="css/default.css" rel="stylesheet" type="text/css" />

... so, copy and paste this code into index.cfm:

//include ajax_framework.js
<script language="javascript" src="ajax_framework.js">
<cfquery datasource="mydatasource"&gt name="getPosts">
SELECT id_post_pk, post_rate, title
FROM MYPOST
</cfquery>
<cfoutput&gt query="getPosts">
#title# <br/>
<cfloop from="1" to="5" index="i"&gt;
<div class="star_<cfif post_rate GE i>y<cfelse>n</cfif>" id="#id_post_pk#_#i#" onmouseover = "javascript:overstar(#id_post_pk#,#i#)" onmouseout = "javascript:outstar(#id_post_pk#,#post_rate#)">
// use a spacer image into the layer
<a href="javascript:ratestar(#id_post_pk#,#i#)">
<img src="pic/spacer.gif"/>
</a><br/>
</cfloop>
post rate: <strong>
<span id="rate_#id_post_pk#">#post_rate#</span>/5
<strong>
</cfoutput>

Step 3: Javascript Functions
Create a new javascript file ajax_framework.js and add the following code.
This is the code of javascript functions overstar() and outstar():

/* star "on" on mouse over */
function overstar(idElement,rate){
for(i=1; i<=5; i++){
if(i <= rate){
document.getElementById(idElement+'_'+i).style.backgroundPositionY = "20px";
} else {
document.getElementById(idElement+'_'+i).style.backgroundPositionY = "10px";
}
}
}
/* star "off" on mouse out */
function outstar(idElement,rate){
if(outstar_check == 0){
rate = rate;
} else {
rate = rateN;
}
for(i=1; i<=5; i++){
if(i<=rate){
document.getElementById(idElement+'_'+i).style.backgroundPositionY = "30px";
} else {
document.getElementById(idElement+'_'+i).style.backgroundPositionY = "10px";
}
}
}

... and this is the code to use AJAX functionality to save vote and calculate the new rate:

var idElementN=0;
var rateN=0;
var nocache=0;
var outstar_check=0;

function rateStar(idElement,rate){ // idElement is the id_post_pk
idElementN=idElement;
rateN=rate;
outstar_check=1;
nocache=Math.random();
http.open('get', 'ratePost.cfm?idElement='+idElement+'&rate='+rateN+ '&nocache='+nocache);
http.onreadystatechange = ratestarReply;
http.send(null);
}
function rateStarReply() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('rate'+idElementN).innerHTML = response;
} }

Step 4: Coldfusion code: ratePost.cfm
rateStar() function send data to ratePost.cfm page to calculate the new rate after a vote. So create this page and copy and paste this code:

<cfset element = #URL.idElement#>
<cfset rate = #URL.rate#>
// get total votes and current rate
<cfquery datasource="mydatasource"&gt name="getTotalVotes">
SELECT total_votes, total_value, post_rate
FROM MYPOST
WHERE id_post_pk = #element#
</cfquery>
// calculate new rate
<cfset newRate = (#getTotalVotes.total_value# + #rate#)/(#getTotalVotes.total_votes# + 1)>
// update rate
<cfquery datasource="mydatasource"&gt name="updateRate">
UPDATE MYPOST
SET post_rate = #newRate#,
total_value= (#getTotalVotes.total_value#+#rate#),
total_votes= (#getTotalVotes.total_votes# + 1)
WHERE id_post_pk = #element#
</cfquery>
// return new rate

<cfoutput>#newRate#</cfoutput>

Save all and try it!

Read More