Tuesday, October 23, 2007

Social Network of New Generation

Some days ago I found an invite for Yahoo! Mash in my mailbox. I had noticed both Google and Yahoo announced social networks of new generation. Still there is not much information about Google’s trial – Social Stream. We only have a low-grade screenshot (http://www.hcii.cs.cmu.edu/M-HCI/2006/SocialstreamProject/index.php) and scanty description.



So it seems as some sort of aggregator, which allows you to use your contacts and services from third-part projects (Youtube, blogs, flickr and so on). Since I’ve got an invitation to Yahoo! Mash I was not to fail to discover that solution. There we are. Mash is obviously a breakthrough service among social networks. Calling of such every network is giving you ability to create you own page in order to present yourself, draw there your friends and organize your contacts.



Where is the trouble? Such a service has to be simple to understand and at the same time rich of user services. Mash developers managed to give both those advantages to their network. It’s enough to fill some lines to get your home page within Mash. Then you add new bars onto you page if you wish. Mash has a gallery of applications like Facebook.com. You can choose and pick up any you see fit to your page. Moreover you are able to structure application bars on you page with Drag&Drop like on Netvibes.com. But what is really “know-how”, your friends on Mash can edit your page (if you allow that). Now imagine, a girl has got an invitation. She got her home page, but she doesn’t know what to do with it. She is ready to put it away and forget it. A friend of hers adds some nice applications there and setup a glamour decoration. Now she is happy. She invites all her numberless friends to the page. Then she discovers a Pet gadget of her page. As she sees the Pet may be fed and petted she forces all her friend to give it a treat. That gives boundless potential of service spreading.



Mash looks as a well thought-out service, but I see an improvement the developers let pass. What all these social networks are about? To help a user to get new friends, help to choose from millions the people, who are really interesting for the user. The people who what to expand their circle of acquaintance wish to know before start of a conversation who is the potential interlocutor, would be he or her really conversable and interesting. MySpace asks users “describe yourself” to let others know you. Is it so easy to be honest with it? Somebody answers “I’m tall, strong and handsome”, somebody says “I’m so complicated”. That all is nothing for the one who is keen to form own opinion of a person. Well, Yahoo! Mash suggests to answer some questions like “If I were an animal, I would be”. As for me it hardly uncovers somebody to me as a person. Besides those questions rather remind me of job interview, but they don’t induce me to answer. Recall how pleasant conversations start in real life. You are in a train roomette amidst unknown people. Somebody starts with “By the way I had the other day such an interesting incident…” After some time everybody joins to the conversation with their own occurrences. So, it were so logical to answer people within social network profiles questions like “tell us what interesting happened to you recently” or “what funny you recall from your childhood”. Then developers can add a form to respond the user’s story with your own. Thus we can have a real alive conversation this way. I think developers will use such natural questions in social networks and we can find more people of kind we like.

I'm at Yahoo! Mash http://mash.yahoo.com/dsheiko

Friday, June 08, 2007

Site Sapiens-based Information Networks

Nowadays, the Internet can be seen as a platform ideally suited to a new generation of corporate information networks. Such networks provide effective user interaction, despite geographical remoteness, operating system, program and device distinctions. To get to know how to create such networks by means of Site Sapiens platform listen to the podcast…

Thursday, March 29, 2007

Rich Internet Applications and Content Management

Today everyone talks about Web 2.0. But while the idea of a collective intelligence, implied here by the term's inventor Tim O'Reily remains an object of trivial speculations, it is obvious that the World Wide Web is changing. Web applications are increasingly approaching the level of functionality, which is usually found only in desktop applications. And as this trend is gaining momentum, we can already witness the dawn of a new era brought about by a novel kind of web applications - Rich Internet Applications (IRA). At the same time, the popularity of terms like Web 2.0 and RIA makes developers use them as an attractive label on their products, without actually understanding the meaning behind those notions. So what does RIA mean, eventually?




The term Rich Internet Applications (RIA) was first mentioned in Macromedia's promotional materials in March 2002. By this the company's managers wanted to point out that the well-known Flash technology is not limited to creating attractive visual web-elements, but can also be used to develop fully functional web-based business applications. Apart from providing user with data, static pages of older-type sites are much less flexible in terms of user-data interaction compared to desktop applications. Every time you request additional data (navigate the site) or upload data to server the pages have to reload. This is often inconvenient and, above all, can compromise security because of the possibility of data loss (say, due to a lost server connection). Yet this is exactly the way Web 1.0 works. Every time you type URL or save data in a web form, server receives instructions which it then uses to form a page you see next. With RIA, there's no need to reload pages. As you click to receive additional data or send data to server, the latter receives corresponding instructions and uploads the results onto the page. The application receives server's response and changes accordingly. For example, if you browse an internet catalogue of an older type, every time you hit the button "next 20 items" you will have to wait for the page to reload and for a new page to shape. With a RIA-based site, you can request items 50 to 80 or all items in a specified price range on the same page, and with every new query only the list of items will be updated.


Today RIA can be developed with the help of AJAX, Adobe Flex, Windows Presentation Foundation, Flash, Java-applets, Java and some declarative languages - such as XUL and MXML. Of all these tools only AJAX and Flash gained wide popularity - mainly because they are easily available. And whereas development of Flash-based applications is quite a resource-consuming and expensive process, developing RIA with AJAX takes hardly more time then it would with an older-type, classical web-site. In most current projects Flash is only used when it is needed.


The very name - AJAX (Asynchronous JavaScript and XML) - reveals the essence of the technology. It allows the client engine and the server-based part of the web-application interact asynchronously. This means that your browser can request server at any point (say, when you hover your mouse over a link) and, vice versa, server can upload data to browser at any time, without waiting for a new page to be requested. How does it actually work?


One of the most popular uses that AJAX has found is in the web-based drag & drop technology. You must have already seen the virtual desktop services - such as found at www.netvibes.com and www.pageflakes.com. Their users can arrange widgets (useful data from other servers) on the screen and adjust their size just like we usually do it in Microsoft Windows. These features are now increasingly found in business-applications. For example, at www.atlas.cz users can customize the starting page with as much ease as any virtual desktop.


The possibility to customize pages with the help of ready-made design templates reduced the dependence of CMS (Content Management Systems) users on site developers. Using the mouse a CMS administrator can arrange various data modules, specify their size, color and other attributes at a page. Then s/he can save the current configuration which will later be displayed to site users. Yet advantages provided by Drag&Drop technology to CMS administrators are even greater when it comes to site content management. In latest CMSs all the administrator has to do to change position of any document in the structure (or of an entry in the list) is to drag and drop it at the desirable point. It is exactly the way files are managed in Microsoft Window Explorer.


ria_drag_n_drop_01.gif

As we've already mentioned, with RIA there's no need to upload all the user data at once. Parts of it can be uploaded later, when they are actually requested for. For example, when administrator switches to the CMS's site structure management interface, only the basic level of the hierarchy tree is loaded. If later user wants to explore any of the tree's "branches", the additional data will be uploaded instantly. This feature is even more important in managing various lists. The application returns to the interface only those entries that user specifically requested. Moreover, even data input procedures acquire new features. Modern web-applications increasingly offer input option which acquired wide popularity thanks to Google Suggest service. As soon as you start to type something in the required field, a dropdown list appears with suggestions based on the already typed in elements. Those who at least once had to, say, choose a producer from a seemingly endless dropdown list in the SELECT field will fully appreciate the convenience of this feature.


ria_likegooglesuggest_02.gif

The fact that there's no need to reload the page every time its user performs an operation changes the very perception of a web-interface. You can type in data in several forms placed on one and the same page but, say, on different tabs. Then all the data can be saved simultaneously. And, importantly, in case due to some reason (a lost connection, an internal error etc) the data is not saved, the interface will report it and let you try again. And we all know only too well that poor security was one of the basic flaws with older-type web interfaces.


It is obvious that apart from everything else IRA-based sites can report the status of processes and their results. Today it is only perceived as natural when any element involved in some system operations displays their status on a special bar. Let's say, for example, that you requested a list of specified items to be displayed by an e-catalogue. In that case you have the right to know what the system is up to from the moment of query to the moment the list is displayed. If due to some reason the server is unable to return the requested data, you should receive the corresponding message.


ria_statuslines_03.gif

With RIA the functionality and security of CMSs reach a totally new level, which earlier was available only with desktop applications. Yet we should not forget that RIA-based interfaces are capable of interacting not only with their own server software, but with third-party applications as well. This fact lets us hope that present-day CMSs will gradually evolve towards ECM (Enterprise Content Management), thus bridging the gap between corporate sites and corporate network information resources.


This article features examples of Site Sapiens 3.0 CMS interfaces (www.sitesapiens.com)

Monday, January 08, 2007

How to Make AJAX Read between the Lines

Your site may contain a wealth of technical terms. The user while viewing it may have to wonder about their meaning. What can be done to provide site visitors with instant answers to the questions they have? Previously technical terms were represented as links so that users could click them and get a definition window. This approach, however, is rather clumsy and time-consuming: one has to click the link, wait for the definition window to load and then close it. Now with AJAX we can move closer to users’ expectations. We can make the message window appear instantly once the mouse is over the term and disappear when the mouse moves farther. This service will not affect the size of your web-pages. When the contextual help is required Java Script will get definition from an external dictionary and display it.



The method for getting information through an implicit request can be applied not only for technical dictionary. Have you ever wondered about the double underlined links in such projects as hotscripts.com and devarticles.com? This is context-dependent advertising based on IntelliTXT engine from Vibrant Media (www.vibrantmedia.com). When the mouse cursor points to such a link an advertisement window appears. This technology is referred to as in-text advertising.



This method is also increasingly used on news portals. The main page contains only the news headings. Yet when the user puts a mouse cursor over the heading a short description appears. Thus the main page can hold a lot more news. The visitor sees the headings and all he/she has to do to get a short summary is to browse through the items with a mouse cursor.



Let us now look into how contextual help can be implemented with AJAX. Any developer familiar with this method will be able to make portal comment on news upon request or write an in-text advertising module.



Obviously, we have to think of a message window which will appear every time the user puts a cursor over the keyword. For the window to appear and disappear instantly it should be placed in a hidden DIV








<div id="InstantMessage" class="instant_message"> </div>




To keep things simple we can make it look as a regular MS Windows system message









<style>


.instant_message { padding: 5px; font-size: 12px; font-family: Arial; visibility: hidden; position: absolute; width: 240px; border: outset 2px #FFFFFF; background: #D4D0C8}


.instant_message a { width: 240px; padding: 2px 17px; color: black; text-decoration: none; cursor: default}


.instant_message a:hover {color: #ffffff; background: #0A246A}


</style>




The window should appear the very instant user puts a cursor over it and disappear when the cursor is out. And at this moment the window should already contain the definition text, not a blank space. This means that we should place the terms in the document within an inline-tag that supports events onMouseOver and onMouseOut. The first event should be assigned a Java Script function which will get the term definition, place it into the window and display the window. The second event should be assigned a function which will simply hide the message window.











<a onmouseover="getDefinition('term', event);" onmouseout="hideMessage();">term</a>





In the window displaying (getDefinition) function parameter we should specify the term. AJAX will use it to get the definition text. As we have to position the displayed window under the mouse cursor we should pass event parameter to this function to provide support of Gecko-based browsers. The hide message function (hideMessage) does not require any parameters.



Now our task is to make JavaScript position the message window when getDefinition function is called.








function adjustMessage(evt) {


MessageObj = document.getElementById('InstantMessage');


if (isThisMozilla) event=evt;



var rightedge = document.body.clientWidth-event.clientX;


var bottomedge = document.body.clientHeight-event.clientY;


if (rightedge < MessageObj.offsetWidth)


MessageObj.style.left = document.body.scrollLeft event.clientX - MessageObj.offsetWidth;


else


MessageObj.style.left = document.body.scrollLeft event.clientX;


if (bottomedge < MessageObj.offsetHeight)


MessageObj.style.top = document.body.scrollTop event.clientY - MessageObj.offsetHeight;


else


MessageObj.style.top = document.body.scrollTop event.clientY;



MessageObj.innerHTML = 'Loading...';


MessageObj.style.visibility = "visible";


}






Thus, we have a “data loading” message window. Now we should request term definition from the controller. You can write your own AJAX (http://en.wikipedia.org/wiki/AJAX) request functions. Yet if you are new to AJAX I can recommend Yahoo library (http://developer.yahoo.com/yui/). In that case the request will look as follows:








function getDefinition(term,evt){


adjustMessage(evt);


var request = YAHOO.util.Connect.asyncRequest('POST', 'http://controller_address', callback, 'term=' term);


}




Clearly, we cannot request a controller we haven’t written. Generally, this is the simplest step. The controller’s task is to return term definition requested in POST. Whatever programming language you should use for this purpose, only a couple of basic operations are required:




  1. connect to database
  2. perform an SQL request to get the definition
  3. display the result as follows:








{


"errormsg" : "error code in case of error",


"content" : "definition text"


}





This is a data format known as JSON. Java Script accepts it as an explicit declaration, as “native”. In case you use Yahoo AJAX library the controller’s response is handled by the following construction:









var handleSuccess = function(o){


if(o.responseText !== undefined){


showMessage(o.responseText);


}


};



var handleFailure = function(o){


if(o.responseText !== undefined){


showMessage("Connection Error");


}


};



var callback =


{


success:handleSuccess,


failure:handleFailure,


argument:['foo','bar']


};






The only thing left is to describe the showMessage() which puts the text received into the message window









function showMessage(json) {


var respondStructure = eval( '(' json ')' );


MessageObj.innerHTML = respondStructure.content;


return false;


}




As you realize, to hide the message we only have to change object attribute








function hideMessage(){


var MessageObj=document.getElementById('InstantMessage');


MessageObj.style.visibility="hidden";


}




Trying this out you are unlikely to encounter any problems using MS IE. Yet, if you use FireFox, you might observe the message window flicker. This happens due to FireFox’s specific handling of onMouseOver/onMouseOut events. But this can easily be solved by putting delay flags into functions that handle these events.



The scripts from this example can be found at http://www.phpclasses.org/browse/package/3505.html


The working example at http://cmsdevelopment.com/thesaurus/