DOI: https://doi.org/10.37811/cl_rcm.v7i1.6143
Uso de herramientas tecnológicas para el modelado y creación de una plataforma web y su aportación al perfil del ingeniero en tecnologías de información y comunicación.
Martha Martínez Moreno
TecNM. Instituto Tecnológico de Toluca
https://orcid.org/0000-0003-3793-6315
Xóchitl Andrea Flores García
TecNM. Instituto Tecnológico de Toluca
https://orcid.org/0009-0004-2296-2400
Blanca Margarita Ángeles Rivera
TecNM. Instituto Tecnológico de Toluca
https://orcid.org/0009-0007-9610-673X
Rosa Elvira Moreno Ramírez
TecNM. Instituto Tecnológico de Toluca
https://orcid.org/0000-0001-7345-2444
Luis Antonio Estrada Manuel
TecNM. Instituto Tecnológico de Toluca
https://orcid.org/0000-0001-6047-3756
Tecnológico Nacional de México
Instituto Tecnológico de Toluca
Metepec -México
Correspondencia: Martha Martínez Moreno [email protected]
Artículo recibido: día mes 2023. Aceptado para publicación: día mes 2023.
Conflictos de Interés: Ninguna que declarar
Todo el contenido de Ciencia Latina Revista Científica
Multidisciplinar, publicados en este sitio están disponibles bajo Licencia Creative Commons 
.
Cómo citar Martínez Moreno, M., Flores García , X. A., Ángeles Rivera , B. M., Moreno Ramírez , R. E., & Estrada Manuel , L. A. (2023). Uso de herramientas tecnológicas para el modelado y creación de una plataforma web y su aportación al perfil del ingeniero en tecnologías de información y comunicación. Ciencia Latina Revista Científica Multidisciplinar, 7(1), 14413-14426. https://doi.org/10.37811/cl_rcm.v7i1.6143
RESUMEN
El Instituto Tecnológico de Toluca dentro de sus planes y programas de estudios establece la formación de estudiantes comprometidos con la sociedad, con el fin de colaborar y contribuir en lo posible con la participación de estudiantes en el desarrollo de actividades que fortalezcan en la prestación de algún servicio a la comunidad, normalmente en dependencias de gobierno o entidades civiles durante un periodo de tiempo, devolviendo a la sociedad un poco de lo mucho que se recibe al ser partícipe en algún programa colaborativo. Además, el estudiante próximo a egresar, en la búsqueda de vacantes donde pueda realizar su ejercicio profesional, requiere de información cercana a su ámbito de estudios para colocarse profesionalmente.
La formación académica de los estudiantes de la carrera de ingeniería en tecnologías de información y comunicación, comprende dentro de su programa de estudios, el desarrollo de competencias tecnológicas y dentro de su perfil de egreso, la habilidad para el diseño y desarrollo de aplicaciones web en una propuesta de proyecto de la materia de taller de investigación II, se logra diseñar una plataforma de uso interno, en la que además de la documentación metodológica de investigación, por lo que el presente documento describe esas competencias adquiridas en el uso de herramientas tecnológicas como Bootstrap 5 y lenguaje CSS, además de herramientas de modelado y gestores para la creación de una plataforma web de apoyo a la Institución y a los estudiantes próximos a realizar servicio social o en búsqueda de vacantes de empleo.
Palabras clave: página Web, servicio social, tecnologías de información, metodología de desarrollo.
Use of technological tools for the modeling and creation of a web platform and its contribution to the profile of the engineer in information and communication technologies
ABSTRACT
The Technological Institute of Toluca within its study plans and programs establishes the training of students committed to society, in order to collaborate and contribute as much as possible with the participation of students in the development of activities that strengthen the provision of some service to the community, normally in government agencies or civil entities for a period of time, giving back to society a little of what is received by being a participant in a collaborative program. In addition, the student who is about to graduate, in search of vacancies where he can carry out his professional practice, requires information close to his field of study to be placed professionally.
The academic training of the students of the engineering career in information and communication technologies, includes within their study program, the development of technological competences and within their graduation profile, the ability to design and develop web applications in a project proposal for the subject of research workshop II, it is possible to design a platform for internal use, in which, in addition to the research methodological documentation, for which reason this document describes those skills acquired in the use of technological tools such as Bootstrap 5 and CSS language, as well as modeling tools and managers for the creation of a web platform to support the Institution and students about to perform social service or in search of job vacancies
Keywords: Web page, social service, information technologies, development methodology.
INTRODUCCIÓN
En este trabajo de investigación se describe el proceso que como estudiantes de la carrera de Ingeniería en Tecnologías de Información y comunicaciones han desarrollado para la creación de una plataforma web que permita promover y difundir la información necesaria del proceso de servicio social, a los estudiantes de todas las carreras que se imparten en el Instituto Tecnológico de Toluca.
El producto final de un trabajo de investigación es una plataforma web de servicio social, la cual surge como necesidad en el departamento de gestión tecnológica y vinculación y de la comunidad estudiantil del mismo plantel, a partir de la documentación metodológica de una investigación aplicada, en la que se desarrollaron instrumentos para la recolección de información de parte de los usuarios y de la jefatura de servicio social, cuyos requisitos funcionales se fueron considerando para el diseño y modelado de una propuesta viable para ambas partes. Hasta el desarrollo de la programación de los módulos y de los contenidos de información de la página web, concluyendo con el proceso de montaje del host para su prueba y visto bueno por parte de la jefatura de gestión tecnológica y vinculación.
METODOLOGÍA
Fundamento teórico
El Servicio Social es una iniciativa de los propios estudiantes con la intensión de prestar servicios profesionales en comunidades de orden social, gubernamental e incluso empresas en las que puedan colaborar con sus conocimientos. Esto surge en los años 30 como una respuesta de las instituciones de educación superior a la necesidad de reconstruir el país surgido de la Revolución Mexicana (UNAM, s.f.).
En algunas instituciones de educación media superior aplica la realización de servicio social en el ámbito tecnológico y formación para el trabajo, para de alguna forma adquirir destrezas y habilidades al mismo tiempo que se contribuye a la sociedad.
Actualmente se vive en un mundo donde los estudiantes requieren de hacer una actividad profesional para poder concluir sus estudios y de esa manera obtener un título. Últimamente la tasa de terminación de la educación superior oscila en las edades (25-34 años) los que culminan la educación superior, subiendo así del 16.3% registrado en 2010, a 22.6% en 2017. Actualmente, más de medio millón de egresados de educación superior entran al mercado laboral cada año (Político, 2020).
En el Instituto Tecnológico de Toluca, la Dirección General de Extensión Universitaria a través de la Dirección de Vinculación y Servicio Social es la instancia responsable de la organización, planeación, seguimiento, evaluación y difusión del servicio social de sus estudiantes. Por lo que la divulgación del programa, así como el registro de servicio social están bajo la responsabilidad de la Dirección de Vinculación y Servicio Social (México, 2015).
Por otro lado, la bolsa de trabajo consiste en la búsqueda de distintas vacantes dependiendo de las habilidades con las que cuentes así mismo con la finalidad de ser reclutado y esto lleva a cabo realizar distintas actividades con fines de lucro.
La bolsa de trabajo es una herramienta por la que, a través de un listado, una empresa o institución se sirve para reclutar candidatos a lo largo del tiempo entre los que puedan optar a unos trabajos concretos (Pedrosa, 2022).
Sección experimental
De acuerdo a las características solicitadas en el protocolo de investigación se determina que el tipo de investigación del proyecto es una investigación aplicada tecnológica ya que resolverá un problema específico a través de una aplicación web institucional para la divulgación del programa de servicio social y la búsqueda de empleos o vacantes. Además, Servicio Social sirve para generar conocimientos que se puedan poner en práctica en el sector productivo, con el fin de impulsar un impacto positivo en la vida cotidiana (Grajales, 2000).
Para este proyecto se utilizó como metodología de desarrollo la de cascada, de acuerdo a (Parra, 2011) los proyectos se tratan de forma predictiva, midiendo el progreso en términos de artefactos entregados, especificación de los requisitos, documentos de diseño, planes de pruebas y revisiones de código. Citado en Milena, 2019.
La Población
El proyecto está enfocado en estudiantes del Instituto Tecnológico de Toluca que se encuentran cursando el Séptimo semestre en adelante o aquellos que cuentan con el 70% de créditos.
El objetivo general
Desarrollar una página web que permita al estudiante, la búsqueda de distintas opciones de empresas, organizaciones e instituciones para la realización de su Servicio Social o empleo y a la vez agilizar el proceso de documentación en la prestación de servicio social para el estudiante.
El proceso de investigación a realizar fue el siguiente:
1. Elaboración y aplicación de instrumentos para el análisis y la obtención de requisitos.
La primera fase del análisis de requerimientos del proyecto tiene como enfoque principal, ayudar a los todos los usuarios potenciales de la página web a desarrollar y poder comprender de mejor manera qué es funcional para ellos y que necesitan plasmar en la página web para ayudar a crear un contexto y de esta manera puedan comprender y aplicar lo que el equipo de desarrollo queremos presentar en la página.
El primer paso es la elaboración del diseño y estructura de las encuestas que se van a aplicar. Para este caso se aplica como instrumento una encuesta para la recolección de datos. Esta encuesta se aplica a 200 estudiantes de diversas carreras y tiene como objetivo obtener información sobre el método de búsqueda de Bolsa de trabajo y saber si los estudiantes cuentan con opciones factibles para realizar el proceso de documentación de Servicio Social; dando como resultado, los siguientes datos: el 76% de los estudiantes se encuentra en un rango de edad entre los 21 y 25 años. El 41% de ellos se encuentran cursando el noveno y décimo semestre. Además, el 51% de los estudiantes están por realizar su Servicio Social, mientras que el 39% empezara a realizar su Residencia Profesional y el 10% restante no planea realizar ninguno por el momento. Además, mencionan que el 66% de los estudiantes realizan su búsqueda de Servicio Social y Residencia por medio de la Universidad o sugerencias de compañeros de la carrera y el 24% usa Redes Sociales como método de búsqueda. Y por último, el 36% de los estudiantes tienen dificultad al encontrar un lugar para realizar su Servicio Social debido a que no cuentan con las habilidades necesarias para cubrir la vacante, el 29% no encuentra un lugar donde realizarlo, mientras que el 21% no ha tenido ningún problema y el 14% de los encuestados no encuentran de su carrera.
2. Análisis de la información obtenida para la elaboración de la propuesta de diseño.
Basados en los instrumentos antes mencionados, se consideraron los requisitos funcionales para la aplicación, ver tabla1.
Tabla 1. Requisitos funcionales iniciales
|
Identificador |
Descripción de Requerimiento |
Criterios de aceptación |
Nivel de prioridad |
Nivel de Complejidad |
|
RF-001 |
La aplicación debe contar con una página de inicio de sesión |
Se requiere un medio que funja como una entidad que permita o deniegue el acceso. |
Alto |
Bajo |
|
RF-002 |
Se requiere una conexión con el ERP 1(Base de datos) para comparar los datos obtenidos y permitir el acceso. |
Se requiere para verificar si el alumno está inscrito en el Instituto Tecnológico de Toluca |
Alto |
Alto |
|
RF-003 |
Todos los datos relacionados con el sistema deben almacenarse en una base de datos para su posterior uso. |
Se requiere para verificar el tipo de usuario que quiera acceder |
Alto |
Alto |
|
RF-004 |
Duplicidad de la información de los alumnos. |
No se puede tener información duplicada en el sistema que entorpezca el manejo de esta. |
Alto |
Alto |
|
RF-005 |
Arquitectura de desarrollo |
Sistema desarrollado bajo una plataforma web, con una arquitectura MVC |
Alto |
Alto |
|
RF-006 |
La página web contará con un apartado para documentación |
Los documentos que se mostrarán a partir del proceso de Servicio Social hecho por los administrativos encargados podrán ser descargados en formados PDF y .DOC |
Medio |
Medio |
3. Elaboración de diagramas de casos de uso
Para el desarrollo de diagramas UML se utilizó la aplicación de diagramación inteligente, Lucid chart es una herramienta para el diseño de diagramas de casos de uso y ventanas para el usuario final, en este proyecto se está usando esta herramienta para el diseño de los diagramas UML. En las figuras 1 y 2 se muestra solo algunos de los casos de uso de la aplicación.
Figura 1. Información Sistema – Administrador
|
Actor participante: Administrador |
|
Tipo: Principal |
|
Casos de uso: Alta de vacantes actualizadas para Bolsa de Trabajo. |
|
Asociaciones: Es una línea recta entre el actor y el caso de uso evidencia que el actor y el caso de uso descrito en la elipse están relacionados. |
|
Descripción: El administrador puede dar de alta las vacantes que se encuentren disponibles en el Estado de México, estas deben de estar actualizadas y tener vacantes conforme a las carreras que tiene el Instituto Tecnológico de Toluca. |
En la Figura 2 se hace la representación de lo que será la búsqueda de vacantes en la página web, de manera que cada vacante estará especificada y el usuario podrá tener contacto con la persona responsable mediante teléfono o correo electrónico, y se implementará un seguimiento dependiendo del estatus que tenga el alumno.
Figura 2. Contacto Bolsa de trabajo – Usuario
Por otra parte, se desarrollaron los diagramas de secuencia de los procesos, como muestra la figura 3.
Figura 3. Diagrama de secuencias
4. Diseño de Interfaces y módulos de la página web.
Whimsical es otra herramienta para el diseño, diagramas, esquemas, mapas, etc. Permite elaborar el trabajo de forma colaborativa, fácil y sencilla. Para el diseño de la maqueta de la página principal (Inicio), se encontrará una barra donde se encuentran el inicio, conócenos, servicio social, bolsa de trabajo e información adicional donde cada uno contendrá su descripción general y la información que solicita el alumno. En las categorías ya antes mencionadas se les podrá dar clic a cualquiera de ellas y desplegará la información o lo mandará a otra página donde se encontrará la información más detalladamente, véase en la Figura 4, la sección de conócenos, donde se muestran datos de los encargados de la Gestión de todos los trámites relacionados y contactos para dudas.
Figura 4. Maqueta inicial
Posteriormente en la sección de servicio social, se muestra la información que el alumno requiere para el servicio social, cuenta con un apartado de documentos de descargas en donde se anexan los documentos para facilitar y organizar el proceso de inscripción al Servicio Social.
Toda la información estará disponible en la página para el uso de los alumnos que se encuentren en el proceso de servicio social, así como los formatos necesarios para el proceso y control del servicio social, esta parte contiene los documentos que serán descargados por los alumnos que soliciten su servicio social. Ver figura 5.
Figura 5. Apartado servicio social
5. Herramientas para el desarrollo de la página Web
Visual Studio Code véase en la Figura 6 es un editor de código fuente ligero pero potente que se ejecuta en el escritorio y está disponible para Windows, macOS y Linux. Incluye apoyo para manejo en JavaScript, TypeScript y Node.js y cuenta con una serie de extensiones para otros lenguajes y tiempos de ejecución (como C ++, C #, Java, Python, PHP, Go, .NET) (M. Visual Studio, 2022).
Figura 6. Programación de Header
Bootstrap, el cual es un framework front-end utilizado para desarrollar aplicaciones web y sitios mobile first, o sea, con un layout que se adapta a la pantalla del dispositivo utilizado por el usuario. Bootstrap es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript adicionales (Slant, 2020).
Para poder darle estilo y ajuste en diferentes navegadores esta página web, se necesitará del software de programación. El software que se utilizó para desarrollarlo es Bootstrap, ver figura 7.
Figura 7. Bootstrap
La figura 8 muestra el código para que el usuario pueda descargar diversos formatos que el proceso requiere.
Figura 8. Código de formatos
PostgreSQL, es un gestor de bases de datos orientadas a objetos (SGBDOO o ORDBMS en sus siglas en inglés) muy conocido y usado en entornos de software libre porque cumple los estándares SQL92 y SQL99, además de las funcionalidades que soporta, lo que lo sitúa al mismo o a un mejor nivel que muchos SGBD comerciales (Ginestá, s.f.).
Además de ser un gran gestor de bases de datos relacionales que brinda la fiabilidad, integridad de datos, así como la portabilidad de códigos a diversos sistemas operativos Windows, Linux y Unix (Quicklinks, 2023).
JavaScript es un lenguaje de programación multiplataforma orientado a objetos que se utiliza para hacer que las páginas web sean interactivas, es un lenguaje interpretado, por lo que no es necesario compilar los programas para ejecutarlos citado en (Eguíluz, 2009) En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios
6. Creación de pruebas y funcionalidad para la corrección de errores o modificaciones
Para una primera prueba, se colocó el producto de software en un host gratuito llamado 000webhost, para poder visualizar la página ya funcional y final en diferentes navegadores se necesitará de un servidor gratuito. El servidor que se utilizara para obtener el servicio de la página es el siguiente, ver Figura 9.
Figura 9. Host gratuito de prueba
Quedando la página web final según muestra la figura 10.
Figura 10. Página web servicio social y vacantes
Una vez que el proyecto ha sido desarrollado y que se encuentra en un servidor, se ha pasado a la siguiente etapa y es dar a conocer la página web a los estudiantes del Instituto Tecnológico de Toluca y que naveguen en internet para que puedan visualizar la funcionalidad y así puedan responder más adelante un formulario donde se pueda recolectar la información referente al uso y su experiencia en este lapso dentro de la página web.
Se le ha brindado el enlace de acceso a estudiantes de distintas carreras, compañeros y amigos personales ya tienen acceso a internet y están constantemente, esto para preguntarles acerca de cómo ha sido su navegación en la página, preguntarles si el contenido es suficiente, si los elementos presentes en el sitio son adecuados.
RESULTADOS Y DISCUSIÓN
El resultado de un proyecto que nace como necesidad dentro del Instituto Tecnológico de Toluca para bien de un proceso académico departamental, da como resultado una página web diseñada para dar información a los alumnos del Instituto Tecnológico de Toluca, sobre el proceso, la documentación y las reuniones y vacantes del Servicio Social y la Bolsa de Trabajo, así como convocatorias y formatos, dando al usuario final información oficial, relevante y en tiempo real para su uso. Se alojó una versión para prueba, ya que para uso interno será a través de cuenta y contraseña Institucional.
Después de aplicar una encuesta de satisfacción a 200 usuarios finales, los resultados indican que en cuestión al diseño de la página que previamente visitaron, los porcentajes quedaron de la siguiente manera: el 98.6% de los encuestados dice que los colores son aptos para la concentración, mientas que al 1.4% no le parece atractivo, también se les preguntó qué tan satisfechos se encuentran después de haber navegado por la página web. El 37.5% de los encuestados dijeron que se cumplieron sus expectativas, el 54.2% dijo que fue mucho mejor de lo que esperaban y el 8.3% dijo que ni tenía expectativas. Y además que el 100% de los estudiantes encuestados consideran que la información colocada en la página web informativa es clara y entendible.
CONCLUSIONES
Los alcances planteados al inicio de este documento fueron alcanzados con éxito, se logró concluir satisfactoriamente la página web propuesta, en ella se tiene acceso a diferentes secciones informativos que tienen como objetivo el conocimiento de lo que es el Servicio Social y los requerimientos que necesitas para su realización, la difusión de diferentes opciones para la realización del Servicio Social, así como las vacantes de empleo que oferta el departamento de Gestión Tecnológica y Vinculación.
Como estudiantes de la carrera de Ing. en Tecnologías de información, al desarrollar un proyecto en el que se aplican las competencias como el trabajo en equipo, la organización y manejo de tiempos de entrega, las metodologías al realizar un software y la documentación, llevan al estudiante a crecer profesionalmente pues demuestra que sus conocimientos se aplican en este tipo de proyectos donde hay una gran comunidad involucrada y favorecida.
LISTA DE REFERENCIAS
Eguíluz Pérez Javier. Introducción a JavaScript. Editorial libros web. www.librosweb.es
Ginestà Marc Gibert , Pérez Mora Oscar. Bases de datos en PostgreSQL P06/M2109/02152, s.f. http://www.examskey.com/demopdf/PGCES-02.pdf
González Alonso Alejandro. Trabajo de Fin de Grado Herramientas para una navegaci´on m´as eficiente: CVULL y Web Bookmarks Tools for a more efficient navigation: CVULL and Web Bookmarks.
Grajales G. Tevni. Tipos de investigación (2000). Obtenido de http://cmapspublic2.ihmc.us/rid=1RM1F0L42-VZ46F4-319H/871.pdf
México, G. d. (2015). Reglamento Para La Prestación Del Servicio Social De Los Estudiantes De Las Instituciones De Educación Superior En La República Mexicana. https://www.gob.mx/cms/uploads/attachment/file/30453/Reglamento_para_la_pr estacion_del_servicio_social_de_los_estudiantes.pdf
Milena Velásquez Sandra, Restrepo, Vahos-Montoya Juan D, Gómez-Adasme Marta Esther, Pino Ana Alejandra – Martínez. Una revisión comparativa de la literatura acerca de metodologías tradicionales y modernas de desarrollo de software.
Microsoft Corporation. Visual studio code. Recuperado de https://code.visualstudio.com, 2022.
Pedrosa, S. J. (2022). Bolsa de trabajo. Obtenido de https://definicion.edu.lat/economia/bolsa-de-trabajo.html
Político, A. (Julio de 2020). En México, solo 17% de los jóvenes logran estudiar la universidad. Obtenido de https://www.animalpolitico.com/2017/09/educacion- superior-mexico-estudiantes-universidad-ocde/
Quik links. Documentación del Servidor de Base de Datos PostgreSql: http://www.postgresql.org/docs/
Slant. (2020). Slant - Bootstrap Vs Materialize Detailed Comparison As Of 2020. Disponible en: https://www.slant.co/versus/504/521/~bootstrap_vs_materialize
Schulz, R. (2008). Diseño Web con CSS. Marcombo.
UAEM. (s.f.). ¿Qué es el servicio social? Obtenido de https://www.uaem.mx/estudiantes- y-egresados/servicio-social/que-es-el-servicio-social/
UNAM. (s.f.). Facultad de psicología. Obtenido de http://www.psicologia.unam.mx/servicio-social/