Blue Green Brown Orange

Change Background

Posts Tagged ‘website’

21

February
0

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

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.

27

October
5

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

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

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

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

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

15

October
2

LogMeIn: Remotely Control Your PCs

When working with different computers, it’s hard to guarantee you have everything you need with you at all times. You could follow this guide on centralizing all of your documents so that you can access them remotely at any time. However, in many cases, you are still left stranded attempting to get a hold of files on your home computer. The benefits of reaching your computer when far away are numerous, therefore, it is important to setup that channel, even if you don’t see the need for that at this point in time – you’ll be thankful in the future.

LogMeIn is the easiest solution

LogMeIn is the easiest solution

Accessing your computer remotely is not as complicated as many would think. There are programs, both free and commercial, that could that for you, each with their pros and cons. LogMeIn is a little different. It’s a website that allows you to create a free account and add computer associated with your account. They could be running Windows, Mac or Linux, which makes it an ideal solution for those juggling OSs across different computers.

LogMeIn tool on Mac

LogMeIn tool on Mac

The process is straight forward: sign up for an account, add the computer you are using, download and install a plugin, and repeat the process with every computer that you will be adding to the list. On Mac, for example, the LogMeIn tool automatically runs on startup, meaning you only need to make sure that your Mac is turned on, so that it is reachable.

Computers' list

Computers' list

To access one of your computer, go to the website, login, and you will find a list of the computers associated with your account, with links to “remote control” those that are switched on. Clicking on that link opens a screen that streams the desktop you are controlling. The performance and accuracy will always depend on both, your current internet connection, and that of the computer you are controlling. Many ADSL subscribers will regret the low uploading capacity in their connections, but there’s always the option to reduce the number of colors transported, significantly enhancing performance.

The best part of it all is that it’s free. If you are to regularly rely on LogMeIn, you might find that the free version is a bit limiting, for that the makers offer you a wealth of options. The most common of which is LogMeIn Pro, that allows you stream music from the remote computer, drag and drop files between the two, and more. For now, the free version will do just fine.

There's always LogMeIn Pro

There's always LogMeIn Pro

Even if you don’t deem it necessary to make your computers reachable and connected at all times, you never know what’s coming. You might find yourself across the Atlantic craving for files on your home computer, in which case, all you need is LogMeIn, and of course, the beautiful internet.

6

October
2

Understanding the Twitter Cycle

The divide between those in the twitter planet and the outside world is constantly growing. Some twitterers could go as far as arguing that unless you’ve been active for extended periods of time, you are almost clueless as to the capabilities of the Web 2.0 revolution, and the power that it gives you. After the traditional Twitter introduction to those who remain oblivious, we reach the more advanced topic to the simple web application: How to take full advantage of Twitter.

Twitter is extremely powerful

Twitter is extremely powerful

There exists a minority who use Twitter to send constant updates to family and friends, but let’s not kid ourselves, their numbers don’t exactly compare to those of big armies. The majority of the Twitterers are trying to achieve the highest number of followers, and thus be able to send out links that could drive traffic to certain destinations. Whether you are a designer, journalist, merchant or even a celebrity, Twitter opens unprecedented channels of communication, and facilitates interaction with an ironic 140-character limit per tweet. As the internet has taught us over the years, you can never expect people to give you their attention if you are not offering them anything worthwhile. And that applies quite accurately to Twitter.

Many believe that they can open a Twitter account, within a few days have hundreds of followers, then make a tweet linking to their blog, and they’re set for life. Unfortunately, the reality is far from that. Before anyone can trust you, you have to prove yourself to them. This basically means having quality, noticeable tweets on a regular basis. With time people will label you as a credible source, and therefore might opt to follow your links. The beauty of this phenomenon lies in the fact that you have to constantly give to the community, before anyone’s ready to return the favor. That in turn prevents selfish contributors from gaining more than what they deserve, and rightly rewards those exerting efforts to helping the community – perfect.

Steps to becoming a successful twitterer

  1. Initial phase: Sign up for the account, and plan out who are the type of people you are going to be following, and more importantly, who you’d want to follow you. For example, as an IT professional, you’d want to build relations with big IT geeks from around the globe, and hopefully find means for collaboration or connections. As a musician, you’d want to connect to other musicians, but you also want regular users to visit your MySpace page frequently, join your Facebook fan page, and eventually buy your music and tell everyone about it.
  2. Chose who to follow: After you’ve come up with a plan, follow those whose tweets will interest you (regardless of the field – doesn’t matter at this point), as well as those you hope would follow you back. It is important to only follow a small number, because many people would neglect to follow an unproven twitterer, and therefore it is better to build a strong Twitter portfolio so that when you follow someone, they give you the chance to shine by returning the favor. I recommend starting with about 50 users (friends and family included)
  3. Start tweeting: This is the tricky part. It is absolutely crucial that you constantly tweet, however, if you go overboard, you’ll lose followers. Therefore, you have to keep providing interesting content so that people take note of you. If your tweets are meaningless (which is relative, but you should be aware of what the crowd you’re after seeks), then it turns into a headache. If you’re making 20 to 30 tweets a day, all with interesting thoughts, comments, ReTweets and links, then you will have become a provider and not a burden. However, you should avoid sending out links that are for your own sake, otherwise it could be seen as undeserved publicity, and that could scare away some followers. You should pay close attention to the language that you use, and the subjects that you discuss. If you are strictly targeting marketing professionals, you should keep your political opinions to a minimum. If you are a journalist covering politics and socio-economic issues, few will want to hear about your breakfast and showers, and some might write you off as unprofessional if you’re using foul language and making immature tweets.
  4. Add followers: There are two schools of thought
    1. Mass followers: those are the people that follow up to 5,000 people so that the huge majority of them follow in return. It is an easy way to get people to follow you, but I’d personally deem it unclassy. You shouldn’t follow people whose tweets are of no interest to you. And when you gain thousands, the huge majority couldn’t care less about what you have to say, because you’re not a valuable follower. Therefore, it becomes a mutual acquaintance, and can never become intimate.
    2. Picky followers: those who carefully choose who they’re following, and usually keep the number to below 300. That helps build your Twitter portfolio as it becomes a bit of a complement to those who you’ve chosen to follow, and builds much more intimate communication levels with fellow twitterers. You are unlikely to reach high numbers in a short period of time, but those who follow you are much more loyal to your tweets, and thus you are far more likely to drive useful traffic to your website/blog/service, whatever its nature. In both bases, it’s generally good practice to follow a bunch, and then weeks later, use a service such as Buzzom to see who are not following you, and mass unfollow them.
  5. Incorporate PR: Only now would be a convenient time to attempt to attract visitors. By that point, you will have been active for a significant period of time (at least 3-6 months), you will have built connections with peers, and you will be regarded as a credible source. It is important to note that you will be able to grab people’s attention to the subject area your working for, but whether or not your actual content is successful is a completely different story that is beyond this guide.
  6. Maintain momentum: By this point, you’ll be an expert in utilizing Twitter, and you’ll see the light that very few have been lucky enough to experience. However, it is important to avoid becoming complacent. We are living in a demanding Web 2.0 environment, and that requires constant work and dedication. Just like the people have given you a credible voice, they have the power to take it away from you. Just like everything the internet has produced, Twitter is essentially power to the people.

Therefore, converting Twitter to a successful PR tool requires six months of constant activity and depends on what you bring to the table. However, the beauty of the open-source community is in the fact that whatever you do, you can always contribute, and there will always be a crowd eager to learn from you, and ready to exchange knowledge with you. Twitter is but a plateau where the people take the stage, and act out the play. An example of a true product of the beautiful Internet.

24

September
0

HotGloo: Online Wireframe Application

When starting on a relatively large web design project, it is vital that you are organized and efficient from day one. I had previously spoken about the 960 GS which is an ideal solution for building your website on a reliable framework, particularly because they provide you with templates for design applications (such as Photoshop and Fireworks). The earlier you start planning/organizing/building on frameworks, the better. That’s why for large, extensive websites, a wireframe is crucial.

HotGloo Logo

HotGloo Logo

HotGloo is a free online application that allows you to create multiple wireframes before designing any websites. It is entirely online and allows you to pick up where you’ve left off regardless of computer/location. Wireframes take pre-designing sketching to the next level, and are incredibly useful for various reasons:

  • Layout/Structure: It is impossible to design (properly) if certain aspects of the content are not accounted for. With wireframes, you can visualize the most logical way of laying out the content of a given website
  • Client communication: You can talk all you want, but most clients won’t be on the same page. Wireframes clearly illustrate the basics of the website, consequently prompting any client rejections at an earlier stage, which avoids delays and saves on pain killers
  • Save design time: in many cases, HTML elements play a significant role in the look and feel of a website design, sometimes even more so than graphical elements. When you layout your wireframe to see where everything goes, you’ll design more efficiently as you’ll be familiar from the start

The trick is to be able to “sketch” your wireframe to its full potential via an application on the computer screen, and that’s what the Germans at HotGloo have attempted. Although still in beta (and is yet to incorporate basic funtionality such as a direct login function), HotGloo is very promising, as it already saves overwhelming amounts of time and energy – while looking very professional.

HotGloo work area

HotGloo work area

The interface is very intuitive, so unless you’re on a smaller-then-average display, accessing the tools and laying out the different elements is a straight-forward process. They’ve also taken into consideration all of the different HTML components that you would need for any website, and if you can’t find it, you can always create your own (although you’d be fooling yourself if you thought it was something you’re willing to do on a regular basis).

A project can be a collection of pages, which means you can create the wireframe for an entire website. The pages are listed on the right sidebar so you can browse one after the other to view the flow of the site map. You can also get other users to collaborate with you on the project, which in turns makes HotGloo an ideal platform of communication between designers and developers, and avoids misunderstandings.

One of the strongest features is the simplicity of the alignment of the different objects on the stage. It is almost like a stripped-down version of the Smart Guides feature in Photoshop, giving what you need, without the extra lines. Moreover, you can use the buttons across the top to align several elements with a single click.

HotGloo properties window

HotGloo properties window

Any object, when clicked on, will prompt the properties window, which gives you full control over the appearance of the given item. In doing that, HotGloo has removed unused functionality from the sidebar that would’ve cluttered the work area and damaged the usability aspect. With the attributes made available, the end result could be considered a basic design draft, not just a wireframe.

Save your projects as part of your online account, and when you’re done with any page, export it to a .png ready to be reviewed by the client, or simply kept for your records.

If working on a small, simple project, investing time on a wireframe could be a waste of time. However, any medium to large website requires planning and organization from the very beginning, and that is exactly what HotGloo offers you. When the website is out of beta, and the comments in the built-in feedback system are applied, HotGloo will become an essential tool for any designer who wants to “do this right”.

7

September
1

Tori’s Eye: Yet Another View of Twitter

Yesterday I wrote about HootSuite 2.0 as yet another solution for managing and utilizing your Twitter account. Lesson 1 from any book on success with Web 2.0 says that when you set the stage, and let the open-source community and the user-base do the acting, you are inevitably bound for results that out-do your most optimistic of imagination. A working example of this is literally visible via Tori’s Eye, a “website” that displays the latest tweets in a visually pleasing and creative manner.

Catch the flying tweets with Tori's Eye

Catch the flying tweets with Tori's Eye

It might not be the most efficient method in which you can follow the tweets of a chosen hash tag or keyword, but it is not meant to be one. It is easier to look at it as a work of art, a visual presentation that adds a new perspective to something everything has been looking at very mathematically. I personally think it is entertaining to follow a subject of interest, but not of much importance. It could also be good exercise for reading random tweets without any bias towards images or tweet locations.

Very little is known of what the creators of Twitter wanted from it exactly (now it is clear that it is something special). Even if we were to use hindsight and say they wanted it to be the standard channel for millions of people to rapidly communicate worldwide, it would take too much bending-over backwards to believe that they knew such creative outputs would come out of it. But then again, that’s the beauty of the user-based content, and the collaboration of millions of people across space and time.

6

September
2

Tweeting with HootSuite 2.0

Twitter is becoming more and more similar to an open-source application, especially when you look at the integration of its services with millions of products from the open-source community. I have previously discussed TweetDeck, which allows you to efficiently utilize the Twitter service (and for that matter, you can check out the post introducing Twitter to the people in the outside world). TweetDeck is a desktop application built on Adobe’s AIR, HootSuite is a website, or online application. Either way, you need a constant connection to the Web if you are to tweet or follow other people do it. Therefore, they could both be placed in the same category.

HootSuite Logo

HootSuite Logo

HootSuite 2.0 is a free “professional Twitter client” that is ideal for a group of professionals maintaining a joint Twitter account, and taking their tweeting seriously. It gives you a personalized view so that you can group the people you are following the way you want. In that aspect, it is similar to TweetDeck. However, what distinguishes it, or rather pushes it towards a slightly different crowd, is the fact that it is set-up to allow several users to access it simultaneously and to accurately measure the effectiveness of each one of the tweets.

The following is a summary of the main features:

  1. Create tabs and columns to organize the way you follow other twitterers
  2. Manage multiple Twitter accounts via the same interface
  3. Several user accounts to the same Twitter account, with each person customizing his or her views freely
  4. Tweet directly, with a built-in URL shortener, and the ability to schedule tweets
  5. Detailed statistics for each of your Twitter accounts

The most significant feature has got to be the ability to follow the stats associated with your account:

The interface is very intuitive, and while you might not be able to skim through the tweets as swiftly as you are used to, it’s only a matter of time before you become a native user. It would’ve been nice to be able to automatically refresh the tweets more frequently than every two minutes (the minimum time offered), especially for those with over a thousand followers, but we won’t lose much sleep over it.

In comparison to TweetDeck, it seems to be more powerful and flexible, simply due to the tab system offered by HootSuite. You can also open it in a Firefox tab along with other websites, or in it’s own browser, while with its AIR counterpart, you are limited to a stand-alone desktop application. If you and at least one other person are managing a Twitter account, HootSuite would be the obvious choice. However, if you’re tweeting on your own, and not that frequently, then it would be another case of advanced, unused features -- you’re better off relying entirely on the original website.

31

August
1

Bing vs Google

Last week, I posted a video that took a humorous approach to the search engine battle between the California giants, and then new kid on the block, Bing. Interestingly, I came across this website that does a very simple move to give you the best of both worlds, at the same time. Just like how some people would argue that a portion of contemporary art is no more than a very basic idea that the artist came up with first, Bing vs Google is something for which its creator deserves credit simply because he came up with the idea before anyone else, and brought it to us, the users, to take advantage of.

One field, two search engines

One field, two search engines

Instead of opening two separate tabs to test out the two main search engines in competition right now, you can now view the results from both worlds, by the same click, and in the same window:

Bing vs Google, at the same time

Bing vs Google, at the same time

Of course, on a small screen, it wouldn’t be too useful, but who has anything smaller than a 15.4″ with at least 1280 pixels in width? Viewing them side-by-side is as fair as you can get. And even if you insist on using one of them and not the other, it might be good practice to start off with Bing vs Google to make an accurate judgment first. And let’s not forget that there’s always Ask, Yahoo!, and a few others.

24

August
1

Support Details: Your Basic Info

It cannot be reiterated enough: The beauty of the internet lies in the unlimited possibilities of the direct communication between millions of people across space and time. The freedom of the Web gives the people the power deserved. That is why there are always new products and services available for the user to take advantage of. I have previously reviewed Web 2.0 websites that make your life easier, such as Print Friendly or StopForwarding.Us, and today I came across a simple service that might save the average user a lot of hassle.

Support Details is a web page that immediately detects some basic information about your computer and displays it in a neat layout so that you can pass it on to the technical support specialist when you talk to him. Regardless of whether you consider yourself tech-savy or not, if you face problems with your PC at work, for example, and have to call the IT guys and explain the situation on the phone, this website provides you with some of the information they would need.

Support Details: Your Info

Support Details: Your Info

As you can see from the image, You can find out the exact OS that you are using, screen resolution, browser (with version), and more. You can even send these details in an email directly from the page.

This is not meant to be a system analyzer, but merely the type of information that tends to be sought after by those trying to fix your computer. It would be nice to see a lot more info, such as the processor, hard disk and the likes, but that would require a software. This is but an example of a free Web 2.0 service that has a specific task and does it well.

17

August
0

Documenting Arabic With Mo3jam

I’ve repeatedly expressed my frustration by Arab websites on the internet. Whether it is the poor design, the useless content, the confusing navigational systems, or the obnoxious ads that bombard the screen, the possibilities for disappointment are endless. However, there seems to be a bit of light at the end of the tunnel, as some exceptional Arab web designers and developers are making significant contributions to the Web. One of the latest and most impressive products is Mo3jam.

Mo3jam (pronounced moa-gem) is Arabic for dictionary, and that’s basically what it is. Only the website is community-run allowing users to enter Arabic words and expressions, with their explanations, from the different dialects across the Arab world. It was created by a Saudi from Jeddah by the name of Abdullah Arif who runs Blachan Lab. The aim is to properly document the differences that place the growing gap between the Arabic spoken by the different countries, and what a better way to do it than to allow the people to share the knowledge themselves?

The Mo3jam Interface

The Mo3jam Interface

Firstly, the idea of documenting the Arabic dialects is pure genius. While there are many that live in constant denial believing that the spoken Arabic across the 22 Arab countries varies slightly from one nation to the next, the majority of Arab speakers realize that since the spoken language broke off from the written classical version many years ago, each group of people (even within countries) have inevitably evolved in a separate direction. Even though communication remains relatively easy between Arabs of different backgrounds, there hasn’t been official documentation of the dialects. Ideas are a dime a dozen, it’s walking the walk that counts. That is precisely what Mo3jam has done. Taking advantage of the power of the Web to document languages is pure class.

Dialects currently available

Dialects currently available

Secondly, the internet has taught us that user-driven content is much more successful than what is produced by the different corporations. That is why websites like YouTube and Wikipedia have quickly become amongst the most visited. Set the stage, and let the users act. Mo3jam has provided the necessary tools to easily add content for everyone to access, leading to the inevitably exponential growth of the user base, and hence the quantity and quality of the content provided.

More importantly, the web application is designed with a creative, professional touch. It looks very sleek and modern. It is also light-weight and extremely easy to use. Without an impressive front-end, success would’ve been limited. Fortunately, that task has long been checked off the ToDo list.

The following are the features in a nut shell:

  • Explanations can be in Arabic, English or French: if you were to look at the history of colonization, you’d understand why some might prefer to use a foreign language to explain an expression
  • Add a new definition to an existing term: The vote system allows for the best one to rise to the top (potentially triggering many arguments, but that’s where all the fun comes from!)
  • You can also add a dialect: The author says it does not need to be a strict umbrella, with some branches coming from a certain dialect, not directly from the source

In conclusion, while it is still in the initial phase and needs to be refined, Mo3jam looks excitingly promising. It might just be the one tool that could help place the Arab world on the Web 2.0 map on the one end, and help the Arab themselves document the complicated dialects for everyone to benefit from, on the other.