Examen 2ª Convocatoria de Diseño de Interfaces Web
Enunciado
Se pretende elaborar la interfaz gráfica para el sitio web de una nueva empresa que
va a abrir en El Puerto de Mazarrón. Se trata de la empresa “Migä Migä”. Una
empresa dedicada a elaborar el tradicional plato de migas con tropezones,
aportando un toque moderno y diferenciador que le permitirá al cliente elegir a modo
de topping los tropezones que desee. Entre los tropezones que incluye se
encuentran: de carne (salchicha, longaniza, panceta, asadura… ), de pescado
(sardinas, boquerones, bonito salado, … ), de verduras (ajos tiernos, pimiento,
cebolla,...), de fruta( uva, naranja, granada, ... ) y dulces (chocolate, chocolate
blanco, nocilla, lacasitos… ). Esta empresa incluye como novedad la elaboración de
3 tipos de migas: de harina, de pan y de avena.
Tras hablar con los clientes hemos llegado a la conclusión de que el objetivo es dar
a conocer su negocio a través de internet y que los clientes puedan opinar sobre los
topping que más les gustan y sugerir algunos nuevos.
El sitio web deberá:
● Destacar el carácter tradicional del producto a la venta con un enfoque
moderno.
● Tendrá una sección (tradición) dónde se explique el plato tradicional de las
migas con tropezones.
● Otra de contacto y sugerencias de nuevos topping.
● Otra sección con los topping clasificados según el tipo de topping y, a su vez,
una página para cada topping con fotografía del topping, información
nutricional, descripción sobre el origen del producto y un apartado de opinión
para los clientes sobre ese topping.
● La página estará enfocada también a atraer al turista británico de la zona por
lo que dará la opción de traducirla al inglés.
Para el estilo de la web nuestro cliente quiere un estilo moderno con colores neutros
y un color que destaque en el logotipo y títulos de la página.
En la parte técnica el cliente nos pide que su página deberá tener:
● Un menú pegajoso con enlaces a las secciones. El menú deberá de ser un
componente bootstrap. Tendrá el logotipo para la versión escritorio.
Desaparecerá el logotipo para versión tablet y estará colapsado para la
versión móvil.
● A continuación una imagen que ocupe el 100% del ancho de la página y del
alto del dispositivo en el que se reproduce la web. Dentro de esta imagen irá
el título (h1) de la página (Migä-Migä) y un subtítulo con el texto: “Migas con
tropezones 2.0.” (pista 100vh)
● La siguiente sección de la página será la de harinas. Tendremos 3 imágenes
y tres textos. Las imágenes serán redondeadas. Los textos tendrá el tipo de
harina como título (h2) y una breve descripción (podemos usar lorem ipsum).
La disposición de las fotos cambiará para cada dispositivo:
○ Para Escritorio el texto estará debajo de cada foto, colocando las 3
fotos en una fila y debajo los 3 textos. El texto será justificado con un
margen del 5% a derecha y a izquierda.
○ Para tablet el texto estará junto a la correspondiente foto. El texto será
alineado a la izquierda
○ Para móvil el texto estará debajo de cada foto alternando entre fotos y
texto. La alineación en este caso será centrada.
● La siguiente sección tendrá información sobre las categorías de topping. El
color de fondo será diferente al de la sección anterior. Tendremos 2 imágenes
y dos textos (los títulos h2 serán:”topping dulces” y “topping salados”). Con la
siguiente distribución:
○ Escritorio. (Las imágenes ocuparán 1/3 del ancho y los textos ⅔), texto
alineado a la izquierda, margen del texto e imágenes 5%.
○ Tablet. (50% imagen, 50% texto) Texto justificado, margen del texto
5%, imágenes sin márgen.
○ Móvil. todo el ancho de la pantalla. Texto centrado. margen del texto
10%, imágenes sin márgen.
● Para finalizar tendremos un footer con 2 apartados que aparecerán uno junto
a otro:
○ El título de cada apartado será h3.
○ El apartado de la izquierda tendrá una lista con enlaces a las
diferentes secciones. No tendrán aspecto de enlaces.
○ El apartado de la derecha tendrá información de contacto.
● Las imágenes redondeadas de la sección de harina tendrán una animación
que gire las imágenes y aumente un poco el tamaño al pasar el cursor por
encima de la imagen.
La guía de estilos que nos proporciona el cliente es la siguiente:
H1 Poppins bold 700 #235789 3 rem
H2 Poppins SemiBold 600 #235789 2 rem
H3 Poppins Medium 500 #235789 1,5 rem
Texto cuerpo Poppins ExtraLight 200 #000000 1 rem
Las imágenes y logotipos provisionales los encontrarás adjuntos al examen.
Para cada parte tendrás que hacer:
1ª Evaluación (parte para los que solo tengan esta evaluación pendiente):
● (1 punto) Realiza un mapa web de la web según el planteamiento del cliente.
● (1 puntos) Realiza una clasificación de los elementos que describe el cliente
según sean:
○ Elementos de identificación.
○ Elementos de interacción.
○ Elementos de navegación.
○ Elementos de contenido.
● (1,5 puntos) El wireframe en figma de la página de un topping según lo que
interpretes de las indicaciones del principio.
● (1,5 puntos) Adapta las imágenes definitivas que encontrarás en los archivos
adjuntos para que estén optimizadas para web, para el tamaño dónde se
tienen que ver, en el formato que menos tamaño ocupa manteniendo la
calidad según lo visto en clase y con la proporción adaptada al sitio dónde
irán ubicadas. Cámbialas por las provisionales en la maquetación.
Parte común: (A realizar por todos los alumnos y contando como nota de la primera
y de la segunda evaluación.
● Adaptación del contenedor de bootstrap para que no queden “márgenes y
padding heredados” (0,5 puntos)
● Maquetación respetando la jerarquía de bootstrap (1 punto).
● Aplicación de una clase para que se vean redondeadas las imágenes. (0,5
puntos).
● Uso de media queries para cambiar la alineación del texto y los márgenes en
la sección de tooping (0,5 puntos).
● Aplicación de la imagen de bienvenida (0,5 puntos).
● Aplicación de estilos del menú (0,5 puntos).
● Adaptación de la tipografía y textos a las exigencias del cliente (0,75 puntos).
● Estilos del footer correctamente usados (0,75 puntos).
2ª evaluación: (A realizar por todos los alumnos y contando como nota de la
segunda evaluación).
● Combinación correcta de los elementos de bootstrap para crear el menú.
○ Pegajoso (0,5).
○ Que el logo aparezca solo para la versión escritorio(0,5).
○ Que se contraiga (0,25).
● Alteración del orden de las columnas para la disposición de los diferentes
tamaños (1 puntos).
● Animación de las imágenes de las harinas:
○ Giro (0,25 puntos).
○ Cambio de tamaño (0,5 puntos).
○ Aplicación correcta del movimiento (duración, función, etc) (0,5 puntos)
● Preprocesamiento CSS.
○ Uso del preprocesamiento css para el estilo de la web (0,5 puntos).
○ Uso de variables en un archivo adecuado (0,5 puntos).
○ Uso de anidamiento para diferentes estilos (especialmente para los
estilos del footer) (0,5 puntos).
La entrega del ejercicio se hará:
● Para los que tengan la primera evaluación en el apartado Primera evaluación:
○ Carpeta comprimida evaluacion1-Nombre-Apellido1-Apellido2
■ PDF con el wireframe.
■ PDF con el mapa web y la clasificación de los elementos.
■ Archivos de imagen optimizados para la web.
● Para los que tengan la segunda evaluación, en el apartado Segunda
Evaluación:
○ Carpeta comprimida evaluación2-Nombre-Apellido1-Apellido2
■ archivo [Link].
■ carpeta img con las imágenes usadas.
■ carpeta estilo con los archivos necesarios para el
preprocesamiento css y la hoja de estilos.
La duración del examen es de 2 horas para los alumnos con una evaluación y 3
horas para los alumnos que tengan las 2 evaluaciones.
