Enseñar Javascript con tests

He elaborado una serie de ejercicios de Javascript que se autocorrigen con tests en Jasmine. Es una práctica que estoy probando este año y creo que no funciona mal. Se trata de explicar un poco de Javascript y tests y, a partir de ahí, hacer todos los ejercicios con tests.

Hay varias manera de enfocar esto y las estoy probando. La más evidente es proponer unos ejercicios y pedir luego que hagan los tests y que las funciones pasen los test. En realidad deberían utilizar la metodología TDD, pero no soy muy estricto en ese sentido. Otra manera de enfocar esto es proporcionar funciones acabadas, que las describan y escriban tests lo más precisos posible sobre estas. La última y más interesante es la de proponer enunciados y los tests. Los alumnos deben entender tanto el enunciado como el test y hacer la función que pasa el test. Se puede, además, ocultar parte de los tests para que hagan funciones más robustas.

Los ejercicios anteriores sirven para el tercer propósito. Además, entrenan a los alumnos para los exámenes, en los que también les paso los tests y los enunciados.

Jupyter y Odoo

Para enseñar el ORM en Odoo se suele usar la terminal de Odoo ($ odoo shell …). Esto suele ser suficiente. No obstante, hay algunas limitaciones. La primera es que no se guarda el progreso. Después que la documentación y el código han de ir por separado.

Jupyter tiene su mercado sobretodo en el entorno del análisis de datos en Python y el Machine Learning. También es muy útil para hacer tutoriales de Python en entornos educativos. Así que ¿Porqué no juntar Jupyter con Odoo?

Para ello he hecho un pequeño tutorial (usando Jupyter) que explica cómo hacer esa conexión.

Espero que sea útil.

Apuntes libres de FP de informática

Al igual que muchos otros profesores de FP, comparto mis apuntes de forma libre a través de diversos medios. El más público es mi Wiki, que está en este mismo dominio. También tengo cuenta en Github y, aunque de forma caótica, comparto gran parte de los ejemplos que pongo en clase.

Gracias sobretodo a Sergio García y a Laura Folgado, he conocido a una comunidad de profesores de todas partes con la inquietud de preparar apuntes que otros puedan usar y que sean libres. El año pasado empezamos tímidamente con algunos módulos. El de DWEC es uno de los más avanzados. Yo lo estoy usando junto con mis diapositivas como los apuntes «oficiales» de este curso.

Por lo que a mí respecta, me he centrado en los de SGE, ya que tenía muchas cosas ya hechas en mi Wiki. Gracias a Sergio, que es mucho más organizado, los apuntes ya se podrían usar en cualquier curso por alumnos o profesores. De hecho, yo también los estoy utilizando.

Estos apuntes se puede consultar, compartir y mejorar con licencia Creative Commons. Se hacen por el placer de compartir y para tener una referencia de calidad y gratuita en los módulos cuando lo necesitemos. Si un profesor que acaba de empezar a trabajar en el módulo de Sistemas de Gestión Empresarial los encuentra, tal vez le hagan su tarea más fácil.

Si quieres colaborar, tanto para corregir fallos o para añadir contenido, puedes enviarme un mensaje o un comentario con tu correo.

El módulo de Desarrollo Web en Entorno Cliente (DAW)

Cuando hace dos años nos dijeron que iban a añadir el ciclo de DAW en mi centro nos preguntamos si estábamos suficientemente actualizados en el desarrollo web. Por suerte, tardaríamos un año en tener módulos realmente difíciles en segundo. Al ver que tenía posibilidades de dar este módulo, me apunté a un par de cursos donde me dí cuenta todo lo que ha cambiado en pocos años el mundo de la web. Así que no sólo era explicar Javascript, sino cómo desarrollar y desplegar una aplicación. En este artículo voy a exponer mi enfoque del módulo de DWEC y lo que creo que se puede mejorar.

Mi intención para el primer trimestre era explorar Javascript vanilla a fondo. Para ello me he basado principalmente en los apuntes disponibles en apuntesFPinformatica ya que no tenía tiempo de elaborar los míos y porque no hay porqué reinventar la rueda. Lo que no sé hacer es explicar con diapositivas de otros, así que me hice las mías (más abajo están los enlaces). Por otro lado, para explicar bien los temas más peliagudos (this, propotipos, promesas…) mi referencia es el libro You don’t Know JS.

Además, hice un artículo en el wiki de esta web con ejemplos.

No me dio tiempo a dar más que unas pinceladas a Jquery. No obstante, con ES6 y otros frameworks, JQuery ha perdido importancia y tal vez lo elimine completamente si en un futuro vuelvo a impartir este módulo.

En el segundo trimestre ha sido el turno de Angular. De nuevo he usado apuntes de otros y diapositivas mías. Además de una especie de tutorial en el wiki. Me ha sorprendido la facilidad para asimilar Angular por parte de los alumnos. Lo veían lógico y agradable de programar. Supongo que con otros frameworks habrían dicho lo mismo.

Al final, desplegar la aplicación no ha sido tan satisfactorio por la falta de tiempo y sobretodo por que nos faltaba un servidor REST API interesante y la web al final trataba sólo con datos estáticos. Mi propósito y recomendación es hacer un servidor REST API común para que los alumnos lo consulten. Tenerlo desde el primer día y usarlo tanto para fetch en JS como para los servicios en Angular.

Estas son algunas de las diapositivas que he utilizado:
Desenvolupamen web en entorn Client
Javascript Comunicació amb el servidor
JQuery
NPM
WebPack
Angular

I Congreso de Apuntes FP informática

Ayer se celebró este congreso organizado por los profesores que mantienen la web https://apuntesfpinformatica.es/ . Yo participé con una presentación sobre lo que hacemos para virtualizar con LXD los entornos de prácticas en algunos módulos. En mi opinión, el congreso fue un éxito, con más de 100 asistentes de media y unas presentaciones muy interesantes.

Dejo el enlace al congreso y todas las presentaciones. Y mi vídeo:

Coches robóticos con Arduino

Este año, mi centro ha organizado una competición internacional de robots. (Si quieres saber más, sigue el enlace).

El caso es que hemos preparado mucho material didáctico para los alumnos. Aunque este blog parezca abandonado, el Wiki lo sigo actualizando y ampliando. Todo el material que yo he preparado está en él.

Nuestro robot es un poco diferente al más común que podemos encontrar basado en Arduino. Para empezar, utilita el Arduino Motor Shield Rev.3 de la marca Arduino y el sensor Pololu QTR-8RC para el sigue líneas. Además de un chasis fabricado casi a medida. Pero por lo demás, los apuntes de cómo programarlo son igualmente útiles.

Aquí os dejo mis apuntes:

En el sigue líneas, tenemos algo realmente especial que es la telemetría y el ajuste del PID por Bluetooth.


Graphviz

En muchas ocasiones necesito dibujar un diagrama que ilustre alguna explicación. Estos diagramas suelen ser complejos y, en muchos casos, repetitivos. Por ejemplo, una tabla de páginas con sus correspondientes marcos de página físicos y flechas que los conecten. O una red compleja. En muchos casos hay un programa específico que lo puede hacer.

Yo suelo usar DIA o una extensión de Google Drive llamada Draw.io para los diagramas simples o que necesitan ser vistosos.

Pero, en ocasiones, echo de menos una manera de hacerlo automático. Para ello se puede usar un programa muy veterano llamado Graphviz. Este programa lleva más de 26 años funcionando y dibuja los diagramas interpretando el lenguage DOT. Es muy probable que el estilo nos resulte familiar, como el de los diagramas de los libros teóricos de la universidad.

Gracias a que DOT es un lenguaje relativamente fácil de generar con scripts, puedo crear diagramas complejos a partir de otros datos o inventados.

Por ejemplo, este código permite mostrar un diagrama de la red de contenedores LXD:

#!/bin/bash
echo 'digraph {
graph [pad="0.5", nodesep="0.5", ranksep="2", splines=ortho,];
node [shape=none]
rankdir=LR;'
bridges=($(brctl show | tail -n +2 |cut -f1 | tr "\n" " "))
for i in ${bridges[@]}
do
echo "$i [label=\"$i\" shape=box];"
done
containers=($(lxc list | egrep '(STOPPED|RUNNING)' | cut -d" " -f2 | tr "\n" " "))
xarxes="$(lxc list --format json | jq -r '.[] | {container: .name, dev: .expanded_devices[]} | [.container,.dev.name,.dev.parent,.dev.type] | @csv' | grep '"nic"$')"
relations=""
for i in ${containers[@]}
do
pc="$i [label=<<table border=\"0\" cellborder=\"1\" cellspacing=\"0\"><tr><td bgcolor=\"#CCCCCC\" >$i</td></tr>"
while read dev
do
nom=$(echo $dev | cut -d "," -f2 | tr -d '"')
switch=$(echo $dev | cut -d"," -f3 | tr -d '"')
pc=$pc"<tr><td port=\"$nom\">$nom</td></tr>"
#La IP
ip=$(lxc info $i | tr "\t" " " | grep "$nom: inet " | tr -s " " | cut -d" " -f4)
relations=$relations"$switch -> $i:$nom [dir=none headlabel=\"$ip\"] \n"

done <<< "$(echo "$xarxes" | grep "$i")"
pc=$pc"</table>>];"
echo $pc
done
echo -e "$relations"
echo '}'

Esto genera un fichero DOT como este:

digraph {
graph [pad="0.5", nodesep="0.5", ranksep="2", splines=ortho,];
node [shape=none]
rankdir=LR;
lxdbr0 [label="lxdbr0" shape=box];
switch1 [label="switch1" shape=box];
switch2 [label="switch2" shape=box];
dns1 [label=<<table border="0" cellborder="1" cellspacing="0"><tr><td bgcolor="#CCCCCC" >dns1</td></tr><tr><td port="eth1">eth1</td></tr></table>>];
dns2 [label=<<table border="0" cellborder="1" cellspacing="0"><tr><td bgcolor="#CCCCCC" >dns2</td></tr><tr><td port="eth1">eth1</td></tr></table>>];
firewall [label=<<table border="0" cellborder="1" cellspacing="0"><tr><td bgcolor="#CCCCCC" >firewall</td></tr><tr><td port="eth0">eth0</td></tr><tr><td port="eth1">eth1</td></tr></table>>];
pc1 [label=<<table border="0" cellborder="1" cellspacing="0"><tr><td bgcolor="#CCCCCC" >pc1</td></tr><tr><td port="eth1">eth1</td></tr></table>>];
pc2 [label=<<table border="0" cellborder="1" cellspacing="0"><tr><td bgcolor="#CCCCCC" >pc2</td></tr><tr><td port="eth1">eth1</td></tr></table>>];
switch1 -> dns1:eth1 [dir=none headlabel="10.20.30.100"]
switch1 -> dns2:eth1 [dir=none headlabel="10.20.30.200"]
lxdbr0 -> firewall:eth0 [dir=none headlabel="10.150.173.32"]
switch1 -> firewall:eth1 [dir=none headlabel="10.20.30.254"]
switch1 -> pc1:eth1 [dir=none headlabel=""]
switch1 -> pc2:eth1 [dir=none headlabel="10.20.30.2"]
}

El resultado sería algo así:

Para hacer el gráfico hago uso de jq i de la extension html-like de graphviz.

Usando LXD para prácticas

Este año estoy usando LXD para que los alumnos hagan las prácticas de Sistemas Operativos y de Servicios en Red. La manera en que lo tengo organizado es la siguiente:

  • En cada aula hay un servidor que hace de proxy y da DHCP a los PC del aula. Este no es demasiado potente, ya que sólo es la puerta de enlace al exterior.
  • Tengo un servidor más potente (i5 i 8GB) que hace de servidor de LXD. Este tiene 15 contenedores (15 alumnos en segundo) y cada uno de ellos 3 contenedores en «Nesting».
  • Cada uno de los 15 contenedores tiene asignada por DHCP, gracias al servidor de proxy, una IP que acaba en el número de asiento del alumno. Por ejemplo, el alumno 12 tiene la IP que acaba en 212.
  • Los alumnos tienen un usuario y contraseña para entrar a su contenedor por SSH.
  • Los alumnos son administradores de ese contenedor y pueden modificar los ‘subcontenedores’ o instalar programas.
  • Una vez dentro de los contenedores que ellos administran, pueden crear servidores y clientes o lo que necesiten.
  • De esta manera yo siempre tengo acceso a todo por SSH y porque administro el servidor que los contiene. Entre los turnos de mañana y tarde hemos llegado a tener más de 90 contenedores en marcha. El disco duro es el cuello de botella en mi caso, ya que sólo van lentos en el arranque.

Ventajas:

  • Ellos no tienen que hacerse máquinas virtuales y llenar el disco duro de su ordenador.
  • Se puede controlar todo el trabajo desde una terminal.
  • Puedo hacer exámenes y corregirlos sin que me tengan que enviar la máquina virtual o los ficheros de configuración. Puedo probar directamente que funciona.

Inconvenientes:

  • No pueden llevarse fácilmente en trabajo a casa. Aunque pueden acceder de forma remota siempre que les abras el puerto.
  • No se pueden hacer contenedor de Windows.

Si queréis saber más, en este enlace tengo apuntes de cómo se ha configurado todo.

Sustituir moodle por google docs

Moodle es el más famoso de los entornos de aprendizaje virtuales en los centros educativos públicos de la Comunidad Valenciana. Se hacen cursos todos los años y muchos profesores de secundaria lo están usando continuamente. Tiene muchas ventajas, ya que te proporciona un lugar para centralizar materiales, entrega y evaluación de ejercicios e incluso exámenes y calificaciones.
No obstante, en mi opinión, tiene algunas desventajas muy graves para mi manera de trabajar: Es muy lento aunque tengas buen ordenador y conexión, el flujo de trabajo es muy intuitivo, pero muy farragoso cuando ya sabes cómo funciona. Editar o modificar actividades o cuestionarios requiere muchos clics. Me da la sensación de que no se actualiza al ritmo de otros CMS y siempre parece obsoleto (esto es muy subjetivo). En definitiva, no permite agilizar su gestión a usuarios «avanzados».
En muchos centros, el moodle está alojado en un hosting propio o proporcionado por conselleria. Esto quiere decir que no siempre va a estar actualizado o funcionar de forma rápida.
Hablando con un compañero que usa más y mejor el moodle que yo me dice que está de acuerdo en los problemas que le planteo pero que ha encontrado soluciones más o menos artesanales.
Por eso, estoy poniendo en marcha para el año que viene un curso «piloto» totalmente apoyado en mi wiki y en google docs. Ya he pasado todas mis diapositivas de libreoffice a google docs y los ejercicios. De esta manera los puedo modificar en directo y no necesitan ser descargados ni usar pen drives. Por otro lado, funcionan de maravilla en teléfonos móviles y demás.

Sigue leyendo