Συστήματα Διαχείρισης Περιεχομένου στον Παγκόσμιο Ιστό Διάλεξη #7 η : Επιλογές εμφάνισης άρθρων. Modules. Γαβαλάς Δαμιανός dgavalas@aegean.gr 1
Καθολικές επιλογές εμφάνισης άρθρων Global article options (configuration): καθολικές ρυθμίσεις που επηρεάζουν όλα τα άρθρα ενός Joomla! website Article options at menu item level και Article options in article by article basis Υπερκαλύπτουν τις καθολικές ρυθμίσεις σε συγκεκριμένα άρθρα Επιλέξτε Article manager > Options > Articles tab Κρύψτε την κατηγορία του άρθρου, το Link category το συγγραφέα, την ημερομηνία δημοσίευσης, τους συνδέσμους navigation (next/previous links) και τον αριθμό επισκέψεων (hits) των άρθρων καθώς και τα εικονίδια print και email που εμφανίζονται σε κάθε άρθρο Επιλογές εμφάνισης συγκεκριμένων άρθρων Ανοίξτε το άρθρο New Children's ArtWorks Program Announced και ρυθμίστε ώστε να εμφανίζεται ως η ημερομηνία κατά την οποία δημιουργήθηκε 21/11/2012 Αλλάξτε της ημερομηνίες δημιουργίες και των υπολοίπων άρθρων της κατηγορίας News Για να εμφανιστούν οι ημερομηνίες σε αυτά μόνο τα άρθρα θα πρέπει να τροποποιήσετε τις ρυθμίσεις άρθρων του menu item News Ελέγξτε πως μπορείτε να ελέγξετε τη διάρκεια κατά την οποία το άρθρο θα εμφανίζεται δημοσιευμένο 2
Browser Title, Page heading Δημιουργήστε ένα νέο άρθρο, μη κατηγοριοποιημένο, με τίτλο και κείμενο Article title και Article text, αντίστοιχα Δημιουργήστε ένα νέο (single article) menu item με τίτλο Menu title που να «δείχνει» στο παραπάνω άρθρο Στην ίδια σελίδα ρυθμίστε τον τίτλο του browser (όταν εμφανίζεται το συγκεκριμένο άρθρο) σε Browser page title και την επικεφαλίδα της σελίδας σε Page heading Δείτε τις αλλαγές στο front end Το Page Heading έχει περισσότερο νόημα να εμφανίζεται σε Category Blog ή Category List menu items Εμφανίστε τα για τα menu items News και Events και κρύψτε το από το Home page Διαγράψτε τo menu item και το άρθρο που αντιστοιχούν στο Article title 3
Εισαγωγή στα modules Τα modules αποτελούν μονάδες λειτουργικότητας που εμφανίζονται σε κάποια επιλεγμένη περιοχή της σελίδας σας Εξαιρείται η κύρια περιοχή της σελίδας (στην οποία εμφανίζεται το περιεχόμενο των άρθρων) Οι υπόλοιπες περιοχές της οθόνης εμφανίζουν είτε μέρη του προτύπου (template), π.χ. το banner του site σας Στο site σας, ως έχει μέχρι στιγμής, το menu στην κορυφή της σελίδας, το breadcrump, η login φόρμα και το footer menu, αποτελούν όλα modules Πως γνωρίζουμε ποιες είναι οι διαθέσιμες θέσεις στις οποίες μπορούν να τοποθετηθούν modules και πως μπορούμε να αναθέσουμε modules σε αυτές τις θέσεις; Επιτρεπόμενες θέσεις για modules Επιλέξτε Extensions > Template Manager > Options και ενεργοποιήστε το Preview Module Positions Κάνετε κλικ στο icon που εμφανίστηκε δίπλα στο Beez2 Κάνετε κλικ στο icon που εμφανίστηκε δίπλα στο Beez2 Default template για να δείτε τις επιτρεπόμενες θέσεις για modules που προδιαγράφει το συγκεκριμένο template Υπάρχει και ένα trick για να ενημερωθείτε για τις θέσεις αυτές αν, στο front end, πληκτρολογήσετε τη διεύθυνση http://localhost:8080/museum/?tp=1 Συνήθως, το Preview Module Positions απενεργοποιείτε όταν η ανάπτυξη του site μας έχει ολοκληρωθεί (ώστε οι θέσεις να μην είναι φανερές σε όσους επισκέπτες χρησιμοποιήσουν το?tp=1 trick) 4
Custom HTML module Το Custom HTML module είναι ένα module που περιέχει απλά HTML περιεχόμενο και εμφανίζεται ως αυτόνομο κουτί σε κάποιο module position Δημιουργήστε ένα νέο Custom HTML module με τίτλο Hours και τοποθετήστε το στη θέση position 6 «Φιλτράρετε» τη λίστα των θέσεων ώστε να εμφανίζονται μόνο εκείνες που προδιαγράφονται στο beez_20 template Αντιγράψτε ως περιεχόμενο του module το κείμενο που σας δίνεται στο αρχείο hours.txt (είναι οι ώρες λειτουργίας του μουσείου) ) Από κάτω προσθέστε τις δύο εικόνες (σας δίνονται) του facebook και του twitter (με κατάλληλα image descriptions ). Οι εικόνες θα δείχνουν στα URLs που σας δίνονται social media.txt με τις σελίδες να ανοίγουν σε νέο παράθυρο Παρατηρήστε τις αλλαγές στο front end Εμφάνιση modules σε επιλεγμένες σελίδες Συχνά επιθυμούμε την εμφάνιση κάποιων modules όχι σε όλες, αλλά σε επιλεγμένες σελίδες Ρυθμίστε το Hours module ώστε να εμφανίζονται μόνο στις σελίδες Home και About 5
Breadcrump Το breadcrump αποτελεί ένα βοηθητικό μέσο πλοήγησης που πληροφορεί τον επισκέπτη σε ποιο σημείο ιεραρχίας βρίσκεται κάθε στιγμή Ανοίξτε το Breadcrumps module Δοκιμάστε το αποτέλεσμα που έχει η αλλαγή των προκαθορισμένων ρυθμίσεων που αφορούν το breadcrump: εμφάνιση κειμένου You are here, κρύψιμο του Home, κρύψιμο της τρέχουσας (last) σελίδας, ορισμός διαχωριστή (separator) διαφορετικού από το βελάκι Στο τέλος, επαναφέρατε τις αρχικές ρυθμίσεις Random image module Θα έχετε παρατηρήσει πως σε κάποια sites εμφανίζεται σε συγκεκριμένη θέση των σελίδων μια τυχαία εικόνα Δημιουργήστε στο Media Manager έναν νέο folder random και ανεβάστε σε αυτόν τις εικόνες random1.jpg random5.jpg που σας δίνονται Δημιουργήστε ένα νέο module τύπου Random Image με τον ίδιο (κρυμμένο) τίτλο, το οποίο θα εμφανίζεται στη θέση position 6 Ο image folder πρέπει να δηλωθεί ο images/random Αν θέλετε, μπορείτε να δηλώσετε και ένα κοινό link για όλες τις εναλλασσόμενες εικόνες Αν θέλετε διαφορετικό link για κάθε εικόνα, τότε θα πρέπει να χρησιμοποιήσετε το Banner component Η τυχαία εικόνα θα πρέπει να εμφανίζεται μόνο στις σελίδες News & Events, News και Events 6
Newsflash Θέλουμε να δημιουργήσουμε ένα module στο οποίο θα εμφανίζονται τα τελευταία νέα του μουσείου Δημιουργήστε ένα νέο module τύπου Articles Newsflash, με τίτλο ίλ Latest news και θέση την position 7 ii Το module θα εμφανίζει άρθρα των κατηγοριών σελίδες News & Events, News και Events Δεν θα φαίνονται οι εικόνες των άρθρων αλλά θα εμφανίζεται ο τίτλος τους Θα πρέπει να εμφανίζεται ένα read more link, ενώ στο module θα εμφανίζεται μέχρι ένα άρθρο Το άρθρο θα επιλέγεται τυχαία Το module θα εμφανίζεται μόνο στο Home page Αλλάξτε τη σειρά εμφάνισης (ordering) των 3 modules που τοποθετούνται στη θέση position 7 ώστε πρώτο να εμφανίζεται το Left Menu, δεύτερο το Login Form και τρίτο το Latest news Tweet feed Θέλουμε να προσθέσουμε ένα module που να εμφανίζει τα τελευταία tweets που έχουν αναρτηθεί στο Tweeter (από το χρήστη @art_samoca) Επισκεφτείτε τη σελίδα https://twitter.com/widgets και επιλέξτε Widgets > Create New και στην επόμενη σελίδα username: @art_samoca, height: 250, domain: aegean.gr Εφόσον δεν έχετε tweeter account, θα πρέπει να δημιουργήστε έναν Πατήστε το πλήκτρο Create widget και αντιγράψτε τον javascript κώδικα που παράγεται 7
Tweet feed (συν.) Δημιουργήστε ένα νέο module τύπου Custom HTML με κρυμμένο τίτλο Tweeter feed, που θα εμφανίζεται στη θέση position 6 Σε περίπτωση που ο JCE Editor δεν σας επιτρέψει να επικολλήσετε JavaScript κώδικα θα πρέπει να κάνετε την ακόλουθη ρύθμιση και στη συνέχεια να επικολλήσετε εκ νέου τον JavaScript κώδικα: Components > JCE Editor > Control Panel >Editor Profiles > Default > Editor Parameters > Options > Advanced > Allow Javascript: Yes Ρυθμίστε το Tweeter feed ώστε να εμφανίζετε μόνο στο Home page Με παρόμοια διαδικασία μπορείτε να ενσωματώσετε στο site σας και ένα Facebook feed Σελίδα οδηγιών με χρήση Google maps Δημιουργήστε ένα νέο άρθρο Directions που θα ενταχθεί στην κατηγορία Contact us Θα βρείτε το κείμενο του άρθρου στο αρχείο directions.txt που σας δίνεται Στο τέλος του κειμένου του άρθρου προσθέστε τον κώδικα που θα καλέσει ένα module το οποίο θα εμφανίσει εκεί ένα google map: {loadposition map} Πρακτικά, ο παραπάνω κώδικας δημιουργεί ένα module position μέσα στο άρθρο Δημιουργήστε ένα νέο module τύπου Custom HTML με κρυμμένο τίτλο Google map που θα εμφανίζεται στη θέση map (θα το πληκτρολογήσετε) 8
Σελίδα οδηγιών με χρήση Google maps (συν.) Ανοίξτε τη σελίδα https://maps.google.com/, αναζητήστε το Ventura, CA, United States και πατήστε το link icon και αντιγράψτε τον html κώδικα που παράγεται Αφού πατήσετε το Toggle editor σύνδεσμο στο Google map module, επικολλήστε τον html κώδικα Δημιουργήστε ένα νέο menu item (Single article) με τίτλο Directions που να δείχνει στο άρθρο Directions Εφόσον δεν είστε ευχαριστημένοι με το πώς μοιάζει ο χάρτης σας, θα πρέπει να κάνετε τις απαραίτητες αλλαγές στο site των google maps και να αντιγράψετε τον νέο html κώδικα που θα παράγει Search Προσθέστε ένα νέο module τύπου Search, με τίτλο Search Στο εσωτερικό του πεδίου αναζήτησης θα πρέπει να Στο εσωτερικό του πεδίου αναζήτησης θα πρέπει να εμφανίζεται το κείμενο Search... και στα δεξιά του η εικόνα searchbutton.gif που σας δίνεται (προσέξτε τις οδηγίες σχετικά με το που ακριβώς θα πρέπει να τοποθετήσετε την εικόνα) Εκτελέστε μια αναζήτηση και παρατηρήστε τα αποτελέσματα 9