5 ο ΚΕΦΑΛΑΙΟ: ΠΡΑΚΤΙΚΟ ΚΟΜΜΑΤΙ

Transcript

1 5 ο ΚΕΦΑΛΑΙΟ: ΠΡΑΚΤΙΚΟ ΚΟΜΜΑΤΙ 5.1 Εισαγωγή Το πρακτικό κομμάτι της πτυχιακής μας εργασίας αφορά την δημιουργία μιας λειτουργικής ιστοσελίδας με την χρήση της πλατφόρμας του Weebly, που αποτελεί μια σύγχρονη πλατφόρμα Website Builder. Η συγκεκριμένη ιστοσελίδα αφορά την ανάπτυξη μιας μορφής e-book που θα περιλαμβάνει κομμάτια της συγκεκριμένης πτυχιακής εργασίας τα οποία θα αφορούν τους Website Builders παρουσιάζοντας το top10 που παρουσιάσαμε και στην εν λόγω πτυχιακή εργασία αλλά και μεγάλο κομμάτι των πληροφοριών και των συγκρίσεων που πραγματοποιήθηκαν για να φέρουμε εις πέρας την εργασία αυτήν. Με λίγα λόγια στο e-book αυτό που θα δημιουργήσουμε θα περιλαμβάνονται όλα τα δεδομένα που αντλήσαμε μέσα από έρευνα που πραγματοποιήσαμε για τις σύγχρονες πλατφόρμες Website Builders, τα πλεονεκτήματα τους, ποιες είναι οι καλύτερες πλατφόρμες (μαζί με οδηγούς για το πώς θα τις χρησιμοποιήσει ο κάθε χρήστης σωστά), σύγκριση CMS με Website Builders και άλλα πολλά στοιχεία που θα αποτελέσουν ένα ιδιαίτερα χρήσιμο οδηγό για την παρουσίαση των συγκεκριμένων εφαρμογών που κάνουν ακόμα πιο εύκολη για τους αρχάριους χρήστες την κατασκευή ιστοσελίδων. Για τις ανάγκες της εν λόγω πτυχιακής εργασίας, λοιπόν, θα κατασκευάσουμε μια ιστοσελίδα στο Weebly, κάνοντας χρήση όσο το δυνατόν περισσότερων λειτουργιών και υπηρεσιών που η συγκεκριμένη πλατφόρμα προσφέρει στους χρήστες, κάνοντας ακόμα πιο κατανοητό στους αναγνώστες τον λόγο που θα πρέπει να επιλεγεί μια παρόμοια πλατφόρμα και όχι κάποια CMS. Για τον λόγο αυτόν, θα αναπτύξουμε μια ιστοσελίδα με δωρεάν domain name, δωρεάν hosting αλλά και κάνοντας χρήση κάποιου από τα δωρεάν template που προσφέρει η πλατφόρμα αυτήν, έτσι ώστε να παρουσιάσουμε στο τέλος μια άκρως λειτουργική σελίδα κάνοντας χρήση μονάχα των δωρεάν υπηρεσιών του Weebly και όχι κάποιας premium υπηρεσίας η οποία χρειάζεται κάποιο κόστος. 62

2 5.2 Παρουσίαση πλατφόρμας Weebly Με το που συνδεθεί κάποιος χρήστης σε έναν λογαριασμό Weebly και δώσει τα απαιτούμενα στοιχεία που χρειάζονται για να κάνει σύνδεση, τότε επιλέγει κάποιες δραστηριότητες που ζητάει το Weebly και στην συνέχεια εισέρχεται στην επεξεργασία της ιστοσελίδας του, όπου έχει την δυνατότητα να κάνει χρήση των αντικειμένων που υπάρχουν μέσω του drag & drop editor που υπάρχει στην αριστερή πλευρά της αρχικής σελίδας. (βλέπε εικόνα 5.1) Εικόνα 5.1 : Drag & drop editor Στο μενού που υπάρχει στην αρχική σελίδα επεξεργασίας, υπάρχουν 7 επιλογές. Η πρώτη επιλογή είναι το build το οποίο αφορά την αρχική μας σελίδα για την επεξεργασία της ιστοσελίδας μας, η δεύτερη επιλογή είναι το design όπου ο χρήστης έχει την δυνατότητα να επεξεργαστεί τον κώδικα της σελίδας αλλά και να διαμορφώσει την ιστοσελίδα του με διαφορετική γραμματοσειρά κλπ. Η τρίτη επιλογή ονομάζεται pages και εκεί πραγματοποιείται η δημιουργία μενού και υπομενού σε μια ιστοσελίδα. Η τέταρτη επιλογή καλείται store και αφορά επιλογές για δημιουργία ηλεκτρονικού καταστήματος, ενώ τεράστιο ρόλο παίζει η επόμενη 63

3 επιλογή που είναι οι ιδιότητες της σελίδας μας όπου εκεί ρυθμίζουμε διάφορες παραμέτρους για την καλυτέρευση του αποτελέσματος μας αλλά και για το SEO. Η επόμενη επιλογή είναι τα δυο εικονίδια που υπάρχουν πάνω δεξιά στην σελίδα επεξεργασίας όπου ο χρήστης έχει την ευχέρεια να επιλέξει εάν επιθυμεί να εργαστεί στην εμφάνιση της ιστοσελίδας για ηλεκτρονικό υπολογιστή είτε για κινητό τηλέφωνο. Τέλος μια αρκετά σημαντική επιλογή είναι το Publish που υπάρχει πάνω δεξιά δίπλα από τα προηγούμενα εικονίδια που προαναφέραμε όπου από εκεί μπορεί ο χρήστης με ένα κλικ να δημοσιεύσει την ιστοσελίδα του και να την δει ζωντανά μέσα σε λίγα δευτερόλεπτα. (βλέπε εικόνα 5.2) Εικόνα 5.2 : Αρχικό μενού επεξεργασίας στο Weebly Σε ότι έχει να κάνει με την επεξεργασία κώδικα, τον οποίο μπορεί να βρει κανείς στην επιλογή Design του αρχικού μενού, επιλέγοντας την επιλογή edit html/css (βλέπε εικόνα 5.3), ο χρήστης έχει την ευχέρεια να επεξεργαστεί τον κώδικα της σελίδας. Η συγκεκριμένη επιλογή δεν είναι υποχρεωτική αλλά αποτελεί μια επιπλέον υπηρεσία που προσφέρει η συγκεκριμένη πλατφόρμα για τους χρήστες που έχουν αρκετές αλλά και βασικές γνώσεις συγγραφής κομματιών κώδικα. 64

4 Εικόνα 5.3 : Edit html/css Στην εν λόγω επιλογή οι χρήστες μπορούν να επιλέξουν να διαμορφώσουν όπως οι ίδιοι επιθυμούν την ιστοσελίδα, αλλάζοντας χρώματα κλπ αλλά και αλλάζοντας κομμάτια όπως η επιλογή που αναγράφεται στο κάτω μέρος της ιστοσελίδας πως η σελίδα δημιουργήθηκε με την πλατφόρμα Weebly (βλέπε εικόνα 5.4), κάτι το οποίο οι χρήστες μπορούν να αφαιρέσουν εύκολα γράφοντας απλά στον κώδικα στην περιοχή του footer «visability:hidden;» (βλέπε εικόνα 5.5) Εικόνα 5.4 : Footer Weebly 65

5 Εικόνα 5.5 : Εξαφάνιση Footer 5.3 Κατασκευή ιστοσελίδας μέσω Weebly Αρχικό βήμα για την κατασκευή της ιστοσελίδας είναι η δημιουργία ενός λογαριασμού στην πλατφόρμα του Weebly. Η διαδικασία αυτήν είναι ιδιαίτερα εύκολη καθώς απαιτούνται μόνο ένα όνομα, το ηλεκτρονικό ταχυδρομείο του κάθε χρήστη και ένας κωδικός πρόσβασης. Στην συνέχεια, το Weebly ζητάει από τους χρήστες να επιλέξουν το περιεχόμενο στο οποίο θα εστιάζεται η συγκεκριμένη ιστοσελίδα, έχοντας 3 επιλογές, που είναι site,blog και store. (βλέπε εικόνα 5.6) Η δική μας επιλογή ήταν site, κάτι το οποίο όπως έχουμε αναφέρει και σε προηγούμενη ενότητα της πτυχιακής μας εργασίας είναι διαδικαστικό καθώς στη πορεία της κατασκευής της ιστοσελίδας ο χρήστης έχει την δυνατότητα να αλλάξει όποια στιγμή ο ίδιος επιθυμεί την συγκεκριμένη αρχική του επιλογή. Στην συνέχεια, καλούμαστε να επιλέξουμε το template στο οποίο θα εργαστούμε για τις ανάγκες της ιστοσελίδας που επιθυμούμε να κατασκευάσουμε. Οι δικές μας ανάγκες για την δημιουργία e-book ήταν η επιλογή ενός απλού template, έχοντας ήρεμα χρώματα και μια αρχική δομή η οποία θα βοηθήσει στην ομορφότερη και αποτελεσματικότερη τελική μορφή την οποία θα έχει η ιστοσελίδα μας. Το template το οποίο επιλέξαμε φαίνεται στην εικόνα 5.7 που ακολουθεί και αποτελεί ένα δωρεάν template στο οποίο επιλέξαμε να χρησιμοποιήσουμε την γαλάζια έκδοση του από τις επιλογές που μας δόθηκαν σε ότι αφορούσε το χρώμα του γραφικού προτύπου μας. 66

6 Εικόνα 5.6 : Επιλογή εστίασης περιεχομένου ιστοσελίδας Εικόνα 5.7 : Επιλογή Template Το επόμενο βήμα είναι να επιλέξουμε το domain name το οποίο θα χρησιμοποιήσουμε στην ιστοσελίδα που επιθυμούμε να κατασκευάσουμε. Οι επιλογές που έχει ο κάθε χρήστης είναι να επιλέξει ένα δωρεάν domain που θα έχει την μορφή που παρέχει το weebly, την αγορά κάποιου νέου domain name από την premium έκδοση της πλατφόρμας αυτής αλλά και την δωρεάν χρήση κάποιου παλαιότερου domain του κάθε χρήστη. 67

7 Για τις ανάγκες της συγκεκριμένης πτυχιακής εργασίας επιλέξαμε να χρησιμοποιήσουμε ένα δωρεάν domain name που θα έχει την μορφή του Weebly, έτσι ώστε να φανεί ένα από τα βασικά χαρακτηριστικά της εν λόγω εφαρμογής που είναι η παροχή δωρεάν domain name. Έτσι επιλέξαμε ένα όνομα γενικό που αφορά την εργασία μας. Σε άλλες περιπτώσεις καλό είναι οι χρήστες να χρησιμοποιούν ονόματα τα οποία θα έχουν άμεση σχέση με το περιεχόμενο της ιστοσελίδας τους. Μια τέτοια επιλογή για την δική μας σελίδα για παράδειγμα θα ήταν Websitebuilders.weebly.com (καθώς θα είχε την μορφή του Weebly) αλλά παρόλα αυτά το domain name που επιλέξαμε για την εκπόνηση του πρακτικού κομματιού της εργασίας μας είναι ptyxiakiachilleaziarra.weebly.com. Εικόνα 5.8 : Επιλογή Domain Name Η σωστή επιλογή domain name αποτελεί ένα βασικό στοιχείο για οποιαδήποτε σελίδα καθώς παίζει σημαντικό ρόλο και στο κομμάτι του SEO, για αυτό καλό θα είναι να υπάρχει μεγάλη προσοχή έτσι ώστε να επιλέξει κάποιος χρήστης το κατάλληλο domain name. σημαντικό ρόλο, επίσης, παίζει και η επιλογή της ονομασίας της σελίδας που αποτελεί το αμέσως επόμενο βήμα. Την ονομασία της σελίδας μπορεί κανείς να την αλλάξει από το αυτόματο Logo το οποίο παρέχεται από το Weebly αλλά και από τις ιδιότητες που υπάρχουν στο αρχικό μενού κάθε σελίδας επεξεργασίας. Η ονομασία που δώσαμε στην δική μας ιστοσελίδα είναι 68

8 Website Builders (βλέπε εικόνα 5.9) κάτι το οποίο αντιπροσωπεύει πλήρως το θέμα που θα έχει η σελίδα μας και βοηθάει σε μεγάλο βαθμό το SEO της σελίδας μας καθώς το κάνει ακόμα πιο προσιτό στις μηχανές αναζήτησης. Εικόνα 5.9 : Ονομασία και Διεύθυνση σελίδας Επομένως, πλέον μπορούμε να ξεκινήσουμε να επεξεργαζόμαστε την ιστοσελίδα μας όπως εμείς επιθυμούμε. Η ιστοσελίδα αυτήν την στιγμή έχει την αρχική μορφή του γραφικού προτύπου (template)που επιλέξαμε στην αρχή. Η αρχική μας επιλογή του template ήταν σε χρώμα κόκκινο (όπως η εικόνα 5.10) κάτι το οποίο, όμως, άλλαξε στην συνέχεια καθώς ταίριαζε το γαλάζιο template καλύτερα στις ανάγκες που είχε η διαμόρφωση της συγκεκριμένης ιστοσελίδας βάση των χρωμάτων που θέλαμε να προσθέσουμε στην ιστοσελίδα μας. Εικόνα 5.10 : Αρχικό μενού επεξεργασίας και αρχική μορφή γραφικού προτύπου 69

9 Ένα από τα πρώτα βήματα τα οποία θα πρέπει να επεξεργαστεί και να σκεφτεί κάποιος χρήστης που επιθυμεί να κατασκευάσει μια ιστοσελίδα είναι να σκεφτεί πως περίπου θα είναι η ιστοσελίδα που θέλει να δημιουργήσει και το περιεχόμενο που θα τοποθετήσει σε αυτήν. Από την στιγμή που σκεφτεί τα παραπάνω θα πρέπει να επιλέξει τα κατάλληλα μενού τα οποία θα χειρίζεται ένας χρήστης όταν εισέρχεται στον συγκεκριμένο ιστότοπο. Το περιεχόμενο της ιστοσελίδας αποτελεί το βασικότερο και σημαντικό κομμάτι στην ανάπτυξη μιας ηλεκτρονικής σελίδας για αυτό οι χρήστες θα πρέπει να είναι ιδιαίτερα προσεκτικοί. Επομένως, από την στιγμή που γνωρίζουμε τι θα πρέπει να τοποθετήσουμε στην σελίδα μας, θα πρέπει να δημιουργήσουμε το αρχικό μας μενού. Αυτό πραγματοποιείται από την σελίδα pages όπου ο χρήστης μπορεί να δημιουργήσει νέες σελίδες που θα αποτελούν το μενού, το υπομενού κλπ. Στην εν λόγω καρτέλα οι χρήστες έχουν την δυνατότητα να δημιουργήσουν κανονικές σελίδες, blog σελίδες, σελίδες ηλεκτρονικού καταστήματος αλλά και συνδέσμους. (βλέπε εικόνα 5.11) Οι συγκεκριμένες επιλογές κάνουν ακόμα πιο ενδιαφέρον την πλατφόρμα του Weebly προσφέροντας περισσότερες επιλογές στους χρήστες. Έτσι σιγά-σιγά δημιουργήσαμε το μενού που επιθυμούσαμε όπως στην εικόνα 5.12 και το υπομενού σε μερικές κατηγορίες όπως στην εικόνα Η δημιουργία υπομενού είναι διαφορετική από την ανάπτυξη υπομενού, παρόλο που είναι εξαιρετικά εύκολη, καθώς το μόνο που έχει να κάνει ο χρήστης είναι να βάλει λίγο πιο εσωτερικά από την επιλογή του μενού, την σελίδα που επιθυμεί να χρησιμοποιήσει σαν υπομενού, κάνοντας χρήση δηλαδή την επιλογή του drag & drop editor που αποτελεί ένα από τα χαρακτηριστικά του Weebly. (βλέπε εικόνα 5.14) Εικόνα 5.11 : Επιλογές δημιουργίας σελίδας για μενού 70

10 Εικόνα 5.12 : Εμφάνιση αρχικού μενού στην ιστοσελίδα Εικόνα 5.13 : Εμφάνιση υπομενού στην ιστοσελίδα Όπως μπορούμε να διακρίνουμε από την εικόνα 5.13 που προηγήθηκε επιλέξαμε να αλλάξουμε κάποια πράγματα στην αρχική μας σελίδα, βασιζόμενη πάντα στην αρχική δομή του template που επιλέξαμε. Έτσι θελήσαμε να τοποθετήσουμε μια εικόνα που θα αφορά περισσότερο το περιεχόμενο της ιστοσελίδας που κατασκευάζουμε αλλά και να αλλάξουμε το κείμενο που υπάρχει δίπλα στην εικόνα αυτήν τοποθετώντας με την χρήση του Drag & Drop editor έναν τίτλο, ένα κείμενο και ένα κουμπί το οποίο το συνδέσαμε με μια από τις σελίδες που δημιουργήσαμε από το αρχικό μενού μας. Έτσι πλέον η αρχική μας έχει την εμφάνιση της εικόνας

11 Εικόνα 5.14 : Δημιουργία μενού και υπομενού μέσα από το περιβάλλον του Weebly Εικόνα 5.15 : Αρχική σελίδα μετά από αλλαγή εικόνας και χρώματος template 72

12 Κάθε template παρέχει έναν ειδικό χώρο για να τοποθετηθούν τα social media widgets τα οποία παρέχει δωρεάν η πλατφόρμα του Weebly. Παρόλα αυτά προσφέρει παράλληλα και την ευχέρεια στον χρήστη να τοποθετήσει τα εικονίδια αυτά όπου αλλού στο περιεχόμενο του επιθυμεί. Η δημιουργία σελίδας Facebook και Tweeter για τις ανάγκες της συγκεκριμένης ιστοσελίδας δεν ήταν απαραίτητη, παρόλα αυτά στην ανάπτυξη και την προώθηση μιας ιστοσελίδας και κυρίως μιας επιχείρησης είναι τεράστιο κεφάλαιο καθώς θα πρέπει να υπάρχουν οπωσδήποτε καθώς βοηθάει στην διαφήμιση των συγκεκριμένων ιστοχώρων αλλά και στο να ανέβει μια ιστοσελίδα στις πρώτες σελίδες των μηχανών αναζήτησης. Έτσι στον χώρο που υπάρχει στο template που χρησιμοποιούμε για τις ανάγκες της δημιουργίας της εν λόγω ιστοσελίδας τοποθετήσαμε απλά το ηλεκτρονικό μας ταχυδρομείο στο οποίο μπορεί να απευθύνεται κάποιος χρήστης κάνοντας απλά κλικ πάνω του και να επικοινωνήσει άμεσα μαζί μας μέσω . (βλέπε εικόνα 5.16) Εικόνα 5.16 : Χώρος template για τοποθέτηση social media widgets και ηλεκτρονικού ταχυδρομείου Στην συνέχεια, ξεκινήσαμε να τοποθετούμε κομμάτια της πτυχιακής εργασίας στην ιστοσελίδα, αφού πρώτα επιλέξαμε το πώς θα εμφανίζονται οι σελίδες μέσω του μενού για κάθε σελίδα που θα κατασκευάσουμε. Για παράδειγμα σε περίπτωση που επιλέγουμε από το μενού pages πως η σελίδα Website Builders η όποια άλλη σελίδα θα έχει την επιλογή Short Header, τότε θα έχει την εμφάνιση της εικόνας 5.17 στην οποία τοποθετήσαμε εμείς μια εικόνα που αντλήσαμε μέσα από το διαδίκτυο. 73

13 Εικόνα 5.17: Αρχική εμφάνιση για κάθε σελίδα που έχει επιλογή Short Header Αντίθετα, στην επιλογή No Header έχουμε επιλέξει να μην εμφανίζεται κάποιο περιεχόμενο αλλά να είναι μια κενή σελίδα όπου μπορούμε να τοποθετήσουμε ότι επιθυμούμε μέσα από το drag and drop menu του Weebly. Τέτοια επιλογή αποτελεί η σελίδα του μενού με όνομα «Οι 10 καλύτεροι Website Builders». Στην συγκεκριμένη σελίδα επιλέξαμε να δημιουργήσουμε κάτι διαφορετικό από τις άλλες σελίδες στις οποίες προσθέσαμε κάποια σημαντικά κομμάτια της εργασίας μας σαν βασικό τους περιεχόμενο. (βλέπε εικόνα 5.18) Έτσι στην συγκεκριμένη σελίδα που προαναφέραμε επιλέξαμε να ξεκινήσουμε με μια διαφορετική εικόνα και στην συνέχεια να περιέχεται ένα είδος πίνακα όπου τοποθετήσαμε το top10 των καλύτερων Website Builders για το , έχοντας παράλληλα δυο κουμπιά για το κάθε ένα όπου όταν κάποιος χρήστης κάνει κλικ πάνω σε κάποιο κουμπί, πηγαίνει είτε σε κάποιον οδηγό με μορφή e-book που παρέχει ο κάθε Website Builder είτε στην επίσημη σελίδα της κάθε πλατφόρμας όπου ο χρήστης μπορεί να πραγματοποιήσει την δική του έρευνα για την σελίδα αυτήν αλλά και να κάνει εγγραφή για να δοκιμάσει κάποια πλατφόρμα βάση των χαρακτηριστικών που έχουμε περιγράψει για αυτές στις άλλες σελίδες που δημιουργήσαμε και περιέχουν τα χαρακτηριστικά τους αλλά και λίγα λόγια για το τι περιλαμβάνουν και γιατί θα έπρεπε να τις επιλέξει κάποιος χρήστης. 74

14 Εικόνα 5.18 : Τοποθέτηση περιεχομένου στις σελίδες από κομμάτια της πτυχιακής αυτής εργασίας Στην σελίδα με τους 10 καλύτερους Website Builders για το , λοιπόν, δημιουργήσαμε ένα είδος πίνακα όπως προείπαμε. Για την δημιουργία κάποιου πίνακα το Weebly μέχρι πρόσφατα χρησιμοποιούσε ένα αντικείμενο στο drag & drop menu το οποίο ονομαζόταν column κάτι το οποίο πρόσφατα αντικαταστήθηκε από ένα αντικείμενο που καλείται spacer. Έτσι κάνοντας χρήση του συγκεκριμένου αντικειμένου τοποθετήσαμε μερικά columns έτσι ώστε να δημιουργήσουμε τα πλαίσια που θέλουμε για το top10 που επιθυμούσαμε να αναπτύξουμε μέσα σε αυτά τα πλαίσια. (βλέπε εικόνα 5.19) 75

15 Εικόνα 5.19 : Χρήση Spacer για δημιουργία πίνακα Μετέπειτα, έπρεπε να τοποθετηθούν κάποιες εικόνες και κουμπιά στα πλαίσια αυτά έτσι ώστε να δημιουργηθεί το top10, ενώ στην συνέχεια έπρεπε να συνδέσουμε τα κουμπιά αυτά με τους οδηγούς που αντλήσαμε μέσα από εκτενή έρευνα που πραγματοποιήσαμε για τους οδηγούς που παρέχουν οι σελίδες αυτές είτε σε ηλεκτρονική μορφή μιας σελίδας είτε κάποιου αρχείου pdf. Για την σύνδεση των κουμπιών με τους κατάλληλους συνδέσμους έπρεπε να γίνει η κατάλληλη σύνδεση μέσα από το editor που παρέχει το Weebly για παρόμοιες καταστάσεις. (βλέπε εικόνα 5.20) Αντίθετα όταν θέλουμε να συνδέσουμε έναν σύνδεσμο που δημιουργούμε με κάποια σελίδα μέσα από την ιστοσελίδα που δημιουργούμε ακολουθούμε την ίδια διαδικασία μόνο που επιλέγουμε standard page και στην συνέχεια την σελίδα που επιθυμούμε να οδηγείται ο χρήστης μετά το κλικ πο θα πραγματοποιήσει. (βλέπε εικόνα 5.21) 76

16 Εικόνα 5.20 : Σύνδεση κουμπιού με κάποιον σύνδεσμο Εικόνα 5.21 : Σύνδεση κουμπιού ή hyperlink με κάποια σελίδα που δημιουργήσαμε 77

17 Γενικότερα το αποτέλεσμα της μορφής του top10 που δημιουργήσαμε είχε την εμφάνιση από την εικόνα 5.22 και ο τρόπος με τον οποίο δίνει την δυνατότητα το Weebly στον χρήστη να επεξεργαστεί όλες τις εικόνες και τα χαρακτηριστικά που μπορεί να πειράξει από την κάθε εικόνα διακρίνονται στην εικόνα Εικόνα 5.22 : Δημιουργία top10 με χρήση spacer, εικόνων και κουμπιών Εικόνα 5.23 : Επεξεργασία εικόνων μέσω Weebly 78

18 Στην συνέχεια, δώσαμε στην αρχική μας σελίδα την τελική της μορφή, όπου χωρίσαμε τον χώρο που μας παρέχει το template σε δυο μέρη τοποθετώντας στο αριστερό κομμάτι ένα κείμενο που αποτελεί τον πρόλογο της ιστοσελίδας μας και στο δεξιό κομμάτι τοποθετήσαμε μια λίστα με τις καλύτερες πλατφόρμες Website Builders τις οποίες συνδέσαμε με τις σελίδες που έχουμε δημιουργήσει για το μενού μας, έτσι ώστε όταν κάνει κλικ επάνω τους κάποιος επισκέπτης να πηγαίνει κατευθείαν στο περιεχόμενο που δημιουργήσαμε για τις σελίδες αυτές. Εικόνα 5.24 : Τοποθέτηση κειμένου και λίστας στην αρχική σελίδα Τέλος, σε ότι έχει να κάνει με το περιεχόμενο της ιστοσελίδας μας, δημιουργήσαμε μια ακόμα σελίδα στο αρχικό μενού η οποία καλείται «Διεθνή άρθρα» η οποία σε αντίθεση με τις άλλες σελίδες που δημιουργήσαμε δεν ήταν απλή σελίδα αλλά μια blog σελίδα στην οποία ο κάθε χρήστης έχει την δυνατότητα όταν κατασκευάζει μια ιστοσελίδα να τοποθετεί εκεί δικά του ή άλλα άρθρα τα οποία έχουν την μορφή blog όπου οι επισκέπτες έχουν την ευχέρεια ακόμα και να κάνουν κάποιο σχόλιο αλλά και κάποιο like ή tweet μέσω των μέσων κοινωνικής δικτύωσης καθώς είναι αυτόματα συνδεδεμένα. 79

19 Έτσι για τις ανάγκες της πτυχιακής μας εργασίας αντλήσαμε κάποια πάρα πολύ χρήσιμα άρθρα μέσω του διαδικτύου τα οποία μπορούν να παρέχουν χρήσιμες πληροφορίες στους αναγνώστες για την κατασκευή ιστοσελίδων, για το SEO, για τους Website Builders κλπ, βάζοντας φυσικά και την πηγή από όπου λάβαμε το κάθε άρθρο της διεθνής βιβλιογραφίας που χρησιμοποιήσαμε. Εικόνα 5.25 : Συγγραφή άρθρου σε σελίδα blog μέσα από την σελίδα επεξεργασίας του Weebly Εικόνα 5.26 : Εμφάνιση άρθρων σε blog μέσα από το Weebly 80

20 Εικόνα 5.27 : Ιδιότητες blog μέσα από το Weebly Εικόνα 5.28 : Σχόλια χρηστών 81

21 Εικόνα 5.29 : Επιλογές διαχείρισης σχολίων επισκεπτών Για να καλύψουμε όσο το δυνατόν μεγαλύτερο φάσμα των υπηρεσιών και των δυνατοτήτων που έχει η πλατφόρμα του Weebly επιλέξαμε να δημιουργήσουμε μια δίγλωσση ιστοσελίδα η οποία θα παρέχει μετάφραση και στα αγγλικά δωρεάν μόνο με ένα κλικ από τον χρήστη. Για να το πραγματοποιήσουμε αυτό μέσω Weebly η διαδικασία είναι εύκολη απλά θέλει λίγη προσοχή στα βήματα που πρέπει να ακολουθηθούν. Αρχικά ο χρήστης που κατασκευάζει την ιστοσελίδα θα πρέπει να βγει από την σελίδα επεξεργασίας κάνοντας ένα logout μέχρι να εισέρθει στον χώρο όπου επιλέγει ποια σελίδα επιθυμεί από τον λογαριασμό του. εκεί ο χρήστης θα πρέπει να κάνει μια αντιγραφή της υπάρχουσας σελίδας και στην συνέχεια να μετάφραση στα αγγλικά όλες τις σελίδες που είχε δημιουργήσει στην πρώτη σελίδα. Αφού πραγματοποιήσει την μετάφραση σε όλες τις σελίδες τότε θα πρέπει να συνδέσει τις δυο αυτές σελίδες καθώς έχουν διαφορετικό domain name (η αγγλική μας σελίδα έχει σαν domain name το «eng-ptyxiakiachilleaziarra.weebly.com») (βλέπε εικόνα 5.30). Η σύνδεση αυτήν γίνεται με διάφορους απλούς τρόπους. Για τις ανάγκες της συγκεκριμένης εργασίας, ο τρόπος που επιλέξαμε εμείς είναι η χρήση εικόνων οι οποίες απεικονίζουν την ελληνική και την αγγλική σημαία (βλέπε εικόνα 5.31) και όταν κάνει κλικ επάνω τους ο χρήστης μεταφέρονται αυτόματα σε διαφορετική σελίδα χωρίς, όμως αυτό να γίνεται αντιληπτό καθώς το μόνο που αλλάζει είναι η γλώσσα της σελίδας (βλέπε εικόνα 5.32) 82

22 Εικόνα 5.30 : Δημοσίευση αγγλικού domain name Εικόνα 5.31 : Προσθήκη σημαίας όπου ο χρήστης μπορεί να επιλέξει την γλώσσα στην οποία θα εμφανίζεται η ιστοσελίδα 83

23 Εικόνα 5.32 : Εμφάνιση ιστοσελίδας με αγγλική μετάφραση Μια εξαιρετικά εντυπωσιακή υπηρεσία που παρέχει η πλατφόρμα του Weebly, όπως έχουμε ξανά αναφέρει παραπάνω, είναι η δημιουργία του περιβάλλοντος της ιστοσελίδας που δημιουργήσαμε ακόμα και σε κινητό τηλέφωνο και σε smartphones. Η διαδικασία αυτήν περιλαμβάνει να επιλέξει ο χρήστης πάνω δεξιά στο εικονίδιο ενός κινητού τηλεφώνου και στην συνέχεια με την χρήση του drag and drop editor να διαμορφώσει κατάλληλα όπως ο ίδιος επιθυμεί να φαίνεται η ιστοσελίδα του σε κινητά τηλέφωνα. Η διαδικασία αυτήν θα πρέπει να ακολουθηθεί για όλες τις σελίδες που έχει αναπτύξει μέσα στην ιστοσελίδα του αλλά και στην δική μας περίπτωση και στην αγγλική ιστοσελίδα καθώς όπως αναφέραμε και πιο πάνω η δυο αυτές σελίδες αποτελούν δυο ξεχωριστές ιστοσελίδες οι οποίες διαφέρουν μονάχα στην γλώσσα που χρησιμοποιούν. 84

24 Εικόνα 5.33 : Εμφάνιση ελληνικής ιστοσελίδας σε κινητό τηλέφωνο 85

25 Εικόνα 5.34 : Εμφάνιση αγγλικής ιστοσελίδας σε κινητό τηλέφωνο Ένα από τα τελευταία βήματα αλλά και από τα πιο σημαντικά στην δημιουργία και στην ανάπτυξη μιας ιστοσελίδας είναι το κομμάτι του SEO. Το Weebly προσφέρει ειδικούς χώρους για το SEO ο οποίος βοηθάει ιδιαίτερα τους αρχάριους χρήστες για να προωθήσουν καλύτερα την σελίδα τους. Εκτός από τα social media, το domain name και το όνομα της ιστοσελίδας το SEO επηρεάζεται από πολλούς ακόμα παράγοντες. Για τον λόγο αυτόν θα πρέπει να προσέξουμε στην δημιουργία της ιστοσελίδας μας μέσω Weebly μερικά πολύ χρήσιμα και καθοριστικά για την προώθηση της σελίδας μας, πλαίσια τα οποία υπάρχουν στις ιδιότητες του περιβάλλοντος επεξεργασίας του Weebly. Τα 86

26 πλαίσια αυτά είναι το site description (περιγραφή ιστοσελίδας) η οποία εμφανίζεται όταν η σελίδα μας βγαίνει στις μηχανές αναζήτησης και μπορεί να βοηθήσει στο να το δει κάποιος χρήστης και να ενδιαφερθεί να εισέλθει στην ιστοσελίδα. Για τον λόγο αυτόν θα πρέπει να υπάρχει ένας ακριβής όρος για το τι προσφέρει η ιστοσελίδα, να περιέχονται λέξεις κλειδιά οι οποίες θα βοηθήσουν στην εύρεση της σελίδας από μια μηχανή αναζήτησης αλλά και να είναι περιεκτική. Η δική μας περιγραφή απεικονίζεται στην εικόνα Εικόνα 5.35 : Site Desctiprion για SEO Στην συνέχεια, θα πρέπει να συμπληρώσουμε το επόμενο πλαίσιο που μας παρέχει η συγκεκριμένη πλατφόρμα και αφορά τις λέξεις κλειδιά που θα χρησιμοποιήσουμε. Οι λέξεις κλειδιά αποτελούν τις λέξεις που πληκτρολογούν οι χρήστες έτσι ώστε να βρουν κάτι που επιθυμούν στις μηχανές αναζήτησης. Για να επιλέξει κάποιος χρήστης που κατασκευάζει μια τέτοια ιστοσελίδα θα πρέπει να κάνει μια έρευνα για να δει τι λέξεις κλειδιά χρησιμοποιούν παρόμοιες ιστοσελίδες. Εικόνα 5.36 : Λέξεις κλειδιά Το επόμενο πλαίσιο που παρέχεται στις ιδιότητες της εν λόγω πλατφόρμας αφορούν τον κώδικα του Google Analytics αλλά και στο Google Webmaster Tools. Έτσι χρειάστηκε να δημιουργήσουμε έναν λογαριασμό μέσω του ηλεκτρονικού μας ταχυδρομείου στην Google έτσι ώστε να κάνουμε λογαριασμό στο Google Analytics. Μόλις κάναμε λογαριασμό, λοιπόν, το πρώτο πράγμα που κάναμε είναι η δήλωση της ιστοσελίδας μας στο Google (βλέπε 87

27 εικόνα 5.37) αλλά και αργότερα στο Bing έτσι ώστε να υπάρχει η ιστοσελίδα μας στις μηχανές αναζήτησης. Εικόνα 5.37 : Δήλωση ιστοσελίδας στο Google Τα αποτελέσματα της συγκεκριμένης ενέργειας φαίνονται στην εικόνα 5.38 όπου μέσα σε μερικές ημέρες η ιστοσελίδα μας έχει 5 αποτελέσματα στην μηχανή αναζήτησης της Google ενώ ένα αποτέλεσμα εμφανίζει η αγγλική μας ιστοσελίδα. Στην συνέχεια επιστρέψαμε στο Google Analytics όπου δηλώσαμε την ιστοσελίδα μας και έτσι μας δόθηκε ένας κώδικας τον οποίο τον οποίο τοποθετήσαμε στο πλαίσιο που μας παρέχει το Weebly. Έτσι θα έχουμε την δυνατότητα να βλέπουμε την επισκεψιμότητα της σελίδας μας αλλά και όλα τα πλεονεκτήματα που μας προσφέρει η συγκεκριμένη εφαρμογή της Google. 88

28 Εικόνα 5.38 : Εμφάνιση σελίδων που υπάρχουν στο Google μετά την δήλωση της ιστοσελίδας στην συγκεκριμένη μηχανή αναζήτησης Μετέπειτα, δηλώσαμε την ιστοσελίδα μας και στο Webmaster Tools έχοντας έναν χάρτη για την σελίδα μας ο οποίος κάνει ακόμα πιο προσιτή την ιστοσελίδα μας στις μηχανές αναζήτησης. Η εφαρμογή αυτήν μας έδωσε και αυτήν με την σειρά της έναν κώδικα τον οποίο τοποθετήσαμε στο επόμενο πλαίσιο που παρέχει το Weebly. (βλέπε εικόνα 5.42) Στο σημείο αυτό θα πρέπει να επισημάνουμε πως όλες οι ενέργειες που αναφέρθηκαν για τις ιδιότητες του Weebly σε ότι αφορά την ιστοσελίδα και το SEO, όλες οι ενέργειες αυτές θα πρέπει να γίνουν ταυτόχρονα και σε όλες τις σελίδες της ιστοσελίδας μας, έτσι ώστε να βρίσκονται ευκολότερα στις μηχανές αναζήτησης αλλά και να έχουμε στατιστικά δεδομένα για όλες τις σελίδες μας. (βλέπε εικόνα 5.44) 89

29 Εικόνα 5.39 : Δημιουργία λογαριασμού στο Google Analytics Εικόνα 5.40 : Αναφορές επισκεψιμότητας στο νέο λογαριασμό Google Analytics που κάναμε 90

30 Εικόνα 5.41 : Δήλωση ιστοσελίδας στο Webmaster Tools Εικόνα 5.42 : Χρήση κώδικα για Google Analytics και Webmaster Tools στα πλαίσια που παρέχει το Weebly Στην περίπτωση που κάποιος χρήστης για τον οποιονδήποτε λόγο δεν επιθυμεί να κάνει λογαριασμό στο Google Analytics, το Weebly περιέχει μια εξαιρετικά λειτουργία με αναλυτικά στατιστικά στοιχεία επισκεψιμότητας τα οποία προσφέρουν τα απαραίτητα στατιστικά δεδομένα στον χρήστη, παρέχοντας με τον τρόπο αυτόν τεράστια βοήθεια στους αρχάριους χρήστες. 91

31 Εικόνα 5.43 : Αναλυτικά στατιστικά δεδομένα επισκεψιμότητας της ιστοσελίδας μέσα από την υπηρεσία του Weebly Εικόνα 5.44 : Χρήση μεθόδων SEO σε όλες τις σελίδες 92