Aplicación web para la gestión de ventas de la empresa Netsystems de la ciudad de Ibarra

(1)

UNIVERSIDAD REGIONAL AUTÓNOMA DE LOS ANDES

UNIANDES IBARRA

FACULTAD DE SISTEMAS MERCANTILES

CARRERA DE SISTEMAS

PROYECTO DE EXAMEN COMPLEXIVO PREVIO A LA OBTENCIÓN DEL TITULO DE INGENIERO EN SISTEMAS E INFORMÁTICA.

TEMA

APLICACIÓN WEB PARA LA GESTIÓN DE VENTAS DE LA EMPRESA NETSYTEMS DE LA CIUDAD DE IBARRA

AUTOR: SANTACRUZ COLOMA DANIEL SANTIAGO

ASESOR: ING. MARTÍNEZ CAMPAÑA CARLOS EDUARDO

AMBATO – ECUADOR

(2)

APROBACIÓN DEL ASESOR DEL TRABAJO DE TITULACIÓN

CERTIFICACIÓN:

Quien suscribe, legalmente CERTIFICA QUE: El presente Trabajo de Titulación realizado por el señor Daniel Santiago Santacruz Coloma, estudiante de la Carrera de Sistemas, Facultad de Sistemas Mercantiles, con el tema “APLICACIÓN WEB PARA LA GESTIÓN DE VENTAS DE LA EMPRESA NETSYTEMS DE LA CIUDAD

DE IBARRA”, ha sido prolijamente revisado, y cumple con todos los requisitos establecidos en la normativa pertinente de la Universidad Regional Autónoma de los Andes -UNIANDES-, por lo que apruebe su presentación.

Ambato, julio de 2017

_______________________________

(3)

DECLARACIÓN DE AUTENTICIDAD

Yo, Daniel Santiago Santacruz Coloma, estudiante de la Carrera de Sistemas, Facultad

de Sistemas Mercantiles, declaro que todos los resultados obtenidos en el presente trabajo de investigación, previo a la obtención del título de INGENIERO EN SISTEMAS

MERCANTILES, son absolutamente originales, auténticos y personales; a excepción de

las citas, por lo que son de mi exclusiva responsabilidad.

__________________________________ Tlgo. Daniel Santiago Santacruz Coloma CI. 100318444-5

(4)

DERECHOS DE AUTOR

Yo, Daniel Santiago Santacruz Coloma, declaro que conozco y acepto la disposición

constante en el literal d) del Art. 85 del Estatuto de la Universidad Regional Autónoma de Los Andes, que en su parte pertinente textualmente dice: El Patrimonio de la UNIANDES, está constituido por: La propiedad intelectual sobre las Investigaciones, trabajos científicos o técnicos, proyectos profesionales y consultaría que se realicen en la Universidad o por cuenta de ella;

_______________________________ Tlgo. Daniel Santiago Santacruz Coloma CI. 100318444-5

(5)

DEDICATORIA

En primer lugar dedico este trabajo a Dios por darme la sabiduría y entendimiento para culminar mi objetivo académico propuesto y poner en mi camino a personas que me ayudaron en la realización de este proyecto; a mi madre por su amor y comprensión, a mi hermano por su ejemplo de lucha y esfuerzo, a mi padre que desde el cielo me apoya incondicionalmente, a mi novia por su gran paciencia, a mis amigos y a todas las personas que depositaron su confianza en mí para la consecución de este anhelado logro académico y personal.

(6)

AGRADECIMIENTO

En primer lugar, a Dios por ser el pilar más importante de mi vida, a todas las personas, familiares, docentes, compañeros y amigos quienes impulsaron en mí el deseo de superación ya que gracias a su apoyo ha sido posible la consecución de este anhelado sueño.

Un especial agradecimiento a mi tutor, quién con su gran paciencia y exigencia ha hecho posible la realización de este proyecto.

(7)

ÍNDICE DE CONTENIDOS

APROBACIÓN DEL ASESOR DEL TRABAJO DE TITULACIÓN ... ii

DECLARACIÓN DE AUTENTICIDAD ... iii

DERECHOS DE AUTOR ... iv

DEDICATORIA ... v

AGRADECIMIENTO ... vi

RESUMEN EJECUTIVO ... xvi

ABSTRACT ... xvii

CAPÍTULO I. ... 1

1. INTRODUCCIÓN ... 1

1.1 Antecedentes de la investigación ... 1

1.2 Planteamiento del Problema ... 2

1.3 Formulación ... 2

1.4 Delimitación del problema ... 2

1.4.1 Delimitación física: ... 2

1.4.2 Delimitación tiempo: ... 2

1.5 Objeto de investigación y campo de acción ... 2

1.5.1 Objeto de investigación: ... 2

1.6 Identificación de la línea de investigación ... 3

1.7 Objetivos ... 3

(8)

1.7.2 Objetivos específicos ... 3

1.8 Idea a defender ... 3

1.9 Justificación del tema ... 3

1.10 Diseño de la investigación ... 4

1.10.1 Tipo de investigación. ... 4

1.10.2 Métodos, técnicas e instrumentos de investigación ... 5

 La encuesta. - ... 5

1.11 Aporte teórico y significación práctica... 5

CAPÍTULO II ... 6

2. MARCO TEORICO... 6

2.1 Internet y portales web ... 6

2.1.1 Internet. - ... 6

2.1.2 Portales web. - ... 6

2.2 Origen y evolución del internet ... 7

2.2.1 Origen. - ... 7

2.2.2 Evolución. - ... 7

2.3 Redes y protocolos ... 8

2.3.1 Red. - ... 8

2.3.2 Protocolo. - ... 8

2.4 La www y html ... 8

2.4.1 WWW (Word Wide Web). - ... 8

(9)

2.5.1 Página web. - ... 8

2.5.2 Sitio web. - ... 9

2.6 JAVASCRIPT, CSS, HTML ... 9

2.6.1 Javascript. - ... 9

2.6.2 CSS. - ... 9

2.6.3 HTML. -... 10

2.7 Gestión de Ventas ... 10

2.7.1 Plan de ventas. ... 10

2.8 Comercialización electrónica. - ... 10

2.9 Marketing. - ... 11

2.10 Marketing digital. ... 11

2.11 Posicionamiento web. - ... 12

2.12 Plataformas de e-commerce ... 12

2.12.1 Carro de compras. - ... 12

2.13 Hosting y dominio ... 13

2.13.1 Hosting. - ... 13

2.13.2 Dominio. - ... 13

2.14 Servidor web. - ... 13

2.14.1 Wamp server. - ... 14

2.14.2 Apache. - ... 14

2.15 Base de datos. - ... 14

(10)

2.16 Lenguajes de programación. - ... 15

2.16.1 PHP. - ... 16

2.16.2 ASP.- ... 16

CAPÍTULO III……….17

3. MARCO PROPOSITIVO ... 17

3.1 Planteamiento de la propuesta ... 17

3.2 Ingeniería pre análisis aplicación web ... 17

3.3 Metodología en cascada ... 18

3.3.1 Análisis ... 18

3.3.1.1 Especificación de los requisitos ... 18

3.3.2 Recursos de la aplicación web ... 19

3.3.2.1 Usuario o cliente... 19

3.3.2.2 Medio tecnológico ... 19

3.3.2.3 Catálogo de productos clasificado por categorías ... 19

3.3.3 Requisitos de hardware... 20

3.3.4 Requisitos de software ... 20

3.4 Beneficios ... 21

3.4.1 Beneficiarios directos. - ... 21

3.4.2 Beneficiarios indirectos. - ... 21

3.5 Diseño ... 22

3.5.2 Diagrama de flujo de datos del proceso de compra en línea ... 23

(11)

3.6 Diseño de la aplicación web ... 24

3.6.1 Diseño de prototipos ... 25

3.7 Diseño de interfaces de entrada y salida ... 26

3.7. 1. Pantalla de página principal ... 26

3.7.2. Pantalla de registro de clientes en el sitio web ... 27

3.7.3. Pantalla de login para acceso al panel de control del cliente ... 27

3.7.4 Pantalla de catálogo de productos del sitio web ... 28

3.7.5 Pantalla de detalle de carro de compras ... 28

3.7.6 Pantalla de reporte de pedido del cliente con total a pagar ... 29

3.7.7 Pantalla de acceso de administrador a sitio web ... 30

3.7.8 Pantalla de agregar productos del usuario administrador ... 30

3.7.9 Pantalla de modificar datos del usuario administrador ... 31

3.7.10 Pantalla de reporte de productos por categorías del usuario administrador ... 31

3.8 Codificación ... 32

3.8.1 Código de la página principal (index.php) ... 32

3.8.2 Código de la página de productos (productos.php) ... 33

3.8.3 Código de la página de login del administrador (iniciadmin.php) ... 34

3.8.4 Código de la página del administrador (admin.php) ... 35

3.8.5 Código de la pantalla de modificar del administador (modificar.php) ... 37

3.8.6 Código de la pantalla de registro del cliente (registro.php) ... 38

3.9 Pruebas ... 39

(12)

3.9.2 Página de login de clientes ... 39

3.9.3 Página de login de administrador ... 39

3.10 Implementación ... 40

CONCLUSIONES Y RECOMENDACIONES ... 41

CONCLUSIONES ... 41

RECOMENDACIONES ... 41

Bibliografía ... 42

ANEXOS ... 45

ANEXO 1: Encuesta ... 45

ANEXO 2: Diccionario de datos ... 51

Base de datos – Tabla categoría ... 51

Base de datos – Tabla Clientes ... 51

Tabla. Base de datos – Tabla Pedidos ... 51

Tabla. Base de datos – Tabla Productos ... 52

(13)

ÍNDICE DE GRÁFICOS

Gráfico 1. Ciclo de vida en cascada ... 18

Gráfico 2. Flujograma de la Aplicación Web ... 22

Gráfico 3. Diagrama de flujo de datos del proceso de compra en línea ... 23

Gráfico 4. Diagrama Físico de la Base de Datos ... 24

Gráfico 5. Boceto de la Pantalla Principal ... 25

Gráfico 6. Boceto de la Pantalla de Productos ... 25

Gráfico 7. Boceto de la pantalla de contactos ... 26

Gráfico 8. Pantalla de la página principal ... 26

Gráfico 9. Pantalla de Registro de Usuarios en la Aplicación Web ... 27

Gráfico 10. Pantalla de Login de acceso al cliente ... 27

Gráfico 11. Pantalla del catálogo de productos ... 28

Gráfico 12. Pantalla de detalle del carrito de compras ... 28

Gráfico 13. Reporte de pedido del cliente con valor a pagar ... 29

Gráfico 14. Pantalla de acceso de Administrador a Sitio Web... 30

Gráfico 15. Pantalla de agregar productos del usuario Administrador ... 30

Gráfico 16. Pantalla de modificar del Administrador ... 31

Gráfico 17. Pantalla de reporte de productos por categorías ... 31

Gráfico 18. Pantalla de reporte de productos por categorías ... 39

Gráfico 19. Pruebas de pantalla de acceso del usuario administrador ... 40

Gráfico 20. Personas que desean que Netsystems tenga aplicación web ... 45

Gráfico 21. Personas que conocen sobre E-commerce ... 45

Gráfico 22. Compra online mediante una aplicación web ... 46

Gráfico 23. Medios para comprar por internet ... 47

(14)

Gráfico 25. Carro de compras virtual ... 48

Gráfico 26. Conoce Paypal ... 48

Gráfico 27. Productos tecnológicos que le gustaría comprar por internet ... 49

Gráfico 28. Tipos de negocios ... 50

(15)

ÍNDICE DE TABLAS

Tabla 1. Extracto de Población ... 5

Tabla 2. Recursos de la aplicación Web ... 19

Tabla 3. Requisitos de Hardware ... 20

Tabla 4. Requisitos de Software ... 21

Tabla 5. Datos de la tabla categoría ... 51

Tabla 6. Datos de la tabla clientes ... 51

Tabla 7. Datos de la tabla pedidos ... 52

(16)

RESUMEN EJECUTIVO

El presente trabajo de investigación denota la importancia de la aplicación web en la empresa NETSYSTEMS de la ciudad de Ibarra, que favorece con el proceso de ventas de los productos de tecnología a todos los usuarios de la red. Después de recolectar los datos a través de los métodos de investigación, se logra establecer las causas que afectan al registro, acceso y control de ventas de productos, por lo que la propuesta contribuirá significativamente a solucionar el problema encontrado en el proceso de investigación en el cual se identificó que no existe un sistema informático que permita aumentar las ventas de los productos tecnológicos. Con esto se logrará en primer lugar, visualizar los productos con sus respectivos precios y características, seleccionarlos y agregarlos al carro de compras para establecer el proceso de compra, el mismo que orienta al mejoramiento de las ventas de la empresa NETSYSTEMS.

(17)

ABSTRACT

This research emphasizes on the important role that a web system plays at the enterprise “NETSYSTEM” which is located at Ibarra city. This system facilitates sales processes of technological products among web users. After having collected information and data, it has been found the causes that are affecting the registration, access and control of product’s sales. Therefore, a computing system has been proposed in order to increase the sales on the selling of technological products. Consequently, the prices as well as characteristics of all products will be easily observed. Afterwards, the merchandise will be selected and added by web users. In addition, the selling processes will be effectively performed and developed at the enterprise “NETSYSTEM”.

(18)

1

CAPÍTULO I.

1. INTRODUCCIÓN

1.1 ANTECEDENTES DE LA INVESTIGACIÓN

La presente investigación relata la breve historia del comercio electrónico, el mismo que nace en el año de 1920 en los Estados Unidos dónde apareció la venta por catálogo. Este nuevo sistema de distribución fue una gran revolución en ese momento, ya que fue la primera vez que se podía comprar sin antes ver el producto.

La venta por catálogo funcionaba mediante fotos ilustrativas del producto, y la gran ventaja que ofrecía ese sistema comercial era que se podía vender en zonas rurales difíciles de acceder.

Posteriormente el Comercio Electrónico (ecommerce) comienza en el año de1960 cuando Electrónic Data Interchange crea el EDI y permite a las empresas realizar transacciones electrónicas e intercambio de información comercial.

A principio de los años 1970, aparecieron las primeras relaciones comerciales que utilizaban una computadora para transmitir datos, tales como órdenes de compra y facturas. Este tipo de intercambio de información, si bien no estandarizado, trajo aparejadas mejoras de los procesos de fabricación en el ámbito privado, entre empresas de un mismo sector.

En el año de 1980, se modernizó el comercio por catálogo con la ayuda de la televisión y las Televentas.

Y finalmente el comercio electrónico creció significativamente a finales de los años 90, por lo que se crearon los primeros portales web como eBay y Amazon, los mismos que se mantienen vigentes y operativos hasta el día de hoy.

(19)

2 1.2 PLANTEAMIENTO DEL PROBLEMA

En la empresa Netsystems de la ciudad de Ibarra se ha identificado que actualmente sus ventas han disminuido significativamente, debido a la competencia de otras empresas que están cerca del sector, los proveedores han incrementado el valor en la venta de sus productos y además no se cuenta con una base de datos, ya que toda la información se lleva en registros manuales poco útiles que demoran los procesos de venta de productos. Adicionalmente a esto se suma la baja remuneración económica a los empleados que laboran en la empresa, puesto que al disminuir las ventas no se puede cubrir las necesidades y expectativas de los trabajadores.

Por estas y otras dificultades, nace la necesidad de implementar una aplicación web que permita mejorar el proceso de venta de productos online.

1.3 FORMULACIÓN

¿Cómo mejorar las ventas de la Empresa Netsystems de la ciudad de Ibarra en la provincia de Imbabura?

1.4 Delimitación del problema

1.4.1 Delimitación física:

La aplicación web se la implementará en la empresa NETSYSTEMS de la ciudad de Ibarra, ubicada en las calles Carlos Emilio Grijalva 2-82 y Rocafuerte.

1.4.2 Delimitación tiempo:

El tiempo estimado en el desarrollo del proyecto, se lo hará aproximadamente en seis meses.

1.5 Objeto de investigación y campo de acción

1.5.1 Objeto de investigación: Comercio Electrónico

(20)

3 1.6 Identificación de la línea de investigación

El presente trabajo investigativo se enmarca en la línea denominada: Desarrollo de Software y Programación de Sistemas

1.7 Objetivos

1.7.1 Objetivo general

Implementar una aplicación web de gestión de ventas en la empresa Netsystems de la ciudad de Ibarra.

1.7.2 Objetivos específicos

 Fundamentar teóricamente los descriptores del proyecto.

 Realizar un estudio diagnóstico sobre la situación interna de su organización, sus necesidades tecnológicas y de automatización.

 Implementar una aplicación web con módulos de gestión como; Registrar, modificar, eliminar, etc. y generar reportes que permitan tomar decisiones. 1.8 Idea a defender

Con la implementación de una aplicación web mejorará la gestión de ventas de la empresa Netsystems de la ciudad de Ibarra.

1.9 Justificación del tema

Con la implementación de la aplicación Web se contribuirá a la promoción por internet de la Empresa Netsystems y se mejorará significativamente los ingresos económicos de la misma, obteniendo muchos beneficios como:

 Registro de clientes en línea.

 Lista de productos actuales con fotografías y precios.  Promoción de los servicios de la empresa,

(21)

4

Todos estos servicios hacen de la aplicación web sea robusta y permita gestionar el proceso de ventas que es parte del nuevo mundo del marketing online que exigen casi todas las pequeñas y grandes empresas en todo el mundo.

El sitio web tiene una interfaz amigable y pretende ampliar el mercado de ventas nacionalmente, promocionándose a través de su sitio y hosting en la WWW para poder realizar comercio electrónico con usuarios y clientes de todo el país.

La característica más relevante de la aplicación web es la compra online en forma real a través del sistema de pago PayPal que permite al cliente efectuar la transacción de manera automática por medio de números de tarjetas de crédito y envío de los productos por encomiendas, lo que ahorra tiempo en la gestión de las ventas.

Es por esta razón que la presente aplicación web servirá como un medio de interacción entre el cliente y el ordenador para gestionar el proceso de compras de productos online con sus respectivos precios y características que se ajustan a las necesidades de los compradores.

1.10 Diseño de la investigación

1.10.1 Tipo de investigación.

Para el desarrollo de la aplicación web utilice varios tipos de investigación científica como:

 Bibliográfica. - Es aquella que forma parte de la investigación como tipo documental y como su nombre lo indica tiene como finalidad el conocimiento de los contenidos de los libros, sus autores, fechas de edición, editoriales, lugar de edición, etc.

(22)

5

 Método Deductivo. - Este método se aplicó en la formulación del tema hasta la

obtención del objetivo y el problema, el método deductivo consiste en la totalidad de reglas y procesos, con cuya ayuda es posible deducir conclusiones finales a partir de unos enunciados supuestos llamados premisas.

1.10.2 Métodos, técnicas e instrumentos de investigación

Para poder obtener una investigación precisa con resultados eficientes utilice las siguientes técnicas de investigación:

 La encuesta. - Esta es el proceso de investigación aplicada a los empleados de una

empresa y orientada a cumplir los objetivos.

Se aplicó esta técnica a todos los clientes que asisten regularmente a la Empresa para recolectar información valiosa que permita tomar la decisión de implantar el sitio web.

 Población. - La población tomada en cuenta para efectuar la investigación de campo

para el desarrollo de la aplicación web es:

Tabla 1. Extracto de Población Fuente: Autoría

1.11 Aporte teórico y significación práctica.

El estudio teórico realizado para el presente proyecto se basa en herramientas y tecnologías de punta por lo cual se hace referencia a conceptos y definiciones actuales. La implementación de la aplicación web permitirá generar más ingresos económicos, promocionar el sitio web en toda la Internet, y además registrar clientes nuevos en la plataforma los mismos que podrán hacer la compra online mediante el mecanismo que ofrece Paypal.

Extracto Población Técnica

Personas que interactúan comercialmente con la empresa NETSYSTEMS

20 Encuesta

(23)

6

CAPÍTULO II

2. MARCO TEORICO

Para poder realizar correctamente el sitio web se aplicó varios conceptos básicos y elementales en gestión de base de datos y en lenguajes de programación de software libre.

2.1 Internet y portales web

2.1.1 Internet. - Es un conjunto descentralizado de redes de comunicación

interconectadas que utilizan la familia de protocolos TCP/IP, lo cual garantiza que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mundial. Uno de los servicios que más éxito ha tenido en Internet ha sido la World Wide Web (WWW o la Web), a tal punto que es habitual la confusión entre ambos términos. La WWW es un conjunto de protocolos que permite, de forma sencilla, la consulta remota de archivos de hipertexto. Esta fue un desarrollo posterior (1990) y utiliza Internet como medio de transmisión.

“Suele decirse que Internet es un medio de comunicación, y ello es muy cierto. Sin embargo, Internet posee otras cualidades 'mediáticas', y por ello diremos que esa red es: un medio de comunicación, un medio de información, un medio de memorización, un medio de producción, un medio de comercio, un medio para el ocio y el entretenimiento y un medio de interacción". (Echeverría, 2009)

2.1.2 Portales web.

-

Sonsitios web que ofrecen al usuario, de forma fácil e integrada, el acceso a una serie de recursos y de servicios relacionados a un mismo tema. Incluye: enlaces, buscadores, foros, documentos, aplicaciones, compra electrónica, etc. Principalmente un portal en Internet está dirigido a resolver necesidades de información específica de un tema en particular

“Se muestra la evolución experimentada por los primeros buscadores, índices y

(24)

7

potenciación de la fidelización del usuario y el desarrollo del comercio electrónico”. (García , 2001)

2.2 Origen y evolución del internet

2.2.1 Origen.- Tiene su origen en un proyecto militar estadounidense para crear una red de ordenadores que uniera los centros de investigación dedicados a labores de defensa en la década de los 60 en los Estados Unidos y que pudiera seguir funcionando a pesar de que alguno de sus nodos fuera destruido por un hipotético ataque nuclear, los creadores de ARPANET, la red precursora de Internet, no tenían nada parecido en mente y llevan años intentando terminar con esta percepción.

Internet surgió en realidad de la necesidad cada vez más acuciante de poner a disposición de los contratistas de la Oficina para las Tecnologías de Procesado de la Información (IPTO) más y más recursos informáticos. (Wicho, 2004)

2.2.2 Evolución.- La Internet se transforma en medio masivo, al proveer mayores posibilidades de beneficio a los grupos empresariales, o bien a grupos y entidades que buscan informar a un auditorio amplio sobre su organización o sobre las actividades que realizan, sean estas con fines de lucro, científicas, sociales o entretenimiento. Esta situación se transforma en dualidad al incorporar a millones de receptores ávidos de compartir en red igual número de mensajes. Sin estos auditorios masivos sería imposible la gran variedad de contenidos en la red y por ende sería disfuncional el comercio en la misma. Esta característica propia de los medios masivos, ayuda a entender la transformación de una Internet creada para fines de información e intercambio de material científico, a una red multidisciplinaria. Sin embargo, es necesario anotar que esta característica primaria de medio de comunicación simple, aparece en los otros sistemas, como la radio o el cine: En sus inicios no les fue atribuida la capacidad de “masividad”, característica que aparece motivada por su capacidad de congregar a grandes auditorios, grupos que pueden Página 9 La evolución de Internet como medio masivo convocarse y mantenerse gracias a otros agregados como la distribución y el manejo de los contenidos. (Ballina, 2008)

(25)

8

2.3 Redes y protocolos

2.3.1 Red. - Es un conjunto de equipos informáticos y software conectados entre sí por medio de dispositivos físicos que envían y reciben impulsos eléctricos, ondas electromagnéticas o cualquier otro medio para el transporte de datos, con la finalidad de compartir información, recursos y ofrecer servicios.

Como en todo proceso de comunicación se requiere de un emisor, un mensaje, un medio y un receptor. La finalidad principal para la creación de una red de computadoras es compartir los recursos y la información en la distancia, asegurar la confiabilidad y la disponibilidad de la información, aumentar la velocidad de transmisión de los datos y reducir el costo. (Rodríguez, 2015)

2.3.2 Protocolo.- Es un método estándar que permite la co municació n

entreprocesos (que potencialmente se ejecutan en diferentes equipos), es decir,es u n conjunto de reglas y procedimientos que deben respetarse para el envío y recepció n de datos a través de la una red. (Alc ívar, 2009)

2.4 LA WWW Y HTML

2.4.1 WWW (Word Wide Web). - Es un sistema de documentos de hipertexto que se

encuentran enlazados entre sí y a los que se accede por medio de Internet. A través de un software conocido como navegador, los usuarios pueden visualizar diversos sitios web (los cuales contienen texto, imágenes, videos y otros contenidos multimedia) y navegar a través de ellos mediante los hipervínculos. (Pérez , 2008)

2.5 PÁGINAS WEB, SITIOS WEB

2.5.1 Página web. - Es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes, y muchas otras cosas, adaptada para

la llamada World Wide Web (WWW) y que puede ser accedida mediante un navegador.

Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegación (acceso) a otras páginas web mediante enlaces de hipertexto.

“Es un documento digital en el que se puede hallar información variada y

numerosa. Esto se puede constatar con tan sólo teclear un tema en buscadores

(26)

9

aparecen grandes listados de páginas web, en los que se puede localizar una

gama de contenidos, cuya diferencia radica sólo en aspectos como la

organización y la selección de la información”. (López C. , 2007)

2.5.2 Sitio web. - Es una colección de páginas de internet relacionadas y comunes a un dominio de Internet o subdominio en la World Wide Web en Internet.

“Conjunto de páginas web que están relacionadas entre sí, por lo general porque se

ingresan desde un mismo dominio (o porque mantienen constante la raíz de la

dirección URL)”. (Alegsa, 2010)

2.6 JAVASCRIPT, CSS, HTML

2.6.1 Javascript. - Es un lenguaje de programación interpretado, dialecto del

estándar ECMAScript. Se define como orientado a objetos, basado en

prototipos, imperativo, débilmente tipado y dinámico.

Javascript es lo que se conoce como lenguaje script, es decir que se trata de código de programación que se inserta dentro de un documento, Javascript fue desarrollado por la empresa Netscape con la idea de potenciar la creación de páginas web dinámicas para su navegador Navigator. (Sánchez, 2003)

(27)

10

Es el lenguaje que se utiliza para escribir las hojas de estilo, las cuales definir el aspecto visual de un documento (documentos HTML y similares como XHTML, XML. El CSS es un estándar de la W3C que es ampliamente aceptado entre los navegadores web actuales. (Alegsa , 2014)

2.6.3 HTML. - Es el lenguaje con el que se define el contenido de las páginas web. Básicamente se trata de un conjunto de etiquetas que sirven para definir el texto y otros elementos que compondrán una página web, como imágenes, listas, vídeos, etc.

Es un lenguaje de marcación de elementos para la creación de documentos hipertexto, muy fácil de aprender, lo que permite que cualquier persona, aunque no haya programado en la vida, pueda enfrentarse a la tarea de crear una web. HTML es fácil y pronto podremos dominar el lenguaje. Más adelante se conseguirán los resultados profesionales gracias a nuestras capacidades para el diseño y nuestra vena artista, así como a la incorporación de otros lenguajes para definir el formato con el que se tienen que presentar las webs, como CSS. (Alvarez , 2001)

2.7 GESTIÓN DE VENTAS

2.7.1 Plan de ventas. - Es, en sí, un conjunto de actividades, ordenadas y sistematizadas, en donde se proyectan las ventas periódicamente que se estiman realizar en el siguiente ejercicio. Para ello, es normal que el punto de comparación sea la venta que se registró en el periodo anterior.

El plan de ventas es la parte del plan de marketing de una empresa o proyecto que concreta cuáles son los objetivos de venta y especifica de qué forma se conseguirán cuantificándolo en un presupuesto. (Granados, 2009)

La importancia del plan de ventas consiste, por ende, en determinar con mayor certeza cuál será dicho pronóstico de ventas, lo cual resulta vital para cualquier empresa, a fin de que logre sus metas incrementales de volúmenes de venta y de ganancias (Chase, 2014)

(28)

11

productos por Internet, pero el término comercio electrónico también abarca mecanismos de compra por Internet (de empresa a empresa).

Es el acto transaccional donde se intercambian bienes o servicios a cambio de valores monetarios, pero todo esto, a través de la web. Es decir, compra y venta a través del

internet; este fue un concepto muy novedoso en los años 90, cuando en otros países ya existían los servicios en línea vía telefónica (on-line) como por ejemplo revisión de impuestos al fisco, revisiones de estados de cuenta bancarios y tarjetas, pago por tarjetas de crédito, etc. (Reynolds , 2001)

2.9Marketing. - Es un concepto inglés, traducido al castellano como mercadeo o mercadotecnia. Se trata de la disciplina dedicada al análisis del comportamiento de los mercados y de los consumidores. El marketing analiza la gestión comercial de las empresas con el objetivo de captar, retener y fidelizar a los clientes a través de la satisfacción de sus necesidades.

Es una pequeña brújula que nos permite saber si vamos por la dirección correcta para llegar al destino propuesto.

Es una manera de actuar en el mercado que se caracteriza por orientar los planes y acciones de marketing hacia la satisfacción de las necesidades y deseos del cliente a la vez que se logra un beneficio para la empresa u organización que la

pone en práctica. (Thompson , 2010)

2.10 Marketing digital. - Es la aplicación de las estrategias de comercialización llevadas a cabo en los medios digitales. Todas las técnicas del mundo off-line son imitadas y traducidas a un nuevo mundo, el mundo online. En el ámbito digital aparecen nuevas herramientas como la inmediatez, las nuevas redes que surgen día a día, y la posibilidad de mediciones reales de cada una de las estrategias empleadas.

(29)

12

afiliación, redes sociales, publicidad en teléfonos móviles o celulares, etc., en donde hay que ser creativos y adaptar todo lo anterior a las necesidades y objetivos de la empresa (ya sea microempresa, pyme o empresa grande), actuando siempre con responsabilidad e integridad. (San Juan, 2011)

2.11 Posicionamiento web. - Se refiere a las técnicas que buscan que una página web

aparezca en las primeras posiciones de los resultados en buscadores (Google, Yahoo, Ask) para una serie de palabras o frases.

Trata del posicionamiento natural de una web, es decir, la facilidad con que los buscadores encuentren y reconozcan nuestra web como un sitio web de confianza. Un mejor posicionamiento en los diferentes buscadores atraerá tráfico directo y referido a un sitio web.

Son técnicas que se utilizan para que un sitio web logre optar a alcanzar los primeros lugares de los buscadores, de acuerdo a ciertas variables que “alguien”

consideró, eran importantes para ordenar los sitios web que cumplían con algunos criterios en particular. Si lo pensamos lógicamente, es claro que debe existir algún tipo de ordenamiento para presentar la información, ya que si observamos que existen millones de sitios web que nos ofrecen sus productos, alguien debió resolver preguntas tales como: ¿ordenamos por abecedario?, ¿de mayor a menor? ¿por antigüedad? ¿por creación o registro de la empresa en

internet?, etc. ( Diaz , 2013)

2.12 Plataformas de e-commerce

2.12.1 Carro de compras. - Es un complemento que se agrega a un catálogo web de productos que permite al cliente efectuar pedidos desde la propia página web. Tomando como base el catálogo de productos, el carrito de compra añade la posibilidad de que el cliente seleccione los productos y/o servicios y efectúe el pedido desde la web, recogiendo los datos necesarios e incluso pudiendo realizar el pago automáticamente mediante tarjeta de crédito u otro medio como débito bancario.

(30)

13

en llevar un total actualizado de los productos incluidos, especificando el nombre, descripción, cantidad y precio. (Calderon , 2009)

2.13 Hosting y dominio

2.13.1 Hosting. - Es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía Web. se refiere al lugar que ocupa una página web, sitio web, sistema, correo electrónico, archivos etc. en Internet o más específicamente en un servidor que por lo general hospeda varias aplicaciones o páginas web.

Un hosting web es un servicio donde un proveedor te alquila un servidor conectado a Internet y en el que puedes alojar todo tipo de ficheros que para que se pueda acceder a ellos vía Internet.

Esto sería similar a copiar estos ficheros en una carpeta local de tu ordenador, pero

con la diferencia de que en este caso esa carpeta se encuentra en el servidor del proveedor y su contenido es, por tanto, visible en Internet (siempre y cuando permitas que sea visible). (López B. , 2016)

2.13.2 Dominio. - Es un nombre que puede ser alfanumérico que generalmente se vincula a una dirección física que generalmente es una computadora o dispositivo electrónico.

Un dominio en internet es un conjunto de caracteres alfanuméricos que forman el nombre al que está vinculado una página web y una de las razones de su importancia es que los dominios son únicos, por lo que deberías asegurarte de tener registrado el dominio de tu negocio. (Martínez , 2015)

(31)

14

Es un ordenador o máquina informática que está al “servicio” de otras máquinas, ordenadores o personas llamadas clientes y que les suministran a estos, todo tipo de información. A modo de ejemplo, imaginemos que estamos en nuestra casa, y tenemos una despensa. Pues bien, a la hora de comer necesitamos unos ingredientes por lo cual vamos a la despensa, los cogemos y nos lo llevamos a la

cocina para cocinarlos. (Sierra , 2006)

2.14.1 Wamp server. - Es un entorno de desarrollo web para Windows en el cual se podrán crear aplicaciones web con Apache, PHP y base de datos en MySQL (motor de base de datos). Esta herramienta incluye además con un administrador de base de datos PHPMyAdmin con el cual podremos crear una nueva base de datos e ingresar la data de las tablas creadas en ella, realizar consultas y generar scripts SQL, como exportar e importar scripts de base de datos.

Es el acrónimo usado para describir un sistema de infraestructura de internet que usa las siguientes herramientas:

Windows, como sistema operativo; Apache, como servidor web;

MySQL, como gestor de bases de datos;

PHP (generalmente), Perl, o Python, como lenguajes de programación.

El uso de un WAMP permite servir páginas HTML a internet, además de poder gestionar datos en ellas, al mismo tiempo un WAMP, proporciona lenguajes de programación para desarrollar aplicaciones web. (https://sites.google.com/, s.f.)

2.14.2 Apache. - Es un servidor web HTTP de código abierto para la creación de páginas y servicios web. Es un servidor multiplataforma, gratuito, muy robusto y que destaca por su seguridad y rendimiento.

(32)

15

una base de datos compuesta en su mayoría por documentos y textos impresos en papel e indexados para su consulta.

Una base de datos es una serie de datos relacionados que forman una estructura lógica, es decir una estructura reconocible desde un programa informático. Esa estructura no sólo contiene los datos en sí, sino la forma en la que se relacionan.

(Sánchez, 2004)

2.15.1 MYSQL. - Es un sistema gestor de bases de datos (SGBD, DBMS por sus siglas

en inglés) muy conocido y ampliamente usado por su simplicidad y notable rendimiento. Aunque carece de algunas características avanzadas disponibles en otros SGBD del mercado, es una opción atractiva tanto para aplicaciones comerciales, como de entretenimiento precisamente por su facilidad de uso y tiempo reducido de puesta en marcha. Esto y su libre distribución en Internet bajo licencia GPL le otorgan como beneficios adicionales (no menos importantes) contar con un alto grado de estabilidad y un rápido desarrollo.

MySQL está disponible para múltiples plataformas, la seleccionada para los ejemplos de este libro es GNU/Linux. Sin embargo, las diferencias con cualquier otra plataforma son prácticamente nulas, ya que la herramienta utilizada en este caso es el cliente mysql-client, que permite interactuar con un servidor MySQL (local o remoto) en modo texto. (Casillas, 2009)

2.16 Lenguajes de programación. - Lenguaje artificial que puede ser usado para controlar el comportamiento de una máquina, especialmente una computadora. Estos se componen de un conjunto de reglas sintácticas y semánticas que permiten expresar instrucciones que luego serán interpretadas.

Debe distinguirse de “lenguaje informático”, que es una definición más amplia, puesto estos incluyen otros lenguajes como son el HTML o PDF que dan formato a un texto y no es programación en sí misma.

(33)

16

2.16.1 PHP. - Es un lenguaje de código abierto muy popular, adecuado para desarrollo

web y que puede ser incrustado en HTML. Es popular porque un gran número de páginas y portales web están creadas con PHP. Código abierto significa que es de uso libre y gratuito para todos los programadores que quieran usarlo. Incrustado en HTML significa que en un mismo archivo vamos a poder combinar código PHP con código HTML, siguiendo unas reglas.

El lenguaje PHP suele procesarse directamente en el servidor aunque también puede usarse a través de software capaz de ejecutar comandos y para el desarrollo de otra clase de programas. (Gardey, 2010)

2.16.2 ASP.- Es una tecnología dinámica funcionando del lado del servidor, lo que significa que cuando el usuario solicita un documento ASP, las instrucciones de programación dentro del script son ejecutadas para enviar al navegador únicamente el código HTML resultante.

(34)

17 CAPÍTULO III

3. MARCO PROPOSITIVO

3.1 Planteamiento de la propuesta

La empresa NETSYSTEMS de la ciudad de Ibarra, tiene la misión de brindar un excelente servicio a los clientes que visitan el sitio, a través de la promoción productos tecnológicos de calidad, para aumentar el número de ventas, y desarrollar una interconexión virtual entre el usuario y la plataforma, por lo cual se debe prestar gran importancia tanto en el registro de usuarios como en el tiempo que se demora en realizar la compra en línea.

Para lograr cumplir el proceso de compra el usuario debe registrarse previamente llenando el formulario, para asignarle el rol de cliente, el mismo que le permite seleccionar productos tecnológicos al carro de compras y finalmente realizar el pedido para finalizar la compra a través de la plataforma de Pay Pal.

3.2 Ingeniería pre análisis aplicación web

En la aplicación web se describe el proceso para realizar comercio electrónico en línea. En la empresa NETSYSTEMS, donde podemos encontrar un catálogo de productos tecnológicos organizados por categorías que permite mejorar y optimizar el tiempo de compra en línea enviando los datos de los usuarios a la plataforma Pay Pal, en donde antes la única forma para comercializar los productos era mediante la concurrencia de los clientes al negocio.

(35)

18 3.3 Metodología en cascada

Para el desarrollo de la aplicación web, se utilizó la metodología de CASCADA, puesto que las fases de desarrollo requieren de un análisis de requisitos y orden cronológico que permite ir verificando etapa a etapa el progreso del sitio. Las etapas de esta metodología son:

Gráfico 1. Ciclo de vida en cascada

Fuente: Internet

3.3.1 Análisis

3.3.1.1 Especificación de los requisitos

En la empresa Netsystems de la ciudad de Ibarra se están realizando compras y ventas de productos tecnológicos a clientes y proveedores de forma poco frecuente, ya que las ventas han disminuido significativamente debido a la competencia que ofrecen otras empresas que se encuentran cerca del sector y debido a la devaluación del peso en el vecino país de Colombia frente al dólar; a eso se suma la falta de publicidad de la Empresa lo que hace que el comercio no se efectué con normalidad.

(36)

19 3.3.2 Recursos de la aplicación web

Para la presente aplicación web se utilizó los siguientes recursos:

3.3.2.1 Usuario o cliente

 Datos personales de la persona que se registra en el sitio.  Disponibilidad y selección de productos en la tienda virtual.  Confirmación del pago por Pay Pal.

3.3.2.2 Medio tecnológico

 Información completa respecto a los productos y servicios que oferta la Empresa, indispensables para el proceso de compra en línea.

3.3.2.3 Catálogo de productos clasificado por categorías

 Productos disponibles para ser seleccionados por clientes.

 Detalle de productos agregados al carro de compras con especificaciones de características y precios.

Tabla 2. Recursos de la aplicación Web

Fuente: Autoría

REQUISITO DETALLE ACCION RESULTADO

Usuario o Cliente El beneficiario final

Selecciona y agrega productos al carro

Hace la compra real en línea

Medio Tecnológico Aplicación Web

Da a conocer los productos y ejecuta el proceso de compra.

Mejora el proceso de compra

de los productos

tecnológicos.

Catálogos de

productos

clasificados por categorías

Número de productos tecnológicos disponibles

Inserción de nuevos productos con imágenes a la base de datos del sitio

(37)

20 3.3.3 Requisitos de hardware

Los requisitos de Hardware para la realización de la aplicación web son los siguientes:

COMPUTADOR PORTÁTIL.

Características

 Marca Toshiba

 Modelo Satelite L645

 Procesador Amd TurioII P540 Dual Core 2.4 Ghz

 Memoria 4GB

Tabla 3. Requisitos de Hardware

Fuente: Autoría 3.3.4 Requisitos de software

Los requisitos de software de hardware para el desarrollo del sitio son los siguientes:

SOFTWARE VERSION DETALLE

AppServ 3.2 Herramienta OpenSource para

Windows.

Apache 2.2.11 Servidor web HTTP de código

abierto

PHP 5.3.0 Es un lenguaje de programación de

uso general de código del lado del servidor

MySQL 5.1.36 Es un sistema de gestión de bases de

datos relacional.

phpMyAdmin 3.2.0.1 Es una herramienta escrita en PHP

con la intención de manejar la administración de MySQL a través de páginas web, utilizando Internet Macromedia Fireworks 8 Es un software de diseño gráfico

(38)

21

Macromedia Dreamweaver 8 Es un programa para diseño web con editor de código html, css, javascript,

Tabla 4. Requisitos de Software

Fuente: Autoría 3.4 Beneficios

El sitio web tendrá una conexión con el usuario ya que su interfaz gráfica le proporciona la información adecuada, para que conozca todo lo concerniente a la aplicación web, como: sus productos por categorías, servicios, cursos, ubicación, contactos, y de igual forma se puede comprobar la disponibilidad de productos en la tienda virtual y realizar su pago a través del envío de datos por la plataforma de PayPal.

3.4.1 Beneficiarios directos. - Las personas que se beneficiarán directamente con la elaboración de la aplicación web serán los usuarios que actualmente visitan este sitio, que están proporcionando el servicio de compras en línea, ya que mediante esta tecnología se logra mejorar significativamente las ventas de la Empresa y darse a conocer a nivel mundial. en donde los clientes pueden acceder a través del navegador de Internet sin necesidad de visitar físicamente el negocio.

Esto hace que se mejore el ingreso de ventas diarias, semanales y anuales con productos tecnológicos de excelente calidad.

Los usuarios, a través de la web www.netsystems2016.com podrán acceder a través del navegador de Internet sin necesidad de visitar físicamente el negocio para visualizar, seleccionar, agregar y pagar por medio de la plataforma Pay Pal.

(39)

22 3.5 Diseño

3.5.1 Flujograma de la aplicación web

En este flujograma se puede visualizar detalladamente el tipo de usuario que tienen los clientes de la aplicación, las tareas y procesos que pueden realizar tanto como usuario administrador y usuario cliente y el reporte de compras a través de la plataforma Pay Pal.

Gráfico 2. Flujograma de la Aplicación Web

Fuente: Autoría NO

CLIENTE

Selecciona y agrega los productos por categorías al carro de compras

SI Aplicación web

ADMINISTRADOR SI

Agrega, actualiza y elimina productos

con imágenes

NO

Realiza el proceso de compra con la plataforma de Paypal Rol de Usuario

-Visualiza y Agrega productos

por categorías al carro de compras

(40)

23

3.5.2 Diagrama de flujo de datos del proceso de compra en línea

Gráfico 3. Diagrama de flujo de datos del proceso de compra en línea Fuente: Autoría

1 CLIENTE

DATOS CLIENTES REGISTRAR

2 PRODUCTOS POR CATEGORIAS

SELECCIONAR

A1 APLICACIÓN WEB

REGISTRO CLIENTE REGISTRADO

3 GESTIÓN DE PEDIDOS

VALIDAR P

E D ID O E N E SP E R A

4 ENVIAR PEDIDO

EMITIR ORDEN DE PEDIDO POR PAY PAL

(41)

24 3.5.3 Diseño de la base de datos

El diseño de la base de datos de la aplicación web consta de cuatro tablas relacionadas que fueron desarrolladas en:

 Mysql.- Para la construcción de tablas con datos y tipos de datos.

 Mysql WorkBench, Para la exportación y restauración del script de la BD.

Gráfico 4. Diagrama Físico de la Base de Datos Fuente: Base de Datos

3.6 Diseño de la aplicación web

(42)

25 3.6.1 Diseño de prototipos

Para la creación de prototipos de pantallas se utilizó en el programa de Word la ficha Formato/Efectos Artísticos/Boceto de Lápiz.

 Prototipo de Pantalla Principal

Gráfico 5. Boceto de la Pantalla Principal

 Prototipo de Pantalla de Productos (Tienda en Línea)

Gráfico 6. Boceto de la Pantalla de Productos

(43)

26

 Prototipo de Pantalla de Contactos

Gráfico 7. Boceto de la pantalla de contactos

3.7 Diseño de interfaces de entrada y salida

Para el desarrollo de la interfaz gráfica de las pantallas de la aplicación web se utilizó los siguientes programas: Fireworks, Dreamweaver, WOW Slider.

3.7. 1. Pantalla de página principal

Aquí el usuario puede visualizar en forma general todas las opciones de la aplicación web como: la descripción de la misión y visión de la Empresa, los productos disponibles en la tienda virtual, los cursos que se ofertan, los servicios, el lugar donde se encuentra la Organización y los datos de contactos para los clientes.

Gráfico 8. Pantalla de la página principal

(44)

27 Acceso como cliente

3.7.2. Pantalla de registro de clientes en el sitio web

Aquí el usuario puede registrarse, llenando los datos personales en el formulario.

Gráfico 9. Pantalla de Registro de Usuarios en la Aplicación Web

3.7.3. Pantalla de login para acceso al panel de control del cliente

En esta página los usuarios pueden entrar a la plataforma con el Rol de Cliente, el mismo que le permite acceder a todas las opciones y generar la compra online a través de PayPal.

Gráfico 10. Pantalla de Login de acceso al cliente

(45)

28

3.7.4 Pantalla de catálogo de productos del sitio web

En esta página los usuarios o clientes pueden seleccionar de la tienda virtual y agregar al carro de compras cualquier tipo de producto con las respectivas características y precio que se ajuste a su necesidad.

Gráfico 11. Pantalla del catálogo de productos

3.7.5 Pantalla de detalle de carro de compras

En esta página los usuarios o clientes pueden escoger la cantidad de productos que necesiten y al presionar el botón Realizar Pago, pueden efectuar la transacción con el sistema PayPal para ver el detalle de la cantidad de todos los productos agregados al carro con sus respectivos precios y valor total a pagar.

Gráfico 12. Pantalla de detalle del carrito de compras

(46)

29

3.7.6 Pantalla de reporte de pedido del cliente con total a pagar

Aquí se obtiene el informe con el detalle de los productos comprados por el cliente con el desglose de valores a pagar y el total a pagar.

En esta ventana el usuario debe pagar al vendedor a través de su número de tarjeta de crédito registrada con la cuenta de PayPal y en caso de no tener deberá crearse una nueva con sus datos personales.

(47)

30 Acceso como administrador

3.7.7 Pantalla de acceso de administrador a sitio web

En esta página el usuario con el Rol de Administrador deberá ingresar sus datos personales como: correo electrónico y clave. En el caso de que no coincidan los datos no podrá acceder.

Gráfico 14. Pantalla de acceso de Administrador a Sitio Web

3.7.8 Pantalla de agregar productos del usuario administrador

En esta página tan solo el usuario Administrador podrá agregar un producto nuevo a la tienda virtual con: el Nombre, Precio, Descripción, Categoría e Imagen insertada desde archivo.

Gráfico 15. Pantalla de agregar productos del usuario Administrador

(48)

31

3.7.9 Pantalla de modificar datos del usuario administrador

Aquí el usuario administrador podrá, borrar, modificar y agregar productos nuevos, tomando en cuenta la descripción el precio y el nombre de los mismos.

Gráfico 16. Pantalla de modificar del Administrador

3.7.10 Pantalla de reporte de productos por categorías del usuario administrador

Aquí el usuario administrador puede obtener un reporte de todos los productos existentes en el catálogo organizados por categorías.

(49)

32 3.8 Codificación

En esta fase de detalla minuciosamente el código en que fue realizado la aplicación web, el mismo que está clasificado en: CSS para los estilos de las páginas, HTML para la etiquetas y formularios, el lenguaje de programación PHP para el control de las sentencias e instrucciones y el lenguaje propio de Mysql para ejecutar las consultas.

3.8.1 Código de la página principal (index.php)

?php

$titulo = "Inicio";

include("librerias/conectar.php"); include("plantilla/encabezado.php"); ?> <style type="text/css"> <!-- .Estilo1 { font-size: 18px; font-weight: bold; color: #FF0000; }

.Estilo2 {color: #000000}

.Estilo9 {color: #000000; font-weight: bold; } .Estilo10 { color: #0000FF; font-weight: bold; } --> </style>

<td width="868" colspan="5" bgcolor="#FFFFFF"> <p class="Estilo1">¿QUIENES SOMOS ?

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versio n=5,0,0,0" width="311" height="37" align="right" class="Estilo10" title="REGISTRATE

AQUÍ">

pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Versio n=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="" ></embed>

</object> </p>

<p align="justify" class="Estilo2 Estilo5"><strong>Somos una empresa lider en el mercado en el desarrollo de sitios web, instalación de redes, cursos de computación

básicos y avanzados, asistencia técnica,

(50)

33

<p align="justify" class="Estilo2 Estilo5"><strong>Contamos con una amplia gama de accesorios tecnológicos a los mejores precios con servicio técnico de excelente calidad.</strong></p>

<p align="justify" class="Estilo5"><span class="Estilo10">MISIÓN:</span><br /> <span class="Estilo9">Brindar al cliente el mejor soporte técnico especializado en productos tecnológicos y en desarrollo de software tanto de aplicaciones web como programas

de escritorio.</span></p>

<p align="justify" class="Estilo5"><span class="Estilo10">VISIÓN:</span><br /> <span class="Estilo9">Consolidarnos como una empresa Mundial de comercio

electrónico en productos tecnológicos de alta calidad para llegar a cumplir las expectativas de compras

de clientes nacionales e internacionales.</span></p> </td> </tr>

<tr> <?php

include("plantilla/pie.php"); ?>

3.8.2 Código de la página de productos (productos.php)

<?php

session_start();

$titulo = "Productos";

include("librerias/conectar.php"); include("plantilla/encabezado.php");

?>

.Estilo1 {color: #000000} -->

</style>

<div class='text-border'> <?php

$resultado = mysql_query("SELECT * FROM productos");

// comienza un bucle que leera todos los registros y ejecutara las ordenes que siguen while ($productos = mysql_fetch_array($resultado))

{ ?>

<img src="<?php echo $productos['imagen'];?>" weight='80px' height='80px'> <p><?php echo $productos['descripcion'];?></p>

(51)

34

<?php echo "<a href='carro.php?id=" . $productos['id_producto'] . "&action="; if (isset($_SESSION['carro'][$productos['id_producto']])){

echo "removeProd' alt='Eliminar del carro'><img src='imagen/remove_carro.png' width='48' height='48' alt='Eliminar del carro' title='Añadir producto al carrito'></a>";

} else

echo "add' alt='Añadir al carro'><img src='imagen/add_carro.png' width='48' height='48' alt='Añadir al carrito' title='Añadir producto al carrito'></a>";

?></div> <?php } ?> </div> </div><div align="right"> <div align="center"></div> </div></td> </tr> <tr> <?php include("plantilla/pie.php"); ?>

3.8.3 Código de la página de login del administrador (iniciadmin.php)

<?php

session_start();

if (isset($_SESSION['admin'])) { header("location: admin.php"); }

$titulo = "Iniciar Sesión";

include("librerias/conectar.php"); include("plantillaadmin/encabezado3.php"); ?> <style type="text/css">  </style>

<br>

<td> <span class="Estilo1">CORREO:</span></td>

(52)

35 <tr>

<td> <span class="Estilo1">CLAVE: </span></td>

<?php

if(isset($_GET['error'])){

echo '<center>Datos No Validos</center>'; }

?> <tr > <td>

</td>

</tr> </table> </form> </td> </tr> <tr> <?php include("plantilla/pie.php"); ?>

3.8.4 Código de la página del administrador (admin.php)

<?php

session_start();

if(isset($_SESSION['admin'])) { $titulo = "Registrar Productos"; include("librerias/conectar.php");

include("plantillaadmin/encabezado2.php"); ?>

.Estilo1 {font-size: 18px} -->

</style>

<center> <h2>AGREGAR NUEVOS PRODUCTOS</h2></center> <br>

<tr>

(53)

36

</tr> <tr>

<td> <span class="Estilo1">PRECIO </span></td>

<tr>

<td> <span class="Estilo1">DESCRIPCION </span></td>

<tr>

<td> <span class="Estilo1">CATEGORIA </span></td>

<td><select name="categoria"><option value="">(seleccionar categoria)</option> <?php $cat=mysql_query("SELECT * FROM categoria");

while ($datos= mysql_fetch_array($cat)) { ?>

<?php } ?> </select></td> </tr>

<tr>

<td> <span class="Estilo1">IMAGEN</span></td> <td><input type="file" name="file"required> </tr>

<input type="submit" name="reg" title="registro" value="AGREGAR"> </td> <td width="82"></td> </tr> </table> </form> <?php if (isset($_SESSION["admin"])) {

echo "<br><h3> <font color=red><center>BIENVENIDO </center></font> </h3>"; echo "<h3>"."<center>".$_SESSION["admin"]."</h3>";

(54)

37

3.8.5 Código de la pantalla de modificar del administador (modificar.php)

<?php

session_start();

if (isset($_SESSION['admin'])) { $titulo = "Registrar Productos"; include("librerias/conectar.php");

include("plantillaadmin/encabezado2.php"); ?>

<h1>MODIFICAR Y/O ELIMINAR</h1> <table width="100%"> <tr> <td><div align="center"><strong>ID</strong></div></td> <td><div align="center"><strong>PRODUCTO</strong></div></td> <td><div align="center"><strong>DESCRIPCIÓN</strong></div></td> <td><div align="center"><strong>PRECIO</strong></div></td> <td><strong>ELIMINAR</strong></td> <td><strong>MODIFICAR</strong></td> </tr> <?php

$resultado=mysql_query("select * from productos"); while($row=mysql_fetch_array($resultado)){

echo ' <tr> <td>

<td><button class="eliminar" data-id="'.$row[0].'">Eliminar</button></td> <td><button class="modificar" data-id="'.$row[0].'">Modificar</button></td> </tr>';

} ?> </table>

(55)

38

3.8.6 Código de la pantalla de registro del cliente (registro.php)

<?php

$titulo = "Registro";

include("librerias/conectar.php"); include("plantilla/encabezado.php"); ?>

.Estilo11 {font-family: Arial, Helvetica, sans-serif; font-size: 24px; color: #000000; } .Estilo12 { color: #FF0000; font-weight: bold; } --> </style>

<h2 class="Estilo12">REGISTRATE</h2> <br>

<td> <span class="Estilo11">Nombre:</span></td>

<tr>

<td> <span class="Estilo11">Dirección: </span></td>

<tr>

<td> <span class="Estilo11">Telefono:</span></td>

<tr>

<td> <span class="Estilo11">Correo:</span></td>

<tr>

<td> <span class="Estilo11">Clave:</span> </td>

(56)

39 <tr>

<?php

include("plantilla/pie.php"); ?>

3.9 Pruebas

En el momento de ejecución de la aplicación se realizó varias pruebas en las páginas para detectar posibles errores de interfaces, programación o validación.

3.9.1 Pruebas de caja negra de la aplicación

3.9.2 Página de login de clientes

En este formulario de ingreso del cliente se puede constatar que, al momento de ingresar datos erróneos tanto del correo electrónico como de la clave, la aplicación genera mensaje de validación en donde indica la forma adecuada como deben ser llenado los campos.

Gráfico 18. Pantalla de reporte de productos por categorías

3.9.3 Página de login de administrador

(57)

40

Gráfico 19. Pruebas de pantalla de acceso del usuario administrador

3.10 IMPLEMENTACIÓN

A través de esta aplicación se puede identificar todos beneficios que brinda como registro de usuarios en línea, selección del producto tecnológico al gusto del cliente con características y precios, reportes de productos más vendidos.