Τμήμα Ηλεκτρονικών Μηχανικών ΤΕ
Μελέτη και ανάπτυξη δικτυακού χώρου για τις
ανάγκες τμήματος εκπαιδευτικού ιδρύματος της
τριτοβάθμιας εκπαίδευσης
Πτυχιακή Εργασία
Γαζής Φώτιος
Επιβλέπων Καθηγητής
Χαράλαμπος Πατρικάκης
Επίκουρος Καθηγητής ΤΕΙ Πειραιά
Δεκέμβριος 2013
2
Τμήμα Ηλεκτρονικών Μηχανικών ΤΕ
Μελέτη και ανάπτυξη δικτυακού χώρου για τις ανάγκες τμήματος
εκπαιδευτικού ιδρύματος της τριτοβάθμιας εκπαίδευσης
Design and development of internet website for the needs of higher
education institution
Πτυχιακή Εργασία
Gazis Fotios
Supervisor
Charalampos Patrikakis
Assistant Professor
December 2013
Γαζής Φώτιος
3
……………………………..
Γαζής Φώτιος του Σταματίου
Copyright © Γαζής Φώτιος, Δεκέμβριος 2013
Με επιφύλαξη παντός δικαιώματος, All rights reserved
Απαγορεύεται η αντιγραφή, αποθήκευση και διανομή της παρούσας εργασίας, εξ ολοκλήρου ή
τμήματος αυτής, για εμπορικό σκοπό. Επιτρέπεται η ανατύπωση, αποθήκευση και διανομή για σκοπό
μη κερδοσκοπικό, εκπαιδευτικής ή ερευνητικής φύσης, υπό την προϋπόθεση να αναφέρεται η πηγή
προέλευσης και να διατηρείται το παρόν μήνυμα. Ερωτήματα που αφορούν τη χρήση της εργασίας για
κερδοσκοπικό σκοπό πρέπει να απευθύνονται προς τους συγγραφείς.
Οι απόψεις και τα συμπεράσματα που περιέχονται σε αυτό το έγγραφο εκφράζουν τους συγγραφείς
και δεν πρέπει να ερμηνευθεί ότι αντιπροσωπεύουν τις επίσημες θέσεις του Τεχνολογικού
Εκπαιδευτικού Ιδρύματος Πειραιά .
Γαζής Φώτιος
4
Τμήμα Ηλεκτρονικής
Μελέτη και ανάπτυξη δικτυακού χώρου για τις ανάγκες τμήματος
εκπαιδευτικού ιδρύματος της τριτοβάθμιας εκπαίδευσης
Πτυχιακή Εργασία
Επιβλέπων Καθηγητής
Χαράλαμπος Πατρικάκης
Επίκουρος Καθηγητής ΤΕΙ Πειραιά
………..………………………
Πατρικάκης Χαράλαμπο;
Επίκουρος Καθηγητής
…………………..……………..
Μαρία Ραγκούση
Καθηγήτρια
……………………………….……..
Δημήτριος Μετάφας
Καθηγητής Εφαρμογών
Δεκέμβριος 2013
Γαζής Φώτιος
5
Αφιερωμένο στην οικογένεια μου
και ιδιαιτέρως στον καθηγητή μου κ. Χαράλαμπο Πατρικάκη
Γαζής Φώτιος
6
Περίληψη
Ο δικτυακός χώρος ενός εκπαιδευτικού ιδρύματος τριτοβάθμιας εκπαίδευσης, αλλά και γενικά
οποιουδήποτε εκπαιδευτικού ιδρύματος, αποτελεί την πύλη του, προς τον έξω κόσμο. Το διαδίκτυο
είναι πλέον ο η πιο διαδεδομένη μέθοδος επικοινωνίας, ενημέρωσης και ψυχαγωγίας στον κόσμο. Αν
κάποιος χρειαστεί να λάβει πληροφορίες για κάποιο εκπαιδευτικό ίδρυμα, από το τηλέφωνο
επικοινωνίας του, μέχρι το εκπαιδευτικό προσωπικό ή τις τελευταίες ανακοινώσεις του, θα το
αναζητήσει σίγουρα στο διαδίκτυο. Έτσι μπορούμε να καταλάβουμε την σπουδαιότητα του δικτυακού
χώρου ενός εκπαιδευτικού ιδρύματος, για αμεσότητα, πληρότητα στο περιεχόμενο του,
λειτουργικότητα και ευκολία στην χρήση του.
Στην παρούσα πτυχιακή θα μελετήσουμε τις προδιαγραφές που χρειάζεται να ακολουθεί ένας
σύγχρονος δικτυακός χώρος τριτοβάθμιας εκπαίδευσης, ώστε να αποτελεί πρότυπο για όλα τα
εκπαιδευτικά ιδρύματα.
Ο σχεδιαζόμενος δικτυακός χώρος πιθανόν να αποτελέσει τον νέο δικτυακό χώρο του τμήματος
Ηλεκτρονικών Μηχανικών ΤΕ του ΤΕΙ Πειραιά.
Για την υλοποίηση του δικτυακού τόπου, τίθενται όλες οι απαιτήσεις και προδιαγραφές που
εξυπηρετούν τους σκοπούς και τις ανάγκες για μια σύγχρονη ενημερωμένη ιστοσελίδα, με στρατηγική
να καταστεί ένα πραγματικά χρήσιμο εργαλείο. Μελετήθηκαν όλες οι τεχνολογίες και συστήματα
διαχείρισης περιεχομένου, προκειμένου να γίνει επιλογή των καταλλήλων εργαλείων, επιλύοντας τα
περισσότερα προβλήματα και ζητήματα που είχαμε θέσει. Για την δημιουργία και την υλοποίηση του
δικτυακού μας χώρου, χτίσαμε στα πλαίσια της πλατφόρμας Joomla, με επεκτάσεις και πρόσθετα που
περιγράφονται αναλυτικά στην εργασία.
Τέλος μελετήθηκαν οι επεκτάσεις και οι μελλοντικές προσθήκες του δικτυακού χώρου με τεχνολογίες
και επεκτάσεις που ήδη διαθέτει το εκπαιδευτικό ίδρυμα για την εξυπηρέτηση των σπουδαστών.
Λέξεις κλειδιά
Δικτυακός χώρος, Σύστημα Διαχείρισης Περιεχομένου, CMS, Joomla, Εκπαιδευτικό ίδρυμα, Νέες
Τεχνολογίες, Διαδίκτυο, τηλε-εκπαίδευση. Ιστός, Διαδίκτυο, Πλατφόρμα, Ιστότοποι, Ενημέρωση,
Εκπαίδευση.
Γαζής Φώτιος
7
ΠΕΡΙΕΧΟΜΕΝΑ
1.
1.1.
Εισαγωγή στην ανάγκη του διαδικτύου στον τομέα της εκπαίδευσης ....................... 10
Εισαγωγή............................................................................................................................... 10
1.2.
Οι ανάγκες του διαδικτύου στα πλαίσια της εκπαίδευσης ............................................ 10
1.2.1.
Τηλεκπαίδευση - e-learning ........................................................................................ 11
1.2.2.
Μορφές Τηλεκπαίδευσης ............................................................................................ 11
1.2.3.
Το e-learning στην Ελλάδα ......................................................................................... 12
1.2.4.
Ηλεκτρονικά μέσα που χρησιμοποιούνται στο e-learning .................................... 13
1.2.5.
E-Learning και Web Designing ................................................................................. 13
1.3.
2.
Στόχος της διπλωματικής.................................................................................................... 14
Τεχνολογίες και εργαλεία κατασκευής ιστοσελίδων ...................................................... 15
2.1.
Αρχικές γλώσσες προγραμματισμού για κατασκευή ιστοσελίδων ............................... 15
2.1.1.
HTML ............................................................................................................................ 15
2.1.2.
CSS ................................................................................................................................. 16
2.2.
Σύγχρονες γλώσσες προγραμματισμού ιστοσελίδων ..................................................... 18
2.2.1.
HTML 5 ......................................................................................................................... 18
2.2.2.
CSS 3 .............................................................................................................................. 18
2.2.3.
Javascript ....................................................................................................................... 18
3.
3.1.
Content Management Systems (CMS) στην κατασκευή ιστοσελίδων......................... 20
Τι είναι τα Συστήματα Διαχείρισης Περιεχομένου ( CMS ) .......................................... 20
3.2.
Δημοφιλέστερα CMS ........................................................................................................... 23
3.2.1.
Wordpress ..................................................................................................................... 24
3.2.2.
Joomla ............................................................................................................................ 24
3.2.3.
Drupal ............................................................................................................................ 26
4. Μελέτη περίπτωσης: Δικτυακός χώρος Τμήματος Ηλεκτρονικών Μηχανικών ΤΕΙ
Πειραιά .............................................................................................................................................. 27
4.1.
Εισαγωγή............................................................................................................................... 27
4.2.
Υπάρχουσα κατάσταση ....................................................................................................... 27
4.2.1.
Joomla 1.5 ...................................................................................................................... 27
4.2.2.
Artisteer template ........................................................................................................ 28
4.3.
Προβλήματα και περιορισμοί ............................................................................................ 28
4.3.1.
Ασφάλεια....................................................................................................................... 28
4.3.2.
Χρηστικότητα ............................................................................................................... 28
4.3.3.
Εμφάνιση ...................................................................................................................... 29
4.4.
Βελτιώσεις από την ενημέρωση έκδοσης Joomla ............................................................. 29
Γαζής Φώτιος
8
4.4.1.
Δυναμική απόκριση ιστοσελίδας ( μέρος για τους επισκέπτες) για σταθερές –
φορητές συσκευές .......................................................................................................................... 29
4.4.2.
Δυναμική απόκριση ιστοσελίδας ( διαχειριστικό μέρος ) για σταθερές – φορητές
συσκευές 30
4.4.3.
Μενού διαχείρισης τύπου Mambo vs το υπέροχο νέο UX..................................... 30
4.4.4.
Ταμπλό με τη νέα εμφάνιση για διαχείριση και στατιστικά ................................. 30
4.4.5.
Ευκολότερη δημιουργία και διαχείριση άρθρων .................................................... 31
4.4.6.
Χειροκίνητη ταξινόμηση σειράς vs αυτοματοποιημένη ταξινόμηση με drag &
drop
31
4.5.
Επιπλέον ανάγκες ................................................................................................................ 32
4.5.1.
Responsiveness (Ανάγκη για έκδοση σε φορητές συσκευές) ................................. 32
4.5.2.
Cross platform ( Accessibility ) .................................................................................. 32
4.5.3.
Social networks ............................................................................................................ 32
4.5.4.
Calls to Action .............................................................................................................. 33
4.5.5.
Multilingual .................................................................................................................. 33
5.
Σχεδίαση & Ανάλυση Δικτυακού Χώρου .......................................................................... 34
5.1.
Εισαγωγή............................................................................................................................... 34
5.2.
Δέντρο Ιστοτόπου ( κεντρικό μενού ) και περιγραφή .................................................... 34
5.3.
Επικεφαλίδα Ιστότοπου ( Header ) ................................................................................... 38
5.4.
Αρχική σελίδα και ανακοινώσεις ...................................................................................... 39
5.5.
Σελίδες μαθημάτων.............................................................................................................. 40
5.6.
Σελίδες καθηγητών .............................................................................................................. 41
5.6.1.
Online φόρμα καταχώρησης καθηγητών ................................................................. 42
5.7.
Σελίδα επικοινωνίας............................................................................................................ 43
5.8.
Σελίδα ανακοινώσεων ......................................................................................................... 43
5.8.1.
Πρόσθετο προβολής ανακοινώσεων στην αρχική σελίδα ..................................... 43
5.9.
6.
Χάρτης Google...................................................................................................................... 44
Υλοποίηση ................................................................................................................................ 45
6.1.
Hardware που χρησιμοποιήθηκε ...................................................................................... 45
6.1.1.
Εξυπηρετητής ( Web Server ) ..................................................................................... 45
6.2.
Software που χρησιμοποιήθηκε ......................................................................................... 46
6.2.1.
XAMPP .......................................................................................................................... 46
6.2.2.
Ubuntu Server .............................................................................................................. 48
6.2.2.1. Τείχος προστασίας (Ubuntu Firewall) ..................................................................... 49
6.2.2.2. Διαχειριστικό απομακρυσμένου ελέγχου διακομιστή ( Patty )............................. 50
6.2.3.
Joomla 3.0 ...................................................................................................................... 51
6.2.4.
Επεκτάσεις και πρόσθετα στην πλατφόρμα Joomla................................................ 52
Γαζής Φώτιος
9
6.2.4.1.
6.2.4.2.
6.2.4.3.
6.2.4.4.
eXtplorer ( Διαχείριση αρχείων ) ............................................................................... 52
Akeeba backup ( Δημιουργία και διαχείρηση αντιγράφων ασφαλείας ) ........... 52
Akeeba Kickstart ( επαναφορά από αντίγραφο ασφαλείας ) ............................... 53
Template δυναμικής απόκρισης από την Joomlart και JAT3.2 Framework ....... 54
6.3.
Προβλήματα και περιορισμοί ............................................................................................ 55
6.3.1.
Αποφυγή μελλοντικής επίθεσης ................................................................................ 55
6.3.2.
Πολυγλωσσικό περιεχόμενο ....................................................................................... 55
6.3.2.1. Επέκταση για χρήση περισσότερων από μια γλώσσα ............................................ 56
6.3.2.2. Υποστήριξη θέματος (template) για περισσότερες από μία γλώσσα .................... 56
6.3.3.
Μεταφορά από τοπικό σε ζωντανό διακομιστή ...................................................... 57
6.3.4.
Αυξηση ορίου μεταφόρτωσης αρχείου στον διακομιστή ....................................... 57
7.
Επεκτάσεις – Μελλοντικές προσθήκες ............................................................................... 58
7.1.
Σύνδεση με πλατφόρμα ηλεκτρονικών εγγραφών ......................................................... 58
7.1.1.
Σύνδεση με πλατφόρμα ηλεκτρονικών εγγραφών ................................................. 58
7.1.2.
Σύνδεση με ηλεκτρονικό αποθετήριο δημοσιεύσεων και βιβλίων ....................... 58
8.
Επίλογος ................................................................................................................................... 59
9.
Παράρτημα Εικόνων ............................................................................................................. 60
10.
Αναφορές / Links .................................................................................................................... 69
11.
Κατάλογος Πινάκων .............................................................................................................. 73
Γαζής Φώτιος
10
1. Εισαγωγή στην ανάγκη του διαδικτύου στον τομέα της εκπαίδευσης
1.1. Εισαγωγή
Η πτυχιακή αυτή στοχεύει στη μελέτη των τεχνολογιών του παγκόσμιου ιστού, με έμφαση το web 2,
τα κοινωνικά δίκτυα και την προσαρμοστικότητα σε ετερογενή περιβάλλοντα πρόσβασης (κινητές
συσκευές, προσωπικοί υπολογιστές, ταμπλέτες), με στόχο τη δημιουργία ενός ευέλικτου και
προσαρμοστικού στις ανάγκες των χρηστών δικτυακού χώρου για την τριτοβάθμια εκπαίδευση. Στα
πλαίσια της εργασίας θα διερευνηθούν πλατφόρμες ανάπτυξης δικτυακών χώρων, και θα γίνει
μελέτη και πρόταση ανάπτυξης δικτυακού χώρου για το τμήμα Ηλεκτρονικής του ΤΕΙ Πειραιά.
1.2. Οι ανάγκες του διαδικτύου στα πλαίσια της εκπαίδευσης
Όλο και περισσότερο παρατηρούμε την μεγάλη επιρροή που ασκούν οι νέες τεχνολογίες στον τομέα
της εκπαίδευσης. Οι υπολογιστές, το διαδίκτυο καθώς και η διαχυτικότητα που προσφέρει το
Internet, έχει παρακινήσει πολλούς ερευνητές να εξετάσουν τις δυνατότητες και τις προκλήσεις που
τυχόν να έχουν στο τομέα της παιδείας.
Ο εκπαιδευτικός πρέπει να είναι ενήμερος γι' αυτά τα μοναδικά παιδαγωγικά και εκπαιδευτικά
πλεονεκτήματα που προσφέρουν οι νέες τεχνολογίες πριν αποφασίσει να τις χρησιμοποιήσει ,και να
μην καταλήξει σ' αυτές μόνο εξαιτίας της άμετρης αγάπης για την τεχνολογία ή απλώς επειδή
σήμερα η τεχνολογία έχει μπει στην ζωή μας.
Πραγματικά όμως στον τομέα αυτό, η τεχνολογία έχει πολλά να προσφέρει προς όφελος και των
μαθητών και των εκπαιδευτικών και της κοινωνίας. Οι μέσοι μαθητές θα αποκομίσουν πολλά
οφέλη, ενώ οι ιδιοφυίες δεν θα περιορίζονται μόνο στην συγκεκριμένη διδακτέα ύλη, ούτε θα
χρειάζεται να ακολουθούν αργούς ρυθμούς προς χάριν μερικών άλλων μαθητών. Στα παιδιά με
ειδικές ανάγκες θα ανοιχθούν νέοι οπτικοί οδοί, ενώ ο αναλφαβητισμός σε ορισμένες περιοχές θα
πάψει να υπάρχει.
Σε αυτό το σημείο πρέπει να κάνουμε μια διάκριση των υπολογιστών. Τους υπολογιστές ως απλή
τεχνολογία τη συναντάμε σε όλη την διάρκεια της σχολικής πορείας. Με την εισβολή των
υπολογιστών στις τάξεις, οι μαθητές αποκτούν πρόσβαση σε νέες πηγές γνώσης, έρχονται σε
συνεργασία με άλλους μαθητές, και ουσιαστικά έχουν την δυνατότητα να αποκτήσουν ότι θέλουν,
από όπου το θέλουν και όποτε το θέλουν, και με μορφή πιο προσιτή σε αυτούς, πάντοτε όμως με την
βοήθεια και καθοδήγηση του δασκάλου.
Ο υπολογιστής όμως ως εργαλείο μάθησης, συναντάται στην τριτοβάθμια εκπαίδευση χωρίς την
σύμπραξη του δασκάλου. Οι φοιτητές μπορούν να μπουν ανά πάσα στιγμή, μέσω του υπολογιστή,
σε οποιαδήποτε βιβλιοθήκη, σε βιβλία, σε εκθέσεις, σε βιβλιογραφίες, σε πραγματικά μουσεία κ.τ.λ.
Μεγάλη είναι όμως η συνδρομή των υπολογιστών στην μάθηση από απόσταση αφού μέσω αυτού
μπορεί να ζητήσει κανείς πληροφορίες για την σειρά των μαθημάτων, καθοδήγηση πάνω στο
μάθημα κα. Τέτοιοι μέθοδοι διδασκαλίας έχουν εκμηδενίσει τις αποστάσεις, κάνοντας την
εκπαίδευση πιο άνετη και πιο ενδιαφέρουσα. [1][5]
Η συνεχιζόμενη και ραγδαία ανάπτυξη στην επιστήμη και στην τεχνολογία, κάνουν όλο και
περισσότερες γνώσεις και τεχνικές ικανότητες να προσθέτονται, πράγμα που κάνει απαραίτητη την
συνεχή μόρφωση. Βέβαια είναι εύλογο ότι δεν θα ήταν δυνατόν να συνεχιστεί η ιδρυματική παιδεία
Γαζής Φώτιος
11
και για τον ενήλικα που έχει εξοντωτικό πρόγραμμα και πολλές υποχρεώσεις. Έτσι ο σύγχρονος
άνθρωπος μέσω του υπολογιστή είναι συνεχώς ενημερωμένος γρήγορα και απλά.
1.2.1. Τηλεκπαίδευση - e-learning
Η ελληνική μετάφρασή του όρου, τηλεκπαίδευση (εκπαίδευση από μακριά), δεν αποτυπώνει
ακριβώς την έννοια, ίσως πιο σωστή θα ήταν η μετάφραση ηλεκτρονική μάθηση. Η έννοια elearning είναι αρκετά γενική και περικλείει οποιαδήποτε μορφή εκπαίδευσης χρησιμοποιεί τους
πόρους του δικτύου ή γενικότερα τις δυνατότητες των ηλεκτρονικών υπολογιστών.[6][10]
Εξ αποστάσεως εκπαίδευση είναι η υποβοηθούμενη από τα μέσα επικοινωνίας εκπαίδευση
(ταχυδρομείο, ηλεκτρονικό ταχυδρομείο, ραδιόφωνο, τηλεόραση, κασέτες βίντεο, υπολογιστές,
τηλεδιάσκεψη και άλλα) με μικρή ή καθόλου διαπροσωπική ή σε τάξη επαφή μεταξύ εκπαιδευτή
και εκπαιδευόμενου. Αφορά την παιδαγωγική, την τεχνολογία και τον σχεδιασμό της εκπαιδευτικής
δομής, που επιδιώκει την παροχή εκπαίδευσης, χωρίς την ανάγκη φυσικής παρουσίας στο χώρο που
αυτή λαμβάνει χώρα. Ο ορισμός αυτός αναφέρει την εξ αποστάσεως εκπαίδευση ως ξεχωριστό
κλάδο της εκπαίδευσης, κάτι που όμως δεν είναι μεθοδολογικά αποδεκτό.
Σήμερα, η εξ αποστάσεως εκπαίδευση υλοποιείται σχεδόν αποκλειστικά με την υποστήριξη του
υπολογιστή, και πιο συγκεκριμένα σε διαδικτυακό περιβάλλον. Για το λόγο αυτό, τείνει να είναι
ταυτόσημη με τις έννοιες ηλεκτρονική μάθηση (e-learning), μάθηση υποβοηθούμενη από
υπολογιστή (computer assisted learning), μάθηση μέσω διαδικτύου (online learning), διαδικτυακή
εκπαίδευση (online education), εκπαίδευση βασισμένη στο διαδίκτυο (web-based education). Η
διαφορά στη σημασία των όρων αυτών αρχίζει να υποβαθμίζεται και ο διαχωρισμός γίνεται όλο και
πιο δύσκολος.[8][10]
1.2.2. Μορφές Τηλεκπαίδευσης
Για να προσδιορίσουμε καλύτερα την έννοια της τηλεκπαίδευσης έχουν καθοριστεί τρεις
διαφορετικές μορφές :
1. Η Τηλεκπαίδευση σε εξατομικευμένο ρυθμό (self-paced training). Σε αυτή την περίπτωση
προσφέρονται στον εκπαιδευόμενο συνδυασμός εκπαιδευτικών υλικών (βιβλία, αναφορές στο
δίκτυο, μαγνητοσκοπημένα μαθήματα, σημειώσεις, προγράμματα εκμάθησης βασισμένα σε
υπολογιστή κτλ), συνήθως χωρισμένα σε ενότητες (μαθήματα), τα οποία χρησιμοποιεί με το δικό
του ρυθμό, αποφασίζει δηλαδή ο ίδιος πότε και που θα τα χρησιμοποιήσει. Δεν υπάρχει επικοινωνία
με διδάσκοντα ή με άλλους μαθητές.
2. Η Ασύγχρονη Τηλεκπαίδευση. Η περίπτωση αυτή μοιάζει αρκετά με την προηγούμενη.
Παρέχεται στους συμμετέχοντες η δυνατότητα να εργαστούν με το υλικό προς διδασκαλία
οπουδήποτε και οποτεδήποτε έχοντας όμως παράλληλα δυνατότητα ασύγχρονης επικοινωνίας με
τους υπόλοιπους συμμετέχοντες και με τον εκπαιδευτή. Το υλικό διδασκαλίας δεν είναι απαραίτητο
να έχει δοθεί όλο από την έναρξη του μαθήματος αλλά μπορεί να προσφέρεται τους
εκπαιδευόμενους σταδιακά. Ο ρυθμός διεξαγωγής καθορίζεται από τον εκπαιδευτή σε συνεργασία
πάντα με τους εκπαιδευόμενους.
3. Η σύγχρονη Τηλεκπαίδευση. Σε αυτή την περίπτωση το μάθημα γίνεται κανονικά αλλά οι
μαθητές και ο καθηγητής μπορούν να βρίσκονται σε διαφορετικό τόπο ο καθένας και
χρησιμοποιώντας τεχνολογίες τηλεδιάσκεψης να βρίσκονται όλοι σε μία εικονική αίθουσα
Γαζής Φώτιος
12
διδασκαλίας. Η διεξαγωγή του μαθήματος γίνεται με τέτοιο τρόπο ώστε να προσφέρει τις ίδιες ή και
παραπάνω δυνατότητες με αυτές που προσφέρονται σε μία κανονική αίθουσα.[2][5][8][10]
1.2.3. Το e-learning στην Ελλάδα
Στην ασύγχρονη εξ αποστάσεως εκπαίδευση, που είναι και πιο διαδεδομένη, ο εκπαιδευόμενος
μαθαίνει όχι μόνο σε διαφορετικό χώρο από τον εκπαιδευτή, αλλά και σε διαφορετικό χρόνο από τη
διαδικασία της παράδοσης ή δημιουργίας του μαθήματος.
Χαρακτηριστικό παράδειγμα αποτελούν πλέον οι περισσότερες ιστοσελίδες Πανεπιστημιακών και
Τεχνολογικών σχολών της Ελλάδας οι οποίες περιέχουν σελίδες για κάθε διαφορετικό μάθημα της
σχολής/τμήματος με θέματα παλαιοτέρων ετών και με τις ασκήσεις που πρέπει να παραδοθούν στο
πλαίσιο του μαθήματος κάθε χρονιά. Επίσης για κάθε μάθημα φαίνεται η διδακτέα ύλη, η εξεταστέα
ύλη, καθώς και τυχόν ανακοινώσεις για το μάθημα η γενικά ανακοινώσεις που αφορούν τη
σχολή/τμήμα.
Με τη βοήθεια της ασύγχρονης εκπαίδευσης υπάρχει το πλεονέκτημα της μάθησης στον χρόνο και
με το ρυθμό που επιθυμεί ο εκπαιδευόμενος, ενώ με την χρήση σύγχρονων συζητήσεων σε τακτά
χρονικά διαστήματα, ο εκπαιδευτής γνωρίζει τους μαθητές του, οι εκπαιδευόμενοι επικοινωνούν
μεταξύ τους και με τον εκπαιδευτή και δεν αισθάνονται αποξενωμένοι από την εκπαιδευτική
κοινότητα και διαδικασία. [8][10]
Ιστορική Αναδρομή
Από τις αρχές του 18ου αιώνα, τα πανεπιστήμια άρχισαν να προσφέρουν υπηρεσίες εξ αποστάσεως
εκπαίδευσης. Με την βοήθεια του ταχυδρομείου, οι εκπαιδευόμενοι λάμβαναν το εκπαιδευτικό
υλικό και έστελναν τις εργασίες τους ή τις απορίες τους στους εκπαιδευτές. Το ταχυδρομείο με τα
μέσα που διέθετε τότε ήταν ο μόνος τρόπος επικοινωνίας. Η εξ αποστάσεως εκπαίδευση είχε δύο
μειονεκτήματα: 1)την μεγάλη καθυστέρηση λόγω του ταχυδρομείου και 2) την παντελή έλλειψη
επικοινωνίας μεταξύ των εκπαιδευομένων.
Η τεχνολογία όμως είναι αυτή που φέρνει την εξ αποστάσεως εκπαίδευση στο προσκήνιο και την
κάνει το όχημα για την εξέλιξη της εκπαίδευσης. Ήδη από το 1922, ο Τόμας Έντισον προέβλεψε ότι
η κινούμενη εικόνα θα αντικαταστήσει το εγχειρίδιο στο χώρο της εκπαίδευσης. Στο Β’ Παγκόσμιο
Πόλεμο, η τεχνολογία της κινούμενης εικόνας όντως συνέβαλε στην εκπαίδευση των Αμερικανών
στρατιωτών. Αργότερα, αναπτύχθηκαν προγράμματα με τη βοήθεια της τηλεόρασης και του βίντεο.
Η εξ αποστάσεως εκπαίδευση παρέμενε μονόδρομη, πετυχαίνοντας όμως μεγάλη πρόσβαση σε
πολλά άτομα. Με την ανάπτυξη της πληροφορικής, η εξ αποστάσεως εκπαίδευση άρχισε να
αναπτύσσεται πιο γρήγορα. Η υποβοηθούμενη από υπολογιστή εκπαίδευση έγινε πραγματικότητα
γύρω στο 1960 και άλλαξε δραματικά τα δεδομένα στο χώρο της εκπαίδευσης. Σημαντική εξέλιξη
ήταν η ανάπτυξη του διαδικτύου στις αρχές του 1990, το οποίο, με τη διάδοσή του και τις
τεχνολογίες που ενσωμάτωσε, καταφέρνει να εξελίξει τον τρόπο μεταφοράς γνώσης, ανταλλαγής
πληροφοριών αλλά και την ίδια την κοινωνία.
Η εξ αποστάσεως εκπαίδευση με την υποστήριξη της πληροφορικής και σε περιβάλλον διαδικτύου
έχει εξελιχθεί σε μεγάλο βαθμό. Ο χρήστης έχει πρόσβαση σε μεγάλο όγκο πληροφοριών και τα
εργαλεία που μπορεί να χρησιμοποιήσει είναι τόσα πολλά και διαφορετικά που μπορούμε να μιλάμε
για μια τελείως διαφορετική μεθοδολογία, όχι μόνο από την παραδοσιακή μάθηση, αλλά και από
την εξ αποστάσεως εκπαίδευση των προηγούμενων ετών.
Το μέλλον της εξ αποστάσεως εκπαίδευσης βρίσκεται σίγουρα στο διαδίκτυο. Οι χρήστες, καθώς
εξοικειώνονται όλο και περισσότερο με το διαδίκτυο και τις υπηρεσίες του, αρχίζουν να το
Γαζής Φώτιος
13
διαμορφώνουν. Όλο και περισσότερες υπηρεσίες του διαδικτύου επικεντρώνονται σε αυτό,
καθιστώντας ακόμα και τον σχετικά αρχάριο χρήστη σε εκπαιδευτή. Οι σύγχρονες αυτές υπηρεσίες
μπορεί να είναι τα δικτυακά ημερολόγια (blog από τους όρους web και log), υπηρεσίες δημοσίευσης
υλικού, όπως φωτογραφίες (www.flickr.com) και βίντεο (www.youtube.com), και τέλος οι
ιστοσελίδες wiki (συλλογικές εγκυκλοπαίδειες).[8][10]
1.2.4. Ηλεκτρονικά μέσα που χρησιμοποιούνται στο e-learning
Τα ηλεκτρονικά μέσα που έχουν χρησιμοποιηθεί και χρησιμοποιούνται στην εξ αποστάσεως
εκπαίδευση είναι τα εξής:
• Κινούμενη εικόνα
• Ηλεκτρονικές συλλογές υλικού που διαχειρίζονται χρήστες ή εκπαιδευτές (ePortfolios)
• Ηλεκτρονικό σύστημα υποστήριξης της απόδοσης (electronic performance support system)
όπου είναι το πρόγραμμα που διευκολύνει την πρόσβαση σε πληροφορίες
• Προσωπικοί υπολογιστές παλάμης (PDA)
• Κινητά τηλέφωνα νέας γενιάς (Smartphones)
• Συσκευές αναπαραγωγής αρχείων ήχου με υποστήριξη πολυμέσων
• Εκπαιδευτικό υλικό βασισμένο στις τεχνολογίες του διαδικτύου
• Ψηφιακοί δίσκοι πολυμέσων (multimedia CD-ROM)
• Ιστοσελίδες και κοινότητες (web 2.0)
• Ηλεκτρονικοί χώροι ασύγχρονης συζήτησης
• Λογισμικό υποστήριξης συνεργασίας
• Ηλεκτρονικό ταχυδρομείο
• Ημερολόγια διαδικτύου (blogs)
• Εγκυκλοπαίδειες διαχειριζόμενες από τους χρήστες
• Σύγχρονη συζήτηση με κείμενο
• Αξιολόγηση υποβοηθούμενη από υπολογιστή
• Εκπαιδευτικό κινούμενο σχέδιο
• Εξομοιωτές
• Παιχνίδια
• Σύστημα διαχείρισης μάθησης (LMS) ή Εικονικό Περιβάλλον Εκπαίδευσης (Virtual
Learning Environment)
• Ηλεκτρονικά συστήματα ψηφοφορίας
• Διανομή συλλογών ψηφιακών αρχείων σε πολλούς παραλήπτες με υπηρεσίες του
διαδικτύου (podcasting) [8][10]
1.2.5. E-Learning και Web Designing
Η εξ αποστάσεως εκπαίδευση με την υποστήριξη της πληροφορικής έχει συγκεκριμένες τεχνικές
απαιτήσεις τόσο σε λογισμικό όσο και σε εξοπλισμό. Απαιτείται απαραίτητα λογισμικό
εξυπηρετητή, π.χ. Apache Server. Σε αυτό ακριβώς το σημείο συνδέεται η έννοια του web designing
με το e-learning. Για να δημιουργηθεί μία πλατφόρμα ασύγχρονης μάθησης (που στην
συγκεκριμένη περίπτωση πρόκειται για μια ιστοσελίδα τμήματος της τριτοβάθμειας εκπαίδευσης)
θα πρέπει να χρησιμοποιηθούν κάποια εργαλεία κατασκευής ιστοσελίδων που είναι γνωστά στο
ευρύ κοινό.
Γαζής Φώτιος
14
1.3. Στόχος της διπλωματικής
Στόχος της παρούσας διπλωματικής εργασίας είναι η δημιουργία μιας σύγχρονης ιστοσελίδας,
σύμφωνα με τα Ευρωπαϊκά πρότυπα και τα εθνικά νομοθετικά πλαίσια, η οποία θα καλύπτει τις
ανάγκες των φοιτητών ανώτατης εκπαίδευσης. Οι σπουδαστές θα μπορούν να έχουν πρόσβαση σε
ένα τεράστιο πλήθος πληροφοριών καθώς και άμεσης ενημέρωσης, εκμεταλλευόμενοι τα οφέλη που
προσφέρει το διαδίκτυο στην σύγχρονη εποχή. Προσφέρεται επίσης η δυνατότητα σύνδεσης σε
δημοφιλή κοινωνικά δίκτυα, με σκοπό της δημιουργία μιας δυναμικής ιστοσελίδας μέσω τις οποίας
θα παρέχεται η δυνατότητα άμεσης διαδραστικής επικοινωνίας μεταξύ των σπουδαστών και του
εκπαιδευτικού προσωπικού του ιδρύματος.
Επιπλέον, η καινούρια έκδοση της ιστοσελίδας βασισμένη στην νεότερη έκδοση συστήματος
διαχείρισης περιεχομένου Joomla! 3.0 παρέχει νέα πρωτόκολλα ασφαλείας τα οποία θα εξαλείψουν
τα κενά ασφαλείας της υπάρχουσας ιστοσελίδας.
Γαζής Φώτιος
15
2. Τεχνολογίες και εργαλεία κατασκευής ιστοσελίδων
2.1. Αρχικές γλώσσες προγραμματισμού για κατασκευή ιστοσελίδων
2.1.1. HTML
Η HTML (ακρωνύμιο του αγγλικού HyperText Markup Language, ελλ. Γλώσσα Σήμανσης
Υπερκειμένου) είναι η κύρια γλώσσα σήμανσης για τις ιστοσελίδες, και τα στοιχεία της είναι τα
βασικά δομικά στοιχεία των ιστοσελίδων.
Η HTML γράφεται υπό μορφή στοιχείων HTML τα οποία αποτελούνται από ετικέτες, οι οποίες
περικλείονται μέσα σε σύμβολα «μεγαλύτερο από» και «μικρότερο από» (για παράδειγμα <html>),
μέσα στο περιεχόμενο της ιστοσελίδας. Οι ετικέτες HTML συνήθως λειτουργούν ανά ζεύγη (για
παράδειγμα <h1> και </h1>), με την πρώτη να ονομάζεται ετικέτα έναρξης και τη δεύτερη ετικέτα
λήξης (ή σε άλλες περιπτώσεις ετικέτα ανοίγματος και ετικέτα κλεισίματος αντίστοιχα). Ανάμεσα
στις ετικέτες, οι σχεδιαστές ιστοσελίδων μπορούν να τοποθετήσουν κείμενο, πίνακες, εικόνες κλπ.
Ο σκοπός ενός web browser είναι να διαβάζει τα έγγραφα HTML και τα συνθέτει σε σελίδες που
μπορεί κανείς να διαβάσει ή να ακούσει. Ο browser δεν εμφανίζει τις ετικέτες HTML, αλλά τις
χρησιμοποιεί για να ερμηνεύσει το περιεχόμενο της σελίδας.
Τα στοιχεία της HTML χρησιμοποιούνται για να κτίσουν όλους του ιστότοπους. Η HTML επιτρέπει
την ενσωμάτωση εικόνων και άλλων αντικειμένων μέσα στη σελίδα, και μπορεί να χρησιμοποιηθεί
για να εμφανίσει διαδραστικές φόρμες. Παρέχει τις μεθόδους δημιουργίας δομημένων εγγράφων
(δηλαδή εγγράφων που αποτελούνται από το περιεχόμενο που μεταφέρουν και από τον κώδικα
μορφοποίησης του περιεχομένου) καθορίζοντας δομικά σημαντικά στοιχεία για το κείμενο, όπως
κεφαλίδες, παραγράφους, λίστες, συνδέσμους, παραθέσεις και άλλα. Μπορούν επίσης να
ενσωματώνονται σενάρια εντολών σε γλώσσες όπως η JavaScript, τα οποία επηρεάζουν τη
συμπεριφορά των ιστοσελίδων HTML.
Οι Web browsers μπορούν επίσης να αναφέρονται σε στυλ μορφοποίησης CSS για να ορίζουν την
εμφάνιση και τη διάταξη του κειμένου και του υπόλοιπου υλικού. Ο οργανισμός W3C, ο οποίος
δημιουργεί και συντηρεί τα πρότυπα για την HTML και τα CSS, ενθαρρύνει τη χρήση των CSS αντί
διαφόρων στοιχείων της HTML για σκοπούς παρουσίασης του περιεχομένου. [12]
Προέλευση γλώσσας HTML
Το 1980, ο φυσικός Τιμ Μπέρνερς Λι, ο οποίος εργαζόταν στο CERN, επινόησε το ENQUIRE, ένα
σύστημα χρήσης και διαμοιρασμού εγγράφων για τους ερευνητές του CERN, και κατασκεύασε ένα
πρωτότυπό του. Αργότερα, το 1989, πρότεινε ένα σύστημα βασισμένο στο διαδίκτυο, το οποίο θα
χρησιμοποιούσε υπερκείμενο.[13] Έτσι, έφτιαξε την προδιαγραφή της HTML και έγραψε τον
browser και το λογισμικό εξυπηρετητή στα τέλη του 1990. Τον ίδιο χρόνο, ο Μπέρνερς Λι και ο
μηχανικός συστημάτων πληροφορικής του CERN Robert Cailliau συνεργάστηκαν σε μια κοινή
προσπάθεια εύρεσης χρηματοδότησης, αλλά το έργο δεν υιοθετήθηκε ποτέ επίσημα από το CERN.
Στις προσωπικές του σημειώσεις από το 1990[14], ο Μπέρνερς Λι αριθμεί «μερικές από τις πολλές
χρήσεις του υπερκειμένου», και αναφέρει πρώτα από όλες μια εγκυκλοπαίδεια.[15]
Γαζής Φώτιος
16
Πρώτες προδιαγραφές
Η πρώτη δημόσια διαθέσιμη περιγραφή της HTML ήταν ένα έγγραφο με το όνομα Ετικέτες HTML,
το οποίο πρωτοαναφέρθηκε στο Διαδίκτυο από τον Μπέρνερς Λι στα τέλη του 1991.[15][16]
Περιέγραφε τα 20 στοιχεία τα οποίο αποτελούσαν τον αρχικό και σχετικά απλό σχεδιασμό της
HTML. Εκτός από την ετικέτα υπερσυνδέσμου, οι υπόλοιπες ήταν έντονα επηρεασμένες από την
SGMLguid, μια μορφή δημιουργίας τεκμηρίωσης, φτιαγμένη στο CERN και βασισμένη στην
SGML. Δεκατρία από εκείνα τα αρχικά στοιχεία υπάρχουν ακόμα σήμερα στην HTML 4.[17]
Το ίδιο το πρότυπο SGML αναπαράγει μερικές από τις τεχνικές των τυπογράφων, αλλά εκτός από
απλή μίμηση της τυπογραφίας προσθέτει γενικευμένη σήμανση βασισμένη σε στοιχεία, τα οποία
μπορούν να εμφωλεύονται το ένα μέσα στο άλλο και να φέρουν ιδιότητες. Ακόμα, το SGML
διαχωρίζει τη δομή από το περιεχόμενο, κατεύθυνση προς την οποία αργότερα κινήθηκε και η
HTML, με τα CSS. Πολλά από τα στοιχεία κειμένου προέρχονται από την τεχνική αναφορά ISO TR
9537, Techniques for using SGML (τεχνικές χρήσης της SGML), η οποία με τη σειρά της καλύπτει
τα χαρακτηριστικά των πρώιμων γλωσσών μορφοποίησης κειμένου που χρησιμοποιούνταν από τα
TYPSET και RUNOFF, και είχαν αναπτυχθεί στις αρχές της δεκαετίας του 1960 για το λειτουργικό
σύστημα CTSS.
Ο Μπέρνερς Λι θεώρησε την HTML ως μια υλοποίηση του SGML. Αυτό ορίστηκε και επίσημα από
το Internet Engineering Task Force (IETF) με τη δημοσίευση της πρώτης πρότασης για μια
προδιαγραφή της HTML, στα μέσα του 1993[19], η οποία περιλάμβανε και έναν Ορισμό τύπου
εγγράφου (DTD, Document Type Definition) της SGML, ο οποίος όριζε την γραμματική. Αυτό το
πρόχειρο έληξε μετά την πάροδο έξι μηνών, αλλά περιέχει κάτι αξιοσημείωτο: την αναγνώριση της
ετικέτας του NCSA Mosaic για την ενσωμάτωση εικόνων μέσα στο κείμενο, η οποία
αντικατοπτρίζει την φιλοσοφία του IETF για ενσωμάτωση επιτυχημένων πρωτότυπων μέσα στα
πρότυπα. Κάτι παρόμοιο περιείχε και το ανταγωνιστικό πρόχειρο του Dave Raggett, «HTML+
(Hypertext Markup Format)», από τα τέλη του, το οποίο πρότεινε την προτυποποίηση μερικών ήδη
υλοποιημένων δυνατοτήτων, όπως οι πίνακες και οι φόρμες.
Μετά που τα πρόχειρα HTML και HTML+ έληξαν, στις αρχές του 1994, το IETF δημιούργησε την
Ομάδα Εργασίας για την HTML, η οποία το 1995 ολοκλήρωσε την «HTML 2.0», με την πρόθεση
να αποτελέσει την πρώτη προδιαγραφή πάνω στην οποία θα βασίζονταν οι μελλοντικές
υλοποιήσεις. Η HTML 2.0 δημοσιεύτηκε ως RFC 1866, και περιείχε ιδέες από τα πρόχειρα HTML
και HTML+.Η αρίθμηση 2.0 σκόπευε απλά να ξεχωρίσει την νέα έκδοση από τα πρόχειρα που
προηγήθηκαν.
Η περαιτέρω ανάπτυξη κάτω από την επίβλεψη του IETF καθυστέρησε λόγω σύγκρουσης
ενδιαφερόντων. Από το 1996 και μετά, οι προδιαγραφές της HTML τηρούνται, μαζί με ανάδραση
από τους δημιουργούς λογισμικού, από το World Wide Web Consortium (W3C). Ωστόσο, το 2000
η HTML έγινε επίσης παγκόσμιο πρότυπο (ISO/IEC 15445:2000). Η τελευταία προδιαγραφή της
HTML, η HTML 4.01, δημοσιεύτηκε από το W3C το 1999, και το 2001 δημοσιεύτηκαν επίσης και
τα λάθη και οι παραλείψεις της. [20]
2.1.2. CSS
Η CSS (Cascading Style Sheets-Διαδοχικά Φύλλα Στυλ) ή ( αλληλουχία φύλλων στυλ ) είναι μια
γλώσσα υπολογιστή που ανήκει στην κατηγορία των γλωσσών φύλλων στυλ που χρησιμοποιείται
για τον έλεγχο της εμφάνισης ενός εγγράφου που έχει γραφτεί με μια γλώσσα σήμανσης (HTML
και XHTML). Χρησιμοποιείται δηλαδή για τον έλεγχο της εμφάνισης ενός εγγράφου που γράφτηκε
στις γλώσσες HTML και XHTML, δηλαδή για τον έλεγχο της εμφάνισης μιας ιστοσελίδας και
Γαζής Φώτιος
17
γενικότερα ενός ιστοτόπου. Η CSS είναι μια γλώσσα υπολογιστή προορισμένη να αναπτύσσει
στιλιστικά μια ιστοσελίδα δηλαδή να διαμορφώνει περισσότερα χαρακτηριστικά, χρώματα,
στοίχιση και δίνει περισσότερες δυνατότητες σε σχέση με την html. Για μια όμορφη και
καλοσχεδιασμένη ιστοσελίδα η χρήση της CSS κρίνεται ως απαραίτητη.
Για ένα έγγραφο πχ xhtml θα υπάρχουν παραπάνω από ένα φύλλα στυλ τα οποία περιέχουν
δηλώσεις για την εμφάνιση ενός συγκεκριμένου στοιχείου. Το Φύλλο στυλ που εφαρμόζεται σε ένα
έγγραφο μπορεί να προέρχεται από :
• το συγγραφέα μιας ιστοσελίδας
• το χρήστη του πλοηγού
• τον ίδιο τον πλοηγό, αν έχει το δικό του προκαθορισμένο φύλλο στυλ
Συνεπώς για ένα xhtml στοιχείο θα υπάρχουν παραπάνω από μια δηλώσεις που πιθανόν να είναι
συγκρουόμενες. Το πρότυπο CSS για να επιλύσει παρόμοιες συγκρούσεις έχει καθορίσει μια
αλληλουχία-σειρά στην οποία θα μπουν αυτές οι δηλώσεις και με βάση την οποία θα επιλεγεί πχ η
δήλωση που είναι πρώτη στη σειρά.[24]
Ο αλγόριθμος δημιουργίας αυτής της σειράς-αλληλουχίας είναι ο ακόλουθος:
1. Βρες όλες τις δηλώσεις που εφαρμόζονται στο στοιχείο που μας ενδιαφέρει. Οι δηλώσεις
εφαρμόζονται στο στοιχείο αν ο επιλογέας του το επιλέξει.
2. Ταξινόμησε με βάση τη σημασία (κανονική ή σημαντική με την δήλωση !important) και
προέλευση ( συγγραφέας , χρήστη ή πλοηγός χρήστη). Με αύξουσα σειρά προτεραιότητας:
Δηλώσεις πλοηγού χρήστη
(less important)
Κανονικές δηλώσεις χρήστη
Κανονικές δηλώσεις συγγραφέα
Σημαντικές δηλώσεις συγγραφέα
Σημαντικές δηλώσεις χρήστη
(more important)
Πίνακας 01: Σπουδαιότητα δηλώσεων CSS από τον φυλλομετρητή.
3. Ταξινόμησε τις δηλώσεις ίδιας σημασίας και προέλευσης με κριτήριο την εξειδίκευση του
επιλογέα: οι πιο εξειδικευμένοι επιλογείς υπερισχύουν των πιο γενικών. Τα ψευδό-στοιχεία
και οι ψευδο-κλάσεις λογαριάζονται σαν κανονικά στοιχεία και κλάσεις αντίστοιχα.
4. Τέλος ταξινόμησε ανάλογα με τη σειρά καθορισμού: αν δύο δηλώσεις έχουν το ίδιο βάρος,
προέλευση και εξειδίκευση, αυτή που προσδιορίστηκε τελευταία επικρατεί. Οι δηλώσεις σε
εισαγόμενα φύλλα στυλ θεωρούνται ότι δηλώνονται πριν από τις δηλώσεις στο ίδιο το
φύλλο στυλ .
Αφού λοιπόν προκύψει μια σειρά-αλληλουχία κανόνων εμφάνισης που αφορούν το ίδιο στοιχείο θα
επιλεγεί προς εφαρμογή (για την αποφυγή συγκρούσεων ) η δήλωση που θα είναι τελευταία στην
σειρά, όπως αναλύθηκε στον πίνακα παραπάνω.[23][24]
Γαζής Φώτιος
18
2.2. Σύγχρονες γλώσσες προγραμματισμού ιστοσελίδων
2.2.1. HTML 5
Η HTML5 είναι μια υπό ανάπτυξη γλώσσα σήμανσης για τον Παγκόσμιο Ιστό που όταν ετοιμαστεί
θα είναι η επόμενη μεγάλη έκδοση της HTML (Γλώσσα Υπερκειμένου, HyperText Markup
Language). Η ομάδα Web Hypertext Application Technology Working Group (WHATWG) άρχισε
δουλειά σε αυτή την έκδοση τον Ιούνιο του 2004 με το όνομα Web Applications 1.0. Το
Φεβρουάριο του 2010 το πρότυπο ήταν ακόμη σε κατάσταση "Last Call" στο WHATWG.
Η HTML5 προορίζεται για αντικατάσταση της HTML 4.01, της XHTML 1.0, και της DOM Level 2
HTML. Ο σκοπός είναι η μείωση της ανάγκης για ιδιόκτητα plug-in και πλούσιες διαδικτυακές
εφαρμογές (RIA) όπως το Adobe Flash, το Microsoft Silverlight, το Apache Pivot, και η Sun
JavaFX.
Οι ιδέες πίσω από την HTML5 εμφανίστηκαν αρχικά το 2004 από την ομάδα WHATWG. Η
HTML5 εμπεριέχει το πρότυπο Web Forms 2.0 που είναι επίσης της WHATWG.
Το πρότυπο HTML5 υιοθετήθηκε ως αρχικό βήμα για τις εργασίες της νέας ομάδας εργασίας
HTML του W3C το 2007. Αυτή η ομάδα εργασίας δημοσίευσε το Πρώτο Δημόσιο Working Draft
του προτύπου στις 22 Ιανουαρίου 2008. Το πρότυπο είναι ακόμη υπό ανάπτυξη, και αναμένεται να
παραμείνει έτσι για πολλά χρόνια, παρόλο που μέρη της HTML5 θα τελειώσουν και θα
υποστηριχτούν από περιηγητές πριν το όλο πρότυπο φτάσει στη τελική κατάσταση.[21][22]
2.2.2. CSS 3
Σε αντίθεση με την γλώσσα CSS, η οποία είναι ένα μεγάλο ενιαίο αρχείο που καθορίζει τα διάφορα
χαρακτηριστικά γνωρίσματα του σχεδιασμού της html, η CSS 3 διαιρείται σε αρκετά χωριστά
έγγραφα που ονομάζονται "modules". Κάθε έκδοση css προσθέτει νέες δυνατότητες ή επεκτείνει τα
χαρακτηριστικά που ορίζονται στην προηγούμενη γενιά CSS, διατηρώντας όμως συμβατότητα με
παλαιότερες εκδόσεις. Οι εργασίες για την ανάπτυξη του CSS level 3 ξεκίνησε σχεδόν τον ίδιο
χρόνο της δημοσίευσης της αρχικής CSS 2 πρότασης. Τα πρώτα CSS 3 σχέδια δημοσιεύθηκαν τον
Ιούνιο του 1999.[25]
2.2.3. Javascript
Η JavaScript (JS) είναι διερμηνευμένη γλώσσα προγραμματισμού για ηλεκτρονικούς υπολογιστές.
Αρχικά αποτέλεσε μέρος της υλοποίησης των φυλλομετρητών Ιστού, ώστε τα σενάρια από την
πλευρά του πελάτη (client-side scripts) να μπορούν να επικοινωνούν με τον χρήστη, να
ανταλλάσσουν δεδομένα ασύγχρονα και να αλλάζουν δυναμικά το περιεχόμενο του εγγράφου που
εμφανίζεται.[26]
Η JavaScript είναι μια γλώσσα σεναρίων που βασίζεται στα πρωτότυπα (prototype-based), είναι
δυναμική, με ασθενείς τύπους και έχει συναρτήσεις ως αντικείμενα πρώτης τάξης. Η σύνταξή της
είναι επηρεασμένη από τη C. Η JavaScript αντιγράφει πολλά ονόματα και συμβάσεις
ονοματοδοσίας από τη Java, αλλά γενικά οι δύο αυτές γλώσσες δε σχετίζονται και έχουν πολύ
διαφορετική σημασιολογία. Οι βασικές αρχές σχεδιασμού της JavaScript προέρχονται από τις
γλώσσες προγραμματισμού Self και Scheme. Είναι γλώσσα βασισμένη σε διαφορετικά
προγραμματιστικά παραδείγματα (multi-paradigm), υποστηρίζοντας αντικειμενοστρεφές,
προστακτικό και συναρτησιακό στυλ προγραμματισμού.
Η JavaScript χρησιμοποιείται και σε εφαρμογές εκτός ιστοσελίδων — τέτοια παραδείγματα είναι τα
έγγραφα PDF, οι εξειδικευμένοι φυλλομετρητές (site-specific browsers) και οι μικρές εφαρμογές
Γαζής Φώτιος
19
της επιφάνειας εργασίας (desktop widgets). Οι νεότερες εικονικές μηχανές και πλαίσια ανάπτυξης
για JavaScript (όπως το Node.js) έχουν επίσης κάνει τη JavaScript πιο δημοφιλή για την ανάπτυξη
εφαρμογών Ιστού στην πλευρά του διακομιστή (server-side).
Το πρότυπο της γλώσσας κατά τον οργανισμό τυποποίησης ECMA ονομάζεται
ECMAscript.[26][27][28]
Γαζής Φώτιος
20
3. Content Management Systems (CMS) στην κατασκευή ιστοσελίδων
Μέχρι πριν από λίγα χρόνια, ο μόνος τρόπος για να διατηρηθεί μια ιστοσελίδα ενημερωμένη ήταν
μέσω της διαρκούς ενημέρωσης της χειροκίνητα (ανά σελίδα) με χρήση της κώδικα HTML, που
αναλύθηκε στο προηγούμενο κεφάλαιο. Η αλλαγή καθεμίας από τις σελίδες του κάθε ιστότοπου
καθιστούσε αναγκαίο την ενημέρωση και των υπολοίπων σελίδων, ώστε να διασυνδεθούν και να
λειτουργήσουν σωστά όλες μαζί ως σύνολο. Τα τελευταία χρόνια, όμως, παρέχονται πλατφόρμες
διαχείρισης περιεχομένου όπου αυτόματα τροποποιούν το περιεχόμενο της ιστοσελίδας και
διασνδέουν αυτόματα τις σελίδες μεταξύ τους. Επιπλέον προσφέρουν τις πλέον φιλικές ως προς τον
χρήστη συνθήκες κατασκευής και ανανέωσης, όπου καθιστά ικανούς να κατασκευάσουν
ιστοσελίδες χρήστες που δεν γνωρίζουν καθόλου HTML, CSS και JavaScript.
3.1. Τι είναι τα Συστήματα Διαχείρισης Περιεχομένου ( CMS )
Ο όρος Συστήματα Διαχείρισης Περιεχομένου ( Content Management Systems ή CMS) αναφέρεται
στις εφαρμογές που επιτρέπουν στον χρήστη να διαχειρίζεται το δικτυακό του περιεχόμενο, όπως
κείμενα, εικόνες, πίνακες κ.λπ., με εύκολο τρόπο, συνήθως παρόμοιο με αυτόν της χρήσης ενός
κειμενογράφου. Οι εφαρμογές διαχείρισης περιεχομένου επιτρέπουν την αλλαγή του περιεχόμενου
χωρίς να είναι απαραίτητες ειδικές γνώσεις σχετικές με τη δημιουργία ιστοσελίδων ή γραφικών,
καθώς συνήθως τα κείμενα γράφονται μέσω κάποιων online html editors, ειδικών δηλαδή
κειμενογράφων, παρόμοιων με το MS Word, που επιτρέπουν τη μορφοποίηση των κειμένων όποτε
υπάρχει ανάγκη.
Οι αλλαγές της ιστοσελίδας μπορούν να γίνουν από οποιονδήποτε υπολογιστή που είναι συνδεμένος
στο Διαδίκτυο, χωρίς να χρειάζεται να έχει εγκατεστημένα ειδικά προγράμματα επεξεργασίας
ιστοσελίδων, γραφικών κ.λπ. Μέσω ενός απλού φυλλομετρητή ιστοσελίδων (browser), ο χρήστης
μπορεί να συντάξει ένα κείμενο και να ενημερώσει άμεσα το δικτυακό του τόπο.
Αυτό που αποκαλούμε πολλές φορές "δυναμικό περιεχόμενο" σε ένα website δεν είναι άλλο παρά οι
πληροφορίες που παρουσιάζονται στο site και μπορούν να αλλάξουν από τους ίδιους τους
διαχειριστές του μέσω κάποιας εφαρμογής, η οποία ουσιαστικά μπορεί να εισάγει (προσθέτει),
διορθώνει και να διαγράφει εγγραφές σε πίνακες βάσεων δεδομένων, όπου τις περισσότερες φορές
καταχωρούνται όλες αυτές οι πληροφορίες.
Αυτό σημαίνει ότι δεν χρειάζεται να δημιουργηθούν πολλές ξεχωριστές ιστοσελίδες για την
παρουσίαση των πληροφοριών στην ιστοσελίδα, αλλά αρκεί ένας ενιαίος σχεδιασμός στα σημεία
όπου θέλουμε να εμφανίζεται το περιεχόμενό μας, καθώς και να υπάρχει ο ειδικός σε κάποια
συγκεκριμένη γλώσσα προγραμματισμού (ASP, PHP, Coldfusion, Perl, CGI κ.λπ.), ο οποίος
αναλαμβάνει να εμφανίσει τις σωστές πληροφορίες στις σωστές θέσεις.
Έτσι, για το δικτυακό τόπο μιας εφημερίδας π.χ., που απαιτεί εύλογα καθημερινή ενημέρωση αλλά
δεν χρησιμοποιεί κάποιο σύστημα Content Management, θα πρέπει ο υπεύθυνος για το σχεδιασμό
του (designer) να δημιουργήσει μια σελίδα με τα γραφικά, την πλοήγηση και το περιβάλλον
διεπαφής (interface) του website, ο υπεύθυνος ύλης να τοποθετήσει το περιεχόμενο στα σημεία της
ιστοσελίδας που θέλει, και να ενημερωθούν οι σύνδεσμοι των υπόλοιπων σελίδων ώστε να
Γαζής Φώτιος
21
συνδέονται με την καινούργια. Αφού την αποθηκεύσει, πρέπει να την ανεβάσει στο website μαζί με
τις υπόλοιπες ιστοσελίδες που άλλαξαν.
Αντιθέτως, αν ο δικτυακός τόπος λειτουργεί με χρήση κάποιου συστήματος CM, το μόνο που έχει
να κάνει ο διαχειριστής του είναι να ανοίξει τη σχετική φόρμα εισαγωγής νέου άρθρου στη
διαχειριστική εφαρμογή του website και να γράψει ή να επικολλήσει (copy-paste) τα στοιχεία που
επιθυμεί. Αυτόματα, μετά την καταχώριση γίνονται από το ίδιο το σύστημα διαχείρισης
περιεχομένου όλες οι απαραίτητες ενέργειες, ώστε το άρθρο να είναι άμεσα διαθέσιμο στους
επισκέπτες και όλοι οι σύνδεσμοι προς αυτό ενημερωμένοι.
Με την αυξητική τάση χρήσης των CMS στην Ελλάδα και το εξωτερικό, γίνεται εμφανές ότι το
μέλλον του Διαδικτύου σε ό,τι αφορά περιεχόμενο και πληροφορίες που πρέπει να ανανεώνονται
τακτικά, ανήκει στα προγράμματα διαχείρισης περιεχομένου, αφού προσφέρουν πολλά
πλεονεκτήματα, ταχύτητα και ευκολίες στη χρήση τους. [31][32]
Τα Συστήματα Διαχείρισης Περιεχομένου μπορούν να χρησιμοποιηθούν και να αντικαταστήσουν
ένα συμβόλαιο συντήρησης επάξια. Τα CMS μπορούν να χρησιμοποιηθούν για:
•
Ειδήσεις (εφημερίδες, περιοδικά, πρακτορεία ειδήσεων κ.λπ.)
•
Παρουσιάσεις εταιριών και προσωπικού
•
Καταλόγους προϊόντων
•
Παρουσιάσεις προϊόντων
•
Online υποστήριξη
•
Αγγελίες και ανακοινώσεις
•
Παρουσιάσεις και προβολή γεωγραφικών περιοχών
•
Διαφημίσεις
•
Δελτία Τύπου
•
Όρους και συμβόλαια
•
Χάρτες, κατευθύνσεις, οδηγίες
Ένα ολοκληρωμένο CMS πρέπει να μπορεί να διαχειρίζεται όλες τις δυναμικές πληροφορίες της
ιστοσελίδας και να προσφέρει υπηρεσίες που εξυπηρετούν πλήρως τις ανάγκες των διαχειριστών
του. Επιγραμματικά, μερικά από τα πλεονεκτήματα και τα χαρακτηριστικά ενός ολοκληρωμένου
CMS είναι:
•
Γρήγορη ενημέρωση, διαχείριση και αρχειοθέτηση του περιεχομένου του δικτυακού τόπου
•
Ενημέρωση του περιεχομένου από οπουδήποτε
•
Ταυτόχρονη ενημέρωση από πολλούς χρήστες και διαφορετικούς υπολογιστές
•
Να μην απαιτούνται ειδικές τεχνικές γνώσεις από τους διαχειριστές του
•
Εύκολη χρήση και άμεση γνώση του τελικού αποτελέσματος, όπως γίνεται με τους
γνωστούς κειμενογράφους
•
Δυνατότητα αναζήτησης του περιεχομένου που καταχωρείται και αυτόματη δημιουργία
αρχείου
•
Ασφάλεια και προστασία του σχεδιασμού του site από λανθασμένες ενέργειες, που θα
μπορούσαν να δημιουργήσουν προβλήματα στην εμφάνισή του
•
Διαχωρισμός του περιεχομένου από το σχεδιασμό και την πλοήγηση (navigation) του
δικτυακού τόπου
•
Αλλαγή σχεδιασμού ή τρόπου πλοήγησης χωρίς να είναι απαραίτητη η ενημέρωση όλων των
σελίδων από τον ίδιο το χρήστη
Γαζής Φώτιος
22
•
Αυτόματη δημιουργία των συνδέσμων μεταξύ των σελίδων και αποφυγή προβλημάτων
ανύπαρκτων σελίδων (404 error pages)
•
Μικρότερος φόρτος στον εξυπηρετητή (server) και χρήση λιγότερου χώρου, αφού δεν
υπάρχουν πολλές επαναλαμβανόμενες στατικές σελίδες, από τη στιγμή που η ανάπτυξη των
σελίδων γίνεται δυναμικά
•
Όλο το περιεχόμενο καταχωρείται στην/στις βάσεις δεδομένων, τις οποίες μπορούμε πιο
εύκολα και γρήγορα να τις προστατεύσουμε τηρώντας αντίγραφα ασφαλείας
•
Εφαρμογή διαχείρισης και προβολής διαφημιστικών banners, δημοσκοπήσεων και
παραμετροποίησης (personalisation)
•
Δυνατότητα παρουσίασης του περιεχομένου σε συνεργαζόμενα sites (syndication)
•
Στατιστικά
•
Διαχείριση μελών
•
Newsletters
•
Forum.
Γαζής Φώτιος
23
3.2. Δημοφιλέστερα CMS
Τα WordPress, Joomla! και Drupal είναι τα τρία δημοφιλέστερα συστήματα διαχείρισης
περιεχομένου. Τα δύο τελευταία ανταγωνίζονταν εδώ και καιρό για την πρώτη θέση στα CMS
αφού το WordPress μέχρι πρόσφατα θεωρούταν ως μία πλατφόρμα blogging και μόνο τα
τελευταία δύο χρόνια άρχισε να αναπτύσσεται ως ένα ολοκληρωμένο σύστημα διαχείρισης
περιεχομένου, φτάνοντας μάλιστα στην πρώτη θέση στη χρήση από δικτυακού τόπους
Και τα τρία συστήματα είναι ανοιχτού κώδικα και έχουν αναπτυχθεί με βοήθεια από χιλιάδες μέλη
από τις αντίστοιχες κοινότητες. Καθένα από αυτά έχει πλεονεκτήματα και μειονεκτήματα, αλλά
ουσιαστικά μπορεί να χρησιμοποιηθεί οποιοδήποτε από τα τρία για την δημιουργία
αποτελεσματικών και επαγγελματικής εμφάνισης ιστότοπων, με μεγάλη γκάμα δυνατοτήτων και
για οποιαδήποτε χρήση, από ένα απλό προσωπικό blog έως πλήρες e- commerce site.
Πίνακας 02: Ποσοστό χρήσης CMS. (Πηγή: http://w3techs.com)
Στον προηγούμενο πίνακα φαίνεται η ξεκάθαρη προτίμηση του WordPress στη χρήση των CMS από
ιστότοπους (12.7% συνολικά και 55% από ιστότοπους που χρησιμοποιούν CMS) ακολουθεί το
Joomla! (με 2.4% και 11% αντίστοιχα) και τρίτο το Drupal. [29][30]
Γαζής Φώτιος
24
3.2.1. Wordpress
Το WordPress μπορεί να χρησιμοποιηθεί για να δημιουργηθούν γρήγορα στατικές ή δυναμικές
σελίδες, με plug-ins που υποστηρίζουν από το ηλεκτρονικό εμπόριο, παρακολούθηση στατιστικών
σε ιστοσελίδες, μέχρι τη βελτίωση της SEO, και πολλά άλλα. Υπάρχουν χιλιάδες θέματα και plugins διαθέσιμα για τη δημιουργία ενός αποτελεσματικού, με επαγγελματική εμφάνιση δικτυακού
τόπου μέσα σε λίγα λεπτά.
Το WordPress είναι η απλούστερη από τα τρία CMS ως προς τη δημιουργία της ιστοσελίδας και τη
χρήση/τροποποίηση της, καθώς ένα ευρύ φάσμα εφαρμογών είναι προεγκατεστημένο. Υπάρχουν
πολλά διαθέσιμα WordPress plug-ins για διάφορες εφαρμογές (όπως π.χ. ηλεκτρονικό εμπόριο),
αλλά είναι προς το παρόν περιορισμένα σε σύγκριση με τους ανταγωνιστές του και σε πρώιμο
στάδιο, συνεπώς το WordPress δεν θα ήταν μια καλή επιλογή εάν απαιτούνται επεκτάσημες
δυνατότητες από τον ιστότοπο μας.
Το WordPress είναι επίσης μια κακή επιλογή, αν υπάρχει ανάγκη για πολλή προσαρμογή, επειδή ο
λόγος που το WordPress δημιουργήθηκε ήταν να αποφευχθεί η ανάγκη για τροποποιήσεις. Είναι
σκόπιμα μη-φιλικό προς τον προγραμματιστή, και τυχόν τροποποιήσεις πέραν εκείνων που είναι
συνυφασμένες με το WordPress (όπως η προσθήκη plug-ins και η τροποποίηση απλών ρυθμίσεων
στον κώδικα HTML) θα μπορούσαν να χαθούν ή καταστραφούν κατά την αναβάθμιση (version
update) [32][33]
Πλεονεκτήματα
• Απλό στη χρήση - Αποφεύγονται οι πολλές τροποποιήσεις
• Άριστο για blogging και για διαμοιρασμό ιδεών με διαδοχικό τρόπο
• Ακόμα και οι πιο ηλικιωμένοι χρήστες μπορούν να το συνηθίσουν γρήγορα
Μειονεκτήματα
• Δεν είναι φιλικό προς τον προγραμματιστή
• Η κοινότητα φαίνεται να κάνει συχνά παράπονα
• Οι αναβαθμίσεις συνήθως φέρνουν περισσότερα σφάλματα από αυτά που διορθώνουν.
3.2.2. Joomla
Το Joomla είναι ένα πλήρες σύστημα διαχείρισης περιεχομένου (CMS) γεμάτο δυνατότητες αλλά
και ταυτόχρονα εξαιρετικά ευέλικτο και φιλικό. Είναι εφαρμογή που χρησιμοποιείται για
δημοσίευση στο διαδίκτυο μιας προσωπικής ιστοσελίδας, αλλά και ενός ολόκληρου εταιρικού
δικτυακού τόπου. Είναι προσαρμόσιμο σε περιβάλλοντα επιχειρηματικής κλίμακας όπως τα
intranets μεγάλων επιχειρήσεων ή οργανισμών. Οι δυνατότητες επέκτασής του είναι πρακτικά
απεριόριστες.
Το Joomla είναι εφαρμογή ανοικτού κώδικα. Αυτό σημαίνει ότι η χρήση του είναι απολύτως
δωρεάν. Είμαστε ελεύθεροι να το χρησιμοποιούμε, να το τροποποιούμε και να διερευνούμε τις
δυνατότητές του χωρίς να πρέπει να πληρώσουμε κάποια άδεια χρήσης.
Η λειτουργία του είναι απλή, εγκαθίσταται σε έναν κεντρικό υπολογιστή, τον web server. Ο
χρήστης, εμείς δηλαδή, έχει πρόσβαση στο περιβάλλον διαχείρισης μέσω ενός φυλλομετρητή
(browser), όπως είναι ο Internet Explorer, ο Firefox ή οποιοσδήποτε άλλος.
Γαζής Φώτιος
25
Το Joomla είναι βραβευμένο ως ένα από τα καλύτερα σύστημα διαχείρισης περιεχομένου (CMS)
ανοικτού κώδικα στον κόσμο, το οποίο βασίζεται στην αρχιτεκτονική PHP / MySQL. Πολλά
χαρακτηριστικά του, όπως η ευχρηστία και δυνατότητα επέκτασης του, έχουν καταστήσει το Joomla
ως το δημοφιλέστερο εργαλείο για κατασκευή ιστοτόπων.[35][34][36]
Τα πλεονεκτήματα της πλατφόρμας Joomla είναι:
•
•
•
•
•
•
•
•
Η ευκολία στην προσθήκη περιεχομένου στον ιστότοπο από οποιονδήποτε υπολογιστή
διαθέτει σύνδεση στο διαδίκτυο.
Δυνατότητα συνεργασίας με όσους μπορούν να συμβάλουν στην επεξεργασία του
περιεχομένου από οποιονδήποτε υπολογιστή με σύνδεση στο διαδίκτυο και με καθορισμό
του πλαισίου των αρμοδιοτήτων τους.
Δημοσίευση απεριόριστων σελίδων, καθώς επίσης δυνατότητα αναζήτησης και
αρχειοθέτησης όλου του περιεχομένου.
Ενσωματωμένη υποστήριξη διαφημιστικών banners για προώθηση προϊόντων και
υπηρεσιών καθώς και υποστήριξη RSS feeds.
To Joomla υποστηρίζει εκατοντάδες πρόσθετες εφαρμογές (extensions) που επεκτείνουν τη
λειτουργικότητα του όπως forum, photo galleries, βιβλιοθήκες αρχείων, βιβλία επισκεπτών
και φόρμες επικοινωνίας.
Είναι πολύγλωσσικο με προεγκατεστημένο (built-in ) σύστημα διαχείρησης 2 ή
περισσοτέρων γλώσσεων.
Συμβατότητα με όλα τα λειτουργικά συστήματα όπως, Linux, FreeBSD, Mac OS X Server,
Solaris και AIX.
Επίσης διαθέτει ισχυρό API διευκολύνοντας έτσι την ανάπτυξη εξελιγμένων επεκτάσεων
που διευρύνει τη δύναμη του Joomla προς απεριόριστες κατευθύνσεις.
Γαζής Φώτιος
26
3.2.3. Drupal
Το Drupal είναι ένα προηγμένο σύστημα διαχείρισης περιεχομένου το οποίο είναι ιδιαίτερα
δημοφιλές σε προγραμματιστές, Ωστόσο και οι υπόλοιποι χρήστες μπορούν να μάθουν
χρησιμοποιούν το σύστημα. Το Drupal έχει πολλές περισσότερες ετικέτες και λειτουργίες από το
Joomla!, αυτή η ιδιότητα το κάνει ισχυρότερο πρόγραμμα προς χρήση. Εάν όμως ο χρήστης δεν
έχει καλή επαφή με κώδικα, η εμπειρία χρήσης του μπορεί να μετατραπεί σε μια πραγματική
δοκιμασία, αντίθετα αν ο χρήστης έχει ευχέρεια με τον προγραμματισμό μπορεί να δημιουργήσει
πολύ πιο αποτελεσματικούς ιστότοπους με το Drupal παρά με οτιδήποτε άλλο.
Το Drupal έχει μια ισχυρή κοινότητα υποστήριξης, αλλά η δημιουργία ενός ιστότοπου και η
εκμετάλλευση του στο έπακρο με το Drupal, πιθανότατα θα απαιτούσε περισσότερο χρόνο και
χρήματα σε σχέση με τις εναλλακτικές λύσεις. Αντίθετα το Drupal εξοικονομεί χρήματα στην
περίπτωση που έχουμε περισσότερους από έναν ιστότοπους καθώς η διαχείριση μπορεί να γίνει
από ένα back-end και να χρησιμοποιηθεί μία βάση δεδομένων.[37][38][39]
Πλεονεκτήματα
• Εξαιρετικά φιλικό προς τον προγραμματιστή
• Ισχυρή κοινότητα που βοηθάει στην κατανόηση των δεκάδων εκατοντάδων λειτουργιών
και ετικετών που είναι διαθέσιμα
• Μπορεί να χρησιμοποιηθεί για τη δημιουργία εξαιρετικών ιστότοπων με υψηλότερες
επιδόσεις και περισσότερες λειτουργίες από αντίστοιχους των ανταγωνιστικών CMS.
Μειονεκτήματα
• Δεν είναι φιλικό προς τον σχεδιαστή και τον απλό χρήστη. Για να κάνεις λίγο πιο σύνθετα
πράγματα είναι απαραίτητη η γνώση κώδικα.
• Τα διαθέσιμα θέματα εμφάνισης μειονεκτούν δραματικά σε σχέση με των ανταγωνιστών.
• Η δημοσίευση ενός ιστότοπου με Drupal μπορεί να στοιχίσει περισσότερο χρόνο και
χρήμα σε σχέση με το WordPress ή το Joomla!
Γαζής Φώτιος
27
4. Μελέτη περίπτωσης: Δικτυακός
Μηχανικών ΤΕΙ Πειραιά
χώρος
Τμήματος
Ηλεκτρονικών
4.1. Εισαγωγή
Κατά την μελέτη για την ανάπτυξη του νέου δικτυακού ιστότοπου για τις ανάγκες του τμήματος,
είχαμε κατά νου δύο βασικά θέματα.
• Επίλυση τεχνικών θεμάτων και θεμάτων ασφαλείας
• Θεμάτων περιεχομένου και κάλυψη ελλείψεων από την προηγούμενη ιστοσελίδα
• Θεμάτων χρηστικότητας για την καθημερινή ανανέωση του περιεχομένου του ιστότοπου
Για να καλυφθούν οι παραπάνω 2 από τις 3 βασικές ανάγκες από την νέα ιστοσελίδα, επιλέχθηκε
να χρησιμοποιηθεί μια νεότερη γενιά της προϋπάρχουσας πλατφόρμας Joomla! και πιο
συγκεκριμένα η γενιά 3.0 της παραπάνω πλατφόρμας. Για την υπάρχουσα ιστοσελίδα του
τμήματος είχε χρησιμοποιηθεί η γενιά 1.0 της πλατφόρμας, για την οποία υπήρχε μεγάλη ανάγκη
για αναβάθμιση. Με αυτό τον τρόπο καλύψαμε εν μέρει τα θέματα ασφαλείας του παλιου
ιστότοπου, όπως επίσης και τα θέματα χρηστικότητας για την καθημερινή ανανέωση του
περιεχομένου του ιστότοπου εφόσον επιλέξαμε μία ήδη γνωστή πλατφόρμα με παρόμοιο User
Interface.
Για την κάλυψη μέρους των τεχνικών θεμάτων βρεθήκαμε στην ανάγκη να καλύψουμε ελλείψεις
από την προηγούμενη ιστοσελίδα. Πραγματοποιήθηκε έρευνα για τις ανάγκες των φοιτητών από
την ιστοσελίδα του τμήματος τους, που μέχρι τώρα δεν καλύπτονταν, όπως για παράδειγμα
εύκολη πρόσβαση στις ανακοινώσεις του τμήματος, πρόσβαση στην ιστοσελίδα από φορητή
συσκευή, ενημέρωση φοιτητών για μείζονα θέματα (όπως τις διαθέσιμες πτυχιακές εργασίες)
κ.τ.λ. Αυτές οι ανάγκες, εν μέρει, προκύπτουν από την διεύρυνση της χρήσης του δικτυακού
τόπου του τμήματος για ζητήματα που μέχρι πρότινος δεν υπήρχαν. Η εξέλιξη του internet, που
όλο και περισσότερο μπαίνει στις ζωές μας και γίνεται ένα απαραίτητο εργαλείο ενημέρωσης,
δημιουργεί όλο και περισσότερες ανάγκες για ένα τμήμα ανωτάτης εκπαίδευσης να ενημερωθεί
και να πληροφορήσει για όλο και περισσότερα ζητήματα. Έτσι ερχόμαστε και στα θέματα
ελλείψεων περιεχομένου από την προηγούμενη ιστοσελίδα
4.2. Υπάρχουσα κατάσταση
4.2.1. Joomla 1.5
Η προηγούμενη ιστοσελίδα του τμήματος ήταν κατασκευασμένη με την ίδια πλατφόρμα
διαχείρισης περιεχομένου ( Joomla ), όμως δύο γενιές παλαιότερη. Η ανάγκη για αναβάθμιση
ήταν μεγάλη, κυρίως για τεχνικά ζητήματα και πιθανά θέματα ασφαλείας. Όμως το migration,
όπως ονομάζεται το update για αλλαγή της έκδοσης του Joomla 1.5 σε Joomla 3.0 θα
δημιουργούσε πολλές ασυμβατότητες σε υπάρχουσες σελίδες. Έτσι αποφασίστηκε η δημιουργία
μίας καθαρής εγκατάστασης Joomla 3.0 και η κατασκευή εξ αρχής της ιστοσελίδας σύμφωνη με
τα νέα πρότυπα που θέσαμε.
Γαζής Φώτιος
28
4.2.2. Artisteer template
Στην παλαιότερη ιστοσελίδα του τμήματος προϋπήρχε, όπως αναφέραμε παραπάνω η έκδοση 1.5
του Joomla. Στην πλατφόρμα είχε επιλεγεί για τον σχεδιασμό (template) ένα θέμα
κατασκευασμένο με το πρόγραμμα Artisteer. Το θέμα αυτό δεν είχε δυναμική απόκριση για
φορητές συσκευές, πράγμα που δεν κάλυπτε τις επιμέρους ανάγκες της νέας ιστοσελίδας του
τμήματος.
Η ανάγκη για αλλαγή της έκδοσης του Joomla σε συνδυασμό με την αλλαγή του θέματος
(template) μας άφησε σαν μόνη επιλογή την κατασκευή εξ αρχής όλης της ιστοσελίδας του
τμήματος.
4.3. Προβλήματα και περιορισμοί
4.3.1. Ασφάλεια
Χωρίς δεύτερη σκέψη, το σημαντικότερο πρόβλημα σε μία ιστοσελίδα ενός δημοσίου ιδρύματος
που εκπέμπει ζωντανά 24 ώρες το 24ωρο είναι η ασφάλεια. Η υποστήριξη της έκδοσης του
Joomla 1.5 σύμφωνα με την επίσημη ανακοίνωση της κοινότητας, έληξε τον Απρίλιο του 2012.
Ανεπίσημα βέβαια, σύμφωνα με ανακοίνωση τους, η υποστήριξη συνέχισε για όλο το 2012 για
σοβαρά θέματα ασφάλειας και μόνο. Αυτό σημαίνει πως η υποστήριξη της πλατφόρμας που μέχρι
τώρα χρησιμοποιούσαμε για την σελίδα του τμήματος έχει λήξει. Αυτό βέβαια δεν σημαίνει πως η
σελίδα θα σταματήσει να λειτουργεί. Όμως αυτό σημαίνει ότι οι προγραμματιστές της
πλατφόρμας δεν θα ενημερώσουν περεταίρω την πλατφόρμα, πράγμα που σημαίνει ότι
οποιοδήποτε bug ή κενό ασφαλείας θα παραμείνει ως έχει.
Όπως αναφέρουν οι κατασκευαστές στην επίσημη ιστοσελίδα τους, οι νεότερες εκδόσεις της
πλατφόρμας ( Joomla 2.5 +) ενημερώνονται σχετικά εύκολα. Όμως η έκδοση της πλατφόρμας
που χρησιμοποιούσαμε μέχρι τώρα είναι αρκετά στριφνή για να δεχτεί ένα τέτοιο update. Για
άλλη μια φορά επιβεβαιώνεται ως σωστή η επιλογή μας για φρέσκια εγκατάσταση της
πλατφόρμας, και όχι αναβάθμιση της.
Όπως αναφέρεται επίσης στην επίσημη ιστοσελίδα της πλατφόρμας Joomla, ή προτεινόμενη
πλέον έκδοση για οποιαδήποτε εφαρμογή, είναι η έκδοση 3.0 ώστε να αποφευχθούν τυχόν
προβλήματα στην αναβάθμιση ( migration) αν επιλεγεί Joomla 2.5 , καθώς θα υπάρξει στο μέλλον
ανάγκη για ενημέρωση στην έκδοση 3.0. Η πλατφόρμα στην έκδοση 3.0 μας δίνει υποστήριξη
μέχρι το τέλος του 2016, καθώς και ευκολότερο migration στις νεότερες εκδόσεις.[34]
4.3.2. Χρηστικότητα
Η παλαιότερη έκδοση του Joomla «κουβαλούσε» αρκετές παραξενιές αλλά και δυσλειτουργίες
από τον πρόγονο του , την γνωστή πλατφόρμα Mambo, όπου ήταν το αρχικό όνομα της γνωστής
πλέον πλατφόρμας Joomla, που καθημερινά δυσκόλευαν τους χρήστες της. Απλά θέματα όπως ή
μη δυνατότητα δημιουργίας κενού άρθρου, αλλά και μεγαλύτερων , όπως για παράδειγμα η
αδυναμία χρήσης του μενού διαχείρισης από φορητή συσκευή και η μη δυνατότητα
Γαζής Φώτιος
29
χρησιμοποίησης δυναμικού θέματος στην στο διαχειριστικό μέρος της πλατφόρμας, έχριζαν
αναβάθμισης το συντομότερο δυνατόν. Η νεότερη έκδοση του Joomla έχει σημαντικές
ενημερώσεις αλλά και βελτιώσεις χρηστικότητας σε μείζονα θέματα.
4.3.3. Εμφάνιση
Ένα όχι και τόσο σημαντικό, όμως αξιοσημείωτο ζήτημα είναι η εμφάνιση μιας ιστοσελίδας. Η
εμφάνιση, πέρα από τις εικόνες και τις γραμματοσειρές, περιλαμβάνει θέματα λειτουργικότητας
της ιστοσελίδας, αν σκεφτούμε ότι μια ιστοσελίδα δεν είναι τίποτα παραπάνω από εικόνες και
κείμενο. Εύκολα λοιπόν μπορούμε να καταλάβουμε ότι μία «καλή» ιστοσελίδα από μία «κακή»
θα μπορούσαν κάλλιστα να ορίζονται από την εμφάνιση, ακόμη και αν το περιεχόμενο τους ήταν
ακριβώς το ίδιο. Η ανανέωση του θέματος της ιστοσελίδας είναι ένα πολύ σημαντικό ζήτημα, αν
θέλουμε το νέο περιεχόμενο να ντυθεί με μοντέρνα όψη. Γι’αυτό διαλέξαμε, όπως θα αναλύσουμε
παρακάτω, ένα από τα διασημότερα και πιο μοντέρνα θέματα για εκπαιδευτικά ιδρύματα στον
κόσμο.[35]
4.4. Βελτιώσεις από την ενημέρωση έκδοσης Joomla
Μερικές από τις βασικότερες βελτιώσεις – ενημερώσεις αναφέρονται στην παρακάτω λίστα.
4.4.1. Δυναμική απόκριση ιστοσελίδας ( μέρος για τους επισκέπτες) για σταθερές –
φορητές συσκευές
Joomla 1.5
Joomla 3.0
Πίνακας 03: Σύγκριση εκδόσεων Joomla (Πηγή: http://magazine.joomla.org/) [40]
Γαζής Φώτιος
30
4.4.2. Δυναμική απόκριση ιστοσελίδας ( διαχειριστικό μέρος ) για σταθερές – φορητές
συσκευές
Joomla 1.5
Joomla 3.0
Πίνακας 04: Σύγκριση εκδόσεων Joomla (Πηγή: http://magazine.joomla.org/) [40]
4.4.3. Μενού διαχείρισης τύπου Mambo vs το υπέροχο νέο UX
Joomla 1.5
Joomla 3.0
Πίνακας 05: Σύγκριση εκδόσεων Joomla (Πηγή: http://magazine.joomla.org/) [40]
4.4.4. Ταμπλό με τη νέα εμφάνιση για διαχείριση και στατιστικά
Joomla 1.5
Joomla 3.0
Πίνακας 06: Σύγκριση εκδόσεων Joomla (Πηγή: http://magazine.joomla.org/) [40]
Γαζής Φώτιος
31
4.4.5. Ευκολότερη δημιουργία και διαχείριση άρθρων
Joomla 1.5
Joomla 3.0
Πίνακας 07: Σύγκριση εκδόσεων Joomla (Πηγή: http://magazine.joomla.org/) [40]
4.4.6. Χειροκίνητη ταξινόμηση σειράς vs αυτοματοποιημένη ταξινόμηση με drag & drop
Joomla 1.5
Joomla 3.0
Πίνακας 08: Σύγκριση εκδόσεων Joomla (Πηγή: http://magazine.joomla.org/) [40]
Οι παραπάνω είναι μερικές από τις σημαντικότερες βελτιώσεις της νέας έκδοσης της πλατφόρμας
σε θέματα χρηστικότητας. Παρακάτω υπάρχει μία λίστα με κάποιες επιπλέον βελτιώσεις της
νεότερης σε σύγκριση με την παλαιότερη έκδοση της πλατφόρμας.[40][35]
•
•
•
•
•
•
•
•
•
•
•
Προσθήκη Bootstrap framework και αρχικοποιημένη css για ευκολότερη χρήση από την
τελικό χρήστη.
Επιλογή Less CSS για γρηγορότερη πλοήγηση και λιγότερη χρήση bandwidth.
Εγκατάσταση σε 3 απλά βήματα συγκριτικά με τα 7 πιο σύνθετα βήματα στις παλαιότερες
εκδοσεις.
Αποθήκευση κενού άρθρου, χωρίς προαπαιτούμενα απαραίτητα πεδία.
Οδηγός PHP Memcached
Standardization of tables στην βάση δεδομένων
Προεγκατεστημένα δικαιώματα χρηστών Guest ορισμό δικαιωμάτων μη εγγεγραμμένων
χρηστών της ιστοσελίδας μας
Tags
Εμφάνιση logs στην κονσόλα debug
Βελτιώσεις στην έξυπνη αναζήτηση
Αυτόματος καθαρισμός μη χρησιμοποιημένου ή παλαιότερου κώδικα
Γαζής Φώτιος
32
•
Σημαντικές βελτιώσεις στην πολυγλωσσική λειτουργία και στο association των
components[40][35]
4.5. Επιπλέον ανάγκες
4.5.1. Responsiveness (Ανάγκη για έκδοση σε φορητές συσκευές)
Στην νεότερη γενιά της ιστοσελίδας αναγκαστήκαμε να συμβαδίσουμε με τις αναζητήσεις της
εποχής και να επιλέξουμε την χρήση ενός δυναμικού θέματος. Δυναμικό ονομάζεται ένα θέμα η
μορφή του είναι κωδικοποιημένη έτσι ώστε να υπακούει στις δυνατότητες που ορίζει η συσκευή
που το καλεί. Αυτό πραγματοποιείται με την εντολή "@media" που καλείται μέσα στον κώδικα
CSS (Cascading Style Sheet) της σελίδας. Η εντολή αυτή μας δίνει την δυνατότητα να απαντάμε
με διαφορετικό προκαθορισμένο φύλλο CSS ανάλογα με την ανάλυση οθόνης που θα μας δώσει η
συσκευή που χρησιμοποιεί ο επισκέπτης για να περιηγηθεί στον ιστότοπο μας. Για παράδειγμα αν
κάποιος χρησιμοποιεί ένα smartphone οριζόντια ανάλυση 380px για να προβάλει την ιστοσελίδα
μας θα λάβει διαφορετικό φύλλο CSS απ ότι ένας χρήστης που χρησιμοποιεί ένα σταθερό
υπολογιστή με οριζόντια ανάλυση 1280px.Έτσι η σελίδα θα «ταιριάξει» σωστά στην οριζόντια
ανάλυση της οθόνης του χωρίς να αποκόπτει περιεχόμενο κατά την παρουσίαση της σελίδας. Ο
κάθε χρήστης, με αυτό τον τρόπο, θα λαμβάνει πιο εξειδικευμένη μορφοποίηση της σελίδας
σύμφωνα με τις δυνατότητες της συσκευής του. [41]
4.5.2. Cross platform ( Accessibility )
Οι ανάγκες της σημερινής εποχής για συνεχή ενημέρωση και διαχείριση μιας ιστοσελίδας, μας
έφερε αντιμέτωπους στην ανάγκη να αναζητούμε συνεχώς νέα μέσα για την τροποποίηση της
ιστοσελίδας μας “on the go” . Έτσι η πλατφόρμα που πρέπει να επιλέξουμε, θα πρέπει να μας δίνει
την δυνατότητα να διαχειριστούμε τον ιστότοπο μας σε οποιαδήποτε συσκευή μπορεί να έχει
σύνδεση στο διαδίκτυο, χωρίς να απαιτούνται ειδικά διαχειριστικά προγράμματα ή editors, όπως
συνέβαινε στην παλιά γενιά ιστοσελίδων που ήταν κατασκευασμένες με html κώδικα. Με το
Joomla 3.0, όχι μόνο μπορούμε να διαχειριστούμε την ιστοσελίδα μας χωρίς επιπλέον λογισμικό, (
παρά μόνο χτυπώντας ένα συγκεκριμένο password protected url) αλλά έχουμε πλέον την
δυνατότητα να εισβάλουμε στην διαχείριση και από την φορητή μας συσκευή, το laptop μας, το
tablet μας ή ακόμη και το smartphone μας.[42]
4.5.3. Social networks
Τα social media, όλο και περισσότερο καταλαμβάνουν έδαφος στην καθημερινή περιήγηση μας
στο διαδίκτυο. Σύμφωνα με τελευταία στοιχεία, οι φοιτητές φαίνεται ότι ξοδεύουν το 22% της
ημέρας τους, περιηγούμενοι σε κάποια σελίδα κοινωνικής δικτύωσης. Αυτό αυτομάτως μας
δημιουργεί την ανάγκη να ενσωματώσουμε τα κοινωνικά δίκτυα στην βασική λειτουργία του
ιστότοπου μας, και να παρέχουμε σύνδεση από την σελίδα προς αυτά, αλλά και συνεχή
ενημέρωση των φοιτητών μέσω αυτών. Η πλατφόρμα Joomla στην έκδοση 3.0 μας προσφέρει την
δυνατότητα να διασυνδέσουμε και να προβάλουμε σε οποιαδήποτε θέση και σελίδα, σύνδεση
Γαζής Φώτιος
33
αλλά και δυναμική ενημέρωση των κοινωνικών μας δικτύων. Για την δική μας εφαρμογή
επιλέξαμε να χρησιμοποιήσουμε διασύνδεση με το twitter που θα προσφέρει νέα, ανακοινώσεις
και ενημερώσεις στους φοιτητές, είτε μέσω της ιστοσελίδας μας, είτε μέσω της σελίδας του
τμήματος στο twitter.[43]
4.5.4. Calls to Action
Η έννοια call to action δημιουργήθηκε με την πάροδο των χρόνων στις ιστοσελίδες, και
περιγράφει οποιοδήποτε κουμπί, banner, εικόνα ή κείμενο
παραπέμπει τον χρήστη να το πατήσει για να οδηγηθεί στο
περιεχόμενο της αρεσκείας του. Η νέα αυτή έννοια
δημιουργήθηκε για να καθοδηγεί τους χρήστες με
σύντομο και περιεκτικό τρόπο στο περιεχόμενο που
αναζητούν στον ιστότοπο μας αποφεύγοντας την
διαδικασία της επεξήγησης. Στην ιστοσελίδα του
τμήματος, και κυριότερα στην αρχική μας σελίδα,
χρησιμοποιήθηκε η παραπάνω λογική, ούτως ώστε οι
φοιτητές να καθοδηγούνται με ξεκάθαρα και ευδιάκριτα
banner με εικόνα και κείμενο στο περιεχόμενο που τους Εικόνα 1: Calls to Actions
είναι απαραίτητο. Για παράδειγμα, αν κάποιος φοιτητής
επισκέφτηκε την σελίδα του τμήματος για να δει το ωρολόγιο πρόγραμμα, αρκεί να κάνει ένα κλικ
στο αντίστοιχο banner που προβάλλεται στην αρχική μας σελίδα για να δει το
πρόγραμμα.[44][36][35]
4.5.5. Multilingual
Η ιστοσελίδα ενός τμήματος Ανωτάτης εκπαίδευσης είναι λογικό να μην αρκεστεί στην τοπική
διάλεκτο, αλλά κρίνεται απαραίτητο να προσθέσουμε την διεθνή γλώσσα, τα Αγγλικά. Μια τέτοια
ιστοσελίδα που δέχεται χιλιάδες επισκέπτες τον μήνα, από όλο τον κόσμο, και έχει ως σκοπό να
προβάλει και να αναδείξει το τμήμα μας, θεωρήσαμε
ότι είναι απαραίτητο να παρέχει εύκολη εναλλαγή
μεταξύ της τοπικής μας γλώσσας, αλλά και της
διεθνής. Η πλατφόρμα Joomla 3.0 μας παρέχει
ενσωματωμένη εισαγωγή και διαχείριση πολλαπλών
γλωσσών μέσα από το διαχειριστικό της, που κάνει
ακόμα
πιο
εύκολη
την
κατασκευή
μιας
Εικόνα 2: Multilingual
πολυγλωσσικής ιστοσελίδας. Επιπρόσθετα η 3ή
έκδοση του Joomla, συγκρίνοντας την με τις παλαιότερες εκδόσεις, μας προσφέρει μερικές
επιπλέον χρήσιμες λειτουργίες, όπως για παράδειγμα αναγνώριση της γλώσσας που χρησιμοποιεί
ο χρήστης που ζητάει να δει το περιεχόμενο μας, ώστε να του παρουσιάσει το περιεχόμενο την
δική του γλώσσα, αν αυτό είναι δυνατόν. Επίσης μας παρέχει search engine friendly urls για να
μην «χαλάνε» τα πολυγλωσσικά urls την θέση μας στις μηχανές αναζήτησης, αλλά και εύκολες
επιλογές association ώστε να συνδέουμε το περιεχόμενο μεταξύ του για τις δύο γλώσσες και να
μας εναλλάσσει μεταξύ αυτού χωρίς να μας οδηγεί στην αρχική σελίδα του ιστότοπου.[40][36]
Γαζής Φώτιος
34
5. Σχεδίαση & Ανάλυση Δικτυακού Χώρου
5.1. Εισαγωγή
Στο κεφάλαιο αυτό θα αναλύσουμε την σχεδίαση που ακολουθήσαμε για την δημιουργία της νέας
ιστοσελίδας του τμήματος, καθώς και το λογισμικό και το υλικό που απαιτείται για την υλοποίηση
της. Αρχικά θα αναλυθεί σε πίνακα όλο το κεντρικό δέντρο του ιστότοπου ( κεντρικό μενού ), με
σύντομη περιγραφή για το τι θα περιλαμβάνει η κάθε σελίδα. Στην συνέχεια θα περιγράψουμε πιο
αναλυτικά την δομή σημαντικότερων και πιο σύνθετων σελίδων του δικτυακού μας τόπου.
5.2. Δέντρο Ιστοτόπου ( κεντρικό μενού ) και περιγραφή
ΟΝΟΜΑ ΣΕΛΙΔΑΣ
Το τμήμα
Αρχική σελίδα
ΣΥΝΤΟΜΗ ΠΕΡΙΓΡΑΦΗ ΣΕΛΙΔΑΣ
Αρχική σελίδα ιστότοπου με slider εικόνων και σύντομη
παρουσίαση / καλωσόρισμα, τελευταίες ανακοινώσεις και
χρήσιμους συνδέσμους για δημοφιλές-χρήσιμο περιεχόμενο
προς τον ιστότοπο του τμήματος.
Η ιστορία του τμήματος
Σελίδα με την αναλυτική περιγραφή της ιστορίας του
τμήματος από την ίδρυση του μέχρι και σήμερα.
Στόχοι του τμήματος
Σελίδα με τους αναλυτικούς στόχους του τμήματος, την
αποστολή του τμήματος και την περιγραφή του πτυχίου του
τμήματος Ηλεκτρονικής.
Διοίκηση
Σελίδα με αναλυτική περιγραφή των οργάνων διοίκησης
του τμήματος Ηλεκτρονικής, των διευθυντών και
αναπληρωτών του κάθε τομέα και της γραμματείας του
τμήματος.
Γραμματεία
Σελίδα με γενικές πληροφορίες για την γραμματεία του
τμήματος, όπως τηλέφωνα επικοινωνίας, ωράριο
λειτουργίας και email.
Ωρολόγιο
πρόγραμμα
Σελίδα προβολής του ωρολογίου προγράμματος του
τμήματος του τρέχοντος εξαμήνου.
Χρήσιμα έντυπα
Σελίδα με συνδέσμους που οδηγούν σε χρήσιμα έντυπα για
τους φοιτητές του τμήματος.
Γαζής Φώτιος
35
Χρήσιμοι
σύνδεσμοι
Σελίδα με συνδέσμους που οδηγούν σε χρήσιμες σελίδες για
τους φοιτητές του τμήματος.
Εκδηλώσεις
Σελίδα με συνεχή ενημέρωση για τις εκδηλώσεις που
πραγματοποιούνται στο τμήμα Ηλεκτρονικής.
Χορηγίες
Σελίδα που περιέχει τις χορηγίες που πραγματοποιούνται
προς το τμήμα Ηλεκτρονικής.
Συνεργασίες
Σελίδα
που
περιέχει
τις
συνεργασίες
πραγματοποιούνται με το τμήμα Ηλεκτρονικής.
που
Προπτυχιακά
Σπουδές
Οδηγός σπουδών Σελίδα με περιγραφή της διάρθρωσης του προπτυχιακού
προγράμματος σπουδών του τμήματος.
Κανονισμός
προπτυχιακών
σπουδών
Σελίδα με περιγραφή του κανονισμού του προπτυχιακού
προγράμματος σπουδών του τμήματος.
Προπτυχιακά
μαθήματα
Σελίδες κατηγοριοποιημένες ανά εξάμηνο και στην
συνέχεια ανά μάθημα, με αναλυτική περιγραφή των
μαθημάτων ανά εξάμηνο και στην συνέχεια των μαθημάτων
ξεχωριστά, με αναλυτικά στοιχεία του κάθε μαθήματος,
περιγραφή του μαθήματος και βιβλιογραφία.
Ωρολόγιο
Πρόγραμμα
Ωρολόγιο πρόγραμμα των μαθημάτων ανά εξάμηνο
Σύμβουλοι
Καθηγητές
Σελίδα με σύνδεσμο που οδηγεί σε έγγραφο με τους
συμβούλους καθηγητές για το τρέχον ακαδημαϊκό έτος.
Μονάδες ECTS
Σελίδα με σύνδεσμο που οδηγεί σε έγγραφο που αναλύει τις
μονάδες ECTS για το τμήμα μας.
Παράρτημα
διπλώματος
Σελίδα με σύνδεσμο που οδηγεί σε έγγραφο με το
παράρτημα διπλώματος του τμήματος.
Πτυχιακή
Σελίδα με περιγραφή της σπουδαιότητας της πτυχιακής
εργασίας και σύνδεσμο προς το έγκρισης & ανάλυσης
πτυχιακής από επιβλέποντα Καθηγητή
Πρακτική
Σελίδα με περιγραφή της σπουδαιότητας της πρακτικής
Γαζής Φώτιος
36
άσκηση
άσκησης
Διαθέσιμα
θέματα
πτυχιακών
Σελίδα με συνεχή ενημέρωση για τα διαθέσιμα θέματα
πτυχιακών εργασιών του τμήματος.
Εργαστήρια
Σελίδα που ενημερώνει για όλα τα διαθέσιμα εργαστήρια
του τμήματος κατηγοριοποιημένα ανά εξάμηνο.
Δ
η
Έρευνα
Μεταπτυχιακά
Μεταπτυχιακά
προγράμματα
τμήματος
Σελίδα με ενημέρωση για τα μεταπτυχιακά προγράμματα
που συμμετέχει το τμήμα ηλεκτρονικής.
Κανονισμός
μεταπτυχιακών
σπουδών
Σελίδα με πληροφορίες
μεταπτυχιακών σπουδών.
Όλα τα
μεταπτυχιακά
του ΤΕΙ
Σελίδα με ενημέρωση για όλα τα μεταπτυχιακά
προγράμματα που συμμετέχει το Τ.Ε.Ι. Πειραιά.
για
τον
κανονισμό
των
Πολιτική έρευνας
Σελίδα που ενημερώνει για την πολιτική έρευνας του
τμήματος Ηλεκτρονικής.
Ερευνητικές περιοχές
Σελίδα που ενημερώνει για τις ερευνητικές περιοχές που
δραστηριοποιείται το τμήμα Ηλεκτρονικής.
Ερευνητικά προγράμματα
Σελίδα που ενημερώνει για τα ερευνητικά προγράμματα
που συμμετέχει το τμήμα Ηλεκτρονικής.
Βραβεία και διακρίσεις
Σελίδα που ενημερώνει για τα βραβεία και τις διακρίσεις
που έχει λάβει το τμήμα Ηλεκτρονικής.
Συνδιοργάνωση
εκδηλώσεων
Σελίδα που ενημερώνει για τα βραβεία τις συνδιοργανώσεις
που έχει συμμετάσχει και συμμετέχει
το τμήμα
Ηλεκτρονικής.
Εκδόσεις
Σελίδα που ενημερώνει για τις εκδόσεις που έχουν
Γαζής Φώτιος
37
Καθηγητές και προσωπικό
πραγματοποιήσει
Ηλεκτρονικής.
οι
καθηγητές
του
τμήματος
Περιοδικά
Σελίδα που ενημερώνει για τις εκδόσεις σε περιοδικά που
έχουν συμμετάσχει οι καθηγητές του τμήματος
Ηλεκτρονικής.
Πρακτικά συνεδρίων
Σελίδα που ενημερώνει για τα Πρακτικά συνεδρίων του
τμήματος Ηλεκτρονικής.
Αρχείο πτυχιακών και
διπλωματικών
Σελίδα με συνδέσμους που οδηγούν σε αρχεία των
πτυχιακών
και
διπλωματικών
εργασιών
κατηγοριοποιημένων ανά ακαδημαϊκό έτος και ανά τομέα.
Εκπαιδευτικό προσωπικό
Σελίδα με λίστα του εκπαιδευτικού προσωπικού του
τμήματος Ηλεκτρονικής, με φωτογραφία και σύντομη
περιγραφή, και σύνδεσμο για αναλυτική περιγραφή και
χρήσιμες πληροφορίες για το προσωπικό του τμήματος.
Καθηγητές
Σελίδα με λίστα των καθηγητών του τμήματος
Ηλεκτρονικής, με φωτογραφία και σύντομη περιγραφή, και
σύνδεσμο για αναλυτική περιγραφή και χρήσιμες
πληροφορίες.
Αναπληρωτές
Καθηγητές
Σελίδα με λίστα των αναπληρωτών καθηγητών του
τμήματος Ηλεκτρονικής, με φωτογραφία και σύντομη
περιγραφή, και σύνδεσμο για αναλυτική περιγραφή και
χρήσιμες πληροφορίες.
Επίκουροι
καθηγητές
Σελίδα με λίστα των επίκουρων καθηγητών του τμήματος
Ηλεκτρονικής, με φωτογραφία και σύντομη περιγραφή, και
σύνδεσμο για αναλυτική περιγραφή και χρήσιμες
πληροφορίες.
Καθηγητές
εφαρμογών
Σελίδα με λίστα των καθηγητών εφαρμογών του τμήματος
Ηλεκτρονικής, με φωτογραφία και σύντομη περιγραφή, και
σύνδεσμο για αναλυτική περιγραφή και χρήσιμες
πληροφορίες.
Ομότιμοι
καθηγητές
Σελίδα με λίστα των ομότιμων καθηγητών του τμήματος
Ηλεκτρονικής, με φωτογραφία και σύντομη περιγραφή, και
Γαζής Φώτιος
38
σύνδεσμο για
πληροφορίες.
Ειδικό Τεχνικό
Προσωπικό
αναλυτική
περιγραφή
και
χρήσιμες
Σελίδα με λίστα του τεχνικού προσωπικού του τμήματος
Ηλεκτρονικής, με φωτογραφία και σύντομη περιγραφή, και
σύνδεσμο για αναλυτική περιγραφή και χρήσιμες
πληροφορίες.
Συνεργαζόμενο
εκπαιδευτικό προσωπικό
Εκπαιδευτικό
προσωπικό επί
συμβάσει
(θεωρία)
Σελίδα με λίστα του εκπαιδευτικού προσωπικού επί
συμβάσει για τις θεωρίες του τμήματος Ηλεκτρονικής, με
φωτογραφία και σύντομη περιγραφή, και σύνδεσμο για
αναλυτική περιγραφή και χρήσιμες πληροφορίες.
Εκπαιδευτικό
προσωπικό επί
συμβάσει
(εργαστήρια)
Σελίδα με λίστα του εκπαιδευτικού προσωπικού επί
συμβάσει για τα εργαστήρια του τμήματος Ηλεκτρονικής,
με φωτογραφία και σύντομη περιγραφή, και σύνδεσμο για
αναλυτική περιγραφή και χρήσιμες πληροφορίες.
Ανακοινώσεις
Σελίδα με όλες τις ανακοινώσεις του τμήματος
κατηγοριοποιημένες ανά ημερομηνία δημοσίευσης, από την
νεότερη προς την παλαιότερη.
Επικοινωνία
Σελίδα με πληροφορίες για την τοποθεσία του τμήματος,
τηλέφωνα επικοινωνίας, email, χάρτη αλλά και φόρμα
επικοινωνίας για αποστολή μηνύματος στην γραμματεία
του τμήματος.
Πίνακας 09: Δέντρο Ιστοτόπου ( κεντρικό μενού ) και περιγραφές
5.3. Επικεφαλίδα Ιστότοπου ( Header )
Στην κορυφή του ιστότοπου, σε όλες τις σελίδες, εμφανίζεται η κορυφή της σελίδας, που συνήθως
ονομάζεται και header της ιστοσελίδας. Στο κομμάτι αυτό συνήθως προβάλλονται το κεντρικό
μενού της σελίδας, αλλά και χρήσιμα εργαλεία για την λειτουργία και αναγνώριση του ιστότοπου.
Το συγκεκριμένο κομμάτι του ιστότοπου θεωρείται πολύ σημαντικό για δύο κυρίως λόγους:
• Προβάλει το κεντρικό μενού σε όλες τις σελίδες
• Προβάλει το λογότυπο της ιστοσελίδας
Γαζής Φώτιος
39
Το κομμάτι της επικεφαλίδας ( header ) ενός ιστότοπου αποτελεί το σημείο κλειδί που κάνει
κάποιον χρήστη. να αναγνωρίζει την ιστοσελίδα που βρίσκεται. Χωρίς αυτό, οι περισσότερες
σελίδες θα έμοιαζαν το ίδιο, ένα κομμάτι κείμενο ( ή οποιοδήποτε άλλο περιεχόμενο ) χωρίς
ταυτότητα και χωρίς «στάμπα» αναγνώρισης. Ο σχεδιασμός και ο χρωματισμός αυτού του
σημείου της σελίδας είναι ιδιαίτερου ενδιαφέροντος, αρχικά διότι προβάλλεται σε όλες τις
σελίδες, αλλά και επειδή, όπως προαναφέραμε, να αναγνωρίσει ότι βρίσκεται στον επίσημο
ιστότοπο του τμήματος μας. Γι αυτό τον λόγο επιλέξαμε για τον σχεδιασμό, το γνωστό σε όλους
έμβλημα του Τ.Ε.Ι. Πειραιά καθώς και μεγάλο ευδιάκριτο λογότυπο με ξεκάθαρα γράμματα και
ευδιάκριτη γραμματοσειρά.
Στο δεξί τμήμα της επικεφαλίδας της σελίδας επιλέξαμε να προβάλουμε έναν σύνδεσμο που
οδηγεί στην επίσημη ιστοσελίδα του Τ.Ε.Ι. Πειραιά , την γραμμή αναζήτησης για το περιεχόμενο
του ιστότοπου, όπως επίσης και τους συνδέσμους εναλλαγής μεταξύ των διαθέσιμων γλωσσών
του ιστοτόπου, για να είναι άμεσα προσβάσιμες από όλους τους χρήστες του δικτυακού μας
τόπου.
Εικόνα 7: Header Δικτυακού τόπου
5.4. Αρχική σελίδα και ανακοινώσεις
Στην αρχική σελίδα του τμήματος δώσαμε ιδιαίτερη σημασία καθώς είναι η κατευθυντήρια οδός
για όλο το περιεχόμενο της ιστοσελίδας. Η δομή και σχεδιασμός που ακολουθήσαμε δίνει
ιδιαίτερη βάση στην ευκολία αναγνώρισης του περιεχομένου από τους φοιτητές.
Χρησιμοποιήσαμε μεγάλες και ξεκάθαρες εικόνες, όπως και σύντομο αλλά περιεκτικό
περιεχόμενο για να καθοδηγήσουμε τους επισκέπτες στις υπόλοιπες σελίδες σύμφωνα με τις
ανάγκες τους.
Στην κορυφή της σελίδας χρησιμοποιήσαμε ένα μεγάλο slider εικόνων, που θα προβάλει συνήθως
4 έως 8 slides με μικρή περιγραφή. Η αρχική εικόνα που περιλάβαμε είναι μια φωτογραφία της
κεντρικής εισόδου του κτηρίου Ζ με ένα κείμενο καλωσορίσματος προς τον επισκέπτη στο τμήμα
μας. Στα επόμενα δύο slides προβάλουμε τα δύο μεταπτυχιακά που συνεργάζεται το τμήμα
ηλεκτρονικής. Το τελευταίο slide επιλέξαμε να το παραχωρήσουμε για σημαντικές ανακοινώσεις,
όπως για παράδειγμα την εγγραφή στην πλατφόρμα δήλωσης βιβλίων του Ευδόξου. Σε όλα τα
slides προσθέτουμε σύντομη περιγραφή για το αντικείμενο της εικόνας, καθώς και σύνδεσμο που
οδηγεί στην ανάλογη σελίδα.
Αμέσως μετά το slider εικόνων, επιλέξαμε να τοποθετήσουμε ένα πρόσθετο, που ονομάζουμε
επιλογέα προφίλ επισκέπτη. Αυτό το πρόσθετο δίνει την δυνατότητα στον επισκέπτη, αν επιθυμεί,
να επιλέξει το προφίλ του, ώστε να του προβάλει πιο προσωποποιημένο περιεχόμενο σύμφωνα με
τις ανάγκες του. Για παράδειγμα, αν ένας φοιτητής επιλέξει το προφίλ που φτιάχτηκε για
φοιτητές, τότε θα οδηγηθεί στην εξειδικευμένη αρχική σελίδα για φοιτητές, η οποία περιλαμβάνει
περιεχόμενο μόνο για φοιτητές, όπως για παράδειγμα το ωρολόγιο πρόγραμμα, το πρόγραμμα
εξετάσεων, ανακοινώσεις του τμήματος κτλ. Αντίστοιχα ένας επισκέπτης αν επιλέξει το προφίλ
επισκέπτη, θα οδηγηθεί στην αρχική σελίδα που φτιάχτηκε ειδικά για τις ανάγκες ενός επισκέπτη,
με μεγαλύτερο χάρτη για να τον καθοδηγήσουμε στο τμήμα, σύνδεσμο προς το εκπαιδευτικό
προσωπικό του τμήματος κτλ.
Γαζής Φώτιος
40
Στην συνέχεια της αρχικής σελίδας, κάτω ακριβώς από τον επιλογέα προφίλ επισκέπτη,
προβάλουμε τις ανακοινώσεις ( στο αριστερό κομμάτι της σελίδας ) και συνδέσμους με εικόνες
και σύντομη περιγραφή που οδηγεί σε χρήσιμο περιεχόμενο της ιστοσελίδας μας, όπως για
παράδειγμα στις εκδηλώσεις του τμήματος, αλλά και εξωτερικούς συνδέσμους όπως αυτόν της
ηλεκτρονικής γραμματείας. Το συγκεκριμένο τμήμα της σελίδας, όπως αναφέραμε και παραπάνω,
μπορεί να αλλάξει αν ο επισκέπτης της σελίδας επιλέξει κάποιο από τα προφίλ επισκέπτη. Αν
επιλέξει κάποιος επισκέπτης κάποιο από τα προφίλ μας, θα οδηγηθεί σε μια από τις τέσσερις
σελίδες με εξειδικευμένο περιεχόμενο σύμφωνα με τις ανάγκες του, αλλά ίδια λογική σχεδίασης.
Σημαντικό είναι να τονίσουμε σε αυτό το σημείο ότι έχουμε δώσει ιδιαίτερη σημασία στην μορφή
προβολής της αρχικής σελίδας από φορητές συσκευές. Έτσι έχουμε σχεδιάσει την αρχική μας
σελίδα έτσι ώστε αν κάποιος επισκεφτεί την σελίδα μας από smartphone ή tablet θα προβάλουμε
αρχικά τις ανακοινώσεις του τμήματος, και στην συνέχεια το υπόλοιπο περιεχόμενο. Αυτό
βοηθάει τους φοιτητές να ενημερωθούν άμεσα όλα τα νέα που έχουν ανακοινωθεί από την
γραμματεία του τμήματος.
Εικόνα 11 : Αρχική σελίδα
5.5. Σελίδες μαθημάτων
Ιδιαίτερη σημασία οφείλαμε να δώσουμε στις σελίδες που προβάλουν τα μαθήματα του
προπτυχιακού κύκλου του τμήματος. Οι σελίδες αυτές είναι μια πηγή πληροφόρησης τόσο για
τους φοιτητές του τμήματος, όσο και για τους επισκέπτες της σελίδας μας, είτε αυτοί είναι
υποψήφιοι φοιτητές, είτε ενδιαφερόμενοι για τον κύκλο σπουδών που εκτελείται στο τμήμα μας.
Γι αυτό έπρεπε να δώσουμε ιδιαίτερη σημασία σε αυτές τις σελίδες, ώστε να περιλαμβάνει όσο το
δυνατόν πληρέστερο και ενημερωμένο περιεχόμενο για το υλικό του μαθήματος, τον στόχο του,
την βιβλιογραφία, τα προσδοκώμενα αποτελέσματα και πολλά άλλα. Έτσι η σελίδα αυτή, ύστερα
από πολύ μελέτη, επιλέχθηκε να ακολουθεί το παρακάτω πρότυπο.
Γενικές πληροφορίες μαθήματος:
Κωδικός μαθήματος γραμματείας, κατηγορία μαθήματος, εξάμηνο παρακολούθησης, ώρες
διαλέξεων την εβδομάδα, ώρες εργαστηρίου την εβδομάδα.
Περιγραφή μαθήματος:
Περιγράφει την δομή του μαθήματος, καθώς και πίνακα αναλυτικής περιγραφής των υποενοτήτων
του μαθήματος για καλύτερη κατανόηση του αντικειμένου του κάθε μαθήματος.
Λέξεις κλειδιά:
Αναφέρει λέξεις κλειδιά που περιγράφουν το μάθημα.
Βιβλιογραφία:
Αναφέρει την βιβλιογραφία που βασίζεται το μάθημα.
Εκπαιδευτικοί στόχοι:
Γαζής Φώτιος
41
Αναλύει τους στόχους που θέτει το κάθε μάθημα, καθώς και την ύλη που θα καλύψει το κάθε
μάθημα.
Προσδοκώμενα αποτελέσματα:
Περιγράφει την γνωστική βάση που θα λάβει ο φοιτητής από το μάθημα, όπως και τα εργαλεία
που θα έχει εξασκηθεί.
Μέθοδος διδασκαλίας:
Περιγράφει την μέθοδο διδασκαλίας που θα εφαρμοστεί κατά την διάρκεια του θεωρητικού αλλά
και πρακτικού μέρους του μαθήματος.
Δικτυακός τόπος Μαθήματος:
Σύνδεσμος που οδηγεί στην ιστοσελίδα του μαθήματος
Διδάσκοντες:
Περιλαμβάνει τα ονόματα των καθηγητών που διδάσκουν το θεωρητικό και πρακτικό μέρος του
μαθήματος, με συνδέσμους που οδηγούν στην προσωπική τους σελίδα.
Εξετάσεις και αξιολόγηση φοιτητών:
Περιγράφει τον τρόπο αξιολόγησης των φοιτητών για το θεωρητικό και πρακτικό μέρος του
μαθήματος.
Εξοπλισμός και βοηθήματα:
Περιγράφει τον εξοπλισμό και τα βοηθήματα που χρησιμοποιούνται στον χώρο του εργαστηρίου
για την εκτέλεση των ασκήσεων.
Κανονισμός λειτουργίας εργαστηρίου:
Σύνδεσμος που οδηγεί στον κανονισμό λειτουργίας του εργαστηριακού χώρου του μαθήματος.
*Το παραπάνω πρότυπο έχει εφαρμοστεί πλήρως στην σελίδα του μαθήματος Δικτύων Η/Υ του κ.
Πατρικάκη Χαράλαμπου
Εικόνα 9 : Κατάλογος Μαθημάτων
Εικόνα 6 : Σελίδα Μαθημάτων
5.6. Σελίδες καθηγητών
Αντίστοιχα με τις σελίδες των μαθημάτων, ιδιαίτερη σημασία οφείλαμε να δώσουμε στις σελίδες
που προβάλουν το εκπαιδευτικό προσωπικό του τμήματος. Οι σελίδες αυτές είναι μια πηγή
πληροφόρησης τόσο για τους φοιτητές του τμήματος, όσο και για τους επισκέπτες της σελίδας
μας, είτε αυτοί είναι υποψήφιοι φοιτητές, είτε ενδιαφερόμενοι για το εκπαιδευτικό προσωπικό που
διδάσκει στο τμήμα μας. Γι αυτό έπρεπε να δώσουμε ιδιαίτερη σημασία σε αυτές τις σελίδες,
ώστε να παρέχει πλήρη στοιχεία επικοινωνίας με το εκπαιδευτικό προσωπικό του τμήματος, αλλά
Γαζής Φώτιος
42
και χρήσιμες πληροφορίες όπως σπουδές, ερευνητικές περιοχές, δημοσιεύσεις κτλ. Έτσι η σελίδα
αυτή, ύστερα από πολύ μελέτη, επιλέχθηκε να ακολουθεί το παρακάτω πρότυπο.
Γενικές πληροφορίες:
Ονοματεπώνυμο, Θέση- τίτλος, τομέας απασχόλησης, email επικοινωνίας , τηλέφωνα
επικοινωνίας, γραφείο, ωράριο υποδοχής φοιτητών και σύνδεσμοι κοινωνικής δικτύωσης.
Σύνδεσμος Ιστοσελίδας:
Περιέχει σύνδεσμο που οδηγεί στην προσωπική σελίδα του καθηγητή.
Σπουδές:
Περιγράφει τις σπουδές του καθηγητή.
Ερευνητικές περιοχές:
Περιγράφει τις ερευνητικές περιοχές που δραστηριοποιείται ο καθηγητής.
Δημοσιεύσεις:
Σύνδεσμος που οδηγεί σε έγγραφο με όλες τις δημοσιεύσεις του έχει συμμετάσχει ο καθηγητής.
Προπτυχιακά μαθήματα:
Αναφέρει όλα τα προπτυχιακά μαθήματα που διδάσκει ο καθηγητής, με σύνδεσμο που οδηγεί
στην σελίδα του κάθε μαθήματος.
Μεταπτυχιακά μαθήματα:
Αναφέρει όλα τα μεταπτυχιακά μαθήματα που διδάσκει ο καθηγητής, με σύνδεσμο που οδηγεί
στην σελίδα του κάθε μαθήματος.
Εικόνα 9: Κατάλογος Καθηγητών
Εικόνα 10: Σελίδα Καθηγητών
5.6.1. Online φόρμα καταχώρησης καθηγητών
Προκειμένου να πραγματοποιηθεί η αποστολή των στοιχείων των καθηγητών, για τις ανάγκες τις
νέας ιστοσελίδας του τμήματος, χρησιμοποιήσαμε μια αυτοματοποιημένη πλατφόρμα
καταχώρησης. Με ένα πρόσθετο που εγκαταστήσαμε στην πλατφόρμα Joomla, δημιουργήσαμε
μια φόρμα καταχώρησης καθηγητή, με όλα τα απαραίτητα πεδία καταχώρησης, όπως
αναφέρονται αναλυτικά και στην προηγούμενη ενότητα. Έτσι, ειδοποιήσαμε την γραμματεία του
τμήματος, να αποστείλει σε όλους τους καθηγητές με μορφή email τον σύνδεσμο που οδηγεί στην
online φόρμα καταχώρησης καθηγητή. Για να αυξήσουμε την ασφάλεια στις καταχωρήσεις των
φορμών, προσθέσαμε ένα επιπλέον πεδίο, το οποίο ονομάσαμε κωδικό επιβεβαίωσης
καταχώρησης. Στο πεδίο αυτό, ο κάθε καθηγητής ζητήθηκε να φέρει τον προσωπικό κωδικό
καταχώρησης στοιχείων, τον οποίο προηγουμένως είχε εκτυπώσει και τοποθετήσει η γραμματεία
στις προσωπικές θυρίδες του κάθε καθηγητή. Με αυτό τον τρόπο, κάθε καταχώρηση φόρμας που
λαμβάναμε, επιβεβαιώναμε την γνησιότητα της από το αρχείο προσωπικών κωδικών των
Γαζής Φώτιος
43
καθηγητών που είχαμε στα χέρια μας. Στην φόρμα καταχώρησης καθηγητών, πέρα από τα
απαραίτητα πεδία που ζητήθηκαν, όπως ακριβώς αναφέρονται παραπάνω, δίναμε την δυνατότητα
αποστολής αρχείο προσωπικής φωτογραφίας και εγγράφου με τις δημοσιεύσεις του κάθε
καθηγητή.
5.7. Σελίδα επικοινωνίας
Η σελίδα επικοινωνίας είναι μια επίσης πολύ σημαντική σελίδα στον ιστότοπο ενός τμήματος
ανωτάτης εκπαίδευσης. Η σελίδα αυτή πρέπει να έχει όλες τις απαραίτητες πληροφορίες ώστε να
μπορεί ο επισκέπτης να επικοινωνήσει ή και να επισκεφτεί το εκπαιδευτικό ίδρυμα. Έτσι στην
σελίδα επικοινωνίας περιλαμβάνεται:
•
•
•
•
•
•
Φωτογραφία από τον χώρο του Τ.Ε.Ι. Πειραιά
Διεύθυνση , περιοχή, Τ.Κ. , πόλη και χώρα
Τηλέφωνα επικοινωνίας με την γραμματεία του τμήματος
Αριθμός ΦΑΞ
Διεύθυνση email επικοινωνίας
Φόρμα επικοινωνίας για διευκόλυνση στην επικοινωνία μέσω email
Εικόνα 12: Σελίδα Επικοινωνίας
5.8. Σελίδα ανακοινώσεων
Η σελίδα των ανακοινώσεων του τμήματος, είναι η τρίτη σε σειρά σημαντικότερη σελίδες του
ιστότοπου του τμήματος. Η σελίδα αυτή θα προβάλει όλες τις ανακοινώσεις που έχουν
δημοσιευτεί από την γραμματεία του τμήματος σε σειρά δημοσίευσης από την πιο πρόσφατη
μέχρι την παλαιότερη. Η συγκεκριμένη σελίδα έχει ιδιαίτερη σημασία εφόσον μέσα από αυτή την
σελίδα θα ενημερώνονται καθημερινά όλοι οι φοιτητές του τμήματος για θέματα που τους
απασχολούν, για ανακοινώσεις εγγραφών σε θεωρίες και εργαστήρια, για αναβολές μαθημάτων ή
εξετάσεων, για ανακοινώσεις πτυχιακών ή θέσεων πρακτικής αλλά και πολλά άλλα.
Γι αυτό τον λόγο δώσαμε μεγάλη σημασία στην παρουσία αυτής της σελίδας, προβάλλοντας
μεγάλες, ευδιάκριτες καταχωρήσεις και τις εμπλουτίσαμε με κατατοπιστικές εικόνες σε κάθε
καταχώρηση σύμφωνα με το θέμα που ενημερώνει η κάθε ανακοίνωση. Με αυτό τον τρόπο ο
ενδιαφερόμενος θα γνωρίζει την φύση της ανακοίνωσης από την εικόνα. Για παράδειγμα, αν
πρόκειται για ανακοίνωση που σχετίζεται με απεργία των ΜΜΕ τότε θα προβάλλεται ένα
λεωφορείο στην εικόνα της ανακοίνωσης.
Εικόνα 13: Σελίδα Ανακοινώσεων
5.8.1. Πρόσθετο προβολής ανακοινώσεων στην αρχική σελίδα
Λόγο της ιδιαίτερης σπουδαιότητας των πρόσφατων ανακοινώσεων για τους φοιτητές του
τμήματος, δεν θα μπορούσε να λείπει η προβολή των πιο πρόσφατων ανακοινώσεων από την
Γαζής Φώτιος
44
αρχική σελίδα του τμήματος. Γι αυτό τον λόγο, επιλέξαμε ένα πρόσθετο, το οποίο μπορεί και
προβάλει τις τελευταίες πέντε ανακοινώσεις της γραμματείας στην αρχική σελίδα του τμήματος.
Μάλιστα, το συγκεκριμένο πρόσθετο, είναι έτσι ρυθμισμένο, ώστε όταν καλείται η έκδοση της
σελίδας για φορητές συσκευές, προβάλλεται πρώτο σε σειρά, πάνω από το υπόλοιπο περιεχόμενο
της αρχικής σελίδας, ώστε να προσφέρει άμεση ενημέρωση των τελευταίων νέων του τμήματος σε
οποιοδήποτε επισκέπτη.
Εικόνα 14: Πρόσθετο Προβολής Ανακοινώσεων Στην Αρχική
5.9. Χάρτης Google
Σε έναν ιστότοπο ανωτάτης εκπαίδευσης δεν θα μπορούσε βέβαια να λείπει ένας χάρτης, που να
προβάλει την τοποθεσία που βρίσκεται το ίδρυμα. Αυτό θα βοηθήσει πολλούς επισκέπτες του
ιδρύματος να εντοπίσουν τον χώρο που στεγάζει το ίδρυμα. Για να καλύψουμε αυτή την ανάγκη
με τον καλύτερο δυνατό τρόπο, εγκαταστήσαμε ένα πρόσθετο για προβολή στου στίγματος του
ιδρύματος σε χάρτη Google Maps. Με αυτό τον τρόπο, προσθέτουμε το στίγμα του ιστότοπου σε
δυναμικό χάρτη, πράγμα που σημαίνει ότι ο επισκέπτης μπορεί να περιηγηθεί στον χάρτη, να
κάνει zoon in και zoom out, ή να τον μετακινήσει, ώστε να κατατοπιστεί με ακρίβεια για την
τοποθεσία που βρίσκεται το ίδρυμα. Επιπρόσθετα, σε προβολή από φορητή συσκευή, με ένα απλό
πάτημα πάνω στον χάρτη, μπορεί με την εφαρμογή τους google να πλοηγηθεί με το smartphone
του στον χώρο του ιδρύματος. Αυτό σίγουρα θα βοηθήσει έναν επισκέπτη στο να εντοπίσει το
ίδρυμα με μεγάλη ευκολία. Το πρόσθετο αυτό επιλέξαμε να το προβάλουμε στο κάτω μέρος του
ιστότοπου μας σε όλες τις σελίδες, ώστε να είναι εύκολα προσβάσιμο από όλους τους
επισκέπτες.[36]
Εικόνα 15 : Πρόσθετο Google Maps
Γαζής Φώτιος
45
6. Υλοποίηση
Σε αυτό το κεφάλαιο θα αναλύσουμε το υλικό και το λογισμικό που χρησιμοποιήσαμε για την
υλοποίηση του στόχου μας. Θα αναλύσουμε αρχικά το hardware που χρειαστήκαμε για την
προετοιμασία και φιλοξενία του ιστότοπου και στην συνέχεια θα αναλύσουμε το απαραίτητο
software που εγκαταστήσαμε για να έχουμε το επιθυμητό αποτέλεσμα.
6.1. Hardware που χρησιμοποιήθηκε
6.1.1. Εξυπηρετητής ( Web Server )
Ορισμός
Εξυπηρετητής ή διακομιστής είναι το υλικό που σε συνδυασμό με το λογισμικό που θα
αναλύσουμε στην επόμενη ενότητα ( Ubuntu Server ) , αναλαμβάνει την παροχή διάφορων
υπηρεσιών, «εξυπηρετώντας» αιτήσεις άλλων προγραμμάτων, γνωστούς ως πελάτες ( clients )
που μπορούν να τρέχουν στον ίδιο υπολογιστή ή σε σύνδεση μέσω δικτύου. Όταν ένας
υπολογιστής εκτελεί κυρίως τέτοια προγράμματα εξυπηρετητές συνεχόμενα, 24 ώρες την ημέρα,
τότε μπορούμε να αναφερθούμε σε όλον τον
υπολογιστή ως εξυπηρετητή, αφού αυτή είναι η κύρια
λειτουργία του. Παρομοίως, ως πελάτη μπορούμε να
θεωρήσουμε είτε κάποιο λογισμικό που επικοινωνεί
και υποβάλει αιτήματα στον εξυπηρετητή, είτε σε όλο
τον υπολογιστή όταν ο εξυπηρετητής είναι άλλος
υπολογιστής και οι 2 υπολογιστές είναι συνδεδεμένοι
σε ένα δίκτυο.
Η επικοινωνία μεταξύ πελάτη και εξυπηρετητή γίνεται
μέσω ενός τοπικού δικτύου, ή ακόμα και μέσω του
Διαδικτύου. σε μεγάλα δίκτυα όπου ο εξυπηρετητής
αναλαμβάνει πολλές εξυπηρετήσεις, είναι συνήθως
υπολογιστής που διαφέρει ως προς τη σύνθεσή του
από άλλους κοινούς υπολογιστές, μιας και οι
δυνατότητες του είναι σαφώς αναβαθμισμένες. Κύρια
χαρακτηριστικά ενός εξυπηρετητή είναι οι
επεξεργαστές που χρησιμοποιεί για την επεξεργασία
των δεδομένων που δέχεται, οι γρήγοροι όπως επίσης Εικόνα 3: Διακομιστής
και μεγάλης χωρητικότητας σκληροί δίσκοι αλλά και
ταχύτατες μνήμες τύπου RAM. Συνήθως συνοδεύεται από σύστημα διπλής τροφοδοσίας (dual
power supply) και από συσκευή αδιάλειπτης παροχής ενέργειας (UPS), για μεγαλύτερη αξιοπιστία
και σιγουριά στις παρεχόμενες υπηρεσίες του. [46][47]
Γαζής Φώτιος
46
Υλικό
Για την φιλοξενία της ιστοσελίδας του τμήματος χρησιμοποιήσαμε ένα πύργο με εξειδικευμένα
περιφεριακά της εταιρίας Fujitsu ειδικά κατασκευασμένος ώστε να αποτελέσει έναν εξυπηρετητή.
Το συγκεκριμένο μηχάνημα δεν απαιτέι εγκατάσταση σε κάποιο rack, εφόσον δεν είναι rack
server, και δεν διαφέρει σε εμφάνιση από έναν σταθερό υπολογιστή οικιακής χρήσης. Τα επιπλέον
χαρακτηριστικά του, που τον κάνουν να διαφέρει όμως από έναν απλό σταθερό υπολογιστή είναι:
• Δύο εξαιρετικά ισχυρά τροφοδοτικά με πολύ χαμιλή πιθανότητα σφάλματος
• Δύο μεγάλης χωρητικότητας αποθήκευσης και λειτουργία παράλληλων δίσκων
αποθήκευσης (τύπου raid )
• Δύο κάρτες δικτύου
• Τέσσερις μνήμες τυχαίας προσπέλασης με πολύ μεγάλη χωρητικότητα
• Δύο επεξεργαστές υψιλής ταχύτητας χρονισμού με 32 threads επεξεργασίας
Τα παραπάνω χαρακτηριστικά είναι αρκετά για να φιλοξενήσουν τον ιστότοπο του τμήματος.
Στην επόμενη ενότητα θα περιγράψουμε το λογισμικό που εγκαταστάθηκε στο μηχάνημα αυτό,
ώστε να αποτελέσει έναν εξυπηρετητή.[45]
6.2. Software που χρησιμοποιήθηκε
6.2.1. XAMPP
Ο υπολογιστής μας μπορεί να μετατραπεί σε ένα διακομιστή, ο οποίος μπορεί να στεγάζει
ιστότοπους τοπικά. Για την μετατροπή του υπολογιστή μας σι διακομιστή, απαιτείται να
ενσωματωθούν απαραίτητα λογισμικά, τα οποία παρέχουν όλες τις υπηρεσίες και τα εργαλεία
ενός διακομιστή για την ανάπτυξη και διαχείριση δικτυακών εφαρμογών.
Localhost
Με το όνομα localhost δηλώνεται ο ίδιος ο υπολογιστής μας, που αντιστοιχεί στην διεύθυνση
127.0.0.1. Το localhost είναι το τυπικό hostname του δικού μας ηλεκτρονικού υπολογιστή.
Εγκαθιστώντας έναν διακομιστή στον τοπικό υπολογιστή μας, μπορούμε να προσπελάσουμε το
τοπικό ιστότοπο με έναν φυλλομετρητή από την διευθυνση http://localhost ή την 127.0.0.1. Με
την μετατροπή του υπολογιστή μας σε ένα διακομιστή, οι προς ανάπτυξη εφαρμογές και ιστότοποι
για το διαδίκτυο, μπορούν να τρέξουν και να δοκιμαστούν τοπικά στον υπολογιστή μας, πριν
μεταφερθούν στον τελικό διακομιστή που θα φιλοξενήσει τον ιστότοπο στο διαδίκτυο.[57][58]
Τα διασημότερα εργαλεία για τη μετατροπή του υπολογιστή μας σε διακομιστή είναι:
•
•
•
Xampp
Wamp
Mamp
free, open source
κατάλληλο για Windows, Linux, MacOS, Solaris
λογισμικό από την Microsoft
κατάλληλο για Windows
λογισμικό από την Apple
κατάλληλο για MacOS
Τα παραπάνω λογισμικά εγκαθιστώνται στον τοπικό υπολογιστή μας χωρίς να απαιτούν σύνδεση
στο διαδίκτυο, και εγκαθστούν τα παρακάτω πακέτα, τα οποία είναι απαραίτητα για την
Γαζής Φώτιος
47
εγκατάσταση και δοκιμή μίας ιστοσελίδας κατασκευασμένης με σύστημα διαχείρισης
περιεχομένου ( CMS ). Μας παρέχει δηλαδή όλα τα απαραίτητα εργαλεία για να ξεκινήσουμε μία
τέτοια εγκατάσταση στην διεύθυνση http://localhost ή 127.0.0.1 σαν να μας φιλοξενούσε ένας
web server στο διαδίκτυο. Τα εργαλεία που παρέχονται είναι τα εξής:
• Apache
• MySQL
• PHP
• SQLite
• phpMyAdmin
Για την ανάπτυξη και σχεδίαση του ιστότοπου του τμήματος σε δοκιμαστικό, τοπικό επίπεδο
χρησιμοποιήθηκε το εργαλείο XAMPP.
Το XAMPP είναι ένα πακέτο προγραμμάτων ελεύθερου λογισμικού,
λογισμικού ανοικτού κώδικα και ανεξαρτήτου πλατφόρμας το οποίο
Εικόνα 4: XAMPP Logo
περιέχει το εξυπηρετητή ιστοσελίδων http Apache, την βάση
δεδομένων MySQL και ένα διερμηνέα για κώδικα γραμμένο σε γλώσσες προγραμματισμού PHP
και Perl.[57][58]
Το XAMPP είναι ακρωνύμιο και αναφέρεται στα παρακάτω αρχικά:
• X (αναφέρεται στο «cross-platform» που σημαίνει λογισμικό ανεξάρτητο πλατφόρμας)
• Apache HTTP εξυπηρετητής
• MySQL
• PHP
• Perl
Το XAMPP είναι ένα ελεύθερο λογισμικό το οποίο περιέχει ένα εξυπηρετητή ιστοσελίδων το
οποίο μπορεί να εξυπηρετεί και δυναμικές ιστοσελίδες τεχνολογίας PHP/MySQL. Είναι
ανεξάρτητο πλατφόρμας και τρέχει σε Microsoft Windows, Linux, Solaris, and Mac OS X και
χρησιμοποιείται ως πλατφόρμα για την σχεδίαση και ανάπτυξη ιστοσελίδων με την τεχνολογίες
όπως PHP, JSP και Servlets.
Το XAMPP παρέχει τα εξής πακέτα:
• Apache 2.4.7
• MySQL 5.5.34
• PHP 5.4.22
• phpMyAdmin 4.0.9
• FileZilla FTP Server 0.9.41
• Tomcat 7.0.42 (with mod_proxy_ajp as connector)
• Strawberry Perl 5.16.3.1 Portable
• XAMPP Control Panel 3.2.1 (from hackattack142)
Όταν το XAMPP εγκατασταθεί στον τοπικό υπολογιστή διαχειρίζεται τον localhost ως ένα
απομακρυσμένο κόμβο, ο οποίος συνδέεται με το πρωτόκολλο μεταφοράς αρχείων FTP. Η
σύνδεση στον localhost μέσω του FTP μπορεί να γίνει με το όνομα χρήστη «newuser» και το
Γαζής Φώτιος
48
κωδικό «wampp». Για την βάση δεδομένων MySQL υπάρχει ο χρήστης «root» χωρίς κωδικό
πρόσβασης.[57][58][59][60]
6.2.2. Ubuntu Server
Γενικές πληροφορίες
Το λογισμικό Ubuntu είναι ένα ανοικτού κώδικα, ελεύθερο και δωρεάν λειτουργικό σύστημα
βασισμένο στον πυρήνα Linux. Το όνομά του προέρχεται από την έννοια ubuntu των Ζουλού και
Κόσα (Xhosa), που σημαίνει «Ανθρωπότητα». Το Ubuntu ξεκίνησε το 2004, βασισμένο στη
διανομή Debian. Ο στόχος του Ubuntu είναι η παροχή ενός διαρκώς ενημερωμένου, σταθερού
λειτουργικού συστήματος για τον μέσο χρήστη, με ενισχυμένη έμφαση στην ευκολία χρήσης και
εγκατάστασης. Το Ubuntu έχει χαρακτηριστεί ως η πιο δημοφιλής διανομή Linux για
επιτραπέζιους υπολογιστές, διεκδικώντας περίπου το 30% επί του συνόλου των Linux
συστημάτων σύμφωνα με έρευνα του 2007.[57]
Το Ubuntu είναι ελεύθερο και ανοικτού κώδικα λειτουργικό, που σημαίνει ότι διανέμεται χωρίς
χρέωση αλλά και ότι μπορεί να βελτιωθεί από κάθε προγραμματιστή που θέλει να συμμετάσχει
στην ομάδα ανάπτυξης. Το Ubuntu χρηματοδοτείται από την Canonical Ltd., μία ιδιωτική
επιχείρηση που ιδρύθηκε από τον Νοτιοαφρικανό επιχειρηματία Μαρκ Σάτλγουορθ. Αντί να
πωλεί το Ubuntu καθεαυτό, η Canonical καταγράφει έσοδα από την επί πληρωμή τεχνική
υποστήριξη που παρέχει για το προϊόν της. Διατηρώντας το Ubuntu ελεύθερο και ανοικτό η
Canonical δέχεται και την βοήθεια τρίτων προγραμματιστών για την ανάπτυξή του. Χρησιμοποιεί
επίσης εφαρμογές και κώδικα της διανομής Debian από την οποία και προέκυψε αρχικά το 2004.
To Kubuntu και το Xubuntu είναι επίσημες παραλλαγές του Ubuntu, που στόχο έχουν τον
συνδυασμό των KDE και Xfce με τον πυρήνα του Ubuntu (κατ' εξοχήν το Ubuntu χρησιμοποιεί το
GNOME περιβάλλον εργασίας). Το Edubuntu είναι μια επίσημη εναλλακτική έκδοση
σχεδιασμένη για σχολική εκπαίδευση και θα ήταν εξίσου κατάλληλη για χρήση από παιδιά στο
σπίτι. Το Gobuntu ήταν μια επίσημη εναλλακτική έκδοση που στόχο είχε την αυστηρή τήρηση
των τεσσάρων ελευθεριών του Ιδρύματος Ελεύθερου Λογισμικού. Το Ubuntu JeOS είναι η πιο
πρόσφατη επίσημη εναλλακτική έκδοση. Το JeOS είναι το προσχέδιο για το πως ένα λειτουργικό
σύστημα θα έπρεπε να είναι στα πλαίσια μιας εικονικής συσκευής.
Το σύνθημα του Ubuntu είναι “Linux για ανθρώπους” (Linux for human beings), που περιγράφει
τον πρωταρχικό σκοπό – τη δημιουργία μίας Linux διανομής περισσότερο εύκολης στη χρήση από
τις υπόλοιπες. Η ευκολία της χρήσης του Ubuntu έχει οδηγήσει, με ορισμένες τροποποιήσεις,
στην υιοθέτησή του από τις κυβερνήσεις της Γαλλίας και της FYROM για χρήση από το κοινό,
τους μαθητές και τις υπηρεσίες τους.[54][55]
Ελάχιστες απαιτήσεις συστήματος
Οι ελάχιστες απαιτήσεις για ικανοποιητικές επιδόσεις είναι:
• 300 MHz x86 επεξεργαστής
• 128 MB μνήμη (RAM)
• Τουλάχιστον 2 GB χώρο στο σκληρό δίσκο (για πλήρη εγκατάσταση και χώρο swap)
• VGA κάρτα γραφικών με δυνατότητα απεικόνισης 640x480
• CD-ROM[56]
Γαζής Φώτιος
49
6.2.2.1.
Τείχος προστασίας (Ubuntu Firewall)
Ορισμός
Στην επιστήμη των υπολογιστών ο όρος firewall ή τείχος προστασίας χρησιμοποιείται για να
δηλώσει κάποια συσκευή ή πρόγραμμα που είναι έτσι ρυθμισμένο ούτως ώστε να επιτρέπει ή να
απορρίπτει πακέτα δεδομένων που περνούν από ένα δίκτυο υπολογιστών σε ένα άλλο.
Η κύρια λειτουργία ενός firewall είναι η ρύθμιση της κυκλοφορίας δεδομένων ανάμεσα σε δύο
δίκτυα υπολογιστών. Συνήθως τα δύο αυτά δίκτυα είναι το Διαδίκτυο και το τοπικό/εταιρικό
δίκτυο. Ένα firewall παρεμβάλλεται ανάμεσα σε δύο δίκτυα που έχουν διαφορετικό επίπεδο
εμπιστοσύνης. Το Διαδίκτυο έχει μικρό βαθμό εμπιστοσύνης (low level of trust), ενώ το εταιρικό
δίκτυο ή το οικιακό δίκτυο διαθέτουν τον μέγιστο βαθμό εμπιστοσύνης. Ένα περιμετρικό δίκτυο
(perimeter network) ή μία Demilitarized Zone (DMZ) διαθέτουν μεσαίο επίπεδο εμπιστοσύνης.
Ο σκοπός της τοποθέτησης ενός firewall είναι η πρόληψη επιθέσεων στο τοπικό δίκτυο και η
αντιμετώπισή τους. Παρόλα αυτά όμως, ένα firewall μπορεί να αποδειχθεί άχρηστο εάν δεν
ρυθμιστεί σωστά. Η σωστή πρακτική είναι το firewall να ρυθμίζεται ούτως ώστε να απορρίπτει
όλες τις συνδέσεις εκτός αυτών που επιτρέπει ο διαχειριστής του δικτύου (default-deny). Για να
ρυθμιστεί σωστά ένα firewall θα πρέπει ο διαχειριστής του δικτύου να έχει μία ολοκληρωμένη
εικόνα για τις ανάγκες του δικτύου και επίσης να διαθέτει πολύ καλές γνώσεις πάνω στα δίκτυα
υπολογιστών. Πολλοί διαχειριστές δεν έχουν αυτά τα προσόντα και ρυθμίζουν το firewall ούτως
ώστε να δέχεται όλες τις συνδέσεις εκτός από εκείνες που ο διαχειριστής απαγορεύει (defaultallow). Η ρύθμιση αυτή καθιστά το δίκτυο ευάλωτο σε επιθέσεις από εξωτερικούς
χρήστες.[48][49][50]
Η κυκλοφορία δεδομένων από και προς έναν διακομιστή, που είναι συνδεδεμένος στο διαδίκτυο,
διηθείται μέσω πορτών επικοινωνίας (ports), τα οποία είναι σχετικά αυθαίρετες ονομασίες που
αναφέρονται στην κυκλοφορία πακέτων που προορίζονται για χρήση από μία συγκεκριμένη
εφαρμογή.
Κατά κανόνα , ορισμένες πόρτες χρησιμοποιούνται συνήθως για συγκεκριμένους τύπους
εφαρμογών . Για παράδειγμα , η πόρτα 80 χρησιμοποιείται για μη ανασφαλή περιήγηση στο
διαδίκτυο και η πόρτα 443 για την ασφαλή περιήγηση.
Η κυκλοφορίας σε συγκεκριμένες εφαρμογές μπορεί να επιτραπεί ή να μπλοκαριστεί από το "
άνοιγμα " ή "κλείσιμο " ( δηλαδή φιλτράρισμα) σε καθορισμένες πόρτες, για ένα συγκεκριμένο
είδος κίνησης. Εάν, για παράδειγμα, η θύρα 80 είναι « κλειστή» δεν υπάρχει δυνατότητα
ανασφαλούς περιήγησης στο διαδίκτυο .
Το λειτουργικό Linux περιλαμβάνει το υποσύστημα netfilter , το οποίο χρησιμοποιείται για να να
αποφασίσει την τύχη της κίνησης των πακέτων που προορίζονται για την διακομιστή μας. Όλες οι
εκδόσεις Linux, συμπεριλαμβανομένης της έκδοσης Ubuntu, χρησιμοποιούν αυτό το σύστημα για
το φιλτράρισμα πακέτων .[51]
Γαζής Φώτιος
50
Το σύστημα φιλτραρίσματος πακέτων θα είχε μικρή χρησιμότητα για τους χρήστες ή διαχειριστές
αν δεν είχαν διαχειριστικό. Αυτός είναι ο σκοπός του iptables . Όταν ένα πακέτο φτάσει στον
υπολογιστή σας , αυτό μεταβιβάζεται στο υποσύστημα netfilter για την αποδοχή , χειραγώγηση ή
απόρριψη με βάση τους κανόνες που παρέχονται σε αυτό μέσω iptables . Έτσι ,με τον όρο iptables
εννοούμε όλα όσα χρειάζεστε για να διαχειριστείτε το τείχος προστασίας μας.
Ως εκ τούτου, οι χρήστες, μπορούν να ρυθμίσουν το τείχος προστασίας για να επιτρέψει ή να
απορρίψει ορισμένους τύπους της κίνησης του δικτύου να περάσουν μέσα από το σύστημα ( για
παράδειγμα SSH για την διαχείριση του διακομιστή) . Αυτό γίνεται με το άνοιγμα και το κλείσιμο
των TCP και UDP " πορτών " στο τείχος προστασίας . Επιπλέον , το τείχος προστασίας (firewall)
μπορεί να ρυθμιστεί ώστε να επιτρέπει ή να περιορίζει την πρόσβαση σε συγκεκριμένες
διευθύνσεις IP ( ή περιοχές διευθύνσεων IP ) .[51][52][53]
Διαχείριση του Τείχους Προστασίας
Η διαχείριση του τείχους προστασίας πραγματοποιείται με τρείς βασικές μεθόδους:
• Iptables
Το iptables είναι ουσιαστικά η βάση δεδομένων των κανόνων του τείχους προστασίας. Το iptables
είναι διαχειρίσιμο μόνο από την γραμμή εντολών του συστήματος.
• UFW
Το ufd προέρχεται από τα αρχικά Uncomplicated Firewall που σημαίνει απλοποιημένο τείχος
προστασίας. Το UFW ουσιαστικά αποτελεί ένα frontend για το iptables.
• Guarddog
Το Guarddog έιναι επίσης ένα frontend διαχειριστικό για το iptables βασισμένο στην πιο
απλοποιημένη μορφή των Ubuntu που ονομάζεται Kubuntu.[51][52][61]
6.2.2.2.
Διαχειριστικό απομακρυσμένου ελέγχου διακομιστή ( Patty )
Όπως αναφέραμε και στην προηγούμενη ενότητα, χρησιμοποιούμε συγκεκριμένη «πόρτα» για
λόγους ασφαλείας, ανάλογα με την εφαρμογή. Για την απομακρυσμένη διαχείριση του
διακομιστή, μας με γραμμή εντολών, χρησιμοποιούμε σύνδεση SSH. Για να επιτύχουμε μια τέτοια
σύνδεση μέσω του προσωπικού υπολογιστή μας στον χώρο μας, απομακρυσμένα από τον
διακομιστή και σε περιβάλλον Windows, χρειαζόμαστε μια εφαρμογή εκτέλεσης σύνδεσης SSH
secure από την διακομιστή προς τον προσωπικό μας υπολογιστή. Η εφαρμογή που επιλέξαμε για
την συγκεκριμένη ενέργεια είναι η PuTTY.
Η PuTTY είναι μια δωρεάν εφαρμογή client,για Telnet και Rlogin πρωτόκολλα δικτύου. Τα
πρωτόκολλα αυτά χρησιμοποιούνται για να εκτελέσετε μια απομακρυσμένη περίοδο λειτουργίας
σε έναν υπολογιστή, μέσω ενός δικτύου. Η PuTTY υλοποιεί το client κομμάτι αυτής της συνόδου.
Με πολύ απλά λόγια, αυτό που κάνει η PuTTY είναι να μεταφέρει ότι ακριβώς πληκτρολογούμε
στον προσωπικό υπολογιστή μας απευθείας στον διακομιστή, και αντίστοιχα ότι εμφανίζει ο
διακομιστής στην οθόνη του το προβάλει σε εμάς.[62][63]
Γαζής Φώτιος
51
6.2.3. Joomla 3.0
Γενικές πληροφορίες
Η τρίτη έκδοση της πλατφόρμας Joomla 3 είναι επανασχεδιασμένη από την αρχή, γι αυτό το λόγο
παρατηρούμε και τόσο μεγάλη διαφορά σε σχέση με τις προηγούμενες γενιές. Η
επανασχεδιασμένη πλατφόρμα παρουσιάζει πολλές νέες λειτουργίες και πρόσθετα, μερικά από τα
οποία αναφέρονται παρακάτω:
• Εκτεταμένες εργασίες για την τυποποίηση στυλ κώδικα και της συνέπειας της γραφής του
κώδικα
• Ενσωμάτωση της Bootstrap για ευκολότερη διαχείριση
• Νέα εμφάνιση με θέματα δυναμικά ως προς την απόκριση
• PostgreSQL Driver ώστε να μπορεί η βάση δεδομένων PostgreSQL να τρέξει σίτε
φτιαγμένα σε Joomla 3.0.
• PHP Memcached Driver
• Χρήση ενσωματωμένης διαχείρισης JFeed για τη τροφοδοσία feed
• Εγκατάσταση των πακέτων γλώσσας απευθείας από το διαχειριστικό τμήμα της σελίδας
• Προεγκατεστημένη ομάδα χρηστών Guest
• Δυνατότητα δημιουργίας κενού άρθρου
• Νεα μονάδα διαχείρισης στατιστικών
• Ενημέρωση TinyMCE στην έκδοση 3.5.6
• Συνεχόμενος καθαρισμός των παλαιών αχρησιμοποίητων τμημάτων κώδικα , αρχείων,
πεδίων της βάσης δεδομένων και πινάκων για τη βελτίωση της τυποποίησης των πινάκων.
• Βελτιώσεις στο SmartSearch
• Μονάδα δοκιμών συστήματος CMS
• Ενημερωμένη έκδοση συστημάτων ελέγχου του συστήματος CMS[35][34]
Ελάχιστες απαιτήσεις συστήματος για εγκατάσταση Joomla 3.0
Software
Recommended
Minimum
More information
5.3.1 +
http://www.php.net
MySQL (InnoDB support
5.1 +
required)
5.1 +
http://www.mysql.com
MSSQL
10.50.1600.1+
http://www.microsoft.com/sql
PHP (Magic Quotes GPC
5.4 +
off)
Supported Databases:
10.50.1600.1+
Γαζής Φώτιος
52
PostgreSQL
8.3.18 +
8.3.18 +
http://www.postgresql.org/
2.x +
2.x +
http://www.apache.org
Nginx
1.1
1.0
http://wiki.nginx.org/
Microsoft IIS
7
7
http://www.iis.net
Supported Web Servers:
Apache
(with mod_mysql,
mod_xml,
and mod_zlib)
Πίνακας 10: Ελάχιστες απαιτήσεις συστήματος για εγκατάσταση Joomla 3.0 (Πηγή:
http://www.joomla.org/technical-requirements.html/)
6.2.4. Επεκτάσεις και πρόσθετα στην πλατφόρμα Joomla
6.2.4.1.
eXtplorer ( Διαχείριση αρχείων )
Ο eXtplorer είναι ένα web-based πρόσθετο διαχείρισης αρχείων του διακομιστή μας, το οποίο μας
επιτρέπει την πρόσβαση σε όλα τα αρχεία του διακομιστή μέσα από το διαχειριστικό της
πλατφόρμας Joomla. Θυμίζει περιβάλλον desktop καθώς περιέχει λειτουργίες όπως διασύνδεση με
drag & drop, πλέγμα και δέντρο καταλόγου αρχείων και προβολή/επεξεργασία αρχείων με διπλό
κλικ σε αυτά. Για την λειτουργία του κάνει χρήση της βιβλιοθήκης Sencha ExtJS Javascript.
Παρέχει πλήρης λειτουργίες μεταφόρτωσης και λήψης αρχείων προς και από τον διακομιστή,
απευθείας επεξεργασία αρχείων με κειμενογράφο, καθώς και επιλογή διαχείρισης δικαιωμάτων
αρχείων. Σε γενικές γραμμές αποτελεί ένα πολύ χρήσιμο εργαλείο για την διαχείριση των αρχείων
του διακομιστή αποφεύγοντας την εδραίωση μιας σύνδεσης FTP ή γενικά την χρήση κάποιου
άλλου client. [65][36]
6.2.4.2.
Akeeba backup ( Δημιουργία και διαχείρηση αντιγράφων ασφαλείας )
Το Akeeba Backup Core είναι μια δωρεάν επέκταση της πλατφόρμας Joomla και περιέχει όλα τα
απαραίτητα χαρακτηριστικά για να δημιουργήσουμε ένα πλήρες αντίγραφο ασφαλείας,
αποκατάστασης αλλά και μεταφοράς εξολοκλήρου της ιστοσελίδας μας μαζί με τα αρχεία και την
βάση δεδομένων για ιστοσελίδες κατασκευασμένες στην πλατφόρμα Joomla.
Το Akeeba Backup Core το οποίο είναι η δωρεάν έκδοση της επέκτασης παρέχει τις παρακάτω
λειτουργίες:
• Δημιουργεί Backup όλων των αρχείων και της βάσης δεδομένων με ένα κλικ
• Script επαναφοράς ενσωματωμένο στο αρχείο του backup
• Μεταφράσεις του περιβάλλοντος χρήστη σε πολλές γλώσσες (περιλαμβανομένων και των
Ελληνικών)
Γαζής Φώτιος
53
•
•
•
•
•
•
•
•
•
Αυτόματη τελειοποίηση της προσωπικής σας διαμόρφωσης ώστε να ταιριάζουν στις
δυνατότητες του διακομιστή σας
ACL: έλεγχο δικαιωμάτων, για έλεγχο του επιπέδου επίδρασης που διαθέτει κάθε χρήστης
στο διαχειριστικό του Akeeba Backup
Πολλαπλοί τύποι αρχείων για την δημιουργία backup σύμφωνα με τις ανάγκες σας (
ZIP/JPA)
Βελτιστοποιημένη εξαγωγή της βάσης δεδομένων (Extended INSERTs)
Front-end λειτουργία δημιουργίας αντιγράφων ασφαλείας που επιτρέπει προγραμματισμό
(CRON) αντιγράφων ασφαλείας και backup χρησιμοποιώντας PDA ή κινητό τηλέφωνο
Πολλαπλά προφίλ αντιγράφων ασφαλείας
Διαχείριση των αρχείων αποθήκευσης/ επαναφοράς
Δυνατότητα εξαίρεσης αυθαίρετων καταλόγων ,αρχείων ή περιεχομένου του καταλόγου
Δυνατότητα εξαίρεσης πινάκων της βάσης δεδομένων ή πίνακα περιεχομένων
μόνο[66][36]
Το πρόγραμμα αυτό εγκαταστάθηκε στην πλατφόρμα και εκτελεί αυτόματα αντίγραφο ασφαλείας
καθημερινά κυρίως νυχτερινές ώρες, όταν η επισκεψιμότητα στον ιστότοπο είναι χαμηλή.
Επιπρόσθετα , όπως θα αναλύσουμε στο επόμενο κομμάτι, χρησιμοποιήσαμε την επέκταση αυτή
ώστε να μεταφέρουμε τον ιστότοπο από τον προσωρινό, τοπικό διακομιστή στον τελικό online
διακομιστή που εγκαταστήσαμε στο χώρο του Τ.Ε.Ι. Πειραιά.
6.2.4.3.
Akeeba Kickstart ( επαναφορά από αντίγραφο ασφαλείας )
Μια από τις σημαντικότερες δυνατότητες που μας προσφέρει το πρόσθετο Akeeba Backup, που
αναλύσαμε προηγουμένως, είναι η δυνατότητα πλήρους αποθήκευσης της ιστοσελίδας μας με όλα
τα αρχεία αλλά και την βάση δεδομένων, σε ένα ενιαίο αρχείο. Η ιστοσελίδα μας ετοιμάστηκε
όπως προαναφέραμε σε τοπικό επίπεδο με την χρήση XAMPP και στην συνέχεια εκτελέστηκε το
πρόσθετο Akeeba Backup ώστε να λάβουμε ένα αρχείο με όλη την ιστοσελίδα μας.
Τώρα μένει με την χρήση του script που ονομάζεται akeeba kickstart και το ενιαίο αρχείο μας να
μεταφέρουμε την σελίδα μας σε διακομιστή που είναι συνδεδεμένος στο διαδίκτυο.
Τι είναι το Akeeba Kickstart;
Το akeeba kickstart δεν είναι τίποτα άλλο παρά ένα αρχείο με κατάληξη .php ενεργοποιεί τα
scripts που βρίσκονται μέσα στο αρχείο ασφαλείας ( backup ) της σελίδας μας. Στο zip που
περιέχει το αρχείο kickstart.php θα παρατηρήσουμε ότι υπάρχουν και κάποια άλλα αρχεία μορφής
.ini που δεν είναι τίποτα άλλο παρά οι μεταφράσεις του οδηγού επαναφοράς της σελίδας μας.
Για να χρησιμοποιήσουμε το Kickstart, δεν μένει παρά να το κατεβάσουμε από την επίσημη
ιστοσελίδα του: https://www.akeebabackup.com/products/akeeba-kickstart.html. Κατεβάζουμε
ένα αρχείο ZIP που και κάνουμε εξαγωγή. Μέσα σε αυτό βρίσκουμε το αρχείο kickstart.php και
διάφορα αρχεία INI. Αρκεί να αντιγράψουμε το αρχείο PHP στον κυρίως φάκελο που θέλουμε να
αποκατασταθεί το site. Για παράδειγμα, εάν θέλουμε να επαναφέρουμε σε έναν υποκατάλογο που
ονομάζεται electronics στη ρίζα του XAMPP, θα πρέπει να αντιγράψουμε το αρχείο μέσα στον
φάκελο C:\xampp\htdocs\electronics. Αντίστοιχα, εμείς που θέλουμε να επαναφέρουμε την σελίδα
Γαζής Φώτιος
54
μας από έναν τοπικό διακομιστή στο ζωντανό μας διακομιστή που λειτουργεί στο τμήμα μας,
ανεβάζουμε το αρχείο PHP χρησιμοποιώντας FTP στο root φάκελο του δικτυακού μας τόπου.
Το τελικό βήμα πριν είμαστε σε θέση να εξαγάγουμε το αρχείο, είναι να αντιγράψουμε το αρχείο
επαναφοράς ( backup ) στον ίδιο φάκελο.
Για να ξεκινήσει η επαναφορά αρκεί να καλέσουμε στον φυλλομετρητή μας την παρακάτω
διεύθυνση http://www.yoursite.com/kickstart.php όπου το yoursite.com είναι το domain που
έχουμε συνδεδεμένο με τον διακομιστή μας.
Ακολουθώντας τα 3 απλά βήματα του οδηγού εγκατάστασης, είμαστε σε θέση σε μερικά λεπτά να
επαναφέρουμε τον ιστότοπο μας στον ζωντανό διακομιστή, στην ίδια ακριβώς μορφή που τον
αποθηκεύσαμε με το πρόσθετο Akeeba backup. Το μόνο που πρέπει να γνωρίζουμε είναι τα
στοιχεία της βάσης δεδομένων που θα πρέπει να έχουμε προετοιμάσει από νωρίτερα, και να τα
εισάγουμε όταν ζητηθούν. Το akeeba θα μεταφέρει στη νέα βάση δεδομένων όλους τους
καταλόγους που είχαν δημιουργηθεί στο τοπικό μας διακομιστή. Έτσι η ιστοσελίδα μας είναι
έτοιμη, και λειτουργεί πλέον στον νέο διακομιστή που την φιλοξενεί.[67][36][66]
6.2.4.4.
Template δυναμικής απόκρισης από την Joomlart και JAT3.2 Framework
Το JA University είναι ένα θέμα ειδικά σχεδιασμένο για εκπαιδευτικά ιδρύματα. Έχει
συμβατότητα με την πλατφόρμα Joomla για τις εκδόσεις 2.5 και 3.x. Είναι ένα θέμα, που
εντυπωσιάζει με την απλότητα, καθαρό σχεδιασμό και επαγγελματισμό του. Παρέχει
προεγκατεστημένους 9 χρωματισμούς, και πολλά προσχέδια σελίδων για νέα, ενημέρωση,
επικοινωνία, σελίδες καθηγητών / φοιτητών και βίντεο. Το πρότυπο αυτό είναι ιδανικό για
σχολεία, κολέγια, πανεπιστήμια αλλά και για κάθε μορφής εκπαιδευτικό ίδρυμα. Είναι χτισμένο
στα πλαίσια της πλατφόρμας JA JAT 3,2 ( framework ) που το βοηθάει να γίνει ακόμη πιο
ευέλικτο και δυνατό. Το JA JAT 3,2 ( framework ) είναι μια πλατφόρμα επέκτασης του Joomla, το
οποίο προσθέτει λειτουργίες κυρίως σε επίπεδο σχεδιασμού / εμφάνισης του περιεχομένου για τον
ιστότοπο μας. Μια από αυτές τις λειτουργίες είναι η δυναμική απόκριση του θέματος μας για
φορητές συσκευές. Πέντε κύρια χαρακτηριστικά που κάνουν το θέμα αυτό ξεχωριστό είναι:
•
•
•
•
•
•
Δυναμική απόκριση για οποιαδήποτε συσκευή
Μεγάλα μενού ( Mega menu ) για σωστή παρουσίαση του περιεχομένου
Οκτώ προεγκατεστημένα θέματα για χρωματισμό και σχεδιασμό
Προσχεδιασμένες σελίδες σφαλμάτων, εισόδου μέλους, φόρμα επικοινωνίας.
Ενσωματωμένη επιλογή φόρτωσης Google fonts από το διαχειριστικό
Ενσωματωμένη επιλογή συμπίεσης CSS και Javascript για επιτάχυνση ιστότοπου και
μείωση φόρτου του διακομιστή αλλά και bandwidth.[68]
Γαζής Φώτιος
55
6.3. Προβλήματα και περιορισμοί
6.3.1. Αποφυγή μελλοντικής επίθεσης
Για την αποφυγή μελοντικής επίθεσης σε κάποιο-α από τα αρχεία ή τους φακέλους της
πλατφόρμας μας στο διακομιστή μας, έπρεπε να ρυθμίσουμε τα δικαιώματα τους έτσι ώστε να μην
είναι προσπελάσιμα και ευάλωτα σε εξωτερικές επιθέσεις. Τα δικαιώματα λοιπόν των αρχείων θα
έπρεπε να τα ρυθμίζουμε με τέτοιο τρόπο, ούτως ώστε η λειτουργίες της πλατφόρμας να έχουν
αρκετά δικαιώματα να εκτελούνται χωρίς σφάλματα, ενώ ταυτόχρονα να περιορίσουμε σε μέγιστο
βαθμό τα δικαιώματα χρήσης και εκτέλεσης αρχείων από εξωτερικούς παράγοντες.
Ύστερα από μελέτη λοιπόν σε έγραφα λειτουργίας στην ιστοσελίδα docs.joomla.org βρήκαμε ότι
η ιδανική ρύθμιση των δικαιωμάτων είναι:
•
755 για όλους τους φακέλους που μεταφράζεται
755 = rwx r-x r-x
Owner has Read, Write and Execute
Group has Read and Execute
Other has Read and Execute
•
644 για όλα τα αρχεία
644 = rw- r-- r-Owner has Read, Write
Group has Read
Other has Read
Με την παραπάνω ρύθμιση, είμαστε απόλυτα καλυμένοι για τυχόν επιθέσεις από κακόβουλο
λογισμικό. Η σημαντικότερη κάλυψη μας, προέρχεται από την αδυναμία εκτέλεσης ( execute )
οποιουδήποτε script εισχορήσει μέσα σε κάποιο από τα αρχεία μας. Η μη αδυναμία εκτέλεσης των
αρχείων script μας προφυλάσει εμάς και τον διακομιστή μας τις περισσότερες πιθανές
επιθέσεις.[69]
6.3.2. Πολυγλωσσικό περιεχόμενο
Για να επιτύχουμε την χρήση περισσότερων από μία γλώσσα στο περιεχόμενο του δικτυακού
χώρου που κατασκευάζουμε, χρειαζόταν να χρησιμοποιήσουμε μια επέκταση που διαχειρίζεται
και διαχωρίζει το περιεχόμενο για την κάθε γλώσσα χωριστά. Στην Τρίτη γενιά της πλατφόρμας
Joomla ή συγκεκριμένη λειτουργία έγινε πιο απλή από ποτέ.
Γαζής Φώτιος
56
6.3.2.1.
Επέκταση για χρήση περισσότερων από μια γλώσσα
Για την χρήση περισσότερων από μία γλώσσα χρησιμοποιήσαμε το ενσωματομένο εργαλείο
εγκατάστασης και διαχείρησης γλωσσών που παρέχει η τρίτη γενιά της πλατφόρμας Joomla. Το
πρόσθετο αυτό, που ονομάζεται Language Manager, μας δίνει την δυνατότητα με μια απλή
εγκατάσταση να επιλέξουμε ανάμεσα σε εκατοντάδες γλώσσες. Η εγκατάσταση γίνεται από το
διαχειριστικό της πλατφόρμας, και μόλις πραγματοποιηθεί, μας προσφέρει έτοιμα μεταφρασμένα
όλα τα απαραίτητα κείμενα της πλατφόρμας, όπως για παράδειγμα η εγγραφή μέλους, η είσοδος,
επόμενη/προηγούμενη σελίδα κτλ. Επίσης, μόλις η γλώσσα εγκατασταθεί, μας εμφανίζει
αυτόματα την επιλογή της νεας μας γλώσσας για καταχώρηση περιεχομένου. Σε οποιοδήποτε
περιεχόμενο καταχωρούμε, είτε αυτό είναι μενού, είτε μια κατηγορία ή και ένα απλό άρθρο, θα
μας δίνεται η δυνατότητα να επιλέξουμε την γλώσσα που θα θέλουμε να εμφανίζεται το
συγκεκριμένο περιεχόμενο. Για παράδειγμα, αν καταχωρήσουμε ένα άρθρο στα Ελληνικά, για να
εμφανίζεται στο Ελληνικό κομμάτι του δικτυακού χώρου μας, αρκεί να επιλέξουμε τα Ελληνικά
σαν γλώσσα καταχώρησης από το language dropdown κατά την καταχώρηση. Αυτό θα φιλτράρει
το περιεχόμενο μας, έτσι ώστε να εφανίζεται μόνο κατά την διάρκεια επιλογής εμφάνισης
Ελληνικού περιεχομένου, ενώ αντίθετα δεν θα εμφανίζεται στις υπόλοιπες γλώσσες.
Το τελευταίο βήμα για την καταχώρηση και εμφάνιση του περιεχομένου σε περισσότερες από μία
γλώσσες, ολοκληρώνεται με την δημιουργία του μενού του ιστότοπου για κάθε μια από τις
γλώσσες που έχουμε προσθέσει ξεχωριστά. Το κάθε μενού λοιπόν που έχει δημιουργηθεί
συγκεκριμένα για την γλώσσα αυτή, δηλώνεται σε αυτήν την γλώσσα, και εμφανίζεται μόνο όταν
ζητηθεί από τον χρήστη. Για παράδειγμα, στον δικό μας δικτυακό τόπο, πουτ έχουμε επιλογή
ανάμεσα σε Ελληνικά και Αγγλικά, έχουμε δύο ξεχωριστά μενού για κάθε μια από τις δύο
γλώσσες. Στην συνέχεια θα περιγράψουμε πως ακριβώς εμφανίζεται κάθε ένα από τα δύο μενού,
κάθε φορά που ο χρήστης επιλέγει μία από τις διαθεσιμες γλώσσες μας.[70]
6.3.2.2.
Υποστήριξη θέματος (template) για περισσότερες από μία γλώσσα
Κάθε φορά που ο χρήστης επιλέγει να προβάλει τον δικτυακό μας χώρο σε μία από τις διαθέσιμες
γλώσσες μας, το θέμα (template) αναλαμβάνει την δουλειά ώστε να προβάλει το μενού που
αντιστοχίζεται στην γλώσσα που έχει επιλεχθεί. Το θέμα που επιλέξαμε ( University template ),
δυστυχώς δεν παρείχε δυνατότητα απολυγλωσσικής εγκατάστασης, ώστε να προβάλει
διαφορετικά μενού κάθε φορά που ο χρήστης επιλέγει μια από τις διαθέσιμες γλώσσες μας. Έτσι,
αναγκαστήκαμε να δημιουργήσουμε ένα κλόνο του θέματος μας, μετονομάζοντας τον σε
University template UK ώστε να δηλωθεί αυτό σαν θέμα για την δέυτερη γλώσσα μας. Η μέθοδος
αυτή, μας έδωσε την δυνατότητα να φαίνεται ότι εγκαταστήσαμε ένα δέυτερο θέμα για την
δέυτερη γλώσσα περιεχομένου μας, οπότε και στο συγκεκριμένο θέμα δηλώθηκε το Αγγλικό
μενου για να προβάλεται. Έτσι, όταν κάποιος επισκέπτης επιλέγει την Αγγλική γλώσσα στο
περιεχόμενο του, προβάλει ένα τελείως διαφορετικό θέμα ( template ) το οποίο βέβαια για την
Γαζής Φώτιος
57
δική μας περίπτωση είναι κλώνος του αρχικού, το οποίο όμως προβάλει ένα τελείως διαφορετικό
μενού, το οποίο είναι το μενού της δεύτερης μας γλώσσας.
6.3.3. Μεταφορά από τοπικό σε ζωντανό διακομιστή
Για την μεταφορά του δικτυακού μας χώρου από τον τοπικό διακομιστή σε περιβάλλον windows
με χρήση του XAMPP σε ζωντανό διακομιστή, χρησιμοποιήσαμε το πρόσθετο Akeeba kickstart,
το οποίο επαναφέρει (ζωντανέυει) τα ερχεία επαναφοράς που έχουμε δημιουργήσει από το
πρόσθετο akeeba backup. Ακολουθώντας τα 3 απλά βήματα του οδηγού εγκατάστασης, είμαστε
σε θέση σε μερικά λεπτά να επαναφέρουμε τον ιστότοπο μας στον ζωντανό διακομιστή, στην ίδια
ακριβώς μορφή που τον αποθηκεύσαμε με το πρόσθετο Akeeba backup. Το μόνο που πρέπει να
γνωρίζουμε είναι τα στοιχεία της βάσης δεδομένων που θα πρέπει να έχουμε προετοιμάσει από
νωρίτερα, και να τα εισάγουμε όταν ζητηθούν. Το akeeba θα μεταφέρει στη νέα βάση δεδομένων
όλους τους καταλόγους που είχαν δημιουργηθεί στο τοπικό μας διακομιστή. Έτσι η ιστοσελίδα
μας είναι έτοιμη, και λειτουργεί πλέον στον νέο διακομιστή που την φιλοξενεί.
6.3.4. Αυξηση ορίου μεταφόρτωσης αρχείου στον διακομιστή
Για την ορθή λειτουργία της πλατφόρμας Joomla, αλλα και την αποφυγή μελοντικών περιορισμών
κατά την λειτουργία και διαχείριση της πλατφόρμας, κρίνεται απαραίτητη η αυξηση του ορίου
μεταφόρτωσης αρχείων προς τον διακομιστή. Το όριο αυτό, ως προεπιλογή, είναι ορισμένο στα 2
Mb. Εμείς αυξήσαμε το όριο αυτό στα 100 Mb, ώστε να έχουμε περιθόριο μεταφόρτωσης
μεγαλύτερων εικόνων , ορθής λειτουργίας πρόσθετων ή εισαγωγής περιεχομένου μεγάλου όγκου.
Η πιο απλή μέθοδος για την ενέργεια αυτή είναι η ρύθμιση των παραγόντων στο αρχείο php.ini
που βρίσκεται στον διακομιστή μας στο φάκελο /etc/php.ini or /etc/php.d/cgi/php.ini ή στον
φάκελο /usr/local/etc/php.ini
Για την ρύθμιση αρκεί να προσθέσουμε ή να τροποποιήσουμε τα παρακάτω:
memory_limit = 320M
upload_max_filesize = 100M
post_max_size = 200M
Με αυτό τον τρόπο, δεν θα αντιμετοπίσουμε τυχόν ασυμβατότητες ή μηνύματα σφάλματος από
την πλατφόρμα joomla ή τα πρόσθετα της.[71]
Γαζής Φώτιος
58
7. Επεκτάσεις – Μελλοντικές προσθήκες
7.1. Σύνδεση με πλατφόρμα ηλεκτρονικών εγγραφών
7.1.1. Σύνδεση με πλατφόρμα ηλεκτρονικών εγγραφών
Η πλατφόρμα ηλεκτρονικών εγγραφών του Τ.Ε.Ι. Πειραιά που λειτουργεί στην σελίδα
https://secr.teipir.gr/secr3w/connect2.aspx έχει διασυνδεθεί με σύνδεσμο που βρίσκεται στην
αρχική σελίδα του νέου δικτυακού χώρου που κατασκευάσαμε. Μελλοντικά, θα μπορούσαμε
αντίστοιχα να προσθέσουμε και σύνδεσμο για την δήλωση και εγγραφή στα εργαστήρια του
τμήματος μας. Έτσι θα μπορούσαν οι σπουδαστές να ενημερώνονται με μια ανακοίνωση για την
έναρξη των εγγραφών, μέσω των ανακοινώσεων, και να καθοδηγούνται αμέσως στον σύνδεσμο
που οδηγεί στην πλατφόρμα εγγραφών.
7.1.2. Σύνδεση με ηλεκτρονικό αποθετήριο δημοσιεύσεων και βιβλίων
Η πλατφόρμα Joomla παρέχει ένα πρόσθετο, που ονομάζεται jResearch και χρησιμοποιείται ως
ηλεκτρονικό αποθετήριο δημοσιεύσεων και βιβλίων. Το συγκεκριμένο πρόσθετο είχε
χρησιμοποιηθεί και στην παλαιότερη ιστοσελίδα του τμήματος, ως ηλεκτρονικό αποθετήριο.
Όμως, προς το παρόν, η συγκεκριμένη επέκταση δεν υποστηρίζει την τρίτη γενιά της πλατφόρμας
Joomla. Όμως σύμφωνα με τον εκδότη της επέκτασης, σύντομα εκδώσει την συμβατή έκδοση για
την νέα γενιά της πλατφόρμας. Έτσι θα μπορέσουμε, με μια απλή εγκατάσταση από το
διαχειριστικό του Joomla να προσθέσουμε την επέκταση αυτή. Στην συνέχεια, με ένα απλό αρχείο
που μας εξαγάγει η παλιά ιστοσελίδα, κάνουμε εισαγωγή και μεταφόρτωση στο διαχειριστικό της
νέας πλατφόρμας μας, και όλο το περιεχόμενο που είχε καταχωρηθεί στο πρόσθετο jResearch θα
μεταφερθεί αυτόματα.
Γαζής Φώτιος
59
8. Επίλογος
Στην παρούσα πτυχιακή εργασία πραγματοποιήθηκε μελέτη και ανάπτυξη ενός δικτυακού χώρου
για τις ανάγκες του τμήματος Ηλεκτρονικής του εκπαιδευτικού ιδρύματος τεχνολογικής
εκπαίδευσης Πειραιά. Για την ανάπτυξη του δικτυακού χώρου χρησιμοποιήθηκε σύστημα
διαχείρισης περιεχομένου (CMS). Η μελέτη και ο σχεδιασμός του δικτυακού χώρου, μπορεί να
τροποποιηθεί για να καλύπτει τις ανάγκες οποιουδήποτε εκπαιδευτικού ιδρύματος.
Καθημερινά το διαδίκτυο καταλαμβάνει όλο και περισσότερο από τον χρόνο μας για απασχόληση,
ενημέρωση, ψυχαγωγία και εκπαίδευση. Κυρίως οι νεότερες γενιές ανθρώπων, στις οποίες
απευθύνεται ένας τέτοιος δικτυακός χώρος, χρησιμοποιούν το ιντερνέτ καθημερινά, όχι μόνο στο
σπίτι τους, αλλά και στον δρόμο, με φορητές συσκευές ( laptops, tablets και smartphones ).
Αυτή η νέα τεχνολογία δεν θα μπορούσε να μην υιοθετηθεί από τα εκπαιδευτικά ιδρύματα,
εφόσον είναι απαραίτητη η χρήση ιντερνέτ για πολλές καθημερινές ενέργειες των μαθητών /
φοιτητών μέσω διαδικτύου όπου και αν βρίσκονται. Μερικές από αυτές τις ενέργειες είναι η τηλεεκπαίδευση ( e-learning ), ενημερώσεις και ανακοινώσεις, ηλεκτρονικές υπηρεσίες ( βεβαιώσεις,
εγγραφές, δηλώσεις κ.α. )
Όλα τα παραπάνω λοιπόν, μελετήθηκαν, σχεδιάστηκαν και υλοποιήθηκαν σε έναν πλήρη,
προτυποποιημένο δικτυακό χώρο, με κύριους στόχους την ευκολία στην χρήση, τη
διαδραστικότητα και τη πληρότητα του χώρου αυτού.
Μελετήθηκαν όλες οι νέες τεχνολογίες και οι μεθοδολογίες του παγκόσμιου ιστού, μέσω των
οποίων κάθε εκπαιδευτικό ίδρυμα υλοποιεί τον προσωπικό του δικτυακό χώρο. Η υλοποίηση του
δικτυακού χώρου πραγματοποιήθηκε με την πλατφόρμα Joomla, ύστερα από εκτενή σύγκριση
των εναλλακτικών πακέτων που είχαμε στην διάθεση μας.
Ο δικτυακός χώρος που αναπτύχθηκε επιλύει επίσης προβλήματα χρηστικότητας, ασφάλειας αλλά
και εμφάνισης που αντιμετωπίζουν πολλοί δικτυακοί χώροι παλαιότερης γενεάς. Δίνει βάση στις
βελτιώσεις που μπορούν να επιτευχθούν με τις νεότερες γενιές πλατφόρμων, και πως μπορούν να
χρησιμοποιηθούν για να επιλύσουν τις μοντέρνες ανάγκες, αλλά και προβλήματα / ελλείψεις.
Τέλος μελετήθηκαν οι επεκτάσεις και οι μελλοντικές προσθήκες του δικτυακού χώρου με
τεχνολογίες και επεκτάσεις που ήδη διαθέτει το εκπαιδευτικό ίδρυμα για την εξυπηρέτηση των
σπουδαστών.
Γαζής Φώτιος
60
9. Παράρτημα Εικόνων
Εικόνα 5. Κατάλογος Μαθημάτων
Γαζής Φώτιος
61
Εικόνα 6. Περιγραφή Μαθήματος
Γαζής Φώτιος
62
Εικόνα 7. Εικόνα Header
Εικόνα 8. Εικόνα
Footer
Εικόνα 9. Κατάλογος Καθηγητών
Γαζής Φώτιος
63
Εικόνα 10. Περιγραφή
Καθηγητή
Γαζής Φώτιος
64
Εικόνα 11. Εικόνα Αρχικής Σελίδας
Γαζής Φώτιος
65
Εικόνα 12. Εικόνα Επικοινωνίας
Γαζής Φώτιος
66
Εικόνα 13. Σελίδα Ανακοινώσεων
Γαζής Φώτιος
67
Εικόνα 14. Πρόσθετο Προβολής Ανακοινώσεων Αρχικής Σελίδας
Γαζής Φώτιος
68
Εικόνα 15. Πρόσθετο Google Maps
Γαζής Φώτιος
69
10.Αναφορές / Links
[1] E-Learning and the Big "E" : http://www.educause.edu/ero/article/e-learning-and-big-e,
προσπελάστηκε στις 18/10/2013
[2] Why Virtual Classrooms Are Excellent Learning Venues : http://web.inxpo.com/castingcalls/bid/70527/Why-Virtual-Classrooms-Are-Excellent-Learning-Venues,
προσπελάστηκε
στις 18/10/2013
[3] World Wide Web Consrtium (W3C): http://www.w3.org, προσπελάστηκε στις 18/10/2013
[4] Ελληνικό γραφείο του W3C: http://www.w3c.org, προσπελάστηκε στις 18/10/2013
[5] Exploring a Course : http://horizon.unc.edu/projects/monograph/CD/Technological_Tools/Graziadei.html, προσπελάστηκε στις 18/10/2013
[6] G Distance Learning ODLqc: http://www.odlqc.org.uk/g-dist.htm, προσπελάστηκε στις
18/10/2013
[7] IN.GR e-learning : http://reviews.in.gr/greece/elearning/, προσπελάστηκε στις 18/10/2013
[8] Kemea.gr Εξαποστάσεως μάθηση: http://www.kemea.gr/el/foreis-epaggelmatikhs-katartishs/eksapostaseos-mathisi, προσπελάστηκε στις 22/10/2013
[9] ΙΕΕΕ Χplore – Home : http://ieeexplorer.ieee.org, προσπελάστηκε στις 22/10/2013
[10] Wikipedia
Distance
education:
http://en.wikipedia.org/wiki/Distance_education,
προσπελάστηκε στις 22/10/2013
[11] W3C Web Content Accessibility Guidelines : http://www.w3.org/TR/WCAG20/,
προσπελάστηκε στις 22/10/2013
[12] W3C HTML: http://www.w3.org/TR/html401/conform.html#deprecated, προσπελάστηκε
στις 22/10/2013
[13] W3C History: http://www.w3.org/History/1989/proposal.html. προσπελάστηκε στις
22/10/2013
[14] W3C Design: http://www.w3.org/DesignIssues/, προσπελάστηκε στις 22/10/2013
[15] W3C
HTML
TAGS:
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html, προσπελάστηκε στις 22/10/2013
[16] W3 HyperText: http://www.w3.org/MarkUp/ietf-ir-html-01.txt, προσπελάστηκε στις
29/10/2013
[17] Lists.W3 SGML HTML: http://lists.w3.org/Archives/Public/www-talk/1991NovDec/0020.html, προσπελάστηκε στις 29/10/2013
[18] Archtecture of the World Wide Web, Volume One: http://www.w3.org/2001/tag/doc/deeplinking.html, προσπελάστηκε στις 29/10/2013
[19] FAQS IETF and the RFC Standards Process: http://www.faqs.org/docs/artu/ietf_process.html, προσπελάστηκε στις 29/10/2013
Γαζής Φώτιος
70
[20] W3 A history of HTML: http://www.w3.org/People/Raggett/book4/ch02.html,
προσπελάστηκε στις 29/10/2013
[21] W3 HTML5: http://www.w3.org/TR/html5/, προσπελάστηκε στις 05/11/2013
[22] HTML5 at Last Call (at the WHATWG): http://lists.whatwg.org/pipermail/whatwgwhatwg.org/2009-October/023849.html, προσπελάστηκε στις 05/11/2013
[23] CSS Tutorial: http://www.w3schools.com/css/default.asp, προσπελάστηκε στις 05/11/2013
[24] CSS Introduction: http://www.w3schools.com/css/css_intro.asp, προσπελάστηκε στις
05/11/2013
[25] CSS3 Introduction: http://www.w3schools.com/css/css3_intro.asp, προσπελάστηκε στις
05/11/2013
[26] JavaScript Introduction: http://www.w3schools.com/js/default.asp, προσπελάστηκε στις
05/11/2013
[27] JavaScript Conditions: http://www.w3schools.com/js/js_if_else.asp, προσπελάστηκε στις
05/11/2013
[28] JavaScripter: http://www.crockford.com/javascript/little-scripter.html, προσπελάστηκε στις
05/11/2013
[29] W3TECHS: http://w3techs.com/, προσπελάστηκε στις 05/11/2013
[30] W3Techs
Usage
Statistics:
http://w3techs.com/technologies/details/wp-joomladrupal/all/all, προσπελάστηκε στις 05/11/2013
[31] CMS Critic: http://www.cmscritic.com/content-management, προσπελάστηκε στις
05/11/2013
[32] Content Management Systems: http://en.wikipedia.org/wiki/Content_management_system,
προσπελάστηκε στις 05/11/2013
[33] Wordpress: http://wordpress.org/ , προσπελάστηκε στις 05/11/2013
[34]
Joomla: http://joomla.com/, προσπελάστηκε στις 05/11/2013
[35]
About Joomla 3: http://www.joomla.org/3/en, προσπελάστηκε στις 05/11/2013
προσπελάστηκε
στις
[38] Documentation of Drupal: https://drupal.org/documentation, προσπελάστηκε
05/11/2013
[39] About Drupal: https://drupal.org/node/12416366, προσπελάστηκε στις 05/11/2013
στις
[36] Joomla Extentions Directory: http://extensions.joomla.org/,
05/11/2013
[37] Drupal: https://drupal.org/, προσπελάστηκε στις 05/11/2013
[40] Joomla 3.0 20 New things: http://magazine.joomla.org/issues/issue-nov-2012/item/933-20new-things-joomla25-vs-joomla30, προσπελάστηκε στις 05/11/2013
[41] What Are Responsive Website Templates: http://www.os-templates.com/journal/what-areresponsive-website-templates, προσπελάστηκε στις 11/11/2013
Γαζής Φώτιος
71
[42] Cross Platform: http://en.wikipedia.org/wiki/Cross-platform, προσπελάστηκε στις
11/11/2013
[43] The daily Apache: http://thedailyapache.com/2012/12/17/the-importance-of-socialnetworking/, προσπελάστηκε στις 11/11/2013
[44] Call to action: http://en.wikipedia.org/wiki/Call_to_action_(marketing), προσπελάστηκε
στις 11/11/2013
[45] Fujitsu Server Specs: http://globalsp.ts.fujitsu.com/dmsp/Publications/public/ds-py-tx100s3.pdf, προσπελάστηκε στις 11/11/2013
[46] Webservers: http://httpd.apache.org/, προσπελάστηκε στις 11/11/2013
[47]
Cherokee: http://cherokee-project.com/web-servers, προσπελάστηκε στις 11/11/2013
[48] CheckPoint Software technologies:
προσπελάστηκε στις 11/11/2013
http://www.checkpoint.com/resources/firewall/,
[49] A History and Survey of Network Firewalls: http://www.cs.unm.edu/~treport/tr/0212/firewall.pdf, προσπελάστηκε στις 11/11/2013
[50] Skullbox School for information technology: http://www.skullbox.net/tcpudp.php,
προσπελάστηκε στις 11/11/2013
[51] Ubuntu Help – Firewall: https://help.ubuntu.com/community/Firewall, προσπελάστηκε
στις 13/11/2013
[52] Linux UPnP Internet Gateway : https://help.ubuntu.com/community/firewall/Linux_UPnP_Internet_Gateway_Device_%28linux-idg%29, προσπελάστηκε στις 13/11/2013
[53] Source Forge Documentation:
προσπελάστηκε στις 13/11/2013
http://linux-igd.sourceforge.net/documentation.php,
[54] Ubuntu Help – Servers : https://help.ubuntu.com/community/Servers, προσπελάστηκε στις
13/11/2013
[55] Ubuntu
Server
Guide:
προσπελάστηκε στις 13/11/2013
https://help.ubuntu.com/12.04/serverguide/index.html,
[56] Ubuntu Installation / System Requirements:
https://help.ubuntu.com/community/Installation/SystemRequirements, προσπελάστηκε στις
13/11/2013
[57] Apache Friends: http://www.apachefriends.org/en/index.html, προσπελάστηκε στις
13/11/2013
Γαζής Φώτιος
72
[58] The XAMPP project: http://dev.mysql.com/tech-resources/interviews/kai-seidlerxampp.html, προσπελάστηκε στις 13/11/2013
[59] IBM Linux- Apache: http://www.ibm.com/developerworks/linux/library/l-xampp/,
προσπελάστηκε στις 13/11/2013
[60] INSTALLING, CONFIGURING, AND DEVELOPING WITH XAMPP:
http://www6.conestogac.on.ca/~ddvorski/downloads/documents/InstallingConfiguringDevelop
ingWithXAMPP.pdf, προσπελάστηκε στις 13/11/2013
[61]
Ubuntu LTS: https://wiki.ubuntu.com/LTS, προσπελάστηκε στις 13/11/2013
[62] Introducing PuTTy: http://www.chiark.greenend.org.uk/~sgtatham/putty/faq.html#faqintro, προσπελάστηκε στις 13/11/2013
[63] PuTTY: A Free Telnet/SSH Client: http://www.chiark.greenend.org.uk/~sgtatham/putty/,
προσπελάστηκε στις 13/11/2013
[64] Joomla Technical Requirements: http://www.joomla.org/technical-requirements.html,
προσπελάστηκε στις 13/11/2013
[65] eXtplorer Extension: http://extensions.joomla.org/extensions/core-enhancements/filemanagement/2630, προσπελάστηκε στις 13/11/2013
[66] Akeeba Backup: https://www.akeebabackup.com/products/akeeba-backup.html,
προσπελάστηκε στις 13/11/2013
[67] Akeeba Kickstart: https://www.akeebabackup.com/products/akeeba-kickstart.html,
προσπελάστηκε στις 13/11/2013
[68] JA University | Responsive Joomla template: http://www.joomlart.com/joomla/templates/ja-university, προσπελάστηκε στις 13/11/2013
[69] How do UNIX file permissions work? :
http://docs.joomla.org/How_do_UNIX_file_permissions_work%3F, προσπελάστηκε στις
13/11/2013
[70] Using the Language Manager to enable Multilingual Capabilities,
http://demo.joomla.org/multilingual-capabilities.html, προσπελάστηκε στις 13/11/2013
[71] Joomla Large Uploads: http://extplorer.net/projects/extplorer/wiki/Large_uploads,
προσπελάστηκε στις 13/11/2013
Γαζής Φώτιος
73
11.Κατάλογος Πινάκων
Πίνακας 1. Σπουδαιότητα δηλώσεων CSS από τον φυλλομετρητή…………………......……17
Πίνακας 2. Ποσοστό χρήσης CMS. (Πηγή: http://w3techs.com) …………………….………23
Πίνακας 3. Σύγκριση εκδόσεων Joomla (Πηγή: http://magazine.joomla.org/) [36]……..……29
Πίνακας 4. Σύγκριση εκδόσεων Joomla (Πηγή: http://magazine.joomla.org/) [36]………..…30
Πίνακας 5. Σύγκριση εκδόσεων Joomla (Πηγή: http://magazine.joomla.org/) [36]………..…30
Πίνακας 6. Σύγκριση εκδόσεων Joomla (Πηγή: http://magazine.joomla.org/) [36]…………..31
Πίνακας 7. Σύγκριση εκδόσεων Joomla (Πηγή: http://magazine.joomla.org/) [36]…………..31
Πίνακας 8. Σύγκριση εκδόσεων Joomla (Πηγή: http://magazine.joomla.org/) [36]…………..31
Πίνακας 9. Δέντρο Ιστοτόπου ( κεντρικό μενού ) και περιγραφές…………………………..33
Πίνακας 10. Ελάχιστες απαιτήσεις συστήματος για εγκατάσταση Joomla 3.0……….……….52
Γαζής Φώτιος

TECHNICAL SPESIFICATIONS SOUDA PORT

ΤΜΗΜΑ ΠΛΗΡΟΦΟΡΙΚΗΣ & ΤΕΧΝΟΛΟΓΙΑΣ

potami-theseis

Ολοκληρωμένο σύστημα οικιακού αυτοματισμού δυνατότητες

ΠΑΓΚΟΣΜΙΑ ΗΜΕΡΑ ΝΟΣΟΥ ΑΛΤΣΧΑΪΜΕΡ 2014