En este artículo te explicamos las opciones para trabajar tus textos en las páginas del portal, es decir, las funcionalidades del editor de los cuerpos principal y secundario. El nombre del editor de Liferay es ckEditor.

Barra de herramientas y opciones de edición

El editor del cuerpo principal y secundario es el mismo. Las opciones que pueden utilizarse son (de izquierda a derecha y de arriba a abajo):

Open

Opciones del editor

Negrita, itálica y cita

Open

Negrita e itálica

Las funciones de negrita e itálica (cursiva) funcionan igual que en cualquier editor de texto.

Paso 1. Seleccionar el texto que quieras.

Paso 2. Pulsar el botón de negrita o cursiva.

Recomendaciones de accesibilidad

Usa la negrita solo para destacar palabras clave, no párrafos completos. Si quieres destacar un párrafo puedes usar el estilo “Párrafo destacado”, pero no abuses tampoco de este estilo.  

Evita usar la negrita para crear encabezados. Siempre usa los estilos Título 2 o 3 para este fin.

La itálica se utiliza solo para marcar palabras o expresiones en latín.

Cita

Las comillas se usan para indicar que el texto que se incluye entre ellas es tal y como aparece en un artículo, libro o web, es decir, es una cita textual. Recomendamos añadir la referencia al texto del que extraigas la cita.

Para aplicar una cita a un texto:

Paso 1. Ponte al inicio del párrafo que quieras que sea una cita.

Paso 2. Pulsa sobre el botón de cita.

Recomendaciones de accesibilidad

El lector de pantalla que utilizan, entre otras, las personas invidentes, anunciará los textos como citas si están marcadas como tales. De esta manera, los usuarios podrán identificar y buscar las citas fácilmente.

Por otra parte, marcar las citas permite identificarlas visualmente con un estilo consistente a lo largo del portal, fácil de modificar de manera global.

Por ello, usa esta herramienta solo para marcar citas, no para aportar un estilo diferente algún texto que hayas incluido en tu página.

Ejemplo incorrecto

Un texto entrecomillado o en itálica, sin marcar como cita en el editor, es incorrecto:

Usar el estilo de cita para resaltar un párrafo es incorrecto:

Ejemplo correcto

Una cita textual marcada con la herramienta “Cita” del editor, es correcta:

Listas numéricas o viñetas

El editor del cuerpo principal permite añadir listas numéricas y de viñetas, utilizando los dos iconos anteriores.

Modificar estilo de la lista

Una vez creada la viñeta se puede modificar y cambiar por otro modelo, para ello hay

Paso 1. Pinchar con el botón derecho sobre la lista y pinchar en propiedades de viñetas, como se ve en la imagen: 

Paso 2. Aparece un desplegable con tres opciones para modificar el símbolo de viñeta, como se aprecia en la imagen:

De igual forma, si las listas son numéricas, también se pueden cambiar por números romanos o por letras, en la imagen se aprecian las cinco opciones posibles: 

Recomendaciones de accesibilidad

Usa siempre la herramienta “Lista”. No simules las listas con párrafos precedidos de un guion, asterisco o número.

Si hay una serie de enlaces seguidos, es importante que los marques como una lista.

Es muy recomendable que antes de una lista incluyas una frase introductoria en un párrafo diferente, así es más fácil ojear y comprender las listas.

Las listas ayudan a ojear el contenido y a mejorar la legibilidad del texto.

El lector de pantalla que usan, entre otras, las personas invidentes, anuncia las listas, cuántos elementos tienen y permite saltarlas cómodamente, pero solo si son listas definidas con la herramienta “Lista”.

Ejemplos incorrectos

Un listado de enlaces en párrafos, en vez de maquetados en una lista, es incorrecto:

Una enumeración en párrafos, aunque tengan un signo o número delante, es incorrecta si no está creada con la herramienta “Lista”:

Ejemplo correcto

Una lista creada con la herramienta “Lista” y precedida de un párrafo introductorio breve, es correcta:

Estilos

En este desplegable puedes:

• Dar estilos para títulos o encabezados.

• Crear recuadros de texto que denominamos “Tarjetas” con enlace y texto explicativo debajo de él.

• Resaltar algún párrafo.

A continuación te explicamos estas opciones.

Aplicar estilos para los encabezados

Utiliza la jerarquía de encabezados siempre de esta manera:

• Los encabezados de cada sección será títulos de nivel 2.

• Las subsecciones tendrán títulos de nivel 3.

Los encabezados permiten comprender la estructura del contenido ojear el documento y encontrar más fácilmente la información que se busca.

Para aplicar un estilo a un texto:

Paso 1. Ponte al inicio del texto que quieras que sea una encabezado.

Paso 2. Despliega el menú de Estilo.

Paso 3. Selecciona el estilo de Título que quieras, Título de nivel 2 o Título de nivel 3.

Recomendaciones de accesibilidad

Los encabezados deben ser breves y concisos.

No debe haber dos encabezados con el mismo texto en la página.

Solo deben marcarse como encabezados los elementos que funcionan como tales.

Nunca debes aplicar el estilo de título a un elemento solo para destacarlo.

Simular un encabezado mediante un estilo negrita o un texto en mayúsculas.

Cuando tengas tres o cuatro secciones precedidas de un encabezados de nivel 2, marca la casilla “Generar anclas” para mostrar el índice de secciones al comienzo de la página, salvo que la página sea una noticia.

Es conveniente que el primer contenido de la página esté precedido de su correspondiente encabezado de nivel 2.

Recomendaciones de lenguaje claro

Los encabezados deben ser descriptivos: deben clarificar qué información encontrará el ciudadano en una sección.

Ejemplos incorrectos

Una página cuyas secciones están precedidas de un encabezado de nivel 3, en vez de un encabezado de nivel 2, es incorrecta.

Una página cuyas secciones están precedidas de párrafos en negrita y en mayúsculas que simulan encabezados, es incorrecta.

Una página cuyos encabezados ocupan cuatro líneas, es incorrecta, puesto que los encabezados deben ser descriptivos pero concisos.

Una página con varios encabezados con el mismo texto, es incorrecta:

Ejemplos correctos

Una página …

• estructurada en secciones temáticas precedidas de un encabezado de nivel 2,

• donde cada sección tiene subsecciones precedidas de un encabezado de nivel 3,

• donde los encabezados están redactados de forma sencilla, descriptiva y única en cada caso,

… es correcta.

Párrafos con estilos

El editor ofrece en el apartado de estilos, tres formatos para destacar un párrafo:

• Destacado gris

• Destacado amarillo

• Destacado azul

Para dar formato al párrafo:

Paso 1. Debes de seleccionarlo.

Paso 2. Clicar en el estilo que prefieras.

El estilo se verá aplicado en la edición del contenido. Todos los párrafos destacados irán uno debajo del otro.

1. Puedes consultar el apartado de Componentes para conocer cómo usar correctamente estos estilos en las páginas.

Generar tarjetas

Estos estilos se utilizan para crear apartados con un estilo que llamamos “tarjetas” en el Cuerpo Principal.

En este estilo hay dos elementos diferentes :

1. El estilo “Título tarjeta” se le asigna al título que queramos poner. Este título debe ser un enlace, para ello, introducimos un vínculo, de la misma manera que haríamos para otros vínculos del portal (puedes consultar el apartado siguiente de “Añadir enlace”. Dicho enlace será a páginas del portal o a documentos. El título deberá de tener menos de 40 caracteres para que no se produzca un desbordamiento.

2. El estilo “Cuerpo tarjeta” lo tienes que aplicar al párrafo siguiente. El cuerpo de la tarjeta deberá de tener entre 80 – 90 caracteres (depende de la distribución de las palabras) para que no se produzca un desbordamiento.

Enlaces

Enlace a página web

Para crear un enlace:

Paso 1. Debes seleccionar el texto que quieras que sea enlace.

Paso 2. Clicar en el botón de enlace (como el que aparece al principio de este apartado).

Si clicas dos veces sobre el enlace, se abrirá una ventana con información como la que aparece a continuación:

En esta pantalla, pestaña “Información de Vínculo” puedes personalizar:

• El texto del enlace (Display Text): es el texto que ve el ciudadano o ciudadana.

• Tipo de vínculo: lo más normal es poner URL, aunque en ocasiones será interesante usar E-Mail, cuando quieras hacer un enlace a un correo electrónico.

• Protocolo: normalmente siempre estará en https:// y en ocasiones, cuando es a una página del portal aragon.es, estará en el campo protocolo la opción <otro>.

• URL: es donde tiene que aparece la dirección o página web a la que quieres que el usuario o usuaria vaya.

Las pestañas de “Destino” y “Avanzado” las veremos a continuación ya que tendrás que rellenar algunos apartados de las mismas para que los enlaces sean accesibles.

Recomendaciones de accesibilidad

El texto de los enlaces debe ser descriptivo y conciso de tal manera que los usuarios y usuarias puedan comprender su propósito.

Un texto de enlace si es “Pulse aquí” o “Enlace”, no es descriptivo. Un enlace no es conciso si el enlace tiene más de 250 caracteres -a excepción de enlaces a leyes-. A pesar de ello, suele ser más claro que el enlace no esté en todo el nombre de la ley, pero sí en suficientes palabras para comprender el enlace y diferenciarlo de otros.

Esta es peor opción:

Aunque la longitud máxima del texto de un enlace son 250 caracteres, la inmensa mayoría de los enlaces deberían ser mucho más concisos.

Los enlaces que llevan a URL diferentes deben tener textos de enlace diferentes; por el contrario, los enlaces que enlazan a la misma página deberían tener el mismo texto de enlace.

Si el enlace es a un documento, deberías indicar su formato y su tamaño. Por ejemplo, “Glosario de términos (PDF, 100 KB).

Si un documento o página se abre en una ventana nueva se debe indicar: “Se abre en ventana nueva”, como se detalla en las siguientes imágenes:

Y en destino no se indica que se abra en nueva ventana, por lo que se abrirá en la misma ventana

Ejemplos correctos/incorrectos

Enlace a documentos

1. Consulta Documentos > Subir documentos al Portal.

Paso 1. Una vez subido el documento, volvemos a la plantilla de contenido final para poder insertarlo en el cuerpo de texto.

Paso 2. Escribe el título del documento en el cuerpo principal.

Paso 3. Pincha en el dibujo de vínculo en el menú de edición para insertar enlace al documento.

Paso 4. Selecciona “Otro” en el apartado “Protocolo”.

Paso 5. Pincha en Ver Servidor para seleccionar el documento subido en Documentos y multimedia y por último pinchar en Añadir.

Paso 6. Por último, pincha en Aceptar. 

Y una vez hechos todos los pasos anteriores, queda el título completo del documento con un hipervínculo al documento seleccionado. 

y por último seguir editando o publicar.

Idioma del texto

Los textos que incluyas en el Liferay en la estructura de “Contenido final” tienen que estar en español.

En el caso de que en tu texto haya una palabra que se suele usar en inglés, te recomendamos la consulta en un buscador de la opción recomendada en español.

Ejemplo

Por ejemplo, si en tu texto aparece Webinar, consulta en Internet a ver si hay una opción en español poniendo en Google: Webinar Fundeu y aparece esta entrada en la Fundeu que recomienda usar “Seminario web o webinario” en vez de webinar.

Recomendaciones de accesibilidad

La especificación del idioma en nuestros textos es necesaria por accesibilidad ya que el lector de pantalla que utilizan, entre otras, las personas invidentes, leerá los textos con la fonética adecuada si se indica su idioma.

Pasos para especificar el idioma de un texto

Paso 1. Seleccionar el texto en otro idioma

Paso 2. Desplegar la opción de idioma

Paso 3. Elegir el idioma en el que está el texto.

Imagen

Esta opción del editor sirve para añadir imágenes. Algunas situaciones en las que puede ser necesario:

• para que funcione la plantilla Contenido final (agregadoras),

• para insertar logotipos, o

• para ilustrar o acompañar el texto.

Añadir imagen en el cuerpo del contenido

Paso 1. Pulsa el botón “Imagen” y sale esta ventana:

Aquí puedes elegir:

• Documentos y multimedia: podrás recuperar fotografías que están guardadas en las subcarpetas de Liferay que están dentro de “Documentos y multimedia”. Son imágenes que has subido tú u otros publicadores (carteles, fotografías, logotipos) o que las hemos descargado del banco de imágenes Shutterstock (estas están dentro de la carpeta “Banco de imágenes”).

• Opendata imágenes: podrás recuperar e insertar fotografías almacenadas en otras fuentes como en los archivos fotográficos que hay en DARA (Documentos y Archivos de Aragón). Estas son fotografías históricas. Más información en DARA.

• URL: donde puedes poner una URL de una imagen (esta función no la utilizamos nunca).

Paso 2. Elegir la pestaña en la que vas a buscar imágenes

Pestaña “Documentos y multimedia”

Pestaña “Opendata imágenes”

1. Consulta el apartado de Generar nuevo contenido para conocer cómo funciona la inclusión de imágenes en estos apartados.

Recomendaciones de accesibilidad

1. Es importante que consultes las recomendaciones de accesibilidad para imágenes.

Tablas

Las tablas debes crearlas directamente en el editor de Liferay.

Añadir tabla

Pasos para insertar una tabla desde el editor:

Paso 1. Pulsa el botón en forma de tabla situado en la parte superior derecha del editor:

Paso 2. Se abre un desplegable donde podrás introducir el número de filas y columnas que tendrá tu tabla. 

Paso 3. Pulsa el botón de “Crear tabla”.

Paso 4. Aparecerá en tu contenido la tabla creada con las filas y columnas que hayas seleccionado y un título y una descripción por defecto. 

En caso de que queramos eliminar la tabla entera o una parte de esta, debemos de seleccionarla y pulsar la tecla de suprimir o retroceso.

Hay que tener especial cuidado con las tablas y su accesibilidad ya que las tablas son más difíciles de comprender que otro tipo de contenidos, especialmente para las personas con discapacidad visual y con discapacidad cognitiva.

Esta dificultad se minimiza considerablemente si la tabla es lo más sencilla posible y tiene un título y una descripción adecuados.

El lector de pantalla que utilizan, entre otras, las personas invidentes, leerá al usuario el título y la descripción de la tabla, por lo que su función es complementaria. El título identifica la tabla para todos los usuarios, mientras que la descripción permite hacerse una imagen mental de la tabla para comprender su estructura y recorrerla de manera más eficaz.

La tabla es más sencilla de recorrer y comprender con el lector de pantalla si no tiene celdas unidas ni celdas vacías.

Recomendaciones de accesibilidad

Redacta un título para la tabla que permita identificar qué contenido se muestra en la misma. Se incluye en “Propiedades de Tabla > Título”.

Redacta una descripción para la tabla que permita que las personas ciegas que acceden con un lector de pantalla comprendan mejor la estructura de la tabla. La descripción se redacta en el texto que se inserta automáticamente antes de la tabla.

Haz la tabla lo más sencilla posible. Evita que la tabla tenga varias filas o columnas de celdas de encabezado. Si es necesario, divídela en dos tablas diferentes.

No unas las celdas, es mejor mantener todas las celdas y repetir en ellas el dato.

No dejes vacías las celdas, es mejor poner un dato. Por ejemplo, en una tabla con datos numéricos, es mejor poner “sin datos” en una celda que dejarla vacía.

Por otra parte, nunca debe incluirse una tabla para posicionar contenido en la página. Las tablas solo deben usarse para incluir datos tabulares.

Por último, no se debe modificar el estilo de las tablas. De este modo, su aspecto será homogéneo a lo largo de todo el portal y no habrá problemas de visualización o accesibilidad.

Ejemplo incorrecto

Tabla con una descripción incorrecta

(“Usos y actividades afectadas”) antes de la tabla:

Una descripción adecuada sería: “Usos y actividades afectadas por cada tipo de procedimiento. En cada fila se incluye el enlace y la información de un procedimiento.”

Es decir, como la tabla no tienen título, la descripción identifica la tabla y da información útil para comprender la estructura de la tabla si no puedes verla.

Tablas innecesarias

Estos datos estarían mejor estructurados mediante encabezados, texto y listas.

Ejemplo correcto

Tabla con un título a pie de tabla y una descripción adecuada. Tiene una estructura sencilla, sin celdas unidas y con un dato en cada celda:

Accesibilidad

El editor de texto tiene una herramienta para comprobar la accesibilidad del contenido basada en los estándares (Web Accessibility del Consorcio del a World Wide Web o W3C.

Esta herramienta tiene la funcionalidad de poder visualizar información sobre problemas de accesibilidad del texto escrito en el cuerpo principal o cuerpo secundario.

No limita a la hora de poder publicar el documento, por lo que se va a poder seguir publicando el contenido, aunque haya fallos en la accesibilidad; de todas maneras, es muy recomendable ver los errores y proceder a eliminarlos para mantener la accesibilidad del portal.

Activar/desactivar la revisión de accesibilidad

Paso 1. Para desplegar la tabla solo hay que hacer clic sobre el botón; para esconderla, nuevamente pulsar sobre este botón.

Paso 2. Corregir los errores que aparezcan en el editor de Liferay

Paso 3. No hace falta publicar para ver los resultados de las correcciones. A la vez que vayamos corrigiendo los errores de accesibilidad en nuestra edición de contenido, al abrir de nuevo la tabla veremos que estos van desapareciendo.

Información que ofrece: errores y avisos

La herramienta ofrece información en forma de tabla en la que aparecen las siguientes columnas:

• Tipo: es el tipo de error que identifica. Podrá ser “Error” (error) o “Warning” (avisos).

  • Un Error es un problema grave de accesibilidad que tienes que corregir.

  • Un Warning es un aviso. Normalmente son mensajes para que compruebes que has cumplido correctamente las normas de accesibilidad, como puede ser que revises a ver si has realizado la estructura jerarquizada de encabezados.

• Mensaje: es el texto explicativo del Error o Warning que ha encontrado la herramienta.

• Código: es el fragmento de código HTML donde la herramienta ha identificado que está el error o aviso. Si no lo sabes interpretar te recomendamos:

  • Paso 1. Abre esa página en una nueva pestaña.

  • Paso 2. Pulsa botón derecho del ratón sobre la página

  • Paso 3. Selecciona la opción del menú emergente que se llama “Inspeccionar”.

  • Paso 4. Pulsa las teclas Ctrl + F y se abrirá una caja de búsqueda.

  • Paso 4. Copia el código HTML de la tabla y pégalo en la caja de búsqueda para identificar la parte de la página donde está el aviso.

• Norma: son los principios de la norma que aplica el W3C. Aquí puedes conocer más sobre ellos:

• Técnica: es el nombre de la técnica que aplica el W3C. Al clicar sobre ellas, te dirige a la página oficial de W3C explicando cada norma y es de gran ayuda para poder solucionar algunos problemas de accesibilidad.

Mucha de la documentación de W3C está en inglés. Para traducir el contenido desde un navegador Chrome, puedes clicar en el botón derecho sobre la página que quieras traducir y buscar la opción de “Traducir a español”: 

También hay algunos documentos traducidos en español que puedes consultar.

Textos sin formato, copiar y pegar

En tu trabajo diario en ocasiones tendrás que copiar y pegar textos que hayas trabajado previamente en un documento Word o PDF.

• Eliminar formato (T subrayada y una x): con esta opción podrás quitar el formato que tenga un texto que esté en el editor ya pegado con anterioridad.

• Cortar (tijeras, Ctrl + x): quitar un texto de un sitio para poderlo poner en otro sitio.

• Copiar (una hoja encima de otra, Ctrl + c): replicar un texto que está en un sitio en otro sitio.

• Pegar (hoja, Ctrl + v): mover un texto, que previamente has cortado, a otro sitio respetando el formato que tiene el texto en su origen (negrita, enlace, etc.).

• Pegar como texto plano (documento con una T, Ctrl+May+V): mover un texto, que previamente has cortado, a otro sitio pero sin formato.

Corrector ortográfico

El editor incluye un corrector ortográfico que va asociado al navegador.

El corrector marca con subrayado en rojo aquellas palabras en español que no reconoce o que estén mal escritas. Siempre deberemos de atender a estas indicaciones para corregir los errores que podamos cometer durante la redacción del texto.

La herramienta del corrector ortográfico permite hacer una corrección ortográfica del contenido antes de ser publicado.

Activar el corrector

Paso 1. Pulsar sobre el botón y se abrirá un desplegable.

Paso 2. Selecciona la opción “Activar corrector”.

Paso 3. Una vez activado el corrector, si pulsas de nuevo sobre el botón aparecen activos el resto de opciones del desplegable.

• Opciones: Desde aquí puedes configurar el corrector.

• Idiomas: Es importante esta pestaña, ya que por defecto viene seleccionado “Inglés americano”, por lo que tendrás que cambiarlo al español, ya que sino te marcará en rojo tus textos en español.

• Diccionarios: te permite añadir palabras y crear un diccionario propio.

• Acerca de Corrector: para conocer más información acerca del corrector utilizado.

Desarrollo de siglas

En nuestros textos es frecuente encontrar siglas de organismos.

Recomendaciones de accesibilidad

Tienes que incluir la forma extendida de las siglas la primera vez que las uses. Por ejemplo, BOE (Boletín Oficial del Estado).

La explicación del acrónimo se admite tanto antes como después, por lo que es igual de válido CBA (Comisión de Bioética de Aragón) que Comisión de Bioética de Aragón (en adelante CBA).