Post on 07-Jul-2022
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
2
3
4
5
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
Ilustración 12codigo ............................................................................................................................... 48
Ilustración 13codigo ............................................................................................................................... 48
Ilustración 14codigo ............................................................................................................................... 49
Ilustración 15codigo ............................................................................................................................... 49
Ilustración 16 codigo .............................................................................................................................. 50
Ilustración 17 codigo .............................................................................................................................. 50
Ilustración 18 codigo .............................................................................................................................. 51
Ilustración 19 codigo .............................................................................................................................. 51
7
Ilustración 20 codigo .............................................................................................................................. 52
Ilustración 21 codigo .............................................................................................................................. 52
Ilustración 22 codigo .............................................................................................................................. 53
Ilustración 23 codigo .............................................................................................................................. 53
Ilustración 24 codigo .............................................................................................................................. 54
Ilustración 25 codigo .............................................................................................................................. 54
Ilustración 26 codigo .............................................................................................................................. 55
Ilustración 27 codigo .............................................................................................................................. 55
Ilustración 28 codigo .............................................................................................................................. 56
Ilustración 29 codigo .............................................................................................................................. 56
Ilustración 30 codigo .............................................................................................................................. 57
Ilustración 31 codigo .............................................................................................................................. 57
Ilustración 32 codigo .............................................................................................................................. 58
Ilustración 33 codigo .............................................................................................................................. 58
Ilustración 34 codigo .............................................................................................................................. 59
Ilustración 35 codigo .............................................................................................................................. 59
Ilustración 36 codigo .............................................................................................................................. 60
Ilustración 37 codigo .............................................................................................................................. 60
Ilustración 38 codigo .............................................................................................................................. 61
Ilustración 39 codigo .............................................................................................................................. 61
Ilustración 40 codigo .............................................................................................................................. 62
Ilustración 41 codigo .............................................................................................................................. 62
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
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/.
[Accessed: 08- Dec- 2015].
[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/.
[Accessed: 08- Dec- 2015].
[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
Ilustración 12codigo
Ilustración 13codigo
49
Ilustración 14codigo
Ilustración 15codigo
50
Ilustración 16 codigo
Ilustración 17 codigo
51
Ilustración 18 codigo
Ilustración 19 codigo
52
Ilustración 20 codigo
Ilustración 21 codigo
53
Ilustración 22 codigo
Ilustración 23 codigo
54
Ilustración 24 codigo
Ilustración 25 codigo
55
Ilustración 26 codigo
Ilustración 27 codigo
56
Ilustración 28 codigo
Ilustración 29 codigo
57
Ilustración 30 codigo
Ilustración 31 codigo
58
Ilustración 32 codigo
Ilustración 33 codigo
59
Ilustración 34 codigo
Ilustración 35 codigo
60
Ilustración 36 codigo
Ilustración 37 codigo
61
Ilustración 38 codigo
Ilustración 39 codigo
62
Ilustración 40 codigo
Ilustración 41 codigo
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
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
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.