La razón por la que creamos un diseño adaptable es que queremos que funcione bien en todos los dispositivos. Empezamos con una idea llamada “primero el móvil”. Esto significa que pensamos en cómo se verá en un teléfono antes de pensar en cómo se verá en una computadora. Usamos una herramienta llamada “consultas de medios” para hacer que el diseño se adapte a diferentes tamaños de pantalla, como los teléfonos, las tabletas, las computadoras portátiles y las pantallas de las oficinas.
Para asegurarnos de que todo se vea bien, usamos unidades de medida que se ajustan automáticamente al tamaño de la pantalla. Esto es mejor que usar medidas fijas, porque así no se rompen las cosas cuando se ve en diferentes dispositivos. La estructura de las páginas se hizo con algo llamado “Flexbox” y “Grid”, que son como herramientas para organizar las cosas de manera lógica. Esto hace que los elementos se muevan y se ajusten de manera automática, de modo que todo se vea bien y funcione correctamente en cualquier dispositivo. Así, la gente puede usar nuestra página sin problemas, sin errores visuales ni pérdida de funcionalidad.
| Punts del Ítem | Acció d’Implementació Tècnica | Tipus d’Evidència (Documentació) |
| Media Queries Avançades | Definició de breakpoints CSS per a mòbil (ex: 480px), tauleta (768px) i desktop (1024px+). | Captura de pantalla del codi CSS (o panel de control de WordPress) mostrant les @media rules. |
| Unitats Relatives i Flexbox/Grid | Uso de grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) para galerías o tarjetas de retos. | Captura del Inspector de Elements del navegador (F12) resaltando el ‘Grid’ o ‘Flex’ activo. |
| Menú Responsive Funcional | Implementación del menú “hamburguesa” funcional en móvil y submenú desplegable en desktop. | Vídeo corto (o GIF) mostrando el cambio de menú de desktop a mòbil al redimensionar la ventana. |
| Organització dels Sis Reptes | Creación de una página ‘madre’ o categoría para los retos y un submenú jerárquico accesible. | Captura de pantalla del panel ‘Menús’ de WordPress mostrando la jerarquía (Reptes > Repte 1, etc.). |
| Optimització de la Navegació | Verificación de que todos los botones de la Home (CTA) y enlaces funcionan y no hay enlaces rotos. | Captura de pantalla de la Home con los botones resaltados y una lista de los enlaces verificados. |
Deixa un comentari