fbp-carta-restaurante-01-2023

Proyecto 2 - Carta de Restaurante con Bootstrap

Tabla de contenidos

Cómo funciona

  • Esta es una representación de la que podría ser una web de un comercio de restauración. En este caso, tenemos la web de una hamburguesería con diferentes páginas y elementos. La página inicial, en este caso, el index, es una página de presentación en el que podemos ver el logotipo, dirección y una imagen de fondo que sirve para introducirnos en la temática del local. La web está construida para que sea completamente responsive, de modo que tanto el logo como el fondo se adaptan a diferentes resoluciones, incluyendo diferentes fondos que mejoren el aspecto en sus diferentes resoluciones.

image

  • Pulsando sobre el logo podemos acceder al menú principal. El logo integra una transición estética con cambio de escala. Ya en el menú principal, nos encontramos con un vídeo del aspecto del local y diferentes imágenes para acceder a las principales secciones de la web. También disponemos de una barra superior con estas opciones. Las imágenes se ajustan a las distintas resoluciones, pasando de un grid de cuatro columnas a uno de dos, y apilando los elementos de uno en uno para su versión de móvil. La barra superior colapsa las opciones, a las que podemos acceder en su versión de resolución horizontal más baja desde un botón superior, a través de un dropdown.

image

image

  • Como en el resto de páginas de la web, todo se organiza de forma responsive, desde una resolución para pantalla horizontal, mostrando filas de cuatro columnas, llegando a apilar cada columna en vertical en su versión para dispositivos móviles, pasando por una resolución intermedia con bloques de dos columnas.

image

Referencias

image

image

Desarrollo

  • Para el desarrollo de la web se ha prestado mucha atención al aspecto estético, y todas las imágenes incluidas han sido trabajadas previamente con Photoshop, con múltiples ajustes para que encajasen mejor con el aspecto general de la web y se integrasen mejor en el fondo.

image

  • Todos los logotipos que se pueden ver en la web están desarrollados con Photoshop, incluyendo el logo que encontramos en la página de bienvenida, el logo estilo pixelart del lateral del navbar y las letras de ARCADE BURGUER. Algunos de los logotipos creados, no aparecen en la versión final de la web.

image

  • Todos los elementos principales con los que está articulada la web están extraídos de Bootstrap: las cards, las tablas, el carousel o el navbar. Todos ellos han sido integrados empleando HTML y CSS, desde Visual Studio Code. Han sido modificados con las herramientas que la propia web de Bootstrap pone a nuestra disposición en su documentación, empleando principalmente los colores "Warning", tras haber decidido que los colores corporativos de este restaurante ficticio serían el gris oscuro y el naranja.

Errores conocidos

  • Puesto que se trata de una web ficticia, la página de reservas está enlazada con otra página ficticia que muestra el mensaje "reserva realizada", sin embargo, no envía ningún formulario, tan sólo viaja de una página a otra. De la misma manera, el formulario de contacto no genera ninguna respuesta tras pulsar el botón "enviar".

Licencia y Copyright

  • Tanto las imágenes como el vídeo de presentación, son propiedad de los locales que han servido de inspiración para imaginar ARCADE BURGUER. Sin embargo, las fotografías de las hamburgesas que han servido de ejemplo pertenecen al restaurante The Fitzgerald (https://thefitzgerald.es/menu-burguers/), y las fotografías de los cócteles pertenecen al pub La Catrina Cocktails & Rock (https://www.lacatrina-cocktails-rock.com/). Aunque los ingredientes mostrados en los textos coinciden con las hamburguesas y cócteles reales, los nombres han sido modificados para integrarlos con la temática de la web, haciendo referencia a compañías de videojuegos y títulos reales.
  • Todo el repositorio se encuentra bajo la licencia MIT.