Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JCE editor
optimaliseren
voor beheerders
door Peter Martin
www.db8.nl / @pe7er
Joomla! Gebruikersgroep
's-Hertogenbosch
di...
Peter Martin
● Joomla website specialist
● Vrijwilliger Joomla:
– Global Moderator op
forum.joomla.org
– Voormalig Communi...
3
Editor = hulpmiddel
Welke editor?
Welke editor?
Welke editor?
Welke editor?
Welke editor?
Welke editor?
10
Overzicht Presentatie
Overzicht
Presentatie
>>> Sheets via: www.db8.nl <<<
1.“Don't make me think”
2.JCE Profielen
1.Setup
2.Features
3.Editor P...
12
Don't make me think
Don't make me think –
Steve Krug
● Hoofdstuk 5:
Omit needless words
= Laat onnodige
woorden weg
= Verminder keuzes
14
JCE Profiles
JCE Profiles
Profielen = instellingen
van de editor
● Back-end:
Components > JCE
Editor > Editor Profiles
● Volgorde profi...
JCE Profiles
● Setup
– toewijzing van
profiel
● Features & Layout
– Vormgeving editor
– Knoppenbalk
● Editor Parameters
– ...
17
Setup
Toewijzing
● Front-end / back-end gebruikers
● Per apparaat (Desktop, TabletPC, Smartphone)
● Per component
● Per gebruike...
19
Features & Layout
Verwijder onnodige
JCE ikonen
● Beperk keuzes! Verwijder ikonen:
– die zelden gebruikt worden
– die de vormgeving in de wa...
Verwijder onnodige
JCE ikonen
● Onderstrepen = hyperlink ?
● Tabellen: alleen om data te tonen, NIET voor
vormgeving
● Fon...
JCE knoppen
indelen
● Logische groepen
– Tekst weergave | Uitlijning
– Hyperlinks | Tools
● Voorbeeld van geoptimaliseerde...
23
Editor Parameters
Editor Parameters
● Cleanup + output
– Relatieve URLs
– evt override van Editor Global Config
● Typografie
– Kleurenpallet...
Filesystem
Optie “File Directory Path” – relatieve path naar bestandsmap.
Kan variabelen bevatten:
– Leeg – Standaard map ...
26
Plugin Parameters
Plugin Parameters
– Format Select
– Article Breaks
– File Browser
– Clipboard
– Font Colour
– Font Family Select
– Font Si...
Nog meer
verwijderen....
Editor Profiles > [Default] > Plugin Parameters >
Format Select
houden:
Paragraph, Heading2, Head...
Nog meer
verwijderen....
● Plugin Parameters > Article Breaks
– Show Pagebreak button: No
30
Joomla versimpelen
Verwijder onnodige
Joomla buttons
Back-end > Extensions > Plug-in Manager >
zet “editors-xtd type” plugins uit:
– Button -...
Verwijder onnodige
Joomla buttons
Verwijder onnodige
Joomla buttons
Andere niet-JCE
zaken verwijderen
● Ongebruikte componenten uit het admin menu
– Extensions > Extensions Manager > Manage
...
35
JCE CSS Styling
editor.css 1/3
Achtergrond van website in achtergrond editor
scherm?
– JCE > Editor Global Configuration >
Reset Editor St...
editor.css 2/3
Tekst vormgeven zonder Font / Fontstyle / Fontcolor ikonen?
– Maak een CSS template die door JCE wordt gebr...
editor.css 3/3
● Eigen kleuren / stijlen:
.rood{color: #ff0000;}
● NB: editor.css wordt niet geladen door front-end
templa...
39
JCE Addons
Joomla Content
Editor (JCE)
● JCE editor (gratis)
– Profielen
– Gemakkelijker:
● (Interne) hyperlinks
● plaatjes
● “JCE ad...
Joomla Content
Editor (JCE)
● Gemakkelijker
(Interne) hyperlinks:
– Zoek op trefwoorden
uit artikel titels
en artikel inho...
“Captions”
● Onderschrift bij plaatjes
“File Manager”
● Bestanden toevoegen aan artikel
– Link naar bestand + automatisch ikoontje van
bestandsformaat
“Image Manager
XTD”
● Upload plaatjes naar website
– Drag & drop (Klik & Sleep) sinds versie 2
– Controleert upload groott...
“Media Manager”
● Toevoegen van filmpjes aan artikel
● Upload of linken (bijv naar YouTube)
● Verschil met Joomla Plugin z...
46
Demo
i e
● Presentatie beschikbaar via www.db8.nl
Peter Martin
e-mail: info at db8.nl
website: www.db8.nl
twitter: @pe7er
Vragen?
Gebruikte foto's
● Thinking girl - vassiliki koutsothanasi http://www.sxc.hu/photo/962000
● cockpit 3 - Gunther Netzer htt...
Upcoming SlideShare
Loading in …5
×

JCE editor optimaliseren (Joomla Den Bosc­h 2016)

874 views

Published on

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

Published in: Technology
  • Be the first to comment

JCE editor optimaliseren (Joomla Den Bosc­h 2016)

  1. 1. JCE editor optimaliseren voor beheerders door Peter Martin www.db8.nl / @pe7er Joomla! Gebruikersgroep 's-Hertogenbosch dinsdag 4 januari 2016
  2. 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. 3 Editor = hulpmiddel
  4. 4. Welke editor?
  5. 5. Welke editor?
  6. 6. Welke editor?
  7. 7. Welke editor?
  8. 8. Welke editor?
  9. 9. Welke editor?
  10. 10. 10 Overzicht Presentatie
  11. 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. 12 Don't make me think
  13. 13. Don't make me think – Steve Krug ● Hoofdstuk 5: Omit needless words = Laat onnodige woorden weg = Verminder keuzes
  14. 14. 14 JCE Profiles
  15. 15. JCE Profiles Profielen = instellingen van de editor ● Back-end: Components > JCE Editor > Editor Profiles ● Volgorde profielen = belangrijk ● Exporteer / importeer profielen
  16. 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. 17 Setup
  18. 18. Toewijzing ● Front-end / back-end gebruikers ● Per apparaat (Desktop, TabletPC, Smartphone) ● Per component ● Per gebruikersgroep ● Per gebruiker
  19. 19. 19 Features & Layout
  20. 20. Verwijder onnodige JCE ikonen ● Beperk keuzes! Verwijder ikonen: – die zelden gebruikt worden – die de vormgeving in de war kunnen sturen
  21. 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. 22. JCE knoppen indelen ● Logische groepen – Tekst weergave | Uitlijning – Hyperlinks | Tools ● Voorbeeld van geoptimaliseerde ikonenbalk:
  23. 23. 23 Editor Parameters
  24. 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. 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. 26 Plugin Parameters
  27. 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. 28. Nog meer verwijderen.... Editor Profiles > [Default] > Plugin Parameters > Format Select houden: Paragraph, Heading2, Heading3, Heading4
  29. 29. Nog meer verwijderen.... ● Plugin Parameters > Article Breaks – Show Pagebreak button: No
  30. 30. 30 Joomla versimpelen
  31. 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. 32. Verwijder onnodige Joomla buttons
  33. 33. Verwijder onnodige Joomla buttons
  34. 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. 35 JCE CSS Styling
  36. 36. editor.css 1/3 Achtergrond van website in achtergrond editor scherm? – JCE > Editor Global Configuration > Reset Editor Styling: Yes
  37. 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. 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. 39 JCE Addons
  40. 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. 41. Joomla Content Editor (JCE) ● Gemakkelijker (Interne) hyperlinks: – Zoek op trefwoorden uit artikel titels en artikel inhoud...
  42. 42. “Captions” ● Onderschrift bij plaatjes
  43. 43. “File Manager” ● Bestanden toevoegen aan artikel – Link naar bestand + automatisch ikoontje van bestandsformaat
  44. 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. 45. “Media Manager” ● Toevoegen van filmpjes aan artikel ● Upload of linken (bijv naar YouTube) ● Verschil met Joomla Plugin zoals “Allvideos Plugin”?
  46. 46. 46 Demo
  47. 47. i e
  48. 48. ● Presentatie beschikbaar via www.db8.nl Peter Martin e-mail: info at db8.nl website: www.db8.nl twitter: @pe7er Vragen?
  49. 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

×