Proyecto 1. Web grupal

Last updated 8 months ago

Índice

  1. Resumen

  2. Objetivos

  3. Casos de uso

  4. Especificaciones

  5. Hitos

  6. Entrega

  7. Consejos

  8. Recursos

Resumen (TL;DR)

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 vuestro CV online (o Linkedin) es muy importante dar visibilidad de que habéis hecho trabajo en equipo. ¡Esta será vuestra primera experiencia de trabajo en equipo relacionada con programación!

Objetivos

  1. Consolidar el aprendizaje de las tecnologías del sprint Hola Mundo (HTML, CSS, diseño responsive, GitHub pages)

  2. Utilizar control de versiones en equipo para aprender las ventajas y conflictos que genera

  3. Mejorar la comunicación de quiénes sois y cómo os proyectáis como equipo

  4. Mejorar vuestras habilidades de comunicación en público al exponer en la sesión final el proyecto

Caso de uso

Con esta web del equipo podréis ilustrar este primer proyecto realizado en Adalab en vuestro 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 Adalab habéis adquirido experiencia de trabajo en equipo y podrán acceder fácilmente al código que habéis desarrollado.

Especificaciones

Se desarrollará una página web con las siguientes características:

  • Uso de HTML y CSS

  • Uso de mediaqueries y otras técnicas de diseño responsive para que la web se adapte al dispositivo

  • Uso de git para el control de versiones del proyecto

  • Publicación del resultado en Internet usando GitHub pages

El contenido de la web deberá ser al menos:

  • Nombre del equipo

  • Nombre, fotografía y enlaces sociales (LinkedIn, Twitter, GitHub) de cada una de vosotras

  • Una breve biografía de cada una y cómo habéis llegado a Adalab

  • Describir qué tenéis en común como equipo (¿este curso de Adalab?) y cuáles son vuestras fortalezas y debilidades como equipo

  • Describir en qué consisten los roles que tenéis asignados durante el sprint “Hola Mundo” y qué miembro del equipo ocupa cada uno

Hitos

Os proponemos 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. Arranque del proyecto (kickoff)

  • 2 días de trabajo

  • Organizar el trabajo a realizar usando Trello, e ir asignando tareas y responsables

  • Crear la infraestructura necesaria: repositorio en GitHub y con acceso para todos los miembros del equipo

  • Establecer la estructura del contenido de la web, buscar referencias y esbozar la estructura visual de la web

Segundo. Primera versión simple de la web

  • 1 semana de trabajo

  • Terminar el diseño del sitio

  • Desarrollar una primera versión básica de la web, con parte del contenido (aunque no sea la versión final). Para considerar terminado este hito debéis tener publicada la web en GitHub pages.

Tercero. Versión responsive de la web

  • 1 semana de trabajo. Terminar el contenido y hacer que sea responsive para distintos tamaños

    de pantalla (móvil, tablet, ordenador). Para estar terminado, debe estar la web pública en

    Internet.

Cuarto. Presentación final

  • 2 días de trabajo

  • El último día del sprint presentaréis la versión final de este proyecto. Para ello tendréis que dejarlo publicado y acabado con tiempo, y organizaros para realizar la presentación.

Entrega

El formato de entrega de este proyecto será mediante la subida de este a la plataforma de GitHub. Para subirlo, se creará un repositorio en la organización de Adalab. El nombre del repositorio deberá estar compuesto de las siguientes partes, todo ello separado por guiones:

  • Nombre de la promoción en minúsculas

  • "s" minúscula seguida del número del sprint

  • Nombre del equipo en minúsculas

Por ejemplo, el nombre de la primera promoción de Adalab fue "Ada". Si un grupo realizase un proyecto para el primer sprint y el nombre de ese grupo fuese "Lovelace", el nombre del repositorio debería ser "ada-s1-lovelace".

De manera adicional, se deberá activar "GitHub Pages" en el proyecto para que este pueda ser visualizado como una web, es decir, que en el caso anterior, si alguien introdujese la dirección "adalab.github.io/web-hopper/" en un navegador web, este mostraría la web que se genera con el código del repositorio.

Por último, para acompañar a la entrega del proyecto, el equipo realizará una presentación 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 cada cosa

  • Cómo se ha diseñado

  • La estructura del código y las partes más importantes de este (por encima, sin entrar mucho en detalle)

  • 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

Al final de esta presentación habrá un turno breve de preguntas, de manera informal, tanto por parte de otras compañeras como por parte de los profesores.

Consejos

Pensar antes de implementar

Es fundamental dedicarle tiempo a pensar cómo será la web y realizar un diseño lo más ajustado a lo que queremos. A menudo los desarrolladores cometemos el error de implementar un código sin pararnos a pensar en cómo debería de funcionar. Esto se traduce en retrasos en la planificación, errores y modificaciones posteriores que se podrían haber tenido en cuenta desde un primer momento si se hubiese pensado un poco acerca del problema antes de empezar a atajarlo. Una de las mejores cualidades de un profesional es saber trabajar de forma optima, es decir, invertir su tiempo de manera que aporte el mayor valor posible a cada momento. Por ello es importante que si queremos ser profesionales planifiquemos y reflexionemos sobre el problema y su solución para que en el momento de ponernos a resolverlo seamos lo más eficientes posible.

Para terminar, pensad que se tarda minutos en cambiar una idea, horas en cambiar un diseño y dias en cambiar el código. Cuanto antes atajemos el problema en esta secuencia (siempre que no nos quedemos atascados en él) más rápido y con menos errores avanzaremos a lo largo del proyecto

Diseñar pensando en móvil primero para que sea más fácil hacer la web responsive

Dado que queremos realizar una web que se adapte de forma correcta a distintos tamaños de pantalla, es fundamental que el primer diseño que hagamos sea enfocado a pantallas móviles. Para ello trabajaremos en Chrome con la vista adaptada a diseños móviles (veremos cómo hacerlo durante las primeras sesiones).

Otro de los beneficios de pensar en un diseño enfocado a móvil es que, al tener un espacio muy reducido, prescindes de todo aquello que no es estrictamente necesario. Esto nos beneficiará ya que nos enfocaremos en meter en nuestra vista únicamente aquello que es fundamental

Recursos

Para este proyecto hemos preparado un listado de recursos que os pueden servir de ayuda.

Cómo diseñar una web desde cero

Saber diseñar una web no es un requisito previo para este curso. Tampoco es un objetivo del curso que aprendáis a hacerlo ni os lo exigiremos, por eso hemos preparado una breve guía para aprender a diseñar una web desde cero, para que os sirva como referencia para realizar el diseño y para daros los pasos y la información necesaria para llevar a cabo un diseño básico.

Guía para diseñar una web desde cero

Nota: Si por algún casual, preferís dedicaros solo a la programación, podéis tomar como referencia algún diseño que ya exista previamente siempre y cuando cambiéis ciertos aspectos del diseño para que no mantenga unos estilos muy similares. Sea cual sea la vía que se escoja el contenido (texto y fotos) asi como el nombre y el logo de la página deberá ser diseñado por vosotras para asi darle un toque personal a la web.

Iconos e imágenes

En esta sección os mostramos varias páginas para obtener iconos e imágenes de bastante calidad.

  • Páginas para obtener imágenes libres de derechos:

    • Unsplash - Web con fotografías de calidad libres de derechos para hacer lo que quieras y con búsqueda por tema

    • Pexels - Sitio con imágenes gratuitas de alta calidad (algunas con atribución y otras sin ella)

    • Wikimedia Commons - Web con fotografías de Wikipedia libres de derecho con atribución al autor

    • LibreStock - Busca en 47 webs fotos con licencia gratuita y sin atribución

  • Páginas para obtener iconos

    • Iconfinder - Búsqueda de iconos gratuitos y sin necesidad de dar atribución a su autor

Inspiración

En esta sección tenéis un listado de páginas para inspiraros a la hora de crear la web de vuestro equipo. También un listado de paletas de colores a usar. De dónde puedes sacar imágenes libres de derechos, etc.