Your SlideShare is downloading. ×
Sakai09 Osp Preconference Afternoon Templates
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Sakai09 Osp Preconference Afternoon Templates

397
views

Published on

Boston Sakai09 Preconference workshop on OSP templates. You should review the Afternoon Forms presentation as a prerequisite. …

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
397
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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.
  • 3. 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)
    • 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
    • 6. Use that as your XML input in an XML IDE to create your own templates.
  • Start with the End in Mind
    July 2009
    10th Sakai Conference - Boston, MA, U.S.A.
    4
    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
  • 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