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.

Los constructores de páginas y el diseño de sitios web

En nuestro Curso de WordPress 2018, ya definimos los page builders o constructores de páginas (también llamados maquetadores de páginas o editores visuales), así como sus rasgos funcionales característicos y sus ventajas e inconvenientes. Además publicamos entonces una relación de los constructores de páginas para WordPress más utilizados y de mayor calidad.

Aunque es cierto que dos años son mucho tiempo en el ámbito de las tecnologías utilizadas para el diseño web, creemos que lo que escribimos hace dos años sigue siendo válido ahora, razón por la cual no vamos a repetir lo que ya quedó dicho en ocasión anterior. No obstante, queremos hacer hincapié en un par de hechos que deben tenerse muy en cuenta con respecto al tema que nos ocupa:

• Primero y principal: el imparable desarrollo del editor de WordPress, organizado en torno al proyecto Gutenberg, va a modificar radicalmente la forma en que se diseñan los sitios web. Hay muchos expertos que auguran la muerte de los temas tal como ahora los conocemos, e incluso la desaparición o mutación de la mayor parte de los constructores de páginas.
• Segundo: la posición de Elementor en el muy competitivo segmento de los constructores de páginas se ha afianzado de forma indiscutible. En el momento de escribir estas líneas, Elementor es el constructor de páginas más utilizado, con más de 4 millones de instalaciones, a gran distancia de todos sus competidores. Para profundizar en las razones que explican el éxito de Elementor y saber en qué direcciones va a avanzar este plugin aconsejamos leer el artículo Elementor Raises $15M: Will They Move into SaaS Services Next? (And Why You Should Too).

Qué podemos hacer con un constructor de páginas

El espacio y el tiempo disponibles en esta sesión no nos permiten realizar un análisis comparativo exhaustivo entre el editor de WordPress, por un lado, y los constructores de páginas, por otro, pero sí apuntar algunas diferencias significativas entre ambos sistemas. La tabla comparativa incluida a continuación, en la que hemos tomado como elementos de comparación el actual editor de WordPress y el constructor de páginas Elementor, ayudará a los alumnos y alumnas del curso a comprender la diferencia entre ambos sistemas de edición.

La entrada Los constructores de páginas se publicó por primera vez en Curso de WordPress 2020.

La primera actividad del curso consiste en una tarea práctica de utilidad inmediata: los alumnos y alumnas deberán elaborar, publicar y enviar al profesor una página creada con los bloques del editor de WordPress que se describen en el artículo Bloques más adecuados para el diseño visual.

La página que debe utilizarse como modelo es esta, creada por el profesor del curso con los bloques nativos del editor de WordPress, el tema hijo Magazine Pro e imágenes descargadas de Unsplash. El contenido de la página propuesta como modelo es irrelevante, pero la estructura de bloques que describimos a continuación no debe modificarse en absoluto.

Descripción de la primera actividad del curso

La página propuesta como modelo es de anchura completa y no muestra su título, lo cual se consigue seleccionando el diseño adecuado y desactivando el título de la página. Para acceder a ambas configuraciones desde el editor de WordPress, hay que utilizar la barra de funciones de los temas de la familia Génesis (esta barra se activa pulsando sobre el icono que tiene forma de bola o planeta, con una letra “G” en su centro), y activar o desactivar las opciones correspondientes. El procedimiento para llevar a cabo esta acción se detalla en este artículo.

Para que la actividad se considere correctamente realizada, la página deberá contener todos los elementos que se describen a continuación, y en el mismo orden en que se describen.

Elementos constitutivos de la página web

Sección de cabecera

Esta sección corresponde a lo que se denomina imagen ”hero”, y debe estar compuesta por los siguientes bloques:

• Imagen de fondo (bloque “fondo”). La imagen debe tener anchura completa y opacidad adecuada para que el texto sea legible sin dificultades. Por su parte, la altura de la imagen debe ser la necesaria para permitir que dentro de la imagen se incluyan, sin «apreturas», los siguientes elementos.
  • Bloque de titular h1, con texto de color blanco
  • Bloque espaciador de altura adecuada.
  • Bloque de párrafo, con texto de color blanco y tamaño de letra muy grande.

Bloque espaciador

Debe tener una altura adecuada (unos 100 píxeles).

Sección de proyecto educativo

Esta sección debe constar de los siguientes bloques:

• Bloque de titular h2, en un color diferente al color por defecto.
• Bloque espaciador, de altura adecuada (unos 30 píxeles).
• Tres bloques de “Medios y texto”, con distribución alternativa de imágenes y texto. Cada bloque de medios y texto debe tener una composición no simétrica en cuanto a la anchura respectiva de sus componentes (60%-40% o 70%-30%, por ejemplo). Las imágenes deben adaptar su altura a la caja de texto; además, los bloques de texto deben utilizar dos y solo dos colores de fondo y de texto diferentes (oscuro- claro / claro-oscuro).

Bloque espaciador

Debe tener una altura adecuada (unos 100 píxeles).

Sección de instalaciones y recursos

Esta sección debe constar de los siguientes bloques:

• Bloque de titular h2, en un color diferente al color por defecto.
• Bloque espaciador, de altura adecuada (unos 30 píxeles).
• Un bloque de grupo con fondo de color oscuro:, que contendrá, a su vez, los siguientes elementos:
  • Un bloque de dos columnas. La columna de la izquierda debe contener un bloque de párrafo cuyo texto será de color blanco y tamaño de letra muy grande, mientras que la columna de la derecha contendrá un bloque de galería con seis imágenes. Para conseguir un mejor efecto, el contenido de ambas columnas debe estar centrado en su dimensión vertical. Las imágenes de la galería, por su parte, deben enlazarse a sus respectivos ficheros de imagen, para conseguir así que se abran con un elegante efecto de superposición u overlay.

Bloque espaciador

Debe tener una altura adecuada (unos 100 píxeles).

Sección de pie de página

Esta sección debe constar de los siguientes bloques:

• Bloque de titular h2, en un color diferente al color por defecto.
• Bloque espaciador, de altura adecuada (unos 30 píxeles).
• Imagen de fondo (bloque “fondo”). La imagen debe tener anchura completa y opacidad adecuada para que el texto sea legible sin dificultades.
• Bloque de dos columnas. Dentro de cada una de las dos columnas deben incluirse los siguientes bloques:
  • Bloque de párrafo, con el texto de color claro.
  • Bloque de botón. Los dos botones deben tener textos y colores diferentes, y deben apuntar a sendos enlaces vacíos.

Algunos consejos y normas

Aconsejamos tener en cuenta algunas recomendaciones a la hora de realizar esta actividad:

1. Conviene tener a la vista los artículos de la Sesión 1 del curso. Quienes tengan más dificultades para utilizar el editor de WordPress, pueden consultar también los recursos del Curso de WordPress 2019.
2. Se gana mucho tiempo si se utilizan las funciones de duplicación y reordenación de bloques. Por ejemplo, se pueden escribir todos los bloques de titular a la vez, y luego reordenarlos. En cuanto a los bloques espaciadores, es muy fácil crear uno y luego duplicarlos y ordenarlos correctamente.
3. Para moverse con agilidad por entre los bloques y no perder de vista la estructura de la página, conviene utilizar con frecuencia el navegador de bloques del editor.
4. Queda estrictamente prohibido copiar y pegar el modelo de página propuesto por el profesor.

Envío de la actividad

Una vez realizada la primera actividad del curso, hay que enviar su dirección al profesor, junto con una breve descripción del trabajo realizado, y sobre todo de las dificultades y problemas observados durante la realización de la actividad.

El envío de la tarea deberá realizarse mediante el formulario de contacto de este mismo sitio web.

La entrada Primera actividad del curso se publicó por primera vez en Curso de WordPress 2020.