Reto Grupal - Dominio Fundamentos Web
Introducción
En este proyecto vamos a desarrollar nuestra primera web colaborativa. Para ello crearemos una web con la información social de todos los miembros del equipo. De cara a nuestro CV online (o LinkedIn) es muy importante dar visibilidad de que se ha ejecutado trabajo en equipo. ¡Esta será la primera experiencia de trabajo en equipo relacionada con programación!
Objetivos
Consolidar el aprendizaje de las tecnologías de Fundamentos Web (HTML, CSS, diseño responsive, Flex, GitHub pages, grid-layout).
Utilizar control de versiones en equipo para aprender las ventajas y conflictos que genera.
Mejorar la comunicación de quienes son y cómo proyectan su trabajo como equipo.
Mejorar las habilidades de comunicación en público al exponer el proyecto en la sesión final.
Caso de uso
Con esta web del equipo se podrá ilustrar este primer proyecto realizado en AG en su perfil de LinkedIn, añadiendo al resto de compañeros y el enlace al código en GitHub. De esta forma, las empresas podrán ver que durante el programa AG se ha adquirido experiencia de trabajo en equipo y podrán acceder fácilmente al código que se ha desarrollado.
Especificaciones
Se desarrollará una página web con las siguientes características:
Uso de HTML y CSS (Puede usar cualquier marco de trabajo de CSS)
Uso de media-queries (donde lo vea necesario implementar) y otras técnicas de diseño responsive para que la web se adapte al tamaño de pantalla de distintos dispositivos.
Uso de git para el control de versiones del proyecto
Publicación del resultado en Internet usando GitHub Pages
La web tendrá varias páginas:
Página principal (Home) con la información principal sobre el equipo.
Página de contacto con un formulario para que puedan ponerse en contacto con cada una de las integrantes.
Opcionalmente, una página por cada componente del equipo con información más detallada sobre cada una.
Todas las páginas tendrán una cabecera (header) y un pie de página (footer). En la cabecera aparece el nombre del equipo y un menú de navegación que debe mantenerse fijo en la parte superior de la ventana al hacer scroll. En el pie de página aparece el copyright, otro menú y una zona para ubicar un logo de su preferencia.
En la página principal, aparece:
una foto del equipo
la frase representativa del equipo
una sección "equipo" con la descripción del mismo (que las identifica como equipo, cosas que tienen en común), fortalezas y debilidades.
una sección de "quiénes somos" con información resumida de cada miembro del equipo: nombre, foto, biografía breve y enlaces sociales (Twitter, LinkedIn, GitHub y correo)
En la página de contacto habrá un formulario que recoge información de contacto como nombre completo, email, teléfono y mensaje, y un botón para poder enviarlo (aunque de momento no funcione).
Las páginas principal y de contacto tienen un diseño establecido, al que debes ajustar lo máximo posible. El diseño está realizado para 3 tamaños de dispositivo
móvil, por debajo de 768px
tablet, desde 768px hasta 1200px
desktop, a partir de 1200px
Para las páginas de cada componente del equipo, el diseño es libre pero siguiendo la guía de estilo del resto de la web.
Logo, iconos tipografía y paleta
El logo de su aplicación lo define cada equipo.
Los iconos sociales se pueden obtener de Font Awesome, donde también pueden aprender cómo usarla.
Las tipografías usadas en el diseño son Open Sans y Rubik, disponibles en Google Fonts.
Colores
Verde oscuro: #099d8d
Verde claro: #14d9c4
Blanco: #ffffff
Negro: #000000
Gris oscuro: #54585a
Gris claro: #b8b8b9
Gris de fondo: #f1f1f1
Hitos
Se les propone una serie de hitos como sugerencia para dividir las fases de este proyecto. Siguiendo los principios de las metodologías ágiles estableceremos pequeños ciclos iterativos de forma que al final de cada uno de estos generemos valor real, es decir, algo que nos beneficie y sea perceptible por nuestros usuarios (los visitantes de la web).
Primero. Inicio del proyecto (kickoff)
Organizar el trabajo a realizar usando GitHub Projects, e ir asignando tareas y responsables
Establecer la organización del trabajo: como se van a distrubuir las actividades y de que secciones o componentes se va a hacer responsable cada integrante del equipo.
Segundo. Versión móvil de la web
Desarrollar la versión para móvil de la web (página principal y contacto, sin el formulario de momento) con HTML y CSS
Crear el contenido de la web: textos e imágenes
Crear la infraestructura necesaria: repositorio en GitHub y con acceso para todos los miembros del equipo
NOTA: Para considerar terminado este hito y todos los siguientes se debe tener publicada la web en GitHub Pages.
Tercero. Versión responsive de la web
Hacer la web para el resto de tamaños de pantalla (tablet, desktop)
Cuarto. Versión final
Realizar el formulario de contacto para todos los dispositivos
Aplicar las técnicas avanzadas aprendidas en la parte final del curso:
Grid en la sección de "quiénes somos"
Opcionalmente añadir animaciones y transiciones.
Entrega
El formato de entrega de este proyecto será mediante la subida de este a la plataforma de GitHub. El nombre del repositorio deberá estar compuesto de las siguientes partes, todo ello separado por guiones:
Nombre de la promoción : (front2)
Nombre del equipo en minúsculas
Por ejemplo, el nombre de la primera promoción de AG fue "front1". Si un grupo realiza un proyecto y el nombre de ese grupo es "Lovelace", el nombre del repositorio debería ser "front1-lovelace".
Por último, para acompañar a la entrega del proyecto, el equipo realizará un video de 10 minutos mostrando la web y explicando los siguientes puntos:
Cómo está estructurada la web y el contenido y el por qué de las decisiones tomadas.
Cómo se ha seguido el diseño proporcionado.
La estructura del código y las partes que se quieran destacar.
Cómo ha sido la organización del equipo, el reparto de tareas y la coordinación a la hora de trabajar todas en el mismo código.
Cuál de las tareas o los puntos ha sido el que más esfuerzo ha requerido.
Cuál de las tareas o partes de la web es la que hace que el equipo esté más orgulloso.
Last updated