Descripción General

Como parte del Programa de Prácticas de Mayerfeld, nuestro equipo de cuatro personas tuvo la tarea de desarrollar una aplicación web responsiva multipágina completa llamada SeaFairing , basada en las especificaciones del cliente. El objetivo era recrear con precisión las referencias de diseño visual proporcionadas, a la vez que se estructuraba una arquitectura web dinámica de 3 a 5 páginas completamente desde cero.

El Desafío

El cliente proporcionó diseños visuales específicos, una jerarquía tipográfica definida (integración de la fuente Roboto) y paletas de colores sin dependencias de código ni contenido web predefinidos. La principal limitación fue la estricta restricción tecnológica: se prohibieron los frameworks, los preprocesadores CSS (SASS) y las bibliotecas de interfaz de usuario externas, requiriendo HTML5 y CSS3 puros. Además, coordinar un equipo de cuatro desarrolladores en una única base de código exigió flujos de trabajo Git rigurosos para evitar conflictos de estilo, garantizar la adaptabilidad a diferentes dispositivos y mantener una ejecución de diseño uniforme en todas las subpáginas.

Nuestro Enfoque

Para garantizar la claridad estructural y un trabajo en equipo eficiente, implementamos una estrategia de desarrollo por fases:
     - Prototipado UX y Wireframing: Antes de escribir código, diseñamos proactivamente un wireframe fundamental en Figma. Esto estableció una cuadrícula visual unificada, una estructura definida y un flujo de página coherente para alinear el trabajo del equipo.

     - HTML Semántico Progresivo: Siguiendo las mejores prácticas de desarrollo, mapeamos las estructuras HTML sección por sección antes de aplicar los estilos, asegurando árboles DOM limpios y un flujo de contenido adecuado.

     - Sistema CSS y Tipografía: Configuramos variables CSS personalizadas globales para cumplir estrictamente con las directrices del cliente (colores, interlineado, grosor de fuente e integración de la tipografía Roboto).

     - Arquitectura de Diseño (Flexbox): Implementamos módulos modernos de diseño CSS (Flexbox) sección por sección (encabezado/navegación, sección principal, bloques de contenido, vistas de varias páginas y pie de página) para lograr una alineación adaptable en todos los puntos de interrupción del dispositivo.

     - Colaboración en Git: Gestioné un repositorio compartido de GitHub con propiedad basada en componentes y revisiones de código entre pares, lo que garantizó convenciones de nomenclatura CSS consistentes y una gestión limpia de los conflictos de fusión.

Galería de Proyectos

Resultados

La plataforma web SeaFairing , finalizada con éxito dentro del alcance de las prácticas, ofrece una experiencia web intuitiva y multipágina:
     - Alta Fidelidad Visual: Se reprodujeron los planos de diseño del cliente con gran precisión en el espaciado, la jerarquía tipográfica y la coherencia visual.

     - Arquitectura Multipágina Adaptable: Se desarrolló una estructura fluida de cuatro páginas con navegación impecable y una imagen de marca coherente en todos los tamaños de pantalla.

     - Código Base Limpio y Sin Frameworks: Se creó una aplicación ligera, accesible y pura en HTML5/CSS3, con una velocidad de carga óptima y sin dependencias externas.

     - Sinercia de Equipo Optimizada: Se gestionó un repositorio GitHub colaborativo y limpio entre los cuatro miembros, demostrando una organización eficaz del flujo de trabajo y un control de versiones eficiente.