Crafting the SAPO Campus platform, a thousand pixels at a time.
Latest posts

High Performance Javascript - dealing with JSON

No Widget is an Island

Designing Email - Part II

Designing Email - Part I

The amazing "widget" object

The Facebook Witch Project

SAPO Campus keynote from OSL Unesco demonstration session

SAPO Campus session at the UNESCO OSL Seminar

SAPO Campus - Eden Seventh Open Classroom Conference

SAPO Campus leaflet for the UA freshmen


Janeiro 2011

Novembro 2010

Fevereiro 2010

Dezembro 2009

Novembro 2009

Outubro 2009

Setembro 2009

Julho 2009

Maio 2009

Abril 2009

Março 2009

Fevereiro 2009

Dezembro 2008

Novembro 2008

Outubro 2008

Setembro 2008

Terça-feira, 24 de Março de 2009
Drag and Drop Modules
[caption id="attachment_259" align="alignnone" width="412" caption="The Drag and Drop Pattern"]Click to view an animation of the Drag and Drop Pattern[/caption]

Netvibes, iGoogle, My Yahoo, etc. They all have something in common. These applications, among tons of others, rely on a new(ish) interaction paradigm: Drag and Drop Modules. With the advent of faster and more powerful Javascript interpreters included in browsers, developers can now safely leverage the programming language's power in order to build rich Web Applications without the need for Flash.

This interaction paradigm has become relatively well-known since several high-profile players adopted it, and is of particular interest when you wish to provide your users with either a highly customizable portal page or the possibility to significantly rearrange page layout. This is a typical use-case of the SAPO Campus PLE, hence the choice to use this paradigm.

Drag and drop interactions are typically very complex, mainly due to the wide array of event states (or interesting moments) that can be used in a drag and drop operation. According to Yahoo's Design Pattern Library page on the subject, these are the most pertinent interesting moments for Drag and Drop Modules:

On a page with content modules, the following user interface elements (actors) may participate during each interesting moment:

The following grid describes the interactions that may occur in a drag and drop operation and how they should be handled:

[caption id="attachment_256" align="alignnone" width="290" caption="Drag and Drop Interaction Grid"]Yahoo's Drag and Drop Interaction Grid[/caption]

You can read the rest of Yahoo's Design Pattern Library Drag and Drop Modules Page to find out more about how to provide an adequate drag and drop experience, as well as Accessibility and Usability concerns.

We at SAPO Campus are working hard to ensure the drag and drop module is correctly implemented, so as to keep consistence across other Web Applications of the same kind which our prospective users may already be using. If the platform conforms to user expectations and as such lowers the entry point, not only do users get less frustrated but they will actually enjoy using the platform more and become more productive.

The challenge is to offer sufficient differentiation and added value that makes users want to switch platforms. Currently, our strategy is to provide users with a wealth of institution-specific functionality, which, tied together with general purpose widgets you can find on any other platform, should provide tight integration between the user's academic and extra-academic spaces.

Do you think a strong integration between generic and academic content might be reason enough to switch, even if the platform (at first) cannot compete on a feature-by-feature basis with other long-established players in the market? Do users want this kind of integration?

Published by bruno-abrantes às 16:45

Segunda-feira, 23 de Março de 2009
Presenting the 'Awesome Undo Event Queue'
I suppose at some point of their lives, everyone wished they could just CTRL-Z (note: when I say everyone, I really mean geek people). The ability to undo one's actions is a basic principle of HCI, as it gives the user freedom to explore the application and make mistakes. Surprisingly, however, is the number of Web Applications which actually implement an undo feature in their user interface. Rather than the possibility of undoing actions, users are usually presented with the dreaded confirm box:

This kind of behaviour only serves to interrupt the user's workflow, and actually adds little value: most people would just click OK without reading the confirmation text. When developing an application, it's normal to fantasize about users paying attention to your instructions, but you know what? They don't. Also, the confirm box is an omen of something even more terrible: It shouts out to the user: "Be careful, once you click OK there is absolutely NO GOING BACK!".

So how do we solve this mess? How do we provide our users with a safety net that does not interrupt their workflow and also allows them to recover from mistakes? We turn to Javascript, and the 'Awesome Undo Event Queue' (yes, I came up with the name myself, thank you very much).

The implementation I'm proposing is so easy to write and adapt that I'm baffled more Web Applications aren't doing this right now. The code base is taken from this very good post which speaks volumes about this very issue, but I've adapted it in order to provide more flexibility. Everyone should be able to implement this code throughout the SAPO Campus tailoring it to their specific undoing needs. Let's get cracking:

Assume you wanted to add undo support for the deletion of elements. Firstly, include the undo.js file in your page(s). To actually start using the Undo Queue, you need to declare a new UndoQueue object, like this:
var undoDeleteQueue = new UndoQueue();

After this, it's time to start defining your custom functions. Currently, there are two mandatory functions which must be implemented: doInit() and commitToServer().
undoDeleteQueue.doInit = function () {
      // Handler for the delete link.
      $(".widget .closeButton").click( function(event){
           var widget = $(this).parent().parent().parent().parent();
           // Hide the newly deleted widget.

           // Get the ID of the to-do item. If it doesn't have one, throw
           // an error.
           theId = widget.attr("id");
           if(theId == null ){
               alert( "Error: Widget needs an id." );

           // Add the to-do item to the event queue.

        // Handler for clicking on the Undo link function(){
            // Get the last to-do item added to the event queue and un-hide it.
           $( "#" + undoDeleteQueue.EVENT_QUEUE.pop() ).slideDown();
           return false;


The doInit() function handles the initial binding of events to elements of your choice. In this example, we're adding an event to a link on the widget chrome that hides the widget and, most importantly, we add the widget ID attribute to the EVENT_QUEUE property of our undoDeleteQueue object. This property is simply an array that holds all the IDs of widgets the user deletes.
Next up we're defining what happens when the user clicks the undo link. This one is easy. You simply get the last ID out of the EVENT_QUEUE, select it using jQuery and do whatever you want to make it appear again (in this case, the opposite of slideUp, slideDown).

Worthy of note is the function syncEventQueueWithCookie(). If the user opens the application in different browser windows , the actions he performs on one do not sync with the other. This means that, if she deletes a widget in one window, the deletion won't be undoable in the other. We solve that with a cookie. No need to worry too much about this, just make sure you call the function at the end of your doInit() handler. This functionality requires the jQuery Cookie plugin.

Finally, we implement the commitToServer() handler and initialize our undo queue, like this:
// Implements undoQueue.commitToServer
undoDeleteQueue.commitToServer = function() {
    // your AJAX call to a page executing some server-side magic goes here.

// Initializes the object

Inside the commitToServer() function, you would perform some sort of AJAX call to your server that would actually delete the items. This is called by default when the user leaves the page, but you can call call it manually whenever you wish. Afterwards, just initialize the object and you're good to go!

Here is the list of other properties you can set:

Last, but not least, here is the source file. Have fun!

UPDATE: Support for CTRL-Z (and COMMAND-Z for Mac OS X) is in. Use the property supportsCtrlZ to control the functionality.

Published by bruno-abrantes às 15:35

Quinta-feira, 19 de Março de 2009
Assessment Visualization concept
In a previous post I talked about data visualization on widgets, showing a few tests that were being conducted, but some of the configuration options were still being studied. In this post I leave you with a closer view on how the results of student assessment will be visualized.

One of the tools that we aim to provide in the SAPO Campus platform is the visualization of student assessment results. With this, we hope to provide both teachers and students a tool which can convey information in an easy, simple and immediate process. Besides having a fully customizable widget, we will give the user a few pre-customized widgets with the most common visualization defaults.

Basically this tool will allow its users to have an efficient method to visualize their contribution performance on the platform. Its implementation has been studied, so we can reach a result where the user feels that her needs are fulfilled. Armed with the platform’s specification as a basis for our work, we've decided that this tool will appear as a widget, which can be customizable so that it can display the desired visualization. This customization will be based on the user’s choices through the widget’s edit menu, which will filter the data to show.

The menu was designed as an accordion with 5 areas which will display the different possible options:

The first area, “Who”, will allow the user to choose the person, group, or both, whose data she wishes to view.

In the “Services” area there will be some options presented as checkboxes. These will allow the user to choose the platform’s services (videos, photos, blogs) corresponding to the assessments she wishes to see.

“Time period” is the third area, and here the user can choose whether she wishes to view the data throughout the subject's full timeline, or just a determined time frame.

The “Evaluators” area offers the user choice on which people conducted the actual assessments, in this case the teacher, students or both.

The last area is the “Chart” options, where the user can choose the data format (quantity or percentage), and based on this choice the chart type selection will be made.

The development will continue, now based on a little hack (which seems to have been altered, but I guess Bruno will post something about it soon :D).

Now it's time to keep on learning some jQuery moves!

Published by bruno-abrantes às 17:23

Domingo, 15 de Março de 2009
A new theme, a new life!
A few days ago we made the decision to begin writing our posts in English, since our project has recently sneaked past airport security and impressed quite a lot of people outside of Portugal. When we finally started writing, we noticed something was amiss: the blog theme was still in Portuguese, which would make navigation a little more difficult than it needs to be.

So we proudly present this new theme, with a clean design which makes a bold statement (at least I like to think so). We would very much like to hear your opinions on this one, particularly if you find any bugs (the design was kind of a rush job, I completely skipped browser testing!).

Also, we should now be fully connected to Twitter, so if you follow @sapocampus you should get links to our posts firsthand. We won't just use the account for post spamming, of course, so follow us anyway! There's a handy button on the right.

Oh, and please don't click that other button on the right (you know which one). Clicking it will upset the balance of the universe and unweave the very fabric of time! You have been warned!

Published by bruno-abrantes às 01:02

Sábado, 14 de Março de 2009
Database structure, round 1!
Another important meeting took place today. This time we began to sketch up the platform's database structure. I say began, because due to the project's complexity surely more joint meetings will follow. Also, as the database structure grows some individual effort will be required, by each person responsible for the different project's components, in order to join the pieces as a whole.

Here's a picture of the whiteboard at the end of the day, to whom it may interest :)

[caption id="attachment_199" align="alignnone" width="300" caption="Whiteboard - Database structure 1"]Whiteboard - Database structure 1[/caption]

Published by bruno-abrantes às 00:28

Quarta-feira, 11 de Março de 2009
Visualization on widgets
Due to the concept of the SAPO Campus platform, there's a strong widget presence. Based on this, I made a few integration tests of Google's Visualization API with widgets built using the UWA. This combination is used on the assessment's results visualization, allowing the users to have visual information about several aspects of their participation.

In these tests I decided to create an example that loads dynamic data from a database. The approach taken is based on two files, a HTML file where I have all the Javascript code that generates the widget and a PHP file that makes the database query and the data conversion to JSON.

And you ask, how do we load the data into the HTML file? Simple, using the UWA's API method UWA.Data.getJson. This method simply calls the PHP file and then converts the data received in JSON format into a Javascript object. Then, all I have to do is build my visualization based on Google's Visualization API methods, which results in this:

Now it's time to keep on working, because there's still a lot to do!

Published by bruno-abrantes às 01:53

Terça-feira, 10 de Março de 2009
Widget Platform Technical Specification
[caption id="attachment_188" align="alignnone" width="450" caption="This diagram shows the overall structure of the Widget Platform"][/caption]

Let's make some sense out of all of this, step by step.

Widgets in the Cloud

This component represents all the widgets that are available for display inside the platform. These should be implemented using the UWA specification, an API made available by Netvibes. Both the location and business logic of these widgets are completely separated from the platform itself, allowing for independent widget design. Besides this, by using UWA to power the widget platform we gain instant access to an already huge library of user-developed widgets, as well as ensure widgets built by our team run in a growing number of platforms supporting the UWA standard: NetvibesiGoogleOSX Dashboard and Windows Vista Gadgets, to name a few.

Widget Server

Based on the open-source Netvibes platforms, the Widget Server comprises two key components:

I've modified some of the original files, in order to make the platform run completely independent of the Netvibes servers, as well as to be able to incorporate in each widget a custom stylesheet which gives it some basic styling rules (which can obviously be overridden by specifying new ones in the widget code).

I'm also considering the possibility of using this same method to add one (or more) Javascript files, in order to include the (most awesome) jQuery library. I've received some complaints from the widget development team that the methods specified by the UWA are too shallow and limited, and they wish to harness the power jQuery offers in order to build more attractive and functional widgets.

Widget Platform

The Widget Platform itself is currently little more than XHTML, CSS and Javascript. In the near future, it will be integrated in a CakePHP application for dynamic behaviour. The widgets are parsed by the Exposition Server, rendered in frame mode and then displayed inside iFrames (yes, I know this sucks, but I couldn't get around it no matter what). The widgets are able to communicate with the platform through this very well documented technique. Once again, I've modified some of the core files in the Javascript Runtime to allow for custom messages to be sent to the platform. The platform receives these messages and decides accordingly on what to do.

The rest of the platform uses jQuery to allow for full interactivity with both the widgets and the platform environment itself. The currently supported features include:

Only partially implemented right now is the 'Add Content' menu, which allows the user to search for widgets (either by full text search or by category lists) and drop them in an area of choice.

Future plans include the ability to select from a list of different area layouts (so the user is not limited to the initial three column layout), support for different themes and customization of the header space. Also in the works is the ability to attribute custom names for areas.

I hope you enjoyed this small technical intro to the widget platform. It is still only in a (very) alpha state, and it should take some rather dramatic leaps in the very near future. If you're interested in seeing the current look and feel of the platform, feel free to check out this screencast I made (it's spoken in Portuguese, but you can pretty much get what is going on).


Published by bruno-abrantes às 18:10

Terça-feira, 3 de Março de 2009
Layout para Apresentações
Layout Sapo Campus
View more presentations from guest25a04f.

Já está disponível na Dropbox o modelo layout para todos as próximas apresentações do Projecto Sapo Campus. Os programas em que está montada é em freehand e no keynote, para além de uma PDF com os modelos definidos. Se houver algum/s voluntário/s para montar em Power Poit, para os meninos do PC seria óptimo.

Dentro da Dropbox em: Sapo Campus/layout para apresentações/...  para além dos modelos para construção da apresentação tem a fonte tipográfica  Myriad Pro Semibold para MAC, para PC vou colocar brevemente. Depois tem também a pasta ficheiro de construção de modelos, para o voluntário/s que quiser fazer em Power Poit; e a pasta imagem Sapos do Campus, que podem usar.

Published by bruno-abrantes às 17:54

About us
Janeiro 2011








todas as tags

subscrever feeds