Γαβαλάς Δαμιανός

Συστήματα Διαχείρισης Περιεχομένου στον Παγκόσμιο Ιστό Διάλεξη #8 η : Components. Templates. Δημιουργία νέων templates. Γαβαλάς Δαμιανός dgavalas@aegean.gr 1

Εισαγωγή στα components Πέραν των λειτουργικών μονάδων (modules), τα συστατικά (components) αποτελούν έναν ακόμα τύπο επέκτασης (extension) που προσφέρει το Joomla! Μέχρι τώρα έχουμε ήδη δουλέψει με components: components περιεχομένου (content) που εμφανίζονται στο κύριο τμήμα της σελίδας Σε κάθε σελίδα μπορεί να χρησιμοποιηθεί ένα μόνο component αλλά πολλά modules Τα components απαιτούν διαμόρφωση (configuration) και πρέπει να διασυνδεθούν με το menu ώστε να εμφανιστούν (το καθένα έχει διαφορετικές επιλογές διαμόρφωσης και συνδέεται με το μενού μέσω διαφορετικών τρόπων) ) Αντίθετα, στα modules ανατίθεται μια συγκεκριμένη θέση της σελίδας Ένα component ενδέχεται να συσχετίζεται με κάποιο module Π.χ. για την ενσωμάτωση λειτουργικότητας αναζήτησης (search) ρυθμίζουμε τις απαραίτητες επιλογές του Search component, αλλά η θέση στην οποία η λειτουργικότητα αυτή εμφανίζεται, εξαρτάται από το Search module Φόρμες επικοινωνίας (contact forms) Οι φόρμες επικοινωνίας παρέχουν έναν τρόπο επικοινωνίας του επισκέπτη με το διαχειριστή ενός site ανεξαρτήτως τεχνολογιών/browser που χρησιμοποιεί ο επισκέπτης Για να δημιουργήσουμε μια φόρμα επικοινωνίας πρέπει πρώτα να δημιουργήσουμε την αντίστοιχη κατηγορία (contact category), έπειτα την φόρμα, και τέλος να τη συνδέσουμε στο μενού Δημιουργήστε μια νέα κατηγορία για φόρμες επικοινωνίας (Components > Contacts > Categories > New) με τίτλο General Contact Information 2

Φόρμες επικοινωνίας (contact forms) Δημιουργήστε μια φόρμα επικοινωνίας (Components > Contacts > Contacts > New) που να ανήκει στην παραπάνω κατηγορία, με τίτλο SAMOCA Κάνετε τις απαραίτητες ρυθμίσεις ώστε στη φόρμα επικοινωνίας να φαίνονται το email (info@samoca.org) και τα άλλα στοιχεία επικοινωνίας (address: 123 Main Str., city: Ventura, State: CA, ZIP code: 93001, Telephone: 805 555 5555) H email διεύθυνση είναι το μόνο απαιτούμενο στοιχείο από τα παραπάνω Αντιγράψτε το κυρίως κείμενο του component από το contact.txt που σας δίνεται Φόρμες επικοινωνίας (contact forms) Δημιουργήστε ένα νέο menu item (τύπου Single contact ) που να «δείχνει» στο contact form component, με τίτλο Contact Us Δείτε τις αλλαγές στο front end Επεξεργαστείτε το Contact Us menu item και αλλάξτε το display format του σε κανονικό (plain) αντί του προκαθορισμένου slider Κάνετε το Directions menu item να είναι δευτερεύοντος επιπέδου, κάτω από το Contact Us (δηλαδή να «ανήκει» σε αυτό) 3

Captcha To Captcha είναι ένα πεδίο που προϋποθέτει ανθρώπινη νοημοσύνη για να συμπληρωθεί, αποτρέποντας spammers από το να συμπληρώνουν και να στέλνουν αυτοματοποιημένα contact forms. Το captcha διατίθεται ως Joomla! plug in Ανοίξτε τις ρυθμίσεις του captcha plugin: Όπως θα διαβάσετε στις σχετικές οδηγίες, πρέπει να επισκεφτείτε τη σελίδα http://www.google.com/recaptcha για να δημιουργήστε ένα ζεύγος δημόσιου/ιδιωτικού κλειδιού (public/private key): κάνετε sign up/sing in, δηλώσετε ως domain samoca.org, org τσεκάρετε το Enable this key on all domains (global key), αντιγράψτε τα public/private keys που θα δημιουργηθούν στα κατάλληλα πεδία του ReCaptcha plug in Ανοίξετε το Global Configuration και δηλώστε το Captcha ReCaptcha ως το προκαθορισμένο Captcha plug in που θα χρησιμοποιείτε από τα contact forms του website σας Contact list Έστω ότι θέλουμε να δημιουργήσουμε διαφορετικά contact forms που να απευθύνονται σε διαφορετικά πρόσωπα/στελέχη του μουσείου Δημιουργήστε 3 νέα contact forms με βάση τα στοιχεία που σας δίνονται στο contact_list.txt (σε κάθε μία από τις 3 σειρές σας δίνεται το Name, Position και Email address., αντίστοιχα Όλα θα ανήκουν στην κατηγορία General Contact Information Εισάγετε και την αντίστοιχη εικόνα από τις 3 που επίσης σας δίνονται Τροποποιήστε τον τύπο του Contact Us menu item σε List Contacts in a Category (ρυθμίστε και την κατηγορία) Δείτε τις αλλαγές στο front end και: Κρύψτε τις στήλες Suburb, State, Country Αλλάξτε τον τίτλο του SAMOCA contact form σε General contact, δηλώνοντας ως Position: Contact us with general requests 4

Weblinks Τα περισσότερα sites περιλαμβάνουν μια σελίδα links με συνδέσμους προς εξωτερικά συναφή sites (π.χ. sites άλλων μουσείων, στην περίπτωσή μας) Ανοίξτε το αρχείο web links.txt που σας δίνεται και δημιουργήστε μια κατηγορία από weblinks (Components > Weblinks > Categories) με τίτλο Museums και περιγραφή ργρ We love favorites. Αντίστοιχα, δημιουργήστε την κατηγορία Things to Do in Our Area Δημιουργήστε τώρα 6 web links (Components > Weblinks > Links) που να ανήκουν στις παραπάνω κατηγορίες, π.χ. το πρώτο έχει τίτλο MassMOCA Art και δείχνει στη διεύθυνση http://www.massmoca.org/ Τώρα, δημιουργήστε ένα link (menu item στο main menu) προς τα weblinks μας To menu item θα είναι τύπου List All Web Link Categories, θα έχει τίτλο Links Δείτε τις αλλαγές στο front end Υπάρχει ένα bug στο Joomla! Για να το διορθώσετε επιλέξτε Components > Weblinks >Options > Categories, κάνετε Hide τα Subcategories Descriptions και # Web links, αποθηκεύστε, κάντε Show ξανά μόνο το Subcategories Descriptions και ξανααπαθηκεύστε. Δείτε τις νέες αλλαγές στο front end. Στα Options > List Layouts, μπορείτε κρύψετε το Display # και τον αριθμό hits Στα Options > Weblink απενεργοποιήστε την μέτρηση αριθμού clicks και χρησιμοποιήστε το Web Link Only icon Ανακατεύθυνση (redirect) Συχνά, εξωτερικά ή εσωτερικά links προς σελίδες του site μας καθίστανται «σπασμένα» (broken links) καθώς τα URLs των σελίδων στις οποίες «δείχνουν» αλλάζουν Σε αυτή την περίπτωση είναι χρήσιμο να ανακατευθύνουμε τους επισκέπτες μας προς το τρέχον (ενεργό) URL της σελίδας που θέλουν να επισκεφτούν Πηγαίνετε στο front end, αλλάξτε το URL μιας σελίδας (π.χ. http://localhost:8080/museum/index.php/dog και πατήστε enter τι βλέπετε; Χρησιμοποιήστε το Redirect component του Joomla! για να ανακατευθύνετε την κίνηση από το παραπάνω url προς τη σελίδα About 5

Smart search To Smart search είναι μια νέα προσθήκη στο παραδοσιακό search component του Joomla! Πριν το χρησιμοποιήστε ενεργοποιήστε το (enable) από τον Plug in manager Στη συνέχεια επιλέξτε Components > Smart search > Index ώστε το smart search component να αναλύσει & καταλογοποιήσει (index) όλα τα περιεχόμενα του site σας Δημιουργήστε ένα νέο module τύπου Smart Search Module, με κρυμμένο τίτλο Search, στη θέση position 0 Δοκιμάστε στο front end τις διαφορές του smart search με το «παραδοσιακό» search Στο τέλος αφαιρέστε το «παραδοσιακό» search από το site σας 6

Εισαγωγή στα templates Τα πρότυπα (templates) προδιαγράφουν τον όλο σχεδιασμό και εμφάνιση του περιεχομένου του site σας (του front end αλλά και του back end) Υπάρχουν πολλά templates δωρεάν διαθέσιμα, άλλα που μπορούν να αγορασθούν, ενώ υπάρχει φυσικά και η δυνατότητα να δημιουργήσει κανείς ένα δικό του template Χρησιμοποιήστε τον Template manager για να αλλάξετε το front end template από το προκαθορισμένο Beez_20 σε Beez5 Κάνετε το ίδιο με το administrator template: χρησιμοποιήστε το Hathor Default template Κάνετε τις απαραίτητες ρυθμίσεις ώστε το site να επανέλθει στο Beez_20 και μόνο οι About us και News & Events σελίδες να ακολουθούν το Beez5 template Αυτό είναι, βέβαια, πολύ κακή σχεδιαστική πρακτική, οπότε επανέλθετε στις αρχικές σας ρυθμίσεις Τροποποίηση ρυθμίσεων ενός Template Θέλουμε να παρέμβουμε στο beez2 template ώστε να το προσαρμόσουμε στο πλαίσιο του μουσείου SAMOCA Δημιουργήστε ένα αντίγραφό του (κάνοντας check και επιλέγοντας Duplicate) και ορίστε το ως default template Επεξεργαστείτε το και αλλάξετε τα Template colour: Nature, Site title: San Angelico Museum of Contemporary Art, Site description: Art for a New World. Επίσης, αφαιρέστε το λογότυπο Δημιουργήστε ένα νέο αντίγραφο του προηγούμενου template, δώστε του τίτλο SAMOCA Volunteer page, αναθέστε το μόνο στη σελίδα Volunteer With Us και αλλάξτε του την περιγραφή σε The Art of Helping Τέλος, αλλάξτε τον τίτλο του Beez2 Default (2) template σε SAMOCA default 7

Template masters Επιλέξτε Extensions > Template manager > Templates και πατήστε στο Preview κάποιου από τα διαθέσιμα template masters Κάνετε το ίδιο με το Details and Files link: σας δείχνει τα css αρχεία που σχετίζονται με το συγκεκριμένο template καθώς και τα master files Πατήστε στο Edit main page template link Δοκιμάστε να επεξεργαστείτε το css αρχείο που δίνει το Nature look&feel και αλλάξτε το χρώμα του background στο κύριο σώμα (body) της σελίδας από λευκό σε #66FFFF Δείτε τις αλλαγές και επαναφέρατε την αρχική ρύθμιση Χρήση δωρεάν Joomla! templates Υπάρχουν πολλά sites που προωθούν την πώληση Joomla! templates (πολλοί θεωρούν ότι «αξίζει» να αγοράσει κανείς ένα template) http://www.rockettheme.com/ http://www.joomlabamboo.com/ http://www.joomlashack.com/ Κατεβάστε και εγκαταστήστε το δωρεάν Optimus Joomla Template από το joomlashack.com και δηλώστε το ως το df default template t του site σας Στο τέλος επαναφέρατε το SAMOCA default template Προσοχή! Είναι σημαντικό το template σας να υποστηρίζει mobile browsers (είτε να προσαρμόζει το σχεδιασμό της σελίδας στην ανάλυση της κινητής συσκευής είτε να διαθέτει ένα ξεχωριστό mobile template) 8

Joomla! template designer tools Υπάρχουν πολλά διαθέσιμα εργαλεία που κάνουν εύκολο το σχεδιασμό νέων Joomla! templates, π.χ. Joomla! extensions που λειτουργούν ως template designers: http://extensions.joomla.org/extensions/tools/designtools Artisteer (εμπορικό εργαλείο) : http://www.artisteer.com/ 9

Δημιουργία νέων templates στο Joomla! Αν αναζητήσετε στο google έτοιμα Joomla! πρότυπα (templates), θα βρείτε δεκάδες sites που διαθέτουν έτοιμα templates και χιλιάδες επιλογές διαθέσιμων templates Ωστόσο αυτά τα templates δε θα είναι ποτέ τέλεια, δε θα βρείτε δηλαδή ποτέ αυτό που ακριβώς αναζητάτε Είναι πάντοτε πιο ενδιαφέρον, δημιουργικό και με καλύτερο αποτέλεσμα όταν δημιουργείτε εξαρχής ένα νέο template Τι θα χρειαστούμε Ένα εργαλείο για την επεξεργασία html/css/xml Adobe Dreamweaver Ένα εργαλείο για την επεξεργασία γραφικών Adobe Photoshop Μια πρόσφατη έκδοση του Firefox με εγκατεστημένο το web developers toolbar https://addons.mozilla.org/en us/firefox/addon/webdeveloper/ Αφού την εγκαταστήσετε, πειραματιστείτε με τις λειτουργίες και δυνατότητες που παρέχει 10

Νέα εγκατάσταση του Joomla! Κάνετε μία «φρέσκια» εγκατάσταση του Joomla! Αποσυμπιέστε τα αρχεία του zip Joomla! σε ένα νέο folder ChocolateBliss κάτω από το root folder Ξεκινήστε την εγκατάσταση από τη σελίδα http://localhost:8080/chocolatebliss/, ακολουθώντας τα βήματα Ρυθμίσεις για τη βάση δεδομένων: username/password: root/usbw, όνομα ΒΔ: chocolate Site Name: Bliss No. 5 Chocolate Αν θέλετε, εγκαταστήστε τα sample data Δημιουργία ενός νέου site Kάνετε login ως admin (http://localhost:8080/chocolatebliss/administrator/) Εγκαταστήστε το component com_lyndatutorial.zip zip που σας δίνεται στη σελίδα του εργαστηρίου Extensions > Install/Unistall Components > lynda.com Tutorial Θα ερωτηθείτε δύο φορές αν είστε όντως σίγουροι ότι θέλετε να προχωρήσετε ρή καθώς το component θα διαγράψει εντελώς το περιεχόμενο της ΒΔ σας Δείτε το νέο site που προέκυψε, στη διεύθυνση: http://localhost:8080/chocolatebliss/ Μπορείτε να εκτελείτε το component όποτε θέλετε να επανέλθετε σε αυτή την αρχική κατάσταση 11

Κατανοώντας τα Joomla! templates Σε ένα website μπορεί να υπάρχουν και χρησιμοποιούνται ένα ή περισσότερα Joomla! templates (καθένα μπορεί να εφαρμόζεται σε συγκεκριμένες σελίδες) Από τη στιγμή που εγκατασταθούν, μπορούμε να επεξεργαστούμε τον html/css κώδικα των templates από το Joomla! backend Πειραματιστείτε με τον Template Manager του Joomla! Επεξεργαστείτε το beez template, δείτε τον html & css κώδικά του καθώς και τις θέσεις που επιτρέπει να τοποθετηθούν modules Εφαρμόστε το μόνο στο home page και στη συνέχεια επαναφέρατε τις αρχικές ρυθμίσεις Γιατί το navigation bar εμφανίζεται στην κορυφή της σελίδας στο rhuk_milkyway ενώ εμφανίζεται στα δεξιά της σελίδας στο template beez ; Η υποχρεωτική οργάνωση των folders/αρχείων ενός template Folder css που περιλαμβάνει τουλάχιστον το κύριο stylesheet αρχείο που ονομάζεται default.css Folder images που περιλαμβάνει όλες τις ςjpg/gif/png g p g εικόνες που σχετίζονται με το template index.php : περιέχει τον html κώδικα του template template_thumbnail.png : ένα thumbnail που εμφανίζει ο Template Manager και δείχνει πως μοιάζει το template templatedetails.xml : περιλαμβάνει οδηγίες για την εγκατάσταση του template εγκατάσταση του template Όταν δημιουργηθούν αυτά τα folder/αρχεία, zipάρονται, ανεβαίνουν στο Joomla! και εγκαθίστανται ως template 12

Ένα τυπικό index.php αρχείο σειρά 13: εξετάζεται αν υπάρχει μια php μεταβλητή. Αν δεν υπάρχει, το πρόγραμμα δεν εκτελείται <jdoc:include type="head" />: παράγει το περιεχόμενο του <head> τμήματος των εγγράφων (meta tags και css files) Ένα τυπικό xml αρχείο εγκατάστασης templatedetails.xml Τα αρχεία του template και οι θέσεις τους Οι επιτρεπτές θέσεις των modules σε αυτό το template 13

Δημιουργία ενός png thumbnail Αποσυμπιέστε το start_template.zip που σας δίνεται Ανοίξτε το index.html στο firefox και πάρετε ένα screenshot (Alt PrintScreen) Κάνετε paste το περιεχόμενο του clipboard σε ένα πρόγραμμα επεξεργασίας γραφικών (π.χ. Adobe Photoshop, Microsoft Office Picture Manager, Adobe Fireworks, κλπ) Αποθηκεύστε το screenshot σε png format (με μέγεθος περίπου 210x160 pixels) αφού πρώτα κάνετε το απαραίτητο crop κρατώντας μόνο το περιεχόμενο της σελίδας καθεαυτό Όνομα του png αρχείου: template_thumbnail.png Αποθηκεύστε το στον ίδιο folder με το index.html Δημιουργία ενός νέου index.php Ανοίξτε στο Dreamweaver το index.html και αποθηκεύστε το (Save as) index.php Ανοίξτε το cheatsheet.txt και αντικαταστήστε το <head> τμήμα του index.php (γραμμές 1 7) με το πρώτο κομμάτι κώδικα του cheatsheet.txt Τα system.css και general.css είναι stylesheets που εφαρμόζονται σε error messages, κλπ, και είναι καλό να χρησιμοποιούνται σε κάθε template Το /css/default.css css είναι το βασικό stlyesheet αυτού του template Εφόσον χρησιμοποιούνται περισσότερα css αρχεία, θα πρέπει να επαναληφθεί αντίστοιχα η παρακάτω γραμμή: <link rel="stylesheet" href="<?php echo $this >baseurl ;?>/templates/<?php echo $this >template ;?>/css/default.css" type="text/css" /> 14

Δημιουργία ενός νέου index.php (συνέχεια) Αντικαταστήστε το περιεχόμενο του <div id="content"> του index.php με το δεύτερο κομμάτι κώδικα του cheatsheet.txt Το <jdoc:include type="component" /> δείχνει ότι μέσα στο <div> θα τοποθετείται το κυρίως περιεχόμενο των σελίδων (δηλαδή τα components) Αν το component είναι το συνήθως content component τότε μέσα στο <div> θα εμφανιστεί το περιεχόμενο ενός άρθρου (article) Διαγράφουμε την πρώτη <ul> (κύριο μενού πλοήγησης) καθώς εκεί θέλουμε να τοποθετείται ένα module Στη θέση του <ul> προσθέστε ένα σχόλιο: <! top navigation goes here > Δημιουργία ενός νέου index.php (συνέχεια) Αντίστοιχα, αφαιρούμε το περιεχόμενο του <div id="left"> (το 2 ο <ul> και το <p> καθώς εκεί επίσης θα εμφανίζεται κάποιο module Στη θέση του προσθέστε ένα σχόλιο: <! left information goes here > Αφαιρούμε και το περιεχόμενο του <div id="footer"> Στη θέση του προσθέστε ένα σχόλιο: <! footer module goes here > Τώρα αντικαθιστούμε τα παραπάνω σχόλια με το τρίτο κομμάτι κώδικα του cheatsheet.txt, χρησιμοποιώντας ως ονόματα module τα top, left και footer αντίστοιχα: <jdoc:include type="modules" name="top" style="xhtml" /> <jdoc:include type="modules" name= "left" style="xhtml" /> <jdoc:include type="modules" name="footer" style="xhtml" /> 15

Δημιουργία ενός XML αρχείου Η εγκατάσταση ενός Joomla! template προϋποθέτει ένα XML αρχείο, το templatedetails.xml περιλαμβάνει οδηγίες απαραίτητες στο Joomla! για να εγκαταστήσει το template Είναι σημαντικό να αναφέρουμε όλα τα αρχεία μας στις σειρές 14 18 (μέσα στην ετικέτα <files>), με τη σωστή διαδρομή (path), διαφορετικά η εγκατάσταση τα αποτύχει Κάνετε τις απαραίτητες προσθήκες ώστε να αναφέρετε όλα τα γραφικά του folder images Οι θέσεις που αναφέρονται μέσα στην ετικέτα <positions> θα αποτελούν αργότερα (μετά την εγκατάσταση του template) τις επιλογές μας για τοποθέτηση ενός module Κρατήστε μόνο τα top, left και footer positions διαγράφοντας τα υπόλοιπα Μια μικρή αλλαγή στο index.php Στο αρχείο index.php αλλάξετε στη σειρά 14 τη γραμμή κώδικα <img src= "../02_02/images/logo.gif 02/images/logo gif" width= "307" height="135" /> με τη: <img src="templates/inside/images/logo.gif" width="307" height="135" /> (αυτό είναι το path που θα χρησιμοποιήσει το Joomla! στο server 16

Δημιουργία και εγκατάσταση του package (template) Συμπιέστε τα περιεχόμενα του φακέλου σας σε ένα zip αρχείο interior.zip Από το backend του Joomla! (Extensions > > Install/Uninstall) εγκαταστήστε το νέο σας template Αναζητήστε τα αρχεία του template στο server ( templates folder) Στον template manager ελέγξτε ότι το thumbnail εμφανίζεται σωστά Ορίστε το νέο template ως το default template του site σας και ελέγξτε την νέα εμφάνιση του front end Διορθώνοντας συνήθη λάθη εγκατάστασης templates Λάθη στο xml αρχείο: Ξεχάσατε να αναφέρετε ένα image file Αναφέρετε ένα αρχείο που δεν υπάρχει Ονομάσατε το template με το ίδιο όνομα ενός άλλου template που είναι ήδη εγκατεστημένο Συντακτικά λάθη στον xml κώδικα (π.χ. κάποια ετικέτα δεν «κλείνει» σωστά) 17

Ορίζοντας θέσεις σε modules Μετακινήστε το module copyright από το footer στην κορυφή της σελίδας Εν συνεχεία επαναφέρετέ το στην αρχική του θέση 18