Diseño de bloques

A lo largo de los años, el equipo de Blockly diseñó muchos de sus propios bloques y ayudó a otros a diseñar los suyos. Las siguientes son algunas de las lecciones que aprendió.

Prefiere bloques de alto nivel

Siempre que sea posible, se debe adoptar un enfoque de nivel superior, incluso si reduce el rendimiento o la flexibilidad de la ejecución. Considera esta expresión de Apps Script:

SpreadsheetApp.getActiveSheet().getDataRange().getValues()

En una asignación 1:1 que preserva todas las capacidades potenciales, la expresión anterior se compilaría con cuatro bloques. Sin embargo, Blockly se orienta a un nivel superior y proporcionaría un bloque que encapsula toda la expresión. El objetivo es optimizar para el caso del 95%, incluso si eso dificulta el 5% restante. Blockly no está diseñado para reemplazar los lenguajes basados en texto, sino para ayudar a los usuarios a superar la curva de aprendizaje inicial para que puedan usar lenguajes basados en texto.

Recomendación: No conviertas toda tu API en bloques de forma ciega.

Considera las opciones de entrada del usuario

Tres bloques de repetición que muestran diferentes formas de ingresar un número: menú desplegable, campo numérico y entrada de valor.

Existen tres formas de obtener un parámetro del usuario. Un menú desplegable es el más restrictivo y es bueno para instructivos y ejercicios simples. Un campo de entrada permite más libertad y es bueno para actividades más creativas. Una entrada de bloque de valor (por lo general, con un bloque de sombra) ofrece la oportunidad de calcular un valor (p.ej., un generador aleatorio) en lugar de ser solo un valor estático.

Recomendación: Elige un método de entrada adecuado para tus usuarios.

Usa bloques condicionales y de bucle separados

Contraejemplo que muestra bloques if/then y while en la misma categoría.

Los bloques más difíciles para los usuarios nuevos son los condicionales y los bucles. Muchos entornos basados en bloques agrupan ambos bloques en la misma categoría "Controles", y ambos tienen la misma forma y el mismo color. Esto suele generar frustración, ya que los usuarios nuevos confunden los dos bloques. Blockly recomienda mover los condicionales y los bucles a las categorías “Lógica” y “Bucles” separadas, cada una con un color diferente. Esto deja claro que se trata de ideas distintas que se comportan de manera diferente, a pesar de tener formas similares.

Recomendación: Mantén los condicionales y los bucles separados.

Cómo controlar una cantidad variable de entradas

Es posible que algunos bloques requieran una cantidad variable de entradas. Algunos ejemplos son un bloque de adición que suma un conjunto arbitrario de números, un bloque if/elseif/else con un conjunto arbitrario de cláusulas elseif o un constructor de listas con una cantidad arbitraria de elementos inicializados. Existen varias estrategias, cada una con sus ventajas y desventajas.

a) El enfoque más simple es hacer que el usuario componga el bloque a partir de bloques más pequeños. Un ejemplo sería agregar tres números anidando dos bloques de adición de dos números. Otro ejemplo sería proporcionar solo bloques if/else y hacer que el usuario los anide para crear condiciones elseif.

Bloques de suma anidados: 1 + (2 + 3).

La ventaja de este enfoque es su simplicidad inicial (tanto para el usuario como para el desarrollador). La desventaja es que, en los casos en que hay una gran cantidad de anidamientos, el código se vuelve muy engorroso y difícil de leer y mantener para el usuario.

b) Una alternativa es expandir el bloque de forma dinámica para que siempre haya una entrada libre al final. Del mismo modo, el bloque borra la última entrada si hay dos entradas libres al final. Este es el enfoque que usó la primera versión de App Inventor.

Bloque que agrega cuatro entradas de valor, la última de las cuales está vacía.

Los usuarios de App Inventor no les gustaban los bloques que crecían automáticamente por varios motivos. En primer lugar, siempre había una entrada libre y el programa nunca se “completaba”. En segundo lugar, insertar un elemento en medio de la pila era frustrante, ya que implicaba desconectar todos los elementos debajo de la edición y volver a conectarlos. Dicho esto, si el orden no es importante y los usuarios pueden sentirse cómodos con los espacios en blanco en su programa, esta es una opción muy conveniente.

c) Para resolver el problema del agujero, algunos desarrolladores agregan botones +/- a bloques que agregan o quitan entradas de forma manual. Open Roberta usa dos botones de este tipo para agregar o quitar entradas de la parte inferior. Otros desarrolladores agregan dos botones en cada fila para que se puedan admitir la inserción y la eliminación desde el medio de la pila. Otros agregan dos botones de arriba abajo en cada fila para que se pueda acomodar el reordenamiento de la pila.

Es un bloque que agrega tres entradas de valor externas y tiene botones de más y menos para agregar o quitar entradas.

Esta estrategia es un espectro de opciones que van desde solo dos botones por bloque hasta cuatro botones por fila. En un extremo, está el peligro de que los usuarios no puedan realizar las acciones que necesitan. En el otro extremo, la IU está tan llena de botones que parece el puente de la nave espacial Enterprise.

d) El enfoque más flexible es agregar una burbuja de modificador al bloque. Esto se representa como un solo botón que abre un cuadro de diálogo de configuración para ese bloque. Los elementos se pueden agregar, borrar o reorganizar a voluntad.

Es un bloque que agrega tres entradas de valor y tiene un modificador para agregar o quitar entradas de valor.

La desventaja de este enfoque es que los modificadores no son intuitivos para los usuarios novatos. La introducción de mutadores requiere algún tipo de instrucción. Las aplicaciones basadas en Blockly que se orientan a niños más pequeños no deben usar modificadores. Sin embargo, una vez que se aprenden, son invaluables para los usuarios avanzados.

Recomendación: Cada estrategia tiene sus pros y contras, elige la que sea adecuada para tus usuarios.