This document provides an overview of the steps to create an XSL-based portfolio template in Sakai Open Study Portfolio (OSP). It discusses: 1. Creating forms and attaching them to a matrix to collect student data. 2. Building a basic "pass-through" template with the matrix and an image as required elements. 3. Creating a sample portfolio using the template, then modifying the XSL stylesheet to transform the XML output into HTML. The goal is to demonstrate how to leverage OSP's XML structure and use XSL transformations to display the portfolio content. Templates allow presenting student work in customizable, repeatable ways.

1. Getting Started with XSL
Templates
Will Trillich
EPortfolio Wonk, Serensoft
will.trillich@serensoft.com
Attribution Share Alike

2. What’s This Workshop About?
• Turning an image-and-a-matrix-with-
some-forms into a “portfolio” web page
…by getting OSP to reveal its XML
structure so we can build HTML using XSL

3. Who This Is For
• Skills needed to build XSL style sheets:
• Demented Computer-Science type,
Web-Developer (not Designer) brain
• Willing to sling <xml>trees</xml> around
• Understand algorithms
• For-each <xsl:for-each>loops</xsl:for-each>
• If-then-else <xsl:choose>conditionals</xsl:choose>
• And then be willing to dig into a totally different,
declarative programming language: XSL
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 3

4. Prerequisites
• Today you’ll need a sandbox worksite
• You can create one on your own campus
Sakai instance (Needs Resources, Matrix,
Portfolio, Portfolio Templates)
• Or I can hook you up on our Serensoft
sandbox for today’s session
• Have (or create) a matrix, usually
• A simple form or two
• Own a good XML editor (OxygenXML?)

5. With all that out of the way
Where Do We Begin?
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 5

6. First, Choose Your Target
• You’ll go through quite a process…

7. Cultural/Political Steps
• Get your stakeholders together and
discuss everything
• Deliberate about the portfolio objectives
• Deliberate about what content it should
include—and exclude
• Deliberate about its structure
• Deliberate about layout
• Deliberate about the branding and design

8. After The Committee Meetings
• You’ll arrive at a sketch something like this

9. Your Designer Creates HTML
• Web designer takes the sketch and makes
HTML magic accordingly (or purloin some
from www.oswd.org et al)
• Then you take that HTML and break it up
into repeating sections
• Forms X and Y fill this part out over here
• Matrix cells go here, columns and rows go
there
• Portrait image shows up over yonder

10. The Web Developer Makes It Happen
• So how do we make this template work?
• How do we take a matrix with some forms
and conjure up a web page from that?

11. These are
The Steps To Build A Template
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 11

12. MECHANICAL STEPS
• Have something to work with (Matrix, Forms)
• Create a “pass-through” template
• Create a portfolio based on the template,
using your content, and save the XML
• Build your XSL to do magic with that XML
(return to step 1 as needed, for the content
you forgot)
• When it’s ready, replace the pass-through XSL
in the template with your magical XSL
• Bask in the accolades

13. MECHANICAL ITERATION
• Update something to work with (Matrix, Forms)
• Create a “pass-through” template
• Refresh your portfolio, and save the updated
XML
• Tweak your XSL to do magic with that XML
(return to step 1 as needed, for the content
you forgot)
• When it’s ready, replace the pass-through XSL
in the template with your updated XSL
• Bask in the accolades

14. Back On Campus…
• The following slides are what you’ll need
to do back on campus

15. Have Some Forms Available
• Build forms to collect data from your users
• Nice, repeatable structured artifacts
• Forms were previously
called “structured
artifact definitions”
or SADs

16. Start with a Matrix
• Build your matrix
• Couple of rows
• Columns as needed

17. Attach Forms to your cells
• Matrix “edit” > pick-a-cell
• Specify Forms for Reflection, Feedback,
Evaluation or whatever

18. Or just nab a pre-set matrix
• …but for today’s workshop, just import
OSP-Matrix.zip
• From www.serensoft.net/sakai09
• Create some data for OSP to deliver
• Open matrix as user, dive into cells and:
• Fill out some forms
• Attach some files

19. Now what?
• We’ve got a matrix because that’s a
convenient way to structure our portfolio
• We’ve got forms attached to the matrix so
we can collect data at predictable spots
• We’ve got some sample data from filled-
out forms
• Now we build a template.

20. So create a template already
• Let’s say our stakeholders want a portfolio
based on:
• Matrix for structure
• Head-shot/portrait independent of the matrix
• That means our template will require two
ingredients from the student
• “matrix” element will be a matrix
• “portrait” element will be an uploaded image

21. The first thing a template needs…
• (After its name)
• Is an XSL stylesheet
• Which we need to build from scratch, and
thus we don’t have one
• So we pull in the granddaddy of all XSL
stylesheets: passthrough.xsl (also available at
serensoft.net/sakai09 )

22. PassThrough.xsl
• Finds the root object and copies it to the output
<?xml version="1.0" ?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<xsl:copy-of select="." />
</xsl:template>
</xsl:stylesheet>
• Upload that to your resources (mime type text/xml)

23. Now Create Your Template
• Portfolio Template Tool > New
• Give it a name/description
• Basic Template Outline (stylesheet) is
passthrough.xsl
• Two items needed: Matrix, Image
• More info on step 3, next 2 slides
5. No supporting files, for today
• Easy!

24. Details on Template Building, Step 3
• Add Type “Matrix”
• Name (XML Element name) ‘matrix’
• Title (for human-readability) ‘Pick a Matrix’
• Description may also be useful
• Don’t forget to click
“Add to List”!
Becomes the
XML Element
Name

25. Template Building, Detail Step 3 Still
• Add Type “uploaded file”
• Name (XML Element name) ‘portrait’
Becomes the
XML Element
Name
• Mime type ‘image’
• Don’t forget to click
“Add to List”!

26. Save Your New Template
• Now you can create a portfolio based on
your pass-through template!

27. Now Create A Portfolio
• You’ve filled out some forms in the matrix,
so you’ve got something to work with
• Create a portfolio on your new template
• Portfolio tool > Add/Create (2.5 vs 2.6)
• Include your matrix
• Include/upload an image, too
• Now save it… and then view your portfolio

28. Yikes!
• It’s garbage in my browser! Eww!
• It’s exactly what we want! It’s not formatted for
HTML viewing, it’s just naked XML
• Save it to your desktop as a
viewPresentation.xml file

29. Perfect!
• In your local copy of the XML, add line 2:
• <?xml version="1.0" encoding="UTF-8"?>
• <?xml-stylesheet type="text/xsl" href="your-template-here.xsl"?>
• <xml-here>
• ...
• </xml-here>
• Make the href refer to the magical XSL
style sheet you’re working on

30. A Quick Overview Of
How XSL Works
(The fun part!)
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 30

31. www.Serensoft.Net/sakai09
• Check out the
Person.xml file there
• View source, and…
where does all the
formatting come from?
The branding? The
header and the footer?
Not to mention the
presentation of the data
itself!

32. Person.xml view-source
• It’s just the data, so
where does the
formatting come
from?
• It’s the <?xml-
stylesheet> directive!

33. Without the XSL stylesheet
• In Firefox the default
XML rendering would
look like this
• But we can specify an
XSL stylesheet to
render it, instead
• Now we know the
secret to “No style
information”!

34. Open the linked stylesheet
• Click to view the stylesheet itself
• Then view-source to “see” it for real
• Save these files (.xml, .xsl) to your local
filesystem and tinker with them to get the
idea

35. Same idea with the XML from OSP
• Have the XML refer to your XSL stylesheet
• Open the XML in your browser
• Then:
• Tweak your XSL
• Refresh your browser
• Repeat as needed
• Upload your XSL and point the template to
it – and you’re off to the races!

36. Have Fun Tinkering With Your Newfound
OSP Template Savvy
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 36