Code2Flow: de la programación en bloque al código

Observatorio de tecnología educativa nº 81

Introducción

Una de las mejores formas de acercarnos a un lenguaje de programación es a través del llamado seudocódigo, ya que estas herramientas serán las encargadas de ofrecernos la posibilidad de entender de forma gráfica los conceptos que queremos aprender. Además, nos permiten sumergirnos más fácilmente en el mundo de la resolución de problemas a través de algoritmos.

El objetivo fundamental de esta herramienta es acercar al alumnado a los conceptos de seudocódigo y programación, así como permite el poder realizar sus primeros programas de una manera lógica y visual, sin conocer ningún lenguaje de programación previamente.

La visualización de los bloques y procesos en tiempo real a la escritura del código permite al alumnado un fácil entendimiento de la secuencia que está realizando.

La herramienta

Code2flow es una herramienta enfocada fundamentalmente para el aprendizaje de la programación en código. Es una plataforma muy útil para realizar la transición desde la programación en bloques, que se trabaja en los primeros cursos de tecnología, hasta la introducción el concepto de pseudocódigo y código.

La herramienta permite crear diagramas de flujo escribiendo un lenguaje natural, gracias al uso de pequeñas sintaxis de programación adicional.

Su sintaxis está fuertemente inspirada en lenguajes de programación tan comunes como C, Java, y C++.

El visor de los diagramas es muy intuitivo: puede acercarse o alejarse según las necesidades del alumnado; además una vez terminado el ejercicio o la actividad este diagrama es fácilmente exportable a un PDF o JPG para su envío.

La interfaz es muy sencilla: nos ofrece la posibilidad de tener en el lado de la izquierda nuestro código y en el lado derecho el visor del diagrama; todo código que se genere en ese lado izquierdo tendrá su representación gráfica en el visor.

Cada función de código tiene su representación gráfica en el diagrama de flujo, por lo tanto, tenemos una manera sencilla de poder asociar conceptos como «condicionales», «bucles» o «funciones» en nuestras explicaciones. El alumnado asociará de manera significativa esas nuevas líneas de código a una secuencia ya entendida.

En los siguientes puntos del artículo se añadirán videotutoriales para entender cómo se pueden trabajar estos conceptos en el aula.

Explicación del uso en el ámbito educativo

Code2flow es una fantástica herramienta para abordar ese hueco de contenido que se nos plantea cuando el alumnado ya tiene una competencia bastante alta en la programación por bloques y necesitamos afrontar nuevos retos en el ámbito de la programación. Enseñar seudocódigo sin necesidad de abordar de primeras un lenguaje concreto es una habilidad necesaria, no solo en el escenario educativo, sino también en el laboral. Los diagramas de flujo generados por Code2Flow nos permiten entender de manera clara y visual los procesos que se generan.

Es una herramienta web que necesita indispensablemente estar online, es recomendable trabajar con ella mediante un ordenador debido al uso del teclado, pero perfectamente se puede adaptar a una Tablet o incluso a un dispositivo móvil. Funciona con cualquier navegador, pero se recomiendan Google Chrome, Firefox o Edge, donde marcha perfectamente.

Es una herramienta muy sencilla para empezar a trabajar desde el primer momento, ya que para realizar los primeros diagramas de flujo o las primeras líneas de código no hace falta ni siquiera registrarte. El modo de registro requiere crear una cuenta de usuario directamente sobre la plataforma o mediante una cuenta Google o Github.

La versión de registro tiene dos variantes: una es la versión gratuita, que nos permite guardar hasta un máximo de diez proyectos y alcanzar diagramas de flujo con una complejidad de cincuenta nodos, lo que es suficiente para poder trabajar en el aula.

Lo positivo de esta versión gratuita es que es indefinida, ya que no es una versión de prueba. Además la parte del código no está limitada, por lo tanto, podemos usar toda la variedad de comandos y estructuras para mostrarlo en la clase.

Su curva de aprendizaje no es muy pronunciada, ni para el docente ni para el alumnado. Si tenemos ciertos conocimientos básicos de programación no resultará muy fácil adaptarnos a la herramienta. Una de sus ventajas es que con muy pocos comandos que se enseñen en la primera sesión de clase, los y las alumnas ya serán capaces de desarrollar ciertos diagramas que simulen programas o algoritmos.

Como integración y temporalización en el aula, podemos usar la herramienta como una actividad que nos cubra una sesión de cincuenta minutos. Siempre es importante que las y los alumnos conozcan todos los comandos necesarios para alcanzar el reto al que se vayan a enfrentar. Una propuesta interesante es dar al alumnado únicamente el diagrama de flujo y que sean capaces de replicarlo por medio del código; posteriormente, una vez que la herramienta esté más consolidada en el aula, se pueden plantear actividades más abiertas donde el desarrollo del código y el diagrama den la solución a un problem; por ejemplo, un enunciado que rece: «Realiza un programa que pida un número y diga si es par o impar».

En relación con las edades o etapas educativas de uso, es una herramienta enfocada para los últimos cursos de secundaria y bachillerato, sencillamente porque el uso del código y la sintaxis de programación son conceptos que necesitan una capacidad lógico-matemática mayor, que se va adquiriendo en las anteriores etapas mediante el uso, por ejemplo, de la programación en bloques.

Toda actividad que desarrollábamos anteriormente en plataformas de bloques puede ser adaptada para llevarla a Code2Flow, pues su flexibilidad nos permite crear variedad de actividades con una gran escalabilidad.

Metodología y didáctica aplicada

Cuando hablamos de esta herramienta, la mejor manera de enfocar su uso es fomentar un aprendizaje significativo. Donde los diagramas y el nuevo conocimiento del código, es un acople perfecto para todo ese aprendizaje adquirido anteriormente en las programaciones de primaria y primeros cursos de secundaria.

En cuanto a metodologías de trabajo, es verdad que su primera aplicación es un desarrollo más individualizado, pero perfectamente puede ser adaptado a metodologías de trabajo en grupo de manera cooperativa. La razón por la que elegimos la cooperación por encima de la colaboración es por la usabilidad de actividades más pautadas para el grupo.

El docente puede proponer una actividad más compleja, como muestra la ilustración cuatro y trabajar con el equipo la competencia de un pensamiento computacional, la habilidad de dividir un problema complejo en varios más sencillos, donde cada miembro del equipo puede encargarse de una tarea concreta para finalmente dar solución al problema original. Gracias a la visualización del diagrama y de los flujos, es fácil para el alumnado seguir la secuencia del código que vaya realizando, para luego poder enlazarlo con el resto del trabajo del equipo.

Valoración personal

Code2Flow es una herramienta que cubre un hueco que hoy por hoy no estamos trabajando por parte del profesorado en las asignaturas de programación. Nos encontramos grandes plataformas para inicializar o introducir a los alumnos en el mundo de la programación, pero una vez que hemos completado esa fase solo nos queda dar el salto a los entornos de programación más profesionales y austeros desde el punto de vista educativo, donde el alumnado se tiene que enfrentar a una línea de comandos que, la mayoría de las veces, para ellos es totalmente desconocida.

Es verdad que el concepto de seudocódigo se ha trabajado en entornos universitarios, ya que es algo imprescindible para aprender un lenguaje profesional, pero actualmente este tipo de herramientas nos permite descender esta forma de enseñar a algo más sencillo y, sobre todo, visual para el aula. Es una herramienta que cubre ese espacio entre el bloque y el código mediante el aprendizaje de una sintaxis de programación.

Recomendación final

Recomiendo el uso de esta herramienta a todos los compañeros y compañeras docentes que no solo estén en las asignaturas de tecnología, ya que para el ámbito matemático, o incluso de la física, el concepto de seudocódigo y aprender diagramas de flujo puede ser realmente útil. No se necesitan grandes conocimientos de programación, ni siquiera conocer un lenguaje concreto, los comandos son muy sencillos y la documentación muy completa; además; en este articulo incluimos unos video tutoriales muy útiles para empezar a trabajar con Code2Flow.

Información y materiales complementarios

• Tutorial de iniciación a Code2Flow
• Video tutorial: Inicio a Code2Flow
• Video tutorial: Condiciones y bucles
• Video tutorial: Opciones y GoTo
• Video tutorial: Funciones