Qué tipo de sitio vamos a diseñar

La naturaleza de un sitio web impone exigencias insoslayables y es, por tanto, un aspecto esencial que debemos tener muy en cuenta a la hora de abordar su diseño. Así pues, la primera tarea que hemos de afrontar es la de decidir qué tipo de sitio vamos a montar, y cuáles son los destinatarios que van a consumir sus contenidos.

En efecto, no es lo mismo el sitio web del centro, que el de un departamento didáctico, un blog de aula, un sitio monográfico o temático, un sitio web de contenido exclusivo para docentes, etc. Cada uno de estos sitios corresponde a una situación comunicativa distinta, y, en consecuencia, reclama funcionalidades y principios de diseño diferentes.

Qué funcionalidades ha de tener el sitio

Una vez identificado el sitio web que queremos o necesitamos, debemos identificar qué funcionalidades ha de tener, cuáles deben implementarse desde el principio y cuáles pueden esperar a un desarrollo posterior. Aunque sea de forma muy sumaria, este diseño funcional debe tener en consideración los siguientes aspectos:

1. Tipo de contenido predominante. Conviene decidir si el sitio va a estar basado en páginas (contenido estático), en entradas (contenido dinámico), o en una combinación de ambos tipos de contenido.
2. Estructura básica. Hay que precisar aspectos fundamentales de la estructura del sitio, como por ejemplo la presentación del contenido (cronológica, al estilo blog, o no cronológica), la organización de los bloques de contenido (número y orden de presentación de las columnas en que suelen organizarse las páginas web), la disposición de las áreas de widgets, la ubicación de los menús, la estructura y contenido de la cabecera y el pie de página, etc.
3. Tema que se va a utilizar. Cada tema impone una serie de condicionamientos de diseño que pueden llegar a ser muy estrictos (sobre todo en lo que concierne a las paletas de colores, la tipografía y el tamaño y proporciones de las imágenes), por lo cual conviene acertar desde un principio. Cambiar de tema en WordPress es una operación muy segura que no supone ningún riesgo de pérdida de contenidos, pero que puede ser muy gravosa en términos de esfuerzo dedicado a las tareas de diseño.
4. Funcionalidades básicas del sitio web. Es preciso identificar si las funcionalidades apetecidas se pueden montar solo con WordPress o hace falta instalar plugins. Algunas de las funcionalidades básicas de los sitios web destinados a centros educativos, como por ejemplo la configuración multisitio o el contenido bilingüe o multilingüe, deben implementarse desde el momento mismo de la instalación, ya que resulta difícil, o al menos muy laborioso, añadírselas a un sitio web ya existente.
5. Organización de los roles de usuarios y del trabajo de edición. Hay que decidir si el sitio va a tener muchos usuarios registrados o solo unos pocos, así como los roles propios de cada uno de ellos. También es preciso saber de antemano cuántos usuarios van a crear contenido (y con qué roles), ya que la organización del trabajo de edición tiene repercusiones decisivas en muchos aspectos de funcionamiento y la gestión del sitio.

De qué recursos disponemos

Después de identificar la naturaleza del sitio web y sus funcionalidades básicas, conviene evaluar con precisión el esfuerzo que va a invertirse en su elaboración, y ponerlo en contraste con los recursos humanos, organizativos y materiales de los que disponemos.

Este análisis resulta capital, sobre todo en organizaciones como los centros escolares, que por lo general no andan sobradas de recursos. Hay pocas cosas tan frustrantes como abordar una tarea para la que no se está preparado, o para cuya realización no se cuenta con los medios necesarios.

Algunos consejos

Una vez tomadas las decisiones a las que acabamos de referirnos en los epígrafes precedentes, es preciso adaptar el planteamiento de elaboración de un sitio web a ciertas recomendaciones prácticas, que en su mayor parte no son sino aplicaciones concretas del sentido común:

1. Consultar ejemplos y modelos previos, repasar tutoriales y videotutoriales, y preguntar a compañeros y a expertos, si se tiene acceso a ellos.
2. Definir la estructura del contenido y los aspectos básicos del diseño al viejo estilo, con lápiz, papel, y tiempo de reflexión. Lo primero que hay que decidir son las páginas fijas que debe tener el sitio (mejor que no sean muchas) y, luego las categorías o temas en que van a organizarse las entradas (es aconsejable que el número de categorías no sea excesivo, y que correspondan a temas cuyos respectivos ámbitos no se solapen entre sí). Una vez elaboradas y publicadas unas cuantas páginas, entradas y categorías, y solo entones, ya se puede abordar la elaboración de los menús.
3. Proceder con precaución y cautela. Aconsejamos encarecidamente elaborar borradores y hacer pruebas antes de publicar, sobre todo cuando se haga uso de técnicas y herramientas que no se dominan a fondo.
4. Personalizar solo los elementos que necesiten un “toque” especial. En la mayor parte de los casos, no hace falta diseñar específicamente todas las páginas y entradas de un sitio web (cuyo diseño ya está predefinido por el tema), sino solo aquellas donde tal proceder resulta aconsejable: la página de inicio, las llamadas landing pages, etc.
5. Dar primacía a la funcionalidad sobre los aspectos decorativos u ornamentales. Todo esfuerzo de diseño o rediseño debe estar enfocado a lograr una mejora de funcionalidad.
6. Aplicar el principio “menos es más”. Este principio no es solo ni principalmente de orden estético. De hecho, cuanto más claro, legible y limpio sea un sitio web, probablemente también sea más rápido al cargarse, y más eficiente desde un punto de vista técnico.
7. Tener muy presentes los principios de homogeneidad y coherencia del sitio web. Aunque Los elementos personalizados sean singulares, no deben ser contradictorios o heterogéneos con respecto al conjunto del sitio.
8. Diseñar, escribir y publicar pensando siempre en los visitantes del sitio. Hay que esforzarse por ponerse siempre en la mente de alguien que no conoce en detalle un sitio web y llega a este por primera vez. Una aplicación concreta de este principio es que el sitio web debe funcionar bien en todo tipo de dispositivos, sean ordenadores de escritorio, tabletas o móviles.
9. Rentabilizar los esfuerzos. Todos los sistemas de edición de páginas web modernos hacen un uso masivo de las técnicas de composición basadas en plantillas, elementos reutilizables y otros mecanismos semejantes, y por tanto hay que aprender a utilizarlas. Incluso la humilde técnica de copiar-pegar-modificar puede dar resultados espléndidos si se utiliza juiciosamente.
10. No caer en la ansiedad. Hay que proceder con calma y sensatez, y no pretender resolver todos los problemas a la vez. Las grandes dificultades a menudo se resuelven segmentándolas en obstáculos más pequeños, que se acometen sucesivamente.
11. Utilizar solo los plugins imprescindibles. Un número excesivo de plugins, o una inadecuada selección de estos, pueden afectar muy negativamente al funcionamiento de un sitio web.
12. Seleccionar un tema de calidad. Los temas de calidad profesional garantizan el cumplimento de muchas de las recomendaciones que acabamos de hacer, minimizan los esfuerzos necesarios para conseguir los objetivos propuestos y ayudan a dar a los sitios web un acabado impecable. El Departamento de Educación del Gobierno de Navarra aconseja a tal efecto los temas de la familia Genesis, que están disponibles, bajo pedido, para todos los centros que lo soliciten.

A lo largo de este curso, y en especial en los artículos pertenecientes a esta primera sesión, iremos concretando algunos de los principios y recomendaciones que acabamos de exponer.

La entrada Planteamiento general de la elaboración de un sitio web se publicó por primera vez en Curso de WordPress 2020.

El concepto de página o lienzo en blanco

Sin olvidar los conceptos convencionales del diseño de páginas web, que siguen siendo necesarios para entender su estructura y función, conviene que, a la hora de elaborar diseños más modernos e innovadores, pensemos más en términos de página en blanco (o lienzo en blanco), sobre el que podemos «pintar», más o menos libremente. Nuestra capacidad de «pintar» dependerá en gran medida de la potencia de las herramientas que manejemos, pero también, y sobre todo, de nuestro talento como diseñadores.

Pensemos, pues, en nuestras futuras páginas web no tanto como construcciones dependientes de un marco de referencia prefijado (el tema o plantilla), sino como espacios vacíos que vamos a organizar de acuerdo con nuestras necesidades funcionales, el contenido que pensamos insertar, y el diseño más apropiado para lograr los objetivos comunicativos y de diseño que nos hayamos marcado.

El concepto de cuadrícula

Como ocurre a muchos escritores cuando se ponen ante la hoja de papel en blanco, dibujar o pintar sobre un lienzo vacío genera a menudo una sensación de angustia, especialmente a los usuarios noveles, porque no saben por dónde empezar ni cómo manejar sus herramientas. Pues bien, para alejar de nosotros esta molestísima sensación y aproximarnos de forma eficiente a la realidad de un sitio web, aconsejamos añadir a la metáfora del «lienzo en blanco» otra metáfora visual y conceptual: la de «cuadrícula» o «rejilla».

Si concebimos nuestra página web como un espacio dividido en filas y columnas que se cruzan entre sí, enseguida podremos imaginar la cuadrícula formada por esa intersección. Esta idea de la página web organizada en una o varias cuadrículas nos ayudará sobremanera a diseñar los elementos constitutivos de la página e insertar contenido en ellos.

El concepto de cajas

Cada uno de los espacios delimitados por la intersección de las columnas y las filas de la cuadrícula imaginaria que acabamos de definir puede concebirse, a su vez, como una «caja», en la que podemos insertar diversos elementos de contenido. Pulsando sobre el botón que aparece a continuación podemos ver un ejemplo de este modelo de diseño:

En resumen, hemos de pensar en nuestra página web como un lienzo en blanco, sobre el que superpondremos una o varias cuadrículas. En cada cuadro de esas cuadrículas, es decir, en cada caja, insertaremos (o no) los elementos de contenido que nos hagan falta para lograr los objetivos planteados. A lo largo de las diferentes sesiones de este curso, y especialmente en las sesiones cuarta y quinta, aprenderemos las técnicas necesarias para conseguirlo.

La entrada Página en blanco, cuadrícula y cajas se publicó por primera vez en Curso de WordPress 2020.

Concepto visual de las secciones

Desde un punto de vista puramente visual o de diseño, y de acuerdo con nuestro modelo conceptual de cuadrícula, una sección equivale, grosso modo, a una fila. La sección puede tener cualquier altura, puede estar formada por una o varias columnas, y puede ocupar todo el ancho de la página o solo un determinado porcentaje de esta.

Una página web puede estar formada solo por una sección, pero lo más habitual es que esté formada por varias secciones. A su vez, las diferentes secciones de una página web pueden tener o no el mismo número de columnas. Por último, los bordes de las columnas de las diferentes secciones de una página web no tienen por qué coincidir verticalmente entre sí:

Concepto organizativo de las secciones

Una sección no es solo una fila o franja horizontal, sino un elemento dotado de una dimensión estructural y organizativa. Para hablar en sentido estricto de una “sección”, es necesario que este elemento desempeñe una clara función en el sitio web, tanto a nivel de diseño como de contenido.

Un ejemplo de este concepto puede verse en la página de inicio de este sitio web: dejando aparte el menú de cabecera, y el pie de página, que son elementos estructurales básicos equivalentes a secciones, el contenido de la página está organizado en seis áreas horizontales consecutivas (seis secciones): presentación, contenido, metodología, localización, calendario de las sesiones y profesor del curso. Las ultimas cinco secciones están enlazadas entre sí mediante un menú de anclaje vertical.

La entrada Secciones de una página web se publicó por primera vez en Curso de WordPress 2020.

Las técnicas que acabamos de esbozar responden a un proceso creciente de complejidad conceptual y técnica. En todo caso, la organización y metodología del curso parten de un conocimiento que este curso da por supuesto: el manejo básico de los bloques del editor de WordPress. A partir de este punto, el curso se irá adentrando progresivamente en terrenos desconocidos para la mayoría de los asistentes, pero que al mismo tiempo ofrecen un gran potencial de crecimiento y mejora.

Uso de los bloques nativos del editor de WordPress

El nuevo editor incorporado a la versión 5 de WordPress, denominado Gutenberg, no es un maquetador o diseñador de páginas en sentido estricto, pero lleva camino de serlo. En el momento de publicar este artículo, con WordPress en su versión 5.3.2, el editor ya cuenta con un buen número de bloques que permiten crear diseños muy funcionales y atractivos.

La primera sesión del curso la dedicaremos precisamente a realizar prácticas con varios bloques de gran impacto visual:

• Fondo.
• Espaciador.
• Medios y texto.
• Grupo.
• Columnas.
• Galería de imágenes.
• Botón.

Uso de colecciones de bloques adicionales

El editor de WordPress no solo puede trabajar con los bloques proporcionados por la propia aplicación, sino también con bloques creados por diversos plugins y temas, e incluso con bloques diseñados por los propios usuarios.

La aparición de la versión 5 de WordPress y su nuevo editor ha traído consigo una auténtica proliferación de plugins de colecciones de bloques, que aumentan, casi indefinidamente, las capacidades de diseño isual del editor. En la segunda y tercera sesión del curso trabajaremos con una de las colecciones de bloques más potentes y mejor valoradas, Atomic Blocks.

Uso de sistemas de maquetación visual

Un sistema de maquetación o diseño visual propiamente dicho no solo permite diseñar a voluntad entradas y páginas (que es el ámbito para el que ha sido programado el editor de WordPress y en el que se mueven la mayoría de plugins de colecciones de bloques), sino también modificar radicalmente la apariencia de todo un sitio web.

Mediante el uso de un sistema de maquetación visual completo, el diseñador de un sitio web no está limitado por las características del tema, ya que puede modificar enteramente aspectos como su estructura, paletas de colores, tipografía, menús, áreas de widgets, plantillas de artículos, etc.

Las sesiones cuarta y quinta del curso estarán dedicadas a trabajar con uno de estos sistemas de maquetación visual, formado por Elementor y Elementor Pro. El primero es un plugin gratuito que se puede descargar e instalar libremente desde el repositorio de plugins de WordPress; el segundo, en cambio, es un plugin de pago cuya licencia ha sido adquirida por el Departamento de Educación del Gobierno de Navarra para su uso en los sitios web de los centros educativos.

La entrada Tres técnicas para el diseño visual se publicó por primera vez en Curso de WordPress 2020.

Cuándo hay que rediseñar un sitio web

El rediseño de un sitio web es un proceso complejo que puede representar muchas horas de trabajo Por tanto, conviene plantearse seriamente en qué circunstancias merece la pena embarcarse en esa tarea, ya que, a menudo, el rediseño no es más que una parte de un proceso más amplio de cambios y actualizaciones. A continuación detallamos algunas de las circunstancias más habituales, con las orientaciones correspondientes.

• Cuando el sitio web no funciona bien o presenta errores. Este es probablemente el peor escenario posible, pues las causas de este comportamiento pueden ser muchas y a menudo no fáciles de resolver si no medía el asesoramiento de un experto. Por tanto, mucho antes de plantearse cualquier trabajo de diseño, habrá que realizar un análisis técnico a fondo, y actuar en función de sus resultados.
• Cuando el sitio web tiene un aspecto y funcionalidad desfasados. En la mayor parte de los casos, esta situación obligará a un cambio de tema y un rediseño a fondo de todo el sitio.
• Cuando el sitio web no se comporta bien en dispositivos móviles o tabletas. Esta situación no es sino una variante de la anterior, pero la hemos desglosado por la importancia que desde hace años tiene la experiencia de navegación en dispositivos móviles. Como en el punto anterior, cualquier mejora de diseño probablemente pase antes por un cambio de tema, lo cual, a su vez, puede exigir muchas e importantes modificaciones del sitio web.
• Cuando el aspecto y funcionalidad del sitio son aceptables, pero existen aspectos inadecuados. En la mayor parte de estos casos, los fallos se deben a prácticas incorrectas, que habrán de ser identificadas y corregidas.
• Cuando el aspecto y funcionalidad del sitio son aceptables, pero se pretende hacerlo más funcional y atractivo. Esta es la situación en la que vamos a centrarnos en este curso, y para ello veremos cómo se pueden rediseñar algunas de las páginas clave de un sitio web, como por ejemplo la página de inicio, algunas páginas especiales, etc.

Qué conviene rediseñar

Tal como hemos indicado en artículos previos, recomendamos que los trabajos de rediseño de un sitio web determinen, al menos en un principio, unos objetivos modestos y factibles que puedan alcanzarse en un periodo de tiempo relativamente breve y con un esfuerzo razonable.

De acuerdo con este principio operativo, las demostraciones y prácticas que vamos a realizar en esta primera sesión del curso se centrarán en el diseño de una nueva página estática, destinada a convertirse en la página de inicio del sitio web.

Esa página puede mantenerse en estado de borrador todo el tiempo que sea necesario, y solo se publicará y configurará como página de inicio del sitio (desde el menú Ajustes> Lectura), cuando hayamos cobrado suficiente confianza en las técnicas y procedimientos de diseño visual que proporciona el editor de WordPress.

Limitaciones del editor de WordPress

Es preciso tener muy en cuenta que el editor de bloques de WordPress: está limitado por el momento a la edición del contenido de las entradas y las páginas. Esto significa que el editor no puede utilizarse para modificar varios elementos clave de un sitio web, a saber:

• La cabecera.
• El pie de página.
• Los menús.
• Las áreas de widgets y los widgets.
• Las páginas de archivo o índice, y las páginas especiales, como la página de error 404.
• Las plantillas de páginas y entradas.

Si nos vemos en la necesidad de rediseñar esos elementos, tendremos que utilizar técnicas y herramientas especiales, que abordaremos en la cuarta y quinta sesiones de este curso.

El futuro del editor de WordPress

La situación que hemos descrito en el párrafo precedente va a cambiar de forma radical en un tiempo relativamente breve. De hecho, está previsto que la edición basada en bloques pueda llegar a utilizarse en todas las demás áreas de WordPress. En esta dirección avanza el desarrollo del plugin Gutenberg, cuyas últimas versiones ya incluyen, aunque todavía de forma experimental, la capacidad de utilizar la edición con bloques en el diseño global del tema. Un panorama muy sugestivo del estado actual de la evolución de la edición mediante bloques es el que describen estos dos artículos: Cómo crear un tema con bloques desde el editor – La revolución llega por fin a WordPress. y WordPress en 2020 – Lo que nos espera … quieras o no.

El problema de los temas

Además de las limitaciones propias del editor de WordPress, la tarea de rediseño de un sitio web puede verse entorpecida por otro obstáculo: que el tema utilizado en el sitio web no sea compatible con las innovaciones propias del nuevo editor de WordPress y su enorme variedad de bloques.

En efecto, si el tema no es compatible con esas innovaciones, resultará imposible utilizar muchos de los bloques más vistosos y elegantes, como por ejemplo las imágenes de anchura completa o las imágenes de fondo. Mejor dicho, se podrán utilizar, pero no tendrán el efecto apetecido sobre la apariencia del sitio web; en algunos casos, hasta es posible que tengan un efecto negativo.

Desde un punto de vista conceptual, la solución a este problema es fácil: sustituir el tema por otro que esté actualizado y sea plenamente compatible con el nuevo editor. Sin embargo, esa alternativa a veces puede ser imposible de abordar, porque obliga a un rediseño completo de todo el sitio.

Situación de los temas de la familia Genesis

Aunque el framework Genesis es plenamente compatible con el editor de WordPress, no todos los temas-hijos basados en Genesis permiten obtener todo el partido posible de sus bloques. Conviene elegir, por tanto, un tema moderno que asegure la mayor compatibilidad posible, y de aquí que para las prácticas de este curso vayamos a utilizar el tema hijo Magazine Pro, el cual nos ofrece una compatibilidad máxima con el editor.

En cuanto a los plugins de colecciones de bloques, que abordaremos en la tercera sesión del curso, hemos optado por seleccionar el plugin Atomic Blocks porque se integra perfectamente con los temas de la familia Genesis. Y no solo eso: algunos de los temas más modernos permiten configurar páginas espectaculares basadas en los bloques de este plugin (si la marcha del curso lo permite, haremos alguna demostración de esta técnica).

Por último, los temas de la familia Genesis se comportan razonablemente bien en conjunción con los plugins Elementor y Elementor Pro. Es cierto que su integración mutua no es perfecta, pero las dificultades que puedan derivarse del uso conjunto de estas tres piezas pueden superarse con un esfuerzo relativamente pequeño.

La entrada Diseño visual con el editor de WordPress se publicó por primera vez en Curso de WordPress 2020.

¿Qué hago si no sé utilizar el editor de WordPress?

El manejo básico de las técnicas y procedimientos de uso del editor de WordPress es un contenido que se da por supuesto en este curso avanzado. No obstante, como es probable que los alumnos y alumnas alberguen dudas sobre algún punto concreto, les aconsejamos que tengan a su alcance los recursos y materiales del Curso de WordPress 2019, en el que se tratan por extenso casi todos los aspectos relacionados con el manejo del editor. También aconsejamos que consulten las páginas que la ayuda de WordPress.com dedica al editor de WordPress y sus bloques.

Bloques para diseño visual

Los bloques para diseño visual con los que vamos a trabajar en esta primera sesión del curso son los siguientes:

1. Fondo.
2. Espaciador.
3. Medios y texto.
4. Grupo.
5. Columnas.
6. Galería de imágenes.
7. Botón.

Bloque de fondo

El bloque de fondo (”cover”, en inglés, que significa ‘portada’) pertenece al grupo de bloques comunes. Consiste en una imagen sobre la cual se pueden superponer otros bloques, como por ejemplo titulares, texto, botones, etc. Este bloque permite personalizar la altura mínima de la imagen y hacer que esta sobrepase los límites de la caja de texto, de modo que la imagen pueda llegar a ocupar toda la anchura de la página (esto solo ocurrirá si el tema es compatible con este tipo de diseño). Por último, el bloque de fondo permite utilizar un color de superposición, lo cual hace posible atenuar la opacidad de la imagen y destacar así los textos y titulares.

Todas estas características hacen que el bloque de fondo sea idóneo para crear ciertos diseños muy habituales en las páginas web modernas:

• Cabeceras de página que ocupan toda la anchura de la pantalla.
• Imágenes “hero”, que ocupan gran parte de la zona visible de la parte superior de la página, o incluso la pantalla completa. Estas imágenes, destinadas a crear el tono y estilo propios de un sitio web, deben diseñarse para crear un fuerte impacto visual.
• Fondos que identifican o distinguen las secciones de contenido de un sitio web. A menudo se suelen encadenar varias imágenes de fondo para crear distintos efectos.
• Fondos con efecto “parallax”. Para lograr este efecto, el bloque dispone de una opción (“fondo fijo”) que permite que la imagen aparezca fija, mientras que los demás elementos de la página se desplazan sobre ella.
• Mecanismos de llamada a la acción (call to action o CTA), destinados a captar la atención del visitante y animarle a realizar algún tipo de interacción con el sitio web. En este caso, es muy habitual que el bloque de fondo vaya acompañado de enlaces o botones.

Bloque espaciador

El bloque espaciador, que forma parte de los bloques de diseño, tiene un propósito muy simple: definir una zona de separación entre bloques, cuya altura se puede precisar a voluntad. Este bloque solo permite utilizar un parámetro: la altura del espacio entre bloques, medida en píxeles.

Pudiera parecer que, con tan escasas opciones, el espaciador es un elemento poco aprovechable, peo en realidad ocurre al contrario, ya que este bloque garantiza que el espacio entre las diferentes secciones de una página sea perfectamente controlable. Por supuesto, el espaciador debe ser utilizado de forma coherente, organizada y planificada.

El bloque espaciador no debe confundirse con otro bloque parecido, que es el separador, mediante el cual se puede trazar una línea de separación horizontal entre bloques.

Bloque de medios y texto

Como su propio nombre indica, el bloque de medios y texto, que forma parte de los bloques de diseño, hace posible la creación de combinaciones de imagen y texto, formadas por un bloque de imagen y otro de párrafo. Ambos elementos aparecen dispuestos lado a lado, formando una unidad de elementos inseparables.

Esto es un bloque de medios y texto, en este caso con la imagen en el lado izquierdo. Se puede “recortar” la imagen verticalmente, para que abarque toda la altura ocupada por el texto. De esta manera, se consigue un efecto muy elegante y vistoso, con un esfuerzo realmente mínimo. También se puede arrastrar el borde de la imagen para modificar la proporción de anchura de ambos elementos. Por último, también es posible determinar la alineación vertical de la imagen.

Esto es un bloque de medios y texto, en este caso con la imagen en el lado derecho. Se puede “recortar” la imagen verticalmente, para que abarque toda la altura ocupada por el texto. De esta manera, se consigue un efecto muy elegante y vistoso, con un esfuerzo realmente mínimo. También se puede arrastrar el borde de la imagen para modificar la proporción de anchura de ambos elementos. Por último, también es posible determinar la alineación vertical de la imagen.

El bloque de medios y texto dispone de opciones muy interesantes, que permiten modificar el color de fondo de todo el bloque, o solo del bloque de párrafo. Con un uso juicioso de los colores, la posición y proporción de la imagen con respecto al texto, y la alternancia o sucesión de bloques, se pueden lograr efectos muy elegantes.

Bloque de grupo

El bloque de grupo, que portenece a la sección de elementos de diseño, sirve para agrupar varios bloques en un conjunto único. Este bloque permite elaborar diseños complejos formados por otros bloques; además, la agrupación de varios bloques en una unidad Facilita su gestión y manejo.

Por el momento, el editor solo permite aplicar al bloque de grupo un color de fondo y opciones de anchura ampliada o anchura completa, pero seguramente las futuras versiones del editor de WordPress incorporarán muchas más opciones.

Bloque de columnas

Este bloque, que forma parte de los elementos de diseño, permite crear columnas en las que posteriormente se pueden insertar otros bloques, lo cual hace posible elaborar diseños avanzados, como por ejemplo el que ofrecemos a continuación, formado por un bloque de tres columnas de igual anchura, en cada una de las cuales se ha insertado una tabla see tres filas.

Bloque de galería

El bloque de galería de imágenes, que forma parte de la sección de bloques comunes, permite crear conjuntos de imágenes muy vistosos y elegantes con poquísimo esfuerzo. Veamos dos ejemplos con diferente número y disposición de las imágenes:

Galería 1

Galería 2

Bloque de botón

El bloque de botón pertenece al grupo de bloques de diseño, y es uno de los elementos más importantes a la hora de crear los dispositivos de interacción con los,usuarios típicos de los sitios web modernos.

Gracias a las opciones de color de fondo, color del texto y radio del borde, el editor de WordPress permite diseñar en muy poco tiempo botones muy vistosos, como los que mostramos a continuación:

Ninguno de los botones anteriores contiene enlaces funcionales, pero lo cierto es que estos son un aspecto fundamental del bloque de botón.En efecto, los botones normalmente enlazan con un parte importante del contenido del sitio, o forman parte de un mecanismo de interacción: una llamada a la acción, un formulario, etc.

Como utilizar estos bloques para diseño visual

A lo largo de la primera sesión del curso se harán continuas demostraciones de uso de los bloques antedichos, teniendo a la vista diversos modelos y páginas de ejemplo. El objetivo es que los alumnos y alumnas aprendan a elaborar por sus propios medios una página semejante a esta, que posteriormente puedan utilizar como página de inicio de sus sitios web.

Ejemplos de diseños

A continuación incluimos diversos ejemplos de diseños que pueden servir de modelo para las tareas solicitadas en esta primera sesión del curso. Conviene tener en cuenta que muchos diseños son irrealizables si solo se cuenta con los bloques nativos del editor de WordPress, pero siempre pueden ofrecer ideas e inspiración.

• Biblioteca de diseños de DesignHub.
• Elementor Template Library.
• Gutenberg Template Library. Es un excelente repositorio de plantillas, cuyo código se puede copiar y pegar, lo cual permite reproducir los diseños en cualquier instalación de WordPress.
• Plantillas de ejemplo del tema Astra.
• Secciones prediseñadas de Stackable.
• ShareABlock. Para más información sobre este repositorio de bloques, véase el artículo Recursos sobre el plugin EditorsKit.

La entrada Bloques más adecuados para el diseño visual se publicó por primera vez en Curso de WordPress 2020.

Por otro lado, incluso si nos ceñimos a la función propia del editor, este carece de ciertas funcionalidades, lo cual dificulta, o en algún caso impide, que los usuarios puedan elaborar los diseños apetecidos. A continuación daremos cuenta de algunas de las insuficiencias más evidentes.

Bloques con opciones muy limitadas

La mayoría de los bloques de WordPress cuentan con opciones muy espartanas, lo cual parece ser una decisión deliberada, que obedece al propósito de limitar la capacidad de los usuarios para equivocarse. Las opciones existentes funcionan muy bien, pero en cuanto los usuarios se acostumbran a trabajar con el editor, a menudo echan en falta un control más preciso y potente.

Estas restricciones son especialmente notorias en algunos bloques muy prometedores a primera vista, como por ejemplo los de columnas, tablas o botones, cuyas opciones son tan limitadas que su uso cotidiano puede resultar desalentador.

Escaso control de las propiedades del texto

El editor de WordPress es muy eficiente y productivo a la hora de editar texto, pues los controles de inserción, posicionamiento y duplicación de bloques son muy fáciles de utilizar. Ahora bien, determinadas acciones que debieran ser muy sencillas, como modificar el color de una palabra o frase, o añadir ciertos efectos tipográficos, son difíciles o incluso imposibles de llevar a cabo. A no ser que Se utilicen plugins, esas acciones solo se pueden realizar si el usuario tiene conocimientos de edición de código HTML.

Pocos bloques orientados al diseño

No cabe duda de que los bloques con los que hemos trabajado en la sesión anterior son muy interesantes, pero también es cierto que los bloques que generan diseños más funcionales y vistosos, típicos de las páginas web modernas, son relativamente pocos. Este contraste resulta más acusado si tenemos en cuenta, por ejemplo, el hecho de que el editor proporciona más de treinta bloques dedicados a la incrustación de contenido externo, muchos de los cuales no son utilizados jamás por un porcentaje muy elevado de los usuarios.

Falta de modelos o plantillas

WordPress no ofrece a los usuarios modelos que puedan servirles de inspiración, ni tampoco bloques o conjuntos de bloques organizados a modo de plantillas. Aunque no es difícil encontrar esos modelos (una búsqueda en Google suele ser más que suficiente) y aunque los usuarios disponen de la capacidad para generar sus propios bloques reutilizables, es habitual que los usuarios menos experimentados se vean en dificultades, porque no tienen a su alcance modelos sobre los que trabajar y con los que realizar pruebas y experimentos.

Limitadas opciones de configuración del editor

Desde nuestro punto de vista, las opciones existentes para configurar el editor de WordPress y personalizar las tareas habituales son más que suficientes para trabajar de forma eficiente. No obstante, es posible que algunos usuarios necesiten opciones avanzadas o un control más minucioso y preciso de sus procedimientos y técnicas de trabajo.

A modo de conclusión

A pesar de las actuales limitaciones del editor de WordPress, nuestra sincera opinión es que se trata de una herramienta magnífica, de la que es posible obtener un extraordinario rendimiento, y cuyos problemas son relativamente fáciles de resolver. Es más que probable que muchas de las insuficiencias que hemos descrito vayan desapareciendo con el tiempo, conforme vaya progresando la imparable evolución de Gutenberg. Por otro lado, podemos aumentar exponencialmente las capacidades del editor con la ayuda de plugins, tal como veremos en próximos artículos.

La entrada Limitaciones del editor de WordPress se publicó por primera vez en Curso de WordPress 2020.

Plugins para la mejora del editor

El ecosistema de plugins que se integran con el editor de WordPress ha crecido continuamente desde que se publicó la versión 5.0 de la aplicación, hasta el punto de que en ocasiones resulta difícil decidir cuál es el más apropiado para atender las necesidades concretas de los usuarios. En los artículos de esta sesión del curso intentaremos desbrozar esta frondosa selva de complementos, que no hace más que crecer y volverse cada día más intrincada.

La mayor parte de los plugins cuyo propósito es la mejora del editor de WordPress proporcionan uno o varios bloques de contenido adicionales, a menudo agrupados en colecciones. Una relación de estos plugins puede verse en este mismo sitio web, en el artículo Colecciones de bloques para mejorar el editor, que complementa al que publicamos en su día con el título Plugins para Gutenberg 1.

Las mejoras del editor de WordPress también se pueden lograr con otro tipo de plugins, como los dedicados a flexibilizar sus capacidades y afinar las técnicas de trabajo. También hemos tratado sobre ellos en nuestro curso del año pasado, y en concreto en el artículo Plugins para Gutenberg 2. En esta segunda sesión del curso nos centraremos precisamente en uno de los que resulta más útil por su funcionalidad y alcance: Gutenberg Page Building Toolkit – EditorsKit, conocido habitualmente por la segunda parte de su nombre.

Qué es EditorsKit

Como sugiere el nombre completo del, Gutenberg Page Building Toolkit – EditorsKit es algo así como una completísima caja de herramientas con la que podemos aplicar al editor de WordPress toda una extensa batería de mejoras. Señalamos a continuación algunas de las más significativas:

• Un interfaz que facilita la gestión de los bloques existentes, tanto los propios de WordPress como los que hayan sido instalados por otros plugins y temas.
• Opciones adicionales de formato del texto y de escritura.
• Funciones que aumentan la capacidad del editor para trabajar con los bloques, formatearlos, reutilizarlos, precisar sus condiciones de visibilidad y publicación, etc.

Funcionalidades de EditorsKit con las que vamos a trabajar

Un examen completo y detallado de las funcionalidades del plugin EditorsKit resulta imposible en el tiempo del que disponemos durante esta sesión. Por tanto, nos centraremos en las más destacadas, todas estrechamente relacionadas con el objetivo de este curso, que no es otro que mejorar las capacidades de sus alumnos y alumnas para elaborar diseños de páginas web:

1. Formatear y añadir color a fragmentos de texto.
2. Mostrar u ocultar bloques según el tipo de dispositivo en que se visualizan y la naturaleza de los usuarios que acceden a ellos.
3. Exportar e importar bloques, y añadir al editor bloques exportados, a modo de plantillas de diseño.

La mayor parte del trabajo la dedicaremos al punto 3, que es el que ofrece mayor rentabilidad didáctica de acuerdo con los objetivos y propósitos de este curso.

Un molesto fallo de EditorsKit

Como ocurre con muchos otros plugins que se integran con el editor de WordPress, por el momento no es posible traducir completamente EditorsKit (ya veremos que sí hay algunas partes de su interfaz de configuración que se muestran traducidas). De hecho, aunque se traduzcan completamente los ficheros .PO y .MO, y se generen los ficheros .JSON que son necesarios para traducir el plugin, y aunque se suban unos y otros a la ubicación correcta en la instalación de WordPress, no hay manera de que el plugin aparezca completamente traducido.

Más sobre EditorsKit

Los alumnos y alumnas interesados en disfrutar de una completa panorámica de las funcionalidades de este plugin harán bien en leer el siguiente artículo de esta sesión, en el que encontrarán una presentación en vídeo, demostraciones, documentación y otros recursos de utilidad. Les animamos, ademas, a que exploren en sus respectivos blogs de práctica las muchas opciones de configuración y manejo del plugin.

La entrada Mejoras del editor de WordPress con EditorsKit se publicó por primera vez en Curso de WordPress 2020.

EditorsKit en vídeo

Una pieza esencial del artículo de Fernando Tellado es el vídeo en el que su autor presenta las funciones más destacadas del plugin:

Otros recursos relacionados con EditorsKit

Para conocer a fondo todas sus posibilidades, recomendamos la consulta de los siguientes recursos sobre el plugin EditorsKit:

• EditorsKit: el sitio web oficial del complemento, creado por Jeffrey Carandang. Permite descargar el plugin, probar una demo, y acceder a un complemento de pago.
• EditorsKit Tackles Typography With First Premium Add-On: análisis del complemento de pago de EditorsKit, que permite trabajar con las fuentes de Google.
• Gutenberg Page Building Toolkit – EditorsKit: página del plugin en el repositorio oficial de WordPress.
• Páginas del plugin en Facebook, Twitter y GitHub.
• Blocks Plugin Unit Test: una herramienta, basada en la función de importación de bloques del plugin EditorsKit, que sirve para verificar el funcionamiento de un tema cuando se insertan en él los bloques creados con varias colecciones de bloques muy populares, como Atomic Blocks, CoBlocks, Kadence Blocks, Kioken Blocks, Otter Blocks, Stackable y Ultimate Add-on for Gutenberg. El uso de esta herramienta aparece descrito en otro artículo de Ayuda WordPress, también ilustrado por su correspondiente vídeo:

EditorsKit y ShareABlock

No queremos finalizar esta nómina de recursos sobre el plugin EditorsKit sin mencionar un servicio online muy interesante: ShareABlock. Creado por Jeffrey Carandang, autor del plugin, este servicio alberga una colección de plantillas elaboradas por varios diseñadores mediante los bloques nativos del editor de WordPress. Las plantillas publicadas en ShareABlock se pueden descargar e importar desde cualquier otra instalación de WordPress en la que se haya activado el plugin EditorsKit, tal como puede verse en este breve tutorial.

Aunque no vamos a trabajar con las plantillas de ShareABlock (pues su descarga requiere registro previo), nos hemos inspirado en el concepto de plantillas en formato JSON para diseñar las actividades que pondremos en práctica al final de esta sesión. De esta manera, los alumnos y alumnas del curso aprenderán a reutilizar sus diseños y rentabilizar así el tiempo y el esfuerzo que hayan invertido en su creación.

La entrada Recursos sobre el plugin EditorsKit se publicó por primera vez en Curso de WordPress 2020.

Opciones de formato del texto

El plugin EditorsKit permite realizar algunas operaciones con los bloques de texto que por el momento no son factibles con el editor de WordPress. Una de las más llamativas es la de asignar un color de primer plano o de fondo a varios caracteres, palabras o conjuntos de palabras, tal como podemos ver en los siguientes ejemplos:

Esto Es Un Ejemplo De Texto

Otro Ejemplo de Texto

Además de jugar con los colores, EditorsKit hace posible añadir sangrías, abreviaturas, subíndices y superíndices, subrayados, tachados, caracteres en mayúscula, código e imágenes inline, etc, todo ello desde las propiedades contextuales de los bloques que contienen texto, como los de párrafo, titulares, cita, etc. El plugin también permite limpiar todo el formato de un texto y justificarlo.

Como este tipo de operaciones no son fáciles de describir con palabras, a continuación ofrecemos un screencast que demuestra su funcionamiento.

Resulta evidente que todas estas funcionalidades dotan al editor de WordPress de capacidades muy mejoradas; ahora bien, siempre debemos utilizarlas con proporción y mesura, para no afear o enmarañar en exceso la apariencia final de los textos.

Aplicación a los bloques de la lógica condicional de WordPress

Gracias a las funciones del plugin EditorsKit, los bloques creados con el editor de WordPress pueden mostrarse o no dependiendo de ciertas condiciones, como por ejemplo el tipo de dispositivo con el que se visualiza una página web (ordenador de escritorio, tableta o móvil), el tipo de usuario que la está viendo (el plugin distingue si el usuario ha iniciado sesión o no lo ha hecho), y las circunstancias concretas que caracterizan a la página web dentro del sitio al que pertenece.

La selección de estas condiciones se lleva a cabo haciendo clic en la barra de opciones contextuales del bloque y seleccionando la opción Visibility Settings. De esta manera se presenta al usuario un interfaz que permite seleccionar las condiciones de aparición y alineación del bloque según el tipo de dispositivo, e incluso definir sus condiciones de presentación de acuerdo con alguna de las muchas circunstancias que están contempladas en la lógica condicional de WordPress.

También hemos incluido un screencast de esta funcionalidad para demostrar cómo se trabaja con ella.

Exportación e importación de bloques

Otra de las funciones más útiles de EditorsKit es su capacidad para exportar e importar cualquier bloque creado con el editor, lo cual permite reutilizar dicho bloque tanto en la misma instalación de WordPress como en otra. De esta funcionalidad vamos a tratar en un próximo artículo; no obstante, para comprender bien su funcionamiento debemos repasar un concepto previo, que ya tratamos en el Curso de WordPress 2019: el de bloques reutilizables.

La entrada Operaciones con EditorsKit se publicó por primera vez en Curso de WordPress 2020.