The best approach I have come across to manage multiple web projects is to use subdomains. Subdomains are pretty, clean and easy to manage. This how-to article is about my simple and effective method of hosting multiple web projects on localhost using subdomains. We will create two projects ‘foo’ and ‘bar’ with http://foo.localhost/ and http://bar.localhost/ as their URLs to explain the whole process. Please note that the technique described here is based on the Microsoft Windows platform. However, it is possible to do the same on other platforms with minor adjustments.

Prerequisites

• XAMPP or a compatible web server software
  More info: What is XAMPP, XAMPP FAQ
• Notepad or compatible text editor
  Hint: drag-and-drop a file onto a Notepad window to open the file.

Step 1 – create folders

Create the folder structure as shown below.

It doesn’t have to be the C: drive. But for simplicity it is always recommended that you create the Webroot folder in a drive root. Refrain from using path names with spaces like C:\Program Files\Webroot.

A short description on each folder is given below.

Webroot\projects

This folder contains individual project folders. In our case the two sub folders foo and bar reside here.

Webroot\public

This is where you put all the default stuff. For example, you can copy the Apache htdocs folder content here. This folder hosts the main site (http://localhost) content.

Webroot\xampp

Contains XAMPP files – Apache, PHP, MySql, phpMyAdmin, perl and other server related components are stored here.

Step 2 – install XAMPP

Install XAMPP on Webroot\xampp folder. I recommend you use the self-extracting 7-ZIP archive. Run the setup and chose C:\Webroot as the Extract to folder as it will anyway extract the content to a folder by the name xampp.

Run setup_xampp.bat to finish the setup process. You will get a console output similar to the following screenshot.

Press any key to finish the setup. To run the XAMPP Control Panel Application, double click xampp-control.exe. Click the start button in front of both Apache and MySql modules to start the server. Since we haven’t done any modifications yet, XAMPP runs on its default settings. See screenshot below.

Step 3 – configure Apache

Now we need to change the default Apache configuration to match the directory structure. Apache configuration is distributed among several text files. All of these files reside in the xampp\apache\conf folder. We need to edit two files: conf\httpd.conf and conf\extra\httpd-vhosts.conf.

Step 3.1 – edit httpd.conf

Go to xampp\apache\conf and open the httpd.conf file. Locate <Directory “C:/Webroot/xampp/htdocs”> and change it to <Directory “C:/Webroot/public”> . Scroll down a few lines and locate the closing directive </Directory> and add the following at a new line.

<Directory "C:/Webroot/projects">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Order allow,deny
Allow from all
</Directory>

Step 3.2 – edit httpd-vhosts.conf

Go to xampp\apache\conf\extra and open the httpd-vhosts.conf file. Uncomment NameVirtualHost *:80 by removing all hash signs (#) at the beginning of the line. (By now you would have noticed that any line starting with a hash sign is indeed a comment.)

Add the following text at the end of the file on a new line.

# Default site: http://localhost
<VirtualHost *:80>
DocumentRoot "C:/Webroot/public"
ServerName localhost
ServerAlias localhost
</VirtualHost>

# Foo sub domain: http://foo.localhost
<VirtualHost *:80>
ServerName foo.localhost
DocumentRoot "C:/Webroot/projects/foo"
DirectoryIndex index.php index.html index.html index.htm index.shtml
</VirtualHost>

# Bar sub domain: http://bar.localhost
<VirtualHost *:80>
ServerName bar.localhost
DocumentRoot "C:/Webroot/projects/bar"
DirectoryIndex index.php index.html index.html index.htm index.shtml
</VirtualHost>

Step 4 – edit the hosts file

The host file is the system file that matches hostnames to IPs. This file resides in the system folder %SystemRoot%\system32\drivers\etc and on most computers this would be C:\WINDOWS\system32\drivers\etc. Open the hosts file (yes, the file doesn’t have an extension) and add the following two lines to the end of the file at a new line.

127.0.0.1              foo.localhost
127.0.0.1              bar.localhost

This tells the system to direct requests for foo.localhost and bar.localhost to the IP address 127.0.0.1.

Step 5 – test the setup

Restart Apache and MySql by stopping and starting them using the XAMPP Control Panel. If you did not run these in step 2, just start both modules to see whether our configuration is in effect. If everything went accordingly, you should get the green Running status on both Apache and MySql.

Point your web browser to http://localhost to see the content served on Webroot\public folder. If you have nothing to start with, I suggest you copy everything in xampp\apache\htdocs folder to this location. You should get the XAMPP default web site with all the bells and whistles.

Put your Foo project files to Webroot\projects\foo folder and Bar project files to Webroot\projects\bar folders respectively. Point your browser to http://foo.localhost and http://bar.localhost to see them in action. Put the following code in an index.php file and save the file in both locations if you have nothing to start with.

<h1>Hello World</h1>
<p><?php echo "My location: " . dirname(__FILE__); ?></p>

You should get different location details depending on the URL.

Add more projects (optional)

Follow step 3.2 and step 4 to add more projects to your setup. Given below are the skeletons that can be used for this task.

Step 3.2 – httpd-vhosts.conf file entry

# vhost entry for new_project sub domain: http://new_project.localhost
<VirtualHost *:80>
ServerName new_project.localhost
DocumentRoot "C:/Webroot/projects/new_project"
DirectoryIndex index.php index.html index.html index.htm index.shtml
</VirtualHost>

Step 4 – hosts file entry

127.0.0.1              new_project.localhost

Done

That’s it. It’s easier than you would’ve imagined it to be. Hope this article helps and makes your web development experience a fun.

This is where www.delorie.com comes in to the rescue. This website provides a handful of tools for SEO related work. You can use its online lynx viewer to view a web page in text-only format. Use the Search Engine Simulator to view a web page in different summarized forms based on the content and structure. There is also a purifier, header viewer, request viewer and backward compatibility viewer. All these tools provide you easy SEO while keeping it all in the cloud; and keeping off you hand from sweating too.

Note: the color theme of the website was chosen by the client.

Screenshots

More Details

Project Name: AMDCCI.org Website
Date Created: 2003
Project Type: Freelance
Duration: 1 month
Software: Ulead PhotoImpact, Adobe Dreamweaver (then Macromedia Dreamweaver)
Delivery: HTML source files and related images

On Facebook the main navigation is on the top of the page and it show links to Profile, Friends, Inbox, etc. This is fine as long as you are on the home page or on your own profile page. But often users visit other people’s profile pages for obvious reasons. What happens here is that (naturally) users associate the top navigation with the current profile owner. In other words, even when not in your own profile page people tend to associate the top navigation bar with the person they are looking at. So in order to see who’s friends with the currently profile owner, users click on the ‘Friends’ link on the navigation bar. Consequently the association between context and task has been broken and hence the user is mislead.

In experience design word such as ‘my’, ‘your’ and other subjective terms are used to prevent this misleading when the same action can be performed on different objects of the same class. Although this won’t make everyone aware of the current context; it will at lease reduce the confusion among the majority of users.

Apparently everyone is in a hurry to give their site a new look and Mozilla falls no short. Check out the new Firefox Add-ons site with the hip search bar and pretty inner pages. Although the previous website didn’t have any serious usability pitfalls in its design, the new look-and-feel is very compelling to use. I love the fact that they’ve decided to show a couple of thumbnails on the main page and provide a clear rating and reviewing panel on the convenient right-hand side of the page. Furthermore that green color search box somehow invites me to explorer more. Another good example for effective use of color to uplift the usability of a design.

It is also worth mentioning the drop-down categories list on the left hand side of inner pages that is so well designed that it is not one of those “hover me and I’ll show you myself” kind-a-design. A note to all you AJAX loving, “I’d do whatever the dudes do” web designers, learn from the pioneer.

When I started designing this theme, I didn’t have any expertise on WordPress. The principles of blogging were completely new to me. I looked into many other blogs to figure out the essentials of theming. Ironically most themes were structurally the same except they looked different in presentation. But is this commonly accepted structure really usable? This is what I discovered.

File Away
Some details presented on blogs are unwanted or rarely used. The archive for example has no significance to an average user. Since majority of users end up in a blog post by getting referred by a search engine, there is very little chance that someone visiting to read a certain blog post would drill down the archive to read other posts.

Attention to Detail
Only posts matter. Everything else is inferior. Even static pages have less significance unless information presented on static pages can draw more interest than posts. Having a mechanism to list and summarize the most recent posts can be beneficial.

No one dare to spare time on the archive. Give it less attention. Have a page that list all post titles that is groped monthly or yearly. This actually depends on how much you write; but reduces confusion and the hap-hazard nature of the archive.

Prevent making countless categories. Use a small number of categories to group different areas of interests. Make use of the new WordPress tags to brief your visitor about the post. By the way, that tag cloud makes no sense to many people. But it’s a good way of showing your intents. So use it judiciously, don’t throw it on the face.

Least but not last, avoid the top ten design mistakes when creating your blog. Remember, usability guidelines applicable to a regular websites are applicable to blogs too.

1 – current theme as at 20^th November, 2007

1. Log on to your Gmail account.
2. An RSS icon appears on the address bar. (This screenshot is given in Mozilla Thunderbird)
   
3. Select ‘Add Gmail Atom Feed as Live Bookmark’ from the context menu.
   
4. Copy the URL from the address bar.
   
5. Go to your email client and subscribe to the URL copied in step 4.
   For Mozilla Thunderbird, right-click on News & Blogs and select ‘Subscribe’ from the context menu.
   
6. You will be prompted for the user name and password for your Gmail account.
7. That’s it! Now you are ready to receive new mail notifications via RSS.

On many occasions I heard Loe recommending the book On Intelligence by Jeff Hawkins and Sandra Blakeslee. I never got the chance to add it to my library for some reason. So I thought of adding it to my collection today. Guess what, according to Audible, my geographic location prevents me from listening to this great book (see screenshot). My question is, if I can buy and listen to other audiobooks from Audible, why not this? I find the notice ‘We are not authorized to sell this title to your geographic location’ somewhat a feeble excuse.

As I mentioned earlier the site is poorly designed and you have to dig deeper to find useful information. For instance the weather forecast for today is two-levels deep from the home page; which is in my opinion should be on the first page itself. However the website provides useful weather related information on Sri Lanka which is not readily available from other online weather sites. What’s more interesting is that some of the vital information is posted in Sinhalese (as an image though).

It’s a pity that this website isn’t popular and wide spread in the society. Undoubtedly many Sri Lankans and foreigners can equally benefit from this service and the authority’s should leverage and promote this website to enhance its quality.

Some useful links from the Department of Meteorology website

• Weather Forecast for Today (Island and Sea)
• City Forecast for the Next 36 Hours
• Weekly Weather Review
• Weather Data for the Last 24 Hours
• Latest Satellite Images

Note: Photo by xion

The prerequisite is Firefox. No need to install any fancy third-party plug-ins although there are many to automate this task. We’ll be using a great feature already built into Firefox called ‘View Selection Source’.

1. Go to the Flickr page that has the photo you want. Usually it’s http://flickr.com/photos/<user>/<photoid>/
   (Ex: http://flickr.com/photos/enteelk/629074618/)
   
2. Select the photo by clicking just out the left-side of the image and dragging your mouse to the right-side of the image and releasing.
   
   Notice how the photo is now selected with the selection color overlay.
3. Now right-click on the selection and select View Selection Source.
   
4. A window with the title ‘Dom Source of Selection‘ will pop up with the selection source code.
   
5. Select the source attribute text (img src="<text>") of the image tag without the ?v=0 portion which is the path to the photo.
   (Ex: http://farm2.static.flickr.com/1405/629074618_20f6542a03.jpg)
6. Copy and paste the text on the address field and press enter. Select Save As from the File menu or right-click on the picture to save it.
   
7. Done!

Please note that even if a photo is made public, you have to obtain license for commercial use. This post is about making your life easier and not about stealing other people’s intellectual property.