II

Agradecimientos

A Dios, por darme la oportunidad de vivir y por acompañarme en todo momento, por
darme salud e iluminar mi mente para lograr todos mis objetivos. Por los triunfos y
los momentos difíciles que me han enseñado a valorarlo cada día más.

A mis padres, que han sabido formarme con buenos valores, sentimientos, hábitos,
por su apoyo, consejos, compresión, amor y por apoyarme con los recursos
necesarios para seguir estudiando.

A mis hermanas, por acompañarme en este camino y formar parte de mi vida,

gracias por las risas, triunfos y fracasos que hemos compartido.

A Belén de Jesús, Alejandro Flores y Erick Ramírez por su apoyo incondicional en

el transcurso de este periodo de estudio, por compartir momentos de alegría,
tristeza y demostrarme que siempre podré contar con ustedes.

A mis profesores, gracias por su tiempo, por su apoyo así como por los
conocimientos que me transmitieron durante todo este periodo de estudio.

III
ÍNDICE DE CONTENIDO

Agradecimientos .................................................................................................. III

CAPÍTULO I INTRODUCCIÓN

1.1 Resumen....................................................................................................... 2

1.2 Abstract. ....................................................................................................... 3

1.3 Introducción. ................................................................................................ 4

1.5 Objetivos. ..................................................................................................... 6

1.5.1 Objetivo general. ..................................................................................... 6

1.5.2 Objetivos específicos. ............................................................................. 6

CAPÍTULO II MARCO HISTÓRICO

2.1 Antecedentes históricos. ............................................................................ 8

2.2 Misión. .......................................................................................................... 8

2.3 Visión. ........................................................................................................... 8

2.4 Políticas. ....................................................................................................... 9

2.5 Principales áreas de la empresa. ............................................................... 9

2.6 Descripción del área de realización de estadía. ........................................ 9

2.7 Organigrama. ............................................................................................. 10

CAPÍTULO III MARCO TEÓRICO

3.1 Desarrollo Web. ......................................................................................... 12

3.1.1 Backend. ............................................................................................... 12

3.1.2 Frontend. ............................................................................................... 12

3.2 Diseño Web Adaptable. ............................................................................. 12

3.3 Herramientas de Desarrollo Web.............................................................. 13

3.3.1 HTML. ................................................................................................... 13

3.3.2 CSS. ...................................................................................................... 13

IV
 3.3.3 Bootstrap. .............................................................................................. 14

3.3.4 JavaScript. ............................................................................................ 15

3.3.5 PHP. ...................................................................................................... 15

3.3.6 MySQL. ................................................................................................. 16

CAPÍTULO IV METODOLOGÍA

4.1 Metodología. ............................................................................................... 18

4.2 Descripción de Actividades. ..................................................................... 19

4.2.1 Análisis. ................................................................................................. 19

4.2.2 Diseño. .................................................................................................. 19

4.2.3 Ejecución. .............................................................................................. 19

4.2.4 Pruebas. ................................................................................................ 19

4.3 Planeación. ................................................................................................. 20

4.4 Implementación. ........................................................................................ 21

4.4.1 Alcance. ................................................................................................ 21

4.4.2 Requerimientos del Portal Web. ............................................................ 21

4.4.2.1 Requerimientos Funcionales. ...................................................... 22

4.4.2.2 Requerimientos No Funcionales. ................................................ 22

4.4.3 Análisis de la Base de Datos. ................................................................ 23

4.4.4 Análisis y Diseño del Portal Web........................................................... 25

4.4.5 Estructura de módulos en el Administrador de Contenido. ................... 29

4.4.6 Programación del Portal Web. .............................................................. 31

4.4.7 Pruebas. ................................................................................................ 35

4.5 Evaluación. ................................................................................................. 37

CAPÍTULO V RESULTADOS Y DISCUSIÓN

5.1 Resultados. ................................................................................................ 39

V
5.2 Discusión.................................................................................................... 44

5.3 Conclusiones. ............................................................................................ 45

Bibliografía......................................................................................................... 46

VI
ÍNDICE DE ILUSTRACIONES

CAPÍTULO II MARCO HISTÓRICO

Ilustración 1 2.1 Logo ImagenInsite......................................................................... 8
Ilustración 2 2.2 Organigrama Empresarial ........................................................... 10
CAPÍTULO III MARCO TEÓRICO
Ilustración 3 3.1 Logo HTML5 ............................................................................... 13
Ilustración 4 3.2 Logo CSS3 .................................................................................. 14
Ilustración 5 3.3 Logo Bootstrap ............................................................................ 14
Ilustración 6 3.4 Logo JavaScript .......................................................................... 15
Ilustración 7 3.5 Logo PHP .................................................................................... 15
Ilustración 8 3.6 Logo MySQL ............................................................................... 16
CAPÍTULO IV METODOLOGÍA
Ilustración 9 4.1 Etapas del Modelo de Prototipo .................................................. 18
Ilustración 10 4.2 Creación de la BD ..................................................................... 23
Ilustración 11 4.3 Montaje del Script ..................................................................... 24
Ilustración 12 4.4 Clase BD ................................................................................... 24
Ilustración 13 4.5 Estructura del índex .................................................................. 26
Ilustración 14 4.6 Diseño final del índex ................................................................ 28
Ilustración 15 4.7 Estilos diferentes del Portal Web .............................................. 29
Ilustración 16 4.8 Módulos en el Administrador de Contenido .............................. 30
Ilustración 17 4.9 Apartado para importar las clases ............................................. 32
Ilustración 18 4.10 Función slider .......................................................................... 32
Ilustración 19 4.11 Función Ponentes Destacados ............................................... 32
Ilustración 20 4.12 Función Eventos Destacados.................................................. 33
Ilustración 21 4.13 Función Patrocinadores .......................................................... 33
Ilustración 22 4.14 Función Noticias Destacadas .................................................. 33
Ilustración 23 4.15 Programación de la Función ponentesDestacados ................. 34
Ilustración 24 4.16 Llamada a la Función ponentesDestacados ........................... 34
Ilustración 25 4.17 Vista en un Ordenador ............................................................ 35
Ilustración 26 4.18 Vista en Teléfono Inteligente ................................................... 36
Ilustración 27 4.19 Vista en Tableta ...................................................................... 36

VII
CAPÍTULO V RESULTADOS Y DISCUSIÓN

Ilustración 28 5.1 Módulo Ponentes ...................................................................... 39

Ilustración 29 5.2 Apartado del módulo Ponentes ................................................. 40
Ilustración 30 5.3 Módulo Noticias......................................................................... 40
Ilustración 31 5.4 Módulo Galería .......................................................................... 41
Ilustración 32 5.5 Módulo Programa de Actividades ............................................. 41
Ilustración 33 5.6 Módulo Precios ......................................................................... 42
Ilustración 34 5.7 Módulo Contacto ....................................................................... 42
Ilustración 35 5.8 Módulo Preguntas ..................................................................... 43
Ilustración 36 5.9 Módulo Registro ........................................................................ 43

ÍNDICE DE TABLAS
CAPÍTULO IV METODOLOGÍA
Tabla 1 4.1 Cronograma de Actividades ............................................................... 21
Tabla 2 4.2 Tabla de Evaluación ........................................................................... 37

VIII
TABLA DE SIGLAS Y ABREVIATURAS

HTML HyperText Markup Language

CSS Cascading Style Sheets

PHP Hypertext Preprocessor

MySQL My Structured Query Language

TIC Tecnologías de la Información y Comunicación

TI Tecnologías de la Información

HTTP Hypertext Transfer Protoco

W3C World Wide Web Consortium

BD Base de Datos

SGBD Sistema Gestor de Base de Datos

IX
 CAPÍTULO I
INTRODUCCIÓN
1.1 Resumen.

Este proyecto consiste en el desarrollo de un portal web adaptativo y

autoadministrable, con el objetivo de que este sea capaz de difundir cualquier tipo
de Congreso, facilitar la publicación y gestión de información, con un diseño capaz
de adaptarse en múltiples dispositivos como ordenadores, tabletas y teléfonos
inteligentes.

Las herramientas utilizadas para el desarrollo del proyecto fueron: HTML, CSS,
Bootstrap, JavaScript, PHP y MySQL. Estas herramientas tecnológicas permitieron
desarrollar un portal web dinámico y con un diseño responsivo.

El proyecto se dividió en cuatro fases: Análisis, Diseño, Ejecución y Pruebas. Esto

con la finalidad de organizar y optimizar la forma de trabajo.

La primera etapa que se realizó para el desarrollo del proyecto fue el levantamiento
de requerimientos, para esto, fue necesario consultar diferentes páginas web de
Congresos, de esta manera se analizaron y conocieron cuáles son las necesidades
de los posibles clientes a quienes va dirigido este portal web.

Con base a la investigación realizada, se detectaron los servicios que ofrecen los
portales web de Congresos, de esta manera se estructuró las secciones que
conformarían el portal web.

Mediante el uso de este portal web, ofrecerá a los usuarios un contenido más amplio
sobre un Congreso, así como también información actualizada y en tiempo real.

2
1.2 Abstract.

3
1.3 Introducción.

Internet en una herramienta muy útil que nos facilita obtener información de todo
tipo, tiene un gran impacto en el área de la educación, salud, trabajo,
entretenimiento, etc., a nivel mundial. Con la aparición del Internet se abre un mundo
de posibilidades para aquellas personas que hacen uso de este, una de ellas es la
posibilidad de comunicación entre personas a largas distancias.

Mediante el uso de portales web se ofrece a los usuarios un contenido más amplio
sobre un tema en concreto, así como también información actualizada y en tiempo
real, siempre y cuando dicho portal cuente con una base de datos.

Actualmente, algunas organizaciones o empresas, tienen dificultades para

encontrar una estrategia de difusión de un evento o congreso. De este modo, no
cuentan con algún método mediante el cual su audiencia objetiva tenga acceso a la
información acerca de esos eventos o congresos. Hoy en día se cuentan con
portales web como una herramienta para el intercambio de información electrónica,
pero muchas veces algunas organizaciones no adoptan esta herramienta
tecnológica, porque tiene la idea de que son de un costo elevado o difícil de
administrar.

El proyecto realizado se centra en el desarrollo de un Portal Web para Congresos,

que sea capaz de promocionar y divulgar a una audiencia objetiva información
acerca de un Congreso, el proyecto también tiene como objetivo, generar un portal
de fácil uso, con una administración sencilla, un diseño web capaz de adaptarse a
diferentes dispositivos.

Para el desarrollo de este proyecto se empleó la metodología de prototipos, esto

con la finalidad de que al obtener el resultado esperado, pueda seguir
evolucionando y obtener un software de mayor calidad.

Este documento se estructuró en cinco capítulos los cuales son:

Capítulo I: Introducción, donde se introduce el tema analizando el problema hallado,

definiendo para la resolución un objetivo general y objetivos específicos.

4
Capítulo II: Marco Histórico, contiene información de la empresa, organigrama y en
qué área se estuvo trabajando.

Capítulo III: Marco Teórico, aquí se contemplan las herramientas a utilizar y se da

una descripción de cada una de ellas.

Capítulo IV: Metodología, el cual consiste en aplicar la metodología de desarrollo

para alcanzar el objetivo general.

Capítulo V: Resultados y Discusión, donde se exponen los resultados y

conclusiones obtenidas a lo largo del desarrollo del proyecto.

1.4 Planteamiento del problema.

Las Tecnologías de la Información y Comunicación (TIC) están cambiando la forma

tradicional de hacer las cosas, las personas que trabajan en gobierno, en empresas,
en el área de la educación utilizan tecnologías.

Por ejemplo si se requiere realizar un evento y conseguir la mayor asistencia posible

de personas, hoy en día tenemos las herramientas necesarias para conseguirlo. Un
congreso, curso, taller o conferencia tienen algo en común, que son eventos y la
metodología de difusión es común en todos ellos.

Normalmente, la finalidad de un evento o congreso es dar a conocer productos o

servicios, dar a conocer nuevos avances o descubrimientos en determinadas
materias, exposiciones o debates de múltiples ponencias, etc.

El éxito de un Congreso depende de los objetivos de los organizadores. Entre esos

objetivos se encuentra el conseguir la mayor asistencia posible. Para lograr esto, es
necesario encontrar una estrategia de difusión que llegue a la audiencia objetiva, y
les interese asistir al Congreso o evento.

Cada día es más eficiente la manera de dar a conocer un lugar, evento o negocio
por medio de una página web, esto es más demandante día con día ya que la
mayoría de las personas cuentan con un celular, tableta u ordenador.

La creación de un portal web para un Congreso puede incluir diversas secciones

como: la temática y los objetivos que motivan a la reunión, quienes son los

5
ponentes, información sobre la sede de la reunión, servicios e infraestructura, la
fecha y duración del Congreso, imágenes, videos, noticias; el cual se podrá
actualizar el contenido, para despertar un mayor interés entre los posibles
asistentes. El portal también puede incluir enlaces a las Redes Sociales.

Un portal web es una herramienta tecnológica que puede ofrecer un resultado

positivo en la organización de un Congreso.

1.5 Objetivos.

1.5.1 Objetivo general.

Desarrollar un portal web adaptativo y autoadministrable, que sea capaz de difundir

cualquier tipo de Congreso, facilitar la publicación y gestión de información, con un
diseño capaz de adaptarse en múltiples dispositivos.

1.5.2 Objetivos específicos.

 Identificar los requerimientos imprescindibles para el desarrollo del portal

web.
 Presentar un buen diseño del portal web y que este sea dinámico.
 Crear un portal web con un diseño responsivo, que este pueda ser
visualizado en cualquier dispositivo.
 Desarrollar un portal web de fácil administración para el cliente, de modo que
este pueda difundir la información necesaria acerca de un Congreso.
 Vincular las redes sociales para una mejor interactividad entre los
interesados de un Congreso.

6
 CAPÍTULO II
MARCO HISTÓRICO
2.1 Antecedentes históricos.

ImagenInsite es una empresa dedicada a las TI con experiencia en el desarrollo de

aplicaciones móviles, aplicaciones web así como investigación y desarrollo
tecnológico web, teniendo práctica en el sector gubernamental, educativo, comercial
e informativo.

ImagenInsite es una empresa competitiva en la región de Tehuacán con capacidad

tecnológica para desarrollar aplicaciones a la medida del cliente y de fácil
administración para el mismo, ubicándolo como una de las mejores opciones del
mercado. Adicionalmente ofrecen servicios adicionales como venta de dominios,
hospedaje, multimedia y paseos virtuales.

La empresa se caracteriza y es reconocida por la alta calidad de sus servicios y

productos así como el buen trato y soporte técnico que se brinda a los clientes
respecto a los productos y servicios que ofrece.

Ilustración 1 2.1 Logo ImagenInsite

2.2 Misión.

Desarrollar y diseñar páginas web creativas, sistemas web, y servicios en línea con
lo último en tecnología para la usabilidad y accesibilidad de los mismos,
satisfaciendo con esto las expectativas de nuestros clientes.

2.3 Visión.

Ser una empresa de clase internacional que brinde lo último en desarrollo web, con
personal capacitado y en constante actualización, ofreciendo calidad en nuestros
productos y confianza para nuestros clientes, desarrollando productos nuevos e
ingeniosos a través de la investigación.

8
2.4 Políticas.

La gestión y Administración de los sistemas y servidores que están en operación

deberá ser 24x7 durante los 365 días del año.

Todos los trabajos de mantenimiento y respaldado deberán planificarse y ser

ejecutados en los horarios de menor impacto para el cliente.

Se deberán establecer mecanismos y herramientas adecuadas que permitan un

control y evaluación sobre el grado de servicio y niveles de calidad de los servicios
y procesos realizados

Los proyectos deberán ser cumplidos en los plazos señalados por los contratos y
cumplir con las especificaciones técnicas contratadas

El desarrollo de los proyectos deberá ser ejecutado en base a los estándares

establecidos por la empresa

Por cada proyecto realizado deberá entregarse un informe técnico que informara el
estado del proyecto

Todos los empleados de la empresa deberán estar identificados plenamente con la

misión, visión y objetivos de la empresa.

2.5 Principales áreas de la empresa.

 Dirección General: Área encargada de llevar el control y administración de la

empresa ImagenInsite.
 Coordinación de proyectos y desarrollos: Área responsable de verificar cada
uno de los proyectos desde su inicio hasta su fin.
 Coordinación administrativa y de ventas: Área encargada de llevar los
procesos administrativos, ventas y el contacto con los clientes.

2.6 Descripción del área de realización de estadía.

Durante mi estadía en la empresa ImagenInsite fui asignado en el área de personal

de apoyo, brindando apoyo al técnico programador en el desarrollo del proyecto
presentado.

9
2.7 Organigrama.

El presente organigrama muestra las áreas que conforman la empresa

ImagenInsite, la realización de estadía se realizó en el área de Coordinación de
Proyectos y Desarrollo apoyando al técnico programador.

Dirección General
Mtro. Christian Galicia
García

Coordinación de Coordinación
proyectos y administrativa y de
desarrollo ventas
Mtro. Christian Galicia Mtro. Christian Galicia
García García

Técnico
programador

Personal de apoyo
Alumnos de estadía o
practicantes

Ilustración 2 2.2 Organigrama Empresarial

10
 CAPÍTULO III
MARCO TEÓRICO
3.1 Desarrollo Web.

Cuando se habla de desarrollo web se hace referencia a aquellos sistemas o sitios

web los cuales apuntan a internet o intranet. Cabe mencionar que existen múltiples
lenguajes para su desarrollo; su máximo referente HTML en el cual se han
desarrollado la mayor parte de sitios o páginas que ahora conocemos. Tiene como
característica la interacción Cliente/Servidor a través del protocolo HTTP.

3.1.1 Backend.

El backend es el área que se dedica a la parte lógica de un sitio web, es el

encargado de que todo funcione como debería, el backend es la parte de atrás que
de alguna manera no es visible para el usuario ya que no se trata de diseño, o
elementos gráficos, se trata de programar las funciones que tendrá un sitio.

El backend trabaja todo el tiempo con lenguajes de programación, lenguajes que

requieren de una lógica ya que esta área es también la encargada de optimizar
recursos, de la seguridad de un sitio y demás.

3.1.2 Frontend.

Es la parte del desarrollo web que se dedica de la parte frontal de un sitio web, en
pocas palabras del diseño de un sitio web, desde la estructura del sitio hasta los
estilos como colores, fondos, tamaños hasta llegar a las animaciones y efectos.

3.2 Diseño Web Adaptable.

El diseño web adaptable o también conocido con el termino responsive design

corresponde a una tendencia de creación de páginas web que pueden ser
visualizadas perfectamente en todo tipo de dispositivos, desde ordenadores de
escritorio hasta teléfonos inteligentes o tabletas. Con este tipo de diseño no se
necesita tener una versión para cada dispositivo, una sola web se adapta a todos
ellos.

En lugar de construir una website para cada tipo de dispositivo (teléfono inteligente,
tableta, ordenador, laptop e incluso, hoy en día, para Smart TV), se crea una sola
website. De esta forma, la website detecta desde qué clase de dispositivo está
accediendo el usuario y muestra la versión más optimizada para ese medio,

12
reorganizando los elementos de la web e incluso discriminando algunos de ellos.
Una web creada con responsive web design mejora el posicionamiento en
buscadores u optimización de motores de búsqueda.

3.3 Herramientas de Desarrollo Web.

3.3.1 HTML.

HTML es un lenguaje de etiquetas (también llamado lenguaje de marcado) y las

páginas web habituales están formadas por cientos o miles de pares de etiquetas.

El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas

define un organismo sin ánimo de lucro llamado World Wide Web Consortium, más
conocido como W3C. Como se trata de un estándar reconocido por todas las
empresas relacionadas con el mundo de Internet, una misma página HTML se
visualiza de forma muy similar en cualquier navegador de cualquier sistema
operativo.

El propio W3C define el lenguaje HTML como "un lenguaje reconocido

universalmente y que permite publicar información de forma global". Desde su
creación, el lenguaje HTML ha pasado de ser un lenguaje utilizado exclusivamente
para crear documentos electrónicos a ser un lenguaje que se utiliza en muchas
aplicaciones electrónicas como buscadores, tiendas online y banca electrónica.

Ilustración 3 3.1 Logo HTML5

3.3.2 CSS.

Por sus siglas Cascading Style Sheet (CSS) o mejor conocidas como Hojas de Estilo
en Cascada; es un lenguaje de hojas de estilos creado para controlar el aspecto o
presentación de los documentos electrónicos definidos con HTML. CSS es la mejor

13
forma de separar los contenidos y su presentación y es imprescindible para crear
páginas web complejas.

Al crear una página web, se utiliza en primer lugar el lenguaje HTML para marcar
los contenidos, es decir, para designar la función de cada elemento dentro de la
página: párrafo, texto destacado, tabla, lista de elementos, etc.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto
de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y
vertical entre elementos, posición de cada elemento dentro de la página, etc.

Ilustración 4 3.2 Logo CSS3

3.3.3 Bootstrap.

Es un framework CSS desarrollado inicialmente por Twitter que permite dar forma
a un sitio web mediante librerías CSS que incluyen tipografías, botones, cuadros,
menús y otros elementos que pueden ser utilizados en un sitio web.

Bootstrap es una excelente herramienta para crear interfaces de usuario limpias y

totalmente adaptables a todo tipo de dispositivos y pantallas, sea cual sea su
tamaño. Es compatible con la mayoría de navegadores web del mercado.

Ilustración 5 3.3 Logo Bootstrap

14
3.3.4 JavaScript.

JavaScript es un lenguaje de programación que se utiliza principalmente para crear

páginas web dinámicas.

Una página web dinámica es aquella que incorpora efectos como texto que aparece
y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas
con mensajes de aviso al usuario.

JavaScript es un lenguaje de programación interpretado, por lo que no es necesario

compilar los programas para ejecutarlos. En otras palabras, los programas escritos
con JavaScript se pueden probar directamente en cualquier navegador sin
necesidad de procesos intermedios.

Ilustración 6 3.4 Logo JavaScript

3.3.5 PHP.

PHP es un lenguaje interpretado del lado del servidor que se caracteriza por su
potencia, versatilidad, robustez y modularidad. Los programas escritos en PHP son
incrustados directamente en el código HTML y ejecutados por el servidor web.

Es un lenguaje multiplataforma; los programas funcionan igual sobre diferentes

plataformas, trabajando sobre la mayoría de servidores web.

Ilustración 7 3.5 Logo PHP

15
3.3.6 MySQL.

MySQL es un sistema de administración de bases de datos relacionales rápido,

sólido y flexible. Es ideal para crear bases de datos con acceso desde páginas web
dinámicas o para cualquier otra solución profesional que implique almacenar datos,
teniendo la posibilidad de realizar múltiples y rápidas consultas.

Ilustración 8 3.6 Logo MySQL

16
CAPÍTULO IV
METODOLOGÍA
4.1 Metodología.

La metodología que se implementó en el desarrollo del proyecto es la metodología

de prototipos, la cual se centra en la idea de ayudar a comprender los requisitos que
platea el usuario cuando los requerimientos no estén claros. Es un modelo iterativo,
se caracteriza por la manera en la que permiten desarrollar versiones cada vez más
completas del software.

Las etapas para la elaboración del modelo de prototipo.

Ilustración 9 4.1 Etapas del Modelo de Prototipo

Las ventajas de este modelo es que facilita la comunicación con el cliente, los
resultados son visibles al comienzo del proyecto, disminuye el riesgo de errores,
facilita la gestión de cambios y aumenta la productividad. Por tanto esta metodología
es la que más se ajusta a las necesidades de este proyecto.

El tiempo estimado para terminar el primer prototipo es de 4 meses, con este primer
prototipo se pretende cubrir la mayor parte de requerimientos que podrá pedir un
cliente. El objetivo es crear un portal web para Congresos que sea adaptativo para
cualquier tipo de Congreso y autoadministrable por el cliente.

18
4.2 Descripción de Actividades.

4.2.1 Análisis.

En esta fase del proyecto se definieron los objetivos generales del proyecto, se
identificaron los requerimientos imprescindibles para el portal web y se desarrolló
un cronograma de actividades.

Se realizó una investigación sobre sitios web de diferentes Congresos en México

para identificar las características que se necesitan para desarrollar el portal web,
como detectar los servicios esenciales en portales de este tipo. De esta forma se
obtuvo la estructura de las secciones y sus componentes que conformarían el portal
web. De acuerdo a esto se eligió la tecnología para desarrollar este proyecto.

4.2.2 Diseño.

En esta fase se comenzó con el diseño rápido del portal web, primero se diseñaron
las pantallas de bajo nivel y posteriormente se comenzó a maquetar todo el diseño
del portal.

4.2.3 Ejecución.

Durante esta etapa se empezó a diseñar la plataforma del Administrador de

Contenido; en la cual la empresa ImagenInsite otorgó la información necesaria para
estructurar los diferentes módulos de administración del portal. Después se realizó
la programación del portal web con el propósito de que este pueda ser dinámico y
de fácil administración, mediante las funciones desarrolladas en PHP y consultas a
la BD.

4.2.4 Pruebas.

En esta fase se realizaron pruebas de testeo al portal web y a los módulos creados
en el administrador de contenido, dando solución a los diferentes errores para lograr
una mejor usabilidad y tener el mínimo número de errores en este prototipo.

19
4.3 Planeación.

El inicio del proyecto se realizó el 2 de mayo de 2017, se estableció un cronograma

de actividades para tener un mejor control de los entregables y sus tiempos para el
logro del proyecto.

El proyecto se dividió en cuatro fases, en cada fase se presentan las actividades y

tiempos planeados para el desarrollo del proyecto.

Actividad Comienzo Fin

Análisis mar 02/05/2017 vie 19/05/2017

Planteamiento del problema mar 02/05/2017 mar 02/05/2017

Cronograma de actividades mié 03/05/2017 mié 03/05/2017

Levantamiento de requerimientos jue 04/05/2017 lun 08/05/2017

Investigación previa mar 09/05/2017 vie 12/05/2017

Análisis y organización de la información lun 15/05/2017 jue 18/05/2017

Selección de tecnologías vie 19/05/2017 vie 19/05/2017

Diseño lun 22/05/2017 vie 02/06/2017

Pantallas de bajo nivel lun 22/05/2017 mié 24/05/2017

Maquetado del portal web jue 25/05/2017 vie 02/06/2017

Ejecución lun 05/06/2017 vie 21/07/2017

Conexión del Administrador de Contenido con lun 05/06/2017 mar 06/06/2017

el portal web

Enlace con la BD mié 07/06/2017 vie 09/06/2017

Estructura de los múltiples módulos para el lun 12/06/2017 vie 23/06/2017

administrador de contenido

Programación del portal web lun 26/06/2017 vie 21/07/2017

Pruebas lun 24/07/2017 mié 02/08/2017

20
 Pruebas del portal web lun 24/07/2017 jue 27/07/2017

Pruebas de usabilidad en el administrador de vie 29/07/207 mié 02/08/2017

contenido

Tabla 1 4.1 Cronograma de Actividades

4.4 Implementación.

4.4.1 Alcance.

El portal web a construir deberá ser adaptativo y autoadministrable, el cual tiene

como objetivo principal, difundir cualquier tipo de Congreso o Conferencia a la
audiencia de manera objetiva y además que el organizador de estos eventos tenga
la facilidad de publicar y administrar el contenido del portal. En cuanto al organizador
del evento o en este caso administrador del portal no es necesario que cuente con
conocimientos de programación o computación, ya que el Administrador de
Contenido del portal es de muy fácil uso y cualquier usuario podrá publicar la
información que necesita.

Para el desarrollo de este proyecto se utilizará tecnología libre, para reducir los
costos de la implementación del portal.

4.4.2 Requerimientos del Portal Web.

Los requerimientos para un sistema son la descripción de los servicios

proporcionados por el sistema y sus restricciones operativas.

La primera etapa que se realizó para el desarrollo del proyecto fue el levantamiento
de requerimientos del portal web, para esto, fue necesario consultar diferentes
páginas web de Congresos, de esta manera se analizaron y conocieron cuáles son
las necesidades de los posibles clientes a quienes va dirigido este portal web.

El levantamiento de requerimientos indicó que el portal tendría la facilidad de poder

ingresar, modificar, consultar y eliminar información del portal web, lo cual se
debería de considerar un Administrador de Contenido dinámico, este Administrador
de Contenido es el desarrollado por la empresa ImagenInsite, la cual otorgó para
realizar este proyecto. El Administrador de Contenido trabaja con una base de datos
en MySQL en la que almacena los datos del portal.
21
4.4.2.1 Requerimientos Funcionales.

Los requerimientos funcionales describen lo que debe hacer el sistema, la manera

en que éste debe reaccionar a entradas particulares y de cómo se debe de
comportar en situaciones particulares.

Estos son los requerimientos funcionales de este portal web:

 El Administrador de Contenido del portal deberá tener dos tipos de

administradores: Administrador Superior y Administrador Funcional.
 Solo el administrador superior tendrá el privilegio máximo, éste podrá
registrar, modificar o eliminar a un administrador funcional, además de
asignar los privilegios que tendrá un administrador funcional.
 Los administradores deben ingresar al Administrador de Contenido con un
nombre de usuario y contraseña.
 El administrador funcional podrá realizar registros, consultas o eliminar
información que el administrador superior le otorgue.
 En el Administrador de Contenido los módulos creados deberán tener una
descripción bien definida acerca de ese módulo.
 El portal web deberá tener las secciones bien definidas para evitar
confusiones.

4.4.2.2 Requerimientos No Funcionales.

Los requerimientos no funcionales, son aquellos requerimientos que no se refieren

directamente a las funciones específicas que proporciona el sistema, sino a las
propiedades emergentes de éste como la fiabilidad, el tiempo de respuesta y la
disponibilidad.

Estos son los requerimientos no funcionales del portal:

 El tiempo de respuesta promedio del sistema para las operaciones debe ser
mínimo.
 El portal debe poder operar sin necesidad de instalar ningún software
adicional además de un navegador web.

22
  El portal debe poseer un diseño “Responsive” a fin de garantizar la adecuada
visualización en múltiples dispositivos como ordenadores, tabletas y/o
teléfonos inteligentes.

 El portal debe desarrollarse aplicando funciones de programación que

incrementen el dinamismo del portal y la seguridad de datos.

 El portal debe poseer interfaces gráficas bien formadas.

4.4.3 Análisis de la Base de Datos.

Para el desarrollo del portal web no fue necesario diseñar una base de datos, ya
que el Administrador de Contenido trabaja con una, lo cual facilitó el desarrollo de
este proyecto. Fue necesario analizar la base de datos, conocer las tablas y las
relaciones que esta contenía, principalmente de las que se utilizarían para las
consultas del portal.

Después de examinar y entender la base de datos, la empresa ImagenInsite

proporciono el script de la base de datos, el cual se implementó como se muestra
en las siguientes imágenes.

Ilustración 10 4.2 Creación de la BD

23
 Ilustración 11 4.3 Montaje del Script

Se trabajó en un servidor local y se instaló un gestor de base de datos de MySQL.

Después de la implementación de la BD, se continuó a realizar la conexión entre la
BD y el Administrador de Contenido esto en la clase llamada BD.php, en esta clase
solo se cambiaron los datos de conexión del SGBD y la BD.

Servidor donde montamos la BD

Nombre de la BD a usar

Usuario de la BD
Contraseña del usuario de la BD

Ilustración 12 4.4 Clase BD

24
4.4.4 Análisis y Diseño del Portal Web.

Durante el análisis se visualizaron las necesidades de los posibles clientes a

quienes va dirigido este portal web, de tal manera que se comenzó por realizar el
diseño del portal.

Este diseño se desarrolló en su primera etapa en bajo nivel, con base a la

investigación realizada, se detectaron los servicios que ofrecen los portales web de
Congresos, de esta manera se estructuró las secciones que conformarían el portal.

A continuación se presentan las secciones que conforman la página principal del

portal.

25
 Logo Menú

Slider

Sección
Ponentes

Sección
Conferencias

Sección
Entradas

Registro

Sección Sede
del Evento

Sección
Patrocinadores

Sección
Noticias

Mapa del Evento

Pie de página

Ilustración 13 4.5 Estructura del índex

26
Logo: Aquí el logotipo o imagen representativa del Congreso.

Menú: Sección superior con enlaces a las diferentes secciones del portal.

Slider: En esta sección se mostraran de forma dinámica imágenes del Congreso, o

anuncios importantes para llamar la atención del usuario.

Sección Ponentes: En esta parte se mostraran los ponentes destacados del

Congreso.

Sección Conferencias: En esta parte al igual que en la sección de ponentes, se

mostrarán las conferencias o talleres que el administrador desea destacar del
Congreso.

Sección Entradas: Parte de la página que se mostrarán los boletos destacados del
Congreso.

Sección Registro: En esta parte se mostrará un formulario de registro de

participantes del Congreso.

Sección Sede del Evento: Sección del portal que mostrará la sede, servicios e
infraestructura del Congreso; según sea el caso de cada Congreso.

Sección Patrocinadores: En esta parte se mostrarán todos los patrocinadores del

Congreso.

Sección Noticias: Aquí se mostrarán las últimas cuatro noticitas del Congreso.

Mapa del Evento: En esta parte de la página se mostrará la ubicación del Congreso.

Pie de Página: Se mostrará el logo del Congreso y las redes sociales.

Una vez concluido la etapa de bajo nivel se prosiguió al maquetado del portal web,
el resultado es el siguiente:

27
 Logo Menú

Slider

Sección
Ponentes

Sección
Conferencias
Sección
Entradas

Registro

Sección Sede
del Evento

Sección
Patrocinadores

Sección
Noticias

Mapa del Evento

Pie de página

Ilustración 14 4.6 Diseño final del índex

28
Este proyecto no es destinado para un Congreso en específico, ya que el portal está
ideado en implementarse en cualquier tipo de Congreso. Lo cual se creó un módulo
en el Administrador de Contenido para cambiar el estilo del portal web.

Ilustración 15 4.7 Estilos diferentes del Portal Web

4.4.5 Estructura de módulos en el Administrador de Contenido.

Luego de tener el diseño final del portal web se prosiguió con la estructura de los
módulos en el Administrador de Contenido.

El objetivo de este Administrador es facilitar la administración del portal web, en el

administrador de contenido se diseñaron múltiples módulos para el portal, con
funciones como las siguientes:

 Publicación de los ponentes.

 Publicación de las actividades del Congreso.
 Catálogo de fotografías.
 Publicación de Noticias del Congreso.
 Datos importantes del Congreso, etc.

Cuando se realiza un cambio por medio del administrador es reflejado

inmediatamente en el portal.

Se presenta la descripción de los módulos necesarios, creados en el Administrador

de Contenido.

29
 Ilustración 16 4.8 Módulos en el Administrador de Contenido

 Acerca del Evento. Esta sección fue creada para poder publicar cual es la
temática y objetivos que motivan a asistir al Congreso.
 Ponentes. Sección en la que el administrador podrá registrar los datos de
los ponentes del Congreso.
 Sede del Evento. Este módulo es para la publicación de la sede, servicios e
infraestructura del Congreso.
 Precios de Boletos. Sección para registrar los detalles y costos de los
boletos.
 Datos del evento. En esta sección el administrador podrá registrar los datos
de contacto del evento, como lo son la dirección, teléfono, correo electrónico
y redes sociales.
 Patrocinadores. Sección para registrar los patrocinadores del Congreso.
 Preguntas frecuentes. Este módulo fue creado para publicar posibles
preguntas que pueden tener los participantes acerca del Congreso.
 Slider. Una sección para crear un slider que se mostrara en la página de
inicio del portal web.

30
  Noticias del Evento. Sección para publicar noticias relevantes acerca del
evento.
 Galería. En este módulo el administrador podrá crear catálogos de
fotografías y videos relacionados con el Congreso.
 Programa del Evento. En esta sección el administrador podrá organizar las
actividades que se realizaran en el evento estableciendo la fecha, horario,
lugar y detalles que considere necesario.
 Fecha del Evento. Una sección en el que se registra la fecha del inicio del
evento, con la finalidad de que en la página de inicio del portal web se
muestra un reloj de cuenta regresiva.
 Configuración del Sitio Web. Este módulo fue creado para personalizar el
diseño del portal web, se presentan dos tipos de diseño de layout y diez
colores diferentes para el tema.
 Usuarios. En este módulo se visualizan los usuarios registrados del
Congreso.

4.4.6 Programación del Portal Web.

Se comenzó a programar las funciones del portal, esto mediante condigo PHP y
consultas a la BD.

Para empezar a programar se utilizó la clase llamada framework.php el cual otorgo

la empresa ImagenInsite; esta clase contiene métodos para poder consultar los
datos de la BD.

Se usaron los métodos para la programación de las funciones desarrolladas en

PHP, estas funciones reemplazarían el código HTML, con la finalidad de crear
contenido de forma dinámica en el portal y que los datos se guardarán en la BD.

A continuación se presenta el código de la página principal del portal web, se

tomaron los apartados más importantes para su elaboración.

31
 Ilustración 17 4.9 Apartado para importar las clases

Como se muestra en la ilustración 17 en ese apartado se mandan a llamar las clases

donde existen los métodos que se usan para programar cada una de las funciones
del portal. Esas sentencias se colocaron en el inicio de cada archivo del portal web.

Clase BD: La clase BD hace la conexión con la base de datos.

Clase framework: Esta clase es para poder consultar la información de la BD,

ofrece diferentes métodos dependiendo del tipo de consulta que se requiera.

Clase utilerías: La clase utilerías contiene funciones específicas como dar formato
a la fecha y acortar texto.

Clase secciones: Contiene las funciones que reemplazan el código HTML, y estas
funciones son llamadas en cada sección, como se muestra a continuación:

Ilustración 18 4.10 Función slider

Ilustración 19 4.11 Función Ponentes Destacados

32
 Ilustración 20 4.12 Función Eventos Destacados

Ilustración 21 4.13 Función Patrocinadores

Ilustración 22 4.14 Función Noticias Destacadas

Como se muestran en las ilustraciones anteriores se mandan a llamar las funciones

slider, ponentesDestacados, eventosDestacados, mostrarPatrocinadores,
noticiasDestacadas; las cuales se reconocen por (). Estas funciones fueron
desarrolladas con PHP y se encuentran en la clase secciones. A continuación se
muestra la programación de la función ponentesDestacados:

33
 Ilustración 23 4.15 Programación de la Función ponentesDestacados

Esta función muestra los ponentes destacados del Congreso, la cual usa el método
consultarVariosRegistros seleccionando el número que representa a la sección
llamada Ponentes (creado en el Administrador de Contenido) y que tenga activo el
valor de destacado. Después copiamos el código HTML de la página para que al
visualizarse respete el formato y los estilos, se remplazan los datos por los nombres
de los componentes de la sección Ponentes. Finalmente quitamos el código HTML
y llamamos la función llamada poentesDestacados.

Ilustración 24 4.16 Llamada a la Función ponentesDestacados

De esta forma se realizó la programación del portal web, con funciones

desarrolladas con PHP y consultas a la BD.

34
4.4.7 Pruebas.

Después de la programación de la plataforma se realizaron pruebas de diseño del

portal en los diferentes dispositivos, también se revisaron todas las funciones
desarrolladas en PHP, con la finalidad de comprobar la correcta interacción y
funcionamiento del portal.

Se verificó el comportamiento del diseño adaptable y que no existieran

desbordamientos de filas y columnas. Asimismo se comprobó la compatibilidad en
diferentes dispositivos, tales como ordenadores, tabletas o teléfonos inteligentes, el
resultado es el siguiente:

Ilustración 25 4.17 Vista en un Ordenador

35
 Ilustración 27 4.18 Vista en Ilustración 26 4.19 Vista en Tableta
Teléfono Inteligente

La etapa de pruebas fue importante, dado que en ella se comprobó el

funcionamiento del prototipo desarrollado y que este cumpliera con los
requerimientos acordados. Esta etapa ayudó a detectar los errores en la fase del
diseño y programación del portal web, lo cual los errores encontrados se lograron
resolver.

36
4.5 Evaluación.

Al concluir la estructura del portal web y la programación de todos los módulos, se

tuvo que examinar cada módulo para evaluar que cada uno de estos funcionara
correctamente. La empresa ImagenInsite verificó que todos los objetivos se
cumplieran.

Así mismo esta aprobación fue respaldada con un cuestionario de satisfacción, que
respaldara los objetivos de este proyecto.

Programados para cumplir el objetivo Realizadas

Observaciones
general sí no
Identificar los requerimientos imprescindibles

para el desarrollo del portal web.
Presentar un buen diseño del portal web y que

este sea dinámico.
Crear un portal web con un diseño responsivo,
que este pueda ser visualizado en cualquier 
dispositivo.
Desarrollar un portal web de fácil administración
para el cliente, de modo que este pueda difundir

la información necesaria acerca de un
Congreso.
Vincular las redes sociales para una mejor
interactividad entre los interesados de un 
Congreso.
Tabla 2 4.2 Tabla de Evaluación

37
 CAPÍTULO V
RESULTADOS Y
DISCUSIÓN
5.1 Resultados.

Al finalizar este proyecto se obtuvieron los resultados acordados, terminando las

fases en tiempo y forma, planeadas en el cronograma de actividades.

El proyecto Portal Web para Congresos es capaz de difundir cualquier tipo de

Congreso a una audiencia de manera objetiva a través de este portal web, que es
amigable al usuario y con la facilidad de administración de contenido lo cual hace
que este portal sea dinámico, dado que permiten almacenar y hacer actualizaciones
de la información contenida, así como también modificaciones del diseño por parte
del propietario, este portal web cuenta con la capacidad de visualizarse en distintos
dispositivos, como lo son ordenadores, tabletas o teléfonos inteligentes.

El Portal Web para Congresos diseñado con base a una investigación desarrollada
y a los requerimientos dados por la empresa ImagenInsite se obtuvieron los
siguientes módulos que componen el portal.

 Ponentes
En este apartado se mostrara las fotografías, redes sociales e información
relacionada de los ponentes que participaran en el Congreso.

Ilustración 28 5.1 Módulo Ponentes

39
 Ilustración 29 5.2 Apartado del módulo Ponentes

 Noticias
Esta el módulo de noticias, donde el administrador del sitio puede subir
información referente al Congreso y la audiencia puede visualizarlo y
mantenerse informado.

Ilustración 30 5.3 Módulo Noticias

40
 Galería
Muestra las imágenes y videos del Congreso, el administrador del sitio podrá
clasificar las imágenes o videos.

Ilustración 31 5.4 Módulo Galería

 Programa de Actividades
Muestra el programa de actividades del Congreso, en el que la audiencia
podrá visualizar la información necesaria de las conferencias o los talleres
del Congreso.

Ilustración 32 5.5 Módulo Programa de Actividades

41
 Precios
Este módulo mostrará el nombre, descripción y precio de los boletos del
Congreso.

Ilustración 33 5.6 Módulo Precios

 Contacto
Muestra los datos de contacto, mapa y un formulario donde el usuario
puede solicitar información referente al Congreso.

Ilustración 34 5.7 Módulo Contacto

42
 Preguntas
En este módulo el administrador del sitio podra publicar y actualizar
información que los usuarios desean conocer.

Ilustración 35 5.8 Módulo Preguntas

 Registro
Muestra un formulario de registro, donde el usuario podrá registrarse.

Ilustración 36 5.9 Módulo Registro

43
El portal cuenta con un diseño web responsivo o adaptativo, es decir tiene la
correcta visualización en distintos dispositivos con conexión a internet, tales como
computadoras de escritorio, tabletas o celulares. Dado que los elementos del portal
son redimensionados de forma de que se adapten correctamente al ancho de cada
uno de los dispositivos, permitiendo una correcta visualización y brindando una
mejor experiencia al usuario.

Los administradores del portal podrán ingresar información referente al Congreso,

como lo son imágenes, videos, precios, y todo lo que necesiten publicar en su portal,
teniendo el control total del contenido y sin depender de terceros, ya que no es
necesario tener conocimientos técnicos para autoadministrar su sitio.

5.2 Discusión.
Las Tecnologías de la Información y Comunicación (TIC) han tomado un papel
importante en nuestra sociedad y se utilizan en diferentes actividades, forman parte
de diversos sectores como la educación, salud, laboral, empresarial, etc. Las TIC
son un conjunto de tecnologías desarrolladas para gestionar la información de
manera fácil y rápida, las nuevas TIC se caracterizan por permitir la comunicación
entre personas o grupos sin importar donde se encuentren. Esta comunicación se
realiza a través de páginas web, correo electrónico, videoconferencias, entre otros
sistemas.

El sitio web es la herramienta tecnológica más importante para las empresas u

organizaciones, ya que a través de internet es posible dar a conocer sus servicios
a millones de usuarios. Uno de los usos más efectivos de un sitio web es la
comunicación con la audiencia objetiva, dado que permite ofrecer información
actualizada al momento.

Para el desarrollo de un sitio web es necesario analizar los posibles escenarios

donde se implementara y recabar los requerimientos necesarios, para que este
cumpla con el objetivo planeado y pueda ser implementado con éxito.

44
5.3 Conclusiones.

Al terminar el presente proyecto, se ha cumplido de manera satisfactoria los

objetivos planteados en el inicio del presente documento, el cual se ha presentado
un Portal Web para Congresos adaptativo y autoadministrable.

La experiencia en el desarrollo de este proyecto es bastante satisfactoria, pues

permitió aplicar y adquirir nuevos conocimientos en cuanto al lenguaje de
programación PHP.

Desarrollar un proyecto web como este, requiere de esfuerzo y dedicación para

lograr el objetivo deseado. En el transcurso del desarrollo del proyecto se
presentaron retos, los cuales me ayudaron a adquirir nuevos conocimientos.

Durante el tiempo que estuve realizando la estadía aprendí nuevos conocimientos

y fortalecí valores como la responsabilidad, compromiso y respeto.

45
Bibliografía

C. A. (10 de Septiembre de 2014). FalconMasters. Recuperado el 4 de Junio de

2017, de FalconMasters: http://www.falconmasters.com/web-design/que-es-
front-end-y-que-es-back-end/

Cobo, Á. G. (2005). PHP y MySQL: tecnologías para el desarrollo de aplicaciones

web. Madrid: Díaz de Santos. Recuperado el 22 de Mayo de 2017

EGUILUZ, J. (2013). Introducción a XHTML. En J. Eguiluz, Introducción a XHTML

(págs. 7-9).

Fontela, A. (10 de Octubre de 2015). Raiola Networks. Recuperado el 4 de Junio de

2017, de Raiola Networks: https://raiolanetworks.es/blog/que-es-bootstrap/

Pérez, J. E. (2008). Introducción a CSS. Recuperado el 05 de Junio de 2017

Pressman, R. S. (2010). INGENIERÍA DEL SOFTWARE. UN ENFOQUE

PRÁCTICO. McGraw-Hill. Recuperado el 10 de Julio de 2017

Quesada, S. (21 de Noviembre de 2013). MAESTROS DEL WEB. Recuperado el 4

de Junio de 2017, de MAESTROS DEL WEB:
http://www.maestrosdelweb.com/que-es-responsive-web-design/

46