Plantilla diseño - interfaz - BD - seguridad
Plantilla de Diseño de Software para Aplicación Web
1. Información General de la Aplicación Web:
● Número de la Aplicación:
● Nombre de la Aplicación: POMARY’PASS
● Descripción: El objetivo de la aplicación es poder ver los que estan en pasantía
dependiendo su técnica y curso
● Nombre del desarrollador: Karla
2. Identificación de Componentes Posibles de la Aplicación Web
Módulos y Funciones (minimo 3 módulos ):
Identificar y desglosar los módulos principales de la aplicación, sus funcionalidades y cómo
interactúan entre sí.
Módulo 1: Gestión de Usuarios
Función principal: Administrar a los usuarios que están en pasantía).
funciones:
● inicio de sesión
● Barra de buscador
● Módulo 2: Gestión de los Cursos y Técnicas que están en pasantía
Función principal: Permitir la administración de cursos y técnicas asociadas.
Subfunciones:
● Crear, editar, listar y eliminar personas de la pasantía
● Apartados de técnicas
● Administrador que Gestiona
● Visualizar la relación entre cursos y técnicas de la pasantía.
○
● Módulo 3: Gestión de Estudiantes de la pasantia
○ Función 1:
Actualizar y administrar estudiantes
Permite al administrador agregar nuevos estudiantes al sistema, actualizar su
información personal y eliminarlos cuando sea necesario.
● Módulo 4 Gestión de Técnicas
●
○ Función 1:
○
Crear y administrar nuevos estudiante
Permite registrar nuevos estudiantes editar sus descripciones y eliminarlas
en caso de ser obsoletas o no relevantes.
○ Función 2:
Asignar técnicas a estudiantes y tecnicas
Establece relaciones entre técnicas y estudiantes
● Módulo 5: Control de Accesos y Roles
○ Función 1:
Definir y asignar roles de usuario
Permite configurar qué usuarios serán administradores, y asignar permisos
específicos .
○ Función 2:
Restringir funcionalidades según el rol
Asegura que cada usuario solo pueda acceder a las secciones y acciones que
le correspondan.
3. Diseño Interfaces
PAGINA DE INICIO
Aquí es el inicio de sesión previamente debe tener cada alumno una correo del politecto lo pondrá y te mandara
a inicio
Apartado para que los usuarios puedan cambiar técnica y los pasantes de cada
PAGINA PRINCIPAL
● Mostrar datos de manera amigable y comprensible para el usuario.
● Recibir y validar las entradas del usuario (por ejemplo, formularios de registro, búsqueda de productos,
etc.).
● Enviar solicitudes a la capa de negocio para obtener o procesar datos.
● Mostrar mensajes de error o éxito.
● Gestionar la navegación entre diferentes vistas o pantallas.
Componentes a Incluir:
● Interfaz de usuario (UI): Describe las pantallas principales y las interacciones clave con el usuario (por
ejemplo, página de inicio, formularios, tablas de datos).
● Tecnologías Utilizadas: Indicar las tecnologías que se usarán para la interfaz de usuario. Ejemplos
incluyen:
○ Frontend (Tecnologías): HTML, CSS, JavaScript, React, [Link], Angular, etc.
○ Frameworks de UI: Material UI, Bootstrap, Tailwind CSS, etc.
○ API de comunicación: Si aplica, se mencionará la comunicación con la capa de negocio (por
ejemplo, REST API
¿Qué debe incluir el estudiante en diseño interfaz?:
Descripción mínimo 4 de las pantallas principales: Cuáles son las pantallas o vistas clave de la aplicación. realizar captura de pantalla de
la interfaz y pegar qui)
1 El crud desde la perspectiva de de admin
2. Este es el inicio
3. Pasantes desde la perspectiva de usuario
4. Apartado del buscador
Tecnologías utilizadas: , HTML , CSS , JAVA , REPONSIVE, PYTHON FLASH
Flujo de interacción: Inicio de sesión / Registro:
● El usuario entra inicio de seccion y llegaal inicio
Pantalla principal del usuario (Dashboard):
● Al iniciar sesión, se redirige a una vista según su rol:
○ El administrador verá opciones para gestionar cursos, estudiantes y técnicas.
Navegación:
● Se utiliza un menú lateral o superior con botones como:
○ “Pasantes
○ “Inicio
○ “Tecnicas
○ “Buscador
● Cada sección permite formularios CRUD: crear, editar o eliminar registros fácilmente.
Formularios:
● Cada módulo cuenta con formularios estructurados que validan los datos antes de ser enviados.
● Los formularios usan alertas visuales para notificar errores o confirmaciones.
Interacciones adicionales:
● Paginación o búsqueda de registros.
● Filtros por nombre, curso o técnica.
● Confirmaciones antes de eliminar elementos.
EJEMPLOS PANTALLAS
4. Diseño de base datos
● Acceso a datos es responsable de interactuar con la base de datos o cualquier otro sistema de
almacenamiento de datos. Su función principal es gestionar las operaciones de lectura y escritura de datos.
Responsabilidades:
● Realizar las operaciones CRUD (Crear, Leer, Actualizar, Eliminar) sobre las entidades del sistema
(usuarios, productos, pedidos, etc.).
● Gestionar la conexión con la base de datos y garantizar la integridad de los datos.
● Abstracción del acceso a datos para que otras capas no tengan que preocuparse por la implementación
específica de la base de datos.
Componentes a Incluir:
● Repositorios o DAOs (Data Access Objects): Componentes que gestionan la persistencia de las
entidades y la ejecución de consultas a la base de datos.
● Modelos de datos: Representan las entidades que se almacenan en la base de datos (por ejemplo,
Usuario, Pedido, Producto).
● Tecnologías de base de datos: Describir qué sistema de base de datos se utilizará (relacional o no
relacional, como MySQL, PostgreSQL, MongoDB, Firebase, etc
¿Qué debe incluir el estudiante en la diseño base de datos?:
Descripción: El diseño de la base de datos se organiza en torno a las entidades principales: Usuario, Estudiante, y
Técnica. Cada entidad representa un componente clave del sistema de gestión académica.
● Componentes:
○ Usuario: almacena datos generales como nombre, correo, contraseña y rol.
○ Admin y Estudiante: están relacionados con Usuario y representan tipos de usuarios específicos.
○ Técnica: describe las técnicas o contenidos que se imparten en los cursos.
● Datos:
Incluyen identificadores únicos (ID), nombres, descripciones, correos, etc.
● Relaciones:
○ Un usuario puede ser nombrado admin (uno a uno)
○ Un curso puede tener varias técnicas (relación muchos a muchos).
○ Un estudiante puede inscribirse en varios cursos (relación muchos a muchos).
● Llaves principales (PK):
Cada entidad tiene una clave primaria como id_usuario, id_curso, id_tecnica, que identifica de forma única
cada registro.
Tecnologías utilizadas: MySQL
Realizar diagrama entidad - relación BD:
Aquí se muestran las entidades y relaciones con las que se hacen los dichos procesos en este
caso nuestra area de gestion de registro
