Navegación con el teclado

En esta guía, se explica cómo usar la navegación predeterminada del teclado como se implementa actualmente en Blockly.

Cómo usar la navegación con el teclado

Para que la navegación con el teclado se realice correctamente, el usuario debe poder completar las siguientes tareas:

  • Cómo moverse por el lugar de trabajo
  • Conecta bloques en un lugar de trabajo
  • Agrega un bloque al espacio de trabajo
  • Cómo quitar bloques
  • Navega por la caja de herramientas
  • Cómo navegar por la ventana emergente
  • Cómo insertar bloques desde el menú flotante

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

Cómo habilitar la navegación con el teclado

Un usuario puede habilitar y deshabilitar la navegación del teclado presionando Mayúsculas + Ctrl + k. Cuando se habilita la navegación con el teclado por primera vez, aparece una línea roja intermitente en el espacio 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úsculas + Control + K, aparece una línea roja intermitente en la pantalla. Este es el cursor.

Si presionas Intro, se crea una línea azul en la ubicación actual que representa el marcador del usuario. Un marcador muestra una ubicación de destino para la inserción de bloques. No se actualiza a medida que mueves el cursor por el espacio de trabajo.
Cuando un usuario presiona Intro, aparece una línea azul en la pantalla. Este es el marcador.

Usa el cursor predeterminado

El lugar de trabajo se compone de entradas, campos, conexiones, bloques y coordenadas del lugar de trabajo. El cursor predeterminado se mueve por el espacio 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 el 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 espacio de trabajo presionando A dos veces. Para mover el cursor en el espacio de trabajo, usa Mayúsculas + WASD. Para moverte al nivel de la pila, usa la tecla D.
El cursor en el espacio de trabajo de Blockly se mueve cuando el usuario presiona las teclas Mayúsculas y W, A, S y D. Cuando el usuario presiona d, el cursor aparece como un rectángulo alrededor de la primera pila de bloques.

Nivel de pila

En el nivel de la pila, puedes navegar entre pilas de bloques en el espacio de trabajo con las teclas 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 tecla 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 el 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 anteriores, siguientes y de salida de un bloque.

A nivel del bloque y de la conexión, puedes navegar por las conexiones externas con 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 de 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 se encuentran 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 editables y las entradas del bloque actual con W y S. En el caso de un campo, el cursor es un rectángulo rojo continuo. Para una entrada, el cursor es una pieza de rompecabezas roja intermitente. Cuando el cursor esté sobre 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 está 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 presiona Intro, se abre un menú desplegable. El usuario presiona la tecla S para seleccionar un valor en el menú desplegable y, luego, presiona Intro para cerrarlo.

Cómo conectar bloques en el lugar de trabajo

  1. Navega a la conexión de destino con las teclas WASD.
  2. Marca la conexión con la tecla Intro.
  3. Navega a un punto de conexión válido con las teclas WASD.
  4. Conecta los dos bloques con la llave 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.

Cómo mover un bloque en el lugar de trabajo

Por lo general, en Blockly, para mover un bloque al espacio de trabajo, debes tomarlo, arrastrarlo a la posición deseada y soltarlo. Con las combinaciones de teclas, puedes marcar tu ubicación de destino, navegar al bloque que deseas mover y, luego, indicarle que se mueva.

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

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

Bloques de desprendimiento

Por lo general, en Blockly, para desconectar dos bloques, debes tomar el bloque inferior y arrastrarlo fuera del bloque superior. Con las combinaciones de teclas, puedes desconectar bloques presionando X con el cursor sobre la conexión que deseas romper.

  1. Navega a la conexión que quieres romper con las teclas WASD.
  2. Corta la conexión con X

Dos bloques están conectados en la pantalla con el cursor en el medio. Cuando el usuario presiona la tecla X, los bloques se desconectan.

Cómo insertar un bloque de la caja de herramientas

  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 desplazarte 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 T, se abre una caja de herramientas que muestra diferentes categorías de bloques. Presiona S para desplazarte por las diferentes categorías. Cuando un usuario presiona d, se destaca el primer bloque de la categoría. 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 a las personas les podría interesar experimentar:

  1. Asignaciones de teclas: Indica qué teclas deben asignarse a qué acciones.
  2. Texto para lectores de pantalla/Registro/Advertencias: Indica cómo un lector de pantalla debe leer las ubicaciones de los cursores, así como los errores o las 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. Aspecto del cursor: Cómo deben verse el cursor y el marcador.

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

Si tienes otras áreas con las que quieres experimentar y con las que podamos ayudarte, completa el formulario.

Preguntas frecuentes

P.: ¿Por qué no usaste las teclas de flecha para la navegación con el teclado?
A: Por lo general, los lectores de pantalla usan las teclas de flecha. No queríamos interferir con esto, por lo que elegimos usar las teclas WASD.
Sin embargo, reconocemos que cada usuario tiene necesidades diferentes, por lo que te recomendamos crear una forma sencilla de cambiar las asignaciones de teclas.

P.: Parece bastante complicado. ¿Por qué necesitamos diferentes capas?
A: Cuando pensamos en la navegación con el teclado, necesitábamos una forma estructurada de movernos por los diferentes bloques, conexiones, campos, entradas y coordenadas del espacio de trabajo.
De forma interna, lo representamos con un árbol de sintaxis abstracta (AST). La implementación predeterminada del cursor no se aleja mucho de este modelo.Esto es intencional para que los desarrolladores comprendan mejor la arquitectura subyacente. Hay otros cursores que podrían ser más fáciles de entender para un usuario final.

Limitaciones

Aún no admitimos la navegación a componentes que no son de bloqueo (p.ej., papelera, botones de zoom y botones flotantes). Para obtener más información sobre las limitaciones, consulta la lista de errores abiertos de navegación del teclado.