Como Crear La Mejor Experiencia De Usuario Con Atributos HTML5

¿Alguna vez has querido añadir datos personalizados a un elemento HTML, con el fin particular de acceder con JavaScript a dicho elemento? Antes de que HTML5 hiciera su aparición en el mercado, el almacenamiento de datos personalizados asociados con el DOM fue un verdadero problema, y los desarrolladores tuvieron que usar todo tipo de hacks desagradables, tales como la introducción de atributos no estándar o utilizando el método setUserData() para solucionar el problema.

Afortunadamente esto ya no se tiene que hacer, ya que HTML5 ha introducido nuevos atributos data-* globales que permiten insertar la información adicional en cualquier elemento HTML. Los nuevos atributos data-* HTML hacen más extensible, por lo tanto, te permiten desarrollar aplicaciones complejas y crear la mejor experiencia de usuario, y crear una experiencia de usuario más sofisticada y sin tener que usar técnicas que consumen muchos recursos como las llamadas con ajax o consultas de bases de datos del lado del servidor.

El soporte de los navegadores para los nuevos atributos globales en HTML5 es relativamente buena, ya que están soportados por todos los navegadores modernos (IE8-10 parcialmente las admite).

Sintaxis de los Atributos data- *

La sintaxis de los nuevos atributos Data- * es similar a la de los atributos aria-prefixed. Puedes insertar cualquier cadena en minúsculas en lugar del signo *. También es necesario asignar un valor a cada atributo en la forma de una cadena.

Digamos que deseas crear una página Acerca de nosotros (About Us), y almacenar el nombre del departamento en el que trabaja cada empleado. No tienes que hacer nada más, aparte de añadir el atributo personalizado por departamento (data-department) en el elemento HTML correspondiente de la siguiente manera:

• John Doe
• Jane Doe

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

• John Doe
• Jane Doe

Como regla general, si deseas añadir un atributo personalizado a un elemento HTML, siempre se tiene que prefijar con la cadena data, de esta manera como se usa un dato personalizado en HTML5. Del mismo modo, cuando se ve un atributo con el prefijo data en el código de otra persona, se puede saber con certeza que se trata de un atributo personalizado introducido por el autor del código.

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

El W3C define los atributos personalizados de javascript data-* de este modo:

«Atributos de datos personalizados están destinados para almacenar datos privados personalizados a la página o aplicación, para los que no son atributos o elementos más apropiados.»

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

No es la mejor idea para utilizarlos únicamente para los propósitos de diseño, como para que pueda elegir el estilo de los atributos de clase. Si deseas almacenar un tipo de datos para los que HTML5 tiene un atributo semántica, tales como el atributo de fecha y hora.

Es importante señalar que los atributos data-* almacenan datos que son privados a la página o la aplicación, lo que significa que serán ignorados por los agentes de usuario, tales como los robots de motores de búsqueda y las aplicaciones externas.

Los atributos personalizados data-* son ampliamente utilizados por los framework de frontend, como Bootstrap y Foundation Zurb. La buena noticia es que no necesariamente tienes que saber cómo programar en JavaScript si deseas utilizar atributos de datos con prefijo como parte de un framework, sólos necesita agregarlos al código HTML para activar una funcionalidad de una pre plugin de JavaScript escrito.

El siguiente fragmento de código añade un tooltip a la izquierda a un botón en la rutina de carga, haciendo uso de la técnica de conmutación y los atributos personalizados de colocación de los datos, y la asignación de valores que les son propios.

    Tooltip a la izquiera

Aplicar CSS A Los Atributos Personalizados En JavaScript

Aunque no se recomienda el uso de los atributos data-* para propósitos de diseño, puedes seleccionar los elementos HTML a los que pertenecen, con la ayuda de selectores de atributos generales. Si deseas seleccionar cada elemento que tiene un cierto atributo, debes usar la siguiente sintaxis en el CSS:

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

Con el anterior fragmento CSS, los nombres de los empleados que figuran en los elementos li se verán afectados por la regla CSS aplicada.

Si sólo deseas seleccionar elementos en los que un atributo personalizado lleva un determinado valor, esta es la sintaxis para usar:

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

Puedes utilizar todo el CSS con selectores de atributos, tales como el selector de general de combinacion ([data-value~=»foo»]) o el selector de comodín ([datos de valor * = «foo»]).

¿Como Acceder A Los Atributos Personalizados data-* Con JavaScript?

Se puede acceder a los datos almacenados en los atributos personalizados con JavaScript o bien mediante el uso de la propiedad dataset, o el método data() de jQuery.

Acceder A Los Atributos Personalizados Con JavaScript Básico

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

En nuestro ejemplo, se usa la propiedad dataset de la siguiente manera:

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

Se puede ver que en el objeto DOMStringMap devuelto de los prefijos de data-* se obtienen de los nombres (name) de los atributos. Es necesario usar los atributos en el mismo formato si solo deseas tener acceso al valor de un atributo determinado.

Se puede obtener el valor de un atributo especifico como una propiedad de la propiedad del conjunto de datos. Como se ha mencionado antes, es necesario omitir el prefijo de datos a partir del nombre de la propiedad, por lo que si deseas acceder al valor de atributo de usuario de datos de Jane, puedes hacerlo de esta manera:

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

Método jQuery data()

El metodo data() de jQuery hace que sea posible obtener el valor de un atributo personalizado de javascript. Aquí también hay que omitir el prefijo de datos a partir del nombre del atributo para acceder a ella adecuadamente. En nuestro ejemplo, se puede mostrar un mensaje de alerta con el nombre del departamento en el que «Jane» trabaja, y eso se hace con el siguiente código:

$("#jane").hover( function() {
    var department = $("#jane").data("department");
    alert(department);
});

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

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

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

En nuestro ejemplo «Jane» consiguió un nuevo dato personalizados («ciudad») con jQuery, pero este nuevo par clave-valor no aparecerá en HTML como un nuevo atributo de la ciudad de datos. El almacenamiento de datos de dos maneras diferentes, no es la mejor práctica.