Cow’s Blog

June 24th, 2008

Please accept my apologies for the third successive post about Facebook!

I wanted to show off a proof of concept I’ve developed of using Facebook as an identity system for your blog. The proof of concept doesn’t run on a real blog system - that is simply to keep it simple and because I didn’t want to spend a lot of time with the ins and outs of Wordpress. I can see no reason why it couldn’t be adapted to integrate with Wordpress/Drupal or whatever.

How does it work?

• You’re on the blog page and you wish to make a comment.
• You click on a link which takes you to the Facebook webpage.
• If you haven’t before used your Facebook identity on this application before, you’ll be asked to give permission for it to access your personal information.
• You are returned to the blog page, now logged in with your facebook identity.

Total development time was about 1 hour, took about 50 lines of code. If anybody is interested, I can open source the PHP source code.

As far as I can see, it follows the platform terms of use. The only information which my proof of concept has access to is your name and the URL of your Facebook avatar. This information is not stored except with your expressed consent (e.g. you post a comment).

Pop over to the proof of concept and feel free to login or to post a comment to try it out.

• Facebook , Internet , Web 2.0 , Web Development
• Comments(2)

June 24th, 2008

photo: DownTown Pictures

On Sunday I introduced my experiment with building a community through Facebook for a school alumni group. I’m pleased to be able to say that the Facebook application was complete yesterday and I can now discuss some of the results.

First of all, a little about the target audience. We are looking at sixth form college students in Britain (between 18-19 years old). In grand total, there are 200 students in total and that’s the total number of people we are aiming at. I would estimate that about 25% of the target audience doesn’t use the internet on a regular basis so the target figure of course is about 150.

We’ve had two attempts at creating a community around the school alumni group.

Attempt 1: Drupal

The first attempt involved using the open source Drupal CMS. The community featured forums, latest news and so on. The community was advertised primarily through real world posters and presentations. There was also a small campaign online to promote it via e-mail.

After one year, we managed about 50 registrations (33% of the target) of which about 5 are active. This means the community is actively used by about 4% of the target audience. In total, about 30 messages were received on the forums in the one year the community has been active.

I believe the main barrier to the success of this online community is the difficulty in creating an account. You need to set up yet another username, password and validate your e-mail address. That means people have to go to a lot of effort to join the community and the lack of active members in the community also limits the usefulness (more on this later).

Attempt 2: Facebook

This is the new alumni community which I launched yesterday lunchtime. The community has various features which are similar to the first attempt. The community again was promoted through real world posters and presentations, as well as online via email and messaging. This time, viral marketing also took place through various Facebook channels.

After just 24 hours, the community reached 75 users. That means we’re already half way towards the target of 150. Are people engaging with the application? We received 30 messages in just one day. According to Facebook statistics we received 1,100 page views in just the first 12 hours. For me, that’s astonishing growth - through a Facebook application we achieved the same results in under a day as it took a year to achieve on an external Drupal-based website.

From my perspective, the amount of work that it took to promote the Facebook application was much less than that of the external community.

Conclusions

photo: Nrbelex

A sceptic will point out that this is an unfair test because the two communities were obviously different in their designs and feature sets. I will say that when it came to launching the second community, I was much more experienced at creating and designing online communities so I was able to create a much more engaging community. But it is the fact that we opted for a Facebook application which allowed us to develop these engaging features. Many features have a critical mass of users below which it would not be useful.

The growth of community is proportional to its size. The constant of growth (k) depends on various factors:

• The proportion of users who are active in the community
• The proportion of users who engage in the community
• The proportion of users who will let their friends know about the community
• The conversion rate (invites to registrations)

I would say that Facebook applications have a much higher growth constant than other communities, for several reasons:

• Easy to access; no additional URL, username, password to remember
• There are additional communication channels through Facebook
• It is much easier to build engaging community features through Facebook
• Facebook has an invite system for users to share their favourite apps
• Users already have Facebook accounts meaning the “barriers to registering” are almost zero: all they have to do is to tick a box granting an application access to their personal data.

Of course, it depends on the demographic of your userbase. This experiment was run with British teenagers, many of which have Facebook. Across other demographics, I believe implementing OpenSocial or OpenID could lead to similar benefits for online communities.

I’m very pleased with the results of this experiment and I would say it has confirmed some of the suspicions I had when I wrote my previous post. Of course, it’s something you can rip apart but I believe it’s well worth a think when you come to create your next online community!

• Facebook , Forum , Web 2.0 , Web Development
• Comments(0)

June 5th, 2008

I remember a few years ago receiving a copy of Weaving the Web by Tim Berners-Lee as a gift. Tim Berners-Lee is of course the inventor of the World Wide Web and is a real hero of mine. This is a fascinating book about the events which lead up to the invention of the web.

Tim Berners-Lee graduated in physics and created a programme called Enquire at CERN. The programme stored relationships between scientists at CERN, their projects and their contact details. In fact, it sounds very much like what wikis do today.

He discusses the launch of the first page on the web, the different protocols and the concept of URLs, the spread in popularity across the globe, early web browsers and the launch of the W3C web standards consortium.

In the last half of the book, he discusses what he saw as the future of the web: the social and eventually the semantic web. Although the book was written in 2000 at the height of the dotcom boom, it is interesting that this vision is only becoming realised today with the rapid explosion in social networking websites over the last year or so. The semantic web still looks like it’ll be a few years away but DBPedia might be one site to watch.

I was amused when I visited Switzerland a few years ago to see CERN advertising itself as the place where the World Wide Web was invented. No, never mind the physics. After reading the book, I found out that the people at CERN weren’t particularly enthusiastic about the web to begin with and I feel CERN may be slightly exaggerating their role in the development of the web.

Even though this book is reaching a decade old, it’s still a fantastic account of how the web came about. If you’re interested in the web as a whole and where it might go in the future, this is still one to read. I’m sure history students will be studying this text in 100 years time.

You can buy the book from Amazon.com (US) or Amazon.co.uk (UK).

• Books , Internet , Reviews , Web 2.0 , Web Development
• Comments(0)

June 2nd, 2008

A big headache for web developers is testing websites in different versions of Internet Explorer. In Windows you can only have one copy of Internet Explorer installed.

To get around this limitation, some developers use IECapture which takes a screenshot of your webpage in Internet Explorer. It’s great for a quick test but it’s impractical during development: you can only see part of the page and if doesn’t help you debug anything.

Another option is to use Microsoft’s virtual machine or the Standalone IE program.

A little application called IETester can simplify the process. It features the rendering engines for IE 5.5, IE 6, IE7 and IE8. You can open up a tab for each rendering engine, hence switching between different rendering engines seamlessly. It also allows you to split the view and to see your website in the different rendering engines at once.

An interesting user interface design too… An odd blend of Firefox 2 icons with an Office 2007 ribbon.

• Browsers , Internet , Microsoft , Web Development
• Comments(0)

May 18th, 2008

I was catching up on Firefox 3 (which is an awesome browser by the way) today when I stumbled across a blog post about smooth image scaling in Firefox 3. The blog post actually flagged something up to me that was really interesting.

The web page in question styles all of its hyperlinks in red text without underlines:

As I read through the article, I noticed that I had a certain reluctance about following any of the hyperlinks referenced in the article. I couldn’t work out why but I realised it was due to Wikipedia which uses the same styling for it’s non-existent articles:

I noticed that I purposely avoided red hyperlinks on Wikipedia because it never led to any useful information. And it was slightly strange that the same behaviour then extended to a totally different web page which I had never visited before.

Of course, it’s common knowledge amongst web designers that people expect hyperlinks to be blue and visited hyperlinks to either be purple or a more saturated blue, but I’ve never heard of any expectations regarding red links.

It’d be interesting to know whether any of my readers had the same feeling about the links on this page or whether it’s because I spend too much time on Wikipedia.

Another interesting experience recently… one of the posters at school used red wavy underlines for all the titles. Again, it was one of those things which just annoys you and you can’t work out why. Eventually I figured it was because Microsoft Word would highlight incorrect spellings with a red wavy underline and that I’d developed some kind of “learned behaviour” in Word to correct typos and remove the red wavy underlines as soon as they appear.

• User Interface , Web Development
• Comments(1)

May 13th, 2008

Processing.js is quite something. Its a port of the Processing data visualisation programming language into Javascript. A great use of the <canvas> functionality in recent browsers. Because it pushes the browser to it’s maximum, it is recommended you use it only with the latest beta browsers: Firefox 3, WebKit nightlies and Opera 9.5.

If this doesn’t sound impressive to you, check out some of the demos:

• 91 basic demos.
• 51 larger, topical, demos.
• 4 custom “in the wild” demos

There really are all kinds of things from physics to fractals, from clocks to modern art.

What can I say apart from that it’s left me speechless and quite how processing.js can weigh in at over 5000 lines and compresses to under 10kb.

I suppose the sluggish performance in the browsers is the main downside of this but I guess that this will get better in time as I haven’t seen enough intensive <canvas> applications lying about which would warrant browser makers putting time into improving performance.

• Javascript , Web Development
• Comments(0)

May 8th, 2008

In the latest builds of Safari, you can reflect images using just CSS. Apple have come up with the proprietary -webkit-box-reflect CSS property for this.

reflection is a replica of the original object with its own specific transform and mask. The box-reflect property can be used to specify the specialized transform and mask that should be used for the replica.

-webkit-box-reflect: <direction> <offset> <mask-box-image>

<direction> can be one of above, below, left or right.
<offset> is a length or percentage that specifies the distance of the reflection from the edge of the original border box (using the direction specified). It can be omitted, in which case it defaults to 0.
<mask-box-image> is a mask-box-image that can be used to overlay the reflection. If omitted, the reflection has no mask.

Why use this over Reflection.js? Well, you can reflect any element - not just images. This includes for example the <video> element. But unfortunately it’ll only work in Safari and as far as I know, no other browser vendors are in the process of implementing anything similar.

In the future perhaps Reflection.js will simply provide a wrapper using <canvas> in Firefox and Opera, Webkit CSS in Safari and VML in Internet Explorer (at the moment canvas is also used in Safari).

• Reflection , Web 2.0 , Web Development
• Comments(0)

May 5th, 2008

I think this is a hilarious way to compress and perhaps obfuscate your Javascript code. How does it work? Well, in ASCII text, which is how Javascript is encoded, 8 bits are used to encode a single character (this gives 2^8 combinations or 256 possible characters).

In an 8-bit binary image file, the 8 bits are used to represent a colour. With 8 bits, you can encode 256 different colours all the way from white to black. In colour images, 3 bytes are used for each pixel. It stores the amount of red, green and blue as values from 0 to 255 and then combines them together to give colour.

This script works by encoding the 256 possible characters in an ASCII Javascript file as 256 possible colours in a binary PNG file. <canvas> is used to read the “values” or colours of each pixel, turning it back into the ASCII equivalent. The result is then eval()-ed.

The benefit of this technique is you can then benefit from PNG compression. Of course, most servers will gzip your Javascript files anyway meaning you don’t actually benefit from a reduction in file size.

I got this idea to stuff Javascript in a PNG image and then read it out using the getImageData() method on the canvas element. Unfortunately, for now, that means only Firefox, Opera Beta and the recent WebKit nightlies work. And before anyone else points out how gzip is superior, this is in no way meant as a realistic alternative.

Anyway, since the support for the getImageData method on the canvas element isn’t widely supported yet, I guess this remains a curiosity for now and just another way to use/misuse the canvas. So, this is meant only as thing of interest and is not something you should use in most any real life applications, where something like gzip will outperform this.

This reminds me of steganography and techniques of hiding files inside JPEG images. You could perhaps use this technique to add a digital watermark to an image. Or you could store metadata inside the pixels itself and then use <canvas> to read it out. The advantage of that is your metadata can never get separated from your actual image.

• Javascript , Web Development
• Comments(1)

May 2nd, 2008

The Javascript Image Effects script is stunning. It works by using VML filters in Internet Explorer and the <canvas> tag in Firefox and Opera - the same methods used by Reflection.js.

This library tries to enable different client side image effects. IE has long had its filters, which have provided a few basic effects for IE. With canvas, some of these effects can also be achieved in Firefox and Opera.

Safari lacks the getImageData/putImageData methods on the canvas 2d-context, so only the very basic flipping effects will work on this browser. The functions are present in the latest WebKit nightlies, however. Likewise, Opera only supports the get/putImageData methods in the beta version (9.50b), so you need the beta to see most of the effects. Check the compatibility column in the table above.

Among the effects available are blur, sharpen, flip, invert colours, find edges, emboss and brightness/contrast adjustment.

I think it’s fantastic that all of these effects can be achieved using <canvas>. However, it appears that the effects are achieved through the manipulation of individual pixels and unless there are dramatic improvements in performance I don’t think this would be practical as an unobtrusive Javascript. However, it could make a fantastic web-based AJAX image editor which would allow you to tweak an image before submitting it using toDataUrl().

If you use the javascript image effect, be aware of the terms of use which prohibit commercial use without permission.

• Javascript , Web 2.0 , Web Development
• Comments(1)

April 21st, 2008

This video made me smile!

My favourite part:

don’t use bold, please use strong
if you use bold that’s old and wrong

It looks like this guy (the SEO rapper) is totally serious and looking through his other YouTube videos, hes also got raps about social networking, link building and web advertising.

This reminds me of some really lame HTML jokes:

Why did the XHTML actress turn down an Oscar?
Because she refused to be involved in the presentation.

Why was the XHTML bird an invalid?
Because it wasn’t nested properly.

Boom boom.

• Humour , Web Development
• Comments(0)