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:

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:

jsAnim: Beginning of the End for Flash?

As I was stumbling upon the web, I came across the jsAnim website. The first impression that comes to mind when you open the website is that of vector-based, colorful Flash animation. Interestingly enough, though, it is yet another example of animation and cool effects achieved through pure JavaScript – no plugins required. Just like jQuery has introduced a wide range of animation effects and interactive content, JsAnim looks to rid the users of Flash, especially if all they’re going to do is relatively basic vector animation.

In an earlier post I made about the Solidays festival website, I talked about an example of impressive and intuitive Flash use. Unfortunately, many websites seem to be using Flash for the wrong reasons, and quite a number of developers have opted to fully rely on CMS-driven websites at the cost of some of those cool effects that can give you the edge in a website or online application. Nowadays, with the rise of JavaScript libraries such as jQuery and JsAnim, you can get the best of both worlds by integrating the JS files and calling upon them when needed. The result would be simple, professional and extremely easy to manage/maintain websites, that boast special effects and animation. This is not to say that Flash, as we now it, will cease to exist. Rather, this allows for developers to make a clear-cut choice: either develop the entire website in Flash, and take advantage of the unique features it gives you, or stick to XHTML and CSS using a CMS with JavaScript libraries integrated. The latter of which is by far the most popular choice.

One of the most impressive features of JsAnim is the small file size of just under 25KB. And unlike jQuery, you’re not going to be installing plugins that may increase the file size and require more time to load, at least not for the time-being. At version 0.2, this is only the beginning, and it can only get better.

My observation is that the difference between a multimedia developer and a web designer is growing bigger and bigger. Future generations of designers will have to make a choice earlier on, as it is going to be almost impossible to specialize in both areas. But who knows? Maybe ActionScript can go back to its JavaScript roots, and we get a Flash that integrates seemlessly into a website without requiring a plugin or any kind of special treatment.

Share this post:

Solidays Festival Website

Every year, a massive music festival is organized in Paris in solidarity against AIDS. Solidays boasts some of the big names, such as Manu Chao, as well as many up and coming groups and artists. The build up to the big event has enjoyed a lot of success, thanks in particular to their inspirational website.

The Solidays annual music festival has an impressive website

With the rise of Content Management Systems, fewer web designers are choosing to work with Flash. While this topic is too big to be briefly brought up here, for the time-being, it is suffice to say that many developers chose to stick with XHTML and CSS as it is much easier to maintain, and much more flexible overall. Especially now with jQuery on the rise, there is a movement away from Rich Internet Applications, towards CMS-driven websites.

However, a website like Solidays.com reminds us all of the unprecedented beauty of Flash. We have forgotten that there is much more to Flash then actionscripted animation and vector graphics. The entire website feels like a short movie that has you glued to the screen (not to mention your ears’ full attention to the catchy tunes), and is truly a pleasant experience. Their use of colors is rejuvenating, and the animation techniques implemented are just glorious. The best part of it is that it’s not all looks and no brains, as you’d expect. In fact, the Solidays website is packed with information about every artist performing, plus general information the visitors would need.

On the one hand, the internet needs CMS-driven websites, giving power to the regular user to manage and maintain his or her website with minimal technical knowledge. But on the other hand, it is always refreshing to surf interactive and creative websites such as that of Solidays.

Share this post:

WordPress 2.8: Brilliant Baker

If you’re like me, then you’d know that anyone who doesn’t try his or her best to use WordPress with any website developed is just crazy. The guys over at WP have spoiled us with significant improvements and developments with every new release, and this time it was not different. WordPress version 2.8, known as Baker, brings many new features which are sure to come in handy.

The new WordPress Theme Editor

Upgrading is done with a few clicks and is smooth.

The one change I immediately noticed, and consequently realized how much I had been longing for it, is the Theme Editor page, which now shows colored code and line numbers. No matter how much planning you do, and how much work you finish on your local machine, as soon as your WordPress is on your remote server, there’s always a good bit of tweaking and fixing left. It has now become much easier to identify problems and fix them right away.

Just as you can browse and install plugins, you can now do the same with themes. Any real developer would not find this of much use at all, but for the average user who has decided to go independent and open-source, it’s a relief to know he or she can do everything directly on the spot, without having to worry about downloading, and then FTPing to the server.

The drag and drop has also been improved, making it more intuitive. Moreover, you now have control as far as the layout of the admin components is concerned, and can arrange things as you see fit. I’ve noticed however that the Wassup statistics plugin caused some minor problems, which were no longer there after after deactivating it. So I suspect Wassup to be releasing an update to make it compatible with Baker (either way, you should be using Piwik via the phpMyVisits).

Once again WordPress has raised our expectation, and once again it has outdone itself.

Share this post: