Gutenberg, el nuevo editor de texto de WordPress

En 2018, el editor de texto de WordPress experimenta una gran evolución. El editor de texto TinyMCE se sustituye por un nuevo concepto llamado Gutenberg en todas las páginas web que utilizan el programa WordPress.

Gutenberg se presenta como un nuevo editor que simplifica la publicación de contenidos en WordPress, y se centra en la simplificación de diseños complejos y la agregación de contenido externo y multimedia.

Así, Gutenberg funciona con un sistema compuesto íntegramente por “bloques”, que designan cada elemento (título, párrafo, elemento multimedia, etc.) que pueden ser insertadso en una entrada o página. Estos bloques se han diseñado para facilitar la inserción y modificación de elementos en el contenido, en comparación con el editor tradicional (TinyMCE), mediante la integración en el sistema de bloques de funciones que antes eran accesibles a través de shortcodes o código html (“embed”, por ejemplo).

Una interfaz depurada

La presentación de la interfaz para editar una página o entrada con Gutenberg es muy minimalista.

Interfaz para editar una entrada con TinyMCE
Interfaz para editar una entrada con Gutenberg

En la parte superior, la zona de opciones de edición  está separada del contenido de la interfaz por una sola línea. En esta zona podemos encontrar:

  • la posibilidad de añadir un nuevo artículo, cancelar o restablecer una acción;
  • el estado de publicación del contenido (guardar el borrador, actualizar el borrador, publicar, actualizar la entrada);
  • opciones generales de contenido.

El resto de la página contiene el documento a publicar.

La columna lateral de las opciones se abre haciendo clic en el icono de la rueda estrellada en la parte superior de la interfaz. Contiene todos los metadatos del documento, agrupando las columnas que se encontraban en el laterral en la interfaz anterior: palabras clave, categorías, opciones de publicación (estado, planificación, etc.). También contiene los ajustes para los “bloques”.

Funcionamiento por bloques

Cada elemento (título, párrafo, elemento multimedia) insertado en una entrada o página está contenido en lo que WordPress llama un “bloque”. Al importar texto procedente de un documento de procesador de texto, WordPress convertirá las diferentes partes del texto en tantos bloques de forma tan fluida (quizás más) a como lo hacía con la interfaz antigua.

Al hacer clic en un bloque se abre una pequeña barra de edición específica con las principales opciones de formato. Así, un bloque que contenga texto tendrá una barra de edición para formatear este texto. Para un bloque que contenga una ilustración, la barra de edición permitirá ajustar la alineación y el tamaño de la imagen.

En la barra lateral de configuración podemos encontrar opciones de personalización más avanzadas.

Cuando se redacta un texto directamente en WordPress, es posible añadir bloques haciendo clic en el signo “+” junto al texto ya escrito. Luego, el editor propone los diferentes tipos de “bloques” que se pueden añadir. Entre los bloques nativos de uso común, encontramos los siguientes:

  •    Texto simple y niveles de título;
  •     Imagen;
  •     Galería de imágenes / videos / sonidos;
  •     Citas;
  •     Lista numerada / con viñetas;
  •     Imagen destacada;
  •     Lector multimedia;
  •     Tablas;
  •     Texto preformateado y código fuente;
  •     Etiqueta “Leer más”;
  •     Columnas de texto.

Probar Gutenberg

Si deseáis probar en directo el nuevo editor de WordPress, una página de demostración está disponible en WordPress: https://testgutenberg.com/.

Recursos

En internet  hay muchos tutoriales muy completos que describen las características de Gutenberg y explican su manejo. Os proponemos una selección:

¿Qué es el editor Gutenberg de WordPress?

Introducing a new way to WordPress – WordPress.org (en inglés)

Gutenberg : le tutoriel pour maîtriser le (futur?) nouvel éditeur de WordPress – WPFormation (en francés)

Si tenéis alguna pregunta sobre cómo empezar con este nuevo editor, no dudéis en enviar un mensaje a la Lista de blogueros a blogueros@groups.openedition.org. Vuestras preguntas, y sus respuestas, beneficiarán indudablemente a toda la comunidad de blogueros.

Twenty Sixteen para un blogging moderno

Hypothèses prioriza para sus usuario/as las plantillas desarrolladas por los equipos de WordPress para una mayor durabilidad, homogeneidad y flexibilidad a largo plazo de la plataforma. Encontraréis todas las plantillas disponibles en la categoría “Apariencia” de la Casa de los blogs.

Con Twenty Sixteen, los equipos de WordPress dieron a conocer un tema gráfico cuyo estilo moderno y características corresponden a las tendencias actuales de la web. Esta entrada recoge cuestiones básicas de carácter práctico que os permitirán dominar el tema gráfico Twenty Sixteen. Una vez activada la plantilla desde el menú Apariencia > Temas en el panel de control del blog, encontraréis la mayoría de las opciones de configuración en el menú Apariencia > Personalizar.

Basado sobre una columna de texto y una columna lateral opcional para los widgets, la plantilla Twenty Sixteen permite la personalización avanzada de los colores, con cuatro juegos de colores, o una libre elección de colores asociados con el fondo, fondo de página, enlaces, texto principal y texto secundario del blog.

Además de la columna opcional a la derecha, se pueden añadir dos zonas de widgets en el pie de página para personalizar la visualización del blog.

Imagen de cabecera y logo

Twenty Sixteen permite añadir una imagen de cabecera (tamaño recomendado: 1200 × 280 píxeles) y un logo (tamaño recomendado: 240 × 240 píxeles). Es preciso cuidar la optimización: optar por el formato .jpg y una resolución de 72DPI para una imagen más ligera. El logo se coloca encima del título y subtítulo (eslogan o descripción) del blog, mientras que la imagen de cabecera se coloca por debajo, antes de la columna de entradas y la columna opcional de widgets a la derecha. El título y el subtítulo del blog se pueden ocultar.

Ubicación del logo y de la imagen de cabecera del blog con Twenty Sixteen

El tema gráfico también ofrece varias características gráficas en el diseño de las entradas.

Una introducción para las entradas

El campo Extracto de la interfaz de edición de un blog se utiliza en este tema como introducción a una entrada. El texto de este campo aparece como epígrafe encima del texto principal.

Introducción de la entrada, insertada en la caja “Extracto” de la interfaz de edición de la solicitud

Citas resaltadas

A la vez que se mantiene una disposición sencilla y clara para el lector, el tema gráfico Twenty Sixteen propone resaltar los bloques de citas para que destaquen visualmente en el cuerpo del texto.

Para avanzar en la personalización de bloques de citas, el tema permite colocar estos bloques de citas a la derecha o a la izquierda del texto, desplazados del ancho de la columna principal. Será necesaria una pequeña manipulación del código html del texto. Para mostrar el código html de una entrada en su interfaz de edición, hay que hacer clic en la pestaña “HTML”, que se encuentra junto a “Visual” encima de la caja principal de redacción.

Diferentes formas de presentar las citas en un post con el tema gráfico Twenty Sixteen

Para desplazar una cita a la izquierda del texto, cambiar el elemento <blockquote> al principio de la cita en el código HTML por <blockquote class=”alignleft”>. Para desplazarla a la derecha del texto, cambiarlo por <blockquote class=”alignright”>.

Revalorización de las imágenes

También es posible romper la monotonía de la columna de texto insertando imágenes grandes: si el tamaño de la imagen original es superior o igual a 840 píxeles de ancho, y si la imagen se inserta seleccionando “Tamaño original”, entonces se visualizará más ancha que la columna de texto. Los tamaños “Grande”, “Mediano” y “Miniatura” obligan a que la imagen no supere el ancho de esta columna. Una vez más, pensad en la optimización: elegid el formato.jpg y una resolución de 72DPI para una imagen más ligera.

Diferentes visualizaciones de las imágenes insertadas en las entradas

Un menú para las redes sociales

 Twenty Sixteen ofrece dos ubicaciones de menú. Uno, el principal, se coloca horizontalmente a la derecha del título y subtítulo del blog (o un poco más arriba, al nivel del logo opcional), encima de la imagen de cabecera opcional. Se puede activar un segundo menú para colocar iconos de redes sociales: está situado en el pie de página, a la derecha, y sólo puede mostrar los iconos de las redes sociales.

El menú “Redes Sociales” en el pie de la página con el tema gráfico Twenty Sixteen

Para obtener esta visualización, se debe crear un menú compuesto únicamente por enlaces personalizados. Estos enlaces deben mandar a perfiles de redes sociales o a un correo electrónico (escribir “mailto: ” + la dirección de correo electrónico deseada). Este menú debe estar asociado a la ubicación “Social Network Links Menu”.

 

Para más información sobre este tema y sus características, véase la presentación de Twenty Sixteen sobre el Codex WordPress (en inglés).

Optar por una contraseña robusta

verticalidad, Warein, CC BY-NC-SA 2.0

Hypothèses pone todos los medios a su disposición para garantizar la seguridad de la plataforma, desde los blogs hasta las cuentas de los blogueros. Como usuarios, sois también encargados de esta seguridad, en lo relativo a la elección de una contraseña segura para vuestra cuenta.

Usar una contraseña generada por WordPress

Si deseáis cambiar la contraseña de vuestra cuenta de usuario en Hypothèses por cualquier motivo, tened en cuenta que WordPress incluye un generador de contraseñas aleatorias debidamente protegidas.

El cambio de contraseña de vuestra cuenta de usuario Hypothèses se realiza en el Escritorio de vuestro blog > Usuarios > Tu perfil > y haciendo clic en el botón “Generar una contraseña”. La nueva contraseña se genera para la cuenta con la que os habéis conectado (la contraseña está asociada al identificador de conexión, no a un blog; si sois usuarios de varios blogs con un único identificador, la nueva contraseña se aplicará independientemente del blog). Para aceptar esta contraseña, haced clic en “Actualizar perfil”. Para cancelarla, cambiad de página sin hacer clic en este botón.

Elegir manualmente una nueva contraseña para la cuenta de Hypothèses

Para introducir manualmente una nueva contraseña, hay que sustituir el texto que aparece en el campo “Nueva contraseña” haciendo clic en “Generar contraseña”. Si WordPress considera que la contraseña elegida tiene un nivel de seguridad bajo o muy bajo, no podréis guardarla; tendréis que elegir una contraseña con un nivel de seguridad considerado al menos como “Medio” por WordPress.

Es difícil evaluar la “fuerza” de una contraseña, y los indicadores automáticos que asocian un color o nivel de seguridad a una contraseña no presentan una fiabilidad garantizada.

Para elegir una contraseña de nivel satisfactorio en la escala de seguridad de contraseñas (desde 0 = “contraseña idéntica al nombre de usuario”  hasta ∞ = “contraseña imposible de piratear”), se pueden seguir algunas buenas prácticas.

Buenas prácticas relativas a la elección de una contraseña

  • Usar una contraseña diferente para cada servicio en línea (especialmente entre los servicios en relación con vuestra vida “personal” y los en relación con vuestra vida “profesional”).
  • Elegir una contraseña que no tenga relación con vosotros, vuestra empresa, vuestra familia.
  • No pedir a nadie que cree vuestra contraseña (y mucho menos que se envíe de modo no cifrado). Si es inevitable, cambiarla lo antes posible y hacer lo mismo con las contraseñas predeterminadas.
  • Elegir una contraseña de al menos 12 caracteres diferentes (mayúsculas, minúsculas, números, caracteres especiales) sin secuencia repetida.
  • No guardar las contraseñas e identificadores en un lugar expuesto (evitar por ejemplo: una nota en la pantalla, un papel en una carpeta, un fichero del ordenador, en línea, una recordatorio en los correos electrónicos).
  • Cambiar la contraseña tan pronto como tengáis alguna duda de que pueda estar comprometida.
  • Configurar el navegador para que no recuerde vuestras contraseñas.

La OSI, Oficina de Seguridad del Internauta, propone algunas recomendaciones para crear una contraseña robusta.

Usar un gestor de contraseñas

Si no deseáis crear varias contraseñas “complicadas” porque teméis no poder recordarlas, que sepáis que existen gestores de contraseñas. La OSI propone un listado de estos programas. Suelen funcionar en varias plataformas (Mac, Windows, Linux, Android, iOS…) y los datos se sincronizan en remoto en todos los soportes utilizados.

Este tipo de herramienta permite conectarse con una contraseña única a un registro que almacenará las otras contraseñas sin que necesitemos memorizarlas. Esta contraseña única puede asociarse con otro elemento (como una frase u objeto cuya presencia es necesaria para conectarse al gestor), siendo la verificación en dos pasos aún más segura.

A tener en cuenta

Aunque la política del equipo de Hypothèses es no intervenir directamente en los blogs salvo una petición explícita por vuestra parte, nos reservamos el derecho de cambiar una contraseña si descubrimos que la que se está utilizando compromete la seguridad de vuestro blog y, por lo tanto, de la plataforma. Intervendremos en particular si un nombre de usuario coincide con la contraseña, lo que representa un riesgo mayor de seguridad. Por supuesto, si es el caso, informaremos al usuario de este cambio para que pueda seguir utilizando su blog sin limitaciones.