Manual del programador Plataforma web dedicada a la venta de ropa para la
Empresa MALEJA BOWOMEN BOUTIQUE
Yulian David Castillo Blanco
Luis Hernando Porras Quiñones
I.E San Jerónimo Emiliani
Técnico en Programación de Software
Tunja, Colombia
2022
Tabla de contenido
INTRODUCCIÓN ................................................................................................... 4
ARQUITECTURA DE SOFTWARE................................................................... 6
CARACTERISTICAS DE LOS USUARIOS DEL SISTEMA .............................. 7
REQUISITOS DE HARDWARE Y SOFTWARE ................................................ 8
HARDWARE .............................................................................................. 8
SOFTWARE ............................................................................................... 8
BIBLIOGRAFIA ............................................................................................... 32
1 INTRODUCCIÓN
En el presente manual se definen los aspectos técnicos más relevantes para el
adecuado funcionamiento de la página web MALEJA Bowomen Boutique, además
se describen las herramientas y software utilizados, además de la arquitectura que
se definió para el desarrollo del proyecto.
2 ARQUITECTURA DE SOFTWARE
Microsoft ofrece herramientas de repositorio de código, adicional, estas
herramientas se encuentran enlazadas para lograr los procesos de integración y
despliegue continuo. En la figura 1 se muestra cómo se puede hospedar este tipo
de aplicación con Azure.
Figura 1. Implementación de una aplicación web con Azure.
Fuente: tomado de Microsoft.
3 CARACTERISTICAS DE LOS USUARIOS DEL SISTEMA
Los roles que interactúan en la aplicación web son: Usuario administrador y usuario
empleado
• Rol usuario Administrador: Este rol tiene habilitada todas las funciones de la
aplicación, es el encargado de habilitar el material para las capacitaciones de los
empleados, crear formularios de observación de comportamientos y condiciones
inseguras, crear los perfiles de los usuarios, además genera los reportes
estadísticos entre otros.
• Rol usuario empleado: Este rol a diferencia del rol administrador solo tiene
algunas funciones habilitadas de la aplicación, estas funciones son, la opción de
descargar el material que este habilitado, la opción que permite a cualquier reportar
una condición insegura o accidente de trabajo, de acuerdo con los formularios
parametrizados por el administrador
4 REQUISITOS DE HARDWARE Y SOFTWARE
Dentro de los requisitos para el funcionamiento con respecto a hardware y
software se describe lo siguiente:
4.1 HARDWARE
Si el servidor es adquirido (físico), es decir, que se va a instalar en una computadora
se presenta la siguiente propuesta:
Procesador: Sistemas con una CPU con velocidad de reloj mínima de 2.0 GHz.
Memoria: RAM de 4 GB (mayor capacidad, mejor rendimiento).
Disco: Espacio mínimo en disco de 2 GB.
4.2 SOFTWARE
El tipo de software que se va a utilizo en el desarrollo de la aplicación web fue:
• Microsoft Visual Studio (Importación de código fuente): Esta herramienta
permitió trabajar con el framework de .Net Core 3.1, para la construcción de la
aplicación web.
5 INSTALACIÓN, CONFIGURACIÓN, EJECUCIÓN, COPIAS DE SEGURIDAD
Y DESINSTALACIÓN DEL SISTEMA
En esta sección se describen las instrucciones para la instalación ejecución, copias
de seguridad y desinstalación del sistema, teniendo en cuenta los programas
necesarios.
5.1 INSTALACIÓN DE VISUAL STUDIO
Visual Studio Dado que es una herramienta de código abierto (Open source), y
permite la creación de aplicaciones web, con el framework de aplicaciones
ASP.NET Core y lengua je de programación C Sharp (C#).
Los siguientes pasos describen como instalar Visual Studio.
• Ingresar a la página principal de Visual Studio, como se muestra en la
figura 2.
Figura 2: Pagina principal de Visual Studio.
Fuente: tomado de Microsoft.
• Seleccionar la herramienta Visual Studio, dar clic en el botón descargar
Visual Studio y elegir la opción “Comunity”, como se muestra en lafigura
3.
Figura 3: Herramientas de Visual Studio.
Fuente: tomado de Microsoft.
• Seleccione lugar de descarga del instalador de Visual Studio y si lo desea
cambie el nombre del archivo como se muestra en la figura 4.
Figura 4: Descarga del archivo del instalador de Visual Studio.
Fuente: elaboración propia.
• Selecciones el archivo instalado, clic derecho y seleccionar la opción
ejecutar como administrador, como se muestra en la figura 5 y 6.
. Figura 5: Instalador de Visual Studio.
Fuente: elaboración propia.
Figura 6: Opción ejecución como administrador.
Fuente: elaboración propia.
• El programa pedirá que le otorgue permisos para realizar cambios en el
dispositivo, además solicitar que acepte términos de licencia y declaración
de privacidad, como se muestra en la figura 7.
Figura 7: Permisos de administrador de Visual Studio.
Fuente: elaboración propia.
• Una vez instalado el instalador, puede seleccionar los conjuntos de
características o cargas de trabajo para posteriormente ser instalados. La
figura 8 se muestra la manera de hacerlo.
Figura 8: Pantalla instalador de Visual Studio.
Fuente: elaboración propia.
• Seleccionar el idioma de Visual Studio en la sección de paquetes de
idiomas de su preferencia, como se muestra en la figura 9.
Figura 9: Instalación paquete de idioma.
Fuente: elaboración propia.
• Por ultimo seleccionar “instalar”.
• Abrir el programa Visual Studio para validar que quedo correctamente
instalado, como se ve en la figura 10.
Figura10: Pantalla principal al ingresar a Visual Studio.
Fuente: elaboración propia.
5.1.1 Importación del código fuente de la aplicación CRM SOGA
Para la importación del proyecto (Código fuente) ejecutar los siguientes pasos:
• Seleccionar el menú “archivo”, abrir y luego seleccionar “proyecto o solución”
como se muestra en la figura 11.
Figura11: Pantalla principal al ingresar a Visual Studio.
Fuente: elaboración propia.
• Luego se debe ir hacia la ruta donde se encuentra el proyecto y seleccionar
el archivo
Figura12: Archivo código fuente del proyecto
Por último, se desplegará el proyecto con toda la información asociada al código y
estructura.
1. Desarrollo web
El sitio web está desarrollado a base de visual Studio Code, trabajado con HTML, CSS, JavaScript, esto da la facilidad de
estructurar el sistema de manera que se facilita el mantenimiento a dicha solución, a continuación, se describe la estructura
básica del sistema y se enfatiza en los archivos.
6.1 Estructura Raíz
El proyecto Regalo Perfecto tiene la siguiente estructura,
• Paso #5 Estructura Raíz
• Figura 19 paso Nº5
A continuación, describiremos, la estructura y base fundamental de regalo perfecto.
• Css
El lenguaje de hojas de estilo CSS se utiliza habitualmente para dar un formato adecuado al HTML. De este modo, se
definen atributos como el diseño, el color y la forma de los elementos individuales de HTML.
• Paso #6 Estructura CSS
• Figura 20 paso Nº6
• Stilos.css: en este están distribuidos las secciones y las clases donde se detallan colores, ubicación, letra y
tamaños, de index.php, productos.php. y ubícanos.php.
• Style_login.css: está distribuido el orden, colores, y edición de el ingreso e inicio de sesión.
• Paso #7 Estructura CSS
• Figura 21 paso Nº7
• Img.
Esta ubicadas las imágenes que están incluidas en Regalo Perfecto, y en esta carpeta, hay una subcarpeta llamada vid,
donde están incluidos los videos ubicados en el sitio web
• Paso #8 Carpeta imágenes
• Figura 22 paso Nº8
• Js (Java script)
Acá están ubicados lo que serían conexiones, funciones, como seria el registro de usuario, inicio de sesión. Java script
cumple un papel fundamental para que el sitio web funcione con mayor facilidad.
• Paso #9 Estructura CSS
• Figura 23 paso Nº9
• Php
PHP es un lenguaje de programación destinado a desarrollar aplicaciones para la web y crear páginas web, favoreciendo la
conexión entre los servidores y la interfaz de usuario. Entre los factores que hicieron que PHP se volviera tan popular, se
destaca el hecho de que es de código abierto.
• Paso #10 Estructura CSS
• Figura 24 paso Nº10
