Diseño De Aplicativo Web En Lenguaje Hipertext ...

37
i Diseño De Aplicativo Web En Lenguaje Hipertext preprocessor; Cooperativa Eco Regional Y Multiactiva Trabajar Juntos. Cristian Fabricio Ortegón León Universidad Cooperativa De Colombia Facultad de Ingenierías Programa Ingeniería De Sistemas Ibagué-Espinal 2018

Transcript of Diseño De Aplicativo Web En Lenguaje Hipertext ...

Page 1: Diseño De Aplicativo Web En Lenguaje Hipertext ...

i

Diseño De Aplicativo Web En Lenguaje Hipertext preprocessor; Cooperativa Eco

Regional Y Multiactiva Trabajar Juntos.

Cristian Fabricio Ortegón León

Universidad Cooperativa De Colombia

Facultad de Ingenierías

Programa Ingeniería De Sistemas

Ibagué-Espinal

2018

Page 2: Diseño De Aplicativo Web En Lenguaje Hipertext ...

ii

Diseño De Aplicativo Web En Lenguaje Hipertext preprocessor; Cooperativa Eco

Regional Y Multiactiva Trabajar Juntos.

Presentado por

Cristian Fabricio Ortegón León

Director Metodológico

Mg. Carlos Dussán Pulecio

Director Temático

Mg. César Augusto Cruz Ramírez

Profesor Disciplinar

Ing. Esp. Luis Carlos Barreto

Universidad Cooperativa De Colombia

Facultad de Ingenierías

Programa Ingeniería De Sistemas

Ibagué-Espinal

2018

Esta obra está bajo una licencia de Creative

Commons Reconocimiento-NoComercial-

CompartirIgual 4.0 Internacional.

Page 3: Diseño De Aplicativo Web En Lenguaje Hipertext ...

iii

Índice De Tablas

1 Descripción del Problema .................................................................................... 7

2 Justificación ......................................................................................................... 8

3 Marco Referencial .............................................................................................. 10

3.1 Marco Teórico ............................................................................................ 10

3.2 Marco Conceptual ....................................................................................... 17

3.3 Marco de antecedentes ................................................................................ 19

4 Objetivos ............................................................................................................ 20

4.1 Objetivo General ......................................................................................... 20

4.2 Objetivos Específicos ................................................................................. 20

5 Metodología de la investigación ........................................................................ 21

5.1 Enfoque ....................................................................................................... 21

5.2 Tipo ............................................................................................................. 22

5.3 Fuentes y técnicas de Recolección de Información .................................... 22

6 Desarrollo De La Investigación ......................................................................... 24

6.1 Identificar Los Principales Requerimientos Y Necesidades ....................... 24

6.2 Diseño del Aplicativo Web ......................................................................... 29

6.2.1 Secciones, contenido e Implementación ............................................... 30

7 Conclusiones ...................................................................................................... 36

Page 4: Diseño De Aplicativo Web En Lenguaje Hipertext ...

iv

8 Referencias ......................................................................................................... 37

Índice De Figuras

Figura 1. Mapa Mental Sobre La Estructura De La Base De Datos De La Página Web

.............................................................................................................................................. 28

Figura 2. Login del Usuario...................................................................................... 31

Figura 3. Interfaz que muestra la historia ................................................................. 32

Figura 4. Interfaz en el módulo Administrador ........................................................ 32

Figura 5. Interfaz Quitar o agregar un producto ....................................................... 33

Figura 6. Interfaz agregar clientes ............................................................................ 34

Figura 7. Interfaz Modificar productos, clientes y proveedores ............................... 34

Figura 8. Interfaz página web Coometrajun. ............................................................ 35

Page 5: Diseño De Aplicativo Web En Lenguaje Hipertext ...

5

Introducción

El uso de la tecnología es cada vez más exigente para empresas y organizaciones

grandes o pequeñas, no solo en la producción, sino también en el manejo de la información,

donde se han creado innumerables teorías de su manejo eficiente y oportuno. La

información externa e interna permite a las diferentes empresas apropiarse de herramientas

necesarias para la toma de decisiones que influyen en el éxito o fracaso de las mismas. Es

así que, la Cooperativa Eco regional y Multiactiva -Trabajar Juntos, no puede ser ajena a

proyectar su información y ahondar en el mercadeo, a ganar espacios de proyección, a ir de

la mano con las TIC y recibir de ella sus beneficios.

Este proyecto pretende entonces lo anterior, para lo cual se diseñaron dos fases, en

la primera de ellas se desarrolla un proceso de investigación que permita el ubicarnos en la

situación y encontrar aquellas deficiencias o fallas al igual que vislumbrar posibles

soluciones y en la segunda se formula, diseña e implementa una página web que sistematiza

o automatiza los procesos y procedimientos llevados a cabo en la cooperativa.

El proyecto permite encontrar solución a los problemas encontrados a la vez que

brinda la facilidad de contar con la herramienta más poderosa de toda organización como

es: información veraz y oportuna, que permita como se dijo anteriormente una base sólida

para la toma de decisiones adecuadas a las necesidades de la cooperativa a través del

lenguaje PHP. Este se procesa en servidores, que son potentes ordenadores con un software

y hardware especial. Cuando se escribe una dirección tipo, http://www., en un navegador

web como Internet Explorer, Firefox o Chrome, se envían los datos de la solicitud al

Page 6: Diseño De Aplicativo Web En Lenguaje Hipertext ...

6

servidor que los procesa, reuniendo los datos, en un proceso dinámico y el servidor los

devuelve es una página HTML de manera estática.

El esquema de ese proceso es como se describe a continuación: Petición de página

web al servidor --> El servidor recibe la petición, reúne la información necesaria

consultando a bases de datos o a otras páginas webs, otros servidores, etc. --> El servidor

responde enviando una página web “normal” o también llamada estática, pero cuyo

transcurso de creación ha sido dinámico, realizando procesos de modo que la página web

retroalimentada no siempre es igual.

PHP es el lenguaje por excelencia para la cooperativa la Cooperativa Eco regional y

Multiactiva Trabajar Juntos, ya que PHP es uno de los lenguajes más usados a nivel

mundial, actualmente más de 6 millones de dominios lo usan. Posee mayor documentación

en la web que cualquier otro lenguaje escrito. La mayoría de las aplicaciones realizadas hoy

en día se están ajustando a modelos cliente‐servidor, gracias a su distribución mediante el

internet.

Page 7: Diseño De Aplicativo Web En Lenguaje Hipertext ...

7

1 Descripción del Problema

La Cooperativa Eco regional y Multiactiva - Trabajar Juntos, presenta problema de

identidad de marca, son una empresa existente, con un catálogo de productos y dentro de

todos sus problemas es una empresa que se mantiene funcionando, sus esfuerzos de

comunicación han sido desordenados y poco eficaces. El segundo problema que enfrenta la

cooperativa es relativo a la falta de difusión, básicamente el público, no conoce la

cooperativa ni su labor, y aquellos que sí lo conocen lo han hecho por medio de

instrumentos que no han manejado voluntaria y conscientemente. Podemos decir que esta

cooperativa no sabe cómo deben difundirse, y los intentos que han hecho no les han dado

los resultados esperados, debido a una falta de planificación y estrategia patente en sus

resultados. El tercer problema que tiene la cooperativa es su presupuesto limitado. Si bien

esto es un problema en todas las empresas existentes, sobre todo en las pequeñas y

medianas (ya que ninguna se puede dar el lujo de derrochar recursos valiosos), para hacer

válida y viable la propuesta, los resultados a los cuales se llegue deben hacer valer la

inversión que se produjo.

¿Es posible diseñar e implementar un aplicativo web para que una empresa

cooperativa rural pueda generar estrategias de mercadeo y ventas altamente eficaces y

globalizadas?

Page 8: Diseño De Aplicativo Web En Lenguaje Hipertext ...

8

2 Justificación

Hoy en día, La difusión en medios de comunicación como el bando, la radio, la

televisión, no tienen la audiencia necesaria para promover a una entidad solidaria como lo

es la Cooperativa Multiactiva Ecorregional Trabajar Juntos, COOMETRAJUN. De otro

lado, Es importante que, la población conozca la cultura corporativa, el organigrama, su

ubicación física y virtual, para saber que elegir, a quién acudir a dónde dirigirse en caso de

requerir los productos y servicios que esta empresa ofrece al mercado, además, de expresar

sus quejas y reclamos cuando haya lugar. Todo lo anterior requiere darle solución de

manera eficiente y oportuna.

Es así que, con el diseño e implementación de una página web creada en lenguaje

Hipertext preprocesso, conocido también como PHP, se disminuirían los costos de

promoción institucional y de mercadeo, debido a que allí se podría publicar gran cantidad

de información en texto e imágenes, supliendo la necesidad de utilizar los medios impresos.

De igual formase podrá emitir difusión de interés para la población como alertas sobre el

consumo o adquisición de algunos productos será mejor y de manera oportuna, la población

de los alrededores a los cuales les es imposible acercarse a las instalaciones de la

cooperativa o llamar por teléfono, podrían ejercer sus derechos como consumidores y por

supuesto, la imagen de la Cooperativa Eco Regional y Multi activa Trabajar Juntos

mejorará debido a que, al tener presencia en la web, obliga a mejorar el servicio y

consecuentemente la calidad.

Page 9: Diseño De Aplicativo Web En Lenguaje Hipertext ...

9

De otro lado, como es bien conocido el internet es el medio de comunicación y

difusión de punta que ha logrado un mayor alcance a nivel mundial y que tan solo es

suprimido en muy pocos países. Además, ha unido y cambiado las reglas políticas,

económicas entre otras. (Hernández, 2008, págs. 195-205) al respecto comenta:

Uno de los mayores fenómenos de este siglo es la explosión de las redes de

Internet, donde entra en un espacio-tiempo, un llamado cibermundo que cambia las

reglas políticas, económicas, sociales y culturales. Esta herramienta tecnológica no va

a suplantar la sociedad industrial o post-industrial en los términos de Bell, sino que es

el gran lubricante de esta economía global, donde actores como las trasnacionales se

constituyen en Supra-Estados. Su expresión está en la gran movilidad de hombres e

ideas de innovación que crea círculos virtuales de la nueva economía de redes, en una

especie de sistema de compartir recursos de información en un protocolo informático

que permite a los computadores intercambiar estos recursos a escala mundial.

Page 10: Diseño De Aplicativo Web En Lenguaje Hipertext ...

10

3 Marco Referencial

3.1 Marco Teórico

En el siglo XXI la informática, la tecnología y por supuesto el Internet, se han

convertido en ejes fundamentales de comunicación y desarrollo, además que según

(Piwonka, 1996), “la riqueza de información técnica y comercial que se está encontrando

en Internet, la está convirtiendo en una herramienta vital para las comunicaciones a nivel

mundial” (p. 2).

De igual forma, hay que tener en cuenta que la Internet es una de las

herramientas de comunicación más importante y fuerte en la actualidad. Hasta el

momento, la Internet es una herramienta un poco más selectiva que muchos otros

medios de transmisión de información. Igualmente, la parte de la población que

logra acceder a la red mundial de información aún escasa comparada con el

potencial que puede lograrse. (Castells, 2000) comenta que en Estados Unidos que

es de los países más avanzados en este nueva tecnología tan solo ese utiliza el 50%

del internet pero esto no significa que no sea una herramienta importante o que va a

ir en decadencia, o simplemente que la información que se transmite en la Internet

no pueda alcanzar el grupo objetivo al cual va dirigido, por el contrario la

perspectiva por la información que se transmite en la Internet abre las puertas a una

nueva evolución de las superficies de transmisión de información junto con el

desarrollo de la tecnología y la globalización.

Page 11: Diseño De Aplicativo Web En Lenguaje Hipertext ...

11

Continuando la idea anterior, no solo por ser una herramienta que está a la

vanguardia del mundo es importante, sino que Internet tiene innumerables ventajas

comunicacionales, una de ellas es la ventaja de poder comunicarse con millones de

personas en un mismo instante o tener como nos dice (Piwonka, 1996) “un espacio de

conocimiento abstracto que permite con facilidad adentrarse en mundos desconocidos,

accediendo de esta manera de forma inmediata y sin precedentes a formas de vida y

culturas ignoradas”(p. 3). Por otro lado, su ventaja más importante es el alto grado de

potencial de aprendizaje que puede se puede obtener con el uso de Internet para el

desarrollo social e individual de cualquier usuario en la red.

Usando la Web, se puede acceder a miles de páginas de información, “la

exploración en la Web se realiza por medio de un software especial denominado Browser o

Explorador. La apariencia de un Sitio Web puede variar ligeramente dependiendo del

explorador que use. Así mismo, las versiones más recientes disponen de una funcionalidad

mucho mayor tal como animación, realidad virtual, sonido y música”.

La página web es la unidad básica de la World Wide Web, o la Web. Una página

Web es un documento electrónico que contiene información específica de un tema en

particular y que es almacenado en algún sistema de cómputo que se encuentra conectado a

la red mundial de información denominada Internet. Es un documento dinámico, porque

permite realizar diferentes acciones a través de textos o imágenes, que conducen al usuario

a otra página web, a otra sección dentro del documento o a un e-mail. Es de suma

importancia que una página web se convierta en un aporte para un usuario, una empresa,

una institución, o una persona natural, ya que de nada sirven los colores, las imágenes, las

Page 12: Diseño De Aplicativo Web En Lenguaje Hipertext ...

12

animaciones o el buen diseño de la página si los usuarios que ingresen a ésta no encuentran

lo que buscan o no quedan satisfechos con ésta, la página web sería un fracaso si los

usuarios quedan defraudados con ésta. De Ahí, es fácil entender a (Codina, 2000, pág. 63),

cuando habla que se debe comprender la www como un nuevo factor de calidad de vida.

Por lo anterior, es importante visualizar que para mejorar la calidad de vida de las personas

jurídicas o empresas es importante estructurarles su forma de ingreso y uso de la word wide

web,

La primera etapa es la planificación, en ésta se debe analizar el contenido general

que tendrá la presentación, la interacción y la personalización de la página web que será

dirigida a una audiencia objetivo. Es de vital importancia planificar correctamente, nos dice

(Iazza, 2004) En esta etapa se identifican los objetivos del sitio, así como las necesidades,

requerimientos y objetivos de la audiencia potencial. Confrontando esta información se

definen los requerimientos del sitio web, entre los que podemos contar requerimientos

técnicos (back-end y front-end), recursos humanos y perfiles profesionales necesarios, y

adecuación del presupuesto disponible.

La segunda etapa que es la estructuración, como su nombre lo indica es donde se

estructura la presentación de la página web, en esta etapa se separa la información total en

páginas web y se relacionan entre sí. Además de esto se deben definir los objetivos

específicos de cada página web, (Iazza, 2004, págs. 6-7) Una vez definida la estructuración

del sitio es necesario documentarla, para así tener un modelo de referencia sobre el que

sustentar el desarrollo del sitio. La forma de documentar arquitecturas se suele hacer a

Page 13: Diseño De Aplicativo Web En Lenguaje Hipertext ...

13

través de grafos y esquemas, con el objetivo de que sean de fácil y rápida comprensión por

todos los miembros del equipo de desarrollo.

La tercera etapa es el diseño-diagramación-implementación, en esta etapa es en

donde se implementa el estilo y la estructura que ya se han determinado en la etapa dos, de

acuerdo a esto se realiza la diagramación gráfica, (Iazza, 2004, pág. 5) La etapa de Diseño

es el momento del proceso de desarrollo para la toma de decisiones acerca de cómo diseñar

o rediseñar, en base siempre al conocimiento obtenido en la etapa de planificación, así

como a los problemas de usabilidad descubiertos en etapas de prototipo y evaluación..

se establece los datos que debe estar en cada párrafo y se seleccionan las imágenes, figuras

y demás elementos que deben incluirse en cada página. Dependiendo de cada página web

se incorporan elementos tales como plantillas para que el usuario deje información o diga

su opinión. Finalmente se organizan, se unifican y se complementan todos los anteriores

elementos para originar la página web. (Iazza, 2004, pág. 1) Es fácil inferir que un buen

diseño deberá ser comprensible, fácil de usar, amigable, claro, intuitivo y de fácil

aprendizaje para el usuario. Para poder asegurar que un diseño cumple con estos requisitos

no basta simplemente con una actitud empática del diseñador durante el desarrollo de la

aplicación; es imprescindible la adopción por parte de éste de técnicas, procedimientos y

métodos que aseguren empíricamente la adecuación del diseño a las necesidades,

habilidades y objetivos del usuario.

La última etapa es la publicación, en esta etapa se debe tener la página web terminada y

sólo faltaría la instalación de ésta en un servidor web para hacerla accesible a la comunidad

de Internet (Cobo, Gómez, Pérez, & Rocha, 2005) Todos los servicios que ofrece internet, y

Page 14: Diseño De Aplicativo Web En Lenguaje Hipertext ...

14

por supuesto entre ellos el servicio web, Se basan en la denominada relación cliente/

servidor. El comprender bien esta relación es esencial para entender el funcionamiento

posterior de lenguajes como PHP.

Una de las ventajas que tiene la página web con respecto a otros medios de

publicación, es la interactividad, ya que simplemente con el hecho de que el usuario ingresa

a la página web, inmediatamente el usuario puede interactuar con ella directamente, puede

visitar lo que más le interese, dejar su opinión, comunicarse por medio del correo

electrónico o simplemente ingresar información. Otra ventaja de la página web es la

accesibilidad, ya que se encuentra disponible para todos, cualquier persona que esté

interesada en la página web la puede visitar, independientemente del lugar en donde se

encuentre ubicado, ésta es una razón por la cual (Dans, 2007) La ventaja de una página

corporativa con esa estructura es la de posibilitar un diálogo directo con los clientes de la

empresa, que pueden brindar una información muy importante con vistas a la toma de

decisiones, a modo de estudio de mercado directo y en tiempo real.

De otro lado, (Thompson, 2006) en su artículo, Definición de Marketing. Trae a

colación las siguientes definiciones:

Para Philip Kotler, “el marketing es un proceso social y administrativo

mediante el cual grupos e individuos obtienen lo que necesitan y desean a través de

generar, ofrecer e intercambiar productos de valor con sus semejantes”. Según Jerome

McCarthy, "el marketing es la realización de aquellas actividades que tienen por objeto

cumplir las metas de una organización, al anticiparse a los requerimientos del

consumidor o cliente y al encauzar un flujo de mercancías aptas a las necesidades y los

Page 15: Diseño De Aplicativo Web En Lenguaje Hipertext ...

15

servicios que el productor presta al consumidor o cliente". Para la American Marketing

Asociation (A.M.A.), "el marketing es una función de la organización y un conjunto de

procesos para crear, comunicar y entregar valor a los clientes, y para manejar las

relaciones con estos últimos, de manera que beneficien a toda la organización".

Entendemos por marketing entonces, el conjunto de actividades orientadas a satisfacer

las necesidades o deseos de los consumidores o clientes, a través del intercambio de

productos y/o servicios de manera tal que se generen beneficios para la empresa u

organización.

Hablar de marketing online implica relacionar un conjunto de términos diferentes

que abarcan el mismo concepto. Es por eso que se cree necesario, presentar las definiciones

más comunes o más usadas: Inma Rodríguez Ardura, en su libro “Marketing.com y

Comercio Electrónico en la Sociedad de la Información”, 2ª edición, España, 2002, tiene la

siguiente definición: “Marketing en Internet: Puede definirse como el uso de Internet y

otras tecnologías digitales relacionadas para conseguir los objetivos de marketing de la

organización, de acuerdo con el enfoque actual de la disciplina”. Sergio Calvo Fernández y

Pedro Reinares Lara, en su libro “Comunicación en Internet: Estrategias de Marketing y

Comunicación Interactivas”, 2001, España, explican: “Marketing en Internet: Son las

mismas estrategias de marketing pero adaptadas a un nuevo sistema de transmisión de la

información”. Philip Kotler y Gary Armstrong, en “Fundamentos de Marketing”, 6ª

edición, 2003, nos dicen lo siguiente: “E-Marketing: Consiste en lo que una empresa hace

para dar a conocer, promover y vender productos y servicios por Internet.”

Page 16: Diseño De Aplicativo Web En Lenguaje Hipertext ...

16

Según Sebastián Bosco, Account and Sales Director en Clickbunker, es: “El proceso

estratégico de crear, distribuir, promocionar y poner precio a bienes y servicios para

alcanzar a un público objetivo a través de Internet utilizando herramientas digitales. El

marketing online agrupa aquellas acciones que una empresa puede llevar a cabo en internet

para incrementar sus ventas y mejorar la visibilidad y reconocimiento de su marca” Se

puede afirmar entonces, a modo de resumen que el marketing online es un conjunto de

estrategias adaptadas a las nuevas tecnologías, que utilizan las empresas para promocionar

y comunicar sus productos y servicios a través de internet.

Partiendo de la definición base de una estrategia de marketing, que consiste en un

conjunto de acciones que se llevan a cabo para lograr un determinado objetivo relacionado

con el marketing, podemos encontrar las siguientes interpretaciones. Según (Thompson,

2006) cuando cita a Jerome McCarthy y William Perreault, "es un tipo de estrategia que

define un mercado meta y la combinación de mercadotecnia relacionada con él. Se trata de

una especie de panorama general sobre el modo de actuar de una empresa dentro de un

mercado". Para Laura Fischer y Jorge Espejo, "comprende la selección y el análisis del

mercado, es decir, la elección y el estudio del grupo de personas a las que se desea llegar,

así como la creación y permanencia de la mezcla de mercadotecnia que las satisfaga".

Igualmente citando a (Fischer, Espejo. 2007, Pág. 47). En síntesis, es un tipo de estrategia

con el que cada unidad de negocios espera lograr sus objetivos de marketing mediante: 1)

La selección del público objetivo al que se desea llegar, 2) la definición del

posicionamiento que intentará conseguir en la mente de los clientes, 3) la elección del mix

de marketing con el que pretenderá satisfacer las necesidades o deseos del público objetivo

y la determinación de los niveles de gastos en marketing.

Page 17: Diseño De Aplicativo Web En Lenguaje Hipertext ...

17

La interrelación establecida entre el desarrollo de Internet y los avances en las Tics

permitió el desarrollo de los sistemas de e-business en la actualidad, debido al fácil acceso a

la red por parte de los potenciales consumidores y a la imparable expansión de ésta, que

alcanza, aunque con algunas censuras, a casi todos los habitantes del mundo. El e-business

aporta grandes oportunidades de desarrollo empresarial, como pueden ser: la reducción de

costes operativos, un mayor flujo y control de la información en la empresa, la apertura de

nuevas posibilidades de negocio, mayor facilidad para abordar decisiones de

internacionalización y mayor flexibilidad para adaptarse a un entorno cada vez más

cambiante.

Sin embargo, la implementación de estrategias e-business en la empresa no está

exenta de riesgos, en especial para las empresas más chicas, que pueden desaparecer si no

son capaces de integrar adecuadamente las Tics en sus estructuras operativas dentro de

determinados sectores que están experimentando una fuerte implantación de estos sistemas

en la actualidad.

3.2 Marco Conceptual

La World Wide Web: La internet se compone de varios elementos para acceder a

ésta, y el más usado es definitivamente la Web o World Wide Web, es el universo de

información accesible a través de Internet, Informática Milenium, S.A.de C.V.

Page 18: Diseño De Aplicativo Web En Lenguaje Hipertext ...

18

PHP hypertext preprocessor es un lenguaje de programación muy completo de

código abierto, multiplataforma por lo que se presenta como una herramienta de fácil

acceso , que fue proyectado para el desarrollo web primordialmente, la función principal es

permitir a desarrolladores web digitar fácil y ligeramente páginas web, tiene capacidad de

conexión con la mayoría de base de datos que se usan actualmente. Al respecto (Manual de

PHP, 2018).

PHP puede emplearse en todos los sistemas operativos principales, incluyendo

Linux, muchas variantes de Unix (incluyendo HP-UX, Solaris y OpenBSD), Microsoft

Windows, Mac OS X,RISC OS y probablemente otros más. PHP admite la mayoría de

servidores web de hoy en día, incluyendo Apache, IIS, y muchos otros. Esto incluye

cualquier servidor web que puede utilizar el binario de PHP FastCGI como ligttpd y nginx.

PHP funciona tanto como módulo como procesador de CGI.

Página WEB o página de internet: es un documento electrónico que fue creado para su uso

en la web que contiene información sobre temas de interés, es así que una página web

puede ser consultada por cualquier persona que se conecte a la red, tiene como

característica principal de que los textos se combinan con imágenes para hacer que la

pagina sea dinámica y poder ejecutar varias acciones con tal solo un clic, se componen de

hipervínculos que nos permite acceder a correos, o trasportarnos a otra página web, distinta

en microsegundos.

Page 19: Diseño De Aplicativo Web En Lenguaje Hipertext ...

19

3.3 Marco de antecedentes

La aparición a principios de los noventa del servicio web supuso una verdadera

revolución en el campo de la informática y las telecomunicaciones. Con la irrupción de este

nuevo servicio, Internet inició una rápida transición hacia el ámbito empresarial y supuso

un enorme impulso al crecimiento de la red. Lo que había surgido en plena guerra fría

como un proyecto militar y que posteriormente fue dirigiéndose hacia el ámbito científico y

académico se empezó a convertir en un perfecto “escaparate virtual” en el que las empresas

pudieran ofrecer sus productos y servicios rompiendo barreras geográficas y de

comunicaciones. en la actualidad las empresas no ven únicamente el servicio web como un

mero escaparate o medio publicitario de enorme difusión. Internet, y en particular el

servicio web, abre a las empresas enormes posibilidades. La utilización de tecnologías web

permite agilizar los procesos, mejorar la productividad y aumentar la eficacia, además de

abrir las puertas a nuevas formas de negocio en el mercado global que facilita Internet, e-

business, (Cobo, Gómez, Pérez, & Rocha, 2005)

Page 20: Diseño De Aplicativo Web En Lenguaje Hipertext ...

20

4 Objetivos

4.1 Objetivo General

Diseñar un Aplicativo con interfaz de página WEB, para la Cooperativa Eco

regional y Multiactiva Trabajar Juntos.

4.2 Objetivos Específicos

Identificar los principales requerimientos y necesidades de la Cooperativa Eco regional

y Multiactiva Trabajar Juntos.

Identificar las secciones que compondrá el sitio web en base a las necesidades y

requerimientos identificados en la población objetivo.

Determinar los contenidos y funcionalidades del sitio web.

Implementar las funcionalidades requeridas.

Page 21: Diseño De Aplicativo Web En Lenguaje Hipertext ...

21

5 Metodología de la investigación

5.1 Enfoque

El enfoque que seguirá la investigación es cualitativo, ya que en él se expone la

falencia de un grupo social y para solucionarlo se partirá de la observación de los hechos

relacionados y durante el proceso tendrán en cuenta sus conceptos, sentires y necesidades

de donde se partirá para crearles su propia página Web. (Strauss & Corbin, 2002, pág. 19)

confirman al respecto:

Con él término "investigación cualitativa", entendemos cualquier tipo de

investigación que produce hallazgos a los que no se llega por medio de procedimientos

estadísticos u otros medios de cuantificación. Puede tratarse de investigaciones sobre la

vida de la gente, las experiencias vividas, los comportamientos, emociones y sentimientos,

así como al funcionamiento organizacional, los movimientos sociales, los fenómenos

culturales y la interacción entre las naciones

desarrollará una teoría coherente para representar lo que se observa. Para llevar un

método de investigación adecuado al proyecto del aplicativo para asistencia de estudiantes;

Aplicativo Web para el Control De Asistencias En Lenguaje Preprocesador de Hipertexto),

se estudió y se llegó a la conclusión que este proceso se llevaría a cabo por el método del

análisis, ya que, con él, los investigadores podremos conocer la realidad y tener datos más

específicos acerca de cómo se realizan actualmente las asistencias de los estudiantes en las

diferentes instituciones educativas.

Page 22: Diseño De Aplicativo Web En Lenguaje Hipertext ...

22

5.2 Tipo

El tipo que se empleará es la que se realiza para conocer el contexto sobre

un tema que es objeto de estudio. Su objetivo es encontrar todas las pruebas

relacionadas con el fenómeno del que no se tiene ningún conocimiento y aumentar

la posibilidad de realizar una investigación Exploratoria, al respeto comenta

(Narváez, 2006).

Algunas veces una investigación puede caracterizarse como exploratoria,

descriptiva, correlacional o explicativa, pero no situarse únicamente como tal.

Esto es, aunque un estudio sea esencialmente exploratorio contendrá

elementos descriptivos, y lo mismo ocurre con cada una de las clases de estudio.

Asimismo, como se mencionó antes, una investigación puede iniciarse

como exploratoria o descriptiva y después puede llegar a ser correlacional y aun

explicativa.

5.3 Fuentes y técnicas de Recolección de Información

Las fuentes de información y técnicas utilizadas para recolección de esta han sido:

Fuentes de información primaria: Debido al contacto directo con nuestro objeto de estudio,

las principales fuentes de información utilizadas han sido de tipo primario, ya que han sido

obtenidas de manera directa; ya sea con los asociados a la cooperativa o con los empleados

administrativos de la misma. Para ello se han utilizado las siguientes técnicas:

Observación directa. Por experiencia directa con el sistema objeto de estudio.

Entrevistas. Realizadas con el personal laboral de la cooperativa.

Page 23: Diseño De Aplicativo Web En Lenguaje Hipertext ...

23

Fuentes de información secundaria: Las fuentes secundarias de información también han

sido utilizadas aun cuando en menor grado y principalmente en la revisión de documentos,

archivos y registros de la cooperativa, al igual que para hacer abstracción teórica de la

información y como guía metodológica para el desarrollo de una aplicativo para el proceso

de información de la cooperativa. Igualmente, Aquí se utilizaron las siguientes técnicas:

Análisis de documentos. Estudio de archivos o Revisión de registros, sobre las

transacciones realizadas por la cooperativa.

Estudio de Documentación. Consulta a documentación sobre sistemas, aplicaciones Web,

lenguajes de programación orientados al entorno Web, ventajas y desventajas,

operacionabilidad, etc.

Page 24: Diseño De Aplicativo Web En Lenguaje Hipertext ...

24

6 Desarrollo De La Investigación

6.1 Identificar Los Principales Requerimientos Y Necesidades

Para identificar los principales requerimientos y necesidades de la cooperativa a impactar se

hace necesario seguir el siguiente proceso:

Fase De Planeación: En esta fase se realizaron las entrevistas con el gerente de la

Cooperativa Eco regional y Multiactiva Trabajar Juntos, para la obtención de la

información que fue registrada en las historias de usuario que sirvieron como base para que

el equipo de trabajo; determinara los requerimientos de la página Web y el planteamiento

de las tareas.

Historias De Usuario. Las historias de usuario son escritas por el cliente en un

lenguaje no técnico sin hacer mucho hincapié en los detalles, representan los requisitos de

la página web, contienen no más de dos frases. Las historias de usuario son usadas para

estimar los tiempos de desarrollo de la parte de aplicación.

Historia de usuario No 1: Aplicación web.

Nombre de historia: Aplicación en la web

Descripción: El programa que se desea desarrollar debe ser una página web que se

podrá acceder desde cualquier computador conectado a Internet.

Observaciones:

Historia de usuario No 2: Ingreso a la aplicación.

Nombre de historia: Ingresar al sistema

Descripción:

En la pantalla de bienvenida se cargarán los módulos y la conexión a la base de

datos, después el usuario digitará su login (o nombre de usuario) y contraseña que le

permitirán el acceso a las secciones del sistema dependiendo qué permisos le hayan sido

concedidos.

Page 25: Diseño De Aplicativo Web En Lenguaje Hipertext ...

25

Observaciones:

Historia de usuario No 3: Módulos de la aplicación.

Nombre de historia: Menú de Módulos

Descripción: El sistema mostrará un menú que permitirá identificar la actividad que

se quiere realizar es decir el ingreso a los diferentes módulos.

Observaciones: Los módulos son productos, clientes proveedores. Empleados

Historia de usuario No 4: Bases de datos de la aplicación.

Nombre de historia: Base de datos

Descripción: La base de datos que contendrá la información vital para el

funcionamiento de la cooperativa estará centralizada en un equipo servidor.

Observaciones:

Historia de usuario No 5: Cuentas de usuario.

Nombre de historia: Crear cuentas de usuario

Descripción: El sistema debe permitir la creación de cuentas de usuario. De cada

usuario se registrará la siguiente información: documento de identidad, nombres y

apellidos, login (o nombre de usuario), password (o contraseña) y nivel de acceso.

Observaciones: Esta es una funcionalidad de módulo usuarios.

Historia de usuario No 6: Perfiles de usuario

Nombre de historia: Perfiles de usuario

Descripción: Los perfiles de usuario que se instalen deben permitir crear son los

siguientes:

Administrador del Sistema: que debe tener acceso a todos los módulos del sistema y

permiso para crear eliminar y modificar en cualquier sección de este.

Auxiliar Administrativo: este usuario podrá utilizar todos los módulos del sistema,

excepto el de Seguridad. Se encargará de ingresar datos relacionados con todos los

movimientos de la cooperativa. Podrá modificar, pero no eliminar registros.

Page 26: Diseño De Aplicativo Web En Lenguaje Hipertext ...

26

Afiliado: este podrá tener el acceso a todos los módulos excepto al módulo de

seguridad (de uso exclusivo del administrador) únicamente podrá realizar consultas no se le

permitirá ingresar datos, ni modificar ni eliminar.

Observaciones: Esta es una funcionalidad de módulo usuarios.

Historia de usuario No 7: Consultar cuentas de usuarios.

Nombre de historia: Consultar cuentas de usuario

Descripción: El sistema debe permitir que se realicen las consultas de las cuentas

de usuario.

Observaciones: Esta es una funcionalidad de módulo usuarios.

Historia de usuario No 8: Modificar cuentas de usuario.

Nombre de historia: Modificar cuentas de usuario

Descripción: El sistema debe permitir que se modifique cualquiera de los datos de

las cuentas de usuario.

Observaciones: Esta es una funcionalidad de módulo usuarios.

Historia de usuario No 9: Eliminar cuentas de usuario.

Nombre de historia: Eliminar cuentas de usuario

Descripción: El sistema debe permitir que se realicen eliminaciones de las cuentas

de usuario. Esta funcionalidad será permitida solo para el usuario administrador.

Observaciones: Esta es una funcionalidad de módulo usuarios.

Historia de usuario No 10: Registrar formularios de afiliación.

Nombre de historia: Registrar Formularios de afiliación

Descripción: El sistema debe permitir la Registro de formularios de afiliación en

donde se ingresará la Información general, económica, financiera, de beneficiarios, de

tutores y cursos cooperativos. Observaciones: Esta es una funcionalidad de los módulos

afiliados.

Page 27: Diseño De Aplicativo Web En Lenguaje Hipertext ...

27

Observaciones: Esta es una funcionalidad de módulo de reportes. Los reportes se

Historia de usuario No 11: Consultar afiliados.

Nombre de historia: Consultar afiliados

Descripción: El sistema debe permitir realizar consultas de la información

registrada en los formularios de afiliación.

Observaciones: Esta es una funcionalidad del módulo afiliado.

Historia de usuario Número: 12: Reporte de afiliados

Nombre de historia: Reporte de afiliados

Descripción: El sistema permitirá al usuario configurar el reporte de afiliados según

se desee y ofrecer las opciones de impresión y almacenamiento del mismo.

Observaciones: Esta es una funcionalidad de módulo de reportes. Los reportes se

generarán con base a la información existente en la base de datos.

Historia de usuario Número: 13: Reporte de Productos

Nombre de historia: Reporte de Productos

Descripción: El sistema permitirá al usuario configurar el reporte de productos para

venta según se desee y ofrecer las opciones de impresión y almacenamiento del mismo.

Observaciones: Esta es una funcionalidad de módulo de reportes. Los reportes se

generarán con base a la información existente en la base de datos.

Historia de usuario Número: 14: Reporte de Proveedores

Nombre de historia: Reporte de Productos

Descripción: El sistema permitirá al usuario configurar el reporte de proveedores

para venta según se desee y ofrecer las opciones de impresión y almacenamiento del

generarán con base a la información existente en la base de datos

Historia de usuario Número: 15: Reporte de Empleados

Nombre de historia: Reporte de Empleados

mismo.

Page 28: Diseño De Aplicativo Web En Lenguaje Hipertext ...

28

Observaciones: Esta es una funcionalidad de módulo de reportes. Los reportes se

Descripción: El sistema permitirá al usuario configurar el reporte de Empleados

para venta según se desee y ofrecer las opciones de impresión y almacenamiento del

generarán con base a la información existente en la base de datos

Modelo De Datos: Un conjunto de normas que determinan las estructuras en las

cuales se van a almacenar los datos de una base de datos y los tipos de operaciones que se

van a realizar. El modelo de datos utilizado para la base de datos de TRABAJAR JUNTOS

es el modelo de base de datos relacional, que es un modelo de datos basado en la teoría de

conjuntos

El modelo de base de datos relacional utiliza una relación, que es una estructura

compuesta por filas llamadas tuplas y columnas llamadas atributos; los atributos se les

denominan campos y son propiedades o características del concepto que se va a almacenar

y las tuplas se les denomina registros y son los datos del concepto.

Figura 1. Mapa Mental Sobre La Estructura De La Base De Datos De La Página Web

mismo.

Page 29: Diseño De Aplicativo Web En Lenguaje Hipertext ...

29

6.2 Diseño del Aplicativo Web

En esta parte para la realización del diseño se hace necesario recurrir a una metáfora

del sistema, que describe o cuenta acerca de cómo funciona el sistema para cualquier

persona, tanto para usuarios como para el equipo de trabajo de desarrollo del sistema

puedan entender el objeto del software que se va a desarrollar.

Metáfora del Sistema. Estas son características generales que describen como será el

funcionamiento de la aplicación, definiendo tanto las características generales como las de

cada módulo. Es una aplicación orientada a la web que puede ser accedida desde cualquier

computador que esté conectado a internet. Funciona para cualquier cooperativa de pequeño

o mediano tamaño. Es necesario un equipo servidor para la instalación de la aplicación y de

la base de datos. Para la seguridad del manejo del uso de sistema se debe crear un control

de acceso a los usuarios especificando las restricciones a ciertas funciones del sistema

según el caso. Para todos los usuarios del sistema se presenta una ayuda que le servirá

como guía para hacer un uso adecuado de la funciones del sistema.

Características del módulo Clientes. Se permite la creación de clientes del sistema,

asignando los permisos respectivos para el ingreso y uso de la aplicación. Los clientes

pueden hacer consulta de los datos que ingresaron. Se hace un control sobre las

modificaciones de los datos y si se requiere la eliminación de los mismos.

Características del módulo proveedores. En este módulo se crea un formulario que

permita la obtención de la información del proveedor. Se puede modificar los datos de

proveedor ya registrado. Usando este módulo también se puede hacer la consulta de la

información ya registrada de cada proveedor por parte de los clientes. Es posible eliminar a

un proveedor ya registrado con anterioridad que ya no desee pertenecer a la cooperativa.

Características del módulo Productos. Este módulo permite el registro de productos

ofertados por la cooperativa. De ser necesario se podrá realizar cualquier modificación a los

productos. Se puede realizar la consulta sobre los productos de los proveedores por parte

Page 30: Diseño De Aplicativo Web En Lenguaje Hipertext ...

30

del cliente del sistema. También se puede eliminar los productos del proveedor que desee

retirarse.

Características del módulo Empleados. Este módulo permite el registro de los

empleados de la cooperativa. Se puede realizar cualquier modificación a la información

sobre los empleados, también se puede eliminar el record de los empleados que se retiran.

Características del módulo Seguridad. En este módulo se puede realizar la consulta

de la bitácora del sistema del día que se requiera. Se puede realizar copia de seguridad tanto

de la bitácora como de la base de datos para su posterior revisión. Se puede realizar la

restauración de copia de seguridad tanto de la bitácora como de la base de datos.

6.2.1 Secciones, contenido e Implementación

A continuación, se puede observar la distribución general de contenidos en la página

principal del sitio.

El diseño del sitio web cuenta con 5 secciones o áreas de información:

• Menú superior: Siempre visible

• Menú izquierdo: El menú de contenidos esta siempre visible. A la vez,

dependiendo de la sección del sitio web que se visite aparece un menú secundario, con las

opciones de navegación específicas para esa sección.

• Menú derecho: Solo visible en la página inicial

• Área de contenidos: Es el espacio principal de trabajo, aquí aparecen las

descripciones de los artículos o los formularios de trabajo.

• Pie de página: Siempre visible, principalmente provee opciones de contacto la

Cooperativa

La navegación por las distintas secciones del sitio web pretende ser intuitiva.

El formato de los documentos que se publican es generalmente PDF o Excel.

El caso de los PDF, en la página principal se incluye los enlaces para descargar

Adobe Reader, que es un programa gratuito para leer este tipo de archivos.

Page 31: Diseño De Aplicativo Web En Lenguaje Hipertext ...

31

En el caso de la publicación de videos se utiliza el formato FLV (Flash Video), por

lo que para su reproducción se requiere que el usuario tenga instalado Flash Player. El

instalador se incluye también en la página principal.

Descripción de Contenidos

Página de Inicio: En el caso de la página de inicio, en el área de contenidos se

presentan una frase de Bienvenida, junto a un esquema para iniciar sesión

Figura 2. Login del Usuario

Nos presenta la información de contacto con la Cooperativa, cabe señalar que es

importante indicar correctamente el correo electrónico de contacto para poder realizar una

buena gestión del cliente.

Menú Superior: Nos describe una breve historia de la Cooperativa detallando los

componentes de la cultura corporativa tales como Misión, Visión, Valores y Principios,

Page 32: Diseño De Aplicativo Web En Lenguaje Hipertext ...

32

Figura 3. Interfaz que muestra la historia

Mapa del Sitio: En la parte superior de la página encontramos los submenús, que

nos llevan a los diferentes apartados de la misma.

Figura 4. Interfaz en el módulo Administrador

Page 33: Diseño De Aplicativo Web En Lenguaje Hipertext ...

33

Si el administrador del Sitio Web desea agregar o quitar un cliente o un proveedor,

ingresa con su usuario y contraseña al Módulo y realiza los ajustes correspondientes

Figura 5. Interfaz Quitar o agregar un producto

Figura 6. Interfaz agregar clientes, productos y empleados

Page 34: Diseño De Aplicativo Web En Lenguaje Hipertext ...

34

En esta interfaz se podrá agregar o eliminar productos.

Figura 6. Interfaz agregar clientes

De igual manera se podrán agregar clientes, productos y empleados, como también

borrarlos tantas veces como sea necesario.

Figura 7. Interfaz Modificar productos, clientes y proveedores

Page 35: Diseño De Aplicativo Web En Lenguaje Hipertext ...

35

Llegando a esta interfaz se pueden modificar clientes que hayan actualizado sus

datos de contactos o productos que ya no estén en existencia. Finalmente mostrar la interfaz

de la cooperativa Coometrajun en su estado Inicial.

Figura 8. Interfaz página web Coometrajun.

Page 36: Diseño De Aplicativo Web En Lenguaje Hipertext ...

36

7 Conclusiones

Lo expuesto a lo largo de este trabajo nos permite llegar a las siguientes conclusiones:

La Cooperativa Eco regional y Multiactiva – Trabajar juntos, presentaba inconvenientes en

el poco reconocimiento en la región a pesar de estar ya legalmente constituida y con

variedad de productos ya en venta, por lo tanto, diseñe esta página Web que mejora la

relación con sus clientes actuales y los potenciales, ya que, mediante esta, se podrá entrar

en contacto con el cliente de una manera más fácil. A tan solo un click de distancia, se

podrá acceder a productos e información relacionada con la cooperativa, que era la

problemática más grande que se tenía en la cooperativa, el presupuesto de los miembros de

la cooperativa se va a ver altamente beneficiado, ya que la inversión fue mínima en

comparación a los beneficios que se obtendrán, esta página Web tiene el fin de facilitar

ventas y colaborar a campesinos de la región en poder superar las expectativas de venta de

sus productos, se realizó con gran cariño y dedicación a personas que se lo merecen.

Page 37: Diseño De Aplicativo Web En Lenguaje Hipertext ...

37

8 Referencias

Castells, M. (2000). Internet y la sociedad red. Catalunya: Universitat Oberta.

Cobo, A., Gómez, P., Pérez, D., & Rocha, R. (2005). PHP y MySQL: Tecnología para el

desarrollo de aplicaciones web. España: Ediciones Díaz de santos.

Codina, L. (2000). Métodos de Información. Madrid: Tauro ediciones.

Dans, E. (2007). La Empresa Y la web 2.0. Marketing y ventas, 7.

Hernández, M. (2008). Sociedad de la informació: internet, poder y sociedad civil. Revista

Venezolana de Análisis de Coyuntura, 195-215.

https://secure.php.net/manual/es/index.php. (2018). Manual de PHP. Estados Unidos: My

PHP.net.

Iazza, Y. H. (2004). Diseño Web centrado en el usuario: usabilidad y aruitectura de la

información. hipertext.net, 4.

Narváez, V. P. (2006). Metodología de la investigación cientifífica y bioestadística.

Santiago: Ril® editores.

Piwonka, A. (1996). Internet en Acción. Santiago de Chile: MacGraw-Hill.

Strauss, A., & Corbin, J. (2002). Bases de la investigación cualitativa; técnicas y

procedimientos para dsesarrollar la toría fundamentada. Medellín: Editorial

Universidad de Antioquia.

Thompson, I. (2006). Definición de marketing. Definición de marketing, 1.