Σχεδίαση και Ανάπτυξη Ιστότοπων

Transcript

1 Σχεδίαση και Ανάπτυξη Ιστότοπων Το περιβάλλον του Παγκόσμιου Ιστού Παρουσίαση 2 η 1 Βελώνης Γεώργιος Καθηγητής

2 Περιεχόμενα Ιστότοπος (Web Site) Domain Name (Όνομα Τομέα Internet) Top-Level Domains Uniform Resource Locator (URL) (Ενιαίος Εντοπιστής Πόρων) Φυλλομετρητής (Browser) Τα Δομικά Στοιχεία μιας Ιστοσελίδας Η Ανατομία μιας Ιστοσελίδας Η Πλευρά του Πελάτη HTML (HyperText Markup Language) XML (extensible Markup Language) XHTML (EXtensible HyperText Markup Language) 2

3 Περιεχόμενα Προσθήκη Java Applets Προσθήκη Ελέγχων (ActiveX Controls) Plugins Γλώσσες Σεναρίων (script Ianguages) από την πλευρά του πελάτη (client side) Η πλευρά του εξυπηρετητή (server side) Λογισμικό εξυπηρετητή Παγκόσμιου Ιστού Λειτουργίες ενός τυπικού εξυπηρετητή Παγκόσμιου Ιστού Συνήθεις Διασυνδέσεις Εισόδου CGl (Common Gateway Interfaces) Βάσεις Δεδομένων (Data Bases) 3

4 Ιστότοπος (Web Site) Ένας ιστότοπος (ιστοχώρος ή διαδικτυακός τόπος, όπως αλλιώς ονομάζεται), είναι μία συλλογή από ιστοσελίδες και άλλα ψηφιακά αρχεία (εικόνες, βίντεο, κ.λπ.), τα οποία φιλοξενούνται συνήθως στον ίδιο web server. Οι ιστοσελίδες ενός ιστότοπου ξεκινούν πάντα από μια Κεντρική Σελίδα (Home Page). H URL (όπως ονομάζεται) διεύθυνση της κεντρικής σελίδας μιας τοποθεσίας, αποτελεί τη διεύθυνση του συγκεκριμένου ιδιοκτήτη στον Ιστό. Πολλές φορές, πριν από την κεντρική σελίδα, υπάρχει μια Εισαγωγική Σελίδα η οποία τοποθετείται για να εντυπωσιάσει τους νεοεισερχόμενους «επισκέπτες» και η οποία οδηγεί αμέσως στη Κεντρική Σελίδα του site. 4

5 Ιστότοπος (Web Site) Δεν υπάρχει πάντα Μπαίνει για καλωσόρισμα Η βασική σελίδα «πρόσωπο» της τοποθεσίας Intro Ανατομία ενός web site 5

6 Domain Name (Όνομα Τομέα Internet) Ένα Domain Name είναι ένα μοναδικό συμβολικό όνομα που αντιστοιχεί σε κάποιο server στο Διαδίκτυο, ο οποίος μπορεί να φιλοξενεί ιστοσελίδες ή διαδικτυακές υπηρεσίες, σε ειδικό χώρο, που συνδέεται με το domain name μέσω των υπηρεσιών DNS. Η συμβολική διεύθυνση ενός υπολογιστή στο Internet αποτελείται από λέξεις που χωρίζονται μεταξύ τους με τελείες. Ο αριθμός των λέξεων μπορεί να ποικίλει και σχεδόν πάντα έχει κάποια σημασία. Στην πράξη συναντάμε συνήθως ονόματα με 3 έως 5 λέξεις. Για παράδειγμα, τo domain «1epal-kater.pie.sch.gr» αποτελείται από 4 λέξεις. Η 1 η (από αριστερά) συμβολίζει το όνομα του σχολείου και την πόλη στην οποία αυτό βρίσκεται, η 2 η το νομό της Ελλάδος στον οποίο ανήκει, η 3 η ότι πρόκειται για σχολείο και η 4 η και τελευταία τη χώρα (Ελλάδα). 6

7 Domain Name (Όνομα Τομέα Internet) Ένα πλήρες όνομα domain μπορεί να αποτελείται και από υποπεριοχές (subdomains), ενώ το τελευταίο του τμήμα ονομάζεται Top-Level Domain (TLD) και μπορεί να συμβολίζει συνήθως τη χώρα ή το είδος του οργανισμού στον οποίο αυτό ανήκει. 7 Ανατομία ενός domain

8 Domain Name (Όνομα Τομέα Internet) 8 Ανατομία ενός domain Περισσότερα παραδείγματα

9 Top-Level Domains Κατηγορίες TLD s Υπάρχουν τρεις κυρίως κατηγορίες TLD s και είναι οι παρακάτω: Country Code (κωδικών χωρών) Top-Level Domain (cctld): Είναι μήκους δύο γραμμάτων και χρησιμοποιούνται από χώρες ή εξαρτώμενες περιοχές, π.χ. το gr ανήκει στην Ελλάδα, ενώ το bg στη Βουλγαρία. Generic (γενικά) Top-Level Domain (gtld): Είναι μήκους τριών ή περισσότερων χαρακτήρων και χρησιμοποιούνται από συγκεκριμένους οργανισμούς, π.χ. το edu ανήκει σε ακαδημαϊκούς οργανισμούς, ενώ το gov σε κυβερνητικούς. Infastracture (δομικά) Top-Level Domain (ARPA - Advanced Research Projects Agency): Χρησιμοποιείται αποκλειστικά για σκοπούς της τεχνικής υποδομής από τον οργανισμό ARPANET (πρόδρομος του Διαδικτύου) στις Η.Π.Α. 9

10 Top-Level Domains Γενικά TLD s.aero - για αερομεταφορείς.biz - για επιχειρήσεις (business).cat - για καταλανική γλώσσα και πολιτισμό.com - για εμπόριο, ελεύθερο domain και το πλέον χρησιμοποιούμενο.coop - για συνεταιρισμούς.edu - για εκπαιδευτικά ιδρύματα.gov - για κυβερνητικές υπηρεσίες στις Ηνωμένες Πολιτείες.info - για πληροφοριακά site, ελεύθερο.int - για διεθνείς οργανισμούς.jobs - για site σχετικά με την εργασία.mil - για τον αμερικανικό στρατό 10

11 Top-Level Domains Γενικά TLD s.mobi - για την αγορά κινητής τηλεφωνίας.museum - για μουσεία.name - για οικογένειες και μεμονωμένα άτομα.net - αρχικά για δίκτυα, τώρα ελεύθερο.org - αρχικά για οργανώσεις, τώρα ελεύθερο.pro - για επαγγέλματα.travel - για ταξιδιωτικά γραφεία, κλπ. 11

12 Uniform Resource Locator (URL) Ενιαίος Εντοπιστής Πόρων Κάθε ιστοσελίδα αναγνωρίζεται από μία και μοναδική «Διεύθυνση», η οποία ονομάζεται URL και είναι η διεύθυνση που ο χρήστης πληκτρολογεί στο browser για να μπορέσει να έχει πρόσβαση στο αρχείο που αυτή «δείχνει» στο Διαδίκτυο. Επίσης τα URLs χρησιμοποιούνται από τις ιστοσελίδες, για να μπορούν αυτές να συνδεθούν μεταξύ τους. Η πλήρης σύνταξη ενός URL είναι η παρακάτω: πρωτόκολλο://host.domain:port/διαδρομή/όνομα αρχείου Σημείωση: Όταν το port είναι 80 (TCP HTTP), δηλαδή αυτό που χρησιμοποιείται για τη μεταφορά ιστοσελίδων, δε χρειάζεται να πληκτρολογηθεί και γι αυτό δεν εμφανίζεται στα URLs. 12

13 Uniform Resource Locator (URL) Ενιαίος Εντοπιστής Πόρων Εξυπηρετητής (Host) Όνομα καταλόγου Όνομα αρχείου Πρωτόκολλο Domain (1 ο + 2 ο επίπεδο) 3 ο επίπεδο domain 4 ο επίπεδο domain 5 ο επίπεδο domain 13 Ανατομία ενός URL

14 Uniform Resource Locator (URL) Ανάλυση των μερών ενός URL Πρωτόκολλο: Ορίζει το πρωτόκολλο μεταφοράς του αρχείου. Το πιο συνηθισμένο είναι το http, όταν πρόκειται για αρχείο από έναν web server, αλλά μπορεί να είναι και ένα από τα παρακάτω: file: για αρχείο σε τοπικό δίσκο υπολογιστή ftp: για αρχείο από έναν ftp server news: για newsgroup telnet: για σύνδεση telnet WAIS: για αρχείο από έναν WAIS server gopher: για αρχείο από έναν gopher server Host: Το καθορισμένο host για το πρωτόκολλο http είναι το www. 14

15 Uniform Resource Locator (URL) Ανάλυση των μερών ενός URL Domain: Ορίζει το όνομα του Domain Name, π.χ. sch.gr. Port: Ορίζει τον αριθμό της θύρας του server από τον οποίον διαβάζεται το αρχείο. Όπως προαναφέρθηκε, συνήθως παραλείπεται από το URL όταν η τιμή του είναι 80 (προκαθορισμένη θύρα για το http). Διαδρομή (path): Ορίζει την διαδρομή που βρίσκεται το αρχείο στον server. Όταν παραλείπεται η διαδρομή, τότε το αρχείο πρέπει να είναι στο root κατάλογο του website (π.χ. index.html). Όνομα αρχείου: Ορίζει το όνομα αρχείου. Σε περίπτωση που αυτό λείπει (πχ. τότε ο browser ψάχνει για τα αρχεία index.asp ή index.php ή index.html (ανάλογα με τις ρυθμίσεις του server). 15

16 Φυλλομετρητής (Browser) Η πρόσβαση στις σελίδες ενός εξυπηρετητή Ιστού γίνεται μέσω προγραμμάτων λογισμικού (πελάτες) που ονομάζονται Φυλλομετρητές ή Browsers (μερικές φορές συναντώνται και ως Αναγνώστες Ιστοσελίδων, Πλοηγοί, Σελιδομετρητές ή Περιηγητές) και τα οποία απευθύνουν «ερωτήσεις» στους web servers του Διαδικτύου. Υπάρχει μεγάλη ποικιλία φυλλομετρητών, για διαφορετικούς τύπους υπολογιστών και διαφορετικά λειτουργικά συστήματα, με γνωστότερους τον Internet Explorer, το Mozilla Firefox, το Google Chrome, το Safari, το Yandex και τον Opera. 16

17 Φυλλομετρητής (Browser) Καθώς όλο και νέο λογισμικό φυλλομετρητών υλοποιείται, τα νέα προϊόντα (ή νέες εκδόσεις παλαιότερων προϊόντων) παρέχουν επιπλέον δυνατότητες που δεν είναι όμως κοινές σε όλους τους φυλλομετρητές. Η έλλειψη τυποποίησης των ιστοσελίδων προκαλεί το σύνηθες φαινόμενο, να μην μπορεί μια ομάδα χρηστών να δει το περιεχόμενο κάποιον σελίδων, ή να μη τo βλέπουν σωστά. Αυτό μπορεί να οφείλεται και στον κατασκευαστή των ιστοσελίδων, ο οποίος πιθανών να χρησιμοποίησε για τη δημιουργία τους χαρακτηριστικά μη υποστηριζόμενα από το browser ή τους browsers που οι χρήστες χρησιμοποιούν. 17

18 Φυλλομετρητής (Browser) Συμπερασματικά οι browsers κατέχουν σημαντικό ρόλο στην ανάπτυξη του Ιστού. Μέσα από τις προσθήκες νέων δυνατοτήτων και χαρακτηριστικών, δίνουν τη δυνατότητα στους κατασκευαστές ιστοσελίδων (web developers) να αναβαθμίσουν τα έργα τους, αξιοποιώντας κάθε νέα δυνατότητα που τους δίνεται από αυτές τις εφαρμογές. 18

19 Τα Δομικά Στοιχεία μιας Ιστοσελίδας Ένα από τα βήματα που πρέπει να ακολουθήσει ο κατασκευαστής της ιστοσελίδας είναι και η ανάλυση των περιεχομένων της. Θα πρέπει να μπορεί να εντοπίσει τα δομικά της στοιχεία και να γνωρίζει τα εργαλεία με τα οποία μπορεί να αναπτυχθεί το καθένα από αυτά. Πολύ σημαντικό είναι επίσης να εκτιμήσει τη χρηστικότητα, την αισθητική και τη γραφιστική της εμφάνιση. Μια ιστοσελίδα πρέπει να είναι ευκολοδιάβαστη, περιεκτική σε πληροφορία και να φαίνονται εύκολα όλοι οι σύνδεσμοι που περιέχει. 19

20 Τα Δομικά Στοιχεία μιας Ιστοσελίδας Κείμενα Πίνακες Πλαίσια (frames) Γραφικά (bitmap & διανυσματικά) Γραφικό υπόβαθρο Διακοσμητικά γραφικά Εικόνες που εμφανίζονται σε ειδικό παράθυρο εκτός ιστοσελίδας Κινούμενες εικόνες Γραφικοί τίτλοι κειμένων Υπερσύνδεσμοι Χάρτες υπερσυνδέσμων Μουσική και ήχοι Βίντεο Αλληλεπιδραστικές εφαρμογές στην ιστοσελίδα Τρισδιάστατα γραφικά και VRML 20

21 Ανατομία ιστοσελίδων Μια ιστοσελίδα αποτελείται συνήθως από τα παρακάτω μέρη: Container: Είναι ο χώρος ο οποίος περικλείει όλο το περιεχόμενο της ιστοσελίδας. Logo: Είναι η περιοχή όπου εμφανίζεται το λογότυπο του site. Navigation: Είναι η περιοχή όπου εμφανίζεται η γραμμή ή οι γραμμές πλοήγησης του site. Content: Είναι η περιοχή όπου εμφανίζονται τα περιεχόμενα του site. Αυτό μπορεί να γίνει με το φόρτωμα της αρχικής του σελίδας και από τις επιλογές που κάνει ο χρήστης, μέσω των γραμμών πλοήγησης ή άλλων συνδέσμων που περιέχονται στην ιστοσελίδα. 21

22 Ανατομία ιστοσελίδων Footer: Είναι η περιοχή του υποσέλιδου της ιστοσελίδας και χρησιμοποιείται συνήθως για την παροχή πληροφοριών, στοιχείων επικοινωνίας, copyrights κ.λπ. Whitespace: Είναι το κενό διάστημα που υπάρχει μεταξύ των μερών της ιστοσελίδας. 22

23 Ανατομία ιστοσελίδων 23 Container Logo Navigation Content Footer Whitespace

24 Η Ανατομία μιας Ιστοσελίδας Αναλυτικότερα: Το κύριο σώμα μιας ιστοσελίδας είναι το κείμενο. Μέσα στο κείμενο διακρίνονται εύκολα οι λέξεις ή οι φράσεις που αποτελούν Σημεία Σύνδεσης (links) και τα οποία «σημειώνονται» με διαφορετικό χρώμα. Το κείμενο μπορεί να τοποθετηθεί πάνω σε λευκή ή χρωματιστή σελίδα (ενός χρώματος). Πολλές φορές το κείμενο τοποθετείται πάνω σε Γραφικό Υπόβαθρο, κάτι σαν διακοσμητικό χαλί. Το κείμενο διακοσμείται με διαχωριστικές γραμμές και άλλα διακοσμητικά γραφικά. Σε πολλά σημεία διακρίνονται ειδικά σύμβολα «κουμπάκια», τα οποία αποτελούν Σημεία Σύνδεσης. 24

25 Η Ανατομία μιας Ιστοσελίδας Πολλές φορές στις σελίδες (κυρίως στις εισαγωγικές) υπάρχουν τα μενού επιλογών. Τα μενού αυτά μπορεί να είναι μια σειρά από γραμμές κειμένου, τα οποία αποτελούν Σημεία σύνδεσης ή να είναι και γραφικά (κουμπάκια) ή διακοσμητικό κείμενο (το οποίο είναι επίσης γραφικό). Πολλές φορές η σελίδα χωρίζεται σε διάφορες περιοχές, οι οποίες λειτουργούν ως ανεξάρτητα τμήματα. Τότε λέγεται ότι η σελίδα χωρίζεται σε FRAMEs. Τα κινούμενα εικονίδια έχουν ως στόχο να προσελκύσουν την προσοχή. Πρόκειται για κινούμενες εικόνες αρχείων τύπου GIF. 25

26 Η Ανατομία μιας Ιστοσελίδας Πολλές φορές τα Σημεία Σύνδεσης είναι σημεία πάνω σε μία ενιαία εικόνα. Τότε λέγεται ότι υπάρχει ένας χάρτης συνδέσμων (map link). Σε εμπορικές σελίδες, ο χρήστης θα συναντήσει σίγουρα και τις διαφημιστικές λωρίδες (banners). Το βίντεο και η μουσική, εμφανίζονται πλέον πολύ συχνά στις ιστοσελίδες και γίνονται αμέσως αντιληπτά. Πολλές φορές ο χρήστης συναντά ειδικές εφαρμογές αλληλεπιδραστικότητας επάνω σε μια ιστοσελίδα ή εφαρμογές τρισδιάστατης αναπαράστασης. 26

27 Η Πλευρά του Πελάτη Φυλλομετρητές Η γλώσσα HTML (ή XHTML) Επεκτάσεις της γλώσσας HTML (ή XHTML) Προσθήκη Java Applets Προσθήκη Ελέγχων (ActiveX Controls) Πρόσθετα (Plug-ins) Γλώσσες Σεναρίων (script languages) από την πλευρά του Πελάτη 27

28 HTML (HyperText Markup Language) Ο όρος HTML προέρχεται από τα αρχικά των λέξεων HyperText Markup Language και είναι ένα προϊόν της SGML (Standard Generalized Markup Language). Η HTML είναι μια γλώσσα σήμανσης υπερκειμένου (markup) και όχι προγραμματισμού, που σημαίνει ότι γράφεται πρώτα το κείμενο και έπειτα προσθέτονται ειδικά σύμβολα γύρω από τις λέξεις ή από ολόκληρες προτάσεις ώστε να καθοριστεί η εμφάνισή τους στην οθόνη. 28

29 HTML (HyperText Markup Language) Τα ειδικά σύμβολα της HTML, τα οποία είναι συγκεκριμένα. ονομάζονται ετικέτες (tags). Ωστόσο ο αριθμός τους δε παραμένει σταθερός. Κατά διαστήματα το W3 Consortium το οποίο ανάπτυξε και διαχειρίζεται τα πρότυπα της HTML, δημοσιεύει νέα πρότυπα στα οποία προσθέτει καινούργιες ετικέτες που καλύπτουν ή διορθώνουν λειτουργίες προηγούμενων προτύπων. Η τελευταία αναθεώρηση του HTML προτύπου είναι η HTML5, η οποία προορίζεται για αντικατάσταση της HTML 4.01, της XHTML 1.0 και της DOM Level 2 HTML. Σκοπός είναι η μείωση της ανάγκης για ιδιόκτητα plug-ins και άλλες βοηθητικές διαδικτυακές εφαρμογές, όπως το Adobe Flash, το Microsoft Silverlight, το Apache Pivot, η JavaFX, κ.λπ. 29

30 HTML (HyperText Markup Language) Η ανάπτυξη της HTML5 έγινε με την συνεργασία της World Wide Web Consortium (W3C) και της Web Hypertext Application Technology Working Group (WHATWG). Η WHATWG εργαζόταν επάνω στις web φόρμες και τις web εφαρμογές, ενώ η W3C, η οποία δημιούργησε και διαχειρίζεται τα πρότυπα της HTML και της XHTML, ασχολήθηκε με την ανάπτυξη του νέου προτύπου XHTML

31 XML (extensible Markup Language) Η γλώσσα XML είναι μια επεκτάσιμη γλώσσα σήμανσης που σχεδιάστηκε και αναπτύχθηκε για να υποστηρίξει την ανταλλαγή δεδομένων μέσω του Παγκόσμιου Ιστού. Η XML ήρθε για να συμπληρώσει και όχι για να αντικαταστήσει την HTML. Η διαφορά τους είναι ότι η HTML δίνει έμφαση στη μορφοποίηση (παρουσίαση) των δεδομένων σε μια ιστοσελίδα, ενώ η XML δίνει έμφαση στο περιεχόμενο των δεδομένων της, αγνοώντας τη μορφοποίησή της. Με άλλα λόγια, οι ετικέτες της υποδεικνύουν το νόημα των δεδομένων και όχι τον τυχόν τρόπο εμφάνισής τους. 31

32 XML (extensible Markup Language) Η XML στην πραγματικότητα είναι μία μεταγλώσσα που παρέχει στους χρήστες τη δυνατότητα να δημιουργήσουν τις δικές τους ετικέτες και τις δομημένες μεταξύ τους σχέσεις. Συγκεκριμένα, με τη βοήθεια της XML, ο κάθε χρήστης μπορεί να δημιουργήσει μια νέα γλώσσα σήμανσης καθορίζοντας ένα νέο σύνολο από ετικέτες, ή να χρησιμοποιήσει ένα σύνολο από ετικέτες το οποίο είναι καθορισμένο από κάποιον άλλο. Αυτό έχει σαν αποτέλεσμα να υπάρχει απεριόριστος αριθμός γλωσσών σήμανσης που προέρχονται από την XML. 32

33 XHTML (EXtensible HyperText Markup Language) H XHTML αποτελεί απλά μια επέκταση της HTML, με τη διαφορά ότι ακολουθεί κάποιους επιπλέον αυστηρούς κανόνες δόμησης και έχει σχεδιαστεί έτσι ώστε να μπορεί να λειτουργεί με την extensible Markup Language (XML). Η XML σύντομα θα αποτελέσει τον πυρήνα για την σχεδίαση κάθε είδους εφαρμογής, βασισμένης στις τεχνολογίες του Διαδικτύου. Επίσης η XHTML έχει σχεδιαστεί έτσι ώστε να είναι σε θέση να συνεργαστεί με άλλες γλώσσες και άλλους τύπους εγγράφων, σε διάφορες γλώσσες, και όλα αυτά να συνδυάζονται μεταξύ τους. 33

34 XHTML (EXtensible HyperText Markup Language) Η 1 η έκδοση της γλώσσας (XHTML 1.0) έμοιαζε πολύ με την HTML 4.01, ενώ η τελευταία της έκδοση είναι η XHTML 2.0, η οποία όμως παρουσιάζει ασυμβατότητα με τις προγενέστερες εκδόσεις της. Το γεγονός αυτό οδήγησε τους web developers προς την HTML5 και τον οργανισμό W3C να σταματά την περαιτέρω εξέλιξή της. Πιο συγκεκριμένα, σε αντίθεση με την XHTML 2.0, η HTML5 καλύπτει μοντέλα επεξεργασίας APIs JavaScript, βίντεο, ήχου, widgets εφαρμογές κ.λπ. 34

35 Προσθήκη Java Applets Τα Java Applets είναι προγράμματα που είναι γραμμένα στην γλώσσα Java και περιλαμβάνονται σε μια ιστοσελίδα. Τα Java Applets παρέχουν web εφαρμογές με αλληλεπιδραστικά χαρακτηριστικά τα οποία δεν μπορεί να δώσει η (X)HTML. Καθώς ο Java bytecode είναι ανεξάρτητος πλατφόρμας, τα Java Applets μπορούν να εκτελεστούν από browsers που τρέχουν σε πολλές πλατφόρμες (π.χ. Windows, Mac OS και Linux). Οι browsers που υποστηρίζουν Java, διαθέτουν μια εικονική μηχανή Java (που μεταφράζει και εκτελεί τον κώδικα) μέσα από το λογισμικό τους. Έτσι, η εκτέλεση της εφαρμογής γίνεται από την πλευρά του πελάτη. 35

36 Προσθήκη Java Applets Επειδή τα Java Applets δεν είναι πάντοτε ακίνδυνα και κάποιος κακόβουλος δημιουργός θα μπορούσε να δημιουργήσει πρόβλημα στον υπολογιστή του χρήστη, οι περισσότεροι browsers «υποχρεώνουν» τα Java Applets που εκτελούν να υπόκεινται σε πολλούς περιορισμούς (π.χ. απαγόρευση πρόσβασης σε αρχεία του υπολογιστή του χρήστη). Σημείωση: Η ετικέτα <applet>,</applet>, που χρησιμοποιείται για την εισαγωγή ενός applet σε μια ιστοσελίδα, δεν υποστηρίζεται από την HTML5 και έχει ξεπεραστεί και από HTML Εκτέλεση ενός Java Applet στο παράθυρο του browser 36

37 Προσθήκη Ελέγχων (ActiveX Controls) Είναι μια τεχνολογία που αναπτύχθηκε από την Microsoft για να προσφέρει τη δυνατότητα εισαγωγής στοιχείων πολυμέσων στις ιστοσελίδες του Διαδικτύου. Ουσιαστικά τα ActiveX controls είναι τμήματα εκτελέσιμου κώδικα που είτε βρίσκονται εγκατεστημένα σε έναν υπολογιστή, είτε γίνονται διαθέσιμα μέσα από το Διαδίκτυο. Ο χρήστης χρειάζεται τη χρήση browser που υποστηρίζει τη λειτουργία τους. Προβολή ρυθμίσεων ActiveX στο παράθυρο του browser IE 37

38 Plugins Τα plug-ins (ή plugins) είναι μικρά προγράμματα τα οποία δεν μπορούν να τρέξουν μόνα τους, άλλα έχουν δημιουργηθεί για να προσθέτουν ιδιαίτερες δυνατότητες σε ένα άλλο μεγαλύτερο λογισμικό. Τα plug-ins χρησιμοποιούνται ιδιαίτερα από τους browsers για την προβολή βίντεο, την ανίχνευση ιών, προβολή διάφορων τύπων αρχείων (π.χ. pdf) και πολλά άλλα. Πολύ γνωστά παραδείγματα plug-in εφαρμογών είναι το Adobe Flash Player, το QuickTime και ο Windows Media Player. Τα plug-ins είναι εξειδικευμένες μορφές αυτών που αποκαλούνται add-ons (ή πρόσθετα) και τα οποία περιλαμβάνουν οπτικά θέματα ή επεκτάσεις. 38

39 Plugins Παράθυρο που εμφανίζει τα εγκατεστημένα plugins του browser Firefox 39

40 Γλώσσες Σεναρίων (script Ianguages) από την πλευρά του πελάτη (client side) Μια σημαντική τεχνολογία που ώθησε στην εκρηκτική ανάπτυξη εφαρμογών είναι η τεχνολογία των γλωσσών σεναρίων από την πλευρά του πελάτη, ενώ χρησιμοποιούνται εδώ και χρόνια αντίστοιχες γλώσσες σεναρίων από την πλευρά του εξυπηρετητή, όπως η Perl, η PHP, η Java κ.ά. Oι πιο αντιπροσωπευτικές και κυρίαρχες γλώσσες αυτής της τεχνολογίας είναι η Javascript, η VBScrit, η AJAX και η JQuery, οι οποίες δίνουν την ευκαιρία στους απλούς χρήστες να δημιουργήσουν εύκολα εφαρμογές στον υπολογιστή τους, με τη χρήση απλών εργαλείων δημιουργίας ιστοσελίδων. 40

41 Γλώσσες Σεναρίων (script Ianguages) από την πλευρά του πελάτη (client side) Η συγγραφή client side σεναρίων που εκτελούνται από τον browser, όπως ειπώθηκε, έχει το πλεονέκτημα της ευκολότερης συγγραφής σε σύγκριση με αυτά που εκτελούνται από τον server. Επίσης είναι η μόνη λύση όταν δεν επιτρέπεται το φόρτωμα προγραμμάτων σε κάποιον web server, μία σύνηθες τακτική των διαχειριστών μεγάλων συστημάτων για λόγους ασφαλείας. 41

42 Γλώσσες Σεναρίων (script Ianguages) από την πλευρά του πελάτη (client side) Βέβαια υπάρχει και ένα όχι ασήμαντο μειονέκτημα των client side εφαρμογών. Δε βοηθούν στην εκτέλεση των συνηθέστερων εργασιών του Παγκόσμιου Ιστού, όπως η επεξεργασία φορμών, η αναγνώριση χρηστών κ.λπ. Αυτό συμβαίνει γιατί αυτές οι εργασίες απαιτούν πρόσβαση στο server, κάτι που απαγορεύεται στις γλώσσες σεναρίων από την πλευρά του πελάτη, κυρίως για λόγους ασφαλείας. Τέλος, για τη χρήση των σεναρίων θα πρέπει ο χρήστης να διαθέτει και τον κατάλληλο browser που θα τα υποστηρίζει. 42

43 Η πλευρά του εξυπηρετητή (server side) Η πλευρά του εξυπηρετητή περιλαμβάνει: Λογισμικό εξυπηρετητή Παγκόσμιου Ιστού Τύπους εξυπηρετητών Παγκόσμιου Ιστού Συνήθεις διασυνδέσεις εισόδου CGI (Common Gateway Interface) Βάσεις Δεδομένων 43

44 Η πλευρά του εξυπηρετητή (server side) Client side και Server side λειτουργία 44

45 Λογισμικό εξυπηρετητή Παγκόσμιου Ιστού Παρά την ύπαρξη εκατομμυρίων χρηστών της υπηρεσίας του Παγκόσμιου Ιστού, πολλοί λίγοι από αυτούς γνωρίζουν την πραγματική λειτουργία ενός εξυπηρετητή της υπηρεσίας. Ο Εξυπηρετητής Παγκοσμίου Ιστού (Web Server) είναι ένα πρόγραμμα που λαμβάνει και επεξεργάζεται αιτήσεις χρηστών και στη συνέχεια τους προμηθεύει με ιστοσελίδες μέσα από το Διαδίκτυο. Φυσικά αποτελεί ένα πολύ ειδικό λογισμικό. Γενικά η εγκατάσταση ενός εξυπηρετητή Παγκόσμιου Ιστού δε θεωρείται αρκετά δύσκολη εργασία, κάτι που δεν μπορεί να ειπωθεί και για την διαχείρισή του. Βέβαια αρμόδιοι για τη διαχείριση είναι οι διαχειριστές παγκόσμιου Ιστού, οι γνωστοί στο κοινό και ως webmasters. 45

46 Λειτουργίες ενός τυπικού εξυπηρετητή Παγκόσμιου Ιστού Η λειτουργίες με τις οποίες είναι επιφορτισμένος ένας web server είναι: Παροχή ιστοσελίδων στους χρήστες που τις αναζητούν. Κάθε φορά που γίνεται αναζήτηση ιστοσελίδας από το χρήστη, μέσα από το σχήμα λειτουργίας πελάτηεξυπηρετητή, γίνεται από την πλευρά του εξυπηρετητή ο εντοπισμός και η αποστολή των κατάλληλων αρχείων προς τον πελάτη (το αρχείο της ιστοσελίδας και τα πιθανά συνοδευτικά αρχεία, όπως π.χ. τα αρχεία εικόνων). 46

47 Λειτουργίες ενός τυπικού εξυπηρετητή Παγκόσμιου Ιστού Αυθεντικοποίηση (authentication ) του Χρήστη. Μία από τις σπουδαιότερες εργασίες ενός εξυπηρετητή παγκόσμιου Ιστού είναι η αναγνώριση-ταυτοποίηση των χρηστών του. Ειδικά οι εμπορικοί εξυπηρετητές θα πρέπει να διαθέτουν ισχυρή πολιτική ταυτοποίησης, για να εξασφαλίζουν περιορισμό της πρόσβασης χρηστών που δεν έχουν τις απαιτούμενες άδειες. 47

48 Λειτουργίες ενός τυπικού εξυπηρετητή Παγκόσμιου Ιστού Εκτέλεση σεναρίων (scripts). Μία επίσης σημαντική δυνατότητα που προσφέρεται από τους εξυπηρετητές είναι η εκτέλεση σεναρίων στην πλευρά του εξυπηρετητή. Συνήθως τα σενάρια αυτά αποκαλούνται σενάρια CGI (Common Gateway Interface scripts), δηλαδή σενάρια Συνήθων Διασυνδέσεων Εισόδου, καθώς η ύπαρξη τους είναι απαραίτητη για τη δημιουργία και εκτέλεση της πλειοψηφίας των εφαρμογών στον Παγκόσμιο Ιστό. Λειτουργία ως τοπικοί αντιπρόσωποι-διαμεσολαβητές (proxies). Μια άλλη χρήσιμη επιπρόσθετη λειτουργία την οποία διαθέτουν αρκετοί εξυπηρετητές είναι η ικανότητα λειτουργίας τους ως αντιπροσώπων μεταφοράς πληροφοριών, όπως μιας βάσης δεδομένων ή κάποιου κοινού τόπου της Υπηρεσίας Μεταφοράς Αρχείων (Ftp site). 48

49 Τύποι εξυπηρετητών Παγκόσμιου Ιστού Καθώς ο παγκόσμιος Ιστός εξαπλώνεται ραγδαία στην κοινότητα του Διαδικτύου, δημιουργούνται διάφοροι τύποι λογισμικού εξυπηρετητή Παγκόσμιου Ιστού. Παρά την ύπαρξη μεγάλου αριθμού διαφορετικών τύπων λογισμικού, μπορείτε να δείτε δύο βασικούς τύπους: τον εξυπηρετητή CERN και τον εξυπηρετητή NCSA, οι οποίοι συναντώνται σε ελεύθερη διάθεση στο Διαδίκτυο. 49

50 Τύποι εξυπηρετητών Παγκόσμιου Ιστού Εξυπηρετητής CERN Ο εξυπηρετητής CERN (τα αρχικά σημαίνουν Conseil Europeen pour la Recherche Nucleaire που είναι το ίδρυμα στο οποίο δημιουργήθηκε ο παγκόσμιος Ιστός) είναι ο πρώτος εξυπηρετητής της υπηρεσίας. Υποστηρίζει τις περισσότερες λειτουργίες των εξυπηρετητών και συναντάται σε πολλές τοποθεσίες του Διαδικτύου. 50

51 Τύποι εξυπηρετητών Παγκόσμιου Ιστού Εξυπηρετητής NCSA Ο άλλος δημοφιλής εξυπηρετητής, ο NCSA, κατασκευάστηκε από την National Center of Supercomputing Applications, εκεί όπου δημιουργήθηκε ένας από τους πρώτους browsers με υποστήριξη γραφικών, ο Mosaic. Είναι ο πιο διαδεδομένος εξυπηρετητής καθώς είναι πιο γρήγορος από τον CERN και έτσι εξηγείται το γεγονός ότι και οι περισσότεροι νεότεροι εξυπηρετητές, όπως ο Apache και ο εξυπηρετητής της Microsoft είναι παράγωγα του NCSA. 51

52 Συνήθεις διασυνδέσεις εισόδου CGl (Common Gateway Interfaces) Όπως έχει ήδη αναφερθεί, μία από βασικές λειτουργίες ενός εξυπηρετητή παγκόσμιου Ιστού είναι η δυνατότητα εκτέλεσης σεναρίων CGI. Χρησιμοποιώντας τα σενάρια CGI, ο δημιουργός ιστοσελίδων έχει τα εργαλεία για την κατασκευή ισχυρών επαγγελματικών, αλληλεπιδραστικών εκδόσεων εφαρμογών για τον Παγκόσμιο Ιστό. Τα σενάρια CGI ουσιαστικά αποτελούν εξωτερικά προγράμματα που ενεργούν ως πύλες μεταξύ των εξυπηρετητών και των υπόλοιπων εφαρμογών στον τοπικό υπολογιστή, αποκαθιστώντας ένα αμφίδρομο δίαυλο επικοινωνίας ανάμεσα στο δημιουργό και στους χρήστες των εφαρμογών του. 52

53 Συνήθεις διασυνδέσεις εισόδου CGl (Common Gateway Interfaces) Αναπαράσταση λειτουργίας του CGI 53

54 Συνήθεις διασυνδέσεις εισόδου CGl (Common Gateway Interfaces) Οι χρήστες επωφελούνται από τις χρήσιμες εφαρμογές, χωρίς να προβληματίζονται για τις ενέργειες που συμβαίνουν αυτόματα και χωρίς να ανησυχούν για το πως γίνεται αυτό. Οι δημιουργοί ιστοσελίδων, θα πρέπει να γνωρίζουν τον τρόπο λειτουργίας του μηχανισμού CGI, ειδικά αν ενδιαφέρονται για την υλοποίηση ισχυρών Διαδικτυακών εφαρμογών. Έχοντας κατά νου το σχήμα πελάτη-εξυπηρετητή, τα κύρια βήματα λειτουργίας είναι τα εξής: Ο browser του χρήστη περνάει την είσοδό του στον εξυπηρετητή του Παγκόσμιου Ιστού. Ο εξυπηρετητής με τη σειρά του περνάει την είσοδο στο σενάριο CGI. 54

55 Συνήθεις διασυνδέσεις εισόδου CGl (Common Gateway Interfaces) Το σενάριο CGI επεξεργάζεται την είσοδο και την περνάει, αν είναι αναγκαίο, σε άλλη εφαρμογή και επιστρέφει την έξοδο στον εξυπηρετητή. Ο εξυπηρετητής επιστρέφει την έξοδο στο browser του χρήστη. Αυτή η έξοδος ενδέχεται να περιέχει από τα αποτελέσματα μιας αναζήτησης σε μία βάση δεδομένων έως και ένα εντελώς νέο έγγραφο. 55

56 Βάσεις Δεδομένων (Data Bases) Η καρδιά της κάθε ιστοσελίδας, ή μιας εφαρμογής του Παγκόσμιου Ιστού, σήμερα είναι η Βάση Δεδομένων. Με τις πολλές και διαφορετικές επιλογές που έχουν στη διάθεσή τους οι web developers και designers, μπορεί να είναι δύσκολο να αποφασίσει κάποιος ποια είναι η καταλληλότερη για κάποιο συγκεκριμένο έργο. Σε ορισμένες από τις επί του παρόντος διαθέσιμες τεχνολογίες βάσεων δεδομένων, περιλαμβάνονται μερικές συναρπαστικές νέες δυνατότητες και χρήσιμα εργαλεία που προσφέρουν βοήθεια στη διαχείριση και τη λειτουργικότητά τους. 56

57 Βάσεις Δεδομένων (Data Bases) SQL Λύσεις Βάσεων Δεδομένων Η SQL (Structured Query Language) είναι η γλώσσα που χρησιμοποιείται για πολλά δημοφιλή σχεσιακά συστήματα διαχείρισης βάσεων δεδομένων. Οι SQL δηλώσεις εκτελούν εργασίες, όπως η ενημέρωση ή η ανάκτηση των δεδομένων σε μια βάση δεδομένων. Ως βάση σε μια ποικιλία συστημάτων, όπως Oracle, MS SQL Server, Sybase, κ.λπ., η SQL συχνά εμπλουτίζεται με ιδιόκτητες επεκτάσεις/εφαρμογές, για να προχωρήσει πέρα από τις βασικές λειτουργίες της βάσης δεδομένων. Οι πέντε πιο δημοφιλείς λύσεις SQL-based βάσεων δεδομένων είναι η MySQL, η Microsoft Access, η DB2, η Oracle και η SQLite. 57

58 Βάσεις Δεδομένων (Data Bases) Μη SQL Λύσεις Βάσεων Δεδομένων Καθώς το κόστος των online αποθηκεύσεων μειώθηκε δραματικά, οι προγραμματιστές άρχισαν να χρησιμοποιούν περιβάλλοντα μη SQL βάσεων δεδομένων. Εκμεταλλευόμενοι την ικανότητα να χρησιμοποιούν το JSON (JavaScript Object Notation - format μορφοποίησης δεδομένων σαν την XML), οδηγήθηκαν σε μεγαλύτερη ευελιξία στη μοντελοποίηση δεδομένων και την αυξημένη επεκτασιμότητα και ταχύτητα, δεδομένου ότι οι εφαρμογές χρησιμοποιούν μια ενιαία κατανεμημένη βάση δεδομένων. Η δυνατότητα Auto-sharding μπορεί επίσης να υποστηρίξει διανεμημένα ερωτήματα και ολοκληρωμένη προσωρινή αποθήκευση των δεδομένων. Τέσσερα παραδείγματα των μη-sql βάσεων δεδομένων είναι η CouchDB, η MongoDB, η Cassandra και η OrientDB. 58

59 Βάσεις Δεδομένων (Data Bases) Cloud Λύσεις Βάσεων Δεδομένων Καθώς οι εφαρμογές του cloud computing (*) παρουσιάζουν αύξηση, δεν είναι έκπληξη το γεγονός ότι οι βάσεις δεδομένων που βασίζονται στο Cloud (σύννεφο) γίνονται όλο και πιο δημοφιλείς. Eξι παραδείγματα cloud computing βάσεων δεδομένων είναι οι Amazon SimpleDB, Amazon DynamoDB, Google Cloud SQL, SQL Azure Database, Database.com και ClearDB. (*) Το «cloud computing» είναι μία δομή με την οποία δίνεται η δυνατότητα στο χρήστη να έχει πρόσβαση και να χρησιμοποιεί web εφαρμογές, χωρίς να τις διαθέτει στον υπολογιστή του ή σε κάποια άλλη συσκευή που είναι διασυνδεδεμένη με το Διαδίκτυο. Σε αυτή τη δομή η εφαρμογή βρίσκεται σε ένα server και ο χρήστης τη χρησιμοποιεί, χωρίς να χρειάζεται να την εγκαταστήσει στον υπολογιστή του. 59

60 Βάσεις Δεδομένων (Data Bases) Άλλες Λύσεις Βάσεων Δεδομένων και εργαλεία Άλλες λύσεις βάσεων δεδομένων είναι οι HTML5 Web Storage, PouchDB, TaffyDB και NeDB, ενώ σχετικά εργαλεία είναι τα BigDump, SQLBuddy, HeidiSQL, ToadWorld και Navicat. 60

61 Βάσεις Δεδομένων (Data Bases) Πρότυπο ODBC Χρησιμοποιώντας σενάρια CGI για πρόσβαση σε μια βάση δεδομένων, ο κατασκευαστής εφαρμογών Παγκόσμιου Ιστού προσφέρει μια πρόσβαση σε δεδομένα μέσα από τη δημοφιλέστερη τεχνολογία. Εκτός από τις γλώσσες PHP και Perl, αυτή η τεχνολογία δίνει όλο και πιο νέα εύκολα εργαλεία, όπως τα Microsoft Active Server Pages (ASP), Java Server Pages (JSP) και Allaire Cold Fusion. Για παράδειγμα, οι σελίδες ASP επεξεργάζονται από το server, ανοίγοντας την πόρτα στη χρήση άλλων υπηρεσιών και βιβλιοθηκών, κυρίως σε περιβάλλοντα βάσεων δεδομένων που ικανοποιούν τα πρότυπα της Ανοιχτής Διασυνδεσιμότητας Βάσης Δεδομένων (Open DataBase Connectivity Standard). 61

62 Βάσεις Δεδομένων (Data Bases) Πρότυπο ODBC Το ODBC είναι στην ουσία ένα σύνολο συναρτήσεων και δομών δεδομένων, που δίνει τη δυνατότητα σε μια εφαρμογή να ανακτήσει δεδομένα, τα οποία βρίσκονται αποθηκευμένα σε βάσεις δεδομένων διαφόρων κατασκευαστών. Όλα αυτά γίνονται ανεξάρτητα από τα συγκεκριμένα χαρακτηριστικά τους, δηλαδή αν είναι σχεσιακές ή όχι κ.λπ. Χρησιμοποιώντας το ODBC, μπορείτε να συνδεθείτε σε οποιαδήποτε βάση δεδομένων παρέχει ένα πρόγραμμα οδήγησης ODBC. Τρόπος λειτουργίας ODBC 62

63 Βάσεις Δεδομένων (Data Bases) Πρότυπο JDBC Το JDBC (Java DataBase Connectivity), είναι ένα interface (API) για τη Java που ορίζει πώς ένας χρήστης μπορεί να έχει πρόσβαση σε μια οποιαδήποτε βάση δεδομένων (όπως MySql, Oracle κ.λπ.). Παρέχει συναρτήσεις για εξαγωγή, πρόσθεση, ανανέωση ή διαγραφή δεδομένων σε μια βάση. Τρόπος λειτουργίας JDBC 63

64 Πηγές Προγραμματιστικά Εργαλεία για το Διαδίκτυο: Σχολικό βιβλίο Εφαρμογές Λογισμικού: Σχολικό βιβλίο ΒΙΚΙΠΑΙΔΕΙΑ: Top-level domain ( ΒΙΚΙΠΑΙΔΕΙΑ: Γενικά top-level domains ( Wlearn ( Η Γλώσσα Σήμανσης XML: Επικ. Καθ. Δημήτριος Σάμψων HOTSCRIPTS ( Webapptester.com ( 64