Proyecto 1. Web grupal

Ahoy! En este repositorio podreis encontrar los ficheros generados en la realización del proyecto final del Módulo 1 - Promo Radia. En él desarrollaremos nuestra primera web colaborativa creando una página con la información social de todos los miembros del equipo:

• Alejandra Ameliach Hernández
• Laura González Calvo
• Mª Elena Arocena López
• Sara Meixoeiro
• Virginia Álvarez Aragón

Objetivos

Durante la realización del proyecto se marcaron los siguientes objetivos en el grupo de trabajo:

• Consolidar el aprendizaje de las tecnologías: HTML, CSS, diseño responsive, GitHub pages, Sass, grid, gulp.
• Utilizar control de versiones en equipo para aprender las ventajas y conflictos que genera.
• Implementar Scrum como marco de referencia para el desarrollo del producto.
• Mejorar la comunicación entre los miembros del equipo.
• Mejorar nuestras habilidades de comunicación en público al presentar el trabajo y exponer el resultado como parte de los Sprint Reviews y la presentación final de proyecto.

Especificaciones

El cliente Adalab nos solicitó que desarrollásemos una página web con las siguientes características:

• Uso de HTML y Sass.
• Uso de mediaqueries y otras técnicas de diseño responsive para la adaptabilidad de la web en distintas pantallas. Tanto la página principal como la de contacto tienen un diseño establecido, al que debiamos ajustaros lo máximo posible:
  • móvil, por debajo de 768px
  • tablet, desde 768px hasta 1200px
  • desktop, a partir de 1200px
• Uso de git para el control de versiones del proyecto.
• Publicación del resultado en Internet usando GitHub Pages.

Así mismo, la web estará integrada por distintas páginas:

• una página principal (Home) con la información principal sobre el equipo.
• una página de contacto con un formulario para que puedan ponerse en contacto con nosotras.

Ambas páginas constarán de:

• una header: aparecerá el nombre del equipo y un menú de navegación que debe mantenerse fijo en la parte superior de la ventana al hacer scroll.

• y un footer: aparecerá el copyright, otro menú y el logo de Adalab.

Diseño

Nuestro cliente nos compartió el diseño que quería a través de Zeplin. Atendiendo a las indicaciónes nuestra página web colaborativa se elaboraría siguendo un esquema en particular.

Página principal

En la página principal debe aparecer:

• una foto del equipo
• la frase (claim) del equipo
• una sección "equipo" con la descripción del mismo con nuestras fortalezas y debilidades
• una sección de "quiénes somos" con información resumida de cada miembro del equipo: nombre, foto, breve bio y enlaces sociales (Twitter, LinkedIn, GitHub y correo)

Página de contacto

En la página de contacto podréis encontrar un formulario listo apra recoger la siguiente información: nombre completo, email, teléfono y mensaje. Además de el botón enviar está enlazado a Formspree para poder mandar las respuestas a un servidor.

Logo, iconos tipografía y paleta

• El logo de Adalab.
• Los iconos sociales de Font Awesome
• Las tipografías usadas en el diseño son Open Sans y Rubik, disponibles en Google Fonts.
• Paleta de colores.

Verde oscuro: #099d8d
Verde claro: #14d9c4
Blanco: #ffffff
Negro: #000000
Gris oscuro: #54585a
Gris claro: #b8b8b9
Gris de fondo: #f1f1f1

Resultado final

Puedes echar un vistazo a cómo quedó en Github Pages: https://beta.adalab.es/project-promo-r-module-1-team-2/

Esperamos que os guste.

Curiosidades de nuestro código

Hemos creado toda la estructura HTML de nuestra web en distintos partials aplicando los conocmientos aprendidos en la clase de Automatización de tareas:

Así mismo, hemos utilizado la misma lógica para los estilos, pasando todo nuestro código CSS a Sass:

Creamos un ´partial´para nuestras ´variables´:

Y algunos partialsdentro de otros:

También nos gustaría destacar el empleo de BEM y de las mediaqueriesen nuestro proyecto:

Feedback

Cualquier aportación será bien recibida.

¡Muchas gracias!