codeigniter - upsin

1

UNIVERSIDAD POLITÉCNICA DE SINALOA PROGRAMA ACADÉMICO DE

INGENIERÍA EN INFORMÁTICA

Tesina

“Programación Web Utilizando Codeigniter”

Para cumplir la acreditación de las estadías profesionales y contar con los créditos necesarios para obtener el grado de Ingeniero en Informática

Autor:

Juan Alejandro Doroteo Lopéz

Asesor:

M.C. Alberto Morales Colado.

Asesor OR:

Ing. Ernesto Antonio Torreblanca Lopéz

Mazatlán, Sinaloa 14 de diciembre de 2015

6

Contenido Resumen. ............................................................................................................................................... 7

Abstract. ................................................................................................................................................ 8

Introducción. ........................................................................................................................................ 8

Capitulo I. .............................................................................................................................................. 9

Antecedentes de la empresa. ....................................................................................................... 9

Capitulo II. ............................................................................................................................................ 14

Estado del Arte. ............................................................................................................................. 14

Capitulo III............................................................................................................................................ 19

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

Desarrollo. ....................................................................................................................................... 29

Resultados y Discusión. .............................................................................................................. 43

Conclusión. ..................................................................................................................................... 44

Bibliografía. ..................................................................................................................................... 44

Anexos. ............................................................................................................................................ 45

Glosario. .......................................................................................................................................... 67

Ilustración 1 colores 1 ............................................................................................................................ 22

Ilustración 2 colores 2 ............................................................................................................................ 23

Ilustración 3 MVC ................................................................................................................................... 26

Ilustración 4 modelo de cascada ............................................................................................................ 30

Ilustración 5diagrama de caso de usao .................................................................................................. 33

Ilustración 6 diagrama de base de datos ............................................................................................... 34

Ilustración 7 diagrama de actividades .................................................................................................... 34

Ilustración 8 código ................................................................................................................................ 46

Ilustración 9 código ................................................................................................................................ 46

Ilustración 10 codigo .............................................................................................................................. 47

Ilustración 11codigo ............................................................................................................................... 47









7























Ilustración 42 login ................................................................................................................................. 63

Ilustración 43 agregar alumno ............................................................................................................... 63

Ilustración 44 consultar alumnos ........................................................................................................... 64

Ilustración 45 actualizar información del alumno .................................................................................. 64

Ilustración 46 reportes ........................................................................................................................... 65

Ilustración 47 crear un usuario nuevo ................................................................................................... 65

Ilustración 48 consulta de usuarios ........................................................................................................ 66

Ilustración 49 registro y consulta de universidad .................................................................................. 66

Ilustración 50 registro y consulta de carreras ........................................................................................ 67

Ilustración 51 registro y consulta de eventos ........................................................................................ 67

Resumen. En este documento se encontrara la forma en la que uno de los

problemas que surgen en las empresas a la hora de reclutar fue solucionado por medio

de una aplicación web. Esta aplicación está enfocada a cumplir los requerimientos que

fueron dados por la empresa. El sistema del cual se habla en este documento está

8

desarrollado con el framework de Codeigniter, no solo eso el sistema también tiene

la función de poder realizar reportes generales y reportes específicos que fueron

creados a partir de la implementación de una librería. El sistema cuenta con las

validaciones necesarias para evitar que pueda fallar, también cuanta con campos

dinámicos creados a partir de funciones desarrolladas con Ajax, cabe mencionar que

el sistema está desarrollado con la arquitectura de MVC (modelo-vista-controlador),

para hacer que la página web fuera dinámica por lo que esta página está pensada para

alojar diferentes usuarios al mismo tiempo.

Abstract. This document describes the way in which one of the problems that arise

when companies recruit was solved through a web application is found. This application

is targeted to meet the requirements that were given by the company. The system that

is being discussed in this document is developed with CodeIgniter framework, not only

that the system also has the function to perform general reports and specific reports

were created from the implementation of a library. The system has the necessary

validation to prevent you fail, too much with dynamic fields created from functions

developed with Ajax, it is noteworthy that the system is developed with the architecture

of MVC (Model-View-Controller), to make the dynamic web page out what this site is

designed to accommodate different users simultaneously.

Palabras claves:

Codeigniter, Ajax, MVC y reportes.

Introducción.

En este documento podrán encontrar como es que soluciono uno

de los problemas con lo que se contaba en una intuición así como todas las

herramientas que se utilizaron para el desarrollo de la solución, ya que la

institución no contaba con un sistema que hiciera las funciones que se explican

en el desarrollo esto ya que anteriormente, para poder registrar aspirantes o

9

practicantes que desean formar parte de la institución esta llevaba el control

de estas personas en hojas de Excel lo cual no es muy conveniente ya que

este tipo de documentos se puede perder fácilmente dentro de los archivos de

la computadora de la persona en cargada del proceso. También se encontrare

el código fuente de la aplicación desarrollada así como las pantallas del

sistema. No solo eso sino que también se explica la metodología que se

implementó para desarrollar el sistema. También se mostrara la historia de la

empresa así como los objetivos a cumplir, cabe mencionar que el sistema fue

terminado en su totalidad por lo que todo lo que aparece en el documento está

basado en un trabajo finalizado sin más preámbulo.

Capitulo I.

Antecedentes de la empresa.

IBM es la compañía de tecnología de información más grande del

mundo con 100 años de liderazgo y presencia en 170 países del mundo; cuenta con

400,000 empleados y registró una facturación de $99.9 mil millones de dólares en

2010. Ese mismo año, IBM rompió un récord al lograr por 18 años consecutivos el

primer lugar en registro de patentes, con casi 6,000 tan sólo en Estados Unidos.

1890 a 1937

Primeras Ambiciones.

Una fusión de tres empresas Del siglo 19-the Tabuling Machine

Company, The international Time Recording Company and the Computing Scale

Company of America- creo the Computing-Tabulating-Recording Company (CTR) el

16 de junio de 1911. CTR es el precursor de IBM. Thomas J. Watson SR. se unió a

CTR en 1914 y a través de las siguientes dos décadas se convirtió en un creciente

líder de la innovación y tecnología y un prototipo para las nuevas empresas

multinacional. Este cambio se señaliza en 1924, cuando el nombre de la compañía

cambia a International Business Machines Corporation (IBM). Desde el inicio, IBM se

10

definió a sí mismo no por sus estrategias o servicios-que van desde las escalas

comerciales para perforar tabuladores de tarjetas-pero y sus prácticas de manejo

basadas en valores fundamentales. Apegándose a su visión y valores durante la

depresión- proveyendo empleos continuamente, incuso añadiendo ingenieros y otro

personal para poder mantener su producción-IBM es capaz de jugar un papel

fundamental permitiendo al U.S. government´s actos de seguridad social de 1935

"the biggest accounting operation of all time".

1938 a 1951

Influencia creciente.

Aunque el comercio internacional se paralizó por la Segunda Guerra

Mundial, IBM amplía su capacidad de producción para satisfacer en tiempo de guerra

demandas añadido a su Endicott, Nueva York, de la planta, y la apertura de nuevas

instalaciones en Poughkeepsie, Nueva York, Washington, DC, y San José,

California. Después de la guerra, la empresa acelera su crecimiento internacional, y

en 1949, forma el World Trade Corporation para gestionar sus operaciones en el

extranjero. En el lapso de dos décadas, la organización va a generar más de la mitad

de la línea de fondo de IBM. La innovación empresarial de la mano con la innovación

social funciona durante este período, como IBM promueve la diversidad y la

filantropía corporativa en sus políticas. La compañía comienza a centrarse en las

oportunidades para las mujeres, las minorías y los discapacitados de años antes de

que tales consideraciones se convertiría en la norma.

1952 a 1963

Cimientos de la computación moderna.

La ascensión de Thomas J. Watson Jr. a la presidencia de IBM en 1952

marca el inicio de la transición de la empresa a una sociedad moderna. Durante la

primera década de su mandato, Watson Jr., más tarde marcada por la revista Fortune

como el "capitalismo más exitoso que jamás haya vivido": comienza a transformar

IBM de un jugador líder en la industria en un gigante empresarial que abarca todo el

mundo. Él vuelve a centrar IBM hacia el desarrollo y comercialización de tecnologías

11

informáticas electrónicas, crea e institucionaliza prácticas profesionales de gestión

empresarial, y codifica la filosofía y los comportamientos no escrita de IBM en las

políticas y programas formales. Estas innovaciones tecnológicas, empresariales y

sociales impulsan IBM en la década de 1960 como empresa de alta tecnología líder

en el mundo.

1964 a 1970

360 la revolución.

A principios de 1960, IBM considera que su principal mercado

amenazado por una serie de rivales dignos. En una visita intrépida legendario "la

apuesta de la compañía de" toma de IBM desarrolla mudanza Thomas J. Watson Jr.

Sistema revolucionario / familia de ordenadores centrales 360 ™. Provocado en parte

por el triunfo del System / 360, IBM experimenta un aumento de casi cinco veces en

los ingresos y ganancias a lo largo de la década. La organización lleva su manto de

éxito así, la adopción de una serie de programas progresivos nuevo empleado y

sociales que hacen que sea una de las empresas más admiradas del mundo. Si IBM

terminó la década de 1950 como líder en tecnología, termina la década de 1960 como

un icono global de negocios.

1971 a 1992

La computación es personal.

Sobre la base de su éxito en la década de 1960, IBM se solidifica su

posición como empresa los industry's -y los negocios DEL MUNDO-más rentable,

admirado e icónica, y continúa desarrollando nuevos productos innovadores a lo

largo de la década de 1970. A partir de la tecnología de banda magnética utilizada

en las tarjetas de crédito, en disquetes, al Fondo para el Consumidor de transacción

(una forma temprana de cajeros automáticos de hoy), el ingenio de IBM se hace

sentir en todas partes. Como una nueva era de la informática comienza a tomar

fuerza en la década de 1980, la compañía crea normas que legitiman el PC,

convirtiéndolo de un dispositivo aficionado en una herramienta indispensable de la

vida moderna en los hogares, las empresas y las escuelas de todo el mundo. La

12

compañía también continúa ampliando las fronteras del descubrimiento científico,

con cinco investigadores de IBM que comparten tres Premios Nobel de Física. Sin

embargo, a pesar de su profundidad y amplitud de la innovación, a finales de la

década de 1980 IBM se encuentra limitada lanzada en el caos por las mismas

revoluciones que ayudó a lanzar iniciadoras de una recesión y el período de inquietud

para la empresa que va a persistir en la década siguiente.

1993 a 2003

El nacimiento del e-business.

Entrando en la década de 1990, IBM se enfrenta a sus más importantes

retos estratégicos desde la depresión y la llevó a cabo con éxito una de las grandes

rotaciones en la historia empresarial. Se mueve en grandes negocios de crecimiento

nuevos, principalmente servicios y software, y abraza los estándares abiertos para

la computación. La compañía también da nueva forma a su cultura

fundamentalmente volver a centrarse en los clientes y ser más ágil, sensible y

colaborativo. Esta transformación coincide con la llegada de Internet, e IBM es

pionera en ayudar a los clientes sacar provecho de las nuevas posibilidades de la

computación en red global y los negocios lo que denomina "e-business". A medida

que el siglo 20 llega a su fin, IBM se encuentra, una vez más, a la vanguardia de la

tecnología mundial y los negocios.

Misión.

Proveer soluciones de alto valor a todo el mundo, aprovechando y

desarrollando el talento de nuestra gente, creando con esto una ventaja competitiva

para nuestros clientes y, por consecuencia, para la IBM Global. Desarrollamos,

manufacturamos, probamos, integramos y proveemos servicios al más alto nivel de

excelencia en el mundo.

Visión.

Ser una organización clave en el modelo de negocios de la IBM Global,

13

reconocida por el liderazgo y motivación de sus empleados, dedicada al éxito de

nuestros clientes, influyendo estratégicamente en la Corporación y siendo la

empresa líder de México en soluciones de alto valor, así como un orgullo nacional.

Valores de IBMistas.

• Dedicación para el éxito de cada cliente.

• Innovación que importa- para nuestra compañía y para el

mundo.

• Confianza y responsabilidad personal en todas las

relaciones.

Planteamiento del problema.

El problema principalmente es que no se cuenta con un sistema de

control de aspirantes dentro de la empresa. IBM realiza diferentes evento en muchas

universidades por lo que cada vez al finalizar el evento se les pide a los alumnos que

están interesados en formar parte de la empresa que den sus datos personales para

que posteriormente las personas encargadas del reclutamiento se pongan en contacto

con ellos, actualmente se lleva el registro de los participantes en un documento de

Excel por cada evento realzado en las universidades esto puede parecer una buena

idea pero no lo es, ya que los documentos que contienen la información de los

aspirantes son pasados entre todos los miembro del equipo por lo que un alumno

puede ser contactado por diferentes personas múltiples veces, ya que las personas

solo manejas una copia local por lo tanto solo actualizan esta copia y los demás

miembros no tienen conocimiento de que personas ya fueron contactados por los

demás miembro del equipo. Lo mismo acorre cuando una persona que cambio su

número de teléfono y/o correo electrónico es contactada por un miembro este solo

miembro es quien tendrá la información actualizada de esta persona, por lo que este

método es muy poco efectivo.

Objetivo General.

14

El objetivo de la aplicación, es el poder llevar el tracking de los eventos

que se hagan a lo largo del año en las distintas universidades en la que IBM tenga

presencia, poder ver el impacto que se ha tenido, y poder medir los resultados vs.

Las personas que han entrado a formar parte de la compañía.

Objetivos Específicos.

• Generación de reportes.

• Registrar Universidades.

• Registrar evento por Universidad.

• Registrar impacto del evento (alumnos totales de asistencia).

• Registrar alumnos.

Capitulo II.

Estado del Arte.

Codeigniter.

CodeIgniter es un Framework para el Desarrollo de Aplicaciones - una

herramienta - para la gente que crea webs usando PHP. Su meta es permitirte

desarrollar proyectos mucho más rápido que si lo hicieras escribiendo el código

desde cero, proporcionando una gran variedad de librerías para las tareas más

corrientes, así como una interfaz simple y una estructura lógica para acceder para

acceder a estas librerías. CodeIgniter te permite concentrarte en tu proyecto

minimizando la cantidad de código necesaria para una tarea determinada.

Para que personas es CodeIgniter.

Quieres un framework con una huella pequeña.

Necesitas un rendimiento excepcional.

15

Necesitas una amplia compatibilidad con las cuentas estándar de hospedaje que usan una gran variedad de versiones y

configuraciones de PHP.

Quieres un framework que no necesita casi configuración.

Quieres un framework que no requiere que uses la línea de comandos.

Quieres un framework que no te haga usar restrictivas reglas de codificación.

No quieres ser forzado a aprender un lenguaje de plantillas (aunque está opcionalmente disponible un analizador de plantillas si así lo deseas).

Evitas la complejidad, favoreciendo soluciones simples.

Necesitas una clara y completa documentación.

Funcionalidad de CodeIgniter.

Las funcionalidades por sí mismas son una forma muy pobre de juzgar

a una aplicación, ya que no dicen nada acerca de la experiencia del usuario, o si está

diseñada intuitiva e inteligentemente. Las funcionalidades no revelan nada acerca de

la calidad del código o su rendimiento, atención a los detalles o las prácticas de

seguridad. La única forma real de juzgar una aplicación es probarla y llegar a conocer

su código. Instalar CodeIgniter es un juego de niños, por lo que lo animamos a

hacerlo. Por el momento, esta es la lista de funcionalidades principales de

CodeIgniter.

Sistema basado en Modelo-Vista-Controlador

Extremadamente liviano

Clases de base de datos con soporte para varias plataformas

Soporte para base de datos con Active Record

Validación de datos y formularios

Seguridad y filtrado XSS

Administración de sesiones

Clase para enviar Email. Soporta adjuntos, Email de HTML/Texto,

varios protocolos (sendmail, SMTP, y Mail) y más

Biblioteca de manipulación de imágenes (recorte, redimensión,

16

rotación, etc). Soporta GD, ImageMagick, y NetPBM

Clase para subir archivos

Clase para FTP

Localización

Paginación

Encriptación de datos

Evaluación de rendimiento

Caché de página completa

Historial de errores

Perfilado de la aplicación

Clase para Calendarios

Clase para Agente del Usuario

Clase para codificación Zip

Clase de motor de plantillas

Clase para Trackback

Biblioteca XML-RPC

Clase para pruebas de unidad

URLs amigables para los motores de búsqueda

Ruteo URI flexible

Soporte para hooks y extensiones de clase

Amplia biblioteca de funciones "helper"

Objetivos de Diseño y Arquitectura

Nuestro objetivo para CodeIgniter es máximo desempeño, capacidad y

flexibilidad en el paquete más pequeño y ligero posible. Para alcanzar esta meta nos

comprometemos a usar evaluaciones de desempeño, a re factorizar y simplificar

cada paso del proceso de desarrollo rechazando cualquier cosa que nos aleje del

objetivo establecido. Desde el punto de vista técnico y arquitectónico, CodeIgniter se

creó con los siguientes objetivos:

• Instanciación Dinámica. En CodeIgniter, los componentes se

17

cargan y las rutinas se ejecutan solamente cuando se necesita, en lugar de

hacerlo globalmente. No se hacen suposiciones para el sistema respecto a lo que

puede ser necesario más allá de los mínimos recursos del núcleo, por lo que el

sistema es muy liviano por defecto. Los eventos, disparados por la solicitud

HTTP, los controladores y las vistas que Ud diseñe determinarán lo que se

invoque.

• Poco Acoplamiento. El acoplamiento es el grado en que los

componentes de un sistema dependen unos de otros. Mientras menos

componentes dependan unos de otros, más reusable y flexible será el sistema.

Nuestro objetivo fue un sistema muy poco acoplado.

• Singularidad de Componentes. La singularidad es el grado en

que los componentes tienen un propósito muy específico. En CodeIgniter, cada

clase y sus funciones son muy autónomas a fin de permitir la máxima utilidad.

CodeIgniter es un sistema instanciado dinámicamente, poco

acoplado con alta singularidad de componentes. Se esfuerza por ser simple,

flexible y tener alto desempeño en un paquete de tamaño reducido.

Como se expuso en los puntos anteriores CodeIgniter es un entorno

de desarrollo muy completo, que cuanta con una gran variedad de funciones las

cuales hacen que este framework sea de los más usados en la actualidad.

Porque e debería de usar CodeIgniter para desarrollar las aplicaciones web, esto

es muy simple ya que es muy ligero se puede modificar en cualquier momento no

solo eso cuanta con una gran comunidad en la cual te pueden ayudar si necesitas

ayuda, actualmente este framework se encuentra en su versión 3.0 en esta

versión el framework recibió algunos mejoras en algunas de sus funciones las

cuales se muestran a continuación.

Cambia el tipo de licencia, esta nueva versión tendrá licencia

MIT permitiendo que sea más abierta a la comunidad.

18

PHP CodeIgniter 3 ya correrá sobre la versión de PHP 5.1.6

ahora se requiere como mínimo PHP 5.2.4 y recomiendan

PHP 5.4 o superior

Ahora soporta archivos .kml, los cuales son mapas creados

con Google Earth.

Agregan soporte y mejoras para muchos archivos mime como

xml, xsl, doc, docx, php, zip, csv, rar, jar, etc. lo que significa

que mejora la posibilidad de transferencia de texto entre

distintos idiomas y alfabetos en el envío de emails, y también

sirve para el envío de archivos a través del protocolo HTTP,

MIME también define mecanismos para el envío de otro tipo

de información en un email, incluso texto que utilizan

caracteres especiales no ASCII, como también contenido tipo

imágenes, sonidos, videos, etc.

Agrega un manejador de excepciones

Se mueve el template error a la ruta application/views/errors/

y lo hace configurable via $config[‘error_views_path’]

Ahora puedes utilizar sesiones del lado del servidor y

sesiones tipo cookies como se venía haciendo

Agrega soporte y mejoras para PostgreSQL, Oracle, SQLite,

MySQL

Mejora las librerías de encriptación para proporcionar mayor

seguridad

Teniendo todo esto en cuanta se puede decir que CodeIgniter es un

framework que es de fácil uso ya que este framework cuanta con una curva de

aprendizaje muy baja por lo que se aprender a utilizar muy rápido al mismo tiempo

es ligero y confiable ya que en cada versión nueva que sale se corrigen errores y se

agregan nuevas clases de seguridad que son muy fáciles de implementar por lo que

es altamente recomendable el usar este framework.

19

Capitulo III.

Diseño. La guía que se siguió para poder realizar el diseño de la página web fue

design lenguaje de IBM. El cual es un conjunto de pautas de vida que se comunica

una promesa de marca a través de experiencias de nuestros productos. Nuestro

objetivo es diseñar experiencias que trabajan juntos, funcionan de la misma y trabajar

para nuestros usuarios.

Creamos muchos tipos diferentes de productos, por lo que nuestro

lenguaje está diseñado para ser más instructivo que prescriptivo. Este esfuerzo es

relativamente nuevo y deliberadamente diseñada para evolucionar a través de la

retroalimentación de los equipos de producto y los usuarios [11].

Esta que fue creada por IBM para tener su propia identidad en cuanto

a desarrollo de páginas web, una cosa muy importante es que todas las animaciones

que tienen las páginas web están basados en movimiento que hacen las diferentes

maquinas que IBM ha desarrollado a través del tiempo. Esta guía cuenta siete

principios los cuales se muestran a continuación.

Usuarios primeros: Nuestro enfoque debe ser inquebrantable en

proveer experiencias que ponen al usuario sobre todas las

cosas. Nuestras soluciones deben abordar principalmente las

necesidades del usuario en lugar de ser la fuerza de ajuste para

acomodar requerimientos técnicos.

contextualmente consciente: Nuestras soluciones se utilizan a

menudo al lado de otros productos, muchas veces no la nuestra.

El IBM Diseño Idioma no llama la atención sobre sí mismo, sino

que difiere con elegancia a su entorno siempre que sea posible.

Estéticamente agradable: Nuestras soluciones superan las

expectativas de experiencias móviles y web encantadores. Están

diseñados con buen gusto, que requiere un delicado equilibrio de

20

utilidad y las experiencias sensoriales que hacen que nuestro

trabajo hermoso. La separación de la forma y función, de

concepto y ejecución, no es probable que crear productos de

gran valor estético.

Diversión para usar: Nuestras soluciones son atractivas, tienen

un estilo reconocible y carácter. Se inyectan con momentos de

buen corazón de luz que traen una sonrisa para el usuario sin

dejar de ser discreto y previsión de las necesidades de los

usuarios.

Claro y en contexto: La "acción siguiente más importante" es

inherentemente identificables y de fácil comprensión basada en

su contexto con la experiencia gestalt y la tarea inmediata en

cuestión. Nuestras experiencias están diseñados para estar

limpio y con un propósito.

Obvio: A menudo nos esforzamos por simplicidad, pero muchas

de nuestras soluciones son innecesariamente compleja. Cuál es

necesario es un sentido inherente de obviedad. El movimiento

de los ojos a través de la pantalla debe ser obvio y secuencial.

La sensación general es de tranquilidad y da confianza. Nuestros

usuarios siempre sabrán qué hacer y cómo hacerlo.

En todos lados: Los usuarios acceden a nuestras soluciones de

muchas maneras diferentes, a partir de una variedad de lugares

y horarios de día. Durante la instalación / configuración, el primer

uso, el uso diario, Mantenimiento de soluciones y La

actualización, tenemos que apoyar a todos los usuarios y todos

los contextos. Para obtener más SaaS moderna productos, su

experiencia digital, descubrimiento personalizado y uso de

prueba también se tocan puntos. Nuestras soluciones deben

atender a todas esas experiencias, en todas partes, en cualquier

momento y donde sea posible.

21

Estos puntos son los que se toman en cuanta cuan se empieza a

diseñar una página web, pero también existen otros elemento en la guía de IBM una

de las comas más importantes, esto porque la tipografía siempre nos está diciendo

cosas sobre el mundo. Lo vemos en todas partes. Colorea las palabras que nuestro

lenguaje y formas de su significado. Helvetica Neue es nuestro tipo de letra para el

diseño de software porque nunca intenta eclipsar el contenido. El tipo tiene,

exhibiciones y organiza la información con neutralidad con propósito. Es un tipo de

letra que no dice una cosa; lo dice todo.

Otra de los elementos que son muy importantes son los colores que se

usan para poder hacer más atractivo el software. El color trae a la vida nuestro

software. Al igual que la tipografía le habla al usuario de diferentes formas. Puede

atraer el ojo a una parte focal, ayuda al usuario a saber que hacer después e indica

cambios en el sistema.

Nuestra paleta de colores es lo suficientemente flexible para expresar

un alto rango de emociones. Refleja la totalidad del espectro de color y dan los

equipos de producto la capacidad de seleccionar el estado de ánimo adecuado y el

ambiente para una experiencia. A continuación se mostraran todos los colores que

uno puede utilizar.

22

Ilustración 1 colores 1

23

Ilustración 2 colores 2

Esta guía esta echa para que cualquier persona la pueda usar y de esta manera

poder traer su software a la vida, aunque se pude decir que esta guía está más

enfocada a los diseños de la web ya que cuanta también con un gran rango de

utilidad en la web por lo que en general esta guía es usada en la web.

El sistema sigue la arquitectura de programación MVC (modelo-vista-

controlador), a continuación se explicara que es este patrón y como funciona.

MVC.

El MVC es el acrónimo de Modelo Vista Controlador, que es un patrón

para el desarrollo de software que separa la lógica de control, la interfaz del usuario

24

y los datos del sistema. En este tipo de arquitectura del software existe un sistema

central o controlador que controla las entradas y salida del sistema, un o unos modelo

que se encargan de buscar los datos e información que sea necesaria y una interfaz

gráfica que son lo muestran que es lo que al final va a ver un usuario.

El MVC es muy usado en el desarrollo Web porque a diferencia de la creación de

programas locales donde se usa por lo general un mismo lenguaje para desarrollar

toda un aplicación en el desarrollo Web se requiere por lo menos usar 2

lenguajes(HTML y PHP) para crear una página simple, y todo esto en una sola página

aunado a las consultas en la base de datos que son imprescindibles pues crean hasta

páginas de 300 líneas que después para depurar, mejorar o saber dónde nos estamos

equivocando es un poco difícil. A continuación una explicación un poco más detallada

del modelo, vista y controlador [10].

La capa del modelo

El modelo representa la parte de la aplicación que implementa la lógica

de negocio. Esto significa que es responsable de la recuperación de datos

convirtiéndolos en conceptos significativos para la aplicación, así como su

procesamiento, validación, asociación y cualquier otra tarea relativa a la

manipulación de dichos datos.

A primera vista los objetos del modelo puede ser considerado como la

primera capa de la interacción con cualquier base de datos que podría estar

utilizando tu aplicación. Pero en general representan los principales conceptos en

torno a los cuales se desea implementar un programa.

En el caso de una red social, la capa de modelo se haría cargo de

tareas tales como guardar datos del usuario, el almacenamiento de asociaciones con

amigos, el almacenamiento y la recuperación de fotos de los usuarios, encontrar

sugerencias de nuevos amigos, etc. Mientras que los objetos del modelo pueden ser

considerados como “Amigo”, “Usuario”, “Comentario” y “Foto”.

25

La capa de la vista.

La vista hace una presentación de los datos del modelo estando

separada de los objetos del modelo. Es responsable del uso de la información de la

cual dispone para producir cualquier interfaz de presentación de cualquier petición

que se presente.

Por ejemplo, como la capa de modelo devuelve un conjunto de datos, la

vista los usaría para hacer una página HTML que los contenga. O un resultado con

formato XML para que otras aplicaciones puedan consumir.

La capa de la Vista no se limita únicamente a HTML o texto que

represente los datos, sino que puede ser utilizada para ofrecer una amplia variedad

de formatos en función de sus necesidades tales como videos, música, documentos

y cualquier otro formato que puedas imaginar.

La capa del controlador.

La capa del controlador gestiona las peticiones de los usuarios. Es

responsable de responder la información solicitada con la ayuda tanto del modelo

como de la vista.

Los controladores pueden ser vistos como administradores cuidando de

que todos los recursos necesarios para completar una tarea se deleguen a los

trabajadores más adecuados. Espera peticiones de los clientes, comprueba su

validez de acuerdo a las normas de autenticación o autorización, delega la búsqueda

de datos al modelo y selecciona el tipo de respuesta más adecuado según las

preferencias del cliente. Finalmente delega este proceso de presentación a la capa

de la Vista.

A continuación se explicara cómo es que funciona este estilo de

arquitectura de software, esto se explicara con un ejemplo.

26

Ilustración 3 MVC

El usuario solicita una acción al servidor.

El servidor atiende la petición y manda a llamar al

controlador.

El controlador llama al modelo necesario.

o El modelo atiende la petición y realiza las

operaciones de datos correspondientes.

o El modelo regresa el resultado.

El controlador llama a la vista, enviándole los datos

procesados del modelo.

o La vista presenta los datos.

El controlador devuelve la vista al servidor.

El servidor presenta el resultado al cliente.

27

A continuación se mostraran las ventajas y desventajas de usar esta

arquitectura de software.

Ventajas.

La implementación se realiza de forma modular.

Sus vistas muestran información actualizada siempre. El

programador no debe preocuparse de solicitar que las vistas se

actualicen, ya que este proceso es realizado automáticamente por el

modelo de la aplicación.

Cualquier modificación que afecte al dominio, como aumentar

métodos o datos contenidos, implica una modificación sólo en el

modelo y las interfaces del mismo con las vistas, no todo el

mecanismo de comunicación y de actualización entre modelos.

Las modificaciones a las vistas no afectan al modelo de dominio,

simplemente se modifica la representación de la información, no su

tratamiento.

MVC está demostrando ser un patrón de diseño bien elaborado

pues las aplicaciones que lo implementan presentan una

extensibilidad y una mantenibilidad únicas comparadas con otras

aplicaciones basadas en otros patrones.

Desventajas.

Para desarrollar una aplicación bajo el patrón de diseño MVC es

necesario una mayor dedicación en los tiempos iniciales del

desarrollo. Normalmente el patrón exige al programador desarrollar

un mayor número de clases que, en otros entornos de desarrollo, no

son necesarias. Sin embargo, esta desventaja es muy relativa ya que

posteriormente, en la etapa de mantenimiento de la aplicación, una

aplicación MVC es mucho más mantenible, extensible y modificable

que una aplicación que no lo implementa.

28

MVC requiere la existencia de una arquitectura inicial sobre la que

se deben construir clases e interfaces para modificar y comunicar los

módulos de una aplicación. Esta arquitectura inicial debe incluir, por

lo menos, un mecanismo de eventos para poder proporcionar las

notificaciones que genera el modelo de aplicación; una clase Modelo,

otra clase Vista y una clase Controlador genéricas que realicen todas

las tareas de comunicación, notificación y actualización que serán

luego transparentes para el desarrollo de la aplicación.

MVC es un patrón de diseño orientado a objetos por lo que su

implementación es sumamente costosa y difícil en lenguajes que no

siguen este paradigma.

Esta arquitectura de software es con la que trabaja Codeigniter ya que

de esta manera el sistema funciona de manera más rápida ya que todo está separado

en diferentes archivos. Por lo que solamente se hacen referencias a las funciones a

las que una está accesando, las cuales darán respuesta de manera casi inmediata.

Aunque MVC es un patrón de diseño el cual fue ideado para

aplicaciones de escritorio hace unos 40 años (en los 70’s), resulta muy práctico en la

web por varias razones:

Está enfocado en separar responsabilidades

Si en este momento estás pensando “y eso en que me afecta o

beneficia”, pues pensemos un poco en cómo están creadas las aplicaciones y sitios

web actuales, HTML para los objetos o el marcado, CSS para el estilo y JavaScript

para la lógica, cada uno con su propio enfoque y su propia responsabilidad, pues con

MVC es lo mismo pero incluyendo los componentes que mencionamos antes.

Reutilizar Código

Cualquier framework que creado a partir de MVC te permite reutilizar

código, regresar vistas totales o parciales, evitando duplicar estilos o contenido en

las vistas. Todo el manejo de datos se realiza en los modelos, por lo que si modificas

29

tu base de datos solo es necesario modificar el modelo correspondiente para que

permita manejar los datos actualizados, sin necesidad de actualizar cada lugar donde

es utilizado.

Evitamos código Espagueti

Con este patrón de diseño reducimos y hasta eliminamos el uso de

código de servidor y de presentación en un mismo lugar.

Perfecto para equipos multidisciplinarios

Con este patrón de diseño reducimos y hasta eliminamos el uso de

código de servidor y de presentación en un mismo lugar. Por lo que si en tu equipo

hay alguien encargado de maquetar la aplicación, alguien más se encarga de crear

las reglas de negocio y demás actividades, cada uno puede trabajar

independientemente del otro sin sufrir afectaciones.

Desarrollo. La metodología con la cual se desarrolló el sistema es el método de

cascada, en que consiste el método de cascada. El método de cascada, es el

enfoque metodológico que ordena rigurosamente las etapas del proceso para el

desarrollo de software [1], esto quiere decir que no se puede comenzar con una

nueva actividad o proceso sin que la actividad o proceso anterior finalice. El modelo

puede ser considero una cascada con varios saltos, en la que cada salto representa

cada una de las etapas de las fases del ciclo de vida [2]. En este modelo el desarrollo

del software se divide en 5 etapas principales, las cuales pueden ver representadas

en la siguiente figura.

30

Ilustración 4 modelo de cascada

Como se puede observar en la imagen el método de cascada divide el

desarrollo del sistema en cinco etapas principales. La primera de estas etapas es la

de análisis de requerimientos, en esta etapa se analizan las necesidades de los

usuarios finales del sistema para determinar qué objetivos debe de cubrir [3].

La segunda etapa es la de diseño, es la fase en donde se realizan los

algoritmos necesarios para el cumplimiento de los requerimientos del usuario así

como también los análisis necesarios para saber que herramientas usar en la etapa

de Codificación [8], en cuanto al diseño del sistema o de las ventas de este pasa por

un proceso en el cual se investiga cuáles son los colores que mejor se verían en el

sin ser cansados para el usuario de ver durante mucho tiempo.

La tercera etapa es la de implementación (programación). Es la fase en

donde se implementa el código fuente, haciendo uso de prototipos así como de

pruebas y ensayos para corregir errores. Dependiendo del lenguaje de programación

y su versión se crean las bibliotecas y componentes reutilizables dentro del mismo

proyecto para hacer que la programación sea un proceso mucho más rápido [9].

La cuarta etapa es la etapa de prueba, en esta etapa se realizan

diferentes pruebas en busca de errores que puedan surgir y no solo eso sino que

también se prueba la aplicación en cuanto al tiempo que paso desde que realizas

una acción hasta el tiempo en el que te devuelve el resultado esto para qué los

programadores puedan optimizar el sistema para poder reducir este tiempo lo más

31

posible.

La quinta y última etapa es la de mantenimiento. Una de las etapas más

críticas, ya que se destina un 75% de los recursos, es el mantenimiento del Software

ya que al utilizarlo como usuario final puede ser que no cumpla con todas nuestras

expectativas [9].

A continuación se muestran las ventajas y desventajas de usar este ciclo

de vida de software.

Ventajas.

1. Modelo y planificación fácil y sencillos.

2. Sus fases son conocidas por los desarrolladores.

3. Los usuarios lo pueden comprender fácilmente.

Desventajas.

1. En la vida real, un proyecto rara vez sigue una secuencia lineal,

esto crea una mala implementación del modelo, lo cual hace que

lo lleve al fracaso.

2. El proceso de creación del software tarda mucho tiempo ya que

debe pasar por el proceso de prueba y hasta que el software no

esté completo no se opera. Esto es la base para que funcione bien.

3. Cualquier error de diseño detectado en la etapa de prueba

conduce necesariamente al rediseño y nueva programación del

código afectado, aumentando los costos del desarrollo.

A continuación se muestra una lista de las tecnologías utilizadas para

desarrollar los sistemas y se explica para que fueron utilizadas.

1. Codeigniter, este fue utilizado como el ambiente de desarrollo

para el sistema.

2. Brackets, este editor de texto fue el que se utilizó para codificar.

3. PostgreSQL, es la base de datos con la cual se trabajó durante

32

el desarrollo.

4. WAPP, este programa se utilizó para instalar los siguientes

servicios a la computadora asignada, apache, PHP y

PostgreSQL.

5. Dia, se utilizó para hacer los diferentes diagramas.

6. FPDF, una librería de uso libre que se utilizó en la creación de

pdf

Durante la primera semana de prácticas profesionales fue básicamente

el tomar todos los cursos que dictaba la empresa que eran de carácter obligatorio

que todos los nuevos miembros toman. Durante esta semana se fue entregado el

equipo de cómputo que la empresa entrega a todos los miembros nuevos, se tuvo

que tomar un curso de aproximadamente 6 horas en el cual se configuraba el equipo

de cómputo.

Durante la segunda semana de prácticas una de las tareas más

importantes que se realizaron fue la recolección de requerimiento del sistema y

también se procedió a descargar todo el software necesario para empezar con el

desarrollo, después de hacer todas estas cosas, lo siguiente fue acudir una junta

con la persona encargada del proyecto, en la cual se vio afondo todo los

requerimientos del sistema y también los campos que se le deben de pedir a la

persona para que pueda ser dada de alta en el sistema. Durante los cuatro días

restantes de esta semana se trabajó con los siguientes tres diagramas el diagrama

de la base de datos, el diagrama de caso de uso y por último el diagrama de

actividades, uno de los diagramas que sufrió muchos cambios durante el este

proceso fue el diagrama de actividades como se puede observar en la siguiente

imagen este fue el resultado final que se obtuvo después de muchas revisiones

realizadas por el asesor del proyecto en IBM.

33

Ilustración 5diagrama de caso de usao

Otro de los diagramas que también paso por mucho cambios durante

la segunda semana fue el diagrama de la base de datos por lo que cada cambio que

se realizaba en el diagrama se consultaba con el asesor para saber cuáles eran sus

opiniones sobre el diagrama, ya que este diagrama es el más importante ya que de

este se despliega la relación de la base de datos por eso es de vital importancia que

el diagrama este bien hecho y lo más importante que cuente con la aprobación del

asesor para posteriormente poder crear la base de datos, a continuación se muestra

la versión final del diagrama de la base de datos.

34

Ilustración 6 diagrama de base de datos

Y por último pero no por eso menos importante, el cual casi no sufrió

ningún cambio es el diagrama de caso de uso, el cual se muestra a continuación.

Ilustración 7 diagrama de actividades

Durante la segunda semana de desarrolla la primera cosa que se hizo

fue la de crear la base de datos con los campos que se decidieron que tendría la

base de datos y hacer la conexión de la base de datos con Codeigniter y a partir de

esto es fue el poder hacer pruebas con Codeigniter para intentar de insertar desde

el sistema. La primera vez que se intentó hacer esta acción dieron errores

relacionados con la lógica que estaba manejando en la consulta, se pudo solucionar

35

durante la semana y de esta manera no afecto los planes para la siguiente semana.

Al inicio de la tercera semana después de que en la semana pasada se

hicieron los diagramas anterior mente mostrados fue la creación de la base de datos,

esta se creó con los parámetros que aparecen en el diagrama, si bien uno de los

mayores obstáculos que se presentó a la hora de crear la base de datos fue el poco

conocimiento sobre PostgreSQL, el cual si bien sigue el estándar de SQL, no tiene

las misma sintaxis que maneja MySQL por lo cual se tuvo que investigar la forma

correcta de cómo crear una base de datos y como es que era su sintaxis, como se

mencionó anteriormente si bien es estándar SQL, la forma en la que se crean la tabla

y se el tipo de variable son diferentes en a MySQL, después de que se logró

solucionar los problemas, se terminó de crear la base de datos. También se abordó

el tema del diseño de la página web de manera muy breve.

Al inicio de la cuarta semana se contactó a una de las diseñadoras de

IBM para asesoría en cuanto al aspecto que debe de tener la página web, esto para

tener muy en claro que tipo de tipografía era la que se utilizaría y principalmente para

que proporcionara retroalimentación sobre los bocetos que se enviaron a revisión,

durante el resto de la semana se continuo con este proceso para las diferentes

pantallas del sistemas ya que al tratarse de un sistema web debe de ser agradable

a la vista y que sea fácil de ver, ya que si se utiliza una mala combinación de colores

puede ser cansado de ver para los usuarios, principalmente se enfocó en la pantalla

de inicio de sesión ya que esta es la primera pantalla que los usuarios ven una vez

que acceden a la página web, aunque el diseño de la página web no pudo ser

completado durante esta semana se una buena retroalimentación para poder trabajar

la siguiente semana.

Durante la quinta semana lo primero que se hizo fue el terminar el

bosquejo de la página de inicio, una vez que se terminó esto se le envió el diseño de

la página a la diseñadora, después de que ella aprobara el diseño, se empezó a

hacer el maquetado de la página de inicio de sesión, una vez terminado con el

36

maquetado de la página se continuo con el diseño de las demás ventanas que se

mostraran a los usuarios, cada una de estas ventanas cuenta con una función

diferente, aunque alguna de las funciones también coinciden, el proceso de estar

enviando a revisar cada uno de los diseños para cada venta tuvo una duración de 4

días, después de que todos las paginas tuvieran la aprobación se empezó con el

maquetado de cada una de ellas, una vez que todos los diseños fueron aprobados

se continuo con el maquetado de cada una de estas ventas cuando este proceso

termino, se inició con el proceso de autentificación de usuarios, cabe mencionar que

el sistema maneja dos tipos diferentes tipos de usuario, el primero de estos es el

usuario común el cual tiene permiso para poder dar de alta un alumno, actualizar la

información de este alumno, poder ver el total de alumnos que se registraron por

evento y finalmente el poder imprimir reportes, el segundo tipo de usuarios es el

administrador, el cual tiene la función de poder crear nuevos usuarios para el

sistemas ya sean del tipo normal o administrador, ver una lista de todos los usuarios

que están en el sistema, dar de alta una universidad, dar de alta carreras y poder

crear un evento que se realice en una universidad, durante la codificación de la

autentificación surgieron muchos problemas pero durante esta semana el mayor

problema que se presento fue que la consulta que verificaba si existían los usuarios

no estaba enviando nada, este problema se solucionó durante la semana pero

después de solucionar este problema apareció otro en el cual sin importar el tipo de

usuario que fueras te enviaba a la pantalla de prueba del usuario normal este

problema no se pudo solucionar durante esta semana.

En la sexta semana el primero punto que se tomó al inicio de la semana

fue el de solucionar el problema de la autentificación de usuarios, cuando se logró

resolver este problema surgió uno nuevo en el cual cuando se iniciaba sesión se

ciclaba él envió de la información a autentificar, se buscó dentro el código que era lo

que ocasionaba este error, después de buscar se encontró que lo que estaba

ocasionando este error era una función en la cual se estaba guardando la información

del usuario cuando entraba al sistema ya que esta función solo estaba guardando

varias veces el nombre del usuario. Después de que se solucionó el error del inicio

37

de sesión, lo siguiente fue el empezar con la codificación de la primera página del

usuario normal en la cual se insertaba la información de los alumnos en la base de

datos, este proceso tomo alrededor de dos horas ya que surgieron errores al pasar

algunos de los datos requeridos ya que el tamaño del superaban la cantidad de

caracteres de las que aceptada el tipo de dato que se le puso al campo en la base

de datos por lo que se tuvo que investigar qué tipo de dato sería mejor cambiar para

que pudiera almacenar lo que se le estaba pasando después de buscar en diferentes

sitios de internet se encontró con la repuesta, lo siguiente que se hizo fue el cambiar

el dato de la variable en la tabla, una vez que se solucionó este este problema lo

siguiente fue hacer una consulta con Ajax en la cual se cargaba dinámicamente el

evento asignado a una universidad después de que la seleccionabas en el combo-

box esto para hacer que solo se mostraran los evento de esas universidades y de

esta manera no cargar todos los eventos de la base de datos y también se hizo eso

ya que un mismo evento se puede impartir en diferentes universidades, si se

cargaban todos los evento de la base de datos podría traer un problema ya que un

mismo evento aparecería más de una vez y el usuario no sabría distinguir cual de

esos evento está relacionado a la institución que el selecciono. La siguiente tarea

con la se continuo en esta semana fue el de poder mostrar a los alumnos registrados

en la base de datos, en esta ocasión no fue agregado el filtra ya que solo se quería

ver que datos se mostrarían en la tabla, ya que si se mostraban todos los datos de

los alumno, la información que aparecía no se podía apreciar muy bien ya que esta

se mostraba muy compacta, después de hablar con el líder del proyecto se decidió

que solo se mostrarían solo la información para poder contactar al alumno.

En la séptima semana se empezó con la codificación de la primera

función del administrador la cual es dar de alta nuevos usuarios, en esta parte se

tuvo un conflicto a la hora de poder distinguir a los usuarios ya que en la función de

inicio de sesión se pudo que el tipo 1 fuera para los usuarios normales y el tipo 2

para los administradores pero esto se cambió ya que el administrador tiene un mayor

control del sistema, al hacer este cambio para la distinción también se hizo el cambio

en la función de inicio de sesión para que no ocasionara ningún conflicto. Después

38

de que se solucionó este se procedió a poner una validación específica y única para

el registro de nuevos, la cual consiste en la contraseña ya que las contraseñas son

encriptadas cuando se pasan a la base de datos la condición es que ambas

contraseñas coincidan una con la otra ya que si detecta que no son iguales el sistema

manda un mensaje de error diciendo que no se pude realizar la acción debido a que

las contraseña no son iguales, después de hacer esta validación en cuanto a las

contraseñas se activó la encriptación de las misma. Después de realizar estas

acciones lo siguiente fue el mostrar todos los usuarios registrados en el sistema,

durante este proceso se cambiaron los estilos de las tablas para que fueran un poco

más sencillas esto siguiendo un diseño minimalista que tiene todo el sistema ya que

las anteriores rompían con el esquema que se tenía y por lo tanto no concordaba con

el diseño de la página web.

En la octava semana el día lunes se trabajó codificando la parte de

registro de la universidad y así como en mostrar todas las universidades que están

dadas de alta en la base de datos esto para que las personas puedan ver todas las

universidades que existen en el sistema y así evitar que puedan dar de alta una

nueva universidad. También se trabajó en poder dar de alta las carreras y no solo

eso también el mostrar todas las carreras registradas en la base de datos para poder

evitar que den de alta carreras que ya existen, para esta sección se realizó una

búsqueda de todas las carreras relacionadas a tecnologías de la información se

obtuvo como resultado un aproximado de 60 carreras relacionadas a tecnologías de

la información, después de hacer esta búsqueda se registraron todas esta carreras

en la base de datos cabe mencionar que se busca de preferencia personas en el

área IT pero también reclutan personas que no están dentro de esta área. Se

buscaron errores en estas dos ventanas para poder solucionarlos

En la novena semana se continuo con la programación de las funciones

del administrador lo cual fue la última función la de poder dar de alta un evento. Para

que esta función sirviera era necesario pedir que el evento fuera asignada a una

universidad y después se pide el usuario que pidió dar de alta este evento, esta

39

función cuanta con varias validaciones, en las cuales le pide que el evento tenga un

mínimo de 5 caracteres y un máximo de 30 caracteres no solo se hicieron las

validaciones con JavaScript también se hicieron validaciones con PHP. Después de

que esta función fue terminada se agregaron varios eventos a diferentes

universidades, después de hacer esto se probaron los campos dinámicos en la

página donde se agregan alumnos a la base de datos para verificar que funcionaran

ya que como se mencionó anterior mente se hizo una función con Ajax para que se

cargara dinámicamente el combo-box de evento después de que se eligiera la

universidad, si bien la función funciono el tiempo de espera para que se cargara el

combo-box es de alrededor de 2 segundos por lo tanto se trató de optimizar el

funcionamiento de esta función y se logró reducir a tan solo un segundo. Después

de hacer esto se le mostraron los avances a asesor dentro de la empresa.

De la décima a la onceava semana se trabajó con las tablas que

mostraban la información de las base de datos, lo primero que se hizo fue el agregar

una paginación a cada una de las tablas en las cuales solos se mostraban 5 registros

para continuar viendo los demás registros era necesario el hacer clic en la siguiente

página de la paginación, esto no resulto muy conveniente ya que se estaba usando

la función de paginación que tiene Codeigniter pero el problema radica en que los

numero de las paginas aparecen muy cerca y muchas veces al intentar cambiar de

página se presionaba otra que no era. Después de que se terminó la paginación se

le mostro la página al asesor para que el diera su opinión acerca de la paginación si

él creía que era buena idea mantener la paginación, después de platicar con él se

concluyó que la paginación no sería la mejor idea para mostrar los datos, por lo que

se buscó la forma de sustituir esto. Se buco una forma de cambiar esto, después de

buscar se encontró una propiedad de Css Overflow, la cual sirve en el modelado de

cajas para indicar al navegador qué es lo que debe hacer con el contenido que no

cabe dentro de una capa, según las dimensiones que se le han asignado [7], con esta

función de ccs3 la que se hizo fue hacer que los usuarios puedan hacer un scroll en

las tablas para poder ver todos los datos de la base de datos.

40

En la décimo segunda semana se hicieron cambios en la forma en la

que se actualizaba a los alumnos registrados ya que solo se estaba actualizando las

disponibilidad de los alumnos y no su información como tal para poder hacer que se

pueda actualizar la información se creó una nueva página en donde llamas los datos

de la base de dato para poder cambiar dichos datos, esto se hizo ya que muchas

veces que contactaban a un persona, esta persona ya no tenía el mismo número de

teléfono e incluso cambiaba su correo electrónico, por lo tanto ya no se tenía una

manera de comunicarse con esta persona. Para poder hacer esto se hizo una función

con Ajax para traer los datos de la persona dinámicamente con combo-box anidados,

a que se refiere esto que cuando la persona selecciona la universidad, el campo de

evento se llena solo con los evento realizados en la universidad, después de que uno

selecciona el evento se llena un campo con los nombres de todos los alumnos

registrados en los evento, cuando se selecciona una persona se llenan los inputs con

los datos de la persona para que la persona que haga el contacto con el alumno

pueda actualizar la información del estudiante si es que cambio su correo electrónico

o su número de teléfono. Después de terminar con el cambio se contactó a al líder

de proyecto para mostrarle los cambios realizados, también se le explico cómo poder

hacer la actualización de la información. Después de contactar con el líder de

proyecto lo siguiente fue el hacer pruebas con esta página para detectar cualquier

error.

En la décimo tercera semana el día lunes se buscó una librería bajo

licencia de uso para poder imprimir reportes en pdf, después de buscar en internet

se encontraron dos librerías que se pueden utilizar para generar reportes de pdf la

primera de ellas es FPDF, la cual es una clase escrita en PHP que permite generar

documentos PDF directamente desde PHP [5], la otra librería que se encontró fue

TCPDF, la cual es una Open Source Clase/Biblioteca para el Popular Lenguaje de

Programación Web PHP v4 y v5, la cual permite crear ficheros PDF al vuelo, es decir

dinámicamente [6], después de buscar más información sobre ambas librerías se

decidió utiliza FPDF porque es más fácil de configurar para que funcione en

Codeigniter, después de esto se descargó la librería una vez descargada se

41

descomprimió y se agregó a la carpeta de third_party, después de hacer esto se creó

una nueva librería para poder usar FPDF, después de crear la librera y de configurar

el header y el footer del pdf, se continuo con la codificación de la función para poder

imprimir el pdf, después de terminar esto se hizo una prueba para verificar si estaba

funcionando correctamente todo pero dio un error, lo cual era provocado por una

fuente que no se podía cargar en la librería que se creó previamente ya que esta

fuente no estaba instalada en la computadora, para solucionar esto simplemente se

cambió de fuente y el estilo de la fuente por una que estaba instalada en la

computadora, una vez que se cambió la fuente se volvió a probar la funciona para ver

si esto funciono efectivamente con esto se solucionó el problema, la siguiente tarea

era el poder imprimir un pdf, para que solo se mostraran los alumno registrados en un

evento especifico después de hacer barias pruebas se pudo lograr esta acción

después siguió con el siguiente reporte el cual era más específico de los participantes

registrados en un evento y que estén a punto de entrar a formar parte de IBM, después

de hacer esto toco poner el total de participantes en cada uno de los reportes que se

imprimen para que ellos puedan llevar un control de cuantos alumnos se registran por

evento y cuantos de ellas están realmente interesados en entrar a IBM. Cuando estas

tareas fueron terminadas se le mostraron al asesor todos los avances que se tenían

hasta el momento, después de hablar con el líder del proyecto lo siguiente fue el

ponerle el logo de IBM a los reportes.

En la décimo cuarta semana durante el día lunes se dedicó a acomodar

lo que vendría siendo el reporte, ya que la información se mostraba muy chica por lo

que se tuvo que cambiar el tipo de letra así como el tamaño de la fuente esto claro

teniendo el cuanta la tipografía que maneja IBM para que todo estuviera bajo los

controles de calidad que maneja la empresa. Durante el día martes se hicieron varias

correcciones a los estilos ya que cuando se mostraba la página en un dispositivo

móvil no se veía del todo bien, esto es muy importante ya un día fallo la computadora

del asesor por lo que se pensó en hacer la página responsiva para que puedan usar

una tableta para poder registrar a los alumnos o incluso poder dar de alta eventos,

después de solucionar este problema lo siguiente fue el poder hacer que el tiempo

42

de carga de los combo-box fuera más corto y de esta manera poder hacer que el

registro de los participantes fuera más rápido. También se cambió los mensajes de

error que se mostraban con JavaScript ya que algunos tenían faltas de ortografía.

Durante el día miércoles se contactó al líder del proyecto para poder buscar a la

persona que estará encargada de dar mantenimiento a la aplicación esto con el fin

de poder explicar el funcionamiento de las diferentes funciones que contiene el

sistema. Durante el día jueves se hicieron pruebas en búsqueda de algunos errores

que se pudieron pasar por alto la búsqueda no arrogo ningún error. Durante el día

viernes se tuvo una junta con la persona que se hará cargo de dar mantenimiento en

la cual se le explico todas las funciones del sistema a fondo se le dio a conocer todas

las tecnologías que se usaron para desarrollar la aplicación no solo eso sino que

también se le explico cómo es que trabaja el framework de Codeigniter para que en

un futuro él pueda agregar nuevas funciones al sistema, después de explicarle a la

persona como es que funciona el sistema se le menciono toda la infraestructura que

se utilizó y de donde la podía descargar para que el empezara a moverle al sistema

lo más pronto posible para que se familiarizara con Codeigniter.

En la semana número quince la cual fue la última semana de estadías

se realizaron solo tres actividades, la primera fue el día lunes en la cual se habló con

el líder del proyecto sobre la presentación que se hizo el día miércoles de esa

semana, ya que la exposición del sistema seria con las personas que están

encargadas del reclutamiento de nuevos miembros. Se habló con el sobre las cosas

que se incluirían en la presentación de power point para después mostrar el sistema

funcionando como los dos roles que admite el sistema, una vez finaliza la junta con

el asesor de proyecto lo siguiente fue incluir en la presentación los diagramas que se

crearon así mismo se agregaron los objetivos del sistema. Por otra parte se contactó

a la persona encargada de dar mantenimiento a la aplicación para preguntarle si

surgió algún inconveniente al momento de montar el sistema en su computadora.

Durante el martes básicamente fue el agregar registro de eventos pasados a la base

de datos para poder mostrar el sistema funcionando con datos reales que obtuvieron

de personas durante los últimos eventos realizados por IBM, después de agregar la

43

información se hicieron pruebas para verificar que el sistema funcionara sin ningún

problema y si se presentaba un problema solucionarlo lo antes posible para poder

mostrar el sistema sin ningún error en ese momento. El día miércoles se realizó la

presentación con las personas encargadas en la cual se expusieron todas las

funciones del sistema, se respondieron todas las preguntas que le surgieron a las

encargados, también se les expuso todas las tecnologías que se usaron durante el

desarrollo del sistemas. En la plática con las personas se tocó brevemente el teme

sobre el servidor que alojara al sistema. El día jueves se dedicó exclusivamente a

hacer la documentación del sistema, los manuales de usuario y de administrador,

estos manuales son de carácter obligatoria para cada sistema que es desarrollado,

después de se terminó de escribir los manuales se consultó, estos fueron entregados

al líder de proyecto para que los revisara, para poder corregir cualquier error que

tuvieran estos documentos. El día viernes se recibieron las correcciones que se

debían realizar en los documentos, estas correcciones fueron hechas de manera

inmediata para que el asesor los revisara de nuevo, después de hablar con el asesor

el concluyo que los documentos están bien estructurados y que por lo tanto el

sistema ya estaba terminado. Después de eso se entregó el equipo de cómputo que

se fue dado por la empresa al alumno y dicho alumno escribió las contraseñas

correspondientes para que la empresa pueda formatear ese equipo y posteriormente

ser entregada a otra persona.

Resultados y Discusión.

Los resultados que se obtuvieron fueron positivos ya que la aplicación

fue finalizada, cumpliendo todos y cada uno de los objetivos puestos por el organicismo

receptor. El sistema funciona con se espera, se hicieron pruebas para detectar

cualquier error.

Si bien en algún punto del proceso se pensó que no se terminaría de

codificar el sistema fue cuando se pidió un nuevo requerimiento para el sistema, este

requerimiento fue el de poder actualizar la información del sistema ya que estaba cerca

la fecha de finalización de estancias, ya que se produjeron diferentes problemas a la

44

hora de poder actualizar la información de los alumnos por lo que se tuvo mucho

cuidado a la hora de implementar esta nueva función.

Conclusión.

En cuanto a mi conclusión, puedo decir que estoy contento con el

trabajo que he realizado en IBM, el sistema funciona correctamente pero al igual que

todos los sistemas necesita de mantenimiento y de reparación de bugs que puedan

surgir con el paso del tiempo he de mencionar que el sistema será de gran ayuda a

los miembros de reclutamiento de IBM ya que les permitirá tener un mejor control de

todos los alumnos interesados en poder formar parte de IBM y aun que muchas

personas piensen que el sistema puede que no se la gran cosa, cabe mencionar que

el sistema tendrá un gran impacto dentro de IBM campus Guadalajara.

Si bien resulto todo un reto realizar un sistema solo, debo de decir

que es muy gratificante el poder decir que el sistema que realice durante mis

estancias es de gran ayuda en una de las personas de reclutamiento.

Una de las principales cosas que me hubiera gustado cambiar en la

forma en que se actualiza la información de los alumnos ya que para poder realizar

esta acción se tiene que acceder a una nueva venta ya que poder diferentes errores

que surgieron a la hora de querer hacer esta función en la tabla no se pudo, hacer

que esta acción se realizara en la misma página de la consulta tan solo dando doble

clic en la información que se quería actualizar por lo que se tuvo que implementar

una nueva página para hacerlo.

Bibliografía.

[1] Es.wikipedia.org, 'Desarrollo en cascada', 2015. [Online]. Available:

https://es.wikipedia.org/wiki/Desarrollo_en_cascada#cite_note-1. [Accessed: 04-

Dec- 2015].

[2]M. Soloriio, M. Soloriio and V. completo, 'METODOLOGÍA EN

45

CASCADA',Metodologiaencascada.blogspot.mx, 2013. [Online]. Available:

http://metodologiaencascada.blogspot.mx/. [Accessed: 04- Dec- 2015].

[3]i. arteta, i. arteta and V. perfil, 'modelo de cascada y espiral', Modelo-

cascada.blogspot.mx, 2013. [Online]. Available: http://modelo-cascada.blogspot.mx/.

[Accessed: 04- Dec- 2015].

[4] fayerwayer, 'FayerWayer', 2015. [Online]. Available:

https://www.fayerwayer.com/2012/08/visita-la-primera-pagina-web-del-mundo-

creada-hace-mas-de-20-anos/. [Accessed: 06- Dec- 2015].

[5] Fpdf.org, 'FPDF', 2015. [Online]. Available: http://www.fpdf.org/.


[6] wikipedia, 'TCPDF', 2015. [Online]. Available:

https://es.wikipedia.org/wiki/TCPDF. [Accessed: 08- Dec- 2015].

[7]M. Alvarez, 'EL atributo Overflow de CSS', DesarrolloWeb.com, 2015.

[Online]. Available: http://www.desarrolloweb.com/articulos/atributo-overflow-

css.html. [Accessed: 08- Dec- 2015].

[8]i. arteta, i. arteta and V. perfil, 'modelo de cascada y espiral', Modelo-

cascada.blogspot.mx, 2013. [Online]. Available: http://modelo-cascada.blogspot.mx/.


[9] Ecured.cu, 'Modelo en cascada - EcuRed', 2015. [Online]. Available:

http://www.ecured.cu/Modelo_en_cascada. [Accessed: 09- Dec- 2015].

[10] Sosinformatico.blogspot.mx, 'El SOS Informatico. Desarrollo y

programacion web.: Que es Codeigniter y porque usarlo como framework de

desarrollo.', 2011. [Online]. Available: http://sosinformatico.blogspot.mx/2011/02/que-

es-codeigniter-y-porque-usarlo-como.html. [Accessed: 09- Dec- 2015]. [11] IBM Design

Language, 'IBM Design Language | Framework', 2015. [Online]. Available:

https://www.ibm.com/design/language/framework. [Accessed: 09- Dec- 2015].

Anexos.

En esta sección se muestra el código fuente del proyecto en el cual se

estuvo trabajando durante el periodo de estadías, algunas partes del código fuente

fueron censuradas para evitar revelar el nombre de las funciones que realiza y que

46

de esta forma alguien pueda acceder a ella y obtener información sumamente

delicada. El código fuente fue incluido en forma de imagen para cómo se mencionó

anteriormente poder censurar partes del mismo.

Ilustración 8 código

Ilustración 9 código

47

Ilustración 10 codigo

Ilustración 11codigo

48



49



50



51



52



53



54



55



56



57



58



59



60



61



62



A continuación de mostraran las pantallas del sistema, empezando

claramente por la pantalla de inicio de sesión, después de continuar con las pantallas

de las funciones que realiza el usuario normal y para finalizar las pantallas de las

funciones que realiza el administrador.

63

Inicio de sesión.

Ilustración 42 login

Usuario normal.

Ilustración 43 agregar alumno

64

Ilustración 44 consultar alumnos

Ilustración 45 actualizar información del alumno

65

Ilustración 46 reportes

Administrador.

Ilustración 47 crear un usuario nuevo

66

Ilustración 48 consulta de usuarios

Ilustración 49 registro y consulta de universidad

67

Ilustración 50 registro y consulta de carreras

Ilustración 51 registro y consulta de eventos

Glosario.

PHP.

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

https://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n_de_prop%C3%B3sito_general

https://es.wikipedia.org/wiki/Script_del_lado_del_servidor

68

servidor originalmente diseñado para el desarrollo web de contenido dinámico. Fue

uno de los primeros lenguajes de programación del lado del servidor que se podían

incorporar directamente en el documento HTML en lugar de llamar a un archivo

externo que procese los datos. El código es interpretado por un servidor web con un

módulo de procesador de PHP que genera la página Web resultante.

Framework.

El concepto de framework se emplea en muchos ámbitos del desarrollo

de sistemas de software, no solo en el ámbito de aplicaciones Web. Podemos

encontrar framework para el desarrollo de aplicaciones médicas, de visión por

Computadora, para el desarrollo de juegos, y para cualquier ámbito que

pueda ocurrírsenos.

En general, con el termino framework, nos estamos refiriendo a una

estructura de software compuesta de componentes personalizables e intercambiables

para el desarrollo de una aplicación. En otras palabras, un framework se puede

considerar como una aplicación genérica incompleta y configurable a la que podemos

añadirle las últimas piezas para construir una aplicación concreta.

Codeigniter.

Codeigniter es una aplicación de desarrollo Framework para la gente

que desarrolla sitios Webs utilizando PHP.

Semantic UI.

Es un framework de Css que facilita la creación de sitios web

responsivos.

Ajax.

Acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono

https://es.wikipedia.org/wiki/Script_del_lado_del_servidor

https://es.wikipedia.org/wiki/Desarrollo_web

https://es.wikipedia.org/wiki/Contenido_din%C3%A1mico

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

https://es.wikipedia.org/wiki/JavaScript

69

y XML), es una técnica de desarrollo web para crear aplicaciones interactivas

o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es

decir, en el navegador de los usuarios mientras se mantiene la

comunicación asíncrona con el servidor en segundo plano.

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.

JavaScript.

Es un lenguaje de programación interpretado, dialecto del estándar

ECMAScript. Se define como orientado a objetos, 3 basado en prototipos, imperativo,

débilmente tipado y dinámico.

https://es.wikipedia.org/wiki/XML

https://es.wikipedia.org/wiki/Desarrollo_web

https://es.wikipedia.org/wiki/Rich_Internet_Application

https://es.wikipedia.org/wiki/Cliente_(inform%C3%A1tica)

https://es.wikipedia.org/wiki/Navegador_web

https://es.wikipedia.org/wiki/As%C3%ADncrono

codeigniter - upsin

Documents