Δημιουργία Διαδικτυακής Μαθητικής Εγκυκλοπαίδειας...

4ο Μαθητικό Συνέδριο Πληροφορικής – Μάιος 2012

1

Δημιουργία Διαδικτυακής

Μαθητικής Εγκυκλοπαίδειας για την Τεχνολογία

Εμμανουήλ Τσάμης1, Εύα Ταουκτσή

2, Θεόδωρος Τανανάκης

3, Ιωάννα Κόντου-Φουντά

4,

Απόστολος-Στέφανος Ιωαννίδης5, Αθανάσιος-Αλέξανδρος Καδόγλου

6, Αιμίλιος Χασιώτης

7,

Αικατερίνη Αλεξιάδου8, Αθανάσιος Διμπινούδης

9, Μεταξία Ζουρώ

10, Αικατερίνη

Αλεξιάδου11

, Δήμητρα Βογιατζόγλου12

, Βασίλειος Χαραλαμπίδης13

, Μαρία-Ζωή Ζερβάκη14

,

Ζωή Βασιλικάρη15

, Γρηγόρης Γρεβεντόπουλος16

, Πολυξένη Κρετσόβαλη17

, Μάρθα

Κυριακίδου18

, Ελένη Τρυφωνίδου19

, Μαρία Μαυρίδου20

, Γεωργία Πολυχρονίδου21

,

Απόστολος Τσιολάκης22,

Φανή Πεκτεσίδου23

, Βασίλειος Κεραμιδάς24

, Ανδρέας Αρώνης25

,

Ερμιόνη Παράσχου26

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

[email protected]

Κωνσταντίνος Παρασκευόπουλος

Καθηγητής Πληροφορικής (ΠΕ19)

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

[email protected]

Περίληψη

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

εγκυκλοπαίδειας Wikipedia και 260 χρόνια από την έκδοση της Εγκυκλοπαίδειας

"Encyclopédie" των Ντιντερό και Νταλαμπέρ, ενός συλλογικού έργου για τη διάδοση της

γνώσης και των ιδεών του διαφωτισμού. Με αφορμή αυτές τις επετείους και με σκοπό την

ευαισθητοποίηση των μαθητών σε θέματα εγκυκλοπαιδισμού, ομάδα μαθητών της ΄Β Γυμνασίου

του Ελληνικού Κολλεγίου Θεσσαλονίκης, σχεδίασαν, υλοποίησαν, και εμπλούτισαν μια

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

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

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

έγραψε όλο τον απαραίτητα κώδικα συνδυάζοντας τεχνολογίες όπως HTML, CSS και PHP. Η

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

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


2

διαδικτυακό τόπο του Ελληνικού Κολλεγίου Θεσσαλονίκης παρέχοντας ελεύθερη πρόσβαση σε

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

Λέξεις κλειδιά: διαδικτυακή εγκυκλοπαίδεια HTML, PHP

1. Εισαγωγή

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

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

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

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

βιβλιοθήκη απαιτεί πολλαπλές ικανότητες και αρκετό χρόνο διαθέσιμο. Η αποτελεσματική

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

πληροφοριών, αξιολόγηση της αξίας της πληροφορίας και κατόπιν οργάνωση της πληροφορίας,

ώστε να καταστεί άμεσα χρησιμοποιήσιμη. Η δημιουργία της δικής μας διαδικτυακής

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

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

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

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

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

χρόνο και αυξάνοντας το ενδιαφέρον μας για επιμέρους θέματα.

2. Ο σχεδιασμός

Πριν να ξεκινήσουμε την υλοποίηση της διαδικτυακής εγκυκλοπαίδειας χωριστήκαμε σε δύο

ομάδες την ομάδα της σχεδίασης και προγραμματισμού, και την ομάδα συγγραφής. Η πρώτη

ομάδα, όπως άλλωστε διατυμπανίζει η ονομασία της, θα ασχολούνταν με τη σχεδίαση του

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

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

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

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

Μετά τον πρώτο διαχωρισμό αρμοδιοτήτων, οι δύο ομάδες σήκωσαν τα μανίκια και έπιασαν

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

διεκπεραιώσει αλλά γρήγορα κατάλαβε ότι έχει να αντιμετωπίσει ένα αρκετά δύσκολο έργο

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

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

εγκυκλοπαίδειας σε θεματικές ενότητες, θεωρώντας ότι η ταξινόμηση θα έκανε πιο εύκολη την


3

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

δημιουργήθηκαν για την εγκυκλοπαίδεια φαίνονται στον Πίνακα 1.

Πίνακας 1: Οι κύριες θεματικές Ενότητες της Εγκυκλοπαίδειας

α/α Τίτλος α/α Τίτλος

1. Μεταφορές 5. Καθημερινή ζωή

2. Ενέργεια 6. Ιατρική

3. Επικοινωνίες 7. Κατασκευές

4. Υπολογισμοί 8. Πόλεμος

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

εξειδικευμένες υποενότητες. Για παράδειγμα για τη θεματική ενότητα Μεταφορές

δημιουργήθηκαν οι υποενότητες: "Στην Ξηρά", "Στη Θάλασσα"," Στον Αέρα", "Στο Διάστημα".

Το σύνολο των υποενοτήτων παρουσιάζεται στον Πίνακα 2.

Πίνακας 2: Οι θεματικές Ενότητες χωρίστηκαν σε υποενότητες

α/α Θεματική Ενότητα α/α Υποενότητα

1. Μεταφορές

1.1. Στην Ξηρά

1.2. Στη Θάλασσα

1.3. Στον Αέρα

1.4. Στο Διάστημα

2. Ενέργεια

2.1. Παραγωγή

2.2. Αποθήκευση

2.3. Διανομή

2.4. Κατανάλωση

3. Επικοινωνίες

3.1. Τεχνολογίες Γραφής

3.2. Τεχνολογίες Ήχου

3.3. Τεχνολογίες Εικόνας

3.4. Τηλεπικοινωνίες

4. Υπολογισμοί

4.1. Μετρήσεις

4.2. Υπολογιστές

4.3. Πυξίδες και Προσανατολισμός

5. Καθημερινή ζωή

5.1. Η Τροφή

5.2. Το Παιχνίδι


4

5.3. Η Θέρμανση

5.4. Γυαλί και Πλαστικό

5.5. Η Μουσική

5.6. Καθαριότητα

5.7. Διάφορα

6. Ιατρική

6.1. Διάγνωση

6.2. Θεραπεία

7. Κατασκευές

7.1. Υλικά

7.2. Κτήρια

7.3. Γέφυρες

7.4. Ναοί

7.5. Μνημεία

8. Πόλεμος

8.1 Άμυνα

8.2 Επίθεση

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

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

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

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

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

τον τίτλο της εγκυκλοπαίδειας και ακριβώς από κάτω να διαθέτει ένα οριζόντιο μενού το οποίο

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

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

ομάδες υποενοτήτων όπως περιγράφηκε ήδη στον Πίνακα 2. Κάθε Λήμμα θα διέθετε τη δική του

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

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

στην Εικόνα 1, και στη συνέχεια ξεκίνησε η δημιουργία του διαδικτυακού τόπου.


5

Εικόνα 1: Προσχέδια των βασικών ενοτήτων της Εγκυκλοπαίδειας.

3. Η Υλοποίηση

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

σήμανσης υπερκειμένου HTML (Hypertext Markup Language). Πολύ συχνή είναι η χρήση

φύλλων στυλ σε συνδυασμό με την HTML. Τα φύλλα στυλ είναι γραμμένα στη γλώσσα CSS,

εφαρμόζονται στον κώδικα HTML και δίνουν την τελική μορφή στην ιστοσελίδα. Τα φύλλα

στυλ μαζί με τα έγγραφα HTML βρίσκονται αποθηκευμένα σε διακομίστες (servers) ως

αυτόνομα αρχεία τα οποία αποστέλλονται στους πελάτες-σελιδομετρητές (clents-browsers) όταν

αυτοί τα αιτούνται. Είναι δυνατόν όμως το έγγραφο HTML να μην αποτελεί αυτόνομο αρχείο

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

γραμμένο στην γλώσσα προγραμματισμού PHP. Με αυτό τον τρόπο δημιουργείται δυναμικό

περιεχόμενο το οποίο αλλάζει ανάλογα με την αλληλεπίδραση του χρήστη. Η ομάδα

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

τεχνολογίες. Δημιούργησε λοιπόν ένα πρόγραμμα PHP το οποίο τρέχει στον διακομιστή κάθε

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

πρόγραμμα δημιουργεί δυναμικά τον απαραίτητο κώδικα HTML τον οποίο στέλνει στον πελάτη

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

που δημιουργεί τα τμήματα των σελίδων που παραμένουν ίδια σε όλες τις ενότητες του site δεν

χρειάζεται να επαναλαμβάνεται, ο κώδικας παραμένει καλύτερα δομημένος, ενώ η συντήρησή

του γίνεται ευκολότερα.

Για τη συγγραφή του κώδικα HTML, CSS και PHP χρησιμοποιήθηκε ο HTML editor HTML-

Kit. Στήθηκε επίσης σε έναν υπολογιστή και τοπικός διακομιστής (web-server) για να

μπορέσουμε να δοκιμάσουμε τον κώδικα PHP που γράψαμε. Ο διακομιστής που επιλέξαμε ήταν

ο Apache τον οποίο τον εγκαταστήσαμε χρησιμοποιώντας το εργαλείο εγκατάστασης XAMPP.

Μενού Θεματικών Ενοτήτων

Τίτλος

Εγκυκλοπαίδειας

Γεν

ικό

Κεί

μενο

σχετ

ικά

με τ

ην τ

εχνο

λογί

α

Πλα

ίσια

με

προ

τάσε

ις

λημμ

άτω

ν γι

α δι

άβασ

μα

Προσχέδιο της

Αρχικής Σελίδας


Τίτλος


Υποενότητα 1 Υποενότητα 2

Προσχέδιο σελίδας

Θεματικής Ενότητας

Υποενότητα 3 Υποενότητα 4


Τίτλος


Λήμμα 1

Προσχέδιο σελίδας

λήμματος


6

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

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

Κάθε λήμμα είναι αποθηκευμένο στο δικό του φάκελο στον οποίο τοποθετούμε και όλες τις

απαραίτητες εικόνες (αν υπάρχουν).

Παρακάτω στην Εικόνα 2 φαίνεται η Αρχική σελίδα της εγκυκλοπαίδειας όπου μπορείτε να

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

Εικόνα 3, φαίνεται η σελίδα με τις υποενότητες της θεματικής ενότητας Μεταφορές, ενώ στην

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

Εικόνα 2: Η αρχική σελίδα της Εγκυκλοπαίδειας μετά την ολοκλήρωσή της.

Εικόνα 3: Υποενότητες της θεματικής ενότητας Μεταφορές.


7

Εικόνα 4: Παράδειγμα σελίδας λήμματος.

Ευχαριστίες

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

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

ευχαριστώ στους καθηγητές, χωρίς τις υποδείξεις και την καθοδήγηση των οποίων δεν θα ήταν

εφικτή η υλοποίηση αυτής της εργασίας.

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

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

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

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

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


8


9


10


11


12


13


14


15


16


17


18


19


20


21


22


23


24


25


26

Δημιουργία Διαδικτυακής Μαθητικής Εγκυκλοπαίδειας...

Documents

Transcript of Δημιουργία Διαδικτυακής Μαθητικής Εγκυκλοπαίδειας...