//mysite.du.edu/~mschwart/ICT4540/Homework/HW4-1.png
Possible problem 1 fragment
//mysite.du.edu/~mschwart/ICT4540/Homework/HW4-2.png
Possible problem 2 fragment
//mysite.du.edu/~mschwart/ICT4540/Homework/HW4-3.png
Possible problem 3 fragment

ICT-4540 Homework 4

Purpose

This homework exercise allows you to explore the basics of XML Stylesheet Language (XSL) transformation, which allows manipulation of the XML document, rather than just styling it.
You will create an HTML (with balanced tags) table of the presidents, then sort them by party, and then add a portrait!

What to Hand In

Hand in your XSL stylesheet, the XML document as modified to apply the stylesheet, and a browser screenshot of the XML document as interpreted and displayed by the browser after applying the transformation for each problem below.

Problems

  1. A Table Of Presidents: Convert the USPresidents.xml to an (X)HTML table
    1. Begin with the USPresidents.xml and presidents.css files from a previous problem. Make a copy, because we will change these in new ways.
    2. Attach an XML stylesheet called president_table.xsl to the XML document
    3. Rename the css file to president_table.css.
    4. Create an xml transform in the file president_table.xsl and create a template to match the root element (see note on whether to use XSL version 1.0 or 2.0)
    5. Within the root element template, establish the html root element in the output, the head element, its title, link to the president_table.css stylesheet; the body element, and its h1 element. The title and h1 element content should be Table of US Presidents
    6. After the h1 element, you will invoke apply-templates to all the nodes matching each president element (presidents/president).
      Create the template that matches each president, and just for now, output a paragraph whose content is the value-of the President name.
      At this point, if you view the document in your browser, you should see a list of the US President names, in order.
    7. Replace the president match template content with creation of a table. Be sure to include columns for the President name, birthday, took_office, left_office, and party. Do this by having the table structure in this template, and then apply-templates to each field in turn to create the table cell. Create these templates as well; these should be very simple templates, which place the content in a table cell, with an appropriate class.
    8. Update the style sheet to make a reasonable presentation
    9. #1 Extra challenge: Can you add the set of Vice Presidents for each President nicely??
    10. #2 Bonus: Can you construct an element and attribute to make the class for each party match the party name? If so, your CSS can color parties by party name
  2. Sort Presidents By Party
    1. Make a copy of the USPresidents.xml file, and the president_table.xsl files from Problem I
    2. Make a one-line change to the copy of president_table.xsl to make the Presidential table be sorted by party.
    3. Your output from this exercise is the transform (xslt file), and a screen shot of the result displayed in one browser
  3. Twenty-First Century Presidents
    1. Begin with the USPresidents.xml and presidents.css files from a previous problem. Make a copy, because we will change these in new ways, different than the other problem.
    2. Attach an XML stylesheet called president_21c.xsl to the XML document
    3. Rename the css file to president_21c.css
    4. Find (and download) a small portrait of every US President who was in office during the 21st century. Save them all in the same format (e.g., GIF, JPG, PNG), and name them with the number of the US President (e.g., the Bill Clinton portrait would be stored as, say, 42.jpg)
    5. Create a transform that is similar to that in the first (or second) problem, except that it must qualify which presidents go to the apply-templates, and it must add a column for the US President portrait. The pictures you've saved become the src attribute for the img tag in your table cell.
    6. Modify the president_21c.css stylesheet (and, if necessary, your images) to make a reasonable presentation, including the new columns. In particular, the image cells should be presented sized alike.

Notes

Evaluation

Criteria Weight
Problem I, XML with changes 15
Problem I, XSLT to display President table 30
Problem I, Browser screenshot (one page including title and G. Washington) 10
Problem II, XSLT 10
Problem II, Browser screenshot (one page,including F. D. Roosevelt) 05
Problem III, XML 10
Problem III, XSLT 15
Problem III, Browser screenshot (one page) 05
Problem I, Bonus: Vice Presidents as elements in a column +6
Problem I, Bonus: Coloring by party +10