31

SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de
Page 2: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

1

INTRODUCCIÓN .......................................................................................................................... 2

DESCRIPCIÓN DEL ÁREA DE TRABAJO ................................................................................ 3

DESCRIPCIÓN DEL PROYECTO ............................................................................................... 4

JUSTIFICACIÓN DEL PROYECTO ............................................................................................ 5

OBJETIVOS DEL PROYECTO ................................................................................................... 6

PROBLEMAS PLANTEADOS A RESOLVER ............................................................................ 7

ALCANCES Y LIMITACIONES ................................................................................................... 8

Alcances .................................................................................................................................. 8

Limitaciones ............................................................................................................................ 8

FUNDAMENTO TEÓRICO DE LAS HERRAMIENTAS Y CONOCIMIENTOS APLICADOS.. 10

PROCEDIMIENTOS EMPLEADOS Y ACTIVIDADES DESARROLLADAS ........................... 13

Sistema Web de Servicio Técnico ...................................................................................... 13

Sitio Web del Negocio .......................................................................................................... 21

RESULTADOS OBTENIDOS .................................................................................................... 26

CONCLUSIONES Y RECOMENDACIONES ............................................................................ 27

RETROALIMENTACIÓN ........................................................................................................... 28

Fortalezas ............................................................................................................................... 28

Debilidades ........................................................................................................................... 28

Oportunidades ...................................................................................................................... 28

Recomendaciones al programa de ISI ............................................................................. 28

REFERENCIAS .......................................................................................................................... 30

Page 3: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

2

INTRODUCCIÓN

Hoy en día el uso de las tecnologías de la información se ha vuelto indispensable

para las empresas, no solo como una herramienta de apoyo, sino como una

fortaleza para su establecimiento, crecimiento y madurez como empresa. Así

también para mejorar los procesos que diariamente se realizan dentro del negocio

y con ello hacer del mismo un negocio más fuerte frente a su competencia.

Ahora bien, dentro de las tecnologías de información, podemos decir, el mayor

desarrollo en la actualidad se encuentra en la nube. La computación en la nube es

un nuevo modelo de prestación de servicios de negocio y tecnología desde Internet.

Es por ello que para que un negocio se mantenga al frente de sus competidores se

ha vuelto necesario el uso de sistemas o sitios Web, que permitan tanto a sus

empleados como clientes dar y recibir un servicio de calidad, accesible desde

cualquier lugar y hora, sin tener la limitante de un sistema de escritorio al cual solo

se puede acceder desde el lugar o puesto de trabajo.

Page 4: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

3

DESCRIPCIÓN DEL ÁREA DE TRABAJO

GRUPO NPC S.A de C.V es la razón social de la empresa cuya matriz se encuentra

en Los Cabos, Baja California Sur, México. El giro de este negocio es la venta de

electrodomésticos de primera calidad, en los cabos el negocio lleva el nombre de

GE Appliances, Builder & Design Center, y aquí en Hermosillo lleva el nombre de

House, soluciones para el hogar. En ninguna de las dos ciudades el negocio cuenta

con una persona encargada de sistemas, por lo cual mi espacio de trabajo fue algo

con lo que la empresa decidió experimentar por primera vez en la sucursal de

Hermosillo.

El gerente general y encargado de todo el negocio es el Lic. Carlos Molina, su

puesto de trabajo se encuentra ubicado en la matriz en Baja California Sur. Como

realicé tareas las cuales competían tanto a la matriz en Los Cabos como a la

sucursal de Hermosillo, mi medio de comunicación con él fue, mayormente, vía

correo electrónico o teléfono. Solo en tres ocasiones tuve la oportunidad de tratar

con él personalmente.

Los avances de proyecto eran presentados a la Lic. Alejandra María Fimbres,

gerente de sucursal Hermosillo. Aunque también tenía trato con otras personas en

Los Cabos, como la encargada de Servicios o personal de la matriz que haría uso

del sistema Web que desarrollé para ellos.

Page 5: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

4

DESCRIPCIÓN DEL PROYECTO

El proyecto, en general, abarcó programación Web. Éste se dividió en dos partes

principales. Primeramente se elaboró un Sistema Web de servicio técnico para la

matriz de la empresa ubicada en Los Cabos, Baja California Sur, México. Este

sistema permite llevar el control de los servicios técnicos que la empresa presta a

sus clientes. Desde el sistema, los empleados registrados al mismo, pueden dar de

alta servicios. Los administradores del sistema pueden asignarlos a los técnicos en

cierto día y hora y después darle seguimiento a cada servicio registrado. Los

técnicos a su vez, son notificados de cada servicio que se les asigna y también

pueden darle seguimiento.

De esta manera la empresa lleva un control sumamente detallado del servicio que

presta a sus clientes, con el fin de encontrar oportunidades de mejora para el mismo.

El sistema fue desarrollado en el lenguaje de programación PHP en conjunto con el

manejador de base de datos MS SQL Server 2000, con el que cuenta la empresa.

La segunda parte del proyecto consistió en la tarea de elaborar de nuevo la página

Web de la empresa, ya que con la que contaban no había sido actualizada en mucho

tiempo, por lo cual se encontraba obsoleta. Además de que la parte

autoadministrable de la misma no era de fácil entendimiento para la persona

encargada de actualizarla.

Como el Sitio Web es de suma importancia para un negocio de este ramo fue

necesario hacerlo lo más amigable posible para los clientes, quienes son el usuario

principal en este caso.

Para desarrollar esta página también se utilizó el lenguaje de programación PHP en

conjunto con el manejador de base de datos MS SQL Server 2000, así como HTML5

y otras herramientas de diseño y desarrollo que serán descritas más adelante en

este documento.

Page 6: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

5

JUSTIFICACIÓN DEL PROYECTO

Como previamente se expuso, para un negocio de este giro es de vital importancia

darse a conocer a sus clientes a través de internet. Ya que hoy en día es la principal

fuente de información, por lo cual el hecho de que cuenten con un Sitio Web

adecuado a las necesidades del negocio y de sus clientes es de suma

consideración. Por éstas y más razones se desarrolló un Sitio Web sencillo,

accesible, solo con la información necesaria, al servicio de los clientes. Además que

mantiene en contacto a los clientes que visitan la página con los encargados de la

matriz en Los Cabos y de la sucursal en Hermosillo.

Cabe mencionar que es necesario mantener la página actualizada con el fin de

brindarles un mejor servicio a los clientes, es por ello que el sitio desarrollado cuenta

con una parte auto administrable. Esta parte fue elaborada con una interfaz lo más

sencilla posible, con el fin de facilitarle a los empleados encargados de actualizar la

página la tarea de mantener la página al día, además de que los empleados no

cuentan con mucho conocimiento en el área de la informática.

Por otra parte el sistema Web de servicio técnico surgió de la necesidad de

mantener un control en los servicios que presta la empresa, debido a que en la

matriz de Baja California Sur, existía un desorden al realizar el registro de dichos

servicios, lo cual dificultaba tanto las labores de los técnicos asignados a realizar

cada servicio como la correcta atención al cliente. Aún más, siendo la mayoría de

sus clientes extranjeros, por lo cual se requería de un sistema que facilitará cada

una de las actividades que implica una solicitud de servicio técnico, desde el registro

del cliente hasta el seguimiento del técnico asignado.

Page 7: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

6

OBJETIVOS DEL PROYECTO

Los principales objetivos del proyecto son:

Desarrollar un sistema Web de registro de solicitudes de servicio técnico.

Mantener informado a través de correo electrónico a los administradores,

técnicos y clientes acerca del estado actual del servicio técnico.

Dar acceso a los técnicos al sistema sin limitantes de tiempo y espacio, es decir,

que a través de sus teléfonos móviles puedan hacer uso del sistema.

Informar al administrador de servicios sobre el historial de cada servicio técnico

prestado.

Mejorar la interacción con los clientes y el negocio a través de un Sitio Web.

Desarrollar una página Web amigable, informativa y accesible para los clientes

del negocio.

Crear la parte auto administrable de la página Web, lo más sencillo posible pero

funcional para el mejor entendimiento de los empleados.

Facilitar la tarea de cotización de productos para los vendedores del negocio a

través del Sitio Web.

Mantener informados a los clientes que visitan la página a través de “Noticias

Recientes” enviadas desde el Sitio Web.

Page 8: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

7

PROBLEMAS PLANTEADOS A RESOLVER

Grupo NPC contaba con una página Web pero ésta no se encontraba actualizada.

No solo carecía de información acerca de los productos que se venden tanto en Los

Cabos como en Hermosillo, sino que tenía un mal manejo de colores y distribución

de contenido, lo cual la hacía una página no amigable para los clientes. Además

que la sección de contacto no era clara, lo que dificultaba la interacción entre el

cliente y el negocio.

Así también la página con la que contaban no almacenaba información acerca de

los clientes que solicitaban cotización de los productos o algún tipo de ayuda o

servicio, lo que ocasionaba que no se le diera atención y seguimiento a dichas

solicitudes como se debía.

Ahora bien, en cuanto al servicio técnico que ofrecen en la matriz de Los Cabos, la

problemática principal era que no se llevaba un control o seguimiento de los

servicios que realizaban. Lo único con lo que “controlaban”, de cierta manera, los

servicios técnicos agendados era en papel, con las denominadas bitácoras de

servicio. Lo cual era un problema ya que estas hojas se podían perder, traspapelar

o dañar lo que hacía que el servicio prestado, en ocasiones, no se cumpliera en

tiempo y forma. Además otro problema que se presentada es que no se conocía el

tiempo que tomaba para que cada servicio quedará terminado, es decir, no se

llevaba un registro de fecha de inicio, estado del servicio, fecha de término, etc. Por

lo tanto no había manera de medir el rendimiento tanto de los técnicos como del

servicio en general.

Page 9: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

8

ALCANCES Y LIMITACIONES

Alcances

Tanto el Sitio Web como el sistema Web de servicio técnico tienen como fin principal

el ofrecer un servicio de calidad al cliente, y de esta manera mantenerse al frente

en la competencia en este ramo comercial. Pero para poder lograr esto es necesario

que, en primer lugar, dentro de la empresa también se logren optimizar actividades

y tareas que se realizan diariamente. Es por esta razón que parte del alcance del

proyecto se enfoca en hacer que los mismos empleados y jefes hagan el uso de

este tipo de tecnologías de información con el propósito de llegar a sus clientes y,

como se mencionó, estar siempre en primer lugar frente a la competencia.

Es así como podemos decir que el alcance del proyecto es muy amplio, ya que no

solo se enfoca en atraer a más clientes para poder venderles productos u ofrecerle

algún servicio, sino en mejorar las actividades y procesos dentro del negocio y con

ello estar en una mejora continua.

Limitaciones

Durante mi estancia en el negocio se presentaron diversas limitaciones que

impactaron tanto en la calidad de mi trabajo como en el tiempo de entrega o

terminación del proyecto, sin embargo, a pesar de todo se pudo lograr lo que la

empresa solicitaba.

A continuación se listan algunas de las limitaciones que se presentaron en el

desarrollo del proyecto:

Falta de claridad en los requisitos planteados originalmente para el sistema de

servicio técnico.

Page 10: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

9

Los encargados del servicio técnico no sabían exactamente sus necesidades o

que era lo que querían a la hora de entablar reunión para establecer los

requisitos.

En repetidas ocasiones se generaron cambios en la base de datos, debido a

solicitudes tardías de campos de información que serían requeridos.

El tiempo de entrega para este sistema no pudo ser el establecido originalmente

debido a que se pedían cambios continuamente.

El tiempo de respuesta del servidor es lento.

El servidor con el que cuenta la empresa no tenía un gestor de contenido, lo cual

hacía un poco más tediosa la tarea de actualizar y cargar nuevos archivos,

debido a que se tenía que hacer por FTP.

Debido al tiempo de respuesta lento del servidor, ciertas funciones del sistema

son más tardadas de lo que deberían ser.

Falta de conocimiento sobre herramientas de diseño de páginas Web.

El cliente no estableció requerimientos específicos sobre el contenido de la

página lo cual volvió aún más complicado la tarea de diseñar la página.

No se contaba con módulo para PHP en el servidor.

Cuentan con un manejador de base de datos muy viejo (SQL Server 2000).

No se cuenta con personal de sistemas, por lo tanto todo el trabajo era cargado

a un solo practicante.

Al igual que en el sistema de servicio técnico, también para la base de datos

relacionada a la página Web se realizaron muchos cambios durante el

desarrollo.

Se dificultaba una comunicación más directa y clara con el gerente general

debido a que él se encuentra en Los Cabos, por lo tanto había ocasiones en no

entendía sus peticiones al cien por ciento.

Page 11: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

10

FUNDAMENTO TEÓRICO DE LAS HERRAMIENTAS Y CONOCIMIENTOS APLICADOS

Desarrollo Web: Desarrollo Web se refiere en términos generales a las

tareas relacionadas con el desarrollo de Sitios Web para ser alojados por

intranet o Internet. El proceso de desarrollo Web incluye el diseño Web,

desarrollo de contenidos Web, scripting lado-cliente/lado-servidor y la

configuración de seguridad de red, entre otras tareas (1).

PHP: acrónimo recursivo de PHP: Hypertext Preprocessor, es un lenguaje

de código abierto e independiente de plataforma, muy popular especialmente

adecuado para el desarrollo Web que puede ser incrustado en HTML. El

código es ejecutado en el servidor, generando HTML y enviándolo al cliente

(2).

SQL Server: Microsoft SQL Server es un sistema para la gestión de bases

de datos producido por Microsoft basado en el modelo relacional. Sus

lenguajes para consultas son T-SQL y ANSI SQL (3).

Javascript: a veces abreviado como JS, es un lenguaje ligero e interpretado,

orientado a objetos con funciones de primera clase más conocido como el

lenguaje de script para páginas Web, pero también usado en muchos

entornos sin navegador, tales como node js o Apache CouchDB Es un

lenguaje script multi-paradigma, basado en prototipos, dinámico, soporta

estilos de programación funcional, orientada a objetos e imperativa (4).

jQuery: Es una librería de Javascript. El propósito de jQuery es que sea

mucho más fácil utilizar JavaScript en su Sitio Web. jQuery toma muchas

tareas en común, lo que en Javascript toma bastantes líneas de código

realizar, y las envuelve en los métodos para que se pueden llamar con una

Page 12: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

11

sola línea de código. También jQuery simplifica mucho las cosas complicadas

de JavaScript, como las llamadas AJAX y manipulación de DOM (5(.

AJAX: Asynchronous JavaScript and XML. AJAX no es un nuevo lenguaje

de programación, sino una nueva forma de utilizar las normas existentes.

AJAX es el arte de intercambiar datos con el servidor y actualizar partes de

una página Web, sin tener que recargar toda la página (6).

JSON: JavaScript Object Notation (Notación de Objetos de JavaScript) es un

formato ligero de intercambio de datos. Leerlo y escribirlo es simple para

humanos, mientras que para las máquinas es simple interpretarlo y

generarlo. Está basado en un subconjunto del Lenguaje de Programación

JavaScript, Standard ECMA-262 3rd Edition - Diciembre 1999 (7).

Bootstrap: Es un framework de JavaScript de código abierto desarrollado

por Twitter. Es una combinación de HTML, CSS y código JavaScript diseñado

para ayudar a construir los componentes de una interfaz de usuario.

Bootstrap también fue programado para soportar HTML5 y CSS3 (8).

HTML5: HyperText Markup Language, versión 5. Es la quinta revisión

importante del lenguaje básico de la World Wide Web. HTML5 especifica dos

variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante

conocida como HTML5 y una variante XHTML conocida como

sintaxis XHTML5 que deberá ser servida como XML (9).

CSS: Hojas de Estilo en Cascada (Cascading Style Sheets), es un

mecanismo simple que describe cómo se va a mostrar un documento en la

pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la

información presente en ese documento a través de un dispositivo de lectura.

Esta forma de descripción de estilos ofrece a los desarrolladores el control

total sobre estilo y formato de sus documentos (10).

Page 13: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

12

Photoshop: es un editor de gráficos rasterizados desarrollado por Adobe

Systems principalmente usado para el retoque de fotografías y gráficos. Las

características de Photoshop convierten a este programa en uno de los más

potentes que se pueden encontrar para retocar imágenes y crear

ilustraciones y gráficos tanto en 2D como en 3D. El resultado que arroja es

una combinación de creatividad y precisión para trabajar cualquier aspecto

de la imagen (11).

Diseño Responsivo: es un enfoque para el diseño de la Web que se adapta

al usuario, a los diferentes tamaños de navegador en un dispositivo. Funciona

con el uso de media queries que detectan el dispositivo o la resolución del

dispositivo y luego accede a ellos (12).

Sublime Text: es un editor de texto y editor de código fuente creado

en Python desarrollado originalmente como una extensión de Vim. Se

distribuye de forma gratuita, sin embargo no es software libre o de código

abierto, se puede obtener una licencia para su uso ilimitado, pero él no

disponer de ésta no genera ninguna limitación más allá de una alerta cada

cierto tiempo (13).

Cyberduck: es una aplicación cliente de código

abierto de FTP y SFTP, WebDAV, Rackspace Cloud, Google Docs,

and Amazon S3 para los sistemas operativos Mac OS X y, desde la versión

4, Windows, editado con licencia GPL. Cyberduck está escrito en

lenguaje Java y usa la interfaz de usuario Cocoa. Soporta FTP/TLS (FTP

seguro sobre SSL/TLS), usando AUTH TLS así como sincronización de

directorio (14).

Page 14: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

13

PROCEDIMIENTOS EMPLEADOS Y ACTIVIDADES DESARROLLADAS

1. Sistema Web de Servicio Técnico

Al llegar a la empresa la primera actividad asignada fue el desarrollo del sistema

Web de servicio técnico, ya que este era el que más urgía en la matriz de Los Cabos.

Primeramente, se establecieron los requisitos del sistema en reuniones vía

conferencia o por teléfono tanto con los empleados como con el gerente general

desde Los Cabos. En dichas reuniones ellos plantearon sus problemas y

necesidades en cuanto al servicio técnico que prestaban a sus clientes. Así que de

esa manera determine los requisitos del sistema, ya que no me fueron dados

específicamente por escrito.

Después, ya obtenidos los requisitos, lleve a cabo el análisis y diseño del sistema

con el fin de tener en claro que era lo que tenía que desarrollar y para confirmar

junto con los jefes que en realidad eso era lo que ellos esperaban que el sistema

hiciera o alcanzara.

Por otra parte, se me fue otorgado el acceso al servidor de base de datos (figura

1.1) y al acceso al FTP (figura 1.2), al cual me conectaba mediante la interfaz gráfica

de Cyberduck.

Figura 1.1. Acceso al servidor de base de datos en Action Hosting WebDBA.

Page 15: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

14

Figura 1.2 Acceso al FTP a través de Cyberduck.

Ya que el editor de texto que maneja Cyberduck es el bloc de notas decidí optar por

una mejor opción, que me permitiera moverme libremente entre archivos y carpetas,

por lo cual utilice Sublime Text para programar desde ahí (figura 1.3), tanto los

archivos de PHP como los de Javascript. Así también desde ese editor podía

manipular las hojas de estilo.

Figura 1.3 Interfaz de Sublime Text

Page 16: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

15

El acceso al sistema se realiza a través de la página Web del negocio, para ello el

usuario primeramente debe autenticarse (figura 1.4).

Por esta razón realice diversos filtros para que dependiendo del tipo de usuario que

accediera el contenido mostrado fuera el correspondiente. Los diferentes tipos de

usuarios del sistema fueron identificados en el análisis, y los mencionó a

continuación con el fin de poder distinguir sus actividades en el sistema.

Estos son: Administrador, Técnico, General.

A continuación se muestra la primera interfaz que, dependiendo del usuario que ha

accedido al sistema, se verá.

Figura 1.4 Acceso al sistema

Figura 1.5 Primera interfaz mostrada al usuario Administrador al acceder al

sistema.

Page 17: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

16

Figura 1.6 Primera interfaz mostrada al usuario Técnico al acceder al sistema.

Figura 1.7 Primera interfaz mostrada al usuario General al acceder al sistema.

Como se pudo observar la interfaz de Administrador y General es sumamente

sencilla, ya que las personas que utilizaran el sistema, como lo mencione

anteriormente en este documento, carecen de experiencia en el uso de internet o

tecnologías de información. Es por eso que el menú principal se muestra de la

manera más clara posible, para no generar dificultad o confusión en el usuario.

Ahora bien, para el usuario Técnico, como su única función es atender los servicios

que le son asignados a este se le muestra directamente una tabla con información

Page 18: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

17

correspondiente al servicio, en esta misma se le permite agregar el número de

recibo, agregar y ver observaciones y cambiar el estado del servicio. También se

desarrolló una interfaz muy sencilla, aplicando el diseño responsivo, ya que se

supone que los técnicos actualizaran la información del servicio desde sus celulares,

por lo cual era necesario que la tabla con la información pudiera visualizarse bien

en un dispositivo móvil como se muestra en la figura a continuación.

Figura 1.8 Interfaz del sistema en dispositivo móvil para el usuario Técnico.

Uno de los propósitos principales de este sistema es poder registrar de manera

eficaz y eficiente cada servicio técnico que es solicitado por los clientes, por tanto

desarrollé una interfaz lo más limpia y entendible posible, para que a la hora de que

los usuarios tengan que registrar un servicio lo puedan hacer de manera rápida.

A la hora de que un cliente llama al negocio para solicitar un servicio técnico, si este

se encuentra registrado en la base de datos, el usuario solo tendrá que ingresar su

teléfono y los demás campos serán autocompletados. En cambio, si es un cliente

nuevo, a la hora de levantar el servicio, este quedara automáticamente registrado

en la base de datos de clientes del negocio.

Page 19: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

18

Figura 1.9 Formulario de Nuevo Servicio Técnico con auto-completado de campos.

Figura 1.9.1 Formulario con campos auto-completados.

Como se puede ver es un formulario sumamente sencillo pero que cumple con las

necesidades planteadas por el negocio.

Page 20: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

19

Cada vez que se registra una nueva solicitud de servicio técnico, los

administradores del sistema reciben un correo electrónico de notificación, con el

propósito de que estos asignen el servicio a alguno de los técnicos registrados en

la base de datos.

Figura 1.10 Correo electrónico de confirmación de nueva solicitud de servicio.

Solo los administradores del sistema reciben esta notificación ya que ellos son los

únicos que puedan asignar el servicio a algún técnico desde la tabla de servicios

registrados (figura 1.11). Ya que el servicio ha sido asignado, también el técnico al

que fue asignado recibe una notificación por e-mail además de que al recibir el

correo puede aceptar la “invitación de evento” para que el servicio quede agendado

en su dispositivo móvil (figura 1.12). Esto se hizo con el fin de tener aún más a la

mano la información necesaria para poder prestarle atención al cliente.

Figura 1.11 Tabla de control de servicios para el usuario Administrador

Page 21: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

20

Figura 1.12 Correo electrónico e invitación a evento del servicio técnico asignado

Por último, una de las peticiones del gerente general fue poder ver el historial de

todo lo relacionado a cada uno de los servicios, donde se mostrará el tiempo

transcurrido entre cada actividad o atención que se le dio, para eso se diseñó la

siguiente tabla.

Figura 1.13 Tabla de historial del servicio técnico.

Para el sistema se desarrollaron muchas más funcionalidades, sin embargo las más

importantes han sido plasmadas ya en el documento. Aquellas como edición de

información de servicio, edición de información del cliente, cancelación de un

servicio, entre otras se encuentran documentadas en el manual de usuario del

sistema que realicé para que los empleados de la matriz en Los Cabos supieran con

detalle cada parte del sistema y en caso de necesitar soporte acudan a dicho

manual.

Page 22: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

21

2. Sitio Web del Negocio

Para el desarrollo de la página Web me base mayormente en el Framework de

diseño Bootstrap, ya que es un framework muy fácil de usar, con un amplio número

de elementos de los cuales se puede sacar provecho. Además cuenta con diseños

muy limpios y ordenados, que era lo que la página del negocio necesitaba, imagen

y orden. La página con la que contaba anteriormente la empresa fue totalmente

desechada, ya que primeramente el lenguaje de programación utilizado era ASP y

en segundo lugar, tenía una interfaz gráfica muy inadecuada para el negocio.

La página desarrollada le permite al usuario acceder al catálogo de productos de

manera sencilla, ya que muestra imágenes o enlaces representativos de cada

sección como se muestra a continuación.

Figura 2.1 Página principal con el menú “Cocina” desplegado.

Así también a través de cada una de las páginas del sitio los clientes pueden

interactuar con el negocio a través de la sección de Soporte o Contáctanos,

dependiendo de su necesidad. Lo cual la hace una página de fácil interacción entre

cliente-empresa.

Page 23: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

22

Figura 2.2 Página principal con menú de “Soporte” y “Contáctanos” desplegado.

La página con la que contaban anteriormente mostraba cada uno de los productos

de una manera muy anticuada, por así decirlo, solo podías ver un cuadro con la

imagen, ahora se hizo de una manera más dinámica donde el cliente puede ver

detalles acerca de cada producto (figura 2.3) e incluso agregarlo a un carrito de

compras (figura 2.4).

Figura 2.3 Imagen en detalle del producto seleccionado.

Figura 2.4 Todos los productos de la categoría “Campana” con botón para agregar al “Carrito”.

Page 24: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

23

Otro de los requerimientos para la página fue que contará con un “carrito de

compras”, que en realidad solo fue requerido no para que el cliente compre vía

internet sino para que solicite una cotización de los productos que desee.

Figura 2.5 Carrito de compras y formulario de solicitud de cotización.

A la hora de que un cliente envía una solicitud de cotización, un correo electrónico

es enviado al administrador de la página con los datos que el cliente tiene que

ingresar y los datos de los productos que se encuentran agregados al carrito.

Sitio Auto-administrable

Lo que se presentó previamente acerca del Sitio Web, solo es del lado del cliente,

ahora mostraré lo que se desarrolló en la parte auto-administrable, que también fue

uno de los principales requerimientos de la gerente de la sucursal en Hermosillo.

Al igual que en el sistema de servicios, el usuario tiene que autenticarse a través

del Sitio Web como se muestra a continuación.

Figura 2.6 Acceso al panel de administración del Sitio Web.

Page 25: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

24

Una vez que se inició la sesión el usuario podrá ver un panel (figura 2.7) con las

distintas opciones con las que cuenta el administrador para poder editar la página o

realizar otras tareas como cotizar productos o enviar mensajes de correo electrónico

a los clientes.

Figura 2.7 Panel de administración del Sitio Web.

Al igual que en el sistema de servicios es un panel muy sencillo y de fácil

comprensión, con enlaces a las distintas tareas que puede llevar a cabo el usuario.

La principal tarea de este panel es la de “Agregar productos nuevos” ya que ésta es

la que mantendrá al día la página, en esta opción se encuentra un formulario con

los distintos campos que necesitan capturarse (figura 2.8) para que la información

de los productos quede registrada en la base de datos.

Figura 2.8 Formulario de Nuevo Producto.

Page 26: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

25

Finalmente la última tarea que se me asigno durante mi estancia en la empresa fue

la de poder realizar cotizaciones de productos a través de la página, y que estas

cotizaciones pudieran ser impresas para entregarlas a los clientes.

A continuación se muestra la tabla donde el usuario carga cada uno de los productos

a cotizar.

Figura 2.9 Tabla para cotización de productos

Al hacer clic en agregar se muestra una ventana en la cual el usuario ingresa el

modelo del producto, después de que envía esa información se realiza una

búsqueda en la base de datos y si el modelo se encuentra registrado se muestra la

información como en la figura anterior. Después al llenar los campos que se

muestran como nombre del vendedor y cliente, tipo de moneda y cantidad de

producto se procede a dar clic en el botón de imprimir, y el resultado se muestra a

continuación.

Figura 2.10 PDF generado a partir de la tabla de cotización.

Page 27: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

26

El documento de PDF que se mostró anteriormente se genera a partir de la

información en la tabla, esto fue posible gracias que utilicé la librería FPDF.

Dentro de la parte de auto-administración del Sitio se encuentran otras opciones

como de edición o eliminación de productos, creación de usuarios, entre otros, sin

embargo las más complejas y relevantes son las que han sido explicadas

detalladamente en este documento.

RESULTADOS OBTENIDOS

Al finalizar el proyecto los resultados obtenidos son: primeramente una página Web

auto-administrable, amigable para el usuario y que facilita la interacción cliente-

empresa; en segundo lugar, un sistema que permite el control no solo de servicios

ofrecidos sino que también es un sistema que permite ver el rendimiento de los

empleados y encontrar oportunidades de mejora en cuanto al servicio al cliente.

Así también, otros resultados obtenidos son que el Sitio Web no tendrá por qué

convertirse en una página desactualizada y con información irrelevante a lo que el

cliente busca, sino que gracias al diseño de interfaces que se empleó será una tarea

fácil, para el administrador, el mantener la página al día.

Por otra parte, la tarea de cotizar para los vendedores del negocio también fue

facilitada en sobre manera. Ya que antes tenían que hacer un formato en Excel y

agregar imágenes y datos manualmente, ahora a través de la página solo tienen

que agregar una mínima cantidad de datos para obtener el mismo resultado, pero

con mayor calidad.

Page 28: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

27

CONCLUSIONES Y RECOMENDACIONES

Conclusiones

Al culminar mi estancia profesional dentro de esta empresa me llevó una grata

experiencia pero sobre todo mucho aprendizaje. Ya que pude comprender, de cierto

modo, en la vida real lo que a veces comentaban los maestros en clase, cosas como

“el cliente nunca sabe lo que quiere” o que en las empresas no se tiene una cultura

acerca de la importancia de la TI para la mejora de los procesos y actividades que

se realizan diariamente.

Además de conocer cómo se maneja un negocio, a pesar de que yo no hacía algo

relacionado a eso, con el simple hecho de estar presente todos los días aprendí que

el trato al cliente es uno de los puntos más importantes si se desea tener un negocio

al frente de la competencia.

Así también, a pesar de que no hubo una persona que estuviera capacitándome o

enseñándome acerca de alguna nueva tecnología o lenguaje de programación

desconocido para mí, aprendí y mejores mis habilidades en programación Web, esto

fue gracias a que no tenía otra opción más que aprender por mi propia cuenta para

poder sacar adelante el proyecto.

Recomendaciones

Las recomendaciones que daría a futuros practicantes es que traten de encontrar

un lugar en donde puedan desarrollar sus habilidades, no importa si es un lugar

pequeño. De hecho, hablando en mi experiencia creo que aprendí más de lo que

me gusta, que es el desarrollo de sistemas, estando en un negocio relativamente

pequeño a que si hubiera estado en una industria de la ciudad, donde

probablemente hubiera tenido que adaptarme a los sistemas con los que ya cuentan

en lugar de diseñar y crear nuevos.

Page 29: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

28

RETROALIMENTACIÓN

Fortalezas

Al terminar mi estancia profesional pude darme cuenta que una de mis fortalezas

fue la capacidad para aprender por mi cuenta. Es decir de investigar y de tratar de

aprender cosas nuevas por fuera del salón de clases. Además de que entablé una

buena relación con mi jefa directa gracias a que puedo adaptarme a distintos

ambientes de trabajo.

Debilidades

Durante el proceso de desarrollo del sistema Web pude darme cuenta que aun

contaba con malas prácticas de programación, quizás en este punto si volviera a

desarrollar desde cero el proyecto lo haría de una manera diferente y mucho más

estructurada. Quizás hasta utilizando un Framework de PHP, del cual no tenía

conocimiento al iniciar el proyecto.

Oportunidades

El trabajar con PHP fue algo que me gustó y que he venido aprendiendo desde hace

un año, sin embargo ahora que sé que existen Frameworks de PHP que reducen

miles de líneas de código y que hacen el desarrollo más eficaz, encontré la

oportunidad para aprender de estas tecnologías basadas en el modelo vista

controlador (MVC) y que hoy en día son muy solicitadas en las empresas enfocadas

en gran parte al desarrollo.

Recomendaciones al programa de ISI

Después de haber realizado mis prácticas profesionales me di cuenta, que al menos

para el área de desarrollo de software es sumamente importante que el contenido

de las materias de programación sea actualizado. Por ejemplo en la optativa de

sistemas basados en Web lo ideal sería que ya no solo se viera HTML y PHP sino

abarcar también MVC. Otra recomendación sería quitar alguna de las materias que

Page 30: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

29

están hasta el octavo o noveno semestre enfocadas más al área de industrial e

introducir materias con contenido más parecido al de la materia planeación

estratégica informática. Yo sé que es bueno tener conocimiento acerca de los

procesos industriales porque tal vez nos toque trabajar en una empresa o industria,

sin embargo si no tenemos bien las bases de análisis, diseño y desarrollo de que

serviría conocer el entorno industrial cuando no vamos a poder implementar una

solución de TI por falta de conocimiento.

Page 31: SISTEMA WEB DE SERVICIO TéCNICO, DISEÑO Y DESARROLLO DE SITIO WEBcp.isi.uson.mx/practicas_docs/210202413-reporte.pdf · 2014. 7. 15. · hacía un poco más tediosa la tarea de

30

REFERENCIAS 1. http://php.net/manual/es/intro-whatis.php 2. http://www.microsoft.com/es-es/server-cloud/products/sql-server/#fbid=8KFXnNTqb43 3. http://www.techopedia.com/definition/23889/Web-development 4. https://developer.mozilla.org/es/docs/Web/JavaScript 5. http://www.w3schools.com/jquery/jquery_intro.asp 6. http://www.w3schools.com/ajax/default.ASP 7. http://json.org/json-es.html 8. http://www.inmotionhosting.com/support/edu/joomla-3/using-bootstrap/what-is-bootstrap 9. HTML5 Jorge Franganillo (6 de septiembre de 2010). «HTML5: el nuevo estándar básico del Web» (en español). 10. http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo 11. http://www.photoshopnews.com/feature-stories/photoshop-profile-thomas-john-knoll-10/ 12.http://activ.com.mx/diez-cosas-que-necesitas-saber-acerca-del-diseno-responsivo-parte-i/ 13. http://www.macupdate.com/app/mac/8392/cyberduck 14. http://www.sublimetext.com/