COAP:COAP-2180/week6: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 152: Line 152:


; Tools
; Tools
* http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html (Online editor)
* https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html (Online editor)
* [https://inkscape.org/en/ Inkscape] (should be installed on your computer)
* [https://inkscape.org/en/ Inkscape] (should be installed on your computer)


Revision as of 22:31, 23 April 2017

Week 6

Week six will focus on introducing some popular XML applications

Main topics:

  1. Discussion of the exam
  2. Discussion of the term project
  3. XML namespaces (short recall)
  4. Introduction to static SVG and SMIL animations
  5. 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

ID attributes require unique values. Below is an example that demonstrates use of an ID an IDREF, and an IDREFS attribute in order to create links between persons. 

<?xml version = "1.0"?>
<!DOCTYPE Folks [
	<!ELEMENT Folks (Person*)>
	<!ELEMENT Person (Name,Email?)>
	<!ATTLIST Person Pin ID #REQUIRED>
	<!ATTLIST Person Friend IDREF #IMPLIED>
	<!ATTLIST Person Likes IDREFS #IMPLIED>
	<!ELEMENT Name (#PCDATA)>
	<!ELEMENT Email (#PCDATA)>
	]>
<Folks>
    <Person Pin = "N1">
      <Name>Someone</Name>
    </Person>

    <Person Pin = "N2" Friend = "N1">
      <Name>Someone else</Name>
    </Person>
    
    <Person Pin = "N3" Likes = "N2 N1">
      <Name>Fan</Name>
    </Person>
</Folks>

XSLT code snippets for embedding pictures

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.

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

Tools
Resources

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 5/6

Unless you are behind with homework, pick only one.

Homework 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 template 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
  • 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:

  • Wednesday 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.

Homework 6 (SVG)

Due: Before start of class, Monday week 7

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

Upload: all files

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2180/week6&oldid=61950"