Landpage
CLEANTECH PRO
Plataforma web de servicios de limpieza sostenible
Ficha técnica del proyecto
-
ROL:Frontend Developer & Diseñadora UX/UI
-
LENGUAJES/TECN.:HTML5 Semántico, CSS3 (Flexbox/Grid), JavaScript ES6+ (Modules)
-
ARQUITECTURA JS:Vanilla JS Modular ("nav.js", "coverage.js", "form.js")
-
DESPLIEGUE:Vercel (CI/CD desde GitHub)
-
ACCESIBILIDAD:WCAG 2.1 AA / Atributos ARIA / Manejo de Teclado y Foco
Descripción Técnica
& Requerimientos del Componente
OBJETIVO TÉCNICO
Desarrollar e implementar la lógica frontend cliente de una web de servicios de limpieza técnica/ecológica, integrando un widget interactivo de comprobación de cobertura geográfica por Código Postal y un formulario comercial validado en JS.
ESPECIFICACIONES DE INTERACCIÓN
- Módulos nativos JavaScript ES6 ("import"/"export") sin dependencias externas.
- Buscador interactivo de cobertura por CP con análisis de prefijos regionales.
- Sistema de validación de formulario B2B con objeto de reglas dinámicas y Regex.
- Control de estado del menú hamburguesa responsive y atributos "aria-expanded".
- Despliegue continuo en Vercel con excelente rendimiento e interfaz limpia.
Arquitectura de Código & Lógica JavaScript
Estructura del Proyecto & Métodos Clave
ESTRUCTURA DE ARCHIVOS
LÓGICA DE PROGRAMACIÓN
- Captura del ciclo de vida «DOMContentLoaded» y Smooth Scroll.
- Validación por expresiones regulares y extracción de subtítulos («substring»)
- Mapeo dinámico de errores por campo mediante iteración `Object.keys()`.
Fragmento de Código Destacado (Snippet)
form.js & coverage.js
// Validación cliente del formulario de contacto mediante diccionario de reglas
const validators = {
empresa: val => val.trim().length >= 2 || 'Ingrese la razón social o empresa.',
email: val => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val.trim()) || 'Ingrese un correo electrónico válido.',
superficie: val => (val !== '' && Number(val) > 0) || 'Ingrese una superficie válida.'
};
// Comprobación de prefijo de CP en el módulo de cobertura
const prefix = cp.substring(0, 2);
if (validPrefixes.includes(prefix)) {
resultDiv.className = 'coverage__result success';
resultDiv.textContent = `✓ Disponemos de servicio directo para el C.P. ${cp}.`;
}Maquetación Responsive & Accesibilidad
(WCAG)
Demostración en Vivo, Pruebas
y Próximos Pasos
PRUEBAS & RENDIMIENTO (LIGHTHOUSE)
• Performance: 75% | Accesibilidad: 96% | Best Practices: 100% | SEO: 100%
ESPECIFICACIONES DE INTERACCIÓN
- Conexión de la consulta de CP con la API REST de Correos / GeoRef para datos reales.
- Envío asíncrono del formulario mediante API `fetch()` o integración con EmailJS.
- Creación de un panel o calculadora estimada basada en metros cuadrados declarados
