COAP:COAP-2180/week6
Week 6
Week six will focus on introducing some popular XML applications
Main topics:
- Discussion of the exam
- Discussion of the term project
- XML namespaces (short recall)
- Introduction to static SVG and SMIL animations
- Discussion of the ePUB format: Quick mention of Calibre, a ePUB generating software and demonstration of Sigil (an ePub editor)
Monday
Discussion of the mid-term
Short discussion of the mid-term.
Discussion of the term project / DTD refinement
The term project will include:
- A DTD that models a "domain of your choice". This domain should be somewhat text-centric, i.e. one must be able to display the data in a meaningful way with an XSLT stylesheet.
- An extensive XML test file
- Rendering in HTML via XSLT + CSS, therefore an .xsl and a .css file for the resulting HTML
- A second rendering in HTML via XSLT + CSS that will filter and (optionally) rearrange some data.
- An XML Schema (week 7) that adds some data constraints
- A report/documentation in HTML, PDF or Word format (at least 1/2 page, but more if you aim for a top grade)
Other constraints
- All elements can be revisions of prior homework
- Prior to turning in the project, the instructor must validate a draft DTD if the project is different from one of the prior homework. This is to prevent both failure and cheating...
On Wednesday, the instructor may discuss with each student if modifications ought to be made to DTDs made for prior homework (ask !)
Due:
- Presentation/demo on Monday week 8
- Final version on Wednesday week 8
ID / IDREF attributes
XSLT 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 (<image>filename.png</image>):
<xsl:template match="image">
<p> <img src="{.}"/> </p>
</xsl:template>
URL is defined with an "source" attribute (<image source="filename.png">Cool picture</image>):
<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
Creating link HTML links with XSLT
Creating links follows the same logic as dealing with pictures.
- Read: 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 (
<a name="....">...</a>) - then create links that point to these (
<a href="#....">...</a>)
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"
New: Read Creating_an_internal_table_of_contents] (two examples that may help)
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...
SVG
- Static SVG tutorial
- SVG/SMIL animation tutorial, Interactive SVG-SMIL animation tutorial
- XSLT to generate SVG tutorial
- Tools
- http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html (Online editor)
- Inkscape (should be installed on your computer)
- Resources
- http://openclipart.org (largest open source clipart collection)
- http://thenounproject.com/ (huge collection of icons)
Wednesday
- SVG (continued ...): Adding an animation to a clipart object.
- Electronic books with Epub
- Time for work on individual projects
Integration of XML languages with namespaces
Textbook chapters
- Harold, XML in a Nutshell, Chapter 4 Namespaces (more informative)
- Learning XML, Chapter "Markup and Core Concept". Namespace are shortly explained in the Elements Section
Homework
Unless you are behind with homework, pick only one.
Homework 6 (SVG)
Due:
- Before start of class, Monday week 7
Target population
- CS students who would like to learn SVG
Task (2 options)
- Option A
- Create some HTML5 contents that include an interesting SVG animation. There should be a least one interactive elements (e.g. a start "button").
- Option B
- Alternatively, create an SVG data visualization made with XSLT.
- Start from a data-rich XML file. There is not need to create a DTD, a well-formed XML file with meaningful tags is enough.
- For the SVG generation you can either use XSLT or use a PHP XML parser (sax, dom or simple) or E4X (Javascript)
- Resources
- Wiki pages: SVG (links), Static SVG tutorial
Upload: all files