====== Joomla - Άσκηση 6 - Templates και εμφάνιση site - jce editor======
//Δοκιμασμένο σε Joomla 3.4.4, εκτύπωση σε firefox//
* Νέα : **Εγκατάσταση προσθέτου JCE Editor, εισαγωγή στα templates και στα css**
----
- **ΕΓΚΑΤΑΣΤΑΣΗ ΠΡΟΣΘΕΤΟΥ** JCE Editor
- Θα εγκαταστήσουμε έναν νέο επεξεργαστή άρθρων με περισσότερες δυνατότητες από αυτόν που είναι ήδη εγκατεστημένος
- Ψάχνουμε στο google για **''Joomla JCE editor download''**. Κατεβάζουμε την **τελευταία** έκδοση και συγκεκριμένο το **legacy** του **editor** για **Joomla 3.x**. Είναι ένα συμπιεσμένο αρχείο **zip**. Αποθηκεύουμε το αρχείο εγκατάστασης στον φάκελο **mathimata/joomla**
- Από την ΔΙΑΧΕΙΡΙΣΗ του Joomla πηγαίνουμε **Επεκτάσεις/Διαχείριση Επεκτάσεων**
- Στην καρτέλα **Μεταφόρτωση Αρχείου Εγκατάστασης** πατάμε **Αναζήτηση** και βρίσκουμε το αρχείο που αποθηκεύσαμε προηγουμένως στον φάκελο **mathimata/joomla**
- Πατάμε **Μεταφόρτωση & Εγκατάσταση**. Όταν ολοκληρωθεί θα πρέπει να μας εμφανίσει μήνυμα **Η εφαρμογή εγκαταστάθηκε επιτυχώς**
- **ΕΝΕΡΓΟΠΟΙΗΣΗ** JCE Editor
* Θα ορίσουμε τον JCE Editor ως προκαθορισμένο επεξεργαστή άρθρων.
- Πηγαίνουμε **Σύστημα / Γενικές Ρυθμίσεις**
- Στην καρτέλα **Ιστότοπος**, στο πεδίο **Προεπιλεγμένος Κειμενογράφος**, επιλέγουμε **Editor JCE** και πατάμε {{:el:school:lessons:html:save_n_exit_18.png|}}.
- **ΕΠΕΞΕΡΓΑΣΙΑ ΑΡΘΡΟΥ** - JCE Editor - html
- Θα επεξεργαστούμε το άρθρο **''Κέρκυρα''**. Πηγαίνουμε **Περιεχόμενο / Διαχείριση Άρθρων** και πατάμε πάνω στο άρθρο **''Κέρκυρα''**
- Στα εικονίδια του JCE Editor στην τρίτη γραμμή πατάμε πάνω στο εικονίδιο {{:el:school:lessons:html:jce_toggle_source_code.png}}. Μας εμφανίζεται html.
- Εάν τα ελληνικά εμφανίζονται με περίεργους χαρακτήρες //**&kappa&epsilon ..**//
- Πατάμε **Κλείσιμο** και πηγαίνουμε **Εφαρμογές / JCE Editor / Global Configuration**
- Στο πεδίο **DocType** επιλέγουμε **''HTML5''**
- Πηγαίνουμε **Περιεχόμενο / Διαχείριση Άρθρων** και πατάμε πάνω στο άρθρο **''Κέρκυρα''**
- Στα εικονίδια του JCE Editor στην τρίτη γραμμή πατάμε πάνω στο εικονίδιο {{:el:school:lessons:html:jce_toggle_source_code.png}}. Μας εμφανίζεται πάλι η html, αυτή την φορά χωρίς πρόβλημα στους ελληνικούς χαρακτήρες.
- **Διαγράφουμε** την ετικέτα ****
- Βάζουμε το κείμενο **''Το νησί της Κέρκυρας''** σε **Επικεφαλίδα 1**.
- Πληκτρολογούμε το κείμενο **''Ιστορικά Στοιχεία''** και το βάζουμε μέσα σε **Επικεφαλίδα 2**
- Πατάμε πάλι το εικονίδιο {{:el:school:lessons:html:jce_toggle_source_code.png}}. Μας εμφανίστηκαν τα 2 κείμενα με μεγάλα γράμματα, όπως περιμέναμε. Πατάμε {{:el:school:lessons:html:save_n_exit_18.png|}}.
- Με όμοιο τρόπο επεξεργαζόμαστε το άρθρο **''Παρίσι''** ορίζοντας το κείμενο **''Η πόλη του Παρισιού''** ως **Επικεφαλίδα 1** και εισάγοντας το κείμενο **''Αξιοθέατα''** ως **Επικεφαλίδα 2**. Αποθηκεύουμε και πηγαίνουμε στον **ΙΣΤΟΤΟΠΟ** για να δούμε το αποτέλεσμα.
- **ΠΡΟΤΥΠΑ - templates** και αλλαγή εμφάνισης site
* Για να καταλάβουμε καλύτερα την σημασία του προτύπου στην εμφάνιση θα πάμε να το αλλάξουμε.
- Πηγαίνουμε **Επεκτάσεις / Διαχείριση Προτύπων** και πατάμε πάνω στο πρότυπο **Protostar - Default(2)**.
- Στην καρτέλα **Προηγμένα** βλέπουμε το **Χρώμα Προτύπου** (γραμματοσειράς) και το **Χρώμα Υποβάθρου** (φόντου). Αλλάζουμε και τα 2 επιλέγοντας άλλα χρώματα.
- Πατάμε {{:el:school:lessons:html:save_n_exit_18.png|}} και πηγαίνουμε στον **Ιστότοπο** για να δούμε την αλλαγή.
- Κάνουμε και άλλες δοκιμές αν θέλουμε με άλλα χρώματα.
- Κρατάμε τα δικά μας χρώματα ή επαναφέρουμε τα προκαθορισμένα **πληκτρολογώντας** στο **Χρώμα Προτύπου** **''#0088cc''** και στο **Χρώμα Υποβάθρου** **''#f4f6f7''**
- **ΑΛΛΑΓΗ ΠΡΟΤΥΠΟΥ - template**
* Το πρότυπο **Protostar - Default(2)** έχει εμφανίσεις που διαφέρουν κυρίως χρωματικά, όμως μπορούμε να χρησιμοποιήσουμε και άλλο πρότυπο που θα έχει εντελώς διαφορετική εμφάνιση.
- Πηγαίνουμε **Επεκτάσεις / Διαχείριση Προτύπων**. Βλέπουμε ότι είναι προεπιλεγμένο το πρότυπο **Protostar - Default(2)**. Δεξιά από το πρότυπο **Beez3 - Default** πατάμε πάνω στο **πορτοκαλί αστεράκι** ώστε να γίνει αυτό προεπιλεγμένο πρότυπο.
- Πηγαίνουμε στον **Ιστότοπο** για να δούμε την αλλαγή. Παρατηρούμε ότι άλλαξε εντελώς η εμφάνιση! Τα μενού έγιναν κεφαλαία και άλλαξαν, δεν εμφανίζεται το λογότυπό μας, αλλαξαν τα χρώματα οι γραμματοσειρές, η διάταξη κτλ.
- Πίσω στην **Διαχείριση Προτύπων** πατάμε πάνω στο πρότυπο **Beez3 - Default**
- Στην καρτέλα **Προηγμένα** αλλάζουμε το χρώμα του προτύπου σε **Φύση**.
- Πατάμε {{:el:school:lessons:html:save_n_edit_18.png|}} και πηγαίνουμε στον **ΙΣΤΟΤΟΠΟ** για να δούμε το αποτέλεσμα και στα 2 άρθρα **''Κέρκυρα''** και **''Παρίσι''**. Παρατηρούμε ότι **άλλαξαν τα χρώματα** του site γενικώς από αποχρώσεις του μπλε σε αποχρώσεις του πράσινου.
- Δοκιμάζουμε και τις 2 άλλες επιλογές **Κόκκινο** και **Τυρκουάζ**. Αφήνουμε ότι μας αρέσει.
- Το λογότυπο δεν εμφανίζεται αφού είχε μπει στις ρυθμίσεις του άλλου προτύπου. Μπορείτε να βρείτε την επιλογή να το εμφανίσετε;
* Βλέπουμε ότι τα υπομενού **Εσωτερικό** και **Εξωτερικό** δεν εμφανίζονται σωστά. Πολλές φορές τα πρότυπα δεν υποστηρίζουν κάποιες δυνατότητες εμφάνισης και θα πρέπει να τα τροποποιήσουμε με αλλαγές στον **κώδικα php**, στα **αρχεία στυλ css** για να τα καταφέρουμε. Αλλιώς τροποποιούμε ρυθμίσεις στο πρότυπο ή στο joomla μέχρι να εμφανιστεί όσο το δυνατόν καλύτερα.
* Παρατηρούμε επίσης ότι το κείμενο **''Το νησί της Κέρκυρας''** είναι μεγαλύτερο στο πρότυπο **Beez3 - Default** απ' ότι στο πρότυπο **Protostar - Default(2)** παρόλο που και τα 2 είναι στην ίδια ετικέτα ****.
* **ΤΙ ΣΥΜΒΑΙΝΕΙ;**. Μέχρι τώρα δημιουργούσαμε απλές html ιστοσελίδες και μας εμφανιζόταν ένα συγκεκριμένο αποτέλεσμα. Η **Επικεφαλίδα επιπέδου 1** ήταν συγκεκριμένου μεγέθους και πάντα στην ίδια γραμματοσειρά εκτός εάν βάζαμε για να την αλλάξουμε. Στο Joomla όμως έχουμε την λογική των **προτύπων** (templates). Ο δημιουργός του προτύπου **Beez3** αποφάσισε άλλο μέγεθος και άλλη γραμματοσειρά για την ετικέτα **** απ' ότι ο δημιουργός του προτύπου **Protostar**.
* **Κάθε ετικέτα** έχει **το δικό της στυλ** με διαφορετικό **μέγεθος, γραμματοσειρά, χρώμα** και πολλά άλλα..
- **ΕΠΑΝΑΦΟΡΑ ΠΡΟΤΥΠΟΥ** Protostar - Default
- Στην **Διαχείριση Προτύπων** ορίζουμε πάλι ως προεπιλεγμένο το πρότυπο **Protostar - Default(2)** και πηγαίνουμε στον **ΙΣΤΟΤΟΠΟ** για να δούμε το αποτέλεσμα.
|{{:el:school:lessons:html:joomla_protostar_other_colors_corfu.png?250|Protostar - Άλλα χρώματα}}|{{:el:school:lessons:html:joomla_beez3_tyrkouaz_corfu.png?250|Beez3 - Τυρκουαζ}}|{{:el:school:lessons:html:joomla_beez3_personal_corfu.png?250|Beez3 - Προσωπικό}}|