Galería
En esta página encontramos un conjunto de imágenes separadas en dos secciones, la de
Casas Sostenibles y Casas Ecológicas. Ambos títulos de los grupos son enlaces que
dirigen al usuario a sus respectivas páginas. Al colocar el ratón encima de una imagen,
esta se amplía, y al pulsarla, se abre una imagen más grande con un fondo translúcido.
En la parte superior derecha se encuentra una cruz para poder ocultar la imagen y poder
pulsar otra casa. Además, hay una flecha a cada lado de la imagen para avanzar a la
siguiente imagen de la casa seleccionada o retroceder a la anterior.
Figura 1. Disposición de la galería.
Figura2. Al clicar una imagen
Por otra parte, como el resto de las páginas, esta contiene una cabecera formada por el
título de la página, el logo, que a su vez es un enlace para ir a la página principal; y un
botón para abrir el elemento aside que es una barra de navegación para desplazarse a
través de las distintas páginas de JAVY’S y que también contiene el logo y un botón de
cierre del menú.
Figura 3. Menú aside.
CSS_Galería
El documento CSS de la Galería de la página web contiene propiedades para la cabecera
y el aside que coincide con el código CSS de las demás páginas, ya que son unos
elementos que tienen todas en común, estas se encuentran fijadas a la página para que se
puedan visualizar en todo momento, y el header es un contenedor de tipo flex. Además,
el contenido de este se encuentra centrado
Por otra parte, cuando bajamos por la página, el header obtiene las propiedades de
hacerse más pequeño, junto a su contenido, y el fondo de este se hace un poco
transparente. Cuando esto ocurre, para que no se realice una transición brusca, hemos
asignado una propiedad transform y transition para que cambie de un aspecto a otro de
forma más suavizada.
Para el menú lateral, al botón que lo abre y al que lo cierra le hemos puesto el fondo
transparente para que solamente se vean los símbolos, también le hemos coloreado el
fondo de blanco al aside y lo hemos designado en la posición 3 para que quede por
encima del header, que está en 1. Al igual que con la cabecera, hemos utilizado
transform y transition para que, cuando aparezca, tenga una animación.
A la lista y sus elementos en el nav le hemos quitado las decoraciones de enlace y lista
que tienen por defecto. Lo mismo con los enlaces de los encabezados de cada sección.
En cuanto a los grupos de imágenes, les hemos dado una disposición de cuadrícula con
un espacio de 16 píxeles entre cada elemento multimedia. A dichas imágenes le
colocamos un borde redondeado y un ancho y alto del 100% de su cuadrícula. Y cuando
colocas el cursor encima, se hace ligeramente más grande de nuevo con las propiedades
para animar que hemos mencionado anteriormente.
Para la imagen que aparece de fondo cuando se pulsa en una imagen, hemos hecho que
sea un div con disposición flex de fondo negro con transparencia. También tiene la
posición 1000 para asegurarnos de que irá por encima del resto de elementos de la
página.
Para la imagen en grande que se verá en el centro, le hemos asignado una altura del 80%
de la ventana y un borde redondeado. El botón para cerrar la ventana se encuentra en la
parte superior derecha y las flechas en disposición flex y situadas en el espacio
alrededor de la imagen central. Todos estos botones son de color blanco.
Informe individual:
A mi parecer, ya llevamos bastante avanzada la página web aunque nos quedan algunas
cosas por hacer. De momento me está gustando mucho el resultado y, aunque no tiene
nada que ver con la primera idea que tuvimos, prefiero este tema. Por otra parte, me
parece que somos un grupo bastante completo y organizado y creo que todas llegaremos
a las expectativas que tenemos para el proyecto.
