Κατασκευή Δικτυακού Τόπου με το WordPress Ενότητα 1: Βασικές Αρχές Ανάλυσης και Σχεδιασμού Δικτυακών Τόπων (2 ώρες) Στόχοι Μετά το τέλος του μαθήματος οι μαθητές θα πρέπει: Να μπορούν να βρίσκουν κείμενα και φωτογραφίες στο διαδίκτυο και να τις αποθηκεύουν στον υπολογιστή τους. Να κατανοούν τις έννοιες της συνέπειας (consistency), της χρωματικής μόλυνσης (color pollution) και της οπτικής ισορροπίας σε ένα δικτυακό τόπο. Να χρησιμοποιούν ορθά τα σημεία της στίξης, τα κεφαλαία γράμματα, τις αλλαγές παραγράφων, τις γραμματοσειρές και τα μεγέθη τους για να δημιουργούν ευανάγνωστες σελίδες Να κατανοούν τις τεχνικές με τις οποίες μπορούμε να βοηθήσουμε τον επισκέπτη του δικτυακού μας τόπου να πλοηγηθεί σε αυτόν εύκολα και αποτελεσματικά εντοπίζοντας γρήγορα τις πληροφορίες που χρειάζεται. Να μπορούν να δημιουργήσουν έναν πίνακα περιεχομένων για έναν δικτυακό τόπο. Βασικές Έννοιες Χρωματική μόλυνση (color pollution) σε ένα δικτυακό τόπο, ονομάζεται η χρήση υπερβολικού αριθμού χρωμάτων, η οποία έχει ως αποτέλεσμα φτωχό αισθητικό αποτέλεσμα, κούραση και αποπροσανατολισμό του επισκέπτη. Παράδειγμα: http://www.dokimos.org/ajff/ Συνέπεια (consistency)σε ένα διαδραστικό σύστημα, όπως είναι ένας δικτυακός τόπος σημαίνει η ομοιομορφία στην εμφάνιση, τις λειτουργίες πλοήγησης και την ανάδραση του συστήματος προς τον χρήστη. Σε έναν συνεπή σχεδιασμό: Παρόμοιες λειτουργίες ομαδοποιούνται. Χρώματα και στοιχεία τυπογραφίας είναι ομοιόμορφα Εργαλεία πλοήγησης και οπτικά βοηθήματα βρίσκονται πάντα στην ίδια θέση Οπτική ισορροπία σε ένα δικτυακό τόπο σημαίνει η ομοιόμορφη κατανομή των στοιχείων στη σελίδα με τρόπο που να μην αφήνονται μεγάλες κενές επιφάνειες Καλές και κακές πρακτικές στο σχεδιασμό ιστοσελίδων Βασικοί κανόνες κατά τη σύνταξη κειμένου Δεν γράφουμε όλα κεφαλαία. Δεν γράφουμε χωρίς τόνους ή σημεία στίξης. Δεν γράφουμε greeklish. Δημήτρης Αντωνόγλου, Καθηγητής ΠΕ19, Ενότητα Wordpress 1
Δεν χρησιμοποιούμε πολύ μικρές ή πολύ μεγάλες γραμματοσειρές Δεν αφήνουμε περισσότερα κενά από ένα μεταξύ των λέξεων. Δεν χρησιμοποιούμε υπογραμμίσεις (για έμφαση χρησιμοποιούμε έντονα ή πλάγια) Αφήνουμε πάντα ένα κενό μετά από σημείο στίξης. Δεν αφήνουμε ποτέ κενό πριν από σημείο στίξης. Δεν χρησιμοποιούμε πάνω από τρεις διαφορετικές γραμματοσειρές στην ίδια σελίδα. Προσέχουμε την ορθογραφία Γιατί επισκέπτονται οι άνθρωποι ιστοσελίδες; Χρειάζονται πληροφορίες Θέλουν να ψωνίσουν Θέλουν να ψυχαγωγηθούν Θέλουν να επικοινωνήσουν με τα άλλα μέλη της κοινότητας Δεν τους νοιάζει το site σου Ο κανόνας των 4 δευτερολέπτων Κοιτώντας την αρχική σελίδα ενός δικτυακού τόπου, ο επισκέπτης πρέπει να μπορεί να καταλάβει με τι σχετίζεται. Αν δεν μπορεί, τότε το site είναι αποτυχία. Όπως αυτό: http://www.genicap.com/site/ Αντίθεση Αντίθεση είναι εκείνη η διαφορά στις οπτικές ιδιότητες ενός αντικειμένου, η οποία το κάνει να ξεχωρίζει από άλλα αντικείμενα και το φόντο. Αν το κείμενο σας δεν έχει αντίθεση δεν μπορεί να διαβαστεί. Αντισταθείτε στον παρορμητικό σας να χρησιμοποιήσετε κίτρινα γράμματα σε ροζ φόντο. Που βρίσκομαι; Ένα σύστημα πλοήγησης σε έναν δικτυακό τόπο πρέπει να μπορεί να απαντάει στις ερωτήσεις: Που βρίσκομαι Που ήμουν Που μπορώ να πάω μετά Που είναι η Αρχική σελίδα Η πλοήγηση πρέπει να είναι απλή και συνεπής. Δημήτρης Αντωνόγλου, Καθηγητής ΠΕ19, Ενότητα Wordpress 2
Δρ α στ η ρ ι ό τ η τ α 1 Δημιουργία Αρχικού Πίνακα Περιεχομένων Δημιουργήστε έναν αρχικό πίνακα περιεχομένων για ένα δικτυακό τόπο που παρέχει πληροφορίες για τα Καρδάμυλα. Συζητήστε μεταξύ σας για το τι μπορεί να περιέχει ένας τέτοιος τόπος και γράψτε το όνομα κάθε σελίδας κάτω από το άλλο. Μην απορρίψετε καμιά ιδέα. Δρ α στ η ρ ι ό τ η τ α 2 Δημιουργία αναμορφωμένου πίνακα περιεχομένων Αναδιατάξτε τον προηγούμενο πίνακα, χωρίζοντας τις σελίδες σε κατηγορίες και υποκατηγορίες. Για παράδειγμα Αξιοθέατα o Αρχαίο Στάδιο o Λίμνη Βιστωνίδα o Πύργος Αν χρειαστεί αφαιρέστε στοιχεία από τον πρώτο πίνακα Δημήτρης Αντωνόγλου, Καθηγητής ΠΕ19, Ενότητα Wordpress 3
Ενότητα 2 Βασικές Έννοιες Διαδικτύου και το Περιβάλλον WordPress (2 ώρες) Στόχοι Μετά το τέλος του μαθήματος οι μαθητές θα πρέπει: Να κατανοούν τη διαφορά μεταξύ της κατανάλωσης και της δημιουργίας πληροφορίας στο διαδίκτυο. Να κατανοούν τη δομή του παγκόσμιου ιστού. Να κατανοούν την έννοια της μεταφόρτωσης σε διακομιστή. Να μπορούν να δημιουργούν στατικές σελίδες στο wordpress και να τις αναδιατάσσουν. Να μπορούν να προσθέτουν και να επεξεργάζονται κείμενο στις σελίδες αυτές. Συντάκτης του Wordpress. Βασικές λειτουργίες O συντάκτης του wordpress είναι ένας απλός επεξεργαστής κειμένου, μέσα στον οποίο δημιουργούμε το περιεχόμενο των σελίδων και των άρθρων μας. Εκτός από το οπτικό περιβάλλον, το οποίο μοιάζει με ένα απλουστευμένο word, μπορεί να τεθεί σε λειτουργία html και να γράψουμε απευθείας κώδικα. Στην παρακάτω εικόνα φαίνονται οι βασικές λειτουργίες για τη δημιουργία σελίδων με τον συντάκτη. Δημήτρης Αντωνόγλου, Καθηγητής ΠΕ19, Ενότητα Wordpress 4
Δρ α στ η ρ ι ό τ η τ α 3 Συλλογή κειμένων και φωτογραφιών για κατασκευή δικτυακού τόπου για το χωριό των Καρδαμύλων 1. Αναζητήστε στο διαδίκτυο πληροφορίες και φωτογραφίες για τα Καρδάμυλα. 2. Αντιγράψτε και επικολλήστε στον επεξεργαστή κειμένου αυτές τις πληροφορίες. 3. Βάλτε επικεφαλίδες τα ονόματα των σελίδων του αναμορφωμένου πίνακα και μεταφέρετε εκεί τα κατάλληλα αποσπάσματα κειμένου αφού προσθέσετε πράγματα που γνωρίζετε εσείς και είστε σίγουροι για το ότι ισχύουν. 4. Κάντε το ίδιο με φωτογραφίες και τοποθετήστε τες σε φακέλους και υποφακέλους με τα αντίστοιχα ονόματα από τον αναμορφωμένο πίνακα. Προαιρετικά: Φωτογραφίστε οι ίδιοι το χωριό σας και γράψτε δικά σας κείμενα με την βοήθεια φίλων ή της οικογένειας σας. Δημήτρης Αντωνόγλου, Καθηγητής ΠΕ19, Ενότητα Wordpress 5
Ενότητα 3 Θέματα, Πρόσθετα, Σύντομοι Κωδικοί, Widgets (2 ώρες) Στόχοι Μετά το τέλος του μαθήματος οι μαθητές θα πρέπει: Να μπορούν να βρίσκουν ένα θέμα στο δικτυακό τόπο του wordpress, να το εγκαθιστούν και να το ενεργοποιούν. Να μπορούν να βρίσκουν ένα πρόσθετο στο δικτυακό τόπο του wordpress, να το εγκαθιστούν, να το ενεργοποιούν και να το παραμετροποιούν. Να καταλαβαίνουν τη λειτουργία πρόσθετων με χρήση shortcodes και να μπορούν να τα χρησιμοποιούν. Να κατανοούν πως λειτουργούν τα widgets, σε ποιες θέσεις τοποθετούνται και να μπορούν να τα τοποθετούν και να τα ενεργοποιούν. Θέματα στο Wordpress Τα θέματα, είναι πακέτα που αλλάζουν εντελώς την εμφάνιση του wordpress. Προσθέτουν χρώματα, θέσεις για να τοποθετήσουμε αντικείμενα, όπως εικόνες και widgets, γραμματοσειρές, στυλ μενού και άλλα. Μπορεί να τα παρομοιάσει κανείς με κουστούμια που ντύνουν το wordpress και έχουν τσέπες για να βάζουμε αντικείμενα, χωρίς να αλλάζουν τη σύσταση αυτού που τα φοράει. Η εγκατάσταση τους γίνεται από το μενού: Appearance->Themes πατώντας την καρτέλα install themes. Δημήτρης Αντωνόγλου, Καθηγητής ΠΕ19, Ενότητα Wordpress 6
Πρόσθετα Πρόσθετο nggallery To πρόσθετο nggallery επεκτείνει τις δυνατότητες που έχει το wordpress για τη διαχείριση φωτογραφιών. Παρέχει ένα περιβάλλον στο οποίο οι φωτογραφίες οργανώνονται σε άλμπουμ, δημιουργούνται αυτόματα μικρογραφίες τους και τέλος με χρήση σύντομων κωδικών (shortcodes) εμφανίζονται στη σελίδα μας με μια πληθώρα τρόπων. Τα shortcodes εισάγονται με τον συντάκτη, παρεμβαλλόμενα στο περιεχόμενο της σελίδας. Τα βάζουμε στο σημείο που θέλουμε να εμφανιστούν οι φωτογραφίες. Εισαγωγή εικόνων με το nggallery Βασικά shortcodes για το nggallery Για slideshow :[ slideshow id=x w=width h=height ] Για album : [ album id=x template=extend] or [ album id=x template=compact ] Για gallery : [ nggallery id=x ] Για μία μοναδικήεικόνα : [ singlepic id=x w=width h=height mode=web20 watermark float=left right ] Δημήτρης Αντωνόγλου, Καθηγητής ΠΕ19, Ενότητα Wordpress 7
Widgets Τα widgets προσθέτουν λειτουργίες και περιεχόμενο στις πλευρικές στήλες και τους footers του wordpress. Παραδείγματα τέτοιων widgets είναι πλαίσια αναζήτησης, πρόβλεψη καιρού, ημερολόγια, πλοήγηση, κατηγορίες άρθρων και άλλα. Αρκετά πρόσθετα έχουν τα δικά τους widgets και το κάθε θέμα έχει τις δικές του θέσεις για widgets. Δημήτρης Αντωνόγλου, Καθηγητής ΠΕ19, Ενότητα Wordpress 8
Δρ α στ η ρ ι ό τ η τ α 4 Αναζητήστε το θέμα Graphene. Κατόπιν εγκαταστήστε το και επιλέξτε Graphene options από την πλευρική στήλη. Αλλάξτε τα χρώματα στο μενού και άλλα στοιχεία της σελίδας. Πειραματιστείτε και "πειράξετε" και άλλες επιλογές. Μπορείτε μετά να επαναφέρετε τις προεπιλογές. Βοήθεια: Κάθε φορά που πειράζετε κάτι, σε μια άλλη καρτέλα στον φυλλομετρητή κάνετε κάθε φορά μπορείτε να ανανεώνετε τη σελίδα για να βλέπετε το αποτέλεσμα. Δημήτρης Αντωνόγλου, Καθηγητής ΠΕ19, Ενότητα Wordpress 9
Ενότητα 4 Το Ιστολόγιο, Άρθρα, Κατηγορίες και Υποκατηγορίες, Μενού (2 ώρες) Στόχοι Μετά το τέλος του μαθήματος οι μαθητές θα πρέπει: Να κατανοούν την έννοια του ιστολογίου και την ημερολογιακή του δομή. Να κατανοούν τις έννοιες άρθρο, κατηγορία και υποκατηγορία. Να κατανοούν τις δυνατότητες αλληλεπίδρασης μεταξύ συγγραφέα και σχολιαστή. Να μπορούν να δημοσιεύουν άρθρα. Να μπορούν να δημιουργούν κατηγορίες και υποκατηγορίες στο WordPress και να εντάσσουν τα άρθρα τους σε αυτές. Να δημιουργούν τα δικά τους μενού πλοήγησης, με συνδυασμό στατικών σελίδων, κατηγοριών και εξωτερικών δεσμών. Βασικές έννοιες Το περιεχόμενο στο Wordpress εμφανίζεται μέσω σελίδων ή άρθρων Άρθρα Τα άρθρα είναι αναρτήσεις που εμφανίζονται με χρονολογική σειρά (τα πιο πρόσφατα πάνω, τα πιο παλιά κάτω), στην αντίστοιχη κατηγορία. Μπορείτε να εγκαταστήσετε πρόσθετα, που επιτρέπουν στους αναγνώστες του δικτυακού σας τόπου σε τόπους κοινωνικής δικτύωσης όπως είναι το facebook. Τα άρθρα ενθαρρύνουν τη συζήτηση. Παρέχουν ενσωματωμένη λειτουργία σχολιασμού, μέσω τις οποίας οι αναγνώστες μπορούν να αλληλεπιδρούν σχολιάζοντας το άρθρο. Σελίδες Οι σελίδες περιέχουν στατικό περιεχόμενο το οποίο δεν λήγει χρονολογικά πιεζόμενο προς τα κάτω. Συνήθως αυτές οι σελίδες δεν είναι ανοικτές προς σχολιασμό. Σε αντίθεση με τα άρθρα οι σελίδες είναι οργανωμένες ιεραρχικά και όχι χρονολογικά. Δημήτρης Αντωνόγλου, Καθηγητής ΠΕ19, Ενότητα Wordpress 10
Δρ α σ τ η ρ ι ό τ η τ α 5. Δημιουργήστε 2 κατηγορίες: Μία με όνομα Επικαιρότητα και μία με το Παράδοση. Δημιουργήστε την υποκατηγορία Έθιμα στην κατηγορία Παράδοση. Βοήθεια: Γίνεται από το μενού Posts->Categories. Συμπληρώνετε τον πίνακα και πατάτε το πλήκτρο αφού συμπληρώσετε τα πεδία Δημήτρης Αντωνόγλου, Καθηγητής ΠΕ19, Ενότητα Wordpress 11
Δρ α σ τ η ρ ι ό τ η τ α 6. Γράψτε ένα σύντομο άρθρο για κάποιο σημαντικό γεγονός που συνέβη στο χωριό σας πρόσφατα ή κάποιο από τα έθιμα σας. Δημοσιεύστε το στην αντίστοιχη κατηγορία και υποκατηγορία. Βοήθεια: Συνεννοηθείτε με τους συμμαθητές σας για να μην γράψετε τα ίδια άρθρα. Αν βρεθείτε σε απόγνωση μπορείτε να βρείτε έτοιμες πληροφορίες από το Internet, αλλά θα ήταν πολύ καλύτερο να γράψετε δικά σας πράγματα ακόμα και αν είναι 2-3 γραμμές Δρ α σ τ η ρ ι ό τ η τ α 7.. Αναμορφώστε το τελικό μενού πλοήγησης τραβώντας κατηγορίες και στατικές σελίδες από την αριστερή στήλη. Σύρετε αυτά τα στοιχεία στις θέσεις που επιθυμείτε στο μενού Δημήτρης Αντωνόγλου, Καθηγητής ΠΕ19, Ενότητα Wordpress 12