ΣΗΜΑΣΙΟΛΟΓΙΚΟΣ ΙΣΤΟΣ - XML

ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΙΡΑΙΩΣ ΤΜΗΜΑ ΨΗΦΙΑΚΩΝ ΣΥΣΤΗΜΑΤΩΝ ΣΗΜΑΣΙΟΛΟΓΙΚΟΣ ΙΣΤΟΣ - XML Εργαστήριο 4 Στουγιάννου Ελευθερία estoug@unipi.gr

Περιεχόμενα Τέταρτου Εργαστηριακού Μαθήματος XML CSS (CASCADING STYLE SHEETS) Well-Formed XML Documents & CSS Ασκήσεις

Εμφάνιση XML Εγγράφων με Χρήση CSS (1/3) Αν το έγγραφο XML δεν είναι συνδεδεμένο με κάποιο (css) φύλλο στυλ, ο browser θα εμφανίσει απλώς το πλήρες έγγραφο, μαζί με τη σήμανση (ετικέτες και σχόλια), καθώς και τα στοιχεία χαρακτήρων. Ο browser κωδικοποιεί με χρώματα τα διάφορα μέρη του εγγράφου για να κάνει πιο εύκολη την αναγνώρισή τους και εμφανίζει το στοιχείο εγγράφου ως συμπτύξιμο/επεκτάσιμο δέντρο, ώστε να δείξει με σαφήνεια τη λογική δομή του εγγράφου με διάφορα επίπεδα λεπτομερειών. Εμφάνιση εγγράφου XML με χρήση CSS: Αν το έγγραφο XML είναι συνδεδεμένο με κάποιο (css) φύλλο στυλ, ο browser θα εμφανίσει μόνο τα δεδομένα χαρακτήρων των στοιχείων του εγγράφου και θα τα μορφοποιήσει, ακολουθώντας τους κανόνες που παρέχονται στο φύλλο στυλ. Δημιουργούμε ένα αρχείο με κατάληξη.css, όπου μορφοποιούμε τα στοιχεία του εγγράφου, με βάση τους κανόνες CSS. Κάτω από τη δήλωση XML, στον πρόλογο του xml εγγράφου γράφουμε τη γραμμή: <?xml-stylesheet type="text/css" href="όνομα_αρχείου.css"?>

Εμφάνιση XML Εγγράφων με Χρήση CSS (2/3) Το CSS εφαρμόζεται σε: Fonts Borders Colors Placement κ.α. Τα CSS αρχεία περιλαμβάνουν: Selectors (είναι τα elements του xml αρχείου) Universal Selector * : επιλέγει ΌΛΑ τα elements του xml αρχείου, π.χ. *{font-family: Calibri;} Grouping Selectors : σε επιλεγμένα elements εφαρμόζει κάποιο σύνολο από properties, π.χ. Poet, dan { display:block;} Attribute Selectors: αναγνωρίζει συγκεκριμένο element/attribute συνδυασμό, πχ. <POEM TYPE= X > (in xml) POEM[TYPE]{font-family: Arial;} or POEM[TYPE= SONNET ]{font-family:arial;} (in css) ID Selectors #: π.χ. (in xml) <STANZA ID= sr > (in css) STANZA#sr{font-zize:12px;} Declarations (name/value ζευγάρια που ορίζουν πως το περιεχόμενο των xml elements θα εμφανίζεται στον browser, π.χ. {display:block;} )

Εμφάνιση XML Εγγράφων με Χρήση CSS (3/3) PSEUDO-ELEMENTS 1 η γραμμή ενός element: CHAPTER:first-line {fontfamily:calibri;} 1 ο γράμμα ενός element: CHAPTER:first-letter {color:red;} Θέση πριν το element: STANZA:before{content: a) } Θέση μετά το element: STANZA:after{content: a) }

Μερικά Παραδείγματα CSS Declarations (1/2) display display: none; display: inline; display: block; display: list-item; margin margin: 5%; margin: 10px; margin-top: 2em; margin-left: 85%; margin-right: 50px; margin-bottom: 1em; text-indent text-indent: 2em; text-indent: 3%; Επιπλέον, για τη δημιουργία πινάκων υπάρχουν: display: table; display: table-row; display: table-cell; + display: table-caption; display: table-headergroup; text-align text-align: right; text-align: left; text-align: center; text-align: justify; list-style list-style: circle; list-style: square; list-style: disc; list-style: decimal; font-family font-family: helvetica; font-family: times, serif; font-family: 'cosmic cartoon', sans-serif;

Μερικά Παραδείγματα CSS Declarations (2/2) font-size font-size: 12pt; font-size: small; font-size: x-small; font-size: large; font-size: xx-large; font-style font-style: normal; font-style: italic; font-weight font-weight: normal; font-weight: bold; border border: 5px solid red; border: border-width border-style border-color initial inherit; background-color background-color: green; background-color : #0D3467; color color: white; color: # 0D3467; padding padding:10px 5px 15px 20px; top padding is 10px right padding is 5px bottom padding is 15px left padding is 20px padding-top: 2cm; padding-bottom: 2cm;

Μέθοδοι Δήλωσης CSS Selectors Selection of an element: Π.χ. Step { display: list-item; list-style-type: decimal; } Selection of a child element: mother_element > child_element Π.χ. Step > Title {... } Selection of descendant element (child, great-child, etc.): mother_element element Π.χ. Step Title {... } Combinations: Π.χ. DIV OL>LI P Σημαίνει: όλα τα "P" που βρίσκονται κάπου μέσα σε ένα LI μιας λίστας OL που βρίσκεται μέσα σε ένα DIV. Selection of siblings (elements next to each other sharing the same parent): sister_element + sister_element Π.χ. chapter + section { margin-top: -5mm } Selection of an element that has a certain attribute: element[attribute] Π.χ. Title[status] { color: blue; } Selection of an element that has an attribute with a given value: element[attribute="value"] Π.χ. Title[status="draft"] { color: red; }

Βασικές Οδηγίες γραφής CSS σε XML Τρείς βασικές οδηγίες όταν γράφετε ένα CSS για XML: Χρησιμοποιήστε το root element για να ορίσετε margins, default font, κ.α. Αποφασίστε ποια elements θα αποτελέσουν blocks and και ποια θα είναι inline. Αναγνωρίστε ποια είναι τα "special elements", όπως π.χ. τίτλοι και λίστες. Θυμηθείτε ότι αν το stylesheet που γράψατε δεν εμφανίζεται όπως θα έπρεπε, τότε θα πρέπει να ελέγξετε (α) την εγκυρότητα του css, (β) το compatibility table και (γ) τη συμβατότητα του Browser που χρησιμοποιείτε στα css features που έχετε χρησιμοποιήσει.

Χρήση CSS σε XML: Σύνδεση των δύο αρχείων family.xml (Ανοίξτε το Notepad++ και δημιουργήστε το παρακάτω αρχείο) Έπειτα δημιουργήστε το αρχείο css (stylesheetfamily.css) που καλείται στο xml και ανοίξτε στο browser το xml αρχείο.

Απλό Παράδειγμα χρήσης CSS σε XML (1/5) peoples.xml Δημιουργήστε στο Notepad++ το παρακάτω XML έγγραφο που κρατάει μία λίστα με στοιχεία συζύγων. Αποθηκεύστε το με το όνομα peoples.xml και ανοίξτε το με έναν browser. Τι παρατηρείτε?

Απλό Παράδειγμα χρήσης CSS σε XML (2/5) peoplescss.css Δημιουργήστε στο Notepad++ το παρακάτω css αρχείο, με βάση το οποίο θα μορφοποιήσουμε τη λίστα με τα στοιχεία των συζύγων που δίνεται μέσω του xml εγγράφου. Συνδέστε το css αρχείο με το όνομα peoples.xml και ανοίξτε έπειτα το xml αρχείο με έναν browser. Τι παρατηρείτε? peoples.xml peoplescss.css Browser

Απλό Παράδειγμα χρήσης CSS σε XML (3/5) peoplescss.css Επεξεργαστείτε το css αρχείο που έχετε ήδη δημιουργήσει, το peoplecss.css, έτσι ώστε τα στοιχεία κάθε συζύγου (element husband) να εμφανίζονται στο browser σε διαφορετική γραμμή. Ακόμη, αλλάξτε το χρώμα σε πράσινο, τη γραμματοσειρά σε courier και το μέγεθός αυτής σε 11px, όπου εμφανίζεται το element wife. Αποθηκεύστε και ανοίξτε έπειτα το xml αρχείο (peoples.xml) με έναν browser. Τι παρατηρείτε τώρα? peoplescss.css Browser Ερώτηση: Αν θέλουμε και τα στοιχεία της γυναίκας να εμφανίζονται σε διαφορετική γραμμή τι πρέπει να προσθέσουμε και που? Ερώτηση: Αν αντί για block βάλουμε inline τώρα?

Απλό Παράδειγμα χρήσης CSS σε XML (4/5) Προσθέστε στο css αρχείο τα παρακάτω με τη σειρά και σε κάθε ένα βήμα, ελέγχετε τι έχει αλλάξει από την εμφάνιση του xml αρχείου στο browser. 4 3 2 1 Προσθέστε τώρα στο css αρχείο πάλι με τη σειρά τα παρακάτω και ελέγξτε στο browser. 4 3 2 1

Απλό Παράδειγμα χρήσης CSS σε XML (5/5) Προσθέστε στο css αρχείο στο husband τo position: absolute; και ελέγξετε τι έχει αλλάξει από την εμφάνιση του xml αρχείου στο browser. Τροποποιήστε τα xml αρχείο, και css αρχείο όπως φαίνονται παρακάτω και ελέγξτε στον browser: Προσθέστε τώρα στο css αρχείο πάλι, στα husband.one, husband.two, το «z-index:0;» και «z-index:1;» αντίστοιχα, και μετά ελέγξτε στο browser τι εμφανίζεται.

Παράδειγμα_1 CSS Αρχείου Ενός XML Εγγράφου (1/2) Παράδειγμα ενός XML Εγγράφου για έναν Κατάλογο CD Η δεύτερη γραμμή συνδέει το XML έγγραφο με το CSS έγγραφο:

Παράδειγμα_1 CSS Αρχείου Ενός XML Εγγράφου (2/2) CSS Αρχείο για το XML Έγγραφο του CD Catalog * Χρησιμοποιήστε το Notepad για να γράψετε τα παραπάνω και να δημιουργήσετε τα δύο αρχεία (.xml,.css). Προβάλετε στον browser της επιλογής σας το xml αρχείο πριν και μετά την σύνδεσή του με το css αρχείο και δείτε τις διαφορές.

businesscard_style.xml Παράδειγμα_2 CSS Αρχείου Ενός XML Εγγράφου (1/2) Δίνεται το παρακάτω xml έγγραφο που αφορά business cards. Δημιουργήστε το businesscards.css αρχείο και προβάλετε στον browser το xml αρχείο (businesscard_style.xml). businesscards.css Τι παρατηρείτε? Παρουσιάζεται μόνο η πληροφορία που υπάρχει ανάμεσα στο αρχικό και τελικό tag του element και όχι η πληροφορία που βρίσκεται μέσα στα tags <>, πχ. δεν εμφανίζεται πουθενά η πληροφορία που αφορά το type (mobile, work, fax) Δεν υπάρχει πουθενά label που να ξεχωρίζει τα τηλέφωνα και τα emails.

businesscard_style_css2.xml businesscard_css2.css Παράδειγμα_2 CSS Αρχείου Ενός XML Εγγράφου (2/2) Δημιουργήστε τα businesscard_style_css2.xml, businesscard_css2.css, όπως φαίνονται παρακάτω: Εμφανίστε το xml αρχείο στο browser. Τι παρατηρείτε?

Άσκηση 1: Well-Formed XML Documents & CSS (1/3) Δημιουργήστε ένα XML έγγραφο που να αποτελεί μια λίστα από φοιτητές με πληροφορίες για αυτούς, όπως ονοματεπώνυμο, Α.Μ., ηλικία, έτος φοίτησης, συνολικός βαθμός μέχρι τώρα. Δημιουργήστε επίσης ένα αρχείο φύλλου στυλ CSS για την μορφοποίηση των πιο πάνω πληροφοριών. Προβάλλετε το XML έγγραφο σε οποιοδήποτε browser της επιλογής σας. Οδηγίες: Κάθε στοιχείο θα εμφανίζεται σε ξεχωριστή γραμμή Πριν από κάθε εμφάνιση ενός φοιτητή θα υπάρχει κενό 12pt Τα στοιχεία Α.Μ., ηλικία, έτος φοίτησης και βαθμός θα είναι στοιχισμένα 15 pt προς τα δεξιά Το ονοματεπώνυμο θα εμφανίζεται με μέγεθος χαρακτήρων 12 pt, bold και italic Τα ονοματεπώνυμα θα παίρνουν χρώμα #CCCCFF Ο αριθμός μητρώου θα εμφανίζεται με χαρακτήρες bold To έτος φοίτησης ΔΕΝ θα εμφανίζεται (display:none). * Χρησιμοποιήστε το Notepad για να γράψετε τα παραπάνω και να δημιουργήσετε τα δύο αρχεία.

Άσκηση 1: Well-Formed XML Documents & CSS (2/3) student.xml (*καλεί και εφαρμόζει το student.css)

Άσκηση 1: Well-Formed XML Documents & CSS (3/3) student.css

Άσκηση 2: Well-Formed XML Documents & CSS Δημιουργήστε ένα XML έγγραφο που να περιλαμβάνει τις αγαπημένες σας ταινίες. Δημιουργήστε επίσης ένα αρχείο φύλλου στυλ CSS για την μορφοποίηση των πιο πάνω πληροφοριών. Προβάλλετε το XML έγγραφο σε οποιοδήποτε browser της επιλογής σας. Οδηγίες Μορφοποίησης: Χρησιμοποιώντας XML και CSS, δημιουργήστε έναν πίνακα που να περιλαμβάνει τις αγαπημένες σας ταινίες (όνομα ταινίας, είδος ταινίας, αριθμός αστεριών, έτος δημιουργίας). Όρισε ως σταθερό width του πίνακα, 300 pixels Πρόσθεσε headings στον πίνακα για κάθε στήλη Χρησιμοποίησε borders, padding, background-colors, έτσι ώστε να ενισχυθεί η οπτική καθαρότητα του πίνακα.

Άσκηση 3: Well-Formed XML Documents & CSS (1/3) Δίνεται το παρακάτω xml έγγραφο, products.xml.

Άσκηση 3: Well-Formed XML Documents & CSS (1/3) Δίνεται το παρακάτω xml έγγραφο, products.xml. Δημιουργήστε το products.css, έτσι ώστε να εμφανίζεται στον browser με αυτή τη μορφή: background-color: mistyrose background-color: whitesmoke

Άσκηση 3 Λύση: Well-Formed XML Documents & CSS (1/3) products.css Σημείωση (display in css of an xml):

Άσκηση 4: Well-Formed XML Documents & CSS (1/3) Δίνεται το παρακάτω xml έγγραφο, oceans.xml. Δημιουργήστε το oceans1.css, έτσι ώστε να εμφανίζεται στον browser με αυτή τη μορφή:

Άσκηση 4 Λύση: Well-Formed XML Documents & CSS (1/3) oceans1.css Αλλάξτε τώρα το document, έτσι ώστε να το εμφανίζει ως πίνακαs.

Άσκηση 5: Well-Formed XML Documents & CSS (1/3) Δίνεται το παρακάτω xml έγγραφο, parts.xml. Δημιουργήστε τα xmlpartsstyle.css, parts.dtd έτσι ώστε να εμφανίζεται στον browser με αυτή τη μορφή και να ισχύουν τα παρακάτω: To root element PARTS μπορεί να περιέχει κανένα ή ένα element TITLE μαζί με οποιοδήποτε πλήθος στοιχείων PART. Το PART element πρέπει να περιέχει στη σειρά ένα αντικείμενο από κάθε: ITEM, MANUFACTURER, MODEL, και COST. Το element PART μπορεί να περιέχει ένα attribute "type" που μπορεί να πάρει τιμές: "computer", "auto", ή "airplane". Τα elements TITLE, ITEM, MANUFACTURER, MODEL, και COST περιέχουν PCDATA το οποίο επεξεργάζεται δεδομένα χαρακτήρων.

Άσκηση 5: Well-Formed XML Documents & CSS (2/3) parts.dtd <!ELEMENT PARTS (TITLE?, PART*)> <!ELEMENT TITLE (#PCDATA)> <!ELEMENT PART (ITEM, MANUFACTURER, MODEL, COST)+> <!ATTLIST PART type (computer auto airplane) #IMPLIED> <!ELEMENT ITEM (#PCDATA)> <!ELEMENT MANUFACTURER (#PCDATA)> <!ELEMENT MODEL (#PCDATA)> <!ELEMENT COST (#PCDATA)> All have: font-weight: 400;, Arial, 18px Color: #000080; Color: #600060; Color: #006000; Color: #800000; Margin-top:12pt Margin-left: 15pt Margin-top:5pt Margin-left: 45pt

Άσκηση 5: Well-Formed XML Documents & CSS (3/3) xmlpartsstyle.css Page in Browser:

Συνοψίζοντας Δυνατότητες CSS στην XML Τι μπορεί να κάνει η CSS Τροποποίηση του μεγέθους γραμματοσειράς (font size), του χρώματος (color), τη γραμματοσειρά και το στυλ ενός κειμένου (family & style of text) στη markup γλώσσα. Ορισμός της τοποθεσίας και του μεγέθους ενός στοιχείου. Αλλαγή της εικόνας που βρίσκεται στο background και του χρώματος των στοιχείων. Δημιουργία νέου στυλ στις markup σελίδες που εμφανίζονται στο διαδίκτυο. Τι δεν μπορεί να κάνει η CSS Εφαρμογή συνθηκών if-else που εξαρτώνται από το περιεχόμενο. Επανάληψη πάνω σε (for-each) στοιχεία με μία συνθήκη επιλογής (when, choose). Αλλαγή της σειράς των στοιχείων σε ένα έγγραφο. Προσθήκη περιεχομένου σε ένα έγγραφο. Συνδυασμός πολλαπλών εγγράφων σε ένα. Τα προαναφερθέντα μπορούν να επιτευχθούν χρησιμοποιώντας την XSLT γλώσσα, με την οποία θα ασχοληθούμε στο επόμενο μάθημα εργαστηρίου.

Ερωτήσεις??