UNIVERSIDAD AUTONOMA DE NUEVO LEÓN

FACULTAD DE INGENIERIA MECANICA Y

ELECTRICA

Laboratorio de Programación Web

FASE #1
Planeación

Docente: Luis Daniel Lepe Rodríguez

Grupo: 217
Hora: Martes N2

Nombre Matricula
Diego Alonso Noriega Bañuelos 2047914
Cecilia Daniela De la Torre Hernández 2028784
 12/02/2024

2.1 Tema, propósitos y usuarios

Nuestra página, “El Restaurante, “El Manantial”, se enfoca en un restaurante con
comida Mexicana, dirigido para todo el público, con la finalidad de poder hacer
reservaciones al nombre del usuario, y ver diferentes sucursales que queden
cerca del domicilio del usuario proporcionando su código postal.

Con la creación de la página, se espera que los usuarios puedan reservar de

manera más rápida y sin problema así mismo la opción de ver sucursales
cercanas, hora y fecha disponible y más, así mismo, ver el menú y los precios de
las comidas a su elección.

En la página se encontrarán dos roles, usuario y administrador. La base de datos

asignará predeterminadamente a todos los registros nuevos el valor de usuario,
hasta que un administrador, desde la pantalla de cuentas dentro de la página,
decida cambiar el rol de la cuenta.

El usuario al momento de iniciar sesión con su correo y contraseña podrá

visualizar, elegir y apartar la comida elección, ver que sucursal es de su agrado y
reservar con facilidad
2.2 Diagrama de flujo del sitio web
 2.3 Bosquejos de las pantallas

PANTALLAS DE LOS USUARIOS:

1- Pantalla de inicio principal
Primera pantalla que aparece al entrar en la pagina en donde se le presentarán al usuario las
opciones con las que podrá interactuar: menú, reservación, reseñas, botón de Home en
forma del logo del restaurante, y botón que muestra más opciones, todas estas estarán
posicionadas en una barra de navegación superior que estará fija en cada pantalla de la
página. Además, en esta primera pantalla se presenta una descripción del restaurante y un
carrusel de imágenes almacenadas y controladas por los admins en una base de datos, estas
imágenes disponibles podrán ser cambiadas por los usuarios para su propia visualización.
 1.1-Botón que muestra opciones secundarias
Cuando el usuario presione el botón representado por tres líneas se desplegará una pestaña
que contendrá opciones secundarias, las cuáles cualquier usuario podrá interactuar dando
clic en cada una de las opciones que lo llevará a otra pantalla, incluso si un usuario no tiene
cuenta podrá realizar esto. Esta pequeña pestaña se podrá cerrar dando clic en la x
posicionada en la parte superior
 1.2 – Opciones principales
Para poder hacer uso de las opciones principales (Menú, reservaciones, reseñas) el usuario
tendrá que iniciar sesión o crear una cuenta si es que no posee una, cuando haces clic en
cualquiera de esas tres opciones te redirigirá a la pantalla de inicio de sesión
 2- Pantalla de inicio de sesión
La primera forma de acceder a la pantalla de inicio de sesión es mediante
hacer clic en el botón de “Iniciar Sesión” que se muestra en la pestaña de
opciones secundarias, la otra manera cómo vimos anteriormente es dando clic
a cualquiera de las opciones principales sin haber iniciado sesión. Suponiendo
que el usuario ya tiene una cuenta solo ingresará su correo con el que se
registró y su contraseña, e inmediatamente lo llevará a la pantalla de inicio
dónde ya podrá hacer uso de las opciones principales. Esta pantalla de inicio
de sesión posee dos opciones más con sus respectivas pantallas (recuperar
contraseña y crear cuenta).
 3-Pantalla de recuperación o cambio de contraseña
Dando clic a recuperar contraseña se le pedirá al usuario que escriba el correo con el que se
registró para hacerle llegar un correo de recuperación. Implementamos y configuramos una
API de proveedor de servicio de correo correspondiente, en este caso Gmail, en donde
recibiremos una solicitud de cambio de contraseña el cuál se debe verificar si el correo
electrónico proporcionado está asociado con una cuenta de usuario en la base de datos.
 3.1- Envío de correo electrónico de recuperación de contraseña:
Utilizamos el servidor de correo electrónico configurado para enviar un correo electrónico
al usuario que contiene un enlace único que al momento de abrirlo te redirige de vuelta a la
página en una pantalla para poder hacer el cambio de contraseña

3.2-Reestableción de contraseña
Los usuarios pueden ingresar una nueva contraseña después de hacer clic en el enlace de
recuperación de contraseña enviado por correo electrónico. Una vez que el usuario ha
proporcionado una nueva contraseña, se almacenará de manera segura en la base de datos y
se actualiza para la cuenta de usuario correspondiente.

4-Creación de cuenta
Se le muestra al usuario los diferentes campos que tiene que completar para la creación de
su cuenta, tales cómo nombre, apellido, correo y contraseña, de no llenarse alguno de estos
campos no te dejará acceder, y se mostrará un mensaje en el campo correspondiente que
faltó de llenarse, además se tiene que marcar la casilla que acepta términos y condiciones, y
una vez hecho esto al darle clic en aceptar se agrega tu cuenta con tus datos
correspondientes a la base de datos de usuarios.

4.1-Creación de cuenta
Una vez el usuario haya dado en aceptar en la pantalla de creación de cuenta se le llevará
automáticamente a la pantalla de inicio de sesión en dónde ya podrá interactuar con las
funciones principales y además podrá verificar que su cuenta ha sido creada tan solo con ir
a la pestaña de opciones secundarias, donde podrá apreciar el correo con el que se registró,
así como poder cerrar sesión.

5-Galería de imágenes
Esta sección pretende mostrar una serie de imágenes estáticas tipo lightbox,
las cuáles fueron puestas por los administradores desde una pantalla de
administración y están dispuestas a actualizarse y ser reemplazadas por otras,
y aparte son directamente sacadas de una base de datos. Estás imágenes tienen
como propósito mostrar lo mejor del restaurante.

6- Pantalla de sucursales
En esta sección el usuario podrá consultar las sucursales que se tienen
disponibles y se presentan diferentes interacciones: la primera es una barra
que pide que coloques tu código postal de tu localidad para que el sistema
pueda encontrar una sucursal cerca de tu localidad en base al código, y esto se
va a lograr con una API de geolocalización o búsqueda de direcciones, en este
caso Google maps. Al recibir el código postal del usuario, se realiza una
solicitud a la API de geolocalización para obtener la ubicación asociada al
código postal. Se utilizará la ubicación geográfica obtenida para realizar una
consulta a una base de datos de sucursales. Y de esta forma te mostrará la
ubicación de la sucursal en Google maps desde la misma pantalla.
En esta pantalla también existe una barra de navegación para poder apreciar
todas las sucursales una por una. Cuando se presione el botón “Ir” te enseñará
la ubicación exacta en un recuadro en donde está integrado Google maps

7-Pantalla de Contacto
Pantalla meramente estática con dos imágenes colocadas tipo lightbox en
donde se le presenta al usuario las redes sociales del restaurante y un correo de
contacto para uso de sugerencias o quejas de una forma más directa y
personal, al presionar cada vinculo te mandará a la respectiva red social o en
el caso del correo te abrirá automáticamente un mensaje para enviar por correo
que tiene como destinatario la dirección de correo del restaurante
 8-Pantalla de menú
Esta es una de las opciones principales, aquí el usuario podrá interactuar y consultar él
menú que se encuentra disponible, cada platillo tendrá una visualización tipo eCommerce
galery, es decir que las imágenes de cada platillo estarán disponibles en diferentes
presentaciones y sus imágenes tendrán esa forma de colocación de imágenes dónde el
usuario solo tiene que dar clic en los botones rojos de cada platillo. La disposición de estos
platillos depende de los administradores, pidiendo quitar o agregar platillos al menú, y a su
vez sacando las imágenes desde una base de datos.
 9- Reservaciones
Segunda opción principal, el usuario podrá reservar una mesa en el restaurante
tan sólo con seleccionar la cantidad de invitados que llevará mediante dos
botones, además también puede escoger un día de reservación mediante el
calendario implementado con tecnología Bootstrap, y por último se le
presentará una pestaña desplegable con las horas disponibles ya predilectas
por los administradores, esto se tiene así debido a que puede existir un margen
de cambio inmediato en el restaurante por razones medioambientales que
hagan que el restaurante cierre a una hora que no es habitual, así que los
admins pueden controlar eso fácil y rápido.
Además, el usuario se selecciona la sucursal a la que va a asistir, y una vez
llenado todas las casillas le da a aceptar y su reservación se lleva a una base de
datos, en la que espera a ser aceptada por el checador.

10-Correo de confirmación de la reservación

Una vez aceptada la reservación se envía un correo de verificación que contiene los datos
que seleccionó el usuario y además un número de folio único que debe presentar la persona
que hizo la reservación al momento de llegar al restaurante.
 11-Cancelar reservación
Si el usuario presiona el botón de reservación teniendo ya una reservación le saltará una
alerta diciéndole que ya tiene una reservación y se le da la opción de cancelarla tan sólo
dándole clic al botón rojo, automáticamente su cita queda borrada de la base de datos.
 12-Sección de reseñas
Otra opción principal es la sección de reseñas, aquí los usuarios podrán dejar sus
comentarios y estrellas acerca de que les pareció el restaurante, se espera que los
administradores puedan responder esos comentarios desde un panel de administración, el
límite de caracteres por comentario es de 200 caracteres y para dejar un comentario solo
basta con escribir en el campo que está en la parte superior, y por último para enviarlo es
necesario darle en el botón de aceptar.

2.3.1 Pantallas CRUD

PANTALLAS DE ADMINISTRACIÓN
 1- MENÚ DE ADMIN
Es importante saber que los admins pueden acceder a los distintos paneles de control y
CRUDS de una manera rápida, estas opciones están colocadas debajo de las opciones
secundarias en el botón de las tres rayas

2-PANTALLA DE PANEL DE CONTROL

Esta pantalla está hecha pretendiendo que los admins puedan observar datos generales
cómo el tráfico del sitio, reseñas hechas por los usuarios, así como consultar información
de una manera más rápida, además de que se genera un reporte que muestra una gráfica
de una media de reservaciones que se han concretado a partir de lunes y viernes. (estos
reportes están más detallados en la pantalla de reportes.

3-PANTALLA DE PANEL DE EDICIÓN DE IMÁGENES Y TEXTO

Apartado donde los admins podrán acceder a la edición de texto e imágenes en la página,
representado por un menú que indica las pantallas que puede editar, y una vez entrando a
esa pantalla podrá agregar imágenes sacadas de una base de datos, además podrá ver una
vista previa sobre cómo se vería esa imagen colocada dentro de una card por ejemplo
 4-PANTALLA DE REPORTES DE LA PAGINA
En esta pantalla los administradores podrán observar los reportes que genera la página,
cómo vimos anteriormente tenemos una gráfica que muestra una media de reservaciones
hechas por semana, se pueden configurar para mostrar la gráfica de reservaciones hechas
por mes, año y en total. Además, se puede apreciar el trafico o tiempo que pasan los
usuarios por días en específico y/o por pantalla.
 5-PANTALLA DE ADMINISTRACION DE COMENTARIOS
En esta pantalla los admins podrán controlar los comentarios que son hechos
por los usuarios en la sección de reseñas, los admins podrán aceptar o
eliminar las solicitudes de comentarios que se generen, además de que
también se pueden borrar comentarios que ya se habían aceptado para
aparecer en la pagina
 6-PANTALLA DE ADMINISTRACION DE SUCURSALES
Se tiene también una pantalla en la que los admins podrán agregar o quitar sucursales que
mostrarán o eliminarán de la sección de sucursales, ya se por si el restaurante abre una
sucursal nueva y se quiere darle difusión a través de la página o por si se quiere dar de
baja alguna sucursal que ha sido cerrada
 7-PANTALLA DE SELECCION DE CRUDS
Menú despegable que tienen los admins para seleccionar un CRUD en específico
 8-PANTALLA CRUD MENÚ DE LOS PLATILLOS
Se espera que aquí los admins puedan controlar, agregar, o quitar platillos del menú así
cómo modificar sus precios, esto está dado así ya que hay veces en las que algunos
platillos pueden ser descontinuados cierto tiempo, ya que quizás no es temporada de
cosecha de cierto producto.
 3-PANTALLA CRUD RESRVACIONES
En esta pantalla se podrá observar y controlar el flujo de reservaciones desde una manera
más sencilla por parte de los administradores, podrán eliminar reservaciones en ciertos
casos que se requieran, aunque de igual manera la cancelación de reservaciones hechas
por los mismos usuarios se borrará automáticamente de la base de datos si así lo
solicitan cómo habíamos dicho anteriormente.
 3-PANTALLA CRUD USUARIOS
Los admins podrán observar todos los usuarios registrados y eliminarlos si así se requiere
de la base de datos del sitio web, ya sea por uso indebido de esta o por comentarios
irrespetuosos hacia los administradores en la sección de reseñas
 6-CRUD IMÁGENES
Permite a los administradores agregar o quitar imágenes, que más tarde serán usadas o
eliminadas ya sea el caso en la página web
 6-CRUD SUCURSALES
Para agregar o quitar o editar información acerca de las sucursales
disponibles
 PANTALLAS DEL CHECADOR
PANTALLA DE ADMINISTRACIÓN DE RESERVACIONES
En este nuevo rol hace aparición el checador, su única tarea es administrar la única
pantalla a la que tiene acceso que es la de reservaciones, lo que tiene que hacer es
aceptar reservación por reservación de los clientes, una vez aceptadas cada una de las
reservaciones se les envía en automático un correo de verificación al usuario que contiene
un folio, ese folio lo debe presentar el usuario al momento de presentarse en el
restaurante y el checador debe revisar en la pantalla de administración que el folio del
usuario coincida con el que está en la pagina de administración de reservaciones.
Cabe destacar que el checador sabrá si hay mesas disponibles a partir de un calendario de
reservaciones en el que se observa las reservaciones que ya han sido aceptadas, y de esta
manera aceptará cada reservación.
 2.4 Aspectos Técnicos
Tecnologías de Front-End:
- HTML.- es el núcleo del desarrollo frontend, se puede crear la estructura de un
sitio web con esta tecnología, con los elementos HTML se puede brindar opciones
para agregar imágenes, contenedores, listas, filas etc.
- CSS.- esta tecnología nos permite crear reglas de estilo adicionales a la estructura
HTML, además permite que una página web se vea bien en todos los tamaños de
las pantallas y sea mas interactiva con algunas animaciones
- JavaScript.- es un lenguaje de programación que nos permite implementar
funciones complejas en las paginas web, de modo que cualquier característica que
este del lado frontend puede utilizar JavaScript, ya sean actualizaciones de
contenido, mapas, etc.
En esta página web se utilizarían las 3 tecnologías para desarrollar las partes técnicas,
siendo el HTML la prioridad ya que como se mencionó, es la estructura del sitio web, sin
dejar de utilizar el CSS y el JavaScript ya que cuentan con herramientas que serían útiles
en la elaboración de la página web.
Tecnologías de Back-End:
- C#.net.- trabaja en la automatización de programación en servidores Windows y
plataformas web (utilizando el marco ASO.net), se encuentra en una amplia
aplicaciones en el desarrollo de aplicaciones de escritorio y en sistemas
integrados.
- Java.- es útil para crear aplicaciones escalables al permitir que el servidor ejecute
varias instancias, los componentes de java están fácilmente
disponibles y la sintaxis es fácil de entender
- Python.- uno de los beneficios que ofrece es el estilo de programar similar al
ingles que lo hace altamente legible, además de las bibliotecas con las que cuenta,
que permiten mejorar tareas como correo electrónico, navegación, asignaciones de
bases de datos etc.
- Ruby.- es ampliamente utilizado para el desarrollo de aplicaciones web, scripting,
automatización, desarrollo de juegos, además permite diferentes estilos de
programación lo cual es de libre elección para decidir la mejor manera de abordar
un problema
En esta página se utilizaría Java y/o C# de acuerdo con lo antes mencionado, son los mas
utilizados al momento de la creación de páginas web, sin embargo, dada la investigación,
el lenguaje C# accede a crear distintas aplicaciones que ejecutan el net. lo cual es de vital
importancia en este proyecto.
 Base de Datos:
- SQL Server.- es un sistema de gestión de bases de datos relacionales (RDBMS)
permite comunicarse con la base de datos y revisar operaciones de acceso y
manipulación de la información almacenada
- MySQL.- es un sistema de gestión de datos relacionales de código basado en SQL,
se diseñó y optimizó para las aplicaciones web y puede utilizarse en cualquier
plataforma, permite procesar millones de consultes que se necesitan al gestionar
múltiples transferencias de dinero.
- PostgreSQL.- es un sistema de bases de datos compatible con los servicios de
OVHcloud, consiste en un gestor que soporta diferentes tipos de datos y está
orientado a objetos, es un código abierto, es decir que cuenta con una comunidad
de desarrolladores que implementan mejoras y se resuelven errores de forma
altruista.
En esta parte, se utilizará SQL Server, ya que, al ser una tecnología de base de datos más
utilizada, es de las más fáciles de aprender a manipular, crear y eliminar base de datos sin
ningún tipio de compilación, siendo esta la que desarrollaremos su práctica y
conocimiento en la clase de Programación Web

Tecnología API:

Hay varios proveedores de servicios de correo electrónico que ofrecen APIs para enviar
correos electrónicos de forma programática. Algunos de los proveedores populares son
SendGrid, Mailgun, Amazon SES, y Gmail (a través de la API de Gmail). Debes
registrarte en el servicio que elijas y obtener las credenciales API necesarias para
autenticar tus solicitudes.
Existen varias APIs de código postal que proporcionan datos geográficos y de ubicación
basados en códigos postales. Algunas opciones populares incluyen Google Places API,
OpenStreetMap Nominatim API, y Zippopotamus API. Debes revisar las características,
los límites de uso y los términos de servicio de cada API antes de elegir una para tu
aplicación.