Εργαλεία ανάπτυξης εφαρμογών internet Ι

Transcript

1 IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ Εργαλεία ανάπτυξης εφαρμογών internet Ι Εισαγωγή Διδάσκουσα: Κανελλοπούλου Χριστίνα ΠΕ19 Πληροφορικής

2 Στόχος του μαθήματος Στόχος του μαθήματος είναι να παρουσιάσει τεχνικές και εργαλεία για την ανάπτυξη στατικών και δυναμικών εφαρμογών στο Διαδίκτυο. Περιλαμβάνει θεωρητικά και πρακτικά θέματα σχετικά με την ανάπτυξη εφαρμογών στο διαδίκτυο με χρήση HTML και JavaScript. Το εργαλείο που θα χρησιμοποιήσουμε για την ανάπτυξη διαδικτυακών εφαρμογών είναι το Dreamweaver. Πιο αναλυτικά θα μελετήσουμε: 1. www προγραμματιστικό περιβάλλον με δομή πελάτη- εξυπηρετητή 2. Εργαλεία και τεχνικές για την εκτέλεση και ανάπτυξη εφαρμογών στο www 3. HTML 4. Δημοσίευση ιστοσελίδας 5. JavaScript

3 Δομή μαθήματος 1.Εισαγωγή στον Παγκόσμιο Ιστό (www, υπερκείμενο, υπερσύνδεσμοι, υπερμέσα, πολυμέσα, πλοηγοί, παραδείγματα) 2.Εισαγωγή στο περιβάλλον με δομή πελάτη-εξυπηρετητή (στατικές και αμφίδρομες εφαρμογές) 3.Εργαλεία και τεχνικές από την πλευρά του πελάτη (HTML, επεκτάσεις, γλώσσες σεναρίων) 4.Εργαλεία και τεχνικές από την πλευρά του εξυπηρετητή (Web server, CGI, Βάσεις Δεδομένων) 5.Αρχές σχεδιασμού και τρόποι οργάνωσης ιστοσελίδων (Χαρακτηριστικά, ιδιαιτερότητες, δυνατότητες, περιορισμοί, εισαγωγή στην HTML, μορφή, δομή σελίδας, η έννοια των ετικετών) 6.Στοιχεία σελίδας HTML (λίστες, μορφοποίηση κειμένου, σύνδεσμοι, εικόνες και φόντα, πολυμέσα) 7.Πίνακες και πλαίσια σε HTML 8.Η έννοια της δυναμικής ιστοσελίδας και πρότυπο CGI 9.Δημοσίευση Ιστοσελίδας (Επιλογή web server, διαχειριστής, οργάνωση αρχείων, buttons, banners, URL) 10.Εισαγωγή στη JavaScript (Java και JavaScript, περιγραφή, δυνατότητες, τρόποι εκτέλεσης σεναρίων, τεχνάσματα) 11.Προχωρημένα θέματα της JavaScript (αντιμετώπιση λαθών και αποφυγή προβλημάτων, μεταβλητές και σταθερές αποθήκευση δεδομένων, εκφράσεις και τελεστές χειρισμός τιμών) 12.Περιβάλλοντα σχεδίασης και ανάπτυξης ιστοσελίδων

4 Παγκόσμιος Ιστός - World Wide Web (WWW) Παγκόσμιος Ιστός (World Wide Web) είναι ένα σύστημα διασυνδεδεμένων εγγράφων, με χρήση υπερκειμένου (hypertext), στο οποίο μπορεί κανείς να έχει πρόσβαση μέσω του Διαδικτύου (Internet).

5 Hypertext/Hyperlink Τι είναι; Υπερκείμενο είναι ένα κείμενο με υπερσυνδέσμους. Κείμενο που εμφανίζεται σε έναν υπολογιστή ή μια άλλη ηλεκτρονική συσκευή με αναφορές (υπερσυνδέσμους - hyperlinks) σε άλλο κείμενο στο οποίο ο αναγνώστης μπορεί να έχει άμεσα πρόσβαση, συνήθως με ένα πάτημα του ποντικιού ή με μια σειρά πλήκτρων. Εκτός από κείμενο, μπορεί να είναι πίνακες, εικόνες και άλλα μέσα παρουσίασης. Ένας υπερσύνδεσμος δείχνει σε ένα ολόκληρο έγγραφο ή σε ένα συγκεκριμένο σημείο μέσα στο έγγραφο.

6 WWW η αρχή Σχεδιάστηκε το 1989 από τον Tim Berners Lee στο Ευρωπαϊκό Κέντρο Πυρηνικών Ερευνών CERN της Ελβετίας και ξεκίνησε να λειτουργεί το 1991 ως μια μέθοδος για να μεταφέρει μέσω δικτύου απλά κείμενα τα οποία είναι μορφοποιημένα με τη γλώσσα HTML. Βασικός του σκοπός ήταν να προσφέρει στους επιστήμονες ένα μέσο προκειμένου να ανταλλάσσουν στοιχεία επιστημονικά δεδομένα και μελέτες, μέσω του Διαδικτύου. Η όλη προσπάθεια στηρίχτηκε στην υλοποίηση ενός μέσου που θα επιτρέπει τη σύνδεση μεταξύ διαφορετικών εγγράφων.

7 Η ιστορία του www Το πρώτο λογισμικό ΙΣΤΟΥ δημιουργήθηκε τον Οκτώβριο 1990 Καλοκαίρι 1991 το CERN διέθεσε το λογισμικό στην διεθνή κοινότητα Ηλεκτρονικά "έγγραφα" με συνδέσεις με άλλα αντικείμενα. Hyperlinks = Συνδέσεις HyperText Το μέσο αυτό ονομάστηκε υπερκείμενο(hyper text) Το 1994 κατασκευάστηκε το πρόγραμμα Mosaic, το οποίο έδινε τη δυνατότητα στους χρήστες να προσπελαύνουν τις πληροφορίες που ήταν διαθέσιμες στο WWW με γραφικό τρόπο. Στα επόμενα χρόνια το WWW έγινε το απόλυτο μέσο αναζήτησης πληροφοριών για εκατομμύρια χρήστες του διαδικτύου.

8 Το πρώτο μήνυμα του Τιμ Μπέρνερς Λη στη λίστα συζητήσεων alt.hypertext τον Αύγουστο του 1991, όπου ανακοινώνει το εγχείρημα με όνομα "World Wide Web

9

10 WWW - Η ανάγκη 1/4 Πολλές από τις συζητήσεις στο CERN καταλήγουν με την ερώτηση «Ναι, αλλά πώς μπορούμε να παρακολουθήσουμε την πορεία ενός τέτοιου μεγάλου project;» Πρόσβαση πληροφοριών στο CERN μέσω διασυνδεδεμένων πληροφοριακών συστημάτων. Το CERN είναι ένας υπέροχος οργανισμός. Απασχολεί μερικές χιλιάδες ανθρώπους, πολλοί από τους οποίους είναι πολύ δημιουργικοί, όλοι εργάζονται έχοντας παρόμοιους στόχους. Παρόλο που είναι οργανωμένοι ιεραρχικά στη διοίκηση, αυτό δεν εμποδίζει να επικοινωνούν μεταξύ τους, να μοιράζονται πληροφορίες, εξοπλισμό και λογισμικό ανάμεσα στις ομάδες.

11 WWW - Η ανάγκη 2/4 Η δομή του οργανισμού είναι ένας εξελισσόμενος ιστός. Όταν ένας καινούργιος υπάλληλος μπαίνει στην ομάδα ή κάποιος αναλαμβάνει μια νέα εργασία, του δίνονται συμβουλές με ποιους είναι χρήσιμο να επικοινωνήσει. Μετά όμως από δύο χρόνια εργασίας, πολλές πληροφορίες έχουν χαθεί. Θα χρειαστεί αρκετός χρόνος που οι νέοι θα πρέπει να αφιερώσουν καθώς και αυτοί που θα τους κατατοπίσουν. Ακόμα και αν έχουν καταγραφεί πληροφορίες, πολλές φορές δεν είναι εύκολο να βρεθούν. Αν ένα πείραμα του CERN γινόταν όλο με μιας, τότε όλες οι πληροφορίες θα μπορούσαν να γραφτούν σε ένα μεγάλο βιβλίο. Ωστόσο, το CERN συνεχώς αλλάζει καθώς παράγονται νέες ιδέες, καθώς η τεχνολογία εξελίσσεται, και καθώς προκύπτουν καινούργια προβλήματα. Όταν προκύψει κάτι που θα πρέπει να αλλάξει μέρος του πειράματος, τότε θα πρέπει κάποιος να δει πώς επηρεάζονται άλλα μέρη του πειράματος ή άνθρωποι. Είναι δύσκολο να διατηρείς ενημερωμένο ένα βιβλίο και η δομή του βιβλίου χρειάζεται συνεχώς να ανανεώνεται.

12 WWW - Η ανάγκη 3/4 Οι πληροφορίες που συζητάμε απαντούν, για παράδειγμα σε ερωτήσεις όπως: Που χρησιμοποιείται αυτό το τμήμα; Ποιος έγραψε αυτό τον κώδικα; Που δουλεύει; Τι έγγραφα υπάρχουν σχετικά με αυτή την έννοια; Ποια εργαστήρια περιλαμβάνονται σε αυτό το project; Ποια συστήματα εξαρτώνται από αυτή τη συσκευή; Ποια έγγραφα αναφέρονται σε αυτό εδώ;

13 WWW - Η ανάγκη 4/4 Ένας ιστός με σημειώσεις και συνδέσμους είναι πολύ πιο χρήσιμος από ένα σταθερό ιεραρχικό σύστημα. Κόμβοι και βέλη που τους συνδέουν Παραδείγματα κόμβων Άνθρωποι Τμήματα λογισμικού Ομάδες ανθρώπων Έργα Έννοιες Έγγραφα Τύποι υλικού Συγκεκριμένα αντικείμενα υλικού

14 World Wide Web τι περιλαμβάνει To Web περιλαμβάνει κατανεμημένη πληροφορία, καθώς και το σχετικό λογισμικό που χρησιμοποιεί τα δίκτυα ως μέσο ανταλλαγής αυτής της πληροφορίας. Μία σελίδα Web είναι ένα κείμενο που περιέχει ή αναφέρεται σε διάφορα είδη δεδομένων, όπως κείμενο, εικόνες, γραφικά και προγράμματα. Οι σελίδες Web περιέχουν συνδέσμους σε άλλες σελίδες τις οποίες ο χρήστης μπορεί να επισκεφθεί. Ένας δικτυακός τόπος (Web Site) είναι μία συλλογή σχετιζομένων σελίδων web. To Internet είναι αυτό που επιτρέπει την επικοινωνία, αλλά το Web διευκολύνει την επικοινωνία, την κάνει παραγωγικότερη και περισσότερο διασκεδαστική. Με έναν web browser (φυλλομετρητής, περιηγητής ιστού, πλοηγός ιστού) μπορεί κάποιος να δει ιστοσελίδες που μπορούν να περιλαμβάνουν κείμενο, εικόνες, βίντεο και άλλα αρχεία πολυμέσων, και να πλοηγηθεί μεταξύ αυτών με τη χρήση υπερσυνδέσμων.

15

16

17

18

19

20

21

22 Πώς κατασκευάζουμε ένα υπερκείμενο; Για την περιγραφή ενός υπερκειμένου χρησιμοποιούμε μια ειδική γλώσσα την Hyper Text Markup Language (HTML). Η γλώσσα αυτή επιτρέπει στον συγγραφέα να διαμορφώσει ένα κείμενο το οποίο θα παρέχει συνδέσμους με άλλα έγγραφα και διάφορα αρχεία. Τα υπερκείμενα που βρίσκονται στο WWW ονομάζονται ιστοσελίδες (web pages) Το σύνολο των ιστοσελίδων αποτελούν το site (δικτυακός τόπος) Τα προγράμματα τα οποία απεικονίζουν τις ιστοσελίδες, επιτρέποντας μας την ξενάγησή μας στο διαδίκτυο ονομάζονται πλοηγοί / φυλλομετρητές (Browsers), π.χ, Netscape & Internet Explorer

23 Web browser Τί είναι; Είναι ένα λογισμικό που επιτρέπει στον χρήστη του να προβάλλει, και να αλληλεπιδρά με, κείμενα, εικόνες, βίντεο, μουσική, παιχνίδια και άλλες πληροφορίες συνήθως αναρτημένες σε μια ιστοσελίδα ενός ιστότοπου στον Παγκόσμιο Ιστό ή σε ένα τοπικό δίκτυο. Το κείμενο και οι εικόνες σε μια ιστοσελίδα μπορεί να περιέχουν υπερσυνδέσμους προς άλλες ιστοσελίδες του ίδιου ή διαφορετικού ιστότοπου. Ο Web browser επιτρέπει στον χρήστη την γρήγορη και εύκολη πρόσβαση σε πληροφορίες που βρίσκονται σε διάφορες ιστοσελίδες και ιστότοπους εναλλάσσοντας τις ιστοσελίδες μέσω των υπερσυνδέσμων.

24

25 Υπερμεσική δομή του WWW Τα υπερμέσα (hypermedia) είναι λογική επέκταση του όρου υπερκείμενο στα οποία γραφικά, ήχος, βίντεο, απλό κείμενο και υπερσύνδεσμοι περιπλέκονται ώστε να δημιουργήσουν ένα γενικά μη γραμμικό μέσο πληροφοριών. Αυτό έρχεται σε αντίθεση με την ευρύτερη έννοια πολυμέσα (multimedia), που χρησιμοποιείται για να περιγράψει μη διαδραστικές γραμμικές παρουσιάσεις.

26 Δυνατότητες Υπερμεσικής Δομής Γρήγορη μετάβαση σε αναφορές και παρουσίαση σχετικού περιεχομένου Αμφίδρομη μετακίνηση μεταξύ αναφορών (από τη σελίδα προέλευσης στη σελίδα προορισμού και αντίστροφα) πράγμα που είναι δύσκολο και χρονοβόρο για έντυπα μέσα Ο χρήστης μπορεί να επισημάνει το περιεχόμενο και να δημιουργήσει νέες αναφορές. Οι πληροφορίες μπορούν να δομηθούν με διάφορους τρόπους. Διαφορετικές οργανώσεις του ίδιου περιεχομένου επιτρέπουν για εξειδικευμένες δομές για διαφορετικές κατηγορίες χρηστών. Ο χρήστης πλοηγείται στο περιεχόμενο και βρίσκει νέες πληροφορίες καθώς διερευνά μια συγκεκριμένη θεματική περιοχή. Η υπερμεσική δομή είναι ευχάριστη στη χρήση.

27 Δυσκολίες Υπερμεσικής Δομής Η ευκολία πλοήγησης μπορεί να αυξήσει το ρίσκο του χρήστη να προσπερνά με ευκολία χρήσιμο περιεχόμενο, με αποτέλεσμα να έχει περιορισμένη αντίληψη για το θέμα. Το ρίσκο του αποπροσανατολισμού μπορεί να οδηγήσει σε σύγχυση αντί για κατανόηση του περιεχομένου, ειδικά όταν ο χρήστης μετακινείται μεταξύ των κόμβων με τυχαίο τρόπο. Η χρήση υπερμεσικής δομής εμπεριέχει μια συγκεκριμένη γνωστική επιβάρυνση. Το πρόβλημα είναι ότι ο χρήστης πρέπει να αλληλεπιδράσει με το σύστημα, το οποίο μπορεί να είναι πολύπλοκο, ώστε να πετύχει το οτιδήποτε.

28 Πολυμεσικά στοιχεία μιας εφαρμογής Οι πρώτοι browsers υποστήριζαν μόνο κείμενο και αυτό με μια γραμματοσειρά και ένα χρώμα. Κατόπιν προστέθηκαν οι δυνατότητες για χρώματα, πολλαπλές γραμματοσειρές, στυλ κειμένου και εικόνες. Κείμενο ASCII, Εικόνας, PDF(portable document format) Εικόνα Jpeg, gif, png Η υποστήριξη ήχων, animation και βίντεο χειρίζεται με διαφορετικούς τρόπους από διαφορετικούς browsers. Άλλοτε ο χειρισμός γίνεται απευθείας από τον κώδικα της σελίδας και άλλοτε χρειάζεται ένα βοηθητικό πρόγραμμα (plug-in) Ήχος midi, Real Audio (rm), Wave (wav), wma, mp3 Βίντεο avi, wmv, mpeg, QuickTime (mov), Real Video (rm), Flash (swf, flv), Mpeg-4 (mp4) infographics, banner ads, presentations

29 Τι περιεχόμενο μπορεί να περιλαμβάνει Ένας ταξιδιωτικός ιστότοπος για την ανάδειξη μιας περιοχής; Ένας ιστότοπος για συμπλήρωση δηλώσεων φόρου εισοδήματος για το υπουργείο οικονομικών; Μια online μουσική βιβλιοθήκη; Ένας διαδικτυακός τόπος για εύρεση εργασίας; Ένα κοινωνικό δίκτυο; Ο προσωπικός ιστότοπος ενός φωτογράφου; Ο ιστότοπος ενός καταστήματος που πουλάει ηλεκτρονικά είδη; Ο ιστότοπος μιας τράπεζας;

30 Ταξιδιωτικός ιστότοπος για την ανάδειξη μιας περιοχής Πληροφορίες για ιστορία, αξιοθέατα, μουσεία, δραστηριότητες, διαμονή, φαγητό, πρόσβαση, νέα, τηλέφωνα επικοινωνίας. Εικόνες της περιοχής Βίντεο από εκδηλώσεις, διαφημιστικά, κλπ.

31

32 Ιστότοπος για συμπλήρωση δηλώσεων φόρου εισοδήματος για το υπουργείο οικονομικών Login φόρμες, πίνακες, επεξηγήσεις, βοήθεια, κουμπιά

33 Online μουσική βιβλιοθήκη Μουσική Βίντεο Πληροφορίες για albums, καλλιτέχνες Νέα

34 Διαδικτυακός τόπος για εύρεση εργασίας Πληροφορίες για αγγελίες, εργοδότες, βιογραφικά υποψηφίων, λογαριασμοί υποψηφίων, λογαριασμοί εργοδοτών

35 Κοινωνικό Δίκτυο Πληροφορίες μελών Φωτογραφίες Μουσική Βίντεο Σχόλια Κείμενα Σύνδεσμοι σε εξωτερικό περιεχόμενο Επισημάνσεις Παιχνίδια

36 Προσωπικός ιστότοπος ενός φωτογράφου Φωτογραφίες Πληροφορίες για τον φωτογράφο και για τη δουλειά του Βίντεο; Στοιχεία επικοινωνίας

37 Ιστότοπος ενός καταστήματος που πουλάει ηλεκτρονικά είδη Φωτογραφίες προϊόντων Κατηγορίες Πληροφορίες για προϊόντα (τιμή, τεχνικές, διαθεσιμότητα) Λογαριασμοί μελών Διαδικασία online αγοράς Πληροφορίες για καταστήματα, παραλαβή στο σπίτι, κλπ.

38 Ιστότοπος μιας τράπεζας Πληροφορίες για τραπεζικά προϊόντα, για συγκεκριμένες κατηγορίες πελατών, για την τράπεζα, για θέσεις εργασίας, κλπ Λογαριασμοί μελών Διαφημιστικά βίντεο Διαφημιστικές φωτογραφίες

39 Επισκεφτείτε και καταγράψτε το περιεχόμενο των ιστοσελίδων των ακόλουθων κατηγοριών : Εφημερίδες - περιοδικά Εκπαιδευτικοί οργανισμοί: Σχολεία, Πανεπιστήμια, ΤΕΙ,ΙΕΚ, φροντιστήρια Εταιρίες σταθερής και κινητής τηλεφωνίας Εταιρίες κατασκευής ιστοσελίδων Τηλεφωνικούς καταλόγους Κανάλια Super market

40 Βιβλιογραφία Καμμάς Σ., Διαδικτυακές σημειώσεις μαθήματος «Εργαλεία ανάπτυξης εφαρμογών Ιντερνέτ Ι», Πρέντζα Α., σημειώσεις μαθήματος «Προγραμματισμός Παγκόσμιου Ιστού», πανεπιστήμιο Πειραιώς www. w3schools.com