Χάρτης με μνημεία της UNESCO στη Θεσσαλονίκη

6ο Μαθητικό Συνέδριο Πληροφορικής – Απρίλιος 2014

Χρήση της Διεπαφής Προγραμματισμού Εφαρμογής

Google Maps για τη δημιουργία διαδραστικού χάρτη με τα

Μνημεία Παγκόσμιας Πολιτιστικής Κληρονομιάς της

ΟΥΝΕΣΚΟ στη Θεσσαλονίκη

Εμμανουήλ Τσάμης1, Κωνσταντίνος Σκουτέλης

2, Μαρία Καρασαββίδου

3, Πέτρος Κοσμάς

4,

Συμέλα Τσολακίδου5, Ελένη Αλκαλάκη

6, Άννα Παπαδημητροπούλου

7

1..2

Μαθητές Α Τάξης Λυκείου, Ελληνικό Κολλέγιο Θεσσαλονίκης

[email protected] 3..7

Μαθητές Β Τάξης Λυκείου, Ελληνικό Κολλέγιο Θεσσαλονίκης

[email protected]

Κωνσταντίνος Παρασκευόπουλος Καθηγητής Πληροφορικής (ΠΕ19 MSc)

Ελληνικό Κολλέγιο Θεσσαλονίκης

[email protected]

Αναστασία Παραθυρά-Ψαλλίδα Φιλόλογος (ΠΕ02 MSc)


[email protected]

Βασιλική Κοντογώγου Φιλόλογος (ΠΕ02)


[email protected]

Περίληψη

Χαρακτηριστικά παραδείγματα Web 2.0 εφαρμογών αποτελούν οι διαδικτυακές εφαρμογές

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

πιο επιτυχημένες και δημοφιλείς διαδικτυακές εφαρμογές χαρτογράφησης είναι η Google Maps

της γνωστής εταιρίας Google. Η Google, λαμβάνοντας υπόψη τη μεγάλη επιτυχία των χαρτών

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

της Google Maps API. Το Google Maps API είναι ένα δωρεάν εργαλείο που προσφέρει σε

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

ενδιαφέροντος και φωτογραφίες και στη συνέχεια να τον ενσωματώσει στην ιστοσελίδα του. Οι

μαθητές δημιούργησαν έναν διαδικτυακό τόπο και χρησιμοποίησαν τις δυνατότητες που

προσφέρει το Google Maps API, για να δημιουργήσουν ένα διαδραστικό χάρτη της

Θεσσαλονίκης. Πάνω στο χάρτη τοποθέτησαν τα δεκαέξι μεσαιωνικά μνημεία της

Θεσσαλονίκης που εντάσσονται στον κατάλογο της ΟΥΝΕΣΚΟ με τα Μνημεία Παγκόσμιας

Πολιτιστικής Κληρονομιάς. Τέλος, οι καταχωρήσεις εμπλουτίστηκαν με πληροφορίες και

φωτογραφίες για το κάθε μνημείο.

Λέξεις κλειδιά: Web 2.0, Google Maps API, μνημεία παγκόσμιας πολιτιστικής κληρονομιάς

ΟΥΝΕΣΚΟ.

1. Εισαγωγή

Στόχος της εργασίας είναι η δημιουργία ενός διαδραστικού διαδικτυακού χάρτη με όλα τα

Παλαιοχριστιανικά και Βυζαντινά μνημεία της Παγκόσμιας Πολιτιστικής Κληρονομιάς της

UNESCO στη Θεσσαλονίκη. Για το σκοπό αυτό δημιουργήθηκε ένας διαδικτυακός τόπος μέσα

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

προβάλλονται και επιπλέον πληροφορίες σχετικά με την ιστορία του μνημείου, τον ρόλο που

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


Για τη δημιουργία του διαδικτυακού τόπου χρησιμοποιήθηκε η γλώσσα προγραμματισμού PHP,

σε συνδυασμό με HTML και φύλλα στυλ CSS. Ο χάρτης υλοποιήθηκε χρησιμοποιώντας τη

Διεπαφή Προγραμματισμού Εφαρμογής (API) Google Maps. Το Google Maps API μας

πρόσφερε τη δυνατότητα να ενσωματώσουμε και να τροποποιήσουμε τον χάρτη της περιοχής

που μας ενδιέφερε και να του προσθέσουμε επιπλέον στρώματα (layers) πληροφορίας.

2. Μεθοδολογία

Οι μαθητές χωρίστηκαν σε δύο ομάδες. Η πρώτη ομάδα ανέλαβε την εύρεση πληροφοριών, τη

συλλογή φωτογραφιών και τη συγγραφή κειμένων σχετικά με τα μνημεία. Η δεύτερη ομάδα

ανέλαβε την κατασκευή του διαδικτυακού τόπου που θα φιλοξενούσε τις πληροφορίες για τα

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

Σχήμα 1 : Οι μαθητές χωρίστηκαν σε δύο ομάδες εργασίας

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

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

αποθηκευτούν στον Εξυπηρετητή (Server), σε περίπτωση που χρησιμοποιούσαμε στατικές

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

προγραμματισμού PHP, η οποία σε συνδυασμό με κωδικοποίηση HTML και φύλλα στυλ CSS θα

παρήγαγε το τελικό αρχείο ιστοσελίδας που θα αποστέλλονταν στον Πελάτη (Client).

Σχήμα 2 : Μοντελοποίηση και αναπαράσταση του τρόπου λειτουργίας του Διαδικτυακού τόπου

που φιλοξενεί τον Χάρτη και τις πληροφορίες των Μνημείων


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

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

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

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

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

διατίθεται δωρεάν προς χρήση (έστω και με μικρούς περιορισμούς) και δεύτερον, ο χάρτης που

θα επιλέγαμε, έπρεπε να διαθέτει ελεύθερο API, ώστε να μπορούμε να τον ενσωματώσουμε

πλήρως στον διαδικτυακό τόπο που θα ετοιμάζαμε. Καταλήξαμε σε τρεις επιλογές που κάλυπταν

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

(http://maps.yahoo.com/), η δεύτερη επιλογή ήταν οι χάρτες της Microsoft

(http://www.bing.com/maps/) και η τρίτη επιλογή ήταν οι χάρτες που προσφέρει η Google

(https://www.google.gr/maps). Καταλήξαμε να χρησιμοποιήσουμε τους χάρτες της Google, αφού

μας φάνηκε ότι είχαν μεγαλύτερη προσαρμοστικότητα και το προσφερόμενο API ήταν

περισσότερο εύκολο στη χρήση μέσα από τα κατατοπιστικότατα παραδείγματα που δίνονται από

την εταιρεία.

3. Υλοποίηση

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

έπρεπε να γίνουν, προχωρήσαμε στο επόμενο βήμα, στην υλοποίηση των παραπάνω σχεδίων.

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

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

Επειδή μια σελίδα PHP εκτελείται πρώτα στον Εξυπηρετητή και στέλνει το αποτέλεσμα

(συνήθως HTML) στον Φυλλομετρητή (Browser) για προβολή, χρειαζόμασταν οπωσδήποτε έναν

Εξυπηρετητή για να δοκιμάζουμε τα αρχεία PHP που θα γράφαμε. Για το σκοπό αυτό

κατεβάσαμε και εγκαταστήσαμε σε έναν υπολογιστή του εργαστηρίου το λογισμικό XAMPP. Το

XAMPP είναι ένα πακέτο προγραμμάτων ελεύθερου λογισμικού, λογισμικού ανοικτού κώδικα

και ανεξαρτήτου πλατφόρμας το οποίο περιέχει τον εξυπηρετητή ιστοσελίδων http Apache, τη

βάση δεδομένων MySQL και ένα διερμηνέα για κώδικα γραμμένο σε γλώσσες προγραμματισμού

PHP και Perl. Έχοντας εγκαταστήσει το XAMPP σχεδιάσαμε σε χαρτί το γραφικό περιβάλλον

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

καταλήξαμε στο προσχέδιο της διεπαφής που φαίνεται στο Σχήμα 3 και ξεκινήσαμε τον

προγραμματισμό.

Σχήμα 3 : Προσχέδιο του γραφικού περιβάλλοντος διεπαφής χρήστη.

Ξεκινήσαμε τον προγραμματισμό από την αρχική ιστοσελίδα (index.php), όπου το στοιχείο που

κυριαρχεί είναι ο Χάρτης με τα μνημεία της Θεσσαλονίκης. Στο σημείο αυτό έπρεπε

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

τους Google Maps. Η λέξη API προέρχεται από τα αρχικά των λέξεων Application Programming

Interface, ή στα ελληνικά Διεπαφή Προγραμματισμού Εφαρμογών ή εν συντομία Διεπαφή. Η


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

του οποίου αυτά τα δύο συστήματα επικοινωνούν. Το API στην πραγματικότητα είναι ένας

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

μεταξύ τους επικοινωνία. Το API για τους Google Maps επομένως έχει υλοποιηθεί από την

Google, ώστε να επιτρέπει σε άλλα λογισμικά (στην προκειμένη περίπτωση την ιστοσελίδα μας)

να επικοινωνούν με αυτό.

Σχήμα 4 : Απλοποιημένη αναπαράσταση του τρόπου λειτουργίας του Google API

Βρήκαμε πολύ κατανοητά, μελετήσαμε και εφαρμόσαμε βήμα προς βήμα τα παραδείγματα που

προσφέρει η Google στη σελίδα https://developers.google.com αλλά και τη σειρά μαθημάτων

που προσφέρει το W3Schools στη σελίδα http://www.w3schools.com/googleAPI. Στο σημείο

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

κατάλληλων "πινέζων" επάνω στο Χάρτη για την επισήμανση των μνημείων. Ήταν απαραίτητο

να βρούμε τις ακριβείς συντεταγμένες (Latitude και Longitude) των μνημείων, ώστε να

τοποθετήσουμε τις "πινέζες" με το Google Maps API. Γι αυτό το σκοπό χρησιμοποιήσαμε τη

λειτουργία που προσφέρεται στο Google Maps (απλώς πατάς σε οποιοδήποτε σημείο του χάρτη),

αλλά και το εύχρηστο εργαλείο που προσφέρεται στη διεύθυνση

http://itouchmap.com/latlong.html. Μετά από τις παραπάνω ενέργειες έγινε η καλλιτεχνική

επιμέλεια της σελίδας χρησιμοποιώντας φύλλα στυλ CSS ώστε η αρχική σελίδα να πάρει την

τελική της μορφή, όπως φαίνεται στο Σχήμα 5.

Σχήμα 5 : Διακρίνεται η αρχική σελίδα του διαδικτυακού τόπου καθώς και

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

https://developers.google.com/

http://www.w3schools.com/googleAPI

http://itouchmap.com/latlong.html


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

θα προβάλλονταν η ιστορία, μια σύντομη περιγραφή καθώς και φωτογραφίες των μνημείων. Η

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

μνημείου στο χάρτη. Κανονικά θα έπρεπε να κατασκευαστούν 15 τέτοιες σελίδες με την ίδια

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

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

της. Προστέθηκαν τα κείμενα, έγιναν οι απαραίτητες συνδέσεις με τις φωτογραφίες που έβγαλαν

οι συμμαθητές μας της Α Ομάδας και το αποτέλεσμα φαίνεται στο Σχήμα 6. Για την καλύτερη

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

τους, όπως φαίνεται στο Σχήμα 7.

Σχήμα 6 : Στα δεξιά παράδειγμα δεύτερης σελίδας με λεπτομέρειες και φωτογραφίες για το

μνημείο της Ροτόντας. Αριστερά φαίνεται ο σύνδεσμος, ο οποίος πατήθηκε για να ανοίξει η

σελίδα.

Σχήμα 7 : Χρησιμοποιώντας τη λειτουργία της μεγέθυνσης, ο χρήστης έχει

τη δυνατότητα να ανοίξει τη φωτογραφία σε μεγαλύτερο παράθυρο.


Με την ολοκλήρωση του προγραμματισμού και, αφού βεβαιωθήκαμε ότι όλα δουλεύουν, όπως

θα έπρεπε, ανεβάσαμε τον διαδικτυακό τόπο στη διεύθυνση http://www.hellenic-

college.gr/works/unesco-monuments/

Ευχαριστίες

Ευχαριστούμε ιδιαίτερα τη Διεύθυνση του Ελληνικού Κολλεγίου Θεσσαλονίκης για τη φιλοξενία

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

στον καθηγητή Πληροφορικής του σχολείου κ. Κωνσταντίνο Παρασκευόπουλο, αλλά και στις

Φιλολόγους κ. Α.Παραθυρά και Β.Κοντογώγου χωρίς τις υποδείξεις και την καθοδήγηση των

οποίων δεν θα ήταν εφικτή η υλοποίηση αυτής της εργασίας,.

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

1. Willard, Wendy, “Οδηγός της HTML-Τα πάντα για τους αρχάριους προγραμματιστές”,

Γκιούρδας Μ. (2008).

2. Melonie, Julie C., “Μάθετε την HTML και CSS σε 24 ώρες”, Γκιούρδας Μ. (2010)

3. David,Sklar, Adam,Trachtenberg, “PHP Cookbook”, O'Reilly Media, Inc, US (2002)

4. http://www.w3schools.com/googleAPI/, Google Maps API Tutorial, ανακτήθηκε στις

2/12/2013

5. https://developers.google.com, Google Maps JavaScript API v3, ανακτήθηκε στις 2/12/2013

http://www.hellenic-college.gr/works/unesco-monuments/

http://www.hellenic-college.gr/works/unesco-monuments/

Χάρτης με μνημεία της UNESCO στη Θεσσαλονίκη

Documents

Transcript of Χάρτης με μνημεία της UNESCO στη Θεσσαλονίκη