∆ιαδικτυακός τόπος: Ταξίδι στη Β. Ιταλία και Σλοβενία – Μνηµεία Παγκό

∆ιαδικτυακός τόπος: Ταξίδι στη Β. Ιταλία και Σλοβενία – Μνηµεία
Παγκόσµιας Πολιτιστικής Κληρονοµιάς της UNESCO
Tσιρικίδης Πρόδροµος
Μαθητής Α Τάξης, ΓΕΛ Πεύκων
[email protected]
Μιχαήλ Σταυρούλα – ΠΕ19
[email protected]
Περίληψη
Η εργασία αυτή υλοποιήθηκε στο πλαίσιο διαθεµατικής συνεργασίας του µαθήµατος επιλογής της Α’ Λυκείου
«Εφαρµογές Πληροφορικής» και των πολιτιστικών προγραµµάτων «Μνηµεία Παγκόσµιας Πολιτιστικής
Κληρονοµιάς της UNESCO στη Βόρεια Ιταλία και Σλοβενία και η σχέση τους µε την Ελλάδα» και «Ιστορικές
πόλεις της Β. Ιταλίας και της Σλοβενίας µέσα από τη ζωγραφική και τη φωτογραφία και η σχέση τους µε την
Ελλάδα». Για την υλοποίηση του διαδικτυακού τόπου χρησιµοποιήθηκε HTML5, λογισµικό επεξεργασίας
γραφικών (Photoshop) για τη δηµιουργία του διαδραστικού χάρτη (image-map) µε τα σηµεία ενδιαφέροντος,
καθώς και το λογισµικό Visual Slideshow για τη δηµιουργία ψηφιακού άλµπουµ.
Λέξεις κλειδιά: Προγραµµατισµός, Html, image-map.
1.Εισαγωγή
Ο διαδικτυακός τόπος «Ταξίδι στη Β. Ιταλία και Σλοβενία – Μνηµεία Παγκόσµιας Πολιτιστικής Κληρονοµιάς
της UNESCO» προέκυψε από τη διαθεµατική συνεργασία του µαθήµατος «Εφαρµογές Πληροφορικής»
της Α Λυκείου και των δύο πολιτιστικών προγραµµάτων «Μνηµεία Παγκόσµιας Πολιτιστικής
Κληρονοµιάς της UNESCO στη Βόρεια Ιταλία και Σλοβενία και η σχέση τους µε την Ελλάδα» και «Ιστορικές
πόλεις της Β. Ιταλίας και της Σλοβενίας µέσα από τη ζωγραφική και τη φωτογραφία και η σχέση τους µε την
Ελλάδα» και αποτελεί ένα εικονικό ταξίδι µε φωτογραφικό υλικό και κείµενα για την ιστορία και τον
πολιτισµό της περιοχής. Εργαλείο συγγραφής κώδικα σε HTML, επεξεργασίας γραφικών και
δηµιουργία ψηφιακού άλµπουµ συνδυάστηκαν µε σκοπό τη δηµιουργία του συγκεκριµένου
ιστότοπου.
2.Προγραµµατισµός µε HTML
Η HTML (HyperText Markup Language) είναι η κύρια γλώσσα σήµανσης για τις ιστοσελίδες και ουσιαστικά
τα στοιχεία της αποτελούν και τα βασικά δοµικά στοιχεία των ιστοσελίδων. Αυτός είναι και ο λόγος για τον
οποίο η ΗTML επιλέχθηκε ως βασικό εργαλείο στην ανάπτυξη της παρούσας εργασίας. Κάθε πλοηγός
(browser) είναι σε θέση να διαβάσει και να ερµηνεύσει το περιεχόµενο της σελίδας. Η HTML διαφέρει
σηµαντικά από µία κλασσική γλώσσα προγραµµατισµού, µιας και δεν απαιτείται να ακολουθηθεί κάποιος
αυστηρός αλγόριθµος για την επίτευξη του αποτελέσµατος. Παρέχει τις µεθόδους δηµιουργίας δοµηµένων
εγγράφων καθορίζοντας δοµικά σηµαντικά στοιχεία για το κείµενο, όπως κεφαλίδες, παραγράφους, λίστες,
συνδέσµους, όπως επίσης εµπλουτισµό σε γραφικά, ήχους και βίντεο.
Μπορούν επίσης να ενσωµατώνονται σενάρια εντολών σε γλώσσες όπως η JavaScript, τα οποία επηρεάζουν τη
συµπεριφορά των ιστοσελίδων HTML. Επιπλέον, µπορούν να χρησιµοποιηθούν υποστηριχτικά αρχεία CSS
(Cascading Style Sheets) στα οποία περιγράφεται µία σειρά στοιχείων που αφορούν την εµφάνιση και το στιλ
1
των χαρακτηριστικών της ιστοσελίδας, όπως τα µεγέθη και το στιλ των γραµµατοσειρών, τα χρώµατα, η
στοίχιση, εφέ κλπ.
3.Ο Ιστότοπος «Ταξίδι στη Β. Ιταλία και Σλοβενία – Μνηµεία Παγκόσµιας Πολιτιστικής Κληρονοµιάς της
UNESCO»
Μετά την ολοκλήρωση της συγγραφής των κειµένων και τη συλλογή των φωτογραφιών από την οµάδα των
µαθητών και µαθητριών που συµµετέχουν στα πολιτιστικά προγράµµατα που αναφέρθηκαν παραπάνω,
ορίστηκαν οι ενότητες που θα κάλυπτε η ιστοσελίδα. Στη συνέχεια επιλέχθηκε µετά από αναζήτηση σε
βιβλιοθήκες θεµάτων HTML5 ανοικτού κώδικα, κατάλληλο πρότυπο (HTML5 Template) και έγινε η
προσαρµογή του υλικού µε τις απαιτούµενες τροποποιήσεις. Τέλος, επιλέχθηκαν τεχνικές οι οποίες κρίθηκαν
καταλληλότερες, από τη µία να προβάλουν όσο πιο ολοκληρωµένα το υλικό και από την άλλη να αξιοποιηθούν
όσο το δυνατόν καλύτερα τα προσφερόµενα ηλεκτρονικά εργαλεία και ενσωµατώθηκαν στην ιστοσελίδα.
Εικόνα 1 - Αρχική σελίδα
4.∆ιαδραστικός χάρτης
Ο διαδραστικός χάρτης (image map) δίνει τη δυνατότητα στο χρήστη να µεταβεί κατευθείαν από τα
προκαθορισµένα µε διαφορετικό χρώµα σηµεία (Βενετία, Βερόνα, Γένοβα, Φεράρα, Ραβέννα, Λουµπλιάνα),
στην αντίστοιχη σελίδα µε τις σχετικές πληροφορίες για την πόλη. Για να γίνει ο χάρτης χρησιµοποιήθηκε το
λογισµικό Photoshop.
2
Εικόνα 2 - ∆ιαδραστικός Χάρτης
Για να δηµιουργήσουµε το διαδραστικό χάρτη χρησιµοποιούµε το εργαλείο Sice Tool. Με µία επιλογή
ορίζεται κάθε φορά η περιοχή (Εικόνα 3.2) η οποίο θα ενεργοποιηθεί ως θερµή περιοχή (hot spot). Στη
συνέχεια µε δεξί κλικ ορίζουµε τις ιδιότητες για κάθε slice όπως Νame, Url, Target, Message Text, Alt Tag
(Εικόνα 3.3)
3.1 Αρχική εικόνα
3.2 Επιλογή περιοχής µε το Slice tool
3.3 Επιλογές Slice
5.Οι πόλεις του χάρτη
Πέρα από το διαδραστικό χάρτη από τον οποίο µπορεί να µεταβεί κανείς κατευθείαν στην πόλη ενδιαφέροντός
του, µπορεί να το κάνει εναλλακτικά και από την αρχική σελίδα. Στη σελίδα κάθε πόλης παρουσιάζονται
κείµενα και φωτογραφίες που αφορούν την ιστορία, τα αξιοθέατα και πιθανά σηµεία ενδιαφέροντος που
µπορεί να συναντήσει ένας ταξιδιώτης. Όλη η µορφοποίηση κειµένων και γραφικών έχει υλοποιηθεί µε
HTML 5 µε τη χρήση του απλού κειµενογράφου Notepad++.
Παράδειγµα «ΒΕΝΕΤΙΑ» (Εικόνα 4.1)
3
Εικόνα 4.1 – Σελίδα "ΒΕΝΕΤΙΑ"
Εικόνα 4.1 –Μέρος από τον κώδικα
6. ∆ηµιουργία του ψηφιακού άλµπουµ - Slide Show
Το πρόγραµµα που χρησιµοποιήθηκε για να δηµιουργηθεί το ψηφιακό άλµπουµ είναι το Visual SlideShow.
Πρόκειται για ένα δωρεάν λογισµικό το οποίο διατίθεται στο διαδίκτυο και προσφέρει τη δυνατότητα
εναλλαγής εικόνων ή φωτογραφιών µε εφαρµογή διαφόρων εφέ (Εικόνα 5)
Εικόνα 5- Φωτογραφικό άλµπουµ - SlideShow
4
Η πρώτη ενέργεια στο λογισµικό Visual SlideShow είναι να επιλεγούν τα γραφικά τα οποία θα εµφανίζονται
στο slide show και στη συνέχεια επιλέγεται «Publish» (Εικόνα 6)
Εικόνα 6- Εισαγωγή γραφικών στο Visual SlideShow
Οι ιδιότητες που χαρακτηρίζουν
το άλµπουµ ορίζονται στην
καρτέλα
«Publish
gallery»
(Εικόνα 7)
Ιδιότητες:
− Πρότυπο
− Μέγεθος
− Ποιότητα
− Εφέ
− Ταχύτητα µετάβασης
− Χρονοκαθυστέρηση
− Κουµπιά ελέγχου
Εικόνα 7- Ρυθµίσεις παραµέτρων του SlideShow
5
7. Συµπεράσµατα από το «ταξίδι»
Το ταξίδι ήταν όµορφο και πολύ ενδιαφέρον. Το εισιτήριο για Β.Ιταλία και Σλοβενία µας προσέφερε
συναρπαστικά στοιχεία της ιστορίας και του πολιτισµού, καθώς και φυσικής οµορφιάς κάθε σηµείου
ενδιαφέροντος. Πιο πλούσιοι από ποτέ, πήραµε µια γεύση µέσω της ψηφιακής τεχνολογίας για πόλεις που
σήµερα αποτελούν κόσµηµα για όλο τον παγκόσµιο πολιτισµό και προστατεύονται από τον Παγκόσµιο
οργανισµό της UNESCO. Ανυποµονούµε να πραγµατοποιήσουµε την επίσκεψη της οµάδας των πολιτιστικών
προγραµµάτων στα µέρη αυτά και να δούµε από κοντά όλα όσα συναντήσαµε στο διαδίκτυο.
Από την άλλη το ταξίδι στη δηµιουργία ιστοσελίδων µε τη χρήση της HTML5 ήταν εξίσου µαγικό µιας και οι
σειρές κώδικα του απλού κειµενογράφου Notepad++, ερµηνεύονται από κάθε πλοηγό Internet σε κείµενα µε
ελκυστικά γραφικά και εντυπωσιακά εφέ. H ενασχόληση µε τη συγγραφή κώδικα σε HTML5 την οποία εµείς
θεωρούµε απαραίτητο εφόδιο στην ανάπτυξη ιστοσελίδων, αποτελεί ίσως το πιο ισχυρό εφόδιο για κάποιον
που επιθυµεί να ασχοληθεί µε τη δηµιουργία ιστοσελίδων, µιας και διευκολύνει σηµαντικά τη χρήση στις πιο
µοντέρνες πλατφόρµες όπως το Joomla ή το Wordpress.
8. Ευχαριστίες
Ευχαριστούµε όλα τα παιδιά των πολιτιστικών προγραµµάτων της Β.Ιταλίας και Σλοβενίας, που έδωσαν τα
κείµενα και το φωτογραφικό υλικό που συνέλεξαν για τις ανάγκες των προγραµµάτων, καθώς και τους
καθηγητές Αργυρόπουλο Παναγιώτη – ΠΕ02, Καραµπελιά Καλλιόπη– ΠΕ02, ∆εβετζή Ελευθερία– ΠΕ02 και
Τσελίκα Αναστασία– ΠΕ02 οι οποίοι οργάνωσαν αρχικά και στη συνέχεια επόπτευσαν και επιµελήθηκαν
υλικό.
9.Βιβλιογραφία
1. http://diveintohtml5.info/ - Οδηγός χρήσης HTML5
2.http://el.wikipedia.org/ - Ηλεκτρονική εγκυκλοπαίδεια
3. http://www.mediacollege.com/adobe/photoshop/tool/slice.html - Οδηγίες για το διαδραστικό χάρτη
4. http://www.tripadvisor.com.gr – Γενικός ταξιδιωτικός οδηγός
5.http://www.unesco-hellas.gr/gr/default.htm - Ελληνική Εθνική Επιτροπή για την UNESCO
6. http://unesco.org/ - Εκπαιδευτικός, Επιστηµονικός και Πολιτιστικός Οργανισµός των Ηνωµένων Εθνών
7. http://visualslideshow.com/ - Λογισµικό, οδηγίες, παραδείγµατα για δηµιουργία ψηφιακού άλµπουµ
8. http://www.w3schools.com/ - Οδηγός χρήσης HTML, CSS, JavaScript
9.http://www.wlearn.gr/index.php/home-css-83 - Οδηγός χρήσης CSS
6

Download Report