1
PEDAGOGÍA INVERSA O FLIPPED CLASSROOM EN
PROGRAMACION DE COMPUTADORES.
INVESTED PEDAGOGY OR FLIPPED CLASSROOM IN
COMPUTER PROGRAMMING.
Mario Dustano Contreras Castro1
Gustavo Armando Rivera Sánchez2
Resumen
En los cursos de programación de
computadores de la Fundación Universidad
Autónoma de Colombia se da solución a
problemas concretos mediante el uso de
pensamiento computacional. Entendiendo por
“problema” un amplio espectro de situaciones,
desde ejecutar las operaciones aritméticas-
lógicas elementales, hasta simular actividades
de organizaciones (nomina, inventario, etc.).
La programación de computadores inicia con la
lógica de programación (pensamiento
computacional), luego, lenguajes de
programación (léxico, morfología, sintaxis),
para así, continuar con paradigmas de
programación (estructurada, modular,
orientadas a objetos) como su aplicación (en
máquina, web, nube, celulares).
La oportunidad de uso de las aulas virtuales en
el ámbito de la formación, y más
específicamente, del aprendizaje, como
también, el reflexionar sobre aspectos
metodológicos y búsqueda constante de
implementar técnicas instructivas para el
desarrollo material, como objetos de
aprendizaje, con lleva a la pregunta ¿Cómo
transferir el trabajo de determinados procesos
de aprendizaje de programación de
computadores fuera del aula presencial y
utilizar el tiempo de clase, junto con la
1
Ingeniero de Sistemas. Especialista en Multimedia Educativa.
Cursando Maestría en Edumatica. Docente de Tiempo
Completo, Programa Ingeniería en Informática, Facultad de
Ciencia y Tecnologías, VUAD, Universidad Santo Tomas Sede
Bogotá, mariocontreras@ustadistancia.edu.co. Docente cátedra
programa Ingeniería de Sistemas, Universidad Autónoma de
Colombia, mario.contreras@fuac.edu.co
experiencia del docente, para facilitar otros
procesos de práctica productiva que potencien
las competencias de lógica?
El modelo pedagógico Flipped Classroom,
permite transferir el trabajo de determinados
procesos de aprendizaje fuera de la clase
presencial y utilizar el tiempo de clase, junto
con la experiencia del docente, para facilitar
otros procesos de práctica productiva que
potencien las competencias de desarrollo de
proyectos por parte del estudiante. Con este
antecedente, se formulan las preguntas
¿Cómo elaborar una propuesta para la
enseñanza de la programación de
computadores utilizando el modelo pedagógico
Flipped Classroom o Aula Invertida en la
Facultad de Ingeniería de la Universidad
Autónoma de Colombia?
¿Cuál es el aporte de la metodología
Edumática (Análisis, Diseño e Desarrollo) para
la implantación de Flipped Classroom en un
curso de JavaScript en el área de
Programación de Computadores de la
Universidad Autónoma de Colombia?
Palabras claves: Clase Invertida,
Edumatica, Programación de
2
Ingeniero de Sistemas. Especialista en Auditoria de Sistemas y
Redes de Telecomunicaciones. Magister en Telemática e
Informática Aplicada a la Educación. Cursando Doctorado en
Educación. Profesor investigador de la Universidad Autónoma de
Colombia. gustavo.rivera@fuac.edu.co

Computadores, javascript, lógica de
programación, lenguajes de programación.
Summary - In the computer programming
courses of the Autonomous University, concrete
problems are solved through the use of
computational thinking. Understanding
"problem" a wide range of situations, from
executing elementary arithmetic-logical
operations to simulating activities of
organizations (payroll, inventory, etc.). The
programming of computers starts with the
programming logic (computational thinking), then
programming languages (lexicon, morphology,
syntax), in order to continue with programming
paradigms (structured, modular, object oriented)
as its application Machine, web, cloud, cell
phones).
The opportunity to use virtual classrooms in
the field of training, and more specifically,
learning, as well as the reflection on
methodological aspects and constant search to
implement instructional techniques for material
development as learning objects leads to the
question How to transfer the work of certain
Computer Programming learning processes
outside the classroom and use the class time,
together with the Experience of the teacher, to
facilitate other processes of productive practice
that enhance the skills of logic and computer
programming within the classroom?
The Flipped Classroom pedagogical model
allows the transfer of the work of certain learning
processes outside the classroom and use the
class time, together with the teacher's
experience, to facilitate other processes of
productive practice that enhance the
competencies of the development of projects of
student. With this background, the questions are
asked ¿How to elaborate a proposal for the
teaching of computer programming using the
pedagogical model "Flipped Classroom" or
"inverted classroom" in the Faculty of
Engineering of the Autonoma University?
¿What is the contribution of the Edumática
methodology (Analysis, Design and
Development) for the implementation of Flipped
Classroom in a JavaScript course in the
Computer Programming area of the Autonomous
University of Colombia?
2
Keywords: Inverted Class, Edumatics,
Computer Programming, javascript,
programming logic, programming
languages.
1. INTRODUCCION
El carácter eminentemente social, cultural y
tecnológico del proceso de resolución de
problemas de programación de
computadores, junto a la complejidad y
dificultades detectadas en su enseñanza, han
contribuido a despertar la preocupación por el
estudio de los procesos de comunicación,
transmisión y comprensión en cuatro
momentos o experiencias para cuatro
espacios académicos de programación de
computadores de la Facultad de Ingeniería de
la Universidad Autónoma de Colombia:
• El primer momento de Lógica de
Programación de Computadores: Desarrollo
de buenas prácticas de Algoritmos mediante
Autómatas de Estado Finito, como uso de
herramientas como PSeInt y DFD ante
dificultades en la Teoría de Conjuntos, Series
y Resolución de Problemas Lógicos, cuyo
origen posiblemente se da en la Educación
Básica y Media.
• El Segundo Momento de Lenguajes de
Programación: El aprendizaje de un lenguaje
de programación, según la experiencia del
docente, comparable con el aprendizaje de la
lengua materna, pero con diferencias, porque
se orienta hacia un lenguaje artificial, donde
su léxico y morfología establecen formas
normales similares al lenguaje natural, o sea,
el español, pero se diferencia, en la sintaxis y
semántica del mismo.
• El Tercer Momento de Paradigma de
Programación: Se orienta hacia el paradigma
de Programación Orientada a Objetos
teniendo presente que previamente se han
desarrollado dos Paradigmas, a saber,
Programación Modular y Estructurada.
• El Cuarto Momento de Lenguaje de
Programación JavaScript: Desarrollo de un
Libro a partir de la experiencia.
 3

2. REFERENTES Tabla 1. Autómatas de Ciclo Finito.

Primer Referente. Programación de
Computadores.
La lógica de programación se debe materializar
mediante Algoritmos (Contreras M. D., Apuntes
de clase, 2016). Algoritmos, es un conjunto
finito de pasos, los cuales presentan una
secuencia ordenada de operaciones, para
resolver un tipo específico de problema.
En la construcción de un algoritmo se deben
tener en cuenta las siguientes características:
• Finito: Un algoritmo debe terminar
siempre después de un número finito de pasos;
no existiendo, restricciones en la cantidad de
pasos (mínimos o máximos).
• Definido: Cada paso debe ser definido
de una manera precisa (antes o después de),
permitiendo ejecutarse de una manera
rigurosamente específica, no permitiendo
ambigüedad
• Entrada: Son los valores necesarios
para la solución del problema.
• Salida: Es el resultado de la solución del
Figura 3. Autómata de Ciclo Finito Anidados. Fuente
problema. Propia.
• Efectividad: Que cumpla con el objetivo
a resolver o solucionar del problema.
Se debe hacer uso de la representación de
estructuras condicionales, cíclicas finitas,
cíclicas bajo condición de salida (CP), como de
selección, mediante árboles como autómatas.

Figura 1. Árbol de Condición. Fuente Propia

Figura 4. Autómata de Ciclo Mientras Que. Fuente Propia.

Tabla 2. Autómatas de Ciclo Mientras Que.

Figura 2. Autómata de Ciclo Finito. Fuente Propia

 4

Estructura Léxica: La tarea fundamental de

esta estructura es agrupar una serie de
símbolos (vocabulario) de acuerdo a su tipo:

Figura 5. Autómata de Ciclo Repita Hasta Que. Fuente

Propia.
Tabla 3. Autómatas de Ciclo Repita Hasta
Que.
Figura 7. Naturaleza de los Símbolos. Fuente Aula Virtual
Lenguajes de Programación FUAC.
La suma o concatenación de símbolos
constituye un elemento léxico (token), de
acuerdo a su naturaleza: operando u
operadores. Los operandos pueden ser:
números, palabras reservadas, nombre de
variables o nombres de clases. Los operadores
pueden ser: aritméticos, lógicos, de relación,
puntuación o bloques; y adjuntar una marca de
naturaleza.

Figura 6. Autómata Dependiendo de. Fuente Propia.

Se hace necesario probar el funcionamiento de

los algoritmos con herramientas como PSeInt o
DFD, se debe convertir el pseudocódigo en
símbolos (léxico), tokens (reglas morfológicas)
y reglas de uso (sintaxis y semántica), que
Figura 8. Tokens. Fuente Aula Virtual Lenguajes de
permiten a las personas "comunicarse" con las Programación FUAC.
computadoras.
 5

Estructura Sintáctica: La tarea fundamental

es identificar estructuras de programa,
denominadas sentencias (instrucciones,
declaraciones, expresiones, etc.), haciendo
uso de elementos léxicos (Tokens).

Figura 10. Semántica. Fuente Aula Virtual Lenguajes de

Programación FUAC

Para la exploración como el aprendizaje de un

lenguaje de programación se puede hacer uso
de Diagramas de Conway como de Notación
Formal.
Figura 9. Sintaxis. Fuente Aula Virtual Lenguajes de
Programación FUAC.
Las Tareas a desarrollarse en la estructura
sintáctica son las siguientes:
• Tarea Parsing: Búsqueda de Palabras
Reservadas como de símbolos representativos
dentro de una sentencia.
• Tarea Naturaleza: De acuerdo con el
parsing se determina la naturaleza de la
sentencia (enunciado de programa,
declaración, cuerpo de programa, bloque de
sentencias, etc.).
• Tarea de Autómatas Sintácticos: Se
analiza la secuencia de elementos léxicos
(tokens), dentro de una sentencia (reglas
basadas en gramáticas formales –autómatas-).
Estructura Semántica: Las tareas a desarrollar
son:
1. Tabla de Variables según el ambiente y
propósito.
2. Tablas de Métodos según su
encabezado y propósito.
3. Tablas de estructuras.
4. Tablas de Clases.
Figura 11. Diagramas Conway. Fuente Aula Virtual
Lenguajes de Programación FUAC.

Lenguaje de Programación JavaScript
(Contreras, 2016) es lo que se conoce como
lenguaje script, es decir, se trata de código de
programación que se inserta dentro de un
documento. JavaScript fue desarrollado por la
empresa Netscape con la idea de potenciar la
creación de páginas Web dinámicas para su
navegador Navigator.
El código en Java se debe compilar (convertir
en instrucciones del computador) y entonces
podrá ser utilizado por los navegadores (son
los famosas Applets). Sin embargo, JavaScript
es interpretado directamente por el navegador;
de hecho, el código JavaScript se incrusta
dentro del código HTML de la página.
Figura 12. Tabla de Contenido Libro Apuntes de JavaScript.
6
Segundo Referente. Aula invertida o Flipped
ClassRoom.
La diferencia propuesta en el Aula Invertida, es
el uso de tecnología multimedia (video
conferencias y presentaciones), para acceder
al material de apoyo fuera del aula, lo cual la
clasifica dentro de los modelos mediados por
tecnología. En 2012, el modelo fue
popularizado por Bergmann y Sams
(Bergmann, 2014), denominándolo flipped
classroom model (FCM) o aula volteada, en
este documento se referirá al modelo como
aula invertida o aula volteada, debido a que
ambas acepciones son válidas. Esta propuesta
no fue fundamentada en la teoría de la
educación o en investigación previa, debido a
que, durante su implementación, se realizaron
ajustes sustentados en factores tales como:
Abarcar los diferentes estilos de aprendizaje
del estudiantado, promover un ritmo individual
de avance y desarrollar habilidades de
aprendizaje auto-dirigido.
En Europa, desde el año 2014 se viene
realizando WorkShop de Flipped Classroom,
donde se aborda esta metodología desde un
punto de vista multidisciplinar con
conferencias, además, se realizan talleres por
parte de docentes de diferentes áreas, a saber,
Ciencias de la Actividad Física y el Deporte,
Ciencias de la Salud y Ciencias Sociales.
Tercer Referente. Dominio Material de un
Espacio Académico.
Desde el punto de vista aprendizaje
significativo, un espacio académico debe ser
visto como un elemento o eslabón de una
cadena donde el enlace de entrada son
aprendizajes previos (competencias o
conceptos), el núcleo son los conceptos a tratar
(a partir de los objetos) y el enlace de salida es
la preparación para aprendizajes posteriores.
El dominio material de un espacio académico
se define como: Una serie de objetos
(conocimiento, formación, estudio) sobre los
cuales trata un espacio académico.

Tabla 3. Dominio Material de un Espacio
Académico.
Relación entre Dominio Material de un Espacio
Académico y Planteamiento del Tema en
Análisis Edumàtico.
a) El tema como resultado de plantear
como Solución de una deficiencia o
satisfacción de una necesidad
b) Delimitación del Tema.
7
Tabla 4. Tabla de Dominio Material del Tema.
Fuente Propia.
c) Se presenta la tabla de medios como:
Tabla 5. Tabla de Medios. Fuente Propia.
El Tema se presenta inicialmente como un
Dominio Material que establece la relación
entre el objeto de conocimiento y el objeto de
estudio con su ámbito conceptual ante sus
medios de presentación.

Tabla 6. Tabla de Dominio Material. Fuente
Propia.
Después, el tema se presenta como el
Dominio de Aplicación, como la relación entre
las actividades y los medios a hacer
utilizados.
Tabla 7. Tabla de Dominio de la Aplicación.
Fuente Propia.
Por último, se Normaliza cada objeto
(Conocimiento, Formación, y de estudio)
como Componente
Cuarto Referente Arquitectura del Sistema
Edumàtico.
La arquitectura del sistema Edumàtico es un
conjunto de capas que proporcionan un marco
de referencia necesario para guiar la
construcción del software Edumàtico,
permitiendo a los diseñadores Edumàticos
compartir una misma línea de trabajo y cubrir
todos los objetivos y restricciones del software
Edumàtico. Se considerada el nivel más alto en
el diseño de la arquitectura de un sistema,
puesto que establece la estructura,
funcionamiento e interacción entre las partes
del software. Las capas establecidas en la
arquitectura de un software Edumàtico son:
capa de contenido (componentes de
conocimiento, formación, estudio y menú),
capa de presentación (componentes portadas,
8
bienvenida, tabla de contenido), capa de
ayuda.
Navegación en un Sistema Edumàtico. La
navegación manifiesta la manera como el
diseñador desea que la población objetivo o
usuario aprenda el tema.
Navegación Lineal: Donde el Usuario navega
de manera secuencial hacia adelante o hacia
atrás. Puede ser de dos tipos, Unidireccional
la secuencia de la presentación va en una
sola dirección (siempre adelante), y
Bidireccional la secuencia de la presentación
va en dos sentidos (hacia adelante y atrás).
Figura 13. Navegación Lineal. Fuente Propia.
Navegación No Lineal: Para este tipo de
navegación se debe establecer unos botones
o un área sensible IR A. Usado para los
Niveles de Ayuda; estando en una sección
del proyecto se va al nivel de ayuda, y una
vez cerrado este nivel se retorna a la sección
donde se hizo el llamado.
Figura 14. Navegación No Lineal. Fuente Propia.
Navegación Jerárquica: Se visualiza un
Menú para que se seleccione y se desarrolle el
ítem que se desea navegar y aprender
(Opción).
Figura 15. Navegación Jerárquica. Fuente Propia.

Elementos de la Navegación
- Enlace. Puede ser de Tres tipos:
EL. Enlace Lineal (Navegación Lineal)
EJ. Enlace Jerárquico (Navegación
Jerárquica)
ENIR. Enlace NIR (No Lineal Con Retorno)
- Medio de Acción. Puede ser:
MM. Medio de Acción Menú
MH. Medio de Acción HiperMedia
MB. Medio de Acción Botón
MI. Medio de Acción Icono
MT. Medio de Acción Tiempo
Representación de la Navegación: Para
poder representar la navegación entre los
diferentes componentes del proyecto es
necesario una tabla, donde las filas
representan el origen (desde) de la
navegación y las columnas representan el
destino (hasta). Además, en la intersección
del origen y el destino se colocan los
elementos de la navegación así:
Enlace/Medio de Acción.
Figura 16. Ejemplo de Navegación Lineal. Fuente Propia.
9
3. DISEÑO METODOLOGICO
¿Qué es el Espacio Académico?
El espacio académico debe ser visto como un
elemento o eslabón de una cadena donde el
enlace de entrada son conocimientos previos
(competencias o conceptos), el ámbito
conceptual son los conceptos a tratar (a partir
de los objetos de conocimiento y de formación)
y el enlace de salida es la preparación para
aprendizajes posteriores.
Figura 17. Espacio Academico. Fuente Propia
¿Qué es el Aula Virtual?
El aula virtual es una estructura que integra los
momentos (el docente establece lo que sucede
o lo que se realiza) donde el estudiante debe
aprender (por descubrimiento, profundización y
aplicación), bajo unas condiciones (iniciales,
de desarrollo y al terminar el curso) que se
deben cumplir, como también, la presentación
de los conceptos (previos, a desarrollar y
generados).
 10

Tabla 8. Aula Virtual como Integración de • Un rol de mayor autonomía y

Momentos, Condiciones y Conceptos. capacidad de autorregulación en el proceso
de su propio aprendizaje (trabajo
independiente).

Selección de la Experiencia Flliped o Aula

Invertida
1 Identificación de Población Objetivo.
Semestre: Quinto
Nombre de Espacio Académico: Estructuras
de Programación 2.
Programa: Ingeniería de Sistemas
Facultad: Ingeniería
Institución: Universidad Autónoma de
Colombia
Periodo: 2 2016

Figura 18. Listado de Asistencia Estructuras de

Programación 2. Fuente Propia.
2 Identificación del Aula Virtual
Nombre del Aula: Estructuras de
Para cumplir con el modelo Flipped o Aula
Programación 2
Invertida en los espacios académicos, el
Dominio: http://www.isp.fuac.edu.co/
docente debe, proveer aulas virtuales con:
Sección: Lenguaje JavaScript – Referente
• Teoría (desarrollo de documentos
Jquery.
digitales en PDF o Word), Prácticas
(desarrollo de documentos digitales en PDF o
Word), simulaciones (animaciones).
• Ejercicios para desarrollar en clase en
forma individual o en grupo.
• Evaluaciones en línea para establecer
un diagnóstico del estudiante ante un tema
(actitud y aptitud hacia o desde su
aprendizaje) y hacia donde debe ser dirigido
su conocimiento (básico, actual y tendencia).
De los estudiantes se espera:
• Crear su ambiente de apoyo y mayor
Figura 19. Sección Lenguaje JavaScript – Referente Jquery.
profundidad en el aula de clase tanto Fuente Propia.
individual como grupal (trabajo cooperativo y
colaborativo).

Figura 20. Manuales Java Script.
Fuente Propia.
Figura 21. Tabla Contenido Documento Javascript.pdf
Fuente Propia.
Figura 21. Animación de Editor Libre de JavaScript.
Fuente Propia.
11
Planteamiento de Hipótesis
Hipotesis General: Flipped es un proceso de
autonomía de lectura de contenidos
(conceptos y paradigmas de programación de
computadores) en un ambiente controlado por
Aulas Virtuales (conjunto de recursos y
actividades) con problemas planteados y
correlación de desarrollo de prácticas para su
solución bajo la supervisión y orientación del
docente de manera presencial, para que así, el
estudiante construya y sea protagonista de su
propio aprendizaje.
Figura 22. Hipótesis General.
Fuente Propia.
Hipótesis Lenguaje JavaScript: Flipped en
un ambiente controlado por Aulas Virtuales
(con actividades y contenidos de estructuras y
de lenguaje de programación, así también,
con paradigmas de programación
estructurada, modular y orientada a objetos)
con problemas planteados y correlación de
desarrollo de prácticas para su solución bajo
la supervisión y orientación del docente de
manera presencial, para que así, el estudiante
se enfrente a la elaboración de aplicaciones
de software en ambiente personal como Web.
Figura 23. Hipótesis JavaScript.
Fuente Propia.

4. ANALISIS Y DISEÑO
EDUMÀTICO
4.1 Descripción del Sistema Actual
4.1.1 Descripción del Estado Actual
a) Recursos Informáticos y Didácticos
Recursos Informáticos: Manuales en
Documentos pdf
Recursos Didácticos: Animación del uso de
editor javascript
b) Método de Seguimiento de Contenidos:
Ninguno
c) Método de Evaluación de Aprendizaje:
Evaluación en Línea
4.1.2 La situación Problémica
Se requiere de Material Didáctico (Necesidad
por Demanda) del Lenguaje de Programación
JavaScript (JS). Este Material Didáctico debe
poseer actividades y contenidos como:
estructuras de programación, paradigmas de
programación estructurada, modular y e)
orientada a objetos, como también, ambiente
WEB como Personal.
4.1.3 Recolección de Información
Se delimita el área de acción al espacio
académico Programación de Computadores 2
del programa de Ingeniería de Sistemas de la
Universidad Autónoma de Colombia.
Tabla 8. Cadena Conceptual JavaScript
(JS)
12
4.1.4 Diagnóstico
a) Usuarios o población objetivo:
Estudiantes de Quinto semestre del programa
de Ingeniería de Sistemas de la Facultad de
Ingeniería de la Universidad Autónoma de
Colombia.
b) Los Contenidos: El contenido que se
debe desarrollar es el siguiente:
- Gramática lenguaje JavaScript (JS).
- Programación Modular JS.
- Programación Orientada a Objetos JS.
- Eventos JS.
- Objetos Formulario JS.
- Funciones imprescindibles JS.
c) La metodología: De manera presencial
el docente orienta los contenidos como el
desarrollo de prácticas.
d) La Evaluación: Se evalúa de manera
presencial a partir de un problema planteado.
El Docente o Profesor: El docente
debe garantizar material didáctico en el aula
virtual para que el estudiante consulte fuera
de clase y llegue a realizar las prácticas
correspondientes en las clases presenciales.
Formulación del Problema
Figura 24. Curso JavaScript.
 13

Fuente Propia

4.2.2 Manera como se presentará el tema.

El nombre de los objetos (Conocimiento,
Formación, de estudio) como de los conceptos
debe cumplir con la regla léxico morfológico de
ser Titulada o sea:
<mayúscula>:- A…Z
<minúscula>:- a…z
<titulada>:- <mayúscula> <todo minúscula>
Ejemplo: Area, Area Triangulo
Se presenta la tabla de medios como:
Tabla 10. Tabla de Medios. Fuente Propia.

El tema se presenta como el Dominio de

Aplicación, o sea, como la relación entre las
Figura 25. Apuntes de Clase JavaScript.
Fuente Propia
actividades y los medios a hacer utilizados.
¿Cómo documentar la implantación de un Tabla 11. Tabla de Dominio Material
curso de Lenguaje de Programación JavaScript (JS). Fuente Propia
JavaScript en modalidad Flipped haciendo uso
del Análisis y Diseño Edumático?

4.2 Planteamiento del Tema

4.2.1 Dominio Material
El Tema se presenta inicialmente como un
Dominio Material que establece la relación
entre el objeto de conocimiento y el objeto de
estudio con su ámbito conceptual ante sus
medios de presentación
Tabla 9. Tabla de Dominio Material de
JavaScript (JS). Fuente Propia.

Después, el tema se presenta como el Dominio

de Aplicación, o sea, como la relación entre las
actividades y los medios a hacer utilizados.

Tabla 12. Tabla de Dominio de la
Aplicación. Fuente Propia.
Se Normaliza cada objeto (Conocimiento,
Formación, y de estudio) como Componente
de un Software Edumàtico.
Se establecen tres capas en la Arquitectura
del Software Edumàtico: Contenido,
Presentación y Ayuda.
La Capa de Contenido será formada por los
componentes de Conocimiento, Formación y
Estudio, que se identifican y se describen por
los medios a utilizar.
Tabla 13. Estructura Componente Capa de
Contenido. Fuente Propia.
14
La Capa de Presentación será formada por
los componentes de Conocimiento, Formación
y Estudio, que se identifican y se describen por
los medios a utilizar.
Tabla 14. Estructura Componente Capa de
Presentación. Fuente Propia.
4.3 Navegación Propuesta
Figura 25. Navegación Propuesta.
Fuente Propia.
4.4 Diseño Lógico
La estructura lógica hace evidente, la forma en
que el software Edumàtico ofrece un concepto
a desarrollar (modelo conceptual) y debe servir
de entorno para el cumplimiento de cada una
de las funciones requeridas, como también, la
forma de navegación.
 15

4.4.1 Conceptos a Desarrollar –  Navegación

- Capítulo 0 Gramatica
Granularidad
- Capítulo 1 Programación
Los procesos desarrollados en relación a la Modular JavaScript
construcción del software Edumàtico se - Capítulo 2 Programación
describen a continuación: Orientada a Objetos
 Descripción de las Unidades - Capítulo 3 Eventos JavaScript
 Nombre de Unidad. Recursos - Capítulo 4 Objetos Formularios
 Objetivo. Presentación de cada uno JavaScript
de los recursos del software - Capítulo 5 Expresiones
Edumàtico Regulares
 Contenido.
- Recurso HTML
- Recurso CSS
- Recurso JavaScript
- Recurso Codigo
- Recurso Editor JavaScript
 Navegación.
- Capítulo 0 menú
- Capítulo 1 HTML
- Capítulo 2 CSS
- Capítulo 3 JavaScript
- Capítulo 4 Codigo
Figura 27. Navegación Unidad JavaScript. Fuente
- Capítulo 5 Editor JavaScript Propia.

4.4.2 Diseño de Escenas

Se dispone de:
 Dos áreas para la navegación: Menú
unidad a unidad o capitulo a capitulo y
lineal tema a tema.
 Área de Contenido: Donde se
presentan los medios de texto, imagen
y video.

Figura 26. Navegación Unidad Recursos.

Fuente Propia.

 Nombre de Unidad. JavaScript

 Objetivo. Presentación de cada uno
de los temas
 Contenido.
- Gramática
- Programación Modular
JavaScript
- Programación Orientada a
Objetos
- Eventos JavaScript
- Objetos Formularios JavaScript
- Expresiones Regulares Figura 28. Diseño de Escenas. Fuente Propia.

4.4.3 Diseño de Guiones
Se presentan dos tipos de guiones en el objeto
virtual: guión de contenido y didáctico.
 El Guion de contenido: Porque se hace
una selección, organización y Bornas, X. (1994). La autonomía personal en la
presentación del contenido y estudio de
casos.
 El Guion didáctico: considera las
estrategias pedagógicas e 176. Colombia.
instruccionales, consta de:
 Tipo de aprendizaje: Significativo.
 Tipo de recurso de aprendizaje:
simulación, estudio de casos.
 Nivel de interactividad: medio.
4.4.4 Producción de Software Edumàtico
El software Edumàtico se desarrolla en
eXelearning (disponible en
http://exelearning.org/) que es un software de
edición de sitios web educativos (sin necesidad
de aprender a trabajar con código HTML) de
código abierto único por sencillez de su manejo
y por las herramientas que incorpora.
Las principales característica generales son las
siguientes:
 Crear un sitio Web con un menú lateral
dinámico que asegura una navegación
sencilla e intuitiva al usuario
 Editar páginas con contenido
multimedia (imágenes, vídeo, audio,
animaciones, expresiones
matemáticas...) gracias al repertorio de
herramientas de eXeLearning
 Un repertorio de hojas de estilo
 Exportar el proyecto como sitio Web y
en paquetes estándar (SCORM, IMS
CP)
CONCLUSIONES
La oportunidad de determinar el contexto en el
cual se va a diseñar el Sistema Edumàtico y
derivar de allí los requerimientos que deberá
atender el software Edumàtico en el
aprendizaje del lenguaje de programación
JavaScript, como requerimiento de material de
uso para el modelo Educativo Flipped
Classroom.
16
BIBLIOGRAFIA
Bergmann, J. (2014). Dale vuelta a tu clase.
Madrid: Innovación Educativa.
Bernabeu, M. D. (1999). EduCrea. Recuperado el
01 de 09 de 2016, de http://educrea.cl/aprendizaje-
basado-en-problemas-el-metodo-abp/
infancia. Estrategias cognitivas. España: Siglo XXI
editores.
Contreras, M. (2016). Patente nº DNDA 10-604-
Contreras, M. (2016). Patente nº DNDA 10-604-
178. Colombia.
Contreras, M. (2016). Patente nº DNDA 10-604-
180. Colombia.
Cristian LADAGA, S. A. (2015). Clase invertida
(Flipped Classroom) y bimodalidad: propuesta
pedagógica de la cátedra Taller de Diseño en
Comunicación Visual, a través de AulasWeb-
UNLP. Obtenido de SEDICI:
http://sedici.unlp.edu.ar/handle/10915/48794
Da Rosa, S. (s.f.). LA MATEMATICA DISCRETA
COMO FORMACION BASICA. Recuperado el 1 de
10 de 2016, de
http://www.fing.edu.uy/~darosa/MDformbasica.pdf
ITESM. (1 de 2 de 1999). Obtenido de
http://sitios.itesm.mx/va/dide/red/3/que_abp.html
Misión Ciencia, E. y. (1995). Colombia: Al filo de la
Oportunidad. Bogota: Presidencia de la Republica.
Monereo, C. y. (1997). Las estrategias de
aprendizaje. Cómo. Barcelona: Edebe.
Rodríguez Salcedo, M. (2012). Aprendizaje
Centrado En El Alumno. Pachuca: Universidad
Autonoma de Estado de Hidalgo.
Sams, J. B. (2014). Flip Your Classroom. Reach
Every Student in Every Class Every Day. Madrid,
España: SM.
Santiago, R. (2 de 2 de 2012). the flipped class
room. Recuperado el 10 de 10 de 2016, de
http://www.theflippedclassroom.es/
Santiago, R. (s.f.). The Flipped Classroom.
Recuperado el 10 de 10 de 2016, de
http://www.theflippedclassroom.es/what-is-
innovacion-educativa/
 17

Sarmiento, M. (2 de 5 de 2012). LA ENSEÑANZA

DE LAS MATEMÁTICAS Y LAS NTIC. UNA
ESTRATEGIA DE FORMACIÓN PERMANENTE.
Recuperado el 10 de 09 de 2006, de
http://www.tdx.cat/bitstream/handle/10803/8927/D-
TESIS_CAPITULO_2.pdf;jsessionid=7CC0E9580A
58F9DF976C3BE4BC9F8B44?sequence=4

Talbert, R. (2014). Inverting the Linear Algebra

Classroom. PRIMUS: Problems, Resources, and
Issues in Mathematics Undergraduate Studies.
Primus, 361-374.

Tiger Leap, F. (2012). ProgeTiger. Recuperado el

1 de 10 de 2016, de
http://www.tiigrihype.ee/en/programming-schools-
and-hobby-clubs

Treglia, M. (2000). Inverting the Classroom: A

Gateway to Creating an Inclusive Learning
Environment. The Journal of Economic Education,
30-43.

Tucker, B. (2012). The flipped classroom.

Education Next, 82-83.