Ανάπτυξη Virtual Plan του Τμ. Βιομηχανικής Πληροφορικής.

Τ.Ε.Ι. Καβάλας

Σχολή Τεχνολογικών Εφαρμογών Τμήμα Βιομηχανικής Πληροφορικής

Υπεύθυνος Καθηγητής: Δρ.Αύγουστος Τσινάκος Φοιτήτριες:

Ηλιάνα Μπούσιου Αικατερίνη Παπαϊωάννου

ΚΑΒΑΛΑ, Οκτώβριος 2007

Περιεχόμενα

Περιεχόμενα ... 3

Λίστα Εικόνων ... 6

Λίστα Σχημάτων ... 7

Πρόλογος ... 8

Επισκόπηση Κεφαλαίων ... 9

1. Εισαγωγικά ... 11

1.1 Έρευνα & Συγκέντρωση Υλικού ... 11

1.1.1 Αναπαράσταση Εικονικής Πραγματικότητας ... 11

1.1.2 Εύρεση Κώδικα Συντομότερης Διαδρομής ... 11

1.1.3 Περιβάλλον υλοποίησης ... 12

1.1.4 Απαιτούμενος Εξοπλισμός ... 12

1.2 Αρχικός Σχεδιασμός & Συνένωση Τμημάτων ... 13

1.3 Σύνοψη ... 14

2. Σχεδίαση & Ανάλυση Απαιτήσεων ... 16

2.1 Σχεδιασμός & Γραφικά ... 16

2.1.1 Sites με Virtual Tour ... 16

2.2 Απαιτήσεις ... 16

2.3 Προδιαγραφές ... 17

2.3 Διαγράμματα Ροής ... 21

2.4 Σύνοψη ... 23

3.Υλοποίηση Εφαρμογής ... 25

3.1 Προϊόντα Λογισμικού ... 25

3.1.1 Apache Server ... 25

3.1.2 PHP ... 25

3.1.3 MySQL ... 26

3.1.4 phpmyadmin ... 27

3.1.5 Adobe Photoshop ... 28

3.1.6 Panorama Factory ... 28

3.1.7 ConceptDraw ... 29

3.2 Υλοποίηση Εφαρμογής ... 29

3.2.1 Εγκατάσταση Apache, PHP, MySQL σε Windows ... 29

3.2.2 Επικοινωνία της βάσης δεδομένων MySQL μέσω της PHP ... 30

3.2.3 Εμφάνιση ιστοσελίδας ... 31

3.2.3.1 CSS ... 31

3.2.4 Javascripts ... 31

3.2.5 IP addresses ... 32

3.2.5.1 Function ip2long() ... 32

3.2.6 Ο Αλγόριθμος Συντομότερης Διαδρομής του Dijkstra ... 32

3.2.7 Προστασία των σελίδων του διαχειριστή ... 34

3.3 Η Σπουδαιότητα της Καλής Σχεδίασης της Βάσης Δεδομένων ... 34

3.3.1 Σχεδιασμός & Ανάλυση Οντοτήτων ... 35

3.3.2 Μοντέλο Οντοτήτων Συσχετίσεων ... 38

3.3.3 Ανάλυση των πεδίων κάθε πίνακα ... 40

3.4 Δομή Φακέλων και Αρχείων ... 42

3.4.1 Σελίδες Επισκέπτη ... 42

3.4.2 Σελίδες Διαχειριστή ... 43

3.5 Σύνοψη ... 43

4. Ανάλυση Δυνατοτήτων & Λειτουργιών Ιστοσελίδας ... 45

4.1 Ανάλυση Λειτουργιών Επισκέπτη Ιστοσελίδας ... 45

4.1.1 Επιλογές αρχικής σελίδας ... 46

4.1.2 Επιλογές Αιθουσών / Χώρων ... 48

4.1.3 Απαιτήσεις & Προτεινόμενες ρυθμίσεις ιστοσελίδας ... 51

4.2 Ανάλυση Λειτουργιών Διαχειριστή Ιστοσελίδας ... 51

4.2.1 Διαχείριση Αιθουσών ... 52

4.2.1.1 Προσθήκη Αίθουσας ... 53

4.2.1.2 Επεξεργασία Αίθουσας ... 53

4.3.1 Διαχείριση Φωτογραφιών ... 54

4.3.1.1 Προσθήκη Φωτογραφίας ... 54

4.3.1.2 Επεξεργασία Φωτογραφίας ... 55

4.4.1 Διαχείριση Κατηγοριών ... 56

4.4.1.1 Προσθήκη Κατηγορίας ... 56

4.4.1.2 Επεξεργασία Κατηγορίας... 56

4.5.1 Διαχείριση Μαθημάτων ... 57

4.5.1.1 Εισαγωγή Μαθήματος ... 57

4.5.1.2 Επεξεργασία Μαθήματος ... 57

4.6.1 Διαχείριση IP ... 58

4.6.1.1 Προσθήκη IP Διεύθυνσης ... 58

4.6.1.2 Επεξεργασία IP Διεύθυνσης ... 59

4.7.1 Αποσύνδεση Διαχειριστή ... 59

4.8 Σύνοψη ... 59

5. Γενική ανασκόπηση της εργασίας ... 61

5.1 Επεκτάσεις του site ... 61

5.2 Test λειτουργικότητας του site στο internet ... 61

5.3 Συμπεράσματα ... 62

Βιβλιογραφία ... 63

Περιεχόμενα Παραρτήματος

Υλοποιημένος κώδικας σε PHP & MySQL...CD

Σελίδες επισκέπτη...4

calPath.php...4

classphotos.php...6

config.php...8

credits.php...9

db.php...9

dijkstra.php...10

functions.js...13

index.htm...15

info.php...15

main.php...16

map.php...21

menu.php...22

movie.php...23

notavailable.php...24

routes.php...24

style.css...29

theme.php...30

virtualtours_map.php...31

Σελίδες Διαχειριστή...34

admin-menu.php...34

classes.php...35

courses.php...38

editClass.php...42

editCourses.php...45

editIP.php...48

editPhoto.php...50

groups.php...52

ip_addresses.php...54

photos.php...57

protect.php...59

theme.php...60

uploadmov.php...62

uploadphoto.php...63

Λίστα Εικόνων

Εικόνα 1: Το εσωτερικό ενός server computer ... 12

Εικόνα 2: Αρχικό σχέδιο του site στο Photoshop ... 13

Εικόνα 3: Κεντρική σελίδα phpmyadmin 2.6.1 ... 27

Εικόνα 4: Κεντρικό μενού του Panorama Factory V4 ... 29

Εικόνα 5: Κεντρική σελίδα Virtual Plan ... 45

Εικόνα 6 : Επιλογή Εικονικής Περιήγησης στην αρχική σελίδα ... 46

Εικόνα 7: Επιλογή Εύρεση Διαδρόμων στην αρχική σελίδα ... 47

Εικόνα 8: Σελίδα με εύρεση συντομότερης διαδρομής ... 47

Εικόνα 9 : Επιλογή Αναζήτηση Αίθουσας στην αρχική σελίδα ... 48

Εικόνα 10: Σελίδα Εργαστηρίου UNIX ... 49

Εικόνα 11: Παράθυρο με quicktime video ... 50

Εικόνα 12: Σελίδα με φωτογραφίες του Εργαστηρίου UNIX ... 50

Εικόνα 13: Κεντρικό μενού Διαχειριστή ... 52

Εικόνα 14: Φόρμα προσθήκης νέας αίθουσας ... 53

Εικόνα 15: Σελίδα επεξεργασίας αίθουσας ... 53

Εικόνα 16: Pop up παράθυρο για ανέβασμα αρχείου ... 54

Εικόνα 17: Φόρμα εισαγωγής νέας φωτογραφίας σε αίθουσα ... 55

Εικόνα 18: Σελίδα επεξεργασίας Φωτογραφίας ... 56

Εικόνα 19: Φόρμα εισαγωγής νέας κατηγορίας ... 56

Εικόνα 20: Φόρμα Επεξεργασίας Κατηγορίας ... 57

Εικόνα 21: Φόρμα εισαγωγής νέου μαθήματος ... 57

Εικόνα 22: Επεξεργασία Μαθήματος ... 57

Εικόνα 23: Φόρμα Εισαγωγής IP διεύθυνσης ... 58

Εικόνα 24: Παράδειγμα προσθήκης νέας IP ... 59

Λίστα Σχημάτων

Σχήμα 1: Δ.Ρ. Επισκέπτη ... 21

Σχήμα 2: Δ.Ρ. Διαχειριστή ... 22

Σχήμα 3: Αλγόριθμος Dijkstra ... 33

Σχήμα 4: οντότητα classes ... 35

Σχήμα 5: οντότητα course_type ... 35

Σχήμα 6: οντότητα courses ... 36

Σχήμα 7: οντότητα groups ... 36

Σχήμα 8: οντότητα ip_address ... 36

Σχήμα 9: οντότητα ktiria ... 37

Σχήμα 10: οντότητα maps ... 37

Σχήμα 11: οντότητα photos ... 37

Σχήμα 12: Μ.Ο.Σ. ... 39

Σχήμα 13: μορφή IP διεύθυνσης ... 58

Πρόλογος

Ανάπτυξη Virtual Plan του τμήματος Βιομηχανικής Πληροφορικής είναι ο τίτλος της πτυχιακής που ζητήθηκε να υλοποιηθεί και αποτελεί κομμάτι της κεντρικής ιστοσελίδας του τμήματος Βιομηχανικής Πληροφορικής του ΤΕΙ Καβάλας στο internet.

Ο στόχος αυτής της εργασίας είναι η καταγραφή των χώρων της σχολής που πραγματοποιούνται τα θεωρητικά και εργαστηριακά μαθήματα σε εικονική αναπαράσταση. Σκοπός είναι να βοηθήσει κυρίως τους πρωτοετείς αλλά και τους υποψήφιους φοιτητές της στη γνωριμία με τη σχολή που έχουν επιλέξει να φοιτήσουν.

Συγκεκριμένα το site περιλαμβάνει ένα γενικό σχεδιάγραμμα των χώρων της σχολής για εύκολη περιήγηση σε οποιοδήποτε χώρο αλλά και ειδικές σελίδες για κάθε αίθουσα που χρησιμοποιείται από τους σπουδαστές του τμήματος. Η κάθε αίθουσα έχει πληροφορίες για τα μαθήματα που διεξάγονται, σε ποιο σημείο του συγκροτήματος του ΤΕΙ βρίσκεται, τον εξοπλισμό που διαθέτει (Η/Υ, εκτυπωτές κτλ), φωτογραφίες και μια εικονική περιήγηση βασισμένη στο QuickTime VR που αποτελείται από μια πανοραμική φωτογραφία του χώρου με περιστροφή 360^ο προς όποια κατεύθυνση επιθυμεί ο επισκέπτης. Η περιήγηση περιλαμβάνει ζουμ αλλά και

«εικονική μεταφορά» στους γύρω χώρους (σε όσους είναι προσβάσιμη).

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

Όλες οι παραπάνω λειτουργίες διαχειρίζονται από το Control Panel του διαχειριστή (administrator) του site και έτσι γίνεται δυνατή η άμεση και εύκολη τροποποίηση οποιουδήποτε μέρους του site και χωρίς ιδιαίτερες γνώσεις σε προγραμματισμό.

Συνολικά, η εικονική αυτή ξενάγηση (Virtual Tour) θα είναι εύχρηστη για κάθε χρήστη του internet, οποιοδήποτε γνωστικού επιπέδου αφού βασίζεται σε αρκετά απλές λειτουργίες. Επιπλέον η εξάπλωση του «γρήγορου internet» (ADSL), τόσο στα εκπαιδευτικά ιδρύματα όσο και στα σπίτια, κάνει ευκολότερη και γρηγορότερη την πρόσβαση σε σχέση με τις πιο αργές συνδέσεις του παρελθόντος.

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

Επισκόπηση Κεφαλαίων

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

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

Στην συνέχεια στο τρίτο κεφάλαιο περιγράφεται εκτενέστερα και διαδοχικά η διαδικασία υλοποίησης του site, η ανάλυση των προϊόντων λογισμικού των οποίων κάναμε χρήση καθώς και η σχεδίαση και σταδιακή ανάπτυξη τής δομής της βάσης δεδομένων.

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

Τέλος, στο 5ο κεφάλαιο, δίνεται βάση στην αξιολόγηση και εξετάζονται τεχνικές βελτίωσης ή περαιτέρω ανάπτυξης του site.

1. Εισαγωγικά

Ξεκινώντας την τεκμηρίωση της εργασίας, θα αναφερθούν οι τρόποι με τους οποίους επιτεύχθηκε η σχεδίαση και η υλοποίησή της για το επιθυμητό αποτέλεσμα. Ως σημείο αναφοράς δεν υπάρχει κάποιο αντίστοιχο site οπότε χρειάστηκε αρκετή έρευνα γύρω από το θέμα.

1.1 Έρευνα & Συγκέντρωση Υλικού

Για την υλοποίηση αυτής της εργασίας χρειάστηκαν διάφορα μέσα, που μετά από αναζήτηση στο internet ή προηγούμενη χρήση, χρησιμοποιήθηκαν αυτά που θεωρήθηκαν τα καταλληλότερα.

1.1.1 Αναπαράσταση Εικονικής Πραγματικότητας

Από τα πρώτα στάδια σχεδίασης της εφαρμογής υπήρχε το θέμα ότι για να γίνει μια πειστική αναπαράσταση των χώρων που πρέπει να παρουσιαστεί, μια απλή φωτογραφία για τον κάθε χώρο δεν θα ήταν αρκετή.

Μια λύση θα μπορούσε να είναι η δημιουργία αναπαράστασης των χώρων σε τρισδιάστατη μορφή, χρησιμοποιώντας τη γλώσσα VRML (Virtual Reality Modeling Language) που μπορεί να αποδώσει και interactive γραφικά. Το μειονέκτημα σε αυτή την περίπτωση όμως έγκειται στο γεγονός ότι η αναπαράσταση των χώρων θα γινόταν με γραφικό τρόπο (σαν 3D σχέδιο) και δεν θα μπορούσε να αποδώσει την πραγματική έννοια του χώρου με όλα τα αντικείμενα που το περιβάλλουν.

Μετά από εκτενέστερη αναζήτηση στον παγκόσμιο ιστό μέσω του internet, η κατάληξη ήταν στη λύση της δημιουργίας βίντεο εικονικών πανοραμάτων με περιστροφή 360^ο ανάλογα με την κατεύθυνση που ορίζει ο χρήστης. Για τη δημιουργία αυτών των βίντεο χρησιμοποιήθηκε το πρόγραμμα Panorama Factory (version 4) το οποίο δημιουργεί πανοραμικές φωτογραφίες και τις μετατρέπει σε .mov. Το αρχείο τύπου .mov είναι το format για βίντεο με το QuickTime και το υποστηρίζουν όλοι οι υπολογιστές και τα λειτουργικά συστήματα και επιπλέον διατίθεται δωρεάν από την ιστοσελίδα της Apple. (Apple, 2006)

Ο επισκέπτης της ιστοσελίδας θα έχει την δυνατότητα να αλληλεπιδρά με το περιβάλλον που παρουσιάζεται με φυσικό τρόπο και σε πραγματικό χρόνο. Γι’ αυτό θα του δίνεται η επιλογή να περιηγηθεί προς όλες τις κατευθύνσεις ,να «περπατήσει»

μέσα στο χώρο ή και να επικεντρωθεί σε κάποιο σημείο της επιλογής του.

1.1.2 Εύρεση Κώδικα Συντομότερης Διαδρομής

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

αναζητήθηκαν προηγούμενες προσεγγίσεις που έχουν γίνει και επιλύουν το συγκεκριμένο πρόβλημα. Οι δύο πιο γνωστές είναι ο αλγόριθμος του Traveling Salesman (Travelling Salesman problem, 2007) και ο αλγόριθμος του Dijkstra.

(Dijkstra’s Algorithm, 2007). Ο πρώτος αλγόριθμος εμφανίζει την συντομότερη διαδρομή κάνοντας χρήση όλων των σημείων που έχουν δοθεί ενώ ο δεύτερος βρίσκει τη συντομότερη διαδρομή μεταξύ μόνο δυο σημείων που έχουν ορισθεί εξ’

αρχής από το χρήστη.

Ο δεύτερος αλγόριθμος ήταν αυτός που κάλυπτε τις ανάγκες της πτυχιακής, οπότε υλοποιήθηκε και χρησιμοποιήθηκε αυτός ο αλγόριθμος. Σε επόμενο κεφάλαιο θα παρουσιαστεί αναλυτικότερα ο αλγόριθμος αυτός και ο τρόπος που χρησιμοποιήθηκε.

1.1.3 Περιβάλλον υλοποίησης

Σύμφωνα με τις προδιαγραφές, η εν λόγω εργασία θα υλοποιηθεί σε περιβάλλον php- mysql. Για την πλήρη λειτουργία της Web εφαρμογής μας, τα υποσυστήματα που είναι απαραίτητο να είναι εγκατεστημένα στο σύστημα είναι η εγκατάσταση ενός Apache Server, ο οποίος να υποστηρίζει PHP και MySQL. Servers που υποστηρίζουν αυτά είναι FreeBSD, Solaris, και Linux.

Εικόνα 1: Το εσωτερικό ενός server computer

1.1.4 Απαιτούμενος Εξοπλισμός

Για τις φωτογραφίες των χώρων χρησιμοποιήθηκαν δυο ψηφιακές φωτογραφικές μηχανές (SONY CyberShot P52 και Olympus μ700) καθώς και δυο τρίποδες για την κάθε μια.

1.2 Αρχικός Σχεδιασμός & Συνένωση Τμημάτων

Επόμενο βήμα είναι ο σχεδιασμός της εμφάνισης του site. Όπως σε πολλά projects έτσι και εδώ η τελική μορφή του site διαφέρει σε σχέση με την αρχική, αλλά το concept παραμένει το ίδιο. Δοκιμάζοντας διάφορες τεχνικές, η κατάληξη ήταν στο

«χώρισμα» της σελίδας σε 2 frames διότι η λίστα με τις αίθουσες είχε αρκετές επιλογές και για λόγους λειτουργικότητας τοποθετήθηκαν όλες στο αριστερό frame που αποτελεί και το standard μενού του site.

Εικόνα 2: Αρχικό σχέδιο του site στο Photoshop

Στη συνέχεια σχεδιάστηκε ένα προσχέδιο της εμφάνισης στο Photoshop, ώστε να πραγματοποιηθεί το «σπάσιμο» σε τμήματα και να αρχίσει την υλοποίησή του.

Το επόμενο και πιο πολύπλοκο βήμα ήταν η συγγραφή του κώδικα του site.

Ταυτόχρονα σχεδιάστηκε η βάση δεδομένων για να εκτελούνται δυναμικά όλες οι σελίδες του site αλλά και διάφορες άλλες εντολές.

Μέρος του κώδικα αποτελεί και ο αλγόριθμος του Dijkstra για την εύρεση της συντομότερης διαδρομής, ο οποίο αρχικά δοκιμάστηκε σε Javascript. Επειδή έπρεπε να γίνουν αρκετές αλλαγές για την προσαρμογή του στο site και θα έπαιρνε αρκετό χρόνο, η αρχική πρόθεση να βρεθεί υλοποιημένος σε PHP συνεχίστηκε. Μετά από αρκετή αναζήτηση στο internet, βρέθηκε ο αλγόριθμος σε PHP, (Dijkstra’s Algorithm in PHP, 2007) που όμως και εδώ έπρεπε να τον προσαρμοστεί στα δεδομένα που έχουν οριστεί, όμως είναι πιο εύκολο από ότι θα ήταν σε Javascript.

Στα τελικά στάδια ολοκλήρωσης του κώδικα, σχεδιάστηκαν και τα γραφικά που θα έμπαιναν στο site ώστε να γίνει πιο φιλικό προς τον χρήστη. Επίσης προστέθηκαν οι φωτογραφίες για τις αίθουσες και τους χώρους και οι υπόλοιπες πληροφορίες.

Τέλος σχεδιάστηκαν οι εικονικές περιηγήσεις με βάση τις φωτογραφίες που είχαν βγει σε προηγούμενη φάση και «συνδέθηκαν» οι κόμβοι των χώρων και των αιθουσών. Ένα μικρό μειονέκτημα του προγράμματος που χρησιμοποιήθηκε για τα VR videos, είναι ότι δεν επέτρεπε τη χρήση του ελληνικού χαρακτήρα «π», οπότε σε links που η περιγραφή τους περιλαμβάνει αυτό το γράμμα, έχει γραφτεί με λατινικούς χαρακτήρες στα “greeklish”. Ακόμα ένα περιορισμό που έχει το πρόγραμμα αυτό, είναι ότι δεν έχει πολλές επιλογές όσον αφορά τη δημιουργία των links, επειδή δέχεται μόνο στατικές διευθύνσεις. Δηλαδή δεν είναι δυνατόν να γραφούν περισσότερες πληροφορίες, όπως το όνομα του χώρου στο οποίο βρίσκεται ο χρήστης ή σε ποιο σημείο ακριβώς βρίσκεται ο χώρος αυτός. Τέτοιες επιλογές έχουν μόνο προγράμματα για τον υπολογιστή που δημιουργούν stand-alone εφαρμογές.

1.3 Σύνοψη

Λόγω του σχεδόν ανύπαρκτου αντίστοιχου υλικού στο internet, η εκτενής έρευνα για τη σχεδίαση του project ήταν το βασικό βήμα που οδήγησε στην περαιτέρω εξέλιξη και ανάπτυξη του site.

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

2. Σχεδίαση & Ανάλυση Απαιτήσεων

2.1 Σχεδιασμός & Γραφικά

Τα πρώτα βήματα που πραγματοποιήθηκαν για την ανάπτυξη του site ήταν από σχεδιαστικής άποψης να είναι απλό στην περιήγησή του, χωρίς δηλαδή να απαιτείται ο επισκέπτης να είναι έμπειρος χρήστης του internet. Έτσι χωρίστηκε η σελίδα σε 2 frames και στο αριστερό θα αναγράφονται όλες οι διαθέσιμες αίθουσες και διαθέσιμοι χώροι που χρησιμοποιούνται από τους φοιτητές του τμήματος κάνοντας έτσι εύκολη και γρήγορη την χρησιμοποίησή τους.

2.1.1 Sites με Virtual Tour

Στο internet δεν υπάρχουν πολλά sites αντίστοιχου περιεχομένου. Ενδεικτικά είναι το Virtual Tour του Πανεπιστημίου της Κεντρικής Φλόριδα (Virtual Tour of University of Central Florida, 2006) το οποίο προσφέρει εικονική περιήγηση, φωτογραφίες των χώρων, πληροφορίες και χάρτη της περιοχής.

Επίσης το Πανεπιστήμιο του Harvard (Virtual Tour of University of Harvard, 2006) προσφέρει εικονική περιήγηση των χώρων, με πληροφορίες για αυτούς.

2.2 Απαιτήσεις

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

Οι απαιτήσεις μπορούν να εξυπηρετούν τρεις σκοπούς. Πρώτον, επιτρέπουν στους τεχνολόγους ανάπτυξης να εξηγήσουν τις απόψεις τους σε σχέση με τον τρόπο λειτουργίας του συστήματος που επιθυμεί ο πελάτης. Δεύτερον, οι απαιτήσεις προσδιορίζουν στους σχεδιαστές τη λειτουργικότητα και τα χαρακτηριστικά που πρέπει να διαθέτει το τελικό σύστημα. Και τρίτον, οι απαιτήσεις καθορίζουν στην ομάδα ελέγχου το τι πρέπει να επιδείξει έτσι ώστε να πειστεί ο πελάτης ότι το παραδοτέο project είναι όντως αυτό που ζήτησε. (Pfleeger, 2005)

Έτσι και σε αυτό το project, οι λειτουργίες που πρέπει να προσφέρει το σύστημα στον επισκέπτη της ιστοσελίδας είναι οι εξής:

Λειτουργικά Χαρακτηριστικά Επισκέπτη:

 Επιλογή αίθουσας από το μενού με ταξινόμηση σε κατηγορίες

 Πληροφόρηση για κάθε αίθουσα σχετικά με το τι μαθήματα γίνονται ή τη χρησιμότητα του χώρου

 Πληροφόρηση για τον τεχνικό εξοπλισμό κάθε εργαστηρίου

 Εντοπισμός του κάθε χώρου μέσω δυο χαρτών. Ο ένας μας δίνει την κάτοψη του ορόφου που βρίσκεται ο χώρος και ο δεύτερος μας δίνει την κάτοψη του συγκροτήματος του ΤΕΙ και σε ποιο σημείο βρίσκεται ακριβώς.

 Πανοραμική περιήγηση 180^ο ή 360^ο με το QuickTime VR.

 Φωτογραφίες του χώρου

 Εύρεση της πιο σύντομης διαδρομής από ένα σημείο στο άλλο με αλληλεπίδραση με τον χρήστη.

 Δυνατότητα αναζήτησης & εύρεσης της αίθουσας που πραγματοποιείται το μάθημα που ψάχνει ο επισκέπτης

 Εντοπισμός IP address επισκέπτη και εμφάνιση ειδικού μηνύματος όταν συνδέεται από τα εργαστήρια του τμήματος Βιομηχανικής Πληροφορικής.

 Οδηγίες περιήγησης σχετικά με την ιστοσελίδα για ευκολότερη χρήση

Το site διαθέτει και ειδικές σελίδες για τον διαχειριστή της, έτσι ώστε να γίνεται δυναμικά και συνεπώς εύκολα και γρήγορα οποιαδήποτε αλλαγή.

Λειτουργικά Χαρακτηριστικά Διαχειριστή:

 Είσοδος με όνομα χρήστη και κωδικό πρόσβασης στο μενού

 Διαχείριση Αιθουσών (προσθήκη/ επεξεργασία/ διαγραφή)

 Διαχείριση Φωτογραφιών (προσθήκη/ επεξεργασία/ διαγραφή)

 Διαχείριση Κατηγοριών (προσθήκη/ επεξεργασία/ διαγραφή)

 Διαχείριση Μαθημάτων (προσθήκη/ επεξεργασία/ διαγραφή)

 Διαχείριση IP διευθύνσεων (προσθήκη/ επεξεργασία/ διαγραφή)

 Αποσύνδεση από το σύστημα διαχείρισης

Για την εγκατάσταση της ιστοσελίδας στο διαδίκτυο, είναι απαραίτητος ένας web server (υπολογιστή που «εκδίδει» σελίδες στον παγκόσμιο ιστό) που υποστηρίζει PHP και MySQL.

2.3 Προδιαγραφές

Μαζί με τις απαιτήσεις, οι προδιαγραφές είναι ένα άλλο κομμάτι της σχεδίασης που πρέπει να συνταχθεί για την καλύτερη ανάπτυξη του project. Όπως και στις απαιτήσεις έτσι και εδώ, έχουν χωριστεί οι προδιαγραφές σε αυτές του απλού επισκέπτη του site και σε αυτές του διαχειριστή. (Μαρινάγη, 2005) Στους παρακάτω πίνακες περιγράφονται οι διεργασίες του κάθε χρήστη.

Προδιαγραφές Διεργασιών Επισκέπτη

Όνομα Διεργασίας ΕΥΡΕΣΗ ΣΥΝΤΟΜΟΤΕΡΗΣ ΔΙΑΔΡΟΜΗΣ

Περιγραφή Ο επισκέπτης μπορεί να ορίσει 2 σημεία πάνω στο χάρτη του

ΤΕΙ. Το πρώτο σημείο ορίζει το σημείο προέλευσης και το δεύτερο το σημείο προορισμού. Ο αλγόριθμος που χρησιμοποιείται μας δίνει την πιο σύντομη διαδρομή (περνώντας από άλλα σημεία του χάρτη)

Είσοδος -Σημείο προέλευσης -Σημείο προορισμού Έξοδος -Συντομότερη διαδρομή

Πηγή -Επισκέπτης

Προορισμός -Σελίδα με αποτέλεσμα

Όνομα Διεργασίας ΕΥΡΕΣΗ ΑΙΘΟΥΣΑΣ ΒΑΣΗ ΜΑΘΗΜΑΤΟΣ

Περιγραφή Ο επισκέπτης μπορεί να εισάγει στην ειδική φόρμα ένα μάθημα της σχολής Βιομηχανικής Πληροφορικής και να βρει σε ποια αίθουσα πραγματοποιείται.

Είσοδος Όνομα μαθήματος

Έξοδος -Ποιες λέξεις-κλειδιά χρησιμοποιήθηκαν -Όνομα μαθήματος

-Όνομα αίθουσας που αντιστοιχεί το μάθημα

Πηγή -Επισκέπτης

Προορισμός -Σελίδα με αποτέλεσμα

Προδιαγραφές Διεργασιών Διαχειριστή

Όνομα Διεργασίας ΠΡΟΣΘΗΚΗ ΑΙΘΟΥΣΑΣ

Περιγραφή Ο διαχειριστής μπορεί να προσθέσει καινούριες αίθουσες στην ιστοσελίδα

Είσοδος -Όνομα αίθουσας

-Επιλογή κατηγορίας αίθουσας -Εξοπλισμός

Έξοδος Στοιχεία αίθουσας

Πηγή Διαχειριστής

Προορισμός Σελίδα διαχείρισης αιθουσών

Όνομα Διεργασίας ΕΠΕΞΕΡΓΑΣΙΑ / ΔΙΑΓΡΑΦΗ ΑΙΘΟΥΣΑΣ

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

Είσοδος -Όνομα αίθουσας

-Επιλογή κατηγορίας αίθουσας -Εξοπλισμός

-Panoramic movie -Κεντρική φωτογραφία Έξοδος -Ενημερωμένα στοιχεία

-Διαγραφή

Πηγή -Διαχειριστής

-Σελίδα επεξεργασίας αιθουσών Προορισμός Σελίδα διαχείρισης αιθουσών

Όνομα Διεργασίας ΠΡΟΣΘΗΚΗ ΦΩΤΟΓΡΑΦΙΑΣ

Περιγραφή Ο διαχειριστής μπορεί να προσθέσει επιπλέον φωτογραφίες για κάθε αίθουσα.

Είσοδος -Όνομα αίθουσας

-Σχόλιο φωτογραφίας Έξοδος Στοιχεία φωτογραφίας

Πηγή Διαχειριστής

Προορισμός Σελίδα διαχείρισης φωτογραφιών

Όνομα Διεργασίας ΕΠΕΞΕΡΓΑΣΙΑ / ΔΙΑΓΡΑΦΗ ΦΩΤΟΓΡΑΦΙΑΣ

Περιγραφή Ο διαχειριστής μπορεί να κάνει upload τη φωτογραφία που θέλει και να αλλάξει τα σχόλια ή την αίθουσα που αντιστοιχεί η φωτογραφία. Στην περίπτωση της διαγραφής, διαγράφεται η φωτογραφία και όλα τα στοιχεία της.

Είσοδος -Όνομα αίθουσας που αντιστοιχεί η φωτογραφία -Σχόλια φωτογραφίας

-upload φωτογραφίας από Η/Υ Έξοδος -Ενημερωμένα στοιχεία

Πηγή -Διαχειριστής

-Σελίδα επεξεργασίας φωτογραφιών Προορισμός Σελίδα διαχείρισης φωτογραφιών

Όνομα Διεργασίας ΠΡΟΣΘΗΚΗ ΚΑΤΗΓΟΡΙΑΣ

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

Είσοδος -Όνομα κατηγορίας αίθουσας Έξοδος -Ονομασία κατηγορίας

Πηγή -Διαχειριστής

-Σελίδα διαχείρισης κατηγοριών Προορισμός -Σελίδα διαχείρισης κατηγοριών

Όνομα Διεργασίας ΕΠΕΞΕΡΓΑΣΙΑ / ΔΙΑΓΡΑΦΗ ΚΑΤΗΓΟΡΙΑΣ

Περιγραφή Ο διαχειριστής μπορεί να αλλάξει την ονομασία της επιλεγμένης κατηγορίας.

Είσοδος -Όνομα κατηγορίας αίθουσας Έξοδος -Ενημερωμένα στοιχεία

Πηγή -Διαχειριστής

-Σελίδα επεξεργασίας κατηγοριών Προορισμός -Σελίδα διαχείρισης κατηγοριών

Όνομα Διεργασίας ΠΡΟΣΘΗΚΗ ΜΑΘΗΜΑΤΟΣ

Περιγραφή Ο διαχειριστής μπορεί να προσθέσει νέα μαθήματα και να τα αντιστοιχίσει στην αίθουσα μαθημάτων που πραγματοποιούνται.

Είσοδος -Όνομα μαθήματος

-Επιλογή αίθουσας που αντιστοιχεί το μάθημα

Έξοδος -Όνομα μαθήματος

-Όνομα αίθουσας που γίνεται το μάθημα

Πηγή -Διαχειριστής

-Σελίδα διαχείρισης μαθημάτων Προορισμός Σελίδα διαχείρισης μαθημάτων

Όνομα Διεργασίας ΕΠΕΞΕΡΓΑΣΙΑ / ΔΙΑΓΡΑΦΗ ΜΑΘΗΜΑΤΟΣ

Περιγραφή Ο διαχειριστής μπορεί να αλλάξει το όνομα του επιλεγμένου μαθήματος ή και να αλλάξει την αίθουσα στην οποία γίνεται το μάθημα.

Είσοδος -Όνομα μαθήματος

-Επιλογή αίθουσας που αντιστοιχεί το μάθημα Έξοδος -Ενημερωμένα στοιχεία

Πηγή -Διαχειριστής

-Σελίδα επεξεργασίας μαθήματος Προορισμός Σελίδα διαχείρισης μαθημάτων

Όνομα Διεργασίας ΠΡΟΣΘΗΚΗ IP ΔΙΕΥΘΥΝΣΗΣ

Περιγραφή Ο διαχειριστής εισάγει μια IP διεύθυνση και την αντιστοιχεί σε κάποια αίθουσα.

Είσοδος -Διεύθυνση IP

-Αντιστοίχιση αίθουσας

Έξοδος -Διεύθυνση IP σε μορφή 10-ψήφιου ακέραιου αριθμού -Διεύθυνση IP σε μορφή IPv4 (xxx.xxx.xxx.xxx) -Ενημερωμένα στοιχεία

Πηγή -Διαχειριστής

-Σελίδα διαχείρισης IP ανά αίθουσα Προορισμός Σελίδα διαχείρισης IP ανά αίθουσα

Όνομα Διεργασίας ΕΠΕΞΕΡΓΑΣΙΑ / ΔΙΑΓΡΑΦΗ IP ΔΙΕΥΘΥΝΣΗΣ

Περιγραφή Ο διαχειριστής μπορεί να αλλάξει μια IP διεύθυνση, να την αντιστοιχίσει σε κάποια άλλη αίθουσα ή ακόμα και να τη διαγράψει από τη βάση δεδομένων.

Είσοδος -Καινούρια διεύθυνση IP

Έξοδος -Διεύθυνση IP σε μορφή 10-ψήφιου ακέραιου αριθμού -Διεύθυνση IP σε μορφή IPv4 (xxx.xxx.xxx.xxx) -Ενημερωμένα στοιχεία

Πηγή -Διαχειριστής

-Σελίδα επεξεργασίας IP διεύθυνσης Προορισμός Σελίδα διαχείρισης IP

2.3 Διαγράμματα Ροής

Παρακάτω παρουσιάζονται το διαγράμματα ροής σχετικά με τις επιλογές του επισκέπτη και τις λειτουργίες του διαχειριστή στην ιστοσελίδα.

Διάγραμμα Ροής Επισκέπτη

Σχήμα 1: Δ.Ρ. Επισκέπτη

Κεντρική σελίδα

Αριστερό μενού

Επιλογές αρχικής σελίδας

Οδηγίες περιήγησης

Επιλογή αίθουσας

Φωτογραφίες αίθουσας

Πανοραμική περιήγηση

Μεταφορά σε άλλο χώρο

Χάρτης ΤΕΙ με VR

Εύρεση συντομότερης

διαδρομής

Αναζήτηση αίθουσας, βάση

μαθήματος

Διάγραμμα Ροής Διαχειριστή

`

Σχήμα 2: Δ.Ρ. Διαχειριστή

Είσοδος

σωστοί κωδικοί;

όχι

ναι

Διαχείριση Αιθουσών

Προσθήκη Επεξεργασία Διαγραφή

Διαχείριση Φωτογραφιών

Διαχείριση Κατηγοριών

Διαχείριση Μαθημάτων

Διαχείριση IP διευθ.

Αποσύνδεση

είστε σίγουροι;

Ενημερωμένη σελίδα

όχι

ναι Ενημερωμένη

σελίδα

Ενημερωμένη σελίδα

2.4 Σύνοψη

Συνοψίζοντας ο σχεδιασμός του site είναι ένα από τα σημαντικότερα μέρη που έχουν άμεσο αντίκτυπο στην εμφάνιση αλλά και στη λειτουργικότητα του site. Η σωστή ανάλυση των απαιτήσεων και των προδιαγραφών είναι απαραίτητη και βοηθάνε στην εξήγηση της επιλογής των συγκεκριμένων σχεδιαστικών πλάνων καθώς και των λύσεων τους.

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

Στο επόμενο κεφάλαιο παρουσιάζονται οι τρόποι με τους οποίους σχεδιάστηκε το site, ξεκινώντας από τα προϊόντα λογισμικού που χρησιμοποιήθηκαν, την εμφάνιση του site και τις λειτουργίες του, το σχεδιασμό της βάσης δεδομένων και τους τρόπους που έγινε η υλοποίησή της

3.Υλοποίηση Εφαρμογής

3.1 Προϊόντα Λογισμικού

Για την υλοποίηση του site, χρειάστηκαν διάφορα προϊόντα λογισμικού. Η επιλογή τους βασίστηκε στην εμπειρία από προηγούμενη χρήση τους αλλά και μετά από έρευνα στο internet.

3.1.1 Apache Server

Ο Apache Http Server είναι ένας ισχυρός και ευέλικτος web server συμβατός με το HTTP/1.1 πρωτόκολλο. Χρησιμοποιεί τα τελευταία πρωτόκολλα, είναι ιδιαίτερα προσαρμόσιμος και επεκτάσιμος και ο βασικός λόγος είναι ότι διανέμεται με τον πλήρη source κώδικα με άδεια χρήσης χωρίς περιορισμούς. O Apache φτιάχτηκε από μια ομάδα open source προγραμματιστών και χρησιμοποιείται συχνά λόγω της αξιόλογης επίδοσής του, τα δυνατά χαρακτηριστικά ασφαλείας του και κυρίως επειδή διανέμεται δωρεάν.

Σε σύγκριση με τους άλλους web servers είναι σαφέστατα γρηγορότερος και πιο σταθερός, προσφέροντας παράλληλα και περισσότερα χαρακτηριστικά.. Μερικά από αυτά είναι οι βάσεις δεδομένων DBM για πιστοποίηση, προσαρμοσμένες απαντήσεις σε λάθη και προβλήματα, πολλαπλές οδηγίες, DirectoryIndex, απεριόριστα και ευέλικτα URL rewriting και aliasing, άρνηση περιεχομένου, virtual hosts και προσαρμοσμένα και αξιόπιστα piped logs.

3.1.2 PHP

Η PHP (PHP, 2007) είναι μια γλώσσα προγραμματισμού που σχεδιάστηκε για τη δημιουργία δυναμικών σελίδων στο δυαδίκτυο και είναι επισήμως γνωστή ως:

HyperText preprocessor.

Αρχικά η ονομασία της ήταν PHP/FI από το Forms Interpreter η οποία δημιουργήθηκε το 1995 από τον Rasmus Lerdorf ως μια συλλογή από Perl scripts που τα χρησιμοποιούσε στην προσωπική του σελίδα. Δεν άργησε να τα εμπλουτίσει με λειτουργίες επεξεργασίας δεδομένων με SQL, (SQL 2006) αλλά τα σημαντικά βήματα που έφεραν και την μεγάλη αποδοχή της PHP ήταν αρχικά η μετατροπή τους σε C και μετέπειτα η δωρεάν παροχή του πηγαίου κώδικα μέσω της σελίδας του ώστε να επωφεληθούν όλοι από αυτό που είχε φτιάξει, αλλά και να τον βοηθήσουν στην περαιτέρω ανάπτυξή της.

Είναι μια server-side (εκτελείται στον διακομιστή) scripting γλώσσα που γράφεται συνήθως πλαισιωμένη από HTML, για μορφοποίηση των αποτελεσμάτων. Αντίθετα από μια συνηθισμένη HTML σελίδα η σελίδα PHP δεν στέλνεται άμεσα σε έναν

πελάτη (client), άντ’ αυτού πρώτα αναλύεται και μετά αποστέλλεται το παραγόμενο αποτέλεσμα. Τα στοιχεία HTML στον πηγαίο κώδικα μένουν ως έχουν, αλλά ο PHP κώδικας ερμηνεύεται και εκτελείται. Ο κώδικας PHP μπορεί να θέσει ερωτήματα σε βάσεις δεδομένων, να δημιουργήσει εικόνες, να διαβάσει και να γράψει αρχεία, να συνδεθεί με απομακρυσμένους υπολογιστές, κ.ο.κ. Σε γενικές γραμμές οι δυνατότητες που μας δίνει είναι απεριόριστες.

Τα πλεονεκτήματα στη χρήση της PHP είναι :

 Υψηλή απόδοση

 Διασυνδέσεις με πολλά διαφορετικά συστήματα βάσεων δεδομένων

 Ενσωματωμένες βιβλιοθήκες για πολλές συνηθισμένες Web διαδικασίες

 Χαμηλό κόστος

 Ευκολία μάθησης και χρήσης

 Μεταφερσιμότητα

 Διαθεσιμότητα του κώδικα προέλευσης

3.1.3 MySQL

Η MySQL (MySQL, 2006) είναι μια βάση δεδομένων τύπου RDBMS (relational database management system) που στηρίζεται στη γλώσσα SQL για την επεξεργασία των στοιχείων στη βάση δεδομένων. Παρέχει APIs για τις γλώσσες C, C++, Eiffel, Java, Perl, PHP και Python. Είναι ένα πολύ γρήγορο και δυνατό, σύστημα διαχείρισης βάσεων δεδομένων. Μια βάση δεδομένων που σας επιτρέπει να αποθηκεύετε , να αναζητάτε , να ταξινομείτε και να ανακαλείτε τα δεδομένα αποτελεσματικά

Είναι η πιο δημοφιλής open source SQL βάση δεδομένων και διατίθεται από την εταιρεία MYSQL AB. Είναι πολύ γρήγορη, αξιόπιστη και εύκολη στη χρήση.

Διαθέτει ένα πολύ πρακτικό σύνολο χαρακτηριστικών, τα οποία αναπτύχθηκαν σε συνεργασία με τους τελικούς χρήστες. Σχεδιάστηκε αρχικά για να χειρίζεται πολύ μεγάλες βάσεις δεδομένων πολύ γρηγορότερα από τις τότε υπάρχουσες λύσεις και έχει χρησιμοποιηθεί επιτυχώς σε περιβάλλοντα παραγωγής για πολλά χρόνια. Η διασυνδετικότητα, η ταχύτητα και η ασφάλεια της, την κάνουν κατάλληλη για πρόσβαση μέσω του Internet.

Η MySQL είναι ένα σύστημα client/server που αποτελείται από έναν multi-threaded SQL server που υποστηρίζει διάφορα backends, πολλά διάφορα client προγράμματα και βιβλιοθήκες, εργαλεία διαχείρισης και διάφορα προγραμματιστικά interfaces.

Όσον αφορά την υποστήριξη της SQL, οι σχεδιαστές της MySQL σε μια προσπάθεια να δημιουργήσουν μια γρήγορη και γερή βάση δεδομένων, εστίασαν στη βασική λειτουργικότητα που απαιτείται από την πλειονότητα των χρηστών και πρόσθεσαν κάποια δικά τους χαρακτηριστικά για να επιταχύνουν τις πιο κοινές διαδικασίες.

Οι περισσότερες κοινές προτάσεις SQL λειτουργούν κανονικά στη MySQL. Οι μόνες περιπτώσεις είναι όταν υπάρχουν βαθιά φωλιασμένες προτάσεις και εσωτερικές functions. Λόγω της υψηλής απόδοσης της MySQL υπάρχουν δυο σημαντικά χαρακτηριστικά τα οποία λείπουν από το σύστημα, τα transanctions και οι stored

procedures (καθώς και τα triggers) επειδή αυτά επιβαρύνουν σημαντικά μια βάση δεδομένων.

H MySQL χρησιμοποιείται για εφαρμογές στον παγκόσμιο ιστό (www) και για τις ενσωματωμένες εφαρμογές και έχει γίνει μια δημοφιλής εναλλακτική λύση στα ιδιόκτητα συστήματα βάσεων δεδομένων λόγω της ταχύτητας και της αξιοπιστίας της. H MySQL μπορεί να τρέξει σε Unix, Windows και MAC OS.

3.1.4 phpmyadmin

Το phpmyadmin (Phpmyadmin, 2007) είναι μια εφαρμογή με την οποία μπορεί ο χρήστης να διαχειριστεί τη βάση ή τις βάσεις δεδομένων. Για να «τρέξει» είναι απαραίτητο να έχει εγκατασταθεί στον υπολογιστή που χρησιμοποιείται, Apache server που να υποστηρίζει PHP & MySQL.

Εικόνα 3: Κεντρική σελίδα phpmyadmin 2.6.1

Το phpmyadmin είναι ιδιαίτερα εύχρηστο αλλά και πολύτιμο, διότι έχει όλες τις απαραίτητες πληροφορίες της βάσης μας. Επιπλέον με τη χρήση username και password της βάσης μας, προστατεύεται η επεξεργασία της από τρίτους.

3.1.5 Adobe Photoshop

Το Adobe Photoshop (Adobe Photoshop, 2006) είναι από τα πιο διάσημα προγράμματα επεξεργασίας φωτογραφιών και δημιουργίας γραφικών. Η χρήση του είναι σημαντική για την επίτευξη ενός όμορφου αισθητικά περιβάλλοντος στο site.

Από μικρά γραφικά μέχρι και μεγαλύτερες φωτογραφίες, διαμορφωμένες ανάλογα με τις ανάγκες του χρήστη, το Photoshop κάνει τη διαφορά!

3.1.6 Panorama Factory

Για την δημιουργία των εικονικών πανοραμάτων (αρχεία .mov) επιλέχθηκε το πρόγραμμα Panorama Factory (Panorama Factory, 2006).

Προαπαιτούμενο στοιχείο για τη δημιουργία βίντεο ήταν η λήψη φωτογραφιών από τους χώρους που ενδιαφέρουν τον χρήστη. Για το σκοπό αυτό τοποθετήθηκε η φωτογραφική μηχανή σε ένα σταθερό σημείο σε κάθε χώρο και η λήψη των φωτογραφιών έγινε σταδιακά με περιστροφή της μηχανής κατά 360^ο. Η κάθε φωτογραφία είχε το 20% της λήψης της προηγούμενής της.

Το Panorama Factory προσφέρει τη δυνατότητα να ενώνει τις φωτογραφίες και να δημιουργεί μια πανοραμική φωτογραφία 360^ο. Σε μερικές περιπτώσεις που δεν ήταν απαραίτητη η πλήρης περιστροφή, φτιάχτηκαν πανοράματα των 180^ο. Για να είναι αισθητή η εικονική πραγματικότητα, το πρόγραμμα επιτρέπει να αποθηκευτεί η φωτογραφία σε αρχείο βίντεο .mov (το format χρησιμοποιείται από το QuickTime).

Έτσι μπορεί ο χρήστης να περιστρέψει την εικόνα προς όποια μεριά επιθυμεί, δημιουργώντας την ψευδαίσθηση ότι όντως βρίσκεται εκεί!

Επιπλέον με τη δημιουργία hotspots σε κάθε πανοραμική εικόνα, μπορεί ο χρήστης να οριοθετούμε μια περιοχή στην οποία όταν θα κάνει «κλικ» θα τον οδηγεί σε ένα άλλο πανόραμα που έχει ήδη δημιουργηθεί.

Εικόνα 4: Κεντρικό μενού του Panorama Factory V4

3.1.7 ConceptDraw

Για τις κατόψεις των αιθουσών χρησιμοποιήθηκε το σχεδιαστικό πρόγραμμα Concept Draw (Concept Draw, 2006). Το πρόγραμμα αυτό έχει πολλές σχεδιαστικές επιλογές και είναι ιδιαίτερα χρήσιμο για αρχιτέκτονες ή άλλους σχεδιαστές χώρων.

3.2 Υλοποίηση Εφαρμογής

Αφού έγινε η περιγραφή των προγραμμάτων που χρησιμοποιήθηκαν, παρακάτω περιγράφονται οι μέθοδοι υλοποίησης που χρησιμοποιήθηκαν και ο τρόπος με τον οποίο συνδυάστηκαν.

3.2.1 Εγκατάσταση Apache, PHP, MySQL σε Windows

Όπως αναφέρθηκε και παραπάνω, για να «τρέξει» ένα site με PHP & MySQL χρειάζεται κάποιος server για να «εκδίδει» το site στο διαδίκτυο. Προτού όμως γίνει αυτό, ο χρήστης μπορεί να εγκαταστήσει ένα Apache Server στο τοπικό δίκτυο του υπολογιστή του, απλά εγκαθιστώντας τα πακέτα Apache, PHP και MySQL. Καλό είναι να τα εγκατασταθούν με την σειρά που αναφέρθηκαν.

Το Apache 2.0 (Apache, 2006) διατίθεται από την διεύθυνση http://httpd.apache.org/download.cgi επιλέγοντας το Win32 Binary της έκδοσης που θέλουμε. Πριν γίνει η εγκατάσταση του Apache θα πρέπει ο χρήστης να διασφαλίσει ότι δεν «τρέχει» κάποιο Web Server στο σύστημά του (ή κάποια προηγούμενη έκδοση του Apache). Αν υπάρχουν servers θα πρέπει να τους απενεργοποιήσει ή να καταργήσει την εγκατάστασή τους.

Για την εγκατάσταση της PHP αρκεί να «κατεβάσει» τα αρχεία από τη διεύθυνση http://www.php.net/downloads.php και να τα τοποθετήσουμε στο σύστημά του. (PHP Manual 2007)

Τέλος η εγκατάσταση της MySQL είναι επίσης πολύ απλή. Από τη διεύθυνση http://dev.mysql.com/downloads/ επιλέγει την έκδοση που θέλει και βρίσει στα Windows downloads την Windows Essentials (x86) ή την Windows (x86). Το πρόγραμμα setup.exe θα εγκαταστήσει τον MySQL server και τα client προγράμματα στον υπολογιστή..

3.2.2 Επικοινωνία της βάσης δεδομένων MySQL μέσω της PHP

Αφού έχει σχεδιαστεί η βάση δεδομένων, δεν μένει παρά ο διαχειριστής να την φέρει σε «επικοινωνία» με την PHP. Η βάση δεδομένων ονομάζεται teiguide. Θα πρέπει να δωθεί μια εντολή που να επιλέγει με ποιά βάση δεδομένων θα επικοινωνήσει. Η εντολή αυτή είναι:

function dbconnect ($dbhost, $dbdb, $dbuser, $dbpass) {

$dbid = mysql_connect ($dbhost, $dbuser, $dbpass);

mysql_select_db ($dbdb);

return $dbid;

}

$dbhost είναι η ονομασία του server που «τρέχει» η βάση. Όταν είναι εγκατεστημένη στον προσωπικό υπολογιστή του χρήστη τότε γράφει localhost, ενώ αν είναι εγκατεστημένη σε κάποιο άλλο server γράφουμε συνήθως το domain address του, πχ microsoft.com. Τα $dbuser και $dbpass χρησιμοποιούνται για την ασφάλεια της βάσης δεδομένων και είναι το όνομα χρήστη και το password της. Χωρίς αυτά δεν επιτρέπεται η προσπέλασή της. Σε περίπτωση που «τρέχει» η βάση από τον προσωπικό υπολογιστή και δεν ενδιαφέρει τον χρήστη η προστασία της, ο dbuser είναι “root” και το dbpass είναι κενό “ ”.

Για την καλύτερη λειτουργικότητα του site, χρησιμοποιήθηακαν δυο (2) σελίδες php για τη σύνδεση της βάσης. Η μια σελίδα ονομάζεται config.php και περιέχει όλα τα στοιχεία για τη σύνδεση στη βάση. (όνομα host, όνομα βάσης δεδομένων, όνομα χρήστη & password.) Η δεύτερη σελίδα ονομάζεται db.php, η οποία περιλαμβάνει την config.php και χρησιμοποιεί διάφορα functions για να πραγματοποιήσει τη σύνδεση στη βάση δεδομένων αλλά και για να μπορεί να εκτελεί τα SQL queries που θα χρησιμοποιηθούν στις σελίδες PHP.

3.2.3 Εμφάνιση ιστοσελίδας

Ακολουθώντας την ίδια λογική με παραπάνω δημιουργήθηκε ένα αρχείο με όνομα theme.php το οποίο συμπεριλαμβάνεται σε κάθε php σελίδα και περιέχει τα στοιχεία σύνδεσης στη βάση δεδομένων καθώς και άλλα στοιχεία που συνήθως περιλαμβάνονται στην κεφαλίδα της κάθε σελίδας με διάφορες πληροφορίες. Ο λόγος που οργανώθηκε έτσι, είναι ότι σε περίπτωση που χρειάζεται να γίνει μια αλλαγή, δεν θα χρειαστεί να γίνει σε όλες τις σελίδες του, μια προς μια, παρά μόνο στην theme.php (η οποία περιλαμβάνεται σε όλες τις άλλες). Πραγματοποιείται δηλαδή εξοικονόμηση χώρου αλλά και κυρίως χρόνου.

3.2.3.1 CSS

Το Cascading Style Sheets (CSS, 2007) είναι μία γλώσσα που χρησιμοποιείται από την HTML και την XHTML. Εφαρμόζεται σε κάθε στοιχείο της σελίδας ξεχωριστά (χρώματα, γραμματοσειρές, τοποθέτηση εικόνων και άλλων στοιχείων κλπ).

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

Πρωτοεμφανίστηκε το 1996, αλλά η ολοκληρωμένη υποστήριξη από τους πιο δημοφιλείς browsers δεν έγινε μέχρι το 2000.

3.2.4 Javascripts

Η Javascript (Javascripts, 2006) είναι μία γλώσσα scripting βασισμένη στη έννοια του πρότυπου προγραμματισμού και πήρε το όνομα από την εφαρμογή ECMAScript του Netscape. Η γλώσσα αυτή χρησιμοποιείται στις ιστοσελίδες για διάφορους λόγους, όπως για δυναμική σχεδίαση, έλεγχο φόρμας και πολλά άλλα. Λειτουργεί σε όλους τους βασικούς browsers όπως ο Internet Explorer, o Mozilla Firefox, o Netscape και η Opera.

Για το site δημιουργήθηκε η σελίδα functions.js η οποία περιλαμβάνει τις συναρτήσεις (functions) που χρησιμοποιούνται, έτσι ώστε κάθε φορά που καλείται ένα function να μην χρειάζεται να γράφεται στην εκάστοτε σελίδα όλος ο κώδικας, παρά μόνο το όνομα του με τις μεταβλητές και αμέσως η σελίδα php «καλεί» την function.js (η οποία περιλαμβάνεται και αυτή στο theme.php).