Primera actividad del curso

Objetivo de la actividad

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.