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

2.  Course Evaluations  You will do evaluations for your TA on Wednesday/Thursday this week  You will evaluate me on Friday  Week 10 GoPost Discussions  Due by next Wednesday  Bring clickers to class on Friday  Yes, there will be a quiz (an easy one) 2012-05-30Katherine Deibel, Fluency in Information Technology2

3.  We have mentioned XML several times in class  An extremely versatile tool  Commonly used for representing metadata in databases  Today, we show how to use XML for managing your own data without having to use a DBMS 2012-05-30Katherine Deibel, Fluency in Information Technology3

4.  We will build a flat-file database using XML of personally interesting data  Chapter 17 shows the iDiary  We will then stylize the data by developing an XSL description  We will end by displaying the XML using a only a web browser 2012-05-30Katherine Deibel, Fluency in Information Technology4

5.  Chapter 17 presents the iDiary  We will do something much simpler: a travelogue of places I've visited 2012-05-30Katherine Deibel, Fluency in Information Technology5

6.  The travel log will give data for each country visited as  Country Name  Country’s Flag  Cities and Sights visited  That series of countries forms a list  What was toured form a sublist inside each country 2012-05-30Katherine Deibel, Fluency in Information Technology6

7.  XML does not have a fixed set of tags  You create your own:  2012-05-30Katherine Deibel, Fluency in Information Technology7

8. 2012-05-30Katherine Deibel, Fluency in Information Technology8 Hungary Budapest Buda Castle Vajdahunyad Castle Statue of Anonymus root tagattributemixed tags

9. 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-05-30Katherine Deibel, Fluency in Information Technology9

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

11.  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-05-30Katherine Deibel, Fluency in Information Technology11 Info for tagsight entry Flag display heresight entry … Info for tagsight entry Flag display heresight entry …

12. Travelogue body {background-color: black; color: gray; font-family: arial; } table {border: solid white 3px; } Places I've Traveled XML magic happens here 2012-05-30Katherine 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-05-30Katherine Deibel, Fluency in Information Technology13 This is creating a template for how the browser should render the tag in the XML file. Since is the root element, its styling makes the overall HTML page.

14. Travelogue body {background-color: black; color: lightgray; font-family: arial; } table {border: solid white 3px; } Places I've Traveled XML data goes here 2012-05-30Katherine Deibel, Fluency in Information Technology14 tells the browser to apply stylings to any XML tags within the current one (i.e., )

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

16.  One template for every tag used  Country (table row)  Name (second-level header)  Sight (one per line)  City (third-level header)  Means fill in the contents of that XML tag 2012-05-30Katherine Deibel, Fluency in Information Technology16

17.  Have to add one line to the XML file 2012-05-30Katherine Deibel, Fluency in Information Technology17

18.  We see the  Basic HTML structure  Table format  Text styling  All of this was from an XML file!!! 2012-05-30Katherine Deibel, Fluency in Information Technology18

19.  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-05-30Katherine Deibel, Fluency in Information Technology19

20. 2012-05-30Katherine Deibel, Fluency in Information Technology20  Of course, the image files are found where the paths indicate

21.  If we want to update the travelogue, we need only to update the XML file  I've also visited Canada  Let's add that now  What we just saw  We only entered information  We did not have to put in the style 2012-05-30Katherine Deibel, Fluency in Information Technology21

22.  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-05-30Katherine Deibel, Fluency in Information Technology22