Συστήματα Διαχείρισης Περιεχομένου στον Παγκόσμιο Ιστό Διάλεξη #5 η : Εισαγωγή στο web CMS Joomla!. Εγκατάσταση του Joomla! Εισαγωγή στη διαχείριση άρθρων. Γαβαλάς Δαμιανός dgavalas@aegean.gr Τι είναι ένα σύστημα διαχείρισης περιεχομένου; Ένα σύστημα διαχείρισης περιεχομένου (content management system, CMS) είναι μια συλλογή διαδικασιών που χρησιμοποιούνται για τη διαχείριση της ροής εργασίας σε ένα συνεργατικό περιβάλλον. Αυτές οι διαδικασίες μπορούν να είναι χειροκίνητες ή βασισμένες σε Η/Υ. Τυπικά είναι μια εφαρμογή λογισμικού που βοηθάει στην οργάνωση και παρουσίαση περιεχομένου σε ένα πληροφοριακό σύστημα 1
Τι είναι ένα σύστημα διαχείρισης περιεχομένου; Οι διαδικασίες ενός CMS είναι σχεδιασμένες έτσι ώστε: Να επιτρέψουν σε μεγάλο αριθμό ανθρώπων να συνεισφέρουν και να μοιραστούν αποθηκευμένα δεδομένα Να ελεγχθεί η πρόσβαση στα δεδομένα, βάσει των ρόλων των χρηστών (να προσδιοριστεί ποια πληροφορία μπορεί να προσπελάσει/επεξεργαστεί/δημοσιεύσει ένας χρήστης ή μια ομάδα χρηστών) Να βοηθήσει στην εύκολη αποθήκευση και ανάκτηση δεδομένων Να μειώσει επαναλαμβανόμενη διπλή είσοδο Να βελτιώσει την επικοινωνία μεταξύ χρηστών Κατηγορίες CMS Enterprise content management systems Διαχειρίζεται περιεχόμενο, έγγραφα, και εγγραφές σχετικές με τις οργανωτικές δομές μιας επιχείρησης Document management systems Διαχείριση και οργάνωση εγγράφων Learning content management system Διαχείριση προγραμμάτων εκπαίδευσης, τάξεων, online events, προγραμμάτων ηλεκτρονικής ήςμάθησης, ης, εκπαιδευτικού περιεχομένου Web content management systems Διευκολύνει την οργάνωση, την δημιουργία και τη διαχείριση των εγγράφων και άλλων περιεχομένων σε μια ιστοσελίδα 2
Web CMS Τα περισσότερα CMS είναι απλά στη χρήση και δεν απαιτούν προχωρημένες δεξιότητες σε Η/Υ παρέχουν ρχ εργαλεία σε χρήστες ςμε μικρές ρςτεχνικές ςγνώσεις σε γλώσσες σήμανσης ή προγραμματισμό να δημιουργήσουν και να διαχειριστούν περιεχόμενο με σχετική ευκολία Τα περισσότερα συστήματα χρησιμοποιούν μια βάση δεδομένων για την αποθήκευση και ένα επίπεδο παρουσίασης για την εμφάνιση περιεχομένου στους επισκέπτες του website βάσει ενός προτύπου (template) Ta web CMS διαφέρουν από τα εργαλεία συγγραφής ιστοσελίδων (π.χ. το Microsoft FrontPage ή το Adobe Dreamweaver). Ένα CMS επιτρέπει σε χρήστες χωρίς τεχνικές γνώσεις να πραγματοποιήσουν αλλαγές σε υφιστάμενα websites με λίγη ή καθόλου εκπαίδευση Κύριοι στόχοι των Web CMS Προσδιορισμός χρηστών, ρόλων χρηστών και επιπέδων πρόσβασης στο site Οργάνωση περιεχομένου σε ενότητες και κατηγορίες για να διευκολύνεται η χρήση και επαναχρησιμοποίησή τους Δημιουργία και ορισμός απλών ροών εργασίας (workflows) για δημιουργία και ανάπτυξη/δημοσίευση περιεχομένου Έλεγχος εκδόσεων (version control) του περιεχομένου Ανάπτυξη προτύπων (design templates) ώστε ένα δημοσιευμένο site να αποκτήσει πιο ενδιαφέρον look andfeel Παροχή εξελιγμένων εργαλείων για προσαρμογή της λειτουργικότητας του site Σήμερα υπάρχουν εκατοντάδες διαθέσιμα web CMS, γενικού σκοπού ή εξειδικευμένα, με εμπορική άδεια ή ανοικτού κώδικα (δωρεάν) 3
Joomla! To Joomla! είναι ένα CMS βασισμένο σε τεχνολογία βάσεων δεδομένων Το περιεχόμενο των sites που κατασκευάζονται με Joomla! είναι κατά βάση αποθηκευμένο σε ΒΔ και όχι σε html αρχεία Το Joomla! πηγαίνει πέρα από το να παρουσιάζει σελίδες περιοχομένου Δίνει τη δυνατότητα να προσθέσεις στο site σου λειτουργίες eshop (π.χ. καλάθια αγορών, φόρμες για αποστολή δδ δεδομένων, και γενικά οτιδήποτε άλλο μπορεί να προγραμματιστεί Τέτοιου είδους λειτουργικότητα (ονομάζονται επεκτάσεις extensions) διανέμεται σε zip files, των οποίων το περιεχόμενο απλά ανεβάζεις στο site σου Πολλά extensions προσφέρονται ήδη με την εγκατάσταση Joomla! Για τις περισσότερες λειτουργίες του, δεν απαιτεί προγραμματισμό Είναι γραμμένο σε PHP, αποθηκεύει δεδομένα σε MySQL και περιλαμβάνει χαρακτηριστικά όπως η cache των σελίδων, RSS feeds, printable εκδόσεις των σελίδων, blogs, δημοσκοπήσεις, αναζήτηση. Μέσα στο πρώτο έτος της κυκλοφορίας του, έγινε λήψη πάνω από 2,5 εκατομμύρια φορές. Πάνω από 5.000 δωρεάν και εμπορικά plug ins είναι διαθέσιμα για το Joomla! 4
Καταγράφοντας τους στόχους του οργανισμού και του website Στα επόμενα εργαστήρια θα δημιουργήσουμε βήμα προςβήμα το site ενός μουσείου σύγχρονης τέχνης Σχεδιασμός στόχων του website: Ποιοι είναι οι στόχοι του οργανισμού (εταιρίας, μη κερδοσκοπικού οργανισμού, σχολείου, προσωπικού site, ) Το website θα είναι αντανάκλαση του οργανισμού Ποιος ο λόγος ύπαρξης του site; Ποιον θα εξυπηρετεί; Τι προσπαθεί να επιτύχει; Στόχοι του οργανισμού Στόχοι ενός περιφερειακού μουσείου μοντέρνας τέχνης: Στην περίπτωση του μουσείου, στόχος του οργανισμού είναι να εξυπηρετήσει τους πολίτες της περιοχής εκθέτοντας και προβάλλοντας το έργο καταξιωμένων και ανερχόμενων καλλιτεχνών. Στοχεύει επίσης στο να εμπλέξει παιδιά και ενηλίκους της κοινότητας γνωρίζοντάς τους με το χώρο της μοντέρνας τέχνης. 5
Στόχοι του website ενός μουσείου σύγχρονης τέχνης Χρήστες του website: Ποιοι είναι; Τι ζητούν από το website; Σε τι περιβάλλον βρίσκονται όταν ψάχνουν για αυτό το website; Οι δυνητικοί επισκέπτες του μουσείου θέλουν να μάθουν τις ώρες λειτουργίας του μουσείου, που βρίσκεται, την τιμή εισιτηρίου, τι είδους μόνιμες και προσωρινές συλλογές εκθέτονται, τελευταία νέα και προγραμματισμένες εκδηλώσεις Οι εθελοντές θέλουν να γνωρίζουν τις βάρδιες τους, να ενημερώνονται για ειδικά προνόμια, κλπ Οι περισσότεροι επισκέπτες του website θα είναι χρήστες PC/Mac, αρκετοί ωστόσο θα χρησιμοποιούν κινητά τηλέφωνα ή ταμπλέτες (κυρίως αν αναζητούν οδηγίες πλοήγησης και ώρες λειτουργίας) Οι περισσότεροι επισκέπτες είναι αγγλόφωνοι αλλά αναμένεται να υπάρχουν και αρκετοί γαλλόφωνοι Πως δημιουργούμε ένα Joomla! site 1. Δημιουργούμε το website τοπικά (localhost, με εγκατεστημένο Apache/MySQL/PHP) και ολοκληρώνοντας ανεβάζουμε (upload) το site σε έναν web server + κανένας δε βλέπει το website πριν ολοκληρωθεί + Δεν πληρώνω για το web hosting, όσο δεν είναι απαραίτητο + δεν απαιτείται σύνδεση στο Internet O πελάτης δε θα μπορεί να παρέμβει πριν ολοκληρώσετε χρειάζεται προσοχή στις ρυθμίσεις κατά το uploading στον web server ώστε να το website να λειτουργεί σωστά 6
Πως δημιουργούμε ένα Joomla! Site (συν.) 2. Εγκαθιστούμε εξαρχής το Joomla! site σε ένα απομακρυσμένο web host και ο σχεδιασμός γίνεται online + δεν απαιτείται εγκατάσταση ειδικού λογισμικού (Apache/MySQL/PHP) + Δεν πληρώνω για το web hosting, όσο δεν είναι απαραίτητο + Η εγκατάσταση γίνεται μία μόνο φορά + Υπάρχει δυνατότητα να αποτραπεί η πρόσβαση μη εξουσιοδοτημένων επισκεπτών στο site μέχρι αυτό να ολοκληρωθεί λ + Μπορεί να υπάρξει συνεργασία με τον πελάτη κατά τη διάρκεια της ανάπτυξης Πληρώνεις για το web hosting για όσο χρόνο διαρκεί η ανάπτυξη Απαιτείται γρήγορη σύνδεση στο Internet Επιλογή κατάλληλου web host Υποστήριξη των απαιτήσεων της έκδοσης του Joomla! που εγκαθιστώ: http://www.joomla.org/technical requirements.html Ο web host θα πρέπει να εκτελεί συχνά αποθήκευση εφεδρικών αρχείων (δηλ. να κρατάει backup) Κάποιοι προτεινόμενοι web hosts: http://resources.joomla.org/directory/supportservices/hosting.html 7
Εγκατάσταση Joomla! 2.5.7 http://www.joomla.org/ Κατεβάστε το Joomla_2.5.7.zip από τη σελίδα του μαθήματος Εγκατάσταση Joomla! 2.5.7 Κατεβάζουμε το Joomla_2.5.7 Stable Full_Package.zip Αποσυμπιέζουμε το περιεχόμενο του zip αρχείου στον δημόσιο κατάλογο (public directory) του usbwebserver, το root, συγκεκριμένα σε ένα folder museum που δημιουργούμε Για να μη χάσετε τα αρχεία που έχετε ήδη αποθηκεύσει στο root, δημιουργήστε στο root ένα folder lab και μετακινήστε τα όλα εκεί, πριν ξεκινήσετε την αποσυμπίεση Μετά την αποσυμπίεση, και έχοντας ήδη usbwebserver να τρέχει (δηλαδή τον apache web server, την php engine και το mysql server), μπορούμε ήδη να ανοίξουμε την κεντρική σελίδα του Joomla! http://localhost:8080/museum/ Περνάμε τα 7 καθορισμένα βήματα για να ολοκληρώσουμε την εγκατάσταση 8
Βήμα 1 ο : επιλογή γλώσσας Βήμα 2 ο : έλεγχος προεγκατάστασης 9
Βήμα 3 ο : άδεια χρήσης Βήμα 4 ο : διαμόρφωση ΒΔ Database type: Mysqli Host name: localhost Username: root Password: usbw Database name: museum Table prefix:. 10
Βήμα 5 ο : διαμόρφωση FTP Βήμα 6 ο : διαμόρφωση Admin username: admin Admin password: admin Μην εισάγετε δείγμα δεδομένων στη ΒΔ 11
Βήμα 7 ο : ολοκλήρωση εγκατάστασης Διαγράψτε το installation folder (βρίσκεται στο root folder) Εγκατάσταση Joomla! 2.5.7 Η εγκατάσταση θα πρέπει να έχει ολοκληρωθεί επιτυχώς FrontEnd Default site (χωρίς sample data): http://localhost:8080/museum/ BackEnd Admin site (username: admin, password: admin): http://localhost:8080/museum/admi nistrator/ 12
Δημιουργία ΒΔ Προσπελάστε τη διεύθυνση http://localhost:8080/phpmyadmin/ και παρατηρήστε ότι έχει ήδη δημιουργηθεί ηβδ joomla με πλήθος πινάκων Μια ματιά στο global configuration Site Offline: χρήσιμο αν σχεδιάζετε το site online (για να το προστατεύετε από μη εξουσιοδοτημένους χρήστες) C h θ ώ θ ό Captcha: θα μειώσει τον αριθμό των spam email που θα λαμβάνετε από contact forms 13
Προσθήκη metatags Ανοίξτε το αρχείο metainfo.txt και αντιγράψτε τα στοιχεία που συμπεριλαμβάνει στα keywords και description fields meta tags: χρήσιμα στις μηχανές αναζήτησης Index: επιτρέπει σε μηχανές αναζήτησης να «καταλογοποιήσουν» το website follow: η «αράχνη» της μηχανής θα ακολουθήσει τα links του website SEO settings και page titles Συμπεριλάβετε το όνομα του site στην αρχή του τίτλου κάθε σελίδας Κάνετε refresh στο front end για να δείτε τις αλλαγές Αναζητήστε τα meta tags στον κώδικα της αρχικής σελίδας SEO settings Προσαρμογή τίτλων σελίδων 14
Διαδικασία δημιουργίας περιεχομένου Δημιουργία κατηγορίας περιεχομένου (category), εφόσον δεν υπάρχει ήδη Δημιουργία ενός άρθρου (article) που να ανήκει σε αυτή την κατηγορία Δημιουργία ενός link (που θα συμπεριλαμβάνεται σε ένα menu) που να «δείχνει» στο άρθρο Εφόσον δεν έχει δημιουργηθεί menu, θα πρέπει να δημιουργηθεί πριν από το link Έχουν καταργηθεί οι ενότητες (sections) που ίσχυαν μέχρι την έκδοση Joomla! 1.6 15
Δημιουργία κατηγοριών Χρησιμοποιήστε το αρχείο site map.txt που σας δίνεται για να δημιουργήσετε κατηγορίες στο website σας Τελικά θα έχουμε δύο μενού (Main Menu, Footer menu) Κύριες κατηγορίες του Main Menu : About, News & Events, Collections, Links, Contact Us Υποκατηγορίες της κύριας κατηγορίας News & Events News, Events Άρθρα της υποκατηγορίας News : New Cafι Menu, Major Donation Received, New Children's ArtWorks Program Announced Δημιουργία άρθρων Χρησιμοποιήστε το αρχείο about.txt που σας δίνεται για να δημιουργήσετε τρία άρθρα που θα ανήκουν στην κατηγορία About Κάνετε refresh στο front end και παρατηρήσετε κατά πόσο υπάρχουν αλλαγές 16
Επεξεργασία/μορφοποίηση άρθρων Ανοίξτε (edit) το About us άρθρο και αλλάξτε τη μορφοποίηση των δύο τίτλων/επικεφαλίδων του άρθρου Η μορφοποίηση θα πρέπει να κάνει τους τίτλους έντονους (bold) αλλά να είναι και κατάλληλη για indexing από τις μηχανές αναζήτησης Ποια θα είναι η κατάλληλη μορφοποίηση; Πως μπορείτε να «πειράξετε» τον html κώδικα του άρθρου (μέσα από τον text editor του Joomla!); Δείτε και το αποτέλεσμα που έχει το πάτημα του Toggle editor button Επαυξήστε τις δυνατότητες του editor των άρθρων σας: Extensions >Plug in Manager >κλικ στο Editor TinyMCE > Functionality: Extended Ποια η χρησιμότητα του νέου Paste from Word button; Δημιουργία links προς εξωτερικά sites Ανοίξτε το άρθρο About us και κάνετε τη λέξη Ventura να λειτουργεί ως σύνδεσμος προς τη διεύθυνση http://www.cityofventura.net/ net/ Το site θα πρέπει να ανοίγει σε νέο παράθυρο 17
Εισαγωγή εικόνων Ανοίξτε το media manager και ενεργοποιήστε τον flash uploader (ώστε να μπορούμε να ανεβάζουμε περισσότερα από ένα πολυμεσικά αρχεία στο site μας) Ανεβάστε (μέσω του media manager) τις εικόνες samoca_bldg.jpg και volunteer.jpg που σας δίνονται Προσθέστε την πρώτη εικόνα στην κορυφή του άρθρου About us Στην πρώτη δώστε ένα Image description The SAMOCA building. Γιατί είναι χρήσιμη η περιγραφή; Προσθέστε τη δεύτερη εικόνα στην κορυφή του άρθρου (με περιγραφή You could volunteer at SAMOCA. Read more Δημιουργήστε ένα νέο άρθρο New Cafe Menu (θα ενταχθεί στην κατηγορία News ) Για το κείμενο του άρθρου χρησιμοποιήστε το κείμενο που σας δίνεται στο news.txt (τις πρώτες 3 παραγράφους) «Σπάστε» την εμφάνιση του κειμένου του άρθρου εισάγοντα ς ένα read more link στο τέλος της πρώτης παραγράφου Δημιουργήστε (αντίστοιχα χ με το παραπάνω) ) δύο ακόμα άρθρα Major Donation Received και New Children's ArtWorks Program Announced στην ίδια κατηγορία, χρησιμοποιώντας αντίστοιχα το read more 18
Featured articles Τα featured articles είναι ο μοναδικός τύπος άρθρων που μπορούν να εμφανιστούν στην κεντρική σελίδα του site χωρίς την προσθήκη κάποιου menu link Ανεβάστε όλες τις υπόλοιπες εικόνες που σας δίνονται μέσω του media manager Ανοίξτε το exhibits.txt αρχείο που σας δίνεται και δημιουργήστε ένα νέο άρθρο Current Exhibit: Siobhan Westhoff (στην κατηγορία Visiting exhibits ), με read more μεταξύ των δύο παραγράφων του και την εικόνα exhibits westhoff.jpg στην αρχή του Αλλάξτε το άρθρο σε featured Διαπιστώστε τις αλλαγές στην κεντρική σελίδα Επαναλάβατε τη διαδικασία για το άρθρο Upcoming Exhibit: Paul Shellmont: Bird Watching Ομοίως το Current Exhibits άρθρο (στην κατηγορία Collections) Νέα articles Προσθέστε και τα παρακάτω άρθρα χωρίς να τα δηλώσετε ως featured Current Exhibits άρθρο (στην κατηγορία Collections ) Permanent Collections (στην κατηγορία Permanent Collections ) Προσθέστε και τις κατάλληλες εικόνες 19
Διαγραφή άρθρων Δημιουργήστε ένα νέο άρθρο Trash me Αρχικά προσπαθήστε να αλλάξετε το status του από published σε unpublished (τι έννοια έχει αυτό;) Στη συνέχεια διαγράψτε το τοποθετώντας το στο trash Επαναφέρατε το διαγραμμένο άρθρο Θα κάνετε restore και εν συνεχεία θα αλλάξετε το status του σε published 20
Αντιγραφή Joomla! site Για να «αντιγράψετε» ένα Joomla! site (π.χ. για να αντιγράψετε το site του διδάσκοντος) ακολουθείτε την παρακάτω διαδικασία: Ανοίγετε το phpmyadmin Διαγράφετε (ή κρατάτε back up) τη ΒΔ museum Εισάγετε (import) τη ΒΔ (sql commands: *.sql αρχείο) του site που θέλετε να αντιγράψετε Εισάγετε «χειροκίνητα» τα γραφικά που χρησιμοποιούνται στο site Κάνετε τις απαραίτητες αλλαγές στο αρχείο root/museum/configuration.php αλλάζοντας την τιμή της ρύθμισης $dbprefix αντικαθιστώντας το 'xxx' με το prefix των πινάκων της ΒΔ που κάνατε import: $dbprefix = 'xxx'; Επανεκινείτε (restart) τον web server Ανέβασμα Joomla! site σε απομακρυσμένο server Για να «ανεβάσετε» ένα ολοκληρωμένο Joomla! site σε έναν απομακρυσμένο (remote) server ακολουθείτε την ίδια διαδικασία και επιπλέον: Ανεβάζετε όλο το /museum folder (μέσω ftp) στον απομακρυσμένο server Κάνετε τις απαραίτητες αλλαγές στο αρχείο root/museum/configuration.php: $host = 'the_server_domain_name'; $user = 'the_db_username ; $db = 'the_databasename'; $password = 'the_db_password'; $live_site = ''; // is usually empty. $dbprefix = 'xxx ; 21