Landpage
AGENCIA NOVA
Descripción breve del widget, componente o app interactiva creada en JS
Ficha técnica del proyecto
-
ROL:Frontend Developer & Diseñadora UX/UI
-
LENGUAJES/TECN.:HTML5 Semántico, CSS3 (Custom Properties/Grid), JS ES6+
-
ARQUITECTURA:Vanilla JS
-
ACCESIBILIDAD:WCAG 2.1 AA / Atributos ARIA / Manejo de Teclado y Foco
Descripción Técnica
& Requerimientos del Componente
OBJETIVO TÉCNICO
Diseñar e implementar la web corporativa para una agencia digital B2B, optimizando la presentación de servicios (Branding, Web, Marketing), la interacción dinámica con el usuario mediante JavaScript modular y garantizando un alto rendimiento y WCAG.
ESPECIFICACIONES DE INTERACCIÓN
- Estructuración de código JavaScript mediante ES6 Modules ("import"/"export").
- Componentes interactivos en cliente (menú hamburguesa accesible, acordeón FAQ).
- Validación de formulario de solicitud de propuesta en tiempo real.
- Maquetación responsive basada en CSS Grid, Flexbox y Custom Properties.
Arquitectura de Código & Lógica JavaScript
Estructura del Proyecto & Métodos Clave
ESTRUCTURA JS
LÓGICA DE PROGRAMACIÓN
- Inicialización centralizada con escucha de «DOMContentLoade».
- Manipulación de estados de acceso y accesibilidad («aria-expanded»).
- Separación clara de responsabilidades.
Fragmento de Código Destacado (Snippet)
app.js
// Cerrar las demás respuestas abiertas para mantener el efecto acordeón limpio
document.querySelectorAll('.faq-item').forEach(item => {
if (item !== faqItem) {
item.classList.remove('active');
}
});
// Alternar estado activo en el elemento pulsado
faqItem.classList.toggle('active');Maquetación Responsive & Accesibilidad
(WCAG)
Demostración en Vivo, Pruebas
y Próximos Pasos
PRUEBAS & RENDIMIENTO (LIGHTHOUSE)
• Performance: 75% | Accesibilidad: 96% | Best Practices: 91% | SEO: 96%
ESPECIFICACIONES DE INTERACCIÓN
- Integración de un cotizador de proyectos interactivo basado en servicios elegidos.
- Conexión del formulario de contacto a un servicio asíncrono como EmailJS.
- ransición fluida CSS ('max-height' / 'grid-template-rows') al abrir cada ítem.
