Κεφάλαιο 6 ΒΑΣΙΚΕΣ ΤΕΧΝΟΛΟΓΙΕΣ ΔΙΑΛΕΙΤΟΥΡΓΙΚΟΤΗΤΑΣ ΚΑΙ ΑΝΑΠΤΥΞΗΣ ΣΤHΝ ΠΛΕΥΡΑ ΤΟΥ ΠΕΛΑΤΗ

Transcript

1 Κεφάλαιο 6 ΒΑΣΙΚΕΣ ΤΕΧΝΟΛΟΓΙΕΣ ΔΙΑΛΕΙΤΟΥΡΓΙΚΟΤΗΤΑΣ ΚΑΙ ΑΝΑΠΤΥΞΗΣ ΣΤHΝ ΠΛΕΥΡΑ ΤΟΥ ΠΕΛΑΤΗ Σύνοψη Σε αυτό το κεφάλαιο παρουσιάζονται τα βασικά εργαλεία για την ανάπτυξη των διαδικτυακών εφαρµογών στην πλευρά του πελάτη (client-side). Εξετάζονται αφενός η HTML5, η τελευταία έκδοση της γλώσσας HTML, δίνοντας παραδείγµατα εφαρµογών, οι νέες λειτουργίες που υποστηρίζονται, καθώς και η συνέργειά της µε τα Cascading Style Sheets. Επίσης, γίνεται αναλυτική αναφορά στην XML, καθώς και στο νέο πρότυπο ανταλλαγής δεδοµένων JSON. Στη συνέχεια, παρουσιάζεται η JQuery, η πλέον χρησιµοποιούµενη βιβλιοθήκη της JavaScript. Τέλος, γίνεται αναφορά στην τεχνολογία AJAX, καθώς και σε άλλες νέες τεχνολογίες στην πλευρά του πελάτη, όπως είναι η Python, η Underscore.JS και τα Java Applets. Προαπαιτούµενη γνώση 1) Κεφάλαια 2 και 5 του παρόντος. 2) Χ. Δουληγέρης, Κ. Μαυροπόδη και Ε. Κοπανάκη (2013), Τεχνολογίες διαδικτύου, Εκδόσεις Νέων Τεχνολογιών (Κωδικός Βιβλίου στον Εύδοξο: ). 3) C. Heilmann (2006), Beginning JavaScript with DOM Scripting and AJAX: From Novice to Professional, Apress Νέες τεχνολογίες στην πλευρά του πελάτη Αυτό που διαφοροποιεί µια ιστοσελίδα από µια εφαρµογή είναι η πλούσια αµφίδροµη επικοινωνία µεταξύ του χρήστη και του ιστότοπου τον οποίο προτίθεται να προσπελάσει ο χρήστης. Εν γένει, µια εφαρµογή δέχεται δεδοµένα από το χρήστη, προσαρµόζοντας δυναµικά τη συµπεριφορά της µε βάση τα δεδοµένα εισόδου. Παραδοσιακά, µια απλή στατική ιστοσελίδα στον παγκόσµιο ιστό γράφεται στη γλώσσα σήµανσης υπερκειµένου (HyperText Markup Language/HTML). Η HTML είναι µια γλώσσα υπερκειµένου η οποία περιγράφει τα αντικείµενα που εµφανίζονται στην οθόνη του χρήστη. Ενώ η ίδια η HTML προσφέρει κάποια στοιχεία και χαρακτηριστικά που επιτρέπουν στους προγραµµατιστές διαδικτύου να εµπλουτίσουν τις εφαρµογές τους µε διαδραστική λειτουργικότητα, ωστόσο αυτά περιστρέφονται γύρω από τις φόρµες υποβολής και δεν προσφέρουν από µόνα τους πολλές δυνατότητες για τη δηµιουργία εντυπωσιακών και χρηστικών διαδικτυακών εφαρµογών. Αντίστοιχα, η χρήση µιας «παραδοσιακής» και «δυσκίνητης» γλώσσας, όπως της Java, για τη δηµιουργία διαδικτυακών εφαρµογών, δίνει πολλές δυνατότητες στον προγραµµατιστή, αλλά είναι δύσκολη, ενώ καθιστά την εφαρµογή περισσότερο περίπλοκη από όσο θα έπρεπε να είναι.[1] Οι τεχνολογίες στην πλευρά του πελάτη καταλαµβάνουν µια µέση λύση µεταξύ των δύο αυτών άκρων, προσφέροντας σε µια εφαρµογή που εκτελείται στον παγκόσµιο ιστό περισσότερη λειτουργικότητα από την καθαρή HTML, αλλά και λιγότερη πολυπλοκότητα και χαµηλότερο φορτίο επεξεργασίας από την Java. Ο προγραµµατισµός µε χρήση τεχνολογιών στην πλευρά του πελάτη διαφέρει από τον κλασικό προγραµµατισµό, κατά τον οποίο τα προγράµµατα «τρέχουν» από το λειτουργικό σύστηµα και διαχειρίζονται τα δεδοµένα και τους πόρους του συστήµατος για να εκτελέσουν τις διαδικασίες τους. Παράλληλα, τα σενάρια στην πλευρά του πελάτη (client-side scripts) έχουν σχεδιαστεί για να ενσωµατώνονται σε µια εφαρµογή «υποδοχής», µέσω της οποίας µπορούν να χειρίζονται τα δεδοµένα και τους πόρους της αίτησης (request), ενώ ταυτόχρονα τους απαγορεύεται, για λόγους ασφαλείας, η άµεση πρόσβαση στο υποκείµενο λειτουργικό σύστηµα και τους πόρους του,.

2 Τα σενάρια σε µια εφαρµογή ιστού τα διαχειρίζεται ο µηχανισµό δέσµης ενεργειών ή, αλλιώς, µηχανή σεναρίων (scripting engine), που αποτελεί µέρος του φυλλοµετρητή (browser). Η µηχανή αυτή αναλύει και εκτελεί τα σενάρια, επιτρέποντάς τους να ελέγχουν τους πόρους του προγράµµατος περιήγησης στο διαδίκτυο, καθώς και το έγγραφο. Η εκτέλεση ενός σεναρίου στην πλευρά του πελάτη για προσθήκη διαδραστικότητας σε µια εφαρµογή ιστού παρέχει, συνήθως, καλύτερη απόδοση από ό,τι η εκτέλεση ενός σεναρίου στην πλευρά του εξυπηρετητή (server-side scripting) για την ίδια λειτουργικότητα, κυρίως επειδή η τεχνολογία στην πλευρά του πελάτη δεν προσθέτει την απαιτούµενη, µε βάση τις εφαρµογές στην πλευρά του εξυπηρετητή, καθυστέρηση µετάδοσης της αίτησης από τον πελάτη στον εξυπηρετητή. Η ανταποκρισιµότητα (responsiveness) της εφαρµογής ιστού είναι πολύ σηµαντική σε σχέση µε τη φιλικότητα προς το χρήστη. Ας σκεφτούµε ένα ακραίο παράδειγµα, στο οποίο ένας προγραµµατιστής θέλει να περιορίσει την είσοδο σε ένα πλαίσιο κειµένου µόνο σε αριθµούς. Κάθε φορά που πατά ένα πλήκτρο, ο χαρακτήρας ο οποίος εισάγεται πρέπει να εξετάζεται και να απορρίπτεται εάν δεν είναι ένας αριθµός ή κάποιο κουµπί κίνησης (βέλη κίνησης). Εάν για κάθε είσοδο δεδοµένων του χρήστη στο πλαίσιο κειµένου, η εφαρµογή ιστού πρέπει να περιµένει το ταξίδι µετ επιστροφής µεταξύ του πελάτη και του εξυπηρετητή και κατόπιν να ανασυντάσσει τη σελίδα για κάθε πάτηµα πλήκτρου, η καθυστέρηση θα είναι πολύ µεγάλη. Επιπρόσθετα, η εκτέλεση σεναρίων στην πλευρά του πελάτη (client-side scripting) προσφέρει τα οφέλη της αποφόρτωσης µέρους των υπολογιστικών απαιτήσεων της εφαρµογής από τον εξυπηρετητή στον πελάτη. Η πλευρά του πελάτη σπαταλά, συνήθως, το µεγαλύτερο µέρος της επεξεργαστικής ισχύoς της άπραγη, περιµένοντας το χρήστη να κάνει κάτι. Αντιθέτως, οι διαδικτυακοί εξυπηρετητές φτάνουν, συνήθως, στα όριά τους, εξυπηρετώντας ταυτόχρονα εκατοντάδες ή χιλιάδες χρήστες.[2] Τα σενάρια στην πλευρά του πελάτη εκτελούνται στο πρόγραµµα περιήγησης µε βάση αυστηρά εφαρµοσµένους κανόνες, που αποσκοπούν στην προστασία του συστήµατος του χρήστη από κακόβουλο κώδικα. Μπορούν να ελέγχουν το µεγαλύτερο µέρος της συµπεριφοράς του προγράµµατος περιήγησης, καθώς και να χειρίζονται τα περισσότερα στοιχεία του εγγράφου HTML.[1] Επιπλέον, χρησιµοποιούνται συχνά για την πλοήγηση, τον εµπλουτισµό και την προσαρµοσµένη εµπειρία του χρήστη. Οι προγραµµατιστές επεκτείνουν την εµφάνιση και την αισθητική µιας εφαρµογής συσχετίζοντας ένα σενάριο µε ένα στοιχείο του εγγράφου, έτσι ώστε να εκτελείται σε απάντηση στην αλληλεπίδραση του χρήστη µε το στοιχείο.

3 Στον Κώδικα 6.1 παρουσιάζεται ένα τέτοιο παράδειγµα µε χρήση JavaScript, στο οποίο ένα µήνυµα αλλάζει όταν ο χρήστης περνά το ποντίκι πάνω από αυτό (mouse-over). <html> <head> <script language="javascript"> var newtext = "Νέο Κέιµενο"; var oldtext = "Παλαιό Κέιµενο"; /* Καλείται µε το πέρασµα του ποντικιού (mouse over)*/ function makenew(textitem) { document.getelementbyid(textitem).value = newtext; /* Καλείται µε την έξοδο του ποντικιού (mouse out)*/ function makeold(textitem) { document.getelementbyid(textitem).value = oldtext; </script> </head> <body> <p id="testtext" name="testtext" onmouseover=" makenew(this.id);" onmouseout=" makeold(this.id);"> Παλαιό Κείµενο </p> </body> </html> Κώδικας 6.1 Παράδειγµα προγραµµατισµού µε χρήση JavaScript στην πλευρά του πελάτη. Πλέον, για την υλοποίηση πλούσιων και διαδραστικών εφαρµογών ιστού, βρίσκεται στην εργαλειοθήκη των προγραµµατιστών πληθώρα τεχνολογιών στην πλευρά του πελάτη. Εδώ αναφέρουµε περιληπτικά κάποιες από αυτές, τις οποίες θα αναλύσουµε στη συνέχεια του κεφαλαίου. Αξίζει να σηµειώσουµε ότι το κοµµάτι στην πλευρά του πελάτη είναι από τα πιο δηµοφιλή στις µέρες µας, µε αποτέλεσµα τη συνεχή δηµιουργία τέτοιων νέων τεχνολογιών. Οι τεχνολογίες αυτές είναι:[2] Η HTML, η οποία χρησιµοποιείται για τον ορισµό των δοµικών στοιχείων που χρειάζονται σε µια ιστοσελίδα-εφαρµογή. Η HTML5, η οποία αποτελεί νέα έκδοση, περισσότερο δυναµική και χρηστική από την παραδοσιακή HTML, περιλαµβάνει περισσότερα διαδραστικά στοιχεία και δίνει στο χρήστη τη δυνατότητα δηµιουργίας πλούσιων εφαρµογών. Η CSS (Cascading Style Sheets), η οποία είναι µια γλώσσα στιλ, που χρησιµοποιείται για την περιγραφή της εµφάνισης και τη µορφοποίηση ενός διαδικτυακού εγγράφου γραµµένου σε κάποια γλώσσα σήµανσης (mark-up language). Η JavaScript, η οποία είναι µια δυναµική γλώσσα προγραµµατισµού και χρησιµοποιείται συχνά ως µέρος των φυλλοµετρητών ιστού, για τη γρήγορη και διαδραστική διαµόρφωση των αντικειµένων που εµφανίζονται στον τελικό χρήστη. Η Python, η οποία χρησιµοποιείται για τον ίδιο σκοπό µε την JavaScript.

4 Οι βιβλιοθήκες της JavaScript, όπως οι JQuery, Underscore.JS και Node.JS, οι οποίες παρέχονται για τη διευκόλυνση διαφόρων τµηµάτων του προγραµµατισµού, όπως είναι η γρήγορη διαµόρφωση του κειµένου ή η γρήγορη και αποτελεσµατική επεξεργασία και διαχείριση των δεδοµένων. Τα Java Applets, που είναι µικροεφαρµογές Java οι οποίες εκτελούνται στην πλευρά του πελάτη, εντός του φυλλοµετρητή, µε περιορισµένα δικαιώµατα πρόσβασης στους τοπικούς υπολογιστικούς πόρους. Επιπρόσθετα, θα δούµε και τις εξής τεχνολογίες, οι οποίες, αν και δεν χαρακτηρίζονται αµιγώς τεχνολογίες στην πλευρά του πελάτη, συνεργάζονται άµεσα µε αυτές: Την XML (EXtensible Markup Language), η οποία αποτελεί πρότυπο της Κοινοπραξίας του Παγκόσµιου Ιστού (World Wide Web Consortium/W3C) και σχεδιάστηκε για την περιγραφή και τη δόµηση των δεδοµένων ενός εγγράφου µε απλό και επεκτάσιµο τρόπο. Βασικό πλεονέκτηµά της είναι ότι µπορεί να χρησιµοποιηθεί σε κάθε πλατφόρµα, επειδή αποτελείται από κώδικα σε µορφή κειµένου ASCII. Με αυτόν τον τρόπο, επιτυγχάνεται η ανταλλαγή των δεδοµένων µεταξύ διαφορετικών συστηµάτων (διαλειτουργικότητα). Το JSON, ένα ανοικτό πρότυπο που χρησιµοποιεί κείµενο αναγνώσιµο από τον άνθρωπο για να µεταδώσει πληροφοριακά αντικείµενα δεδοµένων. Αποτελείται από ζεύγη (του τύπου χαρακτηριστικό-τιµή) και χρησιµοποιείται κυρίως για τη µετάδοση δεδοµένων µεταξύ του εξυπηρετητή και των διαδικτυακών εφαρµογών, ως εναλλακτική λύση της XML. Την AJAX (Αsynchronous JavaScript and XML), η οποία αποτελεί µια οµάδα αλληλένδετων τεχνικών ανάπτυξης ιστοσελίδων, που χρησιµοποιούνται στην πλευρά του πελάτη, για να δηµιουργήσουν ασύγχρονες διαδικτυακές εφαρµογές. Με την AJAX, οι εφαρµογές ιστού µπορούν να στείλουν και να ανακτήσουν δεδοµένα από έναν εξυπηρετητή ασύγχρονα, δηλαδή στο παρασκήνιο, χωρίς να παρεµβαίνουν στην οθόνη και τη συµπεριφορά της υπάρχουσας σελίδας. Στην Εικόνα 6.1 παρουσιάζεται συνοπτικά ο τρόπος µε τον οποίο σχετίζονται µεταξύ τους για την υλοποίηση µιας εφαρµογής διαδικτύου οι διάφορες τεχνολογίες στην πλευρά του πελάτη.

5 Εικόνα 6.1 Αλληλεπίδραση στοιχείων στην πλευρά του πελάτη 6.2. Οι γλώσσες σήµανσης HTML και HTML Σύντοµη περιγραφή της HTML Στα τέλη της δεκαετίας του 1980, ο Tim Berners-Lee, ο οποίος εργάζονταν ως φυσικός στο Ευρωπαϊκό Κέντρο Πυρηνικών Ερευνών (Conseil Européenne pour la Recherche Nucléaire/CERN), επινόησε έναν τρόπο ώστε οι επιστήµονες να µοιράζονται έγγραφα µέσω του διαδικτύου. Πριν από την εφεύρεσή του αυτή, η επικοινωνία µέσω του διαδικτύου περιοριζόταν σε απλό κείµενο, χρησιµοποιώντας τεχνολογίες όπως τα ηλεκτρονικά µηνύµατα ( ), τη µεταφορά αρχείων µε το πρωτόκολο File Transfer Protocol (FTP), και τις οµάδες συζητήσεων του Usenet. Η εφεύρεση της HTML έκανε χρήση ενός µοντέλου περιεχοµένου αποθηκευµένου σε έναν κεντρικό εξυπηρετητή, το οποίο θα µπορούσε να εµφανιστεί σε έναν τοπικό σταθµό εργασίας µέσω ενός προγράµµατος περιήγησης (φυλλοµετρητή). Η απλοποίηση της πρόσβασης στο περιεχόµενο επέτρεψε την εµφάνιση «πλούσιου» περιεχόµενου (όπως τη µορφοποίηση κειµένου και την εµφάνιση των εικόνων).[3] Η HTML είναι µια γλώσσα σήµανσης, δηλαδή µια γλώσσα µε συγκεκριµένη σύνταξη, που δίνει οδηγίες σε ένα φυλλοµετρητή ιστού σχετικά µε την εµφάνιση µιας ιστοσελίδας. Χωρίζει το περιεχόµενο (λέξεις, εικόνες, ήχο, βίντεο κ.ο.κ.) από την παρουσίαση. Αποτελείται από ένα σύνολο στοιχείων (elements), τα οποία καθορίζουν το σηµασιολογικό νόηµα του περιεχοµένου τους και περιλαµβάνουν τα πάντα µεταξύ δύο ετικετών. Για παράδειγµα, το στοιχείο <p> υποδεικνύει µια παράγραφο, ενώ το <img> µια εικόνα.

6 Τα περισσότερα στοιχεία µπορεί να περιέχουν και άλλα στοιχεία, σχηµατίζοντας µε τον τρόπο αυτό µια ιεραρχική δοµή. Ένα παράδειγµα µιας απλής ιστοσελίδας παρουσιάζεται στον Κώδικα 6.2. <html> <body> <p> Πολύ απλή σελίδα </p> </ body> </ html> Κώδικας 6.2 Aπλό παράδειγµα στην HTML. Το στοιχείο <html> ενθυλακώνει (encapsulates) όλο το υπόλοιπο έγγραφο, ενώ το στοιχείο <body> το περιεχόµενο της σελίδας. Αυτή η δοµή θεωρείται ένα δένδρο µε κλαδιά (σε αυτή την περίπτωση, τα <body> και <p> αποτελούν τα κλαδιά), το οποίο αυξάνεται από τον κορµό (<html>). Αυτή η ιεραρχική δοµή ονοµάζεται µοντέλο αντικειµένου εγγράφου (Document Object Model/DOM). Τα έγγραφα HTML είναι γραµµένα σε µορφή απλού κειµένου. Μπορεί να γραφτούν σε οποιοδήποτε πρόγραµµα επεξεργασίας κειµένου επιτρέπει στο περιεχόµενο να αποθηκευτεί ως απλό κείµενο, όπως είναι τα Notepad, Notepad++ και SublimeText. Οι περισσότεροι προγραµµατιστές προτιµούν να χρησιµοποιούν ένα εξειδικευµένο πρόγραµµα επεξεργασίας, το οποίο αναδεικνύει τη σύνταξη και δείχνει το DOM. Η HTML αποδίδει ιδιαίτερη σηµασία σε ένα στοιχείο που ξεκινά µε το σύµβολο του µικρότερου (<) και τελειώνει µε το σύµβολο του µεγαλύτερου (>). Μια τέτοια σήµανση ονοµάζεται ετικέτα. Ας δούµε ένα τέτοιο παράδειγµα ετικέτας: <p> Αυτό είναι το κείµενο µέσα στην παράγραφο. </p> Σε αυτό το παράδειγµα υπάρχει µια ετικέτα έναρξης και µια ετικέτα κλεισίµατος. Οι ετικέτες κλεισίµατος πρέπει να είναι ίδιες µε την ετικέτα έναρξης, αλλά να περιέχουν συνήθως µια πλάγια κάθετο αµέσως µετά το σύµβολο <. Τα ονόµατα των ετικετών µπορεί να γραφτούν µε κεφαλαίους ή πεζούς χαρακτήρες. Ωστόσο, το W3C συνιστά τη χρήση πεζών. Ορισµένα στοιχεία δεν περιέχουν οποιοδήποτε περιεχόµενο κειµένου ή οποιαδήποτε άλλα στοιχεία. Τα στοιχεία αυτά είναι κενά και δεν χρειάζονται ετικέτες κλεισίµατος. Στη συνέχεια δίνεται ένα τέτοιο παράδειγµα: <Img src = "myimage.jpg" alt = "Μία Εικόνα"> Ένας ανάλογος τρόπος γραφής του παραπάνω είναι ο εξής: <Img src = "myimage.jpg" alt = "Μία Εικόνα"/> Άλλο ένα κοµµάτι της HTML είναι τα γνωρίσµατα (attributes), τα οποία αποτελούνται συνήθως από δύο µέρη, ένα όνοµα γνωρίσµατος και µια τιµή γνωρίσµατος. Μερικά γνωρίσµατα µπορεί να έχουν µόνο µία τιµή. Ακολουθούν τρία παραδείγµατα που δηλώνουν το ίδιο πράγµα µε διαφορετικό τρόπο γραφής: <input required = "required"> <input required = ""> <input required>

7 Σύντοµη περιγραφή της HTML5 H HTML5[4] είναι η τελευταία έκδοση της γλώσσας σήµανσης HTML. Προσφέρει δυνατότητες που παρέχουν όχι µόνο υποστήριξη µέσων (media), όπως βίντεο ή εικόνων, αλλά και υποστήριξη για τη δηµιουργία εφαρµογών ιστού που µπορούν να αλληλεπιδράσουν µε το χρήστη, τα τοπικά δεδοµένα και τους εξυπηρετητές, πιο εύκολα και πιο αποτελεσµατικά από ό,τι οι παλαιότερες εκδόσεις. Ένα έγγραφο HTML5 αρχίζει µε τη δήλωση <!DOCTYPE html>. Η προεπιλεγµένη κωδικοποίηση χαρακτήρων της HTML5 είναι η UTF-8 και συντάσσεται ως εξής: <meta charset = utf-8 >. Η HTML5 εισάγει πολλά νέα στοιχεία σήµανσης και ελέγχου, όπως τα <header>, <footer>, number, date, time, καθώς και στοιχεία γραφικών και πολυµέσων, όπως τα <svg>, <audio> και <video>. Επίσης, εισάγει και διεπαφές προγραµµατισµού εφαρµογών (Application Programming Interfaces/API), όπως το HTML5 Geolocation API ή το Application Cache API. 1 Υπάρχουν στοιχεία της προηγούµενης έκδοσης της HTML, δηλαδή της HTML4, τα οποία αφαιρέθηκαν από την HTML5, όπως το <frame>, και είτε αντικαταστάθηκαν από άλλα στοιχεία είτε ορίστηκαν από τη γλώσσα CSS (π.χ. <font>). Η HTML5 υποστηρίζεται από όλους τους σύγχρονους φυλλοµετρητές. Τέλος, για την αποθήκευση ενός αρχείου γραµµένου σε HTML5, που πρέπει να έχει την κατάληξη.html, συστήνεται η χρήση πεζών χαρακτήρων. Παρακάτω δίνονται συνοπτικά µερικά από τα νέα χαρακτηριστικά της HTML5: ευκολότερη δήλωση του Doctype, µε τη χρήση της εντολής <!doctype html>, που δηλώνει ότι η ιστοσελίδα είναι γραµµένη σε HTML5, νέα δοµή µε τη χρήση νέων ετικετών, όπως: o <section>, για τη δηµιουργία νέου τοµέα, o <header>, για τον ορισµό της κεφαλίδας, o <footer>, για τον ορισµό του υποσέλιδου, o <nav>, για τον ορισµό του µενού πλοήγησης, o <article>, για τον ορισµό του βασικού άρθρου της σελίδας, o <aside>, για την προσοµοίωση µε µια πλάγια µπάρα περιεχοµένου (sidebar), o <figure>, για τον ορισµό εικόνων που προσδιορίζουν ένα άρθρο, νέα στοιχεία, όπως: o <mark>, για τη σήµανση περιεχοµένου, o <time>, για αντικείµενα που δηλώνουν χρόνο, o <meter>, για περιεχόµενο που είναι κοµµάτι ενός συστήµατος µέτρησης (π.χ. χώρος στο δίσκο), o <progress>, για την πρόοδο µιας διεργασίας, o <canvas>, ένα στοιχείο που λειτουργεί ως καµβάς για το σχεδιασµό στην ιστοσελίδα, o <video>, για προσθήκη αντικειµένων βίντεο, o <audio>, για προσθήκη αντικειµένων ήχου, νέοι τύποι φόρµας (form) εισαγωγής δεδοµένων: o datetime (ηµεροµηνία και ώρα), o datetime-local (τοπική ηµεροµηνία και ώρα), o date (ηµεροµηνία), o month (µήνας), o week (εβδοµάδα), o time (ώρα), o number (αριθµός), o range (εύρος), o (διεύθυνση ηλεκτρονικού ταχυδροµείου), 1

8 o url (υπερσύνδεσµος). Ένα απλό παράδειγµα κώδικα HTML5 που αφορά ένα µενού περιήγησης δίνεται στον Κώδικα 6.3. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test Web Page</title> </head> <body> <header> <h1>heading 1 Example</h1> </header> <nav> <a href="/home/">home</a> <a href="/info/">info</a> <a href="/about/">about</a> <a href="/contact/">contact</a> </nav> <section> <p>paragraph Example.</p> <h2>test</h2> <article> Article HTML5 element. </article> <h2>test 2</h2> <article> Second Article HTML5 element. </article> </section> <footer> <p> 2015 footer element.</p> </footer> </body> </html> Κώδικας 6.3 Απλό µενού πλοήγησης σε HTML5. 2 Ορίζουµε αρχικά το <!DOCTYPE html>, το οποίο χρησιµοποιείται για να δηλώσει ότι το έγγραφο θα είναι τύπου HTML5. Καθορίζεται η κωδικοποίηση της σελίδας να είναι η UTF8. Μετά, µε την ετικέτα <title> δίνουµε τίτλο στην ιστοσελίδα. Στο body ορίζεται το περιεχόµενο της σελίδας µε ένα µενού πλοήγησης το οποίο ορίζεται µεταξύ των ετικετών <nav>. Με το στοιχείο <header> ορίζεται η επικεφαλίδα για τη σελίδα. Μετά, δίνονται παράγραφοι και κεφαλίδες περιεχοµένου (<p> <h1> <h2>). Το στοιχείο article της HTML5 χρησιµοποιείται για να καθορίσει περιεχόµενο ανεξάρτητο και αυτοπεριγραφικό. Με το στοιχείο footer ορίζεται το κάτω µέρος της σελίδας, όπου εµφανίζονται το έτος και το σύµβολο copyright. 2

9 Εικόνα 6.2 Απεικόνιση σε φυλλοµετρητή του Κώδικα Συνέργεια µεταξύ CSS και HTML5 Τα CSS είναι µια γλώσσα στιλ που χρησιµοποιείται για την περιγραφή της εµφάνισης και της µορφοποίησης ενός εγγράφου γραµµένου σε γλώσσα σήµανσης. Ενώ συχνά χρησιµοποιείται για να αλλάξει το στιλ των ιστοσελίδων και των διεπαφών των χρηστών που είναι γραµµένες σε HTML και XHTML (EXtensible HyperText Markup Language), µπορεί να εφαρµοστεί σε οποιοδήποτε είδος εγγράφου, συµπεριλαµβανοµένων των XML, SVG και XUL. Μαζί µε την HTML και την JavaScript, είναι η βάση της τεχνολογίας που χρησιµοποιείται από τους περισσότερους ιστότοπους, µε στόχο να δηµιουργηθούν οπτικά εντυπωσιακές ιστοσελίδες, διεπαφές χρήστη για εφαρµογές ιστού και διεπαφές χρηστών για πολλές κινητές εφαρµογές. Επίσης, χρησιµοποιούνται για τον έλεγχο της εµφάνισης ενός εγγράφου που γράφτηκε σε HTML, δηλαδή για τον έλεγχο της εµφάνισης µιας ιστοσελίδας και, γενικότερα, ενός ιστότοπου. Καθορίζει το στιλ µε το οποίο εµφανίζονται οι ετικέτες της HTML, προσφέροντας µια σειρά από πλεονεκτήµατα, όπως: ευκολότερη παρουσίαση περιεχοµένου σε διαφορετικές πλατφόρµες, συνέπεια στην εµφάνιση του περιεχοµένου ανάµεσα σε διαφορετικά έγγραφα, ανεξαρτησία µεταξύ των αλλαγών στο περιεχόµενο και στην εµφάνιση, απουσία αλλαγών στην εµφάνιση, λόγω αλλαγών στο περιεχόµενο, διατήρηση του ελέγχου της εµφάνισης από το χρήστη και εφαρµογή των αλλαγών στην εµφάνιση απευθείας σε όλο το περιεχόµενο. Τα CSS έχουν σχεδιαστεί κυρίως για να επιτρέψουν το διαχωρισµό του περιεχοµένου ενός εγγράφου από την παρουσίαση του εγγράφου, συµπεριλαµβανοµένων στοιχείων όπως η διάταξη, τα χρώµατα και οι γραµµατοσειρές. Αυτός ο διαχωρισµός µπορεί να βελτιώσει την προσβασιµότητα του περιεχοµένου, την ευελιξία και τον έλεγχο των προδιαγραφών των χαρακτηριστικών παρουσίασης, και να επιτρέψει σε πολλαπλές σελίδες HTML να µοιραστούν τη µορφοποίηση από ένα αρχείο CSS και να µειώσουν την πολυπλοκότητα και την επανάληψη του διαρθρωτικού περιεχόµενου της ιστοσελίδας. Τα CSS καθιστούν δυνατό το διαχωρισµό των οδηγιών παρουσίασης από το περιεχόµενο HTML σε ένα ξεχωριστό τµήµα του αρχείου ή του στιλ του αρχείου HTML. Για κάθε στοιχείο HTML, παρέχεται µια λίστα µε τις οδηγίες µορφοποίησης. Για παράδειγµα, ένας κανόνας CSS µπορεί να ορίζει ότι «όλα τα <p> θα είναι έντονα (bold)». Η χρήση της CSS3, της τελευταίας έκδοσης της CSS, γίνεται αποκλειστικά µε τη χρήση HTML5.[5] Ο συγκεκριµένος συνδυασµός τεχνολογιών έχει γίνει ιδιαίτερα δηµοφιλής τα τελευταία χρόνια από τους προγραµµατιστές και τους σχεδιαστές ιστοσελίδων, λόγω της ευκολίας που παρέχει στη σχεδίαση όµορφων και εντυπωσιακών εφαρµογών. Ένα παράδειγµα CSS παρουσιάζεται στον Κώδικα 6.4.

10 <style> background-color:#cc00cc; nav { display: block; padding: 5px 0px; color: #672a7d; text-decoration: none; font-weight: bold; margin-bottom: 5px; nav a:hover { background: #dba790; color: #4c5e32; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 3px; padding: 2px 4px; margin: 0; text-decoration: none; h1 { text-align:center; color:red; h2{text-align:center; text-shadow: 1px 2px; color:red; p { color:red; text-align:center; article { background-color:green; text-align:center; </style> Κώδικας 6.4: Ο κώδικας του κώδικα 6.3 µε τη χρήση CSS. Με τα CSS του Κώδικα 6.4 προστίθενται οπτικά εφέ στην ιστοσελίδα του Κώδικα 6.3. Με την ετικέτα <style> ορίζεται το στιλ εµφάνισης που θα χρησιµοποιηθεί στην ιστοσελίδα. Με την ετικέτα background-color ορίζεται το χρώµα του φόντου της σελίδας. Για τα στοιχεία nav (του µενού πλοήγησης) ορίζεται ότι το µενού πλοήγησης θα είναι σε µορφή block. Το χρώµα που θα έχουν τα στοιχεία του µενού ορίζεται µέσω του color, ενώ η απόσταση µεταξύ περιεχοµένου και περιθωρίου ορίζεται µέσω του padding. To font-weight: bold ορίζει ότι τα στοιχεία του µενού πλοήγησης θα έχουν έντονα γράµµατα. Με το marginbottom ορίζεται σε εικονοστοιχεία (pixels) το περιθώριο προς τα κάτω. Με το nav a: hover ορίζεται το στιλ των στοιχείων του µενού όταν ο χρήστης θα τοποθετήσει το δείκτη του ποντικιού πάνω σε αυτά. Εδώ εισάγεται η δυνατότητα της CSS3 -webkit-border-radius (ή -

11 moz-border-radius, για το φυλλοµετρητή Mozilla Firefox), η οποία δίνει κυκλικό περίγραµµα στα στοιχεία του µενού όταν ο δείκτης του ποντικιού είναι πάνω σε αυτά. Το text-shadow εισάγει σκίαση στα γράµµατα των κεφαλίδων επιπέδου 2 του κειµένου και είναι στοιχείο της CSS3. Τέλος, µε το text align ορίζεται πώς θα είναι στοιχισµένο το κείµενο (π.χ. στοίχιση στο κέντρο) Η γλώσσα XML Η XML µοιάζει αρκετά στη δοµή µε την HTML, αλλά έχει και πολλές ουσιαστικές διαφορές. Η HTML σχεδιάστηκε για να παρουσιάζει τα δεδοµένα, ενώ η XML για να περιγράφει τα δεδοµένα. Η HTML επικεντρώνεται στην εµφάνιση των δεδοµένων, µε αποτέλεσµα οι αλλαγές σε αυτά να µην απαιτούν και αλλαγές στον κώδικά της. Επίσης, έχει προκαθορισµένες ετικέτες, σε αντίθεση µε την XML, στην οποία ο προγραµµατιστής µπορεί να ορίσει δικές του ετικέτες. Οι ετικέτες της XML συµπεριφέρονται ως ονόµατα πεδίων και χρησιµοποιούνται για να περιγράψουν το νοητικό περιεχόµενο των δεδοµένων. Τα απλούστερα στοιχεία της XML περιέχουν µια ετικέτα ανοίγµατος, µια ετικέτα κλεισίµατος και κάποιο περιεχόµενο. Η ετικέτα ανοίγµατος αρχίζει µε το σύµβολο <, ακολουθείται από ένα όνοµα στοιχείου, που περιέχει γράµµατα και αριθµούς (χωρίς κενά), και τελειώνει µε το σύµβολο >. Στην XML, το περιεχόµενο αφορά συνήθως δεδοµένα χαρακτήρων. Θα µπορούσε να αποτελείται από απλό κείµενο, από άλλα στοιχεία XML ή από πιο περίπλοκα πράγµατα, όπως οντότητες XML, σχόλια και οδηγίες επεξεργασίας (το σύνολο των οποίων θα δούµε αργότερα). Μετά το περιεχόµενο εµφανίζεται η ετικέτα κλεισίµατος, η οποία έχει την ίδια ορθογραφία µε την ετικέτα ανοίγµατος, αλλά µε µια µικρή αλλαγή: ένα σύµβολο / εµφανίζεται ακριβώς πριν από το όνοµα του στοιχείου. Οι κανόνες σύνταξης της XML είναι απλοί και αυστηροί. Στον Κώδικα 6.5 παρουσιάζεται ένα παράδειγµα εγγράφου XML. <?xml version="1.0" encoding="iso "?> <note> <to>denny</to> <from>mary</from> <heading>reminder</heading> <body>don't forget me this weekend!</body> </note> Κώδικας 6.5 Παράδειγµα εγγράφου XML. Η πρώτη γραµµή του εγγράφου καθορίζει την έκδοση της XML και τη χρησιµοποιούµενη κωδικοποίηση χαρακτήρων. Στο παράδειγµα αυτό, το έγγραφο ακολουθεί την προδιαγραφή 1.0 της XML και χρησιµοποιεί την κωδικοποίηση χαρακτήρων ISO (Latin-1/West European). Να σηµειωθεί ότι δεν είναι υποχρεωτική η δήλωση της XML, αλλά θεωρείται καλή πρακτική. Η επόµενη γραµµή περιγράφει το στοιχείο που αποτελεί τη ρίζα του εγγράφου, δηλώνοντας πως το έγγραφο είναι µια σηµείωση (note). Οι επόµενες 4 γραµµές περιγράφουν τα 4 στοιχεία που περιλαµβάνονται µέσα στη ρίζα <note> και αποτελούν τα πεδία της (to, from, heading και body). Η τελευταία γραµµή καθορίζει το τέλος του στοιχείου ρίζα. Από το όνοµα των ετικετών και το περιεχόµενό τους µπορούµε εύκολα να συµπεράνουµε ότι αυτό το έγγραφο XML περιέχει ένα σηµείωµα από τη Mary στον Denny, για να του θυµίσει κάτι. Είναι φανερό ότι η XML είναι αυτοπεριγραφική Ονοµασία στοιχείων της XML Η ονοµασία των στοιχείων της XML πρέπει να γίνεται µε βάση τους εξής κανόνες:

12 Τα ονόµατα µπορεί να περιέχουν γράµµατα, αριθµούς και άλλους χαρακτήρες. Τα ονόµατα δεν µπορεί να αρχίζουν µε αριθµό, µε σηµεία στίξης ή µε τη λέξη xml (ή XML, Xml κτλ.). Τα ονόµατα δεν µπορεί να περιέχουν κενά. Πέρα από τους υποχρεωτικούς κανόνες, αποτελεί καλή πρακτική τα ονόµατα να είναι περιγραφικά, δηλαδή να αυτοπεριγράφονται και να βγάζουν νόηµα, ενώ πρέπει να αποφεύγονται οι παύλες και οι τελείες. Αντιθέτως, για το χωρισµό δύο λέξεων, είναι προτιµότερο να χρησιµοποιείται ένας χαρακτήρας υπογράµµισης, όπως στα <first_name>, <last_name>. Επίσης, τα ονόµατα µπορεί να είναι αρκετά µακροσκελή, αλλά καλύτερα να αποφεύγονται οι υπερβολές τύπου <the_title_of_the_book>. Τέλος, δεν συνίσταται να χρησιµοποιείται ο χαρακτήρας :, αφού είναι δεσµευµένος για να χρησιµοποιείται στους ορισµούς των χώρων ονοµάτων. Επειδή τα ονόµατα των στοιχείων της XML δεν είναι προκαθορισµένα, µπορεί να παρατηρηθεί σύγκρουση µεταξύ τους όταν δύο διαφορετικά έγγραφα χρησιµοποιούν τα ίδια ονόµατα στοιχείων. Στον Κώδικα 6.6 δίνονται δύο τέτοια XML έγγραφα. <table> <tr> <td>apples</td> <td>bananas</td> </tr></table> <table><name>african Coffee Table </name><width>80</width><length>120</length></table> Κώδικας 6.6 Παράδειγµα Πίνακα σε XML. Το πρώτο έγγραφο περιέχει πληροφορίες σχετικά µε έναν πίνακα, ενώ το δεύτερο σχετικά µε ένα τραπέζι. Αν αυτά τα δύο έγγραφα προστεθούν, θα προκύψει σύγκρουση, διότι και τα δύο περιέχουν ένα στοιχείο <table>, µε διαφορετικό όµως περιεχόµενο. Για να λύσουµε αυτό το πρόβληµα, µπορούµε να χρησιµοποιήσουµε ένα πρόθεµα πριν από το όνοµα του στοιχείου. Στον Κώδικα 6.7 παρουσιάζεται πώς µετατρέπονται τα παραπάνω έγγραφα XML. <h:table><h:tr> <h:td>apples</h:td> <h:td>bananas</h:td> </h:tr></h:table> <f:table><f:name>african Coffee Table</f:name><f:width>80</f:width> <f:length>120</f:length></f:table> Κώδικας 6.7 Μετατροπή εγγράφων XML. Τώρα δεν θα υπάρχει σύγκρουση ονοµάτων, διότι τα δύο έγγραφα χρησιµοποιούν διαφορετικό όνοµα για το στοιχείο <table> (<h:table> και <f:table>) Χώροι ονοµάτων στην XML Επεκτείνοντας την παραπάνω λογική της ονοµασίας των στοιχείων, µπορούµε να δηµιουργήσουµε και άλλα έγγραφα, όπως παρουσιάζεται στον Κώδικα 6.8. <h:table xmlns:h=" <h:tr><h:td>apples</h:td><h:td>bananas</h:td></h:tr></h:table> <f:table xmlns:f=" <f:name>african Coffee Table</f:name><f:width>80</f:width> <f:length>120</f:length></f:table> Κώδικας 6.8 Κώδικας XML µε χρήση χώρου ονοµάτων.

13 Αντί να χρησιµοποιήσουµε µόνο πρόθεµα, έχουµε προσθέσει ένα χαρακτηριστικό xmlns στο στοιχείο <table>, για να δώσουµε στο πρόθεµα ένα πιστοποιηµένο όνοµα συσχετισµένο µε ένα χώρο ονοµάτων (namespace). Το χαρακτηριστικό XML του χώρου ονοµάτων τοποθετείται στην ετικέτα έναρξης ενός στοιχείου και έχει την ακόλουθη σύνταξη: xmlns:namespace-prefix= namespaceuri. Η ικανότητα της XML να επιτρέπει στον προγραµµατιστή να ορίζει τα δικά του στοιχεία παρέχει σε αυτόν σηµαντική ευελιξία. Αλλά, ταυτόχρονα, δηµιουργεί µεγάλη πιθανότητα συγκρούσεων (conflicts) στον κώδικα όταν συνδυάζεται περιεχόµενο XML από διαφορετικές πηγές. Για παράδειγµα, αν το XML αφορά ένα βιβλιοπωλείο, τότε η χρήση της ετικέτας <title> στην XML µπορεί να στοχεύει στην παρακολούθηση τίτλων βιβλίων. Ένας µεσίτης υποθηκών θα χρησιµοποιήσει το <title> µε διαφορετικό τρόπο, ίσως για να παρακολουθήσει έναν τίτλο σε ένα συµβόλαιο. Ένας οδοντίατρος ή ένας γιατρός µπορεί να χρησιµοποιήσει το <title> για να παρακολουθήσει επίσηµους τίτλους των ασθενών (κ., κα., ή δρ.). Οι χώροι ονοµάτων XML προσπαθούν να κρατήσουν διαφορετικές σηµασιολογικές χρήσεις του ίδιου στοιχείου XML ξεχωριστά και ξεκάθαρα. Στα παραπάνω παραδείγµατα, κάθε άτοµο θα µπορούσε να καθορίσει τον δικό του χώρο ονοµάτων και, στη συνέχεια, να βάλει µπροστά από κάθε ετικέτα το όνοµα του χαρακτηριστικού του δικού του χώρου ονοµάτων. Για παράδειγµα, η ετικέτα <book: title> είναι διαφορετική από την ετικέτα <broker: title> και από την <medrec: title>. Επίσης, οι χώροι ονοµάτων είναι µία από τις τεχνολογίες που βοηθούν στη λειτουργία των EXtensible Stylesheet Language (XSLT) και των XML Schema Definition (XSD). Όταν καθορίζεται ένας χώρος ονοµάτων στην ετικέτα έναρξης ενός στοιχείου, τότε όλα τα στοιχεία-πεδία µε το ίδιο πρόθεµα είναι συσχετισµένα µε τον ίδιο χώρο ονοµάτων. Να σηµειωθεί ότι η διεύθυνση για τον καθορισµό του χώρου ονοµάτων δεν χρησιµοποιείται από κάποιον διαδικτυακό «αναλυτή» µε στόχο να αναζητήσει πληροφορίες, δηλαδή δεν χρειάζεται να αντιστοιχεί σε πραγµατική διεύθυνση. Μόνος σκοπός της είναι να δώσει στο χώρο ονοµάτων ένα µοναδικό όνοµα. Παρ όλα αυτά, πολύ συχνά οι εταιρείες χρησιµοποιούν το χώρο ονοµάτων ως δείκτη προς µια πραγµατική ιστοσελίδα που περιέχει πληροφορίες σχετικά µε το χώρο ονοµάτων. Επίσης, µπορούµε απλώς να ορίσουµε έναν προκαθορισµένο χώρο ονοµάτων για ένα στοιχείο, χωρίς να χρειάζεται να χρησιµοποιήσουµε προθέµατα σε όλα τα υποστοιχεία του µε την εξής σύνταξη: xmlns= namespaceuri. Έτσι, τα δύο έγγραφα XML στο προηγούµενο παράδειγµα γίνονται όπως φαίνεται στον Κώδικα 6.9. <table xmlns=" <tr><td>apples</td><td>bananas</td></tr></table> <table xmlns=" <name>african Coffee Table</name><width>80</width><length>120</length></table> Κώδικας 6.9 XML µε χρήση χώρου ονοµάτων Παράδειγµα χρήσης της XML Στον Κώδικα 6.10 παρουσιάζεται ένας ορισµός σε XML µιας λίστας µε βιβλία που µπορεί να υπάρχουν στην αποθήκη κάποιου φυσικού ή ηλεκτρονικού καταστήµατος. Ο ακόλουθος ορισµός δηλώνει ουσιαστικά τι µπορεί να υπάρχει µέσα σε ένα έγκυρο αρχείο xml που αφορά τη συγκεκριµένη λίστα. <!ELEMENT catalog (book+)> <!ELEMENT book (author+, title, genre?, price, publishing_date, description)>

14 <!ATTLIST book id #PCDATA> <!ELEMENT author (#PCDATA)> <!ELEMENT title (#PCDATA)> <!ELEMENT genre (#PCDATA)> <!ELEMENT price (#PCDATA)> <!ELEMENT publish_date (#PCDATA)> <!ELEMENT description (#PCDATA)> Κώδικας 6.10 Λίστα µε βιβλία σε XML. Στη γραµµή 1 δηλώνεται ότι τo άρθρο είναι ένα έγγραφο που αποτελείται από τρία στοιχεία: έναν τίτλο, ένα στοιχείο συγγραφέας και ένα στοιχείο περιοδικό. Το σύµβολο + µετά το στοιχείο συγγραφέας δείχνει ότι µπορεί να υπάρχει ένας συγγραφέας ή περισσότεροι. Στη γραµµή 5 το στοιχείο του τίτλου έχει δηλωθεί ως συµβολοσειρά (που αναφέρεται στην XML από τον βασικό τύπο δεδοµένων #PCDATA). To σύµβολο? υποδεικνύει ότι το στοιχείο είναι προαιρετικό, αλλά δεν µπορεί να δίνεται περισσότερες από µία φορές ανά βιβλίο στον κατάλογο. Κάθε στοιχείο που δεν υποδιαιρείται περαιτέρω καθορίζεται να είναι µια συµβολοσειρά. Στον Κώδικα 6.11 παρουσιάζεται ένα αρχείο XML που χρησιµοποιεί τους ορισµούς (definitions) (Document Type Definition/DTD) του Κώδικα 6.10, ώστε να περιγράψει έναν κατάλογο βιβλίων. (1) <?xml version="1.0"?> (2) <!DOCTYPE book_catalog SYSTEM "book_catalog.dtd"> (3) <catalog> (4) <book id="bk101"> (5) <author>gambardella, Matthew</author> (6) <title>xml Developer's Guide</title> (7) <genre>computer</genre> (8) <price>44.95</price> (9) <publish_date> </publish_date> (10) <description>an in-depth look at creating applications with XML. (11) </description> (12) </book> (13) <book id="bk110"> (14) <author>o'brien, Tim</author> (15) <title>microsoft.net: The Programming Bible</title> (16) <genre>computer</genre> (17) <price>36.95</price> (18) <publish_date> </publish_date> (19) <description>microsoft's.net initiative is explored in (20) detail in this deep programmer's reference.</description> (21) </book> (22) </catalog> Κώδικας 6.11 XML αρχείο µε DTD. Ένα στοιχείο καταλόγου βιβλίων σε XML µπορεί να δοθεί ως ένα έγγραφο XML, όπως φαίνεται στο παράδειγµα Υποθέτοντας ότι οι παραπάνω ορισµοί αποθηκεύονται σε ένα αρχείο book_catalog.dtd, στη γραµµή 2 φαίνεται πού θα βρεθούν όσοι ορισµοί σχετίζονται µε το τρέχον έγγραφο. Η γραµµή 4 ξεκινά την εγγραφή ενός βιβλίου δίνοντας και

15 ένα συγκεκριµένο αναγνωριστικό (id). Oι γραµµές 5-11 περιέχουν τα στοιχεία που περιγράφουν ένα βιβλίο, όπως το συγγραφέα, τον τίτλο, το είδος και την τιµή. Στις γραµµές περιγράφεται ακόµα ένα βιβλίο. Στη γραµµή 22 κλείνει ο ορισµός του συγκεκριµένου καταλόγου Μορφοποίηση και τύποι εγγράφων Ένα έγγραφο XML στην πλευρά του πελάτη προϋποθέτει ότι οι κανόνες µορφοποίησης είναι δεδοµένοι. Με βάση µια απλή προσέγγιση, πρέπει να ενσωµατωθεί ένα έγγραφο XML σε ένα έγγραφο HTML και στη συνέχεια να χρησιµοποιηθούν ετικέτες της HTML. Εναλλακτικά, µπορεί να χρησιµοποιηθεί µια ξεχωριστή γλώσσα µορφοποίησης, η Extensible Style Language (XSL), για να περιγράψει τη διάταξη ενός εγγράφου XML. Εκτός από τα στοιχεία που παραδοσιακά ανήκουν στα έγγραφα, όπως κεφαλίδες και παράγραφοι, οι γλώσσες HTML και XML µπορούν επίσης να υποστηρίξουν ειδικά στοιχεία που είναι προσαρµοσµένα στην υποστήριξη πολυµέσων. Για παράδειγµα, είναι δυνατόν όχι µόνο να συµπεριληφθεί µια εικόνα σε ένα έγγραφο, αλλά και να συνδεθούν βίντεο κλιπ, αρχεία ήχου, διαδραστικά κινούµενα σχέδια κτλ Δηµιουργία και ανάγνωση εγγράφων XML µε τη χρήση JAVA Η τεχνολογία για την ανάπτυξη διαδικτυακών εφαρµογών Java Server Pages (JSP), η οποία θα εξεταστεί αναλυτικά σε επόµενο κεφάλαιο και παρέχει τη δυνατότητα προσθήκης κώδικα Java µέσα σε σελίδες html, µπορεί να χρησιµοποιηθεί για τη δηµιουργία εγγράφων XML. Μια σελίδα JSP µπορεί να παραγάγει εύκολα µια απάντηση που να περιέχει ένα αρχείο XML, όπως το αρχείο stockprices.xml, το οποίο παρατίθεται. Κύρια απαίτηση για την παραγωγή του αρχείου XML είναι να τίθεται από τη σελίδα JSP ο τύπος του περιεχοµένου της (content type). Στον Κώδικα 6.12 παρουσιάζεται ένα παράδειγµα text/xml. page contenttype="text/xml" %> <?xml version="1.0" encoding="utf-8"?> <portfolio> <stock> <symbol>ibm</symbol> <name>international Business Machines</name> <price>105.30</price> </stock> <stock> <symbol>sunm</symbol> <name>sun Microsystems</name> <price>27.10</price> </stock> <stock> <symbol>aol</symbol> <name>america Online</name> <price>60.20</price> </stock> </portfolio> Κώδικας 6.12 Δηµιουργία XML από JSP. Επίσης, η γλώσσα προγραµµατισµού Java διαθέτει αρκετές µεθόδους για επεξεργασία και δηµιουργία αρχείων XML. Το StaX API (Simple API for XML) 3 είναι ένα 3

16 Java API για ανάγνωση και δηµιουργία εγγράφων XML, το οποίο εµφανίστηκε πρώτη φορά στην έκδοση 6 της Java. Βασίζεται σε ένα µοντέλο pull-parsing, δηλαδή στην ανάγνωση του XML αρχείου και στη συντακτική του ανάλυση (parsing). Το βασικό µέρος του StaX API αποτελείται από δύο υποκατηγορίες API: Cursor API και Event Iterator API. Οι εφαρµογές µπορούν να χρησιµοποιήσουν οποιαδήποτε από τα δύο αυτά API για τη συντακτική ανάλυση των εγγράφων XML. Το Event Iterator API παρέχει δύο βασικές διεπαφές, το XMLEventReader, για τη συντακτική ανάλυση αρχείων XML, και το XMLEventWriter, για τη δηµιουργία αρχείων XML. Με το Event Iterator API, οι εφαρµογές ψάχνουν σε ολόκληρο το έγγραφο κάνοντας αίτηση για το NextEvent. Σηµειώνεται ότι το EventIterator API υλοποιείται πάνω από το Cursor API Η τεχνολογία JSON Τι είναι η JSON Η τεχνολογία JavaScript Object Notation (JSON) είναι µια µορφή αναπαράστασης δεδοµένων µε σκοπό την ανταλλαγή τους ή, ισοδύναµα, είναι ένας οργανωµένος και εύκολος τρόπος για την αποθήκευση των πληροφοριών και την πρόσβαση σε αυτές. Επίσης, είναι ανεξάρτητη της χρησιµοποιούµενης γλώσσας, αυτοπεριγραφική και εύκολη στην κατανόηση. Με άλλα λόγια, δίνει µια αναγνώσιµη από τον άνθρωπο συλλογή των δεδοµένων. Επειδή στη σύνταξή της είναι παρόµοια µε την JavaScript, δεν χρησιµοποιείται σε αυτήν parser, όπως στην XML. 4 Έτσι, ένα πρόγραµµα γραµµένο σε JavaScript µπορεί να χρησιµοποιήσει συγκεκριµένες συναρτήσεις της για τη µετατροπή δεδοµένων µορφής JSON σε φυσικά αντικείµενα JavaScript. Στον Κώδικα 6.13 παρουσιάζεται ένα απλό παράδειγµα JSON που περιέχει τα στοιχεία του βιβλίου. var json = { "title" : "Πληροφοριακά Συστήµατα στο Διαδίκτυο" ; Κώδικας 6.13 Στοιχεία βιβλίου σε JSON. Η JSON συντάσσεται ως εξής: τα δεδοµένα κατατάσσονται σε ζευγάρια ονόµατος τιµής, χωρίζονται µε κόµµα και περικλείονται από άγκιστρα, ενώ οι πίνακες από αγκύλες. Στο παράδειγµα του κώδικα 6.13, δηµιουργείται ένα αντικείµενο JSON, που διαθέτει µόνο ένα γνώρισµα, το γνώρισµα title, ως τιµή του οποίου έχει δοθεί ο τίτλος του παρόντος βιβλίου. Άλλα παραδείγµατα σε JSON παρουσιάζονται στους Κώδικες 6.14, 6.15 και "firstname":"john" Kώδικας 6.14 Αναπαράσταση δεδοµένου σε JSON. {"firstname":"john", "lastname":"smith" Κώδικας 6.15 Παράδειγµα αντικειµένου σε JSON. 4

17 teachers :[ { firstname : Christos, lastname : Douligeris, { firstname : Sarandis, lastname : Mitropoulos, ]= Κώδικας 6.16 Παράδειγµα πίνακα σε JSON. Ένα ελαφρώς πιο περίπλοκο παράδειγµα δίνεται στον Κώδικα Το παράδειγµα αυτό περιλαµβάνει την αποθήκευση δύο βιβλίων σε µία µεταβλητή, µε τη χρήση µιας δοµής που προσοµοιάζει µε πίνακα. var books = [{ "title" : " Πληροφοριακά Συστήµατα στο Διαδίκτυο", { "title" : "Ανάπτυξη Διαδραστικών Εφαρµογών"]; Κώδικας 6.17 Μεταβλητή σε JSON. Για να φορτώσουµε τα δεδοµένα JSON σε εφαρµογές ιστού, µπορούµε εύκολα να χρησιµοποιήσουµε τη µέθοδο $.ajax (), η οποία διατίθεται στη βιβλιοθήκη JQuery. Στον Κώδικα 6.18 παρουσιάζεται ένα τέτοιο απλό παράδειγµα. $.ajax( type:'get', url:" data:"format=json&id=123", success:function(feed) { document.write(feed);, datatype:'jsonp' ); Κώδικας 6.18 Η µέθοδος $.ajax (). Αυτό το παράδειγµα κάνει χρήση της εντολής $.ajax, που πραγµατοποιεί µια ασύγχρονη κλήση και τις τελευταίες τροφοδοτήσεις (feeds) δεδοµένων από µια σύνοψη πλούσιας σελίδας (Rich Site Summary/RSS), τα οποία και φορτώνει στην ιστοσελίδα µας. Η RSS αποτελεί µια µέθοδο ανταλλαγής ψηφιακού περιεχοµένου στον παγκόσµιο ιστό, βασισµένη στην XML. Στην Εικόνα 6.3 δίνεται το διάγραµµα ροής χρήσης της JSON. Εικόνα 6.3 Διάγραµµα ροής χρήσης της JSON

18 Παραδείγµατα σύγκρισης JSON και XML Για κάποιο διάστηµα, η XML ήταν η µόνη επιλογή για την ανοικτή ανταλλαγή δεδοµένων. Καθώς δεν υπήρχαν διαθέσιµες άλλες ανοικτές µορφές, χαιρετίστηκε ως η λύση για όλα τα προβλήµατα σχετικά µε την κοινοχρησία δεδοµένων.[6] Αυτή η µορφή θα µπορούσε να χειριστεί τα κλασικά δεδοµένα, όπως αριθµούς και κείµενο, αλλά και πιο περίπλοκα, όπως µορφοποίηση, εικόνες, ήχο και βίντεο. Τώρα που έχουν γίνει διαθέσιµες και άλλες επιλογές, η XML µπορεί να θεωρηθεί υπερβολή υπό πολλές έννοιες. Σήµερα βρισκόµαστε αντιµέτωποι µε την επιλογή µεταξύ JSON και XML κατά τη δηµιουργία αρχείων δεδοµένων. Μερικές διαφορές ανάµεσα στα δύο πρότυπα είναι: Η απλότητα, η διαφάνεια και η διαλειτουργικότητα. Όσον αφορά την απλότητα, τη διαφάνεια και τη διαλειτουργικότητα, η JSON και η XML λειτουργούν παρόµοια, δηλαδή δεν υπάρχει, ουσιαστικά, µεγάλη διαφορά µεταξύ τους. Η αυτοπεριγραφή δεδοµένων και η διεθνοποίηση. Άλλα κοινά χαρακτηριστικά ανάµεσα στην JSON και την XML είναι η εφαρµογή της αυτοπεριγραφής των δεδοµένων και η διεθνοποίηση. Και τα δύο αυτά πρότυπα χρησιµοποιούν Unicode, που είναι η κωδικοποίηση των συστηµάτων γραφής, αλλά και διάφορες µορφές ηµεροµηνιών. Η επεκτασιµότητα. Με την JSON, ο προγραµµατιστής είναι περιορισµένος στην αποθήκευση µόνο κλασικών στοιχείων, όπως είναι το κείµενο και οι αριθµοί. Ωστόσο, η XML επιτρέπει την αποθήκευση κάθε τύπου δεδοµένων. Η ικανότητα να επεκτείνει τα χαρακτηριστικά των δεδοµένων που αποθηκεύονται σε αρχεία XML καθιστά την JSON περισσότερο ευέλικτη, αλλά πιο δύσκολη να διαβαστεί. Και τα δύο αρχεία XML και JSON είναι εύκολα αναγνώσιµα από τον άνθρωπο. Η πλήρης ενσωµάτωση όλων των µορφών αρχείων. Με την XML είναι δυνατή η επισύναψη οποιουδήποτε αρχείου οποιασδήποτε µορφής. Από την άλλη πλευρά, το JSON υποστηρίζει µόνο τις παραδοσιακές µορφές. Αυτό σηµαίνει ότι είναι δυνατόν να περιλαµβάνονται φωτογραφίες, ήχος, βίντεο και άλλα στοιχεία σε ένα αρχείο XML. Ενώ κάτι τέτοιο µπορεί να φαίνεται καλό σε πρώτη φάση, ωστόσο ενδέχεται να είναι επικίνδυνο, γιατί θα µπορούσε να περιλαµβάνει ένα εκτελέσιµο αρχείο το οποίο έχει σηµαντικές συνέπειες για την ασφάλεια. Η απλότητα των δοµών δεδοµένων JSON καθιστούν κάτι τέτοιο αδύνατον. Η κοινή χρήση δεδοµένων. Η JSON είναι το καλύτερο εργαλείο για την ανταλλαγή δεδοµένων, επειδή αυτά αποθηκεύονται σε πίνακες και αρχεία, σε αντίθεση µε την XML, στην οποία αποθηκεύονται σε δέντρα. Και οι δύο τρόποι έχουν τα πλεονεκτήµατά τους, αλλά η µεταφορά δεδοµένων είναι πολύ ευκολότερη όταν αυτά αποθηκεύονται σε µια δοµή που είναι γνωστή σε αντικειµενοστρεφείς γλώσσες. Κάτι τέτοιο καθιστά πολύ εύκολη την εισαγωγή από ένα αρχείο JSON σε γλώσσες όπως οι Perl, Ruby, JavaScript, και Python. Η κοινή χρήση εγγράφων. Όσον αφορά το διαµοιρασµό εγγράφων, η XML είναι το κατάλληλο εργαλείο, επειδή επιτρέπει να περιλαµβάνονται τύποι δεδοµένων, όπως εικόνες, διαγράµµατα και γραφήµατα. Επιπλέον, παρέχει επιλογές για τη µεταφορά της δοµής, µαζί µε την πραγµατική ηµεροµηνία. Η JSON προσφέρει µόνο επιλογές για τη µεταφορά δεδοµένων, χωρίς µορφοποίηση, και µόνο µε τη χρήση παραδοσιακών µορφών ηµεροµηνίας. Συµπερασµατικά, και οι δύο τεχνολογίες είναι αρκετά δυνατές και θα πρέπει η καθεµία να χρησιµοποιείται κατά περίπτωση. Αναλυτικά, είναι καλό να προτιµάται η χρήση JSON όταν δεν απαιτείται επαλήθευση ή/και µεταµόρφωση των µηνυµάτων, τα µηνύµατα είναι κυρίως απλό κείµενο και οι τεχνολογίες που χρησιµοποιούνται διαθέτουν καλά εργαλεία JSON (Java, JavaScript κτλ.). Αντίθετα, η XML θα πρέπει να προτιµάται όταν απαιτείται επαλήθευση, χρησιµοποιείται η XSLT, τα µηνύµατα είναι περισσότερο σύνθετα και οι τεχνολογίες που χρησιµοποιούνται δεν είναι φιλικές προς την JSON.

19 Στον Κώδικα 6.19 δίνονται παραδείγµατα που περιγράφουν ένα άτοµο σε µορφή JSON και σε µορφή XML. { "firstname": "John", "lastname": "Smith", "isalive": true, "age": 30, "height_cm": , "address": { "streetaddress": "22 3nd Street", "city": York", "state": "NY", "postalcode": " " "New, "phonenumbers": [ { "type": "home", "number": " ", Κώδικας 6.19 Παράδειγµα κώδικα σε JSON-XML. Εδώ, βλέπουµε τον ορισµό µιας οντότητας person (την περιγραφή των στοιχείων ενός ατόµου), η οποία είναι γραµµένη πρώτα σε JSON και εν συνεχεία σε XML. Τα δύο παραδείγµατα περιγράφουν ακριβώς την ίδια οντότητα, αλλά στην περίπτωση της XML τα στοιχεία του ατόµου ορίζονται χρησιµοποιώντας στοιχεία XML (µε ετικέτες ανοίγµατος και κλεισίµατος), ενώ στην περίπτωση της JSON η µορφή της οντότητας είναι πιο κοντά σε γλώσσα προγραµµατισµού, µε κάθε στοιχείο να είναι αντικείµενο (ή πίνακας από αντικείµενα, στην περίπτωση του phonenumbers). Στην ιστοσελίδα του Κεφαλαίου 6 του παρόντος συγγράµµατος, στον Ελληνικό Συσσωρευτή Ακαδηµαϊκών Ηλεκτρονικών Βιβλίων ( υπάρχει διαθέσιµο το βίντεο µε τίτλο video6.1_xml_json, στο οποίο εξηγούνται οι τεχνολογίες XML και JSon και δίνονται σχετικά παραδείγµατα JavaScript και JQuery Λίγα λόγια για την JavaScript Η JavaScript είναι µια γλώσσα προγραµµατισµού που έχει σχεδιαστεί κυρίως για την προσθήκη διαδραστικότητας σε ιστοσελίδες και τη δηµιουργία εφαρµογών στον παγκόσµιο ιστό. Ενσωµατώθηκε πρώτη φορά από την Netscape Communications Corp. στο φυλλοµετρητή Netscape Navigator 2 beta (1995). Είναι διαφορετική από τη γλώσσα Java, η οποία αναπτύχθηκε τη δεκαετία του 1990 από τη Sun Microsystems. Εντούτοις, οι δύο γλώσσες συνεργάζονται αποτελεσµατικά. Τα προγράµµατα JavaScript στην πλευρά του πελάτη µπορεί να ενσωµατωθούν άµεσα στον κώδικα HTML των ιστοσελίδων. Σηµειώνεται ότι υπάρχει και JavaScript στην πλευρά του εξυπηρετητή (Server-Side JavaScript), η µελέτη της οποίας όµως ξεφεύγει από το σκοπό αυτού του κεφαλαίου. Ανάλογα µε την πρόθεση του προγραµµατιστή, τα σενάρια µπορεί να εκτελούνται όταν ο χρήστης ανοίγει τη σελίδα στον ιστό, κάνει κάποια επιλογή ή σέρνει κάποιο στοιχείο σελίδας µε το ποντίκι, πληκτρολογεί, υποβάλλει µια φόρµα ή εγκαταλείπει τη σελίδα.[7]

20 Η JavaScript µπορεί να αλλάξει όχι µόνο το περιεχόµενο και τα χαρακτηριστικά της HTML, αλλά επίσης το στιλ εµφάνισης της σελίδας CSS, καθώς και να επικυρώσει δεδοµένα εισόδου σε φόρµες (forms). Στην HTML, ο κώδικας JavaScript πρέπει να εισαχθεί ανάµεσα στις ετικέτες <script> και </script>. Μπορεί να εισαχθεί στην επικεφαλίδα (<head>) ή στο σώµα (<body>) της HTML σελίδας, ενώ προτείνεται να είναι σε ένα µόνο από τα δύο σηµεία. Επίσης, ο κώδικας JavaScript µπορεί να εισαχθεί από εξωτερικά αρχεία µε την κατάληξη.js. Η καλύτερη πρακτική είναι να εισάγεται στο τέλος του <body> της HTML, ώστε η εµφάνιση στοιχείων της HTML να µην εµποδίζεται από σενάρια που φορτώνουν. Στον Κώδικα 6.20 δίνεται ένας ενδεικτικός κώδικας JavaScript, στον οποίο ο χρήστης αλλάζει µε το πάτηµα ενός κουµπιού (button) το περιεχόµενο ενός στοιχείου <p> που έχει id: «test», από «Some Τext» σε «New Text». <!DOCTYPE html> <html> <body> <h1>test Web Page</h1> <p id="test">some text</p> <button type="button" onclick="testfunction()">test JavaScript</button> <script> function testfunction() { document.getelementbyid("test").innerhtml = "New Text"; </script> </body> </html> Κώδικας 6.20 Παράδειγµα JavaScript. 5 Η JavaScript είναι µια αντικειµενοστρεφής γλώσσα, η οποία χρησιµοποιεί πρωτότυπη κληρονοµικότητα (prototype inheritance), δηλαδή τα αντικείµενα µπορούν να κληρονοµήσουν ιδιότητες κατευθείαν το ένα από το άλλο, σχηµατίζοντας έτσι την αλυσίδα αντικειµένου-πρωτοτύπου. Η Javascript υποστηρίζει διάφορα ενσωµατωµένα αντικείµενα, επιτρέποντας στους προγραµµατιστές να δηµιουργήσουν τα δικά τους αντικείµενα. Η πρωτότυπη κληρονοµικότητα την κάνει πολύ διαφορετική από τις άλλες δηµοφιλείς γλώσσες προγραµµατισµού, όπως είναι η C ++, η C # και η Java. Δεν έχει κλάσεις όµοιες µε αυτές της C ++ ή της Java. Υποστηρίζεται ευρέως από τους περισσότερους φυλλοµετρητές, µε αποτέλεσµα να είναι ένα από τα πιο δηµοφιλή εργαλεία για την ανάπτυξη εφαρµογών ιστού. Στον Κώδικα 6.21 παρουσιάζεται άλλο ένα παράδειγµα JavaScript, στο οποίο υπολογίζεται το άθροισµα από το 1 έως έναν δοθέντα αριθµό. function sumdigits(num) { var i, sum = 0; for (i = 1; i <= num; i++) { sum += i; alert("the sum of the digits from 1 to "+ num + " is:\n\n\t " + sum); 5

21 Κώδικας 6.21 Συνάρτηση υπολογισµού αθροίσµατος σε γλώσσα JavaScript Η βιβλιοθήκη JQuery Η JQuery[8] είναι µια «ελαφριά» βιβλιοθήκη της JavaScript, της οποίας σκοπός είναι να κάνει πολύ ευκολότερη τη χρήση της στον ιστοχώρο. Θα µπορούσε να περιγραφεί και ως ένα επίπεδο αφαίρεσης, δεδοµένου ότι λαµβάνει µεγάλο µέρος της λειτουργικότητας, για την οποία θα έπρεπε να γραφτούν πολλές γραµµές κώδικα JavaScript, και το «τυλίγει» σε λειτουργίες που µπορεί να κληθούν µε µια ενιαία γραµµή κώδικα. Είναι σηµαντικό να σηµειωθεί ότι δεν αντικαθιστά την JavaScript. Αν και προσφέρει κάποιες συντακτικές συντοµεύσεις, ο κώδικας που γράφεται όταν γίνεται χρήση JQuery παραµένει κώδικας JavaScript. Έτσι, δεν χρειάζεται να είναι κάποιος ειδικός στην JavaScript για να χρησιµοποιήσει την JQuery. Επίσης, απλοποιεί πολλά από τα πολύπλοκα στοιχεία της JavaScript, όπως τις κλήσεις AJAX και τη διαχείριση του DOM. Ακριβώς όπως η HTML, η CSS και η JavaScript, έτσι και η JQuery µπορεί να γραφτεί σε οποιοδήποτε είδος επεξεργαστή κειµένου. H βιβλιοθήκη JQuery περιλαµβάνει τα ακόλουθα χαρακτηριστικά: 6 διαχείριση του HTML/DOM, διαχείριση της CSS, µεθόδους γεγονότων HTML, εφέ και κίνηση, AJAX και εφαρµογές. Παρότι υπάρχουν πολλές βιβλιοθήκες για την JavaScript, η JQuery είναι η πιο δηµοφιλής. Έχει υιοθετηθεί σε πολύ µεγάλα έργα, αλλά και από µεγάλες εταιρείες, όπως είναι η Google και η IBM. Για να χρησιµοποιηθεί η JQuery σε µια ιστοσελίδα, πρέπει να πραγµατοποιηθεί η λήψη της βιβλιοθήκης JQuery από την ηλεκτρονική διεύθυνση από ένα Δίκτυο Διανοµής Περιεχοµένου (Content Delivery Network/CDN), όπως αυτό της Google. Η βιβλιοθήκη JQuery, δεδοµένου ότι είναι ένα αρχείο τύπου JavaScript, περιλαµβάνεται σε ένα αρχείο HTML µέσω µιας ετικέτας <script>, όπως παρουσιάζεται στον Κώδικα <head> <script src="jquery min.js"></script> </head> Κώδικας 6.22 Συµπερίληψη της JQuery σε µια ιστοσελίδα. Στον Κώδικα 6.23 παρουσιάζεται ο τρόπος µε τον οποίο συµπεριλαµβάνεται η JQuery σε µια σελίδα HTML. Μέσω του συγκεκριµένου κώδικα σε JQuery, µε το πάτηµα ενός κουµπιού προκαλείται η απόκρυψη των στοιχείων <p>. <!DOCTYPE html> <html> <head> <script src=" <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); 6

22 ); ); </script> </head> <body> <h2>this is a heading</h2> <p>this is a paragraph.</p> <p>this is another paragraph.</p> <button>click me</button> </body> </html> Κώδικας 6.23 Παράδειγµα σε JQuery. 7 Στον Κώδικα 6.24, σε ένα απλό αρχικό κοµµάτι κώδικα JQuery παρουσιάζεται η άµεση προσπέλαση ενός αντικειµένου HTML που έχει id: «divtest1», µε τη χρήση του επιλέκτη (selector) του JQuery. To σύµβολο # χρησιµοποιείται για την επιλογή αντικειµένων µε βάση το αναγνωριστικό τους, ενώ η τελεία (.) για την επιλογή µε βάση την κλάση (class) τους. <div id="divtest1"></div> <script type="text/javascript"> $("#divtest1").text("hello, world!"); </script> Κώδικας 6.24 Εκτύπωση του Hello world σε JQuery. Στην Εικόνα 6.4 παρουσιάζεται συνοπτικά η δοµή της JQuery Η τεχνολογία AJAX Εικόνα 6.4 Η δοµή της jquery. Η AJAX 8 δεν είναι µια νέα γλώσσα προγραµµατισµού, αλλά µια τεχνολογία σχετική µε την ενηµέρωση µέρους µιας ιστοσελίδας χωρίς την ανάγκη επαναφόρτωσης ολόκληρης της ιστοσελίδας. Αν µια ιστοσελίδα δεν χρησιµοποιεί την τεχνολογία AJAX, δεν είναι δυνατόν να ενηµερωθεί χωρίς επαναφόρτωση