Προγραμματισμός Εφαρμογών Διαδικτύου Ενότητα 1: Εισαγωγή στον Παγκόσμιο Ιστό και Οδηγίες για το Μάθημα. Φώτης Κόκκορας, Καθηγητής Εφαρμογών, Τμήμα Μηχανικών.

Παρουσίαση με θέμα: "Προγραμματισμός Εφαρμογών Διαδικτύου Ενότητα 1: Εισαγωγή στον Παγκόσμιο Ιστό και Οδηγίες για το Μάθημα. Φώτης Κόκκορας, Καθηγητής Εφαρμογών, Τμήμα Μηχανικών."— Μεταγράφημα παρουσίασης:

1 Προγραμματισμός Εφαρμογών Διαδικτύου Ενότητα 1: Εισαγωγή στον Παγκόσμιο Ιστό και Οδηγίες για το Μάθημα. Φώτης Κόκκορας, Καθηγητής Εφαρμογών, Τμήμα Μηχανικών Πληροφορικής Τ.Ε., T.E.I. Θεσσαλίας

2 Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε άλλου τύπου άδειας χρήσης, η άδεια χρήσης αναφέρεται ρητώς. 2

3 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 3

4 Σκοποί ενότητας Να ορίζει τον παγκόσμιο ιστό. Να περιγράφει τις υπηρεσίες του διαδικτύου. Να αναγνωρίζει την τεχνολογία client server. Να πληροφορηθεί για τη βιβλιογραφία του μαθήματος. Να ενημερώθεί για το προτεινόμενο Εκπαιδευτικό Υλικό. Δομές Δεδομένων και Αρχεία 4

5 Περιεχόμενα ενότητας  Παγκόσμιος Ιστός. Παγκόσμιος Ιστός.  692 – Προγραμματισμός Εφαρμογών Διαδικτύου. 692 – Προγραμματισμός Εφαρμογών Διαδικτύου.  Βιβλιογραφία. Βιβλιογραφία.  Απαραίτητο Λογισμικό. Απαραίτητο Λογισμικό. Προγραμματισμός Εφαρμογών Διαδικτύου 5

6 Παγκόσμιος Ιστός World Wide Web ή WWW ή Web (1),  To Web είναι η περισσότερο διαδεδομένη υπηρεσία/εφαρμογή στο Internet.  Internet -> το Διαδίκτυο  Πρόκειται για την υποδομή δικτύωσης (networking infrastructure).  Είναι ένα τεράστιο δίκτυο δικτύων (network of networks).  Παγκόσμιος Ιστός -> υπηρεσία (service) του Διαδικτύου  Είναι ένα μοντέλο διαμοιρασμού πληροφορίας χτισμένο πάνω στο Internet.  Το Web είναι μια υπηρεσία στο Internet, ή πιο απλά ένα "τμήμα" του Internet (εκ των πραγμάτων, το μεγαλύτερο)!  Για τον απλό κόσμο, το Web είναι το Internet. Στην πραγματικότητα δεν είναι! Προγραμματισμός Εφαρμογών Διαδικτύου 6

7 Παγκόσμιος Ιστός World Wide Web ή WWW ή Web (2)  Άλλες (όχι όλες!) υπηρεσίες στο Internet:  e-mail: ηλεκτρονική αλληλογραφία  ftp: μεταφορά αρχείων – έχει υποσκελιστεί σε μεγάλο βαθμό από το web  Newsgroups /usenet: θεματικές λίστες ηλεκτρονικού ταχυδρομείου (ασύγχρονη συζήτηση) – έχουν υποσκελιστεί από τα forums του Web.  chat: σύγχρονη συζήτηση με γραπτά μηνύματα  Ομότιμα Δίκτυα ανταλλαγής αρχείων (P2P – Peer to Peer) Προγραμματισμός Εφαρμογών Διαδικτύου 7

8 Λίγη πρώιμη Ιστορία...  1945: Ο Vannevar Bush, επιστημονικός σύμβουλος του προέδρου Ρούσβελτ (USA) και με αφορμή την δυσκολία διαχείρισης του τεράστιου όγκου πληροφορίας κατά τον 2 ο παγκόσμιο πόλεμο, περιέγραψε μια μηχανή (την ονόμασε Memex) που θα μπορούσε:  να παρουσιάζει "στο πάτημα ενός κουμπιού" κείμενο και εικόνες που θα ήταν αποθηκευμένα σε μικροφίλμ, και  να ακολουθεί προκαθορισμένες συσχετίσεις (συνδέσμους) μεταξύ τους.  1963: Ο Theodor (Ted) Nelson, αμερικανός φιλόσοφος και λάτρης της πληροφορικής εισάγει τον όρο hypertext (υπερκείμενο) για να περιγράψει το μη γραμμικό κείμενο:  δηλαδή τμήματα κειμένου που είναι διασυνδεμένα με συνδέσμους (links) και μπορεί κανείς να πλοηγηθεί σε αυτά και να τα μελετήσει.  Ο όρος hypermedia (υπερμέσα) (προτάθηκε από τον ίδιο) αναφέρεται στο εμπλουτισμένο με επιπλέον μέσα (media) υπερκείμενο (εικόνες, video, ήχο, κτλ)  1993: γίνεται διαθέσιμος ο πρώτος γραφικός browser (Mosaic) – το web αριθμεί παγκοσμίως 200 αξιόπιστους servers Προγραμματισμός Εφαρμογών Διαδικτύου 8

9 Ο Παγκόσμιος Ιστός στην Πράξη  Ισχυρότατο μέσο για την αναζήτηση, εύρεση και προσπέλαση πληροφοριών.  Οι πληροφορίες είναι οργανωμένες σε σελίδες που ονομάζονται ιστοσελίδες.  ιστοσελίδα: ιστός + σελίδα, δηλαδή σελίδα του (παγκόσμιου) ιστού  ιστιοσελίδα: "εφεύρεση" αδιάβαστου φοιτητή – δε χρησιμεύει πουθενά!!!  Οι ιστοσελίδες:  μπορεί να περιέχουν κείμενο, εικόνες, video, ήχο, μικρές (ή και μεγαλύτερες πλέον!) εφαρμογές  δηλαδή το web είναι "πολυμεσικό" (multimedia)  μπορεί να συνδέονται μεταξύ τους με συνδέσμους (links/hyperlinks)  έχουν μοναδική διεύθυνση μέσω της οποίας μπορούμε να τις προσδιορίσουμε  είναι αρχεία (files) σε κάποιο υπολογιστικό σύστημα  Ένας ιστοτόπος (web site) είναι ένα σύνολο ιστοσελίδων που βρίσκονται σε διακομιστή (web server) δεδομένης διεύθυνσης (domain name) και είναι προσβάσιμες μέσω του Παγκόσμιου Ιστού.  Ο Παγκόσμιος Ιστός αποτελεί υλοποίηση και επέκταση της ιδέας των υπερμέσων (hypermedia) – μη γραμμικά διασυνδεμένα μέσα (media). Προγραμματισμός Εφαρμογών Διαδικτύου 9

10 Μια ματιά στα ενδότερα...  Οι περισσότερες υπηρεσίες/εφαρμογές στο Internet αποτελούνται από 2 τμήματα λογισμικού: τον πελάτη (client) και τον διακομιστή (server).  Τα παραπάνω δύο λογισμικά επικοινωνούν με βάση ένα σύνολο κανόνων που ορίζουν το λεγόμενο πρωτόκολλο επικοινωνίας.  Στην υπηρεσία του Παγκόσμιου Ιστού:  ο πελάτης είναι το λογισμικό πλοήγησης (browser)  Internet Explorer, Firefox, Chrome, κτλ.  ο διακομιστής είναι ο web server  Apache, IIS, κτλ  το πρωτόκολλο είναι το HTTP (Hypertext Transfer Protocol) Προγραμματισμός Εφαρμογών Διαδικτύου 10

11 URL: Uniform Resource Locator URI: Uniform Resource Identifier  Πρόκειται για τις διευθύνσεις που προσδιορίζουν μοναδικά μια ιστοσελίδα (URL) ή έναν "πόρο" (resource) γενικότερα (URI).  Παράδειγμα: http://www.teilar.gr/staff/professors.html  http: το πρωτόκολλο επικοινωνίας (εναλλακτικά https – secure http)  www.teilar.gr: domain name του διακομιστή.  staff: φάκελος (folder) στο σύστημα αρχείων του διακομιστή.  professors.html: αρχείο που αντιστοιχεί στην ιστοσελίδα που βλέπει ο χρήστης  Σημείωση: τελευταία, συναντά κανείς όλο και πιο συχνά φαινομενικές αποκλί– σεις από τα παραπάνω, καθώς οι web servers μετατρέπουν τις πραγματικές διευθύνσεις σε άλλες, πιο φιλικές στον χρήστη. Θα το δούμε προς το τέλος, όταν μιλήσουμε για SEO και URL rewrite.  Μια διεύθυνση μπορεί να "δείχνει" σε εικόνα, ήχο, video, εφαρμογή, συνδυασμό αυτών (δηλαδή σε ιστοσελίδα), κτλ.  ΑΡΑ, το web αποτελείται κατά κύριο λόγο από διασυνδεμένες ιστοσελίδες. Πώς φτιάχνονται όμως οι ιστοσελίδες ; Προγραμματισμός Εφαρμογών Διαδικτύου 11

12 692 – Προγραμματισμός Εφαρμογών Διαδικτύου  Στόχοι του Μαθήματος Να γνωρίσετε "εκ των έσω" τις τεχνολογίες που χρησιμοποιείτε καθημερινά! Να είστε σε θέση να αναπτύξετε σύνθετα web sites. Να μάθετε κάτι άμεσα χρήσιμο και προσοδοφόρο.  Περιεχόμενο Μαθήματος 1.HTML (γλώσσα συγγραφής ιστοσελίδων). 2.CSS (γλώσσα χωροθέτηση σελίδας και μορφοποίησης περιεχομένου). 3.Client Side Scripting: γλώσσα προγραμματισμού JavaScript. 4.Server Side Scripting: γλώσσα προγραμματισμού PHP. 5.PHP & MySQL (βιβλιοθήκες SQLi και PDO / ασφάλεια). 6.XML (γενική γλώσσα κωδικοποίησης δεδομένων), XML και PHP. 7.AJAX/JQuery (προχωρημένο client side scripting για web εφαρμογές πλούσιας αλληλεπίδρασης / Rich Internet Applications ή RIAs). 8.SEO (Search Engine Optimization). 9.HTML 5 / APIs / Geolocation / Google Maps 10."Καλές πρακτικές" (best practices) σε Web Development.  Θα δούμε και θα εφαρμόσουμε τα απολύτως χρήσιμα όλων των παραπάνω! Προγραμματισμός Εφαρμογών Διαδικτύου 12

13 Διαδικαστικά  Ιστοσελίδα Μαθήματος: http://openclass.teilar.gr/courses/CS318/http://openclass.teilar.gr/courses/CS318/  Αφορά σε Θεωρία και Εργαστήριο (ΤΟ ΜΑΘΗΜΑ ΕΙΝΑΙ ΕΝΑ!)  Θα γίνεται εκτενής χρήση ανακοινώσεις, διανομή slides, εκφωνήσεις και κώδικες εργαστηριακών ασκήσεων, απαντήσεις, forum για απορίες, project support,....όλα!  Κάντε εγγραφή εντός του Μαρτίου – μετά θα κλειδωθείτε εκτός!  Να μπείτε στην ομάδα χρηστών που σας αφορά – οδηγίες στις ανακοινώσεις.  Να έχετε ως χρήστες του eClass email που το βλέπετε καθημερινά – θα σας στέλνεται email πολύ συχνά μέσω του eClass/μαθήματος. Δείτε τις ανακοινώσεις στο eClass για ζητήματα σχετικά με το δηλωμένο ονοματεπώνυμό σας, το δηλωμένο email σας, κτλ.  Αξιολόγηση  Θεωρία 50%: γραπτή εξέταση στο τέλος του εξαμήνου  Εργαστήριο 50%:  Υποχρεωτικές Εργασίες και Project: ανά 2 άτομα /  Η συνεισφορά σε βαθμό εργαστηρίου θα αναλυθεί προσεχώς.  Γραπτή Εξέταση στο τέλος του εξαμήνου Όποιος πραγματικά κάνει τα projects, θα είναι έτοιμος και για εξετάσεις χωρίς επιπλέον διάβασμα! Προγραμματισμός Εφαρμογών Διαδικτύου 13

14 Βιβλιογραφία  Το βιβλίο #1 παρακάτω είναι το προτεινόμενο – καλύπτει όλη την ύλη.  Τα slides που σας δίνω σας καλύπτουν 100% για μια γρήγορη επανάληψη.  Μερικές επιπλέον προτάσεις: Προγραμματισμός Εφαρμογών Διαδικτύου 14

15 Βιβλιογραφία (συνέχεια)  Ένα εξαιρετικό βιβλίο για εμβάθυνση σε PHP είναι το ακόλουθο: – PHP Cookbook, 2nd Edition – Adam Trachtenberg, David Sklar – O'Reilly Media, 2006 – ISBN: 978-0-596-10101-5 – 816 σελίδες, Αγγλική γλώσσα  Το βιβλίο είναι γεμάτο με λύσεις-συνταγές για συγκεκριμένα, κοινά προβλήματα και καλύπτει σχεδόν τα πάντα:  αλφαριθμητικά, αριθμούς, ημερομηνίες, πίνακες, συναρτήσεις, αντικειμενοστραφή PHP, web/sessions, φόρμες, databases, XML, web services, ασφάλεια, αρχεία, επιδόσεις, διαχείριση σφαλμάτων, κτλ.  η 1η έκδοση του βιβλίου είναι πλέον αρκετά παλιά (2002), αποφύγετέ την καθώς πολλά πράγματα έχουν εξελιχθεί  Δεν είναι βιβλίο για να μάθεις PHP από το μηδέν. Προϋποθέτει βασική αντίληψη της γλώσσας και σαφώς γνώσεις προγραμματισμού.  Συνίσταται σε όσους θέλουν να ασχοληθούν με προοπτική. Προγραμματισμός Εφαρμογών Διαδικτύου 15

16 Βιβλιογραφία - Σχόλια  Το πρώτο είναι πλήρες ως προς την ύλη.  Έχει αρκετά επιπλέον πράγματα (1200 σελίδες!!!).  Η αγγλική έκδοση του 2ου θεωρείται ίσως το καλύτερο για PHP και MySQL.  Δεν έχω εικόνα για την ποιότητα της μετάφρασης. Εκτιμώ ότι θα'ναι εξίσου καλή.  Η καλύτερη πηγή πληροφόρησης για κάποιον έμπειρο προγραμματιστή είναι το ίδιο το web. Δεν μπορείτε όμως να "μάθετε" μόνο με το Google!  Κανείς δεν ελέγχει την ποιότητα αυτών που βρίσκετε στο web. Στην καλύτερη περίπτωση βασίζεστε στην κρίση του πλήθους. Άρα χρειάζονται και βιβλία!  Τα δύο site που αναφέρθηκαν έχουν υλικό για τα πάντα (ειδικά το W3 Schools) και επιπλέον ενημερώνονται. Είναι OK για πρώτη ενημέρωση.  Το Google είναι ΟΚ για να βρείτε τεκμηρίωση εντολών, κτλ.  Έστω θέλετε κάτι για την εντολή echo: Δώστε στο Google: php echo  Έστω θέλετε κάτι για την ιδιότητα color της CSS: Δώστε στο Google: css color  Έστω θέλετε κάτι για την ετικέτα div της HTML: Δώστε στο Google: html div 99.9% το πρώτο αποτέλεσμα είναι αυτό που θέλετε (αγγλικό Google)  Το Google ΔΕΝ είναι και τόσο ΟΚ για "λύσεις", αν δεν έχετε αντίληψη των πραγμάτων με τα οποία ασχολείστε. Αυτό πρέπει να προσέξετε στο μάθημα! Προγραμματισμός Εφαρμογών Διαδικτύου 16

17 Επικοινωνία  καλύτερα στο forum του μαθήματος στο eClass  αν δεν είναι προσωπικό, υποβάλετε την ερώτηση στο forum του μαθήματος  μπορείτε να απαντάτε και οι ίδιοι σε συμφοιτητές σας, αν γνωρίζετε.  στα διαλείμματα των παραδόσεων / εργαστηρίων  email: fkokkoras@teilar.gr  Δεν υποχρεούμαι να απαντήσω σε email σαν τα ακόλουθα: – χωρίς ονοματεπώνυμο του αποστολέα στα Ελληνικά – γραμμένο σε greeklish – αν το θέμα είναι καθαρά γύρω από το μάθημα και θα μπορούσε να ενδιαφέρει και άλλους (υπάρχει το forum για τέτοιες ερωτήσεις)  Γενικά αποφεύγετε το email για θέματα του μαθήματος.  Για ώρες φοιτητών δείτε στη σελίδα μου στο CS Γραφείο  you can't miss it Προγραμματισμός Εφαρμογών Διαδικτύου 17

18 Λογισμικό που θα Χρειαστείτε  Καταρχήν, στο εργαστήριο UNIX όλα τα PCs είναι Linux PCs. Δεν μας ενοχλεί αυτό καθώς δουλεύουμε με cross-platform λογισμικά.  Για όσο δεν εμπλέκεται η γλώσσα PHP χρειαζόμαστε έναν καλό text editor που να χρωματίζει HTML/Javascript/PHP και έναν browser. Σε Win OS:  Notepad++: http://notepad-plus-plus.org/http://notepad-plus-plus.org/  Πολύ καλός και "ελαφρύς" ο PSPad: http://www.pspad.com/http://www.pspad.com/  Firefox: http://www.mozilla.org/http://www.mozilla.org/ με πρόσθετο (plugin) FireBug ( https://www.getfirebug.com/ )https://www.getfirebug.com/  Όταν "μπούμε" σε PHP θα χρειαστείτε:  XAMP: περιβάλλον για web development (Apache, PHP, MySQL) http://www.apachefriends.org/en/xampp-windows.html#646 (portable έκδοση για win) http://www.apachefriends.org/en/xampp-windows.html#646  MySQL Workbench: http://dev.mysql.com/downloads/workbench/ για εργασίες στον MySQL server.http://dev.mysql.com/downloads/workbench/ Προγραμματισμός Εφαρμογών Διαδικτύου 18

19 Άλλα Λογισμικά  WYSIWYG editors (δεν χρειάζονται για το εργαστήριο – έχουν αρκετές ευκολίες αλλά είναι δεσμευτικά αν κανείς τα χρησιμοποιήσει εκτενώς):  DreamWeaver (Adobe) ή Expression Web (Microsoft) το 2 ο είναι διαθέσιμο και δωρεάν με Ακαδημαϊκή Άδεια Χρήσης  Τι άλλο υπάρχει: http://en.wikipedia.org/wiki/Comparison_of_HTML_editors http://en.wikipedia.org/wiki/Comparison_of_HTML_editors Προγραμματισμός Εφαρμογών Διαδικτύου 19

20 Λογισμικά που Χρησιμοποιεί η Αγορά Εργασίας  Για ανάπτυξη Δυναμικών Ιστοσελίδων χρειάζεστε:  Εφαρμογή/editor ανάπτυξης ιστοσελίδων  Web Server – Έχετε τις εξής κύριες επιλογές: Apache (www.apache.org): open source – "servίρει" πάνω από το μισό web (2008) εκδόσεις για όλα τα λειτουργικά συστήματα IIS – Ο web server της Microsoft. Υπάρχει στις Pro εκδόσεις των Windows (αλλά δεν εγκαθίσταται by default – πρέπει να το ζητήσουμε και μπορεί να γίνει και εκ των υστέρων). Δημοφιλές το MS WebMatrix: http://www.microsoft.com/web/webmatrix/ http://www.microsoft.com/web/webmatrix/  Τους 3 "μεγάλους" browsers (Internet Explorer, Firefox, Chrome) Προγραμματισμός Εφαρμογών Διαδικτύου 20

21 ...συνέχεια...  Server-Side Scripting Languages: οι πιο διαδεδομένες τεχνολογίες είναι:  PHP (www.php.net) de-facto standard (με Apache) για non-windows περιβάλλοντα (Unix, Linux, κτλ) πλέον και για IIS με επίσημη υποστήριξη από Microsoft (http://www.iis.net/)  ASP / ASP.NET Η "επίσημη" λύση σε πλατφόρμες MS – Συνοδεύει τον IIS – (χρήση Visual Studio)  JSP Java Server Pages Η γνωστή Java σε έκδοση για Server Side Scripting – Απαιτεί την εγκατάσταση του Tomcat (application server) σε συνεργασία με τον Apache web server. Διαδεδομένη λύση σε enterprise περιβάλλοντα (μεγάλες εταιρικές εφαρμογές).  Σύστημα Διαχείρισης Βάσης Δεδομένων  MySQL: open source με έκδοση για όλα τα Λειτουργικά Συστήματα  MS SQL Server (μόνο σε Windows πλατφόρμες, δωρεάν η developer edition) ...γενικά υποστηρίζονται όλα τα διαδεδομένα Συστήματα Διαχείρισης Βάσεων Δεδομένων (RDBMS) όπως Oracle, DB2 (της IBM), Sybase, κτλ  Υπάρχουν και αρκετά ολοκληρωμένα περιβάλλοντα (IDE) για ανάπτυξη web εφαρμογών με PHP: NetBeans for PHP, CakePHP, Zend, κτλ Προγραμματισμός Εφαρμογών Διαδικτύου 21

22 Last but not least…  Το μάθημα είναι εύκολο αλλά ως πολυσυλλεκτικό (συνδυασμός τεχνολο-γιών) έχει τεράστια ύλη (HTML, CSS, JavaScript, PHP, XML, DTD, κτλ), και απαιτεί συγκροτημένο μυαλό και στοιχειώδη "υποδομή".  Η παρακολούθηση θεωρίας και εργαστηρίου σταδιακά θα γίνεται δυσκολότερη και σύντομα αδύνατη αν δεν κάνετε μόνοι σας τα εργαστήρια!  Θα ασχοληθούμε συνολικά με το 25% της ύλης που περιλαμβάνουν στην πλήρη τους εκδοχή τα θέματα που θα μας απασχολήσουν, ...αλλά, αυτό το 25% επαρκεί για να κάνετε δουλειά επαγγελματικού επιπέδου!  Δεν είναι κάτι που το διαβάζεις και το μαθαίνεις πριν τις εξετάσεις!  πρέπει να ξέρετε τι υπάρχει - τι όπλα έχετε!  πρέπει να εξασκηθείτε για να ξέρετε πώς να τα χρησιμοποιήσετε! αυτό το παρέχει το εργαστήριο και κυρίως τα projects  πρέπει να ξέρετε τις "καλές πρακτικές"  Όσοι ασχοληθούν σοβαρά παίρνουν >8 και βάζουν καλή υποθήκη για μελλοντική επαγγελματική απασχόληση. Προγραμματισμός Εφαρμογών Διαδικτύου 22

23 Τέλος Ενότητας