The programming part is done in 8 days. And I have just added some style onto it today. Further interface design should be our yet to be hired web designer’s job.

style-less page:

Framework used:

Codeigniter & Blueprint css

Monday, my boss suddenly called me up and ask me go to mamak downstairs to find him. He then had a chat with me and asked me to build a social network from scratch. This Social Network will be sell to 1 client and to our big boss back in China/HK as well.

OK, here are some scre

enshots of my prototype. I start building it since Tuesday.

As you can see, I follow facebook’s layout a lot. The final layout will pass to designer (which my company is still looking for).

First page:

Home page after login:

Friend list:

Search:

Updated on 28/7

Now there are still some codes and features are missing. Will be uploading the whole social network for the public to test once it hit public preview. Please give some suggestions leh.

My profile:

Edit profile:

Change Display picture:

updated on 29/7

Photos:

Create album:

Updated on 30/7

Viewing photos in a album:

Viewing photo:

Updated on 31/7:

Owner’s profile page:

Friend’s:

I am using CodeIgniter in this project. This PHP framework really saved me much time.

21/7 – Register,login,logout

22/7 – Friend list, CSS layout

23/7 – Restructure file organization to MVC approach

24/7 – Search engine

27/7 – Profile layout – view,edit,display pic

28/7 – Profile Updating,changing avatar(generate thumbnail automatically)

29/7 – Photo – view albums, create album, upload photo

30/7 – Restructure photos,album, photo controller; upload multiple photo; view photo and photo in album

31/7 – Profile page

Just as I read until 75% of the Flex e-book, Silverlight 3 suddenly pop up.

Just briefly read through those article about Silverlight 3 and gone through the live streaming demo, the improvement is very promising. The video start playing instantly and the quality is much better than Silverlight 2, and it’s HD video. Unlike flash video, if you try to skip the video, you will need to wait the player to buffer. But in Silverlight, you can click on any position of the timeline and it doesn’t has any delay.

Another features in Silverlight 3 is directly pointed at Adobe Air. Silverlight 3 now let you develop application that can be run out side of browser.

Back to the content it self, it doesn’t looks anything like those advertisement booklet you received nowadays.

It’s more like a magazine with plenty of ads. Nevertheless, it’s content covers:

• Current issues
• Health & Beauty
• Life Style & Trend
• Entertainment
• Columnists’ Page
• Economics/Investment/Corporate
• Weekly topics i.e. Education, Gadgets, Home Enhancement etc
• There will be no political & sports content

Mozilla has released a extremely useful site for web dev, called Open Web Tools Directory. The directory is full of frameworks, SDKs, library and anything that you required to develop web app. For example, JQuery, Google Web Toolkit, PHP IDE, and etc.

This app basically developed with just HTML and Javascript. I also developed a server side API on my blog so that the AIR app can get the latest news. It also indicates that this app require an internet connection, or else it is just a crap.

The most difficult part is linkage between AIR app and server side. Theoretically, JQuery can be use to get data of my blog. But JQuery meanwhile does not support cross domain XML. This can be solved by using JSONP.

   1: $.ajax({

   2: url: http://www.otherdomain.com/example.php,

   3: type: jsonp,

   4: jsonp: jasonp_callback,

   5: success: function(jsonp){

   6:

   7: //ur method

   8:

   9:     }

  10: });

I did retrieved data from my blog onto my localhost, but contained so much error syntax that i couldn’t understand.

Then I use the hard way, using air component.(I mentioned “hard” is just because I never learn AIR thoroughly)

The result is just like what I want. Then the rest is just like normal HTML+JavaScript. I used JQuery to process the XML returned from my blog.

Screenshot:

v1

v1.01

log:

• 6 July 2009: yaofongblog preview build 1: Load 10 latest blog post of http://blog.yaofong.com
• 7 July 2009: version 1.01(build 2): Revamped with new interface

It was quite torture to learn an almost brand new concept OO-PHP5 all by my self. But now I am having fun with it. My OO skill improved alot as well.

Anyway, back to my facefood, just realized that many other developer are having the same difficulties of mine. Google map api V2 required syntax:

  1: <body onuload=”GUnload()”>

But it is prohibited in Facebook app. Although we could overcome this by embedding a complete web page in a iframe:

  1: <fb:iframe src="somepage.php">

Then it become impossible to load up the google map.

Therefore I am now researching Google Map API for Flash…(n my Action Script suxx)

Here is the prototype (codename:facefood): http://apps.facebook.com/yaofong/. I m not sure if u can open this app since I have not publish to the public.

—————————————————

Anyway, I have to work on company project start from tomorrow, have to research into OO-PHP. So, will be slowing down on facefood, yet again.

So first step must be following on a hello world tutorial. Which surprised me very much, it is so simple.

with a line of code, or FBML

  1: <p>Hello World <fb:name uid="loggedinuser" firstnameonly="false" useyou="false"/>!</p>

Save it onto your server and pop..here is my first facebook app.

In Google Chrome 2 (already out of beta) there is a small little but useful function, I not sure how google call it. It basically let u search web site content directly from the browser. For instance, u can search something in my blog directly from Chrome without opening my blog site. This apply to blogspot, facebook, google it self, bing.com, wikipedia and I believe it support almost the popular platform.

1. Type in my blog url, then a instruction will appear on the right.

2. After hitting the tab button, u will be able to search my blog directly from ur browser.

3. After hitting enter, search results will pop out. Just that simple..

4. Moreover, it automatically add a search box to the right of chrome’s default page