FASE 2

DECIDIR Y REALIZACIÒN DEL PROYECTO

Felipe Acuna

Julián Andrés Cardona Sánchez- 1094906408

Juan Camilo Mora-1023722869

UNIVERSIDAD NACIONAL ABIERTA Y DISTANCIA

UNAD

Armenia-Quindío

Abril 2019
 FASE 2
DECIDIR Y REALIZACIÒN DEL PROYECTO

Aprendices:

Felipe Acuna

Julián Andrés Cardona Sánchez- 1094906408

Juan Camilo Mora-1023722869

Grupo:
204034_4

Tutor:
Rafael Pérez Holguín

UNIVERSIDAD NACIONAL ABIERTA Y DISTANCIA

UNAD

Armenia-Quindío

Abril 2019
 TABLA DE CONTENIDO

INTRODUCCIÓN........................................................................................................................................... 1
OBJETIVOS ..................................................................................................................................................... 2
General ....................................................................................................................................................... 2
Específicos ................................................................................................................................................ 2
ANÁLISIS DE REQUISITOS....................................................................................................................... 5
ESPECIFICACIONES TÉCNICAS ............................................................................................................. 9
DISEÑO DE LA SOLUCIÓN WEB ......................................................................................................... 10
DESARROLLO DE LA SOLUCIÓN WEB ............................................................................................. 17
CRONOGRAMA DE ACTIVIDADES ..................................................................................................... 32
RECURSOS PARA EL PROYECTO WEB............................................................................................. 33
Recursos de Hardware ...................................................................................................................... 33
Recursos de Software ........................................................................................................................ 33
Recurso Humano ................................................................................................................................. 33
CONCLUSIONES ........................................................................................................................................ 34
BIBLIOGRAFÍA .......................................................................................................................................... 35
 INTRODUCCIÓN

Con el avance constante en la tecnología, en especial con la llegada del

internet, se rompieron barreras que impedían que muchas regiones
interactuaran entre sí, se puede decir que con la llegada de esta
tecnología fue cuando el proceso de globalización nació verdaderamente,
un mundo diverso en conexión en todos los ámbitos sociales y culturales,
desde su llegada el conocimiento de todo tipo paso a estar al alcance de
todos, los familiares físicamente distantes los unos de los otros ya podían
comunicarse gracias los muchos servicios de comunicación vía internet
que han sido desarrollados, y aun más importante desde las grandes
empresas al simple comerciante ya pueden ofrecer sus servicios por este
medio, como por ejemplo con plataformas web como MercadoLibre, para
venta y compra de productos de todo tipo, sin limitarse a un local físico y
aumentado su alcance y así llegar a más clientes, por consiguiente
mejorando sus ganancias. Pero esto ya no se puede considerar como algo
opcional, si el emprendedor quiera estar al día debe hacer uso de estas
ventajas que ofrece el internet y otras tecnologías para considerarse
competente.

1
 OBJETIVOS

General

Desarrollar la solución (Pagina web) web para que el almacén Tecno-TIC

Ltda. pueda ofrecer sus productos y servicios vía internet.

Específicos

 Recolección y análisis de los requerimientos para la solución web

con el cliente Tecno-TIC Ltda.

 Análisis de costos de la solución web a desarrollar, hardware,

software y recurso humano requeridos,

 Desarrollo del cronograma de actividades, programación de cada

actividad a desarrollar, tiempos establecidos para cada etapa del
desarrollo de la solución web.

 Desarrollo de solución web y pruebas necesarias antes de su

implementación definitiva.

 Implementación de la solución web con el cliente y asesoría al

usuario final en el uso del nuevo sistema implementado

2
 POBLACIÓN OBJETIVO

El almacén Tecno-TIC Ltda. y todos los usuarios o posibles clientes que

deseen acceder al servicio.

3
 JUSTIFICACIÓN Y VIABILIDAD DEL PROYECTO

Con el internet no solo se destruyeron las barreras de la comunicación,

también surgió el medio perfecto para que el empresario pueda poner al
alcance de una mayor población diversa los servicios y/o productos que
ofrezca, haciéndole aún más competente en el mercado, y por eso que
Tecno-TIC Ltda. requiere de esta solución web para aumentar y alcance
de los servicios que ofrece y por consiguiente el aumento en sus
ganancias siendo parte del nuevo mercado digital.

4
 ANÁLISIS DE REQUISITOS

Requisitos Funcionales

 Requisitos de proceso:

1. El sistema debe contar con una base de datos para el

registro de los productos que se van a ofrecer al cliente,
debe contener datos como nombre del producto, precio por
unidad y número de existencias.

2. El sistema debe permitir el cliente solicitar el producto que

necesita, y este ingrese datos como nombre, identificación,
dirección domicilio del cliente, cantidad necesitada del
producto y forma de pago para generar la solicitud de
compra.

3. El sistema debe contar con dos niveles de acceso,

administrador y cliente.

4. El sistema deber generar una alerta al administrador de la

página cuando algún cliente compre un producto.

5
 Requisitos de Interfaz Gráfica:

1. La interfaz debe ser web para fácil acceso y compatible con

cualquier navegador web.

2. La interfaz estará separa en varias ventanas, en total 5 para

encabezado, pie de página, datos del desarrollador, menú de
selección de sucursal y ventana principal donde se mostrara la
sucursal seleccionada.

3. Tanto la pantalla para “Mueble Sueltos” como para la pantalla

“Juegos” debe mostrar una lista de los productos con una imagen
del producto, nombre del producto, costo y unidades existentes.

4. En la pantalla principal y la cada categoría se debe mostrar la fecha

actual.

 Requisitos de Seguridad:

1. Tanto el cliente como el administrador deben acceder haciendo uso

de un usuario y contraseña.

2. Solo el administrador puede ingresar o eliminar productos del

sistema.

6
 Requisitos de Interfaz Externa:

1. El sistema estará implementado en el sistema operativo Microsoft

Windows.

2. Debe ser compatible con los navegadores mas comunes como

Internet Explorer, Google Chrome y Firefox.

Requisitos No Funcionales

 Requisitos de Eficiencia:
1. Cuando el administrador actualice el inventario de productos,
estos cambios deben reflejarse casi inmediatamente para el
cliente.

 Requisitos de Seguridad lógica:

1. Solo el administrador puede hacer cambios en el inventario.

2. El sistema operativo debe ser constantemente actualizado.

3. Se deben hacer respaldos semanales de los datos registrados

en el sistema.

7
 Requisitos de Usabilidad:
1. Se debe contar con manuales de usuario debidamente
documentados y adaptados a un lenguaje sencillo.

2. En caso de error el sistema debe mostrar un mensaje en

pantalla al usuario, informando el tipo de error y sus posibles
soluciones.

8
 ESPECIFICACIONES TÉCNICAS

 Se necesita de servidor dedicado.

 Compatible con cualquier navegador web.
 25GB de disco libres en el servidor.

9
 DISEÑO DE LA SOLUCIÓN WEB

Home2.html

La página principal llamada Home2.html, se encontrara dividida en 5

frames o marcos, llamadas por ejemplo frame1.html al frame5.htlm,
cada documento frame contendrá un contenido único.

Frame1.html; contendrá el logo, slogan y nit de la empresa.

Frame2.html; contendrá un menú interactivo con la lista de las

sucursales.

Frame3.html; contendrá la sucursal seleccionada en Frame2.html.

Frame4.html; contendrá los datos del desarrollador de la página web.

Frame5.html; contendrá los datos de contacto de la empresa.

10
 Sucursales

Medellin.html

11
Barranquilla.html

Cali.html

12
Cartagena.html

Yopal.html

13
Cada documento html de cada sucursal contiene una imagen alusiva a
la ciudad que pertenece y el menú al inventario de productos del
almacén

Inventario

MueblesSueltos.html

14
Juegos.html

15
En el caso de los documentos HTML MueblesSueltos2.html y
Juegos2.html, su apariencia es similar, ambos hacen uso de una lista de
productos con sus nombres, atributos e imagen ordenadas en una
tabla, al igual que la pagina principal, cuentan con el mismo menú de
opciones, el color de fondo azul, texto color blanco y líneas horizontales
divisoras, además en la parte inferior de la pagina se conserva el lema
de la empresa Tecno-TIC Ltda., el cual es “La comodidad es un derecho
al alcance de todo”.

16
 DESARROLLO DE LA SOLUCIÓN WEB

Còdigo Home2.html
<html>
<head>
<title>Tecno-TIC ltda</title>
</head>
<frameset rows="35%,*,6%">
<frame name="frame1" src="frame1.html">
<frameset cols="10%,*,25%">
<frame name="frame2" src="frame2.html">
<frame name="frame3" src="frame3.html">
<frame name="frame4" src="frame4.html">
</frameset>
<frame name="frame5" src="frame5.html">
</frameset>
</html>

Explicación del código Home2.html:

Aquí se realizada la división del documento en frames usando la etiqueta

<FRAMESET> y usar <FRAME> para identificar cada frame.

17
Frame1.html
<html>
<head>
<title>Encabezado</title>
<h1><center><u><i><font color='white'>Tecno-TIC
ltda</font></u></center></h1>
</head>
<body bgcolor='#0839BB'>

<center>
<img title='Logo Tecno-TIC' src='Imagenes/Logo-1.jpg' width='300'
height='100'>
</center>

<h2><center><i><i><font color='white'>"La comodidad es un derecho al

alcance de todos"</font></i></center></h2>
<h3><center><i><i><font
color='white'>NIT:900.565.678</font></i></center></h3>

</body>

<html>

18
Frame2.html
<html>
<head>
<title>Menu Sucursales</title>
<br>
<br>
<h2><center><u><i><font color='white'>Sucursales:</font></u></center></h2>
</head>
<body bgcolor='#0839BB'>
<br>
<h3><center><i><i><a href='Medellin.html' target="frame3"><font
color='white'>Medellin</font></a></i></center></h3>
<h3><center><i><i><a href='Cali.html' target="frame3"><font
color='white'>Cali</font></a></i></center></h3>
<h3><center><i><i><a href='Barranquilla.html' target="frame3"><font
color='white'>Barranquilla</font></a></i></center></h3>
<h3><center><i><i><a href='Cartagena.html' target="frame3"><font
color='white'>Cartagena</font></a></i></center></h3>
<h3><center><i><i><a href='Yopal.html' target="frame3"><font
color='white'>Yopal</font></a></i></center></h3>
</body>
</html>

19
Frame3.html
<html>
<head>
<title>Principal</title>
<br>
<br>
<br>
<br>
<h1><center><u><i><font color='white'>Bienvenido a nuestra
pàgina</font></u></center></h1>
<h2><center><u><i><font color='white'>Seleccione una sucursal para
iniciar</font></u></center></h2>
<body bgcolor='#0839BB'>
</body>

</head>
</html>

20
Frame4.html
<html>
<head>
<title>Datos del desarrollador</title>
<h2><center><u><i><font
color='white'>Desarrollador:</font></u></center></h2>
<center>
<center>
<img title='Logo Tecno-TIC' src='Imagenes/perfil3.jpg' width='100'
height='150'>
</center>
</center>
<head>
<body bgcolor='#0839BB'>
<h3><center><i><i><font color='white'>Julian Andres Cardona
Sanchez</font></i></center></h3>
<h3><center><i><i><font color='white'>Email:
jandres0689@gmail.com</font></i></center></h3>
<h3><center><i><i><font color='white'>Cel:
3117264701</font></i></center></h3>
<h3><center><i><i><font color='white'>Estudiante de Tecnologia en desarrollo de
software</font></i></center></h3>
<h3><center><i><i><font color='white'>UNAD </font></i></center></h3>
<h3><center><i><i><font color='white'>Universidad Nacional Abierta y a Distancia
</font></i></center></h3>

</body>
</html>

21
Frame5.html
<html>
<head>
<title>Pie de pagina</title>
</head>
<body bgcolor='#0839BB'>
<h3><center><i><i><font color='white'>Sede principal Medellin&nbsp; CRA
15#20-12 &nbsp; Telefono:01 8000 56778 &nbsp; Email:tecnotic@gmail.com
&nbsp; Siganos en Facebook como TECNOTIC &nbsp; y en Twitter como @TECNOTIC
</font></i></center></h3>
</body>
</html>

22
Medellin.html
<html>
<head>
<title>Medellin</title>
<h2><center><u><i><font color='white'>Medellin</font></u></center></h2>

<center>
<h3>
<a href='frame3.html' ><font color='white'>Inicio</font></a>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='MueblesSueltos2.html'><font color='white'>Muebles
Sueltos</font></a>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='Juegos2.html'><font color='white'>Juegos</font></a>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</center></h3>
</head>
<body bgcolor='#0839BB'>
<center>
<img title='Medellin' src='Imagenes/medellin.jpg' width='400' height='280'>
</center>

</body>
</html>

23
Cali.html
<html>
<head>
<title>Cali</title>
<h2><center><u><i><font color='white'>Cali</font></u></center></h2>

<center>
<h3>
<a href='frame3.html' ><font color='white'>Inicio</font></a>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='MueblesSueltos2.html'><font color='white'>Muebles
Sueltos</font></a>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='Juegos2.html'><font color='white'>Juegos</font></a>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</center></h3>
</head>
<body bgcolor='#0839BB'>
<center>
<img title='Cali' src='Imagenes/cali.jpg' width='400' height='280'>
</center>

</body>
</html>

24
Barranquilla.html
<html>
<head>
<title>Barranquilla</title>
<h2><center><u><i><font
color='white'>Barranquilla</font></u></center></h2>

<center>
<h3>
<a href='frame3.html' ><font color='white'>Inicio</font></a>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='MueblesSueltos2.html'><font color='white'>Muebles
Sueltos</font></a>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='Juegos2.html'><font color='white'>Juegos</font></a>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</center></h3>
</head>
<body bgcolor='#0839BB'>
<center>
<img title='Barranquilla' src='Imagenes/barranquilla.jpg' width='400'
height='280'>
</center>

</body>
</html>

25
Cartagena.html
<html>
<head>
<title>Cartagena</title>
<h2><center><u><i><font color='white'>Cartagena</font></u></center></h2>

<center>
<h3>
<a href='frame3.html' ><font color='white'>Inicio</font></a>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='MueblesSueltos2.html'><font color='white'>Muebles
Sueltos</font></a>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='Juegos2.html'><font color='white'>Juegos</font></a>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</center></h3>
</head>
<body bgcolor='#0839BB'>
<center>
<img title='Cartagena' src='Imagenes/cartagena.jpg' width='400'
height='280'>
</center>

</body>
</html>

26
Yopal.html
<html>
<head>
<title>Yopal</title>
<h2><center><u><i><font color='white'>Yopal</font></u></center></h2>

<center>
<h3>
<a href='frame3.html' ><font color='white'>Inicio</font></a>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='MueblesSueltos2.html'><font color='white'>Muebles
Sueltos</font></a>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='Juegos2.html'><font color='white'>Juegos</font></a>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</center></h3>
</head>
<body bgcolor='#0839BB'>
<center>
<img title='Yopal' src='Imagenes/yopal.jpg' width='400' height='280'>
</center>

</body>
</html>

27
MueblesSueltos2.html
<html>
<head>
<title>Muebles Sueltos</title>
<br>
<h1><center><u><i><font color='white'>Muebles
Sueltos</font></u></center></h1>
</head>
<hr>
<body bgcolor='#0839BB'>
<h3><center>
<a href='frame3.html' target="frame3" ><font
color='white'>Inicio</font></a>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='MueblesSueltos2.html'><font color='white'>Muebles
Sueltos</font></a>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='Juegos2.html'><font color='white'>Juegos</font></a>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</h3></center>
</i>
<hr>
<br>
<br>
<center>
<table BORDERCOLOR='white' CELLSPACING='50'>
<tr><td><img title='Imagen Mesa' src='Imagenes/Mesa.jpg' width='150'
height='150'></td><td><center><font
color='white'>Mesa</font></center></td><td><center><font color='white'>Color:
Càfe<br>Precio unidad: 300.000$<br> Existencias:150
unidades</font><br></center></td></tr>
<tr><td><img title='Imagen Perezosa' src='Imagenes/Perezosa.jpg'
width='150' height='150'></td><td><center><font
color='white'>Perezosa</font></center></td><td><center><font
color='white'>Color: Azul<br>Precio unidad: 100.000$<br> Existencias:50
unidades</font><br></center></td></tr>
<tr><td><img title='Imagen Bife' src='Imagenes/Bife.jpg'
width='150' height='150'></td><td><center><font
color='white'>Bife</font></center></td><td><center><font color='white'>Color:

28
Càfe<br>Precio unidad: 400.000$<br> Existencias:80
unidades</font><br></center></td></tr>
<tr><td><img title='Imagen Cama' src='Imagenes/Cama.jpg'
width='150' height='150'></td><td><center><font
color='white'>Cama</font></center></td><td><center><font
color='white'>Color: Càfe<br>Precio unidad: 500.000$<br> Existencias:100
unidades</font><br></center></td></tr>
<tr><td><img title='Imagen Silla' src='Imagenes/Sillas.jpg'
width='150' height='150'></td><td><center><font
color='white'>Silla</font></center></td><td><center><font color='white'>Color:
Negro<br>Precio unidad: 60.000$<br> Existencias:120
unidades</font><br></center></td></tr>
<tr><td><img title='Imagen Mesa de Noche' src='Imagenes/Mesa de
Noche.jpg' width='150' height='150'></td><td><center><font color='white'>Mesa
de Noche</font></center></td><td><center><font color='white'>Color:
Blanco<br>Precio unidad: 80.000$<br> Existencias:110
unidades</font><br></center></td></tr>
<tr><td><img title='Imagen MueblePC' src='Imagenes/MueblePC.jpg'
width='150' height='150'></td><td><center><font color='white'>Mueble
para<br>Computador</font></center></td><td><center><font
color='white'>Color: Càfe<br>Precio unidad: 400.000$<br> Existencias:80
unidades</font><br></center></td></tr>
</table>
</center>
<br>
<br>
<hr>
<h4><p><center><font color='white'>Tecno-TIC Ltda.<br>"La comodidad es
un derecho al alcance de todos"</font></center></p></h4>
<hr>
</body>
</html>

29
Juegos2.html

<html>
<head>
<title>Juegos</title>
<br>
<h1><center><u><i><font
color='white'>Juegos</font></u></center></h1>
</head>
<hr>
<body bgcolor='#0839BB'>
<h3><center>
<a href='frame3.html' ><font color='white'>Inicio</font></a>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='MueblesSueltos2.html'><font color='white'>Muebles
Sueltos</font></a>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='Juegos2.html'><font color='white'>Juegos</font></a>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</h3></center>
</i>
<hr>
<br>
<br>
<center>
<table BORDERCOLOR='white' CELLSPACING='50'>
<tr><td><img title='Imagen JuegoComedor'
src='Imagenes/JuegodeComedor.jpg' width='150'
height='150'></td><td><center><font color='white'>Juego de
Comedor</font></center></td><td><center><font color='white'>Color:
Càfe<br>Precio unidad: 1'200.000$<br> Existencias:150
unidades</font><br></center></td></tr>
<tr><td><img title='Imagen JuegoAlcoba'
src='Imagenes/JuegoDeAlcoba.jpg' width='150'
height='150'></td><td><center><font color='white'>Juego de
Alcoba</font></center></td><td><center><font color='white'>Color:
Negro<br>Precio unidad: 1'500.000$<br> Existencias:50
unidades</font><br></center></td></tr>

30
 <tr><td><img title='Imagen JuegoSala'
src='Imagenes/JuegoDeSala.jpg' width='150'
height='150'></td><td><center><font color='white'>Juego de
Sala</font></center></td><td><center><font color='white'>Color:
Negro/Gris<br>Precio unidad: 2'000.000$<br> Existencias:80
unidades</font><br></center></td></tr>
<tr><td><img title='Imagen Silla/Escritorio'
src='Imagenes/SillayEscritorio.jpg' width='150'
height='150'></td><td><center><font color='white'>Silla y
Escritorio</font></center></td><td><center><font color='white'>Color:
negro<br>Precio unidad: 1'500.000$<br> Existencias:100
unidades</font><br></center></td></tr>

</table>
</center>
<br>
<br>
<hr>
<h4><p><center><font color='white'>Tecno-TIC Ltda.<br>"La comodidad es
un derecho al alcance de todos"</font></center></p></h4>
<hr>
</body>
</html>

31
CRONOGRAMA DE ACTIVIDADES

32
 RECURSOS PARA EL PROYECTO WEB

Recursos de Hardware

 Se requiere de un ordenador que cuente con:

1. Conexión a internet.
2. Disco duro de mínimo 500GB.
3. Memoria RAM de 1GB mínimo.

Recursos de Software

 Navegador web (mínimo dos para pruebas de compatibilidad)

 Sistema operativo Microsoft Windows.
 Editor de imagen (Preferiblemente de código abierto)
 XAMPP para gestión de base de datos e instalación de un servidor
local.
 Editor de texto.

Recurso Humano

 Analista de requerimientos.
 Diseñador gráfico.
 Coordinador de proyecto.
 Programador web (Backend)
 Diseñador web (Frontend)

33
 CONCLUSIONES

Con la actividad realizada se recalca la importancia de la correcta

recolección de lo requerimientos del sistema a desarrollar como solución
al problema planteado, son los cimientos del proyecto, sin estos se
puede generar un mal desarrollo de este.

34
 BIBLIOGRAFÍA

 Terán, J. (2016). Manual de Introducción al lenguaje HTML.

Formación para el Empleo. Retrieved from. (Temas 1 al 9,
Pag 13 a 131). Recuperado de
https://bibliotecavirtual.unad.edu.co:2538/lib/unadsp/reade
r.action?ppg=14&docID=4421965&tm=1541793941287

 Londoño, L., Anaya, R., & Tabares, M. (2008). Análisis de la

ingeniería de requisitos orientada por aspectos según la
industria del software. (Spanish). Revista EIA, (9), 43-52.
Recuperado de
http://bibliotecavirtual.unad.edu.co:2051/login.aspx?direct=
true&db=zbh&AN=34131778&lang=es&site=eds-live

35