1. Optimizing JCE editor from usability point of view Peter Martin Joomla User Group Utrecht Website: www.db8.nl Twitter: @pe7er Linkedin: http://linkedin.com/in/pe7er Maandag 9 december 2013

2. Introduction Peter Martin (pe7er), Nijmegen, Netherlands Joomla: Business: db8.nl since 2005 (website & extension development)Interests: 2Joomla Forum & Joomla Community Leadership TeamOpen Source Software, Linux (Debian / Ubuntu), Raspberry Pi, music (vinyl records), arthouse movies, trivia. 3. Contents A)Don't make me think B)JCE optimizing B1. Profiles B2. JCE Icons B3. Joomla Buttons C)JCE CSS Styling D)JCE addons (commercial)3 4. A) Don't make me think4 5. Don't make me think Steve Krug Chapter5: Omit needless words = Reduce choices for administrators5 6. Which WYSIWYG editor? 1/26 7. Which WYSIWYG editor? 2/27 8. JCE Editor8 9. JCE editor Management9 10. JCE Editor Global Configuration JCE Administration Editor Global Configuration: Reset Editor Styling: Yes 10Reset the styling of the editor content. Forces left aligned, black text on a white background. 11. B1. JCE Optimizing Profiles11 12. JCE Profiles JCE Administration Editor Profiles Create different profiles for different users and/or components Order = important Export / Import Profiles 12 13. JCE Profiles Copy13Default Profile & edit 14. JCE Profiles Edit14 15. JCE Administration :: Edit Profile 4 tabs: Setup Assignment: Front-end / Back-end / both Components: Assign editor to Components User Group: Assign editor to User Groups Users: Assign editor to individual users Features:Icon bar Editor Parameters Plugin Parameters 15 16. B2. Optimizing JCE JCE Icons16 17. Omit needless JCE buttons17Reduce choices Remove rarely used icons from Icon Bar Remove options that might mess up the layout Organize choices Organize icons into logical groups 18. IMHO needless JCE buttons Underline:= hyperlink ? Tables: are only for tables, NOT for layout Font family + Font size + Font color + Background color: or how easy is tomess up yoursitecompletely... 18 19. JCE Edit Profile > Features19 20. Arrange JCE buttons Logical groups:Text appearence | Text alignment Hyperlinks |Tools Optimized20Icon bar: 21. Remove even more....Editor Parameters > Options > Format Elements 21only keep: Paragraph, Heading2, Heading3, Heading4 22. and more.... Plugin Show Pagebreak button: No Plugin 22Parameters > Article BreaksParameters > PasteAllow Paste As HTML: No 23. B3. JCE Optimizing Joomla Buttons23 24. Omit needless Joomla buttons Back-end > Extensions > Plug-in Manager > disable all editors-xtd type plugins: Button - Article Button - Image Button - Pagebreak Button - Readmore24 25. Remove Joomla editor buttons25 26. Joomla editor buttons26 27. C) JCE CSS Styling27 28. editor.css 1/5 28Formatting text without Font / fontstyle / fontcolor icons? Create CSS template used by JCE /templates/$template/css/editor.css Back-end > Components > JCE Administration > Global Configuration: Editor Styles: Custom CSS Files Custom CSS Files: templates/$template/css/editor.css 29. editor.css 2/5 JCE 29editor WYSIWYG same as TemplateImport some template styles in JCE. Add to your editor.css @import url(system.css); @import url(template.css); 30. editor.css 3/5 Some 30CSS files have too many styles!Don't use: @import url(general.css); @import url(personal.css); 31. editor.css 4/5 Preventtemplate background in JCE editor, add to editor.css: body { margin:0; padding:0; text-align: left; background: white; background-image: none;}31 32. editor.css 5/5 Createcustom styles.makethisred{color: #ff0000;} Note:editor.css is not loaded in front-end template!32 33. D) JCE addons (commercial)33 34. Joomla Content Editor (JCE) Mydefault Joomla installation:JCE editor JCE MediaBox (free) lightbox imagesCommercial JCE addons (JCE plugins): Captions FileManager Image Manager Extended Media Manager34 35. JCE Add-ons Add-ons/ extra's for JCE editor No Joomla plugins, install using JCE Commercial license Set default settings! (in Plugin Parameters) Version 2! Drag & drop Checks upload size before uploading35 36. JCE Plugins Captions Add36captions to images 37. JCE Plugins File Manager Add 37files to websiteAutomatic file type icon 38. JCE Plugins Image Manager XTD Upload images to websiteAutomatic resize Automatic thumbnail creation Demo:upload images (with Image Manager XTD addon: autoresize to 800x600 + autocreate thumbnail), create small photogallery with lightbox effect (with free JCE MediaBox plugin)38 39. JCE Plugins Media Manager Add videoclips to websiteWhy not use a Joomla Plugin like Allvideos Plugin? Depends39on the number of videos / articles 40. non-JCE tips Removeunused components from Components menu Extensions > Extensions Manager > Manage Removeunused Search & Smart Searchplugins Extensions > Plug-in Manager Quick 40IconsUse Quick Icon component: create shortcuts to back-end menu items / 3rd party components 41. Questions? Download JCE editor (free): www.joomlacontenteditor.net Purchase JCE addons (commercial): Presentation: Peter Martin (pe7er) twitter: @pe7er$30 / $20 USD per year, unlimited use! www.joomlacontenteditor.net/subscribePhotos used in presentation:41website: www.db8.nlDon't make me think: Bob SmithProfiles: Sanja GjeneroButtons: Tomasz Sowanski CSS: Svilen Mileve-mail: info at db8.nlAddons: Michael Faes