Blue Green Brown Orange

Change Background

Archive for September, 2009

25

September
0

FCC Inaugurates OpenInternet.gov

Even thought the topic of net neutrality is a sensitive one indeed, there are crowds of US citizens that are unaware of the serious threat plaguing their freedom of expression and communication. If you happen to be one of those who are not fully aware of the subject, check out this short documentary on net neutrality. And for that matter, here’s an explanation on internet censorship worldwide.

In a surprising, and some might even say suspicious, move the Federal Communications Commission has gone live with a website, OpenInternet.gov that has a video raising awareness of the subject:

The goal seems to be to prevent the internet from losing its neutrality, and to avoid the loss of one of the most basic rights for any human being. It also acts as a platform for US citizens from all corners of the globe to share their thoughts and comments – ironically yet another example of how the Web facilitates direct communication across space and time.

The initial impression is in no doubt a positive one. The only concern would be the influence that lobbyists might have on government officials persuading them to allow large telecommunications corporations to gain full control, and strip away the American people from the only absolutely pure method of information exchange ever to have been invented by humankind. Regardless of how congress decides to handle the issue, raising awareness and providing a communication channel for the people is highly beneficial. The website is currently in its beta phase, but the FCC promises to expand on it gradually.

25

September
3

Using Seesmic for Twitter

The Twitter globe won’t stop expanding anytime soon. It only takes a quick observation of the fine print underneath each of the tweets to reach the conclusion that the applications for accessing and managing Twitter accounts are growing by the minute. The question is, which Twitter client is the one you should be using? Like anything else, it’s a matter of what features you require, and which application you’re most comfortable with.

Generally speaking, the Twitter clients are divided into four main categories:

  1. Desktop applications: Software that is installed on your local machine, allowing you to access and organize your tweets easily. Usually very customizable. Example include TweetDeck (which I have previously reviewed), Nambu, and Seesmic (which I take a closer look at below)
  2. Web applications: Those are websites that store all of your needs online, meaning you can access from any computer with an internet connection, and be able to manage your accounts entirely online. Check out my post on HootSuite
  3. Mobile applications: At first overlooked, but now very few could argue that the powerful community lifting Twitter is doing so thanks to the numerous applications offering them full access from their cell phones and hand-held devices. There’s Tweets60, Tweetie and Twibble, to name a few
  4. Extensions and Plugins: There are dozens of very powerful Firefox extensions, as well as libraries or WordPress plugins all aiming at integrating Twitter’s services with other websites and applications. They don’t usually offer the full features that you would find via their desktop counterparts, but get the job done nonetheless

One of the Twitter clients that has stood out and reached millions of Twitterers worldwide is Seesmic. Just like TweetDeck, Seesmic is a free AIR application that can run on any of the operating systems. In fact, it is very comparable to TweetDeck as they both offer many of the same features, it’s the little things that separate them.

Note: The video talks about version 0.4. The latest release, at the time of writing, is 0.6, but the points raised in the video still apply.

Seesmic can be used to manage multiple Facebook and Twitter accounts, but it is safe to assume that the huge majority of users are operating the French invention exclusively for a single Twitter account. Within the same window, you can create your columns based on the groups of people, as well as hash tags, that you would like to follow. Handling tweets is a breeze, and a URL shortner, tweet shrinker and image uploader are all natively integrated. It is an exceptional Twitter experience on a large display.

Seesmic Desktop Interface

Seesmic Desktop Interface

When comparing to TweetDeck, the following are the differences and thus, the advantages. But then again, it is a matter of personal preference:

  • Resizeable Columns: In TweetDeck you have the option of wide or narrow columns. In Seesmic, however, they are dynamically-sized to take advantage of the full screen, and each column can be dragged to the preferred width
  • Notifications’ Options: You can control how long the notification lasts, and whether or not it is accompanied with sound. Personally, a one-second notification is more than enough, and the fine line between a short message to let you know of something, and an obnoxious whiner that drags forever is only two seconds wide
  • Fixed Single/Multiple Columns: You can have the window be the exact width of the “Home” column showing all of the tweets. Alternatively, you can choose to keep the home fixed, and have the remaining scroll horizontally behind it

Unfortunately, there are a couple of points that might push people away from the Twitter client. The first is the difficulty in which users can add Twitterers to favorite groups. When you create a group, you have to go to one of the desired person’s tweets, click on the options icon, and add him or her to the list.

The second issue, which is also found in TweetDeck, or any AIR application for that matter, is the lack of support for Arabic and non-traditional languages. This is obviously a huge drawback, and it seems that, on a Mac, a web application is the only way around the lack of Arabic support. Perhaps Adobe will upgrade their runtime to allow for Arabic and Asian scripts, but in the meantime, if the majority of the people you’re following tweet in Arabic, you are better off going “web” and using an online application, such as HootSuite.

Otherwise, a neat AIR application that it light-weight, easy to use, and gets the job done. And comfortably so.

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”.

24

September
0

Opera 10: The All-In-One Browser

Opera seems to have become the forgotten browser. in 1996, when the world was starting to learn about the World Wide Web, version 2.0 of Opera was publicly released. Two years later, they had already initiated the portable branch, bringing the browser to a wealth of portable devices (anything that supported Java). I had previously discussed using the mobile version for the ultimate portable web experience. It comes as no surprise that by the turn of the century, the Norwegian software company had made its browser available on every major operating system, and across all devices.

The new Opera 10

The new Opera 10

Unless you’re granted unconditional loyalty through anti-trust strategies (such as the case with the hard workers at Microsoft), with experience comes significant improvements, and the 10th release of Opera brings together a flock of neat features to the table. The most notable of which:

  • Opera Turbo: a compression technique that allows websites to be rendered rapidly. Particularly useful for users with a slow internet connection, or hand-held devices with a limited WiFi card or are on a slow network
  • Interface: The tabs have a unique visual aspect to them, and the overall design reminds you that we are no longer in the 20th century
  • Customizable toolbar: Allowing you to resize the search bar, and choose your preferred search engine
  • Enhanced Speed Dial: Those who rely on the Speed Dial extension on Firefox might not take notice of the development with the configuration related to this feature, but it is nevertheless a positive change allowing users to customize how their favorites’ thumbnails appear
  • Fully standards’ compliant: Unlike Internet Explorer 8, the newest release of the Opera browser is a pleasant experience to designers and developers, as well as the users themselves

You can find the complete list of features at the Opera website.

More importantly, Opera gives you the ability to have your email client, widgets’ sidebar, notes space, torrent and download manager, all in one place. Those who have an email account which they would rather use an email client for might appreciate Opera’s convenience in bringing all of the services in a single pile.

The downside might be the initial period required for someone without previous experience with the Norwegian browser to become comfortable with it, but Firefox wasn’t a swift shift either, and it was a lot closer to IE than Opera is to any of them.

If you are not planning on taking advantage of the diverse integration within Opera, then you are better off with your choice of Firefox extensions and stick with the open-source browser. But whatever you do, do not use Internet Explorer.

15

September
0

What’s New in iTunes 9

You can watch the Apple website’s videos showcasing all of the new features that are enclosed in the latest release of Apple’s media player. But who needs boring, repetitive and commercial  demonstrations when you can get this:

Credit to the presenter for revealing what is interesting to us, the regular users, in the most basic, straight-forward approach. Pay particular attention to the Home Sharing feature, which is arguably the most important addition to the new iTunes.

15

September
1

Humble Inspiration

Sometimes the poorest neighborhoods can be the source of richest of inspirations. Many web designers lose touch with reality and design strictly “for the web”. The trick is to be able to look around and see the beauty around us, and then implement it one way or another when designing.

Photograph by Hossam el Hamalawy

Photograph by Hossam el Hamalawy

You can view more inspiration from Cairo and Giza at Hamalawy’s Flickr page. Meanwhile, let’s see more designers integrate different aspects of their own culture in their work.

15

September
0

1KB CSS Grid: Your Basic Framework

It has become evident that the best way to build a new website is to do it from scratch, and using proven frameworks. That saves you a lot of time and effort, and allows you to focus on the actual design of the website instead of having to worry about whether or not your layout is developed properly. I have previously discussed the 960 Grid System as an ideal CSS framework to build your website on, and while I still hold my stance towards it, I believe that in some cases, a solution such as the 1KB CSS Grid could be more appropriate.

1KB CSS Grid prides itself in its simplicity. You want to develop a relatively basic, straight-forward website, and do not feel it necessary to spend a significant amount of time setting up and building the foundations. With the 960 GS (or for that matter, the Bluprint CSS, which I have also talked about), you can construct a reliable foundation to your website. That includes a CSS reset to remove any default values that would cause inconsistencies between the different browsers, and another CSS file with all of the possible values of the columns, giving you complete freedom of using different-sized columns in any order you want. More importantly, with the 960 GS, you can download the Photoshop template, for example, and design your website with the exact coordinations of the columns in mind.

However, in many cases, you just want to build a simple website, without having to go through so many decision-making processes, and without investing an entire afternoon for features that you couldn’t care less about. For those of you working on quick and easy websites, 1KB CSS grid gives you the power to create the necessary CSS file in less than a minute, and start developing on top of that. No CSS reset, no limitless possibilities, just a light-weight file with the various column sizes that you are going to use.

The 1KB CSS Grid website

The 1KB CSS Grid website

You won’t even need to enter the values. Just drag the indicators to your desired number, and you will see what the total width will be. The CSS file with the standard 960px values looks like this:

/* ================ */
/* = The 1Kb Grid = */
/* 12 columns, 60 pixels each, with 20 pixel gutter */
/* ================ */

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }

.column {
margin: 0 10px;
overflow: hidden;
float: left;
display: inline;
}
.row {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.row .row {
margin: 0 -10px;
width: auto;
display: inline-block;
}

It is recommended that you use a CSS reset, but if you’re doing something simplistic, the above code will work fine on its own. Creator Tyler Tate took into consideration the main values everyone’s after. At the end of the day, in many cases, particularly in this one, less is more. So if you are working on a relatively large project, start from scratch with the 960 GS, for everything else, there’s the 1KB CSS Grid.

8

September
1

Surf the Web on Your Mobile

One of the biggest advantages of the latest generation of cell phones and hand-held devices is the ability to browse any websites, check your e-mail, follow your RSS feeds, etc. While there are mobile devices, such as the iPhone, that are pay particular attention to the user’s experience with the web, the huge majority leave you the option without encouraging you to fully exploit it. For that reason, I’ve put together a quick tutorial on how to take full advantage of the web-surfing capability on your mobile running, running Windows Mobile or Symbian. I am using the Nokia E71 (which I’ve reviewed many months after, as well as compared to lower-end counterparts), but the process is the same for most phones of the same category.

Connectivity

Although 3G Internet access has become significantly cheaper, it is still more economical, as well as rapid, to access the web via wifi whenever available. Therefore, if at a wifi hotspot, it is imperative that you take advantage of the connection and add it to your list of regulars. Aside from free wireless connections, the average telecommunications provider automatically detects the type of phone, and sends a configuration file in shape of an SMS to get your mobile phone on the net in no time. As a result, whenever you open the browser that comes built in, you are prompted to select the access point of choice. Having said that, it is a bit of an inconvenience to make the choice every time, and the process because repetitive and rather tedious.

Birdstep: The makers of SmartConnect

Birdstep: Makers of SmartConnect

The solution is a free software available for most called SmartConnect from Birdstep. It carries out a simple task that could save you infinite time and energy. It allows you to create connection groups where you place your preferred access points, and then allows you to move them up and down the priority list. Logically, you would place all of the wifi networks of the places where you are frequently located, followed by the 3G connection from your provider. You can name the group any unique name, such as MyConnections.

After that, any program on your phone that accesses the internet can be configured to make the smart choice. Simply access the settings area of each, and make the default network of connection the group that you created (in this case, MyConnections – yes it appears as a network connection, even though it is merely a group of favorite connections, and that’s the beauty of SmartConnect).

As a result, whenever you access the Web, you will always be automatically on the free wifi if available, or your 3G network if not, without having to answer any questions or calculate the possibilities.

Browsing the web requires a good browser

Now that you’re on the right connection, you will notice that it is not very convenient to use your phone regularly for surfing, even if it’s via a free wifi connection. The reason being that with a small screen and limited functionality, you immediately realize that nothing’s worth so much sacrifice, and will consequently opt for a full browser on your computer. While the difference is too big to consider mobile browsing in any way a contender to the real deal, there are still measures that can be taken to ensure the most pleasant experience on the web.

The web browser that comes built in with the Nokia E71 and similar Symbian-based phones is not even good to be part of the past. Mainly due to the following:

  • Below-par performance: takes ages to open simple text websites
  • Not intuitive: no matter how much experience you have using it, you never get used to handling it
  • Zoom: You can only zoom out at 50%, and you can only do so when the page is done loading. If you’re opening a large-sized website, it could take a solid few minutes before you are allowed to zoom out, when you still can’t see anything because the pages simply don’t fit
  • Limited functionality: limited or no control over font size, image settings, RSS feeds, etc.
Opera Software logo

Opera Software logo

The Internet Explorer that comes with windows does not have much to brag about either (and let’s not get started on the problems of the desktop version). Needless to say, this needs to be taken care of. This is where Opera comes in. An experienced, open-source browser that has been specializing in mobile devices from the times of dial-up connections. The main advantages of the Opera browser on your mobile are the following:

  • Performance: extremely fast and light-weight
  • Usability: very easy to use, you become best friends at first sight
  • View port: you initially get the entire website and can automatically zoom in to any section of the page. IT makes it very easy to spot info and get closer to fully view it
  • Advanced options: you can control if you want to photos to be rendered at low quality (saves immense amounts of time, especially since you never notice the difference from a small display like that of your cell phone), default text size, and more

Above all, it’s free and open-source! To install Opera on your phone, simple open the default browser and go to http://www.opera.com/ and you will be automatically directed to the site optimized for mobile phones. Go to the download page and find your version (Windows or Symbian). If your phone is from a select few (the Nokia E71 included), then you can click on the corresponding link that allows you to download and install Opera Mini, which works like magic.

There you have it, the adequate connection automatically chosen and connected to on your behalf, combining with the best browser for mobile phones available, giving you the optimum solution for fully exploiting the web-surfing capability with the majority of cell phones offered through the market today.

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.

7

September
2

It’s Finally Here: Open-Source Hardware

The optimistic crowd that form the borderless and limitless open-source community world-wide have finally been rewarded a long sought-after dream: taking the beautiful concept of open-source beyond software, and into the hardware division.

A group of scientists from Standford University have succeeded in putting together a programmable digital camera that allows anyone to write the software to achieve any feature your imagination can come up with. This results in a digital camera made of extremely cheap components, offering features that no other proprietary manufacturer does. You’ll be paying for the dirt-cheap components, and just as they’ve always taught us, the best things in life are free (open-source software included).

This is a brief look at the Frankencamera by the scientists themselves:

It currently not the sexiest of cameras, but how charismatic was the first GUI for Linux? What matters is not the current product, but the potential results. And from what we can tell from this revolutionary innovation, the sky is the limit, and the users from every corner of the globe will inevitably be the ones who most benefit.