Διαδικτυακά Πολυμέσα και Γραφικά˜ΕΩΡΙΑ/Lecture1... ·...

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

Στελιος Σφακιανάκης Φθινόπωρο 2018

Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού - Μη Εμπορική Χρήση - Παρόμοια Διανομή 1

https://creativecommons.org/licenses/by-nc-sa/3.0/deed.el

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

Περιεχόμενα• Εισαγωγή στο Διαδίκτυο

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

• Πρωτόκολλα

• Παγκόσμιο Ιστός - HTTP

• HTML

• CSS

2

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

Διαδίκτυο - Πρωτόκολλα - Υπηρεσίες

3


Αρχιτεκτονική του Ιστού ως υπηρεσία διαδικτύου

4

Javascript

CSS

HTM

L

UDP

HTTP

Web APIs

DNS

ΠαγκόσμιοςΙστός

Υπηρεσίεςκαι πρωτόκολλα

ΔιαδικτύουIP

TCP

TLS

IP : Internet Protocol TCP: Transmission Control Protocol UDP: User Datagram Protocol TLS: Transport Layer Security DNS: Domain Name Sercvice


Internet Protocol (IP) και οι διευθύνσεις του

• Καθε υπολογιστής προσβάσιμος στο Ιντερνετ έχει μια διεύθυνση IP (Internet Protocol address)

• Στην πιο διαδεδομένη έκδοση version 4 του IP, οι διευθύνσεις ειναι 4 bytes (δηλ. 32 bit) που συνήθως τις γραφουμε ως 4 αριθμοί χωρισμένοι με τελεία π.χ. 147.95.40.60

• Οι διευθύνσεις (όπως και στην καθημερινότητα μας) επιτρέπουν την εύρεση μιας "τοποθεσίας" και τη "δρομολόγηση" σε αυτήν

• Το πρωτόκολλο IP ορίζει πώς γινεται η μεταφορά πακέτων δεδομένων στο Διαδίκτυο, μεσω ενδιάμεσων δικτύων και υπολογιστών-κόμβων. Καθε πακέτο IP περιέχει την IP διεύθυνση του "αποστολέα" και την διεύθυνση του προορισμού.

5


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

• Χρησιμοποιεί την έννοια της σύνδεσης δηλ. ορίζει μηνύματα για την αρχικοποίηση του "καναλιού" επικοινωνίας πριν τη μεταδοση των δεδομένων των εφαρμογών, καθώς και μηνύματα για το "κλείσιμο" της σύνδεσης

• Τα πακέτα του TCP περιέχονται μεσα σε πακέτα του IP και με τη σειρά τους περιέχουν της θύρες (ports) του αποστολέα και του παραλήπτη.

• Ενώ οι IP διευθύνσεις προσδιορίζουν τον "υπολογιστή" από τον οποίο ξεκινάνε ή καταλήγουν τα πάκετα, οι θύρες προσδιορίζουν τις εφαρμογές (π.χ. web server) που επικοινωνούν.

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

6


UDP και DNS• Η αξιόπιστη λειτουργία του TCP όμως εισάγει πολυπλοκότητα και καθυστερήσεις.

• Σε περιπτώσεις που η γρήγορη παράδοση της πληροφορίας (π.χ. για βίντεο και ήχο) είναι πιο σημαντική από την αξιόπιστη μπορεί να χρησιμοποιηθεί το User Datagram Protocol (UDP)

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

• Όπως για το TCP έτσι και τα πακέτα του UDP μεταδίδονται μεσα σε πακέτα IP και περιέχουν ομοίως αριθμούς θυρών

• Ενώ η πλειονότητα των εφαρμογών χρησιμοποιεί TCP, υπάρχει μια πολύ κρίσιμη υπηρεσία που το χρησιμοποιεί: το DNS!

7


Domain Name Service (DNS)

8

By DNS_Tree.svg: Sylvain Leroux (talk)derivative work: Ggia (talk) - DNS_Tree.svg, CC BY-SA 3.0, https://

commons.wikimedia.org/w/index.php?curid=15525424

• Η Υπηρεσία Ονομάτων (DNS) του Διαδικτύου επιτρέπει την αντιστοίχιση των αριθμητικών διευθύνσεων IP σε φιλικά για τον χρήστη ονόματα

• Τα ονόματα είναι δομημένα σε μια ιεραρχική δομή (δένδρο) που επιτρέπει την κατανεμημένη κατασκευή και διαχείρηση τους

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

• Π.χ. Το google.com έχει τις 108.177.127.102, 108.177.127.100, 108.177.127.138, 108.177.127.101, 108.177.127.113, 108.177.127.139, ...

http://google.com


TLS• Το Transport Layer Security (TLS) εξασφαλίζει την ασφάλεια της επικοινωνίας στο Διαδίκτυο

✓ Κρυπτογράφηση, που εξασφαλίζει την ιδιωτικότητα (privacy)

✓ Ακεραιότητα δεδομένων (δηλ. δεν μπορεί ένας ενδιάμεσος κόμβος να αλλάξει την πληροφορία που ανταλλάσεται)

✓ Αυθεντικοποίηση, δηλ. ταυτοποίηση των επικοινωνούντων μερών

• Χρησιμοποιείται ευρέως για να ασφαλίσει πρωτόκολλα και υπηρεσίες εφαρμογής, π.χ. HTTPS, SMTPS (email), ...

9


HTTP και ο Παγκόσμιος Ιστός

10


Ο Παγκόσμιος Ιστός• Ο Παγκόσμιος Ιστός (World Wide Web) είναι ενα παγκόσμιο σύστημα διασυνδεδεμένων εγράφων υπερκειμένου που είναι διαθέσιμα στο Ιντερνετ

★ Τι είναι το υπερκείμενο?

➡ Ειναι το μη γραμμικο κείμενο, δηλαδή αν μπορεί ο αναγνώστης να μεταβεί από κάποιο σημείο του εγγράφου σε κάποιο άλλο (ή σε άλλο έγγραφο) χωρίς να χρειαστεί να “προσπελάσει” σειριακά ό,τι βρίσκεται “ενδιάμεσα”

➡ Επομένως, το χαρακτηριστικό στοιχείο του υπερκειμένου είναι η ύπαρξη (υπερ)συνδέσμων (hyperlinks)

11


Ο Παγκόσμιος Ιστός: λίγη ιστορία• Τη δεκαετία του 1960 ο πρόγονος του Ιντερνετ, το λεγόμενο ARPANET, δημιουργείται από το Υπουργείο Άμυνας των ΗΠΑ

• To 1974 δημοσιεύεται το TCP (Transmission Control Protocol) από τους Cerf και Kahn και το 1983 το TCP/IP γίνεται ο θεμέλιος λίθος του ARPANET

• To 1984 υλοποιείται το πρώτο Domain Name System (DNS), η υποδομή “ονοματοδοσίας” του Internet

• Το Ηλεκτρονικό Ταχυδρομείο (e-mail) και η ανταλλαγή εγγράφων (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 τον Μαίο 2015

12


“Information Management: A Proposal”

https://www.w3.org/History/1989/proposal.html

Tim Berners-Lee, CERN March 1989

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.

13

https://www.w3.org/History/1989/proposal.html


Το πρωτόκολλο HTTP

14


HTTP• Έιναι ένα πρωτόκολλο εφαρμογής "πάνω" από τα

TCP/IP

• Η προτυποποιημένη θύρα επικοινωνίας είναι το 80 και στην περίπτωση που χρησιμοποιείται το TLS (δηλ. για το HTTPS) είναι το 443

• Τα μηνύματα που ανταλλάσονται είναι σε κείμενο που κάνει εύκολο το να δούμε τί πληροφορία ανταλλάσεται (π.χ. στο Chrome DevTools)

15


Διακομιστές και Πελάτες

• Το HTTP ακολουθεί μια λογική αίτησης - απάντησης (request-response) μεταξύ του πελάτη (π.χ. browser σε ενα PC) και του διακομιστή (server)

• Το πρόγραμμα Πελάτης ξεκινάει την επικοινωνία στέλνοντας μια αίτηση στον Διακομιστή

• Ο Διακομιστής απαντάει στέλνοντας την αιτούμενη πληροφορία 16

Πελάτης

Διακομιστής

GET /

HTML,CSS,

JS


"Under the hood"

17

Internet

Πελάτης (Browser) Διακομιστής (Web Server)


URLs • Τα Uniform Resource Locators (URLs) είναι διευθύνσεις για σελίδες στον Ιστό (web pages)

• Ενσωματώνουν πληροφορία για το πρωτόκολλο επικοινωνίας (http/https), την διεύθυνση/όνομα του διακομιστή, την θύρα επικοινωνίας, το "μονοπάτι" στο συγκεκριμένο αρχείο/έγγραφο, και άλλες πληροφορίας

18


HTTP μηνύματα• Όπως συνηθίζεται σε όλα τα πρωτόκολλα τα μηνύματα HTTP περιέχουν:

• Μια κεφαλίδα (headers), και

• (προαιρετικά) ένα "σώμα" (body/payload)

• Τα headers μηνυμάτων που στέλνουν οι πελάτες περιέχουν την "μεθοδο" (π.χ. GET) και τη διύθυνση της σελίδας, ενώ τα μηνύματα που επιστρέφει ο διακομιστής περιέχουν κωδικούς κατάστασης και άλλα μεταδεδομένα

19

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

Διαδικτυακά Πολυμέσα και Γραφικά, Στέλιος Σφακιανάκης 21

GET / HTTP/1.1 Host: www.teicrete.gr 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

Request

HTTP/1.1 200 OK Connection: Keep-Alive Transfer-Encoding: chunked Expires: Sun, 19 Nov 1978 05:00:00 GMT Date: Thu, 18 Oct 2018 07:00:20 GMT Content-Type: text/html; charset=utf-8 Etag: "1539844751-0" Server: Apache/2.4.7 (Ubuntu) PHP/5.5.9-1ubuntu4.26 OpenSSL/1.0.1f X-Powered-By: PHP/5.5.9-1ubuntu4.26 X-Drupal-Cache: HIT Content-Language: el X-Frame-Options: SAMEORIGIN X-Generator: Drupal 7 (https://www.drupal.org) Cache-Control: public, max-age=600 Last-Modified: Thu, 18 Oct 2018 06:39:11 GMT Vary: Cookie,Accept-Encoding Content-Encoding: gzip

Response


(Βασικές) Μέθοδοι HTTP• GET: ανάκτηση σελίδας από διακομιστή

• HEAD: επιστροφή μονο της κεφαλίδας (header) του μηνύματος δηλ μόνο μεταδεδομένα (π.χ. μέγεθος αρχείου) χωρίς το περιεχόμενο της σελίδας/αρχείου

• POST: υποβολή φόρμας ή άλλων δεδομένων στον διακομιστή για δημιουργία νέας "σελίδας"

• PUT: υποβολή δεδομένων για την ενημέρωση σελίδας

• DELETE: αίτηση για κατάργηση (διαγραφή) της σελίδας στον διακομιστή

22


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


Προγραμματισμός στον Ιστό

• HTML : Περιεχόμενο

• CSS : Παρουσίαση

• Javascript : "συμπεριφορά" (Behaviour)

25


Η γενική εικόνα

26

14 CHAPTER 2 Building the page at runtime

we’ll look into how events are handled in order to develop interactive applicationsthat respond to users’ actions.

During this process, we’ll explore some fundamental web application conceptssuch as the DOM (a structured representation of a web page) and the event loop(determines how events are handled by applications). Let’s dive in!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Does the browser always build the page exactly accordingto the given HTML?

How many events can a web application handle at once?Why must browsers use an event queue to process events?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.1 The lifecycle overviewThe lifecycle of a typical client-side web application begins with the user typing a URLinto the browser’s address bar or clicking a link. Let’s say we want to look up a termand go to Google’s homepage. We type in the URL www.google.com, as shown atupper left in figure 2.1.

Do you know?

Page building

Event handling

App lifecycle ends

User actions Browser actions Server actions Enters URL (or clicks link)

Interacts with page elements

Closes web app

Generates a request and sends it to the server

Processes HTML, CSS, and JavaScript, and builds resulting page

Monitors event queue, processing any events one at a time

Performs actions or gets a resource; sends response to client

</>

Figure 2.1 The lifecycle of a client-side web application starts with the user specifying a website address (or clicking a link) and ends when the user leaves the web page. It’s com-posed of two steps: page building and event handling.


HTML

• Η γλώσσα HTML (Hypertext Markup Language) ειναι η βασική γλώσσα για την κατασκευή ιστοσελίδων

• Υπάρχει από (περίπου) το 1990

• Η τελευταία έκδοση της ειναι η HTML5, την οποία θα χρησιμοποιήσουμε σε αυτό το μάθημα

27


• Η HTML σχεδιάζεται από το World Wide Web Consortium (W3C)

• Οι τεχνικές προδιαγραφές ειναι διαθέσιμες στο

http://www.w3.org/TR/html5/

• Το Mozilla Developer Network (MDN) είναι ενας θησαυρός πληροφορίας:

https://developer.mozilla.org/en-US/docs/Learn/HTML

28

https://www.w3.org

http://www.w3.org/TR/html5/

https://developer.mozilla.org/en-US/docs/Learn/HTML


Ιστορία και εκδόσεις• 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


Ποια έκδοση??• Το DOCTYPE στην αρχή ενός εγγραφου HTML προσδιορίζει την έκδοση που χρησιμοποιεί το έγγραφο, π.χ.

• HTML 4.01 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

• XHTML 1.1 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• HTML5 :

<!DOCTYPE html>

30


Χρηση της HTML• Ο βασικός τρόπος χρήσης της HTML είναι ο εξής:

• Ο πλοηγητής Ιστου (web browser) στέλνει μια άιτηση στον εξυπηρετητή (server) αιτώντας μια σελίδα π.χ. index.html

• O εξυπηρετητής στέλνει τα περιεχόμενα της σελίδας πίσω στον πλοηγητη

• Ο πλοηγητής απεικονίζει τη σελίδα

• Η σελίδα μπορεί να περιέχει υπερσυνδέσμους (HTTP URLs) σε άλλες σελίδες και επιλέγοντας ο χρήστης μπορεί να ζητήσει την ανάκτηση νέας σελίδας

GET index.html

index.html

31

ΔιακομιστήςGooglehttp://domain.com

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 sentences fly into your mouth.

Carrier 12:00 PMPage Title

http://www.domain.com Google

FriendsD. [email protected]

J. [email protected]

P. [email protected]

M. [email protected]

R. [email protected]

View All ›

16:9

0:00 / 4:59

I pity you fool.

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.

dwightsaid

jibbajabbasaid

Πελάτες


• Τα έγγραφα HTML (HTML documents) είναι αρχεία κειμένου που περιέχουν “στοιχεία” (elements) και κείμενο

• Τα στοιχεία της HTML είναι εντολές που καθορίζουν τη δομή, το περιεχόμενο, τον τρόπο παρουσίασης κλπ της σελίδας

• Γενικά η HTML εχει μια ιεραρχική δομή (παρόμοια με την XML), όπου τα στοιχεία μπορούν να περιέχουν κάποια άλλα στοιχεία κλπ

32


Hyper Text Markup Language• Markup Language ("γλώσσα σήμανσης") σημαίνει ότι το περιεχόμενο "υποσημειώνεται" προσθέτωντας "νόημα" ή παραπομπές σε άλλες πηγές.

33

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

• Τα tags επομένως είναι εντολές της γλώσσας που αλλάζουν τη σημασία του κειμένου, προσθέτουν νόημα, λειτουργικότητα, κλπ.


• Παράδειγματα tags που προσθέτουν νόημα:

• <h1> : επικεφαλίδα 1ου επιπέδου

• <p> : νέα παράγραφος

• <ul><li> : μη αριθμημένη λίστα

• Μορφοποίηση, π.χ. <em>Note:</em>

• Πρόσθετη πληροφορία π.χ. εικόνα <img> ή υπερσύνδεσμος <a>

34


Βασικοί κανόνες★ Τα 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


Παράδειγμα<!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

Διαδικτυακά Πολυμέσα και Γραφικά˜ΕΩΡΙΑ/Lecture1... ·...

Documents

Transcript of Διαδικτυακά Πολυμέσα και Γραφικά˜ΕΩΡΙΑ/Lecture1... ·...