reinventing portfolios in sakai 3.0

Reinventing Portfolios in Sakai 3.0

Erica Ackerman, Noah Botimer, Tiffany Marra, Beth Kirschner, Urmila VenkateshUniversity of Michigan

Portfolios in 2.7

2 June 15-17 2010 Sakai Conference - Denver, CO, U.S.A.2

Portfolios in 3.0


4 June 15-17 2010 Sakai Conference - Denver, CO, U.S.A.

What is a portfolio?

• Expressive presentation of a student’s learning?• Collection of learning objects?• Workflow aggregating learning objects over

time?

4

Answer: All of the above


Part I: Portfolio Evolution

• OSP tools need to evolve in order to:• Provide better design usability and flexibility• Provide better integration with other Sakai

tools and functionality• Provide a framework that can cross programs

and courses• Remove existing constraints to provide missing

functionality

5

2009: Portfolio-Related Vignettes• Assess• Document• Own• Empower• Re-purpose• Express• Migrate• Preserve• Customize• Usability• Present

• Collaborate• Guide• Collect• Associate• Reflect• Tag• Evaluate• Share• Report• Workflow• Export



Present & Collaborate & Share

• Sakai 3 sites provide:• Multiple html pages, hierarchical navigation• Site Themes• Collaboration• Duplication (pending)• Sharing• Deletion• Browse/Sort/Filter (pending)• Search• Templates (pending)

7


Present & Collaborate & Share

• Sakai 3 Portfolio sites will provide:• Publish: create persistent public presentation• Print: printable representation of entire site• Export: download as HTML, PDF, …• Comment/Feedback• Tag• Rigidity: adding/removing pages optionally

restricted

8

Slide Title

June 15-17 2010 Sakai Conference - Denver, CO, U.S.A.9

Slide Title


11

June 15-17 2010 Sakai Conference - Denver, CO, U.S.A.

Evaluate & Feedback

• Structured or unstructured• Global or content specific• Inline or attached

11

12


Workflow & Guide

• Easy to define wizard-like workflow• Easy to use wizard-like workflow• Freedom to design & format pages• User-selected learning objects• Automatically bound learning objects (e.g.

assignments)• Tagging• State-full progression (ready, pending, …)• Evaluator & Peer feedback/review

12

Slide Title


15


Collect & Associate & Tag

• Suggestive Collection• Students select content based on suggestions in

presentation templates• Selective Collection• Students select content based on competency based

workflow• Bound Association• Content automatically bound to student’s portfolio

workflow• Tagging • Content associations with workflow competencies or

with each other

15

16


Reflect

• “Reflect anywhere” • Structured Reflection (form based)• Unstructured Reflection (free-text)

16

17


Export & Report

• Exportable content formats (html, pdf, …)• Easy data extraction for reporting

17

18


Part II: Portfolio Application

• A portfolio is…• Expressive presentation of a student’s learning• Collection of learning objects• Workflow aggregating learning objects over

time

• Michigan needs all three, but is currently focused on the first need

18

Expressive Presentation Portfolios

Goal: For an external audience, the portfolio should look like a website, not a Learning Management System.

Currently, default Sakai 3 sites look like part of an LMS.

19


Default View, Not Logged In

20

Default View – Logged In

21

Default View – Edit

22

Michigan Changes – Logged Out

23


Michigan – Logged In

24

Michigan – Edit Page

25

Michigan – Site Creation Wizard

• For testing, added “Use wizard for settings” checkbox• After naming site, user is taken directly to

the Appearance tab of the Site Management page• Link changed from “Return to Site” to

“Continue to Site”• Saving takes you directly to the new site

26


Create Site Dialog

27

Create Site - Appearance

28

Part III: Challenges of Working with Sakai 3

• Developing against a moving target• Learning curve for Git source control

management system• Learning how the environment works

(Jackrabbit, Sling, etc.)• Creating a production system with

JavaScript

29


Joys of Working with Sakai 3• Creating a production system with

JavaScript• Fantastically simple UX development

environment (just edit files and see your changes in the browser)• Easy to experiment with new ideas – just

create a branch in Git

30


How the UX Works: JavaScript Files

• JavaScript files manipulate the markup (display widgets on the page, create and respond to buttons, enter edit mode, etc.)• Some of the most fundamental are:• site.js• site_admin.js• sakai_magic.js

31


How the UX Works: Functional CSS

HTML in skin with functional markup (classes not just for presentation with CSS)

<body id="root" class="fl-centered fl-container sakai_site i18nable">

<img id="preview_exit" style="display:none;" src="/dev/_images/portfolio_preview_exit.png" alt="Click to exit preview" />



<div id="widget_navigationchat" class="widget_inline hide_for_anon">

</div>

…

32

How the UX Works: Examplevar widgetSelector = ".widget_inline";

var insertWidgets = function(containerId, showSettings, context){

// Use document.getElementById() to avoid jQuery selector escaping issues with '/‘

var el = containerId ? document.getElementById(containerId) : $(document.body);

// Array of jQuery objects that contains all the elements with the widget selector class.

var divarray = $(widgetSelector, el);

…

}

33


WidgetsFor our purposes, there are two kinds of widgets:• Widgets for creating the UI (createsite,

navigationchat, siterecentactivity)• Widgets that users can add to a page (video,

youtubevideo, poll)Widgets have their own HTML, CSS, and JavaScript.Beth is working on a widget to allow users to build a form on a page for use in a Workflow type portfolio.

34


Questions?


reinventing portfolios in sakai 3.0

Documents

sakai conference denver

sakai tools

portfolio sites

collection of learning

portfolio evolutionosp

content specificinline

workflow competencies

workflow guideeasy