Sakai09 Osp Preconference Afternoon Templates

544 views

Published on

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.

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
544
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sakai09 Osp Preconference Afternoon Templates

  1. 1. OSP Preconference Workshop:Portfolio Templates<br />Janice Smith, Education Consultant, Three Canoes<br />Sean Keesler, Education Consultant, Three Canoes<br />
  2. 2. Objectives<br />Be able to create a portfolio template using a variety of content sources<br />Understand the role of XSL in Portfolio Templates<br />Be able to capture the raw XML needed to create a portfolio template<br />Be able to set up a development environment for template development<br />Be able to implement a given XHTML design using OSP portfolio templates<br />Be able to iterate through the cells of a matrix in an orderly manner <br />July 2009<br />2<br />10th Sakai Conference - Boston, MA, U.S.A.<br />
  3. 3. Portfolio Template XML and XSL<br /><ul><li>When Sakai renders a portfolio, it assembles an XML document behind the scenes from a number of inputs (wizards, matrices, resource files, form items)
  4. 4. Unlike forms, there are NO default renderer (template outline) for a portfolio
  5. 5. Use a “passthrough” xsl as a custom renderer to capture the raw form XML
  6. 6. Use that as your XML input in an XML IDE to create your own templates.</li></li></ul><li>Start with the End in Mind<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />4<br />Do your design before you start.<br />XHTML web design with “example” content should work outside of OSP before you try to implement it IN OSP.<br />Identify all of the assets (css, images, js files) needed<br /> Implement the design without portfolio owner content<br />
  7. 7. Problem for this Workshop<br />Students complete one or more matrices related to their program.<br />Portfolios are reviewed in two ways:<br />Students present a version of their portfolio in person in front of a small group and need a “Powerpoint-like” version<br />Faculty read a more in depth version of the same portfolio after the small group presentation.<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />5<br />
  8. 8. Design for this Workshop<br />S5 Presentation system <br />Single HTML file with multiple &lt;div&gt;’s<br />Each &lt;div&gt; contains “slide” information and “handout” information.<br />When loaded in a browser, JavaScript files and CSS files present each slide’s “talking points” (without “handout” narrative) with intuitive navigation.<br />Alternative view of the presentation displays the entire presentation (with “handout” narrative) as a printable page with “handout” narrative. <br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />6<br />
  9. 9. S5 Presentation System<br />Explore source code for “s5-blank.html” <br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />7<br />
  10. 10. Modifications to make<br />For each matrix the student adds to their portfolio, create a series of slides.<br />For every matrix cell with information in it, display a portfolio slide that contains:<br />The cell name<br />The student’s reflection talking points<br />Links to any attached files in a column on the right side of the slide<br /> Include the longer narrative on a printable version of the presentation.<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />8<br />
  11. 11. Anticipated Portfolio Inputs<br />The entire contents of <br />1 or more Matrices<br />All cells of the matrices:<br />allow students to attach files as well as complete a Reflection form<br />allow faculty to add Feedback and Evaluation forms<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />9<br />
  12. 12. Anticipated Form Schema<br />All forms may have the following fields:<br />value – a number picked from a set of radio buttons <br />0,1,2 or 3<br />shortText – maximum 1200 characters of rich text (may include HTML entities)<br />description – a long rich text field<br />None of the fields are required to be filled out<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />10<br />
  13. 13. In reality<br />Based on custom form renderers we know that:<br />Reflection uses “shortText” and “description”<br />Evaluation uses “value” and “description”<br />Feedback only uses the “description”<br />Note: this has some educational value and simplifies the excercise, but in normal implementation, these forms are likely to have different schema.<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />11<br />
  14. 14. Assets Inventory<br />1 Background Image<br />bodybg.gif<br />5 CSS files<br />slides.css, outline, print.css, opera.css, pretty.css<br />1 JavaScript file <br />slides.js<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />12<br />
  15. 15. Building a Template Stylesheet<br />After your XHTML design is done:<br />Step 1: Build “Passthrough” Template and capture example portfolio XML<br />Step 2: Build an XSL stylesheet that implements the basic design with static content<br />Step 3: Build an XSL stylesheet that replaces static content with student content<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />13<br />
  16. 16. Build a “passthrough” template and capture example PORTFOLIO xml<br />Building a Portfolio Template: Step 1<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />14<br />
  17. 17. Step 1: Use Sakai to Identify Inputs<br />Build a template that identifies:<br />all supporting files from design asset inventory (1 background image, 5 CSS files and 1 JavaScript file)<br />all possible student inputs (1 or more matrices)<br />The passthrough XSL stylesheet<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />15<br />
  18. 18. Step 1: Create a Sample Portfolio<br />Create a new portfolio using the passthrough template:<br />adding files<br />filling out forms<br />completing matrix cells and wizards as necessary<br />More content is BETTER<br />If you can add more than one one type, do it!<br />View your portfolio and capture its source code in an XML file (passthrough.xml)<br />Format the XML and save the file.<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />16<br />
  19. 19. Step 1: Demo and Hands on<br />Watch me!<br />You do it!<br />Identify what happens to the portfolio XML when a new matrix is added to the portfolio<br />Identify happens to the portfolio XML when a new form or file is added to a matrix cell<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />17<br />
  20. 20. Step 1: Hands on – Explore the XML<br />You do it!<br />Identify the XPATH expression for the name of this portfolio<br />Identify the XPATH expressions for each supporting files’ URI<br />Identify the parts of the “matrix” XML<br />Identify the relationship between matrix scaffolding and cell information<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />18<br />
  21. 21. Questions about:<br />Portfolio Templates<br />Portfolio Design<br />Passthrough XML<br />XSL<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />19<br />
  22. 22. Build an XSL stylesheet that implements the basic design with static content<br />Building a Portfolio Template: Step 2<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />20<br />
  23. 23. Step 2: Implement the Basic Design<br />Set up a transformation scenario in OxygenXML to transform the passthrough XML with a new XSL stylesheet<br />Replace the passthroughstylesheet with one that implements the basic design (see the “s5-blank.html” file (handouts) for a very basic S5 presentation)<br />Use XSL/XPATH to replace static references to JavaScript, CSS and design image files<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />21<br />
  24. 24. Step 2: Identifying file URI’s<br />The &lt;presentationFiles&gt; section of the portfolio XML contains elements for each supporting files named in the template.<br />The name of each “child” element is determined by the template author in Step 4 of the process.<br />The “name” entered for the supporting file is the element name in the XML<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />22<br />
  25. 25. Step 2: Demo and Hands-on<br />Watch me!<br />Set up my transformation scenario<br />You do it!<br />Set up your transformation scenario<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />23<br />
  26. 26. Step 2: Code Review<br />Discussion of XSL iterations:<br />matrices_S5_v1.1_step1.xsl<br />Declaration of output DOCTYPE & output method<br />matrices_S5_v1.1_step2.xsl<br />Main template outputs the contents of s5-blank.html<br />Note the static references to supporting files<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />24<br />
  27. 27. Step 2: Code Review<br />Discussion of XSL iterations:<br />matrices_S5_v1.1_step2a.xsl<br />Replace static references with XPATH/XSL<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />25<br />becomes:<br />
  28. 28. Step 2: Demo and Hands On<br />Watch me!<br />Transform the passthrough XML file with the new stylesheet in OxygenXML<br />You do it!<br />Transform the passthrough XML with a new stylesheet in OxygenXML<br />Identify the steps needed to change the background image.<br />Attach a new stylesheet that changes the font-family to Times New Roman in the footer.<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />26<br />
  29. 29. Step 2: Implement in Sakai<br />Copy the Passthrough template in Sakai<br />Upload your new stylesheet and use it as the Template Outline for your “Step 2” template. <br />Create a portfolio using your “Step 2” template and verify it resembles “s5-blank.html”<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />27<br />
  30. 30. Step 2: Demo and Hands On<br />Watch me do it!<br />Copy the Passthrough template and give it a new name (Step 2 - Design w/ Static Content )<br />Switch the template outline to use the new XSL stylesheet<br />Create a “Step 2” portfolio using this template and verify its output<br />You do it!<br />Create your own “Step 2” portfolio<br />Add another &lt;div&gt; for “evaluations” in the “handouts” section of the slide design.<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />28<br />
  31. 31. Questions about:<br />Supporting Files<br />XML<br />XPATH<br />XSL<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />29<br />
  32. 32. Build an XSL stylesheet that replaces static content with student content<br />Building a Portfolio Template: Step 3<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />30<br />
  33. 33. Step 3: Add Portfolio Name and Description<br />Discussion of stylesheet iterations<br />matrices_S5_v1.1_step3.xsl<br />Replaced footer content with the Portfolio Name and Description<br />Replaced first slide information with Portfolio Name and Description<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />31<br />
  34. 34. Step 3: Demo and Hands On<br />Watch me!<br />Transform the passthrough XML with this stylesheet<br />You do it!<br />Transform the passthrough XML with this stylesheet<br />Display a “disclaimer” slide that will be the 2nd slide on every portfolio created with this template.<br />Display the portfolio owner’s name in the footer<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />32<br />
  35. 35. Step 3: Iterating through the matrix<br />Discussion of stylesheet iterations<br />matrices_S5_v1.1_step3a.xsl<br />Loop though the matrix scaffolding “criteria” (rows of the matrix)<br />Loop through the matrix scaffolding “levels” (columns of the matrix)<br />Find the matrix cell id that has each combination of “rootCriterion” id and “level” id.<br />Check if the cell is empty (no artifacts)…if not, we will format that cell with another template <br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />33<br />
  36. 36. Step 3: Applying templates to Cells<br />Discussion of stylesheet iterations<br />matrices_S5_v1.1_step3a.xsl<br />A “cell” is represented by a “node set” or “tree fragment” of the whole XML document and has with many parts<br />It is useful to create a separate template to handle the display of such complex fragments<br />Reflections and attachments in the cell is also represented by node sets and are also handled with separate templates.<br />Reflections have can be handled with two template “modes” one for displaying the shortText and one for displaying the narrative description (for the handouts). <br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />34<br />
  37. 37. Step 3: Demo and Hands On<br />Watch me!<br />Transform the passthrough XML with this stylesheet<br />You do it!<br />Transform the passthrough XML with this stylesheet<br />Add the evaluation “value” and “description” to the end of the handout section of each slide.<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />35<br />
  38. 38. Step 3: Demo and Hands On<br />Watch me do it!<br />Copy the Passthrough template and give it a new name (Step 3 – Student Portfolio)<br />Switch the template outline to use the new XSL stylesheet<br />Create a “Step 3” portfolio using this template and verify its output<br />You do it!<br />Create your own “Step 3” portfolio<br />Add additional forms and files to your matrices and observe the change in your portfolio<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />36<br />
  39. 39. Questions about:<br />Matrix XML<br />XPATH<br />XSL<br />Portfolio Templates<br />Portfolios<br />July 2009<br />10th Sakai Conference - Boston, MA, U.S.A.<br />37<br />

×