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-workshop This 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.

1. OSP Preconference Workshop:Portfolio Templates Janice Smith, Education Consultant, Three Canoes Sean Keesler, Education Consultant, Three Canoes

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 2 10th Sakai Conference - Boston, MA, U.S.A.

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

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

7. 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. 5

8. 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. 6

9. S5 Presentation System Explore source code for “s5-blank.html” July 2009 10th Sakai Conference - Boston, MA, U.S.A. 7

10. 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. 8

11. 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. 9

12. 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. 10

13. 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. 11

14. 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. 12

15. 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. 13

16. 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. 14

17. 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. 15

18. 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. 16

19. 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. 17

20. 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. 18

21. Questions about: Portfolio Templates Portfolio Design Passthrough XML XSL July 2009 10th Sakai Conference - Boston, MA, U.S.A. 19

22. 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. 20

23. 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 passthroughstylesheet 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. 21

24. 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. 22

25. 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. 23

26. 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. 24

27. Step 2: Code Review Discussion of XSL iterations: matrices_S5_v1.1_step2a.xsl Replace static references with XPATH/XSL July 2009 10th Sakai Conference - Boston, MA, U.S.A. 25 becomes:

28. 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. 26

29. 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. 27

30. 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. 28

31. Questions about: Supporting Files XML XPATH XSL July 2009 10th Sakai Conference - Boston, MA, U.S.A. 29

32. 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. 30

33. 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. 31

34. 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. 32

35. 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. 33

36. 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. 34

37. 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. 35

38. 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 portfolio July 2009 10th Sakai Conference - Boston, MA, U.S.A. 36

39. Questions about: Matrix XML XPATH XSL Portfolio Templates Portfolios July 2009 10th Sakai Conference - Boston, MA, U.S.A. 37