Semana 12 — Diseño responsivo

Introducción

Durante esta semana aprenderemos a diagnosticar y corregir problemas de diseño responsivo utilizando WordPress, el tema Blocksy y el editor Gutenberg.

Trabajaremos sobre el portafolio profesional de un diseñador gráfico especializado en UX/UI, desarrollado a partir del prototipo realizado en Figma.

El propósito es conseguir que nuestro sitio web se adapte correctamente a computadores, tabletas y teléfonos móviles, manteniendo una experiencia de usuario consistente.

Objetivos de aprendizaje

Al finalizar esta semana, podrás:

1. Comprender los principios fundamentales del diseño responsivo.
2. Identificar problemas de visualización en diferentes dispositivos.
3. Utilizar las configuraciones globales de Blocksy.
4. Adaptar el encabezado y pie de página.
5. Ajustar composiciones y contenidos en Gutenberg.
6. Utilizar Chrome DevTools para revisar el comportamiento responsivo.
7. Aplicar criterios básicos de accesibilidad y usabilidad.
8. Documentar los problemas encontrados y las soluciones implementadas.

Conocimientos previos

Antes de comenzar, debes contar con:

• WordPress instalado y funcionando.
• Acceso como administrador de WordPress para instalar y configurar Blocksy.
• Conocimientos básicos del editor Gutenberg.
• Portafolio UX/UI en proceso de implementación.
• Prototipo de referencia desarrollado en Figma.

Ruta de aprendizaje

Los tutoriales estarán organizados en una secuencia progresiva.

01. Ecosistema WordPress

Comprenderemos las diferencias entre WordPress, los temas, Blocksy, Gutenberg y los plugins.

Tutorial disponible: WordPress, Blocksy y Gutenberg — Comprendiendo el ecosistema.

Abrir Tutorial 01 →

02. Instalación y exploración de Blocksy

Aprenderemos a instalar y activar Blocksy, configurar Blocksy Companion, explorar plantillas Starter Sites y reconocer las principales opciones de personalización del tema.

También aprenderemos a seleccionar una plantilla compatible con Gutenberg para nuestro portafolio profesional UX/UI.

Tutorial disponible: Instalación y exploración de Blocksy.

Abrir Tutorial 02 →

03. Fundamentos del diseño responsivo

Comprenderemos cómo adaptar interfaces web a diferentes dispositivos aplicando los principios de Responsive Design, Mobile First, breakpoints y diseños flexibles.

También aprenderemos a utilizar unidades relativas, reconocer media queries y explorar las opciones responsivas de Blocksy y Gutenberg.

Aplicaremos estos conocimientos al portafolio profesional UX/UI, comparando nuestro prototipo de Figma con su implementación en WordPress.

Tutorial disponible: Fundamentos del diseño responsivo.

Abrir Tutorial 03 →

04. Diagnóstico responsivo con Chrome DevTools

Aprenderemos a utilizar las herramientas para desarrolladores de Google Chrome para inspeccionar HTML, analizar CSS y revisar el comportamiento responsivo de nuestro sitio web.

Utilizaremos el modo de dispositivos para probar distintos tamaños de pantalla, detectar problemas de navegación, identificar desbordamientos horizontales y analizar las posibles causas.

Finalmente, elaboraremos un diagnóstico técnico de nuestro portafolio profesional UX/UI, identificando qué problemas pueden corregirse desde Blocksy y cuáles desde Gutenberg.

Tutorial disponible: Diagnóstico responsivo con Chrome DevTools.

Abrir Tutorial 04 →

05. Configuración global de Blocksy

Aprenderemos a utilizar las opciones globales del tema Blocksy para establecer una identidad visual consistente en nuestro portafolio profesional UX/UI.

Configuraremos la paleta de colores, tipografías, jerarquías visuales, contenedores, anchos y espaciados, tomando como referencia las decisiones de diseño realizadas en Figma.

También aprenderemos a diferenciar las configuraciones globales de Blocksy de los ajustes particulares que realizamos con Gutenberg.

Tutorial disponible: Configuración global de Blocksy.

Abrir Tutorial 05 →

06. Header responsivo con Blocksy

Aprenderemos a configurar el encabezado de nuestro portafolio profesional UX/UI utilizando Header Builder de Blocksy.

Trabajaremos con las filas del encabezado, el logotipo, el menú de navegación principal, los colores y los espaciados definidos en nuestro prototipo de Figma.

También configuraremos la navegación móvil mediante Trigger, Menu – Mobile y Off Canvas Area, comprobando su funcionamiento en diferentes dispositivos.

Tutorial disponible: Header responsivo con Blocksy.

Abrir Tutorial 06 →

07. Footer responsivo con Blocksy

Aprenderemos a construir y personalizar el pie de página de nuestro portafolio profesional UX/UI utilizando Footer Builder de Blocksy.

Configuraremos filas, columnas y áreas de widgets, incorporando contenido mediante Gutenberg. También agregaremos enlaces de navegación, información de contacto, redes sociales y derechos de autor.

Finalmente, adaptaremos la distribución del footer a dispositivos móviles y comprobaremos su accesibilidad, tomando como referencia el prototipo de Figma.

Tutorial disponible: Footer responsivo con Blocksy.

Abrir Tutorial 07 →

08. Diseño responsivo con Gutenberg

Aprenderemos a construir páginas responsivas utilizando el editor de bloques de WordPress, Gutenberg, y aplicaremos estos conocimientos a nuestro portafolio profesional UX/UI.

Trabajaremos con los bloques Grupo, Fila, Pila, Columnas, Cuadrícula, Imagen, Medios y texto, Fondo y Botones. También revisaremos los anchos, alineaciones, márgenes, rellenos y espaciados del contenido.

Aprenderemos a reorganizar columnas en dispositivos móviles, mantener la consistencia con las configuraciones globales de Blocksy y diagnosticar problemas de visualización mediante Chrome DevTools.

Finalmente, construiremos una sección de proyectos responsiva y compararemos su implementación con el prototipo desarrollado en Figma.

Tutorial disponible: Diseño responsivo con Gutenberg.

Abrir Tutorial 08 →

09. Corrección responsiva del portafolio UX/UI

Aplicaremos un proceso completo de diagnóstico y corrección responsiva de nuestro portafolio profesional UX/UI, comparando la implementación realizada en WordPress con el prototipo desarrollado previamente en Figma.

Aprenderemos a identificar diferencias en estructuras, anchos, tipografías, colores, imágenes, tarjetas, botones y navegación, utilizando Chrome DevTools para investigar sus posibles causas.

Posteriormente, realizaremos correcciones desde Blocksy o Gutenberg según corresponda, validando los resultados en diferentes tamaños de pantalla.

Finalmente, elaboraremos una matriz de incidencias que documente los problemas identificados, sus causas, las soluciones aplicadas y las evidencias antes y después de cada corrección.

Tutorial disponible: Corrección responsiva del portafolio UX/UI.

Abrir Tutorial 09 →

10. Verificación final y accesibilidad del portafolio UX/UI

Realizaremos una revisión integral de nuestro portafolio profesional para comprobar su funcionamiento, legibilidad, navegación y adaptación a diferentes dispositivos.

Aprenderemos a verificar la navegación por teclado, el foco visible, la jerarquía de encabezados, los enlaces, los textos alternativos de las imágenes y el contraste de colores.

También revisaremos los formularios, los tamaños de los controles, la ampliación del contenido y su reorganización en pantallas pequeñas, tomando como referencia los criterios de accesibilidad WCAG 2.2.

Finalmente, utilizaremos Chrome DevTools y Lighthouse como herramientas de apoyo para identificar problemas, documentar incidencias y elaborar un informe de verificación final.

Tutorial disponible: Verificación final y accesibilidad del portafolio UX/UI.

Abrir Tutorial 10 →

Actividad práctica 3.3

Ajustando el diseño responsivo

Aplicaremos los conocimientos de esta semana para revisar y mejorar el comportamiento responsivo del portafolio profesional.

Como preparación, realizaremos:

1. Inspección del sitio en diferentes tamaños de pantalla.
2. Identificación de problemas de diseño.
3. Registro de observaciones.
4. Aplicación de correcciones.
5. Comparación visual del antes y después.
6. Verificación del funcionamiento de los elementos intervenidos.

Estas etapas constituyen una propuesta de trabajo didáctico. Las instrucciones y los criterios de evaluación oficiales se incorporarán desde la pauta académica correspondiente.

Lista de verificación

Antes de finalizar la semana, comprueba:

• Revisé mi sitio en escritorio.
• Revisé mi sitio en dispositivos móviles.
• Comprobé el funcionamiento del menú.
• Revisé la legibilidad de los textos.
• Verifiqué que las imágenes se adapten correctamente.
• Revisé la distribución del footer.
• Identifiqué posibles desbordamientos horizontales.
• Comprobé el funcionamiento de los botones y enlaces.
• Registré los ajustes realizados.

Documentación complementaria

Para profundizar en los contenidos, consulta:

• Documentación oficial de Blocksy
• Documentación de WordPress
• Editor de bloques de WordPress
• MDN Web Docs
• Accesibilidad web — W3C WAI

Próximos pasos

En las siguientes lecciones desarrollaremos cada procedimiento técnico con instrucciones detalladas, capturas reales, ejemplos y actividades de aplicación.

Comienza con el Tutorial 01 para comprender el ecosistema WordPress y continúa con el Tutorial 02 para instalar Blocksy, explorar sus herramientas y seleccionar una plantilla inicial.

Posteriormente estudiaremos los fundamentos del diseño responsivo y aprenderemos a adaptar el portafolio profesional UX/UI a distintos dispositivos.