Pensamiento computacional de Intec

1. El pensamiento computacional
y la programación
Conceptos, habilidades y perspectivas
Programación Nivel 1

2. • Aproximarse a la noción de Pensamiento Computacional y su
relación con la programación.
• Profundizar en técnicas de programación, en particular en el
entorno Scratch.
• Conocer un lenguaje de programación basado en texto:
Processing.
• Explorar el entorno de Mblock
objetivos

3. Algunas definiciones
...implica resolver problemas, diseñar sistemas y comprender el
comportamiento humano haciendo uso de los conceptos
fundamentales de la informática. Promueve, entonces, enfrentarnos a
un problema pensando como lo haría un científico informático.
...es el proceso de reconocimiento de aspectos de la informática en el
mundo que nos rodea
….es aplicar herramientas y técnicas de la informática para comprender y
razonar sobre los sistemas y procesos tanto naturales como artificiales.

4. El Pensamiento Computacional
Es una estrategia de formulación y resolución de problemas que
implica (no necesariamente en forma lineal):
● identificar problemas
● formular hipótesis
● diseñar e implementar soluciones
● analizar y abstraer procesos
● organizar la información y
● comunicar argumentos e ideas
Fuente: Sociedad Internacional de la Tecnología en la Educación (ISTE) y la Asociación de
Profesores de Informática (CSTA).

5. Descomposición
descomponer un
problema o sistema
complejo en partes
más pequeñas y
manejables.
Reconocimiento
de patrones
buscar similitudes
entre y dentro de los
problemas.
Abstracción
centrarse sólo en la
información importante,
ignorando detalles
irrelevantes.
Pilares del pensamiento computacional
Algoritmos
desarrollar una
solución paso a paso, o
definir un conjunto de
reglas a seguir para
resolver el problema.

6. El pensamiento
computacional en la
programación con scratch

7. Algoritmos
Desarrollar una solución paso a paso, o definir un conjunto de reglas a
seguir para resolver el problema.
.
¿Cuál es el algoritmo de una animación?

8. descomposición
¿Qué elementos componen este proyecto?
Videotutorial: cómo utilizar el lápiz
Descomponer un problema o sistema complejo en partes más
pequeñas y manejables.

9. RECONOCIMIENTO DE PATRONES
Buscar similitudes entre y dentro de los problemas.
¿Qué similitudes hay en la creación de cada flor?

10. Usando parámetros
Trabajar con valores numéricos, en lugar de valores constantes, nos
permite parametrizar un programa haciéndolo más flexible.
rojo = 0
verde = 70
azul = 130
magenta = 170

11. abstracción
Centrarse sólo en la información importante, ignorando detalles irrelevantes.
• Abstraer nos permite encapsular bajo un mismo nombre a un conjunto de acciones
para que lleven adelante una tarea.
• En Scratch podemos crear nuestros propios bloques.
Videotutorial: creación de
funciones con “Más bloques”

12. Estructura de datos: listas
Videotutorial: creación de listas
Las listas nos permiten almacenar datos, tanto en texto como en número.
Cada uno de ellos se llama elemento, y puede ser accedido por uno o todos
los objetos del proyecto.

13. Objetos y clones
Videotutorial: creación de clones
Los clones nos permiten minimizar el número de objetos que realizan tareas
similares y simplificar el código.

14. Interactuar con la webcam

15. Intervalo

16. Processing

17. Es un lenguaje de programación y entorno de desarrollo integrado de
código abierto, basado en Java, de fácil utilización, y que sirve como medio
para la enseñanza y producción de proyectos dentro del contexto de las
artes visuales y multimedia.
Processing ha logrado promover la unión de dos mundos: incorporar el
software dentro de las artes visuales, y lo visual dentro de las tecnologías.
Processing
https://processing.org/

18. Ambiente de trabajo de Processing
• Instrucciones
Son los elementos estructurales del programa. Todas las instrucciones
deben finalizar con “;”
point (100,100);
• Comentarios
Son usados para hacer notas (apuntes) entre las líneas de código que por
lo general facilitan la comprensión del programa. Para hacer comentarios
de una línea se debe iniciar el comentario con “// ” y para hacer
comentarios que requieren más de una línea, se debe iniciar el comentario
con “/*” y finalizarlo con “*/ ”

19. Entorno gráfico

20. Método void setup y void draw
• void setup()
Las instrucciones que están dentro de este método solo se ejecutan una
vez cuando el programa se inicia.
• void draw()
Las instrucciones que están dentro de este método se ejecutan
indefinidamente (hacen loop) hasta que el programa es detenido. Cada vez
que las instrucciones contenidas en el método draw() se ejecutan, el ciclo
vuelve a empezar ejecutando las instrucciones desde la primera línea hasta
la última.

21. Código processing → Scratch
float diam = 0;
void setup() {
size (800,600); //tamaño de la ventana de salida
smooth(); //suaviza el trazo
background(0); //color de fondo negro
}
void draw () {
noFill();
stroke(random(255),random(255),random(255));
diam = dist(mouseX,mouseY,pmouseX,pmouseY);
//distancia entre
//la posición del mouse y su posición anterior
strokeWeight(5); //grosor de trazo
ellipse(mouseX,mouseY,diam,diam);
line(mouseX,mouseY,pmouseX,pmouseY);
if(mousePressed) {
background(0);
}
}

22. Ejecuten ambos programas. Lean los códigos y observen:
➢ ¿Qué líneas del código de Processing no se ven reflejadas en Scratch?
➢ ¿Qué órdenes de Scratch no se encuentran en Processing?
➢ ¿Todas las órdenes de un lenguaje se corresponden con el otro?
➢ Al ejecutar ambos programas realizan efectos visuales similares.
¿Cuáles son las diferencias y a qué se deben?
➢ ¿Por qué, en este caso, es necesario declarar una variable en Processing
y no en Scratch?
Código processing → Scratch

23. Código processing → Scratch
float diam = 0;
background(0);
stroke(random(255),random(255),random(255));
strokeWeight(5);
ellipse(mouseX,mouseY,diam,diam);
line(mouseX,mouseY,pmouseX,pmouseY);
if(mousePressed) {
background(0);

24. Formas básicas
Ejemplo
• point point (20,20); point (x,y);
• line line (20,20,20,60); line (20,20,60,20); line (x,y,x2,y2);
• rect rect (20,20,60,35); rect (x,y,ancho,alto);
• triangle triangle (0,0,50,0,30,50); triangle(x,y,x1,y1,x2,y2);
• ellipse ellipse (50,50,90,60); ellipse (x,y,ancho,alto);

25. Propiedades de la forma

26. Color

27. Practicamos
❏ EJERCICIO 01: Dibujar tres puntos.
❏ EJERCICIO 02: Dibujar tres líneas: una vertical, una horizontal y una
diagonal.
❏ EJERCICIO 03: Dibujar un rectángulo.
❏ EJERCICIO 04: Dibujar dos círculos, uno dentro del otro.
❏ EJERCICIO 05: Dibujar un triángulo.

28. Interacción
MODELO ESTÍMULO – RESPUESTA
Permite establecer una relación entre lo que se reconoce como el estímulo
(acción, entrada, input) con la respuesta esperada (reacción, salida, output).

29. MOUSE como estímulo
Es posible hacer uso de los datos recogidos por el mouse para controlar ,
la posición, tamaño, color, y otras propiedades de las formas. Los datos
proporcionados por el mouse, son interpretados como una posición en la
pantalla, es decir, indica un valor específico para el eje x, y otro para el eje
y los cuales pueden ser modificados de acuerdo a la manipulación del
mouse.
• Funciones mouseX (posición en el eje x del mouse)
mouseY (posición en el eje y del mouse)

30. ❏ EJERCICIO 06: ¿Qué hace este código?¿Qué efecto tiene el uso de
smooth?
void setup() {
size (400,400); background(0); smooth(); // probar con noSmooth
}
void draw () {
ellipse (mouseX, mouseY, 100,100);
}

31. Referencias
https://processing.org/
http://dunadigital.com/processing/2013/07/14/que-es-processing/
http://mosaic.uoc.edu/2012/04/30/introduccion-a-processing/
https://sites.google.com/site/wikimedialabbogota/traducciones-
terminadas

32. MBlock

33. ¿Qué es mBlock?
mBlock es un entorno gráfico de programación basado en el
editor Scratch 2.0 que permite introducir la robótica de forma
sencilla y enseñar a programar robots basados en Arduino.
La interfaz es muy amigable e intuitiva: usa bloques previamente
definidos para dar órdenes.

34. Entorno

35. Existen 3 maneras diferentes de conectar tu robot con mBlock:
• cable USB
• Bluetooth
• 2.4G (la misma tecnología que usan los teclados
inalámbricos)
¿Cómo conectar tu robot?

36. Es muy importante que selecciones la placa
correspondiente del Arduino con el que trabajes
Para que la placa de Arduino se pueda comunicar con mBlock y ejecutar
las acciones de Scratch en tiempo real, es necesario cargar previamente
un Firmware en la placa.
conectar la placa de arduino a mBlock

37. Hacia dónde nos dirigimos...
Existen muchos lenguajes y plataformas para enseñar programación
por tal motivo resulta importante pensar una progresión en la
integración y uso de dichos lenguajes.
Para las escuelas intensificadas en nuevas tecnologías, una progresión
posible será:
1° ciclo: Scratch
2° ciclo: 4to y 5to grado: Mblock
2° ciclo: 6to y 7mo grado: Mblock + Processing

38. ¡Muchas gracias!

39. Scratch → código processing
Realicen el mismo efecto visual (trabajado con Scratch) con código en
Processing. Usen las Referencias como ayuda.
¿Se puede mejorar? ¿Con ambas herramientas se llegó al mismo resultado?

40. lectura del código en Processing
Observen el siguiente código y comenten las acciones de cada orden:
PImage cuadro;
PImage [] pincelada = new PImage [4];
int posX, posY;
color tintura;
int indice = 0;
void setup() {
cuadro = loadImage("cuadro3.jpg");
size(cuadro.width, cuadro.height);
for (int i = 0; i < 4; i++) {
pincelada [i] =
loadImage("pincelada"+i+".png");
}
background(0);
}
void draw() {
for (int i = 0; i < 4; i++) {
//se les asigna un valor al
azar a las variables de posicion.
posX = int(random(width));
posY = int(random(height));
tintura = cuadro.get(posX,
posY);
indice++;
if (indice > 3) {
indice = 0;
}
//CON PUNTOS
strokeWeight(random(4, 10));
stroke(tintura);
point(posX, posY);
//con imagenes de pinceladas
// tint(tintura);
// image(pincelada[indice],posX, posY);
}
}