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

  • 2,037 views
Uploaded on

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

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...

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,037
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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: – 2 Joomla Forum & Joomla Community Leadership Team Open 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 think” 4
  • 5. Don't make me think – Steve Krug  Chapter 5: Omit needless words = Reduce choices for administrators 5
  • 6. Which WYSIWYG editor? 1/2 6
  • 7. Which WYSIWYG editor? 2/2 7
  • 8. JCE Editor 8
  • 9. JCE editor – Management 9
  • 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. B1. JCE Optimizing – Profiles 11
  • 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  Copy 13 “Default” Profile & edit
  • 14. JCE Profiles – Edit 14
  • 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 Icons 16
  • 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. 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. JCE – Edit Profile > Features 19
  • 20. Arrange JCE buttons  Logical – – groups: Text appearence | Text alignment Hyperlinks |Tools  Optimized 20 Icon bar:
  • 21. Remove even more....  Editor Parameters > Options > Format Elements – 21 only keep: Paragraph, Heading2, Heading3, Heading4
  • 22. and more....  Plugin – Show Pagebreak button: No  Plugin – 22 Parameters > Article Breaks Parameters > Paste Allow Paste As HTML: No
  • 23. B3. JCE Optimizing – Joomla Buttons 23
  • 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. Remove Joomla editor buttons 25
  • 26. Joomla editor buttons 26
  • 27. C) JCE CSS Styling 27
  • 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. 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. editor.css 3/5  Some – 30 CSS files have too many styles! Don't use: @import url(general.css); @import url(personal.css);
  • 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. editor.css 5/5  Create custom 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)  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. 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. JCE Plugins – Captions  Add 36 captions to images
  • 37. JCE Plugins – File Manager  Add – 37 files to website Automatic file type icon
  • 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. 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. 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. 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