Landpage
TIERRA STUDIO
Plataforma web corporativa & catálogo de diseño interior sustentable y arquitectura
Ficha técnica del proyecto
-
ROL:Frontend Developer & Diseñadora UX/UI
-
LENGUAJES/TECN.:HTML5 Semántico, CSS3 (Variables/Grid), JavaScript ES6 Modules
-
ARQUITECTURA:Vanilla JS Modular
-
ACCESIBILIDAD:WCAG 2.1 AA / Atributos ARIA / Navegación por Teclado y Foco
Descripción Técnica
& Requerimientos del Componente
OBJETIVO TÉCNICO
Diseñar e implementar la plataforma web para un estudio de arquitectura e interiorismo sostenible, optimizando la exhibición de proyectos, el filtrado dinámico del catálogo y la captación de clientes con altos estándares de accesibilidad (WCAG AA).
ESPECIFICACIONES DE INTERACCIÓN
- Arquitectura de código modular en JavaScript ES6+ ('import'/'export') nativo.
- Componente interactivo de galería con filtrado de proyectos por categorías.
- Menú de navegación responsive accesible con control de estado 'aria-expanded'.
- Formulario comercial con validación cliente mediante expresiones regulares y Regex.
Arquitectura de Código & Lógica JavaScript
Estructura del Proyecto & Métodos Clave
ESTRUCTURA JS
LÓGICA DE PROGRAMACIÓN
- Captura del ciclo de vida ‘DOMContentLoaded’ y Smooth Scroll.
- Filtrado dinámico de proyectos mediante iteración sobre ‘dataset’.
- Gestión de errores en tiempo real y despliegue de feedback dinámico.
Fragmento de Código Destacado (Snippet)
app.js
// Punto de entrada de la app
import { fetchData } from './utils.js';
const init = async () => {
const data = await fetchData('/api/proyectos');
renderProyectos(data);
};
document.addEventListener('DOMContentLoaded', init);Maquetación Responsive & Accesibilidad
(WCAG)
Maquetación
Estrategia
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Pruebas de accesibilidad
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Demostración en Vivo, Pruebas
y Próximos Pasos
PRUEBAS & RENDIMIENTO (LIGHTHOUSE)
• Performance: 98% | Accesibilidad: 100% | Best Practices: 100% | SEO: 100%
ESPECIFICACIONES DE INTERACCIÓN
- Refactorización del componente hacia Web Components (Custom Elements)[cite: 3].
- Migración del estado interno a un patrón de diseño Pub/Sub o Redux-like.
- Implementación de tests unitarios usando Jest / Vitest.