TFA Cristian García FINAL

Universidad Nacional del Nordeste
Facultad de Ciencias Exactas y Naturales y Agrimensura
Licenciatura en Sistema de Información
Aplicación WEB Educativa para Química I:

“Simulación de un Laboratorio Virtual”
Alumno: García, Cristian Andrés.
Profesor Orientador: Mgter. Petris, Raquel.
Profesor Coordinador: Mgter. Mariño, Sonia.
Tribunal Examinador: Mgter. Mariño, Sonia.

Mgter. Dapozo, Gladys.
Lic. Corrales, Sonia.
Año: 2016
Aplicación web Educativa para Química I: “Simulación de un laboratorio virtual”
Prólogo
La evolución y el progreso en la enseñanza avanzó de manera acelerada en las

últimas décadas, los libros, las revistas, el propio papel se transforman en archivos
descargables con un simple clic desde la comodidad del hogar. El acceso a internet
hizo posible estas conexiones con diversas fuentes de información.
Enseñar se volvió dinámico, didáctico e interactivo gracias a las TIC, en este trabajo se
presenta un aplicativo web educativo para la cátedra de Química I de la Facultad de
Ciencias Exactas y Naturales y Agrimensura pretendiendo cubrir las expectativas con
las nuevas estrategias que la multimedia ofrece en el proceso de enseñanza y
aprendizaje.
Cristian Andrés García

2
Agradecimientos
A mamá por el esfuerzo inmensurable para brindarme la posibilidad de estudiar, a mi

tío que me otorgó solvencia económica para poder vivir cómodamente fuera de mi
casa, a mis hermanos que siempre estuvieron presentes cada vez que necesite de
ellos. Todo ellos hicieron posible que hoy pudiera estar escribiendo estas líneas de
cierre de esta tesis. Dedicado especialmente a mi hermano Gustavo que siempre me
acompaña desde el cielo.

3
Resumen
En este trabajo destinado a la cátedra de Química General de la Facultad de Ciencias
Exactas y Naturales y Agrimensura de la UNNE se pueden manipular un conjunto de
funcionalidades basadas en las necesidades propuestas por los propios profesores de
la materia, el sistema alojado en internet para uso masivo y con un alto nivel de
disponibilidad puede ser visualizado desde teléfonos inteligentes, tablets, netbooks,
notebooks, PC hogareñas y un gran número de dispositivos más gracias a su diseño
responsivo.

4
Índice de Contenidos
Prólogo 2
Agradecimientos 3
Resumen 4
Índice de figuras 6
Índice de tablas 8
Capítulo 1. Introducción 9
1.1. Estado del arte 9
1.2. Fundamentación 10
1.3. Objetivo 11
Capítulo 2. Metodología 12
2.1. Análisis y diseño 12
2.2. Desarrollo 16
2.2.1 Etapas previas a los requerimientos funcionales 17
2.2.1.1. Hardware 17
2.2.1.2. Sistemas Operativos 17
2.2.1.3. Software y paquetes de herramientas 18
2.2.1.4. IP’s y registración del dominio 18
2.2.2 Pruebas pilotos y de campo 18
Capítulo 3. Herramientas y/o lenguajes de programación 19
3.1 Lenguajes de programación 19
3.2 Herramientas 20
Capítulo 4. Resultados 21
4.1 Página principal 22
4.2 Perfiles de los usuarios. 25
4.2.1 Usuarios registrados. 25
4.2.2 Usuarios registrados y habilitados. 27
4.2.3 Ayudantes. 27
4.2.4 Profesores. 27
4.3 Examen. 28
4.4 Laboratorio Virtual. 33
4.5 Tabla periódica. 35
4.6 Videos en el laboratorio. 36
4.6 Documentos e Información. 44
4.7 Configuración. 47
4.7.1 Ver Exámenes 49
4.7.2 Estadísticas Generales 50
4.7.3 Ver alumnos 50
4.7.4 Habilitar Alumnos 51
4.7.5 Período de examen 52
4.7.6 Preguntas de examen 53
4.7.7 Crear profesor 56
4.7.8 Cerrar Período 57
4.7.9 Estadísticas de ciclos 58
Capítulo 5. Conclusiones y futuros trabajos 59
Referencias 60

5
Índice de figuras
Fig. Pág.
LiveChem de la universidad de Oxford . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Casos de uso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Página principal Química General . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Sección de Bienvenida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Sección de Novedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Registro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Zona Social . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Puesto 1 y 2 de redes sociales más utilizadas según WebEmpresa20 . . . . . . . . . . . 26
Vista de un alumno registrado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Panel de control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Configuración . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Accesos Alumnos registrados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Accesos profesores y ayudantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Pizarra de examen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Pregunta de examen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Respuesta correcta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Respuesta incorrecta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Tiempo restante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Tiempo expirado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Alerta de salida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Aviso de no más posibilidades de realizar el examen . . . . . . . . . . . . . . . . . . . . . . . . . 32
Examen desaprobado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Página de bienvenida al Laboratorio Virtual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Introducción al Laboratorio Virtual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Primer instrumento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34
Un instrumento más I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35
Un instrumento más II . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35
Examen aprobado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .36
Posicionamiento del cursor sobre elemento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Selección de otro elemento de la tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Página: Videos en el laboratorio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Página de inicio Youtube. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Ingreso a la cuenta de Google . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Página principal de la cuenta quimicageneralunne en YouTube . . . . . . . . . . . . . . . . 39
Subir Videos en la plataforma YouTube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Proceso de subida en la plataforma YouTube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
Descripción del video y privacidad en la plataforma YouTube . . . . . . . . . . . . . . . . . . 41
Subida de video finalizada en la plataforma YouTube . . . . . . . . . . . . . . . . . . . . . . . . 41
Página principal Videos en el laboratorio para profesores y ayudantes . . . . . . . . . . 42
Editor para publicar vídeos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Vista previa del video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43
Video publicado en Química General . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43
Vista “Modificar” de Videos en el laboratorio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Modificar un video ya publicado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Publicación eliminada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Acceso a Documentos e Información . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45
Fichas “Información y Noticias” y “Materiales y Notas” . . . . . . . . . . . . . . . . . . . . . . . . 46
Ficha “Información y Noticias” en modo edición . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Ficha “Materiales y Notas” en modo edición . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

6
Ficha “Información y Noticias” en modo vista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Ficha “Materiales y Notas” en modo vista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Acceso a Configuración . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Menú de secciones en Configuración . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Ver Exámenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Modificar las posibilidades restantes de los alumnos . . . . . . . . . . . . . . . . . . . . . . . . . 50
Estadísticas Generales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Ver alumnos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Editar Alumnos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Habilitar Alumnos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Período de examen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Validación de fechas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Fecha de exámenes establecida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Preguntas de examen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Vista de preguntas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55
Vista de respuestas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56
Editar Tema. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56
Editar pregunta. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57
Editar respuesta. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57
Crear Profesor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Cerrar Período. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Ingreso de contraseña para continuar y confirmar. . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

7
Índice de tablas
Tabla Pág.
Requerimientos Funcionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Requerimientos no Funcionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12
Síntesis de funcionalidades de la web Educativa para Química . . . . . . . . . . . . . . . . . 21

8
Capítulo 1. Introducción
1.1. Estado del arte
La propuesta de utilizar software como herramienta de aprendizaje no es nueva,

considerando de que en los años setenta se inició la idea de utilizar el ordenador como
medio de enseñanza y se consolidó en los noventa en nuestro país.
Desde entonces los avances fueron significativos, a medida que los equipos
informáticos bajaron sus costos, aumentaron su potencial y versatilidad, llegando a los
hogares, centros educativos, escuelas, bibliotecas entre otras, además los programas
de computadoras se convertían en temas de los currículos de las diferentes
instituciones, de manera propicia y progresiva se utilizaron herramientas como hojas
de cálculo, procesadores de textos, base de datos, internet, diseñadores gráficos y
cualquier otro programa que permita trabajar en las aulas [1].
La química es una disciplina que forma parte del diseño curricular de un gran número
de carreras universitarias y está presente en todos los aspectos de la vida cotidiana
por lo que no se puede obviar su existencia, con el uso de computadoras e Internet
han aparecido nuevas formas de enseñanza de la química que posibilitan su
acercamiento al alumnado [2].
Las TIC, usadas como estrategia pedagógica, brindan la posibilidad de crear
oportunidades para guiar e incrementar el aprendizaje y colaboran al docente a llevar
a cabo procesos innovadores, por tanto, el uso de las TIC en el aula permite que los
alumnos complementen otras formas de aprendizaje utilizadas en la clase, mejoren la
comprensión de conceptos difíciles o imposibles de observar a simple vista o en los
laboratorios escolares, usen representaciones para desarrollar proyectos escolares
con compañeros y profesores, trabajen y manipulen, por ejemplo, moléculas en tres
dimensiones o todo tipo de sustancias en laboratorios virtuales, etc [3].
En este trabajo se propone el diseño de una herramienta que permita a los alumnos
de las carreras universitarias con perfil químico tener un espacio donde interactuar con
los contenidos específicos de un laboratorio. Si bien se han encontrado otras
propuestas de software educativo emulando un laboratorio de Química Virtual los
antecedentes encontrados carecen de ciertos elementos y recursos didácticos
necesarios para el entorno de trabajo dentro de la cátedra de Química I de la Facultad
de Ciencias Exactas y Naturales y Agrimensura de la UNNE, por lo que se cree
apropiado diseñar un entorno virtual que contemple todas las características que se

9
pretenden alcanzar desde un laboratorio virtual con los contenidos, los recursos, las
actividades prácticas, los videos y otras propuestas pensadas Cpara el nivel y
profundidad de conceptos para esta asignatura en particular.
Asimismo se pudo corroborar que abundan las tablas periódicas con un abanico
delimitado de información y poca interactividad para el usuario.
Un software con características similares al que se propone en este trabajo es Model
ChemLab [4] que muestra instrumentos comunes en un laboratorio de Química. Se
presenta en un dispositivo óptico, CD-ROM, lo que implica el uso en máquinas
individuales no permitiendo interactuar entre docentes y alumnos.
La Universidad de Oxford (www.ox.ac.uk) ofrece de manera gratuita vía Internet,
laboratorios virtuales de experimentos químicos que usan animaciones, videos y
moléculas que pueden hacerse girar en la pantalla manipulables en tres dimensiones
[Ver Fig. 1]. La mayor dificultad que presenta este software es que solo está disponible
en idioma inglés, y esto se convierte en un inconveniente para alumnos que
desconocen esta lengua.
Fig. 1. LiveChem de la universidad de Oxford
1.2. Fundamentación
En la actualidad existen un interesante número de herramientas virtuales para el

aprendizaje, pero no todas responden a las necesidades propias de cada espacio

10
curricular y en ocasiones no se ajustan a las estrategias pedagógicas que se utilizan

para abordar ciertos temas, según los criterios de cada asignatura en particular. Es
decir, que si bien se pueden contar con herramientas informáticas para la facilitar los
procesos de enseñanza, estas no satisfacen todo lo que el profesor espera encontrar
en ellas.
La motivación para la elección del tema a abordar se basó en la necesidad que tiene la
cátedra de Química I de la FACENA-UNNE de contar con un software para la
enseñanza-aprendizaje de Química en forma interactiva, motivadora, dinámica,
ajustándose a los tiempos de aprendizajes de cada alumno, con propuestas para
reforzar los contenidos que permitirá ir incorporando nuevo material, cuestionarios y
actividades a medida que se desarrollen los temas.
Además de la relevancia que podría alcanzar un software de estas características con

aplicaciones TIC en entornos virtuales, el diseño y desarrollo de las distintas instancias
brindará la oportunidad de afianzar y profundizar los conocimientos de diseño gráfico,
entornos virtuales y de programación de software interactivo a través de un soporte tan
amplio y de actualidad como lo son las plataformas web, para alcanzar la graduación
en la carrera de Licenciatura en Sistemas de Información.
1.3. Objetivo
Diseñar e implementar un sitio web que permita la simulación de un laboratorio virtual

interactivo de Química, en el cuál se podrá acceder e interactuar con diferentes
secciones de acuerdo a los temas que se pretenden abordar desde este espacio
curricular. Conceder un espacio en común de enseñanza – aprendizaje donde el
número de personas que interactúan en ella no influya en la calidad ni el tiempo
necesario para lograr afianzar los conocimientos que se brindan.

11
Capítulo 2. Metodología
Como metodología de desarrollo del software a abordar se eligió el método “ISE”

(Metodología de Ingeniería de Software Educativo) propuesto por Álvaro Galvis en
1992 [5].
Esta metodología orientada al diseño del software educativo contempla cinco etapas,
en el cual se destaca su proceso incremental, y su fuerte énfasis en el análisis de las
necesidades de los alumnos y profesores.
Sus fases son: Análisis, Diseño, Desarrollo, Prueba Piloto, Prueba de Campo [6].
Como una pre-etapa se inició con la búsqueda de información, para ello se realizó una
investigación bibliográfica, basada principalmente en la búsqueda en repositorios
académicos y científicos en la web. Se buscaron trabajos similares, experiencias y
datos pasados y actuales sobre este tema, un resumen de lo obtenido en esta
recopilación de experiencias similares se presentó en el capítulo anterior en el
apartado “Estado del arte”.
Se ha observado que ninguna herramienta de las encontradas cumple de manera

satisfactoria con todas las características que se pretende abordar en este proyecto.
En el siguiente apartado se explicará detalladamente todas las características
necesarias para obtener un producto que cumpla con las expectativas de los
profesores de la materia Química I.
2.1. Análisis y diseño
En el análisis del sistema se determinaron los requerimientos específicos del producto.

Con diferentes técnicas y recursos se obtuvo una serie de diagramas que ayudó en el
desarrollo del sistema deseado, los distintos conceptos que se aplicaron para llegar a
ellos se basaron en lo aprendido durante el cursado de la carrera de licenciatura en
sistemas de información, específicamente en materias como Análisis de Sistemas I y
II, los mismos sirvieron para identificar todos los aspectos que debían contemplarse
siguiendo las necesidades reales de las personas involucradas en el uso del producto.
Diagramas como Casos de uso, de Secuencia, Conversaciones, etc. se obtuvieron en
esta etapa.

12
2.1.1. Requerimientos Funcionales y no Funcionales
Las Tablas 1 y 2 indican los Requerimientos Funcionales y no Funcionales
Tabla [1]. Requerimientos Funcionales

Requerimientos funcionales
RF#1 El sistema debe contar con un Laboratorio virtual integrando los 45
instrumentos de la cátedra.
RF#2 El sistema debe contar con descargas de archivos pdf, Word, Excel,
jpeg, png.
RF#3 El sistema debe permitir subir archivos pdf, Word, Excel, jpeg, png.
RF#4 El sistema debe tener publicación de videos.
RF#5 El sistema debe brindar visualización de videos.
RF#6 El sistema debe contar con exámenes.
RF#7 El sistema debe contar con estadísticas de los Exámenes.
RF#8 El sistema debe tener gestión de usuarios.
RF#9 El sistema debe tener una tabla periódica con información de los
elementos.
RF#10 El sistema debe contar con estadísticas de ingreso al sistema y a las
distintas secciones.
RF#11 El sistema debe contar con una sección de novedades.
RF#12 El sistema debe contar con una sección de información.
Tabla [2]. Requerimientos no Funcionales

Requerimientos no funcionales
RNF#1 El sistema debe estar disponible en un 99%.
RNF#2 El sistema debe estar alojado en los servidores de la facultad.
2.1.2. Casos de uso
En el diagrama de caso de usos [Ver Fig. 2], se ve expresado gráficamente las

interacciones de los usuarios y el sistema, como medio de retroalimentación entre los
destinarios y el desarrollador. Se observan los distintos roles que cumplen las
personas dentro del sistema, estos son cinco y van de mayor a menor nivel de
intervención: Usuario no registrado, Alumno registrado, Alumno registrado y habilitado,
Ayudante y por último Profesor.

13
Fig. 2. Casos de uso
El perfil del usuario no registrado cuenta con menos privilegios dentro del sistema, una
vez que una persona ingrese a la página se encontrará como “usuario no registrado”
pudiendo realizar dos funciones básicas:
1- Registrarse: El usuario podrá mediante un formulario de registro solicitar un acceso

al sistema, luego de esto obtendrá el perfil de “Alumno registrado”.
2- Unirse a las redes sociales: El usuario no registrado podrá poner “Me gusta” en el
sitio de Facebook Química General UNNE, y recibir desde su cuenta novedades e
información en dicha red social, también podrá suscribirse en la cuenta de YouTube
Química General y visualizar los videos de la cátedra en línea.
La funcionalidad que se le añadirá al usuario registrado además de los heredados del

perfil anterior es la posibilidad de gestionar su cuenta, esto incluye modificar su
contraseña actual, y ver sus datos actuales.

14
El último rol dentro de los alumnos es el usuario “Registrado y activo”, el mismo se

designa a las personas que una vez registradas reciben la aprobación de un profesor o
ayudante para el ingreso a las distintas secciones del sistema.
Este usuario puede acceder y visualizar las distintas secciones del sitio: “Documentos
e información”, “Laboratorio Virtual”, “Videos en el laboratorio”, además de responder
un examen, y descargar materiales de la asignatura, heredando también las
características de los dos perfiles anteriores: “Usuario no registrado”, y “Alumno
registrado”.
Del lado derecho de la gráfica [Ver Fig. 2] se observa dos perfiles, “Ayudante” y
“Profesor”, el rol de Ayudante cumple diversas funciones dentro del sistema
simplificando el trabajo a los profesores para administrar y controlar la página,
Las funciones que pueden desarrollar un Ayudante se enumeran y explican a
continuación:
1- Gestionar Preguntas: Crear, modificar y borrar preguntas, indicar a que

temario pertenecen y designar una serie de posibles respuestas hacia cada
pregunta.
2- Gestionar Alumnos: Dentro de la gestión de alumnos, un ayudante puede

modificar datos del alumno, como LU, nombre, apellido, etc. Y designar como
alumno registrado activo, habilitando al alumno todas las funcionalidades
propias de su perfil.
3- Gestionar Videos: Esta funcionalidad incluye: publicar, modificar y eliminar

videos dentro del sistema, además cuenta con una opción para disponer un
video publicado con anterioridad en primer lugar.
4- Gestionar documentos: El usuario ayudante podrá subir, modificar, y borrar

documentos en una serie de formatos preestablecidos.
5- Editar sección de información: Esta opción incluye publicar dentro del

apartado “Documentos e Información” toda la información relevante a la
asignatura, como horarios, fecha de exámenes, fecha de entrega, etc.

15
6- Editar información de bienvenida y novedades: Estas dos funcionalidades

permite dentro de la página principal crear y modificar una frase de bienvenida
dirigida hacia los alumnos y todas las personas de interés, además de crear y
modificar un apartado de novedades donde se publicará sucesos recientes de
la materia.
El perfil que tendrá un Profesor dentro del sistema abarca cinco funcionalidades
propias y seis heredadas del rol anterior, estas se enumeran a continuación:
1- Cerrar período: Terminado un ciclo, un profesor puede dar por finalizado el

período lectivo en el cual se borrarán algunos datos y se generarán otros, esta
funcionalidad y las demás se explicaran con mayor precisión más adelante.
2- Visualizar estadísticas: Esta funcionalidad incluye ver los exámenes

realizados por los alumnos, eliminarlos, o modificar el número de posibilidades
restantes para finalizar un examen. Aquí también se podrá visualizar
estadísticas de los distintos exámenes realizados, como promedio de notas,
notas más altas, etc.
3- Definir período de examen: un período de examen indica el día de inicio y fin

dentro del cual los alumnos podrán realizar dicho examen en modalidad on-
line.
4- Gestionar profesores: Dentro del rol de profesor el mismo podrá crear,

modificar y eliminar tanto profesores como ayudantes.
5- Visualizar estadísticas de ciclos: Luego del cierre de un período lectivo se

generará un informe estadístico el cual quedará asentado en el sistema, esta
serie de informes estarán visibles sólo para el perfil de los profesores.
2.2. Desarrollo
Luego del diseño y siguiendo la metodología “ISE”, el análisis y diseño es volcado en

el desarrollo del sistema, en esta etapa es común que surjan nuevos requerimientos
no acordados o especificado con claridad en la fase anterior, es por ello que el
desarrollo tiende a ser dinámico con el análisis y diseño.

16
2.2.1 Etapas previas a los requerimientos funcionales
En el sistema propuesto son necesarias otras consideraciones previas que por su

naturaleza y abstracción no fueron tenidas en cuenta desde un principio. Al ser un
servicio de acceso a través de internet es necesario que se encuentre disponible en
línea, para ello se enumeran a continuación los puntos indispensables para lograrlo:
I. Hardware
1. Servidor con conexión a internet
II. Sistema Operativo
1. Indiferentemente Windows o Linux
III. Software y servicios
1. DNS Server
2. Apache Server
3. MySql
4. SSH
5. phpMyAdmin
6. PHP
IV. IP’s y registración del dominio
1. IP de acceso público
2. Registro del dominio
2.2.1.1. Hardware
Para tener el servicio funcionando las 24 horas es necesario contar con una
infraestructura que lo haga posible, la Facultad de Ciencias Exactas y Naturales y
Agrimensura cuenta con la posibilidad de alojar el sistema web de manera gratuita
facilitando el acceso a los alumnos, por ello no será necesario recurrir a servidores
externos, ni montar uno propio.
Durante el desarrollo del sistema se contó con un servidor de prueba, donde fue
posible probar y documentar el funcionamiento a medida que se iban generando
nuevos módulos del producto.
2.2.1.2. Sistemas Operativos
En la elaboración de la aplicación se contó con un Sistema Operativo base del tipo

“Bare-Metal” en cual funcionan distintos tipos de SO’s estándares, particularmente de

17
licencia gratuita como Linux y sus distribuciones. Este Sistema Bare-Metal llamado
Esxi vSphere de la empresa VMware [7] se caracteriza por soportar múltiples SO de
distintas marcas y versiones, que trabajan de manera independiente simulando tener
el control del hardware, es de licencia gratuita como todas las herramientas utilizadas
en el desarrollo de este producto.
2.2.1.3. Software y paquetes de herramientas
Hasta ahora hemos resaltado las características del servidor, el Sistema Operativo
base y el Sistema Operativo estándar, dentro del último se instalarán las distintas
herramientas para poder alojar la página web: DNS Server, Apache Server, Mysql,
SSH, phpMyAdmin, PHP, todas estas herramientas se explicarán en el próximo
capítulo.
2.2.1.4. IP’s y registración del dominio
El último paso para tener en línea la página es registrar el dominio del mismo en la
Dirección Nacional del Registro de Dominios de Internet “nic.ar” para ello se requiere
tener una IP única de acceso universal, normalmente llamada IP pública, esta fue
facilitada por un ISP (proveedor de servicios de internet) y registrada en nic.ar.
Una vez finalizado la registración, y en un periodo no mayor a las 24 horas la página
se encontró disponible a través de internet para su desarrollo y pruebas. Las metas
siguientes fueron la realización de los requerimientos funcionales.
2.2.2 Pruebas pilotos y de campo
Con todo lo necesario para emprender el proceso de desarrollo del software, el

cumplimiento de las funcionalidades requeridas se fue desarrollando paulatinamente,
finalizando cada módulo del sistema se procedió a las pruebas pilotos y de campos,
donde se optimizaron detalles y se atendieron sugerencias propuestas por los
profesores para que la aplicación se adapte lo mejor posible a sus necesidades y
gustos. A través de reuniones programadas se mostró el avance en la elaboración del
producto software, demostrando sus propiedades y ventajas que permitió a los
profesores de la cátedra de Química General tener una idea clara de lo que se estaba
obteniendo. Se puede observar los resultados obtenidos en el capítulo 4, “Resultados”.

18
Capítulo 3. Herramientas y/o lenguajes de programación

En este capítulo se mencionan las herramientas y lenguajes de programación
utilizados en la generación de la solución.
3.1 Lenguajes de programación
 HTML: Lenguaje de marcación de elementos para la creación de

documentos hipertexto [8].
 CSS: Lenguaje que funciona junto con HTML, el cual nos permite controlar
el diseño y la estética de nuestro sitio web [9].
 Jquery: Complemento que facilita el desarrollo de aplicaciones enriquecidas
del lado del cliente [10].
 AJAX: No es en sí un lenguaje de programación, sino una nueva técnica
que combina varios lenguajes de programación. La ventaja de AJAX
respecto a otros lenguajes de programación web es la asincronía. Esto
consiste en que cuando queremos intercambiar datos con el servidor (por
ejemplo enviar o comprobar un formulario, consultar una base de datos,
etc.), la página no se queda parada esperando la respuesta, sino que se
pueden seguir ejecutando acciones mientras tanto. [11].
 Bootstrap: Framework originalmente creado por Twitter, que permite crear
interfaces web con CSS y JavaScript, cuya particularidad es la de adaptar
la interfaz del sitio web al tamaño del dispositivo en que se visualice [12].
 MySQL: Es un sistema de administración de bases de datos (Database
Management System, DBMS) para bases de datos relacionales [13].
 JavaScript: Lenguaje de programación que se utiliza principalmente para
crear páginas web dinámicas interpretados del lado del cliente [14].
 PHP: Lenguaje de programación del lado del servidor de contenido
dinámico, permite el acceso a bases de datos, la gestión de usuarios y
muchas características más [15].

19
3.2 Herramientas
1. DNS Server: Pack de herramientas y funciones para configurar los lineamientos

del dominio y las IP’s a las que responderán.
2. Apache Server: Servidor HTTP que brinda la posibilidad de alojar páginas WEB,
configurar bases de datos, y autentificaciones.
3. MySql: Herramienta que brinda una gran variedad de funciones para la creación y
mantención de bases de datos en el lenguaje MySql.
4. SSH: Herramienta que permite el acceso al sistema de manera remota, de suma

importancia a la hora de trabajar con el servidor, ya que se encuentra en un lugar
físico de acceso restringido, además de la posibilidad de trabajar desde la
comodidad del hogar.
5. phpMyAdmin: Esta herramienta escrita en PHP permite la administración de

MySQL a través de páginas web. Actualmente puede crear y eliminar bases de
datos, crear, eliminar y alterar tablas, borrar, editar y añadir campos, ejecutar
cualquier sentencia SQL, administrar claves en campos, administrar privilegios y
exportar datos en varios formatos. Su mejor característica es la interfaz gráfica
amigable al usuario que la compone, haciendo el trabajo más sencillo a la hora de
gestionar la base de datos.
6. DIA: Es programa gratuito para dibujar diagramas de estructura de todo tipo,

disponible para Mac, Linux y Windows es más de sesenta lenguajes.

20
Capítulo 4. Resultados
En esta sección se mostrará y explicarán las funcionalidades del sistema terminado,

ilustrando con imágenes de captura de pantallas para su mejor comprensión, puede
visitar el sitio ingresando a través de su navegador (preferentemente Google Chrome)
a la I.P: 201.217.246.109, con los siguientes perfiles de usuario:
1. Profesor: Usuario: 11111111, Contraseña: 11111111.
2. Ayudante: Usuario: 33333333, Contraseña: 33333333.
3. Alumno: Usuario: 22222222, Contraseña: 22222222.
A fin de facilitar la ubicación de las opciones disponibles según se describe en este

capítulo, la Tabla 3 resume las funcionalidades disponibles en la web Educativa para
Química I.
Tabla [3]. Síntesis de funcionalidades de la web Educativa para Química

Perfil de usuario Funcionalidad
Usuario no registrado Registrarse
Usuario no registrado Unirse a las redes sociales
Alumno registrado Gestionar su cuenta
Alumno registrado Loguearse
Alumno registrado y autorizado Descargar material
Alumno registrado y autorizado Responder Examen
Alumno registrado y autorizado Acceder y visualizar las distintas secciones
Ayudante Gestionar Preguntas
Ayudante Gestionar Alumnos
Ayudante Gestionar Videos
Ayudante Unirse a las redes sociales
Ayudante Loguearse
Ayudante Gestionar documentos
Ayudante Editar sección información
Ayudante Editar información de bienvenida
Ayudante Editar información de novedades
Profesor Visualizar estadísticas de ciclos
Profesor Gestionar profesores

21
Profesor Definir periodos de examen

Profesor Visualizar estadísticas
Profesor Cerrar periodo
4.1 Página principal
La página principal sigue una tendencia de diseño “Scroll Parallax”, se trata de una
web contenida en una única página vertical, en el cual el paso entre secciones puede
hacerse por medio del scroll o a través del menú, con movimientos acelerados [16].
Fig. 3. Página principal Química General

22
En la Fig. 3 se observa la página de bienvenida, dividida en distintas secciones que al

desplazarse verticalmente visualiza su contenido (diseño scroll parallax). Este diseño
tiene sus fundamentos en el avance tecnológico de los teléfonos inteligentes
(Smartphones), tablets, y otros dispositivos de acceso a internet, en los cuales la
interacción con el menor número de clics posible cobra relevancia. Tan sólo con mover
el scroll del mouse (la ruedita), o deslizar los dedos por una pantalla táctil, permite ver
todas las funcionalidades de la aplicación. En las imágenes siguientes [ver figuras 4, 5,
6 y 7] se describen las distintas secciones de la página principal.
Fig. 4. Sección de Bienvenida.
En la sección de Bienvenida se despliega un mensaje en el cual se describe la página,

se puede incorporar un saludo a un nuevo grupo de alumnos, o lo que el profesor crea
conveniente.
Fig.5. Sección de Novedades.
La sección Novedades [Ver Fig. 5] contendrá todas las novedades durante el cursado
de la materia, por ejemplo: fechas de exámenes, resultados, entrega de trabajos, etc.

23
Fig. 6. Registro.
La sección Registro [Ver Fig. 6] permite crear una cuenta en la página ya sea a través
de una cuenta en Facebook o de manera manual, también podrá iniciar sesión si ya
posee una.
Dependiendo del perfil del usuario se desplegará el acceso a nuevas funcionalidades,
que se explicarán detalladamente más adelante.
Fig. 7. Zona Social.
Una búsqueda exhaustiva llevó a una recopilación de datos de distintas fuentes sobre
el uso de las redes sociales, en todas se repetía un patrón: las dos redes sociales más
difundidas y usadas que se encontraron son Facebook y Youtube [Ver Fig. 8].
Esta sección brinda acceso a estas redes sociales permitiendo tener a disposición
rápidamente información acerca de todas las novedades de la cátedra de Química
General. Tanto Facebook como Youtube permiten a través de su API integrarse a
cualquier página web siguiendo una serie de normas y estándares de uso, con una
sencilla codificación se puede tener en funcionamiento distintos elementos en la web:
botones me gusta, de suscripción, cajas de comentarios, y actualizaciones de estados
son ejemplos de ellos.

24
Fig. 8. Puesto 1 y 2 de redes sociales más utilizadas según WebEmpresa20
En la figura 8 se observa que tanto Facebook como Youtube lideran la lista de redes
sociales más usadas en gran parte del globo según WebEmpresa20. Ambas cuentan
con más de 1.000 millones de suscriptores, el podio complementan otras redes
conocidas como Twitter, WhatsApp, Google+ y Linkedin
[17].
4.2 Perfiles de los usuarios.
Se ha mencionado anteriormente que existen cinco perfiles de usuarios: Usuario no

registrado, Alumno registrado, Alumno registrado y autorizado, Ayudante y Profesor,
se ha explicado también sus diferencias y similitudes. En la Fig. 3 se aprecia la página
principal vista por cualquier usuario que aún no se ha registrado ni ha iniciado sesión,
ya sea alumno, ayudante o profesor.
4.2.1 Usuarios registrados.
Una vez registrado un usuario toma el perfil de alumno registrado [Ver Fig. 9] en el
cual su acceso a las funcionalidades del sistema se ve limitado hasta que un
administrador (profesor o ayudante) lo habilite, esto permite que sólo las personas que
los profesores autoricen usen la aplicación, liberando de la carga de datos de todos los
alumnos a los administradores.
El alumno registrado podrá ver su estado haciendo clic en “configuración” dentro del
panel de control [Ver figuras 10 y 11

25
].
Fig. 9. Vista de un alumno registrado.
Fig. 10. Panel de control.

26
Fig. 11. Configuración.

4.2.2 Usuarios registrados y habilitados.
Luego de que un alumno es habilitado su perfil pasa a ser el de “Alumno registrado y

habilitado”, en la Fig. 12 se observan las distintas opciones a las cuales puede acceder
una vez que toma este perfil. Estas opciones son: Examen, Documentos e
información, Laboratorio Virtual, Tabla periódica, Videos en el laboratorio.
4.2.3 Ayudantes.
Los ayudantes cumplen la función de colaborar con los profesores para administrar la
página, es por ello que pueden publicar videos, habilitar y editar los datos de los
alumnos, crear, editar y eliminar preguntas de exámenes, subir archivos y publicar
información relevante a la materia.
4.2.4 Profesores.
Por último el perfil de los profesores incluye ocho funciones que se añaden a las ya
mencionadas de los ayudantes:
1- Editar un párrafo inicial de bienvenida en la página principal.

2- Editar Novedades en la página principal.
3- Ver exámenes realizados por los alumnos individualmente.
4- Ver estadísticas generales de los exámenes realizados por los alumnos.
5- Crear y editar perfiles de usuarios Profesores y Ayudantes.
6- Definir períodos de exámenes.
7- Ver estadísticas de ciclos anteriores.
8- Por último, cerrar el período lectivo.

27
Estos ítems incluidos las funciones de los ayudantes y usuarios registrados y

habilitados se explicarán a continuación.
Fig. 12. Accesos Alumnos registrados.
Fig. 13. Accesos profesores y ayudantes.
4.3 Examen.
En el apartado “Examen” un alumno podrá responder, una serie de diez preguntas

dispuestas en orden aleatorio y con un tiempo máximo de cuatro minutos, estas
preguntas son generadas en el sistema por los profesores de la cátedra de Química
General de la Facultad de Ciencias Exactas y Naturales y Agrimensura (UNNE),
siguiendo un formato de opción múltiple (múltiple choice). Pasado los cuatro minutos el
alumno perderá una posibilidad. Las posibilidades son el número de veces que el
sistema permite a un alumno responder el cuestionario en curso, es decir, que se
contempla los inconvenientes que se puedan generar durante el desarrollo del mismo,

28
como por ejemplo: un corte de luz, cierre inesperado del navegador, el hecho de que
no haya podido responder en el lapso estipulado, etc.
Fig. 14. Pizarra de examen.
Fig. 15. Pregunta de examen.

29
Fig. 16. Respuesta correcta.
Fig. 17. Respuesta incorrecta.
Fig. 18. Tiempo restante.

30
Fig. 19. Tiempo expirado.
Fig. 20. Alerta de salida.
Fig. 21. Aviso de no más posibilidades de realizar el examen.

31
Fig. 22. Examen desaprobado.
Fig. 23. Examen aprobado.
Una vez que se ingresa, se observará un pizarrón en el cual, a través del botón
Comenzar situado en la parte inferior se dará inicio al cuestionario [Ver Fig. 14]. En la
parte izquierda de la pantalla aparecerán las preguntas y en la parte derecha las
opciones, situado debajo de las opciones el botón para contestar [Ver Fig. 15].
El sistema dará aviso si la respuesta es correcta o incorrecta una vez que el usuario
haya respondido [Ver figuras 16 y 17].
Cada determinado lapso se dará aviso del tiempo restante para responder [Ver Fig.
18], perdiendo una chance agotado este tiempo [Ver Fig. 19].
Asimismo, si el alumno intenta dirigirse a otra dirección, recargar la página o cerrar el
navegador, se alertará a través de un mensaje que perderá automáticamente otra

32
posibilidad para responder el cuestionario [Ver Fig. 20]. Cuando no cuente con más
chances se emitirá un aviso del mismo [Ver Fig. 21].
Finalizado el examen se observará la nota obtenida. [Ver figuras 22 y 23].
El tiempo estipulado, el formato de las preguntas y el número de oportunidades para
realizar el examen fueron dispuestos en su totalidad por los profesores de la cátedra,
contemplando diferentes situaciones en las que un alumno se podría encontrar al
momento de responder el cuestionario.
Las animaciones se realizaron en el lenguaje JavaScript del lado del cliente (pc del
usuario), por otro lado las respuestas se almacenaron a través del lenguaje MySQL
por medio de PHP, permitiendo luego tener estadísticas de todos los exámenes
realizados.
4.4 Laboratorio Virtual.
El Laboratorio Virtual ofrece a los alumnos una guía ilustrativa e intuitiva de los
instrumentos presentes en laboratorio de la cátedra, con unos clics podrá ir
recorriendo cada uno de ellos, leyendo información relevante y observando imágenes
tanto ilustrativas como reales de las mismas.
Fig. 24. Página de bienvenida al Laboratorio Virtual.
En la página principal del laboratorio [Ver Fig. 24] se puede observar el menú de
desplazamiento que permite moverse entre la página de bienvenida y la de
introducción al laboratorio virtual [Ver Fig. 25], con la misma funcionalidad cuenta el

33
icono resaltado en el centro de la página (la mano con dirección hacia abajo)
pudiéndose utilizar también las flechas de navegación del teclado con el mismo efecto.
Fig. 25. Introducción al Laboratorio Virtual.

En la segunda vista [Ver Fig. 25] se observa tanto a derecha como izquierda flechas
con indicación de desplazamiento para recorrer cada instrumento presente en el
laboratorio de la cátedra, también aquí tiene el mismo efecto las fechas de navegación
en el teclado.
Fig. 26. Primer instrumento.

34
Fig. 27. Un instrumento más I.
Fig. 28. Un instrumento más II.
En el momento de recorrer los instrumentos [Ver figuras 26, 27 y 28] se puede

observar el mismo formato de presentación para cada uno de ellos, donde se destacan
seis segmentos: primero el icono del instrumento, segundo el nombre del instrumento,
en tercer lugar información relevante extraído del material que se le brinda a los
alumnos de la cátedra, cuarto una imagen ilustrativa seguida de (quinto) información
adicional y por último una imagen tomada del instrumento en el laboratorio. Las
imágenes se pueden ampliar para mayor apreciación haciendo clic sobre las mismas.

35
La apariencia y funcionamiento del laboratorio virtual siguen las tendencias de diseño

actuales, siendo estas intuitivas, de fácil utilización y de gran contenido visual, con
diseño responsivo, importante para adaptar la web a los dispositivos móviles en estos
tiempos donde un gran porcentaje de la navegación se hace ya desde smartphones y
tablets [18]. Con el objetivo de unificar la experiencia del usuario a través de los
diferentes dispositivos y tamaños de pantalla, resulta interesante la utilización del scroll
con información sobre la misma página, evitando clics innecesarios para la
navegación. Los usuarios actuales ya tienen incorporada la costumbre del scroll
cuando navegan es sus smartphones o tablets. Por eso la extensión de esta práctica
hacia los usuarios de escritorio parece lógica y claramente agiliza la navegación [19].
4.5 Tabla periódica.
La página web cuenta con sección dedica a la tabla periódica de los elementos, dicha
tabla cuenta con una animación especial al posicionar el puntero del mouse sobre
cada elemento el cual simula flotar y despliega información relevante sobre el mismo:
nombre, número atómico, peso atómico y configuración electrónica, por lo que lo
convierte en un medio de consulta rápida sobre ese elemento en particular.
Fig. 29. Posicionamiento del cursor sobre elemento.

36
Fig. 30. Selección de otro elemento de la tabla.
4.6 Videos en el laboratorio.
En el apartado “Videos en el laboratorio” los alumnos podrán acceder a videos

propuestos por los profesores de la cátedra, ya sean elaborados por la propia cátedra
o externos, en la actualidad YouTube cuenta con más de mil millones de usuarios (casi
un tercio de las personas conectadas a Internet), que miran cientos de millones de
horas de videos en YouTube y generan miles de millones de vistas todos los días [20].
El uso de estas plataformas sociales permite integrar tecnologías ya instauradas en
nuestra vida cotidiana al sistema educativo.
Fig. 31. Página: Videos en el laboratorio.
En la página [Ver Fig. 31] se observa en la parte izquierda de la pantalla el título y el

video en cuestión, en la parte derecha una descripción detallada del video, donde
además de texto los profesores pueden insertar imágenes, enlaces hacía otras

37
páginas de interés, listados enumerados, viñetas, artículos, y muchas opciones más, a

continuación se mostrará los pasos que le llevarán a los profesores o ayudantes
publicar videos en la página.
Fig. 32. Página de inicio Youtube.
Para alojar los videos en Internet por disponibilidad, seguridad y ahorro de recursos
(espacio de almacenamiento) entre otros los videos serán alojados en YouTube, para
ello se creó una cuenta en Google en la cual permitirá realizar estas operaciones y
otras más.
Para comenzar se debe acceder a la cuenta de YouTube escribiendo en el buscador
del navegador www.youtube.com, una vez ingresada a la página se debe hacer clic en
“Iniciar sesión” en la parte superior derecha [Ver Fig. 32].
La página nos pedirá credenciales, para ello se deberá escribir usuario y contraseña
como muestra la imagen siguiente [Ver Fig. 33].

38
Fig. 33. Ingreso a la cuenta de Google.
Una vez ingresado [Ver Fig. 34] se visualizará la cuenta de YouTube con varias
opciones disponibles, permite dirigirse a aquello de mayor interés, para ello se deberá
hacer clic en el botón “Subir un vídeo” ubicado en la parte superior derecha [Ver Fig.
34].
Fig. 34. Página principal de la cuenta quimicageneralunne en Youtube.

39
Fig. 35. Subir Videos en la plataforma Youtube.
Luego de hacer clic en el botón “Subir un vídeo” se abrirá otra página [Ver Fig. 35]
donde se podrá seleccionar el video que se quiera alojar y publicar en YouTube, una
vez realizado esto YouTube empezará a subir y procesar el video [Ver Fig. 36]
finalizado este paso nos pedirá que completemos cierta información como título,
descripción, etiquetas, y privacidad [Ver Fig. 37] completado todo estos campos sólo
se debe hacer clic en publicar en la parte superior derecha y nos abrirá una página con
el enlace para poder publicarlo en la página de Química General [Ver Fig. 38]. Sobre la
privacidad es importante que se marque como “público” para que luego pueda
reproducirse sin problemas en el sitio Química General.
Fig. 36. Proceso de subida en la plataforma Youtube.

40
Fig. 37. Descripción del video y privacidad en la plataforma You Tube
Fig. 38. Subida de video finalizada en la plataforma You Tube.
Obtenido el enlace al video alojado en la cuenta de YouTube [Ver Fig. 38] se

procederá a publicarlo en el sitio WEB de Química General. Dentro de Videos en el
Laboratorio [Ver Fig. 39] aparecerán dos opciones principales “Modificar” (vídeos ya
publicados) y “Nuevo”, haciendo clic en nuevo se desplegarán las opciones para
publicarlo [Ver Fig. 40].

41
Fig. 39. Página principal Videos en el laboratorio para profesores y ayudantes.
Fig. 40. Editor para publicar vídeos.
La imagen anterior muestra los campos necesarios para publicar el video en la página
[Ver Fig. 40], estos son:
I. Titulo
II. URL
III. Descripción
Tanto el Título como la Descripción se pueden elegir con total libertad, en el campo
URL sin embargo se debe escribir o “copiar y pegar” la URL provista por YouTube sin
errores para ser correctamente procesada y aceptada, luego se puede obtener una
vista previa haciendo clic en el botón en color azul “Mostrar” [Ver Fig. 41].

42
Fig. 41. Vista previa del video.
Si se desea modificar, puede hacer clic en el botón verde “Editar” para volver al editor,
o bien clic en el botón rojo “Guardar” si quiere publicar el video. En la imagen siguiente
se muestra el vídeo publicado [Ver Fig. 42].
Fig. 42. Video publicado en Química General.
Cuando se cuenta con un número importante de videos publicados, se puede destacar

alguno o algunos sobre el resto o cambiar información sobre los mismos, para ello se
modifica tanto la ubicación del o de los videos como los datos ingresados sobre los
mismos haciendo clic en la primera opción principal de la página Videos en el
laboratorio “Modificar” [Ver Fig. 39].

43
Fig. 43. Vista “Modificar” de Videos en el laboratorio.
Una vez ingresado en modificar [Ver Fig. 43] el menú ubicado en la parte superior una
serie de opciones permite seleccionar un video publicado y destacarlo haciendo clic
en el botón amarillo “Arriba” haciendo que el mismo aparezca al principio, o modificarlo
clickeando en el botón verde “Modificar” desplegando los campos título, URL y
descripción del video [Ver Fig. 44] o eliminarlo haciendo clic en el botón rojo “Eliminar”
[Ver Fig. 45].
Fig. 44. Modificar un video ya publicado.

44
Fig. 45. Publicación eliminada.
4.6 Documentos e Información.
En la parte resaltada en color rojo [Ver Fig. 46] se podrá acceder a Documentos e
Información, una sección pensada para subir y descargar archivos relevantes a la
materia: imágenes, pdfs, archivos en formato Excel o Word, entre otros. También
cuenta con un editor de texto, donde se podrá agregar información como ser horarios
de la materia, laboratorios, grupos, fechas de entrega, exámenes, etc.
Fig. 46. Acceso a Documentos e Información.

45
Fig. 47. Fichas “Información y Noticias” y “Materiales y Notas”.
En esta página se podrá ver un menú que contiene dos fichas la primera “Información
y Noticias” y la segunda “Materiales y Notas” [Ver Fig. 47], Dependiendo del perfil de
usuario con que se accede al sistema se podrá editar o no estas fichas, decíamos que
los profesores o ayudantes tendrán acceso a la edición de los mismos, esto se puede
observar en las imágenes a continuación [Ver Figuras 48 y 49].
Fig. 48. Ficha “Información y Noticias” en modo edición.

46
Fig. 49. Ficha “Materiales y Notas” en modo edición.
Para subir un documento sólo se debe agregar un título, seleccionar el archivo en

cuestión y hacer clic en el botón subir, luego el sistema hará una comprobación de la
extensión (es decir si es un archivo válido o no) y se verá reflejado en la tabla inferior
(en caso de que sea válido), luego se podrá editar o eliminar de ser necesario.
En las imágenes a continuación [Ver Figuras 50 y 51] se observa la vista que tendrán
los alumnos registrados y habilitados al acceder tanto a la ficha “Información y
Noticias” como a “Materiales y Notas”.
Fig. 50. Ficha “Información y Noticias” en modo vista.

47
Fig. 51. Ficha “Materiales y Notas” en modo vista.
Al hacer clic en la pestaña “Información y Noticias” se despliega toda la información

guardada por los profesores o ayudantes en la misma, en tanto cuando se hace clic en
la pestaña “Materiales y Notas” se observa todos los documentos subidos por los
profesores o ayudantes, disponible para su descarga simplemente haciendo clic sobre
el título.
4.7 Configuración.
Unos de los apartados más importantes dentro del sistema es el de “Configuración”,

[Ver Fig. 52] aquí tanto el profesor como el ayudante encontrarán distintas pestañas
donde se puede configurar y editar desde el período de examen hasta cerrar un ciclo
lectivo. A continuación veremos en detalle cada sección dentro de este apartado.
Fig. 52. Acceso a Configuración.

48
Fig. 53. Menú de secciones en Configuración.
Como se observa en la Fig. 53 el menú de configuración brinda el acceso a las

distintas secciones dentro de esta página:
I. Estadísticas.
I.1. Ver Exámenes
I.2. Estadísticas Generales
II. Alumnos
II.1. Ver Alumnos
II.2. Habilitar Alumnos
III. Examen
III.1.Período de Examen
III.2.Preguntas
IV. Crear Profesor
V. Cerrar Periodo
VI. Estadísticas Ciclos

49
4.7.1 Ver Exámenes
La sección ver exámenes [Ver Fig. 54] detalla en una tabla el DNI, Libreta
Universitaria, nombre, apellido, fecha, su nota, cuántas preguntas respondió, cuántas
acertó y las posibilidades restantes que quedaron disponibles al alumno. Esta tabla
además permite ordenar por cada uno de los ítems marcados (recuadros rojos en la
imagen), así como elegir el número de registros a mostrar por página (recuadro
amarillo en la imagen), brinda también la posibilidad de filtrar resultados por número de
documento como editar en cada registro las posibilidades restantes de los alumnos o
borrar el registro permitiendo que el alumno realice el examen desde cero (recuadro
rosa).
Fig. 54. Ver Exámenes.
Fig. 55. Modificar las posibilidades restantes de los alumnos.

50
4.7.2 Estadísticas Generales
En la Fig. 56 se visualiza dentro de la sección “Estadísticas Generales” información

relevante sobre los exámenes realizados por los alumnos, esto permite a los
profesores tener datos valiosos sobre el resultado en general de sus alumnos. Los
datos que se brindan son:
I. Alumnos registrados: Alumnos habilitados en el sistema.

II. Exámenes realizados: El número de personas habilitadas que realizaron el
examen.
III. Aprobados.
IV. Desaprobados.
V. Promedio Total: Promedio de los exámenes realizados tantos aprobados como
desaprobados.
VI. Promedio general de los aprobados: Promedio de los exámenes aprobados.
VII. Promedio general de los desaprobados: Promedio de los exámenes
desaprobados.
VIII. Nota más alta.
IX. Nota más baja.
Fig. 56. Estadísticas Generales.
4.7.3 Ver alumnos
En “Ver alumnos” podremos ver, editar o borrar los alumnos registrados en la página a
través de una tabla de idénticas características explicadas en “Ver exámenes”, donde
podremos ordenar por cada ítem presente en la misma, editar los datos presentes en
la misma y/o borrar algún registro [Ver Figuras 57 y 58].

51
Fig. 57. Ver alumnos.
Fig. 58. Editar Alumnos.
4.7.4 Habilitar Alumnos
La sección Habilitar alumnos brinda tanto a profesores como ayudantes una interfaz
sencilla para ir corroborando y habilitando a los alumnos que se registren a la página,
esta interfaz de similitud con “Ver alumnos” cuenta con sólo un ítem a modificar, el
cual es el de habilitar o deshabilitar a cada uno de los usuarios registrados, también
permite filtrar resultados por número de DNI para una búsqueda más eficaz [Ver Fig.
59].

52
Fig. 59. Habilitar Alumnos.
4.7.5 Período de examen
En “Período de examen” definiremos la fecha de inicio y cierre que permite a un

alumno registrado y habilitado en la página realizar un examen, para lo cual el profesor
sólo debe ingresar en los recuadros “Fecha de inicio” y “Fecha de cierre” las fechas
convenidas. El mismo en el caso de ingresar alguna incongruencia, como por ejemplo
que la fecha de cierre sea anterior a la fecha de inicio alertará al usuario del error. Una
vez ingresadas las fechas es posible eliminar e ingresar una nueva tan sólo clickeando
en “Eliminar fechas”. Luego, en el recuadro derecho aparecerá la leyenda con las
fechas ingresadas y los días estipulados para que el alumno pueda realizar el examen
[Ver Figuras 60, 61 y 62].
Fig. 60. Período de examen.

53
Fig. 61. Validación de fechas.
Fig. 62. Fecha de exámenes establecida.
4.7.6 Preguntas de examen
En la sección preguntas de examen podremos ver, crear, modificar, y eliminar Temas,

preguntas y respuestas, esta sección cuenta con una interfaz intuitiva igual a las
mencionadas anteriormente (Ver Alumnos, Ver Examen), que ofrecen una vista de
cada registro ingresado [Ver Fig. 63].

54
Fig. 63. Preguntas de examen.
Se observa en la imagen anterior [Ver Figura 63] en el margen superior derecho un

botón para crear nuevos temas, en el cual al hacer clic habilita un recuadro para
ingresar el nombre de los mismos. Un poco más abajo se visualizan los botones
contextuales para editar y/o borrar los temas creados.
A la izquierda de la imagen se pueden ver signos de pregunta, en los cuales al hacer
clic se despliegan las preguntas creadas correspondientes a dicho tema, a su vez que
permite crear, editar o borrar las mismas [Ver Fig. 64].
Fig. 64. Vista de preguntas.

55
Como se dijo anteriormente, desplegando cada ítem de temas se habilitan sus

correspondientes preguntas, de igual modo haciendo clic en el símbolo tilde se
despliega un submenú con las respuestas posibles correspondientes a cada pregunta,
esto permite una organización precisa “Tema-Pregunta-Respuestas”, en la cual
también se pueden ver, crear, modificar, o eliminar cada una.
Fig. 65. Vista de respuestas.
Fig. 66. Editar Tema.

56
Fig. 67. Editar pregunta.
Fig. 68. Editar respuesta.
Estas preguntas y respuestas se mostrarán luego de manera aleatoria y al azar en los

exámenes de los alumnos.
4.7.7 Crear profesor
En la imagen siguiente [Ver Fig. 69] se visualiza el apartado “Crear profesor” que
permite, además de crear, observar su cargo en el sistema, modificarlo cambiando por
ejemplo su clave, o su cargo, hasta eliminarlo. Desde el formulario ubicado en la parte
izquierda se pueden crear tanto profesores como ayudantes, sólo se deben completar
los campos presentes y previa validación de los mismos aparecerá en la tabla ubicada

57
a la derecha de la pantalla, desde ahí y siguiendo el mismo método de las tablas

anteriores se pueden editar o borrar tanto profesores como ayudantes.
Fig. 69. Crear Profesor.
4.7.8 Cerrar Período
El anteúltimo apartado “Cerrar Período” permite al profesor cerrar el ciclo lectivo. En

esta acción se almacenan las estadísticas de los exámenes, así como las estadísticas
de los accesos en las distintas secciones de la página, luego se procede a borrar los
datos de los alumnos como sus exámenes individuales. Como condición de seguridad,
se pide al profesor el ingreso de su contraseña para continuar con el proceso de cierre
[Ver Figuras 70 y 71].
Fig. 70. Cerrar Período.

58
Fig. 71. Ingreso de contraseña para continuar y confirmar.
4.7.9 Estadísticas de ciclos
El último apartado que ofrece la sección de Configuración es Estadísticas de ciclos, el

mismo brinda una tabla con datos que va dejando cada ciclo terminado, como se
observa en la imagen siguiente [Ver Fig. 72] la tabla nos arroja la siguiente información
según el ciclo:
 Profesor: DNI del profesor que cerró el ciclo.

 Año: Fecha de cierre del ciclo.
 N° Alumnos: Número de alumnos habilitados y registrados.
 Masculinos: Número de alumnos habilitados y registrados masculinos.
 N° Aprob. Masc.: Número de aprobados masculinos.
 N° Aprob. Fem.: Número de aprobados femeninos.
 Ingresos: Ingresos a la página.
 Ingr. Videos: Ingresos en la sección videos.
 Ingr. Lab. Ingresos en la sección laborario.
 Ingr. Examen: Ingresos en la sección Examen.
 Ingr. Tab. Per.: Ingresos en la sección tabla periódica.
 Ingr. Doc.: Ingresos en la sección documentos e información.

59
Capítulo 5. Conclusiones y futuros trabajos
El creciente número de alumnos en las facultades hace difícil el proceso de enseñanza

en las distintas materias que se dictan, con especial atención en las materias de los
primeros años donde el número de estudiantes es mayor, esto lleva a cursos
superpoblados, donde los profesores se ven en el laborioso trabajo de lograr inculcar
en los alumnos todos los conocimientos que se aplican en cada cátedra. Las
tecnologías de la información brindan facilidades para el proceso de enseñanza:
videos, materiales interactivos, imágenes, archivos, disponibles las veinticuatro horas
todos los días desde cualquier punto donde se cuente con acceso a internet.
Este aplicativo brinda un número extenso de herramientas que ayudan a este arduo
trabajo de enseñar y aprender, disponible para consultar y concurrir en cualquier
momento del día desde múltiples plataformas con sólo tener acceso a internet.
Si bien las necesidades propuestas por los profesores están satisfechas en este
aplicativo, gracias a ser un proyecto escalable se puede incluir nuevas y mejores
funcionalidades cada vez que se requieran. Puesto en funcionamiento el aplicativo
surgirán nuevas ideas para integrar al mismo como proceso natural del ciclo de un
sistema.

60
Referencias
[1] Gros Salvat, B. “El ordenador invisible. Hacia la apropiación del ordenador en la
enseñanza”. Barcelona, Gedisa, 2000, Cap. 1.
[2] Cataldi , Z, Donnamaría, C., Lage F. “Didáctica de la química y TICs: Laboratorios

virtuales, modelos y simulaciones como agentes de motivación y de cambio
conceptual”. Argentina, TE&ET09, 2008.
[3] Daza Pérez, E. “Experiencias de enseñanza de la química con el apoyo de las TIC”.
México, De aniversario, 2009.
[4] Model Science Software. “Model ChemLab” . Disponible:

http://modelscience.com/products_sp.html Fecha de consulta: 13/06/2013.
[5] A. Galvis, “ingeniería de software educativo”, 1era Edición, Colombia: Universidad

de los Andes, 1992, cap 3. pag 4.
[6] A. Galvis, “Ingeniería de software educativo”, 1era Edición, Colombia: Universidad

de los Andes, 1992, cap 3, pag 11.
[7] VMWare. “Esxi-Hypervisor”. Disponible en:

http://www.vmware.com/products/vsphere/features/esxi-hypervisor.html Fecha de
consulta: 05/01/2015.
[8] Desarrollo web. “Qué es HTML”. Disponible en:

http://www.desarrolloweb.com/articulos/que-es-html.html Fecha de consulta:
15/05/2015.
[9] M@quetar web. “¿Qué es CSS y para qué sirve?”. Disponible en:
http://www.maquetarweb.com/2013/01/que-es-css-y-para-que-sirve.html Fecha de
consulta: 15/05/2016.
[10] Desarrollo web. “Manual de jQuery”. Disponible en:

http://www.desarrolloweb.com/manuales/manual-jquery.html Fecha de consulta:
15/05/2016.
[11] Aprende Web. “Qué es AJAX”. Disponible en:

http://aprende-web.net/progra/ajax/ajax_1.php Fecha de consulta: 15/05/2016.
[12] ARWEB. “¿QUÉ ES BOOTSTRAP Y CÓMO FUNCIONA EN EL DISEÑO WEB?”.

Disponible en: http://www.arweb.com/chucherias/editorial/%C2%BFque-es-bootstrap-
y-como-funciona-en-el-diseno-web.htm Fecha de consulta: 15/05/2016.
[13] esepe studio. “Qué es MySQL?”. Disponible en:

http://www.esepestudio.com/noticias/que-es-mysql Fecha de consulta: 15/05/2016.
[14] LIBROS WEB. “¿Qué es JavaScript?”. Disponible en:

http://librosweb.es/libro/javascript/capitulo_1.html Fecha de consulta: 15/05/2016.

61
[15] php. “¿Qué es PHP?”. Disponible en: http://php.net/manual/es/intro-whatis.php

Fecha de consulta: 15/05/2016.
[16] Tendencias de diseño web. Scroll Parallax. Disponible en:

http://www.gloobs.com/blog/tendencias-diseno-web-2012-scroll-parallax Fecha de
consulta: 09/01/2015.
[17] WebEmpresa20. “Las 30 redes sociales más utilizadas”. Disponible en:

http://www.webempresa20.com/blog/las-30-redes-sociales-mas-utilizadas.html Fecha
de consulta: 09/01/2015.
[18] hazHistoria. “12 tendencias en diseño web para 2015”. Disponible en:
http://www.hazhistoria.net/blog/12-tendencias-en-dise%C3%B1o-web-para-2015
Fecha de consulta: 11/10/2015.
[19] Vox-Web. “Tendencias 2015 en diseño web”. Disponible en: http://www.vox-

web.com.ar/tendencias-2015-en-diseno-web Fecha de consulta: 11/10/2015.
[20] Presa Youtube. “Estadísticas”. Disponible en:

https://www.youtube.com/yt/press/es-419/statistics.html Fecha de consulta:
26/01/2016.

62

TFA Cristian García FINAL

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

TFA Cristian García FINAL

Cargado por

Copyright:

Formatos disponibles

Universidad Nacional del Nordeste

Facultad de Ciencias Exactas y Naturales y Agrimensura

Licenciatura en Sistema de Información

Aplicación WEB Educativa para Química I:

Alumno: García, Cristian Andrés.

Profesor Orientador: Mgter. Petris, Raquel.

Profesor Coordinador: Mgter. Mariño, Sonia.

Tribunal Examinador: Mgter. Mariño, Sonia.

La evolución y el progreso en la enseñanza avanzó de manera acelerada en las

Cristian Andrés García

A mamá por el esfuerzo inmensurable para brindarme la posibilidad de estudiar, a mi

Cristian Andrés García

Cristian Andrés García

Cristian Andrés García

LiveChem de la universidad de Oxford . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Cristian Andrés García

Ficha “Información y Noticias” en modo vista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Cristian Andrés García

Cristian Andrés García

1.1. Estado del arte

La propuesta de utilizar software como herramienta de aprendizaje no es nueva,

Cristian Andrés García

Fig. 1. LiveChem de la universidad de Oxford

En la actualidad existen un interesante número de herramientas virtuales para el

Cristian Andrés García

curricular y en ocasiones no se ajustan a las estrategias pedagógicas que se utilizan

Además de la relevancia que podría alcanzar un software de estas características con

Diseñar e implementar un sitio web que permita la simulación de un laboratorio virtual

Cristian Andrés García

Como metodología de desarrollo del software a abordar se eligió el método “ISE”

Se ha observado que ninguna herramienta de las encontradas cumple de manera

2.1. Análisis y diseño

En el análisis del sistema se determinaron los requerimientos específicos del producto.

Cristian Andrés García

2.1.1. Requerimientos Funcionales y no Funcionales

Las Tablas 1 y 2 indican los Requerimientos Funcionales y no Funcionales

Tabla [1]. Requerimientos Funcionales

Tabla [2]. Requerimientos no Funcionales

2.1.2. Casos de uso

En el diagrama de caso de usos [Ver Fig. 2], se ve expresado gráficamente las

Cristian Andrés García

Fig. 2. Casos de uso

1- Registrarse: El usuario podrá mediante un formulario de registro solicitar un acceso

La funcionalidad que se le añadirá al usuario registrado además de los heredados del

Cristian Andrés García

El último rol dentro de los alumnos es el usuario “Registrado y activo”, el mismo se

1- Gestionar Preguntas: Crear, modificar y borrar preguntas, indicar a que

2- Gestionar Alumnos: Dentro de la gestión de alumnos, un ayudante puede

3- Gestionar Videos: Esta funcionalidad incluye: publicar, modificar y eliminar

4- Gestionar documentos: El usuario ayudante podrá subir, modificar, y borrar

5- Editar sección de información: Esta opción incluye publicar dentro del

Cristian Andrés García

6- Editar información de bienvenida y novedades: Estas dos funcionalidades

1- Cerrar período: Terminado un ciclo, un profesor puede dar por finalizado el

2- Visualizar estadísticas: Esta funcionalidad incluye ver los exámenes

3- Definir período de examen: un período de examen indica el día de inicio y fin

4- Gestionar profesores: Dentro del rol de profesor el mismo podrá crear,

5- Visualizar estadísticas de ciclos: Luego del cierre de un período lectivo se

Luego del diseño y siguiendo la metodología “ISE”, el análisis y diseño es volcado en

Cristian Andrés García

2.2.1 Etapas previas a los requerimientos funcionales

En el sistema propuesto son necesarias otras consideraciones previas que por su

1. Servidor con conexión a internet

II. Sistema Operativo