Thursday, February 6, 2014

The Code Behind My IBM Connect 2014 Keynote Demo - Part 3

A new post on SocializeMe:Alright, let's move on to the next piece shown at the OGS. If you want to know what this is, I would suggest you catch up with Part 1 and Part 2.



The next part I got ready for the keynote was people search. But I wanted to move away from the typical search results list. I wanted something more visual and easier to digest. I wanted results to be more visual, maybe like a slideshow of people cards that I could flip through.



After doing a bit of searching, I landed on another jQuery plugin, this time the Baraja plugin and it got me something like this:






So what's the magic here? Let's walk through the parts:



1. As usual, include the right JavaScript:



<script src="jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="Baraja/js/modernizr.custom.79639.js"></script>

<script type="text/javascript" src="Baraja/js/jquery.baraja.js"></script>





2. Then the CSS for styling



<style type="text/css">

.homepage {

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;

font-weight: 300;

color: #444;

line-height: 1.2;

background-color: #f0f0f0;

}



a {

color: #1c8aae !important;

text-decoration: none !important;

}



.photo {

width: 100px;

height: 100px;

border-radius: 55px;

-webkit-border-radius: 55px;

-moz-border-radius: 55px;

border-color: #fff;

border-style: solid;

box-shadow: 0 0 3px rgba(0, 0, 0, .4);

-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .4);

-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .4);

}



.fn

{

font-family: "HelveticaNeue-Bold", "Helvetica Neue Bold","Helvetica Neue", sans-serif;

font-weight: 600;

text-decoration: none;

color: #444 !important;

font-size: 18pt;

}



.inputForm

{

border: solid 1px #e9ecef;

width: 280px;

height: 30px;

padding: 8px;

-webkit-border-radius: 15px; //For Safari, etc.

-moz-border-radius: 15px; //For Mozilla, etc.

border-radius: 15px; //CSS3 Feature

box-shadow: 0 0 4px rgba(0, 0, 0, .2);

-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .2);

-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .2);

}



.searchEntry {

text-align: center;

margin: auto;

padding-top: 20px;



}



.searchResults {

padding-top: 20px;

width: 260px;

height: 600px;

margin: 30px auto;

}



ul.baraja-container li {

border-radius: 10px;

padding: 5px;

box-shadow: 0 0 4px rgba(0, 0, 0, .1);

-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .1);

-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .1);

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

width: 250px;

height: 250px;

margin: 0;

position: absolute;

top: 0;

left: 0;

cursor: pointer;

background: #f0f0f0;

font-size: 12pt;

text-align: center;

pointer-events: auto;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

-o-backface-visibility: hidden;

backface-visibility: hidden;



}



ul.baraja-container li img {

margin-top: 20px;

}



ul.baraja-container li p {

line-height: 1.0px;

}



ul.baraja-container li div {

text-align: center;

}



ul.baraja-container {

list-style-type: none;

width: 260px;

height: 310px;

margin: 0 auto 30px;

position: relative;

padding: 0;

}



.score {

font-size: 18pt;

color: #1c8aae !important;

text-decoration: none !important;

}



.bullet {

font-size: 8pt;

color: #666;

}



</style>



3. The placeholder where things will show up:



<body style="margin: 0;">



<div class="homepage">

<div class="searchEntry">

<input type="text" class="inputForm" id="searchBox" />

</div>



<div class="searchResults" id="searchResults">

<ul id="baraja-el" class="baraja-container">



</ul>

</div>

...





4. Call the API!



<script>

var $el = $( '#baraja-el' ),

baraja = $el.baraja();

baraja.add( searchResults ) );

baraja.fan( {

speed : 500,

easing : 'ease-out',

range : 100,

direction : 'right',

origin : { x : 50, y : 200 },

center : true

} );

</script>



The missing piece here is the call to the People Search API of IBM Connections to generate searchResults. I'll leave that as an exercise to the reader. Once I gathered all the data, I created a searchResult which would look like this (so that it matches the CSS I shared above):

<li><img class="photo" src="http://ift.tt/1d1wba7" alt="image1"/><br/><br/><div><span class="fn">Bill Ranney</span> <span class="bullet">&bull;</span> <span class="score">10</span></div><p>Sr. Business Manager</p><p>10 followers</p></li>

In terms of the score, that was work that we did based on the work with Marie Wallace. Check out her blog for more details.





from Socialize Me http://ift.tt/1d1we5Q