These new tools enable any website to become ‘social’ – allowing users to share, recommend and comment on content, while even being able to chat to other friends outside of Facebook. The site is therefore weaving a social fabric into the web, which all leads back to Facebook. This allows Facebook to collect massive amounts of personalised data on its users. Sound familiar? Just as Google uses search and its other products (the Chrome browser, Gmail email service, YouTube etc.) to collect user data to serve relevant advertising, Facebook is building an extensive and massively detailed database of their users’ needs, activities, interests, you name it. This is now no longer confined to only within the Facebook walled garden. For all intents and purposes, Facebook – like Google with search – is becoming an advertising company by winning the social game.

So where does this leave other social networks? Sure, countries like China might just not be a cultural fit for the Facebook model (not to mention insulated and limited via censorship). However, as a general-purpose social network, Facebook is probably unassailable at this point. Which leads us to the question: how does a scrappy social service compete with the mighty Facebook?

In my opinion, there are a few ways for niche (as opposed to general) social services to compete:

• Specialise – focus on a particular social aspect and excel at it (i.e. LinkedIn offers business networking and operates as a ‘stealth recruitment service’)
• Exclusivity – limit access to users of a certain, social, economic or other metric (i.e. ASMALLWORLD is a private network which started out as the Myspace for the rich and famous and limits invitations to ‘trusted’ members)
• Be distinctive – offer a service that Facebook doesn’t (i.e. Foursquare is a combination of a game and social network and uses a user’s location to allow venue check-ins)

Using one or more of the above elements, these niche social networks have been able to carve out successful and sometimes highly profitable positions in the face of Facebook’s growing influence. Some others I can think of are Flickr (for photo-sharing), Last.fm (for music lovers), TripAdvisor (for travellers) and Club Penguin (for children).

Are there any other successful or up-and-coming niche social networks you can think of? And do you think there are other ways for these services to compete other than being specialised, exclusive or distinctive?

The first item is the release of Apple’s Tablet. The impact of this device will be to make it abundantly clear to the consumer that the Web is to be had without the need for a typical computing device – no laptop required here. The Apple tablet will be an elitist device outside the US (as is the iPhone), but may turn out to be the poster child for convergence. As the delivery mechanisms for all content becomes IP networks, the consumer will cease to think of print, television and web content as different from each other – all will be one, as demonstrated by the Apple Tablet.

Microsoft’s Project Natal will be released into the wild. Forget augmented reality. This will be the first step towards extended reality, the blurring between virtual and real. The success of Avatar, the movie and the increasing availability of devices with three-dimensional displays will contribute to the acceptance of extended reality as an everyday reality, because the display techniques they use appear to intrude into the “real” world.  This will smooth the road towards wide adoption of extended reality as a user interface mode. (Finally – a replacement for the mouse.) 2010 will be the year we start adding reality to the “real world”.

And finally – this year will resolve the question of how the planet’s largest social and communications platforms can evolve to have viable business models. Both Twitter and Facebook have massive and growing user bases, but neither have a clear plan for exploiting this user base – the sheer number of users, and the wide global distribution of these users should offer unique opportunities. I believe that 2010 will be the year that a way is found to exploit the mega-nets – paving the way for planetary connectivity, and the giga-net.

In summary, my three (almost) sure things for the year:

• Convergence, convergence, convergence. The medium is changing, and so shall the message.
• Extended reality starts entering the mainstream.
• A way is found to exploit mega-sized social and communications networks commercially.

There are a number of other trends which I believe will have a significant impact on the web-as-we-know-it: semantic markup is becoming ever more ubiquitous without anyone really noticing; cloud computing is maturing; entirely new modes of internet usage is establishing itself in developing countries. Mobile internet usage continues to increase. Broadband penetration will continue to grow, enabling more and more users to join social and communications networks – we will see the rise of the giga-net within a very few years.

But I believe the three most significant  changes in the WAWKI will be triggered by the three events I listed here. Your mileage might vary – tell us about it.

Have you ever come across a website and saw some really interesting aspects of the user interface ? Maybe it was a site design that looks like a flash site but was not? Or maybe you came across a site that had a visually appealing menu.

Coming from mostly a backend-development background I get this feeling often. Last week it happened when I saw the Hide option on Facebook. I have seen it a hundred times before but on that day I found myself wondering, so I recreated the sample in my own way from scratch.

The following questions came to mind while looking at Facebook’s implementation:

1. how to make the hide option, appear next to feed item that the mouse is hovering over.
2. how to make the ‘menu’ item under the hide option appear and stay there when the Hide button is clicked
3. how to remove the selected options from the list without having to refresh the whole page
4. how to send the filter option to the server without posting back the whole page

I decided that I will use styling and jQuery to complete steps 1 – 3 and use a ajax call via jQuery to post the selected filter option back to the server.

Note that you will need some prior knowledge of jQuery selectors in order to follow the code sample. See the following urls for some background information on this:

• http://woorkup.com/2009/10/05/jquery-lesson-series-introduction-to-selectors/
• http://docs.jquery.com/Selectors

The following are the steps I completed to make these options work:

Create the folder structure:

1. Download the latest query plug-in (jquery.js in the screenshot) from http://jquery.com/
2. Create your project with necessary files. See the screen shot for my folder structure:

Import the style sheets and javascript files:

1. Place the following statements in the index.php file to reference the style sheets and javascript files

<html>
    <head>
        <title>How did they do that: Facebook Hide</title>
        <link type="text/css" rel="stylesheet" href="styles/default.css" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.feedfilter.js"></script>
        <script type="text/javascript" src="js/hidebutton.js"></script>
    </head>
<body>

Create the news feed items:

1. The sample only shows one of the news feed entries for clarity sake. Repeat item-container div for each additional item you want.
2. Note the following things when reviewing the snippet
   1. The class name for the feed item is item-container.
   2. Hide-button is a child element of item-container
   3. Hide-menu-header and hide-button-options are child elements of hide-button.
   4. The hide-menu-header relates to the Hide button on the screen shot and hide-button-options relate to the menu item under that.
   5. The custom user attribute on the span. This is the id (in our case a fictional id x) of the user’s events that must be filtered. This is the value that will be posted back to the server during the ajax call.

<body>
    <center>
        <div class="item-container">
            <div class="left">
                <div class="left">
                    <a class="left" href="/profile/sampleprofile">
                        <img class="profile-pic" src="images/avatar.png" width="55px" height="55px" />
                    </a>
                    <div style="clear:both"></div>
                </div>
                <div class="info">
                    <p>
                        <strong>
                            <a href="/profile/sampleprofile">Bruce Banner</a>
                        </strong> posted on twitter
                    </p>
                    <div class="detail">
                        <a href="#">8 hours ago</a> | <a href="#">comment</a> | <a href="#">like</a>
                    </div>
               </div>
           </div>
           <div class="hide-button">
               <div class="hide-menu-header">
                   <input type="button" value="hide"/>
               </div>
               <span class="hide-button-options" user="x">
                   <input  type="button" value="Bruce Banner" />
               </span>
          </div>
      </div>
...
<center>
<body>

Link up all the events to the appropriate elements:

Add script to hidebutton.js. The $(document).ready(…) construct is used to ensure that the initialization is only run once the full DOM is loaded. Note that $(document).ready(…) will run as soon as index page is loaded because it is imported in index.php and is not wrapped by any functions.

The script calls three methods that in turn use jQuery selectors to find the appropriate elements by class name or id and then links events to them.

• initializeFeedItemHoverEvent: adds the hover event to all elements that contain class item-container (news feed entries). There are 2 functions in this method. The first is fired when a mouse cursor is moved over the element and the second is fired when the mouse is moved away from the element
• initializeHideMenuClick: adds a click event to all hide-menu-header (hide menu button) items. It uses $(…).parent and $(…).find to find the appropriate elements relative to the current element. $(this) in this method relates to the hide menu button. It also uses removeClass and addClass to toggle the selected and unselected appearance of the hide menu button.
• initializeHideSubMenuClick: Calls the feedfilter() method (explained in the next step) on the appropriate hide button sub menu element. The feedfilter() method will use ajax to post the filter back to the server.

//file: hidebutton.js
$(document).ready(function() {
    initializeFeedItemHoverEvent();
    initializeHideMenuClick();
    initializeHideSubMenuClick();
});

//Initialise the hover events over the newsfeed entries function initializeFeedItemHoverEvent(){
//Find all newsfeed items that have a class called item-container
$('.item-container').hover(function() {
        //Show the hide button when the mouse moves onto the item
        $(this).find('.hide-button').show();
    },
    function() {
        //When the mouse cursor leaves the newsfeed item,
        //hide the hide button and reset the styling to original
        var hideButton = $(this).find('.hide-button');
        hideButton.hide();
        resetStyles(hideButton);
        //Hide the submenu of the hide button
        $(this).find('.hide-button-options').hide();
    })
}

//Initialise the click on the hide menu item
function initializeHideMenuClick(){
    //Find the hide button the user clicked and toggle (show/ hide) submenu
    $('.hide-menu-header').click(function() {
        //Find parent with class 'hide-button' of the current element
        //from there find the child of the found element called 'hide-button-options'
        var element = $(this).parent('.hide-button').find('.hide-button-options');

        //Find out which class is set on the current element
        //and based on that set a different class
        if ($(this).attr('class') == 'hide-menu-header'){
            $(this).removeClass('hide-menu-header');
            $(this).addClass('hide-menu-header-selected');
            element.show();
        }
        else {
            $(this).removeClass('hide-menu-header-selected');
            $(this).addClass('hide-menu-header');
            element.hide();
        }
    })
}

//Initialise the click event on the hide sub menu
function initializeHideSubMenuClick(){
    //When the user clicks on the menu option then
    //call the feedfilter method in the  jquery.feedfilter.js file
    if ($(".hide-button-options").length > 0) {
        $(".hide-button-options").feedfilter();
    }
}

//Hide the menu button and its sub menus
function resetStyles(hideButton){
    var menuHeader = hideButton.find(".hide-menu-header-selected");
    if (menuHeader != null){
        menuHeader.removeClass('hide-menu-header-selected');
        menuHeader.addClass('hide-menu-header');
    }
}

Complete the server post back:
The following section describes the code that fires when a user clicks on the hide button sub menu option. It first extracts the user id that is stored in the custom user attribute and posts it back to the specified page.

Note the if (response == “success”) {..} section. It finds all the news feed items with a sub element that has a user attribute with the same value as the news feed item that the user chose to hide.

//jquery.feedfilter.js

//Specifiy the feedfilter function definition
//What must happen when the user clicks the sub menu item
(function($) {
	$.fn.feedfilter = function() {

		this.click(function() {
			//Call setFeedfilter
            setFeedfilter($(this));
			return false;
		})

		function setFeedfilter(obj) {

            //Get the value of the user attribute on the current element
            //as the user clicked on the hide sub menu the current element is
            //the hide sub menu
            var user = obj.attr("user");
            var container = obj;
            var originalContent = container.html();

			$.ajax({
		    	type: "POST", //post back method
		    	url: "ajaxpostback.php", //page to post back to
		    	dataType: "json",
		    	data: {"userId": user}, //additional parameters
		    	beforeSend: function(xmlhttprequest) {
                                //change the content of the sub menu button to appear as a
                                //loading animated gif
		    		container.html('<img src="\" alt="\"loading\"" />')
		    	},
		    	complete: function(xmlhttprequest, textStatus) {
                               //add any code here that should fire once the post back
                               //is completed
		    	},
		    	success: function(response) {
                               //add any code that must run once the postback is completed and
                               //successfull
		    		if (response == "success") {
                        $(".item-container .hide-button-options").each( function() {
                               var data = $(this).attr("user");
                               if (user == data)
                               {
                                   $(this).parent('div').parent('.item-container').hide();
                               }
                            }
                        );
		    		}
                    else
                    {
		    			alert(response);
		    		}
		    	},
		    	error: function(xmlhttprequest,status,error) {
		    		alert("There was a problem with filtering events.");
                    container.html(originalContent);
                    }
		    })
		}
	}
})(jQuery)

What happens on the post back page?

I have not implemented the actual persisting of the filter setting but have shown how to retrieve the parameter value passed from the client side.

<?php
    //Persist $_POST["userId"];
    echo json_encode(array("success"));
?>

View the result

Browse to the index.php page and you should get something similar to the screenshot shown below.

What’s next?

• Styling can be refined. I used some inline styles etc that can be moved to the style sheets.
• Content is static at the moment. The news feed items would normally be generated from a data store of some sort
• Add additional error handling
• I used inline php and markup together to simplify the example. Best practice though, is to split your php code and markup. One approach would be to implement the Model View Controler (MVC) design pattern. A good option for this is to use the Zend Framework (http://framework.zend.com/). It implements the MVC pattern and has loads wrapper classes that wraps commonly used functionality to promote reuse.

Nowadays it’s almost impossible to write an article about mobile phones without mentioning the very successful iPhone. Apple had practically turned the mobile  industry upside down with its touch screen device. Some people will argue to the death about how the iPhone, or the “Jesus Phone” as some call it, is the best thing since sliced bread – and nobody can argue against how successful this device has become. But I am predicting a total onslaught of Android devices within 2 years. The Android army of phones will be everywhere you look and you will not be able to visit any cellphone store without running into at least 50 different phones running this OS. OK – maybe that is going a bit far but I think you get the message and already we are seeing signs of it. At the time of writing this article there are 16 official Android devices. How will this army of Android devices be created you ask ? Enter the Open Handset Alliance.

The Open Handset Alliance was formed in 2007 and currently has 47 members. It is a consortium of technology and mobile companies all dedicated to bringing us better mobile experiences, with Android being their first project . There are some big names amongst the 47 members, including Google, Intel, Nvidia, HTC, Asus, SonyEriccson, LG, Ebay. With so many big names dedicated to Android development, it is bound to be amongst the top mobile device OS’s. You can read more about this argument here, let me get to the Android architecture.

Android is a Linux based software stack. On top of the Linux kernel layer lies a layer for the system libraries such as SQLite, SSL, OpenGL, etc. This layer also houses the Android runtime, which runs the Dalvik Virtual Machine. On top of this there’s the Application Framework, housing the managers like the Activity Manager, Window Manager, etc. Then finally there is the application layer, which is the layer we are most interested in.

Android applications can consist of different sections, namely Activities, Services, Broadcast Recievers and Content Providers. Activities form the User Interface(UI) part of the application, Services run in the background similar to RSS feed readers checking for updates. Broadcast Receivers just listen for particular system broadcasts, for example , when the battery is low. Content Providers just provide content to any asking application , for example your application asking the contact book to provide the users contacts for use within your application. We will mostly be concerned with Activities.

Activities were designed to be totally integrated with one another. What I mean is that Activities can call one another and pass data to one another, basically  like an event driven system, but on a system wide level. An application is thus a group of Activities passing Intents to one another. It is then possible to include , lets say, a Google Maps Activity into your application by passing a Google Maps Intent to it and waiting for a result from it. It would seem to the end user that you created a Google Maps section to your app. I think this is pretty powerful.

To get started with creating these applications you need the free Android SDK, Apple iPhone developers need to register first($99!). Then you going to need an IDE, there is an Eclipse plugin, the Android Development Tools(ADT) plugin that has everything including the latest stable SDK. You don’t immediately need a phone to test on as ADT comes with an Android emulator that you can debug and test with but you will eventually need a phone to properly test with. ADT is pretty awesome as it comes with many tools to tell you exactly whats happening on the phone, which threads are running,it has code completion, wizards to quickly create sub classes and much more. It took me less than 30 minutes to get a “Hello World” application running on the Android emulator from the time I installed the ADT!

Since ActionScript 3 is a lot like Java I could easily jump in even though there were a few syntax differences – but after about 2 days and the help of ADT I had a basic application drawing a ball bouncing round the screen. But that was only the beginning and have rewritten sections of the game many times. Now after two weeks of lots of learning I have created the game and have it running on my phone. It is still a prototype and even though it needs weeks more spit and polish, after demonstrating the game I have gotten the thumbs up to turn it into a real game which we will be registering in the Android market.  There is still a lot to learn from this wonderful framework but the Android groups have been great help, as well as all the Android forums and of course, the Reference guide which ships with the SDK. It has been a challenge to get to grips with this entirely new development area but it was far easier than imagined it would be. I spent about 10 times longer getting to know Flash, and that was with people available to help me.

What about my experience using the phone? I can honestly say I am now more connected than ever before. My email, both gmail and exchange, is pushed to the phone. My Twitter application runs in the background constantly fetching  tweets, while my Facebook application gets all my buddies’ status updates to me as often as I want to see them. News and weather is updated all the time. My calendar and contacs are synchronised between my phone and my mobile. I never get lost anymore, maps are always available and my Gtalk status is always “available” and running in the background, unlike on some other phones Oh, and it makes phone calls as well.

I will follow up with another article of my findings, good and bad, this time focusing on the actual Android game development.

We have just posted our experimental Social Graph application on Facebook. It offers Facebook users additional insight into their personal social networks, allowing them to identify different social clusters they belong to. In the work and life balancing game, the person with the biggest number of clusters, and not the person with the biggest number of friends, wins.

The most interesting part in developing this application is its use of the so called spring-electrical-graph. It utilises a simple yet powerful algorithm for laying out entity-relationship diagrams (or graphs in a mathematical sense of the word). Any well laid out graph should keep the unrelated entities far from each other while keeping the related ones close. The spring-electrical-graph does exactly this by simulating an environment where all entities are electrical particles of the same charge while the related entities are connected via springs. The rest is left up to physics. The electrical particles repel each other via Coulomb’s law while the related ones pull each other via Hooke’s law due to the springs that link them.

The actual simulation is implemented using the 4^th order Runge-Kutta method for solving ordinary differential equations. Other methods could be used as well but this one was particularly well suited for our use and I had the code available from my Binary Toys project.

While there are other social graphs applications already available on Facebook, Nexus being one of them, ours is a bit more interactive and fun to play with. But we are paying a heavy price for this interactivity in a form of performance degradation for users with a very large number of friends. As the repelling force acts between all entities all the time, for a user that has 1000 friends, we have to apply almost a million forces to our model. And we have to do that four times for the 4^th order Runge-Kutta computation. For everything to run smoothly we would like to do all that at least 25 times per second, which takes our hunger for CPU power up to 100 million computations per second. We soon learned the hard way why Action Script 3 is still just a script, even though we love it.

Click this link to add the SWAT Social Graph to your facebook account: Social Graph

]]> http://www.mihswat.com/2009/05/25/visualise-your-social-graph-on-facebook/feed/ 2 http://www.mihswat.com/2008/10/27/new-version-of-feedalizr/ http://www.mihswat.com/2008/10/27/new-version-of-feedalizr/#comments Mon, 27 Oct 2008 15:33:43 +0000 John Kotsaftis http://www.mihswat.com/?p=345 We have just launched a new version of Feedalizr and what is SO special about this version is that we now provide users with the ability to update their facebook status (and also read their friends updates – sort of like facebook twitter).

Feedalizr is becoming a way for you to “re-mix” the web and we notice that lots of our users are using the product in the discovery of serendipitous content. Not so much reporting to each other about what they had for breakfast… This is largely a function of  how twitter/friendfeed are evolving. I think the facebook status update makes feedalizr the must have web 2.0 killer app (if I may say so myself – and you guys can flame me cause I am wearing kevlar !).

Enjoy!