virtual hosting

(ˢᵒᶜⁱᵉᵗʸserver) aims to be a platform for developing collaborative applications.

What are the elements of collaboration?

  • People
  • Documents
  • Communication

In a collaboration platform we need features to manage these elements.

One way to manage them is to organize and structure them.

People are organized in groups. Groups are structured into hierarchies. Documents are structured into topics, areas or containers. Communication is structured into topics, threads.

In this article we'll focus on documents and how to structure them.

The primary concept to structure documents in sTeam is a Room. Rooms can be nested, and they can have Doors or Gates to connect them. Doors can be one-way or bidirectional.

Imagine a library, each room is designated to a topic. The room is divided up by shelves, each about a different subtopic. There are doors that lead from one room to the next. Or visit an art-gallery. Again each room is designated to pictures of a certain topic. A guided tour lets you follow a path in one direction from one room to the next.

Now picture yourself as the librarian, or the gallery-curator. Not only will you want to read the books, or look at the pictures, but you are the one to decide on the structure, so you will want to layout the rooms and connect them according to the topics that you cover, and the order in which the gallery should be explored.

We need to find a way to model this kind of structure in a two-dimensional web-interface. The navigation between Rooms, the ability to create and move rooms, creating one-way or bidirectional Doors.

Now we need to look at the documents: There are many kinds of documents:

    markup-text (markdown, html, others)
  • xml, json, csv
  • source-code
  • image
  • audio
  • video
  • binary
  • object (instance of a script)

Some documents consist of different parts:

  • archive (zip, tar.gz)
  • multipart document
  • multilanguage document

We probably want to somehow distinguish those visually.

Again, you are the librarian or gallery-curator and you want to move books and pictures around to their topics. You will add new books, or update them with new editions. You will remove books that are obsolete, or move them into an attic. You may feature some books on a display table, and store others in the shelves.

You may arrange them by title, or by author, or maybe by date.

From this mental model we can extract a few actions that are common to all documents:

  • move
  • rename
  • copy
  • link
  • sort

You have a whole team of librarians, and each one is responsible for a specific area. Your librarians are working together to decide how the books should be structured. They add comments, descriptions, keywords and other attributes. They also decide who should be able to read a book. Is it suitable for children?

  • access control
  • annotations
  • keywords
  • attributes

Lets take a more concrete example: A group of academics working on a research project.

There is code, papers, reports, data, references to other work and to external resources. They will need to be organized in topics according to the different aspects of the research project. As the research progresses, and new things are learned, topics will need to be adjusted, papers rearranged, reports updated, references and connections between topics changed.

The structure lives and evolves. and so do the documents.

In conclusion, there is a lot of activity around document management, and there are many different scenarios possible.

Author :mbaehr   |   size :4081Bytes   |   Publish Date :Feb/7/15/05:49   |   to Top

The projectview is reached from the overview by selecting a project. It shows all tasks in a compact list.

In order to select a project we need to pass the projectid to load the tasks for that project. usually one would do that in the url, but jquery mobile uses the url to decide which section of the file to show as a view.

The solution turned out to be an angular.js service. A service is shared among controllers and in our case has functions to set and get the selected project.

Btw: i discovered a very nice framework called vanilla.js. It is a lot faster than any other frameworks. It is also widely supported and well documented.

Author :mbaehr   |   size :918Bytes   |   Publish Date :Sep/5/12/16:29   |   to Top

We got several comments regarding the usability of the overview. The icons are small and hard to understand and it's not clear what can be seen here. The interface is confusing, to crowded.

It's hard to respond to that. One thing about the overview is that we are more or less treading new ground here. I have not come across any application that provides an overview like this. Most email clients and task managers give you a list of folders/projects and maybe the number of messages/tasks inside and at best an indicator if there are unread messages.

That's simply not enough.

To get a good overview we need to show more information. At a minimum i am not interested in the total number of messages, but how many of them i need to work on.

We want a concise summary of the state of our work.

So i don't know how to make the overview any simpler. Technically there is only one button per project. So as far as interaction is concerned, it is very simple. You can not select the individual icons, but only the project as a whole.

What makes it complex is only the amount if visual information provided. Here i think the tastes can differ a lot. Some people like dense information, some don't.

There is already a suggestion to replace the project list with just the total number of actions per icon for all projects together. Less useful for me personally, but could be provided as an alternative view.

Another thought is to use a tag cloud kind of thing and scale the project buttons according to the number of open tasks in each project.

I am looking for more ideas, however for now i am not working on the overview but focusing on other functionality so that we can complete the MVP and test actual usage.

I am sure the overview will evolve, maybe we find a way to make it less confusing, looking less like clutter. But less information would defeat the purpose. I want more information if we can find a way to fit it in without making it harder to understand.

Author :mbaehr   |   size :2355Bytes   |   Publish Date :Sep/5/12/16:01   |   to Top