Post on 20-Aug-2021
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.
Dato Tipo Longitud Descripción
Id Int 11 Campo cuya función es la de almacenar clave de registro.
Descripción Varchar 50 Guarda el nombre de la etiqueta.
Created_by Int 11 Guarda el Id del usuario que creo el registro.
Modified_by Int 11 Guarda el Id del 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.
26
Tabla de Etiquetas_Productos.
Tabla 3.-Tabla de Etiquetas_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 clave de registro.
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.
Dato Tipo Longitud Descripción
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.
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 Tallas_Productos.
Tabla 5.-Tabla de Tallas_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 clave de registro.
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.
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.
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.
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 Categorias_Productos.
Tabla 7.-Tabla de Categorías _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 clave de registro.
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
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 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.
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.
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
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.