JUG Utrecht 2013 - Optimaliseren van Joomla Content Editor (JCE) voor admins

2,699 views

Published on

JCE Editor is een WYSIWYG editor om gemakkelijker artikelen met foto's in Joomla te plaatsen.

Uit oogpunt van gebruikersvriendelijkheid is er veel voor beheerders te configureren in deze editor.

Deze presentatie toont je enkele zaken die je kunt optimaliseren (met name door opties weg te laten).

NB: de sheets zijn wat ouder dan de presentatie. Van de live demonstratie die ik op de avond deed, met daarin de laatste nieuwigheden, heb ik helaas geen sheets...

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,699
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JUG Utrecht 2013 - Optimaliseren van Joomla Content Editor (JCE) voor admins

  1. 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. 2. Introduction Peter Martin (pe7er), Nijmegen, Netherlands  Joomla:  –  Business: –  db8.nl since 2005 (website & extension development) Interests: – 2 Joomla Forum & Joomla Community Leadership Team Open Source Software, Linux (Debian / Ubuntu), Raspberry Pi, music (vinyl records), arthouse movies, trivia.
  3. 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. 4. A) “Don't make me think” 4
  5. 5. Don't make me think – Steve Krug  Chapter 5: Omit needless words = Reduce choices for administrators 5
  6. 6. Which WYSIWYG editor? 1/2 6
  7. 7. Which WYSIWYG editor? 2/2 7
  8. 8. JCE Editor 8
  9. 9. JCE editor – Management 9
  10. 10. JCE Editor Global Configuration JCE Administration ›› Editor Global Configuration: Reset Editor Styling: Yes – 10 Reset the styling of the editor content. Forces left aligned, black text on a white background.
  11. 11. B1. JCE Optimizing – Profiles 11
  12. 12. JCE Profiles JCE Administration ›› Editor Profiles Create different profiles –for different users –and/or components Order = important Export / Import Profiles 12
  13. 13. JCE Profiles  Copy 13 “Default” Profile & edit
  14. 14. JCE Profiles – Edit 14
  15. 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. 16. B2. Optimizing JCE – JCE Icons 16
  17. 17. Omit needless JCE buttons 17 Reduce choices –Remove rarely used icons from Icon Bar –Remove options that might mess up the layout Organize choices –Organize icons into logical groups
  18. 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 to mess up your site completely... 18
  19. 19. JCE – Edit Profile > Features 19
  20. 20. Arrange JCE buttons  Logical – – groups: Text appearence | Text alignment Hyperlinks |Tools  Optimized 20 Icon bar:
  21. 21. Remove even more....  Editor Parameters > Options > Format Elements – 21 only keep: Paragraph, Heading2, Heading3, Heading4
  22. 22. and more....  Plugin – Show Pagebreak button: No  Plugin – 22 Parameters > Article Breaks Parameters > Paste Allow Paste As HTML: No
  23. 23. B3. JCE Optimizing – Joomla Buttons 23
  24. 24. Omit needless Joomla buttons Back-end > Extensions > Plug-in Manager > disable all “editors-xtd type” plugins: – Button - Article – Button - Image – Button - Pagebreak – Button - Readmore 24
  25. 25. Remove Joomla editor buttons 25
  26. 26. Joomla editor buttons 26
  27. 27. C) JCE CSS Styling 27
  28. 28. editor.css 1/5  28 Formatting 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. 29. editor.css 2/5  JCE – – 29 editor WYSIWYG same as Template Import some template styles in JCE. Add to your editor.css @import url(system.css); @import url(template.css);
  30. 30. editor.css 3/5  Some – 30 CSS files have too many styles! Don't use: @import url(general.css); @import url(personal.css);
  31. 31. editor.css 4/5  Prevent template background in JCE editor, add to editor.css: body { margin:0; padding:0; text-align: left; background: white; background-image: none;} 31
  32. 32. editor.css 5/5  Create custom styles .makethisred{color: #ff0000;}  Note: editor.css is not loaded in front-end template! 32
  33. 33. D) JCE addons (commercial) 33
  34. 34. Joomla Content Editor (JCE)  My default Joomla installation: – JCE editor JCE MediaBox (free) → lightbox images – Commercial JCE addons (“JCE plugins”): –  Captions  File Manager  Image Manager Extended  Media Manager 34
  35. 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 uploading 35
  36. 36. JCE Plugins – Captions  Add 36 captions to images
  37. 37. JCE Plugins – File Manager  Add – 37 files to website Automatic file type icon
  38. 38. JCE Plugins – Image Manager XTD  Upload – – images to website Automatic 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. 39. JCE Plugins – Media Manager  Add – videoclips to website Why not use a Joomla Plugin like “Allvideos Plugin”?  Depends 39 on the number of videos / articles
  40. 40. non-JCE tips  Remove unused components from Components menu – Extensions > Extensions Manager > Manage  Remove unused Search & Smart Search plugins – Extensions > Plug-in Manager  Quick – 40 Icons Use Quick Icon component: create shortcuts to back-end menu items / 3rd party components
  41. 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/subscribe Photos used in presentation: – 41 website: www.db8.nl Don't make me think: Bob Smith – Profiles: Sanja Gjenero – Buttons: Tomasz Sowanski CSS: Svilen Milev – e-mail: info at db8.nl – – – Addons: Michael Faes

×