Creación, mantenimiento y asistencia web

Crear contenido en Joomla con el editor JCE

Joomla Content Editor

Si conoces Joomla probablemente conozcas también uno de sus editores de contenidos más utilizados y galardonados: JCE (Joomla Content Editor).

Es un editor libre y gratuito. Dispone de un sistema de plugins (del cual hablo al final de este artículo) para aumentar sus capacidades. Estos siguen siendo libres pero tienen un pequeño coste.

Dispone además de un perfil especialmente creado para tablets o móviles que facilita mucho la edición de contenidos en este tipo de dispositivos, aunque no viene activado por defecto.

Quiero aclarar que no estoy afiliado ni patrocinado por JCE. Escribo este artículo porque llevo utilizando este editor durante años en mis webs y recomendándolo para las de mis clientes.

Veamos a continuación cuáles son los principales beneficios de este editor y cómo usarlos.

La instalación es sencilla, se realiza como cualquier otra extensión de Joomla. Una vez instalado hay que activarlo en la configuración global (o para cada usuario si se quiere usar otro editor por defecto).

Lo que sí, los añadidos como traducciones a otros idiomas y plugins se instalan dentro de la configuración de JCE, no como otra extensión de Joomla.

Pegar sin formato

Herramienta para pegar como texto plano, sin estilos

Esta es una herramienta muy útil para eliminar etiquetas y estilos que puedan venir en un texto copiado desde, por ejemplo, un procesador de textos u otra página web.

Es necesario hacer esto porque generalmente se introducen etiquetas HTML y estilos CSS no válidos o no compatibles con los de nuestra web.

Permitamos que del diseño se encargue la plantilla.

Lo ideal es aplicar clases y utilizar el tipo de elemento necesario en cada caso. Por ejemplo:

  • Para mostrar un listado como este no utilices guiones, existe un elemento que define listado. La comento más abajo.
  • Si queremos mostrar un mensaje de aviso importante, muchas plantillas ya tienen clases que se pueden aplicar a ese párrafo concreto como "text-warning" o similares. Y si estas clases no existen, se pueden crear en un archivo CSS.

De esta manera se encarga la plantilla o template de darle el diseño deseado a la web y si un día se cambia, no es necesario editar todos los artículos.

Negrita, subrayado, cursiva y tachado

negrita, cursiva, subrayado y tachado

Marcar en negrita nuestros textos con JCE hará que estén dentro de una etiqueta HTML <strong> y por tanto los buscadores también sabrán que ese texto es importante.

No soy de usar subrayado ya que podría confundirse con un enlace. Tampoco el tachado salvo casos excepcionales.

Formato: títulos, párrafos, marcos...

Selección del elemento HTML

Para esto tienes un selector en la primera línea del editor. Puedes indicar de qué tipo es el texto que se está añadiendo. Por defecto es un párrafo pero se puede cambiar por cualquiera de las siguientes:

  • Títulos o encabezados, del nivel 1 al 6.
  • Divs o "marcos". Suele emplearse para crear un contenedor ya sea para agrupar elementos o lo que se desee. Muy empleado para introducir contenidos que no son de tipo texto, como por ejemplo plugins que inserten un vídeo o un mapa.
  • Código. Para insertar código máquina.
  • Código de ejemplo. Similar al anterior pero más utilizado para representar la salida de un mensaje del ordenador.
  • Dirección. Para los datos de contacto o similares. Admite párrafos en su interior.
  • Texto preformateado (fuente de ancho fijo y respetando los espacios como hayan sido escritos).
  • Etcétera.

Normalmente no uso títulos de nivel 1 dentro del texto de un artículo porque el título de mayor nivel de este debe ser el propio título ya establecido antes en el formulario.

Listas y numeraciones

Listas y numeraciones

No utilices guiones escritos por ti. Indica que estás creando una lista, ya sea numerada o con simples viñetas, y verás que el aspecto de la misma mejora. Y se puede mejorar todavía más con CSS.

Si un elemento de una lista contiene subelementos, se puede indicar con los botones de sangría que hay justo al lado.

Insertar imágenes

Insertando imágenes con JCE

Una de las ventajas mas importantes de JCE es su gestor multimedia. Es una gran herramienta para la administración de imágenes y ficheros en general ya que nos ofrece un navegador de archivos muy completo.

Para las imágenes principales de un artículo (la de la introducción y la del texto completo) generalmente recomiendo utilizar las propias Opciones de imágenes y enlaces que nos ofrece Joomla. Pero si estamos insertando una imagen dentro del contenido, esta herramienta es muy útil.

Cuando se suben imágenes al servidor hay que subirlas optimizadas, es decir, al tamaño al que se van a mostrar a los navegantes. Joomla o JCE no redimensionan las imágenes. JCE tiene un plugin que sí lo hace, hablo de él más abajo.

Recuerda pasar tus imágenes por una herramienta como TinyPNG para reducir el tamaño que ocupan en disco y que la web cargue más rápido.

No te olvides nunca del texto alternativo de la imagen. Un texto que describa la imagen por si esta no carga, para un ciego o incluso para un robot rastreador de Internet (SEO).

Crear enlaces

Insertar enlaces con JCE

La herramienta de insertar enlaces es muy práctica. Permite escribir la URL directamente o seleccionar de entre los elementos de menú o contenido. Cuidado con esto que puede causar que se llame a un elemento con una URL distinta a la que se usa normalmente para llegar y podremos generando una URL duplicada (el mismo contenido en dos URLs distintas, penalizado por buscadores).

No te olvides nunca del título del enlace. Un texto que describa el destino al que se va a ir cuando se haga clic. Este texto aparecerá sobre en enlace al pasar el ratón por encima. También es muy tenido en cuenta por temas de accesibilidad y para el posicionamiento en buscadores de la página de destino.

Para romper un enlace sin eliminar el texto se puede utilizar el icono de justo al lado.

Si usamos una biblioteca como Bootstrap 3 y queremos que este enlace parezca un botón, podemos añadirle las clases btn y btn-default (para un botón normal) o también las clases btn y btn-primary (para un botón con el color principal del sitio), para una llamada a la acción por ejemplo. Las clases se introducen en la pestaña Avanzadas al introducir en enlace.

Cómo usar las anclas para enlazar un contenido en mitad del artículo

Botón para insertar un ancla HTML

Esta técnica se usa cuando queremos generar un enlace que vaya a un contenido concreto dentro de una página (se carga la página a la altura en el que está ese contenido), no al princio (arriba de todo).

  1. Insertando un identificador al elemento que quieres llegar utilizando el icono del ancla. El código HTML es, por ejemplo:
    <h2 id="identificador">Texto del título</h2>
  2. En la URL del enlace a la página hay que añadir al final el símbolo numeral o almohadilla (#) y el mismo identificador usado antes. Por ejemplo:
    <a href="http://www.dominio.com/pagina#identificador">Texto del enlace</a>.
    Ojo, esto es un ejemplo, a este enlace le falta al menos un título.

Generación de tablas adaptables o responsive

tables

JCE incluye una herramienta para la generación de tablas. Se le indica el número de filas y columnas que necesitamos y ya está lista. Mejor no usar los campos para configurar border, espaciados...

Que una tabla sea adaptable o no ya depende de la plantilla. Si usas Bootstrap 3 puedes añadirle a la tabla algunas de estas clases:

  • table: añade ciertos estilos a la tabla que le dan una mejor presencia. Esta clase hay que añadirla siempre que se vaya a utilizar alguna de las siguientes.
  • table-striped: hace que las líneas impares tengan un color de fondo para un lectura más cómoda.
  • table-bordered: añade un borde a la tabla y a sus celdas.
  • table-hover: al pasar el ratón por encima de una fila cambia su color de fondo.
  • table-condensed: hace la tabla un poco más compacta.
  • table-responsive: utilizar esta clase provoca que en dispositivos de resolución menor a 768 píxeles, si es necesario, la tabla tenga desplazamiento horizontal.

Una vez generada también nos ofrece herramientas para añadir y eliminar filas o columnas así como combinar celdas. También tenemos un botón para eliminar la tabla completa.

Citas

blockquotes

JCE nos permite insertar dos tipos de citas disponibles en HTML5: <cite> y <blockquote>.

El primero marca una referencia a una fuente, por ejemplo el título de una película. Sería lógico que se incluya un enlace. No se activa hasta que no realizamos una selección de texto.

El segundo crea una cita en bloque, por ejemplo, un diálogo de una película. Como curiosidad, dentro de este bloque podría introducirse una cita también para mencionar el nombre de la película.

La imagen que se muestra es el icono de <blockquote>.

Abreviaturas y acrónimos

abbreviations

Las abreviaturas y los acrónimos se representan del mismo modo. En versiones de HTML anteriores se marcaban por separado pero ahora ya no, solo se utiliza la abreviatura.

Lo único que hay que hacer es seleccionar el texto y pulsar el botón. Se nos abre una ventana que nos pide los datos. Como mínimo hay que indicar lo que significa (el título) y el idioma en el que está (si cambia con respecto al resto del texto).

Por defecto, en algunos navegadores, se muestra este texto subrayado con puntos y, al pasar el ratón por encima, el puntero se convierte en un interrogante desplegando el mensaje escrito en el título.

Insertar símbolos, subíndices y superíndices

Superíndices y subíndices

Si necesitamos incluir algún símbolo, subíndices y superíndices para contenidos técnicos tenemos herramientas que nos lo ponen fácil.

Para introducir en el contenido fórmulas matemáticas complejas me iría a otra solución, de la cual espero poder hablar pronto en otro artículo.

Linea horizontal de separación

Línea de separación horizontal

Algo simple y sencillo: una línea horizontal. Dependiendo de la plantilla podría tener unos estilos u otros. Si no, también se los podemos aplicar nosotros.

Estilos o clases

Herramienta de selección de estilos o clases

Esta herramienta permite aplicar esas clases que comentábamos al contenido rápidamente.

JCE obtiene estos estilos o clases de la plantilla y se pueden añadir los nuestros propios personalizados. Tutorial sobre cómo crear estilos o clases propias (en la propia web de JCE, en inglés).

Insertar el botón de "Leer más..."

Insertar el enlace de leer más

En Joomla disponemos de una serie de botones bajo el editor que nos permiten insertar contenido en el artículo. Uno de ellos, que viene activado por defecto, es el botón de insertar la frontera entre el texto de introducción y el completo. El primero es el que se muestra en una categoría con otros artículos y el segundo es el artículo completo.

JCE trae a mayores otro botón para añadir esta etiqueta. Y de hecho, es el que te recomiendo usar porque funciona algo diferente.

Para insertar la separación simplemente sitúate al final del último párrafo de la introducción y pulsa el botón. Te creará una línea horizontal (<hr>) con un identificador para que el sistema sepa que ahí va el salto.

Si haces esto con el editor de Joomla hay un problema y es que la línea horizontal la crea dentro del párrafo.

Corrección ortográfica

Corrección ortográfica

Es importante cerciorarse de que no se nos cuela ninguna falta de ortografía en nuestros textos, así que JCE trae un corrector ortográfico.

Se puede configurar en cada perfil permitiendo seleccionar qué motor se utiliza para las correcciones. Por defecto se usa el del navegador pero se puede cambiar a PHP PSpell o a Enchant Spell con sus correspondientes opciones de configuración.

Buscar y reemplazar

Buscar y reemplazar

Herramientas para buscar texto y a mayores poder reemplazarlo por uno nuevo. También se puede usar dentro de la vista de código HTML, del que hablo a continuación.

Editor de código HTML

Editor de código HTML

Aunque es mejorable, el editor de HTML de JCE es muy bueno. Se activa simplemente pulsando sobre el botón correspondiente.

Colorea las etiquetas y las indenta para que la lectura sea más fácil. También ayuda a que no nos olvidemos de cerrarlas. Por ejemplo, cuando abres un párrafo <p>, lo cierra automáticamente (</p>) y deja el cursor justo en medio para escribir su contenido.

Edición a pantalla completa

Editor a pantalla completa

Esta herramienta nos permite poner el bloque del texto que estamos editando a pantalla completa, de esta forma ganamos espacio y trabajamos más cómodamente. En muy práctico para  pantallas pequeñas y medianas.

Herramientas a evitar

Hay algunas de las herramientas de JCE que no recomiendo utilizar excepto en ocasiones puntuales.

  1. Alineación del texto (izquierda, derecha, centrado o justificado).
  2. Selector de familia tipográfica.
  3. Cambio del tamaño del texto.
  4. Alteración del color del texto o de su fondo.
  5. Herramienta de edición de estilos CSS.

Todas ellas insertan estilos en línea y por tanto es conveniente evitar o limitar su utilización. Como ya he dicho antes, es preferible asignarles una clase CSS ya existente o crear una nueva en nuestra plantilla o template.

Tampoco se debe usar la etiqueta para acrónimos, porque en HTML5 ya no existe, se usa la de abreviatura.

Otras opciones y su configuración

JCE es un editor altamente configurable y personalizable.

A nivel administración, se pueden establecer distintos perfiles en función de:

  • quién lo use,
  • desde dónde,
  • a qué componente acceda,
  • a qué grupo pertenzca el usuario,
  • qué usuario concreto sea.

Pudiendo ajustar así las funcionalidades necesarias en cada caso. Por ejemplo, se puede crear un perfil para simplificar la edición en dispositivos con pantalla pequeña o para usar desde el frontend o parte pública de nuestra web.

Otro punto a su favor es que permite la configuración completa de botones o herramientas disponibles para la edición y su orden para cada perfil.

Un detalle interesante es que se puede desactivar el editor pulsando sobre [Toggle Editor]. Esto puede ser útil en algún caso en el que queramos, por ejemplo, que no nos corrija el código introducido.

Extensiones o plugins

Los creadores del editor ofrecen plugins para potenciarlo todavía más. Estos son de pago. En el momento de escribir este artículo el coste para tener acceso a todos los plugins es de 30 euros, y la verdad es valen mucho más de lo que cuestan.

No estoy afiliado, por si alguien se lo pregunta, al menos todavía ;)

Gestor avanzado de imágenes

Este gestor avanzado de permite editar imágenes directamente en el servidor. así como crear ventanas emergentes para que el navegante pueda ampliarlas.

Pero una de las grandes ventajas que le veo es que permite escalar la imagen cuando la subes, estableciendo si fuese necesario dos tamaños de redimensión. Esto nos evitará publicar imágenes de tamaño demasiado grande que tardarían mucho en cargar, empobreciendo la experiencia de usuario y, por tanto, el posicionamiento en buscadores.

Herramienta para insertar iframes

Perfecta para embeber vídeos de Youtube, mapas de Google o cualquier otro elemento de este tipo.

Otros plugins

También crearon plugins para insertar los pies de imágenes, emoticonos, microdatos, gestionar el almacenamiento en Amazon S3 y algunos más. Puedes consultarlos todos en la página de plugins de la web de JCE.

Documentación oficial

Toda esta información y mucha más está disponible en el apartado de documentación la web de JCE (en inglés).

Comentarios  

Marcos Oya
+3 #1 Marcos Oya 28-01-2016 21:58
A veces nos olvidamos de lo obvio, un gran artículo, tremendamamente util.
Citar
Pablo Arias
0 #2 Pablo Arias 28-01-2016 22:18
Muchas gracias Marcos!
Citar

  

Desarrollo web

Construyo sitios web. Especializado en Joomla y en la programación frontend.

Formación

Cursos y ponencias de desarrollo web y TIC presenciales y online.

Mantenimiento web

Actualizaciones, asistencia técnica, mejora continua... lo que necesitas para tu web.

Apúntate y recibe gratis directamente en tu buzón de correo la Guía rápida de iniciación a Joomla.

Además, cada cierto tiempo envío trucos y novedades para aplicar a tu sitio web.

No me gusta el correo basura. Protejo tus datos.