COAP:COAP-2180/week5: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(10 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:
'''Midterm - preparation'''
<source lang="XML">
<xsl:template match="image">
  <p> <img src="{.}"/> </p>
</xsl:template>
</source>


URL is defined with an "source" attribute:
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]]
 
'''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 101: 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
* '''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.

Latest revision as of 22: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
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2180/week5&oldid=61945"