Post on 20-Jul-2022
SISTEMA WEB PARA LA AUTOMATIZACIÓN DE PROCESOS, PARA
EL COLEGIO DE BACHILLERATO NUEVE DE OCTUBRE
García Pérez Joselyn Estefania, Sánchez Bermeo Marco Alejandro
Egresados de la Carrera Tecnología en Análisis de Sistemas del Instituto Superior
Tecnológico Ismael Pérez Pazmiño
Av. Gral. Manuel Serrano y Av. Las Palmeras
Machala, El Oro, Ecuador
josyta.14@hotmail.com, marqui123sanchez@gmail.com
RESUMEN
El presente artículo se basa en el diseño y desarrollo de un sistema web dinámico que permita
la interactividad entre docente y estudiante, el cual se complementa con la versión
anteriormente realizada en donde se visualiza información sobre la infraestructura y eventos
importantes del Colegio de Bachillerato “Nueve de Octubre”.
A través de técnicas de investigación como la observación y entrevista (cuestionario de
preguntas), se recolecto información en base a los métodos de educación y el manejo de las
TICS dentro del establecimiento educativo, mismo que fue aplicado al rector a cargo de la
institución, con el objetivo de adquirir contenido relevante para el análisis y desarrollo de la
investigación.
En base a los resultados, se pudo identificar los requerimientos y necesidades que acontecían
en el colegio; mismos que nos permitieron evidenciar la falta de plataformas educativas
propias del colegio por ende se procedió a realizar el diseño y contenido de la página web
dinámica guiándonos en las peticiones que la institución educativa nos solicitó, utilizando
como herramientas y aplicaciones tecnológicas el código HTML, PHP, JAVASCRIPT y la
base de datos MySQL; logrando así satisfacer al usuario con el producto final.
PALABRAS CLAVES: HTML, JAVASCRIPT, MySQL, página dinámica, PHP,
plataforma educativa.
ABSTRACT
This article is based on the design and development of a dynamic web system that allows
interactivity between teacher and student, which is complemented by the version previously
made where information about the infrastructure and important events of the Colegio de
Bachillerato “Nueve Octubre".
Through research techniques such as observation and interview (questionnaire), information
was collected based on the methods of education and the management of ICTs within the
educational establishment, which was applied to the rector in charge of the institution, with
the aim of acquiring relevant content for the analysis and development of research.
Based on the results, it was possible to identify the requirements and needs that occurred in
the school; The same ones that allowed us to show the lack of educational platforms of the
school, therefore, we proceeded to make the design and content of the dynamic web page,
guiding us in the requests that the educational institution requested, using the HTML, PHP
code as tools and technological applications , JAVASCRIPT and the MySQL database; thus
managing to satisfy the user with the final product.
KEY WORDS: HTML, dynamic page, MySQL, PHP, platforms educational.
INTRODUCCIÓN
El estudio da inicio luego de determinar lo requerido por la autoridad a cargo del colegio,
tomando en cuenta el problema que acontecía ¿Cómo elaborar un sistema web para la
automatización de procesos? Entonces, basándonos en la noción dada en la entrevista
aplicada, dirigiéndonos a conocer la falta de aplicaciones y el buen uso de la tecnología entre
quienes conforman la institución, se consideró un implemento a la página estática donde se
puede visualizar contenido acerca de la institución, con el fin de adicionar el uso de la misma
para que se utilice como medio por el cual los docentes puedan enviar tareas a sus estudiantes
y que ellos a su vez las realicen y las suban mediante la plataforma web.
El objetivo de la propuesta es facilitar y agilizar el envío y recepción de las tareas a través
del sitio web de manera que los docentes y estudiantes tengan un beneficio en cuanto a ello.
Además de ser una forma de minimizar el uso de otros materiales físicos debido a que todo
será relativamente por medio del uso de la tecnología.
Esta investigación debe cumplir la siguiente hipótesis planteada: si se diseña un sistema
entonces se elabora un diseño web para la automatización de procesos, obteniendo como
variable independiente el sitio web basado en el código HTML, PHP, JAVASCRIPT y el
motor de base de datos MyQSL para el Colegio de Bachillerato “Nueve de Octubre” de la
ciudad de Machala.
La creación de páginas web ya sean estas estáticas o dinámicas y a su vez su manipulación
se ha vuelto constante en la actualidad, debido a que mediante ellas se puede lograr varias
actividades, ya sea en lo profesional, académico o laboral, permitiendo la interactividad entre
usuarios a través de la visualización de información y contenido como texto, imágenes,
videos, entre otros.
El presente trabajo tiene como finalidad el diseño y desarrollo de una página web dinámica;
por ello se plantea una propuesta la cual consiste en la elaboración de una página web
dinámica, basada en el código HTML, PHP, JAVASCRIPT y la base de datos MySQL para
el Colegio de Bachillerato “Nueve de Octubre” de la ciudad de Machala, mediante un sitio
web interactivo.
DISEÑO DE PÁGINA WEB
En la actualidad las páginas web han revolucionado el mercado, ayudando a crecer el
comercio y sumado a ello su buen uso en la educación y vida cotidiana, por ello se considera
fundamental contar al menos con un sitio web o plataforma dentro de empresas o
establecimientos de cualquier índole.
Según María (2015), el propósito de empezar un diseño de página web, en primer lugar, es
compartir tu contenido con otros. Con una página web, podrás ser capaz de llegar a una
audiencia mundial, pero para hacer que tu página web tenga un impacto en otros, necesitas
tener contenidos que sean interesantes, informativos y útiles.
WEBCORP (2016), nos indica que el diseño web es el proceso de creación de sitios web.
Abarca varios aspectos diferentes, incluido el diseño de la página web, la producción de
contenido y el diseño gráfico. Si bien los términos diseño web y desarrollo web a menudo se
usan indistintamente, el diseño web es técnicamente un subconjunto de la categoría más
amplia de desarrollo web.
Las páginas web pueden ser creadas de forma estática o dinámica; denominada estática
debido a su utilidad de dar a conocer contenido e información textual o acompañada de
imágenes, videos, entre otros. Y por ende la dinámica es aquella en la cual el usuario puede
interactuar y aparte de visualizar también poder registrarse, eliminar, modificar, realizar
envíos o compras, todo esto dependerá del uso y función de la página.
Los sitios web dinámicos son aquellos que permiten crear aplicaciones dentro de la propia
web, otorgando una mayor interactividad con el navegante. Aplicaciones dinámicas como
encuestas y votaciones, noticiarios, foros de soporte, libros de visita, envío de e-mails
inteligentes, reserva de productos, pedidos on-line, atención al cliente personalizada donde
el administrador dispone la opción de gestionar dichos apartados, agregando, editando o
eliminando contenidos. (Web, 2017)
Las páginas web dinámicas se construyen usando otros lenguajes de programación como
PHP que permiten programar en ellas aplicaciones para todo tipo de funciones: blogs, foros,
tiendas, etc. La característica principal es que el contenido es fácilmente y frecuentemente
modificado. (Creatiburon, 2017)
BASE DE DATOS MYSQL
MySQL es muy utilizado en aplicaciones web. Su popularidad como aplicación web está
muy ligada a PHP, que a menudo aparece en combinación con MySQL. MySQL es una base
de datos muy rápida en la lectura, lo que la hace ideal para este tipo de aplicaciones.
Una base de datos es un lugar en el que los datos son almacenados y organizados. Una base
de datos relacional es aquella que almacena los datos en tablas separadas, en lugar de
ponerlos en un solo almacén.
MySQL es un sistema de gestión de bases de datos relacional desarrollado bajo licencia
dual: Licencia pública general/Licencia comercial por Oracle Corporation y está considerada
como la base de datos de código abierto más popular del mundo y una de las más populares
en general junto a Oracle y Microsoft SQL Server, todo para entornos de desarrollo web.
(Robledano, 2019)
METODOLOGÍA SCRUM
Según los autores Durango y Zapata (2015), las metodologías de desarrollo de software
tradicionales proponen una secuencialidad entre las diferentes fases de su proceso, en las
cuales, debido al periodo de tiempo que transcurre desde las fases de diseño del
sistema hasta la fase de entrega del producto final, se presentan un número considerable
de discrepancias en torno a requisitos planteados en las fases iniciales del proyecto, y
en ¿cómo se implementan?.
La metodología SCRUM es una metodología ágil que ayuda en los proyectos desde sus
inicios, trabajando con sprint a medida que va avanzando el trabajo, garantizando un
resultado final exitoso con la ayuda del equipo de desarrollo y su manager scrum quien estará
en contacto constante con el cliente.
PHP
PHP (acrónimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de código abierto
muy popular especialmente adecuado para el desarrollo web y que puede ser incrustado en
HTML. (PHP, 2019)
El código PHP suele ser procesado en un servidor web por un intérprete PHP implementado
como un módulo ejecutable de interfaz de entrada común (CGI). En un servidor web, el
resultado del código PHP interpretado y ejecutado que puede ser cualquier tipo de datos,
como el HTML generado o datos de imágenes binarias formaría la totalidad o parte de una
respuesta HTTP. (PHP, 2020)
PHP se utiliza para generar páginas web dinámicas. Recordar que llamamos página estática
a aquella cuyos contenidos permanecen siempre igual, mientras que llamamos páginas
dinámicas a aquellas cuyo contenido no es el mismo siempre. Por ejemplo, los contenidos
pueden cambiar en base a los cambios que haya en una base de datos, de búsquedas o
aportaciones de los usuarios. (Solano, 2019)
LENGUAJE HTML
El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar
y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser
párrafos, una lista con viñetas, o imágenes y tablas de datos. Como lo sugiere el título, este
artículo te dará una comprensión básica de HTML y cuál es su función. (MDN WEBS, 2020)
El HTML se creó en un principio con objetivos divulgativos de información con texto y
algunas imágenes. No se pensó que llegara a ser utilizado para crear área de ocio y consulta
con carácter multimedia (lo que es actualmente la web), de modo que, el HTML se creó sin
dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente
que lo utilizarían en un futuro, según nos indica Gustavo (2020).
HTML no es un lenguaje de programación, lo que significa que no tiene la capacidad de crear
una funcionalidad dinámica. En cambio, hace posible organizar y formatear documentos, de
manera similar a Microsoft Word. (HOSTINGER, 2020)
PLATAFORMA VIRTUAL
Las plataformas virtuales, por lo general, se emplean para la educación a distancia e intentan
simular las mismas condiciones de aprendizaje que se registran en un aula. Aunque cada
plataforma puede presentar diferentes características, lo habitual es que permitan la
interacción de los alumnos entre sí y con los profesores.
Estas plataformas permiten una capacitación segura y basada en la web. Constituyen una
solución de aprendizaje electrónico que emplea una interfaz de usuario simple e
intuitivo. Esto es posible porque combinan diferentes tecnologías que permiten establecer las
condiciones de aprendizaje apropiadas que requieren los estudiantes en línea. (Gomera,
2020)
Las Tecnologías de la Información y la Comunicación ofrecen la posibilidad de interacción
de los estudiantes entre sí y con el docente, promoviendo una actitud activa, a una búsqueda
y replanteamiento continuo de contenidos y procedimientos (Palomo, 2015) , que ofrecen
herramientas y conocimientos necesarios para la realización de tareas, aumentan la
participación y desarrollen su iniciativa, que les permita filtrar información, seleccionar y
tomar decisiones. (Bautista, 2018)
El uso de las TICS se convirtió en una herramienta muy útil e indispensable en la vida
cotidiana por ello en la actualidad se desarrollan sistemas para una diversidad de usos.
En cuanto al implemento de la tecnología a nivel académico o educacional este es acoplado
a la necesidad que se presente dentro de una institución, mismas que son de apoyo didáctico
permitiendo él envió o intercambio de tareas, trabajos, información, entre otros.
MATERIALES Y MÉTODOS
Materiales
Se utilizó dos equipos de cómputo dentro de la creación del proyecto, uno para la elaboración
y redacción de la parte teórica y en otra se realizó el diseño, desarrollo y almacenamiento de
la página web dinámica.
Se aplicó técnicas de investigación que ayuden a la recopilación de información; iniciando
por la observación dada dentro del plantel educativo. Además, se consideró el desarrollo de
un cuestionario de preguntas, que nos permita llevar a cabo una entrevista dada a la máxima
autoridad siendo el Rector del colegio.
Métodos
Dentro de la investigación se trabajó con métodos que nos permitieran recabar información
y aspectos importantes, los cuales ayudaran a un mejor desempeño del desarrollo. Se hizo
uso del método científico, ayudándonos a recopilar información y contenido de suma
importancia que abarque los temas en estudio siendo un aporte a nuestros conocimientos,
además, de aplicar el método empírico que con lleva la técnica de observación para conocer
más de cerca la necesidad en forma natural; finalmente, aplicados los métodos se realiza el
análisis y se obtiene los resultados.
La metodología SCRUM fue utilizada en el proceso de desarrollo del software con el fin de
plasmar cada etapa planteada y ayudándonos ágilmente en las interacciones con el usuario o
cliente, en la ejecución se puede verificar que el producto final ha dado buenos resultados.
Para el diseño y desarrollo de la plataforma se utilizó PHP, JAVASCRIPT, HTML y el gestor
de base de datos MySQL.
RESULTADOS Y DISCUSIÓN
En base a la entrevista aplicada al Rector del Colegio de Bachillerato “Nueve de Octubre” se
ha indagado al problema y mediante el mismo se empleó una solución de forma veraz y
precisa; se realizó el análisis de la misma, obteniendo como resultado lo siguiente:
Los resultados del trabajo han demostrado que es esencial la creación de la plataforma virtual,
evidenciando la falta del buen uso tecnológico dentro del establecimiento educativo y
consigo los contratiempos que surgen al momento de encomendar una tarea de forma física,
ya sea por el tiempo o la falta de material educativo.
La inserción de las TIC puede reportar beneficios para alumnos, docentes y la comunidad
educativa en general. En el caso de los docentes, las tecnologías ponen a su disposición
diversos recursos digitales como software, documentos, páginas web, que facilitan la
participación en redes de docentes y apoyan el trabajo de proyectos en forma colaborativa
con otros centros educativos. A los estudiantes les permite aprender de manera significativa
y poder solucionar problemas cotidianos, a la comunidad educativa, favorece la
conformación de redes de aprendizaje, las cuales pueden ofrecer variadas posibilidades
comunicativas que logran impactar no sólo los aspectos tecnológicos, sino que también incide
en los sujetos que aprenden. (Díaz-Barriga, 2017)
Mediante la opinión y respuesta acertada del Rector se determinó que lo más factible sería
una plataforma que permita que los docentes realicen él envió de tareas a los cursos, paralelos
y asignaturas que le sean correspondidas y de la misma manera los estudiantes ingresen al
sistema y puedan visualizar, descargar y subir la tarea; además de que el docente tenga la
opción de un parámetro de horarios es decir, fecha y hora límite de tarea habilitada y que esto
a su vez genere responsabilidad en los alumnos y empeño por cumplir con sus obligaciones.
Para el ingreso al sistema se tomó como requerimiento que cada usuario cuente con un
nombre y contraseña única que les permita hacer el ingreso al sistema.
CREACIÓN DE LA PÁGINA WEB DINÁMICA
Se implementó interactividad a la versión anterior de la siguiente manera:
Por medio de un botón se podrá dirigir al sistema, en donde se encontrará un Login (ventana
de ingreso al sistema de tareas); En el caso del docente para acceder, deberá ingresar un
usuario y contraseña, luego podrá ir a la opción de enviar tarea en la que cargará la tarea que
desee y seguido realiza él envió respectivo, es decir tomando en cuenta estas opciones: curso
y paralelo destinado. Por otro lado, si el estudiante desea acceder al sistema, de igual forma
deberá ingresar el usuario y contraseña asignado, de esa forma podrá ir a la opción ver tarea
y descargar la tarea en específico; luego subir su tarea, recordando que existe una fecha y
hora específica sobre el envío de la misma, caso contrario la tarea se cerrará; además la tarea
debe ser enviada bajo los formatos (.docx / .xlsx / .pdf) de tal manera que la plataforma acepte
el archivo.
La página web fue realizada mediante el código PHP, que es utilizada para las gestiones que
existen en ella y MySQL que es el almacén de datos, permitiendo así alojar la información.
RESULTADOS DEL SISTEMA
Una vez culminado el sistema se realizó pruebas que permitan verificar su funcionamiento
de forma correcta, logrando cumplir con los requerimientos expuestos por la autoridad de la
institución.
Beneficiando de esta manera al establecimiento educativo en cuanto al área académica y a
quienes lo desarrollaron poniendo en práctica lo aprendido dentro de la carrera.
CONCLUSIONES
Las creaciones de plataformas educativas refuerzan los conocimientos tecnológicos,
incentivando a la sociedad a hacer uso de ella de una forma productividad y a su
obteniendo beneficios en diversas actividades de forma personal, laboral, comercial,
educativa, entre otras.
El presente artículo científico cumplió con el objetivo de diseñar una página web
dinámica para el Colegio de Bachillerato “Nuevo de Octubre”, obteniendo resultados
positivos y satisfactorios para la institución educativa.
El desarrollo y ejecución del portal web beneficia en gran parte a la institución
permitiendo a los usuarios acceder de forma virtual y conocer más sobre la misma y
en cuanto al docente y estudiante, ellos tienen la facilidad de interactuar mediante la
plataforma.
El proyecto de vinculación es un aporte a la sociedad, debido a que se ve involucrado
con las necesidades que se presentan y se determina una solución para las mismas,
por ende, el sistema fue entregado a tiempo y efectuando a cabalidad con los
requerimientos dados por el Rector de la institución.
Bibliografía Bautista, J. (2018). Importancia de las TIC en el proceso de enseñanza y aprendizaje. Obtenido de
http://comunidadesvirtuales.obolog.com/
Creatiburon. (24 de enero de 2017). Obtenido de https://www.creatiburon.com/que-son-las-
paginas-web-dinamicas/
Díaz-Barriga, F. y. (2017). Estrategias docentes para un aprendizaje significativo. Obtenido de
http://BlogComunidadesVirtuales.blog.com
Durango Vanegas, C. E. (13 de Mayo de 2015). Una representación basada en Semat y RUP para el
Método de Desarrollo SIG del Instituto Geográfico Agustín Codazzi. Obtenido de
https://doi.org/10.21500/20275846.1721
Gomera, J. (13 de septiembre de 2020). catalogodecursos. Obtenido de
https://josegomera.com/academico/plataformas-virtuales-definicion-caracteristicas-
beneficios-y-ejemplos/
Gustavo. (01 de Abril de 2020). Hostinger. Obtenido de https://www.hostinger.es/tutoriales/que-
es-html/
HOSTINGER. (1 de abril de 2020). Obtenido de https://www.hostinger.es/tutoriales/que-es-html/
Maria, L. S. (01 de Septiembre de 2015). Staff Digital. Obtenido de
https://www.staffdigital.pe/blog/proceso-diseno-web/
MDN WEBS. (25 de Junio de 2020). Obtenido de
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basic
s
Palomo. (2015). Las TIC como agentes de innovación educativa. Obtenido de
http://www.Dirección General de Innovación y Formación del Profesorado.com
PHP. (18 de Julio de 2019). Obtenido de https://conceptodefinicion.de/php/
PHP. (23 de Enero de 2020). Obtenido de https://www.php.net/archive/2020.php#2020-09-03-2
Robledano, A. (24 de Septiembre de 2019). Open Webinars. Obtenido de
https://openwebinars.net/blog/que-es-mysql/
Solano, A. (01 de Enero de 2019). Open Webinars. Obtenido de
https://openwebinars.net/blog/que-es-php/
Web, D. (24 de Enero de 2017). Crea Tiburon. Obtenido de https://www.creatiburon.com/que-
son-las-paginas-web-dinamicas/
WEBCORP. (19 de enero de 2016). Obtenido de https://webcorp.ec/diseno-web-definicion-historia
ANEXOS
INSTITUTO SUPERIOR TECNOLÓGICO
“ISMAEL PÉREZ PAZMIÑO”
CARRERA DE ANÀLISIS DE SISTEMAS
QUINTO SEMESTRE
CUESTIONARIO A RECTOR
Tema: Sistema web para la automatización de procesos, para el Colegio de Bachillerato “Nueve de Octubre” en el año 2019
Objetivo: Recopilar información mediante la aplicación del cuestionario de preguntas que permita el desarrollo de la página web.
Entrevistado: …………………………. Entrevistador: ………………………….
Desarrollo de las preguntas.
1. ¿Mediante el uso de la tecnología que le gustaría se implemente en el colegio?
2. ¿En base a la página web antes realizada, qué funcionalidad le gustaría que se emplee por medio de la página?
3. ¿En qué beneficiaria el desarrollo de la página web a la institución?
4. ¿El ingreso al sistema de envió de tareas a su consideración como debería ser?
PANTALLA PRINCIPAL PARA EL INGRESO AL SISTEMA(LOGIN)
VENTANA DE DOCENTE
VENTANA DE ESTUDIANTE