Βασικές Έννοιες Web Εφαρμογών

Transcript

1 ΟΙΚΟΝΟΜΙΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ ΤΜΗΜΑ ΔΙΟΙΚΗΤΙΚΗΣ ΕΠΙΣΤΗΜΗΣ ΚΑΙ ΤΕΧΝΟΛΟΓΙΑΣ Τεχνολογίες και Εφαρμογές Διαδικτύου Βασικές Έννοιες Web Εφαρμογών Κατερίνα Πραματάρη Τεχνολογίες και Εφαρμογές Διαδικτύου

2 Περιεχόμενα Ορισμοί Τα βασικά στοιχεία ενός web-site Μοντέλο client-server Ο ρόλος του Web-client Ο ρόλος του Web-server Παράδειγμα web-εφαρμογής Στατικές έναντι δυναμικές web-εφαρμογές 2

3 Ορισμοί The World Wide Web The set of computers on the Internet that support HTTP Not a separate network HTTP The HyperText Transfer Protocol The language used by a WWW client (e.g. Netscape, Internet Explorer) to request documents from a WWW server (i.e. the program running at Web sites like amazon.com or yahoo.com) HTML The HyperText Markup Language The language used to design web pages 3

4 Τα βασικά στοιχεία ενός web-site Ιστοχώρος στο Internet Η πρόσβαση γίνεται μέσω ενός webbrowser Το web-site φιλοξενείται σε κάποιον server Διεύθυνση ιστοχώρου 4

5 Μοντέλο Πελάτη-Εξυπηρετητή (client-server) Πελάτης (client) Αίτηση Εξυπηρετητής (server) Διεπαφή χρήστη Απόκριση Διαχείριση δεδομένων 5

6 Μοντέλο client-server στο Web Client Server Web browser Internet Web Server Database Server e.g. Internet Explorer, Netscape, Firefox, etc. e.g. Tomcat, IIS etc. 6

7 Ο ρόλος του Web-Client Αλληλεπίδραση με το χρήστη Επικοινωνία με τον web-server για αποστολή αιτήσεων (HTTP requests) Λήψη απαντήσεων από τον web-server και εμφάνιση αποτελεσμάτων στον χρήστη (HTTP responses) Χρήση πρωτοκόλλου HTTP Ο web-browser καταλαβαίνει κώδικα HTML Υπάρχει επίσης δυνατότητα εκτέλεσης κώδικα τοπικά από τον web-client χωρίς να χρειαστεί να επικοινωνήσει με τον server (javascript) 7

8 Web-Server Είναι το μηχάνημα (server) που έχει πρόσβαση στο Internet και τρέχει το Web Server Software (ή HTTP Server) Π.X. IIS (Internet Information Services) ή Apache Tomcat Server Φιλοξενεί την εφαρμογή Ακούει σε συγκεκριμένη διεύθυνση (1 Webserver ανά μηχάνημα) Είτε απ ευθείας IP address Είτε www address 8

9 Ο ρόλος του Web-Server Δέχεται http requests από τον web-client για συγκεκριμένες σελίδες Υπάρχει default directory στο οποίο θα ελέγξει για τις σελίδες αυτές Αν υπάρχουν στοιχεία ελέγχου (κώδικας) στις σελίδες, θα περάσει τον έλεγχο στην εφαρμογή (π.χ. Servlets) Στέλνει πίσω απάντηση με τη μορφή HTML κώδικα (web σελίδες) στον client (web-browser) 9

10 HTTP GET και POST Request (1) GET: Προεπιλεγμένη μέθοδος επικοινωνίας webclient με web-server Ο client μπορεί να στείλει δεδομένα στον server Με τη μέθοδο GET αυτά προσαρτώνται στο τέλος της καθορισμένης διεύθυνσης URL μετά από ένα ερωτηματικό Με τη μέθοδο POST αυτά στέλνονται σε ξεχωριστή γραμμή Ανάλογα με την περίσταση μπορεί να είναι προτιμότερη είτε η μέθοδος POST είτε η μέθοδος GET 10

11 HTTP GET και POST Request (2) Παράδειγμα HTTP GET request: t&ie=utf-8&rls=skpb,skpb: ,skpb:en&q=core+servlets+and+jsp Πλεονεκτήματα HTTP GET: Δυνατότητα δημιουργίας σελιδοδείκτη Πληκτρολόγηση δεδομένων με το χέρι Πλεονεκτήματα HTTP POST: Μετάδοση μεγάλου όγκου δεδομένων Αποστολή δυαδικών δεδομένων Ασφάλεια-εμπιστευτικότητα 11

12 Διεύθυνση Web-Server

13 Διεύθυνση Web-Site Είτε by default εμφάνιση σελίδας: index.htm, index.html Είτε αναφορά σε συγκεκριμένη σελίδα: 13

14 Διαφορές μεταξύ Δυναμικού και Στατικού Web-Site Στατικό Web-Site Αποτελείται εξ ολοκλήρου από html σελίδες Το περιεχόμενο περιέχεται στις σελίδες αυτές Η αλληλεπίδραση με το χρήστη περιορίζεται σε ενέργειες πλοήγησης (browsing) Αρκείοισελίδεςνα βρίσκονται σε κάποιο Web- Server Δυναμικό Web-Site Η HTML ορίζει το look&feel (χρώματα, πλαίσια, φόρμες) αλλά δεν υπάρχουν έτοιμες σελίδες που αποθηκεύουν το περιεχόμενο Το περιεχόμενο περιέχεται σε μία βάση δεδομένων Υπάρχει εφαρμογή (π.χ. σε Java) που συνδέει τις html σελίδες με τη βάση Το site λειτουργεί όπως μία οποιδήποτε άλλη εφαρμογή υποστηρίζοντας αλληλεπίδραση με το χρήστη με τη διαφορά ότι η διεπαφή είναι μέσω Web Browser 14

15 Στοιχεία ενός στατικού Web Site Web Server Internet Web browser «Κατεβάζει» κι εμφανίζει HTML Σελίδες HTML σελίδες Π.χ. index.html + όλες οι υπόλοιπες html σελίδες με το περιεχόμενο 15

16 Στοιχεία ενός δυναμικού Web Site Web Server Internet Web browser «Κατεβάζει» κι εμφανίζει HTML Σελίδες HTML σελίδες (προεραιτικό) Π.χ. index.html Πρόγραμμα, π.χ. Γραμμένο σε Java (servlet) Επικοινωνεί με τη βάση Συνθέτει ως output HTML Σελίδες Βάση Δεδομένων 16

17 Παράδειγμα: Ένα web-site πώλησης προϊόντων (ηλεκτρονικό κατάστημα) Κατάλογος προϊόντων Καλάθι αγορών Αναζήτηση προϊόντων Παραγγελία παρακολούθηση παραγγελίας Online πληρωμή Διαφημιστικά banners 17

18 Μια απλή ιεραρχική δομή του Web-Site 18

19 Ενδεικτική δομή σελίδας 19

20 Ανάπτυξη ενός Web-Site Βήμα 1: Επιλογή περιβάλλοντος φιλοξενίας Βήμα 2: Δήλωση ονόματος (register -> Βήμα 3: Σχεδίαση web-site Βήμα 4: Κατασκευή του web-site και έλεγχος Βήμα 5: Δημιουργία και εισαγωγή/ διαχείριση περιεχομένου Βήμα 6: Δημοσίευση και προβολή web-site 20

21 Κριτήρια Σχεδίασης Ιστοθέσης Περιήγηση Συνέπεια Απόδοση Εμφάνιση Διασφάλιση ποιότητας - Αξιοπιστία Διαδραστικότητα Ασφάλεια Κλιμάκωση («Επεκτασιμότητα») 21

22 Χρώματα και Γραφικά Χρησιμοποιείτε πρότυπα χρώματα Ακολουθείτε τα πρότυπα χρωμάτων Χρησιμοποιείτε συμπληρωματικά χρώματα Καθορίστε το χρώμα φόντου Χρησιμοποιείτε επιλεκτικά χαρακτηριστικά που απαιτούν πολύ εύρος ζώνης Σχεδιάστε τις ιστοθέσεις σας για άτομα με προβλήματα όρασης και ακοής Αποφύγετε χαρακτηριστικά που αποσπούν την προσοχή 22

23 Αρχιτεκτονική 3-tier Υλοποίηση οθονών Επίπεδο Παρουσίασης Υλοποίηση Λογικής Εφαρμογής Επίπεδο Εφαρμογής Βάση Δεδομένων 23

24 Τυπικά Πλαίσια Ανάπτυξης Εφαρμογών Διαδικτύου Web-Server Tomcat Tomcat, IIS IIS Presentation Layer Application Layer Servlets ή JSP Java Php ASP,.NET Framework Visual Basic, C#, Database Layer MySQL, SQLServer, Oracle, 24