fmp-geekshubs-fsd-val-cartarestaurante

Carta de Resturante


Índice


Cómo se lanza

El lanzamiento de reproducción de la página web de un restaurante digital es muy sencillo. Únicamente abre el archivo index.html en tu navegador o accede a ella a traves del enlace: https://sierpe515.github.io/fmp-geekshubs-fsd-val-cartarestaurante/


Qué es

Estamos ante una reproducción de una web de un restaurante, realizada a través de HTML5, usando las tecnologías de Bootstrap y CSS. Cabe decir que este proyecto se ha desarrollado en un ámbito educativo con fines didácticos para la Academía GeeksHubs. Para dicho proyecto se nos pedía que creasemos una carta o menú de un restaurante digital, poniendo en práctica el uso de los conocimientos adquiridos en materia de las herramientas mencionadas.

RM1 RM2

Mi idea ha sido crear un restaurante ambientado en el universo fantástico de World of Warcraft, aprovechando la gran cantidad información y materia existente relativa a dicho mundo. Y dado que es un universo tan extenso, tanto en lore como en material general, me ha sido sencillo, aprovechando mis conocimientos, buscar la información necesaria para crear este restaurante ambientado sobretodo en World of Warcraft y Hearthstone.


Manejo

Se utiliza como cualquier otra web. Tan sólo hay que acceder a ella mediante las instrucciones indicadas en la sección "Cómo se lanza" y moverse a través de ella mediante los menús que conectan todas las páginas enlazadas. Se ha hecho uso de elementos :Hover para resaltar las áreas de interés cuando se pasa el cursor por encima de estos y se han integrado menús de dropdown y otras herramientas de bootstrap que hacen más sencilla la navegación, visibilidad y accesibilidad a la web.

RM3

Cómo se ha hecho

La web se ha desarrollado utilizando HTML5 y maquetado gracias a Bootstrap y un poco de CSS. Al utilizar la tecnología de bootstrap se ha dado formato mediante sus reglas y lenguaje, que es distinto al utilizado anteriormente al hacer lo mismo con CSS, lo que resulta de gran ayuda para que el resultado sea mucho más escalable y responsive. Además se han utilizado las herramientas que nos proporciona bootstrap para confeccionar elementos como las cards, los dropdown y los formularios.

RM4 RM5

Una de las mayores diferencias con respecto a CSS es la forma de orgarnizar el marcado de la web. Mientras en CSS podíamos ordenar los contenedores mediante el uso del display flex y del grid, en Bootstrap se utiliza una organización de grid mediante filas, las cuales engloban columnas, muy distintas que nos obligan a diseñar la web teniendo en cuenta esto.

WhatsApp Image 2023-01-30 at 21 07 34 WhatsApp Image 2023-01-30 at 21 08 02

Como se aprecia en las imágenes, se han realizado bocetos de cada página antes de desarrollarla. Pero debido, entre otras cosas, a nuestra inexperiencia, finalmente se acaban modificando para que el resultado final se ajuste mejor a nuestra idea conceptual.


Licencia

La licencia utilizada es una Creative Commons Legal Code. Para la realización de este trabajo académico se han utilizado imagenes pertenecientes a "World of Warcraft" y "Hearthstone", propiedad de Blizzar Entertaiment. Además de imágenes para la decoración de la web, también se han extraido las fotos de las cartas y recetas de "El libro de Cocina de World of Warcraft". Del mismo modo se ha dotado a las distintas páginas con un audio que reproduce la canción propia de la taverna de Hearthstone.


Problemas conocidos

Al ajustar las páginas a ciertos tamaños muy estrechos, algunos elementos pueden montarse sobre otros debido a las dimensiones mínimas ajustables, sobretodo en imágenes. En cualquier caso, se ha procurado que no quede inutilizado ninguno de los elementos esenciales de las páginas que permiten navegar entre páginas o enviar formularios.


Créditos

Este proyecto ha sido realizado únicamente por mí, Fernando Martínez Pardo, estudiante de la edición de Enero de 2023 de GeeksHubs Academy.