COAP:COAP-2180/week6: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
mNo edit summary
Line 9: Line 9:
# Discussion of the exam  
# Discussion of the exam  
# Discussion of the term project
# Discussion of the term project
# XML namespaces. For example, you will learn that one can integrate XML with XHTML and the other way round
# XML namespaces (short recall)
# Introduction to static SVG and SMIL animations
# Discussion of the ePUB format: Use of Calibre, a ePUB generating software and Sigil (an ePub editor)
# Discussion of the ePUB format: Use of Calibre, a ePUB generating software and Sigil (an ePub editor)
# Timed text and creating captions for videos in Flash CS6


== Monday ==
== Monday ==
Line 37: Line 37:
* Presentation/demo on Monday week 8
* Presentation/demo on Monday week 8
* Final version on Wednesday week 8
* Final version on Wednesday week 8
=== SVG ===
== Wednesday ==
* Electronic books with Epub
* Time for work on individual projects


=== Electronic books ===
=== Electronic books ===
Line 54: Line 61:
'''Documentation'''
'''Documentation'''
* Each tool (Calibre, Sigil) has extensive help + tutorials in various forms ....
* Each tool (Calibre, Sigil) has extensive help + tutorials in various forms ....
== Wednesday ==
(also will include time for hw and term project start)


=== Integration of XML languages with namespaces ===
=== Integration of XML languages with namespaces ===
Line 68: Line 71:
* Learning XML, Chapter "Markup and Core Concept". Namespace are shortly explained in the Elements Section
* Learning XML, Chapter "Markup and Core Concept". Namespace are shortly explained in the Elements Section


=== Timed text and Flash video captions ===
== Homework ==


'''Hands on'''
Unless you are behind with homework, pick only one.


Add captions to a Flash Video with Flash CS6
=== Homework 6 (SVG) ===


Start from the following example files if you like. In particular, we suggest adapting the XML file
'''Due:'''
* Before start of class, Monday week 7'''


* [http://tecfa.unige.ch/guides/flash/ex/component-video-intro/flash-cs3-video-simple-server-caption2.html flash-cs3-video-simple-server-caption2.html]
'''Target population'''
* Source: [http://tecfa.unige.ch/guides/flash/ex/component-video-intro/flash-cs3-video-simple-server-caption2.fla flash-cs3-video-simple-server-caption2.fla]
* CS students who would like to learn SVG
* XML file: [http://tecfa.unige.ch/guides/flash/ex/component-video-intro/timed-text2.xml timed-text2.xml]


Wiki pages:
'''Task (2 options) '''
* [[Timed Text]] (optional reading)
* [[Flash video captions tutorial]]


== Homework 6 ==
; 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]], [[SVG/SMIL animation tutorial]], and [[XSLT to generate SVG tutorial]]
 
Upload: all files
 
== Homework 7 (EPub) ==


'''Due:'''
'''Due:'''
   
   
* Before start of class, Monday week 7'''
* Before start of class, Monday week 7'''
You can choose among three options:
=== Homework 6a ===


'''Target population'''
'''Target population'''
Line 118: Line 128:


'''Upload'''
'''Upload'''
* Only turn in the ePUB file (not need to upload any source materials
* Only turn in the ePUB file (no need to upload any source materials
 
=== Homework 6b ===
 
'''Target population'''
* CS students who would like to learn more about content generation and visualization
* Talk to the instructor to "negotiate details"
 
'''Task'''
* Generate HTML5 contents or pure SVG that include some interesting SVG visualization. You also can suggest another graphical output format, like [[X3D]].
* 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)
* Bonus point for generating SMIL-style animations or other advanced features
* Wiki pages: [[SVG]] (links), [[Static SVG tutorial]], [[SVG/SMIL animation tutorial]], and [[XSLT to generate SVG tutorial]]
 
Upload: all files
 
=== Homework 6c ===
'''Target population'''
* This homework is suitable for students who took the Flash class or others who are willing to spend a few hours on learning some Flash (start from [[Flash CS6 desktop tutorial]] and then move on to [[Flash video component tutorial]])
 
* Create a Flash movie that includes captions.
* Bonus points for captions that overlap in time and for using a ''CaptionsBox''.
* Wiki pages: [[Flash video captions tutorial]]
 
Upload: All files (including the video)
 
== Homework 7 ==
 
'''Target population'''
* Students who need to catch up with missed homework. However, this project is more difficult since it really requires precision work with namespaces !
 
'''Task'''
* Create an XHML file that includes at least two other languages, one of which must be your own or create an XML file that also include at least three languages.
* Either create a CSS style-sheet (for the "mixed" XHTML) or transform with XSLT (for both XHTML and XML). The latter is a bit more difficult, but you can rely on a working example: [[XSLT for compound documents tutorial]].
 
'''Due'''
* Wednesday, week 7

Revision as of 22:43, 27 September 2015

Week 6

Content is highly provisional ! Before week 6 classes start, I may change everything ....

- Daniel K. Schneider (talk) 20:46, 20 September 2015 (CEST)

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: Use of Calibre, a ePUB generating software and 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
  • 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

SVG

Wednesday

  • Electronic books with Epub
  • Time for work on individual projects

Electronic books

Ebooks and ebook formats
  • E-book and E-book reader (Overview pages with links, both need some updating)
  • ePub (overview page for the popular e-book format)
ePub tools

Documentation

  • Each tool (Calibre, Sigil) has extensive help + tutorials in various forms ....

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

Upload: all files

Homework 7 (EPub)

Due:

  • Before start of class, Monday week 7

Target population

  • This homework is ideal for students who aim to explore an XML application in depth that did become very popular in the recent years.
  • Prerequisite: Some XHTML knowledge

Task

(1) Create an e-book in ePub format

  • We suggest using the Calibre converting tool (or similar), but you also can "handcraft" the e-pub file or use an authoring tool like Sigil i.e. write a text from start (including some copy/paste of prior work).
  • Content suggestion: A term paper you wrote for a non technical class, a technical manual made from open-content tutorials found on the web. A compilation of interesting News. Avoid creating e-books from "complex" HTML pages.
  • You can take contents that you didn't create yourself, but in this case your name must appear in the e-book, e.g. as the creator of e-book version and you should write a short foreword for this edition (1-2 sentences is enough)

(2) If you aim for a high grade, turn in an optional report that describes the intended audience of the e-book, its making (shortly) and other useful comments you may have.

Tips

Prior to creating an e-book, download an e-book in ePub format and display it with a reader. You also can unzip the file and study its contents.

Calibre's help should include enough information to get you started. Before picking up one tutorial, you also can have look at the The official "Grand Tour Video"

EduTechWiki also includes a shortE-book conversion with Calibre article. The only useful information so far concerns cleaning up HTML, how to deal with multiple files (i.e. creating a "tables of content file") and there are some links.

If you use other tools, you are on your own for finding help and other useful information. If you want to start from scratch, Sigil is supposed to be a fairly easy to learn/use tool. It's basically a specialized HTML editor that will package files, images and meta-information into an epub file.

Upload

  • Only turn in the ePUB file (no need to upload any source materials
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2180/week6&oldid=56226"