Lighting the LAMP

A laptop upgrade was long overdue, and though exorbitantly expensive (compared with a PC) I just had to get a Mac this time.

And then I started what I thought would be a long process of setting up LAMP.

L = In this case ‘M’ for Macintosh. Mac OS X is an operating system built over a UNIX foundation. With its cool graphics, sound and user friendly interface it’s nothing like any UNIX platform that I’ve ever seen, but I’ll have take Apple’s word for it. And I did manage to find the terminal window, the UNIX type file system and remembered that the sales person told me there’s no need for anti-virus software.

A = Here’s where I got my first shock. The OS comes with an Apache server pre-installed.  All I needed to do was to literally check the option to enable it. WOW!

M = This I had to install. The install of mysql was relatively painless. However I did miss the numerous windows installer options. After the install just get to a terminal window, start mysql and then configure.

P = PHP is pre-installed as well.

In fact, the hardest part of the process was … well, there wasn’t a hard part except perhaps to get used to the window close button (X) being on the left instead of the right!

Really cool stuff!  Now I’m trying out a few IDEs, although to start with I installed my trusty Eclipse IDE. No real reason to shift to a different IDE. But purely out of morbid? curiousity i’m goign to check out the highly touted Xcode and the Aptana plugin for eclipse some time!

Top10Reads had a facelift!  Now, an over statement, I’ve never been too good with user interface work. Starting with Designing Interfaces: Patterns for Effective Interaction Design I hoped to gather some nuggets (or magic) to help improve the site’s appearance.

In the end what helped most was going back to the sites that I liked the best. This time to figure out what stood out on those sites. To check out if there was an idea to take from their site layout ( the header, content area and footer etc.) or color scheme.

Two free tools that helped are I Like Your Colors which allowed you to enter any URL and provided a list of colors that had been used at that site, and Kuler a free tool by Adobe that lets you enter a color code (or pick from an existing schema) to find matching colors!

The before and after screen shots are below.  The new UI uses a single content area marked with a round border. What do you think?

Top10Reads Old User Interface

When I first started with PHP, my starting point was the PHP.NET home page. That got me the manual, the installation guide and release code. But now that the site has evolved beyond a single page and some easy functionality, it’s time for more heavy duty tools and frameworks to help better maintain the website.  

Check out the php tool lists maintained by SmashingMagazine . Other than PHP they’ve even got some cool lists on AJAX, Javascript and CSS!  I’ll probably ruin my workstation config installing trying out all of this stuff, but I’ll keep you posted on which make it to the Top10Reads toolbox!

Last week was for Google Friend Connect. It was very easy to setup and I deployed it to Top10Reads very fast. Then I thought.

What I want to accomplish is to create a great social experience. What’s the first site that comes to mind when talking about a online social experience? Google?  Nope.  For search yes, innovation, yes, but an online user community not yet. Perhaps never.

So I checked to see what else is there.  Both Facebook and MySpace introduced their own versions of  ’friend connect’ late last year around the same time as Google’s Friend Connect.

Since I personally use Facebook, I thought I’d try out their solution. Compared with Google it took me much longer to go through the documentation and set this up on my site. Unlike Google, Facebook is already established in the ’social experience’ space and there seems to be an already available and willing user base willing to try out new apps.

Some other data points that I used; I’ve got about 10 friends that I exchange gmail with vs about 150 in my Facebook network. Another data point is that I have an ad on both Facebook and Google. I get twice as many hits from FB as I do from Google when both sites have roughly the same budget.

Facebook Connect seems to be the way to go now. It’s a gamble, but I hope that I picked the right integration for the site!

One of the biggest pieces on the Top10Reads site is the search bar.  Being a Google fan, I really wanted my search to work the same way as theirs. After researching a bit, I found that there are lots of other sites that have implemented the search text box the same way as Google.  As a user types the search box drops down a list of suggested keywords. This helps the user find the search term they are looking for quite easily. The technology used is AJAX. So with my rudimentary AJAX knowledge I went ahead an implemented it. Or tried to.

Well, the results did drop down.  But that’s about it. And now I appreciate the Google Search bar much more for the work that has gone in to it.

There’s tons of links and web resources on this. Most of it was terrible or used proprietary libraries (which meant that you need to download some big javascript libraries that other folk wrote).  In the end I found a Wrox book , Professional Ajax, 2nd Edition (Programmer to Programmer), that provided a fantastic description of this.  BTW – parts of this particular chapter happen to be available on Google Book search - check out Chapter 8.

How do you keep users engaged? At the very start I thought it’ll be wonderful if I can just put my email address on the site and visitors would send me their feedback.  Then in addition to their feedback, I could also get their email and send them an occassional update etc.

Boy was I naive…

Then I thought, let’s try to be a bit more explicit. I said something to the effect ‘if you want to know when the site is updated please please please give me your email’.  This was still lame. Cause I’m pretty sure even I wouldn’t give up my email to just any website!

Today, quite by accident I was reading a Google Blog and came across Friend Connect.  Check out their introductory video.  I think this is exactly what I need.  It allows folk to sign up for the site using their existing IDs on Google, Yahoo, AOL or OpenID!  Everyone online probably has at least one of these!

And then, I can also hookup other tools like review boards etc. that is available to folk signed up using Friend Connect.

In case you’re wondering, it’s free and could be deployed in about 10 minutes. So this is live on my site right now! Let’s see if anyone actually signs up.  Keeping my fingers crossed!

It’s cool that people are finally visiting the site.

But it’s not so cool that about 60% of users seem to just get to the site and then do nothing else except close the page! How do I know this?  One of my better decisions was to install Google Analytics right at the start. This is a free tool provided by Google which gives tons of info on the web sites’ user base; where they are, the browsers they use and in this case how long their visit lasted.

Most visits lasted: 0-10 seconds

The data doesn’t look that bad since the site just over a month old.  But the plan is to bring down the number of visitors who stay less than 10 seconds to below the 50% mark.  One way to bring this number down is by improving the site’s user interface.  The image below shows what the current interface looks like. This is the third iteration.  Look out for iteration four!

Now to get those brain cells working on the next UI design improvement!

My website is www.top10reads.com.

It’s a very simple idea and should have been quite easy to build.   Or so I thought at the time.

If you work in IT you already know all about scope creep.  It’s always that marketing person suggesting one minor feature or that manager who promised a tiny enhancement that they forgot about till the last minute that  time and again blow a project out of the water, right?

Well, in this case the new requirement was added by yours truly. My new requirement was to build this website using as much free technology and tools as possible. And yes I do mean free as in free beer and not just free as in open source. After all who can afford to sink money in a new venture when tomorrow could just be a layoff waiting to happen!

It’s been about a month now and I’ve barely made it past the initial launch! 

So… are you also interested in developing a web site on a shoestring budget ? Then you’ve come to the right place. I’ll post whatever I learn from this experience, and I sincerely hope that this helps you build your own dream website!