Much has been said for using the Web for team collaboration. But actually putting this technology into practice is a lot harder than it sounds. For example, I’ve had a lot of trouble convincing my staff to use Basecamp. I manage a geographically dispersed department within a large corporation that has number of cost reduction projects underway. Basecamp seemed like the perfect fit.

My motivation behind using Basecamp (which by-the-way is an amazing product) was to use the Messages forum to reduce the amount of email and provide a record of discussions, to introduce some simple project management, to provide a central place to store our files and to use the Writeboard to collaborate on important documents.

After having implemented Basecamp for a month I found that most of the staff were not logging in or participating in the discussions. While some of my team saw the potential for the application others complained that Basecamp added to their workload and that its easier to collaborate using email.

I used the Basecamp forums to find out if others had experienced the adoption challenge and if they had any advice on how to overcome it. I received a lot of advice. Later, I held an evaluation session with my staff and the outcome led me to a few conclusions:

1. Basecamp (and other collaboration tools) work better on projects rather than daily activities.
2. The sooner you get all of your projects into the collaboration tool the better.
3. Everyone with a significant role on a project needs to use the tool (this was a bit of a challenge in my organization since not everyone wants to use the application and they don’t all report to me)
4. Management derives the most immediate benefit from the collaboration tool because all the projects are nicely tracked in one place.
5. Staff with minimal project activity view collaboration software as ‘just another tool they have to use’.
6. Many staff are worried about the security.

To address some of these challenges I’m now switching to our corporate SharePoint (WSS) site. WSS solves a few of the above mentioned challenges:

• WSS is obviously secure because the server resides within the intranet;
• WSS is linked to the company directory (plus WSS is the company standard) makes it easier to include anyone on a project, regardless of whether they report to me;
• Document storing, sharing and workflow work quite well.

That being said, it’s still hard as heck to try to get others on board for any WSS capability other than shared documents. Employees are hooked on email, and that’s that. And while SharePoint is highly configurable, it’s not as easy to use as Basecamp. Add to these challenges that the majority of the employees within an tradition corporation are not typically “web savvy”.

I believe the key is to integrate the use of collaboration tools into your processes, provide the prerequisite training and then enforce the use of the application. Once that’s done then I’ll circle back, find out who’s using it (and why), who’s not (and why), and just keep at it.

If you think deploying a collaboration application in the Enterprise is simple – think again!

I’ve spoken to a few people lately about how you can use the Web to provide online training or perhaps just to market yourself. I usually start by providing a few great examples, and then I talk about screencasts, sharing presentations and screencasts on the web, and wrap up with a discussion on providing live demos remotely.

Some Great Examples
A company called Commoncraft has an amazing knack for explaining things in plain English using simple videos and podcasts. Scroll down to the bottom of their web page and you can see some of their work. What I like about their work is that it’s simple, production costs appear to be low and it’s really inspiring. Hopefully we’ll see lots of other startups doing freelance work like this. Another great example is the use of screencasts for training: check out this Basecamp demo.

Doing it yourself: Screencasting
Here’s a link to a “Screencast” on how to make (what else but) “Screencasts”! The screencast is from Peepcode. It’s for the Mac but I’m sure there are also lots of screencasting applications for the PC (although I would still recommend the Mac!). Screencasts combine screen shots, diagrams and voice overs to teach a topic. You can pause, try out something, and then continue. By the way, I highly recommend spending the $9 for Peepcode’s Screencast video.

Sharing videos and screencasts
Slideshare provides a great way to share presentations and Slidecasts on the Web. You can upload PowerPoint or Mac presentations. Many people also use YouTube to share their videos as long as they’re short.

Live demos
The next best thing to in-classroom training is live demos. One tool that you might find useful is Webex. Webex let’s you share what’s on your desktop screen with whomever you wish. You can essentially use this application to do live training remotely. There are many other services/applications that do this such as Microsoft’s LiveMeeting. What’s nice about this kind of training is that you can bring up different applications, share slides, and answer questions in real time.

This is a pretty quick overview. Take some time to look at some of these sites and get a feel for what’s possible. Likely, the web-based training you select will combine several of these methods. If you come across any other neat applications or examples of Web based training drop me a note.

I’ve temporarily moved this blog to WordPress.  I will soon be setting up a rails-based blog on my new webhost.  Stay tuned.

Scaffolding in Ruby on Rails 2.02 is very simple to use and a great time saver. However, the views that are generated are very, um, well they’re just plain ugly. In addition, they’re not very accessible to users with older browsers or that use assistive technology.

Of course everyone that codes in Rails is an expert in CSS of has access to a professional web designer who can clean up those ugly and inaccessible views really quick, right? Well, not in my one-man show. And all of the reference material that I’ve read on Rails skips over the part that explained how to make your views presentable, usually by simply stating: “Magic Happens Here”. So I learned styling the hard way – by reading everything I could get my hands on.

In this post I’m going to demonstrate how to apply simple styling to scaffold generated views using CSS. I’ll demonstrate how to markup and style a simple form layout that includes a border with a legend and right-justified field labels. Sure, there are plugins you can get to help you out but what fun would that be? Besides, everyone has their own style.

I will be referencing the excellent SitePoint book The Art and Science of CSS. In particular, Chapter 5: Forms, written by Cameron Adams, provides an excellent step-by-step tutorial on creating attractive and accessible forms.

Note that I’m assuming you already know how to use the Rails 2.0 scaffolding feature. If not, there’s lots of material out there that can get you up to speed.

Creating the appropriate markup

The first thing you need to do is to add form markup that contains the necessary elements to refer to in the CSS style sheet. In particular, you will need to add <label> and <legend> tags. These tags not only help with styling specific parts of the page but also permits users of assistive technology such as screen readers to use your site. If you take a look at the scaffold generated markup you’ll see that it does not have these tags:

<h1>New todo</h1>

<%= error_messages_for :todo %>

<% form_for(@todo) do |f| %>
  <p>
    <b>Name</b><br />
    <%= f.text_field :name %>
  </p>

  <p>
    <b>Description</b><br />
    <%= f.text_field :description %>
  </p>

  <p>
    <%= f.submit "Create" %>
  </p>
<% end %>

<%= link_to 'Back', todos_path %>

So let’s add those tags now.

In the rhtml template new.html.erb wrap everything inside of the block with <fieldset> tags and underneath the opening <fieldset> tag add a legend using <legend> tags.

<h1>Create gift exchange</h1>

<%= error_messages_for :gift_list %>

<% form_for(@gift_list) do |f| %>
<fieldset>
  <legend>Gift exchange</legend>
    <p>
      <b>Name</b><br />
      <%= f.text_field :name %>
    </p>

    <p>
      <b>User</b><br />
      <%= f.text_field :user_id %>
    </p>

    <p>
      <%= f.submit "Create" %>
    </p>
</fieldset>
<% end %>

<%= link_to 'Back', gift_lists_path %>

If you save your changes and refresh your browser you should now see your fields surrounded by a border with a legend name.

One of the benefits of using the legend tag is that a screen reader will read out the legend text “To do list; Name”.

Next, for the field entry portion of the form replace all of the <p> tags with <li> tags and then wrap the <li> tags with an <ol> (ordered list) tag. The ordered list gives us the ability to add margins and padding to all of the field items and makes the form quite readable in absence of styles such as is the case with older browsers.

Finally, we’re going to give our field names (i.e., “Name” and “Description”) some labels with the <label> tag. Check it out:

<% form_for(@todo) do |f| %>
<fieldset>
  <legend>To Do list</legend>
  <ol>
    <li>
     <label for="name">Name</label>
      <%= f.text_field :name %>
    </li>

    <li>
      <label for="name">Description</label>
      <%= f.text_field :description %>
    </li>
  </ol>
</fieldset>

The last markup change we’ll do is move the <%= f.submit “Create” %> erb tag within its own <fieldset> tag. That may sound a little weird, but the <fieldset> tag is a great way to group multiple actions at the end of a form such as “submit” and “cancel”. We’ll also give this <fieldset> a class of its own names “sumbit”.

<fieldset class="submit">
  <p>
    <%= f.submit "Create" %>
  </p>
</fieldset>

If you save your changes and refresh your browser you’ll notice you page has decidedly taken a step backward, i.e. the field elements are no longer aligned.

That’s ok because the markup changes we’ve made now gives as complete control over how we want to style this sucker!

Using the Scaffold Style Sheet

There are several ways you can layout the form: for example you can position the label directly above the form element, in a separate left column that’s left-aligned or as a separate left column that’s right-aligned. In this example I’m going to go with a separate left column that’s right-aligned. I’m going to go with this option because a right-aligned column layout allows for a quick association between the field label and the field element.

Now it’s time to open the scaffold.css file located in the public/stylesheets directory. As you can see, there’s already quite a few style tags in scaffold.css. We just need to add styles for the legend and both both fieldsets. At the same time, we’ll add a little background-color to the fieldset element. Let’s add the following styles to the bottom of scaffold.css:

fieldset {
    float: left;
    clear: left;
    width: 100%;
    margin: 1.5em 0 0 0;
    padding: 0;
    border: 1px solid #BFBAB0;
    background-color: #F2EFE9;
}

legend {
    margin-left: 1em;
    color: #000000;
    font-weight: bold;
}

fieldset ol {
    padding: 1em 1em 0 1em;
    list-style: none;
}
fieldset li {
    padding-bottom: 1em;
}

If you refresh your browser now you should see nicely spaced field and labels, however, you’ll notice the field elements are not aligned.

Let’s fix that next with a label style:

label {
    float: left;
    width: 10em;
    margin-right: 1em;
    text-align: right;
}

Now refresh your browser and you’ll see that the field elements and labels are nicely aligned with the text labels right-justified.

You can adjust the width to accommodate your field labels or if you leave things as they are the field labels will wrap. But be careful if you decide to wrap your labels you will need additional styling; see chapter 5 of The Art and Science of CSS for more detail.

You’ll notice the “Create” button is shoved over to the right and has its own border. That looks strange and we don’t want that. This is where the <fieldset> tags surrounding the erb tag come in handy. The following style uses padding-left to properly align the “Create” button. At the same time we’ll make the background-color transparent.

fieldset.submit {
    float: none;
    width: auto;
    padding-left: 12em;
    border: 0 none #FFF;
    background-color: transparent;
}

Note, that if you adjust the width on the label style you will also need to adjust the left padding on your submit fieldset accordingly.

By now you’re probably thinking this is a heck of a lot of trouble, and you would be right, it is! However, with changes you’ve made to scaffold.css will be applied to all of your forms where you adjust the markup as above.

Ideally, it would be great to have a scaffold generator plugin that automatically creates accessible markup… but I’ll leave that for a future post.

This site is dedicated to those of you who are thrilled by what the Internet and the web offers and are keen to learn about web development. It’s for people that want to do more than just use the web, you want to be part of it, you want to build it! It’s for people that love coding and have an insatiable appetite for learning.

My interest in web development started when I had a idea for a social website based on the Google maps API. While I had some programming experience it was drastically in need of a major update. I’m still in awe in regard to how much a web developer needs to know. I quickly discovered that I not only needed to learn HTML and CSS but also Javascript, Unix, Subversion, hosting, APIs, text editors and so on. As if that wasn’t enough I added the fantastic web framework Ruby on Rails to my list of things to learn.

While I never really got my Goggle application of the ground (but I will one day), I did finally get my first Rails application up and running: giftmylist.com. It’s very basic (it’s only designed for my immediate family to use) but it’s functional.

I plan to use this blog to record my journey as I discover the wonderful world of web 2.0 development with Ruby on Rails and Javascript, sprinkled with a little HTML, CSS and who knows what else.

Enjoy!