Asegurando que tus usuarios sigan el camino correcto: el futuro de los Modals y la gestión del enfoque

Rate this content
Bookmark

Con *dialog* y el atributo inert llegando a todos los principales navegadores en 2022, nosotros como desarrolladores web ahora tenemos primitivas simples pero poderosas para ayudar a construir flujos complejos similares a aplicaciones en la web, en lugar de las soluciones sobreingenieradas o inseguras en las que hemos confiado durante años. Vamos a desmitificar estas primitivas y hablar sobre cómo hacen que tu código sea más simple: desde HTML básico, Web Components, hasta React/similares.

Sam Thorogood
Sam Thorogood
17 min
20 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute las nuevas características de los Modals y la gestión del enfoque en el desarrollo web. El elemento diálogo permite la creación de diálogos modales que aparecen encima de otros elementos y evitan la interacción con los elementos debajo. El elemento nota puede marcar un subárbol del DOM como inerte, haciéndolo inutilizable. El componente field set puede agrupar elementos de entrada y deshabilitarlos. El uso de estas nuevas primitivas puede mejorar el control del enfoque y la experiencia del usuario en aplicaciones web.

1. Gestión del enfoque y el elemento de diálogo

Short description:

Hola, mi nombre es Sam y hoy estoy aquí para hablar sobre cómo asegurarte de que tus usuarios estén en el camino correcto, las novedades de los Modales y la gestión del enfoque. La web ha avanzado mucho y, por primera vez este año, todos los navegadores admiten estas increíbles características nuevas que podemos usar como primitivas o como parte de una biblioteca más grande. En primer lugar, ¿qué es la gestión del enfoque y por qué debería importarte? Creo que esta es la razón fundamental de por qué es importante. Las cosas de las que quiero hablar hoy son el diálogo y una nota. Estos son los dos nuevos conceptos que están disponibles en los navegadores este año y ambos son muy interesantes. Antes de continuar, ¿quién soy yo y por qué te estoy hablando? Soy un ex empleado de Google, estuve allí durante más de 10 años, fue realmente divertido. Formé parte del equipo de relaciones con los desarrolladores y parte de mi trabajo era hacer este tipo de divulgación. Nuestra tecnología todavía está en la web, por lo que queremos utilizar estas características incluso en nuestro producto SaaS para mejorar la experiencia de usuario. En general, creo que estas nuevas características nos permiten deshacernos de toneladas de código antiguo que hacía trucos extraños y cosas horribles en los navegadores para las que realmente no estaban diseñados. Por lo tanto, tener nuevas primitivas en 2022 es realmente maravilloso, puedo deshacerme de todo este código y dedicarme a las partes más interesantes de mi trabajo. El primer componente del que hablaré hoy se llama elemento de diálogo. Ahora, el diálogo puede hacer muchas cosas, la especificación es bastante amplia. Pero la razón por la que más nos importa como desarrolladores web es que puedo crear este elemento en mi página, donde quiera, y luego llamar a showModal en JavaScript. Lo que esto hace es crear ese diálogo en lo que se llama una capa superior. Ahora, la capa superior es especial, nos ofrece dos cosas. En primer lugar, no puedo hacer clic detrás de ella, se ha resuelto el problema del enfoque, mientras esté visible, no puedo interactuar con nada debajo de ella, incluidos otros diálogos que haya abierto anteriormente. Lo segundo que es realmente genial aquí es que en realidad existe fuera de la capa de representación normal del navegador. Está en una cosa llamada capa superior, lo que significa que incluso si estás dentro de algún contexto de apilamiento extraño o tus índices Z son extraños, el diálogo siempre estará en la parte superior. Me gusta demostrar esto, si puedes ver aquí, tengo este elemento extraño que está transformado de formas extrañas. Si hago clic en este botón, el diálogo en realidad está dentro de este elemento transformado, pero el navegador simplemente ignorará todo eso y lo elevará a la parte superior. Así que de esa manera, es bastante genial. Está delimitado y encapsulado de tal manera que puedes usarlo en un componente o alguna biblioteca y seguirá apareciendo en la parte superior, listo para que el usuario interactúe con él.

♪♪ ♪♪ ♪♪ Hola, mi nombre es Sam y hoy estoy aquí para hablar sobre cómo asegurarte de que tus usuarios estén en el camino correcto, las novedades de los Modales y la gestión del enfoque. Ahora, eso es mucho, y presenté esta charla a JSNation hace un tiempo, y desde entonces, creo que debería llamarse básicamente gestión del enfoque en 2022.

Ahora, la web ha avanzado mucho, y en realidad, por primera vez este año, todos los navegadores admiten estas increíbles características nuevas que podemos usar como primitivas o como parte de una biblioteca más grande.

En primer lugar, ¿qué es la gestión del enfoque y por qué debería importarte? Creo que esta es la razón fundamental de por qué es importante. Ahora, tenemos aquí un diálogo. Puedo hacer clic en él, puedo enviarlo, pero lo que realmente puedo hacer mientras está en funcionamiento es presionar Tab varias veces y pasar detrás de esta interfaz. Todavía puedo hacer clic en algunos botones que están en la página aquí. Ahora, esto es una demostración, pero muchos sitios tienen este problema si miras a tu alrededor, y el desafío es que es realmente difícil, y durante mucho tiempo, tenemos bibliotecas y polyfills que intentan mantener esto realmente, intentan resolver este problema por ti, pero o no se usan correctamente, simplemente no pueden hacer lo que quieres que hagan, o la gente simplemente se olvida, y usa un mecanismo muy básico y espera que los usuarios nunca lleguen allí, y este ejemplo es obviamente bastante complicado, no todos saben cómo pasar detrás de los elementos de la interfaz, pero este tipo de problema se filtrará de otras formas, causando a los usuarios un comportamiento extraño, y algunos ejemplos aquí.

Para ser muy preciso, las cosas de las que quiero hablar hoy son el diálogo y una nota. Ahora, estos son los dos nuevos conceptos que están disponibles en los navegadores este año, y ambos son muy interesantes. En términos de especificaciones, en realidad son bastante antiguos, se escribieron hace mucho tiempo, pero como mencioné, es la primera vez que puedes usarlos en prácticamente todos los navegadores sin problemas.

Entonces, antes de continuar, ¿quién soy yo y por qué te estoy hablando? Soy un ex empleado de Google, estuve allí durante más de 10 años, fue realmente divertido, formé parte del equipo de relaciones con los desarrolladores, y parte de mi trabajo era hacer este tipo de divulgación. De hecho, recientemente dejé Google y me uní a una pequeña startup en etapa inicial en el espacio de la energía verde llamada Gridcog, es muy divertido, recomendaría trabajar en el ámbito del clima, es algo importante, y siempre estoy dispuesto a hablar con la gente sobre eso, independientemente del contenido de esta charla.

Dicho esto, nuestra tecnología todavía está en la web, por lo que queremos utilizar estas características incluso en nuestro producto SaaS para mejorar la experiencia de usuario. Y mi sensación general de por qué estoy aquí y hablando de estos conceptos en general, y por qué quiero esto en mi navegador, quiero esto en mi aplicación web, es que para mí, estas nuevas características nos permiten deshacernos de toneladas de código antiguo que hacía trucos extraños y cosas horribles en los navegadores para las que realmente no estaban diseñados. Por lo tanto, tener nuevas primitivas en 2022 es realmente maravilloso, puedo deshacerme de todo este código y dedicarme a las partes más interesantes de mi trabajo. No lidiar con la gestión del enfoque, sino escribir aplicaciones que hagan cosas interesantes. Entonces, el primer componente del que hablaré hoy se llama elemento de diálogo. Ahora, el diálogo puede hacer muchas cosas, la especificación es bastante amplia. Pero la razón por la que más nos importa como desarrolladores web es que puedo crear este elemento en mi página, donde quiera, y luego llamar a showModal en JavaScript. Lo que esto hace es crear ese diálogo en lo que se llama una capa superior. Ahora, la capa superior es especial, nos ofrece dos cosas. En primer lugar, no puedo hacer clic detrás de ella, se ha resuelto el problema del enfoque, mientras esté visible, no puedo interactuar con nada debajo de ella, incluidos otros diálogos que haya abierto anteriormente. Lo segundo que es realmente genial aquí es que en realidad existe fuera de la capa de representación normal del navegador. Está en una cosa llamada capa superior, lo que significa que incluso si estás dentro de algún contexto de apilamiento extraño o tus índices Z son extraños, el diálogo siempre estará en la parte superior. Me gusta demostrar esto, si puedes ver aquí, tengo este elemento extraño que está transformado de formas extrañas. Si hago clic en este botón, el diálogo en realidad está dentro de este elemento transformado, pero el navegador simplemente ignorará todo eso y lo elevará a la parte superior. Así que de esa manera, es bastante genial. Está delimitado y encapsulado de tal manera que puedes usarlo en un componente o alguna biblioteca y seguirá apareciendo en la parte superior, listo para que el usuario interactúe con él.

Ahora, esa es la parte más interesante del diálogo para mí, pero hay algunas otras cosas que quiero cubrir antes de continuar.

2. Elemento de fondo y comportamiento de la tecla Escape

Short description:

Uno de los aspectos interesantes del elemento de diálogo es el elemento de fondo, que proporciona un elemento de pantalla completa para cada diálogo. También incluye un controlador incorporado para la tecla Escape. Si deseas evitar que el diálogo se cierre cuando se presiona la tecla Escape, puedes agregar un controlador de eventos para el evento Cancelar.

Uno de ellos es este elemento de fondo, por lo que cada diálogo tendrá de forma gratuita un elemento de pantalla completa. Puedes cambiar su color o fondo o lo que sea. También tiene un controlador incorporado para la tecla Escape. Ahora esto es un poco extraño pero refleja cuando se creó en 2014, pero si presiono Escape en mi teclado ahora, este diálogo se cerrará, y está bien, pero es un poco extraño porque no hay una analogía en dispositivos móviles u otras plataformas. Sabes, no puedes presionar el botón de retroceso en tu teléfono móvil para cerrarlo. Desafortunadamente, eso te llevará a la página anterior. Hay algo que viene en camino llamado Close Watcher como un poco aparte, que está totalmente en estado de borrador en este momento, lo cual ayuda a lidiar con cosas como cerrar diálogos, y de hecho, es uno de los ejemplos mencionados en su descripción, pero quién sabe si eso sucederá. Mi consejo, sinceramente, es que si no deseas este comportamiento, puedes agregar un controlador de eventos para el evento Cancelar, y luego presionar Escape no hará nada, ¿verdad? Y puedes controlar esa interacción con el teclado, o tal vez cerrar el diálogo con botones. Puedes hacerlo completamente por ti mismo.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

UX Asincrónico
React Advanced Conference 2021React Advanced Conference 2021
21 min
UX Asincrónico
Top Content
"Por favor, no cierre ni abandone esta página" puede enviar escalofríos por tu espalda, pero codificar el flujo UX adecuado para async podría hacerte cuestionar tu trabajo diario. ¿Cómo podemos manejar adecuadamente el UX para el código asincrónico en aplicaciones altamente responsivas? Vamos a explorar cómo la introducción de código asincrónico crea un desafío para el UX.
Las animaciones en React Native deben ser divertidas
React Advanced Conference 2022React Advanced Conference 2022
28 min
Las animaciones en React Native deben ser divertidas
¿Tienes miedo de las animaciones? Bueno, no deberías, React Native Reanimated te tiene cubierto. Tu aplicación móvil puede contar una historia a través de las animaciones, puede ayudar a los usuarios mediante microinteracciones y diferenciar tu aplicación de las demás.
Desarrollo de juegos con ReactJS, CSS y React Three Fiber
JS GameDev Summit 2023JS GameDev Summit 2023
22 min
Desarrollo de juegos con ReactJS, CSS y React Three Fiber
En esta charla, compartiré mi experiencia en el desarrollo de juegos utilizando ReactJS/CSS. Exploraremos cómo aprovechar al máximo la gestión de componentes proporcionada por esta biblioteca, junto con las capacidades de CSS para crear una interfaz de usuario atractiva. Además, descubriremos cómo aprovechar la biblioteca React Three Fiber para crear juegos con una experiencia en 3D.
Remixando Cómo Donamos
Remix Conf Europe 2022Remix Conf Europe 2022
32 min
Remixando Cómo Donamos
Una revisión de cómo estamos utilizando Remix en Daffy.org para cambiar la forma en que las personas donan a organizaciones benéficas.
Hablaremos sobre por qué decidimos usar Remix, cómo lo hemos utilizado y migrado desde nuestra aplicación frontend anterior, y algunos patrones y bibliotecas que hemos desarrollado internamente.
Prueba tu interfaz de usuario en el navegador REAL
TestJS Summit 2021TestJS Summit 2021
33 min
Prueba tu interfaz de usuario en el navegador REAL
Imagina escribir una función compleja sin pruebas unitarias. Tendrías que verificar cada escenario manualmente, una y otra vez. Engorroso, pero así es como la mayoría de los equipos construyen interfaces de usuario.
Imagina si pudieras construir interfaces de usuario y probar interfaces de usuario en el mismo lugar. Si tus componentes incluyeran expectativas de cómo se suponía que debían comportarse, sabrías al instante cuando se rompieran.Storybook proporciona un enfoque organizado para construir interfaces de usuario. Documentas los casos de uso de un componente como historias, que luego se representan de forma aislada. Las historias son como pruebas, pero para la interfaz de usuario. Las pruebas de interacción de Storybook te permiten escribir secuencias de interacción y verificar expectativas en la propia historia. Esto te permite ejecutar y depurar pruebas de interfaz de usuario en el mismo entorno en el que se desarrollan los componentes de interfaz de usuario: tu navegador.
Raygui: Una interfaz de usuario inmediata de modo C para el desarrollo de herramientas Wasm
JS GameDev Summit 2023JS GameDev Summit 2023
19 min
Raygui: Una interfaz de usuario inmediata de modo C para el desarrollo de herramientas Wasm
raygui es una interfaz de usuario inmediata muy ligera diseñada para el desarrollo de herramientas, combinada con raylib, permite la creación de pequeñas herramientas web Wasm de alto rendimiento. En esta charla analizaremos este caso de uso específico para el desarrollo de herramientas.

Workshops on related topic

¿Deberíamos tener lógica de negocio en la interfaz de usuario?
JSNation 2022JSNation 2022
148 min
¿Deberíamos tener lógica de negocio en la interfaz de usuario?
WorkshopFree
Samuel Pinto
Samuel Pinto
¿Cuántas veces has dicho o escuchado 'esta es lógica de negocio, no debería estar aquí'?En este masterclass, crearemos una aplicación frontend moderna utilizando patrones antiguos y aprenderás cómo construir aplicaciones que tengan una interfaz de usuario y servicios desacoplados.Comenzaremos con una aplicación React que tiene toda su lógica en la interfaz de usuario. Luego, paso a paso, extraeremos las reglas y operaciones para alcanzar ese punto óptimo de independencia.