INSTITUTO TECNOLÓGICO DE TUXTLA GUTIÉRREZ

RESIDENCIA PROFESIONAL AGOSTO-DICIEMBRE 2012

Directorio de empresas a través de un sitio web para el

estado de Chiapas.

PRESENTA:

Rafael Angel Montes Badillo

Ingeniería en Sistemas Computacionales

Asesor Interno Ing. Miguel Arturo

Vázquez Velázquez
Revisor Dr. Germán Ríos Toledo

Revisor M.C. Galdino Belizario

Nango Solís

Tuxtla Gutiérrez, Chiapas; 19 de Diciembre de 2012

1
Índice
Resumen……………………………………………………………..……………………3

Introducción………………………………………………………………………………4

Justificación………………………………………………………………………………9

Objetivo general y objetivos específicos………………………………...……….10

Caracterización del área en que participó…………………………………………12

Problemas a resolver priorizándolos……………………………………………….15

Alcances y limitaciones……………………………………………………………….16

Fundamento teórico……………………………………………………………………18

Procedimiento y descripción de las actividades realizadas. ………………….22

Resultados, planos, gráficas, prototipos y programas. ………………………..30

Conclusiones y recomendaciones………………………………………………….50

Referencias bibliográficas……………………………………………………………52

2
Resumen
El proyecto de residencia profesional denominado Directorio de empresas a
través de un sitio web para el estado de Chiapas (www.empresaschiapas.com) es
un catálogo de empresas chiapanecas que está disponible en internet, el cual se
realizó en la empresa de nombre “Empresas Chiapas” perteneciente al corporativo
“Hardware y Software”, ubicada en la ciudad de Tuxtla Gutiérrez, Chiapas.

El catálogo digital se rediseñó, ya que el modelo ya estaba hecho, pero no cumplía

con las expectativas de desarrollo comercial para la empresa. Logrando un mayor
impulso empresarial y ayudar a la organización a cumplir con sus objetivos y
metas corporativas.

La tecnología utilizada en el desarrollo del proyecto se basa en bases de datos

con MySQL, manejadores, diseñadores de plantillas HTML, así como servidores
virtuales bajo un lenguaje PHP.

Para el proyecto se utilizaron las Apis de google maps y el api de la red social de
facebook.

Para la consecución del éxito en el desarrollo del proyecto se tuvieron que realizar
una serie de investigaciones, tales como geográficas, para la ubicación en línea de
las empresas, comerciales, para el detalle de la información de las empresas.

3
Introducción

Antecedentes generales del proyecto:

EmpresasChiapas.com es un sitio de internet enfocado a las pequeñas y
medianas empresas proporcionándoles publicidad desde hace 2 años.

Cuenta con más de 70 empresas alojadas separadas por diferentes categorías.

Este sitio de internet fue desarrollado mediante wordpress.

La información que se muestra de cada empresa es la siguiente:

 Categoría a la que pertenece

 Nombre
 Dirección
 Teléfonos
 Correo electrónico
Se puede apreciar en la siguiente imagen un ejemplo como se mostraba la
información en el sitio

Imagen 1

Dichas empresas están clasificadas por categorías como se muestra en la

siguiente imagen.

4
Imagen 2

Problemática a resolver:

La información que se presenta dentro de empresaschiapas.com es insuficiente o

se encuentra desactualizada.

Al aumentar el numero de empresas en el sitio es más dificil manejar toda la

información de dichas empresas.

Es complicado administrar el sitio debido a que se requiere un personal con ciertos

conocimientos necesarios para hacerlo por lo cual se ha dejado desatendido el
sitio.

5
Estado del arte:

Actualmente existen otros sitios que se dedican a la publicidad en internet que

están enfocados al estado de chiapas como son

chis.mx: que implementa diferentes tecnologías de la web 2.0 y que proporciona

un servicio orientado a las pymes.

Corporativoelite.com: que es una pagina de publicidad enfocada a antros, bares y

eventos.

contactochiapas.com.mx: directorio de empresas en internet.

chiapasdirecto.com: buscador de empresas chiapanecas

geoanunciate.com: mapa que muestra diferentes tipos de empresas alojadas en

este sitio.

El siguiente cuadro comparativo muestra las características que se requieren para

empresaschiapas.com y las características que presentan cada sitio mencionado

Caracteristica/sitio chis.mx corporativo contacto chiapasdirecto. geoanunciate.com

elite.com chiapas.com.mx con.mx
Muestra datos de
las empresas
(direccion telefono,
X x x x x
correo electronico)
Muestra la ubicación
geografica de las
empresas en un
x x
mapa
Alberga diferentes
tipos de empresas x x x x x
Álbumes de
imagenes x x
promociones
x
6
Catálogo de
productos

Catálogo de
servicios x
Catálogo de
promociones x
Buzon de
contatcto para
cada empresa
Comentarios en
facebook del sitio
en general
Comentarios en
facebook para
cada empresa
registrada
Boton me gusta
para el sitio en x x
general
Boton me gusta
para cada
empresa
registrada
Separa las
empresas por x x X
categorias
Tabla 1

Se puede observar que ninguno de los sitios que se presentan cumplen con todas
las características que se requieren para este proyecto en el caso de cada sitio se
realizaron las siguientes observaciones:

Chis.mx: el sitio cumple con mas de la mitad de los requisitos pero tiene algunos
defectos al visualizar ciertas partes del sitio .

7
Corporativoelite.com: muestra noticias y contiene publicidad de direntes empresas
pero está más enfocado a espectáculos y no muestra información detallada de las
empresas que contratan el servicio.

Contactochiapas.com.mx: contiene información básica de las empresas

registradas pero no implementa redes sociales y no muestra mas información
que podría ser atractiva.

Chiapasdirecto.com.mx: al hacer una búsqueda dentro del sitio la mayoría no

arroja resultados, no muestra que empresas contiene y contiene otras
características.

Geoanunciate.com: muestra las empresas dentro de un mapa e implementa las

redes sociales para su difusión pero en general contiene muy pocas empresas
dentro del su sitio y no cuenta con otras características.

8
Justificación

Actualmente en Chiapas un sitio web se cotiza entre los $5,000.00 y $20,000.00

dependiendo de las necesidades de la empresa, tomando en cuenta que estos
sitios requieren de una persona capacitada para su administración y
mantenimiento, lo que representa un gasto extra.

Un directorio de empresas en internet permitiría a las pymes mostrar y administrar

su información de forma sencilla y bajo costo, sin depender de una persona ajena
a la empresa y ajustándose a su presupuesto y necesidades

Integrar las redes sociales a empresaschiapas.com permitirá generar más visitas

al sitio lo que proporcionará un mayor alcance al público.

Incluir diferentes aplicaciones a empresaschiapas.com generará mayor atractivo

para las empresas y mayor competitividad con otras páginas de publicidad.

Un sistema fácil de administrar permitirá reducir la cantidad de trabajo para el

administrador del sitio y para las empresas que estén dentro del sitio.

Un sistema flexible permitirá hacer cambios o incluir nuevas aplicaciones sin una
gran dificultad y permitirá hacer cambios al diseño de manera fácil y sin la
necesidad de hacer un gran gasto de recursos.

9
Objetivos
Objetivos generales

Desarrollar mediante un sitio web un directorio de empresas donde las pymes

puedan subir y editar la información acerca de sus productos y servicios, así como
generar las herramientas necesarias para la administración de su información.

Objetivos específicos

Generar un panel de control dentro del sitio web que permita a los encargados de
las empresas editar su información así como también administrar las aplicaciones
que pueda utilizar:

 Información corporativa (quienes somos, misión, visión, contacto)

 Catálogo de productos
 Catálogo de servicios
 Buzón de contacto
 Catálogo de promociones
 Álbumes de imágenes

Generar el sitio donde los usuarios podrán consultar los siguientes aspectos:

 Mapa de ubicación de las diferentes empresas

 Módulo de búsqueda de empresas
 Módulo de directorio de empresas separado de acuerdo a las categorías y
municipios
 Módulo que muestra el apartado de la empresa junto con los módulos que
contenga (información corporativa, catálogo de productos, catálogo de
servicios, buzón de contacto, catálogo de promociones, álbum de
imágenes)

Generar un panel de control para el administrador de sitio web que le permita

administrar los siguientes aspectos del sistema:

10
 Administración de empresas (altas, bajas, edición y consulta)
 Administración de categorías (altas, bajas, edición y consulta)
 Administración de municipios (altas, bajas, edición y consulta)

11
Caracterización del área en que participó
Empresas Chiapas:

¿Qué se hace en Empresas Chiapas?

Empresas Chiapas proporciona a todas las entidades comerciales formales e

informales el servicio de oferta en internet, a través de un directorio,
proporcionando a cada uno de ellos su propio espacio en donde podrán compartir
todo lo relacionado a sus servicios.

Uno de los objetivos primordiales es que los servicios cuenten con la mejor
atención y calidad para que el ambiente con los clientes sea armónico y
recíprocamente agradable.

A cada uno de los clientes se le trata de manera personalizada, porque cada uno
tiene sus propias necesidades, ajustándose siempre a sus posibilidades y
estrategias de ventas.

Misión

Proporcionar a cada uno de los clientes una oportunidad de expansión comercial

que les ayude a incrementar sus ventas y posicionarse de manera integral en el
mercado digital.

Visión

Ser la compañía líder que impulse en el marketing digital a las empresas

chiapanecas en todo el país, ofreciendo calidad total en el ofrecimiento de
nuestros servicios.

12
 Organigrama:

Gerencia
General

Finanzas y Publicidad y Recolección Desarrollo

administración Ventas Organizacional Web

Marketing
comercial

Desarrollo de
software

Imagen 3

Ubicación de la empresa:
Avenida 20 de noviembre

13
Imagen 4

Funciones dentro de la empresa:

El área dentro de la empresa en la que se desarrolló el proyecto fue desarrollo de
software cuyas funciones son:
 Hacer el análisis de los problemas a resolver con respecto a un nuevo
software o sistema a realizar.
 Realizar el desarrollo del los proyectos de software dentro de la empresa.
 Verificar el correcto funcionamiento del sitio en internet de
www.empresaschiapas.com.
 Realizar el mantenimiento del sitio web de www.empresaschiapas.com
 Revisar y desarrollar las aplicaciones dentro del sitio.

14
Problemas a resolver, priorizándolos
Los problemas que se requieren solucionar para este problema son los siguientes:

 Diseñar y desarrollar la página maestra para el sitio web (máster page) así
como del panel de control del administrador del sitio y del panel de control
de las empresas.
 Diseñar la base de datos del sistema
 Diseñar y desarrollar el módulo de administración de municipios
 Diseñar y desarrollar el módulo de administración de categorías
 Diseñar y desarrollar el módulo de administración de empresas
 Diseñar y desarrollar el módulo de administración de catálogo de productos
 Diseñar y desarrollar el módulo de administración de catálogo de servicios
 Diseñar y desarrollar el módulo e administración del buzón de contacto
 Diseñar y desarrollar el módulo de administración de catálogo de
promociones
 Diseñar y desarrollar el módulo de administración de álbumes de imágenes
 Diseñar y desarrolla el menú de categorías de las empresas
 Diseñar y desarrollar el módulo de localización geográfica de las empresas
 Diseñar y desarrollar el módulo que muestra los datos de las empresas y
sus aplicaciones disponibles

15
Alcances y limitaciones

El catálogo de Empresas Chiapas mostrará la información de las empresas que el

administrador convenga con los clientes.

Dentro de las empresas cada una podrá tener las siguientes aplicaciones:

 catálogo de productos
 catálogo de servicios
 catálogo de promociones
 álbumes de imágenes
 información de la empresa
Cada empresa tendrá un menú con una o varias de las aplicaciones dependiendo
el paquete se solicite.

Cada empresa tendrá una cuenta con la que podrá ingresar a un panel de control
que le permitirá administrar las diferentes aplicaciones que contenga.

Cada usuario podrá consultar las diferentes empresas dentro del sitio a través de
un menú que organiza las empresas en categorías y sub categorías, dependiendo
la sub categoría seleccionada aparecerá una lista con un mapa que mostrará las
empresas dentro de éstas.

Dentro del mapa el usuario podrá filtrar las empresas de acuerdo a los municipios
en donde se encuentren dichas empresas.

El administrador del sistema podrá desde un panel de control la información de las

empresas así como las altas y bajas.

El administrador podrá administrar dentro del panel de control la siguiente

información:

 Categorías de las empresas.

 Sub categorías de las empresas.
 Categorías de los productos.

16
  Sub categorías de los productos.
 Empresas en el sistema.
 Aplicaciones disponibles.

Se podrán realizar cambios en los datos de las empresas publicitadas y el

administrador será quién determine los costos y realice las adecuaciones.

17
Fundamento teórico
a) Marco teórico conceptual:
Para la realización del proyecto fue necesario el lenguaje de html y css para la
realización de la platilla que se muestra en el sitio y con la ayuda del programa
artisteer se desarrolló la plantilla de una forma más rápida.
Para los procesos que realiza el sitio fue necesario el lenguaje de php ya que es
un lenguaje fácil de utilizar.
Se utilizó el manejador de bases de datos de mysql para guardar los datos que se
generan.
Par incluir las redes sociales se utilizó el api del sitio de www.facebook.com ya que
es la red social que contiene aplicaciones que son necesarias para el sitio a
desarrollar.
Para el desarrollo de mapas se utilizó el api de googlemaps en su versión 3 que es
la versión más nueva.
Para validar ciertos formularios fue utilizado el lenguaje de java script y la librería
de jquery para generar efectos.
Para las pruebas y el desarrollo de utilizo el servidor local de wamp server.

HTML.
El HTML, es el acrónimo ingles de HyperText Markup Language (lenguaje de
marcas de hipertexto). Los documentos HTML son archivos de texto plano
(también conocidos como ASCII) que pueden ser creados mediante cualquier
editor de texto, aunque también existen programas específicos para editar HTML
(los editores más conocidos son Microsoft FrontPage, Netscape Composer,
Macromedia Dreamweaver y Adobe PageMill), concebidos específicamente para
editar páginas web en HTML. [12]

WAMP server.
WAMP Server es un paquete completo para instalar y configurar un servidor local,
para crear aplicaciones web.

18
El nombre de la herramienta WAMP, viene formado por las siglas de los siguientes
componentes:
 Windows, como sistema operativo.
 Apache, como servidor web.
 MySQL, como gestor de base de datos.
 PHP, como lenguaje de programación.

Una de las ventajas de usar WAMP Server es que la instalación modificará los
archivos de configuración con la ruta donde finalmente se ubicará el programa.
También crea un directorio denominado “www” que será la raíz para los
documentos.
WAMP nos ayuda a simplificar la tarea de instalar Apache + PHP + MySQL en
Windows para crear aplicaciones web, los paquetes que instalan y configuran
automáticamente. [11]

Lenguaje PHP.
Para la programación de este sistema se utilizó el lenguaje PHP, este es
caracterizado por su potencia, versatilidad, robustez y modularidad. Además de
ser un lenguaje fácil de aprender, PHP sigue la corriente del open source, lo que
permite que tanto el intérprete como su código fuente sean accesibles de forma
gratuita.
PHP es un lenguaje muy flexible, como se mencionaba anteriormente, es muy
sencillo de aprender sobre todo para los programadores que están acostumbrados
a manejar lenguajes como C, Perl o Java, debido a que las sintaxis que se
manejan son muy similares.
Es un lenguaje multiplataforma, y está preparado para interactuar con más de 20
tipos de bases de datos. [4]

CSS (Cascade Style Sheet, Hojas de Estilo en Cascada)

CSS son las siglas de “Cascade Style Sheet”, las cuales son especificaciones
sobre los estilos físicos que pueden aplicarse a un documento HTML, esto hace

19
una separación entre la estructura del documento (lógica) y la presentación
(físico). [13]

Java Script.
Este es un lenguaje de programación que ayuda a mejorar las capacidades de una
página HTML de forma sencilla pero poderosa mediante programación fácil de
desarrollar. Tiene la capacidad de manejar ventanas y marcos (frames) de los
navegadores, lo que hace posible crear nuevas ventanas y documentos HTML
dinámicamente. [9]

Artisteer
Software que permite a sus usuarios crear fácilmente plantillas y diseños de sitio
web sin tener que saber mucho acerca de la edición de gráficos o HTML.
Se puede crear código profesional y plenamente compatible con HTML y CSS y
exportar dicho diseño a fin de crear plantillas para el sitio web.[10]

Api de Facebook.
Facebook va mas allá de su portal e interacción entre los
usuarios, ofrece realmente una plataforma completa con herramientas para
desarrolladores donde se pueden hacer aplicaciones para la Web, móviles y
Facebook. Estas aplicaciones ponen en servicio un sin fin de métodos y
propiedades para que las APPs o Webs puedan convertirse en potentes sistemas
de marketing, mediante la recolección de datos y comportamientos de los
usuarios.
La API está desarrollada con una extensa compatibilidad a la mayoría de los SDK
actuales disponibles, PHP, Java Script, Android e IOS SDK, ActionScript
etc. También está disponible una cantidad básica de plugins para la interacción de
sitios con Facebook. [3]

Google Maps Api V3

Google Maps Java Script API permite insertar Google Maps en páginas web. La
versión 3 de esta API está especialmente diseñada para proporcionar una mayor

20
velocidad y que se pueda aplicar más fácilmente tanto a móviles como a las
aplicaciones de navegador de escritorio tradicionales.

El API proporciona diversas utilidades para manipular mapas (como la de la

página http://maps.google.com) y para añadir contenido al mapa mediante
diversos servicios, permitiéndote crear sólidas aplicaciones de mapas en tu sitio
web.

La versión 3 de Google Maps Java Script API es un servicio gratuito disponible

para cualquier sitio web que sea gratuito para el consumidor. [2]

JQuey

jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que
permite simplificar la manera de interactuar con los documentos HTML, manipular
el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con
la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el
BarCamp NYC.

jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la

Licencia MIT y la Licencia Pública General de GNU v2, permitiendo su uso en
proyectos libres y privativos. jQuery, al igual que otras bibliotecas, ofrece una serie
de funcionalidades basadas en JavaScript que de otra manera requerirían de
mucho más código, es decir, con las funciones propias de esta biblioteca se logran
grandes resultados en menos tiempo y espacio. [7][8]

MYSQL

MySQL es un sistema de gestión de bases de datos relacional, licenciado bajo la

GPL de la GNU. Su diseño multihilo le permite soportar una gran carga de forma
muy eficiente. MySQL fue creada por la empresa sueca MySQL AB, que mantiene
el copyright del código fuente del servidor SQL, así como también de la marca.

21
Aunque MySQL es software libre, MySQL AB distribuye una versión comercial de
MySQL, que no se diferencia de la versión libre más que en el soporte técnico que
se ofrece, y la posibilidad de integrar este gestor en un software propietario, ya
que de no ser así, se vulneraría la licencia GPL.

Este gestor de bases de datos es, probablemente, el gestor más usado en el

mundo del software libre, debido a su gran rapidez y facilidad de uso. Esta gran
aceptación es debida, en parte, a que existen infinidad de librerías y otras
herramientas que permiten su uso a través de gran cantidad de lenguajes de
programación, además de su fácil instalación y configuración.[1][6]

Directorio de empresas

Lista o guía de direcciones y nombres, muy útil a la hora de tener que buscar el
contacto de alguna empresa o persona. En un directorio de proveedores figuran
los datos básicos de las empresas como nombre, dirección, teléfono etc. [5]

22
Procedimiento y descripción de las actividades realizadas

Diseño y desarrollo de la base de datos del sistema:

Se diseñó mediante el programa mysql workbench la base de datos del sistema y
se exportó a mysql.

Diseño y desarrollo de la página maestra para el sitio web (máster page):

A través del programa artisteer en su versión 3 se desarrolló la plantilla del sitio
web, un diseñador de la empresa se encargó del diseño de logo.
Mediante php se hicieron los cambios a dicha plantilla para generar las páginas
maestras del sitio, del panel de control de las empresas y del panel de control del
administrador del sitio y se desarrollo un script para el inicio de sesión para que las
empresas puedan entrar a su panel de control.

Seguridad del sitio:

Para la seguridad del sitio se evitaron en los formularios las inyecciones de código
mediante una función llamada mysql_real_escape_string($variable); que fue
colocada en cada dato que era recibida en un formulario.

Diseño y desarrollo del módulo de administración de municipios:

Se descargó una base de datos del Instituto Nacional de Estadística y Geografía
(INEGI) que contenía los datos de los diferentes municipios del estado de Chiapas
en formato Excel, posteriormente mediante un algoritmo generado en php que lee
las columnas del documento en Excel que contenía los nombres de los municipios
y los números de municipios que maneja en el INEGI para posteriormente
guardarlos en la base de datos del sitio esto con la finalidad de tener dentro de la
base de datos todos los municipios para dar de alta las empresas y poder
separarlas posteriormente dependiendo el municipio en donde se localizan

Diseño y desarrollo del módulo de administración de categorías:

23
Mediante php se generó el formulario de alta de las categorías de las empresas
Para ser guardada posteriormente en la base de datos.

Posteriormente para facilitar el uso de este módulo se incluyo en la misma página

el listado de las categorías junto con los botones que permiten editar y borrar las
categorías.

Se desarrolló el script que permite editar las categorías.

Se desarrolló una función en javascript y php que permite eliminar los datos de la
base de datos, esta función sirvió para todos los demás módulos administrativos.

Posteriormente se desarrolló un apartado que contenía el formulario y el listado de

las sub categorías de las empresas dicho formulario contenía los siguientes datos:
 Nombre de la categoría
 Nombre de la sub categoría
En el listado que se generó se muestran los siguientes datos:

 Nombre de la categoría
 Nombre de la sub categoría
 Botón para editar
 Botón para eliminar
Se desarrolló el script que permite editar las sub categorías de las empresas.

Diseño y desarrollo del módulo de administración de empresas:

Se generó un script que permite dar de alta a las empresas mediante un formulario
en html.
Los datos del formulario fueron los siguientes:
 Categoría de la empresa
 Sub categoría de la empresa
 Nombre de la empresa
 Rfc
 Horario

24
  Teléfono
 Celular
 Correo electrónico
 Contraseña
 Facebook
 Twitter
 Sitio web
 Palabras clave
 Áreas con que se relaciona
 Logo
 Municipio
 Colonia
 Calle
 Numero
 Código postal
 Descripción

Mediante el api de google maps y java script se generó una función que permite
posicionar en el mapa la dirección de las empresas.

Mediante php se generó el script que introduce los datos en la base de datos y
que guarda la imagen del logo de la empresa en un carpeta dentro del sistema.

Se generó un script con php y html que muestra el listado de las empresas en el
sistema junto con los botones que permiten editar y borrar.

Se generó el script para poder editar los datos de la empresa.

Dentro del listado se creó una paginación con php para poder mostrar 20
empresas por página.

25
Diseño y desarrollo del módulo de administración de catálogo de productos
Mediante html se desarrollaron los formularios de alta y edición de los productos.
Los datos de los formularios son los siguientes:
 Categoría del producto
 Nombre del producto
 Precio
 Imagen
 Descripción
Mediante jquery se desarrolló una función que llama a este formulario.

Se desarrolló una función en javascript que valida los campos del formulario.

Mediante jquery se desarrolló una función que dependiendo la categoría del

producto generaba las sub categorías dentro de esta.

Mediante php se generó el script que introduce los datos del producto en la base
de datos

Se generó un listado con php y html para mostrar los productos junto con los
botones para editar y borrar los productos.

Se genero un script con php y html que permite la edición del producto.

Diseño y desarrollo del módulo de administración de catálogo de servicios

Mediante html se desarrollaron los formularios de alta y edición de los servicios.

Los datos de los formularios son los siguientes:
 Nombre del servicio
 Precio
 Descripción

Mediante jquery se desarrolló una función que llama a este formulario.

Se desarrolló una función en javascript que valida los campos del formulario.
26
Mediante php se generó el script que introduce los datos del producto en la base
de datos

Se generó un listado con php y html para mostrar los productos junto con los
botones para editar y borrar los servicios.

Se desarrolló mediante php y html el script que permite la edición de los servicios.
Se genero una paginación para los servicios para que se muestren 20 servicios
por página.
Diseño del módulo de administración del buzón de contacto
Se desarrolló un formulario mediante html para contactar con el administrador de
la página, los datos del formulario son los siguientes:
 Nombre
 Correo electrónico
 Comentario

Se desarrolló un listado en html y php que muestra los comentarios al

administrador.

Se desarrolló un formulario para que el administrador del sitio pueda contestar con
un correo electrónico los comentarios.

Se desarrolló un formulario mediante html para contactar con los administradores

de las empresas, los datos del formulario son los siguientes:
 Nombre
 Correo electrónico
 Comentario

Se desarrolló un listado en html y php que muestra los comentarios al

administrador de la empresa.

Se desarrolló un formulario para que el administrador de la empresa pueda

contestar con un correo electrónico los comentarios.

27
Diseño y desarrollo del módulo de administración de catálogo de
promociones

Mediante html se desarrollaron los formularios de alta y edición de las

promociones.

Mediante una librería de jquery se desarrolló un calendario que permite

seleccionar fechas.

Los datos de los formularios son los siguientes:

 Titulo de la promoción
 Fecha de inicio
 Fecha de finalización
 Descripción
 Condiciones

Mediante jquery se desarrolló una función que llama a este formulario.

Se desarrolló una función en javascript que valida los campos del formulario.

Mediante php se generó el script que introduce los datos del producto en la base
de datos y guarda la imagen de la promoción en una carpeta.

Se generó un listado con php y html para mostrar las promociones junto con los
botones para editar y borrar las promociones

Se genero una paginación mediante php para que se muestren 20 promociones

por página.

se desarrollo un botón diferente para eliminar las promociones este botón llama a
una función en javascript que pregunta si se desea borrar la promoción al
seleccionar que si, la función de java script llama a una función en php que borra
la promoción de la base de datos junto con la imagen que estaba guardada en la
carpeta.

28
Diseño del módulo de administración de álbumes de imágenes
Se desarrolló mediante html un formulario para dar de alta los álbumes de
imágenes.

Posteriormente se desarrolló mediante jquery, php, hmtl y flash un script que sube
las imágenes al servidor.

Se generó un script que muestra las imágenes subidas así como una función que
permite borrar las imágenes que se elijan de la base de datos y de la carpeta en la
que fueron guardadas

Se generó un listado con php y html que muestra los álbumes así como los
botones para editar y borrar.

Se realizó una paginación que muestra 20 álbumes de fotos por cada página.

Diseño y desarrollo del menú de categorías de las empresas

Mediante php y html se desarrolló el menú lateral de la página maestra que lista
las categorías y sub categorías de las empresas mediante una consulta a la base
de datos.

Diseño y desarrollo del módulo de localización geográfica de las empresas

Se desarrolló mediante php y html un módulo que lista las empresas dependiendo
la sub categoría y/o municipio.

Mediante php y el api de google maps se desarrolló una función que muestra en
un mapa las empresas dependiendo de la sub categoría y/o municipio mediante
marcadores.

Mediante el api de google maps se realizó una función que muestra la información
de una empresa al hacer clic sobre el marcador de esta empresa.

29
Mediante php se realizó una paginación de las empresas para mostrar 25 por
página.

Diseño y desarrollo del módulo que muestra los datos de las empresas y sus
aplicaciones disponibles

Mediante php y html se desarrolló el script que muestra la información de la

empresa seleccionada en el listado (nombre, dirección, teléfono, etc.).

Mediante el api de facebook se implementó la sección de comentarios y el botón

like.

Se desarrollo mediante php, html y la api de google maps un botón que al hacer
clic muestra un mapa con la ubicación geográfica de la empresa mediante un
marcador en dicho mapa.

Mediante php y html se genero un script que muestra los álbumes de fotos con los
que cuenta la empresa.

Mediante jquery, php y html se desarrollo un script que muestra el álbum de fotos
seleccionado junto con las imágenes que contiene en una galería.

Mediante php y html se genero el script que muestra los servicios de la empresa
en un listado.

Se generó con php una paginación para el script que muestra los servicios para
que se muestren 20 servicios por página.

Se generó mediante php y html un script que muestra los diferentes productos de
la empresa seleccionada junto con su información básica (nombre, precio, imagen)
junto con un botón que permite ver más a detalle las características del producto.

Se genero mediante php, html y el api de facebook el script que muestra más a
detalle las características del producto seleccionado en el listado junto con la
sección de comentarios y el botón like de facebook.

30
Resultados, planos, gráficas, prototipos y programas

Actualmente la nueva versión de empresaschiapas.com ya se encuentra en línea

como resultado del trabajo presentado.

Base de datos del sitio

Imagen 5

31
Caso de uso de lo que puede hacer el usuario dentro del sitio

Diagrama 1

En la siguiente imagen se puede apreciar la página de inicio de

empresaschiapas.com que muestra el menú con las categorías en las que están
separadas las empresas.

32
 Imagen 6

En la siguiente imagen se muestra la parte inferior que muestra los comentarios de

facebook de la página de inicio.

Imagen 7

En la siguiente imagen se muestra la página que muestra el listado de las

empresas junto con el mapa que muestra la localización geográfica de las
empresas mediante marcadores.

33
Imagen 8

En la siguiente imagen se muestra la página que muestra los detalles de la

empresa seleccionada en el listado junto con las secciones que se pueden ver en
la empresa.

Imagen 9

34
En la siguiente imagen se muestra el mapa que muestra la ubicación geográfica
de la empresa seleccionada.

Imagen 10

En la siguiente imagen se muestra el listado de los álbumes dependiendo la

empresa para este ejemplo se creó un álbum demo.

Imagen 11

En la siguiente imagen se muestran las imágenes dentro del álbum demo

Imagen 12
35
En la siguiente imagen se muestra la galería de imágenes al seleccionar una
imagen.

Imagen 13

En la siguiente imagen se muestra el catálogo de productos dependiendo la

empresa seleccionada

Imagen 14
En la siguiente imagen se muestra el producto seleccionado, muestra los
comentarios en facebook así como los detalles de este producto.

36
Imagen 15

En la siguiente imagen se muestra el catálogo de servicios de la empresa

seleccionada.

Imagen 16

En la siguiente imagen se muestra la página que muestra las promociones del

sitio.

37
Imagen 17

En la imagen siguiente se muestra la página que muestra más a detalle la

promoción seleccionada.

Imagen 18

En la imagen siguiente se muestra el buzón de contacto para cada empresa.

Imagen 19

38
Diagrama de caso de uso para las empresas

Diagrama 2
En la imagen siguiente se muestra la página para el inicio de sesión de las
empresas.

39
Imagen 20

En la siguiente imagen se muestra la página de inicio del panel de control para las
empresas

Imagen 21

En la siguiente imagen se muestra la página de administración de álbumes de

fotos.

Imagen 22
El botón nuevo álbum genera un formulario para dar de alta el álbum como se
muestra en la siguiente imagen.

Imagen 23

Al crear un nuevo álbum te muestra las siguientes opciones:

40
  Cancelar todo: cancela todas imágenes que se están subiendo.
 Terminar: este botón te manda al administrador de álbumes.
 Eliminar: este botón elimina las imágenes seleccionadas.
 Examinar: este botón sirve para seleccionar las imágenes que se quieran
subir.
En la imagen siguiente podemos observar dichos botones.

Imagen 24

Se pueden subir nuevas imágenes en este apartado como se muestra en la

siguiente imagen.

Imagen 25

41
En la siguiente imagen se puede observar el buzón de contacto de la empresa
donde se pueden ver los comentarios y borrarlos.

Imagen 26

En la siguiente imagen se muestra la página de administración del catálogo de

productos.

Imagen 27

El botón nuevo producto genera un formulario para dar de alta un nuevo producto
como se muestra en la siguiente imagen.

42
Imagen 28

En la siguiente imagen se muestra la página que muestra el listado de los

productos dentro de la empresa

Imagen 29
Al presionar el botón nuevo servicio se genera un formulario para dar de alta a un
nuevo servicio como se muestra en la siguiente imagen.

43
Imagen 30
En la siguiente imagen se muestra la página que muestra el listado de las
promociones en el sistema así como un botón que genera un formulario para dar
de alta una nueva promoción.

Imagen 31

44
Diagrama de caso de uso para el administrador del sitio

Diagrama 3
En la siguiente imagen se muestra la página que muestra el listado de las
categorías de las empresas junto con el formulario para dar de alta una nueva
categoría.

45
Imagen 32
En la imagen siguiente se muestra la página que muestra el listado con las sub
categorías de las empresas junto con el formulario para dar de alta una nueva sub
categoría.

46
Imagen 33
En la siguiente imagen se muestra la página que muestra el listado de las
empresas junto con el buscador de empresas y el botón para ir al formulario que
da de alta a una nueva empresa.
El botón ver más te muestra los datos de la empresa.

Imagen 34
En la siguiente imagen se muestra el formulario para dar de alta una nueva
empresa.

47
Imagen 35

48
Imagen 36

49
Conclusiones y recomendaciones
Se pudieron cumplir con los objetivos que se habían planteado y gracias a las
diferentes técnicas empleadas como el uso de una página maestra se pudo crear
un sitio fácil de editar en cuanto a diseño.

Debido al diseño del sistema se obtuvo un sistema flexible de fácil manejo y que
permite reducir costos para los que adquieran un espacio en el sitio

La información de las empresas ahora es manejada por las misma lo que redujo
en gran medida el trabajo para el administrador del sitio y permite a las empresas
tener el control de su información, también se redujeron los tiempos para subir
información.

Debido a que el sitio ahora tiene integrada la red social facebook.com se puede
generar mayor número de visitas al sitio lo que genera un mayor alcance.

Al usar el api de google maps los usuarios que visiten el sitio pueden conocer
mejor la ubicación geográfica de las empresas.

Se puede implementar el sitio para otros estados de la republica mexicana debido

al diseño del sistema

Se pueden desarrollar nuevos módulos que pueden ser incluidos posteriormente

de manera más sencilla.

Por los puntos anteriores empresaschiapas.com podría convertirse en un sitio

más atractivo y de mayor competitividad con otros sitios de publicidad en internet.

Aunque el sistema permite a las empresas subir su información es necesario tener

un administrador para manejar la parte administrativa del sistema.

50
Este proyecto en lo personal me ha servido para el desarrollo de mis habilidades
como programador y desarrolló mi capacidad de buscar soluciones a problemas
de una forma organizada.
El proyecto ayudó a que conociera diferentes tipos de técnicas y Apis que podrían
ser de utilidad en mi futuro profesional y al desarrollo de otros proyectos.

51
Referencias bibliográficas y virtuales

1.-http://es.wikipedia.org/wiki/MySQL fecha y hora de consulta: 13-11-2012-12:40

2.-https://developers.google.com/maps/documentation/javascript/?hl=es fecha y
hora de consulta: 13-11-2012-12:00

3.-https://developers.facebook.com/ fecha y hora de consulta: 10-09-2012-14:00

4.-http://php.net/manual/es/langref.php fecha y hora de consulta: 09-07-2012-

18:00

5.-http://www.definicionabc.com/general/directorio.php fecha y hora de consulta:

12-11-2012 13:00
6.-http://danielpecos.com/docs/mysql_postgres/x57.html fecha y hora de consulta:
09-07-2012-18:00

7.-http://es.wikipedia.org/wiki/JQuery fecha y hora de consulta: 13-11-2012-12:40

8.-Fundamentos de jquery

Rebecca Murphey
Creative Commons
9.-Introducción a Java Script
Javier Eguíluz Pérez
librosweb.es
25 de marzo de 2009
10.-http://svpermvsica.blogspot.mx/2012/10/artisteer-4-full-espanol-crack-

keygen.html fecha y hora de consulta: 22-11-2012 14:00

11.-http://es.wikipedia.org/wiki/WAMP fecha y hora de consulta: 13-11-2012-12:40

12.-http://es.wikipedia.org/wiki/HTML fecha y hora de consulta: 13-11-2012-12:40

13.-http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada fecha y hora de

consulta: 22-11-2012 14:00

52