ΕΦΑΡΜΟΓΕΣ ΔΙΑΔΙΚΤΥΟΥ ΓΙΑ ΚΟΙΝΩΝΙΚΗ ΚΑΙ ΨΥΧΟΛΟΓΙΚΗ ΥΠΟΣΤΗΡΙΞΗ ΦΟΙΤΗΤΙΚΩΝ ΠΛΗΘΥΣΜΩΝ

Transcript

1 Καμαράκης Χριστόδουλος Παπαγεωργίου Αλέξανδρος ΔΙΠΛΩΜΑΤΙΚΗ ΕΡΓΑΣΙΑ ΕΦΑΡΜΟΓΕΣ ΔΙΑΔΙΚΤΥΟΥ ΓΙΑ ΚΟΙΝΩΝΙΚΗ ΚΑΙ ΨΥΧΟΛΟΓΙΚΗ ΥΠΟΣΤΗΡΙΞΗ ΦΟΙΤΗΤΙΚΩΝ ΠΛΗΘΥΣΜΩΝ Η ΠΕΡΙΠΤΩΣΗ ΤΟΥ Α.Π.Θ. Επιβλέπων: Επίκουρος Καθηγητής Δημάκης Χρήστος

2 Περιεχόμενα Εισαγωγή 4 1 Διαδίκτυο και ψυχολογία Εισαγωγή Παρούσα Υλοποίηση Η Ιστοσελίδα Λειτουργίες Ιστοσελίδας Λειτουργικά και Σχεδιαστικά Λάθη και Σφάλματα Παρούσας Ιστοσελίδας 16 2 Σχεδίαση νέας ιστοσελίδας Απαιτήσεις εφαρμογής Δομή περιεχομένων και υλικού Έμφαση στην επικοινωνία Ρόλοι χρηστών 21 3 Περιγραφή προτεινόμενων εργαλείων Συστήματα διαχείρισης περιεχομένου Content Management System για ανανέωση υλικού κυρίως Ιστοσελίδας Το ΤYPO Template engine Extension engine 29 4 Υλοποίηση Interface Γενικά Σχεδίαση HTML και CSS Σχεδίαση με Templavoila 46 5 Τι ξεχωρίζει στο Frontend Forum Άμεση επικοινωνία μέσω Skype Chat Modern FAQ Ανακοινώσεις Αναζήτηση περιεχομένου 60 6 Εγχειρίδιο χρήσης Περιήγηση στο Backend του Typo Σύνταξη κειμένου Αλλαγή κυρίου μέρους της σελίδας Εισαγωγή νέας ανακοίνωσης Εισαγωγή νέων FAQ Διαχείριση Forum 77 7 Ομάδες και χρήστες Δημιουργία Backend ομάδων και χρηστών Backend ομάδες χρηστών Η δημιουργία της ομάδας Goldmembers H δημιουργία μελών της ομάδας Goldmembers 85 1

3 7.3 Frontend ομάδες χρηστών Η δημιουργία μελών της ομάδας Users 89 8 Επίλογος Προτάσεις για περεταίρω έρευνα 93 9 Βιβλιογραφία 94 2

4 ΕΙΣΑΓΩΓΗ Η ανάπτυξη της τεχνολογίας των υπολογιστών και της επιστήμης της πληροφορικής επέφεραν επαναστατικές αλλαγές στις μεθόδους πληροφόρησης. Μεταξύ άλλων δόθηκε η δυνατότητα για άμεση συμβουλευτική και ψυχολογική ενημέρωση με χρήση του διαδικτύου. Έρευνες έχουν δείξει ότι όλο και περισσότεροι φοιτητές χρησιμοποιούν το διαδίκτυο για την ενημέρωση τους, ακόμα και σε ευαίσθητα ψυχοκοινωνικά θέματα, γεγονός που αντανακλά το «δέσιμο» και την αυξημένη εξοικείωση των νέων με το συγκεκριμένο επικοινωνιακό εργαλείο, καθότι έτσι εξασφαλίζουν δύο κυρίαρχα στοιχεία της σημερινής κοινωνίας : ταχύτητα και ανωνυμία. Ήδη σε αρκετά πανεπιστήμια του εξωτερικού έχουν δημιουργηθεί σελίδες διαδικτυακής συμβουλευτικής που προσφέρουν αυτού του είδους την ενημέρωση προκειμένου να προστεθεί ακόμα στοιχείο, αυτό της εγκυρότητας. Σύμφωνα με το Αμερικάνικο Εθνικό Συμβούλιο Πιστοποιημένων Συμβούλων (NBCC), διαδικτυακή συμβουλευτική είναι η πρακτική επιστημονικής συμβουλευτικής και παροχής πληροφοριών που λαμβάνει χώρα όταν ο χρήστης χρησιμοποιεί το διαδίκτυο. Στη βιβλιογραφία χρησιμοποιούνται διαφορετικοί όροι για να περιγράψουν την διαδικτυακή συμβουλευτική, όπως, e-therapy, cyber therapy, cyber counselling, counselling. Διακρίνονται πέντε κυρίως μέθοδοι για τη διενέργεια διαδικτυακής συμβουλευτικής: μέσω ηλεκτρονικής αλληλογραφίας, διαδικτυακής κουβέντας ανταλλάσσοντας μηνύματα σε forum ή σε πραγματικό χρόνο(chat), καθοδηγούμενες συνομιλίες ομάδων, τηλεδιάσκεψη, μεταφορά φωνής μέσω Internet. Πρωταρχική σημασία για μία ιστοσελίδα διαδικτυακής συμβουλευτικής έχει ο σχεδιασμός και η οργάνωση των τεχνολογιών και των εργαλείων τα οποία θα χρησιμοποιηθούν έτσι ώστε ο χρήστης να μπορεί να παίρνει τις πληροφορίες που θέλει εύκολα και γρήγορα. Ταυτόχρονα θα πρέπει η διαχείριση της πληροφορίας της κυρίως σελίδας της να είναι ιδιαίτερα απλή καθότι αυτή θα γίνεται από άτομα που δεν 3

5 είναι ιδιαίτερα εξοικειωμένα με την τεχνολογία. Ενώ ένα ακόμη σημαντικό στοιχείο είναι και η ασφάλεια των προσωπικών δεδομένων που θα διακινούνται. Στο Α.Π.Θ. λειτουργεί ήδη από το 1997 η Επιτροπή Κοινωνικής Πολιτικής (ΕΚΠ) με αντικείμενό της την παροχή ψυχοκοινωνικών υπηρεσιών προς όλους τους φοιτητές του πανεπιστημίου, την ενδυνάμωση της εσωτερικής ζωής του πανεπιστημίου και τη σύνδεσή του με την ευρύτερη κοινωνία. Ωστόσο το προφίλ της περιορίζεται σε μία τηλεφωνική γραμμή και σε μία αδρανή ιστοσελίδα. Στην παρούσα διπλωματική εργασία, προσπαθήσαμε ν αναπτύξουμε μια διαδραστική ιστοσελίδα διαδικτυακής συμβουλευτικής στην οποία ο χρήστης θα μπορεί να πληροφορείται με ταχύτητα από το εξειδικευμένο προσωπικό της ΕΚΠ αλλά και από άλλους χρήστες, έτσι ώστε να εξασφαλίσουμε τη μέγιστη δυνατή αλληλεπίδραση με το προσωπικό της ΕΚΠ. νέου: Αναλυτικότερα, πάντα στα πλαίσια αυτής της διπλωματικής αναπτύχθηκαν εκ -Η κυρίως ιστοσελίδα της Επιτροπής Κοινωνικής Πολιτικής -Η αναδιοργάνωση του ίδιου του υλικού που θα περιλαμβάνεται στην κυρίως ιστοσελίδα Στο πρώτο μέρος της διπλωματικής εργασίας περιγράφεται η παρούσα υλοποίηση της επιτροπής κοινωνικής πολιτικής, καθώς και το υλικό που αποτελεί το περιεχόμενο της πλατφόρμας. Στο δεύτερο μέρος αναλύεται ο προτεινόμενος ανασχεδιασμός της ιστοσελίδας. Περιγράφονται επίσης, οι τεχνολογίες οι οποίες θα χρησιμοποιηθούν αλλά και οι λεπτομέρειες που μας οδήγησαν σε συγκεκριμένες αλλαγές στον τρόπο αλληλεπίδρασης με τον τελικό χρήστη. 4

6 Στην προσπάθεια ολοκλήρωσης της συγκεκριμένης διπλωματικής, πέρα από τους συγγραφείς, συνέβαλε καθοριστικά η διδακτική εμπειρία του Επίκουρου Καθηγητή κ. Δημάκη Χρήστου τον οποίο και θα θέλαμε να ευχαριστήσουμε θερμά για την ειλικρινή συνεργασία. Ο διάλογος μαζί του και η τριβή για μεγάλο χρονικό διάστημα πάνω στο αντικείμενο της διπλωματικής εργασίας, μας βοήθησε σημαντικά καθώς η αμέριστη υποστήριξη και βοήθεια που μας προσέφερε υπήρξε πολύτιμη. 5

7 1. Διαδίκτυο και Ψυχολογία 1.1 Εισαγωγή Οι επαγγελματίες στον τομέα της νοητικής υγείας ανά τον κόσμο, αναφέρουν ανά έτος μια αύξηση στον αριθμό των νέων που βρίσκονται κάτω από ψυχολογική πίεση. Η ομάδα της Επιτροπής Κοινωνικής Πολιτικής (Ε.Κ.Π.) ελπίζει να συμβάλλει στην ελαχιστοποίηση αυτού του στρες. Το διαδίκτυο σήμερα είναι το δημοφιλέστερο μέσο επικοινωνίας μεταξύ νέων. Είναι πλέον ένας μοντέρνος και σύγχρονος τρόπος για ψυχολογική βοήθεια και υποστήριξη. Είναι εύκολο, είναι λιγότερο στρεσογόνο, οικονομικό, εύκολα προσβάσιμο και κατάλληλο για όλους. Πλεονεκτήματα της βοήθειας μέσω διαδικτύου: Ομαδική υποστήριξη Γρήγορες απαντήσεις στα s σας Συναισθηματική άνεση Βοήθεια και καθοδήγηση από την άνεση του σπιτιού σας Ανωνυμία (κανένα προσωπικό στοιχείο δεν θα αποκαλυφθεί στην ιστοσελίδα) Δωρεάν ψυχολογική βοήθεια Σημαντικό είναι και το ζήτημα των ψυχολογικών παρεμβάσεων, οι οποίες αποτελούν ένα νέο τρόπο βοήθειας, υποστήριξης ή ακόμα και επίλυσης προβλημάτων ψυχικής υγείας. Η λειτουργία των παρεμβάσεων αυτών βασίζεται στις δυνατότητες που προσφέρει το διαδίκτυο ως μέσο τηλεπικοινωνίας, το οποίο υπερβαίνει το πρόβλημα του γεωγραφικού και χρονικού περιορισμού, ιδιαίτερα για τα άτομα που διαφορετικά δεν θα είχαν πρόσβαση στις υπηρεσίες αυτές. Οι παρεχόμενες αυτές υπηρεσίες ψυχικής υγείας μέσω του διαδικτύου παίρνουν διάφορες μορφές, από απλά ηλεκτρονικά μηνύματα ( ) έως και τηλεσυνδιαλλαγές (videoconference). Με δεδομένη την εξοικείωση των νέων με τη χρήση του διαδικτύου και την καταξίωση του, πλέον, ως το κύριο εργαλείο για την ενημέρωση και την επικοινωνία τους η ολοένα αυξανόμενη δύναμη και επιρροή του μέσου μπορεί να περιγραφεί από την άποψη της Turkle του MIT, η οποία θεωρεί ότι το Διαδίκτυο μπορεί να επιφέρει 6

8 αλλαγή στην ανθρώπινη σκέψη εφάμιλλη με αυτή που επέφερε η εφεύρεση της τυπογραφίας. Το γεγονός αυτό δε θα μπορούσε να διαφύγει τις αντίληψης μεγάλων οργανισμών αλλά και πανεπιστημίων, που ασχολούνται με θέματα ψυχολογίας, που θέλησαν να χρησιμοποιήσουν προς όφελος τους αυτή τη νέα <<δύναμη>>. Η αρχή έγινε από τις Ηνωμένες Πολιτείες, την Αγγλία και την Ιαπωνία και δεν αργήσουν το παράδειγμα τους και άλλες χώρες και κυρίως αυτές τις Ευρωπαϊκής ένωσης. Ασφαλώς, το Αριστοτέλειο Πανεπιστήμιο Θεσσαλονίκης (Α.Π.Θ.) δε θα μπορούσε να μείνει έξω από τις εξελίξεις και θέλησε μέσω της Ε.Κ.Π. να συμμετέχει σε αυτό το νέο ρεύμα δημιουργώντας έναν ιστότοπο. Όπως, σχεδόν κάθε πρώτη προσπάθεια για κάτι καινούριο, το αποτέλεσμα επιδέχεται αρκετές βελτιώσεις και για αυτό το λόγο στα πλαίσια αυτής της διπλωματικής εργασίας προβήκαμε στην υλοποίηση ενός νέου ιστότοπου. 7

9 1.2 Παρούσα Υλοποίηση Η Ιστοσελίδα Η ιστοσελίδα που βρίσκεται στη διεύθυνση αποτελεί το χώρο των χρηστών που θέλουν να είτε χρησιμοποιήσουν τις λειτουργίες της Ε.Κ.Π. είτε να ενημερωθούν για αυτές. Επιπλέον, αποτελεί το σημείο αναφοράς και του Κέντρο Συμβουλευτικής και Ψυχολογικής Υποστήριξης του Α.Π.Θ. (ΚΕ.ΣΥ.ΨΥ.) μίας υπηρεσίας που λειτουργεί από το 1999 με ευθύνη της Ε.Κ.Π. του Α.Π.Θ.. Στα πλαίσια της λειτουργίας της παρέχει δωρεάν υπηρεσίες συμβουλευτικής και ψυχολογικής υποστήριξης στους φοιτητές/φοιτήτριες του Α.Π.Θ. σε θέματα όπως: άγχος, στρες, δυσκολίες 8

10 προσαρμογής σε νέο περιβάλλον ή σε σπουδές, οικογενειακές/προσωπικές δυσκολίες, σεξουαλικά θέματα, ψυχοσωματικά προβλήματα, κ.ά Λειτουργίες Ιστοσελίδας Ο παρόν ιστότοπος λειτουργεί σαν ένας πίνακας ανακοινώσεων. Με άλλα λόγια οι λειτουργίες του είναι στατικές και απουσιάζουν τα δυναμικά στοιχεία και δυνατότητα άμεσης επικοινωνίας του χρήστη με την Ε.Κ.Π. μέσω του ιστότοπου. Ο χρήστης, αρχικά, μπορεί να πληροφορηθεί μέσω της ιστοσελίδας για τις ανακοινώσεις περί των δράσεων της Ε.Κ.Π. καθώς και να ενημερωθεί σχετικά με τους σκοπούς της δράσης της όσο και για τα κύρια μέλη που την απαρτίζουν. 9

11 10

12 Επιπλέον, αξίζει να σημειωθεί ότι ο ιστότοπος αυτός αποτελεί την ηλεκτρονική σύνδεση του ΚΕ.ΣΥ.ΨΥ. με τους φοιτητές. Το οποίο, όπως γίνεται κατανοητό από την παραπάνω περιγραφή της λειτουργίας του, διαχειρίζεται τόσο ευαίσθητα όσο και καίρια θέματα που απασχολούν τους φοιτητές. Η λειτουργία του εδώ όμως περιορίζεται μόνο στην παράθεση πληροφοριών επικοινωνίας με αυτό. 11

13 Ο παρόν ιστότοπος παρέχει ακόμα μία φόρμα ενημέρωσης που αφορά τους τομείς της δραστηριότητα της Ε.Κ.Π.. Παρέχει πληροφορίες σχετικά με τους Αλλοδαπούς,τα Α.Μ.Ε.Α., την δυνατότητα εθελοντικής δράσης αλλά και για τη λειτουργία της Τράπεζας Αίματος. 12

14 13

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

16 1.2.3 Λειτουργικά και Σχεδιαστικά Λάθη και Σφάλματα Παρούσας Ιστοσελίδας Τα μειονεκτήματα και οι ελλείψεις αυτής τις πρώτης απόπειρας γίνονται πολύ γρήγορα εμφανή μόλις κάποιος επισκεφθεί τον παρόν ιστότοπο. Παρουσιάζει σοβαρά λειτουργικά προβλήματα καθώς αρκετές σελίδες και links δεν εμφανίζονται ή δεν οδηγούν πουθενά ενώ κρίνεται αρκετά χρονοβόρα να η διαδικασία εντοπισμού μιας συγκεκριμένης πληροφορίας καθώς απουσιάζει η φόρμα αναζήτησης αλλά και ο τρόπος που παρέχονται οι πληροφορίες σε κάθε σελίδα δεν είναι ο ενδεδειγμένος. Θα μπορούσε να έχει προβλεφτεί η υλοποίηση μιας φόρμας αναζήτησης ώστε να είναι ποιό εύκολο για τον χρήστη να ανακτήσει τις πληροφορίες που αναζητά αλλά και μία δομή συχνών ερωτήσεων (Frequently Asked Questions FAQs). Μία τέτοια δομή θα μπορούσε να δίνει άμεσα και γρήγορα απαντήσεις σε ερωτήματα φοιτητών που τίθενται σε συχνή βάση. Ακόμη, η έλλειψη δυναμικών στοιχείων και αμφίδρομης επικοινωνίας καθιστούν τον ιστότοπο δυσκίνητο μη διαδραστικό. Κάτι τέτοιο θα μπορούσε να έχει αποφευχθεί αν στην υλοποίηση είχε προβλεφθεί η δημιουργία forum και chat ώστε οι χρήστες να αποκτήσουν ενεργό ρόλο στον ιστότοπο, να ανταλλάσουν απόψεις μεταξύ τους και να συνδιαλέγονται, αλλά και για online και άμεση επικοινωνία των φορέων της Ε.Κ.Π. με τους ίδιους τους φοιτητές Στα παραπάνω θα μπορούσε να συνεισφέρει και η χρήση μιας γραμμής skype ώστε να καθίσταται ευκολότερη η τηλεφωνική επικοινωνία αλλά και για να είναι δυνατή η χρήση τηλεσυνδιαλλαγών. Κάτι που θα μπορούσε να φανεί εξαιρετικά λειτουργικό και χρήσιμο ιδιαίτερα στο ΚΕ.ΣΥ.ΨΥ. όπως και συμβαίνει στα πανεπιστήμια του εξωτερικού για την αντιμετώπιση άμεσων ψυχολογικών προβλημάτων. Τέλος, το οριζόντιο πρότυπο (template) που έχει χρησιμοποιηθεί πέρα από την προχειρότητα που το διακρίνει δεν συγχρονίζεται με την αισθητική των σύγχρονων ιστότοπων αυτής της κατηγορίας των ιστοσελίδων. Επιπλέον, αδυνατεί να κεντρίσει το ενδιαφέρον του χρήστη και να τον διευκολύνει στην πλοήγηση του. 15

17 2. ΠΡΟΤΕΙΝΟΜΕΝΗ ΥΛΟΠΟΙΗΣΗ 2.1 Απαιτήσεις εφαρμογής -Ευκολία χρήσης λογισμικού Ο διαχειριστής της ιστοσελίδας πρέπει να έχει την ευχέρεια άμεσης ανανέωσης του υλικού. Η χρήση τεχνολογίας html και της συνεχούς προσθήκης/αφαίρεσης στοιχείων μέσω αλλαγής στον ίδιο των κώδικα της σελίδας ενέχει κινδύνους αλλοίωσης της ομοιομορφίας σχεδιασμού της ιστοσελίδας. Επιμέρους προβλήματα μπορεί να αποσπάσουν την προσοχή του χειριστή της σελίδας από την επεξεργασία της πληροφορίας καθαυτό και θα τον οδηγήσουν σε κατανάλωση πολύτιμου χρόνου σε μη σημαντικά θέματα για τη λειτουργία της ιστοσελίδας. Το λογισμικό που θα επιλεγεί πρέπει να περιέχει τη δυνατότητα απομόνωσης του σχεδιασμού της ιστοσελίδας από το ίδιο το υλικό, ώστε να διασφαλιστεί η ακεραιότητα της ίδιας της ιστοσελίδας. Το υλικό πρέπει να εισάγεται μέσω ειδικών εργαλείων που δεν θα απαιτούν από το χρήστη τη γνώση ανάπτυξης ιστοσελίδων, ενώ θα του προσφέρουν την ευκολία εισαγωγής υλικού μέσω ειδικού εργαλείου κειμένου (WYSIWYG - What You See Is What You Get). Πρόκειται για ένα ειδικά σχεδιασμένο εργαλείο επεξεργασίας κειμένου το οποίο προσομοιώνει την εμφάνιση μορφοποίησης του υλικού όπως θα εμφανίζεται στον τελικό χρήστη. Η χρήση του συγκεκριμένου εργαλείου γίνεται μέσω οποιουδήποτε browser, η λειτουργία του είναι ανάλογη οποιουδήποτε γνωστού επεξεργαστή κειμένου και δεν προϋποθέτει την εγκατάσταση από την πλευρά του χρήστη επιμέρους εφαρμογών στον υπολογιστή του. -Ανάγκη οριζόντιου προτύπου (template) Η έννοια του οριζόντιου template συνίσταται στην ύπαρξη αυτόνομου template που μπορεί να αλλάζει εύκολα και ανεξάρτητα από το περιεχόμενο. Με αυτόν τον τρόπο, εάν για οποιοδήποτε λόγο χρειαστεί να αλλαχτεί το design της ιστοσελίδας, μπορεί να γίνει χωρίς να πειραχτεί το υλικό παρά μόνο ο κώδικας του template. 16

18 -Πληρότητα παραμετροποίησης, δυνατότητα επέμβασης στον πηγαίο κώδικα. Το λογισμικό πρέπει να προσφέρει κατά το δυνατό το μέγιστο της παραμετροποίησης που μπορεί να απαιτηθεί από το προσωπικό της ΕΚΠ ή τον διαχειριστή του συστήματος χωρίς να επηρεάζει αυτό την ευκολία χρήσης του. Η επίλυση προβλημάτων και η αλλαγή παραμέτρων σε σύντομο χρονικό διάστημα είναι σημαντικός παράγοντας σε ένα περιβάλλον το οποίο πρόκειται να χρησιμοποιεί μεγάλος αριθμός χρηστών και πρέπει να λειτουργεί σε συνεχή βάση. Ο διαχειριστής και σχεδιαστής της ιστοσελίδας πρέπει επίσης να έχει τον απόλυτο έλεγχο της ιστοσελίδας που πρόκειται να χρησιμοποιηθεί χωρίς, κατά το δυνατό, περιορισμούς. Η δυνατότητα επέμβασης στον ίδιο τον κώδικα λειτουργίας του λογισμικού κρίνεται απαραίτητη, οπότε και περιορίζουμε την επιλογή του λογισμικού σε πακέτα που βασίζουν τη λειτουργία τους σε ευρέως χρησιμοποιούμενες και εύκολες σε χρήση γλώσσες προγραμματισμού. Η ποιότητα του χρησιμοποιούμενου από το λογισμικό κώδικα είναι επίσης σημαντικός παράγοντας για την απόδοση του συστήματος. Ένας σημαντικά κακογραμμένος κώδικας μπορεί να οδηγήσει σε σοβαρά προβλήματα λειτουργίας και ενδεχομένως ασφάλειας της ιστοσελίδας διαδικτυακής συμβουλευτικής. Συνεπώς, η δυνατότητα επέμβασης στον χρησιμοποιούμενο κώδικα από το διαχειριστή, μπορεί να προσφέρει άμεση παρέμβαση, περιορισμό, ή και λύση ακόμη, σε ενδεχόμενα προβλήματα ενός λογισμικού που πληρεί τις προϋποθέσεις ποιότητας κώδικα. -Ποιότητα παραγόμενου κώδικα. Τα αναφερόμενα στις προηγούμενες παραγράφους εργαλεία δημιουργούν δυναμικά τις στατικές ιστοσελίδες που θα ζητήσει ο τελικός χρήστης διαβάζοντας πληροφορίες συνήθως από μία βάση δεδομένων. Ο διαχειριστής και σχεδιαστής της ιστοσελίδας επιλέγει τον τρόπο εμφάνισης του υλικού και το ίδιο το λογισμικό αναλαμβάνει την παραγωγή της τελικής ιστοσελίδας μέσω χρήσης ειδικού κώδικά. Ο τελικός χρήστης θα λάβει μία στατική σελίδα χωρίς να τον αφορά η διαδικασία που προηγήθηκε. 17

19 Το λογισμικό που θα επιλεγεί πρέπει να παρέχει στον διαχειριστή/σχεδιαστή του διαδικτυακού τόπου, τη δυνατότητα παραμετροποίησης στις λειτουργίες παραγωγής της στατικής ιστοσελίδας, ενώ ο σχεδιαστής πρέπει να έχει τον απόλυτο έλεγχο στο σχεδιασμό της. Ο μη απόλυτος έλεγχος στο σχεδιασμό αλλά και στις λειτουργίες παραγωγής της ιστοσελίδας, μπορεί να οδηγήσει σε παράδοση κακού (μη λειτουργικού) κώδικα στον browser του τελικού χρήστη. Κακός κώδικας για έναν browser συνεπάγεται λάθος παρουσίαση του υλικού, αλλά και ενδεχόμενη μη σωστή λειτουργία του ίδιου του browser του χρήστη. Η παραγόμενη ιστοσελίδα πρέπει να πληρεί τα πρότυπα του φορέα W3C (World Wide Web Consortium) τα οποία και οφείλουν να χρησιμοποιούν όλοι οι browsers της αγοράς. -Απομακρυσμένη Διαχείριση Απαιτείται να υπάρχει δυνατότητα διαχείρισης της ιστοσελίδας μέσω εργαλείων browser και άμεση πρόσβαση στην ιστοσελίδα για ευκολότερη και αμεσότερη επιμέλεια του περιοδικού. Έτσι ο διαχειριστής μπορεί να αλλάζει ή να ανανεώνει το υλικό εύκολα χωρίς τη χρήση file transfering protocol (ftp) απλά μέσω του φυλλομετρητή που χρησιμοποιεί. -Χρήση από σημαντικό κομμάτι τις αγοράς. Η ευρεία χρήση του λογισμικού που θα επιλεχτεί, εξασφαλίζει τη δοκιμή των δυνατοτήτων του από μεγάλο αριθμό χρηστών, αλλά και τη σωστή και γρήγορη εξέλιξη αυτού. -Προσφερόμενη τεχνική υποστήριξη για το συγκεκριμένο λογισμικό. Η προσφερόμενη τεχνική υποστήριξη είναι σημαντική προϋπόθεση σε ένα σύστημα που πρόκειται να χρησιμοποιηθεί από πολλούς χρήστες και κρίνει την αξιοπιστία λειτουργίας του λογισμικού. Η επέμβαση του ίδιου του διαχειριστή στο λογισμικό μπορεί να επιλύσει άμεσα σημαντικά προβλήματα, αλλά επιπλέον πρέπει να έχει τη δυνατότητα εύκολης εύρεσης πληροφοριών αλλά και επικοινωνίας με τους ίδιους τους προγραμματιστές ανάπτυξης. 18

20 2.2 Δομή Περιεχομένων και υλικού Το περιεχόμενο ιεραρχείται και οργανώνεται στην ιστοσελίδα. Έχει μεγάλη σημασία για τη φύση της σελίδας, ο χρήστης να μπορεί να φτάνει γρήγορα στην πληροφορία που αναζητά, είναι άρα σημαντικό η δομή περιεχομένων να μην είναι δαιδαλώδης. Ήδη από αρχική σελίδα, που υποδέχεται τους χρήστες της επιτροπής κοινωνικής πολιτικής, θα πρέπει να υπάρχει μια γενική εποπτεία της ιστοσελίδας και να δίνονται πληροφορίες για τις εφαρμογές της ιστοσελίδας. Ενώ στις υποσελίδες η οργάνωση των πληροφοριών θα πρέπει να είναι τέτοια ώστε ο χρήστης να μην κουράζεται ή να δυσανασχετεί, όπως π.χ. μία δομή συχνών ερωτήσεων (Frequently Asked Questions FAQs). Μία τέτοια δομή θα μπορούσε να δίνει άμεσα και γρήγορα απαντήσεις σε ερωτήματα φοιτητών που τίθενται σε συχνή βάση. Παράλληλα ο χρήστης θα πρέπει να έχει δυνατότητα για αυτόματη αναζήτηση των περιεχομένων της ιστοσελίδας. 2.3 Έμφαση στην επικοινωνία Όπως έχουμε ήδη αναφέρει, σε μια σελίδα διαδικτυακής συμβουλευτικής κυρίαρχο ρόλο παίζει η αλληλεπίδραση του χρήστη με το διαχειριστή της σελίδας, αλλά και με άλλους χρήστες, μέλη της κοινότητας. Πρέπει να είναι εμφανή λοιπόν τα σημεία απ όπου ο χρήστης μπορεί να έρθει σε επαφή με το προσωπικό που διαχειρίζεται την ιστοσελίδα, έτσι καταλήγουμε σε ένα λιτό, γραφιστικά, περιβάλλον όπου τα σημεία αυτά θα ξεχωρίζουν από την αρχική κιόλας σελίδα. Επίσης ο χρήστης θα πρέπει να έχει πληθώρα επιλογών για επικοινωνία, κυρίως μέσω εφαρμογών του διαδικτύου, έτσι ώστε να επιλέγει αυτόν που ο ίδιος θεωρεί πιο κατάλληλο για τον ίδιο και για την περίσταση. 19

21 2.4 Ρόλοι Χρηστών Οι χρήστες χωρίζονται σε δύο κύριες κατηγορίες, τους διαχειριστές του και τους επισκέπτες της ιστοσελίδας. Οι διαχειριστές έχουν πρόσβαση στην ιστοσελίδα, μπορούν να ανανεώνουν και να προσθέτουν υλικό και να διαχειρίζονται τις διάφορες εφαρμογές. Προτιμάται να υπάρχει ένας κεντρικός διαχειριστής ο οποίος θα έχει την επιμέλεια των δικαιωμάτων και τον ρόλων, ο οποίος θα ορίζει και θα παραχωρεί τους ρόλους. Οι επισκέπτες της σελίδας μπορούν να περιηγηθούν στην ιστοσελίδα και να πάρουν μέρος στις διάφορες συζητήσεις αλλά φυσικά δεν έχουν κανένα δικαίωμα αλλαγής ή επέμβασης στο υλικό της σελίδας. Για να πάρουν δε μέρος στις συζητήσεις σε forum και chat θα πρέπει ν ακολουθήσουν μια διαδικασία εγγραφής. 20

22 3. ΠΕΡΙΓΡΑΦΗ ΠΡΟΤΕΙΝΟΜΕΝΩΝ ΕΡΓΑΛΕΙΩΝ 3.1 Συστήματα Διαχείρισης Περιεχομένου Η ιστοσελίδα διαδικτυακής συμβουλευτικής περιέχει πολλές πληροφορίες που συνεχώς ανανεώνονται και εμπλουτίζονται. Κατά το σχεδιασμό της νέας υλοποίησης έπρεπε να επιλέξουμε συγκεκριμένα πακέτα της οικογένειας Συστημάτων Διαχείρισης Περιεχομένου (ΣΔΠ) Content Management Systems (CMS), που είναι διαδικτυακές εφαρμογές που επιτρέπουν την online τροποποίηση του περιεχομένου ενός δικτυακού τόπου. Λειτουργούν δε σε ένα ευρύτερο πλαίσιο: Οι διαχειριστές μέσω του διαδικτύου ενημερώνουν το περιεχόμενο στο CMS, το οποίο είναι εγκατεστημένο σ' ένα διακομιστή. Οι αλλαγές αυτές γίνονται αυτόματα διαθέσιμες πάλι μέσω του διαδικτύου, σε όλους τους επισκέπτες και χρήστες του 21

23 δικτυακού τόπου. Υπάρχει πλήθος ελεύθερων CMS ανοικτού κώδικα, το καθένα με τα δικά του ιδιαίτερα χαρακτηριστικά. Μερικά από τα πιο γνωστά είναι το joomla, drupal αλλά και οι πιο απλοί μηχανισμοί ενημέρωσης περιεχομένου όπως το wordpress (ενημέρωση ιστολογίων) και τα sfm και phpbb (πίνακες συζητήσεων φόρουμ). Το κάθε CMS όμως απευθύνεται σε συγκεκριμένες ομάδες χρηστών και έχει τα δικά του «δυνατά» και «αδύνατα» σημεία. Η ανάπτυξη των CMS το τελευταίο διάστημα είναι μεγάλη, και αυτό έχει ως αποτέλεσμα να χρησιμοποιούνται (εκτός από το ως μηχανισμοί ενημέρωσης δικτυακών τόπων) ως πλαίσια γρήγορης ανάπτυξης εφαρμογών (RAD Rapid Application Development). Μερικά από τα πλεονεκτήματα πακέτων λογισμικού όπως είναι τα CMS περιλαμβάνουν: Αποκεντρωμένη Διαχείριση Συνήθως βασίζεται σε ένα κοινό φυλλομετρητή. Μπορείς να αλλάξεις ή να ανανεώσεις το υλικό σου από οπουδήποτε, οποτεδήποτε. Σχεδιασμός φιλικός προς μη προγραμματιστές Γνώση απλού επεξεργαστή κειμένου αρκεί για να μπορέσει κανείς να ανανεώσει ή να αλλάξει το υλικό της ιστοσελίδας του. Δεν χρειάζονται ούτε προγραμματιστικές ικανότητες ούτε γνώση HTML. Δυνατότητα διαμοίρασης ρόλων χρηστών Οι χρήστες που έρχονται σε επαφή με την ιστοσελίδα αναλαμβάνουν ένα ρόλο με περιορισμένα δικαιώματα διασφαλίζοντας έτσι την ασφάλεια και την ακεραιότητα των δεδομένων και του υλικού που είναι καταχωρημένο στην ιστοσελίδα. 22

24 Ενιαίο design Καθώς το περιεχόμενο αποθηκεύεται ανεξάρτητα από το design, το υλικό διαφορετικών διαχειριστών εμφανίζεται υπό ενιαίο γραφιστικό σχέδιο. Ύπαρξη Βάσης Δεδομένων Κεντρική Αποθήκευση δεδομένων σημαίνει ότι το υλικό μπορεί να χρησιμοποιηθεί σε πολλά σημεία της ιστοσελίδας αλλά και να φορμαριστεί για διάφορες εφαρμογές. Δυναμικό Περιεχόμενο Επεκτάσεις σε μια Ιστοσελίδα όπως χώροι συζητήσεων, κάλπες ψηφοφορίας, καλάθια αγορών, μηχανές αναζήτησης, διαχείριση ειδήσεων είναι συνήθως drop in modules. Ένα καλό CMS επίσης επιτρέπει στο χρήστη να αναπτύξει τα δικά του extentions που υπηρετούν τις ανάγκες του. Καθημερινές ανανεώσεις Δεν χρειάζεται πλέον να απασχολείται ένας προγραμματιστής για την παραμικρή αλλαγή που θα χρειαστεί να γίνει. Οι αλλαγές μπορούν να πραγματοποιηθούν γρήγορα και απλά, ακολουθώντας εύκολες οδηγίες ή εκπαιδεύοντας τους χρήστες χωρίς την απαίτηση προγραμματιστικών γνώσεων. 23

25 3.2 Content Management System (CMS) για ανανέωση υλικού κυρίως Ιστοσελίδας Η επιλογή συγκεκριμένου Content Management System για την ανανέωση υλικού της κεντρικής ιστοσελίδας έγινε μεταξύ των παρακάτω πακέτων λογισμικού: Λογισμικό Mambo Version source.mambo-foundation.org Περιγραφή λογισμικού Το πακέτο λογισμικού Mambo είναι από τα πιο γνωστά στο χώρο των Open Source Content Management Systems. Το κυρίως πακέτο Mambo είναι εύκολο στην εγκατάσταση και στην παραμετροποίηση. Η διαδικασία εγκατάστασης επιτρέπει στον διαχειριστή σε 4 απλά βήματα να έχει στα χέρια του μία πλήρως λειτουργική ιστοσελίδα χωρίς να απαιτείται η γνώση συγκεκριμένων τεχνικών ανάπτυξης λογισμικού και ιστοσελίδων. Μόλις ολοκληρωθεί η εγκατάσταση, ο διαχειριστής μπορεί να επιλέξει από μία γκάμα έτοιμων σχεδίων ιστοσελίδας ενώ παρέχονται αρκετές δυνατότητες παραμετροποίησης του υλικού. Το υλικό μπορεί να προστεθεί, τροποποιηθεί και να παρουσιαστεί στον τελικό χρήστη χωρίς τη απαιτούμενη γνώση από πλευράς του διαχειριστή, τεχνολογιών HTML, XML ή DHTML, απλά μπορεί να εισαχθεί το υλικό μέσω ενός φιλικού προς το χρήστη επεξεργαστή κειμένου. Οι χρήστες που αναζητούν περισσότερα από την εγκατάσταση του συγκεκριμένου πακέτου, μπορούν να έχουν σημαντική παραμετροποίηση, μέχρι ενός σημείου, ενώ το ίδιο το λογισμικό μπορεί να χρησιμοποιείται από πολλούς χρήστες. Οι προγραμματιστές ανάπτυξης είναι μέλη μιας σημαντικά μεγάλης κοινότητας με πείρα ανάπτυξης πάνω από 5 χρόνια. Σημαντικό όπλο του συγκεκριμένου πακέτου, η απλότητα, με αντίκτυπο στη δυνατότητα παραμετροποίησης. 24

26 Λογισμικό Typo3 Version Ez Publishing Version Drupal Version Περιγραφή λογισμικού Το Typo3 είναι μία επαγγελματική λύση και προσφέρεται μέσω της άδειας λογισμικού GPL (GNU General Public License). Χρησιμοποιείται σε πάνω από 120,000 διακομιστές παγκοσμίως, έχει μεταφραστεί σε πάνω από 43 γλώσσες, ενώ αναπτύσσεται από μία κοινότητα χρηστών που αριθμεί περισσότερα από 27,000 μέλη σε 60 χώρες. Η χρήση τεχνολογιών εύκολης διαχείρισης και εισαγωγής υλικού για το συγκεκριμένο πακέτο θεωρείται δεδομένη, καθώς παρέχει πάνω από 2700 προσθήκες επιπλέον λειτουργιών, ενώ έχει βραβευθεί από το φορέα BNP Consulting ως το εξέχον Content Management System στο χώρο όσον αφορά το περιβάλλον ανάπτυξης εφαρμογών και εισαγωγής δυνατοτήτων σε αυτό από 3ους. Μερικοί από τους φορείς που χρησιμοποιούν το συγκεκριμένο πακέτο είναι, BASF, DaimlerChrysler, EDS, Konika-Minolta,Government of Québec Volkswagen, UNESCO, όπως και πληθώρα πανεπιστημίων, υπηρεσιών κυβερνήσεων και μη κερδοσκοπικών οργανισμών. Το πακέτο λογισμικού ez Publish είναι ένα Content Management System (CMS) και development framework (CMF).Ένα CMS χρησιμοποιείται για άμεση χρήση και παροχή μία λύσης, ενώ το CMF αποτελείται από ειδικά εργαλεία που παρέχουν τη δυνατότητα επιπλέον παραμετροποίησης και εισαγωγής εργαλείων για τη διαχείριση του υλικού. Η δυνατότητα CMS και CMF είναι ενσωματωμένα το ένα με το άλλο και παρέχονται και τα δύο ως μέρη του πακέτου ez Publish. Το ez Publish προσφέρεται με δύο διαφορετικές άδειες χρήσης, μία μέσω GPL (GNU General Public License) και μία μέσω άδειας χρήσης επαγγελματία για προστασία του υλικού της ιστοσελίδας κάτω από συγκεκριμένο καθεστώς. Το πακέτο Drupal είναι λογισμικό που επιτρέπει σε κάποιον ιδιώτη ή κοινότητα να προβάλει εύκολα και να διαχειριστεί υλικό σε μία ιστοσελίδα. Δεκάδες χιλιάδες χρήστες και φορείς χρησιμοποιούν το συγκεκριμένο πακέτο για ιστοσελίδες διαφορετικού χαρακτήρα και υλικού συμπεριλαμβανομένων portals, προσωπικών ιστοσελίδων, σελίδες εταιρειών, blogs, χώρους συζητήσεων κτλ. Πρόκειται για λογισμικό με άδεια χρήσης GPL (GNU General Public License) και υποστηρίζεται από χιλιάδες χρήστες ενώ θεωρείται ότι προσφέρει σημαντική παραμετροποίηση των δυνατοτήτων του. 25

27 Λογισμικό Περιγραφή λογισμικού MySource Matrix Version matrix.squiz.net Το πακέτο MySource Matrix είναι μία πρόταση Content Management System Ανοιχτού Λογισμικού και πρόκειται για μία σαφώς επαγγελματικής φύσης εφαρμογή. Έχει χαρακτηριστεί ως ένα από τα πιο δυνατά εργαλεία Content Management System στην αγορά. Το σύστημα θεωρείται εύκολο στη διαχείριση με σημαντικές δυνατότητες παραμετροποίησης ενώ χρησιμοποιείται από μεγάλες εταιρείες και φορείς Κυβερνήσεων. Προσφέρει τη δυνατότητα εισαγωγής υλικού μέσω ειδικού επεξεργαστή κειμένου (WYSIWYG) ενώ υποστηρίζει πολλαπλούς λογαριασμούς χρηστών με διαβάθμιση δικαιωμάτων πρόσβασης. Προσφέρει καταγραφή αλλαγών του συστήματος και διαχείριση διαφορετικών εκδόσεων του υλικού. Είναι συμβατό με τα πρότυπα του χώρου ενώ μπορεί να υποστηρίξει πολλαπλούς σχεδιασμούς ιστοσελίδας ανάλογα με το υλικό. Απαραίτητη προϋπόθεση από πλευράς του χρήστη που θα εισάγει υλικό στην ιστοσελίδα είναι η διαθεσιμότητα πρόσφατης έκδοσης του Java Runtime Environment (1.5). Το MySource Matrix έχει αναπτυχθεί σε γλώσσα προγραμματισμού PHP και χρησιμοποιεί τη λειτουργία PEAR για επικοινωνία με το σύστημα βάσης δεδομένων. Μερικοί φορείς που χρησιμοποιούν το πακέτο MySource Matrix είναι οι Future Publishing, Mark Warner Holidays, University of Oxford και The Australian Federal Government. 26

28 3.3 Το TYPO3 Το TYPO3 είναι ένα CMS ανοικτού κώδικα για εταιρικούς σκοπούς στο διαδίκτυο ή σε ενδοδίκτυο (intranet). Προσφέρει πλήρη ευελιξία και επεκτασιμότητα καθώς παρέχει ένα ολοκληρωμένο σύνολο προκατασκευασμένων διεπαφών και λειτουργικών μονάδων. Μπορεί να σας παρέχει μία εταιρική υψηλού επιπέδου λύση χωρίς τα υπέρογκα κόστη ενός ιδιωτικού CMS. Η υιοθέτηση ενός επαγγελματικού CMS ανοικτού κώδικα όπως το TYPO3, μπορεί αφενός να ελαχιστοποιήσει το αρχικό κόστος μιας επένδυσής, αφετέρου να μεγιστοποιήσει την απόδοση επί την επένδυση (ROI, Return On Investment) με την πάροδο του χρόνου. Με τους πόρους που εξοικονομούνται σε σχέση με ένα ιδιωτικό CMS του οποίου το κόστος του ολοένα θα αυξάνεται λόγω των νέων αναγκών, μπορεί να γίνει επένδυση σε εκπαίδευση του προσωπικού και την παραμετροποίηση του λογισμικού. Αν και το TYPO3 είναι ένα αρκετά πολύπλοκο CMS, ευτυχώς υπάρχουν διανομές του με προεγκατεστημένο υλικό για διάφορους σκοπούς, πράγμα που επιτρέπει αρχικά να στήθει ένα λειτουργικό site σε ελάχιστο χρόνο, με μέγιστη τη δυνατότητα παραμετροποίησης του στη συνέχεια Template engine Ένα CMS είναι πετυχημένο μόνο αν οι διαχειριστές περιεχομένου είναι πρόθυμοι να το χρησιμοποιήσουν. Έτσι η ευκολία χρήσης γίνεται σημαντικός παράγοντας κατά την επιλογή συστήματος. Το Typo3 συνδυάζει ευκολία χρήσης και λειτουργικότητα, ισορροπώντας τέλεια ανάμεσα στα δύο. Για τους διαχειριστές, το Typo3 προσφέρει έναν οδηγό κατασκευής μιας ιστοσελίδας βασισμένη σε πρότυπο HTML ή σε κάποιο άλλο. Επιλέγεται ο χώρος του δυναμικού περιεχομένου και του στατικού. Έπειτα επεκτείνεται αυτό το πρότυπο μέσω μιας καλά τεκμηριωμένης γλώσσας της Typoscript. Έτσι προσφέρονται τα εργαλεία προσέγγισης των δεδομένων με πολλούς τρόπους. Ο προγραμματιστής κατασκευάζει το template που θέλει ανεξάρτητα με το περιεχόμενο απαλλάσσοντας έτσι τους υπεύθυνους ανανέωσης της ιστοσελίδας από το βάρος της 27

29 προγραμματιστικής σχεδίασης κάθε φορά που κάτι πρέπει να αλλαχτεί ή να προστεθεί μέσα στον διαδικτυακό τόπο. Οι συντάκτες περιεχομένου πλέον μπορούν να δουλεύουν εύκολα και γρήγορα μέσω δύο οδών, πάνω στην ίδια την ιστοσελίδα μέσω ενός κοινού φυλλομετρητή (frontend) ή μέσω του λογισμικού (backend). Το κείμενο συντάσσεται μέσω οικείων εικονιδίων του Office και έχει πολλαπλές επιλογές εμφάνισης, διάταξης, τοποθέτησης κ.α. Το σχεδιαστικό πρότυπο δεν αλλάζει προσφέροντας ενιαία εμφάνιση και εύκολη καθοδήγηση Extension engine Ένα από τα πιο ουσιώδη γνωρίσματα του Typo3 είναι η επέκταση του χρησιμοποιώντας πακέτα λογισμικού που ονομάζονται επεκτάσεις (extensions). Τα extensions είναι εύκολα στην εγκατάσταση και μπορεί να περιέχουν modules, plug ins, Typo Script και πολλά περισσότερα. Εγκαθίστανται on line μέσω του Extension Manager, από ένα κεντρικό ευρετήριο που χρησιμοποιεί όλη η κοινότητα του Typo3 που ονομάζεται Extension Repository. Στο ευρετήριο υπάρχουν πλέον πάνω από 3000 extensions, εκ των οποίων κάποια είναι μικρές αναβαθμίσεις και βελτιώσεις προηγουμένων και κάποια ολόκληρες νέες εφαρμογές που καλύπτουν ανάγκες όπως, forum, αρχείο τύπου, chat κ.α. Το οργανωμένο σύστημα extension δεν παρέχει μόνο την ευκολία εγκατάστασης εφαρμογών μέσω διαχειριστικής διεπαφής, αλλά και την ασφαλή και καθαρή δομή των extensions, πράγμα απαραίτητο στους προγραμματιστές που θέλουν να αναπτύξουν τις δικές τους εφαρμογές στο Typo3. Η ποιότητα του παραγόμενου κώδικα είναι διασφαλισμένη και η δυνατότητα αναβάθμισης του πυρήνα του κώδικα διαθέσιμη για μελλοντικές αλλαγές και τροποποιήσεις. 28

30 Παρατηρούμε λοιπόν ότι το typo3 είναι μια καθ όλα αξιόπιστη και λειτουργική λύση προκειμένου να προχωρήσουμε στην υλοποίηση της ζητούμενης ιστοσελίδας. Ενώ επίσης είναι αρκετά εύκολο στη διαχείριση της πληροφορίας της κυρίως σελίδας, από άτομα που στερούνται γνώσεων web-design. Το προσωπικό της ΕΚΠ που θα διαχειρίζεται την ιστοσελίδα, έχοντας στην κατοχή του ένα επεξηγηματικό εγχειρίδιο χρήσης που παραθέτουμε παρακάτω θα είναι σε θέση να διαχειρίζεται με ευκολία τις διάφορες εφαρμογές της ιστοσελίδας και να μεταχειρίζεται τις πληροφορίες που εμφανίζονται κατά τη δική του ευχέρεια. 29

31 4. Υλοποίηση Interface 4.1 Γενικά Ένα από τα βασικά χαρακτηριστικά του typo3 είναι ο μηχανισμός που διαθέτει για την κατασκευή templates παρουσίασης του περιεχομένου. Μάλιστα, προσφέρει τη δική του γλώσσα προγραμματισμού, την Typo Script, και παραμετροποίησης ειδικά γι αυτό το σκοπό. Η Typo Script δεν είναι τίποτε άλλο από μία απλοποιημένη μορφή της γλώσσας php ώστε να μπορεί ο χρήστης να εξοικειωθεί εύκολα με αυτήν και μειωθεί η πολυπλοκότητα του κώδικα που απαιτείται. Με τη χρήση διαφορετικών templates αλλάζει ο τρόπος παρουσίασης του περιεχομένου με οριζόντιο τρόπο, χωρίς δηλαδή να είναι απαραίτητη η τροποποίηση του ίδιου του περιεχόμενο. Μάλιστα διατίθενται, είτε δωρεάν είναι με χαμηλό κόστος, έτοιμα προκατασκευασμένα templates για κάθε είδους ιστοσελίδα. Υπάρχουν διάφοροι τρόποι κατασκευής ενός template. Οι δύο πιο διαδεδομένοι μέθοδοι ανάπτυξης απαιτούν την εγκατάσταση ενός βασικού extention, του Autoparser ή του Templavoila αντίστοιχα. H μέθοδος του Autoparser είναι πιο πολύπλοκη, χρονοβόρα και προϋποθέτει κατανόηση της γλώσσας του Typo Script σε έναν αρκετά μεγάλο βαθμό. Από την άλλη πλευρά, η μέθοδος του Templavoila (TV) είναι πολύ πιο γρήγορη και ευέλικτη και δεν στερείται δυνατοτήτων της προηγούμενης καθώς παρέχει τη δυνατότητα επέμβασης και αλλαγών επίσης με χρήση του Typo Script, αν ο developer το κρίνει απαραίτητο. Σύμφωνα με τα παραπάνω επιλέξαμε τη μέθοδο του Templavoila για την υλοποίηση μας. Επιπλέον, το TV είναι ένα extention που γεννήθηκε σχετικά πρόσφατα και σύμφωνα με την επίσημη ιστοσελίδα του typo3 ( ) είναι πλέον αυτό που χρησιμοποιούν οι περισσότεροι developers και κερδίζει συνέχεια έδαφος. Ένας ακόμη λόγος για την απόφαση μας ήταν ότι η διαχείριση του ιστιότοπου που δημιουργήσαμε θα περάσει στα χέρια των ανθρώπων της Ε.Κ.Π.. Οπότε θέλαμε να επιλέξουμε ένα πιο απλό περιβάλλον ώστε να είναι κατανοητό και να μπορούν να το διαχειριστούν σχετικά εύκολα αν θεωρηθεί αναγκαίο. 30

32 4.2 Σχεδίαση HTML & CSS Όλες οι σελίδες του front end έχουν σαν βάση την ίδια σχεδιαστική δομή, αλλά αλλάζει το περιεχόμενό τους ανάλογα με τις ανάγκες τους. Έτσι αρκεί να σχεδιαστούν και να προγραμματιστούν σε HTML όλα τα στατικά στοιχεία (δηλαδή τα στοιχεία που είναι κοινά σε όλες τις σελίδες). Τα πεδία που θα φιλοξενούν το δυναμικό περιεχόμενο των σελίδων καθορίζονται μέσα από mapping, μια διαδικασία που κάνει εφικτή το TV.Tο αρχείο HTML αποτελείται από την κεφαλίδα (<head>) και το περιεχόμενο (<body>). Η κεφαλίδα έχει κάποιες γενικές ρυθμίσεις όπως η κωδικοποίηση, ο τίτλος της σελίδας κτλ. Επίσης γίνεται σύνδεση με τη βιβλιοθήκη Prototype η οποία χρησιμοποιείται για τη δημιουργία κάποιων χαρακτηριστικών της εμφάνισης του front-end. Τέλος γίνεται σύνδεση με αρχείο CSS που περιέχει συγκεντρωτικά τις ρυθμίσεις στυλ των στοιχείων που απαρτίζουν τη σελίδα αλλά και τη σελίδα σαν σύνολο. Ο κώδικας HTML που αναπτύχθηκε είναι ο εξής: HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_a87de6b4cd.css" /> <link rel="stylesheet" type="text/css" href="typo3conf/ext/mm_forum/res/tmpl/default/css/mm_forum.css" /> <script src="typo3conf/ext/mm_forum/res/scripts/prototype js" type="text/javascript"></script> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="web-kreation.com" /> <meta name="keywords" content="epitropi, Koinwnikis, Politikis" /> <meta name="description" content="epitropi koinwnikis politikis" /> <meta name="robots" content="index, follow, noarchive" /> <meta name="googlebot" content="noarchive" /> <link 31

33 href="fileadmin/templates/ntiskolata2/css/stylesheet.css" rel="stylesheet" type="text/css" /> <title>home EKP</title> <meta name="generator" content="typo3 4.2 CMS" /> <script type="text/javascript" src="typo3temp/javascript_93077bb238.js"></script> </head> <body> <div id="container"> <div id="wrapper"> <div id="sidebar"> <div id="sb_top"> </div> <div class="sb_content"> <div id="menu"><div id="menu"><ul id="menulist" class="adxm"><li><a href="index.php?id=7" title="αρχική" >Αρχική</a></li><li><a href="index.php?id=18" title="εκδηλώσεις" >Εκδηλώσεις</a></li><li class="submenu"><a href="index.php?id=31" title="τομείς δραστηριοποίησης" >Τομείς δραστηριοποίησης</a><ul><li class="submenu"><a href="index.php?id=23" title="αλλοδαποί" >Αλλοδαποί</a><ul><li><a href="index.php?id=27" title="νομικό Πλαίσιο" >Νομικό Πλαίσιο</a></li><li><a href="index.php?id=26" title="faq" >FAQ</a></li><li><a href="index.php?id=28" title="σύνδεσμοι" >Σύνδεσμοι</a></li></ul></li><li class="submenu"><a href="index.php?id=8" title="αμεα" >ΑΜΕΑ</a><ul><li><a href="index.php?id=11" title="πληροφορίες για γονείς" >Πληροφορίες για γονείς</a></li><li><a href="index.php?id=10" title="νομικό πλαίσιο" >Νομικό πλαίσιο</a></li><li><a href="index.php?id=9" title="faq" >FAQ</a></li></ul></li><li><a href="index.php?id=34" title="τράπεζα αίματος" >Τράπεζα αίματος</a></li></ul></li><li><a href="index.php?id=32" title="σύμβουλοι Καθηγητές" >Σύμβουλοι Καθηγητές</a></li><li class="submenu"><a href="index.php?id=12" title="κε.συ.ψυ." >ΚΕ.ΣΥ.ΨΥ.</a><ul><li><a href="index.php?id=15" title="μια πρωτη επαφή" >Μια πρωτη επαφή</a></li><li><a href="index.php?id=14" title="επαφη - Επικοινωνια" >Επαφη - Επικοινωνια</a></li><li><a href="index.php?id=36" title="faq" >FAQ</a></li><li><a href="index.php?id=41" title="δεοντολογία" >Δεοντολογία</a></li></ul></li><li><a href="index.php?id=4" title="forum" >Forum</a></li><li><a href="index.php?id=33" title="downloads" >Downloads</a></li></ul></div></div> <div class="login"><!--typo3search_begin--> <!-- CONTENT ELEMENT, uid:1/login [begin] --> <a id="c1"></a> <!-- BEGIN: Content of extension "felogin", plugin "tx_felogin_pi1" --> 32

34 <div class="tx-felogin-pi1"> <h3> Συνδεθείτε εδώ!!!</h3> <div> </div> <!-- ###LOGIN_FORM### --> <form action="index.php?id=1" target="_top" method="post" onsubmit=""> <fieldset> <legend>σύνδεση</legend> <div> <label for="user">όνομα χρήστη:</label> <input type="text" id="user" name="user" value="" /> </div> <div> <label for="pass">κωδικός πρόσβασης:</label> <input type="password" id="pass" name="pass" value="" /> </div> /> <div> </div> <input type="submit" name="submit" value="σύνδεση" /> /> <div class="felogin-hidden"> <input type="hidden" name="logintype" value="login" <input type="hidden" name="pid" value="5" /> <input type="hidden" name="redirect_url" value="" </div> </fieldset> </form> <!--###FORGOTP_VALID###--> <p><a href="index.php?id=1&tx_felogin_pi1[forgot]=1" >Ξεχάσατε τον κωδικό σας;</a></p> <!--###FORGOTP_VALID###--> <!-- ###LOGIN_FORM### --> </div> <!-- END: Content of extension "felogin", plugin "tx_felogin_pi1" --> <!-- CONTENT ELEMENT, uid:1/login [end] --> <!-- CONTENT ELEMENT, uid:61/text [begin] --> <a id="c61"></a> <!-- Text: [begin] --> <p class="bodytext"><a href="index.php?id=22" > Γίνετε μέλος τώρα! </a></p> <!-- Text: [end] --> 33

35 <!-- CONTENT ELEMENT, uid:61/text [end] --> <!--TYPO3SEARCH_end--></div> <div class="skype"> <!--Skype 'Skype Me!' button <script type="text/javascript" src=" ></script> <a href="skype:ekp_user?call"><p>αμεση ΕΠΙΚΟΙΝΩΝΙΑ ΜΕ ΤΗΝ ΕΚΠ</p> <img src=" n_white_153x63.png" style="border: none;" width="153" height="63" alt="skype Me!" /></a> </div> </div> <!-- /sb_content --> </div> <!-- /sidebar --> <!-- Top --> <div id="header"> <a href=" /><img src="fileadmin/templates/ntiskolata2/images/ext_icon.gif" alt="search" />Αναζήτηση </a> <a href=" src="fileadmin/templates/ntiskolata2/images/contact.jpg" alt="contact" />Επικοινωνία </a> </div> <!-- Start main content --> <div id="content"> <div id="intro"> </div> <p><!--typo3search_begin--> <!-- CONTENT ELEMENT, uid:17/textpic [begin] --> <a id="c17"></a> <!-- Header: [begin] --> <div class="csc-header csc-header-n1"><h1 style="text-align:center;" class="csc-firstheader">καλώς ήρθατε στην Επιτροπή Κοινωνικής Πολιτικής του Αριστοτελείου Πανεπιστημίου Θεσσαλονίκης </h1></div> <!-- Header: [end] --> <!-- Image block: [begin] --> <div class="csc-textpic csc-textpic-center csc-textpic-below"><div class="csc-textpic-text"></div><div class="csc-textpic-imagewrap" style="width:435px;"><dl class="csctextpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:435px;"><dt><img src="uploads/pics/under_construction.gif" width="435" height="356" 34

36 border="0" alt="" /></dt></dl></div></div><div class="csc-textpicclear"><!-- --></div> <!-- Image block: [end] --> <!-- CONTENT ELEMENT, uid:17/textpic [end] --> <!-- CONTENT ELEMENT, uid:89/text [begin] --> <a id="c89"></a> <!-- Text: [begin] --> <p class="bodytext">η <b>επιτροπή Κοινωνικής Πολιτικής</b> ιδρύθηκε από το πρυτανικό συμβούλιο το Σεπτέμβριο 1997 με στόχο να συμβάλει στην επίλυση προβλημάτων, που ενδεχομένως αντιμετωπίζουν φοιτητές του Α.Π.Θ., στην ενδυνάμωση της εσωτερικής ζωής του πανεπιστημίου και στη σύνδεση του πανεπιστημίου με την ευρύτερη κοινωνία. </p> <p class="bodytext"> <b>προσφέρει:</b> </p><ul xmlns:xmlns:cms=" υποστήριξη σε φοιτητές με ειδικές ανάγκες,</li><li>επικοινωνία με ξένους φοιτητές του Α.Π.Θ.,</li><li>ενημέρωση σε θέματα πρόληψης και φροντίδας υγείας και προβληματισμό σε θέματα της σύγχρονης κοινωνίας και ζωής,</li><li>συμβουλευτική και ψυχολογική υποστήριξη (Κε.Συ.Ψ.Υ.),</li><li>καλλιέργεια των σχέσεων του Α.Π.Θ. με την ευρύτερη κοινωνία,</li><li>προβολή των σχετικών με τους παραπάνω στόχους δραστηριοτήτων του Α.Π.Θ.</li></ul><p class="bodytext"> </p> <p class="bodytext"><b>μπορείτε να εγγραφείτε <a href="index.php?id=22" > εδώ </a> και να πάρετε μέρος σε διαδικτυακές κουβέντες ανταλλάσσοντας μηνύματα στα forum και chat του site!</b> </p> <p class="bodytext"> </p> <p class="bodytext"><b>για άμεση επικοινωνία μέσω Skype μπόρειτε να έρθετε σε επαφή με το προσωπικό της ΕΚΠ πατώντας στο κουμπί που βρίσκεται στα αριστερά σας.</b> </p> <p class="bodytext"> </p> <p class="bodytext"><b>βρείτε πληροφορίες για τα θέματα που σας ενδιαφέρουν στα πλήρως ενημερωμένα FAQ του site.</b> </p> <p class="bodytext"> </p> <p class="bodytext"><b>κανονίστε μια συνάντηση με κάποιον σύμβουλο καθηγητή ή με κάποιον αρμόδιο σύμβουλο. Πληροφορίες θα βρείτε <a href="index.php?id=35" >εδώ.</a></b> </p> <p class="bodytext"> </p> <p class="bodytext"><b>eνημερωθείτε για της δράσεις και τις εκδηλωσεις της ΕΚΠ.</b> </p> <p class="bodytext"> </p> <!-- Text: [end] --> <!-- CONTENT ELEMENT, uid:89/text [end] --> <!--TYPO3SEARCH_end--></p> </div> <!-- /content --> </div> <!-- /wrapper --> <div class="clear"> </div> <!-- Important! Fix the 35

37 problem of height in Firefox --> </div> <!-- /Container --> </body> </html> Ο κώδικας CSS που αναπτύχθηκε σε 3 μέρη και είναι τα εξής: CSS FORM /**** Form Layout ****/ /* Main Form formatting*/ form { margin: 0; padding: 0; display: inline; input, textarea, select { font: 1em arial, helvetica, sans-serif; background-color: #BDADA6; border: 1px solid #443833; line-height: 1.25em; padding: px; input:focus, textarea:focus, select:focus { border: 1px solid #55453E; background-color: #BDADA6; label { cursor: pointer;.errormsg { display: block; width: 90%; color: #FFFFFF; font-weight: bold; background: #FF9D9D url(../images/stop.gif) no-repeat 10px center; padding: 3px 10px 3px 40px; margin: 10px 0; border-top: 2px solid #FF0000; border-bottom: 2px solid #FF0000; input.button { background: url(../images/button.jpg) repeat-x center; color: white; 36

38 padding: 0 7px; height: 23px; border: 1px solid #302723; /*Search input*/ input.search { background: url(../images/search.jpg) no-repeat; border: none; width: 220px; height: 25px; padding-left: 35px; padding-top: 5px; color: white; CSS Layout /***** Main Layout ****/ #container { background: url(../images/bg_top.jpg) repeat-x top left; width: 100%; height: 100%; #wrapper { display: block; width: 970px; text-align: center;/* IE fix to center the page in the middle of the page*/ margin: 0 auto;/*center the page in Firefox*/ /**** Sidebar ****/ #sidebar { display: block; float: left; width: 290px; text-align: left; color: white; #sb_top { width: 290px; height: 240px; background: url(../images/sb_top.jpg) no-repeat left top; color: #CC9966; font-weight: bold; 37

39 text-align: center;.sb_logo { padding-top: 67px;.sb_content { text-align: left; padding-left: 12px; width: 268px; #sidebar.sb_content h2 { color: # ; background: url(../images/bg_top.jpg) repeat-x; width: 253px; padding-left: 15px; padding-top: 10px; margin-bottom: 15px; font: 1.5em Georgia, "Times New Roman", Times, serif; #sidebar.sb_content p { padding: 10px; #sidebar.sb_content ul { list-style-type: square; /*links*/ #sidebar.sb_content a { color: #FFFF99; #sidebar.sb_content a:hover { color: #FFFF99; border-bottom: 1px dotted #FFFF99; #sidebar.sb_content img { border: 1px solid #00ff00; padding: 4px; background-color: #443833; Margin: 7px 0; #sidebar.sb_content img.noborder { border: none; padding: 0; background-color: transparent; Margin: 7px 0; /**** Main Menu ****/ /* #sidebar #navlist { margin: 0;/*removes indent IE and Opera*/ padding: 0;/*removes indent Mozilla and NN7*/ 38

40 list-style-type: none;/*turns off display of bullet*/ width: 268px; #sidebar #navlist a, #sidebar #navlist a:visited { display: block; height: 40px; padding: 2px 2px 2px 24px; border: none; border-top: 1px solid #705A52; border-bottom: 1px solid #3E322D; background-color: transparent; color: white; font-size: 20px; line-height: 40px;/* this value must match the height in order to center vertically the text*/ text-decoration: none; #sidebar #navlist a:hover { background-color: #00ff00; #sidebar #navlist a.noborder, #sidebar #navlist a:visited.noborder { border-bottom: none; */ #menu { margin: px; padding: 0; display: block; background: url(images/nav_bg.gif); width: 155px; #menu ul { margin: 0; padding: 0; border: 0; list-style-type: none; *+html #menu ul { min-height: 1px; /*hack for ie7*/ #menu li { margin: 0; padding: 0; border: 0; display: block; position: relative; z-index: 9; #menu a { display: block; #menu li li { width: 100%; 39

41 z-index: 10; /* fix the position for 2nd level submenus. first make sure no horizontal scrollbars are visible on initial page load... */ #menu li li ul { top: 0; right: 0; /*...and then place it where it should be when shown */ #menu li li:hover ul { left: 150px; /* initialy hide all sub menus */ #menu li ul { display: none; position: absolute; z-index: 8; /* display them on hover */ #menu li:hover>ul { display: block; top:0; right:-152px; /* this is needed if you want to style #menu div - force containment of floated LIs inside of main UL */ #menulist:after { content: "."; height: 0; display: block; visibility: hidden; overflow: hidden; clear: both; /* Make-up */ #menu { font-size: 13px; #menu:after{ content: '.'; display: block; height: 1px; line-height: 1px; clear: both; visibility: hidden; #menu li li { width: 150px; 40

42 #menu li a { font-weight: bold; text-decoration: none; text-align: left; color: #173904; background: url(images/arrow.gif) no-repeat 5px center; padding: 4px 0 9px 30px; border-bottom: 3px solid #FCF9F2; margin: 0; list-style-type: none; list-style: none; #menu li a:hover, #menu li ul li a:hover, #menu li:hover>a, #menu li li:hover>a { color: #FF0000; #menu li li a { text-transform: none; text-decoration: none; color: #173904; background: url(images/nav_bg.gif); padding: 5px 8px; margin: 0; #menu li ul { width: 150px; padding:0 ; margin:0; text-align:center; border-left:1px solid #97B520; border-right:1px solid #97B520; border-top:1px solid #97B520; border-bottom:1px solid #97B520; background:#705a52; #menu li li.submenu>a:after { content: ""; /*Login*/ #sidebar.login { display: block; margin: 60px auto 40px auto; width: 220px; text-align: center; background-color: # ; border: 1px solid black; 41

43 color: #000000; font-size: 85%; #sidebar.login a { color: #FFFF99; #sidebar.login a:hover { color: #CC9966; border-bottom: 1px dotted #CC9966; /*skype*/ #sidebar.skype { display: block; margin: 60px auto 40px auto; width: 220px; text-align: center; background-color: #882810; border: 1px solid black; color: #877065; font-size: 85%; #sidebar.skype a { color: #FFFF99; #sidebar.skype a:hover { color: #FFFF99; border-bottom: 1px dotted #FFFF99; /**** Header ****/ #header { display: block; float: left; clear: right; width: 670px; height: 40px; padding-top: 15px; color: white; text-align: right; #header a { color: white; #header a:hover { border-bottom: 1px dotted white; /**** Content ****/ 42

44 #content { display: block; float: left; width: 670px; border-top: # px solid; text-align: left; margin-bottom: 50px; #content ul li { list-style: url(../images/bullet.jpg); #content img { border: 1px solid #D0C5BF; padding: 4px; background-color: #E7E1DE; Margin: 15px 0; #content img.alignleft { display: block; float: left; clear: none; margin: 5px 10px 5px 0; #content img.alignright { float: right; margin: 5px 10px 0 10px; #content img.noborder { border: none; background-color: transparent; padding: 0; margin: 10px; CSS - url("form.css"); html, body { border: 0; margin: 0; padding: 0; body { font: 100%/1.25 arial, helvetica, sans-serif; background: # url(../images/bg2.jpg) repeat-y top center; width: 100%; min-width: 970px; /***** Common Formatting *****/ 43

45 h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: normal; h1 { width: 97%; clear: both; margin-top: 20px; margin-bottom: 10px; padding-bottom: 3px; letter-spacing: -1px; font: 2em arial, helvetica, sans-serif; color: #877065; background-color: transparent; border-bottom: 4px; h2 { padding: 10px 0 0 0; color: #00FFFF; background-color: transparent; font-size: 110%; letter-spacing: -1px; font: 1.4em arial, helvetica, sans-serif; h3 { font: 1em arial, helvetica, sans-serif; font-weight: bold; p, ul, ol { margin: 0; padding: px 0; ul, ol { list-style: none; padding: px 40px; blockquote { font-size: 1.4em; color: #55453E; background-color: transparent; width: 400px; background: url(../images/close-quote.jpg) no-repeat right bottom; padding-left: 18px; text-indent: -18px; 44