STEAM en mi colegio – Sesión 1

Diapositiva 1:

Programa STEAM en mi colegio en colaboración con ENGITRONIC

Diapositiva 2:

En la primera sesión veremos la “Introducción a la Programación”

1
Diapositiva 3:

En esta sección veremos los conceptos iniciales de la programación.

Diapositiva 4:

¿Qué es la programación?

La programación consiste en realizar programas, que son un conjunto de instrucciones

ordenadas y lógicas para resolver un problema.

2
Diapositiva 5:

¿Qué podemos programar?

Con la programación podemos controlar a las computadoras, dando instrucciones. Podemos

programar videojuegos, realidad virtual, inteligencia artificial, robots y mucho más.

Diapositiva 6:

¿Qué necesitamos para programar?

En primer lugar, necesitamos construir un algoritmo, este consiste en un conjunto de pasos a

seguir para solucionar un problema.

Empezamos con un ejemplo de un algoritmo para realizar una llamada desde un teléfono. Este
algoritmo se representa en un diagrama de flujo (se muestra a la derecha), en este caso son

3
cajas rectangulares con texto y líneas que las conectan. Para construir el algoritmo hay que
pensar en qué pasos se deben seguir para realizar una llamada. El algoritmo empieza con el
bloque de INICIO, primero se levanta la bocina, luego se espera el tono, después se marca el
número, a continuación, se espera que contesten, posteriormente se habla con la otra persona,
finalmente se cuelga la bocina, cerramos el algoritmo con el bloque de FIN. De esta forma,
mediante el diagrama de flujo, hemos representado el algoritmo para realizar una llamada.

Diapositiva 7:

Practicamos construyendo el algoritmo para lavarnos los dientes.

Para construir este algoritmo necesitamos reconocer cuáles son los pasos que seguimos para
lavarnos los dientes. Hay que notar que no todos nos lavamos los dientes de la misma forma así
que el algoritmo que construyamos puede variar. El algoritmo empieza con el bloque de Inicio,
primero se enjuaga el cepillo, luego se pone pasta dental en el cepillo, después se pasa el cepillo
por todos los dientes (arriba, abajo, por dentro y fuera), a continuación, se escupe la pasta
dental, finalmente nos enjuagamos, cerramos el algoritmo con el bloque de Fin. De esta forma
hemos construido nuestro primer algoritmo relacionado a la higiene bucal.

4
Diapositiva 8:

¿Qué necesitamos para programar?

En segundo lugar, debemos decirle a la computadora nuestro algoritmo, para esto hay que
comunicarse se alguna forma.

Los seres humanos nos comunicamos usando un idioma, si dos personas hablan el mismo idioma
se pueden comunicar, entonces es necesario aprender el idioma de las computadoras para
poder comunicarnos con ellas.

Diapositiva 9:

Nos preguntamos, ¿cuál es el idioma de las computadoras? y ¿qué tan difícil será aprenderlo?

5
Diapositiva 10:

Lenguajes de programación.

Para comunicarnos con la computadora y darles instrucciones, es necesario aprender un

lenguaje de programación. En la imagen de la izquierda podemos apreciar distintos lenguajes
de programación como SQL, Swift, C++, C#, Python, Java Script, CSS, HTML, php y Matlab. No
son los únicos, existe una gran cantidad de lenguajes de programación, cada uno tiene un uso
distinto, ventajas y desventajas. En este curso aprenderemos el lenguaje de programación
mBlock, veremos que es muy sencillo y útil.

Diapositiva 11:

6
En conclusión, para programar, primero debemos construir un algoritmo o conjunto de pasos a
seguir, luego debemos escoger un lenguaje de programación, finamente debemos realizar
nuestro programa, traduciendo el algoritmo al lenguaje de programación.

Diapositiva 12:

En esta sección veremos la programación en mBlock.

Diapositiva 13:

mBlock es un software IDE (en inglés, entorno de desarrollo integrado) desarrollado por la marca
Makeblock que permite aprender programación de forma rápida, sencilla y divertida. El tipo de
lenguaje que usa es conocido como programación basada en bloques, lleva este nombre porque
la forma de programar es arrastrando y soltando bloques, cada bloque es una instrucción.

7
Diapositiva 14:

Para instalar mBlock debemos entrar en el siguiente enlace a través de un navegador web
(Mozilla Firefox, Safari, Google Chrome, Microsoft Edge):

https://mblock.makeblock.com/en-us/download/

Nos desplazamos hasta abajo hasta encontrar mBlock PC version, damos clic en Download for
Windows (Si tiene una Mac dar clic en Download for Mac) y el instalador comenzará a
descargarse (pesa aproximadamente 245 MB). Una vez descargado el instalador, se ejecuta y se
procede con la instalación de mBlock.

8
También se puede usar mBlock en el mismo navegador sin necesidad de instalarlo en la PC
(mBlock web versión) o como una aplicación para celulares Android o iOS (mBlock mobile app).

Para más detalle revisar:

Guía de instalación mBlock.pdf

https://drive.google.com/file/d/1Hra5HIIsf59uArYhokeL15aBiEAOrDlb/view

Una vez instalado mBlock lo abrimos y se empezará a descargar. Dar click en el driver de
instalación que se ha alojado en la parte inferior de su pantalla. Luego, cliquear en INSTALL y por
último en TERMINAR.

Aparecerá la pantalla principal de mBlock.

Diapositiva 15:

Dentro de mBlock podemos identificar 3 grandes áreas.

A la izquierda se tiene el área de escenario donde interactuarán los objetos que coloquemos, al
centro el área de bloques donde encontraremos diversos tipos de bloques que representan las
instrucciones, y a la derecha el área de programas donde arrastraremos los bloques para formar
programas.

9
Diapositiva 16:

La barra superior tiene diversos botones, los cuales veremos a continuación.

Empezando por la izquierda se tiene el nombre de la marca y el programa que nos dirige a su
página web.

10
Luego, un icono del mundo donde podemos cambiar de idioma, ahí podemos seleccionar la
opción de Español.

En Archivo podemos crear un nuevo proyecto, abrir un proyecto anteriormente creado, guardar
con otro nombre nuestro proyecto, importar un proyecto desde nuestro ordenador, guardar un
proyecto en el ordenador y compartir el proyecto con la comunidad.

En editar encontramos las opciones de activar el modo turbo y ocultar el escenario.

Después se encuentra el nombre del proyecto, lo podemos cambiar.

11
Siguen los botones guardar en la nube y publicar. Todos los botones anteriormente
mencionados, con excepción de importar y guardar en tu ordenador, requieren de la creación
de una cuenta Makeblock.

Courses nos lleva a una página web donde se encuentran recursos para el aprendizaje.

En tutoriales encontramos el manual de usuario en web y programas mBlock de ejemplo sobre

diversos temas, podemos abrirlos y probarlos.

12
En Comentarios podemos dejar retroalimentación para los desarrolladores de mBlock.

En los tres puntos podemos acceder a buscar actualizaciones del software, conocer más sobre
mBlock, conocer más sobre la versión 5.3.0 de mBlock, instalar el driver serial de forma rápida,
seleccionar mBlock como el editor por defecto y un acceso a la web de cooperación con
Makeblock.

El siguiente icono circular de panda representa nuestro perfil.

Python Editor nos llevará al editor de programas en Python.

13
Diapositiva 17:

Hemos visto que varias funciones de mBlock requieren de la creación de una cuenta de
Makeblock por lo que procedemos a crear una.

Damos clic en el icono circular de panda en la barra superior.

Clic en Registro y colocamos nuestro correo electrónico.

Dependiendo de su edad seleccionar “Tengo 16 años o más” o “Soy menor de 16 años”.

14
Diapositiva 18:

En la parte superior del área de escenario encontramos al objeto panda en un fondo blanco y 6
botones. El panda o cualquier objeto que se añada se podrá mover e interactuar en el escenario.

El primer botón maximiza el escenario, de esta forma toma la pantalla completa.

15
Nos ayudará al momento de probar y presentar nuestro programa, como se ocultan los demás
elementos la atención estará sobre el escenario y los objetos. Para regresar a la anterior vista
dar clic de nuevo en el mismo botón.

El segundo botón configura el tamaño del escenario a mediano, nos permite centrarnos tanto
en el escenario como en el código de bloques.

16
El tercer botón configura el tamaño del escenario a pequeño, nos permite centrarnos más en el
código de bloques que en el escenario, pero sin dejarlo de lado. Para empezar, podemos dejarlo
en esta configuración de tamaño de escenario.

El cuarto botón activa o desactiva la cuadrícula con los ejes coordenados X e Y. De esta forma
podemos ubicar a los objetos en el eje cartesiano. Por ahora no trabajaremos con la cuadrícula.

El botón de stop rojo detiene la ejecución del programa de bloque. El botón de bandera verde
inicia la ejecución del programa de bloques.

17
Diapositiva 19:

En la parte inferior del área de escenario encontramos tres pestañas.

La primera pestaña corresponde a los Dispositivos, que son el hardware que conectamos a la
computadora y con el cuál podemos interactuar. Vemos que tenemos agregado el dispositivo
mBot. Con el botón añadir podemos agregar más dispositivos en nuestro trabajo. A la izquierda
vemos que estamos en modo En vivo lo que significa que el dispositivo trabajará en línea con la
computadora, de esta manera podemos ver el efecto de la programación de forma inmediata e
interactuar con la computadora. El modo Cargar implica que el programa será guardado en el
dispositivo y este se podrá desconectar de la computadora y ser usado independientemente. El
botón conectar se usa para conectar el dispositivo con el software, una vez conectado ya se
podrá interactuar.

18
La segunda pestaña corresponde a los Objetos, estos son los que se muestran en el escenario.
Vemos que tenemos agregado el objeto Panda. Con el botón añadir podemos agregar más
objetos en nuestro escenario. Al lado derecho, se puede ver o cambiar el nombre del objeto, su
posición X, su posición Y, su tamaño y su dirección (a dónde apunta). También se puede elegir si
mostrar o no al objeto en el escenario. En el botón de Disfraces se podrá cambiar la apariencia
del objeto. En el botón de Sonidos se podrán agregar o modificar los sonidos que podrá realizar
el objeto.

La tercera pestaña corresponde al Fondo. En el botón izquierdo se puede agregar un nuevo

fondo. Al lado derecho, en el botón Disfraces se puede editar los distintos fondos que se han
elegido o añadir más. En el botón de Sonidos se podrán agregar o modificar los sonidos que
podrá realizar el fondo.

19
Diapositiva 20:

Al dar clic a añadir en la pestaña de Dispositivos, se podrá adicionar al proyecto nuevos

dispositivos de la biblioteca, entre ellos encontramos al robot Codey, mBot, Arduino Uno,
Halocode y muchos más. Por ahora no será necesario añadir ningún dispositivo extra.

Diapositiva 21:

En el área de bloques encontramos diversos bloques, cada bloque representa a una instrucción.
Estos bloques están organizados en módulos, cada uno con un color diferente, entre ellos
encontramos Apariencia, Luz y Sonido, Acción, Sensores, Eventos y más. Dependiendo si se está
programando un dispositivo, un objeto o el fondo, se tendrán distintos bloques y módulos; en
el ejemplo se está programando el mBot. Los bloques se ejecutan y resaltan en amarillo al hacer
clic sobre ellos si estamos en el modo En vivo.

20
Diapositiva 22:

Al dar clic en extensión podremos ver más módulos de bloques tanto para los objetos (izquierda)
como para los dispositivos (derecha). Cada uno de estos nuevos módulos se usarán en
diferentes ocasiones, por ejemplo, para usar el mando Bluetooth blanco debemos agregar la
extensión Bluetooth controller. Por ahora no será necesario agregar ninguna extensión.

21
Diapositiva 23:

En el área de programas se arrastrarán los bloques del área de bloques, también se pueden
añadir comentarios dando clic derecho en el área de trabajo y seleccionando la opción de Añadir
un comentario. También encontramos otras opciones que se muestran a continuación.

Al arrastrar y agrupar los bloques se estará programando el dispositivo, objeto o fondo. Cuando
se hace clic sobre un bloque arrastrado al área de programas también se ejecuta y resalta en
amarillo.

En las pestañas superiores de la derecha se puede alternar entre la programación de Bloques y

Python. Al hacer clic en el botón </> se despliega una ventana donde se aprecia el código
equivalente al programa en bloques creado.

22
Los botones inferiores nos permiten acercar, alejar o regresar a la vista por defecto. Acercar nos
permite ver los bloques más grandes si es que se dificulta su lectura. Alejar nos permite ver los
bloques más pequeños, cuando tenemos programas grandes y necesitamos ver toda la
estructura. La vista por defecto regresa el tamaño de los bloques al normal.

Diapositiva 24:

En nuestro primer programa ejemplo probaremos el movimiento del Panda, el objetivo será
mover el panda al ejecutar el programa.

23
Para empezar con nuestro primer programa hacemos clic en la pestaña de Objetos del área de
escenario.

Luego, hacemos clic en el módulo de Eventos del área de bloques y arrastramos el bloque
cuando clic en bandera verde al área de programas.

24
Luego, hacemos clic en el módulo de Movimiento del área de bloques y arrastramos el bloque
mueve 10 pasos al área de programas, debajo del bloque cuando clic en bandera verde para
que estos formen una estructura.

Para ejecutar nuestro programa debemos dar clic en la bandera verde del área de escenario o
en la estructura de bloques del área de programas.

Como el Panda está apuntando hacia la derecha (dirección 90), entonces cada vez que se ejecute
el programa se moverá en esa dirección, es decir, su coordenada X aumentará en 10. Sigue
ejecutando el programa para que se haga más notable el movimiento del Panda. Si el Panda está
muy apegado a la derecha puedes hacer clic sobre él y arrastrarlo hacia la izquierda para que
pueda moverse más.

25
Diapositiva 25:

Para este programa necesitaremos haber terminado el anterior, el objetivo será que el Panda
parezca que está caminando al realizar un cambio de disfraces.

Hacemos clic en el módulo de Apariencia del área de bloques y arrastramos el bloque siguiente
disfraz al área de programas, debajo del bloque mueve 10 pasos para que estos formen una
estructura.

Ejecutamos el programa varias veces haciendo varios clics en la bandera verde, veremos que en
cada ejecución el Panda se mueve 10 pasos y cambia su disfraz, de esta forma parece que el
Panda está caminando.

26
Si damos clic en Disfraces podemos apreciar los que corresponden al objeto Panda.

El Panda cuenta con dos disfraces: costume1 y costume2. Al ser intercambiados al momento de
moverse nos da la apariencia de que el panda estuviera caminando. Para regresar al área de
programas, hay que hacer clic en la X.

27
Diapositiva 26:

Para este programa necesitaremos haber terminado el anterior, el objetivo será que el Panda
realice su caminata en un fondo diferente al blanco.

Hacemos clic en la pestaña Fondo del área de escenario. Nos damos cuenta de que el área de
programas está vacía, esto es debido a que la programación anterior se hizo en el Panda y ahora
estamos en la pestaña de Fondo. Luego, damos clic en el símbolo + para añadir un nuevo fondo.

28
En la ventana emergente, seleccionamos el fondo Bus station y damos clic en Aceptar.

Ahora, queda hacer clic sobre el Panda y arrastrarlo para que esté ubicado sobre la vereda.
Cuando hagamos clic repetidas veces sobre la bandera verde veremos como el Panda comienza
a caminar en la estación de bus.

29
Diapositiva 27:

Para este programa necesitaremos haber terminado el anterior, el objetivo será que el Panda
pueda caminar en las cuatro direcciones usando las flechas del teclado.

Cuando arrastramos al Panda en el escenario la pestaña cambia de Fondo a Objetos y veremos

nuevamente el programa del Panda que realizamos anteriormente, en caso sigamos en la
pestaña de Fondo, debemos hacer clic en la pestaña de Objetos. Como vamos a mejorar nuestro
programa podemos borrar el anterior que realizamos, para esto debemos arrastrar la estructura
de bloques desde la parte superior y moverla hacia el área de bloques, aparecerá un símbolo de
tacho que significa que vamos a borrar esos bloques, ahí los soltamos. El área de programas
debe quedar vacía.

30
Hacemos clic en el módulo de Eventos del área de bloques y arrastramos el bloque cuando tecla
espacio pulsada al área de programas.

Hacemos clic en la palabra espacio del bloque cuando tecla espacio pulsada y se desplegará una
lista de opciones, elegimos flecha derecha. De esta forma cuando se presione la tecla derecha
del teclado, se ejecutarán los bloques que estén en esta estructura.

31
Hacemos clic en el módulo de Movimiento del área de bloques y arrastramos el bloque apunta
en dirección 90 al área de programas, debajo del bloque cuando tecla flecha derecha pulsada
para que estos formen una estructura. La dirección 90 representa la derecha.

Hacemos clic en el módulo de Apariencia del área de bloques y arrastramos el bloque siguiente
disfraz al área de programas, debajo del bloque apunta en dirección 90 para que estos formen
una estructura. Cambiar el disfraz dará la apariencia de caminata al Panda.

32
Hacemos clic en el módulo de Movimiento del área de bloques y arrastramos el bloque mueve
10 pasos al área de programas, debajo del bloque siguiente disfraz para que estos formen una
estructura. Este bloque cambiará la posición del Panda. Ahora, al presionar la flecha derecha del
teclado, veremos el movimiento del Panda hacia la derecha con apariencia de caminata.

Para la programación del movimiento a la izquierda, podemos basarnos en el código de bloques

que ya tenemos. Damos clic derecho en la parte superior de la estructura de bloques ya creada
y hacemos clic en Duplicar. Se creará una nueva estructura similar a la que ya teníamos, hacemos
clic en una parte libre del área de trabajo para duplicar la estructura.

33
En la estructura duplicada, hacemos clic en la palabra flecha derecha del bloque cuando tecla
flecha derecha pulsada y se desplegará una lista de opciones, elegimos flecha izquierda. De esta
forma cuando se presione la tecla izquierda del teclado, se ejecutarán los bloques que estén en
esta estructura. Nos damos cuenta de que el Panda se sigue moviendo a la derecha.

Para cambiar la dirección de movimiento del Panda damos clic en el número 90 del bloque
apunta en dirección 90 y se desplegará un reloj, movemos la flecha hacia la izquierda (-90). De
esta forma cuando se presione la tecla izquierda el Panda apuntará a la izquierda y luego se
moverá en esa dirección. Lo mismo sucede en el otro sentido, cuando se presione la tecla
derecha el Panda apuntará a la derecha y luego se moverá en esa dirección.

34
Al presionar la flecha izquierda el Panda gira hacia la izquierda por lo que queda volteado, para
que el Panda no gire sobre sí mismo, damos clic en la dirección -90 del área de escenario y se
desplegará un reloj con 3 tipos de giro, elegimos la segunda opción Izquierda/Derecha. De esta
forma cuando se presione la tecla izquierda el Panda se reflejará verticalmente. Ahora podemos
mover al Panda a la derecha e izquierda y ver su caminata sobre la vereda.

Para la programación del movimiento hacia arriba, podemos basarnos en el código de bloques
que ya tenemos. Damos clic derecho en la parte superior de la estructura de bloques ya creada
y hacemos clic en Duplicar. Se creará una nueva estructura similar a la que ya teníamos, hacemos
clic en una parte libre del área de trabajo para duplicar la estructura.

35
En la estructura duplicada, hacemos clic en la palabra flecha derecha del bloque cuando tecla
flecha derecha pulsada y se desplegará una lista de opciones, elegimos flecha arriba. De esta
forma cuando se presione la tecla arriba del teclado, se ejecutarán los bloques que estén en esta
estructura. Nos damos cuenta de que el Panda se sigue moviendo a la derecha.

Para cambiar la dirección de movimiento del Panda damos clic en el número 90 del bloque
apunta en dirección 90 y se desplegará un reloj, movemos la flecha hacia arriba (0). De esta
forma cuando se presione la tecla arriba el Panda apuntará hacia arriba y luego se moverá en
esa dirección.

Para la programación del movimiento hacia abajo, podemos basarnos en el código de bloques
que ya tenemos. Damos clic derecho en la parte superior de la estructura de bloques ya creada
y hacemos clic en Duplicar. Se creará una nueva estructura similar a la que ya teníamos, hacemos
clic en una parte libre del área de trabajo para duplicar la estructura.

36
En la estructura duplicada, hacemos clic en la palabra flecha derecha del bloque cuando tecla
flecha derecha pulsada y se desplegará una lista de opciones, elegimos flecha abajo. De esta
forma cuando se presione la tecla abajo del teclado, se ejecutarán los bloques que estén en esta
estructura. Nos damos cuenta de que el Panda se sigue moviendo a la derecha.

Para cambiar la dirección de movimiento del Panda damos clic en el número 90 del bloque
apunta en dirección 90 y se desplegará un reloj, movemos la flecha hacia abajo (180). De esta
forma cuando se presione la tecla abajo el Panda apuntará hacia abajo y luego se moverá en esa
dirección.

37
Diapositiva 28:

Finalmente, así es como debería quedar el área de programas. Ordenamos los bloques
arrastrándolos y reducimos su tamaño dando clic en la lupa con el símbolo - para poder verlos
todos.

El Panda debe tener la capacidad de moverse en las cuatro direcciones usando las flechas del
teclado.

38
Diapositiva 29:

Para este programa necesitaremos haber terminado el anterior, el objetivo es programar a otro
objeto para que diga hola al Panda cuando se encuentren. Primero, damos clic en añadir.

39
Se desplegará una ventana damos clic en Personas y seleccionamos a un objeto, en este caso se
selecciona a Athlete23, luego damos clic en Aceptar.

Ahora estamos seleccionando a Athlete23, por lo que no veremos el código del Panda
anteriormente realizado, lo arrastramos hasta una posición adecuada, para precisar su
ubicación se pueden modificar los valores de las posiciones X e Y en el área de escenario.

40
Hacemos clic en el módulo de Eventos del área de bloques y arrastramos el bloque cuando clic
en bandera verde al área de programas.

Hacemos clic en el módulo de Control del área de bloques y arrastramos el bloque para siempre
al área de programas, debajo del bloque cuando clic en bandera verde para que estos formen
una estructura. Este nuevo bloque es un bucle, los bloques que se coloquen adentro se
ejecutarán constantemente.

41
En el mismo módulo de Control del área de bloques, arrastramos el bloque si <> entonces, si no
al área de programas, dentro del bloque para siempre para que estos formen una estructura.
Este nuevo bloque es una condicional, si la condición que está en <> es cierta entonces se
ejecutan los bloques de arriba, si no es cierta se ejecutan los bloques de abajo.

Hacemos clic en el módulo de Sensores del área de bloques y arrastramos el bloque ¿tocando
puntero del ratón? al área de programas, dentro de <> del bloque si <> entonces, si no. Esta
será la condición que se debe cumplir.

42
Damos clic en la palabra puntero del ratón del bloque ¿tocando puntero del ratón? y se
desplegará una lista de opciones, elegimos Panda. De esta forma la condición para que se
ejecuten las instrucciones será estar tocando al objeto Panda.

Hacemos clic en el módulo de Apariencia del área de bloques y arrastramos el bloque di ¡Hola!
al área de programas, dentro del si del bloque si ¿tocando Panda? entonces, si no. Si la
condición es verdadera se ejecutará este bloque.

43
En el mismo módulo de Apariencia del área de bloques, arrastramos el bloque piensa Mmm…
al área de programas, dentro del si no del bloque si ¿tocando Panda? entonces, si no. Si la
condición es falsa se ejecutará este bloque.

Para probar nuestro programa podemos agrandar el escenario, luego debemos dar clic en la
bandera verde. El código de Athelete23 se resaltará el amarillo indicando que está siendo
ejecutado, como en este momento no está tocando al Panda, entonces piensa Mmm…

44
Movemos al Panda con las flechas del teclado. Como en este momento Athlete23 está tocando
al Panda, entonces dice ¡Hola!

Finalmente, procederemos a guardar este programa porque se usará en la siguiente sesión.

Damos clic en Archivo y luego en Guardar en tu ordenador.

Escribimos el nombre del proyecto, seleccionamos una ruta de guardado y damos clic en
Guardar.

45
Diapositiva 30:

¡Muchas gracias!

46