Διαδικτυακά Πολυμέσα και Γραφικά

Transcript

1 Διαδικτυακά Πολυμέσα και Γραφικά Στελιος Σφακιανάκης Φθινόπωρο 2018 Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού - Μη Εμπορική Χρήση - Παρόμοια Διανομή 1

2 Περιεχόμενα Εισαγωγή στο Διαδίκτυο Διευθύνσεις Πρωτόκολλα Παγκόσμιο Ιστός - HTTP HTML CSS 2

3 Διαδίκτυο - Πρωτόκολλα - Υπηρεσίες 3 Διαδικτυοκεντρικός Προγραμματισμός, Στέλιος Σφακιανάκης

4 Αρχιτεκτονική του Ιστού ως υπηρεσία διαδικτύου Web APIs HTML CSS Javascript Παγκόσμιος Ιστός HTTP DNS TLS UDP TCP IP Υπηρεσίες και πρωτόκολλα Διαδικτύου IP : Internet Protocol TCP: Transmission Control Protocol UDP: User Datagram Protocol TLS: Transport Layer Security DNS: Domain Name Sercvice 4 Διαδικτυοκεντρικός Προγραμματισμός, Στέλιος Σφακιανάκης

5 Internet Protocol (IP) και οι διευθύνσεις του Καθε υπολογιστής προσβάσιμος στο Ιντερνετ έχει μια διεύθυνση IP (Internet Protocol address) Στην πιο διαδεδομένη έκδοση version 4 του IP, οι διευθύνσεις ειναι 4 bytes (δηλ. 32 bit) που συνήθως τις γραφουμε ως 4 αριθμοί χωρισμένοι με τελεία π.χ Οι διευθύνσεις (όπως και στην καθημερινότητα μας) επιτρέπουν την εύρεση μιας "τοποθεσίας" και τη "δρομολόγηση" σε αυτήν Το πρωτόκολλο IP ορίζει πώς γινεται η μεταφορά πακέτων δεδομένων στο Διαδίκτυο, μεσω ενδιάμεσων δικτύων και υπολογιστών-κόμβων. Καθε πακέτο IP περιέχει την IP διεύθυνση του "αποστολέα" και την διεύθυνση του προορισμού. 5

6 Transmission Control Protocol (TCP) Τα πακέτα δεδομένων του IP μπορεί να χαθούν ή να φτάσουν με διαφορετική σειρα στον προορισμό τους. Το TCP προσφέρει αξιοπιστία, χειρισμό λαθών, και αλγορίθμους για την βελτιστοποίηση της μεταφοράς των δεδομένων. Χρησιμοποιεί την έννοια της σύνδεσης δηλ. ορίζει μηνύματα για την αρχικοποίηση του "καναλιού" επικοινωνίας πριν τη μεταδοση των δεδομένων των εφαρμογών, καθώς και μηνύματα για το "κλείσιμο" της σύνδεσης Τα πακέτα του TCP περιέχονται μεσα σε πακέτα του IP και με τη σειρά τους περιέχουν της θύρες (ports) του αποστολέα και του παραλήπτη. Ενώ οι IP διευθύνσεις προσδιορίζουν τον "υπολογιστή" από τον οποίο ξεκινάνε ή καταλήγουν τα πάκετα, οι θύρες προσδιορίζουν τις εφαρμογές (π.χ. web server) που επικοινωνούν. Έτσι π.χ. το λειτουργικό σύστημα του υπολογιστή προορισμού μπορεί να παραδώσει το πακέτο πληροφορίας στο κατάλληλο πρόγραμμα που το περιμένει. 6

7 UDP και DNS Η αξιόπιστη λειτουργία του TCP όμως εισάγει πολυπλοκότητα και καθυστερήσεις. Σε περιπτώσεις που η γρήγορη παράδοση της πληροφορίας (π.χ. για βίντεο και ήχο) είναι πιο σημαντική από την αξιόπιστη μπορεί να χρησιμοποιηθεί το User Datagram Protocol (UDP) Τα UDP πακέτα που ανταλλάσονται μεταξύ δυο εφαρμογών στο διαδίκτυο μπορεί να φτάσουν με λαθος σειρά και δεν υπάρχουν αναφορές παράδοσης οπότε ο αποστολέας δεν γνωρίζει αν ενα μήνυμα έφτασε στον προορισμό. Όπως για το TCP έτσι και τα πακέτα του UDP μεταδίδονται μεσα σε πακέτα IP και περιέχουν ομοίως αριθμούς θυρών Ενώ η πλειονότητα των εφαρμογών χρησιμοποιεί TCP, υπάρχει μια πολύ κρίσιμη υπηρεσία που το χρησιμοποιεί: το DNS! 7

8 Domain Name Service (DNS) Η Υπηρεσία Ονομάτων (DNS) του Διαδικτύου επιτρέπει την αντιστοίχιση των αριθμητικών διευθύνσεων IP σε φιλικά για τον χρήστη ονόματα Τα ονόματα είναι δομημένα σε μια ιεραρχική δομή (δένδρο) που επιτρέπει την κατανεμημένη κατασκευή και διαχείρηση τους Η σχέση μεταξύ ονομάτων και διευθύνσεων IP δεν είναι 1 προς 1. Δηλαδή σε ένα όνομα μπορεί να αντιστοιχούν πολλές διευθύνσεις IP και σε μια διεύθυνση πολλά ονόματα. By DNS_Tree.svg: Sylvain Leroux (talk)derivative work: Ggia (talk) - DNS_Tree.svg, CC BY-SA 3.0, commons.wikimedia.org/w/index.php?curid= Π.χ. Το google.com έχει τις , , , , , ,... 8

9 TLS Το Transport Layer Security (TLS) εξασφαλίζει την ασφάλεια της επικοινωνίας στο Διαδίκτυο Κρυπτογράφηση, που εξασφαλίζει την ιδιωτικότητα (privacy) Ακεραιότητα δεδομένων (δηλ. δεν μπορεί ένας ενδιάμεσος κόμβος να αλλάξει την πληροφορία που ανταλλάσεται) Αυθεντικοποίηση, δηλ. ταυτοποίηση των επικοινωνούντων μερών Χρησιμοποιείται ευρέως για να ασφαλίσει πρωτόκολλα και υπηρεσίες εφαρμογής, π.χ. HTTPS, SMTPS ( ),... 9

10 HTTP και ο Παγκόσμιος Ιστός 10 Διαδικτυοκεντρικός Προγραμματισμός, Στέλιος Σφακιανάκης

11 Ο Παγκόσμιος Ιστός Ο Παγκόσμιος Ιστός (World Wide Web) είναι ενα παγκόσμιο σύστημα διασυνδεδεμένων εγράφων υπερκειμένου που είναι διαθέσιμα στο Ιντερνετ Τι είναι το υπερκείμενο? Ειναι το μη γραμμικο κείμενο, δηλαδή αν μπορεί ο αναγνώστης να μεταβεί από κάποιο σημείο του εγγράφου σε κάποιο άλλο (ή σε άλλο έγγραφο) χωρίς να χρειαστεί να προσπελάσει σειριακά ό,τι βρίσκεται ενδιάμεσα Επομένως, το χαρακτηριστικό στοιχείο του υπερκειμένου είναι η ύπαρξη (υπερ)συνδέσμων (hyperlinks) 11

12 Ο Παγκόσμιος Ιστός: λίγη ιστορία Τη δεκαετία του 1960 ο πρόγονος του Ιντερνετ, το λεγόμενο ARPANET, δημιουργείται από το Υπουργείο Άμυνας των ΗΠΑ To 1974 δημοσιεύεται το TCP (Transmission Control Protocol) από τους Cerf και Kahn και το 1983 το TCP/IP γίνεται ο θεμέλιος λίθος του ARPANET To 1984 υλοποιείται το πρώτο Domain Name System (DNS), η υποδομή ονοματοδοσίας του Internet Το Ηλεκτρονικό Ταχυδρομείο ( ) και η ανταλλαγή εγγράφων (File Transfer Protocol - FTP) οι κύριες υπηρεσίες του Το 1989 ο Sir Tim Berners-Lee προτείνει ενα κατανεμημένο σύστημα υπερκειμένου στο CERN (δες επόμενο slide) και πριν τα Χριστούγεννα του 1990 υλοποιεί τον πρώτο εξυπηρετητή (server) και τον πρώτο πλοηγητή (web browser)..μαζί (επανα)εισαγει τον όρο Hypertext (υπερκείμενο) και υλοποιεί το Πρωτόκολλο Υπερκειμένου (HTTP) και την Γλώσσα Σήμανσης Υπερκειμένου (HTML) Η πρώτη τεκμηριωμένη του HTTP ειναι η 0.9 το 1991, το 1996 η έκδοση 1.0 (RFC 1945), ενώ το 1997 η έκδοση 1.1 (RFC 2068) με βελτιώσεις το 1999 (RFC 2616) Ο πρώτος ευρέως διαθέσιμος browser ήταν ο Mosaic (1993) στον οποίο βασίστηκε ο δημοφιλής Netscape Navigator (1994) Ξεκινάει ο (1ος) πόλεμος των πλοηγητών (browser war) με τη διάθεση απο την Microsoft του Internet Explorer (1995). Η Netscape χάνει και δημιουργεί το Mozilla Foundation που το 2004 διαθετει τον (ανοικτου λογισμικού) Mozilla Firefox To 1998 δημιουργείται η Google και σε λίγα χρόνια εξαφανίζει τις άλλες μηχανές αναζήτησης (Lycos, Altavista, Yahoo!) Το 2008 παρουσιάζεται ο Chrome browser από την Google Το HTTP 2 δημοσιεύεται ως RFC 7540 τον Μαίο

13 Information Management: A Proposal This proposal concerns the management of general information about accelerators and experiments at CERN. It discusses the problems of loss of information about complex evolving systems and derives a solution based on a distributed hypertext system. Tim Berners-Lee, CERN March Διαδικτυοκεντρικός Προγραμματισμός, Στέλιος Σφακιανάκης

14 Το πρωτόκολλο HTTP 14 Διαδικτυοκεντρικός Προγραμματισμός, Στέλιος Σφακιανάκης

15 HTTP Έιναι ένα πρωτόκολλο εφαρμογής "πάνω" από τα TCP/IP Η προτυποποιημένη θύρα επικοινωνίας είναι το 80 και στην περίπτωση που χρησιμοποιείται το TLS (δηλ. για το HTTPS) είναι το 443 Τα μηνύματα που ανταλλάσονται είναι σε κείμενο που κάνει εύκολο το να δούμε τί πληροφορία ανταλλάσεται (π.χ. στο Chrome DevTools) 15

16 Διακομιστές και Πελάτες HTML, CSS, JS Διακομιστής GET / Πελάτης Το HTTP ακολουθεί μια λογική αίτησης - απάντησης (requestresponse) μεταξύ του πελάτη (π.χ. browser σε ενα PC) και του διακομιστή (server) Το πρόγραμμα Πελάτης ξεκινάει την επικοινωνία στέλνοντας μια αίτηση στον Διακομιστή Ο Διακομιστής απαντάει στέλνοντας την αιτούμενη πληροφορία 16

17 "Under the hood" Πελάτης (Browser) Διακομιστής (Web Server) Internet 17

18 URLs Τα Uniform Resource Locators (URLs) είναι διευθύνσεις για σελίδες στον Ιστό (web pages) Ενσωματώνουν πληροφορία για το πρωτόκολλο επικοινωνίας (http/ https), την διεύθυνση/όνομα του διακομιστή, την θύρα επικοινωνίας, το "μονοπάτι" στο συγκεκριμένο αρχείο/έγγραφο, και άλλες πληροφορίας 18

19 HTTP μηνύματα Όπως συνηθίζεται σε όλα τα πρωτόκολλα τα μηνύματα HTTP περιέχουν: Μια κεφαλίδα (headers), και (προαιρετικά) ένα "σώμα" (body/payload) Τα headers μηνυμάτων που στέλνουν οι πελάτες περιέχουν την "μεθοδο" (π.χ. GET) και τη διύθυνση της σελίδας, ενώ τα μηνύματα που επιστρέφει ο διακομιστής περιέχουν κωδικούς κατάστασης και άλλα μεταδεδομένα 19

20 20 Διαδικτυοκεντρικός Προγραμματισμός, Στέλιος Σφακιανάκης

21 Request GET / HTTP/1.1 Host: Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Macintosh... DNT: 1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 Accept-Encoding: gzip, deflate, br Accept-Language: el,en-us;q=0.9,en;q=0.8 Response HTTP/ OK Connection: Keep-Alive Transfer-Encoding: chunked Expires: Sun, 19 Nov :00:00 GMT Date: Thu, 18 Oct :00:20 GMT Content-Type: text/html; charset=utf-8 Etag: " " Server: Apache/2.4.7 (Ubuntu) PHP/ ubuntu4.26 OpenSSL/1.0.1f X-Powered-By: PHP/ ubuntu4.26 X-Drupal-Cache: HIT Content-Language: el X-Frame-Options: SAMEORIGIN X-Generator: Drupal 7 ( Cache-Control: public, max-age=600 Last-Modified: Thu, 18 Oct :39:11 GMT Vary: Cookie,Accept-Encoding Content-Encoding: gzip 21

22 (Βασικές) Μέθοδοι HTTP GET: ανάκτηση σελίδας από διακομιστή HEAD: επιστροφή μονο της κεφαλίδας (header) του μηνύματος δηλ μόνο μεταδεδομένα (π.χ. μέγεθος αρχείου) χωρίς το περιεχόμενο της σελίδας/αρχείου POST: υποβολή φόρμας ή άλλων δεδομένων στον διακομιστή για δημιουργία νέας "σελίδας" PUT: υποβολή δεδομένων για την ενημέρωση σελίδας DELETE: αίτηση για κατάργηση (διαγραφή) της σελίδας στον διακομιστή 22

23 HTTP κώδικες κατάστασης Τα HTTP Status codes είναι αριθμοί 3 ψηφίων, από τα οποία το πρώτο προσδιορίζει την γενικη κατηγορία της απάντησης (response): 1xx : πληροφοριακά μηνύματα 2xx : Επιτυχία!! 3xx : ανακατεύθυνση σε άλλο URL 4xx: Αποτυχία, οφείλεται στον πελάτη 400: Bad request 401: Unauthorized (π.χ. λαθος κωδικός) 403: Forbidden 404: Not Found 5xx : Αποτυχία, οφείλεται στον διακομιστή 500: Internal Server Error (π.χ. ο διακομιστής δεν μπορεί να επικοινωνήσει με τη βάση δεδομένων) 23

24 Προγραμματισμός στον Ιστό 24 Διαδικτυοκεντρικός Προγραμματισμός, Στέλιος Σφακιανάκης

25 Προγραμματισμός στον Ιστό HTML : Περιεχόμενο CSS : Παρουσίαση Javascript : "συμπεριφορά" (Behaviour) 25

26 Η γενική εικόνα User actions Browser actions Server actions Enters URL (or clicks link) Generates a request and sends it to the server Page building </> Processes HTML, CSS, and JavaScript, and builds resulting page Performs actions or gets a resource; sends response to client Interacts with page elements Closes web app Monitors event queue, processing any events one at a time Event handling App lifecycle ends Figure 2.1 The side web applica user specifying a clicking a link) a user leaves the w posed of two step event handling. 26

27 HTML Η γλώσσα HTML (Hypertext Markup Language) ειναι η βασική γλώσσα για την κατασκευή ιστοσελίδων Υπάρχει από (περίπου) το 1990 Η τελευταία έκδοση της ειναι η HTML5, την οποία θα χρησιμοποιήσουμε σε αυτό το μάθημα 27

28 Η HTML σχεδιάζεται από το World Wide Web Consortium (W3C) Οι τεχνικές προδιαγραφές ειναι διαθέσιμες στο Το Mozilla Developer Network (MDN) είναι ενας θησαυρός πληροφορίας: 28

29 Ιστορία και εκδόσεις HTML4 (1997) XHMTL 1.0 /1.1: συμβατή με XML (2000) W3C ξεκίνησε να δουλευει το XHTML 2.0 Ενοχλημένοι από την κατεύθυνση που οδηγούσε το W3C, οι Apple, Mozilla, και Opera δημιούργησαν το Web Hypertext Application Technology Working Group (WHATWG) και πρότειναν το HTML5 (2007) Το W3C εγκατέλειψε το XHTML 2.0 και υιοθέτησε το HTML5! 29

30 Ποια έκδοση?? Το DOCTYPE στην αρχή ενός εγγραφου HTML προσδιορίζει την έκδοση που χρησιμοποιεί το έγγραφο, π.χ. HTML 4.01 : XHTML 1.1 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " HTML5 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <!DOCTYPE html> 30

31 Χρηση της HTML Ο βασικός τρόπος χρήσης της HTML είναι ο εξής: Ο πλοηγητής Ιστου (web browser) στέλνει μια άιτηση στον εξυπηρετητή (server) αιτώντας μια σελίδα π.χ. index.html Carrier 12:00 PM Page Title Google GET index.html O εξυπηρετητής στέλνει τα περιεχόμενα της σελίδας πίσω στον πλοηγητη Ο πλοηγητής απεικονίζει τη σελίδα dwight said Web Page Title A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of 16:9 sentences fly into your mouth. 0:00 / 4:59 Car chases are interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: Am I a stupid person that can t spell? If yes, then answer this question: Will I be offended if somebody, namely Dwight K. Schrute. Google Friends D. Schrute schrute@acme.com J. Halpert halpert@acme.com P. Beesly beesly@acme.com M. Scott scott@acme.com R. howard howard@acme.com View All index.html Διακομιστής Η σελίδα μπορεί να περιέχει υπερσυνδέσμους (HTTP URLs) σε άλλες σελίδες και επιλέγοντας ο χρήστης μπορεί να ζητήσει την ανάκτηση νέας σελίδας I pity you fool. jibbajabba said Πελάτες 31

32 Τα έγγραφα HTML (HTML documents) είναι αρχεία κειμένου που περιέχουν στοιχεία (elements) και κείμενο Τα στοιχεία της HTML είναι εντολές που καθορίζουν τη δομή, το περιεχόμενο, τον τρόπο παρουσίασης κλπ της σελίδας Γενικά η HTML εχει μια ιεραρχική δομή (παρόμοια με την XML), όπου τα στοιχεία μπορούν να περιέχουν κάποια άλλα στοιχεία κλπ 32

33 Hyper Text Markup Language Markup Language ("γλώσσα σήμανσης") σημαίνει ότι το περιεχόμενο "υποσημειώνεται" προσθέτωντας "νόημα" ή παραπομπές σε άλλες πηγές. Η σήμανση γίνεται με χρήση ετικετών (tags) που είναι κείμενο ανάμεσα στα σύμβολα < ("μικρότερο από") και > ("μεγαλύτερο από"). Ό,τι κείμενο εμφανίζεται μεσα στα σύμβολα θεωρείται μέρος της γλώσσας και όχι του περιεχομένου. Τα tags επομένως είναι εντολές της γλώσσας που αλλάζουν τη σημασία του κειμένου, προσθέτουν νόημα, λειτουργικότητα, κλπ. 33

34 Παράδειγματα tags που προσθέτουν νόημα: <h1> : επικεφαλίδα 1ου επιπέδου <p> : νέα παράγραφος <ul><li> : μη αριθμημένη λίστα Μορφοποίηση, π.χ. <em>note:</em> Πρόσθετη πληροφορία π.χ. εικόνα <img> ή υπερσύνδεσμος <a> 34

35 Βασικοί κανόνες Τα tags μπορεί να φωλιασμένα πχ. πλάγιο κείμενο μέσα σε παράγραφο: <p>this is very <it>important</it>!</p> Γενικά κάθε tag πρέπει να κλείνει με ένα αντίστοιχο το! Το tag που "ανοίγει" (π.χ. <p>), το tag που "κλείνει" (</p>) και ό,τι βρίσκεται ανάμεσα τους το λέμε στοιχείο (element). Ένα (opening) tag μπορεί να περιέχει "ιδιότητες" π.χ. <img src="photo.jpg"><img> Εάν ενα στοιχείο δεν έχει περιεχόμενο τότε το closing tag μπορεί να παραλειφθεί και το στοιχείο να γραφεί ως εξής: <img src="photo.jpg"/> Ένα έγγραφο HTML είναι μια ιεραρχική συλλογή από στοιχεία που ξεκινάει με "ρίζα" το <html> Το <html> έχει συνήθως 2 "παιδιά" : το <head> που περιέχει μεταδεδομένα και το <body>που περιέχει το κυρίως κείμενο. 35

36 Παράδειγμα <!DOCTYPE html> <html> <head> <title>my first web page</title> </head> <body> <h1>hello World!</h1> <p> This is my <em>first</em> web page </p> </body> </html> 36