Lecture 5: XML

<lecture number=“8” date=“2-8-2007”><lecturer> Simon McCallum</lecturer><slide number=“1”>

<frame pos=“0,0” width=“1024” height =“40”> <img src=“compSFDV2001.gif”>

</frame><frame pos= “40,70” width=“500” height =“30”>

........</frame>.........

</slide></lecture>

SFDV2001 – Web Development

11/09/07 (SFDV2001:8)XML 2

Markup Marking information

more than the text that you see General concept is meta-information

Plays – Mark what the actors do

HORATIO.Peace! Who comes here?[Enter young Osric, a courtier.]

OSRIC.Your lordship is right welcome back to Denmark.

HAMLET.I humbly thank you, sir. [Aside to Horatio] Dost know this waterfly?

11/09/07 (SFDV2001:8)XML 3

Markup Meta information Letting the computer in on the secret Additional information Markup everywhere

Wordprocessing Computer Games Web - HTML Latex typesetting language

11/09/07 (SFDV2001:8)XML 4

Background GML

Generalised Markup Language – 1967 Used in the printing industry

SGML - Standardised GML This is the basis for HTML, XML, MML most

modern markup languages. IBM moved 90% of its documents to SGML in the

1980's

11/09/07 (SFDV2001:8)XML 5

SGML Containers are a core concept. Define data using a container around it.

Hierarchy of containers Nesting of containers Structure of document

Empty container Validator

Automated checking. Concept of a Valid document

11/09/07 (SFDV2001:8)XML 6

HTML 1991 – HTML

A markup for displaying on computer screens Combines instructions about display with data Very limited subset of SGML Easy to learn

HTML too limited for general documents SGML too complex for most people

XML

11/09/07 (SFDV2001:8)XML 7

XML eXtensible Markup Language.

Subset of SGML Allows the user to define their own markup. All your information is marked-up.

Defining your own tags. <name>John Smith</name> <addr>22 Any Street</addr> <wine>Chard Farm Riesling</wine>

11/09/07 (SFDV2001:8)XML 8

XML Example

Movie markup. Easy to write programs to search for actors etc.

<?xml version="1.0"?><MovieCatalog> <movie> <title>The Matrix</title> <length>136</length> <genre>Sci-Fi and Fantasy</genre> <actors> <actor>Keanu Reeves</actor> <actor>Laurence Fishburne</actor> <actor>Carrie Ann Moss</actor> </actors> <datereleased>1999</datereleased> <director>Wachowski Brothers</director> <format>DVD</format> </movie></MovieCatalog>

11/09/07 (SFDV2001:8)XML 9

Elements Elements = tag <element attribute=“value”> ... </element> Empty <element attribute=“value” />

Notation (center|left|right) = center or left or right '?' 0 or 1 '*' 0 or more '+' 1 or more <!ELEMENT ul (li)+>

11/09/07 (SFDV2001:8)XML 10

DTD Document Type Definition

Used to define the legal building blocks of an XML document.

It defines the document structure with a list of legal elements.

A DTD can be declared inline in your XML document, or as an external reference.

Define many types of documents Word documents, web documents, vector graphics,

student records, saved files, ….

11/09/07 (SFDV2001:8)XML 11

DTD Example<?xml version="1.0"?><?xml-stylesheet href=“list.xsl" type="text/xsl"?><!DOCTYPE bookcatalog [ <!ELEMENT book (author , title, publisher, year)> <!ELEMENT author (#PCDATA)> <!ELEMENT title (#PCDATA)> <!ELEMENT publisher (#PCDATA)> <!ELEMENT year (#PCDATA)> ]>

<bookcatalog> <book> <author>Joel Sklar</author> <title>Princeples of Web Design</title> <publisher>THOMSOM</publisher> <year>2006</year> </book> </bookcatalog>

11/09/07 (SFDV2001:8)XML 12

XML Example

book markup book Document Type Definition

<?xml version="1.0"?><bookcatalog> <book> <author>Joel Sklar</author> <title>Princeples of Web Design</title> <publisher>THOMSOM</publisher> <year>2006</year> </book> </bookcatalog>

11/09/07 (SFDV2001:8)XML 13

Multiple views People want to see data in different ways XML allows data to be stored and validated Once you have marked up information you can

choose how to view it. Select parts of information. Change the way things are displayed.

Printing is different to screen or mobile.

11/09/07 (SFDV2001:8)XML 14

Presentation of XML CSS

Can display just the XML data but not really enough for interesting presentation

XSL eXtensible Stylesheet Language Can be use with or instead of CSS

More specific and extensible Allows processing

Sorting order Simple arithmetic Conditional statements

XSL translation Create the following file Save it as “list.xsl”

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"><xsl:template match="bookcatalog">

<HTML><HEAD> <TITLE>My Book</TITLE> </HEAD><BODY>

<xsl:apply-templates/></BODY>

</HTML></xsl:template>

<xsl:template match="book"><UL>

<xsl:apply-templates/></UL>

</xsl:template>

Continue….. XSL translation

<xsl:template match="author"><LI> author: <xsl:apply-templates/> </LI>

</xsl:template>

<xsl:template match="title"><LI> title: <xsl:apply-templates/> </LI>

</xsl:template>

<xsl:template match="publisher"><LI> publisher: <xsl:apply-templates/> </LI>

</xsl:template>

<xsl:template match="year"><LI> year: <xsl:apply-templates/> </LI>

</xsl:template></xsl:stylesheet>

See XML example folder for another example by using table

11/09/07 (SFDV2001:8)XML 17

Result

<HTML><HEAD> <TITLE>My Book</TITLE> </HEAD><BODY>

<UL> <LI> author: Joel Sklar</LI>

<LI> title: Princeples of Web Design</LI> <LI> publisher: THOMSOM</LI><LI> year: 2006.</LI>

</UL></BODY>

</HTML>

<bookcatalog> <book> <author>Joel Sklar</author>

<xsl:template pattern = “bookcatalog "><HTML><HEAD> <TITLE>My book</TITLE> </HEAD>

<BODY><xsl:apply-templates/>

</BODY></HTML>

</xsl:template>

11/09/07 (SFDV2001:8)XML 18

Result

<bookcatalog> <book> <author>Joel Sklar</author>

<xsl:template pattern = “book"><UL>

<xsl:apply-templates/></UL>

</xsl:template>

<HTML><HEAD> <TITLE>My Book</TITLE> </HEAD><BODY>

<UL> <LI> author: Joel Sklar</LI>

<LI> title: Princeples of Web Design</LI> <LI> publisher: THOMSOM</LI><LI> year: 2006.</LI>

</UL></BODY>

</HTML>

11/09/07 (SFDV2001:8)XML 19

Result

<bookcatalog> <book> <author>Joel Sklar</author>

<xsl:template pattern = “author"><LI> author:

<xsl:apply-templates/> </LI></xsl:template>

<HTML><HEAD> <TITLE>My Book</TITLE> </HEAD><BODY>

<UL> <LI> author: Joel Sklar</LI>

<LI> title: Princeples of Web Design</LI> <LI> publisher: THOMSOM</LI><LI> year: 2006.</LI>

</UL></BODY>

</HTML>

11/09/07 (SFDV2001:8)XML 20

Information Interchange Given information markup you can move data

between applications. Move data between applications. Edit data with other programs. Create files in Word and have them look the

same on the web Move the information from one machine to

another PDA, cellphones, consoles, ...

11/09/07 (SFDV2001:8)XML 21

XML Disadvantages To many DTDs lead to a lack of consistency. Poor implementations lead to inconsistent

recognition. Very precise.

Browsers are not able to recover from errors as they do for HTML.

Separate files are usually used for the XML document, the DTD and the presentation.

Bloated documents if you just need a specific part of the information

11/09/07 (SFDV2001:8)XML 22

MS and XML “Office 12” to be fully XML based. Why?

Officially the short answer is because improved file and data management, improved interoperability, and a published file-format specification

This is what customers and governments have asked us for.

More likely Laws being passed about open formats for public

documents. Office will print PDF for similar reasons

Steven Sinofsky

11/09/07 (SFDV2001:8)XML 23

XPS BUT..... Microsoft still wants control so

XPS - XML Paper Specification, the rules on interpreting the XML format.

They have created a licence to use their XML definitions

Licence incompatible with other Open Source Software licences

As it is not a community developed format they can change it without warning and still want control over how it is implemented

Open Office has been XML for several years

11/09/07 (SFDV2001:8)XML 24

XHTML The implementation of HTML as an XML

application - Readily viewed, edited, and validated with standard

XML tools. XHTML documents can be written to operate as

well or better in existing HTML 4-conforming browsers.

XHTML documents can utilize applications that rely upon either the HTML Document Object Model or the XML Document Object Model.

XHTML more likely to be interoperable in the future. XHTML more extendable than HTML.

11/09/07 (SFDV2001:8)XML 25

HTML - XHTML differences You will notice

All tags must have an ending <p> must have </p> empty tags such as <br> become <br /> <img ..... />

All attribute values must be quoted. eg size=“3” Makes using the DOM easy

Everything is encapsulated with no ambiguity. NOTE: your first project is in HTML NOT

XHTML

11/09/07 (SFDV2001:8)XML 26

Newsfeeds - RSS XML can be used for website data. Newsfeed:

RSS Rich Site Summary. Make a file that records changes to the website. Publication date, enclosures, links.

Aggregator – Collect XML and display them On the web Becoming very common.

11/09/07 (SFDV2001:8)XML 27

Other XML Applications There are a number of common web based

XML document formats RDF

Resource Documents Framework. Used to give meta data about a document

SVG Vector graphics. Small graphics IE does not support it so not used

SMIL Video, images and audio Timing imformation

MathML – Maths markup. HTML terrible for math

11/09/07 (SFDV2001:8)XML 28

DOM – Document Object Model Describes the structure of your document. Think of tags as containers

Folders in folders in folders…. Allows you to access the objects in the structure.

The DOM Allows parts of an HTML page to be easily

identified. Provides an Application Programming Interface

(API) for HTML. Enables site developers to modify the content and

visual presentation of HTML easily. Is language independent so can be used

universally.

11/09/07 (SFDV2001:8)XML 29

DOM – Document Object Model

Model of document allows you to access things like document.body.bgColor Document.head.title

<html> <head>

<script type="text/javascript"> function ChangeColor() {

document.body.bgColor="yellow" } </script>

</head> <body onclick="ChangeColor()">

Click on this document!</body>

</html>

11/09/07 (SFDV2001:8)XML 30

DOM Hierarchy

<html> <head>

<script type="text/javascript">

function ChangeColor() {

document.body.bgColor="yellow" } </script><title>

Click test</title>

</head> <body onclick="ChangeColor()">

Click on this document!</body>

</html> a

html

head body

script title