# Introducción

!!! warning **Información en migración y en Spanglish**: Este es un documento en migración, que retoma información del 2016, escrita originalmente como libreta interactiva en [Grafoscopio](https://mutabit.com/grafoscopio/) y se está adecuando a nuevas tecnologías de [Lepiter](https://lepiter.io/feenk/introducing-lepiter--knowledge-management--e2p6apqsz5npq7m4xte0kkywn/), surgida hasta 2021. En ese sentido, intenta recuperar y migrar información de los contextos originales en los que fue concebida, aprovechando los nuevos desarrollos tecnológicos, al tiempo que da cuenta de aquellas visiones y preocupaciones que no están reflejadas en esos nuevos entornos, pero que sí estaban en los originales. Por ejemplo: la preocupación por una mirada crítica a los datos y el código y la formación de capacidades al respecto, de modo que el código sea más un lenguaje común en lugar de un bien exclusivo a los desarrolladores de software y a sus preocupaciones. Un código que refleje sujetos y mundos más plurales. Por ello, en la medida en que da cuenta de los orígenes históricos y sus transiciones, también irá adaptándose a esto nuevos contextos. Mientras tanto, se notarán algunos elementos en Spanglish, pues el documento original estaba concebido para varios talleres internacionales, pero ahora se usa en clases y procesos de facilitación principalmente en el pregrado de Ciencias de la Información, Bibliotecología y Archivística, así como en los talleres recurrentes mixtos, que ocurren en remoto y en el hackerspace [HackBo](https://hackbo.org/), de la comunidad de Grafoscopio. Próximas visitas a este documento deberían dar cuenta de su evolución. Te agradecemos de antemano por participar de esta transición en tu rol de lector(a)/explorador(a), por tu papel proactivo y tu paciencia al respecto.

This document was part of a booklet presenting a set of techniques to work with data, that are useful of [data activism](https://en.wikipedia.org/wiki/Data_activism). We consider data mostly as a [non-neutral human construct](https://direct.mit.edu/books/edited-volume/3992/Raw-Data-Is-an-Oxymoron) and we think that a more critical code+data literacy is needed to deal and build a common world that is, increasingly, mediated by data and code. Who is visible in this coming world, which voices are heard, and if we can create a plural participation in such world will depend on such critical literacy.

The work you're reading is opinionated, consequently. It presents a set of tools, devices and techniques, that has been developed in the [Grafoscopio](https://mutabit.com/repos.fossil/grafoscopedia/uv/#Grafoscopio) local community, mostly at [HackBo](https://hackbo.org/), but try to become part of a wider conversation and nurtures from global communities. This is also a work in progress, and because we take a "local first" approach, you will see that this document is in "Spanglish", with the idea of having a full English translation in the future, but starting from localized content originally Spanish or translated/wrote for/from Spanish speaking communities. If you're a native English speaker, any help is welcomed. See the Community Guidelines in the Grafoscopio Manual, to see how to offer and ask for help.

This document is made originally with Grafoscopio. Good familiarity with it is adviced. You can see more at the [Grafoscopio web page](http://mutabit.com/grafoscopio/).

______

Como [dijimos previamente](https://docutopia.sustrato.red/Lepiter:intro1#), la narrativas de datos, como la que estás leyendo ahora, escrita en Lepiter, combinan prosa, código, datos y, eventualmente, visualizaciones. A través de documento profundizaremos más en el uso de las libretas interactivas para explorar los tipos básicos de datos ofrecidos por Pharo y las operaciones básicas en ellos.

# Interacción Básica

Antes de ir en mayor profundidad a los datos, necesitamos introducir algunas operaciones básicas con el entorno. Ellas son estas tres: - **Inspeccionando y Haciendo**: consiste en ejecutar las instrucciones, también llamadas mensajes e ir más profundo dentro de los objetos que contienen y representan los datos. Mientras que _inspeccionar_ es la operación por omisión en la que estamos interesados para explorar los datos, la otra, _hacer_, es comúnmente utilizada también. Por ello las ponemos juntas. - **Imprimiendo**: consiste en mostrar los resultaods de los mensajes que se están ejecutando

## Inspeccionando y Haciendo

Vamos a la primera lección: aprender a ejecutar código. Para ello hay varias opciones

Now you're a Do It and Print It master ! Let's talk about inspecting. It's a Do It which opens an Inspector on the result of evaluating the expression you've selected. The Inspector is a tool that allows you to have a look inside an object.

For example, select the text below, open the menu and click on 'inspect it (i)':"

**Nota:** Es una línea de código para una operación de división

You've seen the letter 'i' between parentheses next to 'inspect it' ? It indicates the ALT- (or CMD- or CTRL-) shortcut to execute this command. You can use Ctrl+g to get and embedded inspector. Try ALT-i (or CMD-i or CTRL-i) on the following expressions:

**Nota:** Línea que dice fecha pero no sirve la hora

**Nota:** Línea que dice cuánto vale el número PI con 15 valores luego del punto (.)

**Nota:** No entiendo para qué sirve la línea

También puedes ejecutar 'Do it' usando el comando de teclado 'ALT d' (esto cambia de acuerdo a tu sistema operativo/computador: puede ser 'CMD d' o 'CTRL d')

## Imprimiendo

Now you're a Do It master ! Let's talk about printing. It's a Do It which prints the result next to the expression you've selected. For example, select the text below, open the menu and click on 'print it (p)':

**Nota:** Línea que muestra el resultado de la suma de dos valores numéricos

You've seen the letter 'p' between parentheses next to 'print it' ? It indicates the ALT- (or CMD- or CTRL-) shortcut to execute this command. Try ALT-p (or CMD-p or CTRL-p) on the following expressions:

**Nota:** Línea que dice fecha del presente día, pero no entiendo la parte de "duration"

**Nota:** Línea que dice la hora exacta de correr el código

The result is selected, so you can erase it using the backspace key. Try it !

**Nota:** Creo que dice la versión de los datos que se tienen, pero no sé

# Tipos Básicos: representando datos

Basic types are ways or represeting information inside this system. See nodes inside for more details

## Números

You now know how to execute Pharo code. Now let's talk about basic objects. 1, 2, 100, 2/3 ... are Numbers, and respond to many messages evaluating mathematical expressions. Inspect these ones:

**Nota:** Dice el valor numérico

**Nota:** No entiendo qué es

**Nota:** No entiendo qué es

**Nota:** Detalla el numerador y denominador de la operación

**Nota:** Realiza las operaciones y dice cual es el numerador y denominador

**Nota:** Hace la operación que se le pide

## Caracteres

Un caracter represetan una letra o glifo del alfabeto y puede ser creado o instanciado usando el operador $

You can find which is the ASCII number for a character

There are some character that are not printable

Puedes imprimir todos los 256 caracteres del código extendido ASCII

If you see gliberish is because some display issue with non roman/latin symbols, usually caused by the fonts you have installed in your Operative System and the interaction of the with a Pharo/GT system.

## Cadenas

Un String o cadena es una colección de caracteres. Usa comillas simples para crear un objeto String. Inspecciona estas expresiones

Puedes acceder a cada caracter de una cadena usando el mensaje `at:`

La concatenación de String usa el operador coma:

## Símbolos

Un símbolo (`Symbol`) es una cadena (_String_) única globalmente. Hay uno y solo un símbolo `#PharoTutorial`. Pueden existir varios objetos de tipo cadena (String) cuyo contenido sea `'PharoTutorial'` (Message=retorna 'true' si los dos objetos son IGUALES)

**Nota:** Cuenta e independiza cada símbolo de la plabra entre comillas sencillas

**Nota:** No entiendo qué cambia entres "asSymbol" y "asString"

**Nota**: En mátemáticas hay dos tipos de igualdad: * $x = 3$ ↤ Aginación. A la variable $x$, le estamos asignando el valor 3. * $2 = 3$ ↤ Comparación: dados dos elementos conocidos decir si es o no el mismo. Para Smalltalk es: * `x := 3` ↤ Aginación. * `2 = 3` ↤ Comparación. * `a == a` ↤ Comparación fuerte. Se trata del mismo símbolo?

**Nota:** Resultado verdadero

**Nota:** Resultado verdadero. No entiendo el resultado

**Nota:** Resultado verdadero. No entiendo el resultado

**Nota:** Resultado falso. No entiendo el resultado

**Nota:** Resultado verdadero. No entiendo el resultado

**Nota:** Resultado falso. No entiendo el resultado

## Arreglos

Los arreglos son maneras de guardar colecciones de información diversa. Los hay de dos tipos, estáticos y dinámicos. Acá veremos los primeros.

Los arreglos estáticos, o simplemente arreglos, son aquellos en los que los valores de todos los objetos que los conforman son conocidos en el momento en que el arreglo se define (es decir, no contienen cálculos o variables, como los dinámicos que veremos más adelante).

Los arreglos están confinados por `#( )` y sus elementos se separan por espacios. Por ejemplo, inspecciona la siguiente expresión, que define un arreglo de 3 elementos

**Nota:** El resultado son los 3 items que contiene la expresión

Inspecciona las siguientes expresiones:

**Nota:** Dice cuántos valores tiene la expresión, en este caso 4 porque están el 1, 2, 3 y lo que contiene el paréntesis

**Nota:** Expresión que dice si está vacío el paréntesis. En este caso es falso porque si hay elementos dentro del paréntesis

**Nota:** Dice cuál es el primer ítem que contiene el arreglo

**Nota:** Hay un error al ejecutar

## Arreglos Dinámicos

Los arreglos dinámicos son creados durante el tiempo de ejecución. Es decir, que podemos guardar en ellos cálculos, que luego se ejecutarán y determinarán el valor específico de lo que en ellos se guarda.

Están confinados por llaves `{ }` y sus elementos se separan con el caracter "`.`". Inspecciona la siguiente expresión para definir un arreglo dinámico

**Nota:** Se realizan las operaciones que se encuentran dentro de cada paréntesis

Comparemos este arreglo estático

**Nota:** Arroja como resultado 5, pero no entiendo cuáles son esos 5 ítems que cuenta, porque yo solo veo 4

con este arreglo dinámico:

**Nota:** Arroja como resultado 3, ya que los ítems se separan por los puntos

# Mensajes: procesando datos

Los mensajes son la forma en que los objetos se comunican entre sí y en que nosotros, los humanos, nos comunicamos con el sistema de cómputo. Hay tres tipos de mensajes: unary (unarios), binary (binary) y keyword.

## Unario

Los mensajes unarios tienen la forma siguiente. `anObject aMessage` Tu ya has enviado mensajes unarios.

Inspecciona los siguientes mensajes unarios:

**Nota:** Entiendo que el sistema lo lee como Entero pequeño o SmallInteger según el resultado al ejecutar

**Nota:** El sistema lo lee como un símbolo

**Nota:** El sistema lo lee como un caracter por el símbolo $

**Nota:** Que no sea verdadero. El resultado es False

**Nota:** Que no sea falso. El resultado es True

**Nota:** Dice el tiempo exacto en el momento que se ejecuta

**Nota:** Dice la fecha exacta en el momento que se ejecuta

**Nota:** Dice la fecha exacta del día anterior al que se ejecuta

**Nota:** Dice la fecha exacta del día siguiente al que se ejecuta

**Nota:** Dice el valor de PI

## Binario

Los mensajes binarios tienen la forma siguiente: `anObjecto aMessage anotherObject` Puedes inspeccionar los siguientes son mensajes binarios:

**Nota:** Realiza la suma

**Nota:** Realiza la multiplicación

**Nota:** Al tener el resultado de la operación, lo que hace el sistema es decir si es verdadero o falso

**Nota:** Dice la fecha de en 3 semanas exactas

**Nota:** Dice la fecha de hoy pero con 3 años más

**Nota:** Dice la fecha de hoy pero menos 3 años

**Nota:** El resultado es False. No entiendo cómo funciona

**Nota:** El resultado es True. No entiendo cómo funciona

**Nota:** El resultado es True. No entiendo cómo funciona

**Nota:** El resultado es True. No entiendo cómo funciona

**Nota:** El resultado es True. No entiendo cómo funciona

**Nota:** El resultado es False. No entiendo cómo funciona

**Nota:** Entiendo que separa los valores separados por @

**Nota:** Dice si el primer valor es menor o igual al segundo valor. En este caso es verdadero que 10 es menor o igual que 12

**Nota:** Dice si el primer valor es mayor o igual al segundo valor. En este caso es falso que 10 es mayor o igual que 12

**Nota:** Cuenta los elementos que contiene. En este caso 4

**Nota:** La fecha de hoy no es menor que la de ayer. El resultado es False

**Nota:** La fecha de hoy es mayor que la de ayer. El resultado es True

## Keyword

Los mensajes 'keyword' son mensajes con argumentos. Tienen la siguiente forma: `anObject akey: anotherObject akey2: anotherObject2` Inspecciona los siguientes mensajes keyword:

El mensaje lo que nos dice es: si (4) esta entre (0 y 10) cuya respuesta es verdadero, pero si cambio el valor del 0 por 3, el resultado es falso

**Nota:** El enunciado anterior está mal, ya que si se cambia el 0 por el 3, el resultado sigue siendo True

determina el valor máximo entre dos números.

El mensaje es `r:g:b:` implementado en la clase `Color`. Note que también puede escribir

Si quieres usar código RGB usando valores de 0 a 255, como es la práctica usual, deberás escribirlos como cociente, de forma que sean un número entre 0 y 1. Por ejemplo r: x/255 g: y/255 b: z/255, donde x,y,z son los valores entre 0 y 255 correspondientes al código que color que queremos obtener.

## Prioridad

Los mensajes unarios son ejectuados primero, los mensajes binarios son ejecutados despues y finalmente las cadenas de mensajes: paréntesis > Unary > Binary > Keywords

**Nota:** Realiza la operación de raíz dentro del paréntesis y le resta 2 porque está acompañado de "negated"

**Nota:** Realiza la suma que da 9

**Nota:** Tiene en cuenta las separaciones con paréntesis teniendo en cuenta las prioridades. El resultado es 32

**Nota:** Es un punto, pero no entiendo bien qué quiere decir

**Nota:** Entiendo que corner es esquina, pero no entiendo qué quiere decir aquí

**Nota:** Es un rectángulo, pero no entiendo bien qué quiere decir

Entre mensajes de procedencia similar, las expresiones son ejectuadas de izquierda a derecha

**Nota:** Determina el denominador y numerador de la fracción

### Cambiando la prioridad de los mensajes

Usar parentesis cambia el orden de evaluación de la sentencia, primero se ejecuta la parte interna() y posteriormente la sentencia

**Nota:** Hace primero lo del paréntesis y se va elevado al cuadrado por la palabra "squared" de afuera

**Nota:** Da 8 siguiendo el orden de paréntesis primero y luego lo de afuera

**Nota:** Pensaría que es la posición de algo hacia abajo a la derecha, pero no estoy seguro

### Prioridad de los mensajes matemáticos

Las reglas tradicionales de las matematicas NO aplican dentro de Pharo.

Aqui el mensaje multiplicación (`*`) es enviado al 2, y su resultado correspondiente es 20. Entonces 20 reciben el mensaje +, con argumento 2, para un total de 22. Recuerda que todos los mensajes simpre siguen una regla precente de izquierda a derecha, sin excepciones.

**Nota:** Se le da prioridad a lo que está dentro de paréntesis

**Nota:** No da lo mismo que las anteriores operaciones porque se le da prioridad a lo que está dentro del paréntesis

## Mensajes en cascada

Supongamos que tenemos un objeto donde queremos mostrar un conjunto de resultados

**Nota:** Entiendo que aquí se creó el objeto donde se quieren mostrar los reultados

Y enviamos esta secuencia de mensajes:

**Nota:** Se le va añadiendo qué queremos que diga. No recuerdo si "cr" significa espacio aquí

Enviar cada uno de los mensajes, refiriéndose individualmente al objeto receptor de los mismos es engorrosso. Para hacer lo mismo de manera abreviada usamos el operador en cascada "`;`", que usado para enviar mensajes al mismo receptor.

Así, una vez limpiemos el `Transcript` anterior

podemos verificar que enviar cada uno de los mensajes anteriores es igual a:

## Bloques

!!! info For this part a Basic understanding of Basic Types is recommended. If you have not done that part yet, please go to that subtree and run the code there

Ahora hablemos de los bloques. Piensa en los bloques como una manera de 'congelar' código que luego podremos ejecutar por demanda, cuando queramos y/o las condiciones para su ejecución se cumplan. Los bloques son métodos anónimos, lo cual quiere decir que no es necesario ponerles nombres para invocarlos (como ocurre con las operaciones sobre objetos que hemos visto hasta el momento) y pueden pueden ser almacenados en variables. Los bloques están delimitados por paréntesis cuadrados: `[]`

El bloque anterior no abre el Zen de Pharo, porque el bloque, por omisión, no es ejecutado. Ahora ejecuta:

Acá hay otro bloque que suma 2 a su argumento (su argumento se llama `x`):

Los argumentos, son las variables internas de los bloques, están precedidas por ':' y la barra vertical "`|`" separa la parte en que se definen los argumentos, de la parte en que se dice que hacer con ellos.

Podemos ejecutar un bloque enviandole mensajes `value`

Podemos tener además bloques que reciban varios argumentos, por ejemplo

## Asignación de bloques

Los bloques pueden ser asignados a variables y ejecutados después. Nota que `|b|` es la declaración de una variable llamada 'b' y que ':=' asigna un valor a una variable. Selecciona las siguientes tres líneas e imprimelas (Print it)

## Condicionales

Los condicionales son sólo menajes enviados a objetos Boolean (booleanos)

Aquí el mensajes es ifTrue:ifFalse Prueba esto:

## Ciclos e Iteradores

Los ciclos con iteradores de alto nivel sobre las colecciones, implementados como métodos regulares.

¿Qué hacer cuando necesito tanto el índice como el objeto? En ese caso usamos `doWithIndex`, que permite trabajar con los objetos y con su índice, es decir, tener bloques que reciben dos argumentos.

## Colecciones

El mensaje do: es enviado a una colección de objetos (Array, Set, OrderedCollection), evaluando el bloque para cada elemento. Acá queremos imprimir todos los números sobre el Transcript (una consola)

Some other really nice iterators

# Opcional

Las siguientes lecciones son algo más avanzadas y referidas a elementos de interfaces gráficas (botones, morphs) y cambios en caliente en los métodos de Smalltalk. Si bien son importantes, las exploraremos con detalle en otros lugares, así que puedes pasar al cierre de este tutorial y luego ir a otros nodos como los de código elegante en Pharo y otros ejemplos minimalistas para terminar en los distintos proyectos del nodo titulado "Visualización de datos".

## Ejemplos con botones

Los objetos son instancias de sus clases. Usualmente, enviamos el mensaje #new a una clase para crear una instancia de esta clase. El mensaje #allInstances enviado a una clase, responde un arreglo con todas las instancias de esta clase. Por ejemplo, miremos cuántas instancias de SimpleButtonMorph existen, imprimiendo la siguiente línea:

Ahora creemos una nueva instancia de él

Ves el botón centrado en el mundo? La lista de todas las instancias debería contener una instancia más

Juguemos con él:

Borrémosla y pidámosle al sistema limpiar la memoria:

Haz click sobre el botón para ir a la siguiente lección:

## Cambiando un sistema vivo en ejecución

Puedes inspeccionar y cambiar el sistema en tiempo de ejecución. Mira el código fuente del método `#ifFalse:ifTrue:` de la clase `True`:

O sólo su comentario:

Acá están todos los métodos que implementa el ProfStef, base de este notebook:

Creemos un nuevo método para ir a la siguiente lección:

Wow! No puedo esperar a usar mi nuevo método!

## Limpiando métodos

Tan chévere, ¿no? Antes de ir más allá, removamos este método:

## Explorando objetos

Pharo is full of objects. There are windows, text, numbers, dates, colors, points and much more. You can interact with objects in a much more direct way than is possible with other programming languages. Every object understands the message 'explore'. As a result, you get an Explorer window that shows details about the object.

This shows that the date object consists of a point in time (start) and a duration (one day long).

You see, class has a lot of objects. Let's take a look at my code: