sakai09 osp preconference afternoon templates
DESCRIPTION
Boston Sakai09 Preconference workshop on OSP templates. You should review the Afternoon Forms presentation as a prerequisite.There is a packet of downloadable support files for the workshop at:http://threecanoes.com/2009-boston-workshopThis presentation is distributed under the Creative Commons "Attribution Non-Commercial No Derivatives" license.Please post questions about the materials on these presentations to the Sakai portfolio list.TRANSCRIPT
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