{"id":2428,"date":"2026-07-28T12:27:05","date_gmt":"2026-07-28T10:27:05","guid":{"rendered":"https:\/\/koredesign.studio\/?page_id=2428"},"modified":"2026-07-30T00:35:00","modified_gmt":"2026-07-29T22:35:00","slug":"seafairing","status":"publish","type":"page","link":"https:\/\/koredesign.studio\/es\/seafairing\/","title":{"rendered":"SeaFairing"},"content":{"rendered":"
\n\t\t\t\t
\n \n \t\t\t

Desarrollo Web<\/p>\n\t\t\n<\/a>\n

\n\t\t\t\t\t
\n\t\t\t\t\t

SeaFairing<\/h2>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n
\n \t\t\t

Descripci\u00f3n General<\/h2>\n\t\t\t\t\t

Como parte del Programa de Pr\u00e1cticas de Mayerfeld, nuestro equipo de cuatro personas tuvo la tarea de desarrollar una aplicaci\u00f3n web responsiva multip\u00e1gina completa llamada SeaFairing<\/strong> , basada en las especificaciones del cliente. El objetivo era recrear con precisi\u00f3n las referencias de dise\u00f1o visual proporcionadas, a la vez que se estructuraba una arquitectura web din\u00e1mica de 3 a 5 p\u00e1ginas completamente desde cero.<\/p>\n\t\t\t\t\t

El Desaf\u00edo<\/h2>\n\t\t\t\t\t

El cliente proporcion\u00f3 dise\u00f1os visuales espec\u00edficos, una jerarqu\u00eda tipogr\u00e1fica definida (integraci\u00f3n de la fuente Roboto) y paletas de colores sin dependencias de c\u00f3digo ni contenido web predefinidos. La principal limitaci\u00f3n fue la estricta restricci\u00f3n tecnol\u00f3gica: se prohibieron los frameworks, los preprocesadores CSS (SASS) y las bibliotecas de interfaz de usuario externas, requiriendo HTML5 y CSS3 puros. Adem\u00e1s, coordinar un equipo de cuatro desarrolladores en una \u00fanica base de c\u00f3digo exigi\u00f3 flujos de trabajo Git rigurosos para evitar conflictos de estilo, garantizar la adaptabilidad a diferentes dispositivos y mantener una ejecuci\u00f3n de dise\u00f1o uniforme en todas las subp\u00e1ginas.<\/p>\n\t\t\t\t\t

Nuestro Enfoque<\/h2>\n\t\t\t\t\t

Para garantizar la claridad estructural y un trabajo en equipo eficiente, implementamos una estrategia de desarrollo por fases:
     - Prototipado UX y Wireframing:<\/strong> Antes de escribir c\u00f3digo, dise\u00f1amos proactivamente un wireframe fundamental en Figma. Esto estableci\u00f3 una cuadr\u00edcula visual unificada, una estructura definida y un flujo de p\u00e1gina coherente para alinear el trabajo del equipo.

     - HTML Sem\u00e1ntico Progresivo:<\/strong> Siguiendo las mejores pr\u00e1cticas de desarrollo, mapeamos las estructuras HTML secci\u00f3n por secci\u00f3n antes de aplicar los estilos, asegurando \u00e1rboles DOM limpios y un flujo de contenido adecuado.

     - Sistema CSS y Tipograf\u00eda:<\/strong> Configuramos variables CSS personalizadas globales para cumplir estrictamente con las directrices del cliente (colores, interlineado, grosor de fuente e integraci\u00f3n de la tipograf\u00eda Roboto).

     - Arquitectura de Dise\u00f1o (Flexbox):<\/strong> Implementamos m\u00f3dulos modernos de dise\u00f1o CSS (Flexbox) secci\u00f3n por secci\u00f3n (encabezado\/navegaci\u00f3n, secci\u00f3n principal, bloques de contenido, vistas de varias p\u00e1ginas y pie de p\u00e1gina) para lograr una alineaci\u00f3n adaptable en todos los puntos de interrupci\u00f3n del dispositivo.

     - Colaboraci\u00f3n en Git:<\/strong> Gestion\u00e9 un repositorio compartido de GitHub con propiedad basada en componentes y revisiones de c\u00f3digo entre pares, lo que garantiz\u00f3 convenciones de nomenclatura CSS consistentes y una gesti\u00f3n limpia de los conflictos de fusi\u00f3n.<\/p>\n\t\t\t\t\t

Galer\u00eda de Proyectos<\/h2>\n\t\t
\n
\n
\n \t\t\t\"\"\/\t\t\n \t\t\t

Visita la Web<\/p>\n\t\t\n<\/a>\n\n<\/div>\n

\n \t\t\t\"\"\/\t<\/a>\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\t\t\t

Resultados<\/h2>\n\t\t\t\t\t

La plataforma web SeaFairing<\/strong> , finalizada con \u00e9xito dentro del alcance de las pr\u00e1cticas, ofrece una experiencia web intuitiva y multip\u00e1gina:
     - Alta Fidelidad Visual:<\/strong> Se reprodujeron los planos de dise\u00f1o del cliente con gran precisi\u00f3n en el espaciado, la jerarqu\u00eda tipogr\u00e1fica y la coherencia visual.

     - Arquitectura Multip\u00e1gina Adaptable:<\/strong> Se desarroll\u00f3 una estructura fluida de cuatro p\u00e1ginas con navegaci\u00f3n impecable y una imagen de marca coherente en todos los tama\u00f1os de pantalla.

     - C\u00f3digo Base Limpio y Sin Frameworks:<\/strong> Se cre\u00f3 una aplicaci\u00f3n ligera, accesible y pura en HTML5\/CSS3, con una velocidad de carga \u00f3ptima y sin dependencias externas.

     - Sinercia de Equipo Optimizada:<\/strong> Se gestion\u00f3 un repositorio GitHub colaborativo y limpio entre los cuatro miembros, demostrando una organizaci\u00f3n eficaz del flujo de trabajo y un control de versiones eficiente.<\/p>\n\t\t\n<\/div>\n

\n
\n
\n
\n \t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n \t\t\t

A\u00d1O<\/p>\n\t\t\n<\/div>\n\t\t\t

2026<\/p>\n\t\t\n<\/div>\n

\n
\n \t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/path><\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n \t\t\t

SERVICIOS<\/p>\n\t\t\n<\/div>\n\t\t\t

Dise\u00f1o y Desarrollo Web
Dise\u00f1o UX\/UI y Creaci\u00f3n de Wireframes
Desarrollo Web Responsive<\/p>\n\t\t\t\t\t

HERRAMIENTAS Y TECNOLOG\u00cdA<\/p>\n\t\t

\n
\n \t\t\t

Figma<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

HTML5<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

CSS3<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Git<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

GitHub<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

VS Code<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\t\t\t

ETIQUETAS<\/p>\n\t\t

\n
\n \t\t\t

Desarrollo Web<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Dise\u00f1o UX\/UI<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Dise\u00f1o Responsive<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

HTML5<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

CSS3<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Figma Wireframing<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Proyecto Frontend<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Colaboraci\u00f3n en GitHub<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n

\n \t\t\t

\u00bfTe interesa un proyecto similar?<\/p>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tPonte en contacto<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"

Web Development SeaFairing Overview As part of the Mayerfeld Practicum Program, our 4-person team was tasked with building a full multi-page responsive web application named SeaFairing based on client specifications. The objective was to recreate provided visual design references with precise fidelity while structuring a dynamic 3 to 5-page website architecture entirely from scratch. The […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2428","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/2428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/comments?post=2428"}],"version-history":[{"count":37,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/2428\/revisions"}],"predecessor-version":[{"id":2574,"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/pages\/2428\/revisions\/2574"}],"wp:attachment":[{"href":"https:\/\/koredesign.studio\/es\/wp-json\/wp\/v2\/media?parent=2428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}