eCofe - IT mixed coffee

5 Tips for Adsense Registration

2009-08-27T20:47:00.000-07:00

After waiting in 4 days, finally my blog approved by Google Adsense. This is my first blog with Adsense and I have no experience in registering my blog to Adsense before. I'll share some tips to register successfully. Just follow the simple steps below:

Be sure your posts is in English. Although Google Adsense supports several languages, I strongly recommend you to write your posts in English.
Write your posts by yourself. Don't copy/paste another blog content to yours. It's ok if you can modify them. Make the post look better in language structure and appearance.
Design your blog nicely. Modify the layout and color. Don't use too much color. Keep your blog/site simple. Create a nice banner image with same text as your blog/site address. I think it will make Google more appreciate your work.
Create Google Adsense account after your blog/site has ten or more posts in a week.
While you're waiting for approval, keep writing some posts. I believe that Google Adsense reviewer is keep watching your blog/site whether your site is always update.

That's the simple tips you can do. Don't forget to leave a comment so I know that this post is useful to you. Good luck.

Top 10 Javascript Libraries

2009-08-25T23:52:00.000-07:00

I didn't write this list in order of rank. All of these libraries are often used by many software developers. So check them here:

ExtJS
If you're bulding rich internet application and need widgets, here is the answer. You can create a nice widget with just a piece of code. It's also has a chart widget.
Yahoo UI
Yahoo UI has a heavy namespaced library and very good documentation.
Dojo Toolkit
This one has an exellent idea of local data storage. It also has a superb infrastructure and good solid written API - one can easily write its own custom widgets.
jQuery
Write less do more. jQuery attempts to halve the amount of code you write compared to the traditional DOM JavaScript. With the chain concept, you can transfom ten lines of code with just one statement.
Scipt.aculo.us
If you're talking about effects, don't forget this one. It has a easy-to-use effects library.
Moo.FX
moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework.
Mochikit
MochiKit is a highly documented and well tested, suite of JavaScript libraries that will help you get shit done, fast. We took all the good ideas we could find from our Python, Objective-C.
Prototype
Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around. It's also became codebase of other libraries.
JavascriptToolbox
If you need any other libraries, just visit this site.
Jowo
Finally, this is the best one for me. This is my own library. It's still on production but I have use it in many of my projects.

Why I wrote this post? The reason is that there are so many people confused of choosing which javascript library they are going to use. Why they are confused? Because they're looking for the best one. But unfortunately, there is no the best javascript library in the world. Trust me! Each library has weaknesses. So to get the best one, choose the most appropriate library for your needs.

How To Redirect AJAX Request

2009-08-24T00:48:00.000-07:00

There are so many questions out there asking about how to redirect AJAX / XmlHttpRequest. It is usually needed when you provide user login page with AJAX. We ask user for username and password then we send the data to server via AJAX. Server validates user's data. If they are valid we want to redirect user to another page. That's what we want.

Unfortunately, AJAX cannot do that. Why?

AJAX (Asynchronous Javascript And XML) is a kind of asynchronous communication between client and server. The meaning of asynchronous is that the communication is closed after client sending the data. But it's not ending. Client is still waiting for server response. Once the response come, it is retrieved by callback function in client.

We can make an analogy by sending SMS to your friend. SMS is also a kind of asynchronous communication (while Phone Call is synchronous). When you finish sending SMS to your friend, your mobile phone actually stop sending data to your friend. But the phone is still waiting for the reply from your friend. You cannot know when your friend will reply. It could be in a minute, an hour or there will be no reply.

That's an example of asynchronous communication. So what the point?

In web-based communication architecture, if the data is sent asynchronously to server then the response will not be displayed in browser page. It will be passed to callback function that was set just before sending data. That's why we cannot redirect user with AJAX request. The redirection will only occur in server-side not in client-side.

So if we want to redirect AJAX request, it must be done by javascript on client. The server can just send back status message wheter login is failed or succeded. If success, change the page location by javascript. You can do this by this command
window.location = 'http://www.example.com';

Don't forget to leave a comment so I know that this post is useful to you.

10 New Widgets on ExtJS 3

2009-08-19T05:24:00.000-07:00

ExtJS is one of the best AJAX/Javascript library in the world. Although the number of its widgets is not as much as other libraries, the superiority of ExtJS comes from very nice user interface. Since version 3, ExtJS introduced several nice widgets. Here they are:

1. Row Editor Grid

When you double click any row on this widget, the row will change to a form and allow you to edit the value. Once you finish, you can click the update button or cancel any changes.

2. Progress Bar Pager

Besides visualizing the number of data that are being displayed, this plugin allows you to change the page by clicking on the progress bar instead of using arrow buttons.

3. Sliding Pager

This is the other one of Paging Toolbar plugins. User can change the page by moving the slider instead of typing the page value in text box. When you move the slider, it is snapped to page values.

4. Group Tabs

Vertical tabs group with a nice interface.

5. Toolbar Overflow

The previous versions of ExtJS didn't support toolbar resizing so if toolbar has many controls, they will be invisible when panel is resized. But it's not anymore now.

6. Tab Scroller Menu

Inspired by modern web browsers, ExtJS made a new feature that will make our life easier. User can navigate within many tabs opened at once.

7. Charts

I was surprised knowing that ExtJS includes chart library in this version. It's a good start though it still has a few of chart types.

8. Spinner

It's just an ordinary widget that is also supported in any other desktop application framework. May be ExtJS developers forgot to include this widget on previous releases.

9. Toolbar Button Groups

I think most of software developers who use ExtJS would be very interested in this widget. This widget mimics Microsoft Office ribbon toolbar that comes since Microsoft Office 2007.

10. Check Tree

This widget is usually used by many installers on desktop application.

Don't forget to leave a comment so I know that this post is useful to you.

13 Best Web Chart Libraries

2009-08-18T07:18:00.000-07:00

Few days ago, I got a project that requires to generate a lot of charts as output. And my client needs charts with a great visual. I knew some chart libraries but the visual is not so well so I thought my client wouldn’t be satisfied with it.

So I began to search and try another chart libraries and I was surprised coz I found so many libraries out there. Some of them are free, some are shareware. Don’t worry if you’re looking at the best free library coz there are several free libraries that are good enough. They have good UI and very simple/easy script to use. Check them here:

Open Flash Chart (Free) - This chart library is fairly easy to setup and has classes written in PHP, Perl, Python, Java, Ruby on Rails, and .Net to connect to the Chart.

Output: SWF Flash
Animation: Yes
Javascript Control: Yes
Charts: Line, Bar, 3D Bar, Glass Bar, Fade Bar, Sketch Bar, Area, Pie, Scatter, CandleStick

Flot (Free) - Flot is a pure Javascript plotting library for jQuery. The focus is on easy usage , attractive plots and interactive features. With Flot you can interact with the data, look at specific data by zooming in, plot a time series, and other various options.

Output: Canvas
Animation: No
Javascript Control: Yes
Charts: Line, Bar, Area

Flotr (Free) - Flotr is a javascript plotting library based on the Prototype Framework version 1.6.0.2. Flotr lets you create graphs in modern browsers with features like legend support, negative value support, mouse tracking, selection support, zoom support, event hooks, CSS styling support and much more.

Output: Canvas
Animation: No
Javascript Control: Yes
Charts: Line, Bar, Area

JFreeChart (Free) - JFreeChart is an open source Java chart library that makes it easy for developers to display quality charts in their applications. The JFreeChart project was founded seven years ago, in February 2000, by David Gilbert and is used by approximately 40,000 to 50,000 developers. JFreeChart supports many different output types that includes JPEG, GIF, PDF, EPS and SVG. This is a great resource for Java developers.

Output: JPEG, GIF, PDF, EPS, SVG
Chart: Line, Bar, Pie, Area, Scatter, Gauge

Visifire (Free) - Visifire (Powered by Silverlight) is a set of open source data visualization components. With Visifire you can create charts with ASP, ASP.Net, PHP, JSP, ColdFusion, Ruby on Rails. The charts can be just simple HTML or animated Silverlight Charts.

Output: JPEG, Silverlight
Animation: Yes (Silverlight)
Charts: Line, Bar, 3D Bar, Funnel, CandleStick, Area, Pie, Stock

ExtJS 3.0 (Free) - Since version 3, ExtJS includes chart library in its package. ExtJS supports some basic charts which can be configured via JSON.

Output: SWF Flash
Animation: Yes
Javascript Control: Yes
Charts: Line, Bar, Pie, Stacked Bar

PlotKit (Free) - PlotKit is a Chart and Graph Plotting Library for Javascript. PlotKit works with MochiKit javascript library. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support. PlotKit also has great documentation.

Output: Canvas, SVG
Animation: No
Charts: Line, Bar, Pie, Area

JpGraph (Free & Commercial) - JpGraph is a Object-Oriented Graph creating library for PHP. The library is completely written in PHP and ready to be used in any PHP scripts (both CGI/APXS/CLI versions of PHP are supported).
Output: JPEG, SGS
Charts: Line, Bar, Pie, Ring, Field, Splines, Geo Map, Stock, Polar, Radar, Gantt, Impuls, Error, Scatter, Ballon, Canvas, Contour

AmCharts (Proprietary) - AmCharts are animated interactive flash charts. The charts include Pie Charts, Line Charts, Scatter/Bubble Charts, Bar/Column Charts, and even a stock chart. AmCharts can extract data from simple CSV or XML files, or they can read dynamic data generated with PHP, .NET, Java, Ruby on Rails, Perl and ColdFusion. All the charts are free but they have a link to AmCharts on the upper left.

Output: SWF Flash, WPF
Animation: Yes
Javascript Control: Yes

Emprise JavaScript Charts (Shareware) - Emprise JavaScript Charts is a 100% Pure JavaScript Charting Solution that requires no JavaScript frameworks. Emprise JavaScript Charts include charts with zooming, scaling and scrolling ability. Tested and works with all major browsers.

Output: Canvas
Animation: No
Javascript Control: Yes
Charts: Line, Area, Scatter, Pie, Bar

XML/SWF Charts (Shareware) - XML/SWF Charts is simple yet powerful tool to create attractive web charts and graphs from dynamic data. You can use any server-side script to gather the data and put it into XML. It supports many charts types,. These Charts have some great features like Animated transitions, Printable charts, and more.

Output: SWF Flash
Animation: Yes
Charts: Line, Column, Stacked column, Floating column, 3D column, Stacked 3D column, Parallel 3D column, Pie, 3D Pie, Bar, Stacked bar, Floating bar, Area, Stacked area, Candlestick, Scatter, Polar, Mixed, Composite and Joined

Fusion Charts (Proprietary) - FusionCharts is a cross-browser and cross-platform flash charting component that can be used with ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, simple HTML pages or even PowerPoint Presentations.

Output: SWF Flash
Animation: Yes

FlyCharts (Shareware) - FlyCharts is a set of Adobe Flash (SWF) files that gives you outstanding possibility to visualize your data. Using FlyCharts you can create compact, interactive and good-looking charts.
Output: SWF/Flash
Charts: Column/Bar, Line/Pipe, Pie, Area

Charts that use SWF is more preferred because they offer great visual and animation though every browser on client must has Flash Player installed. So it’s yours to decide which one is fit your needs.

If you know of any other charts, please post below.

3 Steps To Turn-On Desktop Cube

2009-08-18T07:01:00.000-07:00

In Ubuntu, by default, you cannot see the beauty of compiz desktop cube and desktop rotation. You must turn it on manually. Here are 3 steps to do it:

Open Terminal and type: sudo apt-get install compizconfig-settings-managerThis is the GUI tool to easily manage the compiz configuration.
Go to System->Preferences->CompizConfig Settings Manager. On the left panel, click General. On the right, click General Options. Go to Desktop Size tab and set Horizontal Virtual Size to 4 then click Back button on left panel.
Now click Desktop on left panel. On the right, tick off Desktop Cube and Rotate Cube to enable them. Later, if you want to change the appearance of your cube, just enter the Desktop Cube menu. While if you want to change the rotation setting, enter the Rotate Cube menu.

Now you can try it. Push Ctrl+Alt buttons together then left-click any area on the screen and move your mouse. Wow...look at that. Cool hah?

But wait...if your desktop form is not a cube (cylinder or sphere) or if you want to change the form (or effects), follow these steps:

On the left panel, click Effects. On the right, tick off and click Cube Reflection and Deformation.
In Cube caps tab, you can change the appearance of top and bottom side of the cube.
In Reflection tab, you can manage the background reflection while the cube is rotating
And in Deformation tab, you can change the form of the cube to sphere or cylinder.

Don't forget to leave a comment so I know that this post is useful to you.

5 Minutes To Master JSON (JavaScript Object Notation)

2009-08-17T07:31:00.000-07:00

To follow this tutorial, you don’t have to be experienced with Javascript. But it’ll be preferred if you have at least a little bit knowledge about Object Oriented Programming. Put all the scripts below inside the body element enclosed by script tag.

Minute 1 - Intro to Object

var myFirstObject = {};

It may not look like much, but those squiggly braces have the potential to record every bit of information humanity has ever gathered, and express the most complex programs computer scientists can dream up. In fact, Javascript itself is stored inside a set of squiggly braces just like that, as are all of its primitive data types -- strings, numbers, arrays, dates, regular expressions, they're all objects and they all started out just like myFirstObject.

Minute 2 - Creating A New Object

The old way to create a new object was to use the new keyword.
var myJSON = new Object();
The above method has been deprecated now in favor of simply defining an empty object with squiggly braces.
var myJSON = {};

Objects as Data
var myJSON = { "firstName": "Barrack", "lastName": "Obama", "age": 44 };

This myJSON object has 3 properties or name/value pairs. The name is a string -- in our example, firstName, lastName, and age. The value can be any Javascript object (and remember everything in Javascript is an object so the value can be a string, number, array, function, even other Objects) -- In this example our values are “Barrack”, “Obama”, and 44. “Barrack” and “Obama” are strings but age is a number and as you can see this is not a problem.

This data format is called JSON for JavaScript Object Notation. What makes it particularly powerful is that since the value can be any data type, you can store other arrays and other objects, nesting them as deeply as you need.

Minute 3 - Accessing Data In JSON

The most common way to access JSON data is through dot notation. This is simply the object name followed by a period and then followed by the name/property you would like to access.

document.writeln(myJSON.firstName); // Outputs Barrack
document.writeln(myJSON.lastName);   // Outputs Obama
document.writeln(myJSON.age);        // Outputs 44

If your object contains an object then just add another period and name

var myAnimals = { “cat”: { “name”: “mojo”, “color”: “white” }, “dog”: { “name”: “twister”, “color”: “gray” } };

document.writeln(myAnimals.cat.name); // outputs mojo
document.writeln(myAnimals.dog.name); // outputs twister

Minute 4

Array as A Value

If your object contains an object with a type of Array, just specify the index of data after object name. This example will show you how to use a value with type of array

var myAnimals = { “cat”: { “name”: “mojo”, “color”: “white” }, “dogs”: [{ “name”: “twister”, “color”: “gray” }, { “name”: “sweety”, “color”: “brown” }] };

document.writeln(myAnimals.cat.name); // outputs mojo
document.writeln(myAnimals.dogs[0].name); // outputs twister
document.writeln(myAnimals.dogs[1].name); // outputs sweety

Function as A Value

The other power of Javascript is that you can assign a function to a variable directly. This example will create a message box that is called by show function

var myIdentity = { “name”: “joe”, “age”: 23, show: function(){alert(this.name + ‘ ’ + this.age)} };
myIdentity.show();

Minute 5 - Receiving JSON via AJAX

In this minute, if you’ve known a little about AJAX, you’ll figure out that using JSON as data format is much easier than XML.

Remember that JSON data is simply string received from the server. Suppose that responseText contains string from server that is called by XMLHttpRequest.

var responseText = "fruits = { ‘name’: ‘apple’, 'color' : 'red' }"; // example of what is received from the server.
eval(responseText); // Execute the javascript code contained in responseText.

document.writeln(apple.color); // Outputs ‘green’

eval() function is just a built-in Javascript string compiler which can run very fast.

I think that’s all the essence of JSON. I suggest you to go to json.org to learn some more advance concept.

Don’t forget to leave a comment so I know that this post is useful to you.

MySQL Backup and Restore Using PHP

2009-08-16T07:55:00.000-07:00

It is very important to make regular backup of your important data to keep them from data loss. There are several ways to backup and restore your MySQL database. The easiest way is by copying the database directory in:
/var/lib/mysql
or
C:\xampp\mysql\data (or MySQL installation folder if you are not using Xampp)
But you cannot do this if your database table is using InnoDB engine. Your InnoDB table will not be recognized when it is restored in another MySQL server. So I don’t recommend this way to backup your MySQL database. This tutorial will show you how to backup and restore your database safely.

Backup Databases

There are at least three ways to backup your MySQL Database:

Use phpMyAdmin to do the backup.
Run mysqldump from command line or using php system() function.
Execute a database backup query from PHP file.

If you want to backup your database from your application (PHP), you can do ways 2 or 3. I prefer to backup with mysqldump and I use this in all of my project.
The format of mysqldump command is like this:
$ mysqldump --opt -u [uname] -p[pass] [dbname] > [backupfile.sql]
or
C:\xampp\mysql\bin\mysqldump.exe --opt -u [uname] -p[pass] [dbname] > [backupfile.sql]

[uname] Your database username
[pass] The password for your database (Note: there is no space between -p and the password)
[dbname] The name of your database
[backupfile.sql] The filename for your database backup
[--opt] The mysqldump option

For example, to backup a database named 'Tutorial' with the username ‘root’ and password ‘toor’ to a file tutor_backup.sql, you should accomplish this command:
$ mysqldump -u root -ptoor Tutorial > tutor_backup.sql
This command will backup the 'Tutorial' database into a file called tutor_backup.sql which will contain all the SQL statements needed to re-create the database.

Backup Certain Tables

With mysqldump command you can specify certain tables of your database you want to backup. For example, to back up only php_tutorials and asp_tutorials tables from the 'Tutorial' database accomplish the command below. Each table name has to be separated by space.
$ mysqldump -u root -ptoor Tutorial php_tutorials asp_tutorials > tutor_backup.sql

Backup Certain Databases

Sometimes it is necessary to back up more than one database at once. In this case you can use the --database option followed by the list of databases you would like to backup. Each database name has to be separated by space.
$ mysqldump -u root -ptoor --databases Tutorial Articles Comments > t_a_c_backup.sql

Backup All Database

If you want to back up all the databases in the server at one time you should use the --all-databases option. It tells MySQL to dump all the databases it has in storage.
$ mysqldump -u root -ptoor --all-databases > alldb_backup.sql

The mysqldump command has also some other useful options:

--add-drop-table: Tells MySQL to add a DROP TABLE statement before each CREATE TABLE in the dump.
--no-data: Dumps only the database structure, not the contents.
--add-locks: Adds the LOCK TABLES and UNLOCK TABLES statements you can see in the dump file.

Restore Databases

Above we backup the Tutorial database into tut_backup.sql file. To re-create the Tutorial database you should follow two steps:
Create an appropriately named database on the target machine
Load the file using the MySQL command:
$ mysql -u [uname] -p[pass] [db_to_restore] < [backupfile.sql]
or
C:\xampp\mysql\bin\mysql.exe -u [uname] -p[pass] [db_to_restore] < [backupfile.sql]

Have a look how you can restore your tutor_backup.sql file to the Tutorial database.
$ mysql -u root -ptoor Tutorial < tutor_backup.sql

If you need to restore a database that already exists, you'll need to use mysqlimport command. The syntax for mysqlimport is as follows:
$ mysqlimport -u [uname] -p[pass] [dbname] [backupfile.sql]

Here are my scripts to backup and restore MySQL database through PHP.

mysql-backup-restore.zip

With this backup script, the output file can be downloaded. Just load the script from browser and save the output file. The output file is compressed in ZIP format.
The restore script gets the file through upload form. Just browse the output file that has been downloaded with backup script and click Upload button.

Please post below if you get a problem applying this tutorial.

Compiz Error After Setting Desktop Effect To None

2009-08-15T09:10:00.000-07:00

May be this is one of many reasons why people still thinking that Linux is wearying OS. For example, when you are playing with the system settings or your desktop preferences, your system suddenly stop working and you don’t know what the hell is going on. Then you are shocked and thinking hard what you have to do to make your system works again.

But it doesn’t matter if you have a big curiosity in Linux. Just open firefox or the other browsers and start to search the solutions of your problems like what I will explain in this post.

It was an accident when I click None option in desktop effect setting. I thought it’s not a problem coz I could reset the setting back to Extra option. So I reset the option. But I was wrong, suddenly I got the message telling me that compiz-daemon couldn’t be started. Oh sh*t…what’s the going on?

After searching for the solutions by using many keywords, I got a nice script to detect compiz problems. The script name was compiz-check. This script doesn’t only detect compiz problems but it can also repair the problems. So if you get this problem just download compiz-check and run in your terminal.

Before you run compiz-check, change the permission to make it executable:

$ chmod 744 compiz-check
$ ./compiz-check

Don't forget to leave a comment so I know that this post is useful to you.

Transform Ubuntu Jaunty to Mac OSX Leopard

2009-08-14T07:58:00.000-07:00

I was in my college laboratory yesterday and I got a nice tutorial from this site about transforming Ubuntu to Mac OSX Leopard. Because I was started to get bored with Ubuntu Studio theme that I installed a few weeks ago, I decided to transform my Ubuntu to the new taste of theme.

As a matter of fact, I'm not PRO enough with the super advanced OS called Linux and it get worse coz I didn't mention that the tutorial I got is for transforming Ubuntu Hardy which is older than my current Ubuntu version (Jaunty). My notebook stuck into trouble while it was in the middle of transforming process. The screen was blinking after login to Gnome and I didn't know which package had caused this suck problem.

I'm not a type of a loser, so I backup all of my data, reinstalled my Ubuntu and the Mac theme. There as a package that looks suspicious and I didn't reinstalled it. Now I got Mac OSX Leopard running on my notebook.

Because I'm a good person (lol), I made this this tutorial so you don't fall into the same hole as me. Before we start the transformation you must download all of these files:

Once you finish download the files, follow the steps below:

1. Goal: Install the base of Mac OSX Leopard theme

1. I assume you downloaded the files to your home directory (/home/username). Extract Mac4Lin_modified_theme.tar.gz in that directory.
Go to System->Preferences->Appearance then you get this window:
2. Click Install and select the Mac4Lin GTK theme (/home/username/Mac4Lin_v0.4/GTK Metacity Theme/Mac4Lin_GTK_v0.4.tar.gz).
Click Install again and select the Mac4Lin mouse cursor theme (/home/username/Mac4Lin_v0.4/GTK Cursor Theme/Mac4Lin_Cursors_v0.4.tar.gz). Select “Apply new themes” when prompted.
Next, click Install again and select the Mac4Lin icon theme (/home/username/Mac4Lin_Icons_modified.tar.gz). When prompted, select “Apply new themes“.
Don't worry if your window doesn't look like Mac yet.
Click Customize and choose Mac4Lin_GTK_v0.4. Go to the Window border tab, choose Mac4Lin_GTK_v0.4. Click Close

3. Ups...may be you're now wondering why the buttons looks so large and ugly. This is because the new Ubuntu version doesn't automatically hide the button icon so you must manually set the setting.
Press Alt+F2 buttons till you get this window:
Type gconf-editor and click Run the you meet Gnome Configuration Editor window.
On the left panel, go to desktop->gnome->interface. Then on the right panel clear the sign at buttons_have_icons variable. This change will effect immediately. Your all buttons icon must have gone now.

4. Haha, don't be happy yet! Now we will change the window traffic light buttons to the left side. Still in Gnome Configuration Editor window (if you already close this window, back to step 7 to open it again), on the left panel go to the /->apps->metacity->general. Then on the right panel double click button_layout till you get this window:
Change the Value from menu:minimize, maximize, close to close, minimize, maximize:menu.

5. Now, look at your top menu bar panel, we will transform this thing. Remove all the icon and applications on the left side of the top panel. Right-click on the icon and select ‘Remove from panel‘. You will left with something like this:
On the right of the top panel, remove the logout icon. Still on the right hand side of the top panel, right click and select ‘Add to panel‘. Scroll down the list and add ‘Search for files‘. This will add the spotlight icon to the panel.
6. On the extreme left, right-click and select ‘Add to panel‘. Scroll down the list and add ‘Menu Bar‘. This will add the apple icon on the left.
Actually the next step is to install global menu as to display the menu bar for each application just like the real OSX, but this package is not compatible with Ubuntu Jaunty and I think this package that caused my previous Ubuntu stop working. So we won't install this package.

2. Goal: Install the Dock

At first, we will edit APT repository to point to http://ppa.launchpad.net/. Here are the steps:

1. Open Terminal (Applications->Accessories->Terminal)
Type this command: gksu gedit /etc/apt/sources.list
Add the following lines to the end of files

deb http://ppa.launchpad.net/awn-testing/ubuntu jaunty main
deb-src http://ppa.launchpad.net/awn-testing/ubuntu jaunty main

2. Next we will update our new repository and install the dock package. Save and close the file then in your terminal, type:

sudo apt-get update
sudo apt-get install avant-window-navigator-trunk awn-manager-trunk awn-extras-applets-trunk

3. Once the installation is finished you can launch the AWN but before you do that, remove the bottom panel from the desktop first. Right click on the bottom panel and select “delete this panel”. Open AWN via Applications->Accessories->Avant Window Navigator. Once it is activated, you can simply drag and drop the applications into the dock.
The dock is running now but we will do some tweak to mimic the real OSX Leopard dock. Go to System->Preferences->AWN manager so you got this window:
4. First, add the glass theme which you have downloaded. On the left panel, click on the Theme, On the right panel, click Add and navigate to the /home/username/Mac4Lin_v0.4 directory. Select the Elegant_glass.tgz file. Select the Elegant glass theme and click Apply. Next on the left, click on the Applet icon. On the right, scroll down to the Stacks Applet. Highlight it, then click Activate. This will add the Mac Leopard stack to your dock.

3. Goal: Install OSX Fonts.

Huff, let me guess. You're getting tired or bored with this tutorial. But it's not enough bro! Try to guess what will we do next. Hmm, I'm sure you can't guess it. Ok, do you realize that your fonts taste is still “Very Linux”? Aha...you got it now. Yes, we will change the font. So you must download the package first.

1. Open a terminal and type the following:
sudo apt-get install msttcorefonts
This will Install the Microsoft core fonts.

2. Next, copy the OSX fonts to the system fonts directory

cd /usr/share/fonts
sudo tar xvzf /home/username/Mac4Lin_v0.4/Fonts/OSX_Fonts.tar.gz

3. Configure the fonts

cd/
sudo tar xvjpf /home/username/Mac4Lin_v0.4/Fonts/fontconfig.tbz -C /etc/fonts

4. Open the Appearance window (System->Preferences->Appearance) and select Fonts tab. Select the following fonts according to the image below:

4. Goal: Transform the login screen

Easy bro...easy...it's almost done coz there are only 'sweet'-seventeen steps more to complete this transformation (haha).

1. Click on the Apple icon, go to System->Administration->Login Window. On the Local tab, click Add. Navigate to the path /filesystem/home/username/Mac4Lin_v0.4/GDM Theme and select the file Mac4Lin_GDM_v0.4.tar.gz. Check the box beside the newly installed theme to activate it.
2. Underneath, there is a color selection field, select it and key in the number E5E5E5 into the color code field. Click Ok. Log out. You should see the login screen as the picture below:

5. Goal: Configure Usplash Screen

1. Usplash is the screen that you see when your computer is booting up. We are going to change it to show the white apple screen. Type in your terminal: sudo apt-get install startupmanager
Go to System->Administration->Start-Up Manager Go to Appearance tab.
Click on the ‘Manage bootloader theme‘. Click Add and navigate to the file /filesystem/home/username/Mac4Lin_v0.4/GRUB Splash/appleblack.xpm.gz. Check the box “Use background image for bootloader menu” and select ‘appleblack”.
Next, click “Manage usplash theme”. Click Add and add the file /filesystem/home/username/Mac4Lin_v0.4/USplash Theme/osx-splash.so. Click OK. Select osx-splash from the dropdown box.
Now reboot. You should see the following images:

2. Cool hah??

6. Goal: Creating Dashboard effect.

Do you like desktop effects? If you do, then you must be happy to hear this. We will use a combination of Screenlets and Compiz widget plugin to achieve the dashboard effect.

1. Install Screenlets sudo apt-get install screenlets compizconfig-settings-manager
Go to System->Preferences->CompizConfig Settings Manager.

On the Left, click on Desktop. On the right, put a check beside ‘Widget layer’

2. Go to Accessories->Screenlets. Activate the widgets that you want to display. Right click on the widget and select ‘Properties’. Go to Options tab and select ‘Treat as widget’. Do this for all the widgets that you have activated.

3. You can now see your dashboard in action by pressing F9.

7. Done.

You have completed the transformation of your Ubuntu desktop to Mac OSX Leopard. Wait...wait...wait, don't forget to change you wallpaper. Using Archive manager, extract the Mac4Lin_Wallpapers_Part3_v0.4.tar.gz. Go to System->Preferences->Appearance. On the top, go to the Background tab. Click Add and select the Leopard wallpaper. (/home/username/Wallpapers/Leopard.jpg). Click Close to terminate the Appearance window.
Don't forget to leave a comment so I know that this post is useful to you.