Laboratorio Virtual de Cinematica
Laboratorio Virtual de Cinematica
UNIVERSIDAD DE CÓRDOBA
FACULTAD DE INGENIERÍAS
PROGRAMA DE INGENIERÍA DE SISTEMAS Y TELECOMUNICACIONES
MONTERÍA – COLOMBIA
2015
DISEÑO E IMPLEMENTACIÓN DE UN LABORATORIO VIRTUAL DE
CINEMATICA EN LA UNIVERSIDAD DE CÓRDOBA
Asesor
Ing. DANIEL JOSÉ SALAS ÁLVAREZ
UNIVERSIDAD DE CÓRDOBA
FACULTAD DE INGENIERÍAS
PROGRAMA DE INGENIERÍA DE SISTEMAS Y TELECOMUNICACIONES
MONTERÍA – COLOMBIA
2015
NOTA DE ACEPTACIÓN
______________________________________
______________________________________
______________________________________
______________________________________
______________________________________
______________________________________
___________________________
Firma del presidente del jurado
___________________________
Firma del Jurado
___________________________
Firma del Jurado
DEDICATORIA
Primero y antes que nada, dar gracias a Dios, por estar en cada paso que damos,
por fortalecer nuestros corazones e iluminar nuestras mentes y por haber puesto
en nuestro camino a aquellas personas que han sido nuestro soporte y compañía
durante todo el periodo de estudio.
A nuestras familias, que desde el primer momento nos brindaron y nos brindan
todo el apoyo, colaboración y cariño sin ningún interés, son las personas por las
cuales hoy por hoy podemos afirmar que, jamás nos hemos sentido solos, porque
ellos han estado a nuestro lado cada día durante este proceso. Gracias por haber
compartido el mayor tiempo a nuestro lado, porque en su compañía las cosas
malas se convierten en buenas, la tristeza se transforma en alegría y la soledad
no existe.
The present research has as main objective the development and implementation
of a virtual laboratory at the University of cinematic Córdoba, which can display
the states of the phenomena associated with the movement of bodies, described
from a set of variables taking different values through interaction over time. These
simulations complement the process of learning alternatives offered, because it
stimulates and reaches an understanding of the experiment to acquire a
significant scientific knowledge. Additionally it was used in the designs of the
same web technologies, leveraging the availability at any time and from anywhere
provides internet platforms.
TABLA DE CONTENIDO
TITULO DEL PROYECTO ..................................................................................... 1
1. OBJETIVOS ....................................................................................................... 2
2. INTRODUCCIÓN ............................................................................................... 3
ACTIVIDADES ................................................................................................. 20
7. CONCLUSIONES ............................................................................................ 53
LA ENCUESTA .................................................................................................... 57
............................................................................................................................. 14
Ilustración 16. Diagrama de caso de uso para Asignar vistas de Laboratorios ... 39
estudiante ............................................................................................................. 47
laboratorio ............................................................................................................ 48
1
1. OBJETIVOS
2
2. INTRODUCCIÓN
2.1 AMBIENTACIÓN
El desarrollo de nuevas tecnologías y el avance en las comunicaciones mediante
la implementación de las Tecnologías de la Información y la comunicación (TIC),
han permitido que se desarrollen instrumentos que aportan a la formación de los
nuevos profesionales. La creación de capacitaciones online, e-cursos y tutoriales
virtuales forman parte de la gama de opciones que se encuentra hoy en día
dispuesta para que los estudiantes puedan acceder a la oferta de formación
disponible. Es aquí donde la formación presencial debe observar, como
alternativa de apoyo, las herramientas que los sistemas de comunicación y la
tecnología hacen viables y de cierta manera necesaria.
Ahora bien, para la educación superior en Colombia existen diferentes retos que
van desde la deserción escolar hasta la optimización de los recursos físicos y
humanos que la componen. Es ahí donde las TIC juegan un papel preponderante
al ofrecer alternativas mediante la implementación de sistemas de apoyo al
aprendizaje; en particular en los programas de formación técnica como las
ingenierías, en los que existen prácticas con equipos de laboratorios de Física,
para desarrollar ejercicios de formación que debido a la demanda que este
ejercicio requiere en términos de disposición de plantas físicas e implementos,
hace que las instituciones deban realizar inversiones de alto costo que no
siempre son posibles por aspectos presupuestales.
2.2 PROBLEMÁTICA
4
aproximado de 203 estudiantes. Además sólo existen en la sede principal dos
laboratorios de Movimiento de los cuerpos. Los cuales pasan gran parte del año
ocupados si consideramos que por ser física una de las ciencias básicas, es de
obligación verla por todos los estudiantes de la facultad de Ingeniería, industrial,
ambiental, de sistemas, industrial, de alimentos, la facultad de ciencias básicas
como tal e incluso en la facultad de ciencias de la salud.
Como podemos ver existe una alta demanda por parte de los estudiantes de los
programas de formación académica que requieren el acceso a laboratorios
tradicionales de Física, esta alta demanda algunas veces no puede ser atendida
completamente debido a los siguientes aspectos:
5
2.3. ANTECEDENTES
2.3.1 Contexto internacional
6
1997). Corre sobre varias plataformas y se puede conseguir sin costo para
aplicaciones educativas. Las aplicaciones de DIVE, permiten que varios usuarios
cohabiten un mundo virtual simultáneamente para realizar algún tipo de
interacción. Cada usuario está representado tridimensionalmente mediante un
avatar, de tal forma que, cada usuario puede ver a los demás usuarios.
En la actualidad, Las aplicaciones de DIVE se encuentran disponible en
distribución binaria y sin costo para usos no comerciales, para un número limitado
de plataformas UNIX (Silicon Graphics, Linux, Sun, Hewlett-Packard).
7
Los EVEC, como la mayoría de las demás aplicaciones, también contemplan el
uso de herramientas y técnicas de trabajo cooperativo bajo un contexto
instruccional. El trabajo cooperativo en los EVEC especifica formalmente bajo un
Modelo de Experimentación Cooperativa en donde se considera el uso de
estrategias de trabajo grupal, implementadas en herramientas de comunicación
para grupos de trabajo, aspecto que no está formalmente especificado en algunas
de las aplicaciones estudiadas. El Laboratorio Virtual Cinemática, caso de
estudio de esta tesis, comparado con las aplicaciones de laboratorios
virtuales analizadas en el presente capítulo, reúne la mayor parte de la
características además, permite implementar el trabajo experimental del ambiente
de un laboratorio, mediante el uso de técnicas para la asignación de
comportamientos complejos a los experimentos.
Aunque en el modelo de EVEC, se plantea la interacción grupal distribuida entre
usuarios mediante uso de estrategias de trabajo grupal, implementadas
mediante servicios síncronos y asíncronos, no es posible llevar a cabo
experimentación distribuida.
2.4 JUSTIFICACIÓN
Sin duda alguna con tecnologías como la de realidad virtual, es posible no solo
manipular los experimentos bajo condiciones que no pueden darse en el
laboratorio, sino que también, es posible la interacción, percepción e inmersión,
en un ambiente tridimensional generado por la computadora donde se pueden
manipular parámetros lógicos como el peso o la gravedad, o bien, manejar un
concepto flexible de tiempo.
9
la posibilidad de poder ejecutarlos repetidas veces bajo condiciones que
posiblemente no podrían darse en el laboratorio real.
Es por esto que el presente proyecto se ha adelantado con el ánimo de utilizar las
nuevas herramientas de la tecnología y la información para mejorar los
instrumentos disponibles en el proceso enseñanza – formación.
10
3. MARCO TEÓRICO Y MARCO CONCEPTUAL
11
cuantitativas, es esencial poder establecer relaciones lógicas cuantitativas al
estudiar los sistemas físicos. Las reglas que gobiernan todas estas relaciones son
objeto de las matemáticas. Por eso se dice que la matemática es el lenguaje de la
Física (Melo & Zapata, J, 2013).
3.1.2.1. Características
Tiene mayor disponibilidad de horario, mayor procesamiento de datos, una mayor
disponibilidad de la información de la experimentación y la seguridad es mayor
con respecto a los laboratorios tradicionales (De la Rosa, 2012).
12
Disponibilidad de la Menor Mayor
información
Seguridad Menor Mayor
Tabla 1 Cuadro Comparativo entre Laboratorios: tradicionales y virtuales.
Fuente: (De la Rosa, 2012)
Según (Grimaldi & Rapuano S, 2009), (Torres & Candelas, 2007), (Sánchez,
Rodríguez, Bertogna, Lopez, & Del Castillo, 2007) los componentes de un
laboratorio virtual están conformadas por: sitio de usuario, laboratorio remoto, y
medio de comunicación donde:
a) El sitio de usuario lo conforman los componentes: sistema cliente, usuario,
dispositivos de entrada (teclado, mouse y joystick) y dispositivos de salida
(monitores, transductores y efectores). El cliente es un sistema de cómputo, el
cual, a través de software, despliega una interfaz que permite al usuario, por
medio de los dispositivos de entrada y salida, realizar actividades en el laboratorio
remoto.
b) El laboratorio remoto está constituido por los componentes: servidor,
sensores, mecanismos y dispositivos de control. El servidor es un sistema de
cómputo que ejecuta una aplicación de software que satisface los requerimientos
solicitados por el cliente. Los requerimientos son enviados a través del medio de
comunicación. El servidor tiene conectado los mecanismos y dispositivos de
control que permiten realizar experimentos remotamente y (a través de los
sensores) se recopila la información pertinente para ser enviada, a través del
medio de comunicación, al sistema cliente y proporcionar una retroalimentación al
usuario de lo que está ocurriendo en el experimento, mediante la interfaz gráfica
del cliente.
c) El medio de comunicación es un conjunto de dispositivos de interconexión de
redes para intercambiar el flujo de información entre los sistemas servidor y
cliente.
13
3.1.4. Ventajas y desventajas de los laboratorios virtuales
Ventajas Desventajas
Bueno para el entendimiento de Los datos son idealizados
conceptos Falta de colaboración
No hay restricciones de tiempo ni No hay interacción con equipo
lugar real
Es un medio interactivo
Es de costo bajo
Tabla 2. Resumen principales ventajas y desventajas de cada tipo de laboratorio
Fuente (Nedic, Jan, & Andrew, 2003)
3.2.1. Cinemática
La descripción matemática del movimiento constituye el objeto de una parte de la
física denominada cinemática. Tal descripción se apoya en la definición de una
serie de magnitudes que son características de cada movimiento o de un tipo de
movimiento. Los movimientos más sencillos son los rectilíneos y dentro de estos
los uniformes. Los movimientos circulares son los más simples de los de
trayectoria curva. Unos y otros han sido estudiados desde la antigüedad
ayudando al hombre a forjarse una imagen o representación del mundo físico
(Carrera).
14
Ilustración 1. Gráfica de la velocidad contra el tiempo en MU
Fuente: (Melo & Zapata, J, 2013)
15
Ilustración 3. Montaje laboratorio Real de MU
Fuente: Guía de laboratorio rectilíneo uniforme. Departamento de Física y Electrónica- Universidad de
Córdoba
16
Representación gráfica de la velocidad contra el tiempo para un movimiento
rectilíneo uniformemente acelerado.
𝑣 = 𝑣𝑜 + 𝑎𝑡
𝑎𝑡 2
𝑥 = 𝑣𝑜 𝑡 +
2
𝑣² = 𝑣02 + 2𝑎𝑥
17
4. METODOLOGÍA
18
4.4 . FUENTES DE INFORMACIÓN
Consultas y entrevistas personales con docentes del área de física así como
estudiantes del programa de ingeniería de sistemas y telecomunicaciones de la
universidad de Córdoba.
19
4.5. DESCRIPCIÓN DETALLADA Y ALCANCE DEL CONJUNTO DE
ACTIVIDADES
Cod Descripción de la Alcance de la actividad.
actividad.
1 Análisis de la Investigaciones de campo para la recolección
situación actual. de evidencias de la forma como se realizan
los laboratorios de cinemática en la
universidad y revisión exhaustiva de la
bibliografía relacionada con la temática
2 Análisis de los Determinar cuáles son los requisitos que
requisitos a cumplir. solucionarán la problemática a través de
entrevistas con personal del laboratorio de
física y profesores de esta área en la
universidad
3 Análisis de los Determinar cuáles son los recursos
recursos que se necesarios para el desarrollo del sistema.
utilizaran para la
implementación del
sistema
4 Desarrollo de un Realizar la comparación de lo que se está
documento del haciendo actualmente en los laboratorios
análisis realizado. versus lo que se puede lograr a través de la
plataforma
5 Diseño de la El diseño de la estructura de datos en la cual
estructura de datos se soportará el sistema.
del sistema.
20
7 Desarrollo Inicial de la El desarrollo de un prototipo.
plataforma Elaboración de los recursos de interactividad
usando software y hardware específico.
Integración de los recursos de interactividad
en la versión inicial del programa.
8 Escoger la Elaborar un documento en el cual se describa
metodología para el la metodología de desarrollo de la aplicación.
desarrollo del
Sistema.
Especificación de requisitos.
Diseño del prototipo inicial de la aplicación web.
Para ello en la parte de los diagramas UML se utilizó la herramienta case día.
22
4.6.3. FASE III: Diseño y desarrollo del software
23
4.6.4. FASE IV: Evaluación e Impacto.
24
Ilustración 6. Etapas del ciclo de vida utilizado
Fuente: Elaboración propia
25
5. DISEÑO Y DESARROLLO DEL SISTEMA
26
5.2. REQUERIMIENTOS DEL SISTEMA
27
El sistema será alojado en un hosting que proporcione los servicios de
servidor FTP, servidor SSH, servidor Web (Apache), servidor de bases de
datos (Mysql), panel de control para administrar el dominio y subdominios.
28
Adicionalmente permite a un docente habilitar y deshabilitar a los estudiantes los
diferentes laboratorios que se realizan en la temática de cinemática en el área de
física I.
Se tiene el perfil invitado: Aquel quien entra al sitio web pero no se autentica, los
usuarios registrados son los que se autentican y quienes podrán ver los
laboratorios e interactuar con la plataforma de una manera más profunda y
finalmente se tiene el perfil administrador quien se encarga de gestionar los
aspectos técnicos de la plataforma.
Actor Descripción
Invitado El usuario invitado puede visualizar el
sitio web, y si lo desea puede
registrarse en la plataforma
Finalmente, observamos que cada uno de los actores cumple tareas específicas y
todos tienen como fin el cumplir con un objetivo de Aprendizaje de la mejor
manera posible y aprovechando todas las ventajas de trabajar en una Plataforma
Educativa construida para estos fines (Quisbert, 2010).
30
5.5. DIAGRAMAS DE CASOS DE USO
32
Diagrama de caso de uso para Registrarse en el sistema
33
Nombre del caso de uso Iniciar sesión
Actores Invitado, Estudiante, Docente
administrador
Propósito Autenticarse en la plataforma
Resumen El usuario ingresa con su usuario y
contraseña para autenticarse en la
plataforma.
Precondiciones Haber ingresado al sitio
Flujo principal El usuario da clic en el link para
iniciar sesión, ingresa con su usuario
y contraseña, la plataforma valida la
información y autentica el usuario.
Subflujos ninguno
Excepciones Si el usuario ingresa mal los datos, la
plataforma le devolverá un mensaje
de error.
Tabla 7. Descripción del Caso de uso, Iniciar sesión
34
Nombre del caso de uso Visualizar laboratorios
Actores Estudiante
Propósito Visualizar el laboratorio para realizar
la práctica que ofrece el sistema de
laboratorios virtuales
Resumen El usuario visualiza el laboratorio y
realiza la práctica
Precondiciones Haber iniciado sesión
Flujo principal El usuario busca en la plataforma el
índice de laboratorios, selecciona la
práctica que desee hacer, y da clic
en el enlace para visualizar el
laboratorio.
Subflujos Ninguno
Excepciones Ninguna
Tabla 8. Descripción del Caso de uso, Visualizar laboratorios
Fuente (Bernal, 2011)
35
Nombre del Caso de uso Realizar simulación
Actores Estudiante
Propósito Visualizar las simulaciones que
ofrece el sistema de laboratorios
virtuales y obtener los resultados de
la simulación
Resumen El usuario visualiza la simulación
seleccionada y obtiene resultados
Precondiciones Haber iniciado sesión
Flujo principal El usuario busca en la plataforma la
simulación deseado, selecciona la
que desea ver, y da clic en el enlace
para v empezar la simulación.
Subflujos Ninguno
Excepciones Ninguna
Tabla 9. Descripción del Caso de uso, Realizar simulación
Fuente (Bernal, 2011) y propia
36
Nombre del Caso de uso Administrar usuarios
Actores Administrador
Excepciones ninguna
37
Diagrama de caso de uso para Gestionar preguntas
38
Diagrama de caso de uso para Asignar vistas de Laboratorios
42
5.8. MODELO RELACIONAL
Con el fin de establecer las relaciones o conexiones entre los datos que están
guardados en tablas, y a través de dichas conexiones relacionar los datos entre
tablas, se ha creado el siguiente modelo relacional
43
5.9. DIAGRAMA DE CLASES
44
5.10. DIAGRAMAS DE SECUENCIA
45
Diagrama de secuencia para iniciar Sesión en el sistema
Ilustración 19. Diagrama de secuencia iniciar sesión, actor usuario registrado (Estudiante,
Administrador, Docente)
46
Diagrama de secuencia para realizar simulación del laboratorio
47
En el siguiente diagrama se ilustra la secuencia a seguir por el usuario
(administrador) para actualizar o modificar la estructura de un laboratorio.
48
5.11 TECNOLOGÍAS IMPLEMENTADAS EN KINEMATICS LAB
En cuanto a la parte del modelo se utilizó gestión de base de datos utilizando php
y mysql la cual tiene los siguientes beneficios.
49
Prepared statements: aparte de ser más cómodo a la hora de montar nuestras
querys, ofrece mucha seguridad contra el SQL injected.
Conexiones seguras: la posibilidad de usar mysqli_ssl_set() permite realizar
conexiones seguras indicando detalles del certificado mediante los parámetros.
Múltiples querys: posibilidad de ejecutar varias querys separadas por punto y
coma, en una conexión.
Interfaz orientado a objetos: esta característica permite al desarrollador ampliar
el objeto para añadir nuevas funcionalidades más específicas. Por ejemplo se
podrían separar los errores de operación (conexión) a los de desarrollo (querys
mal formadas).
Por su parte para la vista de la página se utilizó código en html (HyperText
Markup Language o lenguaje de marcas de hipertexto) y para su estilización se
utilizó el framework de diseño basado en los estándares creados por google para
material desing el cual es un lenguaje de diseño que combina los principios
clásicos del diseño exitoso junto con la innovación y la tecnología. El objetivo de
Google consiste en desarrollar un sistema de diseño que permite una experiencia
de usuario unificada a través de todos sus productos en cualquier plataforma esta
forma de diseño fue lanzada en el sistema operativo android 5.0.
50
para la creación de las simulaciones se utilizó el programa
adobe edge anímate (catalogado como el sucesor de la flash)
el cual es una herramienta nueva de diseño interactivo y
movimiento web que permite a los diseñadores introducir
contenido animado en sitios web utilizando estándares web
tales como HTML5, JavaScript y CSS3.
Debido al uso de esta herramienta se permitió introducir código externo
JavaScript para ejecutar las funciones que se realizan en cada una de las
simulaciones agregar funciones como drag & drop entre otras.
51
6. EVOLUCIÓN DEL LABORATORIO VIRTUAL DE CINEMÁTICA
53
Referencias Bibliográficas
Anderson, M., Carlsson, C., & Hagsand, O. &. (1997). "DIVE, The "Distributed
URL:http://www.crg.cs.nott.ac.uk/research/system/MASSIVE-2/.
http://ribuc.ucp.edu.co:8080/jspui/bitstream/handle/10785/946/completo.pdf
?sequence=1.
http://posgrado.itlp.edu.mx/uploads/514233b703742.pdf.
Grimaldi, D., & Rapuano S. (2009). Hardware and Software to Design Virtual
Multimedia, string.
54
Armada (UNEFA), extension Acarigua-Estado Portuguesa. Proyecto de
Johnson, A., Roussos, M., Liehg, J., Vasilakis, C., & Barnes C. & Moher, T.
modulo7.blogspot.com.co/2012/05/ciclo-de-vida-orientado-objetos-vs.html
Nedic, Z., Jan, M., & Andrew, N. (2003). “Remote Laboratories Versus Virtual and
Conference.
http://www.apple.com/es/education/aua/aua0101/applets.html.
Sánchez, L., Rodríguez, J., Bertogna, L., Lopez, L., & Del Castillo, R. (2007).
http://seadiuncoma.files.wordpress.com/2010/02/sanchez.pdf.
Torres, F., & Candelas, F. (2007). Laboratorio Virtual Remoto para la Enseñanza
de Robótica [Online].
55
http://rua.ua.es/dspace/bitstream/10045/2250/1/CandelasPNLaboratorio_Vi
rtual_Remoto_para_la_Ensenanza_de_Roboti.
Treftz, H., Cardona, F., Correa, C. D., González, M. Á., & Restrepo, J. &. (1998).
https://es.wikipedia.org/wiki/PhpMyAdmin
56
ANEXO A. RESUMEN DE RESPUESTAS EN GRÁFICOS PORCENTUALES DE
LA ENCUESTA
17-30 (85%)
41-50 (15%)
31-40
Más de 50
Buena
Muy buena
Regular
Mala
57
4. ¿Consideras que la modalidad virtual ha facilitado tu proceso de
aprendizaje de la materia?
58
Dificultades de adaptación al nuevo contexto (34.2%)
Laboratorio virtual
Videoconferencias
Vídeos
videos otros
Videoconfer 8% 3%
encias
2%
Foros de
discusión Laboratorio
26% virtual
56%
59
8. ¿Consideras que el entorno virtual ha facilitado el contacto con tus
profesores y con tus compañeros? ¿Por qué?
Si
No
Otro
Movimiento
rectilíneo
uniforme(MRU)
Caída Libre 27%
34%
Movimiento
Rectilíneo
Uniformemente
Acelerado
(MRUA)
34%
60
ANEXO B. SCRIPT DE LA BASE DE DATOS
61
CREATE TABLE `respuestas` (
`id_respuesta` int(5) UNSIGNED NOT NULL,
`respuesta` text COLLATE utf8_unicode_ci NOT NULL,
`fecha` date NOT NULL,
`id_pregunta` int(5) UNSIGNED NOT NULL,
`id_usuario` int(10) UNSIGNED NOT NULL
)
62
`d2` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`d3` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`t1` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`t2` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`t3` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`resultado` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`nota` varchar(10) COLLATE utf8_spanish2_ci NOT NULL
)
63
`t1` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`t2` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`t3` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`t4` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`resultado_vel` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`resultado_ace` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`nota` varchar(10) COLLATE utf8_spanish2_ci NOT NULL
)
CREATE TABLE `laboratorio4` (
`id_laboratorio4` int(11) NOT NULL,
`id_persona` int(11) NOT NULL,
`a1` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`a2` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`a3` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`t1` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`t2` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`t3` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`resultado_vel` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`resultado_per` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`resultado_fre` varchar(10) COLLATE utf8_spanish2_ci NOT NULL,
`nota` varchar(10) COLLATE utf8_spanish2_ci NOT NULL
)
64
ANEXO C. INTERFAZ DE LA APP WEB A NIVEL DE DISEÑO (CÓDIGO)
Index.php
<!DOCTYPE html>
<html>
<head>
<!--Import materialize.css-->
media="screen,projection"/>
media="screen,projection"/>
<title>KinematicsLab</title>
maximum-scale=1.0, user-scalable=no"/>
<meta charset="utf-8">
<style type="text/css">
.titulo{
text-transform: capitalize;
</style>
</head>
65
<body >
<div class="container">
</div>
<?php
require_once 'modelos/config.php';
require_once 'vistas/nav.php';
if(isset($_SESSION['logueo'])){
if(!$_SESSION['logueo']){
require_once 'vistas/errorlogin.html';
}else{
unset($_SESSION['logueo']);
require_once 'controladores/CLogin.php';
require_once 'controladores/CPreguntas.php';
require_once 'controladores/CPersonas.php';
require_once 'routes.php';
?>
</div>
66
<!-- Teal page content -->
</div>
</div>
<?php
if(!isset($_GET['request'])){
<div class='foro'>
<div class='forodos'>";
CPreguntas::cargarPreguntas(true);
echo "</div></div></div>";
require_once 'vistas/inicio.html';
}else{
FILTER_SANITIZE_STRING);
if($ruta == 'iniciar'){
require_once 'vistas/f_iniciar.html';
}elseif($ruta == 'registrarse'){
require_once 'vistas/agregarpersona.html';
isset($_POST['s_apellido'])
67
&& isset($_POST['usuario']) &&
isset($_POST['contrasena'])){
CPersonas::agregarpersona(2);
?>
<script type="text/javascript">
$( document ).ready(function(){
$(".button-collapse").sideNav();
$('.parallax').parallax();
$('.modal-trigger').leanModal();
});
</script>
</body>
</html>
68
Simulación de laboratorio. Ejemplo laboratorio de movimiento uniforme
acelerado (laboratorio2)
Archivo vistas/laboratorio2.php
Archivo animaciones/f2mrua/edgeAction.js
(function($,Edge,compId){var
Composition=Edge.Composition,Symbol=Edge.Symbol;
(function(symbolName){})("stage");
//=========================================================
(function(symbolName){Symbol.bindTriggerAction(compId,symbolName,"Default
Timeline",0,function(sym,e){sym.stop();});
Symbol.bindTriggerAction(compId,symbolName,"Default
Timeline",500,function(sym,e){sym.stop();});
Symbol.bindTriggerAction(compId,symbolName,"Default
Timeline",1000,function(sym,e){sym.stop();});
69
Symbol.bindElementAction(compId,symbolName,"${_v0t}","mouseover",function(s
ym,e){sym.play("sobre");});
Symbol.bindElementAction(compId,symbolName,"${_v0t}","mouseout",function(sy
m,e){sym.play("fuera");});
})("v0t");
//=========================================================
(function(symbolName){Symbol.bindTriggerAction(compId,symbolName,"Default
Timeline",0,function(sym,e){sym.stop();});
Symbol.bindTriggerAction(compId,symbolName,"Default
Timeline",500,function(sym,e){sym.stop();});
Symbol.bindTriggerAction(compId,symbolName,"Default
Timeline",1000,function(sym,e){sym.stop();});
Symbol.bindElementAction(compId,symbolName,"${__2Copy}","mouseover",functi
on(sym,e){sym.play("sobre");});
70
//Edge binding end
Symbol.bindElementAction(compId,symbolName,"${__2Copy}","mouseout",functio
n(sym,e){sym.play("fuera");});
Symbol.bindElementAction(compId,symbolName,"${__2}","mouseover",function(s
ym,e){sym.play("sobre");});
Symbol.bindElementAction(compId,symbolName,"${__2}","mouseout",function(sy
m,e){sym.play("fuera");});
Symbol.bindElementAction(compId,symbolName,"${_at}","mouseover",function(sy
m,e){sym.play("sobre");});
Symbol.bindElementAction(compId,symbolName,"${_at}","mouseout",function(sy
m,e){sym.play("fuera");});
})("at2");
//=========================================================
71
(function(symbolName){Symbol.bindTriggerAction(compId,symbolName,"Default
Timeline",0,function(sym,e){sym.stop();});
Symbol.bindTriggerAction(compId,symbolName,"Default
Timeline",500,function(sym,e){sym.stop();});
Symbol.bindTriggerAction(compId,symbolName,"Default
Timeline",1000,function(sym,e){sym.stop();});
Symbol.bindElementAction(compId,symbolName,"${_x}","mouseover",function(sy
m,e){sym.play("sobre");});
Symbol.bindElementAction(compId,symbolName,"${_x}","mouseout",function(sym
,e){sym.play("fuera");});
})("distancia");
})(jQuery,AdobeEdge,"EDGE-6309995");
72
ANEXO D. MANUAL DE USUARIO
¡Entremos en materia!
Al entrar a KINEMACTICS LAB nos encontramos con una página web
estructurada de la siguiente manera
Menú: al ingresar a KINEMACTICS LAB encontramos un menú con dos
74
Menú
Si no estás registrado y quieres hacerlo como usuario de tipo estudiante puedes
hacerlo dando clic en la opción registrarme una vez presionamos clic allí nos
aparecerá una pantalla similar a esta
Una vez aquí podrás llenar
los datos para completar tu
inscripción en la página
Tipos de usuario
KINEMATICS LAB cuenta con menús diferentes de acuerdo al rol que cumpla el
usuario dentro del sitio estos roles son
Administrador
Docente
75
Estudiante
Listar preguntas
en esta opción se lista edita y/o
elimina las preguntas o temas de
conversación formuladas en el foro
76
Agregar docentes
La única forma de agregar un nuevo
docente es por medio de esta
opción.
Listar docentes
Esta opción sirve para listar y/o
eliminar docentes
Listar estudiantes
Esta opción sirve para listar y/o
eliminar estudiantes
Asignar vistas
Asignar las páginas que verán los
estudiantes
Docente
77
KINEMATICS LAB posee tantas cuentas de tipo docente como el administrador
registre en el sitio y estas cuentas poseen los siguientes privilegios.
Agregar preguntas
La cual da acceso a la siguiente pantalla.
Aquí se agrega preguntas o temas de
conversación al foro
Listar preguntas
en esta opción se lista edita y/o
elimina las preguntas o temas de
conversación formuladas en el foro
Listar estudiantes
Esta opción sirve para listar y/o
eliminar estudiantes
78
Asignar vistas
Asignar las páginas que verán los
estudiantes
Calificar laboratorio
Calificar laboratorio realizado por
estudiante
Estudiantes
Para finalizar KINEMATICS LAB posee las cuentas de tipo estudiantes estos a
diferencia de los demás usuarios no pueden controlar privilegios de otros
usuarios solamente pueden ver los que los docentes o el administrador habiliten.
Su menú aparece de la siguiente forma
79
Dando clic en cada uno de los enlaces el estudiante tendrá acceso a los
laboratorios respectivos de cada tema dentro de estos encontraremos siempre la
mismo estructura.
Concepto: aquí se encontrara una definición de cada
uno de los temas abarcados en las simulaciones
Formulas: en este vínculo se mostrara las fórmulas
que se aplican en cada uno de los laboratorios de
cinemática de una manera interactiva
Guías: en este vínculo se encuentra una explicación
de cómo se hace el montaje real para el laboratorio y
se da una guía de cómo utilizar la simulación
Simulación: en este apartado de la página se
presenta al usuario la simulación realizada para cada
laboratorio cabe anotar que estas simulaciones son
hechas en base a casos cotidianos en los que se
presentarían cada uno de estos movimientos
cinemáticos.
80
Evaluación: se capturan los datos obtenidos en a simulación y el resultado de la
operación que se le indica al estudiante por medio de un formulario la calificación
es dada dentro de la página.
81
Ilustración 23. Presentación de la app a estudiantes de Ingeniería de sistemas sede Lorica
Fuente: Archivo personal
82
Ilustración 25. Estudiante probando la plataforma
Fuente: archivo personal
83