I have now however found a way of enabling the JSLint Validator inside Aptana Studio, which is the IDE in which I write all of my JavaScript code.

You can enable it by doing:

- Open Aptana Studio
- Go to Window > Preferences
- Go to Aptana > Editors > JavaScript > Validation in the left hand menu
- Check “JSLint JavaScript Validator”
- Hit OK
- Go to Window > Show View > Validation
- You’ll see the Validation on the bottom right of the screen
- Now also click Toggle Information and Toggle Warnings (found on the top left corner of the validation pane)
- You’re all set. JSLint will warn you whilst writing code

This is super useful, because I can now track JSLint issues while I’m writing the code, which should improve productivity!

We have managed to get MyCamTools out of the door and it has now been running in production at Cambridge for almost a year now. Reactions have been positive and we have had relatively few reported problems.

In August, we have started working on the UX Improvement project, based on designs made by Nathan Pearson, aimed at improving the Sakai 2.x UX. We have also introduced some Sakai 3 concepts into those screens. You can check the work at http://mycamtools.caret.cam.ac.uk .
I would like to thank Michigan, Indiana, Berkeley and Georgia Tech for their implementation help.

In March, we have started working on Sakai 3 RC 1, which would be a first step towards Sakai 3, and we’re hoping to bring into production this year.  A lot is going on, and it’s a fast moving target right now, so the best way to track the progress is to follow the dev server at http://131.111.21.17:9090/dev/ .

All of this might make more sense if you read through the presentation I recently gave at EuroSakai 2009 in Stockholm which you can find at SakaiEurope-Sakai3.pdf

http://www.youtube.com/watch?v=xs7A_5vHkxo

The quality of this movie isn’t very good, so if you would like to see the entire movie in much better quality, you can download it over here.

This video might be very quick if you have never seen MyCamTools. If you would like to take a look yourself and step through everything in a normal pace, you can just visit http://mycamtools.caret.cam.ac.uk. If you are not a member of the University of Cambridge, you can write me an email (nicolaas.matthijs@caret.cam.ac.uk) and I will create you a Friends account. 

Quick FileUpload is intended for lecturers and allows them to upload one/multiple file(s) into the root folder of the Resources tool for the courses they are an administrator on. This also allows them to upload a set of files quickly into multiple courses. First they need to select the site to upload into, then they need to select the files to upload (you can select multiple files in the Filedialog) and finally you just press the Upload button which will upload all selected files and will also show a progress bar whilst uploading.

The second widget is Quick DropBox. Quick DropBox is intended for students and allows them to hand in one/multiple file(s) intothe dropbox of the courses they are a member of. First they need to select the site they want to hand in to, then they need to select the files to hand in (you can select multiple files in the Filedialog) and finally they just press the Hand in button which will upload all selected files and will also show a progress bar whilst uploading. So the basic functionality of this widget is very similar to the functionality of the Quick FileUpload widget.

Over there, MyCamTools got mentioned :

Then I mentioned the outstanding work of Cambridge University on MyCamTools as a move towards a more user-centered Sakai. I suggested that this would not make Sakai “user-centered” in my strictest definition – but it was a move toward meeting the needs of the student in a way that was useful to them.

During a Sakai Spain User Group meeting, MyCamTools got mentioned again and was shown to the people over there. Apparently, the things we have done addresses a lot of the needs of the Spanish Universities :

We talked about some transition issues from existing LMS systems – it was mostly about user-comfort issues when going from WebCT to Sakai. This is such a common problem and I wish we were better organized for this. I asked to get a list of the needs. Interestingly, many of the needs were actually usability and portal design – I showed them my Cam tools and everyone’s faces brightened up. Ian Boston might find MyCamTools in production in Spain before it is in production in Cambridge

Having someone else to run this in production would be great. It would mean more testing, more user feedback and thus very user centered improvements …

We changed the 1 step process into a 3 step process with a shortcut that allows you to do it in only 1 very short step. The only thing you need to do in the first screen is select your group/role in the university. If you don’t want to run through the entire setup process you can just click the Create Default Dashboard button. This will just create the default dashboard for your group (set in widgets.js). In this case, we removed the pain of selecting widgets you want on your portal page.

If you do want to go through the entire process, you can click the Next button. This will take you to screen 2 which is all about selecting your preferred layout. According to the group you selected, a preferred layout will be pre-selected. These layouts our all defined in widgets.js in this way :

layouts : {
twocolumn : {
name:”Two equal columns”,
widths:[50,50]
}, …

As you can see, you can define your own very random layouts and nothing is hard coded. The numbers in widths will be used to display a preview of the layouts and to construct the real portal page. 

The last step allows you to select the widgets you would like to have on your portal page.  According to the group you selected in step 1, a list of preferred widgets will be pre-selected. After having chosen all of the widgets you want, you can click the Create My Dashboard button. This will then save your settings and load a portal page with the selected layout and selected widgets.

Once you have your portal page set up, you can of course still change the widgets on it and the portal layout. We have kept this process as a 1 step screen. It now allows you to change your layout and add more widgets you don’t have yet.

All of this now has a lot more flexibility and starts getting close to a “Page builder” tool …

The thing you need to do to add a floating widget to a HTML page is add a div/a/button/… with a class named “widget_mountable” and id of “widget_widgetid”. This will then add an onclick event to your div/a/button/… and when you click on it this will lazy load your widget and show it as a floating widget which is dragable and resizable. The floating window is ExtJS based.

A small example. We will try to mount the Moonphase widget:We add this to the HTML page :

<a class=”widget_mountable” id=”widget_moonphase”>Moon phase</a>

When the page loads this will just render the link like this :

When you click on it, it will bring up the window containing the widget

We can drag this widget around, make it bigger, make it smaller, …

We can also close it again. On most browser, pressing the ESC key will also close the widget. We can of course bring it back up again afterwards.

This kind of approach might be used to host a FileManager widget …

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

• 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

 

 

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