Μαθηματικά Λογισμικά και Γλώσσες Γεώργιος Χρ. Μακρής 20 Απριλίου 2015
Γλώσσες Σήμανσης (Annotation ή Markup Languages) Για την αποθήκευση δομημένης πληροφορίας χρησιμοποιούνται γλώσσες σήμανσης. Η δομημένη πληροφορία αποτελείται από περιεχόμενο και ετικέτες που δείχνουν τι είδους είναι το περιεχόμενο. Οι ετικέτες συνδέονται με το αντίστοιχο περιεχόμενο ως εξής: <tag> text </tag>. Η HTML είναι μία γλώσσα σήμανσης (T.B.Lee 1989), όπου το περιεχόμενο αποτελεί το περιεχόμενο μιας ιστοσελίδας και οι ετικέτες καθορίζουν τον τρόπο με τον οποίο θα εμφανιστούν τα δεδομένα. Η XML είναι και αυτή μια γλώσσα σήμανσης. Οι ετικέτες της XML περιγράφουν το νόημα των δεδομένων. 2
Παράδειγμα HTML <html> <head> <title> παράδειγμα 1 </title > </head> <body> <h1>η HTML ειναι μια εύκολη γλώσσα </h1> <p> παράγραφος 1. </p> <p> παράγραφος 2. < /p > </body> </html> 3
XML Η XML είναι σήμερα η lingua franca για την ανταλλαγή δεδομένων μεταξύ προγραμμάτων, υπολογιστικών συστημάτων, κ.λπ. στα πλαίσια του Σημασιολογικού Ιστού. Η XML είναι απλό κείμενο, το οποίο μπορεί με ευκολία να διαβαστεί από ανθρώπους. Η XML ασχολείται μόνο με τη σημασία των δεδομένων, και όχι με την τυχόν επεξεργασία τους. Είναι εύκολο να επεξεργαστούμε αρχεία XML, είτε με χρήση βιβλιοθηκών έχουν δημιουργηθεί για τον σκοπό αυτό, είτε με χρήση της ίδιας της XML (XSL). 4
Παράδειγμα XML <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> </CATALOG> 5
XML (το «συντακτικό» του Web 3) Δομημένο κείμενο Δομή καθορισμένη από το χρήστη Αποδοτικότερη διασύνδεση υπερκειμένου Ευέλικτο και προσαρμόσιμο κείμενο HTML (Web 1,2) Μορφοποιημένο κείμενο Προκαθορισμένη μορφή Περιορισμένη διασύνδεση υπερκειμένου Δεν είναι ευέλικτο και δεν προσαρμόζεται Σχεδιάστηκε για να περιγράφει δεδομένα 6 Σχεδιάστηκε για να παρουσιάζει δεδομένα
HTML 5 Η HTML5 είναι το νέο standard πρότυπο για την HTML, την XHTML και την HTML DOM. Η ανάπτυξη της HTML5 έγινε με την συνεργασία της World Wide Web Consortium (W3C) και της Web Hypertext Application Technology Working Group (WHATWG). Η WHATWG εργαζόταν επάνω στις web φόρμες και τις web εφαρμογές, ενώ η W3C, η οποία δημιούργησε και διαχειρίζεται τα πρότυπα της HTML και της XHTML, ασχολήθηκε με την ανάπτυξη του νέου προτύπου XHTML 2.0. Το 2006 αποφάσισαν να συνεργαστούν για να δημιουργήσουν το νέο πρότυπο, την HTML5. 7
Η HTML5 αναπτύχθηκε με βάση τους παρακάτω κανόνες: νέα χαρακτηριστικά έπρεπε να προστεθούν στην δομή των HTML, CSS και JavaScript μείωση των περιπτώσεων που χρειάζεται η εγκατάσταση plugins στον browser για κάποιου συγκεκριμένου τύπου στοιχείων (όπως βίντεο και audio) καλύτερη διαχείριση σφαλμάτων προσθήκη περισσότερων ετικετών οι οποίες θα αντικαταστήσουν κομμάτια κώδικα JavaScript που χρησιμοποιούσαν συχνά οι web designers το νέο πρότυπο θα έπρεπε να είναι αυτόνομο χωρίς να χρειάζεται να καλεί κομμάτια κώδικα από άλλα πρότυπα τα βήματα του σχεδιασμού και της ανάπτυξης του νέου προτύπου θα έπρεπε να είναι ορατά στο κοινό. 8
Νέα χαρακτηριστικά της HTML5: δυνατότητα σχεδιασμού γραφικών με χρήση JavaScript (νέα ετικέτα canvas) αναπαραγωγή βίντεο και audio χωρίς να χρειάζεται η εγκατάσταση plugins (νέες ετικέτες video και audio) προσθήκη νέων ετικετών που κάνουν την δημιουργία και την διαχείριση των ιστοσελίδων, ακόμη πιο εύκολη (νέες ετικέτες article, footer, header κτλ.) νέα στοιχεία στις HTML φόρμες (calendar, date, time, search κτλ.) 9
Νέα χαρακτηριστικά της HTML5: δυνατότητα σχεδιασμού γραφικών με χρήση JavaScript (νέα ετικέτα canvas) αναπαραγωγή βίντεο και audio χωρίς να χρειάζεται η εγκατάσταση plugins (νέες ετικέτες video και audio) προσθήκη νέων ετικετών που κάνουν την δημιουργία και την διαχείριση των ιστοσελίδων, ακόμη πιο εύκολη (νέες ετικέτες article, footer, header κτλ.) νέα στοιχεία στις HTML φόρμες (calendar, date, time, search κτλ.) 10
Σύνταξη κώδικα HTML,XML,XHTML Απλό κειμενογράφο του λειτουργικού συστήματος NotePad++ (http://notepad-plus-plus.org/) Δωρεάν DreamWeaver (http://www.adobe.com/products/dreamweaver.ht ml) Word Και πολλά άλλα προγράμματα (γράψτε HTML editor στο Google) 11
Χρησιμοποιώντας τον απλό κειμενογράφο 12
XHTML (1/2) Η XHTML είναι συνδυασμός της HTML και της XML. Πιο συγκεκριμένα η XHTML είναι μια παραλλαγή της HTML γραμμένη με κανόνες σύνταξης της XML, δηλαδή ο κώδικας ενός XHTML αρχείου μπορεί να περιέχει σχεδόν όλες τις ετικέτες που περιέχει και η HTML, με διαφορά την αυστηρότερη σύνταξη του κώδικα. Τα αρχικά της XHTML είναι από το EXtensible HyperText Markup Language το οποίο σημαίνει εκτεταμένη γλώσσα σήμανσης υπερκειμένου. Είναι μια πιο αυστηρή και πιο καθαρή έκδοση της HTML και μοιάζει πολύ με την HTML 4.01 13
XHTML (2/2) Η XHTML είναι μια πιο αυστηρή και πιο καθαρή έκδοση της HTML. Πολλές ιστοσελίδες είναι γραμμένες με κακό τρόπο στην σύνταξη του HTML κώδικα τους. Παρόλα αυτά το τελικό αποτέλεσμα θα εμφανιστεί σωστά στον browser του επισκέπτη. Για παράδειγμα στον παρακάτω κώδικα λείπει η ετικέτα τέλους της <head>, <p> <html> κι όμως το περιεχόμενο του αρχείου εμφανίζεται χωρίς κανένα πρόβλημα στον browser 14
Λάθη στην σύνταξη της HTML 15
Βασικά στοιχεία σύνταξης XHTML: Ετικέτες, ιδιότητες και τιμές γράφονται με πεζούς χαρακτήρες Οι τιμές των ιδιοτήτων θα πρέπει να εσωκλείονται σε διπλά εισαγωγικά Όλες οι XHTML ετικέτες πρέπει να κλείνουν (όσες συντάσσονται από μόνες τους τότε γράφονται έτσι : (<br />, <hr /> κλπ) Οι XHTML ετικέτες πρέπει να είναι σωστά φωλιασμένες (κλείνει πρώτη αυτή που άνοιξε τελευταία) Ο κώδικας XHTML πρέπει να εσωκλείεται από μια ετικέτα-ρίζα (<html> </html>) Η σύντμηση δεν επιτρέπεται στην XHTML 16
Κορμός αρχείου XHTML <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Τίτλος ιστοσελίδας </head> <body> Περιεχόμενο Ιστοσελίδας </body> </html> </title> 17
Μορφοποίηση Γραμματοσειράς <b> κείμενο </b> <i> κείμενο <i> <u> κείμενο </u> το κείμενο θα εμφανιστεί έντονο. το κείμενο θα εμφανιστεί πλάγια. το κείμενο θα εμφανιστεί υπογραμμισμένο Είναι δυνατόν να πετύχουμε διαφορετικά μεγέθη γραμματοσειρών : <h1> κείμενο </h1> το κείμενο θα εμφανιστεί με το μεγαλύτερο μέγεθος <h2> κείμενο </h2> <h3> κείμενο </h3> <h4> κείμενο </h4> <h5> κείμενο </h5> <h6> κείμενο </h6> το κείμενο θα εμφανιστεί με το μικρότερο μέγεθος 18
Αλλαγή γραμμής και Οριζόντια Γραμμή <br/> αλλάζει γραμμή <hr/> εμφανίζεται μία οριζόντια γραμμή σε όλο το πλάτος της σελίδας <hr size= 10 / > οριζόντια γραμμή με μέγεθος 10 pixels σε όλο το πλάτος της σελίδας <hr size= 5 width= 30% / > οριζόντια γραμμή με μέγεθος 5 pixels στο 30% του πλάτους της σελίδας 19
Παράγραφος <p> κείμενο </p> το κείμενο αποτελεί μία παράγραφο H ετικέτα <p> δέχεται και την παράμετρο align η οποία μπορεί να πάρει τιμές : left right center justify εξ ορισμού, το κείμενο της παραγράφου στοιχίζεται αριστερά το κείμενο της παραγράφου στοιχίζεται δεξιά το κείμενο της παραγράφου στοιχίζεται στο κέντρο το κείμενο της παραγράφου έχει πλήρη στοίχιση Εάν γράφαμε : <p align= right > κείμενο </p> τότε το κείμενο θα στοιχιζόταν στο κέντρο της ιστοσελίδας. <center> περιεχόμενο </center> το περιεχόμενο θα εμφανιστεί κεντραρισμένο Είναι το ίδιο με το <p align= center > κείμενο </p> 20
Αρίθμηση Παραγράφων (1/3) 21
Αρίθμηση Παραγράφων (2/3) 22
Αρίθμηση Παραγράφων (3/3) 23
Κουκίδες (1/2) 24
Κουκίδες (2/2) 25
Πίνακες και περιγράμματα (1/6) 26
Πίνακες και περιγράμματα (2/6) 27
Πίνακες και περιγράμματα (3/6) 28
Πίνακες και περιγράμματα (4/6) 29
Πίνακες και περιγράμματα (5/6) 30
Πίνακες και περιγράμματα (6/6) 31
Εισαγωγή Εικόνων (1/2) 32
Εισαγωγή Εικόνων (1/2) 33
Εισαγωγή στην Σήμανση XML 34
Εισαγωγή στην XML Internet/Web: Αποτελείται από ένα σύνολο εφαρμογών που επικοινωνούν μεταξύ τους Οι εφαρμογές ανταλλάσσουν δεδομένα με αυθαίρετη δομή και μορφοποίηση τα οποία πρέπει να στη συνέχεια να επεξεργαστούν Πρόβλημα: Απαιτείται ένα κοινό πρότυπο στην αναπαράσταση των δεδομένων Πολλές φορές η εφαρμογή ενδιαφέρεται όχι για τα ίδια τα δεδομένα αλλά για τη σημασία τους και που αυτά αναφέρονται (metaknowledge) Πρόβλημα: Θέλουμε μια μέθοδο να δημιουργούμε μεταδεδομένα 35
Tι είναι η XML? Ένα συντακτικό για κωδικοποίηση δεδομένων κειμένου (words, phrases, numbers,...) Είναι text-based. H XML γράφεται χρησιμοποιώντας printable χαρακτήρες (όχι binary data) Επεκτάσιμη (Extensible). Η XML σου επιτρέπει να ορίσεις τα δικά σου elements (essentially data types), με βάση ορισμένους συντακτικούς κανόνες Κοινό format. Τα δεδομένα που κωδικοποιούνται σε XML μετατρέπονται σε έναν standard τύπο εγγράφου τον οποίο μπορεί να διαβάσει και να επεξεργαστεί οποιαδήποτε εφαρμογή που υποστηρίζει XML τεχνολογία. 36
Tι δεν είναι η XML? Δεν είναι γλώσσα προγραμματισμού Δεν είναι ένα λογισμικό Δεν είναι περιβάλλον ανάπτυξης λογισμικού Δεν είναι εργαλείο ανάπτυξης ιστοσελίδων 37
Οι στόχοι της XML 1. Απλή (όπως η HTML αλλά όχι τόσο απλή) Συγκεκριμένοι συντακτικοί κανόνες, για τον περιορισμό συντακτικών λαθών. η σύνταξη ορίζει την δομή (ιεραρχική), και ονοματίζει δομημένα κομμάτια (element names) είναι αυτο-χαρακτηριζόμενα δεδομένα 2. Επεκτάσιμη (σε αντίθεση με την HTML) Μπορείς να δημιουργήσεις την δικιά σου γλώσσα από tags/elements Η αυστηρότητα του συντακτικού εξασφαλίζει την εγκυρότητα της επεξεργασίας 3. Σχεδιασμένη για ένα κατανεμημένο περιβάλλον δεδομένων (όπως η HTML) 4. Μπορεί να αναμείξει διαφορετικούς τύπους (σε αντίθεση με την HTML) 38
Συντακτικό: Elements 1 Elements- έχουν μια ετικέτα- τίτλο (tag), περιεχόμενο και γίνεται το κλείσιμο της ετικέτας <ergasia> Starting with programming</ergasia> Κάποιοι κανόνες για αυτά: Οι ετικέτες αρχίζουν με γράμμα ή κάτω παύλα, γίνεται διάκριση κεφαλαίων- μικρών και μπορούν να χρησιμοποιηθούν γράμματα, αριθμοί, κάτω παύλες, dashes, periods Άδειες ετικέτες- ανοίγουν και κλείνουν αμέσως <παρατήρηση/> 39
Συντακτικό: Elements 2 Σχέσεις μεταξύ των ετικετών- Αναλογία με δενδρική γενεαλογική δομή <family> <father> George </father> <mother> Eva </mother> <child> Anastasia </child> <child> Christos </child> </family> 40
Συντακτικό: Attributes Επιπλέον πληροφορίες για τα στοιχεία. Αν το element είναι το περιεχόμενο (container), το attribute είναι η ταμπέλα (label on the container) στο περιεχόμενο. Μοντέλο όνομα- αξία (label- value pair) <message urgency= low >Be sure to brush your teeth twice each day.</message> Σκοπός: Ελαστικότητα στην επεξεργασία και την ανάσυρση πληροφοριών Αν θέλουμε επεξεργασία πρέπει να τα κάνουμε elements 41
παράδειγμα 42
Ιεραρχικό Μοντέλο Δεδομένων XML δέντρο ref= date= <partorders xmlns="..."> <order date="..." ref="..."> <desc>..text.. </desc> <part /> <quantity /> <delivery-date /> </order> <order ref="..".../> </partorders> partorders order xmlns= order desc text part quantity text delivery-date ref= date= 43
XML Επεξεργασία <?xml version="1.0" encoding="utf-8"?> <transfers> <fundstransfer date="20010923t12:34:34z"> <from type="intrabank"> <amount currency="usd"> 1332.32 </amount> <transitid> 3211 </transitid> <accountid> 4321332 </accountid> <acknowledgereceipt> yes </acknowledgereceipt> </from> <to account="132212412321" /> </fundstransfer> <fundstransfer date="20010923t12:35:12z"> <from type="internal"> <amount currency="cdn" >1432.12 </amount> <accountid> 543211 </accountid> <acknowledgereceipt> yes </acknowledgereceipt> </from> <to account="65123222" /> </fundstransfer> </transfers> 44
XML parser O parser πρέπει να πιστοποιήσει ότι τα XML δεδομένα είναι ορισμένα συντακτικός σωστά. Όπως λέμε τα δεδομένα να είναι well-formed Η ελάχιστη απαίτηση για να είναι XML Ένας parser πρέπει να σταματά την επεξεργασία αν τα δεδομένα δεν είναι well-formed (καλός ορισμένα) π.χ., σταμάτα την επεξεργασία και throw an exception στη XML-based εφαρμογή. 45
Document Type Definition (DTD) H XML δίνει τη δυνατότητα στο χρήστη να δηλώσει το ρόλο κάθε element στο κείμενο με formal τρόπο μέσω πρόσθετων συντακτικών εντολών Το σύνολο αυτών των εντολών συνθέτουν έναν DTD O DTD δεν είναι απαραίτητος Όταν χρησιμοποιείται, ο parser μπορεί να ελέγξει την λογική ορθότητα στη δομή του κειμένου σύμφωνα με τον DTD O DTD επιβάλει επιπλέον κανόνες για την well-formed δομή του κειμένου 46
Παράδειγμα DTD Παράδειγμα κώδικα από Ethier & Houser,2001,σ. 87 <!ELEMENT family (father, mother, offspring?)> <!ELEMENT father (#PCDATA surname)*> <!ELEMENT mother (#PCDATA maiden surname)*> <!ELEMENT offspring (child +)> <!ELEMENT child (#PCDATA surname)*> <!ELEMENT surname (#PCDATA)> <!ELEMENT maiden (#PCDATA)> 47
Παράδειγμα DTD Επεξήγηση συμβόλων:? προαιρετικά, μία φορά * προαιρετικά, μία ή περισσότερες φορές + αναγκαστικά, μία ή περισσότερες φορές κανένα σύμβολο αναγκαστικά, μία φορά, ακολουθείται η σειρά που δείχνεται μόνο ένα από τα στοιχεία θα εμφανιστεί αν (.)* τότε όλα τα στοιχεία μπορεί να προκύψουν σε τυχαία σειρά ( ) όπως στα μαθηματικά PCDATA parsed character data 48
Eπέκταση της XML Μια προσπάθεια επέκτασης του DTD, ώστε να περιέχει καλύτερα τα δομικά στοιχεία της εφαρμογής που χρησιμοποιούμε. πρόβλημα, ιδιαίτερα στις εφαρμογές που χρειάζονται μαθηματικούς τύπους. τo DTD είναι περιγραφικό, κείμενο δηλαδή. Έτσι, έχουμε τα namespaces, μια προσπάθεια διασύνδεσης του συντακτικού με ένα συγκεκριμένο διαθέσιμο και αναγνωρισμένο λεξιλόγιο. για παράδειγμα, η MathML- Mathematical Markup Language 49
Ιστόχωρος για MathML http://www.mathml.host22.com/ users.sch.gr/gmakris 50