COAP:COAP-2180/week5: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Week 5 [[Help:COAP-2180|COAP 2180]] ==
== Week 5 [[Help:COAP-2180|COAP 2180]] ==


On week five you will continue learning how to transform XML content, e.g. use XSLT to render XML with HTML + CSS
== Monday ==
* 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
* Some SVG


This homework can be part of your term project.
Easter holiday


=== Sample code snippets for embedding pictures ===
== Wednesday - midterm ==
* See also [[XSLT Tutorial - Basics]] and the '''optional''' [[XPath tutorial - basics]] and [[XSLT to generate SVG tutorial]]


URL is text of an element (<code><image>filename.png</image></code>):
'''Midterm - preparation'''
<source lang="XML">
<xsl:template match="image">
  <p> <img src="{.}"/> </p>
</xsl:template>
</source>


URL is defined with an "source" attribute (<code><image source="filename.png">Cool picture</image></code>):
For your mid-term exam (this Wednesday) you will receive a task like the following one:
<source lang="XML">
<xsl:template match="image">
  <p>
      <img src="{@source}"/><br/>
      <xsl:value-of select="."/>  <!-- insert a caption -->
    </p>
</xsl:template>
</source>
 
Links follow the same logic, identify the HTML result you need, and read [[XSLT_Tutorial_-_Basics#Producing_HTML_Links|this]]
 
=== Links ===
 
Creating links follows the same logic as dealing with pictures.
 
* Read: [[XSLT_Tutorial_-_Basics#Producing_HTML_Links Producing|HTML links]] (chapter from the XSLT Tutorial - Basics)
 
=== Internal tables of contents ===
 
Creating an internal table of contents is a bit more complicated. You must
* create internal anchors (<code><a name="....">...</a></code>)
* then create links that point to these (<code><a href="#....">...</a></code>)
 
Try to find a solution on the web, e.g. on with a google search like "stackoverflow xslt TOC". Make sure to narrow down good answers to ''simple'' solutions. Alternatively, search for "xslt create simple table of content"
 
=== Code snippets for SVG visualization ===
<source lang="XML">
<?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>
</source>
* See [http://edutechwiki.unige.ch/en/XSLT_to_generate_SVG_tutorial#Visualizing_some_numbers this] for a complete example...
 
== Midterm - preparation ==
 
For your mid-term exam (Wednesday) you will receive a task like the following one:


{{quotationbox|Please create a DTD that models the following type of Documents: __________________
{{quotationbox|Please create a DTD that models the following type of Documents: __________________
Line 115: Line 35:
* DTD file
* DTD file
* XML test file}}
* XML test file}}
== Teaching materials ==
''' [[Tour de XML]]''' (cancelled this week)
'''Demonstration'''
* [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cuisine.xml cuisine.xml] - [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cuisine.xsl cuisine.xsl] - [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cuisine.css cuisine.css]
'''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)
* [http://tecfa.unige.ch/guides/te/files/xml-xslt.pdf 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)'''
* [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/ DTD and XML templates example directory]
* [http://tecfa.unige.ch/guides/xml/examples/xsl-simple/ Simple XSLT examples]
'''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.
* [[:Category:XML|XML Category]] (All XML-related articles in this wiki)
* [http://en.wikipedia.org/wiki/Xml 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 <nowiki><div> .... </div></nowiki> blocks for styling
* For debugging, '''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. Alternatively, use IE to look at the HTML transformation.
'''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
* Automatically generated table of contents.
''Brilliant work (A)
* Does most of the above, i.e. produces a result that could be used in real life.

Latest revision as of 21:36, 23 April 2017

Week 5 COAP 2180

Monday

Easter holiday

Wednesday - midterm

Midterm - preparation

For your mid-term exam (this 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