"Διαδικτυακή υπηρεσία πληροφοριών φαρμακείων"

Transcript

1 ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΚΑΒΑΛΑΣ Τμήμα Βιομηχανικής Πληροφορικής Θέμα: "Διαδικτυακή υπηρεσία πληροφοριών φαρμακείων" Μαλκάκη Βασιλική ΑΕΜ: 2027 Τσεχελίδης Θεόδωρος ΑΕΜ: 1758 Επιβλέπων Καθηγητής Δρ. Καραδήμος Δημήτριος Συν-επιβλέπων Καθηγητής: Δρ. Μωυσιάδης Λεύτερης -Καβάλα

2 ΠΡΟΛΟΓΟΣ Σε αυτή την πτυχιακή εργασία με θέμα Διαδυαυακή υτιηρεσία πληροφοριών φαρμακείων παρουσιάζουμε μια διαδικτυακή εφαρμογή (έναν ιστιότοτιο) που αφορά κατά κύριο λόγο τα διανυκτερεύοντα φαρμακεία, αλλά και γενικά σε όλα τα φαρμακεία μιας πόλης, που στην παρούσα πτυχιακή εργασία είναι η πόλη της Καβάλας. Η βασική ιδέα μας, της οποίας αποτέλεσμα είναι αυτή η πτυχιακή είναι η δημιουργία ενός ιστιότοπου που να βοηθά άμεσα και με ακρίβεια τον χρήστη, να αναζητά και να βρίσκει το φαρμακείο που επιθυμεί. Κατασκευάσαμε αυτόν τον ιστιότοπο, ο οτιοίος έχει την ονομασία myepharmacy.gr, για να αναζητάμε και να βρίσκουμε το κοντινότερο διανυκτερεύον φαρμακείο από το σημείο που είμαστε εμείς ή που ετηλέγουμε στον χάρτη. Οι χρήστες μπορούν να ενημερωθούν για τα διανυκτερεύοντα φαρμακεία καθημερινά καθώς και να βλέπουν την ακριβή τοποθεσία του φαρμακείου που διανυκτερεύει στον χάρτη. Όλα τα στοιχεία του κάθε φαρμακείου επίσης παρουσιάζονται παράλληλα με τα σημεία στον χάρτη για να μπορεί ο χρήστης να επικοινωνεί με το φαρμακείο. Μια λίστα με όλα τα φαρμακεία της πόλης και ένας χάρτης που απεικονίζει τις θέσεις όλων των φαρμακείων συνολικά, στον χάρτη της πόλης με την βοήθεια των Google maps. Αναπτύξαμε αυτόν τον ιστιοτόπο με τα καλύτερα το δυνατόν εργαλεία όπως η HTML, JAVA SCRIPT, CSS, XML που είναι από τις κυριότερες διαδικτυακές γλώσσες προγραμματισμού. Καταχωρίσαμε όλα τα δεδομένα όλων των φαρμακείων της πόλης σε ένα αρχείο XML και με την βοήθεια της JAVA SCRIPT, καθορίσαμε τα απαραίτητα στοιχειά για να τα παρουσιάζουμε στον ιστιότοπο μας. Η διαμόρφωση και το περιβάλλων που θα βλέπει και χειρίζεται ο χρήστης είναι σε HTML και το μενού του ιστιοτόπου μας είναι CSS. Όλα αυτά τα εργαλεία και δεδομένου ότι εναρμονίστηκαν με την λειτουργικότητα και την όμορφη σχεδίαση, έχουν ένα ευχάριστο αποτέλεσμα για τον κάθε ετησκέπτη του ιστιοτόπου μας. Αυτός είναι ο βασικός λόγος κατασκευής ενός ιστιοτόπου, η όσο το δυνατών συχνότερη ετησκεψιμότητα. Έχοντας πάντα ως βασικό γνώμονα την λειτουργικότητα και την αναγκαία ύπαρξη ενός ιστιοτόπου κατασκευάσαμε και την «διαδικτυακή υπηρεσία πληροφοριών φαρμακείων». Στην πτυχιακή εργασία αυτή προσπαθήσαμε να κατανοήσουμε και να βοηθήσουμε τον αναγκαίο κλάδο των φαρμακείων, λόγο της λεπτής ιδιότητας τους, ως απλοί καταναλωτές ενός φαρμακείου που έχουν την ανάγκη για γρήγορη και με ακρίβεια, πρόσβαση σε αυτό. Συμπερασματικά αναπτύξαμε μία φιλική εφαρμογή προς τον χρήστη που πληρεί όλες τις προϋποθέσεις ευχρηστίας, λειτουργικότητας και ασφάλειας με την καινοτόμα ιδέα της εύρεσης του κοντινότερου φαρμακείου από το σημείο που βρίσκεται ένας χρήστης του ιστιοτόπου μας.

3 Λιαόικτυακή Υττηρεσύι Πληροφορκ,'Λ Φαρμακ Ευχαριστίες Θα θέλαμε να ευχαριστήσουμε τον ετηβλέπων καθηγητή μας Δρ. Καραδήμος Δημήτριος καν τον συνετηβλέπων καθηγητή μας Δρ. Μωυσιάδης Λεύτερης για την εμτηστοσύνη που μας έδειξαν αναθέτοντας μας την πτυχιακή εργασία, καθώς και για της απαραίτητες γνώσεις και εμπειρία που μας παρείχαν στον σχεδίασμά και την υλοποίηση ενός ιστιοτόπου. Τέλος τους ευχαριστούμε για την ευκαιρία που μας έδωσαν να ασχοληθούμε με το θέμα το οποίο εμπνευστήκαμε μαζί και καταφέραμε να το δούμε να υλοποιείται.

4 Λιαόικ'τυακή Υτπιρκσύχ 11/-ηροφ( ι ΠΕΡΙΕΧΟΜ ΕΝΑ Περιεχόμενα... σελ Βασική ιδέα και ανάπτυξη απαιτήσεων...σελ Εισαγωγή..σελ Βασική ιδέα αντικειμέλ'ου...σελ Ανάπτυξη ιδέας και αναζήτηση στοιχείων...σελ Ανάπτυξη απαιτήσεων χρήστη και φαρμακείων... σελ Εργαλεία και τρόποι υλοποίησης...σελ Εργαλεία απαραίτητα για την κατασκευή...σελ Σχεδιασμός και επιλογή περιεχομένων της σε/.ίδας...σελ Δομή της σελίδας... σελ Κώδικας της σελίδας και ανάλυση του κώδικα... σελ Οδηγός χρήσης της ιστοσελίδας... σελ Εισαγωγή Αρχική σελίδα Κατάλογος φαρμακείων 3.4. Διανυκτερεύοντα φαρμακεία 3.5. Συντομότερη διαδρομή... Βιβλιογραφία...σελ σελ. 78..σελ σελ σελ σελ. 89

5 Δυχδικτυακή Υπηρκσία ΠληροφοριοΛ ΦαρμακκνΛ' 1. Βασική ιδέα και ανάπτυξη απαιτήσεων 1.1. Ε ισαγωγή Σε αυτό το κεφάλαιο της τττυχιακής εργασίας αναφέρονται τα δεδομένα που χρησιμοποιήθηκαν για την υλοποίηση της ιστοσελίδας και ποιο ήταν το βασικό ερέθισμα για το αντικείμενο που εξυπηρετεί. Με λίγα λόγια θα αναφέρουμε γιατί ετηλέξαμε τον χώρο των φαρμακείων ως κύριο αντικείμενο της ιστοσελίδας μας. Παρακολουθώντας ως χρήστες και εμείς του διαδικτύου τις εξελίξεις και την ανάπτυξη του, κάναμε μια κοινή διαπίστωση, ότι όλοι οι χρήστες τον υπολογιστών και σε ετιέκταση και του διαδικτύου, για την αναζήτηση ενός οποιοσδήποτε αντικειμένου σε οποιονδήποτε τομέα, κάνουν πρώτα μια γενική αναζήτηση με την βοήθεια πάντα των μηχανών αναζήτησης. Στην συνέχεια αφού δεν βρίσκουν αυτό που αναζητούν θα συνεχίσουν το ψάξιμο χρησιμοποιώντας άλλα μέσα και εργαλεία. Έχοντας ακόμα και σαν δεδομένο ότι ο χώρος του διαδικτύου κατακτά όλο και περισσότερους ανθρώπους, μπαίνοντας μερικές φορές και αναγκαστικά στην καθημερινή τους ζωή, έχει γίνει ένα απαραίτητο εργαλείο για μεγάλο εύρος εργασιών αλλά και μέχρι ως απαραίτητο μέσω ψυχαγωγίας και ετηκοινωνίας. Αφορμή ήταν ένα τυχαίο περιστατικό για το οποίο χρειάστηκε να κάνουμε και εμείς μια αναζήτηση στο διαδίκτυο για ένα φαρμακείο. Η ώρα που έγινε η αναζήτηση ήταν απογευματινή με αποτέλεσμα η αναζήτηση να γίνει στα διανυκτερεύοντα. Παρατηρώντας βλέπουμε ότι θα ήταν τηο βολικό να μην ψάχνουμε μόνο τα στοιχεία του φαρμακείου που διανυκτερεύει αλλά και για κάτι πιο ουσιώδες όπως την απόσταση από εμάς, ποιο είναι πιο κοντά σε μας αλλά και την διαδρομή που πρέπει να ακολουθήσουμε. Η ιδέα της οποίας αφορμή ήταν ένα τυχαίο περιστατικό έγινε ποιο δυνατή όταν σκεφτήκαμε ότι μπορεί να υλοποιηθεί στα πλαίσια της πτυχιακής εργασίας που αναζητούμε. Κάνοντας λοιπόν μια σχετική έρευνα καταλήξαμε ότι είναι μια αρκετά καλή ιδέα και συνεχίσαμε με την οργάνωση της για να γίνει πράξη Βασική ιδέα αντικείμενου Αρχίζοντας την έρευνα για την κύρια ιδέα τις πτυχιακής μας εργασίας διαπαστώσαμε όη στον ευαίσθητο κλάδο των φαρμακείων, υπάρχει ένα μεγάλο κενό και αν όχι κενό σίγουρα όμως με μεγάλες ελλείψεις, σε ότι αφορά τα διανυκτερεύοντα φαρμακεία. Αόγο ότι σε περίπτωση που έχουμε την ανάγκη να βρούμε ένα διανυκτερεύουν φαρμακείο έχουμε να κάνουμε με ένα σύνολο ανθρώπων που αναζητούν άμεσα όλα τα στοιχεία για ένα τέτοιο φαρμακείο. Όποτε πρέπει με

6 Διαδικτυακή Υττηρεσία Πληροφοριών Φαρμακείων κάποιον γρήγορο τρόπο να έχουμε μια απάντηση στο ερώτημα μας. Βλέτιουμε λοιπόν ότι είναι ένας τομέας με ιδιαίτερη ευαισθησία και έτσι ξεκινήσαμε την αναζήτηση για να δούμε τιια θα είναι τα αποτελέσματα μας. Με μια ματιά βλέπουμε ότι η ανεύρεση ενός διανυκτερεύοντος φαρμακείου είναι σχετικά εύκολη υπόθεση, αλλά στην περίπτωση που θέλουμε να δούμε την διαδρομή, ακόμα και την περιοχή που βρίσκετε το φαρμακείο διαπιστώνουμε ότι στο μεγαλύτερο ποσοστό είναι σχεδόν ανύπαρκτες αυτές οι οδηγίες. Για τον λόγο αυτό εκτιμήσαμε ότι θα ήταν ορθότερο να υπάρχει μια ιστοσελίδα που περιέχει πρώτον όλα τα φαρμακεία μιας περιοχής ή πύλης, δεύτερον να περιέχει απαραίτητα τα διανυκτερεύοντα φαρμακεία με όλα τα στοιχεία τους αλλά και την θέση που έχουν σε μια πόλη - περιοχή και τρίτον πως θα μπορούσαμε να βρούμε ποιο είναι ταο κοντά από την θέση που έχουμε εμείς σε αυτήν την πόλη - περιοχή. Πραγματοποιήσαμε μια δεύτερη έρευνα και σε μηχανές αναζήτησης αλλά και σε εττίσημες σελίδες συνεταιρισμών και υπουργείων, για να διαπιστώσουμε εάν υτιάρχει κάτι παρόμοιο στο διαδίκτυο που να αφορά τα φαρμακεία μιας οποιασδήποτε τιεριοχής. Τα ευρήματα μας ήταν αρνητικά κατά κύριο λόγο και σε ένα ελάχιστο ποσοστό πλησίαζε την ιδέα μας. Όσο για την ευρύτερη περιοχή της Καβάλας, που είναι και το βασικό σημείο της ιστοσελίδας μας δεν υπήρχε κάτι παρόμοιο. Έτσι αποφασίσαμε να υλοποιήσουμε αυτήν την ιδέα στα πλαίσια μιας πτυχιακής εργασίας που θα έχει πραγματική απήχηση με μεγάλο ποσοστό βελτίωσης για περεταίρω ανάπτυξη. Σε ένα χώρο σαφώς που είναι όπως αναφέραμε και πιο πάνω αρκετά λεπτές ιδιαιτερότητες ως προς τους επισκέπτες, είτε όσον αφορά μια ιστοσελίδα είτε το ίδιο ως χώρο και κατάστημα. Με αλλά λόγια είναι μια καινοτόμα ιδέα στον τομέα των φαρμακείων και λειτουργική για το μέσω χρήστη του διαδικτύου. 1,3. Ανάπτυξη ιδέας και αναζητηςη στοιχείων Έχοντας κάνει τις παραπάνω διαπιστώσεις ξεκινήσαμε την εκτεταμένη ερεύνα για τη συλλογή των φαρμακείων στην περιοχή της Καβάλας. Θεωρήσαμε σκόπιμο να αναζητήσουμε πρώτα τον αριθμό των φαρμακείων που υπάρχουν πραγματικά στην περιοχή. Από την επίσημη σελίδα του συνεταιρισμού των φαρμακείων της πόλης της Καβάλας καταφέραμε να βρούμε το νούμερο αυτών. Το επόμενο βασικό βήμα ήταν να αναζητήσουμε όλες τις πληροφορίες για το κάθε φαρμακείο όπως: όνομα φαρμακείου ή ιδιοκτήτη, διεύθυνση του φαρμακείου και το τηλέφωνο του. Μετά την συγκέντρωση και αυτών των στοιχείων έπρεπε να τα βρούμε και να τα αναζητήσουμε, στον χάρτη της πόλης. Αυτό θα μας βοηθούσε για να έχουμε μια γενική εικόνα της θέσης των φαρμακείων στην πόλη της Καβάλας.

7 Διαδικτυακή Υττηρεσία Πληροφορκόν Φαρμακεΰον Η αναζήτηση των σημείων - διευθύνσεων των φαρμακείων ήταν το επόμενο βήμα για την οργάνωση των στοιχείων μας. Με την βοήθεια της εφαρμογής των Google maps καταφέραμε να αναζητήσουμε με βάση τις διευθύνσεις, όλα τα φαρμακεία που ανήκουν στην πόλη. Αφού αναζητήσαμε και βρήκαμε τις θέσεις τους έπρετιε να καταχωρίσουμε και αυτές σε έναν χάρτη συγκεντρωτικά. Για τον σκοτιό αυτό αλλά και για την λειτουργικότητα της σελίδας, έτσι ώστε οι χρήστες να έρχονται σε επαφή με τον ιδιοκτήτη ή τον διαχειριστή της σελίδας, κατασκευάσαμε ένα λογαριασμό ηλεκτρονικού ταχυδρομείου ( ) στην υττηρεσία που μας τιαρέχει δωρεάν η Google. Για την καταχώριση των σημείων - φαρμακείαιν στο χάρτη θα μιλήσουμε σε επόμενη ενότητα αναλυτικότερα. Στην περίπτωση όμως που θα θελήσουμε να χρησιμοποιήσουμε το σημείο που είναι ένα οποιοδήποτε φαρμακείο από την λίστα μας, πρέπει να ξέρουμε τις συντεταγμένες του επάνω στον χάρτη. Οι συντεταγμένες ενός σημείου καθορίζουν την ακριβή του θέση πάνω σε ένα χάρτη και μπορούμε να τις υπολογίσουμε κατά κύριο λόγο από την απόσταση που έχουν από τους βασικούς άξονες της γης. Θα αναφερθούμε αναλυτικότερα σε άλλο κεφάλαιο. Οπότε η αναζήτηση των συντεταγμένων είναι το επόμενο μας βήμα στην αναζήτηση των βασικών στοιχείων για τα φαρμακεία. Τελευταίο και βασικότερο από τα στοιχεία μας είναι και η ημερομηνία που το κάθε φαρμακείο έχει διανυκτέρευση. Αυτά τα στοιχεία τιεριστασιακά μπορούμε να τα αντλήσουμε από την εττίσημη σελίδα του συνεταιρισμού των φαρμακείων της πόλης της Καβάλας. Στην συγκεκριμένη όμως πτυχιακή εργασία θα προτιμήσουμε να καταχωρίσουμε εμείς τυχαίες ημερομηνίες που το κάθε φαρμακείο θα διανυκτερεύει. Πάντα όμως θα φροντίσουμε να έχουμε τουλάχιστον δυο φαρμακεία τα οποία θα διανυκτερεύουν κάθε μέρα. Με αυτό το ξεκαθάρισμα του βασικότερου στοιχείου για την λίστα των φαρμακείων είμαστε έτοιμοι να ξεκινήσουμε την οργάνωση, τον σχεδίασμά και τέλος την υλοποίηση της ιστοσελίδας μας. Συγκεντρώνοντας όλες αυτές τις πληροφορίες για τα φαρμακεία της πόλης, είμαστε στο σημείο όπου μπορούμε να ξεκινήσουμε την αναζήτηση τον κατάλληλων εργαλείων για την κατασκευή της σελίδας μας Ανάπτυξη απαιτήσεων χρηςτη και φαρμακείων Πριν από την αναζήτηση των κατάλληλων εργαλείων θεωρήσαμε σκόπιμο να συλλογιστούμε, ποιες μπορεί να είναι οι απαιτήσεις από έναν απλό χρήστη του διαδικτύου. Συζητώντας με τον καθηγητή μας αλλά και έχοντας έρθει σε επαφή με απλούς χρήστες αλλά και με ποιο έμπειρους, διαπιστώσαμε ότι η εμφάνιση και η λειτουργικότητα είναι τα δυο κύρια χαρακτηριστικά για μια επιτυχημένη ιστοσελίδα.

8 Διαδικτυακή Υπηρεσία Πληροφοριών Φαρμακείων Από τον διάλογο που είχαμε με τους χρήστες καταλήξαμε ότι το εύχρηστο μενού και το ξεκάθαρο περιεχόμενο της κάθε σελίδα μας θα έκανε τον κάθε επισκέπτη να μένει ικανοποιημένος. Τα εύστοχα και περιεκτικά κείμενα αλλά και τα σύντομα σημειώματα του μενού περιήγησης θα διευκόλυναν την περιήγηση του κάθε χρήστη που επισκέπτεται την σελίδα. Σαν βάση τα σχόλια και τις παρατηρήσεις των χρηστών σχηματίσαμε την γενική μορφή τις σελίδας μας. Πέραν όμως από τις συζητήσεις με τους χρήστες κρίναμε απαραίτητη και την επικοινωνία με έναν επιχειρηματία του κλάδου (φαρμακοποιό) πάντα με την βοήθεια του καθηγητή μας. Ήρθαμε σε επαφή με έναν επιχειρηματία του χώρου και προστιαθήσαμε να καταλάβουμε τι θα ήταν πιο χρήσιμο για έναν πελάτη του φαρμακείου. Μας ανέφερε χαρακτηριστικά ο φαρμακοποιός ότι βασικότερο από όλα τα στοιχεία είναι να γνωρίζει ένας χρήστης - πελάτης πότε διανυκτερεύει ένα φαρμακείο είτε στην γειτονιά του είτε στην ευρύτερη περιοχή. Αλλά εττίσης ότι είναι πολύ σημαντικό να μπορεί να γνωρίζει και τον τρόπο που θα φτάσει στο φαρμακείο, δηλαδή χρόνο και διαδρομή. Μας επισήμανε ότι είναι πολύ χρήσιμο και η προβολή της διαδρομής με το αυτοκίνητο αλλά και με τα πόδια. Κρατώντας όλα αυτά που αποκομίσαμε από την χρήσιμη συζήτηση με τον ε^χειρηματία (φαρμακοποιό) καταλήξαμε στο βασικό σχέδιο στο οποίο θα στηριχτεί η σελίδα μας. Είναι προφανές ότι η εύρεση του κοντινότερου διανυκτερεύον φαρμακείου από το σημείο που καθορίζει ο χρήστης ότι βρίσκετε, την ώρα που κάνει την αναζήτηση, είναι το βασικό στοιχείο για την επιτυχία της σελίδας μας.

9 Διαδικτυαιαί Υπηρεσία Πληροφο(^.^\ Φα()μα> 2. Εργαλεία και τροποι υλοποίησης 2.1. Ε ρ γ α λ ε ία α π α ρ α ί τ η τ α γ ια τ η ν κ α τ α σ κ ε υ ή Επόμενη κπνηση μετά από την μελέτη των απαιτήσεων για την σωστή λ-ειτουργιά της σελίδας μας, πρέπει να είναι η απόφαση (μετά από έρευνα) στην εύρεση των κατάλληλων εργαλείων για την κατασκευή της, έτσι ώστε να προχωρήσουμε σταδιακά στην ολοκλήρωση της σελίδας μας. Τα βασικά εργαλεία που εκτιμήσαμε ότι απαιτούνται είναι πρώτον ένα ικανό πρόγραμμα κατασκευής ιστοσελίδων, δεύτερον ένα τρόπο να αποθηκεύουμε τα δεδομένα που αφορούν τα φαρμακεία μας και να τα παρουσιάζουμε αναλόγως και τρίτων ένα εργαλείο για την παρουσίαση της σελίδας μας που είναι ένας web browser. Αναζητήσαμε λοιπόν τα καταλληλότερα για την δίκιά μας ιστοσελίδα. Μετά από προσεκτική μελέτη των υπαρχόντων εργαλείων για την κατασκευή ιστοσελίδων καταλήξαμε στην επιλογή του προγράμματος Dreamweaver CS5 της Adobe. Αναφορικά μπορούμε να πούμε λίγα λόγια για την λειτουργία και τις δυνατότητες αυτού του προγράμματος. Το Dreamweaver CS5 είναι ένα κορυφαίο πρόγραμμα για την συγγραφή ιστοσελίδων, σε κώδικα HTML, αλλά και επεξεργασίας λογισμικού με μεγάλη ευκολία στην χρήση του από τον σχεδιαστή. Το Dreamweaver είναι ιδανικό στο να μπορούμε να δημιουργήσουμε γρήγορα φόρμες (forms), πλαίσια (frames), πίνακες (tables) και άλλα αντικείμενα της HTML. Παρέχει δυνατότητες επεξεργασίας τόσο του οπτικού σχεδιασμού (visual design), όσο και του κώδικα μιας σελίδας με την δυνατότητα της ταυτόχρονης προβολής τον σημείων που σχεδιάζονται ή επεξεργάζονται. Έχει επίσης την δυνατότητα κατασκευής προτύπων που βασίζονται σε ιστοσελίδες και σχεδιασμούς για την εμφάνιση της σελίδας μας σε desktop P.C., ή Smartphone, ή tablet ακόμα και άλλες συσκευές. Γενικά διαπιστώνουμε ότι το λογισμικό πακέτο Dreamweaver CS5 της εταιρίας Adobe είναι ένα εύχρηστο και πολύ δυναμικό εργαλείο για την κατασκευή ιστοσελίδων με άπυρες δυνατότητες και επιλογές για τον κατασκευαστή. Στην «Εικόνα 1» βλέπουμε την αρχική οθόνη όταν ανοίγουμε το πρόγραμμα Dreamweaver CS5.

10 Διαδίκτυακή Υττηρεσία Πληροφοριών Φαρμακείων Εικόνα 1 (Αρχική οθόνη Dreamweaver CS5) Συνεχίζοντας την αναζήτηση για τα κατάλληλα εργαλεία, αντιμετωτήσαμε ένα προβληματισμό για την καταχώριση των δεδομένων μας. Προσπαθήσαμε να καταλήξουμε σε μια λύση η οποία θα είναι εύχρηστη και για τον σχεδιαστή αλλά και για τον διαχειριστή της σελίδας μας. Η καταχώριση των δεδομένων γίνετε κατά κύριο λόγο σε μια βάση δεδομένων. Οπότε οι επιλογές μας είναι μια βάση δεδομένων με HTML και XML. Καταλήξαμε εν τέλει στην ετηλογή της XML για την καταχώριση των δεδομένων μας. Η XML δεν είναι μια γλώσσα προγραμματισμού με την κυριολεκτική της μορφή είναι μια γλώσσα διαχείρισης δεδομένων και αναπαριστά με κωδικοποιημένο τρόπο τα δεδομένα. Οι περιορισμοί της HTML γέννησαν την ανάγκη για την δημιουργία της XML, για τον λόγο αυτό έχουν και άριστη σχέση συνεργασίας στην κατασκευή ιστοσελίδων. Έπειτα ένα εργαλείο το οποίο χρησιμοποιήσαμε είναι το google maps μία υπηρεσία της google, που μας δίνει την δυνατότητα να δημιουργήσουμε τους χάρτες τους οποίους θα καλέσουμε και θα εμφανίσουμε στην σελίδα μας. Για την σωστή σύνδεση τους χρησιμοποιούμε την υπηρεσία google api η οποία είναι ένα ιδιαίτερο σύνολο προδιαγραφών που τα προγράμματα λογισμικού μπορούν να χρησιμοποιήσουν για να υπάρχει η σωστή μεταξύ τους επικοινωνία. Οπότε χρησιμοποιείται στα πλαίσια ανάπτυξης ενός ιστού, με χαρακτηριστικό ένα καθορισμένο σύνολο αποστολής μηνυμάτων. Οπότε με την βοήθεια του ανοιχτού κώδικα της google API επιτυγχάνονται οι διεργασίες. Μετά και από την επιλογή του τρόπου αποθήκευσης των στοιχείων μας, αλλά και του προγράμματος για την κατασκευή της σελίδας μας και τις υπηρεσίες της google maps που χρησιμοποιήσαμε, έχουμε να αποφασίσουμε τον περιηγητή μας (web Σελίδα 8

11 Διαδικτυακή Υπηρεσία Πληροφοριών Φαρμακεύω browser). Στην επιλογή του περιηγητή μας επιλέξαμε τον Mozilla Firefox για τον λόγο ότι είναι ένας από τους πληρέστερους με μεγάλο δίκτυ ασφάλειας και εξαιρετικά εύχρηστος περιηγητής. Το γεγονός ότι είναι ένας από τους δημοφιλέστερους περιηγητές ήταν ένα βασικό επιχείρημα επίσης στην τελική επιλογή του. Αφού έχουμε αποφασίσει για τα εργαλεία που θα χρησιμοποιήσουμε για την υλοποίηση της ιστοσελίδας μας, πρέπει να ελέγξουμε και τις δυνατότητες που χρειάζονται και για την σωστή λειτουργιά των εργαλείων μας, αλλά και για τις απαιτήσεις της ιστοσελίδας μας. Καταρχήν θα ελέγξουμε τις ελάχιστες απαιτήσεις που χρειάζεται το σύστημα μας σε υλικό (hardware), αλλά και το λειτουργικό σύστημα που θα είναι συμβατό. Intel Pentium 4 ή AMD Athlon 64 ετιεξεργαστή Αειτουργικό σύστημα Microsoft Windows ΧΡ με Service Pack 2 (Service Pack 3 συνιστάτε), Windows Vista Home Premium, Business, Ultimate, ή Enterprise με Service Pack 1, ή Windows 7, ή Mac OS X vlo.5.8, ή Mac OS XvlO.6 512MB μνήμη RAM 1GB του διαθέσιμου χώρου στο σκληρό δίσκο για την εγκατάσταση του προγράμματος. Εάν εγκατασταθεί σε Mac OS X απαιτείται περισσότερος χώρος 1.8GB. Κατά την διάρκεια της εγκατάστασης απαιτείτε περισσότερος χώρος (δεν εγκαθίσταται σε συσκευές αποθήκευσης flash) 1280x800 οθόνη με κάρτα γραφικών στα 16-bit. DVD-ROM drive Ευρυζωνική σύνδεση στο Internet (DSL) για online υπηρεσιών, σε συνεχή βάση Τα εργαλεία είναι ένα βασικό στάδιο που πρέπει να πάρουμε σωστές αποφάσεις για να μπορέσουμε να δουλέψουμε με ευκολία και αποτελεσματικότητα. Συνεχίζοντας στο επόμενο στάδιο προχωράμε στον σχεδίασμά του κορμού της σελίδας που θέλουμε να κατασκευάσουμε, αλλά και να συμπεριλάβουμε όλες τις υποσέλιδες (links) που θα χρειαστούμε για να είναι πλήρη η κατασκευή μας ΣΧΕΔΙΑΣΜΟΣ και ΕΠΙΑΟΓΗ περιεχομένων ΤΗΣ ΣΕΛΙΑ.ΑΣ Απ τα σημαντικότερα κεφάλαια για την κατασκευή ιστοσελίδων είναι και ο σχεδιασμός. Δηλαδή η κατασκευή ενός προσχέδιου με τις απαραίτητες λειτουργίες μιας σελίδας. Προτού όμως ξεκινήσουμε πρέπει να επιλέξουμε ένα όνομα για την σελίδα μας, ένα URL, το οποίο να είναι διαθέσιμο και απαραίτητα σχετικό με το αντικείμενο της ιστοσελίδας μας. Καταλήξαμε μετά από την λεπτομερή αναζήτηση σε σχετικές σελίδες που ασχολούνται με την διαθεσιμότητα μιας URL, στο όνομα m> e-pharm acy, με γενική διεύθυνση URL τον τίτλο wwvv.myepharmacy.gr. Το όνομα της σελίδας μας είναι αρκετά σύντομο, δεν είναι μεγάλο και με δύοτκολη ορθογραφία.

12 Διαόικτυακή Υττηρεσία Πληροφορών Φαρμακείϋ)\ Είναι 7ΐερΐ κτικό, γιατί αναφέρα την ιδιότητα της σελίδας μας tou έχει να κάνει με φαρμακείο, αλλά και την ένδειξη ότι έχει αυτοματοτιοιημένες διαδικασίες. Όπως έχουμε πει παραπάνω και έχοντας κατασταλάξει στο όνομα της σελίδας μας, πρέτιει να ενώσουμε όλα τα δεδομένα που βρήκαμε και μας είναι αναγκαία, σε ένα αρχείο για την επεξεργασία και την παρουσίαση τους ανάλογα με την περίσταση. Έτσι πρώτο μας μέλημα είναι η κατασκευή ενός XML αρχείου που να περιέχει όλα τα δεδομένα του κάθε φαρμακείου. Δηλαδή πρέπει να περιέχει: Έναν αΰξοντα αριθμό της κάθε καταχώρισης του φαρμακείου Το όνομα του φαρμακείου ή του ιδιοκτήτη (φαρμακοποιού) I ην διεύθυνση που είναι το φαρμακείο Ί ο τηλέφωνο του φαρμακείου Το γεωγραφικό μήκος που βρίσκετε το φαρμακείο Το γεωγραφικό πλάτος που βρίσκετε το φαρμακείο Γην ημερομηνία της διανυκτέρευσης του κάθε φαρμακείου Με την αναφορά των στοιχείων που θα περιέχει το αρχείο δεδομένων μας XML προχωράμε στον σχεδιασμό και την καταχώριση τους. Ανοίγουμε το πρόγραμμα Dreamweaver CS5 και από το αρχικό μενού (βλέπε «Εικόνα 1») ετηλέγουμε την κατασκευή XML αρχείου (βλέπε «Εικόνα 2») και ξεκινάμε τις καταχωρίσεις. Ξεκινάμε τις καταχωρίσεις με βάση την σύνταξη της XML και έχουμε πλέον όλα τα Top Features {videos) ^ WWWmyepharme ΛΡΜ-ΧΑΒ- htn ^ SpfyAsaeta/SpryAccordon css ^ ASPVBScTik ^ XSLT (Entre page) S Open Q Getting Started» 0 ^ Resources» 2 Dreamweaver Exchange» Upgrade to Dreamwi (~1 Don't show aς Εικόνα 2 (Επιλογή κατασκευής XML αρχείου)

13 Διαδίκτυίΐκή Υπηρεσία Πληροφοριών Φαρμακεύι^ν δεδομένα μας καταχωρημένα. Η σύνταξη της XML μαζί με τον κώδικα και πως καταχωρούμε τα στοιχειά μας φαίνονται στην «Εικόνα 3». Τον κώδικα για την σύνταξη ενός XML αρχείου δεδομένων θα τον εξηγήσουμε στο παρακάτω κεφάλαιο. Εικόνα 3 (Καταχώριση δεδομένων στην XML) Μετά από την κατασκευή του αρχείου δεδομένων μας, απαραίτητη είναι η σχεδίαση της σελίδας μας. Δηλαδή το σύνολο των σελίδων που είναι αναγκαίες για την σωστή παρουσίαση των δεδομένων μας, πάντα με την βλέψη ότι πρέπει να ικανοποιεί τις απαιτήσεις και τις ανάγκες του χρήστη - επισκέπτη. Για την σωστή σχεδίαση της σελίδας μας πρέπει να συλλογιστούμε τις ανάγκες του χρήστη, όπως αναφέραμε και πιο πάνω. Από τις συζητήσεις που είχαμε και με τις δυο πλευρές χρήστη και φαρμακοποιού, καταλήξαμε ότι χρειάζεται να περιέχει τις σελίδες : 1. Αρχική σελίδα Στην αρχική σελίδα θα τοποθετήσουμε ένα χάρτη της πόλης της Καβάλας με όλα τα φαρμακεία να εμφανίζονται πάνω σε αυτόν. Εκτός από τα σημεία θα εμφανίζονται και τα πλήρη στοιχεία του φαρμακείου, με ένα κλικ πάνω στο σημείο που δηλώνει την θέση του. Αναφορικά θα εξηγήσουμε πως καθορίσαμε την θέση του κάθε φαρμακείου πάνω στον χάρτη. Στον λογαριασμό που δημιουργήσαμε όπως αναφέραμε και τηο πάνω, (ηλεκτρονικού ταχυδρομείου στο Gmail βλέπε «Εικόνα 4») θα μεταβούμε, αφού είμαστε συνδεδεμένοι, στο Google maps. Εκεί αφού επιλέξουμε το σημείο χάρτες μου, θα εμφανιστεί στην σελίδα μια επιλογή, που είναι για την Σελίδα 11

14 Διαδιιαυακή Υπηρεσία Πληροφορών Φαρμακείο^ν δημιουργία χάρτη. Αφού την ετηλέξουμε θα μπορέσουμε ετπλέγοντας ένα η περισσότερα σημεία να δημιουργήσουμε ένα χάρτη. Τα σημεία πάνω στον χάρτη τα επιλεγούμε με βάση τις διευθύνσεις των φαρμακείων. Αμέσως μετά μπορούμε να αναζητήσουμε και τα γειογραφικά μήκη και πλάτη για να τα καταχωρίσουμε στο αρχείο δεδομένων μας (βλέπε «Εικόνα 5») κάνοντας δεξί κλικ και από το αναδυόμενο μενού που εμφανίζετε κλικ στην ετπλογή τι υπάρχει εδώ. GcKigle i ; <S) : I ; Εικόνα 4 (Αρχική σελίδα Gmail)

15

16 AujoiKTOUioi Υπηρεσία Πληροφοριών Φαρμακείων 2. Κατά>Λγος φαρμακείων Δημιουργούμε ένα κατάλογο όλων των φαρμακείων της πόλης σε μια λίστα με τα απαραίτητα στοιχεία όπως όνομα φαρμακείου, διεύθυνση φαρμακείου, αλλά και το τηλέφωνο επικοινωνίας. Θεωρήσαμε σκόπιμο σε αυτήν την λίστα όταν επιλέγουμε (κάνουμε κλικ) σε ένα από τα ονόματα των φαρμακείων να αναδύετε ένα παράθυρο. Στο παράθυρο που θα αναδύετε θα εμφανίζετε ένας χάρτης που θα έχει μόνο το σημείο στο οποίο βρίσκετε το φαρμακείο σε έναν αποκλειστικό χάρτη. Αυτό για να έχει την δυνατότητα ο χρήστης να αναζητά και να βλέτιει μόνο την γύρο τιεριοχή (διευθύνσεις κ.τ.λ.) του φαρμακείου που επέλεξε. 3. Διανυκτερεύοντα φαρμακεία Κατασκευάζοντας μια σελίδα που θα έχει λειτουργική ύτιαρξη είναι σίγουρο ότι θα περιέχει την λίστα με τα διανυκτερεύοντα φαρμακεία. Αρχικά θα εμφανίζετε ένας πινάκας με τα στοιχειά των φαρμακείων που διανυκτερεύουν. Αλλά μόνο του αυτό δεν είναι και τόσο ξεχωριστό είτε λειτουργικά είτε σχεδιαστικά. Για τον λόγο αυτό θα εμφανίζουμε σε έναν χάρτη και τα σημεία που είναι τα διανυκτερεύοντα φαρμακεία. Η ενημέρωση των φαρμακείων θα γίνετε καθημερινά όπως είναι απαραίτητο. Έτσι ο ετησκέτιτης θα μπορεί να μάθει αλλά και να δει που είναι και ποια είναι τα διανυκτερεύοντα φαρμακεία της ημέρας στην πόλη του. 4. Συιτομότερη διαδρομή Ξεχωριστό κομμάτι αυτής της σελίδας σαν σύνολο είναι και η σελίδα που θα αναδεικνύει την συντομότερη διαδρομή. Δηλαδή ένας χρήστης που επισκέφτηκε την σελίδα μας μπορεί να δει όλα τα φαρμακεία σε ένα χάρτη, να δει την λίστα όλων των φαρμακείων με τον ατομικό τους χάρτη, να δει και να μάθει που είναι τα διανυκτερεύοντα φαρμακεία, αλλά τώρα θα έχει και την δυνατότητα να βρει πιο είναι πιο κοντά σε αυτόν. Προβάλουμε έναν χάρτη στην σελίδα μας στον οποίο ο χρήστης θα μπορεί να επιλέξει το σημείο που βρίσκετε, ή κάποιο άλλο της επιλογής του και να δει ποιο διανυκτερεύον φαρμακείο είναι πιο κοντά σε αυτό το σημείο. Ταυτόχρονα θα βλέπει και τις λεπτομέρειες της διαδρομής μαζί με τον χρόνο που χρειάζεται για να φτάσει. Επίσης θα έχει την επιλογή ο χρήστης να διαλέξει αν θα πάει με το αυτοκίνητο ή με τα πόδια. Μια σελίδα που θα πραγματοποιεί κάτι που δεν υπάρχει σε παρόμοια σελίδα στην περιοχή της Καβάλας. Αναλύσαμε αλλά και επιλέξαμε τα στοιχειά εκείνα που είναι απαραίτητα για την σελίδα μας. Με αφορμή την εύρεση των κεντρικών στοιχείων της σύνταξης της σελίδας μας, πρέπει να συνεχίσουμε στην κατασκευή της δομής. Η κατασκευή - διαμόρφωση της δομής, είναι η ραχοκοκαλιά στην οποία θα στηρίξουμε το σώμα της Σελίδα 14

17 Δίοδικτυακή Υττηρεσία Πληροφορΐύ>ν Φαρμακεΰιίν σελίδας μας. Θα έχει σαν αντικείμενο βέβαια τα αποτεί-έσματα από τον σχεδίασμά των σελίδων που καταλήξαμε ότι θα περιέχει η γενική μας σελίδα και επιλέξαμε σε αυτό το κεφάλαιο. Επιλέγοντας πάντα ότι θεωρήσαμε σκόττιμο και απαραίτητο για την διευκόλυνση και την κάλυψη των απαιτήσεων ενός χρήστη ΔΟ.ΜΗ της ΣΕΛΙΔΑΣ Συμμαζεύουμε λοιπόν ότι έχουμε βρες ότι έχουμε κάνει, ότι έχουμε ψάξει και καταλήξει, για να χτίσουμε την δομή της κεντρικής μας σελίδας. Μια σελίδα στο διαδίκτυο πρέπει να έχει ροη να μην μπαίνει σε αδιέξοδα. Θα πρέπει να έχει ομοιομορφία και όχι ανεξάρτητα κομμάτια με διαφορετική σχεδίαση και άποψη ώστε να τα ενώνει σε ένα πάζλ με ίσα κομμάτια. Βασικό χαρακτηριστικό στην δομή μιας σελίδας είναι η κατασκευή των συνδεδεμένων σελίδων σε ένα σχεδιάγραμμα. Τα στοιχειά που θα περιέχει η δόμηση μας είναι αυτά που είχαμε αναφέρει και νωρίτερα. Δηλαδή οι σελίδες που θα συμπεριληφθούν στην δομή της σελίδας είναι: Η κεντρική σελίδα ή αλλιώς σελίδα εισόδου Σε αυτήν θα έχουμε προσκείμενες ο Την σελίδα της επικεφαλίδα μας ο Την αρχική μας σελίδα ο Και την σελίδα του μενού στα αριστερά Στην σελίδα του μενού θα έχουμε προσκείμενες Την αρχική σελίδα που αναφέραμε είδη Την σελίδα με την λίστα των φαρμακείων Σε αυτήν θα είναι προσκείμενες οι σελίδες των ιδιωτικών χαρτών των φαρμακείων Την σελίδα των διανυκτερευόντων φαρμακείων Και τέλος την σελίδα εύρεσης της συντομότερης διαδρομής Αναλύσαμε και την συσχέτιση των σελίδων μεταξύ τους. Λόγο όμως του πολύπλοκου αυτής της κατάστασης κατασκευάσαμε ένα διάγραμμα το όποιο θα μας βοηθήσει να κατανοήσουμε καλύτερα την δομή της σελίδας μας. Στην «Εικόνα 6» βλέπουμε το διάγραμμα της δομής της σελίδας μας και την αλληλουχία των σελίδων που περιέχει.

18 Διαόικτυακή Υπηρεσία Π>νηροφορΐϋ)ν Φαρμακείο) Εικόνα 6 (Διάγραμμα δομής της σελίδας) Ξεκινάμε την δομή σχεδιάζοντας πρώτα την σελίδα έναρξης, στην οποία εμφανίζοντας στο πάνω μέρος η σελίδα ετηκεφαλίδας και αριστερά την σελίδα που περιλαμβάνει το μενού της σελίδας. Στο κέντρο της σελίδας εισόδου εμφανίζετε και η αρχική μας σελίδα. Όλα αυτά μαζί συνθέτουν την σελίδα εισόδου μας την συγκεντρωτική σελίδα. Το επάνω και το αριστερό μέρος που τοποθετήθηκαν οι αντίστοιχες σελίδες θα παραμένουν σταθερές και μέσα από τις επιλογές του μενού θα μεταβαίνουμε στις άλλες σελίδες. Δηλαδή στο κέντρο της σελίδας εισόδου αν εταλέξουμε την σελίδα με την λίστα των φαρμακείων θα αλλάξει από την αρχική μας σελίδα και θα εμφανίζει πια την σελίδα με την λίστα των φαρμακείων. Αντίστοιχα και για τις άλλες δυο. Αν επιλέξουμε την σελίδα από το μενού με τα διανυκτερεύοντα φαρμακεία θα μεταβούμε σε αυτήν, όπως και με την σελίδα της

19 Διαόιιπυακή Υττηρεσία Πληροφορών Φαρμακείων συντομότερης διαδρομής τιου με την ετπλογή μας από το μενού μεταβαίνουμε σε αυτήν. Η σελίδα που είναι αριστερά και τιεριέχει το μενού μας ετητρέπει να μεταβαίνουμε από την αρχική σελίδα, στην σελίδα με την λίστα των φαρμακείων, στην σελίδα με τα διανυκτερεύοντα φαρμακεία αλ>λ και την σε>,ίδα με την συντομότερη διαδρομή. Από την σε>.ίδα με την λίστα τιον φαρμακείων μπορούμε να μεταβούμε στις σελίδες που περιέχουν τους ατομικούς χάρτες του κάθε φαρμακείου. Με την επιλογή από το link που έχουν στο όνομα του φαρμακείου. Στο διάγραμμα της «Εικόνας 6» έχουμε και μια συσχέτιση μεταξύ της σε>.ίδας των διανυκτερευόντων φαρμακείων και του αρχείου δεδομένων XML, αλλά και της σελίδας συντομότερη διαδρομή με αυτό το αρχείο δεδομένων. Αυτή είναι μια συσχέτιση για την οποία αναφέραμε στο πρώτο κεφάλαιο, ότι τα δεδομένα πσυ χρειάζονται αυτές οι σελίδες τα αντλούν από το αρχείο δεδομένων μας. Έτσι μόνο μπορούν να λειτουργήσουν σωστά αυτές οι σελίδες Κί>.\ΙΚ.\Σ ΤΗΣ ΣΕΛΙΔΑΣ Κ.ΔΙ ΑΝΑΛΥΣΗ ΤΟΥ ΚΩΔΙΚΑ Έχοντας ολοκληρώσει και κατανοήσει το διάγραμμα της δομής της σελίδας μας πρέπει να κατασκευάσουμε και την κάθε σελίδα που απαιτείτε. Χρησιμοποιώντας τα εργαλεία που είχαμε επιλέξει ξεκινήσαμε την κατασκευή της πρώτης μας σελίδας, την σελίδα εισόδου. Με την βοήθεια του Dreamweaver CS5 φτιάξαμε τον παρακάτω κώδικα. Στον κώδικα αυτής της σελίδας την οποία την ονομάσαμε την χωρίσαμε σε Frames (παράθυρα). Στο κάθε Frame αντιστοιχεί και μια σελίδα, τις οποίες θα αναλύσουμε παρακάτω. Φτιάξαμε καταρχήν δυο Frame το πάνω και το κάτω, αλλά στην συνέχεια το κάτω το χωρίσαμε σε άλλα δυο μέρη το αριστερό και το δεξί. Έτσι δημιουργήσαμε τρία Frames το πάνω, το κάτω αριστερά και το κάτω δεξιά. Το κάθε Frame το συνδέσαμε με μια σελίδα, έτσι το πάνω το συνδέσαμε με την σελίδα Home_TopFrameSet.html, το κάτω αριστερά με την σελίδα Home_LeftFrameSet.html και το κάτω δεξιά με την σελίδα Ml_Home_Page.html. Τον κώδικα αυτόν των σελίδων θα των αναλύσουμε αμέσως μετά. Κώδικας σελίδας myepharmacy.gr.html. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <html xmlns="

20 Διαδιιπυακή Υπηρεσία Πληροψορχύτν Φαρμακείων <head> <meta http-equiv="content-type" content="text/htm]; charset=utf-8" /> <title>my e-pharmacy.gr</title> <link rel="shortcut icon" href="browser_logo.ico" /> </head> <frameset rows="139,*" cols="*" frameborder="no" border="0" framespacing="0"> <frame src="home_topframeset.html" name="topframe" scrolling="no" noresize="noresize" id="topframe" title="topframe" /> <frameset rows="*" cols="200,*" framespacing="0" frameborder="no" border="0"> <ftame src="home_leftframeset.html" name="leftframe" scrolling="auto" noresize="noresize" id="leftframe" title="leftframe" t> <frame src="ml Home_Page.htmr' name="mainframe" id="mainframe" title="myephamiacy" t> </frameset> </frameset> <noframesx/noframes> </html> 'Οπως έχουμε τιεριγράψει στο πάνω Frame έχουμε βάλει την σελίδα Home_TopFrameSet.html της οποίας τον κώδικα τον βλέπουμε παρακάτω. Το μοναδικό που έχουμε εισάγει στην σελίδα είναι τρεις φωτογραφίες μια αριστερά μια δεξιά και μια σαν background. Η ιδιότητα της σαν σελίδα είναι να παραμένει σταθερή στην κορυφή της συνολικής σελίδας ως «τίτλος» τις σελίδας. Μετά την κατασκευή της έχουμε την σελίδα όπως φαίνετε και στην «Εικόνας 7». Κώδικας σελίδας Home_TopFrameSet.html <!DOCTYPE html PUBLIC "-/AV3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" 999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>top</title> <style type="text/css"> body { background-image: url(home_top_background.jpg); background-repeat: no-repeat; background-position:center; </style> </head> <body>

21 Αιαδικτυακή Υπηρεσία Πληροφορκ))ν Φαρμακείίον <img src-"home_top_logo_left.jpg" width="243" height="i30" align="left" /> <img src="home_top_logo_right.jpg" width="109" height="130" align="right" /> </body> </html> my e pharmeqj.gi Εικόνα 7 (Εμφάνιση της σελίδας Home_TopFrameSet.html) 1 Στο αριστερό μας Frame έχουμε βάλει την σελίδα Home_LeftFrameSet.html και βλέπουμε των κώδικα της παρακάτω. Στην σελίδα μας αυτή έχουμε το μενού τιλοήγησης στις σελίδες μας. Ξεκινώντας τον κώδικα δηλώνουμε τις διαδικτυακές γλώσσες προγραμματισμού που θα χρησιμοποιήσουμε. Στην συγκεκριμένη σελίδα θα έχουμε κώδικα και σε JavaScript αλλά και σε CSS. Αρχικά δηλώνουμε τις παραμέτρους για την εμφάνιση του μενού μας αλλά και την μορφή (χρώμα, γραμματοσειρά κ.τ.λ.) που θα παίρνουν τα Link (ανακατεύθυνση) που ετησκετττόμαστε, ή που εστιάζουμε, ή ακόμα και αυτά που έχουμε ετησκεφτεί. Μετά ξεκινάμε την κατασκευή του πίνακα που θα περιέχει τα στοιχεία του μενού όπως τίτλοι, επεξηγήσεις για την επιλογή του τίτλου και το Link που θα μεταβούμε επιλέγοντας το. Στο τέλος του κώδικα έχουμε σε JavaScript μια λειτουργιά για την παρουσία ενός αναλογικού ρολογιού και πιο κάτω κατασκευάσαμε μικρή εφαρμογή για να έχουμε την ώρα και σε ψηφιακή μορφή. Οπότε η σελίδα μας έχει την μορφή όπως φαίνετε στην «Εικόνα 8» Κώδικας σελίδας Home_LeftFrameSet.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 1/DTD/xhtml 1-transitional.dtd"> <html xmlns=" 999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>top</title> <script src="spryassets/spryaccordion.js" type="text/javascript"></script> <link href="spryassets/spryaccordion.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { background-image: uri(home_lefl_background.jpg); background-repeat: repeat; Σελίδα 19

22 Διαοικτυακή Υττηρεσία ΓΙληροφορκίιν Φαρμακεύρν a;link { color: #FFF; text-decoration: none; a:visited { text-decoration: none; color: #CCF2D0; a:hover { text-decoration: underline; a:active { text-decoration: none; </style> </head> <body> <div id="accordion 1" class="accordion" tabindex="0"> <div class="accordionpanel"> <div class="accordionpaneltab">apxiioi Σελίδα</(1ίν> <div class="accordionpanelcontent"xa href="ml Home_Page.html" target="mainframe"xstrong>xapniq της Καβάλας με όλα τα φαρμακεία να παρουσιάζονται στον χάρτη της πόλης.</strongx/a> </div> </div> <div class="accordionpanel"> <div class="accordionpaneltab">kατάλoγoς Φαρμακείων</άΐν> <div class="accordionpanelcontent"><a href="m2_katalog_pharm.html" target="mainframe"><strong> Όλα τα φαρμακεία με τα ονοματεπώνυμα των ιδιοκτητών, τις διευθύνσεις και τα τηλέφωνα των φαρμακείων της πόλης.</strong></a> </div> </div> <div class="accordionpanel"> <div ο1α55="αοοοτάίοηραηο1ταά">διανυκτερεύοντα Φαρμακεία</άϊν> <div class="accordionpanelcontent"><a href="m3_dianikt_pharm.html" target="mainframe"><strong>όλα τα Διανυκτερεύοντα Φαρμακεία στην πόλη της Καβάλας προβολή στο χάρτη μαζί με τα στοιχεία τoυς.</strong></a> </div> </div> <div class="accordionpanel"> <div ο1α55="αεοοτάίοηραηε1ταδ">συντομότερη Διαδρομή</άϊν> <div class="accordionpanelcontent"><a href^"m4_kontinot_pharm.html" target="mainframe"><strong>eπιλoγή στον χάρτης του σημείου που βρίσκεστε για την προβολή της συντομότερης διαδρομής (κονπνότερο φαρμακείο) με όλες τις λεπτομέρειες μετάβασης.<!-να παρουσιάζονται στον χάρτη της πόλης. ></strongx/a> Σελίδα 20

23 Διηάικτυακή Υττηρεσία Πληροφοριών Φαρμακείων </div> </div> </div> <ρ> <script type="text/javascript"> var Accordionl = new Spry.Widget.Accordion("Accordionl"); </script> <script src="http;// <center> <script type="text/javascript" language="javascript"> obj=new 0bject;obj.clockfile="free001-red.swf'; obj.timezone="eet"; obj.width=140; obj.height=140; obj.winode="transparent"; showclock(obj); </script> <script type="text/javascript"> document.wtite(" <span id='idclocknamel3' style='text- alignxenter; fontfamily :arial, helvetica, sans-serif; font-size: 14px; color:#06420d;font-weight:normal;backgroimd-color:#c2e372; padding: lopx; margin:0;overflow:visible;border:opx; > </span>"); function showclockl3(){ var theclock=new DateQ; var hclock=theclock.gethourso; var mclock=theclock.getminutes(); var sclock=theclock.getseconds(); if (mclock<=9) mclock="0"+mclock; if (sclock<=9) sclock="0"+sclock; if(document.getelementbyid('idclocknamel3')) document.getelementbyld('idclocknamel3'). innerhtml =hclock+":"+mclock+":"+sclock;settimeout ("showclockl 30", 1000); showclockl 30; </script> </center> </p> </body> </html>

24 Εικόνα 8 (Εμφάνιση της σελίδας Home_LeftFrameSet.html) Στο τρίτο και τελευταίο κομμάτι των Frame μας, της σελίδας εισόδου έχουμε την σελίδα με όνομα Ml_Home_Page.html, στην οποία τιεριλαμβάνετε ο παρακάτω κώδικας. Αυτό το Frame είναι εκείνο που παίζει τον ρολό της κεντρικής σελίδας και εναλλάσσετε ανάλογα με την επιλογή του Link που κάνουμε από το αριστερό μενού μας. Ο κώδικας της σελίδας Ml_Home_Page.html περιέχει στον κώδικα του ένα αρχείο JavaScript, το vnu datestamp.js, το οποίο είναι υπεύθυνο για την εμφάνιση της πλήρης ημερομηνίας στην σελίδα μας. Αναλυτικότερα θα δούμε τον κώδικα του αρχείου vnu datestamp.js παρακάτω. Στο κέντρο της σελίδας μας όπως φαίνετε και στον κώδικα έχουμε εισάγει έναν χάρτη από το Google maps που εμφανίζει όλα τα φαρμακεία μας. Ο κώδικας αυτός μας παρέχετε αυτόματα από την Google για να τον προσθέτουμε στον δικό μας κώδικα. Έτσι η σελίδα Ml_Home_Page.html η αλλιώς αρχική σελίδα έχει την μορφή της «Εικόνας 9». Κώδικας σελίδας Ml_Home_Page.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http;//www. w3.org/tr/xhtml 1/DTD/xhtml 1-transitional.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" />

25 Αιαόίκτυακή Υττηρεσία Πληροφορών Φαρμακείοτν <title>my e-pharmacy</title> <style type="text/css"> body { background-color: #CCF2D0; </style> <link rel="shortcut icon" href="browser_logo.ico"> </head> <body> <script language=javascript src="vnu_datestamp.js"x/script> <center> <iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=" mp;msid= a3a40abb c4&ll= , &spn= , &z=14&output=embe d"> </iftame> < p x b r/> <small>πpoβoλή <a href^" mp;msid= a3a40abb c4&ll= , &spn= , &z=14&source=embe d" style="color:#ooooff;text-align:left">myepharmacy.gr</a> σε χάρτη μεγαλύτερου μεγέθους </small> </ρ> </center> </body> </html> Εικόνα 9 (Εμφάνιση της σελίδας Ml_Home_Page.html)

26 Διαόικτυαια^ Υττηρεσία Πληροφοριών Φαρμακείων Στο JavaScript αρχείο Vnu datestamp.js τιεριέχετε ο τιαρακάτω κώδικας. Για την εμφάνιση της πλήρης ημερομηνίας κατασκευάσαμε αυτό το αρχείο. Όπως βλέπουμε στον κώδικα αρχικά δηλώνουμε δυο πινάκες με ονόματα τον ημερών και των μηνών που θέλουμε να εμφανίζονται. Μετά δημιουργήσαμε μια λειτουργία (Function) στην οποία έχουμε της λεπτομέρειες για το πώς θα διαβάζει από το σύστημα την ημερομηνία και πως θέλουμε εμείς να εμφανίζετε εν τέλει. Στην τελευταία γραμμή της λειτουργίας μας καθορίζουμε τον τρόπο που θέλουμε να εμφανίζετε η ημερομηνία μας. Στην «Εικόνα 1θ» μέσα στον κόκκινο κύκλο βλέπουμε την τελική μορφή της ημερομηνίας μας. Κώδικας αρχείου Vnu datestamp.js days = new Array( "Κυριακή","Δευτέρα","Τρίτη","Τετάρτη","Πέμ7Γτη","Παρασκευή","Σάββατο" ); months = new Array( "1ανουαρίου","Φεβρουαρίου","Μαρτίου"," Απριλίου","Μαΐου","Ιουνίου","Ιου λίου","αυγούστου"."σεπτεμβρίου","οκτωμβρίου","νοεμβρίου","δεκεμβρίου" ); function renderdate(){ var my date = new DateQ; var year = mydate.getyearq; if (year < 2000) { if (document.all) year = "19" + year; else year+= 1900; var day = mydate.getdayo; var month = mydate.getmonthq; var daym = mydate.getdateo; if (daym < 10) daym = "0" + daym; var hours = mydate.gethours(); var minutes = mydate.getminutesq; var dn = "ΠΜ"; if (hours >= 12) { dn = "MM"; hours = hours - 12; if (hours = 0) hours = 12; if (minutes <= 9) minutes = "0" + minutes;

27 Αιαόικτυακή Υτιηρεσια Πληρ>ο(ρορΐύ)ν Φαρμακεΰον document.writeln("<font COLOR=V'#000000\" FACE=\"Verdana,arial,helvetica,sansseriA" size=\"l\"><b> ",days[day]," ",daym," ",months[month]," ",year,"</b></fontxbr>"); renderdateo; Εικόνα 10 (Εμφάνιση αποτελέσματος κώδικα του αρχείου Vnu datestamp.js) Θα αναλύσουμε στην συνέχεια των κώδικα της σελίδας M2_Katalog_Pharm.html, στον οποίο έχουμε την ετηλογή του μενού κατάλογος φαρμακείων. Όπως βλέπουμε και στον κώδικα παρακάτω η σελίδα μας αυτή είναι αποτέλεσμα μετατροπής ενός αρχείου του Excel σε μια ιστοσελίδα. Με λίγα λόγια κατασκευάσαμε ένα αρχείο Excel και το μετατρέψαμε σε μια ιστοσελίδα με κωδικοποίηση HTML. Από την κωδικοποίηση προέκυψε η κατασκευή ενός XML αρχείου δεδομένων το οποίο περιλαμβάνετε στον κώδικα της σελίδας μας HTML. Στο κάθε κελί που ^ριγράφετε με την κωδικοποίηση της μορφής XML έχουμε όλες της επιλογές για το μέγεθος, χρωματισμό και όλα τα σχεδιαστικά χαρακτηριστικά του κάθε κελιού. Μετά δηλώνουμε τα χαρακτηριστικά της σελίδας μας αλλά και των επιλογών που θέλουμε για την προβολή των link μας, όταν τα επιλέγουμε όταν εστιάζουμε, η και όταν τα έχουμε ετησκεφτεί. Στην συνέχεια κατασκευάζουμε μια λειτουργία (function) για να μπορούμε να ανοίγει σε νέο παράθυρο επιλέγοντας, κάνοντας κλικ, επάνω στο όνομα του φαρμακείου, το χάρτη του φαρμακείου που ετηλέξαμε. Αυτήν την διαδικασία την κάνουμε για όλα τα φαρμακεία του καταλόγου. Αμέσως μετά κατασκευάσαμε τον πίνακα με τα περιεχόμενα του, τα στοιχεία των φαρμακείων δηλαδή και εκεί δηλώσαμε και ως link το κάθε όνομα του φαρμακείου. Έτσι η σελίδα μας παίρνει την μορφή που φαίνετε στην «Εικόνα 11». Κώδικας σελίδας M2_KataIog_Pharm.html <html xmlns:o="um:schemas-microsoft-com:office:office" xmlns:x="um:schemas-microsoft-com:office:excel" xmlns=" Σελίδα 25

28 Διαδιιαυακή Υττηρεσία Πληροφορια'τν Φαρμακείων <head> <nieta http-equiv=content-type content="text/html; charset=unicode"> <meta name=progid content=excel.sheet> <meta name=generator content="microsoft Excel 12"> <link rel=fiie-list href="oapm-kab-.files/filelist.xml"> <style id="oapm-kab_13526_styles"> <!--table {mso-displayed-decimal-separator: "V,"; mso-displayed-thousand-separator:"\.,xl mso-ignore:padding; colorrblack; font-size; 1Ipt; font-weight:400; font-style;normal; text-decorat i on: none; font-family:calibri, sans-serif; mso-font-charset: 161; mso-number-fonnat:general; text-align;center; vertical-align:middle; mso-background-source:auto; mso-pattem;auto; white-space:nowrap; X {padding-top: Ipx; padding-right: Ipx; padding-left: Ipx; mso-ignore:padding; color:black; font-size:! 1.Opt; font-weight; 700; font-style:normal; text-decoration:none; font-family:calibri, sans-serif; mso-font-charset: 161; mso-number-format;general; text-align:center; vertical-align:middle; border-top: 1.Opt solid windowtext; border-right:.5pt solid windowtext; border-bottom:!.opt solid windowtext; border-left: 1.Opt solid windowtext; background:#a5a5a5; mso-pattem:black none; white-space:nowxap;.x Σελίδα 26

29 ΔιαοιίΓπκική Υπηρεσία Πληροφορ^')ν Φαρμακεύον {padding-top: Ιρχ; padding-right: Ιρχ; padding-left: Ιρχ; mso-ignore:padding; color:black; font-size: 11.Opt; font-weight:700; font-style:normal; text-decoration: none; font-family:calibri, sans-serif; mso-font-charset: 161; mso-number-fonnat:general; text-align:center; vertical-align:middle; border-top: 1.Opt solid windowtext; border-right:.5pt solid windowtext; border-bottom:!.opt solid windowtext; border-left:.5pt solid windowtext; background:#a5a5a5; mso-pattem:black none; white-space:nowtap;.xl (padding-top:lpx; padding-right: Ipx; padding-left: Ipx; mso-ignore:padding; color:black; font-size:! 1.Opt; font-weight:700; font-style:normal; text-decoration:none; font-family:calibri, sans-serif; mso-font-charset: 161; mso-number-format:general; text-align:center; vertical-align:middle; border-top:!.opt solid windowtext; border-right: 1.Opt solid windowtext; border-bottom: 1.Opt solid windowtext; border-left:.5pt solid windowtext; background: # A5 A5 A5; mso-pattem:black none; white-space:nowrap;.xl {padding-top: Ipx; padding-right: Ipx; padding-left: Ipx; mso-ignore:padding; color:black; font-size:! 1.Opt; Σελίδα 27

30 Διαδικτυαιαί Υπηρεσία Πληροφορών Φαρμακείω font-weight:400; font-style:nonnal; text-deco rati on; none; font-family:caiibri, sans-serif; mso-font-charset; 161; mso-number-format:general; text-align;center; vertical-align:middle; border-top; 1.Opt solid windowtext; border-right;.5pt solid windowtext; border-bottom;.5pt solid windowtext; border-left; 1.Opt solid windowtext; background;white; mso-pattem;black none; white-space;nowrap;.xl {padding-top; Ipx; padding-right; 1px; padding-left; Ipx; mso-ignore;padding; color;black; font-size;! 1.Opt; font-weight;400; font-style;normal; text-decoration;none; font-family;calibri, sans-serif; mso-font-charset; 161; mso-number-format ;General; text-align;center; vertical-align;middle; border-top; 1.Opt solid windowtext; border-right;.5pt solid windowtext; border-bottom;.5pt solid windowtext; border-left;.5pt solid windowtext; background;white; mso-pattem; black none; white-space;nowtap;.xl (padding-top; Ipx; padding-right; Ipx; padding-left; Ipx; mso-ignore ;padding; color;black; font-size;! 1.Opt; font-weight;400; font-style;normal; text-decoration;none; font-family.calibri, sans-serif; mso-font-charset; 161; mso-number-fomiat ;General;

31 Διαδιιαυακή Υττηρεσία Πληροίροριών Φαρμακείων text-alignxenter; vertical-align:middle; border-top: 1.Opt solid windowtext; border-right: 1.Opt solid windowtext; border-bottom:.5pt solid windowtext; border-left:.5pt solid windowtext; background:white; mso-pattem:black none; white-space: nowrap;.xl {padding-top: Ipx; padding-right: 1px; padding-left: Ipx; mso-ignore:padding; color:black; font-size:! l.opt; font-weight:400; font-style:normal; text-decoration:none; font-family:calibri, sans-serif; mso-font-charset: 161; mso-number-format:general; text-align:center; vertical-align:middle; border-top:.5pt solid windowtext; border-right:.5pt solid windowtext; border-bottom:.5pt solid windowtext; border-left: 1.Opt solid windowtext; background:white; mso-pattem:black none; white-space:nowtap;.x {padding-top: Ipx; padding-right: Ipx; padding-left: Ipx; mso-ignore:padding; color:black; font-size: 11.Opt; font-weight:400; font-style:normal; text-decoration:none; font-family:calibri, sans-serif; mso-font-charset: 161; mso-number-format :General; text-align:center; vertical-align:middle; border:.5pt solid windowtext; background:white; mso-pattem:black none; white-space:nowrap;

32 Αΐίχόικτυακή Υπηρεσία Πλη(,χ {padding-top; Ιρχ; padding-right: Ιρχ; padding-left: Ιρχ; mso-ignore:padding; color: black; font-size;! 1.Opt; font-weight:400; font-style:normal; text-decoration:none; font-family;calibri, sans-serif; mso-font-charset; 161; mso-number-format:general; text-align:center; vertical-align:middle; border-top:.5pt solid windowtext; border-right:!.opt solid windowtext; border-bottom:.5pt solid windowtext; border-left:.5pt solid windowtext; background.white; mso-pattem:black none; white-space:no\\tap;.xl {padding-top: Ipx; padding-right; Ipx; padding-left: Ipx; mso-ignore:padding; color:black; font-size: 11.Opt; font-weight;400; font-style:normal; text-decoration;none; font-family:calibri, sans-serif; mso-font-charset; 161; mso-number-format:general; text-align:center; vertical-align:middle; border-top:.5pt solid windowtext; border-right;.5pt solid windowtext; border-bottom:.5pt solid windowtext; border-left: 1.Opt solid windowtext; background:white; mso-pattem:black none; white- space;normal; X {padding-top: Ipx; padding-right:lpx; padding-left: Ipx; mso-ignore:padding; color:black; Σελίδα 30

33 Λ^όίκτυακή Υττηρεσία Π/.ηροφορών Φαρμακεΰϋν font-size: 11.Opt; font-weight:400; font-styie:normal; text-decoration:none; font-family;calibri. sans-serif; mso-font-charset: 161; mso-number-formatrgeneral; text-align:center; verticaj-align:middie; border-top:.5pt solid windowtext; border-right: 1.Opt solid windowtext; border-bottom:.5pt solid windowtext; border-left:.5pt solid windowtext; background:white; mso-pattem:black none; white-space:normal;.xl {padding-top: Ipx; padding-right: Ipx; padding-left: Ipx; mso-ignore:padding; color:black; font-size:! 1.Opt; font-weight:400; font-style:normal; text-decoration:none; font-family:calibri. sans-serif; mso-font-charset: 161; mso-number-format :General; text-align:center; vertical-align:middle; border-top:.5pt solid windowtext; border-right:.5pt solid windowtext; border-bottom:!.opt solid windowtext; border-left: 1.Opt solid windowtext; background:white; mso-pattem:black none; white-space:nowtap; Χ (padding-top: Ipx; padding-right: Ipx; padding-left: Ipx; mso-ignore:padding; color:black; font-size:! l.opt; font-weight:400; font-style:normal; text-decoration:none; font-family:calibri, sans-serif; mso-font-charset: 161; Σελίδα 31

34 ΛΐίχόίΐΓπκική Υπηρεσία Γϋ.ηροφορκίιν Φαρμακείων mso-number-format:general; text-align:center; vertical-align:middle; border-top:.5pt solid windowtext; border-right:.5pt solid windowtext; border-bottom: 1.Opt solid windowtext; border-left:.5pt solid windowtext; background:white; mso-pattem:black none; white-space:nowrap;.x {padding-top: Ipx; padding-right: Ipx; padding-left: Ipx; mso-ignore:padding; color:black; font-size:! 1.Opt; font-weight:400; font-st>'le:normal; text-decoration:none; font-family:calibri. sans-serif; mso-font-charset: 161; mso-number-format:general; text-align:center; vertical-align.middle; border-top:.5pt solid windowtext; border-right:!.opt solid windowtext; border-bottom: 1.Opt solid windowtext; border-left:.5pt solid windowte.xt; background:white; mso-pattem:black none; white-space:nowtap; body { background-color: #CCF2D0; color: #C6EBCA; a:link { text-decoration: none; color: #000; a;visited { text-decoration: none; color: #000; a:hover { text-decoration: underline; color: #060; a:active { text-decoration: none;