Web Design/XML challenges

Web Design → XML challenges

This page is part of the Web Design project.

The following challenges will help you familiarise yourself with a few other applications of XML (other than the XHTML that you've already been doing!)

Challenge 1: Getting to know SVG

Copy the following file into your editor of choice and save it as myfirstsvg.svg, then open up the file in a browser (Internet Explorer with the Adobe SVG plugin, Firefox 1.5+, Opera 9+, Safari 3+, or Chrome):

<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <style type="text/css">
    rect {
      fill: rgb(0,0,255);
      stroke-width: 1;
      stroke: rgb(0,0,0);
      fill-opacity:0.7;
    }
  </style>

  <rect width="300" height="100" transform="translate(50,150)" />

</svg>

Assuming this is the first time you've seen an SVG file, you might notice that it looks very similar to an HTML file, but with some obvious differences!

Change the rectangle so that it's filled with yellow
Make the rectangle's border a bit bigger and modify the color of the border (let's say, green!)
Any ideas what the fill-opacity might do? Test it out.
See if you can turn your rectangle into a square
Finally, can you modify the position of your rectangle?

Easy?!

Challenge 2: More SVG elements

Still using the same SVG file (myfirstsvg.svg), add the following element to your SVG:

  <circle cx="100" cy="150" r="40" />

Test it out and see if it does what you expect! Looks a bit boring though! Add some plain old CSS style, so that

your circle is filled with the color Blue,
your circle has a stroke similar to your rectangle
your circle has an opacity of 0.7

Note, you can also use CSS pseudo selectors, like :hover to change your shapes when the mouse hovers over them! (for eg: circle:hover {fill-opacity:0.3} )

Finally, see how you go arranging the Olympics logo:

Add another 4 circles to your file (you might want to 'translate' them so that they aren't all on top of each other)
Give each circle an id, just like you would an HTML element, then use this ID to make each circle a different colour.
Arrange the colours and the positions of your circles to form the Olympic logo

Challenge 3: Animating the Olympics with SVG!

Animating shapes in SVG is really easy! There's actually a tag called animateTransform to help us out, but unfortunately it's not yet supported by Firefox's native SVG, so we'll need to install the Adobe SVG plugin or Opera 9+.

Note that the animateTransform element goes inside the circle element! (Watch out for this, make sure that you don't close your circle element before your animateTransform element).

Modify one of your circles as follows:

<circle cx="100" cy="150" r="40">
  <animateTransform attributeName="transform" attributeType="XML"
                      type="translate" from="50,150" to="300,100" begin="0s"
                      dur="2s" fill="freeze"/>
</circle>

Now,

Try playing with the 'from', 'to', 'begin' and 'dur' attributes, testing to see what they do.
When you feel ready, have a go at creating an animation where 5 circles animate to form the Olympic logo! Your circles should all begin at the side of the page, and then animate to form the Olympic logo!

Challenge 4: Roll your own RSS feed

RSS is a family of web feed formats, specified in XML and used for Web syndication. RSS is used by (among other things) news Web sites, weblogs and podcasting. No one can really decide what it stands for (either Really Simple Syndication, Rich Site Summary or RDF Site Summary)

Web feeds provide web content or summaries of web content together with links to the full versions of the content, and other metadata. RSS, in particular, delivers this information as an XML file called an RSS feed, webfeed, RSS stream, or RSS channel. In addition to facilitating syndication, web feeds allow a website's frequent readers to track updates on the site using an aggregator. (see the Wikipedia RSS article for more information.)

You've probably already been using newsfeeds to keep up-to-date with the world of web design, using Bloglines or another news reader.

In this activity, you'll follow a tutorial to create your own RSS news feed for your site! The article Really Simple Syndication will help you familiarise with the basic tags that are used with RSS as well as step you through creating your own RSS file.

After reading through the article in overview,

Create a new blank RSS file of your own and save it as feed.xml
Work through the "Building a personal RSS Feed, step-by-step" section of the article Really Simple Syndication to create your own RSS feed for your own site. Try to make sure you've got 3 or 4 items in your feed. They might point to different sections of your site.
Once you're happy with your file you'll want to validate your file to make sure you haven't forgotten any closing tags etc. RSS feeds can be validated just like web pages using the feed validator. Copy and paste the text of your rss feed into the validator and see what happens!
Upload your feed onto your websites main folder
Finally, verify that your feed works by adding it to your Bloglines account (or other feed reader).

While we're on the subject: For fun, try and get a Microsoft Excel spreadsheet to display RSS-feeds.

Challenge 5: Adding some maths to your pages

Just to see how easy it is to combine XML languages, create a new file with the following code, and save it as mathmltest.xml (Note the .xml extension, not .html). Open the file in Firefox and test the result.

(Note, the following example is simplified a little, for the full details visit the W3 specification).

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="http://www.w3.org/Math/XSL/mathml.xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Testing MathML in a web page</title>
  </head>
  <body>
    <h1>Here's some example MathML</h1>
    <h2>A simple fraction</h2>

    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <mfrac>
        <mrow>
          3
        </mrow>
        <mrow>
          x + 2
        </mrow>
      </mfrac>
    </math>

    <h2>A more complicated fraction</h2>
  </body>
</html>

Unfortunately MathML gets a bit too complicated to do anything too flash yet, so the following challenges just help apply the above example. Try adding an extra section to your file for each of the challenges below:

A more complicated fraction

$x=-{\frac {b}{2a}}\$

An advanced equation (hard)

$x_{=}{\frac {-b+(b^{2}-4ac)}{2a}}.$

Here is a site which generates Math ML using simple computer symbols to make the equation and then translates it. MathML Central

Challenge 6: Creating a Google sitemap

What is a Sitemap for?

First we need to find out what a Google sitemap is for. In summary, What is a Sitemap and why should I have one? from Google says:

A Sitemap file lets you tell us about all the pages on your site,
and optionally, information about those pages, such as which are 
most important and how often they change. 

By submitting a Sitemap file, you can take control of the first 
part of the crawling/indexing processes: our discovery of the pages.

What does the XML Sitemap file look like?

Then find out what the XML file should look like: Using the sitemap protocol (This page also has an example of a Google sitemap).

Now you may be ready to:

Create a Google sitemap for a small site of yours (perhaps your portfolio site)
Validate your sitemap using smart-it-consulting's free validator.

How do I submit my google sitemap?

Once you've created your sitemap, you can follow the instructions on About Google Sitemaps to learn where abouts your file needs to go on your server and how to submit it with Google.

Challenge 7: An XML file to store CD's (or Movies, or Model airplanes)

So far we've created XML files where the format of the XML has already been specified by someone else. For example, when we created our SVG file, someone else had already specified that <rect> and <circle> are valid elements (but <banana> is not!). Take a minute now to go back and see what elements were allowed for:

RSS.
MathML.
your Google site map.
XHTML. (You should be able to name lots of valid elements for XHTML!)

Now it's time to create your own XML file, where you make up your own descriptive elements! Here's an example of an XML document describing a school class:

<?xml version="1.0"?>
<class>
  <facilitator>Susan Smith</facilitator>
  <location>B105</location>
  <students>

    <student type="fulltime">
      <lastname>Gold</lastname>
      <firstname>Rose</firstname>
      <dob>
        <year>1980</year>
        <month>3</month>
        <day>1</day>
      </dob>
    </student>

    <student type="parttime">
      <lastname>Weatherboard</lastname>
      <firstname>James</firstname>
      <dob>25/5/1980</dob>
    </student>

  </students>
</class>

Your challenge is to create an XML file to describe the relevant information from one of the following:

A CD album
A DVD library (just include the info from 2 or 3 DVD's)
A product catalogue from a shop of your choice. (again, just include the info from 2 or 3 products)
Something of your own choice (check with your facilitator)

The key problem that you will face is deciding the best way to structure your XML file (as there will be many ways you can do it!) When you've finished, it will be very helpful to get together with others and discuss your decisions.

Interlude: Well-formed XML versus valid XML

Question: What are the key rules that you need to follow when creating any XML document (such as the XHTML we've been creating since day one!):

Every element must have an opening and closing tag.
Each document must have one and only one root element.
Attributes must have either single or double quotes around the text.
Special characters must be escaped (<, >, &, " and ').

These requirements actually ensure that the XML document is well-formed. If you didn't manage to identify five or six requirements (or even if you did), do a bit of research to find out what the requirements for a well-formed xml (or xhtml) document are. Hopefully you'll find that you've been doing these since you started to learn XHTML!

But does it mean that your document is valid? Here's an example snippet of some XHTML that uses mixed content:

  <p>A paragraph of text that is <strong>really important</p></strong>

Now here's a snippet of XHTML that is well-formed and uses mixed content.

  <p>A paragraph of text that is <bananas>really important</bananas></p>

OK, so that example might be very obvious, here's another snippet of XHTML that is well-formed but also uses mixed content.

  <p>A paragraph of text with a list:
      <ul>
        <li>Point 1</li>
        <li>Point 2</li>
      </ul>
  </p>

A file is valid if it passes validation with an XML Schema.

Challenge 8: Editing an XML Doctype

For a long time, you've added the following line to your XHTML files:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

but do you know what it actually does? We're going to find out in this challenge! It's called a Document Type Declaration (or DTD for short).

W3Schools have a great introduction to DTD's that provides an example with an explanation. Read through this introduction and then:

Copy-n-paste the w3schools example XML file with the embedded DTD into the W3Schools XML validator and check that it validates (Note: You'll need to use Internet Explorer).
Now change the <from> element to <sender> (both the opening and closing tags). Try validating now... even though your XML file is well-formed, does it validate?

Now, consider the following XML file:

<appointment>
  <date>19/6/2006</date>
  <time>10:30</time>
  <name>Jerry Flair</name>
  <doctor>Sue Flora</doctor>
</appointment>

Challenges:

Create a DTD for this XML file and test that it works (using the validator).
Make a copy of your file, and using the info from the W3Schools intro to modify your file so that it uses an external DTD. Upload your XML file and DTD to your hosting and validate it (again using the W3Schools XML validator).

Extra challenges (for the keen!)

Improved the way Date's are stored in the XML file, and update the DTD accordingly
Create a DTD for your XML file that you created in Challenge 7. You can use the W3Schools validator to validate your own file too!

Challenge 9: (Optional) Creating an XML Schema

XML Schemas allow you to validate the structure of XML documents. Unlike DTDs, XML Schemas also have data types that can be associated with each of the "leaves" of your document tree. XML Schemas are usually created with graphical modeling tools but advanced users can also enter them using a text editor.

Stub

This section is a stub. You can help Wikiversity by expanding it.