Propósito del proyecto
El proyecto se ha dividido en tres fases:
En la primera (terminada), simplemente se ha copiado el diseño existente en Squarespace pasándolo a Netlify y creando un nuevo código base. En el proceso únicamente se ha añadido un nuevo segmento hero con varias ofertas.
En la segunda parte (actualmente trabajando en ello) se pasará el código base a Eleventy (generador de páginas estáticas), lo cual ayudará con la reorganización de la web e implementación de un CMS.
En la tercera (por hacer), se creará un carrito de compra y se conectará con la pasarela de pago Stripe.
Mi papel en el proyecto
Utilizando la app Figma he creado el diseño y la UI.
En el proyecto trabajamos dos personas.
Mi papel en este proyecto ha sido encargarme de analizar el diseño actual y transferirlo al nuevo código utilizando las últimas tecnologías de CSS.
Posteriormente, revisar y depurar todo el código para eliminar errores. Con esto hemos conseguido que la web mejore de una manera completa y eficiente.
Colaborar con mi compañera del proyecto para elaborar el diseño y la estructura para hacer que la página sea accesible y rápida ante todo.
Web stack y explicación
Teniendo el diseño existente en la primera fase, nos hemos enfocado en lo siguiente:
HTML: El uso de etiquetas semánticas como section, main, article, nav... con la intención de hacer la página accesible desde las primeras líneas del nuevo código.
CSS: Utilización de Flexbox y Grid por defecto para organizar el layout y transferir el diseño. Uso intensivo de variables CSS (con valores por defecto) y de clases útiles. Nuevas pseudo-clases como por ejemplo :where() y :clamp().
Uso de propiedades modernas como backdrop-filter, margin-inline, aspect-ratio…
JS: Implementación de la navegación tipo hamburguesa en pantallas pequeñas vía aria-hidden: y aria-selected: atributos para que sea accesible vía teclado. También implementación de un carrusel en la sección hero con promociones.
Git y GitHub: Uso continuo de git con varias ramas main/desarrollo y con pull request vía GitHub.
Netlify: Conexión y despliegue vía GitHub.
