Introducción al pensamiento computacional

class: title-slide, right, top
background-image: url(img/turing-machine.png)
background-size: contain

.right-column[
# Introducción al pensamiento computacional

Manuel Vargas 
Universidad de Costa Rica
]

.palegrey[.left[.footnote[Representación artística de una [máquina de Turing](https://es.wikipedia.org/wiki/M%C3%A1quina_de_Turing). Fuente: [Porao](https://commons.wikimedia.org/wiki/File:Turing_Machine.png).]]]

---

# Contenidos

- ### ¿Qué es pensamiento computacional?

- ### Conceptos fundamentales del pensamiento computacional:
  - #### Descomposición.
  - #### Reconocimiento de patrones.
  - #### Abstracción.
  - #### Algoritmos.
  
- ### Introducción al lenguaje Scratch.

---
# Computadora

--
### *"__Máquina electrónica__ que, mediante determinados __programas__, permite almacenar y tratar información, y resolver __problemas de diversa índole__."* ([Diccionario de la lengua española](https://dle.rae.es/computador#A4hIGQC)).

--
### *"__Máquina electrónica digital programable__ que ejecuta una serie de comandos para __procesar__ los datos de __entrada__, obteniendo convenientemente información que posteriormente se envía a las unidades de __salida__."* ([Wikipedia](https://es.wikipedia.org/wiki/Computadora)).

--
### *"A computer is a __machine or device__ that performs processes, calculations and operations based on instructions provided by a software or hardware __program__. It has the ability to accept data (__input__), __process__ it, and then produce __outputs__."* ([Techopedia](https://www.techopedia.com/definition/4607/computer)).

---

# Resolución de problemas mediante computadoras

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

--
<img src="img/resolucion-problemas-computadoras.png" height="150" />

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

---

# Algunos tipos de problemas que pueden resolverse con la ayuda de computadoras y otras máquinas

--
### Numéricos

.pull-left[
<figure>
 <img src="img/stepped-reckoner.jpg" />
</figure>
]
.pull-right[
 <figcaption>
 Réplica de <a href="https://es.wikipedia.org/wiki/Stepped_Reckoner">stepped reckoner</a>: máquina de cálculo inventada por Gottfried Leibniz alrededor de 1670. Fue la primera calculadora capaz de realizar las cuatro operaciones aritméticas básicas. Fuente: <a href="https://commons.wikimedia.org/wiki/File:Leibnitzrechenmaschine.jpg">Kolossos</a>. "Es deplorable que las personas más excelentes desperdicien su tiempo haciendo cálculos, cuando cualquiera puede realizarlos acertadamente con la ayuda de una máquina." (Gottfried Leibniz).
 </figcaption> 
]
---
# Algunos tipos de problemas que pueden resolverse con la ayuda de computadoras y otras máquinas

--
### Criptográficos

.pull-left[
<figure>
 <img src="img/bombe.jpg" />
</figure>
]
.pull-right[
 <figcaption>
 Recreación de <a href="https://es.wikipedia.org/wiki/Bombe">Bombe</a>: dispositivo electromecánico de uso específico utilizado por los criptólogos británicos para ayudar a descifrar las señales cifradas por la máquina alemana <a href="https://es.wikipedia.org/wiki/Enigma_(m%C3%A1quina)">Enigma</a> durante la Segunda Guerra Mundial. Fuente: <a href="https://es.wikipedia.org/wiki/Bombe#/media/Archivo:TuringBombeBletchleyPark.jpg">Sarah Hartwell</a>.
 </figcaption> 
]
---
# Otras aplicaciones de las computadoras

### - Científicas
### - Financieras
### - Empresariales
### - Recreativas
### - De comunicación
### - De transporte
### - ...
---
# Problemas geoespaciales

--
<figure>
 <img src="img/johnsnow-map.jpg" height="400" />
</figure>

--
<figcaption>
 <a href="https://www.theguardian.com/news/datablog/2013/mar/15/john-snow-cholera-map">Mapa de John Snow</a> que muestra los casos de cólera durante la <a href="https://es.wikipedia.org/wiki/Epidemia_de_c%C3%B3lera_de_Broad_Street">epidemia de Broad Street</a>, Londres, en 1854. Puede apreciarse la cercanía de muchos casos a la bomba de agua contaminada en la intersección de Broad Street y Cambridge Street. Fuente: <a href="https://en.wikipedia.org/wiki/File:Snow-cholera-map-1.jpg">John Snow</a>.
</figcaption>

---
# Otros ejemplos de problemas geoespaciales

- ### ¿Cuáles son las zonas prioritarias para la conservación de una especie?
- ### ¿Cuál es la mejor ubicación para un local comercial?
- ### ¿Cuáles son las áreas más vulnerables a desastres naturales?
- ### ¿Cuáles son los lugares en los que una epidemia tiene más probabilidades de impactar?
- ### ¿Cuál es la ruta más corta entre dos sitios?
- ### ...

---

# ¿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.

---

# Investigación en pensamiento computacional

--
.pull-left[
**Seymour Papert** 

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


<figure>
 <img src="img/papert.jpg" height="150" />
 <figcaption>
 Fuente: [ak_mardini](https://commons.wikimedia.org/wiki/File:Papert.jpg).
 </figcaption>
</figure>


- *Mindstorms: Children, Computers, and Powerful Ideas* (1983) 
- [*An Exploration in the Space of Mathematics Educations* (1996)](http://www.papert.org/articles/AnExplorationintheSpaceofMathematicsEducations.html)

]

--
.pull-right[
**Jeannette Wing** 

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


<figure>
 <img src="img/wing.jpg" height="150" />
 <figcaption>
 Fuente: [World Economic Forum](https://commons.wikimedia.org/wiki/File:Jeannette_Wing,_Davos_2013.jpg).
 </figcaption>
</figure>


- [*Computational thinking* (2006)](https://www.cs.cmu.edu/~15110-s13/Wing06-ct.pdf)

]

---

# ¿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.

---

# Descomposición

--
- ### Divisió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.

---

# Descomposición - ejemplo
## Escritura de un documento

--
.pull-left[
### Documento sin secciones
<figure>
 <img src="img/descomposicion-informe-completo.png" />
 <figcaption>
 Fuente: <a href="https://www.coursera.org/learn/computational-thinking-problem-solving">Universidad de Pennsylvania</a>.
 </figcaption>
</figure>
]

--
.pull-right[
### Documento con secciones
<figure>
 <img src="img/descomposicion-informe-secciones.png" />
 <figcaption>
 Fuente: <a href="https://www.coursera.org/learn/computational-thinking-problem-solving">Universidad de Pennsylvania</a>.
 </figcaption>
</figure>
]

---

# 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.

--
 
<figure>
 <img src="img/mapa-mosaico.png" />
 <figcaption>
 Fuente: <a href="https://commons.wikimedia.org/wiki/File:Tiled_web_map_Stevage.png">Stevage</a>.
 </figcaption>
</figure>

---

# Reconocimiento de patrones

--
- ### Se 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.

---

# Reconocimiento de patrones - ejemplo
## Patrones arquitectónicos

--
.pull-left[
- 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)](https://laptrinhx.com/a-pattern-language-3372046788/).

- "*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)
]

--
.pull-right[
<figure>
 <img src="img/patrones-arquitectura.png" />
 <figcaption>
 Fuente: <a href="https://laptrinhx.com/a-pattern-language-3372046788/">A Pattern Language</a>.
 </figcaption>
</figure>
]

---

# Reconocimiento de patrones - ejemplo
## Patrones de diseño de software

--
.pull-left[
- 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)](https://en.wikipedia.org/wiki/Design_Patterns), escrito por Erich Gamma, Richard Helm, Ralph Johnson y John Vlissides; y en el cual se documentan [23 patrones de diseño de software](https://en.wikipedia.org/wiki/Design_Patterns#Patterns_by_type).
]

--
.pull-right[
<figure>
 <img src="img/model-view-controller.png" />
 <figcaption>
 Diagrama de interacciones en el patrón de diseño de software denominado <a href="https://es.wikipedia.org/wiki/Modelo%E2%80%93vista%E2%80%93controlador">Modelo-Vista-Controlador o Model-View-Controller (MVC)</a>. Fuente: <a href="https://commons.wikimedia.org/wiki/File:MVC-Process.svg">RegisFrey</a>.
 </figcaption>
</figure>
]

---

# Abstracción

--
- ### Identificació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.

---

# Abstracción - ejemplo
## Selección de atributos de un conjunto de datos

--
.pull-left[
### Atributos generales de una persona
- Nombre
- Edad
- Ingreso mensual
- Historial académico
- Pasatiempos
- Color favorito
- Estatura
- Peso
- Historial médico
- ...
]

--
.pull-right[
#### 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
- ...
]

---

# Abstracción - ejemplo
## Capas temáticas de un SIG
Las capas temáticas son una abstracción de un espacio geográfico

--
<figure>
 <img src="img/sig-capas.png" />
 <figcaption>
 Fuente: <a href="http://www.admitnetwork.org/work-packages/gis-gps/">Admit</a>.
 </figcaption>
</figure>

---

# Algoritmos

--
- ### Indicaciones 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.

---

# Algoritmos - ejemplo
## Receta de cocina

--
<figure>
 <img src="img/arroz-con-pollo.png" height="400" />
 <figcaption>
 Fuente: <a href="https://cookpad.com/cr/recetas/6014919-arroz-con-pollo-al-estilo-costarricense">Cookpad</a>.
 </figcaption>
</figure>

---

# 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

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

--
2. 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.

--
3. Se designa el primer elemento de la lista como "máximo actual".

--
4. Se recorre la lista y se compara cada uno de los elementos con el máximo actual.

--
5. Si un elemento comparado es mayor que el máximo actual, entonces pasa a ser el nuevo máximo actual.

--
4. El valor máximo de la lista es el máximo actual, cuando termina de recorrerse la lista.

---

# 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]

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

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

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

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

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

--
### Valor máximo = 90.2

---

# Algoritmos - diagramas de flujo

--
.pull-left[
- ### Los [diagramas de flujo](https://es.wikipedia.org/wiki/Diagrama_de_flujo) son representaciones diagramáticas de un algoritmo.
- ### Representan los pasos del algoritmo mediante [símbolos](https://es.wikipedia.org/wiki/Diagrama_de_flujo#Simbolog%C3%ADa_y_significado) y su orden de ejecución mediante flechas.
- ### Por convención, se leen de arriba hacia abajo o de izquierda a derecha.
]

--
.pull-right[
#### Ejemplo: obtener el máximo de una lista
<figure>
 <img src="img/diagrama-flujo-valor-maximo.png" />
</figure>
]

---

# Algoritmos - pseudocódigo

--
.pull-left[
- ### El [pseudocódigo](https://es.wikipedia.org/wiki/Pseudoc%C3%B3digo) 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.
]

--
.pull-right[
#### Ejemplo: obtener el máximo de una lista
```r
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)
}
```
]

---

# Algoritmos - implementación en [R](https://www.r-project.org/)

```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](https://github.com/gf0604-procesamientodatosgeograficos/2021i-leccion-01-introduccion-pensamiento-computacional/blob/master/valor-maximo-lista/valor-maximo-lista.R)

---

# Algoritmos - implementación en [Python](https://www.python.org/)

```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](https://github.com/gf0604-procesamientodatosgeograficos/2021i-leccion-01-introduccion-pensamiento-computacional/blob/master/valor-maximo-lista/valor-maximo-lista.py)

---

# Algoritmos
## Entrada -> Procesamiento -> Salida

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

---

# El lenguaje de programación Scratch

.pull-left[
- [Scratch](https://scratch.mit.edu/) es un lenguaje de programación orientado a educación. Su nombre proviene de la palabra [*scratching*](https://en.wikipedia.org/wiki/Scratching).

- [*"Scratch ayuda a las personas jóvenes a pensar creativamente, razonar sistemáticamente y trabajar colaborativamente..."*](https://scratch.mit.edu/about).

- Fue desarrollado en 2003 (una versión de escritorio) por el [MIT Media Lab](https://www.media.mit.edu/) 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](https://es.wikipedia.org/wiki/GNU_General_Public_License).
]

.pull-right[
<figure>
 <img src="img/Scratchlogo.svg.png" />
 <figcaption>
 Fuente: <a href="https://commons.wikimedia.org/wiki/File:Scratchlogo.svg">Scratch Team</a>.
 </figcaption>
</figure>
]

---

# Práctica de programación con Scratch
## Considere este paisaje:

---

# Práctica de programación con Scratch

- Ingrese al sitio web de [Scratch](https://scratch.mit.edu/) 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ó.

---
exclude: false

# 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
  
---
exclude: false

# Práctica de programación con Scratch
## Aplicación de pensamiento computacional

### Reconocimiento de patrones

**Patrones identificados:**
- #### Dibujar base --> dibujar cuadradado (cuatro lados iguales y cuatro ángulos iguales de 90°)
- #### Dibujar techo --> dibujar triángulo equilátero (tres lados iguales y tres ángulos iguales de 60°)

---
exclude: false

# 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)

---
exclude: false

# 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)  
```

---
exclude: false

```
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)
    
```

---
exclude: false

# Práctica de programación con Scratch
## Aplicación de pensamiento computacional

### Resultado de la implementación del algoritmo en Scratch

[Código fuente](paisaje/paisaje.sb3)

---
exclude: false

# Algunas sugerencias para programar

- ### Procure que el código fuente de sus programas sea ordenado y legible.
- ### Reutilice el código fuente mediante bloques, funciones y otros mecanismos.
- ### Use identificadores (ej. nombres de variables, nombres de bloques o funciones) significativos.
- ### Incluya comentarios en el código fuente de sus programas y también escriba documentación externa.