Archive for the ‘Logical Design’ Category

Extending the “twitterinfo” service

Friday, May 8th, 2009

The Original Question

I have a friend in Real Life (who is also on Twitter as @practicalkatie) who tweeted me a perfectly reasonable question the other day:

hey – where do you find out the date you joined twitter? everyone is twittering about their anniversary dates, but I can’t even find mine!

and I realized I really wasn’t sure myself. So I went pawing around at the Twitter API Documentation site, and I came up with the RESTful method users/show, which uses a GET with a userID or screen name as data payload and returns extended information in JSON or XML form. So of course I tried it out in curl:

curl http://twitter.com/users/show/practicalkatie.xml

and lo and behold, there was an element returned called "created_at" to read. So I sent her the curl command-line. Then I thought about it some more, and I realized that was kind of a dumb thing for me to have sent her: how do I know she has curl installed? So I made up a little piece of code to provide that user-lookup service: twitterinfo twitterinfo Webapp screen snapshot

Let Nothing Serve But One Purpose

As long as I was writing a Web-based user interface to a user info lookup sevice anyway, I figured I might as well use the opportunity to distribute the work (no API key or such to hide in the middleware) and let the client talk directly to Twitter. And hey, why not make it so it can "already be there" on a handheld device when it is needed? Why not move towards making it a WebApp? Let them load it once from the RIT server, and thereafter get it locally.

This, of course, is a security problem. Unless you are willing to be a little twisted in your code.

The Same-Origin Policy

Like the Applet security model, the JavaScript security model says it is only allowed to open sockets and make requests (and thus send data) back to where it originated. And this stuff was not going to be originating on the Twitter server, it was going to be originating at RIT.

And so I had an excuse to play with another idea: JSONP

jQuery Makes It Easy

JSONP works by injecting a callback function into the JavaScript acting on the DOM, after the page thinks it is done loading and coming from the remote server. Weird, huh? I really didn’t want to write that code right now, I just wanted to use that capability and refine it later by writing it myself. jQuery has some already-defined functionality to do just this, and I am basically lazy. So I used jQuery’s $.getJSON function. jQuery makes it easy to do this stuff; you simply pass the fully-made-up URI for the GET and a function prototype.

  $.getJSON( fullUri,
    function( data ) {
      processJsonResults( data );
  });

The fullUri parameter contains the request we saw in curl, with a minor twist to deal with naming the callback, and the data variable in the anonymous function used for the callback ends up containing the response. The only real problem is that there is squat for error-handling. Anything other than a successful request-response cycle is unthinkable to this little bugger… There are always trade-offs for initial laziness, and this is one of them: I’ll accept this first version being stoopid about users typing in non-existent user-names to look up, for the sake of not having to write this particular code myself.

The Data Display

I figured a simple list would do, there wasn’t much in the way of depth to the "extended" user data returned and simple displays are easy for user to understand quickly. I also figured the avatar-picture should actually show in the list, and that "Web Home" field should be clickable.

Mobile? Did I Hear Someone Say Mobile?

I figure it should be made to work on mobile devices as well, I mean I do run this little Center for the Handheld Web and it would be a bit embarrassing to not make it work okay on "reasonably smart" mobile devices . And by "reasonably smart", I mean handhelds with browsers supporting the basic Holy Trinity of XHTML, CSS, and JavaScript. So I made sure it worked small, I added a bit of meta-tag magic like this:

<meta name='viewport' content='width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />

and I added a little iPhone-specific JavaScript magic to make the address-bar roll up out of sight like this:


  document.getElementById("toolbar").style.visibility = "visible";
  window.scrollTo( 0, 1 ); // pan to the bottom, hides the location bar

and it was ready to go.

The structural markup was simple and should work on a small screen using gestures, the browser had been told not to mess with the fonts and such and to hide the address-bar, the sneaky JavaScript request/response code-injection was working, & the response-data node injection stuff was dealt with.

So What Next?

Simple things that do one thing nicely make me happy, but I can sometimes make things just a teenie bit "too simple". So I asked folks on Twitter what they would like to see as extended features for my little app. I figured there was no harm in asking, and the only responses I got involved seeing who someone was following and seeing who was following them. Followers and following, that is what folks wanted. And so that got me to thinking too, how about letting them "follow a trail"?

Wandering Through the Webs

Any list of followers or following users appears flat, but each entry in it is actually a node in a set of "interpenetrating webs of social affiliation" (as I have put it in other writing). Each person who follows me has in turn people who follow them and people who they follow. To each of us, we are at the root of a couple of webs. Looking at the larger picture, we are each embedded in interpenetrating webs (plural). If I get a list of the users following so-and-so, each of those entries should in turn be clickable so I can follow a path wanderting through the webs embodied in Twitter's persistence store.

Back to the API Docs

Of course, this meant I had to go back and look at the API documentation at Twitter. Was there any way for my WebApp to ask for user info on all the friends of someone with one call to the Twitter API? I wanted to be nice… sure enough, the REST API comes to the rescue with the method statuses/friends. So I tried that out in curl with

curl http://twitter.com/statuses/friends/jeffsonstein.xml

And it seems to work just fine. Perhaps I can add that functionality to the client and still not bang on the Twitter machines with too many API calls.

So That is Where We Are, Now

I have another week of classes, then exams to give and grade (ugh). Then I get to play with this some more. What do you think of it so far? Do you think I am going in the right direction with the follow-the-webs extension I am planning? Will it still be simple enough and work okay on a handheld device? Comments are very welcome.

Sahana. User friendly interface

Monday, January 26th, 2009

Assylbek Zhumadyrov
Sahana, UI

Audience: the audience of this project is all users of Sahana system from quests and regular users to administrators.
Goals: the main goal of this project is to design the easiest and simplest interface for users of Sahana. Achieving this goal will include two main steps:
1. designing a logical model of the entire Sahana system to make addition of new modules and future growth more proper and logical;
2. designing user friendly interface for all users;
The second point is more important and will be described in details later.

Is it important?
The main idea behind this project is making disaster consequences handling easier and quicker. By designing user friendly interface navigating and action performing will be easier and faster which is vital in case of Sahana system when people’s lives are the price of the reaction time. To do so it is important to have a logical model of the entire system. There are many developers of Sahana all over the world and they have added and keep adding lots of features into that system. As a result we have the system which is full of features but has lack of logic in it.

One very important point and at the same time, the main problem, is to design user friendly interface without rebuilding entire system including database. Designing user friendly interface includes several steps:
1. designing intuitive and comfortable navigation system (menus);
2. designing all menus the way so only the links/sections that are available for that particular type of user would appear on the page (administrator, quest, volunteer etc.);

The Future of Information Architecture

Monday, January 26th, 2009

A very interesting article on The Future of Information Architecture– from Hypertext to Hypercontext was posted yesterday at the Agit8 site. Agit8 is “a blog to talk about changing the world through technology”, and information architecture is one of the key elements of the Web.

This one is well worth reading, if you design and/or build sites today (and will continue to do so tomorrow). You can follow @agit8 on Twitter.

Welcome a New Grad Student Partner

Monday, January 12th, 2009

I would like to welcome a new graduate student partner at the Center, Assylbek Zhumadyrov. He plans to work on the Sahana user interface, to make it cleaner and clearer to the end-user.

Assylbek will be posting an introduction here shortly, about his project ideas (in particular, audience and goals). Please welcome him, and please give him lots of feedback on his project ideas.

Draft Project Pre-Proposal Posted

Friday, January 9th, 2009

Document Posted, Comments Welcome

One of the grad students working here has posted her project pre-proposal document, and comments would be most useful: “Web-based resource tracking during a disaster or crisis situation“.