τεχνολογίες διαδικτύου πανεπιστημιο πατρων

132
ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΑΤΡΩΝ ΠΟΛΥΤΕΧΝΙΚΗ ΣΧΟΛΗ ΤΜΗΜΑ ΜΗΧΑΝΙΚΩΝ Η/Υ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΗΣ Τεχνολογίες Διαδικτύου Τεχνολογίες Διαδικτύου Διδάσκων: Γαροφαλάκης Γιάννης, Επίκουρος Καθηγητής Συγγραφείς: Βώρος Άγγελος Γαροφαλάκης Γιάννης, Δεστούνης Παναγιώτης, Κάππος Παναγιώτης, Σακκόπουλος Ευάγγελος, Τζήμας Γιάννης Πάτρα, Σεπτέμβριος 2002 Πινακας Περιεχομενων 1 ΚΕΦΑΛΑΙΟ 1: TO ΠΑΡΕΛΘΟΝ, ΤΟ ΠΑΡΟΝ ΚΑΙ ΤΟ ΜΕΛΛΟΝ ΤΟΥ ΔΙΑΔΙΚΤΥΟΥ. .5 1.1 ΕΙΣΑΓΩΓΉ - ΙΣΤΟΡΙΚΉ ΑΝΑΔΡΟΜΉ....................................5 1.2 ΤΟ ΠΑΡΌΝ – Ο ΠΑΓΚΌΣΜΙΟΣ ΙΣΤΌΣ (WORLD WIDE WEB)...................9 1.3 ΤΟ ΜΈΛΛΟΝ ΤΟΥ ΔΙΑΔΙΚΤΎΟΥ......................................13 1.4 ΟΡΓΑΝΙΣΜΟΊ ΚΑΘΟΡΙΣΜΟΎ ΠΡΟΤΎΠΩΝ (STANDARD BODIES)..................13 1.4.1 Internet Society (ISOC).............................................................................................. 14 1.4.2 World Wide Web Consortium (W3C)........................................................................ 14 1.4.3 Άλλοι Οργανισμοί..................................................................................................... 15 1.4.4 Εμπορικές Εταιρίες................................................................................................... 15 2 ΚΕΦΑΛΑΙΟ 2: AΡΧΙΤΕΚΤΟΝΙΚΗ ΔΙΑΔΙΚΤΥΟΥ - ΠΡΩΤΟΚΟΛΛΑ..............16 2.1 ΑΡΧΙΤΕΚΤΟΝΙΚΈΣ ΔΙΚΤΎΩΝ........................................16 2.2 ΤΟ ΜΟΝΤΈΛΟ ΑΝΑΦΟΡΆΣ OSI......................................16 2.3 Η ΟΙΚΟΓΈΝΕΙΑ ΠΡΩΤΟΚΌΛΛΩΝ ΔΙΑΔΙΚΤΎΟΥ (INTERNET PROTOCOL SUITE) – TCP/IP 17 2.3.1 Το Πρωτόκολλο Ελέγχου Μετάδοσης (Transmission Control Protocol - TCP).......19 2.3.2 To Πρωτόκολλο Αυτοδύναμου Πακέτου Χρήστη (User Datagram Protocol – UDP) 19 2.3.3 Το Πρωτόκολλο Διαδικτύου (Internet Protocol – IP).............................................. 19 2.3.4 IP Διευθύνσεις (IP Addresses).................................................................................. 19 2.3.5 Subnet Mask.............................................................................................................. 21 2.3.6 Domain Name Service - DNS.................................................................................... 23 2.3.7 Δρομολόγηση σε IP περιβάλλοντα........................................................................... 23 2.4 SERIAL LINE INTERNET PROTOCOL (SLIP)...........................24 2.5 POINT-TO-POINT PROTOCOL (PPP).................................24 2.6 ΠΟΛΛΑΠΛΉ ΑΠΟΣΤΟΛΉ ΚΑΙ ΔΡΟΜΟΛΌΓΗΣΗ (MULTICAST TRANSMISSION AND ROUTING)25 2.7 UNIFORM RESOURCE LOCATORS - URLS...............................26 2.8 HYPERTEXT TRANSFER PROTOCOL (HTTP).............................26

Transcript of τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Page 1: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΑΤΡΩΝ

ΠΟΛΥΤΕΧΝΙΚΗ ΣΧΟΛΗ

ΤΜΗΜΑ ΜΗΧΑΝΙΚΩΝ Η/Υ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΗΣ

Τεχνολογίες ΔιαδικτύουΤεχνολογίες Διαδικτύου

Διδάσκων: Γαροφαλάκης Γιάννης, Επίκουρος Καθηγητής

Συγγραφείς: Βώρος Άγγελος Γαροφαλάκης Γιάννης,

Δεστούνης Παναγιώτης, Κάππος Παναγιώτης,

Σακκόπουλος Ευάγγελος, Τζήμας Γιάννης Πάτρα, Σεπτέμβριος 2002

Πινακας Περιεχομενων

1 ΚΕΦΑΛΑΙΟ 1: TO ΠΑΡΕΛΘΟΝ, ΤΟ ΠΑΡΟΝ ΚΑΙ ΤΟ ΜΕΛΛΟΝ ΤΟΥ ΔΙΑΔΙΚΤΥΟΥ.........5

1.1 ΕΙΣΑΓΩΓΉ - ΙΣΤΟΡΙΚΉ ΑΝΑΔΡΟΜΉ.........................................................................................51.2 ΤΟ ΠΑΡΌΝ – Ο ΠΑΓΚΌΣΜΙΟΣ ΙΣΤΌΣ (WORLD WIDE WEB).....................................................91.3 ΤΟ ΜΈΛΛΟΝ ΤΟΥ ΔΙΑΔΙΚΤΎΟΥ............................................................................................131.4 ΟΡΓΑΝΙΣΜΟΊ ΚΑΘΟΡΙΣΜΟΎ ΠΡΟΤΎΠΩΝ (STANDARD BODIES)............................................13

1.4.1 Internet Society (ISOC)....................................................................................................141.4.2 World Wide Web Consortium (W3C)...............................................................................141.4.3 Άλλοι Οργανισμοί.............................................................................................................151.4.4 Εμπορικές Εταιρίες...........................................................................................................15

2 ΚΕΦΑΛΑΙΟ 2: AΡΧΙΤΕΚΤΟΝΙΚΗ ΔΙΑΔΙΚΤΥΟΥ - ΠΡΩΤΟΚΟΛΛΑ..............................16

2.1 ΑΡΧΙΤΕΚΤΟΝΙΚΈΣ ΔΙΚΤΎΩΝ..................................................................................................162.2 ΤΟ ΜΟΝΤΈΛΟ ΑΝΑΦΟΡΆΣ OSI.............................................................................................162.3 Η ΟΙΚΟΓΈΝΕΙΑ ΠΡΩΤΟΚΌΛΛΩΝ ΔΙΑΔΙΚΤΎΟΥ (INTERNET PROTOCOL SUITE) – TCP/IP......17

2.3.1 Το Πρωτόκολλο Ελέγχου Μετάδοσης (Transmission Control Protocol - TCP)...............192.3.2 To Πρωτόκολλο Αυτοδύναμου Πακέτου Χρήστη (User Datagram Protocol – UDP)......192.3.3 Το Πρωτόκολλο Διαδικτύου (Internet Protocol – IP)......................................................192.3.4 IP Διευθύνσεις (IP Addresses).........................................................................................192.3.5 Subnet Mask.....................................................................................................................212.3.6 Domain Name Service - DNS...........................................................................................232.3.7 Δρομολόγηση σε IP περιβάλλοντα....................................................................................23

2.4 SERIAL LINE INTERNET PROTOCOL (SLIP)...........................................................................242.5 POINT-TO-POINT PROTOCOL (PPP).......................................................................................242.6 ΠΟΛΛΑΠΛΉ ΑΠΟΣΤΟΛΉ ΚΑΙ ΔΡΟΜΟΛΌΓΗΣΗ (MULTICAST TRANSMISSION AND ROUTING)

252.7 UNIFORM RESOURCE LOCATORS - URLS.............................................................................262.8 HYPERTEXT TRANSFER PROTOCOL (HTTP).........................................................................26

3 ΚΕΦΆΛΑΙΟ 3: ΠΡΩΤΌΚΟΛΛΑ ΚΑΙ ΠΡΌΤΥΠΑ ΒΑΣΙΚΏΝ ΥΠΗΡΕΣΙΏΝ ΤΟΥ ΔΙΑΔΙΚΤΎΟΥ.......................................................................................................................................28

3.1 ΔΙΑΧΕΊΡΙΣΗ............................................................................................................................283.1.1 Echo.................................................................................................................................283.1.2 Ping..................................................................................................................................283.1.3 Traceroute........................................................................................................................283.1.4 Whois, Whois++..............................................................................................................29

3.2 ΑΝΑΖΉΤΗΣΗ..........................................................................................................................293.3 ΜΕΤΑΦΟΡΆ ΑΡΧΕΊΩΝ............................................................................................................29

Page 2: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

3.3.1 File Transfer Protocol.....................................................................................................293.3.2 Trivial File Transfer Protocol.........................................................................................30

3.4 ΗΛΕΚΤΡΟΝΙΚΌ ΤΑΧΥΔΡΟΜΕΊΟ..............................................................................................303.4.1 Simple Mail Transfer Protocol (SMTP)...........................................................................313.4.2 Multipurpose Internet Mail Extensions (MIME).............................................................32

3.5 HYPERTEXT TRANSFER PROTOCOL (HTTP).........................................................................323.5.1 Μυνήματα.........................................................................................................................323.5.2 Εντολές.............................................................................................................................333.5.3 HTTP 1.1..........................................................................................................................333.5.4 Χρήσιμες Διευθύνσεις.......................................................................................................33

4 ΚΕΦΆΛΑΙΟ 4: INTERNET PROTOCOL VERSION 6 (IPV6).............................................34

4.1 ΔΙΕΥΘΎΝΣΕΙΣ........................................................................................................................344.2 ΑΛΦΑΡΙΘΜΗΤΙΚΉ ΑΝΑΠΑΡΆΣΤΑΣΗ ΤΩΝ ΔΙΕΥΘΎΝΣΕΩΝ.......................................................354.3 UNICAST ΔΙΕΥΘΎΝΣΕΙΣ.........................................................................................................364.4 MULTICAST ΔΙΕΥΘΎΝΣΕΙΣ....................................................................................................374.5 ANYCAST ΔΙΕΥΘΎΝΣΕΙΣ........................................................................................................374.6 ΕΠΙΚΕΦΑΛΊΔΑ IPV6...............................................................................................................384.7 ΕΠΙΚΕΦΑΛΊΔΕΣ ΕΠΈΚΤΑΣΗΣ..................................................................................................39

4.7.1 Πιστοποίηση Ταυτότητας (Authentication).......................................................................404.7.2 Encapsulated Security Payload (.....................................................................................404.7.3 Επιλογές Προορισμού (Destination Options)...................................................................40

4.8 ΔΙΑΛΕΙΤΟΥΡΓΙΚΌΤΗΤΑ ΤΟΥ IPV6 (INTEROPERABILITY)........................................................404.9 ΧΡΉΣΙΜΕΣ ΔΙΕΥΘΎΝΣΕΙΣ.......................................................................................................41

5 ΚΕΦΑΛΑΙΟ 5: Η ΓΛΏΣΣΑΣ ΠΕΡΙΓΡΑΦΗΣ ΣΕΛΙΔΩΝ HTML.........................................42

5.1 ΕΙΣΑΓΩΓΉ..............................................................................................................................425.2 ΠΡΟΔΙΑΓΡΑΦΈΣ ΤΗΣ HTML V3.2.........................................................................................425.3 Η ΔΟΜΉ ΤΩΝ HTML ΣΕΛΊΔΩΝ.............................................................................................42

5.3.1 Το στοιχείο HEAD............................................................................................................435.3.1.1 Το στοιχείο TITLE................................................................................................................435.3.1.2 Τα στοιχεία STYLE και SCRIPT.........................................................................................435.3.1.3 Το στοιχείο ISINDEX...........................................................................................................435.3.1.4 Το στοιχείο BASE.................................................................................................................445.3.1.5 Το στοιχείο META................................................................................................................445.3.1.6 Το στοιχείο LINK.................................................................................................................45

5.3.2 Το στοιχείο BODY............................................................................................................465.3.3 Block and Text level elements..........................................................................................475.3.4 Το στοιχείο ADDRESS.....................................................................................................485.3.5 Στοιχεία περιοχής.............................................................................................................48

5.3.5.1 Παράγραφοι..........................................................................................................................495.3.5.2 Λίστες....................................................................................................................................495.3.5.3 Στοιχεία DIR και MENU......................................................................................................515.3.5.4 Εξ’ αρχής μορφοποιημένο κείμενο.......................................................................................515.3.5.5 XMP, LISTING και PLAINTEXT......................................................................................515.3.5.6 DIV και CENTER.................................................................................................................515.3.5.7 BLOCKQUOTE....................................................................................................................515.3.5.8 FORM...................................................................................................................................515.3.5.9 Οριζόντιος Κανόνας..............................................................................................................525.3.5.10 Πίνακες..................................................................................................................................52

5.3.6 Στοιχεία ορισμού τύπων κειμένου.....................................................................................555.3.6.1 Στοιχεία τύπου γραμματοσειράς...........................................................................................555.3.6.2 Στοιχεία φορμών...................................................................................................................565.3.6.3 Το στοιχείο INPUT...............................................................................................................56

5.4 ΧΡΉΣΙΜΕΣ ΔΙΕΥΘΎΝΣΕΙΣ.......................................................................................................57

6 ΚΕΦΑΛΑΙΟ 6: Η ΓΛΏΣΣΑ JAVASCRIPT.............................................................................58

6.1 ΕΙΣΑΓΩΓΉ..............................................................................................................................586.2 ΔΙΑΘΈΣΙΜΕΣ ΕΚΔΌΣΕΙΣ.........................................................................................................586.3 ΕΝΣΩΜΆΤΩΣΗ ΤΗΣ JAVASCRIPT............................................................................................586.4 H ΓΡΑΜΜΑΤΙΚΉ ΤΗΣ JAVASCRIPT........................................................................................596.5 ΜΕΤΑΒΛΗΤΈΣ........................................................................................................................60

2

Page 3: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

6.6 ΤΕΛΕΣΤΈΣ..............................................................................................................................626.7 ΠΡΟΤΆΣΕΙΣ............................................................................................................................64

6.7.1 Λήψη αποφάσεων.............................................................................................................646.7.2 Βρόχοι..............................................................................................................................656.7.3 Εντολές Χειρισμού Αντικειμένων......................................................................................666.7.4 Σχόλια..............................................................................................................................67

6.8 ΣΥΝΑΡΤΉΣΕΙΣ........................................................................................................................676.8.1 Ορισμός συναρτήσεων......................................................................................................676.8.2 Κλήση Συναρτήσεων.........................................................................................................68

6.9 ΑΝΤΙΚΕΊΜΕΝΑ.......................................................................................................................686.9.1 Ιδιότητες...........................................................................................................................696.9.2 Μέθοδοι............................................................................................................................706.9.3 Δημιουργία Αντικειμένων.................................................................................................70

6.9.3.1 Δημιουργία άμεσου στιγμιότυπου αντικειμένου..................................................................706.9.3.2 Δημιουργία Προτύπου Αντικειμένου....................................................................................71

6.10 ΧΡΉΣΙΜΕΣ ΔΙΕΥΘΎΝΣΕΙΣ.......................................................................................................71

7 ΚΕΦΑΛΑΊΟ 7: DYNAMIC HTML...........................................................................................72

7.1 ΥΠΆΡΧΟΝΤΑ ΣΤΆΝΤΑΡ..........................................................................................................727.2 ΔΥΝΑΜΙΚΉ ΟΡΙΟΘΈΤΗΣΗ......................................................................................................737.3 ΠΑΡΆΜΕΤΡΟΙ ΤΟΥ STYLE....................................................................................................747.4 ΤΑ ΒΑΣΙΚΆ ΤΗΣ DHTML......................................................................................................767.5 ΔΥΝΑΜΙΚΆ STYLES...............................................................................................................807.6 ΕΣΩΤΕΡΙΚΆ ΚΑΘΟΡΙΖΌΜΕΝΑ STYLES....................................................................................807.7 ΑΛΛΑΓΉ ΤΩΝ STYLES...........................................................................................................817.8 ΓΕΓΟΝΌΤΑ.............................................................................................................................827.9 ΧΡΉΣΙΜΕΣ ΔΙΕΥΘΎΝΣΕΙΣ.......................................................................................................84

8 PHP – HYPERTEXT PRE PROCESSOR.................................................................................85

8.1 ΧΡΉΣΙΜΕΣ ΔΙΕΥΘΎΝΣΕΙΣ.......................................................................................................85

9 Η ΓΛΏΣΣΑ XML (EXTENSIBLE MARKUP LANGUAGE)...............................................87

9.1 ΤΟ ΣΥΝΤΑΚΤΙΚΌ ΤΗΣ ΓΛΏΣΣΑΣ XML...................................................................................889.2 XML DTD (DOCUMENT TYPE DEFINITION).........................................................................889.3 Η ΓΛΏΣΣΑ XSL (EXTENSIBLE STYLESHEET LANGUAGE).....................................................899.4 DOM (DOCUMENT OBJECT MODEL)....................................................................................919.5 SAX (SIMPLE API FOR XML)..............................................................................................919.6 XLINK (XML LINKING)........................................................................................................919.7 XPOINTER..............................................................................................................................929.8 ΧΡΉΣΙΜΕΣ ΔΙΕΥΘΎΝΣΕΙΣ.......................................................................................................92

9.8.1 Technical Reading...........................................................................................................929.8.2 Turorials..........................................................................................................................929.8.3 XML FAQs.......................................................................................................................929.8.4 XML tools.........................................................................................................................92

10 ΥΠΗΡΕΣΊΕΣ ΔΙΑΔΙΚΤΎΟΥ (WEB SERVICES)..................................................................93

10.1 ΓΕΝΙΚΉ ΠΕΡΙΓΡΑΦΉ...............................................................................................................9310.2 SIMPLE OBJECT ACCESS PROTOCOL (SOAP).......................................................................94

10.2.1 Μορφή SOAP μηνύματος.............................................................................................9510.3 WEB SERVICES DESCRIPTION LANGUAGE (WSDL).............................................................9610.4 Universal Desrciption, Discovery, and Integration (UDDI).................................................96

3

Page 4: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

1 ΚΕΦΑΛΑΙΟ 1: TO ΠΑΡΕΛΘΟΝ, ΤΟ ΠΑΡΟΝ ΚΑΙ ΤΟ ΜΕΛΛΟΝ ΤΟΥ ΔΙΑΔΙΚΤΥΟΥ

1.1 Εισαγωγή - Ιστορική Αναδρομή

Όσο και αν φαίνεται απίστευτο, αν κάποιος θα ήθελε να προσδιορίσει το λόγο για τον οποίο δημιουργήθηκε το Διαδίκτυο (Internet), θα κατέληγε στο συμπέρασμα ότι αυτό έγινε λόγω της εκτόξευσης του δορυφόρου Sputnik από την Σοβιετική Ένωση το 1957. Αυτό το σημαντικό γεγονός στην εξερεύνηση του διαστήματος οδήγησε τον τότε πρόεδρο των Η.Π.Α. Dwight David Eisenhower να διορίσει σαν σύμβουλό του σε θέματα επιστημών τον πρόεδρο του MIT James A. Killian, γεγονός το οποίο ώθησε την δημιουργία ενός νέου τμήματος στο Υπουργείο Αμύνης, το οποίο ονομάστηκε Advanced Research Projects Agency (ARPA).

Το ARPA ήταν η Αμερικανική απάντηση στην παράνοια για στρατιωτική ανωτερότητα κατά τη διάρκεια του ψυχρού πολέμου, η οποία πυροδοτήθηκε από την επιτυχία του Sputnik. Το συγκεκριμένο τμήμα σχεδιάστηκε για τη διεξαγωγή μακροχρόνιας έρευνας και ανάπτυξης σε νέες επιστημονικές περιοχές, μία από τις οποίες ήταν και η νεότευκτη τότε επιστήμη των υπολογιστών. Οι ειδικοί του ARPA πίστευαν ότι είχαν επενδυθεί πάρα πολλοί πόροι σε δημόσια και ιδιωτική έρευνα που αποσκοπούσε σε βραχυχρόνια ανάπτυξη και πρόοδο στην τεχνολογία του υλικού και λογισμικού των υπολογιστών, ενώ θα έπρεπε η έρευνα να κατευθυνθεί στην επικοινωνία, συλλογή και επεξεργασία δεδομένων μεταξύ διαφορετικών υπολογιστικών συστημάτων.

Για να επεκτείνει τη χρήση των υπολογιστών το ARPA ίδρυσε ένα νέο γραφείο το Information Processing Techniques Office (IPTO), με πρώτο διευθυντή τον ψυχολόγο Joseph Carl Robnett Licklider. Αυτή η επιλογή αποδείχτηκε ιδιαίτερα επιτυχής καθώς μία από τις κύριες ενασχολήσεις του Licklider ήταν η αλληλεπίδραση ανθρώπου-μηχανής (human-computer interaction), ένα θεματικό πεδίο ιδιαίτερης σημασίας για τη δημιουργία στρατιωτικών συστημάτων ελέγχου.

Την ίδια εποχή ο Licklider τόνισε το γεγονός ότι πολλά από τα ερευνητικά επιτεύγματα του ARPA θα μπορούσαν να φανούν χρήσιμα και σε άλλους τομείς εκτός από το Υπουργείο Αμύνης. Η κύρια αποστολή του Licklider δεν ήταν να σχεδιάσει στρατιωτικά εργαλεία, αλλά να επεκτείνει το προσωπικό του όραμα για την “συμβίωση ανθρώπου-υπολογιστή”.

Ένα από τα πολλά έργα που εγκαινίασε το IPTO ήταν η περαιτέρω ανάπτυξη υπολογιστικών συστημάτων διαμοιρασμού χρόνου (time-sharing). Βασισμένο στις πρωτοποριακές προσπάθειες επιστημόνων από το ΜΙΤ το 1961, το IPTO προσπάθησε να αξιοποιήσει την αυξανόμενη δύναμη των λίγων υπαρχόντων υπολογιστών που υπήρχαν διαθέσιμοι στην ερευνητική κοινότητα, δίνοντας τη δυνατότητα σε διαφορετικούς ανθρώπους να χρησιμοποιήσουν τον ίδιο υπολογιστή ταυτόχρονα. Τον Ιούλιο του 1963 υπογράφτηκε ένα συμβόλαιο μεταξύ του MIT και του IPTO για τη δημιουργία του συστήματος που ονομάστηκε CTSS (Compatible Time-Sharing System). Αυτή ήταν η αρχή για την πραγματοποίηση του οράματος του Licklider και άλλων συναδέλφων του για την ανάπτυξη αλληλεπιδραστικών υπολογιστικών συστημάτων που θα ωφελούσαν και την ερευνητική αλλά και την ακαδημαϊκή κοινότητα.

4

Page 5: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Ουσιαστικά, η ανάπτυξη του time-sharing και της φιλοσοφίας γύρω από αυτό ήταν ένας από τους παράγοντες ο οποίος πυροδότησε τη δημιουργία του διαδικτύου. Παρ’ όλα αυτά η έλλειψη καινοτομιών στον τομέα της τεχνολογίας δικτύων έκανε πολλούς από τους δημιουργούς του CTSS να το θεωρήσουν αποτυχία, κυρίως γιατί το σύστημα απέτυχε να πραγματοποιήσει διεργασίες time-sharing οι οποίες αλληλεπιδρούσαν με απομακρυσμένα τερματικά (long-distance time-sharing tasks) (δεν ήταν δυνατό για τους χρήστες να εκτελέσουν υπολογιστικές διεργασίες σε περισσότερα από ένα απομακρυσμένα συστήματα κάθε φορά, και η κακή ποιότητα των τηλεφωνικών συνδέσεων προκαλούσε συχνά λάθη κατά τη μεταφορά). Τον Ιούλιο ο Licklider αποχώρησε από το IPTO αλλά οι διάδοχοί του συνέχισαν να βελτιώνουν τις τεχνολογίες δικτύων και το time-sharing.

Το 1966 ένα νέο δικτυακό έργο ξεκίνησε και τον επόμενο χρόνο ο τότε υπεύθυνος, Laurence Roberts, παρουσίασε μία πρόταση που αφορούσε τη σύνδεση όλων των υπολογιστών της ερευνητικής κοινότητας μέσω τηλεφωνικών γραμμών. Την ίδια εποχή η ομάδα εργασίας του έργου βρήκε κάποιες αναφορές οι οποίες δημοσιεύτηκαν το 1962 από τον Paul Baran της Rand Corporation, καθώς και κάποια πειράματα σχετικά με δίκτυα που έγιναν στην Αγγλία από τον Donald Watts Davies στο National Physical Laboratory. Αυτά αφορούσαν τις δυνατότητες χρησιμοποίησης αυτού που αποκαλούσε ο Davies μεταγωγή πακέτων (packet-switching) στη διασφάλιση της αξιοπιστίας των στρατιωτικών συστημάτων ελέγχου. Η αρχή της μεταγωγής πακέτων βασιζόταν σε ένα δίκτυο υπολογιστών στο οποίο όλοι οι υπολογιστές ήταν ισότιμοι και είχαν ίδιες δυνατότητες μετάδοσης δεδομένων. Αν κάποιος χρήστης ήθελε να στείλει ένα σύνολο δεδομένων από έναν υπολογιστή σε έναν άλλο, ανεξαρτήτως της απόστασής τους, ο υπολογιστής που έκανε τη μετάδοση θα έσπαγε τα δεδομένα σε μικρά πακέτα μερικών byte.

Αυτά τα πακέτα ήταν μοναδικά με την έννοια ότι όλα περιείχαν πληροφορία σχετικά με το σημείο εκκίνησής τους, τον προορισμό τους, καθώς και πληροφορία η οποία επέτρεπε στον υπολογιστή που τα λάμβανε να επανασυνθέσει το σύνολο των δεδομένων, αφού είχε τελειώσει η μετάδοση των πακέτων. Όταν το IPTO αντιλήφθηκε τις δυνατότητες αυτής της ανακάλυψης, κάλεσε μερικούς από τους συνεργάτες του που ασχολούνταν με δίκτυα (RAND, University of California Santa Barbara (UCSB), Stanford Research Institute (SRI), University of Utah και University of California in Los Angeles (UCLA)) και έως το καλοκαίρι του 1968 ένα σύνολο από προδιαγραφές για δίκτυα μεταγωγής πακέτων είχε δημιουργηθεί.

Αργότερα τον ίδιο χρόνο προκηρύχθηκε το έργο της δημιουργίας ενός τέτοιου δικτύου και τον Ιανουάριο του 1969 ανατέθηκε στην Bolt Beranek and Newman (BBN), μία εταιρία η οποία ασχολούνταν με μελέτες ακουστικής, ψυχοακουστικής και πληροφοριακών συστημάτων.

Την ίδια περίοδο διεξάγονταν έρευνα για τη δημιουργία πρωτοκόλλων τα οποία θα έδιναν τη δυνατότητα επικοινωνίας μεταξύ υπολογιστών με διαφορετικό υλικό και λειτουργικά συστήματα. Τέτοιου είδους πρωτόκολλα ήταν απαραίτητα για την επιτυχία ενός τέτοιου έργου, γιατί θα αποτελούσαν μια κοινή γλώσσα ανάμεσα σε συνδεδεμένους υπολογιστές.

Την πρώτη Σεπτεμβρίου του 1969 η BNN παρέδωσε τον πρώτο κόμβο μεταγωγής πακέτων που ονομάστηκε IMP (Interface Message Processor) στο UCLA, και λίγο αργότερα αντίστοιχα IMPs παραδόθηκαν στο UCSB, στο SRI και στο University of Utah.

5

Page 6: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

H ΑRPA πέτυχε το 1969 τη δημιουργία του πρώτου δικτύου υπολογιστών με απομακρυσμένους κόμβους το οποίο ονομάστηκε ARPANET.

Οι περισσότεροι από τους ανθρώπους που δούλευαν για την ανάπτυξη του υλικού και λογισμικού του ARPANET, ήταν μεταπτυχιακοί και αυτό δημιούργησε ένα πνεύμα συνεργασίας με στόχο καινούργιες ανακαλύψεις αλλά παράλληλα και σύγχυση. Όλοι φαντάζονταν τις δυνατότητες που είχαν, αλληλεπιδραστικά γραφικά, αυτόματα queries, ηλεκτρονικό ταχυδρομείο, αλλά κανένας δεν ήξερε από που να ξεκινήσει. Τα IMPs τοποθετήθηκαν σε διαφορετικά εργαστήρια της ARPA με την ελπίδα ότι σε κάποιο από αυτά θα μπορούσαν να βρουν τρόπους για την εκμετάλλευση του νέου μέσου.

Η πιο σημαντική εργασία των συμμετεχόντων σε αυτό το δίκτυο ήταν να εξασφαλίσουν την σταθερότητα των πρωτοκόλλων επικοινωνίας, η οποία ανατέθηκε στο επονομαζόμενο Network Working Group, το οποίο συγκλήθηκε μερικούς μήνες πριν τη δημιουργία του πρώτου IMP. Μέσα στα επόμενα χρόνια αυτή η ομάδα κατάφερε να σχεδιάσει μία ιεραρχία πρωτοκόλλων η βασική φιλοσοφία της οποίας εφαρμόζεται και σήμερα στο Internet.

H ιδέα βασιζόταν στην ύπαρξη ενός πρωτοκόλλου στο κάτω επίπεδο που αρχικά ονομάστηκε NCP (Network Control Protocol), το οποίο θα φροντίζει για τη δημιουργία και συντήρηση της επικοινωνίας ανάμεσα στους υπολογιστές σε ένα δίκτυο, και ενός συνόλου πρωτοκόλλων το οποίο αναλαμβάνει διάφορες εργασίες όπως Telnet και FTP και βρίσκεται πάνω από το βασικό πρωτόκολλο επικοινωνίας. Αυτό το σχήμα δοκιμάστηκε επιτυχώς στον πρώτο χρόνο δημιουργίας του ARPANET και τον Οκτώβριο του 1971 έγινε ένα μεγάλου εύρους πείραμα στο MIT με την συμμετοχή 15 ιδρυμάτων το οποίο και στέφθηκε με απόλυτη επιτυχία (μόνο ένα από τα 15 ιδρύματα που συμμετείχαν δεν κατάφερε να συνδεθεί).

Κατά τη δεκαετία του 1970 το ARPANET συνεχώς αναπτυσσόταν σε μέγεθος και σταθερότητα και έγινε ένας αριθμός από σημαντικές ανακαλύψεις. Ανάμεσα στις πιο σημαντικές ήταν το ηλεκτρονικό ταχυδρομείο το οποίο αναπτύχθηκε από τον Ray Tomlinson του ΒΝΝ το 1972, η επίτευξη υπερατλαντικής σύνδεσης το 1973 (σύνδεση με το University College of London στην Αγγλία και το Royal Radar Establishment στη Νορβηγία). Επιπρόσθετα, συνεχώς γινόταν έρευνα για τη βελτίωση των βασικών πρωτοκόλλων επικοινωνίας και την ανάπτυξή τους σε σχέση με το ρυθμό ανάπτυξης του ARPANET, η οποία οδήγησε στη δημιουργία ενός νέου συνόλου πρωτοκόλλων επικοινωνίας, του TCP/IP (Transmission Control Protocol/Internet Protocol) το 1982. Την ίδια περίοδο η ομάδα του ARPANET πειραματιζόταν με συνδέσεις διαφόρων τύπων δικτύων μεταγωγής πακέτων, συμπεριλαμβανομένου των δορυφορικών, ραδιοφωνικών και καλωδιακών.

Γύρω στο 1980 έγιναν αρκετά σημαντικά γεγονότα.. Τα πιο σημαντικά ήταν η χρήση των δικτύων μεταγωγής πακέτων για στρατιωτικούς σκοπούς το 1978 και η δημιουργία του Usenet το 1979.

Η στρατιωτική χρήση του ARPANET δεν είχε άμεση επίδραση στη χρήση του δικτύου από τους πολίτες, αλλά τονίζει το γεγονός ότι το σημερινό Internet αρχικά επινοήθηκε σαν ένα εργαλείο στρατιωτικών επικοινωνιών. Η στρατιωτική χρήση του ARPANET σταμάτησε το 1983 όταν όλα τα στρατιωτικά sites ενσωματώθηκαν στο Defence Data Network το οποίο δημιουργήθηκε το 1982.

Το Usenet, που αναπτύχθηκε από τους Tom Truscott και Jim Ellis φοιτητές του Duke University και του University of North Carolina, ανακηρύχθηκε ο υπέρτατος

6

Page 7: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

εκφραστής της φυσικής αναρχίας του ARPANET (δεν υπήρχε κεντρικός έλεγχος, όλοι οι υπολογιστές ήταν ισότιμοι ως προς την αποστολή και λήψη πακέτων). Χρησιμοποιώντας το δημοφιλές λειτουργικό σύστημα UNIX (που αναπτύχθηκε στα AT&T’s Bell Laboratories το 1969) και το πρωτόκολλο επικοινωνίας του, UUCP (Unix-to-Unix-Copy Protocol), αυτοί οι φοιτητές δημιούργησαν μια ιεραρχία ομάδων συζητήσεων η οποία εξαπλωνόταν σε όλο και περισσότερα ακαδημαϊκά ιδρύματα. Αυτή η ιεραρχία έφτασε σύντομα στο σημείο να φιλοξενεί ένα πλατύ πεδίο ενδιαφερόντων, από προγραμματισμό υπολογιστών έως και συντήρηση αυτοκινήτων, και έδινε τη δυνατότητα στους συμμετέχοντες να διαβάζουν και να στέλνουν μηνύματα σε Usenet Groups.

Στην αρχή το Usenet χρησιμοποιήθηκε από μερικούς φοιτητές, αλλά στη συνέχεια συνδέθηκε με τις ταχυδρομικές λίστες του ARPANET και οι συζητήσεις μεταφέρονταν μέσω ηλεκτρονικού ταχυδρομείου. Την ίδια εποχή το Usenet και το UUCP έγιναν η δικτυακή υπηρεσία και το πρωτόκολλο επικοινωνίας αντίστοιχα, πάνω στα οποία βασίστηκε η διεθνής ανάπτυξη των δικτυακών επικοινωνιών. Από το 1982 έως το 1984 αρκετές Ευρωπαϊκές χώρες και η Αυστραλία συνδέθηκαν με το Usenet ενώ το 1987 καθιερώθηκε το NNTP (Network News Tranfer Protocol) με σκοπό να κάνει εφικτή την χρήση του Usenet σε TCP/IP δίκτυα.

Στα τέλη της δεκαετίας του 1970 έγιναν δύο ακόμα σημαντικά γεγονότα τα οποία οδήγησαν στο σταδιακό άνοιγμα του ARPANET. Τον Μάιο του 1979 αντιπρόσωποι από το ARPA, από το National Science Foundation και επιστήμονες υπολογιστών, συναντήθηκαν και συζήτησαν την πιθανή δημιουργία ενός δικτύου αφιερωμένου στην έρευνα με αποτέλεσμα το 1982-83 να γίνει το CSNET. Από την αρχή προτάθηκε ότι αυτό το νέο δίκτυο θα έπρεπε να συνδέεται με το ARPANET με ένα τρόπο διάφανο προς τους χρήστες και έτσι αποφασίστηκε να χρησιμοποιηθούν πρωτόκολλα TCP/IP.

Την ίδια εποχή, κάποια άλλα πανεπιστήμια των HΠΑ δημιούργησαν το BITNET, με σκοπό τη σύνδεση μεταξύ τους (oι κεντρικοί υπολογιστές που συνδέονταν ήταν IBM Mainframes). Το BITNET αποδείχτηκε ότι είχε ιδιαίτερη επίδραση στις ερευνητικές κοινότητες, ιδιαίτερα αφού οι ηλεκτρονικές του συζητήσεις που βασίζονταν στο ηλεκτρονικό ταχυδρομείο διοχετεύτηκαν σε άλλα TCP/IP δίκτυα.

H δημιουργία του CSNET και του BITNET έδειξαν ότι τα πανεπιστήμια άρχισαν να αντιλαμβάνονται ότι η επιστήμη των δικτύων είναι ένα σημαντικό εργαλείο για την ερευνητική κοινότητα, και αυτό οδήγησε τον NSF (National Science Foundation) στη δημιουργία το 1986 ενός νέου παγκόσμιας κλίμακας δικτύου (NSFNET) βασισμένου σε TCP/IP πρωτόκολλα, καθώς και στη δημιουργία 5 κέντρων (super-computing centres), των οποίων οι υπηρεσίες παρέχονταν ελεύθερα στην ερευνητική κοινότητα. H τοπολογία του NSFNET διασφάλιζε την χρησιμοποίηση των υπηρεσιών του και από μικρά ερευνητικά ιδρύματα, καθώς υπήρχε υψηλής ταχύτητας σύνδεση μεταξύ 5 κόμβων του δικτύου κορμού (backbone) και καθένας από αυτούς εξυπηρετούσε τα ιδρύματα και πανεπιστήμια της περιοχής του, δημιουργώντας έτσι ένα τελείως αποκεντρωμένο δίκτυο.

Το NSF έδινε ελεύθερη πρόσβαση στο δίκτυο κορμού μόνο αν το πανεπιστήμιο τηρούσε την αρχή να επεκτείνει αυτή τη σύνδεση σε άλλα και συχνά μικρότερα εκπαιδευτικά ιδρύματα της περιοχής του. Όμως το NSFNET ήταν ανοιχτό για σύνδεση και σε οποιονδήποτε οργανισμό και αυτή η ανοιχτή χρήση οδήγησε και στην εμπορευματοποίηση του, μία εξέλιξη που κατέληξε στη δημιουργία των πρώτων εμπορικών οργανισμών παροχής ηλεκτρονικού ταχυδρομείου (MCI Mail και

7

Page 8: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Compuserve) το 1989, και ένα χρόνο αργότερα στην δημιουργία του πρώτου εμπορικού παροχέα dial-up πρόσβασης στο διαδίκτυο (The World, world.ste.com).

Έτος Γεγονός

1957 USSR launches Sputnik

1968 First Packet Switching Network

1969 ARPANET Starts

1972 First Public Demo of ARPANET

Internet Mail Invented

1979 UseNet Starts

1983 ARPANET Changes Over to TCP/IP

ARPANET Splits into ARPANET & MILNET

1984 Internet Exceeds 1.000 Hosts

Domain Name Server Introduced

1987 Internet Exceeds 10.000 Hosts

1988 Worm Attacks 6.000 of Internet’s 60.000 Hosts

1989 Internet Exceeds 100,000 Hosts

1990 ARPANET Dismantled Archie Starts

1986 NSFNET Created

1991 WAIS Started

Gopher Started

NSF Lifts Commercial Ban

1992 Internet Exceeds 1 million Hosts

Web Invented by Tim Berners-Lee

Veronica Introduced

1993 MOSAIC Developed by Marc Andreesen

InterNIC Founded by NSF

Πίνακας 1.1: Τα σημαντικότερα γεγονότα στην ιστορία του Διαδικτύου

1.2 Το παρόν – Ο Παγκόσμιος Ιστός (World Wide Web)

Η περίοδος από το 1989 έως σήμερα οδήγησε στην υπερκάλυψη του αρχικού ARPANET από ένα μεγάλο αριθμό υποδικτύων παγκοσμίως (το 1990 ο αριθμός των δικτύων ήταν 2063 και το 1996 93671). Το 1989 το ARPANET απενεργοποιήθηκε και τον Απρίλιο του 1995 το NSFNET έγινε καθαρά ερευνητικό δίκτυο, αφήνοντας έναν αριθμό από εμπορικές εταιρίες να παράσχουν σύνδεση στο Internet. Την ίδια περίοδο ο αριθμός των hosts καθώς και η κυκλοφορία του δικτύου αυξήθηκε με τρομακτικό ρυθμό: το 1990 3 εκατομμύρια hosts και τον Ιούνιο του 1998 ο αριθμός έφτασε στους 36.739.000.

8

Page 9: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Αυτή η έκρηξη στη χρησιμοποίηση του δικτύου, εκτός από το γεγονός ότι ο προσωπικός υπολογιστής έγινε ένα στοιχείο της καθημερινής μας ζωής, μπορεί να αποδοθεί στα αποτελέσματα μίας ερευνητικής πρότασης που υποβλήθηκε για χρηματοδότηση στο European Laboratory for Particle Physics της Ελβετία από το CERN (Conseil Europeen pour la Recherche Nucleaire). Ο τίτλος της πρότασης ήταν “World Wide Web: Proposal for a HyperText Project” και οι συγγραφείς ήταν οι Tim Berners-Lee και Robert Cailliau.

H αρχική ιδέα για τον World Wide Web (WWW ή Web) ήταν ότι η δημιουργία ενός πολύ πιο φιλικού περιβάλλον διεπαφής (user interface) με ευκολίες πλοήγησης σε αντίθεση με τα περιβάλλοντα διεπαφής που ήταν μέχρι τότε βασισμένα σε UNIX και η αλληλεπίδραση γινόταν μέσω κειμένου. Το πρωτόκολλο επικοινωνίας που επινοήθηκε για τον WWW ονομάστηκε HTTP (HyperText Transfer Protocol) (το υπερκείμενο (hypertext) ήταν μία ιδέα του Theodor Holm Nielsen το 1965). Το υπερκείμενο είναι ουσιαστικά ένα εργαλείο πλοήγησης το οποίο συνδέει αντικείμενα (κείμενο ή γραφικά), δημιουργώντας έτσι έναν ιστό σελίδων, από όπου και πάρθηκε το όνομα World Wide Web. Οι Berners-Lee και Robert Cailliau περιγράφουν τη διαδικασία ως εξής: “A hypertext page has pieces of text which refer to other texts. Such references are highlighted and can be selected with a mouse…When you select a reference, the browser presents you with the text which is referenced: you have made the browser follow a hypertext link.”

Το πρωτότυπο του WWW αναπτύχθηκε σε λειτουργικό σύστημα NeXT και παρουσιάστηκε για πρώτη φορά τον Δεκέμβριο του 1990. Τον Μάιο του 1991 δόθηκε ελεύθερα παρέχοντας πρόσβαση μέσω HTTP σε έναν αριθμό υπολογιστών της CERN. Μόλις το λογισμικό του φυλομετρητή (browser) έγινε διαθέσιμο σε πιο κοινά λειτουργικά συστήματα όπως Microsoft Windows και Apple Macintosh, αυτό το νέο εργαλείο άρχισε να χρησιμοποιείται ευρέως από την κοινότητα του Internet και έως το 1993 ο ετήσιος ρυθμός αύξησης ήταν 341,634%.

Ο WWW, η αυξανόμενη φιλικότητα των εφαρμογών που αναπτύχθηκαν για το Internet καθώς και η πρόσβαση των ιδιωτών στο Internet, συνέβαλαν στην εντυπωσιακή του άνοδο και χρήση στη δεκαετία του 1990. Η κατάσταση που επικρατεί σήμερα στην Ελλάδα αλλά και διεθνώς φαίνεται στους παρακάτω πίνακες.

Μεταβολή

30/6/97 1/10/97 31/12/97 31/3/98 30/6/98 τελευταία μέση ετήσια

Δηλωμένα domains

1.436 1.998 2.626 3.354 4.505 34,3% 29,4% 213,7%

Νέες δηλώσεις 379 599 683 902 1.217 34,9% 36,2% 221,1%

Καταργήθηκαν 55 37 55 64 66 3,1% 21,9% 20,0%

Ανταποκρίθηκαν 1.263 1.773 2.236 2.754 3.641 32,2% 27,4% 188,3%

Μοναδικές IP διευθύνσεις

23.614 27.594 30.411 33.358 41.662 24,9% 16,1% 76,4%

Εγγραφές τύπου Α

25.852 30.399 34.017 37.038 47.525 28,3% 16,4% 83,8%

Εγγραφές τύπου CNAME

4.259 5.275 5.966 7.036 10.266 45,9% 19,7% 141,0%

Εγγραφές τύπου HINFO

8.678 8.982 9.142 9.191 9.336 1,6% 9,4% 7,6%

9

Page 10: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Εγγραφές τύπου NS

4.474 6.060 7.649 10.733 15.390 43,4% 31,2% 244,0%

Εγγραφές τύπου MX

8.188 9.359 10.040 10.745 14.162 31,8% 14,4% 73,0%

WWW Servers 809 1.168 1.468 1.832 2.358 28,7% 30,1% 191,5%

Ανταποκρίθηκαν 671 944 1.218 1.531 2.020 31,9% 30,4% 201,0%

Πίνακας 1.2: Συγκριτικός Πίνακας για τον Ελληνικό χώρο (OpenWeb: http://www.open.gr)

Ημερομηνία Αριθμός Κόμβων

08/81 21305/82 23508/83 56210/84 1.02410/85 1.96102/86 2.30811/86 5.08912/87 28.17407/88 33.00010/88 56.00001/89 80.00007/89 130.00010/89 159.00010/90 313.00001/91 376.00007/91 535.00010/91 617.00001/92 727.00004/92 890.00007/92 992.00010/92 1.136.00001/93 1.313.00004/93 1.486.00007/93 1.776.00010/93 2.056.00001/94 2.217.00007/94 3.212.00010/94 3.864.00001/95 4.852.000 07/95 6.642.00001/96 9.472.00007/96 12.881.00001/97 16.146.00007/97 19.540.00001/98 29.670.00007/98 36.739.0001/99 43,230,000 7/99 56,218,000

10

Page 11: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Πίνακας 1.3: Συγκριτικός Πίνακας για το Διεθνή χώρο

Η κατάσταση η οποία επικρατεί στον ευρωπαϊκό χώρο σχετικά με του κόμβους των περιοχών (διαφορετικά ονόματα domain) που έχουν μετρηθεί να είναι ενεργοί γίνονται από τον ευρωπαϊκό οργανισμό RIPE (http://www.ripe.net) και φαίνονται στον παρακάτω πίνακα:

Ημερομηνία Μέτρησης: 5 Σεπτεμβρίου 1998Προηγούμενη Μέτρηση: 6 Αυγούστου 1998

Χώρα SOA Μετρηθέντες Διπλ. Πραγματικοί ΑλλαγήAL 10 143 8 135 +1AM 121 983 159 824 +41AT 23776 193628 38842 154786 +2452AZ 52 394 20 374 -16BA 45 595 46 549 +79BE 10379 203469 19575 183894 +2998BG 581 11311 1248 10063 +1695BY 103 1024 176 848 +91CH 39362 258935 43919 215016 -1325CY 618 5164 145 5019 +50CZ 14585 80846 9717 71129 0DE 151458 1664677 301737 1362940 +54234DK 54351 308199 33475 274724 +74291DZ 6 21 1 20 -31EE 1920 22272 1382 20890 +827EG 650 2936 195 2741 +920ES 11037 270986 11636 259350 +1335FI 7831 463400 14695 448705 +9975FO 119 555 21 534 +3FR 25938 488798 34702 454096 +6943GB 2 26 0 26 -1GE 47 718 37 681 +83GR 5354 44363 3549 40814 +554HR 1587 12288 2017 10271 +4107HU 5882 96091 9059 87032 +1695IE 5934 52725 4684 48041 -775IL 6808 124160 21697 102463 +6363IS 1350 23315 789 22526 +806IT 39387 447151 49427 397724 +39805LI 644 1646 610 1036 -210LT 1027 8791 549 8242 +273LU 1330 7858 1121 6737 +18LV 839 13269 2183 11086 +1516MA 221 2106 339 1767 +22MD 59 631 114 517 +98

11

Page 12: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

MK 236 1014 105 909 +221MT 246 1972 257 1715 +260NL 41170 569007 50043 518964 -14171NO 20289 325563 15630 309933 +7413PL 16682 144813 27745 117068 +6615PT 6667 58104 7727 50377 +532RO 1534 21856 2011 19845 +252RU 14363 180824 32610 148214 +14692SE 28630 421929 25685 396244 +28802SI 2817 23327 2436 20891 -528SK 5200 24247 4409 19838 +1195SM 45 237 2 235 +5SU 1285 28143 1746 26397 -16011TN 13 183 103 80 -28TR 6793 43742 5073 38669 +956UA 1486 28533 8290 20243 +1598UK 116240 1573225 224772 1348453 +26575VA 2 8 0 8 +1YU 1619 7655 604 7051 +443

678730 8267856 1017122 7250734 +267739

Πίνακας 1.4: Πρόσφατη Κατανομή των Eυρωπαϊκών κόμβων

1.3 Το Μέλλον του Διαδικτύου

Η θεαματική ανάπτυξη του Διαδικτύου συνεχίζεται όλο και περισσότερο, το διαδίκτυο καλωσορίζει κάθε μήνα εκατομμύρια καινούργιους χρήστες και οι μεγαλύτερες εταιρίες στον κόσμο επενδύουν εκατομμύρια.

Με βάση αυτά τα στοιχεία οι παρακάτω προβλέψεις σχετικά με το μέλλον του διαδικτύου είναι μάλλον βέβαιες:

Τα εργαλεία ανάπτυξης εξυπηρετητών Παγκόσμιου Ιστού θα τείνουν όλο και περισσότερο στην παροχή δυνατοτήτων που θα ελκύουν τους χρήστες.

Η διανομή του λογισμικού θα γίνεται όλο και περισσότερο μέσω του διαδικτύου με αποτέλεσμα να μειωθεί η χρησιμοποίηση CD-ROM και δισκετών.

To video και audio streaming θα διαδοθεί ακόμα περισσότερο και η σύγκλιση της τηλεόρασης και υπολογιστή είναι πολύ κοντά.

Θα αναπτυχθεί ιδιαίτερα το ηλεκτρονικό εμπόριο (electronic commerce).

Η ανωνυμία ένα από τα ελκυστικότερα χαρακτηριστικά του διαδικτύου για τους περισσότερους σιγά-σιγά θα μειωθεί καθώς αναμένεται να μπουν κανονισμοί και αρχές στη λειτουργία του.

Η στρατηγική χρέωσης των υπηρεσιών του διαδικτύου αναμένεται να αλλάξει και να προσαρμοστεί στο είδος δεδομένων που κάθε χρήστης διακινεί.

1.4 Οργανισμοί Καθορισμού Προτύπων (Standard Bodies)

Διάφοροι οργανισμοί εμπλέκονται στη διαδικασία ανάπτυξης και ελέγχου του διαδικτύου κυρίως όσον αφορά τα πρωτόκολλα που χρησιμοποιούνται. Στη συνέχεια αναφέρουμε μερικούς από αυτούς που έπαιξαν και παίζουν σημαντικό ρόλο στην ανάπτυξη του διαδικτύου.

12

Page 13: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

1.4.1 Internet Society (ISOC)

http://info.isoc.org

Το ISOC είναι ένα σώμα από ειδικούς που ασχολούνται με το διαδίκτυο με σκοπό τον συντονισμό της ανάπτυξης του και την ομαλή λειτουργία του. Μία από τις κύριες υπηρεσίες του είναι η ανάπτυξη προτύπων και πρωτοκόλλων του διαδικτύου σε συνεργασία με άλλους οργανισμούς.

Internet Architecture Board (IAB): Το IAB παίζει το ρόλο του τεχνικού συμβούλου στο ISOC. Στο ΙΑΒ εμπεριέχονται δύο κύριες ομάδες που ασχολούνται με το διαδίκτυο, το Internet Engineering Task Force και το Internet Research Task Force.

http://www.isi.edu/iab

Internet Engineering Task Force and Internet Engineering Steering Group (IETF-IESG): Το IETF είναι o κύριος μοχλός ανάπτυξης του διαδικτύου, ασχολείται με την ανάπτυξη πρωτοκόλλων και διοικείται από το IESG. Οι δραστηριότητές του διαιρούνται στις ακόλουθες εννέα περιοχές: applications, internet services, network management, operational requirements, routing, security, service applications, transport και user services.

http://www.ietf.org

Internet Research Task Force and Internet Research Steering Group (IRTF-IRSG): To IRTF αποτελείται από διαφορετικές ερευνητικές ομάδες ο οποίες ασχολούνται με πρωτόκολλα, εφαρμογές, αρχιτεκτονικές και τεχνολογίες διαδικτύου. Διοικείται από το IRSG. Η διαφορά του με το IETF είναι ότι ασχολείται με μακροχρόνια έρευνα.

http://www.irtf.org

Internet Network Information Center (InterNIC): Το InterNIC είναι το σώμα που ασχολείται την εγγραφή και διαχείριση των domain names του διαδικτύου.

http://www.internic.net

Internet Assigned Numbers Authority (IANA): Το IANA είναι αυτό που συντηρεί και διαχειρίζεται την διευθυνσιοδότηση και την ανάθεση αριθμών του διαδικτύου.

http://www.iana.org

1.4.2 World Wide Web Consortium (W3C)

http :// www . w 3. org /

To W3C είναι ένας διεθνής οργανισμός που χρηματοδοτείται από εμπορικά μέλη, και ασχολείται με την ανάπτυξη πρωτοκόλλων σχετικών με τον Παγκόσμιο Ιστό, όπως το HTTP. Διευθυντής του είναι ο εφευρέτης του Παγκόσμιου Ιστού, ο Tim Berners-Lee.

1.4.3 Άλλοι Οργανισμοί

Εκτός από τους παραπάνω οργανισμούς υπάρχουν και άλλοι σημαντικοί οργανισμοί ορισμού προτύπων που ασχολούνται και επηρεάζουν τις εξελίξεις στο διαδίκτυο. Μερικοί από αυτούς είναι οι ακόλουθοι:

International Organization for Standardization (ISO)

American National Standards Institute (ANSI)

13

Page 14: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

European Computer Manufacturer Association (ECMA)

Institute of Electrical Engineering and Electronics Engineers (IEEE)

Open Group

Open Software Foundation (OSF)

X/Open

1.4.4 Εμπορικές Εταιρίες

Εκτός από τους οργανισμούς ορισμού προτύπων, υπάρχουν και αρκετές εταιρίες που συμμετέχουν στην ανάπτυξη πρωτοκόλλων διαδικτύου, πράγμα το οποίο δεν είναι καθόλου περίεργο λόγω της συνεχώς αναπτυσσόμενης εμπορικότητας του διαδικτύου. Εταιρίες όπως η Microsoft, η Netscape και η Sun Microsystems έχουν ένα μεγάλο μερίδιο στην ανάπτυξη προτύπων.

Η Microsoft έχει δώσει την ActiveX τεχνολογία στο Active Group που δουλεύει κάτω από το Open Group. Η Netscape έχει δουλέψει με το ECMA για την ανάπτυξη μίας πρότυπης έκδοσης της JavaScript, η οποία ονομάζεται EcmaScript. Η Sun Microsystems αυτή τη στιγμή προσπαθεί να αναγνωριστεί η Java σαν ένα ISO πρότυπο.

14

Page 15: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

2 ΚΕΦΑΛΑΙΟ 2:AΡΧΙΤΕΚΤΟΝΙΚΗ ΔΙΑΔΙΚΤΥΟΥ - ΠΡΩΤΟΚΟΛΛΑ

2.1 Αρχιτεκτονικές Δικτύων

Τα μοντέρνα δίκτυα υπολογιστών έχουν σχεδιαστεί μ’ έναν υψηλό βαθμό δόμησης. Για να ελαττώσουν την πολυπλοκότητα της σχεδίασης, τα περισσότερα δίκτυα έχουν οργανωθεί σε σειρές από στρώματα ή επίπεδα (layers ή levels), που το καθένα χτίζεται πάνω στο προηγούμενό του. Ο αριθμός των επιπέδων, τα ονόματά τους, τα περιεχόμενά τους και η λειτουργία του καθενός διαφέρουν από δίκτυο σε δίκτυο. Σε όλα όμως τα δίκτυα ο σκοπός κάθε επιπέδου είναι να προσφέρει συγκεκριμένες υπηρεσίες στα υψηλότερα επίπεδα, απομονώνοντας αυτά τα επίπεδα από τις λεπτομέρειες σχετικά με το πως πραγματικά υλοποιούνται οι παρεχόμενες υπηρεσίες.

Το επίπεδο n μιας μηχανής επικοινωνεί με το επίπεδο n μιας άλλης μηχανής. Οι κανόνες και οι συνθήκες που χρησιμοποιούνται σ’αυτή την επικοινωνία είναι γνωστές ως το πρωτόκολλο του επιπέδου n (layer n protocol). Oι οντότητες που περιλαμβάνονται στα αντίστοιχα επίπεδα σε διαφορετικά μηχανήματα ονομάζονται ομότιμες διεργασίες (peer processes). Με άλλα λόγια, οι ομότιμες διεργασίες είναι αυτές που επικοινωνούν χρησιμοποιώντας το πρωτόκολλο. Ανάμεσα σε κάθε ζεύγος γειτονικών επιπέδων υπάρχει μια διασύνδεση (interface). H διασύνδεση αυτή καθορίζει ποιες πρωτογενείς λειτουργίες και υπηρεσίες προσφέρει ένα επίπεδο στο επίπεδο πάνω από αυτό. Το σύνολο των επιπέδων και πρωτοκόλλων ονομάζεται αρχιτεκτονική δικτύου (network architecture).

2.2 Το Μοντέλο Αναφοράς OSI

Το μοντέλο αναφοράς OSI (Open System Interconnection – Διασύνδεση Ανοιχτών Συστημάτων) αναπτύχθηκε από τον Διεθνή Οργανισμό Τυποποίηση (ISO – International Standards Organization) και ασχολείται με συνδέσεις ανοιχτών συστημάτων (αυτά τα οποία είναι ανοιχτά για επικοινωνία με άλλα συστήματα).

Το μοντέλο OSI έχει 7 επίπεδα τα οποία φαίνονται στο παρακάτω σχήμα:

7. Επίπεδο Εφαρμογής (Application Layer)

6. Επίπεδο Παρουσίασης (Presentation Layer)

5. Επίπεδο Συνόδου (Session Layer)

4. Επίπεδο Μεταφοράς (Transport Layer)

3. Επίπεδο Δικτύου (Network Layer)

2. Επίπεδο Σύνδεσης Δεδομένων (Data Link Layer)

1. Φυσικό Επίπεδο (Physical Layer)

Σχήμα 2.1: Το Μοντέλο Αναφοράς OSI

15

Page 16: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Το φυσικό επίπεδο (physical layer) ασχολείται με τη μετάδοση ακατέργαστων bits σε ένα κανάλι επικοινωνίας.

Η κύρια αποστολή του επιπέδου σύνδεσης δεδομένων (data link layer) είναι να μετασχηματίσει το ακατέργαστο μέσο μετάδοσης σε μια γραμμή που εμφανίζεται ελεύθερη από σφάλματα μετάδοσης στο επίπεδο δικτύου. Μερικές από τις βασικές λειτουργίες αυτού του επιπέδου είναι η επιβεβαίωση μετάδοσης και λήψης καθώς και η ανίχνευση λαθών.

Το επίπεδο δικτύου (network layer) ασχολείται με τον έλεγχο της λειτουργίας του υποδικτύου. Παρέχει σύνδεση και δρομολόγηση (routing) ανάμεσα σε δύο κόμβους ενός δικτύου.

Η βασική λειτουργία του επιπέδου μεταφοράς (transport layer) είναι η αποδοχή δεδομένων από το επίπεδο συνόδου, η διάσπαση αυτών σε μικρότερες μονάδες αν χρειαστεί, η μεταφορά τους στο επίπεδο δικτύου και η διασφάλιση ότι όλα τα τμήματα φτάνουν σωστά στην άλλη πλευρά.

Το επίπεδο συνόδου (session layer) επιτρέπει στους χρήστες διαφορετικών μηχανημάτων να εγκαθιστούν συνόδους (sessions) μεταξύ τους. Μία σύνοδος επιτρέπει μια συνήθη μεταφορά δεδομένων, όπως και το επίπεδο μεταφοράς, αλλά παρέχει και μερικές πρόσθετες υπηρεσίες που είναι χρήσιμες σε πολλές εφαρμογές. Μια σύνοδος, μπορεί να χρησιμοποιηθεί για να επιτρέψει τη σύνδεση ενός χρήστη σ’ένα απομακρυσμένο σύστημα καταμερισμού χρόνου (time-sharing) ή να μεταφέρει ένα αρχείο μεταξύ δύο μηχανών.

Το επίπεδο παρουσίασης (presentation layer) εκτελεί συγκεκριμένες λειτουργίες οι οποίες ζητούνται αρκετά συχνά από τους χρήστες, για να εξασφαλίζουν την εύρεση μιας γενικής λύσης γι’ αυτούς, ώστε να μην αφήνεται κάθε χρήστης να λύνει τα προβλήματα μόνος του. Συγκεκριμένα, ενώ όλα τα κατώτερα επίπεδα ενδιαφέρονται μόνο για την αξιόπιστη μεταφορά bits από το ένα μέρος στο άλλο, το επίπεδο παρουσίασης ενδιαφέρεται για το συντακτικό και τη σημασιολογία των πληροφοριών που μεταδίδονται.

Το επίπεδο εφαρμογής (application layer) χρησιμοποιεί τις υπηρεσίες του επιπέδου παρουσίασης για την εκτέλεση εφαρμογών των χρηστών. Μερικές χαρακτηριστικές λειτουργίες αυτού του επιπέδου είναι η μεταφορά αρχείων, η εισαγωγή εργασιών από απόσταση, η εμφάνιση καταλόγων (directory) αρχείων, το ηλεκτρονικό ταχυδρομείο κλπ.

Σήμερα λίγοι είναι οι υπολογιστές και τα δίκτυα που είναι τελείως συμβατά με όλα τα επίπεδα του μοντέλου αναφοράς OSI.

2.3 Η Οικογένεια Πρωτοκόλλων Διαδικτύου (Internet Protocol Suite) – TCP/IP

H οικογένεια πρωτοκόλλων TCP/IP (Transmission Control Protocol / Internet Protocol) ξεκίνησε στις αρχές του 1970 και χρησιμοποιήθηκε για τη διασύνδεση κεντρικών υπολογιστών (hosts) στο ARPANET, στο PRNET (packet radio) και στο SATNET (packet satellite). Αρχικά ο σχεδιασμός της έγινε λόγω του γεγονότος ότι τα τρία παραπάνω δίκτυα ήταν ετερογενή μεταξύ τους. Σήμερα, παρόλο που τα παραπάνω δίκτυα έχουν αποσυρθεί, τα TCP/IP πρωτόκολλα είναι τα πιο διαδεδομένα παγκοσμίως.

16

Page 17: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Τα διάφορα επίπεδα του TCP/IP σε σχέση με το μοντέλο αναφοράς OSI φαίνονται στο παρακάτω σχήμα:

OSI Layering TCP Layering

7. Application Layer

Application or process layer

6. Presentation Layer

5. Session Layer

4. Transport Layer Host-to-host transport layer

3. Network Layer Internetwork (IP)

2. Data Link Layer Network Interface

1. Physical Layer Physical Layer

Σχήμα 2.2: Τα επίπεδα του OSI και του TCP/IP

To επίπεδο εφαρμογής (application or process layer) είναι ένα πρωτόκολλο εφαρμογών, όπως το ηλεκτρονικό ταχυδρομείο.

Το επίπεδο μεταφοράς (host-to-host transport layer) παρέχει υπηρεσίες οι οποίες απαιτούνται από διάφορες εφαρμογές.

Το Internetwork επίπεδο παρέχει τη βασική υπηρεσία μεταγωγής αυτοδύναμων πακέτων (datagrams) στον τελικό τους προορισμό.

Το επίπεδο δικτύου (network layer) αναλαμβάνει τη διευθυνσιοδότηση (IP addressing) και το Domain Name Service (DNS).

Το φυσικό επίπεδο (physical layer) αναλαμβάνει τη διαχείριση του φυσικού μέσου, όπως μία γραμμή Ethernet.

Η λογική δομή της οικογένειας πρωτοκόλλων TCP/IP φαίνεται στο παρακάτω σχήμα:

Σχήμα 2.3: Η λογική δομή της οικογένειας πρωτοκόλλων διαδικτύου

17

Physical Layer

Internet addressing

(ICMP, IGMP)

IP

Physical wiring

MBONESNMP

UDP

TELNETHTTPFPT

TCP

ConnectionlessConnection-oriented

Page 18: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

2.3.1 Το Πρωτόκολλο Ελέγχου Μετάδοσης (Transmission Control Protocol - TCP)

Το TCP είναι ένα πρωτόκολλο μεταφοράς το οποίο χρησιμοποιείται όταν υπάρχει φυσική σύνδεση και στέλνει δεδομένα σε μορφή σειρών από bytes. Το TCP εγκαθιδρύει και συντηρεί μια σύνδεση. Μια οντότητα μεταφοράς του TCP λαμβάνει μηνύματα αυθαίρετου μήκους από διεργασίες χρήστη, τα σπάει σε κομμάτια που δεν υπερβαίνουν τα 64 Kbytes και στέλνει κάθε κομμάτι σαν ένα ξεχωριστό αυτοδύναμο πακέτο. Το επίπεδο δικτύου δεν εγγυάται ότι τα αυτοδύναμα πακέτα θα παραδοθούν σωστά, οπότε είναι δουλειά του TCP να εξαντλήσει το χρόνο του και να τα επαναμεταδώσει αν δεν είναι σωστά. Επίσης το TCP διασφαλίζει την επαναδιάταξη των αυτοδύναμων πακέτων αν αυτά φτάσουν με λάθος σειρά.

2.3.2 To Πρωτόκολλο Αυτοδύναμου Πακέτου Χρήστη (User Datagram Protocol – UDP)

To UDP είναι ένα εναλλακτικό του TCP πρωτοκόλλου, το οποίο επιτρέπει σε χρήστες την αποστολή μηνυμάτων χωρίς εγκατάσταση σύνδεσης και χωρίς καμία εγγύηση για την παράδοση, ή την παράδοση με σωστή σειρά. Ουσιαστικά το UDP είναι απλά μια διασύνδεση χρήστη με το IP. To UDP απαιτεί πολύ λιγότερο χρόνο από το TCP και για το λόγο αυτό συχνά χρησιμοποιείται για τη μεταφορά δεδομένων μέσα στην ίδια μηχανή.

2.3.3 Το Πρωτόκολλο Διαδικτύου (Internet Protocol – IP)

To IP είναι η καρδιά της οικογένειας πρωτοκόλλων διαδικτύου. Παρέχει υπηρεσίες οι οποίες επιτρέπουν σε δεδομένα να μεταφερθούν σε hosts που βρίσκονται σε διαφορετικά δίκτυα. Εκτός της δρομολόγησης, το IP προσφέρει ανίχνευση λαθών, σπάσιμο σε πακέτα και επανασυναρμολόγησή τους.

Το πρωτόκολλο IP λειτουργεί ως εξής: το επίπεδο μεταφοράς λαμβάνει μηνύματα και τα σπάζει σε αυτοδύναμα πακέτα, μέχρι 64 Kbytes το καθένα. Κάθε αυτοδύναμο πακέτο μεταδίδεται μέσω του διαδικτύου, πιθανώς σπάζοντας σε μικρότερες μονάδες καθώς προχωρεί. Όταν όλα τα κομμάτια τελικά φτάσουν στη μηχανή προορισμού, συναρμολογούνται ξανά από το επίπεδο μεταφοράς για τη δημιουργία του αυθεντικού μηνύματος.

2.3.4 IP Διευθύνσεις (IP Addresses)

Οι IP διευθύνσεις είναι μοναδικοί αριθμοί (32-bit) που δίνονται από το Internet Network Information Center (InterNIC). Αυτές οι μοναδικές διευθύνσεις επιτρέπουν σε IP δίκτυα σε ολόκληρο τον κόσμο να επικοινωνήσουν μεταξύ τους. Οι IP διευθύνσεις αποτελούνται από τέσσερα κομμάτια από δεκαδικούς αριθμούς που παίρνουν τιμές από 0 έως 255 (για παράδειγμα κάποιος υπολογιστής του τμήματος μπορεί να έχει διεύθυνση 150.140.42.10). Οι διευθύνσεις αυτές διαβάζονται από αριστερά προς τα δεξιά, με τα αριστερά κομμάτια να υποδηλώνουν την κατηγορία και τη διεύθυνση του δικτύου, και τα δεξιά κομμάτια να δείχνουν τη διεύθυνση της μηχανής στο συγκεκριμένο δίκτυο.

Υπάρχουν τρεις μεγάλες κατηγορίες IP δικτύων: η A, η B και η C. Τα δίκτυα της κατηγορίας A ορίζονται από το πρώτο αριστερό κομμάτι της διεύθυνσης, αυτά της κατηγορίας B ορίζονται από τα δύο αριστερά κομμάτια της διεύθυνσης και αυτά της κατηγορίας C απαιτούν όλα τα κομμάτια εκτός από το πρώτο δεξιό κομμάτι της διεύθυνσης.

18

Page 19: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Αν θέλει κάποιος να φτιάξει ένα IP δίκτυο αυτό θα είναι κατηγορίας B ή C διότι όλα τα δίκτυα κατηγορίας A έχουν ήδη είτε δοθεί, ή κρατηθεί από την Internet Assigned Numbers Authority (IANA). Ένα σημείο κλειδί που θα πρέπει να προσέξει κάποιος ο οποίος θέλει να συνδέσει ένα IP δίκτυο στο Internet, είναι ότι θα πρέπει να πάρει IP διεύθυνση και domain name από την IANA.

Κάθε υπολογιστής συνδεδεμένος στο internet έχει μια μοναδική διεύθυνση (συνήθως λέγεται IP address). Κάθε τέτοια μοναδική διεύθυνση είναι ένας αριθμός των 32 bits και αναπαρίσταται σαν τέσσερις δεκαδικοί αριθμοί χωρισμένοι με τελείες (π.χ. 140.29.22.1).

Αντί το πεδίο διευθύνσεων να είναι "επίπεδο", δηλαδή με την σειρά όλες οι διευθύνσεις (π.χ. 1, 2, 3, 4, …) χρησιμοποιείται μια διαφορετική δομή που είναι τελικά πιο αποδοτική. Οι διευθύνσεις στο internet χωρίζονται σε πέντε κλάσεις (classes) όπως φαίνεται και στο παρακάτω σχήμα:

7 bits 24 bits

Class A 0 Netid Hostid

14 bits 16 bits

Class B 1 0 Netid Hostid

21 bits 8 bits

Class C 1 1 0 Netid Hostid

28 bits

Class D 1 1 1 0 Multicast Group id

27 bits

Class E 1 1 1 1 0 (Δεσμευμένα για μελλοντική χρήση)

Το εύρος των διευθύνσεων παρατίθενται στον παρακάτω πίνακα:

Κλάση Εύρος διευθύνσεων

A 0.0.0.0 ως 127.255.255.255

Β 128.0.0.0 ως 191.255.255.255

C 192.0.0.0 ως 223.255.255.255

D 224.0.0.0 ως 239.255.255.255

E 240.0.0.0 ως 247.255.255.255

Υπάρχουν τρία είδη διευθύνσεων στο internet: unicast (προορισμένες για μοναδικούς υπολογιστές στο internet - αναφέρονται μόνο σε ένα συγκεκριμένο host), broadcast

19

Page 20: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

(προορισμένες για όλους τους υπολογιστές που ανήκουν σ’ ένα δεδομένο δίκτυο) και multicast (προορισμένες για ένα σύνολο από υπολογιστές που ανήκουν στην ίδια ομάδα multicast).

Είναι φανερό ότι στην κλάση Α (Class A), όπως άλλωστε και για την κλάση Β, δίνεται ένας πολύ μεγάλο πεδίο για το hostid (24 bits). Δηλαδή για ένα συγκεκριμένο network (netid) αντιστοιχούν υπερβολικά πολλοί δικτυωμένοι υπολογιστές (hosts). Είναι στην κρίση όμως του διαχειριστή του δικτύου να καθορίσει τα υποδίκτυα (subnets) και να "τακτοποιήσει" καλύτερα το δίκτυό του. Για παράδειγμα ας θεωρήσουμε πως κάποιος θέλει να διαχειριστεί το class B 150.251 δίκτυό του. Αντί να το διαχειριστεί ως εξής:

16 bits 16 bits

netid = 150.251 Hostid

το μετασχηματίζει σε:

16 bits 8 bits 8 bits

netid = 150.251 Subnetid hostid

Ο παραπάνω τρόπος διαχείρισης είναι και ο δημοφιλέστερος. Το μέγεθος του subnetid μπορεί να ποικίλει ανάλογα με τις ανάγκες του δικτύου. Εννοείται πώς κατά την μεταβολή του subnetid αλλάζει και η τιμή του hostid.

2.3.5 Subnet Mask

Κάθε δικτυωμένος υπολογιστής κατά την εκκίνηση του λειτουργικού του συστήματος (bootstrap time) γνωρίζει την διεύθυνση που του ανήκει (IP address). Αν έχει αποθηκευτικά μέσα την φυλάει και την διαβάζει από εκεί. Αν όχι την "μαθαίνει" από κάποιο γειτονικό υπολογιστή αφού τον ρωτήσει πρώτα.(ο γειτονικός υπολογιστής δεν είναι κάποιος τυχαίος και έχει στηθεί έτσι ώστε να απαντάει σε τέτοιου είδους αιτήσεις (requests)). Είναι όμως εξίσου απαραίτητο να γνωρίζει πόσα bits χρησιμοποιούνται για το subnet ID και πόσα για το host ID. Αυτό καθορίζεται επίσης κατά την εκκίνηση του συστήματος από μία ποσότητα που ονομάζεται subnet mask. To subnet mask είναι ένας 32-bit αριθμός που περιέχει το ψηφίο "1" για το network ID και το subnet ID ,και το ψηφίο "0" για το host ID. Παρακάτω φαίνεται η τιμή του subnet mask για δύο διαφορετικές διαχειρίσεις ενός Class B δικτύου.

16 bits 8 bits 8 bits

Netid subnetid hostid

Subnet Mask: 1111111111111111 11111111 00000000 = 0xffffff00 = 255.255.255.0

16 bits 10 bits 6 bits

Netid subnetid hostid

20

Page 21: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Subnet Mask: 1111111111111111 1111111111 000000 = 0xffffffc0 = 255.255.255.192

Ένας υπολογιστής όταν γνωρίζει την διεύθυνσή του (IP) και το subnet mask μπορεί να καθορίσει αν κάποια πληροφορία προορίζεται για (1) έναν υπολογιστή στο δικό του υποδίκτυο (2) έναν υπολογιστή σε διαφορετικό υποδίκτυο άλλα στο δικό του δίκτυο (3) έναν υπολογιστή σε διαφορετικό δίκτυο.

Γνωρίζοντας ένας υπολογιστής την IP του ξέρει σε πια κλάση ανήκει ( Α, Β, ή C, απο τα περισσότερο σημαντικά ψηφία της διεύθυνσης), το οποίο σημαίνει ότι γνωρίζει πού είναι το όριο μεταξύ του network ID και του subnet ID, ενώ γνωρίζοντας το subnet mask μπορεί να καταλάβει πού είναι το όριο μεταξύ του subnet ID και του host ID.

Παράδειγμα:

Ας υποθέσουμε πως η διεύθυνση μας είναι 140.252.1.1 (Class B διεύθυνση) και ότι το subnet mask είναι 255.255.255.0 (8 bits για το subnet ID και 8 bits για το host ID).

Αν θέλουμε να συνδεθούμε με κάποιο υπολογιστή που έχει IP 140.252.4.5 ξέρουμε ότι τα network IDs είναι τα ίδια (140.252), αλλά τα subnet IDs είναι διαφορετικά (1 και 4). Το παρακάτω σχήμα δείχνει πώς γίνεται η σύγκριση των δύο διευθύνσεων με την χρησιμοποίηση του subnet mask.

Αν θέλουμε να συνδεθούμε με κάποιο υπολογιστή που έχει IP 140.252.1.22 ξέρουμε πως τα network IDs είναι ίδια (140.252), όπως και τα subnet IDs (1). Tα host IDs όμως είναι διαφορετικά.

Αν θέλουμε να συνδεθούμε με κάποιο υπολογιστή που έχει IP 192.43.235.6, τα network IDs είναι διαφορετικά και περισσότερες συγκρίσεις δεν γίνονται.

21

Page 22: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

End of End of

Class B specified

Network ID subnet ID

| |

| |

| |

140 252 1 1

Subnet mask: 11111111 11111111 11111111 00000000 = 255.255.255.0

διαφορετικά

Ιδια network Ids subnet IDs

ß àß à

140 252 4 5

2.3.6 Domain Name Service - DNS

Το DNS είναι ένα σύστημα με το οποίο οι δύσκολες IP διευθύνσεις αντιστοιχίζονται σε ονόματα. Για παράδειγμα η διεύθυνση 150.140.141.181 αντιστοιχίζεται στο όνομα diogenis.ceid.upatras.gr.

Τα domain names όπως και οι IP διευθύνσεις που αναπαριστούν είναι μοναδικά, έχουν μια ιεραρχία και διαβάζονται από αριστερά προς τα δεξιά. Αντίθετα όμως με τις διευθύνσεις οι DNS διευθύνσεις γίνονται πιο συγκεκριμένες με φορά προς τα αριστερά. Το δεξιότερο κομμάτι είναι το όνομα της μηχανής ή του λογαριασμού και χωρίζεται με τελείες από το όνομα του subdomain και του domain..

2.3.7 Δρομολόγηση σε IP περιβάλλοντα

H διαδικασία της δρομολόγησης είναι θεμελιώδης για τη μεταφορά πληροφορίας ανάμεσα σε δύο κόμβους ενός δικτύου. Οι δρομολογητές είναι οργανωμένοι ιεραρχικά μέσα στο διαδίκτυο. Αυτοί που χρησιμοποιούνται για την ανταλλαγή δεδομένων μέσα σε ένα αυτόνομο δίκτυο, ονομάζονται εσωτερικοί δρομολογητές (interior routers) και χρησιμοποιούν μια ποικιλία από πρωτόκολλα που ονομάζονται interior gateway protocols (IGPs). Αυτοί που χρησιμοποιούνται για ανταλλαγή δεδομένων ανάμεσα σε αυτόνομα δίκτυα, ονομάζονται δρομολογητές εξωτερικού (exterior routers) και χρησιμοποιούν το Exterior Gateway Protocol (EGP) ή το Border Gateway Protocol (BGP).

Τα πρωτόκολλα δρομολόγησης που χρησιμοποιούνται με το IP είναι δυναμικά. Το λογισμικό που υπάρχει στις συσκευές δρομολόγησης υπολογίζει τις διαδρομές που θα πάρουν τα πακέτα στο δίκτυο. Οι αλγόριθμοι δυναμικής δρομολόγησης προσαρμόζονται στις αλλαγές του δικτύου και αυτόματα επιλέγουν τις βέλτιστες διαδρομές. Σε αντίθεση με τη δυναμική δρομολόγηση στην στατική τις διαδρομές τις καθορίζει ο διαχειριστής.

22

Page 23: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Κατά τη διαδικασία δρομολόγησης σε IP περιβάλλοντα τα αυτόνομα πακέτα πηγαίνουν από δρομολογητή σε δρομολογητή χωρίς να είναι εκ των προτέρων γνωστή η συνολική διαδρομή που θα κάνουν. Σε κάθε δρομολογητή καθορίζεται ο επόμενος δρομολογητής στον οποίο θα φτάσουν με βάση τον πίνακα δρομολόγησης που υπάρχει εκεί και ο οποίος αποτελείται από την διεύθυνση προορισμού και τις διευθύνσεις των επόμενων δρομολογητών. Επειδή το ίδιο το IP δεν προσφέρει ανίχνευση λαθών αν προκύψουν ανωμαλίες κατά τη δρομολόγηση, για την εργασία αυτή χρησιμοποιείται ένα άλλο πρωτόκολλο το Internet Control Message Protocol (ICMP)

2.4 Serial Line Internet Protocol (SLIP)

Το SLIP είναι ένα πρωτόκολλο που παλιότερα ήταν ιδιαίτερα εξαπλωμένο αλλά τώρα έχει αντικατασταθεί από το PPP. Σχεδιάστηκε για host-to-host, host-to-router, router-to-router, ή workstation-to-router επικοινωνία, μέσω σύγχρονης ή ασύγχρονης, μισθωμένης ή dial-up σειριακής γραμμής, σε ταχύτητες 1200 bps έως 19.2 Kbps, αλλά μπορεί να χρησιμοποιηθεί και σε μεγαλύτερες ταχύτητες.

Το SLIP παρέχει πλαισίωση (framing) σε IP πακέτα, σε point-to-point σειριακές γραμμές. Ουσιαστικά είναι ανάλογο με ένα Ethernet ή ένα token ring. Σε ένα τοπικό δίκτυο τα αυτόνομα IP πακέτα εμπεριέχονται σε Ethernet πλαίσια. Σε μία σειριακή γραμμή τα αυτόνομα IP πακέτα εμπεριέχονται σε SLIP (ή PPP) πλαίσια. To SLIP μπορεί να συμπεριλάβει μόνο IP πακέτα και για το λόγο αυτό δεν συνεργάζεται με άλλα πρωτόκολλα όπως το DECnet ή το IPX της Novell.

To SLIP προσδιορίζει το τέλος ενός πλαισίου δεδομένων με έναν ειδικό χαρακτήρα (2 bytes) που ονομάζεται χαρακτήρας τέλους (END character). Επίσης, δεν παρέχει ανίχνευση λαθών και επαναμετάδωση. Μερικά από τα μειονεκτήματα του είναι τα ακόλουθα:

Διευθυνσιοδότηση: Δεν παρέχει μηχανισμό για ανταλλαγή πληροφοριών σχετικών με διευθύνσεις ανάμεσα σε δύο hosts.

1Πρωτόκολλα: Δεν συνεργάζεται με άλλα πρωτόκολλα.

Ανίχνευση και διόρθωση λαθών: Δεν παρέχει τέτοιου είδους μηχανισμούς.

Συμπίεση: Δεν δίνει τη δυνατότητα συμπίεσης των πακέτων.

2.5 Point-to-Point Protocol (PPP)

Το PPP σχεδιάστηκε με σκοπό να ξεπεράσει τις αδυναμίες του SLIP και παρέχει μηχανισμούς για την μεταφορά αυτόνομων πακέτων πολλαπλών πρωτοκόλλων μέσα από point-to-point σειριακές γραμμές. Εκτός από αυτό παρέχει μηχανισμούς για πολύπλεξη πρωτοκόλλων δικτύων (network protocol multiplexing), διαμόρφωση σύνδεσης (link configuration), έλεγχο ποιότητας σύνδεσης (link-quality testing), εξακρίβωση γνησιότητας (authentication), συμπίεση επικεφαλίδας (header compression), ανίχνευση λαθών (error detection) και διαπραγμάτευση σύνδεσης (link-option negotiation).

Τα βασικά στοιχεία από τα οποία αποτελείται το PPP είναι τα ακόλουθα:

Το πρωτόκολλο High Level Data Link Control (HDLC) το οποίο χρησιμοποιείται για την κωδικοποίηση των δεδομένων στη γραμμή.

23

Page 24: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Το Link Control Protocol (LCP) το οποίο παρέχει τις λειτουργίες εγκαθίδρυσης και ελέγχου της σύνδεσης. LCP πλαίσια στέλνονται πριν αποσταλούν τα δεδομένα.

Το Network Control Protocol (NCP) το οποίο διαχειρίζεται τα διάφορα πρωτόκολλα τα οποία μπορούν να ενσωματωθούν στο PPP

2.6 Πολλαπλή Αποστολή και Δρομολόγηση (Multicast Transmission and Routing)

Όταν λέμε multicast transmission εννοούμε την μετάδοση δεδομένων από ένα σταθμό σε πολλούς οι οποίοι έχουν εκφράσει το ενδιαφέρον να λαμβάνουν δεδομένα κάποιας μορφής. Είναι μία σχέση «ένα προς πολλά» και έχει μεγάλη διαφορά σε σχέση με την broadcast μετάδοση η οποία είναι μια σχέση «ένα προς όλα». Η πιο δημοφιλής υλοποίηση της πολλαπλής αποστολής είναι το multicast backbone (Mbone).

Oι multicast διευθύνσεις αναφέρονται σε ένα πλήθος υπολογιστών που ανήκουν στην ίδια ομάδα (multicast group). Η χρησιμοποίηση multicast διευθύνσεων παρέχει 2 πλεονεκτήματα.

1. Αποστολή σε διάφορες διευθύνσεις. Υπάρχουν πολλές εφαρμογές που παρέχουν πληροφορίες σε πολλούς αποδέκτες: π.χ. διάδοση της αλληλογραφίας , διάδοση διάφορων νέων κλπ.

2. Συνεργασία εξυπηρετητών με πελάτες (Clients) σε ορισμένες περιπτώσεις. Για παράδειγμα ένας υπολογιστής χωρίς μέσο μόνιμης αποθήκευσης θα πρέπει να χρησιμοποιήσει κάποιο άλλο μηχάνημα (bootstrap server) για να πάρει πληροφορίες, όπως τη δική του IP διεύθυνση. Αυτό γίνεται σήμερα με τη βοήθεια του broadcasting, άλλα μία multicasting λύση θα ήτανε πιο δίκαιη διότι οι υπολογιστές που δεν παρέχουν μια τέτοια υπηρεσία και είναι στο ίδιο υποδίκτυο δεν θα ήτανε αναγκασμένοι να λαμβάνουνε πληροφορίες που δεν προορίζονται για αυτούς (Τα broadcast messages λαμβάνονται από όλα τα hosts του υποδικτύου.)

Οι multicast διευθύνσεις (Class D) έχουν την παρακάτω μορφή:

28 bits

1 1 1 0 Multicast Group ID

Σε αντιδιαστολή με τις υπόλοιπες κλάσεις (Α, Β, C) μεγαλύτερη ανάλυση στο 28-bit πεδίο δεν μπορεί να γίνει. Όπως φαίνεται οι multicast διευθύνσεις καλύπτουν ένα εύρος από 224.0.0.0 μέχρι 239.255.255.255. Multicast group είναι ένα σύνολο από υπολογιστές που "ακούνε" σε μια καθορισμένη multicast διεύθυνση και μπορεί να είναι δυναμικά μεταβαλλόμενο. Αυτό σημαίνει πως οποιοδήποτε host μπορεί να αποχωρήσει από τη multicast ομάδα ή να ενταχθεί σε αυτή όποια στιγμή το επιθυμεί. Επίσης δεν υπάρχει περιορισμός στον αριθμό των hosts που ανήκουν σε κάποια ομάδα. Υπάρχει η δυνατότητα για κάποιο host το οποίο είναι εκτός μιας ομάδας να στείλει κάποιο μήνυμα σε κόμβους της ομάδας αυτής. Κάποιες διευθύνσεις multicast ομάδων θεωρούνται παγκοσμίως γνωστές και λέγονται μόνιμες (permanent host groups). Για παράδειγμα η διεύθυνση 224.0.0.1 σημαίνει "όλα τα συστήματα στο υποδίκτυο" και η 224.0.0.2 σημαίνει "όλοι οι routers στο υποδίκτυο".

24

Page 25: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

2.7 Uniform Resource Locators - URLs

Όταν λέμε URL ουσιαστικά εννοούμε μία διεύθυνση ενός πόρου του δικτύου (network resource). Είναι παρόμοιο με το όνομα ενός αρχείου αλλά κρατάει και επιπλέον πληροφορία σχετικά με το όνομα του εξυπηρετητή, καθώς και το είδος του πρωτοκόλλου που αυτός χρησιμοποιεί. Μερικές φορές κρατάει πληροφορία ακόμα και για τον χρήστη καθώς και παραμέτρους σχετικά με το πρωτόκολλο.

Οι ιστοσελίδες (Web pages) χρησιμοποιούν τα URLs για να συνδεθούν με άλλες σελίδες. Εκτός από αυτό τα URLs περιέχουν και πολλές άλλες δημοφιλείς δικτυακές εντολές όπως δείκτες προς FTP αρχεία, μηνύματα του Usenet, αναζητήσεις μέσω Gopher κλπ. Όλες αυτές οι πληροφορίες υπήρχαν βέβαια και πριν υπάρξουν τα URLs, αλλά αυτά είναι που κάνουν τόσο εύκολη την χρησιμοποίηση της πληροφορίας. Αυτά είναι που επέτρεψαν την εύκολη χρήση εντολών βασισμένων σε υπερκείμενο (hypertext).

To URL υποδιαιρείται στα ακόλουθα κομμάτια:

<scheme>:<scheme-specific name>

Όπου <scheme> είναι το πρωτόκολλο ή σχήμα (scheme) που χρησιμοποιείται (http, ftp κλπ.) και το <scheme-specific name> εξαρτάται από το format που χρησιμοποιείται στο πρωτόκολλο.

Πολλά URLs χρησιμοποιούν την ακόλουθη διάταξη:

<protocol>://<user>:<password>@<host>:<port>/<path>

όπου <user> είναι το όνομα του χρήστη, <password> είναι ο κωδικός πρόσβασης του χρήστη, <host> είναι το όνομα του domain του host ή η IP διεύθυνση σε μορφή x.x.x.x, <port> είναι ο αριθμός της θύρας και <path> είναι τα δεδομένα που σχετίζονται με το URL και έχει τη μορφή υποκατάλογος / όνομα αρχείου.

Ένα παράδειγμα ενός URL μιας ιστοσελίδας ακολουθεί: http://gigas.ceid.upatras.gr/activities/index.html

2.8 Hypertext Transfer Protocol (HTTP)

To HTTP είναι η κύρια μέθοδος που χρησιμοποιούν τα πρωτόκολλα του Παγκόσμιου Ιστού για να μεταφέρουν δεδομένα ανάμεσα σε έναν εξυπηρετητή και ένα πελάτη. Πριν τον Παγκόσμιο Ιστό και το HTTP, το FTP ήταν το κύριο πρωτόκολλο εισόδου/εξόδου που χρησιμοποιούνταν για τη μεταφορά αρχείων στο διαδίκτυο.

Το HTTP είναι ένα απλό, μικρό και γρήγορο πρωτόκολλο εισόδου/εξόδου το οποίο καταλαβαίνει τα URLs και χρησιμοποιείται σε περιβάλλοντα υπερκειμένου/ υπερμέσων. Δεν έχει διαφορετικές καταστάσεις σε αντίθεση με το FTP και χρησιμοποιεί λίγες εντολές. Επίσης χρησιμοποιεί MIME κωδικοποίηση υποστηρίζοντας έτσι πολλαπλά formats.

To HTTP είναι ένα πρωτόκολλο πελάτη/εξυπηρετητή και ακολουθεί το μοντέλο αίτησης/απόκρισης. H λειτουργία του βασίζεται στη σύνδεση ενός HTTP πελάτη (συνήθως είναι ένας φυλλομετρητής Παγκόσμιου Ιστού - Web browser) με έναν HTTP εξυπηρετητή (συνήθως είναι ένας εξυπηρετητής Παγκόσμιου Ιστού αλλά μπορεί να είναι ένας proxy ή ένας gateway εξυπηρετητής) χρησιμοποιώντας ένα URL και απαιτώντας κάποιο πόρο, όπως ένα HTML αρχείο. Τα δεδομένα που μεταφέρονται είναι σπασμένα σε δύο κομμάτια, στα κυρίως δεδομένα (είναι σε

25

Page 26: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

MIME format) και στις πληροφορίες που είναι απαραίτητες για τη μεταφορά ανάμεσα στον πελάτη και τον εξυπηρετητή. Παραδοσιακά η «συνομιλία» ανάμεσα στον πελάτη και τον εξυπηρετητή χρησιμοποιεί την θύρα 80, παρόλα αυτά μπορούν να χρησιμοποιηθούν και άλλες θύρες αν αυτές οριστούν στο URL Επιπλέον το HTTP μπορεί να χρησιμοποιηθεί και με άλλα πρωτόκολλα εκτός του TCP/IP.

H έκδοση του HTTP που αυτή τη στιγμή χρησιμοποιείται είναι η 1.1 (http://www.w3.org/Protocols/HTTP/), η οποία και υποστηρίζεται από το σύνολο των εξυπηρετητών καθώς και των φυλλομετρητών Παγκόσμιου Ιστού.

Μερικά από τα κυριότερα χαρακτηριστικά αυτής της έκδοσης είναι τα ακόλουθα:

Χρησιμοποιεί λιγότερες TCP συνδέσεις σε σχέση με το HTTP 1.0

Υποστηρίζει συμπίεση και αποσυμπίεση των δεδομένων που μεταφέρονται.

Υποστηρίζει πολλαπλές γλώσσες.

Υποστηρίζει μεταφορά ενός κομματιού ενός αρχείου.

Υποστηρίζει virtual hosting.

26

Page 27: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

3 ΚΕΦΆΛΑΙΟ 3: ΠΡΩΤΌΚΟΛΛΑ ΚΑΙ ΠΡΌΤΥΠΑ ΒΑΣΙΚΏΝ ΥΠΗΡΕΣΙΏΝ ΤΟΥ ΔΙΑΔΙΚΤΎΟΥ

3.1 Διαχείριση

3.1.1 Echo

Το πρωτόκολλο Echo χρησιμοποιείται για τον έλεγχο των απωλειών σε πακέτα στο υλικό του δικτύου και των κόμβων. Διάφοροι πόροι του δικτύου όπως ξενιστές, δρομολογητές, εξυπηρετητές υποστηρίζουν το πρωτόκολλο για διαγνωστικούς λόγους. Η λειτουργία του πρωτοκόλλου αποτελείται από την αποστολή μίας αίτησης από το τοπικό σύστημα και την επιστροφή της απάντησης από ένα απομακρυσμένο. Η echo-αίτηση (ERQ, type code 30) χρησιμοποιείται για την εύρεση προβλημάτων σε ένα απομακρυσμένο κόμβο. Όταν το σύστημα βρίσκεται σε λειτουργία, επιστρέφει με μία απάντηση (ERP, type code 31), η οποία περιέχει και ολόκληρη την αίτηση. Λεπτομέρειες για την λειτουργία του πρωτοκόλλου είναι διαθέσιμες στα RFC 862 και RFC 1575.

3.1.2 Ping

Το Ping είναι μία μέθοδος για τον εντοπισμό της διαθεσιμότητας, του εύρους ζώνης και της απόδοσης ενός απομακρυσμένου πόρου του δικτύου. Θεωρείται ότι αποτελεί ακρωνύμιο των λέξεων “Packet INternet Groper”.

Μία μέθοδος για την υλοποίηση του Ping είναι χρησιμοποιώντας το Internet Control Message Protocol echo μήνυμα, ή με τη χρήση του echo πρωτοκόλλου.

Μία εφαρμογή Ping συνήθως στέλνει πολλαπλά πακέτα σε έναν εξυπηρετητή. Η εφαρμογή παρακολουθεί και σημειώνει το χρόνο επιστροφής κάθε πακέτου καθώς και το ποσοστό επιτυχίας ή αποτυχίας. Περισσότερες πληροφορίες στο RFC 1574.

3.1.3 Traceroute

Το Traceroute είναι παρόμοιο με το Ping παρουσιάζοντας λεπτομερής πληροφορία για τις διαδρομές που τα πακέτα διασχίζουν.

Τα πακέτα ταξιδεύουν μεσώ μιας πληθώρας δρομολογητών και δικτύων κορμού πριν φτάσουν στο τελικό τους προορισμό. Ένα πακέτο απάντησης συνήθως διασχίζει διαφορετική διαδρομή. To Traceroute παρουσιάζει την διαδρομή, που ακολουθούν τα πακέτα του αποστολέα, μέχρι να φτάσουν στον παραλήπτη.

Μία υλοποίηση της εφαρμογής βασίζεται στην αποστολή μίας ακολουθίας πακέτων με αυξανόμενες τιμές του πεδίου time-to-live (TTL), δηλαδή του μέγιστου αριθμού των hops που ένα πακέτο μπορεί να κάνει. Οι τιμές αυξάνονται μέχρι το πακέτο να φτάσει στον τελικό παραλήπτη. Αν και αυτός ο τρόπος υλοποίησης είναι απλός και χρησιμοποιείται ευρύτατα, παράγει ένα μεγάλο πλήθος πακέτων. Ένας άλλος τρόπος υλοποίησης πιο αποδοτικός είναι χρησιμοποιώντας την traceroute επιλογή του IP, σε συνδυασμό με το ICMP echo πακέτο. (RFC 1393)

3.1.4 Whois, Whois++

Είναι πρωτόκολλο για την εύρεση πληροφορίας σχετικά με δίκτυα, domains και οργανισμούς. Η υπηρεσία whois τρέχει σε μία σειρά από εξυπηρετητές του διαδικτύου, οι οποίοι μετά από μία αίτηση ενός πελάτη στέλνουν πληροφορίες

27

Page 28: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

σχετικά με το όνομα του εξυπηρετητή, πληροφορίες σχετικά με τους οργανισμούς, διαχειριστές και IP διευθύνσεις. Είναι παρόμοιο με το finger πρωτόκολλο, η διαφορά έγκειται στο ότι το finger τρέχει σε όλους τους εξυπηρετητές ενώ το whois μόνο από μερικούς. Έχει σχεδιαστεί να υποστηρίζει απλές ερωτήσεις. Στα μέσα του 1992 το πρωτόκολλο επεκτάθηκε στο Whois++. Οι κύριες αλλαγές έγιναν στη επιβολή μίας δομής στην πληροφορία που επιστρέφεται από τον εξυπηρετητή και τη δυνατότητα για επικοινωνία μεταξύ εξυπηρετητών. Περισσότερες πληροφορίες στα RFC 1913, 1913, 1834 και 1835.

3.2 Αναζήτηση

Πριν την εξάπλωση των πρωτοκόλλων του Παγκόσμιου Ιστού μία ποικιλία από μεθόδους υπήρχε για την αναζήτηση εγγράφων στο διαδίκτυο.

1. Archie: ένα πληροφοριακό σύστημα σχεδιασμένο για την αναζήτηση σε δεδομένα αποθηκευμένα σε ftp εξυπηρετητές.

2. Gopher: η πληροφορία παρουσιάζεται σε μία ιεραρχία (εξυπηρετητές, καταλόγους, υποκαταλόγους και αρχεία).

3. Veronica: πρόκειται για ένα σύστημα αναζήτησης σε Gopher εξυπηρετητές.

4. Wide Area Information Server (WAIS): ένα σύστημα για αναζήτηση με βάση απλού κειμένου.

3.3 Μεταφορά Αρχείων

3.3.1 File Transfer Protocol

Το FTP είναι το δημοφιλέστερο πρόγραμμα για την μεταφορά αρχείων μεταξύ υπολογιστών. To FTP χρησιμοποιεί το TCP για την αξιόπιστη μεταφορά δεδομένων. Υποστηρίζει την πιστοποίηση ταυτότητας του χρήστη. Το RFC 959 ορίζει το μοντέλο για το FTP όπως φαίνεται στο παρακάτω σχήμα.

Σχήμα 3.1 FTP user/server model

28

Page 29: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

3.3.2 Trivial File Transfer Protocol

Όπως το όνομα φανερώνει, πρόκειται για έναν απλό μηχανισμό μεταφοράς αρχείων μεταξύ δύο υπολογιστών. Χρησιμοποιεί το UDP (User Datagram Protocol) για την μεταφορά των δεδομένων. Έχει δυνατότητες μόνο μεταφοράς αρχείων και όχι περιήγησης μέσα σε καταλόγους. (RFC 1350)

3.4 Ηλεκτρονικό Ταχυδρομείο

Ένα πλήθος από διάφορα πρωτόκολλα συνεργάζονται για την αποστολή την παράδοση ενός ηλεκτρονικού μηνύματος. Μεσώ ενός πελάτη ηλεκτρονικού ταχυδρομείου, που αναφέρεται ως user agent, στέλνεται ένα ηλεκτρονικό έγγραφο στον εξυπηρετητή, συνήθως μεσώ τοπικού δικτύου ή dial-up σύνδεσης. Ο εξυπηρετητής ηλεκτρονικού ταχυδρομείου στον οποίο συνδέεται ο χρήστης αποτελεί τον home ή outgoing server και ο οποίος αναλαμβάνει να διανείμει τα e-mails του χρήστη. Σ’ αυτόν συνήθως απευθύνονται και τα e-mails που προορίζονται για τον χρήστη. Ο εξυπηρετητής προωθεί το μήνυμα σε άλλους εξυπηρετητές με τη βοήθεια των Mail Transfer Agents (MTA). Ένα μήνυμα μπορεί να διασχίσει πολλούς MTAs μέχρι να φτάσει στον εξυπηρετητή στον οποίο ο χρήστης στον οποίο απευθύνεται έχει λογαριασμό. Το Σχήμα 3.2 δείχνει αυτή την διαδικασία.

Σχήμα 3.2

Σε σχέση με το αν το πρόγραμμα του χρήστη βρίσκεται συνέχεια ή όχι σε σύνδεση με τον εξυπηρετητή υπάρχουν τριών ειδών τρόποι λειτουργίας.

1. Offline

Ο πελάτης συνδέεται με τον εξυπηρετητή κατά διαστήματα και ελέγχει αν υπάρχουν νέα μηνύματα. Αν ναι, τότε τα μεταφέρει στον υπολογιστή του χρήστη και συνήθως τα σβήνει από τον εξυπηρετητή. Οποιαδήποτε επιπλέον επεξεργασία γίνεται μόνο στον υπολογιστή του χρήστη. Αυτό το μοντέλο λειτουργίας χρησιμοποιείται από το Post Office Protocol.

2. Online

Ο πελάτης εγκαθιστά με σύνδεση με τον εξυπηρετητή και η επεξεργασία των μηνυμάτων λαμβάνει χώρα κατά την διάρκεια της συνόδου. Η επεξεργασία γίνεται στον εξυπηρετητή ενώ ο πελάτης στέλνει τις εντολές. Παράδειγμα πρωτοκόλλου που λειτουργεί με αυτόν τον τρόπο είναι το IMAP.

3. Disconnected

29

Page 30: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Αποτελεί ένα υβριδικό μοντέλο των δύο προηγούμενων. Ο πελάτης συνδέεται με τον εξυπηρετητή μεταφέρει ορισμένα επιλεγμένα μηνύματα και τα επεξεργάζεται offline. Σε κάποιο στάδιο αργότερα, ο πελάτης συνδέεται πάλι και μεταφέρει τις αλλαγές. Το IMAP μπορεί να λειτουργήσει και σύμφωνα με αυτό το μοντέλο.

3.4.1 Simple Mail Transfer Protocol (SMTP)

Πρόκειται για το πρωτόκολλο που είναι υπεύθυνο για την μεταφορά των μηνυμάτων. Το SMTP εξασφαλίζει την μεταφορά από τον πελάτη στον εξυπηρετητή καθώς και την ανταλλαγή των μηνυμάτων μεταξύ των εξυπηρετητών. Η λειτουργία του βασίζεται στο μοντέλο αίτησης-απόκρισης. Οι εντολές-αιτήσεις και οι αποκρίσεις γίνονται σε ASCII κείμενο. Οι αποκρίσεις περιέχουν και μία τριψήφια αριθμητική τιμή που υποδεικνύει κατάσταση. Η τιμή αυτή μπορεί να χρησιμοποιηθεί για την λειτουργία ενός αυτομάτου.

Το SMTP βασίζεται στο TCP. Είναι σχεδιασμένο να μεταφέρει με αποδοτικό τρόπο πολλαπλά μηνύματα σε ένα ή πολλούς παραλήπτες μεσώ μίας σύνδεσης πελάτη/εξυπηρετητή. Το RFC 821 περιγράφει την λειτουργία του. Το RFC 822 περιγράφει την μορφή και την δομή του μηνύματος.

Οι εξυπηρετητές δρομολογούν τα μηνύματα βασιζόμενοι στο Domain Name Service (DNS) των παραληπτών.

3.4.2 Multipurpose Internet Mail Extensions (MIME)

Το RFC 822 περιγράφει την δομή του μηνύματος που μεταφέρεται με το SMTP. Λόγω αδυναμιών αυτής της δομής τα RFCs 2045 ως 2049 ορίζουν τα Multipurpose Internet Mail Extensions, μία εναλλακτική περιγραφή της δομής του μηνύματος.

Πριν το MIME το ηλεκτρονικό ταχυδρομείο ήταν περιορισμένο στη μετάδοση μόνο δεδομένων ASCII. Το MIME επιτρέπει την μεταφορά Βinary δεδομένων.

Ορίζονται έξι βασικοί τύποι δεδομένων που το σώμα ενός μηνύματος μπορεί να περιέχει. Καθένας από αυτούς μπορέι να χωρίζεται σε άλλες κατηγορίες τύπων. Κάθε μήνυμα μπορεί να περιέχει μέχρι 64KB δεδομένα. Οτιδήποτε ξεπερνάει αυτό το μέγεθος πρέπει να τεμαχιστεί και να συναρμολογηθεί στον παραλήπτη. Το ΜIME επιτρέπει αναδρομή με άλλα λόγια, ένα μήνυμα μπορεί να περιέχει ένα άλλο MIME μήνυμα κ.ο.κ. Οι έξι τύποι δεδομένων είναι Text (κείμενο), Image (εικόνα), Audio (ήχος), Application (οποιαδήποτε άλλα binary δεδομένα), Structured (μήνυμα που περιέχει συνδυασμό των προηγούμενων τύπων) και Message (μήνυμα που περιέχει άλλα μηνύματα).

3.5 Hypertext Transfer Protocol (HTTP)

To HTTP είναι η κύρια μέθοδος που χρησιμοποιούν τα πρωτόκολλα του Παγκόσμιου Ιστού για να μεταφέρουν δεδομένα ανάμεσα σε έναν εξυπηρετητή και ένα πελάτη. Πριν τον Παγκόσμιο Ιστό και το HTTP, το FTP ήταν το κύριο πρωτόκολλο εισόδου/εξόδου που χρησιμοποιούνταν για τη μεταφορά αρχείων στο διαδίκτυο.

Το HTTP είναι ένα απλό και γρήγορο πρωτόκολλο εισόδου/εξόδου το οποίο καταλαβαίνει τα URLs και χρησιμοποιείται σε περιβάλλοντα υπερκειμένου/ υπερμέσων. Δεν έχει διαφορετικές καταστάσεις σε αντίθεση με το FTP και χρησιμοποιεί λίγες εντολές. Επίσης χρησιμοποιεί MIME κωδικοποίηση υποστηρίζοντας έτσι διάφορους τύπους δεδομένων.

30

Page 31: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

To HTTP είναι ένα πρωτόκολλο πελάτη/εξυπηρετητή και ακολουθεί το μοντέλο αίτησης/απόκρισης. H λειτουργία του βασίζεται στη σύνδεση ενός HTTP πελάτη (συνήθως είναι ένας φυλλομετρητής Παγκόσμιου Ιστού - Web browser) με έναν HTTP εξυπηρετητή (συνήθως είναι ένας εξυπηρετητής Παγκόσμιου Ιστού αλλά μπορεί να είναι ένας proxy ή ένας gateway εξυπηρετητής) χρησιμοποιώντας ένα URL και απαιτώντας κάποιο πόρο, όπως ένα HTML αρχείο. Τα δεδομένα που μεταφέρονται είναι σπασμένα σε δύο κομμάτια, στα κυρίως δεδομένα (είναι σε MIME format) και στις πληροφορίες που είναι απαραίτητες για τη μεταφορά ανάμεσα στον πελάτη και τον εξυπηρετητή. Παραδοσιακά η «συνομιλία» ανάμεσα στον πελάτη και τον εξυπηρετητή χρησιμοποιεί την θύρα 80, παρόλα αυτά μπορούν να χρησιμοποιηθούν και άλλες θύρες αν αυτές οριστούν στο URL Επιπλέον το HTTP μπορεί να χρησιμοποιηθεί και με άλλα αξιόπιστα πρωτόκολλα εκτός του TCP/IP.

3.5.1 Μυνήματα

Μετά από αίτηση (request message) ενός πελάτη ο εξυπηρετητής αποκρίνεται με ένα μήνυμα (response message). Τα μηνύματα αίτησης έχουν μία γραμμή (Request Line) που περιέχει την αίτηση, ενώ τα μηνύματα απόκρισης περιέχουν μία γραμμή με την κατάσταση της απάντησης (Status Line) και το σώμα του μηνύματος περιέχει τα δεδομένα που ζητήθηκαν.

3.5.2 Εντολές

Σχετικά με τα υπόλοιπα πρωτόκολλα , το HTTP έχει μόνο μερικές εντολές, οι οποίες είναι επίσης γνωστές ως μέθοδοι (methods). Μόνο τρεις –GET, HEAD, POST– είναι απαραίτητες σε μία υλοποίηση του πρωτοκόλλου. Τέσσερις άλλες μέθοδοι –PUT, DELETE, LINK, UNLINK– επίσης ορίζονται.

GET

H GET μέθοδος ανακτά ένα πόρο από τον εξυπηρετητή και τον επιστρέφει στον πελάτη. Η σύνταξη της εντολής είναι η ακόλουθη:

GET <URL> HTTP/1.0

Το HTTP ορίζει και μία σειρά από πεδία επικεφαλίδας, που μπορούν να ακολουθούν μία εντολή αίτησης ή απόκρισης.

HEAD

Η εντολή HEAD είναι παρόμοια με τη εντολή GET, αλλά επιστρέφει μόνο πληροφορία για έναν πόρο και όχι τα πραγματικά δεδομένα (κάποιο αρχείο).

POST

Ενώ οι δύο προηγούμενες εντολές ζητούν δεδομένα από τον εξυπηρετητή, η εντολή POST στέλνει δεδομένα από τον πελάτη στον εξυπηρετητή.

3.5.3 HTTP 1.1

H έκδοση του HTTP που αυτή τη στιγμή χρησιμοποιείται είναι η 1.1, η οποία και υποστηρίζεται από το σύνολο των εξυπηρετητών καθώς και των φυλλομετρητών Παγκόσμιου Ιστού.

Μερικά από τα κυριότερα χαρακτηριστικά αυτής της έκδοσης είναι τα ακόλουθα:

Χρησιμοποιεί λιγότερες TCP συνδέσεις σε σχέση με το HTTP 1.0

Υποστηρίζει συμπίεση και αποσυμπίεση των δεδομένων που μεταφέρονται.

31

Page 32: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Υποστηρίζει πολλαπλές γλώσσες.

Υποστηρίζει μεταφορά ενός κομματιού ενός αρχείου.

Υποστηρίζει virtual hosting.

3.5.4 Χρήσιμες Διευθύνσεις

HTTP specification

http :// www . w 3. org / Protocols / HTTP

32

Page 33: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

4 ΚΕΦΆΛΑΙΟ 4: INTERNET PROTOCOL VERSION 6 (IPV6)

Το υπάρχων IP (IP version 4 – IPv4) σιγά σιγά αποδεικνύεται ότι είναι ανεπαρκές για τις σημερινές ανάγκες. Σε αυτό το γεγονός συμβάλει κατά ένα πολύ μεγάλο βαθμό και η αλματώδης εξάπλωση του διαδικτύου. Τα κύρια προβλήματα του IPv4 είναι τα ακόλουθα:

Παρέχει μόνο 32 bits για τη διευθυνσιοδότηση.

Τελειώνουν οι διευθύνσεις του δικτύου.

Οι πίνακες δρομολόγησης όσο πάει γίνονται και μεγαλύτεροι.

Δεν δίνει δυνατότητες σε εφαρμογές που απαιτούν ποιοτική εξυπηρέτηση όπως είναι οι πολυμεσικές εφαρμογές όπου η μεταφορά μεγάλου όγκου δεδομένων σε σύντομο χρονικό διάστημα είναι σημαντική.

Δεν εξυπηρετεί με τον καλύτερο τρόπο εφαρμογές που απαιτούν υψηλά επίπεδα ασφάλειας.

Εξαιτίας των παραπάνω προβλημάτων η IETF ξεκίνησε ένα καινούριο έργο για τη δημιουργία ενός καινούργιου IP πρωτοκόλλου στις αρχές της δεκαετίας του 1990, από το οποίο προέκυψαν οι λειτουργικές προδιαγραφές αυτού που ονομάζεται IP Next Generation (IPng). Το καινούριο πρωτόκολλο πήρε επίσημα το όνομα Internet Protocol version 6 (IPv6).

Μερικές από τις σημαντικότερες διαφορές του IPv6 σε σχέση με το IPv4 είναι οι ακόλουθες:

Παρέχει πολύ μεγαλύτερο χώρο διευθύνσεων. Οι διευθύνσεις είναι μήκους 128 bits παρέχοντας έτσι 296 περισσότερες διευθύνσεις σε σχέση με το IPv4.

Παρέχει πολύ γρηγορότερη επεξεργασία επικεφαλίδων από τους δρομολογητές. Παρόλο που η επικεφαλίδα σε αυτή την περίπτωση είναι μεγαλύτερη (40 bytes για το IPv6 σε σχέση με τα 20 bytes του IPv4), έχει λιγότερα πεδία (8 για το IPv6 σε σχέση με τα 12 του IPv4).

Παρέχει μηχανισμούς πιστοποίησης και ασφάλειας για το IP πακέτο.

Παρέχει τρόπους για labeling του IP πακέτων που χρειάζονται ιδιαίτερη μεταχείριση. Τυπικές εφαρμογές που χρησιμοποιούν αυτό το μηχανισμό είναι οι πολυμεσικές και οι εφαρμογές πραγματικού χρόνου.

4.1 Διευθύνσεις

Οι διευθύνσεις του πρωτοκόλλου IPv6 έχουν μέγεθος 128 bit. Το πρωτόκολλο αναθέτει τις διευθύνσεις σε intrerfaces και όχι σε κόμβους του δικτύου. Ένας κόμβος μπορεί να έχει ένα ή περισσότερα intreface και συνεπώς μία ή περισσότερες διευθύνσεις. Επίσης σε ένα μοναδικό interface μπορούν να ανατεθούν περισσότερες από μία διευθύνσεις.

Υπάρχουν τρεις κατηγορίες IP διευθύνσεων:

1. Unicast: προσδιορίζει ένα interface. Ένα πακέτο με προορισμό μία unicast διεύθυνση παραδίδεται μόνο στο interface με τη συγκεκριμένη διεύθυνση.

33

Page 34: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

2. Anycast: προσδιορίζει ένα σύνολο από interfaces (που συχνά ανήκουν σε διαφορετικούς κόμβους). Ένα πακέτο το οποίο αποστέλλεται σε μία anycast διεύθυνση, παραδίδεται σε ένα από τα interfaces που προσδιορίζονται από την διεύθυνση (συγκεκριμένα στο «πλησιέστερο» interface σύμφωνα με το τρόπο μέτρησης της απόστασης του πρωτοκόλλου δρομολόγησης).

3. Multicast: όπως και μία anycast διεύθυνση, προσδιορίζει ένα σύνολο από interfaces (που συχνά ανήκουν σε διαφορετικούς κόμβους).Το πακέτο όμως παραδίδεται σε όλα τα interfaces που προσδιορίζονται από την συγκεκριμένη διεύθυνση.

Δεν υπάρχουν broadcast διευθύνσεις στο IPv6 αφού η λειτουργία τους υπερκαλύπτεται από τις multicast.

Επιπλέον, το IPv6 παρέχει δύο μηχανισμούς για την δυναμική ανάθεση των διευθύνσεων. Ο πρώτος είναι παρόμοιος με το Dynamic Host Configuration Protocol (DHCP), στο οποίο ένας πελάτης στέλνει μία αίτηση σε έναν εξυπηρετητή υπεύθυνο να αναθέτει διευθύνσεις από ένα σύνολο προκαθορισμένων τιμών. Ο εξυπηρετητής διατηρεί πληροφορίες για την κατάσταση του δικτύου και αναθέτει μία διεύθυνση σε έναν πελάτη για ένα καθορισμένο χρονικό διάστημα. Μετά από αυτό ο πελάτης επαναλαμβάνει την αίτησή του, αν υπάρχουν αρκετές διαθέσιμες διευθύνσεις, στο πελάτη θα ανατεθεί η διεύθυνση που έλαβε από την προηγούμενη του αίτηση του.

Ο δεύτερος μηχανισμός για την δυναμική απόκτηση IP διευθύνσεων δεν χρειάζεται την διατήρηση πληροφορίας κατάστασης. Η ύπαρξη ενός μοναδικού αριθμού αναγνώρισης ενός interface, όπως μία IEEE MAC διεύθυνση μίας κάρτας δικτύου (η διεύθυνση για το υποεπίπεδο medium access control του data link επιπέδου, πχ μία Ethernet address) δίνει τη δυνατότητα για μία απλή μορφή αυτοπροσδιορισμού διευθύνσεων. Ένας κόμβος μπορεί να ανακαλύψει τη διεύθυνση του υποδικτύου στο οποίο ανήκει από τα μηνύματα του δρομολογητή που «διαφημίζουν» αυτήν την διεύθυνση. Στη συνέχεια ο κόμβος μπορεί να δημιουργήσει μία IPv6 διεύθυνση με την ένωση της διεύθυνσης του υποδικτύου και της IEEE MAC διεύθυνσής του.

4.2 Αλφαριθμητική αναπαράσταση των Διευθύνσεων

Υπάρχουν τρεις μορφές αναπαράστασης των IPv6 διευθύνσεων:

ο πιο δημοφιλής μορφή είναι η x : x : x : x : x : x : x : x, όπου τα x είναι δεκαεξαδικές τιμές των 16bit. Παραδείγματα :

FEDC:BA98:4798:8798:FEDC:BA98:78D9:3425

1080:0:0:0:8:800:200C:417A

Λόγω της μεθόδου κατανομής ορισμένων τύπων IPv6 διευθύνσεων, θα είναι πολύ κοινή η ύπαρξη διευθύνσεων που θα αποτελούνται από πολλά μηδενικά πεδία στη σειρά. Για να γίνει η γραφή αυτών των διευθύνσεων πιο πρακτική χρησιμοποιείται το σύμβολο "::" το οποίο αντικαθιστά πολλαπλά μηδενικά 16bit πεδία και μπορεί να χρησιμοποιηθεί μόνο μία φορά σε μία διεύθυνση. Μερικά παραδείγματα:

1080:0:0:0:8:800:200C:417A unicast

FF01:0:0:0:0:0:0:43 multicast

0:0:0:0:0:0:0:1 loopback

0:0:0:0:0:0:0:0 unspecified

34

Page 35: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

μπορούν να αναπαρασταθούν ως:

1080::8:800:200C:417A

FF01::43

::1

::

Μία εναλλακτική μορφή η οποία θα φανεί χρήσιμη σε μικτά περιβάλλοντα IPv4 και IPv6 κόμβων είναι x: x: x: x: x: x: d.d.d.d, ;όπου τα x είναι δεκαεξαδικές τιμές ένω τα d δεκαδικές τιμές για τα 4 τελευταία bytes της διεύθυνσης, δηλαδή η κανονική αναπαράσταση σε IPv4. Παραδείγματα :

0:0:0:0:0:0:13.1.68.3

ή στη πιο συμπτυγμένη μορφή ::13.1.68.3

4.3 Unicast Διευθύνσεις

Το Σχήμα 4.3 δείχνει τους διάφορους τύπους των unicast διευθύνσεων. Κάθε unicast διεύθυνση αποτελείται από 128bits.

128bits

3 bits N bits M bits O bits P bits Υπόλοιπα

010 REG ID Provider ID Subscriber ID

Subnet ID Interface ID

Provider-based address

10 bits N bits Υπόλοιπα

1111111010 Bits set to 0 Interface ID

Site-local-use address

10 bits N bits Υπόλοιπα

1111111010 Bits set to 0 Interface ID

Link-local-use address

Σχήμα 4.3 Σχηματική Παρουσίαση των Unicast Διευθύνσεων

Σε κάθε παροχεά Internet ανατίθεται ένα σύνολο από provider-based διευθύνσεις και αυτός με την σειρά του αναθέτει αυτές τις μοναδικές παγκοσμίως διευθύνσεις στους συνδρομητές του.

Οι Site-local-use διευθύνσεις θα χρησιμοποιηθούν από οργανισμούς που θέλουν να στηρίξουν την εσωτερική τους επικοινωνία σε πρωτόκολλα του Διαδικτύου χωρίς την σύνδεση με το Διαδικτύο. Αυτές οι διευθύνσεις μπορούν εύκολα να αναβαθμιστούν σε μοναδικές παγκοσμίως διευθύνσεις αν αυτός ο οργανισμός αποφασίσει να συνδεθεί με το διαδίκτυο. Αυτή η αναβάθμιση μπορεί να γίνει αυτόματα χωρίς να

35

Page 36: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

χρειάζεται η επίπονη διαδικασία αλλαγής των διευθύνσεων σε κάθε κόμβο, όπως θα συνέβαινε στο IPv4.

Ο τελευταίος τύπος διευθύνσεων είναι οι link-local-use που θα χρησιμοποιούνται από υπολογιστές που συνδέονται μέσω μίας μονής επικοινωνιακής γραμμής, όπως μίας ISDN γραμμής.

4.4 Multicast Διευθύνσεις

Το IPv6 προσφέρει μεγαλύτερη ποικιλία mulicast διευθύνσεων από το IPv4. Κάθε multicast διεύθυνση αποτελείται από 128bits, στο παρακάτω σχήμα φαίνονται τα πεδία μία τέτοιας διεύθυνσης.

128bits

8 bits 4 bits 4 bits 112 bits

11111111 Flags Scope Group ID

Σχήμα 4.4 Multicast Διεύθυσνη

Μια IPv6 multicast διεύθυνση έχει 1 στα πρώτα 8 bits. Το πεδίο flags αποτελείται από 4 bits, τα 3 πρώτα είναι δεσμευμένα για μελλοντική χρήση με τιμή 0. Το τελευταίο αν περιέχει την τιμή 0 υποδεικνύει μία μόνιμη (γνωστη) multicast διεύθυνση, ενώ αν περιέχει 1 υποδεικνύει μία προσωρινή multicast διεύθυνση. Το πεδίο scope αποτελείται από 4 bit και προσδιορίζει τη φύση και το εύρος της διεύθυνσης. Οι πιθανές τιμές φαίνονται στον παρακάτω πίνακα.

Τιμή Περιγραφή

0 Reserved

1 Node-local-scope

2 Link-local-scope

3-4 Unassigned

5 Site-local-scope

6-7 Unassigned

8 Organization-local-scope

9-E Unassigned

F Reserved

4.5 Anycast Διευθύνσεις

Το IPv6 εισάγει την έννοια των anycast διευθύνσεων, οι οποίες είναι παρόμοιες με τις multicast όσο αφορά το ότι ανατίθενται σε περισσότερα από ένα interface. Οι anycast διευθύνσεις κατανέμονται από το χώρο των unicast και δεν μπορούν να διακριθούν από αυτές. Όταν μία unicast διεύθυνση ανατίθεται σε περισσότερα από ένα interface, τότε γίνεται μία anycast διεύθυνση, οι κόμβοι στους οποίου γίνεται η ανάθεση πρέπει να ενημερωθούν ότι αυτή η διεύθυνση είναι anycast.

36

Page 37: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

4.6 Επικεφαλίδα IPv6

Οι επικεφαλίδες των IPv6 πακέτων έχουν σταθερό μέγεθος σε αντίθεση αυτών του Ipv4. Στο Σχήμα 4.5 φαίνονται τα πεδία ενός τέτοιου πακέτου.

Version Priority Flow Label

Payload Length Next Header Hop Limit

Source IP Address

Destination IP address

Σχήμα 4.5 Οι επικεφαλίδα του IPv6

Το πεδίο Version αποτελείται από 4 bits και η τιμή του είναι 6 φανερώνοντας την έκδοση του πρωτοκόλλου.

Το πεδίο Priority αποτελείται και αυτό από 4 bits και επιτρέπει να προσδιορίσει η πηγή προτεραιότητες ανάμεσα στα πακέτα που στέλνει. Τιμές από το 0 ως το 7 υποδεικνύουν ότι η εφαρμογή που δημιούργησε το πακέτο υλοποιεί κάποιο μηχανισμό αποφυγής συμφόρησης του δικτύου ανάλογα με τις μεταβαλλόμενες συνθήκες του δικτύου. Οι τιμές φαίνονται στο παρακάτω πίνακα.

Τιμή Περιγραφή

0 Uncharacterized

1 Idle time or filter

2 Unattended data transfer (such as e-mail)

3 Reserved

4 Attended data transfer (HTTP and FTP)

5 Reserved

6 Interactive traffic (Telnet)

7 Internet Control Traffic (such as routing protocol-related packets)

Οι τιμές από 8 ως 15 δηλώνουν ότι η κυκλοφορία δεν προσαρμόζεται ανάλογα με τις συνθήκες του δικτύου. Οι χαμηλότερες τιμές χρησιμοποιούνται για πακέτα που η πηγή ανέχεται να χάσει για παράδειγμα, μία εφαρμογή μπορεί να αναθέσει προτεραιότητα 8 για πακέτα βίντεο και 15 για πακέτα ήχου, δηλώνοντας ότι προτιμά να χάσει μερικά πακέτα βίντεο από ήχο.

Το πεδίο Flow Control αποτελείται από 24 bits και χρησιμοποιείται από την πηγή για να ζητήσει ειδική μεταχείριση από τους δρομολογητές. Το όνομα του πεδίου προέρχεται από το γεγονός ότι η ροή θεωρείται μία ακολουθία από πακέτα μεταξύ της πηγής και του παραλήπτη. Εφαρμογές πολυμέσων και πραγματικού χρόνου θα χρειαστούν αυτό το πεδίο.

Το 16bit πεδίο Payload Length περιέχει το μήκος του IP πακέτου το οποίο ακολουθεί τη σταθερή σε μήκος επικεφαλίδα. Περιλαμβάνει το μήκος όλων των επιπλέον επικεφαλίδων συν το μέγεθος των δεδομένων.

37

Page 38: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Το πεδίο Next Header αποτελείται από 8 bits και προσδιορίζει το τύπο της επικεφαλίδας που ακολουθεί αμέσως μετά την επικεφαλίδα του IPv6. Οι τιμές είναι οι ίδιες που υπάρχουν για το IPv4 και προσδιορίζονται στο RFC 1700.

Το πεδίο HOP limit αποτελείται από 8 bits και προσδιορίζει των μέγιστο αριθμό από hops (μεταβάσεις από κόμβο σε κόμβο) που το πακέτο επιτρέπεται να πραγματοποιήσει, σε κάθε κόμβο η τιμή του πεδίου μειώνεται κατά ένα. Είναι κάτι ανάλογο με το πεδίο TTL (time to live) του IPv4.

Τα δύο τελευταία πεδία έχουν μήκος 128 bit και προσδιορίζουν την διεύθυνση του αποστολέα και του παραλήπτη.

4.7 Επικεφαλίδες Επέκτασης

Το IPv6 υποστηρίζει την αποστολή κατά επιλογή επικεφαλίδων μεταξύ της κύριας επικεφαλίδας ενός πακέτο και τα δεδομένα. Στο παρακάτω σχήμα φαίνονται οι επικεφαλίδες επέκτασης του IPv6. Με αυτό το τρόπο επιτρέπεται η γρήγορη επεξεργασία των επικεφαλίδων από τους δρομολογητές, ειδικά όταν δεν υπάρχουν επιπλέον επικεφαλίδες στο πακέτο. Επίσης, επιτρέπεται η επέκταση των επικεφαλίδων μελλοντικά.

IPv6 Header

Hop By Hop Options Header

Routing Header

Fragment Header

Authentication Header

Encapsulated Security Header

Destination Options Header

Σχήμα 4.6

Η μεταβλητού μήκους Hop By Hop Options επικεφαλίδα θα πρέπει να εξετάζεται από κάθε κόμβο (συμπεριλαμβανομένου τους δρομολογητές) που το πακέτο περνάει. Μέχρι τώρα, η μοναδική χρήση αυτής της επικεφαλίδας έγκειται στην αποστολή IP πακέτων με μέγεθος πεδίου δεδομένων μεγαλύτερο των 64Kbytes.

Η επίσης μεταβλητού μεγέθους Routing επικεφαλίδα προσφέρει δυνατότητες παρόμοιες του IPv4 source routing. Η επικεφαλίδα περιέχει μία λίστα από κόμβου που το πακέτο πρέπει να διασχίσει.

Το IPv4 υποστηρίζει τεμαχισμό και συναρμολόγηση των πακέτων στο κόμβο του αποστολέα αλλά και σε ενδιάμεσους κόμβους. Το IPv6 επιτρέπει τον τεμαχισμό μόνο στον κόμβο του αποστολέα και την συναρμολόγηση των πακέτων στον κόμβο του παραλήπτη. Η επικεφαλίδα Fragmentation μήκους 8-bit διατηρεί την αναγκαία πληροφορία για την συναρμολόγηση των πακέτων.

Η ομάδα εργασίας του IETF (Internet Engieetiong Task Force) υπεύθυνη για τα χαρακτηριστικά ασφάλειας του νέου πρωτοκόλλου IP έχει ορίσει δύο επιπλέον επικεφαλίδες επέκτασης. Αυτές μπορούν να χρησιμοποιηθούν σε συνδυασμό με την επικεφαλίδα του IPv6 αλλά και με το Ipv4. Οι δύο επικεφαλίδες, η Authentication και η Encapsulated Security Payload, είναι γνωστές ως IPSec.

38

Page 39: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

4.7.1 Πιστοποίηση Ταυτότητας (Authentication)

Η μεταβλητού μήκους Authentication επικεφαλίδα επιβεβαιώνει την γνησιότητα της ταυτότητας του αποστολέα και εξασφαλίζει την ακεραιότητα των δεδομένων (integrity), δηλαδή ότι τα δεδομένα του πακέτου δεν έχουν υποστεί μετατροπές κατά την μεταφορά τους. Σημειώστε ότι η επικεφαλίδα δεν εξασφαλίζει ότι τα δεδομένα θα μπορούν να διαβαστούν μόνο από τον παραλήπτη. Η επικεφαλίδα χρησιμοποιεί το MD5 (Μessage Digest Algorithm).

4.7.2 Encapsulated Security Payload (

Είναι αυτή που εξασφαλίζει την εμπιστευτικότητα των δεδομένων. Κωδικοποιεί τα δεδομένα έτσι ώστε να μην μπορούν να κατανοηθούν παρά μόνο από τον παραλήπτη. Ανάλογα με τον αλγόριθμο που χρησιμοποιείται, μπορεί να επιβεβαιώσει και την ταυτότητα του αποστολέα.

4.7.3 Επιλογές Προορισμού (Destination Options)

Η επικεφαλίδα Destination Options είναι προαιρετική. Αν συμπεριληφθεί, περιέχει πληροφορία η οποία πρέπει να εξεταστεί από τον παραλήπτη. Οι δρομολογητές δεν χρειάζεται να ελέγξουν αυτήν την επικεφαλίδα.

4.8 Διαλειτουργικότητα του IPv6 (Interoperability)

Ένας από τους σχεδιαστικούς στόχους του IPv6 ήταν και η ομαλή μετάβαση από το IPv4 στο Ipv6. Ένας οποιοσδήποτε κόμβος του δικτύου μπορεί να δέχεται ταυτόχρονα και IPv4 και IPv6 πακέτα. Στο μηχανισμό διευθύνσεων του IPv6 έχει προβλεφθεί τρόπος για συμβατότητα με το IPv4, όπως φαίνεται στο Σχήμα 4.7.

| 96 bits | | 32bits |

0000.............................................00 IPv4 address

Σχήμα 4.7 IPv4-compatible Ipv6 address

Η IPv4-συμβατή διεύθυνση χρησιμοποιείται όταν ένα IPv6 πακέτο πρέπει να περάσει μεσώ ενός δικτύου το οποίο δεν υποστηρίζει το IPv6 αλλά μόνο το IPv4. Σε αυτήν την περίπτωση ολόκληρο το IPv6 πακέτο θα εσωκλείεται σε ένα Ipv4 πακέτο. Ειδικοί δρομολογητές θα χρησιμοποιούνται για να ενώσουν δύο Ipv6 δίκτυα μεσώ ενός μονοπατιού που υποστηρίζει μόνο IPv4. Σε κάθε δρομολογητής θα ανατίθεται μία μοναδική IPv4-συμβατή διεύθυνση.

Ένας δεύτερος τύπος διευθύνσεων επίσης έχει ορισθεί ο οποίος θα ανατίθεται σε κόμβους που δεν υποστηρίζουν το IPv6. Η μορφή αυτής της διεύθυνσης φαίνεται στο Σχήμα 4.8.

| 80bits | | 16bits | | 32bits |

00000..... FFFF IPv4 address

Σχήμα 4.8 IPv4-mapped Ipv6 address

4.9 Χρήσιμες Διευθύνσεις

IPv6 Document Library

39

Page 40: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

http://www.ipv6.org

Cisco – Internet Protocol, Version 6

http://www.cisco.com/warp/public/732/ipv6/bak614.ipv6_wp.html

40

Page 41: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

5 ΚΕΦΑΛΑΙΟ 5: Η ΓΛΏΣΣΑΣ ΠΕΡΙΓΡΑΦΗΣ ΣΕΛΙΔΩΝ HTML

5.1 Εισαγωγή

Η γλώσσα HTML είναι η γλώσσα που χρησιμοποιείται για την κατασκευή των σελίδων του παγκόσμιου ιστού. Υπάρχουν τρεις διαδοχικές εκδόσεις (1.0, 2.0, 3.0) της HTML που έχουν βασιστεί στα πρότυπα που είχε εκδώσει το W3C (World-Wide Web Consortium). Παράλληλα εταιρείες όπως η Netscape και η Microsoft προέκτειναν με δικές τους αποκλειστικά εντολές το σύνολο των εντολών που υπήρχε, με αποτέλεσμα τη δημιουργία πολλών επιπλέον εντολών που δίνουν στο χρήστη μεγαλύτερη δυνατότητα παρέμβασης στο όλο οπτικό αποτέλεσμα των εμφανιζόμενων σελίδων.

Έτσι τελικά προτάθηκε η HTML 3.2, η οποία ενσωματώνει πλήθος από τα χαρακτηριστικά που είχαν χρησιμοποιήσει αποκλειστικά και μόνο κάποιοι κατασκευαστές πελατών παγκόσμιου ιστού και προτείνει άλλα νέα. Η HTML 3.2 είναι η τελευταία έκδοση της πιο δημοφιλούς γλώσσας του Web και είναι αυτή η οποία περιγράφεται στη συνέχεια με μεγαλύτερη λεπτομέρεια. Σε επόμενο κεφάλαιο περιγράφεται η Dynamic HTML (D-HTML) που δίνει ακόμη πιο πολλά δυναμικά χαρακτηριστικά για σελίδες παγκόσμιου ιστού.

5.2 Προδιαγραφές της HTML V3.2

Η HyperText Markup Language (HTML 3.2) έγινε πρότυπο στις αρχές του 1996. Το νέο αυτό πρότυπο που εκδόθηκε από το W3C (World Wide Web Consortium) έχει γίνει αποδεκτό από τις μεγαλύτερες εταιρείες που δραστηριοποιούνται στο χώρο του Διαδικτύου και του παγκόσμιου ιστού όπως οι IBM, Microsoft, Netscape Communications Corporation, Novell, SoftQuad, Spyglass, Sun Microsystems και άλλες. Η HTML 3.2 περιλαμβάνει εξελιγμένα χαρακτηριστικά όπως πίνακες (tables), applets και ροή του κειμένου γύρω από εικόνες, ενώ είναι πλήρως συμβατή με το πρότυπο της HTML 2.0.

5.3 Η δομή των HTML σελίδων

Οι HTML σελίδες αρχίζουν με τη δήλωση <!DOCTYPE> και ακολουθούνται από τις HTML ετικέτες HEAD και BODY ως εξής:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Ο τίτλος της παρούσας σελίδας</TITLE>

.... άλλα στοιχεία που τοποθετούνται στο στοιχείο HEAD ....

</HEAD>

<BODY>

... κύριος κορμός της σελίδας ...

</BODY>

</HTML>

Στην πράξη οι ετικέτες αρχής και τέλους των HTML, HEAD και BODY μπορούν να παραλειφθούν διότι υπονοούνται από τη δήλωση του HTML 3.2 DTD. Κάθε κείμενο

41

Page 42: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

που είναι γραμμένο σε HTML 3.2 πρέπει να αρχίζει με τη δήλωση <!DOCTYPE>, η οποία είναι απαραίτητη για το διαχωρισμό του παρόντος κειμένου από κάποιο άλλο παλιότερης έκδοσης. Κάθε κείμενο HTML 3.2 πρέπει να περιέχει την ετικέτα τίτλου. Άρα το μικρότερο HTML 3.2 κείμενο μοιάζει με το ακόλουθο:

<TITLE>Οποιοδήποτε κείμενο</TITLE>

5.3.1 Το στοιχείο HEAD

Περιλαμβάνει την κεφαλή του κειμένου, αλλά είναι δυνατή η παράλειψη των ετικετών αρχής και τέλους για το HEAD.

Το στοιχείο HEAD περιλαμβάνει τις εξής ετικέτες:

TITLE Ορίζει τον τίτλο της σελίδας

ISINDEX Για απλές περιπτώσεις αναζήτησης (βλέπε PROMPT)

BASE Ορίζει τη βάση αρχής για καθορισμό των σχετικών URL

SCRIPT Καθορισμός της scripting γλώσσας

STYLE Καθορισμός Style Sheets

META Καθορισμός ζεύγους πληροφοριών όνομα και τιμή

LINK Ορισμός σχέσεων με άλλα κείμενα

Τα TITLE, SCRIPT and STYLE απαιτούν ετικέτες και αρχής και τέλους. Στα υπόλοιπα, επειδή δεν περιέχουν άλλες ετικέτες ανάμεσά τους, η χρήση ετικετών τέλους απαγορεύεται.

5.3.1.1 Το στοιχείο TITLE

Κάθε κείμενο σε HTML 3.2 πρέπει να έχει ακριβώς μία ετικέτα TITLE στην επικεφαλίδα του HEAD. Παρέχει ένα βοηθητικό τίτλο ο οποίος παρίσταται στον τίτλο του παραθύρου του απεικονιζόμενου κειμένου στον πελάτη WWW. Οι χαρακτήρες που μπορούν να βρίσκονται στην TITLE είναι οι συμβολικοί χαρακτήρες και οι χαρακτήρες διαφυγής (& και <). Δεν επιτρέπεται η χρήση άλλων ετικετών μέσα στο TITLE.

Παράδειγμα:

<TITLE>Αυτή είναι η προσωπική μου WWW σελίδα</TITLE>

5.3.1.2 Τα στοιχεία STYLE και SCRIPT

Χρησιμοποιούνται στον καθορισμό style sheets και client-side scripts (όπως θα αναφερθεί στο κεφάλαιο της Dynamic HTML). Οι φυλλομετρητές παγκόσμιου ιστού θα πρέπει να μην απεικονίζουν τα περιεχόμενα των παραπάνω στοιχείων.

5.3.1.3 Το στοιχείο ISINDEX

Το στοιχείο ISINDEX ορίζει στον φυλλομετρητή ότι θα πρέπει να απεικονίσει στο χρήστη μια γραμμή εισαγωγής δεδομένων για να εισάγει μια συμβολοσειρά προς αναζήτηση. Ο χρήστης μπορεί να εισάγει οποιουδήποτε αριθμό χαρακτήρων. Το χαρακτηριστικό PROMPT μπορεί να χρησιμοποιηθεί για πεδίο εισαγωγής δεδομένων.

Παράδειγμα:

<ISINDEX PROMPT = "Αναζήτηση Λέξης">

42

Page 43: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Η εννοιολογική σημασία του ISINDEX είναι πλήρως καθορισμένη όταν το URL βάσης είναι ένα πλήρες HTTP URL της μορφής ”http://www.upatras.gr/x.html”. Όταν ο χρήστης πατά το πλήκτρο enter (return) του πληκτρολογίου, η συμβολοσειρά που στέλνεται στον εξυπηρετητή περιέχει το URL βάσης του παρόντος κειμένου μαζί με την escaped- μορφή της συμβολοσειράς αναζήτησης. Για παράδειγμα αν η συμβολοσειρά που δόθηκε είναι η “Query String” και το URL βάσης είναι το:

http://www.domain.grτότε η αίτηση προς τον Web Server που προκύπτει είναι η:

“http://www.domain.gr/?Query+String”Θα πρέπει να σημειωθεί ότι κάθε κενός χαρακτήρας (Space Character) αντικαθίσταται με το χαρακτήρα “+” και ότι εφαρμόζονται οι γνωστοί URL κανόνες κωδικοποίησης1. Στην πράξη οι χαρακτήρες που μπορούν να εισαχθούν ως συμβολοσειρά αναζήτησης θα πρέπει να είναι σύμφωνα με την κωδικοποίηση Latin-1, διότι δεν υπάρχει μέχρι στιγμής υπάρχον μηχανισμός καθορισμού εναλλακτικού συνόλου χαρακτήρων για την αναζήτηση.

5.3.1.4 Το στοιχείο BASE

Το στοιχείο BASE δίνει τη δυνατότητα καθορισμού της βάσης των σχετικών URLs. Για παράδειγμα:

<BASE HREF="http://www.domain.gr/dir1/ ">

...

<IMG SRC="images/mypic.jpg">

Η εικόνα αναφέρεται στο εξής πλήρες URL:

http://www.domain.gr/dir1/images/mypic.jpg

5.3.1.5 Το στοιχείο META

Το στοιχείο META μπορεί να χρησιμοποιηθεί για τον καθορισμό ζευγών ονόματος/τιμής που περιγράφουν τα χαρακτηριστικά του υπερκειμένου όπως: όνομα του συγγραφέα, ημερομηνία λήξης, ένα σύνολο από λέξεις κλειδιά, κλπ. Το χαρακτηριστικό NAME καθορίζει το όνομα της οντότητας, ενώ η παράμετρος CONTENT καθορίζει την τιμή.

Για παράδειγμα:

<META NAME = "Author" CONTENT="Panagiotis B. Kappos">

<META NAME = "Keywords" CONTENT = "University of Patras, CEID Faculty, Computer Science">

Η παράμετρος HTTP-EQUIV μπορεί να χρησιμοποιηθεί στη θέση της παραμέτρου NAME και έχει ιδιαίτερη σημασία για τα κείμενα τα οποία μεταφέρονται μέσω του πρωτοκόλλου HTTP. Οι εξυπηρετητές HTTP μπορούν να χρησιμοποιήσουν την τιμή της παραμέτρου HTTP-EQUIV για τη δημιουργία ενός συμβατού με το RFC 822 header στην HTTP απάντηση2.

Για παράδειγμα:

<META HTTP-EQUIV="Expires" CONTENT="Wed, 09 Oct 1996 20:20:20 GMT+2">

θα επιστρέψει τον εξής HTTP header:

1 Για περισσότερες πληροφορίες ανατρέξτε στις προδιαγραφές του πρωτοκόλλου HTTP (διεύθυνση http://www.w3.org/Protocols/HTTP/).2 Βλέπε προδιαγραφές πρωτοκόλλου HTTP.

43

Page 44: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Expires: Wed, 09 Oct 1996 20:20:20 GMT+2

Μια μεγάλη επίσης χρησιμότητα της παραμέτρου HTTP-EQUIV είναι ο καθορισμός του πότε ένα Caching σύστημα (Browser ή Proxy Server) θα ζητήσει ξανά ένα cached κείμενο. Αν στο παραπάνω παράδειγμα θέταμε μια ημερομηνία του παρελθόντος π.χ. του έτους 1973, τότε η σελίδα του κειμένου δε θα γινόταν cache από κανένα σύστημα.

5.3.1.6 Το στοιχείο LINK

Το στοιχείο LINK παρέχει έναν ανεξάρτητο τρόπο καθορισμού σχέσεων της παρούσας σελίδας με άλλα κείμενα ή ηλεκτρονικούς πόρους πληροφόρησης. Παρόλο που το LINK είναι μέρος της HTML από την πρώτη έκδοσή της, ελάχιστοι φυλλομετρητές την εκμεταλλεύονται (οι πιο πολλοί απλά την αγνοούν).

Τα στοιχεία LINK μπορούν να χρησιμοποιηθούν με δύο τρόπους:

1) Για επιλεκτική πλοήγηση μέσω μενού όταν το στοιχείο LINK βρίσκεται στην κορυφή του κειμένου.

2) Για να ελέγχουν το πως ένα πλήθος από HTML αρχεία απεικονίζονται ως κείμενα προς εκτύπωση.

HREF

Καθορίζει το URL που δείχνει τον δεικτοδοτημένο πόρο.

REL

Η “απ’ ευθείας σχέση”.

REV

Η “αντίστροφη σχέση”. Έτσι αν υπάρχει ένα link από το κείμενο Α προς το κείμενο Β με REV= relation εκφράζει την ίδια σχέση ενός link από το Β προς το Α με REL=relation. Υπάρχει άλλο ένα είδος της σχέσης REV, όταν REV=made. Αυτή χρησιμοποιείται μερικές φορές για να καθορίσει τον κατασκευαστή της σελίδας, είτε με ένα mailto URL είτε με ένα link στην προσωπική σελίδα του κατασκευαστή.

TITLE

Μια σύντομη επεξήγηση στον δεικτοδοτημένο πόρο.

Μερικές από τις πιο συχνές σχέσεις που συναντάμε στις σελίδες είναι οι:

REL=Contents

Το link αναφέρεται σε ένα κείμενο που πρόκειται για του πίνακα περιεχομένων.

REL=Index

Το link αναφέρεται σε ένα κείμενο που παρέχει ένα δείκτη στο παρόν κείμενο.

REL=Glossary

Το link αναφέρεται σε ένα κείμενο που παρέχει ένα γλωσσάριο όρων του παρόντος κειμένου.

REL=Copyright

44

Page 45: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Το link αναφέρεται σε πληροφορίες πνευματικής ιδιοκτησίας του παρόντος κειμένου.

REL=Next

Το link αναφέρεται στο επόμενο κείμενο μιας σειράς κειμένων.

REL=Previous

Το link αναφέρεται στο προηγούμενο κείμενο μιας σειράς κειμένων.

REL=Help

Το link αναφέρεται σε ένα κείμενο βοηθείας.

REL=Bookmark

Τα Bookmarks χρησιμοποιούνται για να παρέχουν απευθείας δείκτες σε κείμενα με μεγάλο εύρος πληροφόρησης.

Για παράδειγμα:

<LINK REL=“Contents” HREF=toc.html>

<LINK REL=“Previous” HREF=doc10.html>

<LINK REL=“Next” HREF=doc12.html>

5.3.2 Το στοιχείο BODY

Μεταξύ της ετικέτας αρχής και τέλους BODY περιέχονται πλήθος από HTML στοιχεία όπως επικεφαλίδες (Headings), το στοιχείο ADDRESS, στοιχεία για ορισμό μπλοκ, στοιχεία καθορισμού κειμένου:

Οι παράμετροι για το στοιχείο BODY είναι οι:

bgcolor

Καθορίζει το χρώμα του φόντου της σελίδας.

text

Καθορίζει το χρώμα των χαρακτήρων του κειμένου.

link

Καθορίζει το χρώμα των χαρακτήρων των link που δεν έχει επισκεφτεί ακόμη ο χρήστης.

vlink

Καθορίζει το χρώμα των χαρακτήρων των link που έχει επισκεφτεί ο χρήστης.

alink

Καθορίζει το χρώμα των χαρακτήρων των link τη στιγμή που ο χρήστης κάνει click πάνω στο link.

background

Καθορίζει το URL μια εικόνας (είδους .gif ή .jpg) που θα χρησιμοποιηθεί επαναληπτικά (tile) για το σχηματισμό του φόντου της σελίδας

Τα χρώματα θα πρέπει να δίνονται με την RGB μορφή τους σε δεκαεξαδική αναπαράσταση (π.χ. LINK="#AABBCC") ή ως το όνομα του χρώματος με βάση το παρακάτω πίνακα (Σχήμα 5.9):

45

Page 46: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Όνομα Δεκαεξαδική αναπαράσταση

46

Page 47: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Black #000000

Green #008000

Silver #C0C0C0

Lime #00FF00

Gray #808080

Olive #808000

White #FFFFFF

Yellow #FFFF00

Maroon #800000

Navy #000080

Red #FF0000

Blue #0000FF

Purple #800080

Teal #008080

Fuchsia #FF00FF

Aqua #00FFFF

Σχήμα 5.9 H δεκαεξαδική RGB μορφή των χρωμάτων

Για παράδειγμα:

<BODY BGCOLOR=WHITE TEXT=BLACK LINK=RED VLINK=TEAL ALINK=GREY>

5.3.3 Block and Text level elements

Τα περισσότερα στοιχεία που τοποθετούνται στο κυρίως σώμα ενός HTML κειμένου μπορούν να ενταχθούν σε δύο κατηγορίες:

Τα στοιχεία ορισμού περιοχής (block level elements), δημιουργούν τερματισμούς παραγράφων Η1 μέχρι Η6, παραγράφους (P), οριζόντιες γραμμές (HR) και τα στοιχεία ορισμού κειμένου (text level elements), που μορφοποιούν τα στοιχεία κειμένου όπως: τα B, I και FONT δίνουν έμφαση στο κείμενο, A (συνδέσεις υπερκειμένου), IMG and APPLET (προσαρτημένα αντικείμενα) and BR (Διακοπές Γραμμών). Να σημειωθεί ότι τα περισσότερα στοιχεία ορισμού περιοχής γενικά εμπεριέχουν τα στοιχεία ορισμού κειμένου ή και άλλα στοιχεία ορισμού περιοχής, ενώ τα στοιχεία ορισμού κειμένου μπορούν να εμπεριέχουν μόνο άλλα στοιχεία ορισμού κειμένου.

Υπάρχουν έξι επίπεδα από επικεφαλίδες, από το Η1 (το πιο σημαντικό) μέχρι το Η6 (το λιγότερο σημαντικό). Είναι απαραίτητη η ύπαρξη της ετικέτας αρχής και τέλους. Οι πιο σημαντικές επικεφαλίδες αναπαρίστανται με μεγαλύτερη οικογένεια χαρακτήρων (font) από τις λιγότερο σημαντικές. Η προαιρετική παράμετρος ALIGN χρησιμοποιείται για να οριστεί ο τύπος ευθυγράμμισης (align) του κειμένου που βρίσκεται ανάμεσα στην επικεφαλίδα αρχής και τέλους.

Για παράδειγμα:

<H1 ALIGN=CENTER> ... κεντραρισμένο κείμενο ... </H1>

47

Page 48: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Η εξ’ ορισμού ευθυγράμμιση είναι προς τα αριστερά, αλλά μπορεί να αλλάξει χρησιμοποιώντας τα στοιχεία DIV ή CENTER.

5.3.4 Το στοιχείο ADDRESS

Το στοιχείο ADDRESS θα πρέπει να έχει ορισμένη την αρχή και το τέλος του και παρέχει πληροφορίες όπως την ταυτότητα του κατασκευαστή του κειμένου, τη διεύθυνση και τηλέφωνό του κατασκευαστή.

Για παράδειγμα:

<ADDRESS>

Πανεπιστήμιο Πατρών<BR>

Τμήμα Η/Υ και Πληροφορικής<BR>

Πανεπιστημιούπολη - Ρίο<BR>

Τηλ. +30 61 997585

</ADDRESS>

5.3.5 Στοιχεία περιοχής

Τα κύρια στοιχεία περιοχής (Block elements) σε ένα υπερκείμενο είναι:

P Παράγραφοι

UL Μη διατεταγμένες λίστες

OL Διατεταγμένες λίστες

DL Λίστες ορισμού

PRE εξ’ αρχής μορφοποιημένο κείμενο

DIV Χωρισμοί κειμένου

CENTER Ευθυγράμμιση κειμένου

BLOCKQUOTE quoted παράγραφος

FORM Φόρμες

ISINDEX HTML φόρμες απλού τύπου

HR οριζόντιες γραμμές

TABLE Πίνακες

Σχήμα 5.10 Τα κύρια στοιχεία περιοχής

5.3.5.1 Παράγραφοι

Το στοιχείο <P> ορίζει παραγράφους στο κείμενο. Απαιτεί την ετικέτα αρχής, ενώ η ετικέτα τέλους δεν είναι πάντα απαραίτητη, διότι τις περισσότερες φορές το τέλος μπορεί εύκολα να προσδιοριστεί από το λεκτικό αναλυτή.

Για παράδειγμα:

<P>Αυτή είναι η πρώτη παράγραφος.

<P> Αυτή είναι η δεύτερη παράγραφος.

Χρησιμοποιώντας την παράμετρο ALIGN ορίζουμε τον τύπο οριζόντιας ευθυγράμμισης του κειμένου μέσα στα όρια μιας παραγράφου. Σε περίπτωση που δεν καθοριστεί ο τύπος ευθυγράμμισης τότε υπονοείται προς τα αριστερά.

48

Page 49: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

align=left

Η παράγραφος είναι οριζόντια ευθυγραμμισμένη προς τα αριστερά

align=center

Η παράγραφος είναι κεντραρισμένη στο παρόν παράθυρο

align=right

Η παράγραφος είναι οριζόντια ευθυγραμμισμένη προς τα δεξιά

Για παράδειγμα:

<p align=center>Αυτή η παράγραφος είναι κεντραρισμένη

5.3.5.2 Λίστες

Οι λίστες μπορούν να εμπεριέχουν στοιχεία ορισμού περιοχής, κειμένου ή άλλες ένθετες λίστες

Μη διατεταγμένες λίστες

Οι μη διατεταγμένες λίστες είναι της μορφής:

<UL>

<LI> ... Πρώτο πεδίο

<LI> ... Δεύτερο πεδίο

...

</UL>

Οι ετικέτες αρχής και τέλους είναι απαραίτητες. Τα στοιχεία LI χρησιμοποιούνται για να διαχωρίσουν μεταξύ τους τα πεδία της λίστας. Το στοιχείο τέλους LI μπορεί να παραληφθεί. Τα στοιχεία LI μπορούν να περιέχουν ένθετες λίστες. Με χρήση της παραμέτρου COMPACT απαιτούμε από τον φυλλομετρητή να απεικονίσει τη λίστα σε πιο περιεκτική μορφή.

Η παράμετρος TYPE χρησιμοποιείται για να αλλάξει το είδος της εικόνας που χρησιμοποιείται μέσα στα UL και LI. Συγκεκριμένα:

l όταν <li type=disc>

n όταν <li type=square>

o όταν <li type=circle>

Διατεταγμένες λίστες

Οι διατεταγμένες λίστες είναι της μορφής:

<OL>

<LI> ... Πρώτο πεδίο

<LI> ... Δεύτερο πεδίο ...

</OL>

Η μεταβλητή START χρησιμοποιείται για να ορίσει την αρχή της ακολουθίας αριθμών (εξ’ ορισμού ισούται με 1). Μπορεί να τεθεί ακόμη και αργότερα με τη μεταβλητή VALUE στα LI στοιχεία. Οι δύο παραπάνω μεταβλητές θα πρέπει να έχουν ακέραιες τιμές. Η μεταβλητή TYPE επιτρέπει τον ορισμό των παρακάτω επιλογών:

Μεταβλητή TYPE Όνομα Είδος επιλογών

49

Page 50: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

1 Αριθμοί 1, 2, 3, ...

A Πεζοί χαρακτήρες a, b, c, ...

A Κεφαλαίοι χαρακτήρες A, B, C, ...

I Πεζοί Ρωμαϊκοί χαρακτήρες i, ii, iii, ...

I Κεφαλαίοι Ρωμαϊκοί χαρακτήρες I, II, III, ...

Σχήμα 5.11 Η μεταβλητή TYPE

Λίστες ορισμού

Οι λίστες ορισμού είναι της μορφής:

<DL>

<DT> Όνομα όρου

<DD> Ορισμός όρου

...

</DL>

Τα στοιχεία DT περιέχουν στοιχεία ορισμού κειμένου, ενώ τα στοιχεία DD μπορούν να περιέχουν επιπλέον και στοιχεία ορισμού περιοχής εκτός από επικεφαλίδες και το στοιχείο ADDRESS.

Για παράδειγμα:

<DL>

<DT>Ορισμός 1<DD>Αυτός είναι ο ορισμός του πρώτου όρου

<DT>Ορισμός 2<DD>Αυτός είναι ο ορισμός του δεύτερου όρου

</DL>

θα έπρεπε να εμφανιστεί ως εξής:

Ορισμός 1

Αυτός είναι ο ορισμός του πρώτου όρου

Ορισμός 2

Αυτός είναι ο ορισμός του δεύτερου όρου

Με χρήση της παραμέτρου COMPACT απαιτούμε από τον φυλλομετρητή την απεικόνιση σε πιο περιεκτική μορφή.

5.3.5.3 Στοιχεία DIR και MENU

Τα παραπάνω στοιχεία παρόλο που ήταν μέρος της HTML από την πρώτη έκδοση, οι φυλλομετρητές δεν διαχωρίζουν τα στοιχεία DIR και MENU, αλλά τα απεικονίζουν με μορφή αντίστοιχη με αυτή που χρησιμοποιούν για τα στοιχεία UL. Κανονικά θα έπρεπε να απεικονίζονταν τα στοιχεία DIR ως λίστες καταλόγου με πολλαπλές στήλες και τα στοιχεία MENU ως λίστες καταλόγου μια στήλης.

5.3.5.4 Εξ’ αρχής μορφοποιημένο κείμενο

Το στοιχείο PRE χρησιμοποιείται για να συμπεριλάβει εξ’ αρχής μορφοποιημένο κείμενο. Οι πελάτες χρήστη απεικονίζουν το επιλεγόμενο κείμενο με χαρακτήρες σταθερού πλάτους λαμβάνοντας υπόψη την ύπαρξη των κενών χαρακτήρων.

50

Page 51: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

5.3.5.5 XMP, LISTING και PLAINTEXT

Οι παραπάνω ετικέτες δεν χρησιμοποιούνται πια αλλά οι φυλλομετρητές θα πρέπει να τις υποστηρίζουν για λόγους συμβατότητας προς τα πίσω. Οι δημιουργοί σελίδων θα πρέπει να αποφεύγουν τη χρήση των παραπάνω ετικετών.

5.3.5.6 DIV και CENTER

Το στοιχείο DIV χρησιμοποιείται για το διαχωρισμό των κειμένων HTML σε περιοχές. Με την παράμετρο ALIGN ορίζεται ο επιθυμητός τύπος ευθυγράμμισης για όλα τα στοιχεία που βρίσκονται ανάμεσα στα όρια αρχής και τέλους του στοιχείου DIV. Δεκτές τιμές είναι οι: LEFT, CENTER ή RIGHT οι οποίες ορίζονται με ίδιο τρόπο όπως στο στοιχείο παραγράφου. Επειδή το στοιχείο DIV ορίζει μια περιοχή (block) κάθε ανοιχτή παράγραφος θα τερματιστεί.

Το στοιχείο CENTER (το οποίο ορίστηκε αυθαίρετα από την Netscape πριν την HTML 3 και διατηρείται και στην HTML 3.2 λόγο της μεγάλης διάδοσης που έχει ο WWW browser της παραπάνω εταιρείας) είναι ταυτόσημο με το DIV με παράμετρο ALIGN=CENTER.

Οι ετικέτες αρχής και τέλους είναι απαραίτητες και στο DIV και στο CENTER.

5.3.5.7 BLOCKQUOTE

Χρησιμοποιείται για να συμπεριλάβει κομμάτια λόγου, αποφθέγματα ή αναφορές σε άλλες εργασίες. Οι ετικέτες αρχής και τέλους είναι υποχρεωτικές.

5.3.5.8 FORM

Το στοιχείο φόρμα είναι από τα πιο σημαντικά αλλά συνάμα και δυσκολότερα σημεία κατασκευής δυναμικών σελίδων, που παρέχει χαρακτηριστικά που δεν θα υπήρχαν χρησιμοποιώντας μόνο ετικέτες της HTML. Ένα κείμενο μπορεί να περιέχει πολλαπλές φόρμες. Σε κάθε φόρμα θα πρέπει να ορίζεται με σαφή τρόπο η αρχή και το τέλος της, χρησιμοποιώντας τις ετικέτες αρχής και τέλους. Η πιο απλή φόρμα είναι αυτή που περιέχει το στοιχείο ISINDEX.

Μια φόρμα μπορεί να περιέχει απλά ή πολλαπλά πεδία κειμένου (text fields), radio buttons, checkboxes και μενού.

Πιο συγκεκριμένα:

action

Ορίζει το URL το οποίο θα χρησιμοποιηθεί από τον εξυπηρετητή για να επεξεργαστεί τα δεδομένα που συμπληρώθηκαν στη φόρμα. Το URL μπορεί να είναι ένα εκτελέσιμο αρχείο που θα χρησιμοποιηθεί από τον εξυπηρετητή (π.χ. “http://www.domain.gr/cgi-bin/doit”) ή ένα Mail-to URL (π.χ. “mailto:[email protected]”)

method

Όταν η παράμετρος action ορίζει μια HTTP κλήση, η παράμετρος method ορίζει τη μέθοδο αποστολής των περιεχομένων της φόρμας στον εξυπηρετητή. Μπορεί να είναι GET ή POST. Εξ’ ορισμού είναι GET.

enctype

Καθορίζει τον τύπο κωδικοποίησης των περιεχομένων της φόρμας. Εξ’ ορισμού είναι application/x-www-form-urlencoded.

51

Page 52: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

5.3.5.9 Οριζόντιος Κανόνας

Οι οριζόντιοι κανόνες (Horizontal Rule) χρησιμοποιούνται για να δείξουν μια εννοιολογική αλλαγή στο κείμενο. Οπτικά είναι μια οριζόντια γραμμή.

Οι παράμετροι του στοιχείου HR είναι:

align

Ορίζει την ευθυγράμμιση του κανόνα ως προς τα παρόντα όρια του παραθύρου απεικόνισης. Τιμές είναι οι: left, center ή right. Εξ’ ορισμού είναι η center.

noshade

Ο κανόνας δεν θα έχει τρισδιάστατη όψη και θα είναι χωρίς σκιά

size

Ορίζει το πάχος του κανόνα σε pixel.

width

Ορίζει το μήκος του κανόνα σε pixel (π.χ. width=100) ή σε ποσοστό μήκους μεταξύ του παρόντος αριστερού και δεξιού άκρου του παραθύρου (π.χ. width="30%"). Εξ’ ορισμού είναι width=100%.

5.3.5.10 Πίνακες

Οι πίνακες είναι της ακόλουθης γενικής μορφής:

<TABLE BORDER=8 CELLSPACING=5 CELLPADDING=2 WIDTH="90%">

<CAPTION> ... Τίτλος Πίνακα ... </CAPTION>

<TR><TD> πρώτο κελί</TD> <TD> δεύτερο κελί</TD></TR>

<TR> ...

...

</TABLE>

Οι παράμετροι των πινάκων είναι προαιρετικές. Εξ΄ ορισμού, οι πίνακες απεικονίζονται χωρίς οπτική απεικόνιση των ορίων τους και αυτόματα προσαρμόζονται ώστε να περιλαμβάνουν τα περιεχόμενα κάθε κελιού. Υπάρχει η δυνατότητα καθορισμού του απόλυτου πλάτους των πινάκων. Οι παράμετροι BORDER, CELLSPACING και CELLPADDING παρέχουν επιπλέον ευκολίες οπτικής απεικόνισης. Οι τίτλοι των πινάκων στο πάνω ή κάτω μέρος καθορίζονται ανάλογα με την παράμετρο ALIGN.

Κάθε γραμμή περιέχεται ανάμεσα στο στοιχείο TR, παρόλο που η ετικέτα τέλους μπορεί να παραληφθεί. Τα κελιά ορίζονται με το στοιχείο TD για δεδομένα και με το TH για τίτλους (header). Όπως και με το TR, τα παραπάνω στοιχεία τέλους μπορούν να παραληφθούν. Τα TH και TD παίρνουν ως παράμετρο τα: ALIGN και VALIGN για ευθυγράμμιση του περιεχομένου του κελιού, ROWSPAN και COLSPAN για κελιά που καλύπτουν περισσότερες από μία σειρά ή στήλη. Ένα κελί μπορεί να περιέχει πλήθος από στοιχεία περιοχής ή κειμένου, καθώς και φόρμες ή άλλους ένθετους πίνακες.

Το στοιχείο TABLE πρέπει πάντα να έχει ετικέτες αρχής και τέλους. Στη συνέχεια παρατίθενται οι παράμετροι που υποστηρίζουν οι πίνακες:

ALIGN

52

Page 53: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Παίρνει παραμέτρους μία από τις: (LEFT, CENTER ή RIGHT). Καθορίζει την οριζόντια τοποθέτηση του πίνακα σχετικά με το παρόν αριστερό και δεξί σύνορο. Εξ’ ορισμού ισχύει το LEFT, αλλά αυτό μπορεί να αλλαχθεί από κάποιο από τα στοιχεία DIV ή CENTER, αν αυτά συμπεριλαμβάνονται μέσα στον πίνακα..

WIDTH

Αν παραληφθεί αυτό το όρισμα τότε το πλάτος του πίνακα καθορίζεται αυτόματα από τον φυλλομετρητή. Το όρισμα WIDTH θέτει είτε το απόλυτο πλάτος σε pixel (WIDTH=452) είτε το επί τοις εκατό κενό διάστημα μεταξύ του αριστερού και του δεξιού ορίου (WIDTH=60%).

BORDER

Το όρισμα αυτό καθορίζει το πλάτος του εξωτερικού συνόρου που θα βρίσκεται τριγύρω από τον πίνακα για έναν ορισμένο αριθμό από pixel (π.χ. BORDER=3). Όταν η παραπάνω τιμή είναι μηδενική δεν εμφανίζεται καθόλου περίγραμμα στον πίνακα.

CELLSPACING

Καθορίζει το μέγεθος της κενής περιοχής που θα υπάρχει γύρω από κάθε κελί σε σχέση με τα γειτονικά κελιά. Το μέγεθος έχει ως μονάδες τον αριθμό των pixel (π.χ. CELLSPACING=5). Η ίδια τιμή καθορίζει το κενό διάστημα μεταξύ του ορίου του πίνακα με τα όρια των εξωτερικών κελιών.

CELLPADDING

Καθορίζει το μέγεθος σε pixel μεταξύ του ορίου καθενός κελιού με τα περιεχόμενά του.

Κάθε pixel αναφέρεται στα pixel οθόνης και θα πρέπει να πολλαπλασιαστούν με κατάλληλο συντελεστή όταν αυτό απεικονίζεται σε τερματικά υψηλής ευκρίνειας όπως είναι οι εκτυπωτές σελίδας. Για παράδειγμα, όταν η οθόνη του χρήστη έχει πλάτος 75 pixel/ίντσα και απεικονίζεται σε έναν εκτυπωτή σελίδας 600στιγμών/ίντσα, τότε οι τιμές των pixel δοσμένες σε μονάδες HTML θα πρέπει να πολλαπλασιαστούν με τον παράγοντα 8.

Το στοιχείο CAPTION έχει μόνο μια παράμετρο ALIGN, η οποία καθορίζει την τοποθέτηση του τίτλου του πίνακα και μπορεί να δεχθεί ως τιμές τις ALIGN=TOP ή ALIGN=BOTTOM. Εξ΄ ορισμού, η τοποθέτηση του τίτλου του πίνακα είναι στο πάνω μέρος.

Τα στοιχεία TR και TD

Το στοιχείο TR απαιτεί μια ετικέτα αρχής, αλλά όχι απαραίτητα την ετικέτα τέλους και εγκλείει τα κελιά του πίνακα. Έχει τις εξής παραμέτρους:

ALIGN

Καθορίζει την εξ’ ορισμού οριζόντια ευθυγράμμιση των περιεχομένων των κελιών. Αποδεκτές τιμές είναι οι: LEFT, CENTER ή RIGHT.

VALIGN

Καθορίζει την εξ’ ορισμού κάθετη ευθυγράμμιση των περιεχομένων των κελιών. Αποδεκτές τιμές είναι οι: TOP, MIDDLE ή BOTTOM για τοποθέτηση των περιεχομένων του κελιού στη κορυφή, τη μέση ή τη βάση του κελιού αντίστοιχα.

53

Page 54: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Υπάρχουν δύο στοιχεία για τον καθορισμό της μορφής των κελιών. Το TH χρησιμοποιείται για την επικεφαλίδα των κελιών, ενώ το TD για τα δεδομένα (περιεχόμενα) των κελιών. Οι επικεφαλίδες αρχής TH και TD είναι απαραίτητες, αλλά οι επικεφαλίδες τέλους μπορούν να παραληφθούν. Τα κελιά μπορούν να έχουν τα ακόλουθα χαρακτηριστικά:

NOWRAP

Η παρουσία αυτής της παραμέτρου απενεργοποιεί την αυτόματη τύλιξη κειμένου μέσα στο χώρο ενός κελιού (π.χ. <TD NOWRAP>). Αυτό είναι ισοδύναμο με το &nbsp;

ROWSPAN

Έχει ως τιμή έναν ακέραιο αριθμό που ορίζει το πόσες γραμμές θα καταληφθούν από αυτό το κελί. Εξ’ ορισμού ισούται με 1.

COLSPAN

Έχει ως τιμή έναν ακέραιο αριθμό που ορίζει το πόσες στήλες θα καταληφθούν από αυτό το κελί. Εξ’ ορισμού ισούται με 1.

ALIGN

Καθορίζει την εξ’ ορισμού οριζόντια ευθυγράμμιση των περιεχομένων του κελιού και μπορεί να επανακαθορίσει την παράμετρο ALIGN μιας σειράς του πίνακα. Δυνατές τιμές: LEFT, CENTER και RIGHT. Σε παράλειψη της παραμέτρου ALIGN, εξ΄ ορισμού είναι αριστερή ευθυγράμμιση για το <TD> και κεντρική ευθυγράμμιση για το <TH>, αλλά μπορούν να αλλαχθούν και από την παράμετρο ALIGN του στοιχείου TR.

VALIGN

Καθορίζει την εξ’ ορισμού κάθετη ευθυγράμμιση των περιεχομένων του κελιού και μπορεί να επανακαθορίσει την παράμετρο VALIGN μιας σειράς του πίνακα. Δυνατές τιμές: TOP, MIDDLE και BOTTOM. Σε παράλειψη της παραμέτρου VALIGN, εξ΄ ορισμού είναι κεντρική ευθυγράμμιση, αλλά μπορεί να αλλαχθεί με την παράμετρο VALIGN του στοιχείου TR.

WIDTH

Καθορίζει το απαιτούμενο πλάτος των περιεχομένων ενός κελιού σε pixel εξαιρώντας τις σκιές του κελιού.

HEIGHT

Καθορίζει το απαιτούμενο ύψος των περιεχομένων ενός κελιού σε pixel εξαιρώντας τις σκιές του κελιού.

Όλοι οι νέοι φυλλομετρητές υποστηρίζουν την παράμετρο BGCOLOR στα TH και TD. Καθορίζει το χρώμα του φόντου του κελιού και έχει την ίδια σύνταξη με αυτή του στοιχείου BODY που περιγράφτηκε πιο πριν.

Οι αλγόριθμοι που χρησιμοποιούνται για την αυτόματη αλλαγή του μεγέθους των πινάκων θα πρέπει να λαμβάνουν υπόψη τους το μέγιστο και ελάχιστο πλάτος που απαιτείται για το κελί.

Το ελάχιστο και μέγιστο πλάτος των ένθετων πινάκων συμβάλλουν στο μικρότερο και μεγαλύτερο πλάτος του κελιού στο οποίο συμμετέχουν. Μόλις οι απαιτήσεις σε

54

Page 55: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

πλάτος γίνουν γνωστές για την κορυφή ενός πίνακα, τα πλάτη των στηλών μπορούν να οριστούν. Αυτό επιτρέπει στα πλάτη των ένθετων στηλών να ορίζονται εύκολα.

5.3.6 Στοιχεία ορισμού τύπων κειμένου

Τα στοιχεία ορισμού κειμένου τα οποία ορίζουν τύπους χαρακτήρων γενικά μπορούν να έχουν άλλα ένθετα στοιχεία, αλλά όχι και στοιχεία ορισμού περιοχής.

5.3.6.1 Στοιχεία τύπου γραμματοσειράς

Τα στοιχεία τύπου γραμματοσειράς (Font Style Elements) απαιτούν την ετικέτα αρχής και την ετικέτα τέλους. Για παράδειγμα:

<B>Αυτό είναι κάποιο κείμενο σε bold μορφή</B>.

Τα στοιχεία ορισμού κειμένου πρέπει να είναι ένθετα με σωστή μορφή. Το ακόλουθο είναι λανθασμένο:

Αυτό είναι κάποιο <B> bold και <I></B> italic κείμενο </I>.

Οι φυλλομετρητές θα πρέπει να καταβάλλουν κάθε προσπάθεια για την απεικόνιση των ένθετων στοιχείων κειμένου: Για παράδειγμα:

Αυτό είναι κάποιο<B>bold και <I>italic κείμενο</I></B>.

Τα διαθέσιμα στοιχεία είναι:

TT Κείμενο σε teletype ή monospaced μορφή

I Πλαγιαστός τύπος κειμένου

B Τύπος κειμένου bold

U Τύπος υπογραμμισμένου κειμένου

STRIKE Τύπος κειμένου strike-through

BIG Κείμενο σε κεφαλαία

SMALL Κείμενο σε πεζά

SUB Κείμενο σε μορφή δείκτη

SUP Κείμενο σε μορφή εκθέτη

Σχήμα 5.12 Στοιχεία κειμένου

5.3.6.2 Στοιχεία φορμών

Τα στοιχεία INPUT, SELECT και TEXTAREA επιτρέπονται μόνο μέσα στο στοιχείο FORM. Το στοιχείο INPUT παίρνει μια πληθώρα από παραμέτρους περιλαμβάνοντας πεδία κειμένου, πεδία κωδικών, πεδία επιλογής, checkboxes, κουμπιά radio, submit and reset κουμπιά, κρυμμένα πεδία, file upload, και κουμπιά εικόνας. Τα στοιχεία SELECT χρησιμοποιούνται για μονής ή πολλαπλής επιλογής μενού. Τα στοιχεία TEXTAREA χρησιμοποιούνται για πεδία κειμένου πολλαπλών γραμμών.

5.3.6.3 Το στοιχείο INPUT

Στα στοιχεία INPUT απαγορεύεται να υπάρχει ετικέτα τέλους.

type

Καθορίζουν τον τύπο του πεδίου εισόδου:

type=text (εξ’ ορισμού)

55

Page 56: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Πρόκειται για κείμενο μιας γραμμής του οποίου το ορατό μήκος καθορίζεται με την παράμετρο size, π.χ. size=40 για κείμενο μήκος 40 χαρακτήρων. Οι χρήστες μπορούν να εισάγουν περισσότερους χαρακτήρες από το παραπάνω όριο. Σε περίπτωση που θα πρέπει να καθοριστεί ένας μέγιστος αριθμός χαρακτήρων, τότε υπάρχει η παράμετρος maxlength. Η παράμετρος name χρησιμοποιείται για να δώσει κάποιο όνομα στο παρόν πεδίο και η παράμετρος value δίνει μια αρχική τιμή στην γραμματοσειρά που θα φαίνεται στο πεδίο μόλις φορτωθεί η φόρμα.

<input type=text size=40 name=user value="Παναγιώτης Κάππος">

type=password

Είναι όμοιο με τον τύπο text, με τη διαφορά ότι απεικονίζει το χαρακτήρα “*” αντί του χαρακτήρα που πληκτρολογείται, κρύβοντας τον κωδικό που εισάγεται. Μπορούν να χρησιμοποιηθούν και οι παράμετροι size και maxlength ελέγχοντας το ορατό και το μέγιστο μέγεθος του εισαγόμενου κωδικού.

<input type=password size=12 name=passwd>

type=checkbox

Ορίζει απλές δυαδικές τιμές ή για τιμές. Υποστηρίζονται πολλαπλές τιμές και να επιτευχθεί με τη χρήση πολλαπλών στοιχείων checkbox με το ίδιο όνομα αλλά με διαφορετική τιμή στην παράμετρο value. Κάθε ενεργοποιημένο checkbox δημιουργεί ένα ξεχωριστό ζεύγος ονόματος/τιμής στα δεδομένα που στέλνονται, ακόμα κι αν αυτό καταλήγει στη δημιουργία διπλών ίδιων ονομάτων. Η παράμετρος checked αρχικοποιεί το checkbox στην ενεργοποιημένη του κατάσταση.

<input type=checkbox checked name=uscitizen value=yes>

type=radio

Ο τύπος αυτός μπορεί να δεχθεί μια τιμή μεταξύ μιας πληθώρας εναλλακτικών τιμών. Κάθε κουμπί radio που συμμετέχει στην ίδια ομάδα θα πρέπει να έχει το ίδιο όνομα (παράμετρος name) και απαιτεί οπωσδήποτε μια τιμή. Μόνο το ενεργοποιημένο κουμπί radio δημιουργεί ένα ζεύγος ονόματος/τιμής στα δεδομένα που στέλνονται. Σε μια ομάδα από κουμπιά radio, ένα από αυτά θα πρέπει να οριστεί ως ενεργοποιημένο με χρήση της παραμέτρου checked.

<input type=radio name=age value="0-12">

<input type=radio name=age value="13-17">

<input type=radio name=age value="18-25">

<input type=radio name=age value="26-35" checked>

<input type=radio name=age value="36-">

type=submit

Δημιουργεί ένα κουμπί, το οποίο μπορούν να χρησιμοποιήσουν οι χρήστες για την αποστολή των δεδομένων της φόρμας στον εξυπηρετητή παγκόσμιου ιστού. Η ετικέτα του κουμπιού ονοματίζεται με την παράμετρο value. Αν δοθεί και όνομα στο πεδίο submit, τότε στέλνεται και το ζεύγος ονόματος/τιμής του πεδίου submit στον εξυπηρετητή. Μπορούν να χρησιμοποιηθούν πολλαπλά κουμπιά submit σε μια φόρμα. Για κουμπιά με εικόνες δείτε υπάρχει ο τύπος image.

<input type=submit value="Let’s Go to Patras Carnival Festival">

56

Page 57: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

5.4 Χρήσιμες Διευθύνσεις

NCSA--A Beginner's Guide to HTML Home Page

http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

W3C Consortium

http://www.w3.org

57

Page 58: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

6 ΚΕΦΑΛΑΙΟ 6: Η ΓΛΏΣΣΑ JAVASCRIPT

6.1 Εισαγωγή

Το παρόν κεφάλαιο έχει ως στόχο την περιγραφή της σύνταξης των εντολών και των βασικών αρχών της γλώσσας JavaScript. Η JavaScript είναι μια σχετικά απλή γλώσσα η οποία παρέχει βασικές προγραμματιστικές λειτουργίες. Οποιαδήποτε προγραμματιστική εμπειρία, από τη Visual Basic μέχρι την Pascal ή την C (η οποία είναι πολύ πιο εξελιγμένη) είναι αρκετή για την κατανόηση της JavaScript.

6.2 Διαθέσιμες Εκδόσεις

Υπάρχουν διάφορες εκδόσεις της JavaScript που υποστηρίζονται από ορισμένους φυλλομετρητές παγκόσμιου ιστού και εκδόσεις αυτών. Δυστυχώς το παραπάνω μπορεί συχνά να οδηγήσει σε σύγχυση ή σε περιστατικά μη συμβατότητας. Από τη στιγμή που η Netscape αρχικά δημιούργησε τη JavaScript, η JavaScript 1.0 ήταν το πρότυπο της γλώσσας που υποστήριζε το Netscape Navigator 2.0. Αργότερα το Navigator 3.0 υποστήριζε βελτιώσεις οι οποίες οδήγησαν στην δημιουργία της JavaScript 1.1. Σήμερα το Navigator 4.0 ή νεότερο υποστηρίζει την έκδοση 1.2.

Παράλληλα, η Microsoft προσπάθησε να υποστηρίξει την JavaScript 1.0 στην έκδοση 3.0 του Internet Explorer. Ονομάζοντάς την "Jscript" η αρχική υποστήριξη της γλώσσας από την Microsoft ήταν αναξιόπιστη και με πολλά σφάλματα (bug). Μια σημαντική προσπάθεια δημιουργίας ενός προτύπου ήρθε από τον οργανισμό ECMA. Ο Internet Explorer 4.0 ή νεώτερος υποστηρίζει μια αξιόπιστη και σταθερή έκδοση της JavaScript από τον ECMA, η οποία παρόλο που μοιράζεται πολλά στοιχεία με την έκδοση της JavaScript 1.2 της Netscape δεν είναι απολύτως συμβατή.

Παρόλο που ο προγραμματισμός για μια συγκεκριμένη έκδοση της JavaScript είναι σχετικά απλός, η συγγραφή κώδικα ώστε να υποστηρίζεται από περισσότερες εκδόσεις, κυρίως για τους Navigator 4 και MSIE 4, είναι μια από τις μεγαλύτερες προκλήσεις και θέματα για συζήτηση σχετικά με τον προγραμματισμό σε JavaScript.

6.3 Ενσωμάτωση της Javascript

Ο κώδικας της JavaScript είναι ενσωματωμένος σε ένα HTML αρχείο χρησιμοποιώντας την ετικέτα SCRIPT. Μπορούν να χρησιμοποιηθούν πολλαπλές ετικέτες μέσα σε ένα αρχείο HTML, χρησιμοποιώντας πολλαπλές ετικέτες SCRIPT. Ένα παράδειγμα κομματιού κώδικα, μέσα σε μια HTML σελίδα, είναι το ακόλουθο:

<script language="JavaScript">

<!--

document.write("Αυτό είναι ένα απλό πρόγραμμα!");

//-->

</script>

Η ετικέτα LANGUAGE είναι προαιρετική αλλά ενδείκνυται η χρήση της. Επίσης ο χρήστης μπορεί να καθορίσει το κομμάτι του κώδικα που θα εκτελεστεί μόνο από φυλλομετρητές που υποστηρίζουν μια συγκεκριμένη έκδοση της JavaScript. Για παράδειγμα:

58

Page 59: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

<script language="JavaScript1.2">

Μια άλλη παράμετρος της ετικέτας SCRIPT είναι η SRC, η οποία μπορεί να χρησιμοποιηθεί για να συμπεριλάβει ένα εξωτερικό αρχείο που περιέχει εντολές JavaScript κώδικα εκτός από κώδικα που είναι ενσωματωμένος στο κείμενο HTML:

<script language="JavaScript" src="global.js">

</script>

Το εξωτερικό αρχείο είναι ένα απλό αρχείο κειμένου το οποίο περιέχει κώδικα σε JavaScript, και του οποίου το όνομα έχει κατάληξη ".js".Θα πρέπει να σημειωθεί ότι παρόλο που κάποιοι φυλλομετρητές έκδοσης 3 υποστηρίζουν την παράμετρο SRC, αυτή λειτουργεί σωστά σε όλες τις πλατφόρμες που υποστηρίζουν φυλλομετρητές έκδοσης 4 και πάνω.

Ο κώδικας μπορεί να τοποθετηθεί μέσα σε πεδία σχολίων ώστε να διασφαλιστεί ότι δε θα παρουσιαστεί στην οθόνη από φυλλομετρητές που δεν υποστηρίζουν τη JavaScript. Το μαρκάρισμα αρχής του σχολίου είναι το <!-- ενώ το τέλος του είναι το //-->. Αυτή η πρακτική είναι σίγουρα προαιρετική, αλλά θεωρείται καλή μορφή συγγραφής κώδικα σε περίπτωση που η σελίδα παρουσιάζεται σε κάποιον παλιότερο φυλλομετρητή που δεν υποστηρίζει Javascript.

6.4 H Γραμματική της JavaScript

Ο κώδικας της JavaScript, όπως οι περισσότερες γλώσσες προγραμματισμού, έχει στη δομή του εντολές που χρησιμοποιούνται για αναθέσεις τιμών, σύγκριση τιμών, εντολές ελέγχου ροής και εκτέλεση σημείων του κώδικα. Στον παρακάτω πίνακα εμφανίζονται οι πιο κύριες εντολές της γραμματικής της JavaScript. Στη συνέχεια θα γίνει εκτενής αναφορά για καθεμιά από αυτές.

Μεταβλητές(Variables)

Ετικέτες που παίρνουν μια τιμή που μπορεί να αλλάζει.

Παράδειγμα: η μεταβλητή total μπορεί να έχει την τιμή 12.

total=12;

Τελεστές(Operators)

Χρησιμοποιούνται για τον υπολογισμό ή τη σύγκριση τιμών.

Παράδειγμα: Δύο τιμές μπορούν να αθροιστούν με χρήση του τελεστή (+); total+fpa

Παράδειγμα: Δύο τιμές μπορούν να συγκριθούν με χρήση του τελεστή μεγαλύτερο από (>); total>59

Εκφράσεις(Expressions)

Κάθε συνδυασμός μεταβλητών, τελεστών και εκφράσεων οι οποίες μπορούν να έχουν κάποιο αποτέλεσμα

Παράδειγμα: total=12; ή if (total>12)

Προτάσεις(Statements)

Οι προτάσεις της JavaScript μπορούν να πάρουν τη μορφή συγκρίσεων, βρόχων ή διαχείρισης αντικειμένων. Είναι καλή πρακτική να διαχωρίζουμε τις προτάσεις με ερωτηματικό(;) αν πολλαπλές προτάσεις βρίσκονται στην ίδια γραμμή.

Παράδειγμα: if (total>100) {statements;} else {statements;}

Παράδειγμα: while (timer<10) {statements;}

59

Page 60: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Αντικείμενα(Objects)

Η χρήση των αντικειμένων είναι ένα πολύ χρήσιμο χαρακτηριστικό της JavaScript. Ένα αντικείμενο μπορεί να έχει πολλά χαρακτηριστικά (properties) και κάθε χαρακτηριστικό ενεργεί ως μια μεταβλητή που έχει κάποια τιμή. Η JavaScript μπορεί να αναφέρεται σε ένα μεγάλο αριθμό από προϋπάρχοντα αντικείμενα που χρησιμοποιούνται στις σελίδες του παγκόσμιου ιστού. Για παράδειγμα, ένα αντικείμενο μιας σελίδας περιλαμβάνει χαρακτηριστικά όπως το χρώμα του φόντου της, τον τίτλο της κλπ.

Περισσότερες πληροφορίες σχετικά με τα προϋπάρχοντα αντικείμενα της JavaScript υπάρχουν στην παράγραφο "Μοντέλο Αντικειμένων".

Συναρτήσεις και Μέθοδοι(Functions and Methods)

Η συνάρτηση στην Javascript, όπως και στις περισσότερες γλώσσες προγραμματισμού, είναι ένα σύνολο από προτάσεις οι οποίες εκτελούν κάποια λειτουργία. Μπορεί να δεχθεί ή να επιστρέψει τιμές.

Μια μέθοδος είναι απλά μια συνάρτηση η οποία περιλαμβάνεται σε ένα αντικείμενο. Για παράδειγμα, μια συνάρτηση η οποία κλείνει το παρόν παράθυρο, η close(), είναι μέρος του αντικειμένου παράθυρο, επομένως η window.close() είναι μια γνωστή μέθοδός της.

6.5 Μεταβλητές

Μια μεταβλητή στη Javascript πρέπει να ξεκινά με κάποιο γράμμα ή το ("_"). Οι επόμενοι χαρακτήρες μπορεί να είναι ψηφία (0-9). Επειδή στην JavaScript γίνεται διαχωρισμός ανάμεσα στα κεφαλαία και πεζά, οι χαρακτήρες περιλαμβάνουν τους χαρακτήρες από "A" μέχρι το "Z" (κεφαλαία) και τους χαρακτήρες από "a" μέχρι "z" (πεζά).

Όσον αφορά την εμβέλεια των μεταβλητών της Javascript μια μεταβλητή μπορεί να θεωρηθεί ως τοπική ή καθολική.

Για τη δημιουργία μιας νέας καθολικής μεταβλητής αρκεί να της ανατεθεί μια τιμή:

newVariable=5;

Για τη δημιουργία μιας τοπικής μεταβλητής της οποία η εμβέλεια είναι μέσα στα όρια μιας συνάρτησης τότε πρέπει η μεταβλητή αυτή να δηλωθεί με τη χρήση της πρότασης var:

function newFunction()

{ var loop=1;

total=0;

... άλλες προτάσεις ...

}

Στο παραπάνω παράδειγμα η μεταβλητή loop είναι τοπικής εμπέλειας στη συνάρτηση newFunction() ενώ η total θα είναι καθολική για ολόκληρη τη σελίδα.

Τύποι δεδομένων

Η τιμή των δεδομένων που μπορούν να ανατεθούν σε μια μεταβλητή στη γλώσσα JavaScript μπορεί να ανήκει σε μια από τις ακόλουθες κατηγορίες:

60

Page 61: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Αριθμοί (Numbers)

3 ή 7.987, Ακέραιοι ή αριθμοί κινητής υποδιαστολής.

Οι ακέραιοι μπορεί να είναι θετικοί, 0, ή αρνητικοί. Οι ακέραιοι μπορούν να εκφράζονται στη δεκαδική, δεκαεξαδική ή οκταδική βάση. Ένας ακέραιος με βάση δέκα αποτελείται από μια ακολουθία από ψηφία χωρίς αρχικό ψηφία 0. Το 0 ως αρχικός χαρακτήρας υποδηλώνει έναν οκταδικό ακέραιο ενώ ένα αρχικό 0x (ή 0X) υποδηλώνει ένα δεκαεξαδικό.

Οι αριθμοί κινητής υποδιαστολής μπορούν να περιλαμβάνουν το πραγματικό μέρος με το εκθετικό "e" το οποίο υποδηλώνει βάση 10.

Δυαδικοί

(Booleans)

Οι πιθανές τιμές είναι η True και False. Κάθε έκφραση που αποδίδεται με 0 (μηδέν) θεωρείται false, ενώ κάθε μη μηδενική τιμή θεωρείται ότι έχει τη τιμή true.

Συμβολοσειρές

(Strings)

Οι συμβολοσειρές ορίζονται είτε ανάμεσα σε μονά ή διπλά εισαγωγικά. Θα πρέπει να γίνεται χρήση μονών εισαγωγικών για την εισαγωγή μιας συμβολοσειράς που περιέχει διπλά εισαγωγικά. π.χ. "Τεχνολογίες Διαδικτύου"

Αντικείμενα

(Objects) myObj = new Object();

Null Ο τύπος αυτός δεν είναι ίδιος με τη μηδενική τιμή, σημαίνει ότι δεν έχει απολύτως καμία τιμή. Ο τύπος null δεν έχει τιμή και δε σημαίνει τίποτε όσον αφορά την τιμή.

Undefined Η τιμή που δεν έχει ακόμα οριστεί είναι η τιμή που έχει μια μεταβλητή αμέσως μετά τη δημιουργία της αλλά πριν ακόμα της ανατεθεί κάποια τιμή.

Στη JavaScript δεν είναι απαραίτητο να δηλωθεί ο τύπος των δεδομένων μιας μεταβλητής πριν την ανάθεση τιμής σε αυτή και οι τύποι δεδομένων μετατρέπονται αυτόματα κατά την εκτέλεση του προγράμματος (script). Έτσι μπορεί να γίνεται ανάθεση οποιασδήποτε τιμής σε οποιαδήποτε μεταβλητή. Η μόνη στιγμή που εξετάζονται θέματα τύπων δεδομένων είναι όταν γίνονται λειτουργίες μεταξύ των εμπλεκόμενων δεδομένων. Υπάρχουν πολλοί τελεστές οι οποίοι συμπεριφέρονται διαφορετικά ανάλογα με τον τύπο δεδομένων. Για παράδειγμα, θεωρείστε τον τελεστή ”+”:

"5" + "10" "510" (ένωση συμβολοσειρών)

5 + 10 15 (αριθμητικό άθροισμα)

6.6 Τελεστές

Οι τελεστές ενεργούν πάνω σε μια ή περισσότερες μεταβλητές ή τιμές και επιστρέφουν μια νέα τιμή. Οι τελεστές χωρίζονται σε διάφορες κατηγορίες ανάλογα την πράξη που εκτελούν:

61

Page 62: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Αριθμητικοί

Οι αριθμητικοί τελεστές επιστρέφουν την αριθμητική τιμή των ορισμάτων τους. Οι αριθμητικοί τελεστές είναι οι:

+ Πρόσθεση

- Αφαίρεση

* Πολλαπλασιασμός

/ Διαίρεση

% Ακέραιο μέρος

++Μοναδαία Αύξηση: ο τελεστής αυτός παίρνει μόνο ένα όρισμα του οποίου η τιμή αυξάνεται κατά 1.

--Μοναδαία Μείωση: ο τελεστής αυτός παίρνει μόνο ένα όρισμα του οποίου η τιμή μειώνεται κατά 1.

- Μοναδιαία Άρνηση: επιστρέφει το συμπλήρωμα του ορίσματος.

Σύγκρισης

Ο τελεστής σύγκρισης ενεργεί πάνω στα ορίσματά του και επιστρέφει τη λογική τιμή της σύγκρισης για το αν είναι αληθής ή ψευδής. Τα ορίσματα μπορούν να έχουν τιμές είτε αριθμητικές είτε συμβολοσειράς. Όταν πρόκειται για συμβολοσειρές τότε η σύγκριση βασίζεται στην λεξικογραφική σειρά της.

== "Ίσο με" επιστρέφει αληθές αν τα ορίσματα είναι ίσα.

!= "Όχι ίσο με" επιστρέφει αληθές αν τα ορίσματα δεν είναι ίσα.

>"Μεγαλύτερο από" επιστρέφει αληθές όταν το αριστερό όρισμα είναι μεγαλύτερο από το δεξί.

>="Μεγαλύτερο ή ίσο με" επιστρέφει αληθές όταν το αριστερό όρισμα είναι μεγαλύτερο ή ίσο με το δεξί.

<"Μικρότερο από" επιστρέφει αληθές όταν το αριστερό όρισμα είναι μικρότερο από το δεξί.

<="Μικρότερο ή ίσο με" επιστρέφει αληθές όταν το αριστερό όρισμα είναι μικρότερο ή ίσο με το δεξί.

Δυαδικοί

Οι δυαδικοί τελεστές τυπικά χρησιμοποιούνται για το συνδυασμό πολλαπλών συγκρίσεων σε μια έκφραση σύγκρισης.

&& "And" επιστρέφει αληθές αν και τα δύο τα ορίσματα είναι αληθή.

|| "Or" επιστρέφει αληθές αν οποιοδήποτε από τα δύο ορίσματα είναι αληθές.

!"Not" επιστρέφει αληθές αν η άρνηση του ορίσματος είναι αληθής (όταν το όρισμα είναι ψευδές).

>="Μεγαλύτερο ή ίσο με" επιστρέφει αληθές όταν το αριστερό όρισμα είναι μεγαλύτερο ή ίσο με το δεξί.

62

Page 63: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

<"Μικρότερο από" επιστρέφει αληθές όταν το αριστερό όρισμα είναι μικρότερο από το δεξί.

<="Μικρότερο ή ίσο με" επιστρέφει αληθές όταν το αριστερό όρισμα είναι μικρότερο ή ίσο με το δεξί.

Συμβολοσειρές

Οι συμβολοσειρές επιτρέπεται να συγκριθούν με χρήση των τελεστών σύγκρισης καθώς επίσης να συνενωθούν με τον τελεστή ένωσης (+).

"Μηχανικός" + "Η/Υ" Δίνει το "Μηχανικός Η/Υ"

Ανάθεσης

Ο τελεστής ανάθεσης (=) χρησιμοποιείται για να θέσει μια τιμή σε μια μεταβλητή.

= Θέτει την τιμή της έκφρασης στα δεξιά στη μεταβλητή του αριστερού μέρους.

Παράδειγμα: total=100;

Παράδειγμα: total=(price+tax+shipping)

+= (επίσης -=, *=, /=)

Προσθέτει/Αφαιρεί/Πολλαπλασιάζει/Διαιρεί την τιμή της έκφρασης στα δεξιά και την θέτει στη μεταβλητή του αριστερού μέρους.

Παράδειγμα: total+=shipping (προσθέτει την τιμή της shipping στη μεταβλητή total και το αποτέλεσμα τίθεται στην total)

&= (επίσης |=)

Θέτει αποτέλεσμα της έκφρασης στα δεξιά στη μεταβλητή του αριστερού μέρους (αριστερό όρισμα && δεξιό όρισμα) στη μεταβλητή του αριστερού μέρους.

Ειδικοί Τελεστές

Υπάρχουν διάφοροι τελεστές που δε μπορούν να κατηγοριοποιηθούν και παρουσιάζονται παρακάτω:

Ειδικός τελεστής σύγκρισης

(CONDITION) ? TRUEVAL : FALSEVAL

Θέτει την καθορισμένη τιμή στην μεταβλητή αν η σύγκριση είναι αληθής, αλλιώς θέτει την εναλλακτική τιμή.

Παράδειγμα:

preferredCar = (porsche > ferrari) ? "Porsche Cars" : "Ferrari Cars"

Αν porsche > ferrari, τότε στη μεταβλητή preferredCar θα τεθεί η τιμή "Porsche Cars", αλλιώς θα τεθεί η τιμή"Ferrari Cars".

typeof operand Επιστρέφει τον τύπο δεδομένων του operand.

Παράδειγμα: Έλεγχος του αν η μεταβλητή περιέχει κάποιον αριθμό:

if (typeof total=="number") ...

63

Page 64: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Ένα νέο χαρακτηριστικό που υποστηρίζεται από την JavaScript 1.2 (Netscape & MSIE 4) είναι οι κανονικές εκφράσεις, οι οποίες είναι καθορισμένα φίλτρα που χρησιμοποιούνται για τη διαχείριση συνόλων χαρακτήρων μέσα σε άλλες συμβολοσειρές. Οι κανονικές εκφράσεις είναι ιδιαίτερα χρήσιμες μιας και επιτρέπουν την εύκολη διενέργεια αναζητήσεων για κάθε ενδεχόμενο είδος ή μορφής χαρακτήρων. Μερικές φορές όμως η δημιουργία και η εκμετάλλευση των δυνατοτήτων των κανονικών εκφράσεων προσδίδει μεγάλη πολυπλοκότητα υλοποίησης.

Οι δύο πιο πλήρεις αναφορές που διαπραγματεύονται τις κανονικές εκφράσεις είναι οι:

http://developer.netscape.com/docs/manuals/communicator/jsguide4/expr.htm http://language.perl.com/all_about/regexps.html

6.7 Προτάσεις

Οι προτάσεις (statements) καθορίζουν τη ροή προγράμματος και αποτελούνται από μικρότερες εκφράσεις οι οποίες όλες μαζί επιτελούν μια λειτουργία. Στη JavaScript, οι προτάσεις χωρίζονται σε εντολές λήψης αποφάσεων, βρόχους, εντολές χειρισμού αντικειμένων και σχόλια.

Παρόλο που δεν είναι πάντα απαραίτητο, είναι καλή πρακτική να τερματίζουμε κάθε πρόταση με το ελληνικό ερωτηματικό (;).

6.7.1 Λήψη αποφάσεων

Οι εντολές λήψης απόφασης κατευθύνουν τη ροή του προγράμματος ανάλογα με τη τιμή των μεταβλητών που συμμετέχουν και είναι οι:

Εντολή if...else

Όπως είναι ήδη γνωστό από άλλες γλώσσες προγραμματισμού αν η συνθήκη condition είναι αληθής τότε εκτελείται το σύνολο εντολών statements1. Προαιρετικά, αν υπάρχει η πρόταση else τότε εκτελείται το σύνολο statements2 όταν η συνθήκη είναι ψευδής.

if (condition)

{ statements1; }

else

{ statements2; }

Εντολή switch

Η εντολή switch υπολογίζει την τιμή της έκφρασης expression και με τη χρήση των case εκτελεί εκείνο το σύνολο των προτάσεων που καθορίζονται για τη συγκεκριμένη περίπτωση.

switch (expression){

case label:

statements;

break;

64

Page 65: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

case label:

statements;

break;

...

default: statement;

}

Παράδειγμα: έστω ότι θέλουμε να εκτελέσουμε διαφορετικές εντολές ανάλογα με το αν το favoritePet είναι "dog", "cat", ή "iguana". Η εντολή break; statement εμποδίζει κάθε περίπτωση εκτέλεσης εντολών από το επόμενο case. Οι εντολές του default case εκτελούνται σε περίπτωση που κανένα από τα cases δεν ταιριάζει με τα expressions.

switch (favoritePet){

case "dog" :

statements;

break;

case "cat" :

statements;

break;

case "iguana" :

statements;

break;

default : statements;

}

6.7.2 Βρόχοι

Ο βρόχος for

Η σύνταξη του βρόχου αυτού είναι η ίδια με τη γλώσσα C:

for (initial-statement; test; increment)

{ statements; }

Η initial-statement εκτελείται αρχικά και μόνο την πρώτη φορά. Στη συνέχεια ο έλεγχος γίνεται και αν είναι αληθής εκτελούνται οι statements. Για παράδειγμα: ένας βρόχος που εκτελείται 10 φορές είναι ο ακόλουθος:

for (i=0; i<10; i++)

{ statements; }

Ο βρόχος do ... while

Ο βρόχος do...while εκτελεί ένα σύνολο εντολών επαναληπτικά έως ότου η συνθήκη (condition) γίνει ψευδής. Εξαιτίας της δομής του βρόχου αυτού ο βρόχος αυτός εκτελείται τουλάχιστον μία φορά.

do

65

Page 66: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

{ statements;}

while (condition)

Ο βρόχος while

Όμοια με το βρόχο do...while, εκτελεί ένα σύνολο εντολών επαναληπτικά έως ότου η συνθήκη (condition) είναι αληθής. Η βασική διαφορά μεταξύ των while και do...while, εκτός του γεγονότος ότι στις αρχικές εκδόσεις της JavaScript υποστηριζόταν το while, είναι ότι στο βρόχο while μπορεί να μην εκτελεστούν οι εντολές καμία φορά αν η συνθήκη είναι ψευδής από την αρχή.

while (condition)

{ statements; }

Εντολές break και continue

Οι εντολές break και continue χρησιμοποιούνται για την υπερπήδηση περιοχών κώδικα σε ένα επαναληπτικό βρόχο.

Break Εγκαταλείπει την εκτέλεση του βρόχου, βγαίνει εκτός των εντολών αυτού και προχωρά την εκτέλεση του προγράμματος στην επόμενη εντολή από το βρόχο.

continue Εγκαταλείπει την απλή επανάληψη του βρόχου, γυρίζει την εκτέλεση στον έλεγχο του βρόχου δηλ. στη συνθήκη του βρόχου. Ο βρόχος μπορεί να συνεχίσει τις επαναλήψεις αν η συνθήκη (condition) είναι ακόμα αληθής.

6.7.3 Εντολές Χειρισμού Αντικειμένων

Εντολή for...in

Η εντολές for...in χρησιμοποιούνται για την επανάληψη κάποιας ιδιότητας ενός αντικειμένου ή κάποιου στοιχείου πίνακα.

for (variable in object)

{ statements; }

Παράδειγμα: Έστω ότι ένα αντικείμενο που ονομάζεται wine1 έχει πέντε ιδιότητες: vineyard, year, varietal, alcohol, και color. Θέλουμε να εμφανίσουμε την τιμή κάθε ιδιότητας.

var record = "Wine 1<br><br>"

for (var prop in wine1)

{record += prop + " = " + wine1[prop] + "<BR>"}

record += "<br>"

document.write(record)

Εντολή with

Η εντολή with χρησιμοποιείται για την αποφυγή της επανάληψης του ονόματος του αντικειμένου σε κάποιον χειρισμό που αναφέρεται στις ιδιότητές του.

66

Page 67: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

with (object)

{ statements; }

6.7.4 Σχόλια

Παρόλο που τα σχόλια είναι εντελώς προαιρετικά, μπορούν να είναι ένα κρίσιμο κομμάτι ενός προγράμματος. Τα σχόλια αυξάνουν την αναγνωσιμότητα του κώδικα ιδίως σε περίπτωση που ανατρέξει κάποιος στο πρόγραμμα μετά από αρκετό χρονικό διάστημα.

Παρακάτω φαίνεται το σχόλιο για μία γραμμή και για πολλαπλέ γραμμές αντίστοιχα.

// Σχόλιο μια γραμμής

/* Ένα σχόλιο που χρησιμοποιείται για να σχολιάσει

πολλαπλές γραμμές.*/

6.8 Συναρτήσεις

Μία συνάρτηση ομαδοποιεί ένα σύνολο εντολών υπό μια ονομαζόμενη υπορουτίνα. Αυτό επιτρέπει στο χρήστη να καλεί τη συνάρτηση αυτή όταν χρειαστεί τις λειτουργίες της. Οι συναρτήσεις είναι ένας βασικός τρόπος προγραμματισμού στα περισσότερα προγράμματα σε JavaScript. Φυσικά πριν την κλήση θα πρέπει να έχει γίνει ο ορισμός της συνάρτησης. Η χρήση των συναρτήσεων μπορεί να χωριστεί σε δύο λογικές κατηγορίες: Ορισμός συναρτήσεων και κλήση συναρτήσεων.

6.8.1 Ορισμός συναρτήσεων

Ο ορισμός συνάρτησης είναι μια πρόταση που περιγράφει τη συνάρτηση το όνομα, τα ορίσματά που δέχεται προς είσοδο και τις εντολές που εκτελεί.

function funcName(argument1,argument2,etc)

{ statements; }

Τα ορίσματα μιας συνάρτησης είναι προαιρετικά και στην περίπτωση αυτή χρησιμοποιούνται μόνο οι παρενθέσεις χωρίς να περιλαμβάνουν μέσα τίποτε, π.χ. funcName(). Αν καθοριστούν ορίσματα, τότε αυτά θα είναι μεταβλητές μέσα στο σώμα της συνάρτησης oι αρχικές τιμές των οποίων θα είναι οι τιμές που περάστηκαν κατά τη κλήση της συνάρτησης .

Η καλύτερη πρακτική ορισμού μιας συνάρτησης είναι ανάμεσα στην ετικέτα HEAD του κειμένου. Και ο λόγος είναι το ότι η ετικέτα HEAD φορτώνεται πρώτα από τα υπόλοιπα στοιχεία της σελίδα και αυτό εγγυάται ότι οι συνάρτηση θα φορτωθεί πρίν ο χρήστης προλάβει να κάνει κάτι, π.χ. μια κλήση της συνάρτησης. Εναλλακτικά κάποιοι προγραμματιστές τοποθετούν όλες τις συναρτήσεις τους σε ένα ξεχωριστό αρχείο και μετά την περιλαμβάνουν μέσα στη σελίδα χρησιμοποιώντας την παράμετρο SRC της ετικέτας SCRIPT. Το βασικό είναι να έχει οριστεί η συνάρτηση πρίν εκτελεστεί κάποιο κομμάτι κώδικά της.

Παράδειγμα 1: Ορισμός μιας συνάρτησης που επιστρέφει το όρισμά της σε μια Web page αλλά αφού πρώτα το κάνει bold και blinking:

function boldblink(message)

{ document.write("<blink><strong>"+message+"</blink></strong>"); }

67

Page 68: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Παράδειγμα 2: Η ακόλουθη συνάρτηση δέχεται δύο ορίσματα, x και y, και εποτρέφει το αποτέλεσμα της ύψωσης σε δύναμη του x εις την y:

function raiseP(x,y)

{ total=1;

for (j=0; j<y; j++)

{ total*=x; }

return total; / / αποτέλεσμα της ύψωσης σε δύναμη του x εις την y

}

6.8.2 Κλήση Συναρτήσεων

Η κλήση μιας συνάρτησης γίνεται με την παράθεση του ονόματός της ακολουθούμενο από τη λίστα των ορισμάτων της μέσα σε παρενθέσεις:

clearPage();

boldblink("Τεχνολογίες Διαδικτύου!");

Οι συναρτήσεις οι οποίες επιστρέφουν αποτέλεσμα πρέπει να καλεστούν μέσα από κάποια έκφραση:

total=raiseP(2,8);

if (raiseP(tax,2)<100) ...

Πολύ συχνά οι συναρτήσεις της JavaScript καλούνται από κάποιον handler γεγονότος.

6.9 Αντικείμενα

Ένα αντικείμενο είναι ένα σύνολο από δεδομένα, μια συλλογή από ιδιότητες και μεθόδους. Για παράδειγμα έστω ότι υπάρχει ένα αντικείμενο που ονομάζεται car. Το αντικείμενο αυτό έστω ότι έχει διάφορες ιδιότητες όπως: make, model, year, και color. Επίσης μπορούμε να πούμε ότι έχει τις ακόλουθες μεθόδους: go(), stop(), και reverse(). Παρόλο που το αντικείμενο car είναι φανταστικό μπορείτε να δείτε ότι έχει πολλά κοινά με την πραγματική θεώρηση των αντικειμένων του πραγματικού κόσμου.

Με τη JavaScript μπορούν να δημιουργηθούν αντικείμενα που βολεύουν κάθε χρήστη για την αποθήκευση των δεδομένων του. Επίσης κάθε χρήστης χρησιμοποιεί πολλά προϋπάρχοντα αντικείμενα ("built-in" objects) τα οποία επιτρέπουν στο χρήστη για προσπελαύνει και να διαχειρίζεται μια σελίδα παγκόσμιου ιστού καθώς και το φυλλομετρητή που την εμφανίζει και πως την εμφανίζει. Αυτό το σύνολο των προϋπαρχόντων αντικειμένων είναι γνωστό με το όνομα "Document Object Model" ή σε συντομία DOM.

Document Object Model

Τα περισσότερα από τα αντικείμενα του DOM είναι άμεσα σχετιζόμενα με τα χαρακτηριστικά της σελίδας Web ή του φυλλομετρητή. Την εποχή αυτή γίνονται προσπάθειες τυποποίησης και υιοθέτησης κοινών προτύπων από τις Netscape και Microsoft. Δυστυχώς η καθεμία έχει δημιουργήσει το δικό της DOM τα οποία δεν είναι συμβατά σε μεγάλο βαθμό.

68

Page 69: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Στο Σχήμα 6.13 παρουσιάζεται το DOM της Netscape. Το DOM της Microsoft είναι στην ουσία ένα υπερσύνολο αυτού της Netscape και παρουσιάζεται στην παράγραφο 7.4 του κεφαλαίου που διαπραγματεύεται την Dynamic HTML.

Σχήμα 6.13 Το DOM της Netscape

6.9.1 Ιδιότητες

Η πρόσβαση στην ιδιότητα ενός αντικειμένου γίνεται με απλή παράθεση του ονόματός της πάνω στο αντικείμενο: objectName.propertyName. Το όνομα του αντικειμένου (object name) και της ιδιότητας (property name) είναι case sensitive. Επειδή η ιδιότητα είναι ουσιαστικά μια μεταβλητή μπορούμε να δημιουργήσουμε μια νέα ιδιότητα αναθέτοντά της μια τιμή.

Ας θεωρήσουμε ότι το αντικείμενο carObj υπάρχει ήδη, τότε μπορούμε να του δώσουμε ιδιότητες ως εξής:

carObj.make="Toyota";

carObj.model="Corolla";

carObj.year=1999;

document.write(carObj.year);

Ένα αντικείμενο της JavaScript είναι ουσιαστικά ένας πίνακας. Η προσπέλαση των ιδιοτήτων του γίνεται είτε χρησιμοποιώντας τη σύνταξη objectName.propertyName είτε τη σύνταξη σε μορφή πίνακα:

69

Page 70: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

carObj["make"]="Toyota";

carObj["model"]="Camry";

document.write(carObj["year"]);

6.9.2 Μέθοδοι

Σε αντίθεση με την περίπτωση ενός κλασικού πίνακα δεδομένων ένα αντικείμενο μπορεί να περιλαμβάνει συναρτήσεις οι οποίες είναι γνωστές ώς μέθοδοι και αποτελούν μέρος του αντικειμένου. Η κλήση ενός μεθόδου γίνεται με χρήση της ακόλουθης σύνταξης: objectName.methodName(). Στην περίπτωση που πρέπει να περαστούν κάποια ορίσματα τότε αυτά παρατίθενται στις παρενθέσεις όπως ακριβώς και στη κλήση συναρτήσεων.

Για παράδειγμα το αντικείμενο παραθύρου (window) έχει την μέθοδο close(), η οποία κλείνει το καθοριζόμενο παράθυρο από το φυλλομετρητή:

window.close();

6.9.3 Δημιουργία Αντικειμένων

Παρόλο που τα κυριώτερα αντικείμενα που διαχειρίζεται κάποιος είναι τα προκαθορισμένα από το DOM η Javascript δίνει τη δυνατότητα στο χρήστη να ορίσει τα δικά του νέα αντικείμενα για την αποθήκευση των δεδομένων του. Οι τρόποι δημιουργίας αντικειμένων είναι δύο: Δημιουργία άμεσου στιγμιότυπου αντικειμένου (direct instance) ή Δημιουργία Προτύπου Αντικειμένου (Object Prototype).

6.9.3.1 Δημιουργία άμεσου στιγμιότυπου αντικειμένου

Η δημιουργία του αντικειμένου του προηγούμενου παραδείγματος όπως το myPetDog, με δημιουργία άμεσου στιγμιότυπου αντικειμένου, γίνεται ως εξής:

myPetDog=new Object();

myPetDog.name="Barney";

myPetDog.breed="beagle";

myPetDog.year=1981;

Η ανάθεση μιας μεθόδου σε ένα νέο αντικείμενο είναι επίσης απλή. Ας υποθέσουμε ότι έχουμε γράψει τον κώδικα της συνάρτησης woof(), η οποία παίζει έναν ήχο γαυγίσματος:

myPetDog.woof=woof;

6.9.3.2 Δημιουργία Προτύπου Αντικειμένου

Στη περίπτωση αυτή αντί να δημιουργείται το αντικείμενο άμεσα, καθορίζονται τα δομικά στοιχεία που το απαρτίζουν. Έτσι αντί του myPetDog ορίζουμε ένα πρότυπο αντικειμένου myPetDog. Αρχικά δημιουργούμε μία συνάρτηση η οποία ορίζει την δομή του myPetDog:

function petDog(name, breed, year)

{ this.name = name;

this.breed = breed;

this.year = year;

}

70

Page 71: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Τώρα που έχει δημιουργηθεί το πρότυπο petDog, είναι δυνατή η δημιουργία στιγμιότυπου ενός νέου αντικειμένου βασισμένο στην δομή του petDog:

myPetDog=new petDog("barney","beagle",1981);

yourPetDog=new petDog("max","terrier",1990);

6.10 Χρήσιμες Διευθύνσεις

Netscape's JavaScript Guide,

http://developer.netscape.com/docs/manuals/communicator/jsguide4/index.htm

Netscape's JavaScript Documentation Library,

http://developer.netscape.com/docs/manuals/index.html?content=javascript.html

Microsoft's JScript Language Reference,

http://www.microsoft.com/Scripting/JScript/Jslang/Jstoc.htm

Microsoft's JScript Documentation Library,

http://www.microsoft.com/scripting/jscript/techinfo/jsdocs.htm

Microsoft's DOM Reference (aka "DHTML"),

http://www.microsoft.com/msdn/sdk/inetsdk/help/dhtml/references/dhtmlrefs.htm

JavaScript Samples

http://www.hotscripts.com/JavaScript/

JavaScript Tutorial 1

http://www.w3schools.com/js/default.asp

JavaScript Tutorial 2

http://www.webdeveloper.com/javascript/javascript_js_tutorial.html

71

Page 72: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

7 ΚΕΦΑΛΑΊΟ 7: DYNAMIC HTML

7.1 Υπάρχοντα στάνταρ

Η Dynamic HTML (DHTML) αποτέλεσε μια φυσιολογική εξέλιξη και μια καταπληκτική συνέχεια της απλής HTML. Αυτό σκέφτηκαν η Netscape και η Microsoft και έτσι ενσωμάτωσαν στους φυλλομετρητές παγκόσμιου ιστού των εταιρειών τους χαρακτηριστικά της Dynamic HTML. Η υλοποίηση όμως της παραπάνω ιδέας ήταν διαφορετική. Η Netscape υλοποίησε μια σχετικά συντηρητική εκδοχή της DHTML στον Navigator 4.0. Ουσιαστικά η DHTML της Netscape περιορίστηκε στην εισαγωγή της έννοιας των "layers," που ονομάζονται επίσης οριοθέτηση με Cascading Style Sheet. Η Microsoft από την άλλη πλευρά υλοποίησε μια πολύ διευρυμένη έκδοση δίνοντας στους κατασκευαστές σελίδων τεράστιες δυνατότητες υποστήριξης των περισσοτέρων χαρακτηριστικών της DHTML στον Internet Explorer 4.0, στον οποίο όλα τα αντικείμενα μιας σελίδας ήταν διαθέσιμα προς μεταβολή μέσω κώδικα και περιλάμβανε υποστήριξη οριοθέτησης.

Δυστυχώς μέχρι τώρα μεγάλο μέρος του χρόνου κατασκευής σελίδων DHTML αφιερώνεται στην κατασκευή κώδικα που να είναι συμβατός και με τις δύο θεωρήσεις (κατά Netscape ή Microsoft) δημιουργώντας την επιτακτική ανάγκη για τη δημιουργία ενός κοινού προτύπου DHTML. Έτσι οι κατασκευαστές σελίδων θα είναι απορροφημένη στην ανάπτυξη σελίδων και όχι σε θέματα συμβατότητας μεταξύ των εκδόσεων που χρησιμοποιεί ο κάθε φυλλομετρητής.

Το μεγαλύτερο μέρους του όρου που ονομάζουμε "Dynamic HTML" – του συνόλου των στοιχείων μιας σελίδας που είναι διαθέσιμα προς μεταβολή – καθορίζεται από ένα μοντέλο που ονομάζεται Document Object Model (ή για συντομία "DOM"). Αυτό το μοντέλο περιγράφει όλα τα στοιχεία που βρίσκονται σε μια σελίδα και ποιό από τα χαρακτηριστικά τους μπορεί να μεταβληθεί. Όπως ειπώθηκε και παραπάνω η Netscape και Microsoft υποστηρίζουν διαφορετικά DOM. Όλες οι ελπίδες για τυποποίηση της DHTML βρίσκονται στην επιτυχία ενός προτεινόμενου DOM το οποίο είναι στην τελευταία φάση ανάπτυξης από το World Wide Web Consortium (W3C) - http://www.w3c.org/DOM/.

Η DHTML δεν είναι μια νέα γλώσσα από μόνη της. Στην πράξη είναι ένας συνδυασμός από HTML, Cascading Style Sheets, και JavaScript. Το Document Object Model προσφέρει μια προγραμματιστική διεπαφή μεταξύ των HTML/CSS και της JavaScript. Η ανάλυσή μας θα επικεντρωθεί στα ακόλουθα τρία βασικά χαρακτηριστικά του προγραμματισμού σε DHTML:

1. Οριοθέτηση (Positioning): επακριβής τοποθέτηση περιοχών πληροφορίας στη σελίδα καθώς και κίνηση των παραπάνω περιοχών σε οποιοδήποτε σημείο της οθόνης.

2. Μεταβολή Τύπου (Style modifications): Αλλαγή της αισθητικής και των χαρακτηριστικών κάποιος σελίδα on-the-fly.

3. Χειρισμός Γεγονότων (Event handling): Διασύνδεση γεγονότων που προκαλούνται από τον χρήστη με μεταβολές στη θέση ή του τύπου των στοιχείων της σελίδας.

72

Page 73: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

7.2 Δυναμική Οριοθέτηση

Υπάρχουν δύο τρόποι ορισμού δυναμικής οριοθέτησης ενός τμήματος πληροφορίας: η ετικέτα <LAYER> της Netscape ή το Cascading Style Sheet Positioning (CSSP). Παρόλο που η ετικέτα της Netscape είναι πιο απλή στη χρήση αφού αυτή υποστηρίζεται μόνο από το Navigator 4 θα χρησιμοποιήσουμε την δεύτερη εκδοχή μιας και υποστηρίζεται και από τους δυο.

Ένα τμήμα πληροφορίας (block of content) περιλαμβάνεται μέσα σε ετικέτες <DIV>. Για παράδειγμα, για τη δημιουργία ενός τμήματος πληροφορίας που περιλαμβάνει μια εικόνα και μια σύνδεση mailto φαίνεται παρακάτω:

<DIV><A HREF="mailto:[email protected]">E-mail!</A><BR><IMG SRC = "mailbox.gif"

width = 30height = 15alt = 'Mailbox'>

</DIV>

Για την τοποθέτηση αυτού του τμήματος θα πρέπει να καθορίσουμε στην ετικέτα <DIV> να χρησιμοποιήσει ένα style sheet. Το style sheet καθορίζει τα χαρακτηριστικά απεικόνισης για οτιδήποτε βρίσκεται σε κάποια σελίδα από DHTML. Τα Style sheets μπορούν να είναι καθορισμένα από την αρχή είτε να καθορίζονται δυναμικά. Τυπικά όταν χρησιμοποιούμε CSSP, καθορίζουμε τον τύπο του τμήματος δυναμικά (on-the-fly) χρησιμοποιώντας την παράμετρο STYLE μέσα στην ετικέτα <DIV>. Η παράμετρος STYLE περιέχει μια συμβολοσειρά η οποία περιγράφει την τιμή και το είδος κάθε χαρακτηριστικού του. Για παράδειγμα:

<DIV ID="mailblock"STYLE="position:absolute;width:auto;height:auto;left:400px;top:50px;background-color:white;">

<A HREF="mailto:[email protected]">E-mail!</A><BR><IMG SRC = "mailbox.gif"

width = 30height = 15alt = 'Mailbox'>

</DIV>

Στο παραπάνω παράδειγμα αρχικά προσθέσαμε την παράμετρο ID για να δώσουμε ένα όνομα στο τμήμα περιεχομένου. Η χρησιμότητά του θα φανεί περισσότερο στη συνέχεια κατά την χρήση της JavaScript για τη διαχείριση των χαρακτηριστικών του. Στη συνέχεια η παράμετρος STYLE περιλαμβάνει μια σειρά από ιδιότητες και τιμές. Ο χαρακτήρας “:” χρησιμοποιείται για το διαχωρισμό της παραμέτρου (αριστερά) με την τιμή της (δεξιά) ενώ ο χαρακτήρας “;” χρησιμοποιείται για το διαχωρισμό κάθε ζεύγους παράμετρος/τιμή από την επόμενη.

Στην περίπτωσή μας έχουμε καθορίσει ότι το mailblock θα πρέπει να είναι απόλυτα τοποθετημένο στην σελίδα (που σημαίνει ότι δεν είναι σταθερά σχετικό της θέσης οποιουδήποτε άλλου στοιχείου της σελίδας), με αυτόματη ανάθεση πλάτους και ύψους, 400 εικονοστοιχεία (pixel) δεξιά από την αριστερή άκρη του παραθύρου περιεχομένων του φυλλομετρητή και 50 εικονοστοιχεία κάτω από την κορυφή του.

73

Page 74: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Το μόνο πρόβλημα της παραπάνω κατάστασης είναι ότι δεν ξέρουμε επακριβώς ποια είναι η θέση του παραθύρου που είναι 400 εικονοστοιχεία προς τα δεξιά με αποτέλεσμα πολλές φορές να δημιουργούνται οπτικά προβλήματα στην παρουσίαση της σελίδας. Η λύση ακριβούς οριοθέτησης που να είναι διαμορφώσιμη σε σχέση με την όλη σελίδα προκύπτει με τη σχετική οριοθέτηση (relative positioning). Για παράδειγμα έστω ότι θέλουμε το mailblock να εμφανίζεται ελαφρά πιο αριστερά indented από την πάνω δεξιά γωνιά της σελίδας. Για να το επιτύχουμε πρέπει να δημιουργήσουμε ένα τμήμα <DIV> δύο επιπέδων, ένα τμήμα θα παριστάνει τον πατέρα και το άλλο το παιδί:

<DIV ID="mailblock_parent"

ALIGN="right">

<DIV ID="mailblock_child"

STYLE="position:relative;

width:auto;

height:auto;

left:-10px; top:0px;

background-color:white;">

<A HREF="mailto:[email protected]">E-mail!</A><BR><IMG SRC = "mailbox.gif"

width = 30height = 15alt = 'Mailbox'>

</DIV>

</DIV>

Στο παραπάνω παράδειγμα το τμήμα πατέρας περιέχει ως παιδί του ένα τμήμα <DIV> και το περιεχόμενό του (την σύνδεση mailto και μια εικόνα). Το τμήμα-πατέρας είναι ευθυγραμμισμένο δεξιά ως προς τη σελίδα. Το τμήμα-παιδί, το οποίο και περιλαμβάνει το περιεχόμενο που μας ενδιαφέρει, είναι τοποθετημένο δυναμικά σχετικά με τον πατέρα του, 10 εικονοστοιχεία αριστερά από την αριστερή πλευρά του πατέρα.

7.3 Παράμετροι του STYLE

Στο Σχήμα 7.14 παρατίθενται οι πιο συχνά χρησιμοποιούμενες παράμετροι της ετικέτας STYLE για την επακριβή τοποθέτηση τμημάτων πληροφορίας.

position Καθορίζει το πώς κάποιο τμήμα θα τοποθετείται στη σελίδα σχετικά με τα υπόλοιπα σοιχεία της σελίδας. Πιθανές τιμές:

"position:absolute;" Τοποθέτηση σε απόλυτη θέση μέσα στο παράθυρο του φυλλομετρητή, σχετικά με το τμήμα <BODY>.

"position:relative;" Τοποθέτηση σε θέση σχετική με το τμήμα-πατέρας ή αν δεν υπάρχει σχετικά με τη σελίδα.

"position:static;" Τοποθέτηση σχετικά με τους τυπικούς κανόνες διαρύθμισης (layout) της HTML ακολουθώντας την ροή των στοιχείων

74

Page 75: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

της σελίδας.

width

Καθορίζει το πλάτος του τμήματος κατά το οποίο θα γίνεται αναδίπλωση (wrap). Η τιμή δίνεται είτε σε μονάδες (50px), είτε ως ποσοστό του πλάτους του τμήματος-πατέρα ή auto το οποίο αναδιπλώνει το τμήμα στο μήκος του τμήματος-πατέρα.Παράδειγμα: "width:50px;" ή "width:50%;"

height

Καθορίζει το ύψος του τμήματος εκφρασμένο σε μονάδες (50px), σε ποσοστό ως προς τo πλάτος του τμήματος-πατέρα ή auto. Το ύψος ενός τμήματος καθορίζεται στο μικρότερο δυνατό ώστε να καταστεί ικανό για την παρουσίαση των περιεχομένων του. Παρόλα αυτά μπορεί και ένα τμήμα να έχει ύψος περισσότερο από το ύψος όλων των περιεχομένων του.

Παράδειγμα: "height:50px;" ή "height:50%;"

left

Καθορίζει το offset από την αριστερή γωνία του τμήματος που σχετίζεται με την παράμετρο position. Θετικές τιμές (5px) είναι offset προς τα δεξιά ενώ αρνητικές τιμές (-5px) είναι offset προς τα αριστερά.

Παράδειγμα: "left:5px;" ή "left:-5px;"

top

Καθορίζει το offset από την κορυφή του τμήματος που σχετίζεται με την παράμετρο position. Θετικές τιμές (5px) είναι offset προς την βάση της σελίδας ενώ αρνητικές τιμές (-5px) είναι offset προς την κορυφή της σελίδας.

Παράδειγμα: "top:10px;" ή "top:-10px;"

clip

Καθορίζει ένα ορθογώνιο μέρος του τμήματος το οποίο θα είναι ορατό. Τυπικά η χρήση της παραμέτρου clip property γίνεται όταν θέλουμε να είναι ορατό μόνο ένα μέρος του τμήματος κρύβοντας κάποια άλλα.

Σύνταξη:MSIE: clip:rect(top right bottom left)

Παράδειγμα: "clip:rect(0px 30px 50px 0px);"

Netscape: clip:rect(left,top,right,bottom)

Παράδειγμα: "clip:rect(0,0,30,50);"

Παρατηρείστε ότι η σύνταξη ποικίλει μεταξύ φυλλομετρητών όχι μόνο στον καθορισμό των μονάδων των τιμών αλλά και στη σειρά τους.

visibility

Καθορίζει το αν το τμήμα είναι ορατό ή όχι. Αν δεν είναι ορατό το τμήμα δεν φαίνεται στην οθόνη αλλά με χρήση JavaScript μπορείτε να το κάνετε ορατό οποιαδήποτε στιγμή αργότερα. Οι πιθανές τιμές για την παρούσα ιδιότητα ποικίλει ανάλογα με το χρησιμοποιούμενο φυλλομετρητή.

MSIE: "visibility:inherit;" Το τμήμα κληρονομεί την τιμή ορατότητας του πατέρα του.

"visibility:visible;" Το τμήμα είναι ορατό.

75

Page 76: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

"visibility:hidden;" Το τμήμα είναι αόρατο.

Netscape:"visibility:inherit;" Το τμήμα κληρονομεί την τιμή ορατότητας του πατέρα του.

"visibility:show;" Το τμήμα είναι ορατό.

"visibility:hide;" Το τμήμα είναι αόρατο.

z-index

Καθορίζει την σειρά διάταξης των τμημάτων στην περίπτωση τμημάτων που το ένα καλύπτει κάποιο μέρος του άλλου. Σε κάθε τμήμα τίθεται ένας ακέραιος αριθμός. Όταν τα τμήματα έχουν κοινά κομμάτια που το ένα καλύπτει το άλλο, τότε το τμήμα που έχει μεγαλύτερο z-index εμφανίζεται πάνω από το τμήμα που έχει μικρότερο z-index. Τμήματα με ίδια τιμή z-index εμφανίζονται ανάλογα με τη σειρά που εμφανίζονται στην πηγαίο κώδικα (bottom-to-top: το πρώτο τμήμα που ορίζεται εμφανίζεται στη βάση και το τελευταίο τμήμα εμφανίζεται στην κορυφή).

Παράδειγμα: "z-index:3;”

background-color

Καθορίζει το χρώμα φόντου ενός τμήματος.

Παράδειγμα: "background-color:green;" ή "background-color:FF8F00;"

background-image

Καθορίζει την εικόνα που θα χρησιμοποιηθεί για φόντο ενός τμήματος.

Παράδειγμα: "background-image:url('/backgrounds/tile.gif');"

Σχήμα 7.14 Οι παράμετροι της ετικέτας STYLE

Χρησιμοποιώντας τις κατάλληλες παραμέτρους του STYLE ο κατασκευαστής σελίδων μπορεί να αλλάζει τη θέση και την οπτική απεικόνιση όλων των τμημάτων από τα οποία αποτελείται η κάθε σελίδα με κατάλληλες εντολές JavaScript.

7.4 Τα βασικά της DHTML

Τμήματα πληροφορίας που εμπεριέχονται σε ετικέτες <DIV> είναι άμεσα προσπελάσιμα ως αντικείμενα από την JavaScript μέσω του Document Object Model. Αυτό σημαίνει ότι με βάση τα αντικείμενα και τις ιδιότητές τους που καθορίζονται από το DOM, η JavaScript μπορεί να προσπελάσει τις ιδιότητες των αντικειμένων κάθε τμήματος πληροφορίας της σελίδας.

Γυρίζουμε πίσω στην απλή μορφή του παράδειγματός μας mailblock:

<DIV ID="mailblock"STYLE="position:absolute;width:auto;height:auto;left:400px; top:50px;background-color:white">

<A HREF="mailto:[email protected]">E-mail!</A><BR><IMG SRC = "mailbox.gif"

width = 30height = 15alt = 'Mailbox'>

76

Page 77: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

</DIV>

Επειδή η Netscape και η Microsoft δεν έχουν συμβατά DOM, το παραπάνω τμήμα είναι διαθέσιμο μέσω διαφορετικών αντικειμένων σε κάθε φυλλομετρητή. Έτσι θα δούμε τις εντολές για προσπέλαση των ιδιοτήτων των τμημάτων πληροφορίας και για τις δύο περιπτώσεις.

Με βάση το DOM της Netscape, κάθε τμήμα <DIV> παίρνει τη μορφή του αντικειμένου Layer. Με βάση το DOM της Microsoft κάθε τμήμα προσπελαύνεται σαν ένα αντικείμενο DIV, το οποίο με τη σειρά του κατέχει ένα αντικείμενο τύπου STYLE. Αυτό μπορεί να φαίνεται με πρώτο μάτι δύσκολο αλλά είναι απλά θέμα σύνταξης. Ας δούμε πως θα μπορούσαμε να έχουμε μια αναφορά σε JavaScript προς το mailblock. Χρησιμοποιούμε την παράμετρο που έχει καθοριστεί στο ID:

Microsoft:

document.all.mailblock

Netscape:

document.layers["mailblock"]

Τώρα ας θεωρήσουμε την ιδιότητα χρώμα φόντου για το mailblock. Η ιδιότητα CSS για το χρώμα φόντου είναι η "background-color" όπως βρίσκεται μέσα στην ετικέτα <DIV>. Έτσι θα δούμε τις εντολές για προσπέλαση των ιδιοτήτων των τμημάτων πληροφορίας και για τις δύο περιπτώσεις φυλλομετρητών.

Microsoft:

document.all.mailblock.style.backgroundColor

Netscape:

document.layers["mailblock"].bgColor

Χρησιμοποιώντας μια εντολή σε JavaScript μπορούμε να αλλάξουμε το χρώμα φόντου του mailblock σε πράσινο ως εξής:

Microsoft:

document.all.mailblock.style.backgroundColor="green";

Netscape:

document.layers["mailblock"].bgColor="green";

Όμοια μπορούμε να αλλάξουμε τις ιδιότητες top και left το οποίο θα έχει ως αποτέλεσμα τη μετακίνηση του τμήματος στην οθόνη. Επομένως αν ξέρουμε την σωστή ιδιότητα του DOM που αναφέρεται σε κάποια ιδιότητα για το style sheet, μπορούμε να κάνουμε μια τεράστια ποικιλία από ενέργειες π.χ. με τις ακόλουθες εντολές μπορούμε να μετακινήσουμε το τμήμα mailblock κατευθείαν στη δεξιά πλευρά της σελίδας:

Microsoft:

document.all.mailblock.style.left="0px";ήdocument.all.mailblock.style.pixelLeft=0;

Netscape:

77

Page 78: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

document.layers["mailblock"].left=0;

Έχοντας τη γνώση του πως γίνεται η τοποθέτηση τμημάτων πληροφορίας και το πως γίνεται η μεταβολή των ιδιοτήτων μέσω τις JavaScript ο μόνος περιορισμός βρίσκεται στη φαντασία του σχεδιαστή σελίδων. Με τη δυναμική τοποθέτηση μπορούμε να κάνουμε κυρίως τα παρακάτω:

Animation: οι εικόνες που περιέχονται σε κάποιο τοποθετημένο τμήμα μπορούν να κινούνται σε οποιαδήποτε σημεία της σελίδας ακολουθώντας κάποιο συγκεκριμένο δρόμο.

Drop-down menus: Μεταβάλλοντας τον ψαλιδισμό (clipping) τμημάτων επιτρέπει την παρουσίαση ή την απόκρυψη περιοχών από συγκεκριμένα τμήματα. Για τη δημιουργία ενός κυλιόμενου μενού (drop down menu), αρκεί αρχικά να δειχθεί μόνο η πάνω γραμμή του τμήματος που περιλαμβάνει τις βασικές επιλογές του μενού. Όταν ο χρήστης φτάσει στην περιοχή μιας επιλογής από το βασικό μενού, τότε με αλλαγή του ψαλιδισμού γίνεται παρουσίαση της κάθετης περιοχής του επιλεγόμενου μενού

Content-swapping: Τοποθετώντας πολλαπλά τμήματα πληροφορίας στο ίδιο σημείο της οθόνης, κρατώντας μόνο ένα τμήμα ορατό από όλα αυτά, μπορείτε να εναλλάξετε το παλιό με ένα νέο τμήμα αλλάζοντας μόνο την visibility ιδιότητά τους. Εναλλακτικά, κρατώντας δύο τμήματα με τις ίδιες διαστάσεις εφαπτόμενα, μπορείτε να μεταβάλετε την ιδιότητα clipping των τμημάτων για τη δημιουργία ενός εφέ μετάβασης (transition).

Στο Σχήμα 7.15 εμφανίζονται οι ιδιότητες των style sheets όπως ακριβώς ορίζονται από το DOM καθενός φυλλομετρητή.

CSS Property

Netscape Layer Object Property Microsoft Style Object Property

     

position κανένα

Position

Παρατήρηση: η τιμή είναι μόνο για διάβασμα και δεν μπορεί να τροποπιηθεί από κάποια εντολή Javascript.

width κανένα PixelWidthheight κανένα PixelHeight

left

left

Παρατήρηση: Δέχεται είτε έναν ακέραιο (υπονοώντας μονάδες μέτρησης εικονοστοιχεία) ή ως προσοστό.

Παράδειγμα: left=10 ή left="20%"

left ή pixelLeft

Παρατήρηση: το pixelLeft δέχεται μια συμβολοσειρά η οποία καθορίζει τις μονάδες μέτρησης π.χ. pixelLeft="10px" όπου το left δέχεται έναν ακέραιο και υπονοεί μονάδες μέτρησης εικονοστοιχεία (π.χ. left=10).

top top

Παρατήρηση: Δέχεται είτε έναν

top ή pixelTop

Παρατήρηση: το pixelTop δέχεται μια

78

Page 79: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

ακέραιο (υπονοώντας μονάδες μέτρησης εικονοστοιχεία) ή ως προσοστό.

Παράδειγμα: top=10 ή top="20%"

συμβολοσειρά η οποία καθορίζει τις μονάδες μέτρησης π.χ. pixelTop="10px" όπου το top δέχεται έναν ακέραιο και υπονοεί μονάδες μέτρησης εικονοστοιχεία (π.χ. top=10).

clip

clip.top clip.left clip.right clip.bottomclip.widthclip.height

Κάθε διάσταση έχει την δική της ιδιότητα και η αλλαγή κάποιων από αυτές αυτόματα απεικονίζεται στην οθόνη.

"rect(top right bottom left)"

Για να αλλαχθεί το ψαλίδισμα στον MSIE θα πρέπει να καθοριστούν όλες οι συντεταγμένες ψαλιδισμού.

Παράδειγμα:document.all.blockname.style.clip ="rect(0 25 25 0)"

visibility

visibility

Δυνατές τιμές: "inherit", "show", ή "hide"

visibility

Δυνατές τιμές: "inherit", "visible", ή "hidden"

z-index

zIndex

Οποιοσδήποτε θετικός ακέραιος αριθμός.

zIndex

Ο MSIE επιτρέπει και αρνητικούς ακεραίους αλλά για χάη του Netscape είναι καλύτερο να χρησιμοποιούμε μόνο θετικούς ακεραίους.

background-color

BgColor

Δέχεται μια συμβολοσειρά με το όνομα ενός προκαθορισμένου χρώματος ή την δεκαεξαδική RGB τριάδα.

Παράδειγμα:document.layers["blockname"].bgColor ="black"ήdocument.layers["blockname"].bgColor ="#000000"

backgroundColor

Δέχεται μια συμβολοσειρά με το όνομα ενός προκαθορισμένου χρώματος ή την δεκαεξαδική RGB τριάδα.

Παράδειγμα:document.all.blockname.style.backgroundColor ="black"ήdocument.all.blockname.style.backgroundColor ="#000000"

background-image

Background.src

Παράδειγμα:document.layers["blockname"].background.src ="images/tile.jpg"

backgroundImage

Παράδειγμα:document.all.blockname.backgroundImage ="images/tile.jpg"

Σχήμα 7.15 Οι ιδιότητες των style sheets

79

Page 80: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

7.5 Δυναμικά Styles

Εκτός από την τοποθέτηση τμημάτων περιεχομένων σε συγκεκριμένες θέσεις στην οθόνη τα Cascading Style Sheets ή CSS χρησιμοποιούνται επίσης για τον καθορισμό νέων Styles τα οποία επιδρούν πάνω σε στοιχεία μιας σελίδας HTML.

Υπάρχουν πολλοί τρόποι που μπορούν να καθοριστούν styles χρησιμοποιώντας style sheets. Μπορούν να οριστούν styles τα οποία εφαρμόζονται καθολικά σε όλα τα στοιχεία μιας σελίδας HTML. Για παράδειγμα, θα μπορούσε να δημιουργηθεί ένα style sheet το οποίο θα καθόριζε ότι όλα τα στοιχεία <H3> θα είναι bold και θα έχουν χρώμα κόκκινο.

Επίσης μπορούν να οριστούν κλάσεις (classes) οι οποίες θα επιδρούν πάνω σε στοιχεία της σελίδας ανάλογα με το πότε θα γίνει αναφορά σε αυτά. Για παράδειγμα, θα μπορούσε να δημιουργηθεί μια κλάση ονομαζόμενη "redbold" η οποία θα περιλαμβάνει όλα τα styles που είναι bold και έχουν κόκκινο χρώμα γραμμάτων. Αυτή η κλάση redbold θα μπορούσε να οριστεί σε κάποιο στοιχείο με χρήση της ετικέτας CLASS π.χ. <BLOCKQUOTE CLASS="redbold">.

Επίσης μπορεί να γίνει απευθείας ορισμός των styles on-the-fly, χρησιμοποιώντας την παράμετρο STYLE π.χ. <H4 STYLE="color:red; font-weight:bold;">. Όλες αυτές οι αλλαγές ορίζονται μόνο στην ετικέτα στην οποία ορίζονται.

Παρόλο που και η Microsoft και η Netscape υποστηρίζουν τα CSS όπως περιγράφτηκε παραπάνωas αν και η Microsoft υποστηρίζει επιπλέον ιδιότητες των style που δεν υπάρχουν στο Netscape. Η βασική διαφορά μεταξύ των δύο φυλλομετρητών είναι ο βαθμός στον οποίο η υποστήριξη που δίνουν στα CCS είναι όντως δυναμική.

Στον Microsoft Internet Explorer είναι δυνατόν μέσω Javascript να μεταβληθούν πολλές από τις ιδιότητες ενός style sheet ή το style ενός μεμονωμένου στοιχείου. Αυτές οι αλλαγές απεικονίζονται άμεσα και αυτόματα στην οθόνη, δηλ. αν γινόταν αλλαγή της κλάσης redbold ως προς την ιδιότητα color αντί κόκκινου σε μπλέ, τότε κάθε κείμενο του οποίο ο τύπος θα ήταν της κλάσης redbold θα άλλαζε αμέσως σε μπλέ. Αντίθετα στο Netscape δεν θα γινόταν αυτή η αυτόματη αλλαγή. Στο Netscape μπορούν να αλλαχθούν όλες οι ιδιότητες αλλά άπαξ και απεικονιστούν τότε κάθε αλλαγή που θα συμβαίνει από τη στιγμή της απεικόνισης και μετά δεν θα είναι ορατή στην οθόνη.

Μιας και η υποστήριξη της Microsoft για αλλαγές στο style είναι πολύ πιο συμπαγής και αξιόπιστη θα επικεντρωθούμε στα δυναμικά styles του MSIE.

7.6 Εσωτερικά Καθοριζόμενα Styles

Τα ένθετα (inline) styles είναι ένα style το οποίο ορίζεται μόνο σε ένα συγκεκριμένο στοιχείο σελίδας. Τυπικά ένα inline style ορίζεται με την παράμετρο STYLE μέσα στην ετικετα του στοιχείου (π.χ. <H2 STYLE="color:blue;">).

Κάθε αλλαγή στο inline style στον MSIE απεικονίζεται αυτόματα και στην οθόνη. Αυτό είναι εφικτό με χρήση του αντικειμένου Style που τo DOM του MSIE υποστηρίζει κάθε ιδιότητα που υποστηρίζεται από τα CSS για styles. Να σημειωθεί όμως ότι τα ονόματα ιδιοτήτων διαφέρουν λιγάκι μεταξύ της CSS σύνταξης και της DOM σύνταξης. Ευτυχώς οι διαφορές ακολουθούν έναν συγκεκριμένο και σταθερό κανόνα. Ας θεωρήσουμε την CSS ιδιότητα font-weight. Η αντίστοιχη ιδιότητα

80

Page 81: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

ονομάζεται fontWeight. Όμοια η CSS ιδιότητα text-align αντιστοιχεί στην ιδιότητα αντικειμένου Style με όνομα textAlign.

Έστω ότι έχουμε τις ακόλουθες εντολές:

<P ID="selectrule" ALIGN="left" STYLE="color:blue; font-weight:normal;">Παρακαλώ διαλέξτε ένα είδος από τα παρακάτω.</P>

ή αλλιώς

document.all.selectrule.style.color="red";document.all.selectrule.style.fontWeight="bold";

Όταν εκτελεστούν οι παραπάνω εντολές, τότε το κείμενο που έχει σχέση με το selectrule θα γίνει κόκκινο και bold. Φυσικά και μπορεί το στοιχείο να τεθεί στην αρχική του κατάσταση θέτωντας το color σε μπλές και το fontWeight σε "normal".

Να σημειώσουμε ότι οι εντολές μεταβολής των styles είναι άμεση. Οποιαδήποτε στιγμή μπορεί να γίνει αυτό ακόμα και αν το style δεν ήταν ορισμένο inline αλλά απο κληρονομικότητα από κάποια άλλη κλάση ή κάποιου καθολικού style sheet.

7.7 Αλλαγή των Styles

Η αλλαγή ενός style κάποιου στοιχείου της σελίδας είναι απόλυτα ακριβής αν και κάποιες φορές ίσως να απαιτείται ένα πιο καθολικό αποτέλεσμα δημιουργώντας ένα καθολικό style.

Παρακάτω ορίζονται δύο style το οποίο περιλαμβάνει: ένα καθολικό style που αναφέρεται σε όλα τα στοιχεία <H3> (blue, arial font family, large size), και μια γενική κλάση ονομαζόμενη warning (red, bold, italic) η οποία και έχει επίδραση σε όλα τα στοιχεία που την χρησιμοποιούν.

<STYLE ID="sheet1">H3 { color:blue; font-family:"Arial"; font-size:large; }.warning { color:red; font-weight:bold; font-style:italic; }

</STYLE>

Από τη στιγμή που οι παραπάνω γραμμές μεταφραστούν και γίνουν οι απαραίτητες αντιστοιχήσεις, το επόμενο βήμα είναι η αντιστοίχηση αυτού του style sheet ώστε οι αλλαγές να είναι άμεσα ορατές στην οθόνη. Αυτό είναι εφικτό με τη χρήση των λεγόμενων κανόνων (rule) στον καθορισμό ενός style sheet. Ενδεικτικά η γραμμή που καθορίζει την μορφή του H3 είναι ένας κανόνας, ενώ η γραμμή η οποία ορίζει την κλάση warning είναι ένας δεύτερος κανόνας.

Στο DOM της Microsoft, η προσπέλαση του style γίνεται μέσω του πίνακα styleSheets[]. Οτιδήποτε βρίσκεται μέσα σε ένα ζευγάρι ετικετών <STYLE>... </STYLE> ορίζεται ως ένα style sheet, όπως στο παραπάνω παράδειγμα. Αν αυτή ήταν η πρώτη φορά που εμφανίζονταν οι ετικέτες <STYLE> στον πηγαίο κώδικα, τότε αυτό είναι κατ’ επέκταση το πρώτο style sheet. Η προσπέλαση σε αυτό γίνεται με την ακόλουθη αναφορά:

document.styleSheets[0]

Ο παραπάνω πίνακας περιέχει και μια εγγραφή για κάθε κανόνα αυτού. Έτσι για την προσπέλαση του πρώτου κανόνα του πρώτου style sheet, δηλαδή του κανόνα H3, αρκεί να γράψουμε:

document.styleSheets[0].rules[0]

Για την κλάση warning αρκεί να γράψουμε:

document.styleSheets[0].rules[1]

81

Page 82: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Να σημειώσουμε ότι το αντικείμενο style κατέχει και τα χαρακτηριστικά των κανόνων του style sheet στο οποίο αναφέρονται. Για παράδειγμα για να αλλαχθεί σε κόκκινο το χρώμα των γραμμάτων της H3 ετικέτας αρκεί να γράψουμε:

document.styleSheets[0].rules[0].style.color="red";

Η αλλαγή της οικογένειας της γραμματοσειράς, σε Courier New Roman Greek, πετυχαίνεται με την εντολή:

document.styleSheets[0].rules[0].style.fontFamily="Courier New Roman Greek";

Γενικά μπορεί να αλλαχθεί οποιαδήποτε ιδιότητα ενός style ακόμα κι αν δεν έχει καθοριστεί στο αρχικό style sheet. Έτσι, αν ξαφνικά θέλαμε την αλλαγή του κειμένου H3 στη σελίδα να γίνει πλάγιο αρκεί να γράφαμε:

document.styleSheets[0].rules[0].style.fontStyle="italic";

Όμοια αλλάζοντας το αντικείμενο style για την κλάση warning (document.styleSheets[0].rules[1].style.property) τότε αυτή η αλλαγή θα διαδιδόταν σε όλες τις ετικέτες που χρησιμοποιούν την κλάση αυτή δηλ. CLASS="warning"; π.χ. <P CLASS="warning">.

Τα δυναμικά styles δίνουν πράγματι μεγάλη ευελιξία στον κατασκευαστή σελίδων στην αλλαγή του ύφους και της όψης μιας σελίδας μέσα σε δευτερόλεπτα. Μια πολύ χρήσιμη ιδιότητα είναι η display η οποία καθορίζει το αν το style θα σχηματιστεί η όχι. Ένα μη σχηματισμένο (unrendered style) δεν θα καταλαμβάνει κανένα σημείο της οθόνης παρά μόνο όταν αλλαχθεί η ιδιότητα display από "none" σε "block" κάθε αντικείμενο με αυτό το style θα εμφανιστεί άμεσα. Το υπόλοιπο μέρος της σελίδας σχηματίζεται αυτόματα ώστε να φιλοξενήσει το νεοεμφανιζόμενο περιεχόμενο. Αυτό διαφέρει από το αόρατο τμήμα οθόνης ακριβώς στο σημείο ότι ολόκληρη η σελίδα μεγαλώνει ή μικραίνει για να φιλοξενήσει το νεοεμφανιζόμενο περιεχόμενο που περιλαμβάνεται στο style.

7.8 Γεγονότα

Υπάρχουν πολλοί τύποι γεγονότων που μπορούν να εμφανιστούν σε κάποια σελίδα παγκόσμιου ιστού, τα περισσότερα των οποίων προκαλούνται από το χρήστη/επισκέπτη της σελίδας. Έτσι ο χρήστης μπορεί να πατήσει σε κάποιο κουμπί (γεγονός click), ή να μετακινήσει το ποντίκι πάνω από κάποιο στοιχείο της σελίδας (γεγονός mouseover), ή να κινήσει το ποντίκι εκτός ενός στοιχείου σελίδας (γεγονός mouseout). Ο χρήστης μπορεί να στείλει μια φόρμα (γεγονός submit) ή να αλλάξει το μέγεθος του παραθύρου του φυλλομετρητή (γεγονός resize). Υπάρχουν όμως και γεγονότα που συμβαίνουν χωρίς την άμεση παρέμβαση του χρήστη όπως το γεγονός load όταν έχει ολοκληρωθεί το πλήρες φόρτωμα όλων των αντικειμένων της σελίδας.

Ο έλεγχος όλων των γεγονότων καθορίζεται με Javascript. Πάλι υπάρχει η ασυμβατότητα μεταξύ φυλλομετρητών Microsoft και Netscape μιας και δεν υποστηρίζουν το ίδιο DOM.

Handlers Γεγονότων

Ο handler ενός γεγονότος δημιουργείται ως ένα χαρακτηριστικό της ετικέτας που ορίζει το στοιχείο της σελίδας που θα παγιδεύσει το γεγονός. Το χαρακτηριστικό του handler γεγονότος ακολουθεί τη σύνταξη onEventname και δέχεται προτάσεις σε JavaScript για την εκτέλεση της λειτουργίας του. Για παράδειγμα η ακόλουθη ετικέτα ορίζει μία σύνδεση (link) με τον handler γεγονότος mouseover:

<A HREF="page.html"

82

Page 83: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

onMouseOver="changeStatus('Read this page'); return true">Click here!</A>

Ο handler γεγονότος onOouseOver παγιδεύει το γεγονός mouseover. Όταν το γεγονός αυτό συμβαίνει στο στοιχείο καλείται η συνάρτηση σε JavaScript με όνομα changeStatus(). Στη θέση της συνάρτησης JavaScript μπορεί να περιληφθεί οποιοδήποτε κώδικας Javascript.

Έστω ότι θέλουμε στην εντολή:

< A HREF=”color.html”>Example</A>

στο γεγονός mouseover (στον MSIE) να αλλάξει το χρώμα του style sheet σε μπλε θα χρησιμοποιούσαμε τις ακόλουθες γραμμές:

<A HREF="page.html"

onMouseOver="document.styleSheets[0].rules[0].style.color='blue'">Click here</A>

Το παραπάνω παράδειγμα προϋποθέτει χρήση του MSIE μιας και δυναμικές αλλαγές σε style sheet δεν υποστηρίζονται από το Netscape.

Και οι δύο φυλλομετρητές υποστηρίζουν επιπλέον γεγονότα για την ανίχνευση πατημάτων στοιχείων φορμών ή άλλων ενεργειών με το ποντίκι, ενώ ο MSIE υποστηρίζει επιπλέον γεγονότα και εφαρμόζεται στο μέγιστο σχεδόν αριθμό από στοιχεία της οθόνης. Για παράδειγμα στο Netscape το γεγονός mouseover ορίζεται μόνο για μια σύνδεση <A>, περιοχή <AREA> ή τμήμα <LAYER> ενώ στον MSIE εφαρμόζεται σχεδόν σε όλα τα στοιχεία περιλαμβανομένου των εικόνων <IMG> και των παραγράφων <P>.

Μέχρι στιγμής ισχύει ο ακόλουθος γενικός κανόνας μεταξύ των δύο φυλλομετρητών: το Netscape περιορίζει κάποιο γεγονός σε περιορισμένο αριθμό στοιχείων οθόνης ενώ ο MSIE επιτρέπει στα περισσότερα γεγονότα να εφαρμόζονται στο μεγαλύτερο δυνατό αριθμό στοιχείων.

Ας δούμε και πως δημιουργείται ένα γνωστό εφέ σε DHTML. Πρόκειται για την αίσθηση που δίνεται στο χρήστη ότι κάποιο κουμπί ή κομμάτι κειμένου είναι ενεργό όταν το ποντίκι περνά από πάνω του, ενώ όταν απομακρύνεται το στοιχείο μένει στην αρχική του μορφή.

Παρακάτω θα βρείτε μια απλή έκδοση που λειτουργεί μόνο σε MSIE ενός εφέ πάνω σε κείμενο. Το κείμενο θεωρείται "ενεργό” όταν γίνεται κόκκινο και bold και "μη ενεργό" όταν γίνεται κανονικό μπλε.

<A HREF="somepage.html" TARGET="mainframe" STYLE="color:blue; font-weight:normal; font-family:Arial;"onMouseOver="this.style.color='red';this.style.fontWeight='bold'"onMouseOut="this.style.color='blue';this.style.fontWeight='normal'">Today's special</A>

ΓεγονόςHandlerΓεγονότος

Περιγραφή

click onClickΟ χρήστης πατά (click) το κουμπί του ποντικιού πάνω σε κάποιο στοιχείο.

submit onSubmitΟ χρήστης στέλνει μια φόρμα, αυτό το γεγονός συμβαίνει πριν εκτελεστεί η αποστολή φόρμας.

83

Page 84: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

reset onReset Ο χρήστης αρχικοποιεί τη φόρμα.

focus onFocusΟ χρήστης ενεργοποιεί (φέρνει στο προσκήνιο) ένα στοιχείο είτε με το ποντίκι είτε με το πλήκτρο TAB.

blur onBlurΟ χρήστης χάνει το προσκήνιο από ένα στοιχείο πατώντας σε κάποιο άλλο.

mouseover onMouseOver Ο χρήστης κινεί το ποντίκι πάνω σε κάποιο στοιχείο.mouseout onMouseOut Ο χρήστης κινεί το ποντίκι εκτός κάποιου στοιχείου.mousemove onMouseMove Ο χρήστης κινεί το ποντίκι

change onChangeΟ χρήστης κινεί το ποντίκι αλλάζει την τιμή σε ένα πεδίο text, textarea, ή select.

select onSelectΟ χρήστης επιλέγει (highlights) μια περιοχή κειμένου σε ένα πεδίο text ή textarea.

resize onResizeΟ χρήστης αλλάζει τις διαστάσεις του παραθύρου ή του frame του φυλλομετρητή.

move onMoveΟ χρήστης κινεί το παράθυρο ή το frame του φυλλομετρητή

load onLoad Η σελίδα έχει φορτώσει πλήρως.

unload onUnloadΟ χρήστης πατά σε κάποια άλλη σύνδεση και φεύγει από κάποια σελίδα.

error onErrorΈνα λάθος συμβαίνει κατά το φόρτωμα μιας εικόνας ή της σελίδας.

abort onAbortΟ χρήστης σταματά μια εικόνα από το να φορτωθεί πατώντας το κουμπί stop.

7.9 Χρήσιμες διευθύνσεις

DHTML

http :// www . htmlguru . com

Beginner's Guide to DHTML

http://www.javascriptkit.com/howto/dhtmlguide.shtml

Links & Resources for DHTML

http://developer.netscape.com/docs/manuals/communicator/dynhtml/

CSS

http://www.w3.org/MarkUp/Guide/Style

http://www.w3schools.com/css/default.asp

Softworks Web Resources - Authoring

http://www.softworks.se/swr/authoring.htm

84

Page 85: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

8 PHP – HYPERTEXT PRE PROCESSOR

Το php είναι ένα server-side scripting περιβάλλον που επιτρέπει τη δημιουργία δυναμικών ιστοσελίδων (HTML pages). Συνδυάζει κώδικα σε HTML και εντολές script γραμμένες σε μία C-like γλώσσα. Ένα server-side script εκτελείται όταν ο φυλλομετρητής του χρήστη ζητήσει ένα.php3 αρχείο από το Web εξυπηρετητή. Ο Web εξυπηρετητής, στη συνέχεια, καλεί το php module το οποίο επεξεργάζεται σειριακά το αρχείο εκτελώντας τις εντολές script και στέλνει μία ιστοσελίδα στο φυλλομετρητή. Ο χρήστης δεν μπορεί να δει τις εντολές script που δημιούργησαν την ιστοσελίδα.

Το server-side scripting δίνει σχεδόν τις ίδιες υπολογιστικές δυνατότητες στους σχεδιαστές της Web εφαρμογής με το CGI (Common Gateway Interface) χωρίς τους περιορισμούς στην απόδοση του συστήματος και τις δυσκολίες ανάπτυξης των CGI εφαρμογών. Συγκεκριμένα το php module μεταγλωττίζεται μαζί με το module του Apache επιτρέποντας την εκτέλεση του HTML pre-processor μέσα στη διεργασία (process) του web εξυπηρετητή και όχι με τη δημιουργία νέας διεργασίας όπως γίνεται στην περίπτωση των CGI εφαρμογών. Το server-side scripting υποστηρίζει διατήρηση πληροφορίας για τους χρήστες από σελίδα σε σελίδα και πρόσβαση σε βάσεις δεδομένων. Διαχωρίζει το περιεχόμενο από την παρουσίαση για ευκολότερο σχεδιασμό και διαχείριση των δεδομένων. Το περιεχόμενο μίας σελίδας μπορεί να προέρχεται από διάφορες πηγές –βάσεις δεδομένων, αρχεία κειμένου, αποτελέσματα αναζήτησης, υπολογισμούς– και εισάγεται δυναμικά πριν την αποστολή της σελίδας στο χρήστη.

Το server-side scripting υποστηρίζεται από όλους τους δημοφιλείς Web εξυπηρετητές. Η Microsoft, για παράδειγμα, ονομάζει το server-side scripting περιβάλλον της ASP(active server pages). Όμως η συμβατότητά του περιορίζεται στους Web εξυπηρετητές που αποτελούν προϊόντα της Microsoft –συγκεκριμένα τον IIS (Internet Information Server)–. Το php, αντίθετα, αποτελεί ένα freeware προϊόν που είναι συμβατό με τα περισσότερα λειτουργικά συστήματα και με τους δύο δημοφιλέστερους Web εξυπηρετητές (Apache και MS IIS). Τέλος ένα επίσης δημοφιλές server-side scripting περιβάλλον που συνεργάζεται με αρκετούς Web εξυπηρετητές είναι το JSP (JavaServer Pages), μία επέκταση της τεχνολογίας JavaServlet.

8.1 Χρήσιμες διευθύνσεις

PHP

http :// www . php . net

http://www.php.net/manual/en/tutorial.php

ASP

http://msdn.microsoft.com/workshop/server/asp/asptutorial.asp

http :// www .15 seconds . com

http :// www . asp 101. com /

http://www.w3schools.com

85

Page 86: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

JSP

http :// java . sun . com / products / jsp /

http://java.sun.com/products/jsp/docs.html

86

Page 87: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

9 Η ΓΛΏΣΣΑ XML (EXTENSIBLE MARKUP LANGUAGE)

H XML είναι μια γλώσσα που σχεδιάστηκε για την περιγραφή δεδομένων. Mοιάζει αρκετά με την HTML, γεγονός που οφείλεται στο ότι και οι δύο έψουν προκύψει από την SGML (Standard Generalized Markup Language). Η XML χρησιμοποιείται για την περιγραφή της πληροφορίας ενώ η HTML για την παρουσίαση της πληροφορίας. Στην XML μπορούμε να ορίσουμε τα δικά μας tags προκειμένου να περιγράψουμε την πληροφορία που θέλουμε. Το επόμενο παράδειγμα απεικονίζει την μορφή ενός τυπικού XML αρχείου:

<?xml version="1.0"?>

<bookstore>

<book paperback=”yes” cdrom=”no”>

<title>A Guide to XML technology</title>

<author>Robert Stewart</author>

<price>30$</price>

</book>

<book paperback=”no” cdrom=”yes”>

<title>A Guide to XSL</title>

<author>Jim Feather</author>

<price>20$</price>

</book>

</bookstore>

Παράδειγμα 1: Τυπικό XML αρχείο

Ενδεικτικά αναφέρονται μερικές εφαρμογές που μπορεί να χρησιμοποιηθεί η γλώσσα XML:

1. Ανταλλαγή δεδομένων μεταξύ μη συμβατών συστημάτων.

2. Δυνατότητα διαμοίρασης δεδομένων διαφόρων εφαρμογών.

3. Δυνατότητα απεικόνισης των ίδιων δεδομένων με διαφορετικό τρόπο ανάλογα με τον σκοπό της χρήσης τους (π.χ. παρουσιάση λογιστικών δεδομένων σε πίνακα ή σε διάγραμμα).

87

Page 88: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

4. Δημιουργία νέων γλωσσών (π.χ. η γλώσσα WAP που χρησιμοποιείται για την αναπαράσταση πληροφορίας του Internet σε κινητά τηλέφωνα, είναι γραμμένη σε XML)

9.1 Το συντακτικό της γλώσσας XML

Το συντακτικό της γλώσσας XML βασίζεται σε μερικούς απλούς κανόνες:

1. Κάθε tag πρέπει να κλείνει (π.χ. <name>Angelos</name>).

2. Τα tags είναι case sensitive (π.χ. το <name> είναι διαφορετικό από το <Name>).

3. Όταν έχουμε tags μέσα σε άλλα tags τότε πρέπει να κλείνει πρώτο το tag που άνοιξε τελευταίο. (π.χ. το <book><title>XML</book></title> είναι λάθος ενώ το σωστό θα ήταν <book><title>XML</title></book>).

4. Όλα τα XML αρχεία πρέπει να έχουν ένα root tag.

9.2 XML DTD (Document Type Definition)

Ο σκοπός του DTD είναι να ορίσει τα νόμιμα tags ενός XML κειμένου και τον τρόπο που αυτά συσχετίζονται μεταξύ τους. Το DTD χρησιμοποιεί τα επόμενα keywords:

1. !ELEMENT tag(tag1,tag2,…,tagn)Ορίζει ένα tag. Όλα τα tags που βρίσκονται ανάμεσα στις παρενθέσεις είναι τα παιδιά του tag που ορίζουμε.

2. !ATTLIST tag attribute1 type #value … attributen type #valueΟρίζει τα attributes για το συγκεκριμένο tag.

3. !ENTITY % name “value”Ορίζει μια συντόμευση για ένα όνομα η μια έκφραση. Το σύμβολο % χρησιμοποιείται για μια συλλογή τιμών.

Το επόμενο παράδειγμα δείχνει την χρήση των DTD keywords:

<!ENTITY % Binary “yes | no”>

<!ELEMENT bookstore (book+)>

<!ELEMENT book (title,author,price))>

<!ATTLIST book paperback (%Binary) #REQUIRED

cdrom (%Binary) #REQUIRED>

88

Page 89: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

<!ELEMENT title (#PCDATA)>

<!ELEMENT author (#PCDATA)>

<!ELEMENT price (#PCDATA)>

Παράδειγμα 2: DTD για το XML αρχείο του παραδείγματος 1

9.3 Η γλώσσα XSL (Extensible Stylesheet Language)

H XSL (EΧtensible Stylesheet Language) είναι μια γλώσσα που χρησιμοποιείται για να ορίσει τον τρόπο αναπαράστασης της πληροφορίας που βρίσκεται σε ένα XML αρχείο μετατρέποντας το σε μορφή αναγνωρίσιμη από έναν browser (π.χ. HTML). Επίσης η XSL Μπορεί να χρησιμοποιηθεί για να προσθέσει ή να αφαιρέσει tags σε ένα XML αρχείο, ή να ταξινομήσει τα tags με βάση συγκεκριμένα κριτήρια. Η γλώσσα XSL δημιουργεί templates τα οποία παίρνουν τα πραγματικά δεδομένα που θα απεικονισθούν από αρχεία XML. Τα σημαντικότερα keywords της XSL είναι τα επόμενα:

1. <xsl:template match=”tag”>. . .</xsl:template>:Ορίζει τον HTML κώδικα για το συγκεκριμένο XML tag.

2. <xsl:value-of select=”name”/>:

Επιστρέφει την τιμή ενός attribute ενός tag ή το κείμενο που σχετίζεται με έναν κόμβο του XML κειμένου (δηλ. το περιεχόμενο του tag)

3. <xsl:for-each select=”name”>. . .</xsl:for-each>:Επαναλαμβάνει ότι ακολουθεί για κάθε tag που ταιριάζει με το συγκεκριμένο tag name.

4. <xsl:apply-templates match=”name”/>:Εφαρμόζει όλα τα δυνατά templates στα tags που ταιριάζουν στην περιγραφή.

5. <xsl:element name = ”Name”>. . .</xsl:element>:Ορίζει ένα HTML tag δυναμικά. Μέσα στο σώμα μπορούν να οριστούν όσα attributes χρειάζονται.

6. <xsl:attribute name = ”Name”>Value</xsl:attribute>:

89

Page 90: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Ορίζει ένα attribute για ένα tag. Το πεδίο name είναι το όνομα του attribute ενώ η τιμή του καθορίζεται από την τιμή Value.

Η χρήση των παραπάνω keywords φαίνεται στα παρακάτω παραδείγματα. Το XML αρχείο που περιέχει έναν κατάλογο με μουσικά CD (music.xml) χρησιμοποιεί το XSL αρχείο music.xsl για να απεικονίσει μερικά από τα στοιχεία για κάθε CD (τον τίτλο και το όνομα του καλλιτέχνη) σε έναν πίνακα.

<?xml version="1.0"?>

<?xml-stylesheet type="text/xsl" href="music.xsl"?>

<CATALOG>

<CD>

<TITLE>Empire Burlesque</TITLE>

<ARTIST>Bob Dylan</ARTIST>

<COUNTRY>USA</COUNTRY>

<COMPANY>Columbia</COMPANY>

<PRICE>10.90</PRICE>

<YEAR>1985</YEAR>

</CD>

<CD>

<TITLE>Hide your heart</TITLE>

<ARTIST>Bonnie Tylor</ARTIST>

<COUNTRY>UK</COUNTRY>

<COMPANY>CBS Records</COMPANY>

<PRICE>9.90</PRICE>

<YEAR>1988</YEAR>

</CD>

. . .

. . .

. . .

</CATALOG>

Παράδειγμα 3: XML αρχείο “music.xml” για μουσικά CD

<?xml version='1.0'?><xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"><xsl:template match="/"> <html> <body>

90

Page 91: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

<table border="2" bgcolor="yellow"> <tr> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="CATALOG/CD"> <tr> <td><xsl:value-of select="TITLE"/></td> <td><xsl:value-of select="ARTIST"/></td> </tr> </xsl:for-each> </table> </body> </html></xsl:template></xsl:stylesheet>

Παράδειγμα 4: XSL αρχείο για την απεικόνιση του “music.xml”

9.4 DOM (Document Object Model)

Το DOM είναι ένα standard για να προσπελάσουμε προγραμματιστικά την δομή και τα δεδομένα που περιέχονται σε ένα αρχείο XML. To DOM βασίζεται στην δενδρική αναπαράσταση ενός XML κειμένου στην μνήμη. Ορίζει το προγγραμματιστικό interface οποίο μπορούμε να διασχίσουμε ένα XML δένδρο και να προσπελάσουμε τα tags, τις τιμές τους και τα attributes.

9.5 SAX (Simple API for XML)

Το SAX είναι ένα πολύ απλό XML API που επιτρέπει στους προγραμματιστές να επωφεληθούν από το event-driven XML parsing. Αντίθετα απ’ ότι συμβαίνει με το DOM που απαιτεί να φορτωθεί στη μνήμη ολόκληρο το XML αρχείο, ο ΧML parser κάθε φορά που διαβάζει ένα στοιχείο XML καλεί τον αντίστοιχο handler που έχει ορίσει ο προγραμματιστής.

9.6 XLink (XML Linking)

Το Xlink είναι μια προδιαγραφή για διαχείριση συνδέσμων ανάμεσα σε XML κείμενα. Επιτρέπει την εισαγωγή στοιχείων (elements) σε XML κείμενα με σκοπό την δημιουργία και περιγραφή συνδέσμων μεταξύ πόρων. Χρησιμοποιεί το συντακτικό της XML για να ορίσει τους απλούς υπερσυνδέσμους της HTML, καθώς και πιο πολύπλοκους συνδέσμους.

9.7 XPointer

To XPointer ορίζει τον τρόπο προσπέλασης εσωτερικών δομών XML κειμένων. Επιτρέπει την διάσχιση του XML δένδρου και την επιλογή εσωτερικών τμημάτων με βάση διάφορες ιδιότητες, όπως τους τύπους των στοιχείων (elements), τις τιμές των attributes, περιεχόμενο και σχετική θέση.

91

Page 92: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

9.8 Χρήσιμες Διευθύνσεις

9.8.1 Technical Reading

http://www.w3.org

http://www.xml.com

http://www.xml.org

http://msdn.microsoft.com/xml

9.8.2 Turorials

http://www2.software.ibm.com/developer/education.nsf/xml-onlinecourse-bytitle

http://www.xslt.com/resources_tutorials.htm

http://www.1001tutorials.com/xml/index.html

http://www.hypermedic.com/style/xml/xmlindex.htm

http://www.xslinfo.com/tutorials

http://java.sun.com/xml/tutorial_intro.html

http://www.w3schools.com

9.8.3 XML FAQs

http://www.ucc.ie/xml/

9.8.4 XML tools

http://link.xmlspy.com/

http://xmlwriter.net/

92

Page 93: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

10 ΥΠΗΡΕΣΊΕΣ ΔΙΑΔΙΚΤΎΟΥ (WEB SERVICES)

10.1 Γενική περιγραφή

Το μέλλον του διαδικτύου βασίζεται στην εγκαθίδρυση ενός πιο αποδοτικού μέσου ανταλλαγής δεδομένων, από τις HTML σελίδες που χρησιμοποιούνται σήμερα. Οι επιχειρήσεις πρέπει να είναι ικανές να:

Δημοσιεύουν interfaces για τις υπηρεσίες που παρέχουν, με τρόπο παρόμοιο με αυτόν που δημοσιεύουν σήμερα σελίδες κειμένου σε HTML, έτσι ώστε άλλες επιχειρήσεις να μπορούν να βρουν αυτές τις υπηρεσίες και να τις χρησιμοποιήσουν.

Αναζητήσουν και να ανακαλύψουν δημοσιευμένα interfaces εμπορικών συνεργατών, ή άλλων επιχειρήσεων με τις οποίες επιθυμούν συνεργασία μέσω του διαδικτύου.

Αλληλεπιδρούν με υπηρεσίες που δημοσιεύονται από άλλες επιχειρήσεις, και αντίστροφα να επιτρέπουν σε άλλες επιχειρήσεις να συνεργάζονται με τις δικές τους υπηρεσίες και να καθορίζουν εμπορικές συμφωνίες για ροή εγγράφων.

Οι υπηρεσίες διαδικτύου (web services) είναι XML αναπαραστάσεις προγραμμάτων, αντικειμένων ή κειμένων που είναι προσπελάσιμα μέσω Internet για απ’ ευθείας αλληλεπίδραση μεταξύ εφαρμογών. Οι υπηρεσίες διαδικτύου μπορούν να προσπελαστούν με χρήση φυλλομετρητών , αλλά δεν απαιτείται η χρήση ούτε φυλλομετρητή ούτε HTML. Οι υπηρεσίες διαδικτύου παρέχουν έναν ανεξάρτητο από δεδομένα μηχανισμό παρουσίασης των υπηρεσιών της επιχείρησης, με χρήση στάνταρντ XML πρωτοκόλλων.

Οι τεχνολογίες που χρησιμοποιούνται συμπεριλαμβάνουν:

XML, που περιλαμβάνει βασική XML, XML schemas και XML parsers. SOAP (Simple Object Access Protocol), που αποτελεί ένα πρωτόκολλο

επικοινωνίας εφαρμογών βασισμένο σε XML. WSDL (Web Services Description Languages), που είναι ένα XML schema για

περιγραφή των μηνυμάτων, λειτουργιών και αντιστοιχήσεις πρωτοκόλλων των υπηρεσιών διαδικτύου.

UDDI (Universal Description Discovery and Integration), που είναι ο χώρος αποθήκευσης για καταχώρηση και αναζήτηση περιγραφών υπηρεσιών διαδικτύου.

Η ανάγκη για χρήση των υπηρεσιών διαδικτύου ανακύπτει από την απαίτηση των χρηστών να μπορούν να έχουν εύκολη πρόσβαση σε πληροφορία που μπορεί να δημοσιευτεί σε οποιοδήποτε μέρος του διαδικτύου. Η υπάρχουσα τεχνολογική υποδομή του παγκοσμίου ιστού αν και έχει διευκολύνει τον κόσμο των επιχειρήσεων έχει μερικούς περιορισμούς. Δεν καλύπτει την ανάγκη αυτόματης αλληλεπίδρασης μεταξύ εφαρμογών. Σήμερα οι εφαρμογές πρέπει να εκτελεστούν «με το χέρι» χρησιμοποιώντας έναν φυλλομετρητή. Επίσης χρειάζεται ένας καλύτερος μηχανισμός

93

Page 94: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

για την αναζήτηση πληροφορίας στο διαδίκτυο από αυτόν που χρησιμοποιείται σήμερα και βασίζεται στην «σάρωση» HTML σελίδων προκειμένου να βρεθεί το ζητούμενο αλφαριθμητικό ή ομάδα αλφαριθμητικών. Οι υπηρεσίες διαδικτύου έρχονται να καλύψουν τέτοιου είδους κενά εκμεταλλευόμενες την κατανεμημένη μορφή του διαδικτύου και παρέχοντας ένα νέο μοντέλο ανταλλαγής της πληροφορίας.

10.2 Simple Object Access Protocol (SOAP)

To SOAP είναι ένα πλαίσιο ανταλλαγής μηνυμάτων βασισμένο σε XML. Είναι ειδικά σχεδιασμένο για την ανταλλαγή μηνυμάτων μέσω διαδικτύου. Είναι απλό στη χρήση, και εντελώς ανεξάρτητο από λειτουργικό σύστημα, γλώσσα προγραμματισμού ή πλατφόρμα κατανεμημένων συστημάτων.

Εκτός από το να παρέχει μια αντιστοίχηση σε ένα επίπεδο μεταφοράς για την ανταλλαγή XML μηνυμάτων μέσω του διαδικτύου, με το SOAP μια επιχείρηση μπορεί να:

Δημοσιοποιήσει τις υπηρεσίες της για ανταλλαγή XML εταιρικών δεδομένων. Ανακαλύψει την τοποθεσία και την μορφή υπηρεσιών άλλων επιχειρήσεων. Καθορίσει ιδιότητες των ανταλλασόμενων μηνυμάτων που σχετίζονται με την

ποιότητα της υπηρεσίας.

Σχήμα 16: SOAP Μηνύματα για διασύνδεση απομακρυσμένων δικτυακών τόπων

Όπως φαίνεται στο σχήμα παραπάνω, το SOAP παρέχει έναν ανεξάρτητο και γενικό πρωτόκολλο επικοινωνίας για την σύνδεση δύο ή περισσότερων πυλών ή εταιρικών δικτυακών τόπων. Τα σημερινά συστήματα αποτελούνται από έναν συνδυασμό πολλών διαφορετικών κατηγοριών υλικού και λογισμικού. To SOAP και η XML βοηθούν στην συμφωνία ενός κοινού τρόπου ανταλλαγής δεδομένων μεταξύ ετερογενών συστημάτων. Το WSDL χρησιμοποιείται για την περιγραφή των υπηρεσιών και το SOAP για την μετάδοση της πληροφορίας.

Το σχήμα 17 δείχνει τον μηχανισμό με τον οποίο επιτυγχάνεται η ανακάλυψη των υπηρεσιών μιας εταιρείας με χρήση SOAP.

1. Η επιχείρηση Α χρησιμοποιεί ένα URL που παρέχεται από την επιχείρηση Β για να ανακτήσει μια λίστα με τις υπηρεσίες που δημοσιεύει η Β.

2. Η επιχείρηση Α «κατεβάζει» τα XML schemas (συνήθως σε WSDL) που περιγράφουν την μορφή των μηνυμάτων που αναμένονται από τις υπηρεσίες της εταιρείας Β.

94

Page 95: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

3. Η επιχείρηση A σχηματίζει το ανάλογο XML μήνυμα και το αποστέλλει μέσω SOAP στην επιχείρηση Β.

4. Η επιχείρηση Β στέλνει μια απάντηση, μέσω SOAP, την οποία η επιχείρηση Α ερμηνεύει χρησιμοποιώντας την πληροφορία για το XML schema που έλαβε στο βήμα 2.

Σχήμα 17: Ανακάλυψη SOAP υπηρεσιών

Με αυτόν το τρόπο, οι δύο επιχειρήσεις μπορούν να ανταλλάξουν πληροφορία για τις υπηρεσίες που επιθυμούν παρέχουν και να καταναλώσουν.

Μία άλλη μέθοδος ανακάλυψης υπηρεσιών είναι με χρήση του UDDI.

10.2.1 Μορφή SOAP μηνύματος

Η τρέχουσα έκδοση της προδιαγραφής SOAP (V1.1) είναι διαθέσιμη από το World Wide Web Consortium (W3C) στην διεύθυνση http :// www . w 3. org / TR / SOAP . To SOAP αναπτύσσεται συνεχώς και κάποιες λεπτομέρειες μπορεί να αλλάξουν στο προσεχές μέλλον.

Τα μηνύματα SOAP αποτελούνται από τρία βασικά μέρη:

Τον Φάκελο (Envelope). Την Επικεφαλίδα (Header), που είναι προαιρετική. Το Σώμα (Body).

Το σχήμα 3 απεικονίζει τα τρία μέρη από τα οποία αποτελείται ένα SOAP μήνυμα.

Σχήμα 18 Μέρη ενός SOAP Μηνύματος

Ο φάκελος είναι υποχρεωτικός, και ουσιαστικά μαρκάρει την αρχή και το τέλος του μηνύματος (αν και τα μηνύματα μπορεί να περιέχουν συνδέσμους

95

Page 96: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

σε αντικείμενα εκτός του φακέλου). Περιέχει πληροφορίες για το περιεχόμενο του μηνύματος και πως να γίνει η επεξεργασία του.

Η επικεφαλίδα είναι προαιρετική και περιέχει επιπλέον πληροφορία που σχετίζεται με την ασφάλεια, τις συναλλαγές και την ποιότητα των υπηρεσιών. Περιλαμβάνει έναν μηχανισμό με τον οποίο τα συναλλασόμενα μέρη διαπραγματεύονται συμφωνία για υποστήριξη μιας συγκεκριμένης επικεφαλίδας ή συνόλου επικεφαλίδων. Ένα SOAP μήνυμα μπορεί να έχει περισσότερες από μια επικεφαλίδες.

Το σώμα περιέχει τα δεδομένα του πραγματικού μηνύματος.

10.3 Web Services Description Language (WSDL)

Αφού το SOAP έγινε διαθέσιμο σαν ένας μηχανισμός ανταλλαγής XML μηνυμάτων μεταξύ επιχειρήσεων (ή ξεχωριστών εφαρμογών μέσα στην ίδια επιχείρηση), παρουσιάστηκε η ανάγκη ενός καλύτερου τρόπου για την περιγραφή των μηνυμάτων καθώς και του τρόπου με τον οποίο γίνεται η ανταλλαγή τους.

Το WSDL είναι ένα XML schema, που αναπτύχθηκε από την Microsoft και την IBM με σκοπό να ορίσει το XML μήνυμα, τη λειτουργία και το πρωτόκολλο αντιστοίχησης μιας υπηρεσίας διαδικτύου που προσπελαύνεται χρησιμοποιώντας SOAP ή κάποιο άλλο XML πρωτόκολλο. Το συντακτικό του WSDL επιτρέπει τον αφαιρετικό ορισμό τόσο των μηνυμάτων όσο και των λειτουργιών των μηνυμάτων, έτσι ώστε να μπορούν να αντιστοιχηθούν σε πολλαπλές φυσικές υλοποιήσεις.

10.4 Universal Desrciption, Discovery, and Integration (UDDI)

To UDDI, ορίζει ένα μοντέλο δεδομένων (σε XML) και SOAP APIs για καταχώρηση και αναζήτηση πληροφορίας μιας επιχείρησης, συμπεριλαμβανομένης της πληροφορίας που σχετίζεται με τις υπηρεσίες που παρέχει η επιχείρηση στο διαδίκτυο. Η βασική ιδέα είναι ότι οι επιχειρήσεις χρησιμοποιούν τα SOAP APIs για να καταχωρούν τις υπηρεσίες που παρέχουν στο UDDI. Άλλες επιχειρήσεις ψάχνουν στο UDDI όταν θέλουν να ανακαλύψουν έναν εμπορικό συνεργάτη. Η πληροφορία στο UDDI κατηγοριοποιείται σύμφωνα με τον τύπο των εταιρειών και την γεωγραφική τους θέση. Από τη στιγμή που βάσει των παραπάνω κριτηρίων βρεθεί η επιθυμητή επιχείρηση, το UDDI μπορεί να παρέχει πληροφορία εύρεσης των υπηρεσιών που παρέχει η επιχείρηση, δίνοντας ουσιαστικά έναν «δείκτη» στο WSDL αρχείο που περιγράφει τις υπηρεσίες διαδικτύου που παρέχει η συγκεκριμένη επιχείρηση.

Το σχήμα 4 δείχνει πως μια επιχείρηση καταχωρεί το WSDL αρχείο της στο UDDI,

96

Page 97: τεχνολογίες διαδικτύου πανεπιστημιο πατρων

Τεχνολογίες Διαδικτύου

Σχήμα 19: Καταχώρηση WSDL στο UDDI

και το σχήμα 18 πως μια άλλη επιχείρηση μπορεί να έχει πρόσβαση σε αυτή την πληροφορία.

Σχήμα 20: Ανακάλυψη υπηρεσιών διαδικτύου (WSDL περιγραφή) μέσω UDDI

97