Δημιουργία Ιστοσελίδας για Ασφαλιστικό Γραφείο

Transcript

1 ΑΤΕΙ ΘΕΣΣΑΛΙΑΣ ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΚΩΝ ΕΦΑΡΜΟΓΩΝ Τμήμα Μηχανικών Πληροφορικής ΤΕ Δημιουργία Ιστοσελίδας για Ασφαλιστικό Γραφείο ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ ΡΙΖΟΓΙΑΝΝΗΣ ΓΕΩΡΓΙΟΣ (ΑΜ: Τ0-2781) Επιβλέπων: <Χαϊκάλης Κωνσταντίνος, Καθηγητής Εφαρμογών, Τομέας Μηχανικών Δικτύων> ΛΑΡΙΣΑ 2014

2 -ii-

3 «Εγώ ο/η < Ριζογιάννης Γεώργιος>, δηλώνω υπεύθυνα ότι η παρούσα Πτυχιακή Εργασία με τίτλο <Δημιουργία Ιστοσελίδας για Ασφαλιστικό Γραφείο> είναι δική μου και βεβαιώνω ότι: Σε όσες περιπτώσεις έχω συμβουλευτεί δημοσιευμένη εργασία τρίτων, αυτό επισημαίνεται με σχετική αναφορά στα επίμαχα σημεία. Σε όσες περιπτώσεις μεταφέρω λόγια τρίτων, αυτό επισημαίνεται με σχετική αναφορά στα επίμαχα σημεία. Με εξαίρεση τέτοιες περιπτώσεις, το υπόλοιπο κείμενο της πτυχιακής αποτελεί δική μου δουλειά. Αναφέρω ρητά όλες τις πηγές βοήθειας που χρησιμοποίησα. Σε περιπτώσεις που τμήματα της παρούσας πτυχιακής έγιναν από κοινού με τρίτους, α- ναφέρω ρητά ποια είναι η δική μου συνεισφορά και ποια των τρίτων. Γνωρίζω πως η λογοκλοπή αποτελεί σοβαρότατο παράπτωμα και είμαι ενήμερος(-η) για την επέλευση των νομίμων συνεπειών» < υπογραφή > < ονοματεπώνυμο >

4 Εγκρίθηκε από την τριμελή εξεταστική επιτροπή Τόπος: Ημερομηνία: ΕΠΙΤΡΟΠΗ ΑΞΙΟΛΟΓΗΣΗΣ

5 Περίληψη Σκοπός της παρούσας πτυχιακής ήταν ο σχεδιασμός μια ιστοσελίδας για ένα Ασφαλιστικό Γραφείο, με δυνατότητα ο επισκέπτης να μπορεί να την επισκεφθεί είτε από τον υπολογιστή του είτε από κάποια κινητή συσκευή. Ο επισκέπτης θα μπορεί να περιηγηθεί σε ένα φιλικό περιβάλλον και να αναζητήσει πληροφορίες για τις κατηγορίες των προγραμμάτων ασφάλισης που υπάρχουν, τις ασφαλιστικές εταιρείες με τις οποίες συνεργάζεται το γραφείο κλπ. Επίσης, θα έχει τη δυνατότητα να κατεβάσει διάφορα χρήσιμα έγγραφα, να διαβάσει ενημερωτικά άρθρα, να γίνει μέλος και να λαμβάνει ενημερωτικά δελτία με νέες προσφορές ασφαλίσεων κ. α. Τέλος, δίνεται η δυνατότητα στο χρήστη να επικοινωνήσει με το διαχειριστή του ιστότοπου μέσω διάφορων φορμών επικοινωνίας ή . Για την κατασκευή της ιστοσελίδας χρησιμοποιήθηκε το ανοιχτού κώδικα Σύστημα Διαχείρισης Περιεχομένου Wordpress καθώς και τεχνολογίες, HTML,PHP,MySQL, JavaScript και AJAX για τη μορφοποίηση και εμπλουτισμό του. Επίσης, χρησιμοποιήθηκε το εργαλείο XAMPP για τη δοκιμή της ιστοσελίδας τοπικά και το πρόγραμμα προσομοιωτής για κινητές συσκευές, Opera Mobile Emulator. -i-

6

7 Ευχαριστίες Θα ήθελα να ευχαριστήσω την οικογένεια μου για την πολύτιμη υποστήριξη τους καθ όλη τη διάρκεια των σπουδών μου. Επίσης, θα ήθελα να ευχαριστήσω και τον επιβλέπων καθηγητή μου, κ. Χαϊκάλη Κωνσταντίνο, για την εμπιστοσύνη που έδειξε στο πρόσωπο μου αναθέτοντας μου την εκπόνηση της παρούσας εργασίας. ονοματεπώνυμο ημερομηνία -iii-

8

9 Περιεχόμενα ΠΕΡΙΛΗΨΗ... I ΕΥΧΑΡΙΣΤΙΕΣ... III ΠΕΡΙΕΧΟΜΕΝΑ... V 1 ΕΙΣΑΓΩΓΗ... 1 ΔΟΜΗ ΤΗΣ ΕΡΓΑΣΙΑΣ ΤΕΧΝΟΛΟΓΙΕΣ & ΕΡΓΑΛΕΙΑ ΑΝΑΠΤΥΞΗΣ ΙΣΤΟΣΕΛΙΔΩΝ ΒΑΣΙΚΕΣ ΈΝΝΟΙΕΣ Παγκόσμιος Ιστός Ιστοσελίδα - Ιστότοπος Όνομα Χώρου Εξυπηρετητής Ιστού Περιηγητής Ιστού ΚΑΤΗΓΟΡΙΕΣ ΙΣΤΟΣΕΛΙΔΩΝ ΣΤΟ ΔΙΑΔΙΚΤΥΟ Στατικές Ιστοσελίδες Πλεονεκτήματα και Μειονεκτήματα Στατικών Ιστοσελίδων Δυναμικές Ιστοσελίδες Πλεονεκτήματα και Μειονεκτήματα Δυναμικών Ιστοσελίδων HTML Τι είναι η γλώσσα HTML Παράδειγμα CSS Τι είναι η CSS και ποία η χρησιμότητα της Πλεονεκτήματα Χρήσης CSS Παράδειγμα SQL Γλωσσικά Στοιχεία v-

10 2.5.2 Εντολές JAVASCRIPT J Query Node.JS Angular JS Phone Gap Τρόπος Σύνταξης Δυνατότητες JavaScript PHP Παράδειγμα PHP Script Πλεονεκτήματα της PHP AJAX Ποίες τεχνολογίες περιέχει το AJAX Πλεονεκτήματα AJAX Μειονεκτήματα AJAX Λειτουργία AJAX XML Βασική Ορολογία Στόχοι της XML MYSQL PHPMYADMIN APACHE SERVER SEO ΣΥΣΤΗΜΑΤΑ ΔΙΑΧΕΙΡΙΣΗΣ ΠΕΡΙΕΧΟΜΕΝΟΥ (CMS) Γιατί τα χρειαζόμαστε; Είδη CMS Πλεονεκτήματα Μειονεκτήματα Κλειστού Κώδικα Πλεονεκτήματα Μειονεκτήματα Ανοιχτού Κώδικα Πλεονεκτήματα CMS Δημοφιλή Προγράμματα CMS Τελική Επιλογή ΕΓΚΑΤΑΣΤΑΣΗ ΤΟΠΙΚΟΥ SERVER XAMPP ΤΙ ΕΙΝΑΙ ΤΟ XAMPP vi-

11 3.2 ΑΡΧΙΤΕΚΤΟΝΙΚΗ ΤΟΥ XAMPP ΕΓΚΑΤΑΣΤΑΣΗ ΤΟΥ XAMPP ΔΗΜΙΟΥΡΓΙΑ ΒΑΣΗΣ ΔΕΔΟΜΕΝΩΝ & ΕΓΚΑΤΑΣΤΑΣΗ WORDPRESS ΔΗΜΙΟΥΡΓΙΑ ΒΑΣΗΣ ΔΕΔΟΜΕΝΩΝ ΕΓΚΑΤΑΣΤΑΣΗ WORDPRESS ΠΕΡΙΒΑΛΛΟΝ ΤΟΥ WORDPRESS ΜΕΝΟΥ ΕΠΙΛΟΓΩΝ ΔΗΜΙΟΥΡΓΙΑ ΤΗΣ ΙΣΤΟΣΕΛΙΔΑΣ ΕΓΚΑΤΑΣΤΑΣΗ ΘΕΜΑΤΟΣ ΕΠΙΛΟΓΕΣ ΘΕΜΑΤΟΣ ΕΜΦΑΝΙΣΗ ΚΕΦΑΛΙΔΑΣ ΕΜΦΑΝΙΣΗ ΦΟΝΤΟΥ ΕΜΦΑΝΙΣΗ ΜΟΝΑΔΩΝ ΠΡΟΣΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑ ΣΕΛΙΔΩΝ ΔΗΜΙΟΥΡΓΙΑ ΥΠΟΣΕΛΙΔΩΝ ΕΠΙΛΟΓΗ ΜΕΝΟΥ ΔΗΜΙΟΥΡΓΙΑ ΑΡΘΡΩΝ ΠΡΟΣΘΕΤΑ ΙΣΤΟΣΕΛΙΔΑΣ Εγκατάσταση Προσθέτων Disable Comments Share Buttons by AddToAny Theme my Login Easy Contact Forms HTML JavaScript Adder MailPoet Newsletters Transposh Translation WP Photo Album GSY Ajax Recent Posts Ajax Live Search Wordfence Security WPFront Scroll Top vii-

12 5.12 ΠΕΡΙΓΡΑΦΗ ΠΡΟΣΘΕΣΗΣ ΠΕΡΙΕΧΟΜΕΝΟΥ ΣΕΛΙΔΩΝ Αρχική Σελίδα-Σελίδα Άρθρων Φιλικός Διακανονισμός Συχνές Ερωτήσεις Χρήσιμες Φόρμες και Έντυπα Σελίδα Διαφημιστικά Σποτ Σελίδες με Συνδέσμους- Πίνακες Χρήσιμες Συμβουλές ΜΟΝΑΔΕΣ ΙΣΤΟΣΕΛΙΔΑΣ Μονάδα Κείμενο Μονάδα GSY Ajax Recent Posts Μονάδα Αρχείο Άρθρων Μονάδα HTML/JavaScript Adder ΜΕΛΗ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕΝΟΥ ΕΡΓΑΛΕΙΑ ΑΝΤΙΓΡΑΦΑ ΒΑΣΗΣ ΔΕΔΟΜΕΝΩΝ ΠΡΟΣΟΜΟΙΩΣΗ ΓΙΑ ΣΥΣΚΕΥΕΣ ΧΕΙΡΟΣ MOBILE VIEW ΕΓΚΑΤΑΣΤΑΣΗ OPERA MOBILE EMULATOR ΧΡΗΣΗ OPERA MOBILE EMULATOR ΣΥΜΠΕΡΑΣΜΑΤΑ ΒΙΒΛΙΟΓΡΑΦΙΑ viii-

13 1 Εισαγωγή Στο κεφάλαιο αυτό παρατίθεται η οργάνωση των κεφαλαίων της εργασίας. Δομή της Εργασίας Η εκπόνηση της παρούσας πτυχιακής εργασίας έχει οργανωθεί στα ακόλουθα κεφάλαια (2-7): Το κεφάλαιο 2, είναι εισαγωγικό και παρουσιάζει τις βασικές έννοιες αλλά και τις τεχνολογίες και εργαλεία ανάπτυξης ιστοσελίδων. Αφορούν άμεσα το αντικείμενο που πραγματεύεται η πτυχιακή εργασία. Το κεφάλαιο 3, αναλύει το λογισμικό XAMPP και παρουσιάζει τα βήματα εγκατάστασης του. Στο κεφάλαιο 4, παρουσιάζεται αναλυτικά η δημιουργία της Βάσης Δεδομένων και η εγκατάσταση του Wordpress που θα χρησιμοποιήσουμε για να αναπτύξουμε την ιστοσελίδα. Στο κεφάλαιο 5, παρουσιάζονται αναλυτικά τα βήματα που ακολουθήθηκαν και οι ρυθμίσεις που έγιναν για την δημιουργία της ιστοσελίδας. Στο κεφάλαιο 6, γίνεται η προσομοίωση της ιστοσελίδας που δημιουργήθηκε,για κινητές συσκευές. Το κεφάλαιο 7, αποτελεί μια σύνοψη της πτυχιακής και παρατίθενται τα συμπεράσματα που προκύψαν. -1-

14

15 2 Τεχνολογίες & Εργαλεία Ανάπτυξης Ιστοσελίδων Σε αυτό το κεφάλαιο γίνεται διευκρίνιση κάποιων βασικών ορολογιών και τεχνολογιών που χρησιμοποιούνται στην ανάπτυξη ιστοσελίδων και είναι απαραίτητες ώστε να γίνει κατανοητό το αντικείμενο που πραγματεύεται η παρούσα πτυχιακή εργασία. 2.1 Βασικές Έννοιες Παγκόσμιος Ιστός Παγκόσμιος Ιστός είναι το δίκτυο των συνδεδεμένων υπολογιστών και δικτύων σε παγκόσμια κλίμακα. Κάθε δίκτυο (δομική μονάδα) του διαδικτύου αποτελείται από συνδεδεμένους υπολογιστές σε τοπικό επίπεδο (πχ. Το δίκτυο υπολογιστών στα γραφεία ενός ομίλου ή εταιρείας). Αυτά τα δίκτυα με τη σειρά τους συνδέονται σε ευρύτερα δίκτυα, όπως εθνικά ή υπερεθνικά. Το ευρύτερο αυτό δίκτυο είναι μοναδικό. Στον παγκόσμιο ιστό χρησιμοποιείται μια συγκεκριμένη ομάδα πρωτοκόλλων επικοινωνίας γνωστή και ως «http». Τα πρωτόκολλα επικοινωνίας HTTP χρησιμοποιούνται από τους περιηγητές ιστού (Web Browsers) του Παγκόσμιου Ιστού και παρέχουν την δυνατότητα μεταφοράς δεδομένων μεταξύ του διακομιστή (server) και του πελάτη (client) Ιστοσελίδα - Ιστότοπος Μια ιστοσελίδα (Web Page) μπορεί να περιλαμβάνει πληροφορίες με μορφή κειμένου, εικόνας, ήχου ή και βίντεο. Οι ιστοσελίδες είναι αποθηκευμένες σε υπολογιστέςεξυπηρετητές ιστού (Web Servers) που τρέχουν ειδικά λογισμικά για αυτό το σκοπό και συνήθως έχουν μεγάλη υπολογιστική ισχύ και μόνιμη σύνδεση με το διαδίκτυο (Internet) ώστε να είναι διαθέσιμες συνεχώς στους χρήστες. Πολλές ιστοσελίδες μαζί συνθέτουν έναν ιστότοπο (Web Site). Οι σελίδες αυτές εμφανίζονται κάτω από το ίδιο όνομα χώρου (Domain Name) π.χ Wikipedia.org.Οι ιστοσελίδες αλληλοσυνδέονται και μπορεί ο χρήστης να μεταβεί από την μία στην άλλη -3-

16 επιλέγοντας τους υπερσυνδέσμους που υπάρχουν μέσα στο κείμενο ή στις εικόνες της ιστοσελίδας Όνομα Χώρου Όνομα Χώρου (Domain Name) είναι ένας περιορισμένος τομέας των διεθνών πόρων του Συστήματος Ονομάτων Χώρου (DNS) ο οποίος εκχωρείται για αποκλειστική χρήση σε ένα πρόσωπο, νομικό ή φυσικό. Το όνομα χώρου που εκχωρείται δεν ανήκει στο πρόσωπο αλλά έχει την αποκλειστική δυνατότητα χρήσης του για όσο διάστημα έχει καταβάλλει τα αντίστοιχα τέλη κατοχύρωσης που απαιτούνται. Ένα Όνομα Χώρου είναι μια ονομασία που επιλέγουμε για να συνδεθούμε σε μία ιστοσελίδα στο διαδίκτυο. Ακολουθείται πάντα από μία κατάληξη (.gr,.com κ.α) που χαρακτηρίζει τη γεωγραφική θέση του ή και την ιδιότητα της ιστοσελίδας. Κάθε Όνομα Χώρου είναι μοναδικό και παρέχει μια πρώτη εικόνα της σελίδας που επισκεπτόμαστε, του περιεχομένου της και των υπηρεσιών που προσφέρει. Είναι σε μορφή κατανοητή για τον χρήστη και αντιπροσωπεύει την διεύθυνση IP που είναι μια σειρά από αριθμούς (π.χ ) και στην οποία βρίσκονται τα αρχεία του ιστότοπου στον εξυπηρετητή (Server) Εξυπηρετητής Ιστού Είναι υπολογιστές που τρέχουν ειδικά λογισμικά, έχουν μεγάλη υπολογιστική ισχύ και μόνιμη σύνδεση στο διαδίκτυο και είναι υπεύθυνοι για να μπορεί να είναι ένας ιστότοπος προσβάσιμος στους χρήστες. Επομένως είναι απαραίτητο ένας ιστότοπος να είναι αποθηκευμένος σε κάποιον Εξυπηρετητή Ιστού (Web Server) για να γίνει δημοσίευση του περιεχομένου του στο διαδίκτυο (Εικόνα 2.1). Εικόνα 2.1: Παράδειγμα Λειτουργίας Οι κυριότεροι Εξυπηρετητές Ιστού είναι ο Apache, ο ISS (Internet Information Server) της Microsoft, ο Nginx και ο GWS της Google με τους τρείς πρώτους εξυπηρετητές να αποτελούν και αυτούς με την ευρύτερη χρήση (Εικόνα 2.2). -4-

17 Εικόνα 2.2: Στατιστικά Χρήσης Εξυπηρετητών Ιστού από τους χρήστες του διαδικτύου Περιηγητής Ιστού Ένας περιηγητής Ιστού ή φυλλομετρητής (Web Browser) είναι ένα λογισμικό που επικοινωνεί με τους εξυπηρετητές Ιστού (Web Servers) και επιτρέπει στον χρήστη να προβάλλει και να αλληλεπιδρά με τις πληροφορίες και το περιεχόμενο που είναι αναρτημένο σε μια ιστοσελίδα ενός ιστότοπου στον Παγκόσμιο Ιστό ή σε ένα τοπικό δίκτυο. Οι Περιηγητές Ιστού επιτρέπουν στον χρήστη να έχει εύκολη και γρήγορη πρόσβαση στις πληροφορίες που βρίσκονται στις ιστοσελίδες και στους ιστότοπους, εναλλάσσοντας τις μέσω των συνδέσμων (links) ή και υπερσυνδέσμων (hyperlinks). Χρησιμοποιούν την γλώσσα μορφοποίησης HTML για την προβολή του περιεχομένου των ιστοσελίδων, γι αυτό η εμφάνισης μια ιστοσελίδας μπορεί να διαφέρει ανάλογα το λογισμικό περιηγητή που χρησιμοποιείται. Για κάθε περιηγητή διατίθενται και -5-

18 αρκετά πρόσθετα («add-ons» ή «plug-ins») με στόχο τη βελτίωση της χρηστικότητας τους,την επαύξηση των δυνατοτήτων τους και την προστασία του χρήστη. Οι πιο δημοφιλείς Περιηγητές Ιστού (Εικόνα 2.3) είναι: Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Apple Safari, Opera. Εικόνα 2.3: Στατιστικά Χρήσης Περιηγητών Ιστού από τους χρήστες του διαδικτύου -6-

19 2.2 Κατηγορίες Ιστοσελίδων στο Διαδίκτυο Όπως αναφέρθηκε και προηγουμένως μια ιστοσελίδα (Web Page) μπορεί να περιλαμβάνει πληροφορίες με μορφή κειμένου, εικόνας, ήχου ή και βίντεο. Είναι ένα είδος εγγράφου του Παγκόσμιου Ιστού που για την δημιουργία του χρησιμοποιούνται ειδικές γλώσσες προγραμματισμού. Υπάρχουν δύο μεγάλες κατηγορίες ιστοσελίδων, οι στατικές (static) και οι δυναμικές (dynamic). Οι διαφορές τους έχουν να κάνουν κυρίως με τη λειτουργία τους και τις δυνατότητες τους και όχι με την εμφάνιση τους Στατικές Ιστοσελίδες Οι στατικές ιστοσελίδες είναι ουσιαστικά απλά HTML έγγραφα,συνδεδεμένα μεταξύ τους μέσω υπερσυνδέσμων, τα οποία μπορούν να περιέχουν κείμενο, εικόνες, συνδέσμους κλπ. Το όνομα τους προέρχεται από το γεγονός ότι το περιεχόμενο τους είναι σταθερό και συγκεκριμένο, με την έννοια ότι δεν αλλάζει συχνά. Μια στατική ιστοσελίδα περιέχει πάντα τις ίδιες πληροφορίες για όλους τους χρήστες που την επισκέπτονται Πλεονεκτήματα και Μειονεκτήματα Στατικών Ιστοσελίδων Τα πλεονεκτήματα χρήσης Στατικών Σελίδων είναι: Κατασκευάζονται πιο εύκολα και με χαμηλότερο κόστος. Έχουν μικρότερες απαιτήσεις σε χώρο φιλοξενίας. Είναι φιλικές προς τις μηχανές αναζήτησης (SEO Friendly) πετυχαίνοντας υψηλότερη κατάταξη σε σχέση με τις δυναμικές. Έχουν χαμηλότερο κόστος συντήρησης. Έχουν πιο γρήγορη ταχύτητα λειτουργίας. Δυνατότητα αναβάθμισης σε δυναμικές. Τα μειονεκτήματα χρήσης Στατικών Σελίδων είναι: Ο χρήστης είναι απαραίτητο να έχει γνώσεις προγραμματισμού προκειμένου να ανανεώσει τα περιεχόμενο της. Ακολουθείται μια κουραστική και καθόλου πρακτική διαδικασία ανανέωσης του περιεχομένου της. Δεν είναι εύκολη η διαδραστικότητα με τον χρήστη. -7-

20 Υπάρχουν δυσκολίες στην συντήρηση ειδικά για μεγάλες ιστοσελίδες. Παρατηρείται μια σταδιακή πτώση στους πίνακες κατάταξης των μηχανών αναζήτησης λόγω της μη συχνής ανανέωσης Δυναμικές Ιστοσελίδες Η δεύτερη μεγάλη κατηγορία ιστοσελίδων είναι οι Δυναμικές,η οποία είναι και η κύρια κατηγορία ιστοσελίδων σήμερα. Η σημαντικότερη διαφορά τους από τις στατικές είναι ο τρόπος λειτουργίας τους και το πλήθος των δυνατοτήτων που προσφέρουν. Τις προτιμούμε για ιστότοπους που αποτελούνται από μεγάλο όγκο δεδομένων και σελίδων που το περιεχόμενο τους αλλάζει αρκετά συχνά (π.χ e-shop, ειδησεογραφικές σελίδες κ.α). Για το σχεδιασμό και την κατασκευή τους απαιτούνται πολύ καλές γνώσεις προγραμματισμού, αφού στηρίζονται σε κώδικες όπως JavaScript, AJAX κλπ και γι αυτό το κόστος και ο χρόνος κατασκευής τους είναι μεγαλύτερος από ότι των στατικών. Στις δυναμικές ιστοσελίδες χρησιμοποιείται κάποια Βάση Δεδομένων (π.χ MySQL) στην οποία αποθηκεύεται το περιεχόμενο και αντλούνται οι πληροφορίες ενός ιστότοπου με εντολή του χρήστη σε κάθε κλικ. Λόγω της Βάσης Δεδομένων που χρησιμοποιείται είναι εύκολη η προσθαφαίρεση περιεχομένου. Για την διαχείριση τους χρησιμοποιείται ένα Σύστημα Διαχείρισης Περιεχομένου ( Content Managment System) γνωστότερο και ως CMS. Μέσω αυτού του συστήματος το περιεχόμενο μια ιστοσελίδας μπορεί να τροποποιηθεί και από χρήστες που δεν έχουν γνώσεις προγραμματισμού. Φυσικά η περιοχή διαχείρισης προστατεύεται από κωδικό πρόσβασης και δεν μπορούν να εισέλθουν οι επισκέπτες της ιστοσελίδας. Εκτενέστερη αναφορά σε αυτά τα συστήματα θα γίνει στην συνέχεια Πλεονεκτήματα και Μειονεκτήματα Δυναμικών Ιστοσελίδων Τα πλεονεκτήματα χρήσης Δυναμικών Ιστοσελίδων είναι: Η ιστοσελίδα είναι πιο λειτουργική. Η ανανέωση του περιεχομένου της είναι πιο εύκολη ακόμα και για κάποιον χωρίς καλές γνώσεις προγραμματισμού. Είναι φιλικές προς τι μηχανές αναζήτησης (SEO Friendly). -8-

21 Γίνεται καλύτερη προσαρμογή του περιεχομένου της στις ανάγκες του κάθε ε- πισκέπτη με αρκετές δυνατότητες, π.χ η δυνατότητα να θυμάται πληροφορίες και προτιμήσεις από προηγούμενες επισκέψεις. Χρήση του Συστήματος Διαχείρισης Περιεχομένου (CMS). Τα μειονεκτήματα χρήσης Δυναμικών Σελίδων είναι: Αναμφίβολα το μεγαλύτερο μειονέκτημα είναι το υψηλότερο κόστος κατασκευής και συντήρησης λόγω της πολυπλοκότητας του περιεχομένου της. Απαιτείται μεγαλύτερος χώρος φιλοξενίας. Για να κατασκευασθεί απαιτείται πολύ χρόνος λόγω της ανάγκης ύπαρξης βάσης δεδομένων. 2.3 HTML Τι είναι η γλώσσα HTML Η HTML (Hyper Text Markup Language) είναι η κύρια γλώσσα σήμανσης υπερκειμένου που χρησιμοποιείται στις ιστοσελίδες και τα στοιχεία της αποτελούν τα βασικά δομικά στοιχεία των ιστοσελίδων. Γράφεται υπό μορφή στοιχείων που αποτελούνται από ετικέτες (tags) οι οποίες περικλείονται μέσα στα σύμβολα < και >, π.χ < b >( με αυτή την εντολή λέμε στον browser να εμφανίσει κάποιο κείμενο με έντονη γραφή), και υποδεικνύουν τη μορφοποίηση των σελίδων καθώς επίσης και τους συνδέσμους προς άλλες σελίδες ή πολυμέσα. Οι ετικέτες συνήθως λειτουργούν ανά ζεύγη,π.χ < h1 > και < /h1 >, με την πρώτη να ονομάζεται ετικέτα έναρξης και τη δεύτερη ετικέτα λήξης. Η βασική λειτουργίας της είναι ότι δίνει εντολές στους περιηγητές ιστού (Web Browsers) μέσα από τις ετικέτες της και το κείμενο, και τους εξηγεί πώς να διαβάσει τα έγγραφα της και να συνθέσει τις σελίδες που απεικονίζονται στις οθόνες μας. Διαφορετικοί περιηγητές ιστού μπορούν να εμφανίζουν το ίδιο αρχείο με διαφορετικό τρόπο ανάλογα με τις επιλογές διαμόρφωσης του προγράμματος περιήγησης. Ένα αρχείο HTML μπορεί να περιέχει το κείμενο της σελίδας, ενσωματωμένες εικόνες και άλλων αντικειμένων για εμφάνιση διαδραστικών φορμών. Ακόμα, ενσωματώνει σενάρια εντολών σε γλώσσες όπως η JavaScript που επηρεάζουν τη συμπεριφορά των ιστοσελίδων. -9-

22 2.3.2 Παράδειγμα Η δημιουργία ενός αρχείου HTML είναι πολύ εύκολη και μπορεί να γίνει με τη χρήση ενός διορθωτή κειμένου (editor) για αυτό το σκοπό. Ένας τέτοιος διορθωτής κειμένου είναι το σημειωματάριο (notepad) των windows. Η διαδικασία που ακολουθείται είναι πολύ εύκολη και γρήγορη. Αρχικά επιλέγουμε τον διορθωτή κειμένου, έπειτα γράφουμε τον κώδικα που θέλουμε και στην συνέχεια αποθηκεύουμε το αρχείο με την ονομασία της αρεσκείας μας με επέκταση.html. Στην Εικόνα 2.4, παρατίθεται ο κώδικας ενός απλού παραδείγματος χρήσης της γλώσσας HTML και το αποτέλεσμα της (Εικόνα 2.5) σε ένα περιηγητή ιστού. <! DOCTYPE html> <html> <Head> <title> My First HTML </title> </head> <body> <h1><b> ΔΟΚΙΜΗ </b></h1> <br> <h2><i> ΤΕΙ ΛΑΡΙΣΑΣ </i></h2> <br> <h3><u> ΡΙΖΟΓΙΑΝΝΗΣ ΓΕΩΡΓΙΟΣ </u></h3> <br> </body> </html> Εικόνα 2.4: Κώδικας γλώσσας HTML Εικόνα 2.5: Προβολή Παραδείγματος -10-

23 2.4 CSS Τι είναι η CSS και ποία η χρησιμότητα της Η CSS (Cascading Style Sheets, διαδοχικά φύλλα στυλ) ανήκει στην κατηγορία των γλωσσών φύλλων στυλ που χρησιμοποιείται για τον έλεγχο της εμφάνισης ενός εγγράφου που έχει γραφτεί με μια γλώσσας σήμανσης (HTML,XHTML), δηλαδή για τον έ- λεγχο της εμφάνισης μια ιστοσελίδας και γενικότερα ενός ιστότοπου. Η CSS είναι μια γλώσσα προορισμένη να αναπτύσσει στυλιστικά μια ιστοσελίδα, δηλαδή να διαμορφώνει περισσότερα χαρακτηριστικά όπως χρώματα,στοίχιση και δίνει περισσότερες δυνατότητες σε σχέση με την HTML. Για μια όμορφη και καλοσχεδιασμένη ιστοσελίδα η χρήση CSS κρίνεται απαραίτητη. Τη χρησιμοποιούμε γιατί μας δίνει τη δυνατότητα να διαχωρίσουμε το σχεδιαστικό κομμάτι της ιστοσελίδας μας σε ένα ξεχωριστό εξωτερικό αρχείο CSS, που θα είναι α- ποθηκευμένα όλα τα στοιχεία σχεδίασης και μορφοποίησης, και το οποίο μπορεί να συνδέεται με όλα τα αρχεία της σελίδας μας. Όπως γίνεται αντιληπτό αυτό είναι πολύ πρακτικό αφού μπορούμε να επέμβουμε στον κώδικα του αρχείου, να κάνουμε κάποια αλλαγή και αυτή θα εφαρμοστεί συνολικά χωρίς να χρειαστεί να γίνει επεξεργασία πολλών σημείων για κάθε σελίδα ξεχωριστά. Έτσι γλιτώνουμε χρόνο αφού δεν γράφουμε πολλές γραμμές κώδικα Πλεονεκτήματα Χρήσης CSS Μερικά από τα πλεονεκτήματα της χρήσης CSS έναντι της μορφοποίησης μέσω HTML είναι: Πολύ μεγαλύτερη ευελιξία. Μερικές μορφοποιήσεις που ήταν δύσκολες μέσω της HTML είναι πλέον εφικτές. Ομοιόμορφη εμφάνιση και ευκολότερη συντήρηση των ιστοσελίδων γιατί η εμφάνιση ολόκληρου του ιστότοπου ελέγχεται από ένα εξωτερικό αρχείο, στο οποίο γίνονται οι αλλαγές. Μικρότερο μέγεθος αρχείου, δεδομένου ότι ο κάθε κανόνας μορφοποίησης γράφεται μόνο μια φορά. Καλύτερο SEO. Οι μηχανές αναζήτησης έχουν πρόσβαση μόνο στο περιεχόμενο και δεν μπερδεύονται με τη μορφοποίηση του πετυχαίνοντας καλύτερη αρχειοθέτηση( indexing). -11-

24 Γρηγορότερες σελίδες. Όταν χρησιμοποιούμε εξωτερικό αρχείο CSS ο περιηγητής ιστού την πρώτη φορά που θα φορτώσει κάποια σελίδα του ιστότοπου μας θα το αποθηκεύσει στην cache μνήμη του (λειτουργεί σαν back up αποθηκεύοντας προσωρινά κάποια αρχεία κατά την περιήγηση μας) χωρίς να χρειάζεται να το κατεβάζει κάθε φορά. Πιστοποιημένο από το W3C, τον μεγαλύτερο οργανισμό Web Standards Παράδειγμα Στην Εικόνα 2.6, παρατίθεται ο κώδικας μορφοποίησης CSS στο παράδειγμα της προηγούμενης ενότητας. CSS Document #body { background-color: #d0e4fe } #h1{ color:orange; text-align:center; width:50%; } #h2{ font-family: Times New Roman ; font-size:20px; width:25%; height:30%; } #h3{ background-color: #e0ffff; } Εικόνα 2.6: Κώδικας του CSS. Η σύνδεση του εξωτερικού αρχείου CSS γίνεται με τον κώδικα που βλέπουμε στη συνέχεια (Εικόνα 2.7) και τοποθετείται στο στοιχείο <head>. <link href="mys.css" rel="stylesheet" type="text/css" /> Εικόνα 2.7: Κώδικας Σύνδεσης Εξωτερικού Αρχείου Το αποτέλεσμα της εφαρμογής των στυλ βλέπουμε στην Εικόνα

25 Εικόνα 2.8: Προβολή αποτελέσματος με χρήση CSS 2.5 SQL Η SQL (Structured Query Language) είναι μια γλώσσα υπολογιστών που σχεδιάστηκε για τη διαχείριση δεδομένων σε ένα σύστημα διαχείρισης σχεσιακών βάσεων δεδομένων, η οποία αρχικά βασίστηκε στη σχεσιακή άλγεβρα. Η γλώσσα περιλαμβάνει δυνατότητες ανάκτησης και ενημέρωσης δεδομένων, δημιουργίας και τροποποίησης σχημάτων και σχεσιακών πινάκων αλλά και ελέγχου πρόσβασης στα δεδομένα Γλωσσικά Στοιχεία Η γλώσσα υποδιαιρείται σε διάφορα γλωσσικά στοιχεία τα οποία περιλαμβάνουν: Clauses, οι οποίες μπορούν να είναι και προαιρετικές σε κάποιες περιπτώσεις, αλλά αποτελούν απαραίτητα συστατικά των δηλώσεων και ερωτήσεων. Expressions, που μπορούν να παραγάγουν είτε κλιμακωτές τιμές είτε πίνακες που αποτελούνται από σειρές και στήλες στοιχείων. Predicates, που διευκρινίζουν ποιοι όροι μπορούν να αξιολογηθούν σαν σωστοί ή λάθος. -13-

26 Queries, που ανακτούν τα στοιχεία βασισμένες σε ειδικά κριτήρια. Statements, που μπορούν να έχουν μια επίδραση στα σχήματα και τα στοιχεία ή μπορούν να ελέγχουν τη ροή του προγράμματος και τις συνδέσεις από άλλα προγράμματα. Το κενό αγνοείται γενικά στα Statements και τις Queries, αλλά είναι απαραίτητο για να ξεχωρίζει statements όπως και στην κανονική γραφή κειμένων Εντολές Κάποιες από τις βασικές εντολές της SQL είναι η δημιουργία πινάκων (create), η επιλογή( select) δεδομένων από έναν ή περισσότερους πίνακες, η προσθήκη στοιχείων σε ένα πίνακα (insert), η αλλαγή στοιχείων (update) και η διαγραφή στοιχείων (delete). Οι εντολές γράφονται με την μορφή ερωτημάτων,queries (Εικόνα 2.9). SELECT * FROM employee; WHERE Job= Manager AND Salary >3000; ORDER BY Salary; Εικόνα 2.9: Παράδειγμα ερωτήματος 2.6 JavaScript Η JavaScript (JS) είναι διερμηνευμένη γλώσσα προγραμματισμού. Αρχικά αποτέλεσε μέρος της υλοποίησης των περιηγητών ιστού ώστε τα σενάρια από την πλευρά του πελάτη (client side scripts) να μπορούν να επικοινωνούν με τον χρήστη, να ανταλλάσουν δεδομένα ασύγχρονα και να αλλάζει δυναμικά το περιεχόμενο του εγγράφου που εμφανίζεται. Είναι μια γλώσσα σεναρίων που βασίζεται στα πρωτότυπα, είναι δυναμική, με ασθενείς τύπους και έχει συναρτήσεις ως αντικείμενα πρώτης τάξης. Ο τρόπος που συντάσσεται είναι επηρεασμένος από τη γλώσσα προγραμματισμού C. Η JavaScript αντιγράφει πολλά ονόματα και συμβάσεις από τη Java αλλά δεν υπάρχει συσχέτιση μεταξύ των δύο τους και έχουν πολύ διαφορετική σημασιολογία. Οι βασικές αρχές σχεδιασμού προέρχονται από τις γλώσσες προγραμματισμού Self και Scheme. Υποστηρίζει αντικειμενοστραφές, προστακτικό και συναρτησιακό στυλ προγραμματισμού κάτι που την καθιστά αρκετά δημοφιλή, έχοντας τραβήξει ακόμα περισσότερο τα βλέμματα καθώς υ- λοποιούνται πολλά ενδιαφέροντα λογισμικά που την υποστηρίζουν. -14-

27 Μερικές ενδιαφέρουσες βιβλιοθήκες που αναδεικνύουν την χρησιμότητας της αλλά και την συνεισφορά της στο web προγραμματισμό είναι οι J Query, η Node.JS, η Angular JS και Phone Gap J Query Η δημοφιλέστερη και ευρύτερη χρησιμοποιούμενη βιβλιοθήκη της JavaScript όλα αυτά τα χρόνια. Η J Query απλοποιεί τον προγραμματισμό καθώς μπορούν να υλοποιηθούν εργασίες (tasks) πολύ απλά που με την συμβατική JavaScript θα ήταν ιδιαίτερα πολύπλοκες. Θεωρείται από τις απαραίτητες βιβλιοθήκες για την υλοποίηση διαδικτυακών εφαρμογών, είτε απλών είτε όχι, προσφέροντας μεγάλο αριθμό δυνατοτήτων και λειτουργιών καθώς και μία μεγάλη κοινότητα ανοιχτού κώδικα που την υποστηρίζει. Είναι συμβατή με όλους τους περιηγητές (browsers) που κυκλοφορούν. Η J Query είναι ένα αρχείο JavaScript που περιέχει όλες τις λειτουργίες της. Μπορεί να συμπεριληφθεί σε μια ιστοσελίδα παρέχοντας το αρχείο τοπικά, <script type= text/javascript src = jquery.js > </script> ή έχοντας ένα σύνδεσμο σε ένα από τους πολλούς εξυπηρετητές που την φιλοξενούν, <script src = > </script> Node.JS Η Node.JS χρησιμοποιήθηκε για να λύσει το πρόβλημα που υπήρχε ανάμεσα στην γλώσσα προγραμματισμού που χρησιμοποιούταν στην μεριά του πελάτη( browser) και στου εξυπηρετητή (server). Οι τεχνολογίες στους εξυπηρετητές αλλάζουν συνεχώς ω- θώντας τους προγραμματιστές να χρησιμοποιούν γλώσσες όπως PHP, JSP,Python κ.α, ενώ πάντοτε στη μεριά του πελάτη χρησιμοποιούν JavaScript. Έτσι για να διευκολυνθεί η κατάσταση χρησιμοποιείται πλέον και στον εξυπηρετητή Angular JS Το Angular JS δένει την HTML σε αντικείμενα JavaScript. Όταν συμβεί μία αλλαγή στα αντικείμενα, η σελίδα ανανεώνεται αυτόματα. Αντίστοιχα το ίδιο συμβαίνει και στην αντίθετη διαδικασία δηλαδή όταν συμβεί μια αλλαγή σε ένα πεδίο κειμένου της HTML,το Angular JS χειρίζεται την κατάσταση αυτόματα χωρίς να χρειάζεται να γίνει κάποια επιπλέον ενέργεια στην HTML. -15-

28 2.6.4 Phone Gap Τα τελευταία χρόνια παρατηρείται μια κατακόρυφη αύξηση της χρήσης των κινητών συσκευών και των εφαρμογών τους. Το Phone Gap(ή Apache Cordova) είναι ένα framework για την ανάπτυξη λογισμικού σε κινητές συσκευές, το οποίο δίνει την δυνατότητα να δημιουργηθούν εφαρμογές με χρήση HTML 5, CSS 3 και JavaScript. Οι πλατφόρμες κινητών συσκευών (Android, ios) έχουν διαφορετικές απαιτήσεις, κανόνες και γλώσσες προγραμματισμού με την χρήση όμως του Phone Gap η υλοποίηση μια εφαρμογής γίνεται μια φορά για όλες Τρόπος Σύνταξης Ο κώδικας JavaScript μια σελίδας περικλείεται από τις ετικέτες <script>. Αν ο κώδικας περιέχει περισσότερες από μία εντολές αυτές θα πρέπει να διαχωριστούν με το χαρακτήρα του ελληνικού ερωτηματικού ;. Ένα απλό παράδειγμα είναι αυτό που ακολουθεί στην Εικόνα <script type= text/javascript > alert ( Καλώς ήρθες! ); </script> Δυνατότητες JavaScript Εικόνα 2.10: Παράδειγμα Κώδικα JavaScript Κάποιες από τις δυνατότητες που μας προσφέρει η JavaScript είναι η επαναφόρτωση μέρους του παραθύρου, η δημιουργία εγγράφων με αλληλεπίδραση, περισσότερος έ- λεγχος στην αλληλεπίδραση με το χρήστη, ζωντανά έγγραφα, πολυμερή έγγραφα με πλαίσια, μηνύματα που ολισθαίνουν, ρολόγια κ..α. 2.7 PHP Η PHP είναι μια γλώσσα προγραμματισμού script από την πλευρά του εξυπηρετητή (server side) η οποία επεκτείνει τις δυνατότητες της HTML δίνοντας μας τη δυνατότητα να δημιουργήσουμε δυναμικές σελίδες. Μπορούμε να ενσωματώσουμε PHP κώδικα μέσα σε μία σελίδα HTML,που θα εκτελείται κάθε φορά που επισκεπτόμαστε την ιστοσελίδα. Ο κώδικας PHP μεταφράζεται στον εξυπηρετητή και δημιουργεί την έξοδο που εμφανίζεται στον επισκέπτη. Είναι προϊόν ανοιχτού κώδικα και ο χρήστης της έχει πρόσβαση σε αυτόν για να τον χρησιμοποιήσει, τροποποιήσει και αναδιανείμει. -16-

29 2.7.1 Παράδειγμα PHP Script Για να δημιουργήσουμε και να δημοσιεύσουμε ένα PHP Script χρειαζόμαστε: Ένα εξυπηρετητή ιστού ( Web Server) με υποστήριξη PHP. Ένα υπολογιστή με έναν απλό διορθωτή κειμένου (text editor) και σύνδεση στο διαδίκτυο. Λογισμικό FTP. Ένα απλό παράδειγμα κώδικα με τη μορφή PHP είναι ο εξής (Εικόνα 2.11): <? Php $ i=0 ; While ( $i <=5 ) { echo Number:. $i. <br> ; $i++; }?> Πλεονεκτήματα της PHP Εικόνα 2.11: Παράδειγμα με Συνθήκη Ελέγχου Τα πλεονεκτήματα της PHP σε σύγκριση με άλλα προϊόντα όπως η JSP, η ASP,η Perl κ. α, είναι τα ακόλουθα: Η PHP μας δίνει τη δυνατότητα για διασυνδέσεις με πολλά διαφορετικά συστήματα βάσεων δεδομένων (MySQL, msql, Oracle, Sybase κ.α). Επειδή σχεδιάστηκε για να χρησιμοποιείται στο Web, περιέχει ενσωματωμένες βιβλιοθήκες για συνηθισμένες web διαδικασίες, όπως η δημιουργία εικόνων GIF δυναμικά, το ηλεκτρονικό ταχυδρομείο κ.α. Είναι μια γλώσσα προγραμματισμού, εύκολη στην εκμάθηση και χρήση. Είναι πολύ αποτελεσματική με υψηλή απόδοση. Έχει χαμηλό κόστος. Είναι διαθέσιμη για πολλά λειτουργικά συστήματα τύπου Unix (Linux, Solaris, IRIX) ή για διαφορετικές εκδόσεις των Microsoft Windows. Ο κώδικας της θα δουλεύει χωρίς αλλαγές στα συστήματα που τρέχουν την PHP. Είναι ανοιχτού κώδικα (open source) και έχουμε πρόσβαση στον κώδικα προέλευσης κάνοντας διορθώσεις και προσθήκες στη γλώσσα, αν το θέλουμε. -17-

30 2.8 AJAX Η τεχνολογία AJAX( Asynchronous JavaScript and XML) αποτελεί τη πιο σύγχρονη τεχνολογία στον προγραμματισμό στο Internet, προσφέροντας διαδραστικές δυνατότητες σε διαδραστικούς ιστότοπους, μετατρέποντας ένα απλό ιστότοπο σε διαδικτυακή εφαρμογή. Επιτρέπει σε ένα χρήστη και ένα εξυπηρετητή να ανταλλάσουν στοιχεία α- σύγχρονα, έτσι ώστε να μη χρειάζεται να φορτώνεται ολόκληρη η ιστοσελίδα παρά μόνο μερικά στοιχεία της. Ένας από τους κύριους εκφραστές της είναι η J Query. Εφαρμογές της τεχνολογίας AJAX παρατηρούμε σε ιστότοπους και κύριο χαρακτηριστικό τους είναι οι εντυπωσιακές κινήσεις που κάνουν αλλάζοντας στοιχεία όπως κείμενα ή συλλογή εικόνων με δυναμικά ξεφυλλίσματα χωρίς την επαναφόρτωση της ιστοσελίδας. Όπως δηλώνει και στο όνομα της, η τεχνολογία AJAX χρησιμοποιεί την γλώσσα προγραμματισμού JavaScript. Παραδείγματα εφαρμογής της τεχνολογίας AJAX βλέπουμε σε σελίδες με ζωντανά αποτελέσματα αναζήτησης( Facebook, Google) καθώς πληκτρολογούμε,σε συνομιλίες (chat),κατά τον έλεγχο διαθεσιμότητας ονόματος χρήστη πριν γίνει εγγραφή (register) κ. α Ποίες τεχνολογίες περιέχει το AJAX Οι τεχνολογίες που περιέχονται είναι οι εξής: (X)HTML και CSS. JavaScript. XML και XLST. Το XMLHttpRequest Object. Document Object Model (DOM). Όταν δημιουργούμε μια εφαρμογή AJAX στην οποία υπάρχει βάση δεδομένων τότε χρησιμοποιούμε και γλώσσα προγραμματισμού, PHP, C#,JAVA, που επικοινωνεί με τον εξυπηρετητή ( server). Το XMLHttpRequest Object χρησιμοποιείται για να ανταλλάξουμε δεδομένα με τον εξυπηρετητή, να κάνουμε ανανέωση (refresh) της σελίδας μας ή να ζητήσουμε κάποιο δεδομένο από τον εξυπηρετητή χωρίς αυτό να γίνεται αντιληπτό από τους χρήστες (Asynchronous). -18-

31 Το Document Object Model (DOM) είναι ένας ιεραρχικός τρόπος παρουσίασης των στοιχείων που συνθέτουν μια ιστοσελίδα (γραφικά, κείμενα κλπ) από τους περιηγητές. Ένα παράδειγμα για το πώς αντιλαμβάνεται και μοντελοποιεί ένα συγκεκριμένο πίνακα ένας περιηγητής είναι αυτό που απεικονίζεται στην Εικόνα Εικόνα 2.12: DOM ενός HTML πίνακα Τα XTML,CSS και XML,XSLT χρησιμοποιούνται για την απεικόνιση των αποτελεσμάτων. Η JavaScript συνδέει όλα τα ανωτέρω μαζί Πλεονεκτήματα AJAX Μερικά από τα πλεονεκτήματα της χρήσης AJAX στις ιστοσελίδες είναι: Το interface (διεπαφή) είναι πιο διαδραστικό δίνοντας μας την αίσθηση ότι οι ενέργειες του χρήστη έχουν άμεσα αποτελέσματα διότι δεν χρειάζεται να ξαναφορτώσει ολόκληρη η σελίδα. Ο χρόνος αναμονής μειώνεται. Για παράδειγμα όταν υποβάλλεται μια φόρμα από τον χρήστη,αυτός μπορεί να συνεχίσει να δουλεύει στην σελίδα ενώ τα δεδομένα αποστέλλονται. Σε περίπτωση σφάλματος επηρεάζεται μόνο το συγκεκριμένο τμήμα, χωρίς να επηρεάζει τα υπόλοιπα. Η κίνηση από και προς τον εξυπηρετητή μειώνεται σημαντικά οπότε μειώνεται και η χρήση του bandwidth. -19-

32 2.8.3 Μειονεκτήματα AJAX Από την άλλη κάθε τεχνολογία έχει και τα μειονεκτήματα της, μερικά από τα μειονεκτήματα εφαρμογής AJAX στις ιστοσελίδες είναι: Το κουμπί πίσω δεν συμπεριφέρεται πάντα όπως θα περιμέναμε καθώς η διεύθυνση (URL) δεν αλλάζει. Απαιτεί περισσότερο χρόνο και έχει μεγαλύτερο κόστος καθώς περιλαμβάνει περισσότερες τεχνολογίες. Δεν μπορούμε να αποθηκεύσουμε σαν σελιδοδείκτη κάποια άλλη σελίδα πέραν της αρχικής καθώς τα δεδομένα με AJAX φορτώνονται ασύγχρονα. Παρατηρούνται ζητήματα που αφορούν τα κενά ασφαλείας, αφήνοντας πολλά αναπάντητα ερωτήματα για το πόσο ασφαλής είναι. Δεν αρχειοθετούνται (indexing) από τις μηχανές αναζήτησης Λειτουργία AJAX Στην Εικόνα 2.13 απεικονίζεται η λειτουργία του AJAX. Ακολουθεί η ανάλυση της: Εικόνα 2.13: Λειτουργία AJAX 1.Ο χρήστης ζητάει κάτι μέσω ενός συμβάντος ( κλικ ) ενεργοποιώντας την JavaScript. 2.Η JavaScript δημιουργεί ένα XMLHttpRequest Object και επικοινωνεί με τον ε- ξυπηρετητή που βρίσκεται η βάση δεδομένων, αφού έχει δεχτεί τα δεδομένα. -20-

33 3.Για την επικοινωνία με τη βάση δεδομένων εκτελείται ένα ασύγχρονο HTTP request. 4.Ο εξυπηρετητής επιστρέφει τα δεδομένα. 5.Όταν επιστραφούν τα δεδομένα τότε το object ξεκινάει κάποιο συμβάν (event). 6.Η callback συνάρτηση διαχειρίζεται την απάντηση του εξυπηρετητή. 2.9 XML Η XML είναι μια γλώσσα σήμανσης που αναπτύχθηκε για να ικανοποιήσει πολλές α- νάγκες δίνοντας στα έγγραφα ένα μεγαλύτερο επίπεδο προσαρμοστικότητας στο στυλ και τη δομή. Δίνεται έτσι η δυνατότητα προσθήκης περισσοτέρων στοιχείων στη γλώσσα από τους σχεδιαστές της HTML. Σχεδιάστηκε δίνοντας έμφαση στην απλότητα, τη γενικότητα και τη χρησιμότητα στο διαδίκτυο. Χρησιμοποιείται ευρέως για την αναπαράσταση δομών δεδομένων σε ένα έγγραφο. Αυτές οι δομημένες πληροφορίες περιλαμβάνουν περιεχόμενο και κάποιες διευκρινίσεις για το ρόλο που παίζει το περιεχόμενο. Σε όλα σχεδόν τα έγγραφα παρατηρείται η ίδια δομή Βασική Ορολογία Τα βασικά στοιχεία που συναντώνται στην καθημερινή της χρήση είναι τα εξής: Χαρακτήρας Unicode. Επεξεργαστής και Εφαρμογή. Σήμανση και Περιεχόμενο. Ετικέτα. Στοιχείο. Χαρακτηριστικό Δήλωση XML Ένα απλό παράδειγμα που περιλαμβάνει όλα τα παραπάνω στοιχεία και έννοιες είναι το ακόλουθο(εικόνα 2.14): <?xml version="1.0" encoding='utf-8'?> <painting> <img src="sample.jpg" alt='pic /> <caption>this is sample" pic, painted in <date>1511</date>-<date>1512</date>.</caption> -21-

34 </painting> Στόχοι της XML Οι στόχοι της XML είναι οι εξής: Εικόνα 2.14: Παράδειγμα XML Πρέπει να είναι εύχρηστη. Πρέπει να υποστηρίζει μεγάλη ποικιλία από εφαρμογές. Να είναι συμβατή με την SGML. Να είναι εύκολο να γράφονται προγράμματα που επεξεργάζονται XML έγγραφα. Τα έγγραφα θα πρέπει να είναι ευανάγνωστα και να δημιουργούνται εύκολα. Ο σχεδιασμός της να είναι τυπικός και περιεκτικός,αλλά και να προετοιμάζεται γρήγορα. Ο αριθμός των προαιρετικών χαρακτηριστικών στην XML θα πρέπει να είναι μικρός,με ιδανικότερο επίπεδο το μηδέν MySQL Η MySQL είναι μια δημοφιλής βάση δεδομένων που χρησιμοποιείται στα διαδικτυακά προγράμματα και ιστοσελίδες. Κάποιες από τις πιο διαδεδομένες διαδικτυακές υπηρεσίες που την χρησιμοποιούν είναι το YouTube,η Wikipedia,η Google, και οι ιστότοποι κοινωνικής δικτύωσης Facebook και Twitter. Η MySQL είναι ένα πολύ γρήγορο και δυνατό σύστημα διαχείρισης βάσεων δεδομένων που χρησιμοποιεί την SQL (Structured Query Language) την τυπική και πιο γνωστή γλώσσα επεξεργασίας για βάσεις δεδομένων παγκοσμίως. Ο MySQL Εξυπηρετητής διασφαλίζει ότι μόνο πιστοποιημένοι χρήστες έχουν πρόσβαση σε αυτή, παρέχει γρήγορη πρόσβαση και μπορούν να δουλεύουν πολλοί χρήστες ταυτόχρονα. Κάποια από τα πλεονεκτήματα της MySQL είναι τα εξής: Είναι γρήγορη,έχει δηλαδή υψηλή απόδοση. Έχει χαμηλό κόστος είτε είναι διαθέσιμη δωρεάν με άδεια ανοικτού κώδικα (Open Source). -22-

35 Είναι εύκολη στην μάθηση. Υπάρχει η δυνατότητα τροποποίησης του κώδικα προέλευσης phpmyadmin Το phpmyadmin είναι ένα εργαλείο λογισμικού, γραμμένο σε PHP, που προορίζεται για την εύκολη διαχείριση βάσεων δεδομένων της MySQL. Μπορεί να χειριστεί βάσεις δεδομένων,πεδία πινάκων αλλά και ολόκληρο τον MySQL Server,μπαίνοντας στο control panel του. Κάποιες δυνατότητες που μας προσφέρει ο phpmyadmin είναι η εκτέλεση ερωτημάτων SQL,η τροποποίηση βάσεων δεδομένων (δημιουργία, διαγραφή) και η συντήρηση τους, η διαχείριση των πεδίων πινάκων (τροποποίηση,μετονομασία,αντιγραφή κλπ) κ.α Apache Server Ο Apache Server είναι ένας από τους δημοφιλέστερους εξυπηρετητές ιστού. Λειτουργεί σε διάφορες πλατφόρμες όπως τα Windows, Linux, Mac OS X κ.α. Κυκλοφόρησε υπό την άδεια λογισμικού apache και είναι ανοιχτού κώδικα λογισμικό. Χρησιμοποιείται σαν διακομιστής σε τοπικά δίκτυα συνεργαζόμενος με συστήματα διαχείρισης Βάσης Δεδομένων, όπως η MySQL. Ο ρόλος του είναι να αναμένει τις αιτήσεις από τους περιηγητές ιστού (browsers) των χρηστών και στη συνέχεια να εμφανίζει τα αποτελέσματα των σελίδων SEO Με τον όρο SEO (Search Engine Optimization) αναφερόμαστε στις διαδικασίες που πρέπει να γίνουν στη δομή και το περιεχόμενο των ιστοσελίδων ώστε να είναι όσο το δυνατό πιο φιλικές στις μηχανές αναζήτησης, με στόχο την υψηλότερη κατάταξη του ιστότοπου και αύξηση της επισκεψιμότητας του, μέσω λέξεων κλειδιών(keywords) που αφορούν το περιεχόμενο της. Οι βασικές τεχνικές (Εικόνα 2.15) για βελτιστοποίηση στις μηχανές αναζήτησης περιλαμβάνουν τα εξής : Βελτίωση του περιεχομένου ώστε να είναι φιλικό και ενδιαφέρον. -23-

36 Χρήση λέξεων κλειδιών στον τίτλο αλλά και στα υπόλοιπα στοιχεία και χαρακτηριστικά μια σελίδας. Χρήση λέξεων κλειδιών σε συνδέσμους από άλλες ιστοσελίδες προς μια συγκεκριμένη ιστοσελίδα. Λέξεις κλειδιά μέσα στο κείμενο. Δημοτικότητα μια ιστοσελίδας όπως μετράται από τους αλγόριθμους κατάταξης π.χ της Google. Εικόνα 2.15: Τεχνικές SEO 2.14 Συστήματα Διαχείρισης Περιεχομένου (CMS) Το Συστήμα Διαχείρισης Περιεχομένου (CMS) είναι ένα λογισμικό που επιτρέπει στον χρήστη του να διαχειριστεί το περιεχόμενο ενός ιστότοπου. Το περιεχόμενο ενός ιστότοπου μπορεί να περιλαμβάνει κείμενο, εικόνες, οποιασδήποτε μορφής αρχεία κ. α. Τα CMS είναι σχεδιασμένα έτσι ώστε να μην απαιτούνται εξειδικευμένες τεχνικές γνώσεις. Όλες οι τροποποιήσεις (Εικόνα 2.16) στις οποίες προχωρούν οι διαχειριστές ενός CMS, γίνονται αυτόματα διαθέσιμες μέσω του διαδικτύου σε όλους τους επισκέπτες και χρήστες του ιστότοπου. -24-

37 Εικόνα 2.16: Τρόπος Λειτουργίας ενός CMS Γιατί τα χρειαζόμαστε; Ο πιο σημαντικός λόγος για τον οποίο ένα CMS είναι απαραίτητο για ένα διαχειριστή είναι η ανάγκη για συχνή αλλαγή του περιεχομένου ενός ιστότοπου. Ακόμα, ένα CMS έχει μικρότερο κόστος συντήρησης και το περιεχόμενο μπορεί να διαχειριστεί αποτελεσματικότερα. Επίσης, μπορεί να γίνει διαμοιρασμός περιεχομένου,τόσο ενδοεταιρικά όσο και στο διαδίκτυο, και διευκολύνει τη δημιουργία συνεργατικών δικτυακών τόπων Είδη CMS Τα CMS διακρίνονται σε κατηγορίες ανάλογα με ορισμένα βασικά χαρακτηριστικά που παρουσιάζουν. Μπορεί λοιπόν να γίνει κατηγοριοποίηση τους είτε επιλέγοντας το είδος του παρόχου τους, είτε επιλέγοντας το πού βρίσκεται ο χώρος αποθήκευσης και διαχείρισης του καθώς και της βάσεως δεδομένων του. Με βάση το χώρο αποθήκευσης και διαχείρισης χωρίζονται στα: Application Service Provider (ASP), δηλαδή συστήματα Υποστήριξης Παρόχου Υπηρεσίας, όπου ο κατασκευαστής τους φιλοξενεί όλα τα δεδομένα και λογισμικά στους εξυπηρετητές της εταιρείας του. Πλεονέκτημα τους είναι ότι μειώνονται τα έξοδα φιλοξενίας (λογισμικά και hardware) και η ανάγκη για ύπαρξη τεχνικών πόρων (συντηρητές δικτύου υπολογιστών) για το CMS. Επίσης ο πά- -25-

38 ροχος προωθεί νέες λειτουργίες του προϊόντος και ανανεώσεις στους πελάτες του. Licensed, δηλαδή με παροχή άδειας, όπου ο κατασκευαστής δεν εμπλέκεται στην όλη διαδικασία λειτουργίας του και ο χρήστης είναι αποκλειστικός υπεύθυνος για την εγκατάσταση, ρύθμιση και συντήρησης του. Η προσέγγιση τους εξασφαλίζει ότι φιλοξενείς και διαχειρίζεσαι τα δικά σου δεδομένα. Με βάση το είδος του παρόχου έχουμε τα εξής: Commercial: που είναι λογισμικά κερδοσκοπικών ή μη εταιρειών. Οι πάροχοι αναπτύσσουν το λογισμικό,το οποίο στη συνέχεια πουλάνε και υποστηρίζουν τεχνικά. Στην σημερινή εποχή οι εμπορικές αυτές λύσεις είναι πιο συχνές από τις ελεύθερες των ανοιχτού κώδικα (Open Source) CMS. Ανοιχτού Κώδικα: (Open Source) πρόκειται για ένα CMS, το οποίο δημιουργείται και συντηρείται από ένα ανεπίσημο και ανιδιοτελή συνεργάτη μια κοινότητας χρηστών. Το λογισμικό διανέμεται στους χρήστες για συγκεκριμένο σκοπό. Στα ανοιχτά λογισμικά το κόστος είναι αυξημένο, διότι περιλαμβάνουν τα έξοδα τεχνικής υποστήριξης καθώς και λογισμικά και προσωπικό (προγραμματιστές) για τη συντήρηση του συστήματος, οι οποίοι ανανεώνουν και εξελίσσουν τις λειτουργίες του προγράμματος. Κλειστού Κώδικα: (Managed Open Source) πρόκειται για έναν συνδυασμό της εμπορική και ελεύθερης προσέγγισης,στα οποία ο πάροχος υιοθετεί μια ανοιχτού κώδικα λύση για την βασική του πλατφόρμα και στην συνέχεια την προσφέρει σε άλλους με συμπληρωματικές υπηρεσίες τεχνικής υποστήριξης Πλεονεκτήματα Μειονεκτήματα Κλειστού Κώδικα Τα Πλεονεκτήματα Κλειστού Κώδικα CMS είναι: Εμπορική Υποστήριξη. Καλύτερη τεκμηρίωση και εκπαίδευση. Ασφάλεια. Συνήθως είναι ετοιμοπαράδοτο. Τα Μειονεκτήματα Κλειστού Κώδικα CMS έχουν να κάνουν ως επί το πλείστον με το κόστος και είναι: Το βασικό κόστος. -26-

39 Το κόστος παραμετροποίησης. Το κόστος ολοκλήρωσης με υπάρχοντα εταιρικά συστήματα Πλεονεκτήματα Μειονεκτήματα Ανοιχτού Κώδικα Τα Πλεονεκτήματα Ανοιχτού Κώδικα CMS είναι: Χαμηλό Κόστος. Πληρώνεις την υποστήριξη και όχι το λογισμικό. Παραμετροποιείται με ευκολία. Μπορεί να ολοκληρωθεί εύκολα με υπάρχοντα λογισμικά. Υποστηρίζεται από την κοινότητα. Μας παρέχουν τη δυνατότητα δοκιμής πριν την αγορά. Συνοδεύονται από αρκετά plug ins,τα οποία δημιουργεί και προσφέρει η κοινότητα. Η μελλοντική εξασφάλιση συνέχειας. Τα Μειονεκτήματα Ανοιχτού Κώδικα CMS είναι: Το ότι είναι ελεύθερο δεν συνεπάγεται ότι το λογισμικό είναι χωρίς κόστος. Έλλειψη εμπορικής υποστήριξης. Εστιάζει περισσότερο στην τεχνική αρχιτεκτονική και το σύνολο των χαρακτηριστικών παρά στην εμπειρία του χρήστη. Έλλειψη τεκμηρίωσης. Δεν συνιστάται για μεγάλες επιχειρήσεις (Enterprise) Πλεονεκτήματα CMS Ορθολογική και εύκολη διαδικασία συγγραφής. Επιτάχυνση στην διαδικασία αλλαγών και δημιουργίας νέων σελίδων. Μεγαλύτερη ομοιομορφία και συνοχή στην πλοήγηση του δικτυακού τόπου. Δυνατότητα επεκτασιμότητας. Αυξημένη ασφάλεια. Υποστήριξη χρηστών με συγκεκριμένα δικαιώματα. Μειωμένο κόστος συντήρησης-διαχείρισης. -27-

40 Υποστήριξη των εκάστοτε στόχων και αναγκών κάποιας επιχείρησης,π.χ βελτίωση περιεχομένου και αύξηση ικανοποίησης του πελάτη. Το περιεχόμενο καταχωρείται στην βάση δεδομένων από τις οποίες μπορούμε να δημιουργήσουμε εύκολα και γρήγορα αντίγραφα ασφαλείας Δημοφιλή Προγράμματα CMS Δημοφιλή προγράμματα Κλειστού Κώδικα CMS είναι το Vignette Content Management, IBM Workplace Web Content Management, Jalios CMS, Powefront CMS. Αντίστοιχα υπάρχουν και κάποια δημοφιλή προγράμματα Ανοιχτού Κώδικα CMS, κάποια από τα οποία χρησιμοποιούνται ευρέως από τους χρήστες, όπως το Wordpress, το Drupal και το Joomla. Άλλα δημοφιλή προγράμματα Ανοιχτού Κώδικα είναι το Phone, Moodle, Typo3 και Xoops (Εικόνα 2.17). Εικόνα 2.17: Λογότυπα CMS Τελική Επιλογή Ολοένα και περισσότερο τα έτοιμα CMS όπως το Joomla και Wordpress κερδίζουν έ- δαφος ανάμεσα στις προτιμήσεις των χρηστών-κατασκευαστών ιστοσελίδων καθώς μπορούν και καλύπτουν τις ανάγκες τους μειώνοντας το κόστος ανάπτυξης και κατασκευής. Υποστηρίζουν πλήρως τις νέες τεχνολογίες και είναι προστατευμένα από κακόβουλες επιθέσεις. Επιπλέον είναι εύχρηστα και οικεία για τους κατασκευαστές ιστοσελίδων ενώ προσφέρουν και χιλιάδες επεκτάσεις για την επέκταση της λειτουργικότητας της ιστοσελίδας. Στην παρούσα εργασία επιλέχθηκε το ανοιχτού κώδικα Σύστημα Διαχείρισης Περιεχομένου Wordpress για την κατασκευή της σελίδας. -28-

41 Το Wordpress είναι ελεύθερο και ανοιχτού κώδικα λογισμικό ιστολογίου και πλατφόρμα δημοσιεύσεων, γραμμένο σε PHP και MySQL. Οι χρήστες του έχουν τη δυνατότητα να αλλάζουν τη θέση των στοιχείων του γραφικού περιβάλλοντος χωρίς να χρειάζεται να επεξεργάζονται κώδικα PHP ή HTML. Επίσης, μπορούν να εγκαθιστούν και να αλλάζουν μεταξύ διαφόρων οπτικών θεμάτων και με επεξεργασία του PHP κώδικα τους να επιτύχουν προχωρημένες τροποποιήσεις. Παρέχει ακόμα τη δυνατότητα ενσωματωμένης διαχείρισης συνδέσμων, μόνιμους συνδέσμους φιλικούς προς τις μηχανές αναζήτησης, ανάθεσης πολλαπλών κατηγοριών και ετικετών σε άρθρα και σελίδες καθώς και αυτόματα φίλτρα για προτυποποιημένη μορφοποίηση του κειμένου. Ακόμα, υποστηρίζει τα πρότυπα Trackback και Pingback για προβολή συνδέσμων προς άλλους ιστότοπους, οι οποίοι με τη σειρά τους έχουν συνδέσμους προς μια δημοσίευση ή άρθρο. Τέλος, διαθέτει μια πλούσια αρχιτεκτονική πρόσθετων εργαλείων, η οποία επιτρέπει στους χρήστες να επεκτείνουν τη λειτουργικότητα του πέρα από τις δυνατότητες της βασικής εγκατάστασης. Οι κυριότεροι λόγοι που επιλέγουμε το Wordpress είναι: Το χαμηλό κόστος, αφού μπορούμε να διαχειριζόμαστε και να τροποποιούμε το περιεχόμενο μόνοι μας σύμφωνα με τις ανάγκες μας. Είναι φιλικό στην κοινωνική δικτύωση. Είναι φιλικό προς τις μηχανές αναζήτησης. Η γρήγορη εκμάθηση του. Κάνοντας δοκιμές και διαδικασίες μπορεί κάποιος να μάθει γρήγορα αυτά που χρειάζεται. Επίσης, υπάρχουν φόρουμ υποστήριξης, οδηγίες και video tutorials. Έχει υψηλά επίπεδα ασφάλειας. Μέσω του RSS feed προσελκύει επισκέπτες στέλνοντας ειδοποιήσεις για προσθήκη νέων αναρτήσεων. Η αμφίδρομη επικοινωνία μεταξύ επισκέπτη και διαχειριστή μέσω των σχόλιων. Ο έλεγχος των συζητήσεων, ο διαχειριστής ξεκινάει τη συζήτηση και εγκρίνει τα σχόλια πριν αναρτηθούν. Η αυξημένη λειτουργικότητα με χρήση προσθέτων πολλές φορές μηδενικού κόστους. -29-

42 Συμβατότητα με τα κινητά, αναγνωρίζει αυτόματα αν κάποιος προβάλλει την ιστοσελίδα μέσω μιας κινητής συσκευής και διαμορφώνει τη σωστή προβολή της. Διατίθενται εφαρμογές για android, iphone,ipad κλπ οι οποίες παρέχουν πρόσβαση σε μερικές από τις δυνατότητες της σελίδας διαχείρισης του Wordpress. Στην Εικόνα 2.18, απεικονίζονται οι προτιμήσεις των χρηστών στην ανάπτυξη ιστοσελίδων με χρήση CMS. Εικόνα 2.18: Ανάπτυξη Ιστοσελίδων με CMS -30-

43 3 Εγκατάσταση Τοπικού Server XAMPP Σε αυτό το κεφάλαιο παρουσιάζονται τα βήματα εγκατάστασης του τοπικού server XAMPP (Εικόνα 3.1),ο οποίος χρησιμοποιήθηκε στην εργασία. Εικόνα 3.1: Λογότυπο XAMPP 3.1 Τι είναι το XAMPP Το XAMPP είναι ένα πακέτο προγραμμάτων ελεύθερου λογισμικού, ανοιχτού κώδικα και ανεξαρτήτου πλατφόρμας με μηδενικό κόστος. Το XAMPP περιλαμβάνει τις τελευταίες εκδόσεις του εξυπηρετητή ιστοσελίδων Apache, την βάση δεδομένων MySQL και ένα διερμηνέα για κώδικα γραμμένο σε PHP και Perl, ενώ περιλαμβάνει και κάποια χρήσιμα εργαλεία (PhpMy Admin, Filezilla Server, Mercury Mail). Με την εγκατάσταση του πακέτου XAMPP γίνεται εγκατάσταση και παραμετροποίηση αυτόματα όλων αυτών των τεχνολογιών για να επικοινωνούν μεταξύ τους, καθιστώντας γρηγορότερη την όλη διαδικασία και με αποφυγή λαθών στη λειτουργία του συστήματος. Το XAMPP είναι ακρωνύμιο των: Χ( σημαίνει cross-platform,δηλαδή λειτουργεί σε πολλές πλατφόρμες). Apache http εξυπηρετητή ιστοσελίδων. MySQL. PHP. -31-

44 Perl. Διατίθεται για διάφορα λειτουργικά συστήματα (Linux, Windows,Mac) από την σελίδα κανονική και μικρότερη έκδοση. Είναι ελεύθερο λογισμικό που προορίζεται ως εργαλείο για την ανάπτυξη και δοκιμή ιστοσελίδων τοπικά. Έχει δημιουργηθεί κάτω από την άδεια χρήση GNU (General Public License). 3.2 Αρχιτεκτονική του XAMPP Η εφαρμογή που αναπτύχθηκε έχει σχεδιαστεί έχοντας ως βάση τη μέγιστη δυνατή λειτουργικότητα. Έχει προσεχθεί έτσι ώστε να μπορεί να εγκατασταθεί σε οποιοδήποτε λειτουργικό σύστημα και να είναι προσπελάσιμη από τους περιηγητές ιστού (browsers). Η δομή της είναι σπονδυλωτή χρησιμοποιώντας αρθρώματα ( modules) και είναι προσιτή στη διαχείριση. Όλα τα παραπάνω οδηγούν σε ένα σύστημα υλικού (H/W) και λογισμικού( S/W),το οποίο αποτελείται από τη βάση δεδομένων που περιέχει τις πληροφορίες του συστήματος, τους υπολογιστές που φιλοξενούν το υλικό, το λογισμικό διεπαφής που επεξεργάζεται τις πληροφορίες και κάνει δυνατή την αλληλεπίδραση των χρηστών με το υλικό. 3.3 Εγκατάσταση του XAMPP Πριν ξεκινήσουμε με την δημιουργία της ιστοσελίδας πρέπει να εγκαταστήσουμε ένα τοπικό server για τις δοκιμές μας, όπως είναι και ο XAMPP. Αρχικά, θα πρέπει να κατεβάσουμε το XAMPP από τη διεύθυνση, Η εγκατάσταση γίνεται ακολουθώντας τα παρακάτω βήματα: Βήμα 1 ο : Επιλέγουμε το XAMPP for Windows όπως δείχνει η παρακάτω εικόνα (Εικόνα 3.2): -32-

45 Εικόνα 3.2: Εγκατάσταση XAMPP- Βήμα 1 ο Βήμα 2 ο : Αφού κάνουμε την επιλογή μας στην συνέχεια μεταφερόμαστε στην σελίδα της Εικόνα 3.3, όπου και θα κατέβει το αρχείο: Εικόνα 3.3: Εγκατάσταση XAMPP- Βήμα 2 ο Εναλλακτικά,αν αντιμετωπίσουμε κάποιο πρόβλημα μεταφερόμαστε στην σελίδα που βλέπουμε στην Εικόνα 3.4, επιλέγοντας το αρχείο εγκατάστασης installer με κατάληξη.exe. -33-

46 Εικόνα 3.4: Εγκατάσταση XAMPP- Βήμα 2 ο β Βήμα 3 ο : Αφού αποθηκεύσουμε το αρχείο στον υπολογιστή μας σε ένα φάκελο (π. χ. Λήψεις/Downloads ) το επόμενο βήμα είναι να πάμε σε αυτό το φάκελο να βρούμε το αρχείο (xampp-win vc11-installer) και επιλέγοντας το με διπλό κλικ να ξεκινήσουμε την εγκατάσταση του. Μας εμφανίζει το παρακάτω παράθυρο(εικόνα 3.5) και πατάμε την επιλογή Next. Εικόνα 3.5: Εγκατάσταση XAMPP- Βήμα 3ο -34-

47 Βήμα 4 ο : Αφήνουμε τις προεπιλεγμένες ρυθμίσεις που υπάρχουν να εγκατασταθούν και πατάμε την επιλογή Next, όπως δείχνει η Εικόνα 3.6: Εικόνα 3.6: Εγκατάσταση XAMPP- Βήμα 4ο Βήμα 5 ο : Επιλέγουμε την τοποθεσία που θέλουμε να εγκατασταθεί ο XAMPP και πατάμε την επιλογή Next (Εικόνα 3.7): -35-

48 Εικόνα 3.7: Εγκατάσταση XAMPP- Βήμα 5ο Βήμα 6 ο : Στην συνέχεια γίνεται η εγκατάσταση των αρχείων του XAMPP στον φάκελο που επιλέξαμε (Εικόνα 3.8). Εικόνα 3.8: Εγκατάσταση XAMPP- Βήμα 6ο -36-

49 Βήμα 7 ο : Αφού ολοκληρωθεί η εγκατάσταση επιλέγουμε να μεταφερθούμε στο Κέντρο Ελέγχου (Control Panel) του XAMPP, όπως δείχνει η Εικόνα 3.9 που ακολουθεί: Εικόνα 3.9: Κέντρο Ελέγχου XAMPP Ο Apache Server για να λειτουργήσει πρέπει να έχει διαθέσιμη την θύρα-port 80.Την πρώτη φορά που θα τρέξουμε το XAMPP ενδεχομένως να μας εμφανιστεί ένα μήνυμα ασφαλείας από το τείχος προστασίας των windows. Επιλέγουμε να επιτρέψουμε να τρέξει η εφαρμογή κανονικά. Μαζί με το XAMPP εγκαθίσταται αυτόματα και η εφαρμογή phpmy Admin για τη διαχείριση της MySQL. Από το Κέντρο Ελέγχου επιλέγοντας το Start ξεκινάμε τον Apache Server και τη βάση δεδομένων MySQL (Εικόνα 3.10). -37-

50 Εικόνα 3.10: Κέντρο Ελέγχου XAMPP Στη συνέχεια πατάμε την επιλογή admin στον Apache και αφού επιλέξουμε την αγγλική γλώσσα μεταφερόμαστε στο διαχειριστικό κομμάτι του προγράμματος Το αποτέλεσμα αυτών των ενεργειών βλέπουμε στην ακόλουθη εικόνα (Εικόνα 3.11): Εικόνα 3.11: Αρχική Σελίδα του XAMPP Επιλέγοντας από το μενού στα αριστερά το status μπορούμε να δούμε αν όλες οι τεχνολογίες του πακέτου XAMPP λειτουργούν σωστά (Εικόνα 3.12). -38-

51 Εικόνα 3.12: XAMPP Status Επίσης, από τις υπόλοιπες επιλογές το phpmy Admin εκκινεί την βάση δεδομένων του MySQL, ενώ το phpinfo() μας δείχνει τις ρυθμίσεις της php του XAMPP. Τέλος, το security ρυθμίζει τα θέματα ασφαλείας της βάσης δεδομένων MySQL και του XAMPP(Εικόνα 3.13). Τα αποτέλεσμα αυτών των επιλογών βλέπουμε στις παρακάτω εικόνες: Εικόνα 3.13: XAMPP Security -39-

52 Επιλέγοντας αυτό το σύνδεσμο ( )μεταφερόμαστε σε μια νέα σελίδα οπού εισάγουμε τους κωδικούς ασφαλείας που θέλουμε για την MySQL και το XAMPP, όπως φαίνεται στην Εικόνα 3.14: Εικόνα 3.14: Ρυθμίσεις Ασφαλείας -40-

53 4 Δημιουργία Βάσης Δεδομένων & Εγκατάσταση WordPress 4.1 Δημιουργία βάσης δεδομένων Από το Κέντρο Ελέγχου του XAMPP αν πατήσουμε την επιλογή admin του MySQL, μεταφερόμαστε στην αρχική σελίδα του phpmy Admin, (εναλλακτικά, μπορούμε να επισκεφθούμε το διαχειριστικό κομμάτι του προγράμματος και να επιλέξουμε την καρτέλα phpmy Admin από το μενού) στην οποία και θα δημιουργήσουμε την βάση δεδομένων μας (Εικόνα 4.1) όπως θα δούμε στη συνέχεια: Εικόνα 4.1: Κέντρο Ελέγχου του phpmy Admin Αφού επιλέξουμε τη καρτέλα Βάσεις Δεδομένων θα πάμε να δημιουργήσουμε την βάση δεδομένων(ορίζω σαν όνομα της το Agent) για την ιστοσελίδα μας που θα γεμίσουμε στην συνέχεια (Εικόνα 4.2). -41-

54 Εικόνα 4.2: Δημιουργία Βάσης Δεδομένων 4.2 Εγκατάσταση WordPress Έχοντας εγκαταστήσει τη βάση δεδομένων το επόμενο βήμα είναι η εγκατάσταση του WordPress που θα χρησιμοποιήσουμε ώστε να αναπτύξουμε τον ιστότοπο μας. Μπορούμε να κατεβάσουμε απευθείας την ελληνική έκδοση του WordPress από τη διεύθυνση το αποτέλεσμα της οποίας βλέπουμε στην Εικόνα 4.3 που ακολουθεί: -42-

55 Εικόνα 4.3: Αρχική Σελίδα WordPress Επιλέγοντας την καρτέλα Εγκατάσταση μεταφερόμαστε στην σελίδα όπου μπορούμε να κατεβάσουμε το πλήρες πακέτο στα ελληνικά ή μεμονωμένα τα αρχεία γλώσσας για να δημιουργήσουμε τον ιστότοπο μας σε ελληνικό περιβάλλον (Εικόνα 4.4). Εικόνα 4.4: Κατέβασμα Word Press Όταν ολοκληρωθεί το κατέβασμα θα πρέπει να αποσυμπιέσουμε τα αρχεία του πακέτου με τη χρήση ενός εργαλείου αποσυμπίεσης (π.χ WinRar). Με δεξί κλικ επιλέγο- -43-

56 υμε το αρχείο και πατάμε εξαγωγή. Με αυτήν την ενέργεια δημιουργείται ένας φάκελος με την ονομασία WordPress,τον οποίο μπορούμε να αφήσουμε ως έχει ή να του δώσουμε κάποια άλλη ονομασία. Από το Κέντρο Ελέγχουν του XAMPP επιλέγοντας το κουμπί explorer,όπως απεικονίζετε στην ακόλουθη εικόνα, ανοίγουμε τα αρχεία του προγράμματος (Εικόνα 4.5): Εικόνα 4.5: Κέντρο Ελέγχου XAMPP Επιλέγουμε το φάκελο htdocs και μέσα σε αυτόν δημιουργούμε τον φάκελο μας με τα αρχεία που αποσυμπιέσαμε προηγουμένως. Ο φάκελος θα αποτελέσει την τοποθεσία της ιστοσελίδας μας. Τα αρχεία που περιέχονται στον φάκελο βλέπουμε στην Εικόνα 4.6 που ακολουθεί: -44-

57 Εικόνα 4.6: Αρχεία φακέλου WordPress Στη συνέχεια θα μεταβούμε στη διεύθυνση όπου και θα μας ζητηθεί να δημιουργήσουμε το αρχείο ρυθμίσεων αυτόματα (Εικόνα 4.7). Εικόνα 4.7: Δημιουργία αρχείου ρυθμίσεων Αφού επιλεχθεί η Δημιουργία του αρχείου ρυθμίσεων μας εμφανίζεται ένα μήνυμα που μας ζητά να εισάγουμε κάποια βασικά στοιχεία, το μήνυμα αυτό βλέπουμε στην Εικόνα 4.8: -45-

58 Εικόνα 4.8: Το μήνυμα του WordPress Αφού επιλέξουμε το κουμπί Πάμε στο κάτω μέρος του μηνύματος προχωράμε στο επόμενο βήμα όπου θα δώσουμε τα στοιχεία για την εγκατάσταση του WordPress,όπως βλέπουμε παρακάτω (Εικόνα 4.9). Δίνουμε το όνομα χρήστη root για την MySQL,το οποίο είναι το προεπιλεγμένο για τη διαχείριση των βάσεων δεδομένων από την phpmy Admin. Εικόνα 4.9: Συμπλήρωση στοιχείων -46-

59 Αφού δώσαμε τα στοιχεία που μας ζητήθηκαν και πατήσαμε το κουμπί Υποβολή το επόμενο βήμα είναι να συμπληρώσουμε τα στοιχεία του ιστότοπου μας και να πατήσουμε το κουμπί Εγκατάσταση του Wordpress, όπως φαίνεται στην Εικόνα Εικόνα 4.10: Συμπλήρωση στοιχείων για την εγκατάσταση του WordPress Αν όλα τα στοιχεία που συμπληρώσαμε είναι εντάξει τότε είμαστε έτοιμοι να συνδεθούμε και να ξεκινήσουμε την δημιουργία του ιστότοπου μας (Εικόνα 4.11). -47-

60 Εικόνα 4.11: Μήνυμα του WordPress Το τελευταίο βήμα είναι να εισάγουμε τα στοιχεία που μας ζητούνται (Εικόνα 4.12) για να εισαχθούμε στο περιβάλλον του WordPress και να αρχίσουμε τη δημιουργία του περιεχομένου των σελίδων που θα αποτελέσουν τον ιστότοπο μας. Εικόνα 4.12: Στοιχεία εισόδου στο περιβάλλον του WordPress Είμαστε έτοιμοι!!. Πατώντας σύνδεση μεταφερόμαστε στη σελίδα διαχείρισης του WordPress. Σημείωση: Αν δεν είχαμε κατεβάσει το πλήρες πακέτου εγκατάστασης στα ελληνικά θα έπρεπε να κατεβάζαμε τα μεμονωμένα αρχεία el.mo και admin-el.mo όπως -48-

61 φαίνεται στην Εικόνα 4.13, και να τα βάλουμε στον κατάλογο wp-content/languages της εγκατάστασης μας. Εικόνα 4.13: Αρχεία εξελληνισμού του Word Press Στη συνέχεια θα ανοίγαμε το αρχείο wp-config.php και θα αλλάζαμε τον ορισμό της γλώσσας. Ο ορισμός στην αγγλική εγκατάσταση ενδέχεται να είναι κενός: Define( WPLANG, ); Για να γίνει η αλλαγή στα ελληνικά θα προσθέσουμε στον παραπάνω κώδικα το el ανάμεσα στα εισαγωγικά. Το αποτέλεσμα θα έχει την ακόλουθη μορφή: Define( WPLANG, el ); 4.3 Περιβάλλον του WordPress Το WordPress και γενικά τα CMS αποτελούνται από δυο περιβάλλοντα: Του Χρήστη,όπου είναι αυτό που βλέπει ο επισκέπτης του ιστότοπου. Της Διαχείρισης, στο οποίο ο διαχειριστής τροποποιεί το περιεχόμενο του ιστότοπου, δημιουργώντας σελίδες ή και άρθρα και ορίζει τις ρυθμίσεις του. 4.4 Μενού Επιλογών Στη σελίδα διαχείρισης του WordPress (Εικόνα 4.14), υπάρχει αριστερά ένα μενού επιλογών που μας προσφέρει δυνατότητες και ρυθμίσεις. Τα στοιχεία του μενού είναι: Πίνακας ελέγχου, όπου βρίσκονται οι ανανεώσεις. Οι ανανεώσεις περιλαμβάνουν τις αναβαθμίσεις σε νέες εκδόσεις του WordPress,την ενημέρωση των πρόσθετων που χρησιμοποιούμε όπως επίσης και αναβαθμίσεις ή τροποποιήσεις των θεμάτων. Άρθρα, από όπου διαχειριζόμαστε τα άρθρα μας. -49-

62 Πολυμέσα, αφορά τη διαχείριση των αρχείων που θέλουμε να έχουμε στον ιστότοπο μας. Σελίδες, με τις οποίες δημιουργούμε το περιεχόμενο τους ιστότοπου μας και ε- πεξεργαζόμαστε τις πληροφορίες που θέλουμε να εμφανίζονται. Σχόλια, μπορούμε να διαχειριστούμε τα σχόλια που έχουν γίνει στις σελίδες και τα άρθρα του ιστότοπου. Εμφάνιση, μπορούμε να δούμε τις επιλογές σχετικά με την εμφάνιση του ιστότοπου μας (θέματα, μονάδες, μενού κλπ). Πρόσθετα, διαχείριση των προσθέτων τα οποία δίνουν νέες δυνατότητες στην εφαρμογή και στον ιστότοπο. Μέλη, όπου μπορούμε να διαχειριστούμε τα μέλη και το ρόλο τους στον ιστότοπο μας, αλλά και να επεξεργαστούμε τις πληροφορίες του προφίλ μας. Εργαλεία, μπορούμε να εισάγουμε σελίδες, άρθρα κλπ από έναν άλλο ιστότοπο ή να εξάγουμε τον ιστότοπο μας σε ένα αρχείο XML. Ρυθμίσεις, από όπου αλλάζουμε ρυθμίσεις που σχετίζονται με τον ιστότοπο μας. Εικόνα 4.14: Σελίδα διαχείρισης WordPress -50-

63 5 Δημιουργία της ιστοσελίδας Έχοντας εγκαταστήσει και ρυθμίσει όλα τα απαραίτητα προγράμματα, όπως είδαμε στα προηγούμενα κεφάλαια, το επόμενο βήμα είναι η δημιουργία των σελίδων του ιστότοπου μας και η μορφοποίηση του περιεχομένου τους. 5.1 Εγκατάσταση Θέματος Το πρώτο βήμα είναι να επιλέξουμε το πώς θα είναι εμφανισιακά η ιστοσελίδα. Στο διαδίκτυο κυκλοφορούν χιλιάδες θέματα που μας παρέχουν λειτουργίες και επιλογές α- νάλογα με τις ανάγκες μας. Τα θέματα μπορούν να είναι δωρεάν ή επί πληρωμή και τα βρίσκουμε από την επίσημη ιστοσελίδα του WordPress Επίσης, μπορούμε να τα αναζητήσουμε και κατεβάσουμε από το περιβάλλον διαχείρισης του WordPress επιλέγοντας από το μενού Εμφάνιση -> Θέματα. Η σελίδα που θα μεταφερθούμε αποτελείται από δυο καρτέλες. Την καρτέλα Θέματα (Εικόνα 5.1) στην οποία βλέπουμε τα θέματα που έχουμε εγκαταστήσει και τα οποία μπορούμε να ενεργοποιήσουμε, να διαγράψουμε, να δούμε τις πληροφορίες περιγραφής τους όπως επίσης και την προεπισκόπηση τους στην ιστοσελίδα μας. Κατά την εγκατάσταση του WordPress γίνεται εγκατάσταση και ενός θέματος( στην έκδοση μας το θέμα Twenty Fourteen ). Η δεύτερη καρτέλα Προσθήκη Νέου μας δίνει την δυνατότητα να αναζητήσουμε και να εγκαταστήσουμε ένα θέμα επιλέγοντας τα χαρακτηριστικά που θέλουμε να έχει (χρώμα, στήλες κλπ) μέσα από τα Φίλτρα Χαρακτηριστικών. Επιλέγοντας το κουμπί Εφαρμογή φίλτρων θα μας βγάλει τα αποτελέσματα των διαθέσιμων θεμάτων βάση των επιλογών που κάναμε (Εικόνα 5.2). -51-

64 Εικόνα 5.1: Καρτέλα Θεμάτων Εικόνα 5.2: Καρτέλα Αναζήτησης Θεμάτων Από τα αποτελέσματα διαλέγουμε το θέμα που μας αρέσει και ανταποκρίνεται στις ανάγκες μας και πατάμε Εγκατάσταση. Αφού ολοκληρωθεί η εγκατάσταση πατάμε Ενεργοποίηση και το θέμα μας ενεργοποιείται (Εικόνα 5.3). Εναλλακτικά, μπορούμε να το ενεργοποιήσουμε από την καρτέλα διαχείρισης θεμάτων. -52-

65 Εικόνα 5.3: Ενεργοποίηση Θέματος Ένας άλλος τρόπος που μπορούμε να εγκαταστήσουμε ένα θέμα είναι η επιλογή Μεταμόρφωση Θεμάτων από την καρτέλα Προσθήκη Θεμάτων. Με αυτή την επιλογή μπορούμε να εγκαταστήσουμε θέματα που έχουμε κατεβάσει στον υπολογιστή μας σε συμπιεσμένη μορφή «zip» και περιέχουν τα αρχεία και τους υποφακέλους του θέματος. Αφού επιλέξουμε το κουμπί Επιλογή Αρχείου αναζητούμε το αρχείο zip και αφού το βρούμε πατάμε Άνοιγμα. Τέλος, επιλέγουμε το κουμπί Εγκατάσταση και το θέμα μας εγκαθίσταται αυτόματα και μπορούμε να το ενεργοποιήσουμε (Εικόνα 5.4). Εικόνα 5.4: Μεταμόρφωση Θέματος Το θέμα που επιλέχθηκε για τη δημιουργία της ιστοσελίδας είναι το Graphene. Ανοίγοντας νέα καρτέλα στο περιηγητή και πληκτρολογώντας τη διεύθυνση θα μας ανοίξει η ιστοσελίδα που έχουμε κάνει εγκατάσταση (Εικόνα 5.5). -53-

66 Εικόνα 5.5: Η ιστοσελίδα μας 5.2 Επιλογές Θέματος Αφού έγινε η επιλογή θέματος το επόμενο βήμα είναι να κάνουμε τις απαραίτητες ρυθμίσεις, ώστε να μορφοποιήσουμε την εμφάνιση της ιστοσελίδας σύμφωνα με τις προτιμήσεις μας. Εικόνα 5.6: Διαχείριση Ενεργού Θέματος Επιλέγοντας το θέμα εμφανίζεται ένα παράθυρο. Πατώντας το κουμπί Επιλογές Graphene,Εικόνα 5.6, (ή την αντίστοιχη καρτέλα από το μενού στη σελίδα διαχείρι- -54-

67 σης επιλέγοντας αρχικά Εμφάνιση -> Επιλογές Graphene ) μεταφερόμαστε στις καρτέλες ρυθμίσεων του θέματος(εικόνα 5.7). Εικόνα 5.7: Επιλογές Θέματος Επιλέγοντας το κουτί Επιλογές πάνω μπάρας,από την καρτέλα των Γενικών ρυθμίσεων, μπορούμε να προσθέσουμε τα εικονίδια διαφόρων μέσων κοινωνικής δικτύωσης (Εικόνα 5.8). -55-

68 Εικόνα 5.8: Επιλογές πάνω μπάρας Θέματος Το αποτέλεσμα αυτών των ρυθμίσεων βλέπουμε στην Εικόνα 5.9, που ακολουθεί: Εικόνα 5.9: Εικονίδια Μέσων Κοινωνικής Δικτύωσης Επιλέγοντας το κουτί, Επιλογές υποσέλιδου ρυθμίζουμε τα στοιχεία που θέλουμε να εμφανίζονται στο υποσέλιδο(footer) της ιστοσελίδας μας (Εικόνα 5.10). -56-

69 Εικόνα 5.10: Επιλογές Υποσέλιδου Στο πλαίσιο που βλέπουμε στην προηγούμενη εικόνα πληκτρολογούμε τον κώδικα που ακολουθεί: <p style="text-indent: 36pt;text-align: center"> <span style="font-size:15px;float:left;color:white">ασφαλιστικεσ ΠΡΑΚΤΟΡΕΥΣΕΙΣ </span> <span style="font-size:15px;float:left;color:white">πυθεου 44,ΑΘΗΝΑ,Τ.Κ.11745</span> </p> <p style="text-indent: 36pt;text-align: center"> <span style="font-size:15px;float:left;color:white"> <b>τηλ.:</b> , <b>κιν.:</b> , </span> <span style="font-size:15px;float:left;color:white"><b> 1.:</b><a </span> <span style="font-size:15px;float:left;color:white"><b> 2.:</b><a Το αποτέλεσμα του κώδικα βλέπουμε στην Εικόνα Εικόνα 5.11: Υποσέλιδο ιστότοπου -57-

70 Στην καρτέλα Εμφάνιση μπορούμε να κάνουμε διάφορες ρυθμίσεις για την εμφάνιση της ιστοσελίδας, ακολουθώντας τα παρακάτω βήματα: Βήμα 1 ο : Αρχικά θα ρυθμίσουμε την κεφαλίδα της ιστοσελίδας μας. Επιλέγουμε το κουτί, Επιλογές Εμφάνισης Κεφαλίδας και αποθηκεύουμε τις επιλογές μας, όπως φαίνεται παρακάτω (Εικόνα 5.12): Εικόνα 5.12: Επιλογές Κεφαλίδας Βήμα 2 ο : Στη συνέχεια επιλέγουμε το κουτί, Επιλογές στηλών για να ρυθμίσουμε πόσες στήλες θέλουμε να εμφανίζονται στις σελίδες του ιστότοπου. Εικόνα 5.13:Επιλογή στηλών Βήμα 3 ο : Στο επόμενο βήμα μας δίνεται η δυνατότητα να ρυθμίσουμε τις διαστάσεις(πλάτη) της πλατφόρμας αλλά και των στηλών(πλευρικά πάνελ,περιεχόμενο) χειροκίνητα χωρίς να πειράξουμε τον κώδικα (Εικόνα 5.14). -58-

71 Εικόνα 5.14: Επιλογές Διαστάσεων Βήμα 4 ο : Επιλέγουμε την καρτέλα Επιλογές εμφάνισης άρθρων (Εικόνα 5.15) για να ρυθμίσουμε πώς θέλουμε να εμφανίζονται τα άρθρα που θα δημοσιεύουμε. Στην καρτέλα Επιλογές Εμφάνισης Σύνοψης επιλέγουμε να εμφανίζεται μια σύνοψη των άρθρων στην πρώτη σελίδα. Εικόνα 5.15: Επιλογές Εμφάνισης Άρθρων Το αποτέλεσμα των επιλογών που κάναμε στο Βήμα 4,βλέπουμε στην εικόνα που ακολουθεί (Εικόνα 5.16).Την διαδικασία που ακολουθήθηκε για την δημιουργία των άρθρων θα εξετάσουμε σε επόμενη ενότητα. -59-

72 Εικόνα 5.16: Εμφάνιση άρθρων Βήμα 5 ο : Το επόμενο βήμα είναι να επιλέξουμε τα χρώματα που θα χρησιμοποιήσουμε (Εικόνα 5.17).Το ταίριασμα των χρωμάτων πρέπει να γίνει με προσοχή γιατί ε- πηρεάζει άμεσα την αισθητική της ιστοσελίδας μας. -60-

73 Εικόνα 5.17: Επιλογές Χρωμάτων Μπορούμε να επιλέξουμε τι χρώμα θα έχουν η μπάρα κορυφής,το κυρίως μενού, το υποσέλιδο κλπ. Στην εικόνα που ακολουθεί (Εικόνα 5.18) βλέπουμε ένα παράδειγμα για τη περιοχή των μονάδων της ιστοσελίδας: -61-

74 Εικόνα 5.18: Επιλογή Χρωμάτων για τις Μονάδες 5.3 Εμφάνιση Κεφαλίδας Στη σελίδα διαχείρισης του WordPress υπάρχει αριστερά ένα μενού επιλογών όπως ε- πισημάνθηκε στο προηγούμενο κεφάλαιο. Από το μενού επιλογής επιλέγοντας Εμφάνιση -> Κεφαλίδα μπορούμε να επιλέξουμε την εικόνα που θα εμφανίζεται στη κεφαλίδα του θέματος. Έχουμε την δυνατότητα να επιλέξουμε και να χρησιμοποιήσουμε μια εικόνα που έχουμε αποθηκευμένη στον υπολογιστή μας ή να χρησιμοποιήσουμε μια από τις προεπιλεγμένες. Εάν χρησιμοποιήσουμε μια εικόνα από τον υπολογιστή μας, αφού την βρούμε και πατήσουμε το κουμπί μεταμόρφωση, θα μεταφερθούμε σε νέα σελίδα όπου θα την περικόψουμε ώστε να ταιριάζουν οι διαστάσεις και στη συνέχεια θα την δημοσιεύσουμε. Τέλος, μπορούμε να προβάλουμε και κείμενο μαζί με την εικόνα (Εικόνα 5.19). -62-

75 Εικόνα 5.19: Επιλογή Εικόνας Κεφαλίδας 5.4 Εμφάνιση Φόντου Επιλέγοντας με τον ίδιο τρόπο όπως προηγουμένως (από το μενού επιλογών στη σελίδα διαχείρισης) Εμφάνιση -> Φόντο μπορούμε να αλλάξουμε τις ρυθμίσεις του φόντου (πίσω μέρος) τη σελίδας μας. Έχουμε την δυνατότητα να επιλέξουμε από μία παλέτα χρωμάτων ή και να ανεβάσουμε μια εικόνα από τον υπολογιστή μας (Εικόνα 5.20). -63-

76 Εικόνα 5.20: Επιλογή Φόντου 5.5 Εμφάνιση Μονάδων Οι μονάδες είναι πρόσθετα στοιχεία τα οποία μπορούμε να τοποθετήσουμε σε πάνελ και να εμφανίζονται στις πλευρικές στήλες, το υποσέλιδο ή και την κεφαλίδα. Εμφανίζουν πληροφορίες που αφορούν την ιστοσελίδα μας.oι πληροφορίες μπορεί να είναι μια λίστα με τα τελευταία μας άρθρα, ένα κανάλι RSS που θα εμφανίζει νέα από κάποια άλλη ιστοσελίδα, ένα πτυσσόμενο μενού, μια φόρμα αναζήτησης και ένα σωρό άλλες επιλογές σύμφωνα με τις ανάγκες μας. Τις μονάδες μπορούμε να τις προσθέσουμε επιλέγοντας αρχικά από το μενού επιλογών στη σελίδα διαχείρισης Εμφάνιση -> Μονάδες και έπειτα όταν μεταφερθούμε στη σελίδα των μονάδων να επιλέξουμε αυτές που θέλουμε και να τις σύρουμε με το ποντίκι στην κατάλληλη περιοχή, όπως δείχνει η Εικόνα 5.21: -64-

77 Εικόνα 5.21: Σελίδα Μονάδων Θέματος Έχουμε την δυνατότητα να τοποθετήσουμε μονάδες στη περιοχή των ενεργών πάνελ αλλά και στην περιοχή Ανενεργές μονάδες διατηρώντας τις ρυθμίσεις τους για τυχόν μελλοντική χρήση. 5.6 Προσαρμογή Επιλέγοντας από το μενού Εμφάνιση -> Προσαρμογή μπορούμε να επεξεργαστούμε πληροφορίες που αφορούν το όνομα του τίτλου και του υπότιτλου της ιστοσελίδας. Δίνουμε για όνομα τίτλου το Ασφαλιστικές Πρακτορεύσεις και για υπότιτλο το Ασφαλίζουμε ότι έχει αξία για εσάς. Επίσης μπορούμε να αλλάξουμε ρυθμίσεις που αφορούν την κεφαλίδα,το φόντο, τα χρώματα αυτών των δυο, να διαλέξουμε τις ενεργές μονάδες ή να τις αναδιατάξουμε καθώς επίσης και να επιλέξουμε τι θα δείχνει η αρχική μας σελίδα και ποια θα είναι η σελίδα των άρθρων που θα δημοσιεύουμε (Εικόνα 5.22). -65-

78 Εικόνα 5.22: Προσαρμογή Εμφάνισης 5.7 Δημιουργία Σελίδων Για να δημιουργήσουμε μια σελίδα θα πάμε στην καρτέλα Σελίδες από το μενού επιλογών στη σελίδα διαχείρισης του WordPress και θα επιλέξουμε την καρτέλα Νέα Σελίδα. Εναλλακτικά, μπορούμε να κάνουμε την ίδια δουλειά επιλέγοντας το κουμπί προσθήκη που βρίσκεται στην κεφαλίδα της σελίδας διαχείρισης και ύστερα να διαλέξουμε την επιλογή Σελίδα (Εικόνα 5.23). Εικόνα 5.23: Δημιουργία Σελίδας Η διαδικασία δημιουργίας των σελίδων είναι απλή. Αρχικά, εισάγουμε τον τίτλο που θέλουμε να έχει η σελίδα μας. Στη συνέχεια μπορούμε να πληκτρολογήσουμε το περιεχόμενο της σελίδας στον κειμενογράφο ή με χρήση κώδικα (html,javascript) στη καρτέλα κείμενο και να προσθέσουμε αρχεία ή εικόνες επιλέγοντας το κουμπί -66-

79 Προσθήκη Πολυμέσων. Επιλέγουμε εάν η σελίδα έχει κάποιο γονέα, είναι δηλαδή θυγατρική κάποιας άλλης, την σειρά της και το στυλ εμφάνισης. Στην συνέχεια επιλέγουμε το κουμπί δημοσίευση για να δούμε το αποτέλεσμα. Η διαδικασία αυτή χρησιμοποιήθηκε για να δημιουργηθούν οι σελίδες εξυπηρέτηση πελατών, οι συνεργάτες μας, προσφορές, άρθρα, Επικοινωνία, Χρήσιμες διευθύνσεις, gallery που αποτελούν το βασικό μενού της ιστοσελίδας (Εικόνα 5.24). Εικόνα 5.24: Σελίδες 5.8 Δημιουργία Υποσέλιδων Η διαδικασία που ακολουθείται για την δημιουργία των υποσέλιδων είναι η ίδια με τη διαδικασία που χρησιμοποιείται για τη δημιουργία των σελίδων. Τα υποσέλιδα είναι σελίδες εμφωλευμένες μέσα σε άλλες. Μία τέτοια διαδρομή που έχουμε στον ιστότοπο μας είναι η εξής: Προσφορές -> Γενικές Ασφάλειες -> Αστικής Ευθύνης. Το σημείο στο οποίο δίνεται έμφαση είναι η επιλογή γονέα,δηλαδή δηλώνουμε που θέλουμε να ανήκει,όπως βλέπουμε στις εικόνες που ακολουθούν (Εικόνα 5.25, Εικόνα 5.26). Εικόνα 5.25: Δημιουργία Υποσελίδας Γενικές Ασφάλειες -67-

80 Εικόνα 5.26: Δημιουργία Υποσελίδας Αστικής Ευθύνης Με τον ίδιο τρόπο δημιουργούμε και τα υπόλοιπα υποσέλιδα του ιστότοπου μας. Οι διαδρομές που χρησιμοποιούμε είναι οι εξής: Εξυπηρέτηση Πελατών -> Εκδήλωση Ενδιαφέροντος, Χρήσιμες Φόρμες και Έντυπα, Ευρετήριο Ασφαλιστικών Όρων, Συχνές Ερωτήσεις, Χρήσιμες Συμβουλές, Φιλικός Διακανονισμός. Οι συνεργάτες μας -> Εταιρίες, Συνεργασία, Τράπεζες. Προσφορές -> Γενικές Ασφάλειες -> Αστική Ευθύνη, Αυτοκινήτων, Σκαφών, Οδική Βοήθεια, Μεταφοράς Εμπορευμάτων, Επιχειρήσεων, Κατοικίας. Προσφορές -> Ατομικές Ασφαλίσεις -> Υγείας & Ατυχημάτων, Για το παιδί, Σύνταξης, Ζωής. Gallery -> Photogallery Κατηγοριών, Διαφημιστικά Σποτ. Χρήσιμες διευθύνσεις -> Φορείς της Ασφαλιστικής Αγοράς, Διάφοροι άλλοι Φορείς Επιλέγοντας από το μενού Σελίδες και στη συνέχεια Όλες οι σελίδες μεταφερόμαστε στη σελίδα διαχείρισης όλων των σελίδων του ιστότοπου μας. Από εκεί μπορούμε να εκτελέσουμε ενέργειες όπως αλλαγή, ταχυεπεξεργασία, διαγραφή και προβολή της εκάστοτε σελίδας στην οποία βρίσκεται ο κέρσορας. Επιλέγοντας αλλαγή μεταφερόμαστε στο περιβάλλον του κειμενογράφου για επεξεργασία. Πατώντας την επιλογή ταχυεπεξεργασία επεξεργαζόμαστε πληροφορίες όπως η κατάσταση της σελίδας( αν είναι δημοσιευμένη ή όχι) ή και αν επιτρέπονται τα σχόλια. Επιλέγοντας διαγραφή η -68-

81 σελίδα μεταφέρεται στον κάδο από όπου μπορούμε να την διαγράψουμε οριστικά ή να την επαναφέρουμε. 5.9 Επιλογή Μενού Αφού δημιουργήθηκαν οι σελίδες και υποσελίδες το επόμενο βήμα είναι η δημιουργία του βασικού μας μενού πλοήγησης και η σωστή στοίχιση των στοιχείων. Για να δημιουργήσουμε το μενού επιλέγουμε Εμφάνιση -> Μενού και μεταφερόμαστε σε νέα σελίδα (Εικόνα 5.27). Εκεί πατώντας φτιάξτε ένα νέο μενού μπορούμε να δημιουργήσουμε το μενού μας πληκτρολογώντας το όνομα που θέλουμε και εισάγοντας τις σελίδες επιλέγοντας μια από τις τρείς καρτέλες που βρίσκονται στα αριστερά. Οι καρτέλες αυτές είναι: Η καρτέλα Πρόσφατα,που περιέχει τις σελίδες που δημιουργήσαμε τελευταία Η καρτέλα Προβολή Όλων, που περιέχει όλες τις σελίδες. Η καρτέλα Αναζήτηση, που μπορούμε να αναζητήσουμε μία σελίδα. Εικόνα 5.27: Δημιουργία Μενού Σε ένα μενού μπορούμε να προσθέσουμε σελίδες, συνδέσμους ή και κατηγορίες άρθρων. Αφού εισάγουμε το όνομα μενού που θέλουμε και πατήσουμε το κουμπί δημιουργία μενού συνεχίζουμε με την προσθήκη των σελίδων. Επιλέγουμε την καρτέλα προβολή όλων και έπειτα το κουμπί επιλογή όλων. Οι σελίδες μας έχουν εισαχθεί στη δομή μενού και εκεί με την μέθοδο drag n drop μορ- -69-

82 φοποιούμε τα στοιχεία με τη σειρά που θέλουμε και ορίζουμε τις σελίδες γονείς και τα υποσέλιδα, όπως δείχνει η ακόλουθη εικόνα (Εικόνα 5.28). Εικόνα 5.28: Στοίχιση Στοιχείων Μενού Ένα παράδειγμα του αποτελέσματος των ρυθμίσεων που πραγματοποιήσαμε βλέπουμε στην (Εικόνα 5.29): Εικόνα 5.29: Παράδειγμα Μενού 5.10 Δημιουργία Αρθρων Προτού ξεκινήσουμε να δημιουργήσουμε τα άρθρα θα πάμε να δημιουργήσουμε τις κατηγορίες στις οποίες αυτά θα ανήκουν. Από το μενού στη σελίδα διαχείρισης επιλέγου- -70-

83 με Άρθρα -> Κατηγορίες. Στη συνέχεια μεταφερόμαστε σε νέα σελίδα όπου εισάγουμε το όνομα της κατηγορίας, τον γονέα της εάν υπάρχει και έπειτα πατάμε το κουμπί προσθήκη κατηγορίας, όπως δείχνει η Εικόνα 5.30: Εικόνα 5.30: Κατηγορίες Άρθρων Το επόμενο βήμα είναι να δημιουργήσουμε τα άρθρα της ιστοσελίδας. Επιλέγω άρθρα -> νέο άρθρο. Στη σελίδα που θα ανοίξει πληκτρολογούμε τον τίτλο του άρθρου, πληκτρολογούμε στον κειμενογράφο το περιεχόμενο του ή προσθέτουμε κάποιο πολυμέσο, ενώ επίσης μπορούμε να επιλέξουμε να έχει κάποια μορφή και την κατηγορία που ανήκει (ή και να προσθέσουμε μια νέα κατηγορία). Το ίδιο άρθρο μπορεί να ανήκει σε παραπάνω από μία κατηγορία (Εικόνα 5.31). Εικόνα 5.31: Δημιουργία Άρθρου -71-

84 Επιλέγοντας την Άρθρα -> Όλα τα άρθρα από το μενού μεταφερόμαστε στην σελίδα διαχείρισης όλων των άρθρων μας. Σε αυτή τη σελίδα μπορούμε να εκτελέσουμε τις ίδιες ενέργειες όπως κάναμε και από τη σελίδα διαχείρισης των σελίδων Πρόσθετα Ιστοσελίδας Εγκατάσταση Προσθέτων Ένα από τα πιο σημαντικά στοιχεία του WordPress και γενικότερα των CMS, είναι η χρήση των πρόσθετων (Plugins).Τα πρόσθετα μας επιτρέπουν να επεκτείνουμε τη λειτουργικότητα του WordPress. Υπάρχει μια πληθώρα προσθέτων σχεδιασμένα να ικανοποιούν σχεδόν κάθε ανάγκη. Είναι εργαλεία έτοιμου κώδικα που χρησιμοποιούμε για να επεκτείνουμε τις λειτουργίες της ιστοσελίδας και μπορούμε να τα κατεβάσουμε από το αποθετήριο πρόσθετων στη διεύθυνση να τα ανεβάσουμε σε μορφή zip ή να τα εγκαταστήσουμε επιλέγοντας από το μενού στη σελίδα διαχείρισης Πρόσθετα -> Νέο Πρόσθετο. Στη σελίδα που θα μεταφερθούμε συμπληρώνουμε στη φόρμα αναζήτησης το όνομα του πρόσθετου που επιθυμούμε και πατάμε Αναζήτηση προσθέτων, όπως δείχνει η Εικόνα 5.32,που ακολουθεί. Επίσης, μπορούμε να κάνουμε αναζήτηση βάσει των δημοφιλέστερων ετικετών. Εικόνα 5.32: Αναζήτηση Πρόσθετου Αφού πατήσουμε Αναζήτηση προσθέτων θα μας βγάλει μία λίστα με πολλά πρόσθετα. Δίπλα σε κάθε πρόσθετο υπάρχει η αξιολόγηση και μια περιγραφή του. Κά- -72-

85 τω από το όνομα του πρόσθετου υπάρχουν τα κουμπιά Λεπτομέρειες,το οποίο επιλέγουμε για να δούμε εάν είναι συμβατό με την έκδοση που χρησιμοποιούμε,και Εγκατάσταση (Εικόνα 5.33). Εικόνα 5.33: Εγκατάσταση Πρόσθετου Επιλέγουμε αυτό που ανταποκρίνεται στις ανάγκες μας και πατάμε εγκατάσταση. Στη συνέχεια εμφανίζεται η σελίδα από την οποία θα ενεργοποιήσουμε το πρόσθετο (Εικόνα 5.34). Από την ίδια σελίδα μπορούμε να επιστρέψουμε στον εγκαταστάτη προσθέτων για να συνεχίσουμε την αναζήτηση και εγκατάσταση περισσοτέρων plugins. Εικόνα 5.34: Ενεργοποίηση Πρόσθετου -73-

86 Τα περισσότερα πρόσθετα είναι δωρεάν ενώ υπάρχουν και πρόσθετα που χρειάζεται να διαθέσουμε ένα μικρό ποσό,συνήθως, πληρωμής( premium plugins) για να τα προμηθευτούμε και να τα χρησιμοποιήσουμε. Επιλέγοντας την καρτέλα Εγκατεστημένα από το μενού, μεταφερόμαστε στη σελίδα διαχείρισης των προσθέτων(εικόνα 5.35) στην οποία τα διαχειριζόμαστε εκτελώντας ενέργειες όπως η ενεργοποίηση ενός προσθέτου,η διαγραφή του και η επεξεργασία του. Υπάρχουν τέσσερις καρτέλες ομαδοποίησης των προσθέτων για ευκολότερη διαχείριση τους: Όλα, όπου εμφανίζονται όλα τα εγκατεστημένα πρόσθετα. Ενεργά, όπου εμφανίζονται τα πρόσθετα που έχουμε ενεργοποιήσει. Ανενεργά, όπου εμφανίζονται τα πρόσθετα που έχουμε εγκαταστήσει αλλά δεν έχουμε ενεργοποιήσει ακόμα. Αναβαθμιστέα, όπου εμφανίζονται τα πρόσθετα για τα οποία υπάρχουν νέες εκδόσεις για αναβάθμιση. Επίσης, εάν απενεργοποιήσουμε ένα πρόσθετο προστίθεται και η καρτέλα Απενεργοποιημένα πρόσφατα. Εικόνα 5.35: Σελίδα Διαχείρισης Πρόσθετων Τα πρόσθετα που θα χρησιμοποιηθούν στην παρούσα εργασία είναι τα εξής: Ajax Live Search Disable Comments Easy Contact Forms GSY Ajax Recent Posts -74-

87 HTML JavaScript Adder MailPoet Newsletters MobileView Share Buttons by AddToAny Theme My Login Transposh Translation Filter Wordfence Security WPFront Scroll Top WP Photo Album Plus Η διαδικασία που ακολουθείται για την εγκατάσταση τους είναι αυτή που παρουσιάστηκε πιο πάνω. Στην συνέχεια παρουσιάζονται τα πρόσθετα και οι λειτουργίες που επιτελούν στην ιστοσελίδα Disable Comments Το πρόσθετο αυτό επιτρέπει στον διαχειριστή να διαλέξει τον αποκλεισμό των σχόλιων σε όλες τις σελίδες ή σε ορισμένους τύπους δημοσιεύσεων. Επιλέγουμε από το μενού Ρυθμίσεις -> Disable Comments για να μεταφερθούμε στη σελίδα του προσθέτου(εικόνα 5.36) όπου θα κάνουμε τις ρυθμίσεις που θέλουμε. Εικόνα 5.36: Disable Comments -75-

88 Εάν επιλέξουμε από το μενού την καρτέλα Σχόλια θα μας εμφανιστεί ένα μήνυμα ότι τα σχόλια είναι κλειστά αποτέλεσμα των ρυθμίσεων που κάναμε Share Buttons by AddToAny Με το πρόσθετο αυτό μπορούμε να προσθέσουμε εικονίδια κοινωνικής δικτύωσης σε όλες τις σελίδες και αναρτήσεις της ιστοσελίδας μας και με τα οποία θα μπορούμε να κοινοποιούμε το περιεχόμενο τους. Το ρυθμίζουμε επιλέγοντας από το μενού Ρυθμίσεις -> AddToAny. Στη καρτέλα Standard ρυθμίζουμε το μέγεθος των εικονιδίων και το που θα τοποθετούνται μέσα σε μία σελίδα, ενώ στην καρτέλα Floating ρυθμίζουμε την κίνηση τους στο scrolling του χρήστη. Εικόνα 5.37: Share Buttons Theme my Login Με αυτό το πρόσθετο δίνεται η δυνατότητα στον επισκέπτη να εγγραφεί στον ιστότοπο μας. Αφού εγγραφεί θα μπορεί να συνδέεται με τα στοιχεία του ή και να επαναπροσδιορίζει το χαμένο συνθηματικό του. Επιλέγοντας από το μενού TML μεταφερόμαστε στη σελίδα του πρόσθετου, ενεργοποιούμε όλες τις επιλογές που βλέπουμε και πατάμε Αποθήκευση (Εικόνα 5.38). -76-

89 Εικόνα 5.38: TML Αφού αποθηκεύσουμε τις αλλαγές μας δημιουργείται μία λίστα επιλογών. Στην καρτέλα Redirection (ανακατεύθυνση) ρυθμίζουμε που θα ανακατευθύνεται ο επισκέπτης μετά τη σύνδεση του (login) αλλά και αποσύνδεση(logout),εικόνα Εικόνα 5.39: Ρυθμίσεις Ανακατεύθυνσης Στην καρτέλα μπορούμε να δημιουργήσουμε μηνύματα τα οποία θα στέλνονται στους νέους χρήστες που έχουν εγγραφεί στον ιστότοπο. Μπορούμε να δημιουργήσουμε που θα στέλνονται σε περιπτώσεις επαναπροσδιορισμού χαμένου συνθηματικού, ενεργοποίησης νέου χρήστη, έγκρισης νέου χρήστη κ.α. -77-

90 Στην καρτέλα Security ρυθμίζουμε θέματα ασφάλειας, όπως είναι η επιλογή να κλειδώνουμε το λογαριασμό του χρήστη μετά από κάποιες αποτυχημένες προσπάθειες για σύνδεση μη επιτρέποντας να δοκιμάζει αυτόματα πολλούς κωδικούς (Εικόνα 5.40). Στην καρτέλα Moderation επιλέγουμε οι νέοι χρήστες να χρειάζονται την έγκριση πρώτα του διαχειριστή προτού να μπορούν να συνδεθούν στον ιστότοπο(εικόνα 5.41). Εικόνα 5.40: TML Security Εικόνα 5.41: TML Moderation Για να μπορεί ο επισκέπτης να εγγραφεί στον ιστότοπο θα πρέπει πρώτα να ενεργοποιήσουμε μια λειτουργία του WordPress. Από το μενού επιλέγουμε την καρτέλα Ρυθμίσεις -> Γενικά (Εικόνα 5.42). Εκεί θα ενεργοποιήσουμε την αυτοεγγραφή μελών επιλέγοντας και τον ρόλο που θέλουμε να έχουν. -78-

91 Εικόνα 5.42: Ενεργοποίηση Δυνατότητας Εγγραφής Το πρόσθετο αυτό χρησιμοποιείται σαν μονάδα, έτσι για να δούμε το τελικό αποτέλεσμα θα πρέπει να ενεργοποιήσουμε την μονάδα Theme my Login όπως είδαμε προηγουμένως από την καρτέλα Εμφάνιση -> Μονάδες (Εικόνα 5.43). Επίσης με την εγκατάσταση του δημιουργούνται οι σελίδες εγγραφή, σύνδεση και επανορισμός συνθηματικού(εικόνα 5.44). Εικόνα 5.43: Μονάδα TML -79-

92 Εικόνα 5.44: Σελίδα Εγγραφής Μέλους Easy Contact Forms Το αντικείμενο της ιστοσελίδας είναι τέτοιο που καθιστά απαραίτητη την επικοινωνία μεταξύ του διαχειριστή και του επισκέπτη. Για το λόγο αυτό με το πρόσθετο αυτό θα δημιουργήσουμε κάποιες φόρμες επικοινωνίας. Αρχικά, από το μενού επιλέγουμε την καρτέλα Contact Forms και μεταφερόμαστε στη σελίδα του πρόσθετου (Εικόνα 5.45). Εκεί επιλέγοντας την καρτέλα Forms μπορούμε να ξεκινήσουμε τη δημιουργία των φορμών. Εικόνα 5.45: Σελίδα Προσθέτου Contact Forms -80-

93 Στη σελίδα που θα μεταφερθούμε (Εικόνα 5.46) βλέπουμε τις φόρμες που έχουμε δημιουργήσει, τον κώδικα τους και διάφορες επιλογές όπως η διαγραφή κάποια φόρμας,η δημιουργία νέας ή ακόμα η δημιουργία φόρμας βασισμένη σε κάποιο πρότυπο που έχουμε φτιάξει. Εικόνα 5.46: Δημιουργία Φόρμας Πατώντας δημιουργία νέας φόρμας εμφανίζεται το μενού επιλογών της. Επιλέγοντας την καρτέλα General Settings (Εικόνα 5.47) ρυθμίζουμε το όνομα της φόρμας, το μήνυμα που θέλουμε να εμφανίζεται μετά την επιτυχής αποστολή της από τον επισκέπτη καθώς και το που θα ανακατευθύνεται ο ίδιος μετά την αποστολή της. Επιπλέον μας εμφανίζεται και ο κώδικας της φόρμας τον οποίο αντιγράφουμε και επικολλούμε στην σελίδα που θέλουμε να χρησιμοποιήσουμε τη φόρμα. Εικόνα 5.47: Γενικές Ρυθμίσεις Φόρμας -81-

94 Στη συνέχεια επιλέγουμε την καρτέλα Fields από την οποία διαλέγουμε τα πεδία που θέλουμε να περιέχει η φόρμα, όπως φαίνεται στην Εικόνα 5.48 που ακολουθεί. Εικόνα 5.48: Επιλογή Πεδίων Φόρμας Το αποτέλεσμα βλέπουμε στην Εικόνα Δημιουργήθηκαν φόρμες για τις σελίδες Επικοινωνία- Εκδήλωση Ενδιαφέροντος, Αυτοκινήτων, Σκαφών, Κατοικίας, Επιχειρήσεων, Ζωής. Πατώντας αποστολή δεν στέλνεται κάποια φόρμα γιατί δουλεύουμε σε τοπικό server, σε κανονικό sever θα λειτουργεί κανονικά. -82-

95 Εικόνα 5.49: Φόρμα Επικοινωνίας Για το περίγραμμα της φόρμας χρησιμοποιήθηκε ο εξής κώδικας: margin-left:auto; margin-right:auto; max-width: 500px; background: #F7F7F7; padding: 25px 15px 25px 10px; font: 12px Georgia, "Times New Roman", Times, serif; color: #888; text-shadow: 1px 1px 1px #FFF; border:1px solid #E4E4E4; HTML JavaScript Adder Το πρόσθετο αυτό επιτρέπει την εισαγωγή κώδικα html,javascript κλπ, μέσα σε μια σελίδα ή κάποιο άλλο τμήμα όπως είναι τα πλευρικά πάνελ. Μπορούμε να επιλέξουμε που θα εμφανίζεται και μπορούμε να το χρησιμοποιήσουμε για να προσθέσουμε στην ιστοσελίδα μας διαφημίσεις( Google Adsense),αντικείμενα flash (διαφάνειες) κ.α. Το πρόσθετο χρησιμοποιείται ως μονάδα πλευρικών πάνελ και το ρυθμίζουμε επιλέγοντας -83-

96 την καρτέλα Μονάδες -> HTML JavaScript Adder. Στην παρούσα εργασία θα χρησιμοποιηθεί αυτό το πρόσθετο για να δημιουργηθεί ένα slider εικόνων που θα βρίσκεται στην αριστερή πλευρική στήλη (η υλοποίηση θα παρουσιαστεί σε επόμενη ενότητα) MailPoet Newsletters Το πρόσθετο αυτό χρησιμοποιείται για να στέλνονται ενημερωτικά στους συνδρομητές της ιστοσελίδας. Ενεργοποιώντας το πρόσθετο δημιουργείται μια φόρμα στην οποία ο επισκέπτης μπορεί να δίνει το του και εγγράφεται στο ενημερωτικό δελτίο (Εικόνα 5.51). Το πρόσθετο μας παρέχει τη δυνατότητα να δημιουργήσουμε εύκολα ενημερωτικά δελτία με τη χρήση της μεθόδου drag and drop μορφοποιώντας τον τίτλο, το κείμενο, τις εικόνες κλπ και προσθέτοντας ακόμα δημοσιευμένα άρθρα του ιστότοπου μας και συνδέσμους κοινωνικής δικτύωσης. Επίσης, μπορούμε να επιλέξουμε κάποιο θέμα από μία λίστα,να προσθέσουμε εικόνες και να επεξεργαστούμε το στυλ εμφάνισης (Εικόνα 5.50). Εικόνα 5.50: Δημιουργία Ενημερωτικού Δελτίου Η δημιουργία ενός ενημερωτικού δελτίου γίνεται από τη σελίδα διαχείρισης του προσθέτου επιλέγοντας από το μενού την καρτέλα MailPoet -> Ενημερωτικά Δελτί- -84-

97 α. Το πρόσθετο μας δίνει επιπλέον δυνατότητες όπως το να ρυθμίσουμε να ενημερωνόμαστε για εγγραφή νέου συνδρομητή,να διαχειριζόμαστε τα μέλη, το περιεχόμενο του επιβεβαίωσης εγγραφής κ.α.( καρτέλες Ρυθμίσεις, Συνδρομητές ) Ο επισκέπτης αφού εγγραφεί θα πρέπει να τσεκάρει τα εισερχόμενα του ( επιβεβαίωσης). Εικόνα 5.51: Μονάδα MailPoet Transposh Translation Είναι σημαντικό η ιστοσελίδα που έχουμε δημιουργήσει να είναι διαθέσιμη και στους ξένους επισκέπτες. Το πρόσθετο αυτό μας δίνει αυτή τη δυνατότητα. Μπορούμε να επιλέξουμε από μία μεγάλη λίστα διαθέσιμων γλωσσών όπως δείχνει η Εικόνα Εικόνα 5.52: Επιλογή Γλωσσών Μετάφρασης -85-

98 Αφού επιλέξουμε τις γλώσσες που θέλουμε, αποθηκεύουμε τις αλλαγές που κάναμε. Μπορούμε να χρησιμοποιήσουμε το Google ή το Bing σαν μηχανή μετάφρασης (καρτέλα translation engines ). Το σημαντικότερο πλεονέκτημα αυτού του πρόσθετου είναι η δυνατότητα που μας δίνει να μεταφράσουμε εμείς το περιεχόμενο της ιστοσελίδας από το μηδέν, διορθώνοντας κείμενα που δεν έχουν μεταφραστεί σωστά. Επιλέγουμε την καρτέλα setting (ρυθμίσεις) στην οποία επιλέγουμε ποιοι θα μπορούν να μεταφράζουν την σελίδα καθώς και άλλες ρυθμίσεις(εικόνα 5.53). Εικόνα 5.53: Ρυθμίσεις Πρόσθετου Το πρόσθετο χρησιμοποιείται ως μονάδα πλευρικών πάνελ(εικόνα 5.54).Για να δούμε το τελικό αποτέλεσμα θα ενεργοποιήσουμε την μονάδα Transposh όπως είδαμε προηγουμένως από την καρτέλα Εμφάνιση -> Μονάδες. -86-

99 Εικόνα 5.54: Μονάδα Transposh Επιλέγοντας την αγγλική γλώσσα η ιστοσελίδα θα μεταφραστεί αυτόματα στα αγγλικά. Εάν έχουμε κάνει σύνδεση με τα στοιχεία διαχειριστή επιλέγοντας την αγγλική γλώσσα η σελίδα θα μεταφραστεί και στη συνέχεια θα μας εμφανιστεί ένα νέο κουμπί edit translation με το οποίο μπορούμε να διορθώσουμε τα σημεία που πιστεύουμε ότι δεν έχουν μεταφραστεί σωστά. Επιλέγοντας το edit translation εμφανίζονται κάποια κίτρινα αυτοκόλλητα τα οποία εάν επιλέξουμε θα ανοίξουν ένα νέο παράθυρο με το αρχικό κείμενο και το μεταφρασμένο καθώς και προτάσεις μετάφρασης από τις μηχανές αναζήτησης της Google και Bing (Εικόνα 5.55). -87-

100 Εικόνα 5.55: Μετάφραση Σελίδας από τον Διαχειριστή WP Photo Album Το πρόσθετο αυτό χρησιμοποιήθηκε για τη δημιουργία φωτογραφικών άλμπουμ για την σελίδα Photogallery Κατηγοριών. Από το μενού επιλέγουμε την καρτέλα Photo Albums και μεταφερόμαστε στη σελίδα διαχείρισης του πρόσθετου (Εικόνα 5.56) όπου βλέπουμε τα άλμπουμ που έχουμε δημιουργήσει και πληροφορίες σχετικά με αυτά ό- πως το όνομα, η σειρά, ο αριθμός φωτογραφιών κ.α. Επιπλέον, από την ίδια σελίδα μπορούμε να επεξεργαστούμε τα άλμπουμ πατώντας τις σχετικές επιλογές ή και να δημιουργήσουμε νέα, επιλέγοντας την καρτέλα Create New Empty Album. Εικόνα 5.56: Διαχείριση Άλμπουμ -88-

101 Πατώντας δημιουργία νέου άλμπουμ μεταφερόμαστε σε μια νέα σελίδα στην οποία και θα εισάγουμε τα στοιχεία του άλμπουμ (όνομα, περιγραφή κ. α) όπως δείχνει η Εικόνα Εικόνα 5.57: Στοιχεία Άλμπουμ Το επόμενο βήμα είναι να προσθέσουμε τις εικόνες που θέλουμε στα άλμπουμ. Επιλέγουμε Upload Photos. Στη σελίδα που θα εμφανιστεί εμφανίζονται τρείς επιλογές ανεβάσματος εικόνων. Επιλέγουμε τη μέθοδο που θέλουμε και αφού επιλέξουμε το άλμπουμ και τις εικόνες που θέλουμε πατάμε Upload (Εικόνα 5.58). Τις εικόνες που ανεβάσαμε μπορούμε να τις επεξεργαστούμε επιλέγοντας από τη σελίδα διαχείρισης το άλμπουμ που τις ανεβάσαμε. Από κάτω θα εμφανιστούν οι εικόνες και εκεί πραγματοποιούμε τις αλλαγές που θέλουμε. -89-

102 Εικόνα 5.58: Ανέβασμα Φωτογραφιών Το τελευταίο βήμα είναι να εισάγουμε τα άλμπουμ που δημιουργήσαμε στην σελίδα Photogallery Κατηγοριών. Επιλέγουμε την σελίδα και μεταφερόμαστε στον κειμενογράφο. Στην εργαλειοθήκη έχει προστεθεί το εικονίδιο του πρόσθετου, το επιλέγουμε και εμφανίζεται ένα νέο παράθυρο όπου κάνουμε τις ρυθμίσεις εμφάνισης και στην συνέχεια πατάμε Insert Gallery (Εικόνα 5.59). -90-

103 Εικόνα 5.59: Εισαγωγή Άλμπουμ στη σελίδα Στον κειμενογράφο μετά τις ρυθμίσεις που κάναμε εμφανίζεται ο παρακάτω κώδικας για το κάθε άλμπουμ αντίστοιχα: [wppa type="slideonly" album="1" size="500" align="center"]any comment[/wppa] Έχουμε επιλέξει να εμφανίζεται ένα slideshow των εικόνων των άλμπουμ. Στην Εικόνα 5.60 βλέπουμε την τελική μορφή της σελίδας Photogallery Κατηγοριών : -91-

104 Εικόνα 5.60: Αποτέλεσμα Ρυθμίσεων GSY Ajax Recent Posts Tο πρόσθετο αυτό χρησιμοποιείται σε μορφή μονάδας και έχει την ίδια δομή με τη μονάδα Πρόσφατα Άρθρα.Μας δίνει τη δυνατότητα να ανανεώνεται δυναμικά το περιεχόμενο της αφού αναζητήσει τυχόν νέα άρθρα που έχουν προστεθεί. Περισσότερα θα δούμε σε επόμενη ενότητα. -92-

105 Ajax Live Search Το πρόσθετο αυτό μας δίνει τη δυνατότητα να τροποποιήσουμε την μπάρα αναζήτησης και να την κάνουμε διαδραστική δίνοντας τη δυνατότητα να βλέπουμε ζωντανά αποτελέσματα αναζήτησης. Από τη σελίδα διαχείρισης του πρόσθετου (Εικόνα 5.61) μπορούμε να κάνουμε διάφορες ρυθμίσεις όπως το πλάτος που θα έχει, το χρόνο που θα κάνει να φορτώσει τα αποτελέσματα,το πλάτος του κουτιού αποτελεσμάτων κλπ. Επίσης μπορούμε να επιλέξουμε κάποιο θέμα εμφάνισης που θα έχει το κουτί αποτελεσμάτων και με ποία σειρά θα ταξινομούνται τα αποτελέσματα. Εικόνα 5.61: Ρυθμίσεις Πρόσθετου Το αποτέλεσμα των ρυθμίσεων που πραγματοποιήσαμε βλέπουμε στην Εικόνα

106 Εικόνα 5.62: Αποτέλεσμα Ρυθμίσεων Wordfence Security Το Wordfence Security είναι πρόσθετο το οποίο χρησιμοποιείται για να προσθέσουμε επιπλέον ασφάλεια και τείχος προστασίας (firewall) στον ιστότοπο μας. Επιλέγοντας την καρτέλα Wordfence από το μενού επιλογών μεταφερόμαστε στη σελίδα διαχείρισης του προσθέτου (Εικόνα 5.63) από όπου μπορούμε να επιλέξουμε σάρωση του ιστότοπου. Επίσης θα μας εμφανιστεί μια λίστα με καρτέλες για να ρυθμίσουμε διάφορα θέματα ασφάλειας όπως το να μπλοκάρουμε διάφορες IP, να επιλέξουμε το επίπεδο προστασίας που χρειαζόμαστε( Options ),να αυξήσουμε την απόδοση του ιστότοπου κλπ. -94-

107 Εικόνα 5.63: Wordfence Security WPFront Scroll Top Το πρόσθετο αυτό μας προσφέρει τη δυνατότητα να τοποθετήσουμε ένα εικονίδιο που μας μεταφέρει στην κορυφή των σελίδων. Είναι χρήσιμο καθώς με αυτό αποφεύγεται η χρήση του scrolling που είναι κουραστική για τον χρήστη. Επιλέγοντας από το μενού την καρτέλα WPFront μεταφερόμαστε στην σελίδα του πρόσθετου (Εικόνα 5.64) και κάνουμε τις ρυθμίσεις που θέλουμε όπως το χώρο που καταλαμβάνει στη σελίδα, πόσο χρόνο θα παραμένει εμφανίσιμο, να επιλέξουμε την εικόνα που θα έχει μέσα από μία λίστα διαθέσιμων εικόνων κ.α. -95-

108 Εικόνα 5.64: Ρυθμίσεις Πρόσθετου 5.12 Περιγραφή Πρόσθεσης Περιεχομένου Σελίδων Για να εισάγουμε κείμενο, πολυμέσα ή κώδικα θα επιλέξουμε από το μενού Σελίδες - > Όλες οι σελίδες και έπειτα Αλλαγή στην εκάστοτε σελίδα που θέλουμε να επεξεργαστούμε. Στην συνέχεια μεταφερόμαστε στον κειμενογράφο και αφού εισάγουμε το περιεχόμενο που θέλουμε πατάμε ενημέρωση. Στη συνέχεια παρουσιάζεται η αναλυτική προσθήκη περιεχομένου σε κάποιες από τις σελίδες του ιστότοπου μας Αρχική Σελίδα-Σελίδα Άρθρων Επιλέγοντας από το μενού την καρτέλα Ρυθμίσεις -> Ανάγνωση μπορούμε να επιλέξουμε ποια θα είναι η αρχική μας σελίδα και σε ποια σελίδα θα εμφανίζονται τα άρθρα μας (Εικόνα 5.65). Η προεπιλογή για την αρχική σελίδα είναι η σελίδα των άρθρων. Την ίδια δυνατότητα για αυτές τις ρυθμίσεις μας δίνει και ο προσαρμογέας θέματος ( Εμφάνιση -> Προσαρμογή ). Επιλέγουμε τη σελίδα Σχετικά με εμάς για την στατική αρχική σελίδα και την σελίδα Άρθρα για τα άρθρα που δημοσιεύουμε. -96-

109 Εικόνα 5.65: Επιλογή Αρχικής Σελίδας Επιλέγοντας από τη σελίδα διαχείρισης την σελίδα Σχετικά με εμάς μεταφερόμαστε στον κειμενογράφο. Εκεί πληκτρολογούμε το κείμενο που θέλουμε να εμφανίζεται, τις πληροφορίες επικοινωνίας και ένα χάρτη. Με χρήση του εξής κώδικα επιλέγω να ανοίγει το outlook για αποστολή όταν ο χρήστης επιλέγει την διεύθυνση mail. <a Το αποτέλεσμα φαίνεται παρακάτω (Εικόνα 5.66): -97-

110 Εικόνα 5.66: Αρχική Σελίδα Η εισαγωγή του χάρτη γίνεται με τον εξής κώδικα: <iframe style="border: 0;" src=" 3d !3m2!1i1024!2i768!4f13.1!4m9!1i0!3e6!4m0!4m5!1s0x14a1bd0e %3A0x5eb8d ed4a!2zzqDPhc64zq3Ov8- FLCDOkc64zq7Ovc6xLCDOlc67zrvOrM60zrE!3m2!1d !2d !5e0!3m2!1sel! 2sus!4v " width="500" height="400" frameborder="0"></iframe> που βρίσκουμε στην διεύθυνση εισάγουμε την τοποθεσία και μετά επιλέξουμε την ενσωμάτωση χάρτη, όπως δείχνει η Εικόνα 5.67: -98-

111 Εικόνα 5.67: Ενσωμάτωση Χάρτη Μας εμφανίζεται ένα νέο παράθυρο (Εικόνα 5.68) με τον κώδικα που θα χρησιμοποιήσουμε. Εικόνα 5.68: Κώδικας Χάρτη -99-

112 Φιλικός Διακανονισμός Στη σελίδα του φιλικού διακανονισμού χρησιμοποιείται η βιβλιοθήκη JQuery για να μεταμορφώνουμε το αρχικό κείμενο (Εικόνα 5.69) και να εμφανίζουμε νέες πληροφορίες που είναι σε ένα αρχείο txt (το αρχείο πρέπει να είναι ανεβασμένο στην συλλογή πολυμέσων του ιστότοπου μας). Εικόνα 5.69: Αρχικό Κείμενο Ο κώδικας που χρησιμοποιείται, εισάγεται επιλέγοντας την σελίδα Φιλικός Διακανονισμός από τη σελίδα διαχείρισης των σελίδων. Αφού μεταφερθούμε στον κειμενογράφο επιλέγουμε την καρτέλα Κείμενο και πληκτρολογούμε τον εξής κώδικα (Εικόνα 5.70): <script src=" <script>// <![CDATA[ $.noconflict(); jquery(document).ready(function(){ jquery("button").click(function(){ jquery("#div1").load(" }); }); // ]]></script> <div id="div1">ο Φιλικός Διακανονισμός (Σύστημα Άμεσης Πληρωμής) είναι συμφωνία μεταξύ ασφαλιστικών εταιριών, η οποία εφαρμόζεται, υπό προϋποθέσεις, στις αποζημιώσεις από ατυχήματα αυτοκινήτων.είναι μια έννοια άμεση συνδεδεμένη με τις ασφάλειες αυτοκινήτων και όλοι πρέπει να γνωρίζουν για αυτή...</div> <button>μάθετε περισσότερα</button> Εικόνα 5.70: Κώδικας JQuery -100-

113 Το αποτέλεσμα βλέπουμε στην Εικόνα 5.71: Συχνές Ερωτήσεις Εικόνα 5.71: Νέο Κείμενο Στη σελίδα χρησιμοποιείται η μέθοδος των εσωτερικών υπερσυνδέσμων, για εσωτερική μετακίνηση ορίζοντας στόχους μέσα στην ίδια σελίδα χωρίς να χρειάζεται επαναφόρτωση. Αυτό γίνεται ορίζοντας τον στόχο σε κάποιο σημείο με ένα id αριθμό και προσθέτοντας σύνδεσμο προς το στόχο ως εξής: <li><a href="#a1">ερώτηση-σύνδεσμος</a></li> */ προσθέτω σύνδεσμο / <a id="a1">στόχος</a> Κείμενο απάντησης */στόχος στη σελίδα / Με τη χρήση των εντολών του παραπάνω κώδικα δημιουργούνται οι ερωτήσεις και οι απαντήσεις της σελίδας,όπως φαίνεται στην Εικόνα 5.72: -101-

114 Εικόνα 5.72: Σελίδα Συχνών Ερωτήσεων Χρήσιμες Φόρμες και Έντυπα Στην σελίδα αυτή θέλουμε να εμφανίζονται διάφορα αρχεία pdf τα οποία ο χρήστης θα μπορεί να κατεβάσει. Θα προσθέσουμε αυτά τα αρχεία επιλέγοντας στον κειμενογράφο Προσθήκη πολυμέσων. Βρίσκουμε τα αρχεία που θέλουμε και πατάμε Εισαγωγή στη σελίδα όπως φαίνεται στην Εικόνα

115 Εικόνα 5.73: Εισαγωγή Αρχείων Στη συνέχεια με τον ακόλουθο κώδικα μορφοποιούμε τα αρχεία που ανεβάσαμε για να έχουν την μορφή που βλέπουμε στην Εικόνα 5.74: <iframe width="550" height="400" scrolling="yes" src="

116 Εικόνα 5.74: Σελίδα Χρήσιμα Έντυπα Σελίδα Διαφημιστικά Σποτ Σε αυτή την σελίδα περιλαμβάνονται βίντεο διαφημίσεων των συνεργαζόμενων εταιρειών. Μπορούμε να εισάγουμε ένα βίντεο με το ίδιο τρόπο που εισάγουμε τις εικόνες, ε- πιλέγοντας τη προσθήκη πολυμέσων από τον κειμενογράφο. Ένας εναλλακτικός τρόπος είναι να μεταβούμε σε ένα δικτυακό τόπο( στην προκειμένη το ) και να επιλέξουμε την ενσωμάτωση βίντεο, αντιγράφοντας και επικολλώντας το κομμάτι κώδικα στον HTML κειμενογράφο (Εικόνα 5.75)

117 Εικόνα 5.75: Ενσωμάτωση Βίντεο Σελίδες με Συνδέσμους- Πίνακες Σε αυτή την κατηγορία ανήκουν οι σελίδες: Εξυπηρέτηση Πελατών, Οι συνεργάτες μας, Προσφορές, Gallery και Χρήσιμες Διευθύνσεις. Από τις σελίδες αυτές θέλουμε ο χρήστης να μπορεί να πλοηγηθεί στα υποσέλιδα (κατηγορίες). Για την σελίδα Εξυπηρέτηση Πελατών από τον κειμενογράφο επιλέγουμε την Προσθήκη Πολυμέσων και κάνουμε εισαγωγή της εικόνας όπως είδαμε προηγουμένως. Για τη δημιουργία συνδέσμων για τα υποσέλιδα μαρκάρουμε τη λέξη και επιλέγουμε Εισαγωγή/ Επεξεργασία Συνδέσμου όπως δείχνει η Εικόνα

118 Εικόνα 5.76: Εισαγωγή Συνδέσμων Επιλέγοντας την Εισαγωγή Συνδέσμου εμφανίζεται ένα νέο παράθυρο (Εικόνα 5.77) όπου τοποθετούμε το URL και επιλέγουμε αν θέλουμε να ανοίγει σε νέα καρτέλα. Κάνοντας το οι σύνδεσμοι θα έχουν την εξής μορφή: <a href=" target="_blank">επικοινωνία- Εκδήλωση Ενδιαφέροντος</a> Εικόνα 5.77: Επεξεργασία Συνδέσμου Το αποτέλεσμα βλέπουμε στην Εικόνα 5.78: -106-

119 Εικόνα 5.78: Σελίδα Εξυπηρέτηση Πελατών Με τον ίδιο τρόπο δημιουργούνται και οι σελίδες Gallery, Χρήσιμες Διευθύνσεις, Γενικές Ασφάλειες και Ατομικές Ασφαλίσεις. Για τη σελίδα Οι συνεργάτες μας όπως και τη σελίδα Προσφορές δημιουργείται ένας μικρός πίνακας. Τα στοιχεία του είναι οι υποκατηγορίες της σελίδας γονέα. Ο κώδικας για την δημιουργία του πίνακα είναι ο εξής (Εικόνα 5.79): <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tbody> <tr> <th>εταιρειεσ</th> <th>συνεργασια</th> <th>τραπεζεσ</th> </tr> <tr> <td><a href=" src=" alt="" width="100%" /></a></td> -107-

120 <td><a href=" src=" alt="" width="100%" /></a></td> <td><a href=" src=" alt="" width="100%" /></a></td> </tr> </tbody> </table> Εικόνα 5.79: Κώδικας Πίνακα Με αυτό τον κώδικα δημιουργούμε ένα πίνακα 3 στηλών και 2 γραμμών με εισαγωγή συνδέσμων μέσα στις εικόνες για πλοήγηση όπως φαίνεται παρακάτω (Εικόνα 5.80): Εικόνα 5.80: Σελίδα με πίνακα Με τον ίδιο τρόπο δημιουργήθηκαν και οι πίνακες που χρησιμοποιούνται στις σελίδες Εταιρείες, Τράπεζες, Διάφοροι άλλοι Φορείς Χρήσιμες Συμβουλές Σε αυτή τη σελίδα, όπως και στη σελίδα του φιλικού διακανονισμού, χρησιμοποιείται η βιβλιοθήκη JQuery για εναλλαγή μεταξύ καρτελών. Επιλέγοντας μια καρτέλα φορτώνει -108-

121 από κάτω το κείμενο της χωρίς να χρειάζεται επαναφόρτωση της σελίδας.(εικόνα 5.81) Ο κώδικας που χρησιμοποιείται είναι ο εξής: <head> <script src="//code.jquery.com/jquery js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <script> $(function() { $( "#tabs" ).tabs(); }); </script> </head> <body> <div id="tabs"> <ul> <li><a href="#tabs-1">σε Περίπτωση Σεισμού</a></li> <li><a href="#tabs-2">προστασία από Κλοπές</a></li> </ul> <div id="tabs-1"> <p> Εισάγουμε Κείμενο <p> </div> <div id="tabs-2"> <p> Εισάγουμε Κείμενο</p> </div> </div> </body> Εικόνα 5.81: Σελίδα Χρήσιμες Συμβουλές -109-

122 5.13 Μονάδες Ιστοσελίδας Έχοντας πλέον ολοκληρώσει την δημιουργία του περιεχομένου του ιστότοπου και εγκαταστήσει τα πρόσθετα που ανταποκρίνονται στις ανάγκες μας, το επόμενο βήμα είναι να μορφοποιήσουμε τις πλευρικές στήλες (έχουμε επιλέξει να έχουμε δυο) και να ενεργοποιήσουμε τα πρόσθετα που λειτουργούν σαν μονάδες Μονάδα Κείμενο Είναι μια από τις πιο χρήσιμες μονάδες επειδή ο διαχειριστής μπορεί να επιλέξει να εμφανίζει κείμενα, εικόνες ή και πρόσθετα. Στην παρούσα εργασία χρησιμοποιήθηκε για την δημιουργία τεσσάρων μονάδων προσφέροντας επιπλέον πληροφορίες στον επισκέπτη. Αναλυτικά δημιουργήθηκαν οι εξής μονάδες: Συνεργαζόμενες Εταιρείες, στην οποία εισάγουμε μία εικόνα που έχουμε στη συλλογή μας. Από τη συλλογή Πολυμέσων αντιγράφουμε το URL της εικόνας, όπως φαίνεται στην Εικόνα 5.82που ακολουθεί. Εικόνα 5.82: Μονάδα Συνεργαζόμενες Εταιρείες -110-

123 Εικόνα gif με τον ίδιο τρόπο που ακολουθήθηκε για την μονάδα Συνεργαζόμενες Εταιρείες. Φιλικός Διακανονισμός, όπου εισάγουμε μια εικόνα gif, όπως στις προηγούμενες περιπτώσεις, με δυνατότητα ανακατεύθυνσης του χρήστη. Προσθέτουμε τον εξής κώδικα (Εικόνα 5.83) που είναι ο σύνδεσμος που θέλουμε να μεταφερόμαστε επιλέγοντας την εικόνα. <a href=" src=" Εικόνα 5.83: Κώδικας Συνδέσμου Καιρός, όπου τοποθετούμε ένα πρόσθετο καιρού (Εικόνα 5.84). Υπάρχουν αρκετά τέτοια πρόσθετα από διάφορες σελίδες όπως είναι το κ.α. Στην παρούσα εργασία χρησιμοποιήθηκε το πρόσθετο που βρίσκεται στη διεύθυνση Εικόνα 5.84: Μονάδα Καιρός -111-

124 Μονάδα GSY Ajax Recent Posts Ενεργοποιώντας αυτή τη μονάδα επιλέγουμε τον αριθμό των αναρτημένων άρθρων μας που θα εμφανίζονται στους επισκέπτες (Εικόνα 5.85)και από την οποία θα έχουν άμεση πρόσβαση σε αυτά ανεξάρτητα από την σελίδα που βρίσκονται. Εικόνα 5.85: Μονάδα GSY Ajax Recent Posts Μονάδα Αρχείο Άρθρων Με αυτή τη μονάδα ο επισκέπτης έχει τη δυνατότητα να επιλέξει να εμφανίσει τα άρθρα κατηγοριοποιημένα ανά μήνα (Εικόνα 5.86). Εικόνα 5.86: Μονάδα Αρχείο Άρθρων Μονάδα HTML/JavaScript Adder Με τη μονάδα αυτή θα δημιουργήσουμε ένα slider εικόνων. Θα επιλέξουμε τη μονάδα και θα πληκτρολογήσουμε σε αυτή τον εξής κώδικα (Εικόνα 5.87) JavaScript: <script type="text/javascript"> <!-- var image1=new Image() image1.src="

125 var image2=new Image() image2.src=" var image3=new Image() image3.src=" var image4=new Image() image4.src=" var image5=new Image() image5.src=" var image6=new Image() image6.src=" var image7=new Image() image7.src=" var image8=new Image() image8.src=" //--> </script> <img src=" name="slide" width="100%" height="100" /> <script> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src") if (step<8) step++ else step=1 //call function "slideit()" every 6.5 seconds settimeout("slideit()",6500) } slideit() //--> </script> Εικόνα 5.87: Κώδικας JavaScript Η ιστοσελίδα μας έχει πλέον αποκτήσει την μορφή που βλέπουμε στην Εικόνα

126 Εικόνα 5.88: Τελική Μορφή Σελίδας με μονάδες 5.14 Μέλη Ιστοσελίδας Στα Συστήματα Διαχείρισης Περιεχομένου (CMS) παρέχεται η δυνατότητα, ανάλογα με τις ρυθμίσεις που θα γίνουν, οι χρήστες να έχουν κάποιους ρόλους και δικαιώματα στον ιστότοπο. Από το μενού επιλέγουμε την καρτέλα Μέλη στην οποία βλέπουμε όλα τα μέλη του ιστότοπου. Έχοντας επιτρέψει την αυτοεγγραφή χρηστών αυτή η λειτουργία μας είναι ιδιαιτέρως χρήσιμη αφού μπορούμε να εγκρίνουμε την εγγραφή μελών, να κλειδώσουμε το μέλος ή και να αλλάξουμε το ρόλο του, παρέχοντας του περισσότερα δικαιώματα, όπως δείχνει η Εικόνα

127 Εικόνα 5.89: Σελίδα Μέλη Ο διαχειριστής ακόμα έχει τη δυνατότητα να προσθέτει νέα μέλη επιλέγοντας την καρτέλα Προσθήκη. Τέλος μπορούμε να επεξεργαστούμε τις πληροφορίες του προφίλ μας επιλέγοντας την καρτέλα Το Προφίλ σας Μενού Εργαλεία Επιλέγοντας την καρτέλα Εργαλεία από το μενού έχουμε την δυνατότητα να εξάγουμε τα στοιχεία του ιστότοπου μας (Εικόνα 5.90), όπως τα άρθρα,τα μενού τις σελίδες μας κ. α. Εικόνα 5.90: Εξαγωγή Στοιχείων Επίσης έχουμε την δυνατότητα να εισάγουμε στοιχεία και από άλλα συστήματα (Εικόνα 5.91). Εάν θέλουμε να εισάγουμε στοιχεία από κάποια άλλη εγκατάσταση WordPress θα πρέπει να εγκαταστήσουμε το πρόσθετο Wordpress Importer

128 Εικόνα 5.91: Εισαγωγή Στοιχείων 5.16 Αντίγραφα Βάσης Δεδομένων Από το Κέντρο Ελέγχουν(control panel) του XAMPP έχουμε την δυνατότητα επιλέγοντας την καρτέλα Admin από την MySQL να μεταφερθούμε στην αρχική σελίδα του phpmy Admin, από όπου θα δημιουργήσουμε αντίγραφα της βάσης δεδομένων της ιστοσελίδας μας. Επιλέγουμε την βάση δεδομένων που χρησιμοποιούμε και μετέπειτα από την καρτέλα Εξαγωγή (Εικόνα 5.92) επιλέγουμε τη μέθοδο εξαγωγής, του πίνακες που θέλουμε να συμπεριλάβουμε, τη μορφοποίηση των στοιχείων κλπ. Στη συνέχεια πατάμε Εκτέλεση

129 Εικόνα 5.92: Αντίγραφα Βάσης Δεδομένων -117-

130

131 6 Προσομοίωση για Συσκευές Χειρός Ένα mobile site, είναι μια μειωμένη έκδοση της πραγματικής ιστοσελίδας. Έχει σχεδιαστεί για να είναι συμβατή με τις σύγχρονες συσκευές και να μπορεί να είναι προσβάσιμη από του χρήστες που διαθέτουν σύνδεση στο διαδίκτυο, έχοντας σαν βασικό σκοπό μια άνετη και ευχάριστη περιήγηση των επισκεπτών. Το mobile site θα πρέπει να διαθέτει χρηστικότητα, δηλαδή το μενού και το περιεχόμενο να είναι ευδιάκριτα, να είναι γρήγορος ο χρόνος φόρτωσης, να μπορούν να πατηθούν εύκολα τα κουμπιά και οι σύνδεσμοι και να παρέχει τη δυνατότητα να χρησιμοποιηθούν οι λειτουργίες του τηλεφώνου. Πλέον όλο και περισσότερες ιστοσελίδες κατασκευάζονται (mobile site ή application) με γνώμονα την ολοένα και αυξανόμενη χρήση των κινητών συσκευών ή tablet όπως φαίνεται στις ακόλουθες εικόνες(εικόνα 6.1, Εικόνα 6.2): Εικόνα 6.1: Στατιστικά Χρήση Συσκευών -119-

132 Εικόνα 6.2: Στατιστικά Χρήσης Κινητών Συσκευών 6.1 Mobile View Το WordPress προσφέρει μια πληθώρα διαθέσιμων πρόσθετων, επεκτάσεων και θεμάτων σχεδιασμένα ώστε να είναι συμβατά με όλες τις σύγχρονες συσκευές. Μερικά από αυτά προσφέρονται δωρεάν ενώ σε κάποια υπάρχει η δυνατότητα για μια δοκιμαστική περίοδο και μετά αν επιθυμούμε αγορά τους. Για την παρούσα εργασία επιλέχθηκε το πρόσθετο MobileView που είναι ελεύθερο πρόσθετο. Αφού το εγκαταστήσουμε και ενεργοποιήσουμε, θα εμφανιστεί η καρτέλα Mobile View στο μενού. Επιλέγοντας την μεταφερόμαστε στη σελίδα του πρόσθετου από όπου και θα κάνουμε τις ρυθμίσεις που θέλουμε. Στην καρτέλα Global Setting επιλέγουμε τον τίτλο που θα έχει το mobile site, το μενού, το αν θέλουμε να υπάρχει η δυνατότητα να μεταφερθούμε στην πραγματική έκδοση της ιστοσελίδας (desktop), το περιεχόμενο του υποσέλιδου (footer) κ. α.(εικόνα 6.3) Στη συνέχεια από την καρτέλα Skins μπορούμε να επιλέξουμε κάποιο θέμα εμφάνισης που έχουμε κατεβάσει στο υπολογιστή μας. Τέλος, στην καρτέλα Skins Settings ρυθμίζουμε διάφορα στοιχεία όπως το αν ε- πιτρέπεται η εστίαση (zoom) στο περιεχόμενο, αν θέλουμε να εμφανίζονται τα άρθρα στην αρχική σελίδα σε μορφή slider καθώς και διάφορες άλλες επιλογές σχετικά με τον -120-

133 τρόπο εμφάνισης τους, όπως το αν εμφανίζεται το όνομα του δημιουργού του άρθρου, την ημερομηνία που δημιουργήθηκε, τα σχόλια κλπ.(εικόνα 6.4) Εικόνα 6.3: Σελίδα General Settings Εικόνα 6.4: Σελίδα Skins Setting 6.2 Εγκατάσταση Opera Mobile Emulator Έχοντας κάνει τις ρυθμίσεις για την mobile εκδοχή της ιστοσελίδας το επόμενο βήμα είναι να τη τεστάρουμε. Όπως αναφέρθηκε και προηγουμένως όλο και περισσότερες ιστοσελίδες κατασκευάζονται (mobile site ή application) με γνώμονα την ολοένα και αυξανόμενη χρήση των κινητών συσκευών ή tablet. Έτσι δημιουργήθηκε η ανάγκη ο κατασκευαστής να δοκιμάζει τις αλλαγές που κάνει

134 Για το σκοπό αυτό έχουν αναπτυχθεί διάφορα προγράμματα που επιτρέπουν στον κατασκευαστή της ιστοσελίδας να κάνει δοκιμές μέσω ενός προσομοιωτή (emulator).κάποια από τα δημοφιλέστερα είναι το Android SDK, Eclipse IDE και PhoneGap. Επίσης, έχουν αναπτυχθεί και προεκτάσεις για αρκετούς περιηγητές ιστού, όπως είναι και ο Mobile/RWD Tester του Google chrome, ενώ υπάρχουν και διάφοροι online προσομοιωτές για δοκιμές(mobile phone Emulator, Screenfly, iphone Tester, Responsivepx κ. α). Στην παρούσα πτυχιακή θα χρησιμοποιηθεί ο προσομοιωτής της Opera (Opera Mobile Emulator). Αρχικά θα μεταβούμε στην διεύθυνση και από εκεί θα επιλέξουμε να κατεβάσουμε την έκδοση για τα Windows (Εικόνα 6.5). Εικόνα 6.5: Εγκατάσταση Opera Mobile Emulator Αφού αποθηκεύσουμε το αρχείο στον υπολογιστή μας σε ένα φάκελο (π. χ. Λήψεις/Downloads ) το επόμενο βήμα είναι να πάμε σε αυτό το φάκελο να βρούμε το αρχείο (Opera_Mobile_Emulator_12.1_Windows) και επιλέγοντας το με διπλό κλικ να ξεκινήσουμε την εγκατάσταση του. Μας εμφανίζεται το παράθυρο(εικόνα 6.6) και πατάμε Next : -122-

135 Εικόνα 6.6: Εγκατάσταση Opera Mobile Emulator Στο επόμενο παράθυρο (Εικόνα 6.7) επιλέγουμε το φάκελο εγκατάστασης και πατάμε Next. Εικόνα 6.7: Εγκατάσταση Opera Mobile Emulator -123-

136 Στη συνέχεια γίνεται η εγκατάσταση στο φάκελο που επιλέξαμε (Εικόνα 6.8). Εικόνα 6.8: Εγκατάσταση Opera Mobile Emulator Η εγκατάσταση του προγράμματος έχει ολοκληρωθεί και μπορούμε να ξεκινήσουμε το πρόγραμμα για να κάνουμε τις δοκιμές μας,όπως βλέπουμε στην Εικόνα 6.9. Εικόνα 6.9: Εγκατάσταση Opera Mobile Emulator -124-

137 6.3 Χρήση Opera Mobile Emulator Επιλέγοντας να ξεκινήσει το πρόγραμμα ανοίγει το κέντρο διαχείρισης από το οποίο μπορούμε να επιλέξουμε από μια λίστα συσκευών καθώς και χαρακτηριστικά όπως την ανάλυση, το σύστημα διεπαφής του χρήστη, τη κλίμακα του παραθύρου κλπ. Κάνουμε τις επιλογές μας και πατάμε το κουμπί Launch,όπως φαίνεται στην (Εικόνα 6.10): Εικόνα 6.10: Κέντρο Διαχείρισης Opera Mobile Emulator Αφού πατήσουμε Launch ανοίγει ένα νέο παράθυρο το οποίο λειτουργεί σαν περιηγητής και στον οποίο πληκτρολογούμε τη διεύθυνση της ιστοσελίδας,όπως δείχνει η παρακάτω εικόνα (Εικόνα 6.11): -125-

138 Εικόνα 6.11: Σελίδα Περιήγησης Έχοντας πληκτρολογήσει τη διεύθυνση βλέπουμε την mobile εκδοχή της ιστοσελίδας. Στην συνέχεια παρατίθενται εικόνες :της Αρχικής Σελίδας (Εικόνα 6.12),του πτυσσόμενου μενού (Εικόνα 6.13),της σελίδας άρθρων(εικόνα 6.14),της φόρμας επικοινωνίας(εικόνα 6.15) και της σελίδας συνεργατών(εικόνα 6.16)

139 Εικόνα 6.12: Αρχική Σελίδα -127-

140 -128- Εικόνα 6.13: Μενού

141 Εικόνα 6.14: Σελίδα Άρθρων -129-

142 -130- Εικόνα 6.15: Φόρμα Επικοινωνίας