IBM Connections 4 – Key Features and Benefits

2 weeks ago IBM announced IBM Connections 4. This is an exciting new version which adds so many new capabilities to this great piece of software that every existing installation should get updated as soon as possible. Here is a short video showing an overview.

What I like most about Connections 4 is:

  • Activity Stream
    The activity stream  shows a list of all your activities. This is not limited to ToDos but shows twitter or Facebook like activities like personal information, information about updated documents and even eMail! So you have got everything you need in a single place. It has to be well balanced though not to get flooded with stuff and miss the important information.
  • Embedded Experience
    How cool is that? When getting an entry in my stream let’s say from a vacation app I can approve or reject an application right from my activity stream using Embedded Experience. This example obviously only works if a developer enables the vacation application for Embedded Experience. Or somebody sends you a document and you can edit it inline. So cool!
  • Integrated eMail and Calendar
    Access your eMail and Calendar right from IBM Connections. It does not matter if it resides on a Domino Server or an Exchange Server, although I hope you are on Domino and not on the server that must not be named.
  • Social Analytics
    IBM Connections 4 ships with an IBM Cognos component that allows to analyze social activities in Connections in various ways. It comes with a huge set of predefined analytic templates  to get you started. That’ll help you to understand how your Connections instance is being used and what’s needed. It also helps to detect trends and current favourites.
  • Mobile Access
    Well, this is quite cool but kind of expected to be available nowadays.  Install the Connections App on your device and use it anywhere you want.
  • Connection Connectors
    We all know the Quickr Connectors which allow to use Lotus Quickr from Lotus Notes, Windows Explorer, MS Office (Word, Excel Powerpoint), Sametime and so on. Now there are IBM Connections Connectors although they are not called connectors. Luis Benitez just blogged about the Desktop Plugin and has some nice videos on his blog.

If you like IBM Connections as much as I do and you are a developer you should not miss out on the OpenNTF development contest. Develop something for Connections and win $1000!

XPages – Create a responsive layout with Twitter Bootstrap – #3

Today I want to dig a little deeper into Twitter Bootstrap and show what does that magic and makes the design responsive. If you missed the first 2 articles feel free to get an introduction in part 1  and a first responsive design in XPages in part 2 now.

OK, let’s go. So a responsive design adjust the layout of a webpage to different screen sizes. It does it on the fly while you are resizing your browser. The advantage of this approach is that you do not need to create different pages for different devices. Just create one page and let the responsive magic do the rest. This is an idealized and simplified statement since you have to think about what to show where in which screen size, what to remove, what to add and how to arrange things, but once done you only need to put stuff in the right places and let bootstrap do the rest.

The concept that responsive boilerplates and tools implement is based on media queries. Media queries allow web designers to write css for different media types like print and screen and for different screen sizes. You could let a print version of your webpage look different from the screen version by applying custom css into the following section of your style sheets:

@media print {
/* All your print styles go here *
#header, #footer, #nav { display: none !important; }

This does not make a webpage respond to different screen sizes, right? Here is a css frame that get’s you started and shows all the magic of Twitter Bootstrap and other frameworks like Bootstrap.

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

So you simply use the „min-width“ and „max-width“ attributes in media queries to define when certain css rules will show up in your application or vanish. Twitter Bootstrap uses these boundaries to adjust the design:

Label Layout width Column width Gutter width
Large display 1200px and up 70px 30px
Default 980px and up 60px 20px
Portrait tablets 768px and above 42px 20px
Phones to tablets 767px and below Fluid columns, no fixed widths
Phones 480px and below

So you can use any mix of these values in your style sheet as min and max values. If you want to apply a black body background only to landscape tablets you can use this in your style sheet:

@media (min-width: 480px) and (max-width: 767px) {
body {background:black;}

If you have already downloaded Bootstrap check out the file „bootstrap-responsive.css“. You will see that the entire file is based on media queries. It’s a good resource to get familiar with this technology.

To make it even easier for you Bootstrap provides a set of css classes that you can apply out of the box without having to code media queries. The following table shows css classes that speak for themselves.

Phones 767px and below Tablets 979px to 768px Desktops Default
.visible-phone Visible Hidden Hidden
.visible-tablet Hidden Visible Hidden
.visible-desktop Hidden Hidden Visible
.hidden-phone Hidden Visible Visible
.hidden-tablet Visible Hidden Visible
.hidden-desktop Visible Visible Hidden

Just use them in your Xpages either single or in combination to show or hide certain elements in different screen sizes. So I hope this helped a little to get a better understanding of the responsive magic. In my next article in this series I will show you how to set up a site navigator that works in all screen sizes with different looks and functionality.

Note: I copied some of the samples and the tables from the Twitter Bootstrap homepage.

Get IBM Connections 4.0

Today IBM announced IBM Connections 4.0. It will be available as electronic software download on September 7 and media will be available from october 2. IBM Connections 4 comes with a set of new features. It is designed to help you:

  • Track the activity of your network and respond more quickly using the embedded experience within the activity stream.
  • Bring external applications and content into the activity stream to respond in context, saving time and reducing context switching.
  • Track and respond to the activities of community members using the community-centric activity stream and embedded experience.
  • Quickly bring content from external sites and related communities into your community for faster response and better customer service.
  • Develop insights into community adoption and usage with new standard and customizable metrics and graphical reports.
  • Receive relevant recommendations on people and content using social analytics that now also utilize status updates and microblogging content.
  • Use hashtags to follow important topics and „Like“ updates with a single click.
  • Schedule team events and incorporate into a personal calendar using a new community calendar.

Source: IBM