Lecture 5 XML


Published on

Published in: Education, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Lecture 5 XML

  1. 1. 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
  2. 2. Markup <ul><li>Marking information </li></ul><ul><ul><li>more than the text that you see </li></ul></ul><ul><ul><li>General concept is meta-information </li></ul></ul><ul><li>Plays – Mark what the actors do </li></ul>11/09/07 (SFDV2001:8)XML 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?
  3. 3. Markup <ul><li>Meta information </li></ul><ul><li>Letting the computer in on the secret </li></ul><ul><li>Additional information </li></ul><ul><li>Markup everywhere </li></ul><ul><ul><li>Wordprocessing </li></ul></ul><ul><ul><li>Computer Games </li></ul></ul><ul><ul><li>Web - HTML </li></ul></ul><ul><ul><li>Latex typesetting language </li></ul></ul>11/09/07 (SFDV2001:8)XML
  4. 4. Background <ul><li>GML </li></ul><ul><ul><li>Generalised Markup Language – 1967 </li></ul></ul><ul><ul><li>Used in the printing industry </li></ul></ul><ul><li>SGML - Standardised GML </li></ul><ul><ul><li>This is the basis for HTML, XML, MML most modern markup languages. </li></ul></ul><ul><ul><li>IBM moved 90% of its documents to SGML in the 1980's </li></ul></ul>11/09/07 (SFDV2001:8)XML
  5. 5. SGML <ul><li>Containers are a core concept. </li></ul><ul><li>Define data using a container around it. </li></ul><ul><ul><li>Hierarchy of containers </li></ul></ul><ul><ul><li>Nesting of containers </li></ul></ul><ul><ul><li>Structure of document </li></ul></ul><ul><li>Empty container </li></ul><ul><li>Validator </li></ul><ul><ul><li>Automated checking. </li></ul></ul><ul><ul><li>Concept of a Valid document </li></ul></ul>11/09/07 (SFDV2001:8)XML
  6. 6. HTML <ul><li>1991 – HTML </li></ul><ul><ul><li>A markup for displaying on computer screens </li></ul></ul><ul><ul><li>Combines instructions about display with data </li></ul></ul><ul><ul><li>Very limited subset of SGML </li></ul></ul><ul><ul><li>Easy to learn </li></ul></ul><ul><li>HTML too limited for general documents </li></ul><ul><li>SGML too complex for most people </li></ul><ul><li>XML </li></ul>11/09/07 (SFDV2001:8)XML
  7. 7. XML <ul><li>e X tensible M arkup L anguage. </li></ul><ul><ul><li>Subset of SGML </li></ul></ul><ul><ul><li>Allows the user to define their own markup. </li></ul></ul><ul><ul><li>All your information is marked-up. </li></ul></ul><ul><li>Defining your own tags. </li></ul><ul><ul><li>< name >John Smith</ name > </li></ul></ul><ul><ul><li>< addr >22 Any Street</ addr > </li></ul></ul><ul><ul><li>< wine >Chard Farm Riesling</ wine > </li></ul></ul>11/09/07 (SFDV2001:8)XML
  8. 8. XML Example <ul><li>Movie markup. </li></ul><ul><li>Easy to write programs to search for actors etc. </li></ul>11/09/07 (SFDV2001:8)XML <?xml version=&quot;1.0&quot;?> <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>
  9. 9. Elements <ul><li>Elements = tag </li></ul><ul><li><element attribute=“value”> ... </element> </li></ul><ul><li>Empty <element attribute=“value” /> </li></ul><ul><li>Notation </li></ul><ul><ul><li>(center|left|right) = center or left or right </li></ul></ul><ul><ul><li>'?' 0 or 1 </li></ul></ul><ul><ul><li>'*' 0 or more </li></ul></ul><ul><ul><li>'+' 1 or more <!ELEMENT ul (li)+> </li></ul></ul>11/09/07 (SFDV2001:8)XML
  10. 10. DTD <ul><li>Document Type Definition </li></ul><ul><ul><li>Used to define the legal building blocks of an XML document. </li></ul></ul><ul><ul><li>It defines the document structure with a list of legal elements. </li></ul></ul><ul><ul><li>A DTD can be declared inline in your XML document, or as an external reference. </li></ul></ul><ul><li>Define many types of documents </li></ul><ul><ul><li>Word documents, web documents, vector graphics, student records, saved files, …. </li></ul></ul>11/09/07 (SFDV2001:8)XML
  11. 11. DTD Example 11/09/07 (SFDV2001:8)XML <?xml version=&quot;1.0&quot;?> <?xml-stylesheet href=“list.xsl&quot; type=&quot;text/xsl&quot;?> <!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>
  12. 12. XML Example <ul><li>book markup </li></ul><ul><ul><li>book Document Type Definition </li></ul></ul>11/09/07 (SFDV2001:8)XML <?xml version=&quot;1.0&quot;?> <bookcatalog> <book> <author>Joel Sklar</author> <title>Princeples of Web Design</title> <publisher>THOMSOM</publisher> <year>2006</year> </book> </bookcatalog>
  13. 13. Multiple views <ul><li>People want to see data in different ways </li></ul><ul><li>XML allows data to be stored and validated </li></ul><ul><li>Once you have marked up information you can choose how to view it. </li></ul><ul><ul><li>Select parts of information. </li></ul></ul><ul><ul><li>Change the way things are displayed. </li></ul></ul><ul><li>Printing is different to screen or mobile. </li></ul>11/09/07 (SFDV2001:8)XML
  14. 14. Presentation of XML <ul><li>CSS </li></ul><ul><ul><li>Can display just the XML data but not really enough for interesting presentation </li></ul></ul><ul><li>XSL </li></ul><ul><ul><li>eXtensible Stylesheet Language </li></ul></ul><ul><ul><li>Can be use with or instead of CSS </li></ul></ul><ul><ul><ul><li>More specific and extensible </li></ul></ul></ul><ul><ul><ul><li>Allows processing </li></ul></ul></ul><ul><ul><ul><ul><li>Sorting order </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Simple arithmetic </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Conditional statements </li></ul></ul></ul></ul>11/09/07 (SFDV2001:8)XML
  15. 15. XSL translation <ul><li>Create the following file </li></ul><ul><li>Save it as “ list.xsl” </li></ul><xsl:stylesheet xmlns:xsl=&quot;http://www.w3.org/1999/XSL/Transform&quot; version=&quot;1.0&quot;> <xsl:template match=&quot;bookcatalog&quot;> <HTML> <HEAD> <TITLE>My Book</TITLE> </HEAD> <BODY> <xsl:apply-templates/> </BODY> </HTML> </xsl:template> <xsl:template match=&quot;book&quot;> <UL> <xsl:apply-templates/> </UL> </xsl:template>
  16. 16. Continue….. XSL translation <xsl:template match=&quot;author&quot;> <LI> author: <xsl:apply-templates/> </LI> </xsl:template> <xsl:template match=&quot;title&quot;> <LI> title: <xsl:apply-templates/> </LI> </xsl:template> <xsl:template match=&quot;publisher&quot;> <LI> publisher: <xsl:apply-templates/> </LI> </xsl:template> <xsl:template match=&quot;year&quot;> <LI> year: <xsl:apply-templates/> </LI> </xsl:template> </xsl:stylesheet> See XML example folder for another example by using table
  17. 17. Result 11/09/07 (SFDV2001:8)XML <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 &quot;> <HTML> <HEAD> <TITLE>My book</TITLE> </HEAD> <BODY> <xsl:apply-templates/> </BODY> </HTML> </xsl:template> 
  18. 18. Result 11/09/07 (SFDV2001:8)XML <bookcatalog> < book > <author>Joel Sklar</author>       <xsl:template pattern = “ book &quot;> <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>
  19. 19. Result 11/09/07 (SFDV2001:8)XML <bookcatalog> <book> < author >Joel Sklar</author>  <xsl:template pattern = “ author &quot;> <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>
  20. 20. Information Interchange <ul><li>Given information markup you can move data between applications. </li></ul><ul><li>Move data between applications. </li></ul><ul><li>Edit data with other programs. </li></ul><ul><li>Create files in Word and have them look the same on the web </li></ul><ul><li>Move the information from one machine to another </li></ul><ul><li>PDA, cellphones, consoles, ... </li></ul>11/09/07 (SFDV2001:8)XML
  21. 21. XML Disadvantages <ul><li>To many DTDs lead to a lack of consistency. </li></ul><ul><li>Poor implementations lead to inconsistent recognition. </li></ul><ul><li>Very precise. </li></ul><ul><ul><li>Browsers are not able to recover from errors as they do for HTML. </li></ul></ul><ul><li>Separate files are usually used for the XML document, the DTD and the presentation. </li></ul><ul><li>Bloated documents if you just need a specific part of the information </li></ul>11/09/07 (SFDV2001:8)XML
  22. 22. MS and XML <ul><li>“ Office 12” to be fully XML based. </li></ul><ul><li>Why? </li></ul><ul><ul><li>Officially the short answer is because </li></ul></ul><ul><ul><ul><li>improved file and data management, </li></ul></ul></ul><ul><ul><ul><li>improved interoperability, and </li></ul></ul></ul><ul><ul><ul><li>a published file-format specification </li></ul></ul></ul><ul><ul><li>This is what customers and governments have asked us for. </li></ul></ul><ul><li>More likely </li></ul><ul><ul><li>Laws being passed about open formats for public documents. </li></ul></ul><ul><li>Office will print PDF for similar reasons </li></ul>11/09/07 (SFDV2001:8)XML Steven Sinofsky
  23. 23. XPS <ul><li>BUT..... </li></ul><ul><li>Microsoft still wants control so </li></ul><ul><ul><li>XPS - XML Paper Specification, the rules on interpreting the XML format. </li></ul></ul><ul><ul><li>They have created a licence to use their XML definitions </li></ul></ul><ul><ul><li>Licence incompatible with other Open Source Software licences </li></ul></ul><ul><ul><li>As it is not a community developed format they can change it without warning and still want control over how it is implemented </li></ul></ul><ul><li>Open Office has been XML for several years </li></ul>11/09/07 (SFDV2001:8)XML
  24. 24. XHTML <ul><li>The implementation of HTML as an XML application - </li></ul><ul><ul><li>Readily viewed, edited, and validated with standard XML tools. </li></ul></ul><ul><ul><li>XHTML documents can be written to operate as well or better in existing HTML 4-conforming browsers. </li></ul></ul><ul><ul><li>XHTML documents can utilize applications that rely upon either the HTML Document Object Model or the XML Document Object Model. </li></ul></ul><ul><ul><li>XHTML more likely to be interoperable in the future. </li></ul></ul><ul><ul><li>XHTML more extendable than HTML. </li></ul></ul>11/09/07 (SFDV2001:8)XML
  25. 25. HTML - XHTML differences <ul><li>You will notice </li></ul><ul><ul><li>All tags must have an ending </li></ul></ul><ul><ul><ul><li><p> must have </p> </li></ul></ul></ul><ul><ul><ul><li>empty tags such as <br> become <br /> </li></ul></ul></ul><ul><ul><ul><li><img ..... /> </li></ul></ul></ul><ul><ul><li>All attribute values must be quoted. eg size=“3” </li></ul></ul><ul><li>Makes using the DOM easy </li></ul><ul><ul><li>Everything is encapsulated with no ambiguity. </li></ul></ul><ul><li>NOTE : your first project is in HTML NOT XHTML </li></ul>11/09/07 (SFDV2001:8)XML
  26. 26. Newsfeeds - RSS <ul><li>XML can be used for website data. </li></ul><ul><li>Newsfeed: </li></ul><ul><ul><li>RSS Rich Site Summary. </li></ul></ul><ul><ul><li>Make a file that records changes to the website. </li></ul></ul><ul><ul><li>Publication date, enclosures, links. </li></ul></ul><ul><li>Aggregator – Collect XML and display them </li></ul><ul><li>On the web </li></ul><ul><li>Becoming very common. </li></ul>11/09/07 (SFDV2001:8)XML
  27. 27. Other XML Applications <ul><li>There are a number of common web based XML document formats </li></ul><ul><ul><li>RDF </li></ul></ul><ul><ul><ul><li>Resource Documents Framework. </li></ul></ul></ul><ul><ul><ul><li>Used to give meta data about a document </li></ul></ul></ul><ul><ul><li>SVG </li></ul></ul><ul><ul><ul><li>Vector graphics. </li></ul></ul></ul><ul><ul><ul><li>Small graphics IE does not support it so not used </li></ul></ul></ul><ul><ul><li>SMIL </li></ul></ul><ul><ul><ul><li>Video, images and audio </li></ul></ul></ul><ul><ul><ul><li>Timing imformation </li></ul></ul></ul><ul><ul><li>MathML – Maths markup. HTML terrible for math </li></ul></ul>11/09/07 (SFDV2001:8)XML
  28. 28. DOM – Document Object Model <ul><li>Describes the structure of your document. </li></ul><ul><li>Think of tags as containers </li></ul><ul><ul><li>Folders in folders in folders…. </li></ul></ul><ul><ul><li>Allows you to access the objects in the structure. </li></ul></ul><ul><li>The DOM </li></ul><ul><ul><li>Allows parts of an HTML page to be easily identified. </li></ul></ul><ul><ul><li>Provides an Application Programming Interface (API) for HTML. </li></ul></ul><ul><ul><li>Enables site developers to modify the content and visual presentation of HTML easily. </li></ul></ul><ul><ul><li>Is language independent so can be used universally. </li></ul></ul>11/09/07 (SFDV2001:8)XML
  29. 29. DOM – Document Object Model <ul><li>Model of document allows you to access things like </li></ul><ul><ul><li>document.body.bgColor </li></ul></ul><ul><ul><li>Document.head.title </li></ul></ul>11/09/07 (SFDV2001:8)XML <html> <head> <script type=&quot;text/javascript&quot;> function ChangeColor() { document.body.bgColor=&quot;yellow&quot; } </script> </head> <body onclick=&quot;ChangeColor()&quot;> Click on this document! </body> </html>
  30. 30. DOM Hierarchy 11/09/07 (SFDV2001:8)XML <html> <head> <script type=&quot;text/javascript&quot;> function ChangeColor() { document.body.bgColor=&quot;yellow&quot; } </script> <title> Click test </title> </head> <body onclick=&quot;ChangeColor()&quot;> Click on this document! </body> </html> a html head body script title