Map of Computer Science

1. PRESENTACIÓN


1.1. Datos de la asignatura

Temario

  1. End-user development y lenguajes visuales y de bloques

  2. Interacción multimodal y verbal

  3. Entornos inmersivos: realidad virtual, aumentada y mixta

  4. Videojuegos y aprendizaje: ludificación y evaluación

  5. Usabilidad y experiencia de usuario

Evaluación

  • Evaluación continua del trabajo en la asignatura

Procedimiento
  • Elaboración, entrega y defensa de un trabajo práctico para cada uno de los siguientes bloques a lo largo del curso

    • End-user development: Aplicación móvil con AppInventor

    • Interacción verbal: Agente conversacional y workflow con N8N

    • Entornos inmersivos: AR/VR/XR con Unity

    • Videojuegos y aprendizaje: Twine

    • Usabilidad y experiencia de usuario: Evaluación de User eXperience (UX)

  • Calificación: 20% entrega y defensa de cada bloque

  • La defensa de algunos bloques podrá hacerse con la grabación de un video

Bibliografía


1.2. Un poco de historia

Cronología
1940’s

Vannevar Bush — Visionario del hipertexto e internet

1960’s

Douglas Engelbart — Stanford SRI, Inventor del ratón

1970’s

Alan Kay — Xerox PARC, WIMP

  • Diciembre 1979 ⇒ Steve Jobs visita el Xerox PARC

1983-1984

Apple Computer — Lisa + Macintosh

1985-1995

Bill Gates — Microsoft Windows 1.0 / 3.1 / 95

2000’s

Steve Jobs (again)

  • 2007 ⇒ iPhone, pantalla táctil capacitiva

2017-2020

Deep learning, transformers

Historia de las interfaces de usuario (WIMP)

A user interface is the space where interactions between humans and machines occur

Vannevar Bush

Fue un físico estadounidense que trabajó en el MIT y en el Laboratorio de Investigación de la Oficina de Servicios de Guerra durante la Segunda Guerra Mundial. En 1945 publicó un artículo en la revista Atlantic Monthly titulado As We May Think en el que propuso un sistema de almacenamiento y recuperación de información basado en la idea de un hipotético dispositivo denominado memex.

1940’s: As We May Think
Vannevar Bush
As We May Think
Visionario del hipertexto y la Internet

Consider a future device for individual use, which is a sort of mechanized private file and library. It needs a name, and, to coin one at random, "memex" will do. A memex is a device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory…​

— Vannevar Bush
As We May Think

Memex fue el hipotético dispositivo hipertextual propuesto por Bush, un sistema de almacenamiento y recuperación de información que permitía la navegación entre documentos y la creación de hipervínculos entre ellos. Bush propuso que el dispositivo fuera capaz de almacenar y recuperar información de forma automática, de forma que el usuario pudiera concentrarse en la búsqueda de información y no en la gestión de la misma.

Memex animation [2'33'']
Memex: Del archivo al recorrido de asociaciones
  • La animación del Memex muestra cómo una consulta se convierte en un recorrido: el usuario relaciona documentos, incorpora comentarios y conserva caminos que puede recuperar y compartir. El interés está en representar las relaciones que construye una persona, además de almacenar los documentos.

  • Vídeo: Memex animation — Vannevar Bush’s diagrams made real. Es una recreación posterior de la propuesta de Bush, no una filmación de una máquina construida en 1945.

Ivan Sutherland

En 1963, en el MIT, desarrolló el primer prototipo de un dispositivo de interacción humano-computador, el Sketchpad, que permitía al usuario interactuar con la computadora dibujando en una pantalla. Este dispositivo fue el antecedente de los sistemas de interacción gráfica de hoy en día.

1960’s: Sketchpad
Premio BBVA 2019 Fronteras del conocimiento en categoría TIC a Ivan Sutherland [2'35'']
Steven A. Coons explicando Sketchpad [2'35'']
Sketchpad: dibujar, imponer relaciones y modificar
  • En la demostración de Sketchpad, el lápiz luminoso permite introducir figuras y actuar sobre ellas. La pantalla funciona como una ventana sobre un espacio de dibujo mayor. La interacción no consiste únicamente en producir una imagen: las relaciones entre sus elementos permiten modificar la construcción conservando su estructura.

  • Vídeos: Ivan Sutherland Sketchpad Demo 1963.

Douglas Engelbart

En 1962, en el Stanford Research Institute, desarrolló el NLS (oN-Line System), un sistema de interacción humano-computador que permitía al usuario interactuar con la computadora a través de un teclado, un ratón y una pantalla. Este sistema fue el antecedente de los sistemas de interacción gráfica de hoy en día.

Alan Kay

En 1968, en el Xerox Palo Alto Research Center (PARC), desarrolló Smalltalk, un lenguaje de programación orientado a objetos que permitía la creación de interfaces gráficas de usuario. Este lenguaje fue el antecedente de los lenguajes de programación orientados a objetos de hoy en día.

En 1973, Xerox desarrolló Xerox Alto, el primer prototipo con interfaces gráficas de usuario WIMP (Windows, Icons, Menus, Pointer).

WYSIWYG
Interfaz WIMP de Xerox Alto (1973) [2'15"]
Xerox - The Company that threw away everything [30'']

La interfaz WIMP de Xerox Alto fue la primera GUI que permitía la creación de ventanas, iconos, menús y ratón. Esta interfaz fue el antecedente de las interfaces gráficas de usuario de hoy en día. Xerox Alto (1973) no fue un producto comercial, pero su tecnología fue licenciada primero por Apple y luego por Microsoft para sus propios sistemas operativos. Xerox Star (1981) fue el primer producto comercial que utilizó la interfaz WIMP, pero no tuvo éxito en el mercado debido a su precio.

WIMP

WIMP = Windows, Icons, Menus and Pointer

Xerox WIPM: Del laboratorio a la edición interactiva
  • La restauración del Alto permite observar herramientas de edición, dibujo, red y Smalltalk en una misma plataforma. La demostración de Bravo muestra selección de texto, inserción, copia, formato y desplazamiento por documentos. Estas operaciones ayudan a estudiar cómo la representación visible y la rapidez de respuesta hacen posible trabajar sobre un resultado mientras se construye.

  • Vídeo: Xerox Alto Restoration — Demo: observar las diferencias entre Bravo y el entorno de ventanas de Smalltalk.

  • Vídeo: Yesterday’s Computer of Tomorrow — Bravo Demo: comparar sus selecciones y modos de edición con un procesador de texto actual.

  • Vídeo: All the Widgets (1990), Brad A. Myers: visionado complementario para recorrer la historia de los controles de interfaz.

Steve Jobs

Steve Jobs visitó el PARC de Xerox en 1979 y se llevó consigo la idea de la interfaz gráfica de usuario WIMP.

En 1983, Jobs presentó el Apple Lisa, el primer ordenador personal de Apple que operaba con interfaz gráfica de usuario WIMP y un ratón. La tecnología del Lisa fue utilizada posteriormente en el Apple Macintosh (1984), que se convirtió en el primer ordenador personal de éxito comercial con interfaz gráfica de usuario WIMP.

How Steve Jobs got the ideas of GUI from XEROX [9'40"]
Interfaces WIMP
Interfaz WIMP del Apple Macintosh (1987) [1'21'']
Ver la película "Steve Jobs"
Macintosh WIMP: Innovación técnica y difusión de una interfaz
  • El fragmento documental sobre la visita de Jobs a PARC y la retrospectiva sobre Xerox permiten separar dos problemas: inventar una forma de interacción y convertirla en un producto que se difunde. La historia de las GUI no se explica solo por una persona o una fecha; intervienen investigación, demostraciones, decisiones de producto y adaptación de ideas anteriores.

  • Vídeos: How Steve Jobs got the ideas of GUI from XEROX y Xerox — The Company That Threw Away Everything.

  • Lectura crítica: el segundo video mezcla historia tecnológica con una valoración empresarial de su autor. Sus pronósticos sobre Xerox no son hechos históricos ni se usan aquí como descripción de su situación actual.

Bill Gates

Bill Gates incorpora la interfaz WIMP a Windows.

Bill Gates a Steve Jobs, sobre la tecnología de Xerox

Creo que es más como si ambos tuviéramos este vecino rico llamado Xerox y yo irrumpí en su casa para robar el televisor y descubrí que tú [Steve Jobs] ya lo habías robado

Steve Jobs (again)

Apple incorpora las pantallas táctiles capacitivas a sus dispositivo móvil iPhone, lo que amplía el interés en nuevas formas de entrada y en las interfaces gráficas de usuario basadas en gestos.

Es importante distinguir entre las mejores interfaces de usuario para entrada y las mejores para salida.

Sam Altman

Sam Altman, director ejecutivo de Open AI, propone el término Language User Interface (LUI) para referirse a las interfaces de usuario basadas en lenguaje natural:

  • Interacciones conversacionales (chatbots)

  • Sugerencias generadas por Large Language Models (LLM)

  • Interacciones contextualizadas

A pesar de que los LLM son una tecnología clave para la interacción verbal de entrada (chatbots), las interfaces de salida siguen siendo muchas veces gráficas, visuales o de otro tipo (por ejemplo, hápticas).


1.3. Un poco de teoría

Antes de las interfaces de usuario…​

Timesharing: Tiempo compartido y continuidad de la interacción
  • Vídeo: 1963 Timesharing: A Solution to Computer Bottlenecks.

  • La entrevista de 1963 a Fernando Corbató contrapone el procesamiento por lotes, con esperas largas, al acceso mediante terminales compartidos. El ordenador alterna usuarios con rapidez y cada persona puede continuar su trabajo de forma interactiva. Una infraestructura distinta cambia así el ritmo de la relación con la máquina.

  • La demostración incluye un programa que pide datos y solicita una aclaración si la respuesta no coincide con las opciones esperadas. La facilidad de uso depende también de cómo el sistema mantiene el diálogo y ayuda a recuperarse de una entrada inesperada.

Interfaces de usuario

Interfaces de usuario

Software y hardware que salvan las diferencias entre la acciones humanas y las acciones del ordenador

  • Comportamiento funcional determinista del ordenador

  • Las UI (User Interface) hacen un mapping de las capacidades sensoriales, cognitivas y sociales del humano hacia las funciones de la máquina

  • Las UI deben ofrecer representaciones "aprendibles" (learnable): algunas lo hacen y otras no

Aprendibilidad

Learnability ("aprendibilidad")

Facilidad con que un producto o aplicación de software puede ser comprendido y utilizado por los usuarios

Nota ¿Cuáles de las siguientes interfaces proporcionan representaciones aprendibles?
  • ¿Un ratón?

  • ¿Una pantalla táctil?

  • ¿Una interfaz de voz?

  • ¿Una interfaz de realidad virtual?

Nota ¿Todas las UI proporcionan un comportamiento funcional determinista?

Disciplinas involucradas

Disciplinas involucradas
  • Ciencia de la computación (en España, Informática)

  • Sistemas de información (en España, Informática; fuera, Business)

  • Ingeniería del software (en España, Informática)

  • Inteligencia artificial (en España, Informática)

  • Ergonomía y diseño de producto (en España, Diseño industrial y desarrollo de producto)

  • Diseño gráfico

  • Psicología cognitiva y Neuropsicología

  • Sociología

  • Lingüística [computacional]

  • Information Science (en España, Biblioteconomía y documentación)

  • Filosofía y Antropología

HCI: Situar la interacción persona-ordenador en el mapa de la informática
  • El mapa de Dominic Walliman organiza la informática en teoría, ingeniería y aplicaciones. Sitúa la interacción persona-ordenador junto a ámbitos como la realidad virtual, la realidad aumentada y la robótica. Para IEU, interesa reconocer las conexiones: una interfaz usa capacidades técnicas, pero debe estudiarse también desde las tareas y capacidades de las personas.

  • Vídeo: Map of Computer Science: IPO y entornos inmersivos, desde 8:55.

  • Propuesta de actividad: localizar en el mapa las áreas que necesita una aplicación de la asignatura y justificar qué aporta cada una.

Teorías de la interacción

Múltiples teorías
  • Teoría de la actividad

  • Modelos conceptuales

  • Procesos de diseño

  • Búsqueda de información

  • Semiótica

  • Comunicación

  • Etc.

  • La teoría de la actividad se centra en el análisis de las actividades que el usuario realiza con el sistema y en la descripción de las tareas que el usuario realiza con el sistema.

  • Los modelos conceptuales se basan en la idea de que el usuario tiene una representación mental del sistema y que esta representación mental se construye a partir de la experiencia del usuario con el sistema.

  • La semiótica se basa en la idea de que el usuario interpreta el sistema como un conjunto de signos.

Affordances y feedback

Affordances ("asequibilidades") y feedback (retroalimentación)
  • Affordance = propiedad de las interfaces que indica qué puede hacerse con ellas

    • Por ejemplo: la forma de un artefacto

    • En semiótica, affordance = el significante

    • Compuestos de hardware y software

  • Feedback = las interfaces deben responder a las acciones del usuario

    • Por ejemplo, el sonido del click

  • Las interfaces deben permitir construir un modelo mental de cuáles son las acciones posibles (el significado)

Nota ¿Qué implica este significante?
Stop sign

1.4. Temario detallado


Tema 1. Interacción + Lenguajes visuales y de bloques

Teoría

Estilos de interacción

End-user development

Lenguajes visuales de bloques

Herramientas

Scratch, Snap!, App Inventor, Tinker CAD, Workflows N8N, etc.

Tema 2. Interacción multimodal y verbal

Teoría

Interacción multi-modal

Interfaces verbales

Herramientas

DialogFlow, IBM Watson, Amazon Lex, Rasa NLU, N8N, ChatGPT, etc.

Tema 3. Entornos inmersivos: realidad virtual, aumentada y mixta

Teoría

Conceptos

Dispositivos y demostración

Herramientas

Vuforia, Unity 3D, VEDILS, etc.

Tema 4. Videojuegos y aprendizaje: evaluación y ludificación

Teoría

Videojuegos como herramientas de aprendizaje, gamificación y evaluación

Herramientas

Twine, H5P, etc.

Tema 5. Usabilidad y experiencia de usuario

Teoría

Usabilidad, Experiencia de usuario, Accesiblidad, Arquitectura de la información, Diseño de la interacción

Herramientas

Evaluación de UX

2. ESTILOS DE INTERACCIÓN

Estilos de interacción representativos
Manipulación directa

Interacción mediante acciones físicas sobre objetos virtuales que simulan propiedades y comportamiento del mundo real.

Navegación y selección por menús

Uso de listas o paneles jerárquicos para explorar opciones y elegir comandos o funciones.

Rellenado de formularios

Introducción de datos mediante campos específicos para estructurar la información que el sistema procesa.

Lenguajes de comandos

Interacción textual donde el usuario escribe órdenes exactas para que el sistema las ejecute.

Lenguaje natural (humano)

Comunicación verbal mediante texto o voz usando lenguaje cotidiano y entendible sin codificación técnica.

Entornos inmersivos

Interfaces que sumergen al usuario en un espacio digital tridimensional, permitiendo interacciones realistas dentro del entorno virtual


2.1. Manipulación directa

  • Es el paradigma inherente en las interfaces WIMP (Windows, Icons, Menus and Pointers)

  • Uso intensivo del drag-and-drop

  • Navegación fluida

Ejemplo 1. Manipulación directa para convertir bosquejos hechos a mano en gráficos vectoriales [1']

Características de la manipulación directa

  1. Los objetos de interés siempre están representados con una metáfora visual

  2. La forma de invocar comandos es interactuar con el objeto a través de acciones físicas

  3. Se obtiene una retroalimentación inmediata de la acción sobre el objeto, que es reversible

Manipulación directa: Elegir entre actuar y describir
  • Enrico Tartarotti utiliza gestos como ampliar una foto o arrastrar un archivo para explicar la ventaja de actuar sobre objetos visibles. Esas acciones no exigen redactar una instrucción. Sin embargo, una interfaz con demasiadas opciones puede acumular paneles y menús difíciles de explorar. Su argumento favorece combinar modalidades según la tarea, no reemplazar siempre la GUI por un chat.

  • Vídeo: The Weird Future Of User Interfaces: manipulación directa, desde 6:53.

  • Propuesta de actividad: realizar la misma tarea con un gesto y con una petición escrita. Comparar descubribilidad, precisión y facilidad de corregir el resultado.

Ejemplos de manipulación directa

  • Sistemas de información geográfica con GPS

  • Videojuegos

  • CAD/CAM

Nota ¿Son las interfaces interactivas tipo WIMP naturales o aprendibles?
Ver la serie The Billion Dollar Code sobre los orígenes de Google Earth.

Futuro de la manipulación directa

Nota ¿Qué futuro espera a la manipulación directa?
  • Pantallas táctiles

  • Interfaces 2D y 3D

  • Inteligencia artificial

Ejemplo 2. Conversión de imágenes bitmap en SVG usando ML [1'47'']
Illustrator: Del trazo manual a la asistencia aprendida

Distancia traslacional

Distancia entre el usuario y la representación de la metáfora

  • Débil

  • Media

  • Fuerte

  • Inmersiva

Nota ¿Qué distancia traslacional suponen estas UI?
Mandos de videojuegos
Trackball en viejo macintosh
Interfaz tabletop
Interfaz tangible
Distancias traslacionales
  • Débil — e.g. mandos de videojuegos

  • Media — e.g. pantallas táctiles y multi-táctiles

  • Fuerte — e.g. guantes, gestos, tangibles

  • Inmersiva — e.g. realidad virtual, realidad extendida


2.2. Lenguajes de comandos

Ejemplo 3. Lenguajes de comandos: shell
explainshell.com
Ejemplo 4. Lenguaje de programación: SQL
showthedocs.com
Lenguajes para programación y configuración

2.3. Lenguajes de programación visual

Los primeros lenguajes propuestos por el End-user development
  • Lenguajes de bloques: Block-based languages

  • Lenguajes de construcción y modelado: Building Information Modeling (BIM)

  • Lenguajes mixtos: v.g. strype

Lenguajes de bloques

Lenguajes de construcción y modelado

Lenguajes de construcción y modelado

2.4. Lenguaje humano

A tratar en el tema Interacción multimodal y verbal
  • Lenguaje natural

  • Interfaces de voz


Lenguaje humano: Lenguaje cotidiano, especificaciones y estado visible
  • Saleh Kayyali distingue la aparente sencillez de escribir una petición del trabajo necesario para precisar objetivos, contexto y restricciones. Al aumentar la complejidad, el texto puede convertirse en una especificación. La desaparición de controles visibles también puede ocultar el estado y obligar a inspeccionar lo que ha hecho un agente.

  • Vídeo: When the Interface Flattens Into a Prompt, desde 5:00.

  • Implicación para el diseño: ofrecer formas de explorar, comprobar y corregir, además de un campo de texto.

  • Propuesta de actividad: describir una tarea primero en lenguaje libre y después con restricciones explícitas; anotar las decisiones que la primera versión dejaba al sistema. Las hipótesis del vídeo sobre efectos cognitivos son materia de discusión, no una prueba de que usar IA cause pérdida de capacidad crítica.

2.5. Entornos inmersivos

A tratar en el tema Entornos inmersivos
  • Interacción gestual

  • Realidad virtual

  • Realidad aumentada

  • Realidad mixta

  • Realidad extendida

Entornos inmersivos: De la pantalla a la relación espacial
  • La semblanza de Sutherland de la Fundación BBVA conecta su trabajo en interacción gráfica con el desarrollo del primer casco de realidad virtual. El mapa de Computer Science sitúa también la realidad virtual, aumentada y la telepresencia entre las aplicaciones de la informática.

  • Vídeos: Fundación BBVA: Ivan Sutherland: Relaciona las contribuciones de Ivan Sutherland a la interacción gráfica y la realidad virtual

  • Propuesta de actividad: comparar apuntar con un ratón y seleccionar un objeto en un entorno inmersivo: referencia espacial, dispositivo de entrada y feedback necesario. Estos vídeos aportan contexto histórico; no sustituyen un tutorial de desarrollo de AR/VR.

3. END-USER DEVELOPMENT

Los usuarios más avanzados suelen necesitar poder personalizar o ampliar las aplicaciones que manejan. Por ejemplo: Organizar recetas de cocina con Airtable.

  • Algunos programas y apps pueden tener un cierto grado de libertad para configurar su comportamiento. Otros son cajas herméticamente cerradas a las que un usuario avanzado puede querer modificar de su comportamiento.

  • Si no hay un botón que haga exactamente lo que el usuario quiera, su única alternativa es pedírselo al desarrollador del programa (al que le puede resultar conveniente hacerlo o no, y si lo hace normalmente querrá cobrar por ello).

Esta es una reclamación tradicional de los defensores del software libre y FLOSS (Free and Libre Open Source). En la práctica, reconstruir una aplicación y modificarla a partir del código fuente requiere un esfuerzo y exige habilidades avanzadas de desarrollo de software.

  • Algunas herramientas permiten plugins que se ejecutan dentro de la aplicación principal para hacer las ampliaciones o modificaciones.

  • Otras herramientas ofrecen una Application Programming Interface (API) para que los desarrolladores puedan hacer esas ampliaciones desde fuera y dejen a la aplicación principal hacer el resto.

El software debería ser ampliable y extensible de una forma más fácil y rápida, para que cualquier usuario final o end-user pueda automatizar, personalizar o construir su propia herramienta a partir de una dada. Para ello necesitan un lenguaje de End-User Development (EUD).

  • El objetivo de la HCI/HMI pasa de hacer sistemas fáciles de usar a hacer sistemas fáciles para desarrollar

  • Desafío ⇒ construir sistemas que permitan a usuarios sin conocimientos de programación combinar de forma creativa artefactos hechos de software

  • Combinación de artefactos ⇒ crear, modificar y ampliar artefactos software

  • Los end-users no son desarrolladores profesionales

Definición de EUD (Lieberman et al. 2006)

A set of methods, techniques, and tools that allow users of software systems, who are acting as non-professional software developers, at some point to create, modify, or extend a software artifact

— H. Lieberman et al.
End-User Development: An Emerging Paradigm
Algunos ejemplos de EUD

3.1. End-User Programming

Nota ¿Por qué end-user?

Hace falta un término que distinga al desarrollo/programación por parte del usuario del desarrollo/programación hecho por profesionales de ingeniería de software

  • Los ingenieros de software profesionales construyen aplicaciones de propósito general diseñadas para ser empleadas por muchas personas

  • Los programadores end-user son usuarios avanzados, no necesariamente programadores profesionales, que modifican o crean herramientas ad hoc para su uso personal o para compartir con unos pocos colegas, todo lo más.

Nota Lectura recomendada
Nota ¿Por qué algunos ingenieros prefieren Python y otros Excel?
  • Calculation View: Representaciones múltiples de la edición en hojas de cálculo

Python en Excel

Microsoft ha incorporado Python en Excel en una versión preliminar para el programa insider del canal beta.


Alternativas al texto: Representaciones accesibles y límites de la abstracción
  • Dan Vanderkam repasa HyperCard, Visual Basic, Interface Builder y hojas de cálculo como formas de acercar la creación de programas a más personas. Su defensa del texto no niega la utilidad de estas herramientas: pregunta por qué el código textual sigue siendo importante al construir y mantener sistemas complejos.

  • Vídeo: Why Source Code is Always Text: alternativas al texto, desde 14:30.

  • Propuesta de actividad: elegir una herramienta visual y comprobar cómo representa los eventos, las relaciones entre componentes y las operaciones que no pueden expresarse mediante sus controles.

3.2. Computational Thinking

Los entornos y lenguajes de EUD ofrecen la capacidad de crear con una herramienta, más allá de la capacidad de usar una herramienta.

On Computing…​ (Rosembloom 2013)

[…​] incorporates both understanding (as is the focus in most traditional science) and shaping (as is the focus in engineering and other professions)

— Paul Rosenbloom
On Computing: The Fourth Great Scientific Domain

Pero para poder crear y desarrollar software, hacen falta unos mínimos conocimientos y habilidades sobre los conceptos básicos sobre lo que un ordenador puede hacer, cómo lo hace y cómo instruirlo para que lo haga. Esto es el terreno del pensamiento computacional o computational thinking subyacente al Computing (en español, traducido por "Informática").

Computational thinking (Wing 2006)

Computational Thinking involves solving problems, designing systems, and understanding human behavior, by drawing on the concepts fundamental to computer science.

Computational thinking is a fundamental skill for everyone, not just computer scientist […​]; involves solving problems, designing systems, and understanding human behaviour, by drawing on the concepts fundamental to CS […​]; is thinking recursively. It is parallel processing […​]; is using abstraction and decomposition when […​] designing a large complex system […​]; is thinking in terms of prevention, protection, and recovery from worst-case scenarios […​]; is using heuristic reasoning to discover a solution.

— J. Wing
Computational Thinking -- Communications of the ACM
Nota ¿Recuerdan a Vannevar Bush?
As We May Think
Visionario del computational thinking

Wholly new forms of encyclopedias will appear, ready made with a mesh of associative trails running through them, ready to be dropped into the memex and there amplified. The lawyer has at his touch the associated opinions and decisions of his whole experience, and of the experience of friends and authorities. The patent attorney has on call the millions of issued patents, with familiar trails to every point of his client’s interest. The physician, puzzled by a patient’s reactions, strikes the trail established in studying an earlier similar case, and runs rapidly through analogous case histories, with side references to the classics for the pertinent anatomy and histology. The chemist, struggling with the synthesis of an organic compound, has all the chemical literature before him in his laboratory, with trails following the analogies of compounds, and side trails to their physical and chemical behavior.

— Vannevar Bush
As We May Think
Nota Lectura recomendada

Complejidad: poder razonar sobre lo construido
  • Peter van Hardenberg separa dificultad y tamaño de la complejidad producida por interacciones entre partes. El problema aparece cuando resulta difícil anticipar cómo se comportará el conjunto. Para el EUD, una herramienta fácil de empezar no garantiza que el usuario pueda comprender una solución grande.

  • El autor propone, entre otras estrategias, reducir el alcance y trabajar con plataformas acotadas. Se trata de una decisión de diseño: dedicar esfuerzo a una solución pequeña y comprensible, en lugar de incorporar todas las posibilidades.

  • Vídeo: Why Can’t We Make Simple Software?; definición desde 1:40 y reducción de alcance desde 33:20.

3.3. Low code

El low code es una evolución del EUD, que permite a los usuarios crear aplicaciones sin necesidad de escribir mucho código.

Algunos ejemplos de lenguajes de low code son:

  • Microsoft PowerApps

  • Google AppSheet (sucesor de App Maker)

  • Apple SwiftUI / Swift Playgrounds

  • Oracle Visual Builder y Oracle APEX

  • Salesforce Lightning

  • Mendix

  • GeneXus

  • OutSystems


Low code: Poder bajar de nivel cuando la herramienta no basta
  • Vanderkam advierte de las abstracciones que dejan escapar detalles: un editor visual puede simplificar lo habitual, pero una excepción puede exigir comprender tanto la herramienta como el código que genera. La selección de una plataforma debe considerar esa posibilidad y la forma de revisar sus cambios.

  • Vídeo: Why Source Code is Always Text: abstracciones y herramientas, desde 20:40.

  • Propuesta de actividad: documentar una operación resuelta visualmente y otra que obliga a recurrir al código.

3.4. Embodiment o Encarnación

Una de las partes más difíciles de la construcción de software es que requiere que el programador mantenga varias abstracciones en su mente. El programador debe comprender el dominio del problema, modelar las estructuras de datos y el flujo del programa, y finalmente trasladar todo a una representación simbólica (código en un lenguaje).

La capacidad de razonamiento abstracto y concentración exigida a un ingeniero de software para escribir software no es viable para alguien que solo quiere resolver su problema particular mediante el ordenador y que suele ser experto en otros dominios ajenos al de la programación.

Hacen falta formas que requieran menos razonamiento abstracto y menos capacidad mental para modelar los programas y los datos, dejando más capacidad para pensar en el dominio de la aplicación.

Una forma de hacer esto es el embodiment o encarnación, es decir, ofrecer al usuario final representaciones concretas para los elementos de un programa que funcione.

Las encarnaciones son normalmente visuales, pero también de otros tipos (auditivas, hápticas, etc.)

Ejemplos de Encarnaciones
  • Blockly: Encarnación gráfica (como bloques) en un lenguaje visual similar al usado por Scratch, App Inventor, etc.

  • Seymour: Encarnación (como código) de la salida de un programa

  • Bolt: Encarnación (gráfica) en un lenguaje visual de scripting para juegos en Unity

Nota ¿Excel usa alguna encarnación?
  • Calculation View: Encarnaciones múltiples de la edición en hojas de cálculo


3.5. Programación literaria

  • Literate Programming: Invento de Donald Knuth en 1983

  • El código fuente se parece mucho más a un documento que a un listado de código

  • Bloques de código embebido en un documento

  • Genera un documento legible junto a código ejecutable

Ejemplos de programación literaria
  • Jupyter: Entorno interactivo para crear notebooks, código y datos en una diversidad de lenguajes (Python, SQL, R, Matlab, etc.)

Nota Lectura recomendada
Especificación: Conservar la intención además del resultado generado
  • Sean Grove propone tratar la especificación escrita como un artefacto duradero. Guardar solo el código generado puede perder los objetivos y criterios que llevaron a él. La especificación permite discutirlos, revisarlos y relacionarlos con ejemplos que comprueban el comportamiento esperado.

  • Esto conecta con la programación literaria por el valor de preservar explicaciones, aunque son enfoques distintos: una especificación de comportamiento no es, por sí sola, un programa literario.

  • Vídeo: The New Code: conservar la especificación, desde 5:08.

  • Propuesta de actividad: acompañar una automatización de su propósito, restricciones y tres ejemplos de aceptación; comprobar si otra persona puede entenderla sin reconstruir toda la intención a partir del código.

3.6. Herramientas


Herramientas GUI

  • Adobe XD: Diseño y prototipado

  • Balsamiq: Prototipado rápido

  • Figma: Diseño y prototipado; freemium

  • Lunacy: Diseño y prototipado; free

  • Penpot: Diseño y prototipado; ¡open source!


Diseño asistido por IA: de la intención a pantallas revisables
  • El tutorial de UX Pilot recorre la definición de una idea, selección de funciones, ampliación de requisitos, diagramas, wireframes y pantallas. La intervención humana no termina al generar: el autor revisa propuestas, modifica elementos y conserva los prompts como parte de la documentación.

  • Vídeo: Design An App With AI — UX Pilot Tips & Tricks. Puntos de entrada: idea, 1:41, wireframes, 7:47 y documentación, 12:06.

  • Complemento: Demo of UX Pilot AI. Su descripción anuncia generación de diseños y edición conversacional.

  • Propuesta de actividad: conservar una propuesta inicial y una revisada, con una justificación de los cambios basada en la tarea del usuario.

Lenguajes data-flow


Lenguajes mixtos

4. UX E INTELIGENCIA ARTIFICIAL

4.1. Evolución del EUD

El EUD ha evolucionado en tres grandes generaciones:

  • En la primera, el usuario debía escribir todo el código directamente, lo que exigía conocimientos técnicos avanzados y limitaba la creación de soluciones a perfiles especializados.

  • La segunda generación trajo plataformas de low code y no code, donde los usuarios podían construir aplicaciones y automatizaciones mediante interfaces visuales, arrastrando y configurando bloques, reduciendo la dependencia de programadores expertos.

  • Una tercera generación, impulsada por la IA Generativa y el prompting, permite que los usuarios describan lo que quieren en lenguaje natural y el sistema genera, adapta o ejecuta el flujo automáticamente a través de agentes inteligentes (v.g. herramientas tipo n8n). Esto democratiza aún más la creación.

Prompting y agentes: Formas de expresar el comportamiento del software
  • Karpathy distingue código explícito escrito por personas, parámetros de redes aprendidos con datos y modelos que se programan mediante lenguaje natural. Esta clasificación ayuda a diferenciar construir una regla, entrenar un modelo y pedir a un modelo ya entrenado que realice una tarea. No implica que una forma elimine las anteriores.

  • Vídeo: Software Is Changing (Again): Software 1.0, 2.0 y 3.0, desde 1:25.

  • Propuesta de actividad: clasificar una automatización con reglas, un clasificador entrenado y una aplicación con prompts. Identificar qué debe revisar o modificar el usuario en cada caso.

4.2. La IA y el futuro de las UI

The Weird Death of User Interfaces [14'33"]

Enrico Tartarotti plantea, como tesis de su vídeo, que las UI utilizadas durante los últimos 40 años están siendo desplazadas. Se trata de una interpretación sobre su evolución, no de un hecho establecido sobre su desaparición. A pesar de los esfuerzos recientes por perfeccionar y embellecer estas interfaces, las mismas compañías están intentando eliminarlas por completo, reemplazándolas con simples "prompts de texto en blanco y negro" que recuerdan a las líneas de comando de los años 80.

Esta transición se debe a que, si bien las UIs tradicionales son muy buenas para la salida (mostrar información de forma visual), son deficientes en la entrada (la necesidad de navegar por menús y hacer clics).

Por el contrario, los nuevos chatbots han resuelto el problema de la entrada al "entender" el lenguaje natural, aunque su salida sigue siendo el texto plano. En el futuro post-UI, las interfaces no se construirán, sino que se generarán sobre la marcha a través de agentes que responden al lenguaje, lo que puede llevar a que las UIs desaparezcan en gran medida.

Interfaces generativas y revisión del diseño
  • Los dos ensayos de Tartarotti se pueden leer como propuestas sobre la evolución de las interfaces, no como la constatación de que las GUI hayan desaparecido. El segundo diferencia componentes generados para una tarea, aplicaciones que combinan partes estables y generativas, y productos organizados alrededor de reglas de generación. La elección entre GUI, lenguaje y agentes depende de la actividad.

  • Vídeo: The Weird Death Of User Interfaces: antecedente de la discusión.

  • Vídeo: The Weird Future Of User Interfaces: interfaces generativas, desde 9:40.

  • Caso de diseño: Designing a Mobile App From Scratch With AI (UX Pilot). La demostración permite observar el paso de un flujo a pantallas y la revisión de su presentación. Una pantalla generada no demuestra por sí misma que una aplicación funcione ni que sea usable.

  • Propuesta de actividad: elegir qué partes de una aplicación deben permanecer estables y cuáles podrían adaptarse sin perjudicar la orientación del usuario.

4.3. La IA como sistema operativo

OpenAI just made your entire tech stack obsolete…​ [15"]

El intento de OpenAI de usar ChatGPT como un sistema operativo (SO) o interfaz universal para todas las aplicaciones se resume en su ambición de convertir a ChatGPT en una plataforma de aplicaciones, buscando reemplazar o evitar la necesidad de las GUI tradicionales. Este esfuerzo ha pasado por varias fases y se basa en la idea de que la forma de interactuar con el software está cambiando fundamentalmente.

La analogía que se hace es que los LLM tienen propiedades que los asemejan a los sistemas operativos (SO).

  • ChatGPT como plataforma: OpenAI está apostando fuertemente por convertir a ChatGPT en una plataforma de aplicaciones. El objetivo es que ChatGPT actúe como un SO que te mantenga completamente encerrado en su ecosistema.

  • La analogía del SO: Los LLMs se ven como una especie de nuevo sistema operativo. El LLM en sí es como la CPU y las ventanas de contexto son como la memoria. El LLM orquesta computación y memoria para resolver problemas.

El experimento de la interfaz universal

OpenAI just made your entire tech stack obsolete…​ [30"]

OpenAI ha intentado varias aproximaciones para lograr que ChatGPT sea la interfaz de interacción principal:

  • Inicialmente, lanzaron GPT Plugins

  • Luego, intentaron una ligera variación llamada GPTs

  • Actualmente, están intentando implementar Apps in ChatGPT.

Apps in ChatGPT: Plataforma, interfaz y producto especializado
  • El vídeo de Fireship comenta la integración de aplicaciones y herramientas en ChatGPT. Sirve para discutir qué gana y qué pierde el usuario cuando varias tareas pasan por un mismo punto de entrada: acceso, contexto compartido, dependencia de la plataforma y adecuación de la interfaz a cada tarea.

  • Vídeo: OpenAI just made your entire tech stack obsolete…​. Es comentario tecnológico con tono satírico y contenido patrocinado; el título no demuestra que otras herramientas hayan quedado obsoletas.

El paradigma de la entrada y salida

La clave de este intento radica en la capacidad de los chatbots para manejar la entrada del usuario de forma humana, aunque su salida sea actualmente deficiente:

  • Entrada: con un chatbot puedes "divagar" en modo de voz o escribir un prompt mal formado, y el LLM es muy bueno para entender lo que quieres.

  • Salida: sin embargo, fallan en la salida; son malos mostrando la información o haciéndote sentir en control, volviendo a interfaces similares a las líneas de comando de los años 80.

Agentes autónomos

OpenAI just made your entire tech stack obsolete…​ [1'30"]

AgentKit de OpenAI es un conjunto unificado de herramientas diseñado para que los desarrolladores puedan construir, desplegar y optimizar agentes de IA (agents).

Es la alternativa de OpenAI a soluciones open source como n8n.

4.4. Autonomía parcial

Aplicaciones parciamente autónomas [21']

Andrej Karpathy considera las aplicaciones parcialmente autónomas como una de las mayores oportunidades en la era del software impulsado por LLM. Estas aplicaciones representan una forma de interactuar con los modelos de lenguaje que va más allá de simplemente usar el LLM directamente como una terminal o un sistema operativo (como copiar y pegar código en un chat).

Estas aplicaciones están diseñadas para la cooperación entre humanos e IA (Human in the loop). En esta cooperación, la IA se encarga de la generación del trabajo, mientras que los humanos realizan la verificación o auditoría. El objetivo principal es hacer que este ciclo de generación y verificación sea lo más rápido posible.

Aplicaciones parcialmente autónomas

Las aplicaciones parcialmente autónomas, como Cursor (para programación) y Perplexity (para investigación), comparten varias propiedades fundamentales:

  1. Gestión del contexto: Los LLM dentro de estas aplicaciones manejan una enorme cantidad de la gestión del contexto por el usuario.

  2. Orquestación de LLMs: Orquestan múltiples llamadas a diferentes modelos LLM, incluyendo modelos de embeddings, modelos de chat y modelos específicos que aplican cambios (como diffs de código).

  3. GUI Específica: Poseen una GUI especializada para la aplicación.

    • La GUI es vital para la auditoría, ya que utiliza la capacidad de visión artificial 😉 del cerebro humano.

    • Leer texto es un esfuerzo, pero mirar representaciones visuales es rápido y fácil. Por ejemplo, es más fácil ver un diff de código en rojo y verde que leerlo en texto, y es más rápido aceptar o rechazar un cambio con un comando de teclado que escribirlo.

  4. Control deslizante de autonomía (autonomy slider): El usuario debe tener control sobre el nivel de autonomía que desea otorgar a la herramienta.

    • Esta autonomía se puede ajustar según la complejidad de la tarea.

    • El rango puede ir desde una baja autonomía (como la finalización con un toque o modificar solo un fragmento de código) hasta la autonomía total del agente (como permitir que el agente modifique todo un repositorio).

Atar en corto a la IA

Dado que los LLMs son sistemas falibles y propensos a alucinaciones y déficits cognitivos, es crucial "atar en corto" a la IA.

  • La IA puede ser sobre-reactiva y generar resultados excesivamente grandes (como un diff de 10,000 líneas de código) que se convierten en un cuello de botella para la verificación humana.

  • Para que el bucle de generación-verificación sea rápido, es mejor trabajar en trozos pequeños e incrementales. Esto se logra siendo más concreto en las indicaciones (prompts).

Al igual que sucedió con el piloto automático en la conducción autónoma (un producto de autonomía parcial), la dirección correcta es construir productos de autonomía parcial en lugar de grandes demostraciones llamativas de agentes totalmente autónomos. Durante la próxima década, la oportunidad reside en desarrollar software que mueva gradualmente ese control deslizante de autonomía hacia una mayor automatización.

Especificar, generar y verificar en ciclos cortos

El objetivo es mantener visibles las decisiones y los resultados intermedios, de modo que la persona pueda aceptar, corregir o detener el proceso.