COAP:COAP-2180/week1: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(38 intermediate revisions by the same user not shown)
Line 1: Line 1:
=== Week 1 [[Help:COAP-2180|COAP 2180]] ===
== Week 1 [[Help:COAP-2180|COAP 2180]] ==


On week one we will look at XML in three ways:
''' Learning goals '''
* Where is XML used ?
* What is XML (a formalism) ?
* How can we hand-code XML applications ?


==== Teaching materials ====
In week one, we will look at XML in several ways:
* Where is XML used and what for ? (in many places, in may ways)
* What is XML ? (a formalism)
* What do we mean by a "document structure" ?
* How can we hand-code XML contents ?  You will learn how to use an XML editor and make use of so-called DTDs (document type definitions)
* How can we add  CSS to textcentric XML, so that it could be displayed in a web browser ?


; Introduction to XML (Monday)
== Introduction to XML (Monday) ==
* [http://tecfa.unige.ch/guides/te/files/xml-intro.ppt xml-intro.ppt] (slides used on Monday)
* [[XML]] article in this wiki (includes the same information and is somewhat more readable)


; Understanding and editing XML (Wednesday)
; The learning environment
* [http://tecfa.unige.ch/guides/te/files/xml-edit.pdf xml-edit.pdf] (slides used to explain how to understand DTDs and how to edit XML)
* World classroom (Canvas)
* [[Editing XML tutorial]] (same information as wiki article, draft but probably still more useful then the slides
* This wiki
* Homework projects, exams and grading


; Examples files
; Introduction to XML - slides
* [http://tecfa.unige.ch/guides/te/files/xml-intro.ppt xml-intro.ppt]
 
; Introduction to XML (wiki pages)
* [[XML]]
* [[XML principles]]
* [[Tour de XML]]
 
; Understanding and editing XML
* [http://tecfa.unige.ch/guides/te/files/xml-edit.pdf xml-edit.pdf] (slides that to explain how to understand DTDs and how to edit XML)
* [[Editing XML tutorial]] (wiki article, similar as above)
* [[XML editor]]s, in particular [[Exchanger XML Editor]] (installed in the classroom on the N: drive, to verify)
 
; Examples files (See also the homework section below !)
* [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/ DTD and XML templates example directory]
* To retrieve these files, I '''strongly''' suggest that you "save link as". If you open a file in a navigator like IE and then save, you may loose information ....
* [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/ALLFILES.zip ALLFILES.zip] archive which should include everything.
 
== Editing XML part II and usign CSS (Wednesday) ==
 
; XML with CSS style
* [[CSS tutorial]] (reminder and for catching up)
* [[CSS for XML tutorial]]
* [http://tecfa.unige.ch/guides/te/files/xml-css.pdf xml-css.pdf] (slides)
* There are many good CSS references, e.g. [https://developer.mozilla.org/en-US/docs/Web/CSS CSS at MDN], [http://reference.sitepoint.com/css SitePoint CSS Reference].
 
; Creating a DTD - See week 2 for details
* [[DTD tutorial]] (wiki lecture notes)
* [http://tecfa.unige.ch/guides/te/files/xml-dtd.pdf xml-dtd.pdf] (slides)
 
; Examples files (See also the homework section below !)
* [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/ DTD and XML templates example directory]
* [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/ DTD and XML templates example directory]
* To retrieve these files, I '''strongly''' suggest that you "save link as". If you open a file in a navigator like IE and then save, you may loose information ....
* To retrieve these files, I '''strongly''' suggest that you "save link as". If you open a file in a navigator like IE and then save, you may loose information ....
* Also consider taking the [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/ALLFILES.zip ALLFILES.zip] archive which should include everything. Before unzipping, create a directory.
* [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/ALLFILES.zip ALLFILES.zip] archive which should include everything.
 
; Textbook chapters XML and CSS
If you  judge my lecture notes and slides to be incomplete, too short or not good enough, reading '''either one or both series of textbook chapters''' is '''mandatory''' !
* XML in a Nutshell, Chapter 1 Introducing XML and Chapter 2 XML Fundamentals
* Learning XML, Chapter 2 Markup and Core Concepts


; Textbook chapters
* ''Learning XML'', Chapter 5 CSS
* See the worldclassroom
* ''XML in a Nutshell'', Chapter 13 CSS
'''Textbook chapters to understand XML and to anticipate week 2'''
* ''XML in a Nutshell'', Chapter 3 Document Type Definitions (start here)
* ''Learning XML'', Chapter 4 Quality Control with Schemas (additional reading)


==== Homework 1 - Week 1 ====
These chapters are available through the world classroom.
 
; For the adventurous
* [[:Category:XML|XML Category]] (All XML-related articles in this wiki)
* [http://en.wikipedia.org/wiki/Xml XML] (on Wikipedia)
 
; For the adventurous
* [[:Category:XML|XML Category]] (All XML-related articles in this wiki)
* [http://en.wikipedia.org/wiki/Xml XML] (on Wikipedia)
 
== Homework 1 - Weeks 1/2  ==


'''Deadline and submission:'''
'''Deadline and submission:'''
* Wednesday week 2 (before start of class)
* '''Wednesday week 2''' (before start of class)
* Use the worldclassroom: https://webster.blackboard.edu/
* Homework (projects) must be submitted through the worldclassroom
* Submit the *.xml, the *.dtd and an optional report file (see below)
* Submit the *.xml, the *.dtd, the *.css and a report file (see below)


==== Task ====
=== Task ===


Edit an XML document with the suggested DTDs below
Edit an XML document using one of the suggested DTDs below
* Respect the semantics of the elements and the attributes
* Respect the semantics of the elements and the attributes
* Validate your document
* Validate your document
* Try to use as many different elements as you can (if appropriate)
* Try to use as many different elements as you can (if appropriate)
* Follow additional directions for each suggested DTD
* Follow additional directions for each suggested DTD
* Bonus: add comments in the DTD or the XML file
* Use an existing CSS if it exists, create one if it does not.
You can choose among the DTDs availabe at:
 
* http://tecfa.unige.ch/guides/xml/examples/dtd-examples/
Bonus:
* Add comments in the DTD or the XML file that explain the XML structure. In addition, write a short report that discusses the DTD and the CSS.
* Styling: improve or create the CSS (if appropriate)
* Good, meaningful contents
 
Do not worry ''too much'' about rendering (display). It is more important that your get the XML editing right, i.e. be able to fill in a dynamic information structure with data. That being said, producing a really good looking CSS will give you a bonus of course.
 
In order to get a maximum score (4/4), your XML must be well-formed, valid and include meaningful data. The DTD and the CSS should documented and there should be a report.
 
=== Example files ===
 
You can choose among the DTDs available at http://tecfa.unige.ch/guides/xml/examples/dtd-examples/
* Make sure to get both the *-template.xml and the corresponding *.dtd file. If available, you also should take the *.css.
* You may suggest another DTD to the instructor, but '''before''' Wed week 2.


Some of the DTDs are described in the following table.
Some of the DTDs are described in the following table.
{| class="prettytable"
{| class="prettytable"
| <center>'''DTD (difficulty)'''</center>
! DTD (difficulty)
| <center>'''Purpose'''</center>
! Purpose
| <center>'''file name'''</center>
! DTD file
| <center>'''Additional directions'''</center>
! XML start
! CSS
! Additional instructions


|-
|-
| Recipe DTD
| Recipe DTD (easy medium)
 
(easy)
| Write simple recipes
| Write simple recipes
| recipe.dtd
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/recipe.dtd recipe.dtd]
| Use all tags. Write at least one recipe. Make sure that there is enough information to really use it.
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/recipe.xml recipe.xml]
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/recipe.css recipe.css]
| Use all tags. Write at least one recipe. Make sure that there is enough information, i.e. a user ought to able to cook this. Look at [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cuisine.xml this example].


|-
|-
| Recipe Markup Language
| CD_list (medium)
| Create simple CD lists
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cd-list.dtd cd-list.dtd]
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cd-list-template.xml cd-list-template.xml]
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cd-list.css cd-list.css]
| Use most tags. Write at least two entries and at least one that uses most of the tags. Do better than [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cd-list.xml cd-list.xml]


(medium)
|-
| Recipe Markup Language (hard)
| Write complex recipes
| Write complex recipes
| recipeml.dtd
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/recipeml.dtd recipeml.dtd]
| As above, but only use appropriate tags. Hint: find the website of its creator
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/recipeml.xml recipeml.xml]
| none
| As above, but only use appropriate tags. Read more in the [http://www.formatdata.com/recipeml/index.html official website].


|-
|-
| RSS 0.92
| RSS 0.92 (medium)
 
(medium)
| News syndication (usually machine generated)
| News syndication (usually machine generated)
| rss-0-92.dtd
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/rss-0-92.dtd rss-0-92.dtd]
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/rss-0-92-template.xml rss-0-92-template.xml]
| none
| Use enough tags to display this in an aggregator. Enter at least 4 URLs. Hint: look at a RSS news feed first !
| Use enough tags to display this in an aggregator. Enter at least 4 URLs. Hint: look at a RSS news feed first !


|-
|-
| Simple Docbook
| Simple Docbook (hard)
 
(hard)
| Write "real" articles
| Write "real" articles
| sdocbook.dtd
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/sdocbook.dtd sdocbook.dtd]
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/sdocbook-template.xml sdocbook-template.xml]
| none (but see [http://www.badgers-in-foil.co.uk/projects/docbook-css/ this])
| Do not use all tags, only the needed ones. Copy/paste from a text you already have.  
| Do not use all tags, only the needed ones. Copy/paste from a text you already have.  


|-
|-
| Instructions
| Instructions (medium)
 
(medium)
| Write "how-to" instructions
| Write "how-to" instructions
| instructions.dtd
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/instructions.dtd instructions.dtd]
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/instructions.xml instructions.xml]
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/instructions.css instructions.css]
| Come up with a good "how-to problem". Only use tags you need..
| Come up with a good "how-to problem". Only use tags you need..


|-
|-
| StepbyStep
| StepbyStep (medium hard)
 
(medium hard)
| Write "how-to" instructions
| Write "how-to" instructions
| stepbystep03.dtd
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/stepbystep03.dtd stepbystep03.dtd]
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/stepbystep03-template.xml stepbystep03-template.xml]
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/stepbystep03.css stepbystep03.css]
| Make up a good "how-to problem". Only use tags you need..
| Make up a good "how-to problem". Only use tags you need..


|-
|-
| Story grammar  
| Story grammar (medium)
 
(medium)
| Write simple fairy tales
| Write simple fairy tales
| story-grammar.dtd
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/story-grammar.dtd story-grammar.dtd]
| Write a nice fairy tale. Doesn’t need to be your own.  
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/story-grammar-template.xml story-grammar-template.xml]
| [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/story-grammar.css story-grammar.css]
| Write a nice fairy tale. Doesn’t need to be your own. Make sure to use the right tags, i.e. think in terms of structure. A very short example is [http://tecfa.unige.ch/guides/xml/examples/recit/story-grammar.xml here].


|}
|}


==== Evaluation criteria ====
=== Tips for getting a good grade ===
Roughly ....


'''Work considered as weak:'''
'''Evaluation criteria (roughly)'''. See the detailed grid in the world classroom.
* Wellformed (but not valid) document using the DTD’s elements


'''Work considered as minimalistic:'''
''Work considered as weak:''
* Valid document that includes very minimal content.
* Well-formed (but not valid) document using the DTD’s elements


'''Good work includes:'''
''Work considered as minimalistic:''
* Valid document that includes very minimal content. No report.
 
''Good work includes:''
* Valid document with an interesting content
* Valid document with an interesting content
* Some CSS
''Excellent work (A-) includes:''
* Inserted useful comments <nowiki><!-- ... --></nowiki> in the XML and/or the DTD or a minimalistic report
* Respect of the DTD's semantics
* Good contents
* Good enough CSS for easy reading
''Very good work (A) includes either one of:''
* A 1-2 page report that discusses the architecture of the DTD and your opinion of it, e.g. you can describe architecture of the DTD (without going into detailed description of every element !), discuss what you would like to improve, what you liked/disliked, your difficulties, etc. You simply can include this report into the DTD that you resubmit or as word/PDF/HTML file. As you like, presentation of the report doesn't matter.
* Outstanding styling + extended contents


'''Exellent work includes:'''
''Brilliant work'' (A+) includes all of the above.
* Inserted useful comments <nowiki><!-- ... --></nowiki> in the XML and/or the DTD
* Respect of the DTDs semantics


'''Brillant work includes:'''
'''Report structure and contents'''
* A 1-2 page report that discusses the architecture of the DTD and your opinion of it, e.g. you can describe architecture of the DTD (without going into detailed description of every element !), discuss what you would like to improve, what you liked/disliked, your difficulties, etc.
* Read [[COAP:COAP-2180/grading form#Report_structure|this]]
You simply can include this report into the DTD that you resubmit or as word/PDF/HTML file. As you like, presentation doesn't matter.

Latest revision as of 09:44, 22 March 2017

Week 1 COAP 2180

Learning goals

In week one, we will look at XML in several ways:

  • Where is XML used and what for ? (in many places, in may ways)
  • What is XML ? (a formalism)
  • What do we mean by a "document structure" ?
  • How can we hand-code XML contents ? You will learn how to use an XML editor and make use of so-called DTDs (document type definitions)
  • How can we add CSS to textcentric XML, so that it could be displayed in a web browser ?

Introduction to XML (Monday)

The learning environment
  • World classroom (Canvas)
  • This wiki
  • Homework projects, exams and grading
Introduction to XML - slides
Introduction to XML (wiki pages)
Understanding and editing XML
Examples files (See also the homework section below !)

Editing XML part II and usign CSS (Wednesday)

XML with CSS style
Creating a DTD - See week 2 for details
Examples files (See also the homework section below !)
Textbook chapters XML and CSS

If you judge my lecture notes and slides to be incomplete, too short or not good enough, reading either one or both series of textbook chapters is mandatory !

  • XML in a Nutshell, Chapter 1 Introducing XML and Chapter 2 XML Fundamentals
  • Learning XML, Chapter 2 Markup and Core Concepts
  • Learning XML, Chapter 5 CSS
  • XML in a Nutshell, Chapter 13 CSS

Textbook chapters to understand XML and to anticipate week 2

  • XML in a Nutshell, Chapter 3 Document Type Definitions (start here)
  • Learning XML, Chapter 4 Quality Control with Schemas (additional reading)

These chapters are available through the world classroom.

For the adventurous
For the adventurous

Homework 1 - Weeks 1/2

Deadline and submission:

  • Wednesday week 2 (before start of class)
  • Homework (projects) must be submitted through the worldclassroom
  • Submit the *.xml, the *.dtd, the *.css and a report file (see below)

Task

Edit an XML document using one of the suggested DTDs below

  • Respect the semantics of the elements and the attributes
  • Validate your document
  • Try to use as many different elements as you can (if appropriate)
  • Follow additional directions for each suggested DTD
  • Use an existing CSS if it exists, create one if it does not.

Bonus:

  • Add comments in the DTD or the XML file that explain the XML structure. In addition, write a short report that discusses the DTD and the CSS.
  • Styling: improve or create the CSS (if appropriate)
  • Good, meaningful contents

Do not worry too much about rendering (display). It is more important that your get the XML editing right, i.e. be able to fill in a dynamic information structure with data. That being said, producing a really good looking CSS will give you a bonus of course.

In order to get a maximum score (4/4), your XML must be well-formed, valid and include meaningful data. The DTD and the CSS should documented and there should be a report.

Example files

You can choose among the DTDs available at http://tecfa.unige.ch/guides/xml/examples/dtd-examples/

  • Make sure to get both the *-template.xml and the corresponding *.dtd file. If available, you also should take the *.css.
  • You may suggest another DTD to the instructor, but before Wed week 2.

Some of the DTDs are described in the following table.

DTD (difficulty) Purpose DTD file XML start CSS Additional instructions
Recipe DTD (easy medium) Write simple recipes recipe.dtd recipe.xml recipe.css Use all tags. Write at least one recipe. Make sure that there is enough information, i.e. a user ought to able to cook this. Look at this example.
CD_list (medium) Create simple CD lists cd-list.dtd cd-list-template.xml cd-list.css Use most tags. Write at least two entries and at least one that uses most of the tags. Do better than cd-list.xml
Recipe Markup Language (hard) Write complex recipes recipeml.dtd recipeml.xml none As above, but only use appropriate tags. Read more in the official website.
RSS 0.92 (medium) News syndication (usually machine generated) rss-0-92.dtd rss-0-92-template.xml none Use enough tags to display this in an aggregator. Enter at least 4 URLs. Hint: look at a RSS news feed first !
Simple Docbook (hard) Write "real" articles sdocbook.dtd sdocbook-template.xml none (but see this) Do not use all tags, only the needed ones. Copy/paste from a text you already have.
Instructions (medium) Write "how-to" instructions instructions.dtd instructions.xml instructions.css Come up with a good "how-to problem". Only use tags you need..
StepbyStep (medium hard) Write "how-to" instructions stepbystep03.dtd stepbystep03-template.xml stepbystep03.css Make up a good "how-to problem". Only use tags you need..
Story grammar (medium) Write simple fairy tales story-grammar.dtd story-grammar-template.xml story-grammar.css Write a nice fairy tale. Doesn’t need to be your own. Make sure to use the right tags, i.e. think in terms of structure. A very short example is here.

Tips for getting a good grade

Evaluation criteria (roughly). See the detailed grid in the world classroom.

Work considered as weak:

  • Well-formed (but not valid) document using the DTD’s elements

Work considered as minimalistic:

  • Valid document that includes very minimal content. No report.

Good work includes:

  • Valid document with an interesting content
  • Some CSS

Excellent work (A-) includes:

  • Inserted useful comments <!-- ... --> in the XML and/or the DTD or a minimalistic report
  • Respect of the DTD's semantics
  • Good contents
  • Good enough CSS for easy reading

Very good work (A) includes either one of:

  • A 1-2 page report that discusses the architecture of the DTD and your opinion of it, e.g. you can describe architecture of the DTD (without going into detailed description of every element !), discuss what you would like to improve, what you liked/disliked, your difficulties, etc. You simply can include this report into the DTD that you resubmit or as word/PDF/HTML file. As you like, presentation of the report doesn't matter.
  • Outstanding styling + extended contents

Brilliant work (A+) includes all of the above.

Report structure and contents