No More, thanks to KnowMore.org

When non-profit organizations and foundations made the realization that, despite their limited budget and resources, they could reach their target audience effectively (all thanks to the web), their objectives suddenly became much more attainable. Carrying out the tasks of a given development program might be costly, but at least spreading awareness of the issue, and reaching out to volunteers and doners, has become significantly easier.

KnowMore.org is a community-driven wiki that aims at aggregating corporations and entities to a publicly-accessible database to raise awareness about human-rights violations. It does so by researching and finding the companies and multi-nationals that are responsible for “attacks on democracy, worker’s and human rights, fair trade, business ethics and the environment.” It’s a brilliant initiative that brings valuable information in a centralized location for everyone to benefit from.

Not only is KnowMore.org impressive because of the initiative and online presence, but also  because of the way in which they’ve exploited the web (no pun intended). First of all, the look and feel of the website puts it way ahead of the rest (including many corporate websites). Secondly, the fact that it’s very easy to use (spin off from the widespread Wikipedia) inevitably encourages anyone with interest in the field to take part and add to the extensive database.

That’s not all. They’ve actually taken it to the next level by offering a Firefox add-on called KnowMore Extension. What this does is bring up a notification underneath the toolbar of Firefox whenever you are visiting a website of a company that has violated human rights one way or the other. And in order to avoid being what opposition would rush to claim generic, or over-generalizing, they actually indicate the exact rights that have been violated, as well as providing the link to learn more about the illegal activities of that particular company.

KnowMore.org notification bar

It’s like having the community do all of the work for you while you’re browsing.

There are many organizations and non profit entities out there that are striving to make this world a better place. KnowMore.org is like many of them in principle, but far more effective in practice. That is because they have managed to reduce their costs by making the entire platform online, engaged with visitors via the attractive interface and the easy, familiar wiki system, and reached out to many more via the effective Firefox plugin.

If you are part of an NGO or a social development initiative, then the standards set by KnowMore.org should be your immediate goal. That is partly why our beautiful web is power to the people.

Share this post:

Migrating from one WordPress installation to another

When you are working on a revamp for your website and/or move to another host, one major concern is how you will be able to migrate all of the posts and information from the current website to the new one. Depending on the size of the data that you are moving, this could be a long process or a short one, but in both cases, it is rather straight-forward.

1. The first step is to do a fresh install for the latest WordPress on the new server, you can follow my step-by-step guide to getting your WordPress blog up and running. You might be tempted into moving everything as is and just updating the database credentials, etc. but a fresh installation clears your blog from many potential problems. Ideally there would be a temporary URL that you could use while testing, after which you can update the DNS for your domain and go live
2. If on a testing server, you should consider using the WP Dummy Content plugin which generates as much fake content as you want to act as placeholders and give you a clear idea of how everything will look on the final website
3. Once the look and feel is as you’d like it to be, it’s time to install the plugins that you will be using for your website. One option could be as simple as downloading the folders in the “plugins” directory on the old server, but that’s definitely not the kind of attitude you want to take with you in 2010. The best practice would be to re-install the plugins one by one from within the new admin control panel. This will give you to option of researching better alternatives to any plugins you weren’t entirely comfortable with, and also assures that you have the latest of each one
4. Your temporary testing website is now ready with all of the features and functionality, displayed via fake content. It is now time to import the content from the old website
   • From the admin control panel of the old website, go to Tools > Export to create the XML file that you are going to be carrying to the new blog. If the content is large in size (over 1,000 posts), you might want to use the Advanced Export for WP & WPMU plugin, which facilities the filtering and segmentation of the different sections of the website
   • In many cases, the XML file is too big to be uploaded directly into the new installation. Therefore, you can compress the file using the .gz compression, which is understood by the huge majority of servers nowadays. You can use an open-source application like gzip to compress the XML file to about a sixth of the original size. When you upload the file, your server will automatically uncompress it, meaning you will spend far less time waiting for the file to be uploaded
   • Besides that size of the XML file itself, you could face the problem of reaching your PHP memory limit while uploading. This basically means that your server is only allowed to use a limited amount of memory before it stops whatever it’s doing. There’s a good guide at lost-in-code that shows you how you can increase that limit
   • If the importing process goes smoothly and then suddenly stops at one point, there’s no need to panic. You can simply refresh the page, hence resending the script to be parsed and imported, and WordPress will automatically skip all of the posts that already exist. Meaning that even if it stops every couple of thousand posts, refreshing will make it pick up where it had left off
   • NOTE: Although I haven’t tried this myself, there’s an alternative method for moving the content to the new location using a desktop application such as Navicat. In which case you would enter the database information of the two servers, and the program migrates the entries from server to server
5. Final testing is necessary before you update the DNS on your domain name to make it point to the new server. It is generally good practice to work on a ToDo list with everything that needs to be done for the website to be final. Those that are urgent should be completed before updating the DNS, while the rest can be done while you are waiting for the DNS to be updated everywhere (could take up to 12 hours)

The best part of it all, is that it’s free. With the power of the open-source tools, you will always find the help that you need all over our beautiful web.

Share this post:

El Koshary Today: Satirical News Website Built with Drupal

After months of hard work and creative time-wasting techniques, Egypt’s first online satirical news source is finally here. El Koshary Today is a website built with Drupal CMS that brings the latest fictitious stories from Egypt and around the globe.

El Koshary Today logo

It is built to be light-weight, simple yet sleek. The most important aspect of the website is the content itself, therefore, any unneeded elements would inevitably backfire as the audience are searching for a pleasant experience as they browse the dynamic content from the different subject areas.

Photo by Hossam el-Hamalawy

Inspired by Koshary, the main traditional dish that gains its popularity from it’s economical value, yet strong and engaging taste, the writers aim at springing off what is typically Egyptian and reaching out to the world. It is an approach to analyze and constructively criticize the difference aspects of the culture that gave birth to the revolutionary Koshary. You can read more at the Koshary Philosophy page.

EKT is built on the 960 Grid System framework that significantly facilitates the creation of a base/skeleton for your website. Using the traditional 12-column grid, the homepage is divided into three columns to display a lot of content, without sacrificing the simplicity of the layout and the usability aspect. The inner pages however, are two columns only (widening the right sidebar after removing the left one) to give more prominence to the main column with the article text, and to use the right sidebar to bring the the most read or any other promoted material.

Drupal was the ideal content management system for this particular project. On the one hand, using powerful modules such as Views (with the revolutionary Semantic Views) gives you complete control of where and how the content appears. One problem might be the lack of control as far as the unnecessary markup that is inevitably added to the code. Semantic Views significantly reduces the excessive code that gets in the way, and makes a substantial improvement to the arguably inefficient approach to templating in Drupal.

Drupal: Amazing CMS

Aside from the markup issue, and the naturally aggressive image caching that could be frustrating at times, getting Drupal to do exactly as required was a breeze. One of the most impressive features is the ability to specifically customize with the different users with different roles can see and do. As a result, the editors and contributors never come across any options they will not be using, and adding/maintaining the content is a fast and easy process, with no technical knowledge required. The ability to make revisions and leave comments associated with each revision, with the option of reverting to older version, is yet another fascinating functionality as part of the open source CMS.

El Koshary Today's interface

The result is a humorous website with fresh content displayed via an elegant interface using an efficient back-end built on an organized, cross-browser compatible framework. El Koshary Today is Egypt’s first satirical online news source, and it yet another example of the endless possibilities for the members of the web, thanks by large to the open-source technologies, and of course, the beautiful internet.

You can visit http://elkoshary.com, become a fan via the Facebook page, or follow on Twitter @elkoshary

Share this post:

How To Create Your Own Blog: A Guide to Installing and Configuring WordPress

Many are unaware of just how easy it is to start your own blog using the best open source tool for blogging out there: WordPress. This is a tutorial that will get you up and running in no time. It will cover everything from purchasing your domain name and hosting account, to downloading, installing and configuring WordPress on your website. After all, your space on the World Wide Web is your birth right, and giving it up because you overestimate the process involved is a pity indeed.

So let’s jump right into this

Step 1: Domain & Hosting

Makre sure your host supports PHP and MySQL

Before you can run a website or blog, you need a unique address (domain) pointing to a space that you’ve reserved on a remote server somewhere on the planet (hosting). You can view my guide on hosting to fully understand the different categories, and thus, which one is best for you. Generally speaking, if this is your first time, a standard shared web hosting account, that usually offers a free domain on top, gets the job done.

For example, if you choose to go with Blue Host, then simply visit the website, and sign up for an account that will cost you $7 for every month, and you’ll probably pay for two years in advance. Any standard plan from any provider will do, granted it supports PHP and MySQL databases (some providers don’t offer databases with their basic packages, but that’s a bit of a rarity nowadays).

Step 2: Create the Database

Now that you own an account, log on to the administration control panel, which is provided to you by the hosting company you’ve chosen to go with, to create a database:

Find the link to add databases (could also use PHPMyAdmin)

1. Go to your control panel and login
2. Find the databases link, click “add new database”
3. Give it a name, for example: WordPressBlog
4. Add a user that will be accessing the database (by creating a username and password)
5. Take note of the address of the database (in most cases, it’s “localhost”, but sometimes it’s different. In which case you’ll see it displayed along with the database name somewhere)

Now that you’ve created the database, as well as the credentials for accessing it, you’re ready to install WordPress.

Step 3: Download WordPress, Then Upload It

This is a straight forward process:

1. Go to http://www.wordpress.org/
2. Download the zipped file
3. Unarchive (extract) it on your computer, you should be left with a folder called “wordpress”
4. Open your FTP client. FileZilla is one of the best – free, open source and efficient
5. Enter the FTP information for your website (given to you by your provider, usually found in the control panel)
6. Upload the contents of the “wordpress” folder to the root directory of your website (you can upload the entire folder, in which case the installation would be at: www.yourwebsite.com/wordpress)

Now that WordPress has been uploaded to your server, and your database is created, you are now ready to go through the famous five-minute installation.

Step 4: WordPress Installation

Everything is significantly easier with WordPress, and the installation process is no different.

You'll be prompted to create a configuration file

1. Direct your browser to where the WordPress files had been uploaded (if in the root directory, then just go to www.yourwebsite.com)
2. You will be prompted to create a configuration file, this is where you store basic information such as the database credentials. Click on the button
3. Click on “Let’s go” to enter the information
4. Enter the database information. You should have all of the details from when you created the database earlier. You can also change the prefix of the tables created in the database, but “wp_” will do just fine
   
   

   Enter the database information

5. If the database credentials were correct, WordPress will give you confirmation that the tables have been created and the initial data has been added. In some cases, the configuration file is not writable, in which case you will have to manually edit the file to add the database information. You can follow the steps on the WordPress Codex installation guide
6. Enter the title and email that you would want to use
7. When all goes well, you will be given a temporary generated password that you will use to enter the administration control panel for the first time. Click on login and enter the credentials that you were just handed
   
   

   Temporary account details. Change password after logging in

Now’s the time to access the control panel and get ready to start blogging!

Step 5: Configure WordPress

The first time you enter the admin panel, you should change your password to something you can remember (you’ll be reminded to do so anyway). It’s also good practice to add another user to replace “admin” so that your alias appears with the posts. If you want to create another administrator account, click on “Users” from the menu on the left, then add, then enter the information. Don’t forget to make the user “Administrator”. Now that the user’s created, log out, and login with the new username and password. Feel free to delete the original “admin” user, now that the blog has a new administrator.

As any beautiful open source tool, there are tons of options that you could go for right after a fresh installation. Having said that, the following are the personal recommended additions/configurations after you’ve logged in for the first time:

• Enable Permalinks: This is by far one of the biggest advantages of WordPress; the simplicity of the process of controlling the URLs generated. If you’re a frequent blogger, choose year/month/day/title. Otherwise, year/month/title should do fine
  
  

  Enable Permalinks: easy and powerful

• Enable Akismet Plugin: I’ve talked about this plugin in my post Essential WordPress Plugins where I’ve listed and discussed every single plugin used for this website. Akismet is revolutionary in how it automatically detects spam comments and places them in a separate queue that you’ll probably never need to check – it’s never mistaken
• Browse/Install More Plugins: You can check the list of the plugins I use, or you can simply browse the most popular plugins from the “Plugins” menu item on the left. You won’t lose anything in trying out plugins and disabling them if you’re not satisfied. Almost any website/blog could use popular plugins such as “All in One SEO Pack”, “Contact Form 7″, “Social Bookmarking RELOADED” and “WP Piwik” (here’s why you should be using Piwik instead of Google Analytics)
• Change Theme: As attractive as the default theme may seem at first look, it’s a good idea to go for a different theme. The new version of WordPress allows you to browse the different themes available as if installing plugins – very convenient. You will find the link to install themes under the “Appearance” tab. Otherwise, there are numerous websites dedicated to free WordPress themes that you can install, upload via Filezilla, and activate with the theme menu item

Now you’re golden. You’ve set everything up, and now you’re ready to start sharing your thoughts and ideas with the entire world.

Step 6: Start Blogging!

You can start by making a test post, just to get acquainted with the interface and features. After that, you may want to go through the following content-related options:

• Add a couple of pages where you will be displaying information that doesn’t change much (for example, “About Me”,  “Contact”, or “WordPress Guides”)
• Decide whether or not you’re going to be using categories (best used for posts that are displayed on different parts of the website. Otherwise, stick to tags only). Create your categories from the “Posts” menu item
• Make links’ lists such as “Blogroll” or “Shout out to my people” where you can share various links with the visitors. The “Links” menu item is found on the left and is also very easy to use

That’s it, you’re done! As you can see, the entire process takes 20 minutes or so, and there are substantial amounts of resources for help and support flooding the net if you need them. Generally speaking, it is a straight-forward process and there’s very small room for issues and problems.

You’re Voice on the Web – Your Right

The most important aspect of yet another revolutionary product from the open source community is that it simply acts as a channel that facilities the communication and information exchange between people across space and time regardless of race or origin. It is very important to take advantage of your right as a member of the community of the World Wide Web, the current generations are the first in history to be granted such a privilege. Underestimating its power, or overestimating the technical skills required, is a shame. So get yourself a blog and write about whatever it is you want to blabber about, you have absolute freedom. Beautiful.

Share this post:

Avoid Waiting on Downloads: SkipScreen

I had previously discussed the 7 must-have Firefox add-ons for web developers and designers. I had also spoken about AdBlock Plus, which is, at times, the most downloaded Firefox extension out there. Now I think it is important to bring up an add-on that revolutionizes the way many people exchange files via bulk storage and sharing websites such as RapidShare and Megaupload.

SkipScreen is a seemless addition to the world’s best browser that automatically skips tedious and frustrating intermediate pages preventing you from reaching the file you are trying to download. Whenever someone wants to share a large file (regardless of its nature) and chooses to do so via a file-sharing online service, he or she saves the hassle of having to own web space accessed via an FTP client, and it’s free. The problem, however, is that the recipient has to pass by at least three or four ad-flooded pages before reaching the point of having to wait for a timer to finish because he or she has done the blasphemous move of refusing to sign up for a “premier” account.

Not anymore. Not with SkipScreen:

Click on the link and start the download immediately. No more torture.

Regardless of how often you come across files hosted on any of the numerous supported websites, this add-on is golden like the oldies. Install it directly from the Firefox Extensions page, and forget that it even exists, just like it’ll make you forget about painful intrusions ruining the otherwise beautiful and seamless web experience.

Share this post:

Essential WordPress Plugins

Inspired by Roberto Diaz’s post (in Spanish), Behind The Scenes, I wanted to list all of the WordPress plugins that I am using across this website, with a brief review of each one.

The beauty of any open-source project lies in the efforts brought forward by the community supporting it. WordPress has proven to be a revolution in the blogging/CMS world after effectively bringing the best out of everyone and everything in a single place. Those plugins were the ideal fit for me, and if you are looking for something different, there’s no doubt that you will find your perfect match.

Share this post:

Sharing Blog Posts With Sociable

It’s refreshing to see scores of blogs and micro-sites on the Internet that are using WordPress. Not only is it the clear leader when it comes to creating personal or professional blogs, but it has also stepped into the realm of CMS-driven websites, and is in many cases the best choice. The free, open-source web application prides itself in how powerful, yet simple, it is, and it can only become even more successful.

Suffice to say, with thousands of plugins available out there, it is not always ease to take full advantage of the features that are brought to you by the extensions developed by the WordPress community. Some users go overboard with numerous plugins that are not bringing added value, and are therefore inefficient. Meanwhile, others are missing out on the basics. When you’ve gone online with a blog, it is absolutely vital to attempt to attract the largest crowd possible, and there are various methods at hand. Besides some quality Search Engine Optimization, sitemap submissions, and permalinks (explained here), it is crucial to facilitate the way in which the website visitors can share your posts with friends and family.

Any user can simply copy the URL and past it in an IM chat or email. But let’s not kid ourselves: users of the Web are lazy, and that’s not going to change anytime soon. If it’s not sorted out in two clicks, at most, then no one will be bothered. For that reason, you’d be crazy to skip integrating a plugin that allows users to share your posts via social network websites and the likes. There are a handful of post-sharing plugins out there, the most prominent of which, is Sociable.

By installing and activating Sociable, you will have automatically placed a row of icons at the end of each post that makes the visitor a click away from publishing a link to your post from sites such as Twitter, Facebook, Technorati, Digg and many more. In fact, the complete list of websites available boasts over 60 options:

Sociable Options

Using the settings page integrated into the WordPress administrative menu, you can configure which ones you would like to appear, and in what order. Moreover, you can opt to place your own icons, as oppose to the standard ones that ship with the plugin. It is as simple as creating a directory, placing the icons in the proper names (follow the standard set by the original icons pack), and enter the URL to the image folder via the settings page. With a wealth of options within reach on all corners of the internet, even if you are not willing to design your own icons, you can download any of the free packs available with an appropriate license.

As a result, any user who finds your post of interest, can easily choose his or her website/service of choice, and spread the word. The downside of the Sociable plugin is a bizarre problem, with a very easy fix.

XHTML Validation

A recent update to the plugin changed the classes associated with each icon displayed to an id. That is plain blasphemy as it means that on the main posts’ page, for example, a given id is repeated ten times (once with each post), which causes the XHTML validation to go out the window. You might’ve spent endless hours and sleepless nights on end to get your website to validate correctly, and with a simple plugin such as Sociable, all your efforts will have gone down the toilet. Interestingly, the plugin originally used classes, and then switched to ids, and then there have been two more updates since, but the plugin remained XHTML invalid!

Not to worry, though, the solution is very simple:

1. From the WordPress control panel menu, click on “Plugins”
2. Find the Sociable plugin, and click “edit” underneath
3. Choose the file sociable.php, and scroll down to the following segment:

   /**
    * Start building the link, nofollow it to make sure Search engines don't follow it,
    * and optionally add target=_blank to open in a new window if that option is set in the
    * backend.
    */
    $link .= '<a rel="nofollow"';
    $link .= ' id="'.esc_attr(strtolower($sitename)).'"';
    if (get_option('sociable_usetargetblank')) {
    $link .= " target=\"_blank\"";
    }
    $link .= " href=\"javascript:window.location='".urlencode($url)."';\" title=\"$description\">";
   

   And replace the “id” with “class” as such:

   /**
    * Start building the link, nofollow it to make sure Search engines don't follow it,
    * and optionally add target=_blank to open in a new window if that option is set in the
    * backend.
    */
    $link .= '<a rel="nofollow"';
    $link .= ' class="'.esc_attr(strtolower($sitename)).'"';
    if (get_option('sociable_usetargetblank')) {
    $link .= " target=\"_blank\"";
    }
    $link .= " href=\"javascript:window.location='".urlencode($url)."';\" title=\"$description\">";
   

4. From the settings page, uncheck the “use Sociable stylesheet” and use your own classes to make the icons look the way you want. Or you can simply dig into the sociable.css file and change the “#” of the links’ names to “.” in order to turn them into classes and not ids. However, it is recommended to add the CSS classes to the stylesheet you are already using in order to assure that the icons integrates seamlessly into your design

Remember that after a plugin update, if the author has not fixed the problem himself, you would needt to make the change again. Even though it might seem like a bit of a hassle, the “fix” is done in a couple of minutes, and is well worth the effort. Providing users with the ability to share your posts is an absolute must, and Sociable is by far one of the best plugins to do so.

Share this post: