The first version of Confabio.com has been made available:

[http://confabio.com/](http://confabio.com)

# coming soon

In the short term we will focus on the following matters:

* finding a commercially strong partner
* building the first version of Confabio Premium
* opening up confabio.com by facilitating an API, web widgets and desktop tools
* continuing on improving the current design and robustness

Unfortunately we don’t have a web designer in our team (yet). So for this first release I’m the one who will do an attempt.
Graphical Design is something which I’ve always found very difficult. As a programmer and old-skool techy my flavour can be very dark and geeky. (Like green text on a black terminal).
Nevertheless I think graphical design - an activity you do mostly with your right brain half - is something which is important for everyone. As [this book points out](http://www.danpink.com/) right brain thinking is becoming more and more important (more about this in [one of my previous articles](http://blog.dominiek.com/articles/2007/4/1/non-rational-consumerism))

*note: thanks go out to [Hyo Kwon](http://www.hyokwon.nl/) for showing me some design heuristics and Adobe Illustrator taekwondo*

# Choosing the style for the users

*Sometimes finding the right color combinations can be really hard, especially if you have to start a project from scratch. If your client already has a logo, a house-style or branding guidelines, you have a starting point. But if it’s your job to design that house-style, the first thing you should do is decide which style the logo should reflect.*

This is a quote from an article by Veerle, a well respected web designer, [Choosing Color Combinations](http://veerle.duoh.com/blog/comments/choosing_color_combinations/). This article gives you good directions on where to start with colors.

We haven’t set clear targets for our main audience, but since we’re solving our own problems to make a product they will be small businesses and consumers. Our product has these characteristics:

* meet with other people
* conference/communicate with them
* a human’s head in a square

The latter can be a good hinter for a potential logo. The first two properties can help us choose the colors.

# A very simple logo

For now the logo is pretty simple, just a square with confabio and the beta indicator. In the future this will be upgraded to a nice logo with perhaps a waving figure in it:

# Choosing colors

There is many information about color theory, but none of it can be so entertaining and informing as [this movie by Maria Claudia Cortes](http://www.mariaclaudiacortes.com/colors/Colors.html) (click on door 2, the movies!).

* red: dynamic, romantic, commanding, alert, rebellious, complementary, visible
* orange: helpful, burning, cozy, abundant, warning, flavorful, festive, active, excited, communicative, inspiring
* yellow: creative, young, visible, bright, cheerful, light weight, curious, coward, playful, nutritious, ill, expanding
* green: patient, natural, adventurous, relaxed, athletic, unfortunate, lucky, balanced, safe, sharing, peaceful
* blue: technical, deep, free, educated, protective, lonely, peaceful, cold, clean, authoritative, formal
* purple: intelligent, artistic, aloof, luxurious, royal, vain, fantastic, melancholic, feminine, fragrant, solemn

so I guess our colors are: *orange* (helpful, communicative) and *green* (peaceful and sharing, like a picknick in the park). But then again, all these colors are very open to interpretation. In the end they must ‘feel right’ and that’s highly subjective.
Out background color is black (or a shade of it eg #111111). This is simply because we are dealing with video. Those movies don’t come with pink bars for a reason!

# Show me that Technicolor rainbow!

*It’s very important to know which combinations you don’t want.*

tool 1: if you want to make easy changes to pictures but you’re too lazy to install and crack software, try this: [http://www.picnik.com/](http://www.picnik.com/) (complete with Flickr/Picasa integration)

tool 2: [http://kuler.adobe.com/](http://kuler.adobe.com/), a fancy community color selector

# More color!

# Landing page layout mockups

After showing the above color combinations to several people, only a few combinations were favored. I used those color combinations to sketch a landing page layout. This landing page will be the email catcher and will have a big play button that will give you a screencast of the product.

# Color layout A below:

# Color layout B below:

# Color layout C below:

# Color layout D below:

# Color layout E below:

So for now one of these color layouts will be chosen for the initial landing page. It will most likely be changed in a later stage.

# Please drop a comment with your vote ( A B C D E )

Okay, so we’re starting to have a nice product. At the moment we’re still struggling with some technical decisions to make the software better performing and robust.

There’s one important factor that determines success or failure:

# Bandwidth
At the lowest standards of quality we use two times 20 kilobytes in a second per user:

* 144 megabytes per hour per user
* 144 gigabytes per hour per 1000 users
* 15 euros per hour per 1000 users

So if we would do a beta release, we better start thinking about a business model!

# Freemium
A business model which I really like is [Freemium](http://en.wikipedia.org/wiki/Freemium_business_model), this is a derivate of the old shareware model. Basically you always want to guarantee a continues free service and have an upgradeable premium package (hence Free + Premium = Freemium). This free service has the most basic features and should satisfy the most basic needs. If you look more carefully you’ll notice that the free part often satisfies B2C needs and the premium parts satisfy B2B needs.

# the Free Part

In our case the free part should be: *simple web video conference*. You plug in your cam and you get the amount of bandwidth and quality to video conf with other people. Since we’re paying for it we might limit the room to three or four people. Also, depending on our sustainability we might put in a daily time quota.
Still I have my doubts about limiting time. As people behind the freemium model explain, you basically want to guarantee a continues service. It is indeed very annoying when your ‘trial’ is expired. To summarize:

* basic quality video conference
* talking with up to 3/4 people

# the Premium Part

Often the premium part consists of multiple packages, ranging from light to heavy users or small to large businesses if you will. The most basic premium package should be something like this:

* high quality video conference
* as much people as the connections allow
* rooms don’t show up in the public directory, unless instructed too
* letting people join in with voice-only (useful for business!)
* a facility to drop small lines of text like urls

So upgrading to the premium package will almost give you unlimited access. Of course we need to guarantee that these users can use all these features with free/anonymous users as well.

It would also be nice to have a corporate package which will have these features and even more (please note that the features will remain limited for the sake of usability and simplicity):

* yourcompany.confabio.com
* your own user management with private access
* corporate tools like: power point, file drop off, nifty scratch pads
* a broadcasting facility (let the janitor listen in on the boardroom meeting)

# What do you think? Drop us a comment!!

We had some successful runs this week and things are looking up! In one or two weeks we will start rolling out our Beta version.

# What we have

* start and join a conversation instantly (no login, no download)
* video and audio talk with 2 people or more

# What is yet to come

* more robust group chat
* crystal clear FAQ pages, showing nooby users how to plug in their camera
* a good systems foundation is essential in this project (will be a follow-up post about this)

# What about that silly name, Confabio

Yes, Confabio it is supposed to mean: confabulate + video.
But instead, it actually reminds people of this:

And I can tell you now, that guy is NOT joining our party!

So we need a different name.
I’ve set up a page for all of you to vote (lets hope the losers and bots don’t find it)

[http://blog.dominiek.com/stuff/confabioname](http://blog.dominiek.com/stuff/confabioname)

# Show me something!

We mocked up a quick roundish design, but we will meet with someone next week to get some directions on where to go. For now this is it:

The top buttons and logo will always be visible. This index serves as introduction portal.

# Maybe you guys should start thinking about a businessmodel

Yes, we should, but first: *completing a good product*.
We would like someone to join us in our marketing and business efforts. It should be someone who understands the changes the Web is going through. So we will start networking but if you think you’re up for it, drop us an email or comment.

I myself am a bit weary of looking at the competition (I don’t want to catch feature-fever). But Aram found a nice link: [Flash Based Video Conference Solutions on the Web](http://www.kolabora.com/news/2004/11/18/flashbased_video_conferencing_solutions_on.htm). This is a very old link (2004) and it shows some of the pioneers:

* [flashmeeting.com](http://flashmeeting.open.ac.uk/)
Free, Login, Demo. This is actually quite nice, but it’s ugly and has too many features.

* [instantpresenter.com](http://www.instantpresenter.com/)
From 100$/month, Call 800-7026792 to request a demo. They should rethink their domain name.

* [webconference.com/](http://www.webconference.com/)
From 50$/month. One word: Suitfest. Favorite props: Most Feature-Rich Solution & 128-bit Secure Socket Layer Encryption.

Ok, we will have to look at some new stuff soon. But apparently the last two companies didn’t evolve and will most likely die out. This stuff isn’t high end anymore. We will post an update about more competitors soon.

Our Confabio.com project, web video conferencing, is being developed as we speak. The concept is relatively simple, therefore the technology is as well. This article will explain what we have come up with now. Be aware of geek jargon!

# What problems are we trying to solve?

* We want data from the webcam and microphone.
* We want to stream that to and from the server.
* We want some user join/left logic.

The first problem can at the moment only be solved using Flash. Of course we could build our own plugin but that would be silly, since everyone uses Flash to watch full episodes on YouTube. A future alternative [could be Silverlight](http://www.techcrunch.com/2007/05/01/take-time-to-understand-silverlight-its-important/) (let’s not hope so!). For now we are using Flash. More specifically we are using Macromedia Flex (it was the only trial I could download at the time). Flex is a trick to use cool words like XML, CSS and AS3 in your Flash project.

As far as we know, Flash server-side communication can only be done in three ways: raw GET/POST (no way!), RTMP (secret!) and .NET (yeah right!).

Streaming the video can only be done using that secret RTMP to communicate with an expensive Adobe package. Fortunatly some cool people reverse engineered RTMP and made a [free alternative called Red5](http://osflash.org/red5/). Red5 is written in Java and it does a lot of things when it starts up, very pretty. Unfortunately, Red5 is not the pragmatic solution we were hoping for ([hello world is 5 pages](http://www.joachim-bauch.de/tutorials/red5/HOWTO-NewApplications.txt)). Nevertheless, it works!

The third problem, user join/left logic, could also be solved using Red5. In doing so we would have to hack into those Java apps (or use [Red5 Jruby ducktape](http://flexonrails.net/?p=64)). Also we would have to do database access in Java (And [burn in DAO Factory Hell™](http://java.sun.com/blueprints/corej2eepatterns/Patterns/DataAccessObject.html)). No thanks!

For now we are using [RubyOnRails-WebORB](http://www.themidnightcoders.com/weborb/rubyonrails/), an open source plugin to easily make calls from Flash. (get_users, login, register that’s all!).

Naturally we try to use as much Open Source as possible, We like it, we trust it and we’re cheap-ass. Unfortunately, the most important part of this project has to be written using the Adobe trick called Flex. Although they might open source it in the future (whatever that means), it’s still a hassle for now.

Let’s ‘pretty please’ that with a diagram:

# When someone enters a conversation

Confabio is all about starting conversations / entering rooms:

1. Browser gets http://confabio.com/teabreak
2. RubyOnRails prepares variables: server-settings, client IP-address and geo information and passes them as FlashVars in the rendered view.
3. The rendered .SWF file will register or login itself into the ‘teabreak’ room, depending on the stored flash-cookie.
4. .SWF will start polling the server-side RoomService for any new users (every x seconds). (using WebORB)
5. Once a user joins, broadcasting is done to the Red5 server (using RTMP™). Also the other user’s stream will be played.

# The RubyOnRails Part

*1. Browser gets http://confabio.com/teabreak*

RubyOnRails defines these routes (config/routes.rb):

  map.room 'weborb/:action', :controller => 'weborb'
  map.room ':identifier', :controller => 'home', :action => 'room'

*2. RubyOnRails prepares variables: server-settings, client IP-address and geo information and passes them as FlashVars in the rendered view.*

In this home_controller there’s an action called ‘room’ that makes sure that we have the proper FlashVars for Flash:

    @flash_vars = params
    @flash_vars[:debug] = true unless RAILS_ENV == "production"
    domain = request.env['SERVER_NAME']
    @flash_vars[:root_url] = 'http://'+domain+':4000/'
    @flash_vars[:rtmp_url] = "rtmp://"+domain+"/messageRecorder"
    @flash_vars[:remote_ip] = request.remote_ip
    ...
    # convert hash to Flash stuff
    @flash_vars = @flash_vars.collect{ |key,value| key.to_s+"="+value.to_s }
    @flash_vars = @flash_vars.join('&')

In it’s view (app/views/home/room.rhtml) there’s the usual Flash Object HTML:

        allowScriptAccess="sameDomain"
        type="application/x-shockwave-flash"
        flashVars="<%= @flash_vars %>”

# The Flex Flash Part

Luckily, we figured out how to code without IDE, we can use a single script and it will give us the build_at timestamp:

cat compile_die_zooi.sh
export PATH=$PATH:"/Applications/Adobe Flex Builder 2/Flex SDK 2/bin"
cat confabio.mxml | sed 's/CONFABIO_BUILT_AT/'`date +%H%M`'/' > confabio_built_at.mxml
mxmlc -services /Users/dodo/checkouts/confabio/config/WEB-INF/flex/services-config.xml ¥
-compiler.context-root http://confabio.com:4000/swf/ confabio_built_at.mxml
echo "w000t"
mv confabio_built_at.swf ../../public/swf/confabio.swf

Also, I recommend NOT using trace(); There’s just too much hassle to get the debug message on your screen (without IDE and also with IDE it’s slow as hell). Instead write your own puts(); routine.
Debugging .swf in our project looks like this:

*3. The rendered .SWF file will register or login itself into the ‘teabreak’ room, depending on the stored flash-cookie.*

        /* initiate room and eventlisteners */
        room = new Room(identifier);
        room.addEventListener(Room.USER_JOINED, on_user_joined);
        room.addEventListener(Room.USER_LEFT, on_user_left);
        room.addEventListener(Room.SELF_REGISTERED, on_self_registered);
        room.addEventListener(Room.SELF_REGISTER_FAILURE, on_self_register_failure);

        /* register/login ourselves to the room */
        if(session.data.user_id) {
          room.login(session.data.user_id);
          puts("login as "+session.data.user_id+" in room "+room.identifier);
        } else {
          puts("registering to room "+room.identifier);
          room.register();
        }

*4. SWF will start polling the server-side RoomService for any new users (every x seconds). (using WebORB)*

Inside the onzin/Room.as constructor:

      room_service = new RemoteObject();
      room_service.destination = "RoomService";
      room_service.register.addEventListener("result", on_register);
      room_service.get_users.addEventListener("result", on_get_users);

This will initialize the communication with the RubyOnRails service RoomService.rb. room_service.users results in a on_get_users callback.

*5. Once a user joins, broadcasting is done to the Red5 server (using RTMP™). Also the other user’s stream will be played.*

broadcaster = new Broadcaster(Application.application.parameters.rtmp_url, room.identifier+room.user_id, local_player.camera);
broadcaster.connect();
broadcaster.net_connection.addEventListener(NetStatusEvent.NET_STATUS, on_broadcast_net_event);

remote_player = new RemotePlayer(you, broadcaster.rtmp_url, room.identifier+event.user_id)
remote_player.connect();
remote_player.net_connection.addEventListener(NetStatusEvent.NET_STATUS, on_play_net_event);

# The Red5 Part

We don’t know what it’s doing, but it works for now. We should get an alternative for this. Some dude named [Yannick wrote an RTMP implementation for Ruby](http://osflash.org/rtmp_os?s=rtmp+ruby#yannick_s_ruby_build). Basically it’s a zipfile with a lot of Ruby files. Undocumented of course, kind of like [the black monolith from 2001 A Space Odyssey](http://img.photobucket.com/albums/v226/JeffWells/subalbum1/monolith-sized.jpg). Still I think this thing might be our RTMP salvation.

# Source Code, We want More

Pop us an email.

Digigen, again naming is not our strong suit, was born for one simple reason: spam. We got sick of the spam on our original domain so we needed a new domain, and fast! Digigen, as in *Digital Generation*, is the best we could come up with.

Most of us, the digital generation, have grown up with the internet. We are the first web generation, for most of us, the first .com bubble started during our puberty. We are also the first generation that will laugh when educational systems prompt us for knowledge, why not just google it? A big difference with the newer generation of kids is that the internet is much more social and interconnected then it used to be. The underlying technology is more powerful, but still relatively the same. The implications for society and life are enormous. While we - the fanatics labeled geeks - are still recovering from our de-socialization symptoms, the new generation is flat-fee chatting and camming away. Beat that 14k4 modem!

This big living organism of emerging behavior is something very interesting. It’s most important feature: change. It can destroy businesses, ways of thinking and reshape big parts of our economy (maybe even politics). Also it can give chances to new entrepreneurs all over the world, from geeks like Sergey & Larry (Google) to Khalig Salimov(farmer, through microcredit 2.0).

Digigen.nl will be about those hardships of trying to set up cool web projects. We sometimes have some nice idea’s and it’s just such a waste to not disclose them. Therefore we will

*Get Naked!*

Wired Magazine, a major web authority, published a nice article about getting naked this month. Getting Real, a must-read book by 37signals, has some nice wisdom to back our blog-those-idea’s strategy:

variable idea can be:

* -10 really dumb
* 1 stupid
* 5 ok
* 10 smart
* 20 excellent

variable execution can be:

* 1 almost nothing
* 10 bad
* 1000 ok
* 10000 good
* 10000000 excellent

If you multiply these two variables, you will get the amount of $ you earn.

Also, as the Cluetrain Manifesto illustrates, businesses are conversations.

Let’s make it a fruitful one, with active listening and no lies.