Πτυχιακή Εργασία. Κατασκευή ιστοσελίδας

ΑΤΕΙ ΚΑΒΑΛΑΣ Πτυχιακή Εργασία Κατασκευή ιστοσελίδας Παύλος Κόττος (ΑΜ: 241 ) E-mail:pakottos@yahoo.com pavlos.kottos@cchellenic.com Επόπτρια καθηγήτρια : Αικατερίνη Μήτσα

ΚΑΒΑΛΑ 2013 Ευχαριστίες Θα ήθελα να ευχαριστήσω για την μέχρι τώρα πορεία μου στο χώρο της εκπαίδευσης τους ανθρώπους που μου έχουν συμπαρασταθεί, που είναι αρκετοί, όπου ο καθένας με το δικό του τρόπο έχει συμβάλλει στη διαμόρφωση του χαρακτήρα μου και της εκπαιδευτικής μου και επαγγελματικής μου κατάρτισης. Επίσης τους γονείς μου για την αμέριστη συμπαράσταση, ηθική και οικονομική, που μου έχουν δείξει όλο αυτόν τον καιρό συνέβαλαν και αυτοί από την μεριά τους για να με βοηθήσουν να πετύχω τους στόχους που είχα θέσει και στην μετέπειτα πορεία μου απλά που είναι διπλά μου. Ιδιαίτερες ευχαριστίες θα ήθελα να εκφράσω στην καθηγήτρια μου Κυρία Αικατερίνη Μήτσα, η οποία δέχτηκε την εποπτεία της πτυχιακής εργασίας μου διαθέτοντας τον χρόνο της και προσφέροντας μου τις γνώσεις της. ii

Περίληψη Η συγκριμένη πτυχιακή εργασία στοχεύει στο σχεδιασμό και την ανάπτυξη μίας ιστοσελίδας ειδικού ενδιαφέροντος με το σύστημα διαχείρισης περιεχομένου Joomla, η οποία θα προσφέρει στους χρήστες μεταξύ άλλων ενημέρωση για τα μαθήματα, ανοιχτό διάλογο με την καθηγήτρια μέσω ιστολογίου, ενημέρωση για το βιογραφικό της και άλλες δυνατότητες οι οποίες θα αναλυθούν παρακάτω. Στις παρακάτω σελίδες περιγράφω την διαδικασία δημιουργίας της ιστοσελίδας χρησιμοποιώντας την εφαρμογή διαχείρισης περιεχομένου, Joomla. Θα μελετηθούν τα βήματα σχεδιασμού του ιστότοπου, όπως για παράδειγμα οι πρωταρχικές ενέργειες για την επιλογή των κατάλληλων εργαλείων αλλά και η ανάλυση των στόχων. iii

Πίνακας Περιεχομένων Περιεχόμενα Κεφάλαιο 1 Εισαγωγή.1 1.1. Γενικά... 1 1.2. Σκοπός της Πτυχιακής Εργασίας 1 1.3. Συνοπτική Περιγραφή....2 Κεφάλαιο 2 2.1. Τεχνολογίες και Εργαλεία Ανάπτυξης 3 2.1 Αρχές σχεδιασμού ιστοσελίδων....3 2.2 Ιστοσελίδα...3 2.2.1 Στατικές 3 2.2.2 Δυναμικές 4 2.3 Τεχνολογίες και εργαλεία 5 2.3.1 Apache... 5 2.3.2 MySQL... 6 2.3.3 PHP 6 2.3.4 CSS...7 2.3.5 HTML 7 Κεφάλαιο 3-Ανάλυση περιεχομένου ιστοσελίδας 9 Κεφάλαιο 4- Εγκατάσταση Wamp 24 Κεφάλαιο 5 - Joomla! πρόγραμμα εγκατάστασης από Web 32 5.1 Βήματα που ακολουθούνται..32 5.1.2 Βήμα 1 - Επιλογή γλώσσας 32 5.1.3 Βήμα 2 Έλεγχος Εγκατάστασης...33 5.1.4 Βήμα 3 Άδεια..34 5.1.5 Βήμα 4 - Βάση Δεδομένων.34 5.1.6 Βήμα 5 - διαμόρφωση FTP.36 5.1.7 Βήμα 6 Διαμόρφωση...37 5.1.8 Εγκατάσταση δείγμα δεδομένων...38 iv

5.1.9 Βήμα 7 Ολοκλήρωση 39 5.1.10 Αναίρεση δημοσίευσης Παραδείγματα Δεδομένων...40 5.2 Πώς να δημιουργηθεί ένα κενό Joomla...41 5.2.1 Manager Μενού 41 5.2.3 Article manager....43 5.2.4 Cache....44 5.2.2 Κενή Ιστοσελίδα...44 5.3 Δομές και Όροι 45 5.3.1. frontend 45 5.3.2 backend.45 5.4 Αρχεία..47 5.5. Βάση Δεδομένων. 48 5.5.1 Στοιχεία του Joomla!...49 5.5.2.Άρθρο..50 5.5.3 Κατηγορίες......51 5.5.4 Χρήστες (Users).53 5.5.5 Πλοήγηση (Navigation)...53 5.5.6 Ενότητα (Module). 53 5.5.7 Πρότυπα (Templates)...54 5.5.8 Plug-in. 55 5.5.9 Components.55 5.5.10 Επιλογές (Options)....55 5.5.11 Άλλες δομές.. 56 5.6 Πώς να δημιουργήσετε μια "About us σελίδα.56 5.6.1 Στατικό εναντίον δυναμικό περιεχόμενο 56 5.6.2 Το σχέδιο...57 5.6.3 Βήμα 1 - Δημιουργία περιεχομένου...57 5.6.4 Εισαγωγή μιας εικόνας από μια διεύθυνση URL.. 59 5.6.5 Βήμα 2 - Δημιουργία ενός συνδέσμου του μενού....61 5.6.6 Βήμα 3 - «About us» στον δικτυακό τόπο...62 5.6.7 Βήμα 4 - Ανέβασμα Εικόνας... 63 5.6.8 Ένα τυπικό Άρθρο....65 v

5.6.9 Αρχή.65 5.6.10 Μορφή του άρθρου 67 5.6.11 Τίτλος..68 5.6.12 Κατηγορία..69 5.6.13 Κείμενο..69 5.6.14 Επιλογές (Options).70 5.6.15 Περισσότερες επιλογές...71 5.7 Αρθρο Δείγματος.71 5.8 Media Manager 72 5.8.1 Πώς λειτουργεί.. 72 5.9 Φόρμα Επικοινωνίας...77 5.9.1 Δημιουργία ενός στοιχείου μενού. 80 5.10 Δόμηση του περιεχομένου με Κατηγορίες 86 5.11 Μια λίστα όλων των κατηγοριών..90 5.11.1 Μια διάταξη στο blog (όπως στο εξώφυλλο).. 91 5.11.2 Μια λίστα κατηγοριών 93 5.11.3 Συμπέρασμα 93 5.12 Καταστάσεις, Σκουπίδια και Check-Ins.....94 5.12.1 Ανέκδοτες (unpublished)...94 5.12.2 Δημοσίευση (published)..95 5.12.3 Προτεινόμενο (featured)..95 5.12.3 Αρχειοθετημένο (Archived)...95 5.12.4 Σκουπίδια...96 5.12.5 Check In. 97 5.13 Ιστοσελίδα και το Περιεχόμενο...98 5.13.1 Διαμόρφωση...98 5.13.2 GLOBAL CONFIGURATION (Παγκόσμια διαμόρφωση)...98 5.13.3 Ρυθμίσεις τοποθεσίας..99 5.13.4 Ρυθμίσεις του συστήματος 101 5.13.5 Ρυθμίσεις διακομιστή 101 5.13.6 Επιλογές για το περιεχόμενο, components, modules, plug-ins, τις γλώσσες, τα πρότυπα 102 5.14 Πρότυπα...104 vi

5.14.1 Joomla! και τα πρότυπα 105 5.15 Θέσεις.. 106 5.16 Στυλ..109 5.16.1 Πλοήγηση... 110 5.16.2 Breadcrumbs..110 5.16.3 Joomla! ΜΕΝΟΥ...111 5.16.4 Πρώτο παράδειγμα: Μια στατική δομή καταλόγου ή βιβλίου.. 111 5.16.5 Προετοιμασία. 112 5.16.6 Βήμα 1: Δημιουργία του μενού.. 113 5.16.7 Βήμα 2: Δημιουργία των στοιχείων του μενού... 113 5.16.8 Βήμα 3: Δημιουργία και ανάθεση της μονάδας 114 5.16.9 Δεύτερο παράδειγμα: ΣΥΝΔΕΣΗ ΜΕ ΤΙΣ ΚΑΤΗΓΟΡΙΕΣ (ΠΕΡΙΟΔΙΚΟ ΝΕΩΝ).115 5.16.10 Προετοιμασία..115 5.16.11 Βήμα 1: Το μενού....116 5.16.12 Βήμα 2: Τα στοιχεία του μενού.. 116 5.16.13 Κάποιες μικροαλλαγές 117 5.17 Χρήστες και δικαιώματα..119 5.17.1 Εγγραφή και Σύνδεση..119 5.17.2 Επιλογές για τον χρήστη.. 120 5.17.3 Πρόσθετα πεδία προφίλ..122 5.17.4 Ομάδες Χρηστών.123 5.17.5 Προεπιλεγμένα δικαιώματα για τις ομάδες front end users για την ιστοσελίδα. 124 5.17.6 Προεπιλεγμένα δικαιώματα για τις ομάδες back end users της ιστοσελίδας.. 125 5.17.8 Γιατί επίπεδα πρόσβασης 126 5.18 Διαχείριση επεκτάσεων (extension)....128 5.18.1 Ενημέρωση Επέκτασης.130 5.18.2 Ευρεση Επέκτασης...131 5.19 Ενότητες (Modules).132 5.19.1 Ομοιότητες όλων των ενοτήτων...132 5.19.2 Επιλογές για προχωρημένους...133 vii

viii

ix

Κεφάλαιο 1 - Εισαγωγή 1.1 Γενικά Η παρούσα πτυχιακή εργασία εκπονήθηκε κατά την διάρκεια των σπουδών μου στο τμήμα Βιομηχανικής Πληροφορικής ΑΤΕΙ Καβάλας, πραγματοποιήθηκε το ακαδημαϊκό έτος 2012 2013 υπό την επίβλεψη της καθηγήτριας κας. Αικατερίνης Μήτσας Ο σκοπός της συγκεκριμένης πτυχιακής εργασίας είναι ο σχεδιασμός και η ανάπτυξη μίας ιστοσελίδας ειδικού ενδιαφέροντος με το σύστημα διαχείρισης περιεχομένου Joomla, η οποία θα προσφέρει στους χρήστες μεταξύ άλλων ενημέρωση για τα μαθήματα, σημειώσεις του μαθήματος, επιλεγμένα σεμινάρια και αποστολή εργασιών. Ακολούθως, θα παρουσιαστούν τα βήματα για την εγκατάσταση του και θα γίνει αναλυτική παρουσίαση του. Για την δημιουργία της ηλεκτρονικής σελίδας θα χρησιμοποιηθεί το ανοικτού κώδικα σύστημα διαχείρισης περιεχομένου, Joomla, ενώ για την μορφοποίηση και εμπλουτισμό του θα χρησιμοποιηθεί προγραμματισμός σε PHP, HTML και MySQL, καθώς και διάφορα προγράμματα σε περιβάλλον windows. Θα μελετηθούν τα βήματα σχεδιασμού του ιστότοπου, όπως για παράδειγμα οι πρωταρχικές ενέργειες για την επιλογή των κατάλληλων εργαλείων αλλά και η ανάλυση των στόχων. Ταυτόχρονα μελετούμε την βελτιστοποίηση των ιστότοπων για τις μηχανές αναζήτησης αλλά και για τους επισκέπτες αυτών. 1.2 Σκοπός της Πτυχιακής Εργασίας Κατασκευή ηλεκτρονικής σελίδας χρησιμοποιώντας το σύστημα διαχείρισης περιεχόμενου Joomla και διερεύνηση των επιλογών/τεχνικών που έχουν οι διαχειριστές της ιστοσελίδας. 1

1.3 Συνοπτική Περιγραφή Στο πρώτο κεφάλαιο περιγράφουμε τον σκοπό της πτυχιακής αυτής εργασίας και αναφέρουμε της εφαρμογές που θα χρησιμοποιήσουμε για την κατασκευή της ηλεκτρονικής σελίδας. Στο δεύτερο κεφάλαιο θα αναλυθούν όλα τα σημαντικά εργαλεία και οι τεχνικές που θα μπορούσαν να χρησιμοποιηθούν στην ανάπτυξη μιας ιστοσελίδας. Αναφερόμαστε επίσης στα προγράμματα ανοικτού κώδικα και αναλύουμε τις βασικές έννοιες της σχεδίασης και της κατασκευής ενός ιστοχώρου. Στο τρίτο κεφάλαιο θα γίνει λεπτομερή αναφορά του περιεχομένου της ιστοσελίδας με βάση την περιήγηση του χρήστη. Στο τέταρτο κεφάλαιο θα γίνει λεπτομερή αναφορά στην εγκατάσταση του Wamp. Στο επόμενο κεφάλαιο, θα εμβαθύνουμε στο Joomla -CMS, το οποίο θα μας βοηθήσει στην κατασκευή της ιστιοσελίδας. Στο ίδιο κεφάλαιο θα δούμε στην πράξη πως χειριζόμαστε το Joomla! μέσα από την αναλυτική περιγραφή της σχεδίασης και κατασκευής της ιστιοσελίδας. Στο τελευταίο κεφάλαιο θα κλείσουμε αυτή την πτυχιακή εργασία με συμπερασματα και δυσκολίες που προέκυψαν κατά την κατασκευή της ιστοσελίδας. 2

Κεφάλαιο 2 - Τεχνολογίες και Εργαλεία Ανάπτυξης 2.1 Αρχές σχεδιασμού ιστοσελίδων Για την δημιουργία μιας ιστοσελίδας στα πρώτα χρόνια του διαδικτύου χρειάζονταν η εξειδικευμένη γνώση γραφής κώδικα σε HTML. Πλέον με τα Συστήματα Διαχείρισης Περιεχομένου ο δημιουργός διαχειριστής δεν χρειάζεται εξειδικευμένες γνώσεις και μπορεί να επιτύχει ιστότοπους μεγάλης αισθητικής με γνώσεις μορφοποίησης κειμένου και απλού χειρισμού του συστήματος. Πριν γνωρίσουμε τα Συστήματα Διαχείρισης Περιεχομένου καλό είναι να δούμε κάποιες ενέργειες που πρέπει να κάνουμε πριν την δημιουργία ενός ιστότοπου, όπως είναι ο σχεδιασμός και η έρευνα, αλλά και τις βασικές έννοιες και τα εργαλεία που θα χρησιμοποιήσουμε. 2.2 Ιστοσελίδα Ιστοσελίδα είναι το εγγραφό πληροφορία η οποία προορίζεται για τον Παγκόσμιο Ιστό (WWW). Το σύνολο των ιστοσελίδων μας, δημιουργούν των ιστότοπο μας. Οι δύο κύριες κατηγορίες ιστοσελίδων είναι η στατικές και οι δυναμικές. Η επιλογή για το είδος που θα χρησιμοποιήσουμε πρέπει να γίνει κατά κύριο λόγο από το κατά πόσο συχνά θα ανανεώνουμε την πληροφορία που θα εμπεριέχει ο ιστότοπος μας. 2.2.1 Στατικές Οι στατικές σελίδες χαρακτηρίζονται από την μονιμότητα του περιεχομένου και της διάταξης τους. Κυρίως χρησιμοποιείται για την γραφή τους η γλώσσα σήμανσης HTML(HyperText Markup Language), η οποία δημιουργήθηκε από την IBM για την τυποποιημένη εμφάνιση των κειμένων της, αλλά και κάποιο πρόγραμμα με κειμενογράφο 3

WYSIWYG (What You See Is What You Get) όπως είναι το Macromedia / Adobe Dreamweaver. Είναι κατάλληλες για γενικές παρουσιάσεις και για ιστότοπους που το περιεχόμενο τους δεν χρειάζεται συχνά ανανέωση. Τα κυριότερα χαρακτηριστικά μιας στατικής σελίδας είναι: Χαμηλό κόστος κατασκευής. Χαμηλό κόστος φιλοξενίας Γρήγορη κατασκευή. Εύκολη κατασκευή. Γρήγορη προβολή της σελίδας. Δυσκολία ανανέωσης περιεχομένου. Δυσκολία υποστήριξης μεγάλου περιεχομένου. 2.2.2 Δυναμικές Οι δυναμικές ιστοσελίδες χαρακτηρίζονται από την διαδραστικότητα που υπάρχει μεταξυ χρήστη και σελίδας. Για την δημιουργία του χρησιμοποιούνται διάφορες γλώσσες σεναρίων όπως είναι η ASP, JSP, Perl ή PHP. Όλες οι πληροφορίες για τις σελίδες αποθηκεύονται σε βάσεις δεδομένων όπου οι χρήστες μπορούν να τις διαχειρίζονται μέσω των Συστημάτων Διαχείρισης Περιεχομένου. Οι δυναμικές σελίδες περιέχουν και στατικό περιεχόμενο το οποίο επιλέγεται από τον κατασκευαστή του ιστότοπου ποιο θα είναι. Τα κυριότερα χαρακτηριστικά των δυναμικών ιστοσελίδων είναι: Εύκολη ανανέωση περιεχομένου Εύκολη υποστήριξη μεγάλου περιεχομένου Μεγάλο κόστος κατασκευής Μεγάλο κόστος φιλοξενίας Όχι γρήγορη προβολή σε σύγκριση με μια δυναμική Όχι πολυ φιλικές στις μηχανές αναζήτησης 4

2.3 Τεχνολογίες και εργαλεία Για την ανάπτυξη ενός δυναμικού ιστότοπου θα χρειαστούμε κάποια εργαλεία όπως είναι η βάση δεδομένων μας, ο εξυπηρετητής και η γλώσσα προγραμματισμού: Apache Server. MySQL PHP CSS HTML 2.3.1 Apache Όταν αναφερόμαστε στον Server (εξυπηρετητή) εννοούμε τον υπολογιστή που παρέχει υπηρεσίες σε άλλους υπολογιστές μέσα σε ένα τοπικό δίκτυο. Για τον παγκόσμιο ιστό υπάρχουν οι web servers οι οποίοι είναι υπεύθυνοι για την εμφάνιση των ιστοσελίδων τους. Από τους πιο γνωστούς εξυπηρετητές είναι οι Apache και IIS (Internet Information Server). Για την δημιουργία του Apache έπρεπε να φτάσουμε στο 1994 όταν ο Robert McCool αποχωρεί από το πρόγραμμα HTTPd (HTTP daemon) για το National Center for Supercomputing Applications (NCSA) σταματώντας την εξέλιξη του HTTPd που ήταν ο πιο δημοφιλής μέχρι και το 1995. Αναλαμβάνει τότε το πρόγραμμα Apache Software Foundationόπου διατηρείται μέχρι τις μέρες μας. Ο Apache HTTP server, που συχνά αναφέρεται ως Αpache, είναι ένας εξυπηρετητής του παγκόσμιου ιστού (WEB Server), ο οποίος εγκαθίσταται σε δια - λειτουργικά συστήματα (cross - platform), με σκοπό την εξυπηρέτηση αιτημάτων διαφόρων χρηστών για την προβολή των ιστοσελίδων που φιλοξενούν. Η λειτουργία αυτή γίνεται σύμφωνα με τα πρότυπα που ορίζει το πρωτόκολλο HTTP. Για το όνομά του υπάρχουν δύο διαφορετικές εκδοχές. Η πρώτη αναφέρει ότι το όνομα είναι προς τιμή της φυλής των ιθαγενών της Αμερικής (Apache), ενώ η δεύτερη αναφέρεται στα πρώτα χρόνια δημιουργίας του όπου έπρεπε να βγαίνουν 5

συνέχεια διορθώσεις (patches) πάνω στον αρχικό κώδικα και ονομάστηκε A PAtCHy server 2.3.2 MySQL Η MySQL είναι ένα πολύ γρήγορο και δυνατό σύστημα διαχείρισης σχεσιακών βάσεων ανοικτού κώδικα που χρησιμοποιεί την Structured Query Language (SQL), την πιο γνωστή γλώσσα ερωτημάτων για την προσθήκη, την πρόσβαση και την επεξεργασία δεδομένων σε μία Βάση Δεδομένων. Είναι υπεύθυνη για την πρόσβαση των διαπιστευμένων χρηστών στα δεδομένα της. Η MySQL διατίθεται και σαν λογισμικό ανοιχτού κώδικα αλλά και σαν κλειστού κώδικα, είναι εκτελέσιμο σε δια - λειτουργικά συστήματα και μετρά πάνω από 11 εκατομμύρια εγκαταστάσεις καθιστώντας την, από τις πιο δημοφιλείς βάσεις δεδομένων. 2.3.3 PHP H PHP είναι μια server side (εκτελείται στον διακομιστή) γλώσσα σεναρίου σχεδιασμένη για τη δημιουργία δυναμικών σελίδων στο διαδίκτυο, όπου πλαισιώνεται με την HTML και πλέον με την XHTML για την μορφοποίηση των αποτελεσμάτων. Ο κώδικας πριν αποσταλεί σε μία αίτηση πελάτη μεταφράζεται στον διακομιστή δημιουργώντας το παραγόμενο αίτημα για προβολή σε html. Συνήθως εγκαθίσταται ως module πάνω σε έναν server.δημιουργήθηκε απο τον Rasmus Lerdorf το 1995 για την καταμέτρηση των επισκεπτών στη προσωπική του σελίδα. Ήταν σενάριο σε Perl και το ονόμασε Personal Home Page Tools. Στη συνέχεια την άλλαξε σε γλώσσα C και την διέθεσε ελεύθερα από την σελίδα του ως PHP/FI (Personal Home Page/Forms Interpreter). Στη σημερινή της μορφή, PHP Hypertext Preprocessor(προεπεξεργαστής κειμένου) κυκλοφορεί από την έκδοση 3.x. Παρόμοιες γλώσσες είναι οι JSP(Java Server Pages), ASP(Microsoft Active Server Pages) κα. 6

2.3.4 CSS Η CSS (Διαδοχικά Φύλλα Στυλ - Αλληλουχία Φύλλων Στυλ - Cascading Style Sheets), είναι μια γλώσσα υπολογιστή, που ανήκει στην κατηγορία των γλωσσών φύλλων στυλ, και χρησιμοποιείται για τον έλεγχο της εμφάνισης ενός εγγράφου που έχει γραφτεί με μια γλώσσα σήμανσης. Μας χρησιμεύει δηλαδή για τον έλεγχο της εμφάνισης ενός εγγράφου που γράφτηκε με τις γλώσσες HTML και XHTML, δηλαδή για τον έλεγχο της εμφάνισης των ιστοσελίδων και γενικότερα των ιστοτόπων. Η CSS είναι μια γλώσσα υπολογιστή προορισμένη να αναπτύσσει στυλιστικά μια ιστοσελίδα, ουσιαστικά να διαμορφώνει χαρακτηριστικά όπως, τα χρώματα, τη στοίχιση και μας δίνει περισσότερες δυνατότητες σε σχέση με την html. Για μια όμορφη και καλοσχεδιασμένη ιστοσελίδα η χρήση της CSS κρίνεται απαραίτητη. 2.3.5 HTML H HTML (Γλώσσα Σήμανσης Υπερκειμένου - HyperText Markup Language), είναι μία γλώσσα η οποία «λέει» στον υπολογιστή πως θα πρέπει να εμφανίσει μία ιστοσελίδα. Τα αρχεία στα οποία γράφεται αυτή η γλώσσα είναι απλά αρχεία κειμένου (ASCII), τα οποία μπορούν να δημιουργηθούν ακόμη και με τη χρήση του Σημειωματάριου (Notepad) των Windows, έχοντας απλώς την κατάληξη.htm ή.html. Περιλαμβάνουν μέσα τα λεγόμενα tags, τα οποία χρησιμοποιούνται σε κάποιο πρόγραμμα εμφάνισης - περιήγησης ιστοσελίδων (π.χ. Internet Explorer), για να δημιουργηθούν και να εμφανιστούν οι ιστοσελίδες. Η HTML γράφεται υπό μορφή στοιχείων HTML τα οποία αποτελούνται από «ετικέτες», οι οποίες περικλείονται μέσα σε σύμβολα «μεγαλύτερο από» και «μικρότερο από» (για παράδειγμα <html>), μέσα στο περιεχόμενο της ιστοσελίδας. Οι ετικέτες HTML συνήθως λειτουργούν ανά ζεύγη (για παράδειγμα <h1> και </h1>), με την πρώτη να ονομάζεται ετικέτα έναρξης και τη δεύτερη ετικέτα λήξης (ή σε άλλες περιπτώσεις ετικέτα ανοίγματος και ετικέτα κλεισίματος αντίστοιχα). Ανάμεσα στις ετικέτες, οι σχεδιαστές ιστοσελίδων μπορούν να τοποθετήσουν κείμενο, πίνακες, εικόνες κλπ. Ο σκοπός ενός φυλλομετρητή είναι να διαβάζει τα έγγραφα HTML και τα συνθέτει σε σελίδες που μπορεί κανείς να διαβάσει ή να ακούσει. Ο φυλλομετρητής δεν 7

εμφανίζει τις ετικέτες HTML, αλλά τις χρησιμοποιεί για να ερμηνεύσει το περιεχόμενο της σελίδας. Τα στοιχεία της HTML χρησιμοποιούνται για να «κτίσουν» όλους του ιστότοπους. Η HTML επιτρέπει την ενσωμάτωση εικόνων και άλλων αντικειμένων μέσα στη σελίδα, και μπορεί να χρησιμοποιηθεί για να εμφανίσει διαδραστικές φόρμες. Παρέχει τις μεθόδους δημιουργίας δομημένων εγγράφων (δηλαδή εγγράφων που αποτελούνται από το περιεχόμενο που μεταφέρουν και από τον κώδικα μορφοποίησης του περιεχομένου) καθορίζοντας δομικάσημαντικά στοιχεία για το κείμενο, όπως κεφαλίδες, παραγράφους, λίστες, συνδέσμους, παραθέσεις και άλλα. Μπορούν επίσης να ενσωματώνονται σενάρια εντολών σε γλώσσες όπως η JavaScript, τα οποία επηρεάζουν τη συμπεριφορά των ιστοσελίδων HTML. Οι φυλλομετρητές μπορούν επίσης να αναφέρονται σε στυλ μορφοποίησης CSS για να ορίζουν την εμφάνιση και τη διάταξη του κειμένου και του υπόλοιπου υλικού. Ο οργανισμός W3C, ο οποίος δημιουργεί και συντηρεί τα πρότυπα για την HTML και τα CSS, ενθαρρύνει τη χρήση των CSS αντί διαφόρων στοιχείων της HTML για σκοπούς παρουσίασης του περιεχομένου. Η σήμανση της HTML αποτελείται από μερικά βασικά συστατικά, συμπεριλαμβανομένων των στοιχείων (και των ιδιοτήτων τους), τους βασισμένους σε χαρακτήρες τύπους δεδομένων, τις αναφορές χαρακτήρων και τις αναφορές οντοτήτων. Ένα ξεχωριστό σημαντικό συστατικό είναι η δήλωση τύπου εγγράφου (document type declaration), η οποία ορίζει στον φυλλομετρητή τον τρόπο εμφάνισης της σελίδας. Όλα τα tags της HTML, δηλώνονται ως εξής: < ονομασία του tag >. Όλα τα tags της HTML έχουν μία αρχή και ένα τέλος. Στο ενδιάμεσο παρεμβάλλεται το περιεχόμενο του tag. Η αρχή κάθε tag δηλώνεται με <tag> ενώ το τέλος με </tag>. Γενικά το περιεχόμενο μίας ιστοσελίδας είναι tags τα οποία περιέχουν άλλα tags κ.λπ. Πάντα τα tags τα οποία δημιουργούνται (ανοίγουν), θα πρέπει αφού ολοκληρωθούν, να τελειώνουν (κλείνουν). Υπάρχουν εξαιρέσεις, κάποια tags δεν κλείνουν ποτέ. Πρέπει λοιπόν όλα τα tags τα οποία ανοίγουν αφού πληκτρολογηθεί το περιεχόμενο τους να κλείνουν, εκτός βέβαια των tags τα οποία δεν πρέπει εξ ορισμού να κλείσουν. 8

Κεφάλαιο 3 Ανάλυση περιεχομένου ιστοσελίδας Στην αρχική σελίδα ο χρήστης βλέπει το ιστιολόγιο με όλες τις επιλογές και τις πληροφορίες που του παρέχει. Στο πάνω μέρος διακρίνονται οι βασικές επιλογές για την καθοδήγηση του χρήστη σε βασικά κομμάτια του ιστιολογίου «σύνδεσης» σε δίκτυα κοινωνικής δικτύωσης facebook, twitter- και την δυνατότητα αναζήτησης στο ιστιολόγιο..ακριβως από κάτω υπάρχει το βασικό μενού με τα υπομένου για την λεπτομερή περιήγηση του χρήστη. Στην συνεχεια υπαρχει ενα flash με τις 3 βασικότερες παροχές του ιστιότοπου. Στην μέση της αρχικής σελίδας δίνεται η δυνατότητα στον χρήστη να ενημερωθεί για τα τελευταία νέα μέσω ανακοινώσεων και να επιλέξει μία από τις κατηγορίες που εμαφίζονται στον πίνακα αριστερά. Στο κάτω μέρος εμφανίζονται κάποιες αγγελίες για θέσεις εργασίας και κάποια προσωπικα στοιχεία οπως το Βιογραφικό και λεπτομέρειες επικοινωνίας. 9

Σε μία από τις βασικές επιλογές που βρίσκονται στο πάνω μέρος του ιστιολογίου είναι το «Ιστιολόγιο» το οποίο μεταφέρει τον χρήστη σε μια σελίδα κοινωνικού σχολιασμού και ανταλλαγής απόψεων, δίνοντας του την δυνατότητα να ανταλλάξει ιδέες αλλα και να συζητησει για οποιαδηποτε θέμα μπορεί να θεωρεί άξιο λόγου, όπως επίσης να σχολιάσει ήδη αναρτημένα άρθρα. Στην συνέχεια υπάρχει το «Χρήσιμα Links» το οποίο πατώντας το δίνει την δυνατότητα στον χρήστη να μεταβεί σε μια σελίδα του ιστιότοπου για να βρει χρήσιμες πληροφορίες για τις ηλεκτρονικές διευθύνσεις των μεγάλυτερων τεχνολογικών εκπαιδευτικών ιδρυμάτων της χώρας, για το Υπουργειο Παιδίας και Θρησκευμάτων, για την Δικτυακή Πύλη Ελληνικών Πανεπιστημίων, για το Portal για την Δράμα ή το δίκτυο του ΤΕΙ. Τέλος ο χρήστης έχει την δυνατότητα να επιλέξει μια εναλλακτική μηχανή αναζήτησης, να μεταβεί σε σελίδες βιβλιοθηκων σε πανεπιστήμια της Αγγλίας, να αωαζητήσει ηλεκτρονικά βιβλία σχετικά με το αντικείμενο αλλά και τοποθεσίες με Πρότυπα Τυποποιήσεις. 10

11

Ο «Χάρτης Ιστιότοπου» εμφανίζει όλα τα περιεχόμενα του ιστολογίου με τίτλους και δίνει την δυνατότητα στον χρήστη να επιλέξει γρήγορα και άμεσα τι θέλει και να μεταβεί στην αντίστοιχη σελίδα. Η «Επικοινωνία» επιτρέπει στον χρήστη μέσα από μία φόρμα επικοινωνίας δίνοντας κάποια προσωπικά του στοιχεία να υποβάλει κάποιο ερώτημα, παρατήρηση ή απλά να πει στον διαχειριστή του ιστιολογίου. Στην συνέχεια ένα mail θα φτάσει στον διαχειριστη και εκείνος θα απαντήσει στον χρήστη. 12

Στο κεντρικό μενού ο χρήστης επιλέγοντας «Βιογραφικό» μπορει να ενημερωθεί περιληπτικά για το βιογραφικό της καθηγήτριας στην συνεχεια να δει αναλυτικά τις σπουδές κατα χρονολογικη ταξινόμηση 13

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

Και τέλος να ενημερωθει για την επαγγελματικη σταδιοδρομία και την εργασιακή εμπειρία 15

16

Στο βασικό μενόυ υπάρχει επίσης η επιλογή «Ιστιολόγιο» - όπως και στις βασικές επιλογές- για άμεση πρόσβαση του χρήστη στον «χώρο» συζήτησης. Μια πολύ σημαντική επιλογή για τον χρήστη είναι «Μαθήματα Υλικό Μαθημάτων» οπού εκεί μπορεί να επιλέξει το μάθημα «Εισαγωγή στον προγραμματισμό» και στην συνέχεια να επιλέξει κατά σειρά την ενότητα. 17

Επίσης μία σημαντική επιλογή για τον χρήστη είναι το «Υλικό» οπού μπορεί να επιλέξει ανάμεσα σε «Πτυχιακές Εργασίες» και «Εργαστηριακές Ασκήσεις». 18

Επίλογοντας ένα τομέα απο τα παραπάνω «ανοίγει» το αντικέιμενο και υπάρχει επεξηγηση όπως παρακάτω για παράδειγμα Αν τώρα ο χρήστης επιλέξει το «Εργαστηριακές Ασκήσεις» θα μεταφερθεί σε μια σελίδα όπου έχει πρόσβαση σε ασκήσεις που έχουν ολοκληρωθεί στο εργαστηριο σε 19

ηλεκτρονική μορφή και έχει την δυνατότητα να τις «κατεβάσει» τοπικά στον υπολογιστή του. Στην «επικοινωνία» υπάρχουν 2 επιλογές. Η πρώτη είναι η «Λίστα Επικοινωνιών» και η δεύτερη είναι η «Φόρμα Επικοινωνίας».Επιλέγοντας την πρώτη ο χρήστης μπορεί να δει τα στοιχεία επικοινωνιάς με το τμήμα και την υπεύθυνη καθηγήτρια. Επιλέγοντας μία από τις δυο επιλογές μία φόρμα επικοινωνιας εμφανίζεται και ο χρήστης συμπληρώνει τα στοιχεία που του ζητούνται. 20

Τέλος αν επιλέξει «Φόρμα Επικοινωνίας» εμφανίζεται αμέσως η φόρμα για την άμεση επικοινωνία με την υπεύθυνη καθηγήτρια. Τελευταία μα καθόλου ασήμαντη είναι η επιλογή που δίνεται στον χρήστη για την δημιουργεία ενος λογαριασμού στον ιστιότοπο συμπληρόνοντας τα στοιχεία που του ζητάει η φόρμα.. Με την εγγραφή του ο χρήστης θα μπορεί να έχει πρόσβαση σε περισσότερες επιλογές μεσα στον ιστιότοπο, να μπορέι να γράφει απευθείας τα 21

σχόλια του και να μπορεί να εκμεταλλευτει στο 100% τις δυνατότητες του ιστιότοπου και να έχει την μέγιστη εμπειρία από την ξενάγηση του στον ιστιότοπο. Μπορεί τέλος να έχει την δυνατότητα σε περιπτώση που ξεχάσει το όνομα χρήστη (username) ή τον κωδικό πρόσβασης (password) να τους ανακτήσει μέσα από μια φόρμα όπως παρακάτω. 22

Κεφάλαιο 4- Εγκατάσταση Wamp Η εγκατάσταση του Wamp είναι μια απλή διαδικασία και διαρκεί μερικά λεπτά. Το πρόγραμμα είναι διαθέσιμο για λήψη πληκτρολογώντας τη διεύθυνση: http://www.wampserver.com/en/download.php Στη συνέχεια κλικ στο σύνδεσμο DOWNLOAD WampServer 2.0i. Για μετατραπεί το PC σε server, πρέπει να εγκατασταθεί το Wamp για να υποστηρίζει Server Apache, PHP (γλώσσα προγραμματισμού) και MySQL (βάση δεδομένων). Εμφανίζεται η παρακάτω οθόνη. Στη συνέχεια εφόσον εμφανιστεί το παρακάτω η επόμενη επιλογή είναι κλικ στο σύνδεσμο direct link. 23

Εμφανίζεται το παράθυρο διαλόγου Λήψη αρχείου Προειδοποίηση ασφαλείας. Ακολουθεί κλικ στο κουμπί Αποθήκευση. Εμφανίζεται το παράθυρο διαλόγου Αποθήκευση ως. Στο παράθυρο αυτό υπάρχει η επιλογή για την θέση αποθήκευσης. Συγκεκριμένα, θα αποθηκευτεί (κατά προτίμηση) το αρχείο στην Επιφάνεια εργασίας. Στη συνέχεια, κλικ στο κουμπί Αποθήκευση. 24

Εμφανίζεται το παρακάτω παράθυρο διαλόγου. Το παράθυρο δείχνει την πρόοδο λήψης του αρχείου. Μετά το τέλος της λήψης του αρχείου κλικ στο κουμπί Κλείσιμο (εάν στη διαδικασία της λήψης του αρχείου δεν έχει επιλέγει το πλαίσιο ελέγχου Κλείσιμο αυτού του παραθύρου διαλόγου όταν ολοκληρωθεί η λήψη ). Στην επιφάνεια εργασίας εμφανίζεται το παρακάτω εικονίδιο. Διπλό κλικ πάνω στο εικονίδιο για να ξεκινήσει η εγκατάσταση του προγράμματος. Εάν εμφανιστεί το παράθυρο που προειδοποιεί για την ασφάλεια των Windows ακολουθεί κλικ στο κουμπί Εκτέλεση. Στο επόμενο παράθυρο κλικ στο κουμπί Ναι ή Αποδοχή. Εμφανίζεται το παρακάτω παράθυρο διαλόγου. Κλικ στο κουμπί Next. 25

Εμφανίζεται το παράθυρο διαλόγου Setup WampServer 2. Κλικ στο κουμπί επιλογής I accept the agreement. Στη συνέχεια, ακολουθεί κλικ στο κουμπί Next. Εμφανίζεται το παρακάτω παράθυρο διαλόγου. Κλικ στο κουμπί Next. 26

Εμφανίζεται το παρακάτω παράθυρο διαλόγου. Η επόμενη επιλογή είναι το πλαίσιο ελέγχου Create a Desktop icon, για να δημιουργηθεί το αντίστοιχο εικονίδιο στην επιφάνεια εργασίας. Στη συνέχεια, κλικ στο κουμπί Next. Εμφανίζεται το παρακάτω παράθυρο διαλόγου. Στη συνέχεια, κλικ στο κουμπί Install. Μετά το τέλος της εγκατάστασης, εμφανίζεται το παρακάτω παράθυρο διαλόγου. Στο πλαίσιο κειμένου Όνομα αρχείου προτεινόμενη αναφορά ως explorer. Έτσι, δηλώνεται ο Internet Explorer ως ο προεπιλεγμένος Web Browser. Στην συνέχεια, κλικ στο κουμπί Άνοιγμα. 27

Στο παράθυρο που εμφανίζεται κλικ στο κουμπί Next. Εάν εμφανιστεί το παράθυρο που προειδοποιεί για την ασφάλεια των Windows ακολουθεί κλικ στο κουμπί Άρση αποκλεισμού. Εμφανίζεται το παρακάτω παράθυρο διαλόγου. Η επόμενη κίνηση είναι η επιλογή του πλαισίου ελέγχου Launch Wampserver 2 now, για να ξεκινήσει άμεσα η λειτουργία του Server. Στη συνέχεια κλικ στο κουμπί Finish. Στην κάτω δεξιά γωνία της γραμμής εργασιών της επιφάνειας εργασίας, εμφανίζεται το εικονίδιο του Wamp. Επειδή η τελευταία έκδοση του Wamp χρησιμοποιεί την έκδοση 5.3.0 της γλώσσας PHP η οποία δεν είναι συμβατή με την τελευταία έκδοση του Joomla 1.5.14, θα πρέπει να εγκατασταθεί μία επέκταση που θα επιτρέπει εκτέλεση με την PHP σε έκδοση 5.2.x, με την οποία υπάρχει συμβατότητα. Στον Internet Explorer ακολουθεί 28

πληκτρολόγηση με τη διεύθυνση: http://www.wampserver.com/en/addons_php.php. Εμφανίζεται η παρακάτω οθόνη. Κλικ στο σύνδεσμο PHP 5.2.11 και στην οθόνη που εμφανίζεται και ακολούθως κλικ στο σύνδεσμο direct link. Αποθήκευση του αρχείο στην επιφάνεια εργασίας. Στη συνέχεια, εγκατάσταση της εφαρμογής που αποθηκεύτηκε με τον ίδιο τρόπο που εγκαταστάθηκε το Wamp. Μόλις τελειώσει η εγκατάσταση αριστερό κλικ στο εικονίδιο του Wamp που βρίσκεται στη δεξιά πλευρά της γραμμής εργασιών. Από το αναδυόμενο μενού ακολουθεί η επιλογή PHP > Version > PHP 5.2.11. 29

Το πρόγραμμα εγκαταστάθηκε επιτυχώς 30

Κεφάλαιο 5 - Joomla! πρόγραμμα εγκατάστασης απο Web Ο διαχειριστής πρέπει να κατεβάσει το Joomla! 1,7 απο joomla.org και να γίνει αποσυμπίεση των αρχείων στο root φάκελο του web server (π.χ.: / htdocs). Από τώρα και στο εξής, όλα θα πάνε πολύ γρήγορα, επειδή το Joomla! web εγκαταστάτης εργάζεται για τον χρήστη. Μετά την εγκατάσταση ο διαχειριστής πρέπει να πάει στο URL http://localhost/. 5.1 Βήματα που ακολουθούνται 5.1.2 Βήμα 1 - Επιλογή γλώσσας Το πρόγραμμα εγκατάστασης εμφανίζεται με την επιλογή των γλωσσών. Η επιλογή της γλώσσας είναι το πρώτο από τα επτά βήματα της εγκατάστασης. Ρυθμίστε την επιθυμητή γλώσσα και κάντε κλικ στο κουμπί Επόμενο (Εικόνα 1). Σχήμα 1: Installer - Επιλογή γλώσσας 31

5.1.3 Βήμα 2 Έλεγχος Εγκατάστασης Ο έλεγχος εγκατάστασης (Εικόνα 2) θα βοηθήσει τον χρήστη να εξακριβώσει εάν το περιβάλλον server του είναι κατάλληλο για την εγκατάσταση του Joomla! ή όχι. Σχήμα 2: Installer - έλεγχος Εγκατάσταση Είναι ένα καλό σημάδι να εμφανιστούν επί το πλείστον πράσινα αποτελέσματα των δοκιμών. Ανάλογα με τις ρυθμίσεις, μπορεί να υπάρχουν διαφορές. Το Joomla! Installer θεωρεί τις ρυθμίσεις του web server (σε αυτήν την περίπτωσή ο Apache), PHP, και το λειτουργικό σύστημα. Κατά τη χρήση σε συστήματα UNIX (Linux, Mac OS X), θα πρέπει να δώθεί προσοχή στα δικαιώματα αρχείων. Αυτό είναι ιδιαίτερα σημαντικό για το αρχείο configuration.php. Αυτό το αρχείο θα δημιουργηθεί στο τέλος της εγκατάστασης με τις προσωπικές αξίες του χρήστη. Αν ο εγκαταστάτης δεν μπορεί να γράψει στο φάκελο, το Joomla δεν μπορεί να δημιουργήσει το αρχείο και η εγκατάσταση θα αποτύχει. Σε αυτήν την περίπτωση, πρέπει να γίνει προσπάθεια να ρυθμιστούν τα δικαιώματα και στη συνέχεια να γίνει κλικ στο κουμπί ελέγχου επανάληψης. Στη συνέχεια, να γίνει κλικ στο κουμπί Επόμενο και θα πάει στο βήμα της άδειας. 32

5.1.4 Βήμα 3 Άδεια Κάθε προϊόν λογισμικού είναι εν μέρη με άδεια. Το Joomla! διαθέτει άδεια σύμφωνα με την GNU General Public License, έκδοση 2,0 (Σχήμα 3). Σχήμα 3: Πρόγραμμα εγκατάστασης - Άδεια 5.1.5 Βήμα 4 - Βάση Δεδομένων Στο τέταρτο βήμα ρυθμίσεων της βάσης δεδομένων, τα δεδομένα της βάσης παραμέτρους θα ζητηθούν (Σχήμα 4). Ο διαχειριστής μπορε ίνα δημιουργήσει οποιονδήποτε αριθμό των βάσεων στο τοπικό περιβάλλον του server. Υπάρχει ένας διαχειριστής MySQL με το όνομα root. Ο διαχειριστής root είναι ο διαχειριστής MySQL και μπορεί, ως εκ τούτου, να κάνει τα πάντα ρτο MySQL σύστημά. Ο κωδικός πρόσβασης εξαρτάται από το περιβάλλον του διακομιστή (δεν χρειάζεται κωδικός πρόσβασης με XAMPP, με MAMP ο κωδικός πρόσβασης είναι root). 33

Εικόνα 4: Installer - διαμόρφωση βάσης δεδομένων ο διαχειριστής πρέπει να πληκτρολογήσει το παρακάτω στην τοπική εγκατάσταση: computer name: localhost user name: root password: [μόνο ο διαχειριστής το ξέρει] Τώρα γίνεται επιλογή του ονόματος της βάσης δεδομένων. Σε ένα παραγωγικό περιβάλλον σε ένα διακομιστή βάσης δεδομένων με έναν πάροχο, πιθανότατα υπάρχει ενα σταθερό quota των βάσεων δεδομένων και τα διαπιστευτήρια βάση δεδομένων είναι προκαθορισμένα. Εάν υπάρχουν δικαιώματα διαχειριστή στο MySQL server, ο διαχειριστής μπορεί να εισαγάγει ένα όνομα από μια νέα βάση δεδομένων. Το Joomla! τότε θα δημιουργήσει τη βάση δεδομένων. Κάνοντας κλικ στο πράσινο τρίγωνο στις προχωρημένες ρυθμίσεις, επιπλέον επιλογές θα εμφανιστούν. Μπορεί να επιλεχθεί αν οι πίνακες για κάθε υπάρχουσα Joomla! εγκατάσταση αυτής της βάσης δεδομένων θα πρέπει να καθαριστούν ή να αποθηκευτούν και να επισημαίνονται με το πρόθεμα bak_. Το πρόθεμα MySQL table prefix είναι πραγματικά πρακτικό. Μπροστά από κάθε όνομα 34