Proyecto del Curso (II): Web estática

10/03/2023 – Navegación y footer

Como ya tengo una pequeña idea de cómo va a ser la web, he decidido hacerla por partes, es decir, por elementos y luego juntarlos. Es decir, primero me voy a centrar en hacer la barra de navegación y el footer y después, con los ejemplos de Bootstrap, iré completando el home.

Primero, la barra de navegación, adaptada a la paleta de colores del estudio y a la cantidad de páginas que llegará a contener la web en un futuro.

Pero antes había que definir cómo iba a ser la paleta. Como lo importante son las fotos, opté por la siguiente: color principal blanco – fondo, barra de navegación, menú de navegación, botones sobre imágenes –, color secundario negro – texto, botones sobre fondo blanco, botones en bajo contraste con fondo – y, en menor cantidad, gris – breadcrumb, footer, secciones intercaladas –. Que, además, concuerda con el logotipo del estudio.

Una vez hecho, pasé a modificar la barra de menú.

Opté por utilizar un icono de menú, por el número de páginas, que estuviera en el lado izquierdo de la ventana, por lo que el logo está centrado con posición absoluta.

En versiones móviles el icono pasa a estar en el lado derecho, para permitir una mejor accesibilidad con una mano. Además, se incluye un link para llamar al estudio directamente desde la barra de navegación, por lo que no es necesario usar una posición absoluta.

La interacción con el menú desplegable se ha programado en jQuery, añadiendo una acción click para el icono. Como el menú se sitúa debajo de la barra, era necesario animar el icono de menú, con CSS y jQuery, basado en el menú #2 de este artículo: webdeasy.de.

Y en cuanto al diseño, recoge algún concepto del menú de El Corte Inglés, por el uso de una fuente serif en la página actual, pero añadiendo un borde inferior con animación y evitando recargarlo. No se permite el movimiento de la página con el menú abierto, empleando la clase locked sobre el body – que usa overflow: hidden –.

Esta imagen está ligeramente desactualizada, ya que posteriormente decidí que ocupara toda la ventana, con el texto y los enlaces sociales en el centro. Asimismo, la animación pasó de ser una salida del lateral a ser una ampliación de la barra de menú. Para ello, adapté el sistema de menú de Bootstrap: si la lista tenía su propio fondo, dejaba al final un hueco sin rellenar y no quedaba bien, por lo que el menú se amplía añadiendo JS a la animación de Bootstrap.

Finalmente, para el fondo del menú desplegable he optado por un blanco con efecto backdrop-blur, como en apple.com, que, cuando se abre el menú, pasa a ser blanco opaco – para que se distinga el contenido del menú de navegación –.

Otro elemento necesario para la web es el footer. Como la barra siempre está fija en la ventana, y todos los enlaces se incluyen en el menú de navegación, no era necesario un footer expandido.

En base a las opciones de footer de Bootstrap, comencé con el de tres columnas, para poner el teléfono de contacto del estudio – de forma que se vea en todos los dispositivos –, sus redes sociales y, como sobraba espacio, el copyright. Se ha diseñado de forma que el contenido siempre esté en el centro de la columna.

11/03/2023 – Planteamiento de la portada

Para el home he querido basarme en el de Apple: los principales servicios que quiere promocionar el estudio ocupando todo el ancho y 100vh, y una selección de otros servicios en un grid de cuatro elementos de 70vh.

Por eso aproveché la plantilla de cover de Bootstrap, que incluye algún atributo CSS interesante para poder modelar algo de ese estilo.

Primero se incluye una imagen de fondo con el eslogan del estudio, que, posiblemente para la entrega final, incluya una imagen de forma aleatoria entre una selección cada vez que se acceda al home. Se incluye un icono para indicar que se debe seguir haciendo scroll para ver toda la página, que se mueve hacia abajo con hover para resaltar el movimiento. Además, es un enlace que lleva, de forma suave, a la siguiente sección.

Posteriormente, aparece una sección más pequeña para que los usuarios puedan conocer más sobre el estudio, con un pequeño resumen y un botón que lleva a la página ‘el estudio’, que está deshabilitado por no existir.

A partir de este punto, las secciones pasan a ser una mezcla entre el ejemplo ‘Cover’ de Bootstrap y el home de Apple. Los elementos de la sección – que son el título, como imagen, y un botón de enlace – se sitúan en el centro, y se aprovecha de la clase streched-link para que todo el espacio se convierta en un enlace a la página que se promociona.

Para evitar problemas al usar 100vh, se ha añadido a la altura el operador max(…) con una altura constante en px. De esta forma, si se ve la información en una pantalla estrecha o un móvil girado, el contenido tiene espacio suficiente para visualizarse correctamente.

Las imágenes todavía son provisionales, así que en ocasiones no tienen un buen contraste. Para la entrega ya se habrán cambiado y/o ajustado.

El grid posterior va a basarse en estos principios de diseño.

13/03/2023 – Grid de la portada

Siguiendo la estela de la última entrada, hoy se diseñó el grid del home.

Primero pensé en hacerlo aprovechándome de las columnas de Bootstrap, pero no cuadraba al necesitar que ocupara toda la ventana – por lo que no podía ponerlo en un row y se salían del view-port –. Por ello, simplemente usé los valores de anchura que se aplican para col-md en una petición @media y ajusté las columnas del grid con grid-template-columns, cambiando entre una y dos.

Además, como en los elementos grandes de la portada, se pone una altura mínima en px para evitar problemas de visualización.

Para no incluir a mano muchas clases de Bootstrap, he creado un JS específico para el home que los incluye de forma automática, lo que también permite crear elementos distintos – como el caso de la caja regala recuerdos, que no centra sus ítems –.

Las imágenes utilizadas comparten tonos suaves, para mantener armonía, salvo el elemento de ‘Regala Recuerdos’ – en el que predomina el gris –. De esta manera, se puede destacar un servicio del estudio que no está muy extendido entre fotógrafos: regalar sesiones de fotos a otras personas.

15/03/2023 – Contacto

Para la página de contacto se ha optado por un formulario que incluya lo justo y necesario, para no agobiar al usuario con muchos inputs.

Se ha usado la plantilla de Bootstrap, con formularios flotantes – con etiquetas que flotan sobre el input del usuario, cuando escribe o está en focus –. El estilo se ha personalizado, sólo con bordes inferiores, en negro, y sin border-radius.

Asimismo, he usado la validación JS en cliente de Bootstrap, que permite identificar fácilmente los fallos del usuario con colores, iconos y mensajes de error. Validación que podrá, posteriormente, emplearse junto a la validación en servidor y sus mensajes de error.

Es verdad que no me gusta que marca lo válido en verde. Lo he tratado de cambiar como he podido – porque creo que es redundante marcar lo que está bien si se marca lo que no –, pero lo he mantenido en focus, ya que si no era mucha complicación y código en CSS para algo no tan necesario.

También ocurre que la opción predefinida ‘Elige una opción’, marcada como disabled, se da por válida, pero posteriormente se puede corregir con PHP.

Además, he comprobado que esta validación en cliente no interfiere posteriormente con PHP.

Aprovechando la imagen, comentar que se ha personalizado el breadcrumb para que use flechas, que sugieren dirección y permiten identificar fácilmente la ruta desde el home. Como el color de fondo es igual al del footer, se ha añadido un separador ligeramente más oscuro para ver qué es qué.

Finalmente, como la web es de una empresa real se han añadido dos checkbox para cumplir con el RGPD, autorizando el uso de los datos para ponerse en contacto con el cliente y para permitir el envío de información comercial – la última es opcional –.

21/03/2023 – Resultado del formulario

El diseño de la página de respuesta al formulario se diseñó en el laboratorio de ‘Formularios PHP’, pero para esta entrega se limita a eliminar los elementos php y, los que muestran resultados mediante _REQUEST, a sustituirlos por texto entre signos de mayor y menor – <nombre> –.

Simplemente indica que se ha rellenado correctamente el formulario y que el estudio se pondrá en contacto con el usuario posteriormente, usando un ‘Hola, <nombre>’ para generar mayor cercanía con el cliente.

04/04/2023 – Plantilla de contenido

Las necesidades del estudio llevan a crear páginas de contenido, cada una para cada servicio que ofrece. Para esta entrega sólo se ha desarrollado una, la de bodas, que servirá como plantilla para todas. En principio, este documento no se incluirá en la entrega en Moodle por espacio, pero está disponible en la página web colgada en el servidor, a través del enlace en el home y la barra de navegación, o de este.

Se ha dividido en secciones: introducción, galería, productos, servicios y relacionados.

En la introducción se plantea el tipo de sesión brevemente, con una frase destacada, y se incluye una foto destacada – de altura 100vh – con el título.

Posteriormente aparece la galería, un portfolio de otras sesiones iguales que permite ver el posible resultado si se contrata al estudio, impulsado por un plugin JS – PhotoSwipe –. Se ha desarrollado una plantilla que combina dos tipos de imágenes – grande o mediana – con CSS y los selectores odd, even; y que se puede repetir de seis en seis imágenes.

En productos se especifica qué hace el estudio en ese tipo de sesiones, como por ejemplo: pre bodas, bodas, post bodas, vídeo… En servicios se incluye qué hace el estudio posteriormente con las fotografías: impresión, álbumes, galerías digitales…

Ambas secciones utilizan la fórmula imagen + texto, intercalando sus posiciones. El problema era cómo conseguir que el intercalado ‘saltase’ de una sección a otra, y lo conseguí con jQuery y el selector odd aplicado sólo a los div que contienen las columnas, de forma que no reconoce si están en la misma sección y lo aplica por igual. Además, tienen un título que identifica el tipo de sección.

Finalmente, en relacionados se presentan otros servicios del estudio y/o un enlace directo al contacto que, a veces, está personalizado para el servicio concreto – pero para esta entrega siempre lleva al mismo contacto –.

Como observación, al final de la página hay dos ítems todavía por hacer. La razón es, principalmente, falta de tiempo, pero para la entrega final estarán terminados. Además, el objetivo del segundo elemento es abrir un popup para suscribirse a una newsletter, que tiene su cierta complicación ya que no quiero incluir el código en todas las páginas – sino que, al hacer click en el enlace, se incluya el código –.

10/04/2023 – Plugins

En base a la necesidad de adaptar la web de una empresa al RGPD, y a un posible uso de cookies, tanto propias como de terceros (Google Analytics, redes sociales), he decidido utilizar un plugin de aceptación de cookies – ihavecookies –. Por ahora no hay ninguna – salvo la que incluye el propio plugin –, pero para la entrega final igual se usa alguna en la web. El tiempo que tarda en volver a preguntar por la aceptación está fijado en 30 días, pero si se añaden más cookies se irá actualizando.

El plugin se ha configurado en su propio fichero, y se inicializa en el fichero mi-imagen.js, que está presente en todos los documentos HTML de la web.

Finalmente, se ha añadido otro plugin de JS, para las galerías de imágenes – PhotoSwipe –. Actualmente sólo hay una página de contenido, la de bodas, que no contiene todas las imágenes ya que todavía se está haciendo una selección y se están optimizando para la web.

14/04/2023 – Retoques finales

Para terminar la web estática, me he centrado más en aspectos estéticos.

Primero, he cambiado la tipografía de la web. En un principio utilizaba Public Sans, pero no me terminaba de convencer su forma, por lo que al final he pasado a la fuente Inter, con caracteres más elegantes y, sobre todo, porque puede utilizar ‘G’, ‘g’ y ‘M’ similares a las de Helvetica Neue – que es la del logo –, e incluso con más funcionalidades que detallan en su web. La razón por la que no se ha elegido directamente Helvetica Neue es que, para garantizar que esté en todas las versiones de la web, hay que pagar, e Inter es una muy buena tipografía abierta, bajo Open Font License.

Además, en el home se ha sustituido un dibujo SVG con una imagen de la fotógrafa del estudio, que contribuye a la armonía de esa página al sólo aparecer fotografías reales. También en esta página se ha añadido un fondo al título de la página – en ‘#Pasión por la fotografía’ –, un poco como una ñapa, para mejorar la legibilidad.

Finalmente, por problemas de compatibilidad de la combinación background-attachment: fixed y background-position: cover en iPads, se ha fijado la posición de las portadas del home y de las páginas de contenido.