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