Presentatie + demonstratie over het optimaliseren van JCE editor voor Joomla zodat het gemakkelijker werken is. Gegeven op 4 januari 2016 in de Joomla Gebruikersgroep 's-Hertogenbosc­h

1. JCE editor
optimaliseren
voor beheerders
door Peter Martin
www.db8.nl / @pe7er
Joomla! Gebruikersgroep
's-Hertogenbosch
dinsdag 4 januari 2016

2. Peter Martin
● Joomla website specialist
● Vrijwilliger Joomla:
– Global Moderator op
forum.joomla.org
– Voormalig Community
Leadership Team (CLT)
– Programmeren patches
● Open Coffee Nijmegen
● Linux User Group Nijmegen
Interesses:
● Open Source Software: Joomla,
Linux (Debian 8) sinds 2007,
Nginx
● Hardware, IoT, Raspberry Pi
● Muziek (Vinyl)
● Filmhuisfilms
Website: www.db8.nl – e-mail: info at db8.nl
LinkedIn: http://www.linkedin.com/in/pe7er – Twitter: @pe7er

3. 3
Editor = hulpmiddel

4. Welke editor?

5. Welke editor?

6. Welke editor?

7. Welke editor?

8. Welke editor?

9. Welke editor?

10. 10
Overzicht Presentatie

11. Overzicht
Presentatie
>>> Sheets via: www.db8.nl <<<
1.“Don't make me think”
2.JCE Profielen
1.Setup
2.Features
3.Editor Parameters
4.Plugin Parameters
3.Joomla versimpelen
4.JCE CSS Styling
5.JCE (betaalde) uitbreidingen

12. 12
Don't make me think

13. Don't make me think –
Steve Krug
● Hoofdstuk 5:
Omit needless words
= Laat onnodige
woorden weg
= Verminder keuzes

14. 14
JCE Profiles

15. JCE Profiles
Profielen = instellingen
van de editor
● Back-end:
Components > JCE
Editor > Editor Profiles
● Volgorde profielen =
belangrijk
● Exporteer / importeer
profielen

16. JCE Profiles
● Setup
– toewijzing van
profiel
● Features & Layout
– Vormgeving editor
– Knoppenbalk
● Editor Parameters
– Cleanup + output
– Typografie
– Bestandssysteem
– Advanced
● Plugin Parameters
– Instellingen van
functionaliteit van de
knoppen / addons

17. 17
Setup

18. Toewijzing
● Front-end / back-end gebruikers
● Per apparaat (Desktop, TabletPC, Smartphone)
● Per component
● Per gebruikersgroep
● Per gebruiker

19. 19
Features & Layout

20. Verwijder onnodige
JCE ikonen
● Beperk keuzes! Verwijder ikonen:
– die zelden gebruikt worden
– die de vormgeving in de war kunnen sturen

21. Verwijder onnodige
JCE ikonen
● Onderstrepen = hyperlink ?
● Tabellen: alleen om data te tonen, NIET voor
vormgeving
● Font family + Font size +
Font color + Background color:
oftewel hoe makkelijk ηετ is om een
rommeltje van je website te maken...

22. JCE knoppen
indelen
● Logische groepen
– Tekst weergave | Uitlijning
– Hyperlinks | Tools
● Voorbeeld van geoptimaliseerde ikonenbalk:

23. 23
Editor Parameters

24. Editor Parameters
● Cleanup + output
– Relatieve URLs
– evt override van Editor Global Config
● Typografie
– Kleurenpallet
– evt override van Editor Global Config
● Filesystem
– Global Configuration voor Plugin Parameters
● Advanced
– bijv toestaan van JavaScript, CSS

25. Filesystem
Optie “File Directory Path” – relatieve path naar bestandsmap.
Kan variabelen bevatten:
– Leeg – Standaard map of “Editor Parameters File Directory Path“
– $id – ID van gebruiker
– $username – Gebruikersnaam van gebruiker
– $usertype – Gebruikersgroep van gebruiker, bijv: author
– $profile – JCE Profiel naam
– $group – JCE Profiel naam ???
– $year – Huidige jaar bijv: 2016
– $month – Huidige maand, bijv: 01
– $day – Huidige dag, bijv: 04

26. 26
Plugin Parameters

27. Plugin Parameters
– Format Select
– Article Breaks
– File Browser
– Clipboard
– Font Colour
– Font Family Select
– Font Size Select
– Image Manager
– Link
– Lists
– Media Support
– Source Code Editor
– Spellchecker
– Style Select
– Tables
– XHTML Extras
– VisualBlocks
+ evt betaalde addons

28. Nog meer
verwijderen....
Editor Profiles > [Default] > Plugin Parameters >
Format Select
houden:
Paragraph, Heading2, Heading3, Heading4

29. Nog meer
verwijderen....
● Plugin Parameters > Article Breaks
– Show Pagebreak button: No

30. 30
Joomla versimpelen

31. Verwijder onnodige
Joomla buttons
Back-end > Extensions > Plug-in Manager >
zet “editors-xtd type” plugins uit:
– Button - Article
– Button - Image
– Button - Pagebreak
– Button - Readmore

32. Verwijder onnodige
Joomla buttons

33. Verwijder onnodige
Joomla buttons

34. Andere niet-JCE
zaken verwijderen
● Ongebruikte componenten uit het admin menu
– Extensions > Extensions Manager > Manage
● Ongebruikte Search & Smart Search plugins
– Extensions > Plug-in Manager

35. 35
JCE CSS Styling

36. editor.css 1/3
Achtergrond van website in achtergrond editor
scherm?
– JCE > Editor Global Configuration >
Reset Editor Styling: Yes

37. editor.css 2/3
Tekst vormgeven zonder Font / Fontstyle / Fontcolor ikonen?
– Maak een CSS template die door JCE wordt gebruikt:
/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

38. editor.css 3/3
● Eigen kleuren / stijlen:
.rood{color: #ff0000;}
● NB: editor.css wordt niet geladen door front-end
template!
Plaats de code ook in
/templates/$template/css/template.css

39. 39
JCE Addons

40. Joomla Content
Editor (JCE)
● JCE editor (gratis)
– Profielen
– Gemakkelijker:
● (Interne) hyperlinks
● plaatjes
● “JCE addons” (gratis)
– NL Taalbestand
● Plugin (gratis)
– JCE Mediabox →
lightbox images
● Betaalde JCE addons.
– Jaarabonnement 29 Euro ex
btw (24 voor vernieuwen
licentie) via
www.joomlacontenteditor.net
– Onbeperkt aantal sites
● “JCE addons” (betaald)
– Captions
– File Manager
– Image Manager Extended
– Media Manager
– en meer...

41. Joomla Content
Editor (JCE)
● Gemakkelijker
(Interne) hyperlinks:
– Zoek op trefwoorden
uit artikel titels
en artikel inhoud...

42. “Captions”
● Onderschrift bij plaatjes

43. “File Manager”
● Bestanden toevoegen aan artikel
– Link naar bestand + automatisch ikoontje van
bestandsformaat

44. “Image Manager
XTD”
● Upload plaatjes naar website
– Drag & drop (Klik & Sleep) sinds versie 2
– Controleert upload grootte voor uploaden
– Automatisch schalen naar ingesteld formaat
– Automatisch aanmaken van miniatuur plaatje
– Invoegen van meerdere plaatjes tegelijk

45. “Media Manager”
● Toevoegen van filmpjes aan artikel
● Upload of linken (bijv naar YouTube)
● Verschil met Joomla Plugin zoals “Allvideos
Plugin”?

46. 46
Demo

47. i e

48. ● Presentatie beschikbaar via www.db8.nl
Peter Martin
e-mail: info at db8.nl
website: www.db8.nl
twitter: @pe7er
Vragen?

49. Gebruikte foto's
● Thinking girl - vassiliki koutsothanasi http://www.sxc.hu/photo/962000
● cockpit 3 - Gunther Netzer http://www.sxc.hu/photo/130791
● cockpit 2 - Gunther Netzer http://www.sxc.hu/photo/130790
●
Face - Questions - Bob Smith http://www.sxc.hu/photo/418215
● one step 1 - sanja gjenero http://www.sxc.hu/photo/1181505
● San Salvador Build Site-11 - Visitor7, 2013
https://commons.wikimedia.org/wiki/File:San_Salvador_Build_Site-11.jpg
● icons button navigation set - tomasz sowanski http://www.sxc.hu/photo/1177157
● Coloured, textured craft card edit - MichaelMaggs, 2010
https://commons.wikimedia.org/wiki/File:Coloured,_textured_craft_card_edit.jpg
● Motherboard 4 - Lisa Zanchi http://www.sxc.hu/photo/103914
● wire - Recep Tiryaki http://www.sxc.hu/photo/330223
● 3d text 2 - Svilen Milev http://www.sxc.hu/photo/1383209
● Motherboard 4 - Lisa Zanchi http://www.sxc.hu/photo/103914
● Speed Typing - Matthew Bowden http://www.sxc.hu/photo/275499
● signs signs - Jason Antony http://www.sxc.hu/photo/751034