Πανεπιστήμιο Πατρών Πολυτεχνική Σχολή Τμήμα Μηχανικών Η/Υ και Πληροφορικής Internet και πρωτόκολλα εφαρμογών Παγκόσμιος Ιστός Πληροφοριών (World Wide Web – WWW) ΧΡΗΣΤΟΣ Ι. ΜΠΟΥΡΑΣ ΚΑΘΗΓΗΤΗΣ email: bouras@cti.gr http://ru6.cti.gr/bouras/

Θέματα που θα καλυφθούν(1/2) Ιστορική αναδρομή Το Internet σήμερα Μοντέλο δικτυακών υπηρεσιών Δικτυακές υπηρεσίες Απομακρυσμένη πρόσβαση Μεταφορά αρχείων Ηλεκτρονικό ταχυδρομείο κ.λπ.

Θέματα που θα καλυφθούν(2/2) WWW Υπερκείμενο URLs Μοντέλο HTTP HTML CSS

Ιστορία του Internet 1969: ARPANET 1983: Μετάβαση από NCP σε TCP/IP Εργασίες σε: Αποκεντρωμένα δίκτυα Θεωρία ουρών Ανταλλαγή πακέτων 1983: Μετάβαση από NCP σε TCP/IP Εκκίνηση του διαδικτύου όπως το ξέρουμε 1986: NSFnet Δικτυακή πανεπιστημιακή ραχοκοκαλιά Στη συνέχεια ενσωματώθηκαν Usenet, Fidonet και Bitnet 1990: Η Ελλάδα συνδέεται στο NSFnet 1991: Εμφανίζεται ο WWW

ARPAnet - NSFnet

Η ανάπτυξη του Internet

Το Internet σήμερα(1/2)

Το Internet σήμερα(2/2) WORLD INTERNET USAGE AND POPULATION STATISTICS World Regions Population ( 2007 Est.) Population % of World Internet Usage, Latest Data % Population ( Penetration ) Usage % of World Usage Growth 2000-2007 Africa 941,249,130 14.2 % 44,361,940 4.7 % 3.4 % 882.7 % Asia 3,733,783,474 56.5 % 510,478,743 13.7 % 38.7 % 346.6 % Europe 801,821,187 12.1 % 348,125,847 43.4 % 26.4 % 231.2 % Middle East 192,755,045 2.9 % 33,510,500 17.4 % 2.5 % 920.2 % North America 334,659,631 5.1 % 238,015,529 71.1 % 18.0 % 120.2 % Latin America/Caribbean 569,133,474 8.6 % 126,203,714 22.2 % 9.6 % 598.5 % Oceania / Australia 33,569,718 0.5 % 19,175,836 57.1 % 1.5 % 151.6 % WORLD TOTAL 6,606,971,659 100.0 % 1,319,872,109 20.0 % 265.6 %

Εικόνα των συνδέσεων στο Internet(1/2)

Εικόνα των συνδέσεων στο Internet(2/2)

Υπηρεσίες/εφαρμογές Χρησιμοποιούν το διαδεδομένο μοντέλο του πελάτη-εξυπηρετητή Οι ποιό γνωστές είναι το ηλεκτρονικό ταχυδρομείο και ο παγκόσμιος ιστός πληροφοριών Αναδεικνύονται και νέες εφαρμογές Τηλεφωνία πάνω από το Internet (VoIP) Βιντεοδιάσκεψη (videoconferencing) Peer-to-peer (P2P) file sharing κ.λπ.

Μοντέλο πελάτη-εξυπηρετητή Client-server model Ο πελάτης ζητά μία υπηρεσία Ο εξυπηρετητής την παρέχει

Σχέση πελατών-εξυπηρετητή Εξυπηρετητές Λειτουργούν συνεχώς Παρέχουν την υπηρεσία σε κάθε πελάτη Είναι ειδικευμένοι σε μια υπηρεσία (π.χ. e-mail) «Ακούνε» σε μία «γνωστή» θύρα (passive open) Πελάτες Εκτελούνται όταν χρειάζεται Ανοίγουν την επικοινωνία (active open) Σχέση πολλοί-προς-ένα

Σειριακός εξυπηρετητής χωρίς συνδέσεις Σειριακός εξυπηρετητής χωρίς συνδέσεις Οι αιτήσεις των πελατών (datagrams) μπαίνουν σε ουρά στον εξυπηρετητή Ο εξυπηρετητής εξετάζει κάθε αίτημα διαδοχικά και απαντά Οι πελάτες χρησιμοποιούν «εφήμερες» θύρες Ο εξυπηρτητής χρησιμοποιεί μία «γνωστή» θύρα (well-known port)

Παράλληλος εξυπηρετητής με συνδέσεις Παράλληλος εξυπηρετητής με συνδέσεις Αιτήματα και απαντήσεις μπορεί να εκτείνονται σε πολλά τμήματα Η πατρική διεργασία ανοίγει τη θύρα και περιμένει Οι συνδέσεις χρησιμοποιούν εφήμερες θύρες με διεργασίες-παιδιά

Υπηρεσίες/εφαρμογές - πρωτόκολλα Απομακρυσμένη πρόσβαση telnet ssh Μεταφορά αρχείων ftp Ηλεκτρονικό ταχυδρομείο SMTP POP3 IMAP

Απομακρυσμένη πρόσβαση(1/3) Χρήση απομακρυσμένου υπολογιστή από τοπικό τερματικό

Απομακρυσμένη πρόσβαση(2/3) telnet Χρησιμοποιεί το port 23 Πολύ απλό Χρησιμοποιείται και για «χειρονακτική» πρόσβαση σε άλλες υπηρεσίες telnet smtp.example.com 25 Δείτε το παράδειγμα στην ενότητα του SMTP Προβλήματα ασφάλειας Μεταδίδει το συνθηματικό χωρίς προστασία

Απομακρυσμένη πρόσβαση(3/3) ssh (secure shell) Χρησιμοποιεί το port 22 Ασφαλές Χρησιμοποιεί κρυπτογραφημένη επικοινωνία Χρησιμοποιείται για να «ασφαλιστεί» και η χρήση άλλων εφαρμογών

Μεταφορά αρχείων FTP: File Transfer Protocol Χρησιμοποίει το TCP Η «γνωστή» θύρα 21 χρησιμοποιείται για τη σύνδεση ελέγχου Η «γνωστή» θύρα 20 χρησιμοποιείται για τη σύνδεση δεδομένων

FTP: σύνδεση ελέγχου Χρησιμοποιείται για την ανταλλαγή εντολών και αποκρίσεων ανάμεσα σε πελάτη και εξυπηρετητή Διαχωρισμός με την ανταλλαγή των δεδομένων των αρχείων Σπάνια για εφαρμογές του Internet χρήση διαφορετικών θυρών για τον άλεγχο και τα δεδομένα

FTP: σύνδεση δεδομένων(1/2) Χρησιμοποιεί τη «γνωστή» θύρα 20 Active mode Ο πελάτης κάνει passive open μία εφήμερη θύρα, έστω x Ο πελάτης στέλνει την εντολή PORT ενημερώνοντας τον εξυπηρετητή για τη θύρα x PORT 192,168,0,1,192,2 Ο εξυπηρετητής κάνει active open από τη θύρα 20 στη θύρα x Ο εξυπηρετητής δημιουργεί μια διεργασία παιδί για να χειριστεί τον πελάτη

FTP: σύνδεση δεδομένων(2/2) Passive mode Ο πελάτης στέλνει την εντολή PASV Ο εξυπηρετητής απαντά με εφήμερη θύρα 227 Entering Passive Mode (127,0,0,1,192,52) Ο πελάτης ανοίγει τη σύνδεση δεδομένων Extended passive mode Ο εξυπηρετητής απαντά μόνο με τον αριθμό της θύρας (χωρίς τη διεύθυνση του εξυπηρετητή)

Ηλεκτρονικό ταχυδρομείο(1/2) Διευθύνσεις ηλεκτρονικού ταχυδρομείου <name> @ <domain> Πρωτόκολλα για ανταλλαγή μηνυμάτων SMTP (Simple Mail Transfer Protocol) POP3 (Post-Office Protocol IMAP4 (Internet Message Access Protocol) Πρωτόκολλα για μορφή μηνυμάτων RFC-822 MIME (Multipurpose Internet Mail Extensions)

Ηλεκτρονικό ταχυδρομείο(2/2) SMTP Μετάδοση μηνυμάτων ηλεκτρονικού ταχυδρομείου Υποβολή μηνυμάτων ηλεκτρονικού ταχυδρομείου POP Ανάκτηση μηνυμάτων από την θυρίδα ηλεκτρονικού ταχυδρομείου (mailbox) IMAP Διαχείριση μηνυμάτων στην θυρίδα ηλεκτρονικού ταχυδρομείου

Άλλες υπηρεσίες και πρωτόκολλα News NNTP (network news protocol) Τηλεφωνία και βιντεοδιάσκεψη SIP H.323 Instant messages (IM) Πολλά και διαφορετικά πρωτόκολλα P2P file sharing WWW HTTP και HTML και πολλά άλλα

World Wide Web (WWW) Εμφανίζεται το 1993 και «απογειώνει» το Διαδίκτυο, Προέρχεται από ένα εσωτερικό σύστημα διαχείρισης εγγράφων που αναπτύχθηκε από τον Tim Berners-Lee για συναδέλφους του φυσικούς στο CERN (Ελβετία). Αποτελεί σύνθεση τριών τεχνολογιών: ∆ίκτυα Η/Υ, ∆ιαχείριση εγγράφων / πληροφορίας και Λογισµικό γραφικής διεπαφής µε χρήστες (graphical user interface) Μέσο επικοινωνίας όχι πολύ διαφορετικό από τα προηγούμενα (ραδιόφωνο, τηλεόραση, ...) Όμως ο καθένας μπορεί να γράψει μια ιστοσελίδα (Web page) και να την κάνει διαθέσιμη.

Υπερκείμενο (HyperText ) Το Web είναι βασισμένο στην έννοια του υπερκειμένου - ένας μηχανισμός όπου η πληροφορία είναι κατανεμημένη σε πολλές σελίδες και διασυνδεδεμένη. Επιτρέπει την πλοήγηση ανάμεσα σε πληροφορίες µε µη γραμμικό τρόπο Το 1990 κυκλοφόρησε ο πρώτος Web browser, βασισμένος σε κείμενο και ικανός να ακολουθεί βασισµένους σε κείμενο υπερσυνδέσμους. Η ανάγκη υποστήριξης γραφικών οδήγησε στον πρώτο Web browser γραφικών – Mosaic – τον πρόγονο του Netscape. Μια τυπική web σελίδα σήμερα υποστηρίζει κείμενο, πίνακες, πλαίσια, φόρμες, ήχο, βίντεο, ...

Υπερκείμενο (HyperText )

Uniform Resource Locator (URL)(1/4) Uniform Resource Identifier (URI) Μια συμπαγής σειρά από χαρακτήρες που καθορίζουν ένα όνομα ή ένα πόρο URN - Uniform Resource Name URL - Uniform Resource Locator

Uniform Resource Locator (URL)(2/4) Είναι απλά δοµηµένες σειρές χαρακτήρων που ορίζουν —είτε µέσω ονόµατος, είτε µέσω διεύθυνσης, είτε µέσω άλλων χαρακτηριστικών —ένα πόρο ‘ URL= [protocol]“:” “//” [login]“:”[password]“@”[host] “:” [port]“/”[ abs_path] Π.χ ftp://test:testpass@ftp.test.com/incoming http://gigas.ceid.upatras.gr/activities/index.html

Uniform Resource Locator (URL)(3/4) Σύνταξη <scheme name> : <hierarchical part> [ ? <query> ] [ # <fragment> ]

Uniform Resource Locator (URL)(4/4) hierarchical part query foo://user:pass@test.com:8042/over/here/index.dtb?type=animal&name=ion#nose path port scheme userinfo filename extension parameter parameter fragment hostname authority

Το μοντέλο Πελάτη –Εξυπηρετητή

Web browser(1/2) Αφού συνδεθεί, ο χρήστης προσπελαύνει το Web µέσω λογισμικού που λέγεται browser (π.χ. Mozilla Firefox ή Microsoft Internet Explorer ή Opera). Οι browsers εντοπίζουν και εμφανίζουν πληροφορία από το Web. Η επικοινωνία γίνεται δια µιας συμφωνημένης γλώσσας μεταφοράς ή πρωτοκόλλου, π.χ. HTTP (Hyper Text Transfer Protocol). Τα μετεφερόμενα στοιχεία δομούνται σύμφωνα με τη γλώσσα HTML (Hyper Text Markup Language).

Web browser(2/2) Ο χρήστης ζητάει μια ιστοσελίδα µέσω του browser ο οποίος το κοινοποιεί στον εξυπηρετητή. Ο browser περιμένει να μεταφερθεί η ιστοσελίδα, τυπικά ένα αρχείο κειμένου που περιέχει οδηγίες σε HTML. Τα περίπλοκα γραφικά και η μορφοποίηση που βρίσκει κανείς στις ιστοσελίδες είναι αποτέλεσμα από τον client browser που ανταποδίδει την σελίδα στη μορφοποίηση που ήταν καθορισμένη στο αρχείο. Οι εικόνες και γραφικά δεν αποτελούν μέρος μιας HTML σελίδας αλλά αποστέλλονται ξεχωριστά (απλά ο browser διαβάζει την HTML σελίδα και εμφανίζει τα γραφικά βάσει των οδηγιών που περιλαμβάνονται στην HTML).

Web server Ο server είναι λογισμικό που τρέχει σ’ έναν υπολογιστή και αποκρίνεται στις αιτήσεις του client για ιστοσελίδες Apache Server ή Microsoft Internet Information Server Οι ιστοσελίδες υπάρχουν στο τοπικό του σύστημα αρχείων. ή δημιουργούνται αυτόματα από κάποιο πρόγραμμα Ο server ανακτά και διαβιβάζει τα δεδομένα στον client

Συνοµιλία browser – web server(1/2) Πληκτρολογούμε τη διεύθυνση μιας τοποθεσίας O browser απευθύνεται στον DNS server που εξετάζοντας τη URL εντοπίζει την IP διεύθυνση του web server στον οποίο απευθύνεται η αίτηση Ο browser στέλνει το αίτημα για αποστολή της ιστοσελίδας στον web server Το αίτημα φτάνει στον web server που αναζητά και ανακτά την αιτούμενη σελίδα από τον τοπικό του δίσκο Η ιστοσελίδα αποστέλλεται (µέσω HTTP)

Συνομιλία browser – web server(2/2) Ο browser λαμβάνει την ιστοσελίδα (HTML αρχείο), διαβάζει τις οδηγίες του HTML κώδικα και σχεδιάζει το περιεχόμενο αντίστοιχα Αν η ιστοσελίδα περιέχει φωτογραφίες, αυτές στέλνονται ως ξεχωριστά αρχεία από τον web server στον browser. Το ίδιο συμβαίνει στην περίπτωση που η σελίδα «περιλαμβάνει» και applets Αν ο HTML κώδικας έχει και ενσωματωµένο κώδικα σεναρίου (γραμμένο σε κάποια script γλώσσα, π.χ. Javascript), αυτός εκτελείται από τον browser.

Ο τρόπος οργάνωσης των αρχείων ενός web server Το σύνολο αυτών των ιστοσελίδων αποτελεί την τοποθεσία (web site).

Οργάνωση αρχείων ενός web server

HTTP Το πρωτόκολλο που χρησιμοποιείται στο WWW Καθορίζει τη μορφοποίηση των μηνυμάτων (πακέτων) κατά τη μετάδοσή τους και τις ενέργειες που πρέπει να ακολουθήσουν οι web servers και οι web clients (browsers) ώστε να ανταποκριθούν στις διάφορες εντολές π.χ., όταν εισάγουμε µια URL σε έναν browser, ουσιαστικά στέλνεται µια εντολή µέσω HTTP σε ένα απομακρυσμένο web server κατευθύνοντας τον να ανακτήσει και να αποστείλει µια συγκεκριμένη ιστοσελίδα (HTML αρχείο) Το HTTP είναι «αμνήμων» (stateless): για την ολοκλήρωση μιας αποστολής (π.χ. ιστοσελίδα µε κείμενο και εικόνες) απαιτούνται πολλαπλές συνδέσεις (αιτήσεις/αποκρίσεις). Έτσι αυξάνεται η κλιμάκωση (scalability) καθώς εξυπηρετούνται ταυτόχρονα πολλοί clients αλλά μειώνεται η ταχύτητα.

Τύποι Μηνυμάτων HTTP HTTP -message Request Response Και οι δύο τύποι μηνύματος αποτελούνται από: Μια αρχική γραμμή Μηδέν οι περισσότερες γραμμές επικεφαλίδων (header lines) Μια κενή γραμμή που αποτελεί την διαχωριστική γραμμή (CRLF) Μια προαιρετική γραμμή που αποτελεί το σώμα του μηνύματος και μπορεί να περιέχει ένα αρχείο, δεδομένα αναζήτησης κ.α. Αυτά είναι και τα πραγματικά δεδομένα.

HTML Σε τι γλώσσα γράφει κανείς μια ιστοσελίδα; Ο server στέλνει πίσω την ιστοσελίδα που ζητήθηκε ως έγγραφο κειμένου µε οδηγίες για το πώς αυτή θα έπρεπε να εμφανιστεί. Είναι αρμοδιότητα του client browser να ανταποδώσει το έγγραφο στην κατάλληλη μορφή. Αυτές οι οδηγίες είναι σε Hypertext Markup Language - HTML. Τα HTML έγγραφα μπορούν να δημιουργηθούν µε έναν συντάκτη κειμένου (text editor), όπως NotePad (Windows), vi/emacs (Unix κλπ.) ή Εξειδικευμένα εργαλεία συγγραφής (web authoring tools): Microsoft FrontPage, Micromedia DreamWeaver, ...

Στατικές σελίδες Αρχεία που περιέχουν HTML Διαβάζονται από τον server και διαβιβάζονται ως έχουν Αν δεν τις αλλάξει κάποιος, κάθε φορά που ζητιούνται δίνουν πάντα το ίδιο περιεχόμενο Συνηθισμένες επεκτάσεις ονομάτων αρχείων htm και html

Δυναμικές Ιστοσελίδες Μία ιστοσελίδα είναι δυναμική όταν: αλληλεπιδρά µε το χρήστη (π.χ. αλλάζει η εμφάνιση ενός μενού επιλογών όταν ο δείκτης του ποντικιού τοποθετείται πάνω σε αυτό), αλλάζει η μορφή της (π.χ. μετακινούνται λέξεις και αντικείμενα, αλλάζουν δυναμικά εικόνες, γράμματα και χρώματα), μεταβάλλεται το περιεχόμενό της (π.χ. αλλάζουν τα περιεχόμενα ενός πίνακα).

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

Δυναμικές σελίδες με JavaScript

Plug-ins

Δυναμικά παραγόμενο περιεχόμενο (CGI, php, jsp,..)

Εφαρμογές πολλών στρωμάτων (n-tier – application servers)(1/2)

Εφαρμογές πολλών στρωμάτων (n-tier – application servers)(2/2)

Για τι χρησιμοποιούμε Web proxies/caches Οι web caches χρησιμοποιούνται ανάμεσα σε ένα η περισσότερους web servers και σε ένα η περισσότερους web clients με σκοπό την αποθήκευσης πληροφορίας ώστε το μέλλον η πληροφορία να αναζητηθεί από τον web caches και όχι από τον web server Πετυχαίνουμε μείωση καθυστέρησης Πετυχαίνουμε μείωσης κίνησης δικτύου

Είδη Web proxies/caches Browser cache: Αποθηκεύεται πληροφορία τοπικά από web browser. Proxy cache: Λειτουργεί με την ίδια λογική με την browser cache αλλά σε μεγαλύτερο επίπεδο, αποτελεί ξεχωριστό server και εξυπηρετεί μεγάλο αριθμό χρηστών (πχ σε επίπεδο ISP). Gateway cache: Χρησιμοποιείται από τους ιδιοκτήτες ενός web site για βελτίωση απόδοσης και αξιοπιστίας (Content Delivery Networks – CDN πχ Akamai).

Web search engines(1/2) Το Web είναι τώρα μια τεράστια πηγή πληροφορίας και δεδομένων - Πως μπορεί κανείς να ψάξει αυτή την πελώρια αποθήκη για τη συγκεκριμένη πληροφορία που χρειάζεται; Xρησιμοποιoύνται οι Μηχανές Αναζήτησης (search engines): Google, Altavista, InfoSeek, … Αναζητήσεις µε λέξεις κλειδιά (keywords) και Boolean λογική Επιστροφή αποτελεσμάτων (σελίδες που περιέχουν τα keywords) µε συνδέσμους προς τις αρχικές θέσεις των εγγράφων.

Web search engines(2/2) Οι βάσεις δεδομένων των μηχανών αναζήτησης είναι κτισμένες µε αυτοματοποιημένα botsor spiders -λογισμικό που ψαρεύει στο Web διαβάζοντας και ανακτώντας την πληροφορία που χρειάζεται να προσθέσουν στη βάση δεδομένων τους. Τα αποτελέσματα ποικίλουν ανάλογα µε τη μηχανή αναζήτησης. Αντίστοιχα bots χρησιμοποιούν και οι spammers για να «ψαρεύουν» email διευθύνσεις Κάποιες μετα-μηχανές αναζήτησης (MetaCrawler, OneSeek) κάνουν παράλληλες αναζητήσεις χρησιμοποιώντας διαφορετικές μηχανές αναζήτησης.

HyperText Markup Language: HTML Οι οδηγίες της HTML δίνονται µε χρήση των ετικετών (tags). Οι ετικέτες είναι το τμήμα εκείνο του κειμένου που περικλείεται από τα σύμβολα μικρότερο (<) και μεγαλύτερο (>) και την εντολή μέσα στα σύμβολα αυτά που αποτελεί την οδηγία. Οι ετικέτες «ανοίγουν» και «κλείνουν». Π.χ.: <b>This text will be displayed as bold!</b> ‘Ενα HTML αρχείο είναι ένα απλό αρχείο κειμένου (text file). Έτσι, δεν χρειάζεται ένα ειδικό επεξεργαστή κειμένου. Αρκεί ένας απλός επεξεργαστής κειμένου όπως είναι το NotePad ή το MS Word Υπάρχουν ωστόσο και ειδικά προγράμματα για τη γρήγορη και εύκολη συγγραφή HTML κώδικα (web authoring tools), όπως το Micromedia Dreamweaver (απαιτούν άδεια!) και άλλα τα οποία διατίθενται δωρεάν

Βασική δομή ενός HTML εγγράφου

Ένα απλό HTML αρχείο <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <!-- Our first Web page --> <head> <title>Welcome to Our Web Site!</title> </head> <body> <p>Welcome to Our Web Site!</p> </body> </html>

Ερωτήσεις