Fluency with Information Technology INFO100 and CSE100 Katherine Deibel Katherine Deibel, Fluency in Information Technology1

 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) Katherine Deibel, Fluency in Information Technology2

 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 Katherine Deibel, Fluency in Information Technology3

 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 Katherine Deibel, Fluency in Information Technology4

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

 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 Katherine Deibel, Fluency in Information Technology6

 XML does not have a fixed set of tags  You create your own:  Katherine Deibel, Fluency in Information Technology7

Katherine Deibel, Fluency in Information Technology8 Hungary Budapest Buda Castle Vajdahunyad Castle Statue of Anonymus root tagattributemixed tags

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 Katherine Deibel, Fluency in Information Technology9

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

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

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

Travelogue body {background-color: black; color: lightgray; font-family: arial; } table {border: solid white 3px; } Places I've Traveled XML magic happens here Katherine 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.

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

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

 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 Katherine Deibel, Fluency in Information Technology16

 Have to add one line to the XML file Katherine Deibel, Fluency in Information Technology17

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

 We use the country id attribute to create the filename and alt tag  To access the value of an attribute, we  Use symbol Katherine Deibel, Fluency in Information Technology19

Katherine Deibel, Fluency in Information Technology20  Of course, the image files are found where the paths indicate

 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 Katherine Deibel, Fluency in Information Technology21

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