While preparing for the first event JayÂ? & Silent Rob will be helping host as well as preparing for BarCamp Vancouver, I find it important to appreciate these types of events and what can be accomplished by creating an established network of contacts. Looking no further than Seattle and as far South as the Silicon Valley, these two regions are highlighted by the presence of an abundance of tech companies. It should come as no suprise that companies often move or establish offices in these regions, specifically the Silicon Valley, to help increase their presence in the industry. If nothing else, the Valley takes notice.Â? Because there are so many Tech companies, the area is obviously filled with potential employees and potential customers. It becomes a case of strength in numbers.

Two companies that started in the area immediately come to mind when theÂ? idea of relocating to the Silicon Valley is tossed around areÂ? StubleUpon, the formally Calgary-based collaborative searching company, and Flickr, the formally Vancouver-based (although I’m sure I read something about Victoria, too)Â? photo-sharing site that helped bring tagging to the forefront. It’s more understandable that Flickr would have made the move South, having been acquired by Yahoo!, but would they have been able to avoid this move? Maybe, but it would have been more difficult.

Vancouver has established itself in several different arenas - a hotbed for biotechnology andÂ? movies are two that come to mind. As those Industries became more established,Â? momentum within them built on itself. Could thisÂ? happenÂ? in the Internet Industry? While there is no specific reason why it can’t happen, it will be important for efforts in the industry to be made in a way that helps companies create attentionÂ? and awareness for eachother and the industry in the area, to help prevent the required move South.

Companies like DabbleDB, NitobiÂ? (or Ebusiness Applications), Sxip IdentityÂ? are just three examples of companies making their wayÂ? through this Web 2.0 revolution of the Internet, with some of the most innovative ideas and applications on the Internet. It can’t be ignored that sites likeÂ? ClubVibes, ClubZone, and online gambling company BoDogÂ? also have a presence in the Vancouver area. With companies like Bryght still feeling the need to open an office in San Francisco (for the understandable reason of their client base in the area), there is still more room to grow to create an industry in VancouverÂ? that is self-sustaining within the area and a resource to the rest of the world. Hopefully, eventsÂ? like ours and largerÂ? ones like BarCamp help bring the strength in number that the area needs to achieve that goal.Â?

The first nPost.com event in Vancouver not only seemed to be a great success, it makes the idea of attending BarCamp Vancouver on Friday even more exciting. With a total attendance of twenty-five or so individuals and a couple plates of appys, the people that I met represented such an amazing range of Tech jobs, it’s hard to believe how well the Industry seems to remain relativelyÂ? hidden.

I think Wings was a great location to have it, but a few things we can improve on for next time. The music seemed to be a little bit on the loud side, and there might have been a few too many tables and chairs in the back there, but it was cozy. We’ll be looking at bring everyone together again for another event, hopefully as soon as early to mid-October. I hope to be putting together a page of mini-profiles for people who attend these events,Â? so I’ll try and have that out as a resource soon. Thanks again to Nathan from nPost.com who made the trip up from Seattle to make the event happen -Â? Check out his post about the event hereÂ? -Â? and thanksÂ? to everyone elseÂ? for making the event a success, especially to ‘not-so-silent’ Rob.

I’m really excited to share this bit of code with everyone, but, before I begin, let me start by saying I was planning to write a follow up to last weeks post on creating a web 2.0 form and adding IP to GEO location lookup etc, but I got distracted with Drag and Drop. I will continue that post next week.

The effect we want to create is a portal style windowed content system with drag and drop, much like MSN Spaces or now Live Spaces or the old My Yahoo! Click here to see the demo. By the end of this tutorial, you will have a good understanding on how to create this type of effect and port it into your own web application. It is not 100% complete. We will need a save layout method and a few other little things, but all in all, its not bad. Think of it like homework.

Okay, the problem. We want to display content in little windows, and give the user the ability to move the windows into any column they choose. We also want a way to provide the user the abiliy to chage the layout fron two colums to three or whatever the programmer defines. Since this isnt the 90’s, we are not going to do this from scratch. We’ll check out what libaries we could do this with, like YUI!, Dojo, or Script.aculo.us. Well, since I have focused all the other articles on Prototype, Script.aculo.us seems like the perfect choice.

Script.aculo.us provides a great drag and drop libary. We are actually going to use their sortables object, which extends the dragables object. We will basically create three lists and provide the user the ability drop onto any one of the lists.

Here we go…

We will create two objects: a layoutManager and a windowObject. The layoutManager will be responsible for creating the windows and displaying the layout or changing the layout. The windowObject will be responsible for actually rendering the window.

Lets start with the WindowObject and work backwards,


var windowObject = Class.create();

buildWindow: function() {
this.li = document.createElement('li');
var el = Builder.node('div',{className:'window'},[
Builder.node('span',{className:'handle'},this.title),
Builder.node('span',{className:'content'},this.content)
]);
this.li.appendChild(el);
return (this.li);
}
}

The window Object really only has one method, buildWindow. It creates a list item, a div, and two (2) spans. The actual window content is loaded in from the windows array deifined outside the object. The window is styled by the three (3) classes: window, handle, and content. As you can see, the content is loaded in here from a static variable. This should be changed to an ajax call and load in a file fragment rather then a string. Can we say homework assignment?

So this window array that defines the windows looks like this:

var windows = Array();
windows['blah'] = Array('Blah Window','Blah Content');
windows['foo'] = Array('Foo Window','Foo Content');
windows['bar'] = Array('Bar Window','Bar Content');


So we have created an associative array with three windows, and we use the ‘id’ as the key. Each element is an array and has two more elements: the windows title and the window content. This could be expanded to allow more information, such as window state, minimized, maximized, etc…

Moving along, lets break down the layoutManager Object.


layoutManager.prototype = {
initialize: function(type) {
this.type = type;
this.cols = Array();
},

}


The constructor takes only one param, the layout type. The layout type is the type of layout we want to display, how many columns, and how big each column is (in percent). Lets take a look at that for a second. The layout type is a string that references a key in an array. I guess I could have just passed in the entire array, but I didn’t think about that until just now. Oh well… (more homework?)


var layoutTypes = Array();
layoutTypes['SymmetricTwoCol'] = Array(2,'50,50');
layoutTypes['RightHeavyTwoCol'] = Array(2,'30,70');
layoutTypes['LeftHeavyTwoCol'] = Array(2,'70,30');

var lm = new layoutManager("LeftHeavyTwoCol");


So the first method to call will be addWindowSet(ws); This is a string that defines the default set of windows to be displayed. The string will contain window id’s and be colon delimited and comma delimited. Colons delimit colums, and commas delimit windows. Here is our default window set.


var windowSet = "blah,foo:bar:blah";


Just a note here, and maybe an area for improvement. This above window set has three columns, and if we select a two column layout the third window is simply dropped.

The last thing we need to do is call the drawLayout(dest_id) method with the destination id.


lm.drawLayout('layout');


We are done. For all the little details, read through the source. If you have any questions, please comment below. If you like this article, Digg it or share it with a friend.

Download and Demo:
Click here to view the demo.
Click here to download the compete souce zip.

As we perused some of our regular sites this morning (yesterday we talked about how we need to get with the times and get an RSS reader instead of actually visiting websites), we stumbled across Seth Godin’s Web 2.0 Traffic Watch List. The number one site on the list of 937 sites is MySpace, which was a little suprising. It would have been difficult to have included MySpace in any list of Web 2.0 companies that we created, but the Wikipedia definition, one that we link to on more than one occassion, for Web 2.0 companies clearly states Web 2.0 is a term to describe ‘Internet-based services that let people collaborate and share information online in a new way—such as social networking sites.’ So really, what is Web 2.0?

Of course there is huge debate regarding the overused term, but what is considered to be in a new way? On the Valleywag website, there’s a vote over who’s the hottest Web 2.0 lady. This type of collaboration and sharing of information is obviously not new, but what if the whole thing had been done in Ajax. IfÂ? there was anÂ? Ajax rating site, would that be a Web 2.0 company? It would be if MySpace is.

The problem with this next generation of web applications, or Web 2.0 sites, is how loosely the term is being applied. Classmates was started in 1995 and is basically the same as MySpace, isn’t it? True, the site does offer some level of freedom for the user to create their own space, but is that really what Web 2.0 is all about? It’s a piece of the puzzle, but that alone shouldn’t put them in that category. But, that would probably be the case for several of the companies that have made it onto that list.Â? Sites like this oneÂ? are definitely good to have, but it’s tough for it to be really effective unless there’s a clearer idea of what a Web 2.0 website really is.

It doesn’t really matter in the grand scheme of things. The term is so overused that it hasÂ? probably lost most of its meaning to anyone closely associated with the Industry.Â? At the end of the day, how sites perform compared to each other probably doesn’t matter all that much. It’s important, butÂ? being profitable might be more important.

Check out this article for more info on what is web 2.0.

Having just gone over Time Magazine’s 50 Coolest Websites, as well as some of the related readings that go along with the article, it’s probably as easy to argue against any of those sites making the list as it is to argue the inclusion of those sites on the list. What makes the list more interesting is when you look at 2005’s list of 50 Coolest Websites,Â? and the features that are looked at on Google, Yahoo!, The Microsoft Network, and America Online, four websites dubbed as being InÂ? A Class By Themselves. Also, check out the 25 Sites We Can’t Live Without. Although all the sites on this year’s list haven’t been looked at, there are a few on the list that are worth commenting on.

It’s probably impossible to create this list without having some of the web’s major players listed.Â? YouTube, Digg, and MySpace, the dominant players in each of their own categories, were all listed in the top 50 websites. Google SpreadsheetsÂ? is a fairly big suprise as a Staying Connected website, and one must wonder why Google continues to get so much media attention over these less-than-significant releases. A suprise site listed is The 9Â? - not that the site doesn’t deserve to be on the list. Silent Rob and I stumbled upon The 9 the other day and were quite impressed. The Yahoo! property is a video blog that runs down nine things on the web, daily. Having only been there once or twice, it’s tough to say more than that, but check it out.

Of note, in 2005, fifteen blogs were listed as some of the coolest sites on the Internet. In fact, there was a whole section in that list dedicated to blogs. Although the blogging trend is continuing and the blogosphere is growing, there was no blog category in this year’s list. It probably should come as no suprise that Microsoft failed to make the list, but the Bird’s Eye maps that are included with the Live.com mapping systemÂ? are absolutely amazing and may have deserved a mention.

It’s an interesting article/list, and any of the sites are probably worth checking out, depending on what a user is looking for or interested in. Rather than try to compete with such a cool list of websites, instead I’ll throw out a few links from sites visited this week.

The Daily Pixel: An intersting way to harness the power of the blog,Â? The Daily Pixel is putting together a blog network that will cover a range ofÂ? topics from entertainment to politics to shopping. Seems like the evolution of the blog.Â? The average user will not subscribe to an RSS reader, instead, they’ll take advantage of websites like Digg, or in this case The Daily Pixel, thatÂ? essentially provide similar or analagous results.Â?

The Dragon’s Den: This website wasn’tÂ? discovered this week, but the list of potential pitchers was. This can be seen here, courtesy of Sean Wise’s blog. Individuals are given the chance to pitch their products to a panel of VC’s. If the individual is able to convince a member of the panel to agree to fund the project for the amount requested, the individual is given the money and runs with their idea. Everything from ZigTag’s new search, CoolorDrool’sÂ? pet rating, or White Cowbell Oklahoma - a band - are potential pitchers. Right now my vote is torn between the Canadian in me, wanting to support the hockey-related product, Ice Shark Blades, and the Male in me, wanting to promote The Magic Banana or K-loop.com(we’ll assume the reasons for supporting that are obvious). Note: I believe The Dragon’s Den was originally a BBC program and is featured in other countries as well.

The Good Blogs: Another attempt at harnessing the power of the blog, this seems to be an old idea applied to something new. The idea is that the group’s traffic will generate more traffic for members of the group than an individual’s traffic for their own site (the sum of the parts isn’t as great as the whole). Again, not quite a Digg, but trying to be part of the evolution of blogging. Gives new bloggers a good way to get noticed.

Aptana:Â? For the programmer, Aptana provides a robust, JavaScript-focused IDE for building dynamic web applications. Silent Rob tells me that it is one of the first JavaScript based IDE’s, and after watching some of the tours, or screencasts, it seems like an amazing product.

DabbleDB: A combination of groups spreadsheets, custom databases, and intranet web applications, DabbleDB is just amazing. Although there are no specific applications for us to use the application yet, I recommend you check out the demo that won Best IN Show at the Under the Radar conference.

BarCamp: BarCamp is a way for the masses to gather, teach each other something about something specific in the industry, and have the masses go out and spread the new-found knowledge. BarCamp will be held in a number of different cities on the weekend of August 25th - 27th, and will likely produce an amazing cornucopia of knowledge for those who attend. I will be attending BarCamp Vancouver, and if everything works out, will be Dissecting the MySpace Juggernaut.

And finally, maybe the best thing from the web this week:

Just between me and you, I probably am just looking to have a good time and would hate to do that without vibrating features. CheapÂ? AND fun? Giggidy giggidy!