Chat widget SAKAI 3

Problem
The chat that SAKAI currently uses in SAKAI 2 is called wookiechat , this chat has not many options ,
a redesign was needed to add more features to the chat widget and give it a better look. During the design
I thought a lot about flexibility and usability , this widget crossed different stages ...
due to the feedback from Nicolaas, John and Oszkar.

Workflow

 
Design descissions:
As beeing a chatter in the past I know what chatters like , they like easy and fast acces and clear overview of the screen ,
that's why I also choose to implement a color feature so users can seperate user A from user B.

There is also the ability to use emoticons during chatting which makes it more attractive and fun.
Another extra is that you can now choose to type in bold , italic or underline ,
this makes it easy for the chatter to highlight phrases or quotes.

Inspiration:
This chatwidget layout is a bit inspired on the iChat application for mac.
Because John liked this application a lot I implemented this look into the new sakai chat.

Poll widget SAKAI 3

Problem
There was need for a poll widget in the new SAKAI , when I started my internship here at CARET it was my first assignment to design a poll widget ,
Oszkar Nagy helped me with the startup and gave me a lot of feedback.

In the previous version of SAKAI there was already a poll available but there were not much functions in it and it was really necessary to
review and redesign the poll ui for the new version of SAKAI..

Workflow

 

 Explanations
There are a lot of features in the poll widget which you will not find on regular polls , you can setup  
when the poll would be displayed and when he will be removed from the page , also you can choose
how the chart is going to look like  the user has the options to choose from a vertical chart, horizontal , pie chart or text only.

These options become visible when the user clicks the advanced settings button ,
then the option menu slides open with an animation.

The start and end date are automatic setup for today's date  ,
when user clicks the date field , a date time picker appears.
Which make it very easy for the user  to navigate to the preferred date.

Another feature is to place a quick placeholder so the user can already setup
a poll with standard data and then edit the data on a later moment.

Standard the user of the poll is able to choose one correct answer ,
the person who sets up the poll can  change this by clicking the "Allow users to select multiple options" check box.

Video widget SAKAI 3

Problem
Thanks  to the fast growing popularity of video and streaming media it is necessary for a modern website to have the ability to add videos ,
in an educational context this might be very useful so teachers can show videos to their students and students ,
researchers can share videos on their personal website inside SAKAI.

 Workflow
 

Explanations

Setup screen:

first , the user enters the url of the video , and the title (optional) , next he has the choise to choose for showing the source , the options are :
don't show the source
guess source from url
use this as source which enables the user to setup a custom source

Next the user who is setting up the video can also decide to track the video analytics ,
preview screen , this feature is not build in yet but can be in the future. More about that later in this article

The user has also the option to insert a placeholder which can be configured on a later moment

Video player

The SAKAI video player supports following video formats: F4V, MP4, M4A, MOV, MP4V, 3GP, and 3G2.
This are also the most used video formats on the web and all type of youtube videos.
The code of the video player is written in flash instead of javascript ,
this because flash offers better support for video than javascript and also offers a flash youtube API.

Video player functions
Of course there are the standard functions there are the standard functions that a videoplayer should have but beyond that there are a few extra functions , with the sakai video player the user has the ability to see then next frame or the previous frame , also there is a build in function to scrub through the video using the slider  , to perform this action the user must drag and drop the slider to the specific timeframe that he likes to see. Then the video will jump to that given time and start playing again.

Changes happened during development:

Copy url from clipboard:
as you can see in the setup screen , there is the ability to paste a copied url of the clipboard...this feature is not included in the final version  ,
this because of the feature was only possible in interet explorer.

Playing multiple videos on same page:
For the programming side of the videoplayer I used flash , and for the youtube videos I used the youtubeloader API from youtube...
due to bugs in the api , or shortcomings in the  API it was not possible to add more than one video on a html page ,
that 's why the SAKAI videoplayer is only used for non youtube videos.
When this bug get fixed in the future , SAKAI videoplayer will be used for youtube and non-youtube videos.