Responsive Web Design and Development

Responsive web design and development.

1. From scratch using basic CSS
2. Using Twitter Bootstrap
3. Using Zurb's Foundation

My personal preference is Zurb's Foundation. But I can use the frameworks you want.

wordpress foundation themes

Pending projects on Freelancer.com

I never had 4 projects pending in my Freelancer.com dashboard. This is what I saw on 2012-09-23 in Freelancer.com dashboard.

pending freelancer.com projects

I am - level 10 - A Student - @ freelancer.com. I have earned many badges and activated a number of rewards on freelancer.com.

freelancer.com badges

First Dispute on Freelancer.com

This post is about my first dispute in Freelancer.com. I came to know about this dispute in today morning (2012-09-24). When I open my email inbox I saw a strange email from freelancer.com (I told you I received this kind of strange email a few weeks ago too. It was about a deleted project on freelancer.com). This time the mail was about a dispute regarding an initial milestone payment.

A few days ago I received a 'Someone wants to hire you' email. That said,

"Congratulations! cargoria is impressed by your Profile and wants to hire you directly for their project on Freelancer.com. You don't even have to bid!"

Then it said,

"Good news! cargoria has created a Milestone Payment of $50 USD for 'Final Hand Facebook App'."

I didn't even bid on this particular project. Usually I stop bidding for other projects once I was awarded a project. I was working on another project at this time. So once I received this message about the custom project that had been awarded to me, I messaged back to the project poster about my inability to accept the project. He understood my explanation and agreed to work after finishing the current project.

Normally, when I do not accept a project, the project is automatically revoked and any milestones created is refunded back to the creator. But at this time he, the project poster, had filed a dispute regarding his initial milestone. This was a new experience to me. Initially I though I might need to pay some kind of compensation for him. But the dispute was resolved through few clicks on the dispute resolution pages on freelancer.com.

The message I am trying to communicate is; if you cant accept the project, reject it with a polite message. Then the milestones will be refunded back to the project poster. Otherwise he will need to wait until the project is automatically revoked. (Actually I don't know how this is shown in project poster's interface, as I neither awarded a project to anyone on freelancer.com nor created a milestone.) Always reject if you can't accept the project. It does not hurt the project poster.

Website Language Convert

This project was about creating a widget enabling a visitor translate the site into a number of different languages. Initially ran into some questions regarding which API to use. Initially the translation widget was implemented using Microsoft Translation API (also called as Bing Translation API). Then it was modified use the Google Translation API.


The following was the project description.

I created the following demo to show the translation in action for the given pages. Integration of some scripts to the site pages required to add the translation widget to the website.
I was able to complete the project successfully


I earned the following badge during the project. It was for receiving 10 milestone payments for all projects done in freelancer.com

HTML5 to WordPress 2

This is the second project from ftealr. I completed a HTML5 to WordPress project for him about a 3 weeks ago.

This time the project was about creating a website for a computer repair company. HTML5 template was given and WordPress theme was expected.

I created a WordPress theme from the HTML5 template.

I was able to complete the project successfully.

The following is a screenshot of the the completed project. I created options page for this theme. Theme supported standard WordPress menus and several other standard features.

Security Site

This website was created as a demo before awarding a project. Unfortunately I was not chosen for the project. However I completely built a website according to their description. The following was the project description.


According to the project description this employer was cheated by a freelancer in previous project on freelancer.com. The following is the project poster of this site project.




Then I decided to make him a live demo of the website before awarding me the project.



I asked the employer to wait until I create a website to fulfil his requirements. The following is a portion of the message I sent to the employer.




Unfortunately I received no reply from him. I kept improving the project for some time and finally developed an advanced WordPress site with significant features. The theme was based on Cyberchimps Business Pro theme.




The following is the home page. It has a slider for featured content. The images for the sliders can be changed from the backend.




Footer was modified and added content to match it for a security site.



The project employer was selling security related products. He needed a shopping cart too. I used 'WordPress Simple Paypal Shopping Cart' plugin and modified the front appearence to match the rest of the security site.




Now the site has a shopping cart and allows paypal checkout of security items.




This time my proposal was not selected. But I will keep trying until I get selected for a project.

Developing and Deploying with Heroku

I am going to develop this app with Heroku toolbelt. Download the toolbelt and install it in your computer.

https://toolbelt.herokuapp.com

get heroku toolbelt

I am using Ubuntu. If you are using Ubuntu you can use the following wget method to install it. If you are using Windows follow the guidelines in Heroku site. It is very easy to install the toolbelt in any OS.

wget -qO- https://toolbelt.heroku.com/install.sh | sh

install heroku toolbelt

Windows users may skip this step. You should add keys and upload them into Heroku servers.

ssh-keygen -t rsa -f id_rsa
# make sure to remember the passphrase.

adding heroku keys

Now login to Heroku.

Heroku login

login to heroku

Clone the remote git repo into your local folder. This is just getting the source app files in the Heroku server to your computer for editing.

git clone git@heroku.com:morning-ocean-8757.git -o heroku

clone heroku git repo

Now we will edit the index file of the app. I will just edit some lines. You can use any text editor to edit this. notepad, wordpad, dreamviewer, nano, gedit, bluefish, compozer, etc.

edit facebook app files

Put the edited source files back to the server. Browse again to the Facebook App URL. You will see the changes you did to your app index.php file.

https://morning-ocean-8757.herokuapp.com

updated heroku facebook app

Now the app should be added to the page. Use the following URL to add the app to the page tab

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

For this particular app it should be as follows.

https://www.facebook.com/dialog/pagetab?app_id=153825634746333&next=https://morning-ocean-8757.herokuapp.com

Select the page you want to add the app. If you don't have a page yet, create one. It is free.

add facebook app to profile tab

Now it is being displayed in your page tabs. Click on tab to visit the app.

facebook app is added to tab

Now the app has been integrated to the page tab.

app on tab

Visit app integrated page tab below.

https://www.facebook.com/pages/PHP-Sri-Lanka/155553284581042?sk=app_153825634746333

Visit original app hosted in Heroku servers below.

https://morning-ocean-8757.herokuapp.com

simple facebook app

This concludes Part 2. Browse the other parts.

Part 1: Simple Facebook Like Gate with Heroku Hosting
Part 2: Developing and Deploying with Heroku
Part 3: Implementing the Facebook Like Gate