1. Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1

2.  XML is an extremely versatile tool.  Today, we show how to use it effectively for your own data. 2012-03-07Katherine Deibel, Fluency in Information Technology2 © Lawrence Snyder 2004

3.  Build a database using XML of personally interesting data  Chapter 17 shows the iDiary, a collection of the most interesting stuff  Develop an XSL description for its formatting  Display the XML using a browser and it will create a web page display of your database 2012-03-07Katherine Deibel, Fluency in Information Technology3

4.  Instead of the iDiary from chapter 17, we will instead present a similar idea: a basic travelogue 2012-03-07Katherine Deibel, Fluency in Information Technology4

5.  The travel log will give data for each country visited as  Country Name  Country’s Flag  Sights visited  That series of countries forms a list  The sights inside form a sublist 2012-03-07Katherine Deibel, Fluency in Information Technology5

6. You pick the tags and enter the data 2012-03-07Katherine Deibel, Fluency in Information Technology6

7. If we display an XML file without any style information, we just get the “tree” of our data  Good check that all of the tags are right  You get the same view if you look at a raw RSS feed 2012-03-07Katherine Deibel, Fluency in Information Technology7

8.  Like CSS, XSL gives style information, but it does it using XML!  The process 2012-03-07Katherine Deibel, Fluency in Information Technology8 XML Database XML Stylesheet Transformer applies XSL Templates Browser rendering engine Browser Window

9.  Plan the page as if it were XHTML, because it is going to be a list of items in a table:  Black background, sans serif font, gray text, white border 2012-03-07Katherine Deibel, Fluency in Information Technology9 Info for tagsight entry Flag display heresight entry … Info for tagsight entry Flag display heresight entry …

10. Travelogue body {background-color: black; color: gray; font-family: arial; } table {border: solid white 3px; } Places I've Traveled XML magic happens here 2012-03-07Katherine Deibel, Fluency in Information Technology10

11. Travelogue body {background-color: black; color: lightgray; font-family: arial; } table {border: solid white 3px; } Places I've Traveled XML magic happens here 2012-03-07Katherine Deibel, Fluency in Information Technology11

12. Travelogue body {background-color: black; color: lightgray; font-family: arial; } table {border: solid white 3px; } Places I've Traveled XML data goes here 2012-03-07Katherine Deibel, Fluency in Information Technology12

13. Travelogue body {background-color: black; color: lightgray; font-family: arial; } table {border: solid white 3px; } Places I've Traveled XML magic happens here 2012-03-07Katherine Deibel, Fluency in Information Technology13

14.  One template for every tag used  Country  Name  Tour  Sight  Means fill in the contents of that XML tag 2012-03-07Katherine Deibel, Fluency in Information Technology14

15.  Have to add one line to the XML file 2012-03-07Katherine Deibel, Fluency in Information Technology15

16. 2012-03-07Katherine Deibel, Fluency in Information Technology16

17.  We use the country id attribute to create the filename and alt tag  To access the value of an attribute, we  Use the @ symbol 2012-03-07Katherine Deibel, Fluency in Information Technology17

18.  Plus some more styling 2012-03-07Katherine Deibel, Fluency in Information Technology18

19.  XML is extremely versatile for organizing your data however you like with tags you make up  Using XSL you can format your database as if it were a Web page familiar and easy  Once an organization is setup it is trivial to add new information 2012-03-07Katherine Deibel, Fluency in Information Technology19