Navegación con el teclado

Esta guía se centra en cómo usar la navegación de teclado predeterminada, ya que se implementa actualmente en Blockly.

Cómo usar la navegación con el teclado

Para que la navegación con el teclado sea exitosa, el usuario debe poder completar las siguientes tareas:

  • Cómo desplazarte por el lugar de trabajo
  • Conecta bloques en un espacio de trabajo
  • Agrega un bloque al lugar de trabajo
  • Separar bloques
  • Cómo navegar por la caja de herramientas
  • Navegar por el menú flotante
  • Insertar bloques del menú flotante

A continuación, se explica cómo la navegación predeterminada del teclado de Blockly realiza estas tareas.

Cómo habilitar la navegación con el teclado

Para habilitar o inhabilitar la navegación con el teclado, el usuario puede presionar Mayúsculas + Ctrl + k. Cuando se habilita la navegación con el teclado por primera vez, aparece una línea roja intermitente en el lugar de trabajo. Este es el cursor. Muestra la ubicación actual del usuario y se actualiza a medida que este navega por el lugar de trabajo.
Cuando un usuario presiona Mayús k, aparece una línea roja intermitente en la pantalla. Este es el cursor.

Si presionas Intro, se creará una línea azul en la ubicación actual que mostrará el marcador de un usuario. Un marcador muestra una ubicación de segmentación para la inserción de bloqueo. No se actualiza cuando mueves el cursor por el lugar de trabajo.
Cuando un usuario presione Intro, aparecerá una línea azul en la pantalla. Este es el marcador.

Cómo usar el cursor predeterminado

El lugar de trabajo consta de entradas, campos, conexiones, bloques y coordenadas del lugar de trabajo. El cursor predeterminado se mueve por el lugar de trabajo dividiendo todos los componentes en diferentes niveles.

Para navegar entre niveles, usa las teclas A y D. Para navegar dentro de un nivel, usa las teclas W y S.

Nivel de Workspace

Presiona Mayúsculas + Ctrl + k para ingresar al modo de navegación con teclado. Esto coloca el cursor en el lugar de trabajo o en el primer bloque del lugar de trabajo. Si el cursor está en un bloque, muévelo al nivel del lugar de trabajo presionando A dos veces. Para mover el cursor en el lugar de trabajo, usa Mayúsculas + WASD. Para pasar al nivel de la pila, usa la tecla D.
El cursor del espacio de trabajo en bloques se mueve cuando el usuario presiona las teclas Mayúsculas y W A S D. Cuando el usuario presiona d, el cursor aparece como un rectángulo alrededor de la primera pila de bloques.

Nivel de pila

A nivel de la pila, puedes navegar entre las pilas de bloques en el lugar de trabajo con las claves W y S. En este nivel, el cursor se representa con un rectángulo rojo sólido alrededor de todos los bloques de una pila. Para ir al primer bloque de la pila seleccionada, usa la clave D.
Cuando el usuario presiona s, el cursor se mueve a la siguiente pila de bloques. Cuando el usuario presiona d, el cursor aparece como una línea roja intermitente sobre el primer bloque de la pila seleccionada.

Nivel de bloqueo y conexiones

Este nivel contiene un bloque y todas las conexiones externas del bloque. El cursor predeterminado está configurado para omitir el bloque si hay una conexión anterior o de salida. Si no existe ninguno, el cursor se moverá al bloque, como se muestra a continuación.

Cuando el usuario presiona d, el cursor pasa de ser un rectángulo rojo alrededor de la pila de bloques a ser la mitad de un rectángulo que rodea al primer bloque de la pila.

A continuación, se muestran las tres conexiones externas posibles.
Una línea roja destaca las tres posibles conexiones externas. Estas son las conexiones anterior, siguiente y de salida en un bloque.

A nivel de bloque y de conexión, puedes navegar por las conexiones externas mediante las teclas W y S. En este nivel, el cursor se representa con un contorno rojo intermitente de la conexión actual. Para ir al primer campo o entrada en un bloque, presiona D.
Cuando el usuario presiona la tecla S, el cursor aparece como una línea roja intermitente en la siguiente conexión de un bloque. Cuando un usuario presiona la tecla d, el cursor aparece como un rectángulo rojo alrededor del primer campo del bloque.

Campos y nivel de entrada

Este nivel contiene todos los campos y las entradas que están en el bloque. A continuación, se muestran ejemplos de cómo se ven los campos y las entradas.
Un rectángulo rojo destaca ejemplos de entradas y campos en un bloque.
En este nivel, puedes navegar por los campos y las entradas editables del bloque actual con las teclas W y S. En el caso de un campo, el cursor es un rectángulo rojo sólido. Para una entrada, el cursor es una pieza de rompecabezas roja intermitente. Cuando el cursor esté en una entrada, presiona D para moverte al bloque conectado.

El cursor se mueve por las entradas y los campos del bloque cuando un usuario presiona la tecla S. Cuando un usuario presiona d mientras se encuentra en una entrada con un bloque conectado, el cursor aparece como una línea roja intermitente sobre el bloque conectado.

Cuando el cursor esté en un campo, presiona Intro para editarlo.

El cursor se muestra como un rectángulo rojo alrededor de un campo. Cuando el usuario presione Intro, se abrirá un menú desplegable. El usuario presiona la tecla S para seleccionar un valor en el menú desplegable y, luego, presiona Intro para cerrar el menú desplegable.

Conecta bloques en el lugar de trabajo

  1. Usa las claves WASD para navegar a tu conexión de destino.
  2. Marca la conexión con la tecla Intro.
  3. Navega a un punto de conexión válido con las claves WASD.
  4. Conecta los dos bloques con la tecla I (para insertar).

Una conexión de entrada tiene un punto azul que indica que está marcada. Cuando el usuario presiona i en una conexión válida, el bloque se mueve al punto de conexión marcado.

Mueve un bloque en el lugar de trabajo

Por lo general, en Blockly, mueves un bloque al espacio de trabajo levantándolo, arrastrándolo a la posición deseada y soltándolo. Con las combinaciones de teclas, puedes marcar la ubicación de destino, navegar hasta el bloque que deseas mover y indicarle que se mueva.

  1. Navega a una posición en el lugar de trabajo con las teclas Mayúsculas + WASD.
  2. Marca esa ubicación en el lugar de trabajo con la tecla Intro.
  3. Navega hasta el bloque que deseas mover con las teclas WASD.
  4. Mueve el bloque a la ubicación marcada con la tecla I.

Se muestra un cursor en el lugar de trabajo en bloque. Cuando el usuario presiona Intro, marca su ubicación y aparece una línea azul en esta posición. Con las teclas WASD, mueven el cursor a la conexión externa de un bloque. Cuando el usuario presiona i, el bloque se mueve a la ubicación marcada.

Bloques de desmontaje

Por lo general, en Blockly, desconectas dos bloques eligiendo el bloque inferior y arrastrándolo fuera del bloque superior. Con las combinaciones de teclas, puedes desconectar bloques cuando presionas X con el cursor en la conexión que deseas interrumpir.

  1. Navega hasta la conexión que quieras interrumpir con las teclas WASD.
  2. Interrumpe la conexión con X

Dos bloques están conectados en la pantalla y el cursor se muestra en el medio de ellos. Cuando el usuario presiona la tecla x, los bloques se desconectan.

Cómo insertar un bloque desde Toolbox

  1. Presiona la tecla T para abrir la caja de herramientas.
  2. Usa las teclas W y S para desplazarte por las categorías.
  3. Presiona la tecla D para moverte a los bloques del menú flotante
  4. Navega por los bloques con las teclas W y S
  5. Presiona la tecla Intro para insertar un bloque del menú flotante

Cuando un usuario presiona, se abre una caja de herramientas que muestra diferentes categorías de bloques. Cuando presionas s, se pasa por las diferentes categorías. Cuando un usuario presiona d, el primer bloque de la categoría se destaca. Si presionas Intro, se coloca el bloque en el espacio de trabajo y se cierra la caja de herramientas.

Experimentación

Creemos que hay cuatro áreas principales con las que las personas podrían estar interesadas en experimentar:

  1. Asignaciones de claves: Qué claves deben asignarse a qué acciones.
  2. Texto para lectores de pantalla/Registros/Advertencias: Indica cómo un lector de pantalla debe leer las ubicaciones de los cursores, así como los errores o advertencias.
  3. Navegación del lugar de trabajo: Indica cómo un usuario navega por los diferentes bloques, campos, entradas y conexiones del lugar de trabajo.
  4. Apariencia del cursor: Es el aspecto que deberían tener el cursor y el marcador.

Para obtener más información sobre cómo usar estas APIs, consulta el lab de código de navegación con teclado Blockly.

Si tienes alguna otra área en la que quieras experimentar y que podamos ayudarte, completa el formulario.

Preguntas frecuentes

P.: ¿Por qué no se utilizaron las teclas de flecha para la navegación con el teclado?
R: Los lectores de pantalla suelen usar las teclas de flecha. No queríamos interferir en esto y, por lo tanto, elegimos usar las claves WASD.
Sin embargo, reconocemos que cada persona tiene necesidades diferentes, por lo que te recomendamos que crees una manera fácil de cambiar las asignaciones de claves.

P.: Parece bastante complicado, ¿por qué necesitamos distintas capas?
R: Cuando pensamos en la navegación con teclado, necesitábamos una forma estructurada de movernos por los diferentes bloques, conexiones, campos, entradas y coordenadas del lugar de trabajo.
De forma interna, lo representamos con un árbol de sintaxis abstracto (AST). La implementación del cursor predeterminado no se aleja mucho de este modelo.Esto tiene como objetivo brindar a los desarrolladores una mejor comprensión de la arquitectura subyacente. Existen otros cursors que podrían ser más fáciles de comprender para el usuario final.

Limitaciones

Aún no admitimos la navegación a componentes que no estén bloqueados (p.ej., papelera, botones de zoom y botones flotantes). Para obtener más información sobre las limitaciones, consulta la lista de bugs de navegación con teclado abierto.