Reto práctico: Replica un diseño web completo
¿Cómo aplicar lo aprendido en un contexto real?
A lo largo del curso has aprendido a construir páginas, utilizar bloques, insertar imágenes y formularios, y dar estructura visual a tu contenido. Ahora es momento de poner en práctica todo ese conocimiento de forma integrada, enfrentándote a un reto similar al que podrías encontrar trabajando para un cliente real.
Objetivo del reto
Tu objetivo es crear una sola página web que replique el diseño y la estructura de un sitio modelo, utilizando únicamente el editor de bloques de WordPress. Esta práctica te permitirá consolidar lo aprendido y adquirir confianza al desarrollar sitios de una sola página (también llamados One Page), muy comunes en la web actual.
Instrucciones de la actividad
Descarga el archivo adjunto con la imagen del sitio a replicar:
Esta imagen representa cómo debe lucir tu página final. Está dividida en secciones claramente visibles.
Crea una nueva página en WordPress y nómbrala como "Página de práctica" o un nombre similar.
Organiza la página en las siguientes secciones, en el mismo orden que aparecen en el mockup.
Recrea el diseño lo más fielmente posible:
Usa colores y tipografías similares.
Respeta el orden, el espaciado y el estilo visual.
Utiliza solo bloques de WordPress, sin plugins adicionales (excepto para el formulario).
No es necesario que el contenido sea idéntico al de la imagen, pero debe tener la misma estructura y estilo general.
¿Por qué este reto es importante?
Este tipo de práctica es común en el mundo del diseño web. Te ayuda a:
• Consolidar tu manejo del editor de bloques.
• Mejorar tu interpretación de estructuras visuales.
• Aprender a organizar una página larga con varias secciones.
• Prepararte para proyectos reales con clientes o portfolios.
Consejos
Antes de empezar a construir:
• Estudia bien la imagen de referencia.
• Haz un esquema de bloques por sección.
• Piensa qué bloques de WordPress te permitirán lograr cada parte del diseño.
Puedes tomarte tu tiempo para experimentar y ajustar el diseño hasta que quede lo más parecido posible al modelo. ¡Recuerda que este reto es una oportunidad para crecer como creador web!
Sesiones del Curso
1- ¿Qué es la web y cómo funcionan los sitios web?
2- ¿Qué es WordPress y por qué es tan popular?
3- WordPress.com vs WordPress.org
4- Actividad de Investigación: Sitios web populares hechos con WordPress
5- Actividad especial – Personaliza la entrada de bienvenida
6- Entradas vs Páginas en WordPress
7- Actividad de investigación y desarrollo: Planifica tu sitio web
8- ¿Qué es un blog y cómo se organiza el contenido?
9- Categorías y Etiquetas en WordPress
10- Actividad Especial: Crear un mini-blog temático
11- Información Adicional
12- Actividad de investigación y/o desarrollo: Explora 3 blogs reales y analiza su uso de categorías y etiquetas
13- Estructura de páginas tradicionales de un sitio web
14- Jerarquía de páginas en WordPress
15- Actividad especial: Crea una estructura de páginas con jerarquía
16- Información adicional
17- Actividad de investigación y/o desarrollo: Diferencia entre página estática y entrada en WordPress
18- ¿Qué es el Editor de Bloques?
19- Tipos de Bloques en Gutenberg
20- Actividad Especial: Estructuración Visual con el Editor de Bloques
21- Información adicional
22- Actividad de Investigación: Explorando Bloques Avanzados de Gutenberg
23- Principios básicos de diseño web
24- Estructura básica de una página de inicio efectiva
25- Cómo estructurar una biografía efectiva
26- Elementos visuales clave
27- *[video] Actividad: Crear un borrador de la página “Sobre mí”
28- Actividad de Investigación y Desarrollo: Analiza 3 páginas "Sobre Mí" reales
29- Actividad Especial: Personaliza tu página “Sobre Mí”
30- Información Adicional
31- Componentes esenciales de una página de contacto
32- Buenas prácticas de usabilidad
33- *[video] Actividad: Insertar un formulario con WPForms
34- Actividad de investigación y/o desarrollo
35- Actividad especial: Crear tu página de contacto
36- Información Adicional
37- * Video intro
38- Actividad especial: Personaliza una página
39- * Video intro
40- Cómo presentar servicios de forma clara y atractiva
41- Estructura tradicional de página de servicios
42- *[video] Actividad: Monta tu página de Servicios
43- Actividad de Investigación y Desarrollo
44- Actividad Especial: Crea una página de “Servicios” usando tu análisis
45- *[video] Introducción
46- ¿Qué es un portafolio o página de proyectos?
47- *[video] Actividad: Cómo mostrar proyectos en WordPress (opciones simples y avanzadas)
48- Actividad de Investigación y/o Desarrollo
49- Actividad Especial: Personaliza tu página “Portafolio” o “Proyectos” usando tu análisis
50- *video intro
51- Información adicional
52- ¿Qué se puede hacer con plugins en WordPress?
53- Información adicional
54- Buenas prácticas al elegir plugins
55- *[video] Introducción
56- *[video] Actividad: Instalar plugin para carrusel de imágenes
57- *[video] Introducción a la lección
58- *video intro
59- *[video] Actividad: Instalar y usar plugin de bloques avanzados
60- ¿Qué son los Patrones de Páginas?
61- Rol de la página de inicio en un sitio web
62- Actividad especial: Usa plugins en algunas de tus páginas
63- *[video] Actividad: Insertar un Patrón en una Página
64- Recomendaciones de diseño: escaneabilidad, llamados a la acción, navegación clara
65- Actividad de Investigación y/o Desarrollo
66- Explorando la Biblioteca de Patrones
67- *[video] Actividad: Estructura típica de una página de inicio
68- Información adicional
69- Actividad Especial: Crear una Página Completa con Patrones
70- Actividad de Investigación y Desarrollo
71- *video intro
72- Información adicional
73- Actividad Especial: Crea una página de inicio completa
74- ¿Qué es un tema en WordPress?
75- Actividad de Investigación: Explorando el Directorio de Patrones
76- Información adicional
77- *[video] Actividad: Exploración e Instalación de tema Astra
78- Replicar un sitio web desde cero
79- *Actividad especial: Modifica libremente el Starter Template elegido
80- Actividad de investigación y/o desarrollo: Actualiza tu planificación de sitio web
81- * video intro
82- Actividad de Investigación y Desarrollo: Explora un Starter Template de Astra
83- Actividad Especial: Comienza a construir tu sitio web personal
84- Personaliza tu resultado
85- Información adicional
86- Actividad especial: Completa tu página web
87- *video intro
88- Actividad de Investigación y/o Desarrollo: Redacta tu Informe del Proyecto
89- Introducción a la lección
90- ¿Qué hacer en este proyecto?