Γαβαλάς Δαμιανός dgavalas@aegean.gr

Συστήματα Διαχείρισης Περιεχομένου στον Παγκόσμιο Ιστό Διάλεξη #6 η : Δημιουργία και διαχείριση μενού και προχωρημένη μορφοποίηση άρθρων (JCE) στο Joomla! Γαβαλάς Δαμιανός dgavalas@aegean.gr 1

Menus και menu items Για την εμφάνιση του περιεχομένου άρθρων στον Joomla! 2.5 ακολουθούνται τα ακόλουθα βήματα: Δημιουργία κατηγοριών (categories) Δημιουργία και μορφοποίηση άρθρων (articles) και καταχώρησή τους σε κάποια κατηγορία Δημιουργία μενού, με στοιχεία μενού (menu items) που να δείχνουν (να λειτουργούν ως links) είτε σε κάποια κατηγορία (οπότε θα εμφανιστούν όλα τα άρθρα ρ της) είτε σε κάποιο συγκεκριμένο άρθρο Όσον αφορά τη διαχείριση μενού, το Joomla! ορίζει τα menus (ομάδες από links) και τα menu items τα οποία ομαδοποιούνται σε menus. Menu manager Ο menu manager δεν ορίζει σε ποια θέση θα εμφανιστεί ένα menu. Αυτό ορίζεται από τη μονάδα (module) με την οποία διασυνδέεται το menu. To module θα ορίσει και πόσα επίπεδα πλοήγησης θα εμφανιστούν. Ανοίξτε το module manager για να δείτε πόσα modules υπάρχουν ήδη στο site σας και σε ποια θέση βρίσκονται Δοκιμάστε να μεταφέρετε το Main Menu στο πάνω δεξί μέρος της σελίδας και επαναφέρετέ τη 2

Menus Τα menus στο Joomla! λειτουργούν σε δύο επίπεδα: 1. τον Menu Manager, μέσα από τον οποίο δημιουργούμε τα links για το site μας 2. Το Module, στο οποίο εντάσσονται και εμφανίζονται τα links Δημιουργία link (menu item) προς μεμονωμένο άρθρο Προσθέστε ένα link προς το About us άρθρο στο Main Menu (το οποίο υπάρχει ήδη από την εγκατάσταση του Joomla!) Menu Item Type: Single article Menu Title: About 3

Γονικά (parent) και δευτερεύοντα (secondary) menu items Ένα γονικό στοιχείο μενού (parent menu item) βρίσκεται στην κορυφή της ιεραρχίας των μενού, είναι δηλαδή πρωτεύον στοιχείο πλοήγησης Ένα δευτερεύον στοιχείο μενού (secondary /childmenu item) βρίσκεται στο κατώτερο από το γονικό του επίπεδο ιεραρχίας, είναι δηλαδή δευτερεύον στοιχείο πλοήγησης Ένα δευτερεύον στοιχείο μπορεί να έχει κι αυτό απογόνους, δηλαδή κατώτερα επίπεδα πλοήγησης Ανοίξτε το i site map.txt που σας δίνεται Δημιουργήστε secondary menu items για τα άρθρα Volunteer και Our Director, κάτω από το parent menu item About Δοκιμάστε να δημιουργήσετε και ένα προσωρινό menu item τρίτου επιπέδου «κάτω» από το Volunteer with us και εν συνεχεία αφαιρέστε το Menu items για την εμφάνιση σειράς άρθρων σε μια σελίδα Το Joomla! δίνει τη δυνατότητα εμφάνισης πολλαπλών άρθρων σε μία σελίδα Στην ορολογία του Joomla!, αυτό ονομάζεται blog Δημιουργήστε ένα blog menu item με τίτλο News & Events που να «δείχνει» σε όλα τα άρθρα της κατηγορίας News & Events Στο front end θα εμφανιστεί μόνο ένα link προς τα άρθρα της υποκατηγορίας News (δεν έχουμε καταχωρήσει ακόμα τα άρθρα της κατηγορίας Events ) 4

Προχωρημένη διαμόρφωση blogs Προσθέστε ένα νέο menu item (single article με τίτλο Collections ) στο Main Menu που να «δείχνει» στο άρθρο Current Exhibits Στη συνέχεια προσθέστε ένα Category Blog menu item με τίτλο Visiting Exhibits που να δείχνει στο αντίστοιχο άρθρο και θα είναι «κάτω» από το Collections γονικό στοιχείο Προσθέστε και ένα δεύτερο Single Article menu item «κάτω» από το Collections, με τίτλο Permanent Collections Προχωρημένη διαμόρφωση blogs (συν.) Τροποποιήστε το Visiting Exhibits menu item, ώστε να μην υπάρχουν leading articles, και μέχρι μχρ20 άρθρα ρ να εμφανίζονται σε μία στήλη Ποιες αλλαγές παρατηρείτε στη σελίδα Visiting Exhibits ; Αλλάξτε και τη σειρά εμφάνισης των άρθρων ώστε να εμφανίζονται σε αύξουσα αλφαβητική σειρά Για ποιο λόγο πιστεύετε ότι στο front end εμφανίζεται link με τίτλο όπως Read more: Upcoming Exhibit: Paul Shellmont: Bird Watching, αντί του συντομότερου Read more ;;; 5

Δημιουργία menu items που δείχνουν σε λίστα άρθρων Μία ακόμα επιλογή για τα menu items είναι να «δείχνουν» σε μια λίστα με τίτλους άρθρων, καθένας από τους οποίους θα λειτουργεί ως link προς το άρθρο ρ Ανοίξτε το events.txt και δημιουργήστε ένα νέο άρθρο με τίτλο Family Programs (το σώμα του είναι οι δύο παράγραφοι που ακολουθούν τον τίτλο) που να ανήκει στην κατηγορία Events Αντίστοιχα, δημιουργήστε το ArtWorks Program Starts Saturday, March 3 άρθρο Παρατηρήστε την εμφάνιση της υποκατηγορίας Events κάτω από το News & Events menu item Δημιουργήστε δύο νέα menu items «κάτω» από το News & Events, τα News (τύπου Category Blog, όλα τα άρθρα θα εμφανίζονται σε μία στήλη, χωρίς leading) και Events (τύπου Category List ) Δημιουργία menu items που δείχνουν σε λίστα άρθρων (συν.) Αλλάξτε τον τρόπο εμφάνισης της λίστας των Events Κρύψτε το Display # που εμφανίζεται πάνω δεξιά από τον πίνακα με τα Events Κρύψτε τις επικεφαλίδες του πίνακα Κρύψτε την ημερομηνία δημιουργίας των άρθρων, τον αριθμό των hits και τον συγγραφέα των άρθρων Τώρα θέλουμε να εμφανίζονται μια σειρά επιλεγμένων άρθρων (featured articles) των υποκατηγοριών News και Events όταν κάνουμε κλικ στο menu item News & Events Αλλάξτε τον τύπο του News & Events menu item σε Featured Articles, επιλέξτε τις κατηγορίες News & Events Events, News και Events Τα featured articles θα πρέπει να εμφανίζονται σε μία στήλη, χωρίς leading article Στο front end θα δείτε ότι η σελίδα News & Events είναι πλέον κενή Θα πρέπει να μεταβείτε στον Article Manager, να ταξινομήσετε τα άρθρα ως προς την κατηγορία που ανήκουν και να ορίσετε ως featured articles τα Major Donation Received και ArtWorks Program Starts Saturday, March 3 6

Τροποποίηση εμφάνισης featured articles του home page Τα δύο featured articles της σελίδας News & Events εμφανίζονται πλέον και στο home page Ρυθμίστε τον τρόπο εμφάνισης του Home page ώστε να εμφανίζει μόνο τα featured articles il που ανήκουν στις κατηγορίες News και Visiting i i Exhibits Τα featured articles του Home page θα πρέπει να εμφανίζονται σε μία στήλη, χωρίς leading article Παρατηρήστε τις αλλαγές στο front end (home page) Μεταβείτε στον Article Manager, εμφανίστε μόνο τα featured articles και αλλάξτε τη σειρά εμφάνισής τους ως εξής: (1) Current Exhibit: Siobhan Westhoff, (2) Upcoming Exhibit: Paul Shellmont: Bird Watching, (3) Major Donation Received και (4) ArtWorks Program Starts Saturday, March 3 Θα παρατηρήσετε ότι η αλλαγή στη σειρά εμφάνισης δεν θα έχει πραγματοποιηθεί στο home page Θα πρέπει να τροποποιήσετε κάποια επιπλέον ρύθμιση στο Home menu item για να πραγματοποιηθεί η αλλαγή Διαγραφή menu items Δημιουργήστε ένα νέο Single article menu item με τίτλο Trash me!! που να «δείχνει» σε οποιοδήποτε άρθρο Διαγράψτε το menu item που μόλις δημιουργήσατε Διαγράψτε το menu item που μόλις δημιουργήσατε Διαγράψτε οριστικά το menu item (διαγραφή και από το Trash) 7

Αλλαγή της θέσης εμφάνισης ενός μενού Θέλουμε να αλλάξουμε τη θέση εμφάνισης του Main Menu Μεταβείτε στο αντίστοιχο module Κρύψτε τον τίτλο Main Menu του μενού Δείτε τις διαθέσιμες θέσεις που υπάρχουν για την εμφάνιση του μενού (εμφανίστε μόνο τις επιλογές που σας δίνει το template που χρησιμοποιείτε: beez_20 ) Επιλέξτε την εμφάνιση του μενού στην κορυφή της σελίδας Παρατηρήστε τις αλλαγές και τη θέση όπου εμφανίζονται τα secondary menu items «κάτω» από το NEWS & EVENTS Δημιουργία νέου μενού για την εμφάνιση secondary menu items Κατ αρχάς κρύψτε την εμφάνιση των secondary menu items Δημιουργήστε ένα νέο module (με κρυμμένο τίτλο Left Menu ) στο οποίο θα εμφανίζονται τα δευτερεύοντα menu items Το νέο module θα εμφανίζεται στο αριστερό μέρος της οθόνης Συνεπώς, όταν θέλετε να διαχωρίσετε τα μενού πλοήγησης σε κύριο και δευτερεύον, δεν χρειάζεται να δημιουργήσετε νέο Menu αλλά νέο module 8

Δημιουργία δεύτερου μενού Ανοίξτε το privacy policy.txt αρχείο που σας δίνεται και δημιουργήστε ένα νέο άρθρο με τίτλο Privacy Policy το οποίο δεν θα καταχωρηθεί σε κάποια κατηγορία Δημιουργήστε ένα νέο menu με τίτλο Footer Menu και Menu type: footermenu Προσθέστε ένα νέο menu item στο Footer Menu που να δείχνει στο άρθρο Privacy Policy Το menu item δε θα φανεί παρά μόνο όταν συσχετίσετε το Footer Menu με ένα νέο module (ονομάστε το επίσης με τον κρυφό τίτλο Footer Menu ) και ρυθμίστε την εμφάνισή του στο κάτω μέρος της σελίδας (footer) 9

Εισαγωγή στον JCE editor Μέχρι τώρα έχουμε χρησιμοποιήσει τον προκαθορισμένο editor του Joomla! 2.5 (TinyMCE), ο οποίος έχει περιορισμένες δυνατότητες ως προς την ευχρηστία και λειτουργικότητα που συνήθως απαιτείται από τους πελάτες (τελικούς χρήστες/διαχειριστές του web site μας) Εδώ, θα διερευνήσουμε τις δυνατότητες που δίνει ένας εναλλακτικός Joomla! editor, ο JCE (Joomla! Content Editor) Εγκατάσταση του JCE Ο JCE είναι δωρεάν, αν και υπάρχουν εμπορικές επεκτάσεις του (extensions) που επιτρέπουν την ενσωμάτωση πιο προχωρημένων δυνατοτήτων (π.χ. μορφοποίησης εικόνων) Κατεβάστε το JCE 2.2.9.1 (Zip Archive) είτε από τη http://www.joomlacontenteditor.net/, είτε από τη σελίδα του εργαστηρίου του μαθήματος Όπως συμβαίνει με κάθε επέκταση 3 ου φορέα?(3 rd party extension), δεν χρειάζεται να αποσυμπιέσετε το zip file, αλλά μπορείτε να προχωρήσετε απευθείας στην εγκατάσταση: Extensions > Extensions Manager > Upload Package File Σε περίπτωση που η εγκατάσταση αποτύχει, δοκιμάσετε να αποσυμπιέσετε το zip fl file σε ένα folder (π.χ. jce )στο root\museum\tmp\ και να επιλέξετε λξ την επιλογή Install from Directory, δίνοντας το πλήρες path, π.χ. F:\usbwebserverv8\root\museum\tmp\jce Με την ολοκλήρωση της εγκατάστασης, μπορείτε να διαγράψετε το jce από το tmp folder 10

Ορισμός του JCE ως προκαθορισμένου editor Δηλώστε τον JCE ως τον προκαθορισμένο editor στο Joomla! site σας: Global Configuration > Default Editor Εφόσον η ρύθμιση δοθεί στο Global Configuration, τότε ο JCE θα γίνει ο προκαθορισμένος editor για όλους τους εγγεγραμμένους χρήστες του Joomla! site σας Υπάρχει, ωστόσο, η δυνατότητα μέσα από το User Manager, να οριστεί διαφορετικός προκαθορισμένος editor για κάθε χρήστη Ανοίξτε ένα οποιοδήποτε άρθρο από τον Article Manager για να δείτε πως μοιάζει η εργαλειοθήκη του JCE Δημιουργία εσωτερικού link Ανοίξτε το About Us άρθρο από τον Article Manager και κάνετε τη λέξη visual (2 η παράγραφος) να «δείχνει» στη σελίδα Permanent Collections (κάνοντας κλικ στο κατάλληλο εικονίδιο στην εργαλειοθήκη του JCE) Εφόσον υπάρχει κάποιο menu item που «δείχνει» στη σελίδα Permanent Collections, είναι καλύτερα να κάνουμε browse μέσω το Menu (αντί του Content ) ώστε να μη δημιουργηθεί διπλό link προς την ίδια σελίδα (αυτό όθα αξιολογούνταν αρνητικά στην ιεράρχηση του site από τις μηχανές αναζήτησης) Δοκιμάστε το link που δημιουργήσατε στο front end 11

Ανεβάζοντας PDF αρχεία Το ανέβασμα PDF αρχείων σε sites πρέπει να γίνεται λελογισμένα, όταν θέλουμε να δημοσιεύσουμε έγγραφα που πρέπει να εκτυπωθούν από τους επισκέπτες Τα pdf αρχεία δεν είναι «ορατά» από ΑμΕΑ, ενώ δεν γίνονται πολύ καλά indexed από μηχανές αναζήτησης Αλλάξτε το μέγιστο επιτρεπόμενο μέγεθος για uploaded αρχεία σε 2048 KB Components > JCE Editor > Profiles > Default > Editor Parameters > Filesystem > Uploaded file size (KB) Αν θέλετε να αλλάξετε το προκαθορισμένο μέγιστο μέγεθος αρχείου του server (συνήθως είναι 2048 KB), θα πρέπει να αλλάξετε τη σχετική ρύθμιση στο php.ini αρχείο Ανεβάζοντας PDF αρχεία (συν.) Δημιουργήστε ένα νέο folder στον οποίο θα ανεβαίνουν τα pdf αρχεία στο Media Manager (ο folder θα δημιουργηθεί από το Media Manager) Ανοίξτε το άρθρο Permanent Collections Στο τέλος της ενότητας Photography επικολλείστε το κείμενο που περιέχεται στο photography.txt που σας δίνεται Το κείμενο The History and Practice of the Art of Photograph να γίνει italic και επίσης link που να δείχνει στο photography.pdf pdf, που επίσης σας δίνεται (πατάτε το ειδικό εικονίδιο για τα links και στη συνέχεια το εικονίδιο Browse στα δεξιά του πεδίου URL, κάνετε κλικ στο folder pdf και πατάτε το εικονίδιο Upload (πάνω δεξιά) Το photography.pdf θα πρέπει να ανοίγει σε νέο παράθυρο (Target: Open in new window) 12

Page Breaks Τα page breaks χρησιμοποιούνται για να διαιρέσετε ένα άρθρο σε επιμέρους σελίδες Ανοίξτε το άρθρο Permanent Collections Προσθέστε ένα page break (χρησιμοποιώντας το ειδικό πλήκτρο του JCE) στο τέλος της πρώτης παραγράφου (με τίτλο και alias Paintings Επαναλάβετε το ίδιο στο τέλος κάθε ενότητας του άρθρου Δείτε το αποτέλεσμα στο front end Επεξεργαστείτε το plug in Content Pagebreak (Extensions > Plug in Manager) ώστε: Να εμφανιστεί ο τίτλος (Custom Article Index Heading) In this article πάνω από τους τίτλους των επιμέρους σελίδων Κρύψτε τα site title, article index heading και table of contents Αλλάξτε το Presentation Style σε Sliders ήσε Tabs και δείτε το αποτέλεσμα Κρατήστε το Sliders και για να αποφύγετε την επανάληψη των τίτλων των επιμέρους σελίδων, επεξεργαστείτε το άρθρο Permanent Collections διαγράφοντας τους τίτλους των ενοτήτων/σελίδων HTML filtering Για λόγους ασφαλείας, το Joomla! δεν επιτρέπει σε συγκεκριμένες ομάδες χρηστών (π.χ. εγγεγραμμένους χρήστες) να γράψουν html κώδικα (δηλαδή html tags) Αν το κάνουν, το Joomla! θα τις αφαιρέσει αυτόματα Η ρύθμιση που αφορά στο ποια html tags επιτρέπονται/απαγορεύονται ανά κατηγορία χρηστών γίνεται από το Global Configuration > Text Filters Π.χ. η επιλογή No HTML δεν επιτρέπει την εισαγωγή καμίας html ετικέτας (είναι καλή ιδέα για απλούς επισκέπτες ή εγγεγραμμένους χρήστες) ενώ η επιλογή No Filtering αφήνει απόλυτη ελευθερία (μόνο για τους super users στους οποίους έχουμε απόλυτη εμπιστοσύνη) 13

Προσθήκη YouTube videos σε άρθρα Ανοίξτε το youtube video link που σας δίνεται στο αρχείο video.txt Στη σελίδα του youtube, επιλέξτε Share > Embed και αντιγράψτε τον html κώδικα που εμφανίζεται και που είναι απαραίτητος για να ενσωματώσετε ένα youtubevideo σε μια html σελίδα Κάνετε την ακόλουθη αλλαγή στη ρύθμιση ώστε να σας επιτραπεί να προσθέτετε <iframe> ετικέτες: Components > JCE Editor > Plugin Parameters > Media Support > Allow IFrames: Yes Ανοίξτε το άρθρο Permanent Collections, προσθέστε μια νέα γραμμή στο τέλος της ενότητας Photography, ενεργοποιήστε την επεξεργασία html κώδικα πατώντας το [Toggle Editor] link και επικολλήστε τον html κώδικα που αντιγράψετε από τη σελίδα του youtube!! Έχετε υπόψη πως η ενσωμάτωση youtube videos σε σελίδες σας είναι εφικτή ακόμα και αν δεν έχετε εγκαταστήσει τον JCE editor. Τότε όμως, θα πρέπει να εγκαταστήστε κάποιο επιπλέον κατάλληλο plug in. Προχωρημένη μορφοποίηση εικόνων Συχνά θέλουμε να εμφανίσουμε μια λίστα άρθρων με read more links και ένα thumbnail να συνοδεύει καθένα από αυτά και επιλέγοντας το read more να εμφανίζεται η αντίστοιχη εικόνα σε πλήρη ανάλυση Ανεβάστε μέσω του Mdi Media Manager τις 6 εικόνες που σας δίνονται Ανοίξτε τον Article Manager, ταξινομήστε τα άρθρα ως προς την κατηγορία που ανήκουν και επεξεργαστείτε τα 3 άρθρα που ανήκουν στην κατηγορία News, ανοίγοντας το Images and links slider Στο άρθρο New Children's ArtWorks Program Announced ανεβάστε ως Intro Image το child_painting_small.jpg με alt text A child enrolled in the Artworks program. και ως Full article image το child_painting_large.jpg i l με το ίδιο alt text. t Ορίστε ως Link A το πρώτο link που σας δίνεται στο links.txt Επαναλάβατε την ίδια διαδικασία για τα άλλα δύο άρθρα της κατηγορίας News 14