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.

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.

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.