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.

Problemas y dificultades

La evaluación de la primera actividad nos ha permitido identificar algunos problemas y dificultades habituales:

1. Varios alumnos han puesto de relieve que esta es una tarea laboriosa, debido a la necesidad de seguir un juego de instrucciones muy detallado.
2. Algunos alumnos y alumnas constatan ciertas dificultades para realizar operaciones básicas sobre bloques, como las de moverlos y desplazarlos. A lo largo de este curso repasaremos una y otra vez estas acciones.
3. También se han constatado dificultades para encontrar la barra de opciones que permite modificar ciertas configuraciones de los temas de la familia Genesis. Volveremos a mostrar cómo hacerlo a lo largo de las sesiones de este curso.
4. Varios alumnos señalan que han tenido dificultades para disponer el bloque de párrafo dentro de una columna. En la segunda sesión del curso vamos a mostrar una vez más la técnica necesaria para conseguirlo.
5. Los alumnos y alumnas señalan que a veces el editor de WordPress crea párrafos “fantasma”, que no saben como eliminar. En la segunda sesión del curso explicaremos cómo borrar esos bloques sin contenido.
6. Las opciones actuales del editor de WordPress no permiten definir parámetros como el espacio interior de los bloques (el llamado “padding” o “relleno”), lo cual impide a veces conseguir los resultados apetecidos.

Fallos y errores

En primer lugar, debemos disculparnos por un error del profesor, que no había descrito correctamente los elementos integrantes de la última sección. En efecto, la actividad no mencionaba el uso de un bloque de columnas para distribuir los dos botones solicitados, lo cual complicaba la elaboración de esta sección.

Estos son los fallos y errores observados en las tareas enviadas por los alumnos del curso:

1. Ha habido por lo menos un caso en el que la tarea se ha enviado mediante el formulario de comentarios de la entrada, en lugar del formulario de contacto. Esto resulta no solo incorrecto, sino también inadecuado, porque, una vez aprobado, el comentario puede ser visto por cualquier visitante del sitio.
2. En otro caso, la actividad se ha enviado mediante el formulario de contacto del curso de 2019. Teniendo en cuenta que en el párrafo final de instrucciones de la actividad hay un enlace directo al formulario correcto, cabe suponer que las instrucciones de la actividad no han sido leídas con la debida atención.
3. Al menos en un caso, la página se ha publicado sin título. Este es un fallo muy grave, ya que afecta negativamente a la visibilidad del artículo en Internet.
4. Hay dos tareas cuyas páginas web no se han publicado, sino que se han dejado en modo borrador. Debe tenerse en cuenta que un artículo en borrador no es visible para un visitante normal de un sitio web.
5. Hemos visto al menos una tarea que, en lugar de publicar una página, ha publicado una entrada. Este fallo es importante, porque en WordPress no se puede publicar una entrada como página de inicio, y porque además no existe ningún modo nativo para convertir una entrada en una página (o viceversa).
6. En un par de tareas no se ha configurado la página con anchura completa, es decir, sin barra lateral.
7. Hemos observado que algunos textos tienen poca legibilidad con respecto a las imágenes, debido a que la opacidad del color de superposición es menor de la necesaria
8. También hemos observado una pobre legibilidad de los botones, debido a combinaciones de colores inadecuadas.
9. Algunas de las combinaciones de colores utilizadas en las páginas son poco adecuadas. En la segunda sesión proporcionaremos recursos para resolver este problema.
10. En algún caso no se ha respetado la disposición de los bloques. Por ejemplo, ha habido al menos un ejercicio que carecía de columnas en el diseño del bloque de cierre de la página.
11. Algunos bloques de medios y texto resultan desequilibrados, por una cantidad excesiva o demasiado escasa de texto con respecto a las imágenes. Hay que esforzarse en conseguir que uno y otras queden compensados.
12. En varias actividades se han insertado las imágenes de bloque de fondo sin respetar la condición de que tengan anchura completa. Volveremos sobre este punto a lo largo del curso.
13. Hay bastantes alumnos y alumnas que no han comprobado la apariencia de la página en tabletas y móviles. Esto se puede hacer con el personalizado de temas de WordPress.
14. Al menos un ejercicio no incluye el bloque de grupo, seguramente por inadvertencia. Conviene leer varias veces las instrucciones de la actividad antes de enviarla.

Sorpresas

Por último, la evaluación de la primera actividad también nos ha deparado alguna sorpresa muy satisfactoria:

• Algunos alumnos y alumnas han añadido al modelo propuesto por el profesor innovaciones que permiten mejorar mucho su resultado estético. Por ejemplo, una alumna ha añadido un bloque de espaciado entre los bloques de medios y texto, y otra botones con esquinas redondeadas.

La entrada Evaluación de la primera actividad se publicó por primera vez en Curso de WordPress 2020.

La segunda actividad del curso tiene unos objetivos muy semejantes a los de la primera: los alumnos y alumnas deberán elaborar, publicar y enviar al profesor una página web creada con bloques del editor de WordPress. En este caso deberán hacerlo importando varios bloques que se han exportado desde un modelo previo, de acuerdo con el procedimiento descrito en Importación de bloques con EditorsKit.

La página que debe utilizarse como modelo es esta, creada con los bloques nativos del editor de WordPress, que posteriormente se han exportado a cuatro ficheros JSON, gracias a las funciones del plugin EditorsKit. El contenido de la página propuesta como modelo no es relevante, pero la estructura de bloques no debe modificarse.

Descripción de la segunda actividad del curso

Los alumnos y alumnas del curso deberán elaborar y publicar una página web semejante a la del modelo propuesto, siguiendo estos pasos:

1. Crear una nueva página web y guardarla como borrador. La página no debe tener barra lateral, y hay que ocultar su título, tal como se explicó en la descripción de la actividad 1.
2. Con el botón derecho del ratón, hacer clic sobre cada uno de los enlaces que aparecen a continuación, y seleccionar la opción «Guardar enlace como…». Este es el método más seguro para descargar y guardar en el ordenador los cuatro ficheros de plantilla JSON necesarios para reproducir el modelo propuesto:
   • Fichero de plantilla 1.
   • Fichero de plantilla 2.
   • Fichero de plantilla 3.
   • Fichero de plantilla 4.
3. Importar los cuatro ficheros JSON, y disponerlos en el mismo orden en que figuran en el modelo. Para realizar correctamente esta operación recomendamos consultar el screencast incluido en Importación de bloques con EditorsKit.
4. Sustituir las imágenes de los bloques por otras nuevas, subidas a tal efecto.
5. Añadir los bloques de titulares y espaciadores necesarios para reproducir el modelo propuesto. El texto de los bloques de titulares debe combinar al menos dos colores diferentes; esto se puede conseguir gracias a las opciones disponibles en el plugin EditorsKit.
6. Uno de los bloques importados se tiene que configurar para que solo sea visible para los usuarios que han iniciado sesión; esto se puede conseguir gracias a las opciones disponibles en el plugin EditorsKit.
7. Modificar los textos del modelo propuesto. Esta tarea es optativa, y se deja a criterio de los alumnos:
8. Publicar la página web creada.

Recursos para realizar la actividad

La elaboración de la página web solicitada exige disponer de varios recursos gráficos. A continuación incluimos algunos que pueden ser de utilidad:

• Fotografías de uso libre: Unsplash. Si alguien quiere explorar otros recursos, puede echar un vistazo a los recopilados en los siguientes artículos: Estos son los mejores bancos de imágenes gratuitos, 10 Sites for Free Stock Photos (Updated for 2019) y 21 Amazing Sites With Breathtaking Free Stock Photos (2020 Update).
• Editores de imágenes. Si alguien necesita modificar una imagen y no tiene a su alcance un programa de edición y retoque fotográfico, siempre puede acudir a los editores online. Uno de los mejores es Pixlr.
• Generadores de paletas de colores. Estas herramientas online son muy útiles para crear combinaciones de colores que sean elegantes y ofrezcan buenas condiciones de visibilidad y legibilidad: 14 generadores de paletas de color online para diseño web y 15 Color pickers o generadores de color online.
• Colecciones de iconos e ilustraciones. Para crear las pequeñas imágenes del último bloque, pueden utilizarse fotografías con estilo de máscara circular, pero también iconos e ilustraciones. Aunque existen muchísimas colecciones de iconos, recomendamos el uso de Flaticon o icons8; debe tenerse en cuenta que los iconos alojados en ambos servicios se pueden descargar y utilizar siempre que se respeten las condiciones de atribución y cita. En cuanto a ilustraciones, un buen recurso es unDraw, cuyos diseños se pueden descargar libremente.

Envío de la actividad

Una vez publicada la página, 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 segunda actividad del curso.

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

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

Valoración global

La evaluación de la segunda actividad por parte de los alumnos y alumnas del curso tiene un rasgo coincidente: un buen número de alumnos y alumnas han coincidido en señalar que esta actividad les ha resultado mucho más fácil que la primera. Probablemente no lo fuera tanto, aunque sí estamos de acuerdo con ellos en que resultaba menos laboriosa.

Fallos y errores

Estos son los fallos y errores observados en la evaluación de la segunda actividad:

• Un fallo repetido es que las imágenes del último bloque se han insertado con tamaños diferentes al que se utiliza en el modelo propuesto, que es el de miniatura. Si se utilizan tamaños más grandes el efecto estético no es tan elegante.
• En varios casos las imágenes del bloque de medios y texto no se adaptan bien a la altura del bloque, debido a que no se ha activado la opción de recortar las imágenes para adaptarlas a la altura del bloque.
• Varios alumnos y alumnas han ocultado dos o más bloques a los usuarios no registrados, en lugar de uno, como pedía la actividad. Al ocultar más de un bloque, el diseño queda excesivamente descompensado.
• Los autores de varios sitios se han dejado arrastrar por el entusiasmo y han multiplicado los efectos tipográficos. Esto tiene ventajas creativas, pero también inconvenientes.
• Algunas innovaciones, como las máscaras inclinadas que ha propuesto un usuario, son poco afortunadas.
• Sigue habiendo algún alumno o alumna que no ha enviado la URL de la página publicada, sino la URL de edición,
• Al menos dos de los blogs de práctica han hecho uso de imágenes que no proceden de Unsplash. Convendría verificar que esas imágenes permiten su reproducción.

Sorpresas

Aunque no era necesario, una alumna ha complementado su diseño con enlaces de atribución de las fotos que ha descargado de Unsplash; esos enlaces, muy discretos y elegantes, han sido creados mediante un bloque de código HTML.

La entrada Evaluación de la segunda actividad se publicó por primera vez en Curso de WordPress 2020.

Esta actividad es algo diferente de la primera y la segunda. En efecto, en lugar de proponer un modelo de diseño que debe reproducirse al pie de la letra, la tercera actividad del curso está mucho menos acotada. Su objetivo será, como siempre, el de crear una página web, en este caso con los bloques propios del plugin Atomic Blocks. Ahora bien, en vez de precisar los bloques que hay que utilizar, estableceremos unas condiciones mucho más generales, que describimos a continuación.

Descripción de la tercera actividad del curso

Los alumnos y alumnas deberán elaborar y publicar una página web, de acurdo con las siguientes condiciones:

1. Crear una nueva página web y guardarla como borrador. La página no debe tener barra lateral, y hay que ocultar su título, tal como se explicó en la descripción de la actividad 1.
2. El contenido de la página es irrelevante, pero su diseño debe procurar ser elegante, armonioso y funcional. Se puede utilizar cualquier generador de texto tipo «lorem ipsum», o se puede utilizar contenido real, a gusto de cada cual.
3. Estructurar la página en al menos 3 secciones diferentes.
4. Utilizar en las secciones antedichas al menos 5 bloques diferentes del pluigin Atomic Blocks. Dado que algunos bloques de este plugin requieren configuraciones especiales, solo deberán utilizarse cinco bloques de entre los siguientes:
   • Bloque de secciones y diseños (demostración).
   • Bloque de columnas avanzadas (demostración).
   • Bloque de cuadrícula de entradas (demostración).
   • Bloque de contenedor (demostración).
   • Bloque de testimonios (demostración).
   • Bloque de aviso inline (demostración).
   • Bloque de acordeón (demostración).
   • Bloque de llamada a la acción (demostración).
   • Bloque de botón personalizable (demostración).
   • Bloque de espaciador y divisor (demostración).
5. Además de los bloques de Atomic Blocks, se puede utilizar cualquier otro bloque de WordPress que se considere necesario.
6. Combinar bloques de anchura completa y bloques de anchura limitada, de forma que la página sea armoniosa.
7. Utilizar no más de tres colores diferentes en el texto, titulares, botones y colores de fondo. Por supuesto, las imágenes pueden tener los colores que se consideren más convenientes, pero se aconseja utilizar imágenes que tengan una gama cromática compatible con los colores utilizados en los bloques.
8. Publicar la página web creada.

Recursos para realizar la actividad

El mejor recurso para realizar correctamente la actividad es tener a mano la documentación del plugin Atomic Blocks y sus ejemplos de uso. Además de las demostraciones de los bloques que ya hemos enlazado, conviene repasar los siguientes enlaces:

• Demostración del tema Atomic Blocks, que permite ver algunos diseños muy inspiradores, así como ejemplos de uso de los bloques.
• Fichero de ayuda del plugin (en inglés), con explicaciones de su uso y ejemplos.
• Entradas del blog de Atomic Blocks dedicadas a algunos de sus bloques más característicos (en inglés).
• Videotutoriales sobre Atomic Blocks, tanto en español como en inglés, que hemos recopilado en el artículo sobre el uso de este plugin.
• Para quien no pueda leer el inglés o tenga muchas dificultades con esta lengua, recomendamos utilizar extensiones como Traductor de Google (navegador Chrome), que permiten traducir cualquier página web. La traducción no es perfecta, desde luego, pero puede ser de gran ayuda. Existen extensiones parecidas para otros navegadores.

Envío de la actividad

Una vez publicada la página, hay que enviar su dirección al profesor, junto con una breve descripción de las secciones de la página, los bloques de Atomic Blocks utilizados y las dificultades y problemas observados durante la realización de la tercera actividad del curso.

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

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

Reorganización del curso

De acuerdo con las directrices emitidas por el Departamento de Educación del Gobierno de Navarra, los participantes en este curso podrán seguir realizando las actividades previstas en él, a través de los,siguientes procedimientos:

• Consulta de los materiales y recursos publicados en los artículos que forman parte de las sesiones cuarta y quinta.
• Realización de las actividades prácticas descritas en ambas sesiones, a saber:
  • Prácticas con Elementor.
  • Prácticas con Elementor Pro.
• Envío al profesor del curso de los trabajos realizados, mediante el formulario de contacto. Este mismo formulario, así como el correo electrónico, se pueden seguir utilizando para plantear dudas, consultas, propuestas, etc

Evaluación y certificación del curso

La organización de este curso ha determinado que, para que pueda obtenerse el certificado correspondiente a esta actividad formativa, deben cumplirse los siguientes requisitos:

• Haber asistido al porcentaje de sesiones y horas establecido en la convocatoria; naturalmente, este criterio solo es de aplicación hasta el momento en que la asistencia al curso quedó oficialmente suspendida, por aplicación del estado de alarma.
• Haber realizado y enviado al proveedor del curso al menos las actividades previstas en las sesiones primera, segunda y tercera, y las prácticas descritas en la sesión cuarta. El plazo de entrega de estos trabajos finalizará el día 1 de mayo, viernes.

La entrada Evaluación de la tercera actividad y cierre del curso se publicó por primera vez en Curso de WordPress 2020.