Difference between revisions of "AIM Class6"
(11 intermediate revisions by one other user not shown) | |||
Line 1: | Line 1: | ||
− | [[Category: | + | [[Category:Authoring Interactive Media]] |
+ | ------------------------------------------------------------------------------------- | ||
+ | '''Class Goals''' | ||
+ | #Reinforce student's understanding of structuring a document and classification (using XML and DTD) | ||
+ | #Introduce XML and DTD syntax | ||
+ | #Walkthrough creating an XML document | ||
+ | #Walkthrough creating a DTD document | ||
+ | #Have students create XML, DTD, and CSS files to reinforce the lecture | ||
+ | #Have students use XML to structure elements of a domain | ||
+ | |||
+ | ------------------------------------------------------------------------------------- | ||
+ | |||
==Introduction to XML== | ==Introduction to XML== | ||
Line 70: | Line 81: | ||
==Create an XML File== | ==Create an XML File== | ||
1. Create a new folder to hold all of the documents we will be making | 1. Create a new folder to hold all of the documents we will be making | ||
+ | |||
2. Type the following example code into HTMLkit (or the editor of your choice) | 2. Type the following example code into HTMLkit (or the editor of your choice) | ||
and save it as “example1.xml”. It is important that the file extension is .xml! | and save it as “example1.xml”. It is important that the file extension is .xml! | ||
Feel free to change the default content, but don't change the code. | Feel free to change the default content, but don't change the code. | ||
+ | |||
<pre> | <pre> | ||
<?xml version="1.0" encoding="iso-8859-1" standalone = "yes"?> | <?xml version="1.0" encoding="iso-8859-1" standalone = "yes"?> | ||
Line 94: | Line 107: | ||
</portfolio> | </portfolio> | ||
</pre> | </pre> | ||
+ | |||
3. Open up Internet Explorer and drag your new XML file into the browser | 3. Open up Internet Explorer and drag your new XML file into the browser | ||
window. You should see some minus (-) signs on the left hand side. Click one | window. You should see some minus (-) signs on the left hand side. Click one | ||
and see what happens. Click it again. Why is your document being rendered | and see what happens. Click it again. Why is your document being rendered | ||
like this? Try opening your XML document with Firefox or another browser. | like this? Try opening your XML document with Firefox or another browser. | ||
− | |||
How is it different? | How is it different? | ||
+ | |||
4. Move back to your text editor. Copy the entire project node (with child nodes) | 4. Move back to your text editor. Copy the entire project node (with child nodes) | ||
and paste it twice below the first node. Make sure you keep the project nodes | and paste it twice below the first node. Make sure you keep the project nodes | ||
Line 105: | Line 119: | ||
projects. Change the information on the two new ones. You want to be able to | projects. Change the information on the two new ones. You want to be able to | ||
see that it is three different projects with different content. | see that it is three different projects with different content. | ||
+ | |||
5. Save and reload your XML file in a browser to see that there are no new errors. | 5. Save and reload your XML file in a browser to see that there are no new errors. | ||
+ | |||
6. Within your XML declaration, change the value of the standalone attribute to | 6. Within your XML declaration, change the value of the standalone attribute to | ||
be “no” instead of “yes”. | be “no” instead of “yes”. | ||
+ | |||
7. Add the following two lines (see example below for placement): | 7. Add the following two lines (see example below for placement): | ||
#<?xml-stylesheet type="text/css" href="portfolio.css"?> | #<?xml-stylesheet type="text/css" href="portfolio.css"?> | ||
#<!DOCTYPE portfolio SYSTEM "portfolio.dtd"> | #<!DOCTYPE portfolio SYSTEM "portfolio.dtd"> | ||
+ | |||
8. Save your document as “example2.xml” - again, be sure it has the .xml file | 8. Save your document as “example2.xml” - again, be sure it has the .xml file | ||
extension! Before you reload the file in your browser, what do you think will | extension! Before you reload the file in your browser, what do you think will | ||
happen? | happen? | ||
+ | |||
9. Reload the file. Are the results what you expected? Why/why not? | 9. Reload the file. Are the results what you expected? Why/why not? | ||
Your document should now look similar to this: | Your document should now look similar to this: | ||
+ | |||
<pre> | <pre> | ||
<?xml version="1.0" encoding="iso-8859-1" standalone = "no"?> | <?xml version="1.0" encoding="iso-8859-1" standalone = "no"?> | ||
Line 156: | Line 176: | ||
Many browsers will display an error message if you reference a DTD that can not | Many browsers will display an error message if you reference a DTD that can not | ||
be found, but not if a CSS file is missing. | be found, but not if a CSS file is missing. | ||
+ | |||
In the following lines: | In the following lines: | ||
+ | <pre> | ||
<?xml version="1.0" encoding="iso-8859-1" standalone = "no"?> | <?xml version="1.0" encoding="iso-8859-1" standalone = "no"?> | ||
<!DOCTYPE portfolio SYSTEM "portfolio.dtd"> | <!DOCTYPE portfolio SYSTEM "portfolio.dtd"> | ||
<?xml-stylesheet type="text/css" href="portfolio.css"?> | <?xml-stylesheet type="text/css" href="portfolio.css"?> | ||
+ | </pre> | ||
The third is a link to a stylesheet. Hopefully you have all created plenty of | The third is a link to a stylesheet. Hopefully you have all created plenty of | ||
stylesheets while working with HTML, but if not don't worry – we'll go through | stylesheets while working with HTML, but if not don't worry – we'll go through | ||
the basics in class. | the basics in class. | ||
+ | |||
The second line is a document type declaration (!DOCTYPE). It tells us what the | The second line is a document type declaration (!DOCTYPE). It tells us what the | ||
root element for this document is (portfolio), and includes a reference to a DTD | root element for this document is (portfolio), and includes a reference to a DTD | ||
Line 168: | Line 192: | ||
“the syntax of markup constructs... [that] may include additional | “the syntax of markup constructs... [that] may include additional | ||
definitions such as character entity references” | definitions such as character entity references” | ||
+ | |||
Basically that just means that a DTD is sort of like a dictionary – it holds the | Basically that just means that a DTD is sort of like a dictionary – it holds the | ||
definitions of elements used in your XML file, and information on how those | definitions of elements used in your XML file, and information on how those | ||
Line 173: | Line 198: | ||
requesting the “look up” and verification of each of the document's elements to | requesting the “look up” and verification of each of the document's elements to | ||
make sure that they are valid. | make sure that they are valid. | ||
+ | |||
Create a new file and type the following: | Create a new file and type the following: | ||
+ | <pre> | ||
<!ELEMENT portfolio (introduction?, project*)> | <!ELEMENT portfolio (introduction?, project*)> | ||
<!ELEMENT project (title, date?, clientname?, description?, | <!ELEMENT project (title, date?, clientname?, description?, | ||
Line 179: | Line 206: | ||
<!ELEMENT introduction (artistname?, message?)> | <!ELEMENT introduction (artistname?, message?)> | ||
<!ATTLIST project rating (5 | 4 | 3 | 2 | 1) #IMPLIED> | <!ATTLIST project rating (5 | 4 | 3 | 2 | 1) #IMPLIED> | ||
+ | </pre> | ||
Save the file in the same folder as your XML documents and and name it | Save the file in the same folder as your XML documents and and name it | ||
“portfolio.dtd”. Reload your XML file (example2.xml) in your browser to make | “portfolio.dtd”. Reload your XML file (example2.xml) in your browser to make | ||
sure that it can find the DTD and that there are no errors in the new document. | sure that it can find the DTD and that there are no errors in the new document. | ||
Deciphering the DTD | Deciphering the DTD | ||
+ | |||
Let's go back and look at what is in our portfolio.dtd document. | Let's go back and look at what is in our portfolio.dtd document. | ||
+ | |||
To declare an element you start with <!ELEMENT | To declare an element you start with <!ELEMENT | ||
+ | |||
Then you type in the name of that element. Our DTD defines three elements: | Then you type in the name of that element. Our DTD defines three elements: | ||
portfolio, project, and introduction. Following the name are optional parameters | portfolio, project, and introduction. Following the name are optional parameters | ||
that effect the valid ways in which that element can be used. For example, in the | that effect the valid ways in which that element can be used. For example, in the | ||
first line the element name is followed by (introduction?, project*). Both | first line the element name is followed by (introduction?, project*). Both | ||
− | “introduction” and “project” elements are listed as children of a “portfolio” | + | “introduction” and “project” elements are listed as children of a “portfolio” element. The question mark and asterisk specify whether the children are |
− | |||
− | element. The question mark and asterisk specify whether the children are | ||
mandatory for the portfolio element to be valid, and how many times they | mandatory for the portfolio element to be valid, and how many times they | ||
should/can appear. If there is a plus sign (+), then the item may occur one or more | should/can appear. If there is a plus sign (+), then the item may occur one or more | ||
times. An asterisk (*) signals that the item may or may not occur, and there is no | times. An asterisk (*) signals that the item may or may not occur, and there is no | ||
limit on the amount of times it can occur. A (?) signals either no occurrence or | limit on the amount of times it can occur. A (?) signals either no occurrence or | ||
− | only one occurrence. If | + | only one occurrence. If there is no +, *, or ? symbol, the element must appear once |
(and only once). | (and only once). | ||
+ | |||
So the first line of our DTD is: | So the first line of our DTD is: | ||
− | <!ELEMENT portfolio (introduction?, project*)> | + | <pre><!ELEMENT portfolio (introduction?, project*)></pre> |
And it could be interpreted as: | And it could be interpreted as: | ||
+ | |||
There could be an element named portfolio. It may or may not have an | There could be an element named portfolio. It may or may not have an | ||
introduction, but if there is an introduction there will be only one. The | introduction, but if there is an introduction there will be only one. The | ||
Line 206: | Line 237: | ||
one or more projects, there is no limit to the number it can have. | one or more projects, there is no limit to the number it can have. | ||
The second line is: | The second line is: | ||
− | <!ELEMENT project (title, date?, clientname?, description?, media?)> | + | <pre><!ELEMENT project (title, date?, clientname?, description?, media?)></pre> |
And an interpretation of this line could read: | And an interpretation of this line could read: | ||
+ | |||
There could be an element named project. It will definitely have a title – | There could be an element named project. It will definitely have a title – | ||
and only one title. It may or may not have a date, clientname, description, | and only one title. It may or may not have a date, clientname, description, | ||
and/or media, but if there is any occurrence of any of these, there will be | and/or media, but if there is any occurrence of any of these, there will be | ||
only one of each. | only one of each. | ||
+ | |||
Ok, your turn. “Interpret” the last of the element lines: | Ok, your turn. “Interpret” the last of the element lines: | ||
− | <!ELEMENT introduction (artistname?, message?)> | + | |
+ | <pre><!ELEMENT introduction (artistname?, message?)></pre> | ||
+ | |||
There is one more line to this DTD; a definition of an attribute (associating a | There is one more line to this DTD; a definition of an attribute (associating a | ||
name/value pair with an element). It starts with the keyword “ATTLIST” | name/value pair with an element). It starts with the keyword “ATTLIST” | ||
Line 221: | Line 256: | ||
pipe bars, of the valid values this attribute can take. Here the attribute rating can | pipe bars, of the valid values this attribute can take. Here the attribute rating can | ||
be a number between 1 and 5. At the end is an indicator of the default value, and | be a number between 1 and 5. At the end is an indicator of the default value, and | ||
− | whether or not a value is required. There are three options: #REQUIRED, | + | whether or not a value is required. There are three options: #REQUIRED, #IMPLIED, and #FIXED. In this example we are using #IMPLIED which means |
− | #IMPLIED, and #FIXED. In this example we are using #IMPLIED which means | ||
that no default value is provided. | that no default value is provided. | ||
− | <!ATTLIST project rating (5 | 4 | 3 | 2 | 1) #IMPLIED> | + | |
− | Linking a Stylesheet | + | <pre><!ATTLIST project rating (5 | 4 | 3 | 2 | 1) #IMPLIED></pre> |
+ | |||
+ | ==Linking a Stylesheet== | ||
So far you have created a structured document using XML, a DTD to validate the | So far you have created a structured document using XML, a DTD to validate the | ||
XML, and now we just need to add a little bit of style to finish off the | XML, and now we just need to add a little bit of style to finish off the | ||
− | walkthrough. | + | walkthrough. |
− | + | ||
− | + | Note that in XML, elements aren't already "block" or "inline" - you create that with your stylesheet. | |
− | + | ||
− | + | ===Sample Stylesheet=== | |
− | + | <pre> | |
− | Sample Stylesheet | ||
portfolio { | portfolio { | ||
background-color: #ffffff; | background-color: #ffffff; | ||
Line 275: | Line 310: | ||
margin-left: 30pt; | margin-left: 30pt; | ||
} | } | ||
− | + | </pre> | |
+ | ==Structuring Elements of a Domain== | ||
+ | Elements of a domain can be structured in many different ways. The best solution will depend on many factors (such as the domain itself, culture, history, standards, ec.). | ||
+ | |||
+ | Let's look at a simple example. How would you structure a menu? | ||
+ | |||
+ | An unstructured menu ([[AIM_XML_menu]]) is just a list of items. Come up with a simple structure for this list. | ||
+ | |||
+ | Translate the structure you created into a DTD and XML file. | ||
==Homework== | ==Homework== | ||
− | [[AIM Assignment 5]] - Create | + | [[AIM Assignment 5]] - Create an XML File with a DTD and style it with css |
[[AIM Midterm Review]] | [[AIM Midterm Review]] | ||
===Reading=== | ===Reading=== | ||
+ | |||
+ | [http://www.oreilly.com/catalog/learnxml2/chapter/ch02.pdf Learning XML (pdf)] | ||
http://www.w3schools.com/xml/xml_whatis.asp | http://www.w3schools.com/xml/xml_whatis.asp | ||
http://www.w3schools.com/xsl/xsl_languages.asp | http://www.w3schools.com/xsl/xsl_languages.asp |
Latest revision as of 16:05, 5 August 2008
Class Goals
- Reinforce student's understanding of structuring a document and classification (using XML and DTD)
- Introduce XML and DTD syntax
- Walkthrough creating an XML document
- Walkthrough creating a DTD document
- Have students create XML, DTD, and CSS files to reinforce the lecture
- Have students use XML to structure elements of a domain
Contents
Introduction to XML
Walkthrough: Markup and descriptions
Walkthrough a simple XML file and discuss what each line means:
<?xml version="1.0" encoding="iso-8859-1" standalone = "yes"?> <!-- a comment --> <portfolio> <introduction> <artistname>Jack Sack</artistname> <message>Introductory message...welcome to this portfolio...</message> </introduction> <project> <title>Project one</title> <date>June 2001</date> <clientname>Client Name</clientname> <description>Description of the project...goal of the project, and some wonderful information about the project.</description> <media>Flash and ASP</media> </project> </portfolio>
Descriptions:
XML declaration
comment (just like HTML!)
Root element
Node (introduction)
First child node of introduction
Second child node of introduction
Node (project)
First child node of project
Second child node of project
Third child node of project
Fourth child node of project
Fifth child node of project (close of root element)
Notes
XML declaration: states what markup language is being used, the version, and optionally two other properties (in this example the type of encoding and whether the document is a “standalone” document – whether there are other files to download such as a DTD).
Comment: comments are notes or markup that are not interpreted or parsed. Root element: there can be only one root element – it is the element that surrounds or contains all other elements within the document. Also can be referred to as “document element”.
Node: an element that may have attribute/value pairs, and which may contain other elements (child nodes).
Child node: an element that is contained within another element. Children in XML have only one parent.
Create an XML File
1. Create a new folder to hold all of the documents we will be making
2. Type the following example code into HTMLkit (or the editor of your choice) and save it as “example1.xml”. It is important that the file extension is .xml! Feel free to change the default content, but don't change the code.
<?xml version="1.0" encoding="iso-8859-1" standalone = "yes"?> <!-- authored by Your Name --> <portfolio> <introduction> <artistname>Fictional Name (or Your Name) </artistname> <message>Introductory message...welcome to this portfolio...</message> </introduction> <project> <title>Pet Store Plus</title> <date>June 2001</date> <clientname>Pet-o-Matic Corporation</clientname> <description>Description of the project...goal of the project, and some wonderful information about the project.</description> <media>Flash and ASP.Net</media> </project> </portfolio>
3. Open up Internet Explorer and drag your new XML file into the browser window. You should see some minus (-) signs on the left hand side. Click one and see what happens. Click it again. Why is your document being rendered like this? Try opening your XML document with Firefox or another browser. How is it different?
4. Move back to your text editor. Copy the entire project node (with child nodes) and paste it twice below the first node. Make sure you keep the project nodes nested within the root element (portfolio). You should now have three “sets” of projects. Change the information on the two new ones. You want to be able to see that it is three different projects with different content.
5. Save and reload your XML file in a browser to see that there are no new errors.
6. Within your XML declaration, change the value of the standalone attribute to be “no” instead of “yes”.
7. Add the following two lines (see example below for placement):
#<?xml-stylesheet type="text/css" href="portfolio.css"?> #<!DOCTYPE portfolio SYSTEM "portfolio.dtd">
8. Save your document as “example2.xml” - again, be sure it has the .xml file extension! Before you reload the file in your browser, what do you think will happen?
9. Reload the file. Are the results what you expected? Why/why not? Your document should now look similar to this:
<?xml version="1.0" encoding="iso-8859-1" standalone = "no"?> <!DOCTYPE portfolio SYSTEM "portfolio.dtd"> <?xml-stylesheet type="text/css" href="portfolio.css"?> <!-- authored by Your Name --> <portfolio> <introduction> <artistname>Fictional Name (or Your Name) </artistname> <message>Introductory message...welcome to this portfolio...</message> </introduction> <project> <title>Pet Store Plus</title> <date>June 2001</date> <clientname>Pet-o-Matic Corporation</clientname> <description>Description of the project...goal of the project, and some wonderful information about the project.</description> <media>Flash and ASP.Net</media> </project> <project> <title>Stiff Upper Lip</title> <date>May 2001</date> <clientname>Moustaches R Us</clientname> <description>Description...</description> <media>XHTML and CSS</media> </project> <project> <title>Buy More!</title> <date>January 2001</date> <clientname>C. Onsu Mer</clientname> <description>Description...</description> <media>Photoshop</media> </project> </portfolio>
Create a DTD
Many browsers will display an error message if you reference a DTD that can not be found, but not if a CSS file is missing.
In the following lines:
<?xml version="1.0" encoding="iso-8859-1" standalone = "no"?> <!DOCTYPE portfolio SYSTEM "portfolio.dtd"> <?xml-stylesheet type="text/css" href="portfolio.css"?>
The third is a link to a stylesheet. Hopefully you have all created plenty of stylesheets while working with HTML, but if not don't worry – we'll go through the basics in class.
The second line is a document type declaration (!DOCTYPE). It tells us what the root element for this document is (portfolio), and includes a reference to a DTD (“portfolio.dtd”). A DTD (document type definition) is defined by the W3C as: “the syntax of markup constructs... [that] may include additional definitions such as character entity references”
Basically that just means that a DTD is sort of like a dictionary – it holds the definitions of elements used in your XML file, and information on how those elements should be interpreted. So when you include the URI to a DTD, you are requesting the “look up” and verification of each of the document's elements to make sure that they are valid.
Create a new file and type the following:
<!ELEMENT portfolio (introduction?, project*)> <!ELEMENT project (title, date?, clientname?, description?, media?)> <!ELEMENT introduction (artistname?, message?)> <!ATTLIST project rating (5 | 4 | 3 | 2 | 1) #IMPLIED>
Save the file in the same folder as your XML documents and and name it “portfolio.dtd”. Reload your XML file (example2.xml) in your browser to make sure that it can find the DTD and that there are no errors in the new document. Deciphering the DTD
Let's go back and look at what is in our portfolio.dtd document.
To declare an element you start with <!ELEMENT
Then you type in the name of that element. Our DTD defines three elements: portfolio, project, and introduction. Following the name are optional parameters that effect the valid ways in which that element can be used. For example, in the first line the element name is followed by (introduction?, project*). Both “introduction” and “project” elements are listed as children of a “portfolio” element. The question mark and asterisk specify whether the children are mandatory for the portfolio element to be valid, and how many times they should/can appear. If there is a plus sign (+), then the item may occur one or more times. An asterisk (*) signals that the item may or may not occur, and there is no limit on the amount of times it can occur. A (?) signals either no occurrence or only one occurrence. If there is no +, *, or ? symbol, the element must appear once (and only once).
So the first line of our DTD is:
<!ELEMENT portfolio (introduction?, project*)>
And it could be interpreted as:
There could be an element named portfolio. It may or may not have an introduction, but if there is an introduction there will be only one. The portfolio also may or may not have one or more projects. If it does have one or more projects, there is no limit to the number it can have. The second line is:
<!ELEMENT project (title, date?, clientname?, description?, media?)>
And an interpretation of this line could read:
There could be an element named project. It will definitely have a title – and only one title. It may or may not have a date, clientname, description, and/or media, but if there is any occurrence of any of these, there will be only one of each.
Ok, your turn. “Interpret” the last of the element lines:
<!ELEMENT introduction (artistname?, message?)>
There is one more line to this DTD; a definition of an attribute (associating a name/value pair with an element). It starts with the keyword “ATTLIST” (required of an attribute) and then states the name of the element that it can be used with (in this case, project). Following the element name is the name of the attribute itself - “rating”. After the name of the attribute comes a list, separated by pipe bars, of the valid values this attribute can take. Here the attribute rating can be a number between 1 and 5. At the end is an indicator of the default value, and whether or not a value is required. There are three options: #REQUIRED, #IMPLIED, and #FIXED. In this example we are using #IMPLIED which means that no default value is provided.
<!ATTLIST project rating (5 | 4 | 3 | 2 | 1) #IMPLIED>
Linking a Stylesheet
So far you have created a structured document using XML, a DTD to validate the XML, and now we just need to add a little bit of style to finish off the walkthrough.
Note that in XML, elements aren't already "block" or "inline" - you create that with your stylesheet.
Sample Stylesheet
portfolio { background-color: #ffffff; margin-left: 20pt; margin-right: 20pt; } introduction { display: block; margin-bottom: 30pt; } artistname { color: #999900; font-size: 40pt; display: block; } message { color: #626262; margin-bottom: 30pt; } project { display: block; background-color: #cccccc; margin-bottom: 30pt; } title { color: #333333; font-size: 20pt; } date { color: #666666; font-size: 12pt; padding:10px 10px 10px 10px; } description, clientname { display: block; font-size: 14pt; } media { Display: block; margin-left: 30pt; }
Structuring Elements of a Domain
Elements of a domain can be structured in many different ways. The best solution will depend on many factors (such as the domain itself, culture, history, standards, ec.).
Let's look at a simple example. How would you structure a menu?
An unstructured menu (AIM_XML_menu) is just a list of items. Come up with a simple structure for this list.
Translate the structure you created into a DTD and XML file.
Homework
AIM Assignment 5 - Create an XML File with a DTD and style it with css