Introducción al pensamiento computacional

Manuel Vargas
Universidad de Costa Rica

Representación artística de una máquina de Turing. Fuente: Porao.

1 / 33

Contenidos¿Qué es pensamiento computacional?
Conceptos fundamentales del pensamiento computacional:
Descomposición.
Reconocimiento de patrones.
Abstracción.
Algoritmos.

Introducción al lenguaje Scratch.
2 / 33

Resolución de problemas mediante computadoras3 / 33

Resolución de problemas mediante computadorasLas computadoras pueden ayudar a resolver problemas en muchas áreas.3 / 33

Resolución de problemas mediante computadoras

Las computadoras pueden ayudar a resolver problemas en muchas áreas.

3 / 33

Resolución de problemas mediante computadoras

Las computadoras pueden ayudar a resolver problemas en muchas áreas.

Los métodos para encontrar las soluciones a estos problemas deben expresarse de forma tal que puedan ser implementados en computadoras.

3 / 33

¿Qué es pensamiento computacional?4 / 33

¿Qué es pensamiento computacional?Es un enfoque para la resolución de problemas basado en conceptos y métodos de las ciencias de la computación.
4 / 33

¿Qué es pensamiento computacional?Es un enfoque para la resolución de problemas basado en conceptos y métodos de las ciencias de la computación.
Puede ser aplicado en muchas áreas, no solo en computación.
4 / 33

¿Qué es pensamiento computacional?Es un enfoque para la resolución de problemas basado en conceptos y métodos de las ciencias de la computación.
Puede ser aplicado en muchas áreas, no solo en computación.
Además de la programación, el pensamiento computacional incluye otras etapas como análisis, diseño y pruebas.
4 / 33

¿Qué es pensamiento computacional?Es un enfoque para la resolución de problemas basado en conceptos y métodos de las ciencias de la computación.
Puede ser aplicado en muchas áreas, no solo en computación.
Además de la programación, el pensamiento computacional incluye otras etapas como análisis, diseño y pruebas.
Se considera una de las destrezas fundamentales del siglo XXI.
4 / 33

Investigación en pensamiento computacional5 / 33

Investigación en pensamiento computacional

Seymour Papert
Matemático, pionero de la inteligencia artificial, co-creador del lenguaje de programación Logo.

Mindstorms: Children, Computers, and Powerful Ideas (1983)

An Exploration in the Space of Mathematics Educations (1996)

5 / 33

Investigación en pensamiento computacional

Seymour Papert
Matemático, pionero de la inteligencia artificial, co-creador del lenguaje de programación Logo.

Mindstorms: Children, Computers, and Powerful Ideas (1983)

An Exploration in the Space of Mathematics Educations (1996)

Jeannette Wing
Investigadora en ciencias de la computación, ex vicepresidente de Microsoft Research.

Computational thinking (2006)

5 / 33

¿Qué implica resolver problemas mediante pensamiento computacional?6 / 33

¿Qué implica resolver problemas mediante pensamiento computacional?Se identifican cuatro conceptos fundamentales:6 / 33

¿Qué implica resolver problemas mediante pensamiento computacional?Se identifican cuatro conceptos fundamentales:Descomposición: división de un problema en subproblemas más pequeños.
6 / 33

¿Qué implica resolver problemas mediante pensamiento computacional?Se identifican cuatro conceptos fundamentales:Descomposición: división de un problema en subproblemas más pequeños.
Reconocimiento de patrones: búsqueda de similitudes en los problemas.
6 / 33

¿Qué implica resolver problemas mediante pensamiento computacional?Se identifican cuatro conceptos fundamentales:Descomposición: división de un problema en subproblemas más pequeños.
Reconocimiento de patrones: búsqueda de similitudes en los problemas.
Abstracción: identificación de la información que se necesita y filtrado de la que no se necesita para resolver un problema.
6 / 33

¿Qué implica resolver problemas mediante pensamiento computacional?Se identifican cuatro conceptos fundamentales:Descomposición: división de un problema en subproblemas más pequeños.
Reconocimiento de patrones: búsqueda de similitudes en los problemas.
Abstracción: identificación de la información que se necesita y filtrado de la que no se necesita para resolver un problema.
Algoritmos: descripción, paso por paso, de la solución a un problema.
6 / 33

Descomposición7 / 33

DescomposiciónDivisión de un problema complejo en subproblemas más fáciles de resolver.
7 / 33

DescomposiciónDivisión de un problema complejo en subproblemas más fáciles de resolver.
La unión de las soluciones a los subproblemas brinda la solución al problema original.
7 / 33

Descomposición - ejemploEscritura de un documento8 / 33

Descomposición - ejemplo

Escritura de un documento

Documento sin secciones

8 / 33

Descomposición - ejemplo

Escritura de un documento

Documento sin secciones

Documento con secciones

8 / 33

Descomposición - ejemploMapas de teselas (tile maps)9 / 33

Descomposición - ejemplo

Mapas de teselas (tile maps)

Se componen de múltiples rectángulos (teselas o tiles) de diferentes tamaños que se agregan y desagregan conforme se requiere en acercamientos, alejamientos y otras operaciones.

9 / 33

Descomposición - ejemplo

Mapas de teselas (tile maps)

Se componen de múltiples rectángulos (teselas o tiles) de diferentes tamaños que se agregan y desagregan conforme se requiere en acercamientos, alejamientos y otras operaciones.

9 / 33

Reconocimiento de patrones10 / 33

Reconocimiento de patronesSe buscan similitudes o características compartidas entre problemas o componentes de un mismo problema.
10 / 33

Reconocimiento de patronesSe buscan similitudes o características compartidas entre problemas o componentes de un mismo problema.
Facilita la resolución de un problema al aplicarse una respuesta ya desarrollada.
10 / 33

Reconocimiento de patrones - ejemploPatrones arquitectónicos11 / 33

Reconocimiento de patrones - ejemplo

Patrones arquitectónicos

Son posibles soluciones para problemas de diseño arquitectónico. Christopher Alexander et al. recopilaron más de 200 en su libro A Pattern Language: Towns, Buildings, Construction (1977).
"Cada patrón describe un problema que ocurre infinidad de veces en nuestro entorno, así como la solución al mismo, de tal modo que podemos utilizar esta solución un millón de veces más adelante sin tener que volver a pensarla otra vez." (Christopher Alexander)

11 / 33

Reconocimiento de patrones - ejemplo

Patrones arquitectónicos

Son posibles soluciones para problemas de diseño arquitectónico. Christopher Alexander et al. recopilaron más de 200 en su libro A Pattern Language: Towns, Buildings, Construction (1977).
"Cada patrón describe un problema que ocurre infinidad de veces en nuestro entorno, así como la solución al mismo, de tal modo que podemos utilizar esta solución un millón de veces más adelante sin tener que volver a pensarla otra vez." (Christopher Alexander)

11 / 33

Reconocimiento de patrones - ejemploPatrones de diseño de software12 / 33

Reconocimiento de patrones - ejemplo

Patrones de diseño de software

Inspirados en las ideas de Alexander, varios ingenieros de software desarrollaron patrones para resolver problemas comunes de desarrollo de software.
Los patrones de diseño de software alcanzaron gran popularidad con la publicación del libro Design Patterns: Elements of Reusable Object-Oriented Software (1994), escrito por Erich Gamma, Richard Helm, Ralph Johnson y John Vlissides; y en el cual se documentan 23 patrones de diseño de software.

12 / 33

Reconocimiento de patrones - ejemplo

Patrones de diseño de software

Inspirados en las ideas de Alexander, varios ingenieros de software desarrollaron patrones para resolver problemas comunes de desarrollo de software.
Los patrones de diseño de software alcanzaron gran popularidad con la publicación del libro Design Patterns: Elements of Reusable Object-Oriented Software (1994), escrito por Erich Gamma, Richard Helm, Ralph Johnson y John Vlissides; y en el cual se documentan 23 patrones de diseño de software.

Diagrama de interacciones en el patrón de diseño de software denominado Modelo-Vista-Controlador o *Model-View-Controller* (MVC). Fuente: RegisFrey.

12 / 33

Abstracción13 / 33

AbstracciónIdentificación de cuáles aspectos de un problema son importantes y de cuáles no lo son.
13 / 33

AbstracciónIdentificación de cuáles aspectos de un problema son importantes y de cuáles no lo son.
Ayuda a construir un modelo de la solución.
13 / 33

AbstracciónIdentificación de cuáles aspectos de un problema son importantes y de cuáles no lo son.
Ayuda a construir un modelo de la solución.
Se aplica en modelado de datos.
13 / 33

Abstracción - ejemploSelección de atributos de un conjunto de datos14 / 33

Abstracción - ejemploSelección de atributos de un conjunto de datosAtributos generales de una persona
Nombre
Edad
Ingreso mensual
Historial académico
Pasatiempos
Color favorito
Estatura
Peso
Historial médico
...

14 / 33

Abstracción - ejemploSelección de atributos de un conjunto de datosAtributos generales de una persona
Nombre
Edad
Ingreso mensual
Historial académico
Pasatiempos
Color favorito
Estatura
Peso
Historial médico
...

Atributos a considerar para la BD de una universidad
Nombre
Edad
Historial académico
...

Atributos a considerar para la BD de una red social
Nombre
Edad
Pasatiempos
...

14 / 33

Abstracción - ejemplo

Capas temáticas de un SIG

Las capas temáticas son una abstracción de un espacio geográfico

15 / 33

Abstracción - ejemplo

Capas temáticas de un SIG

Las capas temáticas son una abstracción de un espacio geográfico

15 / 33

Algoritmos16 / 33

AlgoritmosIndicaciones detalladas de como resolver, paso por paso, un problema.
16 / 33

AlgoritmosIndicaciones detalladas de como resolver, paso por paso, un problema.
Especifican el orden en el que deben ejecutarse los pasos, así como las condiciones que deben cumplirse antes de cada paso.
16 / 33

Algoritmos - ejemploReceta de cocina17 / 33

Algoritmos - ejemplo

Receta de cocina

17 / 33

Algoritmos - ejemploObtener el valor máximo de una lista18 / 33

Algoritmos - ejemploObtener el valor máximo de una listalista = [29.6, -36.81, 31.85, 25.71, 90.2, 0.4]18 / 33

Algoritmos - ejemplo

Obtener el valor máximo de una lista

lista = [29.6, -36.81, 31.85, 25.71, 90.2, 0.4]

Solo es posible comparar dos elementos de la lista a la vez, para determinar si uno es mayor que otro.

18 / 33

Algoritmos - ejemplo

Obtener el valor máximo de una lista

lista = [29.6, -36.81, 31.85, 25.71, 90.2, 0.4]

Solo es posible comparar dos elementos de la lista a la vez, para determinar si uno es mayor que otro.

Algoritmo

18 / 33

Algoritmos - ejemplo

Obtener el valor máximo de una lista

lista = [29.6, -36.81, 31.85, 25.71, 90.2, 0.4]

Solo es posible comparar dos elementos de la lista a la vez, para determinar si uno es mayor que otro.

Algoritmo

Se lee la lista (del teclado, de un archivo o de alguna otra fuente).

18 / 33

Algoritmos - ejemplo

Obtener el valor máximo de una lista

lista = [29.6, -36.81, 31.85, 25.71, 90.2, 0.4]

Solo es posible comparar dos elementos de la lista a la vez, para determinar si uno es mayor que otro.

Algoritmo

Se lee la lista (del teclado, de un archivo o de alguna otra fuente).
Si la lista está vacía, se despliega la hilera de texto "Lista vacía" y se concluye el proceso. Si no, se continúa con el paso 3.

18 / 33

Algoritmos - ejemplo

Obtener el valor máximo de una lista

lista = [29.6, -36.81, 31.85, 25.71, 90.2, 0.4]

Solo es posible comparar dos elementos de la lista a la vez, para determinar si uno es mayor que otro.

Algoritmo

Se lee la lista (del teclado, de un archivo o de alguna otra fuente).
Si la lista está vacía, se despliega la hilera de texto "Lista vacía" y se concluye el proceso. Si no, se continúa con el paso 3.
Se designa el primer elemento de la lista como "máximo actual".

18 / 33

Algoritmos - ejemplo

Obtener el valor máximo de una lista

lista = [29.6, -36.81, 31.85, 25.71, 90.2, 0.4]

Solo es posible comparar dos elementos de la lista a la vez, para determinar si uno es mayor que otro.

Algoritmo

Se lee la lista (del teclado, de un archivo o de alguna otra fuente).
Si la lista está vacía, se despliega la hilera de texto "Lista vacía" y se concluye el proceso. Si no, se continúa con el paso 3.
Se designa el primer elemento de la lista como "máximo actual".
Se recorre la lista y se compara cada uno de los elementos con el máximo actual.

18 / 33

Algoritmos - ejemplo

Obtener el valor máximo de una lista

lista = [29.6, -36.81, 31.85, 25.71, 90.2, 0.4]

Solo es posible comparar dos elementos de la lista a la vez, para determinar si uno es mayor que otro.

Algoritmo

Se lee la lista (del teclado, de un archivo o de alguna otra fuente).
Si la lista está vacía, se despliega la hilera de texto "Lista vacía" y se concluye el proceso. Si no, se continúa con el paso 3.
Se designa el primer elemento de la lista como "máximo actual".
Se recorre la lista y se compara cada uno de los elementos con el máximo actual.
Si un elemento comparado es mayor que el máximo actual, entonces pasa a ser el nuevo máximo actual.

18 / 33

Algoritmos - ejemplo

Obtener el valor máximo de una lista

lista = [29.6, -36.81, 31.85, 25.71, 90.2, 0.4]

Solo es posible comparar dos elementos de la lista a la vez, para determinar si uno es mayor que otro.

Algoritmo

Se lee la lista (del teclado, de un archivo o de alguna otra fuente).
Si la lista está vacía, se despliega la hilera de texto "Lista vacía" y se concluye el proceso. Si no, se continúa con el paso 3.
Se designa el primer elemento de la lista como "máximo actual".
Se recorre la lista y se compara cada uno de los elementos con el máximo actual.
Si un elemento comparado es mayor que el máximo actual, entonces pasa a ser el nuevo máximo actual.
El valor máximo de la lista es el máximo actual, cuando termina de recorrerse la lista.

18 / 33

Algoritmos - ejemploObtener el valor máximo de una lista (continuación)19 / 33

Algoritmos - ejemploObtener el valor máximo de una lista (continuación)Ejecución del algoritmo19 / 33

Algoritmos - ejemplo

Obtener el valor máximo de una lista (continuación)

Ejecución del algoritmo

elemento en verde = máximo actual
elemento en rojo = elemento que está siendo comparado

19 / 33

Algoritmos - ejemplo

Obtener el valor máximo de una lista (continuación)

Ejecución del algoritmo

elemento en verde = máximo actual
elemento en rojo = elemento que está siendo comparado

[29.6, -36.81, 31.85, 25.71, 90.2, 0.4]

19 / 33

Algoritmos - ejemplo

Obtener el valor máximo de una lista (continuación)

Ejecución del algoritmo

elemento en verde = máximo actual
elemento en rojo = elemento que está siendo comparado

[29.6, -36.81, 31.85, 25.71, 90.2, 0.4]

19 / 33

Algoritmos - ejemplo

Obtener el valor máximo de una lista (continuación)

Ejecución del algoritmo

elemento en verde = máximo actual
elemento en rojo = elemento que está siendo comparado

[29.6, -36.81, 31.85, 25.71, 90.2, 0.4]

19 / 33

Algoritmos - ejemplo

Obtener el valor máximo de una lista (continuación)

Ejecución del algoritmo

elemento en verde = máximo actual
elemento en rojo = elemento que está siendo comparado

[29.6, -36.81, 31.85, 25.71, 90.2, 0.4]

19 / 33

Algoritmos - ejemplo

Obtener el valor máximo de una lista (continuación)

Ejecución del algoritmo

elemento en verde = máximo actual
elemento en rojo = elemento que está siendo comparado

[29.6, -36.81, 31.85, 25.71, 90.2, 0.4]

19 / 33

Algoritmos - ejemplo

Obtener el valor máximo de una lista (continuación)

Ejecución del algoritmo

elemento en verde = máximo actual
elemento en rojo = elemento que está siendo comparado

[29.6, -36.81, 31.85, 25.71, 90.2, 0.4]

19 / 33

Algoritmos - ejemplo

Obtener el valor máximo de una lista (continuación)

Ejecución del algoritmo

elemento en verde = máximo actual
elemento en rojo = elemento que está siendo comparado

[29.6, -36.81, 31.85, 25.71, 90.2, 0.4]

Valor máximo = 90.2

19 / 33

Algoritmos - diagramas de flujo20 / 33

Algoritmos - diagramas de flujo

Los diagramas de flujo son representaciones diagramáticas de un algoritmo.
Representan los pasos del algoritmo mediante símbolos y su orden de ejecución mediante flechas.
Por convención, se leen de arriba hacia abajo o de izquierda a derecha.

20 / 33

Algoritmos - diagramas de flujo

Los diagramas de flujo son representaciones diagramáticas de un algoritmo.
Representan los pasos del algoritmo mediante símbolos y su orden de ejecución mediante flechas.
Por convención, se leen de arriba hacia abajo o de izquierda a derecha.

Ejemplo: obtener el máximo de una lista

20 / 33

Algoritmos - pseudocódigo21 / 33

Algoritmos - pseudocódigo

El pseudocódigo es una descripción textual y en lenguaje natural de un algoritmo.
Su estructura se asemeja a la de un lenguaje de programación, pero está diseñado para que ser comprendido por personas, no para ser ejecutado por computadoras.

21 / 33

Algoritmos - pseudocódigoEl pseudocódigo es una descripción textual y en lenguaje natural de un algoritmo.
Su estructura se asemeja a la de un lenguaje de programación, pero está diseñado para que ser comprendido por personas, no para ser ejecutado por computadoras.

Ejemplo: obtener el máximo de una lista
LISTA <- Leer()
si (Vacia(LISTA)) {
  Desplegar("Lista vacía")
} si no {
  MAX <- LISTA[1]
  I <- 1
  mientras (I <= Longitud(LISTA)) {
    ITEM <- LISTA[I]
    si (ITEM > MAX) {
      MAX <- ITEM
    }
    I <- I + 1
  }
  Desplegar(MAX)
}

21 / 33

Algoritmos - implementación en R

# Obtener el valor máximo de una lista
lista <- c(29.6, -36.81, 31.85, 25.71, 90.2, 0.4)
cat("Lista de entrada: ", lista, "\n")
if (length(lista) == 0) {
  cat("La lista está vacía", "\n")
} else {
  max <- lista[1]
  i <- 1
  while (i <= length(lista)) {
    if (lista[i] > max) {
      max <- lista[i]
    }
    i <- i + 1
  }
  cat("Valor máximo de la lista: ", max, "\n")
}

Archivo con código fuente en R

22 / 33

Algoritmos - implementación en Python

# Obtener el valor máximo de una lista
lista = [29.6, -36.81, 31.85, 25.71, 90.2, 0.4]
print("Lista de entrada: ", lista)
if (len(lista) == 0):
    print("La lista está vacía")
else:
    max = lista[0]
    i = 0
    while (i < len(lista)):
        if (lista[i] > max):
            max = lista[i]
        i = i + 1
    print("Valor máximo de la lista:", max)

Archivo con código fuente en Python

23 / 33

AlgoritmosEntrada -> Procesamiento -> Salida24 / 33

Algoritmos

Entrada -> Procesamiento -> Salida

Este patrón describe el flujo de procesamiento básico de cualquier algoritmo o programa.

24 / 33

El lenguaje de programación Scratch

Scratch es un lenguaje de programación orientado a educación. Su nombre proviene de la palabra scratching.
"Scratch ayuda a las personas jóvenes a pensar creativamente, razonar sistemáticamente y trabajar colaborativamente...".
Fue desarrollado en 2003 (una versión de escritorio) por el MIT Media Lab y es administrado por la Fundación Scratch, una organización sin fines de lucro que lo facilita de manera gratuita.
Scratch es software libre distribuido mediante licencia GPLv2.

25 / 33

Práctica de programación con Scratch

Considere este paisaje:

26 / 33

Práctica de programación con Scratch

Ingrese al sitio web de Scratch y estudie la intefaz del ambiente de desarrollo. Puede buscar información adicional en otros sitios (Google, YouTube, etc.). Revise ejemplos y proyectos de otras personas para saber qué puede hacer con Scratch.
Utilizando los cuatro principios fundamentales del pensamiento computacional, desarrolle un algoritmo para dibujar el paisaje de la diapositiva anterior. Considere las siguientes preguntas orientadoras:
- ¿Cómo puede dividirse el problema?
- ¿Qué patrones observa (formas, tamaños, etc.)?
- ¿Qué información se necesita para hacer los dibujos (ej. medidas)?
- ¿Qué nivel de detalle requiere el algoritmo?
Implemente en Scratch el algoritmo que desarrolló.

27 / 33

Práctica de programación con Scratch

Aplicación de pensamiento computacional

Descomposición

Subproblemas

Dibujar casa
- Dibujar base
- Dibujar techo
Dibujar edificio
- Dibujar base
- Dibujar base
- Dibujar techo

28 / 33

Práctica de programación con Scratch

Aplicación de pensamiento computacional

Reconocimiento de patrones

Patrones identificados

Dibujar base --> dibujar cuadradado
Dibujar techo --> dibujar triángulo

29 / 33

Práctica de programación con Scratch

Aplicación de pensamiento computacional

Abstracción

Atributos necesarios para dibujar las figuras

Coordenada x
Coordenada y
Longitud del lado (de cuadrados y triángulos)

30 / 33

Práctica de programación con Scratch

Aplicación de pensamiento computacional

Algoritmo en pseudocódigo

Nota: las posiciones (x, y) que se pasan como parámetros corresponden a la esquina inferior izquierda de las figuras.

dibujar_paisaje
  borrar_todo
  dibujar_casa (-160, 10, 50)
  dibujar_casa (-85, -140, 60)
  dibujar_casa (145, -60, 75)
  dibujar_edificio (10, -40, 75)

31 / 33

dibujar_casa (x, y, lado)
  dibujar_base (x, y, lado)
  dibujar_techo (x, y + lado, lado)
dibujar_edificio (x, y, lado)
  dibujar_base (x, y, lado)
  dibujar_base (x, y + lado, lado)
  dibujar_techo (x, y + lado*2, lado)
dibujar_base (x, y, lado)
  subir_lapiz
  ir_a (x, y)
  apuntar_en_direccion (90)
  bajar_lapiz
  repetir 4 veces
    esperar_segundos (0.5)
    mover (lado)
    girar_derecha (90)
dibujar_techo (x, y, lado)
  subir_lapiz
  ir_a (x, y)
  bajar_lapiz
  apuntar_en_direccion (90)
  repetir 3 veces
    esperar_segundos (0.5)
    mover (lado)
    girar_izquierda (120)

32 / 33

Práctica de programación con Scratch

Aplicación de pensamiento computacional

Resultado de la implementación del algoritmo en Scratch

Código fuente

33 / 33

↑, ←, Pg Up, k	Go to previous slide
↓, →, Pg Dn, Space, j	Go to next slide
Home	Go to first slide
End	Go to last slide
Number + Return	Go to specific slide
b / m / f	Toggle blackout / mirrored / fullscreen mode
c	Clone slideshow
p	Toggle presenter mode
t	Restart the presentation timer
?, h	Toggle this help