PLATAFORMA E-LEARNING PARA EL DESARROLLO DE …

Plataforma e-Learning

0

[Escuela] [Título del curso]

PLATAFORMA E-LEARNING PARA EL DESARROLLO DE HABILIDADES DEL SIGLO XXl

INFORME TÉCNICO DE RESIDENCIA PROFESIONAL QUE PRESENTA:

Nombre del Residente

María Angélica Barreda Beltrán

Jordi Alejandro García Núñez

Nombre del Asesor

Alma Delia Chávez Rojas

Nombre de la Carrera

Ingeniería en Sistemas Computacionales

Villa de Álvarez, Col., a 02 de junio de 2016


Agradecimientos

Quiero agradecer a mis padres y hermano, por brindarme todo su amor y su

confianza, por ellos estoy aquí. Gracias a mi tía Elo, por todo su apoyo a lo

largo de mi vida; a todos mis amigos y aquellas personas que me han

brindado un poco de sus consejos y conocimiento forman parte de un pilar

importante en mi vida.

Extiendo toda mi gratitud a mis maestros, por guiarme y brindarme sus

enseñanzas, especialmente a la L. I. Alma Delia Chávez Rojas, por enseñarme

a ser yo mismo y seguir mí camino. Gracias a mi Abuelo por sus oraciones y

todo su amor. Gracias a Dios, por permitirme estar aquí.

Jordi García

Quiero ofrecer un agradecimiento a mis padres por todo su amor, trabajo y

sacrificio durante todos estos años; ya que gracias a ustedes he logrado

llegar hasta aquí; y a mi hermana por todo el apoyo y consejos brindados.

También quiero agradecer a mis profesores por brindarme las herramientas

y conocimientos necesarios para forjarme como un profesionista;

especialmente a mi asesora la L.I Alma Delia Chávez Rojas que me ha

orientado, apoyado y corregido de manera incondicional a lo largo de mi

carrera. Gracias a todos los que me brindaron su apoyo y depositaron en

mí su confianza.

Angélica Barreda Beltrán


Índice

Introducción .......................................................................................................................... 1

Empresa ................................................................................................................................. 2

Organigrama ......................................................................................................................... 3

Lugar de realización del proyecto ....................................................................................... 3

Problemática ......................................................................................................................... 4

Propuesta de Solución .......................................................................................................... 5

Justificación ........................................................................................................................... 6

Alcances ................................................................................................................................. 7

Limitaciones .......................................................................................................................... 8

Ventajas Competitivas ......................................................................................................... 8

Metodologías Aplicadas ....................................................................................................... 9

Metodología de investigación aplicada ........................................................................... 9

Scrum ............................................................................................................................... 10

Roles en Scrum ............................................................................................................. 11

Sprint ............................................................................................................................. 11

Herramientas Scrum ................................................................................................... 12

Beneficios ..................................................................................................................... 13

Desarrollo ............................................................................................................................ 14

Cronograma de actividades ........................................................................................... 15

Comparativas de plataformas ........................................................................................ 16

Lenguajes de programación ........................................................................................... 16

Uso de hardware .............................................................................................................. 17

Blockly .............................................................................................................................. 18

Tipos de bloques de blockly ........................................................................................... 18

Lógica ........................................................................................................................... 18

IfElse ............................................................................................................................. 19

Ciclos ............................................................................................................................ 20

Matemáticas ................................................................................................................. 22


Texto ............................................................................................................................. 22

Listas ............................................................................................................................. 24

Colores .......................................................................................................................... 25

Variables ...................................................................................................................... 26

Procedimientos/Funciones .......................................................................................... 27

Alternativas de solución ................................................................................................. 28

Scratch .......................................................................................................................... 28

App inventor ................................................................................................................ 30

Briko ............................................................................................................................. 31

Fase de desarrollo ........................................................................................................... 35

Instalación de Blockly ................................................................................................. 35

Canvas ........................................................................................................................... 36

Definición de ejercicios a realizar .................................................................................. 36

Ejercicio 1 .................................................................................................................... 37

Ejercicio 2 .................................................................................................................... 37

Ejercicio 3 .................................................................................................................... 37

Ejercicio 4 .................................................................................................................... 37

Definición de bloques finales .......................................................................................... 37

Desarrollo de los ejercicios ............................................................................................. 39

Implementación de funcionalidades de la plataforma ................................................. 42

Ejecutar código ............................................................................................................ 43

Mostrar código ............................................................................................................ 43

Guardar programa en XML ....................................................................................... 44

Cargar archivo XML ................................................................................................... 45

Pruebas y testing de la plataforma ................................................................................ 46

Problemas con Edge e Internet Explorer .................................................................. 47

Problemas con Safari .................................................................................................. 47

Migración a RoR ............................................................................................................. 48

Montaje y pruebas en Heroku ........................................................................................ 48

Creación de servidor Node.js ......................................................................................... 49


Montaje en app para iPad .............................................................................................. 51

Comunicación con Intel Edison ..................................................................................... 52

Conclusión ........................................................................................................................... 53

Anexos .................................................................................................................................. 55

Anexo A ............................................................................................................................. A

Anexo B ............................................................................................................................. B

Anexo C ............................................................................................................................. C

Anexo D ............................................................................................................................. D

Bibliografía ............................................................................................................................ I


Índice de Ilustraciones

Ilustración 1 Organigrama Intelligent Learning Solutions S.A. de C.V ................................ 3

Ilustración 2 Ubicación de la empresa .................................................................................. 3

Ilustración 3 Roles Scrum tomada de (Viscardi, 2013) ....................................................... 11

Ilustración 4 Proceso tomada de (Lara, 2015) ..................................................................... 12

Ilustración 6 Bloques de lógica tomada de .......................................................................... 19

Ilustración 7 Bloque de If-else-if-else tomada de (Google, 2015) ....................................... 20

Ilustración 8 Bloques de ciclos tomada de (Google, 2015) ................................................. 21

Ilustración 9 Bloques matemáticos tomada de (Google, 2015) ........................................... 22

Ilustración 10 Bloques de texto tomada de (Google, 2015) ................................................. 23

Ilustración 11 Bloques de listas tomada de (Google, 2015) ................................................ 25

Ilustración 12 Bloques de colores tomada de (Google, 2015) ............................................. 26

Ilustración 13Bloques de variables tomada de (Google, 2015) ........................................... 26

Ilustración 14 Bloques de procedimiento tomada de (Google, 2015) .................................. 27

Ilustración 15 Espiral del pensamiento creativo tomada de (E.scenarios, 2011) ................. 28

Ilustración 16 Entorno de desarrollo Scratch tomada de (Makeblock, 2015) ...................... 29

Ilustración 17Entorno de desarrollo App Inventor tomado de (MIT, 2016) ........................ 30

Ilustración 18 Kit Premium tomada de (Briko, 2015) ......................................................... 31

Ilustración 19 Cerebro Briko tomada de (Briko, 2015) ....................................................... 32

Ilustración 20 Brikos de salida tomada de (Briko, 2015) .................................................... 32

Ilustración 21 Brikos de entrada tomada de (Briko, 2015) .................................................. 33

Ilustración 22 Piezas mecánicas Briko tomada de (Briko, 2015) ........................................ 33

Ilustración 23 IDE briko tomada de (Briko, 2015) .............................................................. 34

Ilustración 24 Briko web tomada de (Briko, 2015) ............................................................. 34

Ilustración 25 Wireframe del ejercicio 1 ............................................................................. 39

Ilustración 26. Wireframe y ubicación de los semáforos para el ejercicio 2....................... 40

Ilustración 27. Wireframe de referencia para el ejercicio 3 ................................................. 41

Ilustración 28. Wireframe para el ejercicio 4 ...................................................................... 42

Ilustración 29 Código en ejecución ..................................................................................... 43

Ilustración 30 Captura de pantalla de Alert con código ....................................................... 44

Ilustración 31 Prompt para el nombre ................................................................................. 45

Ilustración 32 Archivo descargado ...................................................................................... 45


Ilustración 33 Ventana para elegir archivo .......................................................................... 46

Ilustración 34 Plataforma montada en Heroku .................................................................... 49

Ilustración 35 Vista principal de la aplicación .................................................................... 51

Índice de tablas

Tabla 1. Descripción de bloques ......................................................................................... 38

Tabla 2. Resultados de pruebas por navegador ................................................................... 47

Tabla 3 Cronograma de Actividades .................................................................................... A

Tabla 4 Comparativa de plataformas ................................................................................... B

Tabla 5 Comparativa de lenguajes ....................................................................................... C

Tabla 6 Comparativa tarjetas de hardware ........................................................................... D


1

Introducción

En los últimos años el aprendizaje a dado un giro, debido a que paulatinamente se ha

pasado del método tradicional de enseñanza a un método más dinámico en cual se pueda

tener acceso a la información desde cualquier lugar.

Tomando en cuenta dichas modificaciones que comienzan a realizarse en el sistema actual,

se deben de proveer nuevas herramientas que permitan y faciliten el desarrollo de

habilidades del siglo XXI.

Debido a la necesidad de desarrollar una plataforma que permita el desarrollo de

habilidades que involucren el uso tecnologías actuales a continuación se abordará el

desarrollo de una plataforma que permite e-Learning, la cual fue desarrollada en la ciudad

de Puebla de Zaragoza dentro de la empresa Intelligent Learning Solutions S.A. de C.V.,

cuyo principal objetivo es el desarrollo de habilidades que involucren tecnologías de la

información en niños y adolescentes dentro del país principalmente.

Dentro del documento se podrán apreciar las diferentes etapas por las cuales se tuvo que

pasar para lograr el objetivo final, así como parte de la documentación generada a partir del

desarrollo efectuado; además de mostrar las principales problemáticas enfrentadas, así

como una visualización del producto final.


2

Empresa

La empresa Intelligent Learning Solutions S.A. de C.V es una empresa dedicada al

desarrollo de sistemas y aplicaciones educativas con el objetivo de inspirar a niños y

jóvenes a rediseñar y reinventar el mundo que los rodea. Los motiva a verse a sí mismos

como agentes de cambio con buenas ideas y los empodera al mismo tiempo para que

transformen esas ideas en realidad.

El principal objetivo de la empresa es inspirar a estudiantes a reinventar el mundo mediante

los siguientes puntos

Proyectos STEAM, los cuales son muy útiles ya que son proyectos

multidisciplinarios que incorporan los conocimientos de diversas materias, y se

nutren de diversas metodologías y herramientas (Fundación Armancio Ortega,

2015).

Enfoque construccionista, los cuales son muy útiles ya que son proyectos

multidisciplinarios que incorporan los conocimientos de diversas materias, y se

nutren de diversas metodologías y herramientas (Sabelli, 1990).

Orientación a procesos, puesto que los proyectos están planteados como un

conjunto de actividades de trabajo interrelacionadas que requieren de entradas las

salidas de actividades previas (Franco Primera, 2011).

Cualidades y competencias, debido a que el objetivo de estos proyectos es fomentar

y desarrollar en los niños y adolescentes competencias y habilidades del siglo XXI.

Medios interactivos de apoyo, son altamente interactivos y promueven la

construcción de conocimiento tanto de forma individual o grupal (Medios

Educativos, 2010).

Comunidad, esto es propiciado gracias a que existe una plataforma que integra

individuos con objetivos comunes, y que permite interacción entre ellos fomentando

el trabajo colaborativo (Gómez Luna, 2002).

Dentro de la empresa se encuentra una rama llamada Wegoo la cual es encargada de

realizar todo el desarrollo de la plataforma para que sea posible efectuar cada uno de los

objetivos planteados dentro de la empresa los cuales hacen uso de proyectos STEAM.


3

Organigrama

La empresa se encuentra estructurada de la siguiente manera como se puede apreciar en la

ilustración 1 en la cual solo se hace referencia a la rama de Wegoo.

Ilustración 1 Organigrama Intelligent Learning Solutions S.A. de C.V

Lugar de realización del proyecto

La empresa Intelligent Learning Solutions S.A. de C.V., la sede se encuentra ubicada en

Valle De Alcázar 1304, Colonia Real De Valle Alto 2 Sector, Monterrey, Nuevo León;

pero el lugar donde se desarrolló dicho proyecto fue en Teziutlán Sur 26, Colonia La Paz,

en Puebla, Puebla como se muestra en la siguiente imagen.

Ilustración 2 Ubicación de la empresa

BENJAMÍN ARRIOLA CASASUS

Representante legal

Omar Adalid Vázquez Ortíz

Lider de proyecto

Alejandro Burgos

Artista visual

María Angélica Barreda Beltrán

Desarrollador

Jordi Alejandro García Núñez

Desarrollador

Raul Palacios

Desarollador

Jesús Alejandro Moctezuma GonzálezDirector de desarrollo

Eliot Ramón Rodriguez Gutiérrez

Chief techonology officer


4

Problemática

Los cambios en los mercados laborales han propiciado que la economía actual opere sobre

la innovación, creatividad y la colaboración; las labores de hoy necesitan cada vez más la

resolución de problemas no estructurados y el análisis de cantidades masivas de

información, los trabajos generados para “rutinas manuales” han disminuido

considerablemente mientras que aquellos que se basan en habilidades de mayor orden, van

en aumento.

Esto ha propiciado que los niños se enfrenten a un futuro donde habrá trabajos que aún no

existen, manejando tecnologías que no han sido inventadas y con problemáticas que aún no

son detectadas. El mundo en esta era del conocimiento evoluciona rápidamente

demandando una nueva serie de habilidades que es imperativo desarrollar desde niños y

jóvenes, para que con ello se pueda ayudar a erradicar el rezago, la inequidad y por ende la

pobreza.

Es necesario desarrollar un nuevo paradigma de habilidades desde temprana edad, tales

como la habilidad de analizar y evaluar información para la formulación de respuestas y sus

soluciones (pensamiento crítico y resolución de problemas), la capacidad de imaginar e

idear nuevas maneras de abordar problemas (creatividad), así como la habilidad de

desarrollar un trabajo en equipo enfocado en una meta común, lidiando con el conflicto

(colaboración), solo por mencionar algunas.

La educación en México siempre ha sido un tema de mucho debate si bien se han hecho

grandes esfuerzos y se han autorizado diversos decretos en pro de mejorar la calidad de la

educación, estas siempre se han encontrado con muchas inconsistencias, un punto clave es

el hecho de que la educación se ha enfocado netamente en un modelo educativo basado en

la evaluación, omitiendo el hecho de asegurar que se apliquen las competencias dentro del

aula, con lo que la idea de conseguir aprendizajes y logros significativos se quedan en

buenas intenciones.

Con el actual sistema de educación estandarizada, prácticamente se puede afirmar que no

pueden cumplirse los 3 principios básicos: cobertura, calidad y equidad, surge entonces la

necesidad de aplicar una nueva educación, que se enfoque más en apoyar y apremiar la

utilización del pensamiento lateral, una educación que no se cimiente en el pensamiento

vertical que actualmente ocurre, reorientar desde la base las estrategias educativas es

importante para poder llegar a esa educación de mayor calidad, una educación enfocada en

apreciar el talento, la capacidad e ingenio de los profesionales mexicanos (Rentería

Guerrero, 2013).

Lo que en su momento fueron llamadas “Nuevas Tecnologías”, presentes desde las últimas

décadas del siglo pasado, fueron las causantes de la llamada “Revolución Digital”, misma

que a diferencia de otras anteriores, consiguió cambios, transformaciones e instaurar nuevas

tendencias derivadas de lo conocido como Tecnologías de la Información y las

Comunicaciones (TIC’s), de una manera rápida en muy diversos ámbitos de la sociedad.

Cabe plantear y preguntarse cómo ha sido el efecto que estas denominadas TIC’s han

tenido en la educación, misma en la que a simple vista no se percibe un crecimiento o

aportes extraordinarios, sino que se ha visto una lentitud en la incorporación de éstas


5

herramientas a la educación, aunque es importante destacar que en realidad lo que es más

determinante para que exista un cambio, es tener en claro que las TIC’s en la educación

son una vía para que se pueda mejorar la calidad de la enseñanza, así como dotar de nuevos

caminos para poder dar respuesta a las nuevas exigencias de la sociedad actual, la

incorporación de las TIC’s no son sino una prioridad para que los jóvenes puedan

desenvolverse de una mejor manera en el ámbito laboral, profesional y personal (Martín-

Laborda, 2005).

Tomando en cuenta lo anterior, surge la necesidad de otorgar a las escuelas nuevas

herramientas basadas en las tecnologías de la información que les permitan generar

personas más capacitadas para enfrentar los problemas y los retos de hoy y del mañana,

herramientas que propicien las condiciones idóneas para que las nuevas generaciones

logren conseguir y desarrollar habilidades que les permitan desenvolverse en los ambientes

reales que cada vez son más competitivos.

Propuesta de Solución

La propuesta que se presenta es el desarrollo de una plataforma e-Learning, misma que se

pondrá a disposición de las escuelas públicas y privadas del país, permitiendo a estudiantes

interactuar con tecnologías de información mediante el desarrollo de proyectos STEAM

(Science, Technology, Engineering, Arts and Math) para desarrollar habilidades del siglo

XXI.

Esta plataforma será el resultado de la implementación de un sistema tecnológico que

contará con un módulo que permita hacer edición de código a través de una herramienta

visual, mediante el uso de bloques ensamblables realizará las instrucciones de texto las

cuales podrían ser más complicadas para los nuevos usuarios, ayudando a fomentar y

despertar en ellos un pensamiento abstracto y lógico.

De igual manera, con esta herramienta se podrán controlar widgets virtuales o modelos de

hardware específicos de uso general como parte de un proceso de aprendizaje alternativo

basado en desarrollo de proyectos que permita fomentar el desarrollar las habilidades

deseadas.

Para lograr el desarrollo de manera satisfactoria la solución propuesta, se plantearon los

siguientes objetivos:

1. Investigar plataformas e-Learning.

2. Aprender del framework Blockly de Google.

3. Diseñar plataforma web que funcione como panel de administración.

4. Desarrollar la plataforma web que permita editar y probar código mediante el uso de

lenguaje visual implementando la tecnología de Blockly.

5. Permitir la creación y personalización de bloques con la API de Blockly.

6. Documentar y reportar la creación del sistema web.

7. Realizar la planificación de una aplicación móvil que fungirá como panel de

administración.

8. Desarrollar el entorno visual de la aplicación móvil (front-end).

9. Desarrollar la funcionalidad de la aplicación móvil (back-end).

10. Integrar la plataforma en la aplicación.


6

11. Realizar la comunicación de la plataforma web y la aplicación con el hardware.

12. Realizar la documentación, manuales y reporte final de actividades.

Justificación

En el México actual son grandes y bastos los retos que se presentan para poder mejorar la

calidad de vida e incrementar la productividad y mejora continua del país; uno de los temas

fundamentales que enmarcan y definen estos retos es la educación; si bien México no es

considerado como país tercermundista, aún hay muchos detalles que lo alejan de ser una

potencia, específicamente hablando de la educación, de acuerdo con la revista CNN

Expansión, la debilidad principal que tiene México para lograr el desarrollo del talento de

su juventud menor de 15 años, radica en la baja calidad de las oportunidades que se ofrecen

para dicho sector de la población; incluso se ubica como el lugar 102 de 124 países que

fueron medidos y analizados para lograr el Reporte de Capital Humano 2015 elaborado por

el Foro Económico Mundial (WEF, por sus siglas en inglés). Las oportunidades generadas

para los menores de 15 años, lo ubican en la posición 72 y hablando de un sector

comprendido entre los 15 y los 24 años, se ubica en la posición 63, finalmente para el

sector siguiente, su ranking mejora ubicándolo en el lugar 55; tomando en cuenta estos

indicadores México se encuentra en el lugar 58 de 124 países del listado del estudio que

mide la capacidad de las naciones analizadas para fomentar el talento a través de la

educación, el desarrollo de habilidades y el despliegue de todas sus capacidades en todas

las etapas de la vida. (CNN EXPANSION, 2015).

Bien es sabido que la educación es uno de los principales factores para el avance y progreso

de las sociedades, aunado a los cambios y avances científicos y tecnológicos la importancia

que la educación ha adquirido es aún mayor; en cuestiones de economía es considerada

como uno de los pilares que más influyen tanto en producción, como en temas sociales,

tales como la erradicación de las desigualdades, la pobreza y el analfabetismo. La

educación es necesaria en todos los sentidos, nos ayuda a mejorar nuestro bienestar social,

la calidad de vida y nos prepara para acceder a mejores oportunidades de empleo, a

fortalecer nuestros valores y las relaciones sociales (Ortiz Reyes, 2015).

En la actualidad se han visto grandes e importantes cambios en la forma en la que se

desenvuelve una persona profesionalmente, los cambios en los mercados laborales han

propiciado que sean necesarias nuevas habilidades que hasta hace no mucho tiempo no eran

consideradas por los métodos de enseñanza tradicionales. La innovación, creatividad y

colaboración son los nuevos paradigmas sobre los que opera la economía de hoy; los

diferentes puestos laborales requieren cada vez más la capacidad de resolver problemas no

estructurados y hacer un análisis de cantidades masivas de información, todo esto de una

manera rápida y eficiente, con el propósito de encontrar soluciones a las necesidades de la

sociedad.

Se ha presenciado con el correr de los años una caída dramática en la generación de

empleos enfocados en “rutinas manuales” y tradicionales y a su vez ha habido un

incremento muy notorio en aquellos puestos que se encuentran basados en el análisis de

problemáticas, innovación en las soluciones y habilidades de un mayor orden, con lo que se

ha generado que los niños en la actualidad se estén enfrentando a un futuro en el cual habrá

trabajos y necesidades que aún no existen, tendrán que implementar tecnologías que no han


7

sido inventadas y deberán de atender problemas que aún no han sido detectados, por lo que

será necesaria una mayor capacidad de adaptación al cambio y habilidades que deriven en

la mejora de los procesos de análisis y resolución de problemas.

El mundo en esta era del conocimiento y evoluciones rápidas demanda una nueva serie de

habilidades imperativas a desarrollar desde niños y jóvenes, que contribuyan a erradicar el

rezago, inequidad y por ende la pobreza. Urge principalmente en edad temprana, desarrollar

un nuevo conjunto de habilidades, tales como la habilidad de analizar y evaluar

información para formular respuestas y soluciones (pensamiento crítico y resolución de

problemas), la habilidad de imaginar e idear nuevas formas para abordar problemas

(creatividad) y la habilidad de trabajar en equipo hacia una meta común lidiando con el

conflicto (colaboración) por mencionar algunas.

Los avances tecnológicos que han surgido estos últimos años especialmente en las

tecnologías móviles han puesto literalmente al alcance de las manos, nuevas y mejores

herramientas que pueden ser explotadas de múltiples maneras; las nuevas generaciones

prácticamente han crecido con estas herramientas en la palma de su mano, gracias a su

manejo intuitivo y versatilidad se han convertido en una de las tecnologías más importantes

de la actualidad; así mismo han surgido infinidad de proyectos de software que procuran

ayudar a mejorar muchas de las tareas cotidianas, tal es el caso de los editores de

programación visuales, mismos que se han convertido en excelentes aliados cuando de

fomentar los principios básicos de programación se trata, el enseñar a programar a los

estudiantes desde una edad temprana, ayuda a que desarrollen nuevos paradigmas de

razonamiento, rompiendo los esquemas actuales y preparándolos para los retos del futuro.

Alcances

Dentro de la propuesta de solución planteada que consiste en el desarrollo de una

plataforma e-Learning se establecieron una serie de objetivos a cumplir, de los cuales se

desarrollaron los siguientes:

1. Investigación introductoria en plataformas e-Learning.

2. Capacitación y aprendizaje del framework Blockly de Google.

3. Diseñar una plataforma web que funcione como panel de administración.

4. Desarrollar la plataforma web permitiendo editar y probar código mediante el uso

de lenguaje visual implementando la tecnología de Blockly.

5. Permitir la creación y personalización de bloques con la API de Blockly.

6. Documentar y reportar la creación del sistema web.

7. Realizar la planificación de una aplicación móvil que fungirá como panel de

administración.

8. Desarrollar el entorno visual de la aplicación móvil (front-end).

9. Desarrollar la funcionalidad de la aplicación móvil (back-end).

10. Integrar la plataforma en la aplicación.

11. Realizar la comunicación de la plataforma web y la aplicación con el hardware.

12. Realizar la documentación, manuales y reporte final de actividades.


8

Limitaciones

Al momento de realizar un proyecto siempre existen ciertos factores que interfieren para

que se desarrolle de la manera más óptima y sin contratiempos, dentro de las situaciones

que pueden afectar en el transcurso de la investigación y desarrollo del sistema existen

algunos que afectan directamente a la creación del mismo y otros que lo limitan en cuanto a

funcionalidad.

Las limitantes que se encontraron en este proyecto retrasaron un poco el desarrollo del

mismo, sin embargo, no impidieron que se realizara; a continuación, se enlistan y explican

algunas limitantes tanto de la tecnología empleada como del desarrollo del proyecto:

Curva de aprendizaje: Al haber utilizado y desarrollado en un framework nuevo

para nosotros el tener que aprenderlo hizo que nos tomara más tiempo del propuesto

para el desarrollo del sistema, de igual manera las distintas tecnologías que se

utilizaron no habían sido manejadas al 100% y esto también represento atraso en

tiempos.

Asesorías remotas: Al no encontrarnos en la ciudad de Colima, las asesorías y

revisiones tuvieron que ser mediante la vía remota, lo que significó que la atención

no pudo ser tan personalizada como se esperaba, esto también logró provocar

retrasos en la solución de diversas situaciones y problemáticas.

La disposición del hardware: Lamentablemente no se contó todo el tiempo de

desarrollo con el hardware necesario para realizar las pruebas ni el desarrollo de

esta parte del sistema, este llego a finales de mayo, lo que significo poco tiempo

para probarlo.

Características del servidor Node.js: A pesar de que la tarjeta Edison es bastante

potente, la funcionalidad que más nos interesa es la conexión inalámbrica basada en

una conexión a internet, lo cual representa una limitante porque en caso de que no

exista la infraestructura necesaria en las escuelas para montar una red, esta

funcionalidad no será implementada de la manera deseada.

Alcances de Blockly: Blockly es un excelente editor de texto, sin embargo, no tiene

la capacidad suficiente para manejar todos los conceptos de programación, puesto

que sería muy complicado implementar conceptos como recursividad, programación

orientada a objetos entre otros, esto nos limita en los temas que pueden ser tratados.

Ventajas Competitivas

En el mercado existen diversas plataformas que hacen uso del framework de Blockly las

más importantes son las siguientes:

Scratch.

App Inventor.

Briko.

Cuyo enfoque va desde una simple resolución de puzles hasta la integración como parte de

un sistema de educación, donde se puede llegar a incluir la manipulación de hardware con

diversos sensores y actuadores; los cuales más adelante se hablará específicamente de cada

uno de ellos en el apartado de alternativas de solución ya que fueron tomadas en cuenta


9

como posibles plataformas a implementan en dado caso que estas cubrieran las

características y objetivos planteados.

Dentro de las plataformas existentes se muestran una serie de limitantes referentes a la

presentación de la interfaz, vistas previas de los ejercicios desarrollados y facilidad de

navegación. Tomando en cuenta las problemáticas presentadas se optó por darles una

solución dentro de la plataforma a desarrollar, dando como resultado las siguientes

ventajas:

Permite el manejo de widgets virtuales, así como hardware de uso específico.

El diseño muestra un preview de la ejecución del código que se cargará al

hardware.

Posee una interfaz amigable para niños, sin dejar de ser formal para adultos.

Forma parte de un sistema robusto de e-Learning que incluye entre otras cosas,

modelado e impresión 3D, trabajo colaborativo en tiempo real, y red social de

creadores.

Tendrá versión web y móvil para IOS y Android.

Es una plataforma basada en desarrollo de proyectos, que se encuentra en constante

crecimiento.

Se tiene un convenio con algunas instituciones.

Metodologías Aplicadas

Metodología de investigación aplicada

La “investigación aplicada” fue elegida para este proyecto ya que se caracteriza en buscar

la aplicación y utilización de los conocimientos adquiridos de una manera práctica al

tiempo que se adquieren nuevos conocimientos. El uso de los resultados y el conocimiento

que generó dicha investigación, da como resultado una manera rigurosa, organizada y

sistemática de conocer la realidad (Vargas Cordero, 2009).

Guarda íntima relación con la investigación básica, ya que depende directamente de los

descubrimientos previos y los avances obtenidos en esta última; enriqueciéndose con la

utilización y puesta en práctica de dichos conocimientos. Tiene como objetivo el conocer

para hacer, actuar, construir y modificar (Diego Mendoza, 2012).

El término de “investigación aplicada” se ha propagado desde el siglo XX, con él se hace

referencia al tipo de estudios científicos que se enfocan a la resolución de problemas de la

vida cotidiana, o bien ayudan a controlar situaciones prácticas, tomando en cuenta dos tipos

de investigación aplicada:

Aquella que incluye cualquier esfuerzo de manera sistemática y socializada con el fin de

resolver problemas o intervenir en diversas situaciones, por ejemplo, la innovación técnica,

artesanal e industrial tanto como la propiamente científica.

La investigación que solo considera los estudios que indagan y explotan teorías científicas

que previamente han sido validadas, esto con el mismo fin de resolver problemas prácticos

y el control de situaciones de la vida cotidiana.


10

A través de la historia, la investigación aplicada muestra el cómo aprovechar diversos

materiales teóricos con el fin de realizar el diseño de sistemas de acción que permitan

resolver alguna necesidad o situación social deficiente, es decir que de alguna manera

pueda ser mejorada (Vargas Cordero, 2009).

Ya que se pretende realizar un software que les permita a los estudiantes conocer los

principios básicos de la programación y mediante el cual puedan controlar diversos widgets

o algún hardware físico de comportamiento general, es necesario realizar una investigación

que posea un enfoque sistematizado con un orden práctico en lugar de alguna con un

enfoque cognitivo, ya que este tipo de investigación tiene como objetivo alcanzar una fase

aplicativa, en nuestro caso el desarrollo de la aplicación, la cual sea resultado de la

investigación previa; su estructura general es la siguiente:

Paso 1: Se parte de una situación problemática, que requiere ser intervenida y mejorada. Se

describe sistemáticamente esa situación, bajo criterios relevantes.

Paso 2: Se selecciona una Teoría, de carácter reconocido y suficientemente aceptada. Se

expone sistemáticamente esa teoría, tanto en sus conceptos centrales como en sus rasgos

contextuales.

Paso 3: Se examina la situación descrita en el paso1 a la luz de la Teoría expuesta en paso

2. Se deriva de esta teoría un sistema de acciones y de previsiones (prototipo) que, si se

pone en práctica, resolvería favorablemente la situación problemática descrita en el paso 1.

Se describe sistemáticamente este prototipo, tanto en sus secuencias de uso como en sus

instrumentaciones asociadas.

Paso 4: Se ensaya y se prueba el prototipo que se obtuvo en el paso 3. Se determina la

probabilidad que tiene el modelo aplicativo de resolver la clase de situaciones

problemáticas del tipo descrito en el paso 1 (Padrón G., 2006).

Esta investigación se realizó con un enfoque cualitativo, en el que se plantea crear una

aplicación que sea de un entendimiento sencillo y de fácil manejo para los usuarios, con la

que podrán materializar sus ideas y mediante bloques visuales de código podrán generar sus

propias rutinas y programas, desarrollando un pensamiento abstracto, además de poder

manipular y controlar mediante el uso de bloques, los dispositivos bien sean virtuales o

físicos.

El prototipo resultado de esta investigación se desarrolló bajo el esquema de trabajo Scrum,

dicha metodología es aplicada dentro de la empresa para la cual se realizó el prototipo.

Scrum

La metodología Scrum es aplicada principalmente para el trabajo colaborativo y en equipo

para obtener un mejor resultado del proyecto, debido a que se realizan entregas parciales y

regulares del producto final.

Scrum está especialmente indicado para proyecto en entornos complejos, donde es

necesario obtener resultados a corto plazo y los requisitos son cambiantes o poco definidos,

permitiendo innovación, competitividad, flexibilidad y productividad que son puntos

fundamentales para el desarrollo del proyecto (Proyectos agiles, 2015).


11

La empresa Intelligence to Bussines (I2B) define el Scrum como “Un proceso de la

Metodología Ágil que se usa para minimizar los riesgos durante la realización de un

proyecto, pero de manera colaborativa” (Gutiérrez, 2014); las principales ventajas que

posee es la productividad, calidad y el seguimiento diario respecto a los avances del

proyecto los cuales permiten lograr que los integrantes posean una excelente comunicación

y su vez el cliente pueda visualizar constantemente los avances efectuados.

Scrum se considera como un framework para trabajar en equipo empleando una serie de

iteraciones; por lo cual se divide en fases que definen el proceso basado en lo siguiente:

1. ¿Quién? y el ¿Qué?: se identifica los roles de cada uno de los miembros del equipo

y define la responsabilidad en el proyecto.

2. ¿Dónde? y el ¿Cuándo?: representan el Sprint.

3. ¿Porqué? y el ¿Cómo?: representan las herramientas que utilizan los miembros del

Scrum.

Roles en Scrum

Los roles del Scrum son los siguientes como se muestra en la ilustración 3:

1. El Product Owner/Dueño del producto es la “voz del cliente” y el responsable de

desarrollar, mantener y priorizar las tareas en el backlog.

2. El Scrum Master es responsable de asegurarse que el trabajo del equipo vaya bien

siguiendo las bases de Scrum. Además, se encarga de remover cualquier obstáculo

que pueda encontrar el equipo de desarrollo.

3. Los Development Team Members/Miembros del Equipo de desarrollo son los

encargados de escribir y probar el código.

Ilustración 3 Roles Scrum tomada de (Viscardi, 2013)

Sprint

Es considerada como la unidad básica de trabajo; debido a que es una simple iteración que

se realiza por los miembros del equipo. Un equipo puede completar varios sprints durante


12

el desarrollo del proyecto. El siguiente gráfico muestra cómo se lleva a cabo la metodología

aplicada dentro un proyecto

Ilustración 4 Proceso tomada de (Lara, 2015)

Durante cada iteración que se realiza tiene que proporcionar un resultado completo o en su

defecto un incremento del producto final, dicho procesos parte de una lista de objetivos o

requisitos como plan de proyecto de tal modo que se priorizando los objetivos respecto al

valor y al coste.

Herramientas Scrum

Son un tipo de herramientas que nos provee Scrum, las cuales son:

1. Backlog de Producto/ Product Backlog: se refiere a todo elemento que sea parte del

proyecto, brindando información muy general del proyecto que no forma parte

dentro de los requerimientos oficiales.

2. Historias de Usuario/ User Stories: es un considerado como un elemento especial,

ya que proporcionar información sobre cómo debe ser el comportamiento del

requerimiento a trabajar, los cuales son tomados como requerimientos oficiales.

3. Backlog del Sprint/ Sprint Backlog: es el conjunto de elementos tomados del

product backlog que fueron priorizados, medidos y aceptados en las reuniones de

Sprint planning.

4. Panel de tareas /The Taskboard: dicho panel muestra todas y cada una de las tareas

que se tienen asignadas a cada uno de los miembros de equipo; dicha tabla se divide

en 3 columnas que representan el estado de cada tarea

Por hacer (to do).

Haciendo (Doing).

Terminado (Done).

5. Definición de listo/ Definition on Done: es una serie de acuerdos que deben

cumplirse para que pueda darse por finalizado un proyecto. Estos son:

Todas las tareas completadas.


13

Revisión de código.

Pruebas realizadas a cada elemento desarrollado.

Revisión por parte de los clientes.

Revisión de las condiciones de aceptación

Beneficios

La metodología ofrece varios beneficios dentro del proyecto, debido a que las entregas de

resultados son constantes (mensual o quincenal) proporcionan diferentes ventajas que a

continuación se enlistan (Tataje, 2010):

1. Gestión regular de las expectativas del cliente.

2. Resultados anticipados.

3. Flexibilidad y adaptación.

4. Gestión sistemática del retorno de inversión.

5. Mitigación sistemática de los riesgos.

6. Productividad y calidad.

7. Alineamiento entre el cliente y el equipo de desarrollo.

8. Equipo motivado.


14

Desarrollo

Gracias a que las características de este proyecto involucran la implementación de

tecnologías relativamente nuevas o poco comunes, el desarrollo de una herramienta

educativa bajo paradigmas de enseñanza emergentes y la proposición de un método

educativo nuevo que incluye la interacción entre las TIC’s y la educación, fue necesario

dividir en dos fases o etapas el desarrollo de la plataforma resultante: Investigación y

Desarrollo.

Para realizar la primera etapa denominada fase de investigación, se utilizó la investigación

aplicada, en la que se realizó toda una contextualización de la actualidad de los diferentes

métodos de enseñanza existentes, se realizó una investigación a fondo de distintas y

diversas plataformas que ponen en línea infinidad de cursos, ejercicios, pruebas y

materiales educativos en general, esto con el propósito de comprender y abstraer las

particularidades que pudieran aportar ideas y mostrarnos la manera en que se aplican estas

herramientas, de igual manera se revisaron informes educativos de distintas fuentes para

conocer cuál era la forma más adecuada en la que debían desarrollarse las temáticas y

contenidos que debía de incluir la plataforma, para así generar un mejor producto.

Se realizó una comparativa entre algunos de los lenguajes de programación más utilizados

para enseñar a los niños, se analizaron los pros y contras de cada uno de ellos, sus orígenes

y propósitos entre algunos detalles más. Así mismo, en esta etapa se hizo una profunda

capacitación en el manejo y uso del framework Blockly de Google, su origen, propósito y

ventajas que ofrece, se investigó a detalle el modo de uso, la forma de implementación, los

alcances y limitaciones del mismo, se estudiaron algunos proyectos que también utilizan

esa herramienta con el fin de conocer la manera en la que ellos aprovechan las virtudes de

este editor, se realizaron algunas pruebas de implementación y se exploraron todas las

características destacadas del mismo para poder comprender de qué manera podía aportar

mejoras en nuestra plataforma.

Debido a que el proyecto incluye el manejo no solo de widgets virtuales sino también de

hardware específico, se realizó una búsqueda de algunos Kits de robótica para niños, con

los que posiblemente se podría interactuar desde la plataforma, esto se realizó con el fin de

analizar algunas alternativas para implementar en conjunto con nuestra propuesta.

Posteriormente se analizó el uso de Kits de electrónica para el desarrollo de proyectos de

propósito general, tales como la creación de artefactos y gadgets multipropósito, así como

Kits enfocados en el ámbito del Internet de las Cosas.

Sabiendo que es importante conocer diversas alternativas de solución a la problemática

detectada, se investigaron algunas plataformas y entornos de desarrollo que involucran

conceptos muy similares a lo que se propone con el desarrollo de esta plataforma, se hizo

hincapié en las ventajas y desventajas que presentan, así como una explicación detallada de

su funcionamiento y composición.

En la segunda etapa, o fase de desarrollo, se enfocó más a la planeación y desarrollo

netamente de la plataforma, habiendo ya entrado en contexto y después de adquirir las

referencias adecuadas para el desarrollo del mismo, se procedió a definir las actividades

necesarias para la obtención y cumplimiento de los objetivos, se hizo el uso de la

metodología ágil Scrum para llevar el control de las actividades.


15

Primero que nada, se hizo un análisis completo para que con base en el cronograma

propuesto quedaran definidas las actividades a realizar, se partió por instalar y configurar

Blockly, posteriormente se comenzó con el desarrollo de algunos bloques personalizados

como pruebas para aprender a hacerlos.

Se hicieron algunas pruebas para la manipulación del elemento canvas controlado desde los

bloques ya que ahí es donde se mostraría la ejecución del código que el niño haya

programado, para tener una mejor visualización de la ejecución del código, se implementó

también el JS Interpreter, con el cual se podían ir resaltando los bloques que estuvieran

ejecutándose en ese momento.

Una vez probada la interacción entre bloques y canvas, se pasó a definir todos los bloques

que serían necesarios, se crearon las estructuras y se programaron las funciones

correspondientes. Se definieron y desarrollaron los primeros ejercicios y se agregaron

algunas funcionalidades a la plataforma, se realizaron las pruebas correspondientes para

asegurar la calidad del sistema y el cumplimiento de los objetivos.

Se llevó a cabo el desarrollo de la aplicación para iPad, en el que se embebió la plataforma

web, así como la migración del sistema a un entorno en Ruby on Rails, y su montaje en un

servidor de Heroku, lo anterior para poner a disposición de pruebas reales la plataforma.

Se montó un servidor Node.js en la tarjeta elegida para el desarrollo de la manipulación del

Hardware, para que mediante él se pudiera hacer la comunicación entre los actuadores y la

plataforma, ya sea en su versión web y en su aplicación móvil, esto para cumplir el objetivo

del control de hardware de uso específico.

Cronograma de actividades

Para efectuar el desarrollo de cada una de las actividades se planteó un cronograma en el

cual se muestran las actividades y el tiempo que se pretende emplear en cada una de ellas

para concluir con el objetivo final del proyecto.

La distribución de los tiempos se puede visualizar en el Anexo A , así como la actividad a

realizarse durante dicho periodo; a continuación, se enlista las actividades a realizar:

1. Investigación de plataformas e-learning.

2. Investigación de entornos de desarrollo.

3. Aprendizaje y capacitación del entorno.

4. Análisis y definición del sistema.

5. Desarrollo del sistema.

6. Pruebas y documentación.

7. Integración del sistema a la plataforma y aplicación móvil.

8. Entrega de aplicación móvil.


16

Comparativas de plataformas

Con el propósito de entrar en el contexto de las diferentes plataformas existentes mismas

que son utilizadas para enseñar a los niños a programar, se realizó una investigación y

análisis de algunas de ellas.

Primero se hizo una búsqueda de distintas herramientas, recursos, juegos o plataformas que

propiciaran la enseñanza de los conceptos básicos de programación, ya sea a través de

sistemas drag & drop, o mediante algún método más tradicional. Para llevar a cabo la

evaluación y comparación de dichas plataformas se tomaron en consideración 11 criterios o

características que se describen a continuación:

Temas: En este apartado se enlistaron los temas que la plataforma en cuestión

aborda en su totalidad, es decir, que temas son vistos y en qué orden se presentan a

lo largo del uso de la plataforma en turno.

Retroalimentación: Con este criterio se determina la manera en la que la

herramienta ofrece retroalimentación al usuario, ya sea para instrucciones o

correcciones de errores.

Lenguaje específico: Este criterio nos da a conocer que lenguaje de programación

implementa la plataforma analizada, con él se podría determinar las tendencias de

uso de lenguaje y elegir la mejor opción.

Número de niveles: Nos permite saber aproximadamente cuantos ejercicios

implementa en su totalidad la plataforma.

Ejercicios por tema: Esto nos da un rango de aproximadamente cuantos temas o

tiempo debería demorarse la enseñanza de un capitulo en general.

Tipo de ejercicios: Esto con el fin de conocer las tendencias en cuanto a la manera

de presentar los ejercicios que permitan enseñar a los niños a programar.

Plataforma: Ese criterio indica bajo que plataforma corre el sistema analizado.

Costo: Para saber si acaso alguna de las alternativas es de paga.

Widget utilizado: Esto nos indica el tipo de personaje que la plataforma implementa

para interactuar con el usuario.

Habilidades que desarrolla: Este apartado nos muestra que tipo de habilidades y

conceptos son enseñados a lo largo del uso de la plataforma en turno.

Propósito: Nos dice cuál es el objetivo final de los ejercicios.

También se analizaron el tipo de interfaz que presentaba la plataforma, con el fin de

observar y diseñar una interfaz que cumpliera mejor con los objetivos, se observaron las

ventajas y desventajas generales, así como alguna característica o situación sobresaliente

que ayudara a tener algún punto extra en consideración (ver Anexo B).

Lenguajes de programación

Como bien es sabido, existen diversos lenguajes de programación que han ido surgiendo al

correr los años, estos pueden encontrarse en distintos niveles de complejidad, algunos de

ellos son utilizados por su potencia, la robustez de su desarrollo entre muchas otras cosas,

como se pretende introducir a los niños al mundo de la programación con el fin de logar y


17

fomentar en ellos nuevas habilidades, se realizó una comparativa entre algunos de los

lenguajes más utilizados para la enseñanza e introducción al mundo de la programación.

Aun cuando el usuario final no tendría contacto directo con la sintaxis de ningún lenguaje

de programación, es importante elegir uno que sea suficientemente sencillo para enseñar a

usuarios que no han tenido acercamiento con ningún tipo de desarrollo de software anterior,

pero que sean lo suficientemente potentes para que puedan desarrollarse proyectos

interesantes y de alto impacto con ellos, con base en lo anterior, se realizó una comparativa

en la que se evaluaban e investigaban 6 características generales de los lenguajes, a

continuación se enlistan los criterios considerados:

Propósito: meta que busca conseguir, misma que lo diferencia del resto.

Base de desarrollo: que lenguajes inspiraron su creación, esto con el fin de conocer

las bases sobre las que se cimienta

Sitios donde se usa: un contexto general de proyectos e iniciativas que implementan

este lenguaje.

Usabilidad: características esenciales en cuando a la manera en la que se utilizan.

Facilidades de aprendizaje: grado de complejidad que presenta para ser aprendido

por usuarios novatos.

Este estudio se realizó entre 3 lenguajes que han surgido últimamente como referentes en la

enseñanza de la programación no solo en niños, sino en la sociedad en general, los cuales

son Python, elegido por ser muy sencillo en su estructura y con reciente auge, JavaScript,

lenguaje altamente probado con características bastante interesantes y finalmente Ruby,

lenguaje muy solicitado últimamente con una gran filosofía de desarrollo (ver Anexo C).

De los lenguajes analizados se optó por hacer uso de JavaScript debido a la solidez que

representa, así como las facilidades que nos otorga respecto al desarrollo.

Uso de hardware

Parte fundamental del proyecto involucra la programación y manipulación de hardware

especifico, es por esto que se investigó y buscó diferentes alternativas que pudieran ser

implementadas a la par de nuestro sistema, para ello en un comienzo se comenzó por buscar

kits de robótica completos para niños, para ello se tomaron en cuenta la versatilidad de cada

uno de los kits.

Fabricante: para ser tomado como referencia al momento de elegir.

Placa: para conocer bajo que arquitectura están desarrollados y verificar

escalabilidad.

Lenguajes: con esto es más sencillo saber de qué manera pueden ser programados y

poder verificar compatibilidad, complejidad de adaptación y escalabilidad.

Opensource: simplemente verificar si el hardware es de código abierto.

Costo: para fines económicos y análisis costo-beneficio.

Luego del análisis y la comparativa entre kits de robótica completos, se optó también por

analizar y comparar diversos kits de electrónica, donde a diferencia de los kits de robótica,

el niño podrá imaginar, armar, programar y crear su propio proyecto, con lo que se sigue

incentivando la creatividad en los estudiantes, los criterios que se consideraron para hacer


18

el análisis y comparación de los kits de electrónica fueron el precio, cantidad de sensores,

calidad de la tarjeta de desarrollo, escalabilidad y ventajas; con estos datos se obtuvo el

costo beneficio de cada uno de los kits de electrónica investigados, esta investigación dio

como resultado una tabla donde se incluye la siguiente información:

1. Nombre del kit.

2. Imagen de referencia.

3. Lugar de venta.

4. Costo.

5. Productos disponibles.

6. Liga de compra.

7. Tiempo estimado de envío.

8. Descripción (cantidad de sensores y contenido).

Con toda la información recabada (ver Anexo D) se llegó a la conclusión de hacer uso de

Intel Édison y Grove kit starter plus debido a las características que posee y el costo-

beneficio que otorga.

Blockly

Blockly es un lenguaje de programación visual compuesto por un sencillo conjunto de

comandos que podemos combinar como si fueran las piezas de un rompecabezas. Es una

herramienta muy útil para el que quiera aprender a programar de una forma intuitiva y

simple (Rodríguez, 2012).

Permite a los programadores principiantes a concentrarse en la lógica. Se le ofrece una

serie de comandos y cómo se pueden colocar juntos. No hay paréntesis desequilibrados,

cadenas de escape, no hay puntos y coma que falten (Rodríguez, 2012).

Blockly permite arrastrar los distintos componentes de control, lógica, operaciones

matemáticas, texto, listados y procesos para crear sencillos scripts que podremos exportar a

lenguajes como JavaScript, Dart, Python o XML.

Tomando como referencia toda la investigación anterior al igual que los objetivos que se

pretenden cumplir haciendo uso de la herramienta blockly la cual nos permite la

implementación de lenguaje JavaScript y permite la conexión con la tarjeta Intel Édison.

Dentro de blockly existe una serie de bloques que nos permiten realizar diferentes funciones

además de introducción los diferentes conceptos de programación, más adelante se enlistan

cada uno de ellos con una descripción más amplia de sus funciones.

Tipos de bloques de blockly

Lógica

En el álgebra booleana existen dos valores, falso y verdadero. Se implementan en los

bloques condicionales y en los bloques de repetición.

Un bloque que espera un dato tipo booleano usualmente interpreta la ausencia de dato

como falso. Existen 6 operadores de comparación lógica:


19

igual a (=).

diferente a (! =).

mayor que (>).

mayor igual que (> =).

menor que (<).

menor igual que (< =).

Existen también operaciones lógicas, AND que regresará verdadero sólo cuando ambas

entradas sean verdaderas, en cambio el operador OR regresará verdadero si cualquiera de

las dos entradas sea verdadera.

El bloque NOT cambia el valor de la entrada en el opuesto, si se omite la entrada esta se

considerará como verdadero por lo que el bloque regresará falso.

Dichos bloques los podemos visualizar en la siguiente ilustración 6.

Ilustración 5 Bloques de lógica tomada de (Google, 2015)

IfElse

Las sentencias condicionales son muy importantes para la programación computacional.

Dentro de esta sección de bloques referentes a condicionales se tienen las siguientes

estructuras de sentencias:

Bloque if

Bloque IF-ELSE

Bloque IF-ELSE-IF

Bloque IF-ELSE-IF-ELSE

El bloque IF hace una comparación entre dos entradas, en caso de que la comparación sea

verdadera (de acuerdo al resultado de los bloques lógicos) realizará una acción, en caso

contrario, no ejecutara ninguna acción (Google, 2015).


20

EL bloque IF-ELSE aplica la misma lógica que el bloque IF, sin embargo, este bloque

permite realizar alguna acción en cualquiera de los dos casos que se generen ya sea que la

condicional sea FALSO o VERDADERO (Google, 2015)..

Existe un bloque llamado IF-ElSE-IF, con el cual se pueden probar múltiples condiciones,

si ninguna resulta verdadera, no realiza ninguna de las opciones y ejecuta las siguientes

instrucciones.

El bloque IF-ELSE-IF-ELSE (ilustración 7) prueba más de una condición, y en caso de que

ninguna resulte verdadera, también realiza una acción correspondiente al último ELSE que

se maneja en la estructura (Google, 2015).

Existe el bloque de modificación, en el cual el usuario puede definir cuantas condiciones

desea realizar, este bloque permite tantos ELSE-IF como el usuario desee, sin embargo,

únicamente permite un solo bloque ELSE con el que termina la estructura de ese bloque.

Ilustración 6 Bloque de If-else-if-else tomada de (Google, 2015)

Ciclos

Los bloques de CONTROL (ilustración 8) permiten controlar cuantas veces el código que

se encuentra en su cuerpo se va a correr, estos son llamados CICLOS (loops) los cuales

pueden ser posiblemente repetidos muchas veces, cada vez que se corre el código en el

cuerpo del ciclo se llama ITERACION.

El bloque de ciclos más simple es el REPEAT el cual correrá el código dentro de su cuerpo

un número específico de veces (este número puede ser definido por una variable), el ciclo

REPEAT WHILE, este ciclo repetirá el código dentro de su cuerpo mientras una condición


21

establecida por el usuario sea VERDADERA, en cambio el ciclo REPEAT UNITL, repetirá

el código dentro de su cuerpo hasta que la condición sea verdadera, es decir que mientras

dicha condición no se cumpla el código seguirá ejecutándose (Google, 2015).

El bloque COUNT WITH (ciclo FOR) utiliza 4 parámetros en el cual incrementa una

variable (primer parámetro) desde el primer valor (segundo parámetro), hasta el segundo

valor (tercer parámetro) con un incremento del tercer valor (cuarto parámetro), que incluso

pude ser negativo, ejecutando el código una vez por cada valor de la variable

(ITERACION), el ciclo FOR EACH es muy similar al anterior, solo que en lugar de dar

una secuencia numérica utiliza los valores de una lista dada, es decir cada elemento que

pertenezca a dicha lista (Google, 2015).

Los bloques de terminación permiten controlar las iteraciones de cada uno de este tipo de

ciclos, el bloque CONTINUE WITH NEXT ITERATION es un bloque que causa que el

código restante se omitido, continuando con la siguiente iteración, el bloque BREAK OUT

OF LOOP, permite terminar la ejecución del código en el cuerpo del ciclo en cualquier

momento.

Ilustración 7 Bloques de ciclos tomada de (Google, 2015)


22

Matemáticas

Los bloques de matemáticas te permiten escribir un número, poner una suma, existe un

bloque de la raíz cuadrada, funciones trigonométricas (seno, coseno, etc.), números

especiales (pi, épsilon, infinito), bloque para saber si tiene alguna característica especial (si

es primo, negativo, positivo, divisible entre X), incrementar cierta variable, redondear ya

sea hacia arriba o hacia abajo, operaciones con listas (suma, máximo, mínimo, medias, etc.)

la siguiente ilustración 9 muestra dichos bloques (Google, 2015).

Ilustración 8 Bloques matemáticos tomada de (Google, 2015)

Texto

Dentro de la sección de texto existen diferentes bloques que nos permiten la interacción con

cadenas de texto, cada uno de los bloques que se incluyen dentro de esta sección muestran

características que nos permiten obtener diferentes resultados de una misma cadena; dichos

bloques pueden contener:

1. Letras (mayúsculas y minúsculas).

2. Números.

3. Signos de puntuación.

4. Espacios en blanco.

5. Símbolos especiales.

El bloque TEXT CREATION, es uno de los bloques principales puesto que nos permite

crear un texto de longitud indefinida y poder almacenarlo en una variable del tipo

CADENA. Mientras que el bloque CREATE TEXT WITH permite crear una combinación o

concatenación entre diferentes ítems que el usuario desee definir para su uso.

Para modificar texto puede utilizarse el bloque APPEND TEXT, en el cual hace posible el

poder cambiar el valor de texto que se encuentra guardado dentro de una variable de tal

modo que este sea alterado para beneficio del usuario.

En el caso del bloque TEXT LENGHT, permite contar el número de caracteres que posee el

texto seleccionado; mientras que el bloque IS EMPTY, revisa si el texto dado tiene una


23

longitud igual a 0, en caso de que dicha longitud sea diferente de 0 el resultado arrojado

será VERDADERO, en cambio si el texto tiene una longitud igual a 0, el resultado

obtenido será FALSO (Google, 2015).

En algunas ocasiones es necesario encontrar pequeñas fracciones de texto específicos

dentro de un texto; para vida de hacer esto posible se hace uso del bloque IN TEXT FIND,

el cual necesita de un texto, para posteriormente seleccionar la letra o palabra que se desea

encontrar; cuando esta es localizada da como resultado el número de la posición en donde

se encuentra ubicada dicha letra o palabra, en dado caso de que la letra o palabra no se

encuentre dentro del texto, el resultado será 0.

Otra manera de poder extraer texto es haciendo uso del bloque IN TEXT GET, donde se

debe especificar la palabra que se desea analizar, y la posición en la que se deseamos

obtener el carácter (Google, 2015).

Cuando se desee obtener toda una fracción de texto se utiliza el bloque IN TEXT GET

SUBSTRING, FRO, TO, en el cual se especifica en que letra va iniciar y hasta que letra va

terminar, bien puede ser, primera letra hasta el final, o de la letra n hasta el final o de letra n

hasta letra n-1.

Si se desea ajustar el texto a mayúsculas, minúsculas o como título (primera mayúscula), se

puede llevar a cabo con el uso del bloque TO; durante dicho proceso los caracteres no

alfabéticos no serán afectados.

También existe el bloque de TRIM SPACES FROM, el cual nos permite remover espacios

ya sean de lado izquierdo, derecho o ambos, los espacios que estén en medio no serán

afectados.

Para imprimir palabras en una ventana pop-up se utiliza el bloque PRINT, si se desea

obtener una entrada por parte del usuario, se utiliza el bloque, PROMPT FOR WITH

MESSAGE, mismo que normalmente se asigna a una variable para guardar la entrada del

usuario, esta entrada bien puede ser texto o número (Google, 2015) en la ilustración 10 se

observan estos bloques.

Ilustración 9 Bloques de texto tomada de (Google, 2015)


24

Listas

Las listas son una colección ordenada de ítems, los cuales pueden representar cualquier tipo

de dato o información, normalmente se usan para colecciones de datos en forma de texto,

para crear una lista es suficiente con un bloque CREATE EMPTY LIST, este bloque lo que

hace es crear una estructura de dato del tipo lista sin ningún elemento, es decir, lo crea

vacío.

En cambio cuando se desea crear una lista que cuente ya con ítems definidos se utiliza un

bloque CREATE LIST WITH, esta lista normalmente se asigna a una variable, los elementos

que contiene pueden ser o bien de un solo tipo o incluir variedad de tipos diferentes, es

posible incrementar o disminuir el número de ítems que deseas permitir en la lista, además

que estos ítems puedes moverlos y cambiarlos en la posición que sea, permitiéndote

ordenar o manipularlos a conveniencia (Google, 2015).

En cambio, para hacer una lista que esté definida con un determinado número de copias del

mismo elemento lo que se hace es utilizar el bloque llamado CREATE LIST WITH ITEM,

este bloque necesita de dos parámetros, el primero es donde se especifica el nombre del

ítem y en el segundo parámetro se asigna el número de veces que deseas que se repita este

ítem en tu lista.

El bloque IS EMPTY, funciona muy bien para identificar si existe por lo menos un

elemento en la lista que se está analizando ya que regresará verdadero si es una lista que se

encuentre sin elementos y falso si hay por lo menos un elemento en ella.

Así mismo el bloque LENGHT OF es aplicable en las listas, ya que este es capaz de contar

los elementos de una lista, regresando el valor del número de ítems que se encuentren en

ella, cabe mencionar que este bloque cuenta el total de elementos, es decir, si hubiera

elementos repetidos igual contarían individualmente.

Al igual que en el texto se pueden buscar elementos específicos, por ejemplo con el bloque

IN LIST, FIND, OCCURRENCE OF ITEM, dependiendo de la ocurrencia que se desea

conocer, este bloque regresa el número de la posición en la que se encuentra el elemento

que se envió como parámetro en dicha ocurrencia, también se puede obtener un ítem

específico de las listas, estos ítems normalmente se buscan contando las posiciones, ya sea

comenzando en el inicio hasta el final, o bien en sentido inverso comenzando con el final,

de igual manera configurando un poco, este mismo bloque, se pueden obtener y remover

ítems determinados, o bien solo removerlos, es importante mencionar que con estas

opciones la lista original cambia por completo (Google, 2015).

Es posible que partiendo de una lista se puedan obtener sub-listas, para ello se implementa

el bloque IN LIST, GET SUB-LIST FROM, con el que se obtienen listas partiendo de una

que las contenga, estas sub-listas bien pueden elegirse desde un número de ítem hasta el

final de la lista, pueden ser de un ítem inicial a un ítem final, o del principio a cierto

número de ítem.

El bloque IN LIST, SET, remplaza un ítem identificado por su posición y le asigna un nuevo

valor que se pasa mediante un parámetro, en caso de que lo que se desea sea agregar un

nuevo elemento, se utiliza el boque IN LIST, INSERT AT, con el cual se puede insertar un


25

nuevo ítem ya sea en determinada posición haciendo que el resto se desplacen un número

más, o bien al principio, o agregándose hasta el final de la lista (Google, 2015).

Para generar una lista a partir de una cadena, la cual tendrá un delimitador, se utiliza el

bloque MAKE LIST FROM TEXT, WITH DELIMITER, con este bloque se hace un Split del

texto y con él se genera una lista, así mismo, es posible crear un texto a partir de una lista.

El comando CREATE TEXT FROM LIST WITH DELIMITER, donde generará el texto

colocando el delimitador entre cada ítem de la lista. Las listas también pueden ser impresas

en pantalla con el comando PRINT, y pueden ayudar en los ciclos como el FOR EACH

ITEM (Google, 2015), a continuación se muestran estos bloques en la ilustración 11.

Ilustración 10 Bloques de listas tomada de (Google, 2015)

Colores

Existe una categoría que permite hacer el uso de distintos colores, estos son implementados

de diversas maneras, en la ilustración 12 se observan los distintos bloques que manejan

colores, los cuales pueden ser elegidos, creados o mezclados, para ello es necesario hacer

uso de un bloque denominado COLOUR; este bloque nos permite hacer cualquiera de estas

acciones, con lo que es posible implementar una gama bastante amplia de colores, puesto

que las combinaciones son muy variadas

La forma más sencilla de utilizar e implementar los colores es eligiéndolos de una paleta de

colores predefinida, esta se encuentra junto con el bloque COLOUR PICKER, el cual

aparecerá por defecto en rojo, sin embargo, una vez que se le da clic al bloque aparece una

paleta de colores variada donde el usuario puede elegir a su gusto

También es posible crear colores que no estén definidos en la paleta predefinida, esto se

logra con el bloque, COLOUR WITH, RGB, el cual utiliza un rango de 0 a 100 en lugar de

0 a 255, con este rango, se especifican las cantidades de color que en escala RGB que se

insertarán y darán como resultado un nuevo color. (Google, 2015).

El bloque RANDOM COLOUR, generará un color de manera aleatoria, esto se logra sin

necesidad de asignarle algún valor en específico, puesto que genera una combinación de


26

números aleatorios, mismos que representan un valor en escala RGB y que traen como

resultado un color que se encuentre especificado dentro de la gama de colores existente.

También es posible mezclar colores utilizando el bloque BLENDING COLOURS, sin

embargo con este bloque únicamente es posible realizar la mezcla de dos colores con un

rango de 0 a 1, donde 0 representa el total del segundo color, y 1 el total del primer color,

por lo que la escala que se tiene si bien no es mucha, tampoco está limitada, es importante

resaltar que los colores resultantes son representados en hexadecimal: #RRGGBB, por lo

que si alguno de los colores se imprimiera aparecería ese número hexadecimal (Google,

2015).

Ilustración 11 Bloques de colores tomada de (Google, 2015)

Variables

Es el nombre que se le da a un valor que puede cambiar, estas pueden ser creadas de

múltiples maneras, cada bloque COUNT WITH y FOR EACH, utilizan una variable y

definen su valor, esos valores pueden ser utilizados únicamente dentro de esos bloques,

también pueden ser definidas por el usuario dentro de las funciones y son utilizadas

únicamente dentro de estos procedimientos, son mejor conocidos como argumentos o

parámetros (Google, 2015).

El usuario puede crear variables globales en cualquier momento utilizando el bloque SET,

donde puede ponerle un nombre cualquiera o dejarle con el valor por defecto de ITEM, el

menú dropdown permite bien, dejar el nombre definido por el programa, renombrar la

variable con lo que cambiaría el nombre de todas las variables que tenían ese nombre, o

bien crear una nueva variable sin cambiar ni alterar ninguna otra variable (Google, 2015).

Los bloques para las variables son, SET con lo que asigna el valor a una variable o

creándola si no existe, el bloque GET, provee el valor almacenado en una variable sin

cambiarlo, en la ilustración 13 se pueden observar (Google, 2015).

Ilustración 12Bloques de variables tomada de (Google, 2015)


27

Procedimientos/Funciones

Los bloques de funciones (ilustración 14) tienen la particularidad de poder ser llamados en

cualquier momento del programa y ejecutar otras sentencias de código independientemente

del código principal, ayudando a generar mejores resultados.

Dichos bloques contienen código dentro de una estructura determinada; existen dos tipos en

particular, los primeros no regresan ningún valor, sino que en su propia ejecución realizan

algún cambio en el código global y los segundos devuelven un valor, el primero se llama

TO DO SOMETHING , y el segundo es el TO DO SOMETHING, RETURN, en el primer

caso como se mencionó anteriormente el método o función no regresa ningún valor en

particular, en cambio con el segundo, hay un apartado en el cual se especifica que es

posible regresar alguna información en forma de dato o variable (Google, 2015).

En ambos casos es posible especificar que exista pase de parámetros, esto haciendo

modificación en su engrane superior, e igualmente se puede especificar una descripción

para dicho método.

Para mandar llamar y ejecutar una función hay dos maneras, el bloque IF RETURN, en el

cual al igual que en el condicional IF, realizará una acción en consecuencia al valor que

haya retornado la función, de igual manera se puede únicamente ejecutar el bloque DO

SOMETHING para con el mandar llamar dicha función (Google, 2015).

Ilustración 13 Bloques de procedimiento tomada de (Google, 2015)


28

Alternativas de solución

Hoy en día los proyectos que se enfocan en enseñar a los niños los conceptos básicos de

programación son múltiples y variados, sin embargo, en su mayoría utilizan editores de

texto o frameworks de programación visual basados en sistemas drag & drop, con lo que se

le facilita al niño el uso de dichas herramientas, puesto que se convierten en una especie de

ejercicios o retos que van resolviendo a manera de rompecabezas. Con el uso constante y el

aumento gradual de la dificultad, así como la inclusión progresiva de diferentes y cada vez

más avanzados conceptos de programación, el niño comienza a aprender las bases de la

programación en general de manera autónoma y transparente para él.

Como se mencionó anteriormente, existen muchos proyectos y alternativas que introducen

estos conceptos a los niños, a continuación, se enlistan y describen algunos de ellos que son

muy parecidos a la plataforma que se desarrolló.

Scratch

Scratch es un lenguaje de programación visual que se encuentra orientado principalmente a

la creación de juegos que facilita crear historias interactivas, juegos y animaciones y

compartir sus creaciones con otras personas en la Web. Fue creado por el Instituto

Tecnológico de Massachusetts (MIT), destinado principalmente a niños y jóvenes

permitiendo explorar y experimentar (Rios & Pizzolanti, s.f.).

La plataforma se basa en el espiral del pensamiento creativo permitiendo a los niños crear

sus propios juegos, historias interactivas, animaciones, música y arte y de esta forma

desarrollar el pensamiento creativo a partir del juego; por lo cual se consideró el "estilo

jardín infantil" que es caracterizada por una espiral de imaginar, crear, jugar, compartir,

reflexionar y de nuevo imaginar (ilustración 15). Esta espiral ayuda a desarrollar el

pensamiento creativo para cualquier edad, que es una de las habilidades críticas para

nuestra sociedad (E.scenarios, 2011).

Ilustración 14 Espiral del pensamiento creativo tomada de (E.scenarios,

2011)


29

Esta aplicación informática destinada principalmente a los niños y permite explorar y

experimentar con los conceptos de programación de ordenadores mediante el uso de una

sencilla interfaz gráfica (ilustración 16); ofreciendo posibilidades educativas que hace que

la programación sea más atractiva y accesible para todo aquel que se enfrente por primera

vez a aprender a programar.

Ilustración 15 Entorno de desarrollo Scratch tomada de (Makeblock, 2015)

Es usado por estudiantes, escuelas, profesores y padres para crear animaciones de forma

sencilla, también puede usarse para un gran número de propósitos educativos,

construccionistas y de entretenimiento, como proyectos de ciencias o matemáticas,

incluyendo simulación y visualización de experimentos.

Actualmente es una de las más utilizadas por diferentes instituciones públicas para

fomentar y mejorar el razonamiento lógico en los alumnos de dichas instituciones por la

facilidad de uso debido a la interfaz amigable que maneja.


30

App inventor

Es una plataforma de Google Labs para crear aplicaciones de software para el sistema

operativo Android de forma visual haciendo uso de herramientas básicas donde se puede ir

enlazando una serie de bloques para crear la aplicación (MIT, 2016).

Con esta plataforma se pueden crear diferentes aplicaciones simples, pero cabe mencionar

que estas están limitadas por su simplicidad de esta, pese a eso permiten cubrir un gran

número de necesidades básicas en un dispositivo móvil.

App Inventor fue lanzada en el 2010 (Google, 2010), dirigida principalmente a personas

que no se encuentran familiarizados con términos de programación.

Esta aplicación ha sido una de las grandes innovaciones de los últimos años por parte de

Google debido a que ha permitido a cualquier persona realizar sus propias aplicaciones con

diferentes objetivos, ya sea para satisfacción y comodidad personal o incluso para llenar sus

bolsillos y monetizarlas (App moviles, 2014).

La interfaz que maneja es muy sencilla de utilizar y la programación que presentan basada

en bloques en la siguiente imagen (ilustración 17) se muestra parte de la interfaz que

maneja App Inventor.

Ilustración 16Entorno de desarrollo App Inventor tomado de (MIT, 2016)


31

Briko

Briko es una plataforma que forma parte de un sistema mayor que involucra otras

tecnologías (diseño y modelado 3D, impresión 3D, etc.) por lo cual hace uso de un propio

IDE que se adaptara a las necesidades de los proyectos.

Briko permite hacer proyectos de hardware y robótica de manera sencilla y amigable,

mediante pocas instrucciones de código. El objetivo es crear nuevos desarrolladores,

personas makers que tengan ganas de hacer cosas posean un enfoque mucho más parecido

al que se busca lograr con el desarrollo de esta plataforma ( Adriano, 2015).

Es un kit con el cual cualquier persona, desde los 8 años, puede aprender electrónica,

robótica y programación de manera fácil y divertida, mientras crea una cantidad infinita de

proyectos de robótica y tecnología; el kit más completo se encuentra compuesto por una

seria de actuadores que se muestran en la ilustración 18.

Ilustración 17 Kit Premium tomada de (Briko, 2015)

El objetivo es fomentar las ganas de crear y entender la tecnología en jóvenes y cualquier

persona interesada. Al utilizar Briko se desarrolla habilidades como la creatividad y el

pensamiento lógico. De esta manera crearemos una nueva generación de personas que sean

capaces de desarrollar tecnología por sí mismos desde temprana edad, una generación de

creadores y no de consumidores (Briko, 2015).

Esta plataforma es una de las completas ya que no solo tiene su IDE de desarrollo, sino que

también maneja una serie de dispositivos electrónicos que permiten obtener un producto

tangible.

Briko se divide en 3 áreas fundamentales que facilitan el uso que son electrónica, mecánica

y programación

Electrónica

En esta área se hace referencia todos los componentes electrónicos, los cuales fueron

reducidos a pequeños módulos llamados Brikos que se conectan a un cerebro que controla a


32

todos llamado Bk7. La conexión entre los Brikos y el cerebro se realiza mediante un cable

de rápida conexión.

A continuación, se muestra una imagen con el Bk-7 que es el encargado de controlar cada

uno de los diferentes Brikos.

Ilustración 18 Cerebro Briko tomada de (Briko, 2015)

Los Brikos se dividen en dos los de salida, que son aquellos donde puedes visualizar los

resultados de la programación.

Ilustración 19 Brikos de salida tomada de (Briko, 2015)


33

Los brikos de entrada que permiten recabar información que va generar una seria de

acciones respecto a lo recibido para posteriormente mostrarlo en alguno de los brikos de

salida; dichos brikos se dividen en 2 como se muestra en la ilustración 21, los de entrada

humana que son aquellos en donde el ser humano hace la modificación de estado mientras

que los sensores como su nombre lo dice censan diferentes estados que pueden darse en el

medio

Ilustración 20 Brikos de entrada tomada de (Briko, 2015)

Mecánica

En el área de mecánica se hace referencia a una serie de piezas que permiten construir los

diferentes proyectos y así poderles dar una estructura a cada una de las ideas planteadas; los

brikos se pueden unir prácticamente con cualquier material.

Las piezas que componen de una base de madera grande (A), base octagonal para el

Bk7(B), placa mediana para Brikos (C), viga para unir piezas(D), unión octagonal (E) y

unión forma L (F) los cuales se pueden apreciar claramente en la ilustración 22.

Ilustración 21 Piezas mecánicas Briko tomada de (Briko, 2015)

A B C D E F


34

Programación

Dentro de la programación Briko cuenta con 2 formas de programar que son las siguientes:

IDE: Usa un lenguaje basado en Arduino, con pequeñas modificaciones para que

programar en código sea casi tan fácil como hablar (ilustración 23).

Ilustración 22 IDE briko tomada de (Briko, 2015)

Briko web: es una herramienta web para programar Briko por medio de bloques, de esta

manera es más sencillo entender de manera gráfica la programación (ilustración 24).

Ilustración 23 Briko web tomada de (Briko, 2015)


35

Esta plataforma es una de las más completas y similar al proyecto a realizar, sin embargo,

es un sistema que difícilmente puede ser escalable, ya que tiene un lenguaje “propio” y está

configurado para únicamente funcionar con los sensores y aditamentos que vienen con el

kit.

Fase de desarrollo

Instalación de Blockly

Para comenzar con la etapa de desarrollo se procedió con la instalación del framework

Blockly y la creación de un nuevo proyecto, para ello se clonó el repositorio que tiene

Google en Github en el cual se encuentran todos los archivos necesarios para que funcione

embebido en un proyecto de HTML normal.

Gracias a que implementa como base funciones creadas en JavaScript, todo el entorno de

desarrollo con Blockly es del lado del cliente, por lo que las dependencias necesarias deben

de ir embebidas en el proyecto. Todas las instrucciones que permiten que Blockly funcione

de manera correcta se encuentran en un archivo JavaScript comprimido llamado

blockly_compressed.js, el cual se encuentra compreso para fines de optimización de

recursos, de igual manera todas las características globales de los bloques ya sean propios

del framework o personalizados, igualmente se encuentra en un archivo comprimido

llamado blocks_compressed.js.

Además de estos archivos, el directorio de Blockly se compone por las siguientes carpetas:

Appengine: aquí se almacenan los archivos que permiten configurar de manera

opcional el servidor de Blockly, permitiendo almacenamiento en la nube, compartir

códigos, guardar programas y cargarlos mediante una URL única (Fraser, 2016).

Blocks: esta carpeta almacena una serie de archivos JS que contienen los códigos de

las estructuras que generan los diferentes tipos de boques.

Core: esta es la carpeta más importante, ya que en ella se encuentran todos los

scripts que le brindan a Blockly todas sus funcionalidades y características.

Demos: este directorio almacena algunos ejemplos que ejecutan las características

de Blockly.

Generators: esta carpeta está directamente relacionada con la de Blocks, ya que aquí

se contienen los códigos de las salidas de cada uno de los bloques.

i18n: aquí se encuentran los archivos necesarios para el manejo de caracteres

especiales.

Media: dentro de esta carpeta se colocan todos los recursos necesarios para la

interfaz, ya sea imágenes, audios, iconos entre otras cosas.

Msg: aquí se contienen archivos que permiten la traducción de la interfaz a

múltiples idiomas.

Tests: es un directorio que contiene un corto ejemplo de las funcionalidades de

Blockly

Una de las características más importantes de Blockly es la capacidad de traducir a

diferentes lenguajes de programación, los más usuales se encuentran en una serie de

archivos también escritos en JavaScript, entre ellos destacan traductores para JavaScript,

dart, php, Python, entre otros.


36

Para la creación del proyecto se utilizaron algunas demos que venían con el framework,

estas fueron, la de blockfactory y generator, el primer ejemplo se utilizó para crear algunas

pruebas de nuevos bloques, puesto que posteriormente se necesitaría crear nuestros propios

bloques que ejecutarán las funciones que necesitaremos. Con el ejemplo del generator se

tomaron las funciones que nos permitían obtener el código del workpsace y ejecutarlo.

Otro de los ejercicios demostrativos que nos ayudaron bastante, fue el del interpreter, el

cual implementa un intérprete de JavaScript en un sandbox, permitiendo la ejecución

arbitraria del código línea por línea. Este intérprete depende de un analizador sintáctico de

JavaScript.

Canvas

Gracias a que los propósitos del proyecto involucran la manipulación tanto de widgets

virtuales como de hardware de uso general, fue necesario implementar alguna herramienta

que permitiera mostrar que el código ejecutado está correcto, para ello y gracias a diversos

ejemplos que nos encontramos en internet, se pensó en utilizar algún método que

permitiera hacer dibujos con los bloques, dándole al niño pequeños retos que incluyeran

algunos conceptos de programación.

La mejor solución fue la implementación de un elemento de tipo canvas, que es un nuevo

elemento introducido en HTML5, el cual puede usarse para dibujar gráficos a través de

scripting, normalmente con JavaScript (Mozilla Developer Network, 2014). Este elemento

se usa normalmente para dibujar gráficas sobre la marcha con el scripting, es sólo un

contenedor de las gráficas por lo que es imperativo el uso de un script para poder dibujar

una gráfica, tiene varios métodos para dibujar diferentes figuras, caminos, rectángulos,

círculos, texto e incluso agregar imágenes (w3schools.com, 2016).

Para poder manejar un canvas es necesario trabajar con los contextos, este elemento

usualmente utiliza un contexto en 2d, una vez teniendo el contexto del área de trabajo en

una variable, era posible implementarle diversos métodos que permitieran, dibujar, escribir,

rellenar, pintar y cargar imágenes dentro del área definida para el canvas.

En su mayoría se utilizaron funciones que nos permitían dibujar caminos, mover una

imagen por todo el canvas, hacer rotar la imagen, cambiar el color del fondo, cargar una

imagen de fondo entre muchas otras cosas.

Estas características nos fueron de mucha utilidad ya que, al tener la capacidad de dibujar

sobre un espacio dentro de la plataforma, nos abrió muchas posibilidades en cuanto el tipo

de ejercicios y la manera en la que se desarrollarían para poder enseñar los conceptos

básicos de programación. Esto nos dio como idea utilizar las funciones creadas con Bockly,

para ejecutar sentencias que dibujaran, rotaran, pintaran y cargaran imágenes en el canvas,

con lo que se lograría el objetivo de tener una pre visualización de la ejecución del código,

controlando widgets virtuales.

Definición de ejercicios a realizar

En esta fase del proyecto se definieron los ejercicios que se desarrollarían para realizar la

demostración funcional, estos ejercicios fueron pensados para que fueran simples, que

incluyeran las bases de la programación inicial dando una introducción amplia, con lo que


37

se sentarán las bases necesarias para un futuro aprendizaje, de acuerdo a la investigación

previa que se hizo y resultado del marco referencial en cuanto a los mejores conceptos para

enseñar a los niños, los temas que se consideraron para este proyecto fueron, secuencias,

condicionales, ciclos y eventos, luego de un análisis que realizaron nuestros asesores se

definieron 4 ejercicios que cumplirían con las temáticas anteriores, a continuación se

describen los ejercicios propuestos.

Ejercicio 1

Objetivo: Con bloques que permitan desplazar el widget dejando un rastro pintado, hacer

que el niño dibuje un cuadrado que simule el perímetro de una casa.

Conceptos aplicados: Con este ejercicio, el niño conocerá las secuencias simples, ya que

desarrollará un programa que irá realizando una secuencia de instrucciones una por una.

Ejercicio 2

Objetivo: Se pretende que el niño mueva un automóvil por un recorrido establecido, en la

carretera que representa la secuencia habrá semáforos, lo que le indica al niño que debe

hacer un alto antes de continuar.

Conceptos aplicados: Se continúa con las secuencias para reforzar lo aprendido, y se agrega

ahora el concepto de Wait, lo que le incrementa la dificultad del tema de secuencias, este

ejercicio es complementario del anterior.

Ejercicio 3

Objetivo: Con este ejercicio se pretende que el niño desarrolle un programa que

dependiendo de una entrada del usuario, en este caso un click, mueva un elevador N

cantidad de pisos (dependiendo de la entrada).

Conceptos aplicados: Se busca introducir el concepto de condicionales, puesto que deberá

utilizarlas para hacer una comparación de la acción a realizar dependiendo de la entrada que

el usuario haya proporcionado

Ejercicio 4

Objetivo: Con los mismos bloques utilizados en el primer ejercicio, el niño deberá construir

un puente repitiendo una secuencia 5 veces, esto con el objetivo de forzarlo a usar algún

método que le ahorre tiempo.

Conceptos aplicados: Con este ejercicio el niño aprenderá el concepto de ciclos, además de

reforzar las secuencias puesto que repetirá la misma secuencia de código 5 veces.

Definición de bloques finales

Una vez definidos los ejercicios que se desarrollarán, se hizo un análisis a detalle para

identificar aquellas funciones que serían necesarias para permitir realizar con éxito dichos

ejercicios, aunado a esto se encontraba la necesidad de la creación de los bloques

personalizados que ejecutarían estas funciones, después de este minucioso análisis los

bloques que fueron creados para cumplir con los objetivos y aquellos que se pensaron que

en un futuro podrían ser útiles se muestran en la siguiente tabla (tabla 1).


38

Tabla 1. Descripción de bloques

Nombre ImagenParámetros de

entradaFunción que ejecuta Descripción

mover

Como parámetro

recibe la cantidad de

pasos que dará y la

dirección a la que irá

forward("n"), backward("n"),

upward("n"), downward("n")

Con este bloque es

posible desplazar al

widget N pasos en

cualquiera de las

direcciones mostradas

mover_pintando

Los parámetos que

recibe es e número de

pasos, la dirección a la

que irá y el color del

rastro que dejará

forwardPaint("n","#fff"),

backwardPaint("n","#fff")

Permite despazar el

widget N pasos

dejando un rastro de

color

girar

Recibe dos

parámetros, uno que

representa el angúlo

de giro y otro la

dirección hacia la que

girará

rotar(angulo, "lado")

Este bloque permite

rotar el widget N

número de grados ya

sea hacia la derecha o

la izquierda

wait

Recibe como

parámetro la cantidad

de segundos a esperar

wati(secs)

Deja al widget sin

acción alguna por

determinado tiempo, si

esta definido prende

intermitentes en señal de

espera

blinker

Recibe el lado en el

cuál estará prendida la

intermitente

blinker("lado")

Realiza la simulación de

encendido de

intermitentes en un

widget similar a un

auto

lights

Los parámetros de

este bloque son la

ubicación de las luces

y si las encendera o

apagará

lights("luz delantera","luz

trasera", "encendido")

Permite encender o

apagar las luces ya sean

las frontales o las

traseras

sonido

Recibe como

parámetro el sonido

que va a ejecutar

(deben estar cargados

en el sisema)

sount("archivo mp3")Reproduce el audio que

el niño haya elegido

eventos

Este bloque no recibe

parámetro, sino que

embebe código dentro

de él

canvas.addEventListener("mou

sedown", getPosition, false);

Agrega un listener para

que el niño pueda hacer

click en la pantalla y

elegir alguna opción del

canvas

floor

Este bloque no recibe

parámetro, pero

provee el valor de la

opcion elegida por el

niño

piso="valor elegido"

Representa el piso que

el niñ elige en el

ejercicio 3


39

Desarrollo de los ejercicios

Habiendo ya credo los bloques necesarios con las funciones para cumplir con los ejercicios,

se comenzó el desarrollo de los mismos, primero se hizo un análisis del ejercicio en general

y se realizó el diseño de las pantallas para cada nivel, posteriormente se pensó en un

método de validación del ejercicio.

Con el fin de que se pudiera evaluar si el niño realizó o no de manera correcta el ejercicio, a

continuación, se muestran las pantallas de cada ejercicio, así como una explicación en

general de la manera en la que se realizó la validación del mismo.

Para el primer ejercicio se optó por hacer la simulación de una colonia vista desde arriba,

en la cual se encontraban dos siluetas de casas dibujadas, las cuales servirían de referencia

para el niño y que este pudiera pintar la silueta utilizando los bloques desarrollados

previamente. En la ilustración 25 se muestra el wireframe que se utilizó para el ejercicio 1.

Ilustración 24 Wireframe del ejercicio 1

Como el objetivo de este ejercicio era lograr enseñar secuencias, el widget recorrería un

camino previamente definido, para validar que el niño hiciera el recorrido correctamente, se

creó un arreglo que contenía las coordenadas por las que el widget debía de pasar para

tomar como válido el ejercicio.

La función que marcaba el camino por el que el widget iba recorriendo, hacia el uso de un

arreglo en el que almacenaba la posición inicial y final de cada uno de los pasos que se

habían programado, a su vez, esta función alimentaba otro arreglo en el que se guardaban

las últimas posiciones de los pasos, los cuales representan los puntos a los que el widget

había llegado.

Para comprobar ambos recorridos, se ejecutaba una función que hacia una comparativa

entre ambos arreglos (solución correcta y respuestas del niño), se hacía una comparación

elemento por elemento y en caso de haber una coincidencia del 100% se tomaba como

válida la respuesta.


40

Tomando en consideración que ninguna persona piensa de la misma manera, se pensó en

esta función para que tomara valido ambos sentidos del recorrido, es decir que, si el niño

comenzaba el recorrido en un sentido u en otro, siempre y cuando haya hecho los pasos

correctos, el ejercicio era tomado como válido.

En el segundo ejercicio se tomó de nuevo el concepto de vista superior, pero ahora teniendo

como referencia un circuito marcado por una línea punteada, lo cual significa el recorrido

que el niño debe realizar con el widget, además se agregaron semáforos, mismos que

representan las ubicaciones donde el niño deberá hacer un alto para completar el ejercicio

correctamente. En la ilustración 26 se muestra el wireframe que ubica la posición de los

semáforos donde se debía detener el niño.

Ilustración 25. Wireframe y ubicación de los semáforos para el ejercicio 2

Con este ejercicio se pretendía reforzar las secuencias y agregar un nuevo concepto de

espera en la ejecución de un código, por lo que el widget, debía de recorrer un circuito y

hacer paradas un tiempo determinado en distintos puntos, marcados por pequeños

semáforos.

Tomando esto en consideración y poniendo como referencia el ejercicio pasado, se creó un

arreglo de solución en el que se guardaron las ubicaciones de los semáforos en el mapa, así

como el tiempo de espera definido para cada uno de ellos.

A diferencia del ejercicio 1, ahora se utilizó el mismo bloque de espera (wait) para crear el

arreglo respuesta del niño, cada vez que este bloque era ejecutado, guardaba las posiciones

en coordenadas del widget, así como el tiempo de espera que el niño programó.

Así pues, no importando el orden en el que se haya recorrido el mapa, siempre y cuando el

widget recorriera todo el circuito y se haya detenido en la ubicación correcta y con el

tiempo correspondiente, el ejercicio se tomaba como válido.

El tercer ejercicio fue pensado con una vista lateral de un edificio al fondo, contaba con un

avatar colocado en la parte inferior del mismo, y ya que el niño debía de indicar el piso


41

hacia el que el avatar debía de subir, se ubicaron también una serie de botones a un costado

del edificio.

Estos botones le indican los pisos posibles a los que el avatar puede ir, dándole al niño la

facilidad de elegir cualquiera de ellos. En la siguiente ilustración 27 se muestra el

wireframe de referencia para realizar este ejercicio

Ilustración 26. Wireframe de referencia para el ejercicio 3

En este ejercicio se vio un concepto diferente, aquí era necesaria la interacción del usuario

en el canvas, la intención era que el niño realizara un programa en el que, dependiendo del

piso elegido por el usuario, el widget se moviera al piso correspondiente.

Para ello se implementó un event listener con el que se recogían las coordenadas del click

del niño y estas, dependiendo del rango en el que encontraran le daban el valor

correspondiente al piso elegido por él.

Para evitar que los valores de coordenadas sobrepasaran el rango permitido, se hizo una

validación para que únicamente se aceptara valores correspondientes a los botones

colocados en el canvas, de tal modo que no se tendrá otra opción de movimiento más que el

establecido dentro del ejercicio propuesto.

El valor recolectado por el event listener se guardaba en una variable, posteriormente se

realizaba una verificación de en qué lugar se encontraba el widget, de esta manera se hacía

una comparación entre las coordenadas finales del mismo y la variable que almacenaba el

piso elegido por el niño. Si las coordenadas finales correspondían al piso elegido, el

ejercicio se daba como válido, en caso de que estas no coincidieran se mostraba un mensaje

que lo invitaba a intentarlo nuevamente para lograr completar el ejercicio.

Para el ejercicio 4 se simulo un rio y encima de él se creó la silueta de un puente con vista

lateral, esta vista sirve como referencia al niño para saber que parte del puente debía pintar,

ya que se plantea que el niño pudiera “construir” el puente, repasando con ello algunos

temas vistos anteriormente, e introduciendo nuevos conceptos que fomenten y permitan el

desarrollo de nuevas habilidades técnicas.


42

El objetivo era que el niño utilizara ciclos, por lo que el puente es una repetición de una

secuencia, la cual se pensó de manera minuciosa para que pudiera ser aumentada o

disminuida a cualquier número de repeticiones sin problema alguno, dando con ello

ventajas al momento de escalar la dificultad de los ejercicios. La ilustración 28 demuestra

el wireframe para este ejercicio

Ilustración 27. Wireframe para el ejercicio 4

Ya que este ejercicio implementaba el uso del bloque de pintar, se tomó como referencia el

método de solución del ejercicio 1, con la diferencia de que no permitía un orden distinto

de ejecución, ya que era imperativo que la secuencia con la que se respondía el ejercicio

fuera la misma que se presentaba.

A diferencia del ejercicio 1, en este problema se presentaba el uso de ángulos no rectos,

por lo que el cálculo de los puntos finales de cada paso era muy impreciso, para reducir

esto, lo que se hizo fue comparar las coordenadas finales de cada paso con un área que

definía un rango de coordenadas, con lo que permitía una pequeña variación de posición y

daba como valido el paso.

Al igual que el primer ejercicio, si el total de coordenadas coincidía con el arreglo de

respuesta, el ejercicio era considerado como correcto.

Implementación de funcionalidades de la plataforma

La plataforma en desarrollo al ser un entorno de desarrollo y programación, incluye como

cualquier otro IDE ciertas funcionalidades que le permiten brindar al usuario una mejor

experiencia y poner a su alcance diferentes acciones que le otorguen mayor control sobre lo

que se encuentra desarrollando, para ello luego de un análisis de aquellas características que

en su mayoría comparten los diversos entornos de programación, se optó por agregar 4

funcionalidades básicas que le darán al usuario una mejor experiencia en el manejo de

nuestra plataforma.

Tomando en cuenta que nuestra plataforma es principalmente para introducir a los niños y

jóvenes al mundo de la programación, el poner algunas opciones avanzadas era innecesario,

por lo que se definieron las siguientes funcionalidades, las cuales son descritas más

adelante:


43

1. Ejecutar código.

2. Mostrar código Javascript.

3. Guardar el programa en XML.

4. Cargar archivo XML.

Ejecutar código

Esta función es esencial para los propósitos de la plataforma, ya que es la que pone en

acción el código que el niño ensambló, esto se logró mediante la implementación del

interprete “JS Interpreter”, en el cual mediante algunas funciones de Blockly recibía las

sentencias a ejecutar, y paso a paso las iba desarrollando, mostrándole al programador en

que momento de la ejecución se encontraba su programa, facilitando la depuración y la

detección de errores de lógica.

Este intérprete es muy potente y flexible, facilitó en gran medida las labores que se tenían

pensadas para esta funcionalidad de la plataforma, además de que le brindo una excelente

presentación al dar la oportunidad de resaltar los bloques que se encontraban en ejecución

en determinado momento, también permitió el control sobre la misma ejecución,

otorgándonos a nosotros como desarrolladores un mayor dominio sobre la plataforma.

En la ilustración siguiente (ilustración 29), se observa una captura de un código con el

bloque resaltado

Ilustración 28 Código en ejecución

Mostrar código

La importancia de esta funcionalidad, radica en que se pretende comenzar a inmiscuir a

todos los jóvenes que utilicen la plataforma en el área de la programación, por lo que es una

excelente opción darles la oportunidad de ver cómo se ve su código ya en sintaxis real.

Para ello se hizo uso de una función de Blockly que te permite traducir todo lo que hay en el

workspace a sintaxis convencional de muchos lenguajes, en este caso se optó por

convertirlo en lenguaje Javascript, ya que en el estudio que se realizó en la fase de


44

investigación se determinó que era el lenguaje que tenía el equilibrio adecuado entre

facilidad de entendimiento y potencia.

El código traducido era mostrado en una ventana de tipo Alert del mismo de Javascritp,

puesto que el objetivo era simplemente mostrarlo y no era necesario hacer nada más. En la

siguiente ilustración 30, se muestra un ejemplo de la ejecución de este componente.

Ilustración 29 Captura de pantalla de Alert con código

Guardar programa en XML

Es de suma importancia darle la opción al niño de guardar su proyecto no solo de manera

remota en la base de datos, son también otorgarle la oportunidad de guardar su proyecto de

manera local en su ordenador.

Para ello se utilizó el manejador de archivos Blob, el cual es la representación de un objeto

de tipo fichero que contiene datos inmutables. Los Blobs representan datos que no se

encuentran necesariamente en un formato nativo de JavaScript. (Mozilla Developer

Network, 2015)

Una de las características fundamentales de los archivos Blob, es que tiene diferentes

maneras de tratar la información brindada, una de ellas y la que más nos interesa, es el

manejar archivos de tipo text/plain;charset=utf-8, con lo que se indica que los archivos

resultantes serán archivos de texto, bajo la escritura convencional mexicana.

La manera en la que se lograba, era obteniendo el código del workspace con la función

Blockly.Xml.workspaceToDom, con lo que se cargaba en el DOM el workspace convertido

en cadena de XML. Una vez que el código se encontraba en el DOM, lo que se hacía era

implementar la función Blockly.Xml.domToPrettyText con lo que se obtenía la cadena de

tipo XML, convertida en una cadena con indentación y formato.

Finalmente haciendo uso de una función prompt se pedía el nombre con el que se deseaba

guardar el archivo, y una vez dado el nombre, la cadena ya con formato se enviaba a un


45

constructor Blob, el cual convertía dicha cadena en un archivo de extensión XML, el cual se

descargaba en la computadora del usuario, dándole así una copia del código que había

realizado. En las siguientes ilustraciones se puede ver el prompt para ponerle el nombre

(ilustración 31), así como el archivo descargado (ilustración 32)

Ilustración 30 Prompt para el nombre

Ilustración 31 Archivo descargado

Cargar archivo XML

Otra de las funciones que se consideraron importantes fue darle al usuario la posibilidad de

cargar un archivo o proyecto desde su computadora, esto para darle la facilidad estar

trabajando con un proyecto sin necesidad de conectarse a internet, aunque con esto

obviamente no se puede hacer el guardado en la base de datos.

También esta característica le permitiría probar el código de sus compañeros sin afectar el

archivo de ellos en la base de datos, aunado a esto le brindaba la posibilidad seguir

trabajando en un proyecto donde lo dejo, sin necesidad de haberlo almacenado en la base de

datos, le permitiría tener sus códigos guardados como evidencias entre algunos otros usos.

Para lograr esta característica, se hizo uso de la etiqueta input de tipo file, de HTML5, este

tipo de etiqueta te permite acceder a los archivos de la computadora y cargarlos hacia tu

página. Para esto se implementó un listener en el cual, una vez que un archivo había sido

cargado en la página, habilitaba un botón de subida mediante en el que se creaba una

variable de tipo FileReader, al momento de ejecutarse la función onload, de la variable

objeto, se hacia la lectura del archivo como texto, el contenido leído se almacenaba en una

variable mediante el método event.target.result propio del objeto FileReader, una vez

creada esta variable que contenía la información del texto, se limpiaba el workspace.

Posteriormente el resultado de la lectura almacenado en la variable se subía al DOM

pasándose como parámetro mediante la función Blockly.Xml.textToDom, una vez ahí el

contenido, se implementaba la función Blockly.Xml.domToWorkspace, dando como


46

parámetros el workspace y la variable del DOM donde se almacenaba el contenido del

archivo.

De esta manera, el archivo XML, era cargado y desplegado en el workspace, y el niño ya

podía editarlo. En la ilustración 33 se muestra la ventana que emergía para la selección del

archivo

Ilustración 32 Ventana para elegir archivo

Pruebas y testing de la plataforma

Se realizaron algunas pruebas con los asesores presentes con el objetivo analizar si los

resultados que se habían obtenido cumplían con lo que se estableció en un inicio como

objetivo de cada ejercicio, además se hizo una revisión y análisis de los tiempos que se

habían contemplado en comparación con los tiempos reales, para determinar la eficacia del

trabajo desarrollado.

Al final de esta etapa se hicieron algunas pruebas con el objetivo de asegurar la calidad de

lo que se había desarrollado hasta este punto, para ello se tuvo un análisis completo de los

objetivos del sistema, con lo que surgieron algunas ideas de actividades para demostrar que

el software cumplía con los objetivos planteados, fue entonces que se probaron todos los

ejercicios anteriores en distintos navegadores, se hizo un registro de las anomalías y de las

situaciones en las que los objetivos no se cumplían, se trabajaron en las correcciones

necesarias para que los resultados pudieran empatar con los estándares que se deseaban.

Los navegadores que se utilizaron para realizar las pruebas fueron:

Chrome 50.

Firefox 46.

Edge 25.1, Internet Explorer 11.

Safari for Windows,


47

Cabe mencionar que dichas pruebas se realizaron todas en un sistema Windows 10 con

procesador AMD A8 y Safari 9 en MacBook Pro 13” Intel i5. En la siguiente tabla 2 se

muestran las características que se probaron en los navegadores y los resultados obtenidos.

Tabla 2. Resultados de pruebas por navegador

Navegador Mostrar

código

Ejecutar

Código

Local

Storage

Guardar

Archivo

Cargar

Archivo

Chrome 50 SI SI SI SI SI

Firefox 46 SI SI SI SI SI

Edge 25.1 SI SI NO SI SI

IE 11 SI SI NO SI SI

Safari for Windows SI SI* SI NO SI

Safari 9 SI SI* SI NO SI Nota: Los * significan que, si funcionaba, pero había algún detalle

Problemas con Edge e Internet Explorer

En general estos dos navegadores de Microsoft funcionaron bastante bien, la única

problemática que surgió fue al momento de hacer el guardado local del código de los

bloques, ya que este se hacía en variables de sesión o Cookies, y se descubrió que ambos

navegadores no almacenan estas variables cuando son ejecutadas de modo local, por lo que

se tuvo que montar un servidor local en XAMPP y en el hacer pruebas, las cuales tuvieron

éxito. Este detalle no representa mayor problema puesto que la plataforma siempre estará

montada en un servidor.

Problemas con Safari

Safari tiene un comportamiento bastante distinto al resto de navegadores probados, fueron

algunos los problemas que se tuvieron con este navegador, en un momento se pensó no

utilizarlo puesto que no es tan popular incluso entre usuarios de Apple, sin embargo, es

muy importante porque la aplicación que se desarrolla está basada en este navegador.

Primero que nada, este navegador no cargaba correctamente las imágenes, puesto que estas

se instanciaban y safari lo hace una sola vez, por lo que al refrescar daba por hecho que

estaban cargadas y no lo hacía de nuevo, para resolver esto, se tuvo que instanciar cada vez

que se refrescaba el navegador y con esto quedó resuelto.

Al momento de ejecutar el código, funcionaba de manera correcta en la mayoría de las

funciones, salvo un detalle que estaba en la función de pintar, ya que no pintaba del color

asignado el rastro del widget, después de hacer un sinnúmero de pruebas y buscar el error

se encontró que por alguna razón que desconocemos safari ignoraba el valor de la variable

que contenía el color, por lo que se tuvo que implementar el método .data o .valueOf() de la

variable para que reconociera el valor hexadecimal del color.

Safari por sí mismo no es capaz de descargar un archivo desde internet hacia la

computadora, sino que en el mismo navegador lo abre y muestra el contenido del archivo o


48

documento que se intentó descargar, esto no es lo más óptimo puesto que se pretende que el

usuario pueda tener en su computadora una copia de código que está desarrollando.

Luego de una investigación amplia al respecto, se consiguió que fuera capaz de descargar el

archivo a través de la función window.open y cadenas URL, este método consigue

descargar correctamente el código del niño, sin embargo lo descarga como archivo tipo

descocido y sin nombre de archivo, no es lo más óptimo pero para fines prácticos se dejó

así, posteriormente se continuará indagando para mejorar este problema.

Migración a RoR

Haciendo un análisis de las actividades faltantes, se vio en la necesidad de montar la

plataforma en un servidor, para comenzar a hacer pruebas en un entorno real, para ello y

tomando en cuenta que la plataforma completa se encuentra montada en un servidor

Heroku bajo desarrollo en Ruby on Rails, se optó por traducir el proyecto de ser sólo HTML

y JS a ser desarrollado bajo este framework de Ruby.

Primero que nada se comenzó haciendo un nuevo proyecto bajo RoR desde 0, una vez

realizado, se investigó acerca de la manera en que este framework maneja los recursos, a

pesar de que Rails maneja la arquitectura de Modelo, Vista, Controlador, únicamente se

utilizaron las partes correspondientes a Vista y Controlador, puesto que las pruebas que se

querían hacer eran enteramente de las características de la plataforma, tales como ejecución

de código, guardado local del código en formato XML, cargado de archivo entre otros, por

lo que la manipulación de la base de datos se delegó al equipo que administra la plataforma

global.

Una vez revisada la documentación, se pasó a migrar los archivos y scripts que permiten

que Blockly funcione, para esto se migraron todos los archivos js a la carpeta de Assets, en

el directorio correspondiente a los scripts, de igual manera todos los archivos de estilos

extensión css se agregaron al directorio de stylesheets, y por último, todo el set de imágenes

se colocaron dentro del directorio images.

Después se comenzó con la migración de los paneles, ya que no se conocía como manejar

el mostrar distintas vistas dentro de un mismo controlador, se tuvo que crear un controlador

por cada uno de ellos, de esta manera se generaron los métodos show correspondientes a

cada uno y era posible la navegación entre paneles.

Ya que se podía acceder a las distintas vistas, se hicieron los cambios necesarios para

llamar los recursos ahora de la manera en que se debe de hacer en RoR, para de esta forma

dejar a punto la aplicación corriendo ya bajo este framework, con las funcionalidades JS y

HTML embebidas, finalmente se realizaron las pruebas de las funcionalidades

correspondientes de los paneles para asegurarse de que todo seguía funcionando de manera

correcta.

Montaje y pruebas en Heroku

Habiendo logrado la migración a RoR, se pasó a crear un nuevo directorio en Heroku, con

una cuenta gratuita se estableció un servidor en el cual se montó el nuevo proyecto. Para

ello se tuvo que aprender a manejar la administración de archivos desde consola, se hizo el


49

enlace del proyecto al repositorio en Heroku y se llevaron a cabo todos los pasos para hacer

Deploy.

Hubo algunas complicaciones desde un principio, primero, a pesar de que no se utilizó la

base de datos, en el proyecto local de RoR, estaba diseñada en SQLite, y en Heroku, debe

de estar en Postgres, por lo que se tuvo que realizar este cambio.

Se encontró que algunos cambios en el archivo no se reflejaban en la plataforma, a pesar de

que se hacían los commits y los push al repositorio de manera correcta, luego de un poco de

investigación, se encontró que esto se debía a que todos los recursos debían de pre-

compilarse cada vez que existiera una modificación, por lo que además de los commits y

push, era necesario hacer previamente una sentencia de pre-compilación.

Aplicando dicha configuración ya era posible ejecutar los cambios que se hicieran al

proyecto, y de esta manera, poder probar las funcionalidades ya corregidas y con las nuevas

características implementadas.

La migración del proyecto fue realizada con éxito, sin embargo, tomo más tiempo del

previsto, aun así, las pruebas que se realizaron tuvieron éxito. En la siguiente ilustración 34

se muestra una captura del proyecto ya montado en Heroku.

Ilustración 33 Plataforma montada en Heroku

Creación de servidor Node.js

Para el desarrollo de la plataforma en la parte de hardware se optó por hacer uso de la

tarjeta Intel Edison la cual nos permite realizar diferentes funciones con una gran variedad

de sensores.

La tarjeta Intel Edison puede ser usada con diferentes lenguajes de programación los cuales

son Python, JavaScript, C++ y Java; debido a que parte de la plataforma específicamente

en la sección de programación con bloques la programación se realiza con JavaScript por lo

cual se optó por elegir dicho lenguaje.


50

Muchas de las plataformas donde se involucra el uso de algún tipo de tarjeta lo hacen

usando el IDE original de dicha tarjeta o mediante la plataforma, pero haciendo uso de un

cable que permita la transmisión de datos para cargar el programa; tomando en cuenta estas

características y buscando aprovechar todos los beneficios que posee la tarjeta, se pretende

hacer la carga mediante Wifi, de este modo se mejora muchas de las características de las

otras plataformas ya que no va ser necesario el uso de hardware extra para la comunicación.

La tarjeta Intel Edison para permitir la conexión mediante Wifi necesita tener montado un

servidor Node.js; primeramente, se presentaron diferentes propuestas para que el

funcionamiento fuera el adecuado las cuales son las siguientes:

1. Montaje de código fuente para la tarjera en un servidor externo.

2. Precargar el código de hardware a la tarjeta mediante servidor Node.js.

De las dos propuestas presentadas se optó por la segunda ya que esta proporcionaba una

mejor conexión entre la plataforma y la tarjeta; además que el montaje de un servidor

Node.js es una de las funcionalidades que presenta la tarjeta.

Para hacer el montaje del servidor dentro de la tarjeta se realizaron las siguientes

actividades:

1. Creación de código para cada uno de los sensores.

2. Integración de Socket.io

3. Integración de Express

4. Habilitar la conexión en la plataforma.

5. Pruebas plataforma Tarjeta.

En primera instancia se crearon los códigos correspondientes para los sensores a

implementar, con fines de pruebas se hizo uso solamente de 4 actuadores:

Pantalla LCD

Buzzer.

Led.

Motor de paso.

Para cada uno de ellos se realizaron las funciones en JavaScript que le otorgan el

funcionamiento adecuado y a su vez fueron integrados dentro de un mismo archivo para

mejor su funcionamiento.

Para realizar un servidor en Node.js es necesario hacer uso de un framework de JavaScript

que permite el montaje de un servidor de una manera más sencilla, dentro de este se

establece el puerto de conexión los parámetros a recibir en caso de que sea enviado, para

posteriormente ejecutarlos respecto al actuador del cual se está haciendo uso.

Una vez que se tenía el servidor montado se procedió a habilitar la conexión desde la

plataforma para lo cual se usó de Express.js que es un framework de JavaScript.

Ya teniendo habilitada la conexión entre la plataforma y la tarjeta se procedió a hacer

pruebas para observar el funcionamiento y comportamiento que se tuvo de cada uno de los

actuadores, obteniendo pruebas satisfactorias de conexión.


51

Montaje en app para iPad

Al término del desarrollo de la plataforma web, se dio paso al montaje del proyecto dentro

de una aplicación desarrollada para iOS, esta aplicación tiene propósitos meramente de

pruebas, por lo que aún no tiene estilos muy definidos ni acomodo final, se trata de

identificar y revisar el funcionamiento del proyecto en este entorno, para posteriormente

realizar una versión de la aplicación más estilizada.

Para crear esta aplicación de prueba se hizo uso de una single view aplication, puesto que

tiene como característica principal un layout, en blanco para poder crear lo que se desee.

Para comenzar con el montaje del proyecto primero se copió todo el proyecto dentro del

directorio Bundle, para poder acceder a los archivos HTML de manera local.

Posteriormente se creó una vista principal la cual tiene 4 botones, mismos que a través de

un viewcontroller, mandan llamar las diferentes vistas que corresponden a cada tipo de

ejercicio, estas vistas a su vez contienen un UIWebView, el cual es una especie de emulador

de Safari que nos permite presentar información diseñada para ser visualizada en la web.

En la siguiente ilustración 35 se muestra una captura de esta ventana principal.

Ilustración 34 Vista principal de la aplicación

Cada UIWebView contiene la referencia a un archivo distinto, por lo que cada uno manda

llamar a un ejercicio en específico junto con las instrucciones correspondientes.

Una vez concluido el ejercicio, el usuario puede regresar al panel principal y elegir uno

nuevo, o bien si el ejercicio fue realizado correctamente, lo dirigirá al siguiente, en

jerarquía de nivel de dificultad.

Estas pruebas fueron bastante satisfactorias, el funcionamiento de las acciones de mostrar

código, tomar captura de pantalla, y correr el código, servían de manera correcta, sin

embargo las funciones para guardar el archivo en el dispositivo y para cargar un archivo

desde el, no son posibles en iOS, esto debido a que la arquitectura del dispositivo impide

que arbitrariamente se establezca comunicación desde la aplicación hacia el hardware, al no

tener iOS un manejador de archivos como por ejemplo lo tiene Android las únicas maneras

de lograr algo parecido es mediante iCloud, DropBox o alguna aplicación extra de Apple,

pero esto no es factible, ya que se debería trabajar con terceras partes y el control y

autonomía de la aplicación se perderían. Por lo pronto estas funciones se han dejado de


52

lado y se encuentra actualmente en búsqueda de una posible solución a este problema o

bien la implementación de alguna otra función

Comunicación con Intel Edison

Como se mencionó anteriormente la tarjeta Edison ofrece diferentes opciones de conexión;

en este caso se hizo uso de la comunicación vía Wifi, para la cual fue necesario montar un

servidor Node.js y a su vez precargar el código para cada uno de los actuadores.

La comunicación Wifi resultó ser muy cómoda ya que no fue necesario hacer uso de algún

tipo de cable para que esta pudiera establecerse y proceder a cargar las funciones necesarias

para obtener los resultados esperados.

Cabe mencionar que cuando se monta un servidor Node.js este crea su propia red con base

a la red Wifi existente, para posteriormente acceder a esta mediante la dirección local host,

que en este caso su equivalente es edison.local/ seguido del puerto por el cual esta

escuchado que por defecto es el :3000. Teniendo montado el servidor es posible acceder a

la página principal de este mediante cualquier dispositivo que se encuentre conectado a la

misma red donde esté conectada la tarjeta.

La conexión entre las plataformas y la tarjeta fue muy sencilla, debido a que existen

diferentes frameworks que facilitan dicha actividad; en este caso se hizo uso de Express y

Socket.io; cuya principal funcionalidad es permitir la conexión HTTP, así como recibir

parámetros que serían interpretados por la tarjeta para proceder a ejecutarlas.

El establecer la comunicación entre plataforma y tarjeta fue más sencilla de lo esperado, ya

que en un principio se desconocía la potencia y simplicidad que posee Node,js como

servidor facilito todo el proceso de conexión entre ambas.


53

Conclusión

Los paradigmas de la educación han cambiado de manera significativa, las herramientas

actuales no permiten que el desarrollo de las habilidades llamadas del siglo XXI, tales

como el trabajo colaborativo, el pensamiento lógico y abstracto, sean desarrolladas ni

fomentadas, la creación de esta plataforma es una muestra de interacción entre tecnología y

educación, lo cual representa un paso hacia adelante en la reducción de la brecha entre las

TIC’s y la educación.

Para poder ofrecer una mejor herramienta que reduzca esta brecha, se realizó de manera

exitosa toda una investigación previa de lo que son las plataformas e-learning, y con ello

tener un punto de referencia de mejora. Incluir el framework de Blockly nos llevó a realizar

una capacitación que nos permitiera aprender cómo utilizar y sacarle el mayor provecho a

esta nueva herramienta de google, gracias a esta capacitación pudimos explotar al máximo

las ventajas que ofrece este framework.

Se diseñó y desarrolló una plataforma funcional que permite administrar e implementar la

edición de código visual usando Blockly, al mismo tiempo que nos dio la capacidad de

crear y personalizar nuestros propios bloques para explotar de mejor manera los beneficios

que este editor visual nos brindaba. De igual manera de diseñó y desarrolló una adaptación

de esta plataforma para que se pudiera usar en dispositivos móviles, creando una aplicación

especial para iPad.

Finalmente se logró de manera exitosa comunicar tanto la plataforma web como la

aplicación con el hardware, cumpliendo con ello todos los objetivos que se plantearon en

un inicio. Documentando todo en este reporte.

El desarrollo de este proyecto brinda a la sociedad una nueva posibilidad de acercar las

nuevas tecnologías a la vida cotidiana, de volverlas parte del día a día y con ello alcanzar

nuevos horizontes en materia de educación.

La implementación de herramientas como esta, les permitirá a los niños de hoy en día

crecer con habilidades que los prepararán de mejor manera para el futuro. Con el uso de

esta plataforma no solo se fomenta la creatividad en los niños, sino que además se crea la

necesidad de desarrollar un pensamiento lógico y abstracto que permita resolver problemas

actuales, el aprendizaje basado en proyectos, les brinda la capacidad de relacionar

diferentes etapas de una solución, procurando siempre mejorar y optimizar para alcanzar

mejores resultados; ahí es donde radica la importancia de este proyecto, en darles a los

niños una herramienta que les permita desarrollarse íntegramente, al mismo tiempo que

fomenta la colaboración y el trabajo en equipo en busca de un mismo fin, procurando

valores que encaucen en el desarrollo y crecimiento de la sociedad.

El desarrollo de esta plataforma e-Learning, fue todo un reto en múltiples cuestiones, desde

el hecho de tener que investigar lo que una plataforma de este tipo significaba, su

funcionamiento, antecedentes, situación actual en la que se encuentra el país en materia de

educación, además de tener que aprender a manejar tecnologías que desconocíamos o que

habíamos utilizado muy poco, fueron situaciones con las que fueron puestos a prueba

nuestros conocimientos y habilidades adquiridas durante toda la carrera.


54

Enfrentarse con un entorno real, donde formas parte de un proyecto mucho más grande y en

el que de tu trabajo depende el éxito o fracaso de un proyecto e incluso de una empresa, son

ambientes que forman carácter y te muestran que aún hay mucho por aprender, te enseñan

de lo que eres capaz y te retan a ser un mejor profesionista.

A pesar de que a lo largo de la creación de la plataforma hubo muchas situaciones que nos

retrasaban en su desarrollo, o que nos impedían continuar al paso esperado, el proyecto fue

concluido de manera satisfactoria, en tiempo y forma e incluso se logró avanzar un poco

más de lo que se tenía previsto en un inicio, esto gracias al gran trabajo en equipo que se

hizo tanto internamente, como con el resto del equipo de trabajo en la empresa.

Al desarrollar este proyecto adquirimos muchos aprendizajes, no solo hablando de las

tecnologías que implementamos de las cuales teníamos muy poco o nulo conocimiento y

que tuvimos que aprender para poder desarrollar la plataforma, sino también en materia de

crecimiento profesional, cuestiones como el aprendizaje autodidacta, implementar de

manera adecuada una metodología, plantear objetivos reales y alcanzables, manejo del

estrés, trabajo colaborativo con el resto del equipo, delegar adecuadamente tareas y metas e

inclusive el trato con el cliente, son habilidades invaluables que hemos adquirido y que

ahora podremos utilizar para realizar día a día un mejor trabajo, además de crearnos una

gran experiencia que más adelante sin duda será de gran ayuda

Nos dimos cuenta que la escuela más allá de otorgarte conocimientos, te prepara para que

seas capaz de adquirirlos por tu propia cuenta, para que sepas cómo reaccionar ante

diferentes situaciones, y siempre salgas adelante, te prepara para que logres involucrarte en

un equipo de trabajo y puedas aportar para que el proyecto salga adelante.


55

Anexos


A

Anexo A

Tabla 3 Cronograma de Actividades

Tiempo programado Tiempo real

Nombre Tiempo 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

Programado

Real

Programado

Real

Programado

Real

Programado

Real

Programado

Real

Programado

Real

Programado

Real

Programado

Real

PLATAFORMA E-LEARNING PARA EL DESARROLLO DE HABILIDADES DEL SIGLO XXI

Fecha: Enero-Junio 2016

Integración del sistema a

la plataforma y aplicación

Entrega de aplicación

móvil

Investigación de

plataformas e-learning

4

3

2

1

5

6

7

8

Investigación de entornos

de desarrollo

Aprendizaje y capacitación

del entorno

Analisis y definición del

sistema a realizar

Desarrollo del sistema

Pruebas y documentación

del sistema

junio

Mes

enero febrero marzo abril mayoActividades


B

Anexo B

Tabla 4 Comparativa de plataformas

Pencil Code Gym Code Monkey Box Island Hour of Code Monster Coding Khan Academy

1 Colores Objetos Funciones Booleanos Funciones

2 Movimientos Funciones Ciclos Ciclos Parámetros

3 Combinación Argumentos Condiciones Condiciones Propiedades

4 Parámetros /comentarios Ciclos Arreglos Variables

5 Funciones Variables Animaciones

6 Ciclos Arreglos Eventos

7 Variables Condiciones Texto/ Cadenas

8 Ciclos anidados Boleanos Funciones

9 Funciones con argumentos Declaraciones lógicas

10 Objetos Depuración

11 Ciclos

12 Comentarios

13 Arreglos

14 Objetos

15 Librerías

16 Videos

17

18

Globos de texto Globos de instrucciones Videos

Avatar Audio Globos de texto

Instrucciones

Bloques (drag & drop)

Propio (scratch)

Numero de niveles 15 32 20 18 17

Ejercicios por tema 2-5 2-5 7 3 2-4

Puzzle

Quiz

Plataforma Web Web Movil Web Web

Costo Gratis Gratis Gratis Gratis Gratis

Widget utilizado Tortuga Mono Cajas animadas Monstruo personalizado Castor

Creatividad Resolución de problemas Creatividad Dibujo

Dibujos lógica Lógica Razonamiento

Razonamiento

Aprendizaje

Resolución de desafios

Nombres

Animaciones

CoffeScript

Habilidades

Propósito

Caracteristicas

Dibujo

Pistas

Temas

Lógica matemática

Resolución de laberintos Resolución de puzzlesFinalización de tareas para

encontrar un tesoro

Bloques (drag & drop) Bloques (drag &drop) JavaScript

Dibujos Retos tipo laberinto Puzzles Videos explicativos

Retroalimentacion

Lenguaje especifico

Tipo de ejercicios


C

Anexo C

Tabla 5 Comparativa de lenguajes

Python JavaScript Ruby

PropósitoEnfatiza en la productividad y lejabilidad del

código

Lenguaje para páginas web, y para ambientes

ajenos a navegadores, controlar el

comportamiento de páginas web

Diseñado para la programación divertida y

flexible para el programador

ABC JAVA ADA

ALGOL 68 C++ C++

C Lua CLU

C++ Scheme DYLAN

ICON Perl EIFFEL

JAVA Self LISP

LISP C PERL

PERL Python PYTHON

AWK

Hyper Talk

Youtube Mozilla TWITTER

Google Rhino HULU

Google V8 (Chrome) GROUPON

Chakra(IE)

Sitios WEB (Lado Cliente)

Node JS

Uso estricto de identacion Funcional Elegante

Lenguaje de programacion legible Orientado a objetos Poderoso

Basado en prototipos Minimiza la confusión

Multiparadigma

Imperativo

Puntos y comas

Linea de aprendizaje corta Fácil pero poderoso Programadores que sepan 1 o 2 lenguajes

Recomendado para iniciar a programar

Simplicidad en la sintaxys

Lenguajes de programación

Características

Basado en

Sitios donde se usa

Usabilidad

Facilidad de aprendizaje


D

Anexo D

Tabla 6 Comparativa tarjetas de hardware

Nombre

Imagen

Lugar de Venta Micro Center Newegg Amazon Amazon Seeed

Costo $69 USD $69 USD $ 79 USD $95 USD $ 97.95 USD

Productos

disponibles-

5 por persona.

En stok

No tienen

temporalmente6 en stock En Stock

Fecha tentativa de

envio5 a 7 días - -

mayo 23 a

junio 08-

Briko bocina

Briko botones

Briko leds

Union 90 (x4)

Cable plano (x4)

Cable micro usb

Tornillo (x10)

Viga (x2)

Placa mediana (x3)

Briko temperatura

Briko Luz

Placa mediana (x4)

Bateria

Llantas (x2)

Rueda loca

Base grande

Grove Light Sensor

Grove Temperature Sensor

Grove Rotary Angle Sensor(P)

Grove encoder

Grove button

Grove LCD RGB Backlight

Llave allen

Union 90 (x10)

Base octagonal (x2)

Union octagonal (x15)

Usb cable

Base octagonal

Tornillo (x26)

Grove Relay

Grove Servo

Stepper Motor

Grove Blue LED

Grove Red LED

Stepper Motor Driver

12V 2A American Standard AC/DC Power

Usb wall Power

Micro USB Cable (x2)

Intel Edison Board y Grove Indoor

Environment Kit

Edison module Intel Edison for arduino

Briko botones

Briko leds

En stockEn stock 5 en Stock

$169 USD

Amazon Briko

$1499

Seeed

Edison for arduino

24/05/2016

Grove sound sensor Base shield Briko bocina

Grove temperature & humidity Sensor

Grove moisture sensor

Grove 3 axis digital Accelerometer

Grove Touch Sensor

Grove Base Shield V2

$174.90 USD

Grove Rotary Angle Sensor(P)

Intel Edison & Arduino Breakout Grove Starter Kit Plus - IoT Edison Grove IoT Developer Kit

Grove Light Sensor

Grove Temperature Sensor Grove 3 axis digital Accelerometer

Grove Touch Sensor

-

$79 USD

Seeed

Grove button

Grove sound sensor

Grove Buzzer

Grove Pieze Vibration Sensor


Descripción Edison module & Edison for arduino Grove Red LED

Stepper Motor Driver

12V 2A American Standard AC/DC Power

AdaptorMicro USB Cable (x2)

Grove Green LED

Grove Base Shield V2

Stepper Motor

Grove Pieze Vibration Sensor


Grove Buzzer

Grove Green LED

Grove Blue LED

09/05/2016

Grove button

$ 3999

Briko Starter Kit Briko Premium kit

Briko

Bk7 (arduino) Bk7 (arduino)

--

30 días despues de la compra 30 días despues de la compra

Herramienta brikoGrove Buzzer

Viga (x4)

Grove light sensor

Grove UV sensor

Herramienta briko

Llave allen

Briko perilla

Tuerca (x26)

Cable micro usb

Cable plano (x1)

Briko motor (x2)

Briko display (solo numeros y unas letras)

Tuerca (x10)

Union octagonal (x6)Grove PIR motion sensor

Briko distanciaBriko distancia


I

Bibliografía

Adriano, J. (6 de agosto de 2015). cómofuncionaqué. Obtenido de

http://comofuncionaque.com/robotica-y-programacion-para-impulsar-a-mexico-

entrevista-con-david-bustos-cofundador-de-briko/

App moviles. (2014). App moviles. Obtenido de http://appmoviles.net/que-es-el-app-

inventor-para-que-sirve/

Briko. (2015). play business. Obtenido de https://playbusiness.mx/proyectos/briko-robotics

CNN EXPANSION. (13 de Mayo de 2015). Educación primaria en México cae a últimos

lugares del mundo. CIUDAD DE MÉXICO, México: CNN EXPANSION.

Diego Mendoza, A. L. (12 de 05 de 2012). Investigación Es Todo. Obtenido de

https://investigacionestodo.wordpress.com/2012/05/19/clases-y-tipos-de-

investigacion-cientifica/

E.scenarios. (2011). Obtenido de

http://www.ambientepraxis.org/escenarios/libro/electronico/conceptos_bsicos_de_s

cratch.html

Franco Primera, F. (20 de Mayo de 2011). Prezi. Obtenido de Orientación hacia procesos:

https://prezi.com/d19ja7wuvgcv/orientacion-hacia-procesos

Fraser, N. (2016). github. Obtenido de google/blockly:

https://github.com/google/blockly/tree/master/appengine

Fundación Armancio Ortega. (abril de 2015). Proyecta. Obtenido de

http://www.plataformaproyecta.org/blog/proyectos-steam-crear-para-aprender

Gómez Luna, L. (2002). Pequeña Enciclopedia del Medio Ambiente. . Santiago de Cuba,

Cuba: Editorial Oriente.

Google. (12 de julio de 2010). Google official blog. Obtenido de

https://googleblog.blogspot.mx/2010/07/app-inventor-for-android.html

Google. (15 de Abril de 2015). Github. Obtenido de

https://github.com/google/blockly/wiki/Text

Gutiérrez, C. (2014). i2bTech. Obtenido de http://www.i2btech.com/blog-i2b/tech-

deployment/para-que-sirve-el-scrum-en-la-metogologia-agil/

Lara, W. (31 de julio de 2015). Platzi. Obtenido de https://platzi.com/blog/guia-scrum/

Makeblock. (2015). Makeblock España. Obtenido de

https://www.makeblock.es/tutoriales/programar_con_scratch/

Medios Educativos. (3 de mayo de 2010). Obtenido de

http://es.slideshare.net/arley26/medios-educativos

MIT. (2016). App Inventor. Obtenido de http://appinventor.mit.edu/explore/


II

Mozilla Developer Network. (2014). MDN. Obtenido de Canvas:

https://developer.mozilla.org/es/docs/Web/HTML/Canvas

Mozilla Developer Network. (2015). Obtenido de Blob:

https://developer.mozilla.org/es/docs/Web/API/Blob

Ortiz Reyes, F. X. (29 de 01 de 2015). gestiopolis. Obtenido de La importancia de la

educación en México. Ensayo: http://www.gestiopolis.com/la-importancia-de-la-

educacion-en-mexico-ensayo/

Padrón G., J. (05 de 2006). Bases del Concepto de "Investigación Aplicada" (o

"investigación aplicativa" o "aplicaciones"). Caracas, Venezuela.

Proyectos agiles. (01 de junio de 2015). Obtenido de https://proyectosagiles.org/que-es-

scrum/

Rios, R., & Pizzolanti, N. (s.f.). Ceibal. Obtenido de

http://www.ceibal.edu.uy/UserFiles/P0001/ODEA/ORIGINAL/100910_scratch2.el

p/index.html

Rodríguez, J. (24 de junio de 2012). GenbetadeV. Obtenido de GenbetadeV:

http://www.genbetadev.com/herramientas/google-blockly-un-lenguaje-visual-para-

aprender-a-programar

Sabelli, N. (octubre de 1990). National Science Foundation. Obtenido de

http://nsf.gov/awardsearch/showAward?AWD_ID=8751190

Tataje, M. (22 de noviembre de 2010). IBM DeveloperWorks. Obtenido de

https://www.ibm.com/developerworks/community/wikis/home?lang=en#!/wiki/Rati

onal+Team+Concert+for+Scrum+Projects/page/SCRUM+como+metodolog%C3%

ADa

Vargas Cordero, Z. R. (2009). LA INVESTIGACIÓN APLICADA: UNA FORMA DE

CONOCER LAS REALIDADES CON EVIDENCIA. Educación.

Viscardi, S. (abril de 2013). Safari. Obtenido de The Professional ScrumMaster's

Handbook: https://www.safaribooksonline.com/library/view/the-professional-

scrummasters/9781849688024/ch01s04.html

w3schools.com. (2016). w3schools. Obtenido de HTML5 Canvas:

http://www.w3schools.com/html/html5_canvas.asp

PLATAFORMA E-LEARNING PARA EL DESARROLLO DE …

Documents

Transcript of PLATAFORMA E-LEARNING PARA EL DESARROLLO DE …