Michael Feldstein

We have found a post about our MySakai work on Michael Feldstein’s blog (Oracle). He talks about our aims, the technology, the Cambridge get together and future potential.You can find it over here: http://mfeldstein.com/mashing-up-the-lms-the-google-way/

File Manager Proposal

Last week I decided to try and create some Illustrator based designs for a file manager widget.
I had some early ideas like making the widget as small as possible without losing important information.But I also had to fit a bunch of user actions inside the small space that I had set myself.First of all I decided to drop the entire folder structure, so the only thing the user sees is the current folder he is in.But I had to provide the user a way to quickly navigate between the hierarchal map structure so I used the well known “breadcrumb” navigation system.

Things that I thought are needed in a file manager.

• File management
  • All your courses and projects visible on one screen.
  • Remove the entire folder structure
  • A way to quickly add multiple files
  • A way to quickly delete multiple files
  • Adding multiple folders in one go
  • Deleting multiple folders in one go
  • Drag files from site to site
  • Drag files from folder to folder
  • Provide sorting on all the fields
  • Provide sorting on ‘kind’
  • A way to select all files/folders in a folder structure
• Personal Collection management
  • Drag one or multiple files to a collection
  • Delete(‘unchain’) one or multiple files in a collection
  • Adding new sub collection folders
  • Create new collections
  • Delete entire collections, but when doing so not to delete the files
  • Sorting collection content
  • A way to select all files/subcollections in a collection
  • Drag files from collection to collection
  • Drag sub collections from collection to collection
• Information on a file I provided in the design.
  • Icon + link to resource
  • File name + link to resource
  • Size of the file
  • The last changed date
• Information on a folder I provided in the design.
  • Icon + link to the folder content
  • Folder name + link to the folder content
  • Number of items present in the folder
  • The last changed date

Screenshots

This screenshot shows you files in a folder plus the ‘my collections’ overview.

This screenshot shows you files in a folder, but hides the ‘my collections’ section.When this happens the option to drag files/folders into collections is disabled.

This shows the collection viewer, which contain a mini file viewer in order to allow the user to drag files/folders in a collection.

Workflow

Workflow

New membership tool

For the moment, we had been using the existing Membership tool as content for the My Courses & Projects page (used in the top navigation). This approach does have a couple of disadvantages:

• In order to run this tool in /flat, we need to apply a small patch to allow the to link to /flat/site.html instead of /portal/site. This creates the issue that portal en flat can’t be fully run next to each other
• This tool looks very old and needs a refresh for every action. It completely collides with the new look and the Web 2.0 approach.

 

 

These reasons have given us the idea to try and write a “new” membership tool, with a better design and more Ajax style interaction. We decided to build this tool as a widget. This was first of all a test on how long it would take to make a real tool with the widget approach.I first did the design on paper which was quite easy and took about 2 hours. Then we still had to add some Java services we didn’t have in place, like getting the list of joinable courses and projects, joining one and unjoining one. This took about 2 hours too and it works like this:

• To request a list of joinable sites, do an Ajax GET request to /sdata/mcp?action=joinable
• To join a specific site, do an Ajax POST request to /sdata/mcp with parameters action=join and siteid=specificsiteid
• To leave a specific site, do an Ajax POST request to /sdata/mcp with parameters action=unjoin and siteid=specificsiteid

The next thing was doing the implementation itself. We wanted to have a switch between current and joinable sites, for which we choose a tab approach. We also wanted to add an instant search functionality, which searches for your search query on every character you enter into the searchbox and filters the sites shown on the screen.
 

 

 

 

Implementing this widget into an HTML page can be done by just adding this piece of HTML to the file and Sdata will insert this widget when the page is loaded:

 

 <div id=”widget_coursesandprojects” class=”widget_inline”></div>

 

Making the design in HTML and implementing all the functionality into the widget took about 4,5 hours.  So we succeeded in building an entire (better than before looking) tool in only 1 day, from paper design to implementation into the HTML page.