COAP:COAP-2180/week5: Difference between revisions
Line 110: | Line 110: | ||
'''Using the editor''' | '''Using the editor''' | ||
* [[Exchanger XML Editor]] (in particular, read the sections concerning XSLT) | * [[Exchanger XML Editor]] (in particular, read the sections concerning XSLT) | ||
* In case you are using another XML editor that can't do XSLT transformations, you | * In case you are using another XML editor that can't do XSLT transformations, you could use the debug tools of IE (hit F12). | ||
'''XSLT and XPath texts''' | '''XSLT and XPath texts''' |
Revision as of 22:34, 14 April 2013
Week 5 COAP 2180
On week five you will continue learning how to transform XML content, e.g. use XSLT to render XML with HTML + CSS
- Elementary XPath and XSLT value extraction
- Some simple XML to HTML node transformation design patterns, e.g. how to deal with pictures
- Use CSS styling for the HTML output
This homework can be part of your term project.
Sample code snippets for embedding pictures
- See also XSLT Tutorial - Basics and the optional XPath tutorial - basics and XSLT to generate SVG tutorial
URL is text of an element:
<xsl:template match="image">
<p> <img src="{.}"/> </p>
</xsl:template>
URL is defined with an "source" attribute:
<xsl:template match="image">
<p>
<img src="{@source}"/><br/>
<xsl:value-of select="."/> <!-- insert a caption -->
</p>
</xsl:template>
Links follow the same logic, identify the HTML result you need, and read this
Code snippets for SVG visualization
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/1999/xhtml"
>
<xsl:output
method="xml"
doctype-system="about:legacy-compat"
omit-xml-declaration = "yes"
encoding="UTF-8"
indent="yes" />
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"></meta>
<title>Anything</title>
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="ELEMENT_THAT_CONTAINS_A_NUMBER">
Something here: <xsl:apply-templates/>
<xsl:variable name="NUMBER" select="."/>
<svg style="background-color:yellow;float:right" width="20" height="100"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg">
<rect x="5px" y="5px" height="{$NUMBER*1.2}" width="10px" fill="green" />
</svg>
</xsl:template>
</xsl:stylesheet>
- See this for a complete example...
Midterm - preparation
For your mid-term exam (Wednesday) you will receive a task like the following one:
Please create a DTD that models the following type of Documents: __________________
- Your model should "capture" the most important information blocks
- Use at least ___ elements
Suggested procedure:
- Sketch out the DTD structure on paper (or with an editor)
- Create the DTD
- Validate the DTD
- Create an XML test file
- Revise DTD if needed
Tips:
- Save frequently
- If you start making revisions to the DTD towards the end of the exam, create a new version of DTD and the XML.
Bonus points:
- Use of attributes and/or DTD entities when appropriate
- Use of some elements for styling longer text, e.g. bullets and paragraphs
- Very complete test files
- Comments in the DTD
Upload the following:
- DTD file
- XML test file
Teaching materials
Tour de XML (cancelled this week)
Demonstration
Using the editor
- Exchanger XML Editor (in particular, read the sections concerning XSLT)
- In case you are using another XML editor that can't do XSLT transformations, you could use the debug tools of IE (hit F12).
XSLT and XPath texts
- XSLT Tutorial - Basics
- DTD tutorial (wiki lecture notes, recall)
- XPath tutorial - basics (optional wiki lecture notes for doing more advanced stuff)
- xml-xslt.pdf (slides)
SVG texts (optional)
- Static SVG tutorial (important)
- Using SVG with HTML5 tutorial
- SVG/SMIL animation tutorial
- XSLT to generate SVG tutorial
Examples files (also on the N: drive)
Textbook chapters
If you find that my lecture notes and slides are incomplete, too short or not good enough, reading either one or both texts is mandatory !
- Ray, Learning XML, Second Edition, Transformation with XSLT chapter
- Ray, Learning XML, Second Edition, XPath and XPointer chapter (pp. 205-213)
- Harold, XML in a Nutshell, XSL Transformations (XSLT) chapter (optional)
These chapters are available through the world classroom.
- For the adventurous
- Follow up the links in the XSLT page.
- XML Category (All XML-related articles in this wiki)
- XML (on Wikipedia)
Homework 5 - Week 5
Task
- Revise homework 4 so that the DTD includes links and pictures. Alternatively, create a new DTD
- Modify or create the XSLT so that it will display pictures and links
- Create a CSS for the generated HTML or improve the existing one, either use inline styles or better: an external CSS file)
- (Optional), output HTML5 including some SVG
Tips:
- Use a rule for each of your elements, otherwise make sure that you include contents using xsl:value-of or {...} within HTML attributes.
- Elements that only include other elements and no text should just be made into <div> .... </div> blocks for styling
- Use an XSLT processor (e.g. in the Exchanger editor) to manually create an HTML file, then look at its structure. You also should validate the file
Deadline and submission:
- Monday week 6 (before start of class)
- Use the world classroom: https://webster.blackboard.edu/
- Submit the *.dtd, the *.xml test files, the *.xslt file, the *.css file, multimedia assets (pictures), an optional optional report file (see below)
Evaluation criteria (roughly)
Work considered as weak:
- Incomplete rendering of elements, e.g. pictures do not show.
Work considered as minimalistic:
- Minimal rendering of elements, e.g. no extra information inserted
- XSLT can deal with pictures and links
- Very minimal CSS
Good work and excellent work (B to A-) may include one or several of the following:
- Inserted comments in the XSLT that explain some (not all of the translation)
- XSLT will add output that is needed to make the XML contents understandable
- A report (e.g. in HTML, word, PDF etc.)
- Good styling (usability)
- Good styling (coolness)
- Almost valid HTML produced
- HTML5 + SVG output
Brilliant work (A)
- Does most of the above, i.e. produces a result that could be used in real life.