Wednesday, May 11, 2016

How to Embed Video into your IBM Connections Wiki

Everybody loves video but while IBM Connections allows you to upload images, for some reason it doesn't have a simple "video upload" function.

No problems though... just add your own code.

Attaching your MP4 File

If you're referencing an external public video, for example something on Youtube, then you can simply copy the embed codes from there.  If you want to host your own video (privately) on connections, you'll need to follow these instructions;


  1. Open your IBM Connections Wiki and go to attachments. 
  2. Upload your MP4 file as an attachment.
  3. Once it's uploaded, right mouse click on it and copy the URL to the Clipboard.



Figuring out How Big Your Video Is

You'll probably have seen your video playing somewhere already, so if you can, screenshot it and put it into a graphics package.  Crop the edges so that just your video is showing and then attempt to do a resize.  The original dimensions shown, should give you an indication of the size.

Alternatively, you can just take an educated guess....

From Youtube, the Common sizes video are;

  • 560x340, 640x385, and 853x505 for HD
  • 425x344, 480x385, and 640x505 for SD


Referencing your Video

Edit your Wiki Page and then click on the HTML Source Tab in the Top Right hand corner.  Find some blank space in the html and add the following;



Unfortunately, with this blog being on the web, I can't paste the exact code (because it gets interpreted by the browser) but to make things easier I've added the sample code below.  Simply;


  1. Change all of the curly braces { and } to html braces < and >.  
  2. Replace the Pink Width and Height with your own Width and Height
  3. Replace the Green url with the URL you copied earlier.


{object width="660" height="360"}
    {param name="movie" value="https://apps.ap.collabserv.com/wikis/form/api/wiki/12358946/page/1235446/attachment/123546/media/Game1.mp4"}{/param}
{param name="wmode" value="transparent"}{/param}
{/object}



Enjoy.

Monday, May 09, 2016

Designing Layout in IBM Connections Communities

Two of the most critical factors in the success or failure of your intranet are the ease of use and the degree to which it catches the eye. 

Unfortunately, there's not a lot of choices you can make with regards to IBM Connections Community design past the front page. Once you hit a forum or a library of files and folders, every single community starts to look the same. 

Luckily though, there's a fair bit of flexibility on the  opening page and on the Wiki Pages.  I've already covered how to make your community look more appealing in other posts (See Part 1 and Part 2) but I recently created an internal community that I thought might be useful as a design exercise.

A Tiled Community Example

This is an internal "social" community which uses a style similar to the Microsoft Windows 10 tiles. I chose that look because I thought it would be both "fun" and "familiar" to our users.

To build this, I simply made a 4 x 3 table and set it to 100% width. Then I went into each of the four cells in the top row and right clicked on them and set them to 25% width.   This ensures that changes within the cells don't muck things up.

Finally, I went into the Second Row, Second  Column cell and merged right.



From there is was just a matter of creating the pictures.

I decided upon a set size for each icon (about 400 x 400) and used a font icon set to create the white icons.  I also wrote on them using the same font and size.  I included a white border in my picture because I didn't want to have to rely on connections to do my spacing for me.  

The middle tile is double-width so it's 800 x 400.

When I added the pictures, I made sure that they were 100% of the cell size (you can do that by right clicking on the image and setting the options).

From there, you just link the images to the places you need them to go.

Other Places to Look

If you're stuck for ideas on how to make your online community look more appealing, go to Google image search and type in "Intranet Designs" and browse through the many different screens.

As you look at them, ask yourself, which bits could be done in a table?

This will give you an idea of how to approach the sites to build them.

Start on paper and roughly draw out what you want on your page -- then try to draw lines around your objects on paper to determine how many rows and columns you need and which ones need to be merged.

You'll find that there's a lot more flexibility than you'd expect.