Reinventing Portfolios in Sakai 3.0 Erica Ackerman, Noah Botimer, Tiffany Marra, Beth Kirschner, Urmila Venkatesh University of Michigan

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

3 June Sakai Conference - Denver, CO, U.S.A. 3

4 June 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

5 June Sakai Conference - Denver, CO, U.S.A. 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 6 June Sakai Conference - Denver, CO, U.S.A. 6

7 June Sakai Conference - Denver, CO, U.S.A. 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

8 June Sakai Conference - Denver, CO, U.S.A. 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 Sakai Conference - Denver, CO, U.S.A. 9

Slide Title June Sakai Conference - Denver, CO, U.S.A. 10

11 June Sakai Conference - Denver, CO, U.S.A. Evaluate & Feedback Structured or unstructured Global or content specific Inline or attached 11

12 June Sakai Conference - Denver, CO, U.S.A. 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 June Sakai Conference - Denver, CO, U.S.A. 13

Slide Title June Sakai Conference - Denver, CO, U.S.A. 14

15 June Sakai Conference - Denver, CO, U.S.A. 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 June Sakai Conference - Denver, CO, U.S.A. Reflect “Reflect anywhere” Structured Reflection (form based) Unstructured Reflection (free-text) 16

17 June Sakai Conference - Denver, CO, U.S.A. Export & Report Exportable content formats (html, pdf, …) Easy data extraction for reporting 17

18 June Sakai Conference - Denver, CO, U.S.A. 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 June Sakai Conference - Denver, CO, U.S.A.

Default View, Not Logged In 20

Default View – Logged In 21

Default View – Edit 22

Michigan Changes – Logged Out 23 June Sakai Conference - Denver, CO, U.S.A.

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 June Sakai Conference - Denver, CO, U.S.A.

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 June Sakai Conference - Denver, CO, U.S.A.

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 June Sakai Conference - Denver, CO, U.S.A.

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 June Sakai Conference - Denver, CO, U.S.A.

How the UX Works: Functional CSS HTML in skin with functional markup (classes not just for presentation with CSS) … 32 June Sakai Conference - Denver, CO, U.S.A.

How the UX Works: Example var 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 June Sakai Conference - Denver, CO, U.S.A.

Widgets For 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 June Sakai Conference - Denver, CO, U.S.A.

Questions? June Sakai Conference - Denver, CO, U.S.A. 35