Configuring JoomlaContentEditor (JCE) (from usability point of view) Peter Martin (“pe7er”) <ul><li>twitter: @pe7er
www.db8.nl </li></ul>
Thank you JCE! <ul><li>for sponsoring my travel + accommodation
for this marvelous Joomla extension
for the friendly licensing model for JCE addons
I am not working for, or affiliated with JCE.  I just like it and I use JCE on  every  website </li></ul>
Contents <ul><li>“ Don't make me think”
JCE optimizing </li></ul><ul><ul><li>B1. Profiles
B2. Joomla Buttons
B3. JCE Buttons + styles </li></ul></ul><ul><li>JCE CSS Styling
JCE addons (commercial) </li></ul>
A) “Don't make me think”
Don't make me think – Steve Krug <ul><li>Chapter 5: Omit  needless  words </li></ul>
Which WYSIWYG editor? 1/2
Which WYSIWYG editor? 2/2
JCE Editor...
B1. JCE Optimizing – Profiles
JCE Profiles <ul><li>Priceless!
Create different profiles for different users and/or components
Order =  important </li></ul>
B2. JCE Optimizing – Joomla Buttons
Omit  needless  Joomla buttons <ul>Back-end > Extensions > Plug-in Manager >  disable  all “editors-xtd type” plugins: <ul...
Button - Image
Button - Pagebreak
Button - Readmore </li></ul></ul>
B3. JCE Optimizing – JCE Buttons & styles
Omit  needless  JCE buttons <ul><li>Back-end > Components > JCE Administration > Editor Profiles > Default > Features: </l...
IMHO  needless  JCE buttons <ul><li>Underline: = hyperlink ?
Tables: are you still living in the 90s?
Font family + Font size +  Font color + Background color:  or   how   easy   it   is   to   mess   up   your   site   comp...
JCE –  Needless  buttons removed
Arrange JCE buttons <ul><li>Logical groups: </li><ul><li>Text appearence
Text alignment
Tools
Hyperlinks </li></ul></ul>
Upcoming SlideShare
Loading in …5
×

Configuring Joomla JCE editor from usability point of view

10,658 views

Published on

JCE editor for Joomla is a very popular WYSIWYG editor. However most people just install + use it, and don't put any work in configuring this extension.

This presentation is about configuring Joomla JCE editor from usability point of view:
what should you change in the configuration to work easier with this editor? and what should you remove so that your clients don't mess up the layout of the site?

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

  • Be the first to like this

No Downloads
Views
Total views
10,658
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Configuring Joomla JCE editor from usability point of view

  1. 1. Configuring JoomlaContentEditor (JCE) (from usability point of view) Peter Martin (“pe7er”) <ul><li>twitter: @pe7er
  2. 2. www.db8.nl </li></ul>
  3. 3. Thank you JCE! <ul><li>for sponsoring my travel + accommodation
  4. 4. for this marvelous Joomla extension
  5. 5. for the friendly licensing model for JCE addons
  6. 6. I am not working for, or affiliated with JCE. I just like it and I use JCE on every website </li></ul>
  7. 7. Contents <ul><li>“ Don't make me think”
  8. 8. JCE optimizing </li></ul><ul><ul><li>B1. Profiles
  9. 9. B2. Joomla Buttons
  10. 10. B3. JCE Buttons + styles </li></ul></ul><ul><li>JCE CSS Styling
  11. 11. JCE addons (commercial) </li></ul>
  12. 12. A) “Don't make me think”
  13. 13. Don't make me think – Steve Krug <ul><li>Chapter 5: Omit needless words </li></ul>
  14. 14. Which WYSIWYG editor? 1/2
  15. 15. Which WYSIWYG editor? 2/2
  16. 16. JCE Editor...
  17. 17. B1. JCE Optimizing – Profiles
  18. 18. JCE Profiles <ul><li>Priceless!
  19. 19. Create different profiles for different users and/or components
  20. 20. Order = important </li></ul>
  21. 21. B2. JCE Optimizing – Joomla Buttons
  22. 22. Omit needless Joomla buttons <ul>Back-end > Extensions > Plug-in Manager > disable all “editors-xtd type” plugins: <ul><li>Button - Article
  23. 23. Button - Image
  24. 24. Button - Pagebreak
  25. 25. Button - Readmore </li></ul></ul>
  26. 26. B3. JCE Optimizing – JCE Buttons & styles
  27. 27. Omit needless JCE buttons <ul><li>Back-end > Components > JCE Administration > Editor Profiles > Default > Features: </li><ul><li>Move rarely used icons from &quot;Current Editor Layout&quot; to &quot;Available Buttons&quot; </li></ul></ul>
  28. 28. IMHO needless JCE buttons <ul><li>Underline: = hyperlink ?
  29. 29. Tables: are you still living in the 90s?
  30. 30. Font family + Font size + Font color + Background color: or how easy it is to mess up your site completely ... </li></ul>
  31. 31. JCE – Needless buttons removed
  32. 32. Arrange JCE buttons <ul><li>Logical groups: </li><ul><li>Text appearence
  33. 33. Text alignment
  34. 34. Tools
  35. 35. Hyperlinks </li></ul></ul>
  36. 36. Remove even more.... <ul><li>Format Elements </li><ul><li>(Editor Param > Options)
  37. 37. Paragraph, Div , Heading1 , Heading2, Heading3, Heading4, Heading5, Heading6, Address, Code, Preformatted, Sample, Span </li></ul></ul>
  38. 38. and more.... <ul><li>Paste options (Plugin Params > Paste > Allow Paste As HTML = No):
  39. 39. Paste , Paste as Plain Text </li></ul>
  40. 40. Export Profile <ul><li>Optimizing JCE = relatively much work </li><ul><li>Save your profile with “Export”: Editor Profiles > click Default > Export </li></ul></ul>
  41. 41. C) JCE CSS Styling
  42. 42. editor.css 1/5 <ul><li>Create CSS template used by JCE /templates/$template/css/editor.css
  43. 43. Back-end > Components > JCE Administration > Global Configuration: </li><ul><li>Editor Styles: Custom CSS Files
  44. 44. Custom CSS Files: templates/$template/css/editor.css </li></ul></ul>
  45. 45. editor.css 2/5 <ul><li>For better WYSIWYG: Import some template styles in JCE.
  46. 46. Add to your editor.css </li><ul><li>@import url(system.css);
  47. 47. @import url(template.css); </li></ul></ul>
  48. 48. editor.css 3/5 <ul><li>Some CSS files have too many styles!
  49. 49. Don't use: </li><ul><li>@import url(general.css);
  50. 50. @import url(personal.css); </li></ul></ul>
  51. 51. editor.css 4/5 <ul><li>Prevent template background in JCE editor, add to editor.css: </li><ul><li>body { margin:0; padding:0; text-align: left; background: white; background-image: none;} </li></ul></ul>
  52. 52. editor.css 5/5 <ul><li>Create custom styles </li><ul><li>.makethisred{color: #ff0000;} </li></ul><li>Note: editor.css is not loaded in front-end template! </li></ul>
  53. 53. <ul><li>D) JCE addons (commercial) </li></ul>
  54. 54. Joomla Content Editor (JCE) <ul><li>My default Joomla installation: </li><ul><li>JCE + JCE MediaBox (free)
  55. 55. JCE addons (“JCE plugins”): </li><ul><li>Captions
  56. 56. File Manager
  57. 57. Image Manager Extended
  58. 58. Media Manager </li></ul></ul></ul>
  59. 59. JCE Plugins <ul><li>Add-ons / extra's
  60. 60. No Joomla plugins, install using JCE
  61. 61. Commercial license
  62. 62. Set default settings!
  63. 63. Version 2! </li><ul><li>Drag & drop
  64. 64. Checks upload size before uploading </li></ul><li>The “Brian” switch </li></ul>
  65. 65. JCE Plugins – Captions <ul><li>Add captions to images </li></ul>
  66. 66. JCE Plugins – File Manager <ul><li>Add files to website </li><ul><li>Automatic file type icon </li></ul></ul>
  67. 67. JCE Plugins – Image Manager XTD <ul><li>Upload images to website </li><ul><li>Automatic resize
  68. 68. Automatic thumbnail creation </li></ul><li>Demo: upload images (with Image Manager XTD addon: autoresize to 800x600 + autocreate thumbnail), create small photogallery with lightbox effect (with free JCE MediaBox plugin) </li></ul>
  69. 69. JCE Plugins – Media Manager <ul><li>Add videoclips to website </li><ul><li>Difference between this plugin & Plugins like Allvideos Plugin </li></ul></ul>
  70. 70. JCE Plugins – Various <ul><li>Emotions
  71. 71. Fullpage
  72. 72. Iframe
  73. 73. Template manager </li></ul>
  74. 74. <ul>Questions? </ul><ul><li>Download JCE editor (free): </li><ul><li>www.joomlacontenteditor.net </li></ul><li>Purchase JCE addons (commercial): </li><ul><li>$30 USD, $20 USD per year, unlimited use!
  75. 75. www.joomlacontenteditor.net/subscribe </li></ul><li>Presentation: </li><ul><li>Peter Martin (pe7er)
  76. 76. twitter: @pe7er
  77. 77. e-mail: info at db8.nl
  78. 78. website: www.db8.nl </li></ul></ul><ul><li>Photos used in presentation: </li><ul><li>Don't make me think: Bob Smith
  79. 79. Profiles: Sanja Gjenero
  80. 80. Buttons: Tomasz Sowanski
  81. 81. CSS: Svilen Milev
  82. 82. Addons: Michael Faes </li></ul></ul>

×