Cómo construir mejores UX con datos HTML5 * atributos

¿Alguna vez quiso agregar datos personalizados a un elemento HTML en particular para acceder más tarde con JavaScript? Antes de que HTML5 apareciera en el mercado, almacenar datos personalizados asociados con el DOM era un escándalo real, y los desarrolladores tenían que usar todo tipo de ataques desagradables, como la introducción de atributos no estándar o el uso del método setUserData () obsoleto para evitar el problema .

Afortunadamente, ya no tiene que hacerlo, ya que HTML5 ha introducido nuevos atributos globales de data-* que permiten incrustar información adicional en cualquier elemento HTML. Los nuevos atributos data-* hacen que HTML sea más extensible, por lo tanto le permiten crear aplicaciones más complejas y crear una experiencia de usuario más sofisticada sin tener que usar técnicas intensivas en recursos como llamadas Ajax o consultas de bases de datos del lado del servidor.

El soporte del navegador de los nuevos atributos globales es relativamente bueno, ya que son compatibles con todos los navegadores modernos (IE8-10 los admite parcialmente).

La sintaxis de los nuevos atributos data-* es similar a la de los atributos aria-prefixed. Puede insertar cualquier cadena en minúscula en lugar del signo * . También necesita asignar un valor a cada atributo en forma de cadena.

Supongamos que desea crear una página Acerca de nosotros y almacenar el nombre del departamento donde trabaja cada empleado. No tiene que hacer nada más aparte de agregar el atributo personalizado del data-department al elemento HTML apropiado de la siguiente manera:

 John Doe
 fulano de tal

Los atributos de data-* personalizados data-* son globales, al igual que los atributos de class e id, por lo que puedes usarlos en cada elemento HTML. También puede agregar tantos atributos data-* a una etiqueta HTML como desee. En el ejemplo anterior, por ejemplo, puede introducir un nuevo atributo personalizado llamado data-user para almacenar los nombres de usuario de los empleados.

 John Doe
 fulano de tal

Como regla general, si desea agregar su propio atributo personalizado a un elemento HTML, siempre debe prefijarlo con la cadena de data- . Del mismo modo, cuando ve un atributo con prefijo de datos en el código de otra persona, puede estar seguro de que es un atributo personalizado introducido por el autor.

Cuándo usar y cuándo no utilizar los atributos personalizados

W3C define atributos personalizados de data-* como ese:

"Los atributos de datos personalizados están destinados a almacenar datos personalizados privados en la página o aplicación, para los cuales no hay atributos o elementos más apropiados".

Vale la pena considerar el uso de los atributos data-* cuando no puede encontrar ningún otro atributo semántico para los datos que desea almacenar .

No es la mejor idea usarlos únicamente con fines de diseño, ya que para eso puede elegir entre los atributos de class y style . Si desea almacenar un tipo de datos para el cual HTML5 tiene un atributo semántico, como el atributo de datetime para el elemento, utilícelo en lugar del atributo con prefijo de datos.

Es importante tener en cuenta que los atributos data-* contienen datos que son privados para la página o la aplicación, lo que significa que los agentes de usuario los ignorarán, como los robots de los motores de búsqueda y las aplicaciones externas. El código que se ejecuta en el sitio que aloja el HTML solo puede acceder a los atributos con prefijo de datos.

Los atributos de data-* personalizados data-* son ampliamente utilizados por los frameworks frontend, tales como Bootstrap y Zurb Foundation. La buena noticia es que no necesariamente necesita saber cómo escribir JavaScript si desea utilizar los atributos con prefijo de datos como parte de un marco, ya que solo necesita agregarlos al código HTML para activar una funcionalidad de un plugin de JavaScript preescrito

El siguiente fragmento de código agrega una información sobre herramientas a la izquierda de un botón en Bootstrap al hacer uso de los atributos personalizados data-toggle data-placement, y asignarles valores apropiados.

 Información sobre herramientas a la izquierda 

Datos de data-* Atributos con CSS

Aunque no se recomienda el uso de atributos data-* solo para fines de diseño, puede seleccionar los elementos HTML a los que pertenecen con la ayuda de selectores de atributos generales. Si desea seleccionar cada elemento que tenga un cierto atributo con prefijo de datos, use esta sintaxis en su CSS:

 li [data-user] {color: blue; } 

Tenga en cuenta que no son los nombres de usuario los que se mostrarán en azul en el fragmento de código anterior, después de que todos los datos almacenados en los atributos personalizados no estén visibles, sino que los nombres de los empleados que figuran en el

elementos (en el ejemplo "John Doe" y "Jane Doe").

Si solo desea seleccionar elementos en los que un atributo con prefijo de datos toma un cierto valor, esta es la sintaxis que debe usar:

 li [data-department = "IT"] {border: azul fijo 1px; } 

Puede usar todos los selectores de atributos CSS más complicados, como el selector general de combinador de hermanos ( [data-value~="foo"] ) o el selector de comodines ( [data-value*="foo"] ), con datos- atributos prefijados también.

Acceder a data-* Atributos con JavaScript

Puede acceder a los datos almacenados en los atributos de data-* personalizados data-* con JavaScript utilizando la propiedad del conjunto de datos o el método de data() de jQuery data() .

Vanilla JavaScript

La propiedad del dataset es propiedad de la interfaz HTMLElement, lo que significa que puede usarla en cualquier etiqueta HTML. La propiedad del dataset da acceso a todos los atributos personalizados de data-* del elemento HTML dado. Los atributos se devuelven como un objeto DOMStringMap que contiene una entrada para cada atributo data-* .

En nuestro ejemplo de página Acerca de nosotros, puede verificar fácilmente los atributos personalizados que tiene "Jane Doe" utilizando la propiedad del dataset de la siguiente manera:

 var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap {usuario: "janedoe", departamento: "IT"} 

Puede ver que en el objeto DOMStringMap devuelto, los prefijos de data- se eliminan de los nombres de los atributos ( user lugar de user de data-user y department lugar de department de data-department ). Debe usar los atributos en el mismo formato si solo desea acceder al valor de un determinado atributo con prefijo de datos (en lugar de la lista de todos los atributos personalizados, como en el fragmento de código anterior).

Puede recuperar el valor de un atributo data-* específico como propiedad de la propiedad del dataset de dataset . Como mencioné anteriormente, debe omitir el prefijo de data- del nombre de la propiedad, de modo que si desea acceder al valor del atributo de data-user de data-user de Jane, puede hacerlo de esta manera:

 var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe 

el método de jQuery's data()

El método jQuery de data() hace posible obtener el valor de un atributo con prefijo de datos. Aquí también debe omitir el prefijo de data- del nombre del atributo para acceder a él correctamente. En nuestro ejemplo, puede mostrar un mensaje de alerta con el nombre del departamento donde "Jane" funciona con el siguiente código:

 $ ("# jane"). Desplazamiento (función () {var departamento = $ ("# jane"). datos ("departamento"); alerta (departamento);}); 

El método data() debe utilizarse con cuidado, ya que no solo actúa como un medio para obtener el valor de un atributo con prefijo de datos, sino también para adjuntar datos a un elemento DOM de la siguiente manera:

 var town = $ ("# jane"). data ("ciudad", "Nueva York"); 

Los datos adicionales que adjunte con el método data() jQuery obviamente no aparecerán en el código HTML como un nuevo atributo data-*, de modo que si ambas técnicas se usan al mismo tiempo, el elemento HTML dado almacenará dos conjuntos de datos, uno con HTML y el otro con jQuery.

En nuestro ejemplo "Jane" obtuvo una nueva información personalizada ( "town" ) con jQuery, pero este nuevo par clave-valor no aparecerá en HTML como un nuevo atributo de data-town . Almacenar datos de dos maneras diferentes no es la mejor práctica, por decir lo menos, así que solo use uno de los dos métodos a la vez .

Accesibilidad y data-* Atributos

Dado que los datos almacenados en atributos de data-* personalizados data-* son privados, es posible que las tecnologías de asistencia no puedan acceder a ellos. Si desea mantener su contenido accesible para usuarios con discapacidades, no se recomienda almacenar contenido que pueda ser importante para los usuarios de esta manera.

21 Consejos y trucos de Google Maps que debes saber

Google Maps es mi aplicación preferida apenas salgo de la puerta . No solo por conocer mi camino, sino por la valiosa información que brinda sobre mi ruta. Obtengo información de tráfico, conozco más sobre lugares cercanos, vigilo el tiempo y la distancia, planifico mi viaje completo y mucho más.Desde

(Consejos de tecnología y diseño)

Cree correos electrónicos receptivos rápidamente con MJML Framework

Diseñar y codificar un boletín es una tarea larga. Puede encontrar muchos consejos de diseño, pero codificar su boletín informativo en una plantilla es la parte más difícil.Ahí es donde entra en juego el marco MJML . Es uno de los mejores marcos de correo electrónico gratuitos y se compila en HTML / CSS puro, que funciona para todos los clientes de correo electrónico .Una de l

(Consejos de tecnología y diseño)