Ejercicio de evaluación - Sprint 1

Last updated 8 months ago

En este ejercicio vamos a maquetar una versión simplificada de la Home de la página web de Adalab.

Antes de empezar, tenéis que crear un nuevo repositorio en GitHub desde GitHub Classroom usando este enlace. Una vez creado, lo clonaremos en nuestro ordenador y en la carpeta creada empezaremos a trabajar en el ejercicio.

Captura de la web para desktop

La web siplificada que hemos preparado, consta de estos elementos: 1. Una cabecera fija, que te acompaña al hacer scroll y que contiene

  • el logo de Adalab con un enlace a la home situado a la izquierda

  • alineado a la derecha, un menú de opciones en línea, que al pasar el ratón sobre ellas cambian de color y aparece una línea debajo

  • al clickar la opción "contacto" del menú, enlaza a otra página con un formulario (explicado más abajo)

    1. Bajo la cabecera hay una sección con una imagen que ocupa todo el ancho de la pantalla

  • sobre la imagen, hay un texto que dice "Creando Diversidad Digital"

    1. El pie de página consta de un texto de copyright y un enlace a la política de cookies

    2. La página del formulario tiene la misma cabecera y pie de página que la Home, y además

  • un párrafo explicativo

  • un formulario con los campos: nombre, apellidos, correo electrónico, teléfono y mensaje

  • un botón para enviar el formulario

Captura del formulario web

La web realizada tiene que ser responsive, es decir, funcionar correctamente para los siguientes tamaños de pantalla:

  • por debajo de 900px

    • el texto "Creando Diversidad Digital" se ve más pequeño

    • el pie de página y la imagen central son más pequeñas (puede hacerse con mediaqueries o con otras herramientas)

Ejemplo de web para tablet: Captura de la web para tablet

  • por debajo de 500px

    • el menú de la cabecera se coloca bajo el logo

    • el texto "Creando Diversidad Digital" se ve aún más pequeño

    • el pie de página y la imagen central son aún más pequeñas (puede hacerse con mediaqueries o con otras herramientas)

Ejemplo de web para móvil: Captura de la web para móvil

También os damos información del diseño para poder maquetar:

  • la tipografía usada es Rubik

  • la paleta de colores usados son: #555555 #aaaaaa #f5f5f5 #3CDBC0 y #252525

  • la imagen principal podéis descargarla de este enlace

Según vayáis trabajando en el ejercicio, id haciendo nuevas versiones (commit) del mismo y subid los cambios a GitHub (push). De esta forma podremos ver cómo vais avanzando. También publicad el resultado usando GitHub Pages (en las preferencias del proyecto) y poned en enlace al lado de la descripción del repo.

¡A darle caña!