tesina creación de sistemas web para empresas...

UNIVERSIDAD POLITÉCNICA DE SINALOA

PROGRAMA ACADÉMICO DE INGENIERÍA EN INFORMÁTICA

TESINA

Creación de Sistemas Web para Empresas

Locales

PRESENTADO POR:

Jesús García Guevara

Para obtener la acreditación de las estadías profesionales y contar con

los créditos para el grado de Ingeniero Informática.

ASESOR ACADÉMICO

M.C Ramón Patricio Velázquez

ASESOR EN ORGANISMO EXTERNO

Ing. Ricardo Anguiano Guerrero

Mazatlán, Sinaloa 06 de diciembre de 2014.

1

Agradecimientos

Quiero dar el más grande a todas las personas que colaboraron y ayudaron en la

realización de mis estudios, es especial a mis padres que día con día me

brindaron su apoyo para poder seguir estudiando y me inculcaron los valores que

me permitieron ir mejorando a cada momento hasta el punto de tener lo requerido

para poder competir en el ámbito profesional.

Otro agradecimiento que quiero aprovechar para dar es hacia mis maestros, los

cuales diariamente cumplieron con la labor de brindarme el conocimiento tanto

académico como ético. Agradecimiento especial a las personas que trabajan en la

Universidad Politécnica de Sinaloa, sin su esfuerzo y dedicación no se podría

contar con una Institución Educativa de tal Nivel.

Por ultimo un especial agradecimiento a las empresas que me permitieron realizar

ya sea procesos de estadías o estancias en sus instalaciones y a la gente que en

ellas labora y laboraba en el momento en el que asistí a las antes mencionadas.

2

Índice Temático

Agradecimientos ................................................................................................................................. 1

Índice Temático ................................................................................................................................... 2

Resumen .............................................................................................................................................. 4

Abstract ............................................................................................................................................... 4

Índice de Imágenes ............................................................................................................................. 5

Introducción ........................................................................................................................................ 6

Índice de Tablas ................................................................................................................................... 7

1. Antecedentes. ................................................................................................................................ 8

1.1. Localización ............................................................................................................................. 8

1.2. Objetivos .................................................................................................................................. 9

1.2.1. Misión ............................................................................................................................... 9

1.2.2. Visión ................................................................................................................................. 9

1.3. Organigrama de la Empresa. .................................................................................................. 10

1.4. Planteamiento del Problema.................................................................................................. 11

1.5. Objetivos ................................................................................................................................ 12

1.5.1. Generales ........................................................................................................................ 12

1.5.2. Particulares ...................................................................................................................... 12

1.6. Preguntas de Investigación .................................................................................................... 13

1.7. Hipótesis ................................................................................................................................. 13

1.8. Limitaciones y Supuestos ....................................................................................................... 14

1.9. Relevancia .............................................................................................................................. 14

2. Estado del Arte. ............................................................................................................................. 15

3. Diseño y Desarrollo. ...................................................................................................................... 22

3.1. Diseño .................................................................................................................................... 22

3.2. Desarrollo .............................................................................................................................. 24

3.2.1. Desarrollo de Modulo de Productos y Categorías para Sistema de Ventas. .................. 24

3.2.2. Desarrollo de Motor de Búsqueda para Sitio Web de Transportistas. ........................... 29

3.2.3. Modulo de Reportes para Sistema de Ventas. ................................................................ 33

3.2.4 Análisis y Corrección de Sitio Web de venta de boletos. ................................................. 35

3

3.2.5 Creación de Modulo de Nutriólogos para Sitio de Ventas de Mariscos. ......................... 37

3.2.6 Implementación de Web Service en Sitio de Administración. ......................................... 39

3.2.7 Creación de Página Landing para Venta de Casas. ........................................................... 40

Resultados y Discusión ...................................................................................................................... 47

Conclusiones ..................................................................................................................................... 48

Bibliografía ........................................................................................................................................ 49

Glosario ............................................................................................................................................. 50

4

Resumen

Durante mi periodo de estadías tuve la oportunidad de participar activamente en el

desarrollo de diversos sitios web, entre estos sitios web creados los más

importantes pueden considerarse la creación de un módulo informático que

permite a usuarios crear reportes en documentos de Excel, otro gran proyecto

realizado fue la elaboración de un motor de búsqueda dentro de un sitio de

administración de transportistas y transportes, que brinda a los usuarios la

capacidad de hacer un filtrado de los transportes para ver cuales están disponibles

en el momento requerido y cuales cuentan con las características que el usuarios

requiere. Otra de las actividades realizada fue el proceso de revisión de un sitio

web, para luego procederse con la elaboración de un reporte del mismo y

finalmente la corrección de los antes mencionados, dicha corrección debe

hacerse en un periodo ya preestablecido de tiempo.

Abstract

During my stays period, I had the chance to participate in the development process

of several web sites, one of these web sites that was created can be considered

the creation process of a Reporting Module that’s allows users the creation of

reports that are saved in Excel files. Another great project that was made was the

elaboration of a search engine for web site for truckers and trucks that offer to the

users the capacity to make a filter of the trucks that coincide with the information

that user gives to the web site to see what trucks are available in the required

moment and what matches with the characteristics that the user are finding. Other

activity performed was the inspection of a ticket seller web site, for later make a

report of the error found and for the end the last activity was to correct those errors.

5

Índice de Imágenes

Imagen 1. - Mapa con localización y foto de la empresa .................................................................... 8

Imagen 2.- Organigrama de la Empresa ............................................................................................ 10

Imagen 3.- Logo HTML 5.................................................................................................................... 16

Imagen 4.- Logo PHP ......................................................................................................................... 17

Imagen 5.- Logo JavaScript ................................................................................................................ 17

Imagen 6.- Logo CSS 3 ....................................................................................................................... 18

Imagen 7.- Logo CakePHP.................................................................................................................. 19

Imagen 8.- Logo CodeIgniter ............................................................................................................. 20

Imagen 9.- Logo ZendFrameWork ..................................................................................................... 20

Imagen 10.- Estadísticas de uso de acceso a internet desde diferentes dispositivos en México. .... 21

Imagen 11.- CakePHP ........................................................................................................................ 22

Imagen 12.- Logo Jira ........................................................................................................................ 22

Imagen 13.- Logo SQLyog .................................................................................................................. 23

Imagen 14.- Logo Tortoise SVN ......................................................................................................... 23

Imagen 15.- Logo FireBug .................................................................................................................. 23

Imagen 16.-Front-End de vista de agregar productos de sistema de ventas. ................................... 27

Imagen 17.- Motor de Búsqueda Sitio de Transportistas ................................................................. 31

Imagen 18.-Mensaje mostrado en caso de no encontrar resultados. .............................................. 31

Imagen 19.-Front-End de Sistema de Venta de Boletos ................................................................... 35

Imagen 20.-Vista de agregar Artículos de Sistema de Venta de Boletos. ......................................... 36

Imagen 21.-Módulo de alta de Productos de Sitio de Ventas de Mariscos. ..................................... 38

Imagen 22.- Modulo de Creación de Landings Bloque Principal ....................................................... 42

Imagen 23.-Modulo Creación de Landings Bloque de Información .................................................. 43

Imagen 24.-Formulario de Laning ..................................................................................................... 45

Imagen 25.-Modulo de Información del Landing .............................................................................. 46

6

Introducción

En la actualidad la experiencia profesional es un factor muy importante al

momento de competir en el mundo laboral, ya que la mayoría de las empresas

optan por decantarse hacia los aspirantes que poseen una mayor cantidad de

tiempo desempeñándose en el área requerida. Los estudiantes nos encontramos

en una situación que demanda una gran cantidad de nuestro tiempo diario es por

eso que nos es difícil tomarnos el tiempo para obtener dicha experiencia. La

manera más fácil y accesible que un estudiante tiene para poder tener acceso a

ganar algo de experiencia profesional es mediante el proceso de estadías.

El proceso de estadías permite laborar a un estudiante en una empresa, dándole

al estudiante una valiosa oportunidad de aprender cómo se maneja el entorno

profesional. Es por eso que se considera importante elegir una empresa que se

adapte al área de estudio.

Como conclusión al antes mencionado proceso de estadías se debe de entregar

un documento conocido como Tesina, en mi caso en este documento presentare

una Tesina sobre el proceso de Estadías que realice en la empresa Solemti de

Mazatlán.

7

Índice de Tablas

Tabla 1.-Tabla de Tabla Productos de Base de datos de Sistemas de Ventas. ................................. 25

Tabla 2.-Tabla de Etiquetas de Base de datos de Sistemas de Ventas. ............................................ 25

Tabla 3.-Tabla de Etiquetas_Productos de Base de datos de Sistemas de Ventas. .......................... 26

Tabla 4.-Tabla de Tallas de Base de datos de Sistemas de Ventas. .................................................. 26

Tabla 5.-Tabla de Tallas_Productos de Base de datos de Sistemas de Ventas. ................................ 26

Tabla 6.- Tabla de Categorías de Base de datos de Sistemas de Ventas. .......................................... 28

Tabla 7.-Tabla de Categorías _Productos de Base de datos de Sistemas de Ventas. ....................... 28

Tabla 8.- Tabla Nutriólogos de Sitio de Venta de Mariscos .............................................................. 37

8

1. Antecedentes.

Solemti de Mazatlán es una empresa dedica al desarrollo de Sistemas Web,

Solemti cuenta con una plantilla de trabajadores de más de 10 personas y ha

desarrollado Sistemas Webs para muchas empresas ya sea de Mazatlán y

foráneas, en la actualidad cuenta con más de 7 años de experiencia, entre los

servicios que Solemti presta:

-Consultoría web.

-Servicio de soporte.

-Asesoría en Redes Sociales.

1.1. Localización

Dirección:

Av. Rafael Buelna #202 B3

Col. Hacienda Las Cruces 82126

Mazatlán, Sinaloa, México

Tel. (669) 981-03-57

Imagen 1. - Mapa con localización y foto de la empresa

9

1.2. Objetivos

Ofrecer productos de calidad que tienen como objetivo el representar un valor

agregado para nuestros clientes, esto a través del uso de tecnología de punta,

contando con conocimientos en el área de posicionamiento y una herramienta de

edición de contenido novedosa.

1.2.1. Misión

Ser los mejores: ofreciendo soluciones Web Innovadoras, superando las

expectativas de nuestros clientes nacionales e internacionales mediante un equipo

comprometido y capacitado en el uso adecuado de tecnologías de información,

siempre buscando crear una ventaja competitiva a nuestros clientes

1.2.2. Visión

Ser preferidos y reconocidos a nivel nacional por el desarrollo de productos y

servicios Web innovadores, propios y de nuestros clientes, con una fuerte

participación en el mercado internacional siempre ofreciendo un ambiente de

trabajo que motive el desarrollo humano y profesional.

10

1.3. Organigrama de la Empresa.

Imagen 2.- Organigrama de la Empresa

11

1.4. Planteamiento del Problema

Las diferentes empresas que se presentaban como clientes de Solemti solicitaban

la generación de un Sistema Web, dichos sistemas están compuestas por partes

funcionales llamadas módulos, los cuales están a su vez compuestos por

funciones, la principal tarea que se me fue planteada en la empresa era la

realización de los módulos y/o funciones que eran parte de los sistemas que las

empresas solicitaban.

Para la realización de las actividades solicitadas se planteaba un límite de tiempo,

el cual debía cumplirse de una manera muy exacta y de ser posible se tenían que

terminar en un tiempo antes del estimado. Siguiendo con el proceso de

elaboración de módulos, para realizarlos era necesario el uso de herramientas de

software específico, dichos software requerían ser de una versión específica.

Como punto final los módulos deben ser probados varias veces hasta asegurarse

que estos estén libres de errores y que los recursos que estos consumen son los

mínimos con los que la función del programa se cumple de una manera correcta,

además de esto es necesario que el cliente de su punto bueno para que el trabajo

sea catalogado como completo.

12

1.5. Objetivos

1.5.1. General

Elaboración de diversos Sistemas Webs para empresas locales que cumplan con

los requisitos que estas solicitan.

1.5.2. Particulares

Desarrollo de Modulo de Productos y Categorías, así la creación de una

relación entre ambo como para Sistema de Ventas.

Desarrollo e Implementación de un Motor de Búsqueda para Sitio Web de

Transportistas que permitiera a los usuarios buscar los transportes

disponibles.

Creación de un Módulo de Reportes de Prospectos para su Implementación

en un Sistema de Ventas.

Realización de un Análisis y una Corrección a un Sitio Web especializado

en la Venta de Boletos.

Creación de Modulo para la Administración de Nutriólogos para un Sitio de

Ventas de Mariscos.

Implementación de un Web Service para la carga automática de plazas y

promotores en un Sitio de Administración.

Creación de Página Landing para Sistema de Venta de Casas.

13

1.6. Preguntas de Investigación

1. ¿Cómo desarrollan los Módulos de un Sistema Web y como se

relacionan entre sí para un sistema Web?

2. ¿Cómo funcionan los Motores de Búsqueda de los Sitios Web?

3. ¿Qué se necesita para realizar reportes dentro de un Sistema Web?

4. ¿Cuáles son los pasos para la revisión y corrección de errores de un

Sistema Web ya establecido?

5. ¿Cómo implementar en un Sistema Web un Módulo para la

administración de Nutriólogos?

6. ¿Cómo se realiza la implementación de un Web Service y cómo se

maneja la información obtenida mediante este?

7. ¿Cuál es el procesamiento para la realización de una Pagina Landing?

1.7. Hipótesis

Mi principal motivo para elegir esta empresa fue el hecho de que la programación

Web fue el ámbito que considere mejor durante mis estudios en la universidad, es

por eso que como previsto tenía el mejoramiento de mis habilidades en la

programación Web, así como la participación con fin de aprendizaje en una rama

de la empresa encarda de la elaboración de aplicaciones para dispositivos

móviles.

La empresa de Solemti está dada principalmente al enfoque Web, es por eso que

lo esperado por mí al presentar mi proceso de estadías en sus instalaciones era

que se me capacitara y se me asignaría de manera personal y exclusiva a la

elaboración de Sistemas Web completos, por lo menos 1 o 2 debido a la corta

duración del proceso, además de esto, yo estaba en la idea de que se me

permitiría utilizar las herramientas que fueran más de mi agrado siempre y cuando

cumplieran con el objetivo de los proyectos.

14

1.8. Limitaciones y Supuestos

-Duración de tiempo de solo 3 meses del proceso de estadías.

-Poca experiencia en la utilización de las herramientas necesarias.

-Falta de experiencia laboral.

-Carencia de Computadora Portátil Personal.

-Carencia de Transporte Personal.

-Procesos de estancia anteriores realizados en empresas de índole diferente a la

actual.

1.9. Relevancia

Los proyectos realizados cuentan con una relevancia de alto grado ya que afectan

la imagen tanto de la empresa Solemti como de sus clientes, las empresas a las

cuales se les diseñan los sistemas sufren un cambio drástico en la manera en que

se realizan sus procesos y en la manera en cómo interactúan con sus clientes y el

alcance que estas obtienen, además de disminuir severamente la cantidad de

recursos que la empresa cliente necesita invertir en sus procesos.

Para mí como estudiante los proyectos tienen una gran relevancia ya que me

permiten desenvolverme de manera profesional en un ámbito laboral sumamente

competitivo lo cual mejora significativamente la manera que poseo de realizar las

cosas. Además los conocimientos y técnicas que se requieren para los proyectos

son de una importancia mayor ya que me acompañaran el resto de mi vida

permitiéndome solucionar futuros problemas en base a ellos.

15

2. Estado del Arte.

Una aplicación web es cualquier aplicación que es accedida vía web por una red

como internet o una intranet. En la actualidad es sumamente importante que cada

empresa cuente con su propia página web, derivando en frases como “Si no estás

en la web no existes”, entre otras.

En la actualidad la importancia del diseño web puede considerarse debido a que

ofrecen a las empresas los siguientes beneficios:

- Alcance Mundial de los productos y servicios ofrecidos: Esto se debe a

que cualquier persona en cualquier parte del mundo puede acceder a ella

siempre y cuando cuente con Internet.

- Competición con las empresas más grandes: En el medio de Internet su

sitio web será comparable con el de las más grandes empresas a nivel

mundial.

- Disponibilidad las 24 horas del día, los 365 días del años: Siempre y

cuando el servidor donde está alojado su sitio web se mantenga

funcionando correctamente, su sitio web permanecerá generando

ganancias para su negocio.

- Reducción en Costos Corporativos: Los sitios web permiten a las

empresas ahorrar una gran cantidad de recursos, principalmente en el área

de telefonía, ya que la comunicación con el cliente puede hacerse

directamente mediante el sitio web, además reduce la cantidad de personal

requerido.

- Brinda una Imagen más Profesional: El contar con un sitio hace que los

clientes consideren seria a una empresa.

16

- Multiplataforma: Los sitios web pueden ser visualizados en diversos

dispositivos.

El diseño web consiste en la planificación, desarrollo e implementación de

aplicaciones web, en la actualidad existen miles de alternativas en cuanto a diseño

web, ya que esta integra diferentes lenguajes de programación, así como

diferentes herramientas y entornos de trabajos que facilitan el uso de los

anteriores, entre los lenguajes de programación más utilizados en la actualidad se

encuentran:

Lenguaje HTML

Imagen 3.- Logo HTML 5

Es un lenguaje estático para el desarrollo de sitios web (acrónimo en inglés

de HyperText Markup Language, en español Lenguaje de Marcas de

Hipertexto). Desarrollado por el World Wide Web Consortium (W3C). Este

es un lenguaje de solo vista, ya que solo permite mostrar elementos, no

permitiendo realizar operaciones ni funciones con dichos elementos. El

lenguaje HTML se utiliza principalmente para crear la estructura principal de

la aplicación web[1].

17

Lenguaje PHP

Imagen 4.- Logo PHP

PHP es un lenguaje de programación de uso general de código del lado del

servidor originalmente diseñado para el desarrollo web de contenido

dinámico. El uso de lado del servidor significa que las aplicaciones hechas

en este lenguaje se ejecutan en un servidor y para poder ejecutarlas se

necesita acceso a un servidor PHP[2].

Lenguaje JavaScript

Imagen 5.- Logo JavaScript

Es un lenguaje interpretado, es decir que puede ejecutarse en cualquier

plataforma, además de esto es orienta a objetos lo que quiere decir que

trata a los programas como conjuntos de objetos que se ayudan entre ellos

para realizar acciones[3].

18

Lenguaje CSS

Imagen 6.- Logo CSS 3

Es un lenguaje usado para definir la presentación de un documento

estructurado escrito en HTML o XML, es decir que este sirve para cambiar

la manera en cómo se visualizan los elementos de HTML. Este lenguaje se

utiliza en el llamado Front-End de la página web[4].

19

Además de los lenguajes de programación también se pueden utilizar

herramientas llamadas frameworks las cuales hacen más fácil el trabajo,

permitiéndonos ser más eficientes a la hora de escribir el código. Ente los

principales frameworks se encuentran:

CakePHP

Imagen 7.- Logo CakePHP

Este framework se utiliza para el desarrollo de aplicaciones basadas el

lenguaje PHP, es uno de los llamados modelo-vista-controlador, este

separa los datos y la lógica de negocio de una aplicación de la interfaz de

usuario y el módulo encargado de gestionar los eventos y las

comunicaciones. CakePHP se encuentra actualmente en la versión 2.5.6 y

es distribuido por la empresa Cake Software Fundation y es considerado

como un software de distribución libre[5].

20

CodeIgniter

Imagen 8.- Logo CodeIgniter

Es un framework de programación PHP el cual al igual que CakePHP

pertenece a los llamados modelo-vista-controlador, es considerado como

un software de licencia libre, en la actualidad se encuentra en la versión 2.2

y es desarrollado por el Instituto de Tecnología de la Columbia Británica[6].

Zend Framework

Imagen 9.- Logo ZendFrameWork

Al igual que los anteriores es un framework de PHP que al igual que los

anteriores, utiliza el modelo vista controlador y es de distribución libre, se

encuentra en la versión 2.0.6[7].

21

Hablando acerca de algo esencial para el éxito de los sitios web, este es el

internet, el internet permite a los dispositivos el acceso a aplicaciones web

guardadas en servidores remotos, el crecimiento del internet ha permitido la

proliferación de los sitios web, pero debido a que el internet puede ser accedido

desde diferentes tipos de dispositivos, cada uno con características específicas,

esto ha creado una nueva necesidad, la cual es la de que el sitio web pueda

adaptarse a las características específicas de cada dispositivo que acceda a ella,

esta característica se conoce como responsividad y está tomando más relevancia

día con día.

Imagen 10.- Estadísticas de uso de acceso a internet desde diferentes dispositivos en México.

22

3. Diseño y Desarrollo.

3.1. Diseño

La elaboración de sitios web en la empresa sigue un proceso detallado, en el cual

las actividades son asignadas mediante un software especializado, en el cual

cuenta con una función para que se le pueda establecer un tiempo a la actividad,

dicho tiempo es un estimado de terminación del trabajo.

Las herramientas utilizadas durante el periodo fueron:

CakePHP

Imagen 11.- CakePHP

Es un framework de desarrollo en lenguaje php. Este fue utilizado para la creación

de los sitios web, de todas las herramientas utilizadas esta fue la más importante,

prácticamente todo el código se realizaba en él.

Jira

Es un gestor de proyectos que permite a los equipos planificar, construir y finalizar

grandes proyectos. Jira fue principalmente utilizado para la asignación de tareas

así como el monitoreo del progreso y tiempo total implementado de las mismas[8].

Imagen 12.- Logo Jira

23

SQLyog

Imagen 13.- Logo SQLyog

Software especializado en el manejo de base de datos de formato SQL, este

software fue usado para manejar las bases de datos usados por los programas.

Tortoise SVN

Imagen 14.- Logo Tortoise SVN

Software especializado en el manejo de versiones. Este fue utilizado para el

control de las versiones de los archivos del sistema web. Este permitió trabajar a

todos los implicados en el mismo proyecto sin afectarnos unos a otros[9].

Firebug

Extensión de Motzilla Firefox creada y diseñada especialmente para

desarrolladores y programadores web. Es un paquete de utilidades con el que se

puede analizar, editar, monitorizar y depurar el código fuente, CSS, HTML y

JavaScript de una página web de manera instantánea de una manera liviana[10].

Imagen 15.- Logo FireBug

24

3.2. Desarrollo

3.2.1. Desarrollo de Modulo de Productos y Categorías para Sistema de

Ventas.

La primera actividad asignada fue la construcción de un módulo de productos y

uno para categorías, dichos módulos son partes de un sistema web que cumplen

con una función específica, tanto el módulo de productos como el de categorías

debían contar con las siguientes funciones:

Agregar: En esta parte se agregaban los nuevos productos, así como

datos que en si no se guardaban en la misma tabla de base de datos que

productos, tales como etiquetas y tallas.

Editar: En esta función se realizaba la tarea de modificar un registro

previamente agregado.

Ver: Esta función permite ver la información completa de un producto o

categoría ya antes agregado.

Eliminar: Esta función elimina de manera permanente e irreversible un

registro de la base de datos.

Dar de baja: Esta función es parecida a la de eliminar, pero a diferencia de

ella esta no elimina el registro de la base de datos, sino que solo cambia su

estatus para que el sistema lo tome como si no estuviera.

Agregado a esto el módulo de categorías fue realizado con la peculiaridad de que

las categorías son guardadas en un es que de tipo árbol es decir, que cada

categoría puede depender de otra y a su vez puede tener como dependientes a

otras categorías, implicando esto que si se elimina a una categoría, todas sus

categorías dependientes deben ser eliminadas también.

Para la realización de el modulo fue necesaria la inclusión de diferentes tablas en

la base de datos del proyecto. Las tablas tuvieron que ser diseñadas tomando en

cuenta que el modulo productos requería que se le pudiera relacionar con otros

dos modelos del sistema, etiquetas y tallas.

25

Tabla Productos.

Tabla 1.-Tabla de Tabla Productos de Base de datos de Sistemas de Ventas.

Dato Tipo Longitud Descripción

Id Int 11 Campo cuya función es la de almacenar una clave única

que sirve como identificador para distinguir a los

diferentes registros.

Nombre Varchar 50 Campo que almacena el nombre dado al producto que se

encuentra en el registro.

Descripción Text -- Guarda una descripción detallada sobre las

características del registro.

Marca Varchar 50 Guarda la información de la marca del producto.

Mayoreo Float Tiene como función almacenar el número de productos

que se requieren comprar para considerarse mayoreo.

Estatus Int 11 Dice si el registro está activo o si ha sido dado de baja.

Created_by Int 11 Guarda el Id del usuario que creo el registro.

Modified_by Int 11 Guarda el Id del ultimo usuario que realizo una

modificación.

Created Date Guarda la fecha en la que el registro fue creado.

Modified Date Guarda la fecha de la última modificación del registro.

Tabla de Etiquetas.

Tabla 2.-Tabla de Etiquetas de Base de datos de Sistemas de Ventas.


Id Int 11 Campo cuya función es la de almacenar clave de registro.

Descripción Varchar 50 Guarda el nombre de la etiqueta.


Modified_by Int 11 Guarda el Id del usuario que realizo una modificación.



26

Tabla de Etiquetas_Productos.

Tabla 3.-Tabla de Etiquetas_Productos de Base de datos de Sistemas de Ventas.



Producto_id Int 11 Guarda a clave del producto a enlazar con la etiqueta.

Etiqueta_id Int 11 Guarda la clave de la etiqueta a enlazar con el producto.

Tabla de Tallas.

Tabla 4.-Tabla de Tallas de Base de datos de Sistemas de Ventas.


Id Int 11 Campo cuya función es la de almacenar clave de

registro.

Descripción Varchar 50 Guarda el nombre de la talla.

Precio Float Almacena el precio de la talla.

Precio_Mayoreo Float Almacena el precio de la talla al mayoreo.



modificación.



Tabla de Tallas_Productos.

Tabla 5.-Tabla de Tallas_Productos de Base de datos de Sistemas de Ventas.



Talla_id Int 11 Guarda a clave del producto a enlazar con la talla.

Producto_id Int 11 Guarda la clave de la etiqueta a enlazar con el producto.

27

La realización de este módulo se estableció en un plazo de una semana hábil (5

días) y fue realizada con un sin número de validaciones cuidando la data que se

ingresa en la base de datos y que la información se guarda es congruente en

todas las tablas y registros involucrados.

Imagen 16.-Front-End de vista de agregar productos de sistema de ventas.

28

Tabla Categorías.

Tabla 6.- Tabla de Categorías de Base de datos de Sistemas de Ventas.


Id Int 11 Campo cuya función es la de almacenar una clave

única que sirve como identificador para distinguir a

los diferentes registros.

Descripción Varchar 50 Campo que almacena el nombre dado a la categoría

que se encuentra en el registro.

Left Text -- Categoría anterior en el Esquema de árbol.

Right Varchar 50 Categoría siguiente en el Esquema de árbol.

Categoria_Padre Float Almacena el id de la categoría de la cual el registro

es dependiente.

Estatus Int 11 Dice si el registro está activo o si ha sido dado de

baja.



modificación.



Tabla de Categorias_Productos.

Tabla 7.-Tabla de Categorías _Productos de Base de datos de Sistemas de Ventas.



Categoria_id Int 11 Guarda a clave del producto a enlazar con la categoría.

Producto_id Int 11 Guarda la clave de la etiqueta a enlazar con el producto.

29

3.2.2. Desarrollo de un Motor de Búsqueda para Sitio Web de Transportistas.

Esta actividad trato de la construcción de un módulo el cual cuya función principal

es que las personas externas que están en búsqueda de un servicio de

transportes pudieran tener acceso al módulo para ingresar información y obtener

respuesta de si existe un transporte disponible. La elaboración de este módulo

requirió de una gran cantidad de condiciones las cuales eran cargadas con los

datos que el usuario ingresaba en el Front-End del módulo. Los filtros con los que

se hizo contar al motor de búsqueda son los siguientes:

Estado Origen/Destino

Se programó en un objeto del tipo listbox, su función es la de al

seleccionarse un estado de los que se desplegaban en la lista, otro listbox

cargaba todas las ciudades de la base de datos las cuales tuvieran

asignado como estado al estado que en ella se seleccionó, la información

que este filtro enviaba hacia la función de filtrado no era de ninguna utilidad

para dicha función, sirviendo este elemento solo para la carga del otro

listbox, dicha carga fue realizada con una función en AJAX, la cual permitía

llenar el otro listbox sin tener que refrescar la página actual.

Ciudad Origen/Destino

Al igual que el anterior este filtro se programó como un listbox, dicho

listbox aparece como vacío al momento de entrar al módulo y permanece

así hasta que se realiza una modificación en el listbox de Estado Origen,

con lo cual en este elemento se cargan los datos de todas las ciudades

registradas pertenecientes a dicho estado, al mandar este filtro con un valor

los registros que se encuentren en la base de datos cuya ciudad sea la

misma que la mandada.

30

Tipo de Material

Este filtro fue diseñado como un elemento de tipo listbox que permite al

usuario seleccionar uno de los tipos de materiales de los cuales puede

transportar un camión, fue puesto con el fin de que los usuarios pudieran

filtrar los transportes que tengan la capacidad de transportar las mercancías

que el cliente requiere.

Tipo de Camión

Este filtro fue diseñado como un elemento de tipo listbox que permite que el

usuario seleccione el tipo de camión que necesita para realizar el transporte

de su carga.

Tipo de Material a transportar

Este filtro fue diseñado como un elemento de tipo listbox que permite que el

usuario seleccione el tipo del material que este tiene la necesidad de

transportar, para que así el sistema pueda devolverle la información que

este requiere.

Fecha de Inicio/Fecha Final

Estos filtros se presentan al cliente como un elemento del tipo calendario,

el cual permite al cliente seleccionar la fecha tanto de salida del camión así

como la fecha en que este llegara a su destino. Estos filtros cuentan con la

peculiaridad de que ambos no pueden enviarse vacíos al mismo tiempo, es

decir que el usuario debe por lo menos enviar ya sea la fecha de llegada o

la fecha de salida.

31

Otra parte importante del motor de búsqueda realizada es la parte del mostrado de

los elementos que se traen como resultados, los resultados fueron programados

para mostrarse en forma de una lista, dicha lista es mostrada abajo del buscador

siempre y cuando se encuentre al menos un registro que coincida con los

parámetros que el usuario ingreso, en caso de que ningún requisito coincida con

los parámetros ingresados, se ha programado la función para que despliegue un

mensaje de resultados no encontrados.

Imagen 18.-Mensaje mostrado en caso de no encontrar resultados.

Imagen 17.- Motor de Búsqueda Sitio de Transportistas

32

Como otro punto en este módulo se encuentra los ordenadores de la lista de

resultados, los cuales son elementos del tipo hipervínculo, los cuales permiten al

usuario ordenar los resultados obtenidos de la búsqueda en torno a un elemento

de la misma. Los ordenadores de la búsqueda que se procedió a agregar fueron:

Tipo de Camión

Organiza los resultados dependiendo del tipo de camión que sea el

elemento del registro.

Material

Organiza los resultados dependiendo del material que pueda transportar el

elemento del registro.

Periodo

Este organizador fue programado con la función de organizar los resultados

dependiendo de su fecha de salida tanto como de su fecha de llegada.

33

3.2.3. Modulo de Reportes para Sistema de Ventas.

Este es el modulo que presento el mayor grado de complejidad debido a la

multitud de filtros que necesitaba, la función principal del módulo es la generar

registros de información extraída de la base de datos, se debería de contar con la

capacidad para filtrar los datos mediante los siguientes parámetros:

Proyecto

Este filtro fue programado como un conjunto de elementos checkbox que se

generan automáticamente con la información de los proyectos que se

extrae de la base de datos, además, por requerimientos se agregó un

checkbox extra con la opción de todos los proyectos, cuya función es la de

que si este es seleccionado, la función de filtro ignora la información traída

de los demás elementos checkbox de proyectos y realiza la búsqueda sin

poner ningún filtro de proyectos.

Fecha Inicio/Fin

Este filtro a diferencia del anterior se compone de dos elementos del tipo

calendario, los cuales permiten seleccionar una fecha concreta, ambos

campos son tomados como obligatorios, y su función es la de definir el

periodo de las fechas de los cuales se debe traer los registros.

Creado/Modificado

Al igual que el filtro de proyecto este se compone de checkbox, pero a

diferencia de aquel este no se genera dinámicamente, su función es darle al

usuario la opción de si quiere traer los registros que fueron creados o

modificados en el rango de fecha especificado en el filtro de Fecha Inicio y

Fecha Fin.

34

Como otra característica demandada para este módulo se incluyó un botón

cuya función permite al usuario del sistema guardar la información obtenida

de la búsqueda en un archivo de formato .xls, dicho archivo cuenta con la

característica de descargarse como adjunto en el navegador, siendo otro

punto importante a resaltar que el archivo creado contaba con los mismos

formatos de tablas que el reporte visualizado en el navegador. Para la

creación de dicha función fue necesaria la inclusión de varias clases

externas al framework usado.

Cabe mencionar que el reporte generado por el módulo entregaba al

usuario no solo los registros que este solicitaba, si no también calculaba y

mostraba los totales de los registros por proyecto, y generaba una tabla

para cada proyecto, en el caso del pase a .xls, este convierte cada tabla

generada a los proyectos en una hoja de cálculo, generando aparte otra

hoja de cálculo en el mismo archivo para la inclusión de los totales.

35

3.2.4 Análisis y Corrección de Sitio Web de venta de boletos.

Esta actividad consistió en la examinación minuciosa y total de un sitio web

previamente desarrollado por la empresa, la cual se encontraba en fase de

pruebas, la revisión duro aproximadamente un periodo de 2 días en los cuales los

errores encontrados en ella se registraban. Una vez terminada la revisión, se me

fue asignada la tarea de la corrección de los errores encontrados, la mayoría de

los reportes encontrados son catalogados como errores menores de fácil

corrección.

Imagen 19.-Front-End de Sistema de Venta de Boletos

36

Un punto difícil con este proyecto fue el hecho de que el mismo se encontraba en

un idioma diferente al momento de checarlo en servidor, lo cual provoco una

constante necesidad de traducción de términos en sitios web.

Imagen 20.-Vista de agregar Artículos de Sistema de Venta de Boletos.

37

3.2.5 Creación de Modulo de Nutriólogos para Sitio de Ventas de Mariscos.

Para este módulo se requirió agregar un modelo, un controlador y sus respectivas

vistas, al igual que otros módulos de hechos para la administración de cierto

registro en la base de datos este conto con las funciones básicas, pero como un

punto extra se le decidió agregar una función extra en este caso, una función

conocida como destacar, la cual funciona como una especie de estatus y nos dice

que chef nutriólogo esta destacado, se realizó también una función que permite

obtener el ultimo nutriólogo que fue destacado, basándose en su fecha de

modificación.

Tabla Nutriólogos.

Tabla 8.- Tabla Nutriólogos de Sitio de Venta de Mariscos


Id Int 11 Campo cuya función es la de almacenar una clave

única que sirve como identificador para distinguir a

los diferentes registros.

Nombre Varchar 50 Campo que almacena el nombre el nutriólogo que

se encuentra en el registro.

Grado_Profesional Text -- Guarda el título con el que cuenta el nutriólogo

Destacado Int 50 Campo que dice si el nutriólogo esta destacado.

Estatus Int 11 Dice si el registro está activo o si ha sido dado de

baja.



modificación.


Modified Date Guarda la fecha de la última modificación del

registro.

38

Dicho módulo de nutriólogos fue enlazado con un módulo ya existente, en este

caso fue el de recetas, la razón de esto fue la de otorgar a cada receta un

nutriólogo, tomando en cuenta que cada receta pertenece solo a un nutriólogo.

Otra función diseñada para este sitio web fue la de la creación de un buscador

que filtrara las recetas tanto por ingredientes como por nutriólogos e incluso

ambos al mismo tiempo.

La última de las funciones realizadas para este sitio fue una que permite raer el

nutriólogo asignado a cada receta.

Imagen 21.-Módulo de alta de Productos de Sitio de Ventas de Mariscos.

39

3.2.6 Implementación de un Web Service en Sitio de Administración.

La última de las actividades realizadas incluyo modificaciones a un proyecto ya

existente, dichas modificaciones fueron realizadas en un solo apartado del

proyecto y tomando en cuenta la necesidad de no afectar otros módulos del

proyecto ni el funcionamiento de los sistemas de reporte, dichas modificaciones

incluyeron entre otros:

Cambios en Generación de Reportes Existentes

Este cambio requirió de la eliminación del reporte de los registros cuyos

ciertos campos fueran 0. Dicha eliminación debe hacerse solo al momento

de generar el reporte.

Modificación de los Registros en Base de datos.

Este proceso fue realizado con la ayuda de un Web Service el cual permite

la obtención de información de un servidor remoto, mediante funciones ya

preestablecidas en él y regresa información presentada en un formato xml.

La tarea desempeñada consistió en dar formato a esa información y usarla

para la modificación en la base de datos del proyecto.

Enlace de BD del Proyecto con BD de Web Service.

Para esto se agregó a la vista un nuevo elemento que permite seleccionar

el registro en la base de datos del Web Service y al guardar o modificar el

registro en la base de datos del proyecto esta queda enlazada con la base

de datos del Web Service.

40

3.2.7 Creación de Página Landing para Venta de Casas.

La tarea asignada consistió en crear una página de publicidad, cuya función es la

de obtener los datos de las personas a las cuales se le mostraba la página, el

Landing cuenta con dos campos, un campo correspondiente al nombre de la

persona que visita la página, el segundo campo es a su vez correspondiente al

correo electrónico del visitante, el campo de correo cuenta con una validación que

solo permite que correos con el formato correspondiente puedan ser admitidos,

ambos campos cuentan con una validación que no permite que ninguno de los

campos sea enviado vacío. Otro elemento de la página Landing es un campo de

tipo checkbox cuya función específica es que si al enviarse el formulario este

parecía como seleccionado, el usuario debe quedar registrado dentro de una lista

de contactos de una página de servicio web, en caso que no se seleccione el

checkbox el usuario únicamente quedara registrado en la base de datos.

El Landing estaba conformado por dos partes, cada uno de las cuales cumple una

función específica:

Back-End o Parte del Administrador.

Esta parte permite al usuario administrador la creación de todo tipo de páginas

Landing, este funciona con un conjunto de campos de textos los cuales son

ingresados en la base de datos, dichos datos son los siguientes:

Título de Página: Es la descripción que se mostrara en la pestaña del sitio

web.

Título del Landing: Es el texto que se muestra en la parte de arriba de la

página.

Palabras Clave: Estas son palabras con las cuales se vincula al Landing

cuando se hace una búsqueda en Internet.

Url: Es la dirección URL con la cual se podrá acceder al Landing.

41

Email: Es el correo electrónico al cual se mandara notificación cuando

alguien mande sus datos.

Descripción: Parte resaltada del texto del título.

Subtitulo 1: Primera parte del subtitulo del Landing, este funciona como

una especie de encabezado.

Subtitulo 2: Segunda parte del subtitulo del Landing, este funciona como

una especie de encabezado.

Botón: Es el texto que se mostrara en el botón del bloque principal del

Landing.

Botón Info: Texto a mostrarse en el botón del bloque de información.

Bloque Info: Descripción general de lo que se anuncia, cumple una función

similar al campo descripción pero da información más detallada.

Imagen Principal: Su función es la de capturar la imagen la cual aparecerá

en la parte principal, siempre y cuando el tamaño de pantalla del dispositivo

corresponda al de un equipo de escritorio.

Imagen Móvil: Captura la imagen que se mostrara en la parte principal si

se detecta que el usuario ha entrado en un dispositivo cuyo tamaño de

pantalla corresponda al tamaño de los dispositivos móviles.

Estatus: Se utiliza para guardar el estatus del registro, este aparece con un

valor default de verdadero.

42

Imagen 22.- Modulo de Creación de Landings Bloque Principal

43

Imagen 23.-Modulo Creación de Landings Bloque de Información

44

Front-End

Esta es la parte que se le muestra al cliente, cuenta con diversos campos de texto

los cuales son cargados desde la base de datos, es decir, se cuenta con una

plantilla en la cual se insertan los textos e imágenes que se agregan en la parte

del administrador, esto permite la creación de un ilimitado número de Landings.

Esta parte muestra los textos en diferentes idiomas, dependiendo del idioma

elegido al visitar la página, esto permite que personas de diferentes países puedan

entender lo que dice.

La parte Front-End cumple con un requerimiento llamado responsividad, lo cual le

permite adaptarse al tamaño de la pantalla con el cual el usuario visualiza la

página, cambiando incluso la imagen principal que se muestra.

En caso de ocurrir un error al ingresar los datos, se muestran dos textos los cuales

indican al usuario el error cometido, dichos mensajes son mostrados en el

lenguaje que el administrador estipule, los susodichos mensajes solo desaparecen

al ingresarse los datos de una manera correcta, en caso de que el usuario ingrese

los datos con algún otro error, el mensaje se cambiara al último error cometido.

El Front-End está compuesto por tres partes, la primera parte es la parte principal,

en ella se muestra el título, subtítulo, y la imagen principal, el segundo segmento

es conocido como info o información, a diferencia del primero este bloque muestra

una información más detallada y especifica de la información del proyecto que

promociona el Landing, otro bloque que se contiene en la página, es el formulario,

en él se captura la información del cliente, el último de los módulos es el final, este

solo contiene texto e imágenes estáticas.

45

Imagen 24.-Formulario de Laning

46

Imagen 25.-Modulo de Información del Landing

47

Resultados y Discusión

Se logró:

El desarrollo la implementación de dos nuevos módulos en un sistema de

ventas, permitiendo a este la administración de categorías y productos.

La implementación de un motor de búsqueda que permite a los usuarios la

obtención especifica de los transportes que cumplen con los requisitos que

este ingreso.

La creación de una función que permite la elaboración de reportes sobre los

prospectos, la cual permite al usuario la exportación de los datos del reporte

a un documento de formato xls.

Corrección de errores de un sitio web dedicado a la venta de boletos.

Implementación de Web Service en sitio web de administración.

Creación de módulo de Nutriólogos para sitio de venta de productos.

48

Conclusiones

Tomando en cuenta que se esperaba aprender a realizar Sistemas Web

completos de una manera individual y además de esto aprender y participar en la

elaboración de aplicaciones para dispositivos móviles, los resultados fueron más

realistas, delegándoseme principalmente la elaboración de módulos para diversos

sistemas ya previamente establecidos, estas actividades me dieron la oportunidad

de aprender principalmente la capacidad de comprensión, ya que se requirió en

todos los proyectos que se entendiera su funcionamiento para poder agregar

nuevas funcionalidades.

Hablando acerca de la elaboración de las aplicaciones móviles, estas son

realizadas por una rama diferente de la empresa, por lo que al estar yo asignado a

la rama de desarrollo web, no conté con la oportunidad de incorporarme a esa

área.

Sin embargo la capacidad que mejor se permitió desarrollar fue la del trabajo en

equipo debido a que en la creación de los módulos estos podían afectar en gran

manera al trabajo que los demás tenían en el mismo proyecto, por lo cual se

requirió de una comunicación constante con las otras personas.

49

Bibliografía

[1] http://es.wikipedia.org/wiki/HTML

[2] http://es.wikipedia.org/wiki/PHP

[3] http://es.wikipedia.org/wiki/JavaScript

[4] http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo

[5] http://es.wikipedia.org/wiki/CakePHP

[6] http://www.desarrolloweb.com/manuales/manual-codeigniter.html

[7] http://en.wikipedia.org/wiki/Zend_Framework

[8] https://es.atlassian.com/software/jira

[9] http://es.wikipedia.org/wiki/TortoiseSVN

[10] http://es.wikipedia.org/wiki/Firebug

http://es.wikipedia.org/wiki/HTML

50

Glosario

Back-End: Parte del software que es usada solo por los administradores de un

sitio web.

Checkbox: Elemento de interacción de la interfaz gráfica de usuario del

Sistema Operativo con el usuario, que permite a éste hacer selecciones

múltiples de un conjunto de opciones.

Framework: Estructura conceptual y tecnológica de soporte definido,

normalmente con artefactos o módulos de software concretos, que puede

servir de base para la organización y desarrollo de software.

Frond-End: Parte del software que interactúa con el o los usuarios.

Landing: Página web a la que una persona llega tras pulsar en el enlace de

una guía, un portal o algún anuncio de texto situado en otra página web o

portal de internet. En la mayoría de los casos esta página web es una

extensión del anuncio de promoción, donde se explica más detalladamente la

oferta del producto o servicio que se está promocionando a través de una carta

de ventas.

Web Service: Tecnología que utiliza un conjunto de protocolos y estándares

que sirven para intercambiar datos entre aplicaciones.

Xls: Formato en que se guardan los archivos creados en el programa Microsoft

Excel.

tesina creación de sistemas web para empresas...

Documents