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. Experiencia de usuario

Evaluación

  • Evaluación continua del trabajo en la asignatura

  • Elaboración y entrega de un trabajo práctico por cada bloque a lo largo del curso

    • Bloque I: End-user development

    • Bloque II: Interacción verbal

    • Bloque III: Entornos inmersivos

    • Bloque IV: Videojuegos y aprendizaje

  • Elaboración, entrega y evaluación de un trabajo final

Calificación

  • 50% entrega y defensa de trabajo final

  • 50% actividades prácticas de cada bloque

Bibliografía

1.2. Un poco de historia

  • 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

  • 1980’s: Apple Computer: Lisa + Macintosh (1984)

  • 1985—​1992: Bill Gates: Microsoft Windows 1.0 — 3.1

  • 2000’s: Steve Jobs (again)

    • 2007: iPhone, pantalla táctil capacitiva

  • 2010—​2020: Deep learning, transformers

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

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

Douglas Engelbart

En 1962, en el Stanford Research Institute, desarrolló el NLS (o 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, 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.

WYSIWYG
Demo de ventanas y ratón en Palo Alto [55'']
Interfaz WIMP de Xerox Star (1981) [1']

La interfaz WIMP de Xerox Star (1981) fue la primera interfaz gráfica de usuario 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.

WIMP

WIMP = Windows, Icons, Menus and Pointer

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 comercial que operaba con interfaz gráfica de usuario WIMP y un ratón.

Interfaces WIMP
Interfaz WIMP del Apple Macintosh (1987) [1'21'']
Ver la película "Steve Jobs"

Bill Gates

Bill Gates incorpora la interfaz WIMP a Windows.

Interfaz WIMP de Microsoft Windows (1988) [40'']
Historia de las interfaces WIMP

A user interface is the space where interactions between humans and machines occur" https://history.user-interface.io/

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.

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:

  • Sugerencias generadas por IA

  • Interacciones conversacionales (chatbots)

  • Recomendaciones y soluciones generadas por IA

  • Interacciones contextualizadas

1.3. Un poco de teoría

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

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

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

  • Filosofía y Antropología

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 ("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, etc.

Tema 2. Interacción multimodal y verbal

Teoría

Interacción multi-modal

Interfaces basadas en voz

Herramientas

DialogFlow, IBM Watson, Amazon Lex, Rasa NLU, 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

Práctica

Evaluación de la práctica final

2. Estilos de interacción

Estilos de interacción

  • Manipulación directa

  • Navegación y selección de menús

  • Rellenado de formularios

  • Lenguajes de comandos

  • Lenguaje humano (lenguaje natural)

  • Entornos inmersivos

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

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

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

  • 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

2.5. Entornos inmersivos

A tratar en el tema Entornos inmersivos

  • Interacción gestual

  • Realidad virtual

  • Realidad aumentada

  • Realidad mixta

  • Realidad extendida

3. End-User Development

Los usuarios más avanzados suelen necesitar poder 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 lo 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, el esfuerzo requerido para 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 APIs para que los desarrolladores hagan esas ampliaciones desde fuera y pidan 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é los informáticos prefieren Python y el resto de ingenieros 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.

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

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

  • Salesforce Lightning

  • Mendix

  • GeneXus

  • OutSystems

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 (normalmente visuales) para los elementos de un programa que funcione.

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

4. HERRAMIENTAS

4.1. 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!

4.2. Lenguajes block-based

4.3. Lenguajes data-flow