Cre8ive Commando » Tools

The Official Facebook iPad App is Here!

Adham Dannaway — Mon, 10 Oct 2011 23:18:42 +0000

Facebook has finally released their long awaited Official Facebook iPad App! I just installed it on my iPad 2 and it seems to work a treat. It’s quite slick and simple to use and includes some great touch screen features and functions.

The interface consists of 3 columns. The left hand column contains the main menu and is hidden initially but can be seen via a swipe of your finger. The central column contains your news feed and the right hand column allows you to quickly chat with your contacts. To load more news feed items you simply swipe your finger downwards and they will magically appear.

I found the interface quite intuitive and easy to use. It isn’t flashy in any way and I’m sure there will be more features coming soon. It’s definitely a step in the right direction and I’m looking forward to seeing the iPad App develop in the future.

Download the Official Facebook IPad App and have a play with it yourself. Let me know what you think in the comments below!

Validate HTML Emails Across Different Email Clients

Adham Dannaway — Tue, 13 Sep 2011 12:16:53 +0000

Creating HTML emails can be quite a daunting task if you’re not well versed in writing cross client email code. There are so many quirks to look out for and so many email clients to test them in. Wouldn’t it be great if there was a tool that you could use to validate your email code? There is and it’s called Fractal!

Fractal is a clever online tool that allows you to validate your email CSS across 24 of the most popular email clients simply by uploading your email code (HTML/CSS). You’ll receive a report that outlines the problems in your code and it will show you which email clients support your code. This is great as it allows email developers to design, build and test their emails more efficiently. Fractal will even suggest fixes to your code to ensure that it is cross client compatible, you can even contribute your own fixes if you’re feeling particularly inspired.

Fractal validates your HTML email across all the major email clients and automagically fixes known email quirks. It’s FREE to use so give it a try next time you’re working on an email.

A Simple Way to Draw Vector Graphics on the Web – Raphael JS!

Adham Dannaway — Sun, 21 Aug 2011 07:53:56 +0000

If you’re looking to draw vector graphics on your website then you’re in luck, Raphael is a JavaScript library that will simplify your work with vector graphics on the web. If you’re looking to create a chart, rotate or crop an image then this clever JavaScript library will help you do just that quickly and easily.

Raphael uses SVG W3C Recommendation and a VML base for creating vector images on websites. So you can basically create shapes on your web page and these shapes are all DOM objects that can be controlled by JavaScript. You can even animate your images once you have drawn them. It’s quite a powerful and relatively simple tool and it’s cross browser compliant too which means that you can use it in your website projects without having to worry about browser compatibility.

How to use it:

Download and include raphael.js into your HTML page, then use it as follows:

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

Convert an Image to CSS Automatically

Adham Dannaway — Thu, 11 Aug 2011 11:49:42 +0000

Have you ever wondered if you could automatically convert an image into HTML and CSS code? It could come in handy when trying to bypass the image filters in email clients. Well, Img to CSS is an interesting little online tool that does just this. It converts an image into HTML/CSS automatically.

It’s actually quite a clever little tool. It basically takes the image file and creates a HTML table of pixels with background colours that match the image file. Row by row it reads the pixels on the image and builds the HTML table, inserting the CSS styles inline.

The basic idea behind Img to CSS is to bypass image filters in email clients to ensure that images don’t get blocked. The HTML/CSS conversion does create quite a lot of code though so I’m not sure how useful it would be when dealing with commercial email templates. It’s definitely clever though and lots of fun to have a play with. Convert your image to CSS today!

Make your CSS more Powerful with Sass

Adham Dannaway — Thu, 28 Jul 2011 12:40:39 +0000

Writing CSS can be a timely task and there is often quite a lot of repetition and redundancy in style sheets, especially those in larger websites. If only there was a way to write CSS in a more powerful and structured way, there is and it’s called Sass.

Sass is basically a language that’s placed on top of CSS that’s used to define styles in a more structured and powerful way than normal CSS allows. It’s a simpler, more elegant language than CSS and it has quite a few interesting features that allow you to manage your style sheet more easily. The way it works is pretty simple, you write your Sass code then translate it automatically into flat CSS using a command line tool.

The main features Sass offers include nested rules (you can avoid repetition by nesting selectors within one another), variables (you can define variables to re-use), mixins (re-use whole chunks of CSS) and selector inheritance (one selector can inherit all the styles of another without any duplication).

It’s quite an interesting concept which could come in handy for larger website projects. Have a play and let me know what you think.

The Social Stock Market – Empire Avenue

Adham Dannaway — Sun, 17 Jul 2011 06:47:58 +0000

These days we’re all pretty active on social networks like Twitter and Facebook. What if our social activity actually had economic value? Empire Avenue is the Social Stock Market where you can actually grow your social capital online (with virtual money of course). It’s an interesting idea and more and more people seem to be getting involved. Here’s how it works.

The concept is quite simple. When you join you Empire Avenue you actually connect your social networking accounts and you’ll be given a virtual share price based on your online social activity. The more active you are, the higher your share price. Like the stock market you can actually invest virtual money to own shares of other people on Empire Avenue. The more good investments you make, the more virtual money you’ll make. Your shareholders will even be paid dividends based on your engagement and activity.

So what is the whole point of this? Well, there isn’t really much point to it but it is a good way to have some fun with social networking and make some cool new connections. Who knows, with some smart investing and some rapid tweeting you might even become a virtual millionaire.

Google Plus One Button is Here!

Adham Dannaway — Thu, 02 Jun 2011 13:49:30 +0000

Google has just released a new social feature called Google Plus One. It is basically a button similar to the Facebook “like” button which is shorthand for “You should check this out”. You click this +1 button to give a web page your recommendation to your friends and the world-wide web which will in turn help people find what they are looking for more quickly and easily.

Where is it found?

The plus one button can be found in two places on the web, the Google search listings and individual web pages. When you do a Google search you’ll see a little “+1″ button next to each search result. You can then click this button to recommend search listings that you found useful. If you’re a content provider you can actually add the Google Plus One button to your website to allow your viewers to “+1″ your content (You can actually see it at the bottom of this article).

Why is the +1 button helpful?

There’s so much information on the web today and one of the biggest challenges is sorting the good content from the bad. In a way we are all helping Google filter out the rubbish by providing real social feedback. Google will basically collect all of this “social” data generated by the plus one feature and merge it into Google search. I’m guessing that the more plus one’s a search listing receives, the higher up it will go in the Google search results. Once the social data is incorporated into the Google algorithm it should improve the quality of the Google search results in turn making it easier for us to find stuff and making the web a better place!

How do I get the plus one button?

In order to use the plus one button you’ll need a Google account. If you use Gmail then you already have a Google account. While you’re logged into your Google account you’ll be able to see the plus one button next to search results. Simply click on the button to recommend that search listing to the world. If you have your own website or blog you can add a “+1″ button to your site to allow your viewers to “+1″ your content.

What are your thoughts on the plus one button? Will it be as successful as Facebook’s “like” button?

Create Your Own Digg Clone

Adham Dannaway — Tue, 24 May 2011 14:22:10 +0000

There are quite a lot of Digg and Reddit style social voting websites appearing on the web these days. These Digg clones are being created in numerous different niches and some of them are getting pretty popular. If you’re keen to create one for yourself you might as well do it the easy way. Pligg is an open source Digg style social voting website CMS that allows you to create your own Digg clone quickly and easily.

Social voting news sites are great because they allow us to really get involved in determining the content we want to see, sorting the interesting articles from the boring ones. Digg and Reddit are the largest and most popular sites of this type but there are many other niche sites that are quickly gaining popularity. Design Bump is one example of a Digg clone aimed at the web design community. In the past it would take a lot of work and programming to create your own Digg clone, luckily now the hard work has been done for us.

To create your own Digg clone simply download the Pligg CMS and set it up on your server. You’ll need MySQL and PHP5 to run Pligg. Once you’ve set it up you can then customise it with your own template to give it a unique look and feel. You can even add widgets which you can buy from the Pligg shop to add some extra functionality to your website. You can see an example of a social news site created with Pligg above. That’s pretty much it, you’re Digg clone website is ready to go. Now you’ve just got to figure out how to get some users to your site, best of luck!

CSS Pivot – Add CSS Styles to Any Website

Adham Dannaway — Tue, 19 Apr 2011 23:39:20 +0000

There’s a great new tool called CSS Pivot which actually allows you to add custom CSS to any website and share your changes via a link. This creates a very quick and simple way for website owners to get suggestions from web designers on how to improve the style of their website. CSS Pivot is very simple to use, all you need to do is visit csspivot.com, enter the URL of the site you want to suggest styles for then add your custom CSS styles via a small pop-up window. You can preview your changes at any time by clicking the “Preview” button and once you’re happy with your new style you can save it and you’ll get a short link that you can share.

You can only add CSS styles to websites which does make this tool quite limited. Being able to dynamically edit the existing style sheet of a website (like in Firebug) could be a more powerful solution. It’s an interesting idea that could come in handy next time your friend asks you “How can I improve my website styles?”

Sell Your Products on Facebook for FREE!

Adham Dannaway — Wed, 06 Apr 2011 14:37:09 +0000

Traditionally, store owners have sold their products at physical shop fronts. We’re now in the internet era and many store owners are moving onto the world-wide web to sell their products via eBay or their own e-commerce websites. With the boom of social media and Facebook, some store owners are taking it a step further and selling products on Facebook. You can now launch your own FREE store on Facebook and I’ll show you how.

Payvment have created a great new Facebook application that allows you to launch your own FREE Store on Facebook with just a few simple clicks of your mouse.

By installing the Payvment application on your Facebook account you will be able to create your own e-commerce store and upload your products via a simple interface within Facebook. Once you have named your store and uploaded all of your product images and descriptions, you’re ready to attach your store to your Public Facebook page. For example, if you sold shoes on your Facebook shop you could create a public Facebook page called “Awesome Shoes” and attach your new Facebook shop to that page for all your friends (and the world) to see.

The Facebook store is fully functional and even allows people to buy products via PayPal while still inside Facebook. As an added bonus, your products will be added to the global Shopping Mall which houses all the products from each and every Facebook Store.

It’s a great idea and I thought that Facebook would have actually created an e-commerce facility themselves already. They could take a revenue share of each an every transaction much like PayPal does. It makes sense to use the social power of Facebook to sell products as people will share the products they like with their friends making it easier for sellers to spread the word about their products. It’s great to see that the Facebook Shop Application is currently free and it looks like the creators want to keep it that way.

To create your own FREE store on Facebook simply visit Payvment.com and use your PayPal email address to sign up. Happy sales!