OSP Preconference Workshop:Portfolio Templates

Janice Smith, Education Consultant, Three CanoesSean Keesler, Education Consultant, Three Canoes

10th Sakai Conference - Boston, MA, U.S.A. 2

Objectives

• Be able to create a portfolio template using a variety of content sources

• Understand the role of XSL in Portfolio Templates• Be able to capture the raw XML needed to create a

portfolio template• Be able to set up a development environment for

template development• Be able to implement a given XHTML design using OSP

portfolio templates• Be able to iterate through the cells of a matrix in an

orderly manner July 2009

Portfolio Template XML and XSL

• When Sakai renders a portfolio, it assembles an XML document behind the scenes from a number of inputs (wizards, matrices, resource files, form items)

• Unlike forms, there are NO default renderer (template outline) for a portfolio

• Use a “passthrough” xsl as a custom renderer to capture the raw form XML

• Use that as your XML input in an XML IDE to create your own templates.

10th Sakai Conference - Boston, MA, U.S.A. 4

Start with the End in Mind

July 2009

• Do your design before you start.• XHTML web design with “example”

content should work outside of OSP before you try to implement it IN OSP.• Identify all of the assets (css, images, js files)

needed• Implement the design without portfolio

owner content

10th Sakai Conference - Boston, MA, U.S.A. 5

Problem for this Workshop

• Students complete one or more matrices related to their program.

• Portfolios are reviewed in two ways:• Students present a version of their portfolio in

person in front of a small group and need a “Powerpoint-like” version• Faculty read a more in depth version of the

same portfolio after the small group presentation.

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 6

Design for this Workshop

• S5 Presentation system • Single HTML file with multiple <div>’s• Each <div> contains “slide” information and

“handout” information.• When loaded in a browser, JavaScript files and CSS

files present each slide’s “talking points” (without “handout” narrative) with intuitive navigation.

• Alternative view of the presentation displays the entire presentation (with “handout” narrative) as a printable page with “handout” narrative.

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 7

S5 Presentation System

• Explore source code for “s5-blank.html”

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 8

Modifications to make

• For each matrix the student adds to their portfolio, create a series of slides.• For every matrix cell with information in it,

display a portfolio slide that contains:• The cell name• The student’s reflection talking points• Links to any attached files in a column on the right

side of the slide• Include the longer narrative on a printable version

of the presentation.July 2009

10th Sakai Conference - Boston, MA, U.S.A. 9

Anticipated Portfolio Inputs

• The entire contents of • 1 or more Matrices• All cells of the matrices:• allow students to attach files as well as

complete a Reflection form• allow faculty to add Feedback and Evaluation

forms

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 10

Anticipated Form Schema

• All forms may have the following fields:• value – a number picked from a set of radio

buttons • 0,1,2 or 3

• shortText – maximum 1200 characters of rich text (may include HTML entities)• description – a long rich text field

• None of the fields are required to be filled out

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 11

In reality

• Based on custom form renderers we know that:• Reflection uses “shortText” and “description”• Evaluation uses “value” and “description”• Feedback only uses the “description”

• Note: this has some educational value and simplifies the excercise, but in normal implementation, these forms are likely to have different schema.

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 12

Assets Inventory

• 1 Background Image• bodybg.gif

• 5 CSS files• slides.css, outline, print.css, opera.css,

pretty.css• 1 JavaScript file • slides.js

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 13

Building a Template Stylesheet

• After your XHTML design is done:• Step 1: Build “Passthrough” Template and

capture example portfolio XML• Step 2: Build an XSL stylesheet that

implements the basic design with static content

• Step 3: Build an XSL stylesheet that replaces static content with student content

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 14

BUILD A “PASSTHROUGH” TEMPLATE AND CAPTURE EXAMPLE PORTFOLIO XML

Building a Portfolio Template: Step 1

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 15

Step 1: Use Sakai to Identify Inputs

• Build a template that identifies:• all supporting files from design asset

inventory (1 background image, 5 CSS files and 1 JavaScript file)• all possible student inputs (1 or more

matrices)• The passthrough XSL stylesheet

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 16

Step 1: Create a Sample Portfolio

• Create a new portfolio using the passthrough template:• adding files• filling out forms• completing matrix cells and wizards as necessary

• More content is BETTER• If you can add more than one one type, do it!• View your portfolio and capture its source code in

an XML file (passthrough.xml)• Format the XML and save the file.

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 17

Step 1: Demo and Hands on

• Watch me!• You do it!• Identify what happens to the portfolio XML

when a new matrix is added to the portfolio• Identify happens to the portfolio XML when a

new form or file is added to a matrix cell

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 18

Step 1: Hands on – Explore the XML

• You do it!• Identify the XPATH expression for the name of

this portfolio• Identify the XPATH expressions for each

supporting files’ URI• Identify the parts of the “matrix” XML• Identify the relationship between matrix

scaffolding and cell information

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 19

Questions about:Portfolio Templates

Portfolio DesignPassthrough XML

XSL

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 20

BUILD AN XSL STYLESHEET THAT IMPLEMENTS THE BASIC DESIGN WITH STATIC CONTENT

Building a Portfolio Template: Step 2

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 21

Step 2: Implement the Basic Design

• Set up a transformation scenario in OxygenXML to transform the passthrough XML with a new XSL stylesheet

• Replace the passthrough stylesheet with one that implements the basic design (see the “s5-blank.html” file (handouts) for a very basic S5 presentation)

• Use XSL/XPATH to replace static references to JavaScript, CSS and design image files

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 22

Step 2: Identifying file URI’s

• The <presentationFiles> section of the portfolio XML contains elements for each supporting files named in the template.

• The name of each “child” element is determined by the template author in Step 4 of the process.

• The “name” entered for the supporting file is the element name in the XML

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 23

Step 2: Demo and Hands-on

• Watch me!• Set up my transformation scenario

• You do it!• Set up your transformation scenario

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 24

Step 2: Code Review

• Discussion of XSL iterations:• matrices_S5_v1.1_step1.xsl• Declaration of output DOCTYPE &

output method

• matrices_S5_v1.1_step2.xsl• Main template outputs the contents of

s5-blank.html• Note the static references to supporting

files

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 25

Step 2: Code Review

• Discussion of XSL iterations:• matrices_S5_v1.1_step2a.xsl• Replace static references with XPATH/XSL

July 2009

becomes:

10th Sakai Conference - Boston, MA, U.S.A. 26

Step 2: Demo and Hands On

• Watch me!• Transform the passthrough XML file with the new

stylesheet in OxygenXML• You do it!• Transform the passthrough XML with a new

stylesheet in OxygenXML• Identify the steps needed to change the

background image.• Attach a new stylesheet that changes the font-

family to Times New Roman in the footer.July 2009

10th Sakai Conference - Boston, MA, U.S.A. 27

Step 2: Implement in Sakai

• Copy the Passthrough template in Sakai• Upload your new stylesheet and use it as

the Template Outline for your “Step 2” template.

• Create a portfolio using your “Step 2” template and verify it resembles “s5-blank.html”

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 28

Step 2: Demo and Hands On

• Watch me do it!• Copy the Passthrough template and give it a new name

(Step 2 - Design w/ Static Content )• Switch the template outline to use the new XSL

stylesheet• Create a “Step 2” portfolio using this template and

verify its output• You do it!• Create your own “Step 2” portfolio• Add another <div> for “evaluations” in the “handouts”

section of the slide design.July 2009

10th Sakai Conference - Boston, MA, U.S.A. 29

Questions about:Supporting Files

XMLXPATH

XSL

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 30

BUILD AN XSL STYLESHEET THAT REPLACES STATIC CONTENT WITH STUDENT CONTENT

Building a Portfolio Template: Step 3

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 31

Step 3: Add Portfolio Name and Description

• Discussion of stylesheet iterations• matrices_S5_v1.1_step3.xsl• Replaced footer content with the Portfolio Name

and Description• Replaced first slide information with Portfolio

Name and Description

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 32

Step 3: Demo and Hands On

• Watch me!• Transform the passthrough XML with this

stylesheet • You do it!• Transform the passthrough XML with this

stylesheet• Display a “disclaimer” slide that will be the 2nd

slide on every portfolio created with this template.• Display the portfolio owner’s name in the footer

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 33

Step 3: Iterating through the matrix

• Discussion of stylesheet iterations• matrices_S5_v1.1_step3a.xsl• Loop though the matrix scaffolding “criteria”

(rows of the matrix)• Loop through the matrix scaffolding “levels”

(columns of the matrix)• Find the matrix cell id that has each combination

of “rootCriterion” id and “level” id.• Check if the cell is empty (no artifacts)…if not, we

will format that cell with another template

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 34

Step 3: Applying templates to Cells

• Discussion of stylesheet iterations• matrices_S5_v1.1_step3a.xsl

• A “cell” is represented by a “node set” or “tree fragment” of the whole XML document and has with many parts

• It is useful to create a separate template to handle the display of such complex fragments

• Reflections and attachments in the cell is also represented by node sets and are also handled with separate templates.

• Reflections have can be handled with two template “modes” one for displaying the shortText and one for displaying the narrative description (for the handouts).

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 35

Step 3: Demo and Hands On

• Watch me!• Transform the passthrough XML with this

stylesheet • You do it!• Transform the passthrough XML with this

stylesheet• Add the evaluation “value” and “description”

to the end of the handout section of each slide.

July 2009

10th Sakai Conference - Boston, MA, U.S.A. 36

Step 3: Demo and Hands On

• Watch me do it!• Copy the Passthrough template and give it a new name

(Step 3 – Student Portfolio)• Switch the template outline to use the new XSL

stylesheet• Create a “Step 3” portfolio using this template and

verify its output• You do it!• Create your own “Step 3” portfolio• Add additional forms and files to your matrices and

observe the change in your portfolioJuly 2009

10th Sakai Conference - Boston, MA, U.S.A. 37

Questions about:Matrix XML

XPATHXSL

Portfolio TemplatesPortfolios

July 2009