# 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)':"

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:

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)':

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:

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

**NOTAS** no entiendo este códIgo, para que sirve exactamente

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

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

**NOTAS:** ¿Este código solo funcinciona con el abecedario occidental?

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

**NOTAS:**>>> 13 este cuenta la cantidad de caracteres que hay en una palabra.

**NOTAS:**ABC da las letras en mayúscula

**NOTAS:** Este código escribe al revés *Ej*: anit al aval atinA = Anita lava la tina

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

**NOTAS:** Cuenta los espacios en el que se encuentra ubicada una letra en específico.

La concatenación de String usa el operador coma:

**NOTAS:** No entiendo este código.

## 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**: 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?


**NOTAS:** Los valores son iguales comparandolos"

**NOTAS:** Los valores guardados son iguales.

**NOTAS:** Si bien son iguales no se hace un análisis tan profundo.

**NOTAS:** Se realiza un análisis más profundo de sobre la comparación de valores.

**NOTAS** El símbolo es único

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

Inspecciona las siguientes expresiones:

**NOTAS:** Arreglo que cuenta arreglos, es decir, puede contar los elementos que está en el primer paréntisis, pero NO los del segundo.

**NOTAS:** Este código cuenta la cantidad de elementos que hay en el arreglo.

**NOTAS:** Muestra el elemento que está de primeras.


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

**NOTAS:** La cantidad de puntos separa la cantidad de operaciones que se encuentren en los corchetes

Comparemos este arreglo estático

con este arreglo dinámico:

**NOTAS:** Los puntos separan la cantidad de paquetes por lo que en el arreglo hay 3 paquetes

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

**NOTAS:** la clase es el conjunto de elementos al que pertenece el objeto.

**NOTAS:** Representa la hora actual, sin embargo, no tiene conteo automático.

**NOTAS:** Fecha actual.

**NOTAS:** Fecha de ayer

**NOTAS:** Fecha de mañana.

**NOTAS:** números flotantes, esos que no se pueden representar racionalmente

## Binario

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

** NOTAS:** Objeto mensaje objeto

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

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

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

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

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

## Mensajes en cascada

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

Y enviamos esta secuencia de mensajes:

**NOTAS:** El cr en el código es para el salto de línea de texto.

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:

**NOTAS:** Este código es para mandar mandar varias instrucciones al mismo tiempo, el ; representa las diferentes actividades.

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

**NOTAS:** Representa los valores de Pharo?

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`

**NOTAS:** Calculos con números flotantes.

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

**NOTA:** siempre se debe establecer el valor.

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

**NOTAS:** Una vez asignado el valor de "b" puede realizar el cáculo anterior

## Condicionales

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

Aquí el mensajes es ifTrue:ifFalse Prueba esto:

**NOTAS:** En este caso se entra a hacer una comparación de falso o verdadero decidiendo si el número a es mayor que b.

**NOTAS:** En este ejemplo la comparativa es igual por lo que se da la instrucción de mostrar pharoZenValues.

## Ciclos e Iteradores

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

**NOTAS:** Muestra un conteo ascendente de 1 a 10.

**NOTAS:** Muestra la cadena multiplicada x2

**NOTAS:** Realiza conteo de tres en tres

**NOTAS:** Realiza conteos de 30 a 1 de manera descendente restando 2 a cada número.

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

**NOTAS:** realiza la operación de la colección multiplicando x2 a cada cifra.

Some other really nice iterators

**NOTAS:** Recolecta los números absolutos, (es decir, cuantos espacios hay desde el número hasta cero) en el caso de -2 es 2 pues hay dos espacios hasta cero.

**NOTAS:** Con mensajes de falso y verdadero muestra los valores impares.

**NOTAS:** Selecciona los números impares de la colección.

**NOTAS:** Selecciona los números mayores o iguales a 10.

**NOTAS:** Elimina los números que son mayores a 10.

**NOTAS:** Muestra la colección separa por puntos.

**NOTAS:** Detecte valores iguales a 0 en el caso del ejercicio, si lo encuentra da el mensaje "encontrado" y si no mostrar variable nula.

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