COAP:COAP-2180/week5: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(18 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


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


== Midterm - preparation ==
== Wednesday - midterm ==


For your mid-term exam (Wednesday) you will receive a task like the following one:
'''Midterm - preparation'''
 
For your mid-term exam (this 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 36: 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 may install the [https://addons.mozilla.org/en-US/firefox/addon/5023/ XSL Results] Firefox extension. It allows to display the transformation output and more. You also 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)
* [[XSLT to generate SVG tutorial]] (''optional'' wiki lectures notes, <span style="color:red;">new</span>)
* [http://tecfa.unige.ch/guides/te/files/xml-xslt.pdf xml-xslt.pdf] (slides)
'''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)
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 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